@dxo/studio 0.0.0 → 0.0.10

package/README.md

@@ -1,3 +1,25 @@
 # @dxo/studio
 
-Placeholder package (0.0.0). Reserved for the DXO project.
+DXO training workbench (developer preview). **WebUI is VMZ** — not a separate Vue app.
+
+## Two entry points
+
+| Entry                | What it does                                               |
+|----------------------|------------------------------------------------------------|
+| **`dxo studio`**     | VMZ **watch serve** + Rust inspect API → **browser**       |
+| **`dxo-studio.exe`** | Tauri desktop GUI (embedded VMZ static build + native API) |
+
+| Layer       | Path                                                         |
+|-------------|--------------------------------------------------------------|
+| Rust API    | `projects/compilers/dxo-studio`                              |
+| Rust GUI    | `projects/compilers/dxo-studio-tauri` → **`dxo-studio.exe`** |
+| TS launcher | `launcher/` → `dist/`                                        |
+| VMZ WebUI   | package root (`src/*.vmz`, `vmz.config.ts`)                  |
+
+```bash
+pnpm exec dxo studio
+pnpm --filter @dxo/studio dev          # VMZ only
+pnpm --filter @dxo/studio build:ui     # static profile for Tauri embed
+
+cargo build -p dxo-studio-tauri --release   # → target/release/dxo-studio.exe
+```

package/designs/styles/studio.css

