feat(web): refactor HomePage to manage project and workspace views, update ProjectSwitcher to support navigation

Author: TKassis

web/src/app/page.tsx

@@ -8,6 +8,7 @@ import { ChatTabsBar, type ChatTabDescriptor } from "@/components/chat-tabs-bar"
 import { SettingsDialog } from "@/components/settings-dialog";
 import { WorkflowsPanel } from "@/components/workflows-panel";
 import { ProjectSwitcher } from "@/components/project-switcher";
+import { ProjectView } from "@/components/project-view";
 import { SessionCostPill } from "@/components/session-cost-pill";
 import { ResourceMonitor } from "@/components/resource-monitor";
 import { useSessionCost } from "@/lib/use-session-cost";
@@ -72,7 +73,21 @@ function ResizeHandle({ onMouseDown }: { onMouseDown: (e: React.MouseEvent) => v
   );
 }
 
-export default function ChatPage() {
+export default function HomePage() {
+  const [screen, setScreen] = useState<"projects" | "workspace">("projects");
+
+  if (screen === "projects") {
+    return <ProjectView onOpenProject={() => setScreen("workspace")} />;
+  }
+
+  return <WorkspacePage onOpenProjectView={() => setScreen("projects")} />;
+}
+
+function WorkspacePage({
+  onOpenProjectView,
+}: {
+  onOpenProjectView: () => void;
+}) {
   const sandbox = useSandbox(false);
   const { updateAvailable } = useUpdateCheck();
   const { skills: allSkills } = useSkills();
@@ -483,7 +498,7 @@ export default function ChatPage() {
             </InfoTooltip>
           )}
           <span className="mx-1 h-4 w-px bg-border/60" aria-hidden />
-          <ProjectSwitcher />
+          <ProjectSwitcher onOpenProjectView={onOpenProjectView} />
         </div>
         <p className="absolute left-1/2 -translate-x-1/2 text-[11px] text-muted-foreground/60 tracking-wide select-none">
           Brought to you by K-Dense, Inc.

web/src/components/project-switcher.tsx

@@ -6,6 +6,7 @@ import {
   CheckIcon,
   ChevronsUpDownIcon,
   FolderIcon,
+  LayoutGridIcon,
   PencilIcon,
   PlusIcon,
   Trash2Icon,
@@ -71,7 +72,11 @@ function formatProjectId(id: string): string {
     .join(" ");
 }
 
-export function ProjectSwitcher() {
+interface ProjectSwitcherProps {
+  onOpenProjectView?: () => void;
+}
+
+export function ProjectSwitcher({ onOpenProjectView }: ProjectSwitcherProps) {
   const {
     projects,
     activeProjectId,
@@ -284,6 +289,19 @@ export function ProjectSwitcher() {
               )}
               <CommandSeparator />
               <CommandGroup>
+                {onOpenProjectView && (
+                  <CommandItem
+                    value="__view_all_projects__"
+                    onSelect={() => {
+                      setPopoverOpen(false);
+                      onOpenProjectView();
+                    }}
+                    className="gap-2 text-foreground"
+                  >
+                    <LayoutGridIcon className="size-4" />
+                    View all projects
+                  </CommandItem>
+                )}
                 <CommandItem
                   // Value tracks the live query so cmdk never filters this row
                   // out — typing a brand-new name keeps "Create …" reachable

web/src/components/project-view.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { Project } from "@/lib/projects";
+
+const setActive = vi.fn();
+const create = vi.fn();
+const update = vi.fn();
+const remove = vi.fn();
+const refresh = vi.fn();
+
+const PROJECTS: Project[] = [
+  {
+    id: "rna-pilot",
+    name: "RNA pilot",
+    description: "Compare treatment and control cohorts.",
+    tags: ["genomics"],
+    createdAt: "2026-07-01T12:00:00.000Z",
+    updatedAt: "2026-07-08T12:00:00.000Z",
+    archived: false,
+    spendLimitUsd: 25,
+  },
+  {
+    id: "old-study",
+    name: "Old study",
+    description: "",
+    tags: [],
+    createdAt: "2026-06-01T12:00:00.000Z",
+    updatedAt: "2026-06-02T12:00:00.000Z",
+    archived: true,
+    spendLimitUsd: null,
+  },
+];
+
+vi.mock("@/lib/use-projects", () => ({
+  useProjects: () => ({
+    projects: PROJECTS,
+    activeProjectId: "rna-pilot",
+    activeProject: PROJECTS[0],
+    loading: false,
+    error: null,
+    setActive,
+    refresh,
+    create,
+    update,
+    remove,
+  }),
+}));
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({
+    resolvedTheme: "light",
+    setTheme: vi.fn(),
+  }),
+}));
+
+vi.mock("@/components/settings-dialog", () => ({
+  SettingsDialog: () => null,
+}));
+
+import { ProjectView } from "@/components/project-view";
+
+describe("ProjectView", () => {
+  beforeEach(() => {
+    create.mockResolvedValue({
+      ...PROJECTS[0],
+      id: "new-project",
+      name: "New project",
+    });
+  });
+
+  it("shows active and archived projects and opens a selected project", async () => {
+    const user = userEvent.setup();
+    const onOpenProject = vi.fn();
+    render(<ProjectView onOpenProject={onOpenProject} />);
+
+    expect(screen.getByRole("heading", { name: "Choose a project" })).toBeInTheDocument();
+    expect(screen.getByText("RNA pilot")).toBeInTheDocument();
+    expect(screen.getByText("Old study")).toBeInTheDocument();
+    expect(screen.getByText("Current")).toBeInTheDocument();
+
+    const card = screen.getByText("RNA pilot").closest('[data-slot="card"]');
+    expect(card).not.toBeNull();
+    await user.click(within(card as HTMLElement).getByRole("button", { name: "Open" }));
+
+    expect(setActive).toHaveBeenCalledWith("rna-pilot");
+    expect(onOpenProject).toHaveBeenCalledWith("rna-pilot");
+  });
+
+  it("creates a project and opens it immediately", async () => {
+    const user = userEvent.setup();
+    const onOpenProject = vi.fn();
+    render(<ProjectView onOpenProject={onOpenProject} />);
+
+    await user.click(screen.getByRole("button", { name: "New project" }));
+    await user.type(screen.getByLabelText("Name"), "Protein screen");
+    await user.type(screen.getByLabelText(/Tags/), "proteomics, pilot");
+    await user.click(screen.getByRole("button", { name: "Create project" }));
+
+    await waitFor(() =>
+      expect(create).toHaveBeenCalledWith({
+        name: "Protein screen",
+        description: "",
+        tags: ["proteomics", "pilot"],
+        spendLimitUsd: null,
+      }),
+    );
+    expect(setActive).toHaveBeenCalledWith("new-project");
+    expect(onOpenProject).toHaveBeenCalledWith("new-project");
+  });
+});