wao 0.41.3 → 0.41.5

package/src/workspace/CLAUDE.md

@@ -0,0 +1,258 @@
+# WAO App
+
+This is a WAO application — a decentralized app built on AOS (ao Standard) and HyperBEAM.
+
+See @package.json for available commands.
+
+## Auto-Start
+
+On session start, the SessionStart hook checks for `tasks.json` and `plan.md`:
+- **If they exist**: Resume the build — read `tasks.json`, find the first pending/in_progress task, and continue the `/build` workflow automatically. Read `.claude/skills/build/SKILL.md` and follow its resume instructions.
+- **If they don't exist**: Wait for the user to run `/build <feature>` to start a new build.
+
+## Stack
+
+- **AOS scripts** in `src/` — Lua process logic
+- **Custom modules** in `custom-lua/` or `custom-wasm/` — standalone Lua or WASM64 (Rust) execution modules
+- **JS tests** in `test/` — Node.js built-in test runner with `wao/test`
+- **Deploy script** in `scripts/deploy.js` — deploys Lua source to testnet, local HB, or remote HB
+- **HyperBEAM** — local HyperBEAM node (path configured in `.env.hyperbeam` CWD)
+- **Frontend** in `frontend/` — Vite + React SPA with `wao/web` (optional)
+
+## Two Ways to Test AOS
+
+### In-Memory AOS (legacynet units)
+Runs AOS WASM directly in Node.js. No server, no Erlang. Instant. Use for fast unit testing of AOS script logic.
+
+```js
+import { AO, acc } from "wao/test"
+const ao = await new AO().init(acc[0])
+const { p } = await ao.deploy({ src_data })
+```
+
+### HyperBEAM AOS
+Spawns a real Erlang HyperBEAM node. AOS processes run on the HyperBEAM stack via `genesis-wasm` device. Messages go through HTTP with slot-based scheduling. Use for integration testing the full production stack.
+
+```js
+import { HyperBEAM } from "wao/test"
+const hbeam = await new HyperBEAM({ reset: true }).ready()
+const hb = hbeam.hb  // HB HTTP client
+```
+
+You can also run AOS through HyperBEAM by passing `hb` to AO:
+```js
+import { AO } from "wao"
+const ao = await new AO({ hb: hbeam.url }).init(jwk)
+```
+
+## Persistent Workflow
+
+The build workflow is file-based so any session can pick up where another left off:
+
+- **`plan.md`** — feature plan with AOS scripts, edge cases, test scenarios, validation gates
+- **`tasks.json`** — ordered task list with status, files, details, and done criteria
+
+On session start, check if `plan.md` and `tasks.json` exist. If they do, read them and continue from the first pending task. Update task status as you work.
+
+## Validation Gates
+
+All gates must pass before completing a task:
+
+1. **Unit tests** — `yarn test` — in-memory AOS using mainnet WASM device (sub-second)
+2. **HyperBEAM integration** — `yarn test test/hyperbeam.test.js` — full Erlang stack (skip if no HyperBEAM)
+3. **Frontend tests** — `cd frontend && npm run test:unit` — vitest components (skip if no frontend)
+
+The `TaskCompleted` hook enforces these gates automatically. Use `/validate` to run them manually.
+
+## Dashboard
+
+Real-time build progress dashboard with SSE updates.
+
+```bash
+yarn start          # API server (:3333) + Vite dev server (:5174)
+yarn start:api      # API server only (:3333)
+```
+
+- **API**: `http://localhost:3333` — serves `/api/progress` (JSON) and `/api/events` (SSE)
+- **UI**: `http://localhost:5174` — Vite dev server with proxy to API
+- **MCP**: `get_progress` and `open_dashboard` tools via @.mcp.json (auto-discovered by Claude Code)
+
+The API server watches `tasks.json` and `plan.md` and pushes changes to connected dashboards via SSE. The dashboard falls back to 3s polling if SSE is unavailable.
+
+## Commands
+
+```bash
+yarn start                        # dashboard (API + Vite)
+yarn test                         # all unit tests
+yarn test test/aos.test.js        # in-memory AOS (fast)
+yarn test test/hyperbeam.test.js  # HyperBEAM integration
+cd frontend && npm run test:unit  # frontend vitest
+cd frontend && npm run test:e2e   # frontend Playwright
+yarn deploy src/<name>.lua              # testnet (default)
+yarn deploy --local-hb                   # local HyperBEAM (genesis-wasm)
+yarn deploy --local-hb --lua             # local HyperBEAM (Lua mode)
+yarn deploy --mainnet                    # remote HyperBEAM (push-1)
+yarn deploy --mainnet --lua              # remote HyperBEAM (Lua mode)
+```
+
+Runs: `node --test --test-concurrency=1` (Node 24+; on Node 22 prefix with `--experimental-wasm-memory64`)
+
+## Deployment Targets
+
+| Target | Command | Config |
+|--------|---------|--------|
+| AO Testnet | `yarn deploy` | `new AO().init(jwk)` via aoconnect |
+| Local HB (Legacynet) | `yarn deploy --local-hb` | `new AO({ hb: "http://localhost:10001" }).init(jwk)` |
+| Local HB (Lua) | `yarn deploy --local-hb --lua` | `new AO({ hb: url, mode: "lua" }).init(jwk)` |
+| Remote HB (Production) | `yarn deploy --mainnet` | `new AO({ hb: "https://push-1.forward.computer" }).init(jwk)` |
+
+- **Remote nodes**: Use `push-1` through `push-10` for full compute. `push.forward.computer` is push-only (no compute).
+- **Lua mode**: Faster but no `receive()` — use `msg.reply()` pattern instead.
+- **Wallet**: Run `yarn keygen` to generate `.wallet.json`.
+- **HyperBEAM fork**: `git clone -b wao-final https://github.com/weavedb/HyperBEAM.git`
+
+### Frontend Commands
+
+```bash
+cd frontend && npm run dev         # Vite dev server (port 5173)
+cd frontend && npm run test:unit   # vitest component tests
+cd frontend && npm run test:e2e    # Playwright E2E tests
+cd frontend && npm run build       # production build
+```
+
+## Key Imports
+
+### Testing (`wao/test`)
+```js
+import { AO, acc } from "wao/test"           // in-memory AOS
+import { HB, HyperBEAM, acc } from "wao/test" // HyperBEAM
+```
+
+### Production (`wao`)
+```js
+import { AO, AR, GQL, HB } from "wao"
+```
+
+### Browser (`wao/web`)
+```js
+import { AO, AR } from "wao/web"  // browser only — NOT wao/test
+```
+
+Use `wao/web` for frontend code. Use `wao/test` for Node.js tests only.
+
+## Wallet
+
+Admin wallet auto-generated at `.wallet.json` (gitignored). This is an Arweave JWK used for deploy and HyperBEAM signing.
+
+## HyperBEAM
+
+- Default port: **10001**
+- Local node path: configured via `CWD` in `.env.hyperbeam`
+- `HyperBEAM` class manages the Erlang server lifecycle
+- `HB` class is the HTTP client that talks to it
+
+## Reference Docs
+
+Read these on-demand when building features — they contain complete API references. Don't load all at once; read the one relevant to your current task:
+
+| When you're... | Read this |
+|----------------|-----------|
+| Writing JS code (tests, deploy) | `docs/wao-sdk.md` — AO, HB, AR, GQL, Process handle APIs |
+| Writing AOS scripts | `docs/aos-lua.md` — msg object, ao globals, patterns, blueprints |
+| Building custom Lua modules | `docs/docs/pages/tutorials/custom-lua.mdx` — lua@5.3a device, compute function |
+| Building custom WASM64 modules | `docs/docs/pages/tutorials/rust-wasm64.mdx` — wasm-64@1.0 device, Rust no_std |
+| Working with HyperBEAM | `docs/hyperbeam-devices.md` — device catalog, endpoints, config |
+| Building Erlang devices | `docs/hyperbeam-dev.md` — device protocol, templates, state |
+| Debugging issues | `docs/debug.md` — known issues, error table, fixes |
+| Building frontend | `docs/wao-sdk.md` (browser section) — wao/web, ArConnect |
+
+## Agent Teams
+
+For complex tasks that benefit from parallel work, create an agent team. Teammates run as separate Claude Code sessions with their own context windows, coordinating through a shared task list.
+
+**When to use teams** (instead of working solo or using subagents):
+- Building multiple independent features in parallel (each teammate owns separate files)
+- Research + build: one teammate researches patterns in docs/, another implements
+- Debug with competing hypotheses: teammates test different theories simultaneously
+- Cross-layer work: one teammate on AOS scripts, one on JS tests, one on Erlang devices
+
+**When NOT to use teams:**
+- Sequential tasks or same-file edits (coordination overhead > benefit)
+- Simple features that one session can handle
+- Quick fixes or single-script changes (use subagents instead)
+
+**Team patterns for WAO:**
+```
+# Parallel feature development
+Create a team: one teammate builds the AOS script in src/,
+another writes tests in test/, a third handles deployment config.
+
+# Research and build
+Create a team: one teammate researches the AOS patterns in docs/aos-lua.md,
+another implements the AOS script based on findings.
+
+# Debug investigation
+Create a team with 3 teammates to investigate the timeout from different angles:
+port conflicts, WASM memory, and HyperBEAM configuration.
+```
+
+Use `/team` to set up common team configurations.
+
+## Skills
+
+Slash commands in `.claude/skills/`:
+
+### Build workflow
+- `/build` — full build workflow (plan -> build -> test -> validate -> README). Orchestrates all steps, manages tasks.json throughout. Supports resume — picks up from `current_step` if interrupted.
+- `/plan` — plan a feature (writes plan.md + tasks.json for persistent workflow)
+- `/validate` — post-build validation (tests, Lua pitfalls, coverage)
+- `/readme` — generate comprehensive README.md from plan, code, and tests
+
+### Build steps (called by `/build` or standalone)
+- `/build-aos` — build AOS scripts + in-memory tests, iterate until 100% pass
+- `/build-module` — build custom WASM64 (Rust) or standalone Lua modules + HyperBEAM integration tests
+- `/build-device` — build Erlang device + eunit tests, iterate until 100% pass
+- `/build-frontend` — build Vite components + vitest tests, iterate until 100% pass
+
+### Test steps (called by `/build` or standalone)
+- `/test` — run in-memory AOS tests
+- `/test-hb` — run HyperBEAM integration tests
+- `/test-device` — WAO SDK integration tests for Erlang devices
+- `/test-e2e` — Playwright E2E with live HyperBEAM backend
+
+### Other
+- `/report` — show progress on the current plan (task status, test results)
+- `/deploy` — deploy Lua source to testnet, local HB, or remote HB (with pre-deploy validation)
+- `/create-aos` — scaffold new AOS script + test
+- `/create-module` — scaffold new custom module (WASM64 or Lua) + test
+- `/create-device` — scaffold new HyperBEAM device + test
+- `/debug` — troubleshoot issues
+- `/team` — set up an agent team for parallel development
+- `/dev` — start Vite dev server for frontend
+
+## Subagents
+
+Specialized agents in `.claude/agents/`:
+- `builder` — general-purpose feature builder (Lua + tests + iterate)
+- `tester` — test specialist (failures, debugging, verification)
+- `device-builder` — Erlang device specialist (protocol, compilation, eunit)
+
+## Rules
+
+Path-specific rules in `.claude/rules/` auto-inject when editing matching files:
+- `lua.md` — AOS script patterns (triggers on `src/**/*.lua`)
+- `testing.md` — test patterns (triggers on `test/**/*.js`)
+- `hyperbeam.md` — HyperBEAM device patterns (triggers on `HyperBEAM/**/*.erl`)
+- `deploy.md` — deployment conventions (triggers on `scripts/**/*.js`)
+- `frontend.md` — Frontend patterns (triggers on `frontend/**/*.{jsx,tsx,js}`)
+
+## Personal Preferences
+
+Create `CLAUDE.local.md` for personal project-specific preferences (auto-gitignored):
+- Your sandbox URLs
+- Your preferred test files
+- Local HyperBEAM overrides
+
+## Auto Memory
+
+Claude automatically saves useful learnings as you work (build patterns, debug insights, architecture notes) to `~/.claude/projects/<project>/memory/MEMORY.md` (per-machine, not committed). Use `/memory` to view and edit saved memories.

