viberoom 0.4.0 → 0.4.1

package/README.md

@@ -130,6 +130,10 @@ it in a browser tab. Later, `npm install -g viberoom@latest` and the next start
 - **Nothing leaves your machine** except what each agent sends to its own provider. viberoom never
   sees your keys; every agent keeps its own login.
 - **Edit a message.** Fix what you said; the vibemates get the memo, or the conversation rewinds.
+- **Your messages on a timeline.** A thin strip on the chat's right edge, one mark per message of yours:
+  hover for the message with its neighbours, click to jump there.
+- **Pick a folder from a tree.** Browse the machine's folders when a room needs one; make a new one on the spot.
+- **Settings save themselves.** Change a setting and it is saved: on Enter, on leaving the field, on a pick.
 - **Search the room.** Everything anyone said, one search box.
 - **For geeks.** Every panel folds its technical settings behind a toggle. You never have to open it.
 

package/dist/fsbrowse.js

@@ -0,0 +1,65 @@
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+import { existsSync } from "node:fs";
+import { mkdir, readdir } from "node:fs/promises";
+import { homedir } from "node:os";
+import { basename, dirname, isAbsolute, join, resolve, sep } from "node:path";
+export function listRoots(platform = process.platform, exists = existsSync) {
+    if (platform !== "win32")
+        return [{ name: "/", path: "/", hidden: false }];
+    const roots = [];
+    for (let code = "C".charCodeAt(0); code <= "Z".charCodeAt(0); code++) {
+        const drive = `${String.fromCharCode(code)}:\\`;
+        if (exists(drive))
+            roots.push({ name: drive.slice(0, 2), path: drive, hidden: false });
+    }
+    return roots;
+}
+export function homeFolder() {
+    return homedir();
+}
+export function normalizeFolder(input) {
+    let trimmed = input.trim().replace(/^["']|["']$/g, "");
+    if (/^[A-Za-z]:$/.test(trimmed))
+        trimmed += "\\";
+    if (!trimmed || !isAbsolute(trimmed))
+        throw new Error("an absolute folder path is needed");
+    const full = resolve(trimmed);
+    return /^[A-Za-z]:\\?$/.test(full) ? `${full.slice(0, 2)}\\` : full.replace(new RegExp(`\\${sep}+$`), "") || sep;
+}
+function isRoot(path) {
+    return path === sep || /^[A-Za-z]:\\?$/.test(path);
+}
+export async function listFolders(input) {
+    const path = normalizeFolder(input);
+    const entries = await readdir(path, { withFileTypes: true });
+    const dirs = [];
+    for (const entry of entries) {
+        let isDir = entry.isDirectory();
+        if (!isDir && entry.isSymbolicLink()) {
+            try {
+                isDir = (await readdir(join(path, entry.name), { withFileTypes: true })) !== undefined;
+            }
+            catch {
+                isDir = false;
+            }
+        }
+        if (!isDir)
+            continue;
+        dirs.push({ name: entry.name, path: join(path, entry.name), hidden: entry.name.startsWith(".") || entry.name.startsWith("$") });
+    }
+    dirs.sort((a, b) => (a.hidden === b.hidden ? a.name.localeCompare(b.name, undefined, { sensitivity: "base" }) : a.hidden ? 1 : -1));
+    return { path, parent: isRoot(path) ? null : dirname(path), dirs };
+}
+export function validFolderName(name) {
+    const n = name.trim();
+    return n.length > 0 && n.length <= 120 && n !== "." && n !== ".." && !/[\\/:*?"<>|\u0000-\u001f]/.test(n) && !/[. ]$/.test(n);
+}
+export async function createFolder(parent, name) {
+    if (!validFolderName(name))
+        throw new Error("a folder name cannot contain \\ / : * ? \" < > | and cannot end with a dot or a space");
+    const path = join(normalizeFolder(parent), name.trim());
+    if (existsSync(path))
+        throw new Error(`"${basename(path)}" already exists here`);
+    await mkdir(path);
+    return path;
+}

package/dist/server.js

@@ -8,6 +8,7 @@ import { dirname, join } from "node:path";
 import { existsSync as fileExists } from "node:fs";
 import { classifyOpenTarget, describeOpen, detectEditor, editorCommand, isExecutablePath, openCommand } from "./open.js";
 import { parseCsv, viewerKind, VIEWER_MAX_BYTES } from "./viewer.js";
+import { createFolder, homeFolder, listFolders, listRoots } from "./fsbrowse.js";
 let editorFound;
 function currentEditor() {
     if (editorFound === undefined)
@@ -106,6 +107,26 @@ export function startServer(hub, port, log, info, onShutdownRequest) {
             req.on("close", () => clients.delete(res));
             return;
         }
+        if (req.method === "GET" && path === "/api/fs/dirs") {
+            const at = url.searchParams.get("path");
+            if (!at) {
+                sendJson(res, 200, { ok: true, roots: listRoots(), home: homeFolder() });
+                return;
+            }
+            try {
+                sendJson(res, 200, { ok: true, ...(await listFolders(at)) });
+            }
+            catch (error) {
+                const code = error.code;
+                if (code === "ENOENT" || code === "ENOTDIR")
+                    sendJson(res, 404, { error: `no such folder: ${at}` });
+                else if (code === "EACCES" || code === "EPERM")
+                    sendJson(res, 403, { error: `no access to ${at}` });
+                else
+                    throw error;
+            }
+            return;
+        }
         if (req.method === "GET" && path === "/api/file") {
             const target = classifyOpenTarget(url.searchParams.get("path") ?? "");
             if (!target || target.kind !== "path")
@@ -202,6 +223,10 @@ export function startServer(hub, port, log, info, onShutdownRequest) {
             sendJson(res, 200, { ok: true, settings: hub.updateSettings(body) });
             return;
         }
+        if (path === "/api/fs/mkdir") {
+            sendJson(res, 200, { ok: true, path: await createFolder(String(body.parent ?? ""), String(body.name ?? "")) });
+            return;
+        }
         if (path === "/api/window") {
             hub.saveWindowPlacement(body);
             sendJson(res, 200, { ok: true });

package/package.json

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

package/ui/app.css

@@ -177,7 +177,7 @@
 .chat-sub .dir-chip { cursor: help; }
 .chat-actions { display: flex; align-items: center; gap: 8px; }
 .chat-actions .search { margin: 0; width: 250px; }
-.messages { flex: 1; overflow-y: auto; padding: 12px 22px; display: flex; flex-direction: column; gap: 14px; background: var(--canvas-pattern) content-box, var(--grad-canvas); background-size: var(--canvas-pattern-size), auto; }
+.messages { position: relative; flex: 1; overflow-y: auto; padding: 12px 22px; display: flex; flex-direction: column; gap: 14px; background: var(--canvas-pattern) content-box, var(--grad-canvas); background-size: var(--canvas-pattern-size), auto; }
 .day { align-self: center; color: var(--faint); font-size: 11px; font-weight: 800; padding: 3px 12px; margin: 2px 0; }
 .msg { display: flex; gap: 12px; align-items: flex-start; max-width: 100%; animation: bubble-in var(--t-base) var(--ease-out); }
 .msg.agent { padding-right: 64px; }
@@ -189,6 +189,20 @@
 .bubble-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: min(1040px, 100%); }
 .msg.mine .bubble-col { align-items: flex-end; }
 .shell.side-collapsed .bubble-col { max-width: min(1480px, 100%); }
+.timeline { position: absolute; right: 6px; top: 78px; bottom: 96px; width: 18px; z-index: 4; }
+.tl-ticks { position: absolute; inset: 0; }
+.tl-view { position: absolute; left: 2px; right: 2px; border-radius: 6px; background: rgba(91, 91, 240, 0.07); pointer-events: none; transition: top 80ms linear, height 80ms linear; }
+.tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: 3px; background: #cdcdf9; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
+.tl-tick:hover, .tl-tick.active { background: var(--primary); transform: scaleX(1.25); }
+.tl-tick.in-view { background: #a9a9f5; }
+.tl-pop { position: absolute; right: 26px; width: 340px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; animation: rise var(--t-base) var(--ease-out); }
+.tl-row { padding: 6px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
+.tl-row.faded { color: var(--muted); opacity: 0.8; }
+.tl-row.far { opacity: 0.5; }
+.tl-row.current { background: var(--lav); color: var(--primary); font-weight: 800; }
+.tl-row:hover { background: var(--lav-2); }
+.msg.flash .bubble { animation: tl-flash 1.4s var(--ease-out); }
+@keyframes tl-flash { 0% { box-shadow: 0 0 0 0 rgba(91, 91, 240, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(91, 91, 240, 0); } }
 .jump-latest { position: absolute; right: 30px; bottom: 96px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--card); color: var(--primary); font: inherit; font-size: 12px; font-weight: 800; box-shadow: var(--shadow-pop); cursor: pointer; animation: rise var(--t-base) var(--ease-out); }
 .jump-latest:hover { background: var(--soft); }
 .jump-latest svg { width: 16px; height: 16px; }
@@ -223,6 +237,37 @@
 .msg.mine .bubble .text th { background: rgba(255, 255, 255, 0.18); }
 .msg.mine .bubble .text th, .msg.mine .bubble .text td { border-color: rgba(255, 255, 255, 0.35); }
 .msg.mine .bubble .text blockquote { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); }
+.dir-row { display: flex; gap: 8px; align-items: stretch; }
+.dir-row input { flex: 1; min-width: 0; }
+.dir-row .browse-btn { flex: 0 0 auto; white-space: nowrap; }
+.folder-dialog { width: 760px; height: min(80vh, 720px); flex-direction: column; }
+.folder-dialog[open] { display: flex; }
+.folder-dialog .file-head { flex: 0 0 auto; }
+.fp-bar { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 8px; }
+.fp-bar input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; }
+.fp-bar .btn { white-space: nowrap; }
+.fp-recent { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 8px; }
+.fp-recent:empty { display: none; }
+.fp-recent .chip-btn { max-width: 260px; }
+.fp-body { flex: 1; min-height: 0; overflow: auto; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); padding: 6px 4px; }
+.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
+.tree ul { padding-left: 18px; }
+.tree li { margin: 0; }
+.tn { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 2px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; user-select: none; }
+.tn:hover { background: var(--lav); }
+.tn.selected { background: var(--lav-2); color: var(--primary); }
+.tn.hidden-dir { color: var(--muted); font-weight: 600; }
+.tn-tw { flex: 0 0 18px; width: 18px; height: 18px; border: 0; background: transparent; color: var(--muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 5px; transition: transform var(--t-fast); }
+.tn-tw svg { width: 14px; height: 14px; }
+.tn-tw:hover { background: var(--card); color: var(--primary); }
+.tn.open .tn-tw { transform: rotate(90deg); }
+.tn.leaf .tn-tw { visibility: hidden; }
+.tn-ico { flex: 0 0 auto; font-size: 15px; line-height: 1; }
+.tn-name { overflow: hidden; text-overflow: ellipsis; }
+.tn-more { color: var(--faint); font-size: 12px; font-weight: 700; padding: 4px 26px; }
+.tn-new { display: flex; gap: 6px; align-items: center; padding: 2px 0 4px 26px; }
+.tn-new input { height: 28px; font-size: 13px; padding: 0 10px; }
+.fp-selected { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
 .file-dialog { width: 900px; flex-direction: column; }
 .file-dialog[open] { display: flex; }
 .file-dialog .file-head { flex: 0 0 auto; }

package/ui/app.js

@@ -578,16 +578,26 @@
   function geek(id, bodyHtml, hint) {
     return `<details class="geek" id="${id}"><summary>${ic("geek")}for geeks${hint ? `<span class="g-hint">${hint}</span>` : ""}<span class="chev">${ic("down")}</span></summary><div class="geek-body">${bodyHtml}</div></details>`;
   }
+  const recentlySaved = new Map();
   function bindSave(container, button, onSave) {
     if (!container || !button) return;
+    let dirty = false;
+    let saving = false;
+    let again = false;
     const arm = () => {
+      dirty = true;
       button.disabled = false;
       button.classList.remove("saved");
       button.textContent = "Save";
     };
-    container.addEventListener("input", arm);
-    container.addEventListener("change", arm);
-    button.addEventListener("click", async () => {
+    const save = async () => {
+      if (!dirty) return;
+      if (saving) {
+        again = true;
+        return;
+      }
+      saving = true;
+      dirty = false;
       button.disabled = true;
       button.classList.add("loading");
       try {
@@ -595,11 +605,43 @@
         button.classList.remove("loading");
         button.classList.add("saved");
         button.innerHTML = `${ic("check")} Saved`;
+        if (button.id) recentlySaved.set(button.id, Date.now());
       } catch (e) {
+        dirty = true;
         button.classList.remove("loading");
         button.disabled = false;
         showError(e);
       }
+      saving = false;
+      if (again) {
+        again = false;
+        save();
+      }
+    };
+    if (button.id && Date.now() - (recentlySaved.get(button.id) || 0) < 5000) {
+      button.disabled = true;
+      button.classList.add("saved");
+      button.innerHTML = `${ic("check")} Saved`;
+    }
+    container.addEventListener("input", arm);
+    container.addEventListener("change", () => {
+      arm();
+      save();
+    });
+    container.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter") return;
+      const t = e.target;
+      if (t.tagName === "INPUT" || (e.ctrlKey && (t.tagName === "TEXTAREA" || t.isContentEditable))) {
+        e.preventDefault();
+        t.blur();
+      }
+    });
+    container.addEventListener("focusout", (e) => {
+      if (e.target.isContentEditable) save();
+    });
+    button.addEventListener("click", () => {
+      dirty = true;
+      save();
     });
   }
   function roomHue(room) {
@@ -1261,6 +1303,7 @@
     for (const perm of room.permissions) renderPermission(room, perm);
     refreshSeen(room);
     scrollToBottom();
+    renderTimeline();
   }
 
   function upsertMessage(roomId, m) {
@@ -1289,6 +1332,7 @@
       if (m.from === "human") refreshSeen(room);
     }
     if (stick) scrollToBottom();
+    if (m.from === "human") renderTimeline();
   }
 
   function removeMessage(roomId, id) {
@@ -1575,7 +1619,7 @@
     $("#pp-avatar-picker").appendChild(
       window.Avatars.pickerElement(p.avatar || "", (emoji) => {
         $("#pp-avatar").value = emoji;
-        $("#pp-avatar").dispatchEvent(new Event("input", { bubbles: true }));
+        $("#pp-avatar").dispatchEvent(new Event("change", { bubbles: true }));
       }),
     );
     renderSkillChecks($("#pp-skills"), p.skills || []);
@@ -1664,7 +1708,7 @@
     $("#me-avatar-picker").appendChild(
       window.Avatars.pickerElement(s.humanAvatar || "", (emoji) => {
         $("#me-avatar").value = emoji;
-        $("#me-avatar").dispatchEvent(new Event("input", { bubbles: true }));
+        $("#me-avatar").dispatchEvent(new Event("change", { bubbles: true }));
       }),
     );
     bindSave($("#me-vibe"), $("#me-save"), () => post("/api/settings", { humanName: $("#me-name").value, humanAvatar: $("#me-avatar").value, humanDescription: $("#me-desc").value }));
@@ -1683,7 +1727,7 @@
         ${field("Name", `<input type="text" id="rp-name" maxlength="60" value="${esc(room.name)}">`)}
         ${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", `<input type="text" id="rp-dir" maxlength="1000" value="${esc(room.dir)}" spellcheck="false">`, "Where the vibemates read and write. Changing it restarts them in the new folder; they replay the last messages.")}
+        ${field("Folder", `<span class="dir-row"><input type="text" id="rp-dir" maxlength="1000" value="${esc(room.dir)}" spellcheck="false"><button type="button" class="btn ghost browse-btn" id="rp-dir-browse" title="Choose a folder">${ic("folder")}Browse</button></span>`, "Where the vibemates read and write. Changing it restarts them in the new folder; they replay the last messages.")}
         <label 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></label>
         ${field("Language", `<input type="text" id="rp-lang" value="${esc(lang)}" placeholder="follow the human (default), or e.g. English">`)}
       </div>
@@ -1739,6 +1783,10 @@
         $("#rp-emoji").dispatchEvent(new Event("input", { bubbles: true }));
       }),
     );
+    $("#rp-dir-browse").addEventListener("click", () => openFolderPicker($("#rp-dir").value, (dir) => {
+      $("#rp-dir").value = dir;
+      $("#rp-dir").dispatchEvent(new Event("change", { bubbles: true }));
+    }));
     bindSave($("#rp-form"), $("#rp-save"), async () => {
         const name = $("#rp-name").value;
         if (name.trim() !== room.name) await post(roomApi("/rename"), { name });
@@ -3062,6 +3110,7 @@
   els.sideToggle.addEventListener("click", () => setSideOpen(els.app.classList.contains("side-collapsed")));
   els.messages.addEventListener("scroll", () => {
     els.jumpLatest.hidden = nearBottom();
+    updateTimelineView();
   });
   els.jumpLatest.addEventListener("click", () => els.messages.scrollTo({ top: els.messages.scrollHeight, behavior: "smooth" }));
   els.detailsHandle.addEventListener("click", closeDetails);
@@ -3178,6 +3227,264 @@
   });
   window.addEventListener("beforeunload", () => remember("view", state.view));
 
+  const tl = { el: $("#timeline"), ticks: $("#timeline .tl-ticks"), view: $("#timeline .tl-view"), pop: $("#timeline .tl-pop"), items: [] };
+  const TICK_H = 5;
+  function renderTimeline() {
+    const room = currentRoom();
+    const nodes = room && state.view === "room" ? [...els.messages.querySelectorAll(".msg.mine:not(.hidden-by-search)")] : [];
+    tl.items = nodes;
+    tl.el.hidden = nodes.length === 0;
+    tl.pop.hidden = true;
+    if (!nodes.length) return;
+    const total = els.messages.scrollHeight || 1;
+    const h = Math.max(0, tl.ticks.clientHeight - TICK_H);
+    tl.ticks.innerHTML = "";
+    nodes.forEach((el, i) => {
+      const t = document.createElement("div");
+      t.className = "tl-tick";
+      t.dataset.i = i;
+      t.title = "";
+      t.style.top = `${Math.round((el.offsetTop / total) * h)}px`;
+      tl.ticks.appendChild(t);
+    });
+    updateTimelineView();
+  }
+  function updateTimelineView() {
+    if (tl.el.hidden) return;
+    const m = els.messages;
+    const total = m.scrollHeight || 1;
+    const h = tl.ticks.clientHeight;
+    tl.view.style.top = `${(m.scrollTop / total) * h}px`;
+    tl.view.style.height = `${Math.max(8, (m.clientHeight / total) * h)}px`;
+    const top = m.scrollTop;
+    const bottom = m.scrollTop + m.clientHeight;
+    tl.items.forEach((el, i) => {
+      const tick = tl.ticks.children[i];
+      if (tick) tick.classList.toggle("in-view", el.offsetTop + el.offsetHeight > top && el.offsetTop < bottom);
+    });
+  }
+  function timelineText(el) {
+    const t = el.querySelector(".text");
+    return (t ? t.innerText : el.innerText).trim().replace(/\s+/g, " ").slice(0, 240);
+  }
+  function showTimelinePop(i) {
+    const rows = [[i - 2, "faded far"], [i - 1, "faded"], [i, "current"], [i + 1, "faded"], [i + 2, "faded far"]].filter(([k]) => tl.items[k]);
+    tl.pop.innerHTML = rows.map(([k, c]) => `<div class="tl-row ${c}" data-i="${k}">${esc(timelineText(tl.items[k]))}</div>`).join("");
+    tl.pop.hidden = false;
+    tl.ticks.querySelectorAll(".tl-tick.active").forEach((t) => t.classList.remove("active"));
+    const tick = tl.ticks.children[i];
+    if (tick) tick.classList.add("active");
+    const current = tl.pop.querySelector(".tl-row.current");
+    let top = (tick ? tick.offsetTop : 0) - (current ? current.offsetTop + current.offsetHeight / 2 : 20) + TICK_H / 2;
+    top = Math.max(0, Math.min(top, tl.el.clientHeight - tl.pop.offsetHeight));
+    tl.pop.style.top = `${top}px`;
+  }
+  function hideTimelinePop() {
+    tl.pop.hidden = true;
+    tl.ticks.querySelectorAll(".tl-tick.active").forEach((t) => t.classList.remove("active"));
+  }
+  function jumpToMessage(el) {
+    if (!el) return;
+    el.scrollIntoView({ block: "center", behavior: "smooth" });
+    el.classList.remove("flash");
+    void el.offsetWidth;
+    el.classList.add("flash");
+  }
+  tl.ticks.addEventListener("mouseover", (e) => {
+    const tick = e.target.closest(".tl-tick");
+    if (tick) showTimelinePop(Number(tick.dataset.i));
+  });
+  tl.el.addEventListener("mouseleave", hideTimelinePop);
+  tl.ticks.addEventListener("click", (e) => {
+    const tick = e.target.closest(".tl-tick");
+    if (tick) jumpToMessage(tl.items[Number(tick.dataset.i)]);
+  });
+  tl.pop.addEventListener("click", (e) => {
+    const row = e.target.closest(".tl-row");
+    if (row) jumpToMessage(tl.items[Number(row.dataset.i)]);
+  });
+  new ResizeObserver(() => renderTimeline()).observe(els.messages);
+
+  const fp = { onChoose: null, selected: "", roots: [], home: "" };
+  const fpEls = { dialog: $("#folder-dialog"), path: $("#fp-path"), tree: $("#fp-tree"), recent: $("#fp-recent"), error: $("#fp-error"), selected: $("#fp-selected"), choose: $("#fp-choose"), home: $("#fp-home"), newBtn: $("#fp-new") };
+  const sepOf = (p) => (p.includes("\\") || /^[A-Za-z]:/.test(p) ? "\\" : "/");
+  const sameFolder = (a, b) => a.replace(/[\\/]+$/, "").toLowerCase() === b.replace(/[\\/]+$/, "").toLowerCase();
+  const isUnder = (child, parent) => {
+    const c = child.replace(/[\\/]+$/, "").toLowerCase();
+    const p = parent.replace(/[\\/]+$/, "").toLowerCase();
+    return c === p || c.startsWith(p + sepOf(parent)) || (parent.endsWith(sepOf(parent)) && c.startsWith(p + sepOf(parent)));
+  };
+  function fpFail(error) {
+    fpEls.error.textContent = error.message || String(error);
+    fpEls.error.hidden = false;
+  }
+  function fpNode(entry) {
+    const li = document.createElement("li");
+    li.dataset.path = entry.path;
+    li.innerHTML = `<div class="tn${entry.hidden ? " hidden-dir" : ""}"><button type="button" class="tn-tw" title="Expand">${ic("forward")}</button><span class="tn-ico">📁</span><span class="tn-name">${esc(entry.name)}</span></div><ul hidden></ul>`;
+    return li;
+  }
+  function fpSelect(path, li) {
+    fp.selected = path;
+    fpEls.tree.querySelectorAll(".tn.selected").forEach((el) => el.classList.remove("selected"));
+    if (li) li.querySelector(":scope > .tn").classList.add("selected");
+    fpEls.path.value = path;
+    fpEls.selected.textContent = path;
+    fpEls.error.hidden = true;
+  }
+  async function fpLoad(li) {
+    const ul = li.querySelector(":scope > ul");
+    if (li.dataset.loaded) return ul;
+    const data = await get(`/api/fs/dirs?path=${encodeURIComponent(li.dataset.path)}`);
+    ul.innerHTML = "";
+    for (const d of data.dirs) ul.appendChild(fpNode(d));
+    if (!data.dirs.length) ul.innerHTML = `<li class="tn-more">no sub-folders</li>`;
+    li.dataset.loaded = "1";
+    li.querySelector(":scope > .tn").classList.toggle("leaf", !data.dirs.length);
+    return ul;
+  }
+  async function fpExpand(li, open) {
+    const tn = li.querySelector(":scope > .tn");
+    const ul = li.querySelector(":scope > ul");
+    const want = open === undefined ? ul.hidden : open;
+    if (!want) {
+      ul.hidden = true;
+      tn.classList.remove("open");
+      return;
+    }
+    tn.classList.add("open");
+    try {
+      await fpLoad(li);
+      ul.hidden = false;
+    } catch (e) {
+      tn.classList.remove("open");
+      fpFail(e);
+    }
+  }
+  async function fpReveal(path) {
+    const target = path.replace(/[\\/]+$/, "") || path;
+    let level = fpEls.tree;
+    let found = null;
+    for (let guard = 0; guard < 64; guard++) {
+      const li = [...level.children].find((el) => el.dataset && el.dataset.path && isUnder(target, el.dataset.path));
+      if (!li) break;
+      found = li;
+      if (sameFolder(li.dataset.path, target)) break;
+      await fpExpand(li, true);
+      level = li.querySelector(":scope > ul");
+    }
+    if (found && sameFolder(found.dataset.path, target)) {
+      fpSelect(found.dataset.path, found);
+      found.scrollIntoView({ block: "center" });
+      return true;
+    }
+    return false;
+  }
+  async function fpGoTo(typed) {
+    const p = typed.trim();
+    if (!p) return;
+    try {
+      const data = await get(`/api/fs/dirs?path=${encodeURIComponent(p)}`);
+      if (!(await fpReveal(data.path))) fpSelect(data.path, null);
+    } catch (e) {
+      fpFail(e);
+    }
+  }
+  function fpRecent() {
+    const dirs = [];
+    for (const room of state.rooms.values()) if (room.dir && !dirs.some((d) => sameFolder(d, room.dir))) dirs.push(room.dir);
+    fpEls.recent.innerHTML = "";
+    for (const d of dirs.slice(0, 6)) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "chip-btn";
+      b.title = d;
+      b.textContent = d.split(/[\\/]/).filter(Boolean).slice(-1)[0] || d;
+      b.addEventListener("click", () => fpGoTo(d));
+      fpEls.recent.appendChild(b);
+    }
+  }
+  async function openFolderPicker(initial, onChoose) {
+    fp.onChoose = onChoose;
+    fpEls.error.hidden = true;
+    fpEls.tree.innerHTML = `<li class="tn-more">loading…</li>`;
+    fpSelect("", null);
+    openDialog(fpEls.dialog);
+    try {
+      const data = await get("/api/fs/dirs");
+      fp.roots = data.roots;
+      fp.home = data.home;
+      fpEls.tree.innerHTML = "";
+      for (const r of data.roots) fpEls.tree.appendChild(fpNode(r));
+      fpRecent();
+      const start = (initial || "").trim() || data.home;
+      await fpGoTo(start);
+      fpEls.path.focus();
+    } catch (e) {
+      fpFail(e);
+    }
+  }
+  fpEls.tree.addEventListener("click", (e) => {
+    const li = e.target.closest("li[data-path]");
+    if (!li) return;
+    if (e.target.closest(".tn-tw")) return void fpExpand(li);
+    fpSelect(li.dataset.path, li);
+  });
+  fpEls.tree.addEventListener("dblclick", (e) => {
+    const li = e.target.closest("li[data-path]");
+    if (li && !e.target.closest(".tn-tw")) fpExpand(li);
+  });
+  fpEls.path.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      fpGoTo(fpEls.path.value);
+    }
+  });
+  fpEls.home.addEventListener("click", () => fpGoTo(fp.home));
+  fpEls.newBtn.addEventListener("click", async () => {
+    const li = fpEls.tree.querySelector(".tn.selected")?.closest("li[data-path]");
+    if (!li) return fpFail(new Error("select the folder to create it in first"));
+    await fpExpand(li, true);
+    const ul = li.querySelector(":scope > ul");
+    if (ul.querySelector(".tn-new")) return;
+    const row = document.createElement("li");
+    row.className = "tn-new";
+    row.innerHTML = `<span class="tn-ico">📁</span><input type="text" placeholder="folder name" maxlength="120">`;
+    ul.prepend(row);
+    const input = row.querySelector("input");
+    input.focus();
+    const done = async () => {
+      const name = input.value.trim();
+      row.remove();
+      if (!name) return;
+      try {
+        const r = await post("/api/fs/mkdir", { parent: li.dataset.path, name });
+        delete li.dataset.loaded;
+        await fpExpand(li, true);
+        await fpReveal(r.path);
+      } catch (err) {
+        fpFail(err);
+      }
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        done();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        row.remove();
+      }
+    });
+    input.addEventListener("blur", () => setTimeout(() => row.isConnected && done(), 120));
+  });
+  fpEls.choose.addEventListener("click", () => {
+    const chosen = fp.selected || fpEls.path.value.trim();
+    if (!chosen) return fpFail(new Error("pick a folder first"));
+    closeDialog(fpEls.dialog);
+    if (fp.onChoose) fp.onChoose(chosen);
+  });
+  $("#room-dir-browse").addEventListener("click", () => openFolderPicker(els.roomDir.value, (dir) => (els.roomDir.value = dir)));
+
   if (window.matchMedia("(display-mode: standalone)").matches) {
     const placement = () => ({
       left: window.screenX,

package/ui/index.html

@@ -79,6 +79,11 @@
         </header>
         <div id="messages" class="messages"></div>
         <button type="button" id="jump-latest" class="jump-latest" title="Back to the latest messages" hidden><span data-icon="arrow-down"></span>Latest</button>
+        <div id="timeline" class="timeline" hidden>
+          <div class="tl-view"></div>
+          <div class="tl-ticks"></div>
+          <div class="tl-pop" hidden></div>
+        </div>
         <div id="mention-menu" class="mention-menu" hidden></div>
         <div id="emoji-menu" class="mention-menu emoji-menu" hidden></div>
         <form id="composer" class="composer">
@@ -127,7 +132,7 @@
       <p class="lead">A room is a shared space for you and the vibemates you summon. Give it a name.</p>
       <label>Room name<input id="room-name" type="text" maxlength="60" required placeholder="e.g. Architecture review"></label>
       <label>Working directory <span class="hint">(optional)</span><button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>The folder the vibemates work in (their cwd). Leave it empty and the hub keeps a folder per room. Instruction files in it (CLAUDE.md, AGENTS.md, GEMINI.md, .cursor/rules) are read by the vibemates by their own conventions; the hub tells you if it finds any.</span>
-        <input id="room-dir" type="text" placeholder="C:\projects\my-app"></label>
+        <span class="dir-row"><input id="room-dir" type="text" placeholder="C:\projects\my-app"><button type="button" class="btn ghost browse-btn" id="room-dir-browse" title="Choose a folder"><span data-icon="folder"></span>Browse</button></span></label>
       <p class="error" id="room-error" hidden></p>
       <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary">Open the room</button></div>
     </form>
@@ -212,6 +217,26 @@
       <div class="actions"><button type="button" class="btn ghost" data-close>Keep my vibe</button><button type="submit" id="erase-submit" class="btn danger solid" disabled>Erase everything</button></div>
     </form>
   </dialog>
+  <dialog id="folder-dialog" class="dialog wide folder-dialog">
+    <div class="file-head">
+      <h3><span class="h-ico" data-icon="folder"></span>Choose a folder</h3>
+      <div class="fp-bar">
+        <input id="fp-path" type="text" spellcheck="false" placeholder="Type a path and press Enter, or pick one below">
+        <button type="button" class="btn ghost" id="fp-home" title="Your home folder"><span data-icon="user"></span>Home</button>
+        <button type="button" class="btn ghost" id="fp-new" title="New folder inside the selected one"><span data-icon="plus"></span>New folder</button>
+      </div>
+      <div class="fp-recent" id="fp-recent"></div>
+    </div>
+    <div class="fp-body">
+      <ul class="tree" id="fp-tree"></ul>
+    </div>
+    <p class="error" id="fp-error" hidden></p>
+    <div class="actions">
+      <span class="fp-selected" id="fp-selected"></span>
+      <button type="button" class="btn ghost" data-close>Cancel</button>
+      <button type="button" class="btn primary" id="fp-choose">Choose this folder</button>
+    </div>
+  </dialog>
   <dialog id="file-dialog" class="dialog wide file-dialog">
     <div class="file-head">
       <h3><span class="h-ico" data-icon="link"></span><span id="fv-title">File</span></h3>