diff --git a/apps/code/src/renderer/platform-adapters/auth-side-effects.ts b/apps/code/src/renderer/platform-adapters/auth-side-effects.ts
index 2a567d93c5..0e87804a26 100644
--- a/apps/code/src/renderer/platform-adapters/auth-side-effects.ts
+++ b/apps/code/src/renderer/platform-adapters/auth-side-effects.ts
@@ -6,6 +6,7 @@ import {
 } from "@posthog/ui/features/auth/authQueries";
 import { useAuthUiStateStore } from "@posthog/ui/features/auth/authUiStateStore";
 import type { IAuthSideEffects } from "@posthog/ui/features/auth/identifiers";
+import { resetCurrentChannel } from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import { useOnboardingStore } from "@posthog/ui/features/onboarding/onboardingStore";
 import { resetSessionService } from "@posthog/ui/features/sessions/sessionServiceHost";
 import { openTaskInput } from "@posthog/ui/router/useOpenTask";
@@ -30,6 +31,9 @@ export class RendererAuthSideEffects implements IAuthSideEffects {
   onProjectSelected(): void {
     clearAuthScopedQueries();
     void refreshAuthStateQuery();
+    // Before openTaskInput, which files a new task into the scoped channel —
+    // a channel id from the project we just left.
+    resetCurrentChannel();
     openTaskInput();
   }
 
@@ -40,6 +44,7 @@ export class RendererAuthSideEffects implements IAuthSideEffects {
     if (previousRegion) {
       useAuthUiStateStore.getState().setStaleRegion(previousRegion);
     }
+    resetCurrentChannel();
     openTaskInput();
     useOnboardingStore.getState().resetSelections();
   }
diff --git a/apps/web/src/web-auth-side-effects.ts b/apps/web/src/web-auth-side-effects.ts
index a22b6081ce..03fed679b4 100644
--- a/apps/web/src/web-auth-side-effects.ts
+++ b/apps/web/src/web-auth-side-effects.ts
@@ -5,6 +5,7 @@ import {
 } from "@posthog/ui/features/auth/authQueries";
 import { useAuthUiStateStore } from "@posthog/ui/features/auth/authUiStateStore";
 import type { IAuthSideEffects } from "@posthog/ui/features/auth/identifiers";
+import { resetCurrentChannel } from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import { useOnboardingStore } from "@posthog/ui/features/onboarding/onboardingStore";
 import { openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { injectable } from "inversify";
@@ -24,6 +25,9 @@ export class WebAuthSideEffects implements IAuthSideEffects {
   onProjectSelected(): void {
     clearAuthScopedQueries();
     void refreshAuthStateQuery();
+    // Before openTaskInput, which files a new task into the scoped channel —
+    // a channel id from the project we just left.
+    resetCurrentChannel();
     openTaskInput();
   }
 
@@ -32,6 +36,7 @@ export class WebAuthSideEffects implements IAuthSideEffects {
     if (previousRegion) {
       useAuthUiStateStore.getState().setStaleRegion(previousRegion);
     }
+    resetCurrentChannel();
     openTaskInput();
     useOnboardingStore.getState().resetSelections();
   }
diff --git a/packages/core/src/canvas/channelItems.test.ts b/packages/core/src/canvas/channelItems.test.ts
new file mode 100644
index 0000000000..2cc89a1a5b
--- /dev/null
+++ b/packages/core/src/canvas/channelItems.test.ts
@@ -0,0 +1,211 @@
+import type { Task, UserBasic } from "@posthog/shared/domain-types";
+import { describe, expect, it } from "vitest";
+import {
+  buildChannelItems,
+  type ChannelItemModel,
+  filterChannelItems,
+} from "./channelItems";
+import type { DashboardSummary } from "./dashboardSchemas";
+
+const ME: UserBasic = {
+  id: 1,
+  uuid: "me-uuid",
+  distinct_id: "me",
+  first_name: "Ada",
+  last_name: "Lovelace",
+  email: "ada@posthog.com",
+};
+
+const OTHER: UserBasic = {
+  id: 2,
+  uuid: "other-uuid",
+  distinct_id: "other",
+  first_name: "Grace",
+  last_name: "Hopper",
+  email: "grace@posthog.com",
+};
+
+function canvas(over: Partial<DashboardSummary> = {}): DashboardSummary {
+  return {
+    id: "d1",
+    channelId: "c1",
+    name: "Canvas",
+    templateId: "freeform",
+    createdAt: 0,
+    updatedAt: 1_000,
+    ...over,
+  } as DashboardSummary;
+}
+
+function task(over: Partial<Task> = {}): Task {
+  return {
+    id: "t1",
+    title: "Task",
+    updated_at: new Date(2_000).toISOString(),
+    created_by: ME,
+    ...over,
+  } as Task;
+}
+
+const NONE: ReadonlySet<string> = new Set();
+
+function build(options: Partial<Parameters<typeof buildChannelItems>[0]> = {}) {
+  return buildChannelItems({
+    dashboards: [],
+    feedTasks: [],
+    archivedTaskIds: NONE,
+    pinnedTaskIds: NONE,
+    ownedBy: null,
+    ...options,
+  });
+}
+
+describe("buildChannelItems", () => {
+  it("merges canvases and tasks newest-first", () => {
+    const items = build({
+      dashboards: [canvas({ id: "old", updatedAt: 1_000 })],
+      feedTasks: [
+        task({ id: "new", updated_at: new Date(5_000).toISOString() }),
+      ],
+    });
+    expect(items.map((i) => i.key)).toEqual(["task:new", "canvas:old"]);
+  });
+
+  it("drops archived tasks but keeps canvases", () => {
+    const items = build({
+      dashboards: [canvas()],
+      feedTasks: [task({ id: "gone" })],
+      archivedTaskIds: new Set(["gone"]),
+    });
+    expect(items.map((i) => i.kind)).toEqual(["canvas"]);
+  });
+
+  it("marks pinned state from each source's own signal", () => {
+    const items = build({
+      dashboards: [canvas({ id: "pinned-canvas", pinnedAt: 42 })],
+      feedTasks: [task({ id: "pinned-task" })],
+      pinnedTaskIds: new Set(["pinned-task"]),
+    });
+    expect(items.every((i) => i.pinned)).toBe(true);
+  });
+
+  it("falls back to a placeholder title for untitled tasks", () => {
+    const [item] = build({
+      feedTasks: [task({ title: "" })],
+    });
+    expect(item.title).toBe("Untitled task");
+  });
+
+  it("treats an unparseable updated_at as epoch rather than NaN", () => {
+    const [item] = build({
+      feedTasks: [task({ updated_at: "not a date" })],
+    });
+    expect(item.ts).toBe(0);
+  });
+
+  it("returns everything when the owner is unknown", () => {
+    const items = build({
+      dashboards: [canvas({ createdBy: "Grace Hopper" })],
+      feedTasks: [task({ created_by: OTHER })],
+    });
+    expect(items).toHaveLength(2);
+  });
+
+  it("filters to the owner for the personal channel", () => {
+    const items = build({
+      dashboards: [
+        canvas({ id: "mine", createdBy: "Ada Lovelace" }),
+        canvas({ id: "theirs", createdBy: "Grace Hopper" }),
+      ],
+      feedTasks: [
+        task({ id: "mine-task", created_by: ME }),
+        task({ id: "their-task", created_by: OTHER }),
+      ],
+      ownedBy: { uuid: ME.uuid, name: "Ada Lovelace" },
+    });
+    expect(items.map((i) => i.id).sort()).toEqual(["mine", "mine-task"]);
+  });
+
+  it("keeps items whose author is unknown", () => {
+    const items = build({
+      dashboards: [canvas({ id: "orphan", createdBy: undefined })],
+      feedTasks: [task({ id: "orphan-task", created_by: null })],
+      ownedBy: { uuid: ME.uuid, name: "Ada Lovelace" },
+    });
+    expect(items).toHaveLength(2);
+  });
+});
+
+function model(over: Partial<ChannelItemModel> = {}): ChannelItemModel {
+  return {
+    key: "task:t1",
+    kind: "task",
+    id: "t1",
+    title: "Ship the thing",
+    ts: 0,
+    pinned: false,
+    rawStatus: null,
+    authorUser: ME,
+    authorName: null,
+    templateId: null,
+    ...over,
+  };
+}
+
+describe("filterChannelItems", () => {
+  const me = { uuid: ME.uuid, name: "Ada Lovelace" };
+
+  it("matches titles case-insensitively", () => {
+    const items = [model({ title: "Ship IT" }), model({ title: "Other" })];
+    const result = filterChannelItems(items, {
+      query: "  ship ",
+      createdBy: "anyone",
+      status: null,
+      me,
+    });
+    expect(result.map((i) => i.title)).toEqual(["Ship IT"]);
+  });
+
+  it.each([
+    ["me", ["mine"]],
+    ["others", ["theirs"]],
+    ["anyone", ["mine", "theirs"]],
+  ] as const)("filters createdBy=%s", (createdBy, expected) => {
+    const items = [
+      model({ id: "mine", authorUser: ME }),
+      model({ id: "theirs", authorUser: OTHER }),
+    ];
+    const result = filterChannelItems(items, {
+      query: "",
+      createdBy,
+      status: null,
+      me,
+    });
+    expect(result.map((i) => i.id)).toEqual(expected);
+  });
+
+  it("filters by run status, including not_started", () => {
+    const items = [
+      model({ id: "fresh", rawStatus: "not_started" }),
+      model({ id: "done", rawStatus: "completed" }),
+    ];
+    const result = filterChannelItems(items, {
+      query: "",
+      createdBy: "anyone",
+      status: "not_started",
+      me,
+    });
+    expect(result.map((i) => i.id)).toEqual(["fresh"]);
+  });
+
+  it("excludes canvases when a run status is selected", () => {
+    const items = [model({ kind: "canvas", rawStatus: null })];
+    const result = filterChannelItems(items, {
+      query: "",
+      createdBy: "anyone",
+      status: "completed",
+      me,
+    });
+    expect(result).toEqual([]);
+  });
+});
diff --git a/packages/core/src/canvas/channelItems.ts b/packages/core/src/canvas/channelItems.ts
new file mode 100644
index 0000000000..e67a2d0d21
--- /dev/null
+++ b/packages/core/src/canvas/channelItems.ts
@@ -0,0 +1,115 @@
+import type {
+  Task,
+  TaskRunStatus,
+  UserBasic,
+} from "@posthog/shared/domain-types";
+import type { DashboardSummary } from "./dashboardSchemas";
+
+export interface ChannelItemModel {
+  key: string;
+  kind: "task" | "canvas";
+  id: string;
+  title: string;
+  ts: number;
+  pinned: boolean;
+  rawStatus: TaskRunStatus | null;
+  authorUser: UserBasic | null;
+  authorName: string | null;
+  templateId: string | null;
+}
+
+export interface ChannelItemOwner {
+  uuid: string | null;
+  name: string | null;
+}
+
+function isOwnedBy(
+  item: Pick<ChannelItemModel, "authorUser" | "authorName">,
+  owner: ChannelItemOwner,
+): boolean {
+  if (item.authorUser) return item.authorUser.uuid === owner.uuid;
+  if (item.authorName && owner.name) return item.authorName === owner.name;
+  return true;
+}
+
+export function buildChannelItems({
+  dashboards,
+  feedTasks,
+  archivedTaskIds,
+  pinnedTaskIds,
+  ownedBy,
+}: {
+  dashboards: readonly DashboardSummary[];
+  feedTasks: readonly Task[];
+  archivedTaskIds: ReadonlySet<string>;
+  pinnedTaskIds: ReadonlySet<string>;
+  ownedBy: ChannelItemOwner | null;
+}): ChannelItemModel[] {
+  const canvasItems: ChannelItemModel[] = dashboards.map((d) => ({
+    key: `canvas:${d.id}`,
+    kind: "canvas",
+    id: d.id,
+    title: d.name,
+    ts: d.updatedAt,
+    pinned: d.pinnedAt != null,
+    rawStatus: null,
+    authorUser: null,
+    authorName: d.createdBy ?? null,
+    templateId: d.templateId,
+  }));
+
+  const taskItems: ChannelItemModel[] = feedTasks.flatMap((task) =>
+    archivedTaskIds.has(task.id)
+      ? []
+      : [
+          {
+            key: `task:${task.id}`,
+            kind: "task" as const,
+            id: task.id,
+            title: task.title || "Untitled task",
+            ts: Date.parse(task.updated_at) || 0,
+            pinned: pinnedTaskIds.has(task.id),
+            rawStatus: task.latest_run?.status ?? null,
+            authorUser: task.created_by ?? null,
+            authorName: null,
+            templateId: null,
+          },
+        ],
+  );
+
+  const all = [...canvasItems, ...taskItems].sort((a, b) => b.ts - a.ts);
+  return ownedBy ? all.filter((item) => isOwnedBy(item, ownedBy)) : all;
+}
+
+export type CreatedByFilter = "anyone" | "me" | "others";
+
+export function filterChannelItems(
+  items: readonly ChannelItemModel[],
+  {
+    query,
+    createdBy,
+    status,
+    me,
+  }: {
+    query: string;
+    createdBy: CreatedByFilter;
+    status: TaskRunStatus | null;
+    me: ChannelItemOwner;
+  },
+): ChannelItemModel[] {
+  const normalizedQuery = query.trim().toLowerCase();
+  return items.filter((item) => {
+    if (
+      normalizedQuery &&
+      !item.title.toLowerCase().includes(normalizedQuery)
+    ) {
+      return false;
+    }
+    if (createdBy !== "anyone") {
+      const mine = isOwnedBy(item, me);
+      if (createdBy === "me" ? !mine : mine) return false;
+    }
+    if (status && item.rawStatus !== status) return false;
+    return true;
+  });
+}
diff --git a/packages/core/src/canvas/runArtifactSchemas.test.ts b/packages/core/src/canvas/runArtifactSchemas.test.ts
new file mode 100644
index 0000000000..e2db2fe283
--- /dev/null
+++ b/packages/core/src/canvas/runArtifactSchemas.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { parseRunPlans } from "./runArtifactSchemas";
+
+describe("parseRunPlans", () => {
+  it.each([
+    { name: "undefined", raw: undefined },
+    { name: "null", raw: null },
+    { name: "an object", raw: { artifacts: [] } },
+    { name: "a string", raw: "plan" },
+  ])("reads $name as no artifacts", ({ raw }) => {
+    expect(parseRunPlans(raw)).toEqual([]);
+  });
+
+  it("keeps only plan artifacts", () => {
+    const plans = parseRunPlans([
+      { id: "a", type: "plan", name: "Plan A" },
+      { id: "b", type: "upload", name: "internal blob" },
+    ]);
+    expect(plans).toEqual([{ id: "a", type: "plan", name: "Plan A" }]);
+  });
+
+  // One bad entry shouldn't take the Artifacts tab down with it.
+  it("drops entries that don't match the shape", () => {
+    const plans = parseRunPlans([
+      { id: 42, type: "plan" },
+      null,
+      "not an object",
+      { type: "plan", storage_path: "runs/1/plan.md" },
+    ]);
+    expect(plans).toEqual([{ type: "plan", storage_path: "runs/1/plan.md" }]);
+  });
+
+  it("ignores an artifact with no type", () => {
+    expect(parseRunPlans([{ id: "a", name: "mystery" }])).toEqual([]);
+  });
+});
diff --git a/packages/core/src/canvas/runArtifactSchemas.ts b/packages/core/src/canvas/runArtifactSchemas.ts
new file mode 100644
index 0000000000..8d95e86e32
--- /dev/null
+++ b/packages/core/src/canvas/runArtifactSchemas.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+export const runArtifactSchema = z.object({
+  id: z.string().optional(),
+  name: z.string().optional(),
+  type: z.string().optional(),
+  storage_path: z.string().optional(),
+});
+export type RunArtifact = z.infer<typeof runArtifactSchema>;
+
+export function parseRunPlans(raw: unknown): RunArtifact[] {
+  if (!Array.isArray(raw)) return [];
+  return raw.flatMap((entry) => {
+    const parsed = runArtifactSchema.safeParse(entry);
+    return parsed.success && parsed.data.type === "plan" ? [parsed.data] : [];
+  });
+}
diff --git a/packages/core/src/canvas/runStatus.test.ts b/packages/core/src/canvas/runStatus.test.ts
new file mode 100644
index 0000000000..7c19dd9715
--- /dev/null
+++ b/packages/core/src/canvas/runStatus.test.ts
@@ -0,0 +1,75 @@
+import type { TaskRunStatus } from "@posthog/shared/domain-types";
+import { describe, expect, it } from "vitest";
+import {
+  RUN_STATUS_FILTER_OPTIONS,
+  RUN_STATUS_LABELS,
+  runStatusLabel,
+  runStatusVariant,
+} from "./runStatus";
+
+const ALL_STATUSES: TaskRunStatus[] = [
+  "not_started",
+  "queued",
+  "in_progress",
+  "completed",
+  "failed",
+  "cancelled",
+];
+
+describe("runStatusLabel", () => {
+  it.each([
+    ["completed", "Ready"],
+    ["in_progress", "In progress"],
+    ["not_started", "Not started"],
+    ["queued", "Queued"],
+    ["failed", "Failed"],
+    ["cancelled", "Cancelled"],
+  ] as const)("labels %s as %s", (status, expected) => {
+    expect(runStatusLabel(status)).toBe(expected);
+  });
+
+  it.each([null, undefined])("returns null for %s", (status) => {
+    expect(runStatusLabel(status)).toBeNull();
+  });
+});
+
+describe("runStatusVariant", () => {
+  it.each([
+    ["completed", "success"],
+    ["failed", "destructive"],
+    ["in_progress", "info"],
+    ["queued", "default"],
+    ["not_started", "default"],
+    ["cancelled", "default"],
+  ] as const)("maps %s to %s", (status, expected) => {
+    expect(runStatusVariant(status)).toBe(expected);
+  });
+
+  it("falls back to default when there is no run", () => {
+    expect(runStatusVariant(null)).toBe("default");
+  });
+});
+
+describe("RUN_STATUS_FILTER_OPTIONS", () => {
+  it("leads with the any-status option", () => {
+    expect(RUN_STATUS_FILTER_OPTIONS[0]).toEqual({
+      value: null,
+      label: "Any status",
+    });
+  });
+
+  it("offers every run status, so none is silently unfilterable", () => {
+    const offered = RUN_STATUS_FILTER_OPTIONS.map((o) => o.value).filter(
+      (v) => v !== null,
+    );
+    expect(new Set(offered)).toEqual(new Set(ALL_STATUSES));
+  });
+
+  it("reuses the shared labels rather than restating them", () => {
+    for (const option of RUN_STATUS_FILTER_OPTIONS) {
+      if (option.value) {
+        expect(option.label).toBe(RUN_STATUS_LABELS[option.value]);
+      }
+    }
+  });
+});
diff --git a/packages/core/src/canvas/runStatus.ts b/packages/core/src/canvas/runStatus.ts
new file mode 100644
index 0000000000..f96bb33f98
--- /dev/null
+++ b/packages/core/src/canvas/runStatus.ts
@@ -0,0 +1,55 @@
+import type { TaskRunStatus } from "@posthog/shared/domain-types";
+
+export type RunStatusVariant =
+  | "default"
+  | "destructive"
+  | "info"
+  | "success"
+  | "warning";
+
+export const RUN_STATUS_LABELS: Record<TaskRunStatus, string> = {
+  not_started: "Not started",
+  queued: "Queued",
+  in_progress: "In progress",
+  completed: "Ready",
+  failed: "Failed",
+  cancelled: "Cancelled",
+};
+
+const RUN_STATUS_VARIANTS: Record<TaskRunStatus, RunStatusVariant> = {
+  not_started: "default",
+  queued: "default",
+  in_progress: "info",
+  completed: "success",
+  failed: "destructive",
+  cancelled: "default",
+};
+
+export function runStatusLabel(
+  status: TaskRunStatus | null | undefined,
+): string | null {
+  return status ? RUN_STATUS_LABELS[status] : null;
+}
+
+export function runStatusVariant(
+  status: TaskRunStatus | null | undefined,
+): RunStatusVariant {
+  return status ? RUN_STATUS_VARIANTS[status] : "default";
+}
+
+export const RUN_STATUS_FILTER_OPTIONS: readonly {
+  value: TaskRunStatus | null;
+  label: string;
+}[] = [
+  { value: null, label: "Any status" },
+  ...(
+    [
+      "not_started",
+      "queued",
+      "in_progress",
+      "completed",
+      "failed",
+      "cancelled",
+    ] as const
+  ).map((value) => ({ value, label: RUN_STATUS_LABELS[value] })),
+];
diff --git a/packages/core/src/command-center/grid.test.ts b/packages/core/src/command-center/grid.test.ts
index e1af10334a..947423a6e9 100644
--- a/packages/core/src/command-center/grid.test.ts
+++ b/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);
+  });
+});
diff --git a/packages/core/src/command-center/grid.ts b/packages/core/src/command-center/grid.ts
index 7d2e5f8e16..36eaf5fa75 100644
--- a/packages/core/src/command-center/grid.ts
+++ b/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 };
diff --git a/packages/shared/src/analytics-events.ts b/packages/shared/src/analytics-events.ts
index c6b6c42644..d7a40fd29e 100644
--- a/packages/shared/src/analytics-events.ts
+++ b/packages/shared/src/analytics-events.ts
@@ -254,10 +254,19 @@ export type SidebarNavItem =
   | "more"
   | "customize_sidebar";
 
