From 6e1b273f5306c730a75334d0f6ebf8497855c4b9 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Thu, 16 Jul 2026 13:12:02 +0100
Subject: [PATCH 1/5] channel rename + large new button

---
 .../features/browser-tabs/BrowserTabStrip.tsx |   2 +-
 .../canvas/components/ActivityView.tsx        |   2 +-
 .../components/ChannelContextPanel.test.tsx   |   2 +-
 .../canvas/components/ChannelContextPanel.tsx |   2 +-
 .../canvas/components/ChannelHeader.tsx       |   2 +-
 .../canvas/components/ChannelIntro.tsx        |  11 +-
 .../canvas/components/ChannelsFab.tsx         |  72 ++++++++
 .../canvas/components/ChannelsList.tsx        | 174 +++++++++++++-----
 .../canvas/components/ChannelsSidebar.tsx     |  10 +-
 .../canvas/components/CreateChannelModal.tsx  |   6 +-
 .../canvas/components/RenameChannelModal.tsx  |   4 +-
 .../canvas/components/WebsiteChannelHome.tsx  |   2 +-
 .../canvas/components/WebsiteContext.tsx      |   4 +-
 .../ui/src/features/canvas/contextPrompt.ts   |   4 +-
 .../features/canvas/hooks/useDashboards.ts    |  21 ++-
 .../ui/src/features/command/CommandMenu.tsx   |   4 +-
 .../sidebar/components/SidebarNavSection.tsx  |   2 +-
 .../task-detail/components/TaskInput.tsx      |   6 +-
 18 files changed, 246 insertions(+), 84 deletions(-)
 create mode 100644 packages/ui/src/features/canvas/components/ChannelsFab.tsx

