pi-mega-compact 0.14.0 → 0.15.0

package/extensions/dashboard-client/package-lock.json

@@ -8,6 +8,9 @@
       "name": "pi-mega-compact-dashboard-client",
       "version": "0.8.9",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@radix-ui/react-select": "^2.1.0",
         "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
@@ -335,6 +338,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",

package/extensions/dashboard-client/package.json

@@ -11,6 +11,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",

package/extensions/dashboard-client/src/api/client.ts

@@ -25,6 +25,7 @@ import type {
 	GameScoresQuery,
 	PerfResponse,
 	PerfQuery,
+	PerfSamplesResponse,
 	AchievementRow,
 	SessionsResponse,
 	SessionTimeseriesResponse,
@@ -192,6 +193,16 @@ export function fetchPerf(params: PerfQuery = {}): Promise<PerfResponse> {
 	);
 }
 
+/** GET /api/perf/samples — raw perf samples for one kind (chart drill-down). */
+export function fetchPerfSamples(
+	kind: string,
+	minutes?: number,
+): Promise<PerfSamplesResponse> {
+	return getJson<PerfSamplesResponse>(
+		`${ENDPOINTS.perfSamples.path}${query({ kind, minutes })}`,
+	);
+}
+
 export function fetchAchievements(): Promise<AchievementRow[]> {
 	return getJson<AchievementRow[]>(ENDPOINTS.achievements.path);
 }

package/extensions/dashboard-client/src/components/SessionContextGauges.tsx

@@ -78,7 +78,7 @@ interface GaugeData {
 	isSelf: boolean;
 }
 
-/** A single compact gauge: header label, fill bar, tokens/window sublabel. */
+/** A single readable gauge: header label, fill bar, tokens/window sublabel. */
 function SessionGauge({ data }: { data: GaugeData }): React.ReactElement {
 	const pct = data.percent ?? 0;
 	const fillWidth = Math.max(pct, 1);
@@ -89,7 +89,11 @@ function SessionGauge({ data }: { data: GaugeData }): React.ReactElement {
 	return (
 		<div className={`session-gauge ${data.isSelf ? "session-gauge-self" : ""}`}>
 			<div className="session-gauge-head">
-				<span className="session-gauge-label">{data.label}</span>
+				{/* Full repo/session name by default; truncate only as a last
+				 * resort (ellipsis + hover title) when space is genuinely tight. */}
+				<span className="session-gauge-label truncate" title={data.label}>
+					{data.label}
+				</span>
 				<span className="session-gauge-pct">{pct}%</span>
 			</div>
 			<div
@@ -103,7 +107,7 @@ function SessionGauge({ data }: { data: GaugeData }): React.ReactElement {
 				<div className="gauge-fill" style={{ width: `${fillWidth}%` }} />
 			</div>
 			<p className="gauge-label session-gauge-sub">{sublabel}</p>
-			{data.sublabel && <p className="session-gauge-meta">{data.sublabel}</p>}
+			{data.sublabel && <p className="session-gauge-meta truncate" title={data.sublabel}>{data.sublabel}</p>}
 		</div>
 	);
 }
@@ -154,7 +158,7 @@ export function SessionContextGauges({
 	const showLoading = loading && !sessions;
 
 	return (
-		<Card className="electric-hover">
+		<Card className="electric-hover session-gauges-card w-full">
 			<CardHeader>
 				<CardTitle>Context per Session (live)</CardTitle>
 			</CardHeader>
@@ -166,10 +170,12 @@ export function SessionContextGauges({
 			) : showLoading ? (
 				<div className="text-sm text-muted-foreground">Loading sessions…</div>
 			) : (
-				<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-					{gauges.map((g) => (
-						<SessionGauge key={g.key} data={g} />
-					))}
+				<div className="session-gauges-scroll">
+					<div className="session-gauges-grid">
+						{gauges.map((g) => (
+							<SessionGauge key={g.key} data={g} />
+						))}
+					</div>
 				</div>
 			)}
 			</CardContent>

package/extensions/dashboard-client/src/components/WidgetDetailModal.tsx

@@ -0,0 +1,69 @@
+/**
+ * dashboard-client/src/components/WidgetDetailModal.tsx — reusable drill-down modal.
+ *
+ * Wraps the RepoDetailModal overlay pattern (fixed backdrop, escape-key close,
+ * click-backdrop close) into a generic container so Overview cards can open a
+ * bar/line chart over time. Children render inside a scrollable panel.
+ */
+
+import type React from "react";
+import { useEffect } from "react";
+import { X } from "lucide-react";
+
+export interface WidgetDetailModalProps {
+	/** Modal heading shown in the panel header. */
+	title: string;
+	/** Whether the modal is open (mounted). */
+	open: boolean;
+	/** Called when the user closes via Escape, close button, or backdrop click. */
+	onClose: () => void;
+	/** Modal body (e.g. a chart component). */
+	children: React.ReactNode;
+}
+
+export function WidgetDetailModal({
+	title,
+	open,
+	onClose,
+	children,
+}: WidgetDetailModalProps): React.ReactElement {
+	// Close on Escape key while the panel is open.
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e: KeyboardEvent): void => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [open, onClose]);
+
+	if (!open) return <></>;
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+			onClick={onClose}
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+		>
+			<div
+				className="max-h-[80vh] w-full max-w-3xl overflow-y-auto rounded-lg border border-border bg-bg-card p-5"
+				onClick={(e) => e.stopPropagation()}
+			>
+				<header className="mb-4 flex items-center justify-between gap-4">
+					<h2 className="font-heading text-lg font-semibold">{title}</h2>
+					<button
+						type="button"
+						className="text-muted-foreground transition-colors hover:text-foreground"
+						onClick={onClose}
+						aria-label="Close"
+					>
+						<X size={22} strokeWidth={2} />
+					</button>
+				</header>
+				{children}
+			</div>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/components/charts/PerfBarChart.tsx

@@ -0,0 +1,89 @@
+/**
+ * dashboard-client/src/components/charts/PerfBarChart.tsx — reusable perf bar chart.
+ *
+ * Recharts BarChart with the dashboard dark theme (AXIS "#8b949e",
+ * GRID "#30363d", dark tooltip). Renders `{label, value}` buckets.
+ * Handles empty data with a "No data available" message.
+ *
+ * PREVENT-PI-004: recharts is bundled into this localhost-served static
+ * dashboard bundle; it makes no runtime network calls.
+ */
+
+import type React from "react";
+import {
+	ResponsiveContainer,
+	BarChart,
+	Bar,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+} from "recharts";
+
+export interface PerfBarChartProps {
+	/** Buckets with a display label + numeric value. */
+	data: Array<{ label: string; value: number }>;
+	/** Bar color (default dashboard green). */
+	color?: string;
+	/** Chart height in px (default 280). */
+	height?: number;
+	/** Optional formatter for values (e.g. "$" prefix, thousands separators). */
+	valueFormatter?: (v: number) => string;
+}
+
+const AXIS_COLOR = "#8b949e";
+const GRID_COLOR = "#30363d";
+const TOOLTIP_STYLE = {
+	background: "#161b22",
+	border: "1px solid #30363d",
+	borderRadius: "6px",
+	color: "#e6edf3",
+};
+
+export function PerfBarChart({
+	data,
+	color = "#3fb950",
+	height = 280,
+	valueFormatter,
+}: PerfBarChartProps): React.ReactElement {
+	const fmt = valueFormatter ?? ((v: number) => String(v));
+
+	if (!data || data.length === 0) {
+		return <p className="py-8 text-center text-sm text-muted-foreground">No data available</p>;
+	}
+
+	return (
+		<ResponsiveContainer width="100%" height={height}>
+			<BarChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
+				<CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+				<XAxis
+					dataKey="label"
+					stroke={AXIS_COLOR}
+					tick={{ fontSize: 11 }}
+					interval={0}
+					angle={-20}
+					textAnchor="end"
+					height={56}
+				/>
+				<YAxis
+					dataKey="value"
+					stroke={AXIS_COLOR}
+					tick={{ fontSize: 11 }}
+					width={56}
+					tickFormatter={(v: number) => fmt(v)}
+				/>
+				<Tooltip
+					formatter={(value) => [fmt(value as number), "value"] as [string, string]}
+					contentStyle={TOOLTIP_STYLE}
+					labelStyle={{ color: AXIS_COLOR, fontSize: 12 }}
+				/>
+				<Bar
+					dataKey="value"
+					fill={color}
+					radius={[4, 4, 0, 0]}
+					isAnimationActive={false}
+				/>
+			</BarChart>
+		</ResponsiveContainer>
+	);
+}

package/extensions/dashboard-client/src/components/charts/PerfLineChart.tsx

@@ -0,0 +1,108 @@
+/**
+ * dashboard-client/src/components/charts/PerfLineChart.tsx — reusable perf line chart.
+ *
+ * Recharts LineChart with the dashboard dark theme (AXIS "#8b949e",
+ * GRID "#30363d", dark tooltip). Renders `{ts, value}` samples over time.
+ * Handles empty data with a "No data available" message.
+ *
+ * PREVENT-PI-004: recharts is bundled into this localhost-served static
+ * dashboard bundle; it makes no runtime network calls.
+ */
+
+import type React from "react";
+import {
+	ResponsiveContainer,
+	LineChart,
+	Line,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+} from "recharts";
+
+export interface PerfLineChartProps {
+	/** Time-series samples ascending by ts (epoch ms). */
+	data: Array<{ ts: number; value: number }>;
+	/** Optional series label shown in the tooltip. */
+	label?: string;
+	/** Line + gradient color (default dashboard blue). */
+	color?: string;
+	/** Chart height in px (default 280). */
+	height?: number;
+}
+
+const AXIS_COLOR = "#8b949e";
+const GRID_COLOR = "#30363d";
+const TOOLTIP_STYLE = {
+	background: "#161b22",
+	border: "1px solid #30363d",
+	borderRadius: "6px",
+	color: "#e6edf3",
+};
+
+function fmtTs(ts: number): string {
+	return new Date(ts).toLocaleTimeString();
+}
+
+function fmtVal(v: number): string {
+	return Number.isFinite(v) ? String(v) : String(v);
+}
+
+export function PerfLineChart({
+	data,
+	label = "value",
+	color = "#58a6ff",
+	height = 280,
+}: PerfLineChartProps): React.ReactElement {
+	if (!data || data.length === 0) {
+		return <p className="py-8 text-center text-sm text-muted-foreground">No data available</p>;
+	}
+
+	const gradId = `perf-line-${color.replace(/[^a-zA-Z0-9]/g, "")}`;
+
+	return (
+		<ResponsiveContainer width="100%" height={height}>
+			<LineChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
+				<defs>
+					<linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+						<stop offset="5%" stopColor={color} stopOpacity={0.7} />
+						<stop offset="95%" stopColor={color} stopOpacity={0.15} />
+					</linearGradient>
+				</defs>
+				<CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+				<XAxis
+					dataKey="ts"
+					type="number"
+					domain={["dataMin", "dataMax"]}
+					scale="time"
+					tickFormatter={(ts: number) => fmtTs(ts)}
+					stroke={AXIS_COLOR}
+					tick={{ fontSize: 11 }}
+				/>
+				<YAxis
+					dataKey="value"
+					stroke={AXIS_COLOR}
+					tick={{ fontSize: 11 }}
+					width={56}
+					tickFormatter={(v: number) => fmtVal(v)}
+				/>
+				<Tooltip
+					labelFormatter={(ts: number) => fmtTs(ts)}
+					formatter={(value) => [fmtVal(value as number), label] as [string, string]}
+					contentStyle={TOOLTIP_STYLE}
+					labelStyle={{ color: AXIS_COLOR, fontSize: 12 }}
+				/>
+				<Line
+					type="monotone"
+					dataKey="value"
+					name={label}
+					stroke={color}
+					strokeWidth={2}
+					dot={false}
+					fill={`url(#${gradId})`}
+					isAnimationActive={false}
+				/>
+			</LineChart>
+		</ResponsiveContainer>
+	);
+}

package/extensions/dashboard-client/src/components/layout/AppShell.tsx

@@ -17,7 +17,7 @@ export function AppShell({ active, onTabChange, snapshot, children }: AppShellPr
 
   return (
     <div className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex max-w-[1600px] gap-6 px-4 py-4">
+      <div className="mx-auto flex w-full gap-6 px-4 py-4 xl:px-6">
         <Sidebar active={active} onTabChange={onTabChange} />
         <div className="flex min-w-0 flex-1 flex-col">
           <header className="mb-4 flex items-center gap-3">

package/extensions/dashboard-client/src/components/ui/SortableCard.tsx

@@ -0,0 +1,75 @@
+/**
+ * dashboard-client/src/components/ui/SortableCard.tsx — sortable wrapper for
+ * Overview grid cards.
+ *
+ * Drag isolation (Plexus PR #59 pattern): the sortable listeners live ONLY on
+ * the grip icon. The card surface is not directly draggable — it keeps its
+ * onClick (drill-down) and stays keyboard-accessible.
+ */
+import type React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+import type { CardId } from "../../types/card";
+
+export interface SortableCardProps {
+	id: CardId;
+	children: React.ReactNode;
+	onClick?: () => void;
+}
+
+export function SortableCard({
+	id,
+	children,
+	onClick,
+}: SortableCardProps): React.ReactElement {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id });
+
+	const style: React.CSSProperties = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? 0.5 : 1,
+		zIndex: isDragging ? 10 : undefined,
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (onClick && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			onClick();
+		}
+	};
+
+	return (
+		<div ref={setNodeRef} style={style} className="relative">
+			<button
+				type="button"
+				aria-label={`Reorder ${id} card`}
+				className="absolute right-2 top-2 z-10 cursor-grab rounded p-1 text-muted-foreground/50 hover:bg-foreground/5 hover:text-muted-foreground active:cursor-grabbing"
+				{...attributes}
+				{...listeners}
+			>
+				<GripVertical size={16} />
+			</button>
+			{onClick ? (
+				<div
+					role="button"
+					tabIndex={0}
+					onClick={onClick}
+					onKeyDown={handleKeyDown}
+					className="cursor-pointer rounded-lg outline-none transition-all duration-200 hover:ring-1 hover:ring-primary/60 focus-visible:ring-1 focus-visible:ring-primary/60"
+				>
+					{children}
+				</div>
+			) : (
+				<div>{children}</div>
+			)}
+		</div>
+	);
+}

package/extensions/dashboard-client/src/hooks/useCardPositions.ts

@@ -0,0 +1,74 @@
+/**
+ * dashboard-client/src/hooks/useCardPositions.ts — persisted, deterministic
+ * card order for the Overview tab.
+ *
+ * The order is read from localStorage on mount, validated against
+ * DEFAULT_CARD_ORDER (must contain exactly the same CardIds — no missing,
+ * no extras — and no duplicate ids), and falls back to the default if invalid.
+ * Pure deterministic: no Date.now() / Math.random() anywhere.
+ */
+import { useCallback, useState } from "react";
+import type { CardId } from "../types/card";
+import { DEFAULT_CARD_ORDER } from "../types/card";
+
+const STORAGE_KEY = "mega-compact-card-order";
+
+/** Returns true when `ids` is a valid permutation of DEFAULT_CARD_ORDER. */
+function isValidOrder(ids: unknown): ids is CardId[] {
+	if (!Array.isArray(ids)) return false;
+	if (ids.length !== DEFAULT_CARD_ORDER.length) return false;
+
+	const expected = new Set<CardId>(DEFAULT_CARD_ORDER);
+	const seen = new Set<CardId>();
+
+	for (const id of ids) {
+		// every entry must be a known CardId
+		if (typeof id !== "string" || !expected.has(id as CardId)) return false;
+		// no duplicates
+		if (seen.has(id as CardId)) return false;
+		seen.add(id as CardId);
+	}
+	return true;
+}
+
+/** Loads a persisted order from localStorage, validating it first. */
+function loadOrder(): CardId[] {
+	try {
+		const raw = window.localStorage.getItem(STORAGE_KEY);
+		if (raw == null) return DEFAULT_CARD_ORDER;
+		const parsed: unknown = JSON.parse(raw);
+		return isValidOrder(parsed) ? parsed : DEFAULT_CARD_ORDER;
+	} catch {
+		return DEFAULT_CARD_ORDER;
+	}
+}
+
+export interface UseCardPositionsResult {
+	order: CardId[];
+	moveCard: (id: CardId, overId: CardId) => void;
+}
+
+export function useCardPositions(): UseCardPositionsResult {
+	const [order, setOrder] = useState<CardId[]>(loadOrder);
+
+	const moveCard = useCallback((id: CardId, overId: CardId) => {
+		setOrder((prev) => {
+			const from = prev.indexOf(id);
+			const to = prev.indexOf(overId);
+			if (from === -1 || to === -1 || from === to) return prev;
+
+			const next = [...prev];
+			next.splice(from, 1);
+			next.splice(to, 0, id);
+			try {
+				window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+			} catch {
+				// storage unavailable (private mode / quota) — ignore; order
+				// still holds for the session
+			}
+			return next;
+		});
+	}, []);
+
+	return { order, moveCard };
+}

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

@@ -30,7 +30,8 @@ body {
 }
 
 .dashboard-app {
-	max-width: min(1600px, 96vw);
+	width: 100%;
+	max-width: 100vw;
 	margin: 0 auto;
 	padding: clamp(8px, 2vw, 24px);
 }
@@ -210,9 +211,6 @@ body {
 }
 
 @media (min-width: 1601px) {
-	.dashboard-app {
-		max-width: min(1800px, 96vw);
-	}
 	.card-grid {
 		grid-template-columns: repeat(4, 1fr);
 	}