@caglarutkuguler/cubicle 0.3.1 → 0.5.0

package/README.md

@@ -33,6 +33,12 @@ npx @caglarutkuguler/cubicle install-hooks      # once; backs up ~/.claude/setti
 npx @caglarutkuguler/cubicle --source claude-code
 ```
 
+**Both in one office** — Paperclip agents on the first rows, Claude Code sessions after them:
+
+```bash
+npx @caglarutkuguler/cubicle --source paperclip,claude-code
+```
+
 **Anything else** — a JSON file or URL in the [feed format](docs/FEED.md):
 
 ```bash
@@ -56,7 +62,7 @@ node bin/cubicle.js            # add --source … as above
 | --- | --- | --- |
 | `--port` | `CUBICLE_PORT` | `3200` |
 | `--host` | `CUBICLE_HOST` | `127.0.0.1` |
-| `--source` | `CUBICLE_SOURCE` | `paperclip` — or `claude-code`, a `.json` file, or an `http(s)://` URL |
+| `--source` | `CUBICLE_SOURCE` | `paperclip` — or `claude-code`, a `.json` file, an `http(s)://` URL, or several of these comma-separated |
 | `--paperclip` | `PAPERCLIP_URL` | `http://127.0.0.1:3100` |
 | `--token-file` | `PAPERCLIP_TOKEN` / `PAPERCLIP_TOKEN_FILE` | none — API key for an authenticated Paperclip |
 
@@ -65,13 +71,14 @@ URL parameters:
 - `?company=PREFIX` opens a specific Paperclip company (for example `?company=MEG`). With several companies, a picker also appears in the header.
 - `?lang=en` or `?lang=tr` sets the language.
 - `?demo` shows fake agents.
+- `?kiosk` fills the screen with the office for a TV or a second monitor: cards and footer hidden, names and bubbles scale with the screen, cursor hidden. Combined with the auto-updater, a wall display picks up new versions by itself.
 
 ## What the office shows
 
 | Status | In the office |
 | --- | --- |
 | `running` | Sits at its desk, monitor on, typing; bubble shows the task |
-| `waiting` | Sits at its desk with a hand up, amber screen — it needs your input or approval |
+| `waiting` | Sits at its desk with a hand up, amber screen — it needs your input or approval. With Paperclip this comes from issues whose review is waiting on the board (for example pending ask-user questions); a busy agent keeps typing but its bubble flashes the issue id, and the header counts how many need you |
 | `idle` | Wanders the lounge; says "✓ done" right after finishing a run |
 | `error` | Slumped at its desk, red screen, error text on its card |
 | `paused` | "zZ" |
@@ -94,8 +101,25 @@ Use a board API key with the narrowest read-only scope Paperclip lets you create
 
 **Claude Code.** A hook script ([`bin/cubicle-hook.js`](bin/cubicle-hook.js)) runs on Claude Code's own hook events and rewrites `~/.cubicle/claude-code.json`. Tool calls put the character at its desk, permission prompts raise its hand, `Stop` sends it to the lounge. Setup and privacy notes: [`examples/claude-code/README.md`](examples/claude-code/README.md).
 
+**Several at once.** `--source paperclip,claude-code,./other.json` puts every source in the same office. Each source keeps its own block of desks, so agents don't shuffle when a session starts or ends, and if one source goes down the others keep showing while the header names the one that is unreachable.
+
 **Feed.** Any process can write `{ "company": "…", "agents": [{ "id", "name", "role", "status", "task", "error" }] }` to a file or serve it over HTTP. Full spec with status aliases: [`docs/FEED.md`](docs/FEED.md). A sample is in [`examples/feed.json`](examples/feed.json).
 