@@ -0,0 +1,208 @@
+.studio {
+    font-family: ui-sans-serif, system-ui, sans-serif;
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 1.5rem;
+    color: #122;
+    background: #f7f8f6;
+    min-height: 100vh;
+}
+
+.studio__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid #ccd;
+    padding-bottom: 0.75rem;
+}
+
+.studio__brand {
+    color: inherit;
+    text-decoration: none;
+    font-size: 1.25rem;
+}
+
+.studio__nav {
+    display: flex;
+    gap: 1rem;
+}
+
+.studio__nav a {
+    color: #345;
+    text-decoration: none;
+    font-size: 0.95rem;
+}
+
+.studio__nav a:hover {
+    text-decoration: underline;
+}
+
+.studio__btn {
+    margin-top: 0.75rem;
+    margin-right: 0.5rem;
+    padding: 0.4rem 0.9rem;
+    border: 1px solid #9ab;
+    border-radius: 0.35rem;
+    background: #dfe8e0;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.studio__btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.studio__btn--ghost {
+    background: transparent;
+}
+
+.studio__pick-list label {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    cursor: pointer;
+}
+
+.studio__matrix td,
+.studio__matrix th {
+    text-align: center;
+    min-width: 2.5rem;
+}
+
+.studio__cell--warm {
+    background: #e8f0dc;
+}
+
+.studio__cell--hot {
+    background: #c5ddb0;
+    font-weight: 600;
+}
+
+.studio__samples {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    gap: 0.75rem;
+}
+
+.studio__samples li {
+    border: 1px solid #dde;
+    padding: 0.35rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.studio__samples img {
+    width: 100%;
+    height: auto;
+    display: block;
+    background: #eef1ee;
+}
+
+.studio__upload .studio__file {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    margin: 1rem 0;
+    font-size: 0.9rem;
+}
+
+.studio__preview img {
+    max-width: 16rem;
+    margin-top: 0.75rem;
+    border: 1px solid #ccd;
+}
+
+.studio__compare {
+    margin-top: 1.5rem;
+}
+
+.studio__panel h1 {
+    font-size: 1.5rem;
+    margin: 0 0 0.5rem;
+}
+
+.studio__panel h2 {
+    font-size: 1.1rem;
+    margin: 1.5rem 0 0.5rem;
+}
+
+.studio__hint,
+.studio__status,
+.studio__meta {
+    color: #456;
+    font-size: 0.9rem;
+}
+
+.studio__list {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+}
+
+.studio__list li {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #dde;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: baseline;
+}
+
+.studio__list--compact li {
+    font-size: 0.85rem;
+    font-family: ui-monospace, monospace;
+}
+
+.studio__badge {
+    font-size: 0.75rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 0.25rem;
+    background: #dde8e0;
+}
+
+.studio__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+.studio__table th,
+.studio__table td {
+    text-align: left;
+    padding: 0.35rem 0.5rem;
+    border-bottom: 1px solid #dde;
+}
+
+.studio__pre {
+    background: #eef1ee;
+    padding: 0.75rem;
+    overflow: auto;
+    font-size: 0.8rem;
+    max-height: 24rem;
+}
+
+.studio__tabs {
+    display: flex;
+    gap: 0.35rem;
+    margin: 0.5rem 0 0.75rem;
+}
+
+.studio__tab {
+    border: 1px solid #ccd;
+    background: #f7f8f7;
+    color: #334;
+    padding: 0.35rem 0.7rem;
+    cursor: pointer;
+    font: inherit;
+}
+
+.studio__tab--active {
+    background: #2a4;
+    color: #fff;
+    border-color: #2a4;
+}

package/dist/api-server.d.ts

@@ -0,0 +1,15 @@
+export type InspectApiServerOptions = {
+    host?: string;
+    port?: number;
+    runsRoot?: string;
+};
+export type InspectApiServer = {
+    host: string;
+    port: number;
+    url: string;
+    runsRoot: string;
+    close: () => Promise<void>;
+};
+/** Loopback HTTP API over the append-only inspect run store (Rust `dxo-studio`). */
+export declare function createInspectApiServer(options?: InspectApiServerOptions): Promise<InspectApiServer>;
+//# sourceMappingURL=api-server.d.ts.map

package/dist/api-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-server.d.ts","sourceRoot":"","sources":["../launcher/api-server.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,uBAAuB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAcF,oFAAoF;AACpF,wBAAsB,sBAAsB,CAAC,OAAO,GAAE,uBAA4B,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAmB7G"}

package/dist/api-server.js

@@ -0,0 +1,23 @@
+import { loadNative } from '@dxo/core/native';
+/** Loopback HTTP API over the append-only inspect run store (Rust `dxo-studio`). */
+export async function createInspectApiServer(options = {}) {
+    const native = loadNative();
+    if (typeof native.createInspectApiServer !== 'function') {
+        throw new Error('createInspectApiServer requires `pnpm build:native`');
+    }
+    const handle = native.createInspectApiServer({
+        host: options.host,
+        port: options.port,
+        runsRoot: options.runsRoot,
+    });
+    return {
+        host: handle.host,
+        port: handle.port,
+        url: handle.url,
+        runsRoot: handle.runsRoot,
+        close: async () => {
+            handle.close();
+        },
+    };
+}
+//# sourceMappingURL=api-server.js.map

package/dist/api-server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-server.js","sourceRoot":"","sources":["../launcher/api-server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA4B9C,oFAAoF;AACpF,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAAC,UAAmC,EAAE;IAC9E,MAAM,MAAM,GAAG,UAAU,EAAuB,CAAC;IACjD,IAAI,OAAO,MAAM,CAAC,sBAAsB,KAAK,UAAU,EAAE,CAAC;QACtD,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC3E,CAAC;IACD,MAAM,MAAM,GAAG,MAAM,CAAC,sBAAsB,CAAC;QACzC,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ;KAC7B,CAAC,CAAC;IACH,OAAO;QACH,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,GAAG,EAAE,MAAM,CAAC,GAAG;QACf,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,KAAK,EAAE,KAAK,IAAI,EAAE;YACd,MAAM,CAAC,KAAK,EAAE,CAAC;QACnB,CAAC;KACJ,CAAC;AACN,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createInspectApiServer, type InspectApiServer, type InspectApiServerOptions, } from './api-server.js';
+export { createStudio, type StartStudioOptions, type StudioProcess, startStudio, studioVersion } from './start.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../launcher/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,GAC/B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { createInspectApiServer, } from './api-server.js';
+export { createStudio, startStudio, studioVersion } from './start.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../launcher/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,GAGzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAA+C,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/start.d.ts

@@ -0,0 +1,25 @@
+import { type ChildProcess } from 'node:child_process';
+import { type InspectApiServer, type InspectApiServerOptions } from './api-server.js';
+export type StartStudioOptions = InspectApiServerOptions & {
+    /** Start VMZ watch serve for browser WebUI. Default true. */
+    webui?: boolean;
+    /** VMZ dev port; omit to auto-pick from 5173. */
+    webuiPort?: number;
+};
+export type StudioProcess = InspectApiServer & {
+    webui?: ChildProcess;
+    webuiUrl?: string;
+    closeAll: () => Promise<void>;
+};
+/**
+ * `dxo studio`: Rust inspect API + VMZ watch serve → open in browser.
+ * Desktop GUI is `dxo-studio.exe` (Tauri), not this path.
+ */
+export declare function startStudio(options?: StartStudioOptions): Promise<StudioProcess>;
+/** @deprecated Use {@link startStudio}. */
+export declare function createStudio(options?: StartStudioOptions): {
+    kind: 'launcher';
+    options: StartStudioOptions;
+};
+export declare function studioVersion(): string;
+//# sourceMappingURL=start.d.ts.map

