@campfire-interactive/volume-intelligence-ui 0.6.0 → 0.9.0

package/dist/index.d.ts

@@ -150,12 +150,21 @@ interface SegmentMappingEntry {
     segmentId: string;
     transformRule?: string | null;
 }
+type AliasStatus = 'suggested' | 'approved' | 'rejected';
 interface SourceValueAlias {
     id: string;
     sourceId: string;
-    level: number;
+    /** Segment identity (replaces the old hierarchy-only `level`).
+     *  targetCategory: 'hierarchy_level' | 'automotive_field' | 'dimension';
+     *  targetKey: 'level1'..'level6' | 'plant_name'|… | 'dim1'..'dimN'. */
+    targetCategory: string;
+    targetKey: string;
     rawValue: string;
     canonicalValue: string;
+    /** Two-stage lifecycle — only 'approved' aliases are used downstream. */
+    status: AliasStatus;
+    confidence?: number | null;
+    suggestedBy?: string | null;
     createdAt: string;
     updatedAt: string;
 }
@@ -163,6 +172,13 @@ interface ValueAliasEntry {
     rawValue: string;
     canonicalValue: string;
 }
+/** A mapped segment an alias can be defined for (built by the host from the
+ *  source's segment mappings). */
+interface AliasTarget {
+    targetCategory: string;
+    targetKey: string;
+    label: string;
+}
 interface RelinkResult {
     totalOverlay: number;
     linked: number;
@@ -300,8 +316,16 @@ interface SourceAdminTransport {
         items: SegmentMappingRow[];
     }>;
     listValueAliases(sourceId: string): Promise<SourceValueAlias[]>;
+    /** Bulk-replace the APPROVED aliases for a segment. OPTIONAL/newer shape
+     *  keyed by (targetCategory, targetKey); falls back to replaceLevelValueAliases
+     *  for hosts still on the hierarchy-level shape. */
+    replaceValueAliases?(sourceId: string, targetCategory: string, targetKey: string, entries: ValueAliasEntry[]): Promise<SourceValueAlias[]>;
     replaceLevelValueAliases(sourceId: string, level: number, entries: ValueAliasEntry[]): Promise<SourceValueAlias[]>;
     deleteValueAlias(aliasId: string): Promise<void>;
+    /** Approve/reject a suggested alias. OPTIONAL: when omitted the card hides the
+     *  suggested-review controls (a host that predates the workflow is unaffected). */
+    approveValueAlias?(aliasId: string): Promise<SourceValueAlias>;
+    rejectValueAlias?(aliasId: string): Promise<SourceValueAlias>;
     relinkOverlaySource(sourceId: string): Promise<RelinkResult>;
     getTenantConfig(): Promise<TenantVolumeConfig | null>;
     setTenantSource(sourceId: string): Promise<TenantVolumeConfig>;
@@ -369,6 +393,14 @@ interface VolumeSourcesListProps {
      * (ADR §6) while the list itself stays host-agnostic.
      */
     renderActiveSourceExtras?: (source: VolumeSource) => ReactNode;
+    /**
+     * When true, the list is view-only: the create / add-from-template / set-active
+     * affordances are hidden so a non-admin host (e.g. forecast members) can show
+     * sources without editing them. Defaults to false — existing embedders are
+     * unaffected. Mutations are never reachable in this mode; the host should
+     * still enforce the boundary server-side.
+     */
+    readOnly?: boolean;
     className?: string;
 }
 /**
@@ -379,7 +411,7 @@ interface VolumeSourcesListProps {
  * The VI-webapp's active-source analytical sub-cards (enrichment toggle,
  * backtests) are intentionally NOT here — per ADR §6 they stay VI-webapp-only.
  */
-declare function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras, className }: VolumeSourcesListProps): react.JSX.Element;
+declare function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras, readOnly, className }: VolumeSourcesListProps): react.JSX.Element;
 
 /**
  * Segment mapper — a catalog-driven, required-first assignment surface built for
@@ -422,8 +454,11 @@ interface UnifiedSegmentMapperProps {
         segmentId: string;
     }>) => Promise<void>;
     saving: boolean;
+    /** View-only: assignments can't be changed and Save is disabled. Follows the
+     *  `locked` convention used by TallLayoutMappings / ValueAliasesCard. */
+    locked?: boolean;
 }
-declare function UnifiedSegmentMapper({ segments, mappableDimensions, initialMappings, onSave, saving, }: UnifiedSegmentMapperProps): react.JSX.Element;
+declare function UnifiedSegmentMapper({ segments, mappableDimensions, initialMappings, onSave, saving, locked, }: UnifiedSegmentMapperProps): react.JSX.Element;
 
 interface VolumeSourceDetailProps {
     transport: SourceAdminTransport;
@@ -432,6 +467,14 @@ interface VolumeSourceDetailProps {
     onOpenSource: (sourceId: string) => void;
     /** Optional "All sources →" affordance; hidden when omitted. */
     onBack?: () => void;
+    /**
+     * View-only mode: hides the Danger-zone tab and disables every mutating
+     * control (layout, unique key, segment detect/add/delete, mapper save,
+     * value aliases). For non-admin hosts (e.g. forecast members). Defaults to
+     * false — existing embedders unaffected. The host must still enforce the
+     * boundary server-side.
+     */
+    readOnly?: boolean;
     className?: string;
 }
 /**
@@ -440,7 +483,7 @@ interface VolumeSourceDetailProps {
  * Ported from forecast's SourceDetailPage; adminApi → injected transport,
  * react-router → onOpenSource/onBack callbacks, shadcn/Tailwind → plain CSS.
  */
-declare function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, className }: VolumeSourceDetailProps): react.JSX.Element;
+declare function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, readOnly, className }: VolumeSourceDetailProps): react.JSX.Element;
 
 interface TallLayoutMappingsProps {
     transport: SourceAdminTransport;
@@ -450,18 +493,25 @@ interface TallLayoutMappingsProps {
 declare function TallLayoutMappings({ transport, source, locked }: TallLayoutMappingsProps): react.JSX.Element;
 
 /**
- * Per-source, per-level value alias editor. Ported from forecast; adminApi
- * calls lifted to the injected transport. The matcher applies aliases to both
- * sides of the overlay→base comparison, so an operator can fix vocabulary
- * drift (e.g. "MICHIGAN" → "MICHIGAN ASSEMBLY") without re-uploading.
+ * Per-source value alias editor. Aliases normalise a raw source value to a
+ * canonical one for a mapped segment (targetCategory/targetKey) — the matcher
+ * applies approved hierarchy aliases to both sides of the overlay→base compare;
+ * automotive aliases are consumed by downstream repos via the seam API.
+ *
+ * Two stages: `suggested` aliases (populated externally, e.g. cfi-ai-hub) are
+ * shown in a review list with Approve/Reject; `approved` aliases are the
+ * editable set. `targets` (mapped segments) comes from the host; when omitted we
+ * fall back to hierarchy levels 1..6 so older hosts keep working.
  */
 interface ValueAliasesCardProps {
     transport: SourceAdminTransport;
     sourceId: string;
     locked: boolean;
     isOverlay: boolean;
+    /** Mapped segments aliases can be defined for. Falls back to level1..6. */
+    targets?: AliasTarget[];
 }
-declare function ValueAliasesCard({ transport, sourceId, locked, isOverlay }: ValueAliasesCardProps): react.JSX.Element;
+declare function ValueAliasesCard({ transport, sourceId, locked, isOverlay, targets }: ValueAliasesCardProps): react.JSX.Element;
 
 declare const HIERARCHY_LEVEL_COUNT = 6;
 /** Display labels for hierarchy levels 1..6 (the mapping of source columns to
@@ -474,4 +524,4 @@ declare const DEFAULT_LEVEL_NAMES: Record<number, string>;
 declare const AUTOMOTIVE_SLOTS: AutomotiveSlot[];
 declare const AUTOMOTIVE_TRANSFORM_LABELS: Record<string, string>;
 
-export { AUTOMOTIVE_SLOTS, AUTOMOTIVE_TRANSFORM_LABELS, type AutomotiveSlot, type ClearSourceDataResult, type CreateSegmentInput, type CreateSourceInput, DEFAULT_LEVEL_NAMES, type DetectSegmentsResult, HIERARCHY_LEVEL_COUNT, type ListErrorsResult, type RelinkResult, type SegmentMappingCategory, type SegmentMappingCategoryKeys, type SegmentMappingEntry, type SegmentMappingKeys, type SegmentMappingRow, type SourceAdminTransport, type SourceLayout, type SourceTemplateSummary, type SourceValueAlias, type SourceWithSegments, TallLayoutMappings, type TallLayoutMappingsProps, type TenantVolumeConfig, UnifiedSegmentMapper, type UnifiedSegmentMapperProps, type UpdateSourceInput, type Upload, type UploadError, type UploadErrorRow, type UploadInput, type UploadListParams, type UploadListResponse, type UploadRecord, type UploadStats, type UploadStatus, type ValueAliasEntry, ValueAliasesCard, type ValueAliasesCardProps, VolumeFiles, type VolumeFilesProps, type VolumeFilesTransport, VolumeImport, type VolumeImportProps, type VolumeSource$1 as VolumeImportSource, type VolumeImportTransport, type UploadStatus$1 as VolumeImportUploadStatus, type VolumeSource, VolumeSourceDetail, type VolumeSourceDetailProps, type VolumeSourceKind, type VolumeSourceLayout, type VolumeSourceSegment, VolumeSourcesList, type VolumeSourcesListProps };
+export { AUTOMOTIVE_SLOTS, AUTOMOTIVE_TRANSFORM_LABELS, type AliasStatus, type AliasTarget, type AutomotiveSlot, type ClearSourceDataResult, type CreateSegmentInput, type CreateSourceInput, DEFAULT_LEVEL_NAMES, type DetectSegmentsResult, HIERARCHY_LEVEL_COUNT, type ListErrorsResult, type MappableDimension, type RelinkResult, type RequiredMappingStatus, type SegmentMappingCategory, type SegmentMappingCategoryKeys, type SegmentMappingEntry, type SegmentMappingKeys, type SegmentMappingRow, type SourceAdminTransport, type SourceLayout, type SourceTemplateSummary, type SourceValueAlias, type SourceWithSegments, TallLayoutMappings, type TallLayoutMappingsProps, type TenantVolumeConfig, UnifiedSegmentMapper, type UnifiedSegmentMapperProps, type UpdateSourceInput, type Upload, type UploadError, type UploadErrorRow, type UploadInput, type UploadListParams, type UploadListResponse, type UploadRecord, type UploadStats, type UploadStatus, type ValueAliasEntry, ValueAliasesCard, type ValueAliasesCardProps, VolumeFiles, type VolumeFilesProps, type VolumeFilesTransport, VolumeImport, type VolumeImportProps, type VolumeSource$1 as VolumeImportSource, type VolumeImportTransport, type UploadStatus$1 as VolumeImportUploadStatus, type VolumeSource, VolumeSourceDetail, type VolumeSourceDetailProps, type VolumeSourceKind, type VolumeSourceLayout, type VolumeSourceSegment, VolumeSourcesList, type VolumeSourcesListProps };

package/dist/index.js

@@ -786,7 +786,7 @@ import { useCallback as useCallback3, useEffect as useEffect3, useState as useSt
 import { CheckCircle2, Sparkles } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var EMPTY_FORM = { code: "", name: "", description: "", headerRowIndex: 0, volumeHeaderFormat: "MMM yyyy" };
-function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras, className }) {
+function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras, readOnly = false, className }) {
   const [sources, setSources] = useState3([]);
   const [activeSourceId, setActiveSourceId] = useState3(null);
   const [templates, setTemplates] = useState3([]);
@@ -883,7 +883,7 @@ function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras,
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "cfi-vi-row", children: [
+      !readOnly && /* @__PURE__ */ jsxs4("div", { className: "cfi-vi-row", children: [
         availableTemplates.length > 0 && /* @__PURE__ */ jsxs4(Btn, { variant: "outline", size: "sm", onClick: () => setShowTemplates(true), children: [
           /* @__PURE__ */ jsx4(Sparkles, { size: 14, "aria-hidden": true }),
           " Add from template"
@@ -906,7 +906,7 @@ function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras,
             /* @__PURE__ */ jsxs4("span", { className: "cfi-vi-row", children: [
               /* @__PURE__ */ jsx4(Badge, { variant: "outline", children: src.code }),
               !src.isActive && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", children: "Disabled" }),
-              !isActive && src.kind === "base" && /* @__PURE__ */ jsx4(Btn, { variant: "outline", size: "sm", disabled: activating === src.id, onClick: () => handleActivate(src), children: activating === src.id ? "Activating\u2026" : "Set Active" })
+              !readOnly && !isActive && src.kind === "base" && /* @__PURE__ */ jsx4(Btn, { variant: "outline", size: "sm", disabled: activating === src.id, onClick: () => handleActivate(src), children: activating === src.id ? "Activating\u2026" : "Set Active" })
             ] })
           ] }) }),
           /* @__PURE__ */ jsxs4(CardBody, { children: [
@@ -1092,7 +1092,8 @@ function UnifiedSegmentMapper({
   mappableDimensions,
   initialMappings,
   onSave,
-  saving
+  saving,
+  locked = false
 }) {
   const dims = useMemo3(
     () => mappableDimensions?.length ? mappableDimensions : CANONICAL_MAPPABLE,
@@ -1132,6 +1133,7 @@ function UnifiedSegmentMapper({
   const dirty = dims.some((d) => (assign[d.key] ?? "") !== (savedAssign[d.key] ?? ""));
   const canSave = dirty && missingRequired.length === 0 && !saving;
   function setOne(dimKey, segId) {
+    if (locked) return;
     setAssign((p) => {
       const next = { ...p, [dimKey]: segId };
       if (segId) {
@@ -1147,12 +1149,13 @@ function UnifiedSegmentMapper({
     });
   }
   function clickColumn(segId) {
-    if (!activeDim) return;
+    if (!activeDim || locked) return;
     setOne(activeDim, segId);
     const nextEmpty = [...required, ...optional].find((d) => d.key !== activeDim && !assign[d.key] && d.required);
     setActiveDim(nextEmpty?.key ?? null);
   }
   async function handleSave() {
+    if (locked) return;
     const hierarchy = [];
     const automotive = [];
     const dimensions = [];
@@ -1194,8 +1197,10 @@ function UnifiedSegmentMapper({
       "div",
       {
         className: `cfi-vi-hier-row${isActive ? " cfi-vi-dropzone--active" : ""}`,
-        style: { cursor: "pointer", borderRadius: 6 },
-        onClick: () => setActiveDim(isActive ? null : d.key),
+        style: { cursor: locked ? "default" : "pointer", borderRadius: 6 },
+        onClick: () => {
+          if (!locked) setActiveDim(isActive ? null : d.key);
+        },
         onDragOver: (e) => {
           e.preventDefault();
           setDropDim(d.key);
@@ -1264,7 +1269,7 @@ function UnifiedSegmentMapper({
         /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-box", children: optional.map(renderRow) })
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-mapper-save", children: [
-        /* @__PURE__ */ jsx5(Btn, { size: "sm", onClick: handleSave, disabled: !canSave, children: saving ? "Saving\u2026" : "Save Mapping" }),
+        /* @__PURE__ */ jsx5(Btn, { size: "sm", onClick: handleSave, disabled: !canSave || locked, children: saving ? "Saving\u2026" : "Save Mapping" }),
         dirty && missingRequired.length === 0 && !saving && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-mapper-dirty", children: "Unsaved changes" }),
         !dirty && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-muted", children: "Up to date" })
       ] })
@@ -1287,12 +1292,14 @@ function UnifiedSegmentMapper({
       /* @__PURE__ */ jsx5("div", { className: "cfi-vi-pool", children: pool.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "cfi-vi-pool-empty", children: query ? "No columns match the filter." : "All columns assigned." }) : /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chips", children: pool.map((s) => /* @__PURE__ */ jsxs5(
         "div",
         {
-          draggable: true,
-          onDragStart: () => setDragging(s.id),
+          draggable: !locked,
+          onDragStart: () => {
+            if (!locked) setDragging(s.id);
+          },
           onDragEnd: () => setDragging(null),
           onClick: () => clickColumn(s.id),
           className: "cfi-vi-chip",
-          style: { cursor: activeDim ? "pointer" : "grab" },
+          style: { cursor: locked ? "default" : activeDim ? "pointer" : "grab" },
           title: activeDim ? "Click to assign" : "Drag onto a dimension, or select a dimension first",
           children: [
             /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chip-dot" }),
@@ -1306,7 +1313,7 @@ function UnifiedSegmentMapper({
 }
 
 // src/VolumeSourceDetail.tsx
-import { useEffect as useEffect7, useRef as useRef3, useState as useState7 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef4, useState as useState7 } from "react";
 import { KeyRound, Lock, Rows, Columns, AlertTriangle as AlertTriangle3, Layers, SlidersHorizontal, Tag } from "lucide-react";
 
 // src/TallLayoutMappings.tsx
@@ -1410,18 +1417,32 @@ function TallLayoutMappings({ transport, source, locked }) {
 }
 
 // src/ValueAliasesCard.tsx
-import { useEffect as useEffect6, useMemo as useMemo5, useState as useState6 } from "react";
-import { Plus, Trash2, ArrowRight, Save, RotateCw } from "lucide-react";
+import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef3, useState as useState6 } from "react";
+import { Plus, Trash2, ArrowRight, Save, RotateCw, Check, X as X3 } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function ValueAliasesCard({ transport, sourceId, locked, isOverlay }) {
-  const [selectedLevel, setSelectedLevel] = useState6(4);
+var HIERARCHY_FALLBACK = [1, 2, 3, 4, 5, 6].map((n) => ({
+  targetCategory: "hierarchy_level",
+  targetKey: `level${n}`,
+  label: `L${n} \u2014 ${DEFAULT_LEVEL_NAMES[n]}`
+}));
+var keyOf = (t) => `${t.targetCategory}:${t.targetKey}`;
+function ValueAliasesCard({ transport, sourceId, locked, isOverlay, targets }) {
+  const targetList = targets && targets.length > 0 ? targets : HIERARCHY_FALLBACK;
+  const [selectedKey, setSelectedKey] = useState6(keyOf(targetList[0]));
   const [aliases, setAliases] = useState6([]);
   const [draft, setDraft] = useState6([]);
   const [saving, setSaving] = useState6(false);
+  const [busyId, setBusyId] = useState6(null);
   const [error, setError] = useState6(null);
   const [loading, setLoading] = useState6(true);
   const [relinking, setRelinking] = useState6(false);
   const [relinkResult, setRelinkResult] = useState6(null);
+  const editedRef = useRef3(false);
+  const selected = useMemo5(
+    () => targetList.find((t) => keyOf(t) === selectedKey) ?? targetList[0],
+    [targetList, selectedKey]
+  );
+  const matchesSelected = (a) => a.targetCategory === selected.targetCategory && a.targetKey === selected.targetKey;
   useEffect6(() => {
     let cancelled = false;
     setLoading(true);
@@ -1439,21 +1460,39 @@ function ValueAliasesCard({ transport, sourceId, locked, isOverlay }) {
       cancelled = true;
     };
   }, [sourceId, transport]);
+  const approved = useMemo5(() => aliases.filter((a) => matchesSelected(a) && a.status === "approved"), [aliases, selected]);
+  const suggested = useMemo5(() => aliases.filter((a) => matchesSelected(a) && a.status === "suggested"), [aliases, selected]);
   useEffect6(() => {
-    setDraft(
-      aliases.filter((a) => a.level === selectedLevel).map((a) => ({ id: a.id, rawValue: a.rawValue, canonicalValue: a.canonicalValue }))
-    );
-  }, [aliases, selectedLevel]);
+    editedRef.current = false;
+  }, [selectedKey]);
+  useEffect6(() => {
+    if (!editedRef.current) {
+      setDraft(approved.map((a) => ({ id: a.id, rawValue: a.rawValue, canonicalValue: a.canonicalValue })));
+    }
+  }, [approved]);
+  useEffect6(() => {
+    if (!targetList.some((t) => keyOf(t) === selectedKey)) {
+      setSelectedKey(keyOf(targetList[0]));
+    }
+  }, [targetList, selectedKey]);
   const isDirty = useMemo5(() => {
-    const saved = aliases.filter((a) => a.level === selectedLevel).map((a) => `${a.rawValue}${a.canonicalValue}`).sort();
+    const saved = approved.map((a) => `${a.rawValue.trim().toUpperCase()}${a.canonicalValue.trim().toUpperCase()}`).sort();
     const current = draft.filter((d) => d.rawValue.trim() && d.canonicalValue.trim()).map((d) => `${d.rawValue.trim().toUpperCase()}${d.canonicalValue.trim().toUpperCase()}`).sort();
     if (saved.length !== current.length) return true;
-    for (let i = 0; i < saved.length; i++) if (saved[i] !== current[i]) return true;
-    return false;
-  }, [aliases, draft, selectedLevel]);
-  const addRow = () => setDraft((p) => [...p, { id: null, rawValue: "", canonicalValue: "" }]);
-  const updateRow = (i, patch) => setDraft((p) => p.map((r, idx) => idx === i ? { ...r, ...patch } : r));
-  const removeRow = (i) => setDraft((p) => p.filter((_, idx) => idx !== i));
+    return saved.some((s, i) => s !== current[i]);
+  }, [approved, draft]);
+  const addRow = () => {
+    editedRef.current = true;
+    setDraft((p) => [...p, { id: null, rawValue: "", canonicalValue: "" }]);
+  };
+  const updateRow = (i, patch) => {
+    editedRef.current = true;
+    setDraft((p) => p.map((r, idx) => idx === i ? { ...r, ...patch } : r));
+  };
+  const removeRow = (i) => {
+    editedRef.current = true;
+    setDraft((p) => p.filter((_, idx) => idx !== i));
+  };
   async function handleRelink() {
     setRelinking(true);
     setError(null);
@@ -1472,42 +1511,79 @@ function ValueAliasesCard({ transport, sourceId, locked, isOverlay }) {
     setError(null);
     try {
       const entries = draft.filter((d) => d.rawValue.trim() && d.canonicalValue.trim()).map((d) => ({ rawValue: d.rawValue.trim().toUpperCase(), canonicalValue: d.canonicalValue.trim().toUpperCase() }));
-      const updated = await transport.replaceLevelValueAliases(sourceId, selectedLevel, entries);
-      setAliases((prev) => [...prev.filter((a) => a.level !== selectedLevel), ...updated]);
+      let updated;
+      if (transport.replaceValueAliases) {
+        updated = await transport.replaceValueAliases(sourceId, selected.targetCategory, selected.targetKey, entries);
+      } else {
+        const level = parseInt(selected.targetKey.replace("level", ""), 10);
+        updated = await transport.replaceLevelValueAliases(sourceId, level, entries);
+      }
+      setAliases((prev) => [...prev.filter((a) => !(matchesSelected(a) && a.status === "approved")), ...updated.filter((a) => a.status === "approved")]);
+      editedRef.current = false;
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to save aliases");
     } finally {
       setSaving(false);
     }
   }
+  async function review(aliasId, action) {
+    const fn = action === "approve" ? transport.approveValueAlias : transport.rejectValueAlias;
+    if (!fn) return;
+    setBusyId(aliasId);
+    setError(null);
+    try {
+      const updated = await fn(aliasId);
+      setAliases((prev) => prev.map((a) => a.id === aliasId ? updated : a));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : `Failed to ${action}`);
+    } finally {
+      setBusyId(null);
+    }
+  }
+  const canReview = !!transport.approveValueAlias && !!transport.rejectValueAlias;
   if (loading) return /* @__PURE__ */ jsx7("p", { className: "cfi-vi-muted", children: "Loading aliases\u2026" });
   return /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-aliases", children: [
     /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-row cfi-vi-row--between", children: [
       /* @__PURE__ */ jsxs7("div", { children: [
         /* @__PURE__ */ jsx7("h2", { className: "cfi-vi-h2", children: "Value Aliases" }),
         /* @__PURE__ */ jsxs7("p", { className: "cfi-vi-muted", style: { fontSize: "var(--cfi-font-size-xs, 11px)" }, children: [
-          "Normalise level values when this source uses different vocabulary than the base/overlay it joins to (e.g. ",
+          "Normalise segment values when this source uses different vocabulary than what it joins to (e.g. ",
           /* @__PURE__ */ jsx7("span", { className: "cfi-vi-mono", children: '"MICHIGAN" \u2192 "MICHIGAN ASSEMBLY"' }),
-          "). Applied at match time \u2014 no re-upload."
+          "). Only approved aliases take effect."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-field", style: { minWidth: 140 }, children: [
-        /* @__PURE__ */ jsx7("label", { className: "cfi-vi-label", children: "Level" }),
-        /* @__PURE__ */ jsx7("select", { className: "cfi-vi-input", value: String(selectedLevel), onChange: (e) => setSelectedLevel(parseInt(e.target.value, 10)), children: [1, 2, 3, 4, 5, 6].map((n) => /* @__PURE__ */ jsxs7("option", { value: n, children: [
-          "L",
-          n,
-          " \u2014 ",
-          DEFAULT_LEVEL_NAMES[n]
-        ] }, n)) })
+      /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-field", style: { minWidth: 200 }, children: [
+        /* @__PURE__ */ jsx7("label", { className: "cfi-vi-label", children: "Segment" }),
+        /* @__PURE__ */ jsx7("select", { className: "cfi-vi-input", value: selectedKey, onChange: (e) => setSelectedKey(e.target.value), children: targetList.map((t) => /* @__PURE__ */ jsx7("option", { value: keyOf(t), children: t.label }, keyOf(t))) })
       ] })
     ] }),
+    canReview && suggested.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-panel", style: { borderColor: "var(--cfi-color-warning, #f59e0b)" }, children: [
+      /* @__PURE__ */ jsxs7("h3", { className: "cfi-vi-mapper-h3", style: { margin: 0 }, children: [
+        "Suggested (",
+        suggested.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx7("p", { className: "cfi-vi-muted", style: { fontSize: "var(--cfi-font-size-xs, 11px)" }, children: "Populated by an upstream system. Approve to make them take effect, or reject to dismiss." }),
+      /* @__PURE__ */ jsx7("div", { className: "cfi-vi-alias-rows", children: suggested.map((s) => /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-row", children: [
+        /* @__PURE__ */ jsx7("span", { className: "cfi-vi-mono", children: s.rawValue }),
+        /* @__PURE__ */ jsx7(ArrowRight, { size: 14, className: "cfi-vi-muted", "aria-hidden": true }),
+        /* @__PURE__ */ jsx7("span", { className: "cfi-vi-mono", style: { flex: 1 }, children: s.canonicalValue }),
+        s.confidence != null && /* @__PURE__ */ jsxs7("span", { className: "cfi-vi-muted", style: { fontSize: "var(--cfi-font-size-xs, 11px)" }, children: [
+          Math.round(s.confidence * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxs7(Btn, { variant: "outline", size: "sm", onClick: () => void review(s.id, "approve"), disabled: locked || busyId === s.id, children: [
+          /* @__PURE__ */ jsx7(Check, { size: 14, "aria-hidden": true }),
+          " Approve"
+        ] }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "cfi-vi-icon-btn", onClick: () => void review(s.id, "reject"), disabled: locked || busyId === s.id, title: "Reject", children: /* @__PURE__ */ jsx7(X3, { size: 14, "aria-hidden": true }) })
+      ] }, s.id)) })
+    ] }),
     /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-panel", children: [
       draft.length === 0 ? /* @__PURE__ */ jsxs7("p", { className: "cfi-vi-muted", style: { fontStyle: "italic", fontSize: "var(--cfi-font-size-xs, 12px)" }, children: [
-        "No aliases at L",
-        selectedLevel,
-        " (",
-        DEFAULT_LEVEL_NAMES[selectedLevel],
-        "). Click ",
+        "No approved aliases for ",
+        /* @__PURE__ */ jsx7("strong", { children: selected.label }),
+        ". Click ",
         /* @__PURE__ */ jsx7("strong", { children: "+ Add alias" }),
         " to create one."
       ] }) : /* @__PURE__ */ jsx7("div", { className: "cfi-vi-alias-rows", children: draft.map((row, i) => /* @__PURE__ */ jsxs7("div", { className: "cfi-vi-row", children: [
@@ -1554,7 +1630,7 @@ function ValueAliasesCard({ transport, sourceId, locked, isOverlay }) {
             variant: "outline",
             size: "sm",
             onClick: () => void handleRelink(),
-            disabled: relinking || isDirty,
+            disabled: relinking || isDirty || locked,
             title: isDirty ? "Save aliases first, then re-link" : "Re-run overlay \u2192 base resolution against current aliases",
             children: [
               /* @__PURE__ */ jsx7(RotateCw, { size: 14, className: relinking ? "cfi-vi-spin" : "", "aria-hidden": true }),
@@ -1572,7 +1648,7 @@ function ValueAliasesCard({ transport, sourceId, locked, isOverlay }) {
 
 // src/VolumeSourceDetail.tsx
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, className }) {
+function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, readOnly = false, className }) {
   const id = sourceId;
   const [source, setSource] = useState7(null);
   const [allSources, setAllSources] = useState7([]);
@@ -1584,7 +1660,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
   const [savingKey, setSavingKey] = useState7(false);
   const [selectedKeyId, setSelectedKeyId] = useState7("__none__");
   const [hasData, setHasData] = useState7(false);
-  const fileRef = useRef3(null);
+  const fileRef = useRef4(null);
   const [savingLayout, setSavingLayout] = useState7(false);
   const [editLayout, setEditLayout] = useState7("wide");
   const [editValueDateFormat, setEditValueDateFormat] = useState7("yyyy-MM-dd");
@@ -1750,12 +1826,16 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
   if (!source) return /* @__PURE__ */ jsx8(Root, { className, children: /* @__PURE__ */ jsx8("p", { className: "cfi-vi-error", children: "Source not found" }) });
   const keySegment = source.segments.find((s) => s.id === source.uniqueKeySegmentId);
   const isOverlay = source.kind === "overlay";
+  const aliasTargets = useMemo6(
+    () => mappingRows.filter((m) => m.targetCategory === "hierarchy_level" || m.targetCategory === "automotive_field" || m.targetCategory === "dimension").map((m) => ({ targetCategory: m.targetCategory, targetKey: m.targetKey, label: `${m.segmentLabel} \xB7 ${m.targetKey}` })),
+    [mappingRows]
+  );
   const TABS = [
     { id: "structure", label: "Structure", Icon: SlidersHorizontal },
     { id: "mapping", label: "Mapping", Icon: Layers },
     { id: "aliases", label: "Aliases", Icon: Tag },
     { id: "danger", label: "Danger zone", Icon: AlertTriangle3 }
-  ];
+  ].filter((t) => !readOnly || t.id !== "danger");
   return /* @__PURE__ */ jsx8(Root, { className, children: /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-detail", children: [
     /* @__PURE__ */ jsxs8("div", { children: [
       /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-row", style: { gap: 8 }, children: [
@@ -1845,7 +1925,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                 {
                   className: "cfi-vi-input",
                   value: editLayout,
-                  disabled: hasData || savingLayout,
+                  disabled: hasData || savingLayout || readOnly,
                   onChange: (e) => setEditLayout(e.target.value),
                   children: [
                     /* @__PURE__ */ jsx8("option", { value: "wide", children: "wide" }),
@@ -1862,13 +1942,13 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                   className: "cfi-vi-mono",
                   value: editValueDateFormat,
                   placeholder: "yyyy-MM-dd",
-                  disabled: hasData || savingLayout,
+                  disabled: hasData || savingLayout || readOnly,
                   onChange: (e) => setEditValueDateFormat(e.target.value)
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx8(Btn, { size: "sm", onClick: () => void saveLayoutAndRouting(), disabled: hasData || savingLayout, children: savingLayout ? "Saving\u2026" : "Save layout" })
+          /* @__PURE__ */ jsx8(Btn, { size: "sm", onClick: () => void saveLayoutAndRouting(), disabled: hasData || savingLayout || readOnly, children: savingLayout ? "Saving\u2026" : "Save layout" })
         ] }),
         /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-panel", children: [
           /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-row", children: [
@@ -1884,7 +1964,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                 {
                   className: "cfi-vi-input",
                   value: selectedKeyId,
-                  disabled: hasData,
+                  disabled: hasData || readOnly,
                   onChange: (e) => setSelectedKeyId(e.target.value),
                   children: [
                     /* @__PURE__ */ jsx8("option", { value: "__none__", children: "None \u2014 use display name" }),
@@ -1893,7 +1973,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx8(Btn, { size: "sm", onClick: saveUniqueKey, disabled: savingKey || hasData, children: savingKey ? "Saving\u2026" : "Save" })
+            /* @__PURE__ */ jsx8(Btn, { size: "sm", onClick: saveUniqueKey, disabled: savingKey || hasData || readOnly, children: savingKey ? "Saving\u2026" : "Save" })
           ] })
         ] })
       ] }),
@@ -1904,7 +1984,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
             source.segments.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsx8(Btn, { variant: "outline", size: "sm", onClick: () => fileRef.current?.click(), disabled: detecting || hasData, children: detecting ? "Detecting\u2026" : "Detect from file" }),
+          /* @__PURE__ */ jsx8(Btn, { variant: "outline", size: "sm", onClick: () => fileRef.current?.click(), disabled: detecting || hasData || readOnly, children: detecting ? "Detecting\u2026" : "Detect from file" }),
           /* @__PURE__ */ jsx8(
             "input",
             {
@@ -1932,7 +2012,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                   className: "cfi-vi-mono",
                   value: newSegmentLabel,
                   placeholder: "e.g. Color",
-                  disabled: hasData || addingSegment,
+                  disabled: hasData || addingSegment || readOnly,
                   onChange: (e) => setNewSegmentLabel(e.target.value),
                   onKeyDown: (e) => {
                     if (e.key === "Enter" && newSegmentLabel.trim()) void handleAddSegment();
@@ -1947,7 +2027,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                 {
                   className: "cfi-vi-input",
                   value: newSegmentDataType,
-                  disabled: hasData || addingSegment,
+                  disabled: hasData || addingSegment || readOnly,
                   onChange: (e) => setNewSegmentDataType(e.target.value),
                   children: [
                     /* @__PURE__ */ jsx8("option", { value: "string", children: "string" }),
@@ -1957,7 +2037,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx8(Btn, { size: "sm", onClick: () => void handleAddSegment(), disabled: hasData || addingSegment || !newSegmentLabel.trim(), children: addingSegment ? "Adding\u2026" : "Add segment" })
+            /* @__PURE__ */ jsx8(Btn, { size: "sm", onClick: () => void handleAddSegment(), disabled: hasData || addingSegment || readOnly || !newSegmentLabel.trim(), children: addingSegment ? "Adding\u2026" : "Add segment" })
           ] })
         ] }),
         source.segments.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "cfi-vi-muted", children: "No segments yet. Upload a sample file to auto-detect." }) : /* @__PURE__ */ jsxs8("table", { className: "cfi-vi-table", children: [
@@ -1983,7 +2063,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
                 className: "cfi-vi-icon-btn",
                 style: { color: "var(--cfi-color-error, #dc2626)" },
                 onClick: () => void handleDelete(seg.id),
-                disabled: hasData,
+                disabled: hasData || readOnly,
                 title: "Delete segment",
                 children: "\xD7"
               }
@@ -1993,7 +2073,7 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
       ] })
     ] }),
     tab === "mapping" && /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-tabpanel", children: [
-      source.layout === "tall" && /* @__PURE__ */ jsx8(TallLayoutMappings, { transport, source, locked: hasData }),
+      source.layout === "tall" && /* @__PURE__ */ jsx8(TallLayoutMappings, { transport, source, locked: hasData || readOnly }),
       /* @__PURE__ */ jsxs8("div", { children: [
         /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-row", children: [
           /* @__PURE__ */ jsx8(Layers, { size: 16, className: "cfi-vi-muted", "aria-hidden": true }),
@@ -2035,13 +2115,14 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
             mappableDimensions,
             initialMappings: mappingRows,
             onSave: handleSaveMapping,
-            saving: savingMapping
+            saving: savingMapping,
+            locked: readOnly
           }
         )
       ] })
     ] }),
-    tab === "aliases" && /* @__PURE__ */ jsx8("div", { className: "cfi-vi-tabpanel", children: /* @__PURE__ */ jsx8(ValueAliasesCard, { transport, sourceId: source.id, locked: false, isOverlay }) }),
-    tab === "danger" && /* @__PURE__ */ jsx8("div", { className: "cfi-vi-tabpanel", children: /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-danger", children: [
+    tab === "aliases" && /* @__PURE__ */ jsx8("div", { className: "cfi-vi-tabpanel", children: /* @__PURE__ */ jsx8(ValueAliasesCard, { transport, sourceId: source.id, locked: readOnly, isOverlay, targets: aliasTargets }) }),
+    tab === "danger" && !readOnly && /* @__PURE__ */ jsx8("div", { className: "cfi-vi-tabpanel", children: /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-danger", children: [
       /* @__PURE__ */ jsxs8("div", { className: "cfi-vi-row", style: { color: "var(--cfi-color-error, #dc2626)" }, children: [
         /* @__PURE__ */ jsx8(AlertTriangle3, { size: 16, "aria-hidden": true }),
         /* @__PURE__ */ jsx8("h2", { className: "cfi-vi-h2", children: "Danger zone \u2014 clear source data" })

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "@campfire-interactive/volume-intelligence-ui",
-  "version": "0.6.0",
-  "description": "Shared Volume Intelligence UI components (volume import) for the Campfire Suite — embedded by the VI webapp and by consuming apps (OMSF) so there is one import surface, not two that drift.",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "@campfire-interactive/design-tokens": "*",
-    "lucide-react": "^0.487.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.3"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}
+{
+  "name": "@campfire-interactive/volume-intelligence-ui",
+  "version": "0.9.0",
+  "description": "Shared Volume Intelligence UI components (volume import) for the Campfire Suite — embedded by the VI webapp and by consuming apps (OMSF) so there is one import surface, not two that drift.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@campfire-interactive/design-tokens": "*",
+    "lucide-react": "^0.487.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}