playwright-reborn 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.4
+
+- Refresh the report UI with a persistent sidebar, dashboard overview, and clearer test exploration.
+- Add Tags and Sort dropdowns, remembered light and dark themes, improved filter controls, and responsive long-name handling.
+
 ## 0.2.3
 
 - `steps: 'user'` leaves expectations and `test.attach` calls out of the step tree.

package/dist/render.js

@@ -35,7 +35,7 @@ function renderHtml(json, assets) {
 <title>Report</title>
 ${style}
 </head>
-<body style="margin:0;background:#080808;color:#f0f0f0">
+<body style="margin:0;background:#f3f7fd;color:#17324f">
 <div class="light"></div>
 <a class="skip" href="#tests">Skip to tests</a>
 <main class="page" id="app"></main>

package/dist/ui/report.css

@@ -31,22 +31,30 @@
 }
 
 :root {
-  color-scheme: dark;
-  --base: #080808;
-  --surface: #111111;
-  --border: #2b302e;
-  --text: #f0f0f0;
-  --subtle: #a2aaa6;
-  --accent: #00ff88;
-  --accent-hover: #00cf6e;
-  --wash: rgba(0, 255, 136, 0.16);
-  --hairline: rgba(255, 255, 255, 0.08);
-  --pass: #96cbb0;
-  --fail: #ff8989;
-  --flaky: #edc66f;
-  --skip: #888888;
-  --timeout: #edc66f;
-  --interrupted: #888888;
+  color-scheme: light;
+  --base: #f3f7fd;
+  --surface: #ffffff;
+  --control-active: #315386;
+  --pass-wash: #e8f5ee;
+  --fail-wash: #fff0f1;
+  --warning-wash: #fff4e5;
+  --heading: #315386;
+  --chart-2: #f58220;
+  --chart-3: #8aafd4;
+  --chart-4: #d0e0f3;
+  --border: #dbe5f0;
+  --text: #17324f;
+  --subtle: #5d7188;
+  --accent: #f58220;
+  --accent-hover: #aa4900;
+  --wash: #eaf2fc;
+  --hairline: rgba(49, 83, 134, 0.10);
+  --pass: #177b59;
+  --fail: #bd3740;
+  --flaky: #a15b08;
+  --skip: #7c8da2;
+  --timeout: #a15b08;
+  --interrupted: #6f7890;
   --sans: Geist, "Segoe UI", sans-serif;
   --display: Geist, "Segoe UI", sans-serif;
   --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -54,26 +62,26 @@
 }
 
 body[data-accent="red"] {
-  --accent: #ff4d4d;
-  --accent-hover: #e03b3b;
+  --accent: #c64246;
+  --accent-hover: #a22c34;
   --wash: rgba(255, 77, 77, 0.16);
 }
 
 body[data-accent="blue"] {
-  --accent: #4da3ff;
-  --accent-hover: #2f86e0;
+  --accent: #315386;
+  --accent-hover: #203e6b;
   --wash: rgba(77, 163, 255, 0.16);
 }
 
 body[data-accent="amber"] {
-  --accent: #ffb020;
-  --accent-hover: #e09610;
+  --accent: #a76500;
+  --accent-hover: #8c5100;
   --wash: rgba(255, 176, 32, 0.16);
 }
 
 body[data-accent="violet"] {
-  --accent: #b07cff;
-  --accent-hover: #945fe0;
+  --accent: #7952b8;
+  --accent-hover: #5c3b92;
   --wash: rgba(176, 124, 255, 0.16);
 }
 
@@ -99,7 +107,7 @@ body {
   left: 12px;
   top: -40px;
   background: var(--accent);
-  color: #080808;
+  color: var(--text);
   padding: 8px 12px;
   z-index: 10;
 }
@@ -108,9 +116,9 @@ body {
 
 
 
-button, input { font: inherit; color: inherit; }
+button, input, select { font: inherit; color: inherit; }
 button { cursor: pointer; }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
 ::selection { background: var(--wash); color: var(--text); }
 
 .top {
@@ -367,7 +375,7 @@ button { cursor: pointer; }
   transform: none;
 }
 
-.segment[data-status="passed"] { background: rgba(255, 255, 255, 0.55); }
+.segment[data-status="passed"] { background: var(--pass); }
 .segment[data-status="failed"],
 .segment[data-status="timedOut"] { background: var(--fail); }
 .segment[data-status="interrupted"] { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
@@ -504,18 +512,18 @@ button { cursor: pointer; }
 }
 
 .run-row.is-dim { opacity: 0.28; }
-.run-row:hover { background: rgba(255, 255, 255, 0.04); }
+.run-row:hover { background: var(--wash); }
 .run-row[aria-current="true"] { background: var(--wash); }
 
 .run-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
 
 .run-track {
   height: 8px;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--hairline);
   overflow: hidden;
 }
 
-.run-fill { display: block; height: 100%; background: rgba(255, 255, 255, 0.55); }
+.run-fill { display: block; height: 100%; background: var(--pass); }
 .run-fill[data-status="failed"],
 .run-fill[data-status="timedOut"],
 .run-fill[data-status="flaky"] { background: var(--accent); }
@@ -602,7 +610,7 @@ button { cursor: pointer; }
 .row[data-status="skipped"],
 .row[data-status="interrupted"] { border-left-color: var(--border); }
 .row[aria-current="true"] { background: var(--hairline); }
-.row:hover { background: rgba(255, 255, 255, 0.04); }
+.row:hover { background: var(--wash); }
 
 .row-title {
   font-weight: 500;
@@ -848,7 +856,7 @@ button { cursor: pointer; }
 }
 
 .tile {
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--hairline);
   border-radius: 0;
   overflow: hidden;
   background: transparent;
@@ -862,7 +870,7 @@ button { cursor: pointer; }
 
 .log-card, .file-card {
   border: 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--hairline);
   border-radius: 0;
   background: transparent;
   box-shadow: none;
@@ -907,7 +915,7 @@ dialog .close-shot {
   border-radius: 0;
   padding: 6px 12px;
 }
-dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
+dialog::backdrop { background: rgba(23, 50, 79, 0.72); }
 
 @keyframes rise {
   from { opacity: 0; transform: translateY(40px); }
@@ -924,230 +932,6 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   #tests { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
 }
 
