@plannotator/ui 0.54.0 → 0.56.0

package/components/Settings.tsx

@@ -7,6 +7,7 @@ import type { AnnotateAgentTerminalSide } from '@plannotator/core/agent-terminal
 import type { Origin } from '@plannotator/core/agents';
 import type { DiffLineBgIntensity } from '@plannotator/core/config-types';
 import type { TokenHoverDelay } from '@plannotator/core/token-hover';
+import { basenameFromPath } from '@plannotator/core/source-save';
 import {
   configStore,
   useConfigValue,
@@ -2670,7 +2671,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                                   >
                                     {detectedVaults.map((vault) => (
                                       <option key={vault} value={vault}>
-                                        {vault.split('/').pop() || vault}
+                                        {basenameFromPath(vault)}
                                       </option>
                                     ))}
                                     <option value={CUSTOM_PATH_SENTINEL}>Custom path...</option>

package/components/TableOfContents.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
+import { basenameFromPath } from '@plannotator/core/source-save';
 import type { Block, Annotation } from '../types';
 import {
   buildTocHierarchy,
@@ -22,6 +23,17 @@ interface TableOfContentsProps {
   linkedDocFilepath?: string | null;
   onLinkedDocBack?: () => void;
   backLabel?: string;
+  /**
+   * The element a click scrolls. Default: the `ScrollViewportProvider`
+   * context's viewport (plan review). A host that draws the list outside the
+   * document's scroll area (the Inbox's comments column) names it here.
+   */
+  scrollViewport?: HTMLElement | null;
+  /**
+   * The deepest heading level listed. Default 3 (plan review's list); the
+   * contents rail's surface (`DocumentContents`) lists 1 to 4, as the rail does.
+   */
+  maxLevel?: number;
 }
 
 // The prototype's TOC is a FLAT list — heading depth is conveyed by indentation
@@ -43,7 +55,7 @@ function flattenToc(items: TocItem[]): TocItem[] {
 // H1 flush + near-full strength, H2/H3 indented and dimmed to muted. Active row
 // is a soft neutral surface tint (not a loud primary fill).
 function itemClasses(level: number, isActive: boolean): string {
-  const indent = level <= 1 ? '' : level === 2 ? 'ml-3' : 'ml-6';
+  const indent = level <= 1 ? '' : level === 2 ? 'ml-3' : level === 3 ? 'ml-6' : 'ml-9';
   const tone = isActive
     ? 'bg-surface-1 text-foreground'
     : level <= 1
@@ -62,6 +74,8 @@ export function TableOfContents({
   linkedDocFilepath,
   onLinkedDocBack,
   backLabel,
+  scrollViewport: scrollViewportProp,
+  maxLevel = 3,
 }: TableOfContentsProps) {
   // Annotation count per section (kept — production feature).
   const annotationCounts = useMemo(
@@ -69,15 +83,16 @@ export function TableOfContents({
     [blocks, annotations]
   );
 
-  // Build the hierarchy (filters to heading levels ≤ 3 and attaches counts),
-  // then flatten to a plain list.
+  // Build the hierarchy (filters to heading levels ≤ maxLevel and attaches
+  // counts), then flatten to a plain list.
   const tocItems = useMemo(
-    () => flattenToc(buildTocHierarchy(blocks, annotationCounts)),
-    [blocks, annotationCounts]
+    () => flattenToc(buildTocHierarchy(blocks, annotationCounts, maxLevel)),
+    [blocks, annotationCounts, maxLevel]
   );
 
   // The real scroll element is the OverlayScrollArea viewport, not <main>.
-  const scrollViewport = useScrollViewport();
+  const contextViewport = useScrollViewport();
+  const scrollViewport = scrollViewportProp === undefined ? contextViewport : scrollViewportProp;
 
   // Smooth scroll-to-heading, accounting for the sticky header.
   const handleNavigate = useCallback(
@@ -132,7 +147,7 @@ export function TableOfContents({
               )}
             </div>
             <p className="text-[11px] text-foreground/70 truncate mt-0.5" title={linkedDocFilepath}>
-              {linkedDocFilepath.split('/').pop()}
+              {basenameFromPath(linkedDocFilepath)}
             </p>
           </div>
         )}

package/components/Viewer.tsx

@@ -86,9 +86,10 @@ import { type QuickLabel } from '../utils/quickLabels';
 import type { SelectionAction } from '../utils/selectionActions';
 import type { MentionSource } from '../utils/mentions';
 import { DocBadges, type DocBadgesProps, type LinkedDocBadgeInfo } from './DocBadges';
+import { legacyBadgesMaxWidth } from './docBadgesWidth';
 import { PinpointOverlay } from './PinpointOverlay';
 import { usePinpoint } from '../hooks/usePinpoint';
-import { useAnnotationHighlighter, type AnnotationRestoreReport } from '../hooks/useAnnotationHighlighter';
+import { rangeInsideExcluded, useAnnotationHighlighter, type AnnotationRestoreReport } from '../hooks/useAnnotationHighlighter';
 import { useVimSelection } from '../hooks/useVimSelection';
 import {
   getScrollViewportIntersectionRoot,
@@ -320,6 +321,10 @@ export interface ViewerProps {
   /** A small label over each picture tile's picture (see `QuestionBlock`
    *  `pictureBadge`); absent: none. */
   questionPictureBadge?: (choice: { label: string; image: { alt: string; src: string } }) => string | null;
+  /** A picture tile's zoom, told its question's key and the choice's index (see
+   *  `QuestionBlock` `onZoomChoice`). Absent: the zoom opens the picture
+   *  through `onImageClick`, as before. */
+  onQuestionPictureZoom?: (key: string, index: number, url: string, alt: string) => void;
   /** Makes a question's "Records a decision" tag a toggle button
    *  (`aria-pressed`); a click calls this with the question's key and the
    *  next state, which the host stores and returns from
@@ -399,12 +404,14 @@ export interface ViewerProps {
    * Opt-in host capability, with `answerOnly`: the reader may comment on the
    * text. A text selection opens the selection toolbar, comment-only
    * (Comment and the one-click 👍; no Delete, no label picker), and its
-   * comment composer; `annotations` are drawn as highlights. Question cards
-   * are left out of selection (their text is not commented on), and nothing
-   * else of authoring comes back (no pinpoint, code-block toolbar, Global
-   * comment or Copy, no Vim). For a host that shows a message whose words
-   * can be commented on (the Plannotator Inbox's agent messages). Ignored
-   * without `answerOnly` and under `readOnly`. Absent → unchanged.
+   * comment composer; `annotations` are drawn as highlights. A rendered
+   * diagram takes comments on its parts the same way (`onAddAnnotation` gets
+   * a row with `diagramAnchor`). Question cards are left out of selection
+   * (their text is not commented on), and nothing else of authoring comes
+   * back (no pinpoint, code-block toolbar, Global comment or Copy, no Vim).
+   * For a host that shows a message whose words can be commented on (the
+   * Plannotator Inbox's agent messages). Ignored without `answerOnly` and
+   * under `readOnly`. Absent → unchanged.
    */
   textComments?: boolean;
   /**
@@ -643,6 +650,7 @@ const StickyActionsLane: React.FC<{ className: string; children: React.ReactNode
       {/* After the lane: the lane is a flex box, so a float placed before it would narrow it. */}
       <div
         data-print-hide
+        data-sticky-actions-spacer
         aria-hidden="true"
         className="float-right"
         style={box ? { width: box.width, height: box.height, marginTop: box.marginTop, marginRight: box.marginRight } : undefined}
@@ -833,6 +841,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   questionContractLines = false,
   questionPictureChoices = true,
   questionPictureBadge,
+  onQuestionPictureZoom,
   onToggleQuestionDecisionRecording,
   onOpenQuestionDecision,
   questionDecisionLocked,
@@ -915,27 +924,41 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   // card's top padding. One row fits; a second row (diff badge) or mobile
   // wrapping outgrows the padding and lands on the document's first heading.
   // Measure the cluster and insert exactly the clearance it needs (0 when it fits).
+  // The cluster also stops where the action cluster starts on the same row, so
+  // a long file name truncates at the buttons instead of running under them;
+  // with no buttons on its row (the phone layout) it stops inside the card.
   const docBadgesRef = useRef<HTMLDivElement | null>(null);
   const [badgeClearance, setBadgeClearance] = useState(0);
+  const [badgeMaxWidth, setBadgeMaxWidth] = useState<number | null>(null);
   useEffect(() => {
     if (hasViewerAnnotationHeader) {
       setBadgeClearance(0);
+      setBadgeMaxWidth(null);
       return;
     }
     const el = docBadgesRef.current;
     const article = containerRef.current;
-    if (!el || !article) { setBadgeClearance(0); return; }
+    if (!el || !article) { setBadgeClearance(0); setBadgeMaxWidth(null); return; }
+    // The static float that holds the actions' place: the sticky lane's spacer
+    // (the lane itself moves while stuck), or the plain float without one.
+    const actions = article.querySelector<HTMLElement>('[data-sticky-actions-spacer]')
+      ?? article.querySelector<HTMLElement>('[data-sticky-actions]');
     const measure = () => {
       const pad = parseFloat(getComputedStyle(article).paddingTop) || 0;
       const overflow = el.offsetTop + el.offsetHeight - pad;
       setBadgeClearance(overflow > 1 ? overflow + 4 : 0);
+      setBadgeMaxWidth(legacyBadgesMaxWidth(el.getBoundingClientRect(), actions?.getBoundingClientRect() ?? null, article.getBoundingClientRect()));
     };
     measure();
     const ro = new ResizeObserver(measure);
     ro.observe(el);
+    // The card too: when it narrows (the sidebar opens, the layout settles after
+    // first paint) the actions float moves without changing size.
+    ro.observe(article);
+    if (actions) ro.observe(actions);
     window.addEventListener('resize', measure);
     return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
-  }, [hasViewerAnnotationHeader, repoInfo, hasPreviousVersion, showDemoBadge, linkedDocInfo, archiveInfo, sourceInfo, planDiffStats, openInAppPath]);
+  }, [hasViewerAnnotationHeader, stickyActions, repoInfo, hasPreviousVersion, showDemoBadge, linkedDocInfo, archiveInfo, sourceInfo, planDiffStats, openInAppPath]);
 
   // Per-doc heading slug map with dedup — computed once per blocks array so
   // anchor ids stay stable across re-renders and duplicate heading texts get
@@ -1329,8 +1352,8 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     const container = containerRef.current;
     if (!container || !scrollViewport) return false;
 
-    const target = document.getElementById(anchor);
-    if (!target || !container.contains(target)) return false;
+    const target = container.querySelector<HTMLElement>(`#${CSS.escape(anchor)}`);
+    if (!target) return false;
 
     const documentHeader = stickyActions
       ? container.querySelector<HTMLElement>('[data-viewer-document-header]')
@@ -1375,6 +1398,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     const handleCopy = (e: ClipboardEvent) => {
       const tag = (e.target as HTMLElement)?.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      // A live selection where nothing is annotated (an Inbox action item's text) is
+      // the person's own: the browser copies it, never an older toolbar's text.
+      const live = window.getSelection();
+      if (live && !live.isCollapsed && live.rangeCount > 0 && containerRef.current && rangeInsideExcluded(containerRef.current, live.getRangeAt(0))) return;
 
       if (toolbarState?.selectionText) {
         e.preventDefault();
@@ -1726,9 +1753,13 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
           ...(vimModeActive ? { outline: 'none' } : {}),
         } as React.CSSProperties}
       >
-        {/* Legacy badge placement remains byte-for-byte opt-out behavior. */}
         {!viewerAnnotationHeader && (repoInfo || hasPreviousVersion || showDemoBadge || linkedDocInfo || archiveInfo || sourceInfo || openInAppPath) && (
-          <div ref={docBadgesRef} data-print-hide className={`absolute top-3 md:top-4 ${gridEnabled ? 'left-3 md:left-5' : 'left-0'}`}>
+          <div
+            ref={docBadgesRef}
+            data-print-hide
+            className={`absolute top-3 md:top-4 ${gridEnabled ? 'left-3 md:left-5' : 'left-0'}`}
+            style={badgeMaxWidth !== null ? { maxWidth: badgeMaxWidth } : undefined}
+          >
             <DocBadges
               layout="column"
               repoInfo={repoInfo}
@@ -1835,10 +1866,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   annotations={annotations}
                   selectedAnnotationId={selectedAnnotationId}
                   onSelectAnnotation={onSelectAnnotation}
-                  onAddAnnotation={authoringOff ? undefined : onAddAnnotation}
-                  readOnly={authoringOff}
+                  onAddAnnotation={selectionCommentsOn ? onAddAnnotation : undefined}
+                  readOnly={!selectionCommentsOn}
                   onRestoreReport={onRestoreReport}
-                  onAskAI={authoringOff ? undefined : onAskAI}
+                  onAskAI={selectionCommentsOn ? onAskAI : undefined}
                   askAISourcePath={linkedDocInfo?.filepath ?? sourceInfo}
                 />
               </Suspense>
@@ -1851,10 +1882,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   annotations={annotations}
                   selectedAnnotationId={selectedAnnotationId}
                   onSelectAnnotation={onSelectAnnotation}
-                  onAddAnnotation={authoringOff ? undefined : onAddAnnotation}
-                  readOnly={authoringOff}
+                  onAddAnnotation={selectionCommentsOn ? onAddAnnotation : undefined}
+                  readOnly={!selectionCommentsOn}
                   onRestoreReport={onRestoreReport}
-                  onAskAI={authoringOff ? undefined : onAskAI}
+                  onAskAI={selectionCommentsOn ? onAskAI : undefined}
                   askAISourcePath={linkedDocInfo?.filepath ?? sourceInfo}
                 />
               </Suspense>
@@ -1980,6 +2011,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   questionContractLines={questionContractLines}
                   questionPictureChoices={questionPictureChoices}
                   questionPictureBadge={questionPictureBadge}
+                  onQuestionPictureZoom={onQuestionPictureZoom}
                 />
               );
               // `textComments`: a question card's words are not commented on

package/components/blocks/QuestionBlock.tsx

@@ -271,6 +271,11 @@ export interface QuestionBlockProps {
    *  answer, never read by the parser. Default absent, so every card draws as
    *  before (the Plannotator Inbox's onboarding tour labels its pictures). */
   pictureBadge?: (choice: { label: string; image: { alt: string; src: string } }) => string | null;
+  /** The zoom button on a picture tile, told which question and which choice
+   *  (its index in the question's choices) as well as the picture: a host can
+   *  open a gallery of that question's choices (the Plannotator Inbox's option
+   *  sets). Absent: the zoom calls `onImageClick(url, alt)` as before. */
+  onZoomChoice?: (key: string, index: number, url: string, alt: string) => void;
 }
 
 /** The picture tile's label (`pictureBadge`): a small dark chip over the picture's top-left corner. */
@@ -321,6 +326,7 @@ export const QuestionBlock: React.FC<QuestionBlockProps> = ({
   onNavigateAnchor,
   pictureChoices = true,
   pictureBadge,
+  onZoomChoice,
 }) => {
   const { question, number } = indexed;
   const resolveImage = useImageResolver();
@@ -880,7 +886,11 @@ export const QuestionBlock: React.FC<QuestionBlockProps> = ({
                 name={groupName}
                 readOnly={readOnly}
                 onPick={pick}
-                onZoom={onImageClick}
+                onZoom={
+                  onZoomChoice
+                    ? (url, alt, index) => onZoomChoice(question.key, index, url, alt)
+                    : onImageClick
+                }
                 onPictureError={markPictureFailed}
                 heldTitle={pictureHeldTitle}
                 renderText={inline}
@@ -1121,8 +1131,8 @@ export interface QuestionPictureTilesProps {
   readOnly?: boolean;
   /** The tile's radio or checkbox changed (the picture and the label pick through it). */
   onPick: (label: string, checked: boolean) => void;
-  /** The separate zoom button (absent: no zoom button). Never picks. */
-  onZoom?: (url: string, alt: string) => void;
+  /** The separate zoom button (absent: no zoom button). Never picks. `index`: the choice's place in `choices`. */
+  onZoom?: (url: string, alt: string, index: number) => void;
   onPictureError?: (url: string) => void;
   /** The host's reason a picture is held (its image resolver's `unavailable` title). */
   heldTitle?: (src: string) => string | null;
@@ -1256,7 +1266,7 @@ export const QuestionPictureTiles: React.FC<QuestionPictureTilesProps> = ({
           {shown && onZoom && (
             <button
               type="button"
-              onClick={() => onZoom(shown, alt)}
+              onClick={() => onZoom(shown, alt, index)}
               aria-label={`Zoom: ${alt}`}
               className="annotation-exclude absolute right-1.5 top-1.5 grid h-7 w-7 place-items-center rounded-md bg-background/85 text-foreground shadow-sm ring-1 ring-border/70 before:absolute before:-inset-2 before:content-[''] hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary"
               data-pinpoint-ignore=""

package/components/chat/ChatComposer.tsx

@@ -0,0 +1,192 @@
+import { Send, Square } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { isImeCompositionKey } from '../../utils/commentSubmitKey';
+import { Button } from '../ui/button';
+import { Textarea } from '../ui/textarea';
+import { CHAT_SEND_BUTTON, CHAT_STOP_BUTTON, FOCUS_RING } from './chatRecipes';
+
+/**
+ * The text box's own box: border, radius, padding and type size. Spelled once
+ * so a host's layer painted over the field (`overlay`) can share its metrics.
+ * The scrollbar gutter is reserved, so a field that scrolls wraps where the
+ * layer does. 16 px below md keeps iOS Safari from zooming on focus.
+ */
+export const CHAT_COMPOSER_FIELD_BOX =
+  'rounded-md border px-3 py-2 text-base md:text-sm [scrollbar-gutter:stable]';
+
+export interface ChatComposerProps {
+  /** The field's text. The composer is controlled: it holds none itself, so
+   * `onChange` must set this in the same tick or typing and IME input are lost. */
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  /** Enter in the field, Mod+Enter included, and the Send button. It runs even
+   * while `busy` or with an empty box, so a host decides what those mean. */
+  readonly onSend: () => void;
+  /** False: plain Enter is a new line and Mod+Enter or the button sends. For a
+   * touch keyboard, which has no Shift to make a new line with. */
+  readonly sendOnEnter?: boolean;
+  /** Stop, while `busy`. */
+  readonly onStop?: () => void;
+  /** A reply is running: the Send button becomes Stop. */
+  readonly busy?: boolean;
+  readonly disabled?: boolean;
+  /** The field's accessible name. */
+  readonly label?: string;
+  readonly placeholder?: string;
+  readonly sendLabel?: string;
+  readonly stopLabel?: string;
+  /** The host's handle on the field. */
+  readonly composerRef?: React.RefObject<HTMLTextAreaElement | null>;
+  /** Above the box (errors, queued messages). */
+  readonly notices?: React.ReactNode;
+  /** The quiet context line under the box. */
+  readonly below?: React.ReactNode;
+  /** The row with Send, left of it. */
+  readonly toolbar?: React.ReactNode;
+  /** In the box's positioned wrapper, before the field (a host's own menu). */
+  readonly assist?: React.ReactNode;
+  /** Painted over the field, in the field's own box. */
+  readonly overlay?: React.ReactNode;
+  /** Extra field classes. */
+  readonly fieldClassName?: string;
+  /** The id of the element describing what the message carries. */
+  readonly describedBy?: string;
+  /** With a host's menu in `assist`: whether it is open and which row is active. */
+  readonly expanded?: boolean;
+  readonly activeDescendant?: string;
+  /** Files pasted into the field. Absent: the paste is left to the browser. */
+  readonly onFiles?: (files: readonly File[]) => void;
+  /** Pasted text, before the field takes it: true when the host took it. */
+  readonly onPasteText?: (text: string) => boolean;
+  /** The caret or the selection moved. */
+  readonly onCaret?: (field: HTMLTextAreaElement) => void;
+  /** An IME composition started (true) or ended (false). */
+  readonly onComposing?: (composing: boolean) => void;
+  /** Runs before the composer's own keys; `preventDefault` keeps Enter from sending. */
+  readonly onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+/** The message box. It has no picker of its own; a host adds one through `assist`. */
+export function ChatComposer({
+  value,
+  onChange,
+  onSend,
+  sendOnEnter = true,
+  onStop,
+  busy = false,
+  disabled,
+  label = 'Message',
+  placeholder,
+  sendLabel = 'Send',
+  stopLabel = 'Stop',
+  composerRef,
+  notices,
+  below,
+  toolbar,
+  assist,
+  overlay,
+  fieldClassName,
+  describedBy,
+  expanded,
+  activeDescendant,
+  onFiles,
+  onPasteText,
+  onCaret,
+  onComposing,
+  onKeyDown,
+}: ChatComposerProps) {
+  return (
+    <div className="flex max-h-[60%] shrink-0 flex-col gap-2 border-t border-border px-3 pb-2 pt-2.5">
+      <div className="flex min-h-0 flex-col gap-2 overflow-y-auto empty:hidden">{notices}</div>
+      <div className="relative shrink-0">
+        {assist}
+        <Textarea
+          ref={composerRef}
+          rows={2}
+          value={value}
+          disabled={disabled}
+          placeholder={placeholder}
+          aria-label={label}
+          aria-autocomplete={expanded === undefined ? undefined : 'list'}
+          aria-expanded={expanded}
+          aria-activedescendant={activeDescendant}
+          aria-describedby={describedBy}
+          // The box grows with its text up to 128 px, then scrolls inside itself.
+          className={cn(
+            CHAT_COMPOSER_FIELD_BOX,
+            'field-sizing-content max-h-32 min-h-16 resize-none bg-card shadow-none',
+            FOCUS_RING,
+            fieldClassName,
+          )}
+          onChange={(event) => onChange(event.target.value)}
+          onSelect={(event) => onCaret?.(event.currentTarget)}
+          onClick={(event) => onCaret?.(event.currentTarget)}
+          onKeyUp={(event) => {
+            if (event.key.startsWith('Arrow') || event.key === 'Home' || event.key === 'End') {
+              onCaret?.(event.currentTarget);
+            }
+          }}
+          onCompositionStart={() => onComposing?.(true)}
+          onCompositionEnd={() => onComposing?.(false)}
+          onPaste={(event) => {
+            const files = Array.from(event.clipboardData?.files ?? []);
+            if (files.length > 0 && onFiles !== undefined) {
+              event.preventDefault();
+              onFiles(files);
+              return;
+            }
+            const text = event.clipboardData?.getData('text/plain') ?? '';
+            if (text !== '' && onPasteText?.(text) === true) event.preventDefault();
+          }}
+          onKeyDown={(event) => {
+            // Enter, in any chord, does not bubble past the React root, so a
+            // bubble listener on window or document (a Send elsewhere on the
+            // page) does not hear it. Capture listeners and native listeners on
+            // the box's ancestors still do, and keyup is not stopped.
+            const enter = event.key === 'Enter';
+            if (enter) event.stopPropagation();
+            // Safari's Enter that commits a composition has isComposing false
+            // and keyCode 229; this checks both.
+            if (isImeCompositionKey(event)) return;
+            onKeyDown?.(event);
+            if (!enter || event.defaultPrevented) return;
+            const mod = event.metaKey || event.ctrlKey;
+            if (!mod && (event.shiftKey || !sendOnEnter)) return; // a new line
+            event.preventDefault();
+            if (!event.shiftKey) onSend();
+          }}
+        />
+        {overlay}
+      </div>
+      {below}
+      <div className="flex min-w-0 shrink-0 items-center gap-1" data-chat-composer-toolbar>
+        {toolbar}
+        <div className="ml-auto shrink-0">
+          {busy ? (
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={stopLabel}
+              className={CHAT_STOP_BUTTON}
+              onClick={onStop}
+            >
+              <Square aria-hidden="true" className="size-3" />
+            </Button>
+          ) : (
+            <Button
+              size="icon"
+              aria-label={sendLabel}
+              className={CHAT_SEND_BUTTON}
+              disabled={disabled}
+              onClick={onSend}
+            >
+              <Send aria-hidden="true" className="size-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}