@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

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"
@@ -11,14 +12,231 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../primitives/select.js"
-import { formatLiveKeyValue, valueTypeLabel, type KeyEntry } from "./builder-model.js"
+import {
+  displayLabel,
+  formatLiveKeyValue,
+  valueTypeLabel,
+  type DisplayKeyResolver,
+  type KeyEntry,
+} from "./builder-model.js"
 import type { LayoutBuilderLabels, RefreshStatus } from "./labels.js"
 import { StatusChip } from "./status-chip.js"
+import { useDisplayResolver } from "./use-display-resolver.js"
 
 // -------------------------------------------------------------------------- //
-// Pipeline strip — compact horizontal Keys + Steps
+// Pipeline strip — the data sources (advanced mode): keys + steps
 // -------------------------------------------------------------------------- //
 
+type Labels = Required<LayoutBuilderLabels>
+
+/** "needs a, b · provides c" in words (no arrow glyphs): a step's contract. */
+function StepContract({ L, step }: { L: Labels; step: AvailableStep }) {
+  return (
+    <span className="text-muted-foreground text-small flex flex-wrap gap-x-2">
+      <span>
+        {L.catalogueNeedsKeys}{" "}
+        <span className="font-mono">
+          {step.requires.length ? step.requires.join(", ") : L.noInputs}
+        </span>
+      </span>
+      <span>
+        {L.stepProvides}{" "}
+        <span className="font-mono">
+          {step.produces.length ? step.produces.join(", ") : L.noOutputs}
+        </span>
+      </span>
+    </span>
+  )
+}
+
+function KeyRows({
+  L,
+  keyEntries,
+  keyCatalog,
+  liveKeys,
+  onUpdateKey,
+  onRemoveKey,
+}: {
+  L: Labels
+  keyEntries: KeyEntry[]
+  keyCatalog: KeyCatalogEntry[]
+  liveKeys: Record<string, unknown>
+  onUpdateKey: (idx: number, patch: Partial<KeyEntry>) => void
+  onRemoveKey: (idx: number) => void
+}) {
+  return (
+    <ul className="flex flex-col gap-1">
+      {keyEntries.map((entry, idx) => {
+        const livePreview = formatLiveKeyValue(liveKeys[entry.name], L.catalogueLive)
+        const usedNames = new Set(
+          keyEntries.map((e, i) => (i === idx ? "" : e.name)).filter(Boolean),
+        )
+        const pickable = keyCatalog.filter((c) => c.key === entry.name || !usedNames.has(c.key))
+        return (
+          <li key={idx} className="grid grid-cols-2 items-center gap-1">
+            <Select
+              value={entry.name || undefined}
+              onValueChange={(value) => onUpdateKey(idx, { name: value })}
+            >
+              <SelectTrigger aria-label={L.keyName} className="text-small h-7 min-w-0 font-mono">
+                {/* The trigger names the chosen key only; who uses it shows in the list. */}
+                <SelectValue placeholder={L.keyName}>{entry.name || null}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {pickable.length === 0 ? (
+                  <div className="text-muted-foreground text-small px-2 py-1.5 italic">
+                    {L.noMoreKeys}
+                  </div>
+                ) : (
+                  pickable.map((c) => (
+                    <SelectItem key={c.key} value={c.key} className="py-1.5">
+                      <div className="flex flex-col gap-0.5">
+                        <span className="text-small font-mono">{c.key}</span>
+                        {c.consumedByWidgets.length + c.consumedBySteps.length > 0 && (
+                          <span className="text-muted-foreground text-small">
+                            {L.catalogueConsumedBy}{" "}
+                            <span className="font-mono">
+                              {[...c.consumedByWidgets, ...c.consumedBySteps].join(", ")}
+                            </span>
+                          </span>
+                        )}
+                      </div>
+                    </SelectItem>
+                  ))
+                )}
+              </SelectContent>
+            </Select>
+            <div className="flex min-w-0 items-center gap-1">
+              <div className="relative min-w-0 flex-1">
+                <Input
+                  aria-label={L.keyValueFor(entry.name)}
+                  value={entry.rawValue}
+                  onChange={(e) => onUpdateKey(idx, { rawValue: e.target.value })}
+                  placeholder={livePreview ?? L.keyValue}
+                  className="text-small h-7 pr-14 font-mono"
+                />
+                <span
+                  className="text-muted-foreground text-small pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 tabular-nums"
+                  title={L.parsedType}
+                >
+                  {L.valueType(valueTypeLabel(entry.rawValue))}
+                </span>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                onClick={() => onRemoveKey(idx)}
+                aria-label={L.removeKey}
+              >
+                <X aria-hidden="true" />
+              </Button>
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+function StepRows({
+  L,
+  stepEntries,
+  stepLookup,
+  stepsByApp,
+  locale,
+  resolveKey,
+  onUpdateStep,
+  onRemoveStep,
+}: {
+  L: Labels
+  stepEntries: PipelineStepRef[]
+  stepLookup: Map<string, AvailableStep>
+  stepsByApp: [string, AvailableStep[]][]
+  locale: string
+  resolveKey: DisplayKeyResolver
+  onUpdateStep: (idx: number, patch: Partial<PipelineStepRef>) => void
+  onRemoveStep: (idx: number) => void
+}) {
+  return (
+    <ul className="flex flex-col gap-1">
+      {stepEntries.map((step, idx) => {
+        const meta = stepLookup.get(step.step)
+        const selected = meta ? displayLabel(meta, meta.id, locale, resolveKey).label : step.step
+        return (
+          <li key={idx} className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1">
+              <Input
+                aria-label={L.stepContextId}
+                value={step.id}
+                onChange={(e) => onUpdateStep(idx, { id: e.target.value })}
+                placeholder={L.stepContextId}
+                className="text-small h-7 w-24 font-mono"
+              />
+              <Select
+                value={step.step || undefined}
+                onValueChange={(value) => onUpdateStep(idx, { step: value })}
+              >
+                <SelectTrigger
+                  aria-label={L.stepPickerLabel}
+                  className="text-small h-7 min-w-0 flex-1"
+                >
+                  {/* The trigger names the chosen step only; its contract follows below. */}
+                  <SelectValue placeholder={L.stepPickerLabel}>
+                    {step.step ? selected : null}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {stepsByApp.map(([app, items]) => (
+                    <div key={app}>
+                      <div className="text-muted-foreground text-small px-2 py-1 font-semibold">
+                        {app}
+                      </div>
+                      {items.map((s) => {
+                        const name = displayLabel(s, s.id, locale, resolveKey)
+                        return (
+                          <SelectItem key={s.id} value={s.id} className="py-2">
+                            <div className="flex flex-col gap-0.5">
+                              <span className="text-small font-medium">{name.label}</span>
+                              {name.summary && (
+                                <span className="text-muted-foreground text-small">
+                                  {name.summary}
+                                </span>
+                              )}
+                              {name.hint && (
+                                <span className="text-muted-foreground text-small font-mono">
+                                  {name.hint}
+                                </span>
+                              )}
+                              <StepContract L={L} step={s} />
+                            </div>
+                          </SelectItem>
+                        )
+                      })}
+                    </div>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                onClick={() => onRemoveStep(idx)}
+                aria-label={L.removeStep}
+              >
+                <X aria-hidden="true" />
+              </Button>
+            </div>
+            {meta && (
+              <div className="ml-1 pl-24">
+                <StepContract L={L} step={meta} />
+              </div>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
 function PipelineStripImpl({
   L,
   keyEntries,
@@ -35,7 +253,7 @@ function PipelineStripImpl({
   onRemoveStep,
   status,
 }: {
-  L: Required<LayoutBuilderLabels>
+  L: Labels
   keyEntries: KeyEntry[]
   stepEntries: PipelineStepRef[]
   keyCatalog: KeyCatalogEntry[]
@@ -50,6 +268,7 @@ function PipelineStripImpl({
   onRemoveStep: (idx: number) => void
   status: RefreshStatus
 }) {
+  const { locale, resolveKey } = useDisplayResolver()
   const stepLookup = useMemo(() => {
     const map = new Map<string, AvailableStep>()
     for (const s of availableSteps) map.set(s.id, s)
@@ -58,97 +277,36 @@ function PipelineStripImpl({
 
   return (
     <section className="bg-muted/30 -mx-1 rounded-lg border px-3 py-3">
-      <div className="mb-2 flex items-center gap-2">
-        <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>
-        <div className="ml-auto text-[11px]">
+      <div className="mb-2 flex flex-wrap items-center gap-2">
+        <h3 className="text-muted-foreground text-small font-semibold">{L.pipelineHeader}</h3>
+        <span className="text-muted-foreground text-small">{L.autoApplies}</span>
+        <div className="text-small ml-auto">
           <StatusChip status={status} L={L} />
         </div>
       </div>
 
       <div className="grid grid-cols-1 gap-x-6 gap-y-3 lg:grid-cols-2">
         <div className="flex flex-col gap-1.5">
-          <div className="text-muted-foreground flex items-center gap-1.5 text-[11px] font-semibold">
-            <ArrowRightToLine className="size-3" />
+          <div className="text-muted-foreground text-small flex items-center gap-1.5 font-semibold">
+            <ArrowRightToLine aria-hidden="true" className="size-3.5" />
             {L.keysHeader}
-            <Badge variant="outline" className="px-1.5 text-[10px]">
+            <Badge variant="outline" className="px-1.5">
               {keyEntries.length}
             </Badge>
           </div>
           {keyEntries.length === 0 ? (
-            <div className="text-muted-foreground rounded-md border border-dashed px-2 py-1.5 text-xs italic">
+            <div className="text-muted-foreground text-small rounded-md border border-dashed px-2 py-1.5 italic">
               {L.emptyKeys}
             </div>
           ) : (
-            <ul className="flex flex-col gap-1">
-              {keyEntries.map((entry, idx) => {
-                const livePreview = formatLiveKeyValue(liveKeys[entry.name])
-                const usedNames = new Set(
-                  keyEntries.map((e, i) => (i === idx ? "" : e.name)).filter(Boolean),
-                )
-                const pickable = keyCatalog.filter(
-                  (c) => c.key === entry.name || !usedNames.has(c.key),
-                )
-                return (
-                  <li key={idx} className="grid grid-cols-2 items-center gap-1">
-                    <Select
-                      value={entry.name || undefined}
-                      onValueChange={(value) => onUpdateKey(idx, { name: value })}
-                    >
-                      <SelectTrigger className="h-7 min-w-0 font-mono text-xs">
-                        <SelectValue placeholder={L.keyName} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {pickable.length === 0 ? (
-                          <div className="text-muted-foreground px-2 py-1.5 text-xs italic">
-                            No more keys available.
-                          </div>
-                        ) : (
-                          pickable.map((c) => (
-                            <SelectItem key={c.key} value={c.key} className="py-1.5">
-                              <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]">
-                                    → {[...c.consumedByWidgets, ...c.consumedBySteps].join(", ")}
-                                  </span>
-                                )}
-                              </div>
-                            </SelectItem>
-                          ))
-                        )}
-                      </SelectContent>
-                    </Select>
-                    <div className="flex min-w-0 items-center gap-1">
-                      <div className="relative min-w-0 flex-1">
-                        <Input
-                          value={entry.rawValue}
-                          onChange={(e) => onUpdateKey(idx, { rawValue: e.target.value })}
-                          placeholder={livePreview ?? L.keyValue}
-                          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"
-                        >
-                          {valueTypeLabel(entry.rawValue)}
-                        </span>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="icon-xs"
-                        onClick={() => onRemoveKey(idx)}
-                        aria-label="Remove key"
-                      >
-                        <X />
-                      </Button>
-                    </div>
-                  </li>
-                )
-              })}
-            </ul>
+            <KeyRows
+              L={L}
+              keyEntries={keyEntries}
+              keyCatalog={keyCatalog}
+              liveKeys={liveKeys}
+              onUpdateKey={onUpdateKey}
+              onRemoveKey={onRemoveKey}
+            />
           )}
           <Button
             variant="ghost"
@@ -156,91 +314,33 @@ function PipelineStripImpl({
             onClick={() => onAddKey()}
             className="text-muted-foreground hover:text-foreground self-start"
           >
-            <Plus /> {L.addKey}
+            <Plus aria-hidden="true" /> {L.addKey}
           </Button>
         </div>
 
         <div className="flex flex-col gap-1.5">
-          <div className="text-muted-foreground flex items-center gap-1.5 text-[11px] font-semibold">
-            <ArrowDownToLine className="size-3" />
+          <div className="text-muted-foreground text-small flex items-center gap-1.5 font-semibold">
+            <ArrowDownToLine aria-hidden="true" className="size-3.5" />
             {L.stepsHeader}
-            <Badge variant="outline" className="px-1.5 text-[10px]">
+            <Badge variant="outline" className="px-1.5">
               {stepEntries.length}
             </Badge>
           </div>
           {stepEntries.length === 0 ? (
-            <div className="text-muted-foreground rounded-md border border-dashed px-2 py-1.5 text-xs italic">
+            <div className="text-muted-foreground text-small rounded-md border border-dashed px-2 py-1.5 italic">
               {L.emptySteps}
             </div>
           ) : (
-            <ul className="flex flex-col gap-1">
-              {stepEntries.map((step, idx) => {
-                const meta = stepLookup.get(step.step)
-                return (
-                  <li key={idx} className="flex flex-col gap-0.5">
-                    <div className="flex items-center gap-1">
-                      <Input
-                        value={step.id}
-                        onChange={(e) => onUpdateStep(idx, { id: e.target.value })}
-                        placeholder={L.stepContextId}
-                        className="h-7 w-24 font-mono text-xs"
-                      />
-                      <Select
-                        value={step.step || undefined}
-                        onValueChange={(value) => onUpdateStep(idx, { step: value })}
-                      >
-                        <SelectTrigger className="h-7 flex-1 text-xs">
-                          <SelectValue placeholder={L.stepPickerLabel} />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {stepsByApp.map(([app, items]) => (
-                            <div key={app}>
-                              <div className="text-muted-foreground px-2 py-1 text-[10px] font-semibold tracking-wide uppercase">
-                                {app}
-                              </div>
-                              {items.map((s) => (
-                                <SelectItem key={s.id} value={s.id} className="py-2">
-                                  <div className="flex flex-col gap-0.5">
-                                    <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)"}
-                                      </span>
-                                      <span className="font-mono">
-                                        → {s.produces.length ? s.produces.join(", ") : "(none)"}
-                                      </span>
-                                    </div>
-                                  </div>
-                                </SelectItem>
-                              ))}
-                            </div>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <Button
-                        variant="ghost"
-                        size="icon-xs"
-                        onClick={() => onRemoveStep(idx)}
-                        aria-label="Remove step"
-                      >
-                        <X />
-                      </Button>
-                    </div>
-                    {meta && (
-                      <div className="text-muted-foreground/80 ml-1 flex flex-wrap gap-x-2 pl-24 text-[10px]">
-                        <span className="font-mono">
-                          ← {meta.requires.length ? meta.requires.join(", ") : "(no inputs)"}
-                        </span>
-                        <span className="font-mono">
-                          → {meta.produces.length ? meta.produces.join(", ") : "(none)"}
-                        </span>
-                      </div>
-                    )}
-                  </li>
-                )
-              })}
-            </ul>
+            <StepRows
+              L={L}
+              stepEntries={stepEntries}
+              stepLookup={stepLookup}
+              stepsByApp={stepsByApp}
+              locale={locale}
+              resolveKey={resolveKey}
+              onUpdateStep={onUpdateStep}
+              onRemoveStep={onRemoveStep}
+            />
           )}
           <Button
             variant="ghost"
@@ -249,7 +349,7 @@ function PipelineStripImpl({
             disabled={availableSteps.length === 0}
             className="text-muted-foreground hover:text-foreground self-start"
           >
-            <Plus /> {L.addStep}
+            <Plus aria-hidden="true" /> {L.addStep}
           </Button>
         </div>
       </div>
@@ -257,4 +357,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,
@@ -16,10 +16,17 @@ import type { LayoutBuilderLabels } from "./labels.js"
 // Save dialog
 // -------------------------------------------------------------------------- //
 
+/**
+ * Names the draft and saves it as a dashboard. Its description mentions Apply
+ * only where there is one (`canApply`: the builder has an `onExit`). Opens
+ * with the focus on the name field and hands it back to "Save as dashboard"
+ * when it closes.
+ */
 export function SaveDialog({
   L,
   open,
   onOpenChange,
+  canApply,
   name,
   setName,
   description,
@@ -31,6 +38,8 @@ export function SaveDialog({
   L: Required<LayoutBuilderLabels>
   open: boolean
   onOpenChange: (open: boolean) => void
+  /** The builder has a view to apply the draft to (an `onExit`). */
+  canApply: boolean
   name: string
   setName: (v: string) => void
   description: string
@@ -44,16 +53,19 @@ export function SaveDialog({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>{L.saveDialogTitle}</DialogTitle>
-          <DialogDescription>{L.saveDialogDescription}</DialogDescription>
+          <DialogDescription>
+            {canApply ? L.saveDialogDescription : L.saveDialogDescriptionStandalone}
+          </DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-3">
           <label className="flex flex-col gap-1 text-sm">
             <span className="font-medium">{L.saveNameLabel}</span>
+            {/* No autoFocus: the dialog focuses this first field itself, and
+                only then notes where to hand the focus back on close. */}
             <Input
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="Invoice overview"
-              autoFocus
+              placeholder={L.saveNamePlaceholder}
             />
           </label>
           <label className="flex flex-col gap-1 text-sm">
@@ -61,19 +73,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>