fix(channels): address review — hydration race, double-submit, seen depth

Seven findings from a review of this stack.

- The seen store's storage is async (IPC), so both sides raced hydration.
  Reads: an empty map is indistinguishable from "nothing ever read", so
  every channel with activity bolded for the first frames of each boot.
  Writes: a channel opened during boot stamped itself seen, then zustand's
  default merge replaced that stamp with what was on disk and lost it —
  the channel you just read stayed bold. Gate reads on `hasHydrated` and
  merge the two maps (later visit per channel wins) instead of replacing.

- CreateChannelModal relied on `disabled={busy}`, which only lands a render
  after the mutation starts, so a double-click (or a held ⌘Enter) fired two
  creates — and folder creation isn't idempotent by path, so that's two
  channels of the same name. Latch synchronously.

- ensurePersonalChannel's in-flight guard settled when the POST returned,
  but callers pass the `channels` from their last render — a click in that
  gap saw no existing "me" and no in-flight create, and made a second.
  Remember what was created until the list catches up.

- Marking a channel read only happened on its feed, so reading it via
  Artifacts/Recents/CONTEXT.md left it bold. Moved into ChannelHeader,
  which every channel surface renders — a new surface now gets it free.

- ChannelGroup's onOpenChange ignored the value Base UI emits and blind
  toggled, so a redundant event would invert the section.

- Unread was resolved two ways (by name for shared rows, by id for #me).
  One predicate now mirrors useBackendChannel's mapping for both.

- latestActivityForChannel built a map of every channel to read one key.

Covered by 10 new tests: the store's hydration merge (the clobber case
fails without the fix) and ensurePersonalChannel's races.

Not addressed, deliberately: the seen store stays in @posthog/ui rather
than moving to core per the layering rule. Every persisted store in the
app lives in ui because persistence goes through electronStorage, a
ui/shell adapter; core has no persisted store to follow, and its sibling
(activitySeenStore, the same concept for the Activity page) sits in ui.
Moving it needs a platform storage interface — worth doing, but as its own
change rather than smuggled into this one.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019G63f4afY9vsbKsvK654Wj

Author: adamleithp

packages/core/src/canvas/channelUnread.ts

@@ -47,11 +47,20 @@ export function unreadChannelIds(
   return unread;
 }
 
-/** The newest activity in one channel, for stamping it seen while it's open. */
+/**
+ * The newest activity in one channel, for stamping it seen while it's open.
+ * Scans for the one channel rather than reusing `latestActivityByChannel`,
+ * which would build (and throw away) a map of every other channel to answer.
+ */
 export function latestActivityForChannel(
   items: readonly MentionActivityItem[],
   channelId: string | undefined,
 ): string | undefined {
   if (!channelId) return undefined;
-  return latestActivityByChannel(items).get(channelId);
+  let latest: string | undefined;
+  for (const item of items) {
+    if (item.channelId !== channelId) continue;
+    if (!latest || item.createdAt > latest) latest = item.createdAt;
+  }
+  return latest;
 }

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

@@ -2,6 +2,7 @@ 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 { useMarkChannelSeen } from "@posthog/ui/features/canvas/hooks/useMarkChannelSeen";
 import { Text } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 
@@ -17,6 +18,9 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
   const channelName = channels.find((c) => c.id === channelId)?.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.
+  useMarkChannelSeen(channelName);
 
   return (
     <div className="flex min-w-0 items-center gap-2">

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

@@ -57,25 +57,17 @@ import {
 } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useCreateAndOpenDashboard } from "@posthog/ui/features/canvas/hooks/useDashboards";
 import {
-  normalizeChannelName,
   PERSONAL_CHANNEL_NAME,
   useTaskChannels,
 } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
-import { useUnreadChannelIds } from "@posthog/ui/features/canvas/hooks/useUnreadChannels";
+import { useIsChannelUnread } from "@posthog/ui/features/canvas/hooks/useUnreadChannels";
 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 } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import {
-  Fragment,
-  type ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Fragment, type ReactNode, useEffect, useRef, useState } from "react";
 import { hostClient } from "../hostClient";
 
 // One actionable entry in a channel's menu, rendered the same whether it
