@glasshome/widget-cli 0.1.0

package/src/commands/connect.ts

@@ -0,0 +1,208 @@
+import { existsSync, readdirSync, readFileSync, statSync, watch } from "node:fs";
+import { resolve } from "node:path";
+import { log, spinner } from "@clack/prompts";
+import { buildWidgets } from "@glasshome/widget-sdk/vite";
+import { trpcMutate, trpcQuery } from "../utils/api";
+
+interface RegistryWidget {
+  tag: string;
+  name: string;
+  version: string;
+  bundleUrl: string;
+  sdkVersion: string;
+  [key: string]: unknown;
+}
+
+interface RegistryJson {
+  version: number;
+  widgets: RegistryWidget[];
+}
+
+/**
+ * Upload a single widget bundle to the API and register it.
+ */
+async function uploadAndRegister(
+  apiUrl: string,
+  distDir: string,
+  widget: RegistryWidget,
+): Promise<void> {
+  const api = apiUrl.replace(/\/$/, "");
+
+  // Read the bundle file from dist/ (bundleUrl is relative like "./area.js")
+  const bundleFilename = widget.bundleUrl.replace(/^\.\//, "");
+  const bundlePath = resolve(distDir, bundleFilename);
+
+  if (!existsSync(bundlePath)) {
+    log.warn(`Bundle not found: ${bundlePath} — skipping ${widget.tag}`);
+    return;
+  }
+
+  const bundleContent = readFileSync(bundlePath, "utf-8");
+
+  // Upload bundle to API
+  const uploadRes = await fetch(`${api}/bundles/${widget.tag}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/javascript" },
+    body: bundleContent,
+  });
+
+  if (!uploadRes.ok) {
+    throw new Error(`Failed to upload bundle for ${widget.tag}: HTTP ${uploadRes.status}`);
+  }
+
+  // Register the widget with a local bundle path (skips redundant download)
+  const manifest = { ...widget };
+  delete (manifest as Record<string, unknown>).bundleUrl;
+
+  await trpcMutate({
+    apiUrl: api,
+    path: "widget.register",
+    input: {
+      tag: widget.tag,
+      name: widget.name,
+      version: widget.version,
+      bundleUrl: `/bundles/${widget.tag}/bundle.js`,
+      manifestJson: JSON.stringify(manifest),
+    },
+  });
+}
+
+/**
+ * Read registry.json and upload all widget bundles.
+ * @returns Array of widget tags that were registered
+ */
+async function uploadAllWidgets(apiUrl: string, distDir: string): Promise<string[]> {
+  const registryPath = resolve(distDir, "registry.json");
+  const registry: RegistryJson = JSON.parse(readFileSync(registryPath, "utf-8"));
+  const tags: string[] = [];
+
+  for (const widget of registry.widgets) {
+    await uploadAndRegister(apiUrl, distDir, widget);
+    tags.push(widget.tag);
+  }
+
+  return tags;
+}
+
+export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
+  const distDir = resolve(cwd, "dist");
+  const solid = (await import("vite-plugin-solid")).default;
+  const buildOpts = { srcDir: "src", outDir: "dist", plugins: [solid()] };
+
+  // Step 1: Initial build
+  const s = spinner();
+  s.start("Building widgets...");
+  try {
+    const origCwd = process.cwd();
+    process.chdir(cwd);
+    await buildWidgets(buildOpts);
+    process.chdir(origCwd);
+  } catch (err) {
+    s.stop("Build failed");
+    log.error(err instanceof Error ? err.message : String(err));
+    process.exit(1);
+  }
+  s.stop("Build complete");
+
+  // Step 2: Check registry was generated
+  const registryPath = resolve(distDir, "registry.json");
+  if (!existsSync(registryPath)) {
+    log.error("dist/registry.json not found after build. Check your vite.config.ts.");
+    process.exit(1);
+  }
+
+  // Step 3: Enable dev mode if needed
+  s.start("Registering widgets with dashboard...");
+  try {
+    const configData = await trpcQuery<{ devMode: boolean }>({
+      apiUrl: apiUrl.replace(/\/$/, ""),
+      path: "appConfig.get",
+    });
+
+    if (!configData.devMode) {
+      await trpcMutate({
+        apiUrl: apiUrl.replace(/\/$/, ""),
+        path: "appConfig.toggleDevMode",
+        input: {},
+      });
+    }
+  } catch {
+    // Non-fatal — dev mode may already be enabled
+  }
+
+  // Step 4: Upload bundles and register widgets
+  const registeredTags = await uploadAllWidgets(apiUrl, distDir);
+  s.stop("Widgets registered");
+
+  // Step 5: Watch src/ for changes and rebuild + re-upload only the changed widget
+  const srcDir = resolve(cwd, "src");
+  let rebuilding = false;
+  const watcher = watch(srcDir, { recursive: true }, async (_event, filename) => {
+    if (rebuilding || !filename) return;
+    rebuilding = true;
+    try {
+      // Determine which widget changed from the file path (first path segment under src/)
+      const widgetName = filename.split(/[\\/]/)[0] ?? filename;
+      const origCwd = process.cwd();
+      process.chdir(cwd);
+      await buildWidgets({ ...buildOpts, only: [widgetName] });
+      process.chdir(origCwd);
+
+      // Upload only the changed widget
+      const registryPath = resolve(distDir, "registry.json");
+      const registry: RegistryJson = JSON.parse(readFileSync(registryPath, "utf-8"));
+      const widget = registry.widgets.find((w) => w.bundleUrl === `./${widgetName}.js`);
+      if (widget) {
+        await uploadAndRegister(apiUrl, distDir, widget);
+        log.info(`Rebuilt & uploaded ${widget.tag}`);
+      } else {
+        log.warn(`No registry entry for ${widgetName} — skipping upload`);
+      }
+    } catch (err) {
+      log.warn(`Rebuild failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      rebuilding = false;
+    }
+  });
+
+  // Count widgets
+  const widgetCount = existsSync(resolve(cwd, "src"))
+    ? readdirSync(resolve(cwd, "src")).filter(
+        (d) =>
+          statSync(resolve(cwd, "src", d)).isDirectory() &&
+          existsSync(resolve(cwd, "src", d, "manifest.json")),
+      ).length
+    : 0;
+
+  log.success(`Connected! ${widgetCount} widget(s) are live.`);
+  log.info("Bundles uploaded to API. Widgets registered with local paths.");
+  log.info("File changes auto-rebuild and re-upload. Add widgets with `bun widget add`.");
+  log.info("Press Ctrl+C to disconnect.");
+
+  // Step 6: Handle SIGINT — unregister and clean up
+  const cleanup = async () => {
+    log.info("\nDisconnecting...");
+    watcher.close();
+
+    for (const tag of registeredTags) {
+      try {
+        await trpcMutate({
+          apiUrl: apiUrl.replace(/\/$/, ""),
+          path: "widget.unregister",
+          input: { tag },
+        });
+      } catch {
+        // Non-fatal — API may be down
+      }
+    }
+    log.info("Widgets unregistered");
+
+    process.exit(0);
+  };
+
+  process.on("SIGINT", cleanup);
+  process.on("SIGTERM", cleanup);
+
+  // Keep alive
+  await new Promise(() => {});
+}