package/dist/start.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"start.d.ts","sourceRoot":"","sources":["../launcher/start.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,oBAAoB,CAAC;AAI9D,OAAO,EAA0B,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE9G,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG;IACvD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG;IAC3C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACjC,CAAC;AA6BF;;;GAGG;AACH,wBAAsB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAAC,aAAa,CAAC,CA2B1F;AAED,2CAA2C;AAC3C,wBAAgB,YAAY,CAAC,OAAO,GAAE,kBAAuB,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,kBAAkB,CAAA;CAAE,CAEhH;AAED,wBAAgB,aAAa,IAAI,MAAM,CAEtC"}

package/dist/start.js

@@ -0,0 +1,65 @@
+import { spawn } from 'node:child_process';
+import { writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createInspectApiServer } from './api-server.js';
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+function spawnVmzDev(apiUrl, port) {
+    const env = {
+        ...process.env,
+        DXO_STUDIO_API: apiUrl,
+        ...(port ? { PORT: String(port), VMZ_PORT: String(port) } : {}),
+    };
+    const isWin = process.platform === 'win32';
+    const cmd = isWin ? 'pnpm.cmd' : 'pnpm';
+    const args = ['exec', 'vmz', 'dev', '.'];
+    if (port) {
+        args.push('--port', String(port));
+    }
+    return spawn(cmd, args, {
+        cwd: packageRoot,
+        env,
+        stdio: 'inherit',
+        shell: isWin,
+    });
+}
+async function writeStudioApiBootstrap(apiUrl) {
+    const out = path.join(packageRoot, 'public', 'dxo-studio-api.js');
+    await writeFile(out, `window.__DXO_STUDIO_API__=${JSON.stringify(apiUrl)};\n`, 'utf8');
+}
+/**
+ * `dxo studio`: Rust inspect API + VMZ watch serve → open in browser.
+ * Desktop GUI is `dxo-studio.exe` (Tauri), not this path.
+ */
+export async function startStudio(options = {}) {
+    const api = await createInspectApiServer({
+        host: options.host ?? '127.0.0.1',
+        port: options.port ?? 4310,
+        runsRoot: options.runsRoot,
+    });
+    const webuiEnabled = options.webui !== false;
+    let webui;
+    let webuiUrl;
+    if (webuiEnabled) {
+        await writeStudioApiBootstrap(api.url);
+        webui = spawnVmzDev(api.url, options.webuiPort);
+        webuiUrl = options.webuiPort
+            ? `http://127.0.0.1:${options.webuiPort}`
+            : 'http://127.0.0.1:5173 (VMZ default; check terminal if port differs)';
+    }
+    const closeAll = async () => {
+        if (webui && !webui.killed) {
+            webui.kill();
+        }
+        await api.close();
+    };
+    return { ...api, webui, webuiUrl, closeAll };
+}
+/** @deprecated Use {@link startStudio}. */
+export function createStudio(options = {}) {
+    return { kind: 'launcher', options };
+}
+export function studioVersion() {
+    return 'dxo-studio@0.1.0-preview';
+}
+//# sourceMappingURL=start.js.map

package/dist/start.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"start.js","sourceRoot":"","sources":["../launcher/start.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,10 +1,56 @@
 {
-  "name": "@dxo/studio",
-  "version": "0.0.0",
-  "description": "DXO placeholder — not for production use.",
-  "license": "MIT",
-  "private": false,
-  "files": [
-    "README.md"
-  ]
+    "name": "@dxo/studio",
+    "version": "0.0.10",
+    "type": "module",
+    "description": "DXO training workbench — VMZ WebUI + launcher; desktop GUI is dxo-studio.exe",
+    "license": "Apache-2.0",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src",
+        "public",
+        "designs",
+        "vmz.config.ts",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "build:ui": "vmz build --release --profile static .",
+        "dev": "vmz dev .",
+        "check": "vmz check ."
+    },
+    "dependencies": {
+        "@dxo/core": "0.0.10",
+        "@dxo/graph": "0.0.10",
+        "@dxo/inspect": "0.0.10",
+        "@vmz/core": "^0.1.12"
+    },
+    "keywords": [
+        "dxo",
+        "studio",
+        "tensorboard",
+        "vmz",
+        "tauri",
+        "typescript",
+        "deep-learning"
+    ],
+    "homepage": "https://github.com/ai4waifu/dxo-framework#readme",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ai4waifu/dxo-framework.git",
+        "directory": "projects/runtimes/dxo-studio"
+    },
+    "bugs": {
+        "url": "https://github.com/ai4waifu/dxo-framework/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
 }

