@glasshome/widget-cli 0.4.3 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-cli",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "CLI for creating and managing GlassHome widgets",
   "type": "module",
   "bin": {
@@ -16,7 +16,9 @@
     "template"
   ],
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@types/semver": "^7.0.0",
+    "vite-plugin-solid": "^2.11.0"
   },
   "dependencies": {
     "@clack/prompts": "^0.10.0",

package/src/commands/add.ts

@@ -15,11 +15,10 @@ export function scaffoldWidget(
   cwd: string,
   opts: {
     widgetName: string;
-    tag: string;
     description: string;
   },
 ): void {
-  const { widgetName, tag, description } = opts;
+  const { widgetName, description } = opts;
   const widgetDir = resolve(cwd, "src", widgetName);
 
   if (existsSync(widgetDir)) {
@@ -34,13 +33,11 @@ export function scaffoldWidget(
   // Read index.tsx template from the template directory
   const templateDir = resolve(import.meta.dir, "../../template");
   let srcContent = readFileSync(resolve(templateDir, "src/index.tsx.template"), "utf-8");
-  srcContent = srcContent.replace(/WIDGET_TAG/g, tag);
   srcContent = srcContent.replace(/WIDGET_NAME/g, displayName);
   writeFileSync(resolve(widgetDir, "index.tsx"), srcContent);
 
   // Generate manifest.json
   const manifest = {
-    tag,
     name: displayName,
     description: widgetDescription,
     minSize: { w: 1, h: 1 },
@@ -55,7 +52,6 @@ export function scaffoldWidget(
 /** Interactive prompts for widget details. Returns null if cancelled. */
 export async function promptWidgetDetails(defaults?: { widgetName?: string }): Promise<{
   widgetName: string;
-  tag: string;
   description: string;
 } | null> {
   const widgetName = await text({
@@ -75,23 +71,6 @@ export async function promptWidgetDetails(defaults?: { widgetName?: string }): P
     return null;
   }
 
-  const tag = await text({
-    message: "Custom element tag",
-    placeholder: `glasshome-${widgetName}`,
-    defaultValue: `glasshome-${widgetName}`,
-    validate(value) {
-      if (!value) return "Tag is required";
-      if (!/^[a-z]/.test(value)) return "Tag must start with a lowercase letter";
-      if (!value.includes("-")) return "Custom element tags must contain a hyphen";
-      if (!/^[a-z][a-z0-9]*(-[a-z0-9]+)+$/.test(value))
-        return "Tag must be lowercase alphanumeric with hyphens (e.g. glasshome-my-widget)";
-    },
-  });
-  if (isCancel(tag)) {
-    cancel("Operation cancelled.");
-    return null;
-  }
-
   const description = await text({
     message: "Description (optional)",
     placeholder: "A GlassHome dashboard widget",
@@ -104,7 +83,6 @@ export async function promptWidgetDetails(defaults?: { widgetName?: string }): P
 
   return {
     widgetName: widgetName as string,
-    tag: tag as string,
     description: description as string,
   };
 }

package/src/commands/connect.ts

@@ -6,7 +6,6 @@ import { trpcMutate, trpcQuery } from "../utils/api";
 import { extractHost, getHostToken, storeHostToken } from "../utils/auth";
 
 interface RegistryWidget {
-  tag: string;
   name: string;
   version: string;
   bundleUrl: string;
@@ -29,20 +28,18 @@ async function uploadAndRegister(
   token: string,
 ): Promise<void> {
   const api = apiUrl.replace(/\/$/, "");
+  // Derive slug from bundleUrl (e.g. "./area.js" → "area")
+  const slug = widget.bundleUrl.replace(/^\.\//, "").replace(/\.js$/, "");
 
-  // Read the bundle file from dist/ (bundleUrl is relative like "./area.js")
-  const bundleFilename = widget.bundleUrl.replace(/^\.\//, "");
-  const bundlePath = resolve(distDir, bundleFilename);
-
+  const bundlePath = resolve(distDir, `${slug}.js`);
   if (!existsSync(bundlePath)) {
-    log.warn(`Bundle not found: ${bundlePath} — skipping ${widget.tag}`);
+    log.warn(`Bundle not found: ${bundlePath} — skipping ${slug}`);
     return;
   }
 
   const bundleContent = readFileSync(bundlePath, "utf-8");
 
-  // Upload bundle to API (local registry namespace)
-  const uploadRes = await fetch(`${api}/bundles/local/${widget.tag}`, {
+  const uploadRes = await fetch(`${api}/bundles/local/local/${slug}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/javascript",
@@ -52,10 +49,9 @@ async function uploadAndRegister(
   });
 
   if (!uploadRes.ok) {
-    throw new Error(`Failed to upload bundle for ${widget.tag}: HTTP ${uploadRes.status}`);
+    throw new Error(`Failed to upload bundle for ${slug}: HTTP ${uploadRes.status}`);
   }
 
-  // Register the widget with a local bundle path (skips redundant download)
   const manifest = { ...widget };
   delete (manifest as Record<string, unknown>).bundleUrl;
 
@@ -64,10 +60,10 @@ async function uploadAndRegister(
     path: "widget.register",
     token,
     input: {
-      tag: widget.tag,
-      name: widget.name,
+      scope: "local",
+      name: slug,
       version: widget.version,
-      bundleUrl: `/bundles/local/${widget.tag}/bundle.js`,
+      bundleUrl: `/bundles/local/local/${slug}/bundle.js`,
       manifestJson: JSON.stringify(manifest),
     },
   });
@@ -75,19 +71,20 @@ async function uploadAndRegister(
 
 /**
  * Read registry.json and upload all widget bundles.
- * @returns Array of widget tags that were registered
+ * @returns Array of widget slugs that were registered
  */
 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[] = [];
+  const slugs: string[] = [];
 
   for (const widget of registry.widgets) {
+    const slug = widget.bundleUrl.replace(/^\.\//, "").replace(/\.js$/, "");
     await uploadAndRegister(apiUrl, distDir, widget, token);
-    tags.push(widget.tag);
+    slugs.push(slug);
   }
 
-  return tags;
+  return slugs;
 }
 
 export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
@@ -122,11 +119,25 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
   const host = extractHost(api);
   let token = "";
 
+  // Validate stored token before using it
   const existingToken = getHostToken(host);
   if (existingToken) {
-    token = existingToken;
-    log.info("Using stored credentials for dashboard.");
-  } else {
+    try {
+      const check = await fetch(`${api}/api/auth/get-session`, {
+        headers: { Authorization: `Bearer ${existingToken}` },
+      });
+      if (check.ok) {
+        token = existingToken;
+        log.info("Using stored credentials for dashboard.");
+      } else {
+        log.warn("Stored credentials expired — re-authenticating.");
+      }
+    } catch {
+      log.warn("Could not validate stored credentials — re-authenticating.");
+    }
+  }
+
+  if (!token) {
     // Request a device code
     s.start("Requesting authorization code...");
     let deviceCode: string;
@@ -160,88 +171,89 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
       interval = data.interval ?? 5;
     } catch (err) {
       s.stop("Failed to request device code");
-      log.error(
+      log.warn(
         `Could not reach dashboard at ${api}: ${err instanceof Error ? err.message : String(err)}`,
       );
-      process.exit(1);
+      // token stays empty — caught by guard below
     }
-    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 (deviceCode!) {
+      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;
+
+      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);
+            break;
+          }
 
-        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;
+          const errData = (await res.json()) as { error?: string };
+          if (errData.error === "authorization_pending" || errData.error === "slow_down") {
+            if (errData.error === "slow_down") {
+              interval = Math.min(interval! + 5, 30);
+            }
+            continue;
+          }
+          if (errData.error === "access_denied") {
+            s.stop("Authorization denied");
+            break;
+          }
+          if (errData.error === "expired_token") {
+            s.stop("Device code expired");
+            break;
+          }
+          // Unexpected error — stop polling
+          s.stop(`Auth error: ${errData.error ?? res.status}`);
+          break;
+        } catch (err) {
+          s.stop("Authorization failed");
+          log.warn(`Error polling for token: ${err instanceof Error ? err.message : String(err)}`);
           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 (token) {
+        s.stop("Authorized");
+      } else {
+        s.stop("Not authorized");
       }
     }
+  }
 
-    if (!approved) {
-      s.stop("Timed out");
-      log.error("Authorization timed out. Run `bun widget connect` again.");
-      process.exit(1);
-    }
-    s.stop("Authorized");
+  if (!token) {
+    log.warn("Authentication failed — widgets won't be connected. Log in at the dashboard first, then restart.");
+    return;
   }
 
   // Step 4: Enable dev mode if needed
@@ -288,7 +300,7 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
       const widget = registry.widgets.find((w) => w.bundleUrl === `./${widgetName}.js`);
       if (widget) {
         await uploadAndRegister(apiUrl, distDir, widget, token);
-        log.info(`Rebuilt & uploaded ${widget.tag}`);
+        log.info(`Rebuilt & uploaded ${widgetName}`);
       } else {
         log.warn(`No registry entry for ${widgetName} — skipping upload`);
       }
@@ -318,13 +330,13 @@ export async function runConnect(apiUrl: string, cwd: string): Promise<void> {
     log.info("\nDisconnecting...");
     watcher.close();
 
-    for (const tag of registeredTags) {
+    for (const slug of registeredTags) {
       try {
         await trpcMutate({
           apiUrl: api,
           path: "widget.unregister",
           token,
-          input: { tag },
+          input: { scope: "local", name: slug },
         });
       } catch {
         // Non-fatal — API may be down

package/src/utils/hub-api.ts

@@ -107,11 +107,11 @@ export async function confirmPublish(
   return res.json() as Promise<PublishConfirmResponse>;
 }
 
-export async function uploadToR2(uploadUrl: string, bundleBuffer: Buffer): Promise<void> {
+export async function uploadToR2(uploadUrl: string, bundleBuffer: Uint8Array): Promise<void> {
   const res = await fetch(uploadUrl, {
     method: "PUT",
     headers: { "Content-Type": "application/javascript" },
-    body: bundleBuffer,
+    body: bundleBuffer as unknown as BodyInit,
   });
 
   if (!res.ok) {

package/template/README.md.template

@@ -56,7 +56,7 @@ PROJECT_NAME/
 Each widget subdirectory contains:
 
 - **`index.tsx`** — SolidJS component + `defineWidget()` registration
-- **`manifest.json`** — metadata (tag, name, type, size, version)
+- **`manifest.json`** — metadata (name, description, size, version)
 
 ## CLI commands
 

package/template/src/index.tsx.template

@@ -27,7 +27,6 @@ const WIDGET_NAMEWidget: Component<{ config: WidgetConfig }> = (props) => {
 
 export default defineWidget<WidgetConfig>({
   manifest: {
-    tag: "WIDGET_TAG",
     name: "WIDGET_NAME",
     minSize: { w: 1, h: 1 },
     maxSize: { w: 4, h: 4 },