@@ -527,12 +519,10 @@ function PersonalChannelRow() {
   const { channels } = useChannels();
   const { createChannel, isCreating } = useChannelMutations();
   // Listing backend channels lazily provisions the personal channel server-side.
-  const { personalChannel } = useTaskChannels();
+  useTaskChannels();
   // The "+" dropdown (New task / New canvas), mirroring a shared channel row.
   const [newMenuOpen, setNewMenuOpen] = useState(false);
-  const unreadChannelIds = useUnreadChannelIds();
-  const isUnread =
-    !!personalChannel && unreadChannelIds.has(personalChannel.id);
+  const isUnread = useIsChannelUnread()(PERSONAL_CHANNEL_NAME);
 
   const meFolder = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
   const createAndOpenCanvas = useCreateAndOpenDashboard(meFolder?.id);
@@ -707,7 +697,12 @@ function ChannelGroup({
   return (
     <Collapsible.Root
       open={isOpen}
-      onOpenChange={() => toggleSection(sectionId)}
+      // The store only exposes a toggle, so drive it from the requested value:
+      // an event for the state we're already in is then a no-op rather than an
+      // inversion.
+      onOpenChange={(open) => {
+        if (open !== isOpen) toggleSection(sectionId);
+      }}
       className={className}
     >
       {/* MenuLabel carries the sidebar's label styling; `render` keeps it a
@@ -755,20 +750,7 @@ export function ChannelsList() {
   const { channels: allChannels, isLoading } = useChannels();
   const { starredRefToShortcutId } = useChannelStars();
 
-  // Unread activity is keyed by backend channel id, while these rows are folder
-  // channels — joined by name, the same bridge useBackendChannel walks. Resolved
-  // once here rather than per row, so the list mounts one lookup, not 46.
-  const { channels: backendChannels } = useTaskChannels();
-  const unreadChannelIds = useUnreadChannelIds();
-  const unreadNames = useMemo(() => {
-    const names = new Set<string>();
-    for (const channel of backendChannels) {
-      if (unreadChannelIds.has(channel.id)) names.add(channel.name);
-    }
-    return names;
-  }, [backendChannels, unreadChannelIds]);
-  const isUnread = (channel: Channel) =>
-    unreadNames.has(normalizeChannelName(channel.name));
+  const isUnread = useIsChannelUnread();
 
   // The "me" folder renders as the pinned personal row, not a shared channel.
   const channels = allChannels.filter((c) => c.name !== PERSONAL_CHANNEL_NAME);
@@ -803,7 +785,7 @@ export function ChannelsList() {
               <ChannelSection
                 key={channel.id}
                 channel={channel}
-                isUnread={isUnread(channel)}
+                isUnread={isUnread(channel.name)}
               />
             ))}
           </ChannelGroup>
@@ -819,7 +801,7 @@ export function ChannelsList() {
             <ChannelSection
               key={channel.id}
               channel={channel}
-              isUnread={isUnread(channel)}
+              isUnread={isUnread(channel.name)}
             />
           ))}
         </ChannelGroup>

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

@@ -20,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 { type CSSProperties, useState } from "react";
+import { type CSSProperties, useRef, useState } from "react";
 
 // Matches Slack's "Create a channel" naming constraint.
 const MAX_CONTEXT_NAME_LENGTH = 80;
@@ -84,6 +84,21 @@ export function CreateChannelModal({
   // way through without one.
   const canDescribe = !busy && !!trimmedDescription;
 
+  // `busy` only disables the buttons a render after the mutation starts, so a
+  // double-click lands two creates before it applies — and folder creation is
+  // not idempotent by path, so that is two channels of the same name. Latch
+  // synchronously; the buttons stay the user-visible half of this.
+  const submittingRef = useRef(false);
+  const submitOnce = async (submit: () => Promise<void>) => {
+    if (submittingRef.current) return;
+    submittingRef.current = true;
+    try {
+      await submit();
+    } finally {
+      submittingRef.current = false;
+    }
+  };
+
   // 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.
@@ -186,10 +201,11 @@ export function CreateChannelModal({
         disabled={busy}
         onChange={(e) => setDescription(e.target.value)}
         onKeyDown={(e) => {
-          // ⌘/Ctrl+Enter submits; a bare Enter stays a newline.
+          // ⌘/Ctrl+Enter submits; a bare Enter stays a newline. Held down it
+          // repeats, so it goes through the same latch as the buttons.
           if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
             e.preventDefault();
-            void submitDescribeStep();
+            void submitOnce(submitDescribeStep);
           }
         }}
       />
@@ -225,7 +241,7 @@ export function CreateChannelModal({
               variant="primary"
               disabled={!canDescribe}
               loading={busy}
-              onClick={submitDescribeStep}
+              onClick={() => void submitOnce(submitDescribeStep)}
             >
               Create
             </Button>
@@ -335,15 +351,15 @@ export function CreateChannelModal({
               <Button
                 variant="default"
                 disabled={busy}
-                onClick={() => void submitCreate(false)}
+                onClick={() => void submitOnce(() => submitCreate(false))}
               >
                 Skip
               </Button>
               <Button
                 variant="primary"
                 disabled={!canDescribe}
                 loading={busy}
-                onClick={submitDescribeStep}
+                onClick={() => void submitOnce(submitDescribeStep)}
               >
                 Create
               </Button>

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

@@ -1,4 +1,3 @@
-import { latestActivityForChannel } from "@posthog/core/canvas/channelUnread";
 import { insertTaskDedup } from "@posthog/core/tasks/taskDelete";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
@@ -31,12 +30,10 @@ import {
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useChannelTaskMutations } from "@posthog/ui/features/canvas/hooks/useChannelTasks";
 import { useFolderInstructions } from "@posthog/ui/features/canvas/hooks/useFolderInstructions";
-import { useMentionActivity } from "@posthog/ui/features/canvas/hooks/useMentionActivity";
 import {
   PERSONAL_CHANNEL_NAME,
   useBackendChannel,
 } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
-import { useChannelSeenStore } from "@posthog/ui/features/canvas/stores/channelSeenStore";
 import { useThreadPanelStore } from "@posthog/ui/features/canvas/stores/threadPanelStore";
 import { SuggestedPromptCard } from "@posthog/ui/features/task-detail/components/SuggestedPromptCard";
 import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
@@ -78,19 +75,8 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
   // 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;
-  // Viewing a channel reads it: stamp it seen so the sidebar drops its bold.
-  // Keyed on the newest activity rather than "now", so a mention landing while
-  // the channel is open re-stamps it (and so remounts don't churn the store).
-  const { items: mentionItems } = useMentionActivity();
-  const latestActivityAt = useMemo(
-    () => latestActivityForChannel(mentionItems, backendChannel?.id),
-    [mentionItems, backendChannel?.id],
-  );
-  const markChannelSeen = useChannelSeenStore((s) => s.markChannelSeen);
-  useEffect(() => {
-    if (!backendChannel?.id || !latestActivityAt) return;
-    markChannelSeen(backendChannel.id, latestActivityAt);
-  }, [backendChannel?.id, latestActivityAt, markChannelSeen]);
+  // Marking this channel read lives in ChannelHeader (rendered by every channel
+  // surface), so opening Artifacts or CONTEXT.md counts as reading it too.
 
   // Durable "PostHog agent" rows (CONTEXT.md being built, …) live on the
   // backend channel — the same id the feed tasks use, not the folder id.

packages/ui/src/features/canvas/ensurePersonalChannel.test.ts

@@ -0,0 +1,79 @@
+import type { Channel } from "@posthog/ui/features/canvas/hooks/useChannels";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ensurePersonalChannel } from "./ensurePersonalChannel";
+
+function channel(id: string, name = "me"): Channel {
+  return { id, name, path: `/${name}`, type: "folder" } as Channel;
+}
+
+// The module memoises the created folder, so each test needs a fresh copy.
+beforeEach(() => {
+  vi.resetModules();
+});
+
+it("returns the existing folder without creating", async () => {
+  const create = vi.fn();
+  const existing = channel("1");
+  await expect(ensurePersonalChannel([existing], create)).resolves.toBe(
+    existing,
+  );
+  expect(create).not.toHaveBeenCalled();
+});
+
+it("shares one create between callers racing before it settles", async () => {
+  const { ensurePersonalChannel: ensure } = await import(
+    "./ensurePersonalChannel"
+  );
+  const create = vi.fn(
+    () => new Promise<Channel>((r) => setTimeout(() => r(channel("1")), 5)),
+  );
+
+  const [a, b] = await Promise.all([ensure([], create), ensure([], create)]);
+
+  expect(create).toHaveBeenCalledTimes(1);
+  expect(a).toBe(b);
+});
+
+it("doesn't create a second folder for a caller still holding the pre-create list", async () => {
+  const { ensurePersonalChannel: ensure } = await import(
+    "./ensurePersonalChannel"
+  );
+  const create = vi.fn(async () => channel("1"));
+
+  // First caller creates it. The cache is seeded, but a component that hasn't
+  // re-rendered yet still passes the empty list it captured last render.
+  await ensure([], create);
+  const second = await ensure([], create);
+
+  expect(create).toHaveBeenCalledTimes(1);
+  expect(second.id).toBe("1");
+});
+
+it("prefers the list once it carries the folder, so a recreated me isn't stale", async () => {
+  const { ensurePersonalChannel: ensure } = await import(
+    "./ensurePersonalChannel"
+  );
+  const create = vi.fn(async () => channel("1"));
+  await ensure([], create);
+
+  // "me" was deleted and remade elsewhere; the list is authoritative.
+  const fresh = channel("2");
+  await expect(ensure([fresh], create)).resolves.toBe(fresh);
+  // …and the stale memo is dropped rather than resurfacing afterwards.
+  await expect(ensure([fresh], create)).resolves.toBe(fresh);
+  expect(create).toHaveBeenCalledTimes(1);
+});
+
+it("lets a later caller retry after a failed create", async () => {
+  const { ensurePersonalChannel: ensure } = await import(
+    "./ensurePersonalChannel"
+  );
+  const create = vi
+    .fn<() => Promise<Channel>>()
+    .mockRejectedValueOnce(new Error("offline"))
+    .mockResolvedValueOnce(channel("1"));
+
+  await expect(ensure([], create)).rejects.toThrow("offline");
+  await expect(ensure([], create)).resolves.toEqual(channel("1"));
+  expect(create).toHaveBeenCalledTimes(2);
+});

packages/ui/src/features/canvas/ensurePersonalChannel.ts

@@ -8,6 +8,12 @@ import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTask
 // 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 in-flight promise alone isn't enough: it settles the moment the POST
+// returns, but callers pass the `channels` from their last render, which hasn't
+// re-rendered with the seeded cache yet. A click landing in that gap sees
+// neither an existing "me" nor an in-flight create, and makes a second one.
+// Remember what was created until the list catches up.
+let created: Channel | null = null;
 
 /**
  * The user's "me" folder, creating it once if it doesn't exist yet. Concurrent
@@ -19,11 +25,22 @@ export async function ensurePersonalChannel(
   createChannel: (name: string) => Promise<Channel>,
 ): Promise<Channel> {
   const existing = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
-  if (existing) return existing;
+  if (existing) {
+    // The list is authoritative once it carries the folder: drop the memo, so a
+    // deleted-then-recreated "me" resolves fresh rather than to a dead id.
+    created = null;
+    return existing;
+  }
+  if (created) return created;
   if (!inFlight) {
-    inFlight = createChannel(PERSONAL_CHANNEL_NAME).finally(() => {
-      inFlight = null;
-    });
+    inFlight = createChannel(PERSONAL_CHANNEL_NAME)
+      .then((channel) => {
+        created = channel;
+        return channel;
+      })
+      .finally(() => {
+        inFlight = null;
+      });
   }
   return inFlight;
 }