package/public/dxo-studio-api.js

@@ -0,0 +1,2 @@
+// Overwritten by `dxo studio` / Tauri shell with the bound loopback API URL.
+window.__DXO_STUDIO_API__ = 'http://127.0.0.1:4310';

package/src/Application.vmz

@@ -0,0 +1,8 @@
+<template>
+  <script src="/dxo-studio-api.js"></script>
+  <slot />
+</template>
+
+<script client>
+export default class Application {}
+</script>

package/src/lib/api.ts

@@ -0,0 +1,32 @@
+/** Default Studio API base (loopback). Override with window.__DXO_STUDIO_API__. */
+export function studioApiBase(): string {
+    const w = globalThis as typeof globalThis & { __DXO_STUDIO_API__?: string };
+    if (typeof w.__DXO_STUDIO_API__ === 'string' && w.__DXO_STUDIO_API__.length > 0) {
+        return w.__DXO_STUDIO_API__.replace(/\/$/, '');
+    }
+    return 'http://127.0.0.1:4310';
+}
+
+export async function apiGet<T>(path: string): Promise<T> {
+    const url = `${studioApiBase()}${path.startsWith('/') ? path : `/${path}`}`;
+    const res = await fetch(url);
+    if (!res.ok) {
+        throw new Error(`Studio API ${res.status} for ${path}`);
+    }
+    return (await res.json()) as T;
+}
+
+/** Loopback URL for run artifact bytes (images, etc.). */
+export function fileUrl(runId: string, rel: string): string {
+    const encoded = rel.split('/').map(encodeURIComponent).join('/');
+    return `${studioApiBase()}/api/runs/${encodeURIComponent(runId)}/files/${encoded}`;
+}
+
+/** Default `@dxo/ui` model-app serve base for Playground. */
+export function modelAppBase(): string {
+    const w = globalThis as typeof globalThis & { __DXO_MODEL_APP__?: string };
+    if (typeof w.__DXO_MODEL_APP__ === 'string' && w.__DXO_MODEL_APP__.length > 0) {
+        return w.__DXO_MODEL_APP__.replace(/\/$/, '');
+    }
+    return 'http://127.0.0.1:7860';
+}

package/src/pages/compare.vmz

@@ -0,0 +1,117 @@
+<template>
+  <main class="studio">
+    <header class="studio__header">
+      <a class="studio__brand" href="/"><strong>DXO Studio</strong></a>
+      <nav class="studio__nav">
+        <a href="/">Runs</a>
+        <a href="/compare">Compare</a>
+        <a href="/playground">Playground</a>
+      </nav>
+    </header>
+
+    <section class="studio__panel">
+      <h1>Compare runs</h1>
+      <p class="studio__hint">Select two or more runs to overlay scalar metrics.</p>
+      <p class="studio__status">{status}</p>
+
+      <ul class="studio__list studio__pick-list">
+        <li each={runs} as="run" key={run.runId}>
+          <label>
+            <input type="checkbox" checked={isSelected(run.runId)} onChange={() => toggleRun(run.runId)} />
+            {runLabel(run)}
+            <span class="studio__badge">{run.meta.status}</span>
+          </label>
+        </li>
+      </ul>
+
+      <button class="studio__btn" onClick={loadCompare} disabled={selected.length < 2}>Compare</button>
+
+      <div class="studio__compare" if={compareRows.length > 0}>
+        <h2>Metric overlay</h2>
+        <table class="studio__table">
+          <thead>
+            <tr>
+              <th>run</th>
+              <th>metric</th>
+              <th>step</th>
+              <th>value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr each={compareRows} as="row" key={row.key}>
+              <td>{row.runLabel}</td>
+              <td>{row.name}</td>
+              <td>{row.step}</td>
+              <td>{row.value}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script client>
+import { apiGet } from '../lib/api.ts';
+
+export default class ComparePage {
+    status = 'loading…';
+    runs = [];
+    selected = [];
+    compareRows = [];
+
+    runLabel(run) {
+        return run.meta?.label ?? run.runId;
+    }
+
+    isSelected(runId) {
+        return this.selected.includes(runId);
+    }
+
+    toggleRun(runId) {
+        if (this.selected.includes(runId)) {
+            this.selected = this.selected.filter((id) => id !== runId);
+        } else {
+            this.selected = [...this.selected, runId];
+        }
+    }
+
+    async onMount() {
+        try {
+            const data = await apiGet('/api/runs');
+            this.runs = data.runs ?? [];
+            this.selected = this.runs.slice(0, Math.min(2, this.runs.length)).map((r) => r.runId);
+            this.status = `${this.runs.length} run(s) available`;
+        } catch (err) {
+            this.status = err instanceof Error ? err.message : String(err);
+        }
+    }
+
+    async loadCompare() {
+        if (this.selected.length < 2) return;
+        this.status = 'loading compare…';
+        try {
+            const q = encodeURIComponent(this.selected.join(','));
+            const data = await apiGet(`/api/compare?runs=${q}`);
+            const rows = [];
+            for (const s of data.series ?? []) {
+                const label = s.meta?.label ?? s.runId;
+                for (const m of s.metrics ?? []) {
+                    rows.push({
+                        key: `${s.runId}:${m.name}:${m.step}`,
+                        runLabel: label,
+                        name: m.name,
+                        step: m.step ?? '—',
+                        value: Number(m.value).toFixed(6),
+                    });
+                }
+            }
+            this.compareRows = rows;
+            this.status = rows.length ? `${rows.length} metric point(s)` : 'no metrics in selected runs';
+        } catch (err) {
+            this.status = err instanceof Error ? err.message : String(err);
+            this.compareRows = [];
+        }
+    }
+}
+</script>

