viberoom 0.5.2 → 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,
@@ -1886,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.2",
+  "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; }
@@ -403,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%); }
@@ -428,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; }
@@ -562,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; }
@@ -591,8 +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; }

package/ui/app.js

@@ -128,7 +128,39 @@
     eraseSubmit: $("#erase-submit"),
   };
 
-  const STATUS_LABEL = { unstaffed: "needs a coding agent", starting: "starting…", idle: "ready", queued: "waiting…", thinking: "thinking…", error: "error", offline: "offline", left: "left" };
+  const FONTS = {
+    text: {
+      nunito: { label: "Nunito (default)", stack: '"Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
+      inter: { label: "Inter", stack: '"Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
+      "noto-sans": { label: "Noto Sans", stack: '"Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
+      arial: { label: "Arial / Helvetica (system)", stack: 'Arial, Helvetica, "Liberation Sans", sans-serif' },
+      system: { label: "System UI font", stack: 'system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, sans-serif' },
+    },
+    mono: {
+      "jetbrains-mono": { label: "JetBrains Mono (default)", stack: '"JetBrains Mono", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
+      "fira-code": { label: "Fira Code", stack: '"Fira Code", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
+      "source-code-pro": { label: "Source Code Pro", stack: '"Source Code Pro", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
+      system: { label: "System monospace", stack: 'ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", "Courier New", monospace' },
+    },
+  };
+  const STATUS_LABEL = { unstaffed: "needs a coding agent", starting: "starting…", idle: "ready", queued: "waiting…", thinking: "thinking…", writing: "writing…", error: "error", offline: "offline", left: "left" };
+  const FALLBACK_COLOR = "#9ca3af";
+  const WORKING_SVG = '<svg class="working" viewBox="0 0 44 35" aria-hidden="true" title="working…">'
+    + '<g class="body">'
+    + '<circle cx="20" cy="6.5" r="5.6" fill="currentColor"/>'
+    + '<path d="M6 35L13.7 16.5a4 4 0 0 1 8 0L14 35z" fill="currentColor"/>'
+    + '</g>'
+    + '<path d="M19 19.5L23 27" fill="none" stroke="currentColor" stroke-width="4.4" stroke-linecap="round"/>'
+    + '<g class="forearm"><path d="M23 27h10.5" fill="none" stroke="currentColor" stroke-width="4.4" stroke-linecap="round"/></g>'
+    + '<rect x="26" y="30.2" width="15.5" height="3" rx="1" fill="currentColor"/>'
+    + '<path d="M35.9 30.2L41.1 14h2.4l-5.1 16.2z" fill="currentColor"/>'
+    + '<rect x="18" y="33.2" width="25" height="1.3" rx=".6" fill="currentColor"/>'
+    + '</svg>';
+
+  function shownStatus(room, p) {
+    if (p.status !== "thinking") return p.status;
+    return room.messages.some((m) => m.streaming && m.from === p.id) ? "writing" : "thinking";
+  }
   const CHAT_EMOJI = ["😀", "😄", "😂", "🙂", "😉", "😍", "🤔", "😎", "🥳", "😅", "😢", "😡", "👍", "👎", "👋", "🙏", "👏", "💪", "🔥", "✨", "🎉", "❤️", "💜", "✅", "❌", "⚠️", "💡", "🚀", "🐛", "🤖", "🤫", "☕"];
   const ROOM_EMOJI = ["🎭", "🚀", "🧪", "🛠️", "🎨", "📚", "🧠", "💬", "🔬", "🎯", "🐙", "☕", "🌈", "🏗️", "🎮", "🔥", "🧩", "📈", "🗺️", "🎧", "🌱", "🏠", "🛸", "🧭"];
   function emojiGrid(list, current, onPick) {
@@ -391,7 +423,7 @@
   function mermaidThemeVariables(d) {
     d = diagramSettings(d);
     const preset = DIAGRAM_PRESETS[d.preset] || DIAGRAM_PRESETS.pop;
-    const vars = Object.assign({}, preset, { fontFamily: "Nunito, Segoe UI, system-ui, -apple-system, Roboto, sans-serif", fontSize: "13px" });
+    const vars = Object.assign({}, preset, { fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--font").trim() || "Nunito, sans-serif", fontSize: "13px" });
     delete vars.label;
     delete vars.palette;
     if (preset.palette) preset.palette.forEach((c, i) => (vars[`pie${i + 1}`] = c.fill));
@@ -1070,6 +1102,7 @@
       const selected = (state.selection.kind === "participant" && state.selection.id === p.id) || (p.kind === "human" && state.selection.kind === "me" && state.detailsOpen);
       const asleep = p.kind === "agent" && (p.status === "offline" || p.status === "left");
       const unstaffed = p.kind === "agent" && p.status === "unstaffed";
+      const shown = shownStatus(room, p);
       const className = (p.kind === "human" ? "me" : "") + (selected ? " selected" : "") + (asleep ? " offline" : "") + (unstaffed ? " unstaffed" : "");
       const sub = p.kind === "human" ? "you, the human" : [p.tagline ? `"${p.tagline}"` : "", p.agentVendor || p.agentLabel, p.model].filter(Boolean).join(" · ");
       const warn = p.statusDetail && (p.status === "offline" || p.status === "error" || p.failedTurns) ? `<div class="p-warn" title="${esc(p.statusDetail)}">${esc(p.statusDetail)}</div>` : "";
@@ -1077,9 +1110,9 @@
         ? `<span class="badge status-unstaffed" title="Click to summon this vibemate: pick the coding agent that runs it">summon</span>`
         : asleep
         ? `<span class="zzz" title="${esc(STATUS_LABEL[p.status] || p.status)}">zzz</span>`
-        : p.kind === "agent" && p.status !== "idle" ? `<span class="badge status-${p.status}">${p.status === "thinking" ? '<span class="dot"></span>' : ""}${STATUS_LABEL[p.status] || p.status}</span>` : "";
+        : p.kind === "agent" && p.status !== "idle" ? `<span class="badge status-${shown}">${p.status === "thinking" ? '<span class="dot"></span>' : ""}${STATUS_LABEL[shown] || shown}</span>` : "";
       const avatarHtml = avatar(p.kind === "human" ? meAvatarData() : p, 44, { vendor: true });
-      const statusClass = p.kind === "agent" ? `avatar-status status-${esc(p.status || "idle")}` : "";
+      const statusClass = p.kind === "agent" ? `avatar-status status-${esc(shown || "idle")}` : "";
       const bodyHtml = `<div class="p-body">
           <div class="p-name"><span>${esc(p.name)}</span>${p.muted ? '<span class="badge muted">muted</span>' : ""}${status}</div>
           <div class="p-sub">${esc(sub)}</div>
@@ -1228,7 +1261,7 @@
         : `<div class="sys${warn ? " warn" : ""}" title="${esc(fullTime(m.ts))}">${esc(m.text)}</div>`;
       return el;
     }
-    const p = findById(room, m.from) || { name: m.fromName, color: "#9ca3af", kind: m.from === "human" ? "human" : "agent" };
+    const p = findById(room, m.from) || { name: m.fromName, color: FALLBACK_COLOR, kind: m.from === "human" ? "human" : "agent" };
     const mine = m.from === "human";
     el.className = "msg " + (mine ? "mine" : "agent");
     el.innerHTML = `
@@ -1377,9 +1410,9 @@
     const more = el.querySelector(".more");
     const long = !m.streaming && m.text.length > CLAMP_CHARS;
     const expanded = state.expanded.has(m.id);
-    text.innerHTML = renderText(room, m.text, m.images) + (m.streaming ? '<span class="caret"></span>' : "");
+    text.innerHTML = renderText(room, m.text, m.images) + (m.streaming ? WORKING_SVG : "");
     if (!m.streaming) renderDiagrams(text);
-    if (m.streaming && !m.text) text.innerHTML = '<span class="pending">…</span>';
+    if (m.streaming && !m.text) text.innerHTML = '<span class="pending" title="thinking…"><i></i><i></i><i></i></span>';
     text.classList.toggle("clamped", long && !expanded);
     more.hidden = !long;
     more.textContent = expanded ? "Show less" : "Show more";
@@ -1434,8 +1467,9 @@
     if (!present.length) return "";
     const seen = present.filter((p) => p.lastSeenSeq != null && p.lastSeenSeq >= m.seq);
     if (seen.length === present.length) return "";
-    if (!seen.length) return `<span class="ticks">✓</span> sent`;
-    return `<span class="ticks">✓✓</span> seen by ${esc(seen.map((p) => p.name).join(", "))}`;
+    const you = m.from !== "human";
+    if (!seen.length) return `<span class="ticks">✓</span> sent${you ? " · seen by you" : ""}`;
+    return `<span class="ticks">✓✓</span> seen by ${esc([...(you ? ["you"] : []), ...seen.map((p) => p.name)].join(", "))}`;
   }
   function fillSeen(el, room, m) {
     if (m.kind !== "chat" || m.streaming) return;
@@ -1561,6 +1595,7 @@
       if (empty) empty.remove();
       els.messages.appendChild(messageElement(room, m));
       if (m.from === "human") refreshSeen(room);
+      if (m.streaming && m.from !== "human") renderSideRoom();
       else if (!stick && m.kind === "chat") noteNew(room, m);
     }
     if (stick) scrollToBottom();
@@ -1997,7 +2032,7 @@
         ${field("Emoji", `<div id="rp-emoji-picker"></div><input type="text" id="rp-emoji" maxlength="8" value="${esc(rs.emoji || "")}" placeholder="custom emoji (optional)">`, "A face for the room, next to its name.")}
         ${field("Topic", `<input type="text" id="rp-topic" maxlength="2000" value="${esc(rs.topic || "")}" placeholder="what this room is about (optional)">`)}
         ${field("Folder", `<span class="dir-row"><input type="text" id="rp-dir" maxlength="1000" value="${esc(room.dir)}" spellcheck="false"><button type="button" class="btn ghost browse-btn" id="rp-dir-browse" title="Choose a folder">${ic("folder")}Browse</button></span>`, "Where the vibemates read and write. Changing it restarts them in the new folder; they replay the last messages.")}
-        <label class="field mention-host"><span class="label">Room rules${geekTip("References follow renames and note when a participant has left. Rules go into every vibemate's brief as instructions, not as routing.")}</span><div id="rp-rules" class="rules-editor" contenteditable="true" spellcheck="true" data-placeholder="e.g. Everyone listens to @Pesho, he is the manager. Keep answers under 3 sentences."></div><span class="hint">One rule per line; type @ to reference a participant.</span><div class="mention-menu inline" id="rp-rules-menu" hidden></div></label>
+        <div class="field mention-host"><span class="label">Room rules${geekTip("References follow renames and note when a participant has left. Rules go into every vibemate's brief as instructions, not as routing.")}</span><div id="rp-rules" class="rules-editor" contenteditable="true" spellcheck="true" data-placeholder="e.g. Everyone listens to @Pesho, he is the manager. Keep answers under 3 sentences."></div><span class="hint">One rule per line; type @ to reference a participant.</span><div class="mention-menu inline" id="rp-rules-menu" hidden></div></div>
         ${field("Language", `<input type="text" id="rp-lang" value="${esc(lang)}" placeholder="follow the human (default), or e.g. English">`)}
       </div>
       <div class="section">
@@ -2007,6 +2042,11 @@
         <label class="switch"><span class="label">Vibemates wake each other<span class="hint">A reply without @ wakes every other vibemate, as yours does; each may answer or stay silent. Off: only @Name wakes a vibemate. The hop limit applies either way.</span></span><input type="checkbox" id="rp-wake" ${rs.agentsWakeEachOther !== false ? "checked" : ""}></label>
         <label class="switch"><span class="label">Wait while you are typing<span class="hint">A vibemate about to start holds back while you type (a few seconds after your last keystroke). A reply already under way is not interrupted.</span></span><input type="checkbox" id="rp-wait-typing" ${rs.waitWhileHumanTypes !== false ? "checked" : ""}></label>
       </div>
+      <div class="section template">
+        ${sectionTitle("rooms", "Turn this room into a template")}
+        <p class="field-note">Its settings, rules, folder and vibemates (with the coding agent each runs on) become one of your templates, listed first under "Start from a template". You see everything it will contain, and can change any of it, before you create it.</p>
+        <div class="row-btns start stp-row"><button type="button" class="btn sm primary" id="rp-template">${ic("rooms")}Preview and create template</button></div>
+      </div>
       ${geek(
         "rp-geek",
         `<div class="section">
@@ -2034,6 +2074,7 @@
         <label class="switch"><span class="label">Repeat core rules in every header</span><input type="checkbox" id="rp-header-rules" ${rs.headerRules ? "checked" : ""}></label>
         <label class="switch"><span class="label">Show vendor and model to other vibemates</span><input type="checkbox" id="rp-vendor" ${rs.showVendorInRoster ? "checked" : ""}></label>
         ${field("Replay last N chat messages after a reconnect", `<input type="number" id="rp-replay" min="0" max="200" value="${rs.replayAfterRestart}">`)}
+        ${field("Missed messages a vibemate reads at most on its next turn", `<input type="number" id="rp-backlog" min="1" max="1000" value="${rs.backlogCap}">`, "Everything posted since its last turn counts, including while it was muted; older messages are dropped with a note in its prompt.")}
       </div>`,
         "tools, hops, referee, briefs",
       )}
@@ -2057,6 +2098,7 @@
       $("#rp-dir").value = dir;
       $("#rp-dir").dispatchEvent(new Event("change", { bubbles: true }));
     }));
+    $("#rp-template").addEventListener("click", () => openSaveTemplateDialog(room));
     bindSave($("#rp-form"), $("#rp-save"), async () => {
         const name = $("#rp-name").value;
         if (name.trim() !== room.name) await post(roomApi("/rename"), { name });
@@ -2075,6 +2117,7 @@
           headerRules: $("#rp-header-rules").checked,
           showVendorInRoster: $("#rp-vendor").checked,
           replayAfterRestart: Number($("#rp-replay").value),
+          backlogCap: Number($("#rp-backlog").value),
           refereeAction: $("#rp-referee").value,
           turnTaking: $("#rp-turns").value,
           waitWhileHumanTypes: $("#rp-wait-typing").checked,
@@ -2130,6 +2173,13 @@
             ${field("Turn taking in new rooms", `<select id="sp-turns"><option value="one-at-a-time"${d.turnTaking !== "parallel" ? " selected" : ""}>One vibemate at a time</option><option value="parallel"${d.turnTaking === "parallel" ? " selected" : ""}>All addressed vibemates at once</option></select>`)}
             ${field("Reply delay in new rooms, seconds", `<input type="number" id="sp-delay" min="0" max="120" step="0.5" value="${d.replyDelay ?? 4}">`, "Used when two or more vibemates share a room; each room can change it; a vibemate can override it in its own panel.", "Before each turn a vibemate waits a random 0–N seconds, so replies cross less often. Messages that arrive meanwhile land in its backlog. A vibemate alone answers at once unless it has its own delay.")}
           </div>
+          <div class="section" id="sp-appearance">
+            ${sectionTitle("eye", "Appearance")}
+            ${field("Text size, px", `<input type="number" id="sp-chat-fs" min="12" max="24" step="0.5" value="${esc(String((s.appearance || {}).chatFontSize || 14.5))}">`, "The size of the chat text; 14.5 is the default. Everything else in the window scales with it.")}
+            ${field("Font", `<select id="sp-font">${Object.entries(FONTS.text).map(([id, f]) => `<option value="${id}"${((s.appearance || {}).font || "nunito") === id ? " selected" : ""}>${esc(f.label)}</option>`).join("")}</select>`, "Nunito, Inter and Noto Sans come with viberoom and look the same on every OS; the system entries use what this machine has.")}
+            ${field("Code font", `<select id="sp-mono">${Object.entries(FONTS.mono).map(([id, f]) => `<option value="${id}"${((s.appearance || {}).mono || "jetbrains-mono") === id ? " selected" : ""}>${esc(f.label)}</option>`).join("")}</select>`, "For code blocks, paths and tool output.")}
+            <div class="bubble" id="sp-chat-sample" style="display:inline-block;font-size:${((s.appearance || {}).chatFontSize || 14.5) / zoomFactor()}px">Messages will read like this, with <code>code</code> a step smaller.</div>
+          </div>
           <div class="section" id="sp-editor">
             ${sectionTitle("pencil", "Open files at a line")}
             <label class="field"><span class="label">A click on a path like main.ts:375 opens the file in${geekTip("Only an editor can jump to a line; the OS default app just opens the file. Auto looks for VS Code, Cursor, Windsurf, Zed, Sublime Text, Notepad++ and the JetBrains IDEs, in that order, on PATH and in their usual folders. Custom: a command with {file}, {line} and {column} placeholders, e.g. code --goto {file}:{line}.")}</span>
@@ -2231,6 +2281,13 @@
     });
     $("#sp-diagram-color").addEventListener("input", redrawPreview);
     renderDiagrams(diagramSection, previewTheme());
+    const sample = $("#sp-chat-sample");
+    $("#sp-chat-fs").addEventListener("input", () => {
+      const px = Number($("#sp-chat-fs").value);
+      if (px >= 12 && px <= 24) sample.style.fontSize = `${px / zoomFactor()}px`;
+    });
+    $("#sp-font").addEventListener("change", () => (sample.style.fontFamily = FONTS.text[$("#sp-font").value].stack));
+    $("#sp-mono").addEventListener("change", () => sample.querySelectorAll("code").forEach((c) => (c.style.fontFamily = FONTS.mono[$("#sp-mono").value].stack)));
     bindSave($("#sp-form"), $("#sp-save"), async () => {
         const vendorPresets = {};
         els.pageInner.querySelectorAll("input[data-vendor]").forEach((inp) => {
@@ -2242,6 +2299,7 @@
           agentSkillsNeedApproval: $("#sp-skill-approval").checked,
           diagrams: { preset: $("#sp-diagram-preset").value, primary: $("#sp-diagram-custom").checked ? $("#sp-diagram-color").value : null },
           editor: { mode: $("#sp-editor-mode").value, command: $("#sp-editor-cmd").value },
+          appearance: { chatFontSize: Number($("#sp-chat-fs").value), font: $("#sp-font").value, mono: $("#sp-mono").value },
           roomDefaults: {
             turnTaking: $("#sp-turns").value,
             replyDelay: Number($("#sp-delay").value),
@@ -2802,7 +2860,7 @@
         const faces = t.vibemates.slice(0, 4).map((v) => avatar({ name: v.name, avatar: v.avatar, color: "#9ca3af" }, 20, {})).join("");
         return `<button type="button" class="tpl-item${on ? " on" : ""}" data-id="${esc(t.id)}" role="radio" aria-checked="${on ? "true" : "false"}">
           <span class="tpl-emoji">${esc(t.emoji || "🧩")}</span>
-          <span class="tpl-body"><b>${esc(t.name)}${t.recommended ? '<span class="badge tpl-rec">recommended</span>' : ""}</b><span class="tpl-meta">${t.vibemates.length} vibemate${t.vibemates.length === 1 ? "" : "s"}${t.builtin ? " · built in" : " · yours"}</span><span class="avatar-stack">${faces}</span></span>
+          <span class="tpl-body"><b>${esc(t.name)}${t.builtin ? "" : '<span class="badge tpl-mine">your template</span>'}${t.recommended ? '<span class="badge tpl-rec">recommended</span>' : ""}</b><span class="tpl-meta">${t.vibemates.length} vibemate${t.vibemates.length === 1 ? "" : "s"}${t.builtin ? " · built in" : ""}</span><span class="avatar-stack">${faces}</span></span>
           <span class="tpl-check">${ic("check")}</span>
         </button>`;
       })
@@ -2828,10 +2886,14 @@
           return `<div class="tpl-vm" data-i="${i}">
             <div class="tpl-vm-head"><b>${esc(v.name)}</b>${v.tagline ? `<span class="hint">"${esc(v.tagline)}"</span>` : ""}</div>
             ${v.role ? `<div class="tpl-vm-role">${esc(v.role)}</div>` : ""}
+            ${runsOn(v)}
           </div>`;
         })
         .join("")}`;
-    tplEls.detail.insertAdjacentHTML("beforeend", '<p class="hint">You pick the coding agent for each vibemate in the room, right after it opens.</p>');
+    if (t.dir) tplEls.detail.insertAdjacentHTML("beforeend", `<p class="hint">Folder: <code>${esc(t.dir)}</code> (you can change it below)</p>`);
+    tplEls.detail.insertAdjacentHTML("beforeend", t.vibemates.some((v) => v.agentType)
+      ? '<p class="hint">A vibemate whose coding agent is not installed here waits in the roster until you pick another.</p>'
+      : '<p class="hint">You pick the coding agent for each vibemate in the room, right after it opens.</p>');
   }
   $("#tpl-dir-browse").addEventListener("click", () => openFolderPicker(tplEls.dir.value, (dir) => (tplEls.dir.value = dir)));
   tplEls.form.addEventListener("submit", async (event) => {
@@ -2858,6 +2920,142 @@
     }
   });
 
+  function runsOn(v) {
+    if (!v.agentType) return "";
+    const rec = state.recipes.find((r) => r.id === v.agentType);
+    const parts = [rec ? rec.vendor : v.agentType, v.model, v.effort, v.mode].filter(Boolean);
+    return `<div class="chips tpl-runs">${parts.map((x) => `<span class="chip">${esc(x)}</span>`).join("")}${rec && rec.unavailableReason ? '<span class="badge status-offline">not installed here</span>' : ""}</div>`;
+  }
+
+  const stpEls = { dialog: $("#save-template-dialog"), form: $("#save-template-form"), name: $("#stp-name"), desc: $("#stp-desc"), preview: $("#stp-preview"), error: $("#stp-error"), create: $("#stp-create") };
+  const stp = { room: null, template: null };
+  async function openSaveTemplateDialog(room) {
+    stp.room = room;
+    stpEls.error.hidden = true;
+    stpEls.name.value = room.name;
+    stpEls.desc.value = "";
+    stpEls.preview.innerHTML = '<span class="hint">loading…</span>';
+    openDialog(stpEls.dialog);
+    try {
+      const t = (await post(roomApi("/template-preview"), {})).template;
+      stp.template = t;
+      stpEls.preview.innerHTML = renderTemplateForm(t);
+      stpEls.preview.querySelectorAll("[data-stp-browse]").forEach((b) => b.addEventListener("click", () => {
+        const input = $("#stp-dir");
+        openFolderPicker(input.value, (dir) => (input.value = dir));
+      }));
+      stpEls.preview.querySelectorAll("[data-stp-remove]").forEach((b) => b.addEventListener("click", () => {
+        b.closest(".stp-vm").remove();
+        $("#stp-vm-count").textContent = String(stpEls.preview.querySelectorAll(".stp-vm").length);
+      }));
+    } catch (error) {
+      stpEls.error.textContent = error.message;
+      stpEls.error.hidden = false;
+    }
+  }
+  const stpField = (label, html, wide) => `<label class="field${wide ? " wide" : ""}"><span class="label">${label}</span>${html}</label>`;
+  const stpSwitch = (label, id, on) => `<label class="switch"><span class="label">${label}</span><input type="checkbox" id="${id}"${on ? " checked" : ""}></label>`;
+  const stpSelect = (id, value, options) => `<select id="${id}">${options.map(([v, l]) => `<option value="${esc(v)}"${String(value) === v ? " selected" : ""}>${esc(l)}</option>`).join("")}</select>`;
+  function renderTemplateForm(t) {
+    const st = t.settings || {};
+    const lang = st.language && st.language.mode === "fixed" ? st.language.language : "";
+    const room = `<div class="stp-grid">
+      ${stpField("Emoji", `<input type="text" id="stp-emoji" maxlength="8" value="${esc(t.emoji || "")}" placeholder="none">`)}
+      ${stpField("Topic", `<input type="text" id="stp-topic" maxlength="2000" value="${esc(st.topic || "")}" placeholder="what the room is about">`)}
+      ${stpField("Language", `<input type="text" id="stp-lang" value="${esc(lang)}" placeholder="follow the human (default), or e.g. English">`)}
+      ${stpField("Vibemates' own tools", stpSelect("stp-tools", st.tools || "on-request", [["on-request", "Only when someone explicitly asks"], ["never", "Never (chat only)"]]))}
+      ${stpField("Who may speak", stpSelect("stp-turns", st.turnTaking || "parallel", [["parallel", "All addressed vibemates at once"], ["one-at-a-time", "One vibemate at a time"]]))}
+      ${stpField("Reply delay, seconds", `<input type="number" id="stp-delay" min="0" max="120" step="0.5" value="${esc(String(st.replyDelay ?? 4))}">`)}
+      ${stpSwitch("Vibemates wake each other", "stp-wake", st.agentsWakeEachOther !== false)}
+      ${stpSwitch("Wait while you are typing", "stp-wait", st.waitWhileHumanTypes !== false)}
+      ${stpField("Hop limit", `<input type="number" id="stp-hops" min="0" max="10000" value="${esc(String(st.hopLimit ?? 100))}">`)}
+      ${stpField("Max sentences per reply", `<input type="number" id="stp-maxlen" min="1" max="100" value="${st.maxSentences ?? ""}" placeholder="no limit">`)}
+      ${stpField("Referee", stpSelect("stp-referee", st.refereeAction || "next-header", [["next-header", "Post it; remind in the next header"], ["retry-hidden", "Hold it; retry in a hidden turn"]]))}
+      ${stpField("About you", stpSelect("stp-about", st.humanDescriptionMode || "inherit", [["inherit", "Program-wide description"], ["append", "Program-wide + this room's"], ["override", "Only this room's"], ["none", "Nothing about me"]]))}
+      ${stpField("Full brief every N turns", `<input type="number" id="stp-brief-turns" min="1" max="10000" value="${esc(String(st.fullBriefEveryTurns ?? 8))}">`)}
+      ${stpField("…or every N tokens", `<input type="number" id="stp-brief-tokens" min="1000" max="10000000" step="1000" value="${esc(String(st.fullBriefEveryTokens ?? 20000))}">`)}
+      ${stpField("Replay after a reconnect", `<input type="number" id="stp-replay" min="0" max="200" value="${esc(String(st.replayAfterRestart ?? 10))}">`)}
+      ${stpField("Missed messages read at most", `<input type="number" id="stp-backlog" min="1" max="1000" value="${esc(String(st.backlogCap ?? 50))}">`)}
+      ${stpSwitch("Core rules in every header", "stp-header-rules", st.headerRules !== false)}
+      ${stpSwitch("Show vendor and model to other vibemates", "stp-vendor", !!st.showVendorInRoster)}
+    </div>`;
+    const agentOptions = [["", "none yet: cast when the room opens"], ...state.recipes.map((r) => [r.id, r.vendor + (r.unavailableReason ? " (not installed here)" : "")])];
+    const vms = (t.vibemates || []).map((v, i) => `<div class="stp-vm" data-i="${i}">${avatar({ name: v.name, avatar: v.avatar, color: "#9ca3af" }, 36, {})}<div>
+        <div class="stp-vm-top"><b>${esc(v.name)}</b><button type="button" class="icon-btn sm ghost" title="Leave this vibemate out of the template" data-stp-remove>${ic("close")}</button></div>
+        <div class="stp-vm-fields">
+          ${stpField("Vibename", `<input type="text" data-k="name" maxlength="40" value="${esc(v.name)}" required>`)}
+          ${stpField("Vibersona", `<input type="text" data-k="tagline" maxlength="80" value="${esc(v.tagline || "")}">`)}
+          ${stpField("Vibio", `<textarea data-k="role" rows="3" maxlength="4000">${esc(v.role || "")}</textarea>`, true)}
+          ${stpField("Vibeface", `<input type="text" data-k="avatar" maxlength="8" value="${esc(v.avatar || "")}" placeholder="initials">`)}
+          ${stpField("Coding agent", stpSelect("", v.agentType || "", agentOptions).replace('id=""', 'data-k="agentType"'))}
+          ${stpField("Model", `<input type="text" data-k="model" value="${esc(v.model || "")}" placeholder="the agent's default">`)}
+          ${stpField("Effort", `<input type="text" data-k="effort" value="${esc(v.effort || "")}" placeholder="default">`)}
+          ${stpField("Mode", `<input type="text" data-k="mode" value="${esc(v.mode || "")}" placeholder="default">`)}
+          ${stpField("Reply delay override, s", `<input type="number" data-k="replyDelay" min="0" max="120" step="0.5" value="${v.replyDelay ?? ""}" placeholder="the room's">`)}
+          ${stpField("Skills, comma-separated", `<input type="text" data-k="skills" value="${esc((v.skills || []).join(", "))}">`, true)}
+        </div>
+      </div></div>`).join("");
+    return `
+      <div class="stp-section"><h5>Room</h5>${room}</div>
+      <div class="stp-section"><h5>Room rules</h5><textarea id="stp-rules" rows="5" maxlength="4000" placeholder="one rule per line">${esc(st.customRules || "")}</textarea></div>
+      <div class="stp-section"><h5>Folder</h5><span class="dir-row"><input type="text" id="stp-dir" maxlength="1000" value="${esc(t.dir || "")}" spellcheck="false"><button type="button" class="btn ghost browse-btn" data-stp-browse>${ic("folder")}Browse</button></span></div>
+      <div class="stp-section"><h5>Vibemates · <span id="stp-vm-count">${(t.vibemates || []).length}</span></h5>${vms || '<span class="hint">none</span>'}</div>`;
+  }
+  function readTemplateForm() {
+    const num = (id) => Number($(id).value);
+    const langText = $("#stp-lang").value.trim();
+    const settings = {
+      topic: $("#stp-topic").value,
+      language: langText ? { mode: "fixed", language: langText } : { mode: "follow-human" },
+      tools: $("#stp-tools").value,
+      turnTaking: $("#stp-turns").value,
+      replyDelay: num("#stp-delay"),
+      agentsWakeEachOther: $("#stp-wake").checked,
+      waitWhileHumanTypes: $("#stp-wait").checked,
+      hopLimit: num("#stp-hops"),
+      maxSentences: $("#stp-maxlen").value === "" ? null : num("#stp-maxlen"),
+      refereeAction: $("#stp-referee").value,
+      humanDescriptionMode: $("#stp-about").value,
+      fullBriefEveryTurns: num("#stp-brief-turns"),
+      fullBriefEveryTokens: num("#stp-brief-tokens"),
+      replayAfterRestart: num("#stp-replay"),
+      backlogCap: num("#stp-backlog"),
+      headerRules: $("#stp-header-rules").checked,
+      showVendorInRoster: $("#stp-vendor").checked,
+      customRules: $("#stp-rules").value.slice(0, 4000),
+    };
+    const vibemates = [...stpEls.preview.querySelectorAll(".stp-vm")].map((row) => {
+      const v = {};
+      row.querySelectorAll("[data-k]").forEach((el) => {
+        const k = el.dataset.k;
+        const val = el.value.trim();
+        if (k === "skills") v.skills = val.split(",").map((x) => x.trim()).filter(Boolean);
+        else if (k === "replyDelay") { if (val !== "") v.replyDelay = Number(val); }
+        else if (val) v[k] = val;
+      });
+      return v;
+    });
+    return { emoji: $("#stp-emoji").value.trim(), dir: $("#stp-dir").value.trim(), settings, vibemates };
+  }
+  stpEls.form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    if (!stp.room) return;
+    stpEls.create.disabled = true;
+    stpEls.create.textContent = "Creating…";
+    try {
+      const edited = readTemplateForm();
+      const res = await post(`/api/rooms/${encodeURIComponent(stp.room.id)}/save-template`, { name: stpEls.name.value, description: stpEls.desc.value, emoji: edited.emoji, template: { dir: edited.dir, settings: edited.settings, vibemates: edited.vibemates } });
+      closeDialog(stpEls.dialog);
+      toast(`Template "${res.template.name}" created. It is first under "Start from a template".`, "success");
+    } catch (error) {
+      stpEls.error.textContent = error.message;
+      stpEls.error.hidden = false;
+    } finally {
+      stpEls.create.disabled = false;
+      stpEls.create.textContent = "Create the template";
+    }
+  });
+
   function openRoomDialog() {
     els.roomError.hidden = true;
     els.roomName.value = "";
@@ -2953,8 +3151,18 @@
   }
 
 
+  function applyAppearance() {
+    const a = (state.settings || {}).appearance || {};
+    const root = document.documentElement;
+    root.style.zoom = String((a.chatFontSize || 14.5) / 14.5);
+    root.style.setProperty("--font", (FONTS.text[a.font] || FONTS.text.nunito).stack);
+    root.style.setProperty("--mono", (FONTS.mono[a.mono] || FONTS.mono["jetbrains-mono"]).stack);
+  }
+  const zoomFactor = () => Number(document.documentElement.style.zoom) || 1;
+
   function loadSnapshot(snapshot) {
     state.settings = snapshot.settings;
+    applyAppearance();
     state.version = snapshot.version || null;
     state.skills = snapshot.skills || [];
     state.recipes = snapshot.recipes || [];
@@ -3131,6 +3339,7 @@
     });
     es.addEventListener("settings", (e) => {
       state.settings = JSON.parse(e.data).settings;
+      applyAppearance();
       rerenderDiagrams();
       renderRail();
       if (state.view === "settings" && !editingInDetails()) renderSettingsPage();
@@ -3178,14 +3387,14 @@
     let drag = null;
     grip.addEventListener("pointerdown", (e) => {
       if (e.button !== 0) return;
-      drag = { y: e.clientY, h: els.input.offsetHeight };
+      drag = { y: e.clientY / zoomFactor(), h: els.input.offsetHeight };
       grip.setPointerCapture(e.pointerId);
       els.composer.classList.add("resizing");
       e.preventDefault();
     });
     grip.addEventListener("pointermove", (e) => {
       if (!drag) return;
-      composerMin = Math.round(Math.min(composerCeiling(), Math.max(36, drag.h + drag.y - e.clientY)));
+      composerMin = Math.round(Math.min(composerCeiling(), Math.max(36, drag.h + drag.y - e.clientY / zoomFactor())));
       autosize();
     });
     const stop = () => {

package/ui/fonts/fira-code.css

@@ -0,0 +1,5 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/fira-code-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/fira-code-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/fira-code-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/fira-code-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/ui/fonts/inter.css

@@ -0,0 +1,5 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/ui/fonts/jetbrains-mono.css

@@ -0,0 +1,5 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/ui/fonts/noto-sans.css

@@ -0,0 +1,5 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/noto-sans-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/noto-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/noto-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/fonts/noto-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/ui/fonts/source-code-pro.css

@@ -0,0 +1,5 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-code-pro-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-code-pro-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-code-pro-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-code-pro-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/ui/index.html

@@ -164,6 +164,17 @@
       <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary" id="tpl-create">Create the room</button></div>
     </form>
   </dialog>
+  <dialog id="save-template-dialog" class="dialog wide">
+    <form id="save-template-form" method="dialog">
+      <h3><span class="h-ico" data-icon="rooms"></span>Turn this room into a template</h3>
+      <p class="lead">Everything below goes into the template: the room's settings and rules, its folder, and each vibemate with the coding agent it runs on. Check it, name it, create it.</p>
+      <label>Template name<input id="stp-name" type="text" maxlength="60" required placeholder="e.g. Payments refactor"></label>
+      <label>Description <span class="hint">(optional)</span><textarea id="stp-desc" rows="2" maxlength="400" placeholder="what this setup is good for"></textarea></label>
+      <div class="stp-preview" id="stp-preview"></div>
+      <p class="error" id="stp-error" hidden></p>
+      <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary" id="stp-create">Create the template</button></div>
+    </form>
+  </dialog>
   <dialog id="invite-dialog" class="dialog wide">
     <form id="invite-form" method="dialog">
       <h3><span class="h-ico" data-icon="spark"></span>Summon a Vibemate</h3>

package/ui/theme.css

@@ -1,5 +1,10 @@
 /* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
 @import url("/fonts/nunito.css");
+@import url("/fonts/inter.css");
+@import url("/fonts/noto-sans.css");
+@import url("/fonts/jetbrains-mono.css");
+@import url("/fonts/fira-code.css");
+@import url("/fonts/source-code-pro.css");
 :root {
   --primary: #5b5bf0;
   --primary-deep: #4f4fe0;
@@ -48,6 +53,25 @@
   --mine-border: transparent;
   --text: var(--ink);
   --ok: var(--green);
+  --orchid: #f3e4fb;
+  --orchid-ink: #8a3fc2;
+  --st-ready: var(--mint);        --st-ready-ink: var(--mint-ink);       --st-ready-dot: var(--green);
+  --st-waiting: var(--sky);       --st-waiting-ink: #2a6fbf;             --st-waiting-dot: #7aa7ff;
+  --st-thinking: var(--warm);     --st-thinking-ink: var(--warm-ink);    --st-thinking-dot: var(--warn);
+  --st-writing: var(--orchid);    --st-writing-ink: var(--orchid-ink);   --st-writing-dot: #b06be0;
+  --st-error: var(--rose);        --st-error-ink: var(--rose-ink);       --st-error-dot: var(--rose-ink);
+  --st-asleep: var(--softer);     --st-asleep-ink: var(--muted);         --st-asleep-dot: var(--faint);
+  --attention: #ff8a3d;
+  --attention-ink: #c9461c;
+  --attention-grad: linear-gradient(135deg, #ff9447, #e8642a);
+  --attention-shadow: 0 8px 18px -10px rgba(232, 100, 42, 0.7);
+  --unread-grad: linear-gradient(135deg, #ff7a45, #f0452c);
+  --note-hover: #ffeaa8;
+  --tick-mine: #cdcdf9;
+  --tick-mine-view: #a9a9f5;
+  --tick-fallback: #9ca3af;
+  --unseen-ink: #be185d;
+  --unseen-bg: #fff1f7;
   --r-xs: 8px;
   --r-sm: 12px;
   --r-md: 14px;
@@ -292,35 +316,37 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
 .agent-tile.off { opacity: 0.5; filter: grayscale(1); cursor: default; }
 .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--lav); color: var(--primary); font-weight: 800; white-space: nowrap; vertical-align: middle; }
 .badge.outline { background: transparent; border: 2px solid var(--lav-2); color: var(--muted); }
-.badge.status-idle { background: var(--mint); color: var(--mint-ink); }
-.badge.status-thinking { background: var(--warm); color: var(--warm-ink); }
-.badge.status-queued { background: var(--sky); color: #2a6fbf; }
-.badge.status-starting { background: var(--sky); color: #2a6fbf; }
-.badge.status-offline { background: var(--softer); color: var(--muted); }
-.badge.status-error { background: var(--rose); color: var(--rose-ink); }
-.badge.status-left { background: var(--softer); color: var(--muted); }
+.badge.status-idle { background: var(--st-ready); color: var(--st-ready-ink); }
+.badge.status-thinking { background: var(--st-thinking); color: var(--st-thinking-ink); }
+.badge.status-writing { background: var(--st-writing); color: var(--st-writing-ink); }
+.badge.status-queued { background: var(--st-waiting); color: var(--st-waiting-ink); }
+.badge.status-starting { background: var(--st-waiting); color: var(--st-waiting-ink); }
+.badge.status-offline { background: var(--st-asleep); color: var(--st-asleep-ink); }
+.badge.status-error { background: var(--st-error); color: var(--st-error-ink); }
+.badge.status-left { background: var(--st-asleep); color: var(--st-asleep-ink); }
 .badge.muted { background: var(--softer); color: var(--muted); }
 .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
-.badge.status-thinking .dot { animation: pulse 1.2s ease-in-out infinite; }
+.badge.status-thinking .dot, .badge.status-writing .dot { animation: pulse 1.2s ease-in-out infinite; }
 .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; background: var(--lav); color: var(--primary); border: 0; border-radius: var(--r-pill); padding: 4px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .chip .i { width: 13px; height: 13px; }
-.chip-completed { background: var(--mint); color: var(--mint-ink); }
-.chip-failed { background: var(--rose); color: var(--rose-ink); }
-.chip-in_progress { background: var(--warm); color: var(--warm-ink); }
+.chip-completed { background: var(--st-ready); color: var(--st-ready-ink); }
+.chip-failed { background: var(--st-error); color: var(--st-error-ink); }
+.chip-in_progress { background: var(--st-thinking); color: var(--st-thinking-ink); }
 .count-pill { background: var(--primary); color: #fff; border-radius: var(--r-pill); font-size: 10px; padding: 1px 7px; font-weight: 800; line-height: 15px; }
 .zzz { font-size: 10px; font-weight: 800; color: var(--muted); background: var(--softer); padding: 3px 8px; border-radius: var(--r-pill); }
-.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warm); animation: pulse 1.2s ease-in-out infinite; display: inline-block; }
+.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-thinking-dot); box-shadow: 0 0 0 3px var(--st-thinking); animation: pulse 1.2s ease-in-out infinite; display: inline-block; }
 .avatar { position: relative; display: inline-block; flex: none; }
 .avatar .av-tile { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; line-height: 1; font-family: var(--font); user-select: none; }
 .avatar-badge { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; min-width: 15px; min-height: 15px; border-radius: 6px; background: #fff; border: 2px solid #fff; box-shadow: var(--shadow-tile); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--primary); overflow: hidden; }
 .avatar-badge img { width: 72%; height: 72%; object-fit: contain; }
 .avatar-status { position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--faint); }
-.avatar-status.status-idle { background: var(--green); }
-.avatar-status.status-thinking { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
-.avatar-status.status-offline { background: var(--faint); }
-.avatar-status.status-error { background: var(--rose-ink); }
-.avatar-status.status-starting { background: #7aa7ff; }
-.avatar-status.status-queued { background: #7aa7ff; }
+.avatar-status.status-idle { background: var(--st-ready-dot); }
+.avatar-status.status-thinking { background: var(--st-thinking-dot); animation: pulse 1.2s ease-in-out infinite; }
+.avatar-status.status-writing { background: var(--st-writing-dot); animation: pulse 1.2s ease-in-out infinite; }
+.avatar-status.status-offline { background: var(--st-asleep-dot); }
+.avatar-status.status-error { background: var(--st-error-dot); }
+.avatar-status.status-starting { background: var(--st-waiting-dot); }
+.avatar-status.status-queued { background: var(--st-waiting-dot); }
 .avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin: 4px 0 8px; max-height: 148px; overflow-y: auto; padding: 2px 4px 2px 2px; scroll-padding: 4px; }
 .avatar-picker button { aspect-ratio: 1; width: 100%; border-radius: 12px; border: 2px solid transparent; background: var(--soft); font-size: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-fast) var(--ease-pop), border-color var(--t-fast), background var(--t-fast); }
 .avatar-picker button:hover { transform: translateY(-1px); background: var(--lav); }

package/templates/forge-and-lumen/template.json

@@ -1,28 +0,0 @@
-{
-  "name": "Forge & Lumen",
-  "order": 1,
-  "emoji": "⚒️",
-  "recommended": true,
-  "description": "Two equals around one codebase. Forge builds by default, Lumen 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": false,
-    "hopLimit": 12,
-    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to Forge and a question to Lumen.\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 (a task: Forge; a question: Lumen); 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": "Forge",
-      "tagline": "builds by default; explains and reviews when asked",
-      "role": "You are Forge, one of two equal vibemates, Forge and Lumen. You lean to building: a task without an address is yours; read the code before you change it and keep each change small. Everything else is in the room rules."
-    },
-    {
-      "name": "Lumen",
-      "tagline": "explains by default; builds and reviews when asked",
-      "role": "You are Lumen, one of two equal vibemates, Forge and Lumen. 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."
-    }
-  ]
-}