package/src/commands/dev-registry.ts

@@ -0,0 +1,86 @@
+import { log, outro, spinner } from "@clack/prompts";
+import { trpcMutate, trpcQuery } from "../utils/api";
+
+interface DevStatusResponse {
+  devMode: boolean;
+  registries: Array<{ url: string; name: string; isDefault: boolean }>;
+}
+
+export async function runAddDevRegistry(options: {
+  registryUrl?: string;
+  apiUrl?: string;
+}): Promise<void> {
+  const registryUrl = options.registryUrl || "http://localhost:5173/__widgets/registry.json";
+  const apiUrl = options.apiUrl || "http://localhost:3333";
+
+  const s = spinner();
+
+  // Step 1: Check if dev mode is enabled
+  s.start("Checking dev mode status...");
+  let devEnabled = false;
+  try {
+    const status = await trpcQuery<DevStatusResponse>({
+      apiUrl,
+      path: "appConfig.get",
+    });
+    devEnabled = status.devMode;
+  } catch (err) {
+    s.stop("Failed to connect");
+    log.error(
+      `Could not reach dashboard API at ${apiUrl}: ${err instanceof Error ? err.message : String(err)}`,
+    );
+    log.info("Make sure the dashboard API server is running and the URL is correct.");
+    process.exit(1);
+  }
+
+  // Step 2: Enable dev mode if needed
+  if (!devEnabled) {
+    s.message("Enabling dev mode...");
+    try {
+      const result = await trpcMutate<{ devMode: boolean }>({
+        apiUrl,
+        path: "appConfig.toggleDevMode",
+        input: {},
+      });
+      if (!result.devMode) {
+        s.stop("Failed");
+        log.error("Could not enable dev mode");
+        process.exit(1);
+      }
+    } catch (err) {
+      s.stop("Failed");
+      log.error(`Failed to enable dev mode: ${err instanceof Error ? err.message : String(err)}`);
+      process.exit(1);
+    }
+  }
+  s.stop("Dev mode enabled");
+
+  // Step 3: Add the registry via /dev/registries endpoint
+  s.start("Adding dev registry...");
+  try {
+    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/dev/registries`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url: registryUrl, name: "Local Dev Server" }),
+    });
+
+    if (res.status === 409) {
+      s.stop("Registry already registered");
+      log.info(`Registry ${registryUrl} is already configured`);
+    } else if (res.ok) {
+      s.stop("Registry added");
+      log.success(`Added registry: ${registryUrl}`);
+    } else {
+      const err = (await res.json()) as { error: string };
+      s.stop("Failed");
+      log.error(`Failed to add registry: ${err.error}`);
+      process.exit(1);
+    }
+  } catch (err) {
+    s.stop("Failed");
+    log.error(`Failed to add registry: ${err instanceof Error ? err.message : String(err)}`);
+    process.exit(1);
+  }
+
+  outro("Done! Refresh your dashboard to see dev widgets.");
+}

package/src/commands/info.ts

@@ -0,0 +1,76 @@
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { log } from "@clack/prompts";
+import {
+  discoverWidgets,
+  formatBytes,
+  getWidgetBundleInfo,
+  readManifest,
+  readRegistry,
+} from "../utils/manifest";
+
+export async function runInfo(cwd: string, widgetName?: string): Promise<void> {
+  // Read package.json
+  const pkgPath = resolve(cwd, "package.json");
+  if (!existsSync(pkgPath)) {
+    log.error("No package.json found in current directory.");
+    process.exit(1);
+  }
+
+  const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+  log.info(`Project: ${pkg.name ?? "unknown"}`);
+  log.info(`Version: ${pkg.version ?? "0.0.0"}`);
+
+  const widgets = discoverWidgets(cwd);
+
+  if (widgets.length === 0) {
+    log.warn("No widgets found in src/. Run `bun widget add` to create one.");
+    return;
+  }
+
+  const toShow = widgetName ? widgets.filter((w) => w === widgetName) : widgets;
+
+  if (widgetName && toShow.length === 0) {
+    log.error(`Widget "${widgetName}" not found. Available: ${widgets.join(", ")}`);
+    process.exit(1);
+  }
+
+  log.info(`\nWidgets: ${widgets.length} total`);
+
+  for (const name of toShow) {
+    log.info(`\n--- ${name} ---`);
+
+    try {
+      const manifest = readManifest(cwd, name);
+      log.info(`  Tag:         ${manifest.tag}`);
+      log.info(`  Name:        ${manifest.name}`);
+      log.info(`  Type:        ${manifest.type}`);
+      log.info(`  Size:        ${manifest.size}`);
+      log.info(`  SDK Version: ${manifest.sdkVersion}`);
+      if (manifest.version) {
+        log.info(`  Version:     ${manifest.version}`);
+      }
+      if (manifest.description) {
+        log.info(`  Description: ${manifest.description}`);
+      }
+
+      // Bundle size (if built)
+      try {
+        const info = getWidgetBundleInfo(cwd, name);
+        log.info(`  Bundle:      ${formatBytes(info.raw)} (${formatBytes(info.gzip)} gzipped)`);
+      } catch {
+        log.info("  Bundle:      not built yet");
+      }
+    } catch (err) {
+      log.warn(`  Could not read manifest: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }
+
+  // Registry summary
+  const registry = readRegistry(cwd);
+  if (registry) {
+    log.info(
+      `\nRegistry: ${registry.widgets.length} widget(s) (generated ${registry.generatedAt})`,
+    );
+  }
+}

package/src/commands/login.ts

@@ -0,0 +1,163 @@
+import { createHash, randomBytes } from "node:crypto";
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import { log, spinner } from "@clack/prompts";
+import open from "open";
+import { getHubUrl, storeToken } from "../utils/auth";
+
+const CLIENT_ID = "glasshome-widget-cli";
+const CLIENT_SECRET = "glasshome-cli-public";
+const REDIRECT_PORT = 9274;
+const REDIRECT_URI = `http://localhost:${REDIRECT_PORT}/callback`;
+const LOGIN_TIMEOUT_MS = 120_000;
+
+function base64url(buf: Buffer): string {
+  return buf.toString("base64url");
+}
+
+export async function runLogin(hubUrl?: string): Promise<void> {
+  const hub = hubUrl ?? getHubUrl();
+
+  // Generate PKCE parameters
+  const codeVerifier = base64url(randomBytes(32));
+  const codeChallenge = base64url(createHash("sha256").update(codeVerifier).digest());
+  const state = randomBytes(16).toString("hex");
+
+  const s = spinner();
+
+  // Start local callback server
+  const { code, receivedState } = await new Promise<{
+    code: string;
+    receivedState: string;
+  }>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      server.close();
+      reject(new Error("Login timed out — no response from browser within 120 seconds."));
+    }, LOGIN_TIMEOUT_MS);
+
+    const server = createServer((req: IncomingMessage, res: ServerResponse) => {
+      const url = new URL(req.url!, `http://localhost:${REDIRECT_PORT}`);
+
+      if (url.pathname !== "/callback") {
+        res.writeHead(404);
+        res.end("Not found");
+        return;
+      }
+
+      const code = url.searchParams.get("code");
+      const receivedState = url.searchParams.get("state");
+      const error = url.searchParams.get("error");
+
+      if (error) {
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end("<html><head><script>window.close()</script></head><body></body></html>");
+        clearTimeout(timeout);
+        server.close();
+        reject(new Error(`OAuth error: ${error}`));
+        return;
+      }
+
+      if (!code || !receivedState) {
+        res.writeHead(400);
+        res.end("Missing code or state");
+        return;
+      }
+
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end("<html><head><script>window.close()</script></head><body></body></html>");
+
+      clearTimeout(timeout);
+      server.close();
+      resolve({ code, receivedState });
+    });
+
+    server.listen(REDIRECT_PORT, () => {
+      const authUrl = new URL(`${hub}/api/auth/oauth2/authorize`);
+      authUrl.searchParams.set("client_id", CLIENT_ID);
+      authUrl.searchParams.set("redirect_uri", REDIRECT_URI);
+      authUrl.searchParams.set("response_type", "code");
+      authUrl.searchParams.set("code_challenge", codeChallenge);
+      authUrl.searchParams.set("code_challenge_method", "S256");
+      authUrl.searchParams.set("state", state);
+      authUrl.searchParams.set("scope", "openid profile email");
+
+      log.info(`Opening browser for login at ${hub}`);
+      s.start("Waiting for browser login...");
+      open(authUrl.toString()).catch(() => {
+        log.warn(`Could not open browser. Visit this URL manually:\n  ${authUrl.toString()}`);
+      });
+    });
+  });
+
+  s.stop("Login complete");
+
+  // Verify state
+  if (receivedState !== state) {
+    s.stop("Login failed");
+    log.error("State mismatch. Possible CSRF attack.");
+    process.exit(1);
+  }
+
+  // Exchange code for tokens
+  s.message("Exchanging code for tokens...");
+
+  const tokenRes = await fetch(`${hub}/api/auth/oauth2/token`, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code,
+      redirect_uri: REDIRECT_URI,
+      code_verifier: codeVerifier,
+      client_id: CLIENT_ID,
+      client_secret: CLIENT_SECRET,
+    }),
+  });
+
+  if (!tokenRes.ok) {
+    s.stop("Login failed");
+    const text = await tokenRes.text();
+    log.error(`Token exchange failed: ${text}`);
+    process.exit(1);
+  }
+
+  const tokenData = (await tokenRes.json()) as {
+    access_token: string;
+    refresh_token: string;
+    expires_in: number;
+  };
+
+  // Fetch user info for scope
+  s.message("Fetching user info...");
+
+  const userRes = await fetch(`${hub}/api/auth/oauth2/userinfo`, {
+    headers: { Authorization: `Bearer ${tokenData.access_token}` },
+  });
+
+  if (!userRes.ok) {
+    s.stop("Login failed");
+    log.error("Could not fetch user info.");
+    process.exit(1);
+  }
+
+  const userInfo = (await userRes.json()) as {
+    name?: string;
+    email?: string;
+    sub?: string;
+  };
+  const displayName = userInfo.name || userInfo.email || userInfo.sub || "unknown";
+  const scopeBase = userInfo.name || userInfo.email?.split("@")[0] || userInfo.sub || "unknown";
+  const scope = scopeBase.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+
+  // Store tokens
+  storeToken({
+    accessToken: tokenData.access_token,
+    refreshToken: tokenData.refresh_token,
+    expiresAt: Date.now() + tokenData.expires_in * 1000,
+    hubUrl: hub,
+    scope,
+  });
+
+  s.stop("Logged in successfully");
+  log.success(`Authenticated as ${displayName} (scope: ${scope})`);
+  log.info(`Hub: ${hub}`);
+}