@xemahq/ui-kernel 0.1.6 → 0.1.8

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>
+  );
+}

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

@@ -0,0 +1,118 @@
+/**
+ * Sticky CAPABILITY-approval bar (HANDOFF §6) — pinned above the composer
+ * so a pending capability approval is always actionable without scrolling
+ * back to the inline card.
+ *
+ * NOTE on naming: this is DISTINCT from the clarification-gate
+ * `StickyApprovalBar` (`src/components/clarification/StickyApprovalBar.tsx`),
+ * which approves a clarification CONTRACT (attempt counters, reject
+ * reasons, override rationale). This bar approves a suspended CAPABILITY
+ * CALL (risk tier + biome + Review/Deny/Approve). The two concerns are
+ * deliberately separate components so neither regresses the other.
+ *
+ * Title + RiskPill + biome + Review / Deny / Approve. The bar surface is
+ * tinted with the risk accent; critical/high force the risk colour on the
+ * approve button.
+ */
+import {
+  ApprovalDecision,
+  isExplicitApprovalTier,
+  type ApprovalRequest,
+} from './approval-model';
+import { ApprovalButton } from './ApprovalButton';
+import { RISK_ACCENT } from './risk-accent';
+import { RiskPill } from '../primitives/RiskPill';
+
+import type { ApprovalIcons } from './approval-icons';
+import type { ReactElement } from 'react';
+
+export interface CapabilityApprovalStickyBarProps {
+  readonly request: ApprovalRequest;
+  readonly icons: Pick<ApprovalIcons, 'shield' | 'check'>;
+  readonly onResolve: (
+    decision: ApprovalDecision,
+    request: ApprovalRequest,
+  ) => void;
+  /** "Review" scrolls/opens the inline card; optional. */
+  readonly onReview?: () => void;
+  /** Portal/brand accent for the (non-critical) approve button. */
+  readonly accent?: string;
+}
+
+export function CapabilityApprovalStickyBar({
+  request,
+  icons,
+  onResolve,
+  onReview,
+  accent = 'hsl(var(--primary))',
+}: CapabilityApprovalStickyBarProps): ReactElement {
+  const r = RISK_ACCENT[request.riskTier];
+  const explicit = isExplicitApprovalTier(request.riskTier);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 11,
+        padding: '9px 13px',
+        borderRadius: 11,
+        border: `1px solid ${r.bd}`,
+        background: r.bg,
+        marginBottom: 9,
+      }}
+    >
+      <span style={{ color: r.fg, flexShrink: 0, display: 'inline-flex' }}>
+        {icons.shield(17)}
+      </span>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+          <span
+            style={{
+              fontSize: 13,
+              fontWeight: 600,
+              color: 'hsl(var(--ink))',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {request.title}
+          </span>
+          <RiskPill tier={request.riskTier} size="xs" />
+        </div>
+        <div
+          style={{
+            fontSize: 11.5,
+            color: 'hsl(var(--ink-3))',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {request.biomeName} · awaiting your approval
+        </div>
+      </div>
+      {onReview && (
+        <ApprovalButton variant="ghost" size="sm" onClick={onReview}>
+          Review
+        </ApprovalButton>
+      )}
+      <ApprovalButton
+        variant="ghost"
+        size="sm"
+        onClick={() => onResolve(ApprovalDecision.Denied, request)}
+      >
+        Deny
+      </ApprovalButton>
+      <ApprovalButton
+        variant="primary"
+        size="sm"
+        icon={icons.check(13)}
+        accent={explicit ? r.fg : accent}
+        onClick={() => onResolve(ApprovalDecision.Approved, request)}
+      >
+        Approve
+      </ApprovalButton>
+    </div>
+  );
+}

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

@@ -0,0 +1,111 @@
+/**
+ * Obligation chip + quorum dots (HANDOFF §6).
+ *
+ * `Obligation` renders one obligation as a chip: host-supplied icon (via
+ * `renderIcon` from the stable `ObligationIcon` key) + label + optional
+ * pre-formatted mono value. An obligation whose `kind` is outside the
+ * known `PolicyObligationKind` map fails SAFE to a visible "unknown"
+ * chip (shield glyph + the raw kind) — never a silent drop.
+ *
+ * `QuorumDots` renders `have/need` approver dots (filled = collected).
+ */
+import { OBLIGATION_DISPLAY, ObligationIcon } from './obligation-display';
+
+import type { ApprovalObligation } from './approval-model';
+import type { ReactElement, ReactNode } from 'react';
+
+export interface ObligationProps {
+  readonly obligation: ApprovalObligation;
+  /** Host icon renderer for a stable `ObligationIcon` key (kit is icon-agnostic). */
+  readonly renderIcon: (key: ObligationIcon, size: number) => ReactNode;
+}
+
+export function Obligation({
+  obligation,
+  renderIcon,
+}: ObligationProps): ReactElement {
+  // Known kinds resolve to a label + icon key; an unknown discriminant
+  // (a not-yet-mapped kernel kind) renders a visible fallback rather than
+  // disappearing — fail-fast, but on screen.
+  const meta = OBLIGATION_DISPLAY[obligation.kind];
+  const iconKey = meta?.iconKey ?? ObligationIcon.ShieldCheck;
+  const label = meta?.label ?? `unknown: ${obligation.kind}`;
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 5,
+        padding: '3px 8px',
+        borderRadius: 6,
+        whiteSpace: 'nowrap',
+        background: 'hsl(var(--muted))',
+        border: '1px solid hsl(var(--rule))',
+        fontSize: 11.5,
+        color: 'hsl(var(--ink-2))',
+      }}
+    >
+      <span style={{ color: 'hsl(var(--ink-3))', display: 'inline-flex' }}>
+        {renderIcon(iconKey, 12)}
+      </span>
+      <span style={{ color: 'hsl(var(--ink-3))' }}>{label}</span>
+      {obligation.value && (
+        <span
+          className="mono"
+          style={{ fontSize: 11, color: 'hsl(var(--ink))', fontWeight: 500 }}
+        >
+          {obligation.value}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export interface QuorumDotsProps {
+  readonly have: number;
+  readonly need: number;
+  /** Host icon for the leading "users" glyph. */
+  readonly usersIcon?: ReactNode;
+}
+
+export function QuorumDots({
+  have,
+  need,
+  usersIcon,
+}: QuorumDotsProps): ReactElement {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        fontSize: 12,
+        color: 'hsl(var(--ink-3))',
+      }}
+    >
+      {usersIcon}
+      <span style={{ display: 'inline-flex', gap: 3 }}>
+        {Array.from({ length: need }).map((_, i) => {
+          const filled = i < have;
+          return (
+            <span
+              key={`quorum-${i}`}
+              style={{
+                width: 7,
+                height: 7,
+                borderRadius: '50%',
+                background: filled ? 'hsl(var(--success))' : 'transparent',
+                border: `1.5px solid ${
+                  filled ? 'hsl(var(--success))' : 'hsl(var(--rule-2))'
+                }`,
+              }}
+            />
+          );
+        })}
+      </span>
+      <span className="mono" style={{ fontSize: 11 }}>
+        {have}/{need} approvers
+      </span>
+    </span>
+  );
+}