+
+ );
+ })}
+ {isTurnLive && !isCompactPreview ? (
+
+ ) : null}
+
+
+
);
diff --git a/desktop/src/features/agents/ui/activityRenderClasses/MessageActivity.tsx b/desktop/src/features/agents/ui/activityRenderClasses/MessageActivity.tsx
index b819050b528..9b1f8d588ed 100644
--- a/desktop/src/features/agents/ui/activityRenderClasses/MessageActivity.tsx
+++ b/desktop/src/features/agents/ui/activityRenderClasses/MessageActivity.tsx
@@ -1,5 +1,10 @@
-import type { UserProfileLookup } from "@/features/profile/lib/identity";
+import {
+ resolveUserLabel,
+ type UserProfileLookup,
+} from "@/features/profile/lib/identity";
+import { normalizePubkey } from "@/shared/lib/pubkey";
import { Markdown } from "@/shared/ui/markdown";
+import { UserAvatar } from "@/shared/ui/UserAvatar";
import { useAgentSessionTranscriptVariant } from "../agentSessionTranscriptContext";
import { formatTranscriptTimestampTitle } from "../agentSessionUtils";
import type { TranscriptItem } from "../agentSessionTypes";
@@ -16,13 +21,27 @@ export function MessageActivity(props: ActivityRenderClassItemProps) {
return null;
}
- return ;
+ return (
+
+ );
}
function MessageItem({
+ agentAvatarUrl,
+ agentName,
+ agentPubkey,
item,
profiles,
}: {
+ agentAvatarUrl: string | null;
+ agentName: string;
+ agentPubkey: string;
item: Extract;
profiles?: UserProfileLookup;
}) {
@@ -32,6 +51,25 @@ function MessageItem({
const isAssistant = item.role === "assistant";
const text = item.text.trim();
const messageLink = getTranscriptMessageLink(item);
+ // The identity row must resolve the agent through the profiles lookup first,
+ // exactly as `ToolItem` (ToolItem.tsx:45-52) and the panel header
+ // (AgentSessionThreadPanel.tsx:243-249) already do for the same agent on the
+ // same surface. The `agentAvatarUrl`/`agentName` props only carry what the
+ // *caller's* agent record holds, and the primary channel flow's record
+ // (`ChannelAgentSessionAgent`) has no avatar field at all — so relying on the
+ // prop alone showed initials for every channel-opened session while the
+ // managed-agent panel showed the real avatar. Resolving here keeps the row
+ // agreeing with the header directly above it; the props stay as the fallback
+ // for callers that have an avatar the lookup does not (a locally managed
+ // agent whose avatar was never published to a relay profile).
+ const agentProfile = profiles?.[normalizePubkey(agentPubkey)] ?? null;
+ const resolvedAgentAvatarUrl = agentProfile?.avatarUrl ?? agentAvatarUrl;
+ const resolvedAgentName = resolveUserLabel({
+ pubkey: agentPubkey,
+ fallbackName: agentName,
+ profiles,
+ preferResolvedSelfLabel: true,
+ });
if (!isAssistant) {
return (
@@ -55,6 +93,44 @@ function MessageItem({
data-testid="transcript-assistant-message"
>
+ {isConversation ? (
+ // berd labels every agent turn with a small identity row above the
+ // prose — 20px round avatar + name at `text-xs`, `mb-0.5`, `gap-1`
+ // (MessageBubble.tsx:961-981). Without it the reply reads as
+ // unattributed body text in a full-cover view, which was the largest
+ // single divergence from berd. Only the conversation variant gets it:
+ // the other variants' markup is pinned by the byte-for-byte fixture.
+
+ {/*
+ * The avatar is decorative here: `UserAvatar` exposes either an
+ * image named `${displayName} avatar` or its fallback initials, and
+ * the agent's name already follows as visible text, so an
+ * unhidden avatar makes a screen reader announce the same identity
+ * twice for every agent turn. The visible name is the row's single
+ * accessible identity. Hidden at this call site rather than by
+ * teaching the shared `UserAvatar` a decorative mode: other rows
+ * that pair an avatar with adjacent name text (for example
+ * `ForumPostCard.tsx:91-99`) have the same shape and would want the
+ * same treatment, but changing the shared component's accessible
+ * name affects all 45 of its call sites and is not this PR's scope.
+ *
+ * `size="xs"` is already 20px (`h-5 w-5`) in UserAvatar.
+ */}
+
+
+
+
+ {resolvedAgentName}
+
+
+ ) : null}
@@ -176,16 +178,28 @@ export function UserMessageBubble({
messageLink &&
"group/bubble cursor-pointer transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
isCompactPreview && "p-2 text-xs leading-4",
- // A filled surface (not just a hairline) is what makes the prompt
- // read as the human's turn at a glance in focus mode.
- isConversation && "border-transparent bg-muted/60 px-4 py-2.5",
+ // berd's user-turn recipe (MessageBubble.tsx:990): a soft tint, no
+ // border at all, `px-4 py-2`, and a tighter radius than a chat
+ // "pill". berd's `rounded-sm` is 12px on its own scale
+ // (globals.css `--radius-sm: 12px`), NOT Tailwind's stock 2px —
+ // Buzz's `rounded-xl` is the exact 12px equivalent here.
+ // `leading-normal` overrides the `leading-relaxed` base, as berd
+ // does, so the prompt sits tighter than the agent's prose.
+ isConversation &&
+ "rounded-xl border-0 bg-muted/60 px-4 py-2 leading-normal",
bubbleClassName,
)}
ref={bubbleRef}
{...bubbleLinkProps}
>
diff --git a/desktop/src/shared/ui/markdown/CodeBlock.tsx b/desktop/src/shared/ui/markdown/CodeBlock.tsx
index 9954b03aa6c..30748d236e5 100644
--- a/desktop/src/shared/ui/markdown/CodeBlock.tsx
+++ b/desktop/src/shared/ui/markdown/CodeBlock.tsx
@@ -19,6 +19,31 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
import { getReactNodeText } from "./utils";
+/**
+ * Code-block presentation, supplied by the rendering surface.
+ *
+ * `focusProse` applies berd's recipe (`code-block.tsx` CodeBlockHeader:388-402,
+ * viewport:528-529): the language in a real header row above the frame with the
+ * copy action opposite it, a 10px radius, page-background fill behind a subtle
+ * border, and no shadow.
+ *
+ * It is opt-in because this renderer is shared with channel messages —
+ * restyling the default would change every code block in the app. The variant
+ * is a property of the *surface*, not of a role: `AgentSessionTranscriptList`
+ * provides it once at the transcript boundary, so a fence in a human prompt
+ * gets the same chrome as one in an agent reply.
+ *
+ * Delivered through context rather than a `MarkdownCodeBlock` prop for the same
+ * reason as `VideoReviewMarkdownContext`: the component map handed to
+ * react-markdown must stay module-stable. A prop would have to be threaded
+ * through `createMarkdownComponents`, which would also mean partitioning the
+ * parsed-node cache that identifies that map by variant string
+ * (`nodeCache.ts`). A context read at render time needs neither.
+ */
+export const CodeBlockVariantContext = React.createContext<
+ "default" | "focusProse"
+>("default");
+
let shikiHighlighter: HighlighterGeneric | null =
null;
let shikiInitPromise: Promise | null = null;
@@ -75,6 +100,8 @@ export function MarkdownCodeBlock({
const [isCopying, setIsCopying] = React.useState(false);
const codeBlockRef = React.useRef(null);
const code = React.useMemo(() => getCodeBlockText(children), [children]);
+ const isFocusProse =
+ React.useContext(CodeBlockVariantContext) === "focusProse";
useSmoothCorners(codeBlockRef);
const handleCopy = React.useCallback(
@@ -96,6 +123,52 @@ export function MarkdownCodeBlock({
[code],
);
+ const focusProseCopyButton = (
+
+
+
+
+ Copy code
+
+ );
+
+ if (isFocusProse) {
+ return (
+
+
+ {language}
+ {focusProseCopyButton}
+
+
+ {children}
+
+
+ );
+ }
+
+ // Unchanged default path: this renderer is shared with channel messages, so
+ // its markup stays byte-identical (including class order) to keep every other
+ // code block in the app exactly as it was.
return (