openvisio-agent 0.19.12 → 0.20.0

package/studio/guide.html

@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light">
+    <meta name="description" content="Get started with Agent Studio, understand agent activity, and troubleshoot your local viewer.">
+    <title>Agent Studio user guide · OpenVisio</title>
+    <link rel="stylesheet" href="/style.css">
+  </head>
+  <body>
+    <a class="skip-link" href="#guide-content">Skip to guide</a>
+    <div class="guide-shell">
+      <header class="guide-header">
+        <div><h1>Agent Studio user guide</h1><p>Follow your agents’ work, find a result, and understand when an agent needs attention.</p></div>
+        <a class="button" href="/">Back to Studio</a>
+      </header>
+      <div class="guide-layout">
+        <nav class="guide-nav" aria-label="Guide contents">
+          <a href="#start">Open Studio</a>
+          <a href="#watchers">Show your agents</a>
+          <a href="#find-work">Find and inspect work</a>
+          <a href="#statuses">Understand statuses</a>
+          <a href="#controls">Pause and follow</a>
+          <a href="#access">Keyboard and reading</a>
+          <a href="#troubleshooting">Troubleshooting</a>
+          <a href="#history">History and privacy</a>
+        </nav>
+        <main id="guide-content" class="guide-content" tabindex="-1">
+          <section id="start">
+            <h2>Open Studio</h2>
+            <p>Agent Studio is a local viewer for bring-your-own (BYO) agents connected to an OpenVisio team. It shows recorded actions from Claude Code, Codex, and OpenCode watchers on this machine.</p>
+            <p>With a Studio-capable version of <code>openvisio-agent</code> installed, run:</p>
+            <pre><code>openvisio-agent studio</code></pre>
+            <p>Your browser opens the local address printed in the terminal, usually <code>http://127.0.0.1:4317</code>. Keep that terminal running while you use Studio.</p>
+            <p>To explore without connecting an agent:</p>
+            <pre><code>openvisio-agent studio --demo</code></pre>
+            <p>The demo uses clearly labeled sample activity. It makes no model calls. To return to your agents, press <kbd>Ctrl+C</kbd> in the Studio terminal and run the command again without <code>--demo</code>.</p>
+          </section>
+          <section id="watchers">
+            <h2>Show your agents</h2>
+            <p>A <strong>watcher</strong> is the local program that listens for assignments and messages, then starts your coding agent when work arrives. Studio displays what the watcher records.</p>
+            <ol>
+              <li>Connect your agent using the setup command provided by your OpenVisio team. If you already connected it, keep that setup.</li>
+              <li>In a separate terminal, start its watcher. Replace <code>ada</code> with the name used during setup:<pre><code>openvisio-agent watch --name ada</code></pre></li>
+              <li>Return to Studio. Your agent should appear in the sidebar. Select its name to see its activity.</li>
+            </ol>
+            <p>Starting a watcher enables it to act on existing assignments and messages. If your watcher is already running, you do not need to start another one.</p>
+            <p>Older watchers need a Studio-capable update and a restart before they record activity. Their earlier activity cannot be reconstructed. See <a href="#troubleshooting">restart instructions</a> below.</p>
+          </section>
+          <section id="find-work">
+            <h2>Find and inspect work</h2>
+            <ol>
+              <li>Select an agent, or choose <strong>All agents</strong>.</li>
+              <li>Choose <strong>Activity</strong> for individual actions, <strong>Cycles</strong> for groups of work, or <strong>Processes</strong> for watchers and coding runtimes.</li>
+              <li>Search for a ticket such as <code>DEMO-77</code>, an action, or a recorded file path. Use the kind and status filters to narrow the list.</li>
+              <li>Select a row. Its details appear beside the list, or below it on a smaller screen.</li>
+            </ol>
+            <p>A <strong>cycle</strong> is one unit of agent work. It can include a plan, several tool calls, progress updates, and a final response. Expand <strong>Cycle history</strong> to review its recorded sequence.</p>
+            <p><strong>No explicit plan recorded</strong> means the provider did not send a plan in the available history. A missing process ID means the provider did not report that operating-system identifier. Neither message alone means the work failed.</p>
+            <p>The process summary counts distinct reported process IDs associated with connected watchers. It is not a system-wide process monitor. The demo deliberately shows no real process count.</p>
+          </section>
+          <section id="statuses">
+            <h2>Understand statuses</h2>
+            <dl>
+              <dt>Live</dt><dd>Your browser is connected to the local Studio server. Check each agent’s own status to see whether its watcher is connected.</dd>
+              <dt>Queued / Active</dt><dd>Work is waiting to start, or the current watcher has recorded it as running.</dd>
+              <dt>Completed</dt><dd>The selected action or cycle reported completion. A completed tool is only one step; inspect the cycle’s final response and the ticket for the overall result.</dd>
+              <dt>Blocked / Failed / Timed out</dt><dd>Read the cycle’s Outcome and final response, then check the ticket or watcher log for the cause. Studio has no retry or approval button.</dd>
+              <dt>Cancelled / Skipped</dt><dd>The work was stopped or did not proceed. These are separate from successful completion.</dd>
+              <dt>Idle / Connecting / Recovering</dt><dd>A coding runtime is waiting, connecting, or attempting recovery. These describe the runtime’s last recorded state.</dd>
+              <dt>Offline</dt><dd>The watcher stopped reporting, exited, or was replaced by a newer run. An unfinished cycle’s outcome is unknown; offline does not mean completed or failed.</dd>
+              <dt>Simulated</dt><dd>This record belongs to the demonstration. No real agent is working on it.</dd>
+            </dl>
+          </section>
+          <section id="controls">
+            <h2>Pause and follow</h2>
+            <p><strong>Pause view</strong> freezes the displayed snapshot so you can read without changes. Your agents keep working. <strong>Resume view</strong> displays the latest available snapshot.</p>
+            <p><strong>Follow latest</strong> selects the newest matching activity as updates arrive. Selecting a row turns following off so you can inspect that item. Turn it on again when you want to follow new activity.</p>
+            <p><strong>Show earlier activity</strong> reveals more of the available history. Search and filters apply to that same limited history.</p>
+            <p>Closing the browser or pressing <kbd>Ctrl+C</kbd> in the Studio terminal leaves watchers running. To stop an agent, use a separate terminal:</p>
+            <pre><code>openvisio-agent stop --name ada</code></pre>
+          </section>
+          <section id="access">
+            <h2>Keyboard and reading</h2>
+            <p>Use <kbd>Tab</kbd> and <kbd>Shift+Tab</kbd> to move between controls. Use <kbd>Enter</kbd> to activate links and buttons; <kbd>Space</kbd> also activates buttons and checkboxes. Native select menus use your browser’s keyboard controls.</p>
+            <p>The first focusable link skips navigation. Controls have text labels, and statuses use words as well as color. Use your screen reader’s headings and landmarks to find the activity list, selected details, or guide sections.</p>
+            <p>Pause the view before reading a long result. Browser zoom can enlarge the interface; the details panel moves below the activity list on narrower screens. This guide works without JavaScript and can be printed or saved as a PDF using your browser’s print command.</p>
+          </section>
+          <section id="troubleshooting">
+            <h2>Troubleshooting</h2>
+            <h3>“Unknown command: studio”</h3>
+            <p>Check <code>openvisio-agent --version</code>. Studio requires version <code>0.20.0</code> or newer. Update with <code>npm install -g openvisio-agent@latest</code>. To run from a local checkout, use:</p>
+            <pre><code>node packages/openvisio-agent/bin/cli.mjs studio</code></pre>
+            <p>Run this from the repository root after installing the package’s dependencies.</p>
+            <h3>No agents or “Restart watcher to connect”</h3>
+            <p>Confirm the watcher uses the same local account as Studio. After updating the watcher package, stop the named watcher and start it again. Replace <code>ada</code> with your agent name:</p>
+            <pre><code>openvisio-agent stop --name ada
+openvisio-agent watch --name ada</code></pre>
+            <p>Stopping interrupts that agent’s work. For a background service on macOS or Linux, use <code>openvisio-agent watch --name ada --install</code> instead of the second command. Studio reads <code>~/.openvisio</code> by default; <code>--state-dir /path/to/state</code> selects a different directory to read.</p>
+            <h3>No matching activity</h3>
+            <p>Choose <strong>Clear filters</strong> or select <strong>All agents</strong> and clear the search. If there is still no activity, check whether the watcher has received work since its update.</p>
+            <h3>Reconnecting or the page will not open</h3>
+            <p>Keep the Studio terminal running and open the exact URL it printed. The browser reconnects automatically when the server returns. If automatic browser opening fails, run <code>openvisio-agent studio --no-open</code> and open the printed address yourself.</p>
+            <h3>Port already in use</h3>
+            <p>Choose another available local port:</p>
+            <pre><code>openvisio-agent studio --port 0</code></pre>
+            <h3>A result or older event is missing</h3>
+            <p>Studio shows a bounded recent history. Look at the original ticket and channel for delivered results. Watcher logs are at <code>~/.openvisio/&lt;agent&gt;.log</code> for the macOS service, or <code>journalctl --user -u openvisio-&lt;agent&gt;</code> for the Linux service. A foreground watcher prints to its terminal.</p>
+          </section>
+          <section id="history">
+            <h2>History and privacy</h2>
+            <p>Studio reads local journals under <code>~/.openvisio/observability</code>. The viewer serves up to 500 recent events from a bounded set of journal files. Logs rotate, large text can be shortened, and bursts can drop records. This is a recent activity view, not a complete audit archive.</p>
+            <p>The journal records visible plans, tool metadata, and public output. Private reasoning and raw tool payloads are excluded. Known credentials and recognizable secret formats are redacted, but visible output can still include project text and file paths. Review it before sharing a screenshot or journal.</p>
+            <p>Studio’s server accepts local connections only and has no controls that modify your team or start model calls. Your running watchers continue to use their configured team and provider connections.</p>
+            <p><a href="/">Return to Agent Studio</a></p>
+          </section>
+        </main>
+      </div>
+    </div>
+  </body>
+</html>

