badges, better links in thread item

adamleithp · adamleithp · commit 991b34d58658 · 2026-07-13T15:17:30.000+01:00
diff --git a/packages/ui/src/features/canvas/components/ChannelFeedView.tsx b/packages/ui/src/features/canvas/components/ChannelFeedView.tsx
@@ -1,4 +1,5 @@
 import {
+  ArchiveIcon,
   ArrowSquareOutIcon,
   ChatCircleIcon,
   DotsThreeIcon,
@@ -11,6 +12,7 @@ import {
   AvatarFallback,
   AvatarGroup,
   Badge,
+  Button,
   Card,
   CardContent,
   ChatMarker,
@@ -50,7 +52,10 @@ import {
   mentionChipClass,
   TaskLinkIcon,
 } from "@posthog/ui/features/canvas/components/MentionText";
-import type { ChannelFeedSystemMessage } from "@posthog/ui/features/canvas/hooks/useChannelFeedMessages";
+import type {
+  ChannelFeedSystemMessage,
+  DemoButtonPreset,
+} 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 { useThreadPanelStore } from "@posthog/ui/features/canvas/stores/threadPanelStore";
@@ -59,8 +64,14 @@ import {
   type SidebarPrState,
   useTaskPrStatus,
 } from "@posthog/ui/features/sidebar/useTaskPrStatus";
+import {
+  getCachedTask,
+  taskDetailQuery,
+} from "@posthog/ui/features/tasks/queries";
 import { useInView } from "@posthog/ui/primitives/hooks/useInView";
+import { toast } from "@posthog/ui/primitives/toast";
 import { Text } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { Fragment, memo, type ReactNode, useMemo } from "react";
 
@@ -404,7 +415,7 @@ const FeedItem = memo(function FeedItem({
       <ThreadItemContent className="min-w-0">
         <ThreadItemHeader>
           <ThreadItemAuthor>PostHog</ThreadItemAuthor>
-          <Badge variant="info">Agent</Badge>
+          {/* <Badge variant="info">Agent</Badge> */}
           <ThreadItemTimestamp
             dateTime={new Date(task.created_at).toISOString()}
           >
@@ -516,6 +527,47 @@ function SystemFeedRow({ message }: { message: ChannelFeedSystemMessage }) {
   );
 }
 
+// Buttons derived from a task's live PR / merge state: "Merged" once it lands,
+// otherwise a "Review PR" action. A "View PR" button appears when the task has a
+// real PR URL. Used by the demo message's `task-pr` button preset, keyed off its
+// replied task; the buttons always render (they're a demo affordance) but the
+// state reflects the real task when it has one.
+function TaskPrButtons({ taskId }: { taskId: string }) {
+  const { data } = useQuery({ ...taskDetailQuery(taskId), staleTime: 30_000 });
+  const task = data ?? getCachedTask(taskId);
+  const prUrl =
+    typeof task?.latest_run?.output?.pr_url === "string"
+      ? task.latest_run.output.pr_url
+      : undefined;
+  const { prState } = useTaskPrStatus({
+    id: taskId,
+    cloudPrUrl: prUrl ?? null,
+    taskRunEnvironment: task?.latest_run?.environment ?? null,
+  });
+  const merged = prState === "merged";
+  const openPr = () =>
+    prUrl
+      ? window.open(prUrl, "_blank", "noopener,noreferrer")
+      : toast.success("Review started");
+  return (
+    <div className="mt-1.5 flex items-center gap-1.5">
+      {merged ? (
+        <Badge variant="default">Merged</Badge>
+      ) : (
+        <Button variant="outline" size="sm" onClick={openPr}>
+          Review PR
+        </Button>
+      )}
+      {prUrl && (
+        <Button variant="default" size="sm" onClick={openPr}>
+          <ArrowSquareOutIcon size={14} />
+          View PR
+        </Button>
+      )}
+    </div>
+  );
+}
+
 // Initials for a free-text persona name (the demo composer lets you type any
 // "from"), so a fake human message gets a sensible avatar fallback.
 function initialsFromName(name: string): string {
@@ -536,6 +588,7 @@ export function DemoMessageItem({
   content,
   createdAt,
   replyTo,
+  buttons,
   onDelete,
 }: {
   fromName: string;
@@ -544,6 +597,8 @@ export function DemoMessageItem({
   createdAt?: string;
   /** When set, renders a Slack-style "replied to a thread: …" preview line. */
   replyTo?: { label: string; href: string };
+  /** When set, renders a preset row of action buttons. */
+  buttons?: DemoButtonPreset;
   onDelete?: () => void;
 }) {
   const navigate = useNavigate();
@@ -578,7 +633,7 @@ export function DemoMessageItem({
       <ThreadItemContent className="min-w-0">
         <ThreadItemHeader>
           <ThreadItemAuthor>{fromName || "Someone"}</ThreadItemAuthor>
-          {fromKind === "agent" && <Badge variant="info">Agent</Badge>}
+          {/* {fromKind === "agent" && <Badge variant="info">Agent</Badge>} */}
           {createdAt && (
             <ThreadItemTimestamp dateTime={createdAt}>
               {formatRelativeTimeShort(createdAt)}
@@ -615,6 +670,28 @@ export function DemoMessageItem({
             </span>
           )}
         </ThreadItemBody>
+        {buttons === "inbox-item" && (
+          <div className="mt-1.5 flex items-center gap-1.5">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => toast.success("Review started")}
+            >
+              Review
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              aria-label="Archive"
+              onClick={() => toast.success("Archived")}
+            >
+              <ArchiveIcon size={14} />
+            </Button>
+          </div>
+        )}
+        {buttons === "task-pr" && replyMatch && (
+          <TaskPrButtons taskId={replyMatch[2]} />
+        )}
       </ThreadItemContent>
       {onDelete && (
         <ThreadItemActions aria-label="Message actions" className="inset-bs-2">
@@ -657,6 +734,7 @@ function DemoFeedRow({
         content={demo.content}
         createdAt={message.createdAt}
         replyTo={demo.replyTo}
+        buttons={demo.buttons}
         onDelete={onDelete ? () => onDelete(message.id) : undefined}
       />
     </ChatMessageScrollerItem>
diff --git a/packages/ui/src/features/canvas/components/InsertFakeMessageDialog.tsx b/packages/ui/src/features/canvas/components/InsertFakeMessageDialog.tsx
@@ -21,6 +21,7 @@ import {
   type ThreadReply,
   ThreadReplyPicker,
 } from "@posthog/ui/features/canvas/components/ThreadReplyPicker";
+import type { DemoButtonPreset } from "@posthog/ui/features/canvas/hooks/useChannelFeedMessages";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useOrgMembers } from "@posthog/ui/features/canvas/hooks/useOrgMembers";
 import { useDemoFeedStore } from "@posthog/ui/features/canvas/stores/demoFeedStore";
@@ -60,6 +61,7 @@ export function InsertFakeMessageDialog({
   const [fromKind, setFromKind] = useState<"human" | "agent">("human");
   const [content, setContent] = useState("");
   const [replyTo, setReplyTo] = useState<ThreadReply | null>(null);
+  const [buttons, setButtons] = useState<DemoButtonPreset | null>(null);
 
   // Reset fields on each open so a prior draft never lingers (prev-prop compare,
   // not an effect, so there's no stale flash).
@@ -71,6 +73,7 @@ export function InsertFakeMessageDialog({
       setFromKind("human");
       setContent("");
       setReplyTo(null);
+      setButtons(null);
     }
   }
 
@@ -105,6 +108,7 @@ export function InsertFakeMessageDialog({
       fromKind,
       content: content.trim(),
       replyTo: replyTo ?? undefined,
+      buttons: buttons ?? undefined,
     });
     toast.success("Added to the channel feed");
     onOpenChange(false);
@@ -187,6 +191,26 @@ export function InsertFakeMessageDialog({
               />
             </Field>
 
+            {/* Optional: a preset of action buttons on the message. */}
+            <Field>
+              <FieldLabel>Buttons (optional)</FieldLabel>
+              <ToggleGroup
+                value={[buttons ?? "none"]}
+                onValueChange={(v) => {
+                  const next = v[0];
+                  setButtons(
+                    next === "inbox-item" || next === "task-pr" ? next : null,
+                  );
+                }}
+              >
+                <ToggleGroupItem value="none">None</ToggleGroupItem>
+                <ToggleGroupItem value="inbox-item">
+                  Inbox item buttons
+                </ToggleGroupItem>
+                <ToggleGroupItem value="task-pr">PR buttons</ToggleGroupItem>
+              </ToggleGroup>
+            </Field>
+
             {/* Message body: a real thread composer, so @ opens the same member
               picker as a thread. The reference picker inserts canvas / channel /
               task / CONTEXT.md deep links. */}
@@ -220,6 +244,7 @@ export function InsertFakeMessageDialog({
                   fromKind={fromKind}
                   content={content}
                   replyTo={replyTo ?? undefined}
+                  buttons={buttons ?? undefined}
                 />
               </div>
             </div>
diff --git a/packages/ui/src/features/canvas/components/MentionText.tsx b/packages/ui/src/features/canvas/components/MentionText.tsx
@@ -16,6 +16,7 @@ import "./mention-chip.css";
 import {
   ExternalLink,
   File,
+  Inbox,
   type LucideIcon,
   Shapes,
   SquircleDashed,
@@ -45,6 +46,7 @@ function internalLinkMeta(
 ): { Icon: LucideIcon; label: string } {
   if (href.includes("/dashboards/")) return { Icon: Shapes, label: text };
   if (href.endsWith("/context")) return { Icon: File, label: text };
+  if (href.includes("/inbox/")) return { Icon: Inbox, label: text };
   if (href.startsWith("/website/")) {
     return { Icon: SquircleDashed, label: text.replace(/^#/, "") };
   }
@@ -100,8 +102,7 @@ export function MentionText({
   }, [content, markdownLinks]);
   const selfEmail = currentUserEmail?.toLowerCase();
   const router = useRouter();
-  const linkClass =
-    "text-primary underline underline-offset-2 hover:text-primary/80";
+  const linkClass = "bg-info/50 px-1 rounded-xs";
   return (
     <Text size="1" className={className}>
       {segments.map(({ segment, key }) => {
diff --git a/packages/ui/src/features/canvas/components/ReferencePicker.tsx b/packages/ui/src/features/canvas/components/ReferencePicker.tsx
@@ -1,5 +1,6 @@
 import { ArrowSquareOutIcon, LinkIcon } from "@phosphor-icons/react";
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -18,8 +19,34 @@ import { useChannelFeed } from "@posthog/ui/features/canvas/hooks/useChannelFeed
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useDashboards } from "@posthog/ui/features/canvas/hooks/useDashboards";
 import { useBackendChannel } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useInboxReports } from "@posthog/ui/features/inbox/hooks/useInboxReports";
+import {
+  type PrDiffStats,
+  usePrDiffStatsBatch,
+} from "@posthog/ui/features/inbox/hooks/usePrDiffStatsBatch";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
-import { File, Shapes, SquircleDashed } from "lucide-react";
+import { File, Inbox, Shapes, SquircleDashed } from "lucide-react";
+
+// The inbox item's PR state as a compact badge + diff stats, so you can tell a
+// merged report from an open one when picking.
+function PrStatusBadge({ pr }: { pr: PrDiffStats }) {
+  const { label, variant } = pr.merged
+    ? ({ label: "Merged", variant: "default" } as const)
+    : pr.draft
+      ? ({ label: "Draft", variant: "default" } as const)
+      : pr.state === "closed"
+        ? ({ label: "Closed", variant: "destructive" } as const)
+        : ({ label: "PR", variant: "info" } as const);
+  return (
+    <span className="ms-auto flex shrink-0 items-center gap-1">
+      <Badge variant={variant}>{label}</Badge>
+      <span className="text-[11px] text-muted-foreground">
+        <span className="text-green-11">+{pr.additions}</span>{" "}
+        <span className="text-red-11">-{pr.deletions}</span>
+      </span>
+    </span>
+  );
+}
 
 // A menu for inserting an in-app reference (canvas / channel / task / this
 // channel's CONTEXT.md) as a deep link. Canvas / Channels / Tasks are submenus;
@@ -37,6 +64,13 @@ export function ReferencePicker({
   const { dashboards } = useDashboards(channelId);
   const { tasks: channelTasks } = useChannelFeed(backendChannel?.id);
   const { data: allTasks = [] } = useTasks();
+  const { data: inbox } = useInboxReports();
+  const inboxReports = inbox?.results ?? [];
+  const { data: prStats } = usePrDiffStatsBatch(
+    inboxReports
+      .map((r) => r.implementation_pr_url)
+      .filter((u): u is string => !!u),
+  );
 
   // Every task is referenceable: this channel's tasks first, then the rest.
   const channelTaskIds = new Set(channelTasks.map((t) => t.id));
@@ -138,6 +172,41 @@ export function ReferencePicker({
           </DropdownMenuSubContent>
         </DropdownMenuSub>
 
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Inbox size={14} className="text-muted-foreground" />
+            Inbox
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent side="right" sideOffset={4} className="w-64">
+            {inboxReports.length === 0 ? (
+              <DropdownMenuItem disabled>No inbox items</DropdownMenuItem>
+            ) : (
+              inboxReports.map((r) => {
+                const pr = r.implementation_pr_url
+                  ? prStats?.[r.implementation_pr_url]
+                  : undefined;
+                return (
+                  <DropdownMenuItem
+                    key={r.id}
+                    onClick={() =>
+                      onInsert(
+                        r.title || "Untitled report",
+                        `/code/inbox/reports/${r.id}`,
+                      )
+                    }
+                  >
+                    <Inbox size={14} className="text-muted-foreground" />
+                    <span className="truncate">
+                      {r.title || "Untitled report"}
+                    </span>
+                    {pr && <PrStatusBadge pr={pr} />}
+                  </DropdownMenuItem>
+                );
+              })
+            )}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+
         <DropdownMenuItem
           onClick={() =>
             onInsert("CONTEXT.md", `/website/${channelId}/context`)
diff --git a/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx b/packages/ui/src/features/canvas/components/WebsiteChannelHome.tsx
@@ -78,6 +78,7 @@ export function WebsiteChannelHome({ channelId }: { channelId: string }) {
         fromKind: e.fromKind,
         content: e.content,
         replyTo: e.replyTo,
+        buttons: e.buttons,
       },
     }));
     const base = [...feedMessages, ...demoMessages];
diff --git a/packages/ui/src/features/canvas/hooks/useChannelFeedMessages.ts b/packages/ui/src/features/canvas/hooks/useChannelFeedMessages.ts
@@ -15,13 +15,19 @@ const CHANNEL_FEED_MESSAGES_POLL_INTERVAL_MS = 5_000;
 // real author and offers no content field, so the shown persona + body ride the
 // payload) and rendered as a full thread item — avatar, name, markdown body —
 // rather than the plain announcement text.
+// A preset of action buttons shown on the message (a demo affordance).
+// `task-pr` derives its buttons from the replied task's live PR / merge state.
+export type DemoButtonPreset = "inbox-item" | "task-pr";
+
 export interface DemoFeedMessage {
   fromName: string;
   fromKind: "human" | "agent";
   /** Markdown; may embed links to canvases / other channels. */
   content: string;
   /** When set, the message renders as a reply to this thread (a task deep link). */
   replyTo?: { label: string; href: string };
+  /** When set, renders a preset row of action buttons on the message. */
+  buttons?: DemoButtonPreset;
 }
 
 // The `payload` key that marks a feed message as a demo composer post — the
