@oh-my-pi/omp-stats 18.3.4 → 18.4.0

package/dist/types/client/data/view-models.d.ts

@@ -1,4 +1,4 @@
-import type { AgentType, AgentTypeStats, BehaviorOverallStats, BehaviorTimeSeriesPoint, CostTimeSeriesPoint, FolderStats, ModelPerformancePoint, TimeRange, ToolUsageStats } from "../types.js";
+import type { AgentType, AgentTypeStats, CostTimeSeriesPoint, FolderStats, MessageStats, ModelPerformancePoint, ToolUsageStats } from "../types.js";
 export interface ConversationTokenStats {
     totalInputTokens: number;
     totalOutputTokens: number;
@@ -28,12 +28,37 @@ export interface AgentTokenShareView {
  * conversation-token buckets as the overview total so the two views reconcile.
  */
 export declare function buildAgentTokenShare(stats: AgentTypeStats[]): AgentTokenShareView;
-export interface CostSummaryView {
+/** API-equivalent cost split by billing component. */
+export interface CostComponents {
+    costInput: number;
+    costOutput: number;
+    costCacheRead: number;
+    costCacheWrite: number;
+}
+/** One model's (model + provider) totals across the cost series. */
+export interface CostModelRow extends CostComponents {
+    /** `model::provider` (see `modelKey`). */
+    key: string;
+    model: string;
+    provider: string;
+    cost: number;
+    requests: number;
+    unpricedRequests: number;
+    /** Fraction (0-1) of the total estimate. */
+    share: number;
+}
+export interface CostSummaryView extends CostComponents {
     totalCost: number;
+    requests: number;
     unpricedRequests: number;
+    /** Day buckets that carry any usage. */
+    activeDays: number;
+    /** Total estimate ÷ active days. */
     avgDailyCost: number;
-    topModelName: string;
-    topModelCost: number;
+    /** Ranked by estimate, then requests, then key. */
+    models: CostModelRow[];
+    /** Highest-estimate model; `null` when nothing is priced. */
+    topModel: CostModelRow | null;
 }
 export interface ModelPerformanceDataPoint {
     timestamp: number;
@@ -41,35 +66,93 @@ export interface ModelPerformanceDataPoint {
     avgTokensPerSecond: number | null;
     requests: number;
 }
-export interface ModelPerformanceSeries {
-    label: string;
-    data: ModelPerformanceDataPoint[];
-}
-export interface BehaviorSummaryView {
-    totalMessages: number;
-    totalYelling: number;
-    totalProfanity: number;
-    totalAnguish: number;
-    totalFrustration: number;
-    highestFrictionModel: {
-        model: string;
-        provider: string;
-        score: number;
-    } | null;
-}
 export interface FolderRowView extends FolderStats {
-    costPercentage: number;
-    requestsPercentage: number;
+    /** Uncached input + cache reads + cache writes + output. */
+    conversationTokens: number;
+    /** Share of every folder's requests in range (0-1). */
+    requestShare: number;
+    /** Share of every folder's API-equivalent cost in range (0-1). */
+    costShare: number;
+    /** Session directory under a system temp location (`/tmp`, `/var/folders`, …). */
+    temporary: boolean;
+}
+export interface FolderTableView {
+    rows: FolderRowView[];
+    totalRequests: number;
+    failedRequests: number;
+    totalCost: number;
+    unpricedRequests: number;
+    conversationTokens: number;
+    /** Cache reads ÷ (uncached input + cache reads) across every folder. */
+    cacheRate: number;
+    /** Largest single-folder request count / cost, for meter scales. */
+    maxRequests: number;
+    maxCost: number;
+    temporaryCount: number;
 }
-export declare function buildCostSummary(costSeries: CostTimeSeriesPoint[]): CostSummaryView;
-export declare function buildModelPerformanceLookup(points: ModelPerformancePoint[], range: TimeRange): Map<string, ModelPerformanceSeries>;
-export declare function buildBehaviorSummary(overall: BehaviorOverallStats, series: BehaviorTimeSeriesPoint[]): BehaviorSummaryView;
-export declare function buildFolderRows(folders: FolderStats[]): FolderRowView[];
+/** Totals, per-model breakdown and component split for the Costs page. */
+export declare function buildCostSummary(costSeries: readonly CostTimeSeriesPoint[]): CostSummaryView;
+/**
+ * Per-model (`model::provider`) performance points in ascending time order,
+ * with TTFT converted to seconds. Only buckets where the model served
+ * requests are present, so sparse history (all time) keeps every point.
+ */
+export declare function buildModelPerformanceLookup(points: readonly ModelPerformancePoint[]): Map<string, ModelPerformanceDataPoint[]>;
+/** Table rows plus range totals for the Projects page; linear in the (possibly tens of thousands of) folders. */
+export declare function buildFolderRows(folders: readonly FolderStats[]): FolderTableView;
 /** Table row for the Tools route: usage stats plus derived rates/shares. */
 export interface ToolRowView extends ToolUsageStats {
     /** errors / calls (0 for zero calls). */
     errorRate: number;
-    /** Calls relative to the busiest tool, 0-100, for the share bar. */
-    callsPercentage: number;
+    /** This tool's fraction (0..1) of all calls in range. */
+    callFraction: number;
+    /** This tool's fraction (0..1) of all attributed tokens in range. */
+    tokenFraction: number;
+    /** This tool's fraction (0..1) of all attributed cost in range. */
+    costFraction: number;
+    /** Mean result characters fed back into context per call. */
+    avgResultChars: number;
 }
 export declare function buildToolRows(tools: ToolUsageStats[]): ToolRowView[];
+export type RequestStatus = "ok" | "aborted" | "failed";
+/** Outcome of one request: cancellations abort; provider/transport errors fail. */
+export declare function requestStatus(row: Pick<MessageStats, "stopReason" | "errorMessage">): RequestStatus;
+export interface RequestLogSummary {
+    requests: number;
+    failed: number;
+    aborted: number;
+    tokens: number;
+    cost: number;
+    /** Requests with tokens but no price (see `isUnpricedMessage`). */
+    unpriced: number;
+    medianDuration: number | null;
+    p95Duration: number | null;
+    medianTtft: number | null;
+    oldest: number | null;
+    newest: number | null;
+}
+/** Totals and latency quantiles over a list of requests. */
+export declare function summarizeRequests(rows: readonly MessageStats[]): RequestLogSummary;
+/**
+ * Normalized error message used to group failures: whitespace collapsed,
+ * request ids / hashes / counters replaced with placeholders (HTTP status
+ * codes kept), truncated.
+ */
+export declare function errorSignature(message: string | null): string;
+export interface ErrorGroupModel {
+    model: string;
+    provider: string;
+    count: number;
+}
+export interface ErrorGroupView {
+    signature: string;
+    count: number;
+    firstSeen: number;
+    lastSeen: number;
+    /** Most recent occurrence (full message, drawer target). */
+    latest: MessageStats;
+    /** Affected models, most failures first. */
+    models: ErrorGroupModel[];
+}
+/** Group failures by `errorSignature`; most frequent first, then most recent. */
+export declare function groupErrorsBySignature(rows: readonly MessageStats[]): ErrorGroupView[];

package/dist/types/client/index.d.ts

@@ -1,2 +1 @@
 import "./styles.css";
-import "./data/charts.js";

package/dist/types/client/routes/CostsRoute.d.ts

@@ -1,7 +1,7 @@
+import "./costs.css";
 import type { TimeRange } from "../types.js";
 export interface CostsRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
 }
-export declare function CostsRoute({ active, range, refreshTrigger }: CostsRouteProps): import("react").JSX.Element;
+export declare function CostsRoute({ active, range }: CostsRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/ErrorsRoute.d.ts

@@ -1,8 +1,8 @@
 import type { TimeRange } from "../types.js";
+import "./errors.css";
 export interface ErrorsRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
     onRequestClick: (id: number) => void;
 }
-export declare function ErrorsRoute({ active, range, refreshTrigger, onRequestClick }: ErrorsRouteProps): import("react").JSX.Element;
+export declare function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/FrustrationRoute.d.ts

@@ -0,0 +1,7 @@
+import type { TimeRange } from "../types.js";
+import "./frustration.css";
+export interface FrustrationRouteProps {
+    active: boolean;
+    range: TimeRange;
+}
+export declare function FrustrationRoute({ active, range }: FrustrationRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/GainRoute.d.ts

@@ -2,6 +2,5 @@ import type { TimeRange } from "../types.js";
 export interface GainRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
 }
-export declare function GainRoute({ active, range, refreshTrigger }: GainRouteProps): import("react").JSX.Element;
+export declare function GainRoute({ active, range }: GainRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/ModelsRoute.d.ts

@@ -1,7 +1,7 @@
+import "./models.css";
 import type { TimeRange } from "../types.js";
 export interface ModelsRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
 }
-export declare function ModelsRoute({ active, range, refreshTrigger }: ModelsRouteProps): import("react").JSX.Element;
+export declare function ModelsRoute({ active, range }: ModelsRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/OverviewRoute.d.ts

@@ -2,7 +2,6 @@ import type { TimeRange } from "../types.js";
 export interface OverviewRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
     onRequestClick: (id: number) => void;
 }
-export declare function OverviewRoute({ active, range, refreshTrigger, onRequestClick }: OverviewRouteProps): import("react").JSX.Element;
+export declare function OverviewRoute({ active, range, onRequestClick }: OverviewRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/ProjectsRoute.d.ts

@@ -1,7 +1,7 @@
 import type { TimeRange } from "../types.js";
+import "./projects.css";
 export interface ProjectsRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
 }
-export declare function ProjectsRoute({ active, range, refreshTrigger }: ProjectsRouteProps): import("react").JSX.Element;
+export declare function ProjectsRoute({ active, range }: ProjectsRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/ProvidersRoute.d.ts

@@ -1,7 +1,7 @@
 import type { TimeRange } from "../types.js";
+import "./providers.css";
 export interface ProvidersRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
 }
-export declare function ProvidersRoute({ active, range, refreshTrigger }: ProvidersRouteProps): import("react").JSX.Element;
+export declare function ProvidersRoute({ active, range }: ProvidersRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/RequestsRoute.d.ts

@@ -2,7 +2,6 @@ import type { TimeRange } from "../types.js";
 export interface RequestsRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
     onRequestClick: (id: number) => void;
 }
-export declare function RequestsRoute({ active, refreshTrigger, onRequestClick }: RequestsRouteProps): import("react").JSX.Element;
+export declare function RequestsRoute({ active, range, onRequestClick }: RequestsRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/ToolsRoute.d.ts

@@ -1,7 +1,7 @@
 import type { TimeRange } from "../types.js";
+import "./tools.css";
 export interface ToolsRouteProps {
     active: boolean;
     range: TimeRange;
-    refreshTrigger: number;
 }
-export declare function ToolsRoute({ active, range, refreshTrigger }: ToolsRouteProps): import("react").JSX.Element;
+export declare function ToolsRoute({ active, range }: ToolsRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/TracesRoute.d.ts

@@ -2,10 +2,10 @@
  * Traces section: root-session list (subagents folded in) that opens the
  * flamegraph trace viewer for a selected session.
  */
+import "../traces/traces.css";
 export interface TracesRouteProps {
     active: boolean;
     session: string | null;
     onOpenSession: (file: string | null) => void;
-    refreshTrigger: number;
 }
-export declare function TracesRoute({ active, session, onOpenSession, refreshTrigger }: TracesRouteProps): import("react").JSX.Element;
+export declare function TracesRoute({ active, session, onOpenSession }: TracesRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/index.d.ts

@@ -1,6 +1,6 @@
-export * from "./BehaviorRoute.js";
 export * from "./CostsRoute.js";
 export * from "./ErrorsRoute.js";
+export * from "./FrustrationRoute.js";
 export * from "./GainRoute.js";
 export * from "./ModelsRoute.js";
 export * from "./OverviewRoute.js";

package/dist/types/client/traces/AggregatesPanel.d.ts

@@ -1,9 +1,10 @@
 /**
- * Collapsible per-tool duration aggregates for one trace, sorted by total
- * time descending (as produced by the server).
+ * Per-tool duration aggregates for one trace (sortable; server order is total
+ * time descending).
  */
 import type { TraceToolStat } from "../types.js";
 export interface AggregatesPanelProps {
     toolStats: TraceToolStat[];
+    index?: number;
 }
-export declare function AggregatesPanel({ toolStats }: AggregatesPanelProps): import("react").JSX.Element | null;
+export declare function AggregatesPanel({ toolStats, index }: AggregatesPanelProps): import("react").JSX.Element | null;

package/dist/types/client/traces/SummaryStrip.d.ts

@@ -1,6 +1,6 @@
 /**
- * Headline chips for one trace: wall/model/tool/idle time, turns, requests,
- * tool calls, agents, tokens, cost.
+ * Headline tiles for one trace: wall time split into model/tool/idle, then
+ * turns, requests, tool calls, agents, tokens, cost.
  */
 import type { TraceSummary } from "../types.js";
 export interface SummaryStripProps {

package/dist/types/client/traces/trace-colors.d.ts

@@ -1,31 +1,37 @@
 /**
- * Category palette + canvas chrome tokens for the trace flamegraph, keyed by
- * resolved theme. Hues align with the dashboard chip palette; chrome tokens
- * mirror `CHART_THEMES` so the canvas matches the chart.js surfaces.
+ * Canvas palette for the trace flamegraph, resolved from the dashboard's CSS
+ * design tokens so canvas drawing follows the active theme.
  */
 import type { TraceSpanKind } from "../types.js";
 export interface TraceTheme {
     /** Span fill per category. */
     category: Record<TraceSpanKind, string>;
-    /** Error fill tint + left-edge accent. */
+    /** Error left-edge accent. */
     error: string;
+    /** Error fill tint. */
+    errorSoft: string;
     /** Marker diamond fill. */
     marker: string;
     /** Alternating turn-band fill. */
     turnBand: string;
-    /** Canvas background. */
-    surface: string;
     /** Ruler/lane hairlines. */
     grid: string;
     /** Ruler tick labels. */
     tick: string;
     /** Span label text drawn inside blocks. */
     spanText: string;
-    /** Selection outline (brand cyan focus ring). */
+    /** Selection outline / minimap brush. */
     selection: string;
-    tooltipBackground: string;
-    tooltipTitle: string;
-    tooltipBody: string;
-    tooltipBorder: string;
+    /** Minimap brush fill. */
+    brush: string;
+    /** Canvas font stacks. */
+    fontSans: string;
+    fontMono: string;
 }
-export declare const TRACE_THEMES: Record<"dark" | "light", TraceTheme>;
+/** CSS custom property backing each category (also used by DOM chips). */
+export declare const CATEGORY_VARS: Record<TraceSpanKind, string>;
+/**
+ * Current trace palette. Re-reads the tokens whenever the resolved theme
+ * changes (store or a direct `data-theme` attribute write).
+ */
+export declare function useTraceTheme(): TraceTheme;

package/dist/types/client/ui/Badge.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export type Tone = "neutral" | "ok" | "warn" | "bad" | "accent";
+/** Pill label; status badges always carry a word, never color alone. */
+export declare function Badge({ tone, mono, children }: {
+    tone?: Tone;
+    mono?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Round status dot; `pulse` for things happening right now. */
+export declare function Dot({ tone, pulse }: {
+    tone?: Tone | "live";
+    pulse?: boolean;
+}): import("react").JSX.Element;
+/** Color square matching a chart series. */
+export declare function Swatch({ color }: {
+    color: string;
+}): import("react").JSX.Element;
+/** Badge tone for an error rate (fraction). */
+export declare function errorRateTone(rate: number): Tone;

package/dist/types/client/ui/Card.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export interface CardProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Right-aligned header controls (segmented toggles, selects, buttons). */
+    actions?: ReactNode;
+    /** Body without padding — for full-bleed tables and lists. */
+    flush?: boolean;
+    footer?: ReactNode;
+    className?: string;
+    /** Stagger index for the entrance animation. */
+    index?: number;
+    /** Dim the body while previous data is on screen (see `useQuery().stale`). */
+    stale?: boolean;
+    children: ReactNode;
+}
+/** The dashboard's container: top-lit hairline edge, optional header and footer. */
+export declare function Card({ title, description, actions, flush, footer, className, index, stale, children }: CardProps): import("react").JSX.Element;
+export interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+/** Title band at the top of every page. */
+export declare function PageHeader({ title, description, actions }: PageHeaderProps): import("react").JSX.Element;

package/dist/types/client/ui/Drawer.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Header controls left of the close button. */
+    actions?: ReactNode;
+    /** Sheet width in px. Default 560. */
+    width?: number;
+    children: ReactNode;
+}
+/**
+ * Right-side glass sheet over a scrim, portalled to `document.body`. Esc and
+ * scrim clicks close it; focus returns to the opener.
+ */
+export declare function Drawer({ open, onClose, title, subtitle, actions, width, children }: DrawerProps): import("react").ReactPortal | null;
+/** Label/value grid for detail panels. */
+export declare function KeyValues({ items }: {
+    items: readonly {
+        key: string;
+        label: ReactNode;
+        value: ReactNode;
+    }[];
+}): import("react").JSX.Element;

package/dist/types/client/ui/JsonBlock.d.ts

@@ -1,7 +1,7 @@
-import type React from "react";
 export interface JsonBlockProps {
     data: unknown;
     title?: string;
     initialCollapsed?: boolean;
 }
-export declare function JsonBlock({ data, title, initialCollapsed }: JsonBlockProps): React.JSX.Element;
+/** Collapsible, copyable pretty-printed JSON. */
+export declare function JsonBlock({ data, title, initialCollapsed }: JsonBlockProps): import("react").JSX.Element;

package/dist/types/client/ui/Modal.d.ts

@@ -0,0 +1,23 @@
+import type React from "react";
+import "./modal.css";
+export interface ModalAction {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface ModalProps {
+    open: boolean;
+    title: React.ReactNode;
+    /** Called on Esc, overlay click, the close icon, and the cancel button. */
+    onClose: () => void;
+    /** Confirming action; receives focus whenever it is present and enabled. */
+    primaryAction?: ModalAction;
+    cancelLabel?: string;
+    children: React.ReactNode;
+}
+/**
+ * Centered dialog over a dimmed overlay, portalled to `document.body` so route
+ * containers cannot clip it. Focus lands on the primary action (or the cancel
+ * button when there is none) and returns to the opener on close.
+ */
+export declare function Modal({ open, title, onClose, primaryAction, cancelLabel, children }: ModalProps): React.ReactPortal | null;

package/dist/types/client/ui/RequestDrawer.d.ts

@@ -1,5 +1,14 @@
+import { type RequestStatus } from "../data/view-models.js";
+import { type Tone } from "./Badge.js";
+import "./request-drawer.css";
+/** Label and tone for each request outcome; shared by the request tables. */
+export declare const REQUEST_STATUS: Record<RequestStatus, {
+    label: string;
+    tone: Tone;
+}>;
 export interface RequestDrawerProps {
     id: number | null;
     onClose: () => void;
 }
-export declare function RequestDrawer({ id, onClose }: RequestDrawerProps): import("react").JSX.Element | null;
+/** Full detail sheet for one model request: timing, tokens, cost, ids, error, and the raw session entry. */
+export declare function RequestDrawer({ id, onClose }: RequestDrawerProps): import("react").JSX.Element;

package/dist/types/client/ui/SearchInput.d.ts

@@ -0,0 +1,8 @@
+export interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    width?: number;
+}
+/** Text filter with a leading search glyph. */
+export declare function SearchInput({ value, onChange, placeholder, width }: SearchInputProps): import("react").JSX.Element;

package/dist/types/client/ui/Segmented.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    title?: string;
+}
+export interface SegmentedProps<T extends string> {
+    options: readonly SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: "md" | "sm";
+    "aria-label"?: string;
+}
+/** Pill toggle with a measured sliding thumb. */
+export declare function Segmented<T extends string>({ options, value, onChange, size, "aria-label": ariaLabel, }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/types/client/ui/Stat.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export interface StatDelta {
+    /** Relative change vs the previous period (0.12 = +12%). `null` when there is no baseline. */
+    change: number | null;
+    /** Which direction is good news. Default `"up"`. */
+    good?: "up" | "down";
+}
+export interface StatProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** Small print under the value. */
+    hint?: ReactNode;
+    delta?: StatDelta;
+    /** Trend under the value. */
+    spark?: readonly number[];
+    sparkColor?: string;
+    size?: "md" | "sm";
+    /** Title tooltip explaining the metric. */
+    title?: string;
+}
+/**
+ * One metric tile. The value flashes briefly when it changes after mount, so
+ * live updates are noticeable without being loud.
+ */
+export declare function Stat({ label, value, hint, delta, spark, sparkColor, size, title }: StatProps): import("react").JSX.Element;
+export interface StatGridProps {
+    /** Minimum tile width before wrapping. Default 170px. */
+    min?: number;
+    children: ReactNode;
+}
+/** Tiles sharing one card, separated by hairlines. */
+export declare function StatGrid({ min, children }: StatGridProps): import("react").JSX.Element;
+/** Signed percentage change pill, green when the move is good news. */
+export declare function Delta({ change, good }: StatDelta): import("react").JSX.Element;
+/** Relative change from `previous` to `current`; `null` when there is no baseline. */
+export declare function relativeChange(current: number, previous: number): number | null;

package/dist/types/client/ui/States.d.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties, ReactNode } from "react";
+export declare function EmptyState({ title, hint }: {
+    title?: ReactNode;
+    hint?: ReactNode;
+}): import("react").JSX.Element;
+export declare function ErrorState({ error, onRetry }: {
+    error: Error | string;
+    onRetry?: () => void;
+}): import("react").JSX.Element;
+export declare function Skeleton({ width, height, style, }: {
+    width?: number | string;
+    height?: number | string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/** Placeholder block matching a chart's footprint. */
+export declare function ChartSkeleton({ height }: {
+    height?: number;
+}): import("react").JSX.Element;
+/** Placeholder rows matching a table's footprint. */
+export declare function TableSkeleton({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+export interface QueryViewProps<T> {
+    query: {
+        data: T | null;
+        error: Error | null;
+        loading: boolean;
+        refetch: () => void;
+    };
+    /** Rendered on first load. */
+    skeleton: ReactNode;
+    /** Treat loaded data as empty (renders `empty`). */
+    isEmpty?: (data: T) => boolean;
+    empty?: ReactNode;
+    children: (data: T) => ReactNode;
+}
+/**
+ * Standard load/error/empty switch for one `useQuery` result. Errors with
+ * data already on screen keep the data and show the error above it.
+ */
+export declare function QueryView<T>({ query, skeleton, isEmpty, empty, children }: QueryViewProps<T>): import("react").JSX.Element;

package/dist/types/client/ui/Table.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+export interface Column<T> {
+    key: string;
+    header: ReactNode;
+    render: (row: T) => ReactNode;
+    /** Sort key; the column header becomes clickable when present. */
+    sort?: (row: T) => number | string;
+    align?: "left" | "right" | "center";
+    width?: number | string;
+    /** Allow the cell to wrap (cells are single-line by default). */
+    wrap?: boolean;
+    /** Header tooltip. */
+    title?: string;
+}
+export type SortDir = "asc" | "desc";
+export interface TableProps<T> {
+    columns: readonly Column<T>[];
+    rows: readonly T[];
+    rowKey: (row: T) => string | number;
+    onRowClick?: (row: T) => void;
+    selectedKey?: string | number | null;
+    /** Initial sort; numeric columns usually start `desc`. */
+    initialSort?: {
+        key: string;
+        dir: SortDir;
+    };
+    /** Show the first `limit` rows; "Show more" reveals `limit` × 4 more at a time (rendering stays cheap for huge tables). */
+    limit?: number;
+    dense?: boolean;
+    empty?: ReactNode;
+    /** Detail row rendered below a row (return `null` for collapsed rows). */
+    expanded?: (row: T) => ReactNode | null;
+}
+/** Sortable data table. Clicking a sorted header flips its direction. */
+export declare function Table<T>({ columns, rows, rowKey, onRowClick, selectedKey, initialSort, limit, dense, empty, expanded, }: TableProps<T>): import("react").JSX.Element;
+/** Right-aligned value with a proportional bar, for ranked numeric columns. */
+export declare function MeterCell({ value, max, display, color, }: {
+    value: number;
+    max: number;
+    display: ReactNode;
+    color?: string;
+}): import("react").JSX.Element;
+/** Two-line cell: primary label and a dim secondary line. */
+export declare function LabelCell({ primary, secondary, lead, }: {
+    primary: ReactNode;
+    secondary?: ReactNode;
+    lead?: ReactNode;
+}): import("react").JSX.Element;