npm - @vellumai/cli - Versions diffs - 0.8.8 → 0.8.9-staging.2 - Mend

@vellumai/cli 0.8.8 → 0.8.9-staging.2

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 (4) hide show

package/package.json +1 -1
package/src/commands/login.ts +128 -9
package/src/lib/__tests__/docker.test.ts +99 -0
package/src/lib/docker.ts +92 -29

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vellumai/cli",
-  "version": "0.8.8",
+  "version": "0.8.9-staging.2",
   "description": "CLI tools for vellum-assistant",
   "type": "module",
   "exports": {

package/src/commands/login.ts CHANGED Viewed

@@ -32,6 +32,131 @@ import { syncCloudAssistants } from "../lib/sync-cloud-assistants";
 const LOGIN_TIMEOUT_MS = 120_000; // 2 minutes
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+function renderLoginPage(title: string, subtitle: string, success: boolean): string {
+  const checkmarkSvg = `<svg class="icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="28" cy="28" r="28" fill="var(--positive-bg)"/>
+      <path class="check" d="M17 28.5L24.5 36L39 21" stroke="var(--positive-fg)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    </svg>`;
+  const errorSvg = `<svg class="icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="28" cy="28" r="28" fill="var(--negative-bg)"/>
+      <path class="cross cross-1" d="M20 20L36 36" stroke="var(--negative-fg)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+      <path class="cross cross-2" d="M36 20L20 36" stroke="var(--negative-fg)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+    </svg>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <style>
+    :root {
+      --surface: #F5F3EB;
+      --surface-card: #FFFFFF;
+      --card-border: #E8E6DA;
+      --text-primary: #2A2A28;
+      --text-secondary: #4A4A46;
+      --positive-bg: #D4DFD0;
+      --positive-fg: #516748;
+      --negative-bg: #F7DAC9;
+      --negative-fg: #DA491A;
+      --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
+      --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --surface: #1A1A18;
+        --surface-card: #2A2A28;
+        --card-border: #3A3A37;
+        --text-primary: #F5F3EB;
+        --text-secondary: #BDB9A9;
+        --positive-bg: #1A2316;
+        --positive-fg: #7A8B6F;
+        --negative-bg: #4E281D;
+        --negative-fg: #E86B40;
+        --shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3);
+      }
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: var(--font);
+      background: var(--surface);
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+    }
+    .card {
+      text-align: center;
+      padding: 48px 40px 40px;
+      background: var(--surface-card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      box-shadow: var(--shadow);
+      max-width: 380px;
+      width: 100%;
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+      animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
+    }
+    @keyframes cardIn {
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .icon {
+      width: 56px;
+      height: 56px;
+      margin-bottom: 20px;
+    }
+    .check {
+      stroke-dasharray: 32;
+      stroke-dashoffset: 32;
+      animation: draw 0.4s ease-out 0.45s forwards;
+    }
+    .cross {
+      stroke-dasharray: 22;
+      stroke-dashoffset: 22;
+    }
+    .cross-1 { animation: draw 0.3s ease-out 0.45s forwards; }
+    .cross-2 { animation: draw 0.3s ease-out 0.55s forwards; }
+    @keyframes draw {
+      to { stroke-dashoffset: 0; }
+    }
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.2px;
+      color: var(--text-primary);
+      margin-bottom: 6px;
+    }
+    p {
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    ${success ? checkmarkSvg : errorSvg}
+    <h1>${escapeHtml(title)}</h1>
+    <p>${escapeHtml(subtitle)}</p>
+  </div>
+</body>
+</html>`;
+}
 /**
  * Open a URL in the user's default browser.
  */
@@ -72,26 +197,20 @@ function browserLogin(webUrl: string): Promise<string> {
       if (receivedState !== state) {
         res.writeHead(400, { "Content-Type": "text/html" });
-        res.end(
-          "<html><body><h2>Login failed</h2><p>State mismatch. Please try again.</p></body></html>",
-        );
+        res.end(renderLoginPage("Login Failed", "State mismatch. Please try again.", false));
         cleanup("State mismatch — possible CSRF attack.");
         return;
       }
       if (!sessionToken) {
         res.writeHead(400, { "Content-Type": "text/html" });
-        res.end(
-          "<html><body><h2>Login failed</h2><p>No session token received. Please try again.</p></body></html>",
-        );
+        res.end(renderLoginPage("Login Failed", "No session token received. Please try again.", false));
         cleanup("No session token received from platform.");
         return;
       }
       res.writeHead(200, { "Content-Type": "text/html" });
-      res.end(
-        "<html><body><h2>Login successful!</h2><p>You can close this window and return to your terminal.</p></body></html>",
-      );
+      res.end(renderLoginPage("Login Successful", "You can close this window and return to your terminal.", true));
       cleanup(null, sessionToken);
     });

package/src/lib/__tests__/docker.test.ts CHANGED Viewed

