viberoom 0.7.0 → 0.9.0

package/ui/app.js

@@ -7,6 +7,7 @@
     recipes: [],
     roomDefaults: null,
     skills: [],
+    looks: [],
     version: null,
     rooms: new Map(),
     currentRoomId: null,
@@ -161,36 +162,7 @@
   } catch {
   }
 
-  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' },
-      "open-sans": { label: "Open Sans", stack: '"Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "source-sans-3": { label: "Source Sans 3", stack: '"Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "ibm-plex-sans": { label: "IBM Plex Sans", stack: '"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "manrope": { label: "Manrope", stack: '"Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "rubik": { label: "Rubik", stack: '"Rubik", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "montserrat": { label: "Montserrat", stack: '"Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "golos-text": { label: "Golos Text", stack: '"Golos Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "exo-2": { label: "Exo 2", stack: '"Exo 2", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "comfortaa": { label: "Comfortaa", stack: '"Comfortaa", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif' },
-      "ubuntu-sans": { label: "Ubuntu Sans", stack: '"Ubuntu 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' },
-      "ibm-plex-mono": { label: "IBM Plex Mono", stack: '"IBM Plex Mono", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
-      "pt-mono": { label: "PT Mono", stack: '"PT Mono", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
-      "victor-mono": { label: "Victor Mono", stack: '"Victor Mono", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
-      "anonymous-pro": { label: "Anonymous Pro", stack: '"Anonymous Pro", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
-      "cascadia-code": { label: "Cascadia Code", stack: '"Cascadia Code", ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", monospace' },
-      system: { label: "System monospace", stack: 'ui-monospace, Consolas, Menlo, "DejaVu Sans Mono", "Courier New", monospace' },
-    },
-  };
+  const FONTS = globalThis.VIBEROOM_TOKENS.fonts;
   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 STATUS_TONE = { idle: "ready", queued: "waiting", starting: "waiting", thinking: "thinking", writing: "writing", error: "error", offline: "asleep", left: "asleep", unstaffed: "attention" };
   const TOOL_STATUSES = new Set(["pending", "in_progress", "completed", "failed"]);
@@ -713,28 +685,34 @@
     }
     if (!found.size) return;
     const paths = await Promise.all([...found.keys()].map((token) => resolveInRoom(room.id, token)));
-    let linked = false;
+    const resolved = new Map();
     [...found.keys()].forEach((token, i) => {
       const full = paths[i] && paths[i].path;
-      if (!full) return;
-      const byNode = new Map();
-      for (const hit of found.get(token)) byNode.set(hit.node, [...(byNode.get(hit.node) || []), hit]);
-      for (const [node, hits] of byNode) {
-        if (!node.isConnected) continue;
-        for (const hit of hits.sort((a, b) => b.index - a.index)) {
-          const after = node.splitText(hit.index);
-          after.nodeValue = after.nodeValue.slice(hit.length);
-          const link = document.createElement("a");
-          link.className = "open-link";
-          link.href = "#";
-          link.dataset.open = `${full}${hit.line}`;
-          link.title = `${full} (relative to the room's folder)`;
-          link.textContent = `${token}${hit.line}`;
-          node.parentNode.insertBefore(link, after);
-          linked = true;
-        }
-      }
+      if (full) resolved.set(token, full);
     });
+    if (!resolved.size) return;
+    const byNode = new Map();
+    for (const [token, hits] of found) {
+      if (!resolved.has(token)) continue;
+      for (const hit of hits) byNode.set(hit.node, [...(byNode.get(hit.node) || []), { ...hit, token }]);
+    }
+    let linked = false;
+    for (const [node, hits] of byNode) {
+      if (!node.isConnected) continue;
+      for (const hit of hits.sort((a, b) => b.index - a.index)) {
+        const full = resolved.get(hit.token);
+        const after = node.splitText(hit.index);
+        after.nodeValue = after.nodeValue.slice(hit.length);
+        const link = document.createElement("a");
+        link.className = "open-link";
+        link.href = "#";
+        link.dataset.open = `${full}${hit.line}`;
+        link.title = `${full} (relative to the room's folder)`;
+        link.textContent = `${hit.token}${hit.line}`;
+        node.parentNode.insertBefore(link, after);
+        linked = true;
+      }
+    }
     if (linked) renderPreviews(textEl, m);
   }
   function csvTable(rows) {
@@ -1134,8 +1112,8 @@
       const field = lastField;
       lastField = null;
       try {
-        await onSave();
-        if (field) {
+        const outcome = await onSave();
+        if (field && outcome !== false) {
           recentlySaved.set(field, Date.now());
           markSaved(field);
         }
@@ -1337,24 +1315,60 @@
     }, 190);
   }
   function confirmDialog(text, opts) {
+    return choiceDialog(text, opts).then((choice) => choice === "ok");
+  }
+  function choiceDialog(text, opts) {
     const o = opts || {};
     const dialog = $("#confirm-dialog");
     $("#cf-title").textContent = o.title || "Are you sure?";
     $("#cf-text").textContent = text;
-    const ok = $("#cf-ok");
-    ok.textContent = o.okLabel || "OK";
-    ok.className = `btn ${o.danger ? "danger solid" : "primary"}`;
+    const buttons = { ok: $("#cf-ok"), alt: $("#cf-alt"), cancel: $("#cf-cancel") };
+    buttons.ok.textContent = o.okLabel || "OK";
+    buttons.cancel.textContent = o.cancelLabel || "Cancel";
+    buttons.alt.textContent = o.altLabel || "";
+    buttons.alt.hidden = !o.altLabel;
+    dialog.classList.toggle("three-way", !!o.altLabel);
+    const primary = o.primary || "ok";
+    for (const [name, button] of Object.entries(buttons)) button.dataset.kind = name === primary ? (o.danger ? "danger" : "primary") : "ghost";
     return new Promise((resolve) => {
       const done = () => {
         dialog.removeEventListener("close", done);
-        resolve(dialog.returnValue === "ok");
+        resolve(dialog.returnValue === "ok" ? "ok" : dialog.returnValue === "alt" ? "alt" : "cancel");
       };
       dialog.addEventListener("close", done);
       dialog.returnValue = "";
       openDialog(dialog);
-      ok.focus();
+      buttons[primary].focus();
     });
   }
+
+  const BRIEF_TEXT_MAX = 32000;
+  function briefTextLimit(room) {
+    const r = room || currentRoom();
+    return (r && r.settings && Number(r.settings.briefTextLimit)) || 8000;
+  }
+  function bindCount(el, countEl, limitOf) {
+    if (!el || !countEl) return;
+    const tick = () => {
+      const n = (el.isContentEditable ? rulesText(el) : el.value).length;
+      const limit = limitOf();
+      countEl.textContent = `${n} / ${limit}`;
+      countEl.classList.toggle("over", n > limit);
+    };
+    el.addEventListener("input", tick);
+    tick();
+  }
+  async function fitBriefText(text, what, limit, limitInput) {
+    if (text.length <= limit) return text;
+    const needed = Math.min(BRIEF_TEXT_MAX, Math.ceil(text.length / 500) * 500);
+    const canRaise = text.length <= BRIEF_TEXT_MAX;
+    const choice = await choiceDialog(`${what} is ${text.length} characters; this room's limit is ${limit}. Cut it at the limit, or raise the limit for this room?${canRaise ? "" : ` ${BRIEF_TEXT_MAX} is the most a room can allow.`}`, { title: "Over the room's limit", okLabel: `Cut at ${limit}`, altLabel: canRaise ? `Raise the limit to ${needed}` : "", cancelLabel: "Go back", primary: "cancel" });
+    if (choice === "ok") return text.slice(0, limit);
+    if (choice !== "alt") return null;
+    if (limitInput) limitInput.value = String(needed);
+    else await post(roomApi("/settings"), { briefTextLimit: needed });
+    return text;
+  }
   function remember(key, value) {
     try {
       localStorage.setItem(`viberoom.${key}`, String(value));
@@ -2149,6 +2163,7 @@
       const card = choice.closest('[data-ui="ask-card"]');
       if (choice.dataset.act === "permit") post(roomApi(`/permissions/${encodeURIComponent(card.dataset.key)}`), { optionId: choice.dataset.option || null }).catch(showError);
       else if (choice.dataset.act === "decide") post(roomApi(`/proposals/${encodeURIComponent(card.dataset.key)}`), { accept: choice.dataset.answer === "apply" }).catch(showError);
+      else if (choice.dataset.act === "try-look") tryLook(choice.dataset.look);
       return;
     }
     const chip = e.target.closest('[data-ui="tool-call"] > [data-ui="chip"]');
@@ -2630,6 +2645,7 @@
         rows.push(`<div class="prop-row"><b>Room rules</b>${lines.join("")}</div>`);
       } else rows.push(`<div class="prop-row"><b>${esc(c.key)}</b> <span class="prop-from">${esc(proposalValue(c.from))}</span> → <span class="prop-to">${esc(proposalValue(c.to))}</span></div>`);
     }
+    for (const c of p.appearance || []) rows.push(`<div class="prop-row"><b>${esc(c.key)}</b> <span class="prop-from">${esc(proposalValue(c.from))}</span> → <span class="prop-to">${esc(proposalValue(c.to))}</span></div>`);
     for (const v of p.vibemates || []) {
       if (v.op === "update") rows.push(`<div class="prop-row"><b>${esc(v.name)}</b>${(v.fields || []).map((f) => `<div class="prop-line">${esc(f.field)}: <span class="prop-from">${esc(f.from || "(empty)")}</span> → <span class="prop-to">${esc(f.to || "(empty)")}</span></div>`).join("")}</div>`);
       else rows.push(`<div class="prop-row"><b>${v.op === "add" ? "New vibemate" : "Remove"}</b> ${esc(v.name)}${v.op === "add" ? ' <span class="hint">(you pick its coding agent)</span>' : ""}</div>`);
@@ -2638,9 +2654,15 @@
   }
   function renderProposal(room, p) {
     const existing = els.messages.querySelector(`[data-ui="ask-card"][data-kind="proposal"][data-key="${CSS.escape(p.key)}"]`);
+    const lookRow = (p.appearance || []).find((c) => c.key === "look");
+    const lookTarget = lookRow && TOKENS.looks[lookRow.to];
+    const windowNote = p.appearance && p.appearance.length
+      ? `<div class="prop-window"><span class="note">${ic("eye")} This changes the whole window, not this room alone.</span>${lookTarget ? `<div class="prop-look">${UI.html("look-card", { look: lookTarget, tag: lookTag(lookTarget), title: lookTarget.label })}${p.status === "pending" ? UI.html("button", { label: document.documentElement.dataset.tried === lookTarget.id ? "Back" : "Try it on", kind: "soft", size: "xs", act: "try-look", data: { look: lookTarget.id }, title: "This window only, until you apply or reject" }) : ""}</div>` : ""}</div>`
+      : "";
     const body =
       (p.why ? `<div class="prop-why">${esc(p.why)}</div>` : "") +
       `<div class="prop-diff">${proposalDiffHtml(p)}</div>` +
+      windowNote +
       (p.warnings && p.warnings.length ? `<ul class="prop-warn">${p.warnings.map((w) => `<li>${esc(w)}</li>`).join("")}</ul>` : "") +
       (p.touchesOwn ? `<div class="prop-own">${ic("info")} This changes the rules or ${esc(p.participantName)}'s own persona: it decides how ${esc(p.participantName)} itself will behave.</div>` : "");
     const outcome = p.status === "pending" ? undefined : p.status === "applied" ? `applied${p.skipped && p.skipped.length ? ` · not applied: ${p.skipped.join("; ")}` : ""}` : "rejected";
@@ -2753,7 +2775,7 @@
         ${field("Vibename", `<input type="text" id="pp-name" maxlength="24" value="${esc(p.name)}">`)}
         ${field("Vibersona", `<input type="text" id="pp-tagline" maxlength="80" value="${esc(p.tagline || "")}" placeholder="a few words under the vibename">`, "Shown under the vibename.", "Everyone in the room sees it: you, and the other vibemates in their roster.")}
         ${field("Vibeface", `<div id="pp-avatar-picker"></div><input type="text" id="pp-avatar" maxlength="8" value="${esc(p.avatar || "")}" placeholder="custom emoji (optional)">`)}
-        ${field("Vibio", `<textarea id="pp-role" rows="5" maxlength="4000" placeholder="who it is, how it speaks, what it cares about">${esc(p.role || "")}</textarea>`, "Only this vibemate reads it.", "Reaches the vibemate as refreshed instructions in its brief on its next turn; its memory is kept. The other participants never see it.")}
+        ${field("Vibio", `<textarea id="pp-role" rows="5" placeholder="who it is, how it speaks, what it cares about">${esc(p.role || "")}</textarea>`, `Only this vibemate reads it.<span class="count" id="pp-role-count"></span>`, "Reaches the vibemate as refreshed instructions in its brief on its next turn; its memory is kept. The other participants never see it. A vibio and the room rules go into every brief, so the room has a limit for them (the room's settings, for geeks); text over it is never cut in silence.")}
       </div>
       ${p.trouble ? `<div class="trouble"><b>${esc(p.trouble.what)}</b><span>${esc(p.trouble.advice)}</span></div>` : ""}
       ${p.statusDetail && (p.status === "offline" || p.status === "error" || p.failedTurns) ? `<p class="hint" style="color:var(--danger);margin:0 4px 10px">${esc(p.statusDetail)}</p>` : ""}
@@ -2826,7 +2848,13 @@
     renderSkillChecks($("#pp-skills"), p.skills || []);
     bindSave($("#pp-skills-section"), () => post(roomApi(`/participants/${encodeURIComponent(p.id)}/persona`), { skills: checkedSkills($("#pp-skills")) }));
     bindSave($("#pp-timing"), () => post(roomApi(`/participants/${encodeURIComponent(p.id)}/persona`), { replyDelay: $("#pp-delay").value === "" ? null : Number($("#pp-delay").value) }));
-    bindSave($("#pp-persona"), () => post(roomApi(`/participants/${encodeURIComponent(p.id)}/persona`), { name: $("#pp-name").value, tagline: $("#pp-tagline").value, role: $("#pp-role").value, avatar: $("#pp-avatar").value }));
+    bindCount($("#pp-role"), $("#pp-role-count"), () => briefTextLimit(currentRoom()));
+    bindSave($("#pp-persona"), async () => {
+      const role = await fitBriefText($("#pp-role").value, `${p.name}'s vibio`, briefTextLimit(currentRoom()));
+      if (role === null) return false;
+      await post(roomApi(`/participants/${encodeURIComponent(p.id)}/persona`), { name: $("#pp-name").value, tagline: $("#pp-tagline").value, role, avatar: $("#pp-avatar").value });
+      return true;
+    });
     renderConfig($("#pp-config"), p, offline);
   }
 
@@ -2927,7 +2955,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">${UI.html("button", { label: "Browse", icon: "folder", kind: "ghost", id: "rp-dir-browse", title: "Choose a folder", hook: "browse-btn" })}</span>`, "Where the vibemates read and write. Changing it restarts them in the new folder; they replay the last messages.")}
-        <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>
+        <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 class="count" id="rp-rules-count"></span></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">
@@ -2970,6 +2998,7 @@
         <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", `${UI.html("number-field", { id: "rp-replay", value: String(rs.replayAfterRestart), min: 0, max: 200 })}`)}
         ${field("Missed messages a vibemate reads at most on its next turn", `${UI.html("number-field", { id: "rp-backlog", value: String(rs.backlogCap), min: 1, max: 1000 })}`, "Everything posted since its last turn counts, including while it was muted; older messages are dropped with a note in its prompt.")}
+        ${field("Most characters in a vibio or in the room rules", `${UI.html("number-field", { id: "rp-text-limit", value: String(rs.briefTextLimit ?? 8000), min: 500, max: 32000, step: 500 })}`, "Both go into every brief. Text over the limit is refused with the numbers, never cut.")}
       </div>`,
         "tools, hops, referee, briefs",
       )}
@@ -2983,6 +3012,8 @@
     wireDetailsClose();
     rulesToNodes($("#rp-rules"), room.customRulesText != null ? room.customRulesText : rs.customRules || "", room);
     attachRichMentions($("#rp-rules"), $("#rp-rules-menu"));
+    bindCount($("#rp-rules"), $("#rp-rules-count"), () => Number($("#rp-text-limit").value) || briefTextLimit(room));
+    $("#rp-text-limit").addEventListener("input", () => $("#rp-rules").dispatchEvent(new Event("input")));
     $("#rp-emoji-picker").appendChild(
       emojiGrid(ROOM_EMOJI, rs.emoji || "", (emoji) => {
         $("#rp-emoji").value = emoji;
@@ -2999,10 +3030,13 @@
         if (name.trim() !== room.name) await post(roomApi("/rename"), { name });
         const dir = $("#rp-dir").value.trim();
         if (dir && dir !== room.dir) await post(roomApi("/dir"), { dir });
+        const rules = await fitBriefText(rulesText($("#rp-rules")), "The room rules text", Number($("#rp-text-limit").value) || briefTextLimit(room), $("#rp-text-limit"));
+        if (rules === null) return false;
         await post(roomApi("/settings"), {
           emoji: $("#rp-emoji").value,
           topic: $("#rp-topic").value,
-          customRules: rulesText($("#rp-rules")).slice(0, 4000),
+          customRules: rules,
+          briefTextLimit: Number($("#rp-text-limit").value),
           language: $("#rp-lang").value.trim() || "follow-human",
           tools: $("#rp-tools").value,
           maxSentences: $("#rp-maxlen").value === "" ? null : Number($("#rp-maxlen").value),
@@ -3072,11 +3106,11 @@
               const lookId = TOKENS.looks[a.look] ? a.look : TOKENS.current.id;
               const look = TOKENS.looks[lookId];
               const custom = (a.custom || {})[lookId] || {};
-              const cards = Object.values(TOKENS.looks).map((l) => UI.html("look-card", { look: l, on: lookId === l.id, data: { look: l.id } })).join("");
+              const cards = Object.values(TOKENS.looks).map((l) => UI.html("look-card", { look: l, tag: lookTag(l), on: lookId === l.id, data: { look: l.id } })).join("");
               const groups = [...new Set(TOKENS.adjustables.map((f) => f.group))];
               const rows = (group) => TOKENS.adjustables.filter((f) => f.group === group).map((f) => UI.html("adjust-row", { key: f.key, label: f.label, hint: f.hint, kind: f.kind, value: custom[f.key] || String(f.of(look)), own: String(f.of(look)), min: f.min, max: f.max, step: f.step })).join("");
               return `<div class="look-preview" id="sp-look-preview">${lookSampleHtml()}</div>
-              ${field("Look", `<input type="hidden" id="sp-look" value="${esc(lookId)}"><div class="look-cards">${cards}</div>`, "How the room is drawn. Every element keeps what it does; only its look changes. The sample above wears the look you pick; the window changes on save.")}
+              ${field("Look", `<input type="hidden" id="sp-look" value="${esc(lookId)}"><div class="look-cards">${cards}</div><div class="look-own" id="sp-look-own">${UI.html("button", { label: "Import a look…", kind: "ghost", size: "xs", hook: "sp-look-import", title: "A look file (.json) saved from viberoom, yours or someone else's" })}<span class="own-only"${look.custom ? "" : " hidden"}>${UI.html("button", { label: "Export", kind: "ghost", size: "xs", hook: "sp-look-export", title: "Save this look as a file, to share or keep" })}${UI.html("button", { label: "Delete", kind: "danger", size: "xs", hook: "sp-look-delete", title: "Remove this look from your own looks" })}</span><input type="file" id="sp-look-file" accept=".json,application/json" hidden></div>`, "How the room is drawn. Every element keeps what it does; only its look changes. The sample above wears the look you pick; the window changes on save. Your own looks (a vibemate's, or a file you import) come after the ones viberoom ships.")}
               <div class="look-adjust" id="sp-look-adjust">
                 <div class="adjust-head"><span class="label">Fine-tune <span id="sp-adj-name">${esc(look.label)}</span></span>${UI.html("button", { label: "Reset all", kind: "ghost", size: "xs", hook: "sp-adj-reset", title: "Back to the look as designed" })}</div>
                 <p class="hint">Kept for this look alone. The sample follows as you pick; the window follows on save.</p>
@@ -3151,6 +3185,7 @@
             ${field("Hop limit", `${UI.html("number-field", { id: "sp-hops", value: String(d.hopLimit), min: 0, max: 10000 })}`, "How many vibemate-to-vibemate replies may follow one message of yours before the room waits for you again.")}
             ${field("Full brief every N turns", `${UI.html("number-field", { id: "sp-brief-turns", value: String(d.fullBriefEveryTurns), min: 1, max: 10000 })}`, "How often a vibemate gets the whole room brief again instead of the short header.")}
             ${field("Full brief every N tokens", `${UI.html("number-field", { id: "sp-brief-tokens", value: String(d.fullBriefEveryTokens), min: 1000, max: 10000000, step: 1000 })}`, "…or after this much new context since its last full brief, whichever comes first.")}
+            ${field("Most characters in a vibio or in the room rules", `${UI.html("number-field", { id: "sp-text-limit", value: String(d.briefTextLimit ?? 8000), min: 500, max: 32000, step: 500 })}`, "Both go into every brief. Over the limit, the text is refused with the numbers, never cut; each room can raise or lower its own.")}
             <label class="switch"><span class="label">Repeat core rules in every header<span class="hint">The short header before each turn repeats the room's core rules (who is here, how to address, how long to write).</span></span><input type="checkbox" id="sp-header-rules" ${d.headerRules ? "checked" : ""}></label>
             ${field("Tools", `<select id="sp-tools"><option value="on-request"${d.tools === "on-request" ? " selected" : ""}>Only when asked</option><option value="never"${d.tools === "never" ? " selected" : ""}>Never</option></select>`, "Whether vibemates may use their own tools (files, shell, web) without being asked to.")}
           </div>
@@ -3275,9 +3310,56 @@
         input.value = b.dataset.look;
         fillRows(b.dataset.look);
         paintLookPreview();
+        paintOwnRow();
         input.dispatchEvent(new Event("change", { bubbles: true }));
       }),
     );
