omp-llm-role 1.0.0 → 1.2.0

package/web/style.css

@@ -38,6 +38,7 @@ body {
 #meta .brand { font-weight: 600; color: var(--accent); }
 #meta .sep { color: var(--line); }
 #meta .lock { color: var(--muted); font-family: var(--mono); font-size: 11px; }
+#meta #scope { max-width: 340px; }
 #meta button { margin-left: auto; }
 
 #roles {
@@ -159,6 +160,13 @@ table { border-collapse: collapse; width: 100%; }
 #table td.num, #table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
 #table td.model { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
 #table td.org { color: var(--muted); }
+#table td.key { text-align: center; }
+/* Key-usability badge: three states, reusing the :root hues (up/down/muted). */
+.badge { display: inline-block; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 16px; }
+.badge.usable { color: var(--up); border-color: var(--up); }
+.badge.blocked { color: var(--down); border-color: var(--down); }
+.badge.unknown { color: var(--muted); border-color: var(--line); }
+.key-line { color: var(--muted); }
 #table td.star { color: var(--warn); text-align: center; }
 #table td.delta { font-family: var(--mono); text-align: right; }
 #table td.delta.up { color: var(--up); }
@@ -181,6 +189,19 @@ table.comp th { text-align: left; color: var(--muted); font-weight: 500; font-si
 table.comp td.num, table.comp th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
 table.comp tr.missing-row td { color: var(--muted); }
 table.comp tr.note-row td { border-bottom: none; font-size: 11px; padding-top: 0; }
+
+/* Focus-metric audit: one row per weighted benchmark/percentile metric, four
+   signal cells. ok = up, below-bar = warn + glyph, unknown = muted (never ok). */
+table.focus { width: 100%; border-collapse: collapse; }
+table.focus th, table.focus td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
+table.focus th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; }
+table.focus td { font-family: var(--mono); font-size: 12px; }
+table.focus td:first-child { font-family: inherit; color: var(--muted); }
+table.focus tr.warned td:first-child { color: var(--fg); }
+.sig.ok { color: var(--up); }
+.sig.below-bar { color: var(--warn); }
+.sig.below-bar::before { content: "⚠ "; }
+.sig.unknown { color: var(--muted); }
 .barcell { width: 90px; }
 .bar { background: var(--panel-2); border-radius: 3px; height: 8px; overflow: hidden; }
 .bar .fill { background: var(--accent); height: 100%; }
@@ -204,6 +225,28 @@ button.x { padding: 1px 7px; color: var(--down); }
 .checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
 .check { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 12px; }
 
+/* Capability flags (issue #40): one tri-state control per capability, the
+   recommended bundle, and the knobs it fills. A knob whose value is DERIVED
+   from an enabled capability gets a dashed accent border + a "derived" badge;
+   an authored (explicit) value gets a solid line + an "authored" badge. */
+.features { display: flex; flex-direction: column; gap: 8px; }
+.feature { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
+.feature.on { border-color: var(--accent); }
+.feature-head { display: flex; gap: 8px; align-items: center; }
+.feature-state { flex: 0 0 auto; }
+.feature-label { color: var(--fg); }
+.feature-origin { margin-left: auto; font-size: 11px; }
+.feature-bundle { font-family: var(--mono); font-size: 11px; margin-top: 2px; }
+.feature-knobs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
+.knob { display: flex; gap: 5px; align-items: center; font-family: var(--mono); font-size: 11px; }
+.knob-input { width: 84px; }
+.knob-name { color: var(--muted); }
+.knob.derived .knob-input { border-style: dashed; border-color: var(--accent); }
+.knob-badge { padding: 0 5px; border-radius: 999px; border: 1px solid var(--line); font-size: 10px; line-height: 15px; }
+.knob-badge.derived { color: var(--accent); border-color: var(--accent); }
+.knob-badge.authored { color: var(--up); border-color: var(--up); }
+.knob-badge.none { color: var(--muted); }
+
 #export-bar {
   display: flex;
   gap: 8px;
@@ -235,7 +278,7 @@ button.x { padding: 1px 7px; color: var(--down); }
 /* elements that carry an explanation read as hoverable without being links */
 [data-tip] { cursor: help; }
 button[data-tip], select[data-tip], input[data-tip] { cursor: pointer; }
-#table thead th[data-tip], .tab[data-tip], table.comp th[data-tip], table.weights td[data-tip] { text-decoration: underline dotted var(--line); text-underline-offset: 3px; }
+#table thead th[data-tip], .tab[data-tip], table.comp th[data-tip], table.focus th[data-tip], table.weights td[data-tip] { text-decoration: underline dotted var(--line); text-underline-offset: 3px; }
 
 @media (max-width: 1100px) {
   main { grid-template-columns: 1fr; }