@miragon/mcp-toolkit-ui 0.10.1

package/src/app/builder/PipelineStrip.tsx

@@ -0,0 +1,260 @@
+import { memo, useMemo } from "react"
+import { ArrowDownToLine, ArrowRightToLine, Plus, X } from "lucide-react"
+import type { AvailableStep, KeyCatalogEntry, PipelineStepRef } from "@miragon/mcp-toolkit-core"
+import { Badge } from "../../primitives/badge.js"
+import { Button } from "../../primitives/button.js"
+import { Input } from "../../primitives/input.js"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../primitives/select.js"
+import { formatLiveKeyValue, valueTypeLabel, type KeyEntry } from "./builder-model.js"
+import type { LayoutBuilderLabels, RefreshStatus } from "./labels.js"
+import { StatusChip } from "./status-chip.js"
+
+// -------------------------------------------------------------------------- //
+// Pipeline strip — compact horizontal Keys + Steps
+// -------------------------------------------------------------------------- //
+
+function PipelineStripImpl({
+  L,
+  keyEntries,
+  stepEntries,
+  keyCatalog,
+  availableSteps,
+  stepsByApp,
+  liveKeys,
+  onAddKey,
+  onUpdateKey,
+  onRemoveKey,
+  onAddStep,
+  onUpdateStep,
+  onRemoveStep,
+  status,
+}: {
+  L: Required<LayoutBuilderLabels>
+  keyEntries: KeyEntry[]
+  stepEntries: PipelineStepRef[]
+  keyCatalog: KeyCatalogEntry[]
+  availableSteps: AvailableStep[]
+  stepsByApp: [string, AvailableStep[]][]
+  liveKeys: Record<string, unknown>
+  onAddKey: (prefilledName?: string) => void
+  onUpdateKey: (idx: number, patch: Partial<KeyEntry>) => void
+  onRemoveKey: (idx: number) => void
+  onAddStep: (stepId?: string) => void
+  onUpdateStep: (idx: number, patch: Partial<PipelineStepRef>) => void
+  onRemoveStep: (idx: number) => void
+  status: RefreshStatus
+}) {
+  const stepLookup = useMemo(() => {
+    const map = new Map<string, AvailableStep>()
+    for (const s of availableSteps) map.set(s.id, s)
+    return map
+  }, [availableSteps])
+
+  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]">
+          <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" />
+            {L.keysHeader}
+            <Badge variant="outline" className="px-1.5 text-[10px]">
+              {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">
+              {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>
+          )}
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={() => onAddKey()}
+            className="text-muted-foreground hover:text-foreground self-start"
+          >
+            <Plus /> {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" />
+            {L.stepsHeader}
+            <Badge variant="outline" className="px-1.5 text-[10px]">
+              {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">
+              {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>
+          )}
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={() => onAddStep()}
+            disabled={availableSteps.length === 0}
+            className="text-muted-foreground hover:text-foreground self-start"
+          >
+            <Plus /> {L.addStep}
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export const PipelineStrip = memo(PipelineStripImpl)

package/src/app/builder/PreviewPane.tsx

@@ -0,0 +1,72 @@
+import { memo } from "react"
+import type { RowDef, WidgetProps } from "@miragon/mcp-toolkit-core"
+import { GridItem, GridLayout } from "../../components/GridLayout.js"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../primitives/tabs.js"
+import { RenderedWidget, type WidgetComponent } from "../widget-renderer.js"
+import type { DraftLayout } from "./builder-model.js"
+
+// -------------------------------------------------------------------------- //
+// Preview pane
+// -------------------------------------------------------------------------- //
+
+function PreviewPaneImpl({
+  draft,
+  activeTabIndex,
+  setActiveTabIndex,
+  widgets,
+  widgetProps,
+}: {
+  draft: DraftLayout
+  activeTabIndex: number
+  setActiveTabIndex: (idx: number) => void
+  widgets: Record<string, WidgetComponent>
+  widgetProps: WidgetProps
+}) {
+  const renderRows = (rs: RowDef[]) => (
+    <div className="flex flex-col gap-4">
+      {rs.map((row, rowIdx) => (
+        <GridLayout key={rowIdx}>
+          {row.row.map((cell, cellIdx) => (
+            <GridItem key={`${cell.widget}-${cellIdx}`} span={cell.span ?? 12}>
+              <RenderedWidget
+                widget={widgets[cell.widget]}
+                widgetId={cell.widget}
+                props={widgetProps}
+                cellProps={cell.props}
+                showEmptyHint
+              />
+            </GridItem>
+          ))}
+        </GridLayout>
+      ))}
+    </div>
+  )
+
+  if (draft.kind === "tabs") {
+    return (
+      <Tabs
+        value={draft.tabs[activeTabIndex]?.label ?? ""}
+        onValueChange={(label) => {
+          const idx = draft.tabs.findIndex((t) => t.label === label)
+          if (idx >= 0) setActiveTabIndex(idx)
+        }}
+      >
+        <TabsList>
+          {draft.tabs.map((tab) => (
+            <TabsTrigger key={tab.label} value={tab.label}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {draft.tabs.map((tab) => (
+          <TabsContent key={tab.label} value={tab.label} className="mt-3">
+            {renderRows(tab.rows)}
+          </TabsContent>
+        ))}
+      </Tabs>
+    )
+  }
+  return renderRows(draft.rows)
+}
+
+export const PreviewPane = memo(PreviewPaneImpl)

package/src/app/builder/SaveDialog.tsx

@@ -0,0 +1,95 @@
+import { AlertTriangle } from "lucide-react"
+import { Button } from "../../primitives/button.js"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../primitives/dialog.js"
+import { Input } from "../../primitives/input.js"
+import type { LayoutBuilderLabels } from "./labels.js"
+
+// -------------------------------------------------------------------------- //
+// Save dialog
+// -------------------------------------------------------------------------- //
+
+export function SaveDialog({
+  L,
+  open,
+  onOpenChange,
+  name,
+  setName,
+  description,
+  setDescription,
+  onSubmit,
+  busy,
+  error,
+}: {
+  L: Required<LayoutBuilderLabels>
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  name: string
+  setName: (v: string) => void
+  description: string
+  setDescription: (v: string) => void
+  onSubmit: () => Promise<void>
+  busy: boolean
+  error: string | null
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{L.saveDialogTitle}</DialogTitle>
+          <DialogDescription>{L.saveDialogDescription}</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>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Invoice overview"
+              autoFocus
+            />
+          </label>
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{L.saveDescriptionLabel}</span>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional"
+            />
+          </label>
+          {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>
+          )}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">{L.cancel}</Button>
+          </DialogClose>
+          <Button
+            disabled={!name.trim() || busy}
+            onClick={() => {
+              void onSubmit()
+            }}
+          >
+            {L.saveConfirm}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/app/builder/Toolbar.tsx

@@ -0,0 +1,95 @@
+import { memo } from "react"
+import { Check, Eye, Layers, Library, Save } from "lucide-react"
+import { Badge } from "../../primitives/badge.js"
+import { Button } from "../../primitives/button.js"
+import { cn } from "../../lib/utils.js"
+import type { LayoutBuilderLabels, RefreshStatus } from "./labels.js"
+import { StatusChip } from "./status-chip.js"
+
+// -------------------------------------------------------------------------- //
+// Toolbar — sticky top, dense status row + actions
+// -------------------------------------------------------------------------- //
+
+function ToolbarImpl({
+  L,
+  previewMode,
+  isBusy,
+  status,
+  liveKeys,
+  reachableCount,
+  unreachableCount,
+  onOpenCatalogue,
+  onOpenSave,
+  onDone,
+  hasAnyCell,
+}: {
+  L: Required<LayoutBuilderLabels>
+  previewMode: boolean
+  isBusy: boolean
+  status: RefreshStatus
+  liveKeys: number
+  reachableCount: number
+  unreachableCount: number
+  onOpenCatalogue: () => void
+  onOpenSave: () => void
+  onDone?: () => void
+  hasAnyCell: boolean
+}) {
+  return (
+    <header className="bg-background/80 sticky top-0 z-10 -mx-1 flex flex-wrap items-center gap-3 border-b px-1 py-2 backdrop-blur">
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            "inline-flex size-6 items-center justify-center rounded-md",
+            previewMode ? "bg-emerald-500/10 text-emerald-500" : "bg-primary/10 text-primary",
+          )}
+          aria-hidden="true"
+        >
+          {previewMode ? <Eye className="size-3.5" /> : <Layers className="size-3.5" />}
+        </span>
+        <h2 className="text-sm font-semibold tracking-tight">{L.title}</h2>
+        <Badge variant={previewMode ? "outline" : "secondary"} className="font-normal">
+          {previewMode ? L.previewBadge : L.builderBadge}
+        </Badge>
+      </div>
+
+      <div className="text-muted-foreground hidden items-center gap-3 text-[11px] sm:flex">
+        <span className="inline-flex items-center gap-1.5">
+          <span className="size-1.5 rounded-full bg-emerald-500" />
+          <span>
+            <span className="text-foreground font-medium">{liveKeys}</span> live
+          </span>
+        </span>
+        <span className="bg-border h-3 w-px" aria-hidden="true" />
+        <span>
+          <span className="text-foreground font-medium">{reachableCount}</span> reachable
+        </span>
+        {unreachableCount > 0 && (
+          <>
+            <span className="bg-border h-3 w-px" aria-hidden="true" />
+            <span>
+              <span className="text-foreground font-medium">{unreachableCount}</span> unreachable
+            </span>
+          </>
+        )}
+        <StatusChip status={status} L={L} />
+      </div>
+
+      <div className="ml-auto flex items-center gap-1">
+        <Button variant="ghost" size="sm" onClick={onOpenCatalogue}>
+          <Library /> {L.catalogue}
+        </Button>
+        <Button size="sm" onClick={onOpenSave} disabled={isBusy || !hasAnyCell}>
+          <Save /> {L.save}
+        </Button>
+        {onDone && (
+          <Button variant="outline" size="sm" onClick={onDone}>
+            <Check /> {L.done}
+          </Button>
+        )}
+      </div>
+    </header>
+  )
+}
+
+export const Toolbar = memo(ToolbarImpl)