@mndrk/agx 2.0.0-next.8 → 2.0.0

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

@@ -1,9 +1,10 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { useRouter, useParams } from "next/navigation";
 import { useGroupChat } from "@/hooks/useGroupChat";
-import { useThreadState } from "@/hooks/useThreadState";
-import { ThreadSidebar } from "@/components/thread/ThreadSidebar";
+import { useWorkspaceState } from "@/hooks/useThreadState";
+import { WorkspaceSidebar } from "@/components/thread/ThreadSidebar";
 import "@/styles/threadSidebar.css";
 import { MessageList } from "./MessageList";
 import { ThreadView } from "./ThreadView";
@@ -11,8 +12,8 @@ import { SearchResults } from "./SearchResults";
 import { Composer } from "./Composer";
 import { LogPanel } from "./LogPanel";
 import {
-  loadThreadSidebarVisible,
-  persistThreadSidebarVisible,
+  loadWorkspaceSidebarVisible,
+  persistWorkspaceSidebarVisible,
 } from "@/state/uiSettings";
 import {
   loadStoredActiveParticipantIds,
@@ -29,7 +30,7 @@ import { buildTasks } from "@/services/agxService";
 import { SquareTerminal, Search, ChevronLeft } from "lucide-react";
 import { StatusIndicator } from "./StatusIndicator";
 
-const LEGACY_THREAD_ID = "global";
+const LEGACY_WORKSPACE_ID = "global";
 const SUMMARY_MARKER = "<!-- thread-summary -->";
 const TASK_DRAFT_MARKER = "<!-- task-draft -->";
 
@@ -138,35 +139,51 @@ function toMarkdown(
   return lines.join("\n").trim();
 }
 
-export function ChatContainer() {
+interface ChatContainerProps {
+  /** Workspace ID from URL (/w/<id>) */
+  workspaceId?: string;
+  /** Root message ID to open as a sub-thread view (/w/<id>/<threadId>) */
+  openRootMessageId?: string;
+}
+
+export function ChatContainer({ workspaceId: propWorkspaceId, openRootMessageId }: ChatContainerProps = {}) {
+  const router = useRouter();
+  const params = useParams();
+  // Read from URL params so navigating /w/<id> <-> /w/<id>/<threadId> doesn't remount
+  const urlWorkspaceId = (params?.workspaceId as string | undefined) ?? propWorkspaceId;
+  const urlThreadId = (params?.threadId as string | undefined) ?? openRootMessageId ?? null;
   const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread,
-    updateThreadMessages,
+    workspaces,
+    activeWorkspaceId,
+    selectWorkspace,
+    createWorkspace,
+    deleteWorkspace,
+    updateWorkspaceMessages,
     isCreating,
-    deletingThreadId,
-    renamingThreadId,
-    isLoading: threadsLoading,
-    isRestoringActiveThread,
-    renameThread,
-  } = useThreadState();
+    deletingWorkspaceId,
+    renamingWorkspaceId,
+    isLoading: workspacesLoading,
+    isRestoringActiveWorkspace,
+    renameWorkspace,
+  } = useWorkspaceState();
   const { messages, streaming, loading, logs, sendMessage, loadHistory, clearLogs, stop, stopThread } =
-    useGroupChat(activeThreadId);
+    useGroupChat(activeWorkspaceId);
   const [participants, setParticipants] = useState<Participant[]>([]);
   const [participantsLoaded, setParticipantsLoaded] = useState(false);
   const [activeParticipantIds, setActiveParticipantIds] = useState<string[]>([]);
   const [copied, setCopied] = useState(false);
   const [logsOpen, setLogsOpen] = useState(false);
-  const [threadSidebarVisible, setThreadSidebarVisible] = useState(false);
+  const [workspaceSidebarVisible, setWorkspaceSidebarVisible] = useState(false);
 
   // Sync sidebar visibility from localStorage after hydration to avoid SSR mismatch
   useEffect(() => {
-    setThreadSidebarVisible(loadThreadSidebarVisible());
+    setWorkspaceSidebarVisible(loadWorkspaceSidebarVisible());
   }, []);
-  const [openThreadId, setOpenThreadId] = useState<string | null>(null);
+  const [openThreadId, setOpenThreadId] = useState<string | null>(urlThreadId);
+  // Sync openThreadId with URL changes (navigating between /w/<id> and /w/<id>/<threadId>)
+  useEffect(() => {
+    setOpenThreadId(urlThreadId);
+  }, [urlThreadId]);
   const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<MessageSearchResult[]>([]);
   const [searchTotal, setSearchTotal] = useState(0);
@@ -180,20 +197,20 @@ export function ChatContainer() {
     setTaskDraftsRaw((prev) => {
       const next = typeof update === "function" ? update(prev) : update;
       // persist each changed draft
-      if (activeThreadId) {
+      if (activeWorkspaceId) {
         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 }),
+              body: JSON.stringify({ threadId: activeWorkspaceId, messageId: msgId, draft }),
             }).catch(() => { });
           }
         }
       }
       return next;
     });