diff --git a/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx b/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
index bd52aef08e..3baed5c3b4 100644
--- a/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
+++ b/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
@@ -525,7 +525,7 @@ export function BrowserTabStrip() {
           const meta = channelSectionFor(section);
           return {
             id: t.id,
-            label: meta?.label ?? channel ?? "Context",
+            label: meta?.label ?? channel ?? "Channel",
             icon: <SquircleDashed size={14} />,
             channelName: channel,
             // No section meta → the channel's index page.
diff --git a/packages/ui/src/features/canvas/components/ActivityView.tsx b/packages/ui/src/features/canvas/components/ActivityView.tsx
index e3323ae71c..4261f1959a 100644
--- a/packages/ui/src/features/canvas/components/ActivityView.tsx
+++ b/packages/ui/src/features/canvas/components/ActivityView.tsx
@@ -176,7 +176,7 @@ export function ActivityView() {
           Activity
         </Text>
         <Text size="2" className="block text-muted-foreground">
-          Mentions of you across contexts.
+          Mentions of you across channels.
         </Text>
         <div className="mt-4">
           {isLoading && items.length === 0 ? (
diff --git a/packages/ui/src/features/canvas/components/ChannelContextPanel.test.tsx b/packages/ui/src/features/canvas/components/ChannelContextPanel.test.tsx
index b9d1b7e40e..a5ad8a984b 100644
--- a/packages/ui/src/features/canvas/components/ChannelContextPanel.test.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelContextPanel.test.tsx
@@ -63,7 +63,7 @@ describe("ChannelContextPanel", () => {
     const user = userEvent.setup();
     const onClose = renderPanel();
     await user.click(
-      screen.getByRole("button", { name: "Close context panel" }),
+      screen.getByRole("button", { name: "Close CONTEXT.md panel" }),
     );
     expect(onClose).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/ui/src/features/canvas/components/ChannelContextPanel.tsx b/packages/ui/src/features/canvas/components/ChannelContextPanel.tsx
index b5ad42ac86..2d4d21d754 100644
--- a/packages/ui/src/features/canvas/components/ChannelContextPanel.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelContextPanel.tsx
@@ -35,7 +35,7 @@ export function ChannelContextPanel({
           <button
             type="button"
             onClick={onClose}
-            aria-label="Close context panel"
+            aria-label="Close CONTEXT.md panel"
             className="flex size-6 shrink-0 items-center justify-center rounded text-gray-10 hover:bg-gray-4 hover:text-gray-12"
           >
             <X size={14} />
diff --git a/packages/ui/src/features/canvas/components/ChannelHeader.tsx b/packages/ui/src/features/canvas/components/ChannelHeader.tsx
index d41bd2b299..23769541bf 100644
--- a/packages/ui/src/features/canvas/components/ChannelHeader.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelHeader.tsx
@@ -34,7 +34,7 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
           className="shrink-0 text-muted-foreground/80"
         />
         <Text className="min-w-0 truncate font-medium" title={channelName}>
-          {channelName ?? "Context"}
+          {channelName ?? "Channel"}
         </Text>
       </Button>
       <ChannelTabs channelId={channelId} />
diff --git a/packages/ui/src/features/canvas/components/ChannelIntro.tsx b/packages/ui/src/features/canvas/components/ChannelIntro.tsx
index 33919338f7..c39d3d4e1e 100644
--- a/packages/ui/src/features/canvas/components/ChannelIntro.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelIntro.tsx
@@ -55,9 +55,9 @@ export function ChannelIntro({
             <span className={mentionChipClass}>
               @{userDisplayName(creator ?? null)}
             </span>{" "}
-            created this context {creationDatePhrase(channel.created_at)}. This
+            created this channel {creationDatePhrase(channel.created_at)}. This
             is the very beginning of the{" "}
-            <Text weight="bold">{channelName}</Text> context.
+            <Text weight="bold">{channelName}</Text> channel.
           </Text>
         )}
       </div>
@@ -70,7 +70,7 @@ export function ChannelIntro({
             <ItemContent className="self-start">
               <ItemTitle>Created context.md</ItemTitle>
               <ItemDescription className="text-xs">
-                Used in all sessions within this context
+                Used in all sessions within this channel
               </ItemDescription>
             </ItemContent>
           </Item>
@@ -125,9 +125,10 @@ export function ChannelIntro({
             <Info size={18} />
           </ItemMedia>
           <ItemContent className="self-start">
-            <ItemTitle>Learn more about contexts</ItemTitle>
+            <ItemTitle>Learn more about channels</ItemTitle>
             <ItemDescription className="text-xs">
-              Context is a group of tasks that are related to a specific topic.
+              A channel is a group of tasks that are related to a specific
+              topic.
             </ItemDescription>
           </ItemContent>
         </Item>
diff --git a/packages/ui/src/features/canvas/components/ChannelsFab.tsx b/packages/ui/src/features/canvas/components/ChannelsFab.tsx
new file mode 100644
index 0000000000..2b5d618985
--- /dev/null
+++ b/packages/ui/src/features/canvas/components/ChannelsFab.tsx
@@ -0,0 +1,72 @@
+import { FileTextIcon, PlusIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@posthog/quill";
+import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
+import { openTaskInput } from "@posthog/ui/router/useOpenTask";
+import { useRouterState } from "@tanstack/react-router";
+import { SquircleDashed } from "lucide-react";
+import { useState } from "react";
+
+// The create affordance for the Channels space, floated over the bottom-right
+// of the channel list. It owns the create-channel modal (the list itself has no
+// other entry point) and opens its menu upward, since it sits at the bottom.
+export function ChannelsFab() {
+  const [modalOpen, setModalOpen] = useState(false);
+  // New task has no /website mirror yet, so it jumps back to Code unless we're
+  // already in the Channels space — same rule as the nav's New task row.
+  const inChannels = useRouterState({
+    select: (s) => s.location.pathname.startsWith("/website"),
+  });
+
+  return (
+    <>
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <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" />
+                  </Button>
+                }
+              />
+            }
+          />
+          <TooltipContent side="top" align="center">
+            Create something new
+          </TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="center" side="top" sideOffset={6}>
+          <DropdownMenuItem onClick={() => setModalOpen(true)}>
+            <SquircleDashed size={14} className="text-gray-9" />
+            New channel
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() =>
+              openTaskInput(inChannels ? { space: "website" } : undefined)
+            }
+          >
+            <FileTextIcon size={14} className="text-gray-9" />
+            New task
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <CreateChannelModal open={modalOpen} onOpenChange={setModalOpen} />
+    </>
+  );
+}
diff --git a/packages/ui/src/features/canvas/components/ChannelsList.tsx b/packages/ui/src/features/canvas/components/ChannelsList.tsx
index a228e5dca1..7f48a064ee 100644
--- a/packages/ui/src/features/canvas/components/ChannelsList.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsList.tsx
@@ -37,7 +37,6 @@ import {
   TooltipTrigger,
 } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
-import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
 import { RenameChannelModal } from "@posthog/ui/features/canvas/components/RenameChannelModal";
 import { trackAndCreateCanvas } from "@posthog/ui/features/canvas/createCanvasAnalytics";
 import {
@@ -138,7 +137,7 @@ function useChannelActions(channel: Channel): {
         channel_id: channel.id,
         success: false,
       });
-      toast.error("Couldn't delete context", {
+      toast.error("Couldn't delete channel", {
         description: error instanceof Error ? error.message : String(error),
       });
       return false;
@@ -148,7 +147,7 @@ function useChannelActions(channel: Channel): {
   const actions: ChannelActionItem[] = [
     {
       key: "star",
-      label: isStarred ? "Unstar context" : "Star context",
+      label: isStarred ? "Unstar channel" : "Star channel",
       icon: <StarIcon size={14} weight={isStarred ? "fill" : "regular"} />,
       onSelect: () => {
         track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -167,14 +166,14 @@ function useChannelActions(channel: Channel): {
     },
     {
       key: "rename",
-      label: "Rename context…",
+      label: "Rename channel…",
       icon: <PencilSimpleIcon size={14} />,
       separatorBefore: true,
       onSelect: () => setRenameOpen(true),
     },
     {
       key: "delete",
-      label: "Delete context…",
+      label: "Delete channel…",
       icon: <TrashIcon size={14} />,
       variant: "destructive",
       onSelect: () => setConfirmDeleteOpen(true),
@@ -441,17 +440,17 @@ function ChannelSection({ channel }: { channel: Channel }) {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete {channel.name}?</AlertDialogTitle>
             <AlertDialogDescription>
-              This permanently deletes the context and can’t be undone.
+              This permanently deletes the channel and can’t be undone.
               <ul className="list-disc ps-4">
                 <li>
-                  The context and its{" "}
+                  The channel and its{" "}
                   <span className="font-medium">CONTEXT.md</span> are deleted.
                 </li>
                 <li>
-                  Every canvas saved in this context is permanently deleted.
+                  Every canvas saved in this channel is permanently deleted.
                 </li>
                 <li>
-                  Filed tasks are removed from the context, but the tasks
+                  Filed tasks are removed from the channel, but the tasks
                   themselves are not deleted.
                 </li>
               </ul>
@@ -470,7 +469,7 @@ function ChannelSection({ channel }: { channel: Channel }) {
                 })
               }
             >
-              Delete context
+              Delete channel
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -490,54 +489,139 @@ function PersonalChannelRow() {
   const { createChannel, isCreating } = useChannelMutations();
   // Listing backend channels lazily provisions the personal channel server-side.
   useTaskChannels();
+  // The "+" dropdown (New task / New canvas), mirroring a shared channel row.
+  const [newMenuOpen, setNewMenuOpen] = useState(false);
 
   const meFolder = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
+  const createAndOpenCanvas = useCreateAndOpenDashboard(meFolder?.id);
   const isActive =
     !!meFolder &&
     (pathname === `/website/${meFolder.id}` ||
       pathname.startsWith(`/website/${meFolder.id}/`));
 
-  const open = async () => {
+  // The "me" folder is created on first use, so every action resolves the id
+  // rather than closing over it — the row is actionable before it exists.
+  const ensureFolderId = async (): Promise<string | undefined> => {
     try {
-      const folder = meFolder ?? (await createChannel(PERSONAL_CHANNEL_NAME));
-      void navigate({
-        to: "/website/$channelId",
-        params: { channelId: folder.id },
-      });
+      return (meFolder ?? (await createChannel(PERSONAL_CHANNEL_NAME))).id;
     } catch (error) {
       toast.error("Couldn't open me", {
         description: error instanceof Error ? error.message : String(error),
       });
+      return undefined;
     }
   };
 
+  const open = async () => {
+    const channelId = await ensureFolderId();
+    if (!channelId) return;
+    void navigate({ to: "/website/$channelId", params: { channelId } });
+  };
+
+  const newTask = async () => {
+    const channelId = await ensureFolderId();
+    if (!channelId) return;
+    track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+      action_type: "new_task_open",
+      surface: "sidebar",
+      channel_id: channelId,
+    });
+    void navigate({ to: "/website/$channelId/new", params: { channelId } });
+  };
+
+  const newCanvas = async () => {
+    const channelId = await ensureFolderId();
+    if (!channelId) return;
+    trackAndCreateCanvas(
+      channelId,
+      undefined,
+      "sidebar",
+      () => void createAndOpenCanvas({ channelId }),
+    );
+  };
+
   return (
-    <Button
-      variant="default"
-      size="default"
-      left
-      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"
-    >
-      <SquircleDashed size={14} className="shrink-0 text-gray-9" />
-      <span className="truncate font-medium text-[13px] text-gray-12">
-        {PERSONAL_CHANNEL_NAME}
-      </span>
-      <LockSimpleIcon size={12} className="ml-auto shrink-0 text-gray-9" />
-    </Button>
+    <Box className="group/chan relative">
+      <Button
+        variant="default"
+        size="default"
+        left
+        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"
+      >
+        <SquircleDashed size={14} className="shrink-0 text-gray-9" />
+        <span className="truncate font-medium text-[13px] text-gray-12">
+          {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-gray-9 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}>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <DropdownMenuTrigger
+                  render={
+                    <Button
+                      variant="outline"
+                      size="icon-xs"
+                      aria-label={`New in ${PERSONAL_CHANNEL_NAME}`}
+                      className={cn(
+                        "gap-1 transition-opacity group-hover:border-border",
+                        newMenuOpen
+                          ? "opacity-100"
+                          : "opacity-0 group-hover/chan:opacity-100",
+                      )}
+                    >
+                      <PlusIcon size={12} weight="bold" />
+                    </Button>
+                  }
+                />
+              }
+            />
+            <TooltipContent side="top">New…</TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent
+            align="start"
+            side="bottom"
+            sideOffset={4}
+            className="w-auto min-w-fit"
+          >
+            <DropdownMenuItem onClick={() => void newTask()}>
+              <FileTextIcon size={14} />
+              New task
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => void newCanvas()}>
+              <ChartBarIcon size={14} />
+              New canvas
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </Box>
   );
 }
 
 // The channel list — the Channels space sidebar body. The private "#me"
 // channel is pinned at the top; starred channels surface in their own section
 // so the ones you use most stay in reach; the rest sit under a "Channels"
-// label with the "New" channel button.
+// label. Creating anything goes through the floating ChannelsFab, mounted by
+// the sidebar outside this scroll region.
 export function ChannelsList() {
   const { channels: allChannels, isLoading } = useChannels();
   const { starredRefToShortcutId } = useChannelStars();
-  const [modalOpen, setModalOpen] = useState(false);
 
   // The "me" folder renders as the pinned personal row, not a shared channel.
   const channels = allChannels.filter((c) => c.name !== PERSONAL_CHANNEL_NAME);
@@ -561,7 +645,9 @@ export function ChannelsList() {
     // One shared provider groups every row tooltip so that once one shows,
     // moving to the next row reveals its tooltip instantly (no re-delay).
     <TooltipProvider delay={600}>
-      <Flex direction="column" gap="px" className="px-2 pt-2 pb-2">
+      {/* Bottom padding clears the floating create button (ChannelsFab), so the
+          last channel stays reachable at full scroll. */}
+      <Flex direction="column" gap="px" className="px-2 pt-2 pb-16">
         <PersonalChannelRow />
 
         {starred.length > 0 && (
@@ -581,25 +667,15 @@ export function ChannelsList() {
         )}
 
         <Box className={cn(starred.length > 0 && "mt-3")}>
-          <MenuLabel className="group flex items-center justify-between uppercase">
-            <span className="flex items-center gap-2">
-              <SquircleDashed size={14} className="text-gray-9" />
-              Contexts
-            </span>
-            <Button
-              variant="outline"
-              size="icon-xs"
-              onClick={() => setModalOpen(true)}
-              className="-mr-1 group-hover:border-border"
-            >
-              <PlusIcon size={14} />
-            </Button>
+          <MenuLabel className="flex items-center gap-2 uppercase">
+            <SquircleDashed size={14} className="text-gray-9" />
+            Channels
           </MenuLabel>
         </Box>
 
         {!isLoading && channels.length === 0 && (
           <Text size="1" className="px-2 text-gray-9">
-            No contexts yet. Create one to get started.
+            No channels yet. Create one to get started.
           </Text>
         )}
 
@@ -609,8 +685,6 @@ export function ChannelsList() {
           ))}
         </div>
       </Flex>
-
-      <CreateChannelModal open={modalOpen} onOpenChange={setModalOpen} />
     </TooltipProvider>
   );
 }
diff --git a/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx b/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx
index 111ff227f5..1ed590fa55 100644
--- a/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx
@@ -2,6 +2,7 @@ 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 { 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 { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
@@ -110,8 +111,13 @@ export function ChannelsSidebar() {
         {bodyChannelsEnabled ? (
           <>
             <Separator />
-            <Box className="scroll-mask-4 min-h-0 flex-1 overflow-y-auto">
-              <ChannelsList />
+            {/* 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 />
+              </Box>
+              <ChannelsFab />
             </Box>
           </>
         ) : (
diff --git a/packages/ui/src/features/canvas/components/CreateChannelModal.tsx b/packages/ui/src/features/canvas/components/CreateChannelModal.tsx
index d2c61fc89b..3f4e79e5b9 100644
--- a/packages/ui/src/features/canvas/components/CreateChannelModal.tsx
+++ b/packages/ui/src/features/canvas/components/CreateChannelModal.tsx
@@ -107,7 +107,7 @@ export function CreateChannelModal({
         surface: "sidebar",
         success: false,
       });
-      toast.error("Couldn't create context", {
+      toast.error("Couldn't create channel", {
         description: error instanceof Error ? error.message : String(error),
       });
       return;
@@ -183,7 +183,7 @@ export function CreateChannelModal({
           <DialogTitle className="sr-only">Create your context.md</DialogTitle>
         ) : (
           <DialogHeader>
-            <DialogTitle>Create a context</DialogTitle>
+            <DialogTitle>Create a channel</DialogTitle>
           </DialogHeader>
         )}
 
@@ -234,7 +234,7 @@ export function CreateChannelModal({
           {needsDescription && (
             <Field>
               <FieldLabel htmlFor="context-description">
-                What's this context about?
+                What's this channel about?
               </FieldLabel>
               <Textarea
                 id="context-description"
diff --git a/packages/ui/src/features/canvas/components/RenameChannelModal.tsx b/packages/ui/src/features/canvas/components/RenameChannelModal.tsx
index 12ef4df1cd..afb0e1e441 100644
--- a/packages/ui/src/features/canvas/components/RenameChannelModal.tsx
+++ b/packages/ui/src/features/canvas/components/RenameChannelModal.tsx
@@ -55,7 +55,7 @@ export function RenameChannelModal({
         channel_id: channel.id,
         success: false,
       });
-      toast.error("Couldn't rename context", {
+      toast.error("Couldn't rename channel", {
         description: error instanceof Error ? error.message : String(error),
       });
     }
@@ -71,7 +71,7 @@ export function RenameChannelModal({
       <Dialog.Content maxWidth="560px">
         <Flex align="start" justify="between" gap="3">
           <Dialog.Title>
-            <Text className="font-bold text-lg">Rename context</Text>
+            <Text className="font-bold text-lg">Rename channel</Text>
           </Dialog.Title>
           <Dialog.Close>
             <IconButton
diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index bc471627d7..018b4152fd 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -163,7 +163,7 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
             task_id: task.id,
             success: false,
           });
-          toast.error("Couldn't file task to context", {
+          toast.error("Couldn't file task to channel", {
             description: error instanceof Error ? error.message : String(error),
           });
         });
diff --git a/packages/ui/src/features/canvas/components/WebsiteContext.tsx b/packages/ui/src/features/canvas/components/WebsiteContext.tsx
index 5a5ef5099f..9d52a6e4dc 100644
--- a/packages/ui/src/features/canvas/components/WebsiteContext.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteContext.tsx
@@ -40,7 +40,7 @@ type Mode = "rendered" | "edit";
 
 // Initial markdown shown when a folder has no instructions yet — gives both
 // humans and agents a structural starting point instead of a blank screen.
-const EMPTY_TEMPLATE = "# Folder context\n\nDescribe what lives here.\n";
+const EMPTY_TEMPLATE = "# Channel context\n\nDescribe what lives here.\n";
 
 interface WebsiteContextProps {
   channelId: string;
@@ -301,7 +301,7 @@ export function WebsiteContext({ channelId }: WebsiteContextProps) {
               size="2"
               rows={24}
               placeholder={
-                "# Folder context\n\nWrite markdown describing this folder…"
+                "# Channel context\n\nWrite markdown describing this channel…"
               }
               className="font-[var(--code-font-family)]"
             />
diff --git a/packages/ui/src/features/canvas/contextPrompt.ts b/packages/ui/src/features/canvas/contextPrompt.ts
index 29e6dc68c4..913bd29e7a 100644
--- a/packages/ui/src/features/canvas/contextPrompt.ts
+++ b/packages/ui/src/features/canvas/contextPrompt.ts
@@ -25,14 +25,14 @@ export function buildContextGenerationPrompt(input: {
 }): string {
   const { channelName, channelId, description } = input;
   const seed = description?.trim()
-    ? `\nThe user describes what this context is about:
+    ? `\nThe user describes what this channel is about:
 """
 ${description.trim()}
 """
 Treat this as the primary guide for what CONTEXT.md should cover — start from it,
 then verify and fill it out against the sources below.\n`
     : "";
-  return `Build a CONTEXT.md for the context/folder "${channelName}".
+  return `Build a CONTEXT.md for the channel "${channelName}".
 ${seed}
 CONTEXT.md tells future agents the specific, non-obvious details they need to
 work in "${channelName}": what it is, key files, conventions, gotchas, and the
diff --git a/packages/ui/src/features/canvas/hooks/useDashboards.ts b/packages/ui/src/features/canvas/hooks/useDashboards.ts
index 213e3ed77b..af8267c501 100644
--- a/packages/ui/src/features/canvas/hooks/useDashboards.ts
+++ b/packages/ui/src/features/canvas/hooks/useDashboards.ts
@@ -193,7 +193,7 @@ export function useOpenHomeCanvas(): (channel: {
         });
       } catch (error) {
         log.error("Failed to open home canvas", { error });
-        toast.error("Couldn't open context home", {
+        toast.error("Couldn't open channel home", {
           description: error instanceof Error ? error.message : String(error),
         });
       }
@@ -202,25 +202,34 @@ export function useOpenHomeCanvas(): (channel: {
   );
 }
 
-/** Create an empty canvas in a channel, enter edit mode, and navigate to it. */
+/**
+ * Create an empty canvas in a channel, enter edit mode, and navigate to it.
+ * `opts.channelId` overrides the bound channel, for callers whose channel is
+ * provisioned lazily and so has no id at render time (the "me" row).
+ */
 export function useCreateAndOpenDashboard(
   channelId: string | undefined,
-): (opts?: { templateId?: string; name?: string }) => Promise<void> {
+): (opts?: {
+  templateId?: string;
+  name?: string;
+  channelId?: string;
+}) => Promise<void> {
   const navigate = useNavigate();
   const { createDashboard } = useDashboardMutations();
   const setEditing = useDashboardEditStore((s) => s.setEditing);
 
   return useCallback(
     async (opts) => {
-      if (!channelId) return;
+      const targetChannelId = opts?.channelId ?? channelId;
+      if (!targetChannelId) return;
       const templateId = opts?.templateId ?? "freeform";
       const name = opts?.name ?? UNTITLED_CANVAS_NAME;
       try {
-        const record = await createDashboard(channelId, name, templateId);
+        const record = await createDashboard(targetChannelId, name, templateId);
         setEditing(record.id, true);
         await navigate({
           to: "/website/$channelId/dashboards/$dashboardId",
-          params: { channelId, dashboardId: record.id },
+          params: { channelId: targetChannelId, dashboardId: record.id },
         });
       } catch (error) {
         log.error("Failed to create canvas", { error });
diff --git a/packages/ui/src/features/command/CommandMenu.tsx b/packages/ui/src/features/command/CommandMenu.tsx
index 411b09c754..51f24d27f6 100644
--- a/packages/ui/src/features/command/CommandMenu.tsx
+++ b/packages/ui/src/features/command/CommandMenu.tsx
@@ -505,11 +505,11 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
     if (channels.length === 0) return [];
     return [
       {
-        label: "Contexts",
+        label: "Channels",
         items: channels.map((channel) => ({
           id: `channel-${channel.id}`,
           label: channel.name,
-          keywords: "context",
+          keywords: "channel",
           icon: <SquircleDashed size={12} className="text-gray-11" />,
           action: "open-channel" as CommandMenuAction,
           channelId: channel.id,
diff --git a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
index 1bcc094b2e..3701b269bb 100644
--- a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
+++ b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
@@ -190,7 +190,7 @@ export function SidebarNavSection({
           <span className="flex shrink-0 items-center opacity-80">
             <SquircleDashed size={14} />
           </span>
-          <span className="min-w-0 truncate font-medium">Contexts</span>
+          <span className="min-w-0 truncate font-medium">Channels</span>
           <Badge variant="info">Alpha</Badge>
           <Switch
             id="channels-toggle"
diff --git a/packages/ui/src/features/task-detail/components/TaskInput.tsx b/packages/ui/src/features/task-detail/components/TaskInput.tsx
index ac95290dca..cf4b0766c4 100644
--- a/packages/ui/src/features/task-detail/components/TaskInput.tsx
+++ b/packages/ui/src/features/task-detail/components/TaskInput.tsx
@@ -1345,7 +1345,7 @@ export function TaskInput({
                     <span className="shrink-0 text-gray-10">Using:</span>
                     <span className="inline-flex items-center gap-1 rounded-[var(--radius-1)] bg-[var(--gray-a3)] px-1.5 py-px font-medium text-[var(--gray-11)]">
                       {onContextChipClick ? (
-                        <Tooltip content="View this context">
+                        <Tooltip content="View this CONTEXT.md">
                           <button
                             type="button"
                             onClick={onContextChipClick}
@@ -1365,11 +1365,11 @@ export function TaskInput({
                           </span>
                         </>
                       )}
-                      <Tooltip content="Don't include this context">
+                      <Tooltip content="Don't include this CONTEXT.md">
                         <button
                           type="button"
                           onClick={() => setChannelContextDismissed(true)}
-                          aria-label="Remove context from prompt"
+                          aria-label="Remove CONTEXT.md from prompt"
                           className="ml-0.5 inline-flex size-3.5 items-center justify-center rounded text-gray-10 hover:bg-gray-5 hover:text-gray-12"
                         >
                           <X size={12} />

From c6252b2076537ecb035d448809695bf55e690bd2 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Thu, 16 Jul 2026 14:32:22 +0100
Subject: [PATCH 2/5] feat(channels): collapsible sidebar groups, # icons,
 two-step create
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Group the channel sidebar under collapsible "Starred"/"Channels" headers.
The whole header row is the trigger; it rests as a "#" and swaps to a
chevron on hover/focus. Collapse state persists per section in the shared
sidebar store, keyed `channels:*` to stay clear of the Code sidebar's
folder keys.

Uses Base UI's Collapsible directly rather than quill's: quill styles its
trigger as a button (which fought the MenuLabel styling the headers had)
and animates panel height, which janked against a list this long. The
panel is `keepMounted` — every row builds a context menu, dropdown,
tooltip and two dialogs up front, so unmounting on close made each expand
rebuild the lot (~940ms for 46 channels, vs ~80ms to collapse).

Replace every remaining SquircleDashed with a "#", so channel rows, group
headers, tabs, header, breadcrumb, rename field and command palette all
speak one icon.

Split channel creation into two steps: name (CTA "Next"), then "what's
this channel about?" with Skip/Create. Step two is a real nested dialog,
so quill scales and dims step one behind it and the stack itself says
there's another step; escaping step two returns to the name, intact.
Nothing is created until Create (channel + CONTEXT.md plan session) or
Skip (channel alone). The nesting offset is inverted from quill's default
so step one peeks above rather than below.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019G63f4afY9vsbKsvK654Wj
---
 .../features/browser-tabs/BrowserTabStrip.tsx |   4 +-
 .../canvas/components/ChannelBreadcrumb.tsx   |   7 +-
 .../canvas/components/ChannelHeader.tsx       |   7 +-
 .../canvas/components/ChannelsFab.tsx         |   5 +-
 .../canvas/components/ChannelsList.tsx        | 127 ++++++--
 .../canvas/components/CreateChannelModal.tsx  | 285 +++++++++++-------
 .../canvas/components/RenameChannelModal.tsx  |   5 +-
 .../ui/src/features/command/CommandMenu.tsx   |   4 +-
 .../sidebar/components/SidebarNavSection.tsx  |   4 +-
 9 files changed, 290 insertions(+), 158 deletions(-)

diff --git a/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx b/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
index 3baed5c3b4..fdd0302fc0 100644
--- a/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
+++ b/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
@@ -1,5 +1,6 @@
 import {
   BrainIcon,
+  HashIcon,
   HouseIcon,
   PlugsConnectedIcon,
   RobotIcon,
@@ -50,7 +51,6 @@ import {
   useRouter,
   useRouterState,
 } from "@tanstack/react-router";
-import { SquircleDashed } from "lucide-react";
 import { type ReactNode, useEffect, useMemo } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import {
@@ -526,7 +526,7 @@ export function BrowserTabStrip() {
           return {
             id: t.id,
             label: meta?.label ?? channel ?? "Channel",
-            icon: <SquircleDashed size={14} />,
+            icon: <HashIcon size={14} />,
             channelName: channel,
             // No section meta → the channel's index page.
             isChannelHome: !meta,
diff --git a/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx b/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx
index 86bd34fbfa..9bd0adaa1f 100644
--- a/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelBreadcrumb.tsx
@@ -1,3 +1,4 @@
+import { HashIcon } from "@phosphor-icons/react";
 import {
   Button,
   Tooltip,
@@ -7,7 +8,6 @@ import {
 import { HeaderTitleEditor } from "@posthog/ui/features/task-detail/HeaderTitleEditor";
 import { Flex, Text } from "@radix-ui/themes";
 import { useNavigate } from "@tanstack/react-router";
-import { SquircleDashed } from "lucide-react";
 import { type ReactNode, useState } from "react";
 
 interface ChannelBreadcrumbProps {
@@ -48,10 +48,7 @@ export function ChannelBreadcrumb({
 
   const channelSegment = (
     <>
-      <SquircleDashed
-        size={12}
-        className="mt-px shrink-0 text-muted-foreground/80"
-      />
+      <HashIcon 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/ChannelHeader.tsx b/packages/ui/src/features/canvas/components/ChannelHeader.tsx
index 23769541bf..3f8161fc7c 100644
--- a/packages/ui/src/features/canvas/components/ChannelHeader.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelHeader.tsx
@@ -1,9 +1,9 @@
+import { HashIcon } from "@phosphor-icons/react";
 import { Button, cn } from "@posthog/quill";
 import { ChannelTabs } from "@posthog/ui/features/canvas/components/ChannelTabs";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { Text } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { SquircleDashed } from "lucide-react";
 
 // The shared channel header: a clickable "# channel" that doubles as the Home
 // item — it routes to the channel home (`/website/$channelId`, like the sidebar
@@ -29,10 +29,7 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
         size="sm"
         className={cn("min-w-0", isHome ? "bg-fill-selected" : "")}
       >
-        <SquircleDashed
-          size={20}
-          className="shrink-0 text-muted-foreground/80"
-        />
+        <HashIcon size={20} className="shrink-0 text-muted-foreground/80" />
         <Text className="min-w-0 truncate font-medium" title={channelName}>
           {channelName ?? "Channel"}
         </Text>
diff --git a/packages/ui/src/features/canvas/components/ChannelsFab.tsx b/packages/ui/src/features/canvas/components/ChannelsFab.tsx
index 2b5d618985..1afff9639e 100644
--- a/packages/ui/src/features/canvas/components/ChannelsFab.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsFab.tsx
@@ -1,4 +1,4 @@
-import { FileTextIcon, PlusIcon } from "@phosphor-icons/react";
+import { FileTextIcon, HashIcon, PlusIcon } from "@phosphor-icons/react";
 import {
   Button,
   DropdownMenu,
@@ -12,7 +12,6 @@ import {
 import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
 import { openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { useRouterState } from "@tanstack/react-router";
-import { SquircleDashed } from "lucide-react";
 import { useState } from "react";
 
 // The create affordance for the Channels space, floated over the bottom-right
@@ -52,7 +51,7 @@ export function ChannelsFab() {
         </Tooltip>
         <DropdownMenuContent align="center" side="top" sideOffset={6}>
           <DropdownMenuItem onClick={() => setModalOpen(true)}>
-            <SquircleDashed size={14} className="text-gray-9" />
+            <HashIcon size={14} className="text-gray-9" />
             New channel
           </DropdownMenuItem>
           <DropdownMenuItem
diff --git a/packages/ui/src/features/canvas/components/ChannelsList.tsx b/packages/ui/src/features/canvas/components/ChannelsList.tsx
index 7f48a064ee..2654500f6a 100644
--- a/packages/ui/src/features/canvas/components/ChannelsList.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsList.tsx
@@ -1,7 +1,11 @@
+import { Collapsible } from "@base-ui/react/collapsible";
 import {
+  CaretDownIcon,
+  CaretRightIcon,
   ChartBarIcon,
   DotsThreeIcon,
   FileTextIcon,
+  HashIcon,
   LinkIcon,
   LockSimpleIcon,
   PencilSimpleIcon,
@@ -30,6 +34,8 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Empty,
+  EmptyHeader,
   MenuLabel,
   Tooltip,
   TooltipContent,
@@ -54,11 +60,11 @@ import {
   useTaskChannels,
 } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
 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 { track } from "@posthog/ui/shell/analytics";
-import { Box, Flex, Text } from "@radix-ui/themes";
+import { Box, Flex } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { SquircleDashed } from "lucide-react";
 import { Fragment, type ReactNode, useEffect, useRef, useState } from "react";
 import { hostClient } from "../hostClient";
 
@@ -333,7 +339,7 @@ function ChannelSection({ channel }: { channel: Channel }) {
               }}
               className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
             >
-              <SquircleDashed size={14} className="shrink-0 text-gray-9" />
+              <HashIcon size={14} className="shrink-0 text-gray-9" />
               <span
                 className={cn(
                   "truncate font-medium text-[13px] text-gray-12 group-hover/chan:pr-8",
@@ -551,7 +557,7 @@ function PersonalChannelRow() {
         onClick={() => void open()}
         className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
       >
-        <SquircleDashed size={14} className="shrink-0 text-gray-9" />
+        <HashIcon size={14} className="shrink-0 text-gray-9" />
         <span className="truncate font-medium text-[13px] text-gray-12">
           {PERSONAL_CHANNEL_NAME}
         </span>
@@ -614,6 +620,77 @@ function PersonalChannelRow() {
   );
 }
 
+// Collapse state is keyed per section in the shared sidebar store, so it
+// persists across navigation and restarts. Prefixed to stay clear of the Code
+// sidebar's folder sections, which key the same set by folder path.
+const STARRED_SECTION_ID = "channels:starred";
+const CHANNELS_SECTION_ID = "channels:all";
+
+// A collapsible sidebar group ("Starred" / "Channels"). Base UI directly rather
+// than quill's Collapsible: quill styles its trigger as a button (which fought
+// the label styling) and animates the panel height (which janked on a list this
+// long). Unstyled parts give a plain label row that snaps.
+//
+// The whole header row is the trigger. It rests as a "#" and swaps to a chevron
+// on hover or keyboard focus, so the row only advertises the disclosure when
+// you're actually reaching for it.
+function ChannelGroup({
+  sectionId,
+  label,
+  className,
+  children,
+}: {
+  sectionId: string;
+  label: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  const collapsedSections = useSidebarStore((s) => s.collapsedSections);
+  const toggleSection = useSidebarStore((s) => s.toggleSection);
+  const isOpen = !collapsedSections.has(sectionId);
+
+  return (
+    <Collapsible.Root
+      open={isOpen}
+      onOpenChange={() => toggleSection(sectionId)}
+      className={className}
+    >
+      {/* MenuLabel carries the sidebar's label styling; `render` keeps it a
+          real button so the whole row is clickable. */}
+      <Collapsible.Trigger
+        className="group/group-trigger flex w-full items-center gap-2"
+        render={<MenuLabel render={<button type="button" />} />}
+      >
+        <span className="relative flex size-3.5 shrink-0 items-center justify-center">
+          <HashIcon
+            size={14}
+            className="group-hover/group-trigger:hidden group-focus-visible/group-trigger:hidden"
+          />
+          {isOpen ? (
+            <CaretDownIcon
+              size={14}
+              className="hidden group-hover/group-trigger:block group-focus-visible/group-trigger:block"
+            />
+          ) : (
+            <CaretRightIcon
+              size={14}
+              className="hidden group-hover/group-trigger:block group-focus-visible/group-trigger:block"
+            />
+          )}
+        </span>
+        {label}
+      </Collapsible.Trigger>
+      {/* Stay mounted while collapsed. Every row builds a context menu, a
+          dropdown, a tooltip and two dialogs up front, so unmounting on close
+          makes each expand rebuild the lot (~940ms for 46 channels, vs ~80ms
+          to collapse). */}
+      <Collapsible.Panel keepMounted>
+        <div className="pl-5">{children}</div>
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  );
+}
+
 // The channel list — the Channels space sidebar body. The private "#me"
 // channel is pinned at the top; starred channels surface in their own section
 // so the ones you use most stay in reach; the rest sit under a "Channels"
@@ -651,39 +728,25 @@ export function ChannelsList() {
         <PersonalChannelRow />
 
         {starred.length > 0 && (
-          <>
-            <Box>
-              <MenuLabel className="flex items-center gap-2 uppercase">
-                <StarIcon size={14} className="text-gray-9" />
-                Starred
-              </MenuLabel>
-            </Box>
-            <div className="pl-2">
-              {starred.map((channel) => (
-                <ChannelSection key={channel.id} channel={channel} />
-              ))}
-            </div>
-          </>
+          <ChannelGroup sectionId={STARRED_SECTION_ID} label="Starred">
+            {starred.map((channel) => (
+              <ChannelSection key={channel.id} channel={channel} />
+            ))}
+          </ChannelGroup>
         )}
 
-        <Box className={cn(starred.length > 0 && "mt-3")}>
-          <MenuLabel className="flex items-center gap-2 uppercase">
-            <SquircleDashed size={14} className="text-gray-9" />
-            Channels
-          </MenuLabel>
-        </Box>
-
-        {!isLoading && channels.length === 0 && (
-          <Text size="1" className="px-2 text-gray-9">
-            No channels yet. Create one to get started.
-          </Text>
-        )}
-
-        <div className="pl-2">
+        <ChannelGroup sectionId={CHANNELS_SECTION_ID} label="Channels">
+          {!isLoading && channels.length === 0 && (
+            <Empty className="px-2 py-1 text-subtle-foreground text-xs">
+              <EmptyHeader className="text-left">
+                No channels other channels yet.
+              </EmptyHeader>
+            </Empty>
+          )}
           {others.map((channel) => (
             <ChannelSection key={channel.id} channel={channel} />
           ))}
-        </div>
+        </ChannelGroup>
       </Flex>
     </TooltipProvider>
   );
diff --git a/packages/ui/src/features/canvas/components/CreateChannelModal.tsx b/packages/ui/src/features/canvas/components/CreateChannelModal.tsx
index 3f4e79e5b9..5920379390 100644
--- a/packages/ui/src/features/canvas/components/CreateChannelModal.tsx
+++ b/packages/ui/src/features/canvas/components/CreateChannelModal.tsx
@@ -12,7 +12,6 @@ import {
   FieldError,
   FieldLabel,
   Input,
-  Switch,
   Textarea,
 } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
@@ -21,7 +20,7 @@ import { useGenerateContext } from "@posthog/ui/features/canvas/hooks/useGenerat
 import { toast } from "@posthog/ui/primitives/toast";
 import { track } from "@posthog/ui/shell/analytics";
 import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { type CSSProperties, useState } from "react";
 
 // Matches Slack's "Create a channel" naming constraint.
 const MAX_CONTEXT_NAME_LENGTH = 80;
@@ -38,10 +37,12 @@ interface CreateChannelModalProps {
 }
 
 // Two dialogs in one, split on `existingContext`:
-// - Create mode: names the context, creates it, and lands the user in its feed
-//   (the intro card there carries onboarding). An off-by-default toggle reveals
-//   the description textarea to also launch the context.md plan session at
-//   creation time.
+// - Create mode: two steps. Step one names the channel; "Next" advances to step
+//   two, which asks what it's about. Nothing is created until that second step
+//   resolves — "Create" makes the channel and launches the context.md plan
+//   session seeded by the description, "Skip" makes the channel alone. Either
+//   way the user lands in the channel's feed, whose intro card carries the
+//   onboarding (and offers context.md later if skipped).
 // - Describe mode: the "Create your context.md" dialog (opened from the intro
 //   card or the CONTEXT.md empty state). A single textarea whose text seeds
 //   a plan-mode session that builds the context's CONTEXT.md with the user.
@@ -56,8 +57,8 @@ export function CreateChannelModal({
   const navigate = useNavigate();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
-  // Create mode's opt-in "also plan the context.md now" toggle.
-  const [withContextMd, setWithContextMd] = useState(false);
+  // Create mode's step. Describe mode has no name step, so it starts past it.
+  const [step, setStep] = useState<"name" | "describe">("name");
 
   // Reset the fields each time the modal opens so a previous draft never
   // lingers. Adjusted inline during render (prev-prop comparison) rather than in
@@ -68,7 +69,7 @@ export function CreateChannelModal({
     if (open) {
       setName("");
       setDescription("");
-      setWithContextMd(false);
+      setStep("name");
     }
   }
 
@@ -77,20 +78,16 @@ export function CreateChannelModal({
   const remaining = MAX_CONTEXT_NAME_LENGTH - name.length;
   const nameError = isDescribeMode ? null : validateChannelName(trimmedName);
 
-  // The description textarea is live in describe mode and in create mode once
-  // the toggle is on; either way it must be filled to submit.
-  const needsDescription = isDescribeMode || withContextMd;
   const busy = isCreating || isStarting;
-  const canSubmit =
-    !busy &&
-    (isDescribeMode ? true : !!trimmedName && !nameError) &&
-    (!needsDescription || !!trimmedDescription);
+  const canAdvance = !busy && !!trimmedName && !nameError;
+  // "Create" seeds the plan session, so it needs the description; "Skip" is the
+  // way through without one.
+  const canDescribe = !busy && !!trimmedDescription;
 
-  // Create mode: create the context, then land in the channel — its feed opens
-  // with the intro (name, creation line, context.md card) and the "joined" row,
-  // both derived from the channel row. With the toggle on, also launch the
-  // plan session that builds context.md, seeded by the description.
-  const submitCreate = async () => {
+  // Create the channel and land in its feed — the intro (name, creation line,
+  // context.md card) and "joined" row there are derived from the channel row.
+  // With a description, also launch the plan session that builds context.md.
+  const submitCreate = async (withContextMd: boolean) => {
     let contextId: string;
     try {
       const channel = await createChannel(trimmedName);
@@ -160,15 +157,84 @@ export function CreateChannelModal({
     });
   };
 
-  const submit = async () => {
-    if (!canSubmit) return;
+  // The description step's primary action: seed context.md, for a channel that
+  // already exists (describe mode) or one this dialog is about to create.
+  const submitDescribeStep = async () => {
+    if (!canDescribe) return;
     if (isDescribeMode) {
       await submitDescribe();
     } else {
-      await submitCreate();
+      await submitCreate(true);
     }
   };
 
+  const descriptionField = (
+    <Field>
+      {/* In create mode the nested dialog's title asks the question, so the
+          label would just repeat it. */}
+      {isDescribeMode && (
+        <FieldLabel htmlFor="context-description">
+          What's this channel about?
+        </FieldLabel>
+      )}
+      <Textarea
+        id="context-description"
+        autoFocus
+        rows={4}
+        value={description}
+        placeholder={DESCRIPTION_PLACEHOLDER}
+        disabled={busy}
+        onChange={(e) => setDescription(e.target.value)}
+        onKeyDown={(e) => {
+          // ⌘/Ctrl+Enter submits; a bare Enter stays a newline.
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            void submitDescribeStep();
+          }
+        }}
+      />
+    </Field>
+  );
+
+  // Describe mode is only ever the one dialog — the channel already exists, so
+  // there's no name step to nest under.
+  if (isDescribeMode) {
+    return (
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          if (!busy) onOpenChange(next);
+        }}
+      >
+        <DialogContent showCloseButton={false} className="sm:max-w-lg">
+          {/* No visible header here — the textarea's label carries the dialog;
+              the title stays for screen readers. */}
+          <DialogTitle className="sr-only">Create your context.md</DialogTitle>
+          <DialogBody viewportClassName="flex flex-col gap-4">
+            {descriptionField}
+          </DialogBody>
+          <DialogFooter>
+            <DialogClose
+              render={
+                <Button variant="outline" disabled={busy}>
+                  Cancel
+                </Button>
+              }
+            />
+            <Button
+              variant="primary"
+              disabled={!canDescribe}
+              loading={busy}
+              onClick={submitDescribeStep}
+            >
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <Dialog
       open={open}
@@ -176,84 +242,45 @@ export function CreateChannelModal({
         if (!busy) onOpenChange(next);
       }}
     >
-      <DialogContent showCloseButton={false} className="sm:max-w-lg">
-        {isDescribeMode ? (
-          // No visible header in describe mode — the textarea's label carries
-          // the dialog; the title stays for screen readers.
-          <DialogTitle className="sr-only">Create your context.md</DialogTitle>
-        ) : (
-          <DialogHeader>
-            <DialogTitle>Create a channel</DialogTitle>
-          </DialogHeader>
-        )}
+      {/* quill stacks a nested dialog by pushing the *parent* down, which would
+          leave step one peeking below step two. Invert it: pin this step at the
+          base gap and drop step two below it (see its content), so the stack
+          reads first-on-top. Inline style because these are CSS variables. */}
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-lg"
+        style={{ "--quill-dialog-top-gap": "max(1rem, 10vh)" } as CSSProperties}
+      >
+        <DialogHeader>
+          <DialogTitle>Create a channel</DialogTitle>
+        </DialogHeader>
 
         <DialogBody viewportClassName="flex flex-col gap-4">
-          {!isDescribeMode && (
-            <>
-              <Field>
-                <FieldLabel htmlFor="context-name">Name</FieldLabel>
-                <Input
-                  id="context-name"
-                  autoFocus
-                  value={name}
-                  placeholder="e.g. mobile"
-                  maxLength={MAX_CONTEXT_NAME_LENGTH}
-                  disabled={busy}
-                  onChange={(e) => setName(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      void submit();
-                    }
-                  }}
-                />
-                {nameError ? (
-                  <FieldError>{nameError}</FieldError>
-                ) : (
-                  <span className="text-gray-9 text-xs tabular-nums">
-                    {remaining} left
-                  </span>
-                )}
-              </Field>
-              <label
-                htmlFor="context-with-md"
-                className="flex cursor-pointer items-center gap-2 text-sm"
-              >
-                <Switch
-                  id="context-with-md"
-                  className="shrink-0"
-                  checked={withContextMd}
-                  disabled={busy}
-                  onCheckedChange={(checked) => setWithContextMd(!!checked)}
-                />
-                Plan its context.md now
-              </label>
-            </>
-          )}
-
-          {needsDescription && (
-            <Field>
-              <FieldLabel htmlFor="context-description">
-                What's this channel about?
-              </FieldLabel>
-              <Textarea
-                id="context-description"
-                autoFocus={isDescribeMode}
-                rows={4}
-                value={description}
-                placeholder={DESCRIPTION_PLACEHOLDER}
-                disabled={busy}
-                onChange={(e) => setDescription(e.target.value)}
-                onKeyDown={(e) => {
-                  // ⌘/Ctrl+Enter submits; a bare Enter stays a newline.
-                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                    e.preventDefault();
-                    void submit();
-                  }
-                }}
-              />
-            </Field>
-          )}
+          <Field>
+            <FieldLabel htmlFor="context-name">Name</FieldLabel>
+            <Input
+              id="context-name"
+              autoFocus
+              value={name}
+              placeholder="e.g. mobile"
+              maxLength={MAX_CONTEXT_NAME_LENGTH}
+              disabled={busy}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  if (canAdvance) setStep("describe");
+                }
+              }}
+            />
+            {nameError ? (
+              <FieldError>{nameError}</FieldError>
+            ) : (
+              <span className="text-gray-9 text-xs tabular-nums">
+                {remaining} left
+              </span>
+            )}
+          </Field>
         </DialogBody>
 
         <DialogFooter>
@@ -266,13 +293,63 @@ export function CreateChannelModal({
           />
           <Button
             variant="primary"
-            disabled={!canSubmit}
-            loading={busy}
-            onClick={submit}
+            disabled={!canAdvance}
+            onClick={() => setStep("describe")}
           >
-            {needsDescription ? "Plan and create" : "Create"}
+            Next
           </Button>
         </DialogFooter>
+
+        {/* Step two, nested inside step one rather than replacing it: quill
+            scales and dims a parent that has a nested dialog open, so the name
+            step stays visible behind — the stack is the affordance that says
+            there's another step. Dismissing it (Escape) returns here. */}
+        <Dialog
+          open={step === "describe"}
+          onOpenChange={(next) => {
+            if (!busy && !next) setStep("name");
+          }}
+        >
+          <DialogContent
+            showCloseButton={false}
+            className="sm:max-w-lg"
+            // Sits below the name step, whose scaled-down top edge stays visible
+            // above this one.
+            style={
+              {
+                "--quill-dialog-top-gap": "max(1rem, 10vh + 1.5rem)",
+              } as CSSProperties
+            }
+          >
+            <DialogHeader>
+              <DialogTitle>What's this channel about?</DialogTitle>
+            </DialogHeader>
+
+            <DialogBody viewportClassName="flex flex-col gap-4">
+              {descriptionField}
+            </DialogBody>
+
+            <DialogFooter>
+              {/* Skip still creates the channel — it only forgoes the
+                  context.md, which the channel's intro card offers later. */}
+              <Button
+                variant="default"
+                disabled={busy}
+                onClick={() => void submitCreate(false)}
+              >
+                Skip
+              </Button>
+              <Button
+                variant="primary"
+                disabled={!canDescribe}
+                loading={busy}
+                onClick={submitDescribeStep}
+              >
+                Create
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </DialogContent>
     </Dialog>
   );
diff --git a/packages/ui/src/features/canvas/components/RenameChannelModal.tsx b/packages/ui/src/features/canvas/components/RenameChannelModal.tsx
index afb0e1e441..2384d5369b 100644
--- a/packages/ui/src/features/canvas/components/RenameChannelModal.tsx
+++ b/packages/ui/src/features/canvas/components/RenameChannelModal.tsx
@@ -1,4 +1,4 @@
-import { XIcon } from "@phosphor-icons/react";
+import { HashIcon, XIcon } from "@phosphor-icons/react";
 import { validateChannelName } from "@posthog/core/canvas/channelName";
 import { Button } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
@@ -7,7 +7,6 @@ import { useChannelMutations } from "@posthog/ui/features/canvas/hooks/useChanne
 import { toast } from "@posthog/ui/primitives/toast";
 import { track } from "@posthog/ui/shell/analytics";
 import { Dialog, Flex, IconButton, Text, TextField } from "@radix-ui/themes";
-import { SquircleDashed } from "lucide-react";
 import { useEffect, useState } from "react";
 
 // Matches the create-channel naming constraint.
@@ -111,7 +110,7 @@ export function RenameChannelModal({
             }}
           >
             <TextField.Slot>
-              <SquircleDashed size={16} className="text-gray-10" />
+              <HashIcon size={16} className="text-gray-10" />
             </TextField.Slot>
             <TextField.Slot side="right">
               <Text className="text-gray-9 text-sm tabular-nums">
diff --git a/packages/ui/src/features/command/CommandMenu.tsx b/packages/ui/src/features/command/CommandMenu.tsx
index 51f24d27f6..ee1d39516c 100644
--- a/packages/ui/src/features/command/CommandMenu.tsx
+++ b/packages/ui/src/features/command/CommandMenu.tsx
@@ -3,6 +3,7 @@ import {
   CaretRightIcon,
   ChartLine,
   EnvelopeSimple,
+  HashIcon,
 } from "@phosphor-icons/react";
 import { workspaceIdSet } from "@posthog/core/command-center/eligibility";
 import { resolveService } from "@posthog/di/container";
@@ -78,7 +79,6 @@ import {
   ZoomInIcon,
   ZoomOutIcon,
 } from "@radix-ui/react-icons";
-import { SquircleDashed } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 interface CommandMenuProps {
@@ -510,7 +510,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
           id: `channel-${channel.id}`,
           label: channel.name,
           keywords: "channel",
-          icon: <SquircleDashed size={12} className="text-gray-11" />,
+          icon: <HashIcon size={12} className="text-gray-11" />,
           action: "open-channel" as CommandMenuAction,
           channelId: channel.id,
           onRun: () => {
diff --git a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
index 3701b269bb..c92edb805f 100644
--- a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
+++ b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx
@@ -1,3 +1,4 @@
+import { HashIcon } from "@phosphor-icons/react";
 import { Badge, Switch } from "@posthog/quill";
 import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
@@ -26,7 +27,6 @@ import { track } from "@posthog/ui/shell/analytics";
 import { useCommandMenuStore } from "@posthog/ui/shell/commandMenuStore";
 import { Box, Flex } from "@radix-ui/themes";
 import { useRouterState } from "@tanstack/react-router";
-import { SquircleDashed } from "lucide-react";
 import { ActivityItem } from "./items/ActivityItem";
 import { AgentsItem } from "./items/AgentsItem";
 import { CommandCenterItem } from "./items/CommandCenterItem";
@@ -188,7 +188,7 @@ export function SidebarNavSection({
           className="group flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1 text-[13px] leading-snug transition-colors hover:bg-fill-secondary"
         >
           <span className="flex shrink-0 items-center opacity-80">
-            <SquircleDashed size={14} />
+            <HashIcon size={14} />
           </span>
           <span className="min-w-0 truncate font-medium">Channels</span>
           <Badge variant="info">Alpha</Badge>

From 8ce968a003b5130dd15a69f23480dc88883395ee Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Thu, 16 Jul 2026 14:39:33 +0100
Subject: [PATCH 3/5] fix(channels): don't flash the empty state while a new
 channel resolves
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WebsiteChannelHome took only `channel` from useBackendChannel and dropped
its isLoading. For a freshly created channel that hook resolves the
backend channel over the network (a resolve-or-create POST), and for that
whole window the view had no intro (it needs backendChannel), no tasks,
and — because the feed query is disabled until the id exists, and a
disabled query reports isLoading:false — believed it wasn't loading. So
ChannelFeedView fell through to `emptyState` and flashed the welcome +
suggestions screen before the feed appeared.

Fold the identity resolution into the loading flag: a channel isn't empty
until we know which channel it is. A plain reload never showed this
because the backend channels list is already cached by the time the view
mounts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019G63f4afY9vsbKsvK654Wj
---
 .../canvas/components/WebsiteChannelHome.tsx  | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index 018b4152fd..09d06ccc5b 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -52,7 +52,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const { channels } = useChannels();
+  const { channels, isLoading: isLoadingChannels } = useChannels();
   const channelName = channels.find((c) => c.id === channelId)?.name;
   const { fileTask } = useChannelTaskMutations();
 
@@ -64,8 +64,23 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
 
   // The folder channel maps onto a backend channel (by name; "me" → the
   // personal channel), which owns the task feed and threads.
-  const { channel: backendChannel } = useBackendChannel(channelName);
-  const { tasks, isLoading } = useChannelFeed(backendChannel?.id);
+  const { channel: backendChannel, isLoading: isResolvingChannel } =
+    useBackendChannel(channelName);
+  const { tasks, isLoading: isLoadingFeed } = useChannelFeed(
+    backendChannel?.id,
+  );
+  // Until the backend channel resolves there's no feed to ask for, and the feed
+  // query is disabled — which reports isLoading:false, indistinguishable from
+  // "this channel is empty". A freshly created channel resolves its backend
+  // channel over the network (a POST), so treating that window as "not loading"
+  // flashes the welcome/suggestions empty state before the feed appears. Fold
+  // the whole identity resolution in: we can't call a channel empty until we
+  // know which channel it is.
+  const isLoading =
+    isLoadingChannels ||
+    isResolvingChannel ||
+    (!!channelName && !backendChannel) ||
+    isLoadingFeed;
   // Durable "PostHog agent" rows (CONTEXT.md being built, …) live on the
   // backend channel — the same id the feed tasks use, not the folder id.
   const { messages: feedMessages } = useChannelFeedMessages(backendChannel?.id);

From b318ed1d0b327a3ed0259d6530808d7ce4c97f1f Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Thu, 16 Jul 2026 15:11:57 +0100
Subject: [PATCH 4/5] =?UTF-8?q?fix(channels):=20review=20fixes=20=E2=80=94?=
 =?UTF-8?q?=20empty-state=20copy,=20failed=20resolve,=20#me=20race?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses review on #3510.

- Empty state read "No channels other channels yet."; it's the all-channels
  empty case, so "No channels yet."

- A failed backend-channel resolve left the feed spinning forever: the
  view waited on `!backendChannel`, which never clears. Worse, the resolve
  effect re-fired on its own settle (isResolving true→false with existing
  still undefined), so a failure looped the POST indefinitely. Guard the
  effect on failure and expose `resolveFailed` so the view stops waiting.
  Scoped to the name that failed (the mutation's variables), so switching
  to another channel still gets its own attempt.

- Personal-channel provisioning could double-create: the sidebar row and
  the new-tab path each guarded their own in-flight create, which still
  raced each other, and folder creation isn't idempotent by path. One
  shared ensurePersonalChannel now serves both.

Not changed: React Doctor's `control-has-associated-label` on the group
trigger is a false positive — it has a text label, and the a11y tree reads
it as button "CHANNELS".

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019G63f4afY9vsbKsvK654Wj
---
 .../features/browser-tabs/BrowserTabStrip.tsx | 21 ++------------
 .../canvas/components/ChannelsList.tsx        | 11 +++----
 .../canvas/components/WebsiteChannelHome.tsx  | 12 +++++---
 .../features/canvas/ensurePersonalChannel.ts  | 29 +++++++++++++++++++
 .../features/canvas/hooks/useTaskChannels.ts  | 28 ++++++++++++++++--
 5 files changed, 71 insertions(+), 30 deletions(-)
 create mode 100644 packages/ui/src/features/canvas/ensurePersonalChannel.ts

diff --git a/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx b/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
index fdd0302fc0..f803282b2e 100644
--- a/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
+++ b/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx
@@ -25,8 +25,8 @@ import {
 } from "@posthog/shared";
 import { channelSectionFor } from "@posthog/ui/features/canvas/channelSections";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
+import { ensurePersonalChannel } from "@posthog/ui/features/canvas/ensurePersonalChannel";
 import {
-  type Channel,
   useChannelMutations,
   useChannels,
 } from "@posthog/ui/features/canvas/hooks/useChannels";
@@ -34,7 +34,6 @@ import {
   useDashboard,
   useDashboards,
 } from "@posthog/ui/features/canvas/hooks/useDashboards";
-import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
 import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { usePanelLayoutStore } from "@posthog/ui/features/panels/panelLayoutStore";
@@ -87,13 +86,6 @@ declare module "@tanstack/history" {
 const canvasInfo = new Map<string, { name: string; templateId: string }>();
 const taskInfo = new Map<string, string>();
 
-// Dedupe concurrent #me provisioning. The folder-creation endpoint isn't
-// server-side idempotent, and the new-tab path is on Cmd+T (trivially
-// double-fired/held) — so two landings racing before the first create's cache
-// update lands could each create a "me" folder. One in-flight create is shared
-// across callers until it settles.
-let personalChannelInFlight: Promise<Channel> | null = null;
-
 /** Bounded insert (most-recent kept) so the caches don't grow unbounded over a
  * long session. */
 const MAX_CACHE_ENTRIES = 200;
@@ -739,16 +731,7 @@ export function BrowserTabStrip() {
     // row uses); fall back to the new-task screen if it can't be created.
     void (async () => {
       try {
-        const existing = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
-        if (!existing && !personalChannelInFlight) {
-          personalChannelInFlight = createChannel(
-            PERSONAL_CHANNEL_NAME,
-          ).finally(() => {
-            personalChannelInFlight = null;
-          });
-        }
-        const folder = existing ?? (await personalChannelInFlight);
-        if (!folder) return;
+        const folder = await ensurePersonalChannel(channels, createChannel);
         navigate({
           to: "/website/$channelId",
           params: { channelId: folder.id },
diff --git a/packages/ui/src/features/canvas/components/ChannelsList.tsx b/packages/ui/src/features/canvas/components/ChannelsList.tsx
index 2654500f6a..ca4c269794 100644
--- a/packages/ui/src/features/canvas/components/ChannelsList.tsx
+++ b/packages/ui/src/features/canvas/components/ChannelsList.tsx
@@ -45,6 +45,7 @@ import {
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 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";
 import {
   useChannelStars,
   useChannelStarToggle,
@@ -506,10 +507,12 @@ function PersonalChannelRow() {
       pathname.startsWith(`/website/${meFolder.id}/`));
 
   // The "me" folder is created on first use, so every action resolves the id
-  // rather than closing over it — the row is actionable before it exists.
+  // rather than closing over it — the row is actionable before it exists. The
+  // create is shared (ensurePersonalChannel) so a row click racing its "+" menu
+  // can't provision two.
   const ensureFolderId = async (): Promise<string | undefined> => {
     try {
-      return (meFolder ?? (await createChannel(PERSONAL_CHANNEL_NAME))).id;
+      return (await ensurePersonalChannel(channels, createChannel)).id;
     } catch (error) {
       toast.error("Couldn't open me", {
         description: error instanceof Error ? error.message : String(error),
@@ -738,9 +741,7 @@ export function ChannelsList() {
         <ChannelGroup sectionId={CHANNELS_SECTION_ID} label="Channels">
           {!isLoading && channels.length === 0 && (
             <Empty className="px-2 py-1 text-subtle-foreground text-xs">
-              <EmptyHeader className="text-left">
-                No channels other channels yet.
-              </EmptyHeader>
+              <EmptyHeader className="text-left">No channels yet.</EmptyHeader>
             </Empty>
           )}
           {others.map((channel) => (
diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index 09d06ccc5b..4e4969a5d4 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -64,8 +64,11 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
 
   // The folder channel maps onto a backend channel (by name; "me" → the
   // personal channel), which owns the task feed and threads.
-  const { channel: backendChannel, isLoading: isResolvingChannel } =
-    useBackendChannel(channelName);
+  const {
+    channel: backendChannel,
+    isLoading: isResolvingChannel,
+    resolveFailed,
+  } = useBackendChannel(channelName);
   const { tasks, isLoading: isLoadingFeed } = useChannelFeed(
     backendChannel?.id,
   );
@@ -75,11 +78,12 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   // channel over the network (a POST), so treating that window as "not loading"
   // flashes the welcome/suggestions empty state before the feed appears. Fold
   // the whole identity resolution in: we can't call a channel empty until we
-  // know which channel it is.
+  // know which channel it is — but stop waiting once the resolve has failed,
+  // or the spinner would never end.
   const isLoading =
     isLoadingChannels ||
     isResolvingChannel ||
-    (!!channelName && !backendChannel) ||
+    (!!channelName && !backendChannel && !resolveFailed) ||
     isLoadingFeed;
   // Durable "PostHog agent" rows (CONTEXT.md being built, …) live on the
   // backend channel — the same id the feed tasks use, not the folder id.
diff --git a/packages/ui/src/features/canvas/ensurePersonalChannel.ts b/packages/ui/src/features/canvas/ensurePersonalChannel.ts
new file mode 100644
index 0000000000..88713ba0ea
--- /dev/null
+++ b/packages/ui/src/features/canvas/ensurePersonalChannel.ts
@@ -0,0 +1,29 @@
+import type { Channel } from "@posthog/ui/features/canvas/hooks/useChannels";
+import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+
+// The "me" folder is provisioned on first use, and folder creation is not
+// server-side idempotent by path — so two callers racing before the first
+// create lands in the channels cache would each make their own "me". The entry
+// points are trivially concurrent (Cmd+T's new tab, the sidebar row, its "+"
+// menu), so they share one in-flight create rather than guarding separately:
+// per-caller guards would still race each other.
+let inFlight: Promise<Channel> | null = null;
+
+/**
+ * The user's "me" folder, creating it once if it doesn't exist yet. Concurrent
+ * callers await the same create. Rejects if the create fails; callers own the
+ * messaging.
+ */
+export async function ensurePersonalChannel(
+  channels: readonly Channel[],
+  createChannel: (name: string) => Promise<Channel>,
+): Promise<Channel> {
+  const existing = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
+  if (existing) return existing;
+  if (!inFlight) {
+    inFlight = createChannel(PERSONAL_CHANNEL_NAME).finally(() => {
+      inFlight = null;
+    });
+  }
+  return inFlight;
+}
diff --git a/packages/ui/src/features/canvas/hooks/useTaskChannels.ts b/packages/ui/src/features/canvas/hooks/useTaskChannels.ts
index 709b78707f..00e9337f81 100644
--- a/packages/ui/src/features/canvas/hooks/useTaskChannels.ts
+++ b/packages/ui/src/features/canvas/hooks/useTaskChannels.ts
@@ -71,6 +71,7 @@ export function useTaskChannels(options?: { enabled?: boolean }): {
 export function useBackendChannel(channelName: string | undefined): {
   channel: TaskChannel | undefined;
   isLoading: boolean;
+  resolveFailed: boolean;
 } {
   const normalized = channelName ? normalizeChannelName(channelName) : "";
   const isPersonal = normalized === PERSONAL_CHANNEL_NAME;
@@ -103,14 +104,37 @@ export function useBackendChannel(channelName: string | undefined): {
     },
   });
   const { mutate: resolve, isPending: isResolving } = resolveMutation;
+  // A failed resolve must not re-fire: the effect's own deps flip when the
+  // mutation settles, so retrying on error would spin the POST forever. Scoped
+  // to the name that failed (via the mutation's variables) so a different
+  // channel still gets its own attempt.
+  const resolveFailed =
+    resolveMutation.isError && resolveMutation.variables === normalized;
   useEffect(() => {
-    if (normalized && !isPersonal && !isLoading && !existing && !isResolving) {
+    if (
+      normalized &&
+      !isPersonal &&
+      !isLoading &&
+      !existing &&
+      !isResolving &&
+      !resolveFailed
+    ) {
       resolve(normalized);
     }
-  }, [normalized, isPersonal, isLoading, existing, isResolving, resolve]);
+  }, [
+    normalized,
+    isPersonal,
+    isLoading,
+    existing,
+    isResolving,
+    resolveFailed,
+    resolve,
+  ]);
 
   return {
     channel: existing,
     isLoading: isLoading || (!existing && isResolving),
+    /** The resolve settled in failure — callers must not wait on it forever. */
+    resolveFailed,
   };
 }

From df475a818505858a7627f4e5677c49fdffc6a61e Mon Sep 17 00:00:00 2001
From: Peter Kirkham <k11kirky@gmail.com>
Date: Thu, 16 Jul 2026 15:15:59 +0100
Subject: [PATCH 5/5] fix(channels): report loading from useBackendChannel for
 the whole resolve window

Move the identity-resolution loading window into useBackendChannel itself:
the hook previously reported isLoading:false in the gap between the channel
list arriving and the resolve effect firing, which callers had to paper over
(WebsiteChannelHome's `!!channelName && !backendChannel && !resolveFailed`
term). The hook now stays loading until a channel resolves or the resolve
fails, so the call-site composition collapses to its three real sources and
the resolveFailed return field is no longer needed.

Adds red-green tests covering the no-flash window, settling (without a hot
retry loop) on a failed resolve, re-resolving a new name after a failure,
and the personal-channel mapping.

Generated-By: PostHog Code
Task-Id: 85ec2ee5-76f5-472c-9687-9958a396e142
---
 .../canvas/components/WebsiteChannelHome.tsx  |  22 +--
 .../canvas/hooks/useTaskChannels.test.tsx     | 133 ++++++++++++++++++
 .../features/canvas/hooks/useTaskChannels.ts  |  10 +-
 3 files changed, 145 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/src/features/canvas/hooks/useTaskChannels.test.tsx

diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
index 4e4969a5d4..25e00f8bc4 100644
--- a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
+++ b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -64,27 +64,17 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
 
   // The folder channel maps onto a backend channel (by name; "me" → the
   // personal channel), which owns the task feed and threads.
-  const {
-    channel: backendChannel,
-    isLoading: isResolvingChannel,
-    resolveFailed,
-  } = useBackendChannel(channelName);
+  const { channel: backendChannel, isLoading: isResolvingChannel } =
+    useBackendChannel(channelName);
   const { tasks, isLoading: isLoadingFeed } = useChannelFeed(
     backendChannel?.id,
   );
   // Until the backend channel resolves there's no feed to ask for, and the feed
   // query is disabled — which reports isLoading:false, indistinguishable from
-  // "this channel is empty". A freshly created channel resolves its backend
-  // channel over the network (a POST), so treating that window as "not loading"
-  // flashes the welcome/suggestions empty state before the feed appears. Fold
-  // the whole identity resolution in: we can't call a channel empty until we
-  // know which channel it is — but stop waiting once the resolve has failed,
-  // or the spinner would never end.
-  const isLoading =
-    isLoadingChannels ||
-    isResolvingChannel ||
-    (!!channelName && !backendChannel && !resolveFailed) ||
-    isLoadingFeed;
+  // "this channel is empty". useBackendChannel reports loading for the whole
+  // identity-resolution window (settling if the resolve fails), so fold it in:
+  // we can't call a channel empty until we know which channel it is.
+  const isLoading = isLoadingChannels || isResolvingChannel || isLoadingFeed;
   // Durable "PostHog agent" rows (CONTEXT.md being built, …) live on the
   // backend channel — the same id the feed tasks use, not the folder id.
   const { messages: feedMessages } = useChannelFeedMessages(backendChannel?.id);
diff --git a/packages/ui/src/features/canvas/hooks/useTaskChannels.test.tsx b/packages/ui/src/features/canvas/hooks/useTaskChannels.test.tsx
new file mode 100644
index 0000000000..1bab30fd03
--- /dev/null
+++ b/packages/ui/src/features/canvas/hooks/useTaskChannels.test.tsx
@@ -0,0 +1,133 @@
+import type { TaskChannel } from "@posthog/shared/domain-types";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockClient = vi.hoisted(() => ({
+  getTaskChannels: vi.fn(),
+  resolveTaskChannel: vi.fn(),
+}));
+vi.mock("@posthog/ui/features/auth/authClient", () => ({
+  useOptionalAuthenticatedClient: () => mockClient,
+}));
+
+import { useBackendChannel } from "./useTaskChannels";
+
+function taskChannel(id: string, name: string): TaskChannel {
+  return {
+    id,
+    name,
+    channel_type: "public",
+    created_at: "2026-01-01T00:00:00Z",
+  };
+}
+
+let queryClient: QueryClient;
+function wrapper({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+describe("useBackendChannel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+  });
+
+  it("stays loading from mount until the resolve lands, without a not-loading flash", async () => {
+    mockClient.getTaskChannels.mockResolvedValue([]);
+    let landResolve: (channel: TaskChannel) => void = () => {};
+    mockClient.resolveTaskChannel.mockReturnValue(
+      new Promise((resolve) => {
+        landResolve = resolve;
+      }),
+    );
+
+    // Record isLoading across every render: the identity of the channel is
+    // unknown until the resolve lands, so no render in between may claim
+    // "not loading" — callers would flash their empty state.
+    const observed: boolean[] = [];
+    const { result } = renderHook(
+      () => {
+        const state = useBackendChannel("mobile");
+        observed.push(state.isLoading);
+        return state;
+      },
+      { wrapper },
+    );
+
+    await waitFor(() =>
+      expect(mockClient.resolveTaskChannel).toHaveBeenCalledWith("mobile"),
+    );
+    expect(observed).not.toContain(false);
+
+    await act(async () => {
+      landResolve(taskChannel("1", "mobile"));
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.channel?.id).toBe("1");
+  });
+
+  it("settles as not-loading after a failed resolve instead of retrying forever", async () => {
+    mockClient.getTaskChannels.mockResolvedValue([]);
+    // Reject asynchronously, like a real network failure — an immediate
+    // rejection collapses the pending→error renders and would mask a retry
+    // loop keyed on the pending flag flipping back.
+    mockClient.resolveTaskChannel.mockImplementation(
+      () =>
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error("backend down")), 1),
+        ),
+    );
+
+    const { result } = renderHook(() => useBackendChannel("mobile"), {
+      wrapper,
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.channel).toBeUndefined();
+
+    // The failing POST must not hot-loop.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+    expect(mockClient.resolveTaskChannel).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("resolves a new name even after a previous name failed", async () => {
+    mockClient.getTaskChannels.mockResolvedValue([]);
+    mockClient.resolveTaskChannel.mockRejectedValueOnce(
+      new Error("backend down"),
+    );
+
+    const { result, rerender } = renderHook(
+      ({ name }: { name: string }) => useBackendChannel(name),
+      { wrapper, initialProps: { name: "mobile" } },
+    );
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.channel).toBeUndefined();
+
+    mockClient.resolveTaskChannel.mockResolvedValue(taskChannel("2", "web"));
+    rerender({ name: "web" });
+
+    await waitFor(() => expect(result.current.channel?.id).toBe("2"));
+    expect(mockClient.resolveTaskChannel).toHaveBeenLastCalledWith("web");
+  });
+
+  it("maps the personal name onto the personal channel without resolving", async () => {
+    const personal: TaskChannel = {
+      ...taskChannel("p1", "me"),
+      channel_type: "personal",
+    };
+    mockClient.getTaskChannels.mockResolvedValue([personal]);
+
+    const { result } = renderHook(() => useBackendChannel("me"), { wrapper });
+
+    await waitFor(() => expect(result.current.channel?.id).toBe("p1"));
+    expect(result.current.isLoading).toBe(false);
+    expect(mockClient.resolveTaskChannel).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/ui/src/features/canvas/hooks/useTaskChannels.ts b/packages/ui/src/features/canvas/hooks/useTaskChannels.ts
index 00e9337f81..cb241f4d7e 100644
--- a/packages/ui/src/features/canvas/hooks/useTaskChannels.ts
+++ b/packages/ui/src/features/canvas/hooks/useTaskChannels.ts
@@ -71,7 +71,6 @@ export function useTaskChannels(options?: { enabled?: boolean }): {
 export function useBackendChannel(channelName: string | undefined): {
   channel: TaskChannel | undefined;
   isLoading: boolean;
-  resolveFailed: boolean;
 } {
   const normalized = channelName ? normalizeChannelName(channelName) : "";
   const isPersonal = normalized === PERSONAL_CHANNEL_NAME;
@@ -133,8 +132,11 @@ export function useBackendChannel(channelName: string | undefined): {
 
   return {
     channel: existing,
-    isLoading: isLoading || (!existing && isResolving),
-    /** The resolve settled in failure — callers must not wait on it forever. */
-    resolveFailed,
+    // Loading spans the whole identity resolution — the list fetch, the gap
+    // before the resolve effect fires, and the resolve itself — so callers
+    // never see a "not loading, no channel" flash for a name that is still
+    // resolving. A failed resolve settles it.
+    isLoading:
+      isLoading || (!!normalized && !isPersonal && !existing && !resolveFailed),
   };
 }