sloppatrol 0.1.1 → 0.1.2

package/ui/style.css

@@ -1,40 +1,46 @@
+/* The theme comes from data-theme on <html>: the user's choice, or else the system setting (index.html). */
 :root {
   --bg: #f7f7f5;
   --panel: #ffffff;
+  --panel-2: #f1f1ee;
   --line: #e4e4e0;
   --text: #1c1c1a;
-  --muted: #6b6b66;
+  --muted: #62625d;
   --accent: #3b5bdb;
-  --ok: #2b8a3e;
-  --ok-bg: #ebfbee;
-  --bad: #c92a2a;
-  --bad-bg: #fff5f5;
-  --run: #e67700;
-  --run-bg: #fff9db;
-  --idle: #868e96;
-  --idle-bg: #f1f3f5;
+  --ok: #237a36;
+  --ok-bg: #e6f6e9;
+  --bad: #b42323;
+  --bad-bg: #fdeeee;
+  --warn: #8f4a00;
+  --warn-bg: #fff3dc;
+  --run: #2f4fc4;
+  --run-bg: #eaeefc;
+  --idle: #5f6670;
+  --idle-bg: #eef0f2;
   --radius: 10px;
   --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  color-scheme: light dark;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #121212;
-    --panel: #1b1b1b;
-    --line: #2c2c2c;
-    --text: #ececec;
-    --muted: #9a9a9a;
-    --accent: #748ffc;
-    --ok: #69db7c;
-    --ok-bg: #16281b;
-    --bad: #ff8787;
-    --bad-bg: #2c1717;
-    --run: #ffc078;
-    --run-bg: #2b2414;
-    --idle: #868e96;
-    --idle-bg: #232323;
-  }
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --bg: #121212;
+  --panel: #1b1b1b;
+  --panel-2: #232323;
+  --line: #2e2e2e;
+  --text: #ececec;
+  --muted: #a3a3a3;
+  --accent: #8199fc;
+  --ok: #69db7c;
+  --ok-bg: #16281b;
+  --bad: #ff8787;
+  --bad-bg: #2f1818;
+  --warn: #ffc078;
+  --warn-bg: #2d2414;
+  --run: #91a7ff;
+  --run-bg: #1c2240;
+  --idle: #a0a7ae;
+  --idle-bg: #262626;
+  color-scheme: dark;
 }
 
 * {
@@ -58,18 +64,59 @@ a {
   text-decoration: none;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 code,
 pre {
   font-family: var(--mono);
   font-size: 12px;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.small {
+  font-size: 12px;
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* ---------- top bar ---------- */
+
 .top {
+  position: sticky;
+  top: 0;
+  z-index: 2;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 24px;
+  gap: 24px;
+  padding: 0 24px;
+  height: 52px;
   border-bottom: 1px solid var(--line);
   background: var(--panel);
 }
@@ -77,7 +124,8 @@ pre {
 .brand {
   display: flex;
   align-items: baseline;
-  gap: 10px;
+  gap: 8px;
+  white-space: nowrap;
 }
 
 .logo {
@@ -89,123 +137,152 @@ pre {
   letter-spacing: -0.01em;
 }
 
-.project,
-.meta {
+.project {
   color: var(--muted);
 }
 
-.meta {
+.tabs {
   display: flex;
-  gap: 14px;
-  align-items: center;
-  font-size: 13px;
-}
-
-.lanes {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 12px;
-  padding: 16px 24px 0;
+  gap: 2px;
+  align-self: stretch;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
 }
 
-.lane {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 12px 14px;
-  min-height: 86px;
-  cursor: default;
+.tabs a {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  color: var(--muted);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
 }
 
-.lane[data-session] {
-  cursor: pointer;
+.tabs a:hover {
+  color: var(--text);
+  text-decoration: none;
 }
 
-.lane[data-session]:hover {
+.tabs a.active {
+  color: var(--text);
   border-color: var(--accent);
+  font-weight: 600;
 }
 
-.lane-head {
+.tools {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  font-weight: 600;
-}
-
-.lane-detail {
-  color: var(--muted);
-  font-size: 13px;
-  margin-top: 6px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  gap: 6px;
 }
 
-.lane-time {
-  color: var(--muted);
-  font-size: 12px;
-  margin-top: 4px;
+.activity {
+  margin-right: 6px;
 }
 
-.stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  padding: 14px 24px;
+.icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: none;
   color: var(--muted);
+  cursor: pointer;
 }
 
-.stats b {
+.icon-button:hover {
   color: var(--text);
-  font-size: 18px;
-  margin-right: 6px;
-  font-variant-numeric: tabular-nums;
+  background: var(--panel-2);
+  text-decoration: none;
 }
 
-.tabs {
-  display: flex;
-  gap: 4px;
-  padding: 0 24px;
-  border-bottom: 1px solid var(--line);
+.icon-button svg,
+.external svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.tabs a {
-  padding: 10px 12px;
-  color: var(--muted);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
+.offline {
+  padding: 10px 24px;
+  background: var(--bad-bg);
+  color: var(--bad);
+  border-bottom: 1px solid var(--line);
 }
 
-.tabs a.active {
-  color: var(--text);
-  border-color: var(--accent);
-  font-weight: 600;
+body:has(.offline:not([hidden])) main {
+  opacity: 0.55;
 }
 
-.tabs .count {
-  color: var(--muted);
-  font-weight: 400;
-  margin-left: 4px;
-}
+/* ---------- layout ---------- */
 
 .layout {
   display: flex;
   gap: 16px;
-  padding: 16px 24px 40px;
+  padding: 16px 24px 48px;
   align-items: flex-start;
+  max-width: 1680px;
+  margin: 0 auto;
 }
 
 main {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.grid {
+  display: grid;
+  gap: 14px;
+  align-items: start;
+}
+
+.grid.two {
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+}
+
+.grid.two.narrow-right {
+  grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  min-width: 0;
+}
+
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.card-head h2 {
+  font-size: 14px;
+  margin: 0;
+}
+
+.card-head .muted {
+  font-size: 12px;
 }
 
 .detail {
-  width: min(560px, 45vw);
+  width: min(560px, 42vw);
   position: sticky;
-  top: 16px;
-  max-height: calc(100vh - 32px);
+  top: 68px;
+  max-height: calc(100vh - 84px);
   overflow: auto;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -215,7 +292,8 @@ main {
 
 .detail h2 {
   font-size: 16px;
-  margin: 0 32px 6px 0;
+  margin: 0 36px 8px 0;
+  overflow-wrap: anywhere;
 }
 
 .detail h3 {
@@ -228,11 +306,7 @@ main {
 
 .detail .close {
   float: right;
-  border: 0;
-  background: none;
-  color: var(--muted);
   font-size: 18px;
-  cursor: pointer;
 }
 
 .detail p {
@@ -240,354 +314,886 @@ main {
   white-space: pre-wrap;
 }
 
-.list {
+/* ---------- stats band ---------- */
+
+.band {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1px;
+  background: var(--line);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.stat {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 2px;
+  min-width: 0;
+  padding: 11px 14px;
+  background: var(--panel);
+  border: 0;
+  text-align: left;
 }
 
-.row {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 12px 14px;
+button.stat {
   cursor: pointer;
 }
 
-.row:hover,
-.row.selected {
-  border-color: var(--accent);
+button.stat:hover {
+  background: var(--panel-2);
 }
 
-.row-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
+.stat-label {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.row-title {
-  font-weight: 600;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.stat-value {
+  font-size: 21px;
+  line-height: 1.25;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
 }
 
-.row-sub {
+.stat-value .of {
+  font-size: 13px;
+  font-weight: 500;
   color: var(--muted);
-  font-size: 12px;
-  margin-top: 6px;
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
 }
 
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
+.stat-note {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  color: var(--muted);
   font-size: 12px;
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: var(--idle-bg);
-  color: var(--idle);
-  white-space: nowrap;
 }
 
-.chip.ok {
-  background: var(--ok-bg);
+.stat.tone-pass .stat-value {
   color: var(--ok);
 }
 
-.chip.bad {
-  background: var(--bad-bg);
+.stat.tone-fail .stat-value {
   color: var(--bad);
 }
 
-.chip.run {
-  background: var(--run-bg);
-  color: var(--run);
+.stat.tone-warn .stat-value {
+  color: var(--warn);
 }
 
-.chip.kind {
-  background: transparent;
-  border: 1px solid var(--line);
-  color: var(--muted);
+.stat.tone-run .stat-value {
+  color: var(--run);
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: currentColor;
-  flex: none;
+.stat.tone-pass,
+.stat.tone-fail,
+.stat.tone-warn {
+  box-shadow: inset 3px 0 0 currentColor;
 }
 
-.chip.run .dot,
-.step.run .mark {
-  animation: pulse 1.2s ease-in-out infinite;
+.stat.tone-pass {
+  color: var(--ok);
 }
 
-@keyframes pulse {
-  50% {
-    opacity: 0.3;
-  }
+.stat.tone-fail {
+  color: var(--bad);
 }
 
-.steps {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 10px;
-  flex-wrap: wrap;
+.stat.tone-warn {
+  color: var(--warn);
 }
 
-.step {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  color: var(--idle);
+.stat.tone-pass .stat-label,
+.stat.tone-fail .stat-label,
+.stat.tone-warn .stat-label {
+  color: var(--muted);
 }
 
-.step .mark {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  display: inline-grid;
-  place-items: center;
-  font-size: 11px;
-  background: var(--idle-bg);
+.delta {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  vertical-align: middle;
 }
 
-.step.ok {
+.delta.up {
   color: var(--ok);
 }
-.step.ok .mark {
-  background: var(--ok-bg);
-}
-.step.bad {
+
+.delta.down {
   color: var(--bad);
 }
-.step.bad .mark {
-  background: var(--bad-bg);
+
+/* ---------- empty state and commands ---------- */
+
+.empty-state {
+  max-width: 40rem;
+  margin: 28px auto;
+  text-align: center;
 }
-.step.run {
-  color: var(--run);
+
+.empty-state.compact {
+  margin: 2px 0;
+  max-width: none;
+  text-align: left;
 }
-.step.run .mark {
-  background: var(--run-bg);
+
+.empty-state h3 {
+  font-size: 15px;
+  margin: 0 0 6px;
 }
 
-.arrow {
-  color: var(--line);
+.empty-state.compact h3 {
+  font-size: 14px;
 }
 
-.pills {
+.empty-state p {
+  margin: 0 0 10px;
+  color: var(--muted);
+}
+
+.empty-state:not(.compact) .command {
+  margin-inline: auto;
+}
+
+.command {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 4px 4px 4px 10px;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  text-align: left;
+}
+
+.command code {
+  overflow-wrap: anywhere;
+}
+
+.copy {
+  flex: none;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  padding: 2px 9px;
+  font-size: 12px;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.copy:hover {
+  color: var(--text);
+}
+
+.link {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--accent);
+  cursor: pointer;
+  text-align: left;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.callout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 10px 12px;
+  border-left: 3px solid var(--accent);
+  background: var(--panel);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.callout p {
+  margin: 0;
+}
+
+/* ---------- needs attention ---------- */
+
+.attention-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.attention {
+  padding: 10px 12px;
+  border-left: 3px solid var(--idle);
+  background: var(--panel-2);
+  border-radius: 0 8px 8px 0;
+}
+
+.attention.fail {
+  border-color: var(--bad);
+}
+
+.attention.warn {
+  border-color: var(--warn);
+}
+
+.attention.info {
+  border-color: var(--accent);
+}
+
+.attention-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.attention p {
+  margin: 2px 0 8px;
+  color: var(--muted);
+}
+
+.attention .links {
+  margin: 0 0 8px;
+  padding-left: 18px;
+}
+
+.attention .links li {
+  margin-bottom: 2px;
+}
+
+.external {
+  color: var(--muted);
+  vertical-align: -3px;
+}
+
+/* ---------- agents ---------- */
+
+.agents {
+  display: flex;
+  flex-direction: column;
+}
+
+.agent {
+  display: grid;
+  grid-template-columns: 92px auto 1fr auto;
+  align-items: baseline;
+  gap: 4px 10px;
+  padding: 7px 4px;
+  border: 0;
+  border-top: 1px solid var(--line);
+  background: none;
+  text-align: left;
+}
+
+.agent:first-child {
+  border-top: 0;
+}
+
+button.agent {
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+button.agent:hover {
+  background: var(--panel-2);
+}
+
+.agent-name {
+  font-weight: 600;
+}
+
+.agent-detail {
+  color: var(--muted);
+  font-size: 13px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.agent-time {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* ---------- quality and results ---------- */
+
+.meters,
+.tally {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.meters li {
+  display: grid;
+  grid-template-columns: 140px 1fr 44px 40px;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+
+.meter {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--idle-bg);
+  overflow: hidden;
+}
+
+.meter span {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+}
+
+.meter .low {
+  background: var(--bad);
+}
+
+.meter .mid {
+  background: var(--warn);
+}
+
+.meter .high {
+  background: var(--ok);
+}
+
+.big {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0 0 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.big .muted {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.bar {
+  display: flex;
+  gap: 2px;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.bar > span {
+  flex-basis: 0;
+  min-width: 3px;
+}
+
+.bar-ok {
+  background: var(--ok);
+}
+
+.bar-warn {
+  background: var(--warn);
+}
+
+.bar-bad {
+  background: var(--bad);
+}
+
+.bar-idle {
+  background: var(--idle);
+}
+
+.bar-stop {
+  background: repeating-linear-gradient(135deg, var(--bad) 0 2px, transparent 2px 5px);
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 8px 0 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.legend i {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.tally {
+  margin-top: 10px;
+  border-top: 1px solid var(--line);
+}
+
+.tally li {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 0;
+  font-size: 13px;
+  border-bottom: 1px solid var(--line);
+}
+
+/* ---------- lists, rows and groups ---------- */
+
+.list {
   display: flex;
+  flex-direction: column;
   gap: 6px;
+}
+
+.row {
+  display: block;
+  width: 100%;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.card .row {
+  background: var(--panel);
+}
+
+.row:hover,
+.row.selected {
+  border-color: var(--accent);
+}
+
+.row-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.row-title {
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-sub {
+  color: var(--muted);
+  font-size: 12px;
+  margin-top: 6px;
+  display: flex;
+  gap: 4px 14px;
   flex-wrap: wrap;
-  margin-top: 8px;
+}
+
+.row-sub .why {
+  color: var(--text);
+}
+
+.rank {
+  display: inline-grid;
+  place-items: center;
+  min-width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.group {
+  border-top: 1px solid var(--line);
+  padding-top: 8px;
+}
+
+.group summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0 8px;
+  cursor: pointer;
+  list-style: none;
+  font-weight: 600;
+}
+
+.group summary::-webkit-details-marker {
+  display: none;
+}
+
+.group summary::before {
+  content: "▸";
+  color: var(--muted);
+  font-size: 11px;
+  transition: transform 0.12s;
+}
+
+.group[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.group-title.bad {
+  color: var(--bad);
+}
+
+.group-title.warn {
+  color: var(--warn);
+}
+
+.group-title.run {
+  color: var(--run);
+}
+
+.count {
+  color: var(--muted);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
 }
 
 .filters {
   display: flex;
   gap: 6px;
-  margin-bottom: 12px;
   flex-wrap: wrap;
 }
 
-.filters button {
-  border: 1px solid var(--line);
-  background: var(--panel);
-  color: var(--muted);
-  border-radius: 999px;
-  padding: 3px 10px;
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
+.card .filters {
+  margin-bottom: 10px;
+}
+
+.filters button {
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--muted);
+  border-radius: 999px;
+  padding: 3px 11px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.filters button:hover {
+  color: var(--text);
+}
+
+.filters button.active {
+  color: var(--text);
+  border-color: var(--accent);
+  background: var(--run-bg);
+  font-weight: 600;
+}
+
+.filters button.active::before {
+  content: "✓ ";
+}
+
+/* ---------- chips and steps ---------- */
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--idle-bg);
+  color: var(--idle);
+  white-space: nowrap;
+}
+
+.chip.ok {
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+
+.chip.bad {
+  background: var(--bad-bg);
+  color: var(--bad);
+}
+
+.chip.warn {
+  background: var(--warn-bg);
+  color: var(--warn);
+}
+
+.chip.run {
+  background: var(--run-bg);
+  color: var(--run);
+}
+
+.chip.stop .dot {
+  background: none;
+  border: 1.5px solid currentColor;
+}
+
+.chip.kind {
+  background: transparent;
+  border: 1px solid var(--line);
+  color: var(--muted);
+}
+
+.chip.kind .dot {
+  display: none;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .chip.run .dot,
+  .step.run .mark {
+    animation: pulse 1.2s ease-in-out infinite;
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.steps {
+  display: flex;
+  align-items: center;
+  gap: 4px 14px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.step {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--idle);
+}
+
+.step .mark {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  display: inline-grid;
+  place-items: center;
+  font-size: 10px;
+  border: 1px dashed var(--line);
 }
 
-.filters button.active {
-  color: var(--text);
-  border-color: var(--accent);
+.step.ok,
+.step.bad,
+.step.run,
+.step.wait {
+  font-weight: 500;
 }
 
-pre.output {
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 10px;
-  max-height: 320px;
-  overflow: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin: 6px 0 0;
+.step.ok {
+  color: var(--ok);
 }
 
-.events {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.step.ok .mark {
+  background: var(--ok-bg);
+  border: 0;
 }
 
-.events li {
-  display: grid;
-  grid-template-columns: 64px 1fr;
-  gap: 8px;
-  font-size: 13px;
+.step.bad {
+  color: var(--bad);
 }
 
-.events time {
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-  font-size: 12px;
+.step.bad .mark {
+  background: var(--bad-bg);
+  border: 0;
 }
 
-.events .tool {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--accent);
+.step.run {
+  color: var(--run);
 }
 
-.events .error {
-  color: var(--bad);
+.step.run .mark {
+  background: var(--run-bg);
+  border: 0;
 }
 
-.empty {
-  color: var(--muted);
-  padding: 32px;
-  text-align: center;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
+.step.wait {
+  color: var(--warn);
 }
 
-.files code {
-  display: inline-block;
-  margin: 0 6px 4px 0;
+.step.wait .mark {
+  background: var(--warn-bg);
+  border: 0;
 }
 
-@media (max-width: 1000px) {
-  .lanes {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .layout {
-    flex-direction: column;
-  }
-  .detail {
-    width: 100%;
-    position: static;
-    max-height: none;
-  }
+.pills {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 8px;
 }
 
+/* ---------- scorecard ---------- */
+
 .metrics {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
-  margin-bottom: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
 }
 
 .metric {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  padding: 12px 14px;
+  padding: 10px 12px;
 }
 
 .metric-name {
+  font-size: 12px;
+  color: var(--muted);
   font-weight: 600;
 }
 
 .metric-value {
-  font-size: 26px;
+  font-size: 20px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
-  margin: 4px 0;
+  margin: 2px 0;
 }
 
-.metric-value .of {
-  font-size: 16px;
-  font-weight: 600;
+.score-text.low {
+  color: var(--bad);
 }
 
-.metric-q {
-  color: var(--muted);
-  font-size: 12px;
-  margin-top: 4px;
+.score-text.mid {
+  color: var(--warn);
+}
+
+.score-text.high {
+  color: var(--ok);
 }
 
 .spark polyline {
   fill: none;
   stroke: var(--accent);
-  stroke-width: 2;
+  stroke-width: 1.6;
 }
 
-.delta {
+.guardrails {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.guardrails li {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  gap: 0 6px;
+  padding: 6px 0;
+  border-top: 1px solid var(--line);
   font-size: 13px;
-  font-weight: 600;
-  color: var(--muted);
 }
 
-.delta.up {
+.guardrails li:first-child {
+  border-top: 0;
+}
+
+.guardrails .mark {
+  grid-row: span 2;
+  font-weight: 700;
+}
+
+.guardrails .ok .mark {
   color: var(--ok);
 }
 
-.delta.down {
+.guardrails .bad .mark {
   color: var(--bad);
 }
 
+.guardrails .muted {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
 table.units,
 table.scores {
   width: 100%;
   border-collapse: collapse;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  overflow: hidden;
   font-variant-numeric: tabular-nums;
 }
 
+table.scores {
+  border: 1px solid var(--line);
+}
+
 table.units th,
 table.units td,
 table.scores th,
 table.scores td {
-  padding: 8px 10px;
+  padding: 6px 10px;
   border-bottom: 1px solid var(--line);
   text-align: left;
   font-size: 13px;
 }
 
-table.units th,
-table.scores th {
+table.units tbody tr:last-child > * {
+  border-bottom: 0;
+}
+
+table.units thead th,
+table.scores thead th {
   color: var(--muted);
   font-weight: 500;
   font-size: 12px;
-}
-
-table.units tbody tr {
-  cursor: pointer;
+  background: var(--panel-2);
+  white-space: nowrap;
 }
 
 table.units tbody tr:hover,
 table.units tbody tr.selected {
-  background: var(--bg);
+  background: var(--panel-2);
 }
 
-td.path {
-  max-width: 420px;
+th.path {
+  font-weight: 400;
+  max-width: 340px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+th.path .link {
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
 td.na {
-  color: var(--line);
+  color: var(--muted);
 }
 
 tr.target td {
@@ -599,8 +1205,8 @@ tr.target td {
   place-items: center;
   min-width: 30px;
   padding: 0 4px;
-  height: 22px;
-  border-radius: 6px;
+  height: 21px;
+  border-radius: 5px;
   font-weight: 600;
   font-size: 12px;
 }
@@ -611,8 +1217,8 @@ tr.target td {
 }
 
 .score.mid {
-  background: var(--run-bg);
-  color: var(--run);
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .score.high {
@@ -629,58 +1235,175 @@ ul.proof li {
   margin-bottom: 4px;
 }
 
-.muted {
+/* ---------- checks and sessions ---------- */
+
+pre.output {
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px;
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 6px 0 0;
+}
+
+.events {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.events li {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.events time {
   color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
 }
 
-h3.section {
+.events .tool {
+  font-family: var(--mono);
   font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted);
-  margin: 4px 0 6px;
+  color: var(--accent);
+}
+
+.events .error {
+  color: var(--bad);
+}
+
+.files code {
+  display: inline-block;
+  margin: 0 6px 4px 0;
+}
+
+/* ---------- narrow screens ---------- */
+
+@media (max-width: 1100px) {
+  .grid.two,
+  .grid.two.narrow-right {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .layout {
+    flex-direction: column;
+  }
+  .detail {
+    width: 100%;
+    position: static;
+    max-height: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .top {
+    flex-wrap: wrap;
+    height: auto;
+    gap: 4px 12px;
+    padding: 8px 12px 0;
+  }
+  .tabs {
+    order: 3;
+    flex-basis: 100%;
+    height: 40px;
+  }
+  .tools {
+    margin-left: auto;
+  }
+  .layout {
+    padding: 12px;
+  }
+  .agent {
+    grid-template-columns: 1fr auto;
+  }
+  .agent-detail {
+    grid-column: 1 / -1;
+  }
+  .meters li {
+    grid-template-columns: 1fr 44px 40px;
+  }
+  .meter {
+    display: none;
+  }
+  .row-title {
+    white-space: normal;
+  }
+  .row-head {
+    flex-wrap: wrap;
+  }
 }
 
-.pills.guardrails {
-  margin-bottom: 14px;
+/* ---------- share ---------- */
+
+.page-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.share-link {
+  padding: 5px 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  font-weight: 600;
 }
 
-.metric.overall {
+.share-link:hover {
   border-color: var(--accent);
+  text-decoration: none;
 }
 
-.metric-value.low {
-  color: var(--bad);
+/* The card page has no top bar: only the card and its actions. */
+body.sharing {
+  background: #05070f;
+  color: #e2e8f0;
 }
 
-.metric-value.mid {
-  color: var(--run);
+body.sharing .top {
+  display: none;
 }
 
-.metric-value.high {
-  color: var(--ok);
+.share {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-.coverage {
+.share-bar {
   display: flex;
   align-items: center;
-  gap: 12px;
-  color: var(--muted);
-  font-size: 13px;
-  margin: 4px 0 10px;
+  gap: 16px;
 }
 
-.coverage-bar {
-  width: 160px;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--idle-bg);
-  overflow: hidden;
-  flex: none;
+.share-bar .muted {
+  color: #94a3b8;
 }
 
-.coverage-bar span {
+.share-back {
+  color: #67e8f9;
+}
+
+.share-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.share-card svg {
   display: block;
-  height: 100%;
-  background: var(--accent);
+  width: 100%;
+  height: auto;
+  border-radius: 16px;
+  box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
 }