+/** Which sidebar shell the click came from, so the two can be compared. */
+export type SidebarLayout = "code" | "channels";
+
 export interface SidebarNavItemClickedProperties {
   item: SidebarNavItem;
   /** True when the row was clicked inside the expanded More section. */
   in_more: boolean;
+  /**
+   * Which shell rendered the row. Both shells fire this event with the same
+   * item names, so without it the layouts are indistinguishable — and comparing
+   * them is the whole point of running one behind a flag.
+   */
+  layout?: SidebarLayout;
 }
 
 export interface SidebarCustomizedProperties {
@@ -872,6 +881,8 @@ export type ChannelsSurface =
   | "canvas"
   | "context"
   | "thread_panel"
+  // The task's tabbed Activity panel (new channels layout).
+  | "activity_panel"
   | "activity";
 
 export type ChannelActionType =
@@ -905,7 +916,8 @@ export type ChannelActionType =
   | "mention_member"
   | "view_activity"
   | "open_mention"
-  | "canvas_mode_toggle";
+  | "canvas_mode_toggle"
+  | "activity_tab_change";
 
 export interface ChannelActionProperties {
   action_type: ChannelActionType;
@@ -924,6 +936,8 @@ export interface ChannelActionProperties {
   suggestion_label?: string;
   /** For canvas_mode_toggle: whether canvas mode is being armed. */
   armed?: boolean;
+  /** For activity_tab_change: the tab landed on. */
+  tab?: string;
   /** Whether the underlying mutation resolved successfully. */
   success?: boolean;
 }
@@ -991,6 +1005,8 @@ export interface ChannelsSpaceViewedProperties {
   /** Total channels visible when the space mounts. */
   channel_count: number;
   starred_count: number;
+  /** Which shell the space was entered through. */
+  layout?: SidebarLayout;
 }
 
 // Subscription / billing events
diff --git a/packages/shared/src/flags.ts b/packages/shared/src/flags.ts
index cab52efaec..81c9442141 100644
--- a/packages/shared/src/flags.ts
+++ b/packages/shared/src/flags.ts
@@ -14,6 +14,12 @@ export const DISCOVERY_RUN_FLAG = "posthog-code-discovery-run";
 // Gates the entire canvas feature: the app rail's Channels space, the /website
 // routes, channels and dashboards.
 export const PROJECT_BLUEBIRD_FLAG = "project-bluebird";
+/**
+ * Gates the new channels layout (channel-scoped sidebar + task Activity panel).
+ * Off keeps the previous experience and its "Enable channels" toggle. Requires
+ * project-bluebird. The key predates the rename, matching the live flag.
+ */
+export const CHANNELS_LAYOUT_FLAG = "code-spaces-layout";
 // Gates the Loops feature: the sidebar Loops space and the per-channel Loops tab.
 export const LOOPS_FLAG = "loops";
 export const TASKS_PREWARM_SANDBOX_FLAG = "tasks-prewarm-sandbox";
diff --git a/packages/ui/src/features/browser-tabs/TabShortcutFallback.test.tsx b/packages/ui/src/features/browser-tabs/TabShortcutFallback.test.tsx
new file mode 100644
index 0000000000..4151943bb4
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/packages/ui/src/features/browser-tabs/TabShortcutFallback.tsx b/packages/ui/src/features/browser-tabs/TabShortcutFallback.tsx
new file mode 100644
index 0000000000..5ed7820766
--- /dev/null
+++ b/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;
+}
diff --git a/packages/ui/src/features/canvas/components/ActivityPanel.tsx b/packages/ui/src/features/canvas/components/ActivityPanel.tsx
new file mode 100644
index 0000000000..06d075f578
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ActivityPanel.tsx
@@ -0,0 +1,265 @@
+import { CaretRightIcon } from "@phosphor-icons/react";
+import { Button, cn, Tabs, TabsList, TabsTrigger } from "@posthog/quill";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import type { Task } from "@posthog/shared/domain-types";
+import { ActivityTimeline } from "@posthog/ui/features/canvas/components/ActivityTimeline";
+import { TaskCard } from "@posthog/ui/features/canvas/components/ChannelFeedView";
+import { TaskArtifactsList } from "@posthog/ui/features/canvas/components/TaskArtifactsList";
+import {
+  AgentStatusLine,
+  ThreadLoadingState,
+  ThreadPanelHeader,
+  ThreadReplyComposer,
+  ThreadTimeline,
+} from "@posthog/ui/features/canvas/components/ThreadPanel";
+import { useThreadConversation } from "@posthog/ui/features/canvas/hooks/useThreadConversation";
+import { buildConversationItems } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
+import { track } from "@posthog/ui/shell/analytics";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type ActivityTab = "timeline" | "artifacts" | "comments";
+
+const ACTIVITY_TABS: readonly { key: ActivityTab; label: string }[] = [
+  { key: "timeline", label: "Timeline" },
+  { key: "artifacts", label: "Artifacts" },
+  { key: "comments", label: "Comments" },
+] as const;
+
+const TABS_WITH_COMPOSER: ReadonlySet<ActivityTab> = new Set([
+  "timeline",
+  "comments",
+]);
+
+const TIMESTAMP_END_CLASS =
+  "[&_[data-slot=thread-item-timestamp]]:ml-auto [&_[data-slot=thread-item-timestamp]]:shrink-0 [&_[data-slot=thread-item-timestamp]]:pl-2";
+
+function ActivityTabsRow({
+  tab,
+  onTabChange,
+}: {
+  tab: ActivityTab;
+  onTabChange: (tab: ActivityTab) => void;
+}) {
+  return (
+    <div className="shrink-0 border-border border-b px-2 py-1.5">
+      <Tabs
+        value={tab}
+        onValueChange={(value: string) => onTabChange(value as ActivityTab)}
+      >
+        <TabsList variant="line" className="h-auto gap-0.5">
+          {ACTIVITY_TABS.map((t) => (
+            <TabsTrigger key={t.key} value={t.key} className="px-2.5 py-1">
+              <span className="font-medium text-[13px]">{t.label}</span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}
+
+function ActivityConversation({
+  task,
+  channelId,
+  onClose,
+  onToggleCollapsed,
+  onOpenFull,
+  showTaskSummary,
+}: {
+  task: Task;
+  channelId: string;
+  onClose?: () => void;
+  onToggleCollapsed?: () => void;
+  onOpenFull?: () => void;
+  showTaskSummary: boolean;
+}) {
+  const taskId = task.id;
+  const {
+    timeline,
+    agentStatus,
+    events,
+    isPromptPending,
+    isReady,
+    members,
+    currentUser,
+    isTaskAuthor,
+    canForward,
+    draft,
+    setDraft,
+    isSubmitDisabled,
+    submit,
+    sendMessageToAgent,
+    deleteMessage,
+    onMentionInsert,
+  } = useThreadConversation(task, { surface: "activity_panel" });
+
+  const [tab, setTab] = useState<ActivityTab>("timeline");
+  const handleTabChange = useCallback(
+    (next: ActivityTab) => {
+      setTab(next);
+      track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+        action_type: "activity_tab_change",
+        surface: "activity_panel",
+        task_id: taskId,
+        tab: next,
+      });
+    },
+    [taskId],
+  );
+
+  const commentRows = useMemo(
+    () => timeline.filter((row) => row.kind === "human"),
+    [timeline],
+  );
+  const conversationItems = useMemo(
+    () =>
+      tab === "timeline"
+        ? buildConversationItems(events, isPromptPending).items
+        : [],
+    [tab, events, isPromptPending],
+  );
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when rendered thread content changes
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, [timeline, events.length, agentStatus?.phase, tab]);
+
+  const showComposer = TABS_WITH_COMPOSER.has(tab);
+
+  const body = () => {
+    if (tab === "artifacts") {
+      return <TaskArtifactsList task={task} timeline={timeline} />;
+    }
+    if (tab === "comments") {
+      return (
+        <ThreadTimeline
+          timeline={commentRows}
+          isReady={isReady}
+          currentUserUuid={currentUser?.uuid}
+          currentUserEmail={currentUser?.email}
+          isTaskAuthor={isTaskAuthor}
+          canForward={canForward}
+          onSendToAgent={sendMessageToAgent}
+          onDelete={deleteMessage}
+        />
+      );
+    }
+    if (!isReady) return <ThreadLoadingState />;
+    return (
+      <ActivityTimeline
+        task={task}
+        timeline={timeline}
+        conversationItems={conversationItems}
+        currentUserUuid={currentUser?.uuid}
+        currentUserEmail={currentUser?.email}
+        isTaskAuthor={isTaskAuthor}
+        canForward={canForward}
+        onSendToAgent={sendMessageToAgent}
+        onDelete={deleteMessage}
+      />
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex h-full min-w-0 flex-col bg-gray-1",
+        TIMESTAMP_END_CLASS,
+      )}
+    >
+      <ThreadPanelHeader
+        title="Activity"
+        onOpenFull={onOpenFull}
+        onToggleCollapsed={onToggleCollapsed}
+        onClose={onClose}
+      />
+      <ActivityTabsRow tab={tab} onTabChange={handleTabChange} />
+
+      {showTaskSummary && (
+        <div className="z-10 px-2">
+          <TaskCard task={task} channelId={channelId} inThread />
+        </div>
+      )}
+      <div
+        ref={scrollRef}
+        aria-busy={!isReady}
+        className="flex-1 overflow-y-auto"
+      >
+        {body()}
+      </div>
+
+      {showComposer && agentStatus && <AgentStatusLine status={agentStatus} />}
+
+      {showComposer && (
+        <ThreadReplyComposer
+          draft={draft}
+          onDraftChange={setDraft}
+          onSubmit={submit}
+          members={members}
+          allowAgentMention={isTaskAuthor && canForward}
+          onMentionInsert={onMentionInsert}
+          disabled={isSubmitDisabled}
+        />
+      )}
+    </div>
+  );
+}
+
+export function ActivityPanel({
+  taskId,
+  channelId,
+  task: taskProp,
+  onClose,
+  collapsed,
+  onToggleCollapsed,
+  onOpenFull,
+  showTaskSummary = true,
+}: {
+  taskId: string;
+  channelId: string;
+  task?: Task;
+  onClose?: () => void;
+  collapsed?: boolean;
+  onToggleCollapsed?: () => void;
+  onOpenFull?: () => void;
+  showTaskSummary?: boolean;
+}) {
+  const { data: fetchedTask } = useQuery({
+    ...taskDetailQuery(taskId),
+    enabled: !taskProp && !collapsed,
+  });
+  const task = taskProp ?? fetchedTask;
+
+  if (collapsed) {
+    return (
+      <div className="flex h-full w-9 flex-col items-center border-border border-l bg-gray-1 py-2">
+        <Button
+          variant="default"
+          size="icon-sm"
+          aria-label="Expand activity"
+          onClick={onToggleCollapsed}
+        >
+          <CaretRightIcon size={14} className="rotate-180" />
+        </Button>
+      </div>
+    );
+  }
+
+  if (!task) {
+    return <ThreadLoadingState />;
+  }
+
+  return (
+    <ActivityConversation
+      task={task}
+      channelId={channelId}
+      onClose={onClose}
+      onToggleCollapsed={onToggleCollapsed}
+      onOpenFull={onOpenFull}
+      showTaskSummary={showTaskSummary}
+    />
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ActivityTimeline.tsx b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
new file mode 100644
index 0000000000..482aa35c50
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ActivityTimeline.tsx
@@ -0,0 +1,262 @@
+import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
+import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
+import {
+  ThreadItem,
+  ThreadItemAuthor,
+  ThreadItemBody,
+  ThreadItemContent,
+  ThreadItemGroup,
+  ThreadItemGutter,
+  ThreadItemHeader,
+} from "@posthog/quill";
+import type {
+  Task,
+  TaskThreadMessage,
+  UserBasic,
+} from "@posthog/shared/domain-types";
+import { isTerminalStatus } from "@posthog/shared/domain-types";
+import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
+import {
+  ThreadArtifactRow,
+  ThreadMessageRow,
+} from "@posthog/ui/features/canvas/components/ThreadPanel";
+import { ThreadTimestamp } from "@posthog/ui/features/canvas/components/ThreadTimestamp";
+import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
+import type { buildConversationItems } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import { Fragment, type ReactNode, useMemo } from "react";
+
+type ConversationItem = ReturnType<
+  typeof buildConversationItems
+>["items"][number];
+
+function ActivityEventRow({
+  node,
+  title,
+  action,
+  timestamp,
+}: {
+  node: ReactNode;
+  title: string;
+  action?: string;
+  timestamp: string;
+}) {
+  return (
+    <div className="flex items-center gap-2 py-1.5 pr-2 pl-2">
+      <div className="flex w-10 shrink-0 justify-end">
+        <div className="flex w-[2.35rem] justify-center">{node}</div>
+      </div>
+      <span className="min-w-0 truncate text-[13px]">
+        <span className="font-medium text-gray-12">{title}</span>
+        {action && <span className="text-muted-foreground"> {action}</span>}
+      </span>
+      <ThreadTimestamp dateTime={timestamp} />
+    </div>
+  );
+}
+
+function EventNode({ icon }: { icon: ReactNode }) {
+  return (
+    <span className="relative z-10 flex size-6 items-center justify-center rounded-full bg-gray-3">
+      {icon}
+    </span>
+  );
+}
+
+function UserMessageRow({
+  author,
+  content,
+  timestamp,
+}: {
+  author?: UserBasic | null;
+  content: string;
+  timestamp: string;
+}) {
+  return (
+    <ThreadItem>
+      <ThreadItemGutter>
+        <UserAvatar user={author} size="lg" className="sticky top-2" />
+      </ThreadItemGutter>
+      <ThreadItemContent>
+        <ThreadItemHeader>
+          <ThreadItemAuthor>
+            {author ? userDisplayName(author) : "You"}
+          </ThreadItemAuthor>
+          <ThreadTimestamp dateTime={timestamp} />
+        </ThreadItemHeader>
+        <ThreadItemBody>
+          <span className="line-clamp-4 whitespace-pre-wrap break-words text-[13px]">
+            {content}
+          </span>
+        </ThreadItemBody>
+      </ThreadItemContent>
+    </ThreadItem>
+  );
+}
+
+export function ActivityTimeline({
+  task,
+  timeline,
+  conversationItems,
+  currentUserUuid,
+  currentUserEmail,
+  isTaskAuthor,
+  canForward,
+  onSendToAgent,
+  onDelete,
+}: {
+  task: Task;
+  timeline: ThreadTimelineRow<TaskThreadMessage>[];
+  conversationItems: ConversationItem[];
+  currentUserUuid?: string;
+  currentUserEmail?: string | null;
+  isTaskAuthor: boolean;
+  canForward: boolean;
+  onSendToAgent: (messageId: string) => void;
+  onDelete: (messageId: string) => void;
+}) {
+  const nodes = useMemo(() => {
+    const entries: { key: string; ts: number; node: ReactNode }[] = [];
+    const createdTs = Date.parse(task.created_at) || 0;
+    entries.push({
+      key: "task-created",
+      ts: createdTs,
+      node: (
+        <ActivityEventRow
+          node={
+            <UserAvatar
+              user={task.created_by}
+              size="sm"
+              className="relative z-10"
+            />
+          }
+          title={task.created_by ? userDisplayName(task.created_by) : "Someone"}
+          action="created this task"
+          timestamp={task.created_at}
+        />
+      ),
+    });
+
+    for (const item of conversationItems) {
+      if (item.type !== "user_message") continue;
+      entries.push({
+        key: `user-message-${item.id}`,
+        ts: item.timestamp,
+        node: (
+          <UserMessageRow
+            author={task.created_by}
+            content={item.content}
+            timestamp={new Date(item.timestamp).toISOString()}
+          />
+        ),
+      });
+    }
+
+    let hasPrArtifact = false;
+    for (const row of timeline) {
+      if (row.kind === "artifact" && row.artifact.kind === "pr") {
+        hasPrArtifact = true;
+      }
+      entries.push({
+        key: `thread-${row.message.id}`,
+        ts: row.timestamp,
+        node:
+          row.kind === "human" ? (
+            <ThreadMessageRow
+              message={row.message}
+              isTaskAuthor={isTaskAuthor}
+              isOwnMessage={
+                !!currentUserUuid &&
+                currentUserUuid === row.message.author?.uuid
+              }
+              currentUserEmail={currentUserEmail}
+              canForward={canForward}
+              onSendToAgent={() => onSendToAgent(row.message.id)}
+              onDelete={() => onDelete(row.message.id)}
+            />
+          ) : (
+            <ThreadArtifactRow
+              artifact={row.artifact}
+              createdAt={row.message.created_at}
+            />
+          ),
+      });
+    }
+
+    const updatedTs = Date.parse(task.updated_at) || createdTs;
+    const outputPr = task.latest_run?.output?.pr_url;
+    if (typeof outputPr === "string" && outputPr && !hasPrArtifact) {
+      entries.push({
+        key: "output-pr",
+        ts: updatedTs,
+        node: (
+          <ThreadArtifactRow
+            artifact={{ kind: "pr", url: outputPr }}
+            createdAt={task.updated_at}
+          />
+        ),
+      });
+    }
+
+    const runStatus = task.latest_run?.status;
+    if (runStatus && isTerminalStatus(runStatus)) {
+      const succeeded = runStatus === "completed";
+      entries.push({
+        key: "run-status",
+        ts: updatedTs + 1,
+        node: (
+          <ActivityEventRow
+            node={
+              <EventNode
+                icon={
+                  succeeded ? (
+                    <CheckCircleIcon
+                      size={14}
+                      weight="fill"
+                      className="text-green-9"
+                    />
+                  ) : (
+                    <XCircleIcon
+                      size={14}
+                      weight="fill"
+                      className="text-red-9"
+                    />
+                  )
+                }
+              />
+            }
+            title={`Task ${runStatus.replace(/_/g, " ")}`}
+            timestamp={task.updated_at}
+          />
+        ),
+      });
+    }
+
+    return entries.sort((a, b) => a.ts - b.ts);
+  }, [
+    conversationItems,
+    timeline,
+    task,
+    isTaskAuthor,
+    canForward,
+    currentUserUuid,
+    currentUserEmail,
+    onSendToAgent,
+    onDelete,
+  ]);
+
+  return (
+    <div className="relative">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute top-4 bottom-4 left-[1.825rem] w-px bg-border"
+      />
+      <div className="relative z-10">
+        <ThreadItemGroup>
+          {nodes.map((entry) => (
+            <Fragment key={entry.key}>{entry.node}</Fragment>
+          ))}
+        </ThreadItemGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx b/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx
index 6644ac1ddb..763d156e32 100644
--- a/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx
+++ b/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}
diff --git a/packages/ui/src/features/canvas/components/ChannelFeedView.tsx b/packages/ui/src/features/canvas/components/ChannelFeedView.tsx
index 2b1878b44f..83f402e777 100644
--- a/packages/ui/src/features/canvas/components/ChannelFeedView.tsx
+++ b/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>
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ChannelHeader.tsx b/packages/ui/src/features/canvas/components/ChannelHeader.tsx
index bc08328a46..7b954d61bb 100644
--- a/packages/ui/src/features/canvas/components/ChannelHeader.tsx
+++ b/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>
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ChannelHotkeys.test.tsx b/packages/ui/src/features/canvas/components/ChannelHotkeys.test.tsx
new file mode 100644
index 0000000000..e4e7cfe547
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/ChannelHotkeys.tsx b/packages/ui/src/features/canvas/components/ChannelHotkeys.tsx
new file mode 100644
index 0000000000..16bfb4a0fa
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelHotkeys.tsx
@@ -0,0 +1,53 @@
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
+import { useStarredChannelSlots } from "@posthog/ui/features/canvas/hooks/useStarredChannelSlots";
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
+import { navigateToChannel } from "@posthog/ui/router/navigationBridge";
+import { track } from "@posthog/ui/shell/analytics";
+import { useHotkeys } from "react-hotkeys-hook";
+
+/**
+ * Renders nothing — the unconditional owner of ⌘1-9 (switch channel) under the
+ * channels layout.
+ *
+ * Mounted from the root rather than from the switcher: the switcher only renders
+ * once a channel is already scoped, so binding there left the keys with no owner
+ * exactly when the user most needs them (channel list still loading, or failed).
+ * GlobalEventHandlers yields SWITCH_TASK to this whenever the layout is on, so
+ * there must always be someone listening.
+ */
+export function ChannelHotkeys() {
+  const channelsLayout = useChannelsLayout();
+  const { slots } = useStarredChannelSlots();
+  const setCurrentChannel = useCurrentChannelStore((s) => s.setCurrentChannel);
+
+  useHotkeys(
+    SHORTCUTS.SWITCH_STARRED_CHANNEL,
+    (event, handler) => {
+      // Same ctrl guard as SWITCH_TASK: plain ctrl+N is the editor-panel tab
+      // switcher (SWITCH_TAB), so leave ctrl-only presses to it.
+      if (event.ctrlKey && !event.metaKey) return;
+      const slot = Number.parseInt(handler.keys?.[0] ?? "", 10);
+      if (Number.isNaN(slot)) return;
+      const channel = slots[slot - 1];
+      if (!channel) return;
+      setCurrentChannel(channel.id);
+      navigateToChannel(channel.id);
+      track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+        action_type: "open_channel",
+        surface: "sidebar",
+        channel_id: channel.id,
+      });
+    },
+    {
+      enabled: channelsLayout,
+      enableOnFormTags: true,
+      enableOnContentEditable: true,
+      preventDefault: true,
+    },
+    [slots, setCurrentChannel],
+  );
+
+  return null;
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelItemRow.tsx b/packages/ui/src/features/canvas/components/ChannelItemRow.tsx
new file mode 100644
index 0000000000..b19beca7da
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelItemRow.tsx
@@ -0,0 +1,174 @@
+import { PreviewCard } from "@base-ui/react/preview-card";
+import { Archive, FileTextIcon, PushPin } from "@phosphor-icons/react";
+import type { ChannelItemModel } from "@posthog/core/canvas/channelItems";
+import {
+  runStatusLabel,
+  runStatusVariant,
+} from "@posthog/core/canvas/runStatus";
+import { Avatar, AvatarFallback, Badge } from "@posthog/quill";
+import { formatRelativeTimeShort } from "@posthog/shared";
+import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
+import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
+import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
+import { SidebarItem } from "@posthog/ui/features/sidebar/components/SidebarItem";
+import { NestedButton } from "@posthog/ui/primitives/NestedButton";
+import { Tooltip } from "@posthog/ui/primitives/Tooltip";
+import type { ReactNode } from "react";
+
+/**
+ * What a row can do. One object per channel rather than closures per item, so
+ * the item list stays plain data and doesn't rebuild on every navigation.
+ */
+export interface ChannelItemActions {
+  open: (item: ChannelItemModel) => void;
+  togglePin: (item: ChannelItemModel) => void;
+  archive: (item: ChannelItemModel) => void;
+}
+
+// The channel sidebar's own chrome. Deliberately not shared with the Code
+// sidebar's TaskItem: that one is still on the absolute gray scale, while these
+// rows use the theme's fill/foreground tokens.
+const HOVER_ACTION_CLASS =
+  "flex h-5 w-5 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-fill-hover hover:text-foreground";
+const HOVER_TOOLBAR_CLASS =
+  "hidden shrink-0 items-center gap-0.5 group-hover:flex";
+const TIMESTAMP_CLASS =
+  "shrink-0 text-[11px] text-muted-foreground group-hover:hidden";
+
+function itemIcon(item: ChannelItemModel): ReactNode {
+  return item.kind === "canvas" ? (
+    // Matches the schema's own default for boards saved before templating.
+    iconForTemplate(item.templateId ?? "freeform", {
+      size: 15,
+      className: "text-violet-9",
+    })
+  ) : (
+    <FileTextIcon size={15} className="text-blue-9" />
+  );
+}
+
+function authorLabel(item: ChannelItemModel): string | null {
+  if (item.authorUser) return userDisplayName(item.authorUser);
+  return item.authorName;
+}
+
+export function ChannelItemRow({
+  item,
+  isActive,
+  actions,
+}: {
+  item: ChannelItemModel;
+  isActive: boolean;
+  actions: ChannelItemActions;
+}) {
+  const icon = itemIcon(item);
+  const statusLabel = runStatusLabel(item.rawStatus);
+  const author = authorLabel(item);
+
+  return (
+    <PreviewCard.Root>
+      <PreviewCard.Trigger
+        delay={400}
+        closeDelay={100}
+        render={
+          <div className="min-w-0">
+            <SidebarItem
+              depth={0}
+              icon={icon}
+              // A non-string label opts out of SidebarItem's truncation tooltip.
+              label={<span>{item.title}</span>}
+              isActive={isActive}
+              onClick={() => actions.open(item)}
+              endContent={
+                <>
+                  <span className={TIMESTAMP_CLASS}>
+                    {formatRelativeTimeShort(item.ts)}
+                  </span>
+                  <span className={HOVER_TOOLBAR_CLASS}>
+                    <Tooltip content={item.pinned ? "Unpin" : "Pin"} side="top">
+                      <NestedButton
+                        aria-label={item.pinned ? "Unpin" : "Pin"}
+                        className={HOVER_ACTION_CLASS}
+                        onActivate={() => actions.togglePin(item)}
+                      >
+                        <PushPin
+                          size={12}
+                          weight={item.pinned ? "fill" : "regular"}
+                        />
+                      </NestedButton>
+                    </Tooltip>
+                    {/* Canvases can't be archived. */}
+                    {item.kind === "task" && (
+                      <Tooltip content="Archive task" side="top">
+                        <NestedButton
+                          aria-label="Archive task"
+                          className={HOVER_ACTION_CLASS}
+                          onActivate={() => actions.archive(item)}
+                        >
+                          <Archive size={12} />
+                        </NestedButton>
+                      </Tooltip>
+                    )}
+                  </span>
+                </>
+              }
+            />
+          </div>
+        }
+      />
+      <PreviewCard.Portal>
+        <PreviewCard.Positioner
+          side="right"
+          align="start"
+          sideOffset={10}
+          className="z-50"
+        >
+          <PreviewCard.Popup className="w-64 rounded-lg border border-border bg-background p-3 shadow-lg outline-none">
+            <div className="flex items-start gap-2.5">
+              <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
+                {icon}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="break-words font-medium text-[13px] text-foreground leading-snug">
+                  {item.title}
+                </p>
+                <p className="mt-0.5 text-[11px] text-muted-foreground">
+                  {item.kind === "canvas" ? "Canvas" : "Task"} · updated{" "}
+                  {formatRelativeTimeShort(item.ts)}
+                </p>
+              </div>
+            </div>
+            {statusLabel && (
+              <div className="mt-2">
+                <Badge variant={runStatusVariant(item.rawStatus)}>
+                  {statusLabel}
+                </Badge>
+              </div>
+            )}
+            {author && (
+              <div className="mt-2.5 flex items-center gap-2 border-border border-t pt-2.5">
+                {item.authorUser ? (
+                  <UserAvatar user={item.authorUser} />
+                ) : (
+                  <Avatar>
+                    <AvatarFallback>
+                      {author.charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                )}
+                <div className="min-w-0">
+                  <p className="truncate text-[12px] text-foreground">
+                    {author}
+                  </p>
+                  <p className="text-[10px] text-muted-foreground">
+                    Created by
+                  </p>
+                </div>
+              </div>
+            )}
+          </PreviewCard.Popup>
+        </PreviewCard.Positioner>
+      </PreviewCard.Portal>
+    </PreviewCard.Root>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelNav.tsx b/packages/ui/src/features/canvas/components/ChannelNav.tsx
new file mode 100644
index 0000000000..c6f7181a72
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelNav.tsx
@@ -0,0 +1,131 @@
+import { BellIcon, EnvelopeSimple, Lightning } from "@phosphor-icons/react";
+import { countUnseenActivity } from "@posthog/core/canvas/mentionActivity";
+import { cn } from "@posthog/quill";
+import {
+  ANALYTICS_EVENTS,
+  type SidebarNavItem,
+} from "@posthog/shared/analytics-events";
+import { useMentionActivity } from "@posthog/ui/features/canvas/hooks/useMentionActivity";
+import { useActivitySeenStore } from "@posthog/ui/features/canvas/stores/activitySeenStore";
+import {
+  formatHotkey,
+  SHORTCUTS,
+} from "@posthog/ui/features/command/keyboard-shortcuts";
+import { useCommandCenterActiveCount } from "@posthog/ui/features/command-center/useCommandCenterActiveCount";
+import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
+import { CountBadge } from "@posthog/ui/primitives/CountBadge";
+import { Tooltip } from "@posthog/ui/primitives/Tooltip";
+import {
+  navigateToActivity,
+  navigateToInbox,
+  navigateToWebsiteCommandCenter,
+} from "@posthog/ui/router/navigationBridge";
+import { useAppView } from "@posthog/ui/router/useAppView";
+import { track } from "@posthog/ui/shell/analytics";
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+
+const INBOX_REFETCH_INTERVAL_MS = 60_000;
+
+const ICON_BADGE_CLASS =
+  "-top-1 -right-1 absolute h-3.5 min-w-3.5 w-auto px-1 font-semibold text-[9px] ring-2 ring-chrome";
+
+function NavIcon({
+  icon,
+  label,
+  shortcut,
+  isActive,
+  onClick,
+  badge,
+}: {
+  icon: ReactNode;
+  label: string;
+  shortcut?: string;
+  isActive: boolean;
+  onClick: () => void;
+  badge?: ReactNode;
+}) {
+  return (
+    <Tooltip content={label} shortcut={shortcut} side="bottom">
+      <button
+        type="button"
+        aria-label={label}
+        onClick={onClick}
+        className={cn(
+          "relative flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors duration-100",
+          isActive
+            ? "bg-fill-selected text-foreground"
+            : "text-muted-foreground hover:bg-fill-hover hover:text-foreground",
+        )}
+      >
+        {icon}
+        {badge}
+      </button>
+    </Tooltip>
+  );
+}
+
+export function ChannelNav() {
+  const view = useAppView();
+
+  const { counts } = useInboxAllReports({
+    ignoreFilters: true,
+    refetchIntervalMs: INBOX_REFETCH_INTERVAL_MS,
+  });
+  const { items: activityItems } = useMentionActivity();
+  const lastSeenAt = useActivitySeenStore((s) => s.lastSeenAt);
+  const unseenActivity = useMemo(
+    () => countUnseenActivity(activityItems, lastSeenAt),
+    [activityItems, lastSeenAt],
+  );
+  const commandCenterCount = useCommandCenterActiveCount();
+
+  const withTrack = (item: SidebarNavItem, action: () => void) => () => {
+    track(ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED, {
+      item,
+      in_more: false,
+      layout: "channels",
+    });
+    action();
+  };
+
+  const isActivity = view.type === "activity";
+  const isCommandCenter = view.type === "command-center";
+
+  return (
+    <div className="flex shrink-0 gap-2 px-2 pt-2 pb-2">
+      <NavIcon
+        icon={<EnvelopeSimple size={16} />}
+        label="Inbox"
+        shortcut={formatHotkey(SHORTCUTS.INBOX)}
+        isActive={view.type === "inbox"}
+        onClick={withTrack("inbox", navigateToInbox)}
+        badge={<CountBadge count={counts.pulls} className={ICON_BADGE_CLASS} />}
+      />
+      <NavIcon
+        icon={<BellIcon size={16} weight={isActivity ? "fill" : "regular"} />}
+        label="Activity"
+        isActive={isActivity}
+        onClick={withTrack("activity", navigateToActivity)}
+        badge={
+          <CountBadge count={unseenActivity} className={ICON_BADGE_CLASS} />
+        }
+      />
+      <NavIcon
+        icon={
+          <Lightning size={16} weight={isCommandCenter ? "fill" : "regular"} />
+        }
+        label="Command Center"
+        isActive={isCommandCenter}
+        onClick={withTrack("command_center", navigateToWebsiteCommandCenter)}
+        badge={
+          <CountBadge
+            count={commandCenterCount}
+            tone="neutral"
+            className={ICON_BADGE_CLASS}
+          />
+        }
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelSidebar.tsx b/packages/ui/src/features/canvas/components/ChannelSidebar.tsx
new file mode 100644
index 0000000000..bf8a323c9d
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelSidebar.tsx
@@ -0,0 +1,382 @@
+import {
+  BookOpenTextIcon,
+  ChatsCircleIcon,
+  FunnelSimple as FunnelSimpleIcon,
+  MagnifyingGlass,
+  PackageIcon,
+  RepeatIcon,
+} from "@phosphor-icons/react";
+import type { CreatedByFilter } from "@posthog/core/canvas/channelItems";
+import { filterChannelItems } from "@posthog/core/canvas/channelItems";
+import { RUN_STATUS_FILTER_OPTIONS } from "@posthog/core/canvas/runStatus";
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Input,
+  MenuLabel,
+  Skeleton,
+} from "@posthog/quill";
+import { LOOPS_FLAG } from "@posthog/shared";
+import type { TaskRunStatus } from "@posthog/shared/domain-types";
+import { ChannelItemRow } from "@posthog/ui/features/canvas/components/ChannelItemRow";
+import { ChannelSwitcher } from "@posthog/ui/features/canvas/components/ChannelSwitcher";
+import { NewTaskFab } from "@posthog/ui/features/canvas/components/NewTaskFab";
+import { useChannelItems } from "@posthog/ui/features/canvas/hooks/useChannelItems";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+import { SidebarItem } from "@posthog/ui/features/sidebar/components/SidebarItem";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { type ReactNode, useMemo, useState } from "react";
+
+const CREATED_BY_OPTIONS: readonly { value: CreatedByFilter; label: string }[] =
+  [
+    { value: "anyone", label: "Anyone" },
+    { value: "me", label: "Me" },
+    { value: "others", label: "Other people" },
+  ] as const;
+
+const HEADER_ICON_BUTTON_CLASS =
+  "flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-fill-hover hover:text-foreground";
+
+const cnHeaderButton = (active: boolean) =>
+  cn(HEADER_ICON_BUTTON_CLASS, active && "bg-fill-selected text-foreground");
+
+const RECENTS_CAP = 30;
+
+function RecentSectionHeader({
+  searchOpen,
+  onToggleSearch,
+  query,
+  onQueryChange,
+  createdByFilter,
+  onCreatedByChange,
+  statusFilter,
+  onStatusChange,
+  filtersActive,
+}: {
+  searchOpen: boolean;
+  onToggleSearch: () => void;
+  query: string;
+  onQueryChange: (value: string) => void;
+  createdByFilter: CreatedByFilter;
+  onCreatedByChange: (value: CreatedByFilter) => void;
+  statusFilter: TaskRunStatus | null;
+  onStatusChange: (value: TaskRunStatus | null) => void;
+  filtersActive: boolean;
+}) {
+  return (
+    <>
+      <div className="flex items-center gap-0.5 pr-1">
+        <div className="min-w-0 flex-1">
+          <MenuLabel>Recent</MenuLabel>
+        </div>
+        <button
+          type="button"
+          aria-label="Search"
+          aria-pressed={searchOpen}
+          onClick={onToggleSearch}
+          className={cnHeaderButton(searchOpen)}
+        >
+          <MagnifyingGlass size={12} />
+        </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <button
+                type="button"
+                aria-label="Filter"
+                className={cnHeaderButton(filtersActive)}
+              >
+                <FunnelSimpleIcon size={12} />
+              </button>
+            }
+          />
+          <DropdownMenuContent
+            align="end"
+            side="bottom"
+            sideOffset={6}
+            className="min-w-fit"
+          >
+            <MenuLabel>Created by</MenuLabel>
+            <DropdownMenuRadioGroup
+              value={createdByFilter}
+              onValueChange={(value) =>
+                onCreatedByChange(value as CreatedByFilter)
+              }
+            >
+              {CREATED_BY_OPTIONS.map((option) => (
+                <DropdownMenuRadioItem key={option.value} value={option.value}>
+                  {option.label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+            <DropdownMenuSeparator />
+            <MenuLabel>Status</MenuLabel>
+            <DropdownMenuRadioGroup
+              value={statusFilter ?? "any"}
+              onValueChange={(value) =>
+                onStatusChange(
+                  value === "any" ? null : (value as TaskRunStatus),
+                )
+              }
+            >
+              {RUN_STATUS_FILTER_OPTIONS.map((option) => (
+                <DropdownMenuRadioItem
+                  key={option.value ?? "any"}
+                  value={option.value ?? "any"}
+                >
+                  {option.label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      {searchOpen && (
+        <div className="px-1 pb-1">
+          <Input
+            autoFocus
+            value={query}
+            onChange={(event) => onQueryChange(event.target.value)}
+            placeholder="Search…"
+            aria-label="Search recent items"
+            className="h-6 text-[12px]"
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+// Varied widths so the loading state reads as the list it becomes.
+const SKELETON_ROW_WIDTHS = [
+  "w-3/5",
+  "w-4/5",
+  "w-2/5",
+  "w-3/4",
+  "w-1/2",
+  "w-2/3",
+] as const;
+
+function ChannelItemsSkeleton() {
+  return (
+    <div aria-hidden className="flex flex-col gap-px">
+      <Skeleton className="mx-2 mt-1.5 mb-1 h-3 w-12" />
+      {SKELETON_ROW_WIDTHS.map((width) => (
+        <div key={width} className="flex items-center gap-2 px-2 py-1.5">
+          <Skeleton className="size-4 shrink-0 rounded" />
+          <Skeleton className={cn("h-3.5", width)} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The sidebar body while a channel is active: the switcher, the channel's
+ * sections, then its pinned and recent tasks & canvases.
+ */
+export function ChannelSidebar({ channelId }: { channelId: string }) {
+  const navigate = useNavigate();
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const loopsEnabled = useFeatureFlag(LOOPS_FLAG, import.meta.env.DEV);
+
+  const { items, actions, me, isLoading, channelMissing } =
+    useChannelItems(channelId);
+
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [createdByFilter, setCreatedByFilter] =
+    useState<CreatedByFilter>("anyone");
+  const [statusFilter, setStatusFilter] = useState<TaskRunStatus | null>(null);
+  const filtersActive = createdByFilter !== "anyone" || statusFilter !== null;
+
+  const base = `/website/${channelId}`;
+  // Activeness is a key comparison rather than a flag baked into each item, so
+  // navigating doesn't rebuild the list.
+  const activeKey = useMemo(() => {
+    const dashboard = pathname.match(/\/dashboards\/([^/]+)$/);
+    if (dashboard) return `canvas:${dashboard[1]}`;
+    const task = pathname.match(/\/tasks\/([^/]+)$/);
+    return task ? `task:${task[1]}` : null;
+  }, [pathname]);
+
+  const pinnedItems = useMemo(() => items.filter((i) => i.pinned), [items]);
+  const recentItems = useMemo(
+    () =>
+      filterChannelItems(
+        items.filter((i) => !i.pinned),
+        { query, createdBy: createdByFilter, status: statusFilter, me },
+      ).slice(0, RECENTS_CAP),
+    [items, query, createdByFilter, statusFilter, me],
+  );
+
+  const sectionRow = (
+    label: string,
+    icon: ReactNode,
+    to: string,
+    onClick: () => void,
+  ) => (
+    <SidebarItem
+      depth={0}
+      icon={icon}
+      label={label}
+      isActive={pathname === to}
+      onClick={onClick}
+    />
+  );
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <ChannelSwitcher channelId={channelId} />
+
+      <div className="flex flex-col gap-px px-2 pt-2">
+        {sectionRow(
+          "Feed",
+          <ChatsCircleIcon size={16} />,
+          base,
+          () =>
+            void navigate({ to: "/website/$channelId", params: { channelId } }),
+        )}
+        {sectionRow(
+          "Context",
+          <BookOpenTextIcon size={16} />,
+          `${base}/context`,
+          () =>
+            void navigate({
+              to: "/website/$channelId/context",
+              params: { channelId },
+            }),
+        )}
+        {loopsEnabled &&
+          sectionRow(
+            "Loops",
+            <RepeatIcon size={16} />,
+            `${base}/loops`,
+            () =>
+              void navigate({
+                to: "/website/$channelId/loops",
+                params: { channelId },
+              }),
+          )}
+        {sectionRow(
+          "Artifacts",
+          <PackageIcon size={16} />,
+          `${base}/artifacts`,
+          () =>
+            void navigate({
+              to: "/website/$channelId/artifacts",
+              params: { channelId },
+            }),
+        )}
+      </div>
+
+      {/* Relative so the FAB can float over the list. */}
+      <div className="relative mt-2 min-h-0 flex-1">
+        <div
+          aria-busy={isLoading}
+          className="scroll-mask-4 h-full overflow-y-auto px-2 pb-2"
+        >
+          {isLoading && items.length === 0 && <ChannelItemsSkeleton />}
+
+          {channelMissing && (
+            <Empty className="border-0 py-6">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <PackageIcon size={18} />
+                </EmptyMedia>
+                <EmptyTitle>Channel unavailable</EmptyTitle>
+                <EmptyDescription>
+                  It may have been deleted, or belong to another project.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          )}
+
+          {pinnedItems.length > 0 && (
+            <>
+              <MenuLabel>Pinned</MenuLabel>
+              <div className="flex flex-col gap-px">
+                {pinnedItems.map((item) => (
+                  <ChannelItemRow
+                    key={item.key}
+                    item={item}
+                    isActive={item.key === activeKey}
+                    actions={actions}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+
+          {(items.some((i) => !i.pinned) || filtersActive || searchOpen) && (
+            <>
+              <RecentSectionHeader
+                searchOpen={searchOpen}
+                onToggleSearch={() => {
+                  if (searchOpen) setQuery("");
+                  setSearchOpen(!searchOpen);
+                }}
+                query={query}
+                onQueryChange={setQuery}
+                createdByFilter={createdByFilter}
+                onCreatedByChange={setCreatedByFilter}
+                statusFilter={statusFilter}
+                onStatusChange={setStatusFilter}
+                filtersActive={filtersActive}
+              />
+              {recentItems.length > 0 ? (
+                <div className="flex flex-col gap-px">
+                  {recentItems.map((item) => (
+                    <ChannelItemRow
+                      key={item.key}
+                      item={item}
+                      isActive={item.key === activeKey}
+                      actions={actions}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <Empty className="border-0 py-6">
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <MagnifyingGlass size={18} />
+                    </EmptyMedia>
+                    <EmptyTitle>No matches</EmptyTitle>
+                    <EmptyDescription>
+                      Try a different search or clear the filters.
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
+            </>
+          )}
+
+          {!isLoading && !channelMissing && items.length === 0 && (
+            <Empty className="border-0 py-6">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <ChatsCircleIcon size={18} />
+                </EmptyMedia>
+                <EmptyTitle>Nothing here yet</EmptyTitle>
+                <EmptyDescription>
+                  Tasks and canvases you create in this channel show up here.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          )}
+        </div>
+        <NewTaskFab channelId={channelId} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelSwitcher.tsx b/packages/ui/src/features/canvas/components/ChannelSwitcher.tsx
new file mode 100644
index 0000000000..8ee851a4be
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelSwitcher.tsx
@@ -0,0 +1,302 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { CaretUpDownIcon, PlusIcon, StarIcon } from "@phosphor-icons/react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+  cn,
+  Input,
+  Kbd,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Separator,
+  Skeleton,
+} from "@posthog/quill";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
+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 { useStarredChannelSlots } from "@posthog/ui/features/canvas/hooks/useStarredChannelSlots";
+import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { formatHotkey } from "@posthog/ui/features/command/keyboard-shortcuts";
+import { navigateToChannel } from "@posthog/ui/router/navigationBridge";
+import { track } from "@posthog/ui/shell/analytics";
+import { useState } from "react";
+
+// Clears the row's 8px `mx-2` inset plus an 8px gap, so the panel lands past
+// the sidebar edge rather than over it.
+const POPOVER_SIDE_OFFSET = 16;
+
+function SwitcherRow({
+  channel,
+  active,
+  onPick,
+  hotkeySlot,
+}: {
+  channel: Channel;
+  active: boolean;
+  onPick: () => void;
+  hotkeySlot?: number;
+}) {
+  const isMe = channel.name === PERSONAL_CHANNEL_NAME;
+  const { isStarred, toggleStar } = useChannelStarToggle(channel);
+
+  const trackedToggleStar = () => {
+    track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+      action_type: isStarred ? "unstar" : "star",
+      surface: "sidebar",
+      channel_id: channel.id,
+    });
+    toggleStar();
+  };
+
+  const row = (
+    <div
+      className={cn(
+        "group flex items-center rounded-md transition-colors hover:bg-fill-hover",
+        active && "bg-fill-selected",
+      )}
+    >
+      <button
+        type="button"
+        onClick={onPick}
+        className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-[13px]"
+      >
+        <span className="flex w-4 shrink-0 items-center justify-center">
+          {channelGlyph(channel.name, {
+            size: 14,
+            className: "text-muted-foreground",
+          })}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-foreground">
+          {channel.name}
+        </span>
+        {hotkeySlot != null && (
+          <Kbd className="shrink-0">{formatHotkey(`mod+${hotkeySlot}`)}</Kbd>
+        )}
+      </button>
+      {isMe ? (
+        // #me is permanently pinned, so its star is inert — but the slot
+        // still has to be filled to keep the rows aligned.
+        <span
+          aria-hidden
+          className="mr-1 flex size-5 shrink-0 items-center justify-center text-muted-foreground opacity-40"
+        >
+          <StarIcon size={13} weight="fill" />
+        </span>
+      ) : (
+        <button
+          type="button"
+          aria-label={isStarred ? "Unstar channel" : "Star channel"}
+          onClick={trackedToggleStar}
+          className={cn(
+            "mr-1 flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground",
+            !isStarred && "opacity-0 group-hover:opacity-100",
+          )}
+        >
+          <StarIcon size={13} weight={isStarred ? "fill" : "regular"} />
+        </button>
+      )}
+    </div>
+  );
+
+  if (isMe) return row;
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger render={row} />
+      <ContextMenuContent>
+        <ContextMenuItem onClick={trackedToggleStar}>
+          <StarIcon size={14} weight={isStarred ? "fill" : "regular"} />
+          {isStarred ? "Unstar channel" : "Star channel"}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+// An overlay rather than a sibling: a sibling would shrink the trigger, which
+// the popover anchors to (see POPOVER_SIDE_OFFSET).
+function TriggerStar({ channel }: { channel: Channel }) {
+  const { isStarred, toggleStar } = useChannelStarToggle(channel);
+  return (
+    <button
+      type="button"
+      aria-label={isStarred ? "Unstar channel" : "Star channel"}
+      onClick={() => {
+        track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+          action_type: isStarred ? "unstar" : "star",
+          surface: "sidebar",
+          channel_id: channel.id,
+        });
+        toggleStar();
+      }}
+      // Parks in the trigger's reserved well: 8px padding + 12px caret + 6px
+      // gap = 26px from the right edge.
+      className="-translate-y-1/2 absolute top-1/2 right-[26px] flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-fill-hover hover:text-foreground"
+    >
+      <StarIcon size={14} weight={isStarred ? "fill" : "regular"} />
+    </button>
+  );
+}
+
+/**
+ * The channel header as a switcher: clicking the "# channel" title opens a
+ * searchable popover — "#me" first, then starred channels, then the rest.
+ */
+export function ChannelSwitcher({ channelId }: { channelId: string }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [createOpen, setCreateOpen] = useState(false);
+  const { channels, isLoading: isLoadingChannels } = useChannels();
+  const setCurrentChannel = useCurrentChannelStore((s) => s.setCurrentChannel);
+  const current = channels.find((c) => c.id === channelId);
+  // ChannelHotkeys owns the keys these slots describe; sharing the derivation
+  // keeps the advertised key and the key that fires in agreement.
+  const { slots, rest, slotFor } = useStarredChannelSlots();
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const matches = (c: Channel) =>
+    !normalizedQuery || c.name.toLowerCase().includes(normalizedQuery);
+  const topFiltered = slots.filter(matches);
+  const restFiltered = rest.filter(matches);
+
+  const pick = (channel: Channel) => {
+    setOpen(false);
+    setQuery("");
+    setCurrentChannel(channel.id);
+    navigateToChannel(channel.id);
+    track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+      action_type: "open_channel",
+      surface: "sidebar",
+      channel_id: channel.id,
+    });
+  };
+
+  const showStar = current != null && current.name !== PERSONAL_CHANNEL_NAME;
+
+  return (
+    <div className="relative mx-2 mt-2">
+      <Popover open={open} onOpenChange={setOpen}>
+        {/* Portaled because ResizableSidebar's transform makes the sidebar a
+            containing block, which would clip a fixed overlay; z-40 keeps it
+            under the popup's z-50. */}
+        <BasePopover.Portal>
+          <BasePopover.Backdrop className="fixed inset-0 z-40 bg-blackA-4 opacity-100 transition-opacity duration-150 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none dark:bg-blackA-7" />
+        </BasePopover.Portal>
+        <PopoverTrigger
+          render={
+            <button
+              type="button"
+              aria-label="Switch channel"
+              // Fixed height with an unconditional star well: sized off its
+              // contents, a starrable channel ran 4px taller than #me and
+              // everything below shifted on switch.
+              className="flex h-8 w-full items-center gap-1.5 rounded-md border border-border px-2 text-left transition-colors hover:bg-fill-hover aria-expanded:bg-fill-selected"
+            >
+              <span className="flex w-4 shrink-0 items-center justify-center">
+                {channelGlyph(current?.name, {
+                  size: 14,
+                  className: "text-muted-foreground",
+                })}
+              </span>
+              <span className="min-w-0 flex-1 truncate font-semibold text-[13px] text-foreground">
+                {current ? (
+                  current.name
+                ) : isLoadingChannels ? (
+                  // A placeholder word here would read as a real channel named
+                  // "channel"; a skeleton says "still loading" honestly.
+                  <Skeleton className="h-3.5 w-24" />
+                ) : (
+                  "Unavailable"
+                )}
+              </span>
+              <span aria-hidden className="size-6 shrink-0" />
+              <CaretUpDownIcon
+                size={12}
+                className="shrink-0 text-muted-foreground"
+              />
+            </button>
+          }
+        />
+        <PopoverContent
+          align="start"
+          side="right"
+          sideOffset={POPOVER_SIDE_OFFSET}
+          // quill sets gap/padding/width/shadow from unlayered CSS that beats
+          // plain utilities, hence the `!` overrides.
+          className="w-64! gap-0 p-1! shadow-2xl!"
+        >
+          <div className="p-1">
+            <Input
+              autoFocus
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search channels…"
+              aria-label="Search channels"
+              className="h-7 text-[13px]"
+            />
+          </div>
+          <div className="scroll-mask-4 max-h-72 overflow-y-auto">
+            {topFiltered.map((channel) => (
+              <SwitcherRow
+                key={channel.id}
+                channel={channel}
+                active={channel.id === channelId}
+                onPick={() => pick(channel)}
+                hotkeySlot={slotFor(channel)}
+              />
+            ))}
+            {topFiltered.length > 0 && restFiltered.length > 0 && (
+              <Separator className="-mx-1 my-1" />
+            )}
+            {restFiltered.map((channel) => (
+              <SwitcherRow
+                key={channel.id}
+                channel={channel}
+                active={channel.id === channelId}
+                onPick={() => pick(channel)}
+              />
+            ))}
+            {topFiltered.length === 0 && restFiltered.length === 0 && (
+              <p className="px-2 py-2 text-[12px] text-muted-foreground">
+                No channels match "{query.trim()}".
+              </p>
+            )}
+          </div>
+          <Separator className="-mx-1 my-1" />
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false);
+              setCreateOpen(true);
+            }}
+            className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-[13px] text-muted-foreground transition-colors hover:bg-fill-hover"
+          >
+            <span className="flex w-4 shrink-0 items-center justify-center">
+              <PlusIcon size={14} />
+            </span>
+            New channel…
+          </button>
+        </PopoverContent>
+      </Popover>
+      {showStar && current && <TriggerStar channel={current} />}
+      {/* Inert star for #me, so the trigger reads the same on every channel. */}
+      {current && !showStar && (
+        <span
+          aria-hidden
+          className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-[26px] flex size-6 items-center justify-center text-muted-foreground opacity-40"
+        >
+          <StarIcon size={14} weight="fill" />
+        </span>
+      )}
+      <CreateChannelModal open={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelsList.tsx b/packages/ui/src/features/canvas/components/ChannelsList.tsx
index 9279e0e8e2..e3ff859bea 100644
--- a/packages/ui/src/features/canvas/components/ChannelsList.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsList.tsx
@@ -7,7 +7,6 @@ import {
   FileTextIcon,
   HashIcon,
   LinkIcon,
-  LockSimpleIcon,
   PencilSimpleIcon,
   PlusIcon,
   StarIcon,
@@ -43,6 +42,7 @@ import {
   TooltipTrigger,
 } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { RenameChannelModal } from "@posthog/ui/features/canvas/components/RenameChannelModal";
 import { trackAndCreateCanvas } from "@posthog/ui/features/canvas/createCanvasAnalytics";
 import { ensurePersonalChannel } from "@posthog/ui/features/canvas/ensurePersonalChannel";
@@ -61,13 +61,18 @@ import {
   useTaskChannels,
 } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
 import { useIsChannelUnread } from "@posthog/ui/features/canvas/hooks/useUnreadChannels";
+import {
+  resetCurrentChannel,
+  useCurrentChannelStore,
+} from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import { copyChannelLink } from "@posthog/ui/features/canvas/utils/copyChannelLink";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { toast } from "@posthog/ui/primitives/toast";
+import { openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { track } from "@posthog/ui/shell/analytics";
 import { Box, Flex } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { Fragment, type ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, type ReactNode, useState } from "react";
 import { hostClient } from "../hostClient";
 
 // One actionable entry in a channel's menu, rendered the same whether it
@@ -127,6 +132,12 @@ function useChannelActions(channel: Channel): {
 
       await deleteChannel(channel.id);
       removeStar();
+      // Unscope immediately if this was the current channel — otherwise the
+      // sidebar renders a dead id (and new tasks file against it) until the
+      // channels list refetches. useCurrentChannel is the backstop.
+      if (useCurrentChannelStore.getState().currentChannelId === channel.id) {
+        resetCurrentChannel();
+      }
       track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
         action_type: "delete",
         surface: "sidebar",
@@ -346,18 +357,18 @@ function ChannelSection({
                   params: { channelId: channel.id },
                 });
               }}
-              className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
+              className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-foreground"
             >
-              <HashIcon
-                size={14}
-                weight={isUnread ? "bold" : undefined}
-                className={cn(
+              {channelGlyph(channel.name, {
+                size: 14,
+                weight: isUnread ? "bold" : undefined,
+                className: cn(
                   "shrink-0",
                   isUnread || isActive
                     ? "text-foreground"
                     : "text-muted-foreground group-hover/button:text-foreground",
-                )}
-              />
+                ),
+              })}
               <span
                 className={cn(
                   "truncate text-[13px] group-hover/chan:pr-8",
@@ -422,10 +433,7 @@ function ChannelSection({
                     surface: "sidebar",
                     channel_id: channel.id,
                   });
-                  navigate({
-                    to: "/website/$channelId/new",
-                    params: { channelId: channel.id },
-                  });
+                  openTaskInput({ channelId: channel.id });
                 }}
               >
                 <FileTextIcon size={14} />
@@ -560,7 +568,7 @@ function PersonalChannelRow() {
       surface: "sidebar",
       channel_id: channelId,
     });
-    void navigate({ to: "/website/$channelId/new", params: { channelId } });
+    openTaskInput({ channelId });
   };
 
   const newCanvas = async () => {
@@ -583,18 +591,18 @@ function PersonalChannelRow() {
         data-selected={isActive || undefined}
         disabled={isCreating}
         onClick={() => void open()}
-        className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
+        className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-foreground"
       >
-        <HashIcon
-          size={14}
-          weight={isUnread ? "bold" : undefined}
-          className={cn(
+        {channelGlyph(PERSONAL_CHANNEL_NAME, {
+          size: 14,
+          weight: isUnread ? "bold" : undefined,
+          className: cn(
             "shrink-0",
             isUnread || isActive
               ? "text-foreground"
               : "text-muted-foreground group-hover/button:text-foreground",
-          )}
-        />
+          ),
+        })}
         <span
           className={cn(
             "truncate text-[13px]",
@@ -606,17 +614,6 @@ function PersonalChannelRow() {
         >
           {PERSONAL_CHANNEL_NAME}
         </span>
-        {/* The lock and the hover "+" share the right edge, so fade the lock
-            out as the "+" comes in. */}
-        <LockSimpleIcon
-          size={12}
-          className={cn(
-            "ml-auto shrink-0 text-chrome-foreground transition-opacity",
-            newMenuOpen
-              ? "opacity-0"
-              : "opacity-100 group-hover/chan:opacity-0",
-          )}
-        />
       </Button>
       <div className="absolute top-0 right-1">
         <DropdownMenu open={newMenuOpen} onOpenChange={setNewMenuOpen}>
@@ -757,19 +754,6 @@ export function ChannelsList() {
   const starred = channels.filter((c) => starredRefToShortcutId.has(c.path));
   const others = channels.filter((c) => !starredRefToShortcutId.has(c.path));
 
-  // Fire CHANNELS_SPACE_VIEWED once per space mount, after channels first load
-  // (so the counts are accurate). The sidebar stays mounted while navigating
-  // between channels, so this naturally fires once per entry into the space.
-  const viewedTrackedRef = useRef(false);
-  useEffect(() => {
-    if (isLoading || viewedTrackedRef.current) return;
-    viewedTrackedRef.current = true;
-    track(ANALYTICS_EVENTS.CHANNELS_SPACE_VIEWED, {
-      channel_count: channels.length,
-      starred_count: starred.length,
-    });
-  }, [isLoading, channels.length, starred.length]);
-
   return (
     // One shared provider groups every row tooltip so that once one shows,
     // moving to the next row reveals its tooltip instantly (no re-delay).
diff --git a/packages/ui/src/features/canvas/components/ChannelsSidebar.test.tsx b/packages/ui/src/features/canvas/components/ChannelsSidebar.test.tsx
new file mode 100644
index 0000000000..f4f9c10634
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelsSidebar.test.tsx
@@ -0,0 +1,261 @@
+import { Theme } from "@radix-ui/themes";
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  featureFlags: new Map<string, boolean>(),
+  channelsLayout: false,
+  channelsEnabled: false,
+  channels: [] as { id: string; name: string; path: string }[],
+  channelsLoading: false,
+  archivedTaskIds: new Set<string>(),
+  navigateToArchived: vi.fn(),
+  track: vi.fn(),
+  routeChannelId: undefined as string | undefined,
+}));
+
+vi.mock("@posthog/ui/shell/analytics", () => ({
+  track: (...args: unknown[]) => mocks.track(...args),
+}));
+
+vi.mock("@posthog/ui/features/feature-flags/useFeatureFlag", () => ({
+  useFeatureFlag: (key: string) => mocks.featureFlags.get(key) ?? true,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelsLayout", () => ({
+  useChannelsLayout: () => mocks.channelsLayout,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useChannels", () => ({
+  useChannels: () => ({
+    channels: mocks.channels,
+    isLoading: mocks.channelsLoading,
+  }),
+}));
+vi.mock("@posthog/ui/features/archive/useArchivedTaskIds", () => ({
+  useArchivedTaskIds: () => mocks.archivedTaskIds,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelStars", () => ({
+  useChannelStars: () => ({ starredRefToShortcutId: new Map() }),
+}));
+vi.mock("@posthog/ui/router/navigationBridge", () => ({
+  navigateToArchived: (...args: unknown[]) => mocks.navigateToArchived(...args),
+}));
+
+// The sidebar's children each mount their own query stack; this suite is about
+// the shell's own decisions, so they're stubbed out.
+vi.mock("@posthog/ui/features/canvas/components/ChannelNav", () => ({
+  ChannelNav: () => null,
+}));
+vi.mock("@posthog/ui/features/canvas/components/ChannelSidebar", () => ({
+  ChannelSidebar: ({ channelId }: { channelId: string }) => (
+    <div data-testid="channel-sidebar">{channelId}</div>
+  ),
+}));
+vi.mock("@posthog/ui/features/canvas/components/ChannelsList", () => ({
+  ChannelsList: () => <div data-testid="channels-list" />,
+}));
+vi.mock("@posthog/ui/features/canvas/components/ChannelsFab", () => ({
+  ChannelsFab: () => null,
+}));
+vi.mock("@posthog/ui/features/sidebar/components/SidebarNavSection", () => ({
+  SidebarNavSection: () => <div data-testid="sidebar-nav-section" />,
+}));
+vi.mock("@posthog/ui/features/sidebar/components/SidebarMenu", () => ({
+  SidebarMenu: () => <div data-testid="sidebar-menu" />,
+}));
+vi.mock("@posthog/ui/features/sidebar/components/ProjectSwitcher", () => ({
+  ProjectSwitcher: () => null,
+}));
+vi.mock("@posthog/ui/features/sidebar/components/UpdateBanner", () => ({
+  UpdateBanner: () => null,
+}));
+vi.mock("@posthog/ui/features/loops/components/LoopsPromoCard", () => ({
+  LoopsPromoCard: () => null,
+}));
+vi.mock("@posthog/ui/features/workspace/useWorkspace", () => ({
+  useWorkspaces: () => ({ data: {}, isFetched: true }),
+}));
+vi.mock("@tanstack/react-router", () => ({
+  useParams: () => ({ channelId: mocks.routeChannelId }),
+}));
+
+import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
+import { ChannelsSidebar } from "./ChannelsSidebar";
+
+function renderSidebar() {
+  return render(
+    <Theme>
+      <ChannelsSidebar />
+    </Theme>,
+  );
+}
+
+const ME = { id: "me-id", name: "me", path: "/me" };
+
+describe("ChannelsSidebar", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.featureFlags.clear();
+    mocks.channelsLayout = false;
+    mocks.channels = [];
+    mocks.channelsLoading = false;
+    mocks.archivedTaskIds = new Set();
+    mocks.track.mockClear();
+    mocks.routeChannelId = undefined;
+    useCurrentChannelStore.setState({ currentChannelId: null });
+    useSidebarStore.setState({ channelsEnabled: false, open: true });
+  });
+
+  describe("the Archived row", () => {
+    beforeEach(() => {
+      mocks.archivedTaskIds = new Set(["archived-1"]);
+    });
+
+    // The layout puts an Archive action on every item row, so hiding the
+    // destination leaves archived tasks with nowhere to be seen —
+    // navigateToArchived has no other caller in the app.
+    it("is present under the channels layout", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME];
+      renderSidebar();
+      expect(screen.getByText("Archived")).toBeTruthy();
+    });
+
+    it("is present with neither channels world on", () => {
+      renderSidebar();
+      expect(screen.getByText("Archived")).toBeTruthy();
+    });
+
+    // The alpha replaced the task list with the channel tree, so the row went
+    // with it — that part is deliberate.
+    it("is absent in the channels alpha", () => {
+      useSidebarStore.setState({ channelsEnabled: true });
+      mocks.featureFlags.set(PROJECT_BLUEBIRD_FLAG, true);
+      renderSidebar();
+      expect(screen.queryByText("Archived")).toBeNull();
+    });
+
+    it("stays hidden when nothing is archived", () => {
+      mocks.channelsLayout = true;
+      mocks.archivedTaskIds = new Set();
+      renderSidebar();
+      expect(screen.queryByText("Archived")).toBeNull();
+    });
+  });
+
+  describe("auto-scoping to #me", () => {
+    it("keeps a deep-linked channel instead of overwriting it with #me", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME, { id: "eng-id", name: "eng", path: "/eng" }];
+      mocks.routeChannelId = "eng-id";
+
+      renderSidebar();
+
+      expect(useCurrentChannelStore.getState().currentChannelId).toBe("eng-id");
+    });
+
+    it("scopes to the personal channel once the list lands", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME];
+      renderSidebar();
+      expect(useCurrentChannelStore.getState().currentChannelId).toBe("me-id");
+    });
+
+    // Both flags behind the layout re-evaluate on every flags payload, so a
+    // momentary false must not permanently strand the sidebar unscoped: the
+    // auto-scope latch has to reset when the layout turns off.
+    it("re-scopes after the layout flag flickers off and back on", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME];
+      const { rerender } = renderSidebar();
+      expect(useCurrentChannelStore.getState().currentChannelId).toBe("me-id");
+
+      mocks.channelsLayout = false;
+      rerender(
+        <Theme>
+          <ChannelsSidebar />
+        </Theme>,
+      );
+      expect(useCurrentChannelStore.getState().currentChannelId).toBeNull();
+
+      mocks.channelsLayout = true;
+      rerender(
+        <Theme>
+          <ChannelsSidebar />
+        </Theme>,
+      );
+      expect(useCurrentChannelStore.getState().currentChannelId).toBe("me-id");
+    });
+
+    it("does not scope to a channel the project does not have", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [{ id: "eng", name: "eng", path: "/eng" }];
+      renderSidebar();
+      expect(useCurrentChannelStore.getState().currentChannelId).toBeNull();
+      expect(screen.queryByTestId("channel-sidebar")).toBeNull();
+    });
+
+    // A stale id from a previous project must not be rendered as a channel.
+    it("clears a scoped channel missing from the loaded list", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME];
+      useCurrentChannelStore.setState({ currentChannelId: "from-old-project" });
+      renderSidebar();
+      expect(useCurrentChannelStore.getState().currentChannelId).not.toBe(
+        "from-old-project",
+      );
+    });
+  });
+
+  it("renders the flag-off sidebar menu untouched", () => {
+    renderSidebar();
+    expect(screen.getByTestId("sidebar-menu")).toBeTruthy();
+    expect(screen.getByTestId("sidebar-nav-section")).toBeTruthy();
+  });
+
+  describe("space-viewed tracking", () => {
+    // The event used to fire from ChannelsList, which the new layout barely
+    // renders — so space adoption would have read as zero once the flag landed.
+    it("fires from the shell under the channels layout", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME, { id: "eng", name: "eng", path: "/eng" }];
+      renderSidebar();
+      expect(mocks.track).toHaveBeenCalledWith(
+        ANALYTICS_EVENTS.CHANNELS_SPACE_VIEWED,
+        { channel_count: 1, starred_count: 0, layout: "channels" },
+      );
+    });
+
+    it("does not fire outside the channels world", () => {
+      mocks.channels = [ME];
+      renderSidebar();
+      expect(mocks.track).not.toHaveBeenCalledWith(
+        ANALYTICS_EVENTS.CHANNELS_SPACE_VIEWED,
+        expect.anything(),
+      );
+    });
+
+    it("fires again after leaving and re-entering the channels world", () => {
+      mocks.channelsLayout = true;
+      mocks.channels = [ME];
+      const { rerender } = renderSidebar();
+
+      mocks.channelsLayout = false;
+      rerender(
+        <Theme>
+          <ChannelsSidebar />
+        </Theme>,
+      );
+      mocks.channelsLayout = true;
+      rerender(
+        <Theme>
+          <ChannelsSidebar />
+        </Theme>,
+      );
+
+      expect(mocks.track).toHaveBeenCalledTimes(2);
+    });
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx b/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx
index 3afc553050..45d6bc7eec 100644
--- a/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx
@@ -2,9 +2,16 @@ import { ArchiveIcon } from "@phosphor-icons/react";
 import { Separator } from "@posthog/quill";
 import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
 import { useArchivedTaskIds } from "@posthog/ui/features/archive/useArchivedTaskIds";
+import { ChannelNav } from "@posthog/ui/features/canvas/components/ChannelNav";
+import { ChannelSidebar } from "@posthog/ui/features/canvas/components/ChannelSidebar";
 import { ChannelsFab } from "@posthog/ui/features/canvas/components/ChannelsFab";
 import { ChannelsList } from "@posthog/ui/features/canvas/components/ChannelsList";
 import { useChannelsSidebarStore } from "@posthog/ui/features/canvas/components/channelsSidebarStore";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
+import { useCurrentChannel } from "@posthog/ui/features/canvas/hooks/useCurrentChannel";
+import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useTrackChannelsSpaceViewed } from "@posthog/ui/features/canvas/hooks/useTrackChannelsSpaceViewed";
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { LoopsPromoCard } from "@posthog/ui/features/loops/components/LoopsPromoCard";
 import { useOnboardingStore } from "@posthog/ui/features/onboarding/onboardingStore";
@@ -12,6 +19,7 @@ import { ProjectSwitcher } from "@posthog/ui/features/sidebar/components/Project
 import { SidebarMenu } from "@posthog/ui/features/sidebar/components/SidebarMenu";
 import { SidebarNavSection } from "@posthog/ui/features/sidebar/components/SidebarNavSection";
 import { UpdateBanner } from "@posthog/ui/features/sidebar/components/UpdateBanner";
+import { CHANNELS_SIDEBAR_MIN_WIDTH } from "@posthog/ui/features/sidebar/constants";
 import {
   beginSidebarPeek,
   cancelSidebarPeek,
@@ -20,16 +28,14 @@ import {
 } from "@posthog/ui/features/sidebar/sidebarPeekStore";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useWorkspaces } from "@posthog/ui/features/workspace/useWorkspace";
+import { ErrorBoundary } from "@posthog/ui/primitives/ErrorBoundary";
 import { useSidebarEdgeHoverPeek } from "@posthog/ui/primitives/hooks/useSidebarEdgeHoverPeek";
 import { ResizableSidebar } from "@posthog/ui/primitives/ResizableSidebar";
 import { navigateToArchived } from "@posthog/ui/router/navigationBridge";
 import { Box, Flex } from "@radix-ui/themes";
-import { useDeferredValue, useEffect } from "react";
+import { useParams } from "@tanstack/react-router";
+import { useDeferredValue, useEffect, useRef } from "react";
 
-// The unified app sidebar (Code merged into the Bluebird chrome). Top to
-// bottom: workspace switcher, the merged global nav, the "Enable channels"
-// opt-in, then the body — the task list by default, swapped for the channel
-// tree once channels are enabled — and Settings pinned to the bottom.
 export function ChannelsSidebar() {
   const width = useChannelsSidebarStore((state) => state.width);
   const setWidth = useChannelsSidebarStore((state) => state.setWidth);
@@ -78,15 +84,59 @@ export function ChannelsSidebar() {
   );
   const channelsEnabled =
     useSidebarStore((s) => s.channelsEnabled) && bluebirdEnabled;
-  // The Switch (in SidebarNavSection) reads the live value and flips instantly.
-  // Swapping the sidebar body mounts a heavy tree (ChannelsList: the channels
-  // query + a provider-laden row per channel), so defer that decision: the
-  // urgent commit keeps the current body and paints the toggle, then the tree
-  // mounts in a follow-up non-blocking render.
-  const bodyChannelsEnabled = useDeferredValue(channelsEnabled);
+  const channelsLayout = useChannelsLayout();
+  const channelsWorld = channelsLayout || channelsEnabled;
+  const bodyChannelsWorld = useDeferredValue(channelsWorld);
+  const showArchivedRow = channelsLayout || !bodyChannelsWorld;
+  useTrackChannelsSpaceViewed({
+    enabled: channelsWorld,
+    layout: channelsLayout ? "channels" : "code",
+  });
+
+  const minWidth = channelsLayout ? CHANNELS_SIDEBAR_MIN_WIDTH : undefined;
+  useEffect(() => {
+    if (channelsLayout && width < CHANNELS_SIDEBAR_MIN_WIDTH) {
+      setWidth(CHANNELS_SIDEBAR_MIN_WIDTH);
+    }
+  }, [channelsLayout, width, setWidth]);
 
   const archivedTaskIds = useArchivedTaskIds();
 
+  const params = useParams({ strict: false });
+  const routeChannelId = params.channelId;
+  const setCurrentChannel = useCurrentChannelStore((s) => s.setCurrentChannel);
+  const { currentChannelId, channels } = useCurrentChannel({
+    enabled: channelsLayout,
+  });
+  useEffect(() => {
+    if (!channelsLayout || !routeChannelId) return;
+    setCurrentChannel(routeChannelId);
+  }, [channelsLayout, routeChannelId, setCurrentChannel]);
+  const inChannel = channelsLayout && currentChannelId != null;
+
+  const autoScopedRef = useRef(false);
+  useEffect(() => {
+    if (!channelsLayout) {
+      autoScopedRef.current = false;
+      return;
+    }
+    // A route-scoped channel wins over the default. Both effects run from the
+    // same render on a cold deep link, so without this guard the route effect
+    // writes its channel and this later effect immediately overwrites it with
+    // #me using the stale `currentChannelId` captured by that render.
+    if (routeChannelId || autoScopedRef.current || currentChannelId) return;
+    const me = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
+    if (!me) return;
+    autoScopedRef.current = true;
+    setCurrentChannel(me.id);
+  }, [
+    channelsLayout,
+    channels,
+    currentChannelId,
+    routeChannelId,
+    setCurrentChannel,
+  ]);
+
   return (
     <ResizableSidebar
       open={open}
@@ -95,6 +145,7 @@ export function ChannelsSidebar() {
       isResizing={isResizing}
       setIsResizing={setIsResizing}
       side="left"
+      minWidth={minWidth}
       setOpen={setOpen}
       peek={peek}
       onPeekEnter={beginSidebarPeek}
@@ -102,18 +153,24 @@ export function ChannelsSidebar() {
       onPeekDismiss={cancelSidebarPeek}
     >
       <Flex direction="column" className="h-full bg-chrome">
-        {/* The nav owns the "Enable channels" toggle + Canvas rows (gated by
-            the same flag), so this section carries the whole merged nav. */}
-        <SidebarNavSection />
+        {!inChannel && <SidebarNavSection />}
 
-        {/* Body: the channel tree when channels are on, otherwise the task
-            list. Each owns its own scroll region. Gated on the deferred value so
-            the toggle paints before this heavy swap. */}
-        {bodyChannelsEnabled ? (
+        {inChannel && currentChannelId ? (
+          <>
+            <ChannelNav />
+            <Box className="min-h-0 flex-1 overflow-hidden">
+              <ErrorBoundary
+                name="channel-sidebar"
+                fallback={<ChannelsList />}
+                resetKey={currentChannelId}
+              >
+                <ChannelSidebar channelId={currentChannelId} />
+              </ErrorBoundary>
+            </Box>
+          </>
+        ) : bodyChannelsWorld ? (
           <>
             <Separator />
-            {/* The fab is a sibling of the scroll region, not a child, so it
-                stays pinned to the bottom-right instead of scrolling away. */}
             <Box className="relative min-h-0 flex-1">
               <Box className="scroll-mask-4 h-full overflow-y-auto">
                 <ChannelsList />
@@ -129,9 +186,7 @@ export function ChannelsSidebar() {
 
         <UpdateBanner />
 
-        {/* Archived is a task-list affordance — hidden while channels are on,
-            since the body then shows the channel tree, not tasks. */}
-        {!channelsEnabled && archivedTaskIds.size > 0 && (
+        {showArchivedRow && archivedTaskIds.size > 0 && (
           <Box className="shrink-0 border-border border-t">
             <button
               type="button"
@@ -148,8 +203,6 @@ export function ChannelsSidebar() {
 
         <LoopsPromoCard />
 
-        {/* Workspace switcher pinned to the bottom. Its dropdown carries the
-            Settings entry, so there's no separate Settings row. */}
         <Box className="shrink-0 px-2 pb-2">
           <ProjectSwitcher />
         </Box>
diff --git a/packages/ui/src/features/canvas/components/NewTaskFab.tsx b/packages/ui/src/features/canvas/components/NewTaskFab.tsx
new file mode 100644
index 0000000000..36c74195f8
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/NewTaskFab.tsx
@@ -0,0 +1,83 @@
+import { ChartBarIcon, FileTextIcon, PlusIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@posthog/quill";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { trackAndCreateCanvas } from "@posthog/ui/features/canvas/createCanvasAnalytics";
+import { useCreateAndOpenDashboard } from "@posthog/ui/features/canvas/hooks/useDashboards";
+import {
+  formatHotkey,
+  SHORTCUTS,
+} from "@posthog/ui/features/command/keyboard-shortcuts";
+import { isContentEmpty } from "@posthog/ui/features/message-editor/content";
+import { useDraftStore } from "@posthog/ui/features/message-editor/draftStore";
+import { Tooltip } from "@posthog/ui/primitives/Tooltip";
+import { openTaskInput } from "@posthog/ui/router/useOpenTask";
+import { track } from "@posthog/ui/shell/analytics";
+
+export function NewTaskFab({ channelId }: { channelId: string }) {
+  const hasDraft = useDraftStore(
+    (s) => !isContentEmpty(s.drafts["task-input"]),
+  );
+  const createAndOpenCanvas = useCreateAndOpenDashboard(channelId);
+
+  return (
+    <DropdownMenu>
+      <Tooltip
+        content={hasDraft ? "Create — you have a draft" : "Create"}
+        shortcut={formatHotkey(SHORTCUTS.NEW_TASK)}
+        side="top"
+      >
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="primary"
+              size="icon-lg"
+              aria-label="Create"
+              className="absolute right-3 bottom-3 z-10 rounded-full shadow-lg"
+            >
+              <PlusIcon size={20} weight="bold" />
+              {hasDraft && (
+                <span
+                  aria-hidden
+                  className="absolute top-0.5 right-0.5 size-2 rounded-full bg-current ring-(--primary) ring-2"
+                />
+              )}
+            </Button>
+          }
+        />
+      </Tooltip>
+      <DropdownMenuContent align="end" side="top" sideOffset={6}>
+        <DropdownMenuItem
+          onClick={() => {
+            track(ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED, {
+              item: "new_task",
+              in_more: false,
+            });
+            openTaskInput({ channelId });
+          }}
+        >
+          <FileTextIcon size={14} />
+          New task
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            trackAndCreateCanvas(
+              channelId,
+              undefined,
+              "sidebar",
+              () => void createAndOpenCanvas(),
+            );
+          }}
+        >
+          <ChartBarIcon size={14} />
+          New canvas
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx b/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
new file mode 100644
index 0000000000..42782087fc
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx
@@ -0,0 +1,63 @@
+import type { Task, TaskRun } from "@posthog/shared/domain-types";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  runs: [] as TaskRun[],
+}));
+
+vi.mock("@posthog/ui/features/canvas/hooks/useTaskRuns", () => ({
+  useTaskRuns: () => ({ runs: mocks.runs, isLoading: false }),
+}));
+vi.mock("@posthog/ui/features/git-interaction/usePrArtifact", () => ({
+  usePrArtifact: (url: string) => ({
+    safeUrl: url,
+    title: `Pull request #${url.split("/").at(-1)}`,
+    stateLabel: "Open",
+    Icon: () => <span />,
+    iconColor: "currentColor",
+  }),
+}));
+vi.mock("@posthog/ui/features/pr-review/usePrComments", () => ({
+  usePrComments: () => ({ data: undefined }),
+}));
+vi.mock("@posthog/ui/features/pr-review/usePrReviewThreads", () => ({
+  usePrReviewThreads: () => ({ data: undefined }),
+}));
+
+import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
+import { TaskArtifactsList } from "./TaskArtifactsList";
+
+const task = {
+  id: "task-1",
+  latest_run: null,
+} as unknown as Task;
+
+function run(id: string, prNumber: number): TaskRun {
+  return {
+    id,
+    output: { pr_url: `https://github.com/acme/repo/pull/${prNumber}` },
+  } as unknown as TaskRun;
+}
+
+describe("TaskArtifactsList", () => {
+  beforeEach(() => {
+    mocks.runs = [run("run-1", 1), run("run-2", 2)];
+    useReviewNavigationStore.setState({
+      reviewModes: {},
+      selectedPrUrls: {},
+    });
+  });
+
+  it("opens the PR represented by the selected historical row", () => {
+    render(<TaskArtifactsList task={task} timeline={[]} />);
+
+    fireEvent.click(screen.getByText("Pull request #2"));
+
+    const state = useReviewNavigationStore.getState();
+    expect(state.selectedPrUrls[task.id]).toBe(
+      "https://github.com/acme/repo/pull/2",
+    );
+    expect(state.reviewModes[task.id]).toBe("split");
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx b/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
new file mode 100644
index 0000000000..0f50a76fbe
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/TaskArtifactsList.tsx
@@ -0,0 +1,328 @@
+import {
+  ArrowSquareOutIcon,
+  ClipboardTextIcon,
+  PackageIcon,
+  SlackLogoIcon,
+} from "@phosphor-icons/react";
+import {
+  parseRunPlans,
+  type RunArtifact,
+} from "@posthog/core/canvas/runArtifactSchemas";
+import type { ThreadTimelineRow } from "@posthog/core/canvas/threadTimeline";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@posthog/quill";
+import type {
+  Task,
+  TaskRun,
+  TaskThreadMessage,
+} from "@posthog/shared/domain-types";
+import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
+import { useTaskRuns } from "@posthog/ui/features/canvas/hooks/useTaskRuns";
+import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
+import { usePrArtifact } from "@posthog/ui/features/git-interaction/usePrArtifact";
+import { usePrComments } from "@posthog/ui/features/pr-review/usePrComments";
+import { usePrReviewThreads } from "@posthog/ui/features/pr-review/usePrReviewThreads";
+import { toast } from "@posthog/ui/primitives/toast";
+import { openExternalUrl } from "@posthog/ui/shell/openExternal";
+import { parseHttpsUrl, parseShareLink } from "@posthog/ui/utils/posthogLinks";
+import { navigateToShareTarget } from "@posthog/ui/utils/shareLinks";
+import { getPostHogUrl } from "@posthog/ui/utils/urls";
+import { type ReactNode, useMemo, useState } from "react";
+
+type ArtifactRow =
+  | { kind: "pr"; key: string; url: string }
+  | { kind: "canvas"; key: string; name: string; url: string | null }
+  | {
+      kind: "plan";
+      key: string;
+      name: string;
+      storagePath: string | null;
+      runId: string | null;
+    }
+  | { kind: "slack"; key: string; url: string };
+
+function readRunPlans(run: TaskRun): RunArtifact[] {
+  return parseRunPlans((run as { artifacts?: unknown }).artifacts);
+}
+
+const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i;
+function planTitle(name: string | undefined): string {
+  if (!name || UUID_RE.test(name)) return "Plan";
+  return name;
+}
+
+function buildRows(
+  task: Task,
+  timeline: ThreadTimelineRow<TaskThreadMessage>[],
+  runs: TaskRun[],
+): ArtifactRow[] {
+  const rows: ArtifactRow[] = [];
+  const seenPrUrls = new Set<string>();
+  const seenPlanKeys = new Set<string>();
+
+  const addPr = (url: string, key: string) => {
+    if (seenPrUrls.has(url)) return;
+    seenPrUrls.add(url);
+    rows.push({ kind: "pr", key, url });
+  };
+
+  for (const row of timeline) {
+    if (row.kind !== "artifact") continue;
+    if (row.artifact.kind === "pr") {
+      addPr(row.artifact.url, row.message.id);
+    } else {
+      rows.push({
+        kind: "canvas",
+        key: row.message.id,
+        name: row.artifact.name,
+        url: row.artifact.url,
+      });
+    }
+  }
+
+  const allRuns =
+    runs.length > 0 ? runs : task.latest_run ? [task.latest_run] : [];
+  for (const run of allRuns) {
+    const outputPr = run.output?.pr_url;
+    if (typeof outputPr === "string" && outputPr) {
+      addPr(outputPr, `output-pr:${outputPr}`);
+    }
+    for (const plan of readRunPlans(run)) {
+      const key = `plan:${plan.id ?? plan.storage_path ?? plan.name}`;
+      if (seenPlanKeys.has(key)) continue;
+      seenPlanKeys.add(key);
+      rows.push({
+        kind: "plan",
+        key,
+        name: planTitle(plan.name),
+        storagePath: plan.storage_path ?? null,
+        runId: run.id,
+      });
+    }
+  }
+
+  const slackUrl = task.latest_run?.state?.slack_thread_url;
+  if (typeof slackUrl === "string" && slackUrl) {
+    rows.push({ kind: "slack", key: "slack-thread", url: slackUrl });
+  }
+
+  return rows;
+}
+
+function ArtifactListRow({
+  icon,
+  title,
+  detail,
+  external,
+  onOpen,
+  onHoverStart,
+}: {
+  icon: ReactNode;
+  title: string;
+  detail?: string | null;
+  external?: boolean;
+  onOpen?: () => void;
+  onHoverStart?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      disabled={!onOpen}
+      onPointerEnter={onHoverStart}
+      onFocus={onHoverStart}
+      className="flex w-full items-center gap-2 rounded-md border border-border bg-muted px-2.5 py-2 text-left text-[13px] transition-colors enabled:hover:bg-gray-3"
+    >
+      {icon}
+      <span className="min-w-0 flex-1 truncate font-medium">{title}</span>
+      {detail && (
+        <span className="shrink-0 text-muted-foreground text-xs">{detail}</span>
+      )}
+      {external && (
+        <ArrowSquareOutIcon size={12} className="shrink-0 text-gray-9" />
+      )}
+    </button>
+  );
+}
+
+function PrRow({ url, taskId }: { url: string; taskId: string }) {
+  const { safeUrl, title, stateLabel, Icon, iconColor } = usePrArtifact(url);
+  const setReviewMode = useReviewNavigationStore((s) => s.setReviewMode);
+  const setSelectedPrUrl = useReviewNavigationStore((s) => s.setSelectedPrUrl);
+
+  const [countsWanted, setCountsWanted] = useState(false);
+  const comments = usePrComments(countsWanted ? safeUrl : null);
+  const threads = usePrReviewThreads(countsWanted ? safeUrl : null);
+
+  const commentCount =
+    (comments.data?.length ?? 0) +
+    (threads.data ?? []).reduce(
+      (sum, thread) => sum + thread.comments.length,
+      0,
+    );
+  const detailParts = [
+    stateLabel,
+    comments.data || threads.data
+      ? `${commentCount} ${commentCount === 1 ? "comment" : "comments"}`
+      : null,
+  ].filter(Boolean);
+
+  return (
+    <ArtifactListRow
+      icon={
+        <Icon
+          size={14}
+          weight="bold"
+          className="shrink-0"
+          style={{ color: iconColor }}
+        />
+      }
+      title={title}
+      detail={detailParts.join(" · ") || null}
+      onHoverStart={() => setCountsWanted(true)}
+      onOpen={
+        safeUrl
+          ? () => {
+              setSelectedPrUrl(taskId, safeUrl);
+              setReviewMode(taskId, "split");
+            }
+          : undefined
+      }
+    />
+  );
+}
+
+function CanvasRow({ name, url }: { name: string; url: string | null }) {
+  const parsed = url ? parseHttpsUrl(url) : null;
+  const target = parsed ? parseShareLink(parsed.href) : null;
+  const open =
+    parsed && target
+      ? () => {
+          const currentPostHogUrl = getPostHogUrl("/");
+          const currentPostHogOrigin = currentPostHogUrl
+            ? parseHttpsUrl(currentPostHogUrl)?.origin
+            : null;
+          if (parsed.origin === currentPostHogOrigin) {
+            navigateToShareTarget(target);
+          } else {
+            openExternalUrl(parsed.href);
+          }
+        }
+      : undefined;
+  return (
+    <ArtifactListRow
+      icon={iconForTemplate("", { size: 14, className: "text-violet-9" })}
+      title={name}
+      detail="Canvas"
+      onOpen={open}
+    />
+  );
+}
+
+function PlanRow({
+  taskId,
+  runId,
+  name,
+  storagePath,
+}: {
+  taskId: string;
+  runId: string | null;
+  name: string;
+  storagePath: string | null;
+}) {
+  const client = useOptionalAuthenticatedClient();
+  const canOpen = !!client && !!runId && !!storagePath;
+  const onOpen = canOpen
+    ? () => {
+        client
+          .presignTaskRunArtifact(
+            taskId,
+            runId as string,
+            storagePath as string,
+          )
+          .then((url) => openExternalUrl(url))
+          .catch((error: unknown) => {
+            toast.error("Couldn't open plan", {
+              description:
+                error instanceof Error ? error.message : String(error),
+            });
+          });
+      }
+    : undefined;
+  return (
+    <ArtifactListRow
+      icon={<ClipboardTextIcon size={14} className="shrink-0 text-amber-9" />}
+      title={name}
+      detail="Plan"
+      external={canOpen}
+      onOpen={onOpen}
+    />
+  );
+}
+
+export function TaskArtifactsList({
+  task,
+  timeline,
+}: {
+  task: Task;
+  timeline: ThreadTimelineRow<TaskThreadMessage>[];
+}) {
+  const { runs } = useTaskRuns(task.id);
+  const rows = useMemo(
+    () => buildRows(task, timeline, runs),
+    [task, timeline, runs],
+  );
+
+  if (rows.length === 0) {
+    return (
+      <Empty className="h-full border-0">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <PackageIcon size={18} />
+          </EmptyMedia>
+          <EmptyTitle>No artifacts yet</EmptyTitle>
+          <EmptyDescription>
+            Pull requests and canvases produced while working on this task show
+            up here.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5 p-2">
+      {rows.map((row) =>
+        row.kind === "pr" ? (
+          <PrRow key={row.key} url={row.url} taskId={task.id} />
+        ) : row.kind === "canvas" ? (
+          <CanvasRow key={row.key} name={row.name} url={row.url} />
+        ) : row.kind === "plan" ? (
+          <PlanRow
+            key={row.key}
+            taskId={task.id}
+            runId={row.runId}
+            name={row.name}
+            storagePath={row.storagePath}
+          />
+        ) : (
+          <ArtifactListRow
+            key={row.key}
+            icon={<SlackLogoIcon size={14} className="shrink-0 text-gray-11" />}
+            title="Slack thread"
+            detail="External"
+            external
+            onOpen={() => openExternalUrl(row.url)}
+          />
+        ),
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ThreadPanel.tsx b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
index 8b242509ee..6e54d9e7f8 100644
--- a/packages/ui/src/features/canvas/components/ThreadPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadPanel.tsx
@@ -7,19 +7,11 @@ import {
   TrashIcon,
   XIcon,
 } from "@phosphor-icons/react";
-import {
-  buildThreadTimeline,
-  deriveThreadAgentStatus,
-  hasAgentMention,
-  shouldSuspendThreadSession,
-  type ThreadAgentStatus,
-  type ThreadArtifact,
-  type ThreadTimelineRow,
+import type {
+  ThreadAgentStatus,
+  ThreadArtifact,
+  ThreadTimelineRow,
 } from "@posthog/core/canvas/threadTimeline";
-import {
-  getPrVisualConfig,
-  parsePrNumber,
-} from "@posthog/core/git-interaction/prStatus";
 import {
   Avatar,
   AvatarFallback,
@@ -47,44 +39,27 @@ import {
   ThreadItemGutter,
   ThreadItemHeader,
 } from "@posthog/quill";
-import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import type {
   Task,
   TaskThreadMessage,
   UserBasic,
 } from "@posthog/shared/domain-types";
-import { isTerminalStatus } from "@posthog/shared/domain-types";
-import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
 import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
-import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
 import { TaskCard } from "@posthog/ui/features/canvas/components/ChannelFeedView";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
 import { MentionComposer } from "@posthog/ui/features/canvas/components/MentionComposer";
 import { MentionText } from "@posthog/ui/features/canvas/components/MentionText";
 import { ThreadTimestamp } from "@posthog/ui/features/canvas/components/ThreadTimestamp";
-import { useOrgMembers } from "@posthog/ui/features/canvas/hooks/useOrgMembers";
-import {
-  useDeleteTaskThreadMessage,
-  usePostTaskThreadMessage,
-  usePostTaskThreadMessageToAgent,
-  useSendTaskThreadMessageToAgent,
-  useTaskThread,
-} from "@posthog/ui/features/canvas/hooks/useTaskThread";
+import { useThreadConversation } from "@posthog/ui/features/canvas/hooks/useThreadConversation";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
-import { getPrVisualIcon } from "@posthog/ui/features/git-interaction/prIcon";
-import { usePrDetails } from "@posthog/ui/features/git-interaction/usePrDetails";
-import { useSessionConnection } from "@posthog/ui/features/sessions/hooks/useSessionConnection";
-import { useSessionViewState } from "@posthog/ui/features/sessions/hooks/useSessionViewState";
-import { usePendingPermissionsForTask } from "@posthog/ui/features/sessions/sessionStore";
+import { usePrArtifact } from "@posthog/ui/features/git-interaction/usePrArtifact";
 import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
-import { toast } from "@posthog/ui/primitives/toast";
-import { track } from "@posthog/ui/shell/analytics";
 import { openExternalUrl } from "@posthog/ui/shell/openExternal";
-import { parseShareLink } from "@posthog/ui/utils/posthogLinks";
+import { parseHttpsUrl, parseShareLink } from "@posthog/ui/utils/posthogLinks";
 import { navigateToShareTarget } from "@posthog/ui/utils/shareLinks";
 import { getPostHogUrl } from "@posthog/ui/utils/urls";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 export function ThreadMessageRow({
   message,
@@ -215,15 +190,6 @@ function ArtifactCardButton({
   );
 }
 
-function parseHttpsUrl(url: string): URL | null {
-  try {
-    const parsedUrl = new URL(url);
-    return parsedUrl.protocol === "https:" ? parsedUrl : null;
-  } catch {
-    return null;
-  }
-}
-
 function CanvasArtifactCard({
   name,
   url,
@@ -257,28 +223,19 @@ function CanvasArtifactCard({
 }
 
 function PrArtifactCard({ url }: { url: string }) {
-  const parsedUrl = parseHttpsUrl(url);
-  const safeUrl =
-    parsedUrl?.origin === "https://github.com" ? parsedUrl.href : null;
-  const {
-    meta: { state, merged, draft },
-  } = usePrDetails(safeUrl);
-  const config = getPrVisualConfig(state ?? "open", merged, draft);
-  const PrIcon = getPrVisualIcon(config.icon);
-  const prNumber = safeUrl ? parsePrNumber(safeUrl) : null;
+  const { safeUrl, title, stateLabel, Icon, iconColor } = usePrArtifact(url);
   return (
     <ArtifactCardButton
       icon={
-        <PrIcon
+        <Icon
           size={14}
           weight="bold"
           className="shrink-0"
-          style={{ color: `var(--${config.color}-9)` }}
+          style={{ color: iconColor }}
         />
       }
-      title={prNumber ? `Pull request #${prNumber}` : "Pull request"}
-      // Only show the resolved state once we have it, to avoid a flash of "Open".
-      detail={state ? config.label : null}
+      title={title}
+      detail={stateLabel}
       onOpen={safeUrl ? () => openExternalUrl(safeUrl) : undefined}
     />
   );
@@ -319,7 +276,7 @@ export function ThreadArtifactRow({
   );
 }
 
-function ThreadLoadingState() {
+export function ThreadLoadingState() {
   return (
     <Empty className="h-full border-0">
       <EmptyHeader>
@@ -332,11 +289,15 @@ function ThreadLoadingState() {
   );
 }
 
-function ThreadHeader({
+/** The panel's title row and window controls. Shared with ActivityPanel, which
+ *  is the same chrome under a different title. */
+export function ThreadPanelHeader({
+  title,
   onClose,
   onToggleCollapsed,
   onOpenFull,
 }: {
+  title: string;
   onClose?: () => void;
   onToggleCollapsed?: () => void;
   onOpenFull?: () => void;
@@ -344,7 +305,7 @@ function ThreadHeader({
   return (
     <div className="flex items-center gap-1 border-border border-b px-3 py-2">
       <div className="min-w-0 flex-1">
-        <span className="block font-medium text-sm">Thread</span>
+        <span className="block font-medium text-sm">{title}</span>
       </div>
       {onOpenFull && (
         <Button
@@ -360,7 +321,7 @@ function ThreadHeader({
         <Button
           variant="default"
           size="icon-sm"
-          aria-label="Collapse thread"
+          aria-label={`Collapse ${title.toLowerCase()}`}
           onClick={onToggleCollapsed}
         >
           <CaretRightIcon size={14} />
@@ -370,7 +331,7 @@ function ThreadHeader({
         <Button
           variant="default"
           size="icon-sm"
-          aria-label="Close thread"
+          aria-label={`Close ${title.toLowerCase()}`}
           onClick={onClose}
         >
           <XIcon size={14} />
@@ -380,7 +341,7 @@ function ThreadHeader({
   );
 }
 
-function ThreadTimeline({
+export function ThreadTimeline({
   timeline,
   isReady,
   currentUserUuid,
@@ -446,7 +407,7 @@ function ThreadTimeline({
   );
 }
 
-function ThreadReplyComposer({
+export function ThreadReplyComposer({
   draft,
   onDraftChange,
   onSubmit,
@@ -509,151 +470,36 @@ function ThreadConversation({
   onOpenFull?: () => void;
   showTaskSummary: boolean;
 }) {
-  const taskId = task.id;
-  const client = useOptionalAuthenticatedClient();
-  const { data: currentUser } = useCurrentUser({ client });
-
-  const { messages, isLoading } = useTaskThread(taskId);
-  const { postMessage, isPosting } = usePostTaskThreadMessage(taskId);
-  const { postMessageToAgent, isPostingToAgent } =
-    usePostTaskThreadMessageToAgent(taskId);
-  const { deleteMessage } = useDeleteTaskThreadMessage(taskId);
-  const { sendToAgent, isSending } = useSendTaskThreadMessageToAgent(taskId);
-  const isSendingToAgent = isPostingToAgent || isSending;
-  const { members } = useOrgMembers();
-
-  const {
-    session,
-    repoPath,
-    isCloud,
-    events,
-    cloudStatus,
-    isPromptPending,
-    isInitializing,
-    hasError,
-    errorTitle,
-  } = useSessionViewState(taskId, task);
-  useSessionConnection({
-    taskId,
-    task,
-    session,
-    repoPath,
-    isCloud,
-    isSuspended: shouldSuspendThreadSession({
-      isCloud,
-      hasRun: Boolean(task.latest_run?.id),
-      hasSession: Boolean(session),
-    }),
+  const conversation = useThreadConversation(task, {
+    surface: "thread_panel",
   });
-  const pendingPermissions = usePendingPermissionsForTask(taskId);
-
-  const agentStatus = useMemo(
-    () =>
-      deriveThreadAgentStatus({
-        hasActivity: events.length > 0 || !!task.latest_run,
-        hasError,
-        cloudStatus,
-        errorTitle,
-        pendingPermissionCount: pendingPermissions.size,
-        isPromptPending,
-        isInitializing,
-      }),
-    [
-      events.length,
-      task.latest_run,
-      hasError,
-      cloudStatus,
-      errorTitle,
-      pendingPermissions.size,
-      isPromptPending,
-      isInitializing,
-    ],
-  );
-
-  const timeline = useMemo(() => buildThreadTimeline(messages), [messages]);
+  const {
+    timeline,
+    agentStatus,
+    isReady,
+    members,
+    currentUser,
+    isTaskAuthor,
+    canForward,
+    draft,
+    setDraft,
+    isSubmitDisabled,
+    submit,
+    sendMessageToAgent,
+    deleteMessage,
+    onMentionInsert,
+  } = conversation;
 
-  const [draft, setDraft] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
-
-  const handleMentionInsert = useCallback(
-    (member: UserBasic) => {
-      track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
-        action_type: "mention_member",
-        surface: "thread_panel",
-        task_id: taskId,
-        mentioned_user_id: member.uuid,
-      });
-    },
-    [taskId],
-  );
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll when rendered thread content changes
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
   }, [timeline, agentStatus?.phase]);
 
-  const isTaskAuthor =
-    !!currentUser?.uuid && currentUser.uuid === task.created_by?.uuid;
-  const canForward =
-    !!task.latest_run &&
-    !isTerminalStatus(task.latest_run.status) &&
-    !isSendingToAgent;
-
-  const submit = async () => {
-    const content = draft.trim();
-    if (!content || isPosting || isSendingToAgent) return;
-    const sendToAgentRequested = hasAgentMention(content);
-    if (sendToAgentRequested && (!isTaskAuthor || !canForward)) {
-      toast.error("Couldn't send to agent", {
-        description:
-          "Only the task author can @agent while the task has an active run.",
-      });
-      return;
-    }
-    setDraft("");
-    try {
-      if (sendToAgentRequested) {
-        const { sendError } = await postMessageToAgent(content);
-        if (sendError) {
-          toast.error("Message posted, but couldn't send it to the agent", {
-            description:
-              sendError instanceof Error
-                ? sendError.message
-                : String(sendError),
-          });
-        }
-      } else {
-        await postMessage(content);
-      }
-    } catch (error) {
-      setDraft(content);
-      toast.error("Couldn't post message", {
-        description: error instanceof Error ? error.message : String(error),
-      });
-    }
-  };
-
-  const handleSendToAgent = (messageId: string) => {
-    sendToAgent(messageId).catch((error: unknown) => {
-      toast.error("Couldn't send message to agent", {
-        description: error instanceof Error ? error.message : String(error),
-      });
-    });
-  };
-
-  const handleDelete = (messageId: string) => {
-    deleteMessage(messageId).catch((error: unknown) => {
-      toast.error("Couldn't delete message", {
-        description: error instanceof Error ? error.message : String(error),
-      });
-    });
-  };
-
-  const isReady = !isInitializing && !isLoading;
-
   return (
     <div className="flex h-full min-w-0 flex-col bg-gray-1">
-      <ThreadHeader
+      <ThreadPanelHeader
+        title="Thread"
         onOpenFull={onOpenFull}
         onToggleCollapsed={onToggleCollapsed}
         onClose={onClose}
@@ -672,8 +518,8 @@ function ThreadConversation({
           currentUserEmail={currentUser?.email}
           isTaskAuthor={isTaskAuthor}
           canForward={canForward}
-          onSendToAgent={handleSendToAgent}
-          onDelete={handleDelete}
+          onSendToAgent={sendMessageToAgent}
+          onDelete={deleteMessage}
         />
       </div>
 
@@ -685,8 +531,8 @@ function ThreadConversation({
         onSubmit={submit}
         members={members}
         allowAgentMention={isTaskAuthor && canForward}
-        onMentionInsert={handleMentionInsert}
-        disabled={!draft.trim() || isPosting || isSendingToAgent}
+        onMentionInsert={onMentionInsert}
+        disabled={isSubmitDisabled}
       />
     </div>
   );
diff --git a/packages/ui/src/features/canvas/components/ThreadSidebar.tsx b/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
index 4a81cf8700..1dfa13cb29 100644
--- a/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
+++ b/packages/ui/src/features/canvas/components/ThreadSidebar.tsx
@@ -1,15 +1,15 @@
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
+import { ActivityPanel } from "@posthog/ui/features/canvas/components/ActivityPanel";
 import { ThreadPanel } from "@posthog/ui/features/canvas/components/ThreadPanel";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { useThreadPanelStore } from "@posthog/ui/features/canvas/stores/threadPanelStore";
 import { ResizableSidebar } from "@posthog/ui/primitives/ResizableSidebar";
 import { track } from "@posthog/ui/shell/analytics";
 import { useState } from "react";
 
-// The right-hand dock hosting a task's ThreadPanel: a thin rail when
-// collapsed, a resizable sidebar otherwise. Shared by the channel feed and the
-// task detail route; owns the panel-store size/collapse reads so parents don't
-// re-render on every resize tick.
+// The right-hand dock for a task's thread (collapsible, resizable). Flag on
+// swaps the legacy ThreadPanel for the tabbed ActivityPanel.
 export function ThreadSidebar({
   taskId,
   channelId,
@@ -31,19 +31,21 @@ export function ThreadSidebar({
   const setWidth = useThreadPanelStore((s) => s.setWidth);
   const setCollapsed = useThreadPanelStore((s) => s.setCollapsed);
   const [isResizing, setIsResizing] = useState(false);
+  const channelsLayout = useChannelsLayout();
+  const Panel = channelsLayout ? ActivityPanel : ThreadPanel;
 
   const toggleCollapsed = (next: boolean) => {
     setCollapsed(next);
     track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
       action_type: next ? "collapse_thread" : "expand_thread",
-      surface: "thread_panel",
+      surface: channelsLayout ? "activity_panel" : "thread_panel",
       task_id: taskId,
     });
   };
 
   if (collapsed) {
     return (
-      <ThreadPanel
+      <Panel
         taskId={taskId}
         channelId={channelId}
         task={task}
@@ -62,7 +64,7 @@ export function ThreadSidebar({
       setIsResizing={setIsResizing}
       side="right"
     >
-      <ThreadPanel
+      <Panel
         taskId={taskId}
         channelId={channelId}
         task={task}
diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelArtifacts.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelArtifacts.tsx
index d91d91d5b4..b55529a42a 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelArtifacts.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelArtifacts.tsx
@@ -1,10 +1,6 @@
 import { CaretRightIcon } from "@phosphor-icons/react";
 import type { ChannelTaskRecord } from "@posthog/core/canvas/channelTaskSchemas";
 import type { DashboardSummary } from "@posthog/core/canvas/dashboardSchemas";
-import {
-  getPrVisualConfig,
-  parsePrNumber,
-} from "@posthog/core/git-interaction/prStatus";
 import { formatRelativeTimeShort } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { useArchivedTaskIds } from "@posthog/ui/features/archive/useArchivedTaskIds";
@@ -12,8 +8,7 @@ import { ChannelHeader } from "@posthog/ui/features/canvas/components/ChannelHea
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
 import { useChannelTasks } from "@posthog/ui/features/canvas/hooks/useChannelTasks";
 import { useDashboards } from "@posthog/ui/features/canvas/hooks/useDashboards";
-import { getPrVisualIcon } from "@posthog/ui/features/git-interaction/prIcon";
-import { usePrDetails } from "@posthog/ui/features/git-interaction/usePrDetails";
+import { usePrArtifact } from "@posthog/ui/features/git-interaction/usePrArtifact";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { track } from "@posthog/ui/shell/analytics";
@@ -159,7 +154,7 @@ export function WebsiteChannelArtifacts({ channelId }: { channelId: string }) {
                   title={item.title}
                   prUrl={item.prUrl}
                   ts={item.ts}
-                  onClick={() => openPr(item.prUrl)}
+                  onClick={openPr}
                 />
               ),
             )}
@@ -171,8 +166,8 @@ export function WebsiteChannelArtifacts({ channelId }: { channelId: string }) {
 }
 
 // A PR artifact row. The PR's lifecycle state (open / draft / merged / closed)
-// is fetched per-URL (deduped + cached by usePrDetails) so the icon and label
-// reflect the live state.
+// comes from usePrArtifact, which also gates the URL — PR links come from run
+// output, so a row must not fetch from whatever host that names.
 function PrArtifactRow({
   title,
   prUrl,
@@ -182,37 +177,28 @@ function PrArtifactRow({
   title: string;
   prUrl: string;
   ts: number;
-  onClick: () => void;
+  onClick: (safeUrl: string) => void;
 }) {
   const {
-    meta: { state, merged, draft },
-  } = usePrDetails(prUrl);
-  const config = getPrVisualConfig(state ?? "open", merged, draft);
-  const PrIcon = getPrVisualIcon(config.icon);
-  const prNumber = parsePrNumber(prUrl);
+    safeUrl,
+    title: prTitle,
+    stateLabel,
+    Icon,
+    iconColor,
+    accentColor,
+  } = usePrArtifact(prUrl);
 
-  const subtitle = [
-    prNumber ? `Pull request #${prNumber}` : "Pull request",
-    // Only show the resolved state once we have it, to avoid a flash of "Open".
-    state ? config.label : null,
-    formatRelativeTimeShort(ts),
-  ]
+  const subtitle = [prTitle, stateLabel, formatRelativeTimeShort(ts)]
     .filter(Boolean)
     .join(" · ");
 
   return (
     <ArtifactRow
-      accent={config.color}
-      icon={
-        <PrIcon
-          size={15}
-          weight="bold"
-          style={{ color: `var(--${config.color}-9)` }}
-        />
-      }
+      accent={accentColor}
+      icon={<Icon size={15} weight="bold" style={{ color: iconColor }} />}
       title={title}
       subtitle={subtitle}
-      onClick={onClick}
+      onClick={safeUrl ? () => onClick(safeUrl) : undefined}
     />
   );
 }
@@ -228,13 +214,15 @@ function ArtifactRow({
   accent: string;
   title: string;
   subtitle: string;
-  onClick: () => void;
+  /** Absent for a row with nowhere safe to go — a non-github PR link. */
+  onClick?: () => void;
 }) {
   return (
     <button
       type="button"
       onClick={onClick}
-      className="group flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-gray-3"
+      disabled={!onClick}
+      className="group flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-left transition-colors enabled:hover:bg-gray-3"
     >
       <span
         className="flex size-7 shrink-0 items-center justify-center rounded-md"
diff --git a/packages/ui/src/features/canvas/components/WebsiteNewTask.test.tsx b/packages/ui/src/features/canvas/components/WebsiteNewTask.test.tsx
index 0ee1e45e2e..5a3c5bb8bb 100644
--- a/packages/ui/src/features/canvas/components/WebsiteNewTask.test.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteNewTask.test.tsx
@@ -46,7 +46,22 @@ vi.mock("@posthog/ui/shell/analytics", () => ({ track }));
 vi.mock("@tanstack/react-query", () => ({
   useQueryClient: () => ({ setQueryData: vi.fn() }),
 }));
-vi.mock("@tanstack/react-router", () => ({ useNavigate: () => vi.fn() }));
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => vi.fn(),
+  // The view reads the matched route so it can pass new-task prefill through.
+  useRouterState: ({
+    select,
+  }: {
+    select: (s: {
+      matches: { routeId: string; params: Record<string, string> }[];
+    }) => unknown;
+  }) =>
+    select({
+      matches: [
+        { routeId: "/website/$channelId/new", params: { channelId: "chan-1" } },
+      ],
+    }),
+}));
 
 import { WebsiteNewTask } from "./WebsiteNewTask";
 
diff --git a/packages/ui/src/features/canvas/components/WebsiteNewTask.tsx b/packages/ui/src/features/canvas/components/WebsiteNewTask.tsx
index 37863bbae8..5f1009927f 100644
--- a/packages/ui/src/features/canvas/components/WebsiteNewTask.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteNewTask.tsx
@@ -11,6 +11,7 @@ import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { ResizableSidebar } from "@posthog/ui/primitives/ResizableSidebar";
 import { toast } from "@posthog/ui/primitives/toast";
+import { useAppView } from "@posthog/ui/router/useAppView";
 import { track } from "@posthog/ui/shell/analytics";
 import { Flex } from "@radix-ui/themes";
 import { useQueryClient } from "@tanstack/react-query";
@@ -23,6 +24,7 @@ import { useCallback, useMemo, useState } from "react";
 // channel folder on the project's desktop_file_system surface.
 export function WebsiteNewTask({ channelId }: { channelId: string }) {
   const navigate = useNavigate();
+  const view = useAppView();
   const queryClient = useQueryClient();
   const { fileTask } = useChannelTaskMutations();
   const { channels } = useChannels();
@@ -112,6 +114,13 @@ export function WebsiteNewTask({ channelId }: { channelId: string }) {
           channelName={channelName}
           channelContextId={channelId}
           allowNoRepo
+          // So a prompt handed to openTaskInput survives routing into a channel.
+          initialPrompt={view.initialPrompt}
+          initialPromptKey={view.taskInputRequestId}
+          initialCloudRepository={view.initialCloudRepository}
+          initialModel={view.initialModel}
+          initialMode={view.initialMode}
+          reportAssociation={view.reportAssociation}
           suggestions={CHANNEL_TASK_SUGGESTIONS}
           onSuggestionSelect={(label) =>
             track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
diff --git a/packages/ui/src/features/canvas/components/channelGlyph.test.tsx b/packages/ui/src/features/canvas/components/channelGlyph.test.tsx
new file mode 100644
index 0000000000..c5c9721736
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/channelGlyph.test.tsx
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { isPrivateChannel } from "./channelGlyph";
+
+describe("isPrivateChannel", () => {
+  it.each([
+    ["me", true],
+    ["  Me  ", true],
+    ["ME", true],
+    ["code", false],
+    ["posthog-feedback", false],
+    // Not a prefix match: only the personal channel itself is private.
+    ["meeting-notes", false],
+    ["team-me", false],
+    [undefined, false],
+    ["", false],
+  ])("%s -> %s", (name, expected) => {
+    expect(isPrivateChannel(name)).toBe(expected);
+  });
+});
diff --git a/packages/ui/src/features/canvas/components/channelGlyph.tsx b/packages/ui/src/features/canvas/components/channelGlyph.tsx
new file mode 100644
index 0000000000..f312c0d000
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/channelGlyph.tsx
@@ -0,0 +1,41 @@
+import {
+  HashIcon,
+  type IconWeight,
+  LockSimpleIcon,
+} from "@phosphor-icons/react";
+import {
+  normalizeChannelName,
+  PERSONAL_CHANNEL_NAME,
+} from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import type { ReactNode } from "react";
+
+/**
+ * Whether only its own members can see a channel.
+ *
+ * The personal "#me" channel is the only one today — it is per-user and can't
+ * be shared. Neither the folder `Channel` nor the backend `TaskChannel` carries
+ * a general privacy flag, so this is the one place that has to learn about it
+ * when one lands.
+ */
+export function isPrivateChannel(channelName: string | undefined): boolean {
+  if (!channelName) return false;
+  return normalizeChannelName(channelName) === PERSONAL_CHANNEL_NAME;
+}
+
+/**
+ * A channel's leading glyph: a lock when it's private, otherwise a hash — the
+ * Slack convention, so privacy reads at a glance instead of having to be known.
+ */
+export function channelGlyph(
+  channelName: string | undefined,
+  opts?: { size?: number; className?: string; weight?: IconWeight },
+): ReactNode {
+  const Icon = isPrivateChannel(channelName) ? LockSimpleIcon : HashIcon;
+  return (
+    <Icon
+      size={opts?.size ?? 16}
+      weight={opts?.weight}
+      className={opts?.className}
+    />
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/channelsSidebarStore.ts b/packages/ui/src/features/canvas/components/channelsSidebarStore.ts
index c376b91bb1..eaed603c31 100644
--- a/packages/ui/src/features/canvas/components/channelsSidebarStore.ts
+++ b/packages/ui/src/features/canvas/components/channelsSidebarStore.ts
@@ -1,8 +1,12 @@
+import { SIDEBAR_MIN_WIDTH } from "@posthog/ui/features/sidebar/constants";
 import { createSidebarStore } from "@posthog/ui/shell/createSidebarStore";
 
 export const useChannelsSidebarStore = createSidebarStore({
   name: "channels-sidebar",
-  defaultWidth: 240,
+  defaultWidth: SIDEBAR_MIN_WIDTH,
+  // Also re-clamps the legacy Code width adopted by the migration below.
+  // The channels layout raises the floor further, at runtime (ChannelsSidebar).
+  minWidth: SIDEBAR_MIN_WIDTH,
 });
 
 // One-time migration: the unified layout replaced the Code sidebar (whose
diff --git a/packages/ui/src/features/canvas/freeform/useHomeCanvasView.ts b/packages/ui/src/features/canvas/freeform/useHomeCanvasView.ts
index 6c06041574..904a6cb787 100644
--- a/packages/ui/src/features/canvas/freeform/useHomeCanvasView.ts
+++ b/packages/ui/src/features/canvas/freeform/useHomeCanvasView.ts
@@ -6,9 +6,9 @@ import { useFreeformChatStore } from "@posthog/ui/features/canvas/stores/freefor
 import { toast } from "@posthog/ui/primitives/toast";
 import {
   navigateToChannelDashboard,
-  navigateToChannelNewTask,
   navigateToChannelTask,
 } from "@posthog/ui/router/navigationBridge";
+import { openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { useMutation } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 
@@ -28,7 +28,8 @@ export function useCanvasNavigation(
           navigateToChannelTask(channelId, intent.taskId);
           break;
         case "new-task":
-          navigateToChannelNewTask(channelId);
+          // Via openTaskInput so a stale prefill can't leak into the composer.
+          openTaskInput({ channelId });
           break;
         case "canvas":
           navigateToChannelDashboard(channelId, intent.dashboardId);
diff --git a/packages/ui/src/features/canvas/hooks/useChannelItems.test.tsx b/packages/ui/src/features/canvas/hooks/useChannelItems.test.tsx
new file mode 100644
index 0000000000..b75bdaa76e
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useChannelItems.test.tsx
@@ -0,0 +1,173 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  channels: {
+    channels: [] as { id: string; name: string; path: string }[],
+    isLoading: true,
+  },
+  dashboards: { dashboards: [] as unknown[], isLoading: false },
+  feed: { tasks: [] as unknown[], isLoading: false },
+  currentUser: undefined as { uuid: string; first_name?: string } | undefined,
+  currentUserLoading: false,
+  useBackendChannel: vi.fn(),
+  // Stable identities, mirroring the real hooks — a fresh function per render
+  // would hide the very memoization this file asserts.
+  setPinned: vi.fn(),
+  togglePin: vi.fn(),
+  archiveTask: vi.fn(),
+  navigate: vi.fn(),
+}));
+
+vi.mock("@posthog/ui/features/canvas/hooks/useChannels", () => ({
+  useChannels: () => mocks.channels,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useDashboards", () => ({
+  useDashboards: () => mocks.dashboards,
+  useDashboardMutations: () => ({ setPinned: mocks.setPinned }),
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelFeed", () => ({
+  useChannelFeed: () => mocks.feed,
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useTaskChannels", () => ({
+  PERSONAL_CHANNEL_NAME: "me",
+  useBackendChannel: (name: string | undefined) => {
+    mocks.useBackendChannel(name);
+    return { channel: undefined, isLoading: false };
+  },
+}));
+vi.mock("@posthog/ui/features/archive/useArchivedTaskIds", () => ({
+  useArchivedTaskIds: () => new Set<string>(),
+}));
+vi.mock("@posthog/ui/features/archive/useArchiveTask", () => ({
+  useArchiveTask: () => ({ archiveTask: mocks.archiveTask }),
+}));
+vi.mock("@posthog/ui/features/sidebar/usePinnedTasks", () => ({
+  usePinnedTasks: () => ({
+    pinnedTaskIds: new Set<string>(),
+    togglePin: mocks.togglePin,
+  }),
+}));
+vi.mock("@posthog/ui/features/auth/authClient", () => ({
+  useOptionalAuthenticatedClient: () => undefined,
+}));
+vi.mock("@posthog/ui/features/auth/useCurrentUser", () => ({
+  useCurrentUser: () => ({
+    data: mocks.currentUser,
+    isLoading: mocks.currentUserLoading,
+  }),
+}));
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => mocks.navigate,
+}));
+
+import { useChannelItems } from "./useChannelItems";
+
+const ME = { uuid: "me-uuid", first_name: "Ada", last_name: "Lovelace" };
+
+function canvas(id: string, createdBy?: string) {
+  return {
+    id,
+    channelId: "c1",
+    name: id,
+    templateId: "freeform",
+    createdBy,
+    createdAt: 0,
+    updatedAt: 1_000,
+  };
+}
+
+describe("useChannelItems", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.channels = { channels: [], isLoading: true };
+    mocks.dashboards = { dashboards: [], isLoading: false };
+    mocks.feed = { tasks: [], isLoading: false };
+    mocks.currentUser = undefined;
+    mocks.currentUserLoading = false;
+  });
+
+  // The bug this pins: a placeholder channel name reaches useBackendChannel,
+  // whose resolve-or-create effect provisions a real backend channel named
+  // after the placeholder on every cold load.
+  it("never hands a channel name to the resolver while the list is pending", () => {
+    renderHook(() => useChannelItems("c1"));
+    expect(mocks.useBackendChannel).toHaveBeenCalledWith(undefined);
+    expect(mocks.useBackendChannel).not.toHaveBeenCalledWith("channel");
+  });
+
+  it("reports loading and no items until the channel's identity is known", () => {
+    // Dashboards are keyed on the route param so they can resolve first —
+    // which is exactly how foreign items used to flash into #me.
+    mocks.dashboards = {
+      dashboards: [canvas("d1", "Grace Hopper")],
+      isLoading: false,
+    };
+
+    const { result } = renderHook(() => useChannelItems("c1"));
+
+    expect(result.current.items).toEqual([]);
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it("passes the real name through once the list lands", () => {
+    mocks.channels = {
+      channels: [{ id: "c1", name: "eng", path: "/eng" }],
+      isLoading: false,
+    };
+    renderHook(() => useChannelItems("c1"));
+    expect(mocks.useBackendChannel).toHaveBeenCalledWith("eng");
+  });
+
+  it("filters the personal channel to the viewer once identity resolves", () => {
+    mocks.channels = {
+      channels: [{ id: "c1", name: "me", path: "/me" }],
+      isLoading: false,
+    };
+    mocks.dashboards = {
+      dashboards: [
+        canvas("mine", "Ada Lovelace"),
+        canvas("theirs", "Grace Hopper"),
+      ],
+      isLoading: false,
+    };
+    mocks.currentUser = ME;
+
+    const { result } = renderHook(() => useChannelItems("c1"));
+
+    expect(result.current.items.map((i) => i.id)).toEqual(["mine"]);
+  });
+
+  it("keeps #me private while the viewer is loading", () => {
+    mocks.channels = {
+      channels: [{ id: "c1", name: "me", path: "/me" }],
+      isLoading: false,
+    };
+    mocks.dashboards = {
+      dashboards: [
+        canvas("mine", "Ada Lovelace"),
+        canvas("theirs", "Grace Hopper"),
+      ],
+      isLoading: false,
+    };
+    mocks.currentUser = undefined;
+    mocks.currentUserLoading = true;
+
+    const { result } = renderHook(() => useChannelItems("c1"));
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.items).toEqual([]);
+  });
+
+  it("reports a channel that is not in the project rather than spinning", () => {
+    mocks.channels = {
+      channels: [{ id: "other", name: "eng", path: "/eng" }],
+      isLoading: false,
+    };
+
+    const { result } = renderHook(() => useChannelItems("deleted"));
+
+    expect(result.current.channelMissing).toBe(true);
+    expect(result.current.isLoading).toBe(false);
+  });
+});
diff --git a/packages/ui/src/features/canvas/hooks/useChannelItems.tsx b/packages/ui/src/features/canvas/hooks/useChannelItems.tsx
new file mode 100644
index 0000000000..14014f14f6
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useChannelItems.tsx
@@ -0,0 +1,153 @@
+import {
+  buildChannelItems,
+  type ChannelItemModel,
+  type ChannelItemOwner,
+} from "@posthog/core/canvas/channelItems";
+import { useArchivedTaskIds } from "@posthog/ui/features/archive/useArchivedTaskIds";
+import { useArchiveTask } from "@posthog/ui/features/archive/useArchiveTask";
+import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
+import type { ChannelItemActions } from "@posthog/ui/features/canvas/components/ChannelItemRow";
+import { useChannelFeed } from "@posthog/ui/features/canvas/hooks/useChannelFeed";
+import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
+import {
+  useDashboardMutations,
+  useDashboards,
+} from "@posthog/ui/features/canvas/hooks/useDashboards";
+import {
+  PERSONAL_CHANNEL_NAME,
+  useBackendChannel,
+} from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
+import { usePinnedTasks } from "@posthog/ui/features/sidebar/usePinnedTasks";
+import { toast } from "@posthog/ui/primitives/toast";
+import { useNavigate } from "@tanstack/react-router";
+import { useMemo } from "react";
+
+/**
+ * A channel's canvases + task feed as merged, newest-first items, plus the row
+ * actions and the viewer's identity for the recent-list filters.
+ *
+ * The channel's *name* is resolved here rather than accepted as an argument: it
+ * feeds `useBackendChannel`, whose resolve-or-create effect provisions a backend
+ * channel for any name it's handed. A caller with a half-loaded channel list has
+ * nothing truthful to pass, and a placeholder would create a real channel named
+ * after the placeholder. While the name is unknown the hook reports loading and
+ * yields nothing — which also keeps the personal-channel ownership filter from
+ * running against an identity we haven't established yet.
+ */
+export function useChannelItems(channelId: string): {
+  items: ChannelItemModel[];
+  actions: ChannelItemActions;
+  /** Who the viewer is, for the created-by filter. */
+  me: ChannelItemOwner;
+  isLoading: boolean;
+  /** The channel id resolves to no channel in this project. */
+  channelMissing: boolean;
+} {
+  const navigate = useNavigate();
+
+  const { channels, isLoading: channelsLoading } = useChannels();
+  const channel = channels.find((c) => c.id === channelId);
+  const channelName = channel?.name;
+  const identityKnown = channelName !== undefined;
+  const isPersonal = channelName === PERSONAL_CHANNEL_NAME;
+
+  const { dashboards, isLoading: dashboardsLoading } = useDashboards(channelId);
+  const { channel: backendChannel, isLoading: channelLoading } =
+    useBackendChannel(channelName);
+  const { tasks: feedTasks, isLoading: feedLoading } = useChannelFeed(
+    backendChannel?.id,
+  );
+  const archivedTaskIds = useArchivedTaskIds();
+  const { pinnedTaskIds, togglePin } = usePinnedTasks();
+  const { archiveTask } = useArchiveTask({ navigateSpace: "website" });
+  const { setPinned: setCanvasPinned } = useDashboardMutations();
+  const client = useOptionalAuthenticatedClient();
+  const { data: currentUser, isLoading: viewerLoading } = useCurrentUser({
+    client,
+  });
+
+  const meUuid = currentUser?.uuid ?? null;
+  const meName = currentUser ? userDisplayName(currentUser) : null;
+  const me = useMemo<ChannelItemOwner>(
+    () => ({ uuid: meUuid, name: meName }),
+    [meUuid, meName],
+  );
+  const viewerKnown = meUuid != null || meName != null;
+
+  const items = useMemo<ChannelItemModel[]>(
+    () =>
+      identityKnown && (!isPersonal || viewerKnown)
+        ? buildChannelItems({
+            dashboards,
+            feedTasks,
+            archivedTaskIds,
+            pinnedTaskIds,
+            // The personal channel is yours — but don't filter until we know
+            // who you are, or #me flashes everyone's items on a cold load.
+            ownedBy: isPersonal && viewerKnown ? me : null,
+          })
+        : [],
+    [
+      identityKnown,
+      dashboards,
+      feedTasks,
+      archivedTaskIds,
+      pinnedTaskIds,
+      isPersonal,
+      viewerKnown,
+      me,
+    ],
+  );
+
+  const actions = useMemo<ChannelItemActions>(
+    () => ({
+      open: (item) => {
+        if (item.kind === "canvas") {
+          void navigate({
+            to: "/website/$channelId/dashboards/$dashboardId",
+            params: { channelId, dashboardId: item.id },
+          });
+        } else {
+          void navigate({
+            to: "/website/$channelId/tasks/$taskId",
+            params: { channelId, taskId: item.id },
+          });
+        }
+      },
+      togglePin: (item) => {
+        const pin =
+          item.kind === "canvas"
+            ? setCanvasPinned(item.id, !item.pinned)
+            : togglePin(item.id);
+        pin.catch(() => {
+          toast.error("Couldn't update pin");
+        });
+      },
+      archive: (item) => {
+        void archiveTask({ taskId: item.id });
+      },
+    }),
+    [channelId, navigate, setCanvasPinned, togglePin, archiveTask],
+  );
+
+  // A channel that isn't in the list will never resolve, so stop reporting
+  // loading and let the caller say so instead of spinning forever.
+  const channelMissing = !channelsLoading && !channel;
+
+  return {
+    items,
+    actions,
+    me,
+    isLoading:
+      !channelMissing &&
+      (channelsLoading ||
+        !identityKnown ||
+        dashboardsLoading ||
+        channelLoading ||
+        feedLoading ||
+        (isPersonal && viewerLoading)),
+    channelMissing,
+  };
+}
diff --git a/packages/ui/src/features/canvas/hooks/useChannelsLayout.ts b/packages/ui/src/features/canvas/hooks/useChannelsLayout.ts
new file mode 100644
index 0000000000..2d891f42be
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useChannelsLayout.ts
@@ -0,0 +1,15 @@
+import { CHANNELS_LAYOUT_FLAG, PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
+
+/**
+ * The single gate for the new channels layout — read this, not the raw flag.
+ * No dev default, so dev matches prod; bluebird keeps its own backend guard.
+ */
+export function useChannelsLayout(): boolean {
+  const bluebirdEnabled = useFeatureFlag(
+    PROJECT_BLUEBIRD_FLAG,
+    import.meta.env.DEV,
+  );
+  const layoutEnabled = useFeatureFlag(CHANNELS_LAYOUT_FLAG, false);
+  return layoutEnabled && bluebirdEnabled;
+}
diff --git a/packages/ui/src/features/canvas/hooks/useCurrentChannel.test.tsx b/packages/ui/src/features/canvas/hooks/useCurrentChannel.test.tsx
new file mode 100644
index 0000000000..d023026f98
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useCurrentChannel.test.tsx
@@ -0,0 +1,80 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const channelsResult = vi.hoisted(() => ({
+  current: {
+    channels: [] as { id: string; name: string; path: string }[],
+    isLoading: true,
+  },
+}));
+vi.mock("@posthog/ui/features/canvas/hooks/useChannels", () => ({
+  useChannels: () => channelsResult.current,
+}));
+
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { useCurrentChannel } from "./useCurrentChannel";
+
+function channel(id: string, name: string) {
+  return { id, name, path: `/${name}` };
+}
+
+describe("useCurrentChannel", () => {
+  beforeEach(() => {
+    useCurrentChannelStore.setState({ currentChannelId: null });
+    channelsResult.current = { channels: [], isLoading: true };
+  });
+
+  it("holds a scoped id while the channel list is still loading", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "c1" });
+    channelsResult.current = { channels: [], isLoading: true };
+
+    const { result } = renderHook(() => useCurrentChannel({ enabled: true }));
+
+    // A pending list is not evidence of absence — clearing here would unscope
+    // the sidebar on every cold load.
+    expect(useCurrentChannelStore.getState().currentChannelId).toBe("c1");
+    expect(result.current.currentChannelId).toBeNull();
+  });
+
+  it("resolves the channel once the list lands", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "c1" });
+    channelsResult.current = {
+      channels: [channel("c1", "eng")],
+      isLoading: false,
+    };
+
+    const { result } = renderHook(() => useCurrentChannel({ enabled: true }));
+
+    expect(result.current.currentChannelId).toBe("c1");
+    expect(result.current.channels.map((c) => c.name)).toEqual(["eng"]);
+    // Resolving must not clear a channel that does exist.
+    expect(useCurrentChannelStore.getState().currentChannelId).toBe("c1");
+  });
+
+  it("clears a channel the loaded list does not contain", () => {
+    // The shape of a project switch: the store still names the old project's
+    // channel, and the refetched list has never heard of it.
+    useCurrentChannelStore.setState({ currentChannelId: "from-old-project" });
+    channelsResult.current = {
+      channels: [channel("c9", "new")],
+      isLoading: false,
+    };
+
+    const { result } = renderHook(() => useCurrentChannel({ enabled: true }));
+
+    expect(useCurrentChannelStore.getState().currentChannelId).toBeNull();
+    expect(result.current.currentChannelId).toBeNull();
+  });
+
+  it("unscopes entirely when the layout is disabled", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "c1" });
+    channelsResult.current = {
+      channels: [channel("c1", "eng")],
+      isLoading: false,
+    };
+
+    renderHook(() => useCurrentChannel({ enabled: false }));
+
+    expect(useCurrentChannelStore.getState().currentChannelId).toBeNull();
+  });
+});
diff --git a/packages/ui/src/features/canvas/hooks/useCurrentChannel.ts b/packages/ui/src/features/canvas/hooks/useCurrentChannel.ts
new file mode 100644
index 0000000000..09ef81bdcf
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useCurrentChannel.ts
@@ -0,0 +1,48 @@
+import {
+  type Channel,
+  useChannels,
+} from "@posthog/ui/features/canvas/hooks/useChannels";
+import {
+  resetCurrentChannel,
+  useCurrentChannelStore,
+} from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { useEffect } from "react";
+
+/**
+ * The scoped channel, resolved against the project's live channel list.
+ *
+ * Sole owner of the invariant "the current channel is a channel that exists in
+ * the current project". The store is a bare id with no project affinity, so a
+ * project switch, a channel deletion, or a route pointing at something stale
+ * would otherwise leave it naming a channel nobody can load — and
+ * `openTaskInput` files new tasks against whatever it holds.
+ *
+ * Self-heals rather than validating at each read site: `openTaskInput` runs
+ * outside React and can't see the channel list, and by the time the auth side
+ * effects call it the query cache has already been cleared.
+ */
+export function useCurrentChannel({ enabled }: { enabled: boolean }): {
+  currentChannelId: string | null;
+  channels: Channel[];
+} {
+  const storedChannelId = useCurrentChannelStore((s) => s.currentChannelId);
+  const { channels, isLoading } = useChannels({ enabled });
+
+  const currentChannel = storedChannelId
+    ? channels.find((c) => c.id === storedChannelId)
+    : undefined;
+  // A pending list is not evidence of absence — only clear once we've actually
+  // seen the project's channels and this one wasn't among them.
+  const isStale = storedChannelId != null && !isLoading && !currentChannel;
+
+  useEffect(() => {
+    if (!enabled || isStale) resetCurrentChannel();
+  }, [enabled, isStale]);
+
+  return {
+    // Never hand back an id we couldn't resolve, so callers can't navigate to
+    // or file against a dead channel in the window before the effect runs.
+    currentChannelId: currentChannel?.id ?? null,
+    channels,
+  };
+}
diff --git a/packages/ui/src/features/canvas/hooks/useStarredChannelSlots.ts b/packages/ui/src/features/canvas/hooks/useStarredChannelSlots.ts
new file mode 100644
index 0000000000..7cff48f1bf
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useStarredChannelSlots.ts
@@ -0,0 +1,44 @@
+import { useChannelStars } from "@posthog/ui/features/canvas/hooks/useChannelStars";
+import {
+  type Channel,
+  useChannels,
+} from "@posthog/ui/features/canvas/hooks/useChannels";
+import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useMemo } from "react";
+
+export const STARRED_HOTKEY_SLOTS = 9;
+
+export function useStarredChannelSlots(): {
+  slots: Channel[];
+  rest: Channel[];
+  slotFor: (channel: Channel) => number | undefined;
+} {
+  const { channels } = useChannels();
+  const { starredRefToShortcutId } = useChannelStars();
+
+  return useMemo(() => {
+    const me = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME) ?? null;
+    const byPath = new Map(channels.map((c) => [c.path, c]));
+    const starred: Channel[] = [];
+    for (const ref of starredRefToShortcutId.keys()) {
+      const channel = byPath.get(ref);
+      if (channel && channel.name !== PERSONAL_CHANNEL_NAME) {
+        starred.push(channel);
+      }
+    }
+    const slots = (me ? [me, ...starred] : starred).slice(
+      0,
+      STARRED_HOTKEY_SLOTS,
+    );
+    const slotted = new Set(slots.map((c) => c.id));
+    const rest = channels
+      .filter((c) => !slotted.has(c.id))
+      .sort((a, b) => a.name.localeCompare(b.name));
+    const slotIndex = new Map(slots.map((c, index) => [c.id, index + 1]));
+    return {
+      slots,
+      rest,
+      slotFor: (channel: Channel) => slotIndex.get(channel.id),
+    };
+  }, [channels, starredRefToShortcutId]);
+}
diff --git a/packages/ui/src/features/canvas/hooks/useTaskRuns.ts b/packages/ui/src/features/canvas/hooks/useTaskRuns.ts
new file mode 100644
index 0000000000..400bb9fc5b
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useTaskRuns.ts
@@ -0,0 +1,20 @@
+import type { TaskRun } from "@posthog/shared/domain-types";
+import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
+
+const TASK_RUNS_POLL_INTERVAL_MS = 30_000;
+
+/** Every run of a task — for gathering artifacts across all runs, not just the latest. */
+export function useTaskRuns(taskId: string | undefined): {
+  runs: TaskRun[];
+  isLoading: boolean;
+} {
+  const query = useAuthenticatedQuery<TaskRun[]>(
+    ["task-runs", taskId ?? "none"],
+    (client) => client.listTaskRuns(taskId as string),
+    {
+      enabled: !!taskId,
+      refetchInterval: TASK_RUNS_POLL_INTERVAL_MS,
+    },
+  );
+  return { runs: query.data ?? [], isLoading: query.isLoading };
+}
diff --git a/packages/ui/src/features/canvas/hooks/useThreadConversation.ts b/packages/ui/src/features/canvas/hooks/useThreadConversation.ts
new file mode 100644
index 0000000000..02e01164cf
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useThreadConversation.ts
@@ -0,0 +1,213 @@
+import {
+  buildThreadTimeline,
+  deriveThreadAgentStatus,
+  hasAgentMention,
+  shouldSuspendThreadSession,
+  type ThreadAgentStatus,
+  type ThreadTimelineRow,
+} from "@posthog/core/canvas/threadTimeline";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import type {
+  Task,
+  TaskThreadMessage,
+  UserBasic,
+} from "@posthog/shared/domain-types";
+import { isTerminalStatus } from "@posthog/shared/domain-types";
+import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
+import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
+import { useOrgMembers } from "@posthog/ui/features/canvas/hooks/useOrgMembers";
+import {
+  useDeleteTaskThreadMessage,
+  usePostTaskThreadMessage,
+  usePostTaskThreadMessageToAgent,
+  useSendTaskThreadMessageToAgent,
+  useTaskThread,
+} from "@posthog/ui/features/canvas/hooks/useTaskThread";
+import { useSessionConnection } from "@posthog/ui/features/sessions/hooks/useSessionConnection";
+import { useSessionViewState } from "@posthog/ui/features/sessions/hooks/useSessionViewState";
+import { usePendingPermissionsForTask } from "@posthog/ui/features/sessions/sessionStore";
+import { toast } from "@posthog/ui/primitives/toast";
+import { track } from "@posthog/ui/shell/analytics";
+import { useCallback, useMemo, useState } from "react";
+
+export type ThreadSurface = "thread_panel" | "activity_panel";
+
+type SessionEvents = ReturnType<typeof useSessionViewState>["events"];
+
+export interface ThreadConversation {
+  timeline: ThreadTimelineRow<TaskThreadMessage>[];
+  agentStatus: ThreadAgentStatus | null;
+  events: SessionEvents;
+  isPromptPending: boolean;
+  isReady: boolean;
+  members: UserBasic[];
+  currentUser: { uuid?: string; email?: string } | undefined;
+  isTaskAuthor: boolean;
+  canForward: boolean;
+  draft: string;
+  setDraft: (value: string) => void;
+  isSubmitDisabled: boolean;
+  submit: () => Promise<void>;
+  sendMessageToAgent: (messageId: string) => void;
+  deleteMessage: (messageId: string) => void;
+  onMentionInsert: (member: UserBasic) => void;
+}
+
+export function useThreadConversation(
+  task: Task,
+  { surface }: { surface: ThreadSurface },
+): ThreadConversation {
+  const taskId = task.id;
+  const client = useOptionalAuthenticatedClient();
+  const { data: currentUser } = useCurrentUser({ client });
+
+  const { messages, isLoading } = useTaskThread(taskId);
+  const { postMessage, isPosting } = usePostTaskThreadMessage(taskId);
+  const { postMessageToAgent, isPostingToAgent } =
+    usePostTaskThreadMessageToAgent(taskId);
+  const { deleteMessage } = useDeleteTaskThreadMessage(taskId);
+  const { sendToAgent, isSending } = useSendTaskThreadMessageToAgent(taskId);
+  const isSendingToAgent = isPostingToAgent || isSending;
+  const { members } = useOrgMembers();
+
+  const {
+    session,
+    repoPath,
+    isCloud,
+    events,
+    cloudStatus,
+    isPromptPending,
+    isInitializing,
+    hasError,
+    errorTitle,
+  } = useSessionViewState(taskId, task);
+  useSessionConnection({
+    taskId,
+    task,
+    session,
+    repoPath,
+    isCloud,
+    isSuspended: shouldSuspendThreadSession({
+      isCloud,
+      hasRun: Boolean(task.latest_run?.id),
+      hasSession: Boolean(session),
+    }),
+  });
+  const pendingPermissions = usePendingPermissionsForTask(taskId);
+
+  const agentStatus = useMemo(
+    () =>
+      deriveThreadAgentStatus({
+        hasActivity: events.length > 0 || !!task.latest_run,
+        hasError,
+        cloudStatus,
+        errorTitle,
+        pendingPermissionCount: pendingPermissions.size,
+        isPromptPending,
+        isInitializing,
+      }),
+    [
+      events.length,
+      task.latest_run,
+      hasError,
+      cloudStatus,
+      errorTitle,
+      pendingPermissions.size,
+      isPromptPending,
+      isInitializing,
+    ],
+  );
+
+  const timeline = useMemo(() => buildThreadTimeline(messages), [messages]);
+
+  const [draft, setDraft] = useState("");
+
+  const onMentionInsert = useCallback(
+    (member: UserBasic) => {
+      track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+        action_type: "mention_member",
+        surface,
+        task_id: taskId,
+        mentioned_user_id: member.uuid,
+      });
+    },
+    [taskId, surface],
+  );
+
+  const isTaskAuthor =
+    !!currentUser?.uuid && currentUser.uuid === task.created_by?.uuid;
+  const canForward =
+    !!task.latest_run &&
+    !isTerminalStatus(task.latest_run.status) &&
+    !isSendingToAgent;
+
+  const submit = async () => {
+    const content = draft.trim();
+    if (!content || isPosting || isSendingToAgent) return;
+    const sendToAgentRequested = hasAgentMention(content);
+    if (sendToAgentRequested && (!isTaskAuthor || !canForward)) {
+      toast.error("Couldn't send to agent", {
+        description:
+          "Only the task author can @agent while the task has an active run.",
+      });
+      return;
+    }
+    setDraft("");
+    try {
+      if (sendToAgentRequested) {
+        const { sendError } = await postMessageToAgent(content);
+        if (sendError) {
+          toast.error("Message posted, but couldn't send it to the agent", {
+            description:
+              sendError instanceof Error
+                ? sendError.message
+                : String(sendError),
+          });
+        }
+      } else {
+        await postMessage(content);
+      }
+    } catch (error) {
+      // Hand the draft back rather than losing what they typed.
+      setDraft(content);
+      toast.error("Couldn't post message", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    }
+  };
+
+  const sendMessageToAgent = (messageId: string) => {
+    sendToAgent(messageId).catch((error: unknown) => {
+      toast.error("Couldn't send message to agent", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    });
+  };
+
+  const handleDelete = (messageId: string) => {
+    deleteMessage(messageId).catch((error: unknown) => {
+      toast.error("Couldn't delete message", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    });
+  };
+
+  return {
+    timeline,
+    agentStatus,
+    events,
+    isPromptPending,
+    isReady: !isInitializing && !isLoading,
+    members,
+    currentUser,
+    isTaskAuthor,
+    canForward,
+    draft,
+    setDraft,
+    isSubmitDisabled: !draft.trim() || isPosting || isSendingToAgent,
+    submit,
+    sendMessageToAgent,
+    deleteMessage: handleDelete,
+    onMentionInsert,
+  };
+}
diff --git a/packages/ui/src/features/canvas/hooks/useTrackChannelsSpaceViewed.ts b/packages/ui/src/features/canvas/hooks/useTrackChannelsSpaceViewed.ts
new file mode 100644
index 0000000000..97af010709
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useTrackChannelsSpaceViewed.ts
@@ -0,0 +1,46 @@
+import {
+  ANALYTICS_EVENTS,
+  type SidebarLayout,
+} from "@posthog/shared/analytics-events";
+import { useChannelStars } from "@posthog/ui/features/canvas/hooks/useChannelStars";
+import {
+  type Channel,
+  useChannels,
+} from "@posthog/ui/features/canvas/hooks/useChannels";
+import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { track } from "@posthog/ui/shell/analytics";
+import { useEffect, useRef } from "react";
+
+export function useTrackChannelsSpaceViewed({
+  enabled,
+  layout,
+}: {
+  enabled: boolean;
+  layout: SidebarLayout;
+}): void {
+  const { channels: allChannels, isLoading } = useChannels({ enabled });
+  const { starredRefToShortcutId } = useChannelStars();
+
+  const shared = allChannels.filter(
+    (c: Channel) => c.name !== PERSONAL_CHANNEL_NAME,
+  );
+  const channelCount = shared.length;
+  const starredCount = shared.filter((c: Channel) =>
+    starredRefToShortcutId.has(c.path),
+  ).length;
+
+  const trackedRef = useRef(false);
+  useEffect(() => {
+    if (!enabled) {
+      trackedRef.current = false;
+      return;
+    }
+    if (isLoading || trackedRef.current) return;
+    trackedRef.current = true;
+    track(ANALYTICS_EVENTS.CHANNELS_SPACE_VIEWED, {
+      channel_count: channelCount,
+      starred_count: starredCount,
+      layout,
+    });
+  }, [enabled, isLoading, channelCount, starredCount, layout]);
+}
diff --git a/packages/ui/src/features/canvas/stores/currentChannelStore.ts b/packages/ui/src/features/canvas/stores/currentChannelStore.ts
new file mode 100644
index 0000000000..4c40d6c109
--- /dev/null
+++ b/packages/ui/src/features/canvas/stores/currentChannelStore.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface CurrentChannelState {
+  currentChannelId: string | null;
+  setCurrentChannel: (channelId: string | null) => void;
+}
+
+export const useCurrentChannelStore = create<CurrentChannelState>()((set) => ({
+  currentChannelId: null,
+  setCurrentChannel: (currentChannelId) => set({ currentChannelId }),
+}));
+
+export function resetCurrentChannel(): void {
+  useCurrentChannelStore.setState({ currentChannelId: null });
+}
diff --git a/packages/ui/src/features/code-review/components/CloudReviewPage.tsx b/packages/ui/src/features/code-review/components/CloudReviewPage.tsx
index db6e01f571..39e4a3694e 100644
--- a/packages/ui/src/features/code-review/components/CloudReviewPage.tsx
+++ b/packages/ui/src/features/code-review/components/CloudReviewPage.tsx
@@ -25,6 +25,9 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
   const isReviewOpen = useReviewNavigationStore(
     (s) => (s.reviewModes[taskId] ?? "closed") !== "closed",
   );
+  const selectedPrUrl = useReviewNavigationStore(
+    (s) => s.selectedPrUrls[taskId],
+  );
   const showReviewComments = useDiffViewerStore((s) => s.showReviewComments);
   const {
     effectiveBranch,
@@ -34,7 +37,7 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
     reviewFiles,
     toolCalls,
     isLoading,
-  } = useCloudChangedFiles(taskId, task, isReviewOpen);
+  } = useCloudChangedFiles(taskId, task, isReviewOpen, selectedPrUrl);
   const { commentThreads, commentsLoading } = usePrDetails(prUrl, {
     includeComments: isReviewOpen && showReviewComments,
   });
diff --git a/packages/ui/src/features/code-review/components/ReviewPage.tsx b/packages/ui/src/features/code-review/components/ReviewPage.tsx
index 4954d2ccb4..931f3d9ecb 100644
--- a/packages/ui/src/features/code-review/components/ReviewPage.tsx
+++ b/packages/ui/src/features/code-review/components/ReviewPage.tsx
@@ -97,6 +97,9 @@ export function ReviewPage({ task }: ReviewPageProps) {
   const isReviewOpen = useReviewNavigationStore(
     (s) => (s.reviewModes[taskId] ?? "closed") !== "closed",
   );
+  const selectedPrUrl = useReviewNavigationStore(
+    (s) => s.selectedPrUrls[taskId],
+  );
 
   const {
     effectiveSource,
@@ -105,7 +108,7 @@ export function ReviewPage({ task }: ReviewPageProps) {
     defaultBranch,
     branchSourceAvailable,
     prSourceAvailable,
-  } = useEffectiveDiffSource(taskId);
+  } = useEffectiveDiffSource(taskId, selectedPrUrl);
 
   const showReviewComments = useDiffViewerStore((s) => s.showReviewComments);
   const { commentThreads, commentsLoading } = usePrDetails(prUrl, {
diff --git a/packages/ui/src/features/code-review/hooks/useEffectiveDiffSource.ts b/packages/ui/src/features/code-review/hooks/useEffectiveDiffSource.ts
index e9915ca5b2..1b878c6b31 100644
--- a/packages/ui/src/features/code-review/hooks/useEffectiveDiffSource.ts
+++ b/packages/ui/src/features/code-review/hooks/useEffectiveDiffSource.ts
@@ -23,7 +23,10 @@ export interface EffectiveDiffSource {
   diffStats: DiffStats;
 }
 
-export function useEffectiveDiffSource(taskId: string): EffectiveDiffSource {
+export function useEffectiveDiffSource(
+  taskId: string,
+  prUrlOverride?: string,
+): EffectiveDiffSource {
   const trpc = useHostTRPC();
   const repoPath = useCwd(taskId);
   const workspace = useWorkspace(taskId);
@@ -54,7 +57,8 @@ export function useEffectiveDiffSource(taskId: string): EffectiveDiffSource {
   const hasLocalChanges = diffStats.filesChanged > 0;
   const branchSourceAvailable = !!linkedBranch && aheadOfDefault > 0;
 
-  const prUrl = useTaskPrUrl(taskId, workspace?.mode === "cloud");
+  const taskPrUrl = useTaskPrUrl(taskId, workspace?.mode === "cloud");
+  const prUrl = prUrlOverride ?? taskPrUrl;
   const prSourceAvailable = !!prUrl;
 
   const repoSlug = repoInfo
@@ -62,7 +66,7 @@ export function useEffectiveDiffSource(taskId: string): EffectiveDiffSource {
     : null;
 
   const effectiveSource = resolveDiffSource({
-    configured,
+    configured: prUrlOverride ? "pr" : configured,
     hasLocalChanges,
     linkedBranch,
     aheadOfDefault,
diff --git a/packages/ui/src/features/code-review/reviewNavigationStore.test.ts b/packages/ui/src/features/code-review/reviewNavigationStore.test.ts
index b6d3f413c1..f6fc0dd004 100644
--- a/packages/ui/src/features/code-review/reviewNavigationStore.test.ts
+++ b/packages/ui/src/features/code-review/reviewNavigationStore.test.ts
@@ -7,10 +7,27 @@ describe("reviewNavigationStore", () => {
       activeFilePaths: {},
       scrollRequests: {},
       reviewModes: {},
+      selectedPrUrls: {},
       commentFileFilters: {},
     });
   });
 
+  it("keeps a selected PR until the review closes", () => {
+    const store = useReviewNavigationStore.getState();
+    store.setSelectedPrUrl("task-1", "https://github.com/acme/repo/pull/2");
+    store.setReviewMode("task-1", "split");
+
+    expect(useReviewNavigationStore.getState().selectedPrUrls["task-1"]).toBe(
+      "https://github.com/acme/repo/pull/2",
+    );
+
+    store.setReviewMode("task-1", "closed");
+
+    expect(
+      useReviewNavigationStore.getState().selectedPrUrls["task-1"],
+    ).toBeUndefined();
+  });
+
   it("clears the comment filter when navigating to a file", () => {
     const store = useReviewNavigationStore.getState();
     store.setCommentFileFilter("task-1", "unresolved");
diff --git a/packages/ui/src/features/code-review/reviewNavigationStore.ts b/packages/ui/src/features/code-review/reviewNavigationStore.ts
index cd0bf6f739..dba01207ce 100644
--- a/packages/ui/src/features/code-review/reviewNavigationStore.ts
+++ b/packages/ui/src/features/code-review/reviewNavigationStore.ts
@@ -7,6 +7,7 @@ interface ReviewNavigationStoreState {
   activeFilePaths: Record<string, string | null>;
   scrollRequests: Record<string, string | null>;
   reviewModes: Record<string, ReviewMode>;
+  selectedPrUrls: Record<string, string | undefined>;
   commentFileFilters: Record<string, CommentFileFilter>;
 }
 
@@ -16,6 +17,7 @@ interface ReviewNavigationStoreActions {
   clearScrollRequest: (taskId: string) => void;
   clearTask: (taskId: string) => void;
   setReviewMode: (taskId: string, mode: ReviewMode) => void;
+  setSelectedPrUrl: (taskId: string, url: string) => void;
   setCommentFileFilter: (taskId: string, filter: CommentFileFilter) => void;
   getReviewMode: (taskId: string) => ReviewMode;
 }
@@ -28,6 +30,7 @@ export const useReviewNavigationStore = create<ReviewNavigationStore>()(
     activeFilePaths: {},
     scrollRequests: {},
     reviewModes: {},
+    selectedPrUrls: {},
     commentFileFilters: {},
 
     setActiveFilePath: (taskId, path) =>
@@ -57,11 +60,23 @@ export const useReviewNavigationStore = create<ReviewNavigationStore>()(
           ...state.commentFileFilters,
           [taskId]: "none",
         },
+        selectedPrUrls: { ...state.selectedPrUrls, [taskId]: undefined },
       })),
 
     setReviewMode: (taskId, mode) =>
       set((state) => ({
         reviewModes: { ...state.reviewModes, [taskId]: mode },
+        // A row-selected historical PR only applies to this review visit.
+        // Closing restores the task's normal primary-PR resolution.
+        selectedPrUrls:
+          mode === "closed"
+            ? { ...state.selectedPrUrls, [taskId]: undefined }
+            : state.selectedPrUrls,
+      })),
+
+    setSelectedPrUrl: (taskId, url) =>
+      set((state) => ({
+        selectedPrUrls: { ...state.selectedPrUrls, [taskId]: url },
       })),
 
     setCommentFileFilter: (taskId, filter) =>
diff --git a/packages/ui/src/features/command-center/useCommandCenterActiveCount.ts b/packages/ui/src/features/command-center/useCommandCenterActiveCount.ts
new file mode 100644
index 0000000000..a11ee09d12
--- /dev/null
+++ b/packages/ui/src/features/command-center/useCommandCenterActiveCount.ts
@@ -0,0 +1,31 @@
+import { countActiveTaskCells } from "@posthog/core/command-center/grid";
+import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore";
+import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
+import { useTasks } from "@posthog/ui/features/tasks/useTasks";
+import { useMemo } from "react";
+
+/**
+ * How many command-center cells hold a task that still exists.
+ *
+ * Shared by both sidebar shells so their badges can't disagree — and so neither
+ * counts a task that has since been deleted, whose id lingers in the persisted
+ * cell array.
+ */
+export function useCommandCenterActiveCount({
+  enabled = true,
+}: {
+  enabled?: boolean;
+} = {}): number {
+  const showAllUsers = useSidebarStore((s) => s.showAllUsers);
+  const showInternal = useSidebarStore((s) => s.showInternal);
+  const { data: allTasks = [] } = useTasks(
+    { showAllUsers, showInternal },
+    { enabled },
+  );
+  const cells = useCommandCenterStore((s) => s.cells);
+
+  return useMemo(
+    () => countActiveTaskCells(cells, new Set(allTasks.map((t) => t.id))),
+    [cells, allTasks],
+  );
+}
diff --git a/packages/ui/src/features/command/CommandMenu.tsx b/packages/ui/src/features/command/CommandMenu.tsx
index bed635d6a8..532ea11c64 100644
--- a/packages/ui/src/features/command/CommandMenu.tsx
+++ b/packages/ui/src/features/command/CommandMenu.tsx
@@ -3,7 +3,6 @@ import {
   CaretRightIcon,
   ChartLine,
   EnvelopeSimple,
-  HashIcon,
   RepeatIcon,
 } from "@phosphor-icons/react";
 import { workspaceIdSet } from "@posthog/core/command-center/eligibility";
@@ -32,6 +31,7 @@ import {
 } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
 import { useArchivedTaskIds } from "@posthog/ui/features/archive/useArchivedTaskIds";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useTaskChannelMap } from "@posthog/ui/features/canvas/hooks/useTaskChannelMap";
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
@@ -529,7 +529,10 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
           id: `channel-${channel.id}`,
           label: channel.name,
           keywords: "channel",
-          icon: <HashIcon size={12} className="text-gray-11" />,
+          icon: channelGlyph(channel.name, {
+            size: 12,
+            className: "text-muted-foreground",
+          }),
           action: "open-channel" as CommandMenuAction,
           channelId: channel.id,
           onRun: () => {
diff --git a/packages/ui/src/features/command/KeyboardShortcutsSheet.tsx b/packages/ui/src/features/command/KeyboardShortcutsSheet.tsx
index fd919b5081..e95780c085 100644
--- a/packages/ui/src/features/command/KeyboardShortcutsSheet.tsx
+++ b/packages/ui/src/features/command/KeyboardShortcutsSheet.tsx
@@ -1,3 +1,4 @@
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import {
   CATEGORY_LABELS,
   formatHotkeyParts,
@@ -109,7 +110,13 @@ function ShortcutsHeader() {
 }
 
 export function KeyboardShortcutsList() {
-  const shortcutsByCategory = useMemo(() => getShortcutsByCategory(), []);
+  // Several keys change owner with the layout, so the sheet has to know which
+  // one is on rather than listing keys nothing handles.
+  const channelsLayout = useChannelsLayout();
+  const shortcutsByCategory = useMemo(
+    () => getShortcutsByCategory({ channelsLayout }),
+    [channelsLayout],
+  );
 
   const categoryOrder: ShortcutCategory[] = [
     "general",
diff --git a/packages/ui/src/features/command/keyboard-shortcuts.test.ts b/packages/ui/src/features/command/keyboard-shortcuts.test.ts
new file mode 100644
index 0000000000..d164aecc3b
--- /dev/null
+++ b/packages/ui/src/features/command/keyboard-shortcuts.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import {
+  getShortcutsByCategory,
+  KEYBOARD_SHORTCUTS,
+  SHORTCUTS,
+} from "./keyboard-shortcuts";
+
+function idsFor(channelsLayout: boolean): string[] {
+  return Object.values(getShortcutsByCategory({ channelsLayout }))
+    .flat()
+    .map((s) => s.id);
+}
+
+describe("getShortcutsByCategory", () => {
+  it("advertises channel switching only in the channels layout", () => {
+    expect(idsFor(true)).toContain("switch-starred-channel");
+    expect(idsFor(false)).not.toContain("switch-starred-channel");
+  });
+
+  it.each(["switch-task", "new-tab"])(
+    "hides %s in the channels layout, where nothing owns it",
+    (id) => {
+      expect(idsFor(false)).toContain(id);
+      expect(idsFor(true)).not.toContain(id);
+    },
+  );
+
+  it("keeps unmarked shortcuts in both layouts", () => {
+    const unmarked = KEYBOARD_SHORTCUTS.filter((s) => !s.availability).map(
+      (s) => s.id,
+    );
+    const inLayout = new Set(idsFor(true));
+    const outOfLayout = new Set(idsFor(false));
+    for (const id of unmarked) {
+      expect(inLayout.has(id)).toBe(true);
+      expect(outOfLayout.has(id)).toBe(true);
+    }
+  });
+
+  it("defaults to the non-channels layout", () => {
+    expect(
+      Object.values(getShortcutsByCategory())
+        .flat()
+        .map((s) => s.id),
+    ).toEqual(idsFor(false));
+  });
+});
+
+describe("SHORTCUTS", () => {
+  // The Electron View menu binds CmdOrCtrl+0 to "Actual Size" in the main
+  // process, which a renderer preventDefault can't reliably beat.
+  it("leaves mod+0 to the host's reset-zoom accelerator", () => {
+    expect(SHORTCUTS.SWITCH_STARRED_CHANNEL.split(",")).not.toContain("mod+0");
+    expect(SHORTCUTS.RESET_ZOOM).toBe("mod+0");
+  });
+
+  it("offers nine channel slots", () => {
+    expect(SHORTCUTS.SWITCH_STARRED_CHANNEL.split(",")).toHaveLength(9);
+  });
+});
diff --git a/packages/ui/src/features/command/keyboard-shortcuts.ts b/packages/ui/src/features/command/keyboard-shortcuts.ts
index 70dc6870a3..3a30e1e418 100644
--- a/packages/ui/src/features/command/keyboard-shortcuts.ts
+++ b/packages/ui/src/features/command/keyboard-shortcuts.ts
@@ -19,6 +19,11 @@ export const SHORTCUTS = {
   CLOSE_TAB: "mod+w",
   SWITCH_TAB: "ctrl+1,ctrl+2,ctrl+3,ctrl+4,ctrl+5,ctrl+6,ctrl+7,ctrl+8,ctrl+9",
   SWITCH_TASK: "mod+1,mod+2,mod+3,mod+4,mod+5,mod+6,mod+7,mod+8,mod+9",
+  // No mod+0: the Electron View menu owns CmdOrCtrl+0 for "Actual Size", and a
+  // renderer preventDefault can't reliably beat a main-process accelerator. #me
+  // takes slot 1 instead.
+  SWITCH_STARRED_CHANNEL:
+    "mod+1,mod+2,mod+3,mod+4,mod+5,mod+6,mod+7,mod+8,mod+9",
   OPEN_IN_EDITOR: "mod+o",
   COPY_PATH: "mod+shift+c",
   TOGGLE_FOCUS: "mod+r",
@@ -41,6 +46,13 @@ export const SHORTCUTS = {
 
 export type ShortcutCategory = "general" | "navigation" | "panels" | "editor";
 
+/**
+ * Layouts a shortcut exists in. Several keys have different owners either side
+ * of the channels layout flag, and a sheet that lists a key nothing handles is
+ * worse than one that omits it.
+ */
+export type ShortcutAvailability = "channels-layout" | "no-channels-layout";
+
 export interface KeyboardShortcut {
   id: string;
   keys: string;
@@ -48,6 +60,8 @@ export interface KeyboardShortcut {
   category: ShortcutCategory;
   context?: string;
   alternateKeys?: string;
+  /** Absent means the shortcut works in every layout. */
+  availability?: ShortcutAvailability;
 }
 
 export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
@@ -63,6 +77,8 @@ export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
     description: "New tab",
     category: "navigation",
     context: "Channels",
+    // The tab strip that owns this doesn't exist in the channels layout.
+    availability: "no-channels-layout",
   },
   {
     id: "command-menu",
@@ -118,6 +134,16 @@ export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
     keys: "mod+1-9",
     description: "Switch to task 1-9",
     category: "navigation",
+    // Yielded to switch-starred-channel under the channels layout.
+    availability: "no-channels-layout",
+  },
+  {
+    id: "switch-starred-channel",
+    keys: "mod+1-9",
+    description: "Switch to channel (⌘1 = #me, ⌘2-9 = starred)",
+    category: "navigation",
+    context: "Channels",
+    availability: "channels-layout",
   },
   {
     id: "prev-task",
@@ -285,17 +311,22 @@ export const CATEGORY_LABELS: Record<ShortcutCategory, string> = {
   editor: "Editor",
 };
 
-export function getShortcutsByCategory(): Record<
-  ShortcutCategory,
-  KeyboardShortcut[]
-> {
+export function getShortcutsByCategory({
+  channelsLayout = false,
+}: {
+  channelsLayout?: boolean;
+} = {}): Record<ShortcutCategory, KeyboardShortcut[]> {
   const grouped: Record<ShortcutCategory, KeyboardShortcut[]> = {
     general: [],
     navigation: [],
     panels: [],
     editor: [],
   };
+  const wanted: ShortcutAvailability = channelsLayout
+    ? "channels-layout"
+    : "no-channels-layout";
   for (const shortcut of KEYBOARD_SHORTCUTS) {
+    if (shortcut.availability && shortcut.availability !== wanted) continue;
     grouped[shortcut.category].push(shortcut);
   }
   return grouped;
diff --git a/packages/ui/src/features/git-interaction/usePrArtifact.ts b/packages/ui/src/features/git-interaction/usePrArtifact.ts
new file mode 100644
index 0000000000..9c8f3299d4
--- /dev/null
+++ b/packages/ui/src/features/git-interaction/usePrArtifact.ts
@@ -0,0 +1,38 @@
+import type { Icon } from "@phosphor-icons/react";
+import {
+  getPrVisualConfig,
+  parsePrNumber,
+} from "@posthog/core/git-interaction/prStatus";
+import { getPrVisualIcon } from "@posthog/ui/features/git-interaction/prIcon";
+import { usePrDetails } from "@posthog/ui/features/git-interaction/usePrDetails";
+import { parseHttpsUrl } from "@posthog/ui/utils/posthogLinks";
+
+export function usePrArtifact(url: string | null): {
+  safeUrl: string | null;
+  prNumber: string | undefined;
+  title: string;
+  stateLabel: string | null;
+  Icon: Icon;
+  iconColor: string;
+  accentColor: string;
+} {
+  const parsed = url ? parseHttpsUrl(url) : null;
+  const safeUrl = parsed?.origin === "https://github.com" ? parsed.href : null;
+  const {
+    meta: { state, merged, draft },
+  } = usePrDetails(safeUrl);
+
+  const config = getPrVisualConfig(state ?? "open", merged, draft);
+  const prNumber = safeUrl ? parsePrNumber(safeUrl) : undefined;
+
+  return {
+    safeUrl,
+    prNumber,
+    title: prNumber ? `Pull request #${prNumber}` : "Pull request",
+    // Only once the state has resolved, to avoid a flash of "Open".
+    stateLabel: state ? config.label : null,
+    Icon: getPrVisualIcon(config.icon),
+    iconColor: `var(--${config.color}-9)`,
+    accentColor: config.color,
+  };
+}
diff --git a/packages/ui/src/features/settings/components/SettingsPanel.tsx b/packages/ui/src/features/settings/components/SettingsPanel.tsx
index 931f5e92dc..575c6c40ff 100644
--- a/packages/ui/src/features/settings/components/SettingsPanel.tsx
+++ b/packages/ui/src/features/settings/components/SettingsPanel.tsx
@@ -30,6 +30,7 @@ import { useAuthStateValue } from "@posthog/ui/features/auth/store";
 import { useLogoutMutation } from "@posthog/ui/features/auth/useAuthMutations";
 import { useCurrentUser } from "@posthog/ui/features/auth/useCurrentUser";
 import { getUserInitials } from "@posthog/ui/features/auth/userInitials";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { SettingsPageContent } from "@posthog/ui/features/settings/components/SettingsPageContent";
 import { closeSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings";
@@ -156,6 +157,8 @@ export function SettingsPanel({
   const client = useOptionalAuthenticatedClient();
   const { data: user } = useCurrentUser({ client });
   const billingEnabled = useFeatureFlag(BILLING_FLAG);
+  // The channels layout's nav is fixed, so the Sidebar page can't do anything.
+  const channelsLayout = useChannelsLayout();
   const { localWorkspaces } = useHostCapabilities();
   const logoutMutation = useLogoutMutation();
 
@@ -164,6 +167,7 @@ export function SettingsPanel({
     billingEnabled,
     spendAnalysisEnabled,
     localWorkspaces,
+    channelsLayout,
   });
   const sidebarGroups = SIDEBAR_GROUPS.map((group) => ({
     ...group,
diff --git a/packages/ui/src/features/settings/settingsVisibility.test.ts b/packages/ui/src/features/settings/settingsVisibility.test.ts
index 2bf877efd1..02af514218 100644
--- a/packages/ui/src/features/settings/settingsVisibility.test.ts
+++ b/packages/ui/src/features/settings/settingsVisibility.test.ts
@@ -37,6 +37,18 @@ describe("getHiddenSettingsCategories", () => {
         "updates",
       ],
     },
+    {
+      // The channels layout uses a fixed nav, so the Sidebar page's
+      // reorder/hide controls would have nothing to act on.
+      name: "hides the sidebar page under the channels layout",
+      input: {
+        billingEnabled: true,
+        spendAnalysisEnabled: true,
+        localWorkspaces: true,
+        channelsLayout: true,
+      },
+      expected: ["sidebar"],
+    },
   ])("$name", ({ input, expected }) => {
     expect([...getHiddenSettingsCategories(input)]).toEqual(expected);
   });
diff --git a/packages/ui/src/features/settings/settingsVisibility.ts b/packages/ui/src/features/settings/settingsVisibility.ts
index dcba2a38b1..ecd19e1935 100644
--- a/packages/ui/src/features/settings/settingsVisibility.ts
+++ b/packages/ui/src/features/settings/settingsVisibility.ts
@@ -16,12 +16,18 @@ interface SettingsVisibility {
   billingEnabled: boolean;
   spendAnalysisEnabled: boolean;
   localWorkspaces: boolean;
+  /**
+   * The channels layout replaces the customizable nav with a fixed one, so the
+   * Sidebar page's controls have nothing to act on there.
+   */
+  channelsLayout?: boolean;
 }
 
 export function getHiddenSettingsCategories({
   billingEnabled,
   spendAnalysisEnabled,
   localWorkspaces,
+  channelsLayout = false,
 }: SettingsVisibility): ReadonlySet<SettingsCategory> {
   const hiddenCategories = new Set<SettingsCategory>();
 
@@ -33,6 +39,12 @@ export function getHiddenSettingsCategories({
       hiddenCategories.add(category);
     }
   }
+  // Better to hide the page than to leave one whose controls silently do
+  // nothing. SettingsPanel also redirects direct navigation to a hidden
+  // category, so a deep link can't reach it either.
+  if (channelsLayout) {
+    hiddenCategories.add("sidebar");
+  }
 
   return hiddenCategories;
 }
diff --git a/packages/ui/src/features/sidebar/components/ProjectSwitcher.tsx b/packages/ui/src/features/sidebar/components/ProjectSwitcher.tsx
index d129496db3..6d408b58a9 100644
--- a/packages/ui/src/features/sidebar/components/ProjectSwitcher.tsx
+++ b/packages/ui/src/features/sidebar/components/ProjectSwitcher.tsx
@@ -58,7 +58,7 @@ import { Avatar, Box } from "@radix-ui/themes";
 import { ChevronRightIcon } from "lucide-react";
 import { type ReactNode, useMemo, useState } from "react";
 
-// The two-line user/project card used at the bottom of the sidebar.
+/** The account / project / org menu at the bottom of the sidebar. */
 export function ProjectSwitcher() {
   const [popoverOpen, setPopoverOpen] = useState(false);
 
diff --git a/packages/ui/src/features/sidebar/components/SidebarNavSection.test.tsx b/packages/ui/src/features/sidebar/components/SidebarNavSection.test.tsx
index 0525255c57..a871070b6d 100644
--- a/packages/ui/src/features/sidebar/components/SidebarNavSection.test.tsx
+++ b/packages/ui/src/features/sidebar/components/SidebarNavSection.test.tsx
@@ -39,6 +39,11 @@ vi.mock("@posthog/ui/router/useAppView", () => ({ useAppView }));
 vi.mock("@posthog/ui/features/feature-flags/useFeatureFlag", () => ({
   useFeatureFlag: () => true,
 }));
+// These tests pin the legacy layout (flag off), where the "Enable channels"
+// toggle row is present.
+vi.mock("@posthog/ui/features/canvas/hooks/useChannelsLayout", () => ({
+  useChannelsLayout: () => false,
+}));
 vi.mock("@posthog/ui/router/navigationBridge", () => ({
   navigateToActivity,
   navigateToAgents,
@@ -145,9 +150,10 @@ describe("SidebarNavSection", () => {
     await user.click(screen.getByRole("button", { name: /Inbox/ }));
 
     expect(navigateToInbox).toHaveBeenCalledTimes(1);
+    // `layout` separates these from ChannelNav's identically-named clicks.
     expect(track).toHaveBeenCalledWith(
       ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED,
-      { item: "inbox", in_more: false },
+      { item: "inbox", in_more: false, layout: "code" },
     );
   });
 
diff --git a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
index a9d3dd9200..bc74e3fb3a 100644
--- a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
+++ b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
@@ -3,7 +3,8 @@ import {
   ANALYTICS_EVENTS,
   type SidebarNavItem,
 } from "@posthog/shared/analytics-events";
-import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
+import { useCommandCenterActiveCount } from "@posthog/ui/features/command-center/useCommandCenterActiveCount";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
 import { openSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings";
@@ -14,7 +15,6 @@ import {
   orderedNavItems,
 } from "@posthog/ui/features/sidebar/constants";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
-import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import {
   navigateToActivity,
   navigateToCommandCenter,
@@ -74,6 +74,9 @@ export function SidebarNavSection({
   const channelsEnabled =
     useSidebarStore((s) => s.channelsEnabled) && bluebirdEnabled;
   const setChannelsEnabled = useSidebarStore((s) => s.setChannelsEnabled);
+  // The new channels layout subsumes the alpha: while its flag is on, the
+  // "Enable channels" toggle is meaningless, so its row is hidden.
+  const channelsLayout = useChannelsLayout();
 
   // When this section renders inside the Channels space, the destinations that
   // have a /website mirror stay in that space; everything else (and the whole
@@ -113,19 +116,9 @@ export function SidebarNavSection({
   // count — keeps the standalone (Channels) render self-contained without
   // opening a redundant subscription when composed inside SidebarMenu.
   const needsOwnCount = providedActiveCount === undefined;
-  const showAllUsers = useSidebarStore((s) => s.showAllUsers);
-  const showInternal = useSidebarStore((s) => s.showInternal);
-  const { data: allTasks = [] } = useTasks(
-    { showAllUsers, showInternal },
-    { enabled: needsOwnCount },
-  );
-  const commandCenterCells = useCommandCenterStore((s) => s.cells);
-  const ownActiveCount = (() => {
-    const taskIds = new Set(allTasks.map((t) => t.id));
-    return commandCenterCells.filter(
-      (taskId) => taskId != null && taskIds.has(taskId),
-    ).length;
-  })();
+  const ownActiveCount = useCommandCenterActiveCount({
+    enabled: needsOwnCount,
+  });
   const commandCenterActiveCount = providedActiveCount ?? ownActiveCount;
 
   const openCommandMenu = useCommandMenuStore((s) => s.open);
@@ -137,6 +130,7 @@ export function SidebarNavSection({
       track(ANALYTICS_EVENTS.SIDEBAR_NAV_ITEM_CLICKED, {
         item,
         in_more: depth === 1,
+        layout: "code",
       });
       action();
     };
@@ -152,7 +146,8 @@ export function SidebarNavSection({
   const navItemAvailable: Record<CustomizableNavItemId, boolean> = {
     inbox: true,
     "command-center": true,
-    contexts: bluebirdEnabled,
+    // Hidden while the new layout is on — the opt-in toggle would be a no-op.
+    contexts: bluebirdEnabled && !channelsLayout,
     // Activity (the mentions feed) is a channels surface, so it only appears
     // once channels are enabled.
     activity: channelsEnabled,
diff --git a/packages/ui/src/features/sidebar/components/items/CommandCenterItem.tsx b/packages/ui/src/features/sidebar/components/items/CommandCenterItem.tsx
index 7852a5c741..c0cc8ebb12 100644
--- a/packages/ui/src/features/sidebar/components/items/CommandCenterItem.tsx
+++ b/packages/ui/src/features/sidebar/components/items/CommandCenterItem.tsx
@@ -1,4 +1,5 @@
 import { Lightning } from "@phosphor-icons/react";
+import { CountBadge } from "@posthog/ui/primitives/CountBadge";
 import { SidebarItem } from "../SidebarItem";
 
 interface CommandCenterItemProps {
@@ -8,10 +9,10 @@ interface CommandCenterItemProps {
   depth?: number;
 }
 
-function formatActiveCount(count: number): string {
-  if (count > 99) return "99+";
-  return String(count);
-}
+// A trailing count in a sidebar row rather than a notification pill: no fill,
+// so it sits on the row's own background.
+const ROW_COUNT_CLASS =
+  "h-[16px] min-w-[16px] w-auto bg-transparent px-1 font-normal text-[11px] text-gray-11";
 
 export function CommandCenterItem({
   isActive,
@@ -26,15 +27,14 @@ export function CommandCenterItem({
       label="Command Center"
       isActive={isActive}
       onClick={onClick}
+      // CountBadge renders nothing at zero, so no guard is needed here.
       endContent={
-        activeCount && activeCount > 0 ? (
-          <span
-            className="inline-flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-[11px] text-gray-11 leading-none"
-            title={`${activeCount} active`}
-          >
-            {formatActiveCount(activeCount)}
-          </span>
-        ) : undefined
+        <CountBadge
+          count={activeCount ?? 0}
+          tone="neutral"
+          className={ROW_COUNT_CLASS}
+          title={`${activeCount} active`}
+        />
       }
     />
   );
diff --git a/packages/ui/src/features/sidebar/constants.ts b/packages/ui/src/features/sidebar/constants.ts
index ede8445df3..31e98a32f5 100644
--- a/packages/ui/src/features/sidebar/constants.ts
+++ b/packages/ui/src/features/sidebar/constants.ts
@@ -2,6 +2,14 @@ import type { SidebarNavItem } from "@posthog/shared/analytics-events";
 
 export const SIDEBAR_MIN_WIDTH = 240;
 
+/**
+ * Wider floor for the channels layout only. The title bar's left strip is
+ * pinned to the sidebar width and none of its contents shrink; that layout
+ * adds a search button, taking the strip to 228px, so 240 would leave the two
+ * groups touching. Off, the strip needs 208px and keeps the usual floor.
+ */
+export const CHANNELS_SIDEBAR_MIN_WIDTH = 272;
+
 export const CUSTOMIZABLE_NAV_ITEMS = [
   { id: "inbox", label: "Inbox", analyticsId: "inbox", defaultVisible: true },
   {
diff --git a/packages/ui/src/features/task-detail/components/TaskInput.tsx b/packages/ui/src/features/task-detail/components/TaskInput.tsx
index 0c0d51fca6..34626ee630 100644
--- a/packages/ui/src/features/task-detail/components/TaskInput.tsx
+++ b/packages/ui/src/features/task-detail/components/TaskInput.tsx
@@ -269,12 +269,21 @@ export function TaskInput({
   const adapter = lastUsedAdapter;
   const prefillRequestKey = initialPromptKey ?? initialPrompt;
 
+  // Applying a prefilled prompt replaces whatever the composer had, so it must
+  // happen exactly once per request — not again on every remount, which would
+  // clobber a draft the user typed in between.
+  const lastAppliedPromptKeyRef = useRef<string | null>(null);
   useEffect(() => {
     if (!initialPrompt || !prefillRequestKey) return;
+    if (lastAppliedPromptKeyRef.current === prefillRequestKey) return;
+    lastAppliedPromptKeyRef.current = prefillRequestKey;
     useDraftStore.getState().actions.setPendingContent(sessionId, {
       segments: [{ type: "text", text: initialPrompt }],
     });
-  }, [initialPrompt, prefillRequestKey, sessionId]);
+    if (initialPromptKey) {
+      useTaskInputPrefillStore.getState().consumePrompt(initialPromptKey);
+    }
+  }, [initialPrompt, initialPromptKey, prefillRequestKey, sessionId]);
 
   useEffect(() => {
     reportInputHadContentRef.current = false;
diff --git a/packages/ui/src/features/task-detail/hooks/useCloudChangedFiles.ts b/packages/ui/src/features/task-detail/hooks/useCloudChangedFiles.ts
index 07e9960495..9ffd6d608d 100644
--- a/packages/ui/src/features/task-detail/hooks/useCloudChangedFiles.ts
+++ b/packages/ui/src/features/task-detail/hooks/useCloudChangedFiles.ts
@@ -12,9 +12,11 @@ export function useCloudChangedFiles(
   taskId: string,
   task: Task,
   isActive = true,
+  prUrlOverride?: string,
 ) {
   const cloudRunState = useCloudRunState(taskId, task);
-  const { prUrl, effectiveBranch, repo, isRunActive } = cloudRunState;
+  const prUrl = prUrlOverride ?? cloudRunState.prUrl;
+  const { effectiveBranch, repo, isRunActive } = cloudRunState;
 
   const {
     data: prFiles,
@@ -45,6 +47,7 @@ export function useCloudChangedFiles(
 
   return {
     ...cloudRunState,
+    prUrl,
     changedFiles,
     remoteFiles,
     reviewFiles: changedFiles,
diff --git a/packages/ui/src/features/task-detail/hooks/useRefreshedTask.ts b/packages/ui/src/features/task-detail/hooks/useRefreshedTask.ts
index e2f6be477d..df35a8f382 100644
--- a/packages/ui/src/features/task-detail/hooks/useRefreshedTask.ts
+++ b/packages/ui/src/features/task-detail/hooks/useRefreshedTask.ts
@@ -9,5 +9,9 @@ export function useRefreshedTask(taskId: string, initialTask: Task): Task {
     refetchOnMount: "always",
   });
 
-  return data;
+  // The refetch can resolve without data (e.g. a stale / cross-project id
+  // where getTask returns nothing), leaving `data` undefined despite the
+  // Task return type. Fall back to the last-known task so consumers
+  // (useTaskData → getTaskRepository) never read off undefined and crash.
+  return data ?? initialTask;
 }
diff --git a/packages/ui/src/features/task-detail/stores/taskInputPrefillStore.ts b/packages/ui/src/features/task-detail/stores/taskInputPrefillStore.ts
index d7ba861f4b..1b91d76385 100644
--- a/packages/ui/src/features/task-detail/stores/taskInputPrefillStore.ts
+++ b/packages/ui/src/features/task-detail/stores/taskInputPrefillStore.ts
@@ -20,7 +20,13 @@ interface PrefillStoreState {
   prefill: TaskInputPrefill;
   setPrefill: (prefill: TaskInputPrefill) => void;
   clearReportAssociation: () => void;
-  clear: () => void;
+  /**
+   * Retire a prompt once the composer has applied it. Without this the prompt
+   * outlives its navigation and is re-applied — over the user's own draft — the
+   * next time a new-task screen mounts. Scoped by requestId so a newer prefill
+   * that landed in between is left alone.
+   */
+  consumePrompt: (requestId: string) => void;
 }
 
 // Holds transient state used to prefill the TaskInput screen when navigation
@@ -38,5 +44,16 @@ export const useTaskInputPrefillStore = create<PrefillStoreState>((set) => ({
         initialCloudRepository: undefined,
       },
     })),
-  clear: () => set({ prefill: {} }),
+  consumePrompt: (requestId) =>
+    set((s) =>
+      s.prefill.requestId === requestId
+        ? {
+            prefill: {
+              ...s.prefill,
+              initialPrompt: undefined,
+              requestId: undefined,
+            },
+          }
+        : s,
+    ),
 }));
diff --git a/packages/ui/src/primitives/CountBadge.tsx b/packages/ui/src/primitives/CountBadge.tsx
index 68b145de0e..ffa24d0bdd 100644
--- a/packages/ui/src/primitives/CountBadge.tsx
+++ b/packages/ui/src/primitives/CountBadge.tsx
@@ -1,7 +1,11 @@
 import { cn } from "@posthog/quill";
 
+/** Unread counts read red; ambient "how much is parked here" counts stay grey. */
+export type CountBadgeTone = "notification" | "neutral";
+
 interface CountBadgeProps {
   count: number;
+  tone?: CountBadgeTone;
   className?: string;
   title?: string;
 }
@@ -17,14 +21,36 @@ function countBadgeSizeClass(label: string): string {
     : "h-[18px] w-[18px] shrink-0";
 }
 
-export function CountBadge({ count, className, title }: CountBadgeProps) {
+const TONE_CLASS: Record<CountBadgeTone, string> = {
+  notification: "bg-(--red-9) text-(--gray-contrast)",
+  // Theme tokens, not the absolute gray scale: these sit on chrome whose
+  // lightness relationship to gray-N inverts between light and dark.
+  neutral: "bg-muted text-muted-foreground",
+};
+
+/**
+ * A count pill. The one place the 99+ cap and the hide-at-zero rule live —
+ * every badge that reimplemented them drifted on one or the other.
+ *
+ * Size and position come through `className` (tailwind-merge lets callers
+ * override the defaults), because the surfaces genuinely differ: a nav icon
+ * overlay is not the same shape as a sidebar row's trailing count.
+ */
+export function CountBadge({
+  count,
+  tone = "notification",
+  className,
+  title,
+}: CountBadgeProps) {
+  if (count <= 0) return null;
   const label = formatCount(count);
 
   return (
     <span
       className={cn(
         countBadgeSizeClass(label),
-        "inline-flex items-center justify-center rounded-full bg-(--red-9) font-medium text-(--gray-contrast) text-[10px] tabular-nums leading-none",
+        "inline-flex items-center justify-center rounded-full font-medium text-[10px] tabular-nums leading-none",
+        TONE_CLASS[tone],
         className,
       )}
       title={title}
diff --git a/packages/ui/src/primitives/ResizableSidebar.tsx b/packages/ui/src/primitives/ResizableSidebar.tsx
index 6cc504db5d..88d257a92f 100644
--- a/packages/ui/src/primitives/ResizableSidebar.tsx
+++ b/packages/ui/src/primitives/ResizableSidebar.tsx
@@ -25,6 +25,9 @@ interface ResizableSidebarProps {
   isResizing: boolean;
   setIsResizing: (isResizing: boolean) => void;
   side: "left" | "right";
+  // Floor for drag-resize. Defaults to SIDEBAR_MIN_WIDTH; callers whose chrome
+  // needs more room can raise it.
+  minWidth?: number;
   // Enables drag-to-close/reopen. Without it, dragging just clamps at min.
   setOpen?: (open: boolean) => void;
   // While closed, the panel can "peek" — slide out over the content as a
@@ -45,6 +48,7 @@ export const ResizableSidebar: React.FC<ResizableSidebarProps> = ({
   isResizing,
   setIsResizing,
   side,
+  minWidth = SIDEBAR_MIN_WIDTH,
   setOpen,
   peek = false,
   onPeekEnter,
@@ -101,7 +105,7 @@ export const ResizableSidebar: React.FC<ResizableSidebarProps> = ({
       const pointer =
         side === "left" ? e.clientX : window.innerWidth - e.clientX;
       const maxWidth = window.innerWidth * 0.5;
-      const clamped = Math.max(SIDEBAR_MIN_WIDTH, Math.min(maxWidth, pointer));
+      const clamped = Math.max(minWidth, Math.min(maxWidth, pointer));
 
       if (open) {
         if (pointer < DRAG_COLLAPSE_AT && setOpen) {
@@ -166,6 +170,7 @@ export const ResizableSidebar: React.FC<ResizableSidebarProps> = ({
     isResizing,
     setIsResizing,
     side,
+    minWidth,
     open,
     peek,
     width,
diff --git a/packages/ui/src/router/routes/__root.tsx b/packages/ui/src/router/routes/__root.tsx
index 6ecb9a0032..7cc2b195db 100644
--- a/packages/ui/src/router/routes/__root.tsx
+++ b/packages/ui/src/router/routes/__root.tsx
@@ -2,6 +2,7 @@ import {
   ArrowSquareOut,
   CaretLeftIcon,
   CaretRightIcon,
+  MagnifyingGlass,
 } from "@phosphor-icons/react";
 import { useHostTRPC, useHostTRPCClient } from "@posthog/host-router/react";
 import { Button, ButtonGroup } from "@posthog/quill";
@@ -21,7 +22,9 @@ import { UsageLimitModal } from "@posthog/ui/features/billing/UsageLimitModal";
 import { BlankTabView } from "@posthog/ui/features/browser-tabs/BlankTabView";
 import { BrowserTabStrip } from "@posthog/ui/features/browser-tabs/BrowserTabStrip";
 import { BrowserTabsDndProvider } from "@posthog/ui/features/browser-tabs/BrowserTabsDnd";
+import { TabShortcutFallback } from "@posthog/ui/features/browser-tabs/TabShortcutFallback";
 import { useActiveTabIsBlank } from "@posthog/ui/features/browser-tabs/useBrowserTabs";
+import { ChannelHotkeys } from "@posthog/ui/features/canvas/components/ChannelHotkeys";
 import { ChannelsSidebar } from "@posthog/ui/features/canvas/components/ChannelsSidebar";
 import { useChannelsSidebarStore } from "@posthog/ui/features/canvas/components/channelsSidebarStore";
 import {
@@ -30,9 +33,14 @@ import {
 } from "@posthog/ui/features/canvas/components/FeedbackModal";
 import { useCanvasDeepLink } from "@posthog/ui/features/canvas/hooks/useCanvasDeepLink";
 import { useChannelDeepLink } from "@posthog/ui/features/canvas/hooks/useChannelDeepLink";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { CommandMenu } from "@posthog/ui/features/command/CommandMenu";
 import { GlobalFilePicker } from "@posthog/ui/features/command/GlobalFilePicker";
 import { KeyboardShortcutsSheet } from "@posthog/ui/features/command/KeyboardShortcutsSheet";
+import {
+  formatHotkey,
+  SHORTCUTS,
+} from "@posthog/ui/features/command/keyboard-shortcuts";
 import { ConnectivityBanner } from "@posthog/ui/features/connectivity/ConnectivityBanner";
 import { useNewTaskDeepLink } from "@posthog/ui/features/deep-links/useNewTaskDeepLink";
 import { useOpenTargetDeepLink } from "@posthog/ui/features/deep-links/useOpenTargetDeepLink";
@@ -58,6 +66,7 @@ import { UpdateAvailableModal } from "@posthog/ui/features/updates/UpdateAvailab
 import { WhatsNewModal } from "@posthog/ui/features/updates/WhatsNewModal";
 import { useWorkspaces } from "@posthog/ui/features/workspace/useWorkspace";
 import LogosLandscape from "@posthog/ui/primitives/Logo";
+import { Tooltip } from "@posthog/ui/primitives/Tooltip";
 import { useAppView } from "@posthog/ui/router/useAppView";
 import { openTask, openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { track } from "@posthog/ui/shell/analytics";
@@ -191,6 +200,9 @@ function RootLayout() {
   );
   const channelsToggleOn = useSidebarStore((s) => s.channelsEnabled);
   const channelsEnabled = channelsToggleOn && bluebirdEnabled;
+  // The new channels layout has exactly one gate: its feature flag (no
+  // sidebar toggle). When on it subsumes the channels alpha entirely.
+  const channelsLayout = useChannelsLayout();
   // When the sidebar is collapsed (Cmd+B) the title bar's left block shrinks to
   // fit its own controls so the tab strip flushes left with the content pane.
   const sidebarOpen = useSidebarStore((s) => s.open);
@@ -317,6 +329,9 @@ function RootLayout() {
           onToggleCommandMenu={toggleCommandMenu}
           onToggleShortcutsSheet={toggleShortcutsSheet}
         />
+        {/* The settings shell has never mounted the tab strip, so nothing here
+            was stopping Cmd+W from closing the window. */}
+        <TabShortcutFallback enabled />
         {billingEnabled && <UsageLimitModal />}
         <UsageBillingAnnouncementModal />
         <UpdateAvailableModal />
@@ -384,43 +399,68 @@ function RootLayout() {
                 )}
               </Button>
             </Flex>
-            {localWorkspaces && (
+            {(localWorkspaces || channelsLayout) && (
               <Flex align="center" gap="2" className="no-drag">
-                <ButtonGroup className="no-drag">
-                  <Button
-                    variant="outline"
-                    size="icon-sm"
-                    aria-label="Back"
-                    disabled={!canGoBack}
-                    onClick={() => router.history.back()}
-                  >
-                    <CaretLeftIcon size={14} />
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="icon-sm"
-                    aria-label="Forward"
-                    disabled={!canGoForward}
-                    onClick={() => router.history.forward()}
+                {/* Search rides the title bar rather than the sidebar nav —
+                    it's chrome, not a destination — and leads the history
+                    controls so those stay against the sidebar edge. */}
+                {channelsLayout && (
+                  <Tooltip
+                    content="Search"
+                    shortcut={formatHotkey(SHORTCUTS.COMMAND_MENU)}
+                    side="bottom"
                   >
-                    <CaretRightIcon size={14} />
-                  </Button>
-                </ButtonGroup>
+                    <Button
+                      variant="outline"
+                      size="icon-sm"
+                      aria-label="Search"
+                      onClick={toggleCommandMenu}
+                    >
+                      <MagnifyingGlass size={14} />
+                    </Button>
+                  </Tooltip>
+                )}
+                {localWorkspaces && (
+                  <ButtonGroup className="no-drag">
+                    <Button
+                      variant="outline"
+                      size="icon-sm"
+                      aria-label="Back"
+                      disabled={!canGoBack}
+                      onClick={() => router.history.back()}
+                    >
+                      <CaretLeftIcon size={14} />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="icon-sm"
+                      aria-label="Forward"
+                      disabled={!canGoForward}
+                      onClick={() => router.history.forward()}
+                    >
+                      <CaretRightIcon size={14} />
+                    </Button>
+                  </ButtonGroup>
+                )}
               </Flex>
             )}
           </Flex>
-          {/* Tabs work in both spaces: channel tabs under /website and plain
-              task tabs in the Code experience. The strip's route→tab effect
-              noops on param-less routes (inbox, agents, new-task), so it's safe
-              to mount everywhere. */}
-          <BrowserTabStrip />
+          {/* The new layout has no global tab strip (tabs live inside the
+              task view); search/inbox/activity live in the sidebar nav. The
+              strip is also the only global owner of Cmd+W, so something has to
+              keep holding that key when it isn't mounted. */}
+          {channelsLayout ? (
+            <TabShortcutFallback enabled />
+          ) : (
+            <BrowserTabStrip />
+          )}
           {/* Gated so an empty right-side group can't claim a no-drag rect
               in the title bar for nothing — every pixel without controls
               should drag the window. */}
-          {(billingEnabled || channelsEnabled) && (
+          {(billingEnabled || channelsEnabled || channelsLayout) && (
             <Flex align="center" gap="2" className="no-drag ml-auto pr-3">
               <UsageButton />
-              {channelsEnabled && (
+              {(channelsEnabled || channelsLayout) && (
                 <Button
                   variant="outline"
                   size="sm"
@@ -481,6 +521,10 @@ function RootLayout() {
           onToggleCommandMenu={toggleCommandMenu}
           onToggleShortcutsSheet={toggleShortcutsSheet}
         />
+        {/* Renders nothing — owns ⌘1-9 under the channels layout. Mounted here
+            rather than in the switcher, which only exists once a channel is
+            already scoped. */}
+        <ChannelHotkeys />
         {/* Renders nothing — wires the ⌥↑/⌥↓ task-cycling shortcuts. */}
         <SpaceSwitcher
           tasks={visualTaskOrder}
diff --git a/packages/ui/src/router/useOpenTask.test.ts b/packages/ui/src/router/useOpenTask.test.ts
new file mode 100644
index 0000000000..941bc6745d
--- /dev/null
+++ b/packages/ui/src/router/useOpenTask.test.ts
@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const navigateToChannelNewTask = vi.fn();
+const navigateToWebsiteNew = vi.fn();
+const navigateToCode = vi.fn();
+
+vi.mock("./navigationBridge", () => ({
+  navigateToChannelNewTask: (...args: unknown[]) =>
+    navigateToChannelNewTask(...args),
+  navigateToWebsiteNew: () => navigateToWebsiteNew(),
+  navigateToCode: () => navigateToCode(),
+  navigateToChannelTask: vi.fn(),
+  navigateToTaskDetail: vi.fn(),
+  navigateToFolderSettings: vi.fn(),
+}));
+vi.mock("@posthog/di/container", () => ({
+  resolveService: vi.fn(),
+  resolveServiceOptional: vi.fn(),
+}));
+vi.mock("@posthog/ui/shell/analytics", () => ({
+  track: vi.fn(),
+  setActiveTaskContext: vi.fn(),
+}));
+
+import {
+  resetCurrentChannel,
+  useCurrentChannelStore,
+} from "@posthog/ui/features/canvas/stores/currentChannelStore";
+import { useTaskInputPrefillStore } from "@posthog/ui/features/task-detail/stores/taskInputPrefillStore";
+import { openTaskInput } from "./useOpenTask";
+
+describe("openTaskInput channel scoping", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useCurrentChannelStore.setState({ currentChannelId: null });
+    useTaskInputPrefillStore.setState({ prefill: {} });
+  });
+
+  // Without the channels layout nothing sets a current channel, so creates must
+  // land where they always did rather than being pulled into a channel.
+  it("routes to Code when no channel is current", () => {
+    openTaskInput();
+    expect(navigateToCode).toHaveBeenCalledTimes(1);
+    expect(navigateToChannelNewTask).not.toHaveBeenCalled();
+  });
+
+  it("still honours an explicit website space when no channel is current", () => {
+    openTaskInput({ space: "website" });
+    expect(navigateToWebsiteNew).toHaveBeenCalledTimes(1);
+    expect(navigateToChannelNewTask).not.toHaveBeenCalled();
+  });
+
+  it("routes into the current channel once one is scoped", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    openTaskInput();
+    expect(navigateToChannelNewTask).toHaveBeenCalledWith("chan-1");
+    expect(navigateToCode).not.toHaveBeenCalled();
+  });
+
+  it("carries prefill into the channel route", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    openTaskInput({ initialPrompt: "ship it" });
+    expect(navigateToChannelNewTask).toHaveBeenCalledWith("chan-1");
+  });
+
+  // A caller that names its channel must not be overridden by whatever the
+  // sidebar happens to be scoped to.
+  it("prefers an explicit channel over the scoped one", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    openTaskInput({ channelId: "chan-9" });
+    expect(navigateToChannelNewTask).toHaveBeenCalledWith("chan-9");
+  });
+
+  // useArchiveTask and friends pass space: "code" deliberately; a scoped
+  // channel silently hijacking that is how a create lands in the wrong place.
+  it("honours an explicit Code space even while a channel is scoped", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    openTaskInput({ space: "code" });
+    expect(navigateToCode).toHaveBeenCalledTimes(1);
+    expect(navigateToChannelNewTask).not.toHaveBeenCalled();
+  });
+
+  // The auth side effects call resetCurrentChannel() before openTaskInput() so
+  // a project switch can't file the next task into the old project's channel.
+  it("routes to Code again once the channel is reset", () => {
+    useCurrentChannelStore.setState({ currentChannelId: "chan-1" });
+    resetCurrentChannel();
+    openTaskInput();
+    expect(navigateToCode).toHaveBeenCalledTimes(1);
+    expect(navigateToChannelNewTask).not.toHaveBeenCalled();
+  });
+
+  it("replaces a stale prompt rather than leaving it to be re-applied", () => {
+    openTaskInput({ initialPrompt: "old prompt" });
+    const stale = useTaskInputPrefillStore.getState().prefill.requestId;
+
+    openTaskInput({ channelId: "chan-1" });
+
+    const { prefill } = useTaskInputPrefillStore.getState();
+    expect(prefill.initialPrompt).toBeUndefined();
+    expect(prefill.requestId).not.toBe(stale);
+  });
+});
+
+describe("taskInputPrefillStore.consumePrompt", () => {
+  beforeEach(() => {
+    useTaskInputPrefillStore.setState({ prefill: {} });
+  });
+
+  it("retires the prompt it was given", () => {
+    useTaskInputPrefillStore.setState({
+      prefill: { requestId: "r1", initialPrompt: "hello", folderId: "f1" },
+    });
+
+    useTaskInputPrefillStore.getState().consumePrompt("r1");
+
+    const { prefill } = useTaskInputPrefillStore.getState();
+    expect(prefill.initialPrompt).toBeUndefined();
+    expect(prefill.requestId).toBeUndefined();
+    // Folder scoping is not a one-shot prompt; it must survive.
+    expect(prefill.folderId).toBe("f1");
+  });
+
+  it("leaves a newer prefill alone", () => {
+    useTaskInputPrefillStore.setState({
+      prefill: { requestId: "r2", initialPrompt: "newer" },
+    });
+
+    useTaskInputPrefillStore.getState().consumePrompt("r1");
+
+    expect(useTaskInputPrefillStore.getState().prefill.initialPrompt).toBe(
+      "newer",
+    );
+  });
+});
diff --git a/packages/ui/src/router/useOpenTask.ts b/packages/ui/src/router/useOpenTask.ts
index f5f01fb607..a42d37dc8c 100644
--- a/packages/ui/src/router/useOpenTask.ts
+++ b/packages/ui/src/router/useOpenTask.ts
@@ -1,6 +1,7 @@
 import { resolveService, resolveServiceOptional } from "@posthog/di/container";
 import { ANALYTICS_EVENTS } from "@posthog/shared";
 import type { Task } from "@posthog/shared/domain-types";
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import {
   NAVIGATION_TASK_BINDER,
   type NavigationTaskBinder,
@@ -76,6 +77,12 @@ export interface TaskInputNavigationOptions {
   // Which space's new-task screen to open. Both render the same TaskInput; the
   // channels variant keeps the channels chrome instead of switching to Code.
   space?: "code" | "website";
+  /**
+   * Create inside this channel. Callers that already know the channel should
+   * say so rather than relying on the sidebar's scope agreeing with them — and
+   * routing through here is what clears any stale prefill.
+   */
+  channelId?: string;
 }
 
 /**
@@ -115,7 +122,19 @@ export function openTaskInput(
         : undefined,
     },
   });
-  if (options.space === "website") {
+  // In the channels layout every entry point (⌘N, the command menu, the "+")
+  // creates inside the channel you're in. A current channel only exists while
+  // that layout is on (ChannelsSidebar), so this needs no flag of its own.
+  // Precedence: an explicit channel wins; asking for Code explicitly opts out
+  // of channel scoping; otherwise the scoped channel decides.
+  const channelId =
+    options.channelId ??
+    (options.space === "code"
+      ? null
+      : useCurrentChannelStore.getState().currentChannelId);
+  if (channelId) {
+    nav.navigateToChannelNewTask(channelId);
+  } else if (options.space === "website") {
     nav.navigateToWebsiteNew();
   } else {
     nav.navigateToCode();
diff --git a/packages/ui/src/shell/GlobalEventHandlers.tsx b/packages/ui/src/shell/GlobalEventHandlers.tsx
index 4ba6fa0000..8f714ff383 100644
--- a/packages/ui/src/shell/GlobalEventHandlers.tsx
+++ b/packages/ui/src/shell/GlobalEventHandlers.tsx
@@ -6,6 +6,7 @@ import { useService } from "@posthog/di/react";
 import { useHostTRPC } from "@posthog/host-router/react";
 import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
 import type { Task } from "@posthog/shared/domain-types";
+import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
@@ -72,15 +73,17 @@ export function GlobalEventHandlers({
   const sidebarData = useSidebarData({ activeView: view });
   const visualTaskOrder = useVisualTaskOrder(sidebarData);
 
-  // With channels on, mod+1-9 belongs to the browser tab strip (it switches to
-  // the Nth tab). Yield those keys so task-switching only owns them in the Code
-  // nav; the strip's own handler is gated on the same flag.
+  // mod+N belongs to the browser tab strip with channels on, and to the
+  // starred channels in the new layout (ChannelHotkeys, mounted from __root so
+  // the keys always have an owner), so task-switching only owns those keys in
+  // the Code nav.
   const bluebirdEnabled = useFeatureFlag(
     PROJECT_BLUEBIRD_FLAG,
     import.meta.env.DEV,
   );
   const channelsEnabled =
     useSidebarStore((s) => s.channelsEnabled) && bluebirdEnabled;
+  const channelsLayout = useChannelsLayout();
 
   const taskById = useMemo(() => {
     const map = new Map<string, Task>();
@@ -211,7 +214,7 @@ export function GlobalEventHandlers({
   );
 
   // Task switching with mod+1-9 — off when channels are on (the browser tab
-  // strip claims those keys to switch tabs by index).
+  // strip / starred-channel shortcuts claim those keys).
   useHotkeys(
     SHORTCUTS.SWITCH_TASK,
     (event, handler) => {
@@ -222,7 +225,7 @@ export function GlobalEventHandlers({
       const index = parseInt(keyPressed, 10);
       handleSwitchTask(index);
     },
-    { ...globalOptions, enabled: !channelsEnabled },
+    { ...globalOptions, enabled: !channelsEnabled && !channelsLayout },
     [handleSwitchTask],
   );
 
diff --git a/packages/ui/src/shell/createSidebarStore.ts b/packages/ui/src/shell/createSidebarStore.ts
index 1d72c081d5..bbfe139a2b 100644
--- a/packages/ui/src/shell/createSidebarStore.ts
+++ b/packages/ui/src/shell/createSidebarStore.ts
@@ -20,20 +20,27 @@ interface CreateSidebarStoreOptions {
   name: string;
   defaultWidth: number;
   defaultOpen?: boolean;
+  /**
+   * Floor for live sets and rehydrated values alike — without it a width
+   * persisted under an older, lower minimum survives below the new one.
+   */
+  minWidth?: number;
 }
 
 export function createSidebarStore(options: CreateSidebarStoreOptions) {
-  const { name, defaultWidth, defaultOpen = true } = options;
+  const { name, defaultWidth, defaultOpen = true, minWidth } = options;
+  const clampWidth = (width: number) =>
+    minWidth === undefined ? width : Math.max(minWidth, width);
 
   return create<SidebarStore>()(
     persist(
       (set) => ({
         open: defaultOpen,
-        width: defaultWidth,
+        width: clampWidth(defaultWidth),
         isResizing: false,
         setOpen: (open) => set({ open }),
         toggle: () => set((state) => ({ open: !state.open })),
-        setWidth: (width) => set({ width }),
+        setWidth: (width) => set({ width: clampWidth(width) }),
         setIsResizing: (isResizing) => set({ isResizing }),
       }),
       {
@@ -42,6 +49,16 @@ export function createSidebarStore(options: CreateSidebarStoreOptions) {
           open: state.open,
           width: state.width,
         }),
+        merge: (persisted, current) => {
+          const stored = (persisted ?? {}) as Partial<
+            Pick<SidebarStoreState, "open" | "width">
+          >;
+          return {
+            ...current,
+            open: stored.open ?? current.open,
+            width: clampWidth(stored.width ?? current.width),
+          };
+        },
       },
     ),
   );
diff --git a/packages/ui/src/utils/posthogLinks.ts b/packages/ui/src/utils/posthogLinks.ts
index 4db4fb3aec..1b2227fcdd 100644
--- a/packages/ui/src/utils/posthogLinks.ts
+++ b/packages/ui/src/utils/posthogLinks.ts
@@ -121,6 +121,20 @@ export function channelShareUrl(
   );
 }
 
+/**
+ * Parse a URL, rejecting anything that isn't https. The gate every surface that
+ * renders a backend-supplied link goes through before fetching from it or
+ * handing it to the host's external-link opener.
+ */
+export function parseHttpsUrl(url: string): URL | null {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
 export type ShareLinkTarget =
   | { kind: "canvas"; channelId: string; dashboardId: string }
   | { kind: "channel"; channelId: string; taskId?: string };