@ltm-blueverse/alpha-semantic-hub 0.7.0

package/explorer/src/workspaces/DecisionWorkspace/DecisionWorkspace.tsx

@@ -0,0 +1,279 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+import { Scale, Search, ArrowRight, Info } from "lucide-react";
+
+type OutcomeKind = "approved" | "rejected" | "deferred" | "pending" | string;
+
+function outcomeColor(outcome: string) {
+  const o = (outcome ?? "").toLowerCase();
+  if (o.includes("approv") || o.includes("accept")) return { color: "#6ee7b7", bg: "var(--ws-green-soft)", border: "rgba(76,195,138,0.3)" };
+  if (o.includes("reject") || o.includes("denied") || o.includes("fail"))  return { color: "#fca5a5", bg: "var(--ws-red-soft)",   border: "rgba(255,123,114,0.3)" };
+  if (o.includes("defer") || o.includes("pending") || o.includes("review")) return { color: "#fbbf24", bg: "var(--ws-amber-soft)", border: "rgba(242,182,109,0.3)" };
+  return { color: "var(--ws-text-muted)", bg: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.1)" };
+}
+
+function OutcomeBadge({ outcome }: { outcome: OutcomeKind }) {
+  const c = outcomeColor(outcome);
+  return (
+    <span style={{ display: "inline-block", padding: "2px 8px", borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase", color: c.color, background: c.bg, border: `1px solid ${c.border}` }}>
+      {outcome || "unknown"}
+    </span>
+  );
+}
+
+interface ChainStep {
+  id: string;
+  relationship: string;
+  content?: string;
+  type?: string;
+  [key: string]: unknown;
+}
+
+const NODE_ACCENTS = ["#ff2d4b","#4cc38a","#ff7a45","#c084fc","#ff7b72","#38bdf8","#a78bfa"];
+
+function ChainNode({ step, index }: { step: ChainStep; index: number }) {
+  const accent = NODE_ACCENTS[index % NODE_ACCENTS.length];
+  return (
+    <div style={{ padding: "14px 16px", borderRadius: "var(--ws-radius)", background: "var(--ws-surface)", border: `1px solid ${accent}28`, borderLeft: `3px solid ${accent}`, position: "relative" }}>
+      {step.type && (
+        <div style={{ fontFamily: "monospace", fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: accent, marginBottom: 5 }}>
+          {step.type}
+        </div>
+      )}
+      <div style={{ color: "var(--ws-text)", fontSize: 13, fontWeight: 600 }}>{step.content || step.id}</div>
+      {step.id && step.id !== step.content && (
+        <div style={{ fontFamily: "monospace", fontSize: 10, color: "var(--ws-text-dim)", marginTop: 3 }}>{step.id}</div>
+      )}
+    </div>
+  );
+}
+
+function RelEdge({ label }: { label: string }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 0, padding: "2px 0" }}>
+      <div style={{ width: 2, height: 10, background: "var(--ws-border)" }} />
+      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "3px 10px", borderRadius: 999, background: "var(--ws-accent-soft)", border: "1px solid var(--ws-border-strong)", maxWidth: 260 }}>
+        <ArrowRight size={10} color="var(--ws-accent)" />
+        <span style={{ fontSize: 10, fontWeight: 700, color: "var(--ws-accent)", letterSpacing: "0.06em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
+      </div>
+      <div style={{ width: 2, height: 10, background: "var(--ws-border)" }} />
+    </div>
+  );
+}
+
+function CausalFlow({ chain, loading }: { chain: ChainStep[]; loading: boolean }) {
+  if (loading) return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      {[1,2,3].map((i) => <div key={i} className="ws-skeleton" style={{ height: 68 }} />)}
+    </div>
+  );
+  if (!chain.length) return (
+    <div className="ws-empty">
+      <div className="ws-empty-icon"><Info size={28} /></div>
+      <div className="ws-empty-title">No chain steps</div>
+      <div className="ws-empty-body">No causal chain steps were found for this decision.</div>
+    </div>
+  );
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      {chain.map((step, i) => (
+        <div key={`${step.id}-${i}`}>
+          <ChainNode step={step} index={i} />
+          {i < chain.length - 1 && <RelEdge label={chain[i + 1]?.relationship || "→"} />}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function DecisionWorkspace() {
+  const [decisions, setDecisions] = useState<{ decision_id: string; category?: string; outcome?: string }[]>([]);
+  const [selected, setSelected] = useState<{ decision_id: string; category?: string; outcome?: string } | null>(null);
+  const [chain, setChain] = useState<ChainStep[]>([]);
+  const [chainLoading, setChainLoading] = useState(false);
+  const [listLoading, setListLoading] = useState(true);
+  const [filter, setFilter] = useState("");
+  const [error, setError] = useState("");
+
+  // Tracks the active chain request so stale responses from rapid selections are ignored.
+  const chainCtrlRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    const ctrl = new AbortController();
+    setListLoading(true);
+    setError("");
+    fetch("/api/decisions", { signal: ctrl.signal })
+      .then(async (r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const data = await r.json();
+        if (r.status === 207) setError(data.message || "Warning: Partial success loading decisions.");
+        return data;
+      })
+      .then((data) => {
+        if (ctrl.signal.aborted) return;
+        setDecisions(data);
+        if (data.length > 0) void loadChain(data[0]);
+      })
+      .catch((e) => {
+        if (e?.name !== "AbortError") {
+          setError(e instanceof Error ? e.message : "Failed to load decisions.");
+        }
+      })
+      .finally(() => {
+        if (!ctrl.signal.aborted) setListLoading(false);
+      });
+    return () => ctrl.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Cancel any in-flight chain request when the workspace unmounts.
+  useEffect(() => () => { chainCtrlRef.current?.abort(); }, []);
+
+  async function loadChain(d: { decision_id: string; category?: string; outcome?: string }) {
+    chainCtrlRef.current?.abort();
+    const ctrl = new AbortController();
+    chainCtrlRef.current = ctrl;
+
+    setSelected(d);
+    setChainLoading(true);
+    setChain([]);
+    setError("");
+    try {
+      const res = await fetch(`/api/decisions/${encodeURIComponent(d.decision_id)}/chain`, { signal: ctrl.signal });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      if (res.status === 207 && !ctrl.signal.aborted) {
+        setError(data.message || "Warning: Partial success loading chain.");
+      }
+      if (!ctrl.signal.aborted) setChain(data.chain || []);
+    } catch (e) {
+      if (e instanceof Error && e.name !== "AbortError") {
+        setError(e.message);
+      }
+    } finally {
+      if (!ctrl.signal.aborted) setChainLoading(false);
+    }
+  }
+
+  const filtered = useMemo(() => {
+    const q = filter.toLowerCase().trim();
+    if (!q) return decisions;
+    return decisions.filter((d) =>
+      d.decision_id.toLowerCase().includes(q) ||
+      (d.category ?? "").toLowerCase().includes(q) ||
+      (d.outcome ?? "").toLowerCase().includes(q)
+    );
+  }, [decisions, filter]);
+
+  return (
+    <div className="ws-page" style={{ flexDirection: "row" }}>
+      {/* ── Sidebar list ── */}
+      <div className="ws-sidebar" style={{ width: 290 }}>
+        <div className="ws-sidebar-header">
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+            <div style={{ width: 30, height: 30, borderRadius: 9, background: "var(--ws-accent-soft)", border: "1px solid var(--ws-border-strong)", display: "grid", placeItems: "center", color: "var(--ws-accent)", flexShrink: 0 }}>
+              <Scale size={15} />
+            </div>
+            <div style={{ color: "var(--ws-text)", fontSize: 14, fontWeight: 700 }}>Decisions</div>
+            {decisions.length > 0 && !listLoading && (
+              <span className="ws-pill ws-pill--mono" style={{ marginLeft: "auto" }}>{decisions.length}</span>
+            )}
+          </div>
+          <div style={{ position: "relative" }}>
+            <Search size={12} color="var(--ws-text-dim)" style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", pointerEvents: "none" }} />
+            <input
+              className="ws-input"
+              type="text"
+              placeholder="Filter by ID, category, outcome…"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              style={{ paddingLeft: 30, fontSize: 12 }}
+            />
+          </div>
+        </div>
+
+        <div className="ws-sidebar-body">
+          {listLoading ? (
+            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              {[1,2,3,4,5].map((i) => <div key={i} className="ws-skeleton" style={{ height: 58 }} />)}
+            </div>
+          ) : filtered.length === 0 ? (
+            <div className="ws-empty" style={{ padding: "28px 12px" }}>
+              <div className="ws-empty-title">{decisions.length === 0 ? "No decisions" : "No matches"}</div>
+              <div className="ws-empty-body">{decisions.length === 0 ? "No decisions available in the graph." : "Adjust your filter."}</div>
+            </div>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              {filtered.map((d) => {
+                const active = selected?.decision_id === d.decision_id;
+                return (
+                  <button
+                    key={d.decision_id}
+                    className={`ws-list-item${active ? " ws-list-item--active" : ""}`}
+                    onClick={() => void loadChain(d)}
+                  >
+                    <div style={{ fontWeight: 700, fontSize: 12, marginBottom: 5, color: active ? "#ffeef1" : "var(--ws-text)" }}>
+                      {d.decision_id}
+                    </div>
+                    <div style={{ display: "flex", alignItems: "center", gap: 5, flexWrap: "wrap" }}>
+                      {d.category && <span style={{ fontSize: 10, color: "var(--ws-text-dim)" }}>{d.category}</span>}
+                      {d.outcome && <OutcomeBadge outcome={d.outcome} />}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Detail pane ── */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", position: "relative" }}>
+        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 40% at 70% 20%, rgba(255,45,75,0.04), transparent 55%)", pointerEvents: "none" }} />
+
+        {error ? (
+          <div style={{ padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)", margin: "16px 16px 0 16px", zIndex: 2, position: "relative" }}>
+            {error}
+          </div>
+        ) : null}
+
+        {selected ? (
+          <div className="ws-scroll ws-padded ws-animate-in" style={{ position: "relative", zIndex: 1 }}>
+            {/* Decision header */}
+            <div style={{ marginBottom: 28 }}>
+              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 10 }}>
+                <div>
+                  <div className="ws-eyebrow" style={{ marginBottom: 6 }}>Decision Record</div>
+                  <h2 className="ws-title">{selected.decision_id}</h2>
+                </div>
+                {selected.outcome && <OutcomeBadge outcome={selected.outcome} />}
+              </div>
+              {selected.category && (
+                <span className="ws-pill ws-pill--mono">{selected.category}</span>
+              )}
+            </div>
+
+            {/* Chain section */}
+            <div className="ws-card" style={{ padding: 22 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 20 }}>
+                <div style={{ width: 8, height: 8, borderRadius: 999, background: "linear-gradient(135deg, var(--ws-accent), var(--ws-amber))", boxShadow: "0 0 10px rgba(255,45,75,0.4)" }} />
+                <div style={{ color: "var(--ws-text)", fontSize: 14, fontWeight: 700 }}>Causal Chain</div>
+                {chain.length > 0 && !chainLoading && (
+                  <span className="ws-pill ws-pill--accent" style={{ marginLeft: "auto" }}>{chain.length} step{chain.length !== 1 ? "s" : ""}</span>
+                )}
+              </div>
+              <CausalFlow chain={chain} loading={chainLoading} />
+            </div>
+          </div>
+        ) : (
+          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", position: "relative", zIndex: 1 }}>
+            <div className="ws-empty">
+              <div className="ws-empty-icon"><Scale size={32} /></div>
+              <div className="ws-empty-title">No decision selected</div>
+              <div className="ws-empty-body">Select a decision from the list to inspect its causal chain and metadata.</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/DiffMergeWorkspace/DiffMergeWorkspace.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { GitMerge, ArrowRight, CheckCircle2, AlertCircle, Loader2 } from "lucide-react";
+import { logEvent } from "../../store/registryStore";
+
+interface FieldRow { label: string; primary: string; duplicate: string; differs: boolean }
+
+const MOCK_FIELDS: FieldRow[] = [
+  { label: "Name",     primary: "Sample Company Inc.", duplicate: "Sample Company",    differs: true  },
+  { label: "Founded",  primary: "2004-05-12",          duplicate: "2004-05-12",        differs: false },
+  { label: "Type",     primary: "Organization",        duplicate: "Organisation",      differs: true  },
+  { label: "Country",  primary: "US",                  duplicate: "US",                differs: false },
+];
+
+export function DiffMergeWorkspace() {
+  const [primaryId, setPrimaryId]   = useState("n-primary-1");
+  const [duplicateId, setDuplicateId] = useState("n-dup-2");
+  const [status, setStatus]   = useState<"idle" | "loading" | "success" | "error">("idle");
+  const [msg, setMsg]         = useState("");
+
+  async function handleMerge() {
+    setStatus("loading");
+    setMsg("");
+    try {
+      const res = await fetch("/api/enrich/merge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ primary_id: primaryId, duplicate_ids: [duplicateId] }),
+      });
+      const data = await res.json();
+      if (data.merged_into) {
+        setStatus("success");
+        setMsg(`Merged → ${data.merged_into} · ${data.edges_updated ?? 0} edges redirected`);
+        logEvent("merge", `Merged ${duplicateId} → ${data.merged_into} · ${data.edges_updated ?? 0} edges redirected`, {
+          primary: data.merged_into, duplicate: duplicateId, edgesUpdated: data.edges_updated,
+        });
+      } else {
+        throw new Error(data.detail || "Unexpected response");
+      }
+    } catch (e: unknown) {
+      setStatus("error");
+      setMsg(e instanceof Error ? e.message : "Merge failed");
+    }
+  }
+
+  return (
+    <div className="ws-page ws-scroll">
+      <div className="ws-padded" style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 1000, margin: "0 auto", width: "100%" }}>
+        {/* Header */}
+        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+          <div style={{ width: 42, height: 42, borderRadius: 13, background: "var(--ws-purple-soft)", border: "1px solid rgba(192,132,252,0.3)", display: "grid", placeItems: "center", color: "var(--ws-purple)", flexShrink: 0 }}>
+            <GitMerge size={20} />
+          </div>
+          <div>
+            <h2 className="ws-title" style={{ fontSize: 18 }}>Entity Diff &amp; Merge</h2>
+            <div className="ws-body" style={{ marginTop: 2 }}>Compare suspected duplicates side-by-side and reconcile them into a single canonical entity.</div>
+          </div>
+        </div>
+
+        {/* ID inputs */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 12, alignItems: "end" }}>
+          <div>
+            <label className="ws-label">Primary Node ID (keep)</label>
+            <input className="ws-input" value={primaryId} onChange={(e) => { setPrimaryId(e.target.value); setStatus("idle"); }} placeholder="e.g. n-primary-1" />
+          </div>
+          <div style={{ paddingBottom: 2, color: "var(--ws-text-dim)" }}>
+            <ArrowRight size={18} />
+          </div>
+          <div>
+            <label className="ws-label">Duplicate Node ID (remove)</label>
+            <input className="ws-input" value={duplicateId} onChange={(e) => { setDuplicateId(e.target.value); setStatus("idle"); }} placeholder="e.g. n-dup-2" />
+          </div>
+        </div>
+
+        {/* Diff table */}
+        <div className="ws-card" style={{ padding: 0, overflow: "hidden" }}>
+          <div style={{ padding: "6px 16px", background: "rgba(242,182,109,0.06)", borderBottom: "1px solid rgba(242,182,109,0.15)", display: "flex", alignItems: "center", gap: 6 }}>
+            <span style={{ fontSize: 10, fontWeight: 700, color: "var(--ws-amber)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Sample preview</span>
+            <span style={{ fontSize: 11, color: "var(--ws-text-dim)" }}>— field comparison will load from the graph once the backend is connected</span>
+          </div>
+          <div style={{ display: "grid", gridTemplateColumns: "140px 1fr 1fr", background: "rgba(0,0,0,0.28)", borderBottom: "1px solid var(--ws-border)" }}>
+            <div style={{ padding: "10px 16px", fontSize: 11, fontWeight: 700, color: "var(--ws-text-dim)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Field</div>
+            <div style={{ padding: "10px 16px", fontSize: 11, fontWeight: 700, color: "var(--ws-accent)", letterSpacing: "0.08em", textTransform: "uppercase", borderLeft: "1px solid var(--ws-border)" }}>Primary (keep)</div>
+            <div style={{ padding: "10px 16px", fontSize: 11, fontWeight: 700, color: "#fca5a5", letterSpacing: "0.08em", textTransform: "uppercase", borderLeft: "1px solid var(--ws-border)" }}>Duplicate (remove)</div>
+          </div>
+          {MOCK_FIELDS.map((row) => (
+            <div key={row.label} style={{ display: "grid", gridTemplateColumns: "140px 1fr 1fr", borderBottom: "1px solid rgba(255,45,75,0.06)", background: row.differs ? "rgba(242,182,109,0.03)" : "transparent" }}>
+              <div style={{ padding: "12px 16px", fontSize: 12, fontWeight: 600, color: "var(--ws-text-dim)" }}>{row.label}</div>
+              <div style={{ padding: "12px 16px", fontSize: 13, color: "var(--ws-text)", borderLeft: "1px solid var(--ws-border)" }}>{row.primary}</div>
+              <div style={{ padding: "12px 16px", fontSize: 13, color: row.differs ? "#fbbf24" : "var(--ws-text)", fontWeight: row.differs ? 700 : 400, borderLeft: "1px solid var(--ws-border)" }}>
+                {row.duplicate}
+                {row.differs && <span className="ws-pill ws-pill--amber" style={{ marginLeft: 8, fontSize: 9 }}>diff</span>}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Status & action */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          {status === "success" && (
+            <div style={{ display: "flex", alignItems: "center", gap: 7, color: "#6ee7b7", fontSize: 13 }}>
+              <CheckCircle2 size={15} />{msg}
+            </div>
+          )}
+          {status === "error" && (
+            <div style={{ display: "flex", alignItems: "center", gap: 7, color: "#fca5a5", fontSize: 13 }}>
+              <AlertCircle size={15} />{msg}
+            </div>
+          )}
+          <button
+            className="ws-btn ws-btn--primary"
+            onClick={handleMerge}
+            disabled={status === "loading" || !primaryId || !duplicateId}
+            style={{ marginLeft: "auto" }}
+          >
+            {status === "loading" ? <><Loader2 size={14} className="ws-spin" />Merging…</> : <><GitMerge size={14} />Confirm Merge</>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}