@ifc-lite/viewer 1.23.0 → 1.25.0

package/src/components/extensions/PlanCard.tsx

@@ -0,0 +1,227 @@
+/* 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/. */
+
+/**
+ * `PlanCard` — render an AuthoringPlan with edit affordances.
+ *
+ * The plan-before-code UX: the AI proposes a structured plan; the user
+ * trims contributions, prunes capabilities, edits the summary, then
+ * approves. After approval, the chat panel routes through the actual
+ * bundle synthesis (a follow-up that consumes this card's `onApprove`).
+ *
+ * Spec: docs/architecture/ai-customization/04-ai-authoring.md §4.
+ */
+
+import { useMemo, useState } from 'react';
+import { Check, ChevronRight, Edit3, ShieldAlert, Sparkles, X } from 'lucide-react';
+import {
+  computeRisks,
+  overallTier,
+  parseCapability,
+  type AuthoringPlan,
+  type CapabilityRisk,
+  type RiskTier,
+} from '@ifc-lite/extensions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+interface PlanCardProps {
+  /** The plan to show. Editable copy is stored in component state. */
+  plan: AuthoringPlan;
+  /** Called when the user confirms the (possibly edited) plan. */
+  onApprove(plan: AuthoringPlan): void;
+  /** Called when the user cancels / dismisses. */
+  onCancel(): void;
+  /** Hide the inline edit fields. Useful for read-only review of past plans. */
+  readOnly?: boolean;
+}
+
+export function PlanCard({ plan, onApprove, onCancel, readOnly }: PlanCardProps) {
+  const [draft, setDraft] = useState<AuthoringPlan>(plan);
+  const risks = useMemo<CapabilityRisk[]>(() => {
+    const parsed = draft.capabilities
+      .map((raw) => parseCapability(raw))
+      .filter((r): r is { ok: true; value: ReturnType<typeof parseCapability> extends { ok: true; value: infer V } ? V : never } => r.ok)
+      .map((r) => r.value);
+    return computeRisks(parsed);
+  }, [draft.capabilities]);
+  const overall = overallTier(risks);
+
+  const toggleCapability = (raw: string) => {
+    setDraft((p) => ({
+      ...p,
+      capabilities: p.capabilities.includes(raw)
+        ? p.capabilities.filter((c) => c !== raw)
+        : [...p.capabilities, raw],
+    }));
+  };
+
+  const removeContribution = (idx: number) => {
+    setDraft((p) => ({
+      ...p,
+      contributions: p.contributions.filter((_, i) => i !== idx),
+    }));
+  };
+
+  return (
+    <div className={cn(
+      'rounded-lg border bg-card p-4 space-y-3',
+      overall === 'red' && 'border-destructive/50',
+      overall === 'yellow' && 'border-amber-500/40',
+    )}>
+      <div className="flex items-start gap-2">
+        <div className={cn(
+          'mt-1 p-1.5 rounded-md',
+          overall === 'red' ? 'bg-destructive/20 text-destructive' : overall === 'yellow' ? 'bg-amber-500/20 text-amber-600 dark:text-amber-400' : 'bg-primary/20 text-primary',
+        )}>
+          {overall === 'red' ? <ShieldAlert className="h-4 w-4" /> : <Sparkles className="h-4 w-4" />}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-xs uppercase tracking-wide font-semibold text-muted-foreground">
+            Authoring plan
+          </div>
+          {readOnly ? (
+            <div className="text-sm font-medium">{draft.summary}</div>
+          ) : (
+            <Input
+              value={draft.summary}
+              onChange={(e) => setDraft((p) => ({ ...p, summary: e.target.value }))}
+              className="mt-1 text-sm font-medium"
+              aria-label="Plan summary"
+            />
+          )}
+        </div>
+      </div>
+
+      <p className="text-xs text-muted-foreground leading-relaxed">{draft.rationale}</p>
+
+      <div className="space-y-1.5">
+        <Label className="text-[11px] uppercase tracking-wide">Contributions</Label>
+        {draft.contributions.length === 0 ? (
+          <div className="text-xs text-muted-foreground italic">No contributions.</div>
+        ) : (
+          <ul className="space-y-1">
+            {draft.contributions.map((c, i) => (
+              <li key={i} className="flex items-center gap-2 text-xs rounded-md border bg-muted/30 px-2 py-1.5">
+                <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
+                <span className="font-mono uppercase text-[10px] text-muted-foreground shrink-0">{c.kind}</span>
+                <span className="flex-1 min-w-0 truncate">{c.label}</span>
+                {c.slot && (
+                  <code className="text-[10px] text-muted-foreground font-mono">{c.slot}</code>
+                )}
+                {!readOnly && (
+                  <Button
+                    size="icon-xs"
+                    variant="ghost"
+                    onClick={() => removeContribution(i)}
+                    aria-label={`Remove contribution ${i}`}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <Label className="text-[11px] uppercase tracking-wide">Capabilities</Label>
+        {draft.capabilities.length === 0 ? (
+          <div className="text-xs text-muted-foreground italic">No capabilities requested.</div>
+        ) : (
+          <ul className="space-y-1">
+            {risks.map((risk) => (
+              <li
+                key={risk.capability.raw}
+                className="flex items-start gap-2 text-xs rounded-md border bg-muted/30 px-2 py-1.5"
+              >
+                {!readOnly && (
+                  <input
+                    type="checkbox"
+                    className="mt-0.5"
+                    checked={draft.capabilities.includes(risk.capability.raw)}
+                    onChange={() => toggleCapability(risk.capability.raw)}
+                    aria-label={`Toggle capability ${risk.capability.raw}`}
+                  />
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <code className="font-mono text-[10px]">{risk.capability.raw}</code>
+                    <RiskBadge tier={risk.tier} />
+                  </div>
+                  <div className="mt-0.5 text-[11px] text-muted-foreground">
+                    {risk.description}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <Label className="text-[11px] uppercase tracking-wide">Triggers</Label>
+        <div className="flex flex-wrap gap-1">
+          {draft.triggers.map((t) => (
+            <code key={t} className="text-[10px] font-mono rounded bg-muted px-1.5 py-0.5">{t}</code>
+          ))}
+        </div>
+      </div>
+
+      {draft.tests.length > 0 && (
+        <div className="space-y-1.5">
+          <Label className="text-[11px] uppercase tracking-wide">Tests</Label>
+          <ul className="space-y-1">
+            {draft.tests.map((t, i) => (
+              <li key={i} className="text-xs rounded-md border bg-muted/30 px-2 py-1.5">
+                <div className="font-medium">{t.name}</div>
+                <div className="text-[11px] text-muted-foreground">
+                  Fixture: <code className="font-mono">{t.fixture}</code>
+                </div>
+                <div className="text-[11px] text-muted-foreground italic mt-0.5">
+                  {t.assertionSummary}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {draft.notes && (
+        <div className="text-[11px] text-muted-foreground italic border-l-2 border-muted pl-2">
+          {draft.notes}
+        </div>
+      )}
+
+      {!readOnly && (
+        <div className="flex items-center justify-end gap-2 pt-1">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            <X className="mr-1 h-3.5 w-3.5" />
+            Cancel
+          </Button>
+          <Button size="sm" onClick={() => onApprove(draft)}>
+            <Check className="mr-1 h-3.5 w-3.5" />
+            Author it
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RiskBadge({ tier }: { tier: RiskTier }) {
+  return (
+    <span className={cn(
+      'inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] 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>
+  );
+}

package/src/components/extensions/PrivacyPanel.tsx

@@ -0,0 +1,312 @@
+/* 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/. */
+
+/**
+ * `PrivacyPanel` — local privacy controls.
+ *
+ * Surfaces the no-content rule from RFC §06 §7 in prose, plus three
+ * actions the user can take any time:
+ *
+ *   - Export the action log as a JSON file (data they can audit).
+ *   - Clear the action log.
+ *   - Edit the prompt overlay (their personal notes the assistant
+ *     sees alongside the system prompt).
+ *
+ * Everything here is local. Nothing here triggers a network call.
+ *
+ * Spec: docs/architecture/ai-customization/06-self-improvement.md §7.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { Brain, Download, Eraser, ScrollText, Save, Shield, X } from 'lucide-react';
+import {
+  clampOverlay,
+  extractMemoryProposals,
+  mergeIntoOverlay,
+  type Flavor,
+  type MemoryProposal,
+  type TranscriptTurn,
+} from '@ifc-lite/extensions';
+import { useViewerStore } from '@/store';
+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';
+
+interface PrivacyPanelProps {
+  onClose?: () => void;
+}
+
+export function PrivacyPanel({ onClose }: PrivacyPanelProps) {
+  const host = useExtensionHost();
+  const [logSize, setLogSize] = useState({ events: 0, bytes: 0 });
+  const [activeFlavor, setActiveFlavor] = useState<Flavor | undefined>();
+  const [overlayDraft, setOverlayDraft] = useState('');
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [proposals, setProposals] = useState<MemoryProposal[]>([]);
+  const chatMessages = useViewerStore((s) => s.chatMessages);
+  // `refresh` is captured once by the long-lived `flavors.onChange`
+  // listener, so it must read `dirty` through a ref — a closed-over
+  // `dirty` would freeze at `false` and clobber the user's edits when
+  // a later flavor change fires.
+  const dirtyRef = useRef(dirty);
+  dirtyRef.current = dirty;
+
+  const refresh = async () => {
+    try {
+      setLogSize({ events: host.actionLog.size(), bytes: host.actionLog.byteSize() });
+      const flavor = await host.flavors.getActive();
+      setActiveFlavor(flavor);
+      if (flavor && !dirtyRef.current) {
+        setOverlayDraft(flavor.promptOverlay?.content ?? '');
+      }
+    } catch (err) {
+      console.warn('[PrivacyPanel] refresh failed:', err);
+    }
+  };
+
+  useEffect(() => {
+    void refresh();
+    const offFlavor = host.flavors.onChange(() => void refresh());
+    const offLog = host.actionLog.subscribe(() => {
+      setLogSize({ events: host.actionLog.size(), bytes: host.actionLog.byteSize() });
+    });
+    return () => {
+      offFlavor();
+      offLog();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [host]);
+
+  const handleExportLog = () => {
+    const json = host.actionLog.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-action-log-${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('Action log exported.');
+  };
+
+  const handleClearLog = () => {
+    if (!confirm('Clear the local action log? Suggestions reset until you build up new patterns.')) return;
+    host.actionLog.clear();
+    // Wipe the IDB mirror too — otherwise reload would resurrect the
+    // events the user just asked to forget.
+    void host.clearPersistedActionLog().catch((err) => {
+      console.warn('[PrivacyPanel] clear persisted action log failed:', err);
+    });
+    setLogSize({ events: 0, bytes: 0 });
+    toast.success('Action log cleared.');
+  };
+
+  const handleExtractMemory = () => {
+    const transcript: TranscriptTurn[] = chatMessages.map((m) => ({
+      role: m.role === 'system' ? 'system' : (m.role as 'user' | 'assistant'),
+      content: m.content,
+    }));
+    const next = extractMemoryProposals(transcript);
+    setProposals(next);
+    if (next.length === 0) {
+      toast.info('No stable preferences detected in this session yet.');
+    } else {
+      toast.success(`Found ${next.length} candidate preference${next.length === 1 ? '' : 's'}.`);
+    }
+  };
+
+  const handleAcceptProposals = () => {
+    const next = mergeIntoOverlay(overlayDraft, proposals);
+    setOverlayDraft(next);
+    setDirty(true);
+    setProposals([]);
+    toast.success(`Added ${proposals.length} preference${proposals.length === 1 ? '' : 's'} to the overlay. Save to keep them.`);
+  };
+
+  const handleSaveOverlay = async () => {
+    if (!activeFlavor) {
+      toast.error('No active flavor — switch to one before editing its overlay.');
+      return;
+    }
+    setBusy(true);
+    try {
+      const clamped = clampOverlay(overlayDraft, { maxTokens: 4000 });
+      await host.flavors.put(
+        { ...activeFlavor, promptOverlay: clamped.overlay },
+        'overlay edit',
+      );
+      setOverlayDraft(clamped.overlay.content);
+      setDirty(false);
+      if (clamped.truncated) {
+        toast.info(`Overlay clamped to ~${clamped.estimatedTokens} tokens.`);
+      } else {
+        toast.success(`Overlay saved (${clamped.estimatedTokens} tokens).`);
+      }
+    } catch (err) {
+      toast.error(`Save failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  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">
+          <Shield className="h-4 w-4" />
+          <h2 className="text-sm font-semibold">Privacy</h2>
+          <HelpHint label="Privacy">
+            <p>
+              IFClite keeps a <strong>content-free action log</strong>{' '}
+              of intents you perform (model loads, lens applies,
+              exports) — used by the pattern miner to suggest one-click
+              tools. The log never records model content, chat content,
+              file names, or API keys.
+            </p>
+            <p>
+              The <strong>prompt overlay</strong> on the active flavor
+              is appended to every chat system prompt — use it for
+              stable preferences. <strong>Extract from chat</strong>{' '}
+              scans the current session for explicit preferences and
+              proposes them.
+            </p>
+          </HelpHint>
+        </div>
+        {onClose && (
+          <Button size="icon" variant="ghost" onClick={onClose} aria-label="Close">
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="px-4 py-3 space-y-4 text-xs">
+          <section className="space-y-1.5">
+            <h3 className="text-[11px] uppercase tracking-wide font-semibold text-muted-foreground">
+              What we store locally
+            </h3>
+            <p className="text-muted-foreground leading-relaxed">
+              ifc-lite keeps a content-free <strong>action log</strong> of the
+              high-level intents you perform (model loads, lens applies,
+              exports). We use it to mine recurring patterns and surface
+              one-click tool suggestions. The log never records model
+              content, chat content, file names, or API keys.
+            </p>
+            <p className="text-muted-foreground leading-relaxed">
+              Suggestions, the audit log, the prompt overlay, and your
+              flavor library are all stored in your browser's IndexedDB —
+              nothing here is sent off device unless you explicitly export.
+            </p>
+          </section>
+
+          <section className="space-y-1.5">
+            <h3 className="text-[11px] uppercase tracking-wide font-semibold text-muted-foreground">
+              Action log
+            </h3>
+            <div className="rounded border bg-muted/30 px-3 py-2">
+              <div>
+                {logSize.events} events · {(logSize.bytes / 1024).toFixed(1)} KiB
+              </div>
+              <div className="mt-2 flex flex-wrap gap-1.5">
+                <Button size="sm" variant="outline" onClick={handleExportLog} disabled={logSize.events === 0}>
+                  <Download className="mr-1 h-3.5 w-3.5" />
+                  Export JSON
+                </Button>
+                <Button size="sm" variant="outline" onClick={handleClearLog} disabled={logSize.events === 0}>
+                  <Eraser className="mr-1 h-3.5 w-3.5" />
+                  Clear
+                </Button>
+              </div>
+            </div>
+          </section>
+
+          <section className="space-y-1.5">
+            <h3 className="text-[11px] uppercase tracking-wide font-semibold text-muted-foreground">
+              Prompt overlay
+            </h3>
+            <p className="text-muted-foreground">
+              Notes appended to the AI assistant's system prompt for the
+              active flavor. Use it for stable preferences ("write CSV
+              exports with semicolons", "default to red color for IfcWall").
+              Capped at ~4000 tokens.
+            </p>
+            {!activeFlavor ? (
+              <div className="rounded border bg-muted/30 px-3 py-2 text-muted-foreground italic">
+                No active flavor. Activate or import one to attach overlay
+                notes to it.
+              </div>
+            ) : (
+              <>
+                <div className="text-[10px] text-muted-foreground flex items-center gap-1">
+                  <ScrollText className="h-3 w-3" />
+                  Editing overlay for{' '}
+                  <span className="font-medium text-foreground">{activeFlavor.name}</span>
+                </div>
+                <textarea
+                  className="w-full min-h-[160px] rounded border bg-background p-2 font-mono text-[11px] leading-relaxed"
+                  value={overlayDraft}
+                  onChange={(e) => {
+                    setOverlayDraft(e.target.value);
+                    setDirty(true);
+                  }}
+                  placeholder="e.g. Always export CSV with semicolon separators. Default lens for IfcWall: by-fire-rating."
+                />
+                <div className="flex items-center justify-between gap-2 flex-wrap">
+                  <span className="text-[10px] text-muted-foreground">
+                    {Math.ceil(overlayDraft.length / 4)} approx tokens
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <Button size="sm" variant="outline" onClick={handleExtractMemory} disabled={chatMessages.length === 0}>
+                      <Brain className="mr-1 h-3.5 w-3.5" />
+                      Extract from chat
+                    </Button>
+                    <Button size="sm" onClick={() => void handleSaveOverlay()} disabled={busy || !dirty}>
+                      <Save className="mr-1 h-3.5 w-3.5" />
+                      Save overlay
+                    </Button>
+                  </div>
+                </div>
+
+                {proposals.length > 0 && (
+                  <div className="rounded border bg-muted/30 px-3 py-2 space-y-2">
+                    <div className="text-[11px] font-medium">
+                      {proposals.length} candidate preference{proposals.length === 1 ? '' : 's'}
+                    </div>
+                    <div className="text-[10px] text-amber-700 dark:text-amber-400 italic">
+                      Rule-based scan — review each line before saving.
+                      The extractor uses a heuristic blocklist; it is not
+                      a guarantee that no content slips through.
+                    </div>
+                    <ul className="space-y-1 text-[11px]">
+                      {proposals.map((p, i) => (
+                        <li key={i} className="flex items-start gap-2">
+                          <span className="text-muted-foreground">·</span>
+                          <span className="flex-1">{p.phrasing}</span>
+                          <span className="text-[10px] text-muted-foreground">
+                            {Math.round(p.confidence * 100)}%
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                    <div className="flex items-center justify-end gap-1">
+                      <Button size="sm" variant="ghost" onClick={() => setProposals([])}>
+                        Discard
+                      </Button>
+                      <Button size="sm" onClick={handleAcceptProposals}>
+                        Add to overlay
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </section>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}