+## How it compares
+
+Cubicle is one of several pixel offices for AI agents, all inspired by [Pixel Agents](https://github.com/pixel-agents-hq/pixel-agents). They optimise for different things:
+
+| | Cubicle | [Pixel Agents](https://github.com/pixel-agents-hq/pixel-agents) | [Agent Pixels](https://github.com/gcampton/Agent-Pixels) | [agents-in-the-office](https://github.com/gukosowa/agents-in-the-office) |
+| --- | --- | --- | --- | --- |
+| Works with | Paperclip, Claude Code, any JSON feed | Claude Code | Paperclip | Claude Code, Gemini CLI |
+| Runs as | Standalone page (`npx`, systemd, kiosk) | VS Code extension or `npx` browser app | Paperclip plugin | Standalone app |
+| Setup | One command, nothing to build | Marketplace install; build from source to hack on it | Build against the Paperclip plugin SDK | See its README |
+| Access to your agents | Read-only by design (GET allowlist) | Watches local Claude Code sessions | Inside Paperclip | Watches local sessions |
+| Shows "needs you" | Yes: permission prompts, board questions | Yes: waiting for approval | Not listed | Yes: approval alerts |
+| Office editor, art | Fixed room, programmer art | Layout editor, furniture and character assets, pets | 80+ characters, multi-room views | Tile map editor, sound packs |
+
+**Pick Cubicle** if you want something you can trust to run next to production agents (it can only read), that starts in seconds with no build, or that shows Paperclip and Claude Code in one place. **Pick another one** if you want to design your office, richer art, or tighter editor integration.
+
 ## Run it as a service (Linux / WSL)
 
 systemd user units are in [`examples/systemd/`](examples/systemd/): `cubicle.service` (Paperclip, port 3200), `cubicle-claude.service` (Claude Code, port 3201), and an optional updater.
@@ -131,7 +155,7 @@ journalctl --user -u cubicle-update.service   # what it did
 
 ## Contributing
 
-Issues and pull requests are welcome. Ideas: adapters for other agent runtimes (write a feed, send a PR with an example), a kiosk mode for wall displays, meeting-room animations when agents hand work to each other, per-agent sprite customisation, replay of a recorded day, and multi-source offices (Paperclip and Claude Code on one floor).
+Issues and pull requests are welcome; see [CONTRIBUTING.md](CONTRIBUTING.md) for the few ground rules (zero dependencies, read-only). Look for issues labelled [good first issue](https://github.com/caglarutkuguler/cubicle/labels/good%20first%20issue). Ideas: adapters for other agent runtimes (write a feed, send a PR with an example), a kiosk mode for wall displays, meeting-room animations when agents hand work to each other, per-agent sprite customisation, replay of a recorded day, and multi-source offices (Paperclip and Claude Code on one floor).
 
 ## Releasing
 

package/bin/cubicle.js

@@ -32,13 +32,18 @@ if (process.argv[2] === 'install-hooks') {
   return;
 }
 
+if (process.argv.includes('--version') || process.argv.includes('-v')) {
+  console.log(require('../package.json').version);
+  process.exit(0);
+}
+
 if (process.argv.includes('--help') || process.argv.includes('-h')) {
   console.log(`Cubicle — a live pixel-art office for your AI agents
 
 Usage: cubicle [--port 3200] [--host 127.0.0.1] [--source paperclip] [--paperclip http://127.0.0.1:3100] [--token-file FILE]
        cubicle install-hooks [--uninstall]   add/remove the Claude Code hooks in ~/.claude/settings.json
 
-Sources (--source / CUBICLE_SOURCE):
+Sources (--source / CUBICLE_SOURCE), one or several comma-separated, e.g. paperclip,claude-code:
   paperclip            Paperclip server, default (see --paperclip / PAPERCLIP_URL)
   claude-code          Claude Code sessions, via the hook in examples/claude-code/
   ./agents.json        Any JSON file in the Cubicle feed format (docs/FEED.md)
@@ -87,13 +92,23 @@ if (TOKEN && !/^[\x21-\x7e]+$/.test(TOKEN)) {
   process.exit(1);
 }
 
-// ---------- source ----------
-const rawSource = arg('source') || process.env.CUBICLE_SOURCE || 'paperclip';
-let source; // { kind: 'paperclip' } | { kind: 'file', file, label } | { kind: 'url', url, label }
-if (rawSource === 'paperclip') source = { kind: 'paperclip' };
-else if (rawSource === 'claude-code') source = { kind: 'file', file: CLAUDE_CODE_FEED, label: 'Claude Code', emptyIfMissing: true };
-else if (/^https?:\/\//.test(rawSource)) source = { kind: 'url', url: new URL(rawSource), label: rawSource };
-else source = { kind: 'file', file: path.resolve(rawSource), label: path.basename(rawSource) };
+// ---------- sources ----------
+// --source takes one source or several, comma-separated: "paperclip,claude-code" shows both
+// in one office. At most one Paperclip; any number of feeds (served at /api/feed/<n>).
+function parseSource(raw) {
+  if (raw === 'paperclip') return { kind: 'paperclip' };
+  if (raw === 'claude-code') return { kind: 'file', file: CLAUDE_CODE_FEED, label: 'Claude Code', emptyIfMissing: true };
+  if (/^https?:\/\//.test(raw)) return { kind: 'url', url: new URL(raw), label: raw };
+  return { kind: 'file', file: path.resolve(raw), label: path.basename(raw) };
+}
+const SOURCES = (arg('source') || process.env.CUBICLE_SOURCE || 'paperclip')
+  .split(',').map((x) => x.trim()).filter(Boolean).map(parseSource);
+if (SOURCES.filter((x) => x.kind === 'paperclip').length > 1) {
+  console.error('Only one Paperclip source is supported.');
+  process.exit(1);
+}
+const HAS_PAPERCLIP = SOURCES.some((x) => x.kind === 'paperclip');
+const FEEDS = SOURCES.filter((x) => x.kind !== 'paperclip');
 
 function get(url, cb, extraHeaders = {}) {
   const client = url.protocol === 'https:' ? https : http;
@@ -117,7 +132,7 @@ function send(res, status, body, type = 'application/json') {
   res.end(body);
 }
 
-function serveFeed(res) {
+function serveFeed(res, source) {
   if (source.kind === 'file') {
     return fs.readFile(source.file, 'utf8', (err, txt) => {
       // No hook has fired yet: that is an empty office, not an error.
@@ -140,19 +155,24 @@ const server = http.createServer((req, res) => {
   if (req.method !== 'GET' && req.method !== 'HEAD') return send(res, 405, '{"error":"read-only"}');
 
   if (url.pathname === '/config.json') {
-    const cfg = source.kind === 'paperclip'
-      ? { source: 'paperclip', paperclipUrl: PAPERCLIP.origin, version: VERSION, build: build() }
-      : { source: 'feed', label: source.label, version: VERSION, build: build() };
-    return send(res, 200, JSON.stringify(cfg));
+    let n = 0;
+    const sources = SOURCES.map((x) => x.kind === 'paperclip'
+      ? { kind: 'paperclip', paperclipUrl: PAPERCLIP.origin }
+      : { kind: 'feed', label: x.label, path: `/api/feed/${n++}` });
+    // `source`/`label`/`paperclipUrl` keep single-source pages from older versions working.
+    const first = sources[0];
+    return send(res, 200, JSON.stringify({ sources, source: first.kind, label: first.label, paperclipUrl: HAS_PAPERCLIP ? PAPERCLIP.origin : undefined, version: VERSION, build: build() }));
   }
 
-  if (url.pathname === '/api/feed') {
-    if (source.kind === 'paperclip') return send(res, 404, '{"error":"no feed source configured"}');
-    return serveFeed(res);
+  const feedMatch = url.pathname.match(/^\/api\/feed(?:\/(\d+))?$/);
+  if (feedMatch) {
+    const feed = FEEDS[Number(feedMatch[1] || 0)];
+    if (!feed) return send(res, 404, '{"error":"no such feed source"}');
+    return serveFeed(res, feed);
   }
 
   if (url.pathname.startsWith('/api/')) {
-    if (source.kind !== 'paperclip') return send(res, 403, '{"error":"not allowed"}');
+    if (!HAS_PAPERCLIP) return send(res, 403, '{"error":"not allowed"}');
     if (!ALLOWED.some((re) => re.test(url.pathname))) return send(res, 403, '{"error":"not allowed"}');
     const upstream = get(new URL(url.pathname, PAPERCLIP), (r) => {
       res.writeHead(r.statusCode, { 'content-type': 'application/json', 'cache-control': 'no-store' });
@@ -171,11 +191,11 @@ const server = http.createServer((req, res) => {
 });
 
 server.listen(PORT, HOST, () => {
-  const reading = source.kind === 'paperclip' ? PAPERCLIP.origin : source.kind === 'file' ? source.file : source.url.href;
-  console.log(`Cubicle is open at http://${HOST}:${PORT}  (reading ${reading}${source.kind === 'paperclip' && TOKEN ? ' with an API key' : ''})`);
+  const reading = SOURCES.map((x) => x.kind === 'paperclip' ? PAPERCLIP.origin + (TOKEN ? ' (with an API key)' : '') : x.kind === 'file' ? x.file : x.url.href);
+  console.log(`Cubicle is open at http://${HOST}:${PORT}  (reading ${reading.join(' + ')})`);
   const loopback = ['127.0.0.1', 'localhost', '::1'].includes(HOST);
-  if (source.kind === 'paperclip' && TOKEN && !loopback) {
+  if (HAS_PAPERCLIP && TOKEN && !loopback) {
     console.warn(`Warning: bound to ${HOST} with a Paperclip API key. Anyone who can reach this port can read what that key can read.`);
   }
-  if (source.kind === 'paperclip') console.log(`No Paperclip yet? Try the demo: http://${HOST}:${PORT}/?demo`);
+  if (HAS_PAPERCLIP) console.log(`No Paperclip yet? Try the demo: http://${HOST}:${PORT}/?demo`);
 });

package/examples/systemd/cubicle.service

@@ -5,6 +5,8 @@ After=paperclipai.service
 [Service]
 # Adjust both paths: your node binary and your Cubicle clone
 ExecStart=/usr/bin/node %h/cubicle/bin/cubicle.js
+# Paperclip and Claude Code in one office instead:
+# ExecStart=/usr/bin/node %h/cubicle/bin/cubicle.js --source paperclip,claude-code
 Environment=CUBICLE_PORT=3200
 Environment=PAPERCLIP_URL=http://127.0.0.1:3100
 # Authenticated Paperclip: a chmod 600 file containing the line PAPERCLIP_TOKEN=pcp_...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caglarutkuguler/cubicle",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "A live pixel-art office for your AI agents — Paperclip, Claude Code, or any JSON feed. Zero dependencies, read-only.",
   "bin": {
     "cubicle": "bin/cubicle.js"

package/public/index.html

@@ -17,13 +17,21 @@
   select { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:3px 6px; font:inherit; }
   #stage { position:relative; width:100%; aspect-ratio:352/208; border:2px solid var(--line); border-radius:8px; overflow:hidden; background:#2a2d3d; }
   canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
-  #labels { position:absolute; inset:0; pointer-events:none; }
+  #labels { position:absolute; inset:0; pointer-events:none; font-size:11px; }
   .lbl { position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; white-space:nowrap; }
-  .bub { background:#fff; color:#1d1f2b; border-radius:9px; padding:2px 7px; font-size:11px; font-weight:600; margin-bottom:3px; box-shadow:0 1px 0 rgba(0,0,0,.3); max-width:210px; overflow:hidden; text-overflow:ellipsis; }
+  .bub { background:#fff; color:#1d1f2b; border-radius:.82em; padding:.18em .64em; font-size:1em; font-weight:600; margin-bottom:.27em; box-shadow:0 1px 0 rgba(0,0,0,.3); max-width:210px; overflow:hidden; text-overflow:ellipsis; }
   .bub.err { background:#ffdede; color:#8a1111; }
   .bub.ok { background:#dcffe2; color:#145c24; }
   .bub.wait { background:#fff1c9; color:#6b4d00; }
-  .name { background:rgba(15,16,26,.78); color:#fff; font-size:11px; font-weight:600; padding:1px 6px; border-radius:5px; }
+  .name { background:rgba(15,16,26,.78); color:#fff; font-size:1em; font-weight:600; padding:.09em .55em; border-radius:.45em; }
+  /* ?kiosk: the office fills the screen, for a TV or a second monitor */
+  body.kiosk { overflow:hidden; cursor:none; }
+  body.kiosk .wrap { max-width:none; padding:0; height:100vh; display:flex; align-items:center; justify-content:center; }
+  body.kiosk header { position:fixed; top:0; left:0; right:0; z-index:2; margin:0; padding:1vh 1.4vw; background:linear-gradient(rgba(10,11,18,.8), rgba(10,11,18,0)); }
+  body.kiosk h1 { font-size:clamp(16px, 1.5vw, 34px); }
+  body.kiosk h1 small, body.kiosk #status { font-size:clamp(12px, 1.05vw, 24px); }
+  body.kiosk #stage { width:min(100vw, calc(100vh * 352 / 208)); border:0; border-radius:0; }
+  body.kiosk #cards, body.kiosk footer, body.kiosk #banner, body.kiosk #company { display:none !important; }
   #banner { display:none; margin-bottom:10px; padding:8px 12px; border-radius:8px; background:#2b2f47; border:1px solid var(--line); color:var(--muted); }
   #cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; margin-top:12px; }
   .card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
@@ -75,6 +83,7 @@
       noCompany: 'No company yet.', summary: (n, r) => `${n} agents · ${r} working`,
       running: 'working', idle: 'idle', error: 'error', paused: 'paused', waiting: 'needs you', noTask: 'no open task assigned',
       done: '✓ done', errBubble: '⚠ error', waitBubble: '✋ needs you',
+      asks: 'waiting for your answer on', needYou: (n) => `${n} need${n === 1 ? 's' : ''} you`,
       chatter: ['☕', 'coffee break', '…', 'hmm', "what's next?"],
       hint: 'Working agents sit at their desks and type; idle agents hang out in the lounge. Refreshes every 4 s.',
       demo: 'Demo mode — fake agents. Remove <code>?demo</code> from the URL to watch your own Paperclip company.',
@@ -87,6 +96,7 @@
       noCompany: 'Henüz şirket yok.', summary: (n, r) => `${n} ajan · ${r} çalışıyor`,
       running: 'çalışıyor', idle: 'boşta', error: 'hata', paused: 'duraklatıldı', waiting: 'sizi bekliyor', noTask: 'atanmış açık görev yok',
       done: '✓ bitirdi', errBubble: '⚠ hata', waitBubble: '✋ sizi bekliyor',
+      asks: 'cevabınızı bekliyor:', needYou: (n) => `${n} sizi bekliyor`,
       chatter: ['☕', 'kahve molası', '…', 'hmm', 'sıradaki iş?'],
       hint: 'Çalışan ajan masasına oturup yazar; boştaki ajan dinlenme alanında dolaşır. 4 saniyede bir yenilenir.',
       demo: "Demo modu: sahte ajanlar. Kendi Paperclip şirketinizi izlemek için adresten <code>?demo</code> kısmını kaldırın.",
@@ -94,12 +104,16 @@
     },
   };
   const params = new URLSearchParams(location.search);
-  const lang = (params.get('lang') || navigator.language || 'en').slice(0, 2).toLowerCase() === 'tr' ? 'tr' : 'en';
+  // Any language with a block in STR is picked from ?lang=xx or the browser language; English otherwise.
+  const wantLang = (params.get('lang') || navigator.language || 'en').slice(0, 2).toLowerCase();
+  const lang = STR[wantLang] ? wantLang : 'en';
   const L = STR[lang];
   document.documentElement.lang = lang;
   // Becomes true in init() as well when the page is served without the Cubicle
   // proxy behind it (e.g. the hosted demo on GitHub Pages).
   let DEMO = params.has('demo');
+  const KIOSK = params.has('kiosk');
+  if (KIOSK) document.body.classList.add('kiosk');
 
   // ---------- setup ----------
   const T = 16, CW = 352, CH = 208;
@@ -131,11 +145,33 @@
   // ---------- data sources ----------
   async function getJSON(u) { const r = await fetch(u, { cache: 'no-store' }); if (!r.ok) throw new Error(r.status); return r.json(); }
 
-  const live = {
-    async companies() { return getJSON('/api/companies'); },
-    async agents(id) { return getJSON(`/api/companies/${id}/agents`); },
-    async issues(id) { return getJSON(`/api/companies/${id}/issues`); },
-  };
+  // Each provider loads { agents, issues, label } from one source. Several providers can
+  // share one office (--source paperclip,claude-code); feed agent ids are namespaced so they
+  // never collide with Paperclip ids.
+  function paperclipProvider() {
+    const p = {
+      kind: 'paperclip', label: 'Paperclip',
+      async load() {
+        if (!company) {
+          companies = await getJSON('/api/companies');
+          if (!companies.length) return { agents: [], issues: [], label: '', note: L.noCompany };
+          const want = params.get('company');
+          company = companies.find((c) => c.issuePrefix === want || c.id === want) || companies[0];
+          if (companies.length > 1) {
+            companySel.hidden = false;
+            companySel.innerHTML = companies.map((c) => `<option value="${esc(c.id)}">${esc(c.name)}</option>`).join('');
+            companySel.value = company.id;
+          }
+        }
+        const [agents, issues] = await Promise.all([
+          getJSON(`/api/companies/${company.id}/agents`), getJSON(`/api/companies/${company.id}/issues`),
+        ]);
+        p.label = company.name;
+        return { agents, issues, label: company.name };
+      },
+    };
+    return p;
+  }
 
   // Generic feed (docs/FEED.md): { company?, agents: [{ id, name, role?, status, task?, error? }] } or a bare array.
   const STATUS_ALIASES = {
@@ -145,30 +181,32 @@
     paused: 'paused', sleeping: 'paused', stopped: 'paused', offline: 'paused',
     waiting: 'waiting', blocked: 'waiting', needs_input: 'waiting', permission: 'waiting',
   };
-  const feed = {
-    label: '',
-    async companies() { return [{ id: 'feed', name: feed.label, issuePrefix: '' }]; },
-    async agents() {
-      const raw = await getJSON('/api/feed');
-      const list = Array.isArray(raw) ? raw : Array.isArray(raw?.agents) ? raw.agents : [];
-      if (raw && raw.company) document.getElementById('co').textContent = raw.company;
-      return list.map((a, i) => {
-        const t = a.task;
-        const task = !t ? null : typeof t === 'string'
-          ? { identifier: '', title: t, url: a.taskUrl || '' }
-          : { identifier: String(t.id ?? t.identifier ?? ''), title: t.title ?? '', url: t.url || '' };
-        return {
-          id: String(a.id ?? a.name ?? i), name: String(a.name ?? a.id ?? `agent ${i + 1}`),
-          title: a.role || a.title || '', createdAt: String(a.since ?? a.createdAt ?? i).padStart(20, '0'),
-          status: STATUS_ALIASES[String(a.status || 'idle').toLowerCase()] || 'idle',
-          errorReason: a.error || null, task,
-        };
-      });
-    },
-    async issues() { return []; },
-  };
+  function feedProvider(path, label) {
+    const p = {
+      kind: 'feed', label, claude: label === 'Claude Code',
+      async load() {
+        const raw = await getJSON(path);
+        const list = Array.isArray(raw) ? raw : Array.isArray(raw?.agents) ? raw.agents : [];
+        if (raw && raw.company) p.label = String(raw.company);
+        const agents = list.map((a, i) => {
+          const t = a.task;
+          const task = !t ? null : typeof t === 'string'
+            ? { identifier: '', title: t, url: a.taskUrl || '' }
+            : { identifier: String(t.id ?? t.identifier ?? ''), title: t.title ?? '', url: t.url || '' };
+          return {
+            id: `${path}#${a.id ?? a.name ?? i}`, name: String(a.name ?? a.id ?? `agent ${i + 1}`),
+            title: a.role || a.title || '', createdAt: String(a.since ?? a.createdAt ?? i).padStart(20, '0'),
+            status: STATUS_ALIASES[String(a.status || 'idle').toLowerCase()] || 'idle',
+            errorReason: a.error || null, task,
+          };
+        });
+        return { agents, issues: [], label: p.label };
+      },
+    };
+    return p;
+  }
 
-  const demo = (() => {
+  function demoProvider() {
     const t0 = Date.now();
     const roster = [
       ['CEO', 'Chief Executive'], ['WebDev', 'Web Developer'], ['SEO', 'SEO & Content'],
@@ -187,23 +225,30 @@
       });
     }
     return {
-      async companies() { return [{ id: 'demo', name: 'Demo Co.', issuePrefix: 'DEMO' }]; },
-      async agents() { tick(); return agents.map((a) => ({ ...a })); },
-      async issues() {
-        return agents.map((a, i) => ({ identifier: `DEMO-${i + 1}`, title: tasks[i], status: 'in_progress', assigneeAgentId: a.id }));
+      kind: 'demo', label: 'Demo Co.',
+      async load() {
+        tick();
+        if (!company) company = { id: 'demo', name: 'Demo Co.', issuePrefix: 'DEMO' };
+        const issues = agents.map((a, i) => ({ identifier: `DEMO-${i + 1}`, title: tasks[i], status: 'in_progress', assigneeAgentId: a.id }));
+        return { agents: agents.map((a) => ({ ...a })), issues, label: 'Demo Co.' };
       },
     };
-  })();
+  }
 
-  let src = live;
+  let providers = [];
 
   async function init() {
     const b = document.getElementById('banner');
     if (!DEMO) {
       try {
         const cfg = await getJSON('/config.json');
-        if (cfg.source === 'feed') { src = feed; feed.label = cfg.label || 'feed'; }
-        else paperclipUrl = cfg.paperclipUrl || '';
+        const list = cfg.sources || [cfg.source === 'feed'
+          ? { kind: 'feed', label: cfg.label, path: '/api/feed' }
+          : { kind: 'paperclip', paperclipUrl: cfg.paperclipUrl }];
+        providers = list.map((x) => {
+          if (x.kind === 'paperclip') { paperclipUrl = x.paperclipUrl || ''; return paperclipProvider(); }
+          return feedProvider(x.path || '/api/feed', x.label || 'feed');
+        });
         // Reload when the server was updated or restarted.
         if (cfg.build) setInterval(async () => {
           try { if ((await getJSON('/config.json')).build !== cfg.build) location.reload(); } catch (_) {}
@@ -216,45 +261,52 @@
     } else {
       b.innerHTML = L.demo; b.style.display = 'block';
     }
-    if (DEMO) src = demo;
+    if (DEMO) providers = [demoProvider()];
     poll();
     setInterval(poll, 4000);
     requestAnimationFrame(frame);
   }
 
+  function failureText(p, e) {
+    const code = Number(e && e.message);
+    if (p.kind === 'feed') return L.feedUnreachable;
+    return (code === 401 || code === 403) ? L.denied(code) : L.unreachable;
+  }
+
   async function poll() {
-    try {
-      if (!company) {
-        companies = await src.companies();
-        if (!companies.length) { statusEl.textContent = L.noCompany; return; }
-        const want = params.get('company');
-        company = companies.find((c) => c.issuePrefix === want || c.id === want) || companies[0];
-        if (companies.length > 1) {
-          companySel.hidden = false;
-          companySel.innerHTML = companies.map((c) => `<option value="${esc(c.id)}">${esc(c.name)}</option>`).join('');
-          companySel.value = company.id;
-        }
-        document.getElementById('co').textContent = company.name;
-      }
-      const [agents, issues] = await Promise.all([src.agents(company.id), src.issues(company.id)]);
-      sync(agents, issues);
-      if (src === feed) {
-        const b = document.getElementById('banner');
-        if (!agents.length) { b.innerHTML = feed.label === 'Claude Code' ? L.emptyClaude : L.empty; b.style.display = 'block'; }
-        else b.style.display = 'none';
-      }
-      const running = agents.filter((a) => a.status === 'running').length;
-      statusEl.textContent = `${L.summary(agents.length, running)} · ${new Date().toLocaleTimeString(lang)}`;
-    } catch (e) {
-      const code = Number(e && e.message);
-      statusEl.textContent = src === feed ? L.feedUnreachable
-        : (code === 401 || code === 403) ? L.denied(code) : L.unreachable;
+    const results = await Promise.allSettled(providers.map((p) => p.load()));
+    const agents = [], issues = [], labels = [], failed = [], notes = [];
+    results.forEach((r, i) => {
+      if (r.status === 'rejected') { failed.push(i); return; }
+      r.value.agents.forEach((a) => { a._src = i; });
+      agents.push(...r.value.agents);
+      issues.push(...r.value.issues);
+      if (r.value.label) labels.push(r.value.label);
+      if (r.value.note) notes.push(r.value.note);
+    });
+    if (failed.length === providers.length) {
+      statusEl.textContent = failureText(providers[0], results[0].reason);
+      return;
     }
+    document.getElementById('co').textContent = labels.join(' · ');
+    sync(agents, issues);
+    if (!DEMO) {
+      const b = document.getElementById('banner');
+      if (!agents.length && providers.some((p) => p.kind === 'feed')) {
+        b.innerHTML = providers.some((p) => p.claude) ? L.emptyClaude : L.empty; b.style.display = 'block';
+      } else b.style.display = 'none';
+    }
+    const running = agents.filter((a) => a.status === 'running').length;
+    const needYou = [...sprites.values()].filter((x) => x.status === 'waiting' || x.ask).length;
+    const down = failed.map((i) => `⚠ ${providers[i].label}: ${failureText(providers[i], results[i].reason)}`);
+    statusEl.textContent = [
+      notes.length && !agents.length ? notes.join(' ') : L.summary(agents.length, running),
+      needYou ? L.needYou(needYou) : '', ...down, new Date().toLocaleTimeString(lang),
+    ].filter(Boolean).join(' · ');
   }
 
   companySel.addEventListener('change', () => {
     company = companies.find((c) => c.id === companySel.value);
-    document.getElementById('co').textContent = company.name;
     for (const s of sprites.values()) s.el.remove();
     sprites.clear();
     const u = new URL(location.href); u.searchParams.set('company', company.issuePrefix); history.replaceState(null, '', u);
@@ -270,8 +322,20 @@
     return null;
   }
 
+  // Paperclip: an open issue whose review is waiting on the board (a pending question or
+  // interaction for a human) means the agent needs you, even though Paperclip reports it idle.
+  function askingBoard(agentId, issues) {
+    for (const i of issues) {
+      if (i.assigneeAgentId !== agentId || ['done', 'cancelled'].includes(i.status)) continue;
+      const paths = (i.reviewAttention && i.reviewAttention.paths) || [];
+      const p = paths.find((x) => /board|user|human/i.test(String(x && x.responder || '')));
+      if (p) return { issue: i, reason: String(p.label || '') };
+    }
+    return null;
+  }
+
   function sync(agents, issues) {
-    const sorted = [...agents].sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    const sorted = [...agents].sort((a, b) => ((a._src || 0) - (b._src || 0)) || String(a.createdAt).localeCompare(String(b.createdAt)));
     const seen = new Set();
     sorted.forEach((a, idx) => {
       seen.add(a.id);
@@ -300,6 +364,9 @@
       s.status = a.status;
       s.error = a.errorReason || '';
       s.task = a.task !== undefined ? a.task : currentTask(a.id, issues);
+      s.waitReason = '';
+      s.ask = a.task === undefined && a.status !== 'error' ? askingBoard(a.id, issues) : null;
+      if (s.ask && a.status === 'idle') { s.status = 'waiting'; s.task = s.ask.issue; s.waitReason = s.ask.reason; }
       if (s.prevStatus === 'running' && s.status === 'idle') setBubble(s, L.done, 'ok', 6);
       s.prevStatus = s.status;
       s.el.querySelector('.name').textContent = s.name;
@@ -315,7 +382,8 @@
   function taskLink(t) {
     const label = esc(t.identifier);
     if (t.url) return `<a href="${esc(t.url)}" target="_blank" rel="noopener">${label || '↗'}</a>`;
-    if (!paperclipUrl || DEMO) return label;
+    // Only Paperclip issues (which carry assigneeAgentId) link into Paperclip.
+    if (!paperclipUrl || DEMO || !company || !('assigneeAgentId' in t)) return label;
     return `<a href="${esc(paperclipUrl)}/${esc(company.issuePrefix)}/issues/${esc(t.identifier)}" target="_blank" rel="noopener">${label}</a>`;
   }
 
@@ -324,7 +392,9 @@
     cardsEl.innerHTML = list.map((s) => {
       const t = s.task;
       const taskHtml = t ? `${taskLink(t)} ${esc(t.title)}` : `<span style="color:var(--muted)">${L.noTask}</span>`;
-      const err = s.status === 'error' && s.error ? `<div class="st" style="color:#ffb3b8">${esc(s.error)}</div>` : '';
+      const err = s.status === 'error' && s.error ? `<div class="st" style="color:#ffb3b8">${esc(s.error)}</div>`
+        : s.status === 'waiting' && s.waitReason ? `<div class="st" style="color:#ffe08a">${esc(s.waitReason)}</div>`
+        : s.ask ? `<div class="st" style="color:#ffe08a">✋ ${L.asks} ${taskLink(s.ask.issue)} ${esc(s.ask.issue.title)}</div>` : '';
       return `<div class="card"><div class="top"><span class="sw" style="background:${s.shirt}"></span><b>${esc(s.name)}</b></div>
         <div class="role">${esc(s.role)}</div>
         <div class="st"><span class="pill p-${esc(s.status)}">${esc(L[s.status] || s.status)}</span>${taskHtml}</div>${err}</div>`;
@@ -472,14 +542,20 @@
 
   function placeLabels(now) {
     const k = cv.clientWidth / CW;
+    // Keep bubbles narrower than the gap between neighbouring desks so they never overlap.
+    const bubMax = Math.max(80, Math.floor(3.3 * T * k - 6)) + 'px';
+    // In kiosk mode names and bubbles grow with the screen (11px at the default ~3x scale).
+    if (KIOSK) labelsEl.style.fontSize = Math.max(11, Math.round(11 * k / 3)) + 'px';
     for (const s of sprites.values()) {
       s.el.style.left = (s.x * k) + 'px';
       s.el.style.top = ((s.y - 20) * k) + 'px';
       const b = s.el.querySelector('.bub');
+      b.style.maxWidth = bubMax;
       let text = null, cls = '';
       if (s.bubble && now < s.bubbleUntil) { text = s.bubble; cls = s.bubbleClass; }
       else if (s.status === 'error' && s.seated) { text = L.errBubble; cls = 'err'; }
       else if (s.status === 'waiting' && s.seated) { text = L.waitBubble; cls = 'wait'; }
+      else if (s.typing && s.ask && Math.floor(now / 3) % 2) { text = '✋ ' + (s.ask.issue.identifier || L.waiting); cls = 'wait'; }
       else if (s.typing && s.task) text = '⌨ ' + (s.task.identifier || s.task.title);
       else if (s.status === 'paused') text = 'zZ';
       if (text) { b.textContent = text; b.className = 'bub ' + cls; b.style.display = ''; }