@djangocfg/ui-tools 2.1.431 → 2.1.432

package/src/tools/chat/messages/MessageBubble.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { memo, type ReactNode } from 'react';
+import { memo, useMemo, type ReactNode } from 'react';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { MarkdownMessage } from '../../dev/code/MarkdownMessage';
+import { MarkdownMessage, urlChipRule, type LinkRule } from '../../dev/code/MarkdownMessage';
 import type {
   ChatAssistantContext,
   ChatAttachment,
@@ -26,7 +26,15 @@ import {
   type AttachmentRendererMap,
 } from './Attachments';
 import { MessageActions } from './MessageActions';
+import {
+  BubbleContextMenu,
+  buildDefaultBubbleMenuItems,
+  useResolvedBubbleMenuItems,
+  type BubbleMenuItem,
+} from './BubbleContextMenu';
 import { MessageBlocks } from './blocks';
+import { LinkPreviewCard } from '../../../common/link-preview';
+import { extractFirstUrl } from '../core/extractFirstUrl';
 import type { BlockRegistry } from './blocks';
 import type { ToolCallsProps } from './ToolCalls';
 import type { ComposerAppearance } from '../composer/types';
@@ -43,7 +51,32 @@ export interface MessageBubbleProps {
   user?: ChatUserContext;
   assistant?: ChatAssistantContext;
   showTimestamp?: boolean;
+  /**
+   * Render the legacy under-bubble action button row (copy / regenerate /
+   * edit / delete). Default `false` now — those actions live in the
+   * right-click / long-press context menu (see `bubbleMenuItems`). Set
+   * `true` to bring the hover button row back alongside the menu.
+   */
   showActions?: boolean;
+  /**
+   * Disable the right-click / long-press context menu entirely (e.g. a
+   * read-only transcript). Default `false` — the menu is on.
+   */
+  disableContextMenu?: boolean;
+  /**
+   * Host-injected EXTRA context-menu items, merged after the built-in
+   * Copy / Regenerate / Delete defaults (a divider is inserted between).
+   * Each carries its own typed `onSelect(message)` callback — e.g.
+   * "Reveal in Finder", "Copy as markdown", "Inspect". Ignored when
+   * `getBubbleMenuItems` is set (that gives the host full control).
+   */
+  bubbleMenuItems?: BubbleMenuItem[];
+  /**
+   * Full control over the bubble's context menu. Receives the message and
+   * the built-in default items so the host can keep / reorder / drop /
+   * extend them and return the final ordered list. Beats `bubbleMenuItems`.
+   */
+  getBubbleMenuItems?: (message: ChatMessage, defaults: BubbleMenuItem[]) => BubbleMenuItem[];
   isCompact?: boolean;
   /** Spaciousness of the bubble — `full` scales padding, text, avatar up
    * for full-page chat. `compact` (default) keeps the current geometry. */
@@ -114,14 +147,18 @@ const APPEARANCE_CLASSES: Record<ComposerAppearance, {
   row: string;
   avatar: string;
   avatarFallback: string;
+  /** Max-width cap on the whole message column (text + blocks + media),
+   *  so a single message never spans the full row — ChatGPT/Claude style. */
+  content: string;
   bubble: string;
   meta: string;
 }> = {
-  compact: { row: '', avatar: '', avatarFallback: '', bubble: '', meta: '' },
+  compact: { row: '', avatar: '', avatarFallback: '', content: 'max-w-[34rem]', bubble: '', meta: '' },
   full: {
     row: 'gap-4',
     avatar: 'size-10',
     avatarFallback: 'text-sm',
+    content: 'max-w-[44rem]',
     // Roomy ChatGPT-style bubble: larger text with generous line-height
     // and padding so a full-page chat reads spacious, not just bigger.
     bubble: 'rounded-3xl px-5 py-3.5 text-base leading-relaxed',
@@ -138,7 +175,10 @@ const MessageBubbleInner = ({
   user,
   assistant,
   showTimestamp = false,
-  showActions = true,
+  showActions = false,
+  disableContextMenu = false,
+  bubbleMenuItems,
+  getBubbleMenuItems,
   isCompact = false,
   appearance = 'compact',
   className,
@@ -171,6 +211,29 @@ const MessageBubbleInner = ({
   // Prop beats context; `<MessageBlocks>` falls back to the built-in
   // registry when both are absent.
   const resolvedBlockRegistry = blockRegistry ?? ctx?.blockRegistry;
+
+  // Auto link-preview (Telegram-style): when the host opts in and provides a
+  // resolver, surface ONE preview card under the bubble for the first URL in
+  // the text. Suppressed while streaming (the text isn't final), for error
+  // turns, and when the message already carries an explicit `link` block (so
+  // we never double up).
+  const linkCfg = ctx?.config.linkPreview;
+  const autoPreviewUrl = useMemo(() => {
+    if (!linkCfg?.autoDetect || !linkCfg.resolve) return null;
+    if (isStreaming || isErr) return null;
+    if (message.blocks?.some((b) => b.kind === 'link')) return null;
+    return extractFirstUrl(message.content);
+  }, [linkCfg?.autoDetect, linkCfg?.resolve, isStreaming, isErr, message.blocks, message.content]);
+
+  // URL chips (plan22): when the host opts in via `config.linkChips`, render
+  // bare web URLs in the bubble as compact favicon chips (matching the
+  // composer). The chip rule only claims bare `http(s)` autolinks; labeled
+  // links keep their text. Appended last so any host rules would win.
+  const linkRules = useMemo<readonly LinkRule[] | undefined>(
+    () => (ctx?.config.linkChips ? [urlChipRule] : undefined),
+    [ctx?.config.linkChips],
+  );
+
   const persona = resolvePersona(
     message,
     user ?? ctx?.config.user,
@@ -182,6 +245,33 @@ const MessageBubbleInner = ({
   // full-page chat reads like ChatGPT/Gemini. `compact` = no changes.
   const ap = APPEARANCE_CLASSES[appearance];
 
+  // Right-click / long-press menu. The built-in Copy / Regenerate /
+  // Delete items wire to the same handlers the old button row used;
+  // hosts merge extras via `bubbleMenuItems` or take full control via
+  // `getBubbleMenuItems`. Suppressed while streaming (no actions yet) and
+  // when the host opts out. Memoised so the menu doesn't rebuild every
+  // token delta.
+  const defaultMenuItems = useMemo(
+    () =>
+      buildDefaultBubbleMenuItems({
+        role: message.role,
+        onCopy,
+        onRegenerate,
+        // Edit — user bubbles only (gated inside the builder). Just fires
+        // the host trigger; the host loads the text into the composer.
+        onEdit,
+        onDelete,
+      }),
+    [message.role, onCopy, onRegenerate, onEdit, onDelete],
+  );
+  const menuItems = useResolvedBubbleMenuItems(
+    message,
+    defaultMenuItems,
+    bubbleMenuItems,
+    getBubbleMenuItems,
+  );
+  const menuEnabled = !disableContextMenu && !isStreaming && menuItems.length > 0;
+
   return (
     <div
       role="article"
@@ -189,7 +279,17 @@ const MessageBubbleInner = ({
       aria-busy={isStreaming || undefined}
       data-role={message.role}
       className={cn(
-        'group/msg flex gap-2.5 px-2.5 py-2',
+        // Selection containment (plan138 follow-up). The whole row —
+        // and EVERY wrapper down to the bubble — is `select-none`; only
+        // the innermost prose element (`<MarkdownMessage>`) re-enables
+        // `select-text`. Putting `select-text` on the bubble DIV (the
+        // old approach) made the bubble's own padding selectable, so a
+        // drag could ride out of one bubble's text and grab the next
+        // bubble's top-padding strip — the two bubbles were one
+        // contiguous selectable region. With the text island as the
+        // ONLY selectable node, the range can't bridge the
+        // non-selectable padding/gap between two messages.
+        'group/msg flex select-none gap-2.5 px-2.5 py-2',
         ap.row,
         isUser ? 'flex-row-reverse' : 'flex-row',
         className,
@@ -209,7 +309,13 @@ const MessageBubbleInner = ({
         </Avatar>
       ) : null}
 
-      <div className={cn('min-w-0 flex-1', isUser && 'flex flex-col items-end')}>
+      <div
+        className={cn(
+          'min-w-0 flex-1',
+          ap.content,
+          isUser && 'flex flex-col items-end',
+        )}
+      >
         {beforeContent}
         {message.attachments?.length
           ? attachmentsRenderer
@@ -234,32 +340,53 @@ const MessageBubbleInner = ({
               )
           : null}
 
-        <div
-          className={cn(
-            'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
-            ap.bubble,
-            bubbleSurface,
-          )}
+        <BubbleContextMenu
+          message={message}
+          items={menuEnabled ? menuItems : []}
+          // `inline-block` so the trigger hugs the bubble (right-click +
+          // long-press land on the bubble, not the full-width column).
+          className={cn('inline-block max-w-full', isUser && 'self-end')}
         >
-          {isStreaming && message.toolActivity ? (
-            <div className="mb-1.5">
-              {streamingIndicator
-                ? streamingIndicator(message)
-                : <StreamingIndicator label={message.toolActivity} />}
-            </div>
-          ) : null}
+          <div
+            className={cn(
+              // Bubble surface stays `select-none` (inherited from the
+              // row) — its padding is NOT a selectable region, so a drag
+              // can't extend from this bubble's text into the next
+              // bubble's padding. `<MarkdownMessage>` inside re-enables
+              // `select-text` on the prose itself: the text is the only
+              // selection island, bounded to this one message.
+              'inline-block max-w-full rounded-2xl px-3.5 py-2 text-sm',
+              ap.bubble,
+              bubbleSurface,
+            )}
+          >
+            {isStreaming && message.toolActivity ? (
+              <div className="mb-1.5">
+                {streamingIndicator
+                  ? streamingIndicator(message)
+                  : <StreamingIndicator label={message.toolActivity} />}
+              </div>
+            ) : null}
 
-          {message.content || !isStreaming ? (
-            <MarkdownMessage
-              content={message.content || (isErr ? '*Failed to generate a response.*' : '')}
-              isUser={isUser}
-              size={appearance === 'full' ? 'base' : isCompact ? 'xs' : 'sm'}
-              plainText={isStreaming}
-            />
-          ) : (
-            streamingIndicator ? streamingIndicator(message) : <StreamingIndicator />
-          )}
-        </div>
+            {message.content || !isStreaming ? (
+              <MarkdownMessage
+                content={message.content || (isErr ? '*Failed to generate a response.*' : '')}
+                isUser={isUser}
+                size={appearance === 'full' ? 'base' : isCompact ? 'xs' : 'sm'}
+                // Render markdown LIVE during streaming (formatted as
+                // tokens arrive) instead of forcing the raw plain-text
+                // branch. `streaming` enables block-split + per-block
+                // memoization (O(n), not O(n²)) and boundary-buffers the
+                // in-flight trailing block so half-written syntax doesn't
+                // flash. The same sanitized pipeline runs in both phases.
+                streaming={isStreaming}
+                linkRules={linkRules}
+              />
+            ) : (
+              streamingIndicator ? streamingIndicator(message) : <StreamingIndicator />
+            )}
+          </div>
+        </BubbleContextMenu>
 
         {message.blocks?.length ? (
           <MessageBlocks
@@ -270,6 +397,16 @@ const MessageBubbleInner = ({
           />
         ) : null}
 
+        {autoPreviewUrl && linkCfg?.resolve ? (
+          <div className={cn('mt-1.5 w-full', isUser && 'flex justify-end')}>
+            <LinkPreviewCard
+              url={autoPreviewUrl}
+              resolver={linkCfg.resolve}
+              appearance={appearance}
+            />
+          </div>
+        ) : null}
+
         {message.toolCalls?.length
           ? toolCallsRenderer
             ? toolCallsRenderer(message.toolCalls)
@@ -322,7 +459,14 @@ export const MessageBubble = memo(MessageBubbleInner, (prev, next) => {
     a.toolCalls === b.toolCalls &&
     a.sources === b.sources &&
     a.attachments === b.attachments &&
-    a.blocks === b.blocks
+    a.blocks === b.blocks &&
+    // Context-menu config — handlers/extras are expected to be stable
+    // (useCallback / module const), so a reference change means the host
+    // wants a different menu and we must re-render.
+    prev.bubbleMenuItems === next.bubbleMenuItems &&
+    prev.getBubbleMenuItems === next.getBubbleMenuItems &&
+    prev.disableContextMenu === next.disableContextMenu &&
+    prev.showActions === next.showActions
   );
 });
 MessageBubble.displayName = 'MessageBubble';

package/src/tools/chat/messages/MessageList.tsx

@@ -76,6 +76,19 @@ export interface MessageListHandle {
   scrollToIndex: (index: number, smooth?: boolean) => void;
 }
 
+// Breathing room under the last bubble: a spacer rendered as the
+// Virtuoso `Footer` keeps the final message from sitting flush against
+// the composer, and the same value is fed as a scroll `offset` so every
+// "land at bottom" path settles with this gap visible instead of pinning
+// the last bubble to the very edge. Tasteful — one comfortable notch.
+const BOTTOM_GAP_PX = 24;
+
+// Stable Footer spacer — reserves `BOTTOM_GAP_PX` of scrollable space
+// below the last bubble. Rendered inside the virtualized scroller so it
+// counts toward content height (followOutput scrolls past it) without
+// shifting the viewport when items mount/unmount.
+const FooterSpacer = () => <div aria-hidden style={{ height: BOTTOM_GAP_PX }} />;
+
 export const MessageList = forwardRef<MessageListHandle, MessageListProps>(function MessageList(
   {
     messages: messagesProp,
@@ -107,14 +120,36 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
   const scrollerRef = useRef<HTMLElement | Window | null>(null);
   const [isScrollable, setIsScrollable] = useState(false);
   const lastReportedAtBottomRef = useRef<boolean | null>(null);
+  // Mirror of the latest "is the user following" state, readable from
+  // the last-item ResizeObserver without re-subscribing it on every
+  // sticky-state flip. This is the ONLY gate for sticky-bottom: we
+  // follow because the user is at/near bottom, never because of message
+  // length. The moment they scroll up, this flips false and we stop
+  // re-pinning (the <JumpToLatest> pill takes over).
+  const isFollowingRef = useRef(true);
   const reportAtBottom = useCallback(
     (value: boolean) => {
+      isFollowingRef.current = value;
       if (lastReportedAtBottomRef.current === value) return;
       lastReportedAtBottomRef.current = value;
       onAtBottomChange?.(value);
     },
     [onAtBottomChange],
   );
+  // Pin the viewport to the absolute bottom. Used both by the last-item
+  // ResizeObserver (to correct virtuoso's `followOutput:'auto'`, which
+  // settles a few px short on the final streamed chunk) and any other
+  // "land exactly at end" path.
+  const pinToBottom = useCallback((smooth = false) => {
+    virtuosoRef.current?.scrollToIndex({
+      index: 'LAST',
+      align: 'end',
+      // Scroll past the last bubble by the footer gap so it lands with
+      // breathing room above the composer, not flush against the edge.
+      offset: BOTTOM_GAP_PX,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+  }, []);
   // Track whether we've already landed on the bottom for the initial
   // history. Virtuoso's `initialTopMostItemIndex` only fires on first
   // mount and uses the `messages` length at that moment. Chats almost
@@ -128,11 +163,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
     ref,
     () => ({
       scrollToBottom: (smooth = false) => {
-        virtuosoRef.current?.scrollToIndex({
-          index: 'LAST',
-          behavior: smooth ? 'smooth' : 'auto',
-          align: 'end',
-        });
+        pinToBottom(smooth);
       },
       scrollToIndex: (index, smooth = false) => {
         virtuosoRef.current?.scrollToIndex({
@@ -141,7 +172,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
         });
       },
     }),
-    [],
+    [pinToBottom],
   );
 
   const defaultRenderItem = useCallback(
@@ -172,6 +203,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       virtuosoRef.current?.scrollToIndex({
         index: 'LAST',
         align: 'end',
+        offset: BOTTOM_GAP_PX,
         behavior: 'auto',
       });
     });
@@ -194,6 +226,7 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
         virtuosoRef.current?.scrollToIndex({
           index: 'LAST',
           align: 'end',
+          offset: BOTTOM_GAP_PX,
           behavior: 'smooth',
         });
       });
@@ -204,6 +237,43 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
     };
   }, [scrollAnchorId]);
 
+  // Sticky-bottom corrector. Virtuoso's `followOutput:'auto'` keeps the
+  // list near the bottom while content grows token-by-token, but on the
+  // FINAL streamed chunk (and any late reflow — images loading, code
+  // blocks measuring) it can settle a few px short: no further scroll
+  // event arrives to nudge it the last stretch, so a short reply lands
+  // slightly under-scrolled. We observe ONLY the last bubble's size and,
+  // while the user is following (`isFollowingRef`), re-pin to the
+  // absolute bottom on every size change. Cheap: one observer, last item
+  // only, no work once the user scrolls up.
+  const lastItemElRef = useRef<HTMLElement | null>(null);
+  const lastItemRoRef = useRef<ResizeObserver | null>(null);
+  const observeLastItem = useCallback(
+    (el: HTMLElement | null) => {
+      if (el === lastItemElRef.current) return;
+      lastItemRoRef.current?.disconnect();
+      lastItemElRef.current = el;
+      if (!el) return;
+      const ro = new ResizeObserver(() => {
+        // Only stick when the user hasn't scrolled away. This is the
+        // universal ChatGPT rule — follow = user at bottom, regardless
+        // of how long the message is.
+        if (isFollowingRef.current) pinToBottom(false);
+      });
+      ro.observe(el);
+      lastItemRoRef.current = ro;
+    },
+    [pinToBottom],
+  );
+  useEffect(
+    () => () => {
+      lastItemRoRef.current?.disconnect();
+      lastItemRoRef.current = null;
+      lastItemElRef.current = null;
+    },
+    [],
+  );
+
   // Watch the scroll container: when content fits (scrollHeight ≤ clientHeight)
   // there's nothing to scroll, the user is by definition "at bottom", and the
   // Jump-to-latest pill must stay hidden regardless of what virtuoso reports.
@@ -289,6 +359,9 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
         {messages.map((m, i) => (
           <div key={m.id ?? i}>{itemRenderer(m, i)}</div>
         ))}
+        {/* Mirror the virtualized Footer spacer so the last bubble keeps
+            its breathing room above the composer in the non-virtual path. */}
+        <FooterSpacer />
       </div>
     );
   }
@@ -302,7 +375,18 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       className={cn('flex-1', className)}
       data={messages}
       computeItemKey={computeItemKey}
-      itemContent={(index, m) => (m ? itemRenderer(m, index) : null)}
+      itemContent={(index, m) => {
+        if (!m) return null;
+        const node = itemRenderer(m, index);
+        // Wrap only the last bubble in a size-observed shell so we can
+        // re-pin to the absolute bottom as the streaming reply grows
+        // (corrects virtuoso's slight final-chunk under-scroll). The
+        // wrapper is `display:contents` so it adds no layout box.
+        if (index === messages.length - 1) {
+          return <div ref={observeLastItem}>{node}</div>;
+        }
+        return node;
+      }}
       // No `defaultItemHeight` — Virtuoso uses its first-item probe
       // pass. We previously fed it `120` which was wildly low for
       // chat bubbles (markdown + code blocks reach 500px+) and forced
@@ -345,21 +429,23 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       // internally without a null-guard, so passing `undefined` here
       // crashes with `d[l]` on any render where the empty-defaults
       // path runs (regression: ui-tools 2.1.369 first ship).
-      components={
-        isLoadingMore
-          ? {
-              Header: () => (
-                <div className="flex justify-center py-2">
-                  <Spinner className="size-4 text-muted-foreground" />
-                </div>
-              ),
-            }
-          : EMPTY_COMPONENTS
-      }
+      // Footer always carries the bottom-gap spacer so the last bubble
+      // never sits flush against the composer; Header only appears while
+      // older history is loading.
+      components={isLoadingMore ? COMPONENTS_WITH_HEADER : FOOTER_ONLY_COMPONENTS}
     />
   );
 });
 
-// Stable empty-components reference — passed when `isLoadingMore` is
-// false so virtuoso's `components[name]` lookups never see undefined.
-const EMPTY_COMPONENTS = {} as const;
+// Header spinner for the loading-older-history state.
+const LoadingHeader = () => (
+  <div className="flex justify-center py-2">
+    <Spinner className="size-4 text-muted-foreground" />
+  </div>
+);
+
+// Stable component maps — virtuoso indexes `components[name]` without a
+// null-guard, so we always pass a concrete object. Both carry the
+// FooterSpacer; the loading variant adds the history spinner Header.
+const FOOTER_ONLY_COMPONENTS = { Footer: FooterSpacer } as const;
+const COMPONENTS_WITH_HEADER = { Header: LoadingHeader, Footer: FooterSpacer } as const;

package/src/tools/chat/messages/ToolCalls.tsx

@@ -125,14 +125,23 @@ const ToolCallItem = memo(function ToolCallItem({
   };
 
   const Icon = open ? ChevronDown : ChevronRight;
-  const statusColor =
+  // Status maps to a small dot color (success/error/cancelled/running). The
+  // word itself is shown only for non-success states to keep the row quiet
+  // — a green dot already reads as "ok".
+  const statusDot =
     call.status === 'success'
-      ? 'text-emerald-500'
+      ? 'bg-success'
       : call.status === 'error'
-        ? 'text-destructive'
+        ? 'bg-destructive'
         : call.status === 'cancelled'
-          ? 'text-muted-foreground'
-          : 'text-amber-500';
+          ? 'bg-muted-foreground'
+          : 'bg-warning';
+  const statusText =
+    call.status === 'error'
+      ? 'text-destructive'
+      : call.status === 'cancelled'
+        ? 'text-muted-foreground'
+        : 'text-muted-foreground';
 
   const renderValue = (value: unknown, kind: ToolPayloadKind): ReactNode => {
     if (kind === 'input' && renderInput) return renderInput(value, call);
@@ -143,25 +152,31 @@ const ToolCallItem = memo(function ToolCallItem({
     return <DefaultPayload value={value} kind={kind} />;
   };
 
+  // A non-success terminal status still shows its word (errors must read);
+  // success/running stay quiet (dot only).
+  const showStatusWord = call.status === 'error' || call.status === 'cancelled';
+
   return (
-    <div className="overflow-hidden rounded-md border border-border bg-muted/30">
+    <div className="overflow-hidden rounded-xl border border-border/60 bg-muted/20">
       <button
         type="button"
         onClick={handleToggle}
         aria-expanded={open}
-        className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-muted/60"
+        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/40"
       >
-        <Icon aria-hidden className="size-3 shrink-0 text-muted-foreground" />
         {isRunning ? (
-          <Loader2 aria-hidden className="size-3 shrink-0 animate-spin text-amber-500" />
+          <Loader2 aria-hidden className="size-3 shrink-0 animate-spin text-warning" />
         ) : (
-          <span className={cn('size-2 shrink-0 rounded-full', statusColor.replace('text-', 'bg-'))} />
+          <span className={cn('size-1.5 shrink-0 rounded-full', statusDot)} />
         )}
-        <span className="font-mono text-foreground">{call.name}</span>
-        <span className={cn('ml-auto', statusColor)}>{call.status}</span>
+        <span className="truncate font-mono text-foreground/90">{call.name}</span>
+        {showStatusWord ? (
+          <span className={cn('shrink-0', statusText)}>{call.status}</span>
+        ) : null}
+        <Icon aria-hidden className="ml-auto size-3 shrink-0 opacity-60" />
       </button>
       {open ? (
-        <div className="space-y-1 border-t border-border px-2 py-1.5 text-[11px]">
+        <div className="space-y-1 border-t border-border/60 px-2.5 py-1.5 text-[11px]">
           {call.input != null ? renderValue(call.input, 'input') : null}
           {call.streamingText != null
             ? renderValue(call.streamingText, 'streaming')