viberoom 0.5.4 → 0.5.5

package/README.md

@@ -146,6 +146,8 @@ it in a browser tab. Later, `npm install -g viberoom@latest` and the next start
   or GitHub Copilot. viberoom finds the ones you have and offers only those. It installs none of them.
 - A browser. Chrome, Edge or Brave for the app window; anything modern for a tab.
 
+Something does not start? `viberoom doctor` checks these four things and says which one is missing.
+
 <br>
 
 ## Use

package/dist/launcher.js

@@ -1,7 +1,7 @@
 // viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
 import { existsSync, readFileSync, renameSync, statSync, writeFileSync } from "node:fs";
 import { join, posix, win32 } from "node:path";
-const COMMANDS = new Set(["run", "serve", "start", "stop", "status", "open", "logs", "help"]);
+const COMMANDS = new Set(["run", "serve", "start", "stop", "status", "open", "logs", "doctor", "help"]);
 export function splitCommand(argv) {
     const first = argv[0];
     if (first && !first.startsWith("-") && COMMANDS.has(first))
@@ -174,6 +174,12 @@ export function appWindowArgs(url, profileDir, freshProfile, placement = null, p
         args.push("--class=viberoom");
     return args;
 }
+export function browserAdvice(chromium, platform = process.platform) {
+    if (chromium)
+        return null;
+    const names = platform === "darwin" ? "Chrome, Edge, Brave or Chromium" : platform === "win32" ? "Chrome, Edge or Chromium" : "google-chrome, chromium, microsoft-edge or brave-browser on PATH";
+    return `No Chromium-based browser found (${names}); viberoom opens in a tab of your default browser instead. Install one of them for the app window.`;
+}
 export function openUrlCommand(url, platform = process.platform) {
     if (platform === "win32")
         return `start "" "${url}"`;

package/dist/main.js

@@ -8,9 +8,10 @@ import { fileURLToPath } from "node:url";
 import { Hub } from "./hub.js";
 import { Logger } from "./log.js";
 import { startServer } from "./server.js";
-import { appWindowArgs, recordedWindowPlacement, savedWindowPlacement, findChromium, isProcessAlive, logFilePath, openUrlCommand, pidFilePath, readPidFile, rotateLog, splitCommand, tailFile, writePidFile, } from "./launcher.js";
+import { appWindowArgs, recordedWindowPlacement, savedWindowPlacement, browserAdvice, findChromium, isProcessAlive, logFilePath, openUrlCommand, pidFilePath, readPidFile, rotateLog, splitCommand, tailFile, writePidFile, } from "./launcher.js";
 import { aumidSyncScript, installShortcuts, windowsShortcutPaths } from "./shortcuts.js";
-import { runMenu } from "./tui.js";
+import { askEnter, renderInstalled, runMenu, unicodeSupported } from "./tui.js";
+import { listRecipes } from "./recipes.js";
 function parseArgs(argv) {
     const { command, rest } = splitCommand(argv);
     const options = {
@@ -77,6 +78,7 @@ Commands
   status       show whether a hub is running, its build and address
   open         open the window of the running hub
   logs         print the last lines of the background hub's log
+  doctor       check Node, the browser, the coding agents and the hub; say what is missing and why
 
 Options
   --port       localhost port for the web UI (default 4810)
@@ -198,9 +200,39 @@ function openWindow(url, options, log) {
         }
         return;
     }
+    const advice = options.browser ? null : browserAdvice(null);
+    if (advice) {
+        log.warn(advice);
+        process.stderr.write(`${advice}\n`);
+        try {
+            appendFileSync(logFilePath(options.dataDir), `[${new Date().toISOString()}] [launcher] ${advice}\n`);
+        }
+        catch {
+        }
+    }
     log.info("opening the default browser");
     exec(openUrlCommand(url), () => undefined);
 }
+async function runDoctor(options, info) {
+    const lines = [];
+    const major = Number(process.versions.node.split(".")[0]);
+    lines.push(`viberoom ${info.version} (build ${info.build})`);
+    lines.push(`${major >= 22 ? "ok  " : "FAIL"} node ${process.versions.node}${major >= 22 ? "" : " (viberoom needs Node 22 or newer: https://nodejs.org)"}`);
+    const chromium = findChromium();
+    lines.push(chromium ? `ok   browser for the app window: ${chromium}` : `warn ${browserAdvice(null)}`);
+    const recipes = listRecipes();
+    const found = recipes.filter((r) => !r.unavailableReason);
+    lines.push(`${found.length ? "ok  " : "warn"} coding agents: ${found.length ? found.map((r) => r.vendor).join(", ") : "none found"}${found.length ? "" : " (install and log in to at least one: Claude Code, Codex, Gemini CLI, Cursor, OpenCode or GitHub Copilot)"}`);
+    for (const r of recipes.filter((r) => r.unavailableReason))
+        lines.push(`     ${r.vendor}: ${r.unavailableReason}`);
+    const running = await runningInstance(options.port);
+    lines.push(running ? `ok   hub running at ${running.url} (build ${running.build ?? "unknown"})` : `info no hub on port ${options.port}: start one with "viberoom start" (or "viberoom start --browser" without a Chromium browser)`);
+    lines.push(`     data: ${options.dataDir}`);
+    lines.push(`     log:  ${logFilePath(options.dataDir)}`);
+    process.stdout.write(lines.join("\n") + "\n");
+    if (major < 22)
+        process.exitCode = 1;
+}
 async function runHub(options, log, info) {
     const background = options.command === "serve";
     if (!background) {
@@ -367,6 +399,9 @@ async function main() {
             openWindow(url, options, log);
             return;
         }
+        case "doctor":
+            await runDoctor(options, info);
+            return;
         case "logs": {
             const path = logFilePath(options.dataDir);
             process.stdout.write(`${path}\n${tailFile(path, 60)}\n`);
@@ -385,10 +420,12 @@ async function main() {
                 if (choice === "shortcut") {
                     const pkg = JSON.parse(readFileSync(fileURLToPath(new URL("../package.json", import.meta.url)), "utf8"));
                     const result = installShortcuts({ root: fileURLToPath(new URL("..", import.meta.url)), dataDir: options.dataDir, node: process.execPath, version: pkg.version, desktop: true });
-                    for (const file of result.files)
-                        process.stdout.write(`wrote: ${file}\n`);
-                    for (const note of result.notes)
-                        process.stdout.write(`${note}\n`);
+                    const advice = browserAdvice(findChromium());
+                    process.stdout.write(renderInstalled({ files: result.files, notes: result.notes, platform: process.platform, browserAdvice: advice && advice.replace("viberoom opens", "the icon opens viberoom") }, { color: !process.env.NO_COLOR, unicode: unicodeSupported(), columns: process.stdout.columns }));
+                    if (await askEnter()) {
+                        process.stdout.write("\n");
+                        await startBackground(options, log, info);
+                    }
                     return;
                 }
             }

package/dist/tui.js

@@ -72,6 +72,68 @@ export function renderDone(choice, title, opts, items = MENU) {
 export function menuLineCount(items = MENU) {
     return items.length + 5;
 }
+export function renderInstalled(o, opts) {
+    const g = opts.unicode ? GLYPHS.unicode : GLYPHS.ascii;
+    const dim = (t) => paint(opts.color, "2", t);
+    const bold = (t) => paint(opts.color, "1", t);
+    const green = (t) => paint(opts.color, "32", t);
+    const bar = paint(opts.color, "36", g.bar);
+    const steps = o.platform === "win32"
+        ? [
+            `Press the ${bold("Windows key")}, type ${bold("viberoom")}, press Enter.`,
+            `Or double-click ${bold("viberoom")} on the Desktop.`,
+            `Pin it: once the window is open, right-click its icon in the taskbar and choose "Pin to taskbar".`,
+        ]
+        : o.platform === "darwin"
+            ? [
+                `Press ${bold("⌘ Space")}, type ${bold("viberoom")}, press Enter (Spotlight); or open it from Launchpad.`,
+                `It lives in ${bold("~/Applications/viberoom.app")}; drag it to the Dock to keep it there.`,
+                `If macOS asks whether to open it the first time, choose Open: the app was made on this machine.`,
+            ]
+            : [
+                `Press the ${bold("Super key")}, type ${bold("viberoom")}, press Enter; it is in the applications menu.`,
+                `On the Desktop: right-click ${bold("viberoom.desktop")} and choose "Allow launching" once if your desktop asks.`,
+                `Pin it: right-click the running icon in the dock and choose "Add to favorites" (or your desktop's equivalent).`,
+            ];
+    const lines = [
+        `${dim(g.top)}  ${bold("The desktop icon is installed")}`,
+        dim(g.bar),
+        `${green(g.done)}  ${bold("How to start viberoom from now on")}`,
+        ...steps.map((t) => `${bar}  ${t}`),
+        bar,
+        `${green(g.done)}  ${bold("What happens")}`,
+        `${bar}  The icon starts the hub in the background and opens the app window.`,
+        `${bar}  Closing the window keeps the hub running; "viberoom stop" in a terminal ends it.`,
+        `${bar}  A newer version: the app tells you with a bubble over your avatar (Settings → Updates).`,
+    ];
+    if (o.browserAdvice)
+        lines.push(bar, `${paint(opts.color, "33", "!")}  ${o.browserAdvice}`);
+    if (o.files.length || o.notes.length) {
+        lines.push(bar, `${green(g.done)}  ${bold("Written")}`);
+        for (const f of o.files)
+            lines.push(`${bar}  ${dim(f)}`);
+        for (const n of o.notes)
+            lines.push(`${bar}  ${dim(n)}`);
+    }
+    lines.push(bar, `${dim(g.bottom)}  ${dim("Press Enter to open viberoom now, or q to leave it for later.")}`);
+    return lines.join("\n") + "\n";
+}
+export function askEnter(stdin = process.stdin, stdout = process.stdout) {
+    if (!stdin.isTTY || !stdout.isTTY || typeof stdin.setRawMode !== "function")
+        return Promise.resolve(false);
+    return new Promise((resolve) => {
+        const onData = (data) => {
+            stdin.off("data", onData);
+            stdin.setRawMode(false);
+            stdin.pause();
+            const s = data.toString();
+            resolve(s === "\r" || s === "\n");
+        };
+        stdin.setRawMode(true);
+        stdin.resume();
+        stdin.on("data", onData);
+    });
+}
 export function runMenu(title, stdin = process.stdin, stdout = process.stdout) {
     if (!stdin.isTTY || !stdout.isTTY || typeof stdin.setRawMode !== "function")
         return Promise.resolve(null);

package/package.json

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

package/templates/design-critique/template.json

@@ -13,12 +13,14 @@
     {
       "name": "Proposer",
       "tagline": "makes the strongest case for a design",
-      "role": "You propose designs and defend them with evidence from the code. State the approach, its cost, and what it makes easy. When the Skeptic finds a real hole, concede it and adjust the proposal rather than restating it. You read code; you never edit it."
+      "role": "You propose designs and defend them with evidence from the code. State the approach, its cost, and what it makes easy. When the Skeptic finds a real hole, concede it and adjust the proposal rather than restating it. You read code; you never edit it.",
+      "avatar": "🎨"
     },
     {
       "name": "Skeptic",
       "tagline": "finds what breaks it",
-      "role": "You look for what breaks a proposed design: the edge case, the migration cost, the thing that exists in the code and contradicts the plan. Name files and lines. Be specific and brief; a hole is worth more than a list of doubts. When a proposal survives, say so. You read code; you never edit it."
+      "role": "You look for what breaks a proposed design: the edge case, the migration cost, the thing that exists in the code and contradicts the plan. Name files and lines. Be specific and brief; a hole is worth more than a list of doubts. When a proposal survives, say so. You read code; you never edit it.",
+      "avatar": "🧐"
     }
   ]
 }

package/templates/explainer/template.json

@@ -11,7 +11,8 @@
     {
       "name": "Explainer",
       "tagline": "explains the code, never touches it",
-      "role": "You explain how this codebase works. Read whatever you need, then answer in plain language with file paths and line numbers, quoting the code when it settles a question. Structure long answers as a short walk through the flow. You never edit, create or delete files."
+      "role": "You explain how this codebase works. Read whatever you need, then answer in plain language with file paths and line numbers, quoting the code when it settles a question. Structure long answers as a short walk through the flow. You never edit, create or delete files.",
+      "avatar": "🎓"
     }
   ]
 }

package/templates/pair-programmer/template.json

@@ -11,7 +11,8 @@
     {
       "name": "Pair",
       "tagline": "codes with you, one step at a time",
-      "role": "You are a pair programmer. The human drives: you read the code first, make one small change at a time, run or test it, and report what changed with file paths. Propose the next step; do not take it until asked. When unsure, ask one precise question rather than guessing."
+      "role": "You are a pair programmer. The human drives: you read the code first, make one small change at a time, run or test it, and report what changed with file paths. Propose the next step; do not take it until asked. When unsure, ask one precise question rather than guessing.",
+      "avatar": "🤝"
     }
   ]
 }

package/templates/wren-and-quinn/template.json

@@ -11,18 +11,20 @@
     "turnTaking": "parallel",
     "agentsWakeEachOther": true,
     "hopLimit": 24,
-    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to the one who has worked on that part the most, or most recently; if neither has touched it, to Wren. A question without @ goes to Quinn.\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; 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."
+    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to the one who has worked on that part the most, or most recently; if neither has touched it, to Wren. A question without @ goes to Quinn.\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. Whoever built reports to the human. Address the other vibemate too only when the report changes something it works on or relies on: a shared file, an interface, a convention, a measurement that overturns its claim; then say in one line what you want from it (\"nothing, for your context\" counts). Otherwise it reads the report later, unaddressed. A report is never a request for review; only the human asks for one. 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; 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": "Wren",
       "tagline": "builds by default; explains and reviews when asked",
-      "role": "You are Wren, one of two equal vibemates, Wren and Quinn. You lean to building: a task without an address is yours when it touches what you have built, or when neither of you has; before you change anything, read what is already there, the notes, the docs and the code, and keep each change small. Everything else is in the room rules."
+      "role": "You are Wren, one of two equal vibemates, Wren and Quinn. You lean to building: a task without an address is yours when it touches what you have built, or when neither of you has; before you change anything, read what is already there, the notes, the docs and the code, and keep each change small. Everything else is in the room rules.",
+      "avatar": "🔨"
     },
     {
       "name": "Quinn",
       "tagline": "explains by default; builds and reviews when asked",
-      "role": "You are Quinn, one of two equal vibemates, Wren and Quinn. 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."
+      "role": "You are Quinn, one of two equal vibemates, Wren and Quinn. 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.",
+      "avatar": "💡"
     }
   ]
 }

