noecosystem-design 0.1.0

package/docs/superpowers/specs/2026-08-26-noe-complete-catalog-design.md

@@ -0,0 +1,187 @@
+# Complete NOE Design Catalog and Coss/Base UI Adoption
+
+**Date:** 2026-08-26
+**Status:** Draft for user review
+**Scope root:** `/Users/ali/Documents/NoEcosystem/design-system`
+
+## Objective
+
+Make every public NOE design component inspectable in one running catalog. The
+catalog is both the product team's visual audit surface and the source of
+executable component documentation. It must be complete by contract: no public
+component may be shipped without an entry, states to inspect, locale/direction
+coverage, accessibility evidence, and registry metadata where it is
+installable.
+
+The user-supplied Coss, Base UI, dark component-grid, and responsive dashboard
+examples are visual and architectural reference material. They do not grant a
+license to copy their source or visual assets, and they do not override the NOE
+token, accessibility, direction, or ownership contracts.
+
+## Definition of Complete
+
+"Complete" means the catalog reflects the complete public NOE component
+surface, not that it silently presents planned external components as finished.
+
+For every exported NOE component or documented composition, the catalog must
+provide:
+
+- a discoverable entry and category;
+- a live preview using the public package export;
+- a concise purpose and do/don't guidance;
+- all supported variants and meaningful interaction states;
+- keyboard, focus, disabled, loading, error, long-content, light, dark, LTR,
+  RTL, Persian, and English audit coverage as applicable;
+- source and registry/install metadata where the component is distributable;
+- an explicit maturity state: `available`, `in-progress`, or `planned`.
+
+`available` requires executable evidence. The catalog must never visually
+imply that a planned item has been implemented.
+
+## Information Architecture
+
+The canonical audit experience is a React Storybook application, supplemented
+by a curated NOE Catalog landing page.
+
+```text
+Catalog landing
+  Foundations
+    Typography, colour roles, spacing, elevation, motion, icons, bidi
+  Primitives
+    Controls, inputs, feedback, overlays, navigation, layout
+  Patterns
+    Data, agent, approval, artifact, workflow compositions
+  Product surfaces
+    Consumer, dashboard, agent workspace, workflow builder
+  Audit
+    Component matrix, accessibility, direction, locale, responsive evidence
+```
+
+The landing page uses a dense, quiet component grid inspired by the supplied
+references: clear labels, real previews, restrained borders, deliberate empty
+space, and no decorative treatment outside existing NOE tokens. The dashboard
+surface demonstrates the same components in responsive product context. It is
+not a copy of any reference site.
+
+Global controls switch theme, locale, direction, density, and viewport preview.
+Controls apply before first paint where document `lang` and `dir` are involved.
+Links permit a reviewer to enter any component or state directly.
+
+## Typography Contract
+
+Typography is a semantic token contract, not a per-story convention.
+
+- English and other Latin UI copy use `SF Pro Text`; display headings use
+  `SF Pro Display`.
+- Persian and Arabic UI copy use the locally supplied `IRANYekanXFaNum` for
+  regular, medium, semibold, and bold weights.
+- `html[lang="fa"]`, `html[lang="ar"]`, and nested matching language scopes
+  override the semantic sans and heading variables rather than relying on a
+  glyph fallback.
+- Technical values keep the semantic monospace family and explicit LTR
+  isolation even inside RTL layouts.
+
+The self-hosted IRANYekan files remain subject to the existing licensing note;
+no proprietary SF Pro files are added to the repository. SF Pro remains a
+system-font reference with documented platform fallbacks.
+
+## Coss and Base UI Strategy
+
+Base UI supplies accessible behaviour and Coss supplies verified composition
+patterns. Neither library's default visual language may escape as a NOE product
+API.
+
+```text
+Base UI behaviour
+  -> selected, locally owned Coss-derived compositions
+    -> NOE semantic-token styling and bidi contracts
+      -> @noe public packages and registry
+        -> catalog and product consumers
+```
+
+Each Coss primitive is tracked in a machine-readable adoption matrix with one
+of these outcomes:
+
+- `adopted`: implemented as a NOE-owned public component and fully auditable;
+- `compose-only`: used internally by an NOE pattern, not exposed as a second
+  public primitive;
+- `deferred`: intentionally not yet in the NOE public surface, with rationale;
+- `blocked`: needs an explicit dependency, API, or design decision.
+
+Coss particles inform NOE patterns such as authentication, command surfaces,
+forms, tables, and settings. They are adapted only when they add a real product
+contract; the catalog does not bulk-copy the external particle library.
+
+No Coss or Base UI API is guessed. Version compatibility, installation source,
+licenses, accessibility behaviour, portal direction, and controlled state are
+verified before each adoption.
+
+## Package and Catalog Boundaries
+
+- `@noe/design-tokens` owns the semantic font, colour, spacing, motion, and
+  theme decisions.
+- `@noe/i18n` owns locales, messages, direction, formatting, and pseudo-locales.
+- `@noe/ui` owns direction-safe primitives and the Base UI/Coss adapters.
+- `@noe/data-ui`, `@noe/ai-ui`, and `@noe/workflow-ui` own NOE pattern-level
+  compositions.
+- `@noe/registry` owns installable component metadata and adoption/maturity
+  information.
+- `apps/storybook` owns the executable documentation and audit controls.
+- `apps/showcase` owns curated product and catalog entry surfaces; it does not
+  duplicate Storybook's component implementation.
+
+The registry becomes the inventory source. Automated checks compare public
+exports, registry entries, story coverage, and the audit matrix, failing if an
+available component is absent from any required surface.
+
+## Interaction, Accessibility, and Direction
+
+Interactive primitives use verified Base UI/Coss hierarchy and composition
+rules, especially for dialogs, menus, selects, popovers, drawers, forms, and
+toasts. Every portalled UI receives explicit direction. Components retain
+logical CSS and do not solve RTL with global reversal or global icon mirroring.
+
+The catalog exposes keyboard instructions and accessibility state rather than
+requiring a reviewer to infer them from source. Overlay, focus, label,
+description, error, disabled, and destructive-action behaviour are interaction
+tests, not visual claims.
+
+## Verification and Evidence
+
+The implementation adds a coverage contract that reports all public components
+and their documentation/audit status. Completion evidence includes:
+
+- token tests proving the explicit English and Persian font contracts;
+- component tests for relevant Base UI/Coss interaction semantics;
+- Storybook interaction and accessibility tests for every available story;
+- Playwright audit flows for theme, locale, direction, responsive widths, search,
+  filters, and component deep-links;
+- deterministic visual review for selected foundations, primitives, patterns,
+  and product surfaces;
+- registry and public-export parity checks;
+- `pnpm check`, `pnpm test:storybook`, `pnpm test:e2e`, and repository-level
+  `make check` results.
+
+## Non-goals
+
+- Copying Coss, Base UI, or the supplied reference websites pixel-for-pixel.
+- Shipping all externally available Coss particles merely because they exist.
+- Replacing NOE tokens, i18n, or public package boundaries with external APIs.
+- Claiming a component is implemented before its story and executable audit
+  coverage exist.
+- Publishing, deploying, or changing production infrastructure.
+
+## Delivery Sequence
+
+1. Establish catalog inventory, maturity metadata, and coverage checks.
+2. Correct the explicit language-aware typography contract with tests.
+3. Install or normalize only the verified Base UI/Coss foundations required by
+   the adoption matrix.
+4. Build the catalog shell, global audit controls, navigation, search, and
+   preview grid.
+5. Add and group complete stories for every existing public NOE component.
+6. Adopt missing primitives and patterns in dependency order, each with public
+   API, registry data, story, interaction test, and RTL coverage.
+7. Build curated product surfaces from the same public components.
+8. Run the full automated and visual verification matrix, report gaps honestly,
+   and retain a visible `planned` state for anything not yet available.

