{
@@ -241,11 +298,12 @@ function attachSocketHandlers(socket: WebSocket, port: number): void {
socket.close();
return;
}
- $("port-url").textContent = `ws://localhost:${port}`;
- $("file-name").textContent = cachedFileName;
- setStatus("connected");
- showView("connected");
- activityLog.render();
+ setState({
+ kind: "connected",
+ file: { name: cachedFileName, key: "—" },
+ port,
+ running: null,
+ });
reconnectIndex = 0;
// Tell code.ts so it can post the initial status (file name, etc.) back through us.
parent.postMessage({ pluginMessage: { type: "ws-connected" } }, "*");
@@ -328,8 +386,9 @@ function attachPluginMessageListener(): void {
if (!msg) return;
if (msg.type === "FILE_NAME") {
cachedFileName = msg.name ?? "—";
- const el = document.getElementById("file-name");
- if (el) el.textContent = cachedFileName;
+ if (currentState.kind === "connected") {
+ setState({ ...currentState, file: { ...currentState.file, name: cachedFileName } });
+ }
}
// THEME_CHANGE is handled by theme.ts's own listener.
});
diff --git a/packages/bridge-plugin/src/ui/activity-log.ts b/packages/bridge-plugin/src/ui/activity-log.ts
index 7376aa5..415d994 100644
--- a/packages/bridge-plugin/src/ui/activity-log.ts
+++ b/packages/bridge-plugin/src/ui/activity-log.ts
@@ -8,7 +8,7 @@ export interface LogEntry {
}
const MAX_HISTORY = 50;
-const MAX_VISIBLE = 5;
+const MAX_VISIBLE = 10;
export class ActivityLog {
private entries: LogEntry[] = [];
@@ -28,7 +28,7 @@ export class ActivityLog {
render(): void {
if (this.entries.length === 0) {
- this.host.innerHTML = `No recent activity
`;
+ this.host.innerHTML = `No operations yet — your agent will populate this as it runs.
`;
return;
}
const rows = this.entries.slice(0, MAX_VISIBLE).map(this.row).join("");
diff --git a/packages/bridge-plugin/src/ui/render-ui.ts b/packages/bridge-plugin/src/ui/render-ui.ts
new file mode 100644
index 0000000..56cf73f
--- /dev/null
+++ b/packages/bridge-plugin/src/ui/render-ui.ts
@@ -0,0 +1,95 @@
+// packages/bridge-plugin/src/ui/render-ui.ts
+
+export type RunningOp = {
+ name: string;
+ paramsPreview: string;
+ startedAt: number;
+};
+
+export type AppState =
+ | { kind: "disconnected" }
+ | { kind: "connecting"; lastKnownPort: number | null }
+ | {
+ kind: "connected";
+ file: { name: string; key: string };
+ port: number;
+ running: RunningOp | null;
+ }
+ | {
+ kind: "mismatch";
+ reason: string;
+ serverVersion: string;
+ pluginVersion: string;
+ command?: string;
+ };
+
+export function pillStateFor(state: AppState): string {
+ if (state.kind === "connected" && state.running) return "running";
+ return state.kind;
+}
+
+export function pillTextFor(state: AppState): string {
+ switch (state.kind) {
+ case "disconnected":
+ return "Not connected";
+ case "connecting":
+ return "Connecting…";
+ case "connected":
+ return state.running ? `Running ${state.running.name}` : "Connected";
+ case "mismatch":
+ return "Update needed";
+ }
+}
+
+export function formatElapsed(ms: number): string {
+ const safe = Math.max(0, ms);
+ const s = safe / 1000;
+ if (s < 60) return `${s.toFixed(1)}s elapsed`;
+ const minutes = Math.floor(s / 60);
+ const seconds = Math.floor(s % 60);
+ return `${minutes}m ${seconds}s elapsed`;
+}
+
+function el(id: string): HTMLElement {
+ const node = document.getElementById(id);
+ if (!node) throw new Error(`renderUI: missing element #${id}`);
+ return node;
+}
+
+export function renderUI(state: AppState): void {
+ // 1. Status pill
+ const pill = el("status-pill");
+ pill.dataset.state = pillStateFor(state);
+ el("status-text").textContent = pillTextFor(state);
+
+ // 2. Top-level views
+ el("view-disconnected").hidden = state.kind !== "disconnected" && state.kind !== "connecting";
+ el("view-connected").hidden = state.kind !== "connected";
+ el("view-mismatch").hidden = state.kind !== "mismatch";
+
+ // 3. Connected sub-blocks
+ if (state.kind === "connected") {
+ el("file-name").textContent = state.file.name;
+ el("port-url").textContent = `localhost:${state.port}`;
+ el("running-block").hidden = state.running === null;
+ el("idle-block").hidden = state.running !== null;
+ if (state.running) {
+ el("run-op").textContent = state.running.name;
+ el("run-params").textContent = state.running.paramsPreview;
+ el("run-elapsed").textContent = formatElapsed(Date.now() - state.running.startedAt);
+ }
+ } else {
+ // Defensive: explicitly hide running-block when not connected
+ el("running-block").hidden = true;
+ }
+
+ // 4. Mismatch view text + command
+ if (state.kind === "mismatch") {
+ el("mismatch-text").textContent =
+ `Server ${state.serverVersion} doesn't match plugin ${state.pluginVersion}. ${state.reason}`;
+ if (state.command !== undefined) {
+ const cmdEl = document.getElementById("mismatch-cmd");
+ if (cmdEl) cmdEl.textContent = state.command;
+ }
+ }
+}
diff --git a/packages/bridge-plugin/src/ui/tokens.cjs b/packages/bridge-plugin/src/ui/tokens.cjs
index 71403bd..8e4bb3b 100644
--- a/packages/bridge-plugin/src/ui/tokens.cjs
+++ b/packages/bridge-plugin/src/ui/tokens.cjs
@@ -2,66 +2,75 @@
* Shared design tokens for bootloader.html and ui.html.
* Injected into both at webpack build time via HtmlWebpackPlugin.templateParameters.
* Single source of truth for v4 palette, typography, and spacing.
+ *
+ * Theme resolution (three-tier fallback chain):
+ * 1. Figma's injected --figma-color-* vars (when running inside Figma with themeColors: true)
+ * 2. Hardcoded literals (the fallback after the comma in each var() call)
+ * 3. data-theme="dark" overrides the fallback literals for non-Figma contexts
+ * (happy-dom tests, future force-toggle UI, etc.)
+ *
+ * Inside Figma: tier 1 wins, auto-tracks editor theme. theme.ts is dormant.
+ * Outside Figma: tier 1 is undefined, fallback literals apply. data-theme can override.
*/
module.exports = `
:root {
- --po-bg: #ffffff;
- --po-surface: #ffffff;
- --po-step-bg: #fafafa;
- --po-border: #ececec;
- --po-text: #1a1a1a;
- --po-text-sub: #6b7280;
- --po-text-muted: #9ca3af;
- --po-code-bg: #ffffff;
- --po-btn-primary-bg: #18181b;
- --po-btn-primary-fg: #ffffff;
- --po-btn-secondary-bg: #f4f4f5;
- --po-btn-secondary-fg: #18181b;
- --po-accent: #6366f1;
+ --po-bg: var(--figma-color-bg, #ffffff);
+ --po-surface: var(--figma-color-bg-secondary, #ffffff);
+ --po-step-bg: var(--figma-color-bg-tertiary, #fafafa);
+ --po-border: var(--figma-color-border, #ececec);
+ --po-text: var(--figma-color-text, #1a1a1a);
+ --po-text-sub: var(--figma-color-text-secondary, #6b7280);
+ --po-text-muted: var(--figma-color-text-tertiary, #9ca3af);
+ --po-code-bg: var(--figma-color-bg, #ffffff);
+ --po-btn-primary-bg: var(--figma-color-bg-brand, #18181b);
+ --po-btn-primary-fg: var(--figma-color-text-onbrand, #ffffff);
+ --po-btn-secondary-bg: var(--figma-color-bg-secondary, #f4f4f5);
+ --po-btn-secondary-fg: var(--figma-color-text, #18181b);
+ --po-accent: var(--figma-color-bg-brand, #6366f1);
--po-accent-soft: #f5f7fc;
- --po-success: #10b981;
- --po-success-soft: #ecfdf5;
- --po-success-text: #047857;
- --po-warn-soft: #fef3c7;
- --po-warn-text: #92400e;
- --po-error: #ef4444;
- --po-error-soft: #fef2f2;
- --po-error-text: #b91c1c;
+ --po-success: var(--figma-color-bg-success, #10b981);
+ --po-success-soft: var(--figma-color-bg-success-secondary, #ecfdf5);
+ --po-success-text: var(--figma-color-text-success, #047857);
+ --po-warn-soft: var(--figma-color-bg-warning-secondary, #fef3c7);
+ --po-warn-text: var(--figma-color-text-warning, #92400e);
+ --po-error: var(--figma-color-bg-danger, #ef4444);
+ --po-error-soft: var(--figma-color-bg-danger-secondary, #fef2f2);
+ --po-error-text: var(--figma-color-text-danger, #b91c1c);
--po-running-soft: #eff6ff;
- --po-running-text: #1d4ed8;
+ --po-running-text: var(--figma-color-text-component, #1d4ed8);
--po-radius: 8px;
--po-radius-lg: 12px;
--po-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
- --po-focus: #0d99ff;
+ --po-focus: var(--figma-color-border-brand, #0d99ff);
--po-font: 'Inter', -apple-system, system-ui, -apple-system, "Helvetica Neue", sans-serif;
--po-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
[data-theme="dark"] {
- --po-bg: #1e1e1e;
- --po-surface: #2c2c2c;
- --po-step-bg: #222222;
- --po-border: #383838;
- --po-text: #f5f5f5;
- --po-text-sub: rgba(255,255,255,.55);
- --po-text-muted: rgba(255,255,255,.4);
- --po-code-bg: #1e1e1e;
- --po-btn-primary-bg: #ffffff;
- --po-btn-primary-fg: #18181b;
- --po-btn-secondary-bg: #383838;
- --po-btn-secondary-fg: #f5f5f5;
- --po-accent: #818cf8;
+ --po-bg: var(--figma-color-bg, #1e1e1e);
+ --po-surface: var(--figma-color-bg-secondary, #2c2c2c);
+ --po-step-bg: var(--figma-color-bg-tertiary, #222222);
+ --po-border: var(--figma-color-border, #383838);
+ --po-text: var(--figma-color-text, #f5f5f5);
+ --po-text-sub: var(--figma-color-text-secondary, rgba(255,255,255,.55));
+ --po-text-muted: var(--figma-color-text-tertiary, rgba(255,255,255,.4));
+ --po-code-bg: var(--figma-color-bg, #1e1e1e);
+ --po-btn-primary-bg: var(--figma-color-bg-brand, #ffffff);
+ --po-btn-primary-fg: var(--figma-color-text-onbrand, #18181b);
+ --po-btn-secondary-bg: var(--figma-color-bg-secondary, #383838);
+ --po-btn-secondary-fg: var(--figma-color-text, #f5f5f5);
+ --po-accent: var(--figma-color-bg-brand, #818cf8);
--po-accent-soft: #2a2d3d;
- --po-success: #34d399;
- --po-success-soft: #053b2d;
- --po-success-text: #6ee7b7;
- --po-warn-soft: #3a2a05;
- --po-warn-text: #fde68a;
- --po-error: #f87171;
- --po-error-soft: #3a1414;
- --po-error-text: #fca5a5;
+ --po-success: var(--figma-color-bg-success, #34d399);
+ --po-success-soft: var(--figma-color-bg-success-secondary, #053b2d);
+ --po-success-text: var(--figma-color-text-success, #6ee7b7);
+ --po-warn-soft: var(--figma-color-bg-warning-secondary, #3a2a05);
+ --po-warn-text: var(--figma-color-text-warning, #fde68a);
+ --po-error: var(--figma-color-bg-danger, #f87171);
+ --po-error-soft: var(--figma-color-bg-danger-secondary, #3a1414);
+ --po-error-text: var(--figma-color-text-danger, #fca5a5);
--po-running-soft: #1e2a4a;
- --po-running-text: #93c5fd;
+ --po-running-text: var(--figma-color-text-component, #93c5fd);
--po-shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
}
diff --git a/packages/bridge-plugin/tsconfig.json b/packages/bridge-plugin/tsconfig.json
index d06c933..6782df9 100644
--- a/packages/bridge-plugin/tsconfig.json
+++ b/packages/bridge-plugin/tsconfig.json
@@ -10,5 +10,6 @@
"typeRoots": ["../../node_modules/@types", "../../node_modules/@figma"],
"types": ["plugin-typings"]
},
- "include": ["src"]
+ "include": ["src"],
+ "exclude": ["src/__tests__"]
}
diff --git a/packages/bridge-plugin/vitest.config.ts b/packages/bridge-plugin/vitest.config.ts
index 62bf32f..c1e53ca 100644
--- a/packages/bridge-plugin/vitest.config.ts
+++ b/packages/bridge-plugin/vitest.config.ts
@@ -3,7 +3,10 @@ import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: "node",
- environmentMatchGlobs: [["src/__tests__/ui/**/*.test.ts", "happy-dom"]],
+ environmentMatchGlobs: [
+ ["src/__tests__/ui/**/*.test.ts", "happy-dom"],
+ ["src/__tests__/render-ui.test.ts", "happy-dom"],
+ ],
include: ["src/**/__tests__/**/*.test.ts"],
},
});
diff --git a/packages/claude-plugin/package.json b/packages/claude-plugin/package.json
index eba7463..649e9f6 100644
--- a/packages/claude-plugin/package.json
+++ b/packages/claude-plugin/package.json
@@ -10,7 +10,7 @@
},
"devDependencies": {
"tsx": "^4.0.0",
- "vitest": "^1.0.0",
- "typescript": "^5.0.0"
+ "typescript": "^5.0.0",
+ "vitest": "^4.1.8"
}
}
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
index 698f9d7..ef4241f 100644
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -53,11 +53,11 @@
"@pluginos/shared": "*",
"@types/adm-zip": "^0.5.8",
"@types/ws": "^8.5.0",
- "@vitest/coverage-v8": "^2.1.9",
+ "@vitest/coverage-v8": "^4.1.8",
"adm-zip": "^0.5.17",
"tsup": "^8.5.1",
"tsx": "^4.19.0",
"typescript": "^5.5.0",
- "vitest": "^2.1.0"
+ "vitest": "^4.1.8"
}
}
diff --git a/packages/shared/package.json b/packages/shared/package.json
index cc84225..24117b4 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -11,8 +11,8 @@
"test:coverage": "vitest run --coverage"
},
"devDependencies": {
- "@vitest/coverage-v8": "^2.1.9",
+ "@vitest/coverage-v8": "^4.1.8",
"typescript": "^5.5.0",
- "vitest": "^2.1.0"
+ "vitest": "^4.1.8"
}
}