package/src/pages/index.vmz

@@ -0,0 +1,60 @@
+<template>
+  <main class="studio">
+    <header class="studio__header">
+      <a class="studio__brand" href="/"><strong>DXO Studio</strong></a>
+      <nav class="studio__nav">
+        <a href="/">Runs</a>
+        <a href="/compare">Compare</a>
+        <a href="/playground">Playground</a>
+      </nav>
+    </header>
+
+    <section class="studio__panel">
+      <h1>Runs</h1>
+      <p class="studio__hint">Append-only inspect store — refresh reloads history after the trainer exits.</p>
+      <p class="studio__status">{status}</p>
+      <ul class="studio__list">
+        <li each={runs} as="run" key={run.runId}>
+          <a href={`/runs/${run.runId}`}>{runLabel(run)}</a>
+          <span class="studio__badge">{run.meta.status}</span>
+          <span class="studio__meta">{formatTime(run.meta.startedAtMs)}</span>
+        </li>
+      </ul>
+    </section>
+  </main>
+</template>
+
+<script client>
+import { apiGet } from '../lib/api.ts';
+
+export default class RunsPage {
+    status = 'loading…';
+    runs = [];
+
+    runLabel(run) {
+        return run.meta?.label ?? run.runId;
+    }
+
+    formatTime(ms) {
+        try {
+            return new Date(ms).toLocaleString();
+        } catch {
+            return String(ms);
+        }
+    }
+
+    async onMount() {
+        try {
+            const data = await apiGet('/api/runs');
+            this.runs = data.runs ?? [];
+            this.status =
+                this.runs.length === 0
+                    ? 'No runs yet. Train with inspect RunRecorder, then refresh.'
+                    : `${this.runs.length} run(s)`;
+        } catch (err) {
+            this.status = err instanceof Error ? err.message : String(err);
+            this.runs = [];
+        }
+    }
+}
+</script>

package/src/pages/playground.vmz