package/ui/app.css

@@ -206,6 +206,7 @@
 .day { align-self: center; color: var(--faint); font-size: 11px; font-weight: 800; padding: 3px 12px; margin: 2px 0; }
 .msg { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 100%; animation: bubble-in var(--t-base) var(--ease-out); }
 .messages .msg { content-visibility: auto; contain-intrinsic-size: auto 120px; flex-shrink: 0; }
+.messages .msgs-page { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; content-visibility: auto; contain-intrinsic-size: auto 6000px; }
 .msg.agent { padding-right: 40px; }
 .msg.mine { align-items: flex-end; padding-left: 40px; }
 .head-av { display: inline-flex; width: 32px; height: 32px; padding: 4px; box-sizing: content-box; flex: none; }
@@ -214,6 +215,7 @@
 .msg.mine .head { flex-direction: row-reverse; }
 .msg.system { justify-content: center; }
 .msg.hidden-by-search { display: none; }
+.messages.searching .msgs-page { content-visibility: visible; }
 .sys { color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 10px; max-width: 80%; text-align: center; }
 .sys.warn { color: var(--warm-ink); background: var(--warm); border-radius: var(--r-pill); padding: 6px 12px; font-weight: 800; }
 .bubble-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; max-width: min(1040px, 100%); }
@@ -494,6 +496,7 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .lightbox img { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); background: #fff; }
 .composer textarea { flex: 1; display: block; box-sizing: border-box; resize: none; padding: 8px 0; margin: 0; border: 0; border-radius: 0; background: transparent; height: 36px; min-height: 36px; line-height: 20px; font-size: 14px; font-weight: 600; outline: none; color: var(--ink); overflow-y: auto; }
 .composer textarea::placeholder { color: var(--placeholder); font-weight: 600; }
