@validation-os/dashboard 0.15.2 → 0.15.4

package/dist/styles.css

@@ -2743,27 +2743,28 @@ button.vos-verdict-title {
   align-self: center;
 }
 .vos-stage-grid-card {
-  padding: 16px 18px;
+  padding: 22px 24px;
 }
 .vos-stage-grid-scroll {
   overflow-x: auto;
+  padding: 4px;
+  margin: -4px;
 }
 .vos-stage-grid {
   width: 100%;
   border-collapse: separate;
-  border-spacing: 0;
+  border-spacing: 6px;
   font-size: 13px;
 }
 .vos-stage-grid th,
 .vos-stage-grid td {
-  border-bottom: 1px solid var(--vos-border);
-  border-right: 1px solid var(--vos-border);
+  border: none;
   padding: 0;
   vertical-align: middle;
 }
 .vos-stage-grid th:last-child,
 .vos-stage-grid td:last-child {
-  border-right: none;
+  border: none;
 }
 .vos-stage-grid-corner {
   text-align: left;
@@ -2809,31 +2810,28 @@ button.vos-verdict-title {
 }
 .vos-stage-grid-cell {
   text-align: center;
-  background: var(--vos-surface);
-  /* The heatmap fill — opacity set per-cell via --vos-cell-alpha. */
-  background: color-mix(
-    in srgb,
-    var(--vos-accent) calc(var(--vos-cell-alpha, 0) * 100%),
-    var(--vos-surface)
-  );
+  background: transparent;
 }
-.vos-stage-grid-cell-empty {
+.vos-stage-grid-cell-empty .vos-stage-grid-btn {
   background: var(--vos-surface-2);
+  border-style: dashed;
+  border-color: var(--vos-border);
 }
 .vos-stage-grid-btn {
   width: 100%;
   height: 100%;
   min-height: 56px;
   background: transparent;
-  border: none;
+  border: 1px solid var(--vos-border);
   padding: 10px 12px;
   cursor: pointer;
   font: inherit;
   color: var(--vos-text);
-  border-radius: 0;
+  border-radius: 8px;
 }
 .vos-stage-grid-btn:hover {
   background: color-mix(in srgb, var(--vos-accent) 14%, transparent);
+  border-color: var(--vos-accent);
 }
 .vos-stage-grid-btn:focus-visible {
   outline: 2px solid var(--vos-accent);
@@ -2871,16 +2869,16 @@ button.vos-verdict-title {
 /* ── DEV-5879 redesign: unified nav, pipeline board, evidence-first details ── */
 
 /* Segmented toggle (Grid / View all) */
-.vos-seg { display: inline-flex; gap: 0; border: 1px solid var(--vos-border); border-radius: var(--vos-radius); overflow: hidden; }
+.vos-seg { display: inline-flex; gap: 0; border: 1px solid var(--vos-border); border-radius: var(--vos-radius); overflow: hidden; align-self: center; }
 .vos-seg-btn { padding: 6px 14px; background: transparent; border: none; color: var(--vos-muted); font: inherit; cursor: pointer; border-right: 1px solid var(--vos-border); transition: background 0.15s, color 0.15s; }
 .vos-seg-btn:last-child { border-right: none; }
 .vos-seg-btn:hover { background: var(--vos-surface-2); }
 .vos-seg-btn.is-active { background: var(--vos-accent-weak); color: var(--vos-accent-text); }
 
 /* Stage grid cell button (clean count, 1 for single) */
-.vos-stage-grid-cell { padding: 2px; }
-.vos-stage-grid-btn { width: 100%; min-height: 56px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--vos-text); transition: filter 0.15s; }
-.vos-stage-grid-btn:hover:not(:disabled) { filter: brightness(1.1); }
+.vos-stage-grid-cell { padding: 0; }
+.vos-stage-grid-btn { width: 100%; min-height: 56px; border: 1px solid var(--vos-border); border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--vos-text); transition: filter 0.15s, border-color 0.15s; }
+.vos-stage-grid-btn:hover:not(:disabled) { filter: brightness(1.05); border-color: var(--vos-accent); }
 .vos-stage-grid-btn:disabled { cursor: default; }
 .vos-heat-0 { background: var(--vos-surface); opacity: 0.4; color: var(--vos-muted); }
 .vos-heat-1 { background: color-mix(in srgb, var(--vos-accent) 18%, var(--vos-surface)); }
@@ -2937,8 +2935,8 @@ button.vos-verdict-title {
 .vos-crumb-link:hover { color: var(--vos-accent); }
 .vos-crumb-current { color: var(--vos-text); font-weight: 600; }
 
-/* List surfaces (experiments / readings). Standardized 14px padding. */
-.vos-list-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
+/* List surfaces (experiments / readings). Standardized 14px padding, 8px row gap. */
+.vos-list-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
 .vos-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; cursor: pointer; text-align: left; width: 100%; color: var(--vos-text); font: inherit; transition: border-color 0.15s; }
 .vos-list-row:hover { border-color: var(--vos-accent); }
 .vos-list-row-date { font-size: 9px; color: var(--vos-muted); min-width: 80px; }
@@ -2969,17 +2967,17 @@ button.vos-verdict-title {
 .vos-detail-section-label { font-size: 11px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
 
 /* Evidence composition (per-rung bars). Rung label shrinks on narrow screens;
-   value + count fixed so columns align; row wraps gracefully under ~360px. */
-.vos-comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: nowrap; }
+    value + count fixed so columns align; row wraps gracefully under ~360px. */
+.vos-comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
 .vos-comp-rung { width: 90px; flex-shrink: 0; font-size: 10px; color: var(--vos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .vos-comp-rung.is-empty { color: var(--vos-muted); }
 .vos-comp-bar { flex: 1 1 80px; min-width: 60px; height: 10px; background: var(--vos-surface-2); border-radius: 5px; overflow: hidden; }
 .vos-comp-fill { display: block; height: 100%; background: var(--vos-accent); border-radius: 5px; }
 .vos-comp-val { width: 70px; flex-shrink: 0; text-align: right; font-size: 10px; color: var(--vos-muted); }
-.vos-comp-count { width: 40px; flex-shrink: 0; font-size: 9px; color: var(--vos-muted); }
+.vos-comp-count { width: 52px; flex-shrink: 0; font-size: 9px; color: var(--vos-muted); }
 
 /* Relations */
-.vos-rel-group { margin-bottom: 10px; }
+.vos-rel-group { margin-bottom: 12px; }
 .vos-rel-kind { font-size: 10px; font-weight: 600; margin-bottom: 4px; }
 .vos-rel-kind-depends { color: var(--vos-accent-text); }
 .vos-rel-kind-enables { color: var(--vos-good); }
@@ -2993,8 +2991,8 @@ button.vos-verdict-title {
 .vos-rel-title { flex: 1; }
 .vos-rel-tag { font-size: 8px; color: var(--vos-muted); padding: 1px 4px; border: 1px solid var(--vos-border); border-radius: 3px; }
 
-/* Linked rows (experiments + readings on assumption detail). 14px padding. */
-.vos-linked-row { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; padding: 14px; cursor: pointer; width: 100%; margin-bottom: 6px; font: inherit; color: var(--vos-text); transition: border-color 0.15s; }
+/* Linked rows (experiments + readings on assumption detail). 10px 12px padding matches list rows. */
+.vos-linked-row { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; padding: 10px 12px; cursor: pointer; width: 100%; margin-bottom: 8px; font: inherit; color: var(--vos-text); transition: border-color 0.15s; }
 .vos-linked-row:hover { border-color: var(--vos-accent); }
 .vos-linked-gauge { font-size: 16px; font-weight: 700; min-width: 32px; text-align: center; }
 .vos-linked-title { flex: 1; font-size: 12px; }
@@ -3074,14 +3072,208 @@ button.vos-verdict-title {
 .vos-reading-collapse { border: 1px solid var(--vos-border); border-radius: 8px; margin-bottom: 8px; background: var(--vos-surface-2); overflow: hidden; transition: border-color 0.15s; }
 .vos-reading-collapse:hover { border-color: var(--vos-border-strong); }
 .vos-reading-collapse[open] { border-color: var(--vos-border-strong); }
-.vos-reading-collapse > summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; transition: background 0.15s; }
+.vos-reading-collapse > summary { display: flex; gap: 12px; align-items: center; padding: 14px; cursor: pointer; list-style: none; user-select: none; transition: background 0.15s; }
 .vos-reading-collapse > summary::-webkit-details-marker { display: none; }
-.vos-reading-collapse > summary::before { content: "▸"; color: var(--vos-muted); font-size: 10px; transition: transform 0.15s; flex-shrink: 0; }
+.vos-reading-collapse > summary::before { content: "▸"; color: var(--vos-muted); font-size: 10px; transition: transform 0.15s; flex-shrink: 0; display: inline-flex; align-items: center; }
 .vos-reading-collapse[open] > summary::before { transform: rotate(90deg); }
 .vos-reading-collapse > summary:hover { background: var(--vos-surface); }
 .vos-reading-card-summary { display: flex; gap: 12px; align-items: center; width: 100%; min-width: 0; }
 .vos-reading-beliefs-count { font-size: 10px; color: var(--vos-muted); margin-left: auto; flex-shrink: 0; }
-.vos-reading-card-body { padding: 0 16px 14px; }
+.vos-reading-card-body { padding: 0 14px 14px; }
+
+/* Evidence composition — fix the value display (signed contributions).
+   Width is set on the primary .vos-comp-val rule above; no override needed. */
+
+/* ── DEV-5879: confidence explainer + grading rationale labels ── */
+
+/* Grading rationale (NOT a quote — the grader's reason for the score) */
+.vos-reading-rationale, .vos-belief-rationale {
+  padding: 6px 10px;
+  border-left: 3px solid var(--vos-border);
+  background: var(--vos-surface);
+  border-radius: 0 4px 4px 0;
+  margin: 4px 0 6px;
+  font-size: 11px;
+  color: var(--vos-text);
+}
+.vos-reading-rationale { margin: 4px 0; }
+.vos-belief-rationale { margin: 4px 0 6px; }
+.vos-belief-rationale-label, .vos-reading-rationale-label {
+  font-size: 9px;
+  color: var(--vos-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-right: 6px;
+}
+
+/* Confidence explainer (collapsible) */
+.vos-explainer { border: 1px solid var(--vos-border); }
+.vos-explainer-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.vos-explainer-summary::-webkit-details-marker { display: none; }
+.vos-explainer-summary::before { content: "▸"; color: var(--vos-muted); font-size: 10px; margin-right: 12px; transition: transform 0.15s; display: inline-flex; align-items: center; }
+.vos-explainer[open] > .vos-explainer-summary::before { transform: rotate(90deg); }
+.vos-explainer-conf { font-size: 18px; font-weight: 700; }
+.vos-explainer-body { padding: 0 14px 14px; }
+.vos-explainer-formula {
+  font-family: var(--vos-mono);
+  font-size: 12px;
+  color: var(--vos-accent-text);
+  background: var(--vos-surface-2);
+  padding: 8px 12px;
+  border-radius: 6px;
+  margin-bottom: 12px;
+}
+.vos-explainer-summary-text { font-size: 13px; color: var(--vos-text); margin-bottom: 16px; line-height: 1.5; }
+.vos-explainer-rungs { border: 1px solid var(--vos-border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
+.vos-explainer-rungs-head, .vos-explainer-rung {
+  display: grid;
+  grid-template-columns: 1.5fr 0.8fr 1fr 1fr 0.8fr;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 11px;
+  align-items: center;
+}
+.vos-explainer-rungs-head {
+  background: var(--vos-surface-2);
+  color: var(--vos-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  font-size: 9px;
+  padding: 8px 12px;
+}
+.vos-explainer-rung { border-top: 1px solid var(--vos-border); }
+.vos-explainer-rung.is-not-lens { opacity: 0.5; }
+.vos-explainer-rung.has-evidence { background: var(--vos-surface); }
+.vos-explainer-rung-name { font-weight: 500; color: var(--vos-text); }
+.vos-explainer-rung-w0, .vos-explainer-rung-anchors, .vos-explainer-rung-count { color: var(--vos-muted); }
+.vos-explainer-rung-contrib { font-weight: 600; text-align: right; }
+.vos-explainer-foot { font-size: 11px; color: var(--vos-muted); line-height: 1.6; }
+.vos-explainer-foot p { margin-bottom: 8px; }
+.vos-explainer-foot strong { color: var(--vos-text); }
+
+/* Recommended experiment cards — expandable with body + accept inside */
+.vos-pipe-rec { overflow: hidden; }
+.vos-pipe-rec-body {
+  padding: 12px 14px 14px;
+  border-top: 1px solid var(--vos-border);
+  background: var(--vos-surface);
+  font-size: 12px;
+  color: var(--vos-text);
+  line-height: 1.6;
+}
+.vos-pipe-rec-body h2 { font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--vos-text); }
+.vos-pipe-rec-body h2:first-child { margin-top: 0; }
+.vos-pipe-rec-body p { margin-bottom: 8px; }
+.vos-pipe-rec-body ul { padding-left: 18px; margin-bottom: 8px; }
+.vos-pipe-rec-body li { margin-bottom: 4px; }
+.vos-pipe-rec-expand {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--vos-accent-text);
+  font-size: 11px;
+  padding: 4px 0;
+  margin-top: 6px;
+}
+
+/* ── DEV-5879: Next moves two-column section ── */
+
+.vos-next-moves { margin-top: 16px; }
+.vos-next-moves-head {
+  font-size: 11px;
+  color: var(--vos-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+.vos-next-moves-cols {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 16px;
+  align-items: start;
+}
+@media (max-width: 900px) {
+  .vos-next-moves-cols { grid-template-columns: 1fr; }
+}
+.vos-next-moves-col { padding: 14px; }
+.vos-next-moves-col-label {
+  font-size: 11px;
+  color: var(--vos-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+.vos-next-moves-empty { padding: 12px 14px; font-size: 12px; }
+.vos-next-moves-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: var(--vos-surface-2);
+  border: 1px solid var(--vos-border);
+  border-radius: 8px;
+  padding: 12px 14px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  color: var(--vos-text);
+  font: inherit;
+  transition: border-color 0.15s;
+}
+.vos-next-moves-item:hover { border-color: var(--vos-accent); }
+.vos-next-moves-item-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.vos-next-moves-item-id { font-size: 10px; color: var(--vos-muted); }
+.vos-next-moves-item-risk { font-size: 10px; font-weight: 600; }
+.vos-next-moves-item-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; line-height: 1.4; }
+.vos-next-moves-item-hint { font-size: 11px; color: var(--vos-muted); line-height: 1.4; }
+.vos-next-moves-rec { margin-bottom: 8px; }
+
+/* ── DEV-5879: grid text breathing room + next-move box consistency + header cleanup ── */
+
+/* Grid: more spacing between cells, taller cells, bigger text */
+.vos-stage-grid { border-spacing: 8px !important; }
+.vos-stage-grid-btn { min-height: 64px !important; font-size: 18px !important; }
+.vos-stage-grid-col { min-width: 140px !important; padding: 12px 14px !important; }
+.vos-stage-grid-rowhead { padding: 10px 14px !important; }
+.vos-stage-grid-stagename { font-size: 14px !important; }
+.vos-stage-grid-stagegloss { font-size: 11px !important; line-height: 1.4 !important; }
+
+/* Next-moves: equal-width columns, equal-height boxes, adaptable */
+.vos-next-moves-cols {
+  grid-template-columns: 1fr 1fr !important;
+  align-items: stretch !important;
+}
+.vos-next-moves-col {
+  display: flex !important;
+  flex-direction: column !important;
+  padding: 16px !important;
+}
+.vos-next-moves-col-label { margin-bottom: 14px !important; }
+/* Equal-height items within each column */
+.vos-next-moves-item, .vos-next-moves-rec {
+  flex: 1 1 auto;
+  min-height: 80px;
+}
+/* The proposed experiment summary should match the needs-framing item height */
+.vos-next-moves-rec > summary {
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+}
 
-/* Evidence composition — fix the value display (signed contributions) */
-.vos-comp-val { width: 70px; }
+/* Topbar: hide the backend + agent indicators (clean header) */
+.vos-backend, .vos-hint:has(.vos-live-dot) { display: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@validation-os/dashboard",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "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.15.2"
+    "@validation-os/core": "0.15.4"
   },
   "peerDependencies": {
     "react": ">=18",