viberoom 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberoom",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "viberoom: group chat rooms for a human and several coding agents over the Agent Client Protocol",
   "type": "module",
   "engines": {
@@ -10,7 +10,7 @@
     "viberoom": "dist/main.js"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "node scripts/vendor-acp.mjs && tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "start": "node dist/main.js",
     "dev": "npm run build && node dist/main.js --open",
@@ -22,18 +22,21 @@
   },
   "files": [
     "dist",
+    "vendor",
     "ui",
     "assets",
     "scripts",
     "NOTICE"
   ],
   "dependencies": {
-    "@agentclientprotocol/claude-agent-acp": "0.73.0",
-    "@agentclientprotocol/codex-acp": "^1.8.0",
+    "@agentclientprotocol/sdk": "1.4.0",
     "marked": "^16.4.2",
-    "mermaid": "^11.17.2"
+    "mermaid": "^11.17.2",
+    "zod": "^4.0.0"
   },
   "devDependencies": {
+    "@agentclientprotocol/claude-agent-acp": "0.73.0",
+    "@agentclientprotocol/codex-acp": "1.8.0",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.0"
   },

package/scripts/vendor-acp.mjs

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const out = join(root, "vendor", "acp");
+function packageDir(name) {
+  const dir = join(root, "node_modules", name);
+  if (!existsSync(join(dir, "package.json"))) throw new Error(`${name} is not installed; run npm install first`);
+  return dir;
+}
+const readJson = (path) => JSON.parse(readFileSync(path, "utf8"));
+
+function writeManifest(dir, pkg) {
+  const kept = { name: pkg.name, version: pkg.version, type: pkg.type, license: pkg.license, main: pkg.main };
+  writeFileSync(join(dir, "package.json"), JSON.stringify(kept, null, 2) + "\n");
+}
+
+function copyLicence(from, to) {
+  for (const name of ["LICENSE", "LICENSE.md", "LICENSE.txt"]) {
+    if (existsSync(join(from, name))) cpSync(join(from, name), join(to, name));
+  }
+}
+
+function jsFiles(dir) {
+  const files = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...jsFiles(path));
+    else if (entry.name.endsWith(".js") || entry.name.endsWith(".mjs")) files.push(path);
+  }
+  return files;
+}
+
+rmSync(out, { recursive: true, force: true });
+
+{
+  const from = packageDir("@agentclientprotocol/codex-acp");
+  const to = join(out, "codex-acp");
+  mkdirSync(join(to, "dist"), { recursive: true });
+  cpSync(join(from, "dist", "index.js"), join(to, "dist", "index.js"));
+  writeManifest(to, readJson(join(from, "package.json")));
+  copyLicence(from, to);
+}
+
+{
+  const sdkFrom = packageDir("@anthropic-ai/claude-agent-sdk");
+  const sdkTo = join(out, "claude-agent-sdk");
+  const sdkPkg = readJson(join(sdkFrom, "package.json"));
+  mkdirSync(sdkTo, { recursive: true });
+  for (const file of sdkPkg.files ?? []) {
+    if (existsSync(join(sdkFrom, file))) cpSync(join(sdkFrom, file), join(sdkTo, file), { recursive: true });
+  }
+  writeManifest(sdkTo, sdkPkg);
+  copyLicence(sdkFrom, sdkTo);
+
+  const from = packageDir("@agentclientprotocol/claude-agent-acp");
+  const to = join(out, "claude-agent-acp");
+  mkdirSync(to, { recursive: true });
+  cpSync(join(from, "dist"), join(to, "dist"), {
+    recursive: true,
+    filter: (src) => statSync(src).isDirectory() || src.endsWith(".js"),
+  });
+  writeManifest(to, readJson(join(from, "package.json")));
+  copyLicence(from, to);
+
+  const sdkEntry = join(sdkTo, "sdk.mjs");
+  let rewritten = 0;
+  for (const file of jsFiles(join(to, "dist"))) {
+    let rel = relative(dirname(file), sdkEntry).split(sep).join("/");
+    if (!rel.startsWith(".")) rel = "./" + rel;
+    const before = readFileSync(file, "utf8");
+    const after = before.replace(/(["'])@anthropic-ai\/claude-agent-sdk\1/g, `$1${rel}$1`);
+    if (after !== before) {
+      writeFileSync(file, after);
+      rewritten += 1;
+    }
+  }
+  console.log(`vendored claude-agent-acp ${readJson(join(to, "package.json")).version} (${rewritten} files point at the vendored SDK ${sdkPkg.version})`);
+}
+
+console.log(`vendored codex-acp ${readJson(join(out, "codex-acp", "package.json")).version}`);

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; }
@@ -188,6 +188,24 @@
 .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; 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; }
 .bubble { max-width: 100%; background: #fff; border-radius: 6px 18px 18px 18px; padding: 12px 16px; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--ink-2); box-shadow: 0 2px 0 rgba(28, 27, 51, 0.06), 0 1px 3px rgba(28, 27, 51, 0.04); }
 .msg.mine .bubble { background: var(--grad-primary); color: #fff; border-radius: 18px 18px 6px 18px; box-shadow: 0 8px 18px -10px rgba(91, 91, 240, 0.7); padding: 11px 16px; }
 .msg.mine .bubble .text { color: #fff; }
@@ -219,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; }
@@ -326,6 +375,9 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .resizer { position: absolute; left: -14px; top: 0; bottom: 0; width: 20px; cursor: col-resize; z-index: 3; }
 .resizer::after { content: ""; position: absolute; left: 8.5px; top: 44%; height: 12%; width: 3px; border-radius: 3px; background: var(--lav-2); opacity: 0; transition: opacity var(--t-fast); }
 .resizer:hover::after, .shell.resizing .resizer::after { opacity: 1; }
+.details-handle { position: absolute; left: 0; bottom: 18%; z-index: 4; width: 20px; height: 64px; padding: 0; border: 0; border-radius: 0 12px 12px 0; background: #d6d8fb; color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px -2px rgba(91, 91, 240, 0.45); transition: background var(--t-fast), color var(--t-fast); }
+.details-handle:hover { background: var(--primary); color: #fff; }
+.details-handle svg { width: 16px; height: 16px; }
 .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
 .panel-title h3 { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .panel-title .hint { display: none; }