@pyric/ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/src/traffic/components/TrafficLineChart.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import type { MetricPoint, MetricSeries } from '../hooks/useTrafficMetrics.js';
+
+export interface TrafficLineChartProps {
+  points: readonly MetricPoint[];
+  series: readonly MetricSeries[];
+  /** Series keys currently drawn. Omit to draw every series. Pair with
+   *  {@link TrafficMetricCards}' `visible`/`onToggle` so the legend cards
+   *  and the chart's lines toggle in lockstep. */
+  visible?: ReadonlySet<string>;
+  /** Omit all-zero series from the plot and tooltip while retaining their
+   *  explicit total in the accompanying metric strip. */
+  omitZeroSeries?: boolean;
+  formatValue?: (n: number) => string;
+  formatTime?: (t: number) => string;
+  emptyState?: React.ReactNode;
+  className?: string;
+}
+
+const defaultFormatValue = (n: number) => String(n);
+const defaultFormatTime = (t: number) => new Date(t).toLocaleTimeString();
+
+/** Hand-rolled SVG line chart, no charting dependency — plain lines over
+ *  a 0..100 viewBox so CSS drives the actual size (intrinsic layout, no
+ *  fixed pixel chart). Each series draws only when `visible` includes
+ *  its key (or `visible` is omitted). The y-scale is the max value
+ *  across the currently VISIBLE series only, so toggling a tall series
+ *  off rescales the rest up — matching the Console reference.
+ *
+ * Interaction: hovering (or focusing, via the invisible per-bucket hit
+ * targets) shows a tooltip with the bucket's time range and each visible
+ * series' value at that bucket — `[data-pyric-chart-tooltip]`, positioned
+ * via `--pyric-hover-x`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-line-chart"]`,
+ * `[data-pyric-chart-svg]`, `[data-pyric-chart-line]` (with
+ * `data-pyric-series-key`, `data-pyric-series-index` — the same index a
+ * `TrafficMetricCards` card carries, so line + card colors line up),
+ * `[data-pyric-chart-hit]` (with `data-pyric-point-index`),
+ * `[data-pyric-chart-tooltip]`, `[data-pyric-tooltip-row]`.
+ */
+export function TrafficLineChart({
+  points,
+  series,
+  visible,
+  omitZeroSeries = false,
+  formatValue = defaultFormatValue,
+  formatTime = defaultFormatTime,
+  emptyState,
+  className,
+}: TrafficLineChartProps) {
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  if (points.length === 0) {
+    return (
+      <div className={className} data-pyric-ui="traffic-line-chart" data-pyric-empty="">
+        {emptyState}
+      </div>
+    );
+  }
+
+  const visibleSeries = series.filter(
+    (s) => (!visible || visible.has(s.key)) && (!omitZeroSeries || s.total > 0),
+  );
+  let maxValue = 0;
+  for (const s of visibleSeries) for (const v of s.values) if (v > maxValue) maxValue = v;
+  const scale = maxValue === 0 ? 1 : maxValue;
+
+  const n = points.length;
+  const xAt = (i: number) => (n === 1 ? 50 : (i / (n - 1)) * 100);
+  const yAt = (v: number) => 100 - (v / scale) * 100;
+
+  const hoveredPoint = hovered != null ? points[hovered] : null;
+
+  return (
+    <div className={className} data-pyric-ui="traffic-line-chart">
+      <div data-pyric-chart-svg="">
+        <svg viewBox="0 0 100 100" preserveAspectRatio="none" role="img" aria-label="metrics over time">
+          {series.map((s) => {
+            const seriesIndex = series.indexOf(s);
+            const isVisible =
+              (!visible || visible.has(s.key)) && (!omitZeroSeries || s.total > 0);
+            if (!isVisible) return null;
+            const d = s.values.map((v, i) => `${i === 0 ? 'M' : 'L'}${xAt(i)},${yAt(v)}`).join(' ');
+            return (
+              <path
+                key={s.key}
+                data-pyric-chart-line=""
+                data-pyric-series-key={s.key}
+                data-pyric-series-index={seriesIndex}
+                d={d}
+                fill="none"
+                vectorEffect="non-scaling-stroke"
+              />
+            );
+          })}
+        </svg>
+
+        <div data-pyric-chart-hits="">
+          {points.map((point, i) => (
+            <button
+              key={point.index}
+              type="button"
+              data-pyric-chart-hit=""
+              data-pyric-point-index={i}
+              onMouseEnter={() => setHovered(i)}
+              onFocus={() => setHovered(i)}
+              onMouseLeave={() => setHovered((cur) => (cur === i ? null : cur))}
+              onBlur={() => setHovered((cur) => (cur === i ? null : cur))}
+              aria-label={`${formatTime(point.start)} to ${formatTime(point.end)}`}
+            />
+          ))}
+        </div>
+
+        {hoveredPoint && (
+          <div
+            data-pyric-chart-tooltip=""
+            style={{ '--pyric-hover-x': xAt(hoveredPoint.index) } as React.CSSProperties}
+          >
+            <div data-pyric-tooltip-time="">
+              {formatTime(hoveredPoint.start)} – {formatTime(hoveredPoint.end)}
+            </div>
+            {visibleSeries.map((s) => (
+              <div
+                key={s.key}
+                data-pyric-tooltip-row=""
+                data-pyric-series-key={s.key}
+                data-pyric-series-index={series.indexOf(s)}
+              >
+                <span data-pyric-tooltip-label="">{s.label}</span>
+                <span data-pyric-tooltip-value="">{formatValue(s.values[hoveredPoint.index])}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/traffic/components/TrafficLog.tsx

@@ -0,0 +1,175 @@
+import type { ReactNode } from 'react';
+import { VirtualList } from '../../primitives/VirtualList.js';
+import type { TrafficEvent } from '../types.js';
+import type { TrafficLogItem } from '../hooks/useTrafficGroups.js';
+import { TrafficRow } from './TrafficRow.js';
+import { TrafficGroupRow } from './TrafficGroupRow.js';
+
+export interface TrafficLogProps {
+  /** Events to render, in display order. The hook layer decides the
+   *  order — `<TrafficLog>` renders the array as given. */
+  events: TrafficEvent[];
+  /**
+   * Grouped items from `useTrafficGroups`. When provided, the log
+   * renders singles + collapsible group rows and does NOT
+   * virtualize — grouping is itself the volume reducer (a 250-event
+   * listener storm becomes one group row). `events` is ignored.
+   */
+  items?: TrafficLogItem[];
+  /** The selected event's id, marked with `data-pyric-selected`. */
+  selectedId?: string;
+  onSelect?: (event: TrafficEvent) => void;
+  /** Passed through to each `<TrafficRow>`. */
+  renderClassification?: (event: TrafficEvent) => ReactNode;
+  /** Passed through to each `<TrafficRow>`. */
+  formatTime?: (at: number) => string;
+  /**
+   * Full escape hatch — render a row yourself instead of the default
+   * `<TrafficRow>`. Receives the event and its selected state.
+   * Applies to the flat (`events`) path only.
+   */
+  renderRow?: (event: TrafficEvent, selected: boolean) => ReactNode;
+  emptyState?: ReactNode;
+  className?: string;
+  /**
+   * Above this row count, the list virtualizes via `<VirtualList>`.
+   * Default 100 — a `load-test`-shaped session can emit 100k+ events,
+   * so virtualization is load-bearing, not polish.
+   */
+  virtualizeThreshold?: number;
+  /** Estimated row height when virtualizing. Default 28. */
+  rowHeight?: number | ((index: number) => number);
+  /** Pixel height the virtualized scroll container fills. Default
+   *  `'60vh'`. */
+  virtualizedHeight?: number | string;
+}
+
+/**
+ * Headless traffic log — a Chrome DevTools Network-panel-style event
+ * stream. Below `virtualizeThreshold` it renders a plain `<ul>`;
+ * above it, TanStack-Virtual via `<VirtualList>`.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-log"]`,
+ * `[data-pyric-traffic-entry]` (the list item wrapper), plus the
+ * `<TrafficRow>` hooks.
+ */
+export function TrafficLog({
+  events,
+  items,
+  selectedId,
+  onSelect,
+  renderClassification,
+  formatTime,
+  renderRow,
+  emptyState,
+  className,
+  virtualizeThreshold = 100,
+  rowHeight = 28,
+  virtualizedHeight = '60vh',
+}: TrafficLogProps) {
+  // Grouped mode — singles + collapsible group rows, no virtualization.
+  if (items !== undefined) {
+    if (items.length === 0) {
+      return (
+        <div
+          className={className}
+          data-pyric-ui="traffic-log"
+          data-pyric-empty=""
+        >
+          {emptyState}
+        </div>
+      );
+    }
+    return (
+      <div className={className} data-pyric-ui="traffic-log" data-pyric-grouped="">
+        <ul data-pyric-traffic-log-items="">
+          {items.map((item) =>
+            item.type === 'group' ? (
+              <li key={item.key} data-pyric-traffic-group-entry="">
+                <TrafficGroupRow
+                  group={item}
+                  onSelect={onSelect}
+                  selectedId={selectedId}
+                  renderClassification={renderClassification}
+                  formatTime={formatTime}
+                />
+              </li>
+            ) : (
+              <li
+                key={item.event.id}
+                data-pyric-traffic-entry=""
+                data-pyric-traffic-id={item.event.id}
+              >
+                <TrafficRow
+                  event={item.event}
+                  selected={item.event.id === selectedId}
+                  onSelect={onSelect}
+                  renderClassification={renderClassification}
+                  formatTime={formatTime}
+                />
+              </li>
+            ),
+          )}
+        </ul>
+      </div>
+    );
+  }
+
+  if (events.length === 0) {
+    return (
+      <div className={className} data-pyric-ui="traffic-log" data-pyric-empty="">
+        {emptyState}
+      </div>
+    );
+  }
+
+  const row = (event: TrafficEvent): ReactNode => {
+    const selected = event.id === selectedId;
+    if (renderRow) return renderRow(event, selected);
+    return (
+      <TrafficRow
+        event={event}
+        selected={selected}
+        onSelect={onSelect}
+        renderClassification={renderClassification}
+        formatTime={formatTime}
+      />
+    );
+  };
+
+  const virtualized = events.length > virtualizeThreshold;
+
+  return (
+    <div
+      className={className}
+      data-pyric-ui="traffic-log"
+      data-pyric-virtualized={virtualized ? '' : undefined}
+    >
+      {virtualized ? (
+        <VirtualList
+          items={events}
+          estimateSize={rowHeight}
+          height={virtualizedHeight}
+          getItemKey={(event) => event.id}
+          renderItem={(event) => (
+            <div data-pyric-traffic-entry="" data-pyric-traffic-id={event.id}>
+              {row(event)}
+            </div>
+          )}
+        />
+      ) : (
+        <ul data-pyric-traffic-log-items="">
+          {events.map((event) => (
+            <li
+              key={event.id}
+              data-pyric-traffic-entry=""
+              data-pyric-traffic-id={event.id}
+            >
+              {row(event)}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/traffic/components/TrafficMetricCards.tsx

@@ -0,0 +1,77 @@
+import type { MetricSeries } from '../hooks/useTrafficMetrics.js';
+
+export interface TrafficMetricCardsProps {
+  series: readonly MetricSeries[];
+  /** When supplied (with `onToggle`), each card gets a checkbox and
+   *  doubles as the chart's legend — Console reference semantics
+   *  ("toggle series visibility"). Omit for a read-only totals strip. */
+  visible?: ReadonlySet<string>;
+  onToggle?: (key: string) => void;
+  formatValue?: (n: number) => string;
+  className?: string;
+}
+
+const defaultFormatValue = (n: number) => String(n);
+
+/**
+ * The period-total strip: one card per series, each showing the series'
+ * total for the current window. Doubles as BOTH the chart's legend row
+ * (pass `visible` + `onToggle` to get the checkbox-toggle semantics) AND
+ * the standalone fallback presentation when a chart isn't warranted —
+ * this component never depends on {@link TrafficLineChart}.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-metric-cards"]`,
+ * `[data-pyric-metric-card]` (with `data-pyric-metric-key`,
+ * `data-pyric-series-index` — the color channel a chart's lines also
+ * key off of, so a card and its line always match), `[data-pyric-metric-hidden]`
+ * when toggled off.
+ */
+export function TrafficMetricCards({
+  series,
+  visible,
+  onToggle,
+  formatValue = defaultFormatValue,
+  className,
+}: TrafficMetricCardsProps) {
+  const toggleable = visible !== undefined && onToggle !== undefined;
+  return (
+    <div className={className} data-pyric-ui="traffic-metric-cards" role={toggleable ? 'group' : undefined}>
+      {series.map((s, index) => {
+        const isVisible = visible ? visible.has(s.key) : true;
+        const card = (
+          <>
+            <span data-pyric-metric-swatch="" aria-hidden="true" />
+            <span data-pyric-metric-label="">{s.label}</span>
+            <span data-pyric-metric-value="">{formatValue(s.total)}</span>
+          </>
+        );
+        return toggleable ? (
+          <label
+            key={s.key}
+            data-pyric-metric-card=""
+            data-pyric-metric-key={s.key}
+            data-pyric-series-index={index}
+            data-pyric-metric-hidden={isVisible ? undefined : ''}
+          >
+            <input
+              type="checkbox"
+              checked={isVisible}
+              onChange={() => onToggle!(s.key)}
+              data-pyric-metric-checkbox=""
+            />
+            {card}
+          </label>
+        ) : (
+          <span
+            key={s.key}
+            data-pyric-metric-card=""
+            data-pyric-metric-key={s.key}
+            data-pyric-series-index={index}
+          >
+            {card}
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/src/traffic/components/TrafficRow.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import { Badge } from '../../primitives/Badge.js';
+import type { TrafficEvent } from '../types.js';
+import { defaultFormatTime } from './format.js';
+
+export interface TrafficRowProps {
+  event: TrafficEvent;
+  /** Marks the row as the active selection (`data-pyric-selected`). */
+  selected?: boolean;
+  onSelect?: (event: TrafficEvent) => void;
+  /**
+   * Render-prop slot for a consumer-specific classification badge —
+   * e.g. the playground's `expected`/`ambiguous`/`unexpected`
+   * verdict, which is app-source analysis the library doesn't own.
+   * Returns `null` to render nothing.
+   */
+  renderClassification?: (event: TrafficEvent) => ReactNode;
+  /** Override the timestamp rendering. Default is `HH:MM:SS`. */
+  formatTime?: (at: number) => string;
+  className?: string;
+}
+
+/**
+ * One headless traffic row — timestamp, method badge, path, and an
+ * optional consumer classification slot. The raw result is exposed as
+ * `data-pyric-result` on the row (for tinting/filtering); rendering a
+ * verdict/outcome label is the consumer's job via
+ * `renderClassification` — the row itself draws no result chip, so a
+ * consumer verdict never collides with a built-in one. Latency is
+ * intentionally absent: this is a local simulator, so `evalMs` lives
+ * in `<TrafficDetail>` only.
+ *
+ * Styling hooks:
+ * - `[data-pyric-traffic-row]` — the row button, with
+ *   `data-pyric-result`, `data-pyric-origin`, `data-pyric-method`
+ * - `[data-pyric-traffic-row][data-pyric-selected]` — active row
+ * - `[data-pyric-traffic-time]` / `[data-pyric-traffic-path]`
+ * - `[data-pyric-traffic-service]` — the service label (firestore / rtdb /
+ *   storage / auth), rendered even when unknown (empty) so fixed-width
+ *   styling keeps the columns aligned
+ * - method renders as `<Badge>` (`data-pyric-badge-kind`)
+ */
+export function TrafficRow({
+  event,
+  selected,
+  onSelect,
+  renderClassification,
+  formatTime = defaultFormatTime,
+  className,
+}: TrafficRowProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect?.(event)}
+      className={className}
+      data-pyric-traffic-row=""
+      data-pyric-result={event.result}
+      data-pyric-origin={event.origin}
+      data-pyric-method={event.method}
+      data-pyric-selected={selected ? '' : undefined}
+    >
+      <span data-pyric-traffic-time="">{formatTime(event.at)}</span>
+      <span data-pyric-traffic-service={event.service ?? ''}>{event.service ?? ''}</span>
+      <Badge kind={event.method}>{event.method}</Badge>
+      <span data-pyric-traffic-path="">{event.path || '/'}</span>
+      {renderClassification ? renderClassification(event) : null}
+    </button>
+  );
+}

package/src/traffic/components/TrafficStats.tsx

@@ -0,0 +1,73 @@
+import type { TrafficStatsSummary } from '../hooks/useTrafficStats.js';
+
+export interface TrafficStatsProps {
+  stats: TrafficStatsSummary;
+  className?: string;
+}
+
+function BucketList({
+  label,
+  buckets,
+}: {
+  label: string;
+  buckets: TrafficStatsSummary['byMethod'];
+}) {
+  return (
+    <div data-pyric-stat-group="" data-pyric-stat-group-label={label}>
+      <h4 data-pyric-stat-group-heading="">{label}</h4>
+      <ul data-pyric-stat-buckets="">
+        {buckets.map((b) => (
+          <li key={b.key} data-pyric-stat-bucket="" data-pyric-stat-key={b.key}>
+            <span data-pyric-stat-bucket-label="">{b.key}</span>
+            <span data-pyric-stat-bucket-count="">{b.count}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Headless aggregation panel. Renders the totals, the deny rate, and
+ * count breakdowns by method / origin / path. The deny rate is
+ * exposed both as text and as a `--pyric-deny-rate` CSS custom
+ * property on the root for a proportional meter.
+ *
+ * Styling hooks: `[data-pyric-ui="traffic-stats"]`,
+ * `[data-pyric-stat]` (with `data-pyric-stat-key`),
+ * `[data-pyric-stat-group]` (with `data-pyric-stat-group-label`),
+ * `[data-pyric-stat-bucket]`.
+ */
+export function TrafficStats({ stats, className }: TrafficStatsProps) {
+  return (
+    <div
+      className={className}
+      data-pyric-ui="traffic-stats"
+      style={{ '--pyric-deny-rate': stats.denyRate } as React.CSSProperties}
+    >
+      <div data-pyric-stat-totals="">
+        <span data-pyric-stat="" data-pyric-stat-key="total">
+          <span data-pyric-stat-label="">total</span>
+          <span data-pyric-stat-value="">{stats.total}</span>
+        </span>
+        <span data-pyric-stat="" data-pyric-stat-key="allows">
+          <span data-pyric-stat-label="">allowed</span>
+          <span data-pyric-stat-value="">{stats.allows}</span>
+        </span>
+        <span data-pyric-stat="" data-pyric-stat-key="denies">
+          <span data-pyric-stat-label="">denied</span>
+          <span data-pyric-stat-value="">{stats.denies}</span>
+        </span>
+        <span data-pyric-stat="" data-pyric-stat-key="deny-rate">
+          <span data-pyric-stat-label="">deny rate</span>
+          <span data-pyric-stat-value="">
+            {(stats.denyRate * 100).toFixed(0)}%
+          </span>
+        </span>
+      </div>
+      <BucketList label="method" buckets={stats.byMethod} />
+      <BucketList label="origin" buckets={stats.byOrigin} />
+      <BucketList label="path" buckets={stats.byPath} />
+    </div>
+  );
+}