@glasshome/widget-cli 0.3.2 → 0.4.2

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@glasshome/widget-cli",
-  "version": "0.3.2",
+  "version": "0.4.2",
   "description": "CLI for creating and managing GlassHome widgets",
   "type": "module",
   "bin": {
     "glasshome-widget": "bin/cli.ts"
   },
   "scripts": {
-    "cli": "bun bin/cli.ts"
+    "cli": "bun bin/cli.ts",
+    "typecheck": "tsc --noEmit"
   },
   "files": [
     "bin",
@@ -16,7 +17,7 @@
   ],
   "dependencies": {
     "@clack/prompts": "^0.10.0",
-    "@glasshome/widget-sdk": "^0.1.0",
+    "@glasshome/widget-sdk": "0.2.3",
     "open": "^11.0.0",
     "semver": "^7.6.0"
   },

package/src/commands/add.ts

@@ -45,6 +45,7 @@ export function scaffoldWidget(
     description: widgetDescription,
     minSize: { w: 1, h: 1 },
     maxSize: { w: 4, h: 4 },
+    defaultSize: { w: 2, h: 2 },
     sdkVersion: "^0.2.0",
     version: "0.1.0",
   };

package/src/commands/connect.ts

@@ -3,6 +3,7 @@ import { resolve } from "node:path";
 import { log, spinner } from "@clack/prompts";
 import { buildWidgets } from "@glasshome/widget-sdk/vite";
 import { trpcMutate, trpcQuery } from "../utils/api";
