npm - @bitovi/vybit - Versions diffs - 0.4.4 - Mend

@bitovi/vybit 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/LICENSE +21 -0
package/README.md +155 -0
package/loader.mjs +11 -0
package/overlay/dist/.gitkeep +0 -0
package/overlay/dist/overlay.js +1547 -0
package/package.json +57 -0
package/panel/dist/assets/index-BUKLf5aN.css +1 -0
package/panel/dist/assets/index-Cr2RD_Gn.js +549 -0
package/panel/dist/index.html +25 -0
package/server/app.ts +117 -0
package/server/index.ts +57 -0
package/server/mcp-tools.ts +356 -0
package/server/queue.ts +281 -0
package/server/tailwind-adapter.ts +17 -0
package/server/tailwind-v3.ts +159 -0
package/server/tailwind-v4.ts +160 -0
package/server/tailwind.ts +50 -0
package/server/tests/server.integration.test.ts +698 -0
package/server/websocket.ts +130 -0
package/shared/types.ts +304 -0

package/panel/dist/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tailwind Visual Editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Inter:wght@400;600;700&family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
+  <style>
+    html, body, #root { height: 100%; }
+    body {
+      background: #FFFFFF;
+      color: #334041;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: 12px;
+    }
+  </style>
+  <script type="module" crossorigin src="/panel/assets/index-Cr2RD_Gn.js"></script>
+  <link rel="stylesheet" crossorigin href="/panel/assets/index-BUKLf5aN.css">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/server/app.ts ADDED Viewed

@@ -0,0 +1,117 @@
+// Express app factory
+import express from "express";
+import cors from "cors";
+import { request as makeRequest } from "http";
+import path from "path";
+import { getByStatus, getQueueUpdate, clearAll } from "./queue.js";
+import { resolveTailwindConfig, generateCssForClasses, getTailwindVersion } from "./tailwind.js";
+import type { PatchStatus } from "../shared/types.js";
+const VALID_STATUSES = new Set<string>(['staged', 'committed', 'implementing', 'implemented', 'error']);
+export function createApp(packageRoot: string): express.Express {
+  const app = express();
+  app.use(cors());
+  app.get("/overlay.js", (_req, res) => {
+    const overlayPath = path.join(packageRoot, "overlay", "dist", "overlay.js");
+    res.sendFile(overlayPath, (err) => {
+      if (err) {
+        console.error("[http] Failed to serve overlay.js:", err);
+        if (!res.headersSent) res.status(404).end();
+      }
+    });
+  });
+  app.get("/api/info", async (_req, res) => {
+    try {
+      const tailwindVersion = await getTailwindVersion();
+      res.json({ tailwindVersion });
+    } catch (err) {
+      console.error("[http] Failed to detect tailwind version:", err);
+      res.status(500).json({ error: "Failed to detect Tailwind version" });
+    }
+  });
+  app.get("/tailwind-config", async (_req, res) => {
+    try {
+      const config = await resolveTailwindConfig();
+      res.json(config);
+    } catch (err) {
+      console.error("[http] Failed to resolve tailwind config:", err);
+      res.status(500).json({ error: "Failed to resolve Tailwind config" });
+    }
+  });
+  app.post("/css", express.json(), async (req, res) => {
+    const { classes } = req.body as { classes?: unknown };
+    if (!Array.isArray(classes) || classes.some((c) => typeof c !== "string")) {
+      res.status(400).json({ error: "classes must be an array of strings" });
+      return;
+    }
+    try {
+      const css = await generateCssForClasses(classes as string[]);
+      res.json({ css });
+    } catch (err) {
+      console.error("[http] Failed to generate CSS:", err);
+      res.status(500).json({ error: "Failed to generate CSS" });
+    }
+  });
+  // --- Patch state REST endpoint ---
+  app.get("/patches", (_req, res) => {
+    const status = _req.query.status as string | undefined;
+    if (status) {
+      if (!VALID_STATUSES.has(status)) {
+        res.status(400).json({ error: `Invalid status. Must be one of: ${[...VALID_STATUSES].join(', ')}` });
+        return;
+      }
+      res.json(getByStatus(status as PatchStatus));
+    } else {
+      const update = getQueueUpdate();
+      res.json(update);
+    }
+  });
+  app.delete("/patches", (_req, res) => {
+    clearAll();
+    res.json({ ok: true });
+  });
+  // --- Serve Panel app ---
+  if (process.env.PANEL_DEV) {
+    const panelDevPort = Number(process.env.PANEL_DEV_PORT) || 5174;
+    console.error(`[server] Panel dev mode: proxying /panel → http://localhost:${panelDevPort}`);
+    app.use("/panel", (req, res) => {
+      const proxyReq = makeRequest(
+        {
+          hostname: "localhost",
+          port: panelDevPort,
+          path: "/panel" + req.url,
+          method: req.method,
+          headers: { ...req.headers, host: `localhost:${panelDevPort}` },
+        },
+        (proxyRes) => {
+          res.writeHead(proxyRes.statusCode!, proxyRes.headers);
+          proxyRes.pipe(res, { end: true });
+        }
+      );
+      proxyReq.on("error", () => {
+        if (!res.headersSent) res.status(502).send("Panel dev server not running on port " + panelDevPort);
+      });
+      req.pipe(proxyReq, { end: true });
+    });
+  } else {
+    const panelDist = path.join(packageRoot, "panel", "dist");
+    app.use("/panel", express.static(panelDist));
+    app.get("/panel/*", (_req, res) => {
+      res.sendFile(path.join(panelDist, "index.html"), (err) => {
+        if (err && !res.headersSent) res.status(404).end();
+      });
+    });
+  }
+  return app;
+}