package/studio/index.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light">
+    <meta name="description" content="A local view of your BYO agents, their work, and recorded progress.">
+    <title>Agent studio · OpenVisio</title>
+    <link rel="stylesheet" href="/style.css">
+    <script type="module" src="/app.mjs"></script>
+  </head>
+  <body>
+    <svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
+      <symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></symbol>
+      <symbol id="i-pulse" viewBox="0 0 24 24"><path d="M3 12h4l3-7 4 14 3-7h4"/></symbol>
+      <symbol id="i-stack" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4-9 4-9-4Zm0 5 9 4 9-4M3 17l9 4 9-4"/></symbol>
+      <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="m7 9 3 3-3 3m6 0h4"/></symbol>
+      <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14m-5-5 5 5-5 5"/></symbol>
+      <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></symbol>
+      <symbol id="i-pause" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14"/></symbol>
+      <symbol id="i-play" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7V5Z"/></symbol>
+      <symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
+      <symbol id="i-tool" viewBox="0 0 24 24"><path d="M14 5a6 6 0 0 0-7 8l-4 4a2.8 2.8 0 0 0 4 4l4-4a6 6 0 0 0 8-7l-4 4-4-4 4-4Z"/></symbol>
+      <symbol id="i-message" viewBox="0 0 24 24"><path d="M5 4h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-6 3V6a2 2 0 0 1 2-2Z"/><path d="M7 9h10M7 13h7"/></symbol>
+      <symbol id="i-list" viewBox="0 0 24 24"><path d="m3 6 1 1 2-2m3 1h12M3 12h3m3 0h12M3 18h3m3 0h12"/></symbol>
+      <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
+      <symbol id="i-close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol>
+      <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></symbol>
+    </defs></svg>
+    <a class="skip-link" href="#workspace">Skip to activity</a>
+    <div class="app-shell">
+      <aside class="sidebar" aria-label="Agent navigation">
+        <a class="brand" href="/" aria-label="OpenVisio Agent studio"><span class="brand-mark"><svg class="icon" aria-hidden="true"><use href="#i-grid"/></svg></span><span>OpenVisio<span class="brand-caption">Local workspace</span></span></a>
+        <div class="sidebar-title"><span>Agents</span><span class="count" id="agent-count">0</span></div>
+        <label class="agent-search"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input id="agent-search" type="search" placeholder="Find an agent" aria-label="Filter agent list" autocomplete="off"></label>
+        <nav id="agent-list" class="agent-list" aria-label="Select an agent"><button class="agent-item is-selected" type="button" aria-pressed="true"><span class="agent-avatar"><svg class="icon" aria-hidden="true"><use href="#i-grid"/></svg></span><span class="agent-text"><span class="agent-name">All agents</span><span class="agent-caption">Waiting for data</span></span></button></nav>
+        <div class="sidebar-note"><span class="local-indicator"><span class="dot"></span>On this machine</span><p>Recorded actions from your running BYO agents.</p><span class="mono" id="server-address">localhost:4317</span></div>
+      </aside>
+      <main id="workspace" class="workspace" tabindex="-1">
+        <header class="page-header">
+          <div><div class="eyebrow">Runtime overview <span id="demo-badge" class="badge demo-badge" hidden>Demo data</span></div><h1>Agent studio</h1><p class="page-description">See what your agents are doing, as it happens.</p></div>
+          <div class="header-actions"><a class="button" href="/guide">User guide</a><span id="connection-status" class="connection-status" role="status"><span class="dot"></span><span>Connecting</span></span><button id="pause-button" class="button" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-pause"/></svg><span>Pause view</span></button></div>
+        </header>
+        <div id="notice" class="notice" role="status" hidden></div>
+        <section class="metrics" aria-label="Workspace summary">
+          <article class="metric"><div class="metric-label">Active cycles<svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg></div><div class="metric-value" id="metric-active">—</div><div class="metric-caption" id="metric-active-caption">Waiting for activity</div></article>
+          <article class="metric"><div class="metric-label">In the queue<svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg></div><div class="metric-value" id="metric-queued">—</div><div class="metric-caption" id="metric-queued-caption">Cycles waiting to start</div></article>
+          <article class="metric"><div class="metric-label">Processes<svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></div><div class="metric-value" id="metric-processes">—</div><div class="metric-caption" id="metric-processes-caption">Watchers and coding runtimes</div></article>
+          <article class="metric"><div class="metric-label">Recorded events<svg class="icon" aria-hidden="true"><use href="#i-list"/></svg></div><div class="metric-value" id="metric-events">—</div><div class="metric-caption" id="metric-events-caption">Recent local history</div></article>
+        </section>
+        <section class="work-panel" aria-label="Agent activity">
+          <div class="panel-toolbar"><div class="view-tabs" role="group" aria-label="Choose a view"><button class="tab is-selected" type="button" data-view="activity" aria-pressed="true"><svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg>Activity</button><button class="tab" type="button" data-view="cycles" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg>Cycles</button><button class="tab" type="button" data-view="processes" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg>Processes</button></div><label class="follow-control"><input type="checkbox" id="follow-latest" checked>Follow latest</label></div>
+          <div class="filters"><label class="search-field"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input id="event-search" type="search" placeholder="Search actions, tickets, files…" aria-label="Search recorded activity" autocomplete="off"></label><label class="select-field"><span class="sr-only">Event kind</span><select id="kind-filter"><option value="all">All kinds</option><option value="cycle">Cycles</option><option value="tool">Tools</option><option value="plan">Plans</option><option value="output">Output</option><option value="process">Processes</option><option value="runtime">Watchers</option></select></label><label class="select-field"><span class="sr-only">Status</span><select id="status-filter"><option value="all">All statuses</option><option value="active">Active</option><option value="queued">Queued</option><option value="completed">Completed</option><option value="failed">Failed</option><option value="cancelled">Cancelled</option><option value="blocked">Blocked</option><option value="skipped">Skipped</option><option value="recovering">Recovering</option><option value="idle">Idle</option><option value="connecting">Connecting</option><option value="timeout">Timed out</option><option value="offline">Offline</option></select></label></div>
+          <div class="content-grid"><div class="activity-panel"><div class="section-heading"><h2 id="activity-heading">Latest activity</h2><span class="muted" id="result-count">Connecting…</span></div><div id="activity-list" class="activity-list" aria-label="Recorded activity"><div class="loading-state" role="status"><span class="skeleton skeleton-wide"></span><span class="skeleton"></span><span class="skeleton skeleton-wide"></span><span>Connecting to your local agents…</span></div></div><button id="load-more" class="button load-more" type="button" hidden>Show earlier activity</button></div><aside id="inspector" class="inspector" tabindex="-1" aria-label="Selected activity details"><div class="inspector-empty"><span class="empty-icon"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></span><h2>The work, in view</h2><p>Select a cycle to see its tools, explicit plan, and recorded output.</p></div></aside></div>
+        </section>
+        <footer class="page-footer"><span id="history-label">Local history · no events yet</span><span id="updated-at">Waiting for the first snapshot</span></footer>
+      </main>
+    </div>
+    <div id="toast" class="toast" role="status" hidden></div>
+  </body>
+</html>

