@linxiraos/pi-stats 1.1.6 → 1.1.8

package/src/client/styles.css

@@ -1,46 +1,41 @@
 @import "tailwindcss/index.css";
 
 /* ==========================================================================
-   Zeta Theme Variables & Color Scheme (aligned with Zeta Web UI globals.css)
+   OMP Theme Variables & Color Scheme
    ========================================================================== */
 :root {
   color-scheme: dark;
-  /* Zeta dark theme — blue accent #60a5fa, neutral-gray surfaces.
-     Mirrors web-ui/app/globals.css `html.dark` token set. */
-  --bg: #1a1a1a;
-  --bg-panel: #242424;
-  --bg-hover: #2e2e2e;
-  --bg-selected: #383838;
-  --bg-subtle: rgba(255,255,255,0.04);
-  --border: #3a3a3a;
-  --border-strong: rgba(255,255,255,0.13);
-  --text: #e8e8e8;
-  --text-muted: #9ca3af;
-  --text-dim: #6b7280;
-  --accent: #60a5fa;          /* Zeta blue */
-  --accent-hover: #93c5fd;
-  --accent-fg: #0f172a;       /* ink on accent fills */
-  --accent-muted: rgba(96,165,250,0.18);
-  --link: #60a5fa;            /* Zeta blue */
-  --success: #22c55e;
-  --danger: #ef4444;
-  --warning: #f59e0b;
-
-  /* Backward-compat aliases for existing class references */
-  --page: var(--bg);
-  --surface: var(--bg-panel);
-  --surface-2: var(--bg-hover);
-  --muted: var(--text-muted);
-  --dim: var(--text-dim);
-
-  /* Bridge view-component token vocabulary */
+  /* OMP brand palette — packages/collab-web/src/styles/tokens.css:
+     deep-purple surfaces (hue 307), pink accent #ed4abf, cyan focus ring #5ad8e6. */
+  --page: oklch(0.16 0.02 307);
+  --surface: oklch(0.19 0.022 307);
+  --surface-2: oklch(0.235 0.026 307);
+  --border: oklch(1 0 0 / 9%);
+  --border-strong: oklch(1 0 0 / 13%);
+  --text: oklch(0.92 0.01 307);
+  --muted: oklch(0.71 0.016 307);
+  --dim: oklch(0.53 0.018 307);
+  --accent: oklch(0.674 0.23 341);          /* brand pink #ed4abf */
+  --accent-fg: oklch(0.2 0.07 341);         /* ink on accent fills */
+  --accent-muted: oklch(0.674 0.23 341 / 18%);
+  --link: oklch(0.817 0.112 205);           /* brand cyan #5ad8e6 */
+  --success: oklch(0.76 0.14 150);
+  --danger: oklch(0.66 0.19 25);
+  --warning: oklch(0.79 0.14 85);
+
+  /* Bridge the view components' token vocabulary to the OMP base tokens so
+     muted/secondary text and semantic accents resolve instead of silently
+     falling back to inherited text color. Re-resolve per theme via var(). */
   --text-primary: var(--text);
-  --text-secondary: var(--text-muted);
+  --text-secondary: var(--muted);
+  --text-muted: var(--dim);
   --border-subtle: var(--border);
   --accent-red: var(--danger);
   --accent-green: var(--success);
   --accent-cyan: var(--link);
-  --bg-elevated: var(--bg-hover);
+  --bg-hover: var(--surface-2);
+  --bg-elevated: var(--surface-2);
+  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 
   --radius-sm: 3px;
   --radius-md: 6px;
@@ -52,89 +47,44 @@
 @media (prefers-color-scheme: light) {
   :root:not([data-theme]) {
     color-scheme: light;
-    --bg: #ffffff;
-    --bg-panel: #f5f5f5;
-    --bg-hover: #eeeeee;
-    --bg-selected: #e8e8e8;
-    --bg-subtle: rgba(0,0,0,0.03);
-    --border: #e0e0e0;
-    --border-strong: rgba(0,0,0,0.15);
-    --text: #1a1a1a;
-    --text-muted: #6b7280;
-    --text-dim: #9ca3af;
-    --accent: #2563eb;          /* Zeta blue */
-    --accent-hover: #1d4ed8;
-    --accent-fg: #ffffff;
-    --accent-muted: rgba(37,99,235,0.14);
-    --link: #2563eb;
-    --success: #16a34a;
-    --danger: #dc2626;
-    --warning: #d97706;
-    /* Backward-compat aliases */
-    --page: var(--bg);
-    --surface: var(--bg-panel);
-    --surface-2: var(--bg-hover);
-    --muted: var(--text-muted);
-    --dim: var(--text-dim);
+    --page: oklch(0.985 0.004 307);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.965 0.006 307);
+    --border: oklch(0 0 0 / 10%);
+    --border-strong: oklch(0 0 0 / 15%);
+    --text: oklch(0.26 0.03 307);
+    --muted: oklch(0.46 0.03 307);
+    --dim: oklch(0.58 0.025 307);
+    --accent: oklch(0.62 0.23 341);
+    --accent-fg: oklch(0.99 0.01 341);
+    --accent-muted: oklch(0.62 0.23 341 / 14%);
+    --link: oklch(0.58 0.13 230);
+    --success: oklch(0.55 0.13 150);
+    --danger: oklch(0.55 0.19 25);
+    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --warning: oklch(0.6 0.13 85);
   }
 }
 
 /* Explicit theme override (toggle or persisted preference). */
 [data-theme="light"] {
   color-scheme: light;
-  --bg: #ffffff;
-  --bg-panel: #f5f5f5;
-  --bg-hover: #eeeeee;
-  --bg-selected: #e8e8e8;
-  --bg-subtle: rgba(0,0,0,0.03);
-  --border: #e0e0e0;
-  --border-strong: rgba(0,0,0,0.15);
-  --text: #1a1a1a;
-  --text-muted: #6b7280;
-  --text-dim: #9ca3af;
-  --accent: #2563eb;          /* Zeta blue */
-  --accent-hover: #1d4ed8;
-  --accent-fg: #ffffff;
-  --accent-muted: rgba(37,99,235,0.14);
-  --link: #2563eb;
-  --success: #16a34a;
-  --danger: #dc2626;
-  --warning: #d97706;
-  /* Backward-compat aliases */
-  --page: var(--bg);
-  --surface: var(--bg-panel);
-  --surface-2: var(--bg-hover);
-  --muted: var(--text-muted);
-  --dim: var(--text-dim);
-}
-
-/* Zeta Starfield theme — NASA-punk deep-space HUD, aligned with web-ui globals.css */
-[data-theme="starfield"] {
-  color-scheme: dark;
-  --bg: #08090d;
-  --bg-panel: #0d1117;
-  --bg-hover: #161d2e;
-  --bg-selected: #1a2540;
-  --bg-subtle: rgba(217,155,38,0.05);
-  --border: #1e2d45;
-  --border-strong: rgba(217,155,38,0.2);
-  --text: #e8eeff;
-  --text-muted: #8fa3c0;
-  --text-dim: #3d5070;
-  --accent: #d99b26;          /* Zeta Starfield gold */
-  --accent-hover: #f0b840;
-  --accent-fg: #0f172a;
-  --accent-muted: rgba(217,155,38,0.18);
-  --link: #d99b26;
-  --success: #22c55e;
-  --danger: #c81d25;
-  --warning: #e05a2b;
-  /* Backward-compat aliases */
-  --page: var(--bg);
-  --surface: var(--bg-panel);
-  --surface-2: var(--bg-hover);
-  --muted: var(--text-muted);
-  --dim: var(--text-dim);
+  --page: oklch(0.985 0.004 307);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.965 0.006 307);
+  --border: oklch(0 0 0 / 10%);
+  --border-strong: oklch(0 0 0 / 15%);
+  --text: oklch(0.26 0.03 307);
+  --muted: oklch(0.46 0.03 307);
+  --dim: oklch(0.58 0.025 307);
+  --accent: oklch(0.62 0.23 341);
+  --accent-fg: oklch(0.99 0.01 341);
+  --accent-muted: oklch(0.62 0.23 341 / 14%);
+  --link: oklch(0.58 0.13 230);
+  --success: oklch(0.55 0.13 150);
+  --danger: oklch(0.55 0.19 25);
+  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  --warning: oklch(0.6 0.13 85);
 }
 
 /* ==========================================================================
@@ -517,6 +467,62 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 }
 
+/* Select (native <select>, themed to match RangeControl/Buttons) */
+.stats-select {
+  appearance: none;
+  padding: 6px 28px 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--text);
+  background-color: var(--surface-2);
+  /* Chevron follows theme: light stroke on dark, dark stroke on light. */
+  background-image: var(--select-chevron);
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  max-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.stats-select:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background-color: var(--bg-hover);
+}
+
+.stats-select:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 1px;
+}
+
+.stats-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Prevent iOS from zooming the viewport when a select receives focus. */
+@media (pointer: coarse) {
+  .stats-select {
+    font-size: 16px;
+  }
+}
+
+/* Dropdown list itself follows the page theme via color-scheme. */
+.stats-select option {
+  background-color: var(--surface);
+  color: var(--text);
+}
+/* Forced-colors (Windows High Contrast) suppresses background images, so the
+   custom chevron vanishes; restore the native indicator instead. */
+@media (forced-colors: active) {
+  .stats-select {
+    appearance: auto;
+  }
+}
+
 /* Sync Button & Container */
 .stats-sync-container {
   display: flex;
@@ -1287,7 +1293,7 @@
 }
 
 /* ==========================================================================
-   Brand mark on the Zeta wordmark (both rail + mobile drawer headers)
+   Brand mark on the OMP wordmark (both rail + mobile drawer headers)
    ========================================================================== */
 .stats-logo-container {
   display: grid;
@@ -1302,7 +1308,7 @@
   width: 16px;
   height: 16px;
   border-radius: 4px;
-  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #60a5fa 100%); /* Zeta brand gradient mark */
+  background: linear-gradient(135deg, #ed4abf 0%, #9b4dff 50%, #5ad8e6 100%); /* OMP brand gradient mark */
 }
 
 .stats-logo-text,
@@ -1382,3 +1388,319 @@
     transition: none;
   }
 }