+@supports (field-sizing: content) { .composer textarea { field-sizing: content; height: auto; } }
 .send-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--grad-primary); color: #fff; display: grid; place-content: center; box-shadow: var(--shadow-primary); flex: none; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast); }
 .send-btn .i { width: 18px; height: 18px; display: block; }
 .composer-clear { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--placeholder); font-size: 20px; line-height: 1; cursor: pointer; flex: none; margin-right: 2px; transition: background var(--t-fast), color var(--t-fast); }

package/ui/app.js

@@ -1574,9 +1574,29 @@
     return el;
   }
 
+  const PAGE_SIZE = 50;
+  function placeInList(el) {
+    let page = els.messages.lastElementChild;
+    if (!page || !page.classList.contains("msgs-page") || page.childElementCount >= PAGE_SIZE) {
+      page = document.createElement("div");
+      page.className = "msgs-page";
+      els.messages.appendChild(page);
+    }
+    page.appendChild(el);
+  }
+  function topInList(el) {
+    const page = el.parentElement;
+    if (!page || !page.classList.contains("msgs-page")) return el.offsetTop;
+    if (els.messages.classList.contains("searching") || page.firstElementChild.checkVisibility({ contentVisibilityAuto: true })) return page.offsetTop + el.offsetTop;
+    let i = 0;
+    for (let n = el.previousElementSibling; n; n = n.previousElementSibling) i++;
+    return page.offsetTop + (page.offsetHeight * i) / page.childElementCount;
+  }
+
   function renderMessages() {
     const room = currentRoom();
     els.messages.innerHTML = "";
+    els.messages.classList.toggle("searching", !!state.search);
     if (!room) return;
     if (!room.messages.length) {
       els.messages.innerHTML = `<div class="empty"><div class="art">${ic("chat")}</div><strong>${esc(room.name)}</strong> is quiet.<br>Summon a vibemate from the left, then say hello. Use @Name to address someone; without @ every vibemate hears you.</div>`;
@@ -1592,20 +1612,20 @@
         d.className = "day";
         d.textContent = day;
         d.title = new Date(m.ts).toLocaleDateString([], { weekday: "long", day: "numeric", month: "long", year: "numeric" });
-        els.messages.appendChild(d);
+        placeInList(d);
         lastDay = day;
       }
       for (const [seq, agents] of markers) {
         if (placed.has(seq) || !(m.seq >= seq)) continue;
         if (m.seq > 0) {
           placed.add(seq);
-          els.messages.appendChild(dividerElement(agents));
+          placeInList(dividerElement(agents));
         }
       }
-      els.messages.appendChild(messageElement(room, m));
+      placeInList(messageElement(room, m));
     }
     for (const [seq, agents] of markers) {
-      if (!placed.has(seq)) els.messages.appendChild(dividerElement(agents));
+      if (!placed.has(seq)) placeInList(dividerElement(agents));
     }
     for (const perm of room.permissions) renderPermission(room, perm);
     refreshSeen(room);
