@xemahq/ui-kernel 0.1.5 → 0.1.7

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

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

@@ -0,0 +1,392 @@
+/**
+ * Scoped approval bodies (HANDOFF §6) — the biome-supplied typed detail
+ * that renders UNDER the generic frame.
+ *
+ * `ScopedBody` is an EXHAUSTIVE switch over `ApprovalScopeKind`. A scope
+ * whose `kind` is outside the closed set fails SAFE to a visible
+ * "unknown scope" placeholder (it surfaces the raw kind) rather than
+ * silently dropping the body — the same fail-fast-but-visible contract as
+ * the unknown-obligation and unknown-chat-widget paths.
+ *
+ * Icon-agnostic: bodies that need a glyph take a `renderIcon` mapping a
+ * stable `ScopeIcon` key to a host icon node.
+ */
+import {
+  ApprovalScopeKind,
+  type ApprovalScope,
+  type DeployScope,
+  type FilesScope,
+  type PaymentScope,
+  type SlackScope,
+  type SqlScope,
+} from './approval-model';
+import { ScopeIcon, type ScopeIconRenderer } from './scope-icons';
+
+import type { ReactElement, ReactNode } from 'react';
+
+export interface ScopedBodyProps {
+  readonly scope: ApprovalScope;
+  readonly renderIcon: ScopeIconRenderer;
+}
+
+export function ScopedBody({
+  scope,
+  renderIcon,
+}: ScopedBodyProps): ReactElement {
+  switch (scope.kind) {
+    case ApprovalScopeKind.Payment:
+      return <PaymentBody s={scope} />;
+    case ApprovalScopeKind.Sql:
+      return <SqlBody s={scope} renderIcon={renderIcon} />;
+    case ApprovalScopeKind.Slack:
+      return <SlackBody s={scope} renderIcon={renderIcon} />;
+    case ApprovalScopeKind.Deploy:
+      return <DeployBody s={scope} renderIcon={renderIcon} />;
+    case ApprovalScopeKind.Files:
+      return <FilesBody s={scope} renderIcon={renderIcon} />;
+    default:
+      return <UnknownScopeBody scope={scope} />;
+  }
+}
+
+/** Visible fallback for a scope kind the host does not (yet) understand. */
+function UnknownScopeBody({
+  scope,
+}: Readonly<{ scope: { readonly kind: string } }>): ReactElement {
+  return (
+    <div
+      style={{
+        padding: '8px 11px',
+        borderRadius: 7,
+        border: '1px dashed hsl(var(--rule-2))',
+        background: 'hsl(var(--muted))',
+        fontSize: 12,
+        color: 'hsl(var(--ink-3))',
+      }}
+    >
+      Unknown approval detail{' '}
+      <span className="mono" style={{ color: 'hsl(var(--ink-2))' }}>
+        {scope.kind}
+      </span>{' '}
+      — this biome ships a scope kind this host build cannot render. Review
+      the request before deciding.
+    </div>
+  );
+}
+
+function KV({
+  k,
+  v,
+  mono,
+  strong,
+}: Readonly<{
+  k: string;
+  v: ReactNode;
+  mono?: boolean;
+  strong?: boolean;
+}>): ReactElement {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 12,
+        padding: '3px 0',
+      }}
+    >
+      <span
+        style={{ fontSize: 12, color: 'hsl(var(--ink-3))', whiteSpace: 'nowrap' }}
+      >
+        {k}
+      </span>
+      <span
+        className={mono ? 'mono' : undefined}
+        style={{
+          fontSize: mono ? 12 : 12.5,
+          color: 'hsl(var(--ink))',
+          fontWeight: strong ? 600 : 450,
+          textAlign: 'right',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {v}
+      </span>
+    </div>
+  );
+}
+
+function PaymentBody({ s }: Readonly<{ s: PaymentScope }>): ReactElement {
+  return (
+    <div>
+      <div style={{ marginBottom: 9 }}>
+        <div
+          className="serif"
+          style={{
+            fontSize: 27,
+            fontWeight: 600,
+            color: 'hsl(var(--ink))',
+            lineHeight: 1.05,
+          }}
+        >
+          {s.amount}
+        </div>
+        <div
+          style={{ fontSize: 12.5, color: 'hsl(var(--ink-3))', marginTop: 2 }}
+        >
+          to {s.payee}
+        </div>
+      </div>
+      <div style={{ borderTop: '1px solid hsl(var(--rule))', paddingTop: 4 }}>
+        <KV k="Method" v={s.method} />
+        <KV k="Account" v={s.account} mono />
+        {s.memo && <KV k="Memo" v={s.memo} />}
+      </div>
+    </div>
+  );
+}
+
+function SqlBody({
+  s,
+  renderIcon,
+}: Readonly<{ s: SqlScope; renderIcon: ScopeIconRenderer }>): ReactElement {
+  return (
+    <div>
+      <div
+        style={{ display: 'flex', gap: 8, marginBottom: 7, flexWrap: 'wrap' }}
+      >
+        <Tag icon={renderIcon(ScopeIcon.Database, 12)} t={s.dialect} />
+        <Tag icon={renderIcon(ScopeIcon.Layers, 12)} t={s.table} />
+        <Tag
+          icon={renderIcon(ScopeIcon.Alert, 12)}
+          t={`${s.rowsAffected} rows`}
+          warn
+        />
+      </div>
+      <pre
+        className="mono"
+        style={{
+          margin: 0,
+          padding: '10px 12px',
+          background: 'hsl(var(--ink) / 0.04)',
+          border: '1px solid hsl(var(--rule))',
+          borderRadius: 8,
+          fontSize: 12,
+          lineHeight: 1.6,
+          color: 'hsl(var(--ink))',
+          overflowX: 'auto',
+          whiteSpace: 'pre',
+        }}
+      >
+        {s.query}
+      </pre>
+    </div>
+  );
+}
+
+function SlackBody({
+  s,
+  renderIcon,
+}: Readonly<{ s: SlackScope; renderIcon: ScopeIconRenderer }>): ReactElement {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          marginBottom: 7,
+          fontSize: 12.5,
+        }}
+      >
+        <span style={{ color: 'hsl(var(--ink-3))', display: 'inline-flex' }}>
+          {renderIcon(ScopeIcon.Send, 13)}
+        </span>
+        <span
+          className="mono"
+          style={{ color: 'hsl(var(--ink))', fontWeight: 600 }}
+        >
+          {s.channel}
+        </span>
+        <span style={{ color: 'hsl(var(--ink-4))' }}>
+          · {s.workspace} · as {s.as}
+        </span>
+      </div>
+      <div
+        style={{
+          padding: '10px 12px',
+          background: 'hsl(var(--paper-elev))',
+          border: '1px solid hsl(var(--rule))',
+          borderRadius: 8,
+          fontSize: 13,
+          lineHeight: 1.55,
+          color: 'hsl(var(--ink-2))',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {s.message}
+      </div>
+    </div>
+  );
+}
+
+function DeployBody({
+  s,
+  renderIcon,
+}: Readonly<{ s: DeployScope; renderIcon: ScopeIconRenderer }>): ReactElement {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          marginBottom: 8,
+        }}
+      >
+        <span
+          className="mono serif"
+          style={{ fontSize: 18, fontWeight: 600, color: 'hsl(var(--ink))' }}
+        >
+          {s.version}
+        </span>
+        <span style={{ color: 'hsl(var(--ink-4))', display: 'inline-flex' }}>
+          {renderIcon(ScopeIcon.ArrowRight, 14)}
+        </span>
+        <Tag icon={renderIcon(ScopeIcon.Globe, 12)} t={s.cluster} warn />
+      </div>
+      <div style={{ display: 'flex', gap: 14, marginBottom: 8 }}>
+        <Stat2 n={s.services} l="services" />
+        <Stat2 n={s.migrations} l="migrations" warn />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+        {s.changelog.map((c) => (
+          <div
+            key={c}
+            style={{
+              display: 'flex',
+              gap: 8,
+              fontSize: 12,
+              color: 'hsl(var(--ink-2))',
+            }}
+          >
+            <span
+              style={{
+                marginTop: 7,
+                width: 3,
+                height: 3,
+                borderRadius: '50%',
+                background: 'hsl(var(--ink-4))',
+                flexShrink: 0,
+              }}
+            />
+            <span className="mono" style={{ fontSize: 11.5 }}>
+              {c}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FilesBody({
+  s,
+  renderIcon,
+}: Readonly<{ s: FilesScope; renderIcon: ScopeIconRenderer }>): ReactElement {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+      {s.files.map((f) => (
+        <div
+          key={f.path}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 9,
+            padding: '5px 9px',
+            background: 'hsl(var(--paper-elev))',
+            border: '1px solid hsl(var(--rule))',
+            borderRadius: 7,
+          }}
+        >
+          <span style={{ color: 'hsl(var(--warning))', display: 'inline-flex' }}>
+            {renderIcon(ScopeIcon.FileEdit, 13)}
+          </span>
+          <span
+            className="mono"
+            style={{
+              fontSize: 12,
+              color: 'hsl(var(--ink))',
+              flex: 1,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {f.path}
+          </span>
+          <span
+            className="mono"
+            style={{ fontSize: 11, color: 'hsl(var(--success))' }}
+          >
+            +{f.add}
+          </span>
+          <span
+            className="mono"
+            style={{ fontSize: 11, color: 'hsl(var(--danger))' }}
+          >
+            −{f.del}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Tag({
+  icon,
+  t,
+  warn,
+}: Readonly<{ icon: ReactNode; t: string; warn?: boolean }>): ReactElement {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 5,
+        padding: '2px 8px',
+        borderRadius: 6,
+        fontSize: 11.5,
+        background: warn ? 'hsl(var(--warning) / 0.1)' : 'hsl(var(--muted))',
+        border: `1px solid ${
+          warn ? 'hsl(var(--warning) / 0.3)' : 'hsl(var(--rule))'
+        }`,
+        color: warn ? 'hsl(var(--warning))' : 'hsl(var(--ink-2))',
+      }}
+    >
+      {icon}
+      {t}
+    </span>
+  );
+}
+
+function Stat2({
+  n,
+  l,
+  warn,
+}: Readonly<{ n: number; l: string; warn?: boolean }>): ReactElement {
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 5 }}>
+      <span
+        className="serif"
+        style={{
+          fontSize: 18,
+          fontWeight: 600,
+          color: warn ? 'hsl(var(--warning))' : 'hsl(var(--ink))',
+        }}
+      >
+        {n}
+      </span>
+      <span style={{ fontSize: 11.5, color: 'hsl(var(--ink-3))' }}>{l}</span>
+    </span>
+  );
+}

package/src/session-kit/approvals/approval-icons.ts

@@ -0,0 +1,31 @@
+/**
+ * The icon contract for the approval surfaces. The kit is icon-agnostic
+ * (it never imports an icon set), so the host supplies one bundle that
+ * resolves every glyph the approval frame, scoped bodies, obligation
+ * chips and Center need. Keeping it as a single typed bundle means a
+ * consumer wires icons ONCE and passes it to every approval surface.
+ */
+import type { ObligationIcon } from './obligation-display';
+import type { ScopeIcon } from './scope-icons';
+import type { ReactNode } from 'react';
+
+export interface ApprovalIcons {
+  /** Map a stable obligation-chip glyph key → host icon node. */
+  readonly obligation: (key: ObligationIcon, size: number) => ReactNode;
+  /** Map a stable scoped-body glyph key → host icon node. */
+  readonly scope: (key: ScopeIcon, size: number) => ReactNode;
+  /** Frame: the "approval required" / approve shield. */
+  readonly shield: (size: number) => ReactNode;
+  /** Frame: capability-ref leading bolt. */
+  readonly capability: (size: number) => ReactNode;
+  /** Frame: approver-role person glyph. */
+  readonly user: (size: number) => ReactNode;
+  /** Quorum: multi-approver glyph. */
+  readonly users: (size: number) => ReactNode;
+  /** Resolved state: approved tick. */
+  readonly approved: (size: number) => ReactNode;
+  /** Resolved state: denied cross. */
+  readonly denied: (size: number) => ReactNode;
+  /** Generic small check (action buttons / Center). */
+  readonly check: (size: number) => ReactNode;
+}