-.atmosphere {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: var(--base);
-  overflow: hidden;
-}
-
-.bands {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  filter: blur(18px) saturate(1.05);
-  opacity: 0.3;
-  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
-  mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
-}
-
-.grain {
-  position: absolute;
-  inset: -20%;
-  opacity: 0.035;
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
-  background-size: 180px 180px;
-  animation: grain 0.7s steps(2) infinite;
-}
-
-.veil {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, rgba(5, 8, 6, 0) 0%, rgba(5, 8, 6, 0.12) 14%, rgba(5, 8, 6, 0.72) 30%, rgba(5, 8, 6, 0.9) 42%, rgba(5, 8, 6, 0.96) 100%);
-}
-
-.shell { position: relative; z-index: 1; }
-
-@keyframes grain {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(-2%, 1%); }
-}
-
-.page { width: 100%; max-width: none; margin: 0; padding: 0; }
-
-.shell {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.rail {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 28px;
-  padding: 12px clamp(20px, 3vw, 48px);
-  border-right: 0;
-  background: rgba(8, 8, 8, 0.9);
-  backdrop-filter: blur(16px);
-  border-bottom: 1px solid var(--hairline);
-  transition: transform 220ms ease;
-}
-
-.rail.is-hidden {
-  transform: translateY(-110%);
-  pointer-events: none;
-}
-
-.rail .meta { margin: 0 0 0 auto; flex-direction: row; gap: 16px; justify-content: flex-end; text-align: right; }
-.rail .meta { min-width: 0; }
-.rail .meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
-
-.rail .tabbar {
-  flex-direction: row;
-  align-items: center;
-  width: auto;
-  flex: 1;
-  min-width: 0;
-  gap: 22px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.rail .tab {
-  text-align: left;
-  padding: 8px 0;
-  color: rgba(240, 240, 240, 0.72);
-}
-
-.rail .tab[aria-selected="true"] {
-  background: none;
-  color: var(--text);
-  box-shadow: inset 0 -1px 0 var(--accent);
-}
-
-.stage {
-  width: min(1440px, 100%);
-  margin: 0 auto;
-  padding: 24px clamp(20px, 3vw, 48px) 48px;
-}
-
-.hero { margin: 8px 0 28px; }
-
-.word {
-  font-size: clamp(42px, 6vw, 80px);
-  font-weight: 500;
-  letter-spacing: -0.045em;
-  max-width: 100%;
-  overflow-wrap: anywhere;
-}
-
-
-
-#panel-tests,
-#panel-screenshots,
-#panel-logs,
-#panel-files {
-  background: transparent;
-  border: 0;
-  padding: 0;
-}
-
-.console {
-  background: transparent;
-  border: 0;
-}
-
-.console-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 18px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  color: var(--subtle);
-  font-size: 13px;
-}
-
-.console-body { padding: 0; }
-
-.console .section-label { margin-top: 18px; }
-
-.console .strip-window,
-.console .longest {
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  animation: none;
-}
-
-#legend.legend {
-  background: transparent;
-  border: 0;
-  gap: 0;
-}
-
-#legend .count {
-  background: transparent;
-  min-height: 0;
-  padding: 8px 18px 8px 0;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-#legend .count:last-child { border-right: 0; }
-
-.strip.timeline .segment { height: 18px; }
-
-.section-label {
-  margin: 32px 0 10px;
-  color: var(--subtle);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-#legend.legend {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 1px;
-  margin-top: 0;
-  background: transparent;
-  border: 0;
-}
-
-#legend .count {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  min-height: 0;
-  padding: 4px 16px 4px 0;
-  background: transparent;
-  border: 0;
-  color: var(--subtle);
-}
-
-#legend .count .n {
-  font-size: 28px;
-  line-height: 1;
-  letter-spacing: -0.04em;
-}
-
-#legend .count[aria-pressed="true"] { background: transparent; }
-
-.strip.timeline {
-  display: block;
-  position: relative;
-  height: auto;
-  min-width: 0;
-}
-
-.strip.timeline .segment {
-  position: absolute;
-  height: 18px;
-  min-width: 0;
-}
-
 .evidence {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
@@ -1218,7 +1002,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 .row-meta { flex-wrap: wrap; gap: 2px 12px; }
 .band { padding: 6px 0; }
 .band:hover .band-label { color: var(--text); }
-.find { padding: 8px 10px; border: 1px solid var(--border); background: rgba(8, 8, 8, 0.65); border-radius: 6px; }
+.find { padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; }
 .find:focus { border-color: var(--accent); }
 .list-summary { display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; color: var(--subtle); font-size: 13px; }
 .reset-filters { background: none; border: 0; color: var(--accent); padding: 4px 0; }
@@ -1229,7 +1013,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 .row[aria-current="true"] { background: var(--wash); }
 .error { border-left-color: var(--fail); }
 .step.bad .mark { background: var(--fail); }
-.gallery .tile { border-radius: 8px; background: rgba(17, 17, 17, 0.6); }
+.gallery .tile { border-radius: 8px; background: var(--surface); }
 .tile img { object-fit: contain; background: var(--base); }
 .well pre { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
 dialog { border: 1px solid var(--border); border-radius: 8px; padding: 12px; max-height: 95vh; }
@@ -1246,3 +1030,307 @@ dialog img { max-width: calc(92vw - 26px); object-fit: contain; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; }
 }
+
+/* Report workspace: persistent navigation and a data-focused dashboard. */
+body { background: var(--base) !important; color: var(--text) !important; }
+.light { display: none; }
+.page { width: 100%; max-width: none; margin: 0; padding: 0; }
+.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
+.icon { width: 20px; height: 20px; flex-shrink: 0; }
+.rail {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 28px 18px 20px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  z-index: 5;
+}
+.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 23px; font-weight: 600; letter-spacing: -.045em; }
+.sidebar-brand > .icon { width: 40px; height: 40px; padding: 8px; border-radius: 12px; color: #ffffff; background: #315386; stroke-width: 2.2; }
+.brand-caption { display: block; font-size: 11px; color: var(--subtle); font-weight: 400; letter-spacing: 0; margin-top: -2px; }
+.project-card { display: flex; align-items: center; gap: 12px; margin: 32px 0 28px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
+.project-card > .icon { color: var(--accent); }
+.project-card > div { min-width: 0; }
+.project-caption { display: block; font-size: 11px; color: var(--subtle); }
+.project-card strong { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nav-caption { font-size: 12px; color: var(--subtle); margin: 0 12px 12px; }
+.rail .tabbar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 0; margin: 0; width: 100%; border: 0; }
+.rail .tab { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px; text-align: left; border: 1px solid transparent; border-radius: 8px; color: var(--subtle); font-size: 14px; font-weight: 500; }
+.rail .tab[aria-selected="true"] { color: var(--heading); background: var(--wash); border-color: var(--border); box-shadow: inset 3px 0 0 var(--accent); }
+.rail .tab:hover { background: var(--wash); color: var(--text); }
+.nav-count { margin-left: auto; min-width: 24px; padding: 1px 5px; border-radius: 4px; text-align: center; font-size: 11px; background: var(--hairline); }
+.sidebar-bottom { margin-top: auto; padding: 44px 12px 0; }
+.sidebar-bottom .nav-caption { margin-left: 0; }
+.sidebar-state { font-size: 12px; }
+.sidebar-note { font-size: 11px; color: var(--subtle); margin: 12px 0 22px; }
+.sidebar-note span { display: block; margin-top: 3px; }
+kbd { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 5px; font-family: var(--sans); font-size: 12px; color: var(--subtle); }
+.keyboard-hint { display: flex; gap: 10px; align-items: center; color: var(--subtle); font-size: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
+.stage { min-width: 0; width: 100%; }
+.workspace-bar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 36px; border-bottom: 1px solid var(--border); background: var(--surface); }
+.breadcrumb { min-width: 0; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--subtle); }
+#breadcrumb-company { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.breadcrumb strong { font-weight: 500; color: var(--text); }
+.breadcrumb-separator { color: #8296b1; }
+.report-content { max-width: 1600px; margin: 0 auto; padding: 30px 36px; }
+.panel { margin-top: 0; }
+.hero { margin: 0; gap: 18px; align-items: center; animation: none; }
+.dashboard-kicker { margin: 0 0 8px; font-size: 12px; color: var(--accent); }
+.word { font-size: 36px; font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
+.product { font-size: 15px; color: var(--subtle); letter-spacing: 0; margin-top: 10px; font-weight: 400; }
+.summary { font-size: 13px; margin-top: 6px; max-width: 65ch; }
+.summary:empty { display: none; }
+#meta { margin: 18px 0 0; font-size: 12px; gap: 6px 18px; }
+#meta span { overflow-wrap: anywhere; }
+.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 26px 0 24px; }
+.metric { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
+.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); font-size: 12px; }
+.metric-label .icon { width: 17px; height: 17px; color: var(--heading); }
+.metric-value { display: block; margin: 12px 0 6px; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
+.metric-note { font-size: 11px; color: var(--subtle); }
+.metric.positive .metric-value, .metric.positive .icon { color: var(--pass); }
+.metric.warning .metric-value, .metric.warning .icon { color: var(--flaky); }
+.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: stretch; }
+.dashboard-card { min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
+.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
+.card-heading h2, .range-head .section-label { margin: 0; font-size: 15px; color: var(--text); font-weight: 500; }
+.card-detail { font-size: 11px; color: var(--subtle); background: var(--hairline); border-radius: 5px; padding: 3px 8px; }
+.result-body { display: flex; align-items: center; gap: 28px; min-height: 185px; }
+.result-ring { width: 164px; height: 164px; flex: 0 0 164px; padding: 12px; border-radius: 50%; transform: rotate(0deg); }
+.result-ring > div { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); }
+.result-ring strong { font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
+.result-ring span { font-size: 12px; color: var(--subtle); }
+#legend.legend { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; min-width: 0; }
+#legend .count { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; min-height: 29px; padding: 4px 0; border: 0; font-size: 12px; color: var(--subtle); background: transparent; }
+#legend .count[data-status="all"] { display: none; }
+#legend .count .n { font-size: 13px; font-weight: 500; margin: 0 0 0 auto; color: var(--text); line-height: 1.4; letter-spacing: 0; }
+#legend .count::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--skip); }
+#legend .count[data-status="passed"]::after { background: var(--pass); }
+#legend .count[data-status="failed"]::after, #legend .count[data-status="timedOut"]::after { background: var(--fail); }
+#legend .count[data-status="flaky"]::after { background: var(--flaky); }
+#legend .count[data-status="interrupted"]::after { background: var(--timeout); }
+#legend .count:hover { color: var(--text); }
+#legend .count[aria-pressed="true"] { box-shadow: none; }
+.card-note { font-size: 11px; color: var(--subtle); margin: 22px 0 0; line-height: 1.6; }
+.range-head { margin: 0 0 12px; align-items: center; }
+.views { padding: 3px; gap: 0; background: var(--base); border: 1px solid var(--border); border-radius: 6px; }
+.view { padding: 4px 10px; font-size: 11px; border-radius: 4px; min-height: 26px; }
+.view[aria-pressed="true"] { background: var(--control-active); color: #ffffff; box-shadow: none; }
+.section-note { margin: 0; font-size: 11px; line-height: 1.6; max-width: 60ch; }
+.charts { grid-template-columns: 130px minmax(0, 1fr); gap: 22px; margin-top: 28px; min-height: 164px; }
+.pie { width: 130px; height: auto; margin: 0; }
+.band { padding: 6px 0; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 5px 8px; }
+.swatch { width: 7px; height: 7px; border-radius: 2px; margin-top: 5px; }
+.band-label { font-size: 11px; }
+.band .n { font-size: 12px; }
+.band-track, .band-fill { border-radius: 3px; }
+.band-track { height: 4px; }
+.strip-window { padding: 0; margin-top: 18px; background: transparent; border: 0; animation: none; max-height: 240px; overflow-y: auto; }
+.strip-scroll { overflow-x: hidden; }
+.console .run-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 8px; padding: 7px 6px; font-size: 11px; }
+.console .run-track { display: none; }
+.console .run-time { font-size: 10px; }
+.dashboard-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 11px; }
+.dashboard-link .icon { width: 14px; height: 14px; }
+.attention-card .card-heading { margin-bottom: 12px; }
+.attention-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 16px 0; border: 0; border-top: 1px solid var(--hairline); color: var(--text); background: transparent; text-align: left; }
+.attention-row:hover { background: var(--wash); }
+.attention-status { font-size: 11px; }
+.attention-test { min-width: 0; }
+.attention-test strong { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attention-test > span { display: block; color: var(--subtle); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
+.attention-time { font-size: 11px; color: var(--subtle); }
+.environment-card .card-heading > .icon { width: 16px; color: var(--subtle); }
+.run-details { margin: 0; }
+.run-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 14px 0; font-size: 12px; }
+.run-details dt { color: var(--subtle); }
+.run-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
+.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border); }
+.info dd { font-size: 12px; }
+.info dt { font-size: 11px; }
+.foot { font-size: 11px; margin-top: 28px; border-color: var(--border); }
+.page-heading { margin: 0 0 24px; }
+.page-heading h2, .panel > h2 { font-size: 30px; font-weight: 600; letter-spacing: -.035em; margin: 0 0 8px; }
+.page-heading p { font-size: 13px; color: var(--subtle); margin: 0; }
+#test-tools { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; gap: 12px 18px; }
+#test-tools .count { min-height: 30px; padding: 4px 8px; border-radius: 5px; }
+#test-tools .count[aria-pressed="true"] { background: var(--wash); border-color: transparent; color: var(--accent); }
+.split { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: clip; }
+#tests { padding: 8px 16px 16px; }
+.detail { padding: 24px; top: 20px; max-height: calc(100vh - 40px); }
+.detail h2 { font-size: 22px; line-height: 1.3; }
+.gallery .tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
+.log-card, .file-group { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-top: 16px; }
+.log-card h3 { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
+.well pre { background: var(--base); }
+.run-track, .run-fill { border-radius: 4px; }
+.banner { background: var(--fail-wash); padding: 14px; border-radius: 6px; font-size: 12px; }
+@media (min-width: 801px) and (max-width: 1200px) {
+  .shell { grid-template-columns: 216px minmax(0, 1fr); }
+  .workspace-bar { padding: 0 24px; }
+  .report-content { padding: 28px 24px; }
+  .dashboard-card { padding: 20px; }
+  .result-body { gap: 16px; }
+  .result-ring { width: 128px; height: 128px; flex-basis: 128px; padding: 10px; }
+  .charts { grid-template-columns: 105px minmax(0, 1fr); gap: 14px; }
+  .pie { width: 105px; }
+  .metric { padding: 16px; }
+}
+@media (max-width: 1050px) and (min-width: 801px) {
+  .dashboard-grid { grid-template-columns: 1fr; }
+  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .result-body { justify-content: center; }
+  #legend.legend { max-width: 280px; }
+  .charts { grid-template-columns: 150px minmax(0, 1fr); }
+  .pie { width: 150px; }
+}
+@media (max-width: 800px) {
+  .shell { grid-template-columns: minmax(0, 1fr); }
+  .rail { position: relative; top: 0; height: auto; overflow: visible; padding: 16px; border-right: 0; border-bottom: 1px solid var(--border); gap: 0; }
+  .sidebar-brand { font-size: 20px; padding: 0; }
+  .sidebar-brand > .icon { width: 34px; height: 34px; }
+  .brand-caption { display: none; }
+  .project-card { display: none; }
+  .rail > .nav-caption, .sidebar-bottom { display: none; }
+  .rail .tabbar { flex-direction: row; gap: 6px; overflow-x: auto; margin-top: 16px; padding-bottom: 2px; }
+  .rail .tab { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; font-size: 12px; gap: 7px; }
+  .rail .tab .icon { width: 16px; height: 16px; }
+  .rail .tab[aria-selected="true"] { box-shadow: none; }
+  .nav-count { display: none; }
+  .workspace-bar { height: 58px; padding: 0 16px; gap: 12px; }
+  .breadcrumb { font-size: 11px; gap: 10px; }
+  .report-content { padding: 24px 16px; }
+  .hero { flex-direction: row; align-items: flex-start; gap: 12px; }
+  .word { font-size: 30px; }
+  .hero .run-state { font-size: 11px; padding: 5px 8px; margin-top: 24px; }
+  .product { font-size: 13px; }
+  #meta { font-size: 11px; }
+  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
+  .metric { padding: 14px; }
+  .metric-label { font-size: 11px; }
+  .metric-value { font-size: 28px; }
+  .metric-note { font-size: 10px; }
+  .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+  .dashboard-card { padding: 18px; }
+  .card-heading { gap: 12px; }
+  .result-body { gap: 22px; justify-content: center; }
+  .result-ring { width: 128px; height: 128px; flex-basis: 128px; padding: 10px; }
+  #legend.legend { max-width: 250px; }
+  #legend .count { min-height: 32px; }
+  .charts { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; margin-top: 20px; }
+  .pie { width: 104px; }
+  .band { min-height: 36px; }
+  .band-label { font-size: 10px; }
+  .views .view { min-height: 28px; }
+  .attention-row { gap: 8px; grid-template-columns: 48px minmax(0, 1fr) auto; }
+  .dashboard-link { font-size: 10px; }
+  #test-tools { padding: 12px; }
+  .detail { position: static; padding: 20px 16px; max-height: none; }
+  #tests { padding: 8px 12px 12px; }
+  .page-heading h2, .panel > h2 { font-size: 28px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .panel-enter { animation: none; }
+}
+
+/* Light workspace theme with navy typography and warm accent details. */
+.sidebar-brand { color: var(--heading); }
+.sidebar-brand > .icon { border-radius: 13px; box-shadow: inset 0 -3px 0 var(--accent); }
+.project-card { background: var(--base); border-radius: 14px; }
+.project-card > .icon { color: var(--heading); }
+.rail .tab { border-radius: 24px; }
+.rail .tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
+.rail .tab:hover { color: var(--heading); }
+.workspace-bar { box-shadow: 0 1px 6px rgba(49, 83, 134, .025); }
+.dashboard-kicker { color: var(--heading); }
+.word { color: var(--heading); font-size: 40px; font-weight: 500; }
+.word::after { content: ''; display: block; width: 52px; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--accent); }
+.hero .product { margin-top: 14px; }
+.metric, .dashboard-card { border-radius: 16px; border-color: var(--border); box-shadow: 0 3px 15px rgba(49, 83, 134, .035); }
+.metric-label .icon { box-sizing: content-box; padding: 7px; background: var(--wash); border-radius: 50%; }
+.metric-value { color: var(--heading); }
+.card-heading h2, .range-head .section-label, .page-heading h2, .panel > h2, .detail h2, .file-group h3, .log-card h3 { color: var(--heading); }
+.card-detail { background: var(--wash); color: var(--heading); border-radius: 12px; padding: 4px 10px; }
+.views { border-radius: 20px; padding: 4px; border-color: var(--border); }
+.view { border-radius: 16px; padding: 5px 12px; }
+.result-ring strong { color: var(--heading); }
+.dashboard-link { color: var(--heading); padding-bottom: 3px; border-bottom: 2px solid var(--accent); }
+.dashboard-link:hover { color: var(--accent-hover); }
+#test-tools .count[aria-pressed="true"] { color: var(--heading); }
+.subtab[aria-pressed="true"], .attempt[aria-pressed="true"], .order-btn[aria-pressed="true"] { color: var(--heading); box-shadow: inset 0 -2px 0 var(--accent); }
+.file-link, .open-test, .more, .reset-filters { color: var(--heading); }
+.file-link:hover, .open-test:hover { color: var(--accent-hover); }
+.attention-row { color: var(--text); }
+.row[aria-current="true"] .row-title { color: var(--heading); }
+.band[aria-pressed="true"] .band-label, .band[aria-pressed="true"] .n, .run-row[aria-current="true"] .run-name { color: var(--heading); }
+.log-card, .file-group, .gallery .tile, .split { border-radius: 14px; }
+.run-state { border-color: transparent; background: var(--wash); font-weight: 500; }
+.run-state[data-status="passed"] { background: var(--pass-wash); }
+.run-state[data-status="failed"] { background: var(--fail-wash); }
+.run-state[data-status="timedout"], .run-state[data-status="interrupted"] { background: var(--warning-wash); }
+.banner { border-left-color: var(--fail); }
+.find:focus { border-color: var(--heading); }
+.skip { background: var(--heading); color: #ffffff; }
+@media (max-width: 800px) {
+  .word { font-size: 30px; }
+  .rail .tab[aria-selected="true"] { box-shadow: none; }
+}
+
+/* Shared controls and theme tokens keep both appearances consistent. */
+body[data-theme="dark"] {
+  color-scheme: dark;
+  --base: #101b2b;
+  --surface: #18263a;
+  --border: #2c405a;
+  --text: #e7eef8;
+  --subtle: #a1b2ca;
+  --heading: #aecaf0;
+  --control-active: #315386;
+  --wash: #223a58;
+  --hairline: rgba(174, 202, 240, .12);
+  --pass: #67d4a7;
+  --fail: #ff8b92;
+  --flaky: #f7bb61;
+  --skip: #8b9bb0;
+  --timeout: #f7bb61;
+  --interrupted: #8b9bb0;
+  --pass-wash: #193d35;
+  --fail-wash: #452b3a;
+  --warning-wash: #403528;
+  --chart-3: #709bce;
+  --chart-4: #3e597b;
+  --accent-hover: #ffbc83;
+}
+.theme-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--border); border-radius: 20px; color: var(--subtle); padding: 8px 12px; font-size: 12px; }
+.theme-toggle .icon { width: 16px; height: 16px; }
+.theme-toggle:hover { color: var(--heading); background: var(--wash); }
+.theme-switch { width: 28px; height: 16px; padding: 2px; background: var(--border); border-radius: 9px; }
+.theme-switch::before { content: ''; display: block; width: 12px; height: 12px; background: var(--surface); border-radius: 50%; }
+.theme-toggle[aria-checked="true"] .theme-switch { background: var(--accent); }
+.theme-toggle[aria-checked="true"] .theme-switch::before { transform: translateX(12px); background: #ffffff; }
+.filter-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
+.filter-toolbar .tags, .filter-toolbar .order { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
+.filter-control { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; color: var(--subtle); }
+.filter-select { min-width: 148px; max-width: 240px; height: 38px; padding: 7px 34px 7px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background-color: var(--surface); appearance: auto; cursor: pointer; font-size: 12px; }
+.filter-select:disabled { cursor: default; opacity: .6; }
+.filter-select:hover:not(:disabled) { border-color: var(--heading); }
+.filter-select:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }
+.filter-toolbar .band-clear { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--wash); color: var(--heading); font-size: 11px; min-height: 30px; }
+.filter-toolbar .band-clear:hover { border-color: var(--heading); }
+.list-summary { margin: 14px 0 10px; }
+.row-title { white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
+.row-time { align-self: start; }
+#shot-filters .shot-filter { padding: 6px 12px; border-radius: 18px; border: 1px solid var(--border); }
+#shot-filters .shot-filter[aria-pressed="true"] { background: var(--wash); color: var(--heading); border-color: var(--heading); }
+@media (max-width: 800px) {
+  .theme-toggle { padding: 8px; gap: 6px; }
+  .theme-toggle > span:not(.theme-switch) { display: none; }
+  .filter-toolbar { gap: 12px 18px; }
+  .filter-toolbar .tags, .filter-toolbar .order { gap: 12px; }
+  .filter-control { gap: 8px; }
+  .filter-select { min-width: 115px; max-width: 190px; }
+}

package/dist/ui/report.js

@@ -47,18 +47,22 @@
   var findTimer = 0;
 
   app.innerHTML = [
-    '<div class="atmosphere" aria-hidden="true"><canvas class="bands"></canvas><div class="grain"></div><div class="veil"></div></div>',
     '<div class="shell">',
     '<aside class="rail">',
-    '<div class="tabbar" role="tablist" aria-label="Report">',
+    '<div class="sidebar-brand">' + icon('brand') + '<span>Reborn<span class="brand-caption">Test reports</span></span></div>',
+    '<div class="project-card">' + icon('folder') + '<div><span class="project-caption">Workspace</span><strong id="workspace-name"></strong></div></div>',
+    '<p class="nav-caption">Run workspace</p>',
+    '<div class="tabbar" role="tablist" aria-label="Report" aria-orientation="vertical">',
 
     TABS.map(function (id) {
-      return tabButton(id, id.charAt(0).toUpperCase() + id.slice(1));
+      return tabButton(id, id === 'overview' ? 'Dashboard' : id.charAt(0).toUpperCase() + id.slice(1));
     }).join(''),
     '</div>',
-    '<p class="meta" id="meta"></p>',
+    '<div class="sidebar-bottom"><p class="nav-caption">Current run</p><p class="sidebar-state run-state" id="sidebar-state"></p><p class="sidebar-note">Completed <span id="sidebar-time"></span></p><div class="keyboard-hint"><kbd>/</kbd><span>Find a test</span></div></div>',
     '</aside>',
     '<div class="stage">',
+    '<header class="workspace-bar"><div class="breadcrumb"><span id="breadcrumb-company"></span><span class="breadcrumb-separator">/</span><strong id="page-name">Dashboard</strong></div><button class="theme-toggle" id="theme-toggle" type="button" role="switch" aria-checked="false" aria-label="Dark mode">' + icon('moon') + '<span>Dark mode</span><span class="theme-switch" aria-hidden="true"></span></button></header>',
+    '<div class="report-content">',
     '<div id="panel-overview" role="tabpanel"></div>',
     '<div id="panel-tests" role="tabpanel" hidden></div>',
     '<div id="panel-screenshots" role="tabpanel" hidden></div>',
@@ -67,11 +71,16 @@
     '<p class="foot" id="foot"></p>',
     '</div>',
     '</div>',
+    '</div>',
   ].join('');
 
   document.body.dataset.accent = accentName();
+  applyTheme(readTheme());
   document.title = companyName() + (data.summary ? ' · ' + data.summary : '');
-  fill(document.getElementById('meta'), metaBits().map(function (bit) { return el('span', null, [bit]); }));
+  document.getElementById('workspace-name').textContent = companyName();
+  document.getElementById('breadcrumb-company').textContent = companyName();
+  document.getElementById('sidebar-time').textContent = formatWhen(data.generatedAt);
+  setRunState(document.getElementById('sidebar-state'));
   var footBits = [];
   if (data.showCredit === true) footBits.push(el('span', null, ['Open source by World of Z']));
   footBits.push(el('span', null, [formatWhen(data.generatedAt)]));
@@ -83,94 +92,41 @@
     ['3to5', '3 to 5 minutes'],
     ['over5', 'Over 5 minutes'],
   ];