package/llms.txt

@@ -0,0 +1,20 @@
+# NOE Design System retrieval map
+
+- Repository overview: README.md
+- Agent rules: AGENTS.md
+- Architecture: docs/design-system/architecture.md
+- Brand audit: docs/design-system/noe-brand-audit.md
+- Foundations and tokens: docs/design-system/foundations.md, docs/design-system/tokens.md
+- Components: docs/design-system/components.md
+- Internationalization: docs/design-system/i18n.md
+- RTL and bidi: docs/design-system/rtl.md
+- Motion: docs/design-system/motion.md
+- Accessibility: docs/design-system/accessibility.md
+- Agentic UI: docs/design-system/agentic-ui.md
+- Testing and visual QA: docs/design-system/testing.md, docs/design-system/visual-qa.md
+- CI/CD and security: docs/design-system/ci-cd.md, docs/design-system/security.md
+- Registry and MCP: docs/design-system/registry.md, docs/design-system/mcp.md
+- Contribution workflow: docs/design-system/contributing.md
+- Decisions: docs/adr/
+- Static reference app: apps/web/
+- Storybook source: apps/storybook/

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "noecosystem-design",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "packageManager": "pnpm@11.23.0",
+  "engines": {
+    "node": ">=24.19.0"
+  },
+  "scripts": {
+    "dev": "pnpm --filter @noe/showcase dev",
+    "storybook": "pnpm --filter @noe/storybook storybook",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "gen:inventory": "node scripts/generate-inventory.mjs",
+    "gen:manifest": "node scripts/generate-manifest.mjs",
+    "validate:manifest": "node scripts/validate-manifest.mjs",
+    "lint": "biome lint .",
+    "typecheck": "tsc -p tsconfig.json --pretty false",
+    "test": "node --test tests/*.test.mjs && vitest run --project unit",
+    "test:components": "vitest run --project browser",
+    "test:storybook": "vitest run --project storybook --config apps/storybook/vitest.config.ts",
+    "test:e2e": "playwright test",
+    "test:registry:consumer": "node scripts/verify-registry-consumer.mjs",
+    "test:registry": "node scripts/validate-manifest.mjs",
+    "test:manifest": "node scripts/validate-manifest.mjs",
+    "test:exports": "node scripts/validate-manifest.mjs",
+    "test:coverage": "node scripts/validate-manifest.mjs",
+    "test:tokens": "node scripts/verify.mjs",
+    "build": "pnpm -r --if-present build",
+    "build:storybook": "pnpm --filter @noe/storybook build-storybook",
+    "verify": "node scripts/verify.mjs && node scripts/validate-manifest.mjs",
+    "check": "pnpm format:check && pnpm lint && pnpm typecheck && pnpm test && pnpm test:components && pnpm gen:manifest && pnpm validate:manifest && pnpm build && pnpm build:storybook && pnpm verify",
+    "test:offline": "node --test tests/*.test.mjs",
+    "typecheck:offline": "tsc -p tsconfig.verify.json --pretty false",
+    "build:static": "node scripts/build-static.mjs",
+    "visual:legacy": "bash scripts/capture-visuals.sh"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.10",
+    "@playwright/test": "1.62.1",
+    "@storybook/addon-a11y": "10.5.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
+    "@tailwindcss/vite": "4.3.3",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.6",
+    "@types/node": "26.2.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
+    "@vitejs/plugin-react": "6.1.0",
+    "@vitest/browser-playwright": "4.1.11",
+    "jsdom": "30.0.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "storybook": "10.5.10",
+    "tailwindcss": "4.3.3",
+    "typescript": "7.0.2",
+    "vite": "8.2.2",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "4.1.11",
+    "vitest-browser-react": "2.2.0"
+  }
+}

