modelroom 0.0.5 → 0.1.0

package/docs/04-agents.md

@@ -38,11 +38,26 @@ Two things are worth knowing, both learned the hard way:
   environment, which is what makes provider keys visible to it. If your shared service already
   has keys, either setting works.
 
+### What the chat shows
+
+modelroom runs the agent, but it does not read the *turn* out of the CLI's prose. While the
+process is alive, opencode's session already describes that turn — the text, the reasoning, one
+entry per tool call, and the patch an edit wrote — and modelroom follows that instead. So a tool
+call is a row you can open, an edit shows its diff, reasoning folds away, and the CLI's own
+output stays in the run log. It is the same session the panel reads, asked about once a second.
+
+If the session cannot be reached, or the adapter has no such place to look, the chat is exactly
+what the process printed. That is the `command` adapter, and it is why `structured` exists.
+
+The agent runs with its working directory set to `cfg.rootDir` — for a new
+install, `modelroom/`. That is where it reads `AGENTS.md`, and it is the whole
+tree modelroom will serve under `/files/...`.
+
 Agents that need to *write* only the room's files should be scoped on their side, for example
 with OpenCode `permissions`:
 
 ```yaml
-# .opencode/agents/design.md
+# modelroom/.opencode/agents/design.md
 permissions:
   - { action: "*", resource: "*", effect: deny }
   - { action: read, resource: "rooms/*", effect: allow }
@@ -63,7 +78,11 @@ For anything else — Claude Code, Codex, a local model, a shell script:
 ```
 
 `{session}` is substituted with the room's session id. Sessions are stored per room in
-`.modelroom/state.json`; **new session** in the room UI starts a fresh one.
+`.modelroom/state.json` at the project root; **new session** in the room UI starts a fresh one.
+
+The generated `AGENTS.md` tells the agent which language to write the room's prose in, and
+that frontmatter keys and promise ids stay in English. Change `lang` in `modelroom.json`
+to change that language for new rooms and for the UI; existing documents are not rewritten.
 
 ## Writing an adapter
 
@@ -72,6 +91,7 @@ An adapter is one object:
 ```js
 export const mine = {
   name: 'mine',
+  structured: false, // true only if the turn can be read while it still runs
   newSessionId: () => `ses_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`,
   run({ cfg, cwd, prompt, sessionId, onChunk, onExit }) {
     // spawn your CLI; stream output with onChunk('stdout'|'stderr', text)
@@ -80,9 +100,13 @@ export const mine = {
 };
 ```
 
-Add it to `lib/agents/index.mjs`. Two rules keep adapters honest:
+Add it to `lib/agents/index.ts`. Three rules keep adapters honest:
 
 1. **Close stdin** (`stdio: ['ignore', 'pipe', 'pipe']`). A CLI that reads stdin will hang
    forever if the pipe stays open.
 2. **Do not parse the output into meaning.** modelroom shows the agent's words as they are.
    Interpretation belongs to the person reading the room.
+3. **`structured: true` is a claim that the turn can be read while the run is in progress** —
+   that the agent keeps it somewhere modelroom can ask for it. Only one adapter makes that
+   claim today, and the reading lives in `lib/opencode.ts` (`sessionParts`). If the claim is
+   wrong, the agent's *prose* lands in the chat and nothing else breaks.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modelroom",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "A local workspace to design UI screens with any coding agent — one room per screen: BRIEF, SPEC, BEHAVIOUR and the artifact.",
   "keywords": [
     "agent-agnostic",
@@ -53,9 +53,9 @@
     "build": "npm run build:server && npm run build:web && npm run build:css",
     "build:server": "tsc -p tsconfig.build.json",
     "build:web": "node scripts/build-web.mjs",
-    "build:css": "tailwindcss -i src/modelroom.css -o ui/modelroom.css --minify",
+    "build:css": "esbuild src/modelroom.css --bundle --minify --outfile=ui/modelroom.css --target=es2022",
     "dev:web": "node scripts/build-web.mjs --dev --watch",
-    "dev:css": "tailwindcss -i src/modelroom.css -o ui/modelroom.css --watch",
+    "dev:css": "esbuild src/modelroom.css --bundle --outfile=ui/modelroom.css --watch --target=es2022",
     "lint": "oxlint",
     "lint:types": "oxlint --type-aware",
     "format": "oxfmt",
@@ -64,6 +64,7 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "verify": "npm run lint && npm run lint:types && npm run format:check && npm run typecheck && npm test && npm run build",
+    "verify:ui": "node scripts/verify-ui.mjs",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
@@ -75,19 +76,14 @@
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.14",
     "@lezer/highlight": "^1.2.5",
-    "@radix-ui/react-checkbox": "^1.4.1",
-    "@radix-ui/react-separator": "^1.2.0",
-    "@radix-ui/react-slot": "^1.5.0",
-    "@radix-ui/react-tabs": "^1.2.1",
-    "@radix-ui/react-toggle-group": "^1.2.1",
-    "@tailwindcss/cli": "^4.3.3",
-    "@tailwindcss/typography": "^0.5.20",
+    "@mantine/core": "^9.7.3",
+    "@mantine/hooks": "^9.7.3",
+    "@tanstack/react-virtual": "^3.14.21",
     "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitest/coverage-v8": "^5.0.5",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
+    "axe-core": "^4.14.0",
     "esbuild": "^0.28.2",
     "highlight.js": "^11.12.0",
     "lefthook": "^2.2.2",
@@ -101,16 +97,10 @@
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-resizable-panels": "^3.0.6",
-    "tailwind-merge": "^3.7.0",
-    "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
     "vitest": "^5.0.5"
   },
