style(admin): port UI polish from linear-ai-implement fork

src/admin-ui/components.ts

@@ -93,6 +93,11 @@ export const componentsCss = `
   font-family: var(--font-mono);
 }
 
+.theme-icon-sun  { display: none; }
+.theme-icon-moon { display: inline-flex; }
+[data-theme="dark"] .theme-icon-sun  { display: inline-flex; }
+[data-theme="dark"] .theme-icon-moon { display: none; }
+
 .sidebar-footer {
   margin-top: auto;
   padding: var(--sp-2) var(--sp-2) 0;
@@ -386,6 +391,8 @@ export const componentsCss = `
 .tbl tbody tr.active { background: var(--bg-active); }
 .tbl tbody tr.failed-row td { background: rgba(220, 38, 38, 0.025); }
 .tbl tbody tr.failed-row:hover td { background: rgba(220, 38, 38, 0.05); }
+.tbl tbody tr.redispatch-row td { background: var(--st-warn-bg); }
+.tbl tbody tr.redispatch-row:hover td { background: var(--bg-hover); }
 
 .mono {
   font-family: var(--font-mono);
@@ -939,6 +946,20 @@ dialog::backdrop { background: rgba(0,0,0,0.5); }
 .md-field select,
 .md-field textarea {
   width: 100%;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-sm);
+  padding: 7px 10px;
+  font-size: 12.5px;
+  color: var(--fg-primary);
+  transition: border-color 80ms ease, box-shadow 80ms ease;
+}
+.md-field input:focus,
+.md-field select:focus,
+.md-field textarea:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus);
 }
 .md-field textarea {
   font-family: var(--font-mono);

src/admin-ui/pages/overview.ts

@@ -63,12 +63,13 @@ export const overviewHtml = `
         <div class="card-header">
           <div>
             <h2 class="card-title">Why isn&rsquo;t this running?</h2>
-            <div class="card-subtitle">Full blocker taxonomy on Plan 4 &mdash; Blockers page</div>
+            <div class="card-subtitle" id="overview-atcap-subtitle">Teams at concurrency cap</div>
           </div>
+          <button class="btn btn-ghost btn-sm" onclick="window.navigate('blockers')">View blockers</button>
         </div>
         <div class="card-body">
           <div id="overview-atcap-body" style="display:flex;flex-direction:column;gap:8px"></div>
-          <div id="overview-atcap-empty" class="hidden text-tertiary" style="padding:4px 0">All projects have available capacity.</div>
+          <div id="overview-atcap-empty" class="hidden text-tertiary" style="padding:4px 0">All projects have available capacity. <a href="#blockers" onclick="window.navigate('blockers');return false" style="color:var(--accent)">View blockers page</a> for more details.</div>
         </div>
       </div>
     </div>
@@ -264,6 +265,7 @@ export const overviewScript = `
   function renderAtCapacity(running, mappings) {
     const body = document.getElementById('overview-atcap-body');
     const empty = document.getElementById('overview-atcap-empty');
+    const subtitle = document.getElementById('overview-atcap-subtitle');
     if (!body || !empty) return;
     body.innerHTML = '';
     const atCap = Object.entries(mappings).filter(function (pair) {
@@ -273,6 +275,7 @@ export const overviewScript = `
       const cnt = running.filter(function (r) { return r.teamKey === key; }).length;
       return cnt >= cap;
     });
+    if (subtitle) subtitle.textContent = atCap.length + ' team' + (atCap.length === 1 ? '' : 's') + ' at cap';
     if (atCap.length === 0) {
       empty.classList.remove('hidden');
       return;

src/admin-ui/pages/pipelines.ts

@@ -50,26 +50,26 @@ export const pipelinesScript = `
       }
       empty.classList.add('hidden');
 
-      const statusColors = {
-        unknown: '#bdc3c7',
-        dispatched: '#95a5a6',
-        running: '#3498db',
-        completed: '#2ecc71',
-        failed: '#e74c3c',
-        timed_out: '#f39c12'
+      const statusClass = {
+        unknown: 'neutral',
+        dispatched: 'neutral',
+        running: 'running',
+        completed: 'success',
+        failed: 'fail',
+        timed_out: 'warn'
       };
-      const execColors = { gha: '#27ae60', fly: '#8e44ad', plan: '#2980b9' };
 
-      function makeBadge(color, text) {
-        return '<span class="badge" style="background:' + color + ';color:#fff">' + window.esc(text) + '</span>';
+      function makeBadge(cls, text) {
+        return '<span class="badge tight ' + cls + '">' + window.esc(text) + '</span>';
       }
       function statusBadge(status) {
-        return makeBadge(statusColors[status] || '#95a5a6', status || 'dispatched');
+        return makeBadge(statusClass[status] || 'neutral', status || 'dispatched');
       }
       function execBadge(mode, runnerMode) {
         const short = mode === 'fly-machines' ? 'fly' : mode === 'planning' ? 'plan' : 'gha';
-        return makeBadge(execColors[short] || '#7f8c8d', short)
-          + (short !== 'plan' && runnerMode ? ' <span style="color:#888;font-size:0.85em">(' + window.esc(runnerMode) + ')</span>' : '');
+        const cls = short === 'fly' ? 'info' : 'neutral';
+        return makeBadge(cls, short)
+          + (short !== 'plan' && runnerMode ? ' <span style="color:var(--fg-tertiary);font-size:0.85em">(' + window.esc(runnerMode) + ')</span>' : '');
       }
 
       // Group planning + implement phases that belong to the same job:
@@ -110,7 +110,7 @@ export const pipelinesScript = `
           const issueLabel = (impl.issueIdentifier || impl.issueId) + (impl.issueTitle ? ': ' + window.esc(impl.issueTitle) : '');
           const dn2 = plan.dispatchNumber || 1;
           const isRedispatch = dn2 > 1;
-          if (isRedispatch) tr.style.backgroundColor = '#fff3cd';
+          if (isRedispatch) tr.classList.add('redispatch-row');
           const dnBadge = isRedispatch
             ? '<span style="color:#d63384;font-weight:bold" title="Re-dispatch">' + dn2 + '</span>'
             : '' + dn2;
@@ -136,7 +136,7 @@ export const pipelinesScript = `
           const issueLabel = (entry.issueIdentifier || entry.issueId) + (entry.issueTitle ? ': ' + window.esc(entry.issueTitle) : '');
           const dn3 = entry.dispatchNumber || 1;
           const isRedispatch = dn3 > 1;
-          if (isRedispatch) tr.style.backgroundColor = '#fff3cd';
+          if (isRedispatch) tr.classList.add('redispatch-row');
           const dnBadge = isRedispatch
             ? '<span style="color:#d63384;font-weight:bold" title="Re-dispatch">' + dn3 + '</span>'
             : '' + dn3;

src/admin-ui/pages/projects.ts

@@ -58,7 +58,7 @@ export const projectsHtml = `
   <dialog id="mapping-dialog">
     <div class="md-header">
       <span id="md-title">Add Mapping</span>
-      <button class="secondary sm" onclick="closeMappingDialog()">&#215;</button>
+      <button class="btn btn-ghost btn-icon" onclick="closeMappingDialog()">&#215;</button>
     </div>
     <input type="hidden" id="md-team-key-orig">
     <div class="md-body">
@@ -130,8 +130,8 @@ export const projectsHtml = `
     <div class="md-footer">
       <div id="md-error" class="error hidden" style="margin-bottom:8px"></div>
       <div style="display:flex;gap:8px;justify-content:flex-end">
-        <button class="secondary" onclick="closeMappingDialog()">Cancel</button>
-        <button onclick="saveMappingDialog()">Save Mapping</button>
+        <button class="btn btn-ghost" onclick="closeMappingDialog()">Cancel</button>
+        <button class="btn btn-accent" onclick="saveMappingDialog()">Save Mapping</button>
       </div>
     </div>
   </dialog>
@@ -159,14 +159,14 @@ export const projectsScript = `
       const tr = document.createElement('tr');
       const ek = window.esc(key);
       const execBadge = m.executionMode === 'fly-machines'
-        ? '<span class="badge" style="background:#9b59b6;color:#fff">fly</span>'
-        : '<span class="badge" style="background:#27ae60;color:#fff">gha</span>';
+        ? '<span class="badge info">fly</span>'
+        : '<span class="badge neutral">gha</span>';
       const planBadge = m.planningEnabled
-        ? '<span class="badge" style="background:#3498db;color:#fff">on</span>'
-        : '<span style="color:#aaa">off</span>';
+        ? '<span class="badge success">on</span>'
+        : '<span class="text-tertiary">off</span>';
       const providerBadge = m.provider === 'bedrock'
-        ? '<span class="badge" style="background:#e67e22;color:#fff">bedrock</span>'
-        : '<span style="color:#888;font-size:0.85em">anthropic</span>';
+        ? '<span class="badge warn">bedrock</span>'
+        : '<span class="text-tertiary" style="font-size:0.85em">anthropic</span>';
       tr.innerHTML = '<td class="mono">' + ek + '</td>'
         + '<td class="mono">' + window.esc(m.owner) + '/' + window.esc(m.repo) + '</td>'
         + '<td>' + execBadge + '</td>'
@@ -175,9 +175,9 @@ export const projectsScript = `
         + '<td>' + planBadge + '</td>'
         + '<td>' + providerBadge + '</td>'
         + '<td style="white-space:nowrap">'
-          + '<button class="sm" data-key="' + ek + '" onclick="openMappingDialog(this.dataset.key)">Edit</button> '
-          + '<button class="sm danger" data-key="' + ek + '" onclick="delMapping(this.dataset.key)">Del</button> '
-          + '<button class="sm secondary" data-key="' + ek + '" onclick="showSecrets(this.dataset.key)">Secrets</button>'
+          + '<button class="btn btn-sm" data-key="' + ek + '" onclick="openMappingDialog(this.dataset.key)">Edit</button> '
+          + '<button class="btn btn-sm btn-danger" data-key="' + ek + '" onclick="delMapping(this.dataset.key)">Del</button> '
+          + '<button class="btn btn-sm btn-ghost" data-key="' + ek + '" onclick="showSecrets(this.dataset.key)">Secrets</button>'
         + '</td>';
       tbody.appendChild(tr);
     }
@@ -349,7 +349,7 @@ export const projectsScript = `
         const tr = document.createElement('tr');
         tr.innerHTML = '<td class="mono">' + window.esc(s.name) + '</td>'
           + '<td><span class="badge success">Set</span></td>'
-          + '<td><button class="sm danger" data-name="' + window.esc(s.name) + '" onclick="delSecret(this.dataset.name)">Delete</button></td>';
+          + '<td><button class="btn btn-sm btn-danger" data-name="' + window.esc(s.name) + '" onclick="delSecret(this.dataset.name)">Delete</button></td>';
         tbody.appendChild(tr);
       }
     } catch (err) {

src/admin-ui/sidebar.ts

@@ -60,6 +60,10 @@ export function sidebarHtml(): string {
           <div class="user-name">Admin</div>
           <div class="user-email">signed in</div>
         </div>
+        <button class="btn btn-ghost btn-icon" onclick="window.toggleTheme()" title="Toggle theme">
+          <span class="theme-icon-sun">${icon("sun", 14)}</span>
+          <span class="theme-icon-moon">${icon("moon", 14)}</span>
+        </button>
         <button class="btn btn-ghost btn-icon" onclick="logout()" title="Log out">${icon("x", 12)}</button>
       </div>
     </div>