privateboard 0.1.20 → 0.1.21

package/public/new-agent.css

@@ -30,9 +30,9 @@
   max-width: 600px;
   max-height: calc(100vh - 48px);
   margin: auto;
-  background: var(--panel, #131312);
-  border: 0.5px solid var(--line-strong, #3A3A35);
-  color: var(--text, #C8C5BE);
+  background: var(--panel);
+  border: 0.5px solid var(--line-strong);
+  color: var(--text);
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -52,7 +52,7 @@
   position: absolute;
   width: 14px;
   height: 14px;
-  border: 2px solid var(--lime, #6FB572);
+  border: 2px solid var(--lime);
   pointer-events: none;
 }
 .new-agent-modal::before { top: -1px;    left: -1px;   border-right: none; border-bottom: none; }
@@ -74,21 +74,21 @@
    discipline (lime classification, dashed header bottom, lime ▸
    title prefix), different class names because the JSX is na-*. */
 .na-classification {
-  background: var(--panel-2, #1A1A18);
-  border-bottom: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--strip-bg);
+  border-bottom: 0.5px solid var(--line-bright);
   padding: 6px 14px;
   font-family: var(--mono);
   font-size: 9px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.na-classification .dot { color: var(--lime, #6FB572); margin-right: 4px; }
+.na-classification .dot { color: var(--lime); margin-right: 4px; }
 .na-classification .right {
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   letter-spacing: 0.12em;
 }
 
@@ -98,42 +98,43 @@
   gap: 14px;
   align-items: start;
   padding: 16px 18px 14px;
-  border-bottom: 0.5px dashed var(--line-bright, #2A2A26);
+  background: var(--strip-bg);
+  border-bottom: 0.5px dashed var(--line-bright);
 }
 .na-head > div { min-width: 0; }
 .na-head .na-step-num {
   font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.12em;
   margin-bottom: 6px;
 }
 .na-head .na-step-num .hl {
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-weight: 700;
 }
 .na-head .na-step-title {
   font-family: var(--font-human, "Inter", sans-serif);
   font-size: 15px;
   font-weight: 700;
-  color: var(--text, #C8C5BE);
+  color: var(--text);
   letter-spacing: -0.01em;
   line-height: 1.3;
 }
 .na-head .na-step-title::before {
   content: "▸ ";
-  color: var(--lime, #6FB572);
+  color: var(--lime);
 }
 .na-head .na-step-title em {
   font-style: italic;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
 }
 .na-head .na-close {
   width: 28px; height: 28px;
   background: transparent;
-  border: 0.5px solid var(--line-bright, #2A2A26);
-  color: var(--text-dim, #5C5A52);
+  border: 0.5px solid var(--line-bright);
+  color: var(--text-dim);
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
@@ -145,8 +146,8 @@
   flex-shrink: 0;
 }
 .na-head .na-close:hover {
-  border-color: var(--lime, #6FB572);
-  color: var(--lime, #6FB572);
+  border-color: var(--lime);
+  color: var(--lime);
 }
 
 /* Body */
@@ -167,35 +168,35 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.16em;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
 }
-.na-section-label::before { content: "[ "; color: var(--text-dim, #5C5A52); }
-.na-section-label::after  { content: " ]"; color: var(--text-dim, #5C5A52); }
+.na-section-label::before { content: "[ "; color: var(--text-dim); }
+.na-section-label::after  { content: " ]"; color: var(--text-dim); }
 .na-section-hint {
   font-family: var(--font-human);
   font-size: 11px;
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   letter-spacing: -0.003em;
 }
 .na-section-hint .opt {
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   margin-left: 4px;
 }
 
 /* Inputs */
 .na-input-wrap, .na-textarea-wrap {
-  border: 0.5px solid var(--line-strong, #3A3A35);
-  background: var(--bg, #0A0A0A);
+  border: 0.5px solid var(--line-strong);
+  background: var(--bg);
   transition: border-color 0.12s;
   display: flex;
   align-items: stretch;
 }
 .na-input-wrap:focus-within, .na-textarea-wrap:focus-within {
-  border-color: var(--lime, #6FB572);
+  border-color: var(--lime);
 }
 .na-input-wrap::before, .na-textarea-wrap::before {
   content: ">";
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-weight: 700;
   font-size: 12px;
   font-family: var(--mono);
@@ -210,14 +211,14 @@
   font-family: var(--font-human);
   font-size: 14px;
   line-height: 1.55;
-  color: var(--text, #C8C5BE);
+  color: var(--text);
   outline: none;
   padding: 7px 12px;
   letter-spacing: -0.003em;
 }
 .na-input-wrap input::placeholder,
 .na-textarea-wrap textarea::placeholder {
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
 }
 .na-textarea-wrap textarea {
   resize: vertical;
@@ -231,12 +232,12 @@
   margin-top: 5px;
   font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-.na-input-meta .accent { color: var(--lime, #6FB572); }
-.na-input-meta .handle { color: var(--text-soft, #8E8B83); }
+.na-input-meta .accent { color: var(--lime); }
+.na-input-meta .handle { color: var(--text-soft); }
 
 /* Avatar picker — 8-bit portrait + regenerate button */
 .na-avatar-row {
@@ -247,8 +248,8 @@
 }
 .na-avatar-frame {
   width: 80px; height: 80px;
-  border: 0.5px solid var(--line-strong, #3A3A35);
-  background: var(--bg, #0A0A0A);
+  border: 0.5px solid var(--line-strong);
+  background: var(--bg);
   padding: 4px;
   display: grid;
   place-items: center;
@@ -258,14 +259,14 @@
   content: "";
   position: absolute;
   width: 6px; height: 6px;
-  border: 0.5px solid var(--lime, #6FB572);
+  border: 0.5px solid var(--lime);
   pointer-events: none;
 }
 .na-avatar-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
 .na-avatar-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
 .na-avatar-frame.placeholder::before,
 .na-avatar-frame.placeholder::after {
-  border-color: var(--line-strong, #3A3A35);
+  border-color: var(--line-strong);
 }
 .na-avatar-frame svg {
   width: 100%; height: 100%;
@@ -285,21 +286,21 @@
   align-items: center;
   gap: 7px;
   padding: 6px 11px;
-  border: 0.5px solid var(--line-strong, #3A3A35);
-  background: var(--panel-2, #1A1A18);
+  border: 0.5px solid var(--line-strong);
+  background: var(--panel-2);
   font-family: var(--mono);
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
   text-decoration: none;
   cursor: pointer;
   transition: all 0.12s;
 }
 .na-avatar-regen:hover {
-  border-color: var(--lime, #6FB572);
-  color: var(--lime, #6FB572);
+  border-color: var(--lime);
+  color: var(--lime);
 }
 .na-avatar-regen .icon {
   font-family: var(--mono);
@@ -314,21 +315,21 @@
 .na-avatar-meta {
   font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 .na-avatar-meta-label::after { content: ":"; margin-right: 4px; }
-.na-avatar-seed { color: var(--lime, #6FB572); }
-.na-avatar-roll { color: var(--text-soft, #8E8B83); }
+.na-avatar-seed { color: var(--lime); }
+.na-avatar-roll { color: var(--text-soft); }
 .na-avatar-hint {
   font-family: var(--font-human);
   font-size: 10px;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   letter-spacing: -0.003em;
   line-height: 1.3;
 }
-.na-avatar-hint .ink { color: var(--text-soft, #8E8B83); }
+.na-avatar-hint .ink { color: var(--text-soft); }
 
 /* Model picker — dropdown selection */
 .na-model-select { position: relative; }
@@ -339,16 +340,16 @@
   gap: 12px;
   align-items: center;
   padding: 10px 12px;
-  background: var(--bg, #0A0A0A);
-  border: 0.5px solid var(--line-strong, #3A3A35);
+  background: var(--bg);
+  border: 0.5px solid var(--line-strong);
   font-family: var(--mono);
   cursor: pointer;
   text-align: left;
   transition: border-color 0.12s;
 }
-.na-model-trigger:hover { border-color: var(--lime-dim, #2D5532); }
+.na-model-trigger:hover { border-color: var(--lime-dim); }
 .na-model-select[data-open="true"] .na-model-trigger {
-  border-color: var(--lime, #6FB572);
+  border-color: var(--lime);
 }
 .na-model-trigger .trigger-l {
   display: inline-flex;
@@ -358,12 +359,12 @@
 }
 .na-model-trigger .trigger-l .mark {
   font-size: 8px;
-  color: var(--lime, #6FB572);
+  color: var(--lime);
 }
 .na-model-trigger .trigger-l .name {
   font-size: 13px;
   font-weight: 700;
-  color: var(--text, #C8C5BE);
+  color: var(--text);
   letter-spacing: -0.003em;
   white-space: nowrap;
   overflow: hidden;
@@ -375,60 +376,60 @@
   gap: 7px;
   font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
 }
 .na-model-trigger .trigger-r .prov {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.14em;
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
 }
-.na-model-trigger .trigger-r .dot { color: var(--text-faint, #3A382F); }
+.na-model-trigger .trigger-r .dot { color: var(--text-faint); }
 .na-model-trigger .trigger-r .deck {
   font-family: var(--font-human);
   font-size: 11px;
   letter-spacing: -0.003em;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
 }
 .na-model-trigger .chev {
   margin-left: 4px;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
   font-size: 11px;
   display: inline-block;
   transition: transform 0.14s;
 }
 .na-model-select[data-open="true"] .chev {
   transform: rotate(180deg);
-  color: var(--lime, #6FB572);
+  color: var(--lime);
 }
 
 .na-model-dropdown {
   display: none;
   position: fixed;
   z-index: 1100;
-  background: var(--panel-2, #1A1A18);
-  border: 0.5px solid var(--lime, #6FB572);
+  background: var(--panel-2);
+  border: 0.5px solid var(--lime);
   padding: 6px 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   box-sizing: border-box;
   scrollbar-width: thin;
-  scrollbar-color: var(--lime-dim, #2D5532) var(--panel-2, #1A1A18);
+  scrollbar-color: var(--lime-dim) var(--panel-2);
 }
 .na-model-dropdown::-webkit-scrollbar { width: 8px; }
-.na-model-dropdown::-webkit-scrollbar-track { background: var(--panel-2, #1A1A18); }
+.na-model-dropdown::-webkit-scrollbar-track { background: var(--panel-2); }
 .na-model-dropdown::-webkit-scrollbar-thumb {
-  background: var(--lime-dim, #2D5532);
-  border: 2px solid var(--panel-2, #1A1A18);
+  background: var(--lime-dim);
+  border: 2px solid var(--panel-2);
 }
-.na-model-dropdown::-webkit-scrollbar-thumb:hover { background: var(--lime, #6FB572); }
+.na-model-dropdown::-webkit-scrollbar-thumb:hover { background: var(--lime); }
 .na-model-select[data-open="true"] .na-model-dropdown {
   display: block;
   animation: na-fade 0.12s ease-out;
 }
 .na-model-grp + .na-model-grp {
-  border-top: 0.5px dashed var(--line-bright, #2A2A26);
+  border-top: 0.5px dashed var(--line-bright);
   margin-top: 4px;
   padding-top: 4px;
 }
@@ -438,7 +439,7 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.18em;
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   padding: 4px 14px 3px;
   display: flex;
   align-items: baseline;
@@ -451,9 +452,9 @@
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
-.na-model-grp-status.direct { color: var(--lime, #6FB572); }
-.na-model-grp-status.via    { color: var(--amber, #B59560); }
-.na-model-grp-status.none   { color: var(--text-faint, #3A382F); }
+.na-model-grp-status.direct { color: var(--lime); }
+.na-model-grp-status.via    { color: var(--amber); }
+.na-model-grp-status.none   { color: var(--text-faint); }
 .na-model-opt {
   display: grid;
   grid-template-columns: 14px 1fr auto;
@@ -466,7 +467,7 @@
   transition: background 0.1s;
 }
 .na-model-opt .mark {
-  color: var(--lime, #6FB572);
+  color: var(--lime);
   font-size: 8px;
   visibility: hidden;
   text-align: center;
@@ -474,25 +475,25 @@
 .na-model-opt .name {
   font-size: 12px;
   font-weight: 700;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
   letter-spacing: -0.003em;
 }
 .na-model-opt .deck {
   font-family: var(--font-human);
   font-size: 10px;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   letter-spacing: -0.003em;
 }
 .na-model-opt:hover {
   background: rgba(111, 181, 114, 0.05);
 }
-.na-model-opt:hover .name { color: var(--text, #C8C5BE); }
+.na-model-opt:hover .name { color: var(--text); }
 .na-model-opt.active {
   background: rgba(111, 181, 114, 0.07);
 }
 .na-model-opt.active .mark { visibility: visible; }
-.na-model-opt.active .name { color: var(--lime, #6FB572); }
-.na-model-opt.active .deck { color: var(--text-soft, #8E8B83); }
+.na-model-opt.active .name { color: var(--lime); }
+.na-model-opt.active .deck { color: var(--text-soft); }
 
 /* Knowledge upload */
 .na-know-drop {
@@ -501,42 +502,42 @@
   gap: 14px;
   align-items: center;
   padding: 14px 16px;
-  background: var(--bg, #0A0A0A);
-  border: 0.5px dashed var(--line-strong, #3A3A35);
+  background: var(--bg);
+  border: 0.5px dashed var(--line-strong);
   cursor: pointer;
   transition: all 0.12s;
   text-decoration: none;
   color: inherit;
 }
 .na-know-drop:hover {
-  border-color: var(--lime, #6FB572);
+  border-color: var(--lime);
   border-style: solid;
   background: linear-gradient(135deg, var(--bg) 0%, rgba(111, 181, 114, 0.04) 100%);
 }
 .na-know-drop .icon {
   width: 32px;
   height: 32px;
-  border: 0.5px solid var(--line-strong, #3A3A35);
+  border: 0.5px solid var(--line-strong);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--mono);
   font-size: 16px;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   font-weight: 400;
 }
 .na-know-drop:hover .icon { border-color: var(--lime); color: var(--lime); }
 .na-know-drop .title {
   font-family: var(--mono);
   font-size: 12px;
-  color: var(--text, #C8C5BE);
+  color: var(--text);
   font-weight: 700;
   letter-spacing: -0.003em;
 }
 .na-know-drop .deck {
   font-family: var(--font-human);
   font-size: 10px;
-  color: var(--text-dim, #5C5A52);
+  color: var(--text-dim);
   margin-top: 2px;
   letter-spacing: -0.003em;
 }
@@ -547,9 +548,9 @@
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 4px 9px;
-  border: 0.5px solid var(--line-strong, #3A3A35);
-  color: var(--text-soft, #8E8B83);
-  background: var(--panel-2, #1A1A18);
+  border: 0.5px solid var(--line-strong);
+  color: var(--text-soft);
+  background: var(--panel-2);
   white-space: nowrap;
 }
 .na-know-drop:hover .pill {
@@ -568,8 +569,8 @@
   gap: 10px;
   align-items: center;
   padding: 7px 10px;
-  background: var(--panel-2, #1A1A18);
-  border: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--panel-2);
+  border: 0.5px solid var(--line-bright);
   font-family: var(--mono);
   font-size: 11px;
 }
@@ -611,9 +612,9 @@
 /* Footer · padding aligned with the head's horizontal scale (22px) so
    the modal's left/right edges feel like one ruled column. */
 .na-foot {
-  border-top: 0.5px solid var(--line, #1f1f1c);
+  border-top: 0.5px solid var(--line);
   padding: 10px 22px;
-  background: var(--panel-2, #1A1A18);
+  background: var(--panel-2);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -622,10 +623,10 @@
 .na-foot .summary {
   font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-faint, #3A382F);
+  color: var(--text-faint);
   letter-spacing: 0.06em;
 }
-.na-foot .summary .v { color: var(--text-soft, #8E8B83); }
+.na-foot .summary .v { color: var(--text-soft); }
 .na-foot-actions { display: flex; gap: 6px; }
 .na-foot .btn {
   font-family: var(--mono);
@@ -634,21 +635,21 @@
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 7px 13px;
-  border: 0.5px solid var(--line-strong, #3A3A35);
+  border: 0.5px solid var(--line-strong);
   background: transparent;
-  color: var(--text-soft, #8E8B83);
+  color: var(--text-soft);
   cursor: pointer;
   text-decoration: none;
   transition: all 0.12s;
 }
-.na-foot .btn:hover { border-color: var(--lime, #6FB572); color: var(--lime, #6FB572); }
+.na-foot .btn:hover { border-color: var(--lime); color: var(--lime); }
 .na-foot .btn.primary {
-  background: var(--lime, #6FB572);
-  border-color: var(--lime, #6FB572);
-  color: var(--bg, #0A0A0A);
+  background: var(--lime);
+  border-color: var(--lime);
+  color: var(--bg);
 }
 .na-foot .btn.primary:hover {
-  background: transparent; color: var(--lime, #6FB572);
+  background: transparent; color: var(--lime);
 }
 .na-foot .btn:disabled,
 .na-foot .btn.primary:disabled {
@@ -1028,8 +1029,8 @@
   max-width: 320px;
   max-height: 320px;
   overflow-y: auto;
-  background: var(--panel-2, #1A1A18);
-  border: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--panel-2);
+  border: 0.5px solid var(--line-bright);
   display: flex;
   flex-direction: column;
 }
@@ -1040,20 +1041,20 @@
   padding: 10px 12px;
   background: transparent;
   border: none;
-  border-bottom: 0.5px solid var(--line-bright, #2A2A26);
-  color: var(--text, #C8C5BE);
+  border-bottom: 0.5px solid var(--line-bright);
+  color: var(--text);
   cursor: pointer;
   text-align: left;
   font-family: var(--font-human);
   transition: background 0.1s;
 }
 .na-skill-pick:last-child { border-bottom: none; }
-.na-skill-pick:hover { background: var(--panel-3, #21211E); }
+.na-skill-pick:hover { background: var(--panel-3); }
 .na-skill-pick-icon {
   width: 28px; height: 28px;
-  border: 0.5px solid var(--line-bright, #2A2A26);
-  background: var(--bg, #0A0A0A);
-  color: var(--text, #C8C5BE);
+  border: 0.5px solid var(--line-bright);
+  background: var(--bg);
+  color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1070,12 +1071,12 @@
 .na-skill-pick-name {
   font-size: 12px;
   font-weight: 700;
-  color: var(--text, #C8C5BE);
+  color: var(--text);
 }
 .na-skill-pick-deck {
   font-family: var(--mono);
   font-size: 10px;
-  color: var(--text-faint, #5C5A52);
+  color: var(--text-faint);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

package/public/new-agent.js

@@ -405,7 +405,10 @@
   function getProviderStatus(provider) {
     const keys = (typeof window.boardroomKeys === "function" ? window.boardroomKeys() : {}) || {};
     if (keys[provider])    return { label: t("na_key_direct"),         cls: "direct" };
-    if (keys.openrouter)   return { label: t("na_key_via"),            cls: "via" };
+    // Any universal aggregator (OR or B.AI) routes this provider's
+    // models · without `|| keys.bai` here, a B.AI-only user would see
+    // every model labeled "no key" even though most are reachable.
+    if (keys.openrouter || keys.bai) return { label: t("na_key_via"), cls: "via" };
     return                       { label: t("na_key_none"),           cls: "none" };
   }