@caglarutkuguler/cubicle 0.4.0 → 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 |
 
@@ -95,6 +101,8 @@ 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

package/bin/cubicle.js

@@ -43,7 +43,7 @@ if (process.argv.includes('--help') || process.argv.includes('-h')) {
 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)
@@ -92,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;
@@ -122,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.
@@ -145,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' });
@@ -176,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.4.0",
+  "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

@@ -145,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 = {
@@ -159,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'],
@@ -201,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 (_) {}
@@ -230,46 +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;
-      const needYou = [...sprites.values()].filter((x) => x.status === 'waiting' || x.ask).length;
-      statusEl.textContent = `${L.summary(agents.length, running)}${needYou ? ' · ' + L.needYou(needYou) : ''} · ${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);
@@ -298,7 +335,7 @@
   }
 
   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);
@@ -345,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>`;
   }