@glasshome/widget-cli 0.1.0

package/src/utils/auth.ts

@@ -0,0 +1,95 @@
+import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+interface StoredAuth {
+  accessToken: string;
+  refreshToken: string;
+  expiresAt: number;
+  hubUrl: string;
+  scope: string;
+}
+
+const AUTH_DIR = join(homedir(), ".glasshome");
+const AUTH_FILE = join(AUTH_DIR, "auth.json");
+
+function ensureDir(): void {
+  if (!existsSync(AUTH_DIR)) {
+    mkdirSync(AUTH_DIR, { recursive: true, mode: 0o700 });
+  }
+}
+
+export function storeToken(data: StoredAuth): 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;
+  }
+}
+
+export async function getToken(hubUrl: string): Promise<string | null> {
+  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 {
+    const res = await fetch(`${hubUrl}/api/auth/oauth2/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({
+        grant_type: "refresh_token",
+        refresh_token: stored.refreshToken,
+        client_id: "glasshome-widget-cli",
+        client_secret: "glasshome-cli-public",
+      }),
+    });
+
+    if (!res.ok) return null;
+
+    const data = (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,
+      hubUrl: stored.hubUrl,
+      scope: stored.scope,
+    });
+
+    return data.access_token;
+  } catch {
+    return null;
+  }
+}
+
+export function clearToken(): void {
+  if (existsSync(AUTH_FILE)) {
+    unlinkSync(AUTH_FILE);
+  }
+}
+
+export function getHubUrl(): string {
+  return getStoredAuth()?.hubUrl ?? "https://glasshome.app";
+}
+
+export function getScope(): string | null {
+  return getStoredAuth()?.scope ?? null;
+}

package/src/utils/hub-api.ts

@@ -0,0 +1,104 @@
+interface PublishScope {
+  name: string;
+  type: "personal" | "organization";
+  displayName: string;
+}
+
+export async function fetchScopes(hubUrl: string, token: string): Promise<PublishScope[]> {
+  const res = await fetch(`${hubUrl}/api/widgets/scopes`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) {
+    throw Object.assign(new Error("Failed to fetch scopes"), { status: res.status });
+  }
+  const data = (await res.json()) as { scopes: PublishScope[] };
+  return data.scopes;
+}
+
+interface PublishRequestParams {
+  scope: string;
+  name: string;
+  displayName: string;
+  description?: string;
+  icon?: string;
+  minSize: { w: number; h: number };
+  maxSize: { w: number; h: number };
+  sdkVersion: string;
+  version: string;
+  bundleSize: number;
+  sha256Hash: string;
+  manifestJson: string;
+}
+
+interface PublishRequestResponse {
+  uploadUrl: string;
+  cdnUrl: string;
+  widgetId: string;
+  versionId: string;
+}
+
+interface PublishConfirmResponse {
+  success: boolean;
+  bundleUrl: string;
+}
+
+export async function requestPublish(
+  hubUrl: string,
+  token: string,
+  params: PublishRequestParams,
+): Promise<PublishRequestResponse> {
+  const res = await fetch(`${hubUrl}/api/widgets/publish`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ action: "request", ...params }),
+  });
+
+  if (res.status === 409) {
+    const data = (await res.json()) as { error: string };
+    throw Object.assign(new Error(data.error), { status: 409 });
+  }
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Publish request failed (${res.status}): ${text}`);
+  }
+
+  return res.json() as Promise<PublishRequestResponse>;
+}
+
+export async function confirmPublish(
+  hubUrl: string,
+  token: string,
+  versionId: string,
+): Promise<PublishConfirmResponse> {
+  const res = await fetch(`${hubUrl}/api/widgets/publish`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ action: "confirm", versionId }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Publish confirm failed (${res.status}): ${text}`);
+  }
+
+  return res.json() as Promise<PublishConfirmResponse>;
+}
+
+export async function uploadToR2(uploadUrl: string, bundleBuffer: Buffer): Promise<void> {
+  const res = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: { "Content-Type": "application/javascript" },
+    body: bundleBuffer,
+  });
+
+  if (!res.ok) {
+    throw new Error(`R2 upload failed (${res.status}): ${await res.text()}`);
+  }
+}

package/src/utils/manifest.ts

@@ -0,0 +1,126 @@
+import { existsSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { gzipSync } from "node:zlib";
+
+export interface WidgetManifest {
+  tag: string;
+  name: string;
+  minSize: { w: number; h: number };
+  maxSize: { w: number; h: number };
+  sdkVersion: string;
+  version?: string;
+  description?: string;
+  schema?: Record<string, unknown>;
+  defaultConfig?: Record<string, unknown>;
+}
+
+export interface Registry {
+  version: number;
+  generatedAt: string;
+  baseUrl: string;
+  widgets: Array<WidgetManifest & { bundleUrl: string }>;
+}
+
+export interface BundleInfo {
+  raw: number;
+  gzip: number;
+  text: string;
+}
+
+// ---------------------------------------------------------------------------
+// Legacy single-widget helpers (kept for backward compat)
+// ---------------------------------------------------------------------------
+
+/**
+ * Extract the widget manifest from the built dist/index.js bundle
+ * by dynamic-importing it and reading the registered custom element's metadata.
+ */
+export async function extractManifest(cwd: string): Promise<WidgetManifest> {
+  const distPath = resolve(cwd, "dist/index.js");
+  if (!existsSync(distPath)) {
+    throw new Error(
+      "dist/index.js not found. Run `bun run build` first or let the command build for you.",
+    );
+  }
+
+  // Dynamic import the bundle — it self-registers a custom element via @glasshome/widget-sdk's defineWidget.
+  // The SDK's defineWidget stores manifest on the custom element class.
+  const mod = await import(distPath);
+
+  // The module default export or the manifest property contains widget metadata
+  const manifest: WidgetManifest | undefined = mod.manifest ?? mod.default?.manifest;
+
+  if (!manifest) {
+    throw new Error(
+      "Could not extract manifest from dist/index.js. Ensure your widget uses defineWidget() from @glasshome/widget-sdk.",
+    );
+  }
+
+  return manifest;
+}
+
+/**
+ * Read the raw bundle text and compute sizes.
+ */
+export function getBundleInfo(cwd: string): BundleInfo {
+  const distPath = resolve(cwd, "dist/index.js");
+  const text = readFileSync(distPath, "utf-8");
+  const raw = Buffer.byteLength(text, "utf-8");
+  const gzip = gzipSync(text).byteLength;
+  return { raw, gzip, text };
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ---------------------------------------------------------------------------
+// Multi-widget helpers
+// ---------------------------------------------------------------------------
+
+/** Discover all widget directories in src/ that contain a manifest.json. */
+export function discoverWidgets(cwd: string): string[] {
+  const srcDir = resolve(cwd, "src");
+  if (!existsSync(srcDir)) return [];
+
+  return readdirSync(srcDir).filter((entry) => {
+    const dir = join(srcDir, entry);
+    return statSync(dir).isDirectory() && existsSync(join(dir, "manifest.json"));
+  });
+}
+
+/** Read a single widget's manifest.json from its source directory. */
+export function readManifest(cwd: string, widgetName: string): WidgetManifest {
+  const manifestPath = resolve(cwd, "src", widgetName, "manifest.json");
+  if (!existsSync(manifestPath)) {
+    throw new Error(`No manifest.json found at src/${widgetName}/manifest.json`);
+  }
+  return JSON.parse(readFileSync(manifestPath, "utf-8"));
+}
+
+/** Write a manifest.json to a widget's source directory. */
+export function writeManifest(cwd: string, widgetName: string, manifest: WidgetManifest): void {
+  const manifestPath = resolve(cwd, "src", widgetName, "manifest.json");
+  writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
+}
+
+/** Read dist/registry.json if it exists. */
+export function readRegistry(cwd: string): Registry | null {
+  const registryPath = resolve(cwd, "dist", "registry.json");
+  if (!existsSync(registryPath)) return null;
+  return JSON.parse(readFileSync(registryPath, "utf-8"));
+}
+
+/** Get bundle info for a specific widget from the dist/ directory. */
+export function getWidgetBundleInfo(cwd: string, widgetName: string): BundleInfo {
+  const distPath = resolve(cwd, "dist", `${widgetName}.js`);
+  if (!existsSync(distPath)) {
+    throw new Error(`dist/${widgetName}.js not found. Run \`bun run build\` first.`);
+  }
+  const text = readFileSync(distPath, "utf-8");
+  const raw = Buffer.byteLength(text, "utf-8");
+  const gzip = gzipSync(text).byteLength;
+  return { raw, gzip, text };
+}

package/template/.gitignore.template

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.env
+*.local

package/template/.mise.toml.template

@@ -0,0 +1,3 @@
+[tools]
+node = "22"
+bun = "1.3"

package/template/README.md.template

@@ -0,0 +1,90 @@
+# PROJECT_NAME
+
+PROJECT_DESCRIPTION
+
+A multi-widget project for the GlassHome dashboard.
+
+## Getting started
+
+### Install dependencies
+
+```bash
+bun install
+```
+
+### Build all widgets
+
+```bash
+bun run build
+```
+
+This produces `dist/{widget}.js` for each widget and generates `dist/registry.json`.
+
+## Adding widgets
+
+Add a new widget to the project:
+
+```bash
+bun widget add
+```
+
+This creates `src/{widget-name}/index.tsx` and `src/{widget-name}/manifest.json`.
+
+## Testing in the dashboard
+
+Connect your widgets to a running GlassHome instance:
+
+```bash
+bun widget connect http://<dashboard-api-host>:3333
+```
+
+This builds all widgets, serves them on your LAN IP, registers them with the dashboard, and watches for file changes. Widgets hot-reload as you edit.
+
+## Project structure
+
+```
+PROJECT_NAME/
+  src/
+    {widget-name}/
+      index.tsx          # defineWidget() + component
+      manifest.json      # metadata for registry generation
+  dist/                  # after build
+    {widget-name}.js
+    registry.json        # auto-generated, lists all widgets
+```
+
+Each widget subdirectory contains:
+
+- **`index.tsx`** — SolidJS component + `defineWidget()` registration
+- **`manifest.json`** — metadata (tag, name, type, size, version)
+
+## CLI commands
+
+All commands are available via `bun widget`:
+
+```bash
+bun widget add                   # Add a new widget to the project
+bun widget connect <url>         # Test in a running dashboard
+bun widget validate [name]       # Validate all or a specific widget
+bun widget info [name]           # Show widget metadata and bundle info
+bun widget publish               # Build and publish to GlassHome Hub
+bun widget upgrade               # Upgrade @glasshome/widget-sdk
+```
+
+## Publishing
+
+```bash
+bun widget validate
+bun widget publish
+```
+
+## SDK reference
+
+```tsx
+import {
+  defineWidget,       // Define and register a widget
+  getThemeToken,      // Read a CSS variable (e.g. getThemeToken("color-primary"))
+  isDark,             // Returns true if dark mode is active
+  createEntity,       // Create a reactive entity signal (SolidJS)
+} from "@glasshome/widget-sdk";
+```