-  var CHART_COLORS = ['var(--accent)', 'rgba(255,255,255,0.72)', 'rgba(255,255,255,0.42)', 'rgba(255,255,255,0.18)'];
+  var CHART_COLORS = ['var(--heading)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)'];
 
+  syncTabOrientation();
+  window.addEventListener('resize', syncTabOrientation);
   paintOverview();
   showTab(state.tab, true);
   bind();
-  watchHeader();
-  startCurtain();
-
-  function startCurtain() {
-    var canvas = document.querySelector('.atmosphere .bands');
-    if (!canvas || !canvas.getContext) return;
-    var ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    var ratio = 1;
-    var columns = [];
-    var count = 22;
-    for (var i = 0; i < count; i += 1) {
-      var n = Math.sin(210 + i * 2.17);
-      columns.push({
-        at: (i + 0.35 + n * 0.15) / count,
-        width: 0.012 + (0.5 + n * 0.5) * 0.018,
-        speed: 0.22 + (i % 6) * 0.05,
-        phase: i * 1.37,
-        depth: i % 3,
-      });
-    }
-    function resize() {
-      ratio = Math.min(window.devicePixelRatio || 1, 2);
-      var rect = canvas.getBoundingClientRect();
-      canvas.width = Math.max(1, Math.floor(rect.width * ratio));
-      canvas.height = Math.max(1, Math.floor(rect.height * ratio));
-    }
-    var rgb = accentParts();
-    function draw(now) {
-      var w = canvas.width;
-      var h = canvas.height;
-      var t = reduce ? 8 : now / 1000;
-      ctx.clearRect(0, 0, w, h);
-      var wash = ctx.createLinearGradient(0, 0, 0, h);
-      wash.addColorStop(0, 'rgba(' + rgb + ', 0.10)');
-      wash.addColorStop(0.42, '#080b0a');
-      wash.addColorStop(1, '#080808');
-      ctx.fillStyle = wash;
-      ctx.fillRect(0, 0, w, h);
-      columns.forEach(function (column) {
-        var sway = Math.sin(t * column.speed + column.phase) * 0.02;
-        var breath = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(t * column.speed * 1.4 + column.phase));
-        var x = (column.at + sway) * w;
-        var spread = Math.max(10, column.width * w * (0.55 + breath * 0.35));
-        var gradient = ctx.createLinearGradient(x - spread, 0, x + spread, 0);
-        var alpha = 0.28 + 0.62 * breath;
-        gradient.addColorStop(0, 'rgba(' + rgb + ', 0)');
-        gradient.addColorStop(0.42, 'rgba(' + rgb + ', ' + (alpha * 0.45).toFixed(3) + ')');
-        gradient.addColorStop(0.5, 'rgba(' + rgb + ', ' + alpha.toFixed(3) + ')');
-        gradient.addColorStop(0.58, 'rgba(' + rgb + ', ' + (alpha * 0.45).toFixed(3) + ')');
-        gradient.addColorStop(1, 'rgba(' + rgb + ', 0)');
-        ctx.fillStyle = gradient;
-        ctx.fillRect(x - spread, 0, spread * 2, h * 0.92);
-      });
-      if (!reduce && !document.hidden) curtainFrame = requestAnimationFrame(draw);
-    }
-    var curtainFrame = 0;
-    resize();
-    window.addEventListener('resize', function () { resize(); if (reduce) draw(0); });
-    document.addEventListener('visibilitychange', function () {
-      cancelAnimationFrame(curtainFrame);
-      if (!document.hidden) curtainFrame = requestAnimationFrame(draw);
-    });
-    curtainFrame = requestAnimationFrame(function (now) {
-      if (!canvas.width) resize();
-      draw(now);
-    });
+
+
+  function icon(name) {
+    var paths = {
+      brand: '<path d="m8 5-5 7 5 7m8-14 5 7-5 7m-8-7 3 3 5-6"/>',
+      overview: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
+      tests: '<path d="m9 11 2 2 4-4"/><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V2h6v2"/>',
+      screenshots: '<rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8" cy="8" r="1.5"/><path d="m3 17 6-6 4 4 3-3 5 5"/>',
+      logs: '<path d="m5 6 4 4-4 4m7 3h7"/><rect x="2" y="2" width="20" height="20" rx="3"/>',
+      files: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 0v6h6M8 13h8m-8 4h5"/>',
+      folder: '<path d="M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>',
+      search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
+      clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+      check: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+      alert: '<path d="m12 3 10 18H2Z M12 9v4m0 3v1"/>',
+      moon: '<path d="M21 13a9 9 0 0 1-10-10 9 9 0 1 0 10 10Z"/>',
+      arrow: '<path d="M5 12h14m-5-5 5 5-5 5"/>',
+    };
+    return '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + (paths[name] || paths.tests) + '</svg>';
+  }
+
+  function syncTabOrientation() {
+    document.querySelector('.tabbar').setAttribute('aria-orientation', window.innerWidth <= 800 ? 'horizontal' : 'vertical');
   }
 
