switchroom 0.15.37 → 0.15.39

package/dist/cli/ui/index.html

@@ -474,7 +474,14 @@
     }
 
     @media (min-width: 701px) {
-      .accounts-grid { display: none; }
+      /* The Accounts tab shows a wide-screen TABLE and a mobile card grid,
+         hiding the grid on desktop. Scope that hide to #accounts: the
+         Connections tab reuses .accounts-grid for its OAuth/Notion cards but
+         has NO table fallback, so an unscoped rule blanked every connection
+         card on any screen wider than 700px (the cards rendered but were
+         display:none, while the empty-state text — not in a grid — still
+         showed). */
+      #accounts .accounts-grid { display: none; }
     }
 
     @media (max-width: 600px) {
@@ -1029,20 +1036,21 @@
         .then(r => r.ok ? r.json().then(d => ({ ok: true, data: d })) : { ok: false, data: fallback })
         .catch(() => ({ ok: false, data: fallback }));
       try {
-        const [g, ms, n, ag] = await Promise.all([
+        const [g, ms, n, li, ag] = await Promise.all([
           safe(fetch(`${API}/api/google-accounts`, { headers: authHeaders() }), []),
           safe(fetch(`${API}/api/microsoft-accounts`, { headers: authHeaders() }), []),
           safe(fetch(`${API}/api/notion-workspace`, { headers: authHeaders() }), { configured: false, databases: [] }),
+          safe(fetch(`${API}/api/linear-agents`, { headers: authHeaders() }), { configured: false, agents: [] }),
           safe(fetch(`${API}/api/agents`, { headers: authHeaders() }), []),
         ]);
-        // Notion legitimately reports unconfigured — not a failure. The OAuth
-        // providers + the agent list are the ones whose failure must not read
-        // as "empty".
+        // Notion + Linear legitimately report unconfigured — not a failure. The
+        // OAuth providers + the agent list are the ones whose failure must not
+        // read as "empty".
         const fetchFailed = !g.ok || !ms.ok || !ag.ok;
         renderConnections({
-          google: g.data, microsoft: ms.data, notion: n.data,
+          google: g.data, microsoft: ms.data, notion: n.data, linear: li.data,
           agentNames: (ag.data || []).map(a => a.name).sort(),
-          googleFailed: !g.ok, microsoftFailed: !ms.ok, fetchFailed,
+          googleFailed: !g.ok, microsoftFailed: !ms.ok, linearFailed: !li.ok, fetchFailed,
         });
         clearError();
         // Self-heal a transient blip without a manual re-click. Bounded
@@ -1240,12 +1248,33 @@
       }
     }
 
-    function switchTab(tab) {
-      const tabs = ['summary', 'agents', 'accounts', 'system', 'memory', 'connections', 'schedule', 'approvals'];
-      for (const t of tabs) {
+    // Canonical tab list — kept in sync with the nav buttons above and with
+    // SPA_TAB_ROUTES in src/web/server.ts (the server serves the SPA shell for
+    // these paths so a reload/deep-link doesn't 404).
+    const TAB_NAMES = ['summary', 'agents', 'accounts', 'system', 'memory', 'connections', 'schedule', 'approvals'];
+
+    // Derive the active tab from the URL path (`/connections` → 'connections',
+    // '/' → 'summary'). Unknown paths fall back to summary.
+    function tabFromPath() {
+      const name = location.pathname.replace(/^\/+/, '').replace(/\/+$/, '');
+      return TAB_NAMES.includes(name) ? name : 'summary';
+    }
+
+    // opts.push === false suppresses the history push — used when the switch is
+    // itself driven by navigation (initial load, back/forward) so we don't
+    // double-stack history entries.
+    function switchTab(tab, opts) {
+      if (!TAB_NAMES.includes(tab)) tab = 'summary';
+      for (const t of TAB_NAMES) {
         document.getElementById(`tab-${t}`).classList.toggle('active', tab === t);
         document.getElementById(t).style.display = tab === t ? '' : 'none';
       }
+      // Mirror the tab into the URL path so reload/deep-link/back-forward all
+      // land here. Summary canonicalises to '/'.
+      if (!opts || opts.push !== false) {
+        const path = tab === 'summary' ? '/' : '/' + tab;
+        if (location.pathname !== path) history.pushState({ tab }, '', path);
+      }
       if (tab === 'summary') fetchSummary();
       if (tab === 'accounts') fetchAccounts();
       if (tab === 'system') fetchSystemHealth();
@@ -1255,6 +1284,11 @@
       if (tab === 'approvals') fetchApprovals();
     }
 
+    // Back/forward: restore the tab from the history entry (or the path).
+    window.addEventListener('popstate', (e) => {
+      switchTab((e.state && e.state.tab) || tabFromPath(), { push: false });
+    });
+
     // Fleet overview — ONE round-trip to the server-side aggregate
     // (/api/summary), which pulls each part through the same per-tab
     // cache so a Summary open warms the tabs and they can never disagree.
@@ -2117,6 +2151,7 @@
       const google = data.google || [];
       const microsoft = data.microsoft || [];
       const notion = data.notion || { configured: false, databases: [] };
+      const linear = data.linear || { configured: false, agents: [] };
       const agentNames = data.agentNames || [];
 
       // When a provider's fetch FAILED (not genuinely empty), its empty-state
@@ -2180,6 +2215,37 @@
           ${fullAccessBanner}${notionBody}
         </div>`;
 
+      // Linear — first-class OAuth app actors (config-only; the web tier never
+      // reads the per-agent vault, so no token/expiry is shown — and never the
+      // secret). One card per agent with linear_agent.enabled.
+      const linearCards = (linear.agents || []).map(a => {
+        const meta = [];
+        if (a.workspaceId) meta.push(`<div class="meta-item"><label>Workspace </label><span>${escapeHtml(a.workspaceId)}</span></div>`);
+        if (a.defaultTeamId) meta.push(`<div class="meta-item"><label>Default team </label><span>${escapeHtml(a.defaultTeamId)}</span></div>`);
+        if (a.tokenVaultKey) meta.push(`<div class="meta-item"><label>Token </label><span><code>${escapeHtml(a.tokenVaultKey)}</code></span></div>`);
+        return `
+        <div class="account-card">
+          <div class="account-card-header">
+            <div class="account-label">${escapeHtml(a.agent)}</div>
+            <span style="margin-left:auto" class="usage-pill primary">OAuth agent</span>
+          </div>
+          <div class="card-meta" style="padding:0">${meta.join('') || _dimC('—')}</div>
+        </div>`;
+      }).join('');
+      const linearNote = (linear.agents && linear.agents.length)
+        ? `<div style="margin:0 0 .6rem;font-size:.85rem;color:var(--text-dim)">Connected as Linear <b>OAuth app actors</b> — each appears in the workspace as its own actor (not a personal API token for MCP).</div>`
+        : '';
+      const linearBody = linearCards
+        ? `<div class="accounts-grid">${linearCards}</div>`
+        : `<div class="loading" style="padding:.8rem">${data.linearFailed
+            ? "Couldn't load Linear agents — the data source was unreachable (retrying)."
+            : 'No Linear agents connected. Run <code>switchroom linear-agent setup --agent &lt;name&gt;</code> to connect one as a Linear OAuth app actor.'}</div>`;
+      const linearSection = `
+        <div style="margin-bottom:1.5rem">
+          <h3 style="margin:0 0 .6rem;font-size:.95rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em">Linear</h3>
+          ${linearNote}${linearBody}
+        </div>`;
+
       // Tab-level degraded banner: when every OAuth account (Google +
       // Microsoft) is config-only (no live broker slot) and there's at least
       // one, the broker data is unavailable — surface that ABOVE the sections
@@ -2197,7 +2263,7 @@
         ? renderProblem(problemFor('connections-unreachable', {}))
         : '';
 
-      container.innerHTML = unreachableBanner + degradedBanner + googleSection + microsoftSection + notionSection;
+      container.innerHTML = unreachableBanner + degradedBanner + googleSection + microsoftSection + notionSection + linearSection;
     }
 
     function renderSchedule(data) {
@@ -2635,12 +2701,16 @@
       }
     }
 
-    // Init. Summary is the default visible tab; fetchAgents still runs
-    // (populates the agents tab + keeps the 10s fleet poll warm + the
-    // log WS depends on it). Summary is fetched on init + on tab-switch
-    // only — deliberately NOT on the 10s interval (it fans out to
-    // system-health etc.; on-demand refresh is enough).
-    fetchSummary();
+    // Init. The initial tab comes from the URL path (so a reload/deep-link of
+    // `/connections` opens Connections, not Summary); '/' → Summary. We stamp
+    // the history entry so the first back/forward works, then switchTab
+    // (push:false) shows the tab and fetches just its data. fetchAgents still
+    // runs unconditionally (keeps the 10s fleet poll warm + the log WS depends
+    // on it). Per-tab data is fetched on switch only — deliberately NOT on the
+    // 10s interval (it fans out to system-health etc.; on-demand is enough).
+    const initialTab = tabFromPath();
+    history.replaceState({ tab: initialTab }, '', location.pathname);
+    switchTab(initialTab, { push: false });
     fetchAgents();
     connectWebSocket();
     // Fleet poll — gated on tab visibility. A phone with the dashboard