@ltm-blueverse/alpha-semantic-hub 0.7.3 → 0.8.0

package/README.md

@@ -322,6 +322,23 @@ SDK is missing. Two patterns:
 Also available: Redshift, Cassandra, MongoDB, DuckDB, Elasticsearch, Kafka-style
 streams, email, RSS/Atom feeds, Airflow, Parquet/Arrow.
 
+### Ingestion, MCP tools and LLM endpoints in the Studio
+
+The **Enrich** workspace has three tabs for this:
+
+- **Source Ingestion** — connect Databricks, SAP (OData), Snowflake, Salesforce,
+  REST endpoints (incl. Microsoft Graph for SharePoint), web pages or files.
+  Test the connection, run ingestion with live progress, and extraction loads
+  the entities/relations straight into the graph on screen.
+- **MCP Tools** — browse and invoke all 16 tools that Claude Code / Codex /
+  Copilot get over MCP. Calls run against the same live graph the Studio shows.
+- **LLM Endpoints** — shows where the platform uses language models, which
+  providers are configured (OpenAI, Anthropic, Gemini, Groq, DeepSeek, Novita,
+  Ollama, HuggingFace) and fires a real test prompt per provider.
+
+`npm-packages/` staging, `data/` volumes and container-local paths (`/data/…`)
+apply as per the compose file.
+
 ### Running ingestion (Python workflow)
 
 Source ingestion is a **Python-library workflow** — the Studio UI imports graph

package/explorer/src/App.tsx

@@ -24,6 +24,9 @@ import { hasOntologyUrlState } from './workspaces/OntologyWorkspace/ontologyUrlS
 
 const DecisionWorkspace = lazy(() => import('./workspaces/DecisionWorkspace/DecisionWorkspace').then((module) => ({ default: module.DecisionWorkspace })));
 const DiffMergeWorkspace = lazy(() => import('./workspaces/DiffMergeWorkspace/DiffMergeWorkspace').then((module) => ({ default: module.DiffMergeWorkspace })));
+const IngestWorkspace = lazy(() => import('./workspaces/IngestWorkspace/IngestWorkspace').then((module) => ({ default: module.IngestWorkspace })));
+const McpConsoleWorkspace = lazy(() => import('./workspaces/McpConsoleWorkspace/McpConsoleWorkspace').then((module) => ({ default: module.McpConsoleWorkspace })));
+const LlmSettingsWorkspace = lazy(() => import('./workspaces/LlmSettingsWorkspace/LlmSettingsWorkspace').then((module) => ({ default: module.LlmSettingsWorkspace })));
 const GraphWorkspace = lazy(() => import('./workspaces/GraphWorkspace/GraphWorkspace').then((module) => ({ default: module.GraphWorkspace })));
 const MemoryWorkspace = lazy(() => import('./workspaces/MemoryWorkspace').then((module) => ({ default: module.MemoryWorkspace })));
 const ImportExportWorkspace = lazy(() => import('./workspaces/ImportExportWorkspace/ImportExportWorkspace').then((module) => ({ default: module.ImportExportWorkspace })));
@@ -39,7 +42,7 @@ const OntologyWorkspace = lazy(() => import('./workspaces/OntologyWorkspace').th
 
 type WorkspaceId = 'welcome' | 'explore' | 'analyze' | 'decisions' | 'enrich' | 'manage' | 'ontology-hub';
 type AnalyzeView = 'sparql' | 'reasoning';
-type EnrichView = 'import' | 'merge' | 'registry' | 'resolve';
+type EnrichView = 'ingest' | 'mcp' | 'llm' | 'import' | 'merge' | 'registry' | 'resolve';
 type ManageView = 'lineage' | 'kg-overview' | 'ontology';
 
 type NavItem = {
@@ -1926,7 +1929,16 @@ export default function App() {
           kicker="Knowledge Audit"
           tabs={
             <>
-              <button className="workspace-tab" data-active={enrichView === 'import'} onClick={() => setEnrichView('import')}>
+              <button className="workspace-tab" data-active={enrichView === 'ingest'} onClick={() => setEnrichView('ingest')}>
+                Source Ingestion
+              </button>
+                            <button className="workspace-tab" data-active={enrichView === 'mcp'} onClick={() => setEnrichView('mcp')}>
+                MCP Tools
+              </button>
+                            <button className="workspace-tab" data-active={enrichView === 'llm'} onClick={() => setEnrichView('llm')}>
+                LLM Endpoints
+              </button>
+                            <button className="workspace-tab" data-active={enrichView === 'import'} onClick={() => setEnrichView('import')}>
                 Import and Export
               </button>
               <button className="workspace-tab" data-active={enrichView === 'merge'} onClick={() => setEnrichView('merge')}>
@@ -1943,7 +1955,10 @@ export default function App() {
         >
           <ErrorBoundary key={`enrich-${enrichView}`}>
             <Suspense fallback={<WorkspaceFallback />}>
-              {enrichView === 'import' ? <ImportExportWorkspace /> :
+              {enrichView === 'ingest' ? <IngestWorkspace /> :
+               enrichView === 'mcp' ? <McpConsoleWorkspace /> :
+               enrichView === 'llm' ? <LlmSettingsWorkspace /> :
+               enrichView === 'import' ? <ImportExportWorkspace /> :
                enrichView === 'merge' ? <DiffMergeWorkspace /> :
                enrichView === 'resolve' ? <EntityResolutionTab /> :
                <RegistryTab />}

package/explorer/src/workspaces/IngestWorkspace/IngestWorkspace.tsx

@@ -0,0 +1,268 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Database, Plug, CheckCircle2, AlertCircle, Loader2, FileText, Globe,
+  Boxes, Cloud, Server, Play,
+} from "lucide-react";
+
+type SourceField = {
+  name: string;
+  label: string;
+  required: boolean;
+  secret?: boolean;
+  boolean?: boolean;
+};
+
+type SourceDef = {
+  kind: string;
+  label: string;
+  fields: SourceField[];
+  hint: string;
+};
+
+type Toast = { id: number; type: "success" | "error"; text: string };
+
+const KIND_ICONS: Record<string, typeof Database> = {
+  file: FileText, databricks: Boxes, sap: Server, snowflake: Cloud,
+  salesforce: Cloud, rest: Plug, web: Globe,
+};
+
+type FieldValues = Record<string, string | boolean>;
+
+function nestedSet(obj: Record<string, unknown>, path: string, value: unknown) {
+  const parts = path.split(".");
+  let cur = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    if (typeof cur[parts[i]] !== "object" || cur[parts[i]] === null) cur[parts[i]] = {};
+    cur = cur[parts[i]] as Record<string, unknown>;
+  }
+  cur[parts[parts.length - 1]] = value;
+}
+
+export function IngestWorkspace() {
+  const [sources, setSources] = useState<SourceDef[]>([]);
+  const [activeKind, setActiveKind] = useState<string | null>(null);
+  const [values, setValues] = useState<FieldValues>({});
+  const [sourceRef, setSourceRef] = useState("");
+  const [extract, setExtract] = useState(true);
+  const [validating, setValidating] = useState(false);
+  const [validation, setValidation] = useState<{ ok: boolean; detail: string } | null>(null);
+  const [running, setRunning] = useState(false);
+  const [job, setJob] = useState<{ status: string; stage: string; progress: number; message: string } | null>(null);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const pollRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    fetch("/api/ingest/sources").then((r) => r.json()).then((d) => {
+      setSources(d.sources ?? []);
+      if (d.sources?.length) setActiveKind((k) => k ?? d.sources[0].kind);
+    }).catch(() => {});
+    return () => { if (pollRef.current) window.clearInterval(pollRef.current); };
+  }, []);
+
+  const active = sources.find((s) => s.kind === activeKind) ?? null;
+
+  function showToast(type: Toast["type"], text: string) {
+    const id = Date.now();
+    setToasts((p) => [...p, { id, type, text }]);
+    setTimeout(() => setToasts((p) => p.filter((t) => t.id !== id)), 6000);
+  }
+
+  function selectKind(kind: string) {
+    setActiveKind(kind);
+    setValues({});
+    setSourceRef("");
+    setValidation(null);
+    setJob(null);
+  }
+
+  async function handleValidate() {
+    if (!active) return;
+    setValidating(true);
+    setValidation(null);
+    try {
+      const options: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(values)) {
+        if (v !== "" && v !== false) nestedSet(options, k, v);
+      }
+      if (active.kind === "sap" && options["service"] === undefined) delete options["service"];
+      const res = await fetch("/api/ingest/validate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind: active.kind, options }),
+      });
+      const data = await res.json();
+      setValidation({ ok: !!data.ok, detail: data.detail ?? data.detail?.toString() ?? "Unknown response" });
+    } catch (e) {
+      setValidation({ ok: false, detail: e instanceof Error ? e.message : "Validation failed" });
+    } finally {
+      setValidating(false);
+    }
+  }
+
+  async function handleRun() {
+    if (!active || !sourceRef.trim()) return;
+    setRunning(true);
+    setJob({ status: "queued", stage: "queued", progress: 0, message: "Starting…" });
+    try {
+      const options: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(values)) {
+        if (v !== "" && v !== false) nestedSet(options, k, v);
+      }
+      const res = await fetch("/api/ingest/run", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind: active.kind, source: sourceRef.trim(), options, extract }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const { job_id } = await res.json();
+      pollRef.current = window.setInterval(async () => {
+        try {
+          const st = await fetch(`/api/ingest/status/${job_id}`);
+          if (!st.ok) return;
+          const data = await st.json();
+          setJob(data);
+          if (data.status === "done") {
+            window.clearInterval(pollRef.current!); pollRef.current = null;
+            setRunning(false);
+            showToast("success", data.message);
+          } else if (data.status === "error") {
+            window.clearInterval(pollRef.current!); pollRef.current = null;
+            setRunning(false);
+            showToast("error", data.message);
+          }
+        } catch { /* transient */ }
+      }, 1000);
+    } catch (e) {
+      setRunning(false);
+      setJob(null);
+      showToast("error", e instanceof Error ? e.message : "Failed to start ingestion");
+    }
+  }
+
+  return (
+    <div className="ws-page ws-scroll">
+      <div className="ws-padded" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 980, 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-accent-soft)", border: "1px solid var(--ws-border-strong)", display: "grid", placeItems: "center", color: "var(--ws-accent)", flexShrink: 0 }}>
+            <Database size={20} />
+          </div>
+          <div>
+            <h2 className="ws-title" style={{ fontSize: 18 }}>Ingest from Source Systems</h2>
+            <div className="ws-body" style={{ marginTop: 2 }}>Connect Databricks, SAP, Snowflake, Salesforce, REST APIs, web pages or files — extraction runs automatically and the graph loads into the Studio.</div>
+          </div>
+        </div>
+
+        <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 18, alignItems: "start" }}>
+          {/* Source picker */}
+          <div className="ws-card" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 8 }}>
+            <div className="ws-label">Source type</div>
+            {sources.map((s) => {
+              const Icon = KIND_ICONS[s.kind] ?? Database;
+              return (
+                <button key={s.kind} className="ws-btn" data-active={activeKind === s.kind}
+                  onClick={() => selectKind(s.kind)}
+                  style={{ justifyContent: "flex-start", fontSize: 13 }}>
+                  <Icon size={15} /> {s.label}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Connection form */}
+          <div className="ws-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+            {!active ? <div className="ws-body">Loading sources…</div> : (
+              <>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <Plug size={16} color="var(--ws-accent)" />
+                  <div style={{ color: "var(--ws-text)", fontWeight: 700, fontSize: 14 }}>{active.label} connection</div>
+                </div>
+                <div className="ws-body" style={{ fontSize: 12 }}>{active.hint}</div>
+
+                <div>
+                  <label className="ws-label">{active.kind === "file" ? "File path" : active.kind === "web" || active.kind === "rest" ? "URL" : active.kind === "databricks" || active.kind === "snowflake" ? "Table (or SQL query)" : active.kind === "sap" ? "Entity set" : "SObject"}</label>
+                  <input className="ws-input" style={{ width: "100%" }}
+                    value={sourceRef}
+                    onChange={(e) => setSourceRef(e.target.value)}
+                    placeholder={active.kind === "file" ? "/data/documents/report.txt" : active.kind === "databricks" ? "catalog.schema.table" : active.kind === "snowflake" ? "DATABASE.SCHEMA.TABLE" : active.kind === "sap" ? "SalesOrderSet" : active.kind === "salesforce" ? "Account" : "https://…"}
+                    disabled={running} />
+                </div>
+
+                {active.fields.filter((f) => f.name !== "source").map((f) => (
+                  <div key={f.name}>
+                    <label className="ws-label">{f.label}{f.required ? " *" : ""}</label>
+                    {f.boolean ? (
+                      <button className={`ws-btn ${values[f.name] ? "ws-btn--primary" : "ws-btn--ghost"}`}
+                        onClick={() => setValues((v) => ({ ...v, [f.name]: !v[f.name] }))}
+                        style={{ justifyContent: "center" }}>
+                        {values[f.name] ? "Yes" : "No"}
+                      </button>
+                    ) : (
+                      <input className="ws-input" style={{ width: "100%" }}
+                        type={f.secret ? "password" : "text"}
+                        value={String(values[f.name] ?? "")}
+                        onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.value }))}
+                        disabled={running} />
+                    )}
+                  </div>
+                ))}
+
+                {/* Extraction toggle */}
+                <button className={`ws-btn ${extract ? "ws-btn--primary" : "ws-btn--ghost"}`}
+                  onClick={() => setExtract((v) => !v)} disabled={running}
+                  style={{ justifyContent: "center" }}>
+                  {extract ? "Extraction ON — build entities & relations" : "Extraction OFF — documents only"}
+                </button>
+
+                {/* Validation result */}
+                {validation ? (
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderRadius: "var(--ws-radius-sm)", border: `1px solid ${validation.ok ? "rgba(76,195,138,0.4)" : "rgba(236,35,21,0.4)"}`, background: "rgba(255,255,255,0.6)" }}>
+                    {validation.ok ? <CheckCircle2 size={15} color="#1f9d5f" /> : <AlertCircle size={15} color="#ec2315" />}
+                    <span style={{ fontSize: 13, color: "var(--ws-text)" }}>{validation.detail}</span>
+                  </div>
+                ) : null}
+
+                {/* Progress */}
+                {job ? (
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: "14px 16px", borderRadius: "var(--ws-radius-sm)", background: "rgba(0,0,0,0.16)", border: "1px solid var(--ws-border)" }}>
+                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      {job.status === "running" || job.status === "queued" ? <Loader2 size={15} className="ws-spin" color="var(--ws-accent)" /> : job.status === "done" ? <CheckCircle2 size={15} color="#1f9d5f" /> : <AlertCircle size={15} color="#ec2315" />}
+                      <span style={{ fontSize: 13, color: "var(--ws-text)", fontWeight: 600 }}>{job.message}</span>
+                    </div>
+                    <div style={{ height: 6, borderRadius: 3, background: "rgba(0,0,0,0.25)", overflow: "hidden" }}>
+                      <div style={{ width: `${job.progress}%`, height: "100%", background: job.status === "error" ? "#ec2315" : "var(--ws-accent)", transition: "width 400ms ease" }} />
+                    </div>
+                    <div className="ws-body" style={{ fontSize: 11 }}>Stage: {job.stage}</div>
+                  </div>
+                ) : null}
+
+                <div style={{ display: "flex", gap: 10 }}>
+                  <button className="ws-btn ws-btn--ghost" onClick={handleValidate}
+                    disabled={validating || running || !sourceRef.trim()}
+                    style={{ flex: 1, justifyContent: "center" }}>
+                    {validating ? <Loader2 size={15} className="ws-spin" /> : <Plug size={15} />} Test connection
+                  </button>
+                  <button className="ws-btn" onClick={handleRun}
+                    disabled={running || validating || !sourceRef.trim()}
+                    style={{ flex: 2, justifyContent: "center", background: "var(--ws-accent-soft)", borderColor: "var(--ws-accent)", color: "var(--ws-accent)" }}>
+                    {running ? <><Loader2 size={15} className="ws-spin" />Ingesting…</> : <><Play size={15} />Run ingestion</>}
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Toasts */}
+        <div style={{ position: "fixed", bottom: 28, right: 28, display: "flex", flexDirection: "column", gap: 10, zIndex: 1000 }}>
+          {toasts.map((t) => (
+            <div key={t.id} className="ws-animate-in" style={{ display: "flex", alignItems: "center", gap: 10, padding: "13px 18px", borderRadius: "var(--ws-radius-sm)", background: "rgba(255,255,255,0.96)", border: `1px solid ${t.type === "success" ? "rgba(76,195,138,0.4)" : "rgba(255,123,114,0.4)"}`, boxShadow: "0 8px 24px rgba(0,0,0,0.5)", backdropFilter: "blur(12px)" }}>
+              {t.type === "success" ? <CheckCircle2 size={16} color="#1f9d5f" /> : <AlertCircle size={16} color="#ec2315" />}
+              <span style={{ color: "var(--ws-text)", fontSize: 13, fontWeight: 500 }}>{t.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/LlmSettingsWorkspace/LlmSettingsWorkspace.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import {
+  Sparkles, CheckCircle2, AlertCircle, Loader2, Send, Info,
+} from "lucide-react";
+
+type Provider = {
+  name: string; label: string; env_var: string | null;
+  models: string[]; configured: boolean; env_value_hint: string | null;
+};
+
+type UsageRow = { task: string; when: string; where: string };
+
+type Toast = { id: number; type: "success" | "error"; text: string };
+
+export function LlmSettingsWorkspace() {
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [usage, setUsage] = useState<UsageRow[]>([]);
+  const [selected, setSelected] = useState<Provider | null>(null);
+  const [model, setModel] = useState("");
+  const [testing, setTesting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; detail: string; model?: string } | null>(null);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  useEffect(() => {
+    fetch("/api/llm/status").then((r) => r.json()).then((d) => {
+      setProviders(d.providers ?? []);
+      setUsage(d.usage ?? []);
+      const first = (d.providers ?? []).find((p: Provider) => p.configured) ?? d.providers?.[0];
+      if (first) { setSelected(first); setModel(first.models[0] ?? ""); }
+    }).catch(() => {});
+  }, []);
+
+  function showToast(type: Toast["type"], text: string) {
+    const id = Date.now();
+    setToasts((p) => [...p, { id, type, text }]);
+    setTimeout(() => setToasts((p) => p.filter((t) => t.id !== id)), 5000);
+  }
+
+  async function handleTest() {
+    if (!selected) return;
+    setTesting(true);
+    setResult(null);
+    try {
+      const res = await fetch("/api/llm/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider: selected.name, model }),
+      });
+      const data = await res.json();
+      setResult(data);
+      showToast(data.ok ? "success" : "error",
+        data.ok ? `${selected.label} responded` : `${selected.label}: unavailable`);
+    } catch (e) {
+      setResult({ ok: false, detail: e instanceof Error ? e.message : "Test failed" });
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  return (
+    <div className="ws-page ws-scroll">
+      <div className="ws-padded" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 980, 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-accent-soft)", border: "1px solid var(--ws-border-strong)", display: "grid", placeItems: "center", color: "var(--ws-accent)", flexShrink: 0 }}>
+            <Sparkles size={20} />
+          </div>
+          <div>
+            <h2 className="ws-title" style={{ fontSize: 18 }}>LLM Endpoints</h2>
+            <div className="ws-body" style={{ marginTop: 2 }}>
+              Where the platform uses language models, which are configured in this deployment, and a live test for each.
+            </div>
+          </div>
+        </div>
+
+        {/* Where LLMs are used — informational */}
+        <div className="ws-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <Info size={16} color="var(--ws-accent)" />
+            <div style={{ color: "var(--ws-text)", fontWeight: 700, fontSize: 14 }}>When does this platform call an LLM?</div>
+          </div>
+          {usage.map((u) => (
+            <div key={u.task} style={{ padding: "10px 14px", borderRadius: "var(--ws-radius-sm)", background: "rgba(0,0,0,0.16)", border: "1px solid var(--ws-border)" }}>
+              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ws-text)" }}>{u.task}</div>
+              <div className="ws-body" style={{ fontSize: 12, marginTop: 2 }}>{u.when}</div>
+              <div className="ws-body" style={{ fontSize: 11, marginTop: 2, fontFamily: "var(--ws-mono, monospace)", opacity: 0.7 }}>{u.where}</div>
+            </div>
+          ))}
+          <div className="ws-body" style={{ fontSize: 12 }}>
+            Credentials are read from environment variables when the Studio starts — set them in <code style={{ color: "var(--ws-accent)" }}>docker-compose.yml</code> (or <code style={{ color: "var(--ws-accent)" }}>.env</code>) and restart.
+          </div>
+        </div>
+
+        {/* Provider grid */}
+        <div className="ws-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+          <div style={{ color: "var(--ws-text)", fontWeight: 700, fontSize: 14 }}>Configured providers</div>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 12 }}>
+            {providers.map((p) => (
+              <button key={p.name} className="ws-btn" data-active={selected?.name === p.name}
+                onClick={() => { setSelected(p); setModel(p.models[0] ?? ""); setResult(null); }}
+                style={{ flexDirection: "column", alignItems: "flex-start", gap: 6, padding: 14 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
+                  {p.configured
+                    ? <CheckCircle2 size={14} color="#1f9d5f" />
+                    : <AlertCircle size={14} color="#c9a227" />}
+                  <span style={{ fontSize: 13, fontWeight: 700, color: "var(--ws-text)" }}>{p.label}</span>
+                </div>
+                <div className="ws-body" style={{ fontSize: 11, textAlign: "left" }}>
+                  {p.env_var ? <code>{p.env_var}</code> : "no key needed"}
+                  {p.configured && p.env_value_hint ? ` · set (${p.env_value_hint})` : p.env_var ? " · not set" : ""}
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {selected ? (
+            <>
+              <div>
+                <label className="ws-label">Model</label>
+                <select className="ws-input" style={{ width: "100%" }} value={model}
+                  onChange={(e) => setModel(e.target.value)}>
+                  {selected.models.map((m) => <option key={m} value={m}>{m}</option>)}
+                </select>
+              </div>
+
+              <button className="ws-btn" onClick={handleTest} disabled={testing}
+                style={{ justifyContent: "center", background: "var(--ws-accent-soft)", borderColor: "var(--ws-accent)", color: "var(--ws-accent)" }}>
+                {testing ? <><Loader2 size={15} className="ws-spin" />Sending test prompt…</> : <><Send size={15} />Send test prompt</>}
+              </button>
+
+              {result ? (
+                <div style={{ padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", border: `1px solid ${result.ok ? "rgba(76,195,138,0.4)" : "rgba(236,35,21,0.4)"}`, background: "rgba(255,255,255,0.6)" }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    {result.ok ? <CheckCircle2 size={15} color="#1f9d5f" /> : <AlertCircle size={15} color="#ec2315" />}
+                    <span style={{ fontSize: 13, fontWeight: 700, color: "var(--ws-text)" }}>
+                      {result.ok ? `${selected.label} responded${result.model ? ` (${result.model})` : ""}` : "Test failed"}
+                    </span>
+                  </div>
+                  <div className="ws-body" style={{ fontSize: 12, marginTop: 6, whiteSpace: "pre-wrap", fontFamily: "var(--ws-mono, monospace)" }}>{result.detail}</div>
+                </div>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+
+        <div style={{ position: "fixed", bottom: 28, right: 28, display: "flex", flexDirection: "column", gap: 10, zIndex: 1000 }}>
+          {toasts.map((t) => (
+            <div key={t.id} className="ws-animate-in" style={{ display: "flex", alignItems: "center", gap: 10, padding: "13px 18px", borderRadius: "var(--ws-radius-sm)", background: "rgba(255,255,255,0.96)", border: `1px solid ${t.type === "success" ? "rgba(76,195,138,0.4)" : "rgba(255,123,114,0.4)"}`, boxShadow: "0 8px 24px rgba(0,0,0,0.5)", backdropFilter: "blur(12px)" }}>
+              {t.type === "success" ? <CheckCircle2 size={16} color="#1f9d5f" /> : <AlertCircle size={16} color="#ec2315" />}
+              <span style={{ color: "var(--ws-text)", fontSize: 13, fontWeight: 500 }}>{t.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/McpConsoleWorkspace/McpConsoleWorkspace.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useState } from "react";
+import {
+  Wrench, Play, Loader2, CheckCircle2, AlertCircle, ChevronRight, Wand2,
+} from "lucide-react";
+
+type JsonSchema = {
+  type?: string;
+  properties?: Record<string, JsonSchema & { description?: string; enum?: string[] }>;
+  required?: string[];
+};
+
+type Tool = { name: string; description: string; inputSchema: JsonSchema };
+type Toast = { id: number; type: "success" | "error"; text: string };
+
+const EXAMPLE_PROMPTS: Record<string, Record<string, unknown>> = {
+  extract_entities: { text: "Siemens AG signed a contract with Bosch GmbH in Stuttgart." },
+  extract_relations: { text: "Maria Keller approved the deal for Siemens AG." },
+  add_entity: { id: "ORG:Nvidia", label: "Nvidia", type: "ORG", metadata: { source: "studio-ui" } },
+  add_relationship: { source: "ORG:Nvidia", target: "PERSON:Maria Keller", type: "supplies_to", metadata: {} },
+  query_graph: { mode: "search", query: "Siemens", limit: 10 },
+  record_decision: {
+    category: "technology",
+    scenario: "Adopt Databricks as the primary lakehouse",
+    reasoning: "Existing Spark tooling and unified governance",
+    alternatives_considered: ["Snowflake", "BigQuery"],
+    outcome: "accepted",
+    confidence: 0.9,
+  },
+  find_precedents: { decision: "Adopt Databricks as the primary lakehouse" },
+  get_graph_analytics: {},
+  get_graph_summary: {},
+  export_graph: { format: "json" },
+};
+
+export function McpConsoleWorkspace() {
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [selected, setSelected] = useState<Tool | null>(null);
+  const [args, setArgs] = useState("");
+  const [running, setRunning] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  useEffect(() => {
+    fetch("/api/mcp/tools").then((r) => r.json()).then((d) => {
+      setTools(d.tools ?? []);
+    }).catch(() => {});
+  }, []);
+
+  function showToast(type: Toast["type"], text: string) {
+    const id = Date.now();
+    setToasts((p) => [...p, { id, type, text }]);
+    setTimeout(() => setToasts((p) => p.filter((t) => t.id !== id)), 5000);
+  }
+
+  function selectTool(tool: Tool) {
+    setSelected(tool);
+    setResult(null);
+    setError(null);
+    const example = EXAMPLE_PROMPTS[tool.name];
+    setArgs(JSON.stringify(example ?? {}, null, 2));
+  }
+
+  async function handleCall() {
+    if (!selected) return;
+    let parsed: Record<string, unknown>;
+    try {
+      parsed = args.trim() ? JSON.parse(args) : {};
+    } catch {
+      setError("Arguments must be valid JSON");
+      return;
+    }
+    setRunning(true);
+    setResult(null);
+    setError(null);
+    try {
+      const res = await fetch("/api/mcp/call", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: selected.name, arguments: parsed }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.detail ?? `HTTP ${res.status}`);
+        showToast("error", `${selected.name} failed`);
+      } else {
+        setResult(JSON.stringify(data.result, null, 2));
+        showToast("success", `${selected.name} completed`);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Call failed");
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  const required = selected?.inputSchema?.required ?? [];
+
+  return (
+    <div className="ws-page ws-scroll">
+      <div className="ws-padded" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 1100, 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-accent-soft)", border: "1px solid var(--ws-border-strong)", display: "grid", placeItems: "center", color: "var(--ws-accent)", flexShrink: 0 }}>
+            <Wrench size={20} />
+          </div>
+          <div>
+            <h2 className="ws-title" style={{ fontSize: 18 }}>MCP Tool Console</h2>
+            <div className="ws-body" style={{ marginTop: 2 }}>
+              {tools.length} tools published to Claude, Codex and Copilot. Calls run against this live Studio graph.
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 18, alignItems: "start" }}>
+          {/* Tool list */}
+          <div className="ws-card" style={{ padding: 16, display: "flex", flexDirection: "column", gap: 6, maxHeight: 560, overflowY: "auto" }}>
+            <div className="ws-label">Available tools</div>
+            {tools.length === 0 ? <div className="ws-body" style={{ fontSize: 12 }}>Loading…</div> : null}
+            {tools.map((t) => (
+              <button key={t.name} className="ws-btn" data-active={selected?.name === t.name}
+                onClick={() => selectTool(t)}
+                style={{ justifyContent: "space-between", fontSize: 12, textAlign: "left" }}>
+                <span style={{ fontFamily: "var(--ws-mono, monospace)" }}>{t.name}</span>
+                <ChevronRight size={13} />
+              </button>
+            ))}
+          </div>
+
+          {/* Call panel */}
+          <div className="ws-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+            {!selected ? (
+              <div className="ws-body">Select a tool to inspect its schema and invoke it.</div>
+            ) : (
+              <>
+                <div>
+                  <div style={{ color: "var(--ws-text)", fontWeight: 700, fontSize: 14, fontFamily: "var(--ws-mono, monospace)" }}>{selected.name}</div>
+                  <div className="ws-body" style={{ fontSize: 12, marginTop: 4 }}>{selected.description}</div>
+                </div>
+
+                {/* Schema summary */}
+                <div style={{ padding: "12px 14px", borderRadius: "var(--ws-radius-sm)", background: "rgba(0,0,0,0.16)", border: "1px solid var(--ws-border)" }}>
+                  <div className="ws-label" style={{ marginBottom: 6 }}>Parameters</div>
+                  {Object.keys(selected.inputSchema?.properties ?? {}).length === 0 ? (
+                    <div className="ws-body" style={{ fontSize: 12 }}>No parameters.</div>
+                  ) : (
+                    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                      {Object.entries(selected.inputSchema.properties ?? {}).map(([name, spec]) => (
+                        <div key={name} style={{ fontSize: 12, color: "var(--ws-text-muted)" }}>
+                          <code style={{ color: "var(--ws-accent)" }}>{name}</code>
+                          {required.includes(name) ? <span style={{ color: "#ec2315" }}> *</span> : null}
+                          {spec.type ? <span> · {spec.type}</span> : null}
+                          {spec.description ? <span> — {spec.description}</span> : null}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                    <label className="ws-label">Arguments (JSON)</label>
+                    {EXAMPLE_PROMPTS[selected.name] ? (
+                      <button className="ws-btn ws-btn--ghost" style={{ fontSize: 11, padding: "4px 10px" }}
+                        onClick={() => setArgs(JSON.stringify(EXAMPLE_PROMPTS[selected.name], null, 2))}>
+                        <Wand2 size={12} /> Load example
+                      </button>
+                    ) : null}
+                  </div>
+                  <textarea className="ws-input" style={{ width: "100%", minHeight: 140, fontFamily: "var(--ws-mono, monospace)", fontSize: 12, resize: "vertical" }}
+                    value={args} onChange={(e) => setArgs(e.target.value)} disabled={running} spellCheck={false} />
+                </div>
+
+                <button className="ws-btn" onClick={handleCall} disabled={running}
+                  style={{ justifyContent: "center", background: "var(--ws-accent-soft)", borderColor: "var(--ws-accent)", color: "var(--ws-accent)" }}>
+                  {running ? <><Loader2 size={15} className="ws-spin" />Running…</> : <><Play size={15} />Invoke tool</>}
+                </button>
+
+                {error ? (
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderRadius: "var(--ws-radius-sm)", border: "1px solid rgba(236,35,21,0.4)", background: "rgba(255,255,255,0.6)" }}>
+                    <AlertCircle size={15} color="#ec2315" />
+                    <span style={{ fontSize: 13, color: "var(--ws-text)" }}>{error}</span>
+                  </div>
+                ) : null}
+
+                {result ? (
+                  <div>
+                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
+                      <CheckCircle2 size={15} color="#1f9d5f" />
+                      <span className="ws-label" style={{ margin: 0 }}>Result</span>
+                    </div>
+                    <pre style={{
+                      margin: 0, padding: "14px 16px", borderRadius: "var(--ws-radius-sm)",
+                      background: "rgba(0,0,0,0.2)", border: "1px solid var(--ws-border)",
+                      color: "var(--ws-text)", fontSize: 12, overflowX: "auto", maxHeight: 340,
+                      fontFamily: "var(--ws-mono, monospace)",
+                    }}>{result}</pre>
+                  </div>
+                ) : null}
+              </>
+            )}
+          </div>
+        </div>
+
+        <div style={{ position: "fixed", bottom: 28, right: 28, display: "flex", flexDirection: "column", gap: 10, zIndex: 1000 }}>
+          {toasts.map((t) => (
+            <div key={t.id} className="ws-animate-in" style={{ display: "flex", alignItems: "center", gap: 10, padding: "13px 18px", borderRadius: "var(--ws-radius-sm)", background: "rgba(255,255,255,0.96)", border: `1px solid ${t.type === "success" ? "rgba(76,195,138,0.4)" : "rgba(255,123,114,0.4)"}`, boxShadow: "0 8px 24px rgba(0,0,0,0.5)", backdropFilter: "blur(12px)" }}>
+              {t.type === "success" ? <CheckCircle2 size={16} color="#1f9d5f" /> : <AlertCircle size={16} color="#ec2315" />}
+              <span style={{ color: "var(--ws-text)", fontSize: 13, fontWeight: 500 }}>{t.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltm-blueverse/alpha-semantic-hub",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "Alpha Semantic Hub \u2014 Graph-Native Infrastructure for Context and Accountable AI Systems",
   "keywords": [
     "alpha-semantic-hub",