@ifc-lite/viewer 1.23.0 → 1.25.0

package/src/components/extensions/PromoteToolDialog.tsx

@@ -0,0 +1,313 @@
+/* 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/. */
+
+/**
+ * `PromoteToolDialog` — turn a saved script into a persistent tool.
+ *
+ * Reads the script source, infers a minimal capability set via
+ * `inferCapabilities`, lets the user pick a name / category / icon /
+ * hotkey, then routes through `CapabilityReview` for the security
+ * gate before installing.
+ *
+ * Spec: docs/architecture/ai-customization/01-extension-model.md +
+ * `09-implementation-plan.md` P1.T11 / T12.
+ */
+
+import { useMemo, useState } from 'react';
+import { ChevronRight, Sparkles, X } from 'lucide-react';
+import {
+  inferCapabilities,
+  packBundle,
+  sha256Hex,
+  type Bundle,
+  type ExtensionManifest,
+} from '@ifc-lite/extensions';
+import { ICON_CHOICES } from './icon-registry';
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { CapabilityReview } from './CapabilityReview';
+import { useExtensionHost } from '@/sdk/ExtensionHostProvider';
+import type { ExtensionInstallSummary } from '@/services/extensions/host';
+import { ExtensionInstallError } from '@/services/extensions/host';
+import { toast } from '@/components/ui/toast';
+
+interface PromoteToolDialogProps {
+  open: boolean;
+  /** The script source the user is promoting. */
+  source: string;
+  /** Initial label the user can edit. */
+  initialName?: string;
+  onClose(): void;
+}
+
+// Icon choices live in ./icon-registry — a single source of truth
+// shared with ExtensionToolbarSlot so the icon the user picks here
+// is the icon that lands in the menubar.
+
+export function PromoteToolDialog({ open, source, initialName, onClose }: PromoteToolDialogProps) {
+  const host = useExtensionHost();
+  const [name, setName] = useState(initialName ?? 'My tool');
+  const [hotkey, setHotkey] = useState('');
+  const [icon, setIcon] = useState<string>('sparkles');
+  const [pending, setPending] = useState<{ bytes: Uint8Array; summary: ExtensionInstallSummary } | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const inference = useMemo(() => inferCapabilities(source), [source]);
+
+  const handlePromote = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const { bytes, summary } = await synthesiseBundle({
+        name,
+        source,
+        hotkey,
+        icon,
+        capabilities: inference.capabilities,
+      });
+      setPending({ bytes, summary });
+    } catch (err) {
+      toast.error(`Failed to package tool: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleApprove = async (grants: string[]) => {
+    if (!pending || busy) return;
+    setBusy(true);
+    try {
+      const status = await host.installFromBytes(pending.bytes, grants);
+      // Point the user at the payoff — the actual button. The
+      // synthesised manifest puts the command on `toolbar.right`,
+      // so it shows up as an icon button at the top-right of the
+      // toolbar. Mention the hotkey too if they set one.
+      const where = hotkey.trim()
+        ? `It's now a button in the toolbar (top-right) — or press ${hotkey.trim()}.`
+        : `It's now a button in the toolbar (top-right).`;
+      toast.success(`Installed "${name}". ${where}`);
+      setPending(null);
+      onClose();
+      void status;
+    } catch (err) {
+      if (err instanceof ExtensionInstallError) {
+        toast.error(`Install rejected: ${err.validationErrors[0]?.message ?? err.message}`);
+      } else {
+        toast.error(`Install failed: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (pending) {
+    return (
+      <CapabilityReview
+        open
+        summary={pending.summary}
+        onApprove={handleApprove}
+        onCancel={() => setPending(null)}
+      />
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            <DialogTitle>Promote script to a tool</DialogTitle>
+          </div>
+          <DialogDescription>
+            Turn this saved script into a persistent, sandboxed tool. The tool
+            appears in the command palette and on the toolbar. It runs in the
+            same sandbox as your scripts with only the capabilities you grant.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="tool-name">Name</Label>
+            <Input
+              id="tool-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Fire-rating report"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="tool-hotkey">Hotkey (optional)</Label>
+            <Input
+              id="tool-hotkey"
+              value={hotkey}
+              onChange={(e) => setHotkey(e.target.value)}
+              placeholder="Ctrl+Alt+F"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Icon</Label>
+            <div
+              role="radiogroup"
+              aria-label="Pick a toolbar icon"
+              className="grid grid-cols-10 gap-1.5 p-2 rounded-md border bg-muted/40"
+            >
+              {ICON_CHOICES.map(({ key, Icon, label }) => {
+                const selected = icon === key;
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    role="radio"
+                    aria-checked={selected}
+                    aria-label={label}
+                    title={label}
+                    onClick={() => setIcon(key)}
+                    className={cn(
+                      'flex items-center justify-center h-8 w-8 rounded border transition-colors',
+                      selected
+                        ? 'border-primary bg-primary/10 text-primary'
+                        : 'border-transparent text-muted-foreground hover:bg-muted hover:text-foreground',
+                    )}
+                  >
+                    <Icon className="h-4 w-4" />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="rounded-md border bg-muted/40 p-3">
+            <div className="text-xs font-semibold mb-2">Inferred capabilities</div>
+            {inference.capabilities.length === 0 ? (
+              <div className="text-xs text-muted-foreground">
+                No `bim.*` calls detected. The tool will request only
+                <code className="font-mono ml-1">model.read</code>.
+              </div>
+            ) : (
+              <ul className="space-y-1">
+                {inference.capabilities.map((cap) => (
+                  <li key={cap} className="text-xs flex items-center gap-2">
+                    <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                    <code className="font-mono">{cap}</code>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {inference.observations.some((o) => o.unknown) && (
+              <div className="mt-2 text-[11px] text-amber-600 dark:text-amber-400">
+                Unknown `bim.*` calls detected — review the source before approving.
+              </div>
+            )}
+            {inference.parseErrors.length > 0 && (
+              <div className="mt-2 text-[11px] text-destructive">
+                Script does not parse cleanly — promotion may fail.
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>
+            <X className="mr-1 h-4 w-4" />
+            Cancel
+          </Button>
+          <Button onClick={handlePromote} disabled={busy || name.trim().length === 0}>
+            <Sparkles className="mr-1 h-4 w-4" />
+            Review & install
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface SynthArgs {
+  name: string;
+  source: string;
+  hotkey: string;
+  icon: string;
+  capabilities: string[];
+}
+
+async function synthesiseBundle(
+  args: SynthArgs,
+): Promise<{ bytes: Uint8Array; summary: ExtensionInstallSummary }> {
+  const slug = slugFromName(args.name);
+  const id = `com.local.tools.${slug}`;
+  const commandId = `${id}.run`;
+  const caps = args.capabilities.length > 0 ? args.capabilities : ['model.read'];
+  // Engine range MUST match the running SDK or the loader skips the
+  // bundle on install — the tool then never appears as a toolbar
+  // button. Pin to ">=<currentSdk>" using the live app version
+  // instead of a hardcoded guess.
+  const sdkVersion =
+    typeof __APP_VERSION__ === 'string' && __APP_VERSION__.length > 0
+      ? __APP_VERSION__
+      : '1.0.0';
+  const manifest: ExtensionManifest = {
+    manifestVersion: 1,
+    id,
+    name: args.name,
+    description: `Promoted from a saved script.`,
+    version: '0.1.0',
+    engines: { ifcLiteSdk: `>=${sdkVersion}` },
+    capabilities: caps,
+    activation: [`onCommand:${commandId}`],
+    contributes: {
+      commands: [{ id: commandId, title: args.name, icon: args.icon }],
+      toolbar: [{ command: commandId, slot: 'toolbar.right' }],
+      ...(args.hotkey
+        ? { keybindings: [{ command: commandId, key: args.hotkey.trim() }] }
+        : {}),
+    },
+    entry: { commands: { [commandId]: 'src/commands/run.js' } },
+  };
+  const handler = wrapScriptAsCommand(args.source);
+  const files = new Map<string, { path: string; bytes: Uint8Array; text?: string }>();
+  const manifestText = `${JSON.stringify(manifest, null, 2)}\n`;
+  files.set('manifest.json', { path: 'manifest.json', bytes: new TextEncoder().encode(manifestText), text: manifestText });
+  files.set('src/commands/run.js', { path: 'src/commands/run.js', bytes: new TextEncoder().encode(handler), text: handler });
+  const bundle: Bundle = { manifest, files, source: { kind: 'memory' } };
+  const bytes = packBundle(bundle);
+  const hash = await sha256Hex(bytes);
+  return {
+    bytes,
+    summary: { id, version: '0.1.0', bundleHash: hash, capabilities: caps, bundle, signed: false },
+  };
+}
+
+function slugFromName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    || `tool-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function wrapScriptAsCommand(source: string): string {
+  // `run` is intentionally NOT async. The bim.* SDK is fully
+  // synchronous, and a promoted script is plain top-level code. An
+  // `async` wrapper would return a pending promise whose body only
+  // runs once the QuickJS job queue is drained — so the tool would
+  // silently do nothing (0 logs, instant "success"). A sync function
+  // runs to completion inside evalCode, exactly like the one-shot.
+  return `/* Promoted from a saved script. */
+function run(ctx) {
+  const bim = ctx.bim;
+${source.trim().split('\n').map((line) => `  ${line}`).join('\n')}
+}
+`;
+}

package/src/components/extensions/RepairQueuePanel.tsx

@@ -0,0 +1,222 @@
+/* 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/. */
+
+/**
+ * `RepairQueuePanel` — surface SDK-update revalidation results.
+ *
+ * Runs `ExtensionHostService.revalidateForSdk(currentSdk)` on mount,
+ * lists each extension with compatibility status + test outcome, and
+ * lets the user trigger an AI-assisted repair for items in the
+ * `needsRepair` bucket. Repair routing seeds the chat with a fix
+ * prompt; the chat panel then drives the regular authoring loop.
+ *
+ * Spec: docs/architecture/ai-customization/06-self-improvement.md §5.
+ */
+
+import { useCallback, useState } from 'react';
+import { CheckCircle2, RefreshCcw, ShieldAlert, Wrench, X } from 'lucide-react';
+import type { RevalidationItem, RevalidationSummary } from '@ifc-lite/extensions';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useExtensionHost } from '@/sdk/ExtensionHostProvider';
+import { useViewerStore } from '@/store';
+import { toast } from '@/components/ui/toast';
+import { HelpHint } from './HelpHint';
+
+interface RepairQueuePanelProps {
+  /** SDK version to revalidate against. Defaults to APP_VERSION. */
+  sdkVersion?: string;
+  onClose?: () => void;
+}
+
+export function RepairQueuePanel({ sdkVersion, onClose }: RepairQueuePanelProps) {
+  const host = useExtensionHost();
+  const queueChatPrompt = useViewerStore((s) => s.queueChatPrompt);
+  const setChatPanelVisible = useViewerStore((s) => s.setChatPanelVisible);
+  const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
+  const [summary, setSummary] = useState<RevalidationSummary | undefined>();
+  const [busy, setBusy] = useState(false);
+  // SDK version comes from the Vite-injected __APP_VERSION__ define.
+  // We deliberately do NOT fall back to '0.0.0' on miss — a fake low
+  // version would flag every range as outdated and produce a wave of
+  // false-positive repair prompts.
+  const version =
+    sdkVersion
+    ?? (typeof __APP_VERSION__ === 'string' && __APP_VERSION__.length > 0 ? __APP_VERSION__ : undefined);
+
+  const run = useCallback(async () => {
+    if (!version) return;
+    setBusy(true);
+    try {
+      const next = await host.revalidateForSdk(version);
+      setSummary(next);
+    } catch (err) {
+      toast.error(`Revalidation failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  }, [host, version]);
+
+  // Eager-run is gated behind an explicit user click. Mounting alone
+  // shouldn't spin up sandboxes for every installed extension — that
+  // can be expensive when many extensions are installed and outdated.
+
+  const repairItem = (item: RevalidationItem) => {
+    if (!version) return;
+    queueChatPrompt(buildRepairPrompt(item, version));
+    setChatPanelVisible(true);
+    setScriptPanelVisible(true);
+    toast.success(`Routing repair for ${item.extensionId}…`);
+  };
+
+  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">
+          <Wrench className="h-4 w-4" />
+          <h2 className="text-sm font-semibold">Repair queue</h2>
+          {summary && (
+            <span className="text-[11px] text-muted-foreground">
+              SDK {summary.sdk} · {summary.needsRepair.length} need fixing
+            </span>
+          )}
+          <HelpHint label="Repair queue">
+            <p>
+              When the viewer SDK bumps, extensions whose declared
+              <code> engines.ifcLiteSdk</code> range no longer matches
+              are flagged here.
+            </p>
+            <p>
+              <strong>Run check</strong> spins up a sandbox for each
+              outdated extension and runs its manifest tests against
+              the new SDK. Failing tests get a <strong>Repair</strong>
+              button that seeds chat with a fix prompt — the AI
+              authoring loop produces the patched bundle.
+            </p>
+            <p>
+              Doesn't run automatically (each check spawns sandboxes).
+            </p>
+          </HelpHint>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button size="sm" variant="ghost" onClick={() => void run()} disabled={busy || !version}>
+            <RefreshCcw className="mr-1 h-3.5 w-3.5" />
+            Re-run
+          </Button>
+          {onClose && (
+            <Button size="icon" variant="ghost" onClick={onClose} aria-label="Close">
+              <X className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        {!version ? (
+          <div className="px-6 py-12 text-center text-sm text-rose-600 dark:text-rose-400">
+            SDK version unknown — cannot revalidate. Set <code className="font-mono">__APP_VERSION__</code> via Vite define.
+          </div>
+        ) : !summary ? (
+          <div className="px-6 py-12 text-center text-sm text-muted-foreground space-y-3">
+            <div>No compatibility check has run for this session.</div>
+            <Button size="sm" variant="outline" onClick={() => void run()} disabled={busy}>
+              <RefreshCcw className="mr-1 h-3.5 w-3.5" />
+              Run check
+            </Button>
+          </div>
+        ) : summary.items.length === 0 ? (
+          <div className="flex flex-col items-center justify-center gap-2 px-6 py-12 text-center">
+            <CheckCircle2 className="h-8 w-8 text-emerald-500" />
+            <div className="text-sm font-medium">No installed extensions</div>
+          </div>
+        ) : (
+          <ul className="divide-y">
+            {summary.items.map((item) => (
+              <RepairRow key={item.extensionId} item={item} onRepair={() => repairItem(item)} />
+            ))}
+          </ul>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}
+
+function RepairRow({
+  item,
+  onRepair,
+}: {
+  item: RevalidationItem;
+  onRepair: () => void;
+}) {
+  const tone =
+    item.outcome === 'pass'
+      ? 'text-emerald-600 dark:text-emerald-400'
+      : item.outcome === 'skipped'
+        ? 'text-muted-foreground'
+        : 'text-rose-600 dark:text-rose-400';
+  return (
+    <li className="px-4 py-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            {item.outcome === 'pass' ? (
+              <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
+            ) : (
+              <ShieldAlert className={`h-3.5 w-3.5 ${tone}`} />
+            )}
+            <code className="text-xs font-mono break-all">{item.extensionId}</code>
+            <span className={`text-[10px] uppercase tracking-wide font-semibold ${tone}`}>
+              {item.outcome}
+            </span>
+          </div>
+          <div className="mt-1 text-[11px] text-muted-foreground">
+            Range <code className="font-mono">{item.compatibility.declared}</code> · {item.compatibility.reason}
+          </div>
+          {item.tests && item.tests.failed > 0 && (
+            <div className="mt-1 text-[11px] text-rose-600 dark:text-rose-400">
+              {item.tests.failed} test{item.tests.failed === 1 ? '' : 's'} failed:
+              {' '}
+              {item.tests.results.find((r) => !r.passed)?.error}
+            </div>
+          )}
+        </div>
+        {itemNeedsRepair(item) && (
+          <Button size="sm" variant="outline" onClick={onRepair}>
+            <Wrench className="mr-1 h-3.5 w-3.5" />
+            Repair
+          </Button>
+        )}
+      </div>
+    </li>
+  );
+}
+
+/**
+ * Whether a row should show a Repair button. Mirrors the
+ * `needsRepair` filter in `revalidateAgainstSdk` exactly — a failed
+ * test OR a skipped extension whose declared range is outdated — so
+ * the header count and the actionable rows never disagree.
+ */
+function itemNeedsRepair(item: RevalidationItem): boolean {
+  return (
+    item.outcome === 'fail'
+    || (item.outcome === 'skipped' && item.compatibility.status === 'outdated')
+  );
+}
+
+function buildRepairPrompt(item: RevalidationItem, sdk: string): string {
+  const failures = item.tests?.results.filter((r) => !r.passed) ?? [];
+  return [
+    `Repair extension ${item.extensionId} for SDK ${sdk}.`,
+    '',
+    `The declared engine range was \`${item.compatibility.declared}\` (status: ${item.compatibility.status}).`,
+    '',
+    failures.length > 0
+      ? `${failures.length} test${failures.length === 1 ? '' : 's'} failed under the new SDK:`
+      : 'No failing tests were captured; revalidation flagged compatibility only.',
+    ...failures.map((f) => `- ${f.name}: ${f.error ?? 'unknown'}`),
+    '',
+    'Update the bundle so tests pass against the new SDK while keeping the same user-visible behaviour. Bump engines.ifcLiteSdk as appropriate.',
+  ].join('\n');
+}

package/src/components/extensions/icon-registry.ts

@@ -0,0 +1,92 @@
+/* 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/. */
+
+/**
+ * Shared icon registry for extension commands.
+ *
+ * The picker (`PromoteToolDialog`) and the renderers
+ * (`ExtensionToolbarSlot`, command palette, context menu) all read
+ * from this single source so the icon a user picks actually shows up
+ * everywhere their command appears.
+ *
+ * Manifests record only the string key — never a component reference —
+ * so the bundle stays serialisable and portable.
+ */
+
+import {
+  AlertTriangle, Beaker, Box, Brain, Calculator, Camera, CheckCircle2,
+  ClipboardList, Download, Eye, FileBarChart, FileText, Filter, Flame,
+  Gauge, Hammer, Layers, Lightbulb, Maximize2, Palette, Ruler, ScanSearch,
+  Scissors, Settings, Shield, Sparkles, Tag, Target, Wrench,
+  type LucideIcon,
+} from 'lucide-react';
+
+export interface IconChoice {
+  key: string;
+  Icon: LucideIcon;
+  label: string;
+}
+
+/**
+ * Curated lucide subset (~29). Keys are lowercase-hyphenated so they
+ * survive JSON round-trips in `manifest.contributes.commands[].icon`.
+ */
+export const ICON_CHOICES: readonly IconChoice[] = [
+  { key: 'sparkles', Icon: Sparkles, label: 'AI / magic' },
+  { key: 'wrench', Icon: Wrench, label: 'Tool' },
+  { key: 'hammer', Icon: Hammer, label: 'Build' },
+  { key: 'palette', Icon: Palette, label: 'Color' },
+  { key: 'eye', Icon: Eye, label: 'View' },
+  { key: 'filter', Icon: Filter, label: 'Filter' },
+  { key: 'shield', Icon: Shield, label: 'Compliance' },
+  { key: 'flame', Icon: Flame, label: 'Fire rating' },
+  { key: 'ruler', Icon: Ruler, label: 'Measure' },
+  { key: 'calculator', Icon: Calculator, label: 'Quantity' },
+  { key: 'box', Icon: Box, label: 'Element' },
+  { key: 'layers', Icon: Layers, label: 'Storey' },
+  { key: 'tag', Icon: Tag, label: 'Classification' },
+  { key: 'target', Icon: Target, label: 'Isolate' },
+  { key: 'scan-search', Icon: ScanSearch, label: 'Audit' },
+  { key: 'clipboard-list', Icon: ClipboardList, label: 'Schedule' },
+  { key: 'file-text', Icon: FileText, label: 'Report' },
+  { key: 'file-bar-chart', Icon: FileBarChart, label: 'Chart' },
+  { key: 'download', Icon: Download, label: 'Export' },
+  { key: 'camera', Icon: Camera, label: 'Snapshot' },
+  { key: 'scissors', Icon: Scissors, label: 'Section' },
+  { key: 'maximize-2', Icon: Maximize2, label: 'Fly to' },
+  { key: 'gauge', Icon: Gauge, label: 'Performance' },
+  { key: 'lightbulb', Icon: Lightbulb, label: 'Idea' },
+  { key: 'alert-triangle', Icon: AlertTriangle, label: 'Warning' },
+  { key: 'beaker', Icon: Beaker, label: 'Test' },
+  { key: 'brain', Icon: Brain, label: 'Memory' },
+  { key: 'check-circle-2', Icon: CheckCircle2, label: 'Validate' },
+  { key: 'settings', Icon: Settings, label: 'Setting' },
+];
+
+const ICON_LOOKUP = new Map<string, LucideIcon>(
+  ICON_CHOICES.map((c) => [c.key, c.Icon]),
+);
+
+/**
+ * Resolve a manifest icon string to a lucide component. Falls back to
+ * `Sparkles` when the key is unknown or absent so the toolbar still
+ * renders something rather than a missing-icon hole. Also accepts a
+ * loose match on common variants (case, leading "icon-", underscores)
+ * so AI-authored manifests with slight key drift still resolve.
+ */
+export function resolveExtensionIcon(key: string | undefined | null): LucideIcon {
+  if (!key) return Sparkles;
+  const direct = ICON_LOOKUP.get(key);
+  if (direct) return direct;
+  // Tolerate AI-authored variants the picker doesn't emit but the model
+  // might guess: `Wrench`, `alertTriangle`, `Alert_Triangle`,
+  // `icon-wrench`, etc. → all collapse to the kebab-case canonical key.
+  const normalised = key
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .toLowerCase()
+    .replace(/^icon[-_]/, '')
+    .replace(/_/g, '-')
+    .trim();
+  return ICON_LOOKUP.get(normalised) ?? Sparkles;
+}

package/src/components/extensions/toast-helpers.ts

@@ -0,0 +1,49 @@
+/* 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/. */
+
+/**
+ * Centralised toast phrasing for the extensions / flavors surfaces.
+ * Keeps tone, capitalisation, and trailing-punctuation consistent
+ * across call sites.
+ *
+ * Callers pass the result to `toast.success` / `toast.info` /
+ * `toast.error` so the colour mapping stays at the call site.
+ */
+
+export function flavorSwitched(name: string): string {
+  return `Switched to ${name}`;
+}
+
+export function flavorExported(filename: string): string {
+  return `Exported ${filename}`;
+}
+
+export function flavorImported(name: string): string {
+  return `Imported ${name}`;
+}
+
+export function flavorDeleted(name: string): string {
+  return `Deleted ${name}`;
+}
+
+export function flavorReset(): string {
+  return 'Reset to baseline flavor';
+}
+
+export function testsPassed(id: string, passed: number, total: number): string {
+  return `${id}: ${passed}/${total} tests passed`;
+}
+
+export function testsNotDeclared(id: string): string {
+  return `${id} declares no tests`;
+}
+
+export function testsFailed(id: string, failed: number, firstError: string): string {
+  return `${id}: ${failed} test${failed === 1 ? '' : 's'} failed — ${firstError}`;
+}
+
+export function failed(operation: string, err: unknown): string {
+  const cause = err instanceof Error ? err.message : String(err);
+  return `${operation} failed — ${cause}`;
+}