feat(profile): embed live activity feed in profile aux panel

desktop/package.json

@@ -59,6 +59,7 @@
     "@tiptap/starter-kit": "^3.22.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "emoji-mart": "^5.6.0",
     "jdenticon": "^3.3.0",
     "lucide-react": "^1.0.0",

desktop/src/features/agents/observerRelayStore.ts

@@ -443,6 +443,19 @@ export function injectObserverEventsForE2E(
   notifyListeners();
 }
 
+/**
+ * Synchronize the observer store with a sorted buffer of events for one agent.
+ * Used by test harnesses and replay bridges that already hold decoded frames.
+ */
+export function syncAgentObserverEvents(
+  agentPubkey: string,
+  events: ObserverEvent[],
+) {
+  for (const event of events) {
+    appendAgentEvent(agentPubkey, event);
+  }
+}
+
 export function resetAgentObserverStore() {
   generation += 1;
   const unsubscribe = unsubscribeRelay;

desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx

@@ -1,9 +1,15 @@
 import * as React from "react";
 import { CheckCheck } from "lucide-react";
 
+import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { cn } from "@/shared/lib/cn";
+import { useProfilePanel } from "@/shared/context/ProfilePanelContext";
+import { Markdown } from "@/shared/ui/markdown";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
+import { useAgentSessionTranscriptVariant } from "../agentSessionTranscriptContext";
+import { MessageLinkHoverCue } from "../activityRenderClasses/MessageLinkHoverCue";
 import { TranscriptTimestamp } from "../activityRenderClasses/TranscriptTimestamp";
+import { useTranscriptBubbleOverflow } from "../activityRenderClasses/useTranscriptBubbleOverflow";
 import { compactSummaryTone } from "./CompactToolSummaryRow";
 import type { SentMessageLink } from "./messageLinks";
 import { SentMessageContextDialog } from "./SentMessageContextDialog";
@@ -20,6 +26,7 @@ export function CompactMessageSummary({
   label,
   messageLink,
   preview,
+  pubkey,
   result,
   timestamp,
 }: {
@@ -34,34 +41,139 @@ export function CompactMessageSummary({
   label: string;
   messageLink: SentMessageLink | null;
   preview: string | null;
+  pubkey: string;
   result: string;
   timestamp: string;
 }) {
   const [detailsOpen, setDetailsOpen] = React.useState(false);
+  const variant = useAgentSessionTranscriptVariant();
+  const { goChannel } = useAppNavigation();
+  const { openProfilePanel } = useProfilePanel();
+  const isCompactPreview = variant === "compactPreview";
+  const shouldClampBubble = !isCompactPreview;
+  const [bubbleRef, hasBubbleOverflow] =
+    useTranscriptBubbleOverflow(shouldClampBubble);
+  const canOpenMessage = shouldClampBubble && messageLink !== null;
   const mutedTone = compactSummaryTone();
+  const avatarClassName = cn(
+    "mr-2 mt-1 shrink-0",
+    isCompactPreview ? "size-5" : "size-7",
+  );
+  const handleBubbleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!messageLink || isNestedInteractiveTarget(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      void goChannel(messageLink.channelId, {
+        messageId: messageLink.messageId,
+      });
+    },
+    [goChannel, messageLink],
+  );
+  const handleBubbleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (
+        !messageLink ||
+        isNestedInteractiveTarget(event) ||
+        (event.key !== "Enter" && event.key !== " ")
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      void goChannel(messageLink.channelId, {
+        messageId: messageLink.messageId,
+      });
+    },
+    [goChannel, messageLink],
+  );
+  const bubbleLinkProps = canOpenMessage
+    ? {
+        onClick: handleBubbleClick,
+        onKeyDown: handleBubbleKeyDown,
+        role: "link" as const,
+        tabIndex: 0,
+      }
+    : {};
   return (
     <>
       <div className="flex max-w-full flex-row items-start justify-start">
-        <UserAvatar
-          avatarUrl={avatarUrl}
-          className="mr-2 mt-1 shrink-0"
-          displayName={displayName}
-          size="xs"
-          testId="transcript-agent-sent-avatar"
-        />
-        <div className="flex max-w-[85%] min-w-0 flex-col items-start gap-1">
+        {openProfilePanel && !isCompactPreview ? (
+          <button
+            aria-label={`Open ${displayName} profile`}
+            className={cn(
+              avatarClassName,
+              "pointer-events-auto rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              openProfilePanel(pubkey);
+            }}
+            type="button"
+          >
+            <UserAvatar
+              avatarUrl={avatarUrl}
+              className="size-full text-xs"
+              displayName={displayName}
+              size="sm"
+              testId="transcript-agent-sent-avatar"
+            />
+          </button>
+        ) : (
+          <UserAvatar
+            avatarUrl={avatarUrl}
+            className={cn(
+              avatarClassName,
+              isCompactPreview ? "text-3xs" : "text-xs",
+            )}
+            displayName={displayName}
+            size="sm"
+            testId="transcript-agent-sent-avatar"
+          />
+        )}
+        <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
           <div
             className={cn(
-              "min-w-0 rounded-2xl border px-3 py-2 text-sm leading-relaxed shadow-sm",
-              isError
-                ? "border-destructive/25 bg-destructive/10 text-destructive"
-                : "border-primary/15 bg-primary/6 text-foreground",
+              "w-full min-w-0 rounded-2xl border px-3 py-2 shadow-sm",
+              isCompactPreview
+                ? "text-xs leading-4"
+                : "text-sm leading-relaxed",
+              shouldClampBubble && "relative max-h-36 overflow-hidden",
+              canOpenMessage &&
+                "group/bubble cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              isCompactPreview
+                ? isError
+                  ? "border-destructive/25 bg-destructive/10 text-destructive"
+                  : "border-transparent bg-muted text-foreground"
+                : isError
+                  ? "border-destructive/25 bg-destructive/10 text-destructive"
+                  : "border-transparent bg-muted text-foreground",
+              canOpenMessage &&
+                (isError ? "hover:bg-destructive/15" : "hover:bg-muted/90"),
             )}
             data-testid="transcript-tool-message-preview"
+            ref={bubbleRef}
+            {...bubbleLinkProps}
           >
-            <p className="whitespace-pre-wrap wrap-break-word">
-              {preview || "Message content unavailable."}
-            </p>
+            <Markdown
+              className={isCompactPreview ? "text-xs leading-4" : "leading-5"}
+              content={preview || "Message content unavailable."}
+            />
+            {hasBubbleOverflow ? (
+              <span
+                className={cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-8 rounded-b-2xl bg-linear-to-b from-transparent",
+                  isError
+                    ? "to-destructive/10"
+                    : isCompactPreview
+                      ? "to-muted"
+                      : "to-muted",
+                )}
+              />
+            ) : null}
+            {canOpenMessage ? <MessageLinkHoverCue /> : null}
           </div>
           <div className="inline-flex max-w-full items-center gap-1.5 px-1">
             <TranscriptTimestamp
@@ -100,3 +212,16 @@ export function CompactMessageSummary({
     </>
   );
 }
+
+function isNestedInteractiveTarget(
+  event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+) {
+  const target =
+    event.target instanceof Element
+      ? event.target.closest(
+          "a,button,input,select,textarea,summary,[role='button'],[role='link']",
+        )
+      : null;
+
+  return target !== null && target !== event.currentTarget;
+}

desktop/src/features/agents/ui/AgentSessionToolItem/CompactToolSummaryRow.tsx

@@ -2,44 +2,51 @@ import * as React from "react";
 import { ChevronDown } from "lucide-react";
 
 import { cn } from "@/shared/lib/cn";
-import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
+import { useAgentSessionTranscriptVariant } from "../agentSessionTranscriptContext";
 import type { AgentActivityAction } from "../agentSessionTypes";
-import type { CompactFileEditSummary } from "../agentSessionToolSummary";
-import { isInlineImageData } from "../agentSessionUtils";
+import type {
+  CompactFileEditSummary,
+  CompactToolKind,
+} from "../agentSessionToolSummary";
+import { resolveToolImageSrc } from "../agentSessionUtils";
 import {
   ActivityRowLabel,
   splitActivityRowLabel,
   type ActivityRowLabelParts,
 } from "../activityRenderClasses/ActivityRow";
 
 export function compactSummaryTone() {
-  return "text-muted-foreground/60 group-open:text-foreground";
+  return "text-muted-foreground/60 transition-colors group-hover/row:text-foreground group-open:text-foreground";
 }
 
 export function CompactToolSummaryRow({
   action,
   duration,
   fileEditSummary,
+  kind,
   label,
   preview,
   thumbnailSrc,
 }: {
   action: AgentActivityAction | null;
   duration: string | null;
   fileEditSummary: CompactFileEditSummary | null;
+  kind: CompactToolKind;
   label: string;
   preview: string | null;
   thumbnailSrc: string | null;
 }) {
   const [thumbnailFailed, setThumbnailFailed] = React.useState(false);
+  const variant = useAgentSessionTranscriptVariant();
+  const isCompactPreview = variant === "compactPreview";
   const mutedTone = compactSummaryTone();
   const resolvedThumbnail = React.useMemo(() => {
     if (!thumbnailSrc || thumbnailFailed) return null;
-    return resolveImageSrc(thumbnailSrc);
+    return resolveToolImageSrc(thumbnailSrc);
   }, [thumbnailFailed, thumbnailSrc]);
   const actionLabel = fileEditSummary
     ? null
-    : getCompactToolActionLabel(action, label, preview);
+    : getCompactToolActionLabel(action, kind, label, preview);
 
   return (
     <>
@@ -53,7 +60,13 @@ export function CompactToolSummaryRow({
           verb={actionLabel.verb}
         />
       ) : (
-        <span className={cn("shrink-0 text-sm font-semibold", mutedTone)}>
+        <span
+          className={cn(
+            "shrink-0 font-semibold",
+            isCompactPreview ? "text-xs" : "text-sm",
+            mutedTone,
+          )}
+        >
           {label}
         </span>
       )}
@@ -69,7 +82,11 @@ export function CompactToolSummaryRow({
         />
       ) : !fileEditSummary && !actionLabel && preview ? (
         <span
-          className={cn("min-w-0 max-w-48 truncate text-sm", mutedTone)}
+          className={cn(
+            "min-w-0 max-w-48 truncate",
+            isCompactPreview ? "text-xs" : "text-sm",
+            mutedTone,
+          )}
           title={preview}
         >
           {preview}
@@ -90,6 +107,7 @@ export function CompactToolSummaryRow({
 
 function getCompactToolActionLabel(
   action: AgentActivityAction | null,
+  kind: CompactToolKind,
   label: string,
   preview: string | null,
 ): (ActivityRowLabelParts & { title?: string }) | null {
@@ -108,10 +126,11 @@ function getCompactToolActionLabel(
   if (!preview) return parts;
 
   if (
-    label === "Ran command" ||
-    label === "Read file" ||
-    label === "Updated todos" ||
-    label === "Viewed image"
+    kind === "shell" ||
+    kind === "file-read" ||
+    kind === "skill-read" ||
+    kind === "plan" ||
+    kind === "image"
   ) {
     return { verb: parts.verb, object: preview, title: preview };
   }
@@ -138,7 +157,3 @@ function CompactFileEditSummaryView({
     />
   );
 }
-
-function resolveImageSrc(source: string): string {
-  return isInlineImageData(source) ? source : rewriteRelayUrl(source);
-}

desktop/src/features/agents/ui/AgentSessionToolItem/ShellCommandBlock.tsx

@@ -1,5 +1,6 @@
 import { Terminal } from "lucide-react";
 
+import { ScrollFadeMonoPanel } from "../FileContentBlock";
 import { parseShellToolOutput } from "../agentSessionUtils";
 
 export function ShellCommandBlock({
@@ -14,17 +15,28 @@ export function ShellCommandBlock({
 
   return (
     <div
-      className="rounded-lg bg-muted/40 px-3 py-2 font-mono text-xs leading-5"
+      className="overflow-hidden rounded-lg bg-muted font-mono text-xs leading-5"
       data-testid="transcript-shell-command"
     >
-      <p className="whitespace-pre-wrap wrap-break-word text-muted-foreground/70">
-        <Terminal className="mr-2 inline h-3.5 w-3.5 align-[-0.1875rem] text-accent-foreground" />
-        {command}
-      </p>
+      <ScrollFadeMonoPanel
+        fadeFromClassName="from-muted"
+        maxHeightClassName="max-h-36"
+      >
+        <p className="whitespace-pre-wrap wrap-break-word text-muted-foreground/70">
+          <Terminal className="mr-2 inline h-3.5 w-3.5 align-[-0.1875rem] text-primary" />
+          {command}
+        </p>
+      </ScrollFadeMonoPanel>
       {stdout ? (
-        <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word text-foreground">
-          {stdout}
-        </pre>
+        <ScrollFadeMonoPanel
+          className="mt-2"
+          fadeFromClassName="from-muted"
+          maxHeightClassName="max-h-36"
+        >
+          <pre className="whitespace-pre-wrap wrap-break-word text-foreground">
+            {stdout}
+          </pre>
+        </ScrollFadeMonoPanel>
       ) : null}
     </div>
   );