+    const paintOwnRow = () => {
+      const own = looksBox.querySelector("#sp-look-own .own-only");
+      if (own) own.hidden = !pickedLook().custom;
+    };
+    looksBox.querySelector(".sp-look-import").addEventListener("click", () => $("#sp-look-file").click());
+    $("#sp-look-file").addEventListener("change", async () => {
+      const file = $("#sp-look-file").files && $("#sp-look-file").files[0];
+      $("#sp-look-file").value = "";
+      if (!file) return;
+      try {
+        const spec = JSON.parse(await file.text());
+        const checked = await post("/api/looks/check", { spec });
+        if (!checked.ok) throw new Error(`${file.name} is not a look viberoom can wear: ${(checked.errors || []).map((x) => x.message).join("; ")}`);
+        const taken = TOKENS.looks[checked.id];
+        if (taken && !taken.custom) throw new Error(`"${checked.id}" is the id of a look viberoom ships; change the id in the file`);
+        if (taken && !(await confirmDialog(`You have a look "${taken.label}" with this id already. Replace it with the one from ${file.name}?`, { title: "Replace the look?", okLabel: "Replace" }))) return;
+        const saved = await post("/api/looks", { spec, replace: !!taken });
+        toast(`Look "${saved.look.label}" ${taken ? "replaced" : "added"}: it is in the list now.${(saved.warnings || []).length ? ` ${saved.warnings.map((w) => w.message).join(" ")}` : ""}`, "success");
+      } catch (error) {
+        showError(error);
+      }
+    });
+    looksBox.querySelector(".sp-look-export").addEventListener("click", () => {
+      const look = pickedLook();
+      const spec = state.looks.find((l) => l.id === look.id);
+      if (!spec) return;
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(new Blob([`${JSON.stringify(spec, null, 2)}\n`], { type: "application/json" }));
+      a.download = `${look.id}.json`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(() => URL.revokeObjectURL(a.href), 2000);
+    });
+    looksBox.querySelector(".sp-look-delete").addEventListener("click", async () => {
+      const look = pickedLook();
+      if (!look.custom) return;
+      const ok = await confirmDialog(`"${look.label}" goes from your looks; a window wearing it falls back to VibeClassic. The file is gone too (export it first to keep it).`, { title: "Delete the look?", okLabel: "Delete", danger: true });
+      if (!ok) return;
+      try {
+        await post("/api/looks/remove", { id: look.id });
+        toast(`Look "${look.label}" deleted.`, "success");
+      } catch (error) {
+        showError(error);
+      }
+    });
     looksBox.querySelectorAll('[data-ui="adjust-row"] input').forEach((i) => i.addEventListener("input", paintLookPreview));
     looksBox.addEventListener("click", (e) => {
       const back = e.target.closest && e.target.closest('[data-ui="adjust-row"] .back');
@@ -3359,6 +3441,7 @@
             hopLimit: Number($("#sp-hops").value),
             fullBriefEveryTurns: Number($("#sp-brief-turns").value),
             fullBriefEveryTokens: Number($("#sp-brief-tokens").value),
+            briefTextLimit: Number($("#sp-text-limit").value),
             headerRules: $("#sp-header-rules").checked,
             tools: $("#sp-tools").value,
           },
@@ -3695,7 +3778,7 @@
       }
       els.invModelCustom.hidden = !info.modelAtLaunch;
       const who = info.agentInfo && info.agentInfo.name ? `${info.agentInfo.name} ${info.agentInfo.version || ""}`.trim() : recipe.vendor;
