@aprovan/patchwork 0.1.0 → 0.1.1

package/packages/editor/src/components/edit/fileTypes.ts

@@ -0,0 +1,125 @@
+export type FileCategory = 'compilable' | 'text' | 'media' | 'binary';
+
+export interface FileTypeInfo {
+  category: FileCategory;
+  language: string | null;
+  mimeType: string;
+}
+
+const COMPILABLE_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
+const MEDIA_EXTENSIONS = ['.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.mp4', '.mov', '.webm'];
+const TEXT_EXTENSIONS = ['.json', '.yaml', '.yml', '.md', '.txt', '.css', '.html', '.xml', '.toml'];
+
+const EXTENSION_TO_LANGUAGE: Record<string, string> = {
+  '.tsx': 'tsx',
+  '.jsx': 'jsx',
+  '.ts': 'typescript',
+  '.js': 'javascript',
+  '.json': 'json',
+  '.yaml': 'yaml',
+  '.yml': 'yaml',
+  '.md': 'markdown',
+  '.txt': 'text',
+  '.css': 'css',
+  '.html': 'html',
+  '.xml': 'xml',
+  '.toml': 'toml',
+  '.svg': 'xml',
+};
+
+const EXTENSION_TO_MIME: Record<string, string> = {
+  '.tsx': 'text/typescript-jsx',
+  '.jsx': 'text/javascript-jsx',
+  '.ts': 'text/typescript',
+  '.js': 'text/javascript',
+  '.json': 'application/json',
+  '.yaml': 'text/yaml',
+  '.yml': 'text/yaml',
+  '.md': 'text/markdown',
+  '.txt': 'text/plain',
+  '.css': 'text/css',
+  '.html': 'text/html',
+  '.xml': 'application/xml',
+  '.toml': 'text/toml',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.mp4': 'video/mp4',
+  '.mov': 'video/quicktime',
+  '.webm': 'video/webm',
+};
+
+function getExtension(path: string): string {
+  const lastDot = path.lastIndexOf('.');
+  if (lastDot === -1) return '';
+  return path.slice(lastDot).toLowerCase();
+}
+
+export function getFileType(path: string): FileTypeInfo {
+  const ext = getExtension(path);
+
+  if (COMPILABLE_EXTENSIONS.includes(ext)) {
+    return {
+      category: 'compilable',
+      language: EXTENSION_TO_LANGUAGE[ext] ?? null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? 'text/plain',
+    };
+  }
+
+  if (TEXT_EXTENSIONS.includes(ext)) {
+    return {
+      category: 'text',
+      language: EXTENSION_TO_LANGUAGE[ext] ?? null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? 'text/plain',
+    };
+  }
+
+  if (MEDIA_EXTENSIONS.includes(ext)) {
+    return {
+      category: 'media',
+      language: ext === '.svg' ? 'xml' : null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? 'application/octet-stream',
+    };
+  }
+
+  return {
+    category: 'binary',
+    language: null,
+    mimeType: 'application/octet-stream',
+  };
+}
+
+export function isCompilable(path: string): boolean {
+  return COMPILABLE_EXTENSIONS.includes(getExtension(path));
+}
+
+export function isMediaFile(path: string): boolean {
+  return MEDIA_EXTENSIONS.includes(getExtension(path));
+}
+
+export function isTextFile(path: string): boolean {
+  return TEXT_EXTENSIONS.includes(getExtension(path));
+}
+
+export function getLanguageFromExt(path: string): string | null {
+  const ext = getExtension(path);
+  return EXTENSION_TO_LANGUAGE[ext] ?? null;
+}
+
+export function getMimeType(path: string): string {
+  const ext = getExtension(path);
+  return EXTENSION_TO_MIME[ext] ?? 'application/octet-stream';
+}
+
+export function isImageFile(path: string): boolean {
+  const ext = getExtension(path);
+  return ['.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp'].includes(ext);
+}
+
+export function isVideoFile(path: string): boolean {
+  const ext = getExtension(path);
+  return ['.mp4', '.mov', '.webm'].includes(ext);
+}

package/packages/editor/src/components/edit/index.ts

