bom-pi 0.0.0-stage → 0.0.1

package/README.md

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# bom-pi
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+bom × pi — hệ sinh thái durable cho pi trên nền `@earendil-works/pi-durable`, lý niệm herdr:
+**core daemon headless sở hữu state, clients là process riêng mỏng, thay tự do**.
+
+```
+packages/core   bom-core daemon — pi-durable Harness + JSON-RPC 2.0 NDJSON unix socket
+packages/cli    bom-pi — cli mỏng: hello / status / shutdown
+apps/           client apps (M2 herdr-plugin, M3 web) — chưa có
+docs/           BLUEPRINT.md (kiến trúc chốt) · DECISIONS.md (nhật ký quyết định)
+```
+
+## Chạy
+
+Daemon đang chạy như **systemd user service** (`bom-core.service` — enabled, tự restart khi crash):
+
+```sh
+systemctl --user status bom-core     # trạng thái
+journalctl --user -u bom-core -f     # log
+node packages/cli/src/bom-pi.mjs status
+node packages/cli/src/bom-pi.mjs models                    # model khả dụng (account pi thật)
+node packages/cli/src/bom-pi.mjs submit "..." --model zai/glm-5.3-flash
+node packages/cli/src/bom-pi.mjs watch                     # transcript live (Ctrl+C thoát)
+node packages/cli/src/bom-pi.mjs transcript
+```
+
+Socket `$XDG_RUNTIME_DIR/bom-pi.sock` · data `~/.local/state/bom-pi/` · credentials
+`~/.pi/agent/auth.json` (ModelRuntime của pi — cùng account với pi CLI).
+
+Real-test mỗi vòng: `npm run smoke` (19 assert — boot/hello/status/models/transcript/lỗi chuẩn/
+notification/null-crash-regression/double-start/shutdown/reopen/SIGTERM, dùng thư mục tạm riêng).
+
+Milestone (M1 xong: submit/resume + events + systemd + kill-test) + bảng tra "mượn gì từ đâu":
+`docs/BLUEPRINT.md`.

package/apps/README.md

@@ -0,0 +1,7 @@
+# apps/ — client apps (process riêng, không chứa state bền)
+
+- `herdr-plugin/` (M2): manifest + scripts plugin herdr `pi.bom-bridge` — status/send/approve +
+  tokens roles + agent.view.set.
+- `web/` (M3): bom-web minimal — transcript + approve + submit từ phone (SSE + token, tailscale).
+
+Chưa có gì ở đây cho tới khi M1 xong (xem `../docs/BLUEPRINT.md` §4 milestone).

package/apps/web/README.md

@@ -0,0 +1,21 @@
+# bom-web — client web minimal (M3)
+
+Transcript + submit + live events từ phone, không dependency (`node apps/web/server.mjs`).
+
+```sh
+# local (không token, chỉ 127.0.0.1)
+npm run web
+
+# từ phone qua tailscale: đặt token
+BOM_PI_TOKEN=$(head -c16 /dev/urandom | base64) npm run web
+# rồi mở http://<tailscale-ip>:8791/?token=<token>
+```
+
+| Endpoint | Làm gì |
+|---|---|
+| `GET /` | trang chính (model picker + input + transcript live) |
+| `GET /api/hello` `/api/status` `/api/models` `/api/transcript` | proxy bom-core |
+| `GET /api/events` | SSE — forward `events.update` / `events.heartbeat` |
+| `POST /api/submit` `{text, model?}` | nộp turn (requestId `web-*` idempotent-ish) |
+
+Kiến trúc: web là CLIENT mỏng — mọi state nằm ở bom-core daemon, web chết tự do.

package/apps/web/pocket-adapter.mjs