-  function watchHeader() {
-    var rail = document.querySelector('.rail');
-    if (!rail) return;
-    rail.addEventListener('focusin', function () { rail.classList.remove('is-hidden'); });
-    var lastY = window.scrollY;
-    window.addEventListener('scroll', function () {
-      var y = window.scrollY;
-      var down = y > lastY + 6;
-      var up = y < lastY - 6;
-      if (y < 24) rail.classList.remove('is-hidden');
-      else if (down && !rail.contains(document.activeElement)) rail.classList.add('is-hidden');
-      else if (up) rail.classList.remove('is-hidden');
-      lastY = y;
-    }, { passive: true });
+  function setRunState(node) {
+    node.dataset.status = data.status;
+    node.textContent = { passed: 'Run passed', failed: 'Run failed', timedout: 'Run timed out', interrupted: 'Run interrupted' }[data.status] || 'Run finished';
   }
 
   function companyName() {
@@ -183,18 +139,22 @@
     return allowed[data.accent] ? data.accent : 'green';
   }
 
-  function accentParts() {
-    var probe = document.createElement('span');
-    probe.style.color = 'var(--accent)';
-    document.body.appendChild(probe);
-    var color = getComputedStyle(probe).color;
-    probe.remove();
-    var parts = color.match(/\d+/g) || ['0', '255', '136'];
-    return parts.slice(0, 3).join(', ');
+  function readTheme() {
+    try {
+      var saved = localStorage.getItem('reborn-theme');
+      if (saved === 'light' || saved === 'dark') return saved;
+    } catch (error) { /* Storage may be unavailable for local reports. */ }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function applyTheme(theme) {
+    document.body.dataset.theme = theme;
+    document.getElementById('theme-toggle').setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
   }
 
   function tabButton(id, label) {
-    return '<button id="tab-' + id + '" class="tab" role="tab" type="button" data-tab="' + id + '" aria-selected="false" aria-controls="panel-' + id + '">' + label + '</button>';
+    var count = id === 'tests' ? data.tests.length : null;
+    return '<button id="tab-' + id + '" class="tab" role="tab" type="button" data-tab="' + id + '" aria-selected="false" aria-controls="panel-' + id + '">' + icon(id) + '<span>' + label + '</span>' + (count === null ? '' : '<span class="nav-count" aria-hidden="true">' + count + '</span>') + '</button>';
   }
 
   function readRoute() {
@@ -216,6 +176,7 @@
   function showTab(tab, quiet) {
     if (TABS.indexOf(tab) === -1) tab = 'overview';
     state.tab = tab;
+    document.getElementById('page-name').textContent = tab === 'overview' ? 'Dashboard' : tab.charAt(0).toUpperCase() + tab.slice(1);
     document.querySelectorAll('[role="tab"]').forEach(function (button) {
       button.setAttribute('aria-selected', button.dataset.tab === tab ? 'true' : 'false');
       button.tabIndex = button.dataset.tab === tab ? 0 : -1;
@@ -254,38 +215,33 @@
     var host = document.getElementById('panel-overview');
     host.innerHTML = [
       '<header class="hero">',
-      '<div><h1 class="word" id="word"></h1><p class="product" id="product"></p><p class="summary" id="summary"></p></div>',
+      '<div><p class="dashboard-kicker">Run overview</p><h1 class="word">Dashboard</h1><p class="product" id="product"></p><p class="summary" id="summary"></p></div>',
       '<p class="run-state" id="run-state"></p>',
       '</header>',
+      '<p class="meta" id="meta"></p>',
       '<div id="errors"></div>',
-      '<dl class="info" id="info"></dl>',
-      '<section class="console">',
-      '<div class="console-body">',
-      '<p class="section-label">Results</p>',
-      '<div class="legend" id="legend"></div>',
-      '<div class="range-head">',
-      '<p class="section-label" id="range-label">Duration</p>',
-      '<div class="views" role="group" aria-label="Overview shape">',
-      '<button type="button" class="view" data-overview="chart">Chart</button>',
-      '<button type="button" class="view" data-overview="timeline">Timeline</button>',
-      '</div>',
-      '</div>',
-      '<p class="section-note" id="range-note"></p>',
-      '<div class="charts" id="duration"></div>',
+      '<div class="metric-grid" id="metrics"></div>',
+      '<div class="dashboard-grid">',
+      '<section class="dashboard-card result-card"><div class="card-heading"><h2>Test results</h2><span class="card-detail">This run</span></div>',
+      '<div class="result-body"><div class="result-ring" id="result-ring"><div><strong id="pass-percent"></strong><span>Passed</span></div></div>',
+      '<div class="legend" id="legend"></div></div><p class="card-note" id="result-note"></p></section>',
+      '<section class="dashboard-card console"><div class="console-body">',
+      '<div class="range-head"><h2 class="section-label" id="range-label">Duration</h2>',
+      '<div class="views" role="group" aria-label="Overview shape"><button type="button" class="view" data-overview="chart">Chart</button><button type="button" class="view" data-overview="timeline">Timeline</button></div></div>',
+      '<p class="section-note" id="range-note"></p><div class="charts" id="duration"></div>',
       '<div class="strip-window" id="strip-window"><div class="strip-scroll"><div class="strip" id="strip" role="group" aria-label="Tests by time"></div></div></div>',
+      '</div></section>',
+      '<section class="dashboard-card attention-card"><div class="card-heading"><h2>Needs attention</h2><button type="button" class="dashboard-link" data-go-tests>View all tests ' + icon('arrow') + '</button></div><div id="attention-list"></div></section>',
+      '<section class="dashboard-card environment-card"><div class="card-heading"><h2>Run details</h2>' + icon('folder') + '</div><dl class="run-details" id="run-details"></dl><dl class="info" id="info"></dl></section>',
       '</div>',
-      '</section>',
     ].join('');
-    var word = document.getElementById('word');
-    word.textContent = companyName();
-    var product = document.getElementById('product');
     var subtitle = typeof data.productSubtitle === 'string' ? data.productSubtitle.trim() : 'Test Automation';
-    if (subtitle) product.textContent = subtitle;
-    else product.hidden = true;
+    document.getElementById('product').textContent = subtitle;
+    document.getElementById('product').hidden = !subtitle;
     document.getElementById('summary').textContent = data.summary || '';
-    var runState = document.getElementById('run-state');
-    runState.dataset.status = data.status;
-    runState.textContent = { passed: 'Run passed', failed: 'Run failed', timedout: 'Run timed out', interrupted: 'Run interrupted' }[data.status] || 'Run finished';
+    fill(document.getElementById('meta'), metaBits().map(function (bit) { return el('span', null, [bit]); }));
+    setRunState(document.getElementById('run-state'));
+    paintDashboard();
     paintErrors();
     paintInfo();
     paintCounts(document.getElementById('legend'), false);
@@ -294,6 +250,60 @@
     applyOverview();
   }
 
+  function paintDashboard() {
+    var counts = data.counts || {};
+    var total = data.tests.length;
+    var passed = counts.passed || 0;
+    var percent = total ? Math.round(passed / total * 100) : 0;
+    var problems = data.tests.filter(isProblem);
+    var metrics = [
+      ['tests', 'Total tests', String(total), 'Across ' + uniqueValues(function (test) { return [test.file]; }).length + ' test files', ''],
+      ['check', 'Pass rate', total ? percent + '%' : '—', passed + ' of ' + total + ' tests passed', 'positive'],
+      ['clock', 'Run duration', formatDuration(data.duration || 0), 'Wall time including retries', ''],
+      ['alert', 'Needs attention', String(problems.length), 'Failed, flaky or interrupted', problems.length ? 'warning' : 'positive'],
+    ];
+    fill(document.getElementById('metrics'), metrics.map(function (metric) {
+      var node = el('div', { class: 'metric ' + metric[4] }, [
+        el('div', { class: 'metric-label' }, [metric[1]]),
+        el('strong', { class: 'metric-value' }, [metric[2]]),
+        el('span', { class: 'metric-note' }, [metric[3]]),
+      ]);
+      node.querySelector('.metric-label').insertAdjacentHTML('beforeend', icon(metric[0]));
+      return node;
+    }));
+    document.getElementById('pass-percent').textContent = total ? percent + '%' : '—';
+    var colors = { passed: 'var(--pass)', failed: 'var(--fail)', timedOut: 'var(--fail)', flaky: 'var(--flaky)', skipped: 'var(--skip)', interrupted: 'var(--timeout)' };
+    var offset = 0;
+    var stops = [];
+    Object.keys(colors).forEach(function (status) {
+      var amount = counts[status] || 0;
+      if (!amount || !total) return;
+      var next = offset + amount / total * 100;
+      stops.push(colors[status] + ' ' + offset + '% ' + next + '%');
+      offset = next;
+    });
+    document.getElementById('result-ring').style.background = stops.length ? 'conic-gradient(' + stops.join(',') + ')' : 'var(--hairline)';
+    document.getElementById('result-note').textContent = 'Select a result to explore its tests. Pass rate includes skipped tests in the total.';
+    var attention = problems.slice(0, 5).map(function (test) {
+      return el('button', { type: 'button', class: 'attention-row open-test', 'data-id': test.id, 'data-attempt': String(failedAttempt(test)) }, [
+        el('span', { class: 'attention-status sw', 'data-status': test.status }, [statusLabel(test)]),
+        el('span', { class: 'attention-test' }, [el('strong', null, [test.title]), el('span', null, [test.file])]),
+        el('span', { class: 'attention-time' }, [formatDuration(test.duration)]),
+      ]);
+    });
+    if (!attention.length) attention.push(el('p', { class: 'empty' }, [total ? 'No tests need attention. Your run is looking good.' : 'No tests ran. Run your test suite to see results here.']));
+    if (problems.length > 5) attention.push(el('p', { class: 'card-note' }, ['Showing 5 of ' + problems.length + ' tests. View all tests to explore the rest.']));
+    fill(document.getElementById('attention-list'), attention);
+    var rows = [['Started', formatWhen(data.startTime)], ['Workers', String(data.workers || 0)], ['Screenshots', { off: 'Off', failure: 'On failure', last: 'Last step', steps: 'Every step' }[data.screenshots] || 'Off']];
+    if (data.showProjects === true && (data.projects || []).length) rows.push(['Projects', data.projects.join(', ')]);
+    if (data.shard) rows.push(['Shard', data.shard]);
+    var customLabels = (data.info || []).map(function (row) { return String(row.label).toLowerCase(); });
+    rows = rows.filter(function (row) { return customLabels.indexOf(row[0].toLowerCase()) === -1; });
+    fill(document.getElementById('run-details'), rows.map(function (row) {
+      return el('div', null, [el('dt', null, [row[0]]), el('dd', null, [row[1]])]);
+    }));
+  }
+
   function paintInfo() {
     var host = document.getElementById('info');
     if (!host) return;
@@ -367,7 +377,7 @@
       empty.setAttribute('cx', '110');
       empty.setAttribute('cy', '110');
       empty.setAttribute('r', '96');
-      empty.setAttribute('fill', 'rgba(255,255,255,0.08)');
+      empty.setAttribute('fill', 'var(--hairline)');
       svg.appendChild(empty);
       return svg;
     }
@@ -496,22 +506,9 @@
     var buttons = filters.map(function (filter) {
       return el('button', { class: 'count', type: 'button', 'data-status': filter[0], 'aria-pressed': 'false' }, [
         el('span', { class: 'n' }, [String(filter[2])]),
-        filter[1],
+        ' ' + filter[1],
       ]);
     });
-    if (host.id === 'legend') {
-      buttons.unshift(el('div', { class: 'count count-static' }, [
-        el('span', { class: 'n' }, [formatDuration(data.duration || 0)]),
-        'total',
-      ]));
-      buttons.forEach(function (button) {
-        if (button.classList.contains('count-static')) return;
-        var node = button.querySelector('.n');
-        var value = Number(node.textContent);
-        node.textContent = '0';
-        countUp(node, value, function (next) { return String(Math.round(next)); });
-      });
-    }
     var children = buttons;
     if (withFind) {
       children = buttons.concat([el('div', { class: 'find-wrap' }, [
@@ -611,33 +608,25 @@
     return Object.keys(seen).sort();
   }
 
+  function selectControl(id, label, choices, current) {
+    var select = el('select', { id: id, class: 'filter-select' }, choices.map(function (choice) {
+      return el('option', { value: choice[0] }, [choice[1]]);
+    }));
+    select.value = current || '';
+    return el('label', { class: 'filter-control', for: id }, [el('span', null, [label]), select]);
+  }
+
   function paintTags() {
     var host = document.getElementById('tags');
     if (!host) return;
     var tags = uniqueValues(function (test) { return (test.tags || []).filter(keptTag); });
     var projects = uniqueValues(function (test) { return test.project ? [test.project] : []; });
-    var nodes = [];
-    if (tags.length) {
-      nodes.push(el('span', { class: 'order-label' }, ['Tags']));
-      nodes.push(chip('tag-btn', '', 'All', state.tag || ''));
-      tags.forEach(function (tag) { nodes.push(chip('tag-btn', tag, tag, state.tag)); });
-    }
+    var nodes = [selectControl('tag-select', 'Tags', [['', 'All tags']].concat(tags.map(function (tag) { return [tag, tag]; })), state.tag)];
     if (data.showProjectFilter === true && projects.length > 1) {
-      nodes.push(el('span', { class: 'order-label' }, ['Project']));
-      nodes.push(chip('project-btn', '', 'All', state.projectFilter || ''));
-      projects.forEach(function (project) { nodes.push(chip('project-btn', project, project, state.projectFilter)); });
+      nodes.push(selectControl('project-select', 'Project', [['', 'All projects']].concat(projects.map(function (project) { return [project, project]; })), state.projectFilter));
     }
-    host.hidden = nodes.length === 0;
     fill(host, nodes);
-  }
-
-  function chip(className, value, label, current) {
-    return el('button', {
-      class: className,
-      type: 'button',
-      'data-value': value,
-      'aria-pressed': current === value ? 'true' : 'false',
-    }, [label]);
+    if (!tags.length) document.getElementById('tag-select').disabled = true;
   }
 
   function sortTests(tests) {
@@ -657,17 +646,10 @@
   function paintOrder() {
     var host = document.getElementById('order');
     if (!host) return;
-    var orders = [['grouped', 'Grouped'], ['slowest', 'Slowest'], ['fastest', 'Fastest'], ['started', 'Started']];
-    var nodes = [el('span', { class: 'order-label' }, ['Order'])].concat(orders.map(function (order) {
-      return el('button', {
-        class: 'order-btn',
-        type: 'button',
-        'data-order': order[0],
-        'aria-pressed': state.order === order[0] ? 'true' : 'false',
-      }, [order[1]]);
-    }));
+    var orders = [['grouped', 'Grouped'], ['slowest', 'Slowest first'], ['fastest', 'Fastest first'], ['started', 'Start time']];
+    var nodes = [selectControl('sort-select', 'Sort', orders, state.order)];
     if (state.band !== 'all') {
-      nodes.push(el('button', { class: 'band-clear', type: 'button', 'aria-pressed': 'true' }, [bandLabel(state.band)]));
+      nodes.push(el('button', { class: 'band-clear', type: 'button', 'aria-label': 'Clear duration filter: ' + bandLabel(state.band) }, [bandLabel(state.band), el('span', { 'aria-hidden': 'true' }, [' ×'])]));
     }
     fill(host, nodes);
   }
@@ -676,7 +658,7 @@
     if (built.tests) return;
     built.tests = true;
     var host = document.getElementById('panel-tests');
-    host.innerHTML = '<h2 class="visually-hidden">Tests</h2><div class="legend" id="test-tools"></div><div class="tags" id="tags"></div><div class="order" id="order"></div><div class="list-summary" id="list-summary"></div><div class="split"><div id="tests"></div><section class="detail" id="detail"></section></div>';
+    host.innerHTML = '<div class="page-heading"><h2>Tests</h2><p>Explore results, retries and the steps behind every test.</p></div><div class="legend" id="test-tools"></div><div class="filter-toolbar"><div class="tags" id="tags"></div><div class="order" id="order"></div></div><div class="list-summary" id="list-summary"></div><div class="split"><div id="tests"></div><section class="detail" id="detail"></section></div>';
     paintCounts(document.getElementById('test-tools'), true);
     paintTags();
     paintOrder();
@@ -1070,6 +1052,17 @@
         document.getElementById('find').focus();
         return;
       }
+      if (target.closest('#theme-toggle')) {
+        var theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
+        applyTheme(theme);
+        try { localStorage.setItem('reborn-theme', theme); } catch (error) { /* Theme still works without storage. */ }
+        return;
+      }
+      if (target.closest('[data-go-tests]')) {
+        showTab('tests');
+        document.getElementById('find').focus();
+        return;
+      }
       var tab = target.closest('.tab');
       if (tab) {
         showTab(tab.dataset.tab);
@@ -1118,35 +1111,6 @@
         paintDetail();
         return;
       }
-      var tag = target.closest('.tag-btn');
-      if (tag) {
-        state.tag = tag.dataset.value || null;
-        state.listLimit = 200;
-        keepSelectionInFilter();
-        paintTags();
-        paintList();
-        paintDetail();
-        return;
-      }
-      var projectButton = target.closest('.project-btn');
-      if (projectButton) {
-        state.projectFilter = projectButton.dataset.value || null;
-        state.listLimit = 200;
-        keepSelectionInFilter();
-        paintTags();
-        paintList();
-        paintDetail();
-        return;
-      }
-      var order = target.closest('.order-btn');
-      if (order) {
-        state.order = order.dataset.order || 'grouped';
-        keepSelectionInFilter();
-        paintOrder();
-        paintList();
-        paintDetail();
-        return;
-      }
       var count = target.closest('.count');
       if (count && !count.classList.contains('shot-filter') && !count.classList.contains('count-static')) {
         state.filter = count.dataset.status || 'all';
@@ -1209,6 +1173,19 @@
       if (shot) openShot(shot.dataset.src, shot.dataset.alt || 'Screenshot');
     });
 
+    app.addEventListener('change', function (event) {
+      var control = event.target;
+      if (!control || ['tag-select', 'project-select', 'sort-select'].indexOf(control.id) === -1) return;
+      if (control.id === 'tag-select') state.tag = control.value || null;
+      if (control.id === 'project-select') state.projectFilter = control.value || null;
+      if (control.id === 'sort-select') state.order = control.value || 'grouped';
+      state.listLimit = 200;
+      keepSelectionInFilter();
+      paintList();
+      paintDetail();
+      markStrip();
+    });
+
     app.addEventListener('input', function (event) {
       if (!event.target) return;
       if (event.target.id === 'find') {
@@ -1231,6 +1208,7 @@
 
     document.addEventListener('keydown', function (event) {
       if (event.defaultPrevented || event.isComposing || event.metaKey || event.ctrlKey || event.altKey || document.querySelector('dialog[open]')) return;
+      if (event.target instanceof HTMLSelectElement) return;
       var typing = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || event.target.isContentEditable;
       if (typing) {
         if (event.key === 'Escape') {
@@ -1262,12 +1240,12 @@
         if (find) find.focus();
         return;
       }
-      if ((event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'Home' || event.key === 'End') && event.target.closest && event.target.closest('.tabbar')) {
+      if ((event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Home' || event.key === 'End') && event.target.closest && event.target.closest('.tabbar')) {
         event.preventDefault();
         var index = TABS.indexOf(state.tab);
         if (event.key === 'Home') index = 0;
         else if (event.key === 'End') index = TABS.length - 1;
-        else if (event.key === 'ArrowRight') index = (index + 1) % TABS.length;
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') index = (index + 1) % TABS.length;
         else index = (index - 1 + TABS.length) % TABS.length;
         showTab(TABS[index]);
         var next = document.querySelector('.tab[data-tab="' + TABS[index] + '"]');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playwright-reborn",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A Playwright reporter that writes one self-contained HTML report when the run finishes.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",