package/template/package.json.template

@@ -0,0 +1,24 @@
+{
+  "name": "PROJECT_NAME",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "PROJECT_DESCRIPTION",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "widget": "glasshome-widget"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.11",
+    "@glasshome/widget-sdk": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}

package/template/src/index.tsx.template

@@ -0,0 +1,49 @@
+import { defineWidget } from "@glasshome/widget-sdk";
+import { type Component, createSignal } from "solid-js";
+
+interface WidgetConfig {
+  label: string;
+}
+
+const WIDGET_NAMEWidget: Component<{ config: WidgetConfig }> = (props) => {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <div class="flex h-full w-full flex-col items-center justify-center gap-3">
+      <h3 class="text-sm font-medium text-muted-foreground">
+        {props.config.label || "WIDGET_NAME"}
+      </h3>
+      <p class="text-4xl font-bold">{count()}</p>
+      <button
+        type="button"
+        onClick={() => setCount((c) => c + 1)}
+        class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Increment
+      </button>
+    </div>
+  );
+};
+
+export default defineWidget<WidgetConfig>({
+  manifest: {
+    tag: "WIDGET_TAG",
+    name: "WIDGET_NAME",
+    minSize: { w: 1, h: 1 },
+    maxSize: { w: 4, h: 4 },
+    sdkVersion: "^0.2.0",
+    schema: {
+      type: "object",
+      properties: {
+        label: {
+          type: "string",
+          title: "Widget Label",
+          description: "Display label for the widget",
+          default: "WIDGET_NAME",
+        },
+      },
+    },
+    defaultConfig: { label: "WIDGET_NAME" },
+  },
+  component: WIDGET_NAMEWidget,
+});

package/template/tsconfig.json.template

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts.template

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+import { glasshomeWidgets } from "@glasshome/widget-sdk/vite";
+
+export default defineConfig({
+  plugins: [solid(), ...glasshomeWidgets()],
+});