viberoom 0.5.1 → 0.5.3

package/NOTICE

@@ -3,8 +3,14 @@ Copyright (c) 2026 Todor Rusev
 
 This product bundles the following third-party material:
 
-- Nunito (ui/fonts/): Copyright 2014 The Nunito Project Authors,
-  licensed under the SIL Open Font License, Version 1.1 (ui/fonts/OFL.txt).
+- Fonts (ui/fonts/), each licensed under the SIL Open Font License, Version 1.1
+  (ui/fonts/OFL.txt), fetched from Google Fonts by scripts/fetch-fonts.mjs:
+  - Nunito: Copyright 2014 The Nunito Project Authors.
+  - Inter: Copyright 2016 The Inter Project Authors.
+  - Noto Sans: Copyright 2022 The Noto Project Authors.
+  - JetBrains Mono: Copyright 2020 The JetBrains Mono Project Authors.
+  - Fira Code: Copyright 2014-2020 The Fira Code Project Authors.
+  - Source Code Pro: Copyright 2010-2019 Adobe (http://www.adobe.com/).
 
 - Vendor icons (assets/vendors/): the logos of Claude, Codex, Gemini, Cursor,
   OpenCode and GitHub Copilot, as published in the Agent Client Protocol

package/README.md

@@ -14,7 +14,7 @@ Open a room, summon the agents you already have, give each one a role, and let t
 </p>
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/todor-rusev/viberoom/main/docs/screenshots/conversation.png" width="960" alt="A Forge & Lumen room: Forge explains a git command from a screenshot, Lumen adds the part that changes whose problem it is">
+  <img src="https://raw.githubusercontent.com/todor-rusev/viberoom/main/docs/screenshots/conversation.png" width="960" alt="A Wren & Quinn room: Wren explains a git command from a screenshot, Quinn adds the part that changes whose problem it is">
 </p>
 
 <p align="center">

package/dist/hub.js

@@ -11,6 +11,9 @@ import { DEFAULT_ROOM_SETTINGS } from "./persona.js";
 import { Room } from "./room.js";
 import { SkillLibrary } from "./skills.js";
 import { TemplateLibrary } from "./templates.js";
+export const TEXT_FONTS = ["nunito", "inter", "noto-sans", "arial", "system"];
+export const MONO_FONTS = ["jetbrains-mono", "fira-code", "source-code-pro", "system"];
+export const DEFAULT_APPEARANCE = { chatFontSize: 14.5, font: "nunito", mono: "jetbrains-mono" };
 export const DIAGRAM_PRESETS = ["pop", "lavender", "mint", "sunset", "slate"];
 const ROOM_ID_PATTERN = /^[a-z0-9][a-z0-9-]{0,39}$/;
 const INSTRUCTION_FILES = ["CLAUDE.md", "AGENTS.md", "GEMINI.md", ".cursorrules"];
@@ -109,6 +112,7 @@ export class Hub extends EventEmitter {
             agentSkillsNeedApproval: false,
             diagrams: { preset: "pop", primary: null },
             editor: { ...DEFAULT_EDITOR_SETTINGS },
+            appearance: { ...DEFAULT_APPEARANCE },
             roomDefaults: {},
             vendorPresets: {},
         };
@@ -186,6 +190,20 @@ export class Hub extends EventEmitter {
                 throw new Error("editor.command must mention {file} (and usually {line})");
             next.editor = { mode, command };
         }
+        if (patch.appearance !== undefined && typeof patch.appearance === "object" && patch.appearance) {
+            const a = patch.appearance;
+            const chatFontSize = Number(a.chatFontSize ?? next.appearance?.chatFontSize ?? DEFAULT_APPEARANCE.chatFontSize);
+            if (!Number.isFinite(chatFontSize) || chatFontSize < 12 || chatFontSize > 24)
+                throw new Error("appearance.chatFontSize must be between 12 and 24");
+            const font = String(a.font ?? next.appearance?.font ?? DEFAULT_APPEARANCE.font);
+            if (!TEXT_FONTS.includes(font))
+                throw new Error(`appearance.font must be one of ${TEXT_FONTS.join(", ")}`);
+            const mono = String(a.mono ?? next.appearance?.mono ?? DEFAULT_APPEARANCE.mono);
+            if (!MONO_FONTS.includes(mono))
+                throw new Error(`appearance.mono must be one of ${MONO_FONTS.join(", ")}`);
+            next.appearance = { chatFontSize: Math.round(chatFontSize * 2) / 2, font, mono };
+        }
+        next.appearance = { ...DEFAULT_APPEARANCE, ...(next.appearance ?? {}) };
         if (!next.editor)
             next.editor = { ...DEFAULT_EDITOR_SETTINGS };
         if (patch.roomDefaults !== undefined && typeof patch.roomDefaults === "object" && patch.roomDefaults) {
@@ -311,9 +329,16 @@ export class Hub extends EventEmitter {
         const template = this.templates.get(input.templateId);
         if (!template)
             throw new Error(`no such template: ${input.templateId}`);
-        const { room, notices } = this.createRoom({ name: input.name, dir: input.dir, settings: template.settings });
+        const { room, notices } = this.createRoom({ name: input.name, dir: input.dir || template.dir || null, settings: template.settings });
+        const installed = new Set(listRecipes().filter((r) => !r.unavailableReason).map((r) => r.id));
         for (const [i, tv] of template.vibemates.entries()) {
-            const choice = input.vibemates[i] ?? { name: tv.name, agentType: "" };
+            const choice = { ...(input.vibemates[i] ?? { name: tv.name, agentType: "" }) };
+            if (!choice.agentType && tv.agentType) {
+                if (installed.has(tv.agentType))
+                    choice.agentType = tv.agentType;
+                else
+                    notices.push(`${choice.name || tv.name}: the template runs it on ${tv.agentType}, which is not installed here; pick another agent in the roster.`);
+            }
             const skills = (tv.skills ?? []).filter((name) => {
                 const ok = !!this.skills.get(name);
                 if (!ok)
@@ -337,6 +362,7 @@ export class Hub extends EventEmitter {
                     role: tv.role,
                     avatar: tv.avatar,
                     skills,
+                    replyDelay: tv.replyDelay,
                     model: choice.model ?? tv.model,
                     effort: choice.effort ?? tv.effort,
                     mode: choice.mode ?? tv.mode,
@@ -349,6 +375,24 @@ export class Hub extends EventEmitter {
         this.saveRooms();
         return { room, notices };
     }
+    saveRoomAsTemplate(roomId, input) {
+        const name = input.name.trim();
+        if (!name)
+            throw new Error("the template needs a name");
+        const room = this.getRoom(roomId);
+        const base = room.templateOf();
+        const edited = input.template ?? {};
+        const saved = this.templates.save({
+            name,
+            description: input.description.trim(),
+            emoji: (input.emoji ?? room.settings.emoji) || undefined,
+            dir: edited.dir?.trim() || base.dir,
+            settings: { ...base.settings, ...(edited.settings ?? {}) },
+            vibemates: edited.vibemates ?? base.vibemates,
+        });
+        this.emit("event", { type: "templates" });
+        return saved;
+    }
     getRoom(id) {
         const room = this.rooms.get(id);
         if (!room)

package/dist/room.js

@@ -133,6 +133,40 @@ export class Room extends EventEmitter {
             this.colorIndex++;
         }
     }
+    templateOf() {
+        const { name: _n, humanName: _h, ...rest } = this.settings;
+        const settings = { ...rest, customRules: this.renderRuleReferences(this.settings.customRules) };
+        const vibemates = [];
+        for (const p of this.participants.values()) {
+            if (p.kind !== "agent" || p.status === "left")
+                continue;
+            const v = { name: p.name };
+            if (p.tagline)
+                v.tagline = p.tagline;
+            if (p.role)
+                v.role = p.role;
+            if (p.avatar)
+                v.avatar = p.avatar;
+            if (p.skills?.length)
+                v.skills = [...p.skills];
+            if (p.replyDelay !== undefined)
+                v.replyDelay = p.replyDelay;
+            if (p.agentType) {
+                v.agentType = p.agentType;
+                const model = p.launch?.model ?? p.model;
+                const effort = p.launch?.effort ?? p.effort;
+                const mode = p.launch?.mode ?? p.mode;
+                if (model)
+                    v.model = model;
+                if (effort)
+                    v.effort = effort;
+                if (mode)
+                    v.mode = mode;
+            }
+            vibemates.push(v);
+        }
+        return { dir: this.dir, settings, vibemates };
+    }
     toStored() {
         const { name: _n, humanName: _h, ...settings } = this.settings;
         return {
@@ -931,6 +965,7 @@ export class Room extends EventEmitter {
                 turnActive: false,
                 pendingTurn: false,
                 turn: null,
+                strayMessageId: null,
                 turnsSinceBrief: 0,
                 usedAtBrief: 0,
                 briefSentThisTurn: false,
@@ -1660,6 +1695,7 @@ export class Room extends EventEmitter {
         }
         const startedAt = runtime.turn.startedAt;
         const published = runtime.turn.published;
+        const publishedAt = runtime.turn.publishedAt ?? null;
         runtime.turn = null;
         runtime.turnActive = false;
         this.drafts.delete(draft.id);
@@ -1689,9 +1725,9 @@ export class Room extends EventEmitter {
                 this.closeRetry(retry, "the correction turn failed; nothing was posted");
             return null;
         }
-        return this.finalizeTurn(participant, runtime, draft, result, Date.now() - startedAt, retry, published);
+        return this.finalizeTurn(participant, runtime, draft, result, Date.now() - startedAt, retry, published, publishedAt);
     }
-    finalizeTurn(participant, runtime, draft, result, durationMs, retry, published) {
+    finalizeTurn(participant, runtime, draft, result, durationMs, retry, published, publishedAt = null) {
         participant.status = "idle";
         this.push({ type: "participant", participant });
         const text = draft.text.trim();
@@ -1787,7 +1823,7 @@ export class Room extends EventEmitter {
             durationMs,
         };
         this.commit(message);
-        if (this.messages.some((x) => x.kind === "chat" && x.id !== message.id && x.ts > draft.ts)) {
+        if (publishedAt !== null && this.messages.some((x) => x.kind === "chat" && x.id !== message.id && x.ts > publishedAt)) {
             const at = new Date(draft.ts);
             const hhmm = `${String(at.getHours()).padStart(2, "0")}:${String(at.getMinutes()).padStart(2, "0")}`;
             this.postSystem(`${participant.name} finished the reply started at ${hhmm} · ${Math.round(durationMs / 1000)} s`, "human", false, { refId: message.id, agentId: participant.id });
@@ -1874,6 +1910,7 @@ export class Room extends EventEmitter {
         if (turn.published)
             return;
         turn.published = true;
+        turn.publishedAt = Date.now();
         this.push({ type: "message", message: turn.message });
     }
     onSessionUpdate(id, update) {
@@ -1884,11 +1921,16 @@ export class Room extends EventEmitter {
         const turn = runtime.turn;
         switch (update.sessionUpdate) {
             case "agent_message_chunk": {
-                if (!turn)
-                    return;
                 const u = update;
-                let text = contentText(u.content);
                 const messageId = u.messageId ?? null;
+                if (!turn) {
+                    if (messageId)
+                        runtime.strayMessageId = messageId;
+                    return;
+                }
+                if (messageId && messageId === runtime.strayMessageId)
+                    return;
+                let text = contentText(u.content);
                 if (messageId && !turn.sawMessageId && turn.message.text) {
                     const notices = (turn.message.notices ??= []);
                     notices.push(turn.message.text.trim());

package/dist/server.js

@@ -369,7 +369,7 @@ export function startServer(hub, port, log, info, onShutdownRequest) {
             sendJson(res, 200, { ok: true, room: room.snapshot(), notices });
             return;
         }
-        const roomAction = path.match(/^\/api\/rooms\/([^/]+)\/(send|typing|invite|settings|focus|rename|dir|delete|open)$/);
+        const roomAction = path.match(/^\/api\/rooms\/([^/]+)\/(send|typing|invite|settings|focus|rename|dir|delete|open|template-preview|save-template)$/);
         if (roomAction) {
             const room = hub.getRoom(decodeURIComponent(roomAction[1]));
             const action = roomAction[2];
@@ -392,6 +392,23 @@ export function startServer(hub, port, log, info, onShutdownRequest) {
                 const message = room.postHumanMessage(text, imageList(body.images));
                 sendJson(res, 200, { ok: true, id: message.id });
             }
+            else if (action === "template-preview") {
+                sendJson(res, 200, { template: { name: room.name, emoji: room.settings.emoji || "", ...room.templateOf() } });
+            }
+            else if (action === "save-template") {
+                const edited = body.template && typeof body.template === "object" ? body.template : undefined;
+                const template = hub.saveRoomAsTemplate(room.id, {
+                    name: String(body.name ?? ""),
+                    description: String(body.description ?? ""),
+                    emoji: body.emoji === undefined ? undefined : String(body.emoji),
+                    template: edited && {
+                        dir: optionalString(edited.dir) ?? undefined,
+                        settings: edited.settings && typeof edited.settings === "object" ? edited.settings : undefined,
+                        vibemates: Array.isArray(edited.vibemates) ? edited.vibemates : undefined,
+                    },
+                });
+                sendJson(res, 200, { ok: true, template });
+            }
             else if (action === "typing") {
                 room.humanTyping();
                 sendJson(res, 200, { ok: true });

package/dist/templates.js

@@ -1,6 +1,7 @@
 // viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
-import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { existsSync, mkdirSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
+import { writeFileAtomic } from "./atomic.js";
 import { fileURLToPath } from "node:url";
 const ID_PATTERN = /^[a-z0-9][a-z0-9-]{0,39}$/;
 export const SHIPPED_TEMPLATES_DIR = fileURLToPath(new URL("../templates/", import.meta.url));
@@ -22,6 +23,8 @@ export function cleanTemplate(raw, id) {
         }
         if (Array.isArray(o.skills))
             out.skills = o.skills.map((s) => String(s).trim()).filter(Boolean);
+        if (typeof o.replyDelay === "number" && Number.isFinite(o.replyDelay))
+            out.replyDelay = o.replyDelay;
         return out;
     });
     const settings = (t.settings && typeof t.settings === "object" ? t.settings : {});
@@ -32,8 +35,16 @@ export function cleanTemplate(raw, id) {
         out.emoji = t.emoji.trim().slice(0, 8);
     if (t.recommended === true)
         out.recommended = true;
+    if (typeof t.dir === "string" && t.dir.trim())
+        out.dir = t.dir.trim();
+    if (typeof t.created === "string" && t.created.trim())
+        out.created = t.created.trim();
     return out;
 }
+export function templateId(name) {
+    const id = name.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40);
+    return ID_PATTERN.test(id) ? id : "template";
+}
 function readTemplates(dir, log, builtin) {
     const out = [];
     if (!existsSync(dir))
@@ -54,7 +65,7 @@ function readTemplates(dir, log, builtin) {
             log.warn(`template ${entry.name} in ${dir} skipped: ${error instanceof Error ? error.message : String(error)}`);
         }
     }
-    return out.sort((a, b) => (a.order ?? 100) - (b.order ?? 100) || a.name.localeCompare(b.name));
+    return out.sort((a, b) => (a.order ?? 100) - (b.order ?? 100) || (b.created ?? "").localeCompare(a.created ?? "") || a.name.localeCompare(b.name));
 }
 export class TemplateLibrary {
     dir;
@@ -68,9 +79,22 @@ export class TemplateLibrary {
     list() {
         const own = readTemplates(this.dir, this.log, false);
         const taken = new Set(own.map((t) => t.id));
-        return [...readTemplates(this.shippedDir, this.log, true).filter((t) => !taken.has(t.id)), ...own];
+        return [...own, ...readTemplates(this.shippedDir, this.log, true).filter((t) => !taken.has(t.id))];
     }
     get(id) {
         return this.list().find((t) => t.id === id);
     }
+    save(template) {
+        const taken = new Set(this.list().map((t) => t.id));
+        const base = templateId(template.name);
+        let id = base;
+        for (let n = 2; taken.has(id); n++)
+            id = `${base.slice(0, 40 - String(n).length - 1)}-${n}`;
+        const clean = cleanTemplate({ ...template, created: new Date().toISOString() }, id);
+        const folder = join(this.dir, id);
+        mkdirSync(folder, { recursive: true });
+        writeFileAtomic(join(folder, "template.json"), JSON.stringify(clean, null, 2) + "\n");
+        this.log.info(`saved template "${clean.name}" (${id})`);
+        return clean;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberoom",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "viberoom: group chat rooms for a human and several coding agents over the Agent Client Protocol",
   "type": "module",
   "engines": {

package/templates/wren-and-quinn/template.json

@@ -0,0 +1,28 @@
+{
+  "name": "Wren & Quinn",
+  "order": 1,
+  "emoji": "⚒️",
+  "recommended": true,
+  "description": "Two equals around one codebase. Wren builds by default, Quinn explains by default; either does either when asked, and either reviews the other's work when you ask for it. The way viberoom itself was built.",
+  "settings": {
+    "language": {
+      "mode": "follow-human"
+    },
+    "turnTaking": "parallel",
+    "agentsWakeEachOther": true,
+    "hopLimit": 24,
+    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to the one who has worked on that part the most, or most recently; if neither has touched it, to Wren. A question without @ goes to Quinn.\nThe human decides when work is reviewed: ask the other one to review it. Unasked, the other answers questions and otherwise stays silent; it does not review, comment on or extend work it was not asked about. When asked to review, first say in one line what you will check, then check it by that criterion: a number, a live check, the risky case. The builder reports to the human, never to the other vibemate. A build is reported as: what changed (the files, and the commit if the project uses version control), how to verify it (a command, a script, a screenshot), what was not verified, what is left.\nMeasure before diagnosing; say no with a reason and a cheaper alternative; keep replies short.\nWork only on your own task, never on the other's; do not touch what the other is working on.\nReply only when addressed. On a message to everyone, only the one it concerns answers; the other stays silent. Never add to, correct or comment on the other's reply unless the human asks.\nFollow the conventions of the project you work in (its instructions, notes, tests). Where it keeps decision notes, write the decision there before reporting it here.\nRead every proposal and analyse it; agree or reject only with a real argument. Never concede to be agreeable, never object to seem rigorous.\nReply in the human's language. Code identifiers, commands, file paths, protocol and tool names stay exactly as in the code; established technical terms (kernel, thread, commit, pull request, layout) stay in English."
+  },
+  "vibemates": [
+    {
+      "name": "Wren",
+      "tagline": "builds by default; explains and reviews when asked",
+      "role": "You are Wren, one of two equal vibemates, Wren and Quinn. You lean to building: a task without an address is yours when it touches what you have built, or when neither of you has; before you change anything, read what is already there, the notes, the docs and the code, and keep each change small. Everything else is in the room rules."
+    },
+    {
+      "name": "Quinn",
+      "tagline": "explains by default; builds and reviews when asked",
+      "role": "You are Quinn, one of two equal vibemates, Wren and Quinn. You lean to explaining: a question without an address is yours; when you review, it is by a criterion, not an impression. Everything else is in the room rules."
+    }
+  ]
+}

package/ui/app.css

@@ -35,7 +35,7 @@
 .rail-room:hover .room-mark { opacity: 1; transform: translateY(-1px); }
 .rail-room.active, .rail-room.active:hover { background: transparent; box-shadow: none; }
 .rail-room.active .room-mark { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); }
-.rail-room .rail-count { background: linear-gradient(135deg, #ff7a45, #f0452c); min-width: 18px; text-align: center; z-index: 2; }
+.rail-room .rail-count { background: var(--unread-grad); min-width: 18px; text-align: center; z-index: 2; }
 .rail-room .rail-count.bump { animation: badge-pop 360ms var(--ease-pop); }
 @keyframes badge-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
 .shell.rail-open .rail-items { align-items: stretch; padding: 0 14px; }
@@ -214,9 +214,9 @@
 .timeline { position: absolute; right: 6px; top: 78px; bottom: calc(var(--composer-h, 60px) + 36px); width: 18px; z-index: 4; }
 .tl-ticks { position: absolute; inset: 0; }
 .tl-view { position: absolute; left: 2px; right: 2px; border-radius: 6px; background: rgba(91, 91, 240, 0.07); pointer-events: none; transition: top 80ms linear, height 80ms linear; }
-.tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: 3px; background: #cdcdf9; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
+.tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: 3px; background: var(--tick-mine); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
 .tl-tick:hover, .tl-tick.active { background: var(--primary); transform: scaleX(1.25); }
-.tl-tick.in-view { background: #a9a9f5; }
+.tl-tick.in-view { background: var(--tick-mine-view); }
 .tl-tick.pinned { background: var(--primary); }
 .tl-row.current.pinned { background: var(--lav-2); }
 .tl-row.pinned { opacity: 1; color: var(--ink); }
@@ -224,9 +224,9 @@
 .tl-row .tl-pin .i { width: 14px; height: 14px; }
 .timeline.left { left: 6px; right: auto; }
 .timeline.left .tl-view { background: rgba(28, 27, 51, 0.05); }
-.timeline.left .tl-tick { background: color-mix(in srgb, var(--tick, #9ca3af) 35%, #fff); }
-.timeline.left .tl-tick.in-view { background: color-mix(in srgb, var(--tick, #9ca3af) 60%, #fff); }
-.timeline.left .tl-tick.pinned, .timeline.left .tl-tick:hover, .timeline.left .tl-tick.active { background: var(--tick, #9ca3af); }
+.timeline.left .tl-tick { background: color-mix(in srgb, var(--tick, var(--tick-fallback)) 35%, #fff); }
+.timeline.left .tl-tick.in-view { background: color-mix(in srgb, var(--tick, var(--tick-fallback)) 60%, #fff); }
+.timeline.left .tl-tick.pinned, .timeline.left .tl-tick:hover, .timeline.left .tl-tick.active { background: var(--tick, var(--tick-fallback)); }
 .timeline.left .tl-pop { left: 26px; right: auto; }
 .tl-pop::before { content: ""; position: absolute; top: -6px; bottom: -6px; right: -6px; width: 6px; }
 .timeline.left .tl-pop::before { right: auto; left: -6px; }
@@ -265,25 +265,25 @@
 .jump-latest:hover { background: var(--soft); }
 .done-notes { position: absolute; left: 30px; bottom: 96px; z-index: 5; display: flex; flex-direction: column-reverse; gap: 6px; }
 .done-note { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 12px 6px 8px; border: 0; border-radius: 14px; background: var(--warm); color: var(--warm-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-pop); animation: rise var(--t-base) var(--ease-out); overflow: hidden; }
-.done-note:hover { background: #ffeaa8; }
+.done-note:hover { background: var(--note-hover); }
 .done-note .avatar { flex: none; }
 .done-go { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
-.done-go:hover { background: #ffeaa8; }
+.done-go:hover { background: var(--note-hover); }
 .done-go .avatar { flex: none; }
 .done-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
 .done-text b { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .done-text small { font-size: 11px; font-weight: 600; opacity: 0.8; white-space: nowrap; }
 .done-x { border: 0; background: transparent; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; padding: 0 9px; cursor: pointer; }
-.done-x:hover { opacity: 1; background: #ffeaa8; }
+.done-x:hover { opacity: 1; background: var(--note-hover); }
 .jump-latest .i { width: 16px; height: 16px; }
 .bubble { max-width: 100%; background: #fff; border-radius: 6px 18px 18px 18px; padding: 12px 16px; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--ink-2); box-shadow: 0 2px 0 rgba(28, 27, 51, 0.06), 0 1px 3px rgba(28, 27, 51, 0.04); }
 .msg.mine .bubble { background: var(--grad-primary); color: #fff; border-radius: 18px 18px 6px 18px; box-shadow: 0 8px 18px -10px rgba(91, 91, 240, 0.7); padding: 11px 16px; }
 .msg.mine .bubble .text { color: #fff; }
-.msg.mine.waiting .bubble { background: linear-gradient(135deg, #ff9447, #e8642a); box-shadow: 0 8px 18px -10px rgba(232, 100, 42, 0.7); }
+.msg.mine.waiting .bubble { background: var(--attention-grad); box-shadow: var(--attention-shadow); }
 .bubble .waiting { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.35); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
 .bubble .waiting .i { width: 14px; height: 14px; vertical-align: -2px; }
 .bubble .waiting-text { flex: 1; min-width: 160px; }
-.bubble .waiting-stop { border: 0; border-radius: 10px; padding: 6px 12px; background: rgba(255, 255, 255, 0.92); color: #c9461c; font-weight: 800; font-size: 12.5px; cursor: pointer; }
+.bubble .waiting-stop { border: 0; border-radius: 10px; padding: 6px 12px; background: rgba(255, 255, 255, 0.92); color: var(--attention-ink); font-weight: 800; font-size: 12.5px; cursor: pointer; }
 .bubble .waiting-stop:hover:not(:disabled) { background: #fff; }
 .bubble .waiting-stop:disabled { opacity: 0.7; cursor: default; }
 .msg.mine .mention { background: rgba(255, 255, 255, 0.22); color: #fff !important; padding: 1px 7px; border-radius: 6px; font-weight: 800; }
@@ -361,10 +361,17 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .bubble .text.clamped { max-height: 9.2em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
 .bubble .more { background: none; border: 0; color: var(--primary); font-weight: 800; padding: 2px 0; font-size: 13px; }
 .msg.mine .bubble .more { color: #fff; }
-.bubble .pending { color: var(--muted); }
+.bubble .pending { display: inline-flex; align-items: center; gap: 4px; height: 1.55em; vertical-align: text-bottom; }
+.bubble .pending i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.25; animation: think 1.4s ease-in-out infinite; }
+.bubble .pending i:nth-child(2) { animation-delay: 0.2s; }
+.bubble .pending i:nth-child(3) { animation-delay: 0.4s; }
+@keyframes think { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
 .mention { font-weight: 800; }
-.caret { display: inline-block; width: 7px; height: 14px; background: var(--muted); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
-@keyframes blink { to { opacity: 0; } }
+.working { display: inline-block; width: 19px; height: 15px; color: var(--faint); margin-left: 5px; vertical-align: -3px; overflow: visible; }
+.working .forearm { animation: type 0.14s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 23px 27px; }
+.working .body { animation: bob 0.28s ease-in-out infinite alternate; }
+@keyframes type { from { transform: rotate(-16deg); } to { transform: rotate(4deg); } }
+@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-0.8px); } }
 .thought { margin: 2px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
 .thought summary { cursor: pointer; }
 .thought-text { white-space: pre-wrap; padding: 4px 0 0 8px; border-left: 2px solid var(--lav-2); margin-top: 4px; }
@@ -374,7 +381,20 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .tool { display: inline-flex; flex-direction: column; max-width: 100%; min-width: 0; }
 .tool.open { flex-basis: 100%; }
 .tool > .chip { font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; text-align: left; }
-.tool-body { margin: 4px 0 2px; padding: 8px 10px; background: var(--soft); border-radius: 10px; font-size: 12px; max-height: 340px; overflow: auto; }
+.tool > .chip-completed { --tool-bg: var(--mint); --tool-ink: var(--mint-ink); }
+.tool > .chip-failed { --tool-bg: var(--rose); --tool-ink: var(--rose-ink); }
+.tool > .chip-in_progress { --tool-bg: var(--warm); --tool-ink: var(--warm-ink); }
+.tool > .chip-pending { --tool-bg: var(--lav); --tool-ink: var(--primary); }
+.tool > .chip::after { content: "▾"; margin-left: auto; padding-left: 8px; opacity: 0.55; transition: transform var(--t-fast); }
+.tool.open > .chip { width: 100%; border-radius: 12px 12px 0 0; padding: 6px 12px; white-space: normal; }
+.tool.open > .chip::after { transform: rotate(180deg); }
+.tool.open { --tool-bg: var(--lav); --tool-ink: var(--primary); }
+.tool.open > .chip-completed ~ .tool-body, .tool.open > .chip-completed + .tool-body { --tool-bg: var(--mint); --tool-ink: var(--mint-ink); }
+.tool.open > .chip-failed + .tool-body { --tool-bg: var(--rose); --tool-ink: var(--rose-ink); }
+.tool.open > .chip-in_progress + .tool-body { --tool-bg: var(--warm); --tool-ink: var(--warm-ink); }
+.tool-body { margin: 0; padding: 8px 10px 10px; background: var(--card); border: 2px solid var(--tool-bg, var(--lav)); border-top: 0; border-radius: 0 0 12px 12px; font-size: 12px; max-height: 340px; overflow: auto; }
+.tool-body pre { background: var(--soft); color: var(--ink); padding: 6px 8px; border-radius: 8px; }
+.tool-sec b { color: var(--tool-ink, var(--muted)); }
 .tool-sec + .tool-sec { margin-top: 8px; }
 .tool-sec b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
 .tool-sec.muted { color: var(--muted); font-style: italic; }
@@ -390,8 +410,8 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .head .edit-btn .i, .head .pin-btn .i { width: 14px; height: 14px; }
 .msg:hover .head .edit-btn, .head .edit-btn:focus, .msg:hover .head .pin-btn, .head .pin-btn:focus { opacity: 1; }
 .head .edit-btn:hover { color: var(--primary); }
-.head .pin-btn:hover { color: #ff8a3d; }
-.msg.pinned .head .pin-btn { opacity: 1; color: #ff8a3d; }
+.head .pin-btn:hover { color: var(--attention); }
+.msg.pinned .head .pin-btn { opacity: 1; color: var(--attention); }
 .edit-box { margin: 4px 0 6px; }
 .msg .bubble-col:has(> .bubble > .edit-box:not([hidden])) { width: 100%; }
 .msg .bubble:has(> .edit-box:not([hidden])) { width: min(760px, 100%); }
@@ -415,7 +435,7 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .perm-result { color: var(--muted); font-size: 12px; }
 .visibility-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
 .visibility-divider .vd-line { flex: 1; height: 8px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23f472b6' stroke-width='1.6'/></svg>") repeat-x center / 16px 8px; opacity: 0.7; }
-.visibility-divider .vd-label { color: #be185d; background: #fff1f7; border-radius: var(--r-pill); padding: 4px 12px; font-size: 11px; font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
+.visibility-divider .vd-label { color: var(--unseen-ink); background: var(--unseen-bg); border-radius: var(--r-pill); padding: 4px 12px; font-size: 11px; font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
 .msg.hidden { justify-content: center; }
 .hidden-turn { max-width: 720px; width: 100%; background: var(--soft); border-radius: 12px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
 .hidden-turn summary { cursor: pointer; list-style: none; }
@@ -549,6 +569,31 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .tpl-meta { color: var(--muted); font-size: 12px; font-weight: 600; }
 .tpl-item .avatar-stack { margin-top: 2px; }
 .tpl-rec { background: var(--warm); color: var(--warm-ink); font-size: 10px; padding: 1px 7px; }
+.tpl-mine { background: var(--lav); color: var(--primary); font-size: 10px; padding: 1px 7px; }
+.tpl-runs { display: flex; flex-wrap: wrap; gap: 6px; }
+.stp-preview { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow: auto; padding-right: 4px; margin: 4px 0 10px; }
+.stp-section { background: var(--soft); border-radius: 14px; padding: 10px 12px; }
+.section.template { background: var(--lav); margin: 22px 0 14px; padding: 16px 18px 18px; box-sizing: border-box; width: 100%; overflow: hidden; }
+.section.template > h4 { color: var(--primary); }
+.stp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
+.stp-grid .field { margin-bottom: 8px; }
+.stp-grid .field.wide { grid-column: 1 / -1; }
+.stp-grid .switch { margin: 2px 0 8px; }
+.stp-vm { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 10px 0 4px; border-top: 1px solid var(--lav-2); }
+.stp-vm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
+.stp-vm-fields .field { margin-bottom: 8px; }
+.stp-vm-fields .field.wide { grid-column: 1 / -1; }
+.stp-vm-fields .field textarea { min-height: 54px; }
+.stp-vm-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.stp-vm-top b { flex: 1; }
+.stp-section h5 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
+.stp-section .kv { font-size: 12.5px; }
+.stp-section ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
+.stp-vm { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--lav-2); }
+.stp-vm:first-of-type { border-top: 0; padding-top: 2px; }
+.stp-vm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
+.stp-vm-role { color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.45; margin-top: 3px; }
+.stp-vm .chips { margin-top: 5px; }
 .tpl-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; opacity: 0; transition: opacity var(--t-fast); }
 .tpl-check .i { width: 12px; height: 12px; }
 .tpl-item.on .tpl-check { opacity: 1; }
@@ -578,7 +623,10 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .check-list.locked { pointer-events: none; opacity: 0.6; }
 .msg.system.done { justify-content: center; }
 .done-row { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 0; border-radius: var(--r-pill); background: var(--warm); color: var(--warm-ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: var(--edge); }
-.done-row:hover { background: #ffeaa8; }
+.done-row:hover { background: var(--note-hover); }
 .done-notes { flex-direction: column; }
 .done-note.new { background: var(--card); color: var(--ink-2); }
 .done-note.new:hover { background: var(--soft); }
+.meta .seen-by { color: var(--primary); font-weight: 800; margin-left: 6px; }
+.section.template .stp-row { justify-content: center; margin: 6px 0 0; }
+.section.template .field-note { margin: -2px 0 12px; }