package/src/workspace/README.md

@@ -0,0 +1,85 @@
+
+#### 1. Create an APP
+
+```bash
+npx wao create myapp && cd myapp
+```
+
+#### 2. Run WAO Proxy
+
+```bash
+npx wao proxy
+```
+
+#### 3. Connect the Browser to the Proxy
+
+Go to [the web app](https://preview.wao.eco) and open `Networks`, then click `Proxy`.
+
+#### 4. Run Test
+
+```bash
+yarn test test/hyperbeam.test.js
+```
+
+#### 5. Deploy
+
+```bash
+# AO testnet (default)
+yarn deploy src/counter.lua
+
+# Local HyperBEAM (genesis-wasm)
+yarn deploy --local-hb src/counter.lua
+
+# Remote HyperBEAM (production)
+yarn deploy --mainnet src/counter.lua
+
+# Lua mode (any target)
+yarn deploy --local-hb --lua src/counter.lua
+```
+
+---
+
+### Deployment Guide
+
+| Target | Command | Config |
+|--------|---------|--------|
+| AO Testnet | `yarn deploy` | `new AO().init(jwk)` |
+| Local HB (Legacynet) | `yarn deploy --local-hb` | `new AO({ hb: "http://localhost:10001" }).init(jwk)` |
+| Local HB (Lua) | `yarn deploy --local-hb --lua` | `new AO({ hb: url, mode: "lua" }).init(jwk)` |
+| Remote HB | `yarn deploy --mainnet` | `new AO({ hb: "https://push-1.forward.computer" }).init(jwk)` |
+
+**Wallet**: Run `yarn keygen` to generate `.wallet.json` (gitignored).
+
+**Remote nodes**: Use `push-1` through `push-10` for full compute. `push.forward.computer` is push-only (no compute).
+
+**HyperBEAM fork**: `git clone -b wao-final https://github.com/weavedb/HyperBEAM.git && cd HyperBEAM && rebar3 compile`
+
+---
+
+### Vibe Engineering
+
+This project includes a Claude Code toolchain for agent-assisted development.
+
+- **`CLAUDE.md`** — project context loaded automatically by the agent
+- **`docs/`** — full API references read on-demand:
+  - `wao-sdk.md` — WAO SDK API (AO, HB, AR, GQL, all methods)
+  - `aos-lua.md` — AOS scripts (msg, ao globals, blueprints)
+  - `hyperbeam-devices.md` — HyperBEAM device catalog (endpoints, config)
+  - `hyperbeam-dev.md` — Building custom devices (Erlang protocol, templates)
+  - `debug.md` — Troubleshooting guide (known issues, fixes)
+- **`.claude/rules/`** — stack-specific rules auto-apply when editing:
+  - `lua.md` for AOS script files in `src/`
+  - `testing.md` for test patterns in `test/`
+  - `hyperbeam.md` for Erlang device files in `HyperBEAM/`
+  - `deploy.md` for deploy scripts in `scripts/`
+- **Slash commands:**
+  - `/test` — in-memory AOS tests (fast unit tests)
+  - `/test-hb` — HyperBEAM integration tests (full stack)
+  - `/deploy` — deploy to testnet, local HB, or remote HB
+  - `/create-aos` — scaffold a new AOS script + test file
+  - `/create-device` — scaffold a HyperBEAM Erlang device + test
+  - `/debug` — troubleshoot issues (ports, processes, errors)
+- **Agents** in `.claude/agents/`:
+  - `builder.md` — builds features end-to-end (Lua + tests + iterate)
+  - `tester.md` — runs tests and fixes failures
+  - `device-builder.md` — builds HyperBEAM Erlang devices

package/src/workspace/dashboard/index.html

@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HyperADD Dashboard</title>
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/css@21/dist/primer.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css" id="hljs-light">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css" id="hljs-dark" disabled>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/erlang.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/lua.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/rust.min.js"></script>
+    <style>
+      /* Only custom CSS for things Primer doesn't provide */
+      @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
+      .anim-spin { animation: spin 1s linear infinite; }
+      .anim-spin-slow { animation: spin 1.5s linear infinite; }
+      [data-color-mode="dark"] .logo-invert { filter: invert(1); }
+
+      /* Dark toggle — GitHub-style icon button */
+      .dark-toggle {
+        display: flex; align-items: center; justify-content: center;
+        width: 32px; height: 32px; border-radius: 6px;
+        border: 1px solid var(--color-border-default, #d0d7de);
+        background: var(--color-canvas-default, #fff); cursor: pointer;
+        color: var(--color-fg-muted, #656d76);
+        transition: background 0.15s, border-color 0.15s; appearance: none; padding: 0;
+      }
+      .dark-toggle:hover { background-color: var(--color-canvas-subtle, #f6f8fa); color: var(--color-fg-default); border-color: var(--color-border-default, #d0d7de); }
+      .dark-toggle:focus { outline: 2px solid var(--color-accent-fg); outline-offset: -2px; }
+      /* Override Primer Header to match modern GitHub (light gray, not black) */
+      .Header { background-color: var(--color-canvas-subtle, #f6f8fa) !important; color: var(--color-fg-default) !important; border-bottom: 1px solid var(--color-border-muted, #d0d7de); }
+      .Header .Header-link { color: var(--color-fg-default) !important; }
+      [data-color-mode="dark"] .Header { background-color: var(--color-canvas-subtle, #161b22) !important; border-bottom-color: var(--color-border-default, #30363d); }
+      /* Dark toggle inside Header */
+      .Header .dark-toggle { background: transparent; border-color: var(--color-border-default, #d0d7de); }
+      .Header .dark-toggle:hover { background-color: var(--color-neutral-muted); }
+
+      /* UnderlineNav button — Primer needs this for <button> elements */
+      button.UnderlineNav-item {
+        background: transparent; border: 0;
+        border-bottom: 2px solid transparent; border-radius: 0;
+        appearance: none; cursor: pointer;
+        padding: 8px 16px; font-size: 14px; line-height: 30px;
+        color: var(--color-fg-default);
+        margin-bottom: -1px;
+      }
+      button.UnderlineNav-item:hover {
+        border-bottom-color: var(--color-neutral-muted);
+        text-decoration: none;
+      }
+      button.UnderlineNav-item[aria-selected="true"] {
+        font-weight: 600;
+        border-bottom-color: var(--color-accent-fg);
+        color: var(--color-fg-default);
+      }
+
+      /* Progress bar override — ensure correct height and color */
+      .Progress { height: 8px; }
+      .Progress-item { background-color: var(--color-success-emphasis, #1f883d) !important; }
+
+      /* Status icon circles */
+      .icon-circle { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+      .icon-circle-success { background-color: var(--color-success-emphasis, #1f883d); }
+      .icon-circle-attention { background-color: var(--color-attention-emphasis, #bf8700); }
+      .icon-circle-empty { border: 2px solid var(--color-border-default, #d0d7de); }
+
+      /* Clickable file rows */
+      .file-row { cursor: pointer; transition: background 0.1s; }
+      .file-row:hover { background-color: var(--color-neutral-subtle) !important; }
+
+      /* Code viewer — GitHub blob-style */
+      .code-view { overflow-x: auto; }
+      .code-view table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 20px; tab-size: 4; }
+      .code-view td { padding: 0; vertical-align: top; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
+      .code-view .ln { width: 1px; min-width: 50px; padding: 0 10px; text-align: right; user-select: none; white-space: nowrap; color: var(--color-fg-subtle); }
+      .code-view .lc { padding: 0 16px 0 10px; white-space: pre; }
+      .code-view tr:hover { background: var(--color-neutral-subtle); }
+      .code-view .hljs { background: transparent !important; }
+
+      /* Back button */
+      .back-btn {
+        display: inline-flex; align-items: center; gap: 4px;
+        padding: 4px 12px 4px 8px; border: 1px solid var(--color-border-default);
+        border-radius: 6px; background: transparent; cursor: pointer;
+        font-size: 12px; color: var(--color-fg-muted); font-family: inherit;
+      }
+      .back-btn:hover { background: var(--color-neutral-subtle); color: var(--color-fg-default); }
+
+      /* Skill badge — Primer Label doesn't have filled-color style */
+      .skill-badge {
+        display: inline-block; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 18px;
+        border-radius: 4px; color: #fff; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      }
+
+      /* Markdown body — explicit light/dark overrides (github-markdown-css ignores data-color-mode) */
+      .markdown-body { background-color: transparent !important; color: inherit !important; }
+      .markdown-body pre { background-color: #f6f8fa !important; }
+      .markdown-body code { background-color: rgba(175,184,193,0.2) !important; }
+      .markdown-body pre code { background-color: transparent !important; }
+      .markdown-body table { border-color: #d0d7de !important; }
+      .markdown-body table th, .markdown-body table td { border-color: #d0d7de !important; }
+      .markdown-body table tr { background-color: transparent !important; }
+      .markdown-body table tr:nth-child(2n) { background-color: #f6f8fa !important; }
+      .markdown-body hr { background-color: #d0d7de !important; }
+      [data-color-mode="dark"] .markdown-body pre { background-color: #161b22 !important; }
+      [data-color-mode="dark"] .markdown-body code { background-color: rgba(110,118,129,0.4) !important; }
+      [data-color-mode="dark"] .markdown-body pre code { background-color: transparent !important; }
+      [data-color-mode="dark"] .markdown-body table { border-color: #30363d !important; }
+      [data-color-mode="dark"] .markdown-body table th, [data-color-mode="dark"] .markdown-body table td { border-color: #30363d !important; }
+      [data-color-mode="dark"] .markdown-body table tr:nth-child(2n) { background-color: #161b22 !important; }
+      [data-color-mode="dark"] .markdown-body hr { background-color: #30363d !important; }
+
+      /* Compact markdown */
+      .markdown-compact { font-size: 14px; }
+      .markdown-compact h1 { font-size: 20px; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-muted); }
+      .markdown-compact h2 { font-size: 16px; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--color-border-muted); }
+      .markdown-compact h3 { font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
+      .markdown-compact p { margin: 4px 0; }
+      .markdown-compact li { margin: 2px 0; }
+      .markdown-compact pre {
+        margin: 8px 0; padding: 16px; font-size: 12px; line-height: 1.45;
+        overflow: auto; border-radius: 6px;
+        background-color: #f6f8fa !important;
+      }
+      [data-color-mode="dark"] .markdown-compact pre { background-color: #161b22 !important; }
+      .markdown-compact code {
+        font-size: 85%; padding: 0.2em 0.4em; border-radius: 6px;
+        background-color: rgba(175,184,193,0.2);
+      }
+      [data-color-mode="dark"] .markdown-compact code { background-color: rgba(110,118,129,0.4); }
+      .markdown-compact pre code {
+        padding: 0; background: none !important; font-size: 100%;
+        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      }
+      .markdown-compact .hljs,
+      .markdown-compact pre code.hljs { background: transparent !important; }
+      .markdown-compact ul, .markdown-compact ol { padding-left: 24px; margin: 4px 0; }
+
+      /* Code block copy button */
+      .code-block-wrap { position: relative; }
+      .code-copy-btn {
+        position: absolute; top: 8px; right: 8px; z-index: 1;
+        display: flex; align-items: center; justify-content: center;
+        width: 32px; height: 32px; border-radius: 6px;
+        border: 1px solid var(--color-border-default, #d0d7de);
+        background: var(--color-canvas-default, #fff); color: var(--color-fg-muted, #656d76);
+        cursor: pointer; opacity: 0; transition: opacity 0.15s;
+      }
+      .code-block-wrap:hover .code-copy-btn { opacity: 1; }
+      .code-copy-btn:hover { background: var(--color-canvas-subtle, #f6f8fa); color: var(--color-fg-default, #1f2328); }
+      [data-color-mode="dark"] .code-copy-btn { background: #161b22; border-color: #30363d; color: #8b949e; }
+      [data-color-mode="dark"] .code-copy-btn:hover { background: #30363d; color: #e6edf3; }
+    </style>
+  </head>
+  <body class="color-bg-default color-fg-default">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/src/workspace/dashboard/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "wao-dashboard",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0"
+  }
+}