🤖 feat: optional flat chat list for the sidebar with project badges

src/browser/App.tsx

@@ -75,6 +75,7 @@ import {
   EXPANDED_PROJECTS_KEY,
   LEFT_SIDEBAR_COLLAPSED_KEY,
   LEFT_SIDEBAR_WIDTH_KEY,
+  SIDEBAR_FLAT_MODE_KEY,
 } from "@/common/constants/storage";
 import { normalizeToCanonical } from "@/common/utils/ai/models";
 import { getDefaultModel } from "@/browser/hooks/useModelsFromSettings";
@@ -961,7 +962,8 @@ function AppInner() {
         meta,
         direction,
         sortedWorkspacesByProject,
-        userProjects
+        userProjects,
+        readPersistedState(SIDEBAR_FLAT_MODE_KEY, false)
       );
       if (order) void reorderPinnedWorkspaces(order);
     },

src/browser/components/AgentListItem/AgentListItem.tsx

@@ -105,6 +105,7 @@ interface AgentListItemBaseProps {
   isSelected: boolean;
   depth?: number;
   sectionId?: string;
+  projectBadge?: { name: string; color: string };
 }
 
 /** Props for regular (persisted) workspace items */
@@ -490,6 +491,19 @@ function DraftAgentListItemInner(props: DraftAgentListItemProps) {
           >
             {draft.title}
           </span>
+          {props.projectBadge && (
+            <span
+              data-testid={`workspace-project-badge-draft-${draft.draftId}`}
+              className="max-w-20 shrink-0 truncate rounded border px-1.5 py-0.5 text-[10px] leading-none font-medium"
+              style={{
+                backgroundColor: `${props.projectBadge.color}20`,
+                color: props.projectBadge.color,
+                borderColor: `${props.projectBadge.color}40`,
+              }}
+            >
+              {props.projectBadge.name}
+            </span>
+          )}
         </div>
         {hasPromptPreview && (
           <span
@@ -1319,6 +1333,19 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
                 >
                   {suppressGroupMemberTitle ? memberOnlyLabel : workspaceTitle}
                 </span>
+                {props.projectBadge && (
+                  <span
+                    data-testid={`workspace-project-badge-${workspaceId}`}
+                    className="max-w-20 shrink-0 truncate rounded border px-1.5 py-0.5 text-[10px] leading-none font-medium"
+                    style={{
+                      backgroundColor: `${props.projectBadge.color}20`,
+                      color: props.projectBadge.color,
+                      borderColor: `${props.projectBadge.color}40`,
+                    }}
+                  >
+                    {props.projectBadge.name}
+                  </span>
+                )}
                 {groupLabel && !suppressGroupMemberTitle && (
                   <span
                     data-testid={`workspace-scope-label-${workspaceId}`}

src/browser/components/ProjectSidebar/ProjectSidebar.stories.tsx

@@ -4,6 +4,8 @@ import { PIXEL_DUAL_THEME, appMeta, AppWithMocks } from "@/browser/stories/meta.
 import { expandProjects } from "@/browser/stories/helpers/uiState";
 import { createMockORPCClient } from "@/browser/stories/mocks/orpc";
 import { createWorkspace, groupWorkspacesByProject } from "@/browser/stories/mocks/workspaces";
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+import { SIDEBAR_FLAT_MODE_KEY } from "@/common/constants/storage";
 
 const PROJECT_PATH = "/home/user/projects/my-app";
 
@@ -299,6 +301,58 @@ export const WorkflowRunGroups: AppStory = {
   },
 };
 
+export const FlatChatList: AppStory = {
+  parameters: {
+    pixel: { matrix: PIXEL_DUAL_THEME },
+  },
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        updatePersistedState(SIDEBAR_FLAT_MODE_KEY, true);
+        const workspaces = [
+          createWorkspace({
+            id: "alpha-pinned",
+            name: "alpha-pinned",
+            title: "Pinned from a long project name",
+            projectName: "alpha-application-with-a-long-name",
+            pinnedAt: "2026-01-02T00:00:00.000Z",
+          }),
+          createWorkspace({
+            id: "beta-pinned",
+            name: "beta-pinned",
+            title: "Pinned beta chat",
+            projectName: "beta-service",
+            pinnedAt: "2026-01-01T00:00:00.000Z",
+          }),
+          createWorkspace({
+            id: "alpha-recent",
+            name: "alpha-recent",
+            title: "Recent alpha work",
+            projectName: "alpha-application-with-a-long-name",
+          }),
+          {
+            ...createWorkspace({
+              id: "scratch-flat",
+              name: "scratch-flat",
+              title: "Scratch idea",
+              projectName: "Scratch",
+              projectPath: "/home/user/.xum/scratch/scratch-flat",
+            }),
+            kind: "scratch" as const,
+          },
+        ];
+        const projects = groupWorkspacesByProject(workspaces);
+        const alphaPath = "/home/user/projects/alpha-application-with-a-long-name";
+        const betaPath = "/home/user/projects/beta-service";
+        const alphaConfig = projects.get(alphaPath);
+        const betaConfig = projects.get(betaPath);
+        if (alphaConfig) projects.set(alphaPath, { ...alphaConfig, color: "Blue" });
+        if (betaConfig) projects.set(betaPath, { ...betaConfig, color: "Green" });
+        return createMockORPCClient({ projects, workspaces });
+      }}
+    />
+  ),
+};
 // Pinned chats sort by pinnedAt (user-reorderable), not by name or recency:
 // the pinned block deliberately renders as charlie, alpha, bravo while the
 // newest unpinned chat stays below the block.

src/browser/components/ProjectSidebar/ProjectSidebar.test.tsx

@@ -7,7 +7,11 @@ import * as ReactDndModule from "react-dnd";
 import * as ReactDndHtml5BackendModule from "react-dnd-html5-backend";
 import * as ReactColorfulModule from "react-colorful";
 import { installDom } from "../../../../tests/ui/dom";
-import { EXPANDED_PROJECTS_KEY, SIDEBAR_HIDE_SUBAGENTS_KEY } from "@/common/constants/storage";
+import {
+  EXPANDED_PROJECTS_KEY,
+  SIDEBAR_FLAT_MODE_KEY,
+  SIDEBAR_HIDE_SUBAGENTS_KEY,
+} from "@/common/constants/storage";
 import { getDraftScopeId, getInputKey } from "@/common/constants/storage";
 import { SCRATCH_PROJECT_CONFIG_KEY, SCRATCH_SIDEBAR_SECTION_ID } from "@/common/constants/scratch";
 import { MULTI_PROJECT_SIDEBAR_SECTION_ID } from "@/common/constants/multiProject";
@@ -123,6 +127,7 @@ interface MockAgentListItemProps {
   };
   depth?: number;
   rowRenderMeta?: AgentRowRenderMeta;
+  projectBadge?: { name: string; color: string };
   delegatedActivity?: { activeCount: number; queuedCount: number };
   hiddenSubAgentsSummary?: WorkspaceSubAgentsSummary;
   getWorkflowRunName?: (runId: string) => string | undefined;
@@ -369,6 +374,7 @@ function installProjectSidebarTestDoubles() {
           )}
         >
           <span>{displayTitle}</span>
