@oddessentials/agent-guild 0.2.0 → 0.4.0

package/web/app.js

@@ -3,6 +3,10 @@
 
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
+const ACCOUNTS_KEY = 'agentGuild.accounts';
+const THEME_KEY = 'agentGuild.theme';
+const NEWS_SEEN_KEY = 'agentGuild.newsSeen';
+const NEWS_FILTER_KEY = 'agentGuild.newsFilter';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 
 const $ = (id) => document.getElementById(id);
@@ -10,13 +14,19 @@ const state = {
   token: null,
   providers: [],
   usage: new Map(),
+  accounts: {},
   stats: null,
   statsFor: new Map(),
+  news: null,
   sessions: new Map(),
   views: new Map(),
   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 +53,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 +243,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 +308,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 +325,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 +424,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 +460,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);
   }
 }
 
@@ -754,6 +903,291 @@ function closeModels() {
   if ($('models').open) $('models').close();
 }
 
+const NEWS_LATEST = 5;
+const NEWS_POLL_MS = 10 * 60 * 1000;
+const NEWS_FILTERS = [['all', 'All'], ['news', 'News'], ['releases', 'Releases'], ['research', 'Research']];
+const newsView = { shown: null, since: Infinity, filter: 'all', opener: null };
+let newsLoading = null;
+let newsAgain = false;
+let newsLoadedAt = 0;
+
+function newsSeen() {
+  const seen = Date.parse(load(NEWS_SEEN_KEY));
+  return Number.isFinite(seen) ? seen : null;
+}
+
+function newestTime(items) {
+  return items.reduce((newest, item) => Math.max(newest, Date.parse(item.publishedAt) || 0), 0);
+}
+
+function loadNews() {
+  if (newsLoading) {
+    newsAgain = true;
+    return newsLoading;
+  }
+  newsLoading = api('GET', '/news').then(setNews, () => {}).finally(() => {
+    newsLoading = null;
+    newsLoadedAt = Date.now();
+    if (newsAgain) {
+      newsAgain = false;
+      loadNews();
+    }
+  });
+  return newsLoading;
+}
+
+function setNews(news) {
+  state.news = news;
+  if (newsSeen() === null && news.items.length) save(NEWS_SEEN_KEY, new Date(newestTime(news.items)).toISOString());
+  renderLatestNews();
+  if ($('news').open) updateNewsPanel();
+}
+
+function webHref(value) {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function newsTitle(item) {
+  const href = webHref(item.url);
+  const title = document.createElement(href ? 'a' : 'span');
+  title.className = 'news-link';
+  title.textContent = item.title;
+  if (href) {
+    title.href = href;
+    title.target = '_blank';
+    title.rel = 'noopener noreferrer';
+    title.setAttribute('aria-description', 'Opens in a new tab');
+  }
+  return title;
+}
+
+function newsMeta(item) {
+  const meta = document.createElement('span');
+  meta.className = 'news-meta';
+  const time = document.createElement('time');
+  time.dateTime = item.publishedAt;
+  time.textContent = relativeTime(item.publishedAt);
+  time.title = new Date(item.publishedAt).toLocaleString();
+  meta.append(`${item.source} · `, time);
+  return meta;
+}
+
+function isNew(item, since) {
+  return Date.parse(item.publishedAt) > since;
+}
+
+function newBadge() {
+  return badge('new', 'New', 'Published since you last opened the news');
+}
+
+function latestNews(items) {
+  const sources = new Set();
+  const latest = [];
+  for (const item of items) {
+    if (item.category !== 'news' || sources.has(item.source)) continue;
+    sources.add(item.source);
+    latest.push(item);
+    if (latest.length === NEWS_LATEST) break;
+  }
+  return latest;
+}
+
+function failureLines(news) {
+  const groups = new Map();
+  for (const source of news.sources) if (source.error) groups.set(source.error, [...(groups.get(source.error) ?? []), source]);
+  return [...groups].map(([error, sources]) => {
+    if (sources.length === 1) {
+      const [source] = sources;
+      return `${source.name}: ${error} · ${source.okAt ? `showing items fetched ${relativeTime(source.okAt)}` : 'nothing fetched yet'}`;
+    }
+    const names = [...new Set(sources.map((source) => source.name))];
+    return `${names.length <= 3 ? listJoin(names) : `${sources.length} sources`}: ${error}`;
+  });
+}
+
+function newsNote(news) {
+  if (!news || (news.refreshing && news.items.length === 0)) return 'Loading news…';
+  const failed = news.sources.filter((s) => s.error);
+  if (news.items.length === 0 && failed.length > 0 && failed.length === news.sources.length) {
+    return `News could not be loaded. ${failureLines(news)[0]}. Agent Guild tries again in a few minutes.`;
+  }
+  return 'No news from the last 30 days.';
+}
+
+function renderLatestNews() {
+  const news = state.news;
+  const list = $('news-latest');
+  const seen = newsSeen() ?? Infinity;
+  const items = news ? latestNews(news.items) : [];
+  const focused = document.activeElement?.closest?.('#news-latest .news-row')?.dataset.id;
+  list.replaceChildren(...items.map((item) => {
+    const row = document.createElement('li');
+    row.className = 'news-row';
+    row.dataset.id = item.id;
+    row.append(newsTitle(item), ...(isNew(item, seen) ? [newBadge()] : []), newsMeta(item));
+    return row;
+  }));
+  if (focused) [...list.children].find((row) => row.dataset.id === focused)?.querySelector('.news-link')?.focus({ preventScroll: true });
+  list.hidden = items.length === 0;
+  const fresh = news ? news.items.filter((item) => item.category === 'news' && isNew(item, seen)).length : 0;
+  $('news-count').textContent = fresh ? `· ${fresh} new` : '';
+  $('news-note').textContent = items.length ? '' : newsNote(news);
+  $('news-note').hidden = items.length > 0;
+}
+
+function dayLabel(time) {
+  const date = new Date(time);
+  const today = new Date();
+  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+  if (date.toDateString() === today.toDateString()) return 'Today';
+  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday';
+  return date.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' });
+}
+
+function newsEntry(item) {
+  const entry = document.createElement('li');
+  entry.className = 'news-item';
+  entry.dataset.id = item.id;
+  const head = document.createElement('div');
+  head.className = 'news-head';
+  head.append(newsTitle(item), ...(isNew(item, newsView.since) ? [newBadge()] : []));
+  entry.append(head, newsMeta(item));
+  if (item.summary) {
+    const summary = document.createElement('p');
+    summary.className = 'news-summary';
+    const discussion = webHref(item.discussion);
+    if (discussion) {
+      const link = document.createElement('a');
+      link.className = 'news-discussion';
+      link.href = discussion;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      link.textContent = item.summary;
+      link.setAttribute('aria-description', `Opens the discussion on ${item.source} in a new tab`);
+      summary.append(link);
+    } else {
+      summary.textContent = item.summary;
+    }
+    entry.append(summary);
+  }
+  return entry;
+}
+
+function renderNewsFilters() {
+  $('news-filters').replaceChildren(...NEWS_FILTERS.map(([id, label]) => {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = 'news-filter';
+    chip.textContent = label;
+    chip.setAttribute('aria-pressed', String(id === newsView.filter));
+    chip.addEventListener('click', () => {
+      newsView.filter = id;
+      save(NEWS_FILTER_KEY, id);
+      for (const other of $('news-filters').children) other.setAttribute('aria-pressed', String(other === chip));
+      newsView.shown = state.news;
+      renderNewsList();
+      document.querySelector('.news-body').scrollTop = 0;
+    });
+    return chip;
+  }));
+}
+
+function renderNewsList() {
+  const shown = newsView.shown;
+  const items = (shown?.items ?? []).filter((item) => newsView.filter === 'all' || item.category === newsView.filter);
+  const groups = [];
+  for (const item of items) {
+    const label = dayLabel(Date.parse(item.publishedAt));
+    if (groups.at(-1)?.label !== label) groups.push({ label, items: [] });
+    groups.at(-1).items.push(item);
+  }
+  $('news-list').replaceChildren(...groups.map((group) => {
+    const section = document.createElement('section');
+    section.className = 'news-group';
+    const heading = document.createElement('h3');
+    heading.className = 'news-day';
+    heading.textContent = group.label;
+    const list = document.createElement('ul');
+    list.className = 'news-items';
+    list.append(...group.items.map(newsEntry));
+    section.append(heading, list);
+    return section;
+  }));
+  const label = NEWS_FILTERS.find(([id]) => id === newsView.filter)[1];
+  $('news-empty').textContent = items.length ? '' : newsView.filter === 'all' || !shown ? newsNote(shown) : `Nothing in ${label} from the last 30 days.`;
+  $('news-empty').hidden = items.length > 0;
+  $('news-fresh').hidden = true;
+  const fresh = (shown?.items ?? []).filter((item) => isNew(item, newsView.since)).length;
+  $('news-sub').textContent = fresh ? `${fresh} new since your last visit` : 'Newest first';
+}
+
+function renderNewsStatus() {
+  const news = state.news;
+  const status = $('news-status');
+  status.hidden = !news;
+  if (!news) return;
+  const updated = news.refreshing ? 'checking for news…' : news.refreshedAt ? `updated ${relativeTime(news.refreshedAt)}` : '';
+  const lines = [[`${news.sources.length} source${news.sources.length === 1 ? '' : 's'}`, updated].filter(Boolean).join(' · '), ...failureLines(news)];
+  status.replaceChildren(...lines.map((text) => {
+    const line = document.createElement('span');
+    line.textContent = text;
+    return line;
+  }));
+}
+
+function updateNewsPanel() {
+  renderNewsStatus();
+  if (!newsView.shown?.items.length) {
+    newsView.shown = state.news;
+    renderNewsList();
+    return;
+  }
+  const shownIds = new Set(newsView.shown.items.map((item) => item.id));
+  const added = state.news.items.filter((item) => !shownIds.has(item.id) && (newsView.filter === 'all' || item.category === newsView.filter)).length;
+  const fresh = $('news-fresh');
+  fresh.hidden = added === 0;
+  fresh.textContent = `Show ${added} new item${added === 1 ? '' : 's'}`;
+}
+
+function showFreshNews() {
+  const before = new Set(newsView.shown.items.map((item) => item.id));
+  newsView.shown = state.news;
+  renderNewsList();
+  const first = [...$('news-list').querySelectorAll('.news-item')].find((entry) => !before.has(entry.dataset.id));
+  (first?.querySelector('.news-link') ?? $('news-close')).focus();
+}
+
+function openNews() {
+  const dialog = $('news');
+  const saved = load(NEWS_FILTER_KEY);
+  newsView.filter = NEWS_FILTERS.some(([id]) => id === saved) ? saved : 'all';
+  newsView.since = newsSeen() ?? Infinity;
+  newsView.shown = state.news;
+  renderNewsFilters();
+  renderNewsList();
+  renderNewsStatus();
+  if (!dialog.open) {
+    newsView.opener = document.activeElement;
+    dialog.showModal();
+  }
+  ($('news-list').querySelector('.news-link') ?? $('news-close')).focus();
+  if (!state.news) loadNews();
+}
+
+function closeNews() {
+  if ($('news').open) $('news').close();
+}
+
+function tickNews() {
+  for (const time of document.querySelectorAll('#news-latest time, #news-list time')) time.textContent = relativeTime(time.dateTime);
+  if ($('news').open) renderNewsStatus();
+}
+
 const CHANNEL_LABELS = {
   npm: 'npm', native: 'native', brew: 'Homebrew', winget: 'WinGet', legacy: 'legacy install', unknown: 'unknown install',
 };
@@ -818,7 +1252,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 +1286,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 +1331,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 +1350,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 +1587,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');
@@ -1190,6 +1631,7 @@ function enterStopping(running = 0) {
   state.stopRemaining = null;
   closePanel();
   closeModels();
+  closeNews();
   for (const view of state.views.values()) view.dispose();
   state.views.clear();
   state.sessions.clear();
@@ -1246,6 +1688,12 @@ 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);
+      loadNews();
+    } else if (msg.type === 'news.updated') {
+      loadNews();
+    } else if (msg.type === 'manager.upgrade') {
+      setUpgrade(msg.upgrade);
     } else if (msg.type === 'manager.stopping') {
       enterStopping(msg.running);
     } else if (msg.type === 'manager.stopped') {
@@ -1297,9 +1745,11 @@ function readTokenFromHash() {
 
 let usageTimer;
 let statsInterval;
+let newsTimer;
 
 function showAuth(message = '') {
   closeModels();
+  closeNews();
   $('app').hidden = true;
   $('terminal-panel').hidden = true;
   $('stopped').hidden = true;
@@ -1332,6 +1782,8 @@ async function boot() {
   loadStats();
   clearInterval(statsInterval);
   statsInterval = setInterval(loadStats, 60 * 60 * 1000);
+  clearInterval(newsTimer);
+  newsTimer = setInterval(() => { if (document.visibilityState === 'visible') loadNews(); }, NEWS_POLL_MS);
 }
 
 $('auth-form').addEventListener('submit', (e) => {
@@ -1374,6 +1826,21 @@ document.addEventListener('keydown', (e) => {
 }, true);
 addEventListener('scroll', () => { if (tipFor) hideTip(); }, true);
 addEventListener('resize', () => { if (tipFor) hideTip(); });
+$('news-all').addEventListener('click', openNews);
+$('news-close').addEventListener('click', closeNews);
+$('news-fresh').addEventListener('click', showFreshNews);
+$('news').addEventListener('click', (e) => { if (e.target === $('news')) closeNews(); });
+$('news').addEventListener('close', () => {
+  const newest = newestTime(newsView.shown?.items ?? []);
+  if (newest > (newsSeen() ?? 0)) save(NEWS_SEEN_KEY, new Date(newest).toISOString());
+  renderLatestNews();
+  const opener = newsView.opener?.isConnected && !newsView.opener.closest('[hidden]') ? newsView.opener : $('news-all');
+  opener.focus();
+  newsView.opener = null;
+});
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible' && state.connected && Date.now() - newsLoadedAt > 60000) loadNews();
+});
 $('models-more').addEventListener('click', () => {
   const before = $('models-list').childElementCount;
   modelsView.all = true;
@@ -1381,6 +1848,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,7 +1862,10 @@ $('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);
+setInterval(tickNews, 30000);
 
 // The terminal panel sits below the top bar, which wraps onto two rows on
 // narrow screens; publish its height so the panel never covers its controls.