package/studio/style.css

@@ -0,0 +1,223 @@
+@layer tokens, base, components, responsive;
+
+@layer tokens {
+  :root {
+    --ink: #292929;
+    --background: #fff;
+    --surface: #fff;
+    --stage: #f6f6f6;
+    --foreground: var(--ink);
+    --muted: color-mix(in oklab, var(--ink) 72%, white);
+    --subtle: color-mix(in oklab, var(--ink) 68%, white);
+    --border: color-mix(in oklab, var(--ink) 12%, transparent);
+    --hover: color-mix(in oklab, var(--ink) 5%, transparent);
+    --input: color-mix(in oklab, var(--ink) 14%, transparent);
+    --primary: #305dde;
+    --success: #28764f;
+    --warning: #97691f;
+    --destructive: #b7423c;
+    --radius: .625rem;
+    --radius-sm: calc(var(--radius) * 1.4);
+    --radius-md: calc(var(--radius) * 1.8);
+    --radius-lg: calc(var(--radius) * 2.2);
+    --radius-xl: calc(var(--radius) * 2.6);
+    --font-sans: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+}
+
+@layer base {
+  * { box-sizing: border-box; }
+  html { min-width: 320px; background: var(--background); }
+  body { margin: 0; color: var(--foreground); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+  button, input, select { font: inherit; color: inherit; }
+  button, select, input[type="checkbox"] { cursor: pointer; }
+  button { font-weight: 500; }
+  button, input, select { -webkit-tap-highlight-color: transparent; }
+  button:disabled { cursor: default; opacity: .6; }
+  button, a, input, select, summary { touch-action: manipulation; }
+  :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+  button, select, a { transition: background-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out; }
+  h1, h2, h3, h4, p { margin: 0; }
+  h1, h2, h3, h4, strong { font-weight: 500; }
+  h1 { font-size: 30px; letter-spacing: -1.15px; line-height: 1.3; }
+  h2 { font-size: 14px; letter-spacing: -.2px; }
+  h3 { font-size: 12px; }
+  a { color: inherit; }
+  input { min-width: 0; }
+  input::placeholder { color: var(--subtle); }
+  [hidden] { display: none !important; }
+  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  .icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
+  .icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+  .mono { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
+  .muted { color: var(--muted); font-size: 11px; }
+  .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
+  .skip-link { position: fixed; top: 10px; left: 10px; z-index: 5; transform: translateY(-180%); padding: 10px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
+  .skip-link:focus { transform: translateY(0); }
+}
+
+@layer components {
+  .app-shell { display: grid; grid-template-columns: 214px minmax(0, 1fr); min-height: 100dvh; }
+  .sidebar { display: flex; flex-direction: column; padding: 27px 14px 20px; border-right: 1px solid var(--border); min-width: 0; }
+  .brand { display: flex; align-items: center; gap: 10px; margin: 0 10px 42px; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
+  .brand-mark { display: grid; place-items: center; width: 33px; height: 33px; color: white; background: var(--ink); border-radius: 10px; corner-shape: squircle; }
+  .brand-mark .icon { width: 19px; height: 19px; stroke-width: 1.5; }
+  .brand-caption { display: block; color: var(--muted); font-weight: 400; font-size: 10px; letter-spacing: 0; margin-top: 1px; }
+  .sidebar-title { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; margin-bottom: 13px; font-size: 11px; font-weight: 500; color: var(--muted); }
+  .count { font-size: 10px; background: var(--stage); min-width: 22px; height: 19px; display: grid; place-items: center; border-radius: 999px; font-variant-numeric: tabular-nums; }
+  .agent-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin: 0 0 12px; color: var(--subtle); }
+  .agent-search .icon { width: 14px; height: 14px; }
+  .agent-search input { width: 100%; border: 0; outline-offset: 5px; background: transparent; font-size: 11px; }
+  .agent-list { display: flex; flex-direction: column; gap: 5px; }
+  .agent-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px; border-radius: var(--radius-md); corner-shape: squircle; }
+  .agent-item:hover { background: var(--hover); }
+  .agent-item.is-selected { background: var(--stage); }
+  .agent-avatar { width: 31px; height: 31px; display: grid; place-items: center; position: relative; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; color: var(--muted); font-size: 11px; font-weight: 500; }
+  .avatar-status { position: absolute; width: 7px; height: 7px; right: -1px; bottom: -1px; border-radius: 50%; border: 2px solid var(--background); box-sizing: content-box; background: var(--subtle); }
+  .avatar-status.online { background: var(--success); }
+  .agent-text { flex: 1; min-width: 0; }
+  .agent-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
+  .agent-caption { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 10px; font-weight: 400; margin-top: 2px; }
+  .sidebar-note { margin: auto 10px 0; padding-top: 52px; font-size: 10px; color: var(--muted); }
+  .sidebar-note p { margin: 10px 0 8px; line-height: 1.7; }
+  .sidebar-note .mono { font-size: 9px; color: var(--subtle); }
+  .local-indicator { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
+  .workspace { padding: 31px 34px 18px; min-width: 0; max-width: 1860px; width: 100%; margin: 0 auto; }
+  .page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
+  .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); margin-bottom: 5px; }
+  .page-description { color: var(--muted); font-size: 12px; margin-top: 7px; }
+  .header-actions { display: flex; align-items: center; gap: 16px; }
+  .connection-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; color: var(--muted); }
+  .connection-status.connected { color: var(--success); }
+  .connection-status.disconnected { color: var(--warning); }
+  .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; font-size: 11px; box-shadow: 0 1px 1px color-mix(in oklab, var(--ink) 3%, transparent); }
+  .button:hover { background: var(--hover); }
+  .button .icon { width: 14px; height: 14px; }
+  .button.primary { color: white; background: var(--primary); border-color: transparent; }
+  .button.primary:hover { background: color-mix(in oklab, var(--primary) 90%, var(--ink)); }
+  .notice { padding: 11px 15px; background: var(--stage); border-radius: var(--radius-sm); font-size: 11px; margin-bottom: 18px; color: var(--muted); overflow-wrap: anywhere; }
+  .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
+  .metric { padding: 15px 16px 14px; background: var(--stage); border-radius: var(--radius-lg); corner-shape: squircle; min-width: 0; }
+  .metric-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }
+  .metric-label .icon { width: 15px; height: 15px; opacity: .7; }
+  .metric-value { font-size: 29px; font-weight: 400; line-height: 1.4; margin: 9px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
+  .metric-caption { font-size: 10px; color: var(--muted); min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .work-panel { min-width: 0; }
+  .panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+  .view-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--stage); border-radius: 999px; }
+  .tab { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 8px 13px; color: var(--muted); background: transparent; font-size: 11px; }
+  .tab .icon { width: 14px; height: 14px; }
+  .tab:hover { color: var(--ink); }
+  .tab.is-selected { color: var(--ink); background: var(--surface); box-shadow: 0 1px 4px color-mix(in oklab, var(--ink) 8%, transparent); }
+  .follow-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; cursor: pointer; }
+  .follow-control input { accent-color: var(--primary); width: 13px; height: 13px; margin: 0; }
+  .filters { display: flex; gap: 9px; margin-bottom: 19px; }
+  .search-field { flex: 1; min-width: 90px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; color: var(--subtle); }
+  .search-field .icon { width: 14px; height: 14px; }
+  .search-field input { width: 100%; background: transparent; border: 0; font-size: 11px; outline-offset: 4px; }
+  .select-field { display: inline-flex; align-items: center; min-width: 108px; }
+  .select-field select { width: 100%; min-height: 34px; padding: 7px 26px 7px 12px; border: 1px solid var(--border); border-radius: 999px; background-color: var(--surface); font-size: 11px; }
+  .content-grid { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
+  .activity-panel { min-width: 0; }
+  .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 15px; min-height: 37px; }
+  .section-heading h2 { font-size: 12px; }
+  .section-heading .muted { font-size: 10px; }
+  .activity-list { display: flex; flex-direction: column; gap: 4px; max-height: min(67vh, 810px); min-height: 380px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
+  .activity-row { display: flex; align-items: flex-start; gap: 11px; text-align: left; width: 100%; padding: 13px 11px; border: 1px solid transparent; border-radius: var(--radius-md); corner-shape: squircle; background: transparent; }
+  .activity-row:hover { background: var(--hover); }
+  .activity-row.is-selected { background: var(--stage); border-color: var(--border); }
+  .event-icon { width: 29px; height: 29px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; margin-top: 1px; }
+  .event-icon .icon { width: 14px; height: 14px; }
+  .event-body { min-width: 0; flex: 1; }
+  .event-title { display: block; font-size: 11px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
+  .event-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 4px; line-height: 1.7; overflow-wrap: anywhere; }
+  .event-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size: 9px; font-weight: 400; color: var(--muted); margin-top: 7px; }
+  .event-meta .badge { font-size: 8px; padding: 1px 6px; }
+  .event-time { font-size: 9px; color: var(--subtle); white-space: nowrap; font-weight: 400; font-family: var(--font-mono); margin-top: 4px; }
+  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 9px; font-weight: 400; white-space: nowrap; }
+  .badge .dot { width: 4px; height: 4px; }
+  .badge.active, .badge.completed, .badge.online { color: var(--success); }
+  .badge.queued, .badge.demo, .badge.connecting, .badge.recovering, .demo-badge { color: var(--warning); }
+  .badge.failed, .badge.cancelled, .badge.blocked, .badge.timeout { color: var(--destructive); }
+  .load-more { display: flex; margin: 15px auto 0; }
+  .inspector { padding: 17px; background: var(--stage); border-radius: var(--radius-xl); corner-shape: squircle; min-width: 0; min-height: 418px; max-height: min(77vh, 930px); overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
+  .inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 0 15px; }
+  .inspector-eyebrow { font-size: 9px; color: var(--muted); margin-bottom: 6px; }
+  .inspector-title { font-size: 16px; line-height: 1.4; letter-spacing: -.4px; overflow-wrap: anywhere; }
+  .inspector-subtitle { font-size: 10px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
+  .inspector-empty, .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: 40px 26px; min-height: 370px; }
+  .inspector-empty h2, .empty-state h2 { font-size: 14px; margin: 15px 0 8px; }
+  .inspector-empty p, .empty-state p { color: var(--muted); font-size: 11px; max-width: 280px; line-height: 1.8; }
+  .empty-icon { display: grid; place-items: center; width: 42px; height: 42px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); corner-shape: squircle; color: var(--muted); }
+  .empty-icon .icon { width: 21px; height: 21px; }
+  .empty-state .command-copy { margin: 18px 0 11px; }
+  .command-copy { display: flex; width: 100%; max-width: 320px; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); corner-shape: squircle; text-align: left; }
+  .command-copy code { font-family: var(--font-mono); font-weight: 400; font-size: 10px; overflow-wrap: anywhere; }
+  .command-copy .icon { width: 14px; height: 14px; color: var(--muted); }
+  .detail-section { padding: 13px; background: var(--surface); border-radius: var(--radius-md); corner-shape: squircle; margin-top: 10px; min-width: 0; }
+  .detail-section h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; font-size: 11px; }
+  .detail-section h3 .icon { width: 13px; height: 13px; color: var(--muted); }
+  .detail-section h3 .count { margin-left: auto; }
+  .detail-grid { display: grid; grid-template-columns: minmax(55px, auto) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 10px; }
+  .detail-grid dt { color: var(--muted); }
+  .detail-grid dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
+  .detail-grid dd.mono { font-size: 9px; }
+  .detail-note { font-size: 10px; line-height: 1.7; color: var(--muted); }
+  .plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
+  .plan-step { display: flex; gap: 9px; align-items: flex-start; font-size: 10px; line-height: 1.7; }
+  .plan-marker { display: grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--border); color: var(--muted); border-radius: 50%; font-size: 8px; margin-top: 1px; }
+  .plan-marker .icon { width: 10px; height: 10px; }
+  .plan-step.completed { color: var(--muted); }
+  .plan-step.completed .plan-marker { color: var(--success); }
+  .plan-step.active .plan-marker { color: var(--primary); border-color: currentColor; }
+  .plan-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+  .plan-status { font-size: 8px; color: var(--subtle); white-space: nowrap; }
+  .tools-list { display: flex; flex-direction: column; gap: 9px; }
+  .tool-item { min-width: 0; padding: 9px 10px; background: var(--stage); border-radius: var(--radius-sm); corner-shape: squircle; }
+  .tool-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .tool-name { min-width: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 500; }
+  .tool-title { margin-top: 7px; font-family: var(--font-mono); font-size: 9px; line-height: 1.75; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }
+  .file-location { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
+  .recorded-output { margin: 0; font-family: var(--font-mono); font-size: 10px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 310px; overflow: auto; scrollbar-width: thin; }
+  .output-entry + .output-entry { margin-top: 13px; }
+  .history-details summary { cursor: pointer; font-size: 10px; color: var(--muted); padding: 2px 0; }
+  .history-details[open] summary { margin-bottom: 12px; }
+  .mini-event { display: flex; gap: 11px; font-size: 9px; line-height: 1.8; color: var(--muted); padding: 5px 0; }
+  .mini-event time { font-family: var(--font-mono); color: var(--subtle); white-space: nowrap; }
+  .mini-event span { overflow-wrap: anywhere; }
+  .page-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--subtle); font-size: 9px; padding: 22px 2px 0; }
+  .loading-state { display: flex; flex-direction: column; gap: 14px; padding: 21px 12px; font-size: 10px; color: var(--muted); }
+  .skeleton { height: 14px; width: 55%; background: var(--stage); border-radius: 999px; }
+  .skeleton-wide { width: 85%; }
+  .toast { position: fixed; bottom: 23px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 30px color-mix(in oklab, var(--ink) 12%, transparent); font-size: 11px; z-index: 10; }
+}
+
+@layer responsive {
+  .guide-shell { max-width: 1080px; margin: auto; padding: 32px 24px 64px; font-size: 16px; line-height: 1.75; }
+  .guide-shell .button { font-size: 14px; min-height: 40px; text-decoration: none; }
+  .guide-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
+  .guide-header p { color: var(--muted); margin-top: 10px; max-width: 640px; }
+  .guide-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: start; }
+  .guide-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
+  .guide-nav a { padding: 5px 0; text-underline-offset: 4px; }
+  .guide-content { min-width: 0; }
+  .guide-content section { margin-bottom: 40px; scroll-margin-top: 24px; }
+  .guide-content h2 { font-size: 24px; margin-bottom: 14px; }
+  .guide-content h3 { font-size: 18px; margin: 24px 0 10px; }
+  .guide-content p, .guide-content ol, .guide-content ul, .guide-content dl { margin: 0 0 16px; }
+  .guide-content li { margin: 8px 0; }
+  .guide-content pre { margin: 12px 0 18px; padding: 16px; border-radius: var(--radius-md); background: var(--stage); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
+  .guide-content code, .guide-content kbd { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
+  .guide-content dt { font-weight: 500; margin-top: 16px; }
+  .guide-content dd { margin: 4px 0 16px; color: var(--muted); }
+  .guide-content a { color: var(--primary); text-underline-offset: 3px; }
+  .guide-callout { padding: 18px; border-radius: var(--radius-md); background: var(--stage); }
+  @media print { .guide-nav, .guide-header .button, .skip-link { display: none; } .guide-layout { display: block; } .guide-shell { max-width: none; padding: 0; } .guide-content section { break-inside: avoid; } }
+  @media (max-width: 640px) { .guide-shell { padding: 24px 20px; } .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .guide-nav { position: static; } .panel-toolbar { flex-wrap: wrap; } }
+  @media (min-width: 1550px) { .workspace { padding: 38px 46px 22px; } .content-grid { grid-template-columns: minmax(400px, 1.2fr) minmax(350px, 1fr); gap: 24px; } .activity-row { padding: 15px; } .inspector { padding: 21px; } }
+  @media (max-width: 1120px) { .app-shell { grid-template-columns: 185px minmax(0, 1fr); } .sidebar { padding-inline: 10px; } .workspace { padding: 27px 22px 18px; } .content-grid { grid-template-columns: minmax(250px, 1fr) minmax(270px, 1fr); } .metric { padding: 13px; } .metrics { gap: 8px; } .header-actions { gap: 10px; } .metric-caption { font-size: 9px; } }
+  @media (max-width: 940px) { .content-grid { grid-template-columns: minmax(0, 1fr); } .inspector { max-height: none; min-height: 220px; } .inspector-empty { min-height: 200px; } .activity-list { min-height: 250px; max-height: 440px; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-header { align-items: flex-start; } .header-actions { flex-direction: column; align-items: flex-end; padding-top: 7px; gap: 13px; } .page-description { max-width: 230px; } }
+  @media (max-width: 640px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .sidebar { padding: 16px 18px 8px; border-right: 0; } .brand { margin: 0 0 16px; font-size: 13px; } .brand-caption { display: none; } .brand-mark { width: 28px; height: 28px; } .brand-mark .icon { width: 17px; height: 17px; } .sidebar-title, .agent-search, .sidebar-note { display: none; } .agent-list { flex-direction: row; overflow-x: auto; padding: 2px 2px 7px; gap: 6px; } .agent-item { width: auto; min-width: 132px; max-width: 170px; padding: 8px; flex-shrink: 0; } .agent-avatar { width: 25px; height: 25px; font-size: 9px; } .agent-name { font-size: 10px; } .agent-caption { font-size: 9px; } .workspace { padding: 17px 18px 20px; } .page-header { margin-bottom: 22px; gap: 10px; } h1 { font-size: 27px; } .page-description { font-size: 11px; max-width: 210px; } .eyebrow { font-size: 9px; } .header-actions .button { min-height: 30px; font-size: 10px; padding: 6px 10px; } .connection-status { font-size: 10px; } .metrics { margin-bottom: 22px; } .metric-value { font-size: 27px; } .metric-label { font-size: 10px; } .panel-toolbar { gap: 8px; } .tab { padding: 7px 9px; font-size: 10px; gap: 5px; } .tab .icon { width: 12px; height: 12px; } .follow-control { font-size: 9px; gap: 4px; } .filters { flex-wrap: wrap; gap: 7px; } .search-field { flex-basis: 100%; } .select-field { flex: 1; } .select-field select { font-size: 10px; } .content-grid { gap: 20px; } .page-footer { flex-direction: column; gap: 4px; } .event-time { font-size: 8px; } .activity-row { gap: 8px; padding: 12px 8px; } .inspector { padding: 14px; } }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }
+}