@tempo-ai/mcp 0.0.100-staging.1 → 0.0.100

package/dist/bin.js

@@ -2,7 +2,7 @@
 import { createRequire as __tempoCreateRequire } from 'node:module'; const require = __tempoCreateRequire(import.meta.url);
 import {
   run
-} from "./chunk-QTTJRK4J.js";
+} from "./chunk-EYHFTWP5.js";
 import "./chunk-JDPG7F4Z.js";
 
 // src/bin.ts

package/dist/{chunk-QTTJRK4J.js → chunk-EYHFTWP5.js}

@@ -127,7 +127,7 @@ async function run(argv) {
         process.stderr.write(USAGE);
         return 1;
       }
-      const { runServe } = await import("./serve-OI2RGYVP.js");
+      const { runServe } = await import("./serve-ODDE266E.js");
       return await runServe(options);
     }
     switch (subcommand) {
@@ -153,4 +153,4 @@ async function run(argv) {
 export {
   run
 };
-//# sourceMappingURL=chunk-QTTJRK4J.js.map
+//# sourceMappingURL=chunk-EYHFTWP5.js.map

package/dist/index.js

@@ -1,7 +1,7 @@
 import { createRequire as __tempoCreateRequire } from 'node:module'; const require = __tempoCreateRequire(import.meta.url);
 import {
   run
-} from "./chunk-QTTJRK4J.js";
+} from "./chunk-EYHFTWP5.js";
 import "./chunk-JDPG7F4Z.js";
 export {
   run

package/dist/{serve-OI2RGYVP.js → serve-ODDE266E.js}

@@ -15833,9 +15833,9 @@ Only as a narrow escape hatch:
 
 If a canvas-local file contains more than ~30 lines of UI code, that UI belongs in the app \u2014 unless it exists purely for canvas narration, which is prose about the design rather than product UI.
 
-### Explore before you build (required when adding new UI to the app)
+### Explore before UI work (required when creating or changing app UI)
 
-Before writing a single line of new UI, read the existing app to learn its patterns. This step is non-negotiable \u2014 skipping it is the #1 cause of canvases that "look like code from a random place":
+Before creating, modifying, restyling, or reviewing UI, read the existing app to learn its patterns. This step is non-negotiable \u2014 skipping it is the #1 cause of canvases that "look like code from a random place":
 
 1. **Routing** \u2014 read the app's router (\`src/App.tsx\`, \`app/\` directory, route config) to understand how pages are registered and how the app shell wraps them. If the new UI is a page, wire it into the real router.
 2. **Sibling screens** \u2014 read 2\u20133 existing screen/page components most similar to what you're building. Match their:
@@ -15844,7 +15844,7 @@ Before writing a single line of new UI, read the existing app to learn its patte
    - Layout primitives (AppShell? Sidebar + content? Card grid?)
    - State patterns (Redux slice? Context? Local state? RTK Query? Supabase?)
    - Styling approach (Tailwind classes? CSS modules? tokens from a theme file?)
-3. **Design system** \u2014 before reaching for a raw \`<div>\` or \`<button>\`, query the project's design system: \`asset_list\` returns every blessed component with a \`useFor\` line saying when to use it, and \`asset_get\` gives variants with real prop values. If the index is empty (no assembled design system), fall back to checking \`components/ui/\`, \`components/common/\`, or equivalent for an existing primitive. Prefer the app's components over hand-rolled ones every time.
+3. **Asset libraries** \u2014 query the project's reusable collections before reaching for a raw \`<div>\` or \`<button>\`: \`asset_list\` returns every blessed component with \`usageInstructions\` saying when to use it, and \`asset_get\` gives variants with real prop values. These libraries include the design system and may include other approved collections. If the index is empty or has no suitable asset, fall back to checking \`components/ui/\`, \`components/common/\`, or equivalent for an existing primitive. Prefer the app's components over hand-rolled ones every time.
 4. **Providers** \u2014 confirm the app's entry point wires every provider the new component needs. If you add a provider to make the new UI work, add it to the app's entry, not to CanvasProviders.
 5. **Mock data** \u2014 if backing data isn't available yet, hardcode realistic fixtures inline in the component as a "UI-only prototype". Do not build API clients or data-fetching scaffolding for a prototype.
 
@@ -16323,6 +16323,17 @@ If anything looks wrong, fix before calling \`finish_working_on_canvas\`. The us
 
 ---
 
+## 9.1 Pixel-perfect replication
+
+For UI that already exists, measure instead of guessing:
+
+1. Capture the reference at the target viewport through the Tempo CDP endpoint. Use \`get_tempo_context\` to match Browser tabs by URL; inspect computed styles only when the screenshot is insufficient.
+2. Reuse the real components and tokens where possible.
+3. Capture your result, compare it with the reference, fix visible differences, and repeat until they match. The one-screenshot limit above does not apply to this loop.
+4. For state-heavy UI, prefer a \`<RouteStoryboard>\` over rebuilding the screen.
+
+---
+
 ## 10. Constraints
 
 - No UUIDs, no JSON canvas configs
@@ -17245,23 +17256,24 @@ function registerDocs(server, context) {
 
 // ../canvas-mcp/instructions.ts
 function buildCanvasInstructions(canvasesDir, options) {
-  const designSystemSection = options?.assetsEnabled === false ? "" : `## The design system \u2014 check it before building UI
+  const assetLibrarySection = options?.assetsEnabled === false ? "" : `## Asset libraries
 
-When the user mentions the "design system", a component library, or reusable components \u2014 or you are about to write ANY new UI \u2014 call \`asset_list\` (or \`asset_list_libraries\`) FIRST and reuse what it returns; every asset's \`usageInstructions\` says when to use it. All asset_* reads are cheap: call them freely, no guide needed. To ADD or EDIT assets, FIRST call get_guide({ topic: "tempo-assets-instructions" }) \u2014 membership is canvas-declared (\`defineAsset\` on the showcasing canvas, declaring the TOP-LEVEL component a consumer imports \u2014 \`Select\`, never \`SelectTrigger\`).
+Before creating, modifying, restyling, or reviewing ANY UI, call \`asset_list\` FIRST and reuse results per \`usageInstructions\`. Do the same for design system, component library, or UI kit requests; use \`asset_list_libraries\` for a collection overview. To ADD or EDIT asset declarations, FIRST call get_guide({ topic: "tempo-assets-instructions" }) \u2014 \`defineAsset\` declares the TOP-LEVEL component consumers import (\`Select\`, never \`SelectTrigger\`).
 
 `;
-  return `Tempo's "Design" tab is a code-first Figma alternative. Canvases live under the canvases root ${canvasesDir}/, holding storyboards that render PRODUCTION components and routes \u2014 never mocks of existing UI.
+  return `Tempo's "Design" tab is a code-first Figma alternative. Canvases live under the canvases root ${canvasesDir}/, whose storyboards render PRODUCTION components and routes \u2014 never mocks of existing UI.
 
 Before any canvas change \u2014 including tempo.config.json edits (Docker, custom launchers, ports) \u2014 you MUST call get_guide({ topic: "tempo-canvas-instructions" }); it holds every protocol and overrides this summary.
 
-${designSystemSection}## Hard invariants
+${assetLibrarySection}## Hard invariants
 
-- No tempo.config.json \u2192 run canvas_project_init BEFORE any canvas work. \`tempo/\` is Tempo's canvas host, NOT the user's app \u2014 build new UI in the real app and import it, never inside the canvas folder.
+- No tempo.config.json \u2192 canvas_project_init BEFORE any canvas work. \`tempo/\` is Tempo's canvas host, NOT the user's app \u2014 build new UI in the real app and import it, never inside the canvas folder.
 - Zone canvases (design-system/**, libraries/<libname>/**) MUST defineAsset-declare their showcased components \u2014 else canvas_validate fails missing_asset_declaration.
 - Bookend every canvas session: start_working_on_canvas BEFORE the first mutating call (canvas_create included) \u2192 edits \u2192 canvas_screenshot on ONE edited storyboard \u2192 finish_working_on_canvas once. On screenshot failure: canvas_debug once, no retries.
-- Write is blocked on *.canvas.tsx \u2014 canvas_create creates canvases, Edit modifies them.
-- Route storyboards need the user's real app: set_app_dev_command once, start_app_dev_server before screenshotting one.
-- Link new canvases to their sibling issue/doc via link_items (branch pushed).`;
+- Write is blocked on *.canvas.tsx \u2014 canvas_create creates, Edit modifies.
+- Route storyboards need the user's real app: set_app_dev_command once, start_app_dev_server before screenshots.
+- Replicating existing UI (live page, Browser tab, URL)? Pixel parity is the goal: capture its screenshot/HTML/styles via the CDP endpoint, loop canvas_screenshot against it \u2014 guide \xA79.1.
+- Link new canvases to sibling issue/doc via link_items (branch pushed).`;
 }
 
 // ../canvas-mcp/tools.ts
@@ -20899,7 +20911,7 @@ function countByKind(entries) {
 function registerAssetTools(server, context) {
   server.tool(
     "asset_list_libraries",
-    "Start here for anything design-system related: a one-call overview of the project's design system \u2014 its libraries (named groups of assets; a library exists iff some `defineAsset` declaration names it) with component/canvas member counts, plus counts of library-less assets. Call it whenever the user mentions the design system, a component library, or asks what reusable components / building blocks exist. **Read-only and cheap** (fresh static scan of source; no code execution; no guide needed to browse). Returns `{ libraries: [{ name, componentCount, canvasCount }], unassigned: { componentCount, canvasCount } }`.",
+    "Discover the project's asset libraries: named collections of approved reusable components and canvases, including its design system, component library, UI kit, and future collections. Call for a broad collection overview or when the user asks what libraries, reusable components, canvases, or building blocks exist; use asset_list next to search their members. **Read-only and cheap** (fresh source scan; no code execution; no guide needed to browse). Returns `{ libraries: [{ name, componentCount, canvasCount }], unassigned: { componentCount, canvasCount } }`.",
     {},
     async () => {
       try {
@@ -20923,7 +20935,7 @@ function registerAssetTools(server, context) {
   );
   server.tool(
     "asset_library_get",
-    "Get one design-system library's members (components and canvases) with per-asset summaries. **Read-only and cheap** \u2014 no guide needed to browse. Returns `{ name, assets: [{ key, kind, name, filePath, usageInstructions?, canvasPath?, variantNames }] }`. Errors `library_not_found` when no asset names the library.",
+    "Get one asset library's approved reusable components and canvases with per-asset summaries. Use after asset_list_libraries when exploring a design system, component library, UI kit, or another named collection. **Read-only and cheap** \u2014 no guide needed to browse. Returns `{ name, assets: [{ key, kind, name, filePath, usageInstructions?, canvasPath?, variantNames }] }`. Errors `library_not_found` when no asset names the library.",
     {
       name: z22.string().describe(
         "Library name, exactly as listed by asset_list_libraries."
@@ -20950,14 +20962,20 @@ function registerAssetTools(server, context) {
       }
     }
   );
-  server.tool(
+  server.registerTool(
     "asset_list",
-    'List every asset in the project\'s design system \u2014 the components and canvases declared with `defineAsset` \u2014 optionally filtered by library and/or a name substring. Call it BEFORE building or restyling UI to find an existing component to reuse instead of hand-rolling one: each asset\'s `usageInstructions` is a one-line "when to use it (and when not)". **Read-only and cheap** (fresh static scan; no code execution; no guide needed to browse). Pass `library: ""` (empty string) to select library-less assets; omit `library` to list everything. Returns `{ assets: [{ key, kind, name, filePath, usageInstructions?, canvasPath?, componentFilePath?, variantNames, libraries }], fileErrors? }`. `canvasPath` marks canvas-declared components (the linked canvas folder \u2014 the declaring file is its `index.canvas.tsx`) and `componentFilePath` is the component\'s resolved defining file; `fileErrors` (present only when non-empty) reports structural declaration errors per file, e.g. `duplicate_asset_declaration` and `component_declaration_outside_canvas` \u2014 these also FAIL `canvas_validate` for any canvas they involve.',
     {
-      library: z22.string().optional().describe(
-        'Exact library name to filter by. "" (empty string) selects assets that belong to no library.'
-      ),
-      query: z22.string().optional().describe("Case-insensitive substring match on the asset name.")
+      description: "Primary asset-discovery tool for UI work. Search every approved reusable component and canvas declared with `defineAsset`, across the project's design system, component library, UI kit, and other asset libraries. Call BEFORE creating, modifying, restyling, or reviewing UI to reuse an existing building block instead of hand-rolling one; each asset's `usageInstructions` says when to use it and when not to. **Read-only and cheap** (fresh source scan; no code execution; no guide needed to browse). Filter by library and/or name; pass `library: \"\"` for library-less assets. Returns `{ assets: [{ key, kind, name, filePath, usageInstructions?, canvasPath?, componentFilePath?, variantNames, libraries }], fileErrors? }`. `fileErrors` reports structural declaration problems such as `duplicate_asset_declaration` and `component_declaration_outside_canvas`, which also fail `canvas_validate`.",
+      inputSchema: z22.object({
+        library: z22.string().optional().describe(
+          'Exact library name to filter by. "" (empty string) selects assets that belong to no library.'
+        ),
+        query: z22.string().optional().describe("Case-insensitive substring match on the asset name.")
+      }),
+      // Claude Code defers MCP definitions behind ToolSearch by default. This
+      // small discovery schema stays visible so the portable skill can call it
+      // immediately; other providers safely ignore this namespaced metadata.
+      _meta: { "anthropic/alwaysLoad": true }
     },
     async ({ library, query }) => {
       try {
@@ -20994,7 +21012,7 @@ function registerAssetTools(server, context) {
   );
   server.tool(
     "asset_get",
-    'Full detail for one asset: config (usageInstructions, libraries), variants with static prop values, warnings, and canvas info \u2014 `canvas` page info for canvas assets, `canvasPath` + `componentFilePath` for components declared on a canvas (the declaring file is `<canvasPath>/index.canvas.tsx`). **Read-only and cheap** \u2014 no guide needed to browse. Prop values the parser could not resolve statically are `{"$unresolved": true}`. `warnings` includes canvas-pointer validation: `missing_canvas_pointer` / `stale_canvas_pointer` mean the component\'s defining file lacks (or misstates) the docstring line naming its canvas path \u2014 the warning message contains the exact line to add; info-level `canvas_pointer_unverified` means the defining file could not be resolved. Errors `asset_not_found` for an unknown key.',
+    'Inspect one approved asset selected from a design system, component library, UI kit, or another asset library. Call after asset_list before reuse. Returns usageInstructions, library membership, real variants, warnings, and linked canvas/component paths. **Read-only and cheap** \u2014 no guide needed to browse. Prop values the parser could not resolve statically are `{"$unresolved": true}`. Canvas-pointer warnings identify missing or stale links and include the exact repair. Errors `asset_not_found` for an unknown key.',
     {
       assetKey: z22.string().describe(
         'Asset key as returned by the list tools: "<workspace-relative-path>#<bindingName>".'
@@ -45095,7 +45113,7 @@ function isExternallyExposed(toolName, opts) {
 }
 
 // src/version.ts
-var CLI_VERSION = "0.0.100-staging.1";
+var CLI_VERSION = "0.0.100";
 
 // src/canvas-hooks.ts
 var import_pngjs3 = __toESM(require_png(), 1);
@@ -45977,6 +45995,24 @@ import { createHash as createHash5 } from "crypto";
 import fs6 from "fs/promises";
 import os3 from "os";
 import path57 from "path";
+
+// ../workspaces/git-worktree/non-interactive-git.ts
+var NON_INTERACTIVE_GIT_CONFIG = [
+  "credential.interactive=false"
+];
+function nonInteractiveGitEnv(base = process.env) {
+  return {
+    ...base,
+    GIT_TERMINAL_PROMPT: "0",
+    GCM_INTERACTIVE: "never",
+    // Disable OpenSSH's graphical askpass without replacing GIT_SSH,
+    // GIT_SSH_COMMAND, or a repository's core.sshCommand. Replacing those
+    // would break configured transports such as PuTTY/plink.
+    SSH_ASKPASS_REQUIRE: "never"
+  };
+}
+
+// ../workspaces/git-worktree/worktree.ts
 var GIT_CONFIG = ["core.optionalLocks=false"];
 function simpleGit2(repoPath) {
   return repoPath ? simpleGit({ baseDir: repoPath, config: [...GIT_CONFIG] }) : simpleGit({ config: [...GIT_CONFIG] });
@@ -46066,9 +46102,9 @@ async function computeShareStatus(repoPath) {
 async function checkBranchOnRemote(repoPath, branch) {
   const git = simpleGit({
     baseDir: repoPath,
-    config: [...GIT_CONFIG],
+    config: [...GIT_CONFIG, ...NON_INTERACTIVE_GIT_CONFIG],
     timeout: { block: 15e3 }
-  }).env({ ...process.env, GIT_TERMINAL_PROMPT: "0" });
+  }).env(nonInteractiveGitEnv());
   try {
     const out = await git.raw(["ls-remote", "--heads", "origin", branch]);
     return out.trim().length > 0;
@@ -46870,4 +46906,4 @@ export {
   runServe,
   scopeParamsFor
 };
-//# sourceMappingURL=serve-OI2RGYVP.js.map
+//# sourceMappingURL=serve-ODDE266E.js.map