@validation-os/dashboard 0.16.1 → 0.16.3

package/dist/styles.css

@@ -3375,11 +3375,12 @@ button.vos-verdict-title {
 .vos-stage-grid-stagename { font-size: 15px !important; }
 .vos-stage-grid-stagegloss { font-size: 11px !important; line-height: 1.4 !important; }
 .vos-stage-grid-corner { font-weight: 600; }
+/* Heat scale = Risk intensity (red = high risk) */
 .vos-heat-0 { background: var(--vos-surface); opacity: 0.45; color: var(--vos-muted); border-style: dashed; }
-.vos-heat-1 { background: color-mix(in srgb, var(--vos-accent) 16%, var(--vos-surface)); }
-.vos-heat-2 { background: color-mix(in srgb, var(--vos-accent) 30%, var(--vos-surface)); }
-.vos-heat-3 { background: color-mix(in srgb, var(--vos-accent) 44%, var(--vos-surface)); }
-.vos-heat-4 { background: color-mix(in srgb, var(--vos-accent) 58%, var(--vos-surface)); }
+.vos-heat-1 { background: color-mix(in srgb, var(--vos-crit) 16%, var(--vos-surface)); }
+.vos-heat-2 { background: color-mix(in srgb, var(--vos-crit) 30%, var(--vos-surface)); }
+.vos-heat-3 { background: color-mix(in srgb, var(--vos-crit) 44%, var(--vos-surface)); }
+.vos-heat-4 { background: color-mix(in srgb, var(--vos-crit) 58%, var(--vos-surface)); }
 
 /* Glossary popover: parent cards no longer clip overflow, so the absolute
  * popover can show. High z-index in case it overlaps other stacked cards. */
@@ -3388,6 +3389,66 @@ button.vos-verdict-title {
 /* Topbar: hide the backend + agent indicators (clean header) */
 .vos-backend, .vos-hint:has(.vos-live-dot) { display: none !important; }
 
+/* ── DEV-5890: Question Type filter tabs + heat legend ─────────────────── */
+.vos-qt-filter-bar {
+  display: flex;
+  gap: 4px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vos-border);
+  flex-wrap: wrap;
+}
+
+.vos-qt-tab {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 3px 10px;
+  border: 1px solid var(--vos-border);
+  border-radius: 12px;
+  background: transparent;
+  color: var(--vos-muted);
+  cursor: pointer;
+  transition: all 0.15s ease-out;
+}
+
+.vos-qt-tab:hover {
+  border-color: var(--vos-border-strong);
+  color: var(--vos-text);
+}
+
+.vos-qt-tab-active {
+  background: var(--vos-accent);
+  border-color: var(--vos-accent);
+  color: #fff;
+}
+
+.vos-heat-legend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  font-size: 9px;
+  color: var(--vos-muted);
+}
+
+.vos-heat-legend-label {
+  margin-right: 4px;
+  font-weight: 600;
+}
+
+.vos-heat-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 10px;
+  border-radius: 2px;
+  border: 1px solid var(--vos-border);
+}
+
+.vos-heat-swatch.vos-heat-0 { background: var(--vos-surface-2); }
+.vos-heat-swatch.vos-heat-1 { background: rgba(214, 69, 80, 0.15); }
+.vos-heat-swatch.vos-heat-2 { background: rgba(214, 69, 80, 0.35); }
+.vos-heat-swatch.vos-heat-3 { background: rgba(214, 69, 80, 0.6); }
+.vos-heat-swatch.vos-heat-4 { background: rgba(214, 69, 80, 0.85); }
+
 /* ── DEV-5890: Question Type + stage threshold tags ────────────────────── */
 .vos-pipe-tag {
   font-size: 9px;
@@ -3404,13 +3465,15 @@ button.vos-verdict-title {
 .vos-pipe-tag-needs { color: var(--vos-warn); border-color: var(--vos-warn); }
 .vos-detail-tag-qt { border-color: var(--vos-accent); color: var(--vos-accent); }
 
-/* Stage-keyed threshold bar (assumption detail, DEV-5890) — two bars:
-   Risk (fills toward threshold) + Confidence (fills toward floor). */
+/* Stage-keyed evidence bar (assumption detail, DEV-5890) — a single
+   Confidence bar that fills UP toward the stage's floor marker. The target
+   zone above the marker is tinted to show "this is where you need to be."
+   Maturity's marker is at 60% (hard to reach); Discovery's is at 10% (easy). */
 .vos-threshold-bar-card {
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
 .vos-threshold-bar-header {
@@ -3445,22 +3508,11 @@ button.vos-verdict-title {
   border-radius: 4px;
 }
 
-.vos-threshold-bar-good {
-  color: var(--vos-good);
-  background: var(--vos-good-weak);
-}
-
-.vos-threshold-bar-warn {
-  color: var(--vos-warn);
-  background: var(--vos-warn-weak);
-}
-
-.vos-threshold-bar-crit {
-  color: var(--vos-crit);
-  background: var(--vos-crit-weak);
-}
+.vos-threshold-bar-good { color: var(--vos-good); background: var(--vos-good-weak); }
+.vos-threshold-bar-warn { color: var(--vos-warn); background: var(--vos-warn-weak); }
+.vos-threshold-bar-crit { color: var(--vos-crit); background: var(--vos-crit-weak); }
 
-/* Each bar section (Risk + Confidence) */
+/* Bar section */
 .vos-threshold-bar-section {
   display: flex;
   flex-direction: column;
@@ -3487,39 +3539,54 @@ button.vos-verdict-title {
   margin-left: auto;
 }
 
-/* The bar track */
+/* The bar track — taller for prominence */
 .vos-threshold-bar-track {
   position: relative;
-  height: 18px;
-  border-radius: 5px;
+  height: 24px;
+  border-radius: 6px;
   background: var(--vos-surface-2);
   overflow: visible;
   border: 1px solid var(--vos-border);
 }
 
+.vos-threshold-bar-track-tall {
+  height: 28px;
+}
+
+/* The target zone — tinted area above the floor marker (where you need to be) */
+.vos-threshold-bar-target-zone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 4px,
+    rgba(0, 0, 0, 0.03) 4px,
+    rgba(0, 0, 0, 0.03) 8px
+  );
+  border-radius: 0 5px 5px 0;
+  pointer-events: none;
+}
+
+/* The fill */
 .vos-threshold-bar-fill {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
-  border-radius: 4px 0 0 4px;
-  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  opacity: 0.75;
-}
-
-.vos-threshold-bar-fill.vos-fill-good {
-  background: var(--vos-good);
-}
-
-.vos-threshold-bar-fill.vos-fill-warn {
-  background: var(--vos-warn);
+  border-radius: 5px 0 0 5px;
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0.8;
+  z-index: 1;
 }
 
-.vos-threshold-bar-fill.vos-fill-crit {
-  background: var(--vos-crit);
-}
+.vos-threshold-bar-fill.vos-fill-good { background: var(--vos-good); }
+.vos-threshold-bar-fill.vos-fill-warn { background: var(--vos-warn); }
+.vos-threshold-bar-fill.vos-fill-crit { background: var(--vos-crit); }
 
-/* The threshold/floor marker — a vertical dashed line */
+/* The floor marker — a vertical dashed line with a label above */
 .vos-threshold-bar-marker {
   position: absolute;
   top: -2px;
@@ -3530,6 +3597,46 @@ button.vos-verdict-title {
   z-index: 2;
 }
 
+.vos-threshold-bar-marker-label {
+  position: absolute;
+  top: -14px;
+  left: 4px;
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--vos-muted);
+  white-space: nowrap;
+}
+
+/* Scale under the bar */
+.vos-threshold-bar-scale {
+  display: flex;
+  justify-content: space-between;
+  font-size: 8px;
+  color: var(--vos-faint);
+  padding: 0 1px;
+}
+
+.vos-threshold-bar-scale-mid {
+  color: var(--vos-faint);
+}
+
+/* Compact risk summary */
+.vos-threshold-bar-risk-summary {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.vos-threshold-bar-risk-val {
+  font-weight: 700;
+}
+
+.vos-threshold-bar-risk-cap {
+  color: var(--vos-muted);
+  font-size: 10px;
+}
+
 .vos-threshold-bar-hint {
   font-size: 11px;
   color: var(--vos-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@validation-os/dashboard",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "description": "React dashboard components + hooks for validation-os, consuming the DataProvider seam.",
   "license": "MIT",
   "type": "module",
@@ -22,7 +22,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@validation-os/core": "0.16.1"
+    "@validation-os/core": "0.16.3"
   },
   "peerDependencies": {
     "react": ">=18",