agent-dag 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,10 +3,10 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>ccgraph</title>
6
+ <title>agent-dag</title>
7
7
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='84' font-size='84'%3E%E2%97%89%3C/text%3E%3C/svg%3E" />
8
- <script type="module" crossorigin src="/assets/index-ChObhKsa.js"></script>
9
- <link rel="stylesheet" crossorigin href="/assets/index-CbRJ5PCq.css">
8
+ <script type="module" crossorigin src="/assets/index-BgTeq5uZ.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index-BbbosdE2.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agent-dag",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Live DAG of Claude Code agents — watch parallel subagents fork, call tools, and return on one calm canvas.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -191,7 +191,21 @@ async function sweepStaleDiscovery() {
191
191
  return removed;
192
192
  }
193
193
 
194
- export async function startServer({ port = 4317, host = "127.0.0.1", persist = null } = {}) {
194
+ function randomPort(min, max) {
195
+ return Math.floor(Math.random() * (max - min + 1)) + min;
196
+ }
197
+
198
+ async function tryListen(server, port, host) {
199
+ return new Promise((res, rej) => {
200
+ server.once("error", rej);
201
+ server.listen(port, host, () => {
202
+ server.removeListener("error", rej);
203
+ res();
204
+ });
205
+ });
206
+ }
207
+
208
+ export async function startServer({ port = 4317, host = "127.0.0.1", persist = null, portRange = [4318, 4400] } = {}) {
195
209
  const removed = await sweepStaleDiscovery();
196
210
  if (removed > 0) console.log(` swept ${removed} stale discovery file(s)`);
197
211
  if (persist) {
@@ -227,13 +241,20 @@ export async function startServer({ port = 4317, host = "127.0.0.1", persist = n
227
241
  send(res, 405, { error: "method not allowed" });
228
242
  });
229
243
 
230
- return new Promise((resolveStart, rejectStart) => {
231
- server.once("error", rejectStart);
232
- server.listen(port, host, () => {
233
- server.removeListener("error", rejectStart);
234
- resolveStart(server);
235
- });
236
- });
244
+ // Try requested port first, then up to 10 random ports from portRange.
245
+ const candidates = [port];
246
+ for (let i = 0; i < 10; i++) candidates.push(randomPort(portRange[0], portRange[1]));
247
+
248
+ for (const candidate of candidates) {
249
+ try {
250
+ await tryListen(server, candidate, host);
251
+ return server;
252
+ } catch (err) {
253
+ if (err && err.code === "EADDRINUSE") continue;
254
+ throw err;
255
+ }
256
+ }
257
+ throw Object.assign(new Error(`all ports tried — none available`), { code: "EADDRINUSE" });
237
258
  }
238
259
 
239
260
  // Allow running this file directly for dev.
@@ -1 +0,0 @@
1
- .react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:root,:root[data-theme=dark]{--bg: #0b0c10;--bg-soft: #0f1116;--panel: #14161b;--line: #1f2229;--line-soft: #1a1c22;--text: #d8dae0;--muted: #7e828c;--muted-dim: #50535b;--accent: #7dd3fc;--accent-dim: #38bdf850;--ok: #86efac;--warn: #fcd34d;--err: #fca5a5;--inflight: #f0abfc;--shadow-1: 0 6px 18px rgba(0,0,0,.25);--shadow-2: 0 10px 24px rgba(0,0,0,.32);--node-grad: linear-gradient(180deg, var(--panel), var(--bg-soft));--topbar-grad: linear-gradient(to bottom, var(--panel), var(--bg-soft));--bg-grid-1: rgba(125,211,252,.06);--bg-grid-2: rgba(240,171,252,.05);--grid-line: #1a1d24;--minimap-mask: rgba(11,12,16,.85);color-scheme:dark}:root[data-theme=light]{--bg: #f7f8fb;--bg-soft: #ffffff;--panel: #ffffff;--line: #dfe2e8;--line-soft: #ebedf1;--text: #1c1f26;--muted: #6a6f7a;--muted-dim: #aab0ba;--accent: #0284c7;--accent-dim: #38bdf855;--ok: #16a34a;--warn: #b45309;--err: #dc2626;--inflight: #a21caf;--shadow-1: 0 4px 14px rgba(15,23,42,.06);--shadow-2: 0 10px 24px rgba(15,23,42,.1);--node-grad: linear-gradient(180deg, #ffffff, #f5f7fb);--topbar-grad: linear-gradient(to bottom, #ffffff, #f3f5f9);--bg-grid-1: rgba(2,132,199,.05);--bg-grid-2: rgba(162,28,175,.04);--grid-line: #e6e8ed;--minimap-mask: rgba(247,248,251,.85);color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--bg);border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:var(--muted-dim)}*{scrollbar-color:var(--line) transparent;scrollbar-width:thin}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}button:focus-visible,.search input:focus-visible{outline-offset:1px}.app{display:grid;grid-template-columns:1fr 360px;grid-template-rows:52px auto 1fr;height:100vh}.canvas-wrap{grid-column:1;grid-row:3}.detail{grid-column:2;grid-row:2 / -1}.topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--topbar-grad);border-bottom:1px solid var(--line);-webkit-user-select:none;user-select:none}.topbar .brand{font-weight:600;letter-spacing:.02em;color:var(--text);display:flex;align-items:center;gap:10px;font-size:14px}.topbar .brand .logo{width:14px;height:14px;border-radius:4px;background:conic-gradient(from 220deg,#7dd3fc,#f0abfc,#86efac,#7dd3fc);box-shadow:0 0 12px #7dd3fc73}.topbar .brand .v{color:var(--muted);font-weight:400;font-size:11px;margin-left:2px}.topbar .actions{display:flex;gap:8px;align-items:center}.topbar .status{color:var(--muted);font-size:12px;margin-right:6px;display:inline-flex;align-items:center;gap:14px}.topbar .status .stat{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}.topbar .status .stat .lbl{color:var(--muted)}.topbar .status .stat+.stat:before{content:"";display:inline-block;width:1px;height:12px;background:var(--line);margin-right:10px;position:relative;top:1px}.topbar .status .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);font-size:11px}.topbar .status .pill.live{color:var(--ok);border-color:#86efac40}.topbar .status .pill.live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse 1.6s ease-in-out infinite}.topbar .status .pill.dead{color:var(--err);border-color:#fca5a559;background:#fca5a50f}.topbar .status .pill.dead:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--err);box-shadow:0 0 6px var(--err)}.topbar .status .count{color:var(--text);font-variant-numeric:tabular-nums}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}button.btn{background:transparent;color:var(--text);border:1px solid var(--line);padding:6px 12px;border-radius:6px;cursor:pointer;font:inherit;font-size:12px;transition:border-color .12s,color .12s,background .12s}button.btn:hover{border-color:var(--accent-dim);color:var(--accent)}button.btn:active{transform:translateY(1px)}button.btn.primary{background:var(--accent-dim);color:var(--text);border-color:var(--accent-dim)}button.btn.warn{border-color:#fcd34d80;color:var(--warn)}button.btn.warn:hover{border-color:var(--warn);color:var(--warn)}button.btn.icon-btn{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}.search{position:relative;display:inline-flex;align-items:center;margin-right:4px}.search-icon{position:absolute;left:8px;color:var(--muted);font-size:14px;pointer-events:none}.search input{background:var(--bg-soft);color:var(--text);border:1px solid var(--line);padding:6px 26px 6px 24px;border-radius:6px;font:inherit;font-size:12px;min-width:220px;outline:none;transition:border-color .12s,box-shadow .12s}.search input::placeholder{color:var(--muted)}.search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.search-clear{position:absolute;right:4px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 6px;line-height:1}.search-clear:hover{color:var(--text)}.search-kbd{position:absolute;right:6px;pointer-events:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:16px;height:16px}.search input:focus~.search-kbd{opacity:0}.conn-banner{grid-column:1;grid-row:2;display:flex;align-items:center;gap:10px;padding:8px 18px;background:linear-gradient(90deg,rgba(252,165,165,.12),transparent);border-bottom:1px solid rgba(252,165,165,.3);color:var(--err);font-size:12.5px;font-weight:500;animation:fadeIn .2s ease}.conn-banner .conn-dot{width:7px;height:7px;border-radius:50%;background:var(--err);box-shadow:0 0 8px var(--err);animation:pulse 1.2s infinite}.react-flow__node.rf-dim{opacity:.22;filter:saturate(.4)}.react-flow__node.rf-dim:hover{opacity:.6}.react-flow__node.rf-exiting{pointer-events:none}.react-flow__node.rf-exiting .agent-node{animation:nodeExit .6s cubic-bezier(.55,0,.55,1) forwards}@keyframes nodeExit{0%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)}60%{opacity:.4;filter:blur(2px) saturate(.4)}to{opacity:0;filter:blur(6px) saturate(0);transform:scale(.85)}}.react-flow__edge.rf-edge-exiting .react-flow__edge-path{animation:edgeExit .6s ease forwards}@keyframes edgeExit{to{opacity:0;stroke-dashoffset:40}}.canvas-wrap{position:relative;background:radial-gradient(1200px 600px at 60% -10%,var(--bg-grid-1),transparent 60%),radial-gradient(1000px 500px at 10% 110%,var(--bg-grid-2),transparent 60%),var(--bg);overflow:hidden}.detail{background:var(--panel);border-left:1px solid var(--line);padding:18px;overflow:auto;display:flex;flex-direction:column;gap:12px}.detail h3{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}.detail .empty{color:var(--muted);font-style:italic}.detail .hint{border:1px dashed var(--line);border-radius:8px;padding:12px;color:var(--muted);font-size:12px;line-height:1.55;background:var(--bg-soft)}.detail .hint code{background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:11.5px;color:var(--text)}.detail .row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:12px;gap:12px}.detail .row:last-child{border-bottom:none}.detail .row .k{color:var(--muted)}.detail .row .v{color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;max-width:220px;white-space:nowrap}.detail .tool{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:5px 0;color:var(--text);display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line-soft)}.detail .tool:last-child{border-bottom:none}.detail .tool .name{display:inline-flex;align-items:center;gap:8px}.detail .tool .name .status-dot{display:inline-block;width:6px;height:6px;border-radius:50%}.detail .tool .name .status-dot.inflight{background:var(--inflight);animation:pulse 1.2s infinite}.detail .tool .name .status-dot.done{background:var(--ok)}.detail .tool .name .status-dot.err{background:var(--err)}.react-flow__renderer{background:transparent}.react-flow__node{transition:transform .32s cubic-bezier(.22,1,.36,1);animation:nodeSpawn .36s cubic-bezier(.22,1,.36,1) both}@keyframes nodeSpawn{0%{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}.react-flow__node.dragging,.react-flow__node:active{transition:none}.react-flow__edge-path{stroke:var(--accent-dim);stroke-width:1.5;transition:stroke .2s ease}.react-flow__edge.animated .react-flow__edge-path{stroke:var(--inflight);stroke-dasharray:5;animation:dashflow .8s linear infinite}@keyframes dashflow{to{stroke-dashoffset:-10}}.react-flow__attribution{display:none}.react-flow__controls{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:none;overflow:hidden}.react-flow__controls-button{background:var(--panel);color:var(--text);border-bottom:1px solid var(--line);fill:var(--text)}.react-flow__controls-button:hover{background:var(--bg-soft)}.agent-node{position:relative;min-width:220px;max-width:260px;padding:10px 12px 10px 16px;background:var(--node-grad);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:12px;box-shadow:var(--shadow-1);transition:border-color .2s ease,box-shadow .2s ease;overflow:hidden;will-change:transform}.agent-node:hover{box-shadow:var(--shadow-2)}.agent-node.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim),0 10px 24px #0006}.agent-node.state-active{border-color:var(--inflight);box-shadow:0 0 0 1px #f0abfc73,0 8px 22px #f0abfc2e}.agent-node.state-done{border-color:#86efac80}.agent-node.state-err{border-color:#fca5a599}.agent-node .accent-stripe{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);opacity:.7}.agent-node .head{display:flex;align-items:center;justify-content:space-between;gap:8px}.agent-node .title{display:flex;align-items:center;gap:8px;min-width:0}.agent-node .title .label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.agent-node .time{font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.state-pill{display:inline-flex;align-items:center;padding:1px 7px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;border:1px solid transparent}.state-pill.state-active{color:var(--inflight);border-color:#f0abfc66;background:#f0abfc14}.state-pill.state-active:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--inflight);box-shadow:0 0 6px var(--inflight);margin-right:5px;animation:pulse 1.2s infinite}.state-pill.state-done{color:var(--ok);border-color:#86efac59;background:#86efac14}.state-pill.state-err{color:var(--err);border-color:#fca5a566;background:#fca5a514}.agent-node .sub{color:var(--muted);font-size:11px;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agent-node .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;min-height:18px;align-items:center}.tool-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;padding:2px 6px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--text);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.tool-chip.inflight{border-color:#f0abfc80;color:var(--inflight);background:#f0abfc0f;animation:pulse 1.4s infinite}.tool-chip.done{border-color:#86efac40;color:var(--ok)}.tool-chip.err{border-color:#fca5a566;color:var(--err);background:#fca5a50f}.chips-empty{color:var(--muted-dim);font-size:11px;font-style:italic}.chips-more{color:var(--muted);font-size:10.5px;padding:2px 4px}.agent-node .meta{color:var(--muted);font-size:11px;margin-top:8px;display:flex;gap:12px}.agent-node .meta b{color:var(--text);font-weight:600}.agent-node .meta .inflight-meta,.agent-node .meta .inflight-meta b{color:var(--inflight)}.agent-node .meta .tokens-meta{color:var(--accent);margin-left:auto}.agent-node .meta .tokens-meta b{color:var(--accent)}.tokens-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:8px 10px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.tokens-grid>div{display:flex;justify-content:space-between;align-items:baseline}.tokens-grid .k{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}.tokens-grid b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}.agent-node.synthetic{border-style:dashed;opacity:.92}.agent-node .synth-tag{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:10px;font-weight:700;margin-left:4px}.spawn-badge{display:inline-flex;align-items:center;padding:1px 6px;margin-left:6px;border-radius:999px;border:1px solid var(--line);color:var(--accent);background:var(--bg-soft);font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}.now-running{margin-top:8px;padding:5px 8px;border-radius:6px;background:linear-gradient(90deg,#f0abfc1a,#7dd3fc14);border:1px solid rgba(240,171,252,.3);display:flex;align-items:center;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text)}:root[data-theme=light] .now-running{background:linear-gradient(90deg,#a21caf12,#0284c70f);border-color:#a21caf4d}.now-running .now-dot{width:6px;height:6px;border-radius:50%;background:var(--inflight);box-shadow:0 0 8px var(--inflight);animation:pulse 1.1s infinite}.now-running .now-label{text-transform:uppercase;letter-spacing:.08em;color:var(--inflight);font-size:9.5px;font-weight:700}.now-running .now-tool{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-weight:600}.now-running .now-time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10.5px}.react-flow__edge-textbg{fill:var(--bg-soft);fill-opacity:.9}.react-flow__edge-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;fill:var(--text)}.session-clusters{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.cluster-card{position:absolute;border-radius:18px;border:1px dashed transparent;transition:opacity .2s ease,left .32s cubic-bezier(.22,1,.36,1),top .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),height .32s cubic-bezier(.22,1,.36,1);overflow:visible}.cluster-label{position:absolute;top:6px;left:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transform-origin:left top;padding:2px 8px;border-radius:5px;background:var(--bg-soft);border:1px solid var(--line)}.prompts{display:flex;flex-direction:column;gap:8px}.prompt-entry{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg-soft)}.prompt-time{color:var(--muted);font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}.prompt-text{font-size:12.5px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}button.tool.clickable{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-soft);text-align:left;cursor:pointer;color:var(--text);font:inherit;padding:6px 0;display:flex;align-items:center;gap:8px;justify-content:space-between;border-radius:4px;transition:background .12s}button.tool.clickable{padding-left:6px;padding-right:6px}button.tool.clickable:hover{background:var(--bg-soft)}button.tool.clickable:last-child{border-bottom:none}.shortcuts{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}.shortcuts .sc{display:contents}.shortcuts .sc kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:600;color:var(--text);background:var(--bg-soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:2px 7px;text-align:center;min-width:38px}.shortcuts .sc span{color:var(--muted);font-size:12px}.empty-hero .hint-row{margin-top:14px;font-size:12px;opacity:.75}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0506098c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .14s ease-out}:root[data-theme=light] .modal-backdrop{background:#0f172a4d}.modal{width:min(820px,92vw);max-height:82vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2),0 0 0 1px #7dd3fc1a;overflow:hidden;animation:popIn .18s cubic-bezier(.22,1,.36,1)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft)}.modal-title{display:flex;align-items:center;gap:10px;min-width:0}.modal-title .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.modal-title .status-dot.inflight{background:var(--inflight);animation:pulse 1.2s infinite}.modal-title .status-dot.done{background:var(--ok)}.modal-title .status-dot.err{background:var(--err)}.modal-tool-name{font-weight:600;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.modal-tool-id{color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.modal-actions{display:flex;align-items:center;gap:8px}.modal-dur{color:var(--muted);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.modal-body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:16px}.modal-section h4{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}.modal-section .err-tag{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;color:var(--err);background:#fca5a51a;border:1px solid rgba(252,165,165,.3)}.modal-section pre{margin:0;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}}.empty-hero{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:var(--muted);-webkit-user-select:none;user-select:none;max-width:520px}.empty-hero .orbit-stack{position:relative;width:260px;height:260px;margin:0 auto 28px}.empty-hero .orbit{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1px dashed rgba(125,211,252,.18)}.empty-hero .orbit.r1{top:0;right:0;bottom:0;left:0;animation:spin 22s linear infinite}.empty-hero .orbit.r2{top:30px;right:30px;bottom:30px;left:30px;animation:spin 14s linear infinite reverse;border-color:#f0abfc33}.empty-hero .orbit.r3{top:60px;right:60px;bottom:60px;left:60px;animation:spin 9s linear infinite;border-color:#86efac38}.empty-hero .orbit .dot{position:absolute;width:14px;height:14px;border-radius:50%;top:-7px;left:50%;margin-left:-7px}.empty-hero .orbit.r1 .dot{background:var(--accent);box-shadow:0 0 22px var(--accent)}.empty-hero .orbit.r2 .dot{background:var(--inflight);box-shadow:0 0 22px var(--inflight);width:12px;height:12px;margin-left:-6px;top:-6px}.empty-hero .orbit.r3 .dot{background:var(--ok);box-shadow:0 0 22px var(--ok);width:10px;height:10px;margin-left:-5px;top:-5px}.empty-hero .orbit .dot.b{top:auto;bottom:-7px}.empty-hero .orbit.r2 .dot.b{bottom:-6px}.empty-hero .orbit.r3 .dot.b{bottom:-5px}.empty-hero .core{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#f0abfc,#7dd3fc 55%,#14161b);box-shadow:0 0 28px #f0abfc8c,0 0 64px #7dd3fc59;animation:corepulse 2.6s ease-in-out infinite}.empty-hero .core:after{content:"";position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.06);animation:corewave 2.6s ease-out infinite}@keyframes corepulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.15)}}@keyframes corewave{0%{transform:scale(.85);opacity:.6}to{transform:scale(1.6);opacity:0}}.empty-hero h2{color:var(--text);font-size:18px;font-weight:600;margin:0 0 8px;letter-spacing:.01em}.empty-hero p{margin:0;font-size:13px;line-height:1.65}.empty-hero code{background:var(--bg-soft);border:1px solid var(--line);padding:2px 7px;border-radius:5px;color:var(--text);font-size:12.5px}@keyframes spin{to{transform:rotate(360deg)}}