Initial Control system

1 files changed, 634 insertions, 0 deletions

diff --git a/makima/frontend/src/routes/mesh.tsx b/makima/frontend/src/routes/mesh.tsx
new file mode 100644
index 0000000..852ce58
--- /dev/null
+++ b/makima/frontend/src/routes/mesh.tsx
@@ -0,0 +1,634 @@
+import { useState, useCallback, useEffect, useRef, useMemo, type MouseEvent } from "react";
+import { useParams, useNavigate } from "react-router";
+import { Masthead } from "../components/Masthead";
+import { TaskList } from "../components/mesh/TaskList";
+import { TaskDetail } from "../components/mesh/TaskDetail";
+import { TaskOutput } from "../components/mesh/TaskOutput";
+import { UnifiedMeshChatInput } from "../components/mesh/UnifiedMeshChatInput";
+import { useTasks } from "../hooks/useTasks";
+import { useTaskSubscription, type TaskUpdateEvent, type TaskOutputEvent } from "../hooks/useTaskSubscription";
+import type { TaskWithSubtasks, MeshChatContext } from "../lib/api";
+import { startTask as startTaskApi, stopTask as stopTaskApi, getTaskOutput } from "../lib/api";
+
+// View modes for the task detail page
+type ViewMode = "split" | "task" | "output";
+
+// Minimum panel widths (in pixels)
+const MIN_TASK_WIDTH = 300;
+const MIN_OUTPUT_WIDTH = 200;
+
+// TODO: Store task output in database for resuming from any device.
+// Currently only persisted in localStorage which is device-specific.
+
+// LocalStorage key prefix for task output
+const STORAGE_KEY_PREFIX_OUTPUT = "makima-task-output-";
+
+// Load persisted output from localStorage with deduplication
+function loadPersistedOutput(taskId: string): TaskOutputEvent[] {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY_PREFIX_OUTPUT + taskId);
+    if (!stored) return [];
+    const entries = JSON.parse(stored) as TaskOutputEvent[];
+
+    // Deduplicate consecutive identical entries (cleanup from previous bug)
+    const deduplicated: TaskOutputEvent[] = [];
+    for (const entry of entries) {
+      const last = deduplicated[deduplicated.length - 1];
+      if (
+        !last ||
+        last.messageType !== entry.messageType ||
+        last.content !== entry.content ||
+        last.toolName !== entry.toolName
+      ) {
+        deduplicated.push(entry);
+      }
+    }
+
+    // Save cleaned up version if we removed duplicates
+    if (deduplicated.length !== entries.length) {
+      savePersistedOutput(taskId, deduplicated);
+    }
+
+    return deduplicated;
+  } catch {
+    return [];
+  }
+}
+
+// Save output to localStorage
+function savePersistedOutput(taskId: string, entries: TaskOutputEvent[]): void {
+  try {
+    localStorage.setItem(STORAGE_KEY_PREFIX_OUTPUT + taskId, JSON.stringify(entries));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+// Clear output from localStorage
+function clearPersistedOutput(taskId: string): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY_PREFIX_OUTPUT + taskId);
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export default function MeshPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { tasks, loading, error, conflict, clearConflict, fetchTask, fetchTasks, editTask, removeTask, saveTask } = useTasks();
+  const [taskDetail, setTaskDetail] = useState<TaskWithSubtasks | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [taskOutputEntries, setTaskOutputEntries] = useState<TaskOutputEvent[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  // Track which subtask's output we're viewing (null = parent task)
+  const [viewingSubtaskId, setViewingSubtaskId] = useState<string | null>(null);
+  const [viewingSubtaskName, setViewingSubtaskName] = useState<string | null>(null);
+  // View mode for the split panel layout
+  const [viewMode, setViewMode] = useState<ViewMode>("split");
+  // Width of the task panel as a percentage (0-100)
+  const [taskPanelPercent, setTaskPanelPercent] = useState(66.67);
+  // Track resizing state
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Track which task we've loaded output for to avoid stale saves
+  const loadedTaskIdRef = useRef<string | null>(null);
+
+  // Handle task update events from WebSocket
+  const handleTaskUpdate = useCallback(async (event: TaskUpdateEvent) => {
+    // Refresh task list if we're viewing the list
+    if (!id) {
+      fetchTasks();
+      return;
+    }
+
+    // Check if this update is for the current task or one of its subtasks
+    const isCurrentTask = event.taskId === id;
+    const isSubtask = taskDetail?.subtasks.some((st) => st.id === event.taskId);
+
+    // Refresh task detail if the update is for current task or any subtask
+    // This ensures subtask status changes (e.g., when orchestrator starts them) are reflected
+    if (isCurrentTask || isSubtask) {
+      const updated = await fetchTask(id);
+      if (updated) {
+        setTaskDetail(updated);
+      }
+    }
+
+    // Update streaming state based on status for current task
+    if (isCurrentTask) {
+      setIsStreaming(event.status === "running");
+    }
+  }, [id, fetchTask, fetchTasks, taskDetail?.subtasks]);
+
+  // The task ID whose output we're currently viewing
+  const activeOutputTaskId = viewingSubtaskId || id;
+
+  // Handle task output events from WebSocket
+  const handleTaskOutput = useCallback((event: TaskOutputEvent) => {
+    // Only process output for the task we're currently viewing
+    if (event.taskId === activeOutputTaskId) {
+      setTaskOutputEntries((prev) => {
+        // Deduplicate by checking if last entry is identical
+        // This prevents duplicates from React StrictMode or WebSocket reconnects
+        const lastEntry = prev[prev.length - 1];
+        if (
+          lastEntry &&
+          lastEntry.messageType === event.messageType &&
+          lastEntry.content === event.content &&
+          lastEntry.toolName === event.toolName
+        ) {
+          return prev; // Skip duplicate
+        }
+        const newEntries = [...prev, event];
+        // Persist to localStorage
+        savePersistedOutput(event.taskId, newEntries);
+        return newEntries;
+      });
+    }
+  }, [activeOutputTaskId]);
+
+  // Handle user input sent to task - show immediately in output
+  const handleUserInput = useCallback((message: string) => {
+    if (!activeOutputTaskId) return;
+    const userEntry: TaskOutputEvent = {
+      taskId: activeOutputTaskId,
+      messageType: "user_input",
+      content: message,
+      isPartial: false,
+    };
+    setTaskOutputEntries((prev) => {
+      const newEntries = [...prev, userEntry];
+      savePersistedOutput(activeOutputTaskId, newEntries);
+      return newEntries;
+    });
+  }, [activeOutputTaskId]);
+
+  // Subscribe to task updates and output
+  // When viewing a subtask's output, subscribe to that instead of the parent
+  // Always subscribe to all updates so we see subtask status changes
+  const { connected } = useTaskSubscription({
+    taskId: id || null,
+    subscribeAll: true, // Always subscribe to all - needed to see subtask updates
+    subscribeOutput: !!activeOutputTaskId, // Subscribe to output when viewing a task
+    outputTaskId: activeOutputTaskId || undefined, // Which task's output to subscribe to
+    onUpdate: handleTaskUpdate,
+    onOutput: handleTaskOutput,
+  });
+
+  // Load persisted output when task or viewed subtask changes
+  useEffect(() => {
+    if (activeOutputTaskId) {
+      // First load from localStorage (instant, for local cache)
+      const persisted = loadPersistedOutput(activeOutputTaskId);
+      setTaskOutputEntries(persisted);
+      loadedTaskIdRef.current = activeOutputTaskId;
+
+      // Then fetch from API to get any output we missed
+      // (e.g., subtask was running before we started viewing it)
+      getTaskOutput(activeOutputTaskId)
+        .then((response) => {
+          if (response.entries.length > 0) {
+            setTaskOutputEntries((prev) => {
+              // API returns all historical entries in chronological order
+              const apiEntries = response.entries.map(entry => ({
+                taskId: entry.taskId,
+                messageType: entry.messageType,
+                content: entry.content,
+                toolName: entry.toolName,
+                toolInput: entry.toolInput,
+                isError: entry.isError,
+                costUsd: entry.costUsd,
+                durationMs: entry.durationMs,
+                isPartial: false,
+              }));
+
+              // If localStorage is empty, just use API data
+              if (prev.length === 0) {
+                savePersistedOutput(activeOutputTaskId, apiEntries);
+                return apiEntries;
+              }
+
+              // localStorage has user_input entries in correct positions - trust its order
+              // Only append API entries that we don't already have locally
+              const localKeys = new Set(prev.map(e => `${e.messageType}:${e.content}`));
+              const newFromApi = apiEntries.filter(e => !localKeys.has(`${e.messageType}:${e.content}`));
+
+              // Keep local order (has user_input in correct spots), append new API data
+              const merged = [...prev, ...newFromApi];
+              savePersistedOutput(activeOutputTaskId, merged);
+              return merged;
+            });
+          }
+        })
+        .catch((err) => {
+          console.error("Failed to fetch task output:", err);
+        });
+    } else {
+      setTaskOutputEntries([]);
+      loadedTaskIdRef.current = null;
+    }
+    setIsStreaming(false);
+  }, [activeOutputTaskId]);
+
+  // Reset subtask view when navigating to a different parent task
+  useEffect(() => {
+    setViewingSubtaskId(null);
+    setViewingSubtaskName(null);
+  }, [id]);
+
+  // Toggle viewing a subtask's output (for running subtasks)
+  const handleToggleSubtaskOutput = useCallback(
+    (subtaskId: string, subtaskName: string) => {
+      if (viewingSubtaskId === subtaskId) {
+        // Already viewing this subtask, switch back to parent
+        setViewingSubtaskId(null);
+        setViewingSubtaskName(null);
+      } else {
+        // Switch to viewing this subtask's output
+        setViewingSubtaskId(subtaskId);
+        setViewingSubtaskName(subtaskName);
+      }
+    },
+    [viewingSubtaskId]
+  );
+
+  // Load task detail when URL has an id
+  useEffect(() => {
+    if (id) {
+      setDetailLoading(true);
+      fetchTask(id).then((detail) => {
+        setTaskDetail(detail);
+        setDetailLoading(false);
+      });
+    } else {
+      setTaskDetail(null);
+    }
+  }, [id, fetchTask]);
+
+  const handleSelectTask = useCallback(
+    (taskId: string) => {
+      navigate(`/mesh/${taskId}`);
+    },
+    [navigate]
+  );
+
+  const handleBack = useCallback(() => {
+    // If viewing a subtask, go back to parent
+    if (taskDetail?.parentTaskId) {
+      navigate(`/mesh/${taskDetail.parentTaskId}`);
+    } else {
+      navigate("/mesh");
+    }
+  }, [navigate, taskDetail]);
+
+  const handleDelete = useCallback(
+    async (taskId: string) => {
+      if (confirm("Are you sure you want to delete this task?")) {
+        const success = await removeTask(taskId);
+        if (success && id === taskId) {
+          // If deleting current task, go back
+          if (taskDetail?.parentTaskId) {
+            navigate(`/mesh/${taskDetail.parentTaskId}`);
+          } else {
+            navigate("/mesh");
+          }
+        }
+      }
+    },
+    [removeTask, id, taskDetail, navigate]
+  );
+
+  const handleStart = useCallback(
+    async (taskId: string) => {
+      try {
+        const updated = await startTaskApi(taskId);
+        setTaskDetail((prev) => prev ? { ...prev, ...updated } : prev);
+      } catch (e) {
+        console.error("Failed to start task:", e);
+        alert(e instanceof Error ? e.message : "Failed to start task");
+      }
+    },
+    []
+  );
+
+  const handleStop = useCallback(
+    async (taskId: string) => {
+      try {
+        const updated = await stopTaskApi(taskId);
+        setTaskDetail((prev) => prev ? { ...prev, ...updated } : prev);
+      } catch (e) {
+        console.error("Failed to stop task:", e);
+        alert(e instanceof Error ? e.message : "Failed to stop task");
+      }
+    },
+    []
+  );
+
+  const handleRestart = useCallback(
+    async (taskId: string) => {
+      try {
+        // First stop the task
+        await stopTaskApi(taskId);
+        // Then start it again
+        const updated = await startTaskApi(taskId);
+        setTaskDetail((prev) => prev ? { ...prev, ...updated } : prev);
+      } catch (e) {
+        console.error("Failed to restart task:", e);
+        alert(e instanceof Error ? e.message : "Failed to restart task");
+      }
+    },
+    []
+  );
+
+  const handleContinue = useCallback(
+    async (taskId: string) => {
+      try {
+        // Start the task again from terminal state
+        const updated = await startTaskApi(taskId);
+        setTaskDetail((prev) => prev ? { ...prev, ...updated } : prev);
+      } catch (e) {
+        console.error("Failed to continue task:", e);
+        alert(e instanceof Error ? e.message : "Failed to continue task");
+      }
+    },
+    []
+  );
+
+  const handleSave = useCallback(
+    async (taskId: string, name: string, description: string, plan: string, targetRepoPath?: string, completionAction?: string) => {
+      if (!taskDetail) return;
+      const result = await editTask(taskId, {
+        name,
+        description: description || undefined,
+        plan,
+        targetRepoPath: targetRepoPath || undefined,
+        completionAction: completionAction as import("../lib/api").CompletionAction | undefined,
+        version: taskDetail.version,
+      });
+      if (result) {
+        setTaskDetail(result);
+      }
+    },
+    [editTask, taskDetail]
+  );
+
+  const handleCreate = useCallback(async () => {
+    if (creating) return;
+    setCreating(true);
+    try {
+      const newTask = await saveTask({
+        name: `Task ${new Date().toLocaleDateString()}`,
+        plan: "# Plan\n\nDescribe what this task should accomplish...",
+      });
+      if (newTask) {
+        navigate(`/mesh/${newTask.id}`);
+      }
+    } finally {
+      setCreating(false);
+    }
+  }, [creating, saveTask, navigate]);
+
+  const handleCreateSubtask = useCallback(async () => {
+    if (!taskDetail || creating) return;
+    setCreating(true);
+    try {
+      const newTask = await saveTask({
+        name: `Subtask of ${taskDetail.name}`,
+        plan: "# Plan\n\nDescribe what this subtask should accomplish...",
+        parentTaskId: taskDetail.id,
+      });
+      if (newTask) {
+        // Refresh current task to show new subtask
+        const refreshed = await fetchTask(taskDetail.id);
+        if (refreshed) {
+          setTaskDetail(refreshed);
+        }
+      }
+    } finally {
+      setCreating(false);
+    }
+  }, [creating, saveTask, taskDetail, fetchTask]);
+
+  // Callback when task is updated via CLI
+  const handleTaskUpdatedFromCli = useCallback(async () => {
+    if (id) {
+      const updated = await fetchTask(id);
+      if (updated) {
+        setTaskDetail(updated);
+      }
+    }
+    // Also refresh the task list
+    fetchTasks();
+  }, [id, fetchTask, fetchTasks]);
+
+  // Calculate chat context based on current view
+  const chatContext: MeshChatContext = useMemo(() => {
+    if (!id) {
+      return { type: "mesh" };
+    }
+    if (taskDetail?.parentTaskId) {
+      return { type: "subtask", taskId: id, parentTaskId: taskDetail.parentTaskId };
+    }
+    return { type: "task", taskId: id };
+  }, [id, taskDetail?.parentTaskId]);
+
+  // Handle resizing of the split panel
+  const handleResizeStart = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: globalThis.MouseEvent) => {
+      if (!containerRef.current) return;
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const mouseX = e.clientX - containerRect.left;
+
+      // Calculate percentage, respecting minimum widths
+      const minTaskPercent = (MIN_TASK_WIDTH / containerWidth) * 100;
+      const maxTaskPercent = ((containerWidth - MIN_OUTPUT_WIDTH) / containerWidth) * 100;
+      const newPercent = Math.max(minTaskPercent, Math.min(maxTaskPercent, (mouseX / containerWidth) * 100));
+
+      setTaskPanelPercent(newPercent);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing]);
+
+  // Cycle through view modes
+  const cycleViewMode = useCallback(() => {
+    setViewMode((current) => {
+      if (current === "split") return "task";
+      if (current === "task") return "output";
+      return "split";
+    });
+  }, []);
+
+  // Get label for current view mode
+  const getViewModeLabel = (mode: ViewMode): string => {
+    switch (mode) {
+      case "split": return "Split";
+      case "task": return "Task";
+      case "output": return "Output";
+    }
+  };
+
+  return (
+    <div className="relative z-10 h-screen flex flex-col overflow-hidden">
+      <Masthead showTicker={false} showNav />
+
+      <main className="flex-1 p-4 md:p-6 min-h-0 overflow-hidden flex flex-col">
+        {error && (
+          <div className="mb-4 p-3 border border-red-400/50 bg-red-400/10 text-red-400 font-mono text-sm shrink-0">
+            {error}
+          </div>
+        )}
+
+        {conflict?.hasConflict && (
+          <div className="mb-4 p-3 border border-yellow-400/50 bg-yellow-400/10 text-yellow-400 font-mono text-sm shrink-0">
+            <p>Version conflict detected. Please reload and try again.</p>
+            <button
+              onClick={clearConflict}
+              className="mt-2 px-3 py-1 border border-yellow-400/30 hover:border-yellow-400/50 text-xs uppercase"
+            >
+              Dismiss
+            </button>
+          </div>
+        )}
+
+        {/* Main content area - conditional based on route */}
+        <div className="flex-1 flex flex-col min-h-0 overflow-hidden gap-4">
+          {id && taskDetail ? (
+            <>
+              {/* Header with connection status and view toggle */}
+              <div className="flex items-center justify-between shrink-0">
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`w-2 h-2 rounded-full ${
+                      connected ? "bg-green-400" : "bg-yellow-400 animate-pulse"
+                    }`}
+                  />
+                  <span className="font-mono text-[10px] text-[#75aafc] uppercase">
+                    {connected ? "Connected" : "Connecting..."}
+                  </span>
+                </div>
+                {/* View mode toggle */}
+                <button
+                  onClick={cycleViewMode}
+                  className="px-3 py-1 font-mono text-[10px] text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors uppercase"
+                >
+                  View: {getViewModeLabel(viewMode)}
+                </button>
+              </div>
+
+              {/* Split panel layout */}
+              <div
+                ref={containerRef}
+                className={`flex-1 flex min-h-0 overflow-hidden ${isResizing ? "select-none" : ""}`}
+              >
+                {/* Task detail panel */}
+                {(viewMode === "split" || viewMode === "task") && (
+                  <div
+                    className="min-h-0 overflow-hidden"
+                    style={{
+                      width: viewMode === "split" ? `${taskPanelPercent}%` : "100%",
+                      flexShrink: 0,
+                    }}
+                  >
+                    <TaskDetail
+                      task={taskDetail}
+                      loading={detailLoading}
+                      onBack={handleBack}
+                      onSave={handleSave}
+                      onDelete={handleDelete}
+                      onStart={handleStart}
+                      onStop={handleStop}
+                      onRestart={handleRestart}
+                      onContinue={handleContinue}
+                      onSelectSubtask={handleSelectTask}
+                      onCreateSubtask={handleCreateSubtask}
+                      onToggleSubtaskOutput={handleToggleSubtaskOutput}
+                      viewingSubtaskId={viewingSubtaskId}
+                    />
+                  </div>
+                )}
+
+                {/* Resizable divider */}
+                {viewMode === "split" && (
+                  <div
+                    className="w-1 shrink-0 cursor-col-resize bg-[rgba(117,170,252,0.15)] hover:bg-[rgba(117,170,252,0.35)] transition-colors group flex items-center justify-center"
+                    onMouseDown={handleResizeStart}
+                  >
+                    <div className="w-0.5 h-8 bg-[rgba(117,170,252,0.3)] group-hover:bg-[rgba(117,170,252,0.5)] rounded-full" />
+                  </div>
+                )}
+
+                {/* Output panel */}
+                {(viewMode === "split" || viewMode === "output") && (
+                  <div
+                    className="panel min-h-0 overflow-hidden flex-1"
+                  >
+                    <TaskOutput
+                      entries={taskOutputEntries}
+                      isStreaming={isStreaming || taskDetail.status === "running"}
+                      viewingSubtaskName={viewingSubtaskName}
+                      onClearSubtaskView={viewingSubtaskId ? () => {
+                        setViewingSubtaskId(null);
+                        setViewingSubtaskName(null);
+                      } : undefined}
+                      onClear={() => {
+                        setTaskOutputEntries([]);
+                        if (activeOutputTaskId) {
+                          clearPersistedOutput(activeOutputTaskId);
+                        }
+                      }}
+                      taskId={activeOutputTaskId}
+                      onUserInput={handleUserInput}
+                    />
+                  </div>
+                )}
+              </div>
+            </>
+          ) : id && detailLoading ? (
+            <div className="panel flex-1 flex items-center justify-center">
+              <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
+            </div>
+          ) : (
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <TaskList
+                tasks={tasks}
+                loading={loading || creating}
+                onSelect={handleSelectTask}
+                onDelete={handleDelete}
+                onCreate={handleCreate}
+              />
+            </div>
+          )}
+
+          {/* Mesh Chat Input - always rendered to persist state across navigation */}
+          <div className="shrink-0">
+            <UnifiedMeshChatInput
+              context={chatContext}
+              onUpdate={id ? handleTaskUpdatedFromCli : fetchTasks}
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}