@@ -0,0 +1,91 @@
+<template>
+  <main class="studio">
+    <header class="studio__header">
+      <a class="studio__brand" href="/"><strong>DXO Studio</strong></a>
+      <nav class="studio__nav">
+        <a href="/">Runs</a>
+        <a href="/compare">Compare</a>
+        <a href="/playground">Playground</a>
+      </nav>
+    </header>
+
+    <section class="studio__panel studio__upload">
+      <h1>Image playground</h1>
+      <p class="studio__hint">
+        Upload an image to a loopback `@dxo/ui` model app (`defineModelApp`). Start serve separately on {appBase}.
+      </p>
+      <p class="studio__status">{status}</p>
+
+      <label class="studio__file">
+        <span>Image file</span>
+        <input type="file" accept="image/*" onChange={onFile} />
+      </label>
+
+      <button class="studio__btn" onClick={predict} disabled={!file}>Predict</button>
+      <button class="studio__btn studio__btn--ghost" onClick={cancel} disabled={!busy}>Cancel</button>
+
+      <div if={previewUrl} class="studio__preview">
+        <img src={previewUrl} alt="upload preview" />
+      </div>
+
+      <pre class="studio__pre" if={resultText}>{resultText}</pre>
+    </section>
+  </main>
+</template>
+
+<script client>
+import { modelAppBase } from '../lib/api.ts';
+
+export default class PlaygroundPage {
+    status = 'ready';
+    appBase = modelAppBase();
+    file = null;
+    previewUrl = '';
+    resultText = '';
+    busy = false;
+    #controller = null;
+
+    onFile(e) {
+        const input = e.target;
+        const f = input?.files?.[0];
+        this.file = f ?? null;
+        if (this.previewUrl) URL.revokeObjectURL(this.previewUrl);
+        this.previewUrl = f ? URL.createObjectURL(f) : '';
+        this.resultText = '';
+    }
+
+    async predict() {
+        if (!this.file) return;
+        this.#controller?.abort();
+        this.#controller = new AbortController();
+        this.busy = true;
+        this.status = 'predicting…';
+        this.resultText = '';
+        try {
+            const form = new FormData();
+            form.append('image', this.file);
+            const res = await fetch(`${this.appBase}/run`, {
+                method: 'POST',
+                body: form,
+                signal: this.#controller.signal,
+            });
+            if (!res.ok) throw new Error(`model app ${res.status}`);
+            const body = await res.json();
+            this.resultText = JSON.stringify(body, null, 2);
+            this.status = 'done';
+        } catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') {
+                this.status = 'cancelled';
+            } else {
+                this.status = err instanceof Error ? err.message : String(err);
+            }
+        } finally {
+            this.busy = false;
+        }
+    }
+
+    cancel() {
+        this.#controller?.abort();
+    }
+}
+</script>

package/src/pages/runs/[id].vmz

