Merge remote-tracking branch 'origin/master' into mergebot/pr908

# Conflicts:
#	packages/client/ui-conversation/README.i18n.yaml
#	packages/client/ui-trajectory/src/client/views.module.css

packages/client/ui-primitives/src/JsonTree.module.css

@@ -0,0 +1,222 @@
+.root {
+  --json-tree-property: #881391;
+  --json-tree-string: #c41a16;
+  --json-tree-number: #1c00cf;
+  --json-tree-keyword: #1c00cf;
+  --json-tree-punctuation: #202124;
+  --json-tree-icon: #5f6368;
+  --json-tree-hover: rgb(60 64 67 / 4%);
+
+  min-width: 0;
+  overflow: auto;
+  position: relative;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  font: 12px/16px var(--ds-font-family-code);
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
+}
+
+:global(body[data-ds-dark-theme]) .root {
+  --json-tree-property: #5db0d7;
+  --json-tree-string: #f28b82;
+  --json-tree-number: #99c8ff;
+  --json-tree-keyword: #99c8ff;
+  --json-tree-punctuation: #e8eaed;
+  --json-tree-icon: #9aa0a6;
+  --json-tree-hover: rgb(232 234 237 / 5%);
+}
+
+.container {
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+  padding: 6px 8px 8px;
+  white-space: pre;
+}
+
+.expandedTopLevel {
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  padding: 6px 8px 8px 14px;
+}
+
+.expandedTopLevel:has(> .topLevelBracket[data-json-root-row]:hover),
+.expandedTopLevel:has(> .topLevelBracket[data-json-root-row][data-json-copy-active]) {
+  background: var(--json-tree-hover);
+}
+
+.expandedTopLevelContainer {
+  padding: 0;
+}
+
+.row.topLevelBracket {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 100%;
+  min-height: 16px;
+  margin: 0;
+  padding: 0 0 0 10px;
+  list-style: none;
+}
+
+.row:not(.topLevelBracket):hover:not(:has(.row:hover))::after,
+.row:not(.topLevelBracket)[data-json-copy-active]::after,
+.row:has(> .expander:focus-visible)::after {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 16px;
+  background: var(--json-tree-hover);
+  content: '';
+  pointer-events: none;
+}
+
+.row > span:not(.expander) {
+  position: relative;
+  z-index: 1;
+}
+
+.label {
+  margin-right: 3px;
+  color: var(--json-tree-property);
+  font-weight: 400;
+}
+
+.clickableLabel {
+  cursor: pointer;
+}
+
+.stringValue {
+  color: var(--json-tree-string);
+}
+
+.numberValue {
+  color: var(--json-tree-number);
+}
+
+.keywordValue {
+  color: var(--json-tree-keyword);
+}
+
+.otherValue {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.punctuation {
+  color: var(--json-tree-punctuation);
+}
+
+.preview {
+  color: var(--json-tree-punctuation);
+}
+
+.previewProperty {
+  color: var(--json-tree-punctuation);
+}
+
+.previewEllipsis {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.copyAnchor {
+  position: fixed;
+  z-index: 3;
+  display: inline-flex;
+}
+
+.copyButton {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: -5px 0 5px var(--dsw-alias-bg-layer-1);
+  cursor: pointer;
+}
+
+.copyButton:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.copyButton:focus-visible {
+  outline: 1px solid var(--dsw-alias-state-business-primary);
+  outline-offset: -1px;
+}
+
+.copyButton[data-state='failed'] {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.expander {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  width: 8px;
+  height: 16px;
+  margin: 0;
+  color: var(--json-tree-icon);
+  cursor: pointer;
+  user-select: none;
+}
+
+.expander::before {
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 6px solid currentColor;
+  content: '';
+  transform: scale(0.75);
+  transform-origin: 33.333% center;
+}
+
+.collapseIcon::before {
+  transform: rotate(90deg) scale(0.75);
+}
+
+.expander:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.expander:focus-visible {
+  outline: none;
+}
+
+.collapsedContent {
+  margin: 0 1px;
+  color: var(--json-tree-punctuation);
+  cursor: pointer;
+}
+
+.collapsedContent::after {
+  content: '…';
+}

packages/client/ui-primitives/src/JsonTree.tsx

@@ -0,0 +1,602 @@
+import clsx from 'clsx'
+import { useEffect, useId, useRef, useState } from 'react'
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+  UIEvent as ReactUIEvent,
+} from 'react'
+import { IconCheckOutline16, IconCopyOutline16 } from './icons/index.tsx'
+import { Menu } from './Menu.tsx'
+import type { MenuEntry } from './Menu.tsx'
+import css from './JsonTree.module.css'
+
+const OBJECT_PREVIEW_LIMIT = 4
+const ARRAY_PREVIEW_LIMIT = 5
+const PREVIEW_DEPTH_LIMIT = 2
+const VALUE_COPY_MENU_ITEMS: readonly MenuEntry[] = [
+  { id: 'value', label: 'Copy value' },
+  { id: 'json', label: 'Copy JSON' },
+  { id: 'path', label: 'Copy property path' },
+]
+const OBJECT_COPY_MENU_ITEMS: readonly MenuEntry[] = [
+  { id: 'prettyJson', label: 'Copy pretty JSON' },
+  { id: 'json', label: 'Copy compact JSON' },
+  { id: 'path', label: 'Copy property path' },
+]
+
+type JsonPath = readonly (number | string)[]
+
+interface RowTarget {
+  path: JsonPath
+  value: unknown
+}
+
+interface CopyTarget extends RowTarget {
+  left: number
+  side: 'bottom' | 'top'
+  top: number
+}
+
+function isExpandableValue(value: unknown): value is object | unknown[] {
+  return typeof value === 'object' && value !== null && !(value instanceof Date)
+}
+
+function entriesOf(value: object | unknown[]): readonly (readonly [string, unknown])[] {
+  if (Array.isArray(value)) {
+    return value.map((item, index) => [String(index), item] as const)
+  }
+  return Object.keys(value).map(key => [
+    key,
+    (value as Record<string, unknown>)[key],
+  ] as const)
+}
+
+function bracketOf(value: object | unknown[]): readonly [string, string] {
+  return Array.isArray(value) ? ['[', ']'] : ['{', '}']
+}
+
+function previewPrimitive(value: unknown): ReactNode {
+  if (value === null) return <span className={css.keywordValue}>null</span>
+  if (typeof value === 'string') {
+    return <span className={css.stringValue}>{JSON.stringify(value)}</span>
+  }
+  if (typeof value === 'number') {
+    return <span className={css.numberValue}>{String(value)}</span>
+  }
+  if (typeof value === 'boolean') {
+    return <span className={css.keywordValue}>{String(value)}</span>
+  }
+  if (typeof value === 'bigint') {
+    return <span className={css.otherValue}>{value.toString()}</span>
+  }
+  if (typeof value === 'undefined') {
+    return <span className={css.otherValue}>undefined</span>
+  }
+  if (typeof value === 'symbol') {
+    return <span className={css.otherValue}>{value.description ?? 'Symbol'}</span>
+  }
+  if (typeof value === 'function') {
+    return <span className={css.otherValue}>{value.name || 'Function'}</span>
+  }
+  return null
+}
+
+function previewValue(value: unknown, depth: number): ReactNode {
+  if (!isExpandableValue(value)) return previewPrimitive(value)
+
+  const array = Array.isArray(value)
+  const entries = entriesOf(value)
+  const limit = array ? ARRAY_PREVIEW_LIMIT : OBJECT_PREVIEW_LIMIT
+  const visible = entries.slice(0, limit)
+  const [open, close] = bracketOf(value)
+
+  return (
+    <>
+      <span className={css.punctuation}>{open}</span>
+      {depth >= PREVIEW_DEPTH_LIMIT
+        ? <span className={css.previewEllipsis}>…</span>
+        : visible.map(([key, item], index) => (
+          <span key={key}>
+            {index > 0 && <span className={css.punctuation}>, </span>}
+            {!array && (
+              <>
+                <span className={css.previewProperty}>{key}</span>
+                <span className={css.punctuation}>: </span>
+              </>
+            )}
+            {previewValue(item, depth + 1)}
+          </span>
+        ))}
+      {depth < PREVIEW_DEPTH_LIMIT && entries.length > limit && (
+        <span className={css.previewEllipsis}>, …</span>
+      )}
+      <span className={css.punctuation}>{close}</span>
+    </>
+  )
+}
+
+function primitiveValue(value: unknown): ReactNode {
+  if (value === null) return <span className={css.keywordValue}>null</span>
+  if (typeof value === 'string') {
+    return <span className={css.stringValue}>{JSON.stringify(value)}</span>
+  }
+  if (typeof value === 'boolean') {
+    return <span className={css.keywordValue}>{String(value)}</span>
+  }
+  if (typeof value === 'number') {
+    return <span className={css.numberValue}>{String(value)}</span>
+  }
+  if (typeof value === 'bigint') {
+    return <span className={css.numberValue}>{`${value.toString()}n`}</span>
+  }
+  if (value instanceof Date) {
+    return <span className={css.otherValue}>{value.toISOString()}</span>
+  }
+  if (typeof value === 'function') {
+    return <span className={css.otherValue}>function() {'{ }'}</span>
+  }
+  if (typeof value === 'undefined') {
+    return <span className={css.otherValue}>undefined</span>
+  }
+  return <span className={css.otherValue}>{(value as symbol).toString()}</span>
+}
+
+function fieldText(field: string): string {
+  return field === '' ? '""' : field
+}
+
+function pathId(path: JsonPath): string {
+  return path.map(part => (
+    typeof part === 'number' ? `n${String(part)}` : `s${String(part.length)}:${part}`
+  )).join('/')
+}
+
+function claimFocus(button: HTMLElement): void {
+  button.focus()
+}
+
+function moveFocus(button: HTMLElement, direction: -1 | 1): void {
+  const tree = button.closest<HTMLElement>('[role="tree"]')
+  /* v8 ignore next -- JsonTree attaches expander handlers only beneath its owning role=tree. */
+  if (tree === null) return
+  const expanders = Array.from(tree.querySelectorAll<HTMLElement>('[data-json-expander]'))
+  const current = expanders.indexOf(button)
+  /* v8 ignore next -- the current expander is a member of the queried non-empty set. */
+  if (current < 0 || expanders.length === 0) return
+  const next = (current + direction + expanders.length) % expanders.length
+  const nextExpander = expanders[next]
+  /* v8 ignore next -- modulo over the non-empty expander set always resolves a member. */
+  if (nextExpander !== undefined) claimFocus(nextExpander)
+}
+
+function NodeField({
+  field,
+  expandable,
+  onToggle,
+}: {
+  field: string | undefined
+  expandable: boolean
+  onToggle: () => void
+}) {
+  if (field === undefined) return null
+  return (
+    <span
+      className={clsx(css.label, expandable && css.clickableLabel)}
+      onClick={expandable ? onToggle : undefined}
+    >
+      {fieldText(field)}:
+    </span>
+  )
+}
+
+interface JsonTreeNodeProps {
+  field?: string
+  initialExpanded: boolean
+  lastElement: boolean
+  onClaimTabStop: (id: string) => void
+  onRowHover: (row: HTMLElement, target: RowTarget) => void
+  path: JsonPath
+  tabStopId: string | null
+  value: unknown
+}
+
+function JsonTreeNode({
+  field,
+  initialExpanded,
+  lastElement,
+  onClaimTabStop,
+  onRowHover,
+  path,
+  tabStopId,
+  value,
+}: JsonTreeNodeProps) {
+  const contentsId = useId()
+  const expanderRef = useRef<HTMLSpanElement>(null)
+  const [expanded, setExpanded] = useState(initialExpanded)
+  const nodeId = pathId(path)
+  const container = isExpandableValue(value)
+  const entries = container ? entriesOf(value) : []
+  const expandable = entries.length > 0
+
+  const toggle = () => {
+    setExpanded(current => !current)
+    claimFocus(expanderRef.current as HTMLSpanElement)
+  }
+
+  const onExpanderKeyDown = (event: ReactKeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      setExpanded(event.key === 'ArrowRight')
+      return
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveFocus(event.currentTarget, event.key === 'ArrowUp' ? -1 : 1)
+    }
+  }
+
+  const row = (children: ReactNode, ariaExpanded?: boolean) => (
+    <div
+      className={css.row}
+      role="treeitem"
+      aria-expanded={ariaExpanded}
+      onMouseOver={(event) => {
+        event.stopPropagation()
+        onRowHover(event.currentTarget, { path, value })
+      }}
+    >
+      {children}
+    </div>
+  )
+
+  if (!container) {
+    return row((
+      <>
+        <NodeField field={field} expandable={false} onToggle={toggle} />
+        {primitiveValue(value)}
+        {!lastElement && <span className={css.punctuation}>,</span>}
+      </>
+    ))
+  }
+
+  const [open, close] = bracketOf(value)
+  if (!expandable) {
+    return row((
+      <>
+        <NodeField field={field} expandable={false} onToggle={toggle} />
+        <span className={css.punctuation}>{open}</span>
+        <span className={css.punctuation}>{close}</span>
+        {!lastElement && <span className={css.punctuation}>,</span>}
+      </>
+    ))
+  }
+
+  return row((
+    <>
+      <span
+        ref={expanderRef}
+        className={clsx(css.expander, expanded ? css.collapseIcon : css.expandIcon)}
+        data-json-expander
+        role="button"
+        aria-label={expanded ? 'Collapse JSON node' : 'Expand JSON node'}
+        aria-expanded={expanded}
+        aria-controls={expanded ? contentsId : undefined}
+        tabIndex={tabStopId === nodeId ? 0 : -1}
+        onFocus={() => { onClaimTabStop(nodeId) }}
+        onClick={toggle}
+        onKeyDown={onExpanderKeyDown}
+      />
+      <NodeField field={field} expandable onToggle={toggle} />
+      <span className={css.preview}>{previewValue(value, 0)}</span>
+      {!lastElement && <span className={css.punctuation}>,</span>}
+      {expanded && (
+        <ul id={contentsId} role="group" className={css.children}>
+          {entries.map(([key, item], index) => (
+            <JsonTreeNode
+              key={key}
+              field={key}
+              value={item}
+              path={[...path, Array.isArray(value) ? index : key]}
+              lastElement={index === entries.length - 1}
+              initialExpanded={false}
+              tabStopId={tabStopId}
+              onClaimTabStop={onClaimTabStop}
+              onRowHover={onRowHover}
+            />
+          ))}
+        </ul>
+      )}
+    </>
+  ), expanded)
+}
+
+function formattedPath(path: JsonPath): string {
+  return path.reduce<string>((result, part) => {
+    if (typeof part === 'number') return `${result}[${String(part)}]`
+    return /^[A-Za-z_$][\w$]*$/.test(part)
+      ? `${result}.${part}`
+      : `${result}[${JSON.stringify(part)}]`
+  }, '$')
+}
+
+function copyText(target: CopyTarget, mode: 'json' | 'path' | 'prettyJson' | 'value'): string {
+  if (mode === 'path') return formattedPath(target.path)
+  if (mode === 'prettyJson') return JSON.stringify(target.value, null, 2)
+  if (mode === 'json') return JSON.stringify(target.value)
+  if (typeof target.value === 'string') return target.value
+  if (typeof target.value === 'undefined') return 'undefined'
+  if (typeof target.value === 'bigint') return target.value.toString()
+  if (typeof target.value === 'symbol') return target.value.description ?? 'Symbol'
+  if (typeof target.value === 'function') return target.value.name || 'Function'
+  return JSON.stringify(target.value)
+}
+
+/** Props for the read-only, token-themed JSON tree. */
+export interface JsonTreeProps {
+  /** Parsed JSON object or array. */
+  data: object | unknown[]
+  /** Accessible label for the tree. */
+  label?: string
+  /** Optional positioning class owned by the caller. */
+  className?: string | undefined
+  /** Whether JSON rows expose copy actions. */
+  copyable?: boolean
+  /** Whether the top-level object or array is always expanded. */
+  expandTopLevel?: boolean
+}
+
+/**
+ * Render parsed JSON as a compact, keyboard-accessible inspector tree.
+ * @param props - Parsed data, accessible label, and display options.
+ * @returns A read-only JSON tree with an optionally fixed-open top level.
+ */
+export function JsonTree({
+  data,
+  label = 'JSON',
+  className,
+  copyable = true,
+  expandTopLevel = true,
+}: JsonTreeProps) {
+  const rootEntries = entriesOf(data)
+  const firstExpandableIndex = rootEntries.findIndex(([, value]) => (
+    isExpandableValue(value) && entriesOf(value).length > 0
+  ))
+  const firstExpandableEntry = rootEntries[firstExpandableIndex]
+  const initialTabStopId = expandTopLevel
+    ? firstExpandableEntry === undefined
+      ? null
+      : pathId([Array.isArray(data) ? firstExpandableIndex : firstExpandableEntry[0]])
+    : isExpandableValue(data) && rootEntries.length > 0 ? pathId([]) : null
+  const rootRef = useRef<HTMLDivElement>(null)
+  const activeRowRef = useRef<HTMLElement>()
+  const copyButtonRef = useRef<HTMLButtonElement>(null)
+  const copyMenuOpenRef = useRef(false)
+  const resetTimer = useRef<ReturnType<typeof setTimeout>>()
+  const [copyTarget, setCopyTarget] = useState<CopyTarget>()
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle')
+  const [copyMenuOpen, setCopyMenuOpen] = useState(false)
+  const [tabStopId, setTabStopId] = useState<string | null>(initialTabStopId)
+
+  const setActiveRow = (row: HTMLElement | undefined) => {
+    activeRowRef.current?.removeAttribute('data-json-copy-active')
+    activeRowRef.current = row
+    row?.setAttribute('data-json-copy-active', '')
+  }
+
+  const clearCopyTarget = () => {
+    setActiveRow(undefined)
+    setCopyTarget(undefined)
+    setCopyState('idle')
+    copyMenuOpenRef.current = false
+    setCopyMenuOpen(false)
+  }
+
+  const copyPosition = (row: HTMLElement): Pick<CopyTarget, 'left' | 'side' | 'top'> => {
+    const root = rootRef.current
+    /* v8 ignore next -- row events and viewport listeners run only after the root ref mounts. */
+    if (root === null) throw new Error('JsonTree root is not mounted')
+    const rootRect = root.getBoundingClientRect()
+    const rowRect = row.getBoundingClientRect()
+    return {
+      left: rootRect.left + root.clientWidth - 26,
+      side: rowRect.top - rootRect.top > root.clientHeight / 2 ? 'top' : 'bottom',
+      top: rowRect.top,
+    }
+  }
+
+  const positionCopyButton = (row: HTMLElement, target: RowTarget) => {
+    const position = copyPosition(row)
+    setCopyTarget({ ...target, ...position })
+  }
+
+  const repositionCopyButton = (row: HTMLElement) => {
+    const position = copyPosition(row)
+    setCopyTarget((current) => {
+      /* v8 ignore next -- an active row and its copy target are installed together. */
+      if (current === undefined) return current
+      return { ...current, ...position }
+    })
+  }
+
+  useEffect(() => () => {
+    if (resetTimer.current !== undefined) clearTimeout(resetTimer.current)
+    activeRowRef.current?.removeAttribute('data-json-copy-active')
+  }, [])
+
+  useEffect(() => {
+    activeRowRef.current?.removeAttribute('data-json-copy-active')
+    activeRowRef.current = undefined
+    copyMenuOpenRef.current = false
+    setCopyTarget(undefined)
+    setCopyState('idle')
+    setCopyMenuOpen(false)
+    setTabStopId(initialTabStopId)
+  }, [data, expandTopLevel, initialTabStopId])
+
+  useEffect(() => {
+    const reposition = () => {
+      const row = activeRowRef.current
+      if (row !== undefined) repositionCopyButton(row)
+    }
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+    }
+  }, [])
+
+  const handleRowHover = (row: HTMLElement, target: RowTarget) => {
+    if (!copyable || copyMenuOpenRef.current) return
+    if (activeRowRef.current === row) return
+    setActiveRow(row)
+    setCopyState('idle')
+    copyMenuOpenRef.current = false
+    setCopyMenuOpen(false)
+    positionCopyButton(row, target)
+  }
+
+  const handleRootMouseOver = (event: ReactMouseEvent<HTMLDivElement>) => {
+    if (!copyable || copyMenuOpenRef.current) return
+    /* v8 ignore next -- browser mouse events delivered through React target an Element. */
+    if (!(event.target instanceof Element)) return
+    if (event.target.closest('[data-json-copy-button]') === null) clearCopyTarget()
+  }
+
+  const handleScroll = (_event: ReactUIEvent<HTMLDivElement>) => {
+    const row = activeRowRef.current
+    if (row !== undefined) repositionCopyButton(row)
+  }
+
+  const copy = async (mode: 'json' | 'path' | 'prettyJson' | 'value') => {
+    /* v8 ignore next -- copy controls only render while their target exists. */
+    if (copyTarget === undefined) return
+    try {
+      await navigator.clipboard.writeText(copyText(copyTarget, mode))
+      setCopyState('copied')
+    } catch {
+      setCopyState('failed')
+    }
+    if (resetTimer.current !== undefined) clearTimeout(resetTimer.current)
+    resetTimer.current = setTimeout(() => { setCopyState('idle') }, 1_500)
+  }
+
+  const [rootOpen, rootClose] = bracketOf(data)
+  const copyTargetIsObject = typeof copyTarget?.value === 'object' && copyTarget.value !== null
+  const defaultCopyMode = copyTargetIsObject ? 'prettyJson' : 'value'
+  const copyTitle = copyState === 'copied'
+    ? 'Copied'
+    : copyState === 'failed'
+      ? 'Copy failed'
+      : copyTargetIsObject ? 'Copy pretty JSON' : 'Copy value'
+
+  return (
+    <div
+      ref={rootRef}
+      className={clsx(css.root, className)}
+      onMouseOver={handleRootMouseOver}
+      onMouseLeave={() => {
+        if (!copyMenuOpenRef.current) clearCopyTarget()
+      }}
+      onScroll={handleScroll}
+    >
+      {expandTopLevel
+        ? (
+          <div className={css.expandedTopLevel}>
+            <div
+              className={clsx(css.row, css.topLevelBracket)}
+              data-json-root-row
+              onMouseOver={(event) => {
+                event.stopPropagation()
+                handleRowHover(event.currentTarget, { path: [], value: data })
+              }}
+            >
+              <span className={css.punctuation}>{rootOpen}</span>
+            </div>
+            <div
+              aria-label={label}
+              className={clsx(css.container, css.expandedTopLevelContainer)}
+              role="tree"
+            >
+              {rootEntries.map(([key, value], index) => (
+                <JsonTreeNode
+                  key={key}
+                  field={key}
+                  value={value}
+                  path={[Array.isArray(data) ? index : key]}
+                  lastElement={index === rootEntries.length - 1}
+                  initialExpanded={false}
+                  tabStopId={tabStopId}
+                  onClaimTabStop={setTabStopId}
+                  onRowHover={handleRowHover}
+                />
+              ))}
+            </div>
+            <div className={clsx(css.row, css.topLevelBracket)}>
+              <span className={css.punctuation}>{rootClose}</span>
+            </div>
+          </div>
+        )
+        : (
+          <div aria-label={label} className={css.container} role="tree">
+            <JsonTreeNode
+              value={data}
+              path={[]}
+              lastElement
+              initialExpanded
+              tabStopId={tabStopId}
+              onClaimTabStop={setTabStopId}
+              onRowHover={handleRowHover}
+            />
+          </div>
+        )}
+      {copyTarget !== undefined && (
+        <span
+          className={css.copyAnchor}
+          style={{ left: copyTarget.left, top: copyTarget.top }}
+        >
+          <Menu
+            open={copyMenuOpen}
+            compact
+            portal
+            align="end"
+            side={copyTarget.side}
+            anchor={(
+              <button
+                ref={copyButtonRef}
+                type="button"
+                className={css.copyButton}
+                data-json-copy-button
+                data-state={copyState}
+                aria-label={copyTitle}
+                title={`${copyTitle}; right-click for copy options`}
+                onClick={() => void copy(defaultCopyMode)}
+                onContextMenu={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  copyMenuOpenRef.current = true
+                  setCopyMenuOpen(true)
+                }}
+              >
+                {copyState === 'copied'
+                  ? <IconCheckOutline16 size={12} />
+                  : <IconCopyOutline16 size={12} />}
+              </button>
+            )}
+            items={copyTargetIsObject ? OBJECT_COPY_MENU_ITEMS : VALUE_COPY_MENU_ITEMS}
+            onSelect={(id) => {
+              void copy(id as 'json' | 'path' | 'prettyJson' | 'value')
+              copyMenuOpenRef.current = false
+              setCopyMenuOpen(false)
+            }}
+            onClose={clearCopyTarget}
+            getAnchorRect={() => (
+              copyButtonRef.current as HTMLButtonElement
+            ).getBoundingClientRect()}
+          />
+        </span>
+      )}
+    </div>
+  )
+}

