feat(canvas): context onboarding with a slack-style channel intro (#3370)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Peter Kirkham <k11kirky@gmail.com>

Author: 3 people

packages/api-client/src/posthog-client.ts

@@ -52,6 +52,8 @@ import type {
   ActionabilityJudgmentArtefact,
   AvailableSuggestedReviewer,
   AvailableSuggestedReviewersResponse,
+  ChannelFeedMessage,
+  ChannelFeedMessageEvent,
   CodeReferenceArtefact,
   CommitArtefact,
   CommitDiffResponse,
@@ -2525,6 +2527,56 @@ export class PostHogAPIClient {
     return (await response.json()) as TaskChannel;
   }
 
+  // A channel's system-announcement feed (context created, CONTEXT.md being
+  // built), chronological. Durable + team-visible, rendered alongside task cards.
+  async getChannelFeed(channelId: string): Promise<ChannelFeedMessage[]> {
+    const teamId = await this.getTeamId();
+    const urlPath = `/api/projects/${teamId}/task_channels/${channelId}/feed/`;
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url: new URL(`${this.api.baseUrl}${urlPath}`),
+      path: urlPath,
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch channel feed: ${response.statusText}`);
+    }
+    return (await response.json()) as ChannelFeedMessage[];
+  }
+
+  // Post a system announcement into a channel's feed. The row is authored by the
+  // system; the server records the requester as `author` for "Adam …" rendering.
+  async postChannelFeedMessage(
+    channelId: string,
+    input: {
+      event: ChannelFeedMessageEvent;
+      payload?: Record<string, unknown>;
+      // Optional explicit timestamp (ISO) so a burst of announcements orders
+      // deterministically instead of racing on server insert time.
+      createdAt?: string;
+    },
+  ): Promise<ChannelFeedMessage> {
+    const teamId = await this.getTeamId();
+    const urlPath = `/api/projects/${teamId}/task_channels/${channelId}/feed/`;
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url: new URL(`${this.api.baseUrl}${urlPath}`),
+      path: urlPath,
+      overrides: {
+        body: JSON.stringify({
+          event: input.event,
+          payload: input.payload ?? {},
+          ...(input.createdAt ? { created_at: input.createdAt } : {}),
+        }),
+      },
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to post channel feed message: ${response.statusText}`,
+      );
+    }
+    return (await response.json()) as ChannelFeedMessage;
+  }
+
   // Mentions of the current user across task threads, newest first.
   async getTaskMentions(options?: { since?: string }): Promise<TaskMention[]> {
     const teamId = await this.getTeamId();

packages/shared/src/domain-types.ts

@@ -79,6 +79,27 @@ export interface TaskChannel {
   created_by?: UserBasic | null;
 }
 
+/** Lifecycle events a client may post into a channel's feed. */
+export type ChannelFeedMessageEvent = "context_md_building";
+
+/**
+ * A durable, team-visible "PostHog agent" announcement in a channel's feed —
+ * rendered alongside task cards (e.g. "Adam created this context"). `author` is
+ * the user whose action produced the row; `author_kind` says who authored it.
+ * `payload` carries structured event data (e.g. `{ context_name }`) so rendering
+ * survives renames.
+ */
+export interface ChannelFeedMessage {
+  id: string;
+  channel: string;
+  author?: UserBasic | null;
+  author_kind: "human" | "system" | "agent";
+  event: ChannelFeedMessageEvent | string;
+  payload: Record<string, unknown>;
+  content: string;
+  created_at: string;
+}
+
 /**
  * One human message in a task's thread. Thread messages never reach the agent
  * unless the task author forwards one, which stamps the forwarded_* fields.

packages/shared/src/index.ts

@@ -241,6 +241,7 @@ export type {
 export {
   formatRelativeTimeLong,
   formatRelativeTimeShort,
+  getLocalDayDiff,
   getRelativeDateGroup,
 } from "./time";
 export {

packages/shared/src/time.test.ts

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   formatRelativeTimeLong,
   formatRelativeTimeShort,
+  getLocalDayDiff,
   getRelativeDateGroup,
 } from "./time";
 
@@ -67,6 +68,29 @@ describe("formatRelativeTimeLong", () => {
   });
 });
 
+describe("getLocalDayDiff", () => {
+  it("returns 0 for any moment on the same local day", () => {
+    expect(getLocalDayDiff(NOW - 2 * HOUR)).toBe(0);
+  });
+
+  it("counts calendar days, not 24h windows", () => {
+    // 1h ago but across the local midnight boundary is still "yesterday".
+    const justAfterMidnight = new Date(NOW);
+    justAfterMidnight.setHours(0, 30, 0, 0);
+    vi.setSystemTime(justAfterMidnight);
+    expect(getLocalDayDiff(justAfterMidnight.getTime() - HOUR)).toBe(1);
+  });
+
+  it("accepts an ISO string and an explicit now", () => {
+    const now = new Date(NOW);
+    expect(getLocalDayDiff(new Date(NOW - 3 * DAY).toISOString(), now)).toBe(3);
+  });
+
+  it("returns negative for future days", () => {
+    expect(getLocalDayDiff(NOW + 2 * DAY)).toBe(-2);
+  });
+});
+
 describe("getRelativeDateGroup", () => {
   it("returns null for today", () => {
     expect(getRelativeDateGroup(NOW - 2 * HOUR)).toBeNull();

packages/shared/src/time.ts

@@ -51,17 +51,25 @@ export function formatRelativeTimeLong(timestamp: number | string): string {
   });
 }
 
+/**
+ * Whole local calendar days between `timestamp` and `now` (0 = today,
+ * 1 = yesterday, negative = future). Uses local-midnight boundaries so the
+ * split lands on the viewer's midnight, not a UTC one.
+ */
+export function getLocalDayDiff(
+  timestamp: number | string | Date,
+  now: Date = new Date(),
+): number {
+  const date = new Date(timestamp);
+  const startOfDay = (d: Date) =>
+    new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  return Math.round((startOfDay(now) - startOfDay(date)) / 86_400_000);
+}
+
 export function getRelativeDateGroup(
   timestamp: number | string,
 ): string | null {
-  const date = new Date(timestamp);
-  const startOfToday = new Date();
-  startOfToday.setHours(0, 0, 0, 0);
-  const startOfDate = new Date(date);
-  startOfDate.setHours(0, 0, 0, 0);
-  const days = Math.round(
-    (startOfToday.getTime() - startOfDate.getTime()) / 86_400_000,
-  );
+  const days = getLocalDayDiff(timestamp);
   if (days <= 0) return null;
   if (days === 1) return "Yesterday";
   if (days < 7) return "This week";

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

@@ -34,12 +34,13 @@ import {
   ThreadItemRepliesMeta,
   ThreadItemTimestamp,
 } from "@posthog/quill";
-import { formatRelativeTimeShort } from "@posthog/shared";
+import { formatRelativeTimeShort, getLocalDayDiff } from "@posthog/shared";
 import type { Task, TaskRunStatus } from "@posthog/shared/domain-types";
 import { isTerminalStatus } from "@posthog/shared/domain-types";
 import { getUserInitials } from "@posthog/ui/features/auth/userInitials";
 import { TaskTabIcon } from "@posthog/ui/features/browser-tabs/TaskTabIcon";
 import { mentionChipClass } from "@posthog/ui/features/canvas/components/MentionText";
+import type { ChannelFeedSystemMessage } from "@posthog/ui/features/canvas/hooks/useChannelFeedMessages";
 import { useChannelTaskData } from "@posthog/ui/features/canvas/hooks/useChannelTaskData";
 import { useTaskThread } from "@posthog/ui/features/canvas/hooks/useTaskThread";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
@@ -116,9 +117,7 @@ function ordinal(n: number): string {
 // year when it differs) further back so older separators stay unambiguous.
 function dayLabel(iso: string, now: Date): string {
   const date = new Date(iso);
-  const startOfDay = (d: Date) =>
-    new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-  const days = Math.round((startOfDay(now) - startOfDay(date)) / 86_400_000);
+  const days = getLocalDayDiff(date, now);
   if (days <= 0) return "Today";
   if (days === 1) return "Yesterday";
   const weekday = date.toLocaleDateString(undefined, { weekday: "long" });
@@ -265,9 +264,9 @@ function TaskCard({ task, onOpen }: { task: Task; onOpen: () => void }) {
                 nav never disagree (generating spinner, needs-permission, cloud
                 status colors, PR state). */}
             <TaskTabIcon task={task} size={14} />
-            <Text size="2" weight="medium" className="line-clamp-2">
+            <span className="line-clamp-2 font-medium text-sm">
               {task.title || "Untitled task"}
-            </Text>
+            </span>
           </div>
           <TaskStatusBadge display={statusDisplay} />
         </div>
@@ -379,7 +378,7 @@ const FeedItem = memo(function FeedItem({
   onOpenThread: (task: Task) => void;
 }) {
   return (
-    <ThreadItem className="rounded-none py-4 pr-8 hover:bg-fill-hover/50">
+    <ThreadItem className="rounded-none py-1 pr-8 hover:bg-fill-hover/50">
       <ThreadItemGutter>
         <Avatar>
           <AvatarFallback>
@@ -472,31 +471,116 @@ function FeedRow({
   );
 }
 
+// A card-less feed row for a synthetic announcement. Rows with an `author`
+// render as that user (initials avatar + name — e.g. "Adam L · joined mobile");
+// the rest render as "PostHog / Agent" (context lifecycle updates). Same chrome
+// as a task row, minus the task card and reply footer.
+function SystemFeedRow({ message }: { message: ChannelFeedSystemMessage }) {
+  return (
+    <ChatMessageScrollerItem messageId={message.id}>
+      <ThreadItem className="rounded-none py-1 pr-8">
+        <ThreadItemGutter>
+          <Avatar>
+            <AvatarFallback>
+              {message.author ? (
+                getUserInitials(message.author)
+              ) : (
+                <RobotIcon size={16} />
+              )}
+            </AvatarFallback>
+          </Avatar>
+        </ThreadItemGutter>
+        <ThreadItemContent className="min-w-0">
+          <ThreadItemHeader>
+            <ThreadItemAuthor>
+              {message.author ? userDisplayName(message.author) : "PostHog"}
+            </ThreadItemAuthor>
+            {!message.author && <Badge variant="info">Agent</Badge>}
+            <ThreadItemTimestamp dateTime={message.createdAt}>
+              {formatRelativeTimeShort(message.createdAt)}
+            </ThreadItemTimestamp>
+          </ThreadItemHeader>
+          <ThreadItemBody className="wrap-break-word text-muted-foreground">
+            {message.text}
+          </ThreadItemBody>
+        </ThreadItemContent>
+      </ThreadItem>
+    </ChatMessageScrollerItem>
+  );
+}
+
+// A single feed entry, either a real task card or a synthetic system row, tagged
+// with the timestamp used to interleave the two.
+type FeedEntry =
+  | { kind: "task"; id: string; createdAt: string; task: Task }
+  | {
+      kind: "system";
+      id: string;
+      createdAt: string;
+      message: ChannelFeedSystemMessage;
+    };
+
 // The Slack-style channel feed: every task kicked off in the channel, oldest
 // first, rendered as a kickoff message + task card. Multiplayer — the list is
-// team-visible and polls for teammates' cards and status flips.
+// team-visible and polls for teammates' cards and status flips. Synthetic
+// "PostHog agent" system rows (context lifecycle) are interleaved by timestamp.
 export function ChannelFeedView({
   tasks,
+  systemMessages,
   isLoading,
   emptyState,
+  intro,
   onOpenTask,
   onOpenThread,
 }: {
   tasks: Task[];
+  systemMessages?: ChannelFeedSystemMessage[];
   isLoading: boolean;
   emptyState?: React.ReactNode;
+  /** Rendered pinned above the first entry — the Slack-style channel intro
+   * (name, creation line, onboarding card). When set, the feed renders even
+   * with no entries instead of falling back to `emptyState`. */
+  intro?: ReactNode;
   onOpenTask: (task: Task) => void;
   onOpenThread: (task: Task) => void;
 }) {
-  if (isLoading && tasks.length === 0) {
+  // Merge tasks + system rows into one chronological list. ISO timestamps sort
+  // lexically, so a plain string compare is chronological. Announcements are
+  // posted 1ms before the task they describe; if the backend truncates that
+  // sub-second offset the timestamps tie, so break ties system-row-first to
+  // keep the announcement above its card.
+  const entries = useMemo<FeedEntry[]>(() => {
+    const merged: FeedEntry[] = [
+      ...tasks.map((task) => ({
+        kind: "task" as const,
+        id: task.id,
+        createdAt: task.created_at,
+        task,
+      })),
+      ...(systemMessages ?? []).map((message) => ({
+        kind: "system" as const,
+        id: message.id,
+        createdAt: message.createdAt,
+        message,
+      })),
+    ];
+    merged.sort(
+      (a, b) =>
+        a.createdAt.localeCompare(b.createdAt) ||
+        (a.kind === b.kind ? 0 : a.kind === "system" ? -1 : 1),
+    );
+    return merged;
+  }, [tasks, systemMessages]);
+
+  if (isLoading && entries.length === 0) {
     return (
       <div className="flex flex-1 items-center justify-center">
         <Spinner />
       </div>
     );
   }
 
-  if (tasks.length === 0) {
+  if (entries.length === 0 && !intro) {
     return <div className="flex-1 overflow-y-auto">{emptyState}</div>;
   }
 
@@ -510,25 +594,30 @@ export function ChannelFeedView({
               the row's top-right corner (absolute, past the row edge). Without a
               gutter they hug the scroll container and get clipped. */}
           <ChatMessageScrollerContent className="mx-auto w-full gap-0 py-4">
-            {tasks.map((task, index) => {
-              const previous = tasks[index - 1];
+            {intro}
+            {entries.map((entry, index) => {
+              const previous = entries[index - 1];
               const showDayMarker =
                 !previous ||
-                dayKey(previous.created_at) !== dayKey(task.created_at);
+                dayKey(previous.createdAt) !== dayKey(entry.createdAt);
               return (
-                <Fragment key={task.id}>
+                <Fragment key={entry.id}>
                   {showDayMarker && (
                     <ChatMarker variant="separator">
                       <ChatMarkerContent>
-                        {dayLabel(task.created_at, now)}
+                        {dayLabel(entry.createdAt, now)}
                       </ChatMarkerContent>
                     </ChatMarker>
                   )}
-                  <FeedRow
-                    task={task}
-                    onOpenTask={onOpenTask}
-                    onOpenThread={onOpenThread}
-                  />
+                  {entry.kind === "task" ? (
+                    <FeedRow
+                      task={entry.task}
+                      onOpenTask={onOpenTask}
+                      onOpenThread={onOpenThread}
+                    />
+                  ) : (
+                    <SystemFeedRow message={entry.message} />
+                  )}
                 </Fragment>
               );
             })}