-      els.invStatus.textContent = parts.length ? `Options from ${who} (${parts.join(", ")}; ${(info.durationMs / 1000).toFixed(1)} s)` : `${who} exposes no config options over ACP${info.modelAtLaunch ? "; the model is a launch flag (built-in list, or type one)" : ""}.`;
+      els.invStatus.textContent = parts.length ? `Options from ${who} (${parts.join(", ")}; ${(info.durationMs / 1000).toFixed(1)} s)` : `${who} exposes no config options over ACP${info.modelAtLaunch ? "; the model is a launch flag (built-in list, or type one)" : ""}${info.modeAtLaunch ? "; the mode is a launch flag (a change restarts the session)" : ""}.`;
     } catch (error) {
       if (requestId !== optionsRequest) return;
       els.invStatus.textContent = `Could not read the vibemate's options (${error.message}); showing the built-in list.`;
@@ -4066,6 +4149,7 @@
       ${stpField("…or every N tokens", `${UI.html("number-field", { id: "stp-brief-tokens", value: String(st.fullBriefEveryTokens ?? 20000), min: 1000, max: 10000000, step: 1000 })}`)}
       ${stpField("Replay after a reconnect", `${UI.html("number-field", { id: "stp-replay", value: String(st.replayAfterRestart ?? 10), min: 0, max: 200 })}`)}
       ${stpField("Missed messages read at most", `${UI.html("number-field", { id: "stp-backlog", value: String(st.backlogCap ?? 50), min: 1, max: 1000 })}`)}
+      ${stpField("Most characters in a vibio or the rules", `${UI.html("number-field", { id: "stp-text-limit", value: String(st.briefTextLimit ?? 8000), min: 500, max: 32000, step: 500 })}`)}
       ${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>`;
@@ -4087,7 +4171,7 @@
       </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>Room rules</h5><textarea id="stp-rules" rows="5" 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">${UI.html("button", { label: "Browse", icon: "folder", kind: "ghost", hook: "browse-btn", data: { stpBrowse: true } })}</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>`;
   }
@@ -4112,7 +4196,8 @@
       backlogCap: num("#stp-backlog"),
       headerRules: $("#stp-header-rules").checked,
       showVendorInRoster: $("#stp-vendor").checked,
-      customRules: $("#stp-rules").value.slice(0, 4000),
+      customRules: $("#stp-rules").value,
+      briefTextLimit: num("#stp-text-limit"),
     };
     const vibemates = [...stpEls.preview.querySelectorAll(".stp-vm")].map((row) => {
       const v = {};
@@ -4199,7 +4284,7 @@
   els.pfDialog.addEventListener("cancel", (event) => event.preventDefault());
   function offerLook() {
     const current = (state.settings.appearance || {}).look || TOKENS.current.id;
-    $("#look-dialog-cards").innerHTML = Object.values(TOKENS.looks).map((l) => UI.html("look-card", { look: l, on: l.id === current, data: { look: l.id } })).join("");
+    $("#look-dialog-cards").innerHTML = Object.values(TOKENS.looks).map((l) => UI.html("look-card", { look: l, tag: lookTag(l), on: l.id === current, data: { look: l.id } })).join("");
     openDialog($("#look-dialog"));
   }
   $("#look-dialog-cards").addEventListener("click", async (e) => {
@@ -4274,10 +4359,47 @@
     for (const name of CUSTOM_VARS) el.style.removeProperty(name);
     for (const [name, value] of Object.entries(customVars(values || {}))) el.style.setProperty(name, value);
   }
+  function registerLooks(specs) {
+    for (const id of Object.keys(TOKENS.looks)) if (TOKENS.looks[id].custom) delete TOKENS.looks[id];
+    for (const spec of specs || []) {
+      try {
+        TOKENS.looks[spec.id] = TOKENS.make(spec);
+      } catch (error) {
+        console.warn(`look ${spec.id} could not be built: ${error.message}`);
+      }
+    }
+  }
+  function refreshLooksCss() {
+    const link = $("#looks-custom");
+    if (link) link.href = `/looks-custom.css?v=${Date.now()}`;
+  }
+  function lookTag(look) {
+    return look.custom ? `${(state.settings && state.settings.humanName) || "Your"}'s look` : undefined;
+  }
+  function tryLook(id) {
+    const root = document.documentElement;
+    if (root.dataset.tried === id || !TOKENS.looks[id]) {
+      applyAppearance();
+      return;
+    }
+    if (id === TOKENS.current.id) delete root.dataset.look;
+    else root.dataset.look = id;
+    applyCustomVars(root, (((state.settings || {}).appearance || {}).custom || {})[id] || {});
+    root.dataset.tried = id;
+    refreshTryButtons();
+  }
+  function refreshTryButtons() {
+    const tried = document.documentElement.dataset.tried || "";
+    document.querySelectorAll('[data-ui="ask-card"] [data-act="try-look"]').forEach((b) => {
+      const label = b.querySelector(".label") || b;
+      label.textContent = tried === b.dataset.look ? "Back" : "Try it on";
+    });
+  }
   let appliedScheme = null;
   function applyAppearance() {
     const a = (state.settings || {}).appearance || {};
     const root = document.documentElement;
+    delete root.dataset.tried;
     root.style.setProperty("--fs-scale", String((a.chatFontSize || 14.5) / 14.5));
     const look = TOKENS.looks[a.look] ? a.look : TOKENS.current.id;
     if (look === TOKENS.current.id) delete root.dataset.look;
@@ -4295,6 +4417,7 @@
     if (frame) frame.content = TOKENS.looks[look].elements.browser.themeColor;
     applyCustomVars(root, (a.custom || {})[look] || {});
     document.querySelectorAll("#participants .avatar .life").forEach((ring) => setLifePath(ring, ring.parentElement));
+    refreshTryButtons();
   }
 
   let hubIdentity = null;
@@ -4307,6 +4430,8 @@
     }
     if (identity) hubIdentity = identity;
     state.settings = snapshot.settings;
+    state.looks = snapshot.looks || [];
+    registerLooks(state.looks);
     applyAppearance();
     state.update = snapshot.update || null;
     renderUpdatePop();
@@ -4485,6 +4610,13 @@
       if (state.view === "skills" && !editingInDetails()) renderSkillsPage();
       if (state.detailsOpen && !editingInDetails()) renderDetails();
     },
+    looks: (m) => {
+      state.looks = m.looks || [];
+      registerLooks(state.looks);
+      refreshLooksCss();
+      applyAppearance();
+      if (state.view === "settings" && !editingInDetails()) renderSettingsPage();
+    },
     settings: (m) => {
       state.settings = m.settings;
       applyAppearance();