= {
+ Starting: "s-starting",
+ Running: "s-running",
+ Paused: "s-paused",
+ Unhealthy: "s-unhealthy",
+ Stopping: "s-stopping",
+ Stopped: "s-stopped",
+};
+
+function escapeHtml(s: string): string {
+ return s
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """);
+}
+
+function badge(state: AgentState): string {
+ return `${state}`;
+}
+
+function rowHtml(d: Deployment): string {
+ const phases = d.instances.length
+ ? d.instances.map((i) => badge(i.state)).join(" ")
+ : `—`;
+ const health = d.ready === d.desired ? "ok" : "warn";
+ const name = escapeHtml(`${d.namespace}/${d.name}`);
+ return `
+ | ${name} |
+ ${d.ready}/${d.desired} · cur ${d.current} |
+ ${phases} |
+
`;
+}
+
+// Pure: deployments -> roster table HTML. Kept side-effect-free so it is unit
+// testable without a DOM.
+export function rosterHtml(deployments: Deployment[]): string {
+ if (deployments.length === 0) {
+ return `No deployments in this cluster.
`;
+ }
+ const rows = [...deployments]
+ .sort((a, b) =>
+ `${a.namespace}/${a.name}`.localeCompare(`${b.namespace}/${b.name}`),
+ )
+ .map(rowHtml)
+ .join("");
+ return `
+
+ | Deployment | Ready / Desired | Instances · 6-state |
|---|
+
+ ${rows}
+
`;
+}
+
+export function renderRoster(el: HTMLElement, deployments: Deployment[]): void {
+ el.innerHTML = rosterHtml(deployments);
+}
diff --git a/console/src/source.ts b/console/src/source.ts
new file mode 100644
index 0000000..5cf2fef
--- /dev/null
+++ b/console/src/source.ts
@@ -0,0 +1,40 @@
+import type { Deployment } from "./types";
+import { FIXTURE_DEPLOYMENTS } from "./fixtures";
+
+// A read source for the console. Desktop (Tauri → studio-cp) and the standalone
+// browser build implement this identically, so the UI never knows which it is.
+export interface Source {
+ listDeployments(cluster?: string): Promise;
+}
+
+// Fixture-backed source for the standalone / browser build — no core required.
+export class MockSource implements Source {
+ async listDeployments(): Promise {
+ return structuredClone(FIXTURE_DEPLOYMENTS);
+ }
+}
+
+// Minimal shape of the Tauri global bridge (v2, `withGlobalTauri`). Accessed via
+// the global so slice-1 carries no `@tauri-apps/api` dependency; slice-2 wires
+// the `deploy_list` command to studio-cp.
+interface TauriGlobal {
+ core?: { invoke?(cmd: string, args?: Record): Promise };
+}
+
+// Desktop source: invokes the Tauri `deploy_list` command, which bridges to
+// studio-cp. Active only inside the Tauri shell.
+export class TauriSource implements Source {
+ async listDeployments(cluster?: string): Promise {
+ const tauri = (globalThis as { __TAURI__?: TauriGlobal }).__TAURI__;
+ const invoke = tauri?.core?.invoke;
+ if (!invoke) throw new Error("Tauri bridge unavailable");
+ return invoke("deploy_list", { cluster });
+ }
+}
+
+// Pick a source: Tauri when running inside the shell, else the mock.
+export function defaultSource(): Source {
+ const inTauri =
+ typeof (globalThis as { __TAURI__?: unknown }).__TAURI__ !== "undefined";
+ return inTauri ? new TauriSource() : new MockSource();
+}
diff --git a/console/src/styles.css b/console/src/styles.css
new file mode 100644
index 0000000..54eea0a
--- /dev/null
+++ b/console/src/styles.css
@@ -0,0 +1,151 @@
+:root {
+ --bg: #ffffff;
+ --panel: #f6f7f9;
+ --text: #1b1f24;
+ --muted: #6b7280;
+ --border: #e5e7eb;
+ --ok: #1a7f37;
+ --warn: #b7791f;
+
+ --s-starting: #2563eb;
+ --s-running: #1a7f37;
+ --s-paused: #b7791f;
+ --s-unhealthy: #c2410c;
+ --s-stopping: #d97706;
+ --s-stopped: #6b7280;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg: #0e1116;
+ --panel: #161b22;
+ --text: #e6edf3;
+ --muted: #8b949e;
+ --border: #21262d;
+ --ok: #3fb950;
+ --warn: #d29922;
+
+ --s-starting: #58a6ff;
+ --s-running: #3fb950;
+ --s-paused: #d29922;
+ --s-unhealthy: #f0883e;
+ --s-stopping: #db8f2a;
+ --s-stopped: #8b949e;
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+ background: var(--bg);
+ color: var(--text);
+}
+
+.topbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
+ border-bottom: 1px solid var(--border);
+ background: var(--panel);
+}
+
+.brand {
+ font-weight: 700;
+ letter-spacing: 0.02em;
+}
+.brand span {
+ color: var(--muted);
+ font-weight: 500;
+}
+
+.meta {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+ color: var(--muted);
+ font-size: 12px;
+}
+.cluster::before {
+ content: "cluster ";
+ opacity: 0.6;
+}
+.status.err {
+ color: var(--s-unhealthy);
+}
+
+.roster-wrap {
+ padding: 18px;
+}
+
+table.roster {
+ width: 100%;
+ border-collapse: collapse;
+}
+table.roster th {
+ text-align: left;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--muted);
+ padding: 8px 10px;
+ border-bottom: 1px solid var(--border);
+}
+table.roster td {
+ padding: 10px;
+ border-bottom: 1px solid var(--border);
+ vertical-align: middle;
+}
+td.name {
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+}
+td.counts {
+ font-variant-numeric: tabular-nums;
+}
+td.counts.ok {
+ color: var(--ok);
+}
+td.counts.warn {
+ color: var(--warn);
+}
+.muted {
+ color: var(--muted);
+}
+.empty {
+ color: var(--muted);
+ padding: 24px 10px;
+}
+
+.badge {
+ display: inline-block;
+ padding: 2px 8px;
+ margin: 1px 0;
+ border-radius: 999px;
+ font-size: 12px;
+ font-weight: 600;
+ color: #fff;
+ white-space: nowrap;
+}
+.s-starting {
+ background: var(--s-starting);
+}
+.s-running {
+ background: var(--s-running);
+}
+.s-paused {
+ background: var(--s-paused);
+}
+.s-unhealthy {
+ background: var(--s-unhealthy);
+}
+.s-stopping {
+ background: var(--s-stopping);
+}
+.s-stopped {
+ background: var(--s-stopped);
+}
diff --git a/console/src/types.ts b/console/src/types.ts
new file mode 100644
index 0000000..474096c
--- /dev/null
+++ b/console/src/types.ts
@@ -0,0 +1,35 @@
+// Wire types — mirror studio-cp's read-model (ADR-2). Kept in lockstep with
+// `crates/studio-cp` (`Deployment` / `InstancePhase`) and the canonical
+// 6-state `AgentState` (ADR-1). This is the view-model contract the skin
+// depends on; any skin (web now, SwiftUI later) shares the same shape.
+
+export type AgentState =
+ | "Starting"
+ | "Running"
+ | "Paused"
+ | "Unhealthy"
+ | "Stopping"
+ | "Stopped";
+
+export const AGENT_STATES: readonly AgentState[] = [
+ "Starting",
+ "Running",
+ "Paused",
+ "Unhealthy",
+ "Stopping",
+ "Stopped",
+];
+
+export interface InstancePhase {
+ id: string;
+ state: AgentState;
+}
+
+export interface Deployment {
+ name: string;
+ namespace: string;
+ desired: number;
+ current: number;
+ ready: number;
+ instances: InstancePhase[];
+}
diff --git a/console/tsconfig.json b/console/tsconfig.json
new file mode 100644
index 0000000..8574e08
--- /dev/null
+++ b/console/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "verbatimModuleSyntax": true,
+ "skipLibCheck": true,
+ "noEmit": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/console/vite.config.ts b/console/vite.config.ts
new file mode 100644
index 0000000..1e0127f
--- /dev/null
+++ b/console/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// `base: "./"` so the built `dist/index.html` opens standalone over file://
+// (the browser-console / preview use case) with no dev server.
+export default defineConfig({
+ base: "./",
+ build: { outDir: "dist", emptyOutDir: true },
+});