@@ -0,0 +1,295 @@
+<template>
+  <main class="studio">
+    <header class="studio__header">
+      <a class="studio__brand" href="/"><strong>DXO Studio</strong></a>
+      <nav class="studio__nav">
+        <a href="/">Runs</a>
+        <a href="/compare">Compare</a>
+        <a href="/playground">Playground</a>
+      </nav>
+    </header>
+
+    <section class="studio__panel">
+      <h1>Run {runId}</h1>
+      <p class="studio__status">{status}</p>
+
+      <h2>Metrics</h2>
+      <table class="studio__table">
+        <thead>
+          <tr><th>name</th><th>step</th><th>value</th></tr>
+        </thead>
+        <tbody>
+          <tr each={metrics} as="m" key={metricKey(m)}>
+            <td>{m.name}</td>
+            <td>{m.step ?? '—'}</td>
+            <td>{formatValue(m.value)}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h2>Confusion matrix</h2>
+      <p class="studio__hint" if={!hasMatrix}>No confusion-matrix artifact.</p>
+      <table class="studio__table studio__matrix" if={hasMatrix}>
+        <thead>
+          <tr>
+            <th></th>
+            <th each={matrixLabels} as="lbl" key={lbl}>{lbl}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr each={matrixRows} as="row" key={row.label}>
+            <th>{row.label}</th>
+            <td each={row.cells} as="cell" key={cell.key} class={cellClass(cell.value)}>{cell.value}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h2>Image samples</h2>
+      <p class="studio__hint" if={samples.length === 0}>No image-samples artifact.</p>
+      <ul class="studio__samples" if={samples.length > 0}>
+        <li each={samples} as="s" key={s.uri}>
+          <img src={s.src} alt={s.caption} />
+          <span class="studio__meta">{s.caption}</span>
+        </li>
+      </ul>
+
+      <h2>Training events</h2>
+      <ul class="studio__list studio__list--compact">
+        <li each={trainEvents} as="e" key={eventKey(e)}><code>{e.type}</code> {summarize(e)}</li>
+      </ul>
+
+      <h2>Checkpoints</h2>
+      <ul class="studio__list">
+        <li each={checkpoints} as="c" key={c.uri}><code>{c.name}</code> · {c.uri}</li>
+      </ul>
+
+      <h2>Models</h2>
+      <p class="studio__hint">Module · Execution · Kernel are separate views — never one merged architecture diagram.</p>
+      <div class="studio__tabs">
+        <button class={tabClass('module')} onClick={() => selectGraphTab('module')}>Module</button>
+        <button class={tabClass('execution')} onClick={() => selectGraphTab('execution')}>Execution</button>
+        <button class={tabClass('kernel')} onClick={() => selectGraphTab('kernel')}>Kernel</button>
+      </div>
+      <p class="studio__meta" if={graphAvailability}>{graphAvailability}</p>
+      <pre class="studio__pre">{graphText}</pre>
+
+      <h2>Profiler</h2>
+      <p class="studio__hint" if={!hasProfile}>{profileHint}</p>
+      <ul class="studio__list studio__list--compact" if={hasProfile}>
+        <li each={profileSpans} as="s" key={spanKey(s)}>
+          <code>{s.category}</code> {s.name} · {s.startMs}–{s.endMs} ms
+        </li>
+      </ul>
+    </section>
+  </main>
+</template>
+
+<script client>
+import { apiGet, fileUrl } from '../../lib/api.ts';
+
+export default class RunDetailPage {
+    runId = '';
+    status = 'loading…';
+    metrics = [];
+    trainEvents = [];
+    checkpoints = [];
+    graphTab = 'module';
+    graphBundle = null;
+    graphText = '(none)';
+    graphAvailability = '';
+    hasMatrix = false;
+    matrixLabels = [];
+    matrixRows = [];
+    samples = [];
+    hasProfile = false;
+    profileHint = 'No profile-trace artifact (Titan spans required; timeline is never fabricated).';
+    profileSpans = [];
+
+    metricKey(m) {
+        return `${m.name}:${m.step ?? ''}:${m.wallTimeMs ?? ''}`;
+    }
+
+    eventKey(e) {
+        return `${e.type}:${e.wallTimeMs ?? ''}:${e.step ?? ''}:${e.epoch ?? ''}`;
+    }
+
+    spanKey(s) {
+        return `${s.category}:${s.name}:${s.startMs}:${s.endMs}`;
+    }
+
+    tabClass(tab) {
+        return this.graphTab === tab ? 'studio__tab studio__tab--active' : 'studio__tab';
+    }
+
+    selectGraphTab(tab) {
+        this.graphTab = tab;
+        this.renderGraphTab();
+    }
+
+    renderGraphTab() {
+        const bundle = this.graphBundle;
+        if (!bundle) {
+            this.graphText = '(no model-graph artifact)';
+            this.graphAvailability = '';
+            return;
+        }
+        const g = bundle[this.graphTab] ?? bundle.module;
+        const avail = g.availability === 'unavailable'
+            ? `unavailable: ${g.unavailableReason ?? 'n/a'}`
+            : `view=${g.view} · nodes=${(g.nodes ?? []).length}`;
+        this.graphAvailability = avail;
+        this.graphText = JSON.stringify(g, null, 2);
+    }
+
+    formatValue(v) {
+        return Number(v).toFixed(6);
+    }
+
+    cellClass(v) {
+        const n = Number(v);
+        if (n >= 5) return 'studio__cell--hot';
+        if (n >= 2) return 'studio__cell--warm';
+        return '';
+    }
+
+    summarize(e) {
+        if (e.type === 'train/batch') return `epoch=${e.epoch} step=${e.step} loss=${e.loss}`;
+        if (e.type === 'train/epoch_end') return `epoch=${e.epoch} meanLoss=${e.meanLoss}`;
+        if (e.type === 'run/end') return `status=${e.status}`;
+        return '';
+    }
+
+    buildMatrix(data) {
+        const labels = data.labels ?? [];
+        const matrix = data.matrix ?? [];
+        this.matrixLabels = labels;
+        this.matrixRows = labels.map((label, i) => ({
+            label,
+            cells: (matrix[i] ?? []).map((value, j) => ({
+                key: `${i}:${j}`,
+                value,
+            })),
+        }));
+        this.hasMatrix = labels.length > 0;
+    }
+
+    buildSamples(data) {
+        const list = data.samples ?? [];
+        this.samples = list.map((s) => {
+            const parts = [];
+            if (s.label !== undefined) parts.push(`label=${s.label}`);
+            if (s.pred !== undefined) parts.push(`pred=${s.pred}`);
+            return {
+                uri: s.uri,
+                src: fileUrl(this.runId, s.uri),
+                caption: parts.join(' · ') || s.uri,
+            };
+        });
+    }
+
+    normalizeGraphArtifact(raw) {
+        if (!raw || typeof raw !== 'object') return null;
+        if (raw.format === 'dxo-model-graph-bundle') return raw;
+        if (raw.format === 'dxo-model-graph') {
+            const emptyExec = {
+                format: 'dxo-model-graph',
+                version: 0,
+                view: 'execution',
+                availability: 'unavailable',
+                unavailableReason: 'legacy module-only artifact',
+                nodes: [],
+                edges: [],
+            };
+            const emptyKernel = {
+                format: 'dxo-model-graph',
+                version: 0,
+                view: 'kernel',
+                availability: 'unavailable',
+                unavailableReason: 'legacy module-only artifact',
+                nodes: [],
+                edges: [],
+            };
+            return {
+                format: 'dxo-model-graph-bundle',
+                version: 0,
+                module: raw.view === 'module' ? raw : {
+                    format: 'dxo-model-graph',
+                    version: 0,
+                    view: 'module',
+                    availability: 'unavailable',
+                    unavailableReason: 'legacy artifact was not module view',
+                    nodes: [],
+                    edges: [],
+                },
+                execution: raw.view === 'execution' ? raw : emptyExec,
+                kernel: raw.view === 'kernel' ? raw : emptyKernel,
+            };
+        }
+        return null;
+    }
+
+    async onMount() {
+        const parts = location.pathname.split('/').filter(Boolean);
+        this.runId = parts[1] ?? '';
+        if (!this.runId) {
+            this.status = 'missing run id';
+            return;
+        }
+        try {
+            const [metaRes, metricsRes, eventsRes, ckRes] = await Promise.all([
+                apiGet(`/api/runs/${encodeURIComponent(this.runId)}/meta`),
+                apiGet(`/api/runs/${encodeURIComponent(this.runId)}/metrics`),
+                apiGet(`/api/runs/${encodeURIComponent(this.runId)}/events`),
+                apiGet(`/api/runs/${encodeURIComponent(this.runId)}/checkpoints`),
+            ]);
+            this.status = metaRes.meta?.status ?? 'unknown';
+            this.metrics = metricsRes.metrics ?? [];
+            this.trainEvents = (eventsRes.events ?? []).filter(
+                (e) => String(e.type).startsWith('train/') || e.type === 'run/start' || e.type === 'run/end',
+            );
+            this.checkpoints = ckRes.checkpoints ?? [];
+            try {
+                const g = await apiGet(`/api/runs/${encodeURIComponent(this.runId)}/model-graph`);
+                this.graphBundle = this.normalizeGraphArtifact(g.graph ?? g);
+                this.renderGraphTab();
+            } catch {
+                this.graphBundle = null;
+                this.renderGraphTab();
+            }
+            try {
+                const cm = await apiGet(`/api/runs/${encodeURIComponent(this.runId)}/confusion-matrix`);
+                this.buildMatrix(cm.confusionMatrix ?? cm);
+            } catch {
+                this.hasMatrix = false;
+            }
+            try {
+                const imgs = await apiGet(`/api/runs/${encodeURIComponent(this.runId)}/image-samples`);
+                this.buildSamples(imgs.imageSamples ?? imgs);
+            } catch {
+                this.samples = [];
+            }
+            try {
+                const pr = await apiGet(`/api/runs/${encodeURIComponent(this.runId)}/profile-trace`);
+                const trace = pr.profileTrace ?? pr.trace ?? pr;
+                const spans = (trace.spans ?? []).filter(
+                    (s) => s && (s.category === 'kernel' || s.category === 'transfer' || s.category === 'readback' || s.category === 'op'),
+                );
+                if (trace.availability === 'unavailable' || spans.length === 0) {
+                    this.hasProfile = false;
+                    this.profileHint = trace.unavailableReason
+                        ?? 'ProfileTrace unavailable (no Titan spans; timeline not fabricated).';
+                    this.profileSpans = [];
+                } else {
+                    this.hasProfile = true;
+                    this.profileSpans = spans;
+                }
+            } catch {
+                this.hasProfile = false;
+                this.profileHint = 'No profile-trace artifact (Titan spans required; timeline is never fabricated).';
+            }
+        } catch (err) {
+            this.status = err instanceof Error ? err.message : String(err);
+        }
+    }
+}
+</script>

package/vmz.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@vmz/vmz';
+
+/** Studio WebUI — VMZ dev watch (`dxo studio`) + static build for Tauri embed. */
+export default defineConfig({
+    delivery: {
+        default: 'node',
+        profiles: {
+            node: { host: 'node', assembly: 'node-ssr' },
+            static: { host: 'browser', assembly: 'static-cdn' },
+        },
+    },
+});