@ltm-blueverse/alpha-semantic-hub 0.7.0

package/explorer/src/workspaces/ReasoningWorkspace.tsx

@@ -0,0 +1,243 @@
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { BrainCircuit, Play, RotateCcw, CheckCircle2, AlertCircle, Zap, GitBranch, Info } from "lucide-react";
+
+const SAMPLE_FACTS = `inhibits(Metformin, mTOR)
+causes(mTOR, Neurodegeneration)
+treats(Metformin, Diabetes)`;
+
+const SAMPLE_RULE = `IF inhibits(Metformin, mTOR) AND causes(mTOR, Neurodegeneration) THEN candidate(Metformin, Alzheimer's)`;
+
+const TEMPLATES = [
+  {
+    label: "Drug Candidate",
+    facts: `inhibits(Metformin, mTOR)\ncauses(mTOR, Neurodegeneration)\ntreats(Metformin, Diabetes)`,
+    rule: `IF inhibits(Metformin, mTOR) AND causes(mTOR, Neurodegeneration) THEN candidate(Metformin, Alzheimer's)`,
+  },
+  {
+    label: "Gene → Disease",
+    facts: `expressed_in(BRCA1, Breast)\nmutated_in(BRCA1, Cancer)\nassociated_with(Breast, Cancer)`,
+    rule: `IF mutated_in(X, Cancer) AND expressed_in(X, Y) THEN risk_gene(X, Y)`,
+  },
+  {
+    label: "Pathway Activation",
+    facts: `activates(EGF, EGFR)\ndownstream_of(MAPK, EGFR)\ndownstream_of(AKT, EGFR)`,
+    rule: `IF activates(X, EGFR) AND downstream_of(Y, EGFR) THEN activates(X, Y)`,
+  },
+];
+
+export function ReasoningWorkspace() {
+  const queryClient = useQueryClient();
+  const [facts, setFacts] = useState(SAMPLE_FACTS);
+  const [rules, setRules] = useState(SAMPLE_RULE);
+  const [applyToGraph, setApplyToGraph] = useState(true);
+  const [result, setResult] = useState<{
+    inferred_facts?: string[];
+    rules_fired?: number;
+    added_edges?: number;
+    mutated?: boolean;
+  } | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleRun() {
+    setIsRunning(true);
+    setError("");
+    setResult(null);
+    try {
+      const response = await fetch("/api/reason", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          facts: facts.split(/\r?\n/).map((l) => l.trim()).filter(Boolean),
+          rules: rules.split(/\r?\n/).map((l) => l.trim()).filter(Boolean),
+          mode: "forward",
+          apply_to_graph: applyToGraph,
+        }),
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.detail || `Status ${response.status}`);
+      if (response.status === 207) setError(data.message || "Warning: Partial success reasoning.");
+      setResult(data);
+      if (data.mutated) queryClient.invalidateQueries({ queryKey: ["graph", "full-load"] });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Reasoning failed");
+    } finally {
+      setIsRunning(false);
+    }
+  }
+
+  function loadTemplate(t: (typeof TEMPLATES)[number]) {
+    setFacts(t.facts);
+    setRules(t.rule);
+    setResult(null);
+    setError("");
+  }
+
+  function handleReset() {
+    setFacts(SAMPLE_FACTS);
+    setRules(SAMPLE_RULE);
+    setResult(null);
+    setError("");
+  }
+
+  return (
+    <div className="ws-page" style={{ flexDirection: "row" }}>
+      {/* ── Left: Input panel ── */}
+      <div style={{ width: 480, flexShrink: 0, display: "flex", flexDirection: "column", borderRight: "1px solid var(--ws-border)", overflow: "hidden" }}>
+        {/* Header */}
+        <div style={{ padding: "18px 20px 14px", borderBottom: "1px solid var(--ws-border)", flexShrink: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 2 }}>
+            <div style={{ width: 32, height: 32, borderRadius: 10, background: "var(--ws-accent-soft)", border: "1px solid var(--ws-border-strong)", display: "grid", placeItems: "center", color: "var(--ws-accent)", flexShrink: 0 }}>
+              <BrainCircuit size={16} />
+            </div>
+            <div>
+              <div className="ws-eyebrow" style={{ marginBottom: 2 }}>Forward Chaining</div>
+              <div style={{ color: "var(--ws-text)", fontWeight: 700, fontSize: 15, lineHeight: 1 }}>Inference Engine</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Templates */}
+        <div style={{ padding: "12px 16px 10px", borderBottom: "1px solid var(--ws-border)", flexShrink: 0 }}>
+          <div className="ws-eyebrow" style={{ marginBottom: 8 }}>Quick Templates</div>
+          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+            {TEMPLATES.map((t) => (
+              <button key={t.label} className="ws-btn ws-btn--ghost" style={{ padding: "5px 10px", fontSize: 11 }} onClick={() => loadTemplate(t)}>
+                {t.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Input area */}
+        <div className="ws-scroll ws-padded" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <div>
+            <label className="ws-label">Facts</label>
+            <div className="ws-body" style={{ marginBottom: 8 }}>One fact per line using <code style={{ color: "var(--ws-accent)", fontSize: 11 }}>predicate(subject, object)</code> form.</div>
+            <textarea
+              className="ws-textarea"
+              value={facts}
+              onChange={(e) => setFacts(e.target.value)}
+              rows={6}
+              spellCheck={false}
+            />
+          </div>
+
+          <div>
+            <label className="ws-label">Rules</label>
+            <div className="ws-body" style={{ marginBottom: 8 }}>Use <code style={{ color: "var(--ws-amber)", fontSize: 11 }}>IF … AND … THEN …</code> syntax. Falls back to internal matcher if the reasoning server is unavailable.</div>
+            <textarea
+              className="ws-textarea"
+              value={rules}
+              onChange={(e) => setRules(e.target.value)}
+              rows={5}
+              spellCheck={false}
+            />
+          </div>
+
+          {/* Apply toggle */}
+          <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", padding: "10px 12px", borderRadius: "var(--ws-radius-sm)", border: "1px solid var(--ws-border)", background: applyToGraph ? "var(--ws-green-soft)" : "var(--ws-surface)" }}>
+            <div style={{ position: "relative", width: 36, height: 20, flexShrink: 0 }}>
+              <input
+                type="checkbox"
+                checked={applyToGraph}
+                onChange={(e) => setApplyToGraph(e.target.checked)}
+                style={{ opacity: 0, position: "absolute", inset: 0, cursor: "pointer", margin: 0 }}
+              />
+              <div style={{ position: "absolute", inset: 0, borderRadius: 999, background: applyToGraph ? "var(--ws-green)" : "rgba(255,255,255,0.12)", transition: "background 180ms ease" }} />
+              <div style={{ position: "absolute", top: 3, left: applyToGraph ? 19 : 3, width: 14, height: 14, borderRadius: 999, background: "#fff", transition: "left 180ms ease", boxShadow: "0 1px 4px rgba(0,0,0,0.4)" }} />
+            </div>
+            <div>
+              <div style={{ fontSize: 13, fontWeight: 700, color: applyToGraph ? "#6ee7b7" : "var(--ws-text-muted)" }}>Write inferred facts to graph</div>
+              <div style={{ fontSize: 11, color: "var(--ws-text-dim)" }}>Inferred binary facts are added as edges</div>
+            </div>
+          </label>
+
+          {/* Actions */}
+          <div style={{ display: "flex", gap: 8 }}>
+            <button
+              className="ws-btn ws-btn--primary"
+              onClick={handleRun}
+              disabled={isRunning}
+              style={{ flex: 1, justifyContent: "center" }}
+            >
+              {isRunning
+                ? <><span className="ws-spin" style={{ display: "inline-block" }}><Zap size={15} /></span>Running…</>
+                : <><Play size={14} />Run Reasoning</>}
+            </button>
+            <button className="ws-btn ws-btn--ghost" onClick={handleReset} title="Reset to defaults">
+              <RotateCcw size={14} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Right: Results panel ── */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+        <div style={{ padding: "18px 24px 14px", borderBottom: "1px solid var(--ws-border)", flexShrink: 0, display: "flex", alignItems: "center", gap: 10 }}>
+          <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ws-text)" }}>Inference Results</div>
+          {result && !isRunning && (
+            <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
+              <span className="ws-pill ws-pill--accent">
+                <Zap size={9} /> {result.rules_fired ?? 0} rules fired
+              </span>
+              <span className="ws-pill ws-pill--green">
+                <GitBranch size={9} /> {result.added_edges ?? 0} edges added
+              </span>
+              {result.mutated
+                ? <span className="ws-pill ws-pill--green">graph updated</span>
+                : <span className="ws-pill ws-pill--mono">preview only</span>}
+            </div>
+          )}
+        </div>
+
+        <div className="ws-scroll ws-padded" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          {error && (
+            <div className="ws-animate-in" style={{ display: "flex", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-red-soft)", border: "1px solid rgba(255,123,114,0.28)", color: "#fca5a5", fontSize: 13 }}>
+              <AlertCircle size={16} style={{ flexShrink: 0, marginTop: 1 }} />
+              <div>{error}</div>
+            </div>
+          )}
+
+          {isRunning && (
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              {[1,2,3,4].map((i) => <div key={i} className="ws-skeleton" style={{ height: 52 }} />)}
+            </div>
+          )}
+
+          {result && !isRunning && (
+            <div className="ws-animate-in">
+              {(result.inferred_facts ?? []).length === 0 ? (
+                <div className="ws-empty">
+                  <div className="ws-empty-icon"><CheckCircle2 size={32} /></div>
+                  <div className="ws-empty-title">Reasoning complete</div>
+                  <div className="ws-empty-body">No new facts were inferred from the current rule set and facts.</div>
+                </div>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                  {result.inferred_facts!.map((fact, i) => (
+                    <div key={`${fact}-${i}`} style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-surface)", border: "1px solid var(--ws-border)" }}>
+                      <div style={{ width: 20, height: 20, borderRadius: 6, background: "var(--ws-green-soft)", border: "1px solid rgba(76,195,138,0.28)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 1 }}>
+                        <CheckCircle2 size={11} color="var(--ws-green)" />
+                      </div>
+                      <code style={{ fontFamily: "'JetBrains Mono','Fira Code',monospace", fontSize: 12, color: "var(--ws-text)", lineHeight: 1.6, wordBreak: "break-all" }}>{fact}</code>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {!result && !isRunning && !error && (
+            <div className="ws-empty">
+              <div className="ws-empty-icon"><Info size={32} /></div>
+              <div className="ws-empty-title">Ready to reason</div>
+              <div className="ws-empty-body">Enter facts and rules on the left, then click Run Reasoning to see inferred statements here.</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/SparqlWorkspace/SparqlWorkspace.tsx

@@ -0,0 +1,271 @@
+import { useState, useRef } from "react";
+import Editor, { useMonaco } from "@monaco-editor/react";
+import { Play, Copy, Download, Table2, AlertCircle, FileCode2 } from "lucide-react";
+
+const TEMPLATES: { label: string; query: string }[] = [
+  { label: "All triples", query: "SELECT ?s ?p ?o\nWHERE {\n  ?s ?p ?o\n}\nLIMIT 20" },
+  { label: "Node types", query: "SELECT ?type (COUNT(?s) AS ?count)\nWHERE {\n  ?s a ?type\n}\nGROUP BY ?type\nORDER BY DESC(?count)" },
+  { label: "Outgoing edges", query: "SELECT ?predicate ?object\nWHERE {\n  <urn:node:example> ?predicate ?object\n}\nLIMIT 50" },
+  { label: "Path between", query: "SELECT ?mid ?p1 ?p2\nWHERE {\n  <urn:node:a> ?p1 ?mid .\n  ?mid ?p2 <urn:node:b>\n}\nLIMIT 20" },
+];
+
+export function SparqlWorkspace() {
+  const monaco = useMonaco();
+  const editorRef = useRef<unknown>(null);
+  const [query, setQuery] = useState(TEMPLATES[0].query);
+  const [result, setResult] = useState<{ columns?: string[]; rows?: Record<string, string>[]; error?: string; error_line?: number } | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [copyState, setCopyState] = useState(false);
+
+  function handleEditorWillMount(monacoIns: { languages: { getLanguages(): { id: string }[]; register(opts: { id: string }): void; setMonarchTokensProvider(id: string, p: unknown): void }; editor: { defineTheme(id: string, t: unknown): void } }) {
+    if (!monacoIns.languages.getLanguages().some((l) => l.id === "sparql")) {
+      monacoIns.languages.register({ id: "sparql" });
+      monacoIns.languages.setMonarchTokensProvider("sparql", {
+        keywords: ["SELECT", "WHERE", "LIMIT", "FILTER", "OPTIONAL", "PREFIX", "ORDER", "BY", "DESC", "ASC", "GROUP", "DISTINCT", "CONSTRUCT", "ASK", "DESCRIBE"],
+        tokenizer: {
+          root: [
+            [/[a-zA-Z_]\w*/, { cases: { "@keywords": "keyword", "@default": "identifier" } }],
+            [/[?$][a-zA-Z_]\w*/, "variable.name"],
+            [/<[^>]+>/, "string.uri"],
+            [/"[^"]*"/, "string"],
+            [/#.*/, "comment"],
+            [/[0-9]+(\.[0-9]+)?/, "number"],
+          ],
+        },
+      });
+      monacoIns.editor.defineTheme("sparql-dark", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [
+          { token: "keyword", foreground: "58a6ff", fontStyle: "bold" },
+          { token: "variable.name", foreground: "a5d6ff" },
+          { token: "string.uri", foreground: "7ee787" },
+          { token: "string", foreground: "a5d6ff" },
+          { token: "comment", foreground: "4a6a85", fontStyle: "italic" },
+          { token: "number", foreground: "f2b66d" },
+        ],
+        colors: {
+          "editor.background": "#050c18",
+          "editor.lineHighlightBackground": "#0a1628",
+          "editorLineNumber.foreground": "#2a4060",
+          "editorCursor.foreground": "#ff2d4b",
+          "editor.selectionBackground": "#1e3a5a",
+        },
+      });
+    }
+  }
+
+  function handleEditorDidMount(editor: unknown) {
+    editorRef.current = editor;
+  }
+
+  async function handleRun() {
+    setIsLoading(true);
+    setResult(null);
+    if (monaco && editorRef.current) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (monaco as any).editor.setModelMarkers((editorRef.current as any).getModel(), "sparql", []);
+    }
+    try {
+      const res = await fetch("/api/sparql", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query }),
+      });
+      if (!res.headers.get("content-type")?.includes("application/json")) {
+        const text = await res.text();
+        throw new Error(`HTTP ${res.status}: ${text.substring(0, 100)}`);
+      }
+      const data = await res.json();
+      if (res.status === 207) {
+        data.error = data.message || "Warning: Partial success running query.";
+      }
+
+      if (data.error && data.error_line && monaco && editorRef.current) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (monaco as any).editor.setModelMarkers((editorRef.current as any).getModel(), "sparql", [{
+          startLineNumber: data.error_line,
+          startColumn: data.error_column || 1,
+          endLineNumber: data.error_line,
+          endColumn: 100,
+          message: data.error,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          severity: (monaco as any).MarkerSeverity.Error,
+        }]);
+      }
+      setResult(data);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Network error — could not reach the SPARQL endpoint.";
+      setResult({ error: msg });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  function handleCopyQuery() {
+    navigator.clipboard.writeText(query).then(() => {
+      setCopyState(true);
+      setTimeout(() => setCopyState(false), 1500);
+    }).catch(() => {
+      // Clipboard API unavailable (insecure context or denied) — no-op; query is visible in editor
+    });
+  }
+
+  function handleExportCSV() {
+    if (!result?.rows || !result?.columns) return;
+    const cols = result.columns;
+    const header = cols.join(",");
+    const rows = result.rows.map((r) => cols.map((c) => JSON.stringify(r[c] ?? "")).join(",")).join("\n");
+    const blob = new Blob([`${header}\n${rows}`], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "sparql_results.csv";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="ws-page">
+      <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+        {/* ── Toolbar ── */}
+        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--ws-border)", display: "flex", alignItems: "center", gap: 8, flexShrink: 0, background: "rgba(0,0,0,0.18)" }}>
+          <div style={{ display: "flex", gap: 6, flex: 1, flexWrap: "wrap" }}>
+            <span className="ws-eyebrow" style={{ alignSelf: "center", marginRight: 4 }}>Templates:</span>
+            {TEMPLATES.map((t) => (
+              <button
+                key={t.label}
+                className="ws-btn ws-btn--ghost"
+                style={{ padding: "4px 10px", fontSize: 11 }}
+                onClick={() => { setQuery(t.query); setResult(null); }}
+              >
+                {t.label}
+              </button>
+            ))}
+          </div>
+          <button className="ws-btn ws-btn--ghost" style={{ padding: "6px 10px" }} onClick={handleCopyQuery} title="Copy query">
+            <Copy size={13} />{copyState ? "Copied!" : "Copy"}
+          </button>
+          <button
+            className="ws-btn ws-btn--primary"
+            onClick={handleRun}
+            disabled={isLoading}
+            style={{ minWidth: 110, justifyContent: "center" }}
+          >
+            {isLoading
+              ? <><span className="ws-spin" style={{ display: "inline-block" }}><Play size={13} /></span>Running…</>
+              : <><Play size={13} />Run Query</>}
+          </button>
+        </div>
+
+        {/* ── Editor + Results split ── */}
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          {/* Editor */}
+          <div style={{ flex: "0 0 55%", minHeight: 0, borderBottom: "1px solid var(--ws-border)", position: "relative" }}>
+            <div style={{ position: "absolute", top: 8, right: 12, zIndex: 10, display: "flex", alignItems: "center", gap: 6 }}>
+              <span className="ws-pill ws-pill--mono"><FileCode2 size={9} />SPARQL</span>
+            </div>
+            <Editor
+              height="100%"
+              defaultLanguage="sparql"
+              theme="sparql-dark"
+              value={query}
+              onChange={(v) => setQuery(v || "")}
+              beforeMount={handleEditorWillMount}
+              onMount={handleEditorDidMount}
+              options={{
+                minimap: { enabled: false },
+                fontSize: 13,
+                fontFamily: "'JetBrains Mono','Fira Code',Consolas,monospace",
+                lineHeight: 22,
+                padding: { top: 16 },
+                scrollBeyondLastLine: false,
+                renderLineHighlight: "gutter",
+                wordWrap: "on",
+              }}
+            />
+          </div>
+
+          {/* Results */}
+          <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden", background: "rgba(0,0,0,0.12)" }}>
+            <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--ws-border)", display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--ws-text-muted)", fontSize: 13, fontWeight: 700 }}>
+                <Table2 size={14} />
+                Results
+                {result?.rows && <span className="ws-pill ws-pill--accent">{result.rows.length} rows</span>}
+              </div>
+              {result?.rows && result.rows.length > 0 && (
+                <button className="ws-btn ws-btn--ghost" style={{ marginLeft: "auto", padding: "4px 10px", fontSize: 11 }} onClick={handleExportCSV}>
+                  <Download size={12} />Export CSV
+                </button>
+              )}
+            </div>
+
+            <div className="ws-scroll" style={{ flex: 1 }}>
+              {isLoading && (
+                <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 8 }}>
+                  {[1, 2, 3].map((i) => <div key={i} className="ws-skeleton" style={{ height: 36 }} />)}
+                </div>
+              )}
+
+              {result?.error && !isLoading && (
+                <div className="ws-animate-in" style={{ margin: 16, display: "flex", gap: 10, padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "var(--ws-red-soft)", border: "1px solid rgba(255,123,114,0.28)", color: "#fca5a5", fontSize: 13 }}>
+                  <AlertCircle size={16} style={{ flexShrink: 0, marginTop: 1 }} />
+                  {result.error}
+                </div>
+              )}
+
+              {result?.rows && result?.columns && !isLoading && (
+                <div className="ws-animate-in" style={{ overflowX: "auto" }}>
+                  {result.rows.length === 0 ? (
+                    <div className="ws-empty">
+                      <div className="ws-empty-title">No results</div>
+                      <div className="ws-empty-body">The query returned 0 rows. Try a broader query or check your data.</div>
+                    </div>
+                  ) : (
+                    <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, color: "var(--ws-text)" }}>
+                      <thead>
+                        <tr style={{ borderBottom: "1px solid var(--ws-border)", background: "rgba(0,0,0,0.2)" }}>
+                          <th style={{ padding: "8px 14px", textAlign: "left", color: "var(--ws-text-dim)", fontFamily: "monospace", fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", width: 40 }}>#</th>
+                          {result.columns.map((c) => (
+                            <th key={c} style={{ padding: "8px 14px", textAlign: "left", color: "var(--ws-text-muted)", fontFamily: "monospace", fontSize: 11, fontWeight: 700, letterSpacing: "0.06em" }}>?{c}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {result.rows.map((r, i) => (
+                          <tr key={i} style={{ borderBottom: "1px solid rgba(255,45,75,0.06)" }}>
+                            <td style={{ padding: "7px 14px", color: "var(--ws-text-dim)", fontFamily: "monospace", fontSize: 11 }}>{i + 1}</td>
+                            {(result.columns ?? []).map((c) => (
+                              <td key={c} style={{ padding: "7px 14px", maxWidth: 300, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "monospace" }} title={String(r[c] ?? "")}>
+                                {r[c] != null ? (
+                                  String(r[c]).startsWith("urn:") || String(r[c]).startsWith("http")
+                                    ? <span style={{ color: "#7ee787" }}>{String(r[c])}</span>
+                                    : String(r[c])
+                                ) : <span style={{ color: "var(--ws-text-dim)", fontStyle: "italic" }}>null</span>}
+                              </td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
+              )}
+
+              {!result && !isLoading && (
+                <div className="ws-empty">
+                  <div className="ws-empty-icon"><Table2 size={28} /></div>
+                  <div className="ws-empty-title">Run a query</div>
+                  <div className="ws-empty-body">Write SPARQL above or pick a template, then click Run Query to see results here.</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/VocabularyWorkspace/ConceptTree.tsx

@@ -0,0 +1,97 @@
+/**
+ * ConceptTree.tsx — react-arborist SKOS hierarchy viewer.
+ *
+ * Styled for the Palantir/Glassmorphism dark theme rather than
+ * the default light-mode colours.
+ */
+import React from 'react';
+import { Tree } from 'react-arborist';
+import type { NodeRendererProps } from 'react-arborist';
+import { ChevronRight, ChevronDown, Folder, FileText } from 'lucide-react';
+import type { ConceptNode } from './types';
+
+interface ConceptTreeProps {
+  data: ConceptNode[];
+  onSelectConcept: (concept: ConceptNode) => void;
+}
+
+export const ConceptTree: React.FC<ConceptTreeProps> = ({ data, onSelectConcept }) => {
+  return (
+    <div style={{
+      height: '100%', width: '100%',
+      backgroundColor: 'transparent',
+      overflow: 'hidden',
+    }}>
+      <Tree
+        data={data}
+        idAccessor="uri"
+        width="100%"
+        height={600}
+        indent={24}
+        rowHeight={36}
+        childrenAccessor="children"
+      >
+        {(nodeProps: NodeRendererProps<ConceptNode>) => {
+          const { node, style, dragHandle } = nodeProps;
+          const isFolder = node.children && node.children.length > 0;
+
+          return (
+            <div
+              ref={dragHandle}
+              onClick={() => {
+                node.toggle();
+                onSelectConcept(node.data);
+              }}
+              style={{
+                ...style,
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0 8px',
+                cursor: 'pointer',
+                backgroundColor: node.isSelected
+                  ? 'rgba(255,45,75,0.12)'
+                  : 'transparent',
+                userSelect: 'none',
+                borderBottom: '1px solid rgba(255,255,255,0.04)',
+                transition: 'background 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                if (!node.isSelected) {
+                  (e.currentTarget as HTMLDivElement).style.background = 'rgba(255,45,75,0.06)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!node.isSelected) {
+                  (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+                }
+              }}
+            >
+              <span style={{ width: 20, display: 'flex', justifyContent: 'center' }}>
+                {isFolder ? (
+                  node.isOpen
+                    ? <ChevronDown size={14} color="#b08b93" />
+                    : <ChevronRight size={14} color="#b08b93" />
+                ) : null}
+              </span>
+
+              <span style={{ marginRight: 8, display: 'flex', alignItems: 'center' }}>
+                {isFolder
+                  ? <Folder size={14} color="#d2a8ff" />
+                  : <FileText size={14} color="#484f58" />
+                }
+              </span>
+
+              <span style={{
+                fontSize: 13, color: '#e8ccd1',
+                whiteSpace: 'nowrap', overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {node.data.pref_label}
+              </span>
+            </div>
+          );
+        }}
+      </Tree>
+    </div>
+  );
+};