viberoom 0.7.0 → 0.9.0

package/dist/server.js

@@ -34,6 +34,8 @@ const STATIC_FILES = {
     "/vendor-icons/cursor.svg": { file: "vendors/cursor.svg", type: "image/svg+xml", dir: "assets" },
     "/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-icons/grok.svg": { file: "vendors/grok.svg", type: "image/svg+xml", dir: "assets" },
+    "/vendor-icons/hermes.svg": { file: "vendors/hermes.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" },
     "/vendor/prism.js": { file: "prismjs/prism.js", type: "text/javascript; charset=utf-8", dir: "node_modules" },
@@ -137,10 +139,16 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             }
             return;
         }
+        if (req.method === "GET" && path === "/looks-custom.css") {
+            const css = await hub.looks.css();
+            res.writeHead(200, { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" });
+            res.end(css);
+            return;
+        }
         if (req.method === "GET" && STATIC_FILES[path]) {
             const entry = STATIC_FILES[path];
             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.writeHead(200, { "Content-Type": entry.type, "Cache-Control": entry.dir === "node_modules" ? "public, max-age=3600" : "no-cache" });
             res.end(body);
             return;
         }
@@ -360,6 +368,15 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, target.room.describeRoomForAgent(target.participantId));
             return;
         }
+        if (req.method === "GET" && path === "/api/mcp/looks") {
+            const target = hub.resolveMcpToken(url.searchParams.get("token") ?? "");
+            if (!target) {
+                sendJson(res, 403, { error: "unknown skills token (the session it belonged to is gone)" });
+                return;
+            }
+            sendJson(res, 200, await target.room.describeLooksForAgent(target.participantId));
+            return;
+        }
         if (req.method === "GET" && path === "/api/mcp/message") {
             const target = hub.resolveMcpToken(url.searchParams.get("token") ?? "");
             if (!target) {
@@ -410,6 +427,14 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, { templates: hub.templates.list() });
             return;
         }
+        if (req.method === "GET" && path === "/api/looks") {
+            sendJson(res, 200, { looks: hub.looks.list() });
+            return;
+        }
+        if (req.method === "GET" && path === "/api/looks/describe") {
+            sendJson(res, 200, await hub.looks.describe());
+            return;
+        }
         if (req.method === "GET" && path === "/api/rooms") {
             sendJson(res, 200, [...hub.rooms.values()].map((r) => r.snapshot()));
             return;
@@ -423,6 +448,29 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, { ok: true, settings: hub.updateSettings(body) });
             return;
         }
