@xemahq/ui-kernel 0.1.6 → 0.1.7

package/src/session-kit/approvals/ApprovalCard.tsx

@@ -0,0 +1,336 @@
+/**
+ * The GENERIC approval frame (HANDOFF §6) — identical platform-wide.
+ *
+ * Header: "Approval required" + RiskPill (reused from the kit) + mono
+ * capability ref + serif title + summary. Then the biome-supplied
+ * `ScopedBody`. Then obligations chips (closed `PolicyObligationKind`
+ * taxonomy), approver role, and quorum dots. Actions: Deny / Allow once /
+ * Approve — low risk gets "Approve & remember"; high & critical are
+ * explicit Approve only (no allow-once-remember). The accent rail uses the
+ * SAME risk→colour mapping as the pill.
+ *
+ * Resolved state collapses to a compact confirmation row; a
+ * quorum-approved request reads "approved · waiting on N more approver".
+ *
+ * Controlled OR uncontrolled: pass `decision` to control the resolved
+ * state from the host (the real flow), or omit it and the card tracks its
+ * own optimistic resolved state. `onResolve(decision, request)` always
+ * fires.
+ */
+import { useState, type ReactElement } from 'react';
+
+import {
+  ApprovalDecision,
+  isExplicitApprovalTier,
+  isQuorum,
+  type ApprovalRequest,
+} from './approval-model';
+import { ApprovalButton } from './ApprovalButton';
+import { Obligation, QuorumDots } from './Obligation';
+import { RISK_ACCENT } from './risk-accent';
+import { ScopedBody } from './ScopedBody';
+import { RiskPill } from '../primitives/RiskPill';
+
+import type { ApprovalIcons } from './approval-icons';
+
+export interface ApprovalCardProps {
+  readonly request: ApprovalRequest;
+  readonly icons: ApprovalIcons;
+  /** Resolution callback. Fires before/after the host updates `decision`. */
+  readonly onResolve: (
+    decision: ApprovalDecision,
+    request: ApprovalRequest,
+  ) => void;
+  /**
+   * Controlled resolved state. Omit for uncontrolled (the card collapses
+   * optimistically on click). The real host flow passes the server-known
+   * decision so the collapse reflects committed state.
+   */
+  readonly decision?: ApprovalDecision | null;
+  /** Portal/brand accent for the (non-critical) primary approve button. */
+  readonly accent?: string;
+}
+
+export function ApprovalCard({
+  request,
+  icons,
+  onResolve,
+  decision,
+  accent = 'hsl(var(--primary))',
+}: ApprovalCardProps): ReactElement {
+  const [localDecision, setLocalDecision] = useState<ApprovalDecision | null>(
+    null,
+  );
+  const resolved = decision ?? localDecision;
+  const r = RISK_ACCENT[request.riskTier];
+  const explicit = isExplicitApprovalTier(request.riskTier);
+  const quorum = isQuorum(request);
+  const approveLabel = resolveApproveLabel(request, quorum, explicit);
+
+  function resolve(d: ApprovalDecision): void {
+    if (decision === undefined) setLocalDecision(d);
+    onResolve(d, request);
+  }
+
+  if (resolved) {
+    const approved = resolved === ApprovalDecision.Approved;
+    const remaining =
+      (request.requireApproverCount ?? 1) - ((request.approvalsIn ?? 0) + 1);
+    const approvedLabel =
+      quorum && remaining > 0
+        ? `approved · waiting on ${remaining} more approver${remaining === 1 ? '' : 's'}`
+        : 'approved, capability resumed';
+    return (
+      <div
+        style={{
+          marginTop: 9,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          padding: '11px 14px',
+          borderRadius: 11,
+          border: `1px solid ${
+            approved ? 'hsl(var(--success) / 0.3)' : 'hsl(var(--rule))'
+          }`,
+          background: approved
+            ? 'hsl(var(--success) / 0.06)'
+            : 'hsl(var(--muted))',
+        }}
+      >
+        <span
+          style={{
+            color: approved ? 'hsl(var(--success))' : 'hsl(var(--ink-3))',
+            display: 'inline-flex',
+          }}
+        >
+          {approved ? icons.approved(17) : icons.denied(17)}
+        </span>
+        <span style={{ fontSize: 13, color: 'hsl(var(--ink-2))' }}>
+          <strong style={{ color: 'hsl(var(--ink))', fontWeight: 600 }}>
+            {request.title}
+          </strong>{' '}
+          — {approved ? approvedLabel : 'denied'}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        marginTop: 9,
+        borderRadius: 12,
+        overflow: 'hidden',
+        border: `1px solid ${explicit ? r.bd : 'hsl(var(--rule-2))'}`,
+        boxShadow: 'var(--shadow-2)',
+        background: 'hsl(var(--paper-elev))',
+      }}
+    >
+      <div style={{ display: 'flex' }}>
+        {/* accent rail — same risk→colour mapping as the pill */}
+        <div
+          style={{
+            width: 3,
+            flexShrink: 0,
+            background: explicit ? r.fg : 'hsl(var(--rule-2))',
+          }}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          {/* header — generic */}
+          <div
+            style={{
+              padding: '11px 14px 9px',
+              borderBottom: '1px solid hsl(var(--rule))',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                marginBottom: 6,
+              }}
+            >
+              <span
+                style={{
+                  color: explicit ? r.fg : 'hsl(var(--primary))',
+                  display: 'inline-flex',
+                }}
+              >
+                {icons.shield(16)}
+              </span>
+              <span
+                className="cap"
+                style={{ color: 'hsl(var(--ink-3))', letterSpacing: '0.1em' }}
+              >
+                Approval required
+              </span>
+              <RiskPill tier={request.riskTier} size="xs" />
+              <span style={{ flex: 1 }} />
+              <span
+                className="mono"
+                style={{
+                  fontSize: 10.5,
+                  color: 'hsl(var(--ink-4))',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 4,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  maxWidth: '50%',
+                }}
+              >
+                {icons.capability(11)}
+                {request.capability}
+              </span>
+            </div>
+            <div
+              className="serif"
+              style={{
+                fontSize: 15,
+                fontWeight: 600,
+                color: 'hsl(var(--ink))',
+                lineHeight: 1.3,
+              }}
+            >
+              {request.title}
+            </div>
+            <div
+              style={{
+                fontSize: 12.5,
+                color: 'hsl(var(--ink-3))',
+                marginTop: 2,
+              }}
+            >
+              {request.summary}
+            </div>
+          </div>
+
+          {/* SCOPED biome body */}
+          <div
+            style={{ padding: '10px 14px', background: 'hsl(var(--paper) / 0.5)' }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                marginBottom: 8,
+              }}
+            >
+              <span
+                className="cap"
+                style={{ fontSize: 9.5, color: 'hsl(var(--ink-4))' }}
+              >
+                Details from {request.biomeName}
+              </span>
+              <span
+                style={{ flex: 1, height: 1, background: 'hsl(var(--rule))' }}
+              />
+            </div>
+            <ScopedBody scope={request.scope} renderIcon={icons.scope} />
+          </div>
+
+          {/* obligations + approver requirement — generic */}
+          <div
+            style={{
+              padding: '10px 14px',
+              borderTop: '1px solid hsl(var(--rule))',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 9,
+            }}
+          >
+            {request.obligations && request.obligations.length > 0 && (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                {request.obligations.map((o) => (
+                  <Obligation
+                    key={o.kind}
+                    obligation={o}
+                    renderIcon={icons.obligation}
+                  />
+                ))}
+              </div>
+            )}
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 10,
+                flexWrap: 'wrap',
+              }}
+            >
+              {request.requireRole && (
+                <span
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 5,
+                    fontSize: 12,
+                    color: 'hsl(var(--ink-3))',
+                  }}
+                >
+                  {icons.user(13)}approver role{' '}
+                  <span className="mono" style={{ color: 'hsl(var(--ink-2))' }}>
+                    {request.requireRole}
+                  </span>
+                </span>
+              )}
+              {quorum && (
+                <QuorumDots
+                  have={request.approvalsIn ?? 0}
+                  need={request.requireApproverCount ?? 1}
+                  usersIcon={icons.users(13)}
+                />
+              )}
+              <span style={{ flex: 1 }} />
+              <ApprovalButton
+                variant="ghost"
+                size="sm"
+                onClick={() => resolve(ApprovalDecision.Denied)}
+              >
+                Deny
+              </ApprovalButton>
+              {!explicit && (
+                <ApprovalButton
+                  variant="soft"
+                  size="sm"
+                  icon={icons.check(13)}
+                  onClick={() => resolve(ApprovalDecision.Approved)}
+                >
+                  Allow once
+                </ApprovalButton>
+              )}
+              <ApprovalButton
+                variant="primary"
+                size="sm"
+                icon={icons.shield(13)}
+                accent={explicit ? r.fg : accent}
+                onClick={() => resolve(ApprovalDecision.Approved)}
+              >
+                {approveLabel}
+              </ApprovalButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The primary-button label: a quorum step ("Approve (1 of 2)"), a plain
+ * "Approve" for explicit (high/critical) tiers, or "Approve & remember"
+ * for low/medium where allow-once-remember is offered.
+ */
+function resolveApproveLabel(
+  request: ApprovalRequest,
+  quorum: boolean,
+  explicit: boolean,
+): string {
+  if (quorum) {
+    return `Approve (${(request.approvalsIn ?? 0) + 1} of ${request.requireApproverCount})`;
+  }
+  return explicit ? 'Approve' : 'Approve & remember';
+}

package/src/session-kit/approvals/ApprovalsCenter.tsx

@@ -0,0 +1,327 @@
+/**
+ * Approvals Center body (HANDOFF §6) — the cross-portal batch-review list.
+ *
+ * This is the GENERIC, prop-driven body (toolbar + rows + empty state). It
+ * does NOT own the drawer chrome: the host wraps it in its own `Sheet`
+ * (the host carries the overlay/focus-trap/portal primitive). That keeps
+ * the kit free of any host UI dependency while the batching/selection
+ * logic stays generic and reusable.
+ *
+ * Batches approvals ACROSS all portals/sessions: each row carries its
+ * portal + biome + quorum and an "Open session" affordance. "Select
+ * low-risk" selects every low/medium item; bulk "Approve N" resolves the
+ * selection. The row model (`ApprovalCenterItem`) already carries
+ * portalId/name/accent so Pillar 4 can group by portal without a reshape.
+ */
+import { CapabilityRiskTier } from '@xemahq/kernel-contracts/capability';
+import { useCallback, useState, type ReactElement } from 'react';
+
+import { ApprovalDecision, type ApprovalCenterItem } from './approval-model';
+import { ApprovalButton } from './ApprovalButton';
+import { RiskPill } from '../primitives/RiskPill';
+
+import type { ApprovalIcons } from './approval-icons';
+
+export interface ApprovalsCenterProps {
+  readonly items: readonly ApprovalCenterItem[];
+  readonly icons: Pick<ApprovalIcons, 'check' | 'approved'>;
+  /** Resolve a single item (also used by the bulk action per-item). */
+  readonly onResolve: (
+    decision: ApprovalDecision,
+    item: ApprovalCenterItem,
+  ) => void;
+  /** "Open session" — host navigates to the suspended capability's session. */
+  readonly onOpen?: (item: ApprovalCenterItem) => void;
+}
+
+const LOW_RISK: ReadonlySet<CapabilityRiskTier> = new Set([
+  CapabilityRiskTier.Low,
+  CapabilityRiskTier.Medium,
+]);
+
+export function ApprovalsCenter({
+  items,
+  icons,
+  onResolve,
+  onOpen,
+}: ApprovalsCenterProps): ReactElement {
+  const [selected, setSelected] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  const toggle = useCallback((id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const selectLowRisk = useCallback(() => {
+    setSelected(
+      new Set(
+        items
+          .filter((it) => LOW_RISK.has(it.request.riskTier))
+          .map((it) => it.id),
+      ),
+    );
+  }, [items]);
+
+  const approveSelected = useCallback(() => {
+    for (const id of selected) {
+      const it = items.find((x) => x.id === id);
+      if (it) onResolve(ApprovalDecision.Approved, it);
+    }
+    setSelected(new Set());
+  }, [selected, items, onResolve]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
+      }}
+    >
+      {/* selection toolbar */}
+      <div
+        style={{
+          padding: '9px 16px',
+          borderBottom: '1px solid hsl(var(--rule))',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 9,
+        }}
+      >
+        <span style={{ fontSize: 12, color: 'hsl(var(--ink-3))' }}>
+          {selected.size} selected
+        </span>
+        <span style={{ flex: 1 }} />
+        <ApprovalButton
+          variant="ghost"
+          size="xs"
+          onClick={selectLowRisk}
+          disabled={items.length === 0}
+        >
+          Select low-risk
+        </ApprovalButton>
+        <ApprovalButton
+          variant="primary"
+          size="xs"
+          icon={icons.check(12)}
+          disabled={selected.size === 0}
+          onClick={approveSelected}
+        >
+          Approve {selected.size || ''}
+        </ApprovalButton>
+      </div>
+
+      {/* rows */}
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          overflowY: 'auto',
+          padding: 12,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 9,
+        }}
+      >
+        {items.length === 0 ? (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '48px 0',
+              color: 'hsl(var(--ink-3))',
+            }}
+          >
+            <span
+              style={{
+                color: 'hsl(var(--success))',
+                display: 'inline-flex',
+                marginBottom: 10,
+              }}
+            >
+              {icons.approved(26)}
+            </span>
+            <div style={{ fontSize: 13.5 }}>Nothing waiting on you.</div>
+          </div>
+        ) : (
+          items.map((it) => (
+            <ApprovalRow
+              key={it.id}
+              item={it}
+              checked={selected.has(it.id)}
+              onToggle={() => toggle(it.id)}
+              onResolve={onResolve}
+              {...(onOpen ? { onOpen } : {})}
+              icons={icons}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ApprovalRowProps {
+  readonly item: ApprovalCenterItem;
+  readonly checked: boolean;
+  readonly onToggle: () => void;
+  readonly onResolve: (
+    decision: ApprovalDecision,
+    item: ApprovalCenterItem,
+  ) => void;
+  readonly onOpen?: (item: ApprovalCenterItem) => void;
+  readonly icons: Pick<ApprovalIcons, 'check'>;
+}
+
+function ApprovalRow({
+  item,
+  checked,
+  onToggle,
+  onResolve,
+  onOpen,
+  icons,
+}: ApprovalRowProps): ReactElement {
+  const { request } = item;
+  const quorum = (request.requireApproverCount ?? 1) > 1;
+  return (
+    <div
+      style={{
+        border: `1px solid ${
+          checked ? 'hsl(var(--primary) / 0.4)' : 'hsl(var(--rule))'
+        }`,
+        borderRadius: 10,
+        background: 'hsl(var(--paper-elev))',
+        boxShadow: checked
+          ? '0 0 0 1px hsl(var(--primary) / 0.2)'
+          : 'var(--shadow-2)',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ display: 'flex', gap: 10, padding: '11px 12px' }}>
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-pressed={checked}
+          aria-label={checked ? 'Deselect' : 'Select'}
+          style={{
+            width: 18,
+            height: 18,
+            borderRadius: 5,
+            marginTop: 1,
+            flexShrink: 0,
+            display: 'grid',
+            placeItems: 'center',
+            border: checked ? 'none' : '1.5px solid hsl(var(--rule-2))',
+            background: checked ? 'hsl(var(--primary))' : 'transparent',
+            color: '#fff',
+            cursor: 'pointer',
+          }}
+        >
+          {checked && icons.check(12)}
+        </button>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 7,
+              marginBottom: 3,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 13.5,
+                fontWeight: 600,
+                color: 'hsl(var(--ink))',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                minWidth: 0,
+              }}
+            >
+              {request.title}
+            </span>
+            <RiskPill tier={request.riskTier} size="xs" />
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 7,
+              fontSize: 11.5,
+              color: 'hsl(var(--ink-3))',
+              flexWrap: 'wrap',
+            }}
+          >
+            {(item.portalName || item.portalAccentVar) && (
+              <span
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 4,
+                }}
+              >
+                {item.portalAccentVar && (
+                  <span
+                    style={{
+                      width: 7,
+                      height: 7,
+                      borderRadius: 2,
+                      background: `hsl(${item.portalAccentVar})`,
+                    }}
+                  />
+                )}
+                {item.portalName}
+              </span>
+            )}
+            {item.portalName && <span>·</span>}
+            <span>{request.biomeName}</span>
+            {quorum && (
+              <>
+                <span>·</span>
+                <span className="mono">
+                  {request.approvalsIn ?? 0}/{request.requireApproverCount}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          gap: 7,
+          padding: '0 12px 11px',
+          justifyContent: 'flex-end',
+        }}
+      >
+        {onOpen && (
+          <ApprovalButton variant="ghost" size="xs" onClick={() => onOpen(item)}>
+            Open session
+          </ApprovalButton>
+        )}
+        <ApprovalButton
+          variant="ghost"
+          size="xs"
+          onClick={() => onResolve(ApprovalDecision.Denied, item)}
+        >
+          Deny
+        </ApprovalButton>
+        <ApprovalButton
+          variant="soft"
+          size="xs"
+          icon={icons.check(12)}
+          onClick={() => onResolve(ApprovalDecision.Approved, item)}
+        >
+          Approve
+        </ApprovalButton>
+      </div>
+    </div>
+  );
+}