@oddessentials/agent-guild 0.1.0

package/web/art/art.css

@@ -0,0 +1,186 @@
+.level-badge { display: none; }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --gold: #e8c47c;
+    --gold-dim: #8a6d3b;
+    --card-bg: rgba(18, 20, 26, 0.9);
+  }
+
+  .provider, .session-card {
+    --pc: #a67cf6;
+    --idle: url("/art/characters/shell/idle.png");
+    --working: url("/art/characters/shell/working.png");
+    --locked: url("/art/characters/shell/locked.png");
+  }
+  .provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
+    --pc: #d97757;
+    --idle: url("/art/characters/anthropic/idle.png");
+    --working: url("/art/characters/anthropic/working.png");
+    --locked: url("/art/characters/anthropic/locked.png");
+  }
+  .provider[data-id="openai"], .session-card[data-provider="openai"] {
+    --pc: #1fd08f;
+    --idle: url("/art/characters/openai/idle.png");
+    --working: url("/art/characters/openai/working.png");
+    --locked: url("/art/characters/openai/locked.png");
+  }
+  .provider[data-id="google"], .session-card[data-provider="google"] {
+    --pc: #5b9cff;
+    --idle: url("/art/characters/google/idle.png");
+    --working: url("/art/characters/google/working.png");
+    --locked: url("/art/characters/google/locked.png");
+  }
+  .provider[data-id="xai"], .session-card[data-provider="xai"] {
+    --pc: #38d6e8;
+    --idle: url("/art/characters/xai/idle.png");
+    --working: url("/art/characters/xai/working.png");
+    --locked: url("/art/characters/xai/locked.png");
+  }
+
+  .provider-icon[data-provider="anthropic"] { --icon: url("/art/icons/anthropic.png"); }
+  .provider-icon[data-provider="openai"] { --icon: url("/art/icons/openai.png"); }
+  .provider-icon[data-provider="google"] { --icon: url("/art/icons/google.png"); }
+  .provider-icon[data-provider="xai"] { --icon: url("/art/icons/xai.png"); }
+  .provider-icon[data-provider="shell"] { --icon: url("/art/icons/shell.png"); }
+  .provider-icon:not(.has-image)[data-provider="anthropic"],
+  .provider-icon:not(.has-image)[data-provider="openai"],
+  .provider-icon:not(.has-image)[data-provider="google"],
+  .provider-icon:not(.has-image)[data-provider="xai"],
+  .provider-icon:not(.has-image)[data-provider="shell"] {
+    background: var(--icon) center / cover no-repeat; color: transparent;
+  }
+
+  body { background: #0b0c10 url("/art/page.png") center bottom / cover fixed; }
+  .topbar { background: rgba(12, 13, 17, 0.88); backdrop-filter: blur(6px); border-bottom-color: #2a2418; }
+  .brand-mark { display: none; }
+  .brand::before {
+    content: ""; width: 34px; height: 34px; flex: none;
+    background: url("/art/ui/guild-crest.png") center / contain no-repeat;
+  }
+  h1, h2 { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; letter-spacing: 0.01em; }
+  h1 {
+    font-size: 1.3rem; font-weight: 600; color: var(--gold);
+    background: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%);
+    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+  }
+  h2 { color: #f1e2c2; font-size: 1.15rem; font-weight: 600; }
+
+  .provider, .session-card {
+    position: relative; isolation: isolate; overflow: hidden;
+    border-radius: 6px; padding: 18px;
+    background: var(--card-bg);
+    border: 1px solid color-mix(in srgb, var(--pc) 35%, #2a303b);
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .provider:hover, .session-card:hover {
+    border-color: color-mix(in srgb, var(--pc) 70%, #2a303b);
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.1), 0 0 22px color-mix(in srgb, var(--pc) 22%, transparent);
+  }
+  .provider::before, .session-card::before {
+    content: ""; position: absolute; z-index: -1; pointer-events: none;
+    background-repeat: no-repeat; background-size: cover; background-position: center top;
+  }
+  .provider::after, .session-card::after {
+    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+    border: 44px solid transparent; border-image: url("/art/ui/frame.png") 168;
+  }
+
+  .provider { padding-top: 188px; align-content: start; }
+  .provider::before {
+    inset: 0 0 auto 0; height: 250px;
+    background-image: var(--idle);
+    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
+            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
+  }
+  .provider.unavailable::before { background-image: var(--locked); }
+  .provider.unavailable { border-color: #2a2d33; }
+  .provider.unavailable::after {
+    background: url("/art/ui/padlock.png") right 16px top 14px / 30px 40px no-repeat border-box;
+  }
+  .provider .vendor { color: #f3ead8; }
+
+  .meter-label { padding-left: 18px; background: url("/art/ui/gem-vitality.png") left center / 14px auto no-repeat; }
+  .meter + .meter .meter-label { background-image: url("/art/ui/gem-mana.png"); }
+  .meter-bar { height: 7px; background: #0c0e12; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.18); }
+  .meter-fill { background: linear-gradient(90deg, #1f9d5c, #52e08f); box-shadow: 0 0 8px rgba(82, 224, 143, 0.55); }
+  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2a62c9, #5ba6ff); box-shadow: 0 0 8px rgba(91, 166, 255, 0.55); }
+  .meter.low .meter-fill { background: var(--warn); box-shadow: 0 0 8px rgba(224, 168, 74, 0.5); }
+  .meter.empty .meter-fill { background: var(--danger); box-shadow: 0 0 8px rgba(239, 107, 102, 0.5); }
+
+  .session-card { padding-left: 152px; min-height: 196px; }
+  .session-card::before {
+    inset: 0 auto 0 0; width: 168px; background-size: 168px auto;
+    background-image: var(--idle);
+    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
+            mask-image: linear-gradient(to right, #000 62%, transparent 100%);
+  }
+  .session-card:has(.status-pill.active)::before { background-image: var(--working); }
+  .session-card:has(.status-pill.active) {
+    border-color: color-mix(in srgb, var(--pc) 75%, #2a303b);
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.1), 0 0 26px color-mix(in srgb, var(--pc) 28%, transparent);
+  }
+  .session-card.exited::before { filter: grayscale(1) brightness(0.7); }
+  .session-card .card-top > .provider-icon { display: none; }
+  .session-card .card-top { flex-wrap: wrap; gap: 6px 8px; }
+  .session-card .card-title { flex-basis: 100%; }
+
+  .level-badge {
+    display: grid; place-items: center; position: absolute; left: 12px; bottom: 12px; z-index: 1;
+    width: 46px; height: 46px; padding-top: 1px;
+    background: url("/art/ui/level-medallion.png") center / contain no-repeat;
+    font: 700 1.05rem "Palatino Linotype", Palatino, Georgia, serif; color: #f6dea6;
+    text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8);
+  }
+
+  .session-card .agent {
+    width: 34px; height: 34px; border-width: 1px; border-color: var(--fc);
+    place-items: end end; padding: 0 3px 1px 0;
+    background: #0e1016 center / 118% auto no-repeat;
+    color: #fff; font-size: 0.62rem; text-shadow: 0 0 3px #000, 0 1px 2px #000;
+    box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 45%, transparent);
+  }
+  .session-card .agent.working::after { border-color: var(--fc); }
+  .session-card .agent[data-familiar="flame"] { --fc: #f08a3c; background-image: url("/art/familiars/flame.png"); }
+  .session-card .agent[data-familiar="leaf"] { --fc: #5fd068; background-image: url("/art/familiars/leaf.png"); }
+  .session-card .agent[data-familiar="night"] { --fc: #a66cf0; background-image: url("/art/familiars/night.png"); }
+  .session-card .agent[data-familiar="aether"] { --fc: #7cc8ff; background-image: url("/art/familiars/aether.png"); }
+
+  .status-pill { background: rgba(0, 0, 0, 0.45); border: 1px solid #4a3d25; }
+  .model-pill { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
+  .provider .tier { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; color: var(--gold); }
+
+  .btn {
+    border-radius: 6px; border-color: #4a3d25;
+    background: linear-gradient(#242834, #171a22);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5);
+  }
+  .btn:hover { border-color: var(--gold-dim); }
+  .btn.primary {
+    border-color: #b8955a; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
+    background: linear-gradient(#8e8ef6, #6262d6);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(124, 124, 240, 0.25);
+  }
+  .btn.primary:hover { border-color: var(--gold); filter: brightness(1.08); }
+  .btn.danger { color: #ff9a94; }
+  .btn.danger:hover { border-color: #b8524d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(239, 107, 102, 0.3); }
+  .cwd input, .auth input { border-color: #4a3d25; background: rgba(12, 13, 17, 0.8); }
+  .auth {
+    border-radius: 6px; padding: 28px; background: var(--card-bg);
+    border: 1px solid #4a3d25; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+  .auth pre { background: rgba(12, 13, 17, 0.8); border: 1px solid #2a2418; color: var(--gold); }
+  .notice h2 { color: #ff9a94; }
+  .notice.stopping h2 { color: var(--gold); }
+  .status-pill.active { border-color: color-mix(in srgb, var(--ok) 55%, transparent); box-shadow: 0 0 10px rgba(76, 195, 138, 0.25); }
+
+  @media (max-width: 640px) {
+    .session-card { padding-left: 118px; }
+    .session-card::before { width: 132px; background-size: 132px auto; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .provider, .session-card { transition: none; }
+  }
+}

package/web/icons/README.md

@@ -0,0 +1,8 @@
+# Provider icons
+
+Drop an SVG named after a provider id (for example `anthropic.svg`) into this
+folder and the page shows it instead of the lettered badge. A provider in
+`providers.json` can also point `icon` at any URL path the manager serves.
+
+No vendor logos ship with Agent Guild. If you add one, follow that vendor's
+brand guidelines.

package/web/index.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Agent Guild</title>
+  <meta name="color-scheme" content="light dark">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%235B5BD6'/%3E%3Cpath d='M9 22l7-12 7 12' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+  <link rel="stylesheet" href="/vendor/xterm/xterm.css">
+  <link rel="stylesheet" href="/styles.css">
+  <link rel="stylesheet" href="/art/art.css">
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="8" fill="currentColor"/><path d="M9 22l7-12 7 12" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <h1>Agent Guild</h1>
+    </div>
+    <div class="topbar-end">
+      <div id="connection" class="connection" role="status" aria-live="polite">
+        <span class="dot"></span><span class="label">Connecting…</span>
+      </div>
+      <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>
+    </div>
+  </header>
+
+  <main id="app" hidden>
+    <section class="launcher" aria-labelledby="launch-heading">
+      <div class="section-head">
+        <h2 id="launch-heading">Start a session</h2>
+        <label class="cwd">
+          <span>Working folder</span>
+          <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder">
+        </label>
+      </div>
+      <div id="providers" class="providers" role="list"></div>
+    </section>
+
+    <section class="sessions" aria-labelledby="sessions-heading">
+      <div class="section-head">
+        <h2 id="sessions-heading">Sessions <span id="session-count" class="count"></span></h2>
+      </div>
+      <div id="sessions" class="session-grid" role="list"></div>
+      <p id="empty" class="empty">No sessions yet. Pick a provider above to start one. Sessions keep running when you close this page.</p>
+    </section>
+  </main>
+
+  <section id="auth" class="auth" hidden>
+    <h2>Open Agent Guild from the launcher</h2>
+    <p>This page needs the access token of your local session manager. Run this command and it will open the page for you:</p>
+    <pre>agent-guild open</pre>
+    <p>Or paste the token printed by <code>agent-guild url</code>:</p>
+    <form id="auth-form">
+      <input id="auth-token" type="password" autocomplete="off" placeholder="Access token" aria-label="Access token">
+      <button type="submit" class="btn primary">Connect</button>
+    </form>
+    <p id="auth-error" class="error" role="alert"></p>
+  </section>
+
+  <section id="stopped" class="auth notice" hidden aria-live="polite">
+    <h2 id="stopped-title">Stopping the session manager…</h2>
+    <p id="stopped-text">Ending every session. This can take a few seconds.</p>
+    <p>To start again, run this command or double-click the launcher:</p>
+    <pre>agent-guild open</pre>
+    <p>This page reconnects by itself when the manager is back.</p>
+  </section>
+
+  <div id="terminal-panel" class="terminal-panel" hidden role="dialog" aria-modal="false" aria-labelledby="panel-title">
+    <div class="panel-bar">
+      <div class="panel-title">
+        <span id="panel-icon" class="provider-icon small"></span>
+        <div>
+          <div id="panel-title" class="title"></div>
+          <div id="panel-sub" class="sub"></div>
+        </div>
+        <div id="panel-agents" class="agents"></div>
+      </div>
+      <div class="panel-actions">
+        <button id="panel-stop" class="btn danger" type="button">Stop</button>
+        <button id="panel-close" class="btn" type="button" title="Hide the terminal. The session keeps running.">Hide</button>
+      </div>
+    </div>
+    <div id="terminal-host" class="terminal-host"></div>
+  </div>
+
+  <div id="toast" class="toast" role="alert" hidden></div>
+
+  <template id="provider-template">
+    <article class="provider" role="listitem">
+      <span class="provider-icon"></span>
+      <span class="provider-text">
+        <span class="vendor-line"><span class="vendor"></span><span class="tier" hidden></span></span>
+        <span class="tool"></span>
+        <span class="state"></span>
+      </span>
+      <div class="usage"></div>
+      <div class="provider-links">
+        <a class="console-link usage-link" target="_blank" rel="noopener noreferrer">Usage ↗</a>
+        <a class="console-link billing-link" target="_blank" rel="noopener noreferrer">Billing ↗</a>
+      </div>
+      <div class="provider-actions">
+        <button class="btn primary new" type="button">New</button>
+        <button class="btn existing" type="button">Existing…</button>
+        <button class="btn primary install" type="button">Install</button>
+        <button class="btn update" type="button"></button>
+        <span class="hint"></span>
+      </div>
+      <details class="copies" hidden>
+        <summary></summary>
+        <ul></ul>
+      </details>
+    </article>
+  </template>
+
+  <template id="meter-template">
+    <div class="meter">
+      <span class="meter-label"></span>
+      <span class="meter-bar"><span class="meter-fill"></span></span>
+      <span class="meter-value"></span>
+    </div>
+  </template>
+
+  <template id="session-template">
+    <article class="session-card" role="listitem" tabindex="0">
+      <span class="level-badge" aria-hidden="true"></span>
+      <div class="card-top">
+        <span class="provider-icon"></span>
+        <div class="card-title">
+          <div class="name"></div>
+          <div class="meta"></div>
+        </div>
+        <span class="model-pill"></span>
+        <span class="status-pill"></span>
+      </div>
+      <div class="cwd-line"></div>
+      <div class="agents-row">
+        <span class="agents-label">Agents</span>
+        <div class="agents"></div>
+      </div>
+      <div class="card-actions">
+        <button class="btn primary open" type="button">Open</button>
+        <button class="btn rename" type="button">Rename</button>
+        <button class="btn danger stop" type="button">Stop</button>
+        <button class="btn remove" type="button">Remove</button>
+      </div>
+    </article>
+  </template>
+
+  <script src="/vendor/xterm/xterm.js"></script>
+  <script src="/vendor/xterm/addon-fit.js"></script>
+  <script src="/vendor/xterm/addon-web-links.js"></script>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>

package/web/styles.css

@@ -0,0 +1,226 @@
+:root {
+  --bg: #f6f7f9;
+  --surface: #ffffff;
+  --surface-2: #f0f2f5;
+  --border: #dde1e7;
+  --text: #1b1f24;
+  --muted: #5f6b7a;
+  --accent: #5b5bd6;
+  --accent-text: #ffffff;
+  --danger: #c93c37;
+  --ok: #1f8a4c;
+  --warn: #b7791f;
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
+  --term-bg: #0f1115;
+  --radius: 10px;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 15px;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1115;
+    --surface: #171a21;
+    --surface-2: #1e222b;
+    --border: #2a303b;
+    --text: #e6e9ef;
+    --muted: #9aa4b2;
+    --accent: #7c7cf0;
+    --danger: #ef6b66;
+    --ok: #4cc38a;
+    --warn: #e0a84a;
+    --shadow: none;
+    color-scheme: dark;
+  }
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
+h1, h2 { margin: 0; }
+h1 { font-size: 1.1rem; font-weight: 650; }
+h2 { font-size: 1rem; font-weight: 600; }
+code, pre { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
+[hidden] { display: none !important; }
+
+.topbar {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 5;
+}
+.brand { display: flex; align-items: center; gap: 10px; }
+.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
+.topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; min-width: 0; }
+.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
+.connection .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
+.connection.ok .dot { background: var(--ok); }
+.connection.down .dot { background: var(--danger); }
+
+main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 28px; }
+.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
+.count { color: var(--muted); font-weight: 500; }
+
+.cwd { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; flex: 1 1 280px; max-width: 520px; }
+.cwd input, .auth input {
+  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem;
+}
+.cwd input:focus, .auth input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+.providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+.provider {
+  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 14px;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
+}
+.provider.unavailable .provider-icon { filter: grayscale(1); opacity: 0.45; }
+.provider-text { display: grid; gap: 2px; min-width: 0; }
+.provider .vendor-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
+.provider .vendor { font-weight: 600; }
+.provider .tier {
+  font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; max-width: 100%;
+  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.provider .tool { color: var(--muted); font-size: 0.85rem; }
+.provider .state { font-size: 0.75rem; color: var(--ok); }
+.provider .state.update-available { color: var(--warn); }
+.provider.unavailable .state { color: var(--muted); }
+.provider .update { color: var(--warn); border-color: var(--warn); }
+.provider .usage { grid-column: 1 / -1; display: grid; gap: 4px; }
+.provider .usage:empty { display: none; }
+.meter { display: grid; grid-template-columns: 5.5em 1fr auto; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--muted); }
+.meter-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.meter-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
+.meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
+.meter.low .meter-fill { background: var(--warn); }
+.meter.empty .meter-fill { background: var(--danger); }
+.meter-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.usage-note { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.provider-links { grid-column: 1 / -1; display: flex; gap: 14px; font-size: 0.78rem; }
+.console-link { color: var(--accent); text-decoration: none; }
+.console-link:hover { text-decoration: underline; }
+.console-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+.provider-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.provider .hint { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
+.provider .copies { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
+.provider .copies summary { cursor: pointer; color: var(--warn); }
+.provider .copies ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+.provider .copies li span { display: block; }
+.provider .copies .copy-name { color: var(--text); }
+.provider .copies code { font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; color: var(--text); }
+.provider.busy { opacity: 0.6; pointer-events: none; }
+
+.provider-icon {
+  --c: #64748b;
+  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
+  background: var(--c); color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
+  background-size: cover; background-position: center;
+}
+.provider-icon.has-image { background-color: transparent; }
+.provider-icon.small { width: 30px; height: 30px; border-radius: 9px; font-size: 0.85rem; }
+
+.session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
+.session-card {
+  display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface); box-shadow: var(--shadow); cursor: pointer;
+}
+.session-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.session-card.exited { opacity: 0.75; }
+.card-top { display: flex; align-items: center; gap: 12px; }
+.card-title { flex: 1; min-width: 0; }
+.card-title .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card-title .meta, .cwd-line { color: var(--muted); font-size: 0.8rem; }
+.cwd-line { font-family: ui-monospace, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+.status-pill {
+  font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
+  background: var(--surface-2); color: var(--muted);
+}
+.model-pill {
+  font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
+  max-width: 11em; overflow: hidden; text-overflow: ellipsis;
+  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent);
+}
+.model-pill.screen { font-weight: 500; }
+.status-pill.active { color: var(--ok); }
+.status-pill.active::before { content: "● "; animation: pulse 1.2s ease-in-out infinite; }
+.status-pill.exited { color: var(--danger); }
+
+.agents-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
+.agents-label { font-size: 0.75rem; color: var(--muted); }
+.agents { display: flex; flex-wrap: wrap; gap: 6px; }
+.agents:empty::after { content: "none reported"; font-size: 0.75rem; color: var(--muted); }
+.agent {
+  --c: #64748b;
+  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; position: relative;
+  background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--text);
+  border: 2px solid var(--c); font-size: 0.72rem; font-weight: 700;
+}
+.agent.working::after {
+  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c);
+  opacity: 0; animation: ring 1.6s ease-out infinite;
+}
+.agent.waiting { border-style: dashed; }
+.agent.done, .agent.idle { opacity: 0.5; }
+.panel-title .agents:empty::after { content: none; }
+
+.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.btn {
+  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
+  color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer;
+}
+.btn:hover { border-color: var(--muted); }
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.btn.danger { color: var(--danger); }
+.btn.danger:hover { border-color: var(--danger); }
+.btn:disabled { opacity: 0.6; cursor: progress; }
+.stop-manager { white-space: nowrap; }
+
+.empty { color: var(--muted); margin: 8px 0 0; }
+
+.auth { max-width: 560px; margin: 60px auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 12px; }
+.auth p { margin: 0; color: var(--muted); line-height: 1.5; }
+.auth pre { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
+.auth form { display: flex; gap: 8px; }
+.notice h2 { color: var(--danger); }
+.notice.stopping h2 { color: var(--warn); }
+.error { color: var(--danger); min-height: 1.2em; }
+
+.terminal-panel {
+  /* Below the top bar, whose height the page publishes as --topbar-h; it grows when the bar wraps. */
+  position: fixed; inset: calc(var(--topbar-h, 52px) + 12px) 16px 16px; z-index: 10; display: flex; flex-direction: column;
+  background: var(--term-bg); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); overflow: hidden;
+}
+.panel-bar {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
+  background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap;
+}
+.panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
+.panel-title .title { font-weight: 600; }
+.panel-title .sub { color: var(--muted); font-size: 0.78rem; }
+.panel-actions { display: flex; gap: 8px; }
+.terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
+.terminal-host > div { height: 100%; }
+
+.toast {
+  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
+  max-width: min(640px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 8px;
+  background: var(--text); color: var(--bg); font-size: 0.9rem; box-shadow: var(--shadow); white-space: pre-wrap;
+}
+
+@keyframes pulse { 50% { opacity: 0.35; } }
+@keyframes ring { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .status-pill.active::before, .agent.working::after { animation: none; }
+}
+
+@media (max-width: 640px) {
+  .topbar { padding: 10px 16px; flex-wrap: wrap; }
+  .brand h1 { white-space: nowrap; }
+  .topbar-end { flex: 1 1 100%; justify-content: space-between; }
+  .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
+  .session-grid { grid-template-columns: 1fr; }
+  .cwd { flex-basis: 100%; }
+}