feat(channels): add the flag-gated spaces layout

Activate the complete channel-scoped sidebar, switcher, navigation, shortcuts, and shell chrome behind the spaces flag. The existing Thread panel remains in place until the next stack PR.

Generated-By: PostHog Code
Task-Id: 6190e713-9b80-43d9-a05c-5e3b1ecdf297

Author: puemos

packages/core/src/command-center/grid.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   BRAINROT_CELL,
   clampZoom,
+  countActiveTaskCells,
   getCellCount,
   getCellSessionId,
   getGridDimensions,
@@ -97,3 +98,34 @@ describe("getCellSessionId", () => {
     expect(getCellSessionId(2)).toBe("cc-cell-2");
   });
 });
+
+describe("countActiveTaskCells", () => {
+  const live = new Set(["task-1", "task-2"]);
+
+  it("counts only cells whose task still exists", () => {
+    expect(countActiveTaskCells(["task-1", "task-2"], live)).toBe(2);
+  });
+
+  // Cells are persisted and only pruned on archive, so a deleted task's id
+  // lingers forever — counting the array's non-empty entries would never drop.
+  it("ignores a task that has since been deleted", () => {
+    expect(countActiveTaskCells(["task-1", "deleted-task"], live)).toBe(1);
+  });
+
+  it.each([
+    { name: "empty cells", cells: [null, null] },
+    { name: "the brainrot sentinel", cells: [BRAINROT_CELL] },
+    { name: "terminal cells", cells: [makeTerminalCellValue("abc123")] },
+  ])("does not count $name", ({ cells }) => {
+    expect(countActiveTaskCells(cells, live)).toBe(0);
+  });
+
+  it("counts a mixed grid correctly", () => {
+    expect(
+      countActiveTaskCells(
+        [null, BRAINROT_CELL, "task-1", "deleted", makeTerminalCellValue("t")],
+        live,
+      ),
+    ).toBe(1);
+  });
+});

packages/core/src/command-center/grid.ts

@@ -49,6 +49,21 @@ export function getTerminalCellCwd(value: string | null): string | null {
   return colon === -1 ? null : decodeURIComponent(rest.slice(colon + 1));
 }
 
+/**
+ * How many cells hold a task that still exists.
+ *
+ * Cells are persisted and only pruned when a task is archived — deleting one
+ * leaves its id behind forever — so a count has to be taken against the live
+ * task list rather than trusting the array's length. Excludes the brainrot and
+ * terminal sentinels, which are ambient chrome rather than parked work.
+ */
+export function countActiveTaskCells(
+  cells: readonly (string | null)[],
+  liveTaskIds: ReadonlySet<string>,
+): number {
+  return cells.filter((cell) => cell != null && liveTaskIds.has(cell)).length;
+}
+
 export function getGridDimensions(preset: LayoutPreset): GridDimensions {
   const [cols, rows] = preset.split("x").map(Number);
   return { cols, rows };

packages/ui/src/features/browser-tabs/TabShortcutFallback.test.tsx

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TabShortcutFallback } from "./TabShortcutFallback";
+
+function pressCloseTab(): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "w",
+    code: "KeyW",
+    metaKey: true,
+    bubbles: true,
+    cancelable: true,
+  });
+  document.dispatchEvent(event);
+  return event;
+}
+
+describe("TabShortcutFallback", () => {
+  // Without a preventDefault here the key reaches Electron's Window ▸ Close
+  // role and takes the window — and everything unsaved in it — with it.
+  it("swallows Cmd+W so the host menu never sees it", () => {
+    render(<TabShortcutFallback enabled />);
+    expect(pressCloseTab().defaultPrevented).toBe(true);
+  });
+
+  // Disabled is how the BrowserTabStrip keeps ownership where it is mounted.
+  it("leaves the key alone when disabled", () => {
+    render(<TabShortcutFallback enabled={false} />);
+    expect(pressCloseTab().defaultPrevented).toBe(false);
+  });
+});

packages/ui/src/features/browser-tabs/TabShortcutFallback.tsx

@@ -0,0 +1,26 @@
+import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
+import { useHotkeys } from "react-hotkeys-hook";
+
+/**
+ * Renders nothing — claims Cmd/Ctrl+W wherever BrowserTabStrip isn't mounted.
+ *
+ * The strip's own CLOSE_TAB handler preventDefaults unconditionally, because
+ * otherwise the key reaches Electron's Window ▸ Close role (`{ role:
+ * "windowMenu" }` in the host menu) and closes the window, losing everything in
+ * it. Any route that renders the app without the strip — the whole channels
+ * layout, and the settings shell either way — needs someone else to hold the key.
+ *
+ * The task view's editor panel keeps closing its own tab from
+ * usePanelKeyboardShortcuts; that handler runs too, and this one only swallows.
+ */
+export function TabShortcutFallback({ enabled }: { enabled: boolean }) {
+  useHotkeys(
+    SHORTCUTS.CLOSE_TAB,
+    (event) => {
+      event.preventDefault();
+    },
+    { enabled, enableOnFormTags: true, enableOnContentEditable: true },
+  );
+
+  return null;
+}

packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx

@@ -1,10 +1,10 @@
-import { HashIcon } from "@phosphor-icons/react";
 import {
   Button,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@posthog/quill";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { HeaderTitleEditor } from "@posthog/ui/features/task-detail/HeaderTitleEditor";
 import { Flex, Text } from "@radix-ui/themes";
 import { useNavigate } from "@tanstack/react-router";
@@ -52,7 +52,10 @@ export function ChannelBreadcrumb({
 
   const channelSegment = (
     <>
-      <HashIcon size={12} className="mt-px shrink-0 text-muted-foreground/80" />
+      {channelGlyph(channelName, {
+        size: 12,
+        className: "mt-px shrink-0 text-muted-foreground/80",
+      })}
       <Text
         className="min-w-0 truncate whitespace-nowrap font-medium text-[13px]"
         title={channelName}

packages/ui/src/features/canvas/components/ChannelFeedView.tsx

@@ -6,6 +6,10 @@ import {
   RobotIcon,
 } from "@phosphor-icons/react";
 import { taskFeedRunStatus } from "@posthog/core/canvas/channelFeed";
+import {
+  RUN_STATUS_LABELS,
+  runStatusVariant,
+} from "@posthog/core/canvas/runStatus";
 import { xmlToPlainText } from "@posthog/core/message-editor/content";
 import {
   Avatar,
@@ -75,17 +79,6 @@ import {
 // shared query key means an open panel naturally speeds the row up too.
 const FEED_REPLIES_POLL_INTERVAL_MS = 15_000;
 
-const STATUS_LABELS: Record<TaskRunStatus, string> = {
-  not_started: "Not started",
-  queued: "Queued",
-  in_progress: "In progress",
-  // "Ready", not "Completed": the agent has finished its work and the task is
-  // ready to look at, but the change itself isn't necessarily shipped/done.
-  completed: "Ready",
-  failed: "Failed",
-  cancelled: "Cancelled",
-};
-
 // Once a PR exists its GitHub state is the truest top-line status — more
 // accurate than the run status, which routinely lingers on "in_progress"
 // (or a stale cloud status) after the agent opens the PR. Mirrors the PR
@@ -101,18 +94,10 @@ const PR_STATE_LABELS: Record<
 };
 
 function statusBadge(status: TaskRunStatus) {
-  const variant =
-    status === "completed"
-      ? "success"
-      : status === "failed"
-        ? "destructive"
-        : status === "in_progress"
-          ? "info"
-          : "default";
   return (
-    <Badge variant={variant}>
+    <Badge variant={runStatusVariant(status)}>
       {status === "in_progress" && <Spinner className="size-2.5" />}
-      {STATUS_LABELS[status]}
+      {RUN_STATUS_LABELS[status]}
     </Badge>
   );
 }

packages/ui/src/features/canvas/components/ChannelHeader.tsx

@@ -1,25 +1,57 @@
-import { HashIcon } from "@phosphor-icons/react";
+import { StarIcon } from "@phosphor-icons/react";
 import { Button, cn } from "@posthog/quill";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { ChannelTabs } from "@posthog/ui/features/canvas/components/ChannelTabs";
-import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
+import { useChannelStarToggle } from "@posthog/ui/features/canvas/hooks/useChannelStars";
+import {
+  type Channel,
+  useChannels,
+} from "@posthog/ui/features/canvas/hooks/useChannels";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { useMarkChannelSeen } from "@posthog/ui/features/canvas/hooks/useMarkChannelSeen";
+import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { track } from "@posthog/ui/shell/analytics";
 import { Text } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 
-// The shared channel header: a clickable "# channel" that doubles as the Home
-// item — it routes to the channel home (`/website/$channelId`, like the sidebar
-// channel row) and highlights `bg-fill-selected` while you're there, the same
-// pathname-driven active state the rest of the channel tab strip uses. Followed
-// by that strip (Artifacts / Recents / CONTEXT.md), rendered into the
-// header bar by every channel view so the tabs stay in view.
+// The feed-side counterpart to the switcher's hover star.
+function ChannelStarButton({ channel }: { channel: Channel }) {
+  const { isStarred, toggleStar } = useChannelStarToggle(channel);
+  return (
+    <Button
+      type="button"
+      size="icon-sm"
+      aria-label={isStarred ? "Unstar channel" : "Star channel"}
+      onClick={() => {
+        track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+          action_type: isStarred ? "unstar" : "star",
+          surface: "channel_home",
+          channel_id: channel.id,
+        });
+        toggleStar();
+      }}
+    >
+      <StarIcon
+        size={14}
+        weight={isStarred ? "fill" : "regular"}
+        className={isStarred ? undefined : "text-muted-foreground/80"}
+      />
+    </Button>
+  );
+}
+
+// The shared channel header. The new layout drops the section tab strip — the
+// channel sidebar carries those entries — while flag off keeps it.
 export function ChannelHeader({ channelId }: { channelId: string }) {
   const navigate = useNavigate();
+  const channelsLayout = useChannelsLayout();
   const { channels } = useChannels();
-  const channelName = channels.find((c) => c.id === channelId)?.name;
+  const channel = channels.find((c) => c.id === channelId);
+  const channelName = channel?.name;
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const isHome = pathname === `/website/${channelId}`;
-  // Every channel surface renders this header, so it is where "the viewer is
-  // in this channel" is known — and therefore where the channel is marked read.
+  // Every channel surface renders this header, so mark the channel read here.
   useMarkChannelSeen(channelName);
 
   return (
@@ -33,12 +65,18 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
         size="sm"
         className={cn("min-w-0", isHome ? "bg-fill-selected" : "")}
       >
-        <HashIcon size={20} className="shrink-0 text-muted-foreground/80" />
+        {channelGlyph(channelName, {
+          size: 20,
+          className: "shrink-0 text-muted-foreground/80",
+        })}
         <Text className="min-w-0 truncate font-medium" title={channelName}>
           {channelName ?? "Channel"}
         </Text>
       </Button>
-      <ChannelTabs channelId={channelId} />
+      {channelsLayout && channel && channel.name !== PERSONAL_CHANNEL_NAME && (
+        <ChannelStarButton channel={channel} />
+      )}
+      {!channelsLayout && <ChannelTabs channelId={channelId} />}
     </div>
   );
 }

packages/ui/src/features/canvas/components/ChannelHotkeys.test.tsx

@@ -0,0 +1,96 @@
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  channelsLayout: true,
+  slots: [] as { id: string; name: string; path: string }[],
+  navigateToChannel: vi.fn(),
+}));
+
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelsLayout", () => ({
+  useChannelsLayout: () => mocks.channelsLayout,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useStarredChannelSlots", () => ({
+  useStarredChannelSlots: () => ({
+    slots: mocks.slots,
+    rest: [],
+    slotFor: () => undefined,
+  }),
+}));
+vi.mock("@posthog/ui/router/navigationBridge", () => ({
+  navigateToChannel: (...args: unknown[]) => mocks.navigateToChannel(...args),
+}));
+vi.mock("@posthog/ui/shell/analytics", () => ({ track: vi.fn() }));
+
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { ChannelHotkeys } from "./ChannelHotkeys";
+
+function press(digit: string, modifiers: Partial<KeyboardEventInit> = {}) {
+  document.dispatchEvent(
+    new KeyboardEvent("keydown", {
+      key: digit,
+      code: `Digit${digit}`,
+      bubbles: true,
+      cancelable: true,
+      ...modifiers,
+    }),
+  );
+}
+
+describe("ChannelHotkeys", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.channelsLayout = true;
+    mocks.slots = [
+      { id: "me-id", name: "me", path: "/me" },
+      { id: "eng-id", name: "eng", path: "/eng" },
+    ];
+    useCurrentChannelStore.setState({ currentChannelId: null });
+  });
+
+  // The regression: this component is rendered ALONE — no sidebar, no switcher.
+  // Binding the keys inside the switcher left them unowned exactly when the
+  // channel list hadn't resolved yet.
+  it("switches channels without the sidebar being mounted", () => {
+    render(<ChannelHotkeys />);
+
+    press("1", { metaKey: true });
+
+    expect(mocks.navigateToChannel).toHaveBeenCalledWith("me-id");
+    expect(useCurrentChannelStore.getState().currentChannelId).toBe("me-id");
+  });
+
+  it("maps slot 2 to the first starred channel", () => {
+    render(<ChannelHotkeys />);
+    press("2", { metaKey: true });
+    expect(mocks.navigateToChannel).toHaveBeenCalledWith("eng-id");
+  });
+
+  // mod+0 belongs to the host's "Actual Size" accelerator.
+  it("ignores mod+0", () => {
+    render(<ChannelHotkeys />);
+    press("0", { metaKey: true });
+    expect(mocks.navigateToChannel).not.toHaveBeenCalled();
+  });
+
+  // ctrl+1-9 is the editor-panel tab switcher on every platform.
+  it("leaves pure ctrl presses to the panel tab switcher", () => {
+    render(<ChannelHotkeys />);
+    press("1", { ctrlKey: true });
+    expect(mocks.navigateToChannel).not.toHaveBeenCalled();
+  });
+
+  it("does nothing for a slot with no channel behind it", () => {
+    mocks.slots = [{ id: "me-id", name: "me", path: "/me" }];
+    render(<ChannelHotkeys />);
+    press("5", { metaKey: true });
+    expect(mocks.navigateToChannel).not.toHaveBeenCalled();
+  });
+
+  it("stays out of the way when the layout is off", () => {
+    mocks.channelsLayout = false;
+    render(<ChannelHotkeys />);
+    press("1", { metaKey: true });
+    expect(mocks.navigateToChannel).not.toHaveBeenCalled();
+  });
+});