/* Agent Network — full-bleed bubble graph view that replaces the panes host when the user picks "Agent Network" in the sidebar. Lives at workspace grid-row 2 alongside the panes host; toggled via a `data-view` attribute on . */ .agent-network { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(900px 600px at 70% -10%, rgba(124, 140, 255, 0.12), transparent 65%), radial-gradient(800px 500px at -10% 110%, rgba(94, 226, 160, 0.08), transparent 65%), var(--bg); } .agent-network[hidden] { display: none; } /* When the agent-network view is active, hide tab-bar and terminal-only controls in the header. The machine chip stays so the user can still switch machines from this view. */ body[data-view="agent-network"] .tabs-host { visibility: hidden; } body[data-view="agent-network"] #claude-toggles, body[data-view="agent-network"] #voice-indicator, body[data-view="agent-network"] #new-tab-btn, body[data-view="agent-network"] #reconnect-btn { display: none; } body[data-view="agent-network"] .panes-host { display: none; } .agent-network__chrome { position: absolute; top: 12px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 16px; pointer-events: none; } .agent-network__title { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--fg-muted); } .agent-network__legend { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--fg-muted); } .legend-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .legend-dot--working { background: var(--success); box-shadow: 0 0 6px var(--success); } .legend-dot--idle { background: var(--fg-dim); box-shadow: 0 0 4px rgba(110, 118, 137, 0.6); } .legend-dot--broker { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .legend-dot--claim { background: var(--warning); box-shadow: 0 0 4px var(--warning); } /* Discoverable +/- zoom controls; pinch and wheel still work, but pinch is invisible on first touch and the wheel doesn't exist on phones. */ .agent-network__zoom { display: flex; gap: 6px; pointer-events: auto; } /* Same M3 pattern as .tab__close: 44×44 hit area (WCAG 2.5.5) with a 32×32 visible chip. Because these buttons have a real border (not just a background like .tab__close), background-clip:content-box alone would leave the border at the outer 44×44 rim — so the chip is drawn by ::before at inset:6, and the outer button is transparent. Result: identical visual to before, hit target reliably tappable on touch where pinch is invisible. */ .agent-network__zoom button { position: relative; width: 44px; height: 44px; min-width: 44px; background: transparent; border: 0; color: var(--fg); font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .agent-network__zoom button::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-1); border: 1px solid var(--border); transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); /* Behind the +/- glyph; the button has position:relative so this z-index only orders within the button's own stacking context. */ z-index: -1; } .agent-network__zoom button:hover::before { background: var(--surface-2); } .agent-network__zoom button:active::before { transform: scale(0.94); } .agent-network__status { margin-left: auto; font-size: 12px; color: var(--fg-dim); font-family: var(--font-mono); padding: 3px 9px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border); pointer-events: auto; } .agent-network__status[data-state="ok"] { color: var(--success); border-color: rgba(94, 226, 160, 0.4); } .agent-network__status[data-state="warn"] { color: var(--warning); border-color: rgba(247, 200, 115, 0.4); } .agent-network__status[data-state="error"] { color: var(--danger); border-color: rgba(255, 122, 138, 0.4); } .agent-network__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } .agent-network__svg.is-panning { cursor: grabbing; } /* Nodes ---------------------------------------------------------------- */ .an-node { cursor: grab; } .an-node.is-dragging { cursor: grabbing; } .an-node__halo { fill: none; opacity: 0.35; transition: opacity 200ms var(--ease); } .an-node__core { stroke: var(--border-strong); stroke-width: 1.5; transition: filter 200ms var(--ease); } .an-node__label { fill: var(--fg); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; text-anchor: middle; pointer-events: none; user-select: none; } .an-node__sub { fill: var(--fg-dim); font-family: var(--font-mono); font-size: 10.5px; text-anchor: middle; pointer-events: none; user-select: none; } /* Broker hub */ .an-node--broker .an-node__core { fill: var(--an-bubble-color, rgba(124, 140, 255, 0.18)); stroke: var(--accent-strong); } .an-node--broker .an-node__halo { stroke: var(--accent); stroke-width: 1; } /* Agent — working */ .an-node--agent.is-working .an-node__core { fill: var(--an-bubble-color, rgba(94, 226, 160, 0.22)); stroke: var(--success); } .an-node--agent.is-working .an-node__halo { stroke: var(--success); stroke-width: 1.2; animation: an-pulse 2.4s var(--ease) infinite; } /* Agent — idle */ .an-node--agent.is-idle .an-node__core { fill: var(--an-bubble-color, rgba(110, 118, 137, 0.18)); stroke: var(--fg-dim); } .an-node--agent.is-idle .an-node__halo { stroke: rgba(110, 118, 137, 0.5); stroke-width: 1; } /* Keyboard focus ring for interactive bubbles — the bubble menu is reachable via Enter/Space/ContextMenu on the focused node, so users need to see which bubble is currently focused. */ .an-node--agent:focus, .an-node--broker:focus { outline: none; } .an-node--agent:focus-visible .an-node__halo, .an-node--broker:focus-visible .an-node__halo { stroke: var(--fg); stroke-width: 2; opacity: 0.95; } /* Claim satellite — tucked behind its agent by default, fades in when the agent is being hovered or click-held. The outer carries a JS-set `transform="translate(x y)"` that we MUST NOT clobber with a CSS transform — otherwise every claim collapses to (0,0) and they pile up at the top-left when revealed. Use opacity-only fade here; the inner circles handle the visual "pop" via CSS scale on them. */ .an-node--claim { opacity: 0; transition: opacity 180ms var(--ease); pointer-events: none; } .an-node--claim .an-node__halo, .an-node--claim .an-node__core { transform-origin: center; transform: scale(0.55); transition: transform 220ms var(--ease); } .an-node--claim.is-hot { opacity: 1; pointer-events: auto; } .an-node--claim.is-hot .an-node__halo, .an-node--claim.is-hot .an-node__core { transform: scale(1); } .an-node--claim .an-node__core { fill: rgba(247, 200, 115, 0.18); stroke: var(--warning); stroke-width: 1; } .an-node--claim .an-node__halo { stroke: var(--warning); stroke-width: 0.8; opacity: 0.25; } /* Edges to a hidden claim are also dimmed so we don't see threads floating to nothing. Brought back to full when the agent is hot. */ .an-edge--claim { opacity: 0; transition: opacity 180ms var(--ease); } .an-edge--claim.is-hot { opacity: 0.5; } @keyframes an-pulse { 0%, 100% { opacity: 0.25; transform-origin: center; } 50% { opacity: 0.55; } } /* Edges */ .an-edge { stroke-linecap: round; fill: none; } .an-edge--broker { stroke: var(--accent); stroke-width: 1.5; opacity: 0.45; } .an-edge--claim { stroke: var(--warning); stroke-width: 1; stroke-dasharray: 3 4; } /* Red beam projectile — drawn when an agent sends a prompt to a peer. The visible "beam" is a single short stroke-dash whose position along the path is driven from JS each frame (see _updateFlightPath) — slides sender→receiver over ~1.5 s, tracks live agent motion. Multi-stop drop-shadow gives the glow halo without an SVG element. */ .an-edge--flight { stroke: #ff3a4f; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 80, 100, 0.95)) drop-shadow(0 0 9px rgba(255, 50, 80, 0.6)) drop-shadow(0 0 18px rgba(255, 40, 70, 0.3)); pointer-events: none; /* stroke-dasharray + stroke-dashoffset are set per-frame from JS; no CSS animation, so simultaneous beams stay phase-independent. */ } /* Receiver node briefly flashes red when a beam lands. JS adds the .an-node--hit class on arrival; CSS does the brief glow + fade-out. Outline `red`, then fade — explicit `from` keeps the start state crisp instead of relying on the inherited filter. */ /* Duration is set per-flash via --an-hit-duration so the reduced-motion spawn path can request a shorter glow (350 ms) without needing a second class. Default of 800 ms matches the standard beam landing. */ .an-node--hit .an-node__core { animation: an-hit-core var(--an-hit-duration, 800ms) ease-out forwards; } .an-node--hit .an-node__halo { animation: an-hit-halo var(--an-hit-duration, 800ms) ease-out forwards; } @keyframes an-hit-core { 0% { stroke: #ff3a4f; filter: drop-shadow(0 0 8px rgba(255, 60, 90, 0.95)) drop-shadow(0 0 22px rgba(255, 40, 70, 0.7)); } 100% { filter: none; } } @keyframes an-hit-halo { 0% { stroke: #ff3a4f; opacity: 0.9; } 100% { opacity: 0; } } /* Empty state -- when the active machine has no agents at all */ .agent-network__empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--fg-muted); gap: 6px; padding: 24px; pointer-events: none; } .agent-network__empty[hidden] { display: none; } .agent-network__empty-icon { font-size: 56px; color: var(--fg-dim); } .agent-network__empty h2 { color: var(--fg); font-size: 18px; font-weight: 600; } .agent-network__empty p { font-size: 13px; max-width: 440px; line-height: 1.5; } .agent-network__empty code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; } /* ---------------------------------------------------------------------- Click-and-hold "terminal bubble". The user holds left-click (or double-clicks) on an agent bubble; the corresponding shell-cell is re-parented in here so they can see + type into the live PTY. Styled like an oversized agent bubble so it feels part of the network graph instead of a modal layer. No backdrop dim — the rest of the bubbles stay visible behind it. ---------------------------------------------------------------------- */ .an-terminal-overlay { /* Positioned by JS (left/top/width/height) each frame — pinned above the agent it belongs to and sized to 2x that agent's bubble. The whole rect is the bubble body. */ position: absolute; display: flex; flex-direction: column; z-index: 30; background: rgba(7, 9, 13, 0.92); border: 1px solid rgba(124, 140, 255, 0.55); border-radius: 18px; box-shadow: 0 0 0 1px rgba(124, 140, 255, 0.15) inset, 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 40px rgba(124, 140, 255, 0.22); animation: an-overlay-pop 160ms var(--ease); overflow: hidden; } .an-terminal-overlay[hidden] { display: none; } @keyframes an-overlay-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .an-terminal-overlay__chrome { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 5px; background: linear-gradient(180deg, rgba(124, 140, 255, 0.10), transparent); } .an-terminal-overlay__title { color: var(--fg); font-family: var(--font-ui); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .an-terminal-overlay__sub { color: var(--fg-dim); font-size: 10.5px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; } .an-terminal-overlay__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .an-terminal-overlay__close, .an-terminal-overlay__fontbtn { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 999px; padding: 2px 7px; cursor: pointer; font-family: var(--font-ui); font-size: 11px; line-height: 1; flex: 0 0 auto; } .an-terminal-overlay__fontbtn { font-weight: 600; min-width: 24px; } .an-terminal-overlay__close:hover, .an-terminal-overlay__fontbtn:hover { color: var(--fg); border-color: var(--border-strong); } .an-terminal-overlay__resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; /* Subtle diagonal hatch in the corner so the handle is discoverable. */ background: linear-gradient(135deg, transparent 0 55%, rgba(124, 140, 255, 0.55) 55% 65%, transparent 65% 75%, rgba(124, 140, 255, 0.55) 75% 85%, transparent 85% 100%); border-bottom-right-radius: 18px; z-index: 2; touch-action: none; } .an-terminal-overlay__resize:hover { filter: brightness(1.5); } .an-terminal-overlay__stage { flex: 1 1 auto; margin: 0 8px 8px; background: #07090d; border: 1px solid rgba(124, 140, 255, 0.18); border-radius: 12px; padding: 4px; overflow: hidden; display: flex; min-height: 0; } /* The shell-cell (with its .shell-cell__host inside) gets reparented into the stage. Sized to fill so xterm fits the bubble interior. */ .an-terminal-overlay__stage > .shell-cell { flex: 1; display: flex; min-width: 0; min-height: 0; } .an-terminal-overlay__stage > .shell-cell > .shell-cell__host { flex: 1; height: 100%; } /* ----- bubble customization prompt overlay ----- Used for Rename and Custom-hex editors. Smaller surface area than promoting modal.js into a generic primitive; lives here because the bubble-menu flow is its only consumer outside ConnectModal. */ .an-prompt-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); animation: an-prompt-fade var(--t-fast) var(--ease); } @keyframes an-prompt-fade { from { opacity: 0; } to { opacity: 1; } } .an-prompt { min-width: 320px; max-width: 440px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 16px; display: grid; gap: 10px; } .an-prompt__title { font-size: 13.5px; font-weight: 600; color: var(--fg); } .an-prompt__row { display: flex; align-items: center; gap: 8px; } .an-prompt__color { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; cursor: pointer; } .an-prompt__input { flex: 1 1 auto; height: 32px; padding: 0 10px; background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 12.5px; } .an-prompt__input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(124, 140, 255, 0.22); } .an-prompt__hint { font-size: 11.5px; color: var(--warning, #fbbf24); } .an-prompt__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* ---- per-machine boxes (unified multi-VDS view) ---- One dashed container per connected machine; each machine's agent cluster is confined to its box by the force layout. Decorative only — pointer-events off so they never steal a drag/pan from the canvas underneath. */ .an-box { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 7 7; pointer-events: none; transition: stroke 200ms var(--ease); } .an-box.is-active { stroke: var(--accent); stroke-dasharray: none; } .an-box.is-error { stroke: var(--danger); } .an-box__label { fill: var(--fg-muted); font-family: var(--font-ui); font-size: 13px; font-weight: 600; pointer-events: none; user-select: none; }