@oddessentials/agent-guild 0.2.0 → 0.4.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;
@@ -153,6 +155,26 @@
   .badge { background: rgba(0, 0, 0, 0.45); border-color: #4a3d25; }
   .model-pill:hover { border-color: var(--gold-dim); }
 
+  .news-latest {
+    border-radius: 6px; border-color: #4a3d25; background: var(--card-bg);
+    box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+  .news-row + .news-row, .news-bar, .news-filters, .news-item, .news-status { border-color: #2a2418; }
+  .news-link { color: #f3ead8; }
+  a.news-link:visited { color: var(--muted); }
+  .news-panel {
+    background: #12141a; border-left-color: #4a3d25;
+    box-shadow: inset 1px 0 0 rgba(232, 196, 124, 0.08), -24px 0 60px rgba(0, 0, 0, 0.6);
+  }
+  .news-panel::backdrop { background: rgba(5, 6, 9, 0.72); }
+  .news-bar { padding: 16px 18px 12px; }
+  .news-filters, .news-status { padding-left: 18px; padding-right: 18px; }
+  .news-body { padding: 0 18px 14px; }
+  .news-day { background: #12141a; color: #c9ab72; }
+  .news-filter { border-color: #4a3d25; background: rgba(0, 0, 0, 0.35); }
+  .news-filter:hover { border-color: var(--gold-dim); }
+  .news-filter[aria-pressed="true"] { border-color: #b8955a; color: #fff; background: linear-gradient(#8e8ef6, #6262d6); }
+
   .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>
@@ -43,6 +47,15 @@
       <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>
+
+    <section class="news" aria-labelledby="news-heading">
+      <div class="section-head">
+        <h2 id="news-heading">Latest news <span id="news-count" class="count"></span></h2>
+        <button id="news-all" class="btn" type="button" aria-haspopup="dialog">All news</button>
+      </div>
+      <ol id="news-latest" class="news-latest" hidden></ol>
+      <p id="news-note" class="empty">Loading news…</p>
+    </section>
   </main>
 
   <section id="auth" class="auth" hidden>
@@ -101,6 +114,23 @@
     <p id="models-source" class="models-source"></p>
   </dialog>
 
+  <dialog id="news" class="news-panel" aria-labelledby="news-title">
+    <div class="news-bar">
+      <div class="news-heading">
+        <h2 id="news-title">News</h2>
+        <p id="news-sub" class="sub"></p>
+      </div>
+      <button id="news-close" class="btn" type="button">Close</button>
+    </div>
+    <div id="news-filters" class="news-filters" role="group" aria-label="Show"></div>
+    <div class="news-body">
+      <button id="news-fresh" class="btn news-fresh" type="button" hidden></button>
+      <div id="news-list"></div>
+      <p id="news-empty" class="news-empty" hidden></p>
+    </div>
+    <p id="news-status" class="news-status" hidden></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>
@@ -113,6 +143,7 @@
         <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">

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; }
@@ -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); }
@@ -152,7 +161,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .tier-b { --tier: #3b82f6; --tier-ink: #1d4ed8; }
 .tier-c { --tier: #22a35a; --tier-ink: #166534; }
 .tier-d { --tier: #94a3b8; --tier-ink: #475569; }
-@media (prefers-color-scheme: dark) {
+: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; }
@@ -240,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; }
 
@@ -308,7 +319,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .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); }
-@media (prefers-color-scheme: dark) {
+:where(:root[data-theme="dark"]) {
   .badge.in-use, .badge.new, .badge.expires { color: var(--badge); }
 }
 .model-detail {
@@ -330,6 +341,59 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
 .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; }
 
+.news-latest {
+  list-style: none; margin: 0; padding: 0;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
+}
+.news-row { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; padding: 9px 14px; }
+.news-row + .news-row { border-top: 1px solid var(--border); }
+.news-row .news-link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.news-row .badge, .news-row .news-meta { flex: none; }
+.news-link { color: var(--text); font-weight: 600; text-decoration: none; }
+a.news-link:hover, .news-discussion:hover { text-decoration: underline; }
+a.news-link:visited { color: var(--muted); }
+.news-link:focus-visible, .news-discussion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+.news-meta { color: var(--muted); font-size: 0.78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+.news-panel {
+  width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0;
+  border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text);
+  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.25);
+}
+.news-panel[open] { display: flex; flex-direction: column; animation: news-in 0.18s ease-out; }
+.news-panel::backdrop { background: rgba(15, 17, 21, 0.4); }
+.news-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.news-heading { flex: 1; min-width: 0; }
+.news-heading .sub { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; }
+.news-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+.news-filter {
+  font: inherit; font-size: 0.75rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
+}
+.news-filter:hover { border-color: var(--muted); }
+.news-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.news-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.news-body { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 14px; }
+.news-fresh { width: 100%; margin-top: 12px; }
+.news-day {
+  position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 6px; background: var(--surface);
+  color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
+}
+.news-items { list-style: none; margin: 0; padding: 0; }
+.news-item { padding: 10px 0; border-top: 1px solid var(--border); }
+.news-head { display: flex; align-items: baseline; gap: 6px; }
+.news-head .news-link { overflow-wrap: anywhere; }
+.news-head .badge { flex: none; margin-left: auto; }
+.news-item .news-meta { display: block; margin-top: 3px; }
+.news-summary {
+  margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+}
+.news-discussion { color: inherit; text-decoration: none; }
+.news-empty { margin: 14px 0 0; color: var(--muted); }
+.news-status { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
+.news-status span { display: block; }
+
 .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;
@@ -339,9 +403,10 @@ 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); } }
+@keyframes news-in { from { transform: translateX(24px); opacity: 0; } }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill { animation: none; }
+  .status-pill.active::before, .agent.working::after, .model-detail .stat-fill, .news-panel[open] { animation: none; }
   .model-name::before { transition: none; }
 }
 
@@ -359,4 +424,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; display: grid
   .model-detail .stat { padding-bottom: 6px; }
   .model-detail .stat-reading { row-gap: 1px; }
   .model-detail .stat-note { grid-column: 1 / -1; }
+  .news-row { flex-wrap: wrap; }
+  .news-row .news-link { flex-basis: 100%; white-space: normal; }
+  .news-panel { border-left: 0; }
 }

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;
+})();