fraim-hub 2.0.220 → 2.0.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fraim-hub",
-  "version": "2.0.220",
+  "version": "2.0.221",
   "description": "FRAIM Hub local companion package.",
   "main": "index.js",
   "bin": {
@@ -93,7 +93,7 @@
     "dotenv": "^16.4.7",
     "electron": "^41.2.2",
     "express": "^5.2.1",
-    "fraim": "2.0.220",
+    "fraim": "2.0.221",
     "mongodb": "^7.0.0",
     "node-cron": "4.2.1",
     "node-edge-tts": "^1.2.10",

package/public/ai-hub/script.js

@@ -3403,16 +3403,52 @@ function syncTemplatePickerVisibility() {
 }
 
 // Stable list of [dropdownId, btnId] pairs for the three coaching dropdowns.
-const COACH_DROPDOWN_PAIRS = [
-  ['positive-reinforcement-dropdown', 'positive-reinforcement-btn'],
-  ['negative-reinforcement-dropdown', 'negative-reinforcement-btn'],
-  ['conviction-dropdown', 'conviction-btn'],
-];
-
-// R4/R5/R6: open a coaching dropdown by its menu element id.
-function openCoachDropdown(dropdownId, btnId) {
-  const dropdown = els[dropdownId] || document.getElementById(dropdownId);
-  if (!dropdown) return;
+const COACH_DROPDOWN_PAIRS = [
+  ['positive-reinforcement-dropdown', 'positive-reinforcement-btn'],
+  ['negative-reinforcement-dropdown', 'negative-reinforcement-btn'],
+  ['conviction-dropdown', 'conviction-btn'],
+];
+
+function positionCoachDropdown(dropdown, btn) {
+  if (!dropdown || !btn || dropdown.hidden) return;
+  const margin = 6;
+  const viewportPad = 8;
+  const rect = btn.getBoundingClientRect();
+  const minWidth = Math.max(200, Math.ceil(rect.width));
+  dropdown.style.minWidth = minWidth + 'px';
+  dropdown.style.maxWidth = Math.max(220, window.innerWidth - viewportPad * 2) + 'px';
+  dropdown.style.visibility = 'hidden';
+  dropdown.style.transform = 'none';
+  const menuRect = dropdown.getBoundingClientRect();
+  const menuWidth = Math.max(menuRect.width, minWidth);
+  const menuHeight = menuRect.height || 160;
+  const viewportMaxLeft = Math.max(viewportPad, window.innerWidth - menuWidth - viewportPad);
+  const wouldOverflowRight = rect.left + menuWidth > window.innerWidth - viewportPad;
+  const idealLeft = wouldOverflowRight ? rect.right - menuWidth : rect.left;
+  const left = Math.min(Math.max(viewportPad, idealLeft), viewportMaxLeft);
+  const bottomTop = rect.bottom + margin;
+  const top = bottomTop + menuHeight <= window.innerHeight - viewportPad
+    ? bottomTop
+    : Math.max(viewportPad, rect.top - menuHeight - margin);
+  dropdown.style.left = Math.round(left) + 'px';
+  dropdown.style.top = Math.round(top) + 'px';
+  dropdown.style.maxHeight = Math.max(120, window.innerHeight - top - viewportPad) + 'px';
+  dropdown.style.visibility = '';
+}
+
+function positionOpenCoachDropdowns() {
+  for (const [dropdownId, btnId] of COACH_DROPDOWN_PAIRS) {
+    const dropdown = els[dropdownId] || document.getElementById(dropdownId);
+    if (!dropdown || dropdown.hidden) continue;
+    const btn = els[btnId] || document.getElementById(btnId);
+    positionCoachDropdown(dropdown, btn);
+  }
+}
+
+// R4/R5/R6: open a coaching dropdown by its menu element id.
+function openCoachDropdown(dropdownId, btnId) {
+  const dropdown = els[dropdownId] || document.getElementById(dropdownId);
+  if (!dropdown) return;
   // Close all other coaching dropdowns first.
   for (const [id] of COACH_DROPDOWN_PAIRS) {
     const other = els[id] || document.getElementById(id);
@@ -3420,29 +3456,14 @@ function openCoachDropdown(dropdownId, btnId) {
       other.hidden = true;
       const otherBtnId = id.replace('-dropdown', '-btn');
       const otherBtn = els[otherBtnId] || document.getElementById(otherBtnId);
-      if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
-    }
-  }
-  // Position the fixed dropdown above the trigger button so it escapes overflow:hidden ancestors.
-  // If the trigger is too near the top, open downward instead.
-  const btn = els[btnId] || document.getElementById(btnId);
-  if (btn) {
-    const rect = btn.getBoundingClientRect();
-    const spaceAbove = rect.top;
-    const dropdownHeight = 200; // conservative estimate before the element is visible
-    if (spaceAbove >= dropdownHeight) {
-      dropdown.style.left = rect.left + 'px';
-      dropdown.style.top = (rect.top - 4) + 'px';
-      dropdown.style.transform = 'translateY(-100%)';
-    } else {
-      dropdown.style.left = rect.left + 'px';
-      dropdown.style.top = (rect.bottom + 4) + 'px';
-      dropdown.style.transform = 'none';
-    }
-  }
-  dropdown.hidden = false;
-  if (btn) btn.setAttribute('aria-expanded', 'true');
-}
+      if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
+    }
+  }
+  const btn = els[btnId] || document.getElementById(btnId);
+  dropdown.hidden = false;
+  positionCoachDropdown(dropdown, btn);
+  if (btn) btn.setAttribute('aria-expanded', 'true');
+}
 
 // R4/R5/R6: open a dropdown and move focus to the first menu item (keyboard activation path).
 function openCoachDropdownFocused(dropdownId, btnId) {
@@ -3452,13 +3473,15 @@ function openCoachDropdownFocused(dropdownId, btnId) {
 }
 
 // R4/R5/R6: close a coaching dropdown.
-function closeCoachDropdown(dropdownId, btnId) {
-  const dropdown = els[dropdownId] || document.getElementById(dropdownId);
-  if (!dropdown) return;
-  dropdown.hidden = true;
-  const btn = els[btnId] || document.getElementById(btnId);
-  if (btn) btn.setAttribute('aria-expanded', 'false');
-}
+function closeCoachDropdown(dropdownId, btnId) {
+  const dropdown = els[dropdownId] || document.getElementById(dropdownId);
+  if (!dropdown) return;
+  dropdown.hidden = true;
+  dropdown.style.visibility = '';
+  dropdown.style.maxHeight = '';
+  const btn = els[btnId] || document.getElementById(btnId);
+  if (btn) btn.setAttribute('aria-expanded', 'false');
+}
 
 // R4/R5/R6: close all coaching dropdowns.
 function closeAllCoachDropdowns() {
@@ -6018,10 +6041,11 @@ async function continueRun(text, options) {
   const coachingJobId = state.pendingCoachingJobId || undefined;
   clearPendingCoachingJob();
   if (!opts.preserveReviewApproved) conv.reviewApproved = false;
-  // #549 R6/AC6.1: Clear the stopped flag before starting the new run so
-  // stopped-state indicators are removed on the next render tick.
-  conv.stopped = false;
-  conv.status = 'running';
+  // #549 R6/AC6.1: Clear the stopped flag before starting the new run so
+  // stopped-state indicators are removed on the next render tick.
+  conv.stopped = false;
+  delete conv.pauseReason;
+  conv.status = 'running';
   upsertConversation(conv);
   refreshStatusSurfaces(); // #533 R5: also recolor the tree/area dots back to working
   renderActive();
@@ -6146,9 +6170,12 @@ function foldRunIntoConversation(conv, run) {
     conv.artifacts = [];
   }
   // Update status.
-  if (run.status === 'completed') conv.status = 'completed';
-  else if (run.status === 'failed') conv.status = 'failed';
-  else conv.status = 'running';
+  if (run.status === 'completed') conv.status = 'completed';
+  else if (run.status === 'failed') conv.status = 'failed';
+  else {
+    conv.status = 'running';
+    delete conv.pauseReason;
+  }
   // Issue #904: carry auxiliary exit classification so conversationUiState
   // can derive the correct pill without heuristics.
   if (run.pauseReason !== undefined) conv.pauseReason = run.pauseReason;
@@ -7097,15 +7124,17 @@ function wireEvents() {
     });
   }
   for (const [dropdownId, btnId] of COACH_DROPDOWN_PAIRS) wireCoachDropdownBtn(btnId, dropdownId);
-  document.addEventListener('click', (e) => {
-    const openDropdown = COACH_DROPDOWN_PAIRS
-      .some(([id]) => { const d = els[id] || document.getElementById(id); return d && !d.hidden; });
-    if (!openDropdown) return;
-    const inDropdown = e.target.closest('.coach-dropdown');
-    if (!inDropdown) closeAllCoachDropdowns();
-  });
-  // Keyboard navigation for coaching dropdowns (WCAG 2.1 SC 2.1.1).
-  document.addEventListener('keydown', (e) => {
+  document.addEventListener('click', (e) => {
+    const openDropdown = COACH_DROPDOWN_PAIRS
+      .some(([id]) => { const d = els[id] || document.getElementById(id); return d && !d.hidden; });
+    if (!openDropdown) return;
+    const inDropdown = e.target.closest('.coach-dropdown');
+    if (!inDropdown) closeAllCoachDropdowns();
+  });
+  window.addEventListener('resize', positionOpenCoachDropdowns);
+  document.addEventListener('scroll', positionOpenCoachDropdowns, true);
+  // Keyboard navigation for coaching dropdowns (WCAG 2.1 SC 2.1.1).
+  document.addEventListener('keydown', (e) => {
     if (!['ArrowDown', 'ArrowUp', 'Escape'].includes(e.key)) return;
     for (const [dropdownId, btnId] of COACH_DROPDOWN_PAIRS) {
       const dropdown = els[dropdownId] || document.getElementById(dropdownId);

package/public/ai-hub/styles.css

@@ -1382,12 +1382,15 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   position: relative;
   display: inline-flex;
 }
-.coach-dropdown-menu {
-  position: fixed;
-  min-width: 200px;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
+.coach-dropdown-menu {
+  position: fixed;
+  min-width: 200px;
+  max-height: min(280px, calc(100vh - 16px));
+  box-sizing: border-box;
+  overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
   box-shadow: var(--shadow-lg);
   padding: 4px;
   z-index: var(--z-dropdown-menu);
@@ -3013,9 +3016,13 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 /* Learnings */
 .learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
 .lc-scope { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
-.scope-org { background: var(--accent-soft); color: var(--accent); }
-.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
-.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
+.scope-org { background: var(--accent-soft); color: var(--accent); }
+.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
+.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
+:root[data-theme="dark"] .scope-mgr {
+  background: rgba(172,135,255,.18);
+  color: #d6c5ff;
+}
 .lc-body { flex: 1; min-width: 0; }
 .lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
 .lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
@@ -3036,8 +3043,13 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 /* Overview grid */
 #proj-overview { flex: 1; overflow-y: auto; }
 .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 20px 18px; }
-.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: box-shadow .12s; }
-.proj-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
+.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: box-shadow .12s; }
+.proj-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
+:root[data-theme="dark"] .proj-card {
+  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
+  border-color: rgba(255,255,255,.12);
+}
+:root[data-theme="dark"] .proj-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.34); }
 .proj-card-add { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--muted); font-size: 13px; min-height: 120px; }
 .proj-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
 .proj-brief { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@@ -3075,7 +3087,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .area-rail-info-btn:hover { background: var(--bg); }
 .area-rail-info-btn.info-active { color: var(--accent); background: var(--accent-soft); }
 /* #594 R2: area-level conversation panel (Company/Manager tab inline run view) — kept for reference */
-.area-page-conv { display: flex; flex-direction: column; gap: 0; margin: 0 0 20px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
+.area-page-conv { display: flex; flex-direction: column; gap: 0; margin: 0 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
 .area-conv-topline { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
 .area-conv-thread { flex: 1; max-height: 340px; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
 .area-conv-empty { font-size: 13px; color: var(--muted); margin: 0; }
@@ -3083,7 +3095,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .area-conv-msg--manager .area-conv-msg-text { align-self: flex-end; background: var(--accent-soft, #eef4ff); border-radius: 10px 10px 2px 10px; padding: 8px 12px; font-size: 13px; color: var(--text); max-width: 80%; margin: 0; }
 .area-conv-msg--employee .area-conv-msg-text { align-self: flex-start; background: var(--surface, #f8f8f8); border: 1px solid var(--line); border-radius: 10px 10px 10px 2px; padding: 8px 12px; font-size: 13px; color: var(--text); max-width: 80%; margin: 0; white-space: pre-wrap; }
 .area-conv-coach { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg, #fafafa); }
-.area-conv-coach-ta { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--card, #fff); outline: none; min-height: 38px; }
+.area-conv-coach-ta { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface); outline: none; min-height: 38px; }
 .area-conv-coach-ta:focus { border-color: var(--accent); }
 .area-conv-coach-send { flex-shrink: 0; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent, #0071e3); border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; height: 38px; }
 .area-conv-coach-send:hover { filter: brightness(1.08); }
@@ -3109,16 +3121,35 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .obi-cancel { font-size: 14px; font-weight: 500; color: var(--muted, #666); background: none; border: none; padding: 10px 14px; cursor: pointer; }
 .obi-start { font-size: 14px; font-weight: 600; color: #fff; background: var(--accent, #1f6feb); border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
 .obi-start:hover { filter: brightness(1.05); }
-.ctx-acc { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
-.ctx-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
-.ctx-acc > summary::-webkit-details-marker { display: none; }
-.ctx-acc > summary:hover { background: var(--bg); }
+.ctx-acc { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
+.ctx-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
+.ctx-acc > summary::-webkit-details-marker { display: none; }
+.ctx-acc > summary:hover { background: var(--bg); }
 .ctx-acc > summary .ca-chev { font-size: 10px; color: var(--muted); transition: transform .15s; }
 .ctx-acc[open] > summary .ca-chev { transform: rotate(90deg); }
 .ctx-acc > summary .ca-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
 /* #ai-hub-polish F2: a long section must not bury the others. Cap the body and
    let it scroll internally so every accordion header stays reachable. */
-.ctx-acc-body { padding: 4px 14px 14px; max-height: min(62vh, 620px); overflow-y: auto; }
+.ctx-acc-body { padding: 4px 14px 14px; max-height: min(62vh, 620px); overflow-y: auto; }
+
+:root[data-theme="dark"] .ctx-acc {
+  background: #242424;
+  border-color: rgba(255,255,255,.13);
+  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
+}
+:root[data-theme="dark"] .ctx-acc > summary {
+  background: #262626;
+  color: #b7b7b7;
+}
+:root[data-theme="dark"] .ctx-acc > summary:hover {
+  background: #2e2e2e;
+}
+:root[data-theme="dark"] .ctx-acc[open] > summary {
+  border-bottom: 1px solid rgba(255,255,255,.10);
+}
+:root[data-theme="dark"] .ctx-acc-body {
+  background: #202020;
+}
 
 /* #ai-hub-polish F1: ease the open/close instead of snapping. Animate the
    <details> content slot; interpolate-size lets block-size animate to/from auto.
@@ -3148,14 +3179,14 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
   min-height: 0;
   position: relative;
 }
-.proj-switch-mask {
+.proj-switch-mask {
   position: absolute;
   inset: 0;
   z-index: 30;
   display: none;
   align-items: center;
   justify-content: center;
-  background: rgba(250, 250, 250, .74);
+  background: color-mix(in srgb, var(--bg) 74%, transparent);
   backdrop-filter: blur(2px);
   pointer-events: auto;
 }
@@ -3175,10 +3206,10 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
   font-size: 13px;
   font-weight: 600;
 }
-.proj-switch-spinner {
+.proj-switch-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(0, 0, 0, .14);
+  border: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
   border-top-color: var(--accent);
   border-radius: 50%;
   flex: 0 0 auto;
@@ -4310,10 +4341,18 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
 
 /* ── D18: Profile card — better shadow to match mock ── */
-.card.area-profile {
-  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
-  border: none;
-}
+.card.area-profile {
+  box-shadow: var(--shadow);
+  border: none;
+}
+:root[data-theme="dark"] .card.area-profile {
+  background: #2a2a2a;
+  border: 1px solid rgba(255,255,255,.12);
+  box-shadow: var(--shadow-lg);
+}
+:root[data-theme="dark"] .syn-row {
+  border-bottom-color: rgba(255,255,255,.10);
+}
 
 /* ── D19: Hide lh-run button from default learnings head — only show when pending ── */
 /* The JS always renders it; suppress via CSS for default display */
@@ -4822,9 +4861,29 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .prt-hire-btn { font-size:11px; font-weight:700; color:#fff; background:var(--accent,#0071e3); border:none; border-radius:6px; padding:4px 12px; cursor:pointer; margin-top:2px; }
 .prt-hire-btn:hover { background:var(--accent-hover,#005bbf); }
 .prt-price { font-size:10px; color:var(--sub); margin-top:1px; }
-.manager-no-team-msg { font-size:13px; color:var(--sub); margin:0 0 10px; }
-.manager-go-company-btn { font-size:12px; font-weight:600; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.08)); border:1px solid var(--accent,#0071e3); border-radius:6px; padding:5px 13px; cursor:pointer; }
-.manager-go-company-btn:hover { background:var(--accent-soft,rgba(0,113,227,.15)); }
+.manager-no-team-msg { font-size:13px; color:var(--sub); margin:0 0 10px; }
+.manager-go-company-btn { font-size:12px; font-weight:600; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.08)); border:1px solid var(--accent,#0071e3); border-radius:6px; padding:5px 13px; cursor:pointer; }
+.manager-go-company-btn:hover { background:var(--accent-soft,rgba(0,113,227,.15)); }
+:root[data-theme="dark"] .manager-no-team-msg,
+:root[data-theme="dark"] .learn-empty,
+:root[data-theme="dark"] .le-count {
+  color: var(--text);
+  background: #2a2a2a;
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: 10px;
+}
+:root[data-theme="dark"] .le-sub,
+:root[data-theme="dark"] .manager-no-team-msg {
+  color: var(--muted);
+}
+:root[data-theme="dark"] .manager-go-company-btn {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+:root[data-theme="dark"] .manager-go-company-btn:hover {
+  background: var(--accent-strong);
+}
 
 /* ── Issue #540: AI Hub hiring surfaces ── */
 
@@ -5125,13 +5184,40 @@ img.eh-av { object-fit: cover; background: var(--surface); }
   justify-content: flex-end;
 }
 
-.configured-agent-card {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  padding: 10px 12px;
-  min-width: 0;
-}
+.configured-agent-card {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 10px 12px;
+  min-width: 0;
+}
+:root[data-theme="dark"] .configured-agent-card,
+:root[data-theme="dark"] .configured-agent-form,
+:root[data-theme="dark"] .learn-card,
+:root[data-theme="dark"] .learn-prop,
+:root[data-theme="dark"] .team-row,
+:root[data-theme="dark"] .persona-card,
+:root[data-theme="dark"] .persona-roster-tile {
+  background: #2a2a2a;
+  border-color: rgba(255,255,255,.12);
+}
+:root[data-theme="dark"] .configured-agent-action,
+:root[data-theme="dark"] .configured-agent-icon-action {
+  background: #323232;
+  border-color: rgba(255,255,255,.14);
+  color: var(--text);
+}
+:root[data-theme="dark"] .configured-agent-action.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+:root[data-theme="dark"] .configured-agent-status.ok {
+  background: rgba(92,184,92,.10);
+}
+:root[data-theme="dark"] .configured-agent-status.warn {
+  background: rgba(212,160,78,.10);
+}
 
 .configured-agent-head {
   display: flex;