@miragon/mcp-toolkit-ui 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/mcp-toolkit-ui",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "React UI for MCP servers: shadcn primitives, composite components, TanStack Query hooks, and the MCP App shell (McpAppView + WidgetRenderer).",
   "repository": {
     "type": "git",
@@ -26,7 +26,10 @@
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.js"
     },
-    "./globals.css": "./src/globals.css"
+    "./globals.css": "./src/globals.css",
+    "./theme.css": "./src/theme.css",
+    "./fonts.css": "./src/fonts.css",
+    "./cd-tokens.generated.css": "./src/theme/cd-tokens.generated.css"
   },
   "files": [
     "dist",
@@ -42,11 +45,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.3.0",
-    "@miragon/mcp-toolkit-core": "~2.6.0"
+    "@miragon/mcp-toolkit-core": "~2.7.0"
   },
   "dependencies": {
     "@base-ui/react": "1.8.0",
     "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
     "@tanstack/react-query": "5.103.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -58,6 +62,7 @@
   "devDependencies": {
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
+    "@types/node": "26.6.4",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitest/coverage-v8": "4.1.11",
@@ -68,7 +73,7 @@
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
     "vitest": "4.1.11",
-    "@miragon/mcp-toolkit-core": "2.6.0"
+    "@miragon/mcp-toolkit-core": "2.7.0"
   },
   "engines": {
     "node": ">=22.22.2"

package/src/app/builder/BuilderBanners.tsx

@@ -1,4 +1,6 @@
 import { AlertTriangle } from "lucide-react"
+import { ErrorState } from "../../components/ErrorState.js"
+import { TONE_ICON } from "../../lib/tone-utils.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 
 // -------------------------------------------------------------------------- //
@@ -9,7 +11,10 @@ import type { LayoutBuilderLabels } from "./labels.js"
  * Inline feedback strip under the toolbar. Surfaces two things the builder
  * previously swallowed:
  *   - a `get-builder-catalogue` fetch failure (Finding [3]) — only console-
- *     logged before, so the user couldn't tell the palette was stale, and
+ *     logged before, so the user couldn't tell the palette was stale. It is
+ *     the kit's inline `ErrorState`: what happened, what to do, a retry, and
+ *     the tool name with the raw reason under "Details" (never in the
+ *     sentence the user reads), and
  *   - pipeline validation issues (Finding [10]/[6]) the catalogue reports
  *     fail-soft but `render-view` would reject fail-hard.
  *
@@ -21,29 +26,37 @@ export function BuilderBanners({
   catalogueToolName,
   refreshError,
   validationIssues,
+  onRetry,
 }: {
   L: Required<LayoutBuilderLabels>
   catalogueToolName: string
   refreshError: string | null
   validationIssues: string[]
+  /** Fetches the catalogue again; the error state offers it as its retry. */
+  onRetry?: () => void
 }) {
   if (!refreshError && validationIssues.length === 0) return null
   return (
-    <div className="flex flex-col gap-2" role="status" aria-live="polite">
+    <div className="flex flex-col gap-2">
       {refreshError && (
-        <div className="border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border px-3 py-2 text-xs">
-          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
-          <div className="min-w-0">
-            <p className="font-medium">{L.catalogueError}</p>
-            <p className="text-destructive/80 mt-0.5 break-words">
-              <span className="font-mono">{catalogueToolName}</span>: {refreshError}
-            </p>
-          </div>
-        </div>
+        <ErrorState
+          variant="inline"
+          title={L.catalogueError}
+          description={L.catalogueErrorHint}
+          details={`${catalogueToolName}: ${refreshError}`}
+          onRetry={onRetry}
+        />
       )}
       {validationIssues.length > 0 && (
-        <div className="flex items-start gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+        <div
+          role="status"
+          aria-live="polite"
+          className="border-warning bg-warning-soft text-foreground flex items-start gap-2 rounded-md border px-3 py-2 text-xs"
+        >
+          <AlertTriangle
+            className={`mt-0.5 size-3.5 shrink-0 ${TONE_ICON.warning}`}
+            aria-hidden="true"
+          />
           <div className="min-w-0">
             <p className="font-medium">{L.validationWarning}</p>
             <ul className="mt-0.5 list-inside list-disc space-y-0.5">

package/src/app/builder/CanvasRow.tsx

@@ -82,7 +82,7 @@ function CanvasRowImpl({
         }
       }}
       className={cn(
-        "group relative rounded-lg border-l-2 px-3 py-2 transition-colors",
+        "group relative rounded-md border-l-2 px-3 py-2 transition-colors",
         focused
           ? "border-l-primary bg-card"
           : "bg-background hover:bg-card/60 border-l-transparent",
@@ -91,12 +91,12 @@ function CanvasRowImpl({
     >
       <div className="mb-2 flex items-center justify-between">
         <div className="text-muted-foreground flex items-center gap-2 text-[11px]">
-          <span className="font-mono">row {rowIdx + 1}</span>
+          <span className="font-mono">{L.rowLabel(rowIdx + 1)}</span>
           <span className="bg-muted/60 rounded px-1 py-0.5 text-[10px]">
-            {row.row.length} {row.row.length === 1 ? "widget" : "widgets"}
+            {L.elementCount(row.row.length)}
           </span>
         </div>
-        <div className="opacity-0 transition-opacity group-hover:opacity-100">
+        <div className="opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
           <Button
             variant="ghost"
             size="icon-xs"
@@ -105,7 +105,7 @@ function CanvasRowImpl({
               onMoveRow(rowIdx, -1)
             }}
             disabled={isFirst}
-            aria-label="Move row up"
+            aria-label={L.moveRowUp}
           >
             <ChevronUp />
           </Button>
@@ -117,7 +117,7 @@ function CanvasRowImpl({
               onMoveRow(rowIdx, 1)
             }}
             disabled={isLast}
-            aria-label="Move row down"
+            aria-label={L.moveRowDown}
           >
             <ChevronDown />
           </Button>
@@ -139,8 +139,8 @@ function CanvasRowImpl({
           className={cn(
             "rounded-md border border-dashed py-6 text-center text-[11px] transition-colors",
             dragOver
-              ? "border-primary bg-primary/5 text-primary"
-              : "border-muted-foreground/30 text-muted-foreground",
+              ? "border-focus bg-accent text-accent-foreground"
+              : "border-input text-muted-foreground",
           )}
         >
           {dragOver ? L.canvasDropHint : L.canvasEmpty}
@@ -155,20 +155,20 @@ function CanvasRowImpl({
               const propCount = cell.props ? Object.keys(cell.props).length : 0
               return (
                 <GridItem key={`${cell.widget}-${cellIdx}`} span={span}>
-                  <div className="border-border bg-card relative overflow-hidden rounded-md border shadow-sm">
+                  <div className="border-border bg-card shadow-1 relative overflow-hidden rounded-md border">
                     <div className="text-muted-foreground bg-muted/30 flex items-center justify-between gap-2 border-b px-2 py-1 text-[10px]">
                       <span className="truncate font-mono">{cell.widget}</span>
                       <div className="flex shrink-0 items-center gap-2">
-                        <label className="text-muted-foreground/80 inline-flex items-center gap-0.5 font-mono">
-                          <span className="sr-only">Column span</span>
+                        <label className="text-muted-foreground inline-flex items-center gap-0.5 font-mono">
+                          <span className="sr-only">{L.columnSpan}</span>
                           <Select
                             value={String(span)}
                             onValueChange={(v) => onSetCellSpan(rowIdx, cellIdx, Number(v))}
                           >
                             <SelectTrigger
                               size="sm"
-                              className="h-5 gap-0.5 border-none bg-transparent px-1 py-0 font-mono text-[10px] shadow-none focus:ring-0"
-                              aria-label="Column span"
+                              className="h-5 gap-0.5 border-none bg-transparent px-1 py-0 font-mono text-[10px] shadow-none"
+                              aria-label={L.columnSpan}
                               onClick={(e) => e.stopPropagation()}
                             >
                               <SelectValue />
@@ -191,13 +191,11 @@ function CanvasRowImpl({
                               e.stopPropagation()
                               onConfigureCell(rowIdx, cellIdx)
                             }}
-                            aria-label="Configure widget props"
+                            aria-label={L.configureElement}
                             title={
-                              propCount > 0
-                                ? `Configure widget props (${propCount} set)`
-                                : "Configure widget props"
+                              propCount > 0 ? L.configureElementSet(propCount) : L.configureElement
                             }
-                            className={cn(propCount > 0 && "text-primary")}
+                            className={cn(propCount > 0 && "text-link")}
                           >
                             <SlidersHorizontal />
                           </Button>
@@ -209,7 +207,7 @@ function CanvasRowImpl({
                             e.stopPropagation()
                             onRemoveCell(rowIdx, cellIdx)
                           }}
-                          aria-label="Remove widget"
+                          aria-label={L.removeElement}
                         >
                           <X />
                         </Button>
@@ -226,6 +224,7 @@ function CanvasRowImpl({
                       />
                     </div>
                     <ResizeHandle
+                      label={L.resizeElement}
                       rowIdx={rowIdx}
                       cellIdx={cellIdx}
                       span={span}
@@ -250,12 +249,14 @@ export const CanvasRow = memo(CanvasRowImpl)
 // -------------------------------------------------------------------------- //
 
 function ResizeHandle({
+  label,
   rowIdx,
   cellIdx,
   span,
   getGridEl,
   onSetCellSpan,
 }: {
+  label: string
   rowIdx: number
   cellIdx: number
   span: number
@@ -304,8 +305,8 @@ function ResizeHandle({
       onClick={(e) => e.stopPropagation()}
       onKeyDown={onKeyDown}
       tabIndex={0}
-      className="hover:bg-primary/40 focus-visible:bg-primary/40 focus-visible:ring-primary/60 absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none focus-visible:ring-1 focus-visible:outline-none"
-      aria-label="Resize widget"
+      className="hover:bg-primary/40 focus-visible:bg-primary/40 focus-visible:ring-focus absolute top-0 right-0 h-full w-1.5 cursor-col-resize touch-none select-none focus-visible:ring-2 focus-visible:outline-hidden"
+      aria-label={label}
       role="separator"
       aria-orientation="vertical"
       aria-valuenow={span}

package/src/app/builder/CatalogueSheet.tsx

@@ -11,6 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from "../../primitives/sheet.js"
+import { TONE_DOT, TONE_TEXT } from "../../lib/tone-utils.js"
 import { cn } from "../../lib/utils.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 
@@ -59,28 +60,29 @@ export function CatalogueSheet({
             <section className="flex flex-col gap-2">
               <CatalogueSectionHeader title={L.catalogueKeys} count={keyCatalog.length} />
               {keyCatalog.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">No keys registered.</p>
+                <p className="text-muted-foreground text-xs italic">{L.noKeysRegistered}</p>
               ) : (
                 <ul className="flex flex-col gap-1">
                   {keyCatalog.map((entry) => (
                     <li
                       key={entry.key}
-                      className="hover:bg-accent/40 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
+                      className="hover:bg-muted flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
                     >
                       <div className="flex items-start justify-between gap-2">
                         <span className="truncate font-mono">{entry.key}</span>
                         <span
                           className={cn(
                             "inline-flex shrink-0 items-center gap-1 text-[10px]",
-                            entry.inContext
-                              ? "text-emerald-600 dark:text-emerald-400"
-                              : "text-muted-foreground",
+                            entry.inContext ? TONE_TEXT.success : "text-muted-foreground",
                           )}
                         >
                           <span
+                            aria-hidden="true"
                             className={cn(
                               "size-1.5 rounded-full",
-                              entry.inContext ? "bg-emerald-500" : "bg-muted-foreground/40",
+                              entry.inContext
+                                ? TONE_DOT.success
+                                : "border-input border bg-transparent",
                             )}
                           />
                           {entry.inContext ? L.catalogueLive : L.catalogueMissing}
@@ -89,7 +91,7 @@ export function CatalogueSheet({
                       {(entry.producedBySteps.length > 0 ||
                         entry.consumedBySteps.length > 0 ||
                         entry.consumedByWidgets.length > 0) && (
-                        <div className="text-muted-foreground/80 flex flex-col gap-0.5 text-[10px]">
+                        <div className="text-muted-foreground flex flex-col gap-0.5 text-[10px]">
                           {entry.producedBySteps.length > 0 && (
                             <span>
                               {L.catalogueProducedBy}{" "}
@@ -98,13 +100,13 @@ export function CatalogueSheet({
                           )}
                           {entry.consumedBySteps.length > 0 && (
                             <span>
-                              step {L.catalogueConsumedBy}{" "}
+                              {L.catalogueStepPrefix} {L.catalogueConsumedBy}{" "}
                               <span className="font-mono">{entry.consumedBySteps.join(", ")}</span>
                             </span>
                           )}
                           {entry.consumedByWidgets.length > 0 && (
                             <span>
-                              widget {L.catalogueConsumedBy}{" "}
+                              {L.catalogueElementPrefix} {L.catalogueConsumedBy}{" "}
                               <span className="font-mono">
                                 {entry.consumedByWidgets.join(", ")}
                               </span>
@@ -137,7 +139,7 @@ export function CatalogueSheet({
             <section className="flex flex-col gap-2">
               <CatalogueSectionHeader title={L.catalogueSteps} count={availableSteps.length} />
               {availableSteps.length === 0 ? (
-                <p className="text-muted-foreground text-xs italic">No steps registered.</p>
+                <p className="text-muted-foreground text-xs italic">{L.noStepsRegistered}</p>
               ) : (
                 <ul className="flex flex-col gap-1">
                   {availableSteps.map((s) => (
@@ -146,12 +148,12 @@ export function CatalogueSheet({
                       className="flex flex-col gap-0.5 rounded-md border px-2 py-1.5 text-xs"
                     >
                       <span className="truncate font-mono">{s.id}</span>
-                      <div className="text-muted-foreground/80 flex flex-wrap gap-x-3 text-[10px]">
+                      <div className="text-muted-foreground flex flex-wrap gap-x-3 text-[10px]">
                         <span className="font-mono">
-                          ← {s.requires.length ? s.requires.join(", ") : "(no inputs)"}
+                          ← {s.requires.length ? s.requires.join(", ") : L.noInputs}
                         </span>
                         <span className="font-mono">
-                          → {s.produces.length ? s.produces.join(", ") : "(none)"}
+                          → {s.produces.length ? s.produces.join(", ") : L.noOutputs}
                         </span>
                       </div>
                     </li>
@@ -181,7 +183,7 @@ export function CatalogueSheet({
                         className="bg-muted/20 flex flex-col gap-1 rounded-md border px-2 py-1.5 text-xs"
                       >
                         <span className="truncate font-mono">{w.id}</span>
-                        <span className="text-muted-foreground/80 text-[10px]">
+                        <span className="text-muted-foreground text-[10px]">
                           {L.catalogueNeedsKeys}{" "}
                           <span className="font-mono">{w.missingKeys.join(", ")}</span>
                         </span>

package/src/app/builder/EmptyHint.tsx

@@ -1,4 +1,5 @@
 import { Layers, SlidersHorizontal } from "lucide-react"
+import { EmptyState } from "../../components/EmptyState.js"
 import { Button } from "../../primitives/button.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 
@@ -6,6 +7,10 @@ import type { LayoutBuilderLabels } from "./labels.js"
 // Empty hint — shown on the Layout view before any widget is reachable
 // -------------------------------------------------------------------------- //
 
+/**
+ * The builder's empty state. Its one next step (open the data sources) is the
+ * blue primary button: CI §9 "Leer: Empty-State-Karte mit blauem CTA".
+ */
 export function EmptyHint({
   L,
   onGotoPipeline,
@@ -14,16 +19,16 @@ export function EmptyHint({
   onGotoPipeline: () => void
 }) {
   return (
-    <div className="border-muted-foreground/30 text-muted-foreground flex flex-col items-center gap-2 rounded-md border border-dashed p-10 text-sm">
-      <Layers className="size-5" />
-      <p>No widgets reachable yet.</p>
-      <p className="text-xs">
-        Open the <span className="font-medium">{L.viewPipelineTab}</span> tab to seed keys or add a
-        pipeline step — the palette unlocks as soon as a widget's contract is satisfied.
-      </p>
-      <Button variant="outline" size="sm" onClick={onGotoPipeline} className="mt-1">
-        <SlidersHorizontal /> Open {L.viewPipelineTab}
-      </Button>
-    </div>
+    <EmptyState
+      className="rounded-md border border-dashed"
+      icon={<Layers />}
+      title={L.emptyHintTitle}
+      description={L.emptyHintBody}
+      action={
+        <Button size="sm" onClick={onGotoPipeline}>
+          <SlidersHorizontal aria-hidden="true" /> {L.openDataSources}
+        </Button>
+      }
+    />
   )
 }

package/src/app/builder/LayoutSurface.tsx

@@ -65,7 +65,7 @@ export function LayoutSurface({
                 value={tab.label}
                 className="pr-7"
                 onDoubleClick={() => setEditingTabIdx(idx)}
-                title="Double-click to rename"
+                title={L.renameTitle}
               >
                 {editingTabIdx === idx ? (
                   <input
@@ -87,8 +87,8 @@ export function LayoutSurface({
                       commitRename(idx, e.currentTarget.value)
                     }}
                     className={cn(
-                      "w-24 border-none bg-transparent p-0 text-inherit outline-none focus:ring-0",
-                      renameRejected && "text-destructive",
+                      "focus-visible:ring-focus w-24 rounded-sm border-none bg-transparent p-0 text-inherit outline-hidden focus-visible:ring-2",
+                      renameRejected && "text-danger-ink",
                     )}
                     size={Math.max(tab.label.length + 1, 6)}
                   />
@@ -105,7 +105,7 @@ export function LayoutSurface({
                   e.stopPropagation()
                   onRemoveTab(idx)
                 }}
-                className="text-muted-foreground/60 hover:text-foreground absolute top-1/2 right-1 -translate-y-1/2 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 data-[state=active]:opacity-100"
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-1 -translate-y-1/2 rounded-sm p-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 data-[state=active]:opacity-100"
               >
                 <X className="size-3" />
               </button>
@@ -121,12 +121,12 @@ export function LayoutSurface({
         >
           <Plus />
         </Button>
-        <span className="text-muted-foreground/70 ml-2 hidden text-[10px] sm:inline">
-          double-click a tab to rename
+        <span className="text-muted-foreground ml-2 hidden text-[10px] sm:inline">
+          {L.renameHint}
         </span>
       </div>
       {renameRejected && editingTabIdx !== null && (
-        <p className="text-destructive -mt-1 mb-2 text-[11px]" role="alert">
+        <p className="text-danger-ink -mt-1 mb-2 text-[11px]" role="alert">
           {L.renameDuplicate}
         </p>
       )}

package/src/app/builder/PipelineStrip.tsx

@@ -1,6 +1,7 @@
 import { memo, useMemo } from "react"
-import { ArrowDownToLine, ArrowRightToLine, Plus, X } from "lucide-react"
+import { ArrowDownToLine, ArrowRightToLine, LucideProvider, Plus, X } from "lucide-react"
 import type { AvailableStep, KeyCatalogEntry, PipelineStepRef } from "@miragon/mcp-toolkit-core"
+import { DENSE_ICON_STROKE } from "../../lib/icon-stroke.js"
 import { Badge } from "../../primitives/badge.js"
 import { Button } from "../../primitives/button.js"
 import { Input } from "../../primitives/input.js"
@@ -62,7 +63,7 @@ function PipelineStripImpl({
         <span className="text-muted-foreground text-[10px] font-semibold tracking-[0.12em] uppercase">
           {L.pipelineHeader}
         </span>
-        <span className="text-muted-foreground/60 text-[10px]">· auto-applies on edit</span>
+        <span className="text-muted-foreground text-[10px]">· {L.autoApplies}</span>
         <div className="ml-auto text-[11px]">
           <StatusChip status={status} L={L} />
         </div>
@@ -84,7 +85,7 @@ function PipelineStripImpl({
           ) : (
             <ul className="flex flex-col gap-1">
               {keyEntries.map((entry, idx) => {
-                const livePreview = formatLiveKeyValue(liveKeys[entry.name])
+                const livePreview = formatLiveKeyValue(liveKeys[entry.name], L.catalogueLive)
                 const usedNames = new Set(
                   keyEntries.map((e, i) => (i === idx ? "" : e.name)).filter(Boolean),
                 )
@@ -103,7 +104,7 @@ function PipelineStripImpl({
                       <SelectContent>
                         {pickable.length === 0 ? (
                           <div className="text-muted-foreground px-2 py-1.5 text-xs italic">
-                            No more keys available.
+                            {L.noMoreKeys}
                           </div>
                         ) : (
                           pickable.map((c) => (
@@ -111,7 +112,7 @@ function PipelineStripImpl({
                               <div className="flex flex-col gap-0.5">
                                 <span className="font-mono text-xs">{c.key}</span>
                                 {c.consumedByWidgets.length + c.consumedBySteps.length > 0 && (
-                                  <span className="text-muted-foreground/80 font-mono text-[10px]">
+                                  <span className="text-muted-foreground font-mono text-[10px]">
                                     → {[...c.consumedByWidgets, ...c.consumedBySteps].join(", ")}
                                   </span>
                                 )}
@@ -130,17 +131,17 @@ function PipelineStripImpl({
                           className="h-7 pr-10 font-mono text-xs"
                         />
                         <span
-                          className="text-muted-foreground/70 pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 font-mono text-[10px] tabular-nums"
-                          title="parsed type"
+                          className="text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 font-mono text-[10px] tabular-nums"
+                          title={L.parsedType}
                         >
-                          {valueTypeLabel(entry.rawValue)}
+                          {L.valueType(valueTypeLabel(entry.rawValue))}
                         </span>
                       </div>
                       <Button
                         variant="ghost"
                         size="icon-xs"
                         onClick={() => onRemoveKey(idx)}
-                        aria-label="Remove key"
+                        aria-label={L.removeKey}
                       >
                         <X />
                       </Button>
@@ -204,11 +205,10 @@ function PipelineStripImpl({
                                     <span className="font-mono text-xs">{s.id}</span>
                                     <div className="text-muted-foreground flex flex-wrap gap-x-2 text-[10px]">
                                       <span className="font-mono">
-                                        ←{" "}
-                                        {s.requires.length ? s.requires.join(", ") : "(no inputs)"}
+                                        ← {s.requires.length ? s.requires.join(", ") : L.noInputs}
                                       </span>
                                       <span className="font-mono">
-                                        → {s.produces.length ? s.produces.join(", ") : "(none)"}
+                                        → {s.produces.length ? s.produces.join(", ") : L.noOutputs}
                                       </span>
                                     </div>
                                   </div>
@@ -222,18 +222,18 @@ function PipelineStripImpl({
                         variant="ghost"
                         size="icon-xs"
                         onClick={() => onRemoveStep(idx)}
-                        aria-label="Remove step"
+                        aria-label={L.removeStep}
                       >
                         <X />
                       </Button>
                     </div>
                     {meta && (
-                      <div className="text-muted-foreground/80 ml-1 flex flex-wrap gap-x-2 pl-24 text-[10px]">
+                      <div className="text-muted-foreground ml-1 flex flex-wrap gap-x-2 pl-24 text-[10px]">
                         <span className="font-mono">
-                          ← {meta.requires.length ? meta.requires.join(", ") : "(no inputs)"}
+                          ← {meta.requires.length ? meta.requires.join(", ") : L.noInputs}
                         </span>
                         <span className="font-mono">
-                          → {meta.produces.length ? meta.produces.join(", ") : "(none)"}
+                          → {meta.produces.length ? meta.produces.join(", ") : L.noOutputs}
                         </span>
                       </div>
                     )}
@@ -257,4 +257,13 @@ function PipelineStripImpl({
   )
 }
 
-export const PipelineStrip = memo(PipelineStripImpl)
+/** A dense chrome bar: its Lucide icons draw at stroke 2 (CI §11), not the view's 2.5. */
+function DensePipelineStrip(props: Parameters<typeof PipelineStripImpl>[0]) {
+  return (
+    <LucideProvider strokeWidth={DENSE_ICON_STROKE}>
+      <PipelineStripImpl {...props} />
+    </LucideProvider>
+  )
+}
+
+export const PipelineStrip = memo(DensePipelineStrip)

package/src/app/builder/SaveDialog.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle } from "lucide-react"
+import { ErrorState } from "../../components/ErrorState.js"
 import { Button } from "../../primitives/button.js"
 import {
   Dialog,
@@ -52,7 +52,7 @@ export function SaveDialog({
             <Input
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="Invoice overview"
+              placeholder={L.saveNamePlaceholder}
               autoFocus
             />
           </label>
@@ -61,19 +61,18 @@ export function SaveDialog({
             <Input
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              placeholder="Optional"
+              placeholder={L.saveDescriptionPlaceholder}
             />
           </label>
+          {/* What happened and what to do in catalog words; the raw reason
+              only under Details. The Save button below is the retry. */}
           {error && (
-            <div
-              className="border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border px-3 py-2 text-xs"
-              role="alert"
-            >
-              <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
-              <span className="min-w-0 break-words">
-                <span className="font-medium">{L.saveError}:</span> {error}
-              </span>
-            </div>
+            <ErrorState
+              variant="inline"
+              title={L.saveError}
+              description={L.saveErrorHint}
+              details={error}
+            />
           )}
         </div>
         <DialogFooter>