+import { extractHost, getHostToken, storeHostToken } from "../utils/auth";
 
 interface RegistryWidget {
   tag: string;
@@ -25,6 +26,7 @@ async function uploadAndRegister(
   apiUrl: string,
   distDir: string,
   widget: RegistryWidget,
+  token: string,
 ): Promise<void> {
   const api = apiUrl.replace(/\/$/, "");
 
@@ -39,10 +41,13 @@ async function uploadAndRegister(
 
   const bundleContent = readFileSync(bundlePath, "utf-8");
 
-  // Upload bundle to API
-  const uploadRes = await fetch(`${api}/bundles/${widget.tag}`, {
+  // Upload bundle to API (local registry namespace)
+  const uploadRes = await fetch(`${api}/bundles/local/${widget.tag}`, {
     method: "POST",
-    headers: { "Content-Type": "application/javascript" },
+    headers: {
+      "Content-Type": "application/javascript",
+      Authorization: `Bearer ${token}`,
+    },
     body: bundleContent,
   });
 
@@ -57,11 +62,12 @@ async function uploadAndRegister(
   await trpcMutate({
     apiUrl: api,
     path: "widget.register",
+    token,
     input: {
       tag: widget.tag,
       name: widget.name,
       version: widget.version,
-      bundleUrl: `/bundles/${widget.tag}/bundle.js`,
+      bundleUrl: `/bundles/local/${widget.tag}/bundle.js`,
       manifestJson: JSON.stringify(manifest),
     },
   });
@@ -71,13 +77,13 @@ async function uploadAndRegister(
  * 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[]> {
+async function uploadAllWidgets(apiUrl: string, distDir: string, token: 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);
+    await uploadAndRegister(apiUrl, distDir, widget, token);
     tags.push(widget.tag);
   }
 
@@ -111,18 +117,146 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
     process.exit(1);
   }
 
-  // Step 3: Enable dev mode if needed
+  // Step 3: Obtain bearer token via device authorization flow
+  const api = apiUrl.replace(/\/$/, "");
+  const host = extractHost(api);
+  let token = "";
+
+  const existingToken = getHostToken(host);
+  if (existingToken) {
+    token = existingToken;
+    log.info("Using stored credentials for dashboard.");
+  } else {
+    // Request a device code
+    s.start("Requesting authorization code...");
+    let deviceCode: string;
+    let userCode: string;
+    let verificationUriComplete: string;
+    let expiresIn: number;
+    let interval: number;
+
+    try {
+      const res = await fetch(`${api}/api/auth/device/code`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ client_id: "glasshome-widget-cli" }),
+      });
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const data = (await res.json()) as {
+        device_code: string;
+        user_code: string;
+        verification_uri_complete: string;
+        expires_in: number;
+        interval: number;
+      };
+      deviceCode = data.device_code;
+      userCode = data.user_code;
+      // Build verification URL from the dashboard URL the user provided,
+      // not the API response (which uses the API server's origin)
+      verificationUriComplete = `${api}/device?user_code=${data.user_code}`;
+      expiresIn = data.expires_in;
+      interval = data.interval ?? 5;
+    } catch (err) {
+      s.stop("Failed to request device code");
+      log.error(
+        `Could not reach dashboard at ${api}: ${err instanceof Error ? err.message : String(err)}`,
+      );
+      process.exit(1);
+    }
+    s.stop("Authorization code ready");
+
+    // Prompt user to visit the verification URL
+    log.info(`Open in browser: ${verificationUriComplete}`);
+    log.info(`Device code: ${userCode}`);
+
+    // Try to open browser automatically
+    await import("open")
+      .then((m) => m.default(verificationUriComplete))
+      .catch(() => {});
+
+    // Poll for approval
+    s.start("Waiting for authorization (approve in your browser)...");
+    const deadline = Date.now() + expiresIn * 1000;
+    let approved = false;
+
+    while (Date.now() < deadline) {
+      await new Promise((r) => setTimeout(r, interval * 1000));
+
+      try {
+        const res = await fetch(`${api}/api/auth/device/token`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+            device_code: deviceCode,
+            client_id: "glasshome-widget-cli",
+          }),
+        });
+
+        if (res.ok) {
+          const data = (await res.json()) as {
+            access_token: string;
+            expires_in: number;
+          };
+          token = data.access_token;
+          const tokenExpiresAt = Date.now() + data.expires_in * 1000;
+          storeHostToken(host, token, tokenExpiresAt);
+          approved = true;
+          break;
+        }
+
+        const errData = (await res.json()) as { error?: string };
+        if (errData.error === "authorization_pending" || errData.error === "slow_down") {
+          // Continue polling
+          if (errData.error === "slow_down") {
+            interval = Math.min(interval + 5, 30);
+          }
+          continue;
+        }
+        if (errData.error === "access_denied") {
+          s.stop("Authorization denied");
+          log.error("You denied access. Run `bun widget connect` again to retry.");
+          process.exit(1);
+        }
+        if (errData.error === "expired_token") {
+          s.stop("Device code expired");
+          log.error("The device code expired before you approved. Run `bun widget connect` again.");
+          process.exit(1);
+        }
+        // Unexpected error
+        throw new Error(errData.error ?? `HTTP ${res.status}`);
+      } catch (err) {
+        s.stop("Authorization failed");
+        log.error(
+          `Error polling for token: ${err instanceof Error ? err.message : String(err)}`,
+        );
+        process.exit(1);
+      }
+    }
+
+    if (!approved) {
+      s.stop("Timed out");
+      log.error("Authorization timed out. Run `bun widget connect` again.");
+      process.exit(1);
+    }
+    s.stop("Authorized");
+  }
+
+  // Step 4: Enable dev mode if needed
   s.start("Registering widgets with dashboard...");
   try {
     const configData = await trpcQuery<{ devMode: boolean }>({
-      apiUrl: apiUrl.replace(/\/$/, ""),
+      apiUrl: api,
       path: "appConfig.get",
     });
 
     if (!configData.devMode) {
       await trpcMutate({
-        apiUrl: apiUrl.replace(/\/$/, ""),
+        apiUrl: api,
         path: "appConfig.toggleDevMode",
+        token,
         input: {},
       });
     }
@@ -130,11 +264,11 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
     // Non-fatal — dev mode may already be enabled
   }
 
-  // Step 4: Upload bundles and register widgets
-  const registeredTags = await uploadAllWidgets(apiUrl, distDir);
+  // Step 5: Upload bundles and register widgets
+  const registeredTags = await uploadAllWidgets(apiUrl, distDir, token);
   s.stop("Widgets registered");
 
-  // Step 5: Watch src/ for changes and rebuild + re-upload only the changed widget
+  // Step 6: 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) => {
@@ -153,7 +287,7 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
       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);
