basalt-ui 1.10.0 → 1.11.0

package/src/agent-chat/tool-chip.tsx

@@ -0,0 +1,219 @@
+/**
+ * ToolChip — a one-line collapsed row for a tool-call part, expanding to its input/output JSON.
+ *
+ * Replaces `thread-message.tsx`'s old always-expanded `ToolRenderer`, which unconditionally
+ * rendered both input and output `<pre>` blocks. Collapsed, it shows a mono micro-label, the tool
+ * name, a state dot, and `durationMs` when present; expanded, it shows whatever the part's state
+ * actually carries — input, output, the surviving `rawInput` for a call whose input never
+ * validated, the error text, the denial reason, or the approve/deny affordances.
+ *
+ * @example
+ * import { ToolChip } from 'basalt-ui/agent-chat'
+ *
+ * <ToolChip
+ *   part={part}
+ *   onApprove={(id) => api.runs.approve.post({ approvalId: id })}
+ *   onDeny={(id, reason) => api.runs.deny.post({ approvalId: id, reason })}
+ * />
+ */
+import { Box, Button, Collapse, Group, Stack, Text, UnstyledButton } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import type { JSX } from 'react'
+import { isToolCallSettled } from '../agent'
+import type { ToolCallPart } from '../agent'
+import { alpha, VX } from '../tokens'
+
+// Mirrors thread-message.tsx's micro-label/rail/code-block idiom (docs/DESIGN-SPEC.md §3/§5) —
+// duplicated locally rather than imported, matching the existing part-list.tsx/thread-message.tsx
+// precedent of each Mantine-facing renderer file owning its own copy of these style objects.
+const MICRO_LABEL_STYLE = {
+  fontFamily: 'var(--basalt-font-mono)',
+  fontSize: VX.text.micro,
+  fontWeight: 500,
+  letterSpacing: '0.06em',
+  textTransform: 'uppercase',
+  color: VX.faint,
+} as const
+const RAIL_STYLE = {
+  borderLeft: `2px solid ${VX.divider}`,
+  paddingLeft: 'var(--vx-space-agent-rail-inset-x)',
+} as const
+const CODE_BLOCK_STYLE = {
+  margin: 0,
+  marginTop: 'var(--vx-space-agent-part-gap-top)',
+  fontFamily: 'var(--basalt-font-mono)',
+  backgroundColor: alpha(VX.ink, 0.06),
+  borderRadius: 'var(--vx-radius-card)',
+  padding: 'var(--vx-space-agent-code-inset)',
+  whiteSpace: 'pre-wrap',
+  overflowWrap: 'anywhere',
+} as const
+
+/** Per-state (label, dot color) — the exhaustive switch that drives the collapsed row. */
+function stateMeta(part: ToolCallPart): { readonly label: string; readonly dotToken: string } {
+  switch (part.state) {
+    case 'input-streaming':
+      return { label: 'streaming', dotToken: VX.status.neutral }
+    case 'input-available':
+      // No 'running' state on the wire — 'input-available' IS the running state (input complete,
+      // no output yet). This label is a UI-only gloss on that wire state, not a new state.
+      return { label: 'running', dotToken: VX.status.neutral }
+    case 'approval-requested':
+      return { label: 'needs approval', dotToken: VX.status.warn }
+    case 'approval-responded':
+      return part.approval.approved
+        ? { label: 'approved', dotToken: VX.status.neutral }
+        : { label: 'declined', dotToken: VX.status.bad }
+    case 'output-available':
+      // preliminary vs final must be visually distinguishable — the label carries that here; the
+      // expanded output body below is identical either way.
+      return part.preliminary === true
+        ? { label: 'preliminary', dotToken: VX.status.warn }
+        : { label: 'done', dotToken: VX.status.good }
+    case 'output-error':
+      return { label: 'error', dotToken: VX.status.bad }
+    case 'output-denied':
+      return { label: 'denied', dotToken: VX.status.bad }
+    default: {
+      // `part` is `never` here ONLY at compile time — this switch is genuinely exhaustive today,
+      // so adding an eighth ToolCallPart state without a case above makes this assignment a tsc
+      // error, the same gate `assertNever` provides. But `part` at RUNTIME can be a value this
+      // build never declared: `createThreadsStore` persists to localStorage with no shape
+      // validation, and `edenTransport` trusts the wire with zero validation, so a 1.10.0-shaped
+      // flat tool part (`state` undefined) or a future/foreign `state` string both reach here.
+      // That must never THROW during render — mirrors ThreadTranscript's fallbackRenderer
+      // doctrine (unknown data renders inert, it doesn't blank the transcript) — so, unlike a
+      // genuinely-exhaustive switch elsewhere, this default returns a neutral descriptor instead
+      // of calling assertNever.
+      const exhaustive: never = part
+      void exhaustive
+      return { label: 'unknown', dotToken: VX.status.neutral }
+    }
+  }
+}
+
+function formatDuration(ms: number): string {
+  return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`
+}
+
+export type ToolChipProps = {
+  readonly part: ToolCallPart
+  readonly defaultExpanded?: boolean
+  /** Rendered only in 'approval-requested'. Omit both to render a read-only chip. */
+  readonly onApprove?: (approvalId: string) => void
+  readonly onDeny?: (approvalId: string, reason?: string) => void
+}
+
+/**
+ * A collapsed-by-default row for a single tool-call part. All seven wire states render something
+ * sane; the switch above still gates an eighth (compile-time-unhandled) state as a tsc error via a
+ * `const _: never = part` assignment, but unlike a truly-closed switch, its `default` branch never
+ * throws at RUNTIME — a value from persisted/wire data that reaches here with a `state` this build
+ * doesn't recognize renders an inert 'unknown' chip instead of blanking the transcript.
+ *
+ * @example
+ * <ToolChip part={part} />
+ */
+export function ToolChip({
+  part,
+  defaultExpanded = false,
+  onApprove,
+  onDeny,
+}: ToolChipProps): JSX.Element {
+  const [expanded, { toggle }] = useDisclosure(defaultExpanded)
+  const { label, dotToken } = stateMeta(part)
+  const settled = isToolCallSettled(part)
+
+  const input = 'input' in part ? part.input : undefined
+  const rawInput = part.state === 'output-error' ? part.rawInput : undefined
+
+  return (
+    <Box style={RAIL_STYLE}>
+      <Stack gap={4}>
+        <UnstyledButton onClick={toggle}>
+          <Group gap={6} align="center" wrap="nowrap">
+            <Box
+              aria-hidden
+              style={{
+                width: 6,
+                height: 6,
+                flexShrink: 0,
+                borderRadius: '50%', // theme-allow: a 6px state dot is a circle, not a surface corner — no radius token expresses it
+                backgroundColor: dotToken,
+              }}
+            />
+            <Text style={MICRO_LABEL_STYLE}>{part.toolName}</Text>
+            <Text size="xs" c="dimmed">
+              {label}
+            </Text>
+            {part.durationMs !== undefined && (
+              <Text
+                style={{
+                  fontFamily: 'var(--basalt-font-mono)',
+                  fontSize: VX.text.micro,
+                  color: VX.faint,
+                }}
+              >
+                {formatDuration(part.durationMs)}
+              </Text>
+            )}
+            {!settled && (
+              <Text size="xs" c="dimmed">
+                …
+              </Text>
+            )}
+          </Group>
+        </UnstyledButton>
+        <Collapse expanded={expanded}>
+          <Stack gap={6}>
+            {input !== undefined && (
+              <Text component="pre" size="xs" style={CODE_BLOCK_STYLE}>
+                {JSON.stringify(input, null, 2)}
+              </Text>
+            )}
+            {rawInput !== undefined && (
+              <Text component="pre" size="xs" style={CODE_BLOCK_STYLE}>
+                {JSON.stringify(rawInput, null, 2)}
+              </Text>
+            )}
+            {part.state === 'output-available' && (
+              <Text component="pre" size="xs" style={CODE_BLOCK_STYLE}>
+                {JSON.stringify(part.output, null, 2)}
+              </Text>
+            )}
+            {part.state === 'output-error' && (
+              <Text size="xs" style={{ color: VX.status.bad }}>
+                {part.errorText}
+              </Text>
+            )}
+            {part.state === 'output-denied' && part.approval.reason !== undefined && (
+              <Text size="xs" c="dimmed">
+                {part.approval.reason}
+              </Text>
+            )}
+            {part.state === 'approval-requested' &&
+              (onApprove !== undefined || onDeny !== undefined) && (
+                <Group gap={6}>
+                  {onApprove !== undefined && (
+                    <Button size="compact-sm" onClick={() => onApprove(part.approval.id)}>
+                      Approve
+                    </Button>
+                  )}
+                  {onDeny !== undefined && (
+                    <Button
+                      size="compact-sm"
+                      variant="light"
+                      color="red"
+                      onClick={() => onDeny(part.approval.id)}
+                    >
+                      Deny
+                    </Button>
+                  )}
+                </Group>
+              )}
+          </Stack>
+        </Collapse>
+      </Stack>
+    </Box>
+  )
+}

package/src/guard/check-source.test.ts

@@ -209,11 +209,15 @@ describe('mantine-shade-index', () => {
   })
 
   // The grace-minor doctrine (package CLAUDE.md): a kind that rejects previously-passing code
-  // lands as `warn` for one minor. Deleting its GRACE_PERIOD_KINDS entry flips this — scheduled
-  // for 1.9.0, deferred one minor because 1.8.0 shipped the same day as 1.7.0 (see the entry).
-  it('lands as a warning, not an error, for its grace minor', () => {
+  // lands as `warn` for one minor, then its GRACE_PERIOD_KINDS entry is deleted and it becomes an
+  // error. This one ran its grace across FOUR minors — introduced 1.7.0, then deferred by 1.8.0
+  // (shipped the same day as 1.7.0), 1.9.0 (carried the chart-layer batch the same consumer was
+  // waiting on) and 1.10.0 (shipped without the promotion at all). Promoted in 1.11.0, verified
+  // against the only consumer first: argo's `check-theme` reports zero violations of any kind, so
+  // the promotion breaks nothing that was passing.
+  it('is an error now that its grace period has ended', () => {
     const f = find(`<Text c="yellow.7" />`)
-    expect(f.find((x) => x.kind === 'mantine-shade-index')?.severity).toBe('warn')
+    expect(f.find((x) => x.kind === 'mantine-shade-index')?.severity).toBe('error')
   })
 })
 

package/src/guard/index.ts

@@ -296,9 +296,7 @@ export const DEFAULT_GUARD_CONFIG: GuardConfig = {
  *   'raw-font-family': 'introduced 1.4.0 — promote to error in 1.5.0',
  * }
  */
-const GRACE_PERIOD_KINDS: Partial<Record<GuardKind, string>> = {
-  'mantine-shade-index': 'introduced 1.7.0 — promote to error in 1.10.0',
-}
+const GRACE_PERIOD_KINDS: Partial<Record<GuardKind, string>> = {}
 
 /** A kind's effective severity: consumer override first, then the grace table, then `error`. */
 function severityOf(kind: GuardKind, cfg: GuardConfig): GuardSeverity {

package/src/index.ts

@@ -118,6 +118,7 @@ export {
   Composer,
   threadPartRenderers,
   ThreadTranscript,
+  ToolChip,
 } from './agent-chat'
 export type {
   ThreadWorkspaceProps,
@@ -126,6 +127,7 @@ export type {
   ThreadDetailPanelProps,
   ComposerProps,
   ThreadTranscriptProps,
+  ToolChipProps,
 } from './agent-chat'
 export { createThreadsStore, heuristicOutcome, useAgentThreadRuns } from './agent'
 export type {

package/src/surfaces.ts

@@ -362,7 +362,7 @@ export const SURFACES = {
     skill: ['basalt-app'],
     guardKinds: [],
     description:
-      'Headless streaming-chat layer: useAgentStream, aiSdkTransport (recommended default) + edenTransport, PartList, plus the multi-thread createThreadsStore + useAgentThreadRuns + outcome-resolver seam (Mantine-free)',
+      'Headless streaming-chat layer: useAgentStream, aiSdkTransport (recommended default) + edenTransport, isResumable/ResumableAgentTransport (stream-resumption seam), PartList, coalesceParts, the ForeignPart/definePartRenderers/narrowAgentPart open part-registry seam, plus the multi-thread createThreadsStore + useAgentThreadRuns + outcome-resolver seam (Mantine-free)',
     optionalPeers: ['ai', 'use-stick-to-bottom'],
     globs: {
       shipped: [],
@@ -378,7 +378,7 @@ export const SURFACES = {
     skill: ['basalt-app'],
     guardKinds: [],
     description:
-      'Mantine-styled thread-chat components over basalt-ui/agent: ThreadWorkspace, ThreadFeed, ThreadOutcomeCard, ThreadDetailPanel, Composer, ThreadTranscript, threadPartRenderers (Mantine-coupled). remend and motion are required, not optional — ThreadTranscript imports content/markdown.tsx (remend eagerly), and ThreadFeed/ThreadDetailPanel import motion/react eagerly, so this subpath fails to resolve without both installed even though peerDependenciesMeta marks them optional (npm has no per-subpath optionality).',
+      'Mantine-styled thread-chat components over basalt-ui/agent: ThreadWorkspace, ThreadFeed, ThreadOutcomeCard, ThreadDetailPanel, Composer, ThreadTranscript (open part-renderer registry via its renderers/fallbackRenderer props), threadPartRenderers, ToolChip (Mantine-coupled). remend and motion are required, not optional — ThreadTranscript imports content/markdown.tsx (remend eagerly), and ThreadFeed/ThreadDetailPanel import motion/react eagerly, so this subpath fails to resolve without both installed even though peerDependenciesMeta marks them optional (npm has no per-subpath optionality).',
     optionalPeers: [
       'ai',
       'motion',