viberoom 0.5.9 → 0.6.1

package/ui/avatars.js

@@ -2,6 +2,8 @@
 (() => {
   "use strict";
 
+  const tokens = () => globalThis.VIBEROOM_TOKENS.current.elements.participant;
+
   function hash(text) {
     let h = 2166136261;
     for (const ch of String(text)) {
@@ -36,8 +38,8 @@
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${s} ${s}" width="${s}" height="${s}" role="img" aria-label="${escapeAttr(name)}">
   <defs><linearGradient id="${id}" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${c1}"/><stop offset="1" stop-color="${c2}"/></linearGradient></defs>
   <circle cx="${s / 2}" cy="${s / 2}" r="${s / 2}" fill="url(#${id})"/>
-  <circle cx="${s / 2}" cy="${s * 0.36}" r="${s * 0.34}" fill="#ffffff" opacity="0.10"/>
-  <text x="50%" y="53%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui, 'Segoe UI Emoji', sans-serif" font-size="${fontSize}" font-weight="700" fill="#ffffff">${escapeText(label)}</text>
+  <circle cx="${s / 2}" cy="${s * 0.36}" r="${s * 0.34}" fill="${tokens().avatarGloss}" opacity="0.10"/>
+  <text x="50%" y="53%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui, 'Segoe UI Emoji', sans-serif" font-size="${fontSize}" font-weight="700" fill="${tokens().avatarLabelInk}">${escapeText(label)}</text>
 </svg>`;
   }
 
@@ -50,13 +52,13 @@
 
   function avatarHtml(participant, size, options) {
     const opts = options || {};
-    const color = participant.color || "#5b5bf0";
+    const color = participant.color || tokens().avatarDefault;
     const s = size || 40;
     const emoji = participant.avatar;
     const label = emoji ? emoji : initials(participant.name);
     const fontSize = Math.round(emoji ? s * 0.56 : s * 0.38);
     const radius = Math.round(s * 0.32);
-    const svg = `<span class="av-tile" role="img" aria-label="${escapeAttr(participant.name)}" style="background:color-mix(in srgb, ${escapeAttr(color)} 16%, #ffffff);color:${escapeAttr(color)};font-size:${fontSize}px;border-radius:${radius}px">${escapeText(label)}</span>`;
+    const svg = `<span class="av-tile" role="img" aria-label="${escapeAttr(participant.name)}" style="background:color-mix(in srgb, ${escapeAttr(color)} 16%, ${tokens().avatarBlend});color:${escapeAttr(color)};font-size:${fontSize}px;border-radius:${radius}px">${escapeText(label)}</span>`;
     const status = opts.status ? `<span class="avatar-status status-${escapeAttr(participant.status || "idle")}"></span>` : "";
     let badge = "";
     if (opts.vendor && participant.kind === "agent") {

package/ui/components.css

@@ -0,0 +1,140 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+[data-ui="row-button"] { display: inline-grid; place-items: center; width: var(--row-button-size); height: var(--row-button-size); padding: 0; border: 0; border-radius: var(--row-button-radius); background: var(--row-button-bg); color: var(--row-button-ink); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast); }
+[data-ui="row-button"] .i { width: var(--row-button-icon); height: var(--row-button-icon); }
+[data-ui="row-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--row-button-hover-bg); color: var(--row-button-hover-ink); }
+[data-ui="row-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
+[data-ui="row-button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--row-button-disabled-opacity); cursor: default; }
+[data-ui="hub-row"] { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; max-width: 80%; padding: 2px 10px; border: 0; background: none; color: var(--hub-row-ink); font: inherit; font-size: var(--fs-xs); font-weight: 700; text-align: left; }
+[data-ui="hub-row"] .hush-face { font-size: var(--hub-row-face-size); line-height: 1; }
+[data-ui="hub-row"][data-tone="attention"], [data-ui="hub-row"][data-tone="hush"] { color: var(--hub-row-attention-ink); font-weight: 800; }
+[data-ui="hub-row"][data-tone="error"] { color: var(--hub-row-error-ink); font-weight: 800; }
+[data-ui="hub-row"][data-ref] { padding: 6px 14px 6px 8px; border-radius: var(--r-pill); background: var(--hub-row-action-bg); color: var(--hub-row-action-ink); font-size: var(--fs-sm); font-weight: 800; cursor: pointer; box-shadow: var(--edge); transition: background var(--t-fast); }
+[data-ui="hub-row"][data-ref]:is(:hover, [data-state="hover"]) { background: var(--hub-row-action-hover-bg); }
+[data-ui="button"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--btn-bg); color: var(--btn-ink); border-radius: var(--r-sm); height: var(--btn-h); padding: 0 16px; font-weight: 800; font-size: var(--btn-fs); line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
+[data-ui="button"] .i { width: 16px; height: 16px; }
+[data-ui="button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-hover-bg); color: var(--btn-hover-ink); }
+[data-ui="button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
+[data-ui="button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--btn-disabled-opacity); cursor: default; }
+[data-ui="button"][data-kind="primary"] { background: var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); }
+[data-ui="button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--grad-primary); color: var(--btn-on-primary); filter: brightness(1.05); transform: translateY(-1px); }
+[data-ui="button"][data-kind="primary"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
+[data-ui="button"][data-kind="secondary"] { background: var(--btn-secondary-bg); color: var(--btn-ink); box-shadow: var(--shadow-tile); }
+[data-ui="button"][data-kind="secondary"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-secondary-bg); color: var(--btn-hover-ink); }
+[data-ui="button"][data-kind="soft"] { background: var(--btn-soft-bg); color: var(--btn-hover-ink); }
+[data-ui="button"][data-kind="soft"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-soft-hover-bg); }
+[data-ui="button"][data-kind="ghost"] { background: transparent; color: var(--btn-ghost-ink); font-weight: 700; }
+[data-ui="button"][data-kind="ghost"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-ghost-hover-bg); color: var(--btn-hover-ink); }
+[data-ui="button"][data-kind="danger"] { background: var(--btn-danger-bg); color: var(--btn-danger-ink); }
+[data-ui="button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-hover-bg); color: var(--btn-danger-ink); }
+[data-ui="button"][data-kind="danger-solid"] { background: var(--btn-danger-ink); color: var(--btn-danger-solid-ink); box-shadow: var(--btn-danger-solid-shadow); }
+[data-ui="button"][data-kind="danger-solid"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-solid-hover-bg); color: var(--btn-danger-solid-ink); }
+[data-ui="button"][data-kind="dark"] { background: var(--btn-dark-bg); color: var(--btn-dark-ink); border-radius: 7px; }
+[data-ui="button"][data-kind="dark"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-dark-hover-bg); color: var(--btn-dark-ink); }
+[data-ui="button"][data-kind="warn"] { background: transparent; color: var(--btn-warn-ink); letter-spacing: 0.02em; border-radius: var(--r-pill); }
+[data-ui="button"][data-kind="warn"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-warn-hover-bg); color: var(--btn-warn-ink); }
+[data-ui="button"][data-kind="inverse"] { background: var(--btn-inverse-bg); color: var(--btn-inverse-ink); border-radius: 10px; }
+[data-ui="button"][data-kind="inverse"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-inverse-hover-bg); color: var(--btn-inverse-ink); }
+[data-ui="button"][data-kind="link"] { background: none; color: var(--btn-link-ink); height: auto; padding: 2px 0; border-radius: 0; }
+[data-ui="button"][data-kind="link"]:is(:hover, [data-state="hover"]):not(:disabled) { background: none; color: var(--btn-link-ink); text-decoration: underline; }
+[data-ui="button"][data-kind="ok"] { background: var(--btn-ok-bg); color: var(--btn-ok-ink); border-radius: 10px; }
+[data-ui="button"][data-kind="ok"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-ok-hover-bg); color: var(--btn-ok-ink); transform: translateY(-1px); }
+[data-ui="button"][data-kind="paper"] { background: var(--btn-paper-bg); color: var(--btn-paper-ink); border-radius: 10px; }
+[data-ui="button"][data-kind="paper"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-paper-hover-bg); color: var(--btn-paper-ink); transform: translateY(-1px); }
+[data-ui="button"][data-size="sm"] { height: var(--btn-h-sm); padding: 0 12px; font-size: var(--btn-fs-sm); border-radius: 10px; }
+[data-ui="button"][data-size="sm"] .i { width: 15px; height: 15px; }
+[data-ui="button"][data-size="xs"] { height: var(--btn-h-xs); padding: 0 9px; font-size: var(--fs-xs); border-radius: 7px; }
+[data-ui="button"][data-size="xs"] .i { width: 13px; height: 13px; }
+[data-ui="button"][data-size="lg"] { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--btn-fs-lg); border-radius: 14px; }
+[data-ui="button"][data-size="cta"] { height: var(--btn-h-cta); border-radius: var(--r-md); font-size: var(--btn-fs-cta); padding: 0 18px; }
+[data-ui="button"][data-full] { width: 100%; }
+[data-ui="button"][data-pill] { border-radius: var(--r-pill); }
+[data-ui="button"][data-state="loading"] { position: relative; color: transparent !important; pointer-events: none; }
+[data-ui="button"][data-state="loading"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--btn-spinner-track); border-top-color: var(--btn-spinner-head); animation: spin 0.8s linear infinite; }
+[data-ui="button"][data-state="loading"]:not([data-kind="primary"]):not([data-kind="danger-solid"])::after { border-color: var(--btn-spinner-track-quiet); border-top-color: var(--btn-spinner-head-quiet); }
+[data-ui="icon-button"] { width: var(--icon-button-size); height: var(--icon-button-size); border-radius: 12px; border: 0; background: transparent; color: var(--icon-button-ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
+[data-ui="icon-button"] .i { width: var(--icon-button-icon); height: var(--icon-button-icon); }
+[data-ui="icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--icon-button-hover-bg); color: var(--icon-button-hover-ink); }
+[data-ui="icon-button"]:is(:active, [data-state="active"]):not(:disabled) { transform: translateY(1px); }
+[data-ui="icon-button"]:is(:disabled, [data-state="disabled"]) { opacity: var(--icon-button-disabled-opacity); cursor: default; }
+[data-ui="icon-button"][data-size="sm"] { width: var(--icon-button-size-sm); height: var(--icon-button-size-sm); border-radius: 10px; }
+[data-ui="icon-button"][data-size="sm"] .i { width: var(--icon-button-icon-sm); height: var(--icon-button-icon-sm); }
+[data-ui="icon-button"][data-kind="primary"] { width: var(--icon-button-size-primary); height: var(--icon-button-size-primary); border-radius: 14px; background: var(--grad-primary); color: var(--btn-on-primary); box-shadow: var(--shadow-primary); }
+[data-ui="icon-button"][data-kind="primary"]:is(:hover, [data-state="hover"]):not(:disabled) { color: var(--btn-on-primary); background: var(--grad-primary); filter: brightness(1.05); }
+[data-ui="icon-button"][data-kind="danger"] { color: var(--btn-danger-ink); }
+[data-ui="icon-button"][data-kind="danger"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--btn-danger-bg); color: var(--btn-danger-ink); }
+[data-ui="icon-button"][data-size="xs"] { width: var(--icon-button-size-xs); height: var(--icon-button-size-xs); border-radius: 6px; }
+[data-ui="icon-button"][data-size="xs"] .i { width: var(--icon-button-icon-xs); height: var(--icon-button-icon-xs); }
+[data-ui="icon-button"][data-kind="ghost"] { background: transparent; color: var(--icon-button-ghost-ink); }
+[data-ui="icon-button"][data-kind="inline"] { background: var(--icon-button-inline-bg); color: var(--icon-button-inline-ink); vertical-align: middle; position: relative; top: -1px; margin-left: 5px; }
+[data-ui="icon-button"][data-kind="inline"]:is(:hover, [data-state="hover"]):not(:disabled) { background: var(--icon-button-hover-bg-strong); color: var(--btn-on-primary); }
+[data-ui="icon-button"][data-kind="inline"][data-state="on"] { background: var(--icon-button-inline-on-bg); color: var(--icon-button-inline-on-ink); }
+[data-ui="choice"] { display: inline-flex; align-items: center; gap: 6px; border: 2px solid transparent; background: var(--choice-bg); color: var(--choice-ink); border-radius: var(--r-pill); padding: 0 12px; height: var(--choice-h); font: inherit; font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
+[data-ui="choice"]:is(:hover, [data-state="hover"]) { background: var(--choice-hover-bg); color: var(--choice-on-ink); }
+[data-ui="choice"][data-state="on"] { background: var(--choice-hover-bg); color: var(--choice-on-ink); border-color: var(--choice-on-border); }
+[data-ui="choice"][data-quiet] { color: var(--choice-quiet-ink); font-weight: 700; }
+[data-ui="badge"] { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); background: var(--badge-bg); color: var(--badge-ink); font-weight: 800; white-space: nowrap; vertical-align: middle; }
+[data-ui="badge"] .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+[data-ui="badge"][data-tone="ready"] { background: var(--st-ready); color: var(--st-ready-ink); }
+[data-ui="badge"][data-tone="waiting"] { background: var(--st-waiting); color: var(--st-waiting-ink); }
+[data-ui="badge"][data-tone="thinking"] { background: var(--st-thinking); color: var(--st-thinking-ink); }
+[data-ui="badge"][data-tone="writing"] { background: var(--st-writing); color: var(--st-writing-ink); }
+[data-ui="badge"][data-tone="error"] { background: var(--st-error); color: var(--st-error-ink); }
+[data-ui="badge"][data-tone="asleep"] { background: var(--st-asleep); color: var(--st-asleep-ink); }
+[data-ui="badge"][data-tone="attention"] { background: var(--badge-attention-bg); color: var(--badge-attention-ink); }
+[data-ui="badge"][data-tone="muted"] { background: var(--badge-muted-bg); color: var(--badge-muted-ink); }
+[data-ui="badge"][data-tone="outline"] { background: transparent; border: 2px solid var(--badge-outline-border); color: var(--badge-outline-ink); }
+[data-ui="badge"]:is([data-tone="thinking"], [data-tone="writing"]) .dot { animation: pulse 1.2s ease-in-out infinite; }
+[data-ui="badge"][data-size="xs"] { font-size: var(--badge-fs-xs); padding: 1px 7px; }
+[data-ui="chip"] { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--fs-xs); font-weight: 800; background: var(--chip-bg); color: var(--chip-ink); border: 0; border-radius: var(--r-pill); padding: 4px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; text-align: left; }
+[data-ui="chip"] .i { width: 13px; height: 13px; flex: none; }
+[data-ui="chip"][data-tone="ready"] { background: var(--st-ready); color: var(--st-ready-ink); }
+[data-ui="chip"][data-tone="error"] { background: var(--st-error); color: var(--st-error-ink); }
+[data-ui="chip"][data-tone="thinking"] { background: var(--st-thinking); color: var(--st-thinking-ink); }
+[data-ui="chip"][data-tone="waiting"] { background: var(--st-waiting); color: var(--st-waiting-ink); }
+[data-ui="chip"][data-button] { cursor: pointer; transition: background var(--t-fast); }
+[data-ui="chip"][data-button]:not([data-tone]):is(:hover, [data-state="hover"]) { background: var(--chip-hover-bg); }
+[data-ui="file-card"] { border-radius: 12px; overflow: hidden; background: var(--file-card-bg); box-shadow: var(--edge); }
+[data-ui="file-card"] > .head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--file-card-head-bg); color: var(--file-card-head-ink); font-size: var(--fs-xs); font-weight: 800; }
+[data-ui="file-card"] > .head .name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-ui="file-card"] > .head .name .i { width: 13px; height: 13px; flex: none; }
+[data-ui="file-card"] > .head .lines { color: var(--file-card-head-meta); font-weight: 700; }
+[data-ui="file-card"] > .head [data-ui="button"] { margin-left: auto; }
+[data-ui="file-card"] > .body { background: transparent; color: var(--file-card-ink); }
+[data-ui="file-card"] > .body .code-view { border-radius: 0; max-height: 320px; }
+[data-ui="file-card"] > .body .note { margin: 8px 10px; color: var(--file-card-note-ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; }
+[data-ui="file-card"][data-kind="image"] > .body { padding: 8px 10px 10px; background: var(--file-card-image-body-bg); }
+[data-ui="file-card"][data-kind="image"] > .body img { display: block; margin: 0 auto; max-width: 100%; max-height: 420px; border-radius: 8px; cursor: zoom-in; background: var(--file-card-image-bg); }
+[data-ui="tool-call"] { display: inline-flex; flex-direction: column; max-width: 100%; min-width: 0; }
+[data-ui="tool-call"] > [data-ui="chip"]::after { content: "▾"; margin-left: auto; padding-left: 8px; opacity: 0.55; transition: transform var(--t-fast); }
+[data-ui="tool-call"][data-state="open"] { flex-basis: 100%; }
+[data-ui="tool-call"][data-state="open"] > [data-ui="chip"] { width: 100%; border-radius: 12px 12px 0 0; padding: 6px 12px; white-space: normal; }
+[data-ui="tool-call"][data-state="open"] > [data-ui="chip"]::after { transform: rotate(180deg); }
+[data-ui="tool-call"] > .body { margin: 0; padding: 8px 10px 10px; background: var(--tool-call-body-bg); border: 2px solid var(--tool-call-pending-bg); border-top: 0; border-radius: 0 0 12px 12px; font-size: var(--tool-call-fs); max-height: 340px; overflow: auto; }
+[data-ui="tool-call"][data-status="completed"] > .body { border-color: var(--tool-call-ready-bg); }
+[data-ui="tool-call"][data-status="failed"] > .body { border-color: var(--tool-call-error-bg); }
+[data-ui="tool-call"][data-status="in_progress"] > .body { border-color: var(--tool-call-thinking-bg); }
+[data-ui="tool-call"] .sec + .sec { margin-top: 8px; }
+[data-ui="tool-call"] .sec b { display: block; font-size: var(--tool-call-label-fs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tool-call-pending-ink); }
+[data-ui="tool-call"][data-status="completed"] .sec b { color: var(--tool-call-ready-ink); }
+[data-ui="tool-call"][data-status="failed"] .sec b { color: var(--tool-call-error-ink); }
+[data-ui="tool-call"][data-status="in_progress"] .sec b { color: var(--tool-call-thinking-ink); }
+[data-ui="tool-call"] .sec.quiet { color: var(--tool-call-quiet-ink); font-style: italic; }
+[data-ui="tool-call"] .sec pre { margin: 3px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--tool-call-pre-bg); color: var(--tool-call-pre-ink); white-space: pre-wrap; word-break: break-word; font-size: var(--tool-call-pre-fs); line-height: 1.45; }
+[data-ui="tool-fold"] { flex-basis: 100%; min-width: 0; }
+[data-ui="tool-fold"] > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: var(--tool-fold-fs); font-weight: 800; color: var(--tool-fold-ink); background: var(--tool-fold-bg); border-radius: var(--r-pill); padding: 4px 12px; transition: background var(--t-fast), color var(--t-fast); }
+[data-ui="tool-fold"] > summary::-webkit-details-marker { display: none; }
+[data-ui="tool-fold"] > summary:hover, [data-ui="tool-fold"][data-state="hover"] > summary { background: var(--tool-fold-hover-bg); color: var(--tool-fold-hover-ink); }
+[data-ui="tool-fold"] > summary .i { width: 13px; height: 13px; }
+[data-ui="tool-fold"] > summary::after { content: "▾"; opacity: 0.55; transition: transform var(--t-fast); }
+[data-ui="tool-fold"][open] > summary::after { transform: rotate(180deg); }
+[data-ui="tool-fold"] > summary .failed { color: var(--tool-fold-failed-ink); }
+[data-ui="tool-fold"] > .list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+[data-ui="ask-card"] { background: var(--ask-card-bg); color: var(--ask-card-ink); border-radius: 12px; padding: 10px 12px; font-size: var(--ask-card-fs); font-weight: 600; }
+[data-ui="ask-card"][data-state="resolved"] { opacity: var(--ask-card-resolved-opacity); }
+[data-ui="ask-card"] > .title .kind { font-size: var(--ask-card-kind-fs); color: var(--ask-card-quiet-ink); }
+[data-ui="ask-card"] > .input { margin: 6px 0; max-height: 160px; overflow: auto; font-size: var(--ask-card-input-fs); }
+[data-ui="ask-card"] > .choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
+[data-ui="ask-card"] > .choices .outcome { color: var(--ask-card-quiet-ink); font-size: var(--ask-card-outcome-fs); }
+[data-ui="reply-note"] { display: flex; align-items: flex-start; gap: 6px; font-size: var(--reply-note-fs); font-weight: 700; color: var(--reply-note-ink); background: var(--reply-note-bg); border-radius: 10px; padding: 5px 10px; }
+[data-ui="reply-note"] .i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
+[data-ui="reply-note"][data-tone="attention"] { color: var(--reply-note-attention-ink); background: var(--reply-note-attention-bg); }

package/ui/components.js

@@ -0,0 +1,342 @@
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+(() => {
+  "use strict";
+  const UI = globalThis.UI;
+
+  UI.define("row-button", {
+    describe: "A small action on a vibemate's row: open its panel, go to its last reply, wake it up. The row reveals the buttons on hover; all three wear one pill.",
+    props: {
+      icon: { type: "icon", required: true },
+      title: { type: "string", required: true, note: "what it does, in words: the tooltip and the accessible name" },
+      act: { type: "string", required: true, note: "the action app.js answers: panel | last-reply | wake" },
+      disabled: { type: "boolean", default: false },
+    },
+    build: ({ icon, title, act, disabled }, ui) => ui.h("button", { type: "button", "data-act": act, title, "aria-label": title, disabled }, ui.icon(icon)),
+    states: ["rest", "hover", "active", "disabled"],
+    samples: [
+      { label: "the panel", props: { icon: "settings", title: "Open the panel", act: "panel" } },
+      { label: "its last reply", props: { icon: "last-reply", title: "Go to the last reply", act: "last-reply" } },
+      { label: "wake it up", props: { icon: "refresh", title: "Wake it up: reconnect it to the room", act: "wake" } },
+    ],
+  });
+
+  UI.define("hub-row", {
+    describe: "A line the hub writes into the room (U114): news in muted words; a tone colours it (attention, error, hush); the one row that leads somewhere carries a ref and is a button with a backing, the only row that ever wears one.",
+    props: {
+      text: { type: "string", required: true },
+      tone: { type: "enum", values: ["news", "attention", "error", "hush"], default: "news", note: "what kind of news the hub says it is" },
+      ref: { type: "string", note: "the id of the message the row leads to; with it the row is a button" },
+      face: { type: "node", note: "markup of a face before the words (ui.raw): the vibemate's, or the shushing one" },
+      title: { type: "string", note: "the tooltip: when, and where a click goes" },
+    },
+    build: ({ text, tone, ref, face, title }, ui) =>
+      ref
+        ? ui.h("button", { type: "button", "data-tone": tone, "data-ref": ref, title }, face, ui.h("span", {}, text))
+        : ui.h("div", { "data-tone": tone, title }, face, ui.h("span", {}, text)),
+    states: ["rest", "hover"],
+    samples: [
+      { label: "news", props: { text: "Maken is back in the room (session restored)." } },
+      { label: "attention", props: { text: "Maken is at 84% of its context; it will leave notes with its next reply.", tone: "attention" } },
+      { label: "error", props: { text: "Maken could not answer: no result", tone: "error" } },
+      { label: "hush", props: { text: "Hush: everyone waits until you write again.", tone: "hush", face: UI.raw('<span class="hush-face">🤫</span>') } },
+      { label: "leads to a reply", props: { text: "Maken finished the reply started at 16:21 · 2m 30s", ref: "sample", title: "go to the reply", face: UI.raw('<span class="avatar" style="width:20px;height:20px"><span class="av-tile" role="img" aria-label="Maken" style="font-size:11px;border-radius:6px">🔨</span></span>') } },
+    ],
+  });
+
+  const BUTTON_KINDS = ["plain", "primary", "secondary", "soft", "ghost", "danger", "danger-solid", "dark", "warn", "inverse", "link", "ok", "paper"];
+  const BUTTON_SIZES = ["md", "sm", "xs", "lg", "cta"];
+  UI.define("button", {
+    describe: "A button with words on it: the one type behind every Cancel, Summon, Save and Erase. Its kind says how loud it is and where it can sit (primary is the one thing to do; ghost is the way out; danger warns; danger-solid is the point of no return; dark sits on a code card; warn is a quiet amber word such as Stop; inverse sits on the accent; link is a word that acts), its size where it stands.",
+    props: {
+      label: { type: "string", required: true, note: "the words on it (wrapped in .label, so the page may change them)" },
+      icon: { type: "icon", note: "a glyph before the words" },
+      lead: { type: "node", note: "markup before the words that is not a glyph (a face), as ui.raw" },
+      trail: { type: "node", note: "markup after the words (a hint), as ui.raw" },
+      kind: { type: "enum", values: BUTTON_KINDS, default: "plain" },
+      size: { type: "enum", values: BUTTON_SIZES, default: "md" },
+      full: { type: "boolean", default: false, note: "as wide as its row" },
+      pill: { type: "boolean", default: false },
+      type: { type: "enum", values: ["button", "submit"], default: "button" },
+      id: { type: "string" },
+      act: { type: "string", note: "the action a delegated handler answers (data-act)" },
+      value: { type: "string", note: "what a dialog form returns when this button submits it" },
+      title: { type: "string" },
+      disabled: { type: "boolean", default: false },
+      hidden: { type: "boolean", default: false },
+      autofocus: { type: "boolean", default: false },
+      hook: { type: "string", note: "classes the page composes with (where it sits, its page states); no look of its own" },
+      data: { type: "object", note: "data-* marks for the page's own handlers: { close: true, approveSkill: name }" },
+    },
+    build: ({ label, icon, lead, trail, kind, size, full, pill, type, id, act, value, title, disabled, hidden, autofocus, hook, data }, ui) =>
+      ui.h(
+        "button",
+        {
+          type,
+          "data-kind": kind === "plain" ? null : kind,
+          "data-size": size === "md" ? null : size,
+          "data-full": full || null,
+          "data-pill": pill || null,
+          "data-act": act,
+          id,
+          value,
+          title,
+          disabled,
+          hidden,
+          autofocus,
+          class: hook || null,
+          ...ui.dataAttrs(data),
+        },
+        icon ? ui.icon(icon) : null,
+        lead || null,
+        ui.h("span", { class: "label" }, label),
+        trail || null,
+      ),
+    states: ["rest", "hover", "active", "disabled", "loading"],
+    samples: [
+      { label: "plain", props: { label: "Check now" } },
+      { label: "primary", props: { label: "Summon", kind: "primary" } },
+      { label: "secondary", props: { label: "Later", kind: "secondary" } },
+      { label: "soft", props: { label: "Browse", kind: "soft", icon: "folder" } },
+      { label: "ghost", props: { label: "Cancel", kind: "ghost" } },
+      { label: "danger", props: { label: "Respawn", kind: "danger", icon: "bolt", size: "sm" } },
+      { label: "danger-solid", props: { label: "Erase everything", kind: "danger-solid" } },
+      { label: "small", props: { label: "Save", kind: "primary", size: "sm" } },
+      { label: "large", props: { label: "Start vibing", kind: "primary", size: "lg" } },
+      { label: "call to action", props: { label: "Summon a Vibemate", kind: "primary", size: "cta", icon: "spark" } },
+      { label: "on a code card", props: { label: "open", kind: "dark", size: "xs" } },
+      { label: "a quiet warning", props: { label: "Stop", kind: "warn", size: "xs" } },
+      { label: "on the accent", props: { label: "Stop Ana and send now", kind: "inverse", size: "sm" } },
+      { label: "a word that acts", props: { label: "Show more", kind: "link" } },
+      { label: "yes, on a card", props: { label: "Allow", kind: "ok", size: "sm" } },
+      { label: "plain, on a card", props: { label: "Dismiss", kind: "paper", size: "sm" } },
+    ],
+  });
+
+  UI.define("icon-button", {
+    describe: "A button that is only a glyph: close, settings, back, fold. Its title is its whole meaning, so it is required and doubles as the accessible name.",
+    props: {
+      icon: { type: "icon", required: true },
+      title: { type: "string", required: true, note: "what it does, in words: the tooltip and the accessible name" },
+      kind: { type: "enum", values: ["plain", "ghost", "primary", "danger", "inline"], default: "plain", note: "inline: a glyph in running text (the preview eye), with an on state" },
+      size: { type: "enum", values: ["md", "sm", "xs"], default: "md" },
+      id: { type: "string" },
+      act: { type: "string" },
+      disabled: { type: "boolean", default: false },
+      hidden: { type: "boolean", default: false },
+      hook: { type: "string", note: "classes the page composes with; no look of its own" },
+      data: { type: "object" },
+    },
+    build: ({ icon, title, kind, size, id, act, disabled, hidden, hook, data }, ui) =>
+      ui.h("button", { type: "button", "data-kind": kind === "plain" ? null : kind, "data-size": size === "md" ? null : size, "data-act": act, id, title, "aria-label": title, disabled, hidden, class: hook || null, ...ui.dataAttrs(data) }, ui.icon(icon)),
+    states: ["rest", "hover", "active", "disabled", "on"],
+    samples: [
+      { label: "plain", props: { icon: "settings", title: "Room settings" } },
+      { label: "ghost, small", props: { icon: "close", title: "Close", kind: "ghost", size: "sm" } },
+      { label: "ghost, tiny (a bubble's head)", props: { icon: "pin", title: "Pin this message", kind: "ghost", size: "xs" } },
+      { label: "primary", props: { icon: "send", title: "Send", kind: "primary" } },
+      { label: "danger", props: { icon: "trash", title: "Remove", kind: "danger" } },
+      { label: "inline (the preview eye)", props: { icon: "eye", title: "Preview", kind: "inline", size: "xs" } },
+    ],
+  });
+
+  UI.define("choice", {
+    describe: "One option of a few, as a pill: the chosen one is lit (on). What choosing does is the page's: a data mark says which option this is.",
+    props: {
+      label: { type: "string", required: true },
+      lead: { type: "node", note: "markup before the words (a colour swatch), as ui.raw" },
+      trail: { type: "node", note: "markup after the words (a hint), as ui.raw" },
+      on: { type: "boolean", default: false, note: "the chosen one" },
+      quiet: { type: "boolean", default: false, note: "the option that means none" },
+      act: { type: "string" },
+      id: { type: "string" },
+      title: { type: "string" },
+      hook: { type: "string" },
+      data: { type: "object", note: "which option this is: { mode: 'auto' }, { preset: 'pop' }" },
+    },
+    build: ({ label, lead, trail, on, quiet, act, id, title, hook, data }, ui) =>
+      ui.h("button", { type: "button", "data-state": on ? "on" : null, "data-quiet": quiet || null, "data-act": act, id, title, "aria-pressed": on ? "true" : "false", class: hook || null, ...ui.dataAttrs(data) }, lead || null, ui.h("span", { class: "label" }, label), trail || null),
+    states: ["rest", "hover", "on"],
+    samples: [
+      { label: "an option", props: { label: "The default app" } },
+      { label: "the chosen one", props: { label: "Auto", on: true } },
+      { label: "none", props: { label: "No preset", quiet: true } },
+    ],
+  });
+
+  UI.define("badge", {
+    describe: "A small label that states a fact: a vibemate's state, its vendor, a mark on a skill or a template. Its tone is the room's state family (ready, waiting, thinking, writing, error, asleep) or a quiet look (plain, muted, outline) or attention; it never does anything by itself.",
+    props: {
+      label: { type: "string", required: true },
+      tone: { type: "enum", values: ["plain", "ready", "waiting", "thinking", "writing", "error", "asleep", "attention", "muted", "outline"], default: "plain" },
+      dot: { type: "boolean", default: false, note: "a dot before the words; it pulses while thinking or writing" },
+      size: { type: "enum", values: ["md", "xs"], default: "md" },
+      title: { type: "string" },
+      hook: { type: "string" },
+    },
+    build: ({ label, tone, dot, size, title, hook }, ui) => ui.h("span", { "data-tone": tone === "plain" ? null : tone, "data-size": size === "md" ? null : size, title, class: hook || null }, dot ? ui.h("span", { class: "dot" }) : null, label),
+    states: ["rest"],
+    samples: [
+      { label: "plain", props: { label: "vibemate" } },
+      { label: "ready", props: { label: "ready", tone: "ready", dot: true } },
+      { label: "waiting", props: { label: "waiting…", tone: "waiting" } },
+      { label: "thinking", props: { label: "thinking…", tone: "thinking", dot: true } },
+      { label: "writing", props: { label: "writing…", tone: "writing", dot: true } },
+      { label: "error", props: { label: "error", tone: "error" } },
+      { label: "asleep", props: { label: "offline", tone: "asleep" } },
+      { label: "attention", props: { label: "summon", tone: "attention" } },
+      { label: "muted", props: { label: "muted", tone: "muted" } },
+      { label: "outline", props: { label: "built-in", tone: "outline" } },
+      { label: "tiny", props: { label: "recommended", tone: "attention", size: "xs" } },
+    ],
+  });
+
+  UI.define("chip", {
+    describe: "A small tag that names a thing: the room's folder, a tool call, a template's run. As a button it opens or unfolds what it names; its tone follows the state of the thing (a tool call that completed, failed, is still running).",
+    props: {
+      label: { type: "string", required: true },
+      icon: { type: "icon" },
+      tone: { type: "enum", values: ["plain", "ready", "error", "thinking", "waiting"], default: "plain" },
+      button: { type: "boolean", default: false, note: "a chip that does something when clicked" },
+      act: { type: "string" },
+      id: { type: "string" },
+      title: { type: "string" },
+      hidden: { type: "boolean", default: false },
+      hook: { type: "string" },
+      data: { type: "object" },
+    },
+    build: ({ label, icon, tone, button, act, id, title, hidden, hook, data }, ui) =>
+      ui.h(button ? "button" : "span", { ...(button ? { type: "button" } : {}), "data-tone": tone === "plain" ? null : tone, "data-button": button || null, "data-act": act, id, title, hidden, class: hook || null, ...ui.dataAttrs(data) }, icon ? ui.icon(icon) : null, label),
+    states: ["rest", "hover"],
+    samples: [
+      { label: "a name", props: { label: "src", icon: "folder" } },
+      { label: "a button", props: { label: "3 pinned", icon: "pin", button: true } },
+      { label: "a tool call, done", props: { label: "Read file · completed", icon: "tool", tone: "ready", button: true } },
+      { label: "a tool call, failed", props: { label: "Bash · failed", icon: "tool", tone: "error", button: true } },
+      { label: "a tool call, running", props: { label: "Grep · in_progress", icon: "tool", tone: "thinking", button: true } },
+    ],
+  });
+
+  UI.define("file-card", {
+    describe: "A fragment of a file, or a picture, under the message that names it: a dark card whose head says the file's name and the lines shown and offers to open the whole file; its body is the code or the drawing. What could not be shown says why in the body instead.",
+    props: {
+      name: { type: "string", required: true },
+      lines: { type: "string", note: "what part is shown, in words: 'lines 120–160', or a picture's size once it loaded" },
+      kind: { type: "enum", values: ["code", "image"], default: "code" },
+      body: { type: "html", note: "the code view or the picture: markup the caller vouches for" },
+      error: { type: "string", note: "why the file could not be shown; takes the body's place" },
+      act: { type: "string", default: "open-file", note: "the head button's act" },
+      openTitle: { type: "string", default: "Open the whole file in the room" },
+      hook: { type: "string" },
+      data: { type: "object" },
+    },
+    build: ({ name, lines, kind, body, error, act, openTitle, hook, data }, ui) =>
+      ui.h("div", { "data-kind": kind === "code" ? null : kind, class: hook || null, ...ui.dataAttrs(data) },
+        ui.h("div", { class: "head" }, ui.h("span", { class: "name" }, ui.icon("link"), name), ui.h("span", { class: "lines" }, lines || ""), ui.build("button", { label: "open", kind: "dark", size: "xs", act, title: openTitle })),
+        ui.h("div", { class: "body" }, error ? ui.h("div", { class: "note" }, error) : body ? ui.raw(body) : null)),
+    states: ["rest"],
+    samples: [
+      { label: "a fragment", props: { name: "room.ts", lines: "lines 120–124", body: "<pre style=\"margin:0;padding:10px 12px\">120  const key = randomUUID();\n121  const entry = { key, ts: Date.now() };\n122  this.pending.set(key, entry);\n123  this.push({ type: \"permission\", key });\n124  return entry;</pre>" } },
+      { label: "a picture", props: { name: "mockup.png", lines: "640×400", kind: "image", openTitle: "Open it big", body: "<div style=\"width:200px;height:90px;border-radius:8px;background:var(--lav)\"></div>" } },
+      { label: "could not be shown", props: { name: "gone.ts", error: "gone.ts could not be shown here: no such file." } },
+    ],
+  });
+
+  const TOOL_TONE = { completed: "ready", failed: "error", in_progress: "thinking" };
+  UI.define("tool-call", {
+    describe: "A tool call in a reply: a chip with the tool's title, its kind and its status. Open, the chip is the head of a card that shows the call, its input and its output, bordered in the colour of its status.",
+    props: {
+      id: { type: "string", required: true, note: "the call's id; the chip carries it as data-tool for the page's handler" },
+      title: { type: "string", required: true },
+      kind: { type: "string" },
+      status: { type: "enum", values: ["pending", "in_progress", "completed", "failed"], default: "pending" },
+      open: { type: "boolean", default: false, note: "open, the card shows the call; the body is built only then" },
+      input: { type: "string", note: "shown up to 4000 characters" },
+      output: { type: "string" },
+    },
+    build: ({ id, title, kind, status, open, input, output }, ui) =>
+      ui.h("div", { "data-status": status, "data-state": open ? "open" : null },
+        ui.build("chip", { label: `${title}${kind ? ` · ${kind}` : ""} · ${status}`, icon: "tool", tone: TOOL_TONE[status] || "plain", button: true, title: open ? "Collapse" : "Expand", data: { tool: id } }),
+        open
+          ? ui.h("div", { class: "body" },
+              ui.h("div", { class: "sec" }, ui.h("b", null, "call"), ui.h("pre", null, title)),
+              input ? ui.h("div", { class: "sec" }, ui.h("b", null, "input"), ui.h("pre", null, input.slice(0, 4000))) : null,
+              output ? ui.h("div", { class: "sec" }, ui.h("b", null, "output"), ui.h("pre", null, output)) : ui.h("div", { class: "sec quiet" }, "no output recorded"))
+          : null),
+    states: ["rest"],
+    samples: [
+      { label: "done", props: { id: "t1", title: "Read file", kind: "read", status: "completed" } },
+      { label: "failed", props: { id: "t2", title: "Bash", kind: "execute", status: "failed" } },
+      { label: "running", props: { id: "t3", title: "Grep", kind: "search", status: "in_progress" } },
+      { label: "pending", props: { id: "t4", title: "Edit", kind: "edit" } },
+      { label: "open", props: { id: "t5", title: "Read file", kind: "read", status: "completed", open: true, input: "{ \"path\": \"src/room.ts\" }", output: "export class Room { … }" } },
+    ],
+  });
+
+  UI.define("tool-fold", {
+    describe: "The tool calls of a finished reply, folded into one line: how many there were and how many failed. It opens to the calls, which the page puts in its list; the page remembers it open per message.",
+    props: {
+      count: { type: "number", required: true },
+      failed: { type: "number", default: 0 },
+      open: { type: "boolean", default: false },
+    },
+    build: ({ count, failed, open }, ui) =>
+      ui.h("details", { open: !!open },
+        ui.h("summary", { title: open ? "Fold the tool calls away" : "Show every tool call" }, ui.icon("tool"), ui.h("span", null, `${count} tool call${count === 1 ? "" : "s"}`), failed ? ui.h("span", { class: "failed" }, `· ${failed} failed`) : null),
+        ui.h("div", { class: "list" })),
+    states: ["rest", "hover"],
+    samples: [
+      { label: "one call", props: { count: 1 } },
+      { label: "eight, one failed", props: { count: 8, failed: 1 } },
+      { label: "open", props: { count: 3, open: true } },
+    ],
+  });
+
+  const CHOICE_KIND = { ok: "ok", no: "danger" };
+  UI.define("ask-card", {
+    describe: "A card the room puts in front of you for a decision: a permission a vibemate asks for, a proposal it makes. It says who asks and what, shows the details, and offers the choices as buttons; decided, it dims and keeps the outcome in the choices' place.",
+    props: {
+      kind: { type: "enum", values: ["permission", "proposal"], required: true },
+      who: { type: "string", required: true, note: "who asks, by name" },
+      lead: { type: "string", note: "what is asked, in words after the name; the default fits the kind" },
+      subject: { type: "string", note: "what the ask is about, in bold: the tool call's title" },
+      subjectKind: { type: "string", note: "a small word after the subject: the tool call's kind" },
+      input: { type: "string", note: "the tool call's input, as text; shown up to 1200 characters" },
+      body: { type: "html", note: "the details: a proposal's reason, its diff, its warnings; markup the caller vouches for" },
+      choices: { type: "array", note: "[{ label, tone: ok | no | plain, act, data }]: a button each, answering with its act and data" },
+      outcome: { type: "string", note: "what was decided; given, the card is resolved and shows this instead of its choices" },
+      data: { type: "object" },
+    },
+    build: ({ kind, who, lead, subject, subjectKind, input, body, choices, outcome, data }, ui) =>
+      ui.h("div", { "data-kind": kind, "data-state": outcome ? "resolved" : null, ...ui.dataAttrs(data) },
+        ui.h("div", { class: "title" }, ui.icon(kind === "permission" ? "lock" : "pencil"), " ", who, " ", lead || (kind === "permission" ? "asks for permission:" : "proposes changes to the room"), subject ? [" ", ui.h("strong", null, subject)] : null, subjectKind ? [" ", ui.h("span", { class: "kind" }, subjectKind)] : null),
+        input ? ui.h("pre", { class: "input" }, input.slice(0, 1200)) : null,
+        body ? ui.raw(body) : null,
+        ui.h("div", { class: "choices" },
+          outcome
+            ? ui.h("span", { class: "outcome" }, outcome)
+            : (choices || []).map((c) => ui.build("button", { label: c.label, kind: CHOICE_KIND[c.tone] || "paper", size: "sm", act: c.act, title: c.title, data: c.data })))),
+    states: ["rest"],
+    samples: [
+      { label: "a permission", props: { kind: "permission", who: "Maken", subject: "Bash", subjectKind: "execute", input: "{ \"command\": \"npm test\" }", choices: [{ label: "Allow", tone: "ok", act: "permit", data: { option: "allow" } }, { label: "Deny", tone: "no", act: "permit", data: { option: "deny" } }, { label: "Dismiss (cancelled)", act: "permit" }] } },
+      { label: "a proposal", props: { kind: "proposal", who: "Ana", body: "<div class=\"why\">The room keeps forgetting the deploy steps.</div>", choices: [{ label: "Apply", tone: "ok", act: "decide", data: { answer: "apply" } }, { label: "Reject", tone: "no", act: "decide", data: { answer: "reject" } }] } },
+      { label: "decided", props: { kind: "permission", who: "Maken", subject: "Bash", outcome: "chosen: allow" } },
+    ],
+  });
+
+  UI.define("reply-note", {
+    describe: "A line the hub attaches to a reply, inside its bubble: an adapter's notice before the words, or the fact that the reply was stopped, right after them. The words stay; the note says what happened to them.",
+    props: {
+      text: { type: "string", required: true },
+      tone: { type: "enum", values: ["info", "attention"], default: "info", note: "info: a quiet fact; attention: something that changed the reply" },
+      icon: { type: "icon", default: "info" },
+      hook: { type: "string" },
+    },
+    build: ({ text, tone, icon, hook }, ui) => ui.h("div", { "data-tone": tone === "info" ? null : tone, class: hook || null }, ui.icon(icon), ui.h("span", null, text)),
+    states: ["rest"],
+    samples: [
+      { label: "a quiet fact", props: { text: "This reply was written in plan mode." } },
+      { label: "an adapter's notice", props: { text: "Auto mode is unavailable for this account; running in the default mode.", tone: "attention" } },
+      { label: "stopped", props: { text: "Stopped by Sam", tone: "attention", icon: "stop" } },
+    ],
+  });
+})();

package/ui/icons.js

@@ -32,6 +32,11 @@
     trash: `<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>`,
     pencil: `<path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>`,
     pin: `<path d="M9 4h6l-.8 6.5L17 13v2H7v-2l2.8-2.5L9 4z"/><path d="M12 15v6"/>`,
+    quote: `<path d="M9 6.5C6.5 7.8 5 10 5 12.6V17h5v-5H7.4c.2-1.4 1-2.5 2.4-3.2zM19 6.5c-2.5 1.3-4 3.5-4 6.1V17h5v-5h-2.6c.2-1.4 1-2.5 2.4-3.2z"/>`,
+    maximize: `<path d="M15 3h6v6M21 3l-7 7M9 21H3v-6M3 21l7-7"/>`,
+    minimize: `<path d="M20 4l-6 6M14 4v6h6M4 20l6-6M10 20v-6H4"/>`,
+    "zoom-in": `<circle cx="11" cy="11" r="6"/><path d="M11 8.5v5M8.5 11h5M20 20l-4.3-4.3"/>`,
+    "zoom-out": `<circle cx="11" cy="11" r="6"/><path d="M8.5 11h5M20 20l-4.3-4.3"/>`,
     send: `<path d="M4 12l16-8-6 16-2.5-6.5L4 12z"/>`,
     folder: `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>`,
     spark: `<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/><path d="M19 15l.6 1.6 1.6.6-1.6.6L19 19.4l-.6-1.6-1.6-.6 1.6-.6z"/>`,
@@ -44,6 +49,7 @@
     wand: `<path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8L19 13M17.8 6.2L19 5M3 21l9-9M12.2 6.2L11 5"/>`,
     bolt: `<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>`,
     save: `<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/>`,
+    copy: `<rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>`,
     eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
     lock: `<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
     sun: `<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>`,
@@ -53,6 +59,9 @@
     smile: `<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/>`,
     "arrow-down": `<path d="M12 5v14M19 12l-7 7-7-7"/>`,
     "arrow-up": `<path d="M12 19V5M5 12l7-7 7 7"/>`,
+    "chevrons-down": `<path d="M7 6l5 5 5-5M7 13l5 5 5-5"/>`,
+    "last-reply": `<path d="M20 12a8 8 0 0 1-8 8H5l-1.5 1.5V12a8 8 0 1 1 16 0z"/><path d="M12 8v7M9 12.5l3 3 3-3"/>`,
+    "chevrons-up": `<path d="M7 11l5-5 5 5M7 18l5-5 5 5"/>`,
     database: `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.7-4 3-9 3s-9-1.3-9-3M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/>`,
     hand: `<path d="M18 11V6a2 2 0 0 0-4 0v1M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 0 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-5.9-2.3L2.6 15.6a2 2 0 0 1 2.8-2.8L7 14.4"/>`,
   };