+        await uploadAndRegister(apiUrl, distDir, widget, token);
         log.info(`Rebuilt & uploaded ${widget.tag}`);
       } else {
         log.warn(`No registry entry for ${widgetName} — skipping upload`);
@@ -179,7 +313,7 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
   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
+  // Step 7: Handle SIGINT — unregister and clean up
   const cleanup = async () => {
     log.info("\nDisconnecting...");
     watcher.close();
@@ -187,8 +321,9 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
     for (const tag of registeredTags) {
       try {
         await trpcMutate({
-          apiUrl: apiUrl.replace(/\/$/, ""),
+          apiUrl: api,
           path: "widget.unregister",
+          token,
           input: { tag },
         });
       } catch {

package/src/commands/info.ts

@@ -42,10 +42,12 @@ export async function runInfo(cwd: string, widgetName?: string): Promise<void> {
 
     try {
       const manifest = readManifest(cwd, name);
-      log.info(`  Tag:         ${manifest.tag}`);
       log.info(`  Name:        ${manifest.name}`);
       log.info(`  Min Size:    ${manifest.minSize.w}×${manifest.minSize.h}`);
       log.info(`  Max Size:    ${manifest.maxSize.w}×${manifest.maxSize.h}`);
+      if (manifest.defaultSize) {
+        log.info(`  Default:     ${manifest.defaultSize.w}×${manifest.defaultSize.h}`);
+      }
       log.info(`  SDK Version: ${manifest.sdkVersion}`);
       if (manifest.version) {
         log.info(`  Version:     ${manifest.version}`);

package/src/commands/publish.ts

@@ -85,7 +85,7 @@ export async function runPublish(cwd: string, hubUrlOverride?: string): Promise<
     } catch {}
     return {
       value: name,
-      label: `${manifest.tag}${sizeInfo}`,
+      label: `${manifest.name}${sizeInfo}`,
     };
   });
 
@@ -106,7 +106,7 @@ export async function runPublish(cwd: string, hubUrlOverride?: string): Promise<
   const currentVersion = manifest.version ?? "0.0.0";
 
   const bump = await select({
-    message: `${manifest.tag} version: ${currentVersion}. Bump?`,
+    message: `${manifest.name} version: ${currentVersion}. Bump?`,
     options: [
       { value: "keep", label: `Keep ${currentVersion}`, hint: "fails if already published" },
       { value: "patch", label: `Patch (${semver.inc(currentVersion, "patch")})` },
@@ -152,7 +152,7 @@ export async function runPublish(cwd: string, hubUrlOverride?: string): Promise<
 
   const sha256Hash = createHash("sha256").update(bundleBuffer).digest("hex");
 
-  s.start(`Publishing ${manifest.tag}@${version}...`);
+  s.start(`Publishing ${manifest.name}@${version}...`);
 
   let publishData: Awaited<ReturnType<typeof requestPublish>>;
   try {
@@ -172,14 +172,14 @@ export async function runPublish(cwd: string, hubUrlOverride?: string): Promise<
     });
   } catch (err: any) {
     if (err.status === 409) {
-      s.stop(`${manifest.tag}@${version} already published — bump version to republish`);
+      s.stop(`${manifest.name}@${version} already published — bump version to republish`);
       process.exit(0);
     }
     s.stop(`Publish failed: ${err.message}`);
     process.exit(1);
   }
 
-  s.message(`Uploading ${manifest.tag} to CDN...`);
+  s.message(`Uploading ${manifest.name} to CDN...`);
   try {
     await uploadToR2(publishData.uploadUrl, bundleBuffer);
   } catch (err: any) {
@@ -187,10 +187,10 @@ export async function runPublish(cwd: string, hubUrlOverride?: string): Promise<
     process.exit(1);
   }
 
-  s.message(`Confirming ${manifest.tag}...`);
+  s.message(`Confirming ${manifest.name}...`);
   try {
     const result = await confirmPublish(hubUrl, token!, publishData.versionId);
-    s.stop(`Published ${manifest.tag}@${version}`);
+    s.stop(`Published ${manifest.name}@${version}`);
     log.info(`CDN: ${result.bundleUrl}`);
   } catch (err: any) {
     s.stop(`Confirmation failed: ${err.message}`);

package/src/commands/validate.ts

@@ -10,8 +10,6 @@ import {
   type WidgetManifest,
 } from "../utils/manifest";
 
-const TAG_REGEX = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
-
 interface ValidationResult {
   passed: boolean;
   errors: string[];
@@ -21,33 +19,46 @@ interface ValidationResult {
 function validateManifest(manifest: WidgetManifest): ValidationResult {
   const errors: string[] = [];
   const warnings: string[] = [];
+  const hasValidMinSize =
+    !!manifest.minSize &&
+    typeof manifest.minSize.w === "number" &&
+    typeof manifest.minSize.h === "number";
+  const hasValidMaxSize =
+    !!manifest.maxSize &&
+    typeof manifest.maxSize.w === "number" &&
+    typeof manifest.maxSize.h === "number";
 
   // Required fields
-  if (!manifest.tag) errors.push("Missing required field: tag");
   if (!manifest.name) errors.push("Missing required field: name");
   if (!manifest.sdkVersion) errors.push("Missing required field: sdkVersion");
 
   // Size validation
-  if (
-    !manifest.minSize ||
-    typeof manifest.minSize.w !== "number" ||
-    typeof manifest.minSize.h !== "number"
-  ) {
+  if (!hasValidMinSize) {
     errors.push("minSize must be an object with numeric w and h properties");
   }
+  if (!hasValidMaxSize) {
+    errors.push("maxSize must be an object with numeric w and h properties");
+  }
   if (
-    !manifest.maxSize ||
-    typeof manifest.maxSize.w !== "number" ||
-    typeof manifest.maxSize.h !== "number"
+    manifest.defaultSize &&
+    (typeof manifest.defaultSize.w !== "number" || typeof manifest.defaultSize.h !== "number")
   ) {
-    errors.push("maxSize must be an object with numeric w and h properties");
+    errors.push("defaultSize must be an object with numeric w and h properties");
   }
-
-  // Tag format (stricter than schema — enforces kebab-case with at least one hyphen)
-  if (manifest.tag && !TAG_REGEX.test(manifest.tag)) {
-    errors.push(
-      `Invalid tag format "${manifest.tag}" — must match ${TAG_REGEX} (e.g. glasshome-my-widget)`,
-    );
+  if (hasValidMinSize && hasValidMaxSize) {
+    if (manifest.minSize.w > manifest.maxSize.w || manifest.minSize.h > manifest.maxSize.h) {
+      errors.push("minSize must be less than or equal to maxSize");
+    }
+    if (manifest.defaultSize) {
+      if (
+        manifest.defaultSize.w < manifest.minSize.w ||
+        manifest.defaultSize.h < manifest.minSize.h ||
+        manifest.defaultSize.w > manifest.maxSize.w ||
+        manifest.defaultSize.h > manifest.maxSize.h
+      ) {
+        errors.push("defaultSize must be within minSize and maxSize bounds");
+      }
+    }
   }
 
   // Schema validation

package/src/utils/api.ts

@@ -7,6 +7,7 @@ interface TrpcMutationOptions {
   apiUrl: string;
   path: string;
   input: Record<string, unknown>;
+  token?: string;
 }
 
 interface TrpcResult<T = unknown> {
@@ -15,9 +16,11 @@ interface TrpcResult<T = unknown> {
 
 export async function trpcMutate<T = unknown>(opts: TrpcMutationOptions): Promise<T> {
   const url = `${opts.apiUrl.replace(/\/$/, "")}/trpc/${opts.path}`;
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (opts.token) headers.Authorization = `Bearer ${opts.token}`;
   const res = await fetch(url, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers,
     body: JSON.stringify(opts.input),
   });
 
@@ -34,15 +37,18 @@ interface TrpcQueryOptions {
   apiUrl: string;
   path: string;
   input?: Record<string, unknown>;
+  token?: string;
 }
 
 export async function trpcQuery<T = unknown>(opts: TrpcQueryOptions): Promise<T> {
   const base = `${opts.apiUrl.replace(/\/$/, "")}/trpc/${opts.path}`;
   const url = opts.input ? `${base}?input=${encodeURIComponent(JSON.stringify(opts.input))}` : base;
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (opts.token) headers.Authorization = `Bearer ${opts.token}`;
 
   const res = await fetch(url, {
     method: "GET",
-    headers: { "Content-Type": "application/json" },
+    headers,
   });
 
   if (!res.ok) {

package/src/utils/auth.ts

@@ -1,8 +1,8 @@
-import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
 
-interface StoredAuth {
+interface HubAuth {
   accessToken: string;
   refreshToken: string;
   expiresAt: number;
@@ -10,6 +10,19 @@ interface StoredAuth {
   scope: string;
 }
 
+interface HostAuth {
+  token: string;
+  expiresAt: number;
+}
+
+interface StoredAuthFile {
+  hub?: HubAuth;
+  hosts: Record<string, HostAuth>;
+}
+
+// Legacy shape written by older CLI versions (hub auth only, no hosts key)
+type LegacyStoredAuth = HubAuth;
+
 const AUTH_DIR = join(homedir(), ".glasshome");
 const AUTH_FILE = join(AUTH_DIR, "auth.json");
 
@@ -19,31 +32,78 @@ function ensureDir(): void {
   }
 }
 
-export function storeToken(data: StoredAuth): void {
+function readAuthFile(): StoredAuthFile {
+  if (!existsSync(AUTH_FILE)) return { hosts: {} };
+  try {
+    const raw = JSON.parse(readFileSync(AUTH_FILE, "utf-8")) as
+      | StoredAuthFile
+      | LegacyStoredAuth;
+    // Migrate legacy format (hub-only, no hosts key)
+    if ("accessToken" in raw) {
+      return { hub: raw as HubAuth, hosts: {} };
+    }
+    const typed = raw as StoredAuthFile;
+    return { hub: typed.hub, hosts: typed.hosts ?? {} };
+  } catch {
+    return { hosts: {} };
+  }
+}
+
+function writeAuthFile(data: StoredAuthFile): void {
   ensureDir();
   writeFileSync(AUTH_FILE, JSON.stringify(data, null, 2), { mode: 0o600 });
 }
 
-export function getStoredAuth(): StoredAuth | null {
-  if (!existsSync(AUTH_FILE)) return null;
-  try {
-    return JSON.parse(readFileSync(AUTH_FILE, "utf-8"));
-  } catch {
-    return null;
-  }
+// --- Host-keyed token storage (for device auth / widget connect) ---
+
+export function storeHostToken(host: string, token: string, expiresAt: number): void {
+  const data = readAuthFile();
+  data.hosts[host] = { token, expiresAt };
+  writeAuthFile(data);
+}
+
+export function getHostToken(host: string): string | null {
+  const data = readAuthFile();
+  const entry = data.hosts[host];
+  if (!entry) return null;
+  // Return null if expired (60s buffer)
+  if (Date.now() >= entry.expiresAt - 60_000) return null;
+  return entry.token;
+}
+
+export function clearHostToken(host: string): void {
+  const data = readAuthFile();
+  delete data.hosts[host];
+  writeAuthFile(data);
+}
+
+// --- Hub auth storage (for widget publishing) ---
+
+export function storeToken(hubData: HubAuth): void {
+  const data = readAuthFile();
+  data.hub = hubData;
+  writeAuthFile(data);
+}
+
+export function getStoredAuth(): HubAuth | null {
+  return readAuthFile().hub ?? null;
 }
 
 export async function getToken(hubUrl: string): Promise<string | null> {
+  // Check host-keyed token first (for connect flow)
+  const host = extractHost(hubUrl);
+  const hostToken = getHostToken(host);
+  if (hostToken) return hostToken;
+
+  // Fall back to hub auth (for publishing)
   const stored = getStoredAuth();
   if (!stored) return null;
   if (stored.hubUrl !== hubUrl) return null;
 
-  // Check if token is still valid (with 60s buffer)
   if (Date.now() < stored.expiresAt - 60_000) {
     return stored.accessToken;
   }
 
-  // Try to refresh
   if (!stored.refreshToken) return null;
 
   try {
@@ -60,39 +120,39 @@ export async function getToken(hubUrl: string): Promise<string | null> {
 
     if (!res.ok) return null;
 
-    const data = (await res.json()) as {
+    const tokenData = (await res.json()) as {
       access_token: string;
       refresh_token?: string;
       expires_in: number;
     };
 
     storeToken({
-      accessToken: data.access_token,
-      refreshToken: data.refresh_token ?? stored.refreshToken,
-      expiresAt: Date.now() + data.expires_in * 1000,
+      accessToken: tokenData.access_token,
+      refreshToken: tokenData.refresh_token ?? stored.refreshToken,
+      expiresAt: Date.now() + tokenData.expires_in * 1000,
       hubUrl: stored.hubUrl,
       scope: stored.scope,
     });
 
-    return data.access_token;
+    return tokenData.access_token;
   } catch {
     return null;
   }
 }
 
 export function clearToken(): void {
-  if (existsSync(AUTH_FILE)) {
-    unlinkSync(AUTH_FILE);
-  }
+  const data = readAuthFile();
+  delete data.hub;
+  writeAuthFile(data);
 }
 
 export function getHubUrl(): string {
-  const stored = getStoredAuth()?.hubUrl;
+  const stored = getStoredAuth();
   if (stored) {
-    if (stored.includes("localhost") || stored.includes("127.0.0.1")) {
+    if (stored.hubUrl.includes("localhost") || stored.hubUrl.includes("127.0.0.1")) {
       clearToken();
     } else {
-      return stored;
+      return stored.hubUrl;
     }
   }
   return "https://glasshome.app";
@@ -101,3 +161,14 @@ export function getHubUrl(): string {
 export function getScope(): string | null {
   return getStoredAuth()?.scope ?? null;
 }
+
+// --- Helpers ---
+
+export function extractHost(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    // Bare host:port or path-less string
+    return url.replace(/^https?:\/\//, "").split("/")[0] ?? url;
+  }
+}

package/template/src/index.tsx.template

@@ -31,6 +31,7 @@ export default defineWidget<WidgetConfig>({
     name: "WIDGET_NAME",
     minSize: { w: 1, h: 1 },
     maxSize: { w: 4, h: 4 },
+    defaultSize: { w: 2, h: 2 },
     sdkVersion: "^0.2.0",
     schema: {
       type: "object",