pi-mega-compact 0.13.4 → 0.13.6

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

@@ -10,6 +10,7 @@
 import type React from "react";
 import { useState, useMemo } from "react";
 import type { IndexesIndexRow } from "@contracts";
+import { Card, CardContent } from "../components/ui/card";
 
 export interface RepoTableProps {
 	repos: IndexesIndexRow[];
@@ -99,30 +100,32 @@ export function RepoTable({
 	};
 
 	return (
-		<div className="repo-table-wrap">
+		<Card>
+			<CardContent>
 			<input
 				type="search"
-				className="repo-search"
+				className="mb-3 w-full rounded-md border border-border bg-bg-elevated/50 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/60"
 				placeholder="Search repos…"
 				value={search}
 				onChange={(e) => setSearch(e.target.value)}
 				aria-label="Search repos"
 			/>
-			<table className="repo-table">
+			<div className="overflow-x-auto">
+			<table className="w-full border-collapse text-sm">
 				<thead>
 					<tr>
 						{COLUMNS.map((col) => (
-							<th key={col.key}>
+							<th key={col.key} className="border-b border-border px-3 py-2 text-left">
 								<button
 									type="button"
-									className={`sort-header ${sortKey === col.key ? `active-${sortDir}` : ""}`}
+									className={`font-medium text-muted-foreground transition-colors hover:text-foreground ${
+										sortKey === col.key ? "text-neon" : ""
+									}`}
 									onClick={() => handleSort(col.key)}
 								>
 									{col.label}
 									{sortKey === col.key && (
-										<span className="sort-arrow">
-											{sortDir === "asc" ? " ▲" : " ▼"}
-										</span>
+										<span>{sortDir === "asc" ? " ▲" : " ▼"}</span>
 									)}
 								</button>
 							</th>
@@ -132,7 +135,7 @@ export function RepoTable({
 				<tbody>
 					{filtered.length === 0 && (
 						<tr>
-							<td colSpan={COLUMNS.length} className="repo-empty">
+							<td colSpan={COLUMNS.length} className="px-3 py-4 text-muted-foreground">
 								{repos.length === 0
 									? "No repositories registered yet."
 									: "No repos match your search."}
@@ -140,19 +143,25 @@ export function RepoTable({
 						</tr>
 					)}
 					{filtered.map((repo) => (
-						<tr key={repo.stateDir} onClick={() => onSelect(repo)}>
-							<td className="repo-name" title={repo.repoRoot}>
+						<tr
+							key={repo.stateDir}
+							onClick={() => onSelect(repo)}
+							className="cursor-pointer border-b border-border/50 transition-colors hover:bg-bg-elevated/40"
+						>
+							<td className="px-3 py-2 font-medium" title={repo.repoRoot}>
 								{repo.displayName}
 							</td>
-							<td className="repo-model">{repo.modelName ?? "\u2014"}</td>
-							<td className="num">{repo.checkpointCount.toLocaleString()}</td>
-							<td className="num">{repo.tokensSaved.toLocaleString()}</td>
-							<td className="num">{fmtBytesTop(repo.compressedOriginalBytes)}</td>
-							<td className="num">{formatTs(repo.lastCompactedAt)}</td>
+							<td className="px-3 py-2 text-muted-foreground">{repo.modelName ?? "\u2014"}</td>
+							<td className="px-3 py-2 text-right">{repo.checkpointCount.toLocaleString()}</td>
+							<td className="px-3 py-2 text-right">{repo.tokensSaved.toLocaleString()}</td>
+							<td className="px-3 py-2 text-right">{fmtBytesTop(repo.compressedOriginalBytes)}</td>
+							<td className="px-3 py-2 text-right">{formatTs(repo.lastCompactedAt)}</td>
 						</tr>
 					))}
 				</tbody>
 			</table>
-		</div>
+			</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -19,6 +19,7 @@
 
 import type React from "react";
 import type { ActiveSession, SessionsResponse } from "@contracts";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface SessionContextGaugesProps {
 	/** Active sessions from /api/sessions (may be null while loading). */
@@ -153,29 +154,25 @@ export function SessionContextGauges({
 	const showLoading = loading && !sessions;
 
 	return (
-		<div className="card session-gauges-card">
-			<h3>Context per Session (live)</h3>
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>Context per Session (live)</CardTitle>
+			</CardHeader>
+			<CardContent>
 			{hasError ? (
-				<div className="sessions-empty">
+				<div className="text-sm text-muted-foreground">
 					Error loading sessions: {error!.message}
 				</div>
 			) : showLoading ? (
-				<div className="sessions-empty">Loading sessions…</div>
-			) : gauges.length <= 1 && others.length === 0 ? (
-				// Launcher-only: just render the one self gauge (no "no sessions"
-				// message — the launcher always has a gauge).
-				<div className="session-gauges-grid">
-					{gauges.map((g) => (
-						<SessionGauge key={g.key} data={g} />
-					))}
-				</div>
+				<div className="text-sm text-muted-foreground">Loading sessions…</div>
 			) : (
-				<div className="session-gauges-grid">
+				<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
 					{gauges.map((g) => (
 						<SessionGauge key={g.key} data={g} />
 					))}
 				</div>
 			)}
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -5,6 +5,7 @@
  */
 
 import type React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface SessionInfoProps {
 	/** Number of active crew agents. */
@@ -21,20 +22,24 @@ export function SessionInfo(
 		activeAgents > 0 ? `▶ ${activeAgents} running` : "idle";
 
 	return (
-		<div className="card crew-card">
-			<h3>Crew / Agents</h3>
-			<div className="ov-stat-row">
-				<span className="ov-stat-label">Active Agents</span>
-				<span className="ov-stat-value">{activeAgents}</span>
-			</div>
-			<div className="ov-stat-row">
-				<span className="ov-stat-label">Current Turn</span>
-				<span className="ov-stat-value">{currentTurn}</span>
-			</div>
-			<div className="ov-stat-row">
-				<span className="ov-stat-label">Status</span>
-				<span className="ov-stat-value">{status}</span>
-			</div>
-		</div>
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>Crew / Agents</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<div className="flex items-baseline justify-between border-b border-border py-1 text-sm">
+					<span className="text-xs text-muted-foreground">Active Agents</span>
+					<span className="font-semibold">{activeAgents}</span>
+				</div>
+				<div className="flex items-baseline justify-between border-b border-border py-1 text-sm">
+					<span className="text-xs text-muted-foreground">Current Turn</span>
+					<span className="font-semibold">{currentTurn}</span>
+				</div>
+				<div className="flex items-baseline justify-between py-1 text-sm">
+					<span className="text-xs text-muted-foreground">Status</span>
+					<span className="font-semibold">{status}</span>
+				</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -25,6 +25,7 @@ import {
 	Legend,
 } from "recharts";
 import type { SessionSeries } from "@contracts";
+import { Card, CardContent } from "../components/ui/card";
 
 export interface SessionsMemoryChartProps {
 	/** Per-session series with stable colors (from /api/sessions/timeseries). */
@@ -110,14 +111,15 @@ export function SessionsMemoryChart({
 
 	if (series.length === 0) {
 		return (
-			<div className="sessions-chart-empty">
-				No token samples in this window yet.
-			</div>
+			<Card>
+				<CardContent>No token samples in this window yet.</CardContent>
+			</Card>
 		);
 	}
 
 	return (
-		<div className="sessions-chart">
+		<Card>
+			<CardContent>
 			<ResponsiveContainer width="100%" height={360}>
 				<AreaChart
 					data={data}
@@ -194,6 +196,7 @@ export function SessionsMemoryChart({
 					/>
 				</AreaChart>
 			</ResponsiveContainer>
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -6,6 +6,7 @@
  */
 
 import type React from "react";
+import { Card, CardContent } from "../components/ui/card";
 
 export interface SummaryTilesProps {
 	/** Total repos in the registry. */
@@ -39,23 +40,31 @@ export function SummaryTiles({
 	compressedOriginalBytes,
 }: SummaryTilesProps): React.ReactElement {
 	return (
-		<div className="summary-tiles">
-			<div className="tile">
-				<span className="tile-label">Repositories</span>
-				<span className="tile-value">{totalRepos.toLocaleString()}</span>
-			</div>
-			<div className="tile">
-				<span className="tile-label">Total Checkpoints</span>
-				<span className="tile-value">{totalCheckpoints.toLocaleString()}</span>
-			</div>
-			<div className="tile tile-highlight">
-				<span className="tile-label">Total Tokens Saved</span>
-				<span className="tile-value">{fmt(totalTokensSaved)}</span>
-			</div>
-			<div className="tile">
-				<span className="tile-label">Compressed-Original</span>
-				<span className="tile-value">{fmtBytesTop(compressedOriginalBytes)}</span>
-			</div>
+		<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+			<Card className="electric-hover">
+				<CardContent>
+					<span className="tile-label">Repositories</span>
+					<div className="text-xl font-semibold">{totalRepos.toLocaleString()}</div>
+				</CardContent>
+			</Card>
+			<Card className="electric-hover">
+				<CardContent>
+					<span className="tile-label">Total Checkpoints</span>
+					<div className="text-xl font-semibold">{totalCheckpoints.toLocaleString()}</div>
+				</CardContent>
+			</Card>
+			<Card className="electric-hover">
+				<CardContent>
+					<span className="tile-label">Total Tokens Saved</span>
+					<div className="text-xl font-semibold">{fmt(totalTokensSaved)}</div>
+				</CardContent>
+			</Card>
+			<Card className="electric-hover">
+				<CardContent>
+					<span className="tile-label">Compressed-Original</span>
+					<div className="text-xl font-semibold">{fmtBytesTop(compressedOriginalBytes)}</div>
+				</CardContent>
+			</Card>
 		</div>
 	);
 }

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

@@ -11,7 +11,7 @@ import type { TabId } from "../App";
 export interface TabBarProps {
 	primaryTabs: Array<{ id: TabId; label: string }>;
 	advancedTabs: Array<{ id: TabId; label: string }>;
-	advancedTabIds: Set<TabId>;
+	advancedTabIds: ReadonlySet<TabId>;
 	active: TabId;
 	onTabChange: (id: TabId) => void;
 }
@@ -27,8 +27,6 @@ export function TabBar({
 		() => advancedTabIds.has(active), // start open if an advanced tab is active
 	);
 
-	const isAdvancedActive = advancedTabIds.has(active);
-
 	return (
 		<nav className="tab-bar" role="tablist">
 			{primaryTabs.map((tab) => (

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

@@ -0,0 +1,42 @@
+import React from "react";
+import type { SnapshotResponse } from "@contracts";
+import { Sidebar } from "./Sidebar";
+import { BottomBar } from "./BottomBar";
+import type { TabId } from "../../tabs/registry";
+
+interface AppShellProps {
+  active: TabId;
+  onTabChange: (id: TabId) => void;
+  snapshot: SnapshotResponse | null;
+  children: React.ReactNode;
+}
+
+export function AppShell({ active, onTabChange, snapshot, children }: AppShellProps) {
+  const tier = snapshot?.tier ?? "unknown";
+  const version = snapshot?.model?.name ?? "";
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex max-w-[1600px] gap-6 px-4 py-4">
+        <Sidebar active={active} onTabChange={onTabChange} />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <header className="mb-4 flex items-center gap-3">
+            <h1 className="font-heading text-lg font-semibold">
+              <span className="gradient-text">mega-compact dashboard</span>
+            </h1>
+            <span className="rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs text-muted">
+              {tier}
+            </span>
+            {version && (
+              <span className="rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs text-muted">
+                {version}
+              </span>
+            )}
+          </header>
+          <main className="flex-1 pb-20 lg:pb-4">{children}</main>
+        </div>
+      </div>
+      <BottomBar active={active} onTabChange={onTabChange} />
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { MoreHorizontal } from "lucide-react";
+import { cn } from "../../utils/cn";
+import {
+  PRIMARY_TABS,
+  ADVANCED_TABS,
+  type TabId,
+} from "../../tabs/registry";
+
+interface BottomBarProps {
+  active: TabId;
+  onTabChange: (id: TabId) => void;
+}
+
+export function BottomBar({ active, onTabChange }: BottomBarProps) {
+  const [moreOpen, setMoreOpen] = useState(false);
+  const primary = PRIMARY_TABS.slice(0, 4);
+
+  return (
+    <nav className="glass-panel fixed inset-x-3 bottom-3 z-40 flex items-center justify-around rounded-xl p-2 lg:hidden">
+      {primary.map((tab) => {
+        const Icon = tab.icon;
+        const isActive = active === tab.id;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => onTabChange(tab.id)}
+            className={cn(
+              "flex flex-col items-center gap-1 rounded-lg px-3 py-1.5 text-[11px] font-medium",
+              isActive
+                ? "text-neon glow-primary"
+                : "text-muted hover:text-foreground",
+            )}
+            aria-current={isActive ? "page" : undefined}
+          >
+            <Icon className="h-5 w-5" />
+            {tab.label}
+          </button>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={() => setMoreOpen((o) => !o)}
+        aria-expanded={moreOpen}
+        aria-controls="bottombar-more-section"
+        className={cn(
+          "flex flex-col items-center gap-1 rounded-lg px-3 py-1.5 text-[11px] font-medium",
+          moreOpen ? "text-neon" : "text-muted hover:text-foreground",
+        )}
+      >
+        <MoreHorizontal className="h-5 w-5" />
+        More
+      </button>
+
+      {moreOpen && (
+        <div
+          id="bottombar-more-section"
+          className="absolute bottom-16 right-2 w-56 rounded-xl border border-border bg-bg-elevated p-2 shadow-panel"
+        >
+          {[...PRIMARY_TABS.slice(4), ...ADVANCED_TABS].map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => {
+                  onTabChange(tab.id);
+                  setMoreOpen(false);
+                }}
+                className={cn(
+                  "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+                  active === tab.id
+                    ? "bg-primary/15 text-neon"
+                    : "text-muted hover:bg-bg-elevated hover:text-foreground",
+                )}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </nav>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { ChevronDown, Sparkles } from "lucide-react";
+import { cn } from "../../utils/cn";
+import {
+  PRIMARY_TABS,
+  ADVANCED_TABS,
+  ADVANCED_TAB_IDS,
+  type TabId,
+} from "../../tabs/registry";
+import { Badge } from "../ui/badge";
+
+interface SidebarProps {
+  active: TabId;
+  onTabChange: (id: TabId) => void;
+}
+
+export function Sidebar({ active, onTabChange }: SidebarProps) {
+  const [advancedOpen, setAdvancedOpen] = useState<boolean>(
+    () => ADVANCED_TAB_IDS.has(active),
+  );
+
+  // Keep the advanced section expanded whenever the active tab is advanced,
+  // regardless of how the navigation happened (tab click, cross-device recalc).
+  useEffect(() => {
+    if (ADVANCED_TAB_IDS.has(active)) setAdvancedOpen(true);
+  }, [active]);
+
+  const Tile = ({ tab }: { tab: (typeof PRIMARY_TABS)[number] }) => {
+    const Icon = tab.icon;
+    const isActive = active === tab.id;
+    return (
+      <button
+        type="button"
+        onClick={() => onTabChange(tab.id)}
+        className={cn(
+          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium transition-all",
+          isActive
+            ? "bg-primary/15 text-neon glow-primary border border-primary/40"
+            : "border border-transparent text-muted hover:bg-bg-elevated hover:text-foreground",
+        )}
+        aria-current={isActive ? "page" : undefined}
+      >
+        <Icon className="h-4 w-4 shrink-0" />
+        <span className="truncate">{tab.label}</span>
+        {isActive && <Badge variant="default" className="ml-auto">●</Badge>}
+      </button>
+    );
+  };
+
+  return (
+    <aside className="glass-panel hidden w-64 shrink-0 flex-col gap-1 p-3 lg:flex">
+      <div className="mb-2 flex items-center gap-2 px-2">
+        <Sparkles className="h-4 w-4 text-neon" />
+        <span className="font-heading text-sm uppercase tracking-widest text-muted">
+          Tabs
+        </span>
+      </div>
+      {PRIMARY_TABS.map((tab) => (
+        <Tile key={tab.id} tab={tab} />
+      ))}
+
+      <button
+        type="button"
+        onClick={() => setAdvancedOpen((o) => !o)}
+        className="mt-2 flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-semibold text-muted hover:text-foreground"
+        aria-expanded={advancedOpen}
+        aria-controls="sidebar-advanced-section"
+      >
+        Advanced
+        <ChevronDown
+          className={cn("h-4 w-4 transition-transform", advancedOpen && "rotate-180")}
+        />
+      </button>
+      {advancedOpen && (
+        <div id="sidebar-advanced-section" className="mt-1 flex flex-col gap-1">
+          {ADVANCED_TABS.map((tab) => (
+            <Tile key={tab.id} tab={tab} />
+          ))}
+        </div>
+      )}
+    </aside>
+  );
+}

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-primary/40 bg-primary/15 text-neon",
+        success: "border-success/40 bg-success/15 text-success",
+        warning: "border-warning/40 bg-warning/15 text-warning",
+        danger: "border-danger/40 bg-danger/15 text-danger",
+        outline: "border-border text-foreground",
+        accent: "border-accent/40 bg-accent/15 text-accent",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 glow-primary",
+        outline: "border border-border bg-transparent hover:bg-bg-elevated hover:text-foreground",
+        ghost: "hover:bg-bg-elevated hover:text-foreground",
+        glass: "glass-panel electric-hover",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("glass-panel p-4", className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("mb-3 flex flex-col space-y-1.5", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("font-heading text-sm font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardContent };