pi-mega-compact 0.8.12 → 0.8.14

package/extensions/dashboard-client/src/styles/base.css

@@ -2,7 +2,7 @@
  * dashboard-client/src/styles/base.css — shell + theme tokens + layout primitives.
  *
  * Shared by all tabs. Theme picker (Sprint C3) will override these tokens.
- * Kept under 300 lines per project doc-length guideline.
+ * Responsive: scales from 400px narrow to 4K ultrawide.
  */
 
 :root {
@@ -16,6 +16,7 @@
 	--warn: #d29922;
 	--err: #f85149;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	font-size: clamp(13px, 0.9vw, 16px);
 }
 
 * {
@@ -26,19 +27,25 @@ body {
 	margin: 0;
 	background: var(--bg);
 	color: var(--text);
-	font-size: 14px;
 }
 
 .dashboard-app {
-	max-width: 1200px;
+	max-width: min(1600px, 96vw);
 	margin: 0 auto;
-	padding: 16px;
+	padding: clamp(8px, 2vw, 24px);
+}
+
+/* Responsive container — scales fluidly from narrow to ultrawide */
+.card-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+	gap: clamp(8px, 1.5vw, 16px);
 }
 
 .dashboard-header h1 {
-	font-size: 18px;
+	font-size: clamp(16px, 1.4vw, 22px);
 	font-weight: 600;
-	margin: 0 0 12px;
+	margin: 0 0 clamp(8px, 1vw, 16px);
 }
 
 .dashboard-header .tier,
@@ -46,7 +53,7 @@ body {
 	display: inline-block;
 	margin-left: 8px;
 	padding: 2px 8px;
-	font-size: 12px;
+	font-size: clamp(10px, 0.8vw, 12px);
 	border-radius: 10px;
 	background: var(--panel);
 	border: 1px solid var(--border);
@@ -61,7 +68,9 @@ body {
 	display: flex;
 	gap: 4px;
 	border-bottom: 1px solid var(--border);
-	margin-bottom: 16px;
+	margin-bottom: clamp(8px, 1vw, 16px);
+	overflow-x: auto;
+	flex-wrap: nowrap;
 }
 
 .tab-bar button {
@@ -70,8 +79,9 @@ body {
 	color: var(--muted);
 	padding: 8px 14px;
 	cursor: pointer;
-	font-size: 13px;
+	font-size: clamp(12px, 0.85vw, 14px);
 	border-bottom: 2px solid transparent;
+	white-space: nowrap;
 }
 
 .tab-bar button.active {
@@ -119,3 +129,60 @@ body {
 	border-radius: 8px;
 	text-align: center;
 }
+
+/* Tables: horizontal scroll on narrow screens */
+.repos {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: clamp(12px, 0.8vw, 14px);
+}
+
+.repos th, .repos td {
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--border-soft, var(--border));
+	text-align: left;
+}
+
+.repos th {
+	background: var(--bg);
+	position: sticky;
+	top: 0;
+}
+
+.table-wrap {
+	overflow-x: auto;
+}
+
+/* Narrow screens: single column */
+@media (max-width: 640px) {
+	.card-grid {
+		grid-template-columns: 1fr;
+	}
+	.tab-bar button {
+		padding: 6px 10px;
+		font-size: 12px;
+	}
+}
+
+/* Medium screens: 2 columns */
+@media (min-width: 641px) and (max-width: 1024px) {
+	.card-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+/* Wide screens: 3-4 columns */
+@media (min-width: 1025px) {
+	.card-grid {
+		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	}
+}
+
+@media (min-width: 1601px) {
+	.dashboard-app {
+		max-width: min(1800px, 96vw);
+	}
+	.card-grid {
+		grid-template-columns: repeat(4, 1fr);
+	}
+}

package/extensions/dashboard-client/src/styles/config.css

@@ -0,0 +1,149 @@
+/**
+ * dashboard-client/src/styles/config.css — Config tab + category filter styles.
+ *
+ * Kept under 300 lines per project doc-length guideline.
+ */
+
+/* ── Config tab layout ──────────────────────────────────────────────────── */
+
+.config-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.config-settings,
+.config-display {
+	padding: 14px 16px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+}
+
+.config-settings h3,
+.config-display h3 {
+	margin: 0 0 12px;
+	font-size: clamp(12px, 1vw, 14px);
+	color: var(--muted);
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+/* ── Settings strip ─────────────────────────────────────────────────────── */
+
+.settings-row {
+	margin-bottom: 10px;
+}
+
+.settings-row:last-child {
+	margin-bottom: 0;
+}
+
+.settings-row label {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: clamp(13px, 0.9vw, 15px);
+	color: var(--text);
+	cursor: pointer;
+}
+
+.settings-row select {
+	padding: 4px 8px;
+	font-size: clamp(12px, 0.85vw, 14px);
+	background: var(--bg);
+	color: var(--text);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.settings-row select:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.settings-row input[type="checkbox"] {
+	width: 16px;
+	height: 16px;
+	cursor: pointer;
+}
+
+/* ── Config display grid ────────────────────────────────────────────────── */
+
+.config-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
+	gap: 10px;
+}
+
+.config-item {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding: 8px 10px;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+}
+
+.config-label {
+	font-size: clamp(11px, 0.75vw, 13px);
+	color: var(--muted);
+	text-transform: uppercase;
+	letter-spacing: 0.4px;
+}
+
+.config-value {
+	font-size: clamp(13px, 1vw, 16px);
+	font-weight: 600;
+	color: var(--text);
+}
+
+/* ── Event category filter ──────────────────────────────────────────────── */
+
+.event-category-filter {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	align-items: center;
+}
+
+.category-chip {
+	padding: 3px 10px;
+	font-size: clamp(11px, 0.75vw, 13px);
+	border: 1px solid var(--border);
+	background: var(--bg);
+	color: var(--muted);
+	border-radius: 12px;
+	cursor: pointer;
+	text-transform: capitalize;
+	transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.category-chip:hover {
+	color: var(--text);
+}
+
+.category-chip.active {
+	color: var(--text);
+	border-color: var(--accent);
+	background: var(--panel);
+}
+
+/* ── Responsive ─────────────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+	.config-grid {
+		grid-template-columns: 1fr;
+	}
+	.settings-row label {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+	}
+	.settings-row select {
+		width: 100%;
+	}
+}

package/extensions/dashboard-client/src/styles/game-achievements.css

@@ -0,0 +1,265 @@
+/**
+ * dashboard-client/src/styles/game-achievements.css — Game + Achievements styles.
+ *
+ * Covers: MEGA CACHE banner, mega-cache toast, opie achievement-tile,
+ * game leaderboards (2×2 grid), lvl badge, repos badge, game empty state,
+ * achievement tiles grid, ach-toast, just-unlocked animation.
+ * All responsive via clamp()/auto-fit — no fixed px.
+ */
+
+/* ── Game-specific color tokens ──────────────────────────────────────── */
+:root {
+	--mega: #f0883e;
+	--mega-gold: #ffd700;
+	--game-blue: #1f6feb;
+	--game-purple: #a371f7;
+}
+
+/* ── Game tab container ──────────────────────────────────────────────── */
+.game-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.game-mode-on {
+	/* Accent vars applied when game mode is on; themes set via data-theme */
+	--accent: var(--mega);
+}
+
+/* ── MEGA CACHE banner ───────────────────────────────────────────────── */
+.mega-cache-banner {
+	display: block;
+	background: linear-gradient(
+		135deg,
+		var(--mega),
+		var(--mega-gold)
+	);
+	color: #1a1006;
+	font-weight: 700;
+	padding: 10px 14px;
+	border-radius: 8px;
+	margin: 12px 0;
+	font-size: clamp(13px, 1vw, 16px);
+	animation: mega-banner-shimmer 3s ease-in-out infinite;
+}
+
+@keyframes mega-banner-shimmer {
+	0%, 100% { filter: brightness(1); }
+	50% { filter: brightness(1.15); }
+}
+
+/* ── Mega-cache toast ───────────────────────────────────────────────── */
+.mega-cache-toast {
+	display: none;
+	position: fixed;
+	top: 16px;
+	left: 50%;
+	transform: translateX(-50%);
+	background: var(--mega);
+	color: #1a1006;
+	font-weight: 700;
+	padding: 10px 18px;
+	border-radius: 8px;
+	z-index: 1000;
+	box-shadow: 0 4px 20px #0008;
+	max-width: 92vw;
+}
+.mega-cache-toast.show {
+	display: block;
+	animation: mega-flash 0.6s ease-in-out 2;
+}
+@keyframes mega-flash {
+	0% { background: transparent; }
+	25% { background: var(--mega-gold); }
+	100% { background: transparent; }
+}
+
+/* ── Opie achievement tile ───────────────────────────────────────────── */
+.achievement-tile {
+	display: none;
+	background: linear-gradient(135deg, var(--mega), var(--mega-gold));
+	color: #1a1006;
+	font-weight: 700;
+	padding: 12px 16px;
+	border-radius: 8px;
+	margin: 12px 0;
+	box-shadow: 0 0 16px #f0883e88;
+	font-size: clamp(13px, 1vw, 16px);
+}
+.achievement-tile.unlocked {
+	display: block;
+}
+.achievement-tile .ach-detail {
+	display: block;
+	font-weight: 500;
+	font-size: 12px;
+	margin-top: 4px;
+}
+
+/* ── Game leaderboards (2×2 grid) ────────────────────────────────────── */
+.game-leaderboards {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 16px;
+	margin-top: 16px;
+}
+.lb-card {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	padding: 14px;
+}
+.lb-card h3 {
+	font-size: 12px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--muted);
+	margin: 0 0 10px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+.lb-card table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+.lb-card td {
+	padding: 4px 8px;
+	border-bottom: 1px solid var(--border);
+}
+.lb-card td.num {
+	text-align: right;
+	font-family: monospace;
+	color: var(--text);
+	font-weight: 600;
+}
+.lb-card .lb-meta {
+	color: var(--muted);
+	font-size: 11px;
+	margin-left: 6px;
+}
+.lb-empty {
+	color: var(--muted);
+	font-size: 12px;
+	padding: 8px 0;
+}
+
+/* ── LVL badge (Turns leaderboard) ───────────────────────────────────── */
+.lvl-badge {
+	display: inline-block;
+	background: var(--game-blue);
+	color: #fff;
+	font-size: 11px;
+	font-weight: 700;
+	padding: 2px 8px;
+	border-radius: 10px;
+	margin-left: 8px;
+}
+
+/* ── Repos badge ─────────────────────────────────────────────────────── */
+.repos-badge-line {
+	margin-top: 8px;
+}
+.repos-badge {
+	display: inline-block;
+	background: var(--game-blue);
+	color: #fff;
+	font-size: 11px;
+	font-weight: 700;
+	padding: 2px 8px;
+	border-radius: 10px;
+}
+
+/* ── Game empty state ────────────────────────────────────────────────── */
+.game-empty {
+	color: var(--muted);
+	font-style: italic;
+	padding: 12px 0;
+}
+
+/* ── Achievement tiles grid ──────────────────────────────────────────── */
+.ach-section {
+	position: relative;
+}
+.ach-tiles {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	gap: 8px;
+	margin: 8px 0 16px;
+}
+.ach-tile {
+	padding: 10px 12px;
+	border-radius: 8px;
+	border: 1px solid var(--border);
+	font-size: 12px;
+	background: var(--panel);
+}
+.ach-tile.unlocked {
+	background: linear-gradient(135deg, var(--mega), var(--mega-gold));
+	color: #1a1006;
+	font-weight: 700;
+	box-shadow: 0 0 12px #f0883e66;
+}
+.ach-tile.locked {
+	opacity: 0.55;
+}
+.ach-tile.just-unlocked {
+	animation: ach-unlock-pulse 0.6s ease-out;
+}
+.ach-tile .ach-detail {
+	display: block;
+	font-weight: 500;
+	font-size: 11px;
+	margin-top: 3px;
+}
+@keyframes ach-unlock-pulse {
+	0% { transform: scale(0.9); opacity: 0.4; }
+	60% { transform: scale(1.05); }
+	100% { transform: scale(1); opacity: 1; }
+}
+
+/* ── Achievement toast ───────────────────────────────────────────────── */
+.ach-toast {
+	display: none;
+	position: fixed;
+	top: 16px;
+	left: 50%;
+	transform: translateX(-50%);
+	background: var(--game-blue);
+	color: #fff;
+	font-weight: 700;
+	padding: 10px 18px;
+	border-radius: 8px;
+	z-index: 1000;
+	box-shadow: 0 4px 20px #0008;
+	max-width: 92vw;
+}
+.ach-toast.show {
+	display: block;
+}
+
+/* ── Achievements tab container ──────────────────────────────────────── */
+.achievements-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.achievements-tab h2 {
+	font-size: clamp(16px, 1.4vw, 22px);
+	margin: 0;
+}
+
+/* ── Responsive breakpoints ──────────────────────────────────────────── */
+@media (max-width: 640px) {
+	.game-leaderboards {
+		grid-template-columns: 1fr;
+	}
+}
+@media (min-width: 1601px) {
+	.game-leaderboards {
+		gap: 20px;
+	}
+}

package/extensions/dashboard-client/src/styles/metrics-extra.css

@@ -0,0 +1,69 @@
+/**
+ * dashboard-client/src/styles/metrics-extra.css — Perf card grid for Metrics tab.
+ *
+ * Builds on the perf-metric classes from repos-metrics.css. Adds the
+ * 5-card grid layout with titled cards (model latency, throughput,
+ * process, snapshot cost, TUI lag proxy).
+ */
+
+.perf-cards-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+	gap: 12px;
+	margin-top: 12px;
+}
+
+.perf-card {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 14px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+}
+
+.perf-card-title {
+	margin: 0 0 4px;
+	font-size: 12px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--muted);
+}
+
+.perf-card-body {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.perf-card-note {
+	font-size: 11px;
+	color: var(--muted);
+	font-style: italic;
+	margin-top: 2px;
+}
+
+/* Inherit perf-metric layout from repos-metrics.css but make them
+   borderless inside cards to avoid double borders. */
+.perf-card-body .perf-metric {
+	padding: 6px 8px;
+	background: transparent;
+	border: none;
+	border-radius: 0;
+}
+
+.perf-footer {
+	font-size: 11px;
+	color: var(--muted);
+	margin-top: 10px;
+	padding-top: 8px;
+	border-top: 1px solid var(--border);
+}
+
+@media (max-width: 640px) {
+	.perf-cards-grid {
+		grid-template-columns: 1fr;
+	}
+}