@@ -0,0 +1,302 @@
+// pocket-adapter — đưa wire contract của pi-pocket (TannerMidd, MIT) vào bom-core.
+// UI nguyên bản nằm ở public/ (không sửa); file này dịch /api/* pocket → RPC bom-pi.
+// Phần bom-pi chưa có tính năng: trả giá trị rỗng hợp lệ + ghi chú PORT(bom-pi) ngay tại nhánh.
+import { readFile } from 'node:fs/promises';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import process from 'node:process';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+export const COOKIE = 'pocket_auth';
+
+// ---- projectEntry: port từ pi-pocket src/server/projection.ts (MIT) ----
+// Pi-durable EntryRecord → ClientEntry mà UI pocket render. Cùng pi-durable 1.4.0 ⇒ shape 1-1.
+const clip = (text, limit = 4000) => (text.length > limit ? { text: text.slice(0, limit), clipped: true } : { text });
+const textOfContent = (content) =>
+  typeof content === 'string' ? content
+    : Array.isArray(content) ? content.filter((p) => p?.type === 'text').map((p) => p.text).join('\n')
+      : '';
+const countImages = (content) => (Array.isArray(content) ? content.filter((p) => p?.type === 'image').length : 0);
+const madeAt = (m) => (typeof m?.timestamp === 'number' && m.timestamp > 0 ? { at: m.timestamp } : {});
+
+function projectBlocks(content, full = false) {
+  if (!Array.isArray(content)) return [];
+  return content
+    .filter((p) => p?.type === 'text' || p?.type === 'thinking')
+    .map((p) => (p.type === 'thinking' ? { type: 'thinking', text: String(p.text ?? '') } : { type: 'text', text: String(p.text ?? '') }));
+}
+
+export function projectEntry(entry, full = false) {
+  const m = entry?.model?.[0];
+  const id = entry.id;
+  switch (entry?.kind) {
+    case 'pi.user':
+      return { id, kind: 'user', text: textOfContent(m?.content), images: countImages(m?.content), ...madeAt(m) };
+    case 'pi.assistant': {
+      const blocks = [];
+      if (Array.isArray(m?.content)) {
+        for (const p of m.content) {
+          if (p?.type === 'text' || p?.type === 'thinking') blocks.push(p.type === 'thinking' ? { type: 'thinking', text: String(p.text ?? '') } : { type: 'text', text: String(p.text ?? '') });
+          else if (p?.type === 'toolCall') blocks.push({ type: 'toolCall', id: String(p.id ?? ''), name: String(p.name ?? '?'), args: p.arguments ?? p.args ?? {} });
+        }
+      } else if (typeof m?.text === 'string' && m.text) {
+        blocks.push({ type: 'text', text: m.text }); // bom lightEntries: "[tool write]" fallback
+      }
+      return {
+        id, kind: 'assistant', blocks,
+        ...(typeof m?.stopReason === 'string' ? { stopReason: m.stopReason } : {}),
+        ...(m?.errorMessage ? { error: String(m.errorMessage).slice(0, 200) } : {}),
+        ...(typeof m?.model === 'string' ? { model: m.model } : {}),
+        ...(typeof m?.provider === 'string' ? { provider: m.provider } : {}),
+        ...madeAt(m),
+      };
+    }
+    case 'pi.tool-result': {
+      const { text, clipped } = full ? { text: textOfContent(m?.content), clipped: undefined } : clip(textOfContent(m?.content) || String(m?.text ?? ''));
+      return {
+        id, kind: 'toolResult', callId: String(m?.toolCallId ?? ''), name: String(m?.toolName ?? '?'), text,
+        isError: m?.isError === true, ...(clipped ? { clipped } : {}), ...madeAt(m),
+      };
+    }
+    case 'pi.compaction':
+      return { id, kind: 'compaction', summary: textOfContent(m?.content) };
+    case 'pi.reset': {
+      const text = textOfContent(m?.content);
+      return text === '' ? { id, kind: 'reset' } : { id, kind: 'reset', text };
+    }
+    default:
+      return undefined; // pi.system + bookkeeping: UI không vẽ
+  }
+}
+
+// ---- map model bom-pi → model pocket ----
+function mapModel(mm) {
+  return {
+    provider: String(mm.provider ?? '?'),
+    id: String(mm.modelId ?? mm.id ?? '?'),
+    name: String(mm.name ?? mm.modelId ?? '?'),
+    contextWindow: Number(mm.contextWindow ?? 200000),
+    reasoning: mm.reasoning !== false,
+    images: mm.images === true,
+    levels: Array.isArray(mm.levels) ? mm.levels : ['off', 'low', 'medium', 'high'],
+  };
+}
+
+// ---- approvals bom → pocket shape {id, conversationId, tool, subject, reason, requestedBy} ----
+function mapApproval(a) {
+  return {
+    id: String(a.id),
+    conversationId: Number(a.conversationId ?? 0),
+    tool: String(a.tool ?? 'call'),
+    subject: String(a.command ?? a.summary ?? ''), // command đầy đủ — card Review hiện nguyên lệnh
+    reason: String(a.reason ?? a.type ?? 'bom-pi approval gate'),
+    requestedBy: String(a.requestedBy ?? 'bom'),
+    at: Number(a.at ?? 0),
+  };
+}
+
+const OWNER = { id: 'bom-owner', name: 'Owner', role: 'owner' };
+
+export function makePocketAdapter({ rpc, checkToken }) {
+  // me-shape: mọi thứ UI cần biết về server (chụp từ pocket 0.27.0 thật)
+  async function mePayload() {
+    const hello = await rpc('hello');
+    let models = [];
+    try { models = (await rpc('models.list')).models ?? []; } catch { /* PORT(bom-pi): models.list lỗi → danh sách rỗng */ }
+    let themes = [{ id: 'pocket', name: 'Pocket', description: "The app's own look: soft tiles over the colors you choose." },
+      { id: 'lantern', name: 'Lantern', description: 'Calm and dark for long reading.' }];
+    return {
+      user: OWNER, users: [OWNER],
+      models: models.map(mapModel),
+      guard: { available: false, enabled: false, detail: 'bom-pi: mọi tool đều qua approval gate của daemon' },
+      server: { pocketVersion: '0.27.0-bom', supervised: false, startedAt: 0, home: process.env.HOME ?? '/home', defaultCwd: process.env.HOME ?? '/home' },
+      folderFavorites: [], themes,
+    };
+  }
+
+  async function sessionsPayload() {
+    const list = await rpc('session.list');
+    const convs = list.conversations ?? [];
+    const appr = (await rpc('approvals.list')).pending ?? [];
+    // bom-pi session.list không có title/thời gian — nạp từ transcript.raw:
+    // title = message user đầu (đúng cách pocket), updatedAt = at entry cuối
+    const out = [];
+    for (const c of convs) {
+      let title = null; let updatedAt = 0;
+      try {
+        const raw = await rpc('transcript.raw', { conversationId: c.id });
+        const first = (raw.entries ?? []).find((e) => e.kind === 'pi.user');
+        const m0 = first?.model?.[0];
+        const text = typeof m0?.content === 'string' ? m0.content : Array.isArray(m0?.content) ? m0.content.filter((p) => p?.type === 'text').map((p) => p.text).join(' ') : '';
+        if (text) title = text.split('\n')[0].slice(0, 60);
+        for (const e of raw.entries ?? []) { const at = e.model?.[0]?.timestamp; if (typeof at === 'number' && at > updatedAt) updatedAt = at; }
+      } catch { /* conversation đã đổi trạng thái — bỏ qua metadata */ }
+      out.push({
+        id: c.id,
+        cwd: c.cwd ?? '',
+        createdAt: updatedAt,
+        updatedAt,
+        createdBy: OWNER.id,
+        busy: false, // PORT(bom-pi): session.list chưa báo busy — làm mới qua events.update
+        waiting: appr.some((a) => Number(a.conversationId) === Number(c.id)),
+        model: c.model?.modelId ?? 'glm-5.3',
+        title,
+      });
+    }
+    return out;
+  }
+
+  // view: transcript + trạng thái một conversation (shape chụp từ pocket)
+  async function viewPayload(convId) {
+    const raw = await rpc('transcript.raw', { conversationId: convId });
+    const entries = (raw.entries ?? []).map((e) => projectEntry(e)).filter(Boolean);
+    const appr = ((await rpc('approvals.list')).pending ?? []).filter((a) => Number(a.conversationId) === Number(convId));
+    let conv = null;
+    try { conv = (await rpc('session.list')).conversations.find((c) => Number(c.id) === Number(convId)) ?? null; } catch { conv = null; }
+    return {
+      full: true,
+      conversation: { id: Number(convId), kind: 'session', title: conv?.title ?? `session ${convId}`, cwd: conv?.cwd ?? '', archived: false },
+      entries,
+      order: entries.map((e) => e.id),
+      live: { busy: conv?.busy === true || conv?.running === true },
+      agent: { model: { provider: conv?.model?.provider ?? 'zai', modelId: conv?.model?.modelId ?? 'glm-5.3' }, thinkingLevel: 'high', cwd: conv?.cwd ?? '', available: true, modelName: conv?.model?.modelId ?? 'GLM-5.3', contextWindow: 1000000, reasoning: true, images: false, levels: ['low', 'high', 'max'] },
+      stats: { cost: 0 },
+      clients: 1, viewers: ['Owner'],
+      approvals: appr.map(mapApproval),
+      inbox: [], artifacts: [], subagents: [], subagentsHeld: null,
+      authors: {}, reactions: {}, pins: [], turns: { on: false, asks: [] }, decisions: {},
+      plan: { on: false }, schedules: [], branch: null, goal: null, watch: null,
+    };
+  }
+
+  const json = (res, code, obj) => { res.writeHead(code, { 'content-type': 'application/json', 'access-control-allow-origin': '*' }); res.end(JSON.stringify(obj)); };
+  const readBody = (req) => new Promise((done) => { let b = ''; req.on('data', (c) => (b += c)); req.on('end', () => { try { done(JSON.parse(b || '{}')); } catch { done({}); } }); });
+
+  /**
+   * Mount pocket wire. Trả true nếu đã xử lý request.
+   * Auth: cookie pocket_auth (sign-in qua /login?token=) hoặc Authorization Bearer (device/master bom).
+   */
+  return async function pocketRoute(req, res, url, authed) {
+    const path = url.pathname.replace(/^\/api\//, '');
+    const parts = path.split('/').filter(Boolean);
+    const [first, second, third] = parts;
+    const method = req.method;
+    const isPost = method !== 'GET' && method !== 'HEAD';
+
+    if (isPost && req.headers['x-pocket'] !== '1') return false; // POST pocket luôn có X-Pocket (api.ts l365)
+    if (!['me', 'login', 'logout', 'sessions', 'c', 'providers', 'themes', 'theme', 'events', 'poll',
+      'users', 'hooks', 'subagents', 'pip', 'extensions', 'extension-settings', 'fs', 'visibility', 'peeks',
+      'folder-favorites', 'spend', 'pi-sessions', 'x', 'repo-watches', 'approvals'].includes(first)) return false;
+
+    try {
+      // ---- sign-in/lifecycle ----
+      if (first === 'me' && method === 'GET') return json(res, 200, await mePayload()), true;
+      if (first === 'logout' && isPost) {
+        res.writeHead(200, { 'set-cookie': `${COOKIE}=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0`, 'content-type': 'application/json' });
+        return res.end('{}'), true;
+      }
+
+      // ---- sessions ----
+      if (first === 'sessions' && second === undefined && method === 'GET') return json(res, 200, await sessionsPayload()), true;
+      if (first === 'sessions' && second === undefined && isPost) {
+        const body = await readBody(req);
+        const r = await rpc('session.new', { cwd: body.cwd });
+        return json(res, 200, { id: r.conversationId ?? r.id }), true;
+      }
+      if (first === 'sessions' && second !== undefined && isPost) {
+        await readBody(req);
+        return json(res, 200, { ok: true }), true; // PORT(bom-pi): rename/archive session — daemon chưa lưu, chấp nhận im lặng
+      }
+
+      // ---- conversation ----
+      if (first === 'c' && second !== undefined) {
+        const id = Number(second);
+        if (third === 'submit' && isPost) {
+          const body = await readBody(req);
+          const r = await rpc('session.submit', { conversationId: id, text: body.text, ...(body.requestId ? { requestId: String(body.requestId) } : {}) });
+          return json(res, 200, { submissionId: r.submissionId ?? 0, requestId: String(body.requestId ?? '') }), true;
+        }
+        if (third === 'configure' && isPost) {
+          const body = await readBody(req);
+          // pocket gửi {model: {provider, id, level?}} → bom session.configure {model:{provider,modelId}}
+          const model = body.model ? { provider: body.model.provider, modelId: body.model.id ?? body.model.modelId } : undefined;
+          return json(res, 200, await rpc('session.configure', { conversationId: id, ...(model ? { model } : {}) })), true;
+        }
+        if (third === 'abort' && isPost) return json(res, 200, await rpc('session.abort', { conversationId: id })), true;
+        if (third === 'reset' && isPost) { await readBody(req); return json(res, 200, await rpc('session.reset', { conversationId: id })), true; }
+        if (third === 'history' && method === 'GET') {
+          const raw = await rpc('transcript.raw', { conversationId: id });
+          // pocket history: OLDEST FIRST (transcripts.ts out.reverse()) — transcript.raw đã oldest-first
+          return json(res, 200, (raw.entries ?? []).map((e) => projectEntry(e)).filter(Boolean)), true;
+        }
+        if ((third === 'context' || third === 'messages') && method === 'GET') {
+          const raw = await rpc('transcript.raw', { conversationId: id });
+          const entries = (raw.entries ?? []).map((e) => projectEntry(e)).filter(Boolean);
+          return json(res, 200, { entries, last: entries.at(-1)?.id ?? 0 }), true;
+        }
+        if (third === 'entry' && method === 'GET') {
+          const raw = await rpc('transcript.raw', { conversationId: id });
+          const e = (raw.entries ?? []).find((x) => Number(x.id) === Number(parts[3]));
+          if (e) { json(res, 200, projectEntry(e, true)); return true; }
+          json(res, 404, { error: 'no entry' });
+          return true;
+        }
+        if (third === 'turns' && isPost) return json(res, 200, { ok: true }), true; // PORT(bom-pi): multiplayer turns — chưa có
+        if (third === 'typing' && isPost) return json(res, 200, { ok: true }), true; // PORT(bom-pi): presence
+        if (isPost) { await readBody(req); return json(res, 200, { ok: true }), true; } // PORT(bom-pi): plan/chat/pin/notes/fork/... — noop
+        return json(res, 200, {}), true;
+      }
+
+      // ---- approvals ----
+      if (first === 'approvals' && second !== undefined && isPost) {
+        const body = await readBody(req);
+        await rpc('approvals.answer', { id: parts.slice(1).join('/'), allow: body.allow === true, by: 'web' });
+        return json(res, 200, true), true;
+      }
+
+      // ---- providers/themes ----
+      if (first === 'providers' && method === 'GET') {
+        const models = ((await rpc('models.list')).models ?? []).map(mapModel);
+        return json(res, 200, { providers: [{ name: 'bom-pi', models, signedIn: true }] }), true;
+      }
+      if (first === 'theme' && method === 'GET') return json(res, 200, { theme: 'pocket', defaultTheme: null }), true;
+      if (first === 'themes' && method === 'GET') return json(res, 200, (await mePayload()).themes), true;
+      if (first === 'themes' && isPost) return json(res, 200, { ok: true }), true; // PORT(bom-pi): duplicate/edit theme folders
+
+      // ---- events (SSE) ----
+      if (first === 'events' && method === 'GET') {
+        res.writeHead(200, { 'content-type': 'text/event-stream', 'cache-control': 'no-cache', connection: 'keep-alive' });
+        const send = (name, data) => res.write(`event: ${name}\ndata: ${JSON.stringify(data)}\n\n`);
+        const cid = Number(url.searchParams.get('c'));
+        const push = async (why) => {
+          try {
+            send('hello', await mePayload());
+            send('sessions', await sessionsPayload());
+            if (Number.isInteger(cid) && cid > 0) send('view', await viewPayload(cid));
+          } catch (e) { send('notice', { level: 'error', message: String(e?.message ?? e).slice(0, 120) }); }
+        };
+        await push('open');
+        // bom-pi events.update (SSE legacy) làm tín hiệu làm mới — pull-on-push
+        const conn = await rpc.__subscribeEvents(cid, () => push('update'));
+        const ping = setInterval(() => res.write(': ping\n\n'), 20000);
+        req.on('close', () => { clearInterval(ping); conn.close(); });
+        return true;
+      }
+
+      // ---- stub rỗng: tính năng pocket chưa có ở bom-pi ----
+      if (first === 'users' && method === 'GET') return json(res, 200, [OWNER]), true;
+      if (first === 'subagents' && method === 'GET') return json(res, 200, []), true;
+      if (first === 'hooks' && method === 'GET') return json(res, 200, []), true;
+      if (first === 'folder-favorites' && method === 'GET') return json(res, 200, []), true;
+      if (first === 'pi-sessions' && method === 'GET') return json(res, 200, []), true;
+      if (first === 'fs') return json(res, 200, { entries: [] }), true; // PORT(bom-pi): file tree
+      if (first === 'spend' && method === 'GET') return json(res, 200, { people: [], sessions: [] }), true;
+      if (isPost || method === 'PUT') { await readBody(req); return json(res, 200, { ok: true }), true; }
+      return json(res, 200, method === 'GET' ? [] : {}), true;
+    } catch (e) {
+      return json(res, e?.status ?? 500, { error: String(e?.message ?? e).replace(/^\d+: /, '') }), true;
+    }
+  };
+}
+
+const fourth = (parts) => parts[3];

package/apps/web/public/LICENSE.pocket

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tanner Middleton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/apps/web/public/activity-fold.js

@@ -0,0 +1,28 @@
+// Whether an activity group in the conversation shows its timeline. Appearance's Keep activity folded keeps every group
+// on its one line until someone opens it, also while it runs or sits in the newest turn; off, the newest turn's groups
+// open as they come. A jump to one of a group's answers opens it as a click does, and a thought alone in its group keeps
+// its own rule (its words follow Show thinking). No DOM here, so `test/activity-fold.test.ts` can check it.
+
+/**
+ * Whether a group opens, from what it is and what was chosen for it.
+ *
+ * `chosen` is a click on its line, or a jump to one of its answers (`pocket:reveal`): true opened it, false closed it,
+ * undefined leaves it to the rules below. `lone` is the group's only step when that step is a thought, else null.
+ * `fold` is Appearance's Keep activity folded.
+ */
+export function activityOpen({ chosen, lone, live, newest, reading, fold }) {
+    // A thought whose words have not come yet (a session opening) stays folded until they have.
+    if (lone?.partial === true) {
+        return false;
+    }
+
+    if (chosen !== undefined) {
+        return chosen;
+    }
+
+    if (lone) {
+        return reading === true && lone.streaming !== true && Boolean(lone.text?.trim());
+    }
+
+    return fold === true ? false : live === true || newest === true;
+}

package/apps/web/public/agent-now.js

@@ -0,0 +1,37 @@
+// What a working subagent does this moment, from its peek: the call it waits on, the call it runs, or its words. The
+// subagents bar and the peek tiles both say it, for a row each.
+import { describeCall } from "./calls.js";
+import { store } from "./store.js";
+
+/** What a working subagent does this moment: its peek's waiting call, running call, or words. */
+export function nowDoing(agent, peek = store.state.peeks?.[agent.conversationId]) {
+    // Its request waits for its provider's limit to clear: that is what it does, whatever its peek last showed.
+    if (agent.limited !== undefined) {
+        return "Waiting for a usage limit to clear";
+    }
+
+    const waiting = peek?.approvals?.[0];
+
+    if (waiting) {
+        return `Waiting for approval: ${waiting.tool} ${waiting.subject}`.trim();
+    }
+
+    const last = (peek?.lines ?? []).at(-1);
+
+    if (last?.kind === "tool" && last.status === "running") {
+        const call = describeCall({ name: last.name, args: last.args });
+
+        return [call.icon, call.label, call.subject].filter(Boolean).join(" ");
+    }
+
+    if (last?.kind === "shell") {
+        return `$ ${last.command}`;
+    }
+
+    if (last?.kind === "text") {
+        return last.text;
+    }
+
+    // Before its peek arrives, nothing is known but that it works.
+    return peek === undefined ? "Working…" : "Thinking…";
+}

package/apps/web/public/agent-tile.js

@@ -0,0 +1,79 @@
+// One subagent at work, as a sub-tile: the state square in its session's folder color, its name and state, and what it
+// does this moment, from its own peek (or, until that arrives, what it was asked). Peek tiles nest these in a session's
+// tile; the subagents board shows them under a session's row.
+import { useRef } from "preact/hooks";
+import { nowDoing } from "./agent-now.js";
+import { store } from "./store.js";
+import { html } from "./ui.js";
+
+/** Two clicks (or taps) this close together open the subagent, where `onOpen` is given: the board's. */
+const DOUBLE_MS = 350;
+
+/** Whether it waits for an approval: the board knows at once; a peek tile, from the subagent's own peek. */
+function waitingOf(agent, peek) {
+    return agent.waiting === true || (peek?.approvals?.length ?? 0) > 0;
+}
+
+/**
+ * What it does now; before its own peek arrives, what it was asked says more than "Working…". A call it waits on is
+ * the call alone: the tile says it needs approval.
+ */
+function doingOf(agent, peek) {
+    const approval = agent.waiting === true ? agent.approval : peek?.approvals?.[0];
+
+    if (approval !== undefined) {
+        return `${approval.tool} ${approval.subject}`.trim();
+    }
+
+    const doing = nowDoing(agent, peek);
+
+    return peek === undefined && agent.asked !== undefined ? `Working on: ${agent.asked}` : doing;
+}
+
+/**
+ * A subagent's sub-tile. `folder` is its session's folder color; `selected` marks it as the one the board shows.
+ * `onActivate` takes a click (a peek tile opens it; the board picks it), and `onOpen` a double click or tap.
+ */
+export function AgentTile({ agent, folder, selected = false, onActivate, onOpen }) {
+    const peek = agent.peek ?? store.state.peeks?.[agent.conversationId];
+    const waiting = waitingOf(agent, peek);
+    const state = waiting ? "waiting" : "working";
+    const doing = doingOf(agent, peek);
+    const last = useRef(0);
+
+    // A double click, or a double tap: the first picks it, the second opens it. No native dblclick, which a double
+    // tap does not always make.
+    const activate = () => {
+        const now = Date.now();
+
+        if (onOpen !== undefined && now - last.current < DOUBLE_MS) {
+            last.current = 0;
+            onOpen();
+
+            return;
+        }
+
+        last.current = now;
+        onActivate();
+    };
+
+    return html`<button
+        class=${`agent-tile ${state} ${selected ? "on" : ""}`}
+        data-peek=${agent.conversationId}
+        data-peek-kind="agent"
+        title=${`${agent.name}: ${doing}`}
+        aria-label=${`${agent.name}, ${waiting ? "needs approval" : "working"}: ${doing}`}
+        onClick=${activate}
+    >
+        <span class="agent-tile-head">
+            <span
+                class=${`state-mark ${state}`}
+                style=${`--folder:${waiting ? "var(--warn)" : (folder ?? "var(--muted)")}`}
+                aria-hidden="true"
+            ></span>
+            <span class="agent-tile-name">${agent.name}</span>
+            <span class="agent-tile-state">${waiting ? "needs approval" : "working"}</span>
+        </span>
+        <span class="agent-tile-now">${doing}</span>
+    </button>`;
+}