viberoom 0.5.2 → 0.5.4

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

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

package/ui/index.html

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

package/ui/theme.css

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

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

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