package/packages/ai-ui/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@noe/ai-ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@noe/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  }
+}

package/packages/ai-ui/src/activity-feed.tsx

@@ -0,0 +1,60 @@
+
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export interface ActivityFeedItem {
+  id: string;
+  label: React.ReactNode;
+  meta?: React.ReactNode;
+  timestamp?: React.ReactNode;
+  status?: 'neutral' | 'positive' | 'warning' | 'error';
+}
+
+export interface ActivityFeedProps extends React.ComponentProps<'ol'> {
+  label: string;
+  items: readonly ActivityFeedItem[];
+}
+
+const statusClassName = {
+  neutral: 'bg-muted-foreground',
+  positive: 'bg-success',
+  warning: 'bg-warning',
+  error: 'bg-destructive',
+} as const;
+
+export function ActivityFeed({ label, items, className, ...props }: ActivityFeedProps) {
+  return (
+    <ol
+      aria-label={label}
+      className={cn('m-0 flex list-none flex-col p-0', className)}
+      data-slot="activity-feed"
+      {...props}
+    >
+      {items.map((item) => (
+        <li
+          className="relative flex gap-3 pb-4 ps-1 last:pb-0"
+          data-slot="activity-feed-item"
+          data-status={item.status ?? 'neutral'}
+          key={item.id}
+        >
+          <span
+            aria-hidden="true"
+            className={cn(
+              'mt-2 size-2 shrink-0 rounded-full',
+              statusClassName[item.status ?? 'neutral'],
+            )}
+          />
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 text-start">
+            <span className="text-sm leading-normal text-foreground">{item.label}</span>
+            {item.meta || item.timestamp ? (
+              <span className="flex flex-wrap items-center gap-x-2 text-xs leading-normal text-muted-foreground">
+                {item.meta ? <span>{item.meta}</span> : null}
+                {item.timestamp ? <span className="tabular-nums">{item.timestamp}</span> : null}
+              </span>
+            ) : null}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/packages/ai-ui/src/agent-composer.tsx

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+import { Button } from '@noe/ui/button';
+import { cn } from '@noe/ui/lib/cn';
+
+export function AgentComposer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  submitLabel,
+  disabled,
+  className,
+}: {
+  value: string;
+  onChange(value: string): void;
+  onSubmit(): void;
+  placeholder: string;
+  submitLabel: string;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <form
+      className={cn(
+        'flex flex-col gap-3 rounded-lg border border-border bg-surface-raised p-3 transition-[border-color,box-shadow] duration-(--noe-motion-duration-fast) focus-within:border-accent focus-within:ring-2 focus-within:ring-focus-ring',
+        className,
+      )}
+      data-slot="agent-composer"
+      onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        onSubmit();
+      }}
+    >
+      <textarea
+        className="field-sizing-content max-h-48 min-h-16 w-full resize-none rounded-md border-0 bg-transparent px-1 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+        data-slot="agent-composer-input"
+        dir="auto"
+        disabled={disabled}
+        onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => onChange(event.target.value)}
+        placeholder={placeholder}
+        rows={3}
+        value={value}
+      />
+      <div className="flex items-center justify-between gap-2">
+        <span aria-live="polite" className="font-mono text-xs text-muted-foreground" dir="ltr">
+          {value.length}
+        </span>
+        <Button disabled={disabled || !value.trim()} size="sm" type="submit" variant="primary">
+          {submitLabel}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/packages/ai-ui/src/agent-message.tsx

@@ -0,0 +1,50 @@
+import type * as React from 'react';
+import { AutoDirectionText, TechnicalValue } from '@noe/ui/bidi';
+import { cn } from '@noe/ui/lib/cn';
+
+const roleClassName = {
+  user: 'items-end',
+  assistant: 'items-start',
+  system: 'items-start',
+} as const;
+
+const bubbleClassName = {
+  user: 'bg-accent text-accent-foreground',
+  assistant: 'border border-border bg-surface-raised text-foreground',
+  system: 'border border-dashed border-border bg-surface-sunken/50 text-muted-foreground',
+} as const;
+
+export function AgentMessage({
+  role,
+  name,
+  content,
+  model,
+  className,
+}: {
+  role: 'user' | 'assistant' | 'system';
+  name: React.ReactNode;
+  content: React.ReactNode;
+  model?: string;
+  className?: string;
+}) {
+  return (
+    <article
+      className={cn('flex w-full flex-col gap-1.5', roleClassName[role], className)}
+      data-role={role}
+      data-slot="agent-message"
+    >
+      <header className="flex items-center gap-2 px-1 text-xs text-muted-foreground">
+        <strong className="font-medium text-foreground">{name}</strong>
+        {model ? <TechnicalValue>{model}</TechnicalValue> : null}
+      </header>
+      <AutoDirectionText
+        className={cn(
+          'max-w-prose rounded-lg px-4 py-3 text-sm leading-normal',
+          bubbleClassName[role],
+        )}
+      >
+        {content}
+      </AutoDirectionText>
+    </article>
+  );
+}

package/packages/ai-ui/src/agent-plan.tsx

@@ -0,0 +1,69 @@
+import { useId } from 'react';
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export type PlanState = 'queued' | 'running' | 'completed' | 'failed';
+export type PlanStep = { id: string; label: React.ReactNode; state: PlanState };
+
+const dotClassName = {
+  queued: 'bg-muted-foreground/40',
+  running: 'animate-pulse bg-accent',
+  completed: 'bg-success',
+  failed: 'bg-destructive',
+} as const;
+
+const stepLabelClassName = {
+  queued: 'text-muted-foreground',
+  running: 'text-foreground',
+  completed: 'text-foreground',
+  failed: 'text-destructive',
+} as const;
+
+export function AgentPlan({
+  title,
+  steps,
+  stateLabels,
+  className,
+}: {
+  title: React.ReactNode;
+  steps: PlanStep[];
+  stateLabels: Record<PlanState, React.ReactNode>;
+  className?: string;
+}) {
+  const titleId = useId();
+  return (
+    <section
+      aria-labelledby={titleId}
+      className={cn('rounded-lg border border-border bg-surface-raised p-4', className)}
+      data-slot="agent-plan"
+    >
+      <h3
+        className="m-0 mb-3 font-heading text-sm font-semibold leading-snug text-foreground"
+        id={titleId}
+      >
+        {title}
+      </h3>
+      <ol className="m-0 flex list-none flex-col gap-3 p-0">
+        {steps.map((step) => (
+          <li
+            className="flex items-start gap-3"
+            data-slot="agent-plan-step"
+            data-state={step.state}
+            key={step.id}
+          >
+            <span
+              aria-hidden="true"
+              className={cn('mt-1.5 size-2 shrink-0 rounded-pill', dotClassName[step.state])}
+            />
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className={cn('text-sm leading-normal', stepLabelClassName[step.state])}>
+                {step.label}
+              </span>
+              <small className="text-xs text-muted-foreground">{stateLabels[step.state]}</small>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

package/packages/ai-ui/src/agent-workspace.tsx

@@ -0,0 +1,63 @@
+
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export interface AgentWorkspaceProps extends React.ComponentProps<'div'> {
+  label: string;
+  navigation: React.ReactNode;
+  inspector?: React.ReactNode;
+  children: React.ReactNode;
+  /**
+   * Landmark ownership: application shell (AppFrame) owns the primary <main>.
+   * AgentWorkspace defaults to a non-main region for the conversation area to avoid nested <main> when placed inside AppFrame.
+   * Use `as="main"` when rendering as a standalone top-level page.
+   */
+  as?: 'div' | 'main';
+}
+
+export function AgentWorkspace({
+  label,
+  navigation,
+  inspector,
+  children,
+  className,
+  as: Tag = 'div',
+  ...props
+}: AgentWorkspaceProps) {
+  const ContentTag = Tag === 'main' ? 'main' : 'div';
+  return (
+    <section
+      aria-label={label}
+      className={cn(
+        'grid w-full grid-cols-[15rem_minmax(0,1fr)] overflow-hidden rounded-lg border border-border bg-surface lg:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+        className,
+      )}
+      data-slot="agent-workspace"
+      {...props}
+    >
+      <aside
+        aria-label="Workspace navigation"
+        className="border-e border-border bg-surface-raised p-4"
+        data-slot="agent-workspace-navigation"
+      >
+        {navigation}
+      </aside>
+      <ContentTag
+        aria-label="Conversation and artifacts"
+        className="flex min-w-0 flex-col gap-4 p-5"
+        data-slot="agent-workspace-conversation"
+      >
+        {children}
+      </ContentTag>
+      {inspector ? (
+        <aside
+          aria-label="Run inspector"
+          className="hidden flex-col gap-4 border-s border-border bg-surface-raised p-5 lg:flex"
+          data-slot="agent-workspace-inspector"
+        >
+          {inspector}
+        </aside>
+      ) : null}
+    </section>
+  );
+}

package/packages/ai-ui/src/approval-request.tsx

@@ -0,0 +1,93 @@
+import { useId } from 'react';
+import type * as React from 'react';
+import { TechnicalValue } from '@noe/ui/bidi';
+import { Button } from '@noe/ui/button';
+import { cn } from '@noe/ui/lib/cn';
+
+export type ApprovalParameter = {
+  /** Stable identity for rendering; must be unique within one request. */
+  id: string;
+  label: React.ReactNode;
+  value: string;
+};
+
+export function ApprovalRequest({
+  title,
+  consequence,
+  target,
+  targetLabel,
+  parameters,
+  labels,
+  onDecision,
+  className,
+}: {
+  title: React.ReactNode;
+  consequence: React.ReactNode;
+  target: string;
+  targetLabel: React.ReactNode;
+  parameters: ApprovalParameter[];
+  labels: { once: React.ReactNode; session: React.ReactNode; deny: React.ReactNode };
+  onDecision(decision: 'once' | 'session' | 'deny'): void;
+  className?: string;
+}) {
+  const titleId = useId();
+  const decideOnce = () => onDecision('once');
+  const decideSession = () => onDecision('session');
+  const decideDeny = () => onDecision('deny');
+
+  return (
+    <section
+      aria-labelledby={titleId}
+      className={cn(
+        'flex flex-col gap-4 rounded-lg border border-warning/40 bg-warning/10 p-4',
+        className,
+      )}
+      data-slot="approval-request"
+    >
+      <header className="flex items-start gap-3">
+        <span
+          aria-hidden="true"
+          className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-pill border border-warning/50 bg-surface-raised text-sm font-semibold text-warning-foreground"
+        >
+          !
+        </span>
+        <div className="flex min-w-0 flex-col gap-1">
+          <h3
+            className="m-0 font-heading text-sm font-semibold leading-snug text-foreground"
+            id={titleId}
+          >
+            {title}
+          </h3>
+          <p className="m-0 text-sm leading-normal text-muted-foreground">{consequence}</p>
+        </div>
+      </header>
+      <dl className="m-0 grid grid-cols-1 gap-x-4 gap-y-2 rounded-md border border-border bg-surface-raised p-3 sm:grid-cols-2">
+        <div className="flex flex-col gap-0.5">
+          <dt className="text-xs text-muted-foreground">{targetLabel}</dt>
+          <dd className="m-0">
+            <TechnicalValue>{target}</TechnicalValue>
+          </dd>
+        </div>
+        {parameters.map((parameter) => (
+          <div className="flex flex-col gap-0.5" key={parameter.id}>
+            <dt className="text-xs text-muted-foreground">{parameter.label}</dt>
+            <dd className="m-0">
+              <TechnicalValue>{parameter.value}</TechnicalValue>
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <footer className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+        <Button onClick={decideDeny} variant="quiet">
+          {labels.deny}
+        </Button>
+        <Button onClick={decideSession} variant="outline">
+          {labels.session}
+        </Button>
+        <Button onClick={decideOnce} variant="primary">
+          {labels.once}
+        </Button>
+      </footer>
+    </section>
+  );
+}