feat(channels): bold a channel name when it has unseen activity

Sidebar channel names (and #me) go bold when there's activity the viewer
hasn't seen, and clear when they open that channel.

"Activity" is an @-mention for now: that's the only cross-channel,
all-users feed the client has, and it's what "notification" already means
here (it drives the Activity badge). The backend exposes no per-channel
activity timestamp, so a broader "any new message" signal would mean
mounting the all-users full-task poll — ~2.2MB/30s, documented in
useTasks.ts as the app's heaviest and deliberately retired. If that
timestamp lands, only latestActivityByChannel changes shape; the bolding,
the name join and the seen store stay as they are.

Seen state is per channel (unlike the Activity page's single lastSeenAt),
keyed by backend channel id so a rename doesn't mark a channel unread
again, and it never walks a timestamp backwards. The sidebar's rows are
folder channels while activity is keyed by backend id, so they're joined
by name — the same bridge useBackendChannel walks — resolved once per list
rather than per row. Unread reads through the existing mentions query
cache, so the sidebar adds no fetch.

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.test.ts

@@ -0,0 +1,101 @@
+import {
+  latestActivityForChannel,
+  unreadChannelIds,
+} from "@posthog/core/canvas/channelUnread";
+import type { MentionActivityItem } from "@posthog/core/canvas/mentionActivity";
+import { describe, expect, it } from "vitest";
+
+function mention(
+  overrides: Partial<MentionActivityItem> & { createdAt: string },
+): MentionActivityItem {
+  return {
+    messageId: `m-${overrides.createdAt}`,
+    taskId: "t1",
+    taskTitle: "Task",
+    channelId: "c1",
+    channelName: "mobile",
+    author: null,
+    content: "hey @adam",
+    ...overrides,
+  };
+}
+
+describe("unreadChannelIds", () => {
+  const cases: {
+    name: string;
+    lastSeen: Record<string, string>;
+    expected: string[];
+  }[] = [
+    {
+      name: "a channel never seen is unread",
+      lastSeen: {},
+      expected: ["c1"],
+    },
+    {
+      name: "activity newer than the last visit is unread",
+      lastSeen: { c1: "2026-07-16T09:00:00.000Z" },
+      expected: ["c1"],
+    },
+    {
+      name: "activity older than the last visit is read",
+      lastSeen: { c1: "2026-07-16T11:00:00.000Z" },
+      expected: [],
+    },
+    {
+      name: "activity exactly at the last visit is read",
+      lastSeen: { c1: "2026-07-16T10:00:00.000Z" },
+      expected: [],
+    },
+  ];
+  it.each(cases)("$name", ({ lastSeen, expected }) => {
+    const items = [mention({ createdAt: "2026-07-16T10:00:00.000Z" })];
+    expect([...unreadChannelIds(items, lastSeen)]).toEqual(expected);
+  });
+
+  it("compares each channel against its own last visit", () => {
+    const items = [
+      mention({ channelId: "c1", createdAt: "2026-07-16T10:00:00.000Z" }),
+      mention({ channelId: "c2", createdAt: "2026-07-16T10:00:00.000Z" }),
+    ];
+    const unread = unreadChannelIds(items, {
+      c1: "2026-07-16T11:00:00.000Z",
+      c2: "2026-07-16T09:00:00.000Z",
+    });
+    expect([...unread]).toEqual(["c2"]);
+  });
+
+  it("uses the newest item in a channel, whatever the order", () => {
+    const items = [
+      mention({ messageId: "old", createdAt: "2026-07-16T08:00:00.000Z" }),
+      mention({ messageId: "new", createdAt: "2026-07-16T12:00:00.000Z" }),
+    ];
+    expect([
+      ...unreadChannelIds(items, { c1: "2026-07-16T10:00:00.000Z" }),
+    ]).toEqual(["c1"]);
+  });
+
+  it("ignores channel-less mentions", () => {
+    const items = [
+      mention({ channelId: null, createdAt: "2026-07-16T10:00Z" }),
+    ];
+    expect([...unreadChannelIds(items, {})]).toEqual([]);
+  });
+});
+
+describe("latestActivityForChannel", () => {
+  it("returns the newest timestamp for that channel only", () => {
+    const items = [
+      mention({ channelId: "c1", createdAt: "2026-07-16T08:00:00.000Z" }),
+      mention({ channelId: "c1", createdAt: "2026-07-16T12:00:00.000Z" }),
+      mention({ channelId: "c2", createdAt: "2026-07-16T13:00:00.000Z" }),
+    ];
+    expect(latestActivityForChannel(items, "c1")).toBe(
+      "2026-07-16T12:00:00.000Z",
+    );
+  });
+
+  it("is undefined for a channel with no activity, or no channel", () => {
+    expect(latestActivityForChannel([], "c1")).toBeUndefined();
+    expect(latestActivityForChannel([], undefined)).toBeUndefined();
+  });
+});

packages/core/src/canvas/channelUnread.ts

@@ -0,0 +1,57 @@
+import type { MentionActivityItem } from "@posthog/core/canvas/mentionActivity";
+
+/**
+ * Which channels have activity the viewer hasn't seen — the signal behind the
+ * sidebar's bold channel names.
+ *
+ * "Activity" is currently an @-mention: that's the only cross-channel,
+ * all-users feed the client has (the mentions index), and it's what
+ * "notification" means elsewhere in the app. The backend exposes no per-channel
+ * activity timestamp, so a broader "any new message" signal would mean polling
+ * every user's full task list — the app's heaviest poll, deliberately retired.
+ * If that timestamp lands, only `latestActivityByChannel` changes shape; the
+ * unread comparison and the seen bookkeeping stay as they are.
+ *
+ * Keyed by backend channel id rather than name, so renaming a channel doesn't
+ * silently mark it unread again.
+ */
+
+/** Newest activity per channel id. Ignores items with no channel. */
+export function latestActivityByChannel(
+  items: readonly MentionActivityItem[],
+): Map<string, string> {
+  const latest = new Map<string, string>();
+  for (const item of items) {
+    if (!item.channelId) continue;
+    const current = latest.get(item.channelId);
+    if (!current || item.createdAt > current) {
+      latest.set(item.channelId, item.createdAt);
+    }
+  }
+  return latest;
+}
+
+/**
+ * Channel ids whose newest activity postdates the viewer's last visit. A
+ * channel never visited is unread as soon as it has any activity.
+ */
+export function unreadChannelIds(
+  items: readonly MentionActivityItem[],
+  lastSeenByChannel: Readonly<Record<string, string>>,
+): Set<string> {
+  const unread = new Set<string>();
+  for (const [channelId, activityAt] of latestActivityByChannel(items)) {
+    const seenAt = lastSeenByChannel[channelId];
+    if (!seenAt || activityAt > seenAt) unread.add(channelId);
+  }
+  return unread;
+}
+
+/** The newest activity in one channel, for stamping it seen while it's open. */
+export function latestActivityForChannel(
+  items: readonly MentionActivityItem[],
+  channelId: string | undefined,
+): string | undefined {
+  if (!channelId) return undefined;
+  return latestActivityByChannel(items).get(channelId);
+}

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

@@ -56,16 +56,25 @@ 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 { 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, useRef, useState } from "react";
+import {
+  Fragment,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { hostClient } from "../hostClient";
 
 // One actionable entry in a channel's menu, rendered the same whether it
@@ -290,7 +299,14 @@ function ChannelMenu({
 
 // One channel in the list: a "# name" row that navigates to the channel home.
 // No expansion — the channel's surfaces live in the in-channel top nav.
-function ChannelSection({ channel }: { channel: Channel }) {
+function ChannelSection({
+  channel,
+  isUnread,
+}: {
+  channel: Channel;
+  /** Bolds the name: activity here the viewer hasn't seen. */
+  isUnread?: boolean;
+}) {
   const navigate = useNavigate();
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const base = `/website/${channel.id}`;
@@ -342,7 +358,8 @@ function ChannelSection({ channel }: { channel: Channel }) {
               <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",
+                  "truncate text-[13px] text-gray-12 group-hover/chan:pr-8",
+                  isUnread ? "font-bold" : "font-medium",
                   menuOpen && "pr-8",
                 )}
               >
@@ -494,9 +511,12 @@ function PersonalChannelRow() {
   const { channels } = useChannels();
   const { createChannel, isCreating } = useChannelMutations();
   // Listing backend channels lazily provisions the personal channel server-side.
-  useTaskChannels();
+  const { personalChannel } = 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 meFolder = channels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
   const createAndOpenCanvas = useCreateAndOpenDashboard(meFolder?.id);
@@ -558,7 +578,12 @@ function PersonalChannelRow() {
         className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
       >
         <HashIcon size={14} className="shrink-0 text-gray-9" />
-        <span className="truncate font-medium text-[13px] text-gray-12">
+        <span
+          className={cn(
+            "truncate text-[13px] text-gray-12",
+            isUnread ? "font-bold" : "font-medium",
+          )}
+        >
           {PERSONAL_CHANNEL_NAME}
         </span>
         {/* The lock and the hover "+" share the right edge, so fade the lock
@@ -700,6 +725,21 @@ 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));
+
   // The "me" folder renders as the pinned personal row, not a shared channel.
   const channels = allChannels.filter((c) => c.name !== PERSONAL_CHANNEL_NAME);
   const starred = channels.filter((c) => starredRefToShortcutId.has(c.path));
@@ -730,7 +770,11 @@ export function ChannelsList() {
         {starred.length > 0 && (
           <ChannelGroup sectionId={STARRED_SECTION_ID} label="Starred">
             {starred.map((channel) => (
-              <ChannelSection key={channel.id} channel={channel} />
+              <ChannelSection
+                key={channel.id}
+                channel={channel}
+                isUnread={isUnread(channel)}
+              />
             ))}
           </ChannelGroup>
         )}
@@ -744,7 +788,11 @@ export function ChannelsList() {
             </Empty>
           )}
           {others.map((channel) => (
-            <ChannelSection key={channel.id} channel={channel} />
+            <ChannelSection
+              key={channel.id}
+              channel={channel}
+              isUnread={isUnread(channel)}
+            />
           ))}
         </ChannelGroup>
       </Flex>

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

@@ -1,3 +1,4 @@
+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";
@@ -30,10 +31,12 @@ 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";
@@ -81,6 +84,20 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
     isResolvingChannel ||
     (!!channelName && !backendChannel) ||
     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]);
+
   // 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);

packages/ui/src/features/canvas/hooks/useUnreadChannels.ts

@@ -0,0 +1,18 @@
+import { unreadChannelIds } from "@posthog/core/canvas/channelUnread";
+import { useMentionActivity } from "@posthog/ui/features/canvas/hooks/useMentionActivity";
+import { useChannelSeenStore } from "@posthog/ui/features/canvas/stores/channelSeenStore";
+import { useMemo } from "react";
+
+/**
+ * Backend channel ids with activity the viewer hasn't seen. Shares the mentions
+ * query with the Activity badge through the react-query cache, so mounting this
+ * in the sidebar costs no extra fetch.
+ */
+export function useUnreadChannelIds(): Set<string> {
+  const { items } = useMentionActivity();
+  const lastSeenByChannel = useChannelSeenStore((s) => s.lastSeenByChannel);
+  return useMemo(
+    () => unreadChannelIds(items, lastSeenByChannel),
+    [items, lastSeenByChannel],
+  );
+}

packages/ui/src/features/canvas/stores/channelSeenStore.ts

@@ -0,0 +1,35 @@
+import { electronStorage } from "@posthog/ui/shell/rendererStorage";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+// When the viewer last had each channel open, keyed by backend channel id.
+// Activity newer than this bolds the channel in the sidebar; opening the
+// channel clears it. Per-channel (unlike the Activity page's single
+// `lastSeenAt`) so reading one channel doesn't mark every other one read.
+interface ChannelSeenState {
+  lastSeenByChannel: Record<string, string>;
+  markChannelSeen: (channelId: string, at: string) => void;
+}
+
+export const useChannelSeenStore = create<ChannelSeenState>()(
+  persist(
+    (set) => ({
+      lastSeenByChannel: {},
+      markChannelSeen: (channelId, at) =>
+        set((state) => {
+          // Never walk the timestamp backwards: a channel visited after its
+          // newest activity is read, and re-stamping it with an older mention
+          // would bold it again.
+          const current = state.lastSeenByChannel[channelId];
+          if (current && current >= at) return state;
+          return {
+            lastSeenByChannel: { ...state.lastSeenByChannel, [channelId]: at },
+          };
+        }),
+    }),
+    {
+      name: "channels-seen",
+      storage: electronStorage,
+    },
+  ),
+);