From 8be2eb41b0841d2e7d14dca21bf6831b2e4356ce Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Tue, 2 Jun 2026 18:51:04 -0700
Subject: [PATCH] =?UTF-8?q?PAP-56:=20IA=20Phase=201=20=E2=80=94=20left-nav?=
 =?UTF-8?q?=20restructure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rebuild the sidebar to the board-locked IA structure (frontend-only):

- Add Conference room top-level item above New Task (chat-bubble icon),
  routing to a new placeholder page.
- Rename "New Issue" -> "New Task" and switch its label to the standard
  nav color (text-foreground/80) to match SidebarNavItem.
- Add Artifacts (new placeholder page) and Projects (-> existing /projects)
  to the Work section in the order Tasks · Routines · Goals · Workspaces ·
  Artifacts · Projects.
- Remove the old collapsible per-project PROJECTS section (SidebarProjects)
  from the sidebar; tiles get rebuilt in a child issue.
- Add /conference-room and /artifacts routes in App.tsx.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ui/src/App.tsx                     |  4 ++++
 ui/src/components/Sidebar.test.tsx |  4 ----
 ui/src/components/Sidebar.tsx      | 15 +++++++++------
 ui/src/pages/Artifacts.tsx         | 19 +++++++++++++++++++
 ui/src/pages/ConferenceRoom.tsx    | 19 +++++++++++++++++++
 5 files changed, 51 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/pages/Artifacts.tsx
 create mode 100644 ui/src/pages/ConferenceRoom.tsx

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 94522182c9b..64a5dfe79da 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -10,6 +10,8 @@ import { Companies } from "./pages/Companies";
 import { Agents } from "./pages/Agents";
 import { AgentDetail } from "./pages/AgentDetail";
 import { Projects } from "./pages/Projects";
+import { ConferenceRoom } from "./pages/ConferenceRoom";
+import { Artifacts } from "./pages/Artifacts";
 import { ProjectDetail } from "./pages/ProjectDetail";
 import { ProjectWorkspaceDetail } from "./pages/ProjectWorkspaceDetail";
 import { Workspaces } from "./pages/Workspaces";
@@ -67,6 +69,8 @@ function boardRoutes() {
   return (
     <>
       <Route index element={<Navigate to="dashboard" replace />} />
+      <Route path="conference-room" element={<ConferenceRoom />} />
+      <Route path="artifacts" element={<Artifacts />} />
       <Route path="dashboard" element={<Dashboard />} />
       <Route path="dashboard/live" element={<DashboardLive />} />
       <Route path="onboarding" element={<OnboardingRoutePage />} />
diff --git a/ui/src/components/Sidebar.test.tsx b/ui/src/components/Sidebar.test.tsx
index 01308192484..8b98c55bc7b 100644
--- a/ui/src/components/Sidebar.test.tsx
+++ b/ui/src/components/Sidebar.test.tsx
@@ -82,10 +82,6 @@ vi.mock("./SidebarCompanyMenu", () => ({
   SidebarCompanyMenu: () => <div>Company menu</div>,
 }));
 
-vi.mock("./SidebarProjects", () => ({
-  SidebarProjects: () => null,
-}));
-
 vi.mock("./SidebarAgents", () => ({
   SidebarAgents: () => null,
 }));
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index bce1f64aecf..65e68d46645 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -12,12 +12,14 @@ import {
   Repeat,
   GitBranch,
   Settings,
+  MessagesSquare,
+  Package,
+  FolderOpen,
 } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { NavLink } from "@/lib/router";
 import { SidebarSection } from "./SidebarSection";
 import { SidebarNavItem } from "./SidebarNavItem";
-import { SidebarProjects } from "./SidebarProjects";
 import { SidebarAgents } from "./SidebarAgents";
 import { useDialogActions } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
@@ -73,14 +75,15 @@ export function Sidebar() {
 
       <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 pointer-coarse:gap-3 px-3 py-2">
         <div className="flex flex-col gap-0.5">
-          {/* New Issue button aligned with nav items */}
+          <SidebarNavItem to="/conference-room" label="Conference room" icon={MessagesSquare} />
+          {/* New Task button aligned with nav items */}
           <button
             onClick={() => openNewIssue()}
             data-slot="icon-button"
-            className="flex items-center gap-2.5 px-3 py-2 pointer-coarse:py-1.5 text-[13px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors"
+            className="flex items-center gap-2.5 px-3 py-2 pointer-coarse:py-1.5 text-[13px] font-medium text-foreground/80 hover:bg-accent/50 hover:text-foreground transition-colors"
           >
             <SquarePen className="h-4 w-4 shrink-0" />
-            <span className="truncate">New Issue</span>
+            <span className="truncate">New Task</span>
           </button>
           <SidebarNavItem to="/dashboard" label="Dashboard" icon={LayoutDashboard} liveCount={liveRunCount} />
           <SidebarNavItem
@@ -100,6 +103,8 @@ export function Sidebar() {
           {showWorkspacesLink ? (
             <SidebarNavItem to="/workspaces" label="Workspaces" icon={GitBranch} />
           ) : null}
+          <SidebarNavItem to="/artifacts" label="Artifacts" icon={Package} />
+          <SidebarNavItem to="/projects" label="Projects" icon={FolderOpen} />
           <PluginSlotOutlet
             slotTypes={["sidebar"]}
             context={pluginContext}
@@ -115,8 +120,6 @@ export function Sidebar() {
           />
         </SidebarSection>
 
-        <SidebarProjects />
-
         <SidebarAgents />
 
         <SidebarSection label="Company">
diff --git a/ui/src/pages/Artifacts.tsx b/ui/src/pages/Artifacts.tsx
new file mode 100644
index 00000000000..9531268b940
--- /dev/null
+++ b/ui/src/pages/Artifacts.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { Package } from "lucide-react";
+import { EmptyState } from "../components/EmptyState";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+
+export function Artifacts() {
+  const { setBreadcrumbs } = useBreadcrumbs();
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Artifacts" }]);
+  }, [setBreadcrumbs]);
+
+  return (
+    <EmptyState
+      icon={Package}
+      message="Artifacts are coming soon."
+    />
+  );
+}
diff --git a/ui/src/pages/ConferenceRoom.tsx b/ui/src/pages/ConferenceRoom.tsx
new file mode 100644
index 00000000000..abdb8bd43fe
--- /dev/null
+++ b/ui/src/pages/ConferenceRoom.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { MessagesSquare } from "lucide-react";
+import { EmptyState } from "../components/EmptyState";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+
+export function ConferenceRoom() {
+  const { setBreadcrumbs } = useBreadcrumbs();
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Conference room" }]);
+  }, [setBreadcrumbs]);
+
+  return (
+    <EmptyState
+      icon={MessagesSquare}
+      message="The conference room is coming soon."
+    />
+  );
+}