+        if (path === "/api/looks/check") {
+            const { checkLookSpec } = await import("./looks.js");
+            try {
+                const checked = await checkLookSpec(body.spec ?? body);
+                sendJson(res, 200, { ok: checked.lint.ok, id: checked.spec.id, errors: checked.lint.errors, warnings: checked.lint.warnings, report: checked.lint.report });
+            }
+            catch (error) {
+                sendJson(res, 200, { ok: false, errors: [{ level: "error", key: "spec", message: error instanceof Error ? error.message : String(error) }], warnings: [], report: [] });
+            }
+            return;
+        }
+        if (path === "/api/looks") {
+            const saved = await hub.saveLook(body.spec ?? body, { author: "human", replace: body.replace === true || body.replace === "true" });
+            sendJson(res, 200, { ok: true, look: saved.spec, warnings: saved.lint.warnings, report: saved.lint.report });
+            return;
+        }
+        if (path === "/api/looks/remove") {
+            const id = String(body.id ?? "");
+            if (!hub.removeLook(id))
+                throw new Error(`no look "${id}" of your own to remove`);
+            sendJson(res, 200, { ok: true });
+            return;
+        }
         if (path === "/api/fs/mkdir") {
             sendJson(res, 200, { ok: true, path: await createFolder(String(body.parent ?? ""), String(body.name ?? "")) });
             return;
@@ -498,6 +546,30 @@ export function startServer(hub, port, log, info, onShutdownRequest, onRestartRe
             sendJson(res, 200, target.room.createTemplateForAgent(target.participantId, design, body.replace === true || body.replace === "true"));
             return;
         }
+        if (path === "/api/mcp/looks/lint" || path === "/api/mcp/looks/create" || path === "/api/mcp/looks/propose") {
+            const target = hub.resolveMcpToken(String(body.token ?? ""));
+            if (!target) {
+                sendJson(res, 403, { error: "unknown skills token (the session it belonged to is gone)" });
+                return;
+            }
+            if (path === "/api/mcp/looks/lint") {
+                sendJson(res, 200, await target.room.lintLookForAgent(target.participantId, body.spec ?? body));
+                return;
+            }
+            if (path === "/api/mcp/looks/create") {
+                sendJson(res, 200, await target.room.createLookForAgent(target.participantId, body.spec ?? body, body.replace === true || body.replace === "true"));
+                return;
+            }
+            const num = (v) => (v === undefined || v === null || v === "" ? undefined : Number(v));
+            sendJson(res, 200, await target.room.proposeLookChanges(target.participantId, String(body.why ?? ""), {
+                look: typeof body.look === "string" ? body.look : undefined,
+                adjust: body.adjust && typeof body.adjust === "object" && !Array.isArray(body.adjust) ? body.adjust : undefined,
+                chatFontSize: num(body.chatFontSize),
+                font: typeof body.font === "string" ? body.font : undefined,
+                mono: typeof body.mono === "string" ? body.mono : undefined,
+            }));
+            return;
+        }
         if (path === "/api/mcp/propose") {
             const target = hub.resolveMcpToken(String(body.token ?? ""));
             if (!target) {

package/dist/skills.js

@@ -4,7 +4,7 @@ import { join, resolve } from "node:path";
 import { isReservedSkillName, RESERVED_SKILL_NAMES } from "./commands.js";
 export const SKILL_NAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]{0,31}$/;
 export const SKILL_FILE = "SKILL.md";
-import { ROOM_DESIGNER_NAME } from "./persona.js";
+import { LOOK_DESIGNER_NAME, ROOM_DESIGNER_NAME } from "./persona.js";
 export const BUILTIN_AUTHOR = "viberoom";
 export const HUMAN_AUTHOR = "human";
 const DESCRIPTION_MAX = 300;
@@ -175,7 +175,28 @@ export function renderSkillBody(body, args) {
         .replace(/\r\n/g, "\n")
         .trim();
 }
-export const BUILTIN_SKILLS = [SKILL_WRITER, ROOM_DESIGNER];
+export const LOOK_DESIGNER = {
+    name: LOOK_DESIGNER_NAME,
+    description: "How to design a good viberoom look (how the window is drawn: colours, light, corners, fonts) as data that extends a shipped look. Load it before lint_look, create_look or propose_look_changes.",
+    argumentHint: "",
+    body: [
+        "A look is data, not code: which shipped look it extends, a few hues laid over that look's palette, and what it wants otherwise (corners, fonts, shadows, the chat's paper, a part of an element). Everything the window draws is derived from the palette, so a hue changed there reaches every place that wears it; start from the shipped look closest to what is asked and change as little as says it. The facts (the looks, every hue and element with what it means, the value syntax, the fonts, how the window is set now) come from describe_looks; never guess a name, a key the look does not have is refused.",
+        "",
+        "Name what a colour looks like, not what it is for: the palette says primary, ink, bg, white, lav; the elements say which part wears which hue (bubble.bg, btn.hoverInk). Prefer changing hues over changing elements: a new accent is palette.primary plus its primaryLight, primaryDeep and primaryDark steps and its tints lav and lav2; a new paper is bg with white (the panels) a shade apart from it, and soft / softer a step off white; a new ink is ink with ink2 for the words in a bubble and ink3, muted and faint growing quieter. Change an element only when a part must differ from what the palette gives it.",
+        "",
+        "You cannot see the colours; the lint can. Every look must read: the words on a bubble and on the paper at 7:1, the quiet words at 3:1 (4.5:1 on dark paper), every ink on its own paper at 3:1. Run lint_look before you save and read the report: it names every pair with its ratio. Fix the ink before the paper (a darker muted, an ink2 nearer black), keep the accent readable where it is written on (btn.onPrimary on primary at 3:1), and give a bubble that sits on paper of nearly its own shade a hairline (bubble.border) or another shade.",
+        "",
+        "Light comes from one place, top-left, and the shadows fall from it in the palette's shadowInk; a flat look sets the shadows to none, a look with volume raises a thing with a soft shadow below it and a bevel (a light gradient over its face) and sinks a pressed one with an inset shade. Say scheme dark when the paper is dark: diagrams, marks and the quiet-word floors follow it. One accent; the state colours (green ready, yellow thinking, red error, blue waiting, violet writing) keep their families, only their shades follow the paper. Fonts by id from describe_looks (they ship with viberoom and look the same on every machine); running text at lineHeight 1.45 or more; a terminal look wants the mono font everywhere and no curves (rScale 0), a soft look rounder corners (rScale 1.2-1.6) and pills for every control (rCtlMin 99px).",
+        "",
+        "When it reads: create_look saves it among the human's own looks (Settings → Appearance, after the shipped ones, with the human's name on it); one of the human's own may be replaced with replace: true, a shipped look never. Then propose_look_changes offers it as a card (look: its id), or fine-tunes any look with the adjustables describe_looks lists (a colour as #rrggbb, a scale 0-2) — the whole window changes, not this room, and only on the human's click. What a look cannot do: no CSS of its own, no layout, no icons, no fonts beyond the shipped ids; when the human asks for such a thing, say so instead of forcing a token to carry it.",
+    ].join("\n"),
+    userInvocable: true,
+    agentInvocable: true,
+    author: BUILTIN_AUTHOR,
+    reviewed: true,
+    draft: false,
+};
+export const BUILTIN_SKILLS = [SKILL_WRITER, ROOM_DESIGNER, LOOK_DESIGNER];
 export function isBuiltinSkill(name) {
     const lower = name.trim().toLowerCase();
     return BUILTIN_SKILLS.some((b) => b.name === lower);

package/package.json

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

package/ui/app.css

@@ -30,7 +30,7 @@
 @supports not selector(::-webkit-scrollbar) { .rail-rooms { scrollbar-width: thin; } }
 .shell.rail-open .rail-rooms { align-items: stretch; }
 .rail-room { flex: none; }
-.rail-room [data-ui="room-mark"] { width: 40px; height: 40px; border-radius: calc(13px * var(--r-scale)); font-size: 16px; opacity: 0.72; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
+.rail-room [data-ui="room-mark"] { width: 40px; height: 40px; border-radius: var(--room-mark-radius-rail); font-size: 16px; opacity: 0.72; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
 .rail-room [data-ui="room-mark"][data-kind="emoji"] { font-size: 21px; }
 .rail-room:hover [data-ui="room-mark"] { opacity: 1; transform: translateY(-1px); }
 .rail-room.active, .rail-room.active:hover { background: transparent; box-shadow: none; }
@@ -231,18 +231,18 @@
 .home-room .hr-time { color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 700; flex: none; }
 .home-room.empty-room { cursor: default; }
 .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
-.feature { border-radius: calc(18px * var(--r-scale)); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--edge); transition: transform var(--t-fast) var(--ease-out); }
+.feature { border-radius: calc(18px * var(--r-scale)); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--feature-shadow); background-image: var(--bevel); transition: transform var(--t-fast) var(--ease-out); }
 .feature:hover { transform: translateY(-2px); }
 .feature .f-emoji { width: 46px; height: 46px; border-radius: calc(14px * var(--r-scale)); background: var(--feature-emoji-bg); display: grid; place-content: center; font-size: 24px; box-shadow: var(--shadow-tile); }
 .feature h3 { font-size: calc(15px * var(--fs-scale)); margin-top: 4px; }
 .feature p { margin: 0; font-size: calc(13px * var(--fs-scale)); font-weight: 600; line-height: 1.5; color: var(--ink-2); }
-.feature.lav { background: var(--lav); }
-.feature.mint { background: var(--mint); }
-.feature.warm { background: var(--warm); }
-.feature.peach { background: var(--feature-peach-bg); }
-.feature.rose { background: var(--rose); }
-.feature.sky { background: var(--sky); }
-.feature.orchid { background: var(--orchid); }
+.feature.lav { background-color: var(--lav); }
+.feature.mint { background-color: var(--mint); }
+.feature.warm { background-color: var(--warm); }
+.feature.peach { background-color: var(--feature-peach-bg); }
+.feature.rose { background-color: var(--rose); }
+.feature.sky { background-color: var(--sky); }
+.feature.orchid { background-color: var(--orchid); }
 .home-vendors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
 .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
 .step { display: flex; gap: 14px; align-items: flex-start; background: var(--step-bg); border-radius: calc(18px * var(--r-scale)); padding: 16px 18px; box-shadow: var(--edge); }
@@ -362,6 +362,13 @@
 .look-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .look-cards [data-ui="look-card"] { width: auto; }
 #look-dialog .look-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 14px; }
+.look-own { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
+.look-own .own-only { display: inline-flex; gap: 6px; }
+.prop-window { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: calc(12px * var(--fs-scale)); font-weight: 600; }
+.prop-window .note { display: flex; align-items: center; gap: 6px; }
+.prop-window .note > .i { width: 14px; height: 14px; flex: none; }
+.prop-look { display: flex; align-items: center; gap: 10px; }
+.prop-look [data-ui="look-card"] { width: 150px; cursor: default; }
 .look-adjust { margin-top: 4px; }
 .look-adjust .adjust-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .look-adjust .adjust-head .label { font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); }
@@ -373,14 +380,10 @@
 .adjust-group.text .field.row [data-ui="number-field"] { width: 104px; flex: none; }
 .adjust-group.text .field.row select { flex: 0 1 58%; }
 .adjust-group.text #sp-chat-sample { margin-top: 4px; }
-.bubble { max-width: 100%; background: var(--bubble-bg); border-radius: calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); padding: 12px 16px; min-width: 0; font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--bubble-ink); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-shadow); }
-.msg.mine .bubble { background: var(--bubble-mine-bg); color: var(--bubble-mine-ink); border-radius: calc(18px * var(--r-scale)) calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-mine-shadow); padding: 11px 16px; }
+.bubble { max-width: 100%; background-color: var(--bubble-bg); background-image: var(--bevel); border-radius: calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); padding: 12px 16px; min-width: 0; font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--bubble-ink); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-shadow); }
+.msg.mine .bubble { background-color: transparent; background-image: var(--bevel), var(--bubble-mine-bg); color: var(--bubble-mine-ink); border-radius: calc(18px * var(--r-scale)) calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-mine-shadow); padding: 11px 16px; }
 .msg.mine .bubble .text { color: var(--bubble-mine-ink); }
 .msg.mine.waiting .bubble { background: var(--attention-grad); box-shadow: var(--attention-shadow); }
-html[data-look="plush"] .msg .bubble { background-image: var(--bevel); }
-html[data-look="plush"] .msg.mine .bubble { background-image: var(--bevel), var(--bubble-mine-bg); }
-html[data-look="plush"] .composer-box { box-shadow: var(--input-shadow); background: var(--softer); border-radius: calc(14px * var(--r-scale)); padding: 0 12px; }
-html[data-look="plush"] .feature { box-shadow: var(--shadow-card); background-image: var(--bevel); }
 .bubble .waiting { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bubble-mine-rule); font-size: calc(13px * var(--fs-scale)); font-weight: 600; color: var(--bubble-mine-waiting-ink); }
 .bubble .waiting .i { width: 14px; height: 14px; vertical-align: -2px; }
 .bubble .waiting-text { flex: 1; min-width: 160px; }
@@ -543,7 +546,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
 .composer .smile-btn { border: 0; background: transparent; color: var(--placeholder); padding: 0; display: grid; place-content: center; width: 28px; height: 28px; border-radius: calc(8px * var(--r-scale)); flex: none; }
 .composer .smile-btn .i { width: 20px; height: 20px; }
 .composer .smile-btn:hover { color: var(--primary); }
-.composer-box { flex: 1; min-width: 0; display: flex; align-items: center; }
+.composer-box { flex: 1; min-width: 0; display: flex; align-items: center; box-shadow: var(--composer-shadow); background: var(--composer-bg); border-radius: var(--composer-radius); padding: 0 var(--composer-pad-x); }
 .composer-box:has(.shots-tray:not([hidden])) { flex-direction: column; align-items: stretch; }
 .composer-box:has(.shots-tray:not([hidden])) textarea { flex: none; }
 .composer.drop-target { box-shadow: 0 0 0 2px var(--primary); }
