path: root/makima/frontend/src/components/directives/TaskSlideOutPanel.tsx

import { useState, useEffect, useCallback } from "react";
import { useTaskSubscription } from "../../hooks/useTaskSubscription";
import type { TaskOutputEvent } from "../../hooks/useTaskSubscription";
import { TaskOutput } from "../mesh/TaskOutput";
import { WorktreeFilesPanel } from "../mesh/WorktreeFilesPanel";
import { getTaskOutput } from "../../lib/api";

interface TaskSlideOutPanelProps {
  taskId: string;
  taskName?: string;
  isOpen: boolean;
  onClose: () => void;
}

export function TaskSlideOutPanel({
  taskId,
  taskName,
  isOpen,
  onClose,
}: TaskSlideOutPanelProps) {
  const [entries, setEntries] = useState<TaskOutputEvent[]>([]);
  const [isStreaming, setIsStreaming] = useState(false);
  const [loadingHistory, setLoadingHistory] = useState(false);

  // Escape key handler
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    if (isOpen) document.addEventListener("keydown", handleEsc);
    return () => document.removeEventListener("keydown", handleEsc);
  }, [isOpen, onClose]);

  // Load historical output when panel opens with a taskId
  useEffect(() => {
    if (!isOpen || !taskId) {
      setEntries([]);
      setIsStreaming(false);
      return;
    }

    let cancelled = false;
    setLoadingHistory(true);

    getTaskOutput(taskId)
      .then((res) => {
        if (cancelled) return;
        // Map TaskOutputEntry to TaskOutputEvent
        const mapped: TaskOutputEvent[] = res.entries.map((e) => ({
          taskId: e.taskId,
          messageType: e.messageType,
          content: e.content,
          toolName: e.toolName,
          toolInput: e.toolInput,
          isError: e.isError,
          costUsd: e.costUsd,
          durationMs: e.durationMs,
          isPartial: false,
        }));
        setEntries(mapped);
      })
      .catch((err) => {
        if (cancelled) return;
        console.error("Failed to load task output history:", err);
      })
      .finally(() => {
        if (!cancelled) setLoadingHistory(false);
      });

    return () => {
      cancelled = true;
    };
  }, [isOpen, taskId]);

  // Handle live output events
  const handleOutput = useCallback(
    (event: TaskOutputEvent) => {
      if (event.isPartial) return;
      setEntries((prev) => [...prev, event]);
      setIsStreaming(true);
    },
    []
  );

  // Handle task updates (to detect completion)
  const handleUpdate = useCallback(
    (event: { status: string }) => {
      if (
        event.status === "completed" ||
        event.status === "failed" ||
        event.status === "cancelled"
      ) {
        setIsStreaming(false);
      } else if (event.status === "running") {
        setIsStreaming(true);
      }
    },
    []
  );

  // Subscribe to live output
  useTaskSubscription({
    taskId: isOpen ? taskId : null,
    subscribeOutput: isOpen && !!taskId,
    onOutput: handleOutput,
    onUpdate: handleUpdate,
  });

  return (
    <>
      {/* Backdrop overlay */}
      <div
        className={`fixed inset-0 bg-black/30 z-50 transition-opacity duration-300 ${
          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        onClick={onClose}
      />

      {/* Slide-out panel */}
      <div
        className={`fixed top-0 right-0 h-full w-[550px] max-w-[90vw] z-50 bg-[#0d1117] border-l border-[rgba(117,170,252,0.2)] shadow-xl shadow-black/50 flex flex-col transition-transform duration-300 ease-in-out ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.25)] shrink-0">
          <div className="flex items-center gap-2 min-w-0 flex-1">
            <span className="text-[10px] font-mono text-[#75aafc] uppercase tracking-wide shrink-0">
              Task
            </span>
            <span className="text-[12px] font-mono text-white truncate">
              {taskName || taskId}
            </span>
            {isStreaming && (
              <span className="flex items-center gap-1 px-1.5 py-0.5 bg-green-400/10 border border-green-400/30 shrink-0">
                <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
                <span className="text-green-400 font-mono text-[9px] uppercase">
                  Live
                </span>
              </span>
            )}
          </div>
          <button
            type="button"
            onClick={onClose}
            className="text-[#7788aa] hover:text-white font-mono text-sm transition-colors ml-2 shrink-0 w-6 h-6 flex items-center justify-center"
          >
            ✕
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
          {/* Task Output section (~60% height) */}
          <div className="flex-[3] min-h-0 flex flex-col border-b border-[rgba(117,170,252,0.15)]">
            {loadingHistory ? (
              <div className="flex-1 flex items-center justify-center">
                <span className="font-mono text-xs text-[#555] animate-pulse">
                  Loading output...
                </span>
              </div>
            ) : (
              <TaskOutput
                entries={entries}
                isStreaming={isStreaming}
                taskId={taskId}
              />
            )}
          </div>

          {/* Worktree Changes section (~40% height) */}
          <div className="flex-[2] min-h-0 overflow-y-auto">
            {taskId && <WorktreeFilesPanel taskId={taskId} />}
          </div>
        </div>
      </div>
    </>
  );
}