package/server/index.ts ADDED Viewed

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+// MCP Server entrypoint
+import { createServer } from "http";
+import { fileURLToPath } from "url";
+import path from "path";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { getByStatus, getCounts, getNextCommitted, markCommitImplementing, markCommitImplemented, markImplementing, markImplemented, clearAll, onCommitted, getQueueUpdate } from "./queue.js";
+import { createApp } from "./app.js";
+import { setupWebSocket } from "./websocket.js";
+import { registerMcpTools } from "./mcp-tools.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = __dirname.includes(`${path.sep}dist${path.sep}`)
+  ? path.resolve(__dirname, "..", "..")
+  : path.resolve(__dirname, "..");
+const port = Number(process.env.PORT) || 3333;
+// --- HTTP + WebSocket ---
+const app = createApp(packageRoot);
+const httpServer = createServer(app);
+const { broadcastPatchUpdate } = setupWebSocket(httpServer);
+httpServer.listen(port, () => {
+  console.error(`[server] HTTP + WS listening on http://localhost:${port}`);
+});
+// --- MCP Server (stdio) ---
+const mcp = new McpServer(
+  { name: "vybit", version: "0.1.0" },
+  { capabilities: { tools: {} } },
+);
+registerMcpTools(mcp, {
+  broadcastPatchUpdate,
+  getNextCommitted,
+  onCommitted,
+  markCommitImplementing,
+  markCommitImplemented,
+  markImplementing,
+  markImplemented,
+  getByStatus,
+  getCounts,
+  getQueueUpdate,
+  clearAll,
+});
+const transport = new StdioServerTransport();
+await mcp.connect(transport);
+console.error("[mcp] MCP server connected via stdio");

package/server/mcp-tools.ts ADDED Viewed

