From 45db1bcf541a63acd702e619932fad90611faa6d Mon Sep 17 00:00:00 2001
From: Mark <markrachapoom@gmail.com>
Date: Thu, 12 Mar 2026 12:03:29 -0700
Subject: [PATCH] feat: merge file tree and chat history into single left
 sidebar with tabs

Made-with: Cursor
---
 .../workspace/chat-sessions-sidebar.tsx       |  47 +++---
 .../workspace/workspace-sidebar.tsx           | 138 +++++++++++++---
 apps/web/app/workspace/workspace-content.tsx  | 152 +++++-------------
 3 files changed, 182 insertions(+), 155 deletions(-)

diff --git a/apps/web/app/components/workspace/chat-sessions-sidebar.tsx b/apps/web/app/components/workspace/chat-sessions-sidebar.tsx
index b3e9e5b7bf4..1edb752928e 100644
--- a/apps/web/app/components/workspace/chat-sessions-sidebar.tsx
+++ b/apps/web/app/components/workspace/chat-sessions-sidebar.tsx
@@ -9,7 +9,7 @@ import {
 	DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 
-type WebSession = {
+export type WebSession = {
 	id: string;
 	title: string;
 	createdAt: number;
@@ -55,6 +55,8 @@ type ChatSessionsSidebarProps = {
 	onCollapse?: () => void;
 	/** When true, show a loader instead of empty state (e.g. initial sessions fetch). */
 	loading?: boolean;
+	/** When true, renders just the content without the aside wrapper (for embedding in another sidebar). */
+	embedded?: boolean;
 };
 
 /** Format a timestamp into a human-readable relative time string. */
@@ -164,6 +166,7 @@ export function ChatSessionsSidebar({
 	onClose,
 	width: widthProp,
 	loading = false,
+	embedded = false,
 }: ChatSessionsSidebarProps) {
 	const [hoveredId, setHoveredId] = useState<string | null>(null);
 	const [renamingId, setRenamingId] = useState<string | null>(null);
@@ -229,24 +232,13 @@ export function ChatSessionsSidebar({
 	const grouped = groupSessions(filteredSessions);
 
 	const width = mobile ? "280px" : (widthProp ?? 260);
-	const headerHeight = 40; // px — match padding so list content clears the overlay
-	const sidebar = (
-		<aside
-			className={`flex flex-col h-full shrink-0 ${mobile ? "drawer-right" : "border-l"}`}
-			style={{
-				width: typeof width === "number" ? `${width}px` : width,
-				minWidth: typeof width === "number" ? `${width}px` : width,
-				borderColor: "var(--color-border)",
-				background: "var(--color-sidebar-bg)",
-			}}
-		>
-			{/* Scrollable list fills the sidebar; header overlays the top with blur */}
-			<div className="flex-1 min-h-0 relative">
-				{/* Session list — scrolls under the header */}
-				<div
-					className="absolute inset-0 overflow-y-auto"
-					style={{ paddingTop: headerHeight }}
-				>
+	const headerHeight = 40;
+	const content = (
+		<div className="flex-1 min-h-0 relative">
+			<div
+				className="absolute inset-0 overflow-y-auto"
+				style={{ paddingTop: headerHeight }}
+			>
 				{loading && sessions.length === 0 ? (
 					<div className="px-4 py-8 flex flex-col items-center justify-center min-h-[120px]">
 						<UnicodeSpinner
@@ -504,6 +496,23 @@ export function ChatSessionsSidebar({
 				</button>
 			</div>
 		</div>
+	);
+
+	if (embedded) {
+		return content;
+	}
+
+	const sidebar = (
+		<aside
+			className={`flex flex-col h-full shrink-0 ${mobile ? "drawer-right" : "border-l"}`}
+			style={{
+				width: typeof width === "number" ? `${width}px` : width,
+				minWidth: typeof width === "number" ? `${width}px` : width,
+				borderColor: "var(--color-border)",
+				background: "var(--color-sidebar-bg)",
+			}}
+		>
+			{content}
 		</aside>
 	);
 
diff --git a/apps/web/app/components/workspace/workspace-sidebar.tsx b/apps/web/app/components/workspace/workspace-sidebar.tsx
index 078c442a852..56eb99744c1 100644
--- a/apps/web/app/components/workspace/workspace-sidebar.tsx
+++ b/apps/web/app/components/workspace/workspace-sidebar.tsx
@@ -5,6 +5,7 @@ import { FileManagerTree, type TreeNode } from "./file-manager-tree";
 import { ProfileSwitcher } from "./profile-switcher";
 import { CreateWorkspaceDialog } from "./create-workspace-dialog";
 import { UnicodeSpinner } from "../unicode-spinner";
+import { ChatSessionsSidebar, type WebSession, type SidebarSubagentInfo } from "./chat-sessions-sidebar";
 
 /** Shape returned by /api/workspace/suggest-files */
 type SuggestItem = {
@@ -52,6 +53,22 @@ type WorkspaceSidebarProps = {
   activeWorkspace?: string | null;
   /** Called after workspace switches or workspace creation so parent can refresh state. */
   onWorkspaceChanged?: () => void;
+  /** Chat sessions for the Chats tab. */
+  chatSessions?: WebSession[];
+  activeChatSessionId?: string | null;
+  activeChatSessionTitle?: string;
+  chatStreamingSessionIds?: Set<string>;
+  chatSubagents?: SidebarSubagentInfo[];
+  chatActiveSubagentKey?: string | null;
+  chatSessionsLoading?: boolean;
+  onSelectChatSession?: (sessionId: string) => void;
+  onNewChatSession?: () => void;
+  onSelectChatSubagent?: (sessionKey: string) => void;
+  onDeleteChatSession?: (sessionId: string) => void;
+  onRenameChatSession?: (sessionId: string, newTitle: string) => void;
+  /** Which tab is active. Controlled from parent if provided. */
+  activeTab?: "files" | "chats";
+  onTabChange?: (tab: "files" | "chats") => void;
 };
 
 function HomeIcon() {
@@ -412,10 +429,31 @@ export function WorkspaceSidebar({
 	onCollapse,
   activeWorkspace,
   onWorkspaceChanged,
+  chatSessions,
+  activeChatSessionId,
+  activeChatSessionTitle,
+  chatStreamingSessionIds,
+  chatSubagents,
+  chatActiveSubagentKey,
+  chatSessionsLoading,
+  onSelectChatSession,
+  onNewChatSession,
+  onSelectChatSubagent,
+  onDeleteChatSession,
+  onRenameChatSession,
+  activeTab: activeTabProp,
+  onTabChange,
 }: WorkspaceSidebarProps) {
 	const isBrowsing = browseDir != null;
 	const width = mobile ? "280px" : (widthProp ?? 260);
 	const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
+	const hasChatProps = chatSessions !== undefined;
+	const [internalTab, setInternalTab] = useState<"files" | "chats">(activeTabProp ?? "files");
+	const currentTab = activeTabProp ?? internalTab;
+	const setTab = useCallback((tab: "files" | "chats") => {
+		setInternalTab(tab);
+		onTabChange?.(tab);
+	}, [onTabChange]);
 
 	const sidebar = (
 		<aside
@@ -555,35 +593,83 @@ export function WorkspaceSidebar({
 				)}
 			</div>
 
-			{/* File search */}
-			{onFileSearchSelect && (
-				<FileSearch onSelect={onFileSearchSelect} />
+			{/* Tab switcher */}
+			{hasChatProps && !isBrowsing && (
+				<div
+					className="flex px-3 pt-2 pb-1 gap-1"
+				>
+					<button
+						type="button"
+						onClick={() => setTab("files")}
+						className="flex-1 text-[11px] font-medium py-1.5 rounded-md transition-colors"
+						style={{
+							color: currentTab === "files" ? "var(--color-text)" : "var(--color-text-muted)",
+							background: currentTab === "files" ? "var(--color-surface-hover)" : "transparent",
+						}}
+					>
+						Files
+					</button>
+					<button
+						type="button"
+						onClick={() => setTab("chats")}
+						className="flex-1 text-[11px] font-medium py-1.5 rounded-md transition-colors"
+						style={{
+							color: currentTab === "chats" ? "var(--color-text)" : "var(--color-text-muted)",
+							background: currentTab === "chats" ? "var(--color-surface-hover)" : "transparent",
+						}}
+					>
+						Chats
+					</button>
+				</div>
 			)}
 
-			{/* Tree */}
-			<div className="flex-1 overflow-y-auto px-1">
-				{loading ? (
-					<div className="flex items-center justify-center py-12">
-						<UnicodeSpinner
-							name="braille"
-							className="text-2xl"
-							style={{ color: "var(--color-text-muted)" }}
-						/>
+			{/* Tab content */}
+			{currentTab === "files" || !hasChatProps ? (
+				<>
+					{onFileSearchSelect && (
+						<FileSearch onSelect={onFileSearchSelect} />
+					)}
+					<div className="flex-1 overflow-y-auto px-1">
+						{loading ? (
+							<div className="flex items-center justify-center py-12">
+								<UnicodeSpinner
+									name="braille"
+									className="text-2xl"
+									style={{ color: "var(--color-text-muted)" }}
+								/>
+							</div>
+						) : (
+							<FileManagerTree
+								tree={tree}
+								activePath={activePath}
+								onSelect={onSelect}
+								onRefresh={onRefresh}
+								parentDir={parentDir}
+								onNavigateUp={onNavigateUp}
+								browseDir={browseDir}
+								workspaceRoot={workspaceRoot}
+								onExternalDrop={onExternalDrop}
+							/>
+						)}
 					</div>
-				) : (
-			<FileManagerTree
-				tree={tree}
-				activePath={activePath}
-				onSelect={onSelect}
-				onRefresh={onRefresh}
-				parentDir={parentDir}
-				onNavigateUp={onNavigateUp}
-				browseDir={browseDir}
-				workspaceRoot={workspaceRoot}
-				onExternalDrop={onExternalDrop}
-			/>
-				)}
-			</div>
+				</>
+			) : (
+				<ChatSessionsSidebar
+					sessions={chatSessions ?? []}
+					activeSessionId={activeChatSessionId ?? null}
+					activeSessionTitle={activeChatSessionTitle}
+					streamingSessionIds={chatStreamingSessionIds}
+					subagents={chatSubagents}
+					activeSubagentKey={chatActiveSubagentKey}
+					loading={chatSessionsLoading}
+					onSelectSession={onSelectChatSession ?? (() => {})}
+					onNewSession={onNewChatSession ?? (() => {})}
+					onSelectSubagent={onSelectChatSubagent}
+					onDeleteSession={onDeleteChatSession}
+					onRenameSession={onRenameChatSession}
+					embedded
+				/>
+			)}
 
 			{/* Footer */}
 			<div
diff --git a/apps/web/app/workspace/workspace-content.tsx b/apps/web/app/workspace/workspace-content.tsx
index 31802dd95c1..9843c82c174 100644
--- a/apps/web/app/workspace/workspace-content.tsx
+++ b/apps/web/app/workspace/workspace-content.tsx
@@ -23,7 +23,6 @@ import { MediaViewer, detectMediaType, type MediaType } from "../components/work
 import { DatabaseViewer, DuckDBMissing } from "../components/workspace/database-viewer";
 import { RichDocumentEditor, isDocxFile, isTxtFile, textToHtml } from "../components/workspace/rich-document-editor";
 import { Breadcrumbs } from "../components/workspace/breadcrumbs";
-import { ChatSessionsSidebar } from "../components/workspace/chat-sessions-sidebar";
 import { EmptyState } from "../components/workspace/empty-state";
 import { ReportViewer } from "../components/charts/report-viewer";
 import { ChatPanel, type ChatPanelHandle, type SubagentSpawnInfo } from "../components/chat-panel";
@@ -499,8 +498,6 @@ function WorkspacePageInner() {
   // Mobile responsive state
   const isMobile = useIsMobile();
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [chatSessionsOpen, setChatSessionsOpen] = useState(false);
-
   // Sidebar collapse state (desktop only).
   const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(false);
   const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState(false);
@@ -1810,6 +1807,28 @@ function WorkspacePageInner() {
             onToggleHidden={() => setShowHidden((v) => !v)}
             activeWorkspace={workspaceName}
             onWorkspaceChanged={handleWorkspaceChanged}
+            chatSessions={sessions}
+            activeChatSessionId={activeSessionId}
+            activeChatSessionTitle={activeSessionTitle}
+            chatStreamingSessionIds={streamingSessionIds}
+            chatSubagents={subagents}
+            chatActiveSubagentKey={activeSubagentKey}
+            chatSessionsLoading={sessionsLoading}
+            onSelectChatSession={(sessionId) => {
+              setActiveSessionId(sessionId);
+              setActiveSubagentKey(null);
+              void chatRef.current?.loadSession(sessionId);
+              setSidebarOpen(false);
+            }}
+            onNewChatSession={() => {
+              setActiveSessionId(null);
+              setActiveSubagentKey(null);
+              void chatRef.current?.newSession();
+              setSidebarOpen(false);
+            }}
+            onSelectChatSubagent={handleSelectSubagent}
+            onDeleteChatSession={handleDeleteSession}
+            onRenameChatSession={handleRenameSession}
             mobile
             onClose={() => setSidebarOpen(false)}
           />
@@ -1849,6 +1868,26 @@ function WorkspacePageInner() {
               onCollapse={() => setLeftSidebarCollapsed(true)}
               activeWorkspace={workspaceName}
               onWorkspaceChanged={handleWorkspaceChanged}
+              chatSessions={sessions}
+              activeChatSessionId={activeSessionId}
+              activeChatSessionTitle={activeSessionTitle}
+              chatStreamingSessionIds={streamingSessionIds}
+              chatSubagents={subagents}
+              chatActiveSubagentKey={activeSubagentKey}
+              chatSessionsLoading={sessionsLoading}
+              onSelectChatSession={(sessionId) => {
+                setActiveSessionId(sessionId);
+                setActiveSubagentKey(null);
+                void chatRef.current?.loadSession(sessionId);
+              }}
+              onNewChatSession={() => {
+                setActiveSessionId(null);
+                setActiveSubagentKey(null);
+                void chatRef.current?.newSession();
+              }}
+              onSelectChatSubagent={handleSelectSubagent}
+              onDeleteChatSession={handleDeleteSession}
+              onRenameChatSession={handleRenameSession}
             />
           </div>
           )}
@@ -1912,19 +1951,6 @@ function WorkspacePageInner() {
                   </svg>
                 </button>
               )}
-              {showMainChat && (
-                <button
-                  type="button"
-                  onClick={() => setChatSessionsOpen(true)}
-                  className="p-2 rounded-lg flex-shrink-0"
-                  style={{ color: "var(--color-text-muted)" }}
-                  title="Chat sessions"
-                >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                  </svg>
-                </button>
-              )}
             </div>
           </div>
         )}
@@ -2019,100 +2045,6 @@ function WorkspacePageInner() {
                   onBack={activeSubagent ? handleBackFromSubagent : undefined}
                 />
               </div>
-              {/* Chat sessions sidebar — static on desktop, drawer overlay on mobile */}
-              {isMobile ? (
-                chatSessionsOpen && (
-                  <ChatSessionsSidebar
-                    sessions={sessions}
-                    activeSessionId={activeSessionId}
-                    activeSessionTitle={activeSessionTitle}
-                    streamingSessionIds={streamingSessionIds}
-                    subagents={subagents}
-                    activeSubagentKey={activeSubagentKey}
-                    loading={sessionsLoading}
-                    onSelectSession={(sessionId) => {
-                      setActiveSessionId(sessionId);
-                      setActiveSubagentKey(null);
-                      void chatRef.current?.loadSession(sessionId);
-                    }}
-                    onNewSession={() => {
-                      setActiveSessionId(null);
-                      setActiveSubagentKey(null);
-                      void chatRef.current?.newSession();
-                      setChatSessionsOpen(false);
-                    }}
-                    onSelectSubagent={handleSelectSubagent}
-                    onDeleteSession={handleDeleteSession}
-                    onRenameSession={handleRenameSession}
-                    mobile
-                    onClose={() => setChatSessionsOpen(false)}
-                  />
-                )
-              ) : (
-                <>
-                  {!rightSidebarCollapsed && (
-                  <div
-                    className="flex shrink-0 flex-col relative"
-                    style={{ width: rightSidebarWidth, minWidth: rightSidebarWidth, background: "var(--color-sidebar-bg)" }}
-                  >
-                    <ResizeHandle
-                      mode="right"
-                      containerRef={layoutRef}
-                      min={RIGHT_SIDEBAR_MIN}
-                      max={RIGHT_SIDEBAR_MAX}
-                      onResize={setRightSidebarWidth}
-                    />
-                    {chatSidebarPreview ? (
-                      <ChatSidebarPreview
-                        preview={chatSidebarPreview}
-                        onClose={() => setChatSidebarPreview(null)}
-                      />
-                    ) : (
-                      <ChatSessionsSidebar
-                        sessions={sessions}
-                        activeSessionId={activeSessionId}
-                        activeSessionTitle={activeSessionTitle}
-                        streamingSessionIds={streamingSessionIds}
-                        subagents={subagents}
-                        activeSubagentKey={activeSubagentKey}
-                        loading={sessionsLoading}
-                        onSelectSession={(sessionId) => {
-                          setActiveSessionId(sessionId);
-                          setActiveSubagentKey(null);
-                          void chatRef.current?.loadSession(sessionId);
-                        }}
-                        onNewSession={() => {
-                          setActiveSessionId(null);
-                          setActiveSubagentKey(null);
-                          void chatRef.current?.newSession();
-                        }}
-                        onSelectSubagent={handleSelectSubagent}
-                        onDeleteSession={handleDeleteSession}
-                        onRenameSession={handleRenameSession}
-                        onCollapse={() => setRightSidebarCollapsed(true)}
-                        width={rightSidebarWidth}
-                      />
-                    )}
-                  </div>
-                  )}
-                  {rightSidebarCollapsed && (
-                    <div className="shrink-0 flex flex-col items-center pt-2.5 px-1.5">
-                      <button
-                        type="button"
-                        onClick={() => setRightSidebarCollapsed(false)}
-                        className="p-1.5 rounded-md transition-colors hover:bg-black/5"
-                        style={{ color: "var(--color-text-muted)" }}
-                        title="Show chat sidebar (⌘⇧B)"
-                      >
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                          <rect width="18" height="18" x="3" y="3" rx="2" />
-                          <path d="M15 3v18" />
-                        </svg>
-                      </button>
-                    </div>
-                  )}
-                </>
-              )}
             </>
           ) : (
             <>