@@ -1,7 +1,11 @@
 import { afterEach, beforeEach, describe, test, expect } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
 import {
   ASSISTANT_INTERNAL_PORT,
   AVATAR_DEVICE_ENV_VAR,
+  collectWatchTargets,
   dockerResourceNames,
   resolveAvatarDevicePath,
   resolveDockerHatchMode,
@@ -277,3 +281,98 @@ describe("resolveDockerHatchMode", () => {
     ).toEqual({ build: false, watcher: false, fellBackToPull: true });
   });
 });
+describe("collectWatchTargets", () => {
+  let repoRoot: string;
+  beforeEach(() => {
+    repoRoot = mkdtempSync(join(tmpdir(), "vellum-watch-"));
+  });
+  afterEach(() => {
+    rmSync(repoRoot, { recursive: true, force: true });
+  });
+  function scaffold(
+    relDir: string,
+    { src = true, pkg = true, dockerfile = false } = {},
+  ): void {
+    mkdirSync(join(repoRoot, relDir), { recursive: true });
+    if (src) mkdirSync(join(repoRoot, relDir, "src"), { recursive: true });
+    if (pkg) writeFileSync(join(repoRoot, relDir, "package.json"), "{}");
+    if (dockerfile) writeFileSync(join(repoRoot, relDir, "Dockerfile"), "");
+  }
+  test("scopes watch targets to src/, package.json, and the Dockerfile", () => {
+    // GIVEN the three services (each with a Dockerfile) plus a couple of
+    // shared packages (libraries, no Dockerfile)
+    scaffold("assistant", { dockerfile: true });
+    scaffold("credential-executor", { dockerfile: true });
+    scaffold("gateway", { dockerfile: true });
+    scaffold("packages/service-contracts");
+    scaffold("packages/local-mode");
+    // WHEN we collect the watch targets
+    const { dirs, files } = collectWatchTargets(repoRoot);
+    // THEN only the src/ directories are watched recursively
+    expect(dirs.sort()).toEqual(
+      [
+        join(repoRoot, "assistant", "src"),
+        join(repoRoot, "credential-executor", "src"),
+        join(repoRoot, "gateway", "src"),
+        join(repoRoot, "packages", "local-mode", "src"),
+        join(repoRoot, "packages", "service-contracts", "src"),
+      ].sort(),
+    );
+    // AND the package.json manifests and service Dockerfiles are watched as
+    // individual files (packages have no Dockerfile, so none is emitted)
+    expect(files.sort()).toEqual(
+      [
+        join(repoRoot, "assistant", "package.json"),
+        join(repoRoot, "assistant", "Dockerfile"),
+        join(repoRoot, "credential-executor", "package.json"),
+        join(repoRoot, "credential-executor", "Dockerfile"),
+        join(repoRoot, "gateway", "package.json"),
+        join(repoRoot, "gateway", "Dockerfile"),
+        join(repoRoot, "packages", "local-mode", "package.json"),
+        join(repoRoot, "packages", "service-contracts", "package.json"),
+      ].sort(),
+    );
+  });
+  test("never watches .claude/ command symlinks that crash the watcher", () => {
+    // GIVEN an assistant service whose .claude/commands holds a dangling
+    // symlink (as it does in a fresh checkout)
+    scaffold("assistant");
+    mkdirSync(join(repoRoot, "assistant", ".claude", "commands"), {
+      recursive: true,
+    });
+    symlinkSync(
+      join(repoRoot, "does-not-exist", "do.md"),
+      join(repoRoot, "assistant", ".claude", "commands", "do.md"),
+    );
+    // WHEN we collect the watch targets
+    const { dirs, files } = collectWatchTargets(repoRoot);
+    // THEN no watched path reaches into the .claude/ tree
+    const all = [...dirs, ...files];
+    expect(all.some((p) => p.includes(".claude"))).toBe(false);
+    expect(dirs).toContain(join(repoRoot, "assistant", "src"));
+  });
+  test("skips roots missing a src/ directory or package.json", () => {
+    // GIVEN a service with only a manifest and a package with only a src/ dir
+    scaffold("gateway", { src: false, pkg: true });
+    scaffold("packages/contracts-only", { src: true, pkg: false });
+    // WHEN we collect the watch targets
+    const { dirs, files } = collectWatchTargets(repoRoot);
+    // THEN absent paths are not emitted
+    expect(dirs).toEqual([join(repoRoot, "packages", "contracts-only", "src")]);
+    expect(files).toEqual([join(repoRoot, "gateway", "package.json")]);
+  });
+});

package/src/lib/docker.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import {
   existsSync,
   mkdirSync,
   readFileSync,
+  readdirSync,
   watch as fsWatch,
 } from "fs";
 import { arch, platform } from "os";
@@ -788,6 +789,56 @@ export async function captureImageRefs(
   return hasAll ? (refs as Record<ServiceName, string>) : null;
 }
