viberoom 0.2.1 → 0.3.1

package/NOTICE

@@ -14,6 +14,9 @@ This product bundles the following third-party material:
 - Mermaid (served from node_modules at run time, not copied): MIT License,
   Copyright (c) 2014-2025 Knut Sveidqvist.
 
+- marked (served from node_modules at run time, not copied): MIT License,
+  Copyright (c) 2018+, MarkedJS; Copyright (c) 2011-2018, Christopher Jeffrey.
+
 Everything else is original to this project and licensed under the GNU Affero
 General Public License, version 3 or (at your option) any later version (see
 LICENSE). If you run a modified viberoom as a network service, section 13 of

package/README.md

@@ -49,13 +49,16 @@ viberoom
   a face. Pick the model, the effort and the permission mode per vibemate.
 - **Talk to all, or to one.** Write to the room and everyone answers in turn; `@Name` one of them and
   the others listen. Vibemates read each other's replies and address each other the same way.
-- **Turn taking.** One vibemate at a time by default, with a short random delay so replies do not
-  cross; or everyone at once. A hop limit keeps agent-to-agent chatter from running away.
+- **Turn taking.** Every addressed vibemate answers at once by default, each after a short random
+  delay so replies do not cross; or one at a time, the others waiting their turn. A hop limit keeps
+  agent-to-agent chatter from running away.
 - **Hush.** One click stops every running reply; the vibemates stay quiet until you write again.
 - **Skills.** Reusable instructions in a library. Attach them to vibemates, invoke one with `/name`,
   or let a vibemate write its own.
-- **Links, files and diagrams.** Links and file paths in replies open on your machine; a path with a
-  `:line` opens in your editor at that line; a ```` ```mermaid ```` block becomes a diagram.
+- **Markdown, links, files and diagrams.** Replies render as Markdown: lists, tables, code. Links and
+  file paths open on your machine; a `.md` or `.csv` path opens right in the room (rendered, or as a
+  table); a path with a `:line` opens in your editor at that line; a ```` ```mermaid ```` block
+  becomes a diagram.
 - **Edit a message.** Change what you said: the vibemates are told, or the conversation is rewound.
 - **A desktop app.** A hidden hub, an app window of its own, a Start Menu / Dock / desktop icon.
 

package/dist/atomic.js

@@ -0,0 +1,33 @@
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+import { renameSync, writeFileSync } from "node:fs";
+const RETRY_DELAYS_MS = [10, 30, 60, 120, 250];
+function pause(ms) {
+    Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+function isTransient(error) {
+    const code = error?.code;
+    return code === "EPERM" || code === "EBUSY" || code === "EACCES";
+}
+export function writeFileAtomic(path, data, options = {}) {
+    const rename = options.rename ?? renameSync;
+    const write = options.write ?? writeFileSync;
+    const sleep = options.sleep ?? pause;
+    const delays = options.retryDelaysMs ?? RETRY_DELAYS_MS;
+    const tmp = `${path}.tmp`;
+    write(tmp, data);
+    for (let attempt = 0;; attempt++) {
+        try {
+            rename(tmp, path);
+            return;
+        }
+        catch (error) {
+            if (!isTransient(error) || attempt >= delays.length) {
+                if (!isTransient(error))
+                    throw error;
+                write(path, data);
+                return;
+            }
+            sleep(delays[attempt]);
+        }
+    }
+}

package/dist/hub.js

@@ -1,7 +1,8 @@
 // viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
 import { EventEmitter } from "node:events";
 import { randomBytes } from "node:crypto";
-import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync, renameSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, rmSync } from "node:fs";
+import { writeFileAtomic } from "./atomic.js";
 import { join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { DEFAULT_EDITOR_SETTINGS } from "./open.js";
@@ -342,7 +343,5 @@ function slugify(name) {
         .slice(0, 40);
 }
 function writeJson(path, value) {
-    const tmp = `${path}.tmp`;
-    writeFileSync(tmp, JSON.stringify(value, null, 2));
-    renameSync(tmp, path);
+    writeFileAtomic(path, JSON.stringify(value, null, 2));
 }

package/dist/main.js

@@ -234,15 +234,20 @@ async function runHub(options, log, info) {
             rmSync(pidFilePath(options.dataDir), { force: true });
         process.exit(0);
     };
-    try {
-        server = await startServer(hub, options.port, log.child("http"), info, () => void shutdown());
-    }
-    catch (error) {
-        const code = error.code;
-        if (code === "EADDRINUSE") {
-            throw new Error(`port ${options.port} is taken by another program (not a viberoom hub). Pick another port: viberoom --port 4811`);
+    const listenDeadline = Date.now() + 15_000;
+    for (;;) {
+        try {
+            server = await startServer(hub, options.port, log.child("http"), info, () => void shutdown());
+            break;
+        }
+        catch (error) {
+            const code = error.code;
+            if (code !== "EADDRINUSE")
+                throw error;
+            if (Date.now() > listenDeadline)
+                throw new Error(`port ${options.port} is taken by another program (not a viberoom hub). Pick another port: viberoom --port 4811`);
+            await new Promise((resolve) => setTimeout(resolve, 500));
         }
-        throw error;
     }
     hub.setHubUrl(server.url);
     if (background)
@@ -281,7 +286,7 @@ async function startBackground(options, log, info) {
     child.unref();
     closeSync(fd);
     log.info(`hub started in the background (pid ${child.pid}); log: ${logPath}`);
-    const up = await waitUntil(() => isUp(url), 20_000);
+    const up = await waitUntil(async () => (await runningInstance(options.port))?.build === info.build, 20_000);
     if (!up)
         throw new Error(`the hub did not come up within 20 s; see ${logPath}`);
     process.stdout.write(`${url}\n`);

package/dist/persona.js

@@ -22,7 +22,7 @@ export const DEFAULT_ROOM_SETTINGS = {
     emoji: "",
     humanDescriptionMode: "inherit",
     refereeAction: "next-header",
-    turnTaking: "one-at-a-time",
+    turnTaking: "parallel",
     replyDelay: 4,
     waitWhileHumanTypes: true,
 };
@@ -106,7 +106,7 @@ export function buildBrief(settings, persona, roster, previousNotes, skills) {
     lines.push(`- Tools: ${tools}`);
     if (settings.maxSentences)
         lines.push(`- Length: at most ${settings.maxSentences} sentences.`);
-    lines.push("- Format: plain chat text; light Markdown is fine, no headings. For a diagram, write a ```mermaid block: the room renders it.");
+    lines.push("- Format: plain chat text; Markdown is rendered (lists, tables, code, bold), so use it lightly and skip headings. For a diagram, write a ```mermaid block; for tabular data, a Markdown table or a ```csv block: the room renders both. Name files by their absolute path: the human can click them, and .md / .csv files open right in the room.");
     const custom = settings.customRules
         .split(/\r?\n/)
         .map((l) => l.trim().replace(/^[-*•]\s*/, ""))

package/dist/room.js

@@ -1,7 +1,8 @@
 // viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
 import { EventEmitter } from "node:events";
 import { randomUUID } from "node:crypto";
-import { appendFileSync, existsSync, mkdirSync, readFileSync, renameSync, statSync, writeFileSync } from "node:fs";
+import { appendFileSync, existsSync, mkdirSync, readFileSync, statSync } from "node:fs";
+import { writeFileAtomic } from "./atomic.js";
 import { affectedByEdit, editNotice, partitionHistory, rewriteNotice } from "./edit.js";
 import { join, resolve } from "node:path";
 import { AcpAgent } from "./acp-client.js";
@@ -398,10 +399,7 @@ export class Room extends EventEmitter {
         participant.statusDetail = undefined;
     }
     rewriteHistory() {
-        const path = this.historyPath();
-        const tmp = `${path}.tmp`;
-        writeFileSync(tmp, this.messages.map((m) => JSON.stringify(m)).join("\n") + (this.messages.length ? "\n" : ""));
-        renameSync(tmp, path);
+        writeFileAtomic(this.historyPath(), this.messages.map((m) => JSON.stringify(m)).join("\n") + (this.messages.length ? "\n" : ""));
     }
     appendDeleted(records, editedSeq) {
         if (!records.length)
@@ -1497,8 +1495,7 @@ export class Room extends EventEmitter {
             toolCalls: [],
         };
         this.drafts.set(draft.id, draft);
-        runtime.turn = { message: draft, messageId: null, sawMessageId: false, startedAt: Date.now() };
-        this.push({ type: "message", message: draft });
+        runtime.turn = { message: draft, messageId: null, sawMessageId: false, startedAt: Date.now(), published: false };
         let result = null;
         let failure = null;
         try {
@@ -1508,6 +1505,7 @@ export class Room extends EventEmitter {
             failure = error instanceof Error ? error.message : String(error);
         }
         const startedAt = runtime.turn.startedAt;
+        const published = runtime.turn.published;
         runtime.turn = null;
         runtime.turnActive = false;
         this.drafts.delete(draft.id);
@@ -1537,9 +1535,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);
+        return this.finalizeTurn(participant, runtime, draft, result, Date.now() - startedAt, retry, published);
     }
-    finalizeTurn(participant, runtime, draft, result, durationMs, retry) {
+    finalizeTurn(participant, runtime, draft, result, durationMs, retry, published) {
         participant.status = "idle";
         this.push({ type: "participant", participant });
         const text = draft.text.trim();
@@ -1565,7 +1563,8 @@ export class Room extends EventEmitter {
             return this.handleSkillPull(participant, runtime, text, pull[1]);
         }
         if (!text || text.toLowerCase() === SILENT_MARKER) {
-            this.push({ type: "message.removed", id: draft.id });
+            if (published)
+                this.push({ type: "message.removed", id: draft.id });
             if (retry) {
                 this.closeRetry(retry, cancelled ? "the correction turn was stopped; nothing was posted" : "the agent withdrew the reply");
                 if (cancelled)
@@ -1710,6 +1709,12 @@ export class Room extends EventEmitter {
         }
         return corrections;
     }
+    showDraft(turn) {
+        if (turn.published)
+            return;
+        turn.published = true;
+        this.push({ type: "message", message: turn.message });
+    }
     onSessionUpdate(id, update) {
         const runtime = this.runtimes.get(id);
         const participant = this.participants.get(id);
@@ -1727,7 +1732,8 @@ export class Room extends EventEmitter {
                     const notices = (turn.message.notices ??= []);
                     notices.push(turn.message.text.trim());
                     turn.message.text = "";
-                    this.push({ type: "message", message: turn.message });
+                    if (turn.published)
+                        this.push({ type: "message", message: turn.message });
                 }
                 else if (messageId !== turn.messageId && turn.message.text) {
                     text = "\n\n" + text;
@@ -1736,6 +1742,11 @@ export class Room extends EventEmitter {
                     turn.sawMessageId = true;
                 turn.messageId = messageId;
                 turn.message.text += text;
+                if (!turn.published) {
+                    if (!looksSilent(turn.message.text))
+                        this.showDraft(turn);
+                    return;
+                }
                 this.push({ type: "chunk", id: turn.message.id, text });
                 return;
             }
@@ -1744,13 +1755,15 @@ export class Room extends EventEmitter {
                     return;
                 const text = contentText(update.content);
                 turn.message.thought = (turn.message.thought ?? "") + text;
-                this.push({ type: "thought", id: turn.message.id, text });
+                if (turn.published)
+                    this.push({ type: "thought", id: turn.message.id, text });
                 return;
             }
             case "tool_call":
             case "tool_call_update": {
                 if (!turn)
                     return;
+                this.showDraft(turn);
                 const u = update;
                 const calls = (turn.message.toolCalls ??= []);
                 let view = calls.find((c) => c.toolCallId === u.toolCallId);
@@ -1772,6 +1785,7 @@ export class Room extends EventEmitter {
             case "plan": {
                 if (!turn)
                     return;
+                this.showDraft(turn);
                 const entries = update.entries;
                 turn.message.plan = entries;
                 this.push({ type: "plan", id: turn.message.id, entries });
@@ -1831,6 +1845,8 @@ export class Room extends EventEmitter {
             };
             this.permissions.set(entry.key, entry);
             const { resolve: _r, ...view } = entry;
+            if (runtime?.turn)
+                this.showDraft(runtime.turn);
             this.push({ type: "permission", permission: view });
             this.notice(`${participant?.name ?? id} asks for permission: ${params.toolCall.title ?? params.toolCall.toolCallId}`, "info");
         });
@@ -2081,6 +2097,10 @@ function isAuthRequired(error) {
 function describeError(error) {
     return error instanceof Error ? error.message : String(error);
 }
+function looksSilent(text) {
+    const t = text.trim().toLowerCase();
+    return t.length <= SILENT_MARKER.length && SILENT_MARKER.startsWith(t);
+}
 function contentText(block) {
     if (block.type === "text")
         return block.text;

package/dist/server.js

@@ -3,8 +3,11 @@ import { spawn } from "node:child_process";
 import { createServer } from "node:http";
 import { readFile, stat } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import { existsSync as fileExists } from "node:fs";
 import { classifyOpenTarget, describeOpen, detectEditor, editorCommand, isExecutablePath, openCommand } from "./open.js";
+import { parseCsv, viewerKind, VIEWER_MAX_BYTES } from "./viewer.js";
 let editorFound;
 function currentEditor() {
     if (editorFound === undefined)
@@ -32,12 +35,19 @@ const STATIC_FILES = {
     "/vendor-icons/opencode.svg": { file: "vendors/opencode.svg", type: "image/svg+xml", dir: "assets" },
     "/vendor-icons/copilot.svg": { file: "vendors/copilot.svg", type: "image/svg+xml", dir: "assets" },
     "/vendor/mermaid.min.js": { file: "mermaid/dist/mermaid.min.js", type: "text/javascript; charset=utf-8", dir: "node_modules" },
+    "/vendor/marked.umd.js": { file: "marked/lib/marked.umd.js", type: "text/javascript; charset=utf-8", dir: "node_modules" },
 };
 export function startServer(hub, port, log, info, onShutdownRequest) {
     const uiDir = fileURLToPath(new URL("../ui/", import.meta.url));
     const assetsDir = fileURLToPath(new URL("../assets/", import.meta.url));
-    const modulesDir = fileURLToPath(new URL("../node_modules/", import.meta.url));
-    const staticDir = (dir) => (dir === "assets" ? assetsDir : dir === "node_modules" ? modulesDir : uiDir);
+    const resolveModule = createRequire(import.meta.url).resolve;
+    const packageDir = (name) => dirname(resolveModule(`${name}/package.json`));
+    const staticPath = (entry) => {
+        if (entry.dir !== "node_modules")
+            return (entry.dir === "assets" ? assetsDir : uiDir) + entry.file;
+        const slash = entry.file.indexOf("/");
+        return join(packageDir(entry.file.slice(0, slash)), entry.file.slice(slash + 1));
+    };
     const clients = new Set();
     const snapshot = () => ({ ...hub.snapshot(), version: info });
     const broadcast = (event) => {
@@ -80,7 +90,7 @@ export function startServer(hub, port, log, info, onShutdownRequest) {
         }
         if (req.method === "GET" && STATIC_FILES[path]) {
             const entry = STATIC_FILES[path];
-            const body = await readFile(staticDir(entry.dir) + entry.file);
+            const body = await readFile(staticPath(entry));
             res.writeHead(200, { "Content-Type": entry.type, "Cache-Control": entry.dir === "ui" || !entry.dir ? "no-cache" : "public, max-age=3600" });
             res.end(body);
             return;
@@ -96,6 +106,29 @@ export function startServer(hub, port, log, info, onShutdownRequest) {
             req.on("close", () => clients.delete(res));
             return;
         }
+        if (req.method === "GET" && path === "/api/file") {
+            const target = classifyOpenTarget(url.searchParams.get("path") ?? "");
+            if (!target || target.kind !== "path")
+                throw new Error("only absolute paths can be viewed");
+            const kind = viewerKind(target.value);
+            if (!kind)
+                throw new Error("only Markdown and CSV files can be viewed in the room");
+            let info;
+            try {
+                info = await stat(target.value);
+            }
+            catch {
+                sendJson(res, 404, { error: `no such file: ${target.value}` });
+                return;
+            }
+            if (!info.isFile())
+                throw new Error(`not a file: ${target.value}`);
+            if (info.size > VIEWER_MAX_BYTES)
+                throw new Error(`too big to view here (${Math.round(info.size / 1024)} kB); open it in an editor`);
+            const text = await readFile(target.value, "utf8");
+            sendJson(res, 200, kind === "csv" ? { ok: true, kind, path: target.value, rows: parseCsv(text) } : { ok: true, kind, path: target.value, text });
+            return;
+        }
         if (req.method === "GET" && path === "/api/editor") {
             sendJson(res, 200, { editor: currentEditor(), settings: hub.settings.editor });
             return;

package/dist/viewer.js

@@ -0,0 +1,66 @@
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+import { extname } from "node:path";
+export const VIEWER_MAX_BYTES = 2 * 1024 * 1024;
+const KINDS = { ".md": "markdown", ".markdown": "markdown", ".csv": "csv", ".tsv": "csv" };
+export function viewerKind(path) {
+    return KINDS[extname(path).toLowerCase()] ?? null;
+}
+export function detectDelimiter(text) {
+    const first = text.split(/\r?\n/, 1)[0] ?? "";
+    let best = ",";
+    let bestCount = -1;
+    for (const d of [",", ";", "\t"]) {
+        const n = first.split(d).length - 1;
+        if (n > bestCount) {
+            best = d;
+            bestCount = n;
+        }
+    }
+    return best;
+}
+export function parseCsv(text, delimiter = detectDelimiter(text)) {
+    const rows = [];
+    let row = [];
+    let field = "";
+    let quoted = false;
+    const src = text.startsWith("") ? text.slice(1) : text;
+    for (let i = 0; i < src.length; i++) {
+        const c = src[i];
+        if (quoted) {
+            if (c === '"') {
+                if (src[i + 1] === '"') {
+                    field += '"';
+                    i++;
+                }
+                else
+                    quoted = false;
+            }
+            else
+                field += c;
+            continue;
+        }
+        if (c === '"' && field === "")
+            quoted = true;
+        else if (c === delimiter) {
+            row.push(field);
+            field = "";
+        }
+        else if (c === "\n" || c === "\r") {
+            if (c === "\r" && src[i + 1] === "\n")
+                i++;
+            row.push(field);
+            rows.push(row);
+            row = [];
+            field = "";
+        }
+        else
+            field += c;
+    }
+    if (field !== "" || row.length) {
+        row.push(field);
+        rows.push(row);
+    }
+    while (rows.length && rows[rows.length - 1].every((f) => f === ""))
+        rows.pop();
+    return rows;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberoom",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "viberoom: group chat rooms for a human and several coding agents over the Agent Client Protocol",
   "type": "module",
   "engines": {
@@ -30,6 +30,7 @@
   "dependencies": {
     "@agentclientprotocol/claude-agent-acp": "0.73.0",
     "@agentclientprotocol/codex-acp": "^1.8.0",
+    "marked": "^16.4.2",
     "mermaid": "^11.17.2"
   },
   "devDependencies": {

package/ui/app.css

@@ -200,7 +200,38 @@
 .head .time { color: var(--faint); font-size: 11px; font-weight: 600; cursor: default; white-space: nowrap; }
 .msg.mine .head { justify-content: flex-end; }
 .msg.mine .head .name { display: none; }
-.bubble .text { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
+.bubble .text { word-break: break-word; line-height: 1.55; }
+.text > :first-child, .file-view > :first-child { margin-top: 0; }
+.text > :last-child, .file-view > :last-child { margin-bottom: 0; }
+.text p, .file-view p { margin: 0 0 8px; }
+.text ul, .text ol, .file-view ul, .file-view ol { margin: 4px 0 8px; padding-left: 22px; }
+.text li, .file-view li { margin: 2px 0; }
+.text h1, .text h2, .text h3, .text h4, .file-view h1, .file-view h2, .file-view h3, .file-view h4 { margin: 10px 0 6px; line-height: 1.3; font-weight: 800; }
+.text h1, .file-view h1 { font-size: 1.25em; }
+.text h2, .file-view h2 { font-size: 1.15em; }
+.text h3, .text h4, .file-view h3, .file-view h4 { font-size: 1.05em; }
+.text blockquote, .file-view blockquote { margin: 6px 0 8px; padding: 2px 12px; border-left: 3px solid var(--lav); color: var(--muted); }
+.text hr, .file-view hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
+.text pre, .file-view pre { margin: 6px 0 8px; }
+.text table, .file-view table { border-collapse: collapse; margin: 6px 0 8px; font-size: 13px; max-width: 100%; display: block; overflow-x: auto; }
+.text th, .text td, .file-view th, .file-view td { border: 1px solid var(--border); padding: 4px 10px; text-align: left; vertical-align: top; }
+.text th, .file-view th { background: var(--lav); font-weight: 800; }
+.msg.mine .bubble .text th { background: rgba(255, 255, 255, 0.18); }
+.msg.mine .bubble .text th, .msg.mine .bubble .text td { border-color: rgba(255, 255, 255, 0.35); }
+.msg.mine .bubble .text blockquote { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); }
+.file-dialog { width: 900px; flex-direction: column; }
+.file-dialog[open] { display: flex; }
+.file-dialog .file-head { flex: 0 0 auto; }
+.file-dialog .file-head .lead { margin-bottom: 10px; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
+.file-dialog .actions { flex: 0 0 auto; margin-top: 14px; }
+.file-view { flex: 1 1 auto; min-height: 120px; max-height: 62vh; overflow: auto; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--ink-2); }
+.file-view.csv { padding: 0; background: transparent; }
+.csv-wrap { overflow: auto; max-height: 58vh; border-radius: 14px; box-shadow: var(--edge); background: var(--card); }
+table.csv { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
+table.csv th, table.csv td { padding: 6px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
+table.csv th { position: sticky; top: 0; background: var(--lav); font-weight: 800; z-index: 1; }
+table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
+.csv-count { margin: 8px 2px 0; font-size: 12px; color: var(--muted); font-weight: 700; }
 .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; }
@@ -267,7 +298,7 @@
 .side-list li.offline .p-name, .side-list li.offline .p-sub { color: var(--muted); }
 .side-list li.me .avatar .av-tile, .msg.mine .avatar .av-tile { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }
 .msg.mine .avatar .av-tile { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary); }
-.composer { display: flex; gap: 10px; padding: 8px 8px 8px 18px; margin: 4px 16px 16px; background: var(--softer); border-radius: 20px; align-items: center; min-height: 60px; transition: box-shadow var(--t-fast); }
+.composer { display: flex; gap: 10px; padding: 8px 8px 8px 18px; margin: 10px 16px; background: var(--softer); border-radius: 20px; align-items: center; min-height: 60px; transition: box-shadow var(--t-fast); }
 .composer:focus-within { box-shadow: 0 0 0 2px var(--primary); }
 .composer .smile-btn { border: 0; background: transparent; color: var(--placeholder); padding: 0; display: grid; place-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none; }
 .composer .smile-btn .i { width: 20px; height: 20px; }
@@ -279,8 +310,8 @@
 .send-btn .i { width: 18px; height: 18px; display: block; }
 .send-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
 .send-btn:active { transform: translateY(1px); }
-.chat .mention-menu { left: 24px; bottom: 84px; }
-.chat .emoji-menu { left: 24px; bottom: 84px; }
+.chat .mention-menu { left: 24px; bottom: 78px; }
+.chat .emoji-menu { left: 24px; bottom: 78px; }
 .page-inner { flex: 1; overflow-y: auto; padding: 8px 22px 22px; }
 .page-inner > .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-height: 48px; }
 .page-inner h1 { font-size: 20px; letter-spacing: -0.01em; }

package/ui/app.js

@@ -24,6 +24,11 @@
   const $ = (selector) => document.querySelector(selector);
   const els = {
     app: $("#app"),
+    fileDialog: $("#file-dialog"),
+    fvTitle: $("#fv-title"),
+    fvPath: $("#fv-path"),
+    fvBody: $("#fv-body"),
+    fvOpen: $("#fv-open"),
     rail: $("#rail"),
     railRoom: $("#rail-room"),
     railRoomLabel: $("#rail-room-label"),
@@ -191,7 +196,7 @@
   }
   function editingInDetails() {
     const el = document.activeElement;
-    return !!el && !!el.closest && (!!el.closest("#details") || !!el.closest("#page-view")) && /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+    return !!el && !!el.closest && (!!el.closest("#details") || !!el.closest("#page-view")) && (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable);
   }
   function currentRoom() {
     return state.rooms.get(state.currentRoomId) || null;
@@ -212,10 +217,109 @@
       return `<a class="open-link" data-open="${target}" href="#" title="${isUrl ? "Open in your browser" : "Open with the default app"}">${target}</a>${trail}`;
     });
   }
+  function parseCsv(text) {
+    const first = text.split(/\r?\n/, 1)[0] || "";
+    let delimiter = ",";
+    let best = -1;
+    for (const d of [",", ";", "\t"]) {
+      const n = first.split(d).length - 1;
+      if (n > best) {
+        delimiter = d;
+        best = n;
+      }
+    }
+    const rows = [];
+    let row = [];
+    let field = "";
+    let quoted = false;
+    for (let i = 0; i < text.length; i++) {
+      const c = text[i];
+      if (quoted) {
+        if (c === '"') {
+          if (text[i + 1] === '"') {
+            field += '"';
+            i++;
+          } else quoted = false;
+        } else field += c;
+        continue;
+      }
+      if (c === '"' && field === "") quoted = true;
+      else if (c === delimiter) {
+        row.push(field);
+        field = "";
+      } else if (c === "\n" || c === "\r") {
+        if (c === "\r" && text[i + 1] === "\n") i++;
+        row.push(field);
+        rows.push(row);
+        row = [];
+        field = "";
+      } else field += c;
+    }
+    if (field !== "" || row.length) {
+      row.push(field);
+      rows.push(row);
+    }
+    while (rows.length && rows[rows.length - 1].every((f) => f === "")) rows.pop();
+    return rows;
+  }
+  function csvBlock(raw) {
+    const rows = parseCsv(raw.trim());
+    const code = esc(raw.trim());
+    if (rows.length < 2) return `<pre>${code}</pre>`;
+    return `<div class="csv-block"><div class="mm-out">${csvTable(rows)}</div><pre class="mm-code" hidden>${code}</pre><div class="mm-bar"><button type="button" class="mm-src">source</button></div></div>`;
+  }
   function mermaidBlock(code) {
     return `<div class="mermaid-block" data-src="${code}"><div class="mm-out"><pre>${code}</pre></div><pre class="mm-code" hidden>${code}</pre><div class="mm-bar"><button type="button" class="mm-src">source</button></div></div>`;
   }
+  function mentions(room, html) {
+    return html.replace(/(?<![\w.\/:])@([\p{L}\p{N}][\p{L}\p{N}_-]*)/gu, (m, name) => {
+      const p = findByName(room, name);
+      return p ? `<span class="mention" style="color:${p.color}">@${esc(name)}</span>` : m;
+    });
+  }
+  const md = window.marked ? new window.marked.Marked({ gfm: true, breaks: true }) : null;
+  if (md) {
+    md.use({
+      renderer: {
+        html(token) {
+          return esc(token.text != null ? token.text : token.raw || "");
+        },
+        code(token) {
+          const lang = token.lang || "";
+          if (/^\s*(csv|tsv)\b/i.test(lang)) return csvBlock(String(token.text || ""));
+          const code = esc(String(token.text || "")).trim();
+          return /^\s*mermaid\b/i.test(lang) ? mermaidBlock(code) : `<pre>${code}</pre>`;
+        },
+        link(token) {
+          const inner = this.parser.parseInline(token.tokens || []);
+          const href = String(token.href || "");
+          if (!/^(https?:|mailto:)/i.test(href)) return inner;
+          return `<a class="open-link" data-open="${esc(href)}" href="#" title="Open in your browser">${inner}</a>`;
+        },
+        image(token) {
+          return esc(token.text || token.href || "");
+        },
+      },
+    });
+  }
+  function decorate(room, html) {
+    let inside = 0;
+    let out = "";
+    for (const part of html.split(/(<[^>]*>)/)) {
+      if (!part) continue;
+      if (part[0] === "<") {
+        const m = /^<(\/?)(pre|a)\b/i.exec(part);
+        if (m) inside += m[1] ? -1 : 1;
+        out += part;
+      } else out += inside > 0 ? part : mentions(room, linkify(part));
+    }
+    return out;
+  }
   function renderText(room, text) {
+    if (!md) return renderTextLight(room, text);
+    return decorate(room, md.parse(String(text == null ? "" : text)));
+  }
+  function renderTextLight(room, text) {
     let html = esc(text);
     const blocks = [];
     html = html.replace(/```([^\n]*)\n([\s\S]*?)```/g, (m, lang, code) => {
@@ -225,15 +329,34 @@
     html = linkify(html);
     html = html.replace(/`([^`\n]+)`/g, "<code>$1</code>");
     html = html.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
-    html = html.replace(/(?<![\w.\/:])@([\p{L}\p{N}][\p{L}\p{N}_-]*)/gu, (m, name) => {
-      const p = findByName(room, name);
-      return p ? `<span class="mention" style="color:${p.color}">@${esc(name)}</span>` : m;
-    });
+    html = mentions(room, html);
     html = html.replace(/\u0000(\d+)\u0000/g, (m, i) => blocks[Number(i)]);
     return html;
   }
 
 
+  const VIEWABLE_RE = /\.(md|markdown|csv|tsv)$/i;
+  function csvTable(rows) {
+    if (!rows.length) return '<p class="lead">Empty file.</p>';
+    const cell = (tag, v) => `<${tag}>${esc(v)}</${tag}>`;
+    const [head, ...body] = rows;
+    const width = Math.max(head.length, ...body.map((r) => r.length));
+    const pad = (r) => r.concat(Array(Math.max(0, width - r.length)).fill(""));
+    return `<div class="csv-wrap"><table class="csv"><thead><tr>${pad(head).map((v) => cell("th", v)).join("")}</tr></thead><tbody>${body.map((r) => `<tr>${pad(r).map((v) => cell("td", v)).join("")}</tr>`).join("")}</tbody></table></div><p class="csv-count">${body.length} row${body.length === 1 ? "" : "s"} · ${width} column${width === 1 ? "" : "s"}</p>`;
+  }
+  async function viewFile(path) {
+    const r = await get(`/api/file?path=${encodeURIComponent(path)}`);
+    els.fvTitle.textContent = r.path.split(/[\\/]/).pop();
+    els.fvPath.textContent = r.path;
+    els.fvBody.className = `file-view ${r.kind}`;
+    els.fvBody.innerHTML = r.kind === "csv" ? csvTable(r.rows) : renderText(currentRoom(), r.text);
+    els.fvOpen.dataset.path = r.path;
+    els.fvBody.scrollTop = 0;
+    openDialog(els.fileDialog);
+    if (r.kind === "markdown") renderDiagrams(els.fvBody);
+  }
+
+
   const POP_PALETTE = [
     { fill: "#e4e6fb", stroke: "#5b5bf0" },
     { fill: "#d9f7e8", stroke: "#1d8f6a" },
@@ -812,21 +935,21 @@
     els.sideRoomName.textContent = room.name;
     els.sideRoomEmoji.textContent = room.settings.emoji || "";
     els.sideRoomSub.textContent = room.settings.topic || `${st.agents.length} vibemate${st.agents.length === 1 ? "" : "s"}${st.agents.length ? ` · ${st.online} online` : ""}`;
-    els.participants.innerHTML = "";
     const ordered = [...room.participants].sort((a, b) => (a.kind === "human" ? -1 : b.kind === "human" ? 1 : 0));
+    const rows = new Map([...els.participants.children].map((li) => [li.dataset.id, li]));
     for (const p of ordered) {
-      const li = document.createElement("li");
+      let li = rows.get(p.id);
       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");
-      li.className = (p.kind === "human" ? "me" : "") + (selected ? " selected" : "") + (asleep ? " offline" : "");
+      const className = (p.kind === "human" ? "me" : "") + (selected ? " selected" : "") + (asleep ? " offline" : "");
       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>` : "";
       const status = 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>` : "";
-      li.innerHTML = `
-        ${avatar(p.kind === "human" ? meAvatarData() : p, 44, { vendor: true, status: p.kind === "agent" })}
-        <div class="p-body">
+      const avatarHtml = avatar(p.kind === "human" ? meAvatarData() : p, 44, { vendor: true });
+      const statusClass = p.kind === "agent" ? `avatar-status status-${esc(p.status || "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>
           ${warn}
@@ -835,20 +958,32 @@
           ${p.kind === "agent" && p.status === "thinking" ? `<button class="icon-btn sm stop-btn" title="Stop this reply">${ic("stop")}</button>` : ""}
           ${p.kind === "agent" && p.status === "offline" ? `<button class="icon-btn sm reconnect-btn" title="Reconnect">${ic("refresh")}</button>` : ""}
         </div>`;
-      li.addEventListener("click", (e) => {
-        if (e.target.closest("button")) return;
-        if (p.kind === "human") openDetails({ kind: "me" });
-        else openDetails({ kind: "participant", id: p.id });
-      });
-      li.addEventListener("dblclick", () => {
-        if (p.kind === "agent") insertMention(p.name);
-      });
-      const stop = li.querySelector(".stop-btn");
-      if (stop) stop.addEventListener("click", () => post(roomApi(`/participants/${encodeURIComponent(p.id)}/cancel`)).catch(showError));
-      const rec = li.querySelector(".reconnect-btn");
-      if (rec) rec.addEventListener("click", () => openReconnectDialog(room));
-      els.participants.appendChild(li);
+      if (!li) {
+        li = document.createElement("li");
+        li.dataset.id = p.id;
+        li.innerHTML = avatarHtml + bodyHtml;
+        li.dataset.avatar = avatarHtml;
+        if (statusClass) li.querySelector(".avatar").insertAdjacentHTML("beforeend", `<span class="${statusClass}"></span>`);
+        li.dataset.body = bodyHtml;
+      } else {
+        if (li.dataset.avatar !== avatarHtml) {
+          li.querySelector(".avatar").outerHTML = avatarHtml;
+          li.dataset.avatar = avatarHtml;
+        }
+        const dot = li.querySelector(".avatar-status");
+        if (statusClass && dot && dot.className !== statusClass) dot.className = statusClass;
+        else if (statusClass && !dot) li.querySelector(".avatar").insertAdjacentHTML("beforeend", `<span class="${statusClass}"></span>`);
+        if (li.dataset.body !== bodyHtml) {
+          li.querySelectorAll(".p-body, .p-actions").forEach((el) => el.remove());
+          li.insertAdjacentHTML("beforeend", bodyHtml);
+          li.dataset.body = bodyHtml;
+        }
+      }
+      if (li.className !== className) li.className = className;
+      if (li !== els.participants.children[ordered.indexOf(p)]) els.participants.appendChild(li);
+      rows.delete(p.id);
     }
+    for (const li of rows.values()) li.remove();
     renderHushButton(room);
     els.reconnectAllBtn.hidden = offlineAgents(room).length === 0;
   }
@@ -1546,7 +1681,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", `<input type="text" id="rp-dir" maxlength="1000" value="${esc(room.dir)}" spellcheck="false">`, "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">Custom 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><textarea id="rp-rules" rows="5" maxlength="4000" placeholder="e.g. Everyone listens to @Pesho, he is the manager.&#10;Keep answers under 3 sentences.">${esc(room.customRulesText != null ? room.customRulesText : rs.customRules || "")}</textarea><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>
+        <label class="field mention-host"><span class="label">Custom 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>
         ${field("Language", `<input type="text" id="rp-lang" value="${esc(lang)}" placeholder="follow the human (default), or e.g. English">`)}
       </div>
       <div class="section">
@@ -1593,7 +1728,8 @@
         <div class="row-btns start"><button class="btn danger sm" id="rp-delete">${ic("trash")}Close this room for good</button></div>
       </div>`;
     wireDetailsClose();
-    attachMentions($("#rp-rules"), $("#rp-rules-menu"));
+    rulesToNodes($("#rp-rules"), room.customRulesText != null ? room.customRulesText : rs.customRules || "", room);
+    attachRichMentions($("#rp-rules"), $("#rp-rules-menu"));
     $("#rp-emoji-picker").appendChild(
       emojiGrid(ROOM_EMOJI, rs.emoji || "", (emoji) => {
         $("#rp-emoji").value = emoji;
@@ -1608,7 +1744,7 @@
         await post(roomApi("/settings"), {
           emoji: $("#rp-emoji").value,
           topic: $("#rp-topic").value,
-          customRules: $("#rp-rules").value,
+          customRules: rulesText($("#rp-rules")).slice(0, 4000),
           language: $("#rp-lang").value.trim() || "follow-human",
           tools: $("#rp-tools").value,
           maxSentences: $("#rp-maxlen").value === "" ? null : Number($("#rp-maxlen").value),
@@ -2584,20 +2720,209 @@
     typingSentAt = now;
     post(roomApi("/typing"), {}).catch(() => undefined);
   });
+  els.participants.addEventListener("click", (e) => {
+    const li = e.target.closest("li[data-id]");
+    const room = currentRoom();
+    if (!li || !room) return;
+    const p = findById(room, li.dataset.id);
+    if (!p) return;
+    if (e.target.closest(".stop-btn")) return void post(roomApi(`/participants/${encodeURIComponent(p.id)}/cancel`)).catch(showError);
+    if (e.target.closest(".reconnect-btn")) return openReconnectDialog(room);
+    if (e.target.closest("button")) return;
+    if (p.kind === "human") openDetails({ kind: "me" });
+    else openDetails({ kind: "participant", id: p.id });
+  });
+  els.participants.addEventListener("dblclick", (e) => {
+    const li = e.target.closest("li[data-id]");
+    const p = li && findById(currentRoom(), li.dataset.id);
+    if (p && p.kind === "agent") insertMention(p.name);
+  });
   els.composer.addEventListener("submit", async (event) => {
     event.preventDefault();
     const text = els.input.value.trim();
-    if (!text || !currentRoom()) return;
+    const room = currentRoom();
+    if (!text || !room) return;
     els.input.value = "";
     typingSentAt = 0;
     autosize();
+    const local = { id: `local-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, seq: 0, from: "human", fromName: (state.settings || {}).humanName || "You", to: [], toNames: [], text, ts: Date.now(), kind: "chat", pending: true };
+    upsertMessage(room.id, local);
     try {
-      await post(roomApi("/send"), { text });
+      const r = await post(roomApi("/send"), { text });
+      adoptLocalMessage(room.id, local.id, r.id);
     } catch (error) {
+      removeMessage(room.id, local.id);
       showError(error);
       els.input.value = text;
     }
   });
+  function adoptLocalMessage(roomId, localId, realId) {
+    const room = state.rooms.get(roomId);
+    if (!room || !realId) return;
+    if (room.messages.some((m) => m.id === realId)) return removeMessage(roomId, localId);
+    const m = room.messages.find((x) => x.id === localId);
+    if (!m) return;
+    m.id = realId;
+    delete m.pending;
+    const el = els.messages.querySelector(`.msg[data-id="${localId}"]`);
+    if (el) el.dataset.id = realId;
+  }
+
+
+  const RULE_MENTION_RE = /(?<![\w.\/:])@([\p{L}\p{N}][\p{L}\p{N}_-]*)/gu;
+  function mentionChip(p) {
+    const chip = document.createElement("span");
+    chip.className = "mention-chip";
+    chip.contentEditable = "false";
+    chip.dataset.name = p.name;
+    chip.style.color = p.color;
+    chip.innerHTML = `${avatar(p, 16, { vendor: false })}<span class="chip-name">@${esc(p.name)}</span>`;
+    return chip;
+  }
+  function rulesToNodes(editor, text, room) {
+    editor.innerHTML = "";
+    let last = 0;
+    for (const m of text.matchAll(RULE_MENTION_RE)) {
+      const p = findByName(room, m[1]);
+      if (!p) continue;
+      editor.appendChild(document.createTextNode(text.slice(last, m.index)));
+      editor.appendChild(mentionChip(p));
+      last = m.index + m[0].length;
+    }
+    editor.appendChild(document.createTextNode(text.slice(last)));
+  }
+  function rulesText(editor) {
+    let out = "";
+    const walk = (node) => {
+      for (const n of node.childNodes) {
+        if (n.nodeType === Node.TEXT_NODE) out += n.nodeValue;
+        else if (n.nodeName === "BR") out += "\n";
+        else if (n.classList && n.classList.contains("mention-chip")) out += `@${n.dataset.name}`;
+        else if (n.nodeName === "DIV" || n.nodeName === "P") {
+          if (out && !out.endsWith("\n")) out += "\n";
+          walk(n);
+          if (!out.endsWith("\n")) out += "\n";
+        } else walk(n);
+      }
+    };
+    walk(editor);
+    return out.replace(/\n+$/, "");
+  }
+  function attachRichMentions(editor, menuEl) {
+    const m = { open: false, items: [], index: 0, node: null, start: -1 };
+    function caret() {
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount || !sel.isCollapsed) return null;
+      const r = sel.getRangeAt(0);
+      if (r.startContainer.nodeType !== Node.TEXT_NODE || !editor.contains(r.startContainer)) return null;
+      return { node: r.startContainer, offset: r.startOffset };
+    }
+    function placeCaret(node, offset) {
+      const sel = window.getSelection();
+      const r = document.createRange();
+      r.setStart(node, offset);
+      r.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(r);
+    }
+    function context() {
+      const c = caret();
+      if (!c) return null;
+      const before = c.node.nodeValue.slice(0, c.offset);
+      const match = before.match(/(^|\s)@([\p{L}\p{N}_-]*)$/u);
+      if (!match) return null;
+      return { node: c.node, start: c.offset - match[2].length - 1, end: c.offset, prefix: match[2] };
+    }
+    function close() {
+      if (!m.open) return;
+      m.open = false;
+      menuEl.hidden = true;
+    }
+    function render() {
+      const ctx = context();
+      const room = currentRoom();
+      if (!ctx || !room) return close();
+      const q = ctx.prefix.toLowerCase();
+      const items = room.participants.filter((p) => p.name.toLowerCase().startsWith(q));
+      if (!items.length) return close();
+      m.open = true;
+      m.items = items;
+      m.node = ctx.node;
+      m.start = ctx.start;
+      m.end = ctx.end;
+      if (m.index >= items.length) m.index = 0;
+      menuEl.innerHTML = "";
+      items.forEach((p, i) => {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = i === m.index ? "active" : "";
+        b.innerHTML = `${avatar(p, 24, { vendor: true })}<span>${esc(p.name)}</span><span class="mm-sub">${esc(p.kind === "human" ? "you" : p.tagline || p.agentVendor || "")}${p.status === "offline" ? " · offline" : ""}</span>`;
+        b.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          pick(i);
+        });
+        menuEl.appendChild(b);
+      });
+      menuEl.hidden = false;
+    }
+    function chipify(node, start, end, p) {
+      const after = document.createTextNode(" " + node.nodeValue.slice(end));
+      node.nodeValue = node.nodeValue.slice(0, start);
+      const chip = mentionChip(p);
+      node.after(chip, after);
+      return after;
+    }
+    function pick(i) {
+      const p = m.items[i];
+      if (!p) return close();
+      const after = chipify(m.node, m.start, m.end, p);
+      close();
+      editor.focus();
+      placeCaret(after, 1);
+    }
+    function chipifyComplete() {
+      const room = currentRoom();
+      if (!room) return;
+      const c = caret();
+      for (const node of [...editor.childNodes, ...[...editor.querySelectorAll("div, p")].flatMap((b) => [...b.childNodes])]) {
+        if (node.nodeType !== Node.TEXT_NODE) continue;
+        for (const match of [...node.nodeValue.matchAll(RULE_MENTION_RE)].reverse()) {
+          const end = match.index + match[0].length;
+          if (!/\s/.test(node.nodeValue[end] || "")) continue;
+          const p = findByName(room, match[1]);
+          if (!p) continue;
+          const caretHere = c && c.node === node ? c.offset : -1;
+          const after = chipify(node, match.index, end + 1, p);
+          if (caretHere >= end + 1) placeCaret(after, caretHere - end);
+          break;
+        }
+      }
+    }
+    editor.addEventListener("input", () => {
+      m.index = 0;
+      chipifyComplete();
+      render();
+    });
+    editor.addEventListener("paste", (e) => {
+      e.preventDefault();
+      document.execCommand("insertText", false, (e.clipboardData || window.clipboardData).getData("text/plain"));
+    });
+    editor.addEventListener("blur", () => setTimeout(close, 150));
+    editor.addEventListener("keydown", (event) => {
+      if (!m.open) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        m.index = (m.index + (event.key === "ArrowDown" ? 1 : m.items.length - 1)) % m.items.length;
+        render();
+      } else if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        pick(m.index);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+      }
+    });
+  }
 
   function attachMentions(textarea, menuEl, options) {
     const opts = options || {};
@@ -2756,6 +3081,14 @@
   els.reconnectAllBtn.addEventListener("click", () => openReconnectDialog(currentRoom()));
   els.rcForm.addEventListener("submit", submitReconnect);
   document.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", () => closeDialog(b.closest("dialog"))));
+  els.fvOpen.addEventListener("click", async () => {
+    try {
+      const r = await post("/api/open", { target: `${els.fvOpen.dataset.path}:1` });
+      toast(r.message, "info");
+    } catch (err) {
+      showError(err);
+    }
+  });
   els.focusBtn.addEventListener("click", async () => {
     const room = currentRoom();
     if (!room || room.focused || els.focusBtn.classList.contains("busy")) return;
@@ -2809,7 +3142,12 @@
     if (link) {
       e.preventDefault();
       try {
-        const r = await post("/api/open", { target: link.dataset.open });
+        const target = link.dataset.open;
+        if (!/^(https?:|mailto:)/i.test(target) && VIEWABLE_RE.test(target)) {
+          await viewFile(target);
+          return;
+        }
+        const r = await post("/api/open", { target });
         if (r.action !== "open-url") toast(r.message, "info");
       } catch (err) {
         showError(err);
@@ -2818,7 +3156,7 @@
     }
     const src = e.target.closest && e.target.closest(".mm-src");
     if (src) {
-      const code = src.closest(".mermaid-block").querySelector(".mm-code");
+      const code = src.closest(".mermaid-block, .csv-block").querySelector(".mm-code");
       code.hidden = !code.hidden;
       src.textContent = code.hidden ? "source" : "hide source";
     }

package/ui/index.html

@@ -210,6 +210,18 @@
       <div class="actions"><button type="button" class="btn ghost" data-close>Keep my vibe</button><button type="submit" id="erase-submit" class="btn danger solid" disabled>Erase everything</button></div>
     </form>
   </dialog>
+  <dialog id="file-dialog" class="dialog wide file-dialog">
+    <div class="file-head">
+      <h3><span class="h-ico" data-icon="link"></span><span id="fv-title">File</span></h3>
+      <p class="lead" id="fv-path"></p>
+    </div>
+    <div id="fv-body" class="file-view"></div>
+    <div class="actions">
+      <button type="button" id="fv-open" class="btn ghost">Open in editor</button>
+      <button type="button" class="btn primary" data-close>Close</button>
+    </div>
+  </dialog>
+  <script src="/vendor/marked.umd.js"></script>
   <script src="/icons.js"></script>
   <script src="/avatars.js"></script>
   <script src="/app.js"></script>

package/ui/theme.css

@@ -200,6 +200,12 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
 }
 .select:disabled, .field select:disabled, .input:disabled, .field input:disabled { opacity: 0.55; cursor: default; }
 .textarea, .field textarea { resize: vertical; min-height: 76px; height: auto; padding: 10px 14px; line-height: 1.5; }
+.field .rules-editor { display: block; width: 100%; box-sizing: border-box; min-height: 118px; max-height: 320px; overflow-y: auto; padding: 10px 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 700; font-family: inherit; }
+.field .rules-editor:hover { border-color: var(--lav-2); }
+.field .rules-editor:focus { outline: none; border-color: var(--primary); background: var(--card); }
+.field .rules-editor:empty::before { content: attr(data-placeholder); color: var(--placeholder); pointer-events: none; }
+.mention-chip { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; padding: 0 6px 0 2px; border-radius: 7px; background: var(--soft); font-weight: 800; white-space: nowrap; line-height: 1.35; user-select: all; }
+.mention-chip .chip-name { color: inherit; }
 .field.inline-num input { width: 84px; }
 .field-grid { display: grid; gap: 8px 10px; }
 .field-grid.two { grid-template-columns: 1fr 1fr; }
@@ -349,13 +355,15 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
 .open-link { color: var(--primary); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(91, 91, 240, 0.35); text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; }
 .open-link:hover { text-decoration-color: var(--primary); }
 code .open-link { color: inherit; }
-.mermaid-block { margin: 8px 0; background: var(--card); border-radius: 14px; padding: 10px 12px 4px; max-width: 100%; overflow-x: auto; box-shadow: var(--edge); }
+.mermaid-block, .csv-block { margin: 8px 0; background: var(--card); border-radius: 14px; padding: 10px 12px 4px; max-width: 100%; overflow-x: auto; box-shadow: var(--edge); }
 .mermaid-block .mm-out svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
 .mermaid-block .mm-out pre { margin: 0; }
-.mermaid-block .mm-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; }
-.mermaid-block .mm-src { border: 0; background: transparent; color: var(--faint); font-size: 11px; font-weight: 800; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
-.mermaid-block .mm-src:hover { background: var(--soft); color: var(--primary); }
-.mermaid-block .mm-code { margin: 6px 0 0; }
+.mermaid-block .mm-bar, .csv-block .mm-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; }
+.mermaid-block .mm-src, .csv-block .mm-src { border: 0; background: transparent; color: var(--faint); font-size: 11px; font-weight: 800; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
+.mermaid-block .mm-src:hover, .csv-block .mm-src:hover { background: var(--soft); color: var(--primary); }
+.mermaid-block .mm-code, .csv-block .mm-code { margin: 6px 0 0; }
+.csv-block .csv-wrap { box-shadow: none; max-height: 320px; }
+.csv-block .csv-count { margin: 4px 2px 0; }
 .mermaid-block.preview { margin-top: 4px; }
 .mermaid-block.preview .mm-bar { display: none; }
 .diagram-presets .chip-btn { display: inline-flex; align-items: center; gap: 6px; }