@xemahq/ui-kernel 0.11.1 → 0.12.0

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

@@ -1,118 +0,0 @@
-/**
- * Sticky CAPABILITY-approval bar — 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

@@ -1,111 +0,0 @@
-/**
- * Obligation chip + quorum dots.
- *
- * `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

@@ -1,392 +0,0 @@
-/**
- * Scoped approval bodies — 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

@@ -1,31 +0,0 @@
-/**
- * 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;
-}