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

package/src/events/components/ActivityGrid.tsx

@@ -0,0 +1,197 @@
+import type { ReactNode } from 'react';
+import type { AnyActivityEvent } from '../types.js';
+import {
+  computeActivityDigest,
+  type ActivityBandWithGroups,
+  type ActivityDigest,
+  type ActivityDigestOptions,
+  type ActivityRow,
+} from '../digest.js';
+import { ActivityGridRow } from './ActivityGridRow.js';
+
+export interface ActivityGridProps {
+  /**
+   * The unified event stream — `sandbox.history()` and/or a live buffer
+   * (see `useActivityStream`). The grid folds it into the banded digest
+   * internally. Mutually exclusive with `digest`.
+   */
+  events?: readonly AnyActivityEvent[];
+  /**
+   * A precomputed digest from `useActivityDigest` / `computeActivity
+   * Digest`. Pass this when the host already memoizes the fold (so the
+   * grid doesn't recompute). Mutually exclusive with `events`.
+   */
+  digest?: ActivityDigest;
+  /** Grouping / ordering options, forwarded to the reducer when the grid
+   *  folds `events` itself. Ignored when `digest` is supplied. */
+  options?: ActivityDigestOptions & { now?: number };
+  /** The selected row id (`data-pyric-selected`). */
+  selectedId?: string;
+  onSelect?: (row: ActivityRow) => void;
+  /** Clamp rows shown per band; the rest collapse into a "N more" stub.
+   *  Independent of the reducer's `rowsPerBand` (which trims the data) —
+   *  this is a pure display clamp that keeps the true count visible.
+   *  Default: show all rows. */
+  maxRowsPerBand?: number;
+  /** Render the per-band overflow stub. Default renders a
+   *  `[data-pyric-band-more]` element reading "N more {label}". */
+  renderBandMore?: (band: ActivityBandWithGroups, hidden: number) => ReactNode;
+  /** Override the `when` column rendering. */
+  formatWhen?: (at: number, now: number) => string;
+  /** "Now" anchor for `formatWhen`. */
+  now?: number;
+  /** Shown when the digest has no rows. */
+  emptyState?: ReactNode;
+  className?: string;
+  /** Render a leading column-header row (`target change for lens when`).
+   *  Default true — matches the mock's `.colhead`. */
+  showColumnHeader?: boolean;
+}
+
+const COLUMN_HEADERS = ['target', 'change', 'for', 'as', 'when'] as const;
+
+/**
+ * Headless activity grid over the unified `SandboxEvent` stream. Folds
+ * events into category bands (Denied / Added / Updated / Removed /
+ * Signed in / …), each band a `target · change · for · lens · when`
+ * column grid grouped under a `label · count · attribution` header.
+ * Denials lead (lead-with-consequence) and are flagged first-class.
+ *
+ * Ships ZERO styling — the host (Pyric Studio) applies the rigid column
+ * grid + band typography via the `data-pyric-*` contract:
+ * - `[data-pyric-ui="activity-grid"]` — the root.
+ * - `[data-pyric-band]` — a band header, with `data-pyric-band-key`,
+ *   `data-pyric-band-count`, `data-pyric-band-denied` (on the denied
+ *   band). Children: `[data-pyric-band-label]`, `[data-pyric-band-n]`,
+ *   `[data-pyric-band-attr]` (omitted when attribution is mixed).
+ * - `[data-pyric-band-rows]` — the row container; with grouping,
+ *   `[data-pyric-band-subgroup]` (+ `data-pyric-subgroup-key`) wraps
+ *   each pivot bucket.
+ * - `[data-pyric-band-more]` — the "N more" overflow stub.
+ * - the `<ActivityGridRow>` contract for each row.
+ */
+export function ActivityGrid({
+  events,
+  digest,
+  options,
+  selectedId,
+  onSelect,
+  maxRowsPerBand,
+  renderBandMore,
+  formatWhen,
+  now,
+  emptyState,
+  className,
+  showColumnHeader = true,
+}: ActivityGridProps): ReactNode {
+  const model: ActivityDigest =
+    digest ?? computeActivityDigest(events ?? [], options ?? {});
+
+  if (model.total === 0) {
+    return (
+      <div
+        className={className}
+        data-pyric-ui="activity-grid"
+        data-pyric-empty=""
+      >
+        {emptyState}
+      </div>
+    );
+  }
+
+  const renderRow = (row: ActivityRow): ReactNode => (
+    <ActivityGridRow
+      key={row.id}
+      row={row}
+      selected={row.id === selectedId}
+      onSelect={onSelect}
+      formatWhen={formatWhen}
+      now={now}
+    />
+  );
+
+  const renderBandBody = (band: ActivityBandWithGroups): ReactNode => {
+    const shown =
+      maxRowsPerBand !== undefined
+        ? band.rows.slice(0, maxRowsPerBand)
+        : band.rows;
+    const hidden = band.count - shown.length;
+
+    // Grouped: render pivot buckets, preserving the band's row order
+    // within each. We re-bucket the *shown* rows so the display clamp
+    // and the pivot compose.
+    let body: ReactNode;
+    if (band.subgroups) {
+      const shownIds = new Set(shown.map((r) => r.id));
+      const buckets = band.subgroups
+        .map((g) => ({
+          ...g,
+          rows: g.rows.filter((r) => shownIds.has(r.id)),
+        }))
+        .filter((g) => g.rows.length > 0);
+      body = buckets.map((g) => (
+        <div
+          key={g.key}
+          data-pyric-band-subgroup=""
+          data-pyric-subgroup-key={g.key}
+          data-pyric-subgroup-count={g.count}
+        >
+          {g.rows.map(renderRow)}
+        </div>
+      ));
+    } else {
+      body = shown.map(renderRow);
+    }
+
+    return (
+      <div data-pyric-band-rows="">
+        {body}
+        {hidden > 0
+          ? renderBandMore
+            ? renderBandMore(band, hidden)
+            : (
+                <div data-pyric-band-more="">
+                  {hidden} more {band.label.toLowerCase()}
+                </div>
+              )
+          : null}
+      </div>
+    );
+  };
+
+  return (
+    <div className={className} data-pyric-ui="activity-grid">
+      {showColumnHeader ? (
+        <div data-pyric-event-colhead="">
+          {COLUMN_HEADERS.map((h) => (
+            <span key={h} data-pyric-event-col={h}>
+              {h}
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      {model.bands.map((band) => (
+        <section
+          key={band.key}
+          data-pyric-band-section=""
+          data-pyric-band-key={band.key}
+        >
+          <header
+            data-pyric-band=""
+            data-pyric-band-key={band.key}
+            data-pyric-band-count={band.count}
+            data-pyric-band-denied={band.key === 'denied' ? '' : undefined}
+          >
+            <span data-pyric-band-label="">{band.label}</span>
+            <span data-pyric-band-n="">{band.count}</span>
+            {band.attribution ? (
+              <span data-pyric-band-attr="">{band.attribution}</span>
+            ) : null}
+          </header>
+          {renderBandBody(band)}
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/events/components/ActivityGridRow.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { ActivityRow } from '../digest.js';
+import { defaultFormatWhen } from './format.js';
+
+export interface ActivityGridRowProps {
+  row: ActivityRow;
+  /** Marks the row as the active selection (`data-pyric-selected`). */
+  selected?: boolean;
+  onSelect?: (row: ActivityRow) => void;
+  /** Override the `when` rendering. Receives `(at, now)`; default is the
+   *  session-relative duration. */
+  formatWhen?: (at: number, now: number) => string;
+  /** The "now" anchor passed to `formatWhen` (and `row.when` is used as
+   *  a fallback when omitted). */
+  now?: number;
+  className?: string;
+}
+
+/**
+ * One activity grid row — the `target · change · for · lens · when`
+ * column contract from `c-result.html`, plus a trailing drill affordance
+ * column. Headless: every cell is a `data-pyric-event-*` span the host
+ * styles into the rigid column grid.
+ *
+ * Styling / data contract:
+ * - `[data-pyric-event-row]` — the row, with `data-pyric-event-band`,
+ *   `data-pyric-event-service`, `data-pyric-event-lens`,
+ *   `data-pyric-event-denied` (present only on denials), and
+ *   `data-pyric-selected` when active.
+ * - `[data-pyric-event-target]` / `-change` / `-for` / `-lens` / `-when`
+ *   — the five columns, in order.
+ */
+export function ActivityGridRow({
+  row,
+  selected,
+  onSelect,
+  formatWhen,
+  now,
+  className,
+}: ActivityGridRowProps): ReactNode {
+  const when = formatWhen
+    ? formatWhen(row.at, now ?? Date.now())
+    : row.when || defaultFormatWhen(row.at, now ?? Date.now());
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect?.(row)}
+      className={className}
+      data-pyric-event-row=""
+      data-pyric-event-band={row.band}
+      data-pyric-event-service={row.service}
+      data-pyric-event-lens={row.authLens.mode}
+      data-pyric-event-actor={row.actor.kind}
+      data-pyric-event-denied={row.denied ? '' : undefined}
+      data-pyric-selected={selected ? '' : undefined}
+    >
+      <span data-pyric-event-target="">{row.target}</span>
+      <span data-pyric-event-change="">{row.change}</span>
+      <span data-pyric-event-for="">{row.for}</span>
+      <span data-pyric-event-lens="">{row.lens}</span>
+      <span data-pyric-event-when="">{when}</span>
+    </button>
+  );
+}

package/src/events/components/ProposedChangeDiff.tsx

@@ -0,0 +1,175 @@
+import { useMemo, type ReactNode } from 'react';
+import { truncateVectorsForDisplay } from '../../firestore/index.js';
+
+/**
+ * One field-level change in a staged proposal. A UI-level diff row: the host
+ * adapts its backend diff (e.g. the sandbox's `Divergence[]`) into these so the
+ * component stays decoupled from any backend type.
+ */
+export interface FieldChange {
+  /** Full document path, e.g. `notes/abc123`. */
+  docPath: string;
+  /** The field that changed. */
+  field: string;
+  before: unknown;
+  after: unknown;
+  /** `added` = new field, `removed` = cleared, `changed` = value differs. */
+  kind: 'added' | 'changed' | 'removed';
+}
+
+/**
+ * An auth user a staged proposal creates (a sign-in account, distinct from
+ * Firestore documents). The host adapts its backend request (e.g. a
+ * `CreateUserRequest`) into this UI-level shape.
+ */
+export interface CreatedAuthUser {
+  uid: string;
+  email?: string;
+  displayName?: string;
+  provider?: string;
+  emailVerified?: boolean;
+}
+
+export interface ProposedChangeDiffProps {
+  changes: FieldChange[];
+  /** Auth users the proposal creates, shown as a leading "auth users" group. */
+  authUsers?: readonly CreatedAuthUser[];
+  className?: string;
+  /** Rendered when there are no changes. Defaults to nothing. */
+  emptyState?: ReactNode;
+  /** Format a value for display. Default: JSON-ish, empty for `undefined`. */
+  formatValue?: (value: unknown) => ReactNode;
+}
+
+interface DocGroup {
+  docPath: string;
+  docId: string;
+  fields: FieldChange[];
+}
+interface CollectionGroup {
+  collection: string;
+  docs: DocGroup[];
+}
+
+function groupChanges(changes: FieldChange[]): CollectionGroup[] {
+  const byCollection = new Map<string, Map<string, FieldChange[]>>();
+  for (const change of changes) {
+    const slash = change.docPath.lastIndexOf('/');
+    const collection = slash > 0 ? change.docPath.slice(0, slash) : change.docPath;
+    let docs = byCollection.get(collection);
+    if (!docs) {
+      docs = new Map();
+      byCollection.set(collection, docs);
+    }
+    let fields = docs.get(change.docPath);
+    if (!fields) {
+      fields = [];
+      docs.set(change.docPath, fields);
+    }
+    fields.push(change);
+  }
+  return [...byCollection.entries()].map(([collection, docs]) => ({
+    collection,
+    docs: [...docs.entries()].map(([docPath, fields]) => ({
+      docPath,
+      docId: docPath.slice(docPath.lastIndexOf('/') + 1),
+      fields,
+    })),
+  }));
+}
+
+/** A one-line account summary: "alice@x.dev · Alice · verified". */
+function formatAuthUser(u: CreatedAuthUser): string {
+  const parts = [u.email, u.displayName, u.provider, u.emailVerified ? 'verified' : null].filter(
+    Boolean,
+  );
+  return parts.length ? (parts as string[]).join(' · ') : 'new account';
+}
+
+function defaultFormatValue(value: unknown): string {
+  if (value === undefined) return '';
+  if (typeof value === 'string') return JSON.stringify(value);
+  try {
+    // Truncate vectors so a real embedding never dumps its full array here.
+    return JSON.stringify(truncateVectorsForDisplay(value));
+  } catch {
+    return String(value);
+  }
+}
+
+/**
+ * Headless renderer for a staged change: the documents a proposal touches, with
+ * per-field before/after. Grouped by collection. Ships zero styling; the host
+ * styles the `data-pyric-*` contract (`proposed-change-diff` /
+ * `data-pyric-change-*`). The c-review diff grid is this, styled.
+ */
+export function ProposedChangeDiff({
+  changes,
+  authUsers = [],
+  className,
+  emptyState = null,
+  formatValue = defaultFormatValue,
+}: ProposedChangeDiffProps) {
+  const groups = useMemo(() => groupChanges(changes), [changes]);
+  if (groups.length === 0 && authUsers.length === 0) return <>{emptyState}</>;
+
+  return (
+    <div className={className} data-pyric-ui="proposed-change-diff">
+      {authUsers.length > 0 ? (
+        <section data-pyric-change-group data-pyric-change-authgroup data-pyric-change-collection="auth users">
+          <header data-pyric-change-grouphead>
+            <span data-pyric-change-collname>auth users</span>
+            <span data-pyric-change-count>{authUsers.length}</span>
+          </header>
+          <ul data-pyric-change-docs>
+            {authUsers.map((user) => (
+              <li key={user.uid} data-pyric-change-doc data-pyric-change-authuser>
+                <span data-pyric-change-docid>{user.uid}</span>
+                <span data-pyric-change-authmeta>{formatAuthUser(user)}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+      {groups.map((group) => (
+        <section
+          key={group.collection}
+          data-pyric-change-group
+          data-pyric-change-collection={group.collection}
+        >
+          <header data-pyric-change-grouphead>
+            <span data-pyric-change-collname>{group.collection}</span>
+            <span data-pyric-change-count>{group.docs.length}</span>
+          </header>
+          <ul data-pyric-change-docs>
+            {group.docs.map((doc) => (
+              <li key={doc.docPath} data-pyric-change-doc>
+                <span data-pyric-change-docid>{doc.docId}</span>
+                <ul data-pyric-change-fields>
+                  {doc.fields.map((field) => (
+                    <li
+                      key={field.field}
+                      data-pyric-change-field
+                      data-pyric-change-kind={field.kind}
+                    >
+                      <span data-pyric-change-key>{field.field}</span>
+                      {field.kind !== 'added' ? (
+                        <span data-pyric-change-before>{formatValue(field.before)}</span>
+                      ) : null}
+                      <span data-pyric-change-arrow aria-hidden>
+                        {'→'}
+                      </span>
+                      {field.kind !== 'removed' ? (
+                        <span data-pyric-change-after>{formatValue(field.after)}</span>
+                      ) : null}
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/events/components/format.ts

@@ -0,0 +1,21 @@
+/**
+ * Default `when`-column formatter: a session-relative duration
+ * (`now` / `12s` / `3m` / `1h`), matching the mock's `c-when` strings.
+ * The grid is session-scoped (see design-ideation "FRAME CORRECTION")
+ * so anchors are relative, never absolute calendar dates.
+ *
+ * Override via `<ActivityGrid formatWhen={...} />` when the host has a
+ * better clock anchor (e.g. a ticking "session now").
+ */
+export function defaultFormatWhen(at: number, now: number = Date.now()): string {
+  const deltaMs = Math.max(0, now - at);
+  const s = Math.floor(deltaMs / 1000);
+  if (s < 1) return 'now';
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h`;
+  const d = Math.floor(h / 24);
+  return `${d}d`;
+}

package/src/events/components/index.ts

@@ -0,0 +1,17 @@
+export { ActivityGrid, type ActivityGridProps } from './ActivityGrid.js';
+export {
+  ActivityGridRow,
+  type ActivityGridRowProps,
+} from './ActivityGridRow.js';
+export {
+  ActivityActionItems,
+  type ActivityActionItemsProps,
+  type ActivityActionItem,
+} from './ActivityActionItems.js';
+export {
+  ProposedChangeDiff,
+  type ProposedChangeDiffProps,
+  type FieldChange,
+  type CreatedAuthUser,
+} from './ProposedChangeDiff.js';
+export { defaultFormatWhen } from './format.js';