@@ -4,3 +4,7 @@ export * from './useEditSession';
 export * from './EditHistory';
 export * from './EditModal';
 export * from './FileTree';
+export * from './SaveConfirmDialog';
+export * from './fileTypes';
+export * from './CodeBlockView';
+export * from './MediaPreview';

package/packages/editor/src/components/edit/types.ts

@@ -23,8 +23,11 @@ export interface EditSessionActions {
   updateActiveFile: (content: string) => void;
   setActiveFile: (path: string) => void;
   clearError: () => void;
+  replaceFile: (path: string, content: string, encoding?: 'utf8' | 'base64') => void;
 }
 
+export type FileEncoding = 'utf8' | 'base64';
+
 // Convenience getters
 export function getActiveContent(state: EditSessionState): string {
   return state.project.files.get(state.activeFile)?.content ?? '';

package/packages/editor/src/components/edit/useEditSession.ts

@@ -10,7 +10,8 @@ import type {
 } from './types';
 
 export interface UseEditSessionOptions {
-  originalCode: string;
+  originalCode?: string;
+  originalProject?: VirtualProject;
   compile?: CompileFn;
   apiEndpoint?: string;
 }
@@ -25,11 +26,11 @@ function cloneProject(project: VirtualProject): VirtualProject {
 export function useEditSession(
   options: UseEditSessionOptions,
 ): EditSessionState & EditSessionActions {
-  const { originalCode, compile, apiEndpoint } = options;
+  const { originalCode, originalProject: providedProject, compile, apiEndpoint } = options;
 
   const originalProject = useMemo(
-    () => createSingleFileProject(originalCode),
-    [originalCode],
+    () => providedProject ?? createSingleFileProject(originalCode ?? ''),
+    [providedProject, originalCode],
   );
 
   const [project, setProject] = useState<VirtualProject>(originalProject);
@@ -142,6 +143,22 @@ export function useEditSession(
     [activeFile],
   );
 
+  const replaceFile = useCallback(
+    (path: string, content: string, encoding: 'utf8' | 'base64' = 'utf8') => {
+      setProject((prev) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(path);
+        if (file) {
+          updated.files.set(path, { ...file, content, encoding });
+        } else {
+          updated.files.set(path, { path, content, encoding });
+        }
+        return updated;
+      });
+    },
+    [],
+  );
+
   const clearError = useCallback(() => {
     setError(null);
   }, []);
@@ -160,5 +177,6 @@ export function useEditSession(
     updateActiveFile,
     setActiveFile,
     clearError,
+    replaceFile,
   };
 }

package/packages/editor/src/index.ts

@@ -12,6 +12,9 @@ export {
   EditModal,
   EditHistory,
   FileTree,
+  SaveConfirmDialog,
+  CodeBlockView,
+  MediaPreview,
   useEditSession,
   sendEditRequest,
   type EditModalProps,
@@ -25,8 +28,22 @@ export {
   type CompileFn,
   type EditApiOptions,
   type FileTreeProps,
+  type SaveConfirmDialogProps,
+  type CodeBlockViewProps,
+  type MediaPreviewProps,
+  type FileCategory,
+  type FileTypeInfo,
+  type FileEncoding,
   getActiveContent,
   getFiles,
+  getFileType,
+  isCompilable,
+  isMediaFile,
+  isTextFile,
+  isImageFile,
+  isVideoFile,
+  getLanguageFromExt,
+  getMimeType,
 } from './components/edit';
 
 // Lib utilities

package/packages/editor/src/lib/diff.ts

@@ -155,7 +155,6 @@ export interface ParsedEditResponse {
 /**
  * Parse progress notes and diffs from an edit response.
  * 
- * New format uses tagged attributes on code fences:
  * ```diff note="Adding handler" path="@/components/Button.tsx"
  * <<<<<<< SEARCH
  * exact code
@@ -275,6 +274,8 @@ export function applyDiffs(
 }
 
 export function hasDiffBlocks(text: string): boolean {
+  // Reset lastIndex to avoid state issues from the global regex flag
+  DIFF_BLOCK_REGEX.lastIndex = 0;
   return DIFF_BLOCK_REGEX.test(text);
 }
 

package/packages/editor/src/lib/vfs.ts

@@ -1,13 +1,13 @@
-import { 
-  VFSStore, 
-  LocalFSBackend, 
+import {
+  VFSStore,
+  HttpBackend,
+  type ChangeRecord,
   type VirtualProject,
-  type VirtualFile 
 } from '@aprovan/patchwork-compiler';
 
 /**
  * VFS client for persisting virtual projects to the stitchery server.
- * Uses LocalFSBackend which makes HTTP requests to /vfs routes.
+ * Uses HttpBackend which makes HTTP requests to /vfs routes.
  */
 
 // VFS base URL - points to stitchery server's VFS routes
@@ -41,12 +41,15 @@ let storeInstance: VFSStore | null = null;
 
 /**
  * Get the VFS store instance (creates one if needed).
- * Store uses LocalFSBackend to persist to the stitchery server.
+ * Store uses HttpBackend to persist to the stitchery server.
  */
 export function getVFSStore(): VFSStore {
   if (!storeInstance) {
-    const backend = new LocalFSBackend({ baseUrl: VFS_BASE_URL });
-    storeInstance = new VFSStore(backend);
+    const provider = new HttpBackend({ baseUrl: VFS_BASE_URL });
+    storeInstance = new VFSStore(provider, {
+      sync: true,
+      conflictStrategy: 'local-wins',
+    });
   }
   return storeInstance;
 }
@@ -88,9 +91,24 @@ export async function listProjects(): Promise<string[]> {
 /**
  * Save a single file to the VFS.
  */
-export async function saveFile(file: VirtualFile): Promise<void> {
+export async function saveFile(path: string, content: string): Promise<void> {
   const store = getVFSStore();
-  await store.putFile(file);
+  await store.writeFile(path, content);
+}
+
+export async function loadFile(
+  path: string,
+  encoding?: 'utf8' | 'base64',
+): Promise<string> {
+  const store = getVFSStore();
+  return store.readFile(path, encoding);
+}
+
+export function subscribeToChanges(
+  callback: (record: ChangeRecord) => void,
+): () => void {
+  const store = getVFSStore();
+  return store.on('change', callback);
 }
 
 /**

package/packages/editor/tsup.config.ts

@@ -1,10 +1,15 @@
-import { defineConfig } from 'tsup';
+import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm'],
-  dts: true,
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: false,
   clean: true,
-  external: ['react', 'react-dom'],
+  external: [
+    "react",
+    "react-dom",
+    "@aprovan/bobbin",
+    "@aprovan/patchwork-compiler",
+  ],
   treeshake: true,
 });

package/packages/stitchery/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "description": "Backend services for LLM-generated artifacts",
   "type": "module",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "bin": {
     "stitchery": "./dist/cli.js"
@@ -11,11 +11,13 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./server": {
       "types": "./dist/server/index.d.ts",
-      "import": "./dist/server/index.js"
+      "import": "./dist/server/index.js",
+      "require": "./dist/server/index.cjs"
     }
   },
   "scripts": {

package/packages/stitchery/src/server/index.ts

@@ -1,13 +1,13 @@
-import { createServer, type Server } from 'node:http';
-import { createMCPClient } from '@ai-sdk/mcp';
-import { Experimental_StdioMCPTransport } from '@ai-sdk/mcp/mcp-stdio';
-import { createUtcpBackend } from '@aprovan/patchwork-utcp';
-import { jsonSchema, type Tool } from 'ai';
-import type { ServerConfig, McpServerConfig } from '../types.js';
-import { handleChat, handleEdit, type RouteContext } from './routes.js';
-import { handleLocalPackages } from './local-packages.js';
-import { handleVFS, type VFSContext } from './vfs-routes.js';
-import { ServiceRegistry, generateServicesPrompt } from './services.js';
+import { createServer, type Server } from "node:http";
+import { createMCPClient } from "@ai-sdk/mcp";
+import { Experimental_StdioMCPTransport } from "@ai-sdk/mcp/mcp-stdio";
+import { createUtcpBackend } from "@aprovan/patchwork-utcp";
+import { jsonSchema, type Tool } from "ai";
+import type { ServerConfig, McpServerConfig } from "../types.js";
+import { handleChat, handleEdit, type RouteContext } from "./routes.js";
+import { handleLocalPackages } from "./local-packages.js";
+import { handleVFS, type VFSContext } from "./vfs-routes.js";
+import { ServiceRegistry, generateServicesPrompt } from "./services.js";
 
 export interface StitcheryServer {
   server: Server;
@@ -33,30 +33,30 @@ async function initMcpTools(
 }
 
 const searchServicesSchema = {
-  type: 'object',
+  type: "object",
   properties: {
     query: {
-      type: 'string',
+      type: "string",
       description:
         'Natural language description of what you want to do (e.g., "get weather forecast", "list github repos")',
     },
     namespace: {
-      type: 'string',
+      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',
+      type: "string",
+      description: "Get detailed info about a specific tool by name",
     },
     limit: {
-      type: 'number',
-      description: 'Maximum number of results to return',
+      type: "number",
+      description: "Maximum number of results to return",
       default: 10,
     },
     include_interfaces: {
-      type: 'boolean',
-      description: 'Include TypeScript interface definitions in results',
+      type: "boolean",
+      description: "Include TypeScript interface definitions in results",
       default: true,
     },
   },
@@ -113,18 +113,18 @@ Returns matching services with their TypeScript interfaces. Use when:
   };
 }
 
-function parseBody<T>(req: import('node:http').IncomingMessage): Promise<T> {
+function parseBody<T>(req: import("node:http").IncomingMessage): Promise<T> {
   return new Promise((resolve, reject) => {
-    let body = '';
-    req.on('data', (chunk) => (body += chunk));
-    req.on('end', () => {
+    let body = "";
+    req.on("data", (chunk) => (body += chunk));
+    req.on("end", () => {
       try {
         resolve(JSON.parse(body));
       } catch (err) {
         reject(err);
       }
     });
-    req.on('error', reject);
+    req.on("error", reject);
   });
 }
 
@@ -133,8 +133,8 @@ export async function createStitcheryServer(
 ): Promise<StitcheryServer> {
   const {
     port = 6434,
-    host = '127.0.0.1',
-    copilotProxyUrl = 'http://127.0.0.1:6433/v1',
+    host = "127.0.0.1",
+    copilotProxyUrl = "http://127.0.0.1:6433/v1",
     localPackages = {},
     mcpServers = [],
     utcp,
@@ -144,20 +144,20 @@ export async function createStitcheryServer(
   } = config;
 
   const log = verbose
-    ? (...args: unknown[]) => console.log('[stitchery]', ...args)
+    ? (...args: unknown[]) => console.log("[stitchery]", ...args)
     : () => {};
 
   // Create service registry
   const registry = new ServiceRegistry();
 
-  log('Initializing MCP tools...');
+  log("Initializing MCP tools...");
   await initMcpTools(mcpServers, registry);
   log(`Loaded ${registry.size} tools from ${mcpServers.length} MCP servers`);
 
   // Initialize UTCP backend if config provided
   if (utcp) {
-    log('Initializing UTCP backend...');
-    log('UTCP config:', JSON.stringify(utcp, null, 2));
+    log("Initializing UTCP backend...");
+    log("UTCP config:", JSON.stringify(utcp, null, 2));
     try {
       // Cast to unknown since createUtcpBackend uses UtcpClientConfigSerializer to validate
       const { backend, toolInfos } = await createUtcpBackend(
@@ -167,14 +167,14 @@ export async function createStitcheryServer(
       registry.registerBackend(backend, toolInfos);
       log(
         `Registered UTCP backend with ${toolInfos.length} tools:`,
-        toolInfos.map((t) => t.name).join(', '),
+        toolInfos.map((tool: { name: string }) => tool.name).join(", "),
       );
     } catch (err) {
-      console.error('[stitchery] Failed to initialize UTCP backend:', err);
+      console.error("[stitchery] Failed to initialize UTCP backend:", err);
     }
   }
 
-  log('Local packages:', localPackages);
+  log("Local packages:", localPackages);
 
   // Create internal tools (search_services, etc.)
   const internalTools = {
@@ -199,23 +199,23 @@ export async function createStitcheryServer(
     : null;
 
   const server = createServer(async (req, res) => {
-    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader("Access-Control-Allow-Origin", "*");
     res.setHeader(
-      'Access-Control-Allow-Methods',
-      'GET, POST, PUT, DELETE, HEAD, OPTIONS',
+      "Access-Control-Allow-Methods",
+      "GET, POST, PUT, DELETE, HEAD, OPTIONS",
     );
     res.setHeader(
-      'Access-Control-Allow-Headers',
-      'Content-Type, Authorization',
+      "Access-Control-Allow-Headers",
+      "Content-Type, Authorization",
     );
 
-    if (req.method === 'OPTIONS') {
+    if (req.method === "OPTIONS") {
       res.writeHead(204);
       res.end();
       return;
     }
 
-    const url = req.url || '/';
+    const url = req.url || "/";
     log(`${req.method} ${url}`);
 
     try {
@@ -227,19 +227,19 @@ export async function createStitcheryServer(
         return;
       }
 
-      if (url === '/api/chat' && req.method === 'POST') {
+      if (url === "/api/chat" && req.method === "POST") {
         await handleChat(req, res, routeCtx);
         return;
       }
 
-      if (url === '/api/edit' && req.method === 'POST') {
+      if (url === "/api/edit" && req.method === "POST") {
         await handleEdit(req, res, routeCtx);
         return;
       }
 
       // Service proxy endpoint for widgets
       const proxyMatch = url.match(/^\/api\/proxy\/([^/]+)\/(.+)$/);
-      if (proxyMatch && req.method === 'POST') {
+      if (proxyMatch && req.method === "POST") {
         const [, namespace, procedure] = proxyMatch;
         try {
           const body = await parseBody<{ args?: unknown }>(req);
@@ -248,16 +248,16 @@ export async function createStitcheryServer(
             procedure!,
             body.args ?? {},
           );
-          res.setHeader('Content-Type', 'application/json');
+          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');
+          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',
+              error: err instanceof Error ? err.message : "Service call failed",
             }),
           );
         }
@@ -265,7 +265,7 @@ export async function createStitcheryServer(
       }
 
       // Services search endpoint (POST with body for complex queries)
-      if (url === '/api/services/search' && req.method === 'POST') {
+      if (url === "/api/services/search" && req.method === "POST") {
         const body = await parseBody<{
           query?: string;
           namespace?: string;
@@ -274,7 +274,7 @@ export async function createStitcheryServer(
           include_interfaces?: boolean;
         }>(req);
 
-        res.setHeader('Content-Type', 'application/json');
+        res.setHeader("Content-Type", "application/json");
         res.writeHead(200);
 
         if (body.tool_name) {
@@ -311,8 +311,8 @@ export async function createStitcheryServer(
       }
 
       // Services metadata endpoint
-      if (url === '/api/services' && req.method === 'GET') {
-        res.setHeader('Content-Type', 'application/json');
+      if (url === "/api/services" && req.method === "GET") {
+        res.setHeader("Content-Type", "application/json");
         res.writeHead(200);
         res.end(
           JSON.stringify({
@@ -323,19 +323,19 @@ export async function createStitcheryServer(
         return;
       }
 
-      if (url === '/health' || url === '/') {
-        res.setHeader('Content-Type', 'application/json');
+      if (url === "/health" || url === "/") {
+        res.setHeader("Content-Type", "application/json");
         res.writeHead(200);
-        res.end(JSON.stringify({ status: 'ok', service: 'stitchery' }));
+        res.end(JSON.stringify({ status: "ok", service: "stitchery" }));
         return;
       }
 
       res.writeHead(404);
       res.end(`Not found: ${url}`);
     } catch (err) {
-      log('Error:', err);
+      log("Error:", err);
       res.writeHead(500);
-      res.end(err instanceof Error ? err.message : 'Internal server error');
+      res.end(err instanceof Error ? err.message : "Internal server error");
     }
   });
 
@@ -345,7 +345,7 @@ export async function createStitcheryServer(
 
     async start() {
       return new Promise((resolve, reject) => {
-        server.on('error', reject);
+        server.on("error", reject);
         server.listen(port, host, () => {
           log(`Server listening on http://${host}:${port}`);
           resolve({ port, host });