+/**
+ * Build the set of paths the hot-reload watcher should observe, scoped to
+ * each service's `src/` tree, `package.json` manifest, and `Dockerfile`.
+ *
+ * We deliberately avoid recursively watching whole service directories.
+ * Those contain `.claude/` command symlinks — which dangle in a fresh
+ * checkout because they point at the separately-cloned `claude-skills`
+ * repo — as well as `node_modules`. `fs.watch(dir, { recursive: true })`
+ * traverses those entries and emits an unhandled `error` event on a broken
+ * symlink, which crashes the CLI process. Source code only ever lives under
+ * `src/`, so watching that tree plus the two manifests that drive the image
+ * build (`package.json` and `Dockerfile`) preserves hot-reload without
+ * walking into symlinked or generated trees. The `Dockerfile` is watched as
+ * an individual file for the same reason — editing build steps should
+ * trigger a rebuild, but the file sits next to the symlinked trees we avoid.
+ *
+ * Returning a plain record keeps this trivially unit-testable — see
+ * `__tests__/docker.test.ts`.
+ */
+export function collectWatchTargets(repoRoot: string): {
+  dirs: string[];
+  files: string[];
+} {
+  const packagesDir = join(repoRoot, "packages");
+  const packageRoots = existsSync(packagesDir)
+    ? readdirSync(packagesDir, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory())
+        .map((entry) => join(packagesDir, entry.name))
+    : [];
+  const serviceRoots = [
+    join(repoRoot, "assistant"),
+    join(repoRoot, "credential-executor"),
+    join(repoRoot, "gateway"),
+    ...packageRoots,
+  ];
+  const dirs: string[] = [];
+  const files: string[] = [];
+  for (const root of serviceRoots) {
+    const srcDir = join(root, "src");
+    if (existsSync(srcDir)) dirs.push(srcDir);
+    for (const name of ["package.json", "Dockerfile"]) {
+      const file = join(root, name);
+      if (existsSync(file)) files.push(file);
+    }
+  }
+  return { dirs, files };
+}
 /**
  * Determine which services are affected by a changed file path relative
  * to the repository root.
@@ -821,9 +872,10 @@ function affectedServices(
 }
 /**
- * Watch for file changes in the assistant, gateway, credential-executor,
- * and packages directories. When changes are detected, rebuild the affected
- * images and restart their containers.
+ * Watch for source changes across the assistant, gateway, credential-executor,
+ * and packages services — scoped to each service's `src/` tree, `package.json`,
+ * and `Dockerfile` (see `collectWatchTargets`). When changes are detected,
+ * rebuild the affected images and restart their containers.
  */
 function startFileWatcher(opts: {
   signingKey?: string;
@@ -837,12 +889,7 @@ function startFileWatcher(opts: {
 }): () => void {
   const { gatewayPort, imageTags, instanceName, repoRoot, res } = opts;
-  const watchDirs = [
-    join(repoRoot, "assistant"),
-    join(repoRoot, "credential-executor"),
-    join(repoRoot, "gateway"),
-    join(repoRoot, "packages"),
-  ];
+  const { dirs: watchDirs, files: watchFiles } = collectWatchTargets(repoRoot);
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let pendingServices = new Set<ServiceName>();
@@ -919,37 +966,53 @@ function startFileWatcher(opts: {
   const watchers: ReturnType<typeof fsWatch>[] = [];
+  function onChange(fullPath: string): void {
+    const services = affectedServices(fullPath, repoRoot);
+    if (services.size === 0) return;
+    for (const s of services) {
+      pendingServices.add(s);
+    }
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      debounceTimer = null;
+      rebuildAndRestart();
+    }, 500);
+  }
   for (const dir of watchDirs) {
-    if (!existsSync(dir)) continue;
     const watcher = fsWatch(dir, { recursive: true }, (_event, filename) => {
       if (!filename) return;
-      if (
-        filename.includes("node_modules") ||
-        filename.includes(".env") ||
-        filename.startsWith(".")
-      ) {
+      if (filename.includes("node_modules") || filename.includes(".env")) {
         return;
       }
+      onChange(join(dir, filename));
+    });
+    // fs.watch surfaces transient errors (e.g. an unreadable entry) as an
+    // `error` event, which would otherwise crash the process. Log and keep
+    // the remaining watchers running.
+    watcher.on("error", (err) => {
+      console.error(
+        `⚠️  File watcher error for ${dir}: ${err instanceof Error ? err.message : err}`,
+      );
+    });
+    watchers.push(watcher);
+  }
-      const fullPath = join(dir, filename);
-      const services = affectedServices(fullPath, repoRoot);
-      if (services.size === 0) return;
-      for (const s of services) {
-        pendingServices.add(s);
-      }
-      if (debounceTimer) clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(() => {
-        debounceTimer = null;
-        rebuildAndRestart();
-      }, 500);
+  for (const file of watchFiles) {
+    const watcher = fsWatch(file, () => onChange(file));
+    watcher.on("error", (err) => {
+      console.error(
+        `⚠️  File watcher error for ${file}: ${err instanceof Error ? err.message : err}`,
+      );
     });
     watchers.push(watcher);
   }
   console.log("👀 Watching for file changes in:");
-  console.log("   assistant/, gateway/, credential-executor/, packages/");
+  console.log("   <service>/src, <service>/package.json, <service>/Dockerfile");
+  console.log("   for assistant/, gateway/, credential-executor/, packages/*");
   console.log("");
   return () => {