@dbx-tools/ui-mastra 0.3.20 → 0.3.22

package/README.md

@@ -29,7 +29,7 @@ Key features:
   background-streaming states, plus a per-row cancel for a running thread.
 - Concurrent threads: run several conversations at once, switch between them
   while each keeps streaming, and cancel any one independently (per-thread abort
-  + routing, no shared client state).
+  - routing, no shared client state).
 - Mid-turn steering queue: messages submitted while a turn streams stack up as
   pending steers (they drain oldest-first when the turn ends); each queued item
   can be sent now (interrupting the current turn), removed, or dragged to

package/package.json

@@ -26,19 +26,19 @@
     "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0",
-    "@dbx-tools/shared-core": "0.3.20",
-    "@dbx-tools/shared-genie": "0.3.20",
-    "@dbx-tools/shared-mastra": "0.3.20",
-    "@dbx-tools/shared-model": "0.3.20",
-    "@dbx-tools/ui-appkit": "0.3.20",
-    "@dbx-tools/ui-branding": "0.3.20"
+    "@dbx-tools/shared-genie": "0.3.22",
+    "@dbx-tools/shared-model": "0.3.22",
+    "@dbx-tools/shared-core": "0.3.22",
+    "@dbx-tools/ui-branding": "0.3.22",
+    "@dbx-tools/shared-mastra": "0.3.22",
+    "@dbx-tools/ui-appkit": "0.3.22"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.20",
+  "version": "0.3.22",
   "types": "index.ts",
   "type": "module",
   "exports": {

package/src/react/bubbles.tsx

@@ -25,9 +25,9 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { MarkdownWithEmbeds } from "./embed-slots";
-import { ToolMarkdown } from "./markdown";
 import { ExportMenu } from "./export-menu";
 import { FeedbackControls } from "./feedback-controls";
+import { ToolMarkdown } from "./markdown";
 import { SuggestionPills } from "./suggestion-pills";
 import { collectSuggestions } from "./suggestions";
 import { ToolSessionPill, humanizeToolName } from "./tool-pill";
@@ -87,11 +87,7 @@ const getReasoningText = (parts: UIMessage["parts"]): string =>
 const RoleAvatar = ({ role }: { role: UIMessage["role"] }) => (
   <Avatar className="size-7">
     <AvatarFallback>
-      {role === "assistant" ? (
-        <SparklesIcon className="size-4" />
-      ) : (
-        <UserIcon className="size-4" />
-      )}
+      {role === "assistant" ? <SparklesIcon className="size-4" /> : <UserIcon className="size-4" />}
     </AvatarFallback>
   </Avatar>
 );
@@ -395,8 +391,7 @@ export const AssistantBubble = ({
   // pop in mid-stream. A bubble is "settled" if it isn't the active
   // streaming target - either the agent has returned to `ready` /
   // `error`, or a newer message has taken over the `isLast` slot.
-  const isStreamingThisBubble =
-    isLast && (status === "streaming" || status === "submitted");
+  const isStreamingThisBubble = isLast && (status === "streaming" || status === "submitted");
   const suggestions = isStreamingThisBubble ? [] : collectSuggestions(events);
   // Charts and tables are placed at inline marker positions in
   // the assistant's prose. `prepare_chart` / `render_data` mint
@@ -499,19 +494,13 @@ export const AssistantBubble = ({
                     onClick={handleCopy}
                     aria-label={copied ? "Copied" : "Copy"}
                   >
-                    {copied ? (
-                      <CheckIcon className="size-3" />
-                    ) : (
-                      <CopyIcon className="size-3" />
-                    )}
+                    {copied ? <CheckIcon className="size-3" /> : <CopyIcon className="size-3" />}
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>{copied ? "Copied" : "Copy"}</TooltipContent>
               </Tooltip>
             )}
-            {onExport && (
-              <ExportMenu onExport={onExport} iconOnly tooltip="Export message" />
-            )}
+            {onExport && <ExportMenu onExport={onExport} iconOnly tooltip="Export message" />}
             {onFeedback && (
               <FeedbackControls
                 onSubmit={onFeedback}
@@ -520,11 +509,7 @@ export const AssistantBubble = ({
             )}
           </div>
         )}
-        <SuggestionPills
-          questions={suggestions}
-          onSelect={onSuggestionClick}
-          className="mt-1"
-        />
+        <SuggestionPills questions={suggestions} onSelect={onSuggestionClick} className="mt-1" />
       </ItemContent>
     </Item>
   );

package/src/react/chat-view.tsx

@@ -1,3 +1,4 @@
+import { error as errorUtil } from "@dbx-tools/shared-core";
 import {
   Alert,
   AlertDescription,
@@ -32,7 +33,6 @@ import {
   TooltipTrigger,
   cn,
 } from "@dbx-tools/ui-appkit/react";
-import { error as errorUtil } from "@dbx-tools/shared-core";
 import {
   ArrowDownIcon,
   GripVerticalIcon,
@@ -172,9 +172,7 @@ export const ChatView = ({
   // `scrollHeight`/`scrollTop`; once the new DOM nodes mount we shift
   // `scrollTop` so the previously-visible content stays in place
   // (instead of jumping to the bottom of the new transcript).
-  const prependAnchorRef = useRef<{ scrollHeight: number; scrollTop: number } | null>(
-    null,
-  );
+  const prependAnchorRef = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
   const loadMoreRef = useRef(onLoadMore);
   loadMoreRef.current = onLoadMore;
   // Latest queued steers, read by the pointer-drag move handler so it reorders
@@ -267,8 +265,7 @@ export const ChatView = ({
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const el = e.currentTarget;
-    const atBottom =
-      el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD_PX;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD_PX;
     // A scroll we caused (a pin) shouldn't change intent - only reconcile the
     // button state. A USER scroll sets intent: scrolling up unpins (stop
     // following); scrolling back to the bottom re-pins (resume following).
@@ -347,7 +344,6 @@ export const ChatView = ({
     });
   };
 
-
   const lastMessage = messages.at(-1);
   const lastEvents = lastMessage ? toolEventsByMessage[lastMessage.id] : undefined;
   // Single in-flight indicator for the whole turn: visible from the
@@ -360,8 +356,7 @@ export const ChatView = ({
   const lastAssistantHasContent =
     lastAssistantParts.some(
       (p) =>
-        (p.type === "text" || p.type === "reasoning") &&
-        Boolean((p as { text?: string }).text),
+        (p.type === "text" || p.type === "reasoning") && Boolean((p as { text?: string }).text),
     ) || (lastEvents?.length ?? 0) > 0;
   const hasRunningTool = (lastEvents ?? []).some((e) => e.status === "running");
   const showWaiting = isRunning;
@@ -491,48 +486,46 @@ export const ChatView = ({
        */}
       <div className={cn("flex h-full min-h-0", className)}>
         {showSidebar &&
-          (isMobile ? (
-            /*
-             * Mobile: a fixed overlay drawer with a tap-to-close backdrop, so
-             * the conversation list never eats horizontal space from the chat
-             * on a phone. Selecting a thread / starting a new one also closes
-             * the drawer so the transcript comes back into view. Session-only
-             * + default closed (see `mobileDrawerOpen`).
-             */
-            mobileDrawerOpen && (
-              <div className="fixed inset-0 z-40 flex">
-                <div
-                  className="absolute inset-0 bg-black/50"
-                  onClick={toggleSidebar}
-                  aria-hidden="true"
-                />
-                <ThreadSidebar
-                  {...sidebarProps}
-                  onSelect={(id) => {
-                    onSelectThread?.(id);
-                    toggleSidebar();
-                  }}
-                  {...(onNewThread
-                    ? {
-                        onNew: () => {
-                          onNewThread();
-                          toggleSidebar();
-                        },
-                      }
-                    : {})}
-                  className="relative z-10 w-[85vw] max-w-xs shadow-xl"
-                />
-              </div>
-            )
-          ) : (
-            /*
-             * Desktop: an inline flex child sharing the row with the chat
-             * column, using the persisted open/hide preference. Same
-             * `sidebarProps` as mobile - only the framing + close-on-select
-             * differ.
-             */
-            desktopSidebarOpen && <ThreadSidebar {...sidebarProps} />
-          ))}
+          (isMobile
+            ? /*
+               * Mobile: a fixed overlay drawer with a tap-to-close backdrop, so
+               * the conversation list never eats horizontal space from the chat
+               * on a phone. Selecting a thread / starting a new one also closes
+               * the drawer so the transcript comes back into view. Session-only
+               * + default closed (see `mobileDrawerOpen`).
+               */
+              mobileDrawerOpen && (
+                <div className="fixed inset-0 z-40 flex">
+                  <div
+                    className="absolute inset-0 bg-black/50"
+                    onClick={toggleSidebar}
+                    aria-hidden="true"
+                  />
+                  <ThreadSidebar
+                    {...sidebarProps}
+                    onSelect={(id) => {
+                      onSelectThread?.(id);
+                      toggleSidebar();
+                    }}
+                    {...(onNewThread
+                      ? {
+                          onNew: () => {
+                            onNewThread();
+                            toggleSidebar();
+                          },
+                        }
+                      : {})}
+                    className="relative z-10 w-[85vw] max-w-xs shadow-xl"
+                  />
+                </div>
+              )
+            : /*
+               * Desktop: an inline flex child sharing the row with the chat
+               * column, using the persisted open/hide preference. Same
+               * `sidebarProps` as mobile - only the framing + close-on-select
+               * differ.
+               */
+              desktopSidebarOpen && <ThreadSidebar {...sidebarProps} />)}
         <div className="flex h-full min-w-0 flex-1 flex-col">
           {showHeader && (
             /*
@@ -594,9 +587,7 @@ export const ChatView = ({
                     <div className="flex items-center justify-center gap-2 py-1 text-xs text-muted-foreground">
                       <Spinner className="size-3" />
                       <span>
-                        {isLoadingHistory
-                          ? "Loading history..."
-                          : "Loading older messages..."}
+                        {isLoadingHistory ? "Loading history..." : "Loading older messages..."}
                       </span>
                     </div>
                   )}
@@ -621,12 +612,10 @@ export const ChatView = ({
                             : {})}
                           {...(onFeedback && feedbackByMessage[message.id]
                             ? {
-                                onFeedback: (submission) =>
-                                  onFeedback(message, submission),
+                                onFeedback: (submission) => onFeedback(message, submission),
                                 ...(feedbackByMessage[message.id]?.value
                                   ? {
-                                      feedbackValue:
-                                        feedbackByMessage[message.id]!.value,
+                                      feedbackValue: feedbackByMessage[message.id]!.value,
                                     }
                                   : {}),
                               }
@@ -705,93 +694,93 @@ export const ChatView = ({
                 {queuedSteers.map((steer) => {
                   const reorderable = Boolean(onReorderSteers);
                   return (
-                  <div
-                    key={steer.id}
-                    ref={(el) => {
-                      if (el) steerChipRefs.current.set(steer.id, el);
-                      else steerChipRefs.current.delete(steer.id);
-                    }}
-                    className={cn(
-                      "flex items-center gap-1.5 rounded-lg border border-border/70 bg-muted/40 px-2 py-1 text-xs",
-                      draggingSteerId === steer.id && "opacity-50",
-                    )}
-                  >
-                    {reorderable && (
-                      // Drag handle. Pointer Events (not native HTML5 drag) so
-                      // it works on touch: `touch-none` (touch-action: none)
-                      // stops the browser treating the drag as a scroll, and
-                      // pointer capture keeps move/up events flowing to the grip
-                      // even as the finger slides over sibling chips. The active
-                      // id lives in a ref (`draggingIdRef`) so the first
-                      // pointermove isn't dropped waiting for a state re-render.
-                      // `-m-1 p-1` enlarges the tap target to ~28px without
-                      // widening the visible grip - a 12px icon is too small to
-                      // reliably grab on touch.
-                      <span
-                        role="button"
-                        tabIndex={-1}
-                        aria-label="Drag to reorder"
-                        className="-m-1 shrink-0 cursor-grab touch-none p-1 text-muted-foreground active:cursor-grabbing"
-                        onPointerDown={(e) => {
-                          e.preventDefault();
-                          e.currentTarget.setPointerCapture(e.pointerId);
-                          draggingIdRef.current = steer.id;
-                          setDraggingSteerId(steer.id);
-                        }}
-                        onPointerMove={(e) => {
-                          if (draggingIdRef.current !== steer.id) return;
-                          reorderSteersByPointer(steer.id, e.clientY);
-                        }}
-                        onPointerUp={(e) => {
-                          e.currentTarget.releasePointerCapture(e.pointerId);
-                          draggingIdRef.current = null;
-                          setDraggingSteerId(null);
-                        }}
-                        onPointerCancel={() => {
-                          draggingIdRef.current = null;
-                          setDraggingSteerId(null);
-                        }}
-                      >
-                        <GripVerticalIcon className="size-3" aria-hidden="true" />
-                      </span>
-                    )}
-                    <span className="text-muted-foreground">Queued</span>
-                    <span className="min-w-0 flex-1 truncate">{steer.text}</span>
-                    {onSendSteerNow && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-6 shrink-0"
-                            onClick={() => onSendSteerNow(steer.id)}
-                            aria-label="Send now (interrupts current turn)"
-                          >
-                            <SendHorizontalIcon className="size-3" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>Send now — interrupts</TooltipContent>
-                      </Tooltip>
-                    )}
-                    {onRemoveSteer && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-6 shrink-0"
-                            onClick={() => onRemoveSteer(steer.id)}
-                            aria-label="Remove queued message"
-                          >
-                            <XIcon className="size-3" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>Remove</TooltipContent>
-                      </Tooltip>
-                    )}
-                  </div>
+                    <div
+                      key={steer.id}
+                      ref={(el) => {
+                        if (el) steerChipRefs.current.set(steer.id, el);
+                        else steerChipRefs.current.delete(steer.id);
+                      }}
+                      className={cn(
+                        "flex items-center gap-1.5 rounded-lg border border-border/70 bg-muted/40 px-2 py-1 text-xs",
+                        draggingSteerId === steer.id && "opacity-50",
+                      )}
+                    >
+                      {reorderable && (
+                        // Drag handle. Pointer Events (not native HTML5 drag) so
+                        // it works on touch: `touch-none` (touch-action: none)
+                        // stops the browser treating the drag as a scroll, and
+                        // pointer capture keeps move/up events flowing to the grip
+                        // even as the finger slides over sibling chips. The active
+                        // id lives in a ref (`draggingIdRef`) so the first
+                        // pointermove isn't dropped waiting for a state re-render.
+                        // `-m-1 p-1` enlarges the tap target to ~28px without
+                        // widening the visible grip - a 12px icon is too small to
+                        // reliably grab on touch.
+                        <span
+                          role="button"
+                          tabIndex={-1}
+                          aria-label="Drag to reorder"
+                          className="-m-1 shrink-0 cursor-grab touch-none p-1 text-muted-foreground active:cursor-grabbing"
+                          onPointerDown={(e) => {
+                            e.preventDefault();
+                            e.currentTarget.setPointerCapture(e.pointerId);
+                            draggingIdRef.current = steer.id;
+                            setDraggingSteerId(steer.id);
+                          }}
+                          onPointerMove={(e) => {
+                            if (draggingIdRef.current !== steer.id) return;
+                            reorderSteersByPointer(steer.id, e.clientY);
+                          }}
+                          onPointerUp={(e) => {
+                            e.currentTarget.releasePointerCapture(e.pointerId);
+                            draggingIdRef.current = null;
+                            setDraggingSteerId(null);
+                          }}
+                          onPointerCancel={() => {
+                            draggingIdRef.current = null;
+                            setDraggingSteerId(null);
+                          }}
+                        >
+                          <GripVerticalIcon className="size-3" aria-hidden="true" />
+                        </span>
+                      )}
+                      <span className="text-muted-foreground">Queued</span>
+                      <span className="min-w-0 flex-1 truncate">{steer.text}</span>
+                      {onSendSteerNow && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-6 shrink-0"
+                              onClick={() => onSendSteerNow(steer.id)}
+                              aria-label="Send now (interrupts current turn)"
+                            >
+                              <SendHorizontalIcon className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>Send now — interrupts</TooltipContent>
+                        </Tooltip>
+                      )}
+                      {onRemoveSteer && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-6 shrink-0"
+                              onClick={() => onRemoveSteer(steer.id)}
+                              aria-label="Remove queued message"
+                            >
+                              <XIcon className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>Remove</TooltipContent>
+                        </Tooltip>
+                      )}
+                    </div>
                   );
                 })}
               </div>
@@ -850,9 +839,7 @@ export const ChatView = ({
                   (modelChangeable ? (
                     <Select
                       value={model ? model : DEFAULT_MODEL_VALUE}
-                      onValueChange={(v) =>
-                        onModelChange?.(v === DEFAULT_MODEL_VALUE ? "" : v)
-                      }
+                      onValueChange={(v) => onModelChange?.(v === DEFAULT_MODEL_VALUE ? "" : v)}
                     >
                       <SelectTrigger
                         size="sm"
@@ -861,9 +848,7 @@ export const ChatView = ({
                         <SelectValue placeholder={defaultOptionLabel} />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value={DEFAULT_MODEL_VALUE}>
-                          {defaultOptionLabel}
-                        </SelectItem>
+                        <SelectItem value={DEFAULT_MODEL_VALUE}>{defaultOptionLabel}</SelectItem>
                         {sortedModels.map((m) => (
                           <SelectItem key={m.name} value={m.name}>
                             {m.displayName || m.name}

package/src/react/data-grid.tsx

@@ -1,3 +1,4 @@
+import { string } from "@dbx-tools/shared-core";
 import {
   Button,
   DropdownMenu,
@@ -12,7 +13,6 @@ import {
   TableRow,
   cn,
 } from "@dbx-tools/ui-appkit/react";
-import { string } from "@dbx-tools/shared-core";
 import {
   flexRender,
   getCoreRowModel,
@@ -56,8 +56,9 @@ export function colorizeDelta(content: React.ReactNode): React.ReactNode {
   if (!match) return content;
   const sign = match[1];
   if (sign === "+") return <span className="font-medium text-success">{content}</span>;
-  if (sign === "-" || sign === "\u2212")
+  if (sign === "-" || sign === "\u2212") {
     return <span className="font-medium text-destructive">{content}</span>;
+  }
   return content;
 }
 
@@ -80,10 +81,7 @@ export function renderDataCell(value: unknown): React.ReactNode {
  * column id, accessor key, and CSV header, so only the on-screen label
  * is prettified.
  */
-export function humanizeLabel(
-  value: string,
-  options?: string.TokenizeOptions,
-): string {
+export function humanizeLabel(value: string, options?: string.TokenizeOptions): string {
   return string.toLabel(value, options);
 }
 
@@ -275,12 +273,7 @@ export const DataGrid = ({
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-7 gap-1 px-2 text-xs"
-            onClick={exportCsv}
-          >
+          <Button variant="ghost" size="sm" className="h-7 gap-1 px-2 text-xs" onClick={exportCsv}>
             <DownloadIcon className="size-3.5" />
             Export
           </Button>
@@ -300,10 +293,7 @@ export const DataGrid = ({
                         className="inline-flex items-center gap-1 hover:text-foreground"
                         onClick={header.column.getToggleSortingHandler()}
                       >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
+                        {flexRender(header.column.columnDef.header, header.getContext())}
                         {sorted === "asc" ? (
                           <ArrowUpIcon className="size-3" />
                         ) : sorted === "desc" ? (

package/src/react/embed-slots.tsx

@@ -1,15 +1,12 @@
+import { marker as markers, type ParsedMarker } from "@dbx-tools/shared-mastra";
 import { Spinner } from "@dbx-tools/ui-appkit/react";
-import {
-  marker as markers,
-  type ParsedMarker,
-} from "@dbx-tools/shared-mastra";
 import ReactECharts from "echarts-for-react";
 import { ClockIcon } from "lucide-react";
 import { useMemo } from "react";
-import { normalizeChartOption } from "../support/chart-option";
-import { useChartFetch, useStatementFetch } from "../support/mastra-client";
 import { DataGrid, humanizeLabel } from "./data-grid";
 import { AssistantMarkdown } from "./markdown";
+import { normalizeChartOption } from "../support/chart-option";
+import { useChartFetch, useStatementFetch } from "../support/mastra-client";
 
 // Inline embed slots: chart / data tables resolved from `[chart:<id>]`
 // and `[data:<id>]` markers in the assistant's prose, plus the splitter
@@ -43,8 +40,7 @@ const ExpiredSlot = ({ type }: { type: string }) => (
   <div className="not-prose my-3 inline-flex items-center gap-2 rounded-md border border-dashed border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground">
     <ClockIcon className="size-3.5 shrink-0" />
     <span>
-      This {humanizeLabel(type, { capitalize: false })} has expired and is no longer
-      available.
+      This {humanizeLabel(type, { capitalize: false })} has expired and is no longer available.
     </span>
   </div>
 );
@@ -249,9 +245,7 @@ export const MarkdownWithEmbeds = ({
         if (seg.kind === "chart") {
           return <ChartSlot key={`c-${i}-${seg.chartId}`} chartId={seg.chartId} />;
         }
-        return (
-          <DataSlot key={`d-${i}-${seg.statementId}`} statementId={seg.statementId} />
-        );
+        return <DataSlot key={`d-${i}-${seg.statementId}`} statementId={seg.statementId} />;
       })}
     </>
   );

package/src/react/feedback-controls.tsx

@@ -114,12 +114,7 @@ export const FeedbackControls = ({
               autoFocus
             />
             <div className="flex justify-end gap-2">
-              <Button
-                type="button"
-                size="sm"
-                variant="ghost"
-                onClick={() => setOpen(false)}
-              >
+              <Button type="button" size="sm" variant="ghost" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
               <Button

package/src/react/markdown.tsx

@@ -16,13 +16,8 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { format as formatSql } from "sql-formatter";
 import { Streamdown } from "streamdown";
+import { DataGrid, TABLE_WRAPPER_CLASSES, colorizeDelta, type DataRow } from "./data-grid";
 import { createShikiPlugin, highlightToHtml } from "../support/shiki-plugin";
-import {
-  DataGrid,
-  TABLE_WRAPPER_CLASSES,
-  colorizeDelta,
-  type DataRow,
-} from "./data-grid";
 
 // Markdown rendering for the chat: the streaming `Streamdown` engine
 // wired with shiki highlighting and AppKit table primitives, plus the
@@ -62,9 +57,7 @@ function markdownTableData(
   if (!node || node.tagName !== "table") return null;
   const sections = node.children ?? [];
   const sectionRows = (tag: string): MarkdownNode[] =>
-    sections
-      .find((s) => s.tagName === tag)
-      ?.children?.filter((r) => r.tagName === "tr") ?? [];
+    sections.find((s) => s.tagName === tag)?.children?.filter((r) => r.tagName === "tr") ?? [];
 
   const headerCells = (sectionRows("thead")[0]?.children ?? []).filter(
     (c) => c.tagName === "th" || c.tagName === "td",
@@ -82,9 +75,7 @@ function markdownTableData(
   }
 
   const rows: DataRow[] = sectionRows("tbody").map((tr) => {
-    const cells = (tr.children ?? []).filter(
-      (c) => c.tagName === "td" || c.tagName === "th",
-    );
+    const cells = (tr.children ?? []).filter((c) => c.tagName === "td" || c.tagName === "th");
     const row: DataRow = {};
     columns.forEach((col, i) => {
       const cell = cells[i];
@@ -102,10 +93,7 @@ function markdownTableData(
  * renderer tool-detail copy uses unconditionally (a sort/column/export
  * toolbar would dwarf the tiny inline pills it renders in).
  */
-const plainMarkdownTable = ({
-  children,
-  ...rest
-}: React.HTMLAttributes<HTMLTableElement>) => (
+const plainMarkdownTable = ({ children, ...rest }: React.HTMLAttributes<HTMLTableElement>) => (
   <div className={TABLE_WRAPPER_CLASSES}>
     <Table {...rest}>{children}</Table>
   </div>
@@ -139,9 +127,7 @@ const MARKDOWN_TABLE_PARTS = {
   ),
   td: ({ children, ...rest }: React.HTMLAttributes<HTMLTableCellElement>) => {
     const colored = Array.isArray(children)
-      ? children.map((c, i) => (
-          <React.Fragment key={i}>{colorizeDelta(c)}</React.Fragment>
-        ))
+      ? children.map((c, i) => <React.Fragment key={i}>{colorizeDelta(c)}</React.Fragment>)
       : colorizeDelta(children as React.ReactNode);
     return <TableCell {...rest}>{colored}</TableCell>;
   },