@@ -0,0 +1,356 @@
+// MCP tool registration
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+import type { Patch, PatchStatus, Commit } from "../shared/types.js";
+import type { PatchResult } from "./queue.js";
+export interface McpToolDeps {
+  broadcastPatchUpdate: () => void;
+  getNextCommitted: () => Commit | null;
+  onCommitted: (listener: () => void) => () => void;
+  markCommitImplementing: (commitId: string) => void;
+  markCommitImplemented: (commitId: string, results: PatchResult[]) => void;
+  // Legacy per-patch methods (backward compat)
+  markImplementing: (ids: string[]) => number;
+  markImplemented: (ids: string[]) => number;
+  getByStatus: (status: PatchStatus) => Patch[];
+  getCounts: () => { staged: number; committed: number; implementing: number; implemented: number };
+  getQueueUpdate: () => any;
+  clearAll: () => { staged: number; committed: number; implementing: number; implemented: number };
+}
+const KEEPALIVE_INTERVAL_MS = 60_000;
+// ---------------------------------------------------------------------------
+// Prompt builders for implement_next_change
+// ---------------------------------------------------------------------------
+function buildCommitInstructions(commit: Commit, remainingCount: number): string {
+  const classChanges = commit.patches.filter(p => p.kind === 'class-change');
+  const messages = commit.patches.filter(p => p.kind === 'message');
+  const designs = commit.patches.filter(p => p.kind === 'design');
+  const moreText = remainingCount > 0
+    ? `${remainingCount} more commit${remainingCount === 1 ? '' : 's'} waiting in the queue after this one.`
+    : 'This is the last commit in the queue. After implementing it, call `implement_next_change` again to wait for future changes.';
+  let patchList = '';
+  let stepNum = 1;
+  for (const patch of commit.patches) {
+    if (patch.kind === 'class-change') {
+      const comp = patch.component?.name ?? 'unknown component';
+      const tag = patch.target?.tag ?? 'element';
+      const context = patch.context ?? '';
+      patchList += `### ${stepNum}. Class change \`${patch.id}\`
+- **Component:** \`${comp}\`
+- **Element:** \`<${tag}>\`
+- **Class change:** \`${patch.originalClass}\` → \`${patch.newClass}\`
+- **Property:** ${patch.property}
+${context ? `- **Context HTML:**\n\`\`\`html\n${context}\n\`\`\`\n` : ''}
+`;
+    } else if (patch.kind === 'message') {
+      patchList += `### ${stepNum}. User message
+> ${patch.message}
+${patch.elementKey ? `\n_Scoped to: ${patch.elementKey}_\n` : ''}
+`;
+    } else if (patch.kind === 'design') {
+      const comp = patch.component?.name ?? 'unknown component';
+      const tag = patch.target?.tag ?? 'element';
+      const context = patch.context ?? '';
+      patchList += `### ${stepNum}. Design sketch \`${patch.id}\`
+- **Component:** \`${comp}\`
+- **Element:** \`<${tag}>\`
+- **Insert position:** ${patch.insertMode ?? 'after'} the element
+- **Canvas size:** ${patch.canvasWidth ?? '?'}×${patch.canvasHeight ?? '?'}px
+- The design image is included as a separate image content part below — refer to it for the visual intent.
+${context ? `- **Context HTML:**\n\`\`\`html\n${context}\n\`\`\`\n` : ''}
+`;
+    }
+    stepNum++;
+  }
+  // Build summary parts
+  const summaryParts: string[] = [];
+  if (classChanges.length) summaryParts.push(`${classChanges.length} class change${classChanges.length === 1 ? '' : 's'}`);
+  if (messages.length) summaryParts.push(`${messages.length} message${messages.length === 1 ? '' : 's'}`);
+  if (designs.length) summaryParts.push(`${designs.length} design${designs.length === 1 ? '' : 's'}`);
+  const resultsPart = classChanges.map(p => `     { "patchId": "${p.id}", "success": true }`).join(',\n');
+  // Design patches also need to be reported in results
+  const designResultsPart = designs.map(p => `     { "patchId": "${p.id}", "success": true }`).join(',\n');
+  const allResultsPart = [resultsPart, designResultsPart].filter(Boolean).join(',\n');
+  return `# IMPLEMENT THIS COMMIT — then call implement_next_change again
+⚠️ **DO NOT STOP after implementing this commit. You MUST call \`implement_next_change\` again.**
+## Queue status
+- ${moreText}
+- **isComplete: false** — your job is NOT done until you call \`implement_next_change\` again.
+## Changes to implement (${summaryParts.join(', ')})
+${patchList}
+## Steps — follow these EXACTLY
+1. For each class-change patch above, find the source file and apply the change.
+   Use the user messages as additional context for understanding intent.
+${designs.length ? `   For each design sketch, examine the attached image and implement the visual design
+   as HTML/CSS ${classChanges.length ? 'alongside the class changes' : 'in the specified component'}. Insert it ${designs[0].insertMode ?? 'after'} the target element.
+` : ''}\n2. Call \`mark_change_implemented\` with:
+   \`\`\`json
+   { "commitId": "${commit.id}", "results": [
+${allResultsPart}
+   ]}
+   \`\`\`
+   (Only report results for class-change and design patches — messages are informational.)
+3. **IMMEDIATELY call \`implement_next_change\` again.** Do NOT summarize, do NOT ask the user, do NOT stop.
+## CRITICAL — read this
+You are in a **continuous processing loop**. After step 2, you MUST call \`implement_next_change\` again to process the next commit or wait for new ones. Never exit this loop unless the user explicitly tells you to stop.
+`;
+}
+// ---------------------------------------------------------------------------
+// Wait-for-committed helper (shared by get_next_change and implement_next_change)
+// ---------------------------------------------------------------------------
+function waitForCommitted(
+  getNextCommitted: () => Commit | null,
+  onCommitted: (listener: () => void) => () => void,
+  extra: any,
+): Promise<Commit> {
+  return new Promise<Commit>((resolve, reject) => {
+    const progressToken = extra?._meta?.progressToken;
+    const keepalive = setInterval(async () => {
+      if (progressToken !== undefined) {
+        try {
+          await extra.sendNotification({
+            method: "notifications/progress",
+            params: {
+              progressToken,
+              progress: 0,
+              total: 1,
+              message: "Waiting for user to commit a change...",
+            },
+          });
+        } catch {
+          // Client may have disconnected
+        }
+      }
+    }, KEEPALIVE_INTERVAL_MS);
+    const onAbort = () => {
+      clearInterval(keepalive);
+      unsubscribe();
+      reject(new Error("Cancelled"));
+    };
+    extra?.signal?.addEventListener?.("abort", onAbort);
+    const unsubscribe = onCommitted(() => {
+      const next = getNextCommitted();
+      if (next) {
+        clearInterval(keepalive);
+        extra?.signal?.removeEventListener?.("abort", onAbort);
+        resolve(next);
+      }
+    });
+  });
+}
+// ---------------------------------------------------------------------------
+// Tool registration
+// ---------------------------------------------------------------------------
+export function registerMcpTools(mcp: McpServer, deps: McpToolDeps): void {
+  const {
+    broadcastPatchUpdate,
+    getNextCommitted,
+    onCommitted,
+    markCommitImplementing,
+    markCommitImplemented,
+    markImplementing,
+    markImplemented,
+    getByStatus,
+    getCounts,
+    getQueueUpdate,
+    clearAll,
+  } = deps;
+  // --- get_next_change ---
+  mcp.tool(
+    "get_next_change",
+    "Waits for and returns the next committed change (full commit with all patches). " +
+    "Transitions the commit to 'implementing' status. " +
+    "Returns only the raw commit data — no workflow instructions. " +
+    "Use implement_next_change instead if you want guided implementation with auto-looping.",
+    async (_extra) => {
+      const extra = _extra as any;
+      let commit = getNextCommitted();
+      if (!commit) {
+        commit = await waitForCommitted(getNextCommitted, onCommitted, extra);
+      }
+      markCommitImplementing(commit.id);
+      broadcastPatchUpdate();
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(commit, null, 2),
+          },
+        ],
+      };
+    },
+  );
+  // --- implement_next_change ---
+  mcp.tool(
+    "implement_next_change",
+    "CONTINUOUS LOOP: Waits for the next committed change (a commit with class-changes and context messages), " +
+    "returns implementation instructions, and REQUIRES the agent to apply all class-changes, mark them done, " +
+    "then call this tool AGAIN. Messages in the commit provide context for understanding intent. " +
+    "The agent MUST keep calling this tool in a loop until explicitly stopped by the user.",
+    async (_extra) => {
+      const extra = _extra as any;
+      let commit = getNextCommitted();
+      if (!commit) {
+        commit = await waitForCommitted(getNextCommitted, onCommitted, extra);
+      }
+      markCommitImplementing(commit.id);
+      broadcastPatchUpdate();
+      // Count remaining committed commits (excluding this one, which is now 'implementing')
+      const queueState = getQueueUpdate();
+      const remaining = queueState.committedCount;
+      // Build content parts: JSON data, then any design images, then markdown instructions
+      const content: Array<{ type: 'text'; text: string } | { type: 'image'; data: string; mimeType: string }> = [
+        {
+          type: "text" as const,
+          text: JSON.stringify({
+            isComplete: false,
+            nextAction: "implement all class-change patches in this commit, call mark_change_implemented, then call implement_next_change again",
+            remainingCommits: remaining,
+            commit,
+          }, null, 2),
+        },
+      ];
+      // Add design images as separate image content parts so the agent can see them
+      for (const patch of commit.patches) {
+        if (patch.kind === 'design' && patch.image) {
+          const match = patch.image.match(/^data:([^;]+);base64,(.+)$/);
+          if (match) {
+            content.push({
+              type: "image" as const,
+              data: match[2],
+              mimeType: match[1],
+            });
+          }
+        }
+      }
+      content.push({
+        type: "text" as const,
+        text: buildCommitInstructions(commit, remaining),
+      });
+      return { content };
+    },
+  );
+  // --- mark_change_implemented ---
+  mcp.tool(
+    "mark_change_implemented",
+    "Marks changes as implemented after the agent has applied them to source code. " +
+    "Accepts either commitId + per-patch results (new) or legacy ids array. " +
+    "After calling this, you MUST call implement_next_change again to continue processing.",
+    {
+      commitId: z.string().optional().describe("The commit ID (new commit-based flow)"),
+      results: z.array(z.object({
+        patchId: z.string().describe("ID of a class-change patch"),
+        success: z.boolean(),
+        error: z.string().optional(),
+      })).optional().describe("Per-patch results (class-change patches only — skip message patches)"),
+      ids: z.array(z.string()).optional().describe("Legacy: Patch IDs to mark as implemented"),
+    },
+    async ({ commitId, results, ids }) => {
+      let moved = 0;
+      if (commitId && results) {
+        // New commit-based flow
+        markCommitImplemented(commitId, results);
+        moved = results.filter(r => r.success).length;
+      } else if (ids) {
+        // Legacy per-patch flow
+        moved = markImplemented(ids);
+      }
+      broadcastPatchUpdate();
+      const counts = getCounts();
+      const remaining = counts.committed + counts.implementing;
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify({
+              moved,
+              isComplete: false,
+              nextAction: "call implement_next_change NOW to process the next change",
+              remainingInQueue: remaining,
+            }),
+          },
+          {
+            type: "text" as const,
+            text: `✅ Marked ${moved} change(s) as implemented.\n\n` +
+              `⚠️ **YOUR NEXT STEP:** Call \`implement_next_change\` NOW.\n` +
+              `Do NOT stop. Do NOT summarize. Do NOT ask the user what to do.\n` +
+              `${remaining > 0 ? `There are ${remaining} more change(s) to process.` : 'No more changes right now — call implement_next_change to wait for the next one.'}`,
+          },
+        ],
+      };
+    },
+  );
+  // --- list_changes ---
+  mcp.tool(
+    "list_changes",
+    "Lists changes grouped by commit status. Optionally filter by a specific status.",
+    { status: z.enum(["staged", "committed", "implementing", "implemented", "error"]).optional().describe("Filter by patch status") },
+    async ({ status }) => {
+      if (status) {
+        return {
+          content: [{ type: "text" as const, text: JSON.stringify(getByStatus(status), null, 2) }],
+        };
+      }
+      const queueState = getQueueUpdate();
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(queueState, null, 2) }],
+      };
+    },
+  );
+  // --- discard_all_changes ---
+  mcp.tool(
+    "discard_all_changes",
+    "Discards all changes regardless of status",
+    async () => {
+      const counts = clearAll();
+      broadcastPatchUpdate();
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(counts) }],
+      };
+    },
+  );
+}