packages/client/ui-primitives/src/Menu.module.css

@@ -115,6 +115,37 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
+.list.compactList,
+.submenu.compactList {
+  min-width: 164px;
+  padding: 2px;
+  border-radius: 7px;
+}
+
+.compactList .item {
+  min-height: 26px;
+  gap: 6px;
+  padding: 3px 7px;
+  border-radius: 5px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.compactList .itemIcon {
+  width: 14px;
+  height: 14px;
+}
+
+.compactList .separator {
+  margin: 2px;
+}
+
+.compactList .label {
+  padding: 4px 7px;
+  font-size: 11px;
+  line-height: 16px;
+}
+
 .item:disabled {
   opacity: 0.4;
   cursor: not-allowed;

packages/client/ui-primitives/src/Menu.tsx

@@ -71,6 +71,7 @@ const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
  * keeps the pure-CSS in-place behavior.
  * @param props.closeOnPointerLeave - close the list when the pointer leaves
  * it (default false keeps it open until outside click/Escape/selection).
+ * @param props.compact - use reduced menu typography and spacing.
  * @param props.getAnchorRect - portal mode only: supply the anchor rect
  * directly (e.g. from a host-owned trigger button) instead of measuring the
  * Menu's own wrapper span. Required when the wrapper isn't itself laid out at
@@ -81,7 +82,7 @@ const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
  * by a hairline; they stay visible while the items above scroll.
  * @returns anchor wrapper with the conditional list.
  */
-export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, getAnchorRect, footer, className }: {
+export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', portal = false, closeOnPointerLeave = false, compact = false, getAnchorRect, footer, className }: {
   open: boolean
   anchor: ReactNode
   items: readonly MenuEntry[]
@@ -93,6 +94,7 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
   side?: 'bottom' | 'top' | 'right'
   portal?: boolean
   closeOnPointerLeave?: boolean
+  compact?: boolean
   getAnchorRect?: () => DOMRect | null
   className?: string
 }) {
@@ -219,7 +221,7 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
           {entry.id === selectedId && <IconCheckOutline16 className={css.check} />}
         </button>
         {subOpen && entry.submenu !== undefined && (
-          <div className={css.submenu} role="menu">
+          <div className={clsx(css.submenu, compact && css.compactList)} role="menu">
             {entry.submenu.map(sub => (
               <button
                 key={sub.id}
@@ -246,7 +248,7 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
   const list = open && (
     <div
       ref={listRef}
-      className={clsx(css.list, scrollable && css.scrollable, portal && css.portal, side === 'top' && !portal && css.sideTop, align === 'end' && !portal && css.alignEnd)}
+      className={clsx(css.list, compact && css.compactList, scrollable && css.scrollable, portal && css.portal, side === 'top' && !portal && css.sideTop, align === 'end' && !portal && css.alignEnd)}
       style={portal ? fixedPos ?? MEASURE_STYLE : undefined}
       role="menu"
       onPointerLeave={closeOnPointerLeave ? () => { onClose() } : undefined}

packages/client/ui-primitives/src/index.ts

@@ -17,10 +17,14 @@ export { FishLogo } from './FishLogo.tsx'
 export { BrandWordmark } from './BrandWordmark.tsx'
 export { Tooltip } from './Tooltip.tsx'
 export type { TooltipSide } from './Tooltip.tsx'
+export { JsonTree } from './JsonTree.tsx'
+export type { JsonTreeProps } from './JsonTree.tsx'
 export { TerminalBlock, DEFAULT_TERMINAL_MAX_LINES } from './TerminalBlock.tsx'
 export type { TerminalBlockProps } from './TerminalBlock.tsx'
 export { CodeBlock } from './markdown/CodeBlock.tsx'
 export { JsonBlock } from './markdown/JsonBlock.tsx'
 export { MarkdownText } from './markdown/MarkdownText.tsx'
 export { MessageText } from './markdown/MessageText.tsx'
+export { extractMarkdownPlainText } from './markdown/plain-text.ts'
+export type { MarkdownPlainTextMode, MarkdownPlainTextOptions } from './markdown/plain-text.ts'
 export * from './icons/index.tsx'

packages/client/ui-primitives/src/markdown/plain-text.ts

@@ -0,0 +1,124 @@
+/**
+ * Markdown-to-plain-text projection for compact summaries and labels.
+ * Parsing shares the renderer's GFM grammar; raw HTML stays literal, links
+ * keep their labels, images keep alt text, and code keeps its source text.
+ */
+
+import { fromMarkdown } from 'mdast-util-from-markdown'
+import { gfmFromMarkdown } from 'mdast-util-gfm'
+import { gfm } from 'micromark-extension-gfm'
+
+/** Amount of parsed Markdown content returned by the extractor. */
+export type MarkdownPlainTextMode = 'all' | 'first-line' | 'first-paragraph'
+
+/** Options for {@link extractMarkdownPlainText}. */
+export interface MarkdownPlainTextOptions {
+  /** Projection boundary; defaults to the complete document. */
+  mode?: MarkdownPlainTextMode
+}
+
+interface MarkdownNode {
+  type: string
+  value?: string
+  alt?: string
+  children?: MarkdownNode[]
+}
+
+function inlineText(node: MarkdownNode): string {
+  switch (node.type) {
+    case 'text':
+    case 'inlineCode':
+    case 'code':
+      return node.value ?? ''
+    case 'image':
+    case 'imageReference':
+      return node.alt ?? ''
+    case 'break':
+      return '\n'
+    case 'html':
+      return node.value ?? ''
+    default:
+      return node.children?.map(inlineText).join('') ?? ''
+  }
+}
+
+function compactInline(text: string): string {
+  return text.replace(/\s+/g, ' ').trim()
+}
+
+function blockText(node: MarkdownNode): string {
+  switch (node.type) {
+    case 'root':
+    case 'blockquote':
+      return node.children?.map(blockText).filter(Boolean).join('\n\n') ?? ''
+    case 'paragraph':
+    case 'heading':
+      return compactInline(inlineText(node))
+    case 'code':
+      return node.value?.trim() ?? ''
+    case 'list':
+      return node.children?.map(blockText).filter(Boolean).join('\n') ?? ''
+    case 'listItem':
+      return node.children?.map(blockText).filter(Boolean).join(' ') ?? ''
+    case 'table':
+      return node.children?.map(blockText).filter(Boolean).join('\n') ?? ''
+    case 'tableRow':
+      return node.children?.map(blockText).join('\t') ?? ''
+    case 'tableCell':
+      return compactInline(inlineText(node))
+    case 'html':
+      return node.value ?? ''
+    case 'thematicBreak':
+    case 'definition':
+      return ''
+    default:
+      return compactInline(inlineText(node))
+  }
+}
+
+function findFirstParagraph(node: MarkdownNode): string | undefined {
+  if (node.type === 'paragraph') {
+    const text = compactInline(inlineText(node))
+    if (text !== '') return text
+  }
+  for (const child of node.children ?? []) {
+    const text = findFirstParagraph(child)
+    if (text !== undefined) return text
+  }
+  return undefined
+}
+
+function fullText(root: MarkdownNode): string {
+  return blockText(root)
+    .split('\n')
+    .map(line => line.trim())
+    .join('\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+/**
+ * Parse GFM Markdown, remove its presentation markup, and preserve raw HTML literally.
+ * @param markdown - Markdown source.
+ * @param options - Optional extraction boundary.
+ * @returns Plain text for the whole document, first visible line, or first semantic paragraph.
+ */
+export function extractMarkdownPlainText(
+  markdown: string,
+  options: MarkdownPlainTextOptions = {},
+): string {
+  const { mode = 'all' } = options
+  const root = fromMarkdown(markdown, {
+    extensions: [gfm()],
+    mdastExtensions: [gfmFromMarkdown()],
+  }) as MarkdownNode
+  const all = fullText(root)
+  switch (mode) {
+    case 'all':
+      return all
+    case 'first-line':
+      return all.split('\n').find(line => line !== '') ?? ''
+    case 'first-paragraph':
+      return findFirstParagraph(root) ?? all.split('\n').find(line => line !== '') ?? ''
+  }
+}