+          {props.projectBadge ? <span>{props.projectBadge.name}</span> : null}
           {hasCompletedChildren && props.onToggleCompletedChildren ? (
             <button
               type="button"
@@ -768,6 +774,60 @@ describe("ProjectSidebar scratch chats", () => {
     expect(view.getByText("Explore an idea")).toBeTruthy();
   });
 
+  test("renders a global pinned-first list with project badges and restores folders when disabled", async () => {
+    const alpha = {
+      ...createWorkspace("alpha", { title: "Alpha chat" }),
+      projects: undefined,
+      projectPath: "/projects/alpha",
+      projectName: "alpha",
+      pinnedAt: "2026-01-02T00:00:00.000Z",
+    };
+    const beta = {
+      ...createWorkspace("beta", { title: "Beta chat" }),
+      projects: undefined,
+      projectPath: "/projects/beta",
+      projectName: "beta",
+      pinnedAt: "2026-01-01T00:00:00.000Z",
+    };
+    projectContextValue = createProjectContextValue({
+      userProjects: new Map([
+        ["/projects/alpha", { displayName: "Alpha Project", color: "Blue", workspaces: [] }],
+        ["/projects/beta", { displayName: "Beta Project", color: "Green", workspaces: [] }],
+      ]),
+    });
+    updatePersistedState(SIDEBAR_FLAT_MODE_KEY, true);
+
+    const view = render(
+      <ProjectSidebar
+        collapsed={false}
+        onToggleCollapsed={() => undefined}
+        sortedWorkspacesByProject={
+          new Map([
+            ["/projects/alpha", [alpha]],
+            ["/projects/beta", [beta]],
+          ])
+        }
+        workspaceRecency={{ alpha: 1, beta: 2 }}
+      />
+    );
+
+    expect(view.queryByLabelText("Expand project alpha")).toBeNull();
+    expect(view.getByText("Alpha Project")).toBeTruthy();
+    expect(view.getByText("Beta Project")).toBeTruthy();
+    const workspaceRows = Array.from(
+      view.container.querySelectorAll('[data-testid^="agent-item-"]')
+    );
+    expect(workspaceRows.map((row) => row.getAttribute("data-testid"))).toEqual([
+      agentItemTestId("beta"),
+      agentItemTestId("alpha"),
+    ]);
+
+    act(() => updatePersistedState(SIDEBAR_FLAT_MODE_KEY, false));
+    await waitFor(() => {
+      expect(view.getByLabelText("Expand project alpha")).toBeTruthy();
+      expect(view.getByLabelText("Expand project beta")).toBeTruthy();
+    });
+  });
   test("Ctrl+N from a selected scratch chat opens a scratch draft, not a workdir project draft", () => {
     // Scratch rows are bucketed under the scratch config key while the
     // selection's projectPath is the app-managed workdir, so the keybind