@mndrk/agx 2.0.20 → 2.0.22

package/cloud-runtime/standalone/components/chat-ui/ChatContainer.tsx

@@ -0,0 +1,1450 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { useGroupChat } from "@/hooks/useGroupChat";
+import { useProcessPolling } from "@/hooks/useProcessPolling";
+import { useThreadState } from "@/hooks/useThreadState";
+import { WorkspaceSidebar } from "@/components/thread/WorkspaceSidebar";
+import "@/styles/workspaceSidebar.css";
+import { MessageList } from "./MessageList";
+import { ThreadView } from "./ThreadView";
+import { SearchResults } from "./SearchResults";
+import { Composer } from "./Composer";
+import {
+  loadWorkspaceSidebarVisible,
+  persistWorkspaceSidebarVisible,
+} from "@/state/uiSettings";
+import {
+  loadStoredActiveParticipantIds,
+  persistStoredActiveParticipantIds,
+} from "@/state/projectAgentConfig";
+import {
+  fetchUserPreferences,
+  updateUserPreferences,
+} from "@/services/userPreferences";
+import type { SlashCommand } from "@/hooks/useCommandAutocomplete";
+import type { Participant, GroupMessage, MessageSearchResponse, MessageSearchResult } from "@/lib/types";
+import type { TaskDraftMessage } from "@/types/tasks";
+import { buildTasks } from "@/services/agxService";
+import { useProjectsWithAgents, useProjects } from "@/hooks/useProjects";
+import { Search, ChevronLeft, SquareTerminal } from "lucide-react";
+import { LogPanel } from "./LogPanel";
+import { StatusIndicator } from "./StatusIndicator";
+
+const LEGACY_THREAD_ID = "global";
+const SUMMARY_MARKER = "<!-- thread-summary -->";
+const TASK_DRAFT_MARKER = "<!-- task-draft -->";
+
+function stripThoughts(text: string): string {
+  return text.replace(/(?:^|\n)Thinking\.\.\.[\s\S]*?\.\.\.done thinking\.?\s*/g, "\n").trim();
+}
+
+function stripInternalMarkers(text: string): string {
+  return text
+    .replaceAll(SUMMARY_MARKER, "")
+    .replaceAll(TASK_DRAFT_MARKER, "")
+    .trim();
+}
+
+function cleanMarkdownBlock(text: string, removeThoughts = false): string {
+  const content = removeThoughts ? stripThoughts(text) : text;
+  return stripInternalMarkers(content)
+    .replace(/\r\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function taskDraftToMarkdown(draft: TaskDraftMessage): string {
+  if (draft.tasks.length === 0) return "";
+
+  const titleById = new Map(draft.tasks.map((task) => [task.id, task.title.trim()]));
+  const lines: string[] = ["## Draft Tasks", ""];
+
+  if (draft.projectName) {
+    lines.push(`Project: ${draft.projectName}`);
+  }
+  if (draft.buildStatus) {
+    lines.push(`Build status: ${draft.buildStatus.replaceAll("_", " ")}`);
+  }
+  if (draft.projectName || draft.buildStatus) {
+    lines.push("");
+  }
+
+  draft.tasks.forEach((task, index) => {
+    const title = cleanMarkdownBlock(task.title) || `Task ${index + 1}`;
+    const description = cleanMarkdownBlock(task.description);
+    const deps = (task.dependsOn || [])
+      .map((id) => titleById.get(id)?.trim())
+      .filter((value): value is string => Boolean(value));
+    const remoteTaskId = draft.builtTaskIds?.[task.id];
+
+    lines.push(`${index + 1}. [ ] **${title}**`);
+    if (description) {
+      lines.push(description);
+    }
+    if (deps.length > 0) {
+      lines.push(`Depends on: ${deps.join(", ")}`);
+    }
+    if (remoteTaskId) {
+      lines.push(`agx task id: \`${remoteTaskId}\``);
+    }
+    lines.push("");
+  });
+
+  return lines.join("\n").trim();
+}
+
+function getTimeAgo(ts: number) {
+  if (!ts) return "recently";
+  const seconds = Math.floor((Date.now() - ts) / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(ts);
+}
+
+function toMarkdown(
+  messages: GroupMessage[],
+  participants: Participant[],
+  taskDraft?: TaskDraftMessage
+): string {
+  const pMap = Object.fromEntries(participants.map((p) => [p.id, p]));
+  const lines: string[] = [];
+
+  for (const msg of messages) {
+    const name = msg.role === "user"
+      ? "You"
+      : msg.participantId
+        ? pMap[msg.participantId]?.name || msg.participantId
+        : "Assistant";
+    const clean = cleanMarkdownBlock(msg.content, msg.role !== "user");
+    if (!clean) {
+      continue;
+    }
+
+    lines.push(`**${name}:**`);
+    lines.push("");
+    lines.push(clean);
+    lines.push("");
+  }
+
+  if (taskDraft) {
+    const taskMd = taskDraftToMarkdown(taskDraft);
+    if (taskMd) {
+      lines.push(taskMd);
+    }
+  }
+
+  return lines.join("\n").trim();
+}
+
+interface ChatContainerProps {
+  projectSlug?: string;
+  initialThreadId?: string;
+  initialRootMessageId?: string;
+}
+
+export function ChatContainer({ projectSlug, initialThreadId, initialRootMessageId }: ChatContainerProps = {}) {
+  const {
+    threads,
+    activeThreadId,
+    selectThread,
+    createThread,
+    deleteThread,
+    updateThreadMessages,
+    isCreating,
+    deletingThreadId,
+    renamingThreadId,
+    isLoading: threadsLoading,
+    isRestoringActiveThread,
+    renameThread,
+    updateThreadStatus,
+    updateThreadOutcomeNote,
+    updateMessageThreadStatus,
+    updateMessageOutcomeNote,
+  } = useThreadState(initialThreadId);
+  const { messages, setMessages, logs, sendMessage, loadHistory, clearLogs, stop, stopThread } =
+    useGroupChat(activeThreadId);
+  const { activeAgents: polledActiveAgents, processes: activeProcesses, streaming, poll } = useProcessPolling(
+    activeThreadId ? { workspaceId: activeThreadId } : null,
+    { messages, setMessages }
+  );
+  const loading = polledActiveAgents.size > 0;
+
+  // Wrap stop functions to immediately refresh polling state
+  const handleStop = useCallback(async () => {
+    await stop();
+    await poll();
+  }, [stop, poll]);
+
+  const handleStopThread = useCallback(async (rootMessageId: string) => {
+    await stopThread(rootMessageId);
+    await poll();
+  }, [stopThread, poll]);
+  const {
+    projects,
+    createProject,
+    deleteProject,
+    addAgent: addAgentToProject,
+    removeAgent: removeAgentFromProject,
+    reorderAgents: reorderProjectAgents,
+  } = useProjectsWithAgents();
+  const { projects: projectList, updateProject } = useProjects();
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [participantsLoaded, setParticipantsLoaded] = useState(false);
+  const [activeParticipantIds, setActiveParticipantIds] = useState<string[]>([]);
+  const [copied, setCopied] = useState(false);
+  const [workspaceSidebarVisible, setWorkspaceSidebarVisible] = useState(false);
+
+  // Sync sidebar visibility from localStorage after hydration to avoid SSR mismatch
+  useEffect(() => {
+    setWorkspaceSidebarVisible(loadWorkspaceSidebarVisible());
+  }, []);
+  const [logsOpen, setLogsOpen] = useState(false);
+  const [autoModeThreads, setAutoModeThreads] = useState<Set<string>>(new Set());
+  const [pendingAutoMode, setPendingAutoMode] = useState(false);
+  const [openThreadId, setOpenThreadId] = useState<string | null>(initialRootMessageId ?? null);
+  const autoMode = openThreadId ? autoModeThreads.has(openThreadId) : pendingAutoMode;
+
+  // Hydrate & poll ship mode from server when a thread is opened
+  useEffect(() => {
+    if (!openThreadId) return;
+    let cancelled = false;
+
+    const check = () => {
+      fetch(`/api/schedules?rootMessageId=${encodeURIComponent(openThreadId)}`)
+        .then((r) => r.json())
+        .then((data) => {
+          if (cancelled) return;
+          setAutoModeThreads((prev) => {
+            const has = prev.has(openThreadId);
+            if (data.active && !has) {
+              const next = new Set(prev); next.add(openThreadId); return next;
+            }
+            if (!data.active && has) {
+              const next = new Set(prev); next.delete(openThreadId); return next;
+            }
+            return prev;
+          });
+        })
+        .catch(() => {});
+    };
+
+    check();
+    const interval = setInterval(check, 10_000);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, [openThreadId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Hydrate all ship-mode threads for message list indicators
+  useEffect(() => {
+    let cancelled = false;
+    const check = () => {
+      fetch("/api/schedules")
+        .then((r) => r.json())
+        .then((data) => {
+          if (cancelled || !data.activeRootMessageIds) return;
+          setAutoModeThreads((prev) => {
+            const next = new Set(data.activeRootMessageIds as string[]);
+            // Preserve any locally-toggled entries not yet on server
+            for (const id of prev) next.add(id);
+            if (next.size === prev.size && [...next].every((id) => prev.has(id))) return prev;
+            return next;
+          });
+        })
+        .catch(() => {});
+    };
+    check();
+    const interval = setInterval(check, 15_000);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Sync URL to reflect the currently open thread
+  useEffect(() => {
+    if (openThreadId) {
+      window.history.replaceState(null, "", `/thread/${openThreadId}`);
+    } else {
+      window.history.replaceState(null, "", "/");
+    }
+  }, [openThreadId, activeThreadId]);
+
+  // Resolve initialRootMessageId → workspace thread on mount
+  useEffect(() => {
+    if (!initialRootMessageId) return;
+    (async () => {
+      try {
+        const res = await fetch(`/api/messages/${initialRootMessageId}`);
+        if (!res.ok) return;
+        const { threadId } = await res.json();
+        if (threadId) selectThread(threadId);
+      } catch {}
+    })();
+  }, [initialRootMessageId, selectThread]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<MessageSearchResult[]>([]);
+  const [searchTotal, setSearchTotal] = useState(0);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [highlightedMessageId, setHighlightedMessageId] = useState<string | null>(null);
+  const [summarizingThreads, setSummarizingThreads] = useState<Set<string>>(new Set());
+  const [deletingThreadRootId, setDeletingThreadRootId] = useState<string | null>(null);
+  const [taskDrafts, setTaskDraftsRaw] = useState<Record<string, TaskDraftMessage>>({});
+  const setTaskDrafts: typeof setTaskDraftsRaw = useCallback((update) => {
+    setTaskDraftsRaw((prev) => {
+      const next = typeof update === "function" ? update(prev) : update;
+      // persist each changed draft
+      if (activeThreadId) {
+        for (const [msgId, draft] of Object.entries(next)) {
+          if (prev[msgId] !== draft) {
+            fetch("/api/task-drafts", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ threadId: activeThreadId, messageId: msgId, draft }),
+            }).catch(() => { });
+          }
+        }
+      }
+      return next;
+    });
+  }, [activeThreadId]);
+  const [extractingTasks, setExtractingTasks] = useState<Set<string>>(new Set());
+  const [buildingDrafts, setBuildingDrafts] = useState<Set<string>>(new Set());
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const pendingOpenThreadIdRef = useRef<string | null>(null);
+  const highlightClearTimeoutRef = useRef<number | null>(null);
+  const lastUnknownParticipantSignatureRef = useRef<string>("");
+
+  const reloadParticipants = useCallback(
+    async (markLoaded = false) => {
+      try {
+        const res = await fetch("/api/participants");
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!Array.isArray(data)) return;
+        setParticipants(data as Participant[]);
+      } finally {
+        if (markLoaded) {
+          setParticipantsLoaded(true);
+        }
+      }
+    },
+    []
+  );
+
+  const persistWorkspaceSidebarPreferenceRemotely = useCallback(async (visible: boolean) => {
+    try {
+      await updateUserPreferences({ threadSidebarVisible: visible });
+    } catch (error) {
+      console.error("Unable to persist thread sidebar preference", error);
+    }
+  }, [updateUserPreferences]);
+
+  const persistSidebarPreference = useCallback(
+    (visible: boolean) => {
+      persistWorkspaceSidebarVisible(visible);
+      void persistWorkspaceSidebarPreferenceRemotely(visible);
+    },
+    [persistWorkspaceSidebarPreferenceRemotely]
+  );
+
+  const normalizedSearchQuery = searchQuery.trim();
+  const searchActive = normalizedSearchQuery.length > 0;
+  const threadTitleById = useMemo(
+    () =>
+      Object.fromEntries(
+        threads.map((thread) => [thread.id, thread.title?.trim() || "Untitled thread"])
+      ),
+    [threads]
+  );
+
+  const activeThreadParticipants = useMemo(() => {
+    if (!openThreadId) return [];
+    const threadMsgs = [
+      messages.find((m) => m.id === openThreadId),
+      ...messages.filter((m) => m.rootMessageId === openThreadId)
+    ].filter(Boolean) as GroupMessage[];
+
+    const ids = new Set(threadMsgs.map((m) => m.participantId).filter(Boolean));
+    Object.keys(streaming).forEach((pid) => {
+      if (streaming[pid].rootMessageId === openThreadId) {
+        ids.add(pid);
+      }
+    });
+    return participants.filter((p) => ids.has(p.id));
+  }, [openThreadId, messages, streaming, participants]);
+
+  const activeParticipants = useMemo(() => {
+    const participantMap = new Map(participants.map((p) => [p.id, p]));
+    return activeParticipantIds
+      .map((id) => participantMap.get(id))
+      .filter(Boolean) as typeof participants;
+  }, [participants, activeParticipantIds]);
+  const projectMentions = useMemo(
+    () => projectList.map((project) => ({ id: project.id, name: project.name, slug: project.slug })),
+    [projectList]
+  );
+
+  const lastThreadUpdate = useMemo(() => {
+    if (!openThreadId) return 0;
+    const threadMsgs = [
+      messages.find((m) => m.id === openThreadId),
+      ...messages.filter((m) => m.rootMessageId === openThreadId)
+    ].filter(Boolean) as GroupMessage[];
+    if (threadMsgs.length === 0) return 0;
+    return Math.max(...threadMsgs.map((m) => m.timestamp));
+  }, [openThreadId, messages]);
+
+  const activeThreadTitle = useMemo(() => {
+    if (!openThreadId) return "";
+    const rootMsg = messages.find((m) => m.id === openThreadId);
+    if (!rootMsg) return "Thread";
+    const text = rootMsg.content.trim();
+    return text.length > 60 ? text.slice(0, 60) + "..." : text;
+  }, [openThreadId, messages]);
+
+  const clearSearch = useCallback(() => {
+    setSearchQuery("");
+    setSearchResults([]);
+    setSearchTotal(0);
+    setSearchError(null);
+    setSearchLoading(false);
+  }, []);
+
+  const copyAsMarkdown = useCallback(() => {
+    const md = toMarkdown(messages, participants);
+    navigator.clipboard.writeText(md).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [messages, participants]);
+
+  const [pendingThreadInsert, setPendingThreadInsert] = useState<{ title: string; threadId: string; messages: GroupMessage[] } | null>(null);
+
+  const handleAddToChat = useCallback((rootMessageId: string) => {
+    const rootMsg = messages.find((m) => m.id === rootMessageId);
+    if (!rootMsg) return;
+
+    const threadMsgs = [
+      rootMsg,
+      ...messages.filter((m) => m.rootMessageId === rootMessageId).sort((a, b) => a.timestamp - b.timestamp)
+    ];
+
+    const title = rootMsg.content.slice(0, 60).replace(/\n/g, " ").trim() || "Untitled";
+    setPendingThreadInsert({ title, threadId: rootMessageId, messages: threadMsgs });
+  }, [messages]);
+
+  const handleCopyThread = useCallback((rootMessageId: string) => {
+    const threadMsgs = [
+      messages.find((m) => m.id === rootMessageId),
+      ...messages.filter((m) => m.rootMessageId === rootMessageId).sort((a, b) => a.timestamp - b.timestamp)
+    ].filter(Boolean) as GroupMessage[];
+
+    const md = toMarkdown(threadMsgs, participants, taskDrafts[rootMessageId]);
+    navigator.clipboard.writeText(md).catch(err => console.error("Failed to copy thread", err));
+  }, [messages, participants, taskDrafts]);
+
+  useEffect(() => {
+    void reloadParticipants(true);
+  }, [reloadParticipants]);
+
+  const unresolvedParticipantIds = useMemo(() => {
+    if (!participantsLoaded) return [];
+    const knownIds = new Set(participants.map((participant) => participant.id));
+    const unresolved = new Set<string>();
+
+    for (const message of messages) {
+      if (message.role !== "assistant") continue;
+      if (!message.participantId) continue;
+      if (!knownIds.has(message.participantId)) {
+        unresolved.add(message.participantId);
+      }
+    }
+
+    for (const participantId of Object.keys(streaming)) {
+      if (!knownIds.has(participantId)) {
+        unresolved.add(participantId);
+      }
+    }
+
+    return Array.from(unresolved).sort();
+  }, [messages, participants, participantsLoaded, streaming]);
+
+  useEffect(() => {
+    if (!participantsLoaded) return;
+    const signature = unresolvedParticipantIds.join("|");
+    if (!signature) {
+      lastUnknownParticipantSignatureRef.current = "";
+      return;
+    }
+    if (lastUnknownParticipantSignatureRef.current === signature) {
+      return;
+    }
+    lastUnknownParticipantSignatureRef.current = signature;
+    void reloadParticipants(false);
+  }, [participantsLoaded, reloadParticipants, unresolvedParticipantIds]);
+
+  useEffect(() => {
+    if (!participantsLoaded) {
+      return;
+    }
+
+    const participantIdSet = new Set(participants.map((p) => p.id));
+
+    // Use routing order from the thread's project if available, else fall back to participants order
+    const threadProject = activeThreadId
+      ? projects.find((p) => p.thread_ids?.includes(activeThreadId))
+      : projects[0];
+    const routingOrderIds = threadProject
+      ? threadProject.agents.map((a) => a.agent_id).filter((id) => participantIdSet.has(id))
+      : [];
+    // Append any participants not in the project (fallback)
+    const defaultIds = routingOrderIds.length > 0
+      ? [...routingOrderIds, ...participants.filter((p) => !routingOrderIds.includes(p.id)).map((p) => p.id)]
+      : participants.map((p) => p.id);
+
+    if (!activeThreadId) {
+      setActiveParticipantIds(defaultIds);
+      return;
+    }
+
+    const storedIds = loadStoredActiveParticipantIds(activeThreadId);
+    if (storedIds === null) {
+      setActiveParticipantIds(defaultIds);
+      return;
+    }
+
+    const reconciled = storedIds.filter((id) => participantIdSet.has(id));
+    if (reconciled.length !== storedIds.length) {
+      persistStoredActiveParticipantIds(activeThreadId, reconciled);
+    }
+    setActiveParticipantIds(reconciled);
+  }, [activeThreadId, participants, participantsLoaded, projects]);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const preferences = await fetchUserPreferences();
+        if (cancelled) return;
+        setWorkspaceSidebarVisible((current) => {
+          if (current === preferences.threadSidebarVisible) {
+            return current;
+          }
+          persistWorkspaceSidebarVisible(preferences.threadSidebarVisible);
+          return preferences.threadSidebarVisible;
+        });
+      } catch (error) {
+        console.error("Failed to load user preferences", error);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchUserPreferences, persistWorkspaceSidebarVisible]);
+
+  useEffect(() => {
+    if (!threadsLoading && !isCreating && threads.length === 0) {
+      void createThread({ id: LEGACY_THREAD_ID, title: "General" });
+    }
+  }, [threadsLoading, isCreating, threads.length, createThread]);
+
+  useEffect(() => {
+    return () => {
+      if (highlightClearTimeoutRef.current) {
+        window.clearTimeout(highlightClearTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+        return;
+      }
+      if (event.key === "Escape" && normalizedSearchQuery) {
+        clearSearch();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [clearSearch, normalizedSearchQuery]);
+
+  useEffect(() => {
+    if (!normalizedSearchQuery) {
+      setSearchResults([]);
+      setSearchTotal(0);
+      setSearchError(null);
+      setSearchLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setSearchLoading(true);
+    const timeoutId = window.setTimeout(() => {
+      void (async () => {
+        try {
+          const params = new URLSearchParams({
+            q: normalizedSearchQuery,
+            limit: "20",
+            offset: "0",
+          });
+          const response = await fetch(`/api/search?${params.toString()}`);
+          const payload = await response.json().catch(() => null);
+
+          if (cancelled) return;
+
+          if (!response.ok) {
+            const message =
+              payload && typeof payload === "object" && "error" in payload
+                ? String(payload.error)
+                : "Search failed";
+            setSearchResults([]);
+            setSearchTotal(0);
+            setSearchError(message);
+            return;
+          }
+
+          const data = payload as MessageSearchResponse;
+          setSearchResults(Array.isArray(data.results) ? data.results : []);
+          setSearchTotal(typeof data.total === "number" ? data.total : 0);
+          setSearchError(null);
+        } catch (error) {
+          if (cancelled) return;
+          console.error("Search request failed", error);
+          setSearchResults([]);
+          setSearchTotal(0);
+          setSearchError("Search failed");
+        } finally {
+          if (!cancelled) {
+            setSearchLoading(false);
+          }
+        }
+      })();
+    }, 300);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+    };
+  }, [normalizedSearchQuery]);
+
+  const prevActiveThreadIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    // Only stop active streams when actually switching threads, not on initial mount.
+    if (prevActiveThreadIdRef.current !== null && prevActiveThreadIdRef.current !== activeThreadId) {
+      handleStop();
+      if (pendingOpenThreadIdRef.current) {
+        setOpenThreadId(pendingOpenThreadIdRef.current);
+        pendingOpenThreadIdRef.current = null;
+      } else {
+        setOpenThreadId(null);
+      }
+    }
+    prevActiveThreadIdRef.current = activeThreadId;
+    if (!activeThreadId) return;
+    void loadHistory(activeThreadId);
+    // Load persisted task drafts
+    fetch(`/api/task-drafts?threadId=${encodeURIComponent(activeThreadId)}`)
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.drafts && Object.keys(data.drafts).length > 0) {
+          setTaskDraftsRaw(data.drafts as Record<string, TaskDraftMessage>);
+        } else {
+          setTaskDraftsRaw({});
+        }
+      })
+      .catch(() => setTaskDraftsRaw({}));
+  }, [activeThreadId, loadHistory, handleStop]);
+
+  useEffect(() => {
+    if (!activeThreadId) return;
+    void updateThreadMessages(activeThreadId, messages);
+  }, [activeThreadId, messages, updateThreadMessages]);
+
+  const handleThreadReply = useCallback(
+    (rootMessageId: string, content: string, maxRounds: number = 10) => {
+      if (!activeThreadId) return;
+      if (activeParticipants.length === 0) return;
+      void sendMessage(
+        content,
+        maxRounds,
+        activeThreadId,
+        rootMessageId,
+        undefined,
+        undefined,
+        activeParticipants.map((participant) => participant.id),
+        projectSlug
+      );
+    },
+    [activeThreadId, sendMessage, activeParticipants, projectSlug]
+  );
+
+
+  const handleSummarize = useCallback(async (rootMessageId: string) => {
+    if (!activeThreadId) return;
+    if (activeParticipants.length === 0) {
+      window.alert("Enable at least one agent in this project.");
+      return;
+    }
+    setSummarizingThreads((prev) => new Set(prev).add(rootMessageId));
+    try {
+      const res = await fetch("/api/summarize", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          threadId: activeThreadId,
+          rootMessageId,
+          activeParticipantIds: activeParticipants.map((participant) => participant.id),
+        }),
+      });
+      if (res.ok) {
+        await loadHistory(activeThreadId);
+      } else {
+        console.error("Summarize failed:", await res.text());
+      }
+    } catch (err) {
+      console.error("Summarize error:", err);
+    } finally {
+      setSummarizingThreads((prev) => {
+        const next = new Set(prev);
+        next.delete(rootMessageId);
+        return next;
+      });
+    }
+  }, [activeThreadId, loadHistory, activeParticipants]);
+
+  const handleExtractTasks = useCallback(async (rootMessageId: string) => {
+    if (!activeThreadId) return;
+    if (activeParticipants.length === 0) {
+      window.alert("Enable at least one agent in this project.");
+      return;
+    }
+    setExtractingTasks((prev) => new Set(prev).add(rootMessageId));
+    try {
+      const res = await fetch("/api/tasks/extract", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          threadId: activeThreadId,
+          rootMessageId,
+          activeParticipantIds: activeParticipants.map((participant) => participant.id),
+        }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const draft: TaskDraftMessage = {
+          draftId: crypto.randomUUID(),
+          revision: 0,
+          tasks: data.tasks,
+          buildStatus: "idle",
+        };
+        setTaskDrafts((prev) => ({ ...prev, [rootMessageId]: draft }));
+      } else {
+        console.error("Task extraction failed:", await res.text());
+      }
+    } catch (err) {
+      console.error("Task extraction error:", err);
+    } finally {
+      setExtractingTasks((prev) => {
+        const next = new Set(prev);
+        next.delete(rootMessageId);
+        return next;
+      });
+    }
+  }, [activeThreadId, activeParticipants]);
+
+  const handleUpdateTaskDraft = useCallback((rootMessageId: string, draft: TaskDraftMessage) => {
+    setTaskDrafts((prev) => ({ ...prev, [rootMessageId]: draft }));
+  }, []);
+
+  const handleBuildTasks = useCallback(async (rootMessageId: string, draft: TaskDraftMessage, projectId: string, projectName: string) => {
+    if (!activeThreadId) return;
+    setBuildingDrafts((prev) => new Set(prev).add(draft.draftId));
+    setTaskDrafts((prev) => ({
+      ...prev,
+      [rootMessageId]: { ...draft, buildStatus: "building", projectId, projectName },
+    }));
+    try {
+      const buildId = crypto.randomUUID();
+      const result = await buildTasks(
+        draft.tasks,
+        projectId,
+        buildId,
+        draft.builtTaskIds,
+      );
+      const builtTaskIds: Record<string, string> = { ...draft.builtTaskIds };
+      let hasFailure = false;
+      for (const r of result.results) {
+        if (r.status === "created" && r.remoteTaskId) {
+          builtTaskIds[r.clientTaskId] = r.remoteTaskId;
+        } else {
+          hasFailure = true;
+        }
+      }
+      setTaskDrafts((prev) => ({
+        ...prev,
+        [rootMessageId]: {
+          ...prev[rootMessageId],
+          buildId,
+          buildStatus: hasFailure ? "partial_failure" : "done",
+          builtTaskIds,
+        },
+      }));
+    } catch (err) {
+      console.error("Build error:", err);
+      setTaskDrafts((prev) => ({
+        ...prev,
+        [rootMessageId]: { ...prev[rootMessageId], buildStatus: "partial_failure" },
+      }));
+    } finally {
+      setBuildingDrafts((prev) => {
+        const next = new Set(prev);
+        next.delete(draft.draftId);
+        return next;
+      });
+    }
+  }, [activeThreadId]);
+
+  const handleCreateTasksCommand = useCallback(() => {
+    if (!activeThreadId) return;
+    const targetRootId = (() => {
+      if (openThreadId) return openThreadId;
+      const replyRoots = new Set(
+        messages
+          .map((message) => message.rootMessageId)
+          .filter((rootId): rootId is string => Boolean(rootId))
+      );
+      for (let i = messages.length - 1; i >= 0; i -= 1) {
+        const message = messages[i];
+        if (!message.rootMessageId && replyRoots.has(message.id)) {
+          return message.id;
+        }
+      }
+      return null;
+    })();
+    if (!targetRootId) {
+      console.warn("No thread with replies available to extract tasks from");
+      return;
+    }
+    void handleExtractTasks(targetRootId);
+  }, [activeThreadId, handleExtractTasks, messages, openThreadId]);
+
+  const handleReplyToMessage = useCallback((messageId: string) => {
+    setOpenThreadId(messageId);
+  }, []);
+
+  const handleOpenThread = useCallback((rootMessageId: string) => {
+    setOpenThreadId(rootMessageId);
+  }, []);
+
+  const handleSearchCommand = useCallback((query?: string) => {
+    const normalized = query?.trim() ?? "";
+    if (normalized) {
+      setSearchQuery(normalized);
+    }
+    requestAnimationFrame(() => {
+      searchInputRef.current?.focus();
+      if (!normalized) {
+        searchInputRef.current?.select();
+      }
+    });
+  }, []);
+
+  const handleSummarizeCommand = useCallback(() => {
+    if (!activeThreadId) return;
+
+    const targetRootId = (() => {
+      if (openThreadId) return openThreadId;
+      const replyRoots = new Set(
+        messages
+          .map((message) => message.rootMessageId)
+          .filter((rootId): rootId is string => Boolean(rootId))
+      );
+      for (let i = messages.length - 1; i >= 0; i -= 1) {
+        const message = messages[i];
+        if (!message.rootMessageId && replyRoots.has(message.id)) {
+          return message.id;
+        }
+      }
+      return null;
+    })();
+
+    if (!targetRootId) {
+      console.warn("No thread with replies available to summarize");
+      return;
+    }
+    void handleSummarize(targetRootId);
+  }, [activeThreadId, handleSummarize, messages, openThreadId]);
+
+  const handleSend = useCallback(
+    async (prompt: string, maxRounds: number, attachmentIds?: string[], attachmentMetas?: import("@/lib/types").Attachment[]) => {
+      const searchMatch = prompt.match(/^\/search(?:\s+([\s\S]+))?$/i);
+      if (searchMatch) {
+        handleSearchCommand(searchMatch[1]);
+        return;
+      }
+
+      if (/^\/summarize(?:\s+[\s\S]+)?$/i.test(prompt)) {
+        handleSummarizeCommand();
+        return;
+      }
+
+      if (/^\/tasks(?:\s+[\s\S]+)?$/i.test(prompt) || /^\/create(?:\s+[\s\S]+)?$/i.test(prompt)) {
+        handleCreateTasksCommand();
+        return;
+      }
+
+      // User message turns off autonomous mode
+      if (autoMode && openThreadId) {
+        setAutoModeThreads((prev) => { const next = new Set(prev); next.delete(openThreadId); return next; });
+        fetch("/api/schedules", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "stop", rootMessageId: openThreadId }),
+        }).catch((err) => console.error("Failed to deactivate schedule:", err));
+      }
+
+      let threadId = activeThreadId;
+      if (!threadId) {
+        const created = await createThread();
+        threadId = created.id;
+      }
+
+      const selectedActiveIds = activeParticipants.map((participant) => participant.id);
+      if (selectedActiveIds.length === 0) {
+        window.alert("Enable at least one agent in this project.");
+        return;
+      }
+
+      if (openThreadId) {
+        await sendMessage(
+          prompt,
+          maxRounds,
+          threadId,
+          openThreadId,
+          attachmentIds,
+          attachmentMetas,
+          selectedActiveIds,
+          projectSlug
+        );
+        return;
+      }
+
+      // Every user message in main chat starts its own thread.
+      // The user message ID becomes the rootMessageId — agents reply to it.
+      const newRootId = await sendMessage(
+        prompt,
+        maxRounds,
+        threadId,
+        null,
+        attachmentIds,
+        attachmentMetas,
+        selectedActiveIds,
+        projectSlug
+      );
+
+      // If ship mode was staged on the main composer, activate it for the new thread
+      if (pendingAutoMode && newRootId) {
+        setPendingAutoMode(false);
+        setAutoModeThreads((prev) => { const next = new Set(prev); next.add(newRootId); return next; });
+        fetch("/api/schedules", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "activate", rootMessageId: newRootId }),
+        }).catch((err) => console.error("Failed to activate schedule for new thread:", err));
+      }
+    },
+    [
+      activeThreadId,
+      autoMode,
+      pendingAutoMode,
+      createThread,
+      handleSearchCommand,
+      handleSummarizeCommand,
+      openThreadId,
+      activeParticipants,
+      sendMessage,
+      projectSlug,
+    ]
+  );
+
+  // ─── Autonomous mode ─────────────────────────────────────────────────────
+
+  const handleAutoModeChange = useCallback(
+    async (enabled: boolean) => {
+      const targetRootId = openThreadId;
+
+      // No thread open — just stage the flag for the next new thread
+      if (!targetRootId) {
+        setPendingAutoMode(enabled);
+        return;
+      }
+
+      setAutoModeThreads((prev) => {
+        const next = new Set(prev);
+        if (enabled) next.add(targetRootId); else next.delete(targetRootId);
+        return next;
+      });
+
+      try {
+        await fetch("/api/schedules", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: enabled ? "activate" : "stop", rootMessageId: targetRootId }),
+        });
+      } catch (err) {
+        console.error("Failed to toggle autonomous schedule:", err);
+      }
+    },
+    [openThreadId],
+  );
+
+  const handleSelectSearchResult = useCallback(
+    (result: MessageSearchResult) => {
+      const targetRootId = result.rootMessageId || result.messageId;
+      if (result.threadId !== activeThreadId) {
+        pendingOpenThreadIdRef.current = targetRootId;
+        selectThread(result.threadId);
+      } else {
+        setOpenThreadId(targetRootId);
+      }
+      setHighlightedMessageId(null);
+      window.requestAnimationFrame(() => {
+        setHighlightedMessageId(result.messageId);
+        if (highlightClearTimeoutRef.current) {
+          window.clearTimeout(highlightClearTimeoutRef.current);
+        }
+        highlightClearTimeoutRef.current = window.setTimeout(() => {
+          setHighlightedMessageId((current) => (current === result.messageId ? null : current));
+        }, 2000);
+      });
+      clearSearch();
+    },
+    [activeThreadId, clearSearch, selectThread]
+  );
+
+  const handleDeleteThread = useCallback(
+    async (threadId: string) => {
+      handleStop();
+      await deleteThread(threadId);
+    },
+    [deleteThread, handleStop]
+  );
+
+  const handleDeleteThreadRoot = useCallback(
+    async (rootMessageId: string) => {
+      if (!activeThreadId || !rootMessageId) return;
+      const confirmed = window.confirm("Delete this thread and all of its replies?");
+      if (!confirmed) return;
+
+      setDeletingThreadRootId(rootMessageId);
+      handleStopThread(rootMessageId);
+
+      try {
+        const params = new URLSearchParams({
+          threadId: activeThreadId,
+          rootMessageId,
+        });
+        const response = await fetch(`/api/history?${params.toString()}`, { method: "DELETE" });
+        if (!response.ok) {
+          console.error("Failed to delete message thread", await response.text());
+          return;
+        }
+
+        setOpenThreadId((current) => (current === rootMessageId ? null : current));
+        setHighlightedMessageId(null);
+
+        const nextMessages = messages.filter(
+          (message) => message.id !== rootMessageId && message.rootMessageId !== rootMessageId
+        );
+        void updateThreadMessages(activeThreadId, nextMessages);
+        await loadHistory(activeThreadId);
+      } catch (error) {
+        console.error("Failed to delete message thread", error);
+      } finally {
+        setDeletingThreadRootId((current) => (current === rootMessageId ? null : current));
+      }
+    },
+    [activeThreadId, loadHistory, messages, handleStopThread, updateThreadMessages]
+  );
+
+  const slashCommands: SlashCommand[] = useMemo(
+    () => [
+      {
+        name: "/search",
+        description: "Search messages (usage: /search <query>)",
+        aliases: ["find"],
+        execute: () => handleSearchCommand(),
+      },
+      {
+        name: "/summarize",
+        description: "Summarize current thread or latest thread with replies",
+        aliases: ["sum"],
+        execute: () => handleSummarizeCommand(),
+      },
+      {
+        name: "/tasks",
+        description: "Extract tasks from current thread discussion",
+        aliases: ["create"],
+        execute: () => handleCreateTasksCommand(),
+      },
+    ],
+    [handleSearchCommand, handleSummarizeCommand, handleCreateTasksCommand]
+  );
+
+  // Projects scoped to the current thread
+  const threadProjects = useMemo(
+    () => activeThreadId ? projects.filter((project) => project.thread_ids?.includes(activeThreadId)) : projects,
+    [projects, activeThreadId]
+  );
+
+  const renderReplyComposer = useCallback(
+    (rootMessageId: string) => (
+      <Composer
+        onSend={(message, maxRounds) => handleThreadReply(rootMessageId, message, maxRounds)}
+        onStop={() => handleStopThread(rootMessageId)}
+        loading={Object.values(streaming).some((s) => s.rootMessageId === rootMessageId)}
+        participants={activeParticipants}
+        projectGroups={threadProjects}
+        projects={projectMentions}
+        messages={messages}
+        commands={slashCommands}
+        placeholder="Reply — @name to mention, /search, /summarize"
+        autoMode={autoMode}
+        onAutoModeChange={handleAutoModeChange}
+      />
+    ),
+    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, slashCommands, messages, autoMode, handleAutoModeChange]
+  );
+
+  const toggleWorkspaceSidebar = useCallback(() => {
+    setWorkspaceSidebarVisible((prev) => {
+      const next = !prev;
+      persistSidebarPreference(next);
+      return next;
+    });
+  }, [persistSidebarPreference]);
+
+  const handleAdd = async (p: Participant) => {
+    const res = await fetch("/api/participants", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(p),
+    });
+    if (res.ok) {
+      const added = await res.json();
+      setParticipants((prev) => [...prev, added]);
+    }
+  };
+
+  const handleUpdate = async (p: Participant) => {
+    const res = await fetch("/api/participants", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(p),
+    });
+    if (res.ok) {
+      const updated = await res.json();
+      setParticipants((prev) => prev.map((x) => (x.id === updated.id ? updated : x)));
+    }
+  };
+
+  const handleRemove = async (id: string) => {
+    const res = await fetch(`/api/participants?id=${encodeURIComponent(id)}`, {
+      method: "DELETE",
+    });
+    if (res.ok) {
+      setParticipants((prev) => prev.filter((p) => p.id !== id));
+      if (activeThreadId) {
+        setActiveParticipantIds((prev) => {
+          const next = prev.filter((participantId) => participantId !== id);
+          persistStoredActiveParticipantIds(activeThreadId, next);
+          return next;
+        });
+      }
+    }
+  };
+
+  const handleReorderParticipants = async (orderedIds: string[]) => {
+    // Optimistic update
+    setParticipants((prev) => {
+      const byId = new Map(prev.map((p) => [p.id, p]));
+      return orderedIds.map((id) => byId.get(id)).filter((p): p is Participant => !!p);
+    });
+    await fetch("/api/participants", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ orderedIds }),
+    });
+  };
+
+  const handleToggleParticipantActive = useCallback(
+    (participantId: string, active: boolean) => {
+      setActiveParticipantIds((prev) => {
+        const availableIds = new Set(participants.map((participant) => participant.id));
+        if (!availableIds.has(participantId)) {
+          return prev;
+        }
+
+        const nextSet = new Set(prev);
+        if (active) {
+          nextSet.add(participantId);
+        } else {
+          nextSet.delete(participantId);
+        }
+
+        const next = participants
+          .map((participant) => participant.id)
+          .filter((id) => nextSet.has(id));
+
+        if (activeThreadId) {
+          persistStoredActiveParticipantIds(activeThreadId, next);
+        }
+
+        return next;
+      });
+    },
+    [activeThreadId, participants]
+  );
+
+  const handleSelectProject = useCallback(
+    (projectId: string) => {
+      const project = projects.find((item) => item.id === projectId);
+      if (!project) return;
+      // Only change participants if the project belongs to the current thread
+      if (activeThreadId && !project.thread_ids?.includes(activeThreadId)) return;
+      const agentIds = project.agents.map((a) => a.agent_id);
+      setActiveParticipantIds(agentIds);
+      if (activeThreadId) {
+        persistStoredActiveParticipantIds(activeThreadId, agentIds);
+      }
+    },
+    [projects, activeThreadId]
+  );
+
+  const searchInputBar = (
+    <div className="border-b border-slate-200/60 bg-white px-6 py-2.5">
+      <div className="max-w-2xl mx-auto relative group/search">
+        <Search
+          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 group-focus-within/search:text-indigo-500 transition-colors"
+          strokeWidth={2}
+        />
+        <input
+          ref={searchInputRef}
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") clearSearch();
+          }}
+          placeholder="Search messages…"
+          className="h-9 w-full rounded-lg border border-slate-200 bg-slate-50/80 pl-9 pr-16 text-sm font-medium outline-none placeholder:text-slate-400 transition-all focus:bg-white focus:border-indigo-300 focus:ring-2 focus:ring-indigo-500/10 hover:border-slate-300"
+        />
+        {normalizedSearchQuery ? (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+            <span className="text-[11px] font-bold text-slate-400">
+              {searchLoading ? "…" : searchTotal}
+            </span>
+            <button
+              type="button"
+              onClick={clearSearch}
+              className="text-[10px] font-bold text-slate-400 hover:text-slate-600 transition-colors"
+            >
+              ✕
+            </button>
+          </div>
+        ) : (
+          <kbd className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-sans font-bold text-slate-400 bg-slate-100 border border-slate-200 rounded-md">⌘K</kbd>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen bg-white text-zinc-900">
+      <WorkspaceSidebar
+        threads={threads}
+        participants={participants}
+        activeThreadId={activeThreadId}
+        isLoading={threadsLoading}
+        isRestoringActiveThread={isRestoringActiveThread}
+        isCreating={isCreating}
+        deletingThreadId={deletingThreadId}
+        renamingThreadId={renamingThreadId}
+        onSelectThread={selectThread}
+        onCreateThread={createThread}
+        onRenameThread={renameThread}
+        onDeleteThread={handleDeleteThread}
+        activeParticipantIds={activeParticipantIds}
+        onToggleParticipantActive={handleToggleParticipantActive}
+        visible={workspaceSidebarVisible}
+        onToggle={toggleWorkspaceSidebar}
+        projects={projects}
+        onCreateProject={createProject}
+        onUpdateProject={updateProject}
+        onDeleteProject={deleteProject}
+        onAddAgentToProject={addAgentToProject}
+        onRemoveAgentFromProject={removeAgentFromProject}
+        onReorderProjectAgents={reorderProjectAgents}
+        onUpdateParticipant={handleUpdate}
+        onSelectProject={handleSelectProject}
+      />
+      <div className="flex flex-col flex-1 min-w-0 relative">
+        {/* Top-right controls */}
+        <div className="absolute top-4 right-4 z-30 flex items-center gap-2">
+          <StatusIndicator />
+          {openThreadId && (
+            <button
+              type="button"
+              onClick={() => setLogsOpen(!logsOpen)}
+              aria-label={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
+              aria-pressed={logsOpen}
+              title={logsOpen ? "Hide logs" : `Show logs${logs.length > 0 ? ` (${logs.length})` : ""}`}
+              className={`inline-flex h-8 w-8 items-center justify-center rounded-md border transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 ${logsOpen
+                ? "border-slate-300 bg-slate-50 text-slate-800"
+                : "border-slate-200 bg-white text-slate-500 hover:bg-slate-50 hover:text-slate-800"
+                }`}
+            >
+              <SquareTerminal className="h-4 w-4" strokeWidth={1.75} />
+            </button>
+          )}
+        </div>
+
+
+
+        {openThreadId && (
+          <header className="border-b border-slate-200 px-6 py-4 flex items-center h-16 pr-14">
+            <div className="flex items-center gap-3 min-w-0">
+              <button
+                onClick={() => setOpenThreadId(null)}
+                className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-zinc-100 rounded-lg transition-all active:scale-95 flex-shrink-0"
+                title="Back to main feed"
+              >
+                <ChevronLeft size={22} strokeWidth={2.5} />
+              </button>
+              <div className="flex flex-col min-w-0">
+                <div className="flex items-center gap-3">
+                  <h2 className="text-[15px] font-bold text-slate-900 tracking-tight leading-tight truncate max-w-[240px]">
+                    {activeThreadTitle}
+                  </h2>
+                  <div className="flex -space-x-1.5 ml-1 flex-shrink-0">
+                    {activeThreadParticipants.map((p) => (
+                      <img
+                        key={p.id}
+                        src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${p.id}&backgroundColor=${p.color ? p.color.replace('#', '') : 'e2e8f0'}`}
+                        alt={p.name}
+                        className="w-5 h-5 rounded-full border-2 border-white shadow-sm ring-1 ring-slate-200 object-cover"
+                        title={p.name}
+                      />
+                    ))}
+                  </div>
+                </div>
+                <div className="text-[11px] text-slate-500 font-medium flex items-center gap-1.5">
+                  <span className="opacity-80">{activeThreadParticipants.length} agents</span>
+                  <span className="w-0.5 h-0.5 rounded-full bg-slate-300" />
+                  <span className="opacity-80">Updated {getTimeAgo(lastThreadUpdate)}</span>
+                </div>
+              </div>
+            </div>
+          </header>
+        )}
+        {
+          isRestoringActiveThread ? (
+            <div className="flex-1 flex items-center justify-center px-4 text-sm text-zinc-500">
+              Loading your last project…
+            </div>
+          ) : (
+            <div className="flex flex-1 min-h-0 bg-slate-50 relative">
+              <div className="flex flex-col flex-1 min-w-0">
+                {!openThreadId && searchInputBar}
+
+                {searchActive ? (
+                  <SearchResults
+                    query={normalizedSearchQuery}
+                    results={searchResults}
+                    total={searchTotal}
+                    participants={participants}
+                    threadTitleById={threadTitleById}
+                    isLoading={searchLoading}
+                    error={searchError}
+                    onSelectResult={handleSelectSearchResult}
+                  />
+                ) : openThreadId ? (
+                  <ThreadView
+                    messages={messages}
+                    streaming={streaming}
+                    participants={participants}
+                    rootMessageId={openThreadId}
+                    onClose={() => setOpenThreadId(null)}
+                    onCopyThread={handleCopyThread}
+                    onAddToChat={handleAddToChat}
+                    onDeleteThreadRoot={handleDeleteThreadRoot}
+                    highlightedMessageId={highlightedMessageId || undefined}
+                    renderReplyComposer={renderReplyComposer}
+                    activeProcesses={activeProcesses.filter(p => ["spawning", "running"].includes(p.state) && p.threadId === openThreadId)}
+                  />
+                ) : (
+                  <MessageList
+                    messages={messages}
+                    streaming={streaming}
+                    participants={participants}
+                    onOpenThread={handleOpenThread}
+                    onCopyThread={handleCopyThread}
+                    onAddToChat={handleAddToChat}
+                    onDeleteThreadRoot={handleDeleteThreadRoot}
+                    onSummarize={handleSummarize}
+                    onCreateTasks={handleExtractTasks}
+                    onUpdateTaskDraft={handleUpdateTaskDraft}
+                    onBuildTasks={handleBuildTasks}
+                    summarizingThreads={summarizingThreads}
+                    extractingTasks={extractingTasks}
+                    buildingDrafts={buildingDrafts}
+                    taskDrafts={taskDrafts}
+                    deletingThreadRootId={deletingThreadRootId}
+                    highlightedMessageId={highlightedMessageId}
+                    shipModeThreads={autoModeThreads}
+                    onUpdateMessageThreadStatus={activeThreadId ? (messageId, status) => {
+                      setMessages((prev) => prev.map((m) => m.id === messageId ? { ...m, threadStatus: status } : m));
+                      void updateMessageThreadStatus(activeThreadId, messageId, status);
+                      void fetch("/api/threads", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ rootMessageId: messageId, status }) });
+                    } : undefined}
+                    onUpdateMessageOutcomeNote={activeThreadId ? (messageId, note) => {
+                      setMessages((prev) => prev.map((m) => m.id === messageId ? { ...m, outcomeNote: note } : m));
+                      void updateMessageOutcomeNote(activeThreadId, messageId, note);
+                      const msg = messages.find((m) => m.id === messageId);
+                      void fetch("/api/threads", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ rootMessageId: messageId, status: msg?.threadStatus ?? null, outcomeNote: note }) });
+                    } : undefined}
+                  />
+                )}
+                {!searchActive && !openThreadId && (
+                  <Composer
+                    onSend={handleSend}
+                    onStop={handleStop}
+                    loading={loading}
+                    participants={activeParticipants}
+                    projects={projectMentions}
+                    projectGroups={threadProjects}
+                    messages={messages}
+                    commands={slashCommands}
+                    pendingThreadInsert={pendingThreadInsert}
+                    onClearPendingThread={() => setPendingThreadInsert(null)}
+                    autoMode={autoMode}
+                    onAutoModeChange={handleAutoModeChange}
+                  />
+                )}
+              </div>
+            </div>
+          )
+        }
+      </div >
+      {initialRootMessageId && (
+        <LogPanel logs={logs} participants={participants} onClear={() => void clearLogs(activeThreadId)} open={logsOpen} onToggle={() => setLogsOpen(false)} />
+      )}
+    </div >
+  );
+}