@oddessentials/agent-guild 0.1.1 → 0.3.0

package/web/art/art.css

@@ -1,11 +1,13 @@
 .level-badge { display: none; }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --gold: #e8c47c;
-    --gold-dim: #8a6d3b;
-    --card-bg: rgba(18, 20, 26, 0.9);
-  }
+/* The guild look is the dark theme. The rules below nest under the theme
+   attribute that theme.js sets on <html>, so they apply whether the user
+   chose dark or the system did. :where() keeps their specificity as it was
+   inside the media query, so styles.css still loses to them only on order. */
+:where(:root[data-theme="dark"]) {
+  --gold: #e8c47c;
+  --gold-dim: #8a6d3b;
+  --card-bg: rgba(18, 20, 26, 0.9);
 
   .provider, .session-card {
     --pc: #a67cf6;
@@ -109,6 +111,50 @@
   .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); }
 
+  .model-stats-head { color: var(--gold); }
+  .info { color: #b89a5e; }
+  .info:hover, .info:focus-visible { color: var(--gold); }
+  .tip {
+    background: #12141a; color: #e9e2cf; border: 1px solid #4a3d25;
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 10px 28px rgba(0, 0, 0, 0.6);
+  }
+  .tip strong { color: var(--gold); font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
+  .stat-bar { height: 7px; background: #0c0e12; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.18); }
+  .stat-fill {
+    background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 55%, #000), var(--tier));
+    box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 50%, transparent);
+  }
+  .stat-tier {
+    border-radius: 3px; font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
+    background: linear-gradient(color-mix(in srgb, var(--tier) 34%, #1a1d26), #0d0f15);
+    border-color: color-mix(in srgb, var(--tier) 70%, #000);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 6px color-mix(in srgb, var(--tier) 30%, transparent);
+  }
+  .tier-s .stat-tier {
+    color: #2b1b06; border-color: #f6dea6;
+    background: linear-gradient(180deg, #fbe9bd 0%, #e2b867 55%, #a97b35 100%);
+    box-shadow: 0 0 10px rgba(232, 196, 124, 0.6);
+  }
+
+  .models {
+    border-radius: 6px; border-color: #4a3d25; background: #12141a;
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6);
+  }
+  .models::after {
+    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
+    border: 44px solid transparent; border-image: url("/art/ui/frame.png") 168;
+  }
+  .models::backdrop { background: rgba(5, 6, 9, 0.72); }
+  .models-bar { padding: 20px 24px 12px; }
+  .models-body { padding: 0 24px 14px; }
+  .models-source { padding: 10px 24px 20px; }
+  .models-bar, .models-source, .model-columns, .model { border-color: #2a2418; }
+  .model-columns { background: #12141a; }
+  .model-toggle:hover { background: rgba(232, 196, 124, 0.06); }
+  .model-group h4 { color: #c9ab72; }
+  .badge { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; }
+  .model-pill:hover { border-color: var(--gold-dim); }
+
   .session-card { padding-left: 152px; min-height: 196px; }
   .session-card::before {
     inset: 0 auto 0 0; width: 168px; background-size: 168px auto;

package/web/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Agent Guild</title>
   <meta name="color-scheme" content="light dark">
+  <script src="/theme.js"></script>
   <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">
@@ -20,6 +21,9 @@
       <div id="connection" class="connection" role="status" aria-live="polite">
         <span class="dot"></span><span class="label">Connecting…</span>
       </div>
+      <span id="upgrade-note" class="upgrade-note" hidden></span>
+      <button id="upgrade" class="btn upgrade" type="button" hidden></button>
+      <button id="theme-toggle" class="btn theme-toggle" type="button"></button>
       <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>
@@ -83,6 +87,26 @@
     <div id="terminal-host" class="terminal-host"></div>
   </div>
 
+  <dialog id="models" class="models" aria-labelledby="models-title">
+    <div class="models-bar">
+      <span id="models-icon" class="provider-icon small"></span>
+      <div class="models-heading">
+        <h2 id="models-title"></h2>
+        <p id="models-sub" class="sub"></p>
+      </div>
+      <button id="models-close" class="btn" type="button">Close</button>
+    </div>
+    <div class="models-body">
+      <div id="models-columns" class="model-columns" aria-hidden="true"></div>
+      <div id="models-list"></div>
+      <button id="models-more" class="btn models-more" type="button" hidden></button>
+      <p id="models-note" class="models-note"></p>
+    </div>
+    <p id="models-source" class="models-source"></p>
+  </dialog>
+
+  <div id="tip" class="tip" aria-hidden="true" hidden><strong id="tip-title"></strong><span id="tip-source"></span><p id="tip-text"></p></div>
+
   <div id="toast" class="toast" role="alert" hidden></div>
 
   <template id="provider-template">
@@ -93,7 +117,9 @@
         <span class="tool"></span>
         <span class="state"></span>
       </span>
+      <div class="accounts" role="tablist" aria-label="Accounts" hidden></div>
       <div class="usage"></div>
+      <div class="model-stats"></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>
@@ -120,6 +146,28 @@
     </div>
   </template>
 
+  <template id="stat-template">
+    <div class="stat">
+      <span class="stat-label"><span class="stat-name"></span><button class="info" type="button">i</button></span>
+      <span class="stat-reading" role="img">
+        <span class="stat-bar"><span class="stat-fill"></span></span>
+        <span class="stat-value"></span>
+        <span class="stat-note"></span>
+      </span>
+    </div>
+  </template>
+
+  <template id="model-template">
+    <section class="model">
+      <h3 class="model-head">
+        <button class="model-toggle" type="button" aria-expanded="false">
+          <span class="model-title"><span class="model-name"></span></span>
+        </button>
+      </h3>
+      <div class="model-detail" hidden></div>
+    </section>
+  </template>
+
   <template id="session-template">
     <article class="session-card" role="listitem" tabindex="0">
       <span class="level-badge" aria-hidden="true"></span>
@@ -129,7 +177,7 @@
           <div class="name"></div>
           <div class="meta"></div>
         </div>
-        <span class="model-pill"></span>
+        <button class="model-pill" type="button"></button>
         <span class="status-pill"></span>
       </div>
       <div class="cwd-line"></div>

package/web/styles.css

@@ -18,21 +18,20 @@
   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;
-  }
+/* theme.js sets data-theme from the saved choice or the system setting before the first paint. */
+:root[data-theme="dark"] {
+  --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; }
@@ -69,7 +68,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 
 .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;
+  display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; 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; }
@@ -86,6 +85,16 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .provider .state.update-available { color: var(--warn); }
 .provider.unavailable .state { color: var(--muted); }
 .provider .update { color: var(--warn); border-color: var(--warn); }
+.provider .accounts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
+.account-chip {
+  font: inherit; font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); max-width: 100%;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.account-chip:hover { border-color: var(--muted); }
+.account-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.account-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.account-chip.unsigned { border-style: dashed; }
 .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); }
@@ -96,6 +105,69 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .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 .model-stats {
+  grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(24px, 1fr) auto; align-items: center; gap: 2px 8px;
+}
+.provider .model-stats:empty { display: none; }
+.provider .model-stats > .usage-note { grid-column: 1 / -1; contain: inline-size; }
+.model-stats-head {
+  grid-column: 1 / -1; justify-self: start; max-width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: var(--accent);
+  font: inherit; font-size: 0.78rem; text-align: left; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.model-stats-head::after { content: " ›"; }
+.model-stats-head:hover { text-decoration: underline; }
+.model-stats-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+
+.stat {
+  --tier: var(--border);
+  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
+  min-height: 24px; font-size: 0.75rem; color: var(--muted);
+}
+.stat-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.stat-reading { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
+.info {
+  position: relative; flex: none; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; padding: 0;
+  border: 1px solid color-mix(in srgb, currentColor 50%, transparent); border-radius: 50%; background: none; color: var(--muted);
+  font: italic 700 0.68rem/1 Georgia, "Times New Roman", serif; cursor: help;
+}
+.info::after { content: ""; position: absolute; inset: -6px; }
+.info:hover, .info:focus-visible { color: var(--accent); border-color: currentColor; }
+.info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.tip {
+  position: fixed; z-index: 30; width: max-content; max-width: min(320px, calc(100vw - 16px)); margin: 0; padding: 9px 11px;
+  border-radius: 8px; background: var(--text); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  font-size: 0.78rem; line-height: 1.45; pointer-events: none;
+}
+.tip strong { font-weight: 600; }
+.tip span { margin-left: 6px; font-size: 0.72rem; opacity: 0.75; }
+.tip span::before { content: "· "; }
+.tip p { margin: 4px 0 0; }
+.stat-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
+.stat-fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--tier); }
+.stat-value, .model-index { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
+.stat-value { justify-content: flex-end; }
+.stat-value .level, .model-index .level { min-width: 3ch; text-align: right; }
+.stat.unmeasured .stat-value, .model-index.unmeasured { color: var(--muted); }
+.stat-note { display: none; }
+.stat-tier {
+  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 4px;
+  font-size: 0.68rem; font-weight: 700; line-height: 1;
+  color: var(--tier-ink); background: color-mix(in srgb, var(--tier) 16%, var(--surface));
+  border: 1px solid color-mix(in srgb, var(--tier) 50%, transparent);
+}
+.tier-s { --tier: #c99a2e; --tier-ink: #7a5200; }
+.tier-a { --tier: #8b5cf6; --tier-ink: #5b21b6; }
+.tier-b { --tier: #3b82f6; --tier-ink: #1d4ed8; }
+.tier-c { --tier: #22a35a; --tier-ink: #166534; }
+.tier-d { --tier: #94a3b8; --tier-ink: #475569; }
+:where(:root[data-theme="dark"]) {
+  .tier-s { --tier: #e0b45c; --tier-ink: #f6dea6; }
+  .tier-a { --tier: #a78bfa; --tier-ink: #ddd3ff; }
+  .tier-b { --tier: #60a5fa; --tier-ink: #cfe3ff; }
+  .tier-c { --tier: #4ade80; --tier-ink: #c6f6d5; }
+  .tier-d { --tier: #94a3b8; --tier-ink: #d4dbe4; }
+}
 .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; }
@@ -139,7 +211,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
   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);
+  border: 0; font-family: inherit; cursor: pointer;
 }
+.model-pill:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
+.model-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .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; }
@@ -174,7 +249,9 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .btn.danger { color: var(--danger); }
 .btn.danger:hover { border-color: var(--danger); }
 .btn:disabled { opacity: 0.6; cursor: progress; }
-.stop-manager { white-space: nowrap; }
+.stop-manager, .theme-toggle, .upgrade { white-space: nowrap; }
+.btn.upgrade { color: var(--warn); border-color: var(--warn); }
+.upgrade-note { font-size: 0.85rem; color: var(--warn); }
 
 .empty { color: var(--muted); margin: 8px 0 0; }
 
@@ -203,6 +280,67 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
 
+.models {
+  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: hidden;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+}
+.models[open] { display: flex; flex-direction: column; }
+.models::backdrop { background: rgba(15, 17, 21, 0.5); }
+.models-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.models-heading { flex: 1; min-width: 0; }
+.models-heading .sub { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; }
+.models-body { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 14px; }
+.model-columns, .model-toggle { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 6.5rem) 4.5rem; align-items: center; gap: 8px; }
+.model-columns {
+  position: sticky; top: 0; z-index: 1; padding: 10px 8px 6px; background: var(--surface);
+  border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; font-weight: 600;
+}
+.model-columns span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-columns span:last-child, .model-context { text-align: right; }
+.model { border-bottom: 1px solid var(--border); }
+.model-head { margin: 0; font: inherit; }
+.model-toggle {
+  width: 100%; padding: 9px 8px; border: 0; border-radius: 6px; background: none; color: var(--text);
+  font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
+}
+.model-toggle:hover { background: var(--surface-2); }
+.model-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.model-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
+.model-name { font-weight: 600; overflow-wrap: anywhere; }
+.model-name::before { content: "▸"; content: "▸" / ""; display: inline-block; width: 1em; color: var(--muted); transition: transform 0.15s; }
+.model-toggle[aria-expanded="true"] .model-name::before { transform: rotate(90deg); }
+.model-context { color: var(--muted); font-variant-numeric: tabular-nums; }
+.badge {
+  font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
+  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
+}
+.badge.in-use { --badge: var(--accent); color: color-mix(in srgb, var(--badge) 80%, #000); }
+.badge.new { --badge: var(--ok); color: color-mix(in srgb, var(--badge) 72%, #000); }
+.badge.expires { --badge: var(--warn); color: color-mix(in srgb, var(--badge) 62%, #000); }
+.badge.in-use, .badge.new, .badge.expires { border-color: color-mix(in srgb, var(--badge) 45%, transparent); }
+:where(:root[data-theme="dark"]) {
+  .badge.in-use, .badge.new, .badge.expires { color: var(--badge); }
+}
+.model-detail {
+  display: grid; grid-template-columns: max-content minmax(48px, 1fr) auto minmax(0, 19em); gap: 14px 10px;
+  padding: 4px 8px 16px calc(8px + 1em);
+}
+.model-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 2px; }
+.model-group h4, .model-none { grid-column: 1 / -1; }
+.model-group h4 { margin: 0 0 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
+.model-detail .stat-note { display: block; font-size: 0.72rem; }
+.model-detail .stat-fill { transform-origin: left; animation: stat-fill 0.45s ease-out; }
+.model-none { margin: 0; font-size: 0.75rem; color: var(--muted); }
+.model-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-size: 0.78rem; }
+.model-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
+.model-facts div { display: flex; gap: 6px; }
+.model-facts dt { color: var(--muted); }
+.model-facts dd { margin: 0; }
+.models-more { margin-top: 12px; }
+.models-note { margin: 14px 0 0; color: var(--muted); }
+.models-source { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
+
 .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;
@@ -211,9 +349,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 
 @keyframes pulse { 50% { opacity: 0.35; } }
 @keyframes ring { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
+@keyframes stat-fill { from { transform: scaleX(0); } }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pill.active::before, .agent.working::after { animation: none; }
+  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill { animation: none; }
+  .model-name::before { transition: none; }
 }
 
 @media (max-width: 640px) {
@@ -223,4 +363,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
   .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
   .session-grid { grid-template-columns: 1fr; }
   .cwd { flex-basis: 100%; }
+  .models { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
+  .model-columns, .model-toggle { grid-template-columns: minmax(0, 1fr) repeat(3, 4.6rem); }
+  .model-columns span:last-child, .model-context { display: none; }
+  .model-detail { padding-left: 8px; grid-template-columns: max-content minmax(32px, 1fr) auto; }
+  .model-detail .stat { padding-bottom: 6px; }
+  .model-detail .stat-reading { row-gap: 1px; }
+  .model-detail .stat-note { grid-column: 1 / -1; }
 }

package/web/theme.js

@@ -0,0 +1,10 @@
+// Applies the chosen theme before the first paint, so the page never flashes
+// the other one. Loaded in <head> as a plain script; app.js owns the toggle.
+(function () {
+  var theme = null;
+  try { theme = localStorage.getItem('agentGuild.theme'); } catch (e) { /* storage unavailable */ }
+  if (theme !== 'light' && theme !== 'dark') {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  document.documentElement.dataset.theme = theme;
+})();