@@ -636,6 +639,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
 #fv-tools label.search > input:not([type="checkbox"]) { flex: 1 1 auto; margin-top: 0; width: auto; height: 100%; padding: 0; border: 0; background: transparent; }
 .fv-tools .fv-hits, .fv-tools .fv-count { color: var(--faint); font-size: var(--fs-xs); font-weight: 700; }
 .fv-tools .fv-goto, .fv-tools .fv-wrap { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
+#fv-tools .fv-goto, #fv-tools .fv-wrap { margin: 0; }
 #fv-tools .fv-goto > input[type="number"] { flex: 0 0 76px; margin-top: 0; width: 76px; height: 30px; padding: 0 8px; }
 .fv-tools .fv-wrap input { accent-color: var(--primary); }
 .text [data-ui="file-card"] { margin: 8px 0 4px; }
@@ -708,6 +712,9 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
 .section textarea { resize: vertical; min-height: 76px; height: auto; padding: 10px 14px; line-height: 1.5; }
 .section input::placeholder, .section textarea::placeholder { color: var(--placeholder); font-weight: 600; }
 .section .hint { margin: -4px 0 10px; }
+.field .count { font-variant-numeric: tabular-nums; color: var(--muted); }
+.field .count::before { content: " · "; }
+.field .count.over { color: var(--danger); font-weight: 800; }
 .three-inline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
 .three-inline label { margin-bottom: 4px; }
 .rc-num { width: 76px; display: inline-flex; }