@@ -1638,7 +1658,7 @@
     else {
       const empty = els.messages.querySelector(".empty");
       if (empty) empty.remove();
-      els.messages.appendChild(messageElement(room, m));
+      placeInList(messageElement(room, m));
       if (m.from === "human") refreshSeen(room);
       if (m.streaming && m.from !== "human") renderSideRoom();
       else if (!stick && m.kind === "chat") noteNew(room, m);
@@ -3450,21 +3470,33 @@
 
   let composerMin = Number(recall("composerH")) || 0;
   const composerCeiling = () => Math.max(120, els.app.clientHeight - 260);
+  const fieldSizing = CSS.supports("field-sizing", "content");
   let autosizeQueued = false;
   function autosizeSoon() {
-    if (autosizeQueued) return;
+    if (fieldSizing || autosizeQueued) return;
     autosizeQueued = true;
     requestAnimationFrame(() => {
       autosizeQueued = false;
       autosize();
     });
   }
+  let composerBounds = "";
   function autosize() {
     const min = Math.max(36, composerMin);
     const cap = Math.max(180, min);
+    if (fieldSizing) {
+      const max = Math.min(composerCeiling(), cap);
+      if (composerBounds === `${min}/${max}`) return;
+      composerBounds = `${min}/${max}`;
+      els.input.style.minHeight = `${min}px`;
+      els.input.style.maxHeight = `${max}px`;
+      return;
+    }
     els.input.style.height = "auto";
     els.input.style.height = Math.min(composerCeiling(), Math.max(min, Math.min(cap, els.input.scrollHeight))) + "px";
   }
+  window.addEventListener("resize", autosize);
+  autosize();
   {
     const grip = $("#composer-grip");
     let drag = null;
@@ -4125,7 +4157,7 @@
       if (!nodes.length) return;
       const total = els.messages.scrollHeight || 1;
       const h = Math.max(0, t.ticks.clientHeight - TICK_H);
-      const tops = nodes.map((el) => el.offsetTop);
+      const tops = nodes.map(topInList);
       const frag = document.createDocumentFragment();
       nodes.forEach((el, i) => {
         const tick = document.createElement("div");
@@ -4148,7 +4180,7 @@
       t.view.style.height = `${Math.max(8, (m.clientHeight / total) * h)}px`;
       const top = m.scrollTop;
       const bottom = m.scrollTop + m.clientHeight;
-      const inView = t.items.map((el) => el.offsetTop + el.offsetHeight > top && el.offsetTop < bottom);
+      const inView = t.items.map((el) => { const y = topInList(el); return y + el.offsetHeight > top && y < bottom; });
       inView.forEach((on, i) => {
         const tick = t.ticks.children[i];
         if (tick) tick.classList.toggle("in-view", on);
@@ -4290,8 +4322,10 @@
     renderPins();
   }
   function updateTimelineView() { for (const t of timelines) t.updateView(); }
+  const composerFollowers = [$("#timeline"), $("#timeline-left"), els.mentionMenu, els.emojiMenu];
   new ResizeObserver(() => {
-    els.app.style.setProperty("--composer-h", `${els.composer.offsetHeight}px`);
+    const h = `${els.composer.offsetHeight}px`;
+    for (const el of composerFollowers) el.style.setProperty("--composer-h", h);
     renderTimeline();
   }).observe(els.composer);
   new ResizeObserver(() => renderTimeline()).observe(els.messages);