@bitovi/vybit 0.4.8 → 0.4.10

package/README.md

@@ -52,6 +52,35 @@ __Claude Code__ in `.mcp.json`
 }
 ```
 
+#### Running inside Docker
+
+If your app runs in a Docker container, run VyBit **inside the container** instead of on the host. This is necessary because VyBit needs access to your project's `node_modules` to resolve Tailwind — which only exist inside the container, not on the host.
+
+Replace the `npx` command with `docker exec`. For example, Claude Code in `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "vybit": {
+      "command": "docker",
+      "args": ["exec", "-i", "<your-container-name>", "npx", "@bitovi/vybit"]
+    }
+  }
+}
+```
+
+You can find your container name by running `docker ps`.
+
+You also need to expose port `3333` so the browser can load the editor overlay script. Add it to your `docker-compose.yml` (or override file):
+
+```yaml
+ports:
+  - "3000:3000"
+  - "3333:3333"
+```
+
+Then restart your containers for the port mapping to take effect.
+
 ### Start the MCP connection
 
 Different agents connect to an MCP service in different ways:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",

package/server/index.ts

@@ -15,6 +15,39 @@ import { getByStatus, getCounts, getNextCommitted, reclaimImplementingCommits, m
 import { createApp } from "./app.js";
 import { setupWebSocket } from "./websocket.js";
 import { registerMcpTools } from "./mcp-tools.js";
+import { checkTailwindAvailable } from "./tailwind.js";
+
+// --- Resolve project root (precedence: --cwd flag, VYBIT_PROJECT_ROOT, cwd) ---
+const argv = process.argv.slice(2);
+let desiredProjectRoot = process.cwd();
+const cwdFlagIndex = argv.findIndex(a => a === "--cwd" || a === "-C");
+if (cwdFlagIndex !== -1 && argv[cwdFlagIndex + 1]) {
+  desiredProjectRoot = path.resolve(argv[cwdFlagIndex + 1]);
+} else if (process.env.VYBIT_PROJECT_ROOT) {
+  desiredProjectRoot = path.resolve(process.env.VYBIT_PROJECT_ROOT);
+}
+
+if (desiredProjectRoot !== process.cwd()) {
+  try {
+    process.chdir(desiredProjectRoot);
+    console.error(`[startup] Using project root: ${desiredProjectRoot}`);
+  } catch (err) {
+    console.error(`Failed to change cwd to ${desiredProjectRoot}: ${err}`);
+    process.exit(1);
+  }
+}
+
+// --- Startup check: tailwindcss must be resolvable from cwd ---
+const tailwindCheck = checkTailwindAvailable();
+if (!tailwindCheck.ok) {
+  console.error("VyBit: tailwindcss not found — cannot start");
+  console.error(`cwd: ${process.cwd()}`);
+  console.error("VyBit must run from your project directory so it can find tailwindcss in node_modules.");
+  console.error('If your app runs in Docker, run VyBit inside the container:');
+  console.error('  docker exec -i <container> npx @bitovi/vybit');
+  console.error("See: https://github.com/bitovi/vybit#running-inside-docker");
+  process.exit(1);
+}
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -82,6 +115,7 @@ const mcp = new McpServer(
 registerMcpTools(mcp, {
   broadcastPatchUpdate,
   getNextCommitted,
+  reclaimImplementingCommits,
   onCommitted,
   markCommitImplementing,
   markCommitImplemented,

package/server/tailwind-v3.ts

@@ -91,7 +91,6 @@ export class TailwindV3Adapter implements TailwindAdapter {
     if (configPath) {
       try {
         const req = createRequire(resolve(cwd, "package.json"));
-        // @ts-expect-error — tailwindcss resolveConfig lacks NodeNext-compatible exports
         const resolveConfig = (await import(req.resolve("tailwindcss/resolveConfig"))).default;
         const userConfig = (await import(configPath)).default;
         const full = resolveConfig(userConfig);

package/server/tailwind.ts

@@ -48,3 +48,18 @@ export async function resolveTailwindConfig(): Promise<TailwindThemeSubset> {
 export async function generateCssForClasses(classes: string[]): Promise<string> {
   return (await getAdapter()).generateCssForClasses(classes);
 }
+
+/**
+ * Synchronous pre-flight check: can we find tailwindcss from the current cwd?
+ * Used at startup to give an early, actionable error before the server binds.
+ */
+export function checkTailwindAvailable(): { ok: true } | { ok: false; error: string } {
+  try {
+    const cwd = process.cwd();
+    const req = createRequire(resolve(cwd, "package.json"));
+    req.resolve("tailwindcss/package.json");
+    return { ok: true };
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}

package/server/tests/server.integration.test.ts

@@ -14,6 +14,7 @@ import {
   getByStatus,
   getCounts,
   getNextCommitted,
+  reclaimImplementingCommits,
   markCommitImplementing,
   markCommitImplemented,
   markImplementing,
@@ -130,6 +131,7 @@ describe('Server integration tests', () => {
     registerMcpTools(mcpServer, {
       broadcastPatchUpdate,
       getNextCommitted,
+      reclaimImplementingCommits,
       onCommitted,
       markCommitImplementing,
       markCommitImplemented,