@oddessentials/agent-guild 0.2.0 → 0.3.0

package/web/app.js

@@ -3,6 +3,8 @@
 
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
+const ACCOUNTS_KEY = 'agentGuild.accounts';
+const THEME_KEY = 'agentGuild.theme';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 
 const $ = (id) => document.getElementById(id);
@@ -10,6 +12,7 @@ const state = {
   token: null,
   providers: [],
   usage: new Map(),
+  accounts: {},
   stats: null,
   statsFor: new Map(),
   sessions: new Map(),
@@ -17,6 +20,10 @@ const state = {
   activeId: null,
   eventsSocket: null,
   eventsRetry: 0,
+  /** True while the events socket is open. */
+  connected: false,
+  /** The manager's own version check, from `hello` and `manager.upgrade`. */
+  upgrade: null,
   /** True from a shutdown request until the manager is reachable again. */
   stopping: false,
   /** After a stop: how many session processes did not confirm exiting, or null if the manager never said. */
@@ -43,8 +50,93 @@ function setConnection(kind, label) {
   const el = $('connection');
   el.className = `connection ${kind}`;
   el.querySelector('.label').textContent = label;
-  // The manager can only be stopped while the page can reach it.
-  $('stop-manager').hidden = kind !== 'ok';
+  // The manager can only be stopped or upgraded while the page can reach it.
+  state.connected = kind === 'ok';
+  $('stop-manager').hidden = !state.connected;
+  renderUpgrade();
+}
+
+// ---- theme ----------------------------------------------------------------
+
+/** theme.js applied the saved or system theme before the first paint; this keeps the button in step. */
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  const button = $('theme-toggle');
+  const other = theme === 'dark' ? 'light' : 'dark';
+  button.textContent = theme === 'dark' ? '☀ Light' : '☾ Dark';
+  button.title = `Switch to the ${other} theme`;
+  button.setAttribute('aria-label', `Switch to the ${other} theme`);
+}
+
+function currentTheme() {
+  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
+}
+
+function toggleTheme() {
+  const theme = currentTheme() === 'dark' ? 'light' : 'dark';
+  save(THEME_KEY, theme);
+  applyTheme(theme);
+}
+
+// ---- upgrading the manager ------------------------------------------------
+
+function renderUpgrade() {
+  const u = state.upgrade;
+  const button = $('upgrade');
+  const note = $('upgrade-note');
+  const offer = Boolean(state.connected && u?.available && u.command);
+  button.hidden = !offer;
+  if (offer) {
+    button.textContent = `Upgrade to ${u.latestVersion}`;
+    button.title = `Run "${u.command}" in a session. Sessions keep running; the new version is used once the manager is restarted.`;
+  }
+  let text = '';
+  let title = '';
+  const last = u?.lastInstall;
+  if (u?.installing) {
+    text = `Upgrading${u.latestVersion ? ` to v${u.latestVersion}` : ''}…`;
+    title = 'npm is running in a session. Keep the manager running until it finishes.';
+  } else if (u?.pendingVersion) {
+    text = `v${u.pendingVersion} installed · restart to use it`;
+    title = `Agent Guild ${u.pendingVersion} is installed, but this manager is still ${u.version}. Stop the manager and run "agent-guild open" to use it.`;
+  } else if (last?.outcome === 'failed') {
+    text = last.exitCode === null ? 'Upgrade failed' : `Upgrade failed (exit ${last.exitCode})`;
+    title = 'See the upgrade session for npm\'s output, then run the upgrade again: the files on disk may be incomplete. On Windows, files in use cannot be replaced: stop the manager first and run the command yourself.';
+  } else if (last?.outcome === 'unchanged') {
+    text = 'Upgrade finished, but this copy was not replaced';
+    title = `npm did not replace the files this manager runs from. Run${u.command ? ` "${u.command}"` : ' the npm install'} where Agent Guild is installed.`;
+  } else if (u?.available && !u.command) {
+    text = `v${u.latestVersion} available`;
+    title = u.guidance || '';
+  }
+  note.hidden = !state.connected || !text;
+  note.textContent = text;
+  note.title = title;
+}
+
+function setUpgrade(upgrade) {
+  const before = state.upgrade;
+  state.upgrade = upgrade || null;
+  renderUpgrade();
+  const pending = state.upgrade?.pendingVersion;
+  if (pending && pending !== before?.pendingVersion) {
+    toast(`Agent Guild ${pending} is installed. Stop the manager and run "agent-guild open" to use it.`, 10000);
+  }
+}
+
+async function upgradeManager() {
+  const button = $('upgrade');
+  button.disabled = true;
+  try {
+    const { session } = await api('POST', '/upgrade');
+    upsertSession(session);
+    openPanel(session.id);
+  } catch (err) {
+    if (err instanceof AuthError) return showAuth(err.message);
+    toast(err.message, 8000);
+  } finally {
+    button.disabled = false;
+  }
 }
 
 function relativeTime(iso) {
@@ -148,6 +240,51 @@ function wsUrl(path) {
 
 // ---- providers ------------------------------------------------------------
 
+function selectedAccount(provider) {
+  const accounts = provider.accounts || [];
+  return accounts.find((a) => a.id === state.accounts[provider.id]) || accounts[0] || { id: 'default', label: 'Default' };
+}
+
+function selectAccount(provider, id) {
+  state.accounts[provider.id] = id;
+  save(ACCOUNTS_KEY, JSON.stringify(state.accounts));
+}
+
+function usageFor(provider, account = selectedAccount(provider)) {
+  return state.usage.get(`${provider.id}/${account.id}`);
+}
+
+function renderAccounts(card, provider) {
+  const host = card.querySelector('.accounts');
+  const accounts = provider.accounts || [];
+  host.hidden = accounts.length < 2;
+  if (host.hidden) return host.replaceChildren();
+  const selected = selectedAccount(provider).id;
+  const same = host.children.length === accounts.length && accounts.every((a, i) => host.children[i].dataset.account === a.id);
+  if (!same) {
+    host.replaceChildren(...accounts.map((account) => {
+      const chip = document.createElement('button');
+      chip.type = 'button';
+      chip.className = 'account-chip';
+      chip.setAttribute('role', 'tab');
+      chip.dataset.account = account.id;
+      chip.addEventListener('click', () => {
+        selectAccount(provider, account.id);
+        renderAccounts(card, provider);
+        renderUsage(card, provider);
+      });
+      return chip;
+    }));
+  }
+  accounts.forEach((account, i) => {
+    const chip = host.children[i];
+    chip.classList.toggle('unsigned', usageFor(provider, account)?.signedIn === false);
+    chip.setAttribute('aria-selected', String(account.id === selected));
+    chip.textContent = account.label;
+    chip.title = `Start new ${provider.tool} sessions as the ${account.label} account`;
+  });
+}
+
 function renderProviders() {
   const list = $('providers');
   const tpl = $('provider-template');
@@ -168,7 +305,6 @@ function renderProviders() {
     const existing = node.querySelector('.existing');
     const hint = node.querySelector('.hint');
     start.hidden = !provider.available;
-    start.title = `Start a new ${provider.tool} session`;
     start.addEventListener('click', () => startSession(provider, node));
     existing.hidden = !provider.available || !provider.resumable;
     existing.title = `Resume one of ${provider.tool}'s own sessions by its id`;
@@ -186,6 +322,7 @@ function renderProviders() {
     renderHint(hint, provider);
     renderCopies(node.querySelector('.copies'), provider);
     renderConsoleLinks(node, provider);
+    renderAccounts(node, provider);
     renderUsage(node, provider);
     renderModelStats(node, provider);
     return node;
@@ -284,14 +421,21 @@ function creditsNote(usage) {
 
 function renderUsage(card, provider) {
   const host = card.querySelector('.usage');
-  const usage = state.usage.get(provider.id);
+  const account = selectedAccount(provider);
+  const usage = usageFor(provider, account);
   renderTier(card, provider, provider.usageSource ? usage : null);
+  const start = card.querySelector('.new');
+  const unsigned = Boolean(provider.available && usage?.signedIn === false);
+  start.textContent = unsigned ? 'Sign in' : 'New';
+  start.title = unsigned
+    ? `Start a ${provider.tool} session and sign in as the ${account.label} account`
+    : `Start a new ${provider.tool} session${provider.accounts?.length > 1 ? ` as the ${account.label} account` : ''}`;
   if (!provider.available || !provider.usageSource || !usage) return host.replaceChildren();
   if (usage.error || usage.windows.length === 0) {
     const note = document.createElement('div');
     note.className = 'usage-note';
-    note.textContent = `Usage: ${usage.error || 'no limits reported'}`;
-    note.title = note.textContent;
+    note.textContent = unsigned ? 'Not signed in yet' : `Usage: ${usage.error || 'no limits reported'}`;
+    note.title = unsigned ? usage.error : note.textContent;
     return host.replaceChildren(note, ...creditsNote(usage));
   }
   host.replaceChildren(...usage.windows.map((w) => {
@@ -313,10 +457,12 @@ function renderUsage(card, provider) {
 async function loadUsage() {
   let usage;
   try { ({ usage } = await api('GET', '/usage')); } catch { return; }
-  state.usage = new Map(usage.map((u) => [u.providerId, u]));
+  state.usage = new Map(usage.map((u) => [`${u.providerId}/${u.accountId ?? 'default'}`, u]));
   for (const card of $('providers').children) {
     const provider = state.providers.find((p) => p.id === card.dataset.id);
-    if (provider) renderUsage(card, provider);
+    if (!provider) continue;
+    renderAccounts(card, provider);
+    renderUsage(card, provider);
   }
 }
 
@@ -818,7 +964,7 @@ async function startSession(provider, card, { resume } = {}) {
   save(CWD_KEY, cwd);
   card.classList.add('busy');
   try {
-    const body = { providerId: provider.id, cwd: cwd || undefined, cols: 120, rows: 32, resume };
+    const body = { providerId: provider.id, account: selectedAccount(provider).id, cwd: cwd || undefined, cols: 120, rows: 32, resume };
     const { session } = await api('POST', '/sessions', body);
     upsertSession(session);
     openPanel(session.id);
@@ -852,6 +998,12 @@ function modelTitle(s) {
   return `Model ${modelText(s)}${id}, ${MODEL_SOURCES[s.model.source] || s.model.source}`;
 }
 
+function accountLabel(s) {
+  if (!s.account) return '';
+  const provider = state.providers.find((p) => p.id === s.provider.id);
+  return (provider?.accounts?.length ?? 0) > 1 || s.account.id !== 'default' ? s.account.label : '';
+}
+
 function statusText(s) {
   if (s.status === 'exited') {
     if (s.signal) return `Exited (${s.signal})`;
@@ -891,7 +1043,7 @@ function updateCard(node, s) {
   badge.title = `Level ${level}`;
   node.querySelector('.name').textContent = s.name;
   const resumed = s.resume ? ` · resumed ${s.resume}` : '';
-  node.querySelector('.meta').textContent = `${s.provider.vendor} · ${s.provider.tool} · started ${relativeTime(s.createdAt)}${resumed}`;
+  node.querySelector('.meta').textContent = [s.provider.vendor, s.provider.tool, accountLabel(s), `started ${relativeTime(s.createdAt)}${resumed}`].filter(Boolean).join(' · ');
   const pill = node.querySelector('.status-pill');
   pill.textContent = statusText(s);
   pill.className = `status-pill ${s.status === 'exited' ? 'exited' : s.activity}`;
@@ -910,7 +1062,8 @@ function updateCard(node, s) {
   node.querySelector('.stop').hidden = s.status !== 'running';
   node.querySelector('.remove').hidden = s.status === 'running';
   const modelLabel = s.model ? `, model ${modelText(s)}` : '';
-  node.setAttribute('aria-label', `${s.name}, ${s.provider.vendor}${modelLabel}, ${statusText(s)}, ${s.agents.length} agents`);
+  const accountName = accountLabel(s) ? `, ${accountLabel(s)} account` : '';
+  node.setAttribute('aria-label', `${s.name}, ${s.provider.vendor}${accountName}${modelLabel}, ${statusText(s)}, ${s.agents.length} agents`);
 }
 
 function renderSessions() {
@@ -1146,7 +1299,7 @@ function updatePanel() {
   if (!s) return;
   paintProviderIcon($('panel-icon'), s.provider);
   $('panel-title').textContent = s.name;
-  $('panel-sub').textContent = [s.provider.tool, modelText(s), statusText(s), s.cwd].filter(Boolean).join(' · ');
+  $('panel-sub').textContent = [s.provider.tool, accountLabel(s), modelText(s), statusText(s), s.cwd].filter(Boolean).join(' · ');
   $('panel-sub').title = modelTitle(s);
   renderAgents($('panel-agents'), s.agents);
   const stop = $('panel-stop');
@@ -1246,6 +1399,9 @@ function connectEvents() {
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
       for (const id of [...state.views.keys()]) if (!state.sessions.has(id)) dropSession(id);
       renderSessions();
+      setUpgrade(msg.upgrade);
+    } else if (msg.type === 'manager.upgrade') {
+      setUpgrade(msg.upgrade);
     } else if (msg.type === 'manager.stopping') {
       enterStopping(msg.running);
     } else if (msg.type === 'manager.stopped') {
@@ -1381,6 +1537,13 @@ $('models-more').addEventListener('click', () => {
   $('models-list').children[before]?.querySelector('.model-toggle')?.focus();
 });
 $('stop-manager').addEventListener('click', () => stopManager());
+$('upgrade').addEventListener('click', upgradeManager);
+$('theme-toggle').addEventListener('click', toggleTheme);
+applyTheme(currentTheme());
+// Follow the system setting until the user picks a theme.
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!load(THEME_KEY)) applyTheme(e.matches ? 'dark' : 'light');
+});
 $('panel-stop').addEventListener('click', () => {
   const s = state.sessions.get(state.activeId);
   if (!s) return;
@@ -1388,6 +1551,8 @@ $('panel-stop').addEventListener('click', () => {
   else removeSession(s.id);
 });
 $('cwd').value = load(CWD_KEY) || '';
+try { state.accounts = JSON.parse(load(ACCOUNTS_KEY)) || {}; } catch { state.accounts = {}; }
+if (typeof state.accounts !== 'object' || Array.isArray(state.accounts)) state.accounts = {};
 setInterval(renderSessions, 30000);
 
 // The terminal panel sits below the top bar, which wraps onto two rows on

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;

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>
@@ -113,6 +117,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 {

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