Add unified workspace panel to right sidebar (#343)

- Replace legacy files/editor tabs with a single workspace view
- Add responsive stacked/split workspace layout for tree and editor
- Normalize persisted right-panel tabs and update related labels

Author: BunsDev

apps/web/src/components/CodeViewerPanel.tsx

@@ -712,7 +712,7 @@ export default function CodeViewerPanel() {
           {!activeTab ? (
             <div className="flex h-full flex-col items-center justify-center gap-2 px-5 text-center text-muted-foreground/60">
               <FileCodeIcon className="size-8 opacity-40" />
-              <p className="text-xs">Click a file in the sidebar to view it here.</p>
+              <p className="text-xs">Click a file to view it here.</p>
             </div>
           ) : (
             <CodeViewerFileContent

apps/web/src/components/RightPanelHeader.tsx

@@ -1,4 +1,4 @@
-import { CodeIcon, FolderIcon, GitCompareIcon, PanelRightCloseIcon } from "lucide-react";
+import { FolderIcon, GitCompareIcon, PanelRightCloseIcon } from "lucide-react";
 import { memo } from "react";
 import { isElectron } from "~/env";
 import { cn } from "~/lib/utils";
@@ -10,8 +10,7 @@ const TABS: readonly {
   label: string;
   icon: typeof FolderIcon;
 }[] = [
-  { id: "files", label: "Files", icon: FolderIcon },
-  { id: "editor", label: "Editor", icon: CodeIcon },
+  { id: "workspace", label: "Workspace", icon: FolderIcon },
   { id: "diffs", label: "Diffs", icon: GitCompareIcon },
 ];
 

apps/web/src/components/Sidebar.test.ts

@@ -3,11 +3,11 @@ import { resolve } from "node:path";
 import { describe, expect, it } from "vitest";
 
 describe("Sidebar file tree shortcut", () => {
-  it("opens the right-panel file tree instead of mounting the tree inline", () => {
+  it("opens the right-panel workspace instead of mounting the tree inline", () => {
     const src = readFileSync(resolve(import.meta.dirname, "./Sidebar.tsx"), "utf8");
 
-    expect(src).toContain('aria-label="Open file tree"');
-    expect(src).toContain('useRightPanelStore.getState().open("files")');
+    expect(src).toContain('aria-label="Open workspace"');
+    expect(src).toContain('useRightPanelStore.getState().open("workspace")');
     expect(src).not.toContain("<WorkspaceFileTree");
   });
 });

apps/web/src/components/Sidebar.tsx

@@ -1852,17 +1852,17 @@ export default function Sidebar() {
                   render={
                     <button
                       type="button"
-                      aria-label="Open file tree"
+                      aria-label="Open workspace"
                       className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
                       onClick={() => {
-                        useRightPanelStore.getState().open("files");
+                        useRightPanelStore.getState().open("workspace");
                       }}
                     />
                   }
                 >
                   <FolderIcon className="size-3.5" />
                 </TooltipTrigger>
-                <TooltipPopup side="top">Open file tree</TooltipPopup>
+                <TooltipPopup side="top">Open workspace</TooltipPopup>
               </Tooltip>
               <ProjectSortMenu
                 projectSortOrder={appSettings.sidebarProjectSortOrder}

apps/web/src/components/WorkspacePanel.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { resolveWorkspaceLayoutMode } from "./WorkspacePanel";
+
+describe("resolveWorkspaceLayoutMode", () => {
+  it("stacks the tree above the editor in narrower panels", () => {
+    expect(resolveWorkspaceLayoutMode(320)).toBe("stacked");
+    expect(resolveWorkspaceLayoutMode(599)).toBe("stacked");
+  });
+
+  it("splits the tree and editor side by side once enough width is available", () => {
+    expect(resolveWorkspaceLayoutMode(600)).toBe("split");
+    expect(resolveWorkspaceLayoutMode(960)).toBe("split");
+  });
+});

apps/web/src/components/WorkspacePanel.tsx

@@ -0,0 +1,89 @@
+import { FolderIcon } from "lucide-react";
+import { memo, type ReactNode, useEffect, useRef, useState } from "react";
+import { cn } from "~/lib/utils";
+
+export type WorkspaceLayoutMode = "stacked" | "split";
+
+const WORKSPACE_SPLIT_MIN_WIDTH_PX = 600;
+
+export function resolveWorkspaceLayoutMode(width: number): WorkspaceLayoutMode {
+  return width >= WORKSPACE_SPLIT_MIN_WIDTH_PX ? "split" : "stacked";
+}
+
+function basenameOfPath(pathValue: string): string {
+  const normalizedPath = pathValue.replace(/\/+$/, "");
+  const segments = normalizedPath.split("/");
+  return segments[segments.length - 1] || pathValue;
+}
+
+export const WorkspacePanel = memo(function WorkspacePanel(props: {
+  cwd: string | null;
+  tree: ReactNode;
+  editor: ReactNode;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [layoutMode, setLayoutMode] = useState<WorkspaceLayoutMode>("stacked");
+  const workspaceLabel = props.cwd ? basenameOfPath(props.cwd) : "Workspace";
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+
+    const syncLayoutMode = () => {
+      const nextMode = resolveWorkspaceLayoutMode(element.getBoundingClientRect().width);
+      setLayoutMode((currentMode) => (currentMode === nextMode ? currentMode : nextMode));
+    };
+
+    syncLayoutMode();
+
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      syncLayoutMode();
+    });
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="flex h-full min-h-0 flex-col bg-background">
+      <div className={cn("flex min-h-0 flex-1", layoutMode === "split" ? "flex-row" : "flex-col")}>
+        {props.cwd ? (
+          <section
+            className={cn(
+              "flex min-h-0 shrink-0 overflow-hidden bg-card/35",
+              layoutMode === "split"
+                ? "w-[clamp(15rem,32%,19rem)] border-r border-border/60"
+                : "h-[clamp(14rem,34vh,20rem)] border-b border-border/60",
+            )}
+          >
+            <div className="flex min-h-0 flex-1 flex-col">
+              <div className="border-b border-border/60 px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/70" />
+                  <div className="min-w-0">
+                    <p className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground/55">
+                      Workspace
+                    </p>
+                    <p className="truncate font-mono text-[11px] text-foreground/85">
+                      {workspaceLabel}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="min-h-0 flex-1 overflow-y-auto py-2">{props.tree}</div>
+            </div>
+          </section>
+        ) : null}
+        <section className="min-h-0 min-w-0 flex-1 bg-background">{props.editor}</section>
+      </div>
+    </div>
+  );
+});

apps/web/src/components/file-view/FileViewShell.tsx

@@ -114,7 +114,7 @@ export function FileViewShell(props: { initialCwd: string; initialPath: string |
           {!activeTab ? (
             <div className="flex h-full flex-col items-center justify-center gap-2 px-5 text-center text-muted-foreground/60">
               <FileCodeIcon className="size-8 opacity-40" />
-              <p className="text-xs">Click a file in the sidebar to view it here.</p>
+              <p className="text-xs">Click a file to view it here.</p>
             </div>
           ) : (
             <CodeViewerFileContent

apps/web/src/hooks/useFileViewNavigation.ts

@@ -4,7 +4,7 @@ import { useCodeViewerStore } from "~/codeViewerStore";
 import { useStore } from "~/store";
 
 /**
- * Opens a file in the code-viewer side panel of the active thread.
+ * Opens a file in the workspace side panel of the active thread.
  * If the caller is not on a thread page, navigates to the most recent thread first.
  */
 export function useFileViewNavigation() {
@@ -20,7 +20,7 @@ export function useFileViewNavigation() {
     (cwd: string, relativePath: string) => {
       openFile(cwd, relativePath);
       // If not already on a thread page, navigate to the most recent thread
-      // so the code-viewer inline sidebar is visible.
+      // so the workspace inline sidebar is visible.
       if (!threadId) {
         const sorted = threads.toSorted((a, b) =>
           (b.updatedAt ?? b.createdAt).localeCompare(a.updatedAt ?? a.createdAt),

apps/web/src/rightPanelStore.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { normalizeRightPanelTab } from "./rightPanelStore";
+
+describe("normalizeRightPanelTab", () => {
+  it("maps legacy files and editor tabs into the workspace tab", () => {
+    expect(normalizeRightPanelTab("files")).toBe("workspace");
+    expect(normalizeRightPanelTab("editor")).toBe("workspace");
+  });
+
+  it("preserves supported tabs and rejects invalid values", () => {
+    expect(normalizeRightPanelTab("workspace")).toBe("workspace");
+    expect(normalizeRightPanelTab("diffs")).toBe("diffs");
+    expect(normalizeRightPanelTab("unknown")).toBeNull();
+    expect(normalizeRightPanelTab(null)).toBeNull();
+  });
+});

apps/web/src/rightPanelStore.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-export type RightPanelTab = "files" | "editor" | "diffs";
+export type RightPanelTab = "workspace" | "diffs";
 
 interface RightPanelState {
   isOpen: boolean;
@@ -12,19 +12,30 @@ interface RightPanelState {
 
 const STORAGE_KEY = "okcode:right-panel-tab:v1";
 
-const VALID_TABS: readonly RightPanelTab[] = ["files", "editor", "diffs"];
+const VALID_TABS: readonly RightPanelTab[] = ["workspace", "diffs"];
+
+export function normalizeRightPanelTab(value: string | null | undefined): RightPanelTab | null {
+  if (value === "files" || value === "editor") {
+    return "workspace";
+  }
+  if ((VALID_TABS as readonly string[]).includes(value ?? "")) {
+    return value as RightPanelTab;
+  }
+  return null;
+}
 
 function readPersistedTab(): RightPanelTab {
-  if (typeof window === "undefined") return "files";
+  if (typeof window === "undefined") return "workspace";
   try {
     const raw = window.localStorage.getItem(STORAGE_KEY);
-    if (raw && (VALID_TABS as readonly string[]).includes(raw)) {
-      return raw as RightPanelTab;
+    const normalized = normalizeRightPanelTab(raw);
+    if (normalized) {
+      return normalized;
     }
   } catch {
     // ignore storage errors
   }
-  return "files";
+  return "workspace";
 }
 
 function persistTab(tab: RightPanelTab): void {