+
+/* ==========================================================================
+   Traces (session flamegraph)
+   ========================================================================== */
+.stats-trace-view {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.stats-trace-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.stats-trace-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: color 0.14s ease, border-color 0.14s ease;
+}
+
+.stats-trace-back:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.stats-trace-back:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+
+.stats-trace-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-trace-cwd {
+  font-size: 11px;
+  color: var(--dim);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 10px;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Summary strip: one bordered card, hairline-divided stat columns. */
+.stats-trace-summary {
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.stats-trace-summary-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 16px;
+  border-right: 1px solid var(--border);
+  min-width: 76px;
+}
+
+.stats-trace-summary-cell:last-child {
+  border-right: none;
+}
+
+.stats-trace-summary-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--dim);
+}
+
+.stats-trace-summary-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Toolbar row above the timeline. */
+.stats-trace-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.stats-trace-toolbar-hint {
+  font-size: 10px;
+  color: var(--dim);
+  margin-left: auto;
+}
+
+.stats-trace-input {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.stats-trace-input:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 1px;
+}
+
+.stats-trace-input::placeholder {
+  color: var(--dim);
+}
+
+.stats-trace-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  cursor: pointer;
+  user-select: none;
+}
+
+.stats-trace-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--muted);
+  cursor: pointer;
+  transition: color 0.14s ease, border-color 0.14s ease;
+}
+
+.stats-trace-icon-btn:hover:not(:disabled) {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.stats-trace-icon-btn:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+
+.stats-trace-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Timeline card: minimap + canvas share one bordered surface. */
+.stats-trace-timeline-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stats-trace-timeline {
+  position: relative;
+  display: flex;
+  max-height: 560px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.stats-trace-canvas {
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  border-radius: var(--radius-sm);
+}
+
+.stats-trace-canvas:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+
+.stats-trace-canvas:active {
+  cursor: grabbing;
+}
+
+.stats-trace-chevron {
+  display: inline-flex;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--muted);
+}
+
+.stats-trace-chevron:hover {
+  color: var(--text);
+}
+
+.stats-trace-gutter-track {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.stats-trace-gutter-model {
+  font-size: 9px;
+  color: var(--dim);
+}
+
+.stats-trace-gutter-lane {
+  position: absolute;
+  font-size: 8px;
+  color: var(--dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/* Transcript list under the timeline. */
+.stats-trace-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  height: 340px;
+  overflow-y: auto;
+}
+
+.stats-trace-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 28px;
+  width: 100%;
+  padding: 0 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.stats-trace-row:hover {
+  background: var(--bg-hover);
+}
+
+.stats-trace-row:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: -2px;
+}
+
+.stats-trace-row[data-selected="true"] {
+  background: var(--accent-muted);
+}
+
+.stats-trace-row-static {
+  cursor: default;
+}
+
+.stats-trace-row-static:hover {
+  background: transparent;
+}
+
+.stats-trace-kind {
+  flex-shrink: 0;
+  width: 58px;
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-radius: 3px;
+  padding: 2px 0;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-trace-row-meta {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  gap: 10px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stats-trace-back,
+  .stats-trace-icon-btn,
+  .stats-trace-row {
+    transition: none;
+  }
+}

package/src/client/traces/AggregatesPanel.tsx

@@ -0,0 +1,88 @@
+/**
+ * Collapsible per-tool duration aggregates for one trace, sorted by total
+ * time descending (as produced by the server).
+ */
+
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useMemo, useState } from "react";
+import { formatDurationMs, formatInteger } from "../data/formatters";
+import type { TraceToolStat } from "../types";
+import { DataTable } from "../ui/DataTable";
+
+export interface AggregatesPanelProps {
+	toolStats: TraceToolStat[];
+}
+
+export function AggregatesPanel({ toolStats }: AggregatesPanelProps) {
+	const [open, setOpen] = useState(false);
+
+	const columns = useMemo(
+		() => [
+			{ key: "tool", header: "Tool", render: (item: TraceToolStat) => item.tool },
+			{ key: "calls", header: "Calls", numeric: true, render: (item: TraceToolStat) => formatInteger(item.calls) },
+			{
+				key: "errors",
+				header: "Errors",
+				numeric: true,
+				render: (item: TraceToolStat) => formatInteger(item.errors),
+			},
+			{
+				key: "total",
+				header: "Total",
+				numeric: true,
+				render: (item: TraceToolStat) => formatDurationMs(item.totalMs),
+			},
+			{
+				key: "avg",
+				header: "Avg",
+				numeric: true,
+				render: (item: TraceToolStat) => formatDurationMs(item.calls > 0 ? item.totalMs / item.calls : 0),
+			},
+			{ key: "max", header: "Max", numeric: true, render: (item: TraceToolStat) => formatDurationMs(item.maxMs) },
+		],
+		[],
+	);
+
+	if (toolStats.length === 0) return null;
+
+	return (
+		<div className="stats-panel">
+			<button
+				type="button"
+				onClick={() => setOpen(prev => !prev)}
+				aria-expanded={open}
+				style={{
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					width: "100%",
+					background: "none",
+					border: "none",
+					padding: "10px 14px",
+					cursor: "pointer",
+					textAlign: "left",
+				}}
+			>
+				{open ? (
+					<ChevronDown size={14} className="stats-text-muted" aria-hidden="true" />
+				) : (
+					<ChevronRight size={14} className="stats-text-muted" aria-hidden="true" />
+				)}
+				<span className="stats-panel-title">Tool Aggregates</span>
+				<span className="stats-text-muted" style={{ fontSize: 11 }}>
+					{toolStats.length} tools
+				</span>
+			</button>
+			{open && (
+				<div className="stats-panel-body">
+					<DataTable
+						columns={columns}
+						data={toolStats}
+						keyExtractor={item => item.tool}
+						emptyText="No tool calls"
+					/>
+				</div>
+			)}
+		</div>
+	);
+}