@aprovan/stitchery 0.1.0-dev.6bd527d

package/dist/cli.js

@@ -0,0 +1,1389 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import path2 from "path";
+import fs2 from "fs";
+import { Command } from "commander";
+
+// src/server/index.ts
+import { createServer } from "http";
+import { createMCPClient } from "@ai-sdk/mcp";
+import { Experimental_StdioMCPTransport } from "@ai-sdk/mcp/mcp-stdio";
+import { createUtcpBackend } from "@aprovan/patchwork-utcp";
+import { jsonSchema as jsonSchema2 } from "ai";
+
+// src/server/routes.ts
+import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
+import {
+  streamText,
+  convertToModelMessages,
+  stepCountIs
+} from "ai";
+
+// src/prompts.ts
+var PATCHWORK_PROMPT = `
+You are a friendly assistant! When responding to the user, you _must_ respond with JSX files!
+
+Look at 'patchwork.compilers' to see what specific runtime components and libraries are supported. (e.g. '['@aprovan/patchwork-image-shadcn' supports React, Tailwind, & ShadCN components). If there are no compilers, respond as you normally would. If compilers are available, ALWAYS respond with a component following [Component Generation](#component-generation).
+
+Look at 'patchwork.services' to see what services are available for widgets to call. If services are listed, you can generate widgets that make service calls using global namespace objects.
+
+**IMPORTANT: If you need to discover available services or get details about a specific service, use the \`search_services\` tool.**
+
+## Component Generation
+
+Respond with code blocks using tagged attributes on the fence line. The \`note\` attribute (optional but encouraged) provides a brief description visible in the UI. The \`path\` attribute specifies the virtual file path.
+
+### Code Block Format
+
+\`\`\`tsx note="Main component" path="components/weather/main.tsx"
+export default function WeatherWidget() {
+  // component code
+}
+\`\`\`
+
+### Attribute Order
+Put \`note\` first so it's available soonest in streaming UI.
+
+### Multi-File Generation
+
+When generating complex widgets, you can output multiple files. Use the \`@/\` prefix for virtual file system paths. ALWAYS prefer to generate visible components before metadata.
+
+**Example multi-file widget:**
+
+\`\`\`json note="Widget configuration" path="components/dashboard/package.json"
+{
+  "description": "Interactive dashboard widget",
+  "patchwork": {
+    "inputs": {
+      "type": "object",
+      "properties": {
+        "title": { "type": "string" }
+      }
+    },
+    "services": {
+      "analytics": ["getMetrics", "getChartData"]
+    }
+  }
+}
+\`\`\`
+
+\`\`\`tsx note="Main widget component" path="components/dashboard/main.tsx"
+import { Card } from './Card';
+import { Chart } from './Chart';
+
+export default function Dashboard({ title = "Dashboard" }) {
+  return (
+    <div>
+      <h1>{title}</h1>
+      <Card />
+      <Chart />
+    </div>
+  );
+}
+\`\`\`
+
+\`\`\`tsx note="Card subcomponent" path="components/dashboard/Card.tsx"
+export function Card() {
+  return <div className="p-4 rounded border">Card content</div>;
+}
+\`\`\`
+
+### Requirements
+- DO think heavily about correctness of code and syntax
+- DO keep things simple and self-contained
+- ALWAYS include the \`path\` attribute specifying the file location. Be generic with the name and describe the general component's use
+- ALWAYS output the COMPLETE code block with opening \`\`\`tsx and closing \`\`\` markers
+- Use \`note\` attribute to describe what each code block does (optional but encouraged)
+- NEVER truncate or cut off code - finish the entire component before stopping
+- If the component is complex, simplify it rather than leaving it incomplete
+- Do NOT include: a heading/title
+
+### Visual Design Guidelines
+Create professional, polished interfaces that present information **spatially** rather than as vertical lists:
+- Use **cards, grids, and flexbox layouts** to organize related data into visual groups
+- Leverage **icons** (from lucide-react) alongside text to communicate meaning at a glance
+- Apply **visual hierarchy** through typography scale, weight, and color contrast
+- Use **whitespace strategically** to create breathing room and separation
+- Prefer **horizontal arrangements** where data fits naturally (e.g., stats in a row, badges inline)
+- Group related metrics into **compact visual clusters** rather than separate line items
+- Use **subtle backgrounds, borders, and shadows** to define sections without heavy dividers
+
+### Root Element Constraints
+The component will be rendered inside a parent container that handles positioning. Your root element should:
+- \u2705 Use intrinsic sizing (let content determine dimensions)
+- \u2705 Handle internal padding (e.g., \`p-4\`, \`p-6\`)
+- \u274C NEVER add centering utilities (\`items-center\`, \`justify-center\`) to position itself
+- \u274C NEVER add viewport-relative sizing (\`min-h-screen\`, \`h-screen\`, \`w-screen\`)
+- \u274C NEVER add flex/grid on root just for self-centering
+
+### Using Services in Widgets (CRITICAL)
+
+**MANDATORY workflow - you must follow these steps IN ORDER:**
+
+1. **Use \`search_services\`** to discover the service schema
+2. **STOP. Make an actual call to the service tool itself** (e.g., \`weather_get_forecast\`, \`github_get_repo\`) with real arguments. This is NOT optional. Do NOT skip this step.
+3. **Observe the response** - verify it succeeded and note the exact data structure
+4. **Only then generate the widget** that fetches the same data at runtime
+
+**\`search_services\` is NOT a substitute for calling the actual service.** It only returns documentation. You MUST invoke the real service tool to validate your arguments work.
+
+**Tool naming:** Service tools use underscores, not dots. For example: \`weather_get_forecast\`, \`github_list_repos\`.
+
+**Example workflow for a weather widget:**
+\`\`\`
+Step 1: search_services({ query: "weather" })
+        \u2192 Learn that weather_get_current_conditions exists with params: { latitude, longitude }
+
+Step 2: weather_get_current_conditions({ latitude: 29.7604, longitude: -95.3698 })  \u2190 REQUIRED!
+        \u2192 Verify it returns { temp: 72, humidity: 65, ... }
+
+Step 3: Generate widget that calls weather.get_current_conditions at runtime
+\`\`\`
+
+**If you skip Step 2, you will generate broken widgets.** Arguments that look correct in the schema may fail at runtime due to validation rules, required formats, or service-specific constraints.
+
+**NEVER embed static data directly in the component.**
+
+\u274C **WRONG** - Embedding data directly:
+\`\`\`tsx path="components/weather/bad-example.tsx"
+// DON'T DO THIS - calling tool, then embedding the response as static data
+export default function WeatherWidget() {
+  // Static data embedded at generation time - BAD!
+  const weather = { temp: 72, condition: "sunny", humidity: 45 };
+  return <div>Temperature: {weather.temp}\xB0F</div>;
+}
+\`\`\`
+
+\u2705 **CORRECT** - Fetching data at runtime:
+\`\`\`tsx note="Weather widget with runtime data" path="components/weather/main.tsx"
+export default function WeatherWidget() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // Fetch data at runtime - GOOD!
+    weather.get_forecast({ latitude: 48.8566, longitude: 2.3522 })
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <Skeleton className="h-32 w-full" />;
+  if (error) return <Alert variant="destructive">{error.message}</Alert>;
+  
+  return <div>Temperature: {data.temp}\xB0F</div>;
+}
+\`\`\`
+
+**Why this matters:**
+- Widgets with runtime service calls show **live data** that updates when refreshed
+- Static embedded data becomes **stale immediately** after generation
+- The proxy pattern allows widgets to be **reusable** across different contexts
+- Error handling and loading states improve **user experience**
+
+**Service call pattern:**
+\`\`\`tsx
+// Services are available as global namespace objects
+// Call format: namespace.procedure_name({ ...args })
+
+const [data, setData] = useState(null);
+const [loading, setLoading] = useState(true);
+const [error, setError] = useState(null);
+
+useEffect(() => {
+  serviceName.procedure_name({ param1: value1 })
+    .then(setData)
+    .catch(setError)
+    .finally(() => setLoading(false));
+}, [/* dependencies */]);
+\`\`\`
+
+**Required for service-using widgets:**
+- Always show loading indicators (Skeleton, Loader2 spinner, etc.)
+- Always handle errors gracefully with user-friendly messages
+- Use appropriate React hooks (useState, useEffect) for async data
+- Services are injected as globals - NO imports needed
+
+### Validating Service Calls (CRITICAL - READ CAREFULLY)
+
+**Calling \`search_services\` multiple times is NOT validation.** You must call the actual service tool.
+
+\u274C **WRONG workflow (will produce broken widgets):**
+\`\`\`
+1. search_services({ query: "weather" })     \u2190 Only gets schema
+2. search_services({ query: "location" })    \u2190 Still only schema
+3. Generate widget                           \u2190 BROKEN - never tested the actual service!
+\`\`\`
+
+\u2705 **CORRECT workflow:**
+\`\`\`
+1. search_services({ query: "weather" })           \u2190 Get schema
+2. weather_get_forecast({ latitude: 29.76, longitude: -95.37 })  \u2190 ACTUALLY CALL IT
+3. Observe response: { temp: 72, conditions: "sunny", ... }
+4. Generate widget that calls weather.get_forecast at runtime
+\`\`\`
+
+**The service tool (e.g., \`weather_get_forecast\`, \`github_list_repos\`) is a DIFFERENT tool from \`search_services\`.** You have access to both. Use both.
+
+**Only after a successful test call to the actual service should you generate the widget.**
+
+### Component Parameterization (IMPORTANT)
+
+**Widgets should accept props for dynamic values instead of hardcoding:**
+
+\u274C **WRONG** - Hardcoded values:
+\`\`\`tsx path="components/weather/bad-example.tsx"
+export default function WeatherWidget() {
+  // Location hardcoded - BAD!
+  const [lat, lon] = [48.8566, 2.3522]; // Paris
+  // ...
+}
+\`\`\`
+
+\u2705 **CORRECT** - Parameterized with props and defaults:
+\`\`\`tsx note="Parameterized weather widget" path="components/weather/main.tsx"
+interface WeatherWidgetProps {
+  location?: string;    // e.g., "Paris, France"
+  latitude?: number;    // Direct coordinates (optional)
+  longitude?: number;
+}
+
+export default function WeatherWidget({ 
+  location = "Paris, France",
+  latitude,
+  longitude 
+}: WeatherWidgetProps) {
+  // Use provided coordinates or look up from location name
+  // ...
+}
+\`\`\`
+
+**Why parameterize:**
+- Components become **reusable** across different contexts
+- Users can **customize behavior** without editing code
+- Enables **composition** - parent components can pass different values
+- Supports **testing** with various inputs
+
+**What to parameterize:**
+- Location names, coordinates, IDs
+- Search queries and filters
+- Display options (count, format, theme)
+- API-specific identifiers (usernames, repo names, etc.)
+
+### Anti-patterns to Avoid
+- \u274C Bulleted or numbered lists of key-value pairs
+- \u274C Vertical stacks where horizontal layouts would fit
+- \u274C Plain text labels without visual treatment
+- \u274C Uniform styling that doesn't distinguish primary from secondary information
+- \u274C Wrapping components in centering containers (parent handles this)
+- \u274C **Embedding API response data directly in components instead of fetching at runtime**
+- \u274C **Calling a tool, then putting the response as static JSX/JSON in the generated code**
+- \u274C **Hardcoding values that should be component props**
+- \u274C **Calling \`search_services\` multiple times instead of calling the actual service tool**
+- \u274C **Generating a widget without first making a real call to the service with your intended arguments**
+- \u274C **Treating schema documentation as proof that a service call will work**
+- \u274C **Omitting the \`path\` attribute on code blocks**
+`;
+var EDIT_PROMPT = `
+You are editing an existing JSX component. The user will provide the current code and describe the changes they want.
+
+## Response Format
+
+Use code fences with tagged attributes. The \`note\` attribute (optional but encouraged) provides a brief description visible in the UI. The \`path\` attribute specifies the target file.
+
+\`\`\`diff note="Brief description of this change" path="@/components/Button.tsx"
+<<<<<<< SEARCH
+exact code to find
+=======
+replacement code
+>>>>>>> REPLACE
+\`\`\`
+
+### Attribute Order
+Put \`note\` first so it's available soonest in streaming UI.
+
+### Multi-File Edits
+When editing multiple files, use the \`path\` attribute with virtual paths (\`@/\` prefix for generated files):
+
+\`\`\`diff note="Update button handler" path="@/components/Button.tsx"
+<<<<<<< SEARCH
+onClick={() => {}}
+=======
+onClick={() => handleClick()}
+>>>>>>> REPLACE
+\`\`\`
+
+\`\`\`diff note="Add utility function" path="@/lib/utils.ts"
+<<<<<<< SEARCH
+export const formatDate = ...
+=======
+export const formatDate = ...
+
+export const handleClick = () => console.log('clicked');
+>>>>>>> REPLACE
+\`\`\`
+
+## Rules
+- SEARCH block must match the existing code EXACTLY (whitespace, indentation, everything)
+- You can include multiple diff blocks for multiple changes
+- Each diff block should have its own \`note\` attribute annotation
+- Keep changes minimal and targeted
+- Do NOT output the full file - only the diffs
+- If clarification is needed, ask briefly before any diffs
+
+## CRITICAL: Diff Marker Safety
+- NEVER include the strings "<<<<<<< SEARCH", "=======", or ">>>>>>> REPLACE" inside your replacement code
+- These are reserved markers for parsing the diff format
+- If you need to show diff-like content, use alternative notation (e.g., "// old code" / "// new code")
+- Malformed diff markers will cause the edit to fail
+
+## Summary
+After all diffs, provide a brief markdown summary of the changes made. Use formatting like:
+- **Bold** for emphasis on key changes
+- Bullet points for listing multiple changes
+- Keep it concise (2-4 lines max)
+- Do NOT include: a heading/title
+`;
+
+// src/server/routes.ts
+function parseBody(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => body += chunk);
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body));
+      } catch (err) {
+        reject(err);
+      }
+    });
+    req.on("error", reject);
+  });
+}
+async function handleChat(req, res, ctx) {
+  const {
+    messages,
+    metadata
+  } = await parseBody(req);
+  const normalizedMessages = messages.map((msg) => ({
+    ...msg,
+    parts: msg.parts ?? [{ type: "text", text: "" }]
+  }));
+  const provider = createOpenAICompatible({
+    name: "copilot-proxy",
+    baseURL: ctx.copilotProxyUrl
+  });
+  const result = streamText({
+    model: provider("claude-sonnet-4"),
+    system: `---
+patchwork:
+  compilers: ${(metadata?.patchwork?.compilers ?? []).join(",") ?? "[]"}
+  services: ${ctx.registry.getNamespaces().join(",")}
+---
+
+${PATCHWORK_PROMPT}
+
+${ctx.servicesPrompt}`,
+    messages: await convertToModelMessages(normalizedMessages),
+    stopWhen: stepCountIs(5),
+    tools: ctx.tools
+  });
+  const response = result.toUIMessageStreamResponse();
+  response.headers.forEach(
+    (value, key) => res.setHeader(key, value)
+  );
+  if (!response.body) {
+    res.end();
+    return;
+  }
+  const reader = response.body.getReader();
+  const pump = async () => {
+    const { done, value } = await reader.read();
+    if (done) {
+      res.end();
+      return;
+    }
+    res.write(value);
+    await pump();
+  };
+  await pump();
+}
+async function handleEdit(req, res, ctx) {
+  const { code, prompt } = await parseBody(
+    req
+  );
+  const provider = createOpenAICompatible({
+    name: "copilot-proxy",
+    baseURL: ctx.copilotProxyUrl
+  });
+  const result = streamText({
+    model: provider("claude-opus-4.5"),
+    system: `Current component code:
+\`\`\`tsx
+${code}
+\`\`\`
+
+${EDIT_PROMPT}`,
+    messages: [{ role: "user", content: prompt }]
+  });
+  res.setHeader("Content-Type", "text/plain");
+  res.setHeader("Transfer-Encoding", "chunked");
+  res.writeHead(200);
+  for await (const chunk of result.textStream) {
+    res.write(chunk);
+  }
+  res.end();
+}
+
+// src/server/local-packages.ts
+import fs from "fs";
+import path from "path";
+function handleLocalPackages(req, res, ctx) {
+  const rawUrl = req.url || "";
+  if (!rawUrl.startsWith("/_local-packages")) {
+    return false;
+  }
+  const urlWithoutPrefix = rawUrl.replace("/_local-packages", "");
+  const url = urlWithoutPrefix.split("?")[0] || "";
+  const match = url.match(/^\/@([^/]+)\/([^/@]+)(.*)$/);
+  if (!match) {
+    return false;
+  }
+  const [, scope, name, restPath] = match;
+  const packageName = `@${scope}/${name}`;
+  const localPath = ctx.localPackages[packageName];
+  if (!localPath) {
+    res.writeHead(404);
+    res.end(`Package ${packageName} not found in local overrides`);
+    return true;
+  }
+  const rest = restPath || "";
+  let filePath;
+  try {
+    if (rest === "/package.json") {
+      filePath = path.join(localPath, "package.json");
+    } else if (rest === "" || rest === "/") {
+      const pkgJson = JSON.parse(
+        fs.readFileSync(path.join(localPath, "package.json"), "utf-8")
+      );
+      const mainEntry = pkgJson.main || "dist/index.js";
+      filePath = path.join(localPath, mainEntry);
+    } else {
+      const normalizedPath = rest.startsWith("/") ? rest.slice(1) : rest;
+      const distPath = path.join(localPath, "dist", normalizedPath);
+      const rootPath = path.join(localPath, normalizedPath);
+      filePath = fs.existsSync(distPath) ? distPath : rootPath;
+    }
+  } catch (err) {
+    ctx.log("Error resolving file path:", err);
+    res.writeHead(500);
+    res.end(`Error resolving path for ${packageName}: ${err}`);
+    return true;
+  }
+  try {
+    ctx.log(`Serving ${filePath}`);
+    const content = fs.readFileSync(filePath, "utf-8");
+    const ext = path.extname(filePath);
+    const contentType = ext === ".json" ? "application/json" : ext === ".js" ? "application/javascript" : ext === ".ts" ? "application/typescript" : "text/plain";
+    res.setHeader("Content-Type", contentType);
+    res.writeHead(200);
+    res.end(content);
+  } catch (err) {
+    ctx.log("Error serving file:", filePath, err);
+    res.writeHead(404);
+    res.end(`File not found: ${filePath}`);
+  }
+  return true;
+}
+
+// src/server/vfs-routes.ts
+import {
+  readFile,
+  writeFile,
+  unlink,
+  readdir,
+  stat,
+  mkdir,
+  rm
+} from "fs/promises";
+import { watch } from "fs";
+import { dirname, resolve, sep } from "path";
+function normalizeRelPath(path3) {
+  const decoded = decodeURIComponent(path3).replace(/\\/g, "/");
+  return decoded.replace(/^\/+|\/+$/g, "");
+}
+function resolvePath(rootDir, relPath) {
+  const root = resolve(rootDir);
+  const full = resolve(root, relPath);
+  if (full !== root && !full.startsWith(`${root}${sep}`)) {
+    throw new Error("Invalid path");
+  }
+  return full;
+}
+function joinRelPath(base, name) {
+  return base ? `${base}/${name}` : name;
+}
+async function listAllFiles(rootDir, relPath) {
+  const targetPath = resolvePath(rootDir, relPath);
+  let entries = [];
+  try {
+    entries = await readdir(targetPath, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const results = [];
+  for (const entry of entries) {
+    const entryRelPath = joinRelPath(relPath, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...await listAllFiles(rootDir, entryRelPath));
+    } else {
+      results.push(entryRelPath);
+    }
+  }
+  return results.sort((a, b) => a.localeCompare(b));
+}
+async function ensureDir(filePath) {
+  await mkdir(dirname(filePath), { recursive: true });
+}
+function sendJson(res, status, body) {
+  res.setHeader("Content-Type", "application/json");
+  res.writeHead(status);
+  res.end(JSON.stringify(body));
+}
+function handleVFS(req, res, ctx) {
+  const url = req.url || "/";
+  const method = req.method || "GET";
+  if (!url.startsWith("/vfs")) return false;
+  if (url === "/vfs/config" && method === "GET") {
+    res.setHeader("Content-Type", "application/json");
+    res.writeHead(200);
+    res.end(JSON.stringify({ usePaths: ctx.usePaths }));
+    return true;
+  }
+  const handleRequest = async () => {
+    const urlObj = new URL(url, "http://localhost");
+    const query = urlObj.searchParams;
+    const rawPath = urlObj.pathname.slice(4);
+    const relPath = normalizeRelPath(rawPath);
+    if (query.has("watch")) {
+      if (method !== "GET") {
+        res.writeHead(405);
+        res.end("Method not allowed");
+        return;
+      }
+      const watchPath = normalizeRelPath(query.get("watch") || "");
+      const fullWatchPath = resolvePath(ctx.rootDir, watchPath);
+      let watchStats;
+      try {
+        watchStats = await stat(fullWatchPath);
+      } catch {
+        res.writeHead(404);
+        res.end("Not found");
+        return;
+      }
+      res.setHeader("Content-Type", "text/event-stream");
+      res.setHeader("Cache-Control", "no-cache");
+      res.setHeader("Connection", "keep-alive");
+      res.writeHead(200);
+      const watcher = watch(
+        fullWatchPath,
+        { recursive: watchStats.isDirectory() },
+        async (eventType, filename) => {
+          const eventPath = normalizeRelPath(
+            [watchPath, filename ? filename.toString() : ""].filter(Boolean).join("/")
+          );
+          const fullEventPath = resolvePath(ctx.rootDir, eventPath);
+          let type = "update";
+          if (eventType === "rename") {
+            try {
+              await stat(fullEventPath);
+              type = "create";
+            } catch {
+              type = "delete";
+            }
+          }
+          res.write("event: change\n");
+          res.write(
+            `data: ${JSON.stringify({
+              type,
+              path: eventPath,
+              mtime: (/* @__PURE__ */ new Date()).toISOString()
+            })}
+
+`
+          );
+        }
+      );
+      req.on("close", () => watcher.close());
+      return;
+    }
+    if (method === "HEAD" && !relPath) {
+      res.writeHead(200);
+      res.end();
+      return;
+    }
+    if (method === "GET" && !relPath && !query.toString()) {
+      const files = await listAllFiles(ctx.rootDir, "");
+      sendJson(res, 200, files);
+      return;
+    }
+    if (!relPath && method !== "GET" && method !== "HEAD") {
+      res.writeHead(400);
+      res.end("Invalid path");
+      return;
+    }
+    const targetPath = resolvePath(ctx.rootDir, relPath);
+    if (method === "GET" && query.get("stat") === "true") {
+      try {
+        const stats = await stat(targetPath);
+        sendJson(res, 200, {
+          size: stats.size,
+          mtime: stats.mtime.toISOString(),
+          isFile: stats.isFile(),
+          isDirectory: stats.isDirectory()
+        });
+      } catch {
+        res.writeHead(404);
+        res.end("Not found");
+      }
+      return;
+    }
+    if (method === "GET" && query.get("readdir") === "true") {
+      try {
+        const entries = await readdir(targetPath, { withFileTypes: true });
+        const mapped = entries.map((entry) => ({
+          name: entry.name,
+          isDirectory: entry.isDirectory()
+        })).sort((a, b) => a.name.localeCompare(b.name));
+        sendJson(res, 200, mapped);
+      } catch (err) {
+        const code = err.code;
+        if (code === "ENOTDIR") {
+          res.writeHead(409);
+          res.end("Not a directory");
+          return;
+        }
+        res.writeHead(404);
+        res.end("Not found");
+      }
+      return;
+    }
+    if (method === "POST" && query.get("mkdir") === "true") {
+      const recursive = query.get("recursive") === "true";
+      try {
+        await mkdir(targetPath, { recursive });
+        res.writeHead(200);
+        res.end("ok");
+      } catch {
+        res.writeHead(500);
+        res.end("Mkdir failed");
+      }
+      return;
+    }
+    switch (method) {
+      case "GET": {
+        try {
+          const content = await readFile(targetPath, "utf-8");
+          res.setHeader("Content-Type", "text/plain");
+          res.writeHead(200);
+          res.end(content);
+        } catch {
+          res.writeHead(404);
+          res.end("Not found");
+        }
+        return;
+      }
+      case "PUT": {
+        let body = "";
+        req.on("data", (chunk) => body += chunk);
+        req.on("end", async () => {
+          try {
+            await ensureDir(targetPath);
+            await writeFile(targetPath, body, "utf-8");
+            res.writeHead(200);
+            res.end("ok");
+          } catch (err) {
+            ctx.log("VFS PUT error:", err);
+            res.writeHead(500);
+            res.end("Write failed");
+          }
+        });
+        return;
+      }
+      case "DELETE": {
+        const recursive = query.get("recursive") === "true";
+        let stats;
+        try {
+          stats = await stat(targetPath);
+        } catch {
+          res.writeHead(404);
+          res.end("Not found");
+          return;
+        }
+        if (stats.isDirectory()) {
+          if (!recursive) {
+            try {
+              const entries = await readdir(targetPath);
+              if (entries.length > 0) {
+                res.writeHead(409);
+                res.end("Directory not empty");
+                return;
+              }
+              await rm(targetPath, { recursive: false });
+              res.writeHead(200);
+              res.end("ok");
+            } catch {
+              res.writeHead(500);
+              res.end("Delete failed");
+            }
+            return;
+          }
+          try {
+            await rm(targetPath, { recursive: true });
+            res.writeHead(200);
+            res.end("ok");
+          } catch {
+            res.writeHead(500);
+            res.end("Delete failed");
+          }
+          return;
+        }
+        try {
+          await unlink(targetPath);
+          res.writeHead(200);
+          res.end("ok");
+        } catch {
+          res.writeHead(404);
+          res.end("Not found");
+        }
+        return;
+      }
+      case "HEAD": {
+        try {
+          await stat(targetPath);
+          res.writeHead(200);
+          res.end();
+        } catch {
+          res.writeHead(404);
+          res.end();
+        }
+        return;
+      }
+      default:
+        res.writeHead(405);
+        res.end("Method not allowed");
+    }
+  };
+  handleRequest().catch((err) => {
+    ctx.log("VFS error:", err);
+    res.writeHead(500);
+    res.end("Internal error");
+  });
+  return true;
+}
+
+// src/server/services.ts
+import { jsonSchema } from "ai";
+var ServiceRegistry = class {
+  tools = /* @__PURE__ */ new Map();
+  toolInfo = /* @__PURE__ */ new Map();
+  backends = [];
+  /**
+   * Register tools from MCP or other sources
+   * @param tools - Record of tool name to Tool
+   * @param namespace - Optional namespace to prefix all tools (e.g., MCP server name)
+   */
+  registerTools(tools, namespace) {
+    for (const [toolName, tool] of Object.entries(tools)) {
+      const name = namespace ? `${namespace}.${toolName}` : toolName;
+      this.tools.set(name, tool);
+      const dotIndex = name.indexOf(".");
+      const ns = dotIndex > 0 ? name.substring(0, dotIndex) : name;
+      const procedure = dotIndex > 0 ? name.substring(dotIndex + 1) : name;
+      this.toolInfo.set(name, {
+        name,
+        namespace: ns,
+        procedure,
+        description: tool.description,
+        parameters: tool.inputSchema ?? {},
+        typescriptInterface: this.generateTypeScriptInterface(name, tool)
+      });
+    }
+  }
+  /**
+   * Register a service backend (UTCP, HTTP, etc.)
+   * Creates callable Tool objects for each procedure so the LLM can invoke them directly.
+   * Backends are tried in order of registration, first success wins.
+   */
+  registerBackend(backend, toolInfos) {
+    this.backends.push(backend);
+    if (toolInfos) {
+      for (const info of toolInfos) {
+        this.toolInfo.set(info.name, info);
+        const tool = {
+          description: info.description,
+          inputSchema: jsonSchema(
+            info.parameters ?? { type: "object", properties: {} }
+          ),
+          execute: async (args) => {
+            return backend.call(info.namespace, info.procedure, [args]);
+          }
+        };
+        this.tools.set(info.name, tool);
+      }
+    }
+  }
+  /**
+   * Generate TypeScript interface from tool schema
+   */
+  generateTypeScriptInterface(name, tool) {
+    const schema = tool.inputSchema;
+    const props = schema?.properties ?? {};
+    const required = schema?.required ?? [];
+    const params = Object.entries(props).map(([key, val]) => {
+      const optional = !required.includes(key) ? "?" : "";
+      const type = val.type === "number" ? "number" : val.type === "boolean" ? "boolean" : val.type === "array" ? "unknown[]" : val.type === "object" ? "Record<string, unknown>" : "string";
+      const comment = val.description ? ` // ${val.description}` : "";
+      return `  ${key}${optional}: ${type};${comment}`;
+    }).join("\n");
+    return `interface ${name.replace(
+      /[^a-zA-Z0-9]/g,
+      "_"
+    )}Args {
+${params}
+}`;
+  }
+  /**
+   * Convert internal tool name (namespace.procedure) to LLM-safe name (namespace_procedure)
+   * OpenAI-compatible APIs require tool names to match ^[a-zA-Z0-9_-]+$
+   */
+  toLLMToolName(internalName) {
+    return internalName.replace(/\./g, "_");
+  }
+  /**
+   * Convert LLM tool name (namespace_procedure) back to internal name (namespace.procedure)
+   * Only converts the first underscore after the namespace prefix
+   */
+  fromLLMToolName(llmName) {
+    for (const internalName of this.tools.keys()) {
+      if (this.toLLMToolName(internalName) === llmName) {
+        return internalName;
+      }
+    }
+    const underscoreIndex = llmName.indexOf("_");
+    if (underscoreIndex > 0) {
+      return llmName.substring(0, underscoreIndex) + "." + llmName.substring(underscoreIndex + 1);
+    }
+    return llmName;
+  }
+  /**
+   * Get all tools for LLM usage with LLM-safe names (underscores instead of dots)
+   */
+  getTools() {
+    const result = {};
+    for (const [name, tool] of this.tools) {
+      result[this.toLLMToolName(name)] = tool;
+    }
+    return result;
+  }
+  /**
+   * Get service metadata for prompt generation
+   */
+  getServiceInfo() {
+    return Array.from(this.toolInfo.values());
+  }
+  /**
+   * Get unique namespaces
+   */
+  getNamespaces() {
+    const namespaces = /* @__PURE__ */ new Set();
+    for (const info of this.toolInfo.values()) {
+      namespaces.add(info.namespace);
+    }
+    return Array.from(namespaces);
+  }
+  /**
+   * Search for services by query, namespace, or list all
+   */
+  searchServices(options = {}) {
+    const { query, namespace, limit = 20, includeInterfaces = false } = options;
+    let results = Array.from(this.toolInfo.values());
+    if (namespace) {
+      results = results.filter((info) => info.namespace === namespace);
+    }
+    if (query) {
+      const queryLower = query.toLowerCase();
+      const keywords = queryLower.split(/\s+/).filter(Boolean);
+      results = results.map((info) => {
+        const searchText = `${info.name} ${info.namespace} ${info.procedure} ${info.description ?? ""}`.toLowerCase();
+        const matchCount = keywords.filter(
+          (kw) => searchText.includes(kw)
+        ).length;
+        return { info, score: matchCount / keywords.length };
+      }).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ info }) => info);
+    }
+    results = results.slice(0, limit);
+    if (!includeInterfaces) {
+      results = results.map(({ typescriptInterface: _, ...rest }) => rest);
+    }
+    return results;
+  }
+  /**
+   * Get detailed info about a specific tool
+   */
+  getToolInfo(toolName) {
+    return this.toolInfo.get(toolName);
+  }
+  /**
+   * List all tool names
+   */
+  listToolNames() {
+    return Array.from(this.toolInfo.keys());
+  }
+  /**
+   * Call a service procedure
+   */
+  async call(namespace, procedure, args) {
+    for (const backend of this.backends) {
+      try {
+        return await backend.call(namespace, procedure, [args]);
+      } catch {
+      }
+    }
+    const exactKey = `${namespace}.${procedure}`;
+    let tool = this.tools.get(exactKey);
+    if (!tool) {
+      for (const [name, t] of this.tools) {
+        if (name.startsWith(`${namespace}.`) && name.endsWith(procedure)) {
+          tool = t;
+          break;
+        }
+      }
+    }
+    if (!tool) {
+      throw new Error(
+        `Service not found: ${namespace}.${procedure}. Available: ${Array.from(
+          this.tools.keys()
+        ).slice(0, 10).join(", ")}`
+      );
+    }
+    if (!tool.execute) {
+      throw new Error(`Tool ${namespace}.${procedure} has no execute function`);
+    }
+    const result = await tool.execute(args, {
+      toolCallId: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      messages: []
+    });
+    return result;
+  }
+  /**
+   * Check if a service exists
+   */
+  has(namespace, procedure) {
+    const key = `${namespace}.${procedure}`;
+    return this.tools.has(key);
+  }
+  /**
+   * Get count of registered tools
+   */
+  get size() {
+    return this.toolInfo.size;
+  }
+};
+function generateServicesPrompt(registry) {
+  const namespaces = registry.getNamespaces();
+  if (namespaces.length === 0) return "";
+  const services = registry.getServiceInfo();
+  const byNamespace = /* @__PURE__ */ new Map();
+  for (const service of services) {
+    const existing = byNamespace.get(service.namespace) || [];
+    existing.push(service);
+    byNamespace.set(service.namespace, existing);
+  }
+  let prompt = `## Available Services
+
+The following services are available for generated widgets to call:
+
+`;
+  for (const [ns, tools] of byNamespace) {
+    prompt += `### \`${ns}\`
+`;
+    for (const tool of tools) {
+      prompt += `- \`${ns}.${tool.procedure}()\``;
+      if (tool.description) {
+        prompt += `: ${tool.description}`;
+      }
+      prompt += "\n";
+    }
+    prompt += "\n";
+  }
+  prompt += `**Usage in widgets:**
+\`\`\`tsx
+// Services are available as global namespaces
+const result = await ${namespaces[0] ?? "service"}.${byNamespace.get(namespaces[0] ?? "")?.[0]?.procedure ?? "example"}({ /* args */ });
+\`\`\`
+
+Make sure to handle loading states and errors when calling services.
+`;
+  return prompt;
+}
+
+// src/server/index.ts
+async function initMcpTools(configs, registry) {
+  for (const config of configs) {
+    const client = await createMCPClient({
+      transport: new Experimental_StdioMCPTransport({
+        command: config.command,
+        args: config.args
+      })
+    });
+    registry.registerTools(await client.tools(), config.name);
+  }
+}
+var searchServicesSchema = {
+  type: "object",
+  properties: {
+    query: {
+      type: "string",
+      description: 'Natural language description of what you want to do (e.g., "get weather forecast", "list github repos")'
+    },
+    namespace: {
+      type: "string",
+      description: 'Filter results to a specific service namespace (e.g., "weather", "github")'
+    },
+    tool_name: {
+      type: "string",
+      description: "Get detailed info about a specific tool by name"
+    },
+    limit: {
+      type: "number",
+      description: "Maximum number of results to return",
+      default: 10
+    },
+    include_interfaces: {
+      type: "boolean",
+      description: "Include TypeScript interface definitions in results",
+      default: true
+    }
+  }
+};
+function createSearchServicesTool(registry) {
+  return {
+    description: `Search for available services/tools. Use this to discover what APIs are available for widgets to call.
+
+Returns matching services with their TypeScript interfaces. Use when:
+- You need to find a service to accomplish a task
+- You want to explore available APIs in a namespace
+- You need the exact interface/parameters for a service call`,
+    inputSchema: jsonSchema2(searchServicesSchema),
+    execute: async (args) => {
+      if (args.tool_name) {
+        const info = registry.getToolInfo(args.tool_name);
+        if (!info) {
+          return {
+            success: false,
+            error: `Tool '${args.tool_name}' not found`
+          };
+        }
+        return { success: true, tool: info };
+      }
+      const results = registry.searchServices({
+        query: args.query,
+        namespace: args.namespace,
+        limit: args.limit ?? 10,
+        includeInterfaces: args.include_interfaces ?? true
+      });
+      return {
+        success: true,
+        count: results.length,
+        tools: results,
+        namespaces: registry.getNamespaces()
+      };
+    }
+  };
+}
+function parseBody2(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => body += chunk);
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body));
+      } catch (err) {
+        reject(err);
+      }
+    });
+    req.on("error", reject);
+  });
+}
+async function createStitcheryServer(config = {}) {
+  const {
+    port = 6434,
+    host = "127.0.0.1",
+    copilotProxyUrl = "http://127.0.0.1:6433/v1",
+    localPackages = {},
+    mcpServers = [],
+    utcp,
+    vfsDir,
+    vfsUsePaths = false,
+    verbose = false
+  } = config;
+  const log = verbose ? (...args) => console.log("[stitchery]", ...args) : () => {
+  };
+  const registry = new ServiceRegistry();
+  log("Initializing MCP tools...");
+  await initMcpTools(mcpServers, registry);
+  log(`Loaded ${registry.size} tools from ${mcpServers.length} MCP servers`);
+  if (utcp) {
+    log("Initializing UTCP backend...");
+    log("UTCP config:", JSON.stringify(utcp, null, 2));
+    try {
+      const { backend, toolInfos } = await createUtcpBackend(
+        utcp,
+        utcp.cwd
+      );
+      registry.registerBackend(backend, toolInfos);
+      log(
+        `Registered UTCP backend with ${toolInfos.length} tools:`,
+        toolInfos.map((tool) => tool.name).join(", ")
+      );
+    } catch (err) {
+      console.error("[stitchery] Failed to initialize UTCP backend:", err);
+    }
+  }
+  log("Local packages:", localPackages);
+  const internalTools = {
+    search_services: createSearchServicesTool(registry)
+  };
+  const allTools = { ...registry.getTools(), ...internalTools };
+  const routeCtx = {
+    copilotProxyUrl,
+    tools: allTools,
+    registry,
+    servicesPrompt: generateServicesPrompt(registry),
+    log
+  };
+  const localPkgCtx = { localPackages, log };
+  const vfsCtx = vfsDir ? { rootDir: vfsDir, usePaths: vfsUsePaths, log } : null;
+  const server = createServer(async (req, res) => {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader(
+      "Access-Control-Allow-Methods",
+      "GET, POST, PUT, DELETE, HEAD, OPTIONS"
+    );
+    res.setHeader(
+      "Access-Control-Allow-Headers",
+      "Content-Type, Authorization"
+    );
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    const url = req.url || "/";
+    log(`${req.method} ${url}`);
+    try {
+      if (handleLocalPackages(req, res, localPkgCtx)) {
+        return;
+      }
+      if (vfsCtx && handleVFS(req, res, vfsCtx)) {
+        return;
+      }
+      if (url === "/api/chat" && req.method === "POST") {
+        await handleChat(req, res, routeCtx);
+        return;
+      }
+      if (url === "/api/edit" && req.method === "POST") {
+        await handleEdit(req, res, routeCtx);
+        return;
+      }
+      const proxyMatch = url.match(/^\/api\/proxy\/([^/]+)\/(.+)$/);
+      if (proxyMatch && req.method === "POST") {
+        const [, namespace, procedure] = proxyMatch;
+        try {
+          const body = await parseBody2(req);
+          const result = await registry.call(
+            namespace,
+            procedure,
+            body.args ?? {}
+          );
+          res.setHeader("Content-Type", "application/json");
+          res.writeHead(200);
+          res.end(JSON.stringify(result));
+        } catch (err) {
+          log("Proxy error:", err);
+          res.setHeader("Content-Type", "application/json");
+          res.writeHead(500);
+          res.end(
+            JSON.stringify({
+              error: err instanceof Error ? err.message : "Service call failed"
+            })
+          );
+        }
+        return;
+      }
+      if (url === "/api/services/search" && req.method === "POST") {
+        const body = await parseBody2(req);
+        res.setHeader("Content-Type", "application/json");
+        res.writeHead(200);
+        if (body.tool_name) {
+          const info = registry.getToolInfo(body.tool_name);
+          if (!info) {
+            res.end(
+              JSON.stringify({
+                success: false,
+                error: `Tool '${body.tool_name}' not found`
+              })
+            );
+          } else {
+            res.end(JSON.stringify({ success: true, tool: info }));
+          }
+          return;
+        }
+        const results = registry.searchServices({
+          query: body.query,
+          namespace: body.namespace,
+          limit: body.limit ?? 20,
+          includeInterfaces: body.include_interfaces ?? false
+        });
+        res.end(
+          JSON.stringify({
+            success: true,
+            count: results.length,
+            tools: results,
+            namespaces: registry.getNamespaces()
+          })
+        );
+        return;
+      }
+      if (url === "/api/services" && req.method === "GET") {
+        res.setHeader("Content-Type", "application/json");
+        res.writeHead(200);
+        res.end(
+          JSON.stringify({
+            namespaces: registry.getNamespaces(),
+            services: registry.getServiceInfo()
+          })
+        );
+        return;
+      }
+      if (url === "/health" || url === "/") {
+        res.setHeader("Content-Type", "application/json");
+        res.writeHead(200);
+        res.end(JSON.stringify({ status: "ok", service: "stitchery" }));
+        return;
+      }
+      res.writeHead(404);
+      res.end(`Not found: ${url}`);
+    } catch (err) {
+      log("Error:", err);
+      res.writeHead(500);
+      res.end(err instanceof Error ? err.message : "Internal server error");
+    }
+  });
+  return {
+    server,
+    registry,
+    async start() {
+      return new Promise((resolve2, reject) => {
+        server.on("error", reject);
+        server.listen(port, host, () => {
+          log(`Server listening on http://${host}:${port}`);
+          resolve2({ port, host });
+        });
+      });
+    },
+    async stop() {
+      return new Promise((resolve2, reject) => {
+        server.close((err) => {
+          if (err) reject(err);
+          else resolve2();
+        });
+      });
+    }
+  };
+}
+
+// src/cli.ts
+var program = new Command();
+program.name("stitchery").description("Backend services for LLM-generated artifacts").version("0.1.0");
+program.command("serve").description("Start the stitchery server").option("-p, --port <port>", "Port to listen on", "6434").option("-h, --host <host>", "Host to bind to", "127.0.0.1").option(
+  "--copilot-proxy-url <url>",
+  "Copilot proxy URL",
+  "http://127.0.0.1:6433/v1"
+).option(
+  "--mcp <servers...>",
+  "MCP server commands (format: name:command:arg1,arg2)"
+).option("--utcp-config <path>", "Load UTCP configuration from JSON file").option(
+  "--local-package <packages...>",
+  "Local package overrides (format: name:path)"
+).option(
+  "--vfs-dir <path>",
+  "Directory for virtual file system storage",
+  ".working/widgets"
+).option(
+  "--vfs-use-paths",
+  "Use file paths from code blocks instead of UUIDs for VFS storage"
+).option("-v, --verbose", "Enable verbose logging").action(async (options) => {
+  if (options.verbose) {
+    console.log("[stitchery] CLI options:", JSON.stringify(options, null, 2));
+  }
+  const mcpServers = (options.mcp ?? []).map((spec) => {
+    const [name, command, ...rest] = spec.split(":");
+    const rawArgs = rest.join(":").split(",").filter(Boolean);
+    const args = rawArgs.map(
+      (arg) => arg.startsWith(".") ? path2.resolve(process.cwd(), arg) : arg
+    );
+    return { name, command, args };
+  });
+  const localPackages = {};
+  for (const spec of options.localPackage ?? []) {
+    const [name, ...pathParts] = spec.split(":");
+    const pkgPath = pathParts.join(":");
+    localPackages[name] = path2.resolve(process.cwd(), pkgPath);
+  }
+  let utcpConfig;
+  if (options.utcpConfig) {
+    const utcpPath = path2.resolve(process.cwd(), options.utcpConfig);
+    if (!fs2.existsSync(utcpPath)) {
+      console.error(`UTCP config file not found: ${utcpPath}`);
+      process.exit(1);
+    }
+    try {
+      const content = fs2.readFileSync(utcpPath, "utf-8");
+      utcpConfig = JSON.parse(content);
+      if (options.verbose) {
+        console.log("[stitchery] Loaded UTCP config from:", utcpPath);
+      }
+    } catch (err) {
+      console.error(`Failed to parse UTCP config: ${err}`);
+      process.exit(1);
+    }
+  }
+  const vfsDir = options.vfsDir ? path2.resolve(process.cwd(), options.vfsDir) : void 0;
+  if (vfsDir && options.verbose) {
+    console.log("[stitchery] VFS directory:", vfsDir);
+  }
+  const server = await createStitcheryServer({
+    port: parseInt(options.port, 10),
+    host: options.host,
+    copilotProxyUrl: options.copilotProxyUrl,
+    mcpServers,
+    localPackages,
+    utcp: utcpConfig,
+    vfsDir,
+    vfsUsePaths: options.vfsUsePaths ?? false,
+    verbose: options.verbose
+  });
+  const { port, host } = await server.start();
+  console.log(`Stitchery server running at http://${host}:${port}`);
+  process.on("SIGINT", async () => {
+    console.log("\nShutting down...");
+    await server.stop();
+    process.exit(0);
+  });
+});
+program.parse();
+//# sourceMappingURL=cli.js.map