@ifc-lite/viewer 1.23.0 → 1.25.0

package/src/components/extensions/FlavorDialog.tsx

@@ -0,0 +1,398 @@
+/* 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/. */
+
+/**
+ * `FlavorDialog` — manage flavors: list, switch, export, import, reset.
+ *
+ * The export side serialises the active (or selected) flavor to an
+ * `.iflv` file via `FlavorService.exportFlavor`. The import side
+ * accepts an `.iflv`, previews + validates it, and offers replace /
+ * save-as-new strategies. Strategy choice is explicit so users don't
+ * silently overwrite a flavor they've been iterating on.
+ *
+ * Phase 3 scope. The merge UI (T13) lives in a separate component.
+ *
+ * Spec: docs/architecture/ai-customization/05-flavors-and-sharing.md §6.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Palette } from 'lucide-react';
+import type { Flavor, UnpackedFlavor } from '@ifc-lite/extensions';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useExtensionHost } from '@/sdk/ExtensionHostProvider';
+import { toast } from '@/components/ui/toast';
+import { FlavorMergeDialog } from './FlavorMergeDialog';
+import { FlavorListView } from './FlavorListView';
+import { FlavorImportPreview } from './FlavorImportPreview';
+import * as toastText from './toast-helpers';
+import { HelpHint } from './HelpHint';
+import { useViewerStore } from '@/store';
+
+interface FlavorDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function FlavorDialog({ open, onClose }: FlavorDialogProps) {
+  const host = useExtensionHost();
+  const [flavors, setFlavors] = useState<Flavor[]>([]);
+  const [activeId, setActiveId] = useState<string | undefined>();
+  const [busy, setBusy] = useState(false);
+  const [preview, setPreview] = useState<{ bytes: Uint8Array; unpacked: UnpackedFlavor } | null>(null);
+  const [mergeTarget, setMergeTarget] = useState<Flavor | null>(null);
+  /** Live lens count from the viewer store — drives the "N new lenses
+   *  not yet in active flavor" banner. */
+  const liveLensCount = useViewerStore((s) => s.savedLenses.length);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const refresh = useCallback(async () => {
+    const [list, active] = await Promise.all([
+      host.flavors.list(),
+      host.flavors.getActive(),
+    ]);
+    setFlavors(list);
+    setActiveId(active?.id);
+  }, [host]);
+
+  useEffect(() => {
+    if (!open) return;
+    void refresh();
+    return host.flavors.onChange(() => {
+      void refresh();
+    });
+  }, [open, host, refresh]);
+
+  // When the dialog closes (or the preview is dismissed), zero the
+  // preview bytes so a sensitive `.iflv` doesn't sit in memory longer
+  // than necessary. Best effort — the GC will reclaim eventually.
+  useEffect(() => {
+    if (open) return;
+    if (preview) {
+      preview.bytes.fill(0);
+      setPreview(null);
+    }
+    if (mergeTarget) setMergeTarget(null);
+  }, [open, preview, mergeTarget]);
+
+  const handleExport = async (id: string) => {
+    setBusy(true);
+    try {
+      const bytes = await host.flavors.exportFlavor(id);
+      // Copy into a fresh ArrayBuffer so DOM Blob typings accept it —
+      // Uint8Array<ArrayBufferLike> isn't a BlobPart in strict
+      // TS lib.dom, and `.slice()` on the underlying buffer may
+      // return SharedArrayBuffer.
+      const buffer = new ArrayBuffer(bytes.byteLength);
+      new Uint8Array(buffer).set(bytes);
+      const blob = new Blob([buffer], { type: 'application/octet-stream' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${id || 'flavor'}.iflv`;
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success(toastText.flavorExported(`${id}.iflv`));
+    } catch (err) {
+      toast.error(toastText.failed('Export', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleActivate = async (id: string) => {
+    setBusy(true);
+    try {
+      // Drive the full switcher: enable/disable extensions to match
+      // the target flavor, then move the active pointer. Falls back
+      // to the bare pointer set on failure so the user can still
+      // recover.
+      await host.switchFlavor(id);
+      toast.success(toastText.flavorSwitched(id));
+    } catch (err) {
+      toast.error(toastText.failed('Activate', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(`Delete flavor ${id}?`)) return;
+    setBusy(true);
+    try {
+      await host.flavors.delete(id);
+      toast.success(toastText.flavorDeleted(id));
+    } catch (err) {
+      toast.error(toastText.failed('Delete', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /**
+   * Snapshot the current viewer state into a SPECIFIC flavor (not
+   * just the active one). Powers the per-row Capture button, so a
+   * user can keep two flavors side-by-side and update each from the
+   * same viewer session without switching first.
+   *
+   * v1 scope: saved lenses. The flavor schema also reserves slots
+   * for savedQueries / keybindings / layout / settings — those land
+   * as the viewer surfaces them in stores we can read deterministically.
+   */
+  const handleCaptureInto = async (flavorId: string) => {
+    setBusy(true);
+    try {
+      const target = await host.flavors.list().then((list) => list.find((f) => f.id === flavorId));
+      if (!target) {
+        toast.error(`Flavor "${flavorId}" not found.`);
+        return;
+      }
+      const savedLenses = useViewerStore.getState().savedLenses;
+      const lenses = savedLenses.map((lens) => ({
+        id: lens.id,
+        name: lens.name ?? lens.id,
+        definition: lens as unknown as Parameters<typeof host.flavors.put>[0]['lenses'][number]['definition'],
+      }));
+      const next = {
+        ...target,
+        lenses,
+        updatedAt: new Date().toISOString(),
+      };
+      await host.flavors.put(next, 'capture current state');
+      toast.success(`Captured ${lenses.length} lens${lenses.length === 1 ? '' : 'es'} into ${target.name}`);
+    } catch (err) {
+      toast.error(toastText.failed('Capture', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /**
+   * Create a brand-new flavor. `snapshot=true` seeds it with the
+   * current viewer lenses; otherwise it starts empty. The new flavor
+   * is activated so the user can immediately start working in it.
+   */
+  const handleCreate = async (opts: { name: string; snapshot: boolean }) => {
+    setBusy(true);
+    try {
+      const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+      // Slugify the name for a stable id; fall back to a timestamp.
+      const slug = opts.name.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '');
+      const id = `local.${slug || 'flavor'}.${stamp}`;
+      const now = new Date().toISOString();
+      const lenses = opts.snapshot
+        ? useViewerStore.getState().savedLenses.map((lens) => ({
+            id: lens.id,
+            name: lens.name ?? lens.id,
+            definition: lens as unknown as Parameters<typeof host.flavors.put>[0]['lenses'][number]['definition'],
+          }))
+        : [];
+      const flavor: Flavor = {
+        schemaVersion: 1,
+        id,
+        name: opts.name,
+        description: opts.snapshot
+          ? 'Captured from current viewer state.'
+          : 'New empty flavor.',
+        createdAt: now,
+        updatedAt: now,
+        extensions: [],
+        lenses,
+        savedQueries: [],
+        keybindings: [],
+        layout: { state: {} },
+        settings: {},
+      };
+      await host.flavors.put(flavor, opts.snapshot ? 'created from current state' : 'created empty');
+      await host.flavors.activate(id);
+      toast.success(`Created "${opts.name}"${opts.snapshot ? ` with ${lenses.length} lens${lenses.length === 1 ? '' : 'es'}` : ''}.`);
+    } catch (err) {
+      toast.error(toastText.failed('Create', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /** Rename a flavor in place. Keeps the id stable — only `name` changes. */
+  const handleRename = async (id: string, name: string) => {
+    setBusy(true);
+    try {
+      const target = await host.flavors.list().then((list) => list.find((f) => f.id === id));
+      if (!target) {
+        toast.error(`Flavor "${id}" not found.`);
+        return;
+      }
+      if (target.name === name) return;
+      await host.flavors.put({ ...target, name, updatedAt: new Date().toISOString() }, `renamed to "${name}"`);
+      toast.success(`Renamed to "${name}".`);
+    } catch (err) {
+      toast.error(toastText.failed('Rename', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /** Duplicate a flavor with a fresh id and "(copy)" suffix. */
+  const handleDuplicate = async (id: string) => {
+    setBusy(true);
+    try {
+      const target = await host.flavors.list().then((list) => list.find((f) => f.id === id));
+      if (!target) {
+        toast.error(`Flavor "${id}" not found.`);
+        return;
+      }
+      const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+      const newId = `${target.id}.copy.${stamp}`;
+      const now = new Date().toISOString();
+      const clone: Flavor = {
+        ...target,
+        id: newId,
+        name: `${target.name} (copy)`,
+        createdAt: now,
+        updatedAt: now,
+      };
+      await host.flavors.put(clone, `duplicated from ${target.id}`);
+      toast.success(`Duplicated as "${clone.name}".`);
+    } catch (err) {
+      toast.error(toastText.failed('Duplicate', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleReset = async () => {
+    if (!confirm('Reset to baseline flavor? Other flavors are preserved.')) return;
+    setBusy(true);
+    try {
+      await host.flavors.resetToDefaults();
+      toast.success(toastText.flavorReset());
+    } catch (err) {
+      toast.error(toastText.failed('Reset', err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    const file = files[0];
+    if (!file.name.toLowerCase().endsWith('.iflv')) {
+      toast.error(`Expected a .iflv flavor file, got ${file.name}.`);
+      return;
+    }
+    try {
+      const bytes = new Uint8Array(await file.arrayBuffer());
+      const unpacked = await host.flavors.preview(bytes);
+      setPreview({ bytes, unpacked });
+    } catch (err) {
+      toast.error(`Preview failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  };
+
+  const handleConfirmImport = async (strategy: 'replace' | 'save-as-new') => {
+    if (!preview) return;
+    setBusy(true);
+    try {
+      const flavor = await host.flavors.importFlavor(preview.unpacked, { strategy });
+      toast.success(toastText.flavorImported(flavor.name));
+      setPreview(null);
+    } catch (err) {
+      if (err && (err as { name?: string }).name === 'ExtensionStorageQuotaError') {
+        toast.error(
+          'Out of browser storage — delete a flavor or extension and try again.',
+        );
+      } else {
+        toast.error(toastText.failed('Import', err));
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Palette className="h-4 w-4" />
+            Flavors
+            <HelpHint label="Flavors" side="bottom-start">
+              <p>
+                A <strong>flavor</strong> bundles your installed
+                extensions, lenses, saved queries, layout, settings,
+                and prompt overlay into a switchable profile.
+              </p>
+              <p>
+                <strong>New flavor</strong> / <strong>Save current as
+                flavor</strong> creates one (empty or snapshotted from
+                your current viewer state).
+              </p>
+              <p>
+                Per-row: <strong>Activate</strong> switches to it
+                (lenses restore). <strong>Camera</strong> captures the
+                current viewer state into THAT flavor (not just the
+                active one). Click the name to rename.{' '}
+                <strong>Copy</strong> duplicates,{' '}
+                <strong>Download</strong> exports a <code>.iflv</code>.
+              </p>
+              <p>
+                <strong>Import</strong> previews a <code>.iflv</code>{' '}
+                then offers replace / save-as-new / three-way merge.{' '}
+                <strong>Reset</strong> restores the empty baseline.
+              </p>
+            </HelpHint>
+          </DialogTitle>
+        </DialogHeader>
+
+        {preview ? (
+          <FlavorImportPreview
+            unpacked={preview.unpacked}
+            busy={busy}
+            onCancel={() => setPreview(null)}
+            onMerge={() => {
+              setMergeTarget(preview.unpacked.flavor);
+              setPreview(null);
+            }}
+            onSaveAsNew={() => void handleConfirmImport('save-as-new')}
+            onReplace={() => void handleConfirmImport('replace')}
+          />
+        ) : (
+          <>
+            <FlavorListView
+              flavors={flavors}
+              activeId={activeId}
+              busy={busy}
+              liveLensCount={liveLensCount}
+              onActivate={(id) => void handleActivate(id)}
+              onExport={(id) => void handleExport(id)}
+              onDelete={(id) => void handleDelete(id)}
+              onImportClick={() => fileInputRef.current?.click()}
+              onReset={() => void handleReset()}
+              onCaptureInto={(id) => void handleCaptureInto(id)}
+              onRename={(id, name) => void handleRename(id, name)}
+              onDuplicate={(id) => void handleDuplicate(id)}
+              onCreate={(opts) => void handleCreate(opts)}
+            />
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".iflv"
+              className="hidden"
+              onChange={(e) => {
+                void handleFiles(e.target.files);
+                e.target.value = '';
+              }}
+            />
+          </>
+        )}
+
+        <FlavorMergeDialog
+          open={!!mergeTarget}
+          theirs={mergeTarget}
+          onClose={() => setMergeTarget(null)}
+          onMerged={() => void refresh()}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/extensions/FlavorImportPreview.tsx

@@ -0,0 +1,79 @@
+/* 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/. */
+
+/**
+ * `FlavorImportPreview` — render an unpacked .iflv preview and offer
+ * the three import strategies (merge / save as new / replace).
+ *
+ * Sits inside `FlavorDialog` when a preview is pending. Pure
+ * presentational component; the dialog owns the busy state and the
+ * outgoing actions.
+ */
+
+import { FilePlus, GitMerge } from 'lucide-react';
+import type { UnpackedFlavor } from '@ifc-lite/extensions';
+import { Button } from '@/components/ui/button';
+
+interface FlavorImportPreviewProps {
+  unpacked: UnpackedFlavor;
+  busy: boolean;
+  onCancel(): void;
+  onMerge(): void;
+  onSaveAsNew(): void;
+  onReplace(): void;
+}
+
+export function FlavorImportPreview({
+  unpacked,
+  busy,
+  onCancel,
+  onMerge,
+  onSaveAsNew,
+  onReplace,
+}: FlavorImportPreviewProps) {
+  return (
+    <div className="space-y-3">
+      <div className="text-sm font-medium">Import preview</div>
+      <div className="rounded border bg-muted/30 p-3 text-xs space-y-1">
+        <div>
+          <span className="text-muted-foreground">Name:</span>{' '}
+          <span className="font-medium">{unpacked.flavor.name}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">ID:</span>{' '}
+          <code className="font-mono">{unpacked.flavor.id}</code>
+        </div>
+        {unpacked.flavor.description && (
+          <div className="text-muted-foreground">{unpacked.flavor.description}</div>
+        )}
+        <div className="text-muted-foreground">
+          {unpacked.flavor.extensions.length} extensions ·{' '}
+          {unpacked.flavor.lenses.length} lenses ·{' '}
+          {unpacked.flavor.savedQueries.length} queries
+        </div>
+        {unpacked.summary && (
+          <div className="italic text-muted-foreground border-l-2 border-muted pl-2 mt-1">
+            {unpacked.summary}
+          </div>
+        )}
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        <Button variant="ghost" size="sm" onClick={onCancel} disabled={busy}>
+          Cancel
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onMerge} disabled={busy}>
+          <GitMerge className="mr-1 h-3.5 w-3.5" />
+          Merge…
+        </Button>
+        <Button variant="outline" size="sm" onClick={onSaveAsNew} disabled={busy}>
+          <FilePlus className="mr-1 h-3.5 w-3.5" />
+          Save as new
+        </Button>
+        <Button size="sm" onClick={onReplace} disabled={busy}>
+          Replace existing
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/extensions/FlavorIndicator.tsx

@@ -0,0 +1,81 @@
+/* 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/. */
+
+/**
+ * `FlavorIndicator` — status-bar chip showing the active flavor.
+ *
+ * Reads from the extension host's `FlavorService`. Re-renders on
+ * flavor changes (activate, import, switch). Clicking opens the
+ * flavor switcher — for Phase 3 that surfaces the export/import
+ * dialog; the merge UI lands in T13.
+ *
+ * Spec: docs/architecture/ai-customization/05-flavors-and-sharing.md §4.
+ */
+
+import { useEffect, useState } from 'react';
+import { Palette } from 'lucide-react';
+import type { Flavor } from '@ifc-lite/extensions';
+import { useOptionalExtensionHost } from '@/sdk/ExtensionHostProvider';
+
+interface FlavorIndicatorProps {
+  onClick?: () => void;
+}
+
+export function FlavorIndicator({ onClick }: FlavorIndicatorProps) {
+  const host = useOptionalExtensionHost();
+  const [flavor, setFlavor] = useState<Flavor | undefined>();
+
+  useEffect(() => {
+    if (!host) return;
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const next = await host.flavors.getActive();
+        if (!cancelled) setFlavor(next);
+      } catch (err) {
+        console.warn('[FlavorIndicator] getActive failed:', err);
+      }
+    };
+    void refresh();
+    const off = host.flavors.onChange(() => {
+      void refresh();
+    });
+    return () => {
+      cancelled = true;
+      off();
+    };
+  }, [host]);
+
+  if (!host) return null;
+
+  const label = flavor?.name ?? 'Default';
+  // Slightly more emphasised treatment than the surrounding status
+  // bar items so the entry to the flavor system is visible without
+  // an animated walkthrough. Bordered chip + foreground text on
+  // active, muted on default.
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={
+        flavor
+          ? `Active flavor: ${flavor.name}. Click to manage flavors.`
+          : 'No active flavor. Click to manage flavors.'
+      }
+      title={
+        flavor
+          ? `Flavors — switchable profiles of your extensions, lenses, queries, and overlay.\nActive: ${flavor.name}${flavor.description ? `\n${flavor.description}` : ''}\nClick to switch / export / import / merge.`
+          : 'Flavors — switchable profiles of your extensions, lenses, and settings.\nClick to manage.'
+      }
+      className={
+        flavor
+          ? 'flex items-center gap-1 rounded-md border border-primary/40 bg-primary/5 px-1.5 py-0.5 text-foreground hover:bg-primary/10 transition-colors'
+          : 'flex items-center gap-1 rounded-md border border-dashed border-muted-foreground/40 px-1.5 py-0.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors'
+      }
+    >
+      <Palette className="h-3.5 w-3.5" />
+      <span className="max-w-[140px] truncate text-[11px] font-medium">{label}</span>
+    </button>
+  );
+}