-  "overrides": {
-    "postcss-selector-parser": "^7.1.6"
-  },
   "engines": {
     "node": ">=22.18"
-  },
-  "//": "postcss-selector-parser is overridden to 7.x: @tailwindcss/typography pins ^6, where GHSA-rj75-hqrm-r3gf lives with no 6.x fix. It is a build-time parser, and `npm run build:css` checks the result."
+  }
 }

package/templates/{AGENTS.md → en/AGENTS.md}

@@ -3,6 +3,8 @@
 This repository uses [modelroom](https://github.com/modelroom/modelroom): one room per screen,
 with the reason, the invisible spec, the promises and the artifact kept apart.
 
+You are working inside the design layer (`modelroom/`). Write the room's prose in English.
+
 ## Where you may write
 
 - `rooms/<room>/BRIEF.md` — why this room exists
@@ -10,7 +12,8 @@ with the reason, the invisible spec, the promises and the artifact kept apart.
 - `rooms/<room>/BEHAVIOUR.md` — what it promises (operations and results)
 - `rooms/<room>/index.html` — the artifact itself
 
-Nothing else. Do not touch the application code from here; the design layer never reads it.
+Nothing else. Do not reach outside this directory; the design layer never reads the
+application code. The application is handed this layer, not the other way round.
 
 ## How to work
 
@@ -25,7 +28,9 @@ Nothing else. Do not touch the application code from here; the design layer neve
 
 ## Conventions
 
-- Add `Status: draft|review|adopted` to `BRIEF.md` when you want the dashboard to show a state.
-  Changing it to `adopted` is a human decision, not yours.
+- Frontmatter keys (`title`, `status`, `summary`, `tags`) and promise ids (`@verb-1`) stay
+  in English, whatever language the prose uses.
+- Add `status: draft|review|adopted` to `BRIEF.md` when you want the dashboard to show a
+  state. Changing it to `adopted` is a human decision, not yours.
 
 See `docs/02-convention.md` in the modelroom package for the reasoning.

package/templates/ja/AGENTS.md

@@ -0,0 +1,38 @@
+# AGENTS.md — デザインレイヤー
+
+このリポジトリは [modelroom](https://github.com/modelroom/modelroom) を使っています。
+1画面につき1つの room を作り、理由・見えない仕様・約束・artifact を分けて保ちます。
+
+あなたはデザインレイヤー（`modelroom/`）の中で作業しています。room の文章は日本語で書いてください。
+
+## 書き込んでよい場所
+
+- `rooms/<room>/BRIEF.md` — この room が存在する理由
+- `rooms/<room>/SPEC.md` — artifact では見えないこと（デバイス、状態、制約、使ってよいもの）
+- `rooms/<room>/BEHAVIOUR.md` — 何を約束するか（操作と結果）
+- `rooms/<room>/index.html` — artifact そのもの
+
+それ以外は書き込まないでください。このディレクトリの外には出ないでください。
+デザインレイヤーはアプリケーションのコードを読みません。アプリケーションに渡すのは
+このレイヤーであり、その逆ではありません。
+
+## 進め方
+
+1. まず room の `BRIEF.md` を読み、次に `SPEC.md` と `BEHAVIOUR.md` を読みます。
+2. それらに合うように artifact を変えます。仕様が間違っているなら、黙って書き換えず、
+   間違っていると伝えてください。
+3. artifact は自己完結にします。CDN、Webフォント、フレームワーク、ビルド手順は使いません。
+   実装に渡すものなので、単体で成立する必要があります。
+4. `SPEC.md` に、artifact を見れば分かることを書き直さないでください。同じ約束を2つの
+   ファイルにコピーせず、id（`@verb-1`）で参照します。
+5. 実際のシステムが必要とする約束（レコード、タイムスタンプ、権限）は、このレイヤーには
+   置きません。
+
+## 決まりごと
+
+- frontmatter のキー（`title`、`status`、`summary`、`tags`）と約束の id（`@verb-1`）は、
+  文章がどの言語でも英語のままにします。
+- ダッシュボードに状態を出したいときは、`BRIEF.md` に `status: draft|review|adopted` を
+  足します。`adopted` に変えるのは人間の判断で、あなたの判断ではありません。
+
+理由は modelroom パッケージの `docs/02-convention.md` にあります。

package/templates/ja/room/BEHAVIOUR.md

@@ -0,0 +1,18 @@
+# {{room}} — 振る舞い
+
+この room が約束すること: 操作と結果。コードではなく、仕事の言葉で書きます。
+
+```gherkin
+機能: {{room}}
+
+  @first-1
+  シナリオ: 最初の約束
+    前提 何かの開始点
+    もし 人が何かをする
+    ならば 観測できることが起きる
+```
+
+メモ
+- 約束ごとに1つの id（`@<verb>-<n>`）を付け、1つのシナリオに1つの約束を書きます。
+- 実際のシステムが必要とする約束（レコード、タイムスタンプ、権限）は、このファイルではなく
+  アプリケーションに属します。

package/templates/ja/room/BRIEF.md

@@ -0,0 +1,16 @@
+---
+title: {{room}}
+status: draft
+version: 1
+summary: 次に読む人が判断できる一言。
+tags: []
+---
+# {{room}}
+
+この room はなぜ存在するのか。誰のためで、何が成り立っていれば作る価値があるのか。
+優先順位と、あえてやらないことを書いてください。
+
+- **誰のため:**
+- **なぜ:**
+- **いちばん大事なこと:**
+- **やらないこと:**

package/templates/ja/room/SPEC.md

@@ -0,0 +1,9 @@
+# {{room}} — 仕様
+
+artifact では見えないことだけを書きます。スクリーンショットで見えることは artifact に
+属し、ここには書きません。
+
+- **使われる場所:**（デバイス、入力、環境）
+- **状態:**（例: 既定、空、エラー — それぞれどのファイルか）
+- **制約:**（レイアウトに関係なく守るべきこと）
+- **使ってよいもの:**（この room が使える共有コンポーネントとトークン）

package/templates/ja/room/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<!-- {{room}} — artifact（実装に渡すもの）
+     意図的に自己完結: CDN なし、フレームワークなし、ビルドなし。 -->
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{room}}</title>
+<style>
+  :root {
+    --bg: #faf9f7;
+    --surface: #ffffff;
+    --text: #1c1917;
+    --muted: #78716c;
+    --line: #e7e5e4;
+    --primary: #1c1917;
+    --primary-text: #fafaf9;
+    --radius: 16px;
+    --space: 24px;
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    margin: 0; display: grid; place-items: center; padding: 40px 20px; background: var(--bg); color: var(--text);
+    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
+    line-height: 1.7;
+  }
+  .card {
+    width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line);
+    border-radius: var(--radius); padding: var(--space); display: flex; flex-direction: column; gap: var(--space);
+  }
+  h1 { font-size: 22px; margin: 0; letter-spacing: .01em; }
+  p { margin: 0; color: var(--muted); font-size: 15px; }
+  .actions { display: flex; gap: 12px; flex-wrap: wrap; }
+  button {
+    font: inherit; padding: 14px 22px; border-radius: var(--radius); border: 1px solid var(--line);
+    background: var(--surface); color: var(--text); cursor: pointer;
+  }
+  button.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
+</style>
+</head>
+<body>
+  <main class="card">
+    <h1>{{room}}</h1>
+    <p>これは room の artifact です。チャットから置き換えるか、手で書いてください。
+       仕様と約束は隣の SPEC.md と BEHAVIOUR.md にあります。</p>
+    <div class="actions">
+      <button class="primary">主なアクション</button>
+      <button>副次的なアクション</button>
+    </div>
+  </main>
+</body>
+</html>

package/templates/modelroom.json

@@ -1,6 +1,8 @@
 {
   "root": ".",
-  "rooms": "rooms",
+  "rooms": "{{rooms}}",
+  "state": "{{state}}",
+  "lang": "{{lang}}",
   "artifact": "index.html",
   "docs": ["BRIEF.md", "SPEC.md", "BEHAVIOUR.md"],
   "port": 4321,