@ltm-blueverse/alpha-semantic-hub 0.7.0

package/explorer/src/workspaces/OntologyWorkspace/AlignmentsTab.tsx

@@ -0,0 +1,437 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { CSSProperties } from "react";
+import { GitMerge, Loader2, Sparkles, Trash2 } from "lucide-react";
+import {
+  loadAlignments,
+  loadOntologyRegistry,
+  removeAlignment,
+  saveAlignment,
+  suggestAlignments,
+} from "./api";
+import type { AlignmentRelation, AlignmentSuggestion, OntologyAlignment, OntologyEntry } from "./types";
+
+const RELATIONS: AlignmentRelation[] = [
+  "owl:equivalentClass",
+  "owl:equivalentProperty",
+  "skos:exactMatch",
+  "skos:closeMatch",
+  "skos:broadMatch",
+  "skos:narrowMatch",
+  "skos:relatedMatch",
+];
+
+const RELATION_COLORS: Record<AlignmentRelation, string> = {
+  "owl:equivalentClass": "#7ce7d3",
+  "owl:equivalentProperty": "#7ce7d3",
+  "skos:exactMatch": "#9ee8d7",
+  "skos:closeMatch": "#ff2d4b",
+  "skos:broadMatch": "#ff7a45",
+  "skos:narrowMatch": "#ff7a45",
+  "skos:relatedMatch": "#d2a8ff",
+};
+
+export function AlignmentsTab() {
+  const [registry, setRegistry] = useState<OntologyEntry[]>([]);
+  const [alignments, setAlignments] = useState<OntologyAlignment[]>([]);
+  const [suggestions, setSuggestions] = useState<AlignmentSuggestion[]>([]);
+  const [sourceOntology, setSourceOntology] = useState("");
+  const [targetOntology, setTargetOntology] = useState("");
+  const [sourceUri, setSourceUri] = useState("");
+  const [targetUri, setTargetUri] = useState("");
+  const [relation, setRelation] = useState<AlignmentRelation>("skos:exactMatch");
+  const [confidence, setConfidence] = useState(0.86);
+  const [provenance, setProvenance] = useState("");
+  const [source, setSource] = useState("Ontology Hub");
+  const [reviewer, setReviewer] = useState("");
+  const [threshold, setThreshold] = useState(0.68);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const reload = useCallback(async () => {
+    setError("");
+    const [registryResult, alignmentResult] = await Promise.allSettled([
+      loadOntologyRegistry(),
+      loadAlignments(),
+    ]);
+
+    const errors: string[] = [];
+    if (registryResult.status === "fulfilled") {
+      setRegistry(registryResult.value);
+      setSourceOntology((current) => current || registryResult.value[0]?.uri || "");
+      setTargetOntology((current) => current || registryResult.value[1]?.uri || registryResult.value[0]?.uri || "");
+    } else {
+      errors.push(registryResult.reason instanceof Error ? registryResult.reason.message : "Failed to load ontology registry.");
+    }
+    if (alignmentResult.status === "fulfilled") {
+      setAlignments(alignmentResult.value);
+    } else {
+      errors.push(alignmentResult.reason instanceof Error ? alignmentResult.reason.message : "Failed to load alignments.");
+    }
+    if (errors.length) setError(errors.join(" "));
+  }, []);
+
+  useEffect(() => {
+    let ignore = false;
+    async function fetchInitial() {
+      const [registryResult, alignmentResult] = await Promise.allSettled([
+        loadOntologyRegistry(),
+        loadAlignments(),
+      ]);
+      if (ignore) return;
+
+      const errors: string[] = [];
+      if (registryResult.status === "fulfilled") {
+        setRegistry(registryResult.value);
+        setSourceOntology((current) => current || registryResult.value[0]?.uri || "");
+        setTargetOntology((current) => current || registryResult.value[1]?.uri || registryResult.value[0]?.uri || "");
+      } else {
+        errors.push(registryResult.reason instanceof Error ? registryResult.reason.message : "Failed to load ontology registry.");
+      }
+      if (alignmentResult.status === "fulfilled") {
+        setAlignments(alignmentResult.value);
+      } else {
+        errors.push(alignmentResult.reason instanceof Error ? alignmentResult.reason.message : "Failed to load alignments.");
+      }
+      if (errors.length) setError(errors.join(" "));
+    }
+    void fetchInitial();
+    return () => { ignore = true; };
+  }, []);
+
+  const relationCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const item of alignments) {
+      counts.set(item.relation, (counts.get(item.relation) ?? 0) + 1);
+    }
+    return counts;
+  }, [alignments]);
+
+  // Pairwise matrix: group alignments by (source_ontology, target_ontology) pair.
+  const matrix = useMemo(() => {
+    function ontologyOfUri(uri: string): string {
+      for (const entry of registry) {
+        if (uri === entry.uri || uri.startsWith(entry.uri + "#") || uri.startsWith(entry.uri + "/")) {
+          return entry.uri;
+        }
+      }
+      const hashIdx = uri.lastIndexOf("#");
+      if (hashIdx > 0) return uri.substring(0, hashIdx);
+      const slashIdx = uri.lastIndexOf("/");
+      return slashIdx > 0 ? uri.substring(0, slashIdx) : uri;
+    }
+    const cells: Map<string, OntologyAlignment[]> = new Map();
+    for (const alignment of alignments) {
+      const key = `${ontologyOfUri(alignment.source_uri)}|||${ontologyOfUri(alignment.target_uri)}`;
+      const bucket = cells.get(key) ?? [];
+      bucket.push(alignment);
+      cells.set(key, bucket);
+    }
+    return { ontologies: registry, cells };
+  }, [registry, alignments]);
+
+  const handleSave = useCallback(async () => {
+    if (!sourceUri.trim() || !targetUri.trim()) {
+      setError("Provide both source and target entity URIs.");
+      return;
+    }
+    setBusy(true);
+    setError("");
+    try {
+      await saveAlignment({
+        source_uri: sourceUri.trim(),
+        target_uri: targetUri.trim(),
+        relation,
+        confidence,
+        provenance: provenance || undefined,
+        source: source || undefined,
+        reviewer: reviewer || undefined,
+      });
+      setSourceUri("");
+      setTargetUri("");
+      await reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not save alignment.");
+    } finally {
+      setBusy(false);
+    }
+  }, [sourceUri, targetUri, relation, confidence, provenance, source, reviewer, reload]);
+
+  const handleSuggest = useCallback(async () => {
+    setBusy(true);
+    setError("");
+    try {
+      const data = await suggestAlignments({
+        source_ontology_uri: sourceOntology || undefined,
+        target_ontology_uri: targetOntology || undefined,
+        threshold,
+        limit: 40,
+      });
+      setSuggestions(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not suggest alignments.");
+    } finally {
+      setBusy(false);
+    }
+  }, [sourceOntology, targetOntology, threshold]);
+
+  const handleAcceptSuggestion = useCallback((suggestion: AlignmentSuggestion) => {
+    setSourceUri(suggestion.source_uri);
+    setTargetUri(suggestion.target_uri);
+    setRelation(suggestion.relation);
+    setConfidence(Math.max(0.1, Math.min(1, suggestion.score)));
+    setProvenance(suggestion.reason);
+  }, []);
+
+  const handleRemove = useCallback(async (id: string) => {
+    setBusy(true);
+    setError("");
+    try {
+      await removeAlignment(id);
+      await reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not remove alignment.");
+    } finally {
+      setBusy(false);
+    }
+  }, [reload]);
+
+  return (
+    <div style={pageStyle}>
+      <section style={heroStyle}>
+        <div>
+          <div style={kickerStyle}><GitMerge size={14} /> Alignment Matrix</div>
+          <h2 style={titleStyle}>Cross-ontology mappings</h2>
+          <p style={textStyle}>
+            Manage equivalence and SKOS match relations with confidence, provenance,
+            reviewer context, and label-based suggestions.
+          </p>
+        </div>
+        <div style={summaryGridStyle}>
+          <Metric label="Mappings" value={alignments.length} />
+          <Metric label="Relations" value={relationCounts.size} />
+          <Metric label="Suggestions" value={suggestions.length} />
+        </div>
+      </section>
+
+      {error ? <div style={errorStyle}>{error}</div> : null}
+
+      <div style={ephemeralBannerStyle}>
+        Alignments are stored in server memory and are not persisted across restarts.
+        Export your graph or ontology to preserve recorded mappings.
+      </div>
+
+      {matrix.ontologies.length >= 2 ? (
+        <section style={cardStyle}>
+          <h3 style={sectionTitleStyle}>Pairwise alignment matrix</h3>
+          <div style={{ overflowX: "auto" }}>
+            <table style={matrixTableStyle}>
+              <thead>
+                <tr>
+                  <th style={matrixCornerStyle} />
+                  {matrix.ontologies.map((col) => (
+                    <th key={col.uri} style={matrixColHeaderStyle}>{col.name}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {matrix.ontologies.map((row) => (
+                  <tr key={row.uri}>
+                    <td style={matrixRowHeaderStyle}>{row.name}</td>
+                    {matrix.ontologies.map((col) => {
+                      const key = `${row.uri}|||${col.uri}`;
+                      const cellItems = matrix.cells.get(key) ?? [];
+                      const isDiag = row.uri === col.uri;
+                      return (
+                        <td key={col.uri} style={{ ...matrixCellStyle, background: isDiag ? "rgba(255,255,255,0.015)" : undefined }}>
+                          {isDiag ? <span style={mutedStyle}>—</span> : cellItems.length ? (
+                            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                              {cellItems.map((item) => (
+                                <span
+                                  key={item.id}
+                                  style={{ ...relationBadgeStyle, color: RELATION_COLORS[item.relation], borderColor: `${RELATION_COLORS[item.relation]}44`, cursor: "pointer", fontSize: 9 }}
+                                  title={`${item.source_label} → ${item.target_label} (${Math.round(item.confidence * 100)}%)`}
+                                  onClick={() => {
+                                    setSourceUri(item.source_uri);
+                                    setTargetUri(item.target_uri);
+                                    setRelation(item.relation);
+                                    setConfidence(item.confidence);
+                                    setProvenance(item.provenance ?? "");
+                                  }}
+                                >
+                                  {item.relation.split(":")[1]}
+                                </span>
+                              ))}
+                            </div>
+                          ) : <span style={{ color: "rgba(255,107,129,0.15)", fontSize: 12 }}>·</span>}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <p style={{ ...mutedStyle, marginTop: 10 }}>Click a relation badge to load it into the editor below.</p>
+        </section>
+      ) : null}
+
+      <div style={gridStyle}>
+        <section style={cardStyle}>
+          <h3 style={sectionTitleStyle}>Create or update alignment</h3>
+          <label style={labelStyle}>Source entity URI</label>
+          <input style={inputStyle} value={sourceUri} onChange={(event) => setSourceUri(event.target.value)} />
+          <label style={labelStyle}>Target entity URI</label>
+          <input style={inputStyle} value={targetUri} onChange={(event) => setTargetUri(event.target.value)} />
+          <div style={twoColStyle}>
+            <div>
+              <label style={labelStyle}>Relation</label>
+              <select style={inputStyle} value={relation} onChange={(event) => setRelation(event.target.value as AlignmentRelation)}>
+                {RELATIONS.map((item) => <option key={item}>{item}</option>)}
+              </select>
+            </div>
+            <div>
+              <label style={labelStyle}>Confidence {confidence.toFixed(2)}</label>
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                value={confidence}
+                onChange={(event) => setConfidence(Number(event.target.value))}
+                style={{ width: "100%" }}
+              />
+            </div>
+          </div>
+          <label style={labelStyle}>Provenance note</label>
+          <textarea style={{ ...inputStyle, minHeight: 74, resize: "vertical" }} value={provenance} onChange={(event) => setProvenance(event.target.value)} />
+          <div style={twoColStyle}>
+            <div>
+              <label style={labelStyle}>Source</label>
+              <input style={inputStyle} value={source} onChange={(event) => setSource(event.target.value)} />
+            </div>
+            <div>
+              <label style={labelStyle}>Reviewer</label>
+              <input style={inputStyle} value={reviewer} onChange={(event) => setReviewer(event.target.value)} />
+            </div>
+          </div>
+          <button style={primaryButtonStyle} disabled={busy} onClick={handleSave}>
+            {busy ? <Loader2 size={14} className="ws-spin" /> : <GitMerge size={14} />}
+            Save alignment
+          </button>
+        </section>
+
+        <section style={cardStyle}>
+          <h3 style={sectionTitleStyle}>Suggest alignments</h3>
+          <div style={twoColStyle}>
+            <div>
+              <label style={labelStyle}>Source ontology</label>
+              <select style={inputStyle} value={sourceOntology} onChange={(event) => setSourceOntology(event.target.value)}>
+                <option value="">Any ontology</option>
+                {registry.map((entry) => <option key={entry.uri} value={entry.uri}>{entry.name}</option>)}
+              </select>
+            </div>
+            <div>
+              <label style={labelStyle}>Target ontology</label>
+              <select style={inputStyle} value={targetOntology} onChange={(event) => setTargetOntology(event.target.value)}>
+                <option value="">Any ontology</option>
+                {registry.map((entry) => <option key={entry.uri} value={entry.uri}>{entry.name}</option>)}
+              </select>
+            </div>
+          </div>
+          <label style={labelStyle}>Similarity threshold {threshold.toFixed(2)}</label>
+          <input
+            type="range"
+            min="0.25"
+            max="0.95"
+            step="0.01"
+            value={threshold}
+            onChange={(event) => setThreshold(Number(event.target.value))}
+            style={{ width: "100%" }}
+          />
+          <button style={secondaryButtonStyle} disabled={busy} onClick={handleSuggest}>
+            <Sparkles size={14} />
+            Suggest alignments
+          </button>
+          <div style={suggestionListStyle}>
+            {suggestions.map((item) => (
+              <button key={`${item.source_uri}-${item.target_uri}-${item.relation}`} style={suggestionStyle} onClick={() => handleAcceptSuggestion(item)}>
+                <span style={{ color: "#fff0f2", fontWeight: 800 }}>{item.source_label}</span>
+                <span style={{ color: RELATION_COLORS[item.relation] }}>{item.relation}</span>
+                <span style={{ color: "#fff0f2", fontWeight: 800 }}>{item.target_label}</span>
+                <span style={{ color: "#c99aa3" }}>{Math.round(item.score * 100)}%</span>
+              </button>
+            ))}
+            {!suggestions.length ? <p style={mutedStyle}>Run suggestions to review ranked candidate mappings.</p> : null}
+          </div>
+        </section>
+      </div>
+
+      <section style={cardStyle}>
+        <h3 style={sectionTitleStyle}>Recorded alignments</h3>
+        <div style={tableStyle}>
+          {alignments.map((item) => (
+            <div key={item.id} style={rowStyle}>
+              <div>
+                <div style={{ color: "#fff0f2", fontWeight: 800 }}>{item.source_label || item.source_uri}</div>
+                <div style={monoStyle}>{item.source_uri}</div>
+              </div>
+              <div style={{ ...relationBadgeStyle, color: RELATION_COLORS[item.relation], borderColor: `${RELATION_COLORS[item.relation]}55` }}>
+                {item.relation}
+              </div>
+              <div>
+                <div style={{ color: "#fff0f2", fontWeight: 800 }}>{item.target_label || item.target_uri}</div>
+                <div style={monoStyle}>{item.target_uri}</div>
+              </div>
+              <div style={confidenceStyle}>{Math.round(item.confidence * 100)}%</div>
+              <button style={iconButtonStyle} disabled={busy} onClick={() => handleRemove(item.id)} title="Remove alignment">
+                <Trash2 size={14} />
+              </button>
+            </div>
+          ))}
+          {!alignments.length ? <p style={mutedStyle}>No alignments recorded yet.</p> : null}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: number }) {
+  return (
+    <div style={metricStyle}>
+      <span style={{ color: "#9ee8d7", fontSize: 20, fontWeight: 900 }}>{value.toLocaleString()}</span>
+      <span style={{ color: "#9c7a82", fontSize: 11 }}>{label}</span>
+    </div>
+  );
+}
+
+const pageStyle: CSSProperties = { height: "100%", overflow: "auto", padding: 22, display: "flex", flexDirection: "column", gap: 16 };
+const heroStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 18, padding: 22, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 22, background: "linear-gradient(135deg, rgba(11,25,42,0.94), rgba(7,14,25,0.9))" };
+const kickerStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", color: "#9ee8d7", fontSize: 11, fontWeight: 900, letterSpacing: "0.12em", textTransform: "uppercase" };
+const titleStyle: CSSProperties = { margin: "8px 0", color: "#fff0f2", fontSize: 26, letterSpacing: "-0.04em" };
+const textStyle: CSSProperties = { margin: 0, color: "#c99aa3", lineHeight: 1.6, maxWidth: 620 };
+const summaryGridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "repeat(3, minmax(100px, 1fr))", gap: 10, minWidth: 320 };
+const metricStyle: CSSProperties = { padding: 14, borderRadius: 16, background: "rgba(255,255,255,0.035)", border: "1px solid rgba(255,107,129,0.1)", display: "flex", flexDirection: "column", gap: 4 };
+const gridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "minmax(320px, 0.9fr) minmax(360px, 1.1fr)", gap: 16 };
+const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(12,6,9,0.78)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)" };
+const sectionTitleStyle: CSSProperties = { margin: "0 0 14px", color: "#fff0f2", fontSize: 16 };
+const labelStyle: CSSProperties = { display: "block", color: "#9c7a82", fontSize: 11, fontWeight: 800, margin: "10px 0 6px", textTransform: "uppercase", letterSpacing: "0.08em" };
+const inputStyle: CSSProperties = { width: "100%", boxSizing: "border-box", border: "1px solid rgba(255,107,129,0.14)", borderRadius: 12, padding: "10px 12px", background: "rgba(6,3,5,0.8)", color: "#fff0f2" };
+const twoColStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 };
+const primaryButtonStyle: CSSProperties = { marginTop: 14, width: "100%", border: "1px solid rgba(124,231,211,0.35)", borderRadius: 12, padding: "11px 13px", background: "linear-gradient(135deg, rgba(20,151,136,0.55), rgba(255,45,75,0.35))", color: "#fff0f2", fontWeight: 900, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8 };
+const secondaryButtonStyle: CSSProperties = { ...primaryButtonStyle, background: "rgba(255,107,129,0.08)", borderColor: "rgba(255,107,129,0.18)" };
+const suggestionListStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 8, marginTop: 14, maxHeight: 260, overflow: "auto" };
+const suggestionStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto 1fr auto", gap: 10, alignItems: "center", textAlign: "left", border: "1px solid rgba(255,107,129,0.1)", borderRadius: 12, background: "rgba(255,255,255,0.03)", padding: 10, cursor: "pointer" };
+const tableStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 8 };
+const rowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "1fr auto 1fr auto auto", gap: 12, alignItems: "center", padding: 12, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
+const monoStyle: CSSProperties = { color: "#9c7a82", fontSize: 11, fontFamily: "JetBrains Mono, monospace", wordBreak: "break-all" };
+const relationBadgeStyle: CSSProperties = { padding: "5px 9px", border: "1px solid", borderRadius: 999, fontSize: 10, fontWeight: 900 };
+const confidenceStyle: CSSProperties = { color: "#ff7a45", fontWeight: 900 };
+const iconButtonStyle: CSSProperties = { width: 34, height: 34, borderRadius: 10, border: "1px solid rgba(255,157,175,0.18)", background: "rgba(255,157,175,0.08)", color: "#ff9daf", cursor: "pointer" };
+const mutedStyle: CSSProperties = { margin: 0, color: "#9c7a82", fontSize: 13 };
+const errorStyle: CSSProperties = { padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };
+const ephemeralBannerStyle: CSSProperties = { padding: "9px 14px", borderRadius: 12, color: "#ff7a45", background: "rgba(242,182,109,0.08)", border: "1px solid rgba(242,182,109,0.22)", fontSize: 12 };
+const matrixTableStyle: CSSProperties = { borderCollapse: "collapse", minWidth: "100%", fontSize: 12 };
+const matrixCornerStyle: CSSProperties = { padding: "8px 12px", borderBottom: "1px solid rgba(255,107,129,0.1)" };
+const matrixColHeaderStyle: CSSProperties = { padding: "8px 12px", color: "#9ee8d7", fontWeight: 900, borderBottom: "1px solid rgba(255,107,129,0.1)", textAlign: "center", whiteSpace: "nowrap" };
+const matrixRowHeaderStyle: CSSProperties = { padding: "8px 12px", color: "#9ee8d7", fontWeight: 900, borderRight: "1px solid rgba(255,107,129,0.1)", whiteSpace: "nowrap" };
+const matrixCellStyle: CSSProperties = { padding: "8px 10px", borderBottom: "1px solid rgba(255,107,129,0.06)", borderRight: "1px solid rgba(255,107,129,0.06)", textAlign: "center", verticalAlign: "middle", minWidth: 100 };

package/explorer/src/workspaces/OntologyWorkspace/HealthTab.tsx

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useState } from "react";
+import type { CSSProperties } from "react";
+import { Download, HeartPulse, Loader2, Wrench } from "lucide-react";
+import { loadOntologyHealth, loadOntologyRegistry } from "./api";
+import type { OntologyEntry, OntologyHealthResponse, HealthIssue } from "./types";
+
+interface HealthTabProps {
+  onFixInEditor?: (entityUri: string) => void;
+}
+
+export function HealthTab({ onFixInEditor }: HealthTabProps) {
+  const [registry, setRegistry] = useState<OntologyEntry[]>([]);
+  const [selectedUri, setSelectedUri] = useState("");
+  const [health, setHealth] = useState<OntologyHealthResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    loadOntologyRegistry()
+      .then((entries) => {
+        if (cancelled) return;
+        setRegistry(entries);
+        setSelectedUri((current) => current || entries[0]?.uri || "");
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : "Failed to load ontology registry.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const [prevUri, setPrevUri] = useState(selectedUri);
+  if (selectedUri !== prevUri) {
+    setPrevUri(selectedUri);
+    if (selectedUri) {
+      setLoading(true);
+      setError("");
+    }
+  }
+
+  useEffect(() => {
+    let ignore = false;
+    async function fetchHealth() {
+      if (!selectedUri) return;
+      try {
+        const data = await loadOntologyHealth(selectedUri);
+        if (!ignore) setHealth(data);
+      } catch {
+        if (!ignore) setHealth(null);
+      } finally {
+        if (!ignore) setLoading(false);
+      }
+    }
+    void fetchHealth();
+    return () => { ignore = true; };
+  }, [selectedUri]);
+
+  const exportReport = useCallback(() => {
+    if (!health) return;
+    const blob = new Blob([JSON.stringify(health, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `${health.name.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}-health.json`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+  }, [health]);
+
+  return (
+    <div style={pageStyle}>
+      <section style={heroStyle}>
+        <div>
+          <div style={kickerStyle}><HeartPulse size={14} /> Ontology Health</div>
+          <h2 style={titleStyle}>Quality and governance signals</h2>
+          <p style={textStyle}>
+            Score completeness, consistency, SHACL readiness, alignment coverage,
+            and documentation quality for the selected ontology.
+          </p>
+        </div>
+        <div style={selectorShellStyle}>
+          <label style={labelStyle}>Ontology</label>
+          <select style={inputStyle} value={selectedUri} onChange={(event) => setSelectedUri(event.target.value)}>
+            {registry.map((entry) => <option key={entry.uri} value={entry.uri}>{entry.name}</option>)}
+          </select>
+        </div>
+      </section>
+
+      {error ? <div style={errorStyle}>{error}</div> : null}
+
+      {loading ? (
+        <div style={loadingStyle}><Loader2 size={18} className="ws-spin" /> Computing health dashboard...</div>
+      ) : health ? (
+        <>
+          <section style={{ ...scoreGridStyle, gridTemplateColumns: `220px repeat(${health.dimensions.length}, minmax(180px, 1fr))` }}>
+            <div style={scoreCardStyle}>
+              <span style={scoreValueStyle}>{Math.round(health.total_score)}</span>
+              <span style={mutedStyle}>Total health score</span>
+              <button style={secondaryButtonStyle} onClick={exportReport}><Download size={14} /> Export report</button>
+            </div>
+            {health.dimensions.map((dimension) => (
+              <div key={dimension.key} style={dimensionCardStyle}>
+                <div style={dimensionHeadStyle}>
+                  <span style={{ color: "#fff0f2", fontWeight: 900 }}>{dimension.label}</span>
+                  <span style={statusBadgeStyle(dimension.status)}>{dimension.status}</span>
+                </div>
+                <div style={barTrackStyle}>
+                  <div style={{ ...barFillStyle, width: `${dimension.score}%`, background: dimensionColor(dimension.score, dimension.status) }} />
+                </div>
+                <div style={dimensionFootStyle}>
+                  <span>{Math.round(dimension.score)} / 100</span>
+                  <span>{dimension.detail}</span>
+                </div>
+              </div>
+            ))}
+          </section>
+
+          <section style={cardStyle}>
+            <h3 style={sectionTitleStyle}>Actionable issues</h3>
+            <div style={issueListStyle}>
+              {health.issues.map((issue) => (
+                <IssueRow key={issue.id} issue={issue} onFixInEditor={onFixInEditor} />
+              ))}
+              {!health.issues.length ? <p style={mutedStyle}>No actionable issues reported for this ontology.</p> : null}
+            </div>
+          </section>
+        </>
+      ) : (
+        <div style={emptyStyle}>Select an ontology to compute health signals.</div>
+      )}
+    </div>
+  );
+}
+
+function IssueRow({ issue, onFixInEditor }: { issue: HealthIssue; onFixInEditor?: (entityUri: string) => void }) {
+  return (
+    <div style={issueRowStyle}>
+      <div style={severityDotStyle(issue.severity)} />
+      <div>
+        <div style={{ color: "#fff0f2", fontWeight: 800 }}>{issue.entity_label || issue.category}</div>
+        <div style={{ color: "#c99aa3", fontSize: 13, lineHeight: 1.45 }}>{issue.message}</div>
+        {issue.entity_uri ? <div style={monoStyle}>{issue.entity_uri}</div> : null}
+      </div>
+      <span style={categoryStyle}>{issue.category}</span>
+      {issue.entity_uri ? (
+        <button style={smallButtonStyle} onClick={() => onFixInEditor?.(issue.entity_uri || "")}>
+          <Wrench size={13} />
+          Fix in Editor
+        </button>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+}
+
+function dimensionColor(score: number, status: string) {
+  if (status === "unavailable") return "#9c7a82";
+  if (score >= 80) return "#7ce7d3";
+  if (score >= 55) return "#ff7a45";
+  return "#ff9daf";
+}
+
+function statusBadgeStyle(status: string): CSSProperties {
+  const color = status === "ok" ? "#7ce7d3" : status === "unavailable" ? "#9c7a82" : "#ff7a45";
+  return {
+    color,
+    background: `${color}18`,
+    border: `1px solid ${color}30`,
+    borderRadius: 999,
+    padding: "2px 7px",
+    fontSize: 10,
+    fontWeight: 900,
+    textTransform: "uppercase",
+  };
+}
+
+function severityDotStyle(severity: string): CSSProperties {
+  const color = severity === "critical" ? "#ff9daf" : severity === "warning" ? "#ff7a45" : "#ff2d4b";
+  return { width: 10, height: 10, borderRadius: "50%", background: color, boxShadow: `0 0 18px ${color}55`, marginTop: 5 };
+}
+
+const pageStyle: CSSProperties = { height: "100%", overflow: "auto", padding: 22, display: "flex", flexDirection: "column", gap: 16 };
+const heroStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 18, padding: 22, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 22, background: "linear-gradient(135deg, rgba(11,25,42,0.94), rgba(7,14,25,0.9))" };
+const kickerStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", color: "#9ee8d7", fontSize: 11, fontWeight: 900, letterSpacing: "0.12em", textTransform: "uppercase" };
+const titleStyle: CSSProperties = { margin: "8px 0", color: "#fff0f2", fontSize: 26, letterSpacing: "-0.04em" };
+const textStyle: CSSProperties = { margin: 0, color: "#c99aa3", lineHeight: 1.6, maxWidth: 620 };
+const selectorShellStyle: CSSProperties = { minWidth: 320 };
+const labelStyle: CSSProperties = { display: "block", color: "#9c7a82", fontSize: 11, fontWeight: 800, margin: "0 0 6px", textTransform: "uppercase", letterSpacing: "0.08em" };
+const inputStyle: CSSProperties = { width: "100%", boxSizing: "border-box", border: "1px solid rgba(255,107,129,0.14)", borderRadius: 12, padding: "10px 12px", background: "rgba(6,3,5,0.8)", color: "#fff0f2" };
+const scoreGridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "220px repeat(5, minmax(180px, 1fr))", gap: 12 };
+const scoreCardStyle: CSSProperties = { padding: 18, borderRadius: 20, background: "rgba(15,35,52,0.88)", border: "1px solid rgba(124,231,211,0.2)", display: "flex", flexDirection: "column", gap: 10 };
+const scoreValueStyle: CSSProperties = { color: "#9ee8d7", fontSize: 52, lineHeight: 1, fontWeight: 950, letterSpacing: "-0.06em" };
+const dimensionCardStyle: CSSProperties = { padding: 16, borderRadius: 18, background: "rgba(12,6,9,0.78)", border: "1px solid rgba(255,107,129,0.12)" };
+const dimensionHeadStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center", marginBottom: 12 };
+const barTrackStyle: CSSProperties = { height: 8, borderRadius: 999, background: "rgba(255,255,255,0.06)", overflow: "hidden" };
+const barFillStyle: CSSProperties = { height: "100%", borderRadius: 999 };
+const dimensionFootStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 6, color: "#c99aa3", fontSize: 12, marginTop: 10 };
+const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(12,6,9,0.78)" };
+const sectionTitleStyle: CSSProperties = { margin: "0 0 14px", color: "#fff0f2", fontSize: 16 };
+const issueListStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 8 };
+const issueRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "14px 1fr auto auto", gap: 12, alignItems: "start", padding: 12, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
+const categoryStyle: CSSProperties = { color: "#9ee8d7", border: "1px solid rgba(158,232,215,0.22)", borderRadius: 999, padding: "4px 8px", fontSize: 10, fontWeight: 900 };
+const smallButtonStyle: CSSProperties = { display: "inline-flex", gap: 6, alignItems: "center", border: "1px solid rgba(255,107,129,0.16)", borderRadius: 10, padding: "7px 9px", background: "rgba(255,107,129,0.08)", color: "#fff0f2", cursor: "pointer", fontWeight: 800 };
+const secondaryButtonStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", justifyContent: "center", border: "1px solid rgba(255,107,129,0.16)", borderRadius: 12, padding: "10px 12px", background: "rgba(255,107,129,0.08)", color: "#fff0f2", cursor: "pointer", fontWeight: 900 };
+const monoStyle: CSSProperties = { marginTop: 4, color: "#9c7a82", fontSize: 11, fontFamily: "JetBrains Mono, monospace", wordBreak: "break-all" };
+const mutedStyle: CSSProperties = { margin: 0, color: "#9c7a82", fontSize: 13 };
+const loadingStyle: CSSProperties = { display: "inline-flex", alignItems: "center", gap: 8, color: "#c99aa3", padding: 18 };
+const emptyStyle: CSSProperties = { color: "#9c7a82", padding: 22 };
+const errorStyle: CSSProperties = { display: "flex", alignItems: "center", gap: 8, padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };