@mndrk/agx 2.0.26 → 2.0.33

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
 import { useGroupChat } from "@/hooks/useGroupChat";
 import { useProcessPolling } from "@/hooks/useProcessPolling";
 import { useThreadState } from "@/hooks/useThreadState";
@@ -24,10 +25,12 @@ import {
 } from "@/services/userPreferences";
 import type { SlashCommand } from "@/hooks/useCommandAutocomplete";
 import type { Participant, GroupMessage, MessageSearchResponse, MessageSearchResult } from "@/lib/types";
+import type { ThreadStatus } from "@/lib/storage/thread-adapter";
 import type { TaskDraftMessage } from "@/types/tasks";
 import { buildTasks } from "@/services/agxService";
+import ConfirmDialog from "@/components/ConfirmDialog";
 import { useProjectsWithAgents, useProjects } from "@/hooks/useProjects";
-import { Search, ChevronLeft, SquareTerminal, PanelLeftOpen, Moon, Sun } from "lucide-react";
+import { Search, ChevronLeft, SquareTerminal, PanelLeftOpen, Moon, Sun, BookOpen, LoaderCircle } from "lucide-react";
 import { LogPanel } from "./LogPanel";
 import { StatusIndicator } from "./StatusIndicator";
 
@@ -36,6 +39,17 @@ const SUMMARY_MARKER = "<!-- thread-summary -->";
 const TASK_DRAFT_MARKER = "<!-- task-draft -->";
 const THEME_STORAGE_KEY = "agx-theme";
 
+interface ThreadKnowledgeRun {
+  id: string;
+  status: "running" | "completed" | "failed";
+  requestedScopes: Array<"repo" | "project">;
+  repoInsertedCount: number;
+  projectInsertedCount: number;
+  error: string | null;
+  updatedAt: string;
+  completedAt: string | null;
+}
+
 function stripThoughts(text: string): string {
   return text.replace(/(?:^|\n)Thinking\.\.\.[\s\S]*?\.\.\.done thinking\.?\s*/g, "\n").trim();
 }
@@ -106,6 +120,17 @@ function getTimeAgo(ts: number) {
   return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(ts);
 }
 
+async function fetchLatestThreadKnowledgeRun(rootMessageId: string): Promise<ThreadKnowledgeRun | null> {
+  const response = await fetch(`/api/threads/knowledge?rootMessageId=${encodeURIComponent(rootMessageId)}`, {
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error("Failed to load thread knowledge run");
+  }
+  const payload = await response.json().catch(() => null);
+  return payload?.run ?? null;
+}
+
 function getOrderedParticipantIds(
   participants: Participant[],
   projects: ReturnType<typeof useProjectsWithAgents>["projects"],
@@ -119,15 +144,15 @@ function getOrderedParticipantIds(
     ? threadProject.agents.map((agent) => agent.agent_id).filter((id) => participantIdSet.has(id))
     : [];
 
+  if (threadProject) {
+    return routingOrderIds;
+  }
+
   if (routingOrderIds.length === 0) {
     return participants.map((participant) => participant.id);
   }
 
-  const routedIdSet = new Set(routingOrderIds);
-  const fallbackIds = participants
-    .map((participant) => participant.id)
-    .filter((id) => !routedIdSet.has(id));
-  return [...routingOrderIds, ...fallbackIds];
+  return routingOrderIds;
 }
 
 function reconcileActiveParticipantIds(
@@ -181,9 +206,16 @@ interface ChatContainerProps {
   projectSlug?: string;
   initialThreadId?: string;
   initialRootMessageId?: string;
+  showSidebar?: boolean;
 }
 
-export function ChatContainer({ projectSlug, initialThreadId, initialRootMessageId }: ChatContainerProps = {}) {
+export function ChatContainer({
+  projectSlug,
+  initialThreadId,
+  initialRootMessageId,
+  showSidebar = true,
+}: ChatContainerProps = {}) {
+  const searchParams = useSearchParams();
   const {
     threads,
     activeThreadId,
@@ -202,24 +234,91 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     updateMessageThreadStatus,
     updateMessageOutcomeNote,
   } = useThreadState(initialThreadId);
-  const { messages, setMessages, logs, sendMessage, loadHistory, clearLogs, stop, stopThread } =
+  const { messages, setMessages, logs, sendMessage, loadHistory, clearLogs, chatRuns, setChatRuns, stop, stopThread } =
     useGroupChat(activeThreadId);
-  const { activeAgents: polledActiveAgents, processes: activeProcesses, streaming, poll } = useProcessPolling(
+  const { activeAgents: polledActiveAgents, processes: activeProcesses, streaming, chatRuns: polledChatRuns, poll } = useProcessPolling(
     activeThreadId ? { workspaceId: activeThreadId } : null,
     { messages, setMessages }
   );
-  const loading = polledActiveAgents.size > 0;
+  const activeChatRuns = useMemo(() => {
+    const now = Date.now();
+    const byId = new Map(polledChatRuns.map((run) => [run.chatRunId, run]));
+
+    for (const run of chatRuns) {
+      if (!run.optimistic || byId.has(run.chatRunId)) continue;
+      if (now - (run.enqueuedAt ?? 0) > 5000) continue;
+      byId.set(run.chatRunId, run);
+    }
+
+    return Array.from(byId.values()).filter(
+      (run) => run.status === "queued" || run.status === "running"
+    );
+  }, [chatRuns, polledChatRuns]);
+  const composerActivityStatus =
+    polledActiveAgents.size > 0 || activeChatRuns.some((run) => run.status === "running")
+      ? "working"
+      : activeChatRuns.some((run) => run.status === "queued")
+        ? "queued"
+        : "ready";
+  const loading = composerActivityStatus !== "ready";
+
+  useEffect(() => {
+    setChatRuns((prev) => {
+      const now = Date.now();
+      const byId = new Map(
+        prev
+          .filter((run) => typeof run.chatRunId === "string" && run.chatRunId.length > 0)
+          .map((run) => [run.chatRunId, run])
+      );
+
+      for (const run of polledChatRuns) {
+        if (!run?.chatRunId) continue;
+        byId.set(run.chatRunId, run);
+      }
+
+      const next = Array.from(byId.values()).filter((run) => {
+        if (!run.optimistic) return true;
+        if (polledChatRuns.some((polledRun) => polledRun.chatRunId === run.chatRunId)) return true;
+        return now - (run.enqueuedAt ?? 0) <= 5000;
+      });
+
+      return next.sort((a, b) =>
+        String(a.chatRunId || "").localeCompare(String(b.chatRunId || ""))
+      );
+    });
+  }, [polledChatRuns, setChatRuns]);
+
+  const cancelChatRun = useCallback(async (chatRunId: string) => {
+    await fetch(`/api/chat-runs/${encodeURIComponent(chatRunId)}/signal`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ signal: "cancel", reason: "Stopped from chat UI" }),
+    }).catch(() => {});
+  }, []);
 
   // Wrap stop functions to immediately refresh polling state
   const handleStop = useCallback(async () => {
+    const latestRun = activeChatRuns[0];
+    if (latestRun?.chatRunId) {
+      await cancelChatRun(latestRun.chatRunId);
+    }
     await stop();
     await poll();
-  }, [stop, poll]);
+  }, [activeChatRuns, cancelChatRun, stop, poll]);
 
   const handleStopThread = useCallback(async (rootMessageId: string) => {
+    const matchingRun = activeChatRuns.find((run) => run.rootMessageId === rootMessageId);
+    if (matchingRun?.chatRunId) {
+      await cancelChatRun(matchingRun.chatRunId);
+    }
     await stopThread(rootMessageId);
     await poll();
-  }, [stopThread, poll]);
+  }, [activeChatRuns, cancelChatRun, stopThread, poll]);
+
+  const handleStopRef = useRef(handleStop);
+  useEffect(() => {
+    handleStopRef.current = handleStop;
+  }, [handleStop]);
   const {
     projects,
     createProject,
@@ -240,10 +339,13 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     return document.documentElement.classList.contains("dark") ? "dark" : "light";
   });
   const [workspaceSidebarVisible, setWorkspaceSidebarVisible] = useState(false);
+  const workspaceSidebarHydratedRef = useRef(false);
 
   // Sync sidebar visibility from localStorage after hydration to avoid SSR mismatch
   useEffect(() => {
-    setWorkspaceSidebarVisible(loadWorkspaceSidebarVisible());
+    const stored = loadWorkspaceSidebarVisible();
+    workspaceSidebarHydratedRef.current = true;
+    setWorkspaceSidebarVisible(stored);
   }, []);
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -255,7 +357,10 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   const [logsOpen, setLogsOpen] = useState(false);
   const [autoModeThreads, setAutoModeThreads] = useState<Set<string>>(new Set());
   const [pendingAutoMode, setPendingAutoMode] = useState(false);
+  const [knowledgeExtractionPending, setKnowledgeExtractionPending] = useState(false);
+  const [threadKnowledgeRun, setThreadKnowledgeRun] = useState<ThreadKnowledgeRun | null>(null);
   const [openThreadId, setOpenThreadId] = useState<string | null>(initialRootMessageId ?? null);
+  const routeOpenThreadId = searchParams.get("open")?.trim() || null;
   const autoMode = openThreadId ? autoModeThreads.has(openThreadId) : pendingAutoMode;
 
   // Hydrate & poll ship mode from server when a thread is opened
@@ -313,11 +418,22 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   // Sync URL to reflect the currently open thread
   useEffect(() => {
     if (openThreadId) {
-      window.history.replaceState(null, "", `/thread/${openThreadId}`);
+      const nextPath = projectSlug
+        ? `/projects/${projectSlug}/thread/${encodeURIComponent(activeThreadId ?? initialThreadId ?? "")}?open=${encodeURIComponent(openThreadId)}`
+        : `/thread/${openThreadId}`;
+      window.history.replaceState(null, "", nextPath);
     } else {
-      window.history.replaceState(null, "", "/");
+      window.history.replaceState(null, "", projectSlug ? `/projects/${projectSlug}/thread/${encodeURIComponent(activeThreadId ?? initialThreadId ?? "")}` : "/");
+    }
+  }, [activeThreadId, initialThreadId, openThreadId, projectSlug]);
+
+  useEffect(() => {
+    if (!projectSlug) {
+      return;
     }
-  }, [openThreadId, activeThreadId]);
+
+    setOpenThreadId((current) => (current === routeOpenThreadId ? current : routeOpenThreadId));
+  }, [projectSlug, routeOpenThreadId]);
 
   // Resolve initialRootMessageId → workspace thread on mount
   useEffect(() => {
@@ -339,6 +455,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   const [highlightedMessageId, setHighlightedMessageId] = useState<string | null>(null);
   const [summarizingThreads, setSummarizingThreads] = useState<Set<string>>(new Set());
   const [deletingThreadRootId, setDeletingThreadRootId] = useState<string | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<{ type: "thread" | "message"; id: string; preview?: string } | null>(null);
   const [taskDrafts, setTaskDraftsRaw] = useState<Record<string, TaskDraftMessage>>({});
   const setTaskDrafts: typeof setTaskDraftsRaw = useCallback((update) => {
     setTaskDraftsRaw((prev) => {
@@ -448,11 +565,25 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   const activeThreadTitle = useMemo(() => {
     if (!openThreadId) return "";
     const rootMsg = messages.find((m) => m.id === openThreadId);
-    if (!rootMsg) return "Thread";
+    if (!rootMsg) return "Discussion";
     const text = rootMsg.content.trim();
     return text.length > 60 ? text.slice(0, 60) + "..." : text;
   }, [openThreadId, messages]);
 
+  const activeThreadStatus = useMemo((): { value: ThreadStatus; label: string; color: string } | null => {
+    if (!openThreadId) return null;
+    const rootMsg = messages.find((m) => m.id === openThreadId);
+    const status = rootMsg?.threadStatus ?? "active";
+    const map: Record<ThreadStatus, { label: string; color: string }> = {
+      active: { label: "Active", color: "#f59e0b" },
+      paused: { label: "Paused", color: "#f97316" },
+      "in-review": { label: "In Review", color: "#6b7280" },
+      done: { label: "Done", color: "#3b82f6" },
+      archived: { label: "Archived", color: "#9ca3af" },
+    };
+    return { value: status, ...map[status] };
+  }, [openThreadId, messages]);
+
   const clearSearch = useCallback(() => {
     setSearchQuery("");
     setSearchResults([]);
@@ -494,6 +625,103 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     navigator.clipboard.writeText(md).catch(err => console.error("Failed to copy thread", err));
   }, [messages, participants, taskDrafts]);
 
+  const handleLearnFromDiscussion = useCallback(async () => {
+    if (!openThreadId) return;
+
+    setKnowledgeExtractionPending(true);
+    try {
+      const scopes: string[] = ["repo"];
+      if (projectSlug) scopes.push("project");
+
+      const response = await fetch("/api/threads/knowledge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ rootMessageId: openThreadId, scopes }),
+      });
+      const payload = await response.json().catch(() => null);
+      if (!response.ok) {
+        throw new Error(typeof payload?.error === "string" ? payload.error : "Request failed");
+      }
+      setThreadKnowledgeRun(payload?.run ?? null);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Request failed";
+      window.alert(`Failed to extract knowledge: ${message}`);
+    } finally {
+      setKnowledgeExtractionPending(false);
+    }
+  }, [openThreadId, projectSlug]);
+
+  useEffect(() => {
+    if (!openThreadId) {
+      setThreadKnowledgeRun(null);
+      setKnowledgeExtractionPending(false);
+      return;
+    }
+
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        const run = await fetchLatestThreadKnowledgeRun(openThreadId);
+        if (cancelled) return;
+        setThreadKnowledgeRun(run);
+      } catch {
+        if (!cancelled) {
+          setThreadKnowledgeRun(null);
+        }
+      }
+    };
+
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [openThreadId]);
+
+  useEffect(() => {
+    if (!openThreadId || threadKnowledgeRun?.status !== "running") {
+      return;
+    }
+
+    let cancelled = false;
+    const pollRun = async () => {
+      try {
+        const run = await fetchLatestThreadKnowledgeRun(openThreadId);
+        if (cancelled) return;
+        setThreadKnowledgeRun(run);
+      } catch {
+        // Preserve the current running state on transient polling failures.
+      }
+    };
+
+    void pollRun();
+    const interval = window.setInterval(() => {
+      void pollRun();
+    }, 2000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [openThreadId, threadKnowledgeRun?.status]);
+
+  const isKnowledgeExtractionRunning = threadKnowledgeRun?.status === "running";
+  const knowledgeButtonDisabled = knowledgeExtractionPending || isKnowledgeExtractionRunning;
+  const latestKnowledgeInsertedCount = (threadKnowledgeRun?.repoInsertedCount ?? 0) + (threadKnowledgeRun?.projectInsertedCount ?? 0);
+  const knowledgeStatusText = useMemo(() => {
+    if (!threadKnowledgeRun) return null;
+    if (threadKnowledgeRun.status === "running") {
+      return "Learning in progress";
+    }
+    if (threadKnowledgeRun.status === "failed") {
+      return "Last learning run failed";
+    }
+    if (latestKnowledgeInsertedCount > 0) {
+      const noun = latestKnowledgeInsertedCount === 1 ? "insight" : "insights";
+      return `Learned ${latestKnowledgeInsertedCount} ${noun}`;
+    }
+    return "No new learnings";
+  }, [latestKnowledgeInsertedCount, threadKnowledgeRun]);
+
   useEffect(() => {
     void reloadParticipants(true);
   }, [reloadParticipants]);
@@ -552,10 +780,14 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     }
 
     const reconciled = reconcileActiveParticipantIds(orderedParticipantIds, storedIds);
-    if (reconciled.length !== storedIds.length || reconciled.some((id, index) => storedIds[index] !== id)) {
-      persistStoredActiveParticipantIds(activeThreadId, reconciled);
+    const effective = reconciled.length > 0 ? reconciled : orderedParticipantIds;
+    if (
+      effective.length !== storedIds.length ||
+      effective.some((id, index) => storedIds[index] !== id)
+    ) {
+      persistStoredActiveParticipantIds(activeThreadId, effective);
     }
-    setActiveParticipantIds(reconciled);
+    setActiveParticipantIds(effective);
   }, [activeThreadId, participants, participantsLoaded, projects]);
 
   useEffect(() => {
@@ -568,6 +800,10 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
           if (current === preferences.threadSidebarVisible) {
             return current;
           }
+          if (workspaceSidebarHydratedRef.current) {
+            void persistWorkspaceSidebarPreferenceRemotely(current);
+            return current;
+          }
           persistWorkspaceSidebarVisible(preferences.threadSidebarVisible);
           return preferences.threadSidebarVisible;
         });
@@ -578,7 +814,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     return () => {
       cancelled = true;
     };
-  }, [fetchUserPreferences, persistWorkspaceSidebarVisible]);
+  }, [persistWorkspaceSidebarPreferenceRemotely]);
 
   useEffect(() => {
     if (!threadsLoading && !isCreating && threads.length === 0) {
@@ -674,7 +910,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   useEffect(() => {
     // Only stop active streams when actually switching threads, not on initial mount.
     if (prevActiveThreadIdRef.current !== null && prevActiveThreadIdRef.current !== activeThreadId) {
-      handleStop();
+      void handleStopRef.current();
       if (pendingOpenThreadIdRef.current) {
         setOpenThreadId(pendingOpenThreadIdRef.current);
         pendingOpenThreadIdRef.current = null;
@@ -696,7 +932,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
         }
       })
       .catch(() => setTaskDraftsRaw({}));
-  }, [activeThreadId, loadHistory, handleStop]);
+  }, [activeThreadId, loadHistory]);
 
   useEffect(() => {
     if (!activeThreadId) return;
@@ -1087,10 +1323,18 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   );
 
   const handleDeleteThreadRoot = useCallback(
-    async (rootMessageId: string) => {
+    (rootMessageId: string) => {
       if (!activeThreadId || !rootMessageId) return;
-      const confirmed = window.confirm("Delete this thread and all of its replies?");
-      if (!confirmed) return;
+      const msg = messages.find((m) => m.id === rootMessageId);
+      const preview = msg?.content?.slice(0, 120) || undefined;
+      setPendingDelete({ type: "thread", id: rootMessageId, preview });
+    },
+    [activeThreadId, messages]
+  );
+
+  const executeDeleteThreadRoot = useCallback(
+    async (rootMessageId: string) => {
+      if (!activeThreadId) return;
 
       setDeletingThreadRootId(rootMessageId);
       handleStopThread(rootMessageId);
@@ -1123,6 +1367,55 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
     [activeThreadId, loadHistory, messages, handleStopThread, updateThreadMessages]
   );
 
+  const handleDeleteMessage = useCallback(
+    (messageId: string) => {
+      if (!activeThreadId || !messageId) return;
+      const msg = messages.find((m) => m.id === messageId);
+      const preview = msg?.content?.slice(0, 120) || undefined;
+      setPendingDelete({ type: "message", id: messageId, preview });
+    },
+    [activeThreadId, messages]
+  );
+
+  const executeDeleteMessage = useCallback(
+    async (messageId: string) => {
+      if (!activeThreadId) return;
+
+      try {
+        const params = new URLSearchParams({
+          threadId: activeThreadId,
+          messageId,
+        });
+        const response = await fetch(`/api/history?${params.toString()}`, { method: "DELETE" });
+        if (!response.ok) {
+          console.error("Failed to delete message", await response.text());
+          return;
+        }
+
+        const nextMessages = messages.filter((m) => m.id !== messageId);
+        void updateThreadMessages(activeThreadId, nextMessages);
+        await loadHistory(activeThreadId);
+      } catch (error) {
+        console.error("Failed to delete message", error);
+      }
+    },
+    [activeThreadId, loadHistory, messages, updateThreadMessages]
+  );
+
+  const handleConfirmDelete = useCallback(() => {
+    if (!pendingDelete) return;
+    if (pendingDelete.type === "thread") {
+      void executeDeleteThreadRoot(pendingDelete.id);
+    } else {
+      void executeDeleteMessage(pendingDelete.id);
+    }
+    setPendingDelete(null);
+  }, [pendingDelete, executeDeleteThreadRoot, executeDeleteMessage]);
+
+  const handleCancelDelete = useCallback(() => {
+    setPendingDelete(null);
+  }, []);
+
   const slashCommands: SlashCommand[] = useMemo(
     () => [
       {
@@ -1154,24 +1447,35 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   );
 
   const renderReplyComposer = useCallback(
-    (rootMessageId: string) => (
-      <Composer
-        onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId) =>
-          handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId)
-        }
-        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]
+    (rootMessageId: string) => {
+      const threadActivityStatus =
+        activeProcesses.some((process) => ["spawning", "running"].includes(process.state) && process.threadId === rootMessageId) ||
+        Object.values(streaming).some((entry) => entry.rootMessageId === rootMessageId)
+          ? "working"
+          : activeChatRuns.some((run) => run.rootMessageId === rootMessageId && run.status === "queued")
+            ? "queued"
+            : "ready";
+
+      return (
+        <Composer
+          onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId) =>
+            handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId)
+          }
+          onStop={() => handleStopThread(rootMessageId)}
+          loading={threadActivityStatus !== "ready"}
+          activityStatus={threadActivityStatus}
+          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, activeProcesses, activeChatRuns]
   );
 
   const toggleWorkspaceSidebar = useCallback(() => {
@@ -1295,10 +1599,12 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
   );
 
   const mainToolbar = (
-    <div className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6">
+    <div
+      className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6"
+    >
       <div className="mx-auto flex max-w-5xl items-center gap-3">
         <div className="flex min-w-0 items-center flex-shrink-0">
-          {!workspaceSidebarVisible && (
+          {showSidebar && !workspaceSidebarVisible && (
             <button
               type="button"
               onClick={toggleWorkspaceSidebar}
@@ -1372,34 +1678,36 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
 
   return (
     <div className="flex h-screen bg-[var(--app-shell-bg)] text-[var(--foreground)]">
-      <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">
+        {showSidebar ? (
+          <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}
+          />
+        ) : null}
+        <div className="flex flex-col flex-1 min-w-0 relative">
         {
           isRestoringActiveThread ? (
             <div className="flex-1 flex items-center justify-center px-4 text-sm text-[var(--muted-foreground)]">
@@ -1409,23 +1717,40 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
             <div className="flex flex-1 min-h-0 bg-transparent relative">
               <div className="flex flex-col flex-1 min-w-0">
                 {openThreadId ? (
-                  <div className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6">
+                  <div className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6 transition-colors duration-200 shrink-0">
                     <div className="mx-auto flex max-w-5xl items-center gap-3 min-w-0">
                       <button
                         onClick={() => setOpenThreadId(null)}
-                        className="p-1.5 text-[var(--app-shell-muted)] hover:text-indigo-500 hover:bg-[var(--app-shell-subtle)] rounded-xl transition-all active:scale-95 flex-shrink-0"
+                        className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--primary)] hover:bg-[var(--app-shell-subtle)] rounded-xl transition-all active:scale-95 flex-shrink-0"
                         title="Back to main feed"
                       >
                         <ChevronLeft size={20} strokeWidth={2.25} />
                       </button>
                       <div className="flex-1 flex flex-col min-w-0">
-                        <h2 className="text-[15px] font-semibold text-[var(--foreground)] tracking-tight leading-tight truncate min-w-0">
-                          {activeThreadTitle}
-                        </h2>
+                        <div className="flex items-center gap-2 min-w-0">
+                          <h2 className="text-[15px] font-semibold text-[var(--foreground)] tracking-tight leading-tight truncate min-w-0">
+                            {activeThreadTitle}
+                          </h2>
+                          {activeThreadStatus && (
+                            <span
+                              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold border shrink-0"
+                              style={{ borderColor: activeThreadStatus.color + "40", color: activeThreadStatus.color }}
+                            >
+                              <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: activeThreadStatus.color }} />
+                              {activeThreadStatus.label}
+                            </span>
+                          )}
+                        </div>
                         <div className="flex items-center gap-1.5 text-[11px] font-medium text-[var(--app-shell-muted)]">
                           <span className="opacity-80">{activeThreadParticipants.length} agents</span>
                           <span className="h-0.5 w-0.5 rounded-full bg-[var(--app-shell-soft-text)]" />
                           <span className="opacity-80">Updated {getTimeAgo(lastThreadUpdate)}</span>
+                          {knowledgeStatusText && (
+                            <>
+                              <span className="h-0.5 w-0.5 rounded-full bg-[var(--app-shell-soft-text)]" />
+                              <span className="opacity-80">{knowledgeStatusText}</span>
+                            </>
+                          )}
                         </div>
                       </div>
                       <div className="flex -space-x-1.5 flex-shrink-0">
@@ -1440,6 +1765,23 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
                         ))}
                       </div>
                       <div className="ml-auto flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => void handleLearnFromDiscussion()}
+                          disabled={knowledgeButtonDisabled}
+                          title={isKnowledgeExtractionRunning ? "Learning is already running for this discussion" : "Learn from this discussion"}
+                          className={`inline-flex h-9 items-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)] ${knowledgeButtonDisabled
+                            ? "cursor-wait border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] text-[var(--app-shell-muted)]"
+                            : "border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+                            }`}
+                        >
+                          {knowledgeButtonDisabled ? (
+                            <LoaderCircle className="h-3.5 w-3.5 animate-spin" strokeWidth={1.75} />
+                          ) : (
+                            <BookOpen className="h-3.5 w-3.5" strokeWidth={1.75} />
+                          )}
+                          <span className="hidden sm:inline">{isKnowledgeExtractionRunning ? "Learning..." : "Learn from discussion"}</span>
+                        </button>
                         {renderThemeToggleButton()}
                         <StatusIndicator />
                         <button
@@ -1477,10 +1819,12 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
                     streaming={streaming}
                     participants={participants}
                     rootMessageId={openThreadId}
+                    queued={activeChatRuns.some((run) => run.rootMessageId === openThreadId && run.status === "queued")}
                     onClose={() => setOpenThreadId(null)}
                     onCopyThread={handleCopyThread}
                     onAddToChat={handleAddToChat}
                     onDeleteThreadRoot={handleDeleteThreadRoot}
+                    onDeleteMessage={handleDeleteMessage}
                     highlightedMessageId={highlightedMessageId || undefined}
                     renderReplyComposer={renderReplyComposer}
                     activeProcesses={activeProcesses.filter(p => ["spawning", "running"].includes(p.state) && p.threadId === openThreadId)}
@@ -1523,6 +1867,7 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
                     onSend={handleSend}
                     onStop={handleStop}
                     loading={loading}
+                    activityStatus={composerActivityStatus}
                     participants={activeParticipants}
                     projects={projectMentions}
                     projectGroups={threadProjects}
@@ -1538,10 +1883,25 @@ export function ChatContainer({ projectSlug, initialThreadId, initialRootMessage
             </div>
           )
         }
-      </div >
+      </div>
       {initialRootMessageId && (
         <LogPanel logs={logs} participants={participants} onClear={() => void clearLogs(activeThreadId)} open={logsOpen} onToggle={() => setLogsOpen(false)} />
       )}
-    </div >
+      <ConfirmDialog
+        isOpen={pendingDelete !== null}
+        title={pendingDelete?.type === "thread" ? "Delete Discussion" : "Delete Message"}
+        message={
+          pendingDelete?.type === "thread"
+            ? "This will permanently delete this discussion and all of its replies. This action cannot be undone."
+            : "This will permanently delete this message. This action cannot be undone."
+        }
+        preview={pendingDelete?.preview}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        variant="danger"
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
+      />
+    </div>
   );
 }