@miragon/mcp-toolkit-ui 1.0.1 → 1.2.0

package/src/app/builder/use-save-dashboard.ts

@@ -0,0 +1,97 @@
+import { useCallback, useState } from "react"
+import type { PipelineStepRef } from "@miragon/mcp-toolkit-core"
+import { parseToolResult } from "../../lib/parse-tool-result.js"
+import { draftToLayout, entriesToKeys, type DraftLayout, type KeyEntry } from "./builder-model.js"
+
+// -------------------------------------------------------------------------- //
+// Save-dashboard hook — dialog state + the `save-dashboard` call
+// -------------------------------------------------------------------------- //
+
+/**
+ * Owns the save dialog's state (open flag, name/description inputs, busy
+ * flag, inline error) and the `save-dashboard` call. Extracted from
+ * `layout-builder.tsx` unchanged: a rejected save surfaces its reason
+ * inline in the SaveDialog instead of failing silently (Finding [3]).
+ */
+export function useSaveDashboard({
+  callTool,
+  saveToolName,
+  dashboardId,
+  title,
+  keyEntries,
+  stepEntries,
+  draft,
+  onSaved,
+}: {
+  callTool: (name: string, args: object) => Promise<unknown>
+  saveToolName: string
+  dashboardId?: string
+  title?: string
+  keyEntries: KeyEntry[]
+  stepEntries: PipelineStepRef[]
+  draft: DraftLayout
+  onSaved?: (result: { id: string; name: string }) => void
+}) {
+  const [isBusy, setBusy] = useState(false)
+  const [saveOpen, setSaveOpen] = useState(false)
+  const [saveName, setSaveName] = useState(title ?? "")
+  const [saveDescription, setSaveDescription] = useState("")
+  // Last save failure (Finding [3]). Shown inline in the SaveDialog so a
+  // rejected `save-dashboard` call no longer fails silently.
+  const [saveError, setSaveError] = useState<string | null>(null)
+
+  const saveDraft = useCallback(async () => {
+    if (!saveName.trim()) return
+    setBusy(true)
+    setSaveError(null)
+    try {
+      const result = await callTool(saveToolName, {
+        id: dashboardId,
+        name: saveName.trim(),
+        description: saveDescription.trim() || undefined,
+        keys: entriesToKeys(keyEntries),
+        steps: stepEntries.filter((s) => s.step.trim().length > 0),
+        layout: draftToLayout(draft),
+        title,
+      })
+      const saved = parseToolResult<{ id?: string; name?: string } | null>(result)
+      setSaveOpen(false)
+      if (saved?.id && onSaved) {
+        onSaved({
+          id: saved.id,
+          name: saved.name ?? saveName.trim(),
+        })
+      }
+    } catch (err) {
+      // Previously uncaught: a rejected `save-dashboard` left the dialog open
+      // with no feedback. Surface the reason inline (Finding [3]).
+      setSaveError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setBusy(false)
+    }
+  }, [
+    callTool,
+    dashboardId,
+    draft,
+    keyEntries,
+    onSaved,
+    saveDescription,
+    saveName,
+    saveToolName,
+    stepEntries,
+    title,
+  ])
+
+  return {
+    isBusy,
+    saveOpen,
+    setSaveOpen,
+    saveName,
+    setSaveName,
+    saveDescription,
+    setSaveDescription,
+    saveError,
+    setSaveError,
+    saveDraft,
+  }
+}

package/src/app/host-bridge.tsx

@@ -5,7 +5,7 @@ import { createContext, useContext, type ReactNode } from "react"
  * host runtime. A `HostBridge` is the single seam a portable widget talks to:
  * write the widget against {@link useHostBridge} and it runs unchanged in our
  * own `mcp-use` host, inside ChatGPT (OpenAI Apps SDK), or as a standalone web
- * app driven directly by a `@modelcontextprotocol/sdk` client — only the
+ * app driven directly by a `@modelcontextprotocol/client` client — only the
  * surrounding adapter changes.
  *
  * This is deliberately the *minimum* a deterministic UI needs, not a mirror of
@@ -288,7 +288,7 @@ export function createChatGptHostBridge(sdk?: OpenAiAppsSdk | null): HostBridge
 export interface StandaloneHostBridgeOptions {
   /**
    * The only required capability: how to call a tool on the server. In a
-   * standalone web app this typically wraps a `@modelcontextprotocol/sdk`
+   * standalone web app this typically wraps a `@modelcontextprotocol/client`
    * `Client.callTool({ name, arguments })`, but any function with this shape
    * works — that injection is the whole point: hand-built widgets render
    * against *any* existing MCP server without the toolkit's host runtime.
@@ -322,7 +322,7 @@ export interface StandaloneHostBridgeOptions {
 /**
  * Build a {@link HostBridge} for a standalone web app driven against an existing
  * MCP server — no toolkit host, no `createFrameworkApp`. You inject `callTool`
- * (usually a thin wrapper over a `@modelcontextprotocol/sdk` client); the
+ * (usually a thin wrapper over a `@modelcontextprotocol/client` client); the
  * conversation-shaped verbs (`sendFollowup`, `setModelContext`) are no-ops
  * unless you wire handlers, and `openExternal` defaults to `window.open`.
  *
@@ -332,7 +332,7 @@ export interface StandaloneHostBridgeOptions {
  * harness also builds on this factory so host simulation has a single source.
  *
  * @example
- * const client = new Client(…) // @modelcontextprotocol/sdk
+ * const client = new Client(…) // @modelcontextprotocol/client
  * const bridge = createStandaloneHostBridge({
  *   callTool: (name, args) => client.callTool({ name, arguments: args }),
  *   getData: () => currentRecord,