@ifc-lite/viewer 1.23.0 → 1.25.0

package/src/components/extensions/AuditLogPanel.tsx

@@ -0,0 +1,259 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * `AuditLogPanel` — local audit log viewer rendered inside the
+ * Extensions dock.
+ *
+ * Reads from the extension host's append-only audit log. Surfaces:
+ *   - install / uninstall / update / enable / disable
+ *   - activate / deactivate
+ *   - capability grant / revoke
+ *   - mutation summary / network fetch (when those land)
+ *   - health events (unhealthy / killed)
+ *
+ * The log is local-only. The "Export" button writes a JSON snapshot
+ * the user can keep / share. Clearing is one-click; there's no
+ * cross-device sync to worry about.
+ *
+ * Spec: docs/architecture/ai-customization/02-security.md §12.
+ */
+
+import { useEffect, useState } from 'react';
+import { Download, Trash2, FileText, Filter, X } from 'lucide-react';
+import type { AuditEvent, AuditEventKind } from '@ifc-lite/extensions';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useExtensionHost } from '@/sdk/ExtensionHostProvider';
+import { toast } from '@/components/ui/toast';
+import { HelpHint } from './HelpHint';
+
+const KIND_LABELS: Record<AuditEventKind, string> = {
+  install: 'Install',
+  uninstall: 'Uninstall',
+  update: 'Update',
+  enable: 'Enable',
+  disable: 'Disable',
+  capability_grant: 'Granted',
+  capability_revoke: 'Revoked',
+  activate: 'Activate',
+  deactivate: 'Deactivate',
+  mutation_summary: 'Mutations',
+  network_fetch: 'Fetch',
+  unhealthy: 'Unhealthy',
+  killed: 'Killed',
+};
+
+const KIND_TONES: Record<AuditEventKind, string> = {
+  install: 'text-emerald-600 dark:text-emerald-400',
+  uninstall: 'text-rose-600 dark:text-rose-400',
+  update: 'text-sky-600 dark:text-sky-400',
+  enable: 'text-emerald-600 dark:text-emerald-400',
+  disable: 'text-muted-foreground',
+  capability_grant: 'text-amber-600 dark:text-amber-400',
+  capability_revoke: 'text-amber-600 dark:text-amber-400',
+  activate: 'text-muted-foreground',
+  deactivate: 'text-muted-foreground',
+  mutation_summary: 'text-sky-600 dark:text-sky-400',
+  network_fetch: 'text-purple-600 dark:text-purple-400',
+  unhealthy: 'text-amber-600 dark:text-amber-400',
+  killed: 'text-rose-600 dark:text-rose-400',
+};
+
+interface AuditLogPanelProps {
+  /** Show only events from this extension id. Omit for all. */
+  extensionId?: string;
+  /** When in a panel, the close button. */
+  onClose?: () => void;
+}
+
+export function AuditLogPanel({ extensionId, onClose }: AuditLogPanelProps) {
+  const host = useExtensionHost();
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [filter, setFilter] = useState<AuditEventKind | 'all'>('all');
+  // Per-extension filter applied on top of the props-level filter.
+  // The prop scopes the panel; this state is the user's runtime
+  // narrow-down ("show only events for this extension").
+  const [extensionFilter, setExtensionFilter] = useState<string | undefined>(extensionId);
+
+  useEffect(() => {
+    const scope = extensionFilter ?? extensionId;
+    setEvents(host.audit.list(scope ? { extensionId: scope } : {}));
+    const off = host.onChange(() => {
+      setEvents(host.audit.list(scope ? { extensionId: scope } : {}));
+    });
+    return off;
+  }, [host, extensionId, extensionFilter]);
+
+  const filtered = filter === 'all' ? events : events.filter((e) => e.kind === filter);
+
+  // Build the list of distinct extension ids present in the (unfiltered)
+  // events for the per-extension chip row.
+  const distinctExtensionIds = Array.from(
+    new Set(host.audit.list().map((e) => e.extensionId)),
+  ).sort();
+
+  const handleExport = () => {
+    const json = host.audit.exportJson();
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `ifclite-audit-${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('Audit log exported.');
+  };
+
+  const handleClear = () => {
+    if (!confirm('Clear the audit log? This cannot be undone.')) return;
+    host.audit.clear();
+    // Wipe the IDB mirror too — otherwise reload resurrects what the
+    // user just asked to forget.
+    void host.clearPersistedAuditLog().catch((err) => {
+      console.warn('[AuditLogPanel] clear persisted audit failed:', err);
+    });
+    setEvents([]);
+    toast.success('Audit log cleared.');
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <FileText className="h-4 w-4" />
+          <h2 className="text-sm font-semibold">Audit Log</h2>
+          <span className="text-[11px] text-muted-foreground">
+            {filtered.length} of {events.length} events
+          </span>
+          <HelpHint label="Audit log">
+            <p>
+              Append-only ledger of every extension lifecycle event:
+              install, update, enable, disable, activate, capability
+              grant/revoke, runtime failures.
+            </p>
+            <p>
+              Persists in IndexedDB across reloads. Filter by event
+              kind via the chips below; when multiple extensions are
+              installed, a second chip row scopes by extension id.
+            </p>
+            <p><strong>Export</strong> downloads a JSON snapshot.</p>
+          </HelpHint>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button size="sm" variant="ghost" onClick={handleExport} aria-label="Export audit log">
+            <Download className="mr-1 h-3.5 w-3.5" />
+            Export
+          </Button>
+          <Button size="sm" variant="ghost" onClick={handleClear} aria-label="Clear audit log">
+            <Trash2 className="mr-1 h-3.5 w-3.5" />
+            Clear
+          </Button>
+          {onClose && (
+            <Button size="icon" variant="ghost" onClick={onClose} aria-label="Close audit log">
+              <X className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1 border-b px-4 py-2 overflow-x-auto">
+        <Filter className="h-3 w-3 text-muted-foreground shrink-0" />
+        <FilterChip label="All" active={filter === 'all'} onClick={() => setFilter('all')} />
+        {(Object.keys(KIND_LABELS) as AuditEventKind[]).map((k) => (
+          <FilterChip
+            key={k}
+            label={KIND_LABELS[k]}
+            active={filter === k}
+            onClick={() => setFilter(k)}
+          />
+        ))}
+      </div>
+
+      {/* Extension scope row — appears only when the panel was opened
+          un-scoped AND there's more than one extension in the log.
+          Lets the user narrow "show only events for this extension". */}
+      {!extensionId && distinctExtensionIds.length > 1 && (
+        <div className="flex items-center gap-1 border-b px-4 py-2 overflow-x-auto">
+          <span className="text-[10px] text-muted-foreground shrink-0">Extension:</span>
+          <FilterChip
+            label="All"
+            active={extensionFilter === undefined}
+            onClick={() => setExtensionFilter(undefined)}
+          />
+          {distinctExtensionIds.map((id) => (
+            <FilterChip
+              key={id}
+              label={id}
+              active={extensionFilter === id}
+              onClick={() => setExtensionFilter(id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <ScrollArea className="flex-1">
+        {filtered.length === 0 ? (
+          <div className="px-6 py-12 text-center text-sm text-muted-foreground">
+            No events yet. Audit entries appear here when extensions are installed,
+            updated, enabled, disabled, or uninstalled.
+          </div>
+        ) : (
+          <ul className="divide-y">
+            {filtered.slice().reverse().map((event) => (
+              <li key={event.seq} className="flex items-start gap-3 px-4 py-2.5 text-xs">
+                <span className={`shrink-0 font-medium ${KIND_TONES[event.kind]}`}>
+                  {KIND_LABELS[event.kind]}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="font-mono text-[11px] break-all">{event.extensionId}</div>
+                  <div className="text-[10px] text-muted-foreground">
+                    {new Date(event.ts).toLocaleString()}
+                    {event.version ? ` · v${event.version}` : ''}
+                    {extraDetail(event)}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}
+
+function FilterChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${
+        active
+          ? 'bg-primary text-primary-foreground'
+          : 'bg-muted text-muted-foreground hover:bg-muted/70'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+function extraDetail(event: AuditEvent): string {
+  switch (event.kind) {
+    case 'install':
+    case 'update':
+      return event.grantedCapabilities
+        ? ` · ${event.grantedCapabilities.length} capability ${event.grantedCapabilities.length === 1 ? 'grant' : 'grants'}`
+        : '';
+    case 'mutation_summary':
+      return ` · ${event.entityCount} entities`;
+    case 'network_fetch':
+      return ` · ${event.host} (${event.bytes} bytes)`;
+    case 'unhealthy':
+    case 'killed':
+      return ` · ${event.reason}`;
+    default:
+      return '';
+  }
+}

package/src/components/extensions/BundlePreview.tsx

@@ -0,0 +1,102 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * `BundlePreview` — read-only viewer for the files inside a bundle.
+ *
+ * Surfaces every file in the install bundle so the user can audit the
+ * code before approving. Plays nicely with `CapabilityReview` — the
+ * review modal exposes a "Show source" tab that mounts this.
+ *
+ * Spec: docs/architecture/ai-customization/01-extension-model.md §6.
+ */
+
+import { useMemo, useState } from 'react';
+import { Copy } from 'lucide-react';
+import type { Bundle, BundleFile } from '@ifc-lite/extensions';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { toast } from '@/components/ui/toast';
+import { cn } from '@/lib/utils';
+
+const DECODER = new TextDecoder();
+
+interface BundlePreviewProps {
+  bundle: Bundle;
+}
+
+export function BundlePreview({ bundle }: BundlePreviewProps) {
+  const paths = useMemo(() => Array.from(bundle.files.keys()).sort(), [bundle]);
+  const [selected, setSelected] = useState<string>(paths[0] ?? 'manifest.json');
+
+  const file = bundle.files.get(selected);
+  const text = useMemo(() => fileToText(file), [file]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`Copied ${selected} to clipboard`);
+    } catch (err) {
+      toast.error(`Copy failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  };
+
+  return (
+    <div className="flex h-[420px] gap-3">
+      {/* File list */}
+      <ul
+        className="w-48 shrink-0 overflow-y-auto rounded border bg-muted/30 text-[11px]"
+        role="listbox"
+        aria-label="Bundle files"
+      >
+        {paths.map((path) => (
+          <li key={path} role="option" aria-selected={selected === path}>
+            <button
+              type="button"
+              onClick={() => setSelected(path)}
+              aria-label={`View ${path}`}
+              className={cn(
+                'w-full text-left px-2 py-1 font-mono break-all transition-colors',
+                selected === path ? 'bg-primary/15 text-primary' : 'hover:bg-muted',
+              )}
+            >
+              {path}
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      {/* Source */}
+      <div className="flex-1 min-w-0 flex flex-col rounded border">
+        <div className="flex items-center justify-between border-b px-2 py-1 bg-muted/30 text-[11px]">
+          <code className="font-mono">{selected}</code>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => void handleCopy()}
+            aria-label="Copy file contents"
+          >
+            <Copy className="mr-1 h-3 w-3" />
+            Copy
+          </Button>
+        </div>
+        <ScrollArea className="flex-1">
+          <pre className="px-3 py-2 text-[11px] font-mono whitespace-pre-wrap break-all">
+            {text}
+          </pre>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}
+
+function fileToText(file: BundleFile | undefined): string {
+  if (!file) return '(file missing)';
+  if (file.text) return file.text;
+  try {
+    return DECODER.decode(file.bytes);
+  } catch {
+    return `(${file.bytes.byteLength} bytes — binary)`;
+  }
+}

package/src/components/extensions/CapabilityReview.tsx

@@ -0,0 +1,333 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * `CapabilityReview` — modal dialog the user must confirm before any
+ * extension is installed.
+ *
+ * Sources the capability list from the bundle's manifest, parses each
+ * capability, runs the risk classifier, and surfaces a per-row badge
+ * with a plain-English description. The user can:
+ *
+ *   - Approve every capability (default).
+ *   - Uncheck individual capabilities they don't want to grant.
+ *     The host enforces these at runtime via the inner-ring check;
+ *     extensions that need them fail visibly.
+ *   - Cancel.
+ *
+ * For red-tier capabilities we require the user to type "approve" as
+ * a friction layer — matching the threat-model recommendation in
+ * `02-security.md §4`.
+ *
+ * The dialog is purely presentational: it returns a grant decision to
+ * the parent via `onApprove(grants)` / `onCancel()`. The parent is
+ * responsible for calling `host.installFromBytes(bytes, grants)`.
+ */
+
+import { useMemo, useState } from 'react';
+import { AlertTriangle, CheckCircle2, FileCode2, ShieldAlert, ShieldCheck, X, KeyRound, Unlock } from 'lucide-react';
+import { BundlePreview } from './BundlePreview';
+import {
+  computeRisks,
+  overallTier,
+  parseCapability,
+  type Capability,
+  type CapabilityRisk,
+  type RiskTier,
+} from '@ifc-lite/extensions';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import type { ExtensionInstallSummary } from '@/services/extensions/host.js';
+
+interface CapabilityReviewProps {
+  open: boolean;
+  summary: ExtensionInstallSummary;
+  /** When supplied, render the capability diff vs the previously-granted set. */
+  previousGrants?: readonly string[];
+  /** Optional previous version label (e.g. "v1.2.0") for the diff banner. */
+  previousVersion?: string;
+  onApprove(grants: string[]): void;
+  onCancel(): void;
+}
+
+interface CapabilityRow {
+  raw: string;
+  capability: Capability | null;
+  risk: CapabilityRisk | null;
+}
+
+const APPROVE_PHRASE = 'approve';
+
+export function CapabilityReview({
+  open,
+  summary,
+  previousGrants,
+  previousVersion,
+  onApprove,
+  onCancel,
+}: CapabilityReviewProps) {
+  const rows = useMemo<CapabilityRow[]>(() => {
+    return summary.capabilities.map((raw) => {
+      const parsed = parseCapability(raw);
+      if (!parsed.ok) return { raw, capability: null, risk: null };
+      const [risk] = computeRisks([parsed.value]);
+      return { raw, capability: parsed.value, risk };
+    });
+  }, [summary]);
+
+  const overall = useMemo<RiskTier>(() => {
+    return overallTier(rows.map((r) => r.risk).filter((r): r is CapabilityRisk => !!r));
+  }, [rows]);
+
+  /** Capability strings introduced since the previous install, if any. */
+  const newSinceUpgrade = useMemo<Set<string>>(() => {
+    if (!previousGrants) return new Set();
+    const prior = new Set(previousGrants);
+    return new Set(summary.capabilities.filter((c) => !prior.has(c)));
+  }, [previousGrants, summary.capabilities]);
+
+  /** Capability strings the new bundle no longer requests. */
+  const droppedSinceUpgrade = useMemo<string[]>(() => {
+    if (!previousGrants) return [];
+    const next = new Set(summary.capabilities);
+    return previousGrants.filter((c) => !next.has(c));
+  }, [previousGrants, summary.capabilities]);
+
+  const [granted, setGranted] = useState<Set<string>>(
+    () => new Set(summary.capabilities),
+  );
+  const [confirmText, setConfirmText] = useState('');
+  const [tab, setTab] = useState<'capabilities' | 'source'>('capabilities');
+
+  const needsConfirm = useMemo(() => {
+    for (const row of rows) {
+      if (row.risk?.tier === 'red' && granted.has(row.raw)) return true;
+    }
+    return false;
+  }, [rows, granted]);
+
+  const canApprove =
+    !needsConfirm || confirmText.trim().toLowerCase() === APPROVE_PHRASE;
+
+  const toggle = (raw: string, checked: boolean) => {
+    setGranted((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(raw);
+      else next.delete(raw);
+      return next;
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onCancel(); }}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <RiskIcon tier={overall} />
+            <DialogTitle>
+              Install <span className="font-mono text-base">{summary.id}</span> v{summary.version}?
+            </DialogTitle>
+          </div>
+          <DialogDescription>
+            Review the capabilities this extension is requesting. Uncheck any
+            you do not want to grant. Extensions that rely on a denied
+            capability will surface a clear error at runtime instead of running
+            silently with broader scope.
+          </DialogDescription>
+        </DialogHeader>
+
+        {summary.signed && summary.signature ? (
+          <div className="flex items-start gap-2 rounded-md border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-xs">
+            <KeyRound className="h-4 w-4 text-emerald-600 dark:text-emerald-400 mt-0.5 shrink-0" />
+            <div className="min-w-0">
+              <div className="font-medium text-emerald-700 dark:text-emerald-400">
+                Signature verified
+              </div>
+              <div className="text-muted-foreground mt-0.5">
+                Signed by <code className="font-mono text-[10px]" title={summary.signature.fingerprint}>
+                  {summary.signature.fingerprint.slice(0, 23)}…
+                </code>
+                {' · '}
+                {new Date(summary.signature.signedAt).toLocaleString()}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs">
+            <Unlock className="h-4 w-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+            <div>
+              <div className="font-medium text-amber-700 dark:text-amber-400">
+                Unsigned bundle
+              </div>
+              <div className="text-muted-foreground mt-0.5">
+                This bundle has no signature. We cannot verify it came from a
+                specific publisher — install only if you trust the source.
+              </div>
+            </div>
+          </div>
+        )}
+
+        {previousGrants && (newSinceUpgrade.size > 0 || droppedSinceUpgrade.length > 0) && (
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs">
+            <div className="font-medium text-amber-700 dark:text-amber-400">
+              Capability changes since {previousVersion ?? 'the previous version'}
+            </div>
+            {newSinceUpgrade.size > 0 && (
+              <div className="mt-1">
+                <span className="text-[10px] uppercase tracking-wide font-semibold text-amber-600">New:</span>{' '}
+                {[...newSinceUpgrade].map((c) => (
+                  <code key={c} className="font-mono text-[10px] mr-1 bg-amber-500/20 rounded px-1 py-0.5">
+                    {c}
+                  </code>
+                ))}
+              </div>
+            )}
+            {droppedSinceUpgrade.length > 0 && (
+              <div className="mt-1">
+                <span className="text-[10px] uppercase tracking-wide font-semibold text-amber-600">Dropped:</span>{' '}
+                {droppedSinceUpgrade.map((c) => (
+                  <code key={c} className="font-mono text-[10px] mr-1 line-through opacity-70">
+                    {c}
+                  </code>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="flex items-center gap-1 border-b" role="tablist" aria-label="Bundle inspection mode">
+          <button
+            type="button"
+            onClick={() => setTab('capabilities')}
+            role="tab"
+            aria-selected={tab === 'capabilities'}
+            className={cn(
+              'flex items-center gap-1 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors',
+              tab === 'capabilities'
+                ? 'border-primary text-primary'
+                : 'border-transparent text-muted-foreground hover:text-foreground',
+            )}
+          >
+            <ShieldCheck className="h-3.5 w-3.5" />
+            Capabilities
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab('source')}
+            role="tab"
+            aria-selected={tab === 'source'}
+            className={cn(
+              'flex items-center gap-1 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors',
+              tab === 'source'
+                ? 'border-primary text-primary'
+                : 'border-transparent text-muted-foreground hover:text-foreground',
+            )}
+          >
+            <FileCode2 className="h-3.5 w-3.5" />
+            Source
+          </button>
+        </div>
+
+        {tab === 'source' ? (
+          <BundlePreview bundle={summary.bundle} />
+        ) : (
+        <ScrollArea className="max-h-72 rounded-md border">
+          <ul className="divide-y">
+            {rows.length === 0 && (
+              <li className="px-4 py-3 text-sm text-muted-foreground">
+                This extension requests no capabilities — viewer-only chrome.
+              </li>
+            )}
+            {rows.map((row) => (
+              <li key={row.raw} className="flex items-start gap-3 px-4 py-3">
+                <input
+                  type="checkbox"
+                  className="mt-1"
+                  checked={granted.has(row.raw)}
+                  onChange={(e) => toggle(row.raw, e.target.checked)}
+                  aria-label={`Grant capability ${row.raw}`}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <code className="text-xs font-mono">{row.raw}</code>
+                    <RiskBadge tier={row.risk?.tier ?? 'red'} />
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {row.risk?.description ?? 'Unknown capability — treated as high-risk.'}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </ScrollArea>
+        )}
+
+        {needsConfirm && tab === 'capabilities' && (
+          <div className="rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm">
+            <div className="font-medium text-destructive flex items-center gap-2">
+              <ShieldAlert className="h-4 w-4" />
+              High-risk capability requested
+            </div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Type <code className="font-mono">{APPROVE_PHRASE}</code> below to confirm.
+            </p>
+            <Input
+              className="mt-2"
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+              placeholder="approve"
+              aria-label="Type approve to confirm"
+              autoFocus
+            />
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onCancel}>
+            <X className="mr-1 h-4 w-4" />
+            Cancel
+          </Button>
+          <Button
+            disabled={!canApprove}
+            onClick={() => onApprove(Array.from(granted))}
+          >
+            <CheckCircle2 className="mr-1 h-4 w-4" />
+            Install
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RiskIcon({ tier }: { tier: RiskTier }) {
+  if (tier === 'red') return <ShieldAlert className="h-5 w-5 text-destructive" />;
+  if (tier === 'yellow') return <AlertTriangle className="h-5 w-5 text-amber-500" />;
+  return <CheckCircle2 className="h-5 w-5 text-emerald-500" />;
+}
+
+function RiskBadge({ tier }: { tier: RiskTier }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide',
+        tier === 'red' && 'bg-destructive/20 text-destructive',
+        tier === 'yellow' && 'bg-amber-500/20 text-amber-600 dark:text-amber-400',
+        tier === 'green' && 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400',
+      )}
+    >
+      {tier}
+    </span>
+  );
+}