-  }, [activeThreadId]);
+  }, [activeWorkspaceId]);
   const [extractingTasks, setExtractingTasks] = useState<Set<string>>(new Set());
   const [buildingDrafts, setBuildingDrafts] = useState<Set<string>>(new Set());
   const searchInputRef = useRef<HTMLInputElement | null>(null);
@@ -218,9 +235,9 @@ export function ChatContainer() {
     []
   );
 
-  const persistThreadSidebarPreferenceRemotely = useCallback(async (visible: boolean) => {
+  const persistWorkspaceSidebarPreferenceRemotely = useCallback(async (visible: boolean) => {
     try {
-      await updateUserPreferences({ threadSidebarVisible: visible });
+      await updateUserPreferences({ workspaceSidebarVisible: visible });
     } catch (error) {
       console.error("Unable to persist thread sidebar preference", error);
     }
@@ -228,20 +245,20 @@ export function ChatContainer() {
 
   const persistSidebarPreference = useCallback(
     (visible: boolean) => {
-      persistThreadSidebarVisible(visible);
-      void persistThreadSidebarPreferenceRemotely(visible);
+      persistWorkspaceSidebarVisible(visible);
+      void persistWorkspaceSidebarPreferenceRemotely(visible);
     },
-    [persistThreadSidebarPreferenceRemotely]
+    [persistWorkspaceSidebarPreferenceRemotely]
   );
 
   const normalizedSearchQuery = searchQuery.trim();
   const searchActive = normalizedSearchQuery.length > 0;
-  const threadTitleById = useMemo(
+  const workspaceTitleById = useMemo(
     () =>
       Object.fromEntries(
-        threads.map((thread) => [thread.id, thread.title?.trim() || "Untitled workspace"])
+        workspaces.map((workspace) => [workspace.id, workspace.title?.trim() || "Untitled workspace"])
       ),
-    [threads]
+    [workspaces]
   );
 
   const activeThreadParticipants = useMemo(() => {
@@ -372,12 +389,12 @@ export function ChatContainer() {
     const participantIds = participants.map((participant) => participant.id);
     const participantIdSet = new Set(participantIds);
 
-    if (!activeThreadId) {
+    if (!activeWorkspaceId) {
       setActiveParticipantIds(participantIds);
       return;
     }
 
-    const storedIds = loadStoredActiveParticipantIds(activeThreadId);
+    const storedIds = loadStoredActiveParticipantIds(activeWorkspaceId);
     if (storedIds === null) {
       setActiveParticipantIds(participantIds);
       return;
@@ -385,10 +402,10 @@ export function ChatContainer() {
 
     const reconciled = storedIds.filter((id) => participantIdSet.has(id));
     if (reconciled.length !== storedIds.length) {
-      persistStoredActiveParticipantIds(activeThreadId, reconciled);
+      persistStoredActiveParticipantIds(activeWorkspaceId, reconciled);
     }
     setActiveParticipantIds(reconciled);
-  }, [activeThreadId, participants, participantsLoaded]);
+  }, [activeWorkspaceId, participants, participantsLoaded]);
 
   useEffect(() => {
     let cancelled = false;
@@ -396,12 +413,12 @@ export function ChatContainer() {
       try {
         const preferences = await fetchUserPreferences();
         if (cancelled) return;
-        setThreadSidebarVisible((current) => {
-          if (current === preferences.threadSidebarVisible) {
+        setWorkspaceSidebarVisible((current) => {
+          if (current === preferences.workspaceSidebarVisible) {
             return current;
           }
-          persistThreadSidebarVisible(preferences.threadSidebarVisible);
-          return preferences.threadSidebarVisible;
+          persistWorkspaceSidebarVisible(preferences.workspaceSidebarVisible);
+          return preferences.workspaceSidebarVisible;
         });
       } catch (error) {
         console.error("Failed to load user preferences", error);
@@ -410,13 +427,49 @@ export function ChatContainer() {
     return () => {
       cancelled = true;
     };
-  }, [fetchUserPreferences, persistThreadSidebarVisible]);
+  }, [fetchUserPreferences, persistWorkspaceSidebarVisible]);
+
+  useEffect(() => {
+    if (!workspacesLoading && !isCreating && workspaces.length === 0) {
+      void createWorkspace({ id: LEGACY_WORKSPACE_ID, title: "General" });
+    }
+  }, [workspacesLoading, isCreating, workspaces.length, createWorkspace]);
+
+  // Select workspace from URL param on mount
+  const urlWorkspaceHandledRef = useRef(false);
+  useEffect(() => {
+    if (!urlWorkspaceId || workspacesLoading || urlWorkspaceHandledRef.current) return;
+    urlWorkspaceHandledRef.current = true;
+    const existing = workspaces.find((w) => w.id === urlWorkspaceId);
+    if (existing) {
+      selectWorkspace(urlWorkspaceId);
+    } else {
+      void createWorkspace({ id: urlWorkspaceId });
+    }
+  }, [urlWorkspaceId, workspacesLoading, workspaces, selectWorkspace, createWorkspace]);
+
+  // Redirect bare / to /w/<activeWorkspaceId>
+  const hasRedirectedRef = useRef(false);
+  useEffect(() => {
+    if (urlWorkspaceId || hasRedirectedRef.current || !activeWorkspaceId || workspacesLoading) return;
+    hasRedirectedRef.current = true;
+    router.replace(`/w/${activeWorkspaceId}`);
+  }, [urlWorkspaceId, activeWorkspaceId, workspacesLoading, router]);
 
+  // Sync URL when active workspace changes (only when already on /w/ route)
+  const prevActiveWorkspaceIdForUrlRef = useRef<string | null>(null);
   useEffect(() => {
-    if (!threadsLoading && !isCreating && threads.length === 0) {
-      void createThread({ id: LEGACY_THREAD_ID, title: "General" });
+    if (!urlWorkspaceId || !activeWorkspaceId) return;
+    if (prevActiveWorkspaceIdForUrlRef.current === null) {
+      prevActiveWorkspaceIdForUrlRef.current = activeWorkspaceId;
+      return;
     }
-  }, [threadsLoading, isCreating, threads.length, createThread]);
+    if (activeWorkspaceId !== prevActiveWorkspaceIdForUrlRef.current) {
+      prevActiveWorkspaceIdForUrlRef.current = activeWorkspaceId;
+      router.replace(`/w/${activeWorkspaceId}`);
+    }
+  }, [urlWorkspaceId, activeWorkspaceId, router]);
+
 
   useEffect(() => {
     return () => {
@@ -502,10 +555,10 @@ export function ChatContainer() {
     };
   }, [normalizedSearchQuery]);
 
-  const prevActiveThreadIdRef = useRef<string | null>(null);
+  const prevActiveWorkspaceIdRef = useRef<string | null>(null);
   useEffect(() => {
-    // Only stop active streams when actually switching threads, not on initial mount.
-    if (prevActiveThreadIdRef.current !== null && prevActiveThreadIdRef.current !== activeThreadId) {
+    // Only stop active streams when actually switching workspaces, not on initial mount.
+    if (prevActiveWorkspaceIdRef.current !== null && prevActiveWorkspaceIdRef.current !== activeWorkspaceId) {
       stop();
       if (pendingOpenThreadIdRef.current) {
         setOpenThreadId(pendingOpenThreadIdRef.current);
@@ -514,11 +567,11 @@ export function ChatContainer() {
         setOpenThreadId(null);
       }
     }
-    prevActiveThreadIdRef.current = activeThreadId;
-    if (!activeThreadId) return;
-    void loadHistory(activeThreadId);
+    prevActiveWorkspaceIdRef.current = activeWorkspaceId;
+    if (!activeWorkspaceId) return;
+    void loadHistory(activeWorkspaceId);
     // Load persisted task drafts
-    fetch(`/api/task-drafts?threadId=${encodeURIComponent(activeThreadId)}`)
+    fetch(`/api/task-drafts?threadId=${encodeURIComponent(activeWorkspaceId)}`)
       .then((r) => r.json())
       .then((data) => {
         if (data.drafts && Object.keys(data.drafts).length > 0) {
@@ -528,33 +581,33 @@ export function ChatContainer() {
         }
       })
       .catch(() => setTaskDraftsRaw({}));
-  }, [activeThreadId, loadHistory, stop]);
+  }, [activeWorkspaceId, loadHistory, stop]);
 
   useEffect(() => {
-    if (!activeThreadId) return;
-    void updateThreadMessages(activeThreadId, messages);
-  }, [activeThreadId, messages, updateThreadMessages]);
+    if (!activeWorkspaceId) return;
+    void updateWorkspaceMessages(activeWorkspaceId, messages);
+  }, [activeWorkspaceId, messages, updateWorkspaceMessages]);
 
   const handleThreadReply = useCallback(
     (rootMessageId: string, content: string, maxRounds: number = 10) => {
-      if (!activeThreadId) return;
+      if (!activeWorkspaceId) return;
       if (activeParticipants.length === 0) return;
       void sendMessage(
         content,
         maxRounds,
-        activeThreadId,
+        activeWorkspaceId,
         rootMessageId,
         undefined,
         undefined,
         activeParticipants.map((participant) => participant.id)
       );
     },
-    [activeThreadId, sendMessage, activeParticipants]
+    [activeWorkspaceId, sendMessage, activeParticipants]
   );
 
 
   const handleSummarize = useCallback(async (rootMessageId: string) => {
-    if (!activeThreadId) return;
+    if (!activeWorkspaceId) return;
     if (activeParticipants.length === 0) {
       window.alert("Enable at least one agent in this workspace.");
       return;
@@ -565,13 +618,13 @@ export function ChatContainer() {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          threadId: activeThreadId,
+          threadId: activeWorkspaceId,
           rootMessageId,
           activeParticipantIds: activeParticipants.map((participant) => participant.id),
         }),
       });
       if (res.ok) {
-        await loadHistory(activeThreadId);
+        await loadHistory(activeWorkspaceId);
       } else {
         console.error("Summarize failed:", await res.text());
       }
@@ -584,10 +637,10 @@ export function ChatContainer() {
         return next;
       });
     }
-  }, [activeThreadId, loadHistory, activeParticipants]);
+  }, [activeWorkspaceId, loadHistory, activeParticipants]);
 
   const handleExtractTasks = useCallback(async (rootMessageId: string) => {
-    if (!activeThreadId) return;
+    if (!activeWorkspaceId) return;
     if (activeParticipants.length === 0) {
       window.alert("Enable at least one agent in this workspace.");
       return;
@@ -598,7 +651,7 @@ export function ChatContainer() {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          threadId: activeThreadId,
+          threadId: activeWorkspaceId,
           rootMessageId,
           activeParticipantIds: activeParticipants.map((participant) => participant.id),
         }),
@@ -624,14 +677,14 @@ export function ChatContainer() {
         return next;
       });
     }
-  }, [activeThreadId, activeParticipants]);
+  }, [activeWorkspaceId, 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;
+    if (!activeWorkspaceId) return;
     setBuildingDrafts((prev) => new Set(prev).add(draft.draftId));
     setTaskDrafts((prev) => ({
       ...prev,
@@ -676,10 +729,10 @@ export function ChatContainer() {
         return next;
       });
     }
-  }, [activeThreadId]);
+  }, [activeWorkspaceId]);
 
   const handleCreateTasksCommand = useCallback(() => {
-    if (!activeThreadId) return;
+    if (!activeWorkspaceId) return;
     const targetRootId = (() => {
       if (openThreadId) return openThreadId;
       const replyRoots = new Set(
@@ -700,15 +753,17 @@ export function ChatContainer() {
       return;
     }
     void handleExtractTasks(targetRootId);
-  }, [activeThreadId, handleExtractTasks, messages, openThreadId]);
+  }, [activeWorkspaceId, handleExtractTasks, messages, openThreadId]);
 
   const handleReplyToMessage = useCallback((messageId: string) => {
     setOpenThreadId(messageId);
   }, []);
 
   const handleOpenThread = useCallback((rootMessageId: string) => {
-    setOpenThreadId(rootMessageId);
-  }, []);
+    if (activeWorkspaceId) {
+      router.push(`/w/${activeWorkspaceId}/${rootMessageId}`);
+    }
+  }, [activeWorkspaceId, router]);
 
   const handleSearchCommand = useCallback((query?: string) => {
     const normalized = query?.trim() ?? "";
@@ -724,7 +779,7 @@ export function ChatContainer() {
   }, []);
 
   const handleSummarizeCommand = useCallback(() => {
-    if (!activeThreadId) return;
+    if (!activeWorkspaceId) return;
 
     const targetRootId = (() => {
       if (openThreadId) return openThreadId;
@@ -747,7 +802,7 @@ export function ChatContainer() {
       return;
     }
     void handleSummarize(targetRootId);
-  }, [activeThreadId, handleSummarize, messages, openThreadId]);
+  }, [activeWorkspaceId, handleSummarize, messages, openThreadId]);
 
   const handleSend = useCallback(
     async (prompt: string, maxRounds: number, attachmentIds?: string[], attachmentMetas?: import("@/lib/types").Attachment[]) => {
@@ -767,10 +822,10 @@ export function ChatContainer() {
         return;
       }
 
-      let threadId = activeThreadId;
-      if (!threadId) {
-        const created = await createThread();
-        threadId = created.id;
+      let workspaceId = activeWorkspaceId;
+      if (!workspaceId) {
+        const created = await createWorkspace();
+        workspaceId = created.id;
       }
 
       const selectedActiveIds = activeParticipants.map((participant) => participant.id);
@@ -783,7 +838,7 @@ export function ChatContainer() {
         await sendMessage(
           prompt,
           maxRounds,
-          threadId,
+          workspaceId,
           openThreadId,
           attachmentIds,
           attachmentMetas,
@@ -797,7 +852,7 @@ export function ChatContainer() {
       await sendMessage(
         prompt,
         maxRounds,
-        threadId,
+        workspaceId,
         null,
         attachmentIds,
         attachmentMetas,
@@ -805,8 +860,8 @@ export function ChatContainer() {
       );
     },
     [
-      activeThreadId,
-      createThread,
+      activeWorkspaceId,
+      createWorkspace,
       handleSearchCommand,
       handleSummarizeCommand,
       openThreadId,
@@ -818,9 +873,9 @@ export function ChatContainer() {
   const handleSelectSearchResult = useCallback(
     (result: MessageSearchResult) => {
       const targetRootId = result.rootMessageId || result.messageId;
-      if (result.threadId !== activeThreadId) {
+      if (result.threadId !== activeWorkspaceId) {
         pendingOpenThreadIdRef.current = targetRootId;
-        selectThread(result.threadId);
+        selectWorkspace(result.threadId);
       } else {
         setOpenThreadId(targetRootId);
       }
@@ -836,20 +891,20 @@ export function ChatContainer() {
       });
       clearSearch();
     },
-    [activeThreadId, clearSearch, selectThread]
+    [activeWorkspaceId, clearSearch, selectWorkspace]
   );
 
-  const handleDeleteThread = useCallback(
-    async (threadId: string) => {
+  const handleDeleteWorkspace = useCallback(
+    async (workspaceId: string) => {
       stop();
-      await deleteThread(threadId);
+      await deleteWorkspace(workspaceId);
     },
-    [deleteThread, stop]
+    [deleteWorkspace, stop]
   );
 
-  const handleDeleteThreadRoot = useCallback(
+  const handleDeleteWorkspaceRoot = useCallback(
     async (rootMessageId: string) => {
-      if (!activeThreadId || !rootMessageId) return;
+      if (!activeWorkspaceId || !rootMessageId) return;
       const confirmed = window.confirm("Delete this thread and all of its replies?");
       if (!confirmed) return;
 
@@ -858,7 +913,7 @@ export function ChatContainer() {
 
       try {
         const params = new URLSearchParams({
-          threadId: activeThreadId,
+          threadId: activeWorkspaceId,
           rootMessageId,
         });
         const response = await fetch(`/api/history?${params.toString()}`, { method: "DELETE" });
@@ -873,15 +928,15 @@ export function ChatContainer() {
         const nextMessages = messages.filter(
           (message) => message.id !== rootMessageId && message.rootMessageId !== rootMessageId
         );
-        void updateThreadMessages(activeThreadId, nextMessages);
-        await loadHistory(activeThreadId);
+        void updateWorkspaceMessages(activeWorkspaceId, nextMessages);
+        await loadHistory(activeWorkspaceId);
       } catch (error) {
         console.error("Failed to delete message thread", error);
       } finally {
         setDeletingThreadRootId((current) => (current === rootMessageId ? null : current));
       }
     },
-    [activeThreadId, loadHistory, messages, stopThread, updateThreadMessages]
+    [activeWorkspaceId, loadHistory, messages, stopThread, updateWorkspaceMessages]
   );
 
   const slashCommands: SlashCommand[] = useMemo(
@@ -923,8 +978,8 @@ export function ChatContainer() {
     [handleThreadReply, stopThread, streaming, activeParticipants, slashCommands, messages]
   );
 
-  const toggleThreadSidebar = useCallback(() => {
-    setThreadSidebarVisible((prev) => {
+  const toggleWorkspaceSidebar = useCallback(() => {
+    setWorkspaceSidebarVisible((prev) => {
       const next = !prev;
       persistSidebarPreference(next);
       return next;
@@ -961,10 +1016,10 @@ export function ChatContainer() {
     });
     if (res.ok) {
       setParticipants((prev) => prev.filter((p) => p.id !== id));
-      if (activeThreadId) {
+      if (activeWorkspaceId) {
         setActiveParticipantIds((prev) => {
           const next = prev.filter((participantId) => participantId !== id);
-          persistStoredActiveParticipantIds(activeThreadId, next);
+          persistStoredActiveParticipantIds(activeWorkspaceId, next);
           return next;
         });
       }
@@ -1003,14 +1058,14 @@ export function ChatContainer() {
           .map((participant) => participant.id)
           .filter((id) => nextSet.has(id));
 
-        if (activeThreadId) {
-          persistStoredActiveParticipantIds(activeThreadId, next);
+        if (activeWorkspaceId) {
+          persistStoredActiveParticipantIds(activeWorkspaceId, next);
         }
 
         return next;
       });
     },
-    [activeThreadId, participants]
+    [activeWorkspaceId, participants]
   );
 
   const searchInputBar = (
@@ -1053,27 +1108,31 @@ export function ChatContainer() {
 
   return (
     <div className="flex h-screen bg-white text-zinc-900">
-      <ThreadSidebar
-        threads={threads}
+      <WorkspaceSidebar
+        workspaces={workspaces}
         participants={participants}
-        activeThreadId={activeThreadId}
-        isLoading={threadsLoading}
-        isRestoringActiveThread={isRestoringActiveThread}
+        activeWorkspaceId={activeWorkspaceId}
+        isLoading={workspacesLoading}
+        isRestoringActiveWorkspace={isRestoringActiveWorkspace}
         isCreating={isCreating}
-        deletingThreadId={deletingThreadId}
-        renamingThreadId={renamingThreadId}
-        onSelectThread={selectThread}
-        onCreateThread={createThread}
-        onRenameThread={renameThread}
-        onDeleteThread={handleDeleteThread}
+        deletingWorkspaceId={deletingWorkspaceId}
+        renamingWorkspaceId={renamingWorkspaceId}
+        onSelectWorkspace={(workspaceId: string) => {
+          setOpenThreadId(null);
+          selectWorkspace(workspaceId);
+          router.push(`/w/${workspaceId}`);
+        }}
+        onCreateWorkspace={createWorkspace}
+        onRenameWorkspace={renameWorkspace}
+        onDeleteWorkspace={handleDeleteWorkspace}
         onAddParticipant={handleAdd}
         onUpdateParticipant={handleUpdate}
         onRemoveParticipant={handleRemove}
         activeParticipantIds={activeParticipantIds}
         onToggleParticipantActive={handleToggleParticipantActive}
         onReorderParticipants={handleReorderParticipants}
-        visible={threadSidebarVisible}
-        onToggle={toggleThreadSidebar}
+        visible={workspaceSidebarVisible}
+        onToggle={toggleWorkspaceSidebar}
 
       />
       <div className="flex flex-col flex-1 min-w-0 relative">
@@ -1105,7 +1164,7 @@ export function ChatContainer() {
           <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)}
+                onClick={() => router.push(activeWorkspaceId ? `/w/${activeWorkspaceId}` : "/")}
                 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"
               >
@@ -1138,7 +1197,7 @@ export function ChatContainer() {
           </header>
         )}
         {
-          isRestoringActiveThread ? (
+          isRestoringActiveWorkspace ? (
             <div className="flex-1 flex items-center justify-center px-4 text-sm text-zinc-500">
               Loading your last workspace…
             </div>
@@ -1153,7 +1212,7 @@ export function ChatContainer() {
                     results={searchResults}
                     total={searchTotal}
                     participants={participants}
-                    threadTitleById={threadTitleById}
+                    threadTitleById={workspaceTitleById}
                     isLoading={searchLoading}
                     error={searchError}
                     onSelectResult={handleSelectSearchResult}
@@ -1164,10 +1223,10 @@ export function ChatContainer() {
                     streaming={streaming}
                     participants={participants}
                     rootMessageId={openThreadId}
-                    onClose={() => setOpenThreadId(null)}
+                    onClose={() => router.push(activeWorkspaceId ? `/w/${activeWorkspaceId}` : "/")}
                     onCopyThread={handleCopyThread}
                     onAddToChat={handleAddToChat}
-                    onDeleteThreadRoot={handleDeleteThreadRoot}
+                    onDeleteThreadRoot={handleDeleteWorkspaceRoot}
                     highlightedMessageId={highlightedMessageId || undefined}
                     renderReplyComposer={renderReplyComposer}
                   />
@@ -1179,7 +1238,7 @@ export function ChatContainer() {
                     onOpenThread={handleOpenThread}
                     onCopyThread={handleCopyThread}
                     onAddToChat={handleAddToChat}
-                    onDeleteThreadRoot={handleDeleteThreadRoot}
+                    onDeleteThreadRoot={handleDeleteWorkspaceRoot}
                     onSummarize={handleSummarize}
                     onCreateTasks={handleExtractTasks}
                     onUpdateTaskDraft={handleUpdateTaskDraft}
@@ -1209,7 +1268,7 @@ export function ChatContainer() {
           )
         }
       </div >
-      <LogPanel logs={logs} participants={participants} onClear={() => void clearLogs(activeThreadId)} open={logsOpen} onToggle={() => setLogsOpen(false)} />
+      <LogPanel logs={logs} participants={participants} onClear={() => void clearLogs(activeWorkspaceId)} open={logsOpen} onToggle={() => setLogsOpen(false)} />
     </div >
   );
 }