/* ============================================================ Matrix Cloud — Enterprise Console Production port of the Claude Design prototype, wired to the real Matrix Runtime API (/v1/*). Live views: Overview, Runtimes, Sandboxes, Jobs, Models. The rest render the design's reference data so the console is complete and navigable. React + ReactDOM are provided as globals by vendored UMD builds. ============================================================ */ /* --------------------------------------------------------------- API client — same-origin calls to the runtime control surface. --------------------------------------------------------------- */ const API_BASE = window.MATRIX_API_BASE || ""; const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); const TOKEN_KEY = "matrixcloud_token"; function getToken() { try { return localStorage.getItem(TOKEN_KEY) || ""; } catch (e) { return ""; } } function setToken(t) { try { t ? localStorage.setItem(TOKEN_KEY, t) : localStorage.removeItem(TOKEN_KEY); } catch (e) {} } // urlIntent inspects the address bar for email-link flows. Resend links point at // {APP_URL}/reset?token=mxpr_… and {APP_URL}/verify?token=mxev_…; the SPA serves // index.html for those paths, so we read the intent here and clear the query. function urlIntent() { try { const u = new URL(window.location.href); const token = u.searchParams.get("token") || ""; const path = u.pathname.replace(/\/+$/, ""); if (path.endsWith("/reset") || token.startsWith("mxpr_")) return { kind: "reset", token }; if (path.endsWith("/verify") || token.startsWith("mxev_")) return { kind: "verify", token }; } catch (e) {} return { kind: "", token: "" }; } function clearURLToken() { try { window.history.replaceState({}, "", window.location.pathname.replace(/\/(reset|verify)$/, "/") || "/"); } catch (e) {} } const api = { async req(method, path, body) { const opts = { method, headers: {} }; if (body !== undefined) { opts.headers["Content-Type"] = "application/json"; opts.body = JSON.stringify(body); } const tok = getToken() || window.MATRIX_API_TOKEN; if (tok) opts.headers["Authorization"] = "Bearer " + tok; const res = await fetch(API_BASE + path, opts); const txt = await res.text(); let data = null; try { data = txt ? JSON.parse(txt) : null; } catch (e) { data = txt; } if (!res.ok) { const err = new Error((data && data.error) || ("HTTP " + res.status)); err.status = res.status; err.data = data; throw err; } return data; }, get(p) { return this.req("GET", p); }, post(p, b) { return this.req("POST", p, b); }, del(p) { return this.req("DELETE", p); }, eventsURL(p) { return API_BASE + p; }, }; // Auth helpers backed by the runtime's user store (SQLite or Postgres/Neon). const auth = { async me() { const r = await api.get("/v1/auth/me"); return r.user; }, async login(email, password) { const r = await api.post("/v1/auth/login", { email, password }); setToken(r.token); return r.user; }, async signup(name, email, password, workspace) { const r = await api.post("/v1/auth/signup", { name, email, password, workspace }); setToken(r.token); return r.user; }, async logout(all) { try { await api.post("/v1/auth/logout" + (all ? "?all=true" : ""), {}); } catch (e) {} setToken(null); }, async forgot(email) { const r = await api.post("/v1/auth/forgot", { email }); return r.message || "Check your email."; }, async reset(token, password) { const r = await api.post("/v1/auth/reset", { token, password }); return r.message || "Password updated."; }, async verify(token) { const r = await api.post("/v1/auth/verify", { token }); return r.message || "Email verified."; }, }; // Hosted control-plane helpers (workspace-scoped via the session bearer token). const cloud = { async listRuntimes() { const r = await api.get("/v1/cloud/runtimes"); return r.runtimes || []; }, async mintJoinToken(label, maxUses, ttlMinutes) { return api.post("/v1/cloud/join-tokens", { label, max_uses: maxUses, ttl_minutes: ttlMinutes }); }, async listProviders() { const r = await api.get("/v1/cloud/providers"); return r.providers || []; }, async setProvider(provider, label, secret, meta) { const r = await api.post("/v1/cloud/providers", { provider, label, secret, meta }); return r.provider; }, async listAudit() { const r = await api.get("/v1/cloud/audit"); return r.events || []; }, }; async function runJobToCompletion(type, payload, timeoutMs = 25000) { const c = await api.post("/v1/jobs", { type, payload }); const start = Date.now(); while (Date.now() - start < timeoutMs) { const s = await api.get("/v1/jobs/" + c.job_id); if (["complete", "error", "expired", "cancelled"].includes(s.status)) { if (s.status !== "complete") throw new Error(s.error || s.status); return s.result; } await sleep(500); } throw new Error("timed out"); } function fmtParams(n) { if (!n) return "—"; if (n >= 1e9) return (n / 1e9).toFixed(1) + "B"; if (n >= 1e6) return (n / 1e6).toFixed(0) + "M"; return String(n); } /* --------------------------------------------------------------- Live runtime context — polls /v1/health + /v1/capabilities. --------------------------------------------------------------- */ const RuntimeCtx = React.createContext(null); function useRuntimeState() { const [s, setS] = React.useState({ loading: true, online: false, health: null, caps: null }); React.useEffect(() => { let alive = true; async function tick() { try { const [h, c] = await Promise.all([api.get("/v1/health"), api.get("/v1/capabilities")]); if (alive) setS({ loading: false, online: true, health: h, caps: c }); } catch (e) { if (alive) setS((p) => ({ ...p, loading: false, online: false })); } } tick(); const t = setInterval(tick, 5000); return () => { alive = false; clearInterval(t); }; }, []); return s; } const useRuntime = () => React.useContext(RuntimeCtx); function useJobs(ms) { const [jobs, setJobs] = React.useState(null); const load = React.useCallback(async () => { try { const r = await api.get("/v1/jobs"); setJobs(r.jobs || []); } catch (e) { setJobs(null); } }, []); React.useEffect(() => { load(); if (ms) { const t = setInterval(load, ms); return () => clearInterval(t); } }, [load, ms]); return { jobs, refresh: load }; } /* --------------------------------------------------------------- Icons (1.7px stroke). --------------------------------------------------------------- */ function GI({ d, size = 18, sw = 1.7, style, className }) { return ( ); } const G = { grid: <>, server: <>, download: <>, cpu: <>, bot: <>, activity: , logs: <>, shield: <>, audit: <>, gear: <>, bell: <>, search: <>, chev: , chevr: , plus: , arrowup: <>, arrowdn: <>, check: , x: <>, play: , refresh: <>, menu: <>, globe: <>, key: <>, zap: , clock: <>, layers: <>, user: <>, terminal: <>, }; /* --------------------------------------------------------------- Reference data (fallback + demo fleet/governance context). --------------------------------------------------------------- */ const FILESYSTEM_CMD = "npx -y @modelcontextprotocol/server-filesystem /tmp"; const STATUS_CLASS = { complete: "green", running: "blue", queued: "gray", error: "red", expired: "amber", cancelled: "amber" }; // Real-data hooks — the console renders only what the backend reports. function useFetch(path, pollMs) { const [data, setData] = React.useState(null); const load = React.useCallback(async () => { try { setData(await api.get(path)); } catch (e) { setData(null); } }, [path]); React.useEffect(() => { load(); if (pollMs) { const t = setInterval(load, pollMs); return () => clearInterval(t); } }, [load, pollMs]); return { data, refresh: load }; } function useRuntimes(pollMs) { const { data, refresh } = useFetch("/v1/runtimes", pollMs); return { runtimes: data ? data.runtimes || [] : null, refresh }; } function useCatalog() { const { data } = useFetch("/v1/catalog"); if (!data) return null; return (data.items || []).map((it) => ({ ...it, kindClass: it.kind_class, startCommand: it.start_command })); } // useCloudRuntimes lists runtimes registered to this workspace (HF Spaces and // self-hosted runtimes that joined via a join token). Distinct from /v1/runtimes // which describes this local node. function useCloudRuntimes(pollMs) { const { data, refresh } = useFetch("/v1/cloud/runtimes", pollMs); return { runtimes: data ? data.runtimes || [] : null, refresh }; } function timeAgo(iso) { if (!iso) return "—"; const t = new Date(iso).getTime(); if (!t) return "—"; const s = Math.max(0, Math.round((Date.now() - t) / 1000)); if (s < 60) return s + "s ago"; if (s < 3600) return Math.round(s / 60) + "m ago"; if (s < 86400) return Math.round(s / 3600) + "h ago"; return Math.round(s / 86400) + "d ago"; } const RT_STATUS_CLASS = { online: "green", idle: "amber", pending: "violet", offline: "red" }; /* --------------------------------------------------------------- Shared primitives. --------------------------------------------------------------- */ function Spark({ data, color }) { const max = Math.max(...data); return
{data.map((v, i) => )}
; } function ItemMono({ initials, size = 44 }) { return (
{initials}
); } function CmdBlock({ label, children }) { const [copied, setCopied] = React.useState(false); function copy() { try { navigator.clipboard.writeText(children); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1300); } return (
{label} 
$ {children}
); } function LiveTag() { return live; } // WARN_META maps readiness warning codes to a human title, severity and the // console route that fixes them. const WARN_META = { api_token_missing: { sev: "high", title: "API token not set", route: "settings" }, matrixshell_enabled: { sev: "med", title: "MatrixShell enabled", route: "settings" }, sqlite_in_use: { sev: "med", title: "Using SQLite (single-node)", route: "settings" }, store_unavailable: { sev: "high", title: "User store unavailable", route: "settings" }, local_dev_mode: { sev: "low", title: "Local-dev mode", route: null }, }; // ReadinessBanner surfaces production-safety warnings from GET /v1/ready. It is // dismissible per-session and only renders when there is something to show. function ReadinessBanner({ go }) { const { data } = useFetch("/v1/ready", 30000); const [dismissed, setDismissed] = React.useState(() => { try { return sessionStorage.getItem("mc-ready-dismissed") === "1"; } catch (e) { return false; } }); if (!data || dismissed) return null; // Hide the low-severity local-dev-only notice unless something else is wrong. const warnings = (data.warnings || []).filter((w) => (WARN_META[w.code]?.sev || "low") !== "low"); if (warnings.length === 0) return null; const worst = warnings.some((w) => WARN_META[w.code]?.sev === "high") ? "high" : "med"; const color = worst === "high" ? "var(--red)" : "var(--amber, #f5a623)"; const bg = worst === "high" ? "var(--red-soft)" : "rgba(245,166,35,0.10)"; function dismiss() { try { sessionStorage.setItem("mc-ready-dismissed", "1"); } catch (e) {} setDismissed(true); } return (
Production readiness {warnings.length} warning{warnings.length > 1 ? "s" : ""}
{warnings.map((w) => { const meta = WARN_META[w.code] || { title: w.code, route: null }; return (
{meta.title}. {w.message} {meta.route && go && }
); })}
); } /* --------------------------------------------------------------- Overview (live header + recent jobs). --------------------------------------------------------------- */ function OverviewView({ go }) { const rt = useRuntime(); const { jobs } = useJobs(5000); const liveJobs = jobs || []; const running = liveJobs.filter((j) => j.status === "running" || j.status === "queued").length; const caps = (rt.caps && rt.caps.capabilities) || []; const limits = (rt.caps && rt.caps.limits) || {}; const metrics = [ { lab: "Runtime", ic: G.server, val: rt.online ? "Online" : (rt.loading ? "…" : "Offline"), delta: rt.health ? rt.health.mode : "—", dir: rt.online ? "up" : "down", note: "this node" }, { lab: "Capabilities", ic: G.zap, val: String(caps.length || "—"), delta: rt.health ? "v" + rt.health.version : "—", dir: "flat", note: "advertised" }, { lab: "Active jobs", ic: G.activity, val: String(running), delta: String(liveJobs.length) + " total", dir: "up", note: "live" }, { lab: "Max concurrency", ic: G.layers, val: String(limits.max_concurrent_jobs || "—"), delta: (limits.max_ttl_seconds || 600) + "s TTL", dir: "flat", note: "limit" }, ]; const { runtimes } = useRuntimes(5000); const recent = liveJobs.slice(0, 6); const rtRuntimes = (rt.caps && rt.caps.runtimes) || {}; // Real job-status breakdown from live jobs (no fabricated throughput). const byStatus = {}; liveJobs.forEach((j) => { byStatus[j.status] = (byStatus[j.status] || 0) + 1; }); const statusRows = ["complete", "running", "queued", "error", "expired", "cancelled"].filter((s) => byStatus[s]).map((s) => [s, byStatus[s]]); return (

{rt.health ? rt.health.mode + " · " + rt.health.runtime_id : "matrix runtime"}

Overview

Real-time health of this Matrix Runtime, its capabilities, and jobs.

{metrics.map((m) => (
{m.lab}
{m.val}
{m.dir !== "flat" && } {m.delta} · {m.note}
))}
Runtimes {runtimes && }
{(runtimes || []).length === 0 && } {(runtimes || []).map((c) => ( ))}
RuntimeModeRegionJobsStatus
{runtimes ? "No runtimes." : "…"}
{c.name} {c.mode} {c.region} {c.jobs} {c.status}
Jobs by status{liveJobs.length} total
{statusRows.length === 0 &&
No jobs yet — start a sandbox or inspect a model.
} {statusRows.map(([s, n]) => (
{s}
{n}
))}
Runtime health
{[["Control plane", rt.online ? "green" : "red", rt.online ? "operational" : "unreachable"], ["Node runner", rtRuntimes.node ? "green" : "amber", rtRuntimes.node ? "ready" : "not found"], ["Python runner", rtRuntimes.python ? "green" : "amber", rtRuntimes.python ? "ready" : "not found"], ["Ollama", rtRuntimes.ollama ? "green" : "gray", rtRuntimes.ollama ? "ready" : "not detected"], ["vLLM", rtRuntimes.vllm ? "green" : "gray", rtRuntimes.vllm ? "ready" : "not detected"]].map(([k, s, v]) => (
{k} {v}
))}
Recent jobs {jobs && }
{recent.length === 0 && } {recent.map((j) => ( ))}
Job IDTypeStatusCreated
No jobs yet — start a sandbox or inspect a model.
{j.job_id} {j.type} {j.status === "running" && }{j.status} {(j.created_at || "").replace("T", " ").replace("Z", "")}
); } /* --------------------------------------------------------------- Catalog + detail. --------------------------------------------------------------- */ function CatalogView({ openItem }) { const [tab, setTab] = React.useState("All"); const [q, setQ] = React.useState(""); const catalog = useCatalog(); const tabs = ["All", "MCP Servers", "Agents", "Tools", "Models", "Verified", "Sandbox Enabled"]; const items = (catalog || []).filter((it) => { if (q && !(it.name + it.desc + it.id).toLowerCase().includes(q.toLowerCase())) return false; if (tab === "All") return true; if (tab === "Verified") return it.verified; if (tab === "Sandbox Enabled") return it.sandbox; return it.kind === tab.replace(/s$/, "") || it.kind + "s" === tab; }); return (

Registry {catalog && }

Catalog

Curated MCP servers, agents, tools, and models served by this runtime. Test sandbox-enabled servers in a 10-minute session before you install.

setQ(e.target.value)} placeholder="Search MCP servers, tools, agents, models…" />
{tabs.map((t) => )}
{catalog === null &&
Loading catalog…
} {items.map((it) => (
{it.kind} {it.verified && Verified} {it.sandbox && it.startCommand && Sandbox · live} {it.sandbox && !it.startCommand && Sandbox}

{it.desc}

{it.runtime}· {it.source}· {it.license}· {it.secrets ? "needs secrets" : "no secrets"}
{it.sandbox ? : }
))}
); } function DetailView({ item, back, startSandbox }) { const manifest = { id: item.id, kind: item.kind.toLowerCase().replace(" ", "_"), runtime: { type: item.runtime.split(" / ")[0].toLowerCase(), transport: item.runtime.includes("stdio") ? "stdio" : "remote" }, sandbox: { enabled: item.sandbox, ttl_seconds: 600, requires_secrets: item.secrets }, source: item.source, license: item.license, version: item.version, }; const rows = [["Runtime", item.runtime], ["Source", item.source], ["License", item.license], ["Secrets", item.secrets ? "Required" : "None"], ["Network", item.network], ["Start command", item.startCommand || "—"]]; return (
{item.kind} {item.verified && Verified} {item.sandbox && Sandbox Enabled} {!item.secrets && No Secrets}

{item.name}

{item.desc}

Overview
{rows.map(([k, v]) => (
{k}{v}
))}
Sandbox {item.sandbox ? "Available" : "Unavailable"}
{[["TTL", "10 minutes"], ["Requires secrets", item.secrets ? "Yes" : "No"], ["Network", item.network], ["Runtime", item.runtime.split(" / ")[0]]].map(([k, v]) => (
{k}{v}
))}
Manifestmanifest.json
{JSON.stringify(manifest, null, 2)}
); } /* --------------------------------------------------------------- Sandbox modal + LIVE session (wired to /v1/sandbox/sessions). --------------------------------------------------------------- */ function SandboxModal({ item, onClose, onStart }) { const real = !!item.startCommand; return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
Test {item.name}

{real ? "This starts a real sandbox on this Matrix Runtime over stdio. No production credentials are used. The session expires automatically after 10 minutes." : "This item has no runnable start command in this demo. The session will play a simulated lifecycle."}

{[["Runtime", "Matrix Runtime · local"], ["TTL", "10 minutes"], ["Network", item.network], ["Secrets", "None"], ["Command", real ? item.startCommand : "—"]].map(([k, v]) => (
{k} {v}
))}
, document.body ); } function sampleArgs(tool) { const s = tool.input_schema || tool.inputSchema || {}; const props = s.properties || {}; const req = s.required || Object.keys(props); const out = {}; for (const k of req) { const p = props[k] || {}; if (k === "path") out[k] = "/tmp"; else if (k === "pattern") out[k] = "*"; else if (p.type === "number" || p.type === "integer") out[k] = 0; else if (p.type === "boolean") out[k] = false; else if (p.type === "array") out[k] = []; else out[k] = ""; } return out; } const SIM_LIFECYCLE = [ { step: "validate", status: "ok", message: "Command accepted" }, { step: "sandbox", status: "start", message: "Temporary directory created" }, { step: "mcp_start", status: "start", message: "MCP server started" }, { step: "mcp_initialize", status: "ok", message: "MCP initialize succeeded" }, { step: "tools_list", status: "ok", message: "Found 4 tools" }, { step: "ready", status: "ok", message: "Sandbox ready" }, ]; const SIM_TOOLS = [ { name: "list_directory", description: "Read directory contents.", input_schema: { properties: { path: { type: "string" } }, required: ["path"] } }, { name: "read_file", description: "Read the contents of a file.", input_schema: { properties: { path: { type: "string" } }, required: ["path"] } }, { name: "write_file", description: "Write content to a file.", input_schema: { properties: { path: { type: "string" }, content: { type: "string" } }, required: ["path", "content"] } }, ]; function SandboxSession({ item, back }) { const [events, setEvents] = React.useState([]); const [phase, setPhase] = React.useState("starting"); // starting | ready | expired | error const [tools, setTools] = React.useState([]); const [secs, setSecs] = React.useState(600); const [activeTool, setActiveTool] = React.useState(0); const [toolOut, setToolOut] = React.useState(null); const [running, setRunning] = React.useState(false); const [live, setLive] = React.useState(true); const sessRef = React.useRef(null); const logRef = React.useRef(null); React.useEffect(() => { let es = null, timer = null, cancelled = false; const cmd = item.startCommand; async function loadTools(sid) { try { const r = await api.get("/v1/sandbox/sessions/" + sid + "/tools"); if (!cancelled) setTools(r.tools || []); } catch (e) {} } function simulate() { setLive(false); let i = 0; timer = setInterval(() => { if (i >= SIM_LIFECYCLE.length) { clearInterval(timer); setPhase("ready"); setTools(SIM_TOOLS); startCountdown(); return; } setEvents((e) => [...e, SIM_LIFECYCLE[i]]); i++; }, 600); } function startCountdown(expiresAt) { timer = setInterval(() => { setSecs((s) => { if (expiresAt) return Math.max(0, Math.round((expiresAt - Date.now()) / 1000)); return Math.max(0, s - 1); }); }, 1000); } if (!cmd) { simulate(); return () => { cancelled = true; if (timer) clearInterval(timer); }; } (async () => { try { const r = await api.post("/v1/sandbox/sessions", { entity_id: item.id, ttl_seconds: 600, runtime: "node", transport: "stdio", start_command: cmd }); if (cancelled) { api.del("/v1/sandbox/sessions/" + r.session_id).catch(() => {}); return; } sessRef.current = r.session_id; const expiresAt = r.expires_at ? new Date(r.expires_at).getTime() : null; es = new EventSource(api.eventsURL("/v1/sandbox/sessions/" + r.session_id + "/events")); es.onmessage = (ev) => { let d; try { d = JSON.parse(ev.data); } catch (e) { return; } setEvents((e) => [...e, d]); if (d.step === "ready") { setPhase("ready"); loadTools(r.session_id); } else if (d.status === "expired") setPhase("expired"); else if (d.status === "error") setPhase("error"); }; es.onerror = () => { /* stream closes when the job ends; status already captured */ }; startCountdown(expiresAt); } catch (e) { setEvents((ev) => [...ev, { step: "error", status: "error", message: e.message }]); simulate(); } })(); return () => { cancelled = true; if (es) es.close(); if (timer) clearInterval(timer); if (sessRef.current) api.del("/v1/sandbox/sessions/" + sessRef.current).catch(() => {}); }; }, [item.id]); React.useEffect(() => { if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight; }, [events]); const mm = String(Math.floor(secs / 60)).padStart(2, "0"); const ss = String(secs % 60).padStart(2, "0"); async function runTool() { const tool = tools[activeTool]; if (!tool) return; setRunning(true); setToolOut(null); const args = sampleArgs(tool); try { if (live && sessRef.current) { const r = await api.post("/v1/sandbox/sessions/" + sessRef.current + "/tools/call", { name: tool.name, arguments: args }); setToolOut(r.result !== undefined ? r.result : r); } else { await sleep(700); setToolOut(tool.name === "list_directory" ? { entries: ["notes.txt", "out.txt", "project/", "readme.md"], count: 4 } : { ok: true, tool: tool.name }); } } catch (e) { setToolOut({ error: e.message }); } finally { setRunning(false); } } const toolCount = tools.length; return (

{item.name} · Sandbox

session {sessRef.current || "sbx_…"} · {live ? "live runtime" : "simulated"}

{live && } {phase === "ready" ? "Running" : phase === "error" ? "Error" : phase === "expired" ? "Expired" : "Starting"} {mm}:{ss}
Lifecycle
{events.map((e, i) => (
{e.step}
{e.message}
))} {phase === "starting" &&
}
Tool explorer{phase === "ready" ? toolCount + " tools" : "—"}
{phase !== "ready" ? (
Waiting for tools/list…
) : (
{tools.map((t, i) => ( ))}
{tools[activeTool] && <>

{tools[activeTool].description}

Input
{JSON.stringify(sampleArgs(tools[activeTool]), null, 2)}
} {toolOut && (
Output
{JSON.stringify(toolOut, null, 2)}
)}
)}
Logs{live && SSE}
{events.map((e, i) => (
[{e.step}] {e.message}
))} {phase === "ready" &&
stdout: server listening on stdio
}
Verdict {phase === "ready" ? "Passed" : phase === "error" ? "Failed" : "Pending"}
{phase === "ready" ? ( <>

The MCP server initialized and exposed {toolCount} tools. No secrets were required. No blocked commands detected.

Recommended next step
matrix install {item.id.split(":")[1]} --alias {item.id.split(":")[1]}
) :

{phase === "error" ? "Sandbox failed — see lifecycle." : "Running safety checks…"}

}
); } /* --------------------------------------------------------------- Runtimes (live self runtime + demo fleet). --------------------------------------------------------------- */ function WorkspaceRuntimes() { const { runtimes, refresh } = useCloudRuntimes(5000); if (runtimes === null) return null; return (
Workspace runtimes · joined sandboxes & self-hosted
{runtimes.length === 0 && } {runtimes.map((r) => { const sc = RT_STATUS_CLASS[r.status] || "violet"; return ( ); })}
RuntimeStatusKindCapabilitiesHeartbeat
No runtimes have joined yet. Use Add a runtime to mint a join token or duplicate the HF Space.
{r.name || r.id}
{r.hf_space ?
🤗 {r.hf_space}
: (r.url ?
{r.url}
: null)} 		{r.status} {r.kind || "self-hosted"} {(r.caps || []).join(" · ") || "—"} {timeAgo(r.last_seen_at)}
); } function RuntimesView({ go }) { const { runtimes, refresh } = useRuntimes(5000); const rows = runtimes || []; return (

Execution plane {runtimes && }

Runtimes

Matrix Runtime installations connected to this control surface. Hybrid runtimes connect outbound — no inbound ports.

This control node
{rows.length === 0 && } {rows.map((r) => ( ))}
RuntimeStatusModeRegionJobsHeartbeat
{runtimes ? "No runtimes connected." : "…"}
{r.name} {r.live && }
{r.caps.join(" · ")}
 {r.status} {r.mode} {r.region} {r.jobs} {r.heartbeat}
); } // HF_DUPLICATE_URL is the one-click "duplicate this Space" target. The owner's // published Space is at agent-matrix/matrixcloud; override via window global. const HF_DUPLICATE_URL = (window.MATRIX_HF_SPACE_URL || "https://huggingface.co/spaces/agent-matrix/matrixcloud") + "?duplicate=true"; const CLOUD_URL = window.MATRIX_CLOUD_URL || "https://api.matrixhub.io"; function InstallRuntimeView() { const [tab, setTab] = React.useState("Hugging Face Space"); const [token, setToken] = React.useState(""); // real minted secret (shown once) const [minting, setMinting] = React.useState(false); const [mintErr, setMintErr] = React.useState(""); const [copied, setCopied] = React.useState(false); const tabs = ["Hugging Face Space", "Docker", "Kubernetes", "Helm", "Local Dev", "On-Prem"]; const tk = token || "mxrt_xxxxx_mint_a_token"; async function mint() { setMintErr(""); setMinting(true); try { const r = await cloud.mintJoinToken("console", 1, 60); setToken(r.secret); } catch (e) { setMintErr(e.message || "Could not mint a join token."); } finally { setMinting(false); } } function copyToken() { try { navigator.clipboard.writeText(token); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1300); } const cmds = { "Helm": `helm install matrix-runtime ./deploy/helm/matrix-runtime \\\n --namespace matrix-runtime --create-namespace \\\n --set cloud.url=${CLOUD_URL} \\\n --set runtime.joinToken=${tk}`, "Docker": `docker run -d --name matrix-runtime \\\n -e MATRIX_CLOUD_URL=${CLOUD_URL} \\\n -e MATRIX_RUNTIME_JOIN_TOKEN=${tk} \\\n -v matrix-runtime-data:/var/lib/matrix-runtime \\\n ghcr.io/agent-matrix/matrix-runtime:latest`, "Kubernetes": `kubectl apply -f deploy/k8s/namespace.yaml\nkubectl -n matrix-runtime create secret generic join-token \\\n --from-literal=token=${tk}`, "Hugging Face Space": `# 1) Duplicate the Space (button on the right), then\n# 2) set these as Space secrets:\nMATRIX_RUNTIME_MODE=hf-space\nMATRIX_CLOUD_URL=${CLOUD_URL}\nMATRIX_RUNTIME_JOIN_TOKEN=${tk}\n# 3) (optional) bring your own HF inference:\nHF_TOKEN=hf_your_token`, "Local Dev": `make build\n./bin/matrix-runtime --mode local-dev\n# join the control plane:\nmatrix-runtime join --cloud-url ${CLOUD_URL} --token ${tk}`, "On-Prem": `sudo make install INSTALL_SYSTEMD=1\nsudo systemctl enable --now matrix-runtime\n# join-token: ${tk}`, }; return (

Onboarding

Add a runtime

MatrixCloud manages the control plane. A runtime executes jobs inside your environment — duplicate the Hugging Face Space for a managed sandbox, or self-host. Runtimes connect outbound only.

Hybrid · recommended
{[["Control plane", "MatrixHub Cloud", "SaaS"], ["→", "", ""], ["Execution plane", "Your infrastructure", "Runtime"]].map(([a, b, c], i) => ( a === "→" ? :
{a}
{b}
{c}
))}
{tabs.map((t) => )}
{cmds[tab]}
Expected result

After installation, your runtime appears under Runtimes with status Online and these capabilities:

{["mcp.test", "mcp.run", "agent.run", "model.pull", "model.preload"].map((c) => {c})}
{tab === "Hugging Face Space" && ( Duplicate the Space )}
Runtime join token
{token ? ( <>
{token}

Shown once — copy it now. Single-use, expires in 60 minutes.

) : ( <>

Mint a single-use token scoped to your workspace, then paste it into the runtime's secrets.

{mintErr &&

{mintErr}

} )}
Security posture
{["Outbound-only tunnel", "Secrets stay on-prem", "Signed runtime image", "TLS + audited control channel"].map((s) => (
{s}
))}
); } /* --------------------------------------------------------------- Models — generic multi-source importer. Lifecycle: Profile only → Queued → Downloading → Installed → Attached → Ready. Import (resolve a profile) is separate from Attach (install onto a runtime) and Runtime Cache (physical state). --------------------------------------------------------------- */ const HF_FALLBACK = [ { id: "deepseek-ai/DeepSeek-V3", pipeline_tag: "text-generation", downloads: 1520000, likes: 8100, tags: ["transformers", "moe"], library_name: "transformers" }, { id: "deepseek-ai/DeepSeek-R1", pipeline_tag: "text-generation", downloads: 2100000, likes: 11200, tags: ["transformers", "reasoning"], library_name: "transformers" }, { id: "Qwen/Qwen2.5-7B-Instruct", pipeline_tag: "text-generation", downloads: 2300000, likes: 12000, tags: ["transformers"], library_name: "transformers" }, { id: "meta-llama/Llama-3.1-8B-Instruct", pipeline_tag: "text-generation", downloads: 3100000, likes: 15000, tags: ["transformers", "gated"], library_name: "transformers" }, { id: "mistralai/Mistral-7B-Instruct-v0.3", pipeline_tag: "text-generation", downloads: 1900000, likes: 7600, tags: ["transformers"], library_name: "transformers" }, { id: "BAAI/bge-large-en-v1.5", pipeline_tag: "feature-extraction", downloads: 4200000, likes: 2200, tags: ["sentence-transformers"], library_name: "sentence-transformers" }, ]; function fmtNum(n) { if (n == null) return "—"; if (n >= 1e6) return (n / 1e6).toFixed(1) + "M"; if (n >= 1e3) return (n / 1e3).toFixed(0) + "K"; return String(n); } function gpuLikely(m) { return /(\b|-|\/)(7b|8b|13b|70b|v3|v4|r1|large|moe)/i.test((m && m.id) || "") || ((m && m.tags) || []).includes("moe"); } function recRuntime(m) { return (m.library_name === "sentence-transformers" || m.pipeline_tag === "feature-extraction") ? "Matrix Runtime" : (gpuLikely(m) ? "vLLM / SGLang" : "Ollama / vLLM"); } // Search HF: same-origin backend proxy first (real, no CORS), then direct HF, // then offline sample data — so the demo never breaks. async function hfSearch(q, task) { try { const p = new URLSearchParams({ q: q || "deepseek", limit: "16" }); if (task && task !== "any") p.set("task", task); const r = await api.get("/v1/model-sources/huggingface/search?" + p.toString()); if (r && r.live && Array.isArray(r.items) && r.items.length) return { live: true, items: r.items }; } catch (e) { /* fall through */ } try { const params = new URLSearchParams({ search: q || "deepseek", sort: "downloads", direction: "-1", limit: "16" }); if (task && task !== "any") params.set("pipeline_tag", task); const r = await fetch("https://huggingface.co/api/models?" + params.toString(), { headers: { Accept: "application/json" } }); if (r.ok) { const data = await r.json(); if (Array.isArray(data) && data.length) return { live: true, items: data.map((m) => ({ id: m.id || m.modelId, pipeline_tag: m.pipeline_tag, downloads: m.downloads, likes: m.likes, tags: m.tags || [], library_name: m.library_name })) }; } } catch (e) { /* fall through */ } const ql = (q || "").toLowerCase(); return { live: false, items: HF_FALLBACK.filter((m) => !ql || m.id.toLowerCase().includes(ql)) }; } const IMPORT_SOURCES = [ { id: "huggingface", name: "Hugging Face", glyph: "🤗", desc: "Search public & private models", search: true }, { id: "github", name: "GitHub", mono: "GH", desc: "Import from a repository", repo: true }, { id: "gitlab", name: "GitLab", mono: "GL", desc: "Import from a repository", repo: true }, { id: "s3", name: "Amazon S3", mono: "S3", desc: "Model artifacts in a bucket", bucket: true }, { id: "r2", name: "Cloudflare R2", mono: "R2", desc: "S3-compatible object storage", bucket: true }, { id: "ollama", name: "Ollama", mono: "OL", desc: "Pull a local Ollama model", ollama: true }, { id: "url", name: "Custom URL", mono: "URL", desc: "Direct manifest or weights URL", url: true }, ]; function Inp({ label, value, onChange, placeholder, mono }) { return ( ); } function ImportModelModal({ onClose, onImport, initialSource }) { const [source, setSource] = React.useState(null); const [step, setStep] = React.useState(0); // 0 source/search · 1 preview · 2 attach const [q, setQ] = React.useState("deepseek"); const [task, setTask] = React.useState("any"); const [items, setItems] = React.useState([]); const [live, setLive] = React.useState(true); const [loading, setLoading] = React.useState(false); const [priv, setPriv] = React.useState(false); const [token, setToken] = React.useState(""); const [form, setForm] = React.useState({ repo: "", branch: "main", bucket: "", endpoint: "", path: "", model: "", url: "" }); const [sel, setSel] = React.useState(null); const setF = (k, v) => setForm((s) => ({ ...s, [k]: v })); async function doSearch() { setLoading(true); const res = await hfSearch(q, task); setItems(res.items); setLive(res.live); setLoading(false); } function pickSource(s) { setSource(s); if (s.search) { setItems([]); doSearch(); } } React.useEffect(() => { if (initialSource) { const s = IMPORT_SOURCES.find((x) => x.id === initialSource); if (s) pickSource(s); } }, []); // eslint-disable-line function resolveForm() { let id = ""; if (source.repo) id = (form.repo || "owner/repo").replace(/^https?:\/\/(github|gitlab)\.com\//, ""); else if (source.bucket) id = source.id + "://" + (form.bucket || "bucket") + "/" + (form.path || "model"); else if (source.ollama) id = "ollama/" + (form.model || "llama3.1"); else if (source.url) id = form.url || "https://example.com/model.gguf"; setSel({ id, pipeline_tag: "text-generation", library_name: source.ollama ? "ollama" : "custom", tags: priv ? ["private"] : [], _source: source.name }); setStep(1); } const tasks = ["any", "text-generation", "feature-extraction", "text-classification", "automatic-speech-recognition"]; const heads = ["Source", "Preview", "Attach"]; return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
Import Model{source ? " · " + source.name : ""}
{source && (
{heads.map((s, i) => (
{i < step ? "✓" : i + 1} {s}{i < 2 && ›}
))}
)}
{!source && (

Choose where to import the model from. Private sources accept a token.

{IMPORT_SOURCES.map((s) => ( ))}
)} {source && step === 0 && source.search && (
{ e.preventDefault(); doSearch(); }} style={{ display: "flex", gap: 9, flexWrap: "wrap" }}>
setQ(e.target.value)} placeholder="Search models… e.g. deepseek" autoFocus />
{priv &&
}
{live ? "live · huggingface.co/api" : "offline · sample results"} {loading && searching…}
{loading ?
Querying Hugging Face…
: items.map((m) => (
{m.id}
{m.pipeline_tag || "—"}↓ {fmtNum(m.downloads)}♥ {fmtNum(m.likes)} {gpuLikely(m) && GPU} {((m.tags || []).includes("gated") || m.gated) && Gated}
))}
)} {source && step === 0 && !source.search && (

Provide the {source.name} location to resolve a model profile.

{source.repo && <> setF("repo", v)} placeholder={source.id + ".com/owner/model-repo"} mono /> setF("branch", v)} placeholder="main" mono />} {source.bucket && <> setF("bucket", v)} placeholder="my-models" mono /> setF("endpoint", v)} placeholder={source.id === "r2" ? "https://.r2.cloudflarestorage.com" : "s3.us-east-1.amazonaws.com"} mono /> setF("path", v)} placeholder="models/deepseek-v4/" mono />} {source.ollama && setF("model", v)} placeholder="llama3.1 / qwen2.5 / mistral" mono />} {source.url && setF("url", v)} placeholder="https://…/model.gguf" mono />} {priv && }
)} {source && step === 1 && sel && (
{sel.id}
Model Profile preview · resolved from {sel._source}{priv ? " · private" : ""}
{[["Source", sel._source], ["Model ID", sel.id], ["Task", sel.pipeline_tag || "text-generation"], ["Library", sel.library_name || "transformers"], ["Requires GPU", gpuLikely(sel) ? "Likely" : "No"], ["Recommended runtime", recRuntime(sel)], ["Access", priv ? "Private · token" : "Public"], ["License", (sel.tags || []).includes("gated") ? "Gated · review" : "review required"]].map(([k, v]) => (
{k}
{v}
))}
Security
safetensors preferred
remote code disabled by default — requires explicit approval
)} {source && step === 2 && sel && }
, document.body); } function AttachStep({ model, onImport }) { const { runtimes: all, refresh: refetch } = useRuntimes(); const [refreshing, setRefreshing] = React.useState(false); const runtimes = (all || []).filter((r) => r.statusClass !== "red"); const [runtime, setRuntime] = React.useState(""); React.useEffect(() => { if (!runtime && runtimes[0]) setRuntime(runtimes[0].name); }, [runtimes, runtime]); const [mode, setMode] = React.useState("pull"); const [engine, setEngine] = React.useState(gpuLikely(model) ? "vLLM" : "Ollama"); const engines = ["vLLM", "SGLang", "TGI", "Ollama", "External endpoint"]; function refresh() { setRefreshing(true); refetch(); setTimeout(() => setRefreshing(false), 700); } return (
Attach model to runtime
{model.id}
Choose runtime
{runtimes.map((r) => { const lvl = gpuLikely(model) ? (r.caps.includes("model.preload") ? "compatible" : r.mode === "local-dev" ? "not recommended" : "limited") : "compatible"; return ( ); })}
{gpuLikely(model) && runtime && runtimes.find((r) => r.name === runtime && r.mode === "local-dev") && (
This model is likely too large for the selected runtime. Recommended: a GPU runtime, a quantized variant, or an external endpoint.
)}
Install mode
{[["pull", "Pull from source"], ["mount", "Mount existing volume"], ["endpoint", "Use external endpoint"]].map(([v, l]) => ( ))}
Serving engine
{engines.map((e) => )}
); } // Map a source display name / install mode to the backend's enum values. const SOURCE_TYPE_OF = { "Hugging Face": "huggingface", "GitHub": "github", "GitLab": "gitlab", "Amazon S3": "s3", "Cloudflare R2": "r2", "Ollama": "ollama", "Custom URL": "url" }; const INSTALL_MODE_OF = { pull: "pull_from_source", mount: "mount_volume", endpoint: "external_endpoint" }; const PROFILE_STATUS_CLASS = { ready: "green", attached: "green", installed: "green", downloading: "amber", queued: "blue", profile_only: "", failed: "red", gated: "amber", incompatible: "red" }; function useModelData(pollMs) { const [profiles, setProfiles] = React.useState(null); const [installs, setInstalls] = React.useState(null); const load = React.useCallback(async () => { try { const r = await api.get("/v1/model-profiles"); setProfiles(r.profiles || []); } catch (e) { setProfiles(null); } try { const r = await api.get("/v1/model-installations"); setInstalls(r.installations || []); } catch (e) { setInstalls(null); } }, []); React.useEffect(() => { load(); if (pollMs) { const t = setInterval(load, pollMs); return () => clearInterval(t); } }, [load, pollMs]); return { profiles, installs, refresh: load }; } function ModelsView({ onAttach }) { const [tab, setTab] = React.useState("Model Profiles"); const [importOpen, setImportOpen] = React.useState(false); const [importSource, setImportSource] = React.useState(null); // Poll faster while a download is in flight, else slow. const [active, setActive] = React.useState(false); const { profiles, installs, refresh } = useModelData(active ? 1500 : 6000); const tabs = ["Available Models", "Connected Providers", "Model Profiles", "Runtime Cache"]; const providers = [["Hugging Face", "HF", "connected", "live search · resolvable", true], ["OpenAI-compatible", "AI", "connected", "gpt-4o · gpt-4o-mini", false], ["Ollama", "OL", "connected", "local models", false], ["vLLM", "VL", "available", "GPU endpoint", false], ["GitHub", "GH", "available", "repo-hosted models", false], ["Amazon S3", "S3", "available", "bucket artifacts", false]]; // Available Models = installations that are ready/attached (real). const readyInstalls = (installs || []).filter((i) => i.status === "ready" || i.status === "attached"); React.useEffect(() => { const downloading = (installs || []).some((i) => i.status === "downloading" || i.status === "checking" || i.status === "queued"); setActive(downloading); }, [installs]); async function handleImport(p) { setImportOpen(false); setImportSource(null); const m = p.model || {}; const provider = m._source || "Custom URL"; const body = { source_type: SOURCE_TYPE_OF[provider] || "url", provider, external_id: m.id, display_name: m.id, source_uri: provider === "Hugging Face" ? ("hf:" + m.id) : m.id, task: m.pipeline_tag || "text-generation", library: m.library_name || "transformers", license: (m.tags || []).includes("gated") ? "gated" : "review required", tags: m.tags || [], metadata: { downloads: m.downloads, likes: m.likes }, }; let profile; try { const r = await api.post("/v1/model-profiles", body); profile = r.profile; } catch (e) { return; } if (p.install && profile) { setTab("Runtime Cache"); setActive(true); try { await api.post("/v1/model-profiles/" + profile.id + "/attach", { runtimeId: p.runtime, installMode: INSTALL_MODE_OF[p.mode] || "pull_from_source", servingEngine: p.engine, }); } catch (e) { /* surfaced via list */ } refresh(); } else { setTab("Model Profiles"); refresh(); } } return (

Model gateway · matrix-llm

Models

Connect providers, resolve metadata into profiles, then attach and install models into runtimes — from Hugging Face, GitHub, S3, R2, Ollama, or a custom URL.

{tabs.map((t) => )}
{tab === "Available Models" && (
Ready to use {installs && }
{readyInstalls.length === 0 && } {readyInstalls.map((m) => ( ))}
ModelProviderRuntimeEngine
No models ready yet — import one and attach it to a runtime.
{m.model_name} {m.provider}{m.runtime_id}{m.serving_engine || "—"}
)} {tab === "Connected Providers" && (
{providers.map(([nm, tag, st, ds, isHf]) => (
{isHf ? "🤗" : tag}
{nm}
{ds}
{isHf ? : st === "connected" ? connected : }
))}
)} {tab === "Model Profiles" && (
Model Profiles {profiles && }
{(profiles || []).length === 0 && } {(profiles || []).map((p) => { const inst = (installs || []).find((i) => i.model_profile_id === p.id); const rt = inst ? inst.runtime_id : "Not attached"; const sc = PROFILE_STATUS_CLASS[p.status] || ""; const label = p.status === "profile_only" ? "Profile only" : p.status.charAt(0).toUpperCase() + p.status.slice(1); return ( ); })}
Model ProfileProviderStatusRuntime
{profiles ? "No profiles yet — click Import Model to resolve one." : "Runtime unreachable."}
{p.display_name} {p.provider} {p.status === "downloading" && }{label} {rt} {!inst ? : }
)} {tab === "Runtime Cache" && (
Runtime Cache {installs && }
{(installs || []).length === 0 && } {(installs || []).map((c) => { const downloading = c.status === "downloading" || c.status === "checking" || c.status === "queued"; const sc = c.status === "ready" || c.status === "attached" ? "green" : c.status === "failed" ? "red" : "amber"; return ( ); })}
RuntimeModelStatusEngine
{installs ? "Nothing installed yet — attach a model from Model Profiles." : "Runtime unreachable."}
{c.runtime_id} {c.model_name} {downloading ?
{c.progress || 0}%
: {c.status}} 		{c.serving_engine || "—"}
)} {importOpen && { setImportOpen(false); setImportSource(null); }} onImport={handleImport} />}
); } /* --------------------------------------------------------------- Jobs (live list + quick create + live event timeline). --------------------------------------------------------------- */ function JobsView() { const { jobs, refresh } = useJobs(3000); const [sel, setSel] = React.useState(null); const [filter, setFilter] = React.useState("All"); const [busy, setBusy] = React.useState(false); const statuses = ["All", "running", "complete", "error", "queued", "expired"]; const live = jobs || []; const rows = live.filter((j) => filter === "All" || j.status === filter); async function quick(type, payload) { setBusy(true); try { await api.post("/v1/jobs", { type, ttl_seconds: type === "mcp.test" ? 600 : undefined, payload }); await sleep(300); refresh(); } catch (e) {} finally { setBusy(false); } } if (sel) return { setSel(null); refresh(); }} />; return (

Execution

Jobs {jobs && }

Every unit of runtime work — sandbox tests, model inspections, pulls, and tool calls — with live status.

Quick run:
{statuses.map((s) => )}
{rows.length === 0 && } {rows.map((j) => ( setSel(j)}> ))}
Job IDTypeStatusCreatedExpires
{jobs ? "No jobs match." : "Runtime unreachable."}
{j.job_id} {j.type} {j.status === "running" && }{j.status} {(j.created_at || "").replace("T", " ").replace("Z", "")} {(j.expires_at || "").replace("T", " ").replace("Z", "")}
); } function JobDetail({ job, back }) { const [events, setEvents] = React.useState([]); const [snap, setSnap] = React.useState(job); React.useEffect(() => { let es = null, poll = null, alive = true; es = new EventSource(api.eventsURL("/v1/jobs/" + job.job_id + "/events")); es.onmessage = (ev) => { try { const d = JSON.parse(ev.data); setEvents((e) => [...e, d]); } catch (e) {} }; es.onerror = () => { if (es) es.close(); }; async function tick() { try { const s = await api.get("/v1/jobs/" + job.job_id); if (alive) setSnap(s); } catch (e) {} } tick(); poll = setInterval(tick, 2000); return () => { alive = false; if (es) es.close(); if (poll) clearInterval(poll); }; }, [job.job_id]); return (

{snap.job_id}

{snap.type} {snap.status}
Event timeline SSE
{events.map((e, i) => (
{e.step} {e.message} {e.status}
))} {events.length === 0 &&
}
Details
{[["Type", snap.type], ["Status", snap.status], ["Created", (snap.created_at || "").replace("T", " ").replace("Z", "")], ["Expires", (snap.expires_at || "").replace("T", " ").replace("Z", "")]].map(([k, v]) => (
{k}{v}
))}
RESULT
{snap.error ? snap.error : JSON.stringify(snap.result, null, 2)}
); } /* --------------------------------------------------------------- Logs (live tail of the newest job's SSE, with demo baseline). --------------------------------------------------------------- */ function LogsView() { const { jobs } = useJobs(4000); const [tail, setTail] = React.useState([]); const newest = jobs && jobs[0]; React.useEffect(() => { if (!newest) return; const es = new EventSource(api.eventsURL("/v1/jobs/" + newest.job_id + "/events")); es.onmessage = (ev) => { try { const d = JSON.parse(ev.data); setTail((t) => [...t.slice(-200), { job: newest.job_id, ...d }]); } catch (e) {} }; es.onerror = () => es.close(); return () => es.close(); }, [newest && newest.job_id]); function evColor(e) { return e.status === "error" ? "var(--red)" : e.status === "ok" || e.status === "complete" ? "var(--acc-2)" : e.status === "expired" ? "var(--amber)" : "var(--ink-2)"; } return (

Observability

Logs {jobs && }

Live event stream from the newest job on this runtime.

{tail.length === 0 &&
{newest ? "waiting for events from " + newest.job_id + "…" : "no jobs yet — start a sandbox or inspect a model to see live events"}
} {tail.map((e, i) => (
[{e.job}] {e.step} {e.message}
))}
); } /* --------------------------------------------------------------- Governance + settings + profile (reference data). --------------------------------------------------------------- */ const POLICY_ICON = { "Sandbox Policy": G.play, "Command Policy": G.shield, "Runtime Policy": G.server }; function PoliciesView() { const { data } = useFetch("/v1/policies"); const policies = data ? data.policies || [] : null; return (

Governance {policies && }

Policies

The guardrails this runtime actually enforces — derived from its live configuration and the command allow/deny lists.

{policies === null &&
Loading…
} {(policies || []).map((p) => (
{p.name}{p.active && } {p.active ? "enforced" : "off"}
{Object.entries(p.body).map(([k, v]) => (
{k.replace(/_/g, " ")} {!Array.isArray(v) && (typeof v === "boolean" ? {v ? "yes" : "no"} : {String(v)})}
{Array.isArray(v) && (v.length ?
{v.map((x) => {x})}
: none)}
))}
))}
); } function AuditView() { const [events, setEvents] = React.useState(null); const load = React.useCallback(() => { cloud.listAudit().then(setEvents).catch(() => setEvents([])); }, []); React.useEffect(() => { load(); const t = setInterval(load, 10000); return () => clearInterval(t); }, [load]); const rows = events || []; return (

Compliance {events && }

Audit

Append-only record of sensitive actions in your workspace — logins, runtime & token activity, credentials, model imports and attaches, and MatrixShell commands.

{rows.length === 0 && } {rows.map((e) => ( ))}
TimestampActionTargetActorIPStatus
{events ? "No audited activity yet." : "…"}
{(e.created_at || "").replace("T", " ").replace("Z", "").replace(/\..*/, "")} {e.action} {e.target || "—"} {e.actor || "—"} {e.ip || "—"} {e.status}
); } // PROVIDERS — the model providers a workspace can bring its own credentials for. const BYO_PROVIDERS = [ { id: "huggingface", name: "Hugging Face", hint: "hf_…", ph: "hf_xxxxxxxxxxxxxxxxxxxx", note: "Use your own HF account & inference quota for HF LLMs inside your runtimes.", meta: "default_model" }, { id: "openai", name: "OpenAI-compatible", hint: "sk_…", ph: "sk-…", note: "Any OpenAI-compatible endpoint (OpenAI, Together, Groq, …).", meta: "base_url" }, { id: "anthropic", name: "Anthropic", hint: "sk-ant-…", ph: "sk-ant-…", note: "Claude models via the Anthropic API.", meta: "default_model" }, ]; function ProvidersCard() { const [list, setList] = React.useState(null); const [open, setOpen] = React.useState(null); // provider id being edited const [secret, setSecret] = React.useState(""); const [metaVal, setMetaVal] = React.useState(""); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(""); const [okMsg, setOkMsg] = React.useState(""); const load = React.useCallback(() => { cloud.listProviders().then(setList).catch(() => setList([])); }, []); React.useEffect(load, [load]); function startEdit(pid) { setOpen(pid); setSecret(""); setMetaVal(""); setErr(""); setOkMsg(""); } async function save(p) { setErr(""); setOkMsg(""); if (!secret.trim()) return setErr("Paste your token first."); setBusy(true); try { const meta = metaVal.trim() ? { [p.meta]: metaVal.trim() } : undefined; await cloud.setProvider(p.id, "default", secret.trim(), meta); setOpen(null); setSecret(""); setMetaVal(""); setOkMsg(p.name + " connected."); load(); } catch (e) { setErr(e.message || "Could not save credential."); } finally { setBusy(false); } } const byId = {}; (list || []).forEach((c) => { byId[c.provider] = c; }); return (
Model providers · bring your own key {list && {list.length} connected}

Plug in your own provider tokens. They're encrypted at rest (AES-256-GCM) and used server-side only — the console never shows the secret back, only a ••••1234 hint.

{okMsg &&
{okMsg}
} {BYO_PROVIDERS.map((p) => { const cur = byId[p.id]; const editing = open === p.id; return (
{p.name} {cur ? {cur.hint} : not set}
{p.note}
{editing && (
{err &&
{err}
}
)}
); })}
); } function CloudSettingsView() { const rt = useRuntime(); const { data: meData } = useFetch("/v1/auth/me"); const me = meData && meData.user; const det = (rt.caps && rt.caps.runtimes) || {}; const sections = [ ["Workspace", me ? me.workspace : "—"], ["Owner", me ? me.email : "—"], ["Role", me ? me.role : "—"], ["Runtime", rt.health ? rt.health.runtime_id : "—"], ["Mode", rt.health ? rt.health.mode : "—"], ["Version", rt.health ? "v" + rt.health.version : "—"], ]; const registries = [ ["Hugging Face", "connected"], ["Node runner", det.node ? "connected" : "available"], ["Python runner", det.python ? "connected" : "available"], ["Ollama", det.ollama ? "connected" : "available"], ["vLLM", det.vllm ? "connected" : "available"], ]; return (

Workspace

Settings

Your workspace, this runtime, and the detected model runtimes.

Workspace
{sections.map(([k, v]) => (
{k}{v}
))}
Registries
{registries.map(([k, v]) => (
{k} {v === "connected" ? connected : {v}}
))}
); } const PROFILE_DEFAULTS = { name: "Neo Anderson", email: "neo@acme.io", username: "neo", role: "AI Engineer", theme: "Dark", language: "English", timezone: "UTC", dateFormat: "YYYY-MM-DD", defaultWorkspace: "acme-prod", defaultEnv: "Production", notifyEmail: true, notifyJobs: true, notifySecurity: true, notifyDigest: false }; function loadProfile() { try { return { ...PROFILE_DEFAULTS, ...JSON.parse(localStorage.getItem("mcloud-profile") || "{}") }; } catch (e) { return { ...PROFILE_DEFAULTS }; } } function PField({ label, hint, children }) { return ; } const PINPUT = { width: "100%", height: 40, padding: "0 12px", fontSize: 13.5, color: "var(--ink)", background: "var(--inset)", border: "1px solid var(--line-2)", borderRadius: "var(--r-sm)", outline: "none" }; const PSELECT = { ...PINPUT, cursor: "pointer", appearance: "none", WebkitAppearance: "none", backgroundImage: "linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%)", backgroundPosition: "calc(100% - 16px) 17px, calc(100% - 11px) 17px", backgroundSize: "5px 5px, 5px 5px", backgroundRepeat: "no-repeat" }; function PToggle({ on, onChange }) { return ; } function ProfileView() { const [p, setP] = React.useState(loadProfile); const [saved, setSaved] = React.useState(false); const set = (k, v) => { setP((s) => ({ ...s, [k]: v })); setSaved(false); }; const initials = p.name.split(" ").map((x) => x[0]).slice(0, 2).join("").toUpperCase(); function save() { try { localStorage.setItem("mcloud-profile", JSON.stringify(p)); } catch (e) {} setSaved(true); setTimeout(() => setSaved(false), 1800); } function reset() { setP({ ...PROFILE_DEFAULTS }); setSaved(false); } const sel = (k, opts) => ; return (

Account

Profile & preferences

Your personal account details and standard workspace preferences.

{initials}
{p.name}
{p.email}
{p.role}
Account
set("name", e.target.value)} /> set("email", e.target.value)} /> set("username", e.target.value)} /> {sel("role", ["Platform Admin", "AI Engineer", "Security / Compliance", "Developer"])}
Preferences
{sel("theme", ["Dark", "System"])} {sel("language", ["English", "Español", "Deutsch", "Français", "日本語"])} {sel("timezone", ["UTC", "America/New_York", "America/Los_Angeles", "Europe/London", "Europe/Berlin", "Asia/Tokyo"])} {sel("dateFormat", ["YYYY-MM-DD", "DD/MM/YYYY", "MM/DD/YYYY"])} {sel("defaultWorkspace", ["acme-prod", "shared", "personal"])} {sel("defaultEnv", ["Production", "Staging", "Development"])}
Notifications
{[["notifyEmail", "Email notifications", "Receive account and workspace emails."], ["notifyJobs", "Job alerts", "Notify when your jobs complete or fail."], ["notifySecurity", "Security alerts", "Approvals, policy changes, and token events."], ["notifyDigest", "Weekly digest", "A weekly summary of activity and usage."]].map(([k, nm, ds]) => (
{nm}
{ds}
set(k, v)} />
))}
); } /* --------------------------------------------------------------- App shell + routing. --------------------------------------------------------------- */ /* --------------------------------------------------------------- Auth screen (wired to /v1/auth via the SQLite user store). --------------------------------------------------------------- */ function AField({ label, type = "text", value, onChange, placeholder, icon, autoFocus }) { const I = icon ? G[icon] : null; return ( ); } function AuthScreen({ onAuthed }) { const intent = React.useMemo(urlIntent, []); const [mode, setMode] = React.useState(intent.kind === "reset" ? "reset" : intent.kind === "verify" ? "verify" : "login"); const [name, setName] = React.useState(""); const [email, setEmail] = React.useState(""); const [pw, setPw] = React.useState(""); const [pw2, setPw2] = React.useState(""); const [resetToken] = React.useState(intent.token); const [err, setErr] = React.useState(""); const [msg, setMsg] = React.useState(""); const [busy, setBusy] = React.useState(false); // Email verification runs as soon as the screen mounts with a verify link. React.useEffect(() => { if (mode !== "verify") return; if (!resetToken) { setErr("This verification link is missing its token."); return; } setBusy(true); auth.verify(resetToken) .then((m) => { setMsg(m); clearURLToken(); }) .catch((e) => setErr(e.message || "Verification failed.")) .finally(() => setBusy(false)); }, [mode, resetToken]); function switchMode(m) { setMode(m); setErr(""); setMsg(""); } async function submit(e) { e.preventDefault(); setErr(""); setMsg(""); // Password recovery — request a reset link. if (mode === "forgot") { if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return setErr("Enter a valid email."); setBusy(true); try { setMsg(await auth.forgot(email.trim())); } catch (e2) { setErr(e2.message || "Could not send reset email."); } finally { setBusy(false); } return; } // Choose a new password from a reset link. if (mode === "reset") { if (pw.length < 8) return setErr("Password must be at least 8 characters."); if (pw !== pw2) return setErr("Passwords do not match."); setBusy(true); try { setMsg(await auth.reset(resetToken, pw)); clearURLToken(); setTimeout(() => switchMode("login"), 1200); } catch (e2) { setErr(e2.message || "Could not reset password."); } finally { setBusy(false); } return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return setErr("Enter a valid work email."); if (pw.length < 6) return setErr("Password must be at least 6 characters."); if (mode === "signup") { if (!name.trim()) return setErr("Enter your full name."); if (pw !== pw2) return setErr("Passwords do not match."); } setBusy(true); try { const user = mode === "signup" ? await auth.signup(name.trim(), email.trim(), pw) : await auth.login(email.trim(), pw); onAuthed(user); } catch (e2) { setErr(e2.message || "Authentication failed."); } finally { setBusy(false); } } const feats = [ ["shield", "Secure by default", "Signed manifests, audited installs, approval gates."], ["server", "Runtime isolation", "Hybrid and customer-agent execution modes."], ["cpu", "Model gateway", "Hugging Face, OpenAI-compatible, Ollama, vLLM."], ["audit", "Complete audit trail", "Every install, policy, and access change."], ]; const HEAD = { login: ["Welcome back", "Sign in to MatrixCloud", "Use your work email and password."], signup: ["Get started", "Create your account", "Set up a workspace owner account to get started."], forgot: ["Account recovery", "Reset your password", "Enter your email and we'll send you a secure reset link."], reset: ["Account recovery", "Choose a new password", "Pick a strong password — at least 8 characters."], verify: ["Email verification", "Verifying your email", "Confirming your address with MatrixCloud."], }; const ACTION = { login: "Sign in", signup: "Create account", forgot: "Send reset link", reset: "Update password", verify: "Continue" }; return (

MatrixCloud

Enterprise Control Plane

Secure AI infrastructure

Operate your AI
runtime layer.

Connect runtimes, test MCP servers, manage models, run agents, enforce policies, and audit every action across your workspace.

{feats.map(([ic, t, c]) => (

{t}

{c}

))}

multitenant workspaces · session security · approval gates

{HEAD[mode][0]}

{HEAD[mode][1]}

{HEAD[mode][2]}

{(mode === "login" || mode === "signup") && (
{[["login", "Sign in"], ["signup", "Sign up"]].map(([m, lab]) => ( ))}
)} {mode === "verify" ? (
{busy &&

Verifying your email…

} {msg &&
{msg}
} {err &&
{err}
}
) : (
{mode === "signup" && } {(mode === "login" || mode === "signup" || mode === "forgot") && } {mode !== "forgot" && } {(mode === "signup" || mode === "reset") && } {err &&
{err}
} {msg &&
{msg}
} {mode === "login" && (
)} )} {(mode === "login" || mode === "signup") && (

{mode === "login" ? "Need an account? " : "Already have an account? "}

)} {(mode === "forgot" || mode === "reset") && (

)}

multitenant workspaces · session security

); } /* --------------------------------------------------------------- MatrixShell — AI-assisted operator terminal, wired to the runtime. `matrix` subcommands hit the real /v1 API; shell passthrough is a safe sandboxed simulation; plain English becomes a confirmable command suggestion with a risk level. --------------------------------------------------------------- */ const MS_DENY = [/mkfs/i, /dd\s+if=/i, /\bfdisk\b/i, /\bdiskpart\b/i, /\bshutdown\b/i, /\breboot\b/i, /:\(\)\s*\{/, /\brm\s+-rf\s+(\/|~|\$HOME)(\s|$)/i]; const msDenied = (c) => MS_DENY.some((re) => re.test(c)); async function msMatrix(cmd) { const p = cmd.trim().split(/\s+/); const sub = (p[1] || "").toLowerCase(); try { if (sub === "status") { const [h, c] = await Promise.all([api.get("/v1/health"), api.get("/v1/capabilities")]); return { tone: "ok", lines: [ `runtime ${h.runtime_id} · mode ${h.mode} · v${h.version}`, `capabilities: ${(c.capabilities || []).join(", ")}`, `runtimes: node=${c.runtimes.node} python=${c.runtimes.python} ollama=${c.runtimes.ollama}`, `limits: max_ttl=${c.limits.max_ttl_seconds}s · max_jobs=${c.limits.max_concurrent_jobs}`] }; } if (sub === "ps") { const r = await api.get("/v1/jobs"); const jobs = (r.jobs || []).slice(0, 10); if (!jobs.length) return { tone: "dim", lines: ["no jobs yet — try: matrix inspect hf:Qwen/Qwen2.5-7B-Instruct"] }; return { tone: "ok", lines: ["RUNNING / RECENT JOBS", ...jobs.map((j) => ` ${j.job_id} ${j.type.padEnd(13)} ${j.status}`)] }; } if (sub === "capabilities" || sub === "caps") { const c = await api.get("/v1/capabilities"); return { tone: "ok", lines: ["CAPABILITIES", ...(c.capabilities || []).map((x) => " " + x)] }; } if (sub === "inspect") { const model = p[2] || "hf:Qwen/Qwen2.5-7B-Instruct"; const meta = await runJobToCompletion("model.inspect", { model, revision: "main" }); return { tone: "ok", lines: [ `model ${meta.model}`, `task=${meta.pipeline_tag || "?"} · library=${meta.library_name || "?"} · type=${meta.model_type || "?"}`, `license=${meta.license || "?"} · params≈${fmtParams(meta.estimated_parameters)} · runtime=${meta.recommended_runtime} · gpu=${meta.requires_gpu}`] }; } if (sub === "help" || p.length === 1) return { tone: "sys", lines: [ "MATRIX CLI — inside MatrixShell (wired to this runtime)", " matrix status runtime health + capabilities (live)", " matrix ps running / recent jobs (live)", " matrix capabilities advertised capabilities (live)", " matrix inspect resolve a model via model.inspect (live)", " …or just describe what you want in plain English."] }; return { tone: "dim", lines: [`unknown: ${cmd}`, "try: matrix help"] }; } catch (e) { return { tone: "dim", lines: ["✗ " + (e.message || "command failed")] }; } } const MS_NL = [ { re: /inspect.*runtime|runtime.*(health|status)|status/i, cmd: "matrix status", risk: "low", expl: "Shows the connected runtime, its mode, version and capabilities — live from this runtime." }, { re: /recent jobs|show.*jobs|running jobs|\bjobs\b/i, cmd: "matrix ps", risk: "low", expl: "Lists the jobs currently running on the connected runtime." }, { re: /(list|show).*(capabilit|tools)/i, cmd: "matrix capabilities", risk: "low", expl: "Lists the capabilities this runtime advertises." }, { re: /inspect.*model|resolve.*model|qwen|llama|mistral/i, cmd: "matrix inspect hf:Qwen/Qwen2.5-7B-Instruct", risk: "low", expl: "Resolves model metadata (task, license, parameters, recommended runtime) via model.inspect." }, { re: /(biggest|largest) files?/i, cmd: "du -ah . | sort -hr | head -n 20", risk: "low", expl: "Lists the 20 largest files and folders in the current directory." }, { re: /disk|space|storage/i, cmd: "df -h", risk: "low", expl: "Shows disk space usage for mounted filesystems." }, { re: /(install|add).*(package|dependency)/i, cmd: "pip install ", risk: "medium", expl: "Installs a package into the sandbox. Write operation — requires approval." }, ]; function msSuggest(t) { for (const r of MS_NL) if (r.re.test(t)) return { cmd: r.cmd, risk: r.risk, expl: r.expl }; return { cmd: `echo "${t.replace(/"/g, "")}"`, risk: "low", expl: "Could not map this to a known operation — here is a safe echo. Refine it, or run a matrix command." }; } const MS_HEADS = ["ls", "cd", "pwd", "whoami", "echo", "cat", "ps", "df", "du", "git", "python", "python3", "pip", "uv", "matrix", "matrixsh", "grep", "rm", "mkdir", "mv", "cp", "head", "tail", "find", "which", "env", "node", "npm", "npx", "curl", "touch", "wc", "sort", "make", "go"]; function msLooksCmd(t) { const s = t.trim(); if (!s) return false; if (/[?]|\bhow\b|\bwhat\b|\bwhy\b|\bcan i\b|please|inspect|show|list|test|create/i.test(s) && !s.startsWith("matrix")) return false; return MS_HEADS.includes(s.split(/\s+/)[0].toLowerCase()); } function msTone(t) { return t === "ok" ? "var(--acc-2)" : t === "sys" ? "var(--blue)" : t === "warn" ? "var(--lime)" : t === "dim" ? "var(--ink-3)" : "var(--ink-2)"; } function Suggestion({ s, answered, onAnswer }) { const riskCls = s.risk === "high" ? "red" : s.risk === "medium" ? "amber" : "green"; return (
Suggested command
{s.expl}
{s.cmd}
risk: {s.risk} {s.risk !== "low" && write operation · approval required}
{!answered ? (
Execute it?
) : (
{answered === "yes" ? "✓ executed" : "✗ cancelled"}
)}
); } function MatrixShellView({ back, user }) { const rt = useRuntime(); const [status, setStatus] = React.useState(null); // null=loading, {installed,version,...} const [lines, setLines] = React.useState([]); const [value, setValue] = React.useState(""); const [busy, setBusy] = React.useState(false); const [installing, setInstalling] = React.useState(false); const scroller = React.useRef(null); const inputRef = React.useRef(null); const hist = React.useRef([]); const hi = React.useRef(-1); const refreshStatus = React.useCallback(async () => { try { setStatus(await api.get("/v1/matrixshell/status")); } catch (e) { setStatus({ installed: false, error: e.message }); } }, []); React.useEffect(() => { refreshStatus(); inputRef.current && inputRef.current.focus(); }, [refreshStatus]); React.useEffect(() => { if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [lines]); const push = (arr) => setLines((l) => [...l, ...arr]); const out = (text, c) => ({ kind: "out", c: c || "var(--ink-2)", text }); async function execMatrix(cmd) { const res = await msMatrix(cmd); push(res.lines.map((t) => out(t, msTone(res.tone)))); } // Real execution inside the local Python sandbox via /v1/matrixshell/exec. async function realExec(cmd) { if (msDenied(cmd)) { push([out("✗ Refusing to execute — blocked by safety denylist.", "var(--red)")]); return; } if (!status || !status.installed) { push([out("MatrixShell sandbox is not installed — click ‘Install MatrixShell’ above.", "var(--amber)")]); return; } setBusy(true); try { const r = await api.post("/v1/matrixshell/exec", { command: cmd }); const blocks = []; if (r.stdout) r.stdout.replace(/\n$/, "").split("\n").forEach((t) => blocks.push(out(t, "var(--ink)"))); if (r.stderr) r.stderr.replace(/\n$/, "").split("\n").forEach((t) => blocks.push(out(t, "var(--ink-3)"))); if (r.exit_code !== 0) blocks.push(out("exit " + r.exit_code, "var(--red)")); if (blocks.length === 0) blocks.push(out("✓ exit 0", "var(--acc-2)")); push(blocks); } catch (e) { push([out("✗ " + e.message, "var(--red)")]); } finally { setBusy(false); } } async function dispatch(cmd) { if (cmd.startsWith("matrix ") || cmd === "matrix") { await execMatrix(cmd); return; } await realExec(cmd); } async function answer(idx, yes) { setLines((l) => l.map((it, i) => i === idx ? { ...it, answered: yes ? "yes" : "no" } : it)); if (!yes) { push([out("Cancelled.", "var(--ink-3)")]); return; } await dispatch(lines[idx].s.cmd); } async function run(raw) { const text = raw.trim(); if (!text) return; hist.current.push(text); hi.current = hist.current.length; setValue(""); if (text === "clear") { setLines([]); return; } push([{ kind: "in", text }]); if (msLooksCmd(text)) { await dispatch(text); return; } push([{ kind: "suggestion", s: msSuggest(text) }]); } function onKey(e) { if (e.key === "ArrowUp") { e.preventDefault(); if (hi.current > 0) { hi.current--; setValue(hist.current[hi.current] || ""); } } else if (e.key === "ArrowDown") { e.preventDefault(); if (hi.current < hist.current.length - 1) { hi.current++; setValue(hist.current[hi.current] || ""); } else { hi.current = hist.current.length; setValue(""); } } } // Real install: stream the matrixshell.install job's pip/venv output. async function install() { setInstalling(true); push([out("$ installing MatrixShell into a local Python sandbox…", "var(--acc-2)")]); try { const r = await api.post("/v1/matrixshell/install", {}); const es = new EventSource(api.eventsURL("/v1/jobs/" + r.job_id + "/events")); es.onmessage = (ev) => { let d; try { d = JSON.parse(ev.data); } catch (e2) { return; } if (d.message) push([out(d.message, d.status === "error" ? "var(--red)" : "var(--ink-3)")]); if (d.step === "ready" || d.status === "error" || d.status === "complete") { es.close(); setInstalling(false); refreshStatus(); } }; es.onerror = () => { es.close(); setInstalling(false); refreshStatus(); }; } catch (e) { push([out("✗ " + e.message, "var(--red)")]); setInstalling(false); } } const installed = status && status.installed; const chips = installed ? ["matrix status", "matrixsh --help", "python --version", "ls -la", "pip list"] : ["matrix status", "matrix ps"]; const empty = lines.length === 0; const shellTag = status == null ? "checking…" : installed ? ("matrixsh " + status.version) : "not installed"; return (

Operator terminal

MatrixShell

The real MatrixShell CLI in a Python sandbox on this runtime's host. Type a command (executed for real), or describe what you want and confirm the suggestion.

{rt.online ? "Connected" : "Offline"} Safe mode {shellTag}
{status != null && !installed && (
MatrixShell is not installed yet

This installs the real matrixsh CLI from git into a dedicated Python venv on this host, then runs commands there. {status.error ? "(" + status.error + ")" : ""}

)}
{[["Workspace", (user && user.workspace) || "—"], ["Runtime", (rt.health && rt.health.runtime_id) || "—"], ["Mode", (rt.health && rt.health.mode) || "—"], ["matrixsh", installed ? status.version : "—"], ["Sandbox", (status && status.sandbox) || "—"]].map(([k, v]) => (
{k}
{v}
))}
Terminal{installed ? "sandbox · matrixsh " + status.version : "matrix-runtime"}

{installed ? "matrixsh " + status.version + " · real Python sandbox on " + ((rt.health && rt.health.runtime_id) || "this host") : "MatrixShell control terminal"}

Commands run for real in the sandbox. Destructive operations are blocked. matrix … talks to the control plane.

{empty && (

{installed ? "Ready for commands" : "Install MatrixShell to run sandbox commands"}

Try: matrixsh --help · python --version · matrix status

)}
{lines.map((it, i) => it.kind === "suggestion" ? answer(i, yes)} /> : it.kind === "in" ?

sandbox $ {it.text}

:

{it.text}

)} {busy &&

}
{chips.map((c) => )}
{ e.preventDefault(); run(value); }} style={{ display: "flex", alignItems: "center", gap: 10, height: 46, padding: "0 14px", borderRadius: "var(--r-sm)", border: "1px solid var(--line-2)", background: "rgba(0,0,0,0.4)" }}> sandbox> setValue(e.target.value)} onKeyDown={onKey} placeholder="type a command, or ask in plain English…" spellCheck={false} style={{ flex: 1, minWidth: 0, height: "100%", background: "transparent", border: "none", outline: "none", color: "var(--ink)", fontFamily: "var(--mono)", fontSize: 13.5 }} />
Real execution in a Python sandbox · destructive commands are blocked.
); } /* --------------------------------------------------------------- Wizards — New Sandbox (real launch) + Attach Model. --------------------------------------------------------------- */ function Wizard({ title, eyebrow, steps, step, onCancel, children, footer }) { return (

{eyebrow}

{title}

{steps.map((s, i) => { const state = i < step ? "done" : i === step ? "active" : "todo"; return (
{state === "done" ? : i + 1} {s}
{i < steps.length - 1 &&
} ); })}
{children}
{footer}
); } function PickRow({ active, onClick, mono, title, sub, right, disabled }) { return ( ); } function NewSandboxWizard({ onCancel, onLaunch }) { const [step, setStep] = React.useState(0); const [pick, setPick] = React.useState(null); const [runtime, setRuntime] = React.useState(""); const catalog = useCatalog(); const { runtimes: realRuntimes } = useRuntimes(); const items = (catalog || []).filter((it) => it.sandbox); const steps = ["Component", "Environment", "Review"]; const selected = items.find((i) => i.id === pick); const next = () => setStep((s) => Math.min(steps.length - 1, s + 1)); const back = () => setStep((s) => Math.max(0, s - 1)); const runtimes = (realRuntimes || []).filter((r) => r.statusClass !== "red"); React.useEffect(() => { if (!runtime && runtimes[0]) setRuntime(runtimes[0].name); }, [runtimes, runtime]); return ( {step < steps.length - 1 ? : } }> {step === 0 && (

Choose a sandbox-enabled MCP server to test in an isolated 10-minute session. No production secrets are used. Items badged live run for real on this runtime.

{items.map((it) => ( setPick(it.id)} mono={it.initials} title={it.name} sub={`${it.runtime} · ${it.secrets ? "needs secrets" : "no secrets"}`} right={it.startCommand ? live : (it.verified ? Verified : null)} /> ))}
)} {step === 1 && (

Select the runtime that will host the sandbox.

{runtimes.length === 0 &&
No runtimes available.
} {runtimes.map((r) => ( setRuntime(r.name)} mono={(r.region || "lo").slice(0, 2).toUpperCase()} title={r.name} sub={`${r.mode} · ${r.region}`} right={r.live ? : {r.status || "Online"}} /> ))}
)} {step === 2 && selected && (

Review and launch. The session boots immediately and expires automatically.

{[["Component", selected.name], ["Manifest", selected.id], ["Runtime", runtime || "—"], ["Command", selected.startCommand || "—"], ["TTL", "10 minutes"], ["Secrets", "None"]].map(([k, v]) => (
{k} {v}
))}
)} ); } const MODEL_PROVIDERS = [ { id: "huggingface", mono: "HF", name: "Hugging Face", sub: "resolvable via model.inspect", models: ["hf:Qwen/Qwen2.5-7B-Instruct", "hf:mistralai/Mistral-7B-Instruct-v0.3", "hf:BAAI/bge-large-en-v1.5"] }, { id: "ollama", mono: "OL", name: "Ollama", sub: "local · 6 models", models: ["llama3.1", "mistral", "qwen2.5"] }, ]; function AttachModelWizard({ onCancel, onDone }) { const [step, setStep] = React.useState(0); const [prov, setProv] = React.useState("huggingface"); const [model, setModel] = React.useState(null); const [events, setEvents] = React.useState([]); const [done, setDone] = React.useState(false); const [err, setErr] = React.useState(""); const steps = ["Provider", "Model", "Attach"]; const provider = MODEL_PROVIDERS.find((p) => p.id === prov); const next = () => setStep((s) => Math.min(steps.length - 1, s + 1)); const back = () => setStep((s) => Math.max(0, s - 1)); React.useEffect(() => { if (step !== 2 || !model) return; let alive = true; setEvents([]); setDone(false); setErr(""); (async () => { const add = (k, msg) => alive && setEvents((e) => [...e, { k, msg }]); add("resolve", "Resolving metadata via model.inspect…"); try { if (prov === "huggingface") { const meta = await runJobToCompletion("model.inspect", { model, revision: "main" }); if (!alive) return; add("resolve", `task=${meta.pipeline_tag || "?"} · library=${meta.library_name || "?"}`); add("license", `License check · ${meta.license || "unknown"}`); add("params", `Parameters ≈ ${fmtParams(meta.estimated_parameters)} · runtime=${meta.recommended_runtime}`); add("ready", "Model resolved and ready to attach."); } else { await sleep(500); add("ready", "Provider model selected."); } if (alive) setDone(true); } catch (e) { if (alive) { setErr(e.message); add("error", "✗ " + e.message); } } })(); return () => { alive = false; }; }, [step, model, prov]); return ( ) : ( <> {err ? "Failed" : (done ? "Resolved successfully." : "Resolving…")} )}> {step === 0 && (

Choose the provider that serves the model. Hugging Face models resolve live through this runtime.

{MODEL_PROVIDERS.map((p) => ( { setProv(p.id); setModel(null); }} mono={p.mono} title={p.name} sub={p.sub} right={p.id === "huggingface" ? : connected} /> ))}
)} {step === 1 && provider && (

Pick a model from {provider.name}. Metadata is resolved before attach.

{provider.models.map((m) => ( setModel(m)} mono="M" title={m} sub={m.includes("bge") ? "embeddings" : "text-generation"} right={m.includes("7B") || m.includes("8B") ? GPU : null} /> ))}
)} {step === 2 && (
{model}
{provider.name}
{err ? "Failed" : done ? "Ready" : "Resolving"}
{events.map((e, i) => (
{e.k === "error" ? "✗" : "✓"} [{e.k}] {e.msg}
))} {!done && !err && }
{done && (
Model resolved

{model} resolved and ready for agents to use.

)}
)} ); } /* --------------------------------------------------------------- Sidebar user account menu + sign-out. --------------------------------------------------------------- */ function MenuRow({ ic, label, chevron, danger, onClick }) { return ( ); } function MenuDiv() { return
; } function SignOutDialog({ onClose, onConfirm }) { return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
Sign out of MatrixCloud?

You will be signed out of this browser. Running jobs, runtimes, and sandboxes will continue.

, document.body); } function SidebarUser({ onProfile, go, user, onSignOut }) { const [open, setOpen] = React.useState(false); const [confirm, setConfirm] = React.useState(false); const initials = (user.name || user.email || "U").split(" ").map((x) => x[0]).slice(0, 2).join("").toUpperCase(); const act = (fn) => { setOpen(false); fn && fn(); }; return (
{open && (<>
setOpen(false)} />
{initials}
{user.name}
{user.email}
{user.role} · {user.workspace}
act(() => go("settings"))} /> act(onProfile)} /> act(() => go("settings"))} /> { setOpen(false); setConfirm(true); }} />
)} {confirm && setConfirm(false)} onConfirm={(all) => { setConfirm(false); onSignOut(all); }} />}
); } const NAV = [ { grp: "Platform", items: [{ id: "overview", label: "Overview", ic: G.grid }, { id: "catalog", label: "Catalog", ic: G.layers }, { id: "sandboxes", label: "Sandboxes", ic: G.play }, { id: "models", label: "Models", ic: G.cpu }] }, { grp: "Runtime", items: [{ id: "runtimes", label: "Runtimes", ic: G.server }, { id: "agents", label: "Jobs", ic: G.activity }, { id: "logs", label: "Logs", ic: G.logs }, { id: "install", label: "Install Runtime", ic: G.download }] }, { grp: "Governance", items: [{ id: "policies", label: "Policies", ic: G.shield }, { id: "audit", label: "Audit", ic: G.audit }, { id: "settings", label: "Settings", ic: G.gear }] }, ]; function EnvSwitch() { const [open, setOpen] = React.useState(false); const [env, setEnv] = React.useState("Production"); const envs = [["Production", "green"], ["Staging", "amber"], ["Development", "blue"]]; return (
{open && (<>
setOpen(false)} />
{envs.map(([e, c]) => )}
)}
); } function WorkspaceSwitch() { return ; } function UserMenu({ onProfile, onSettings }) { const [open, setOpen] = React.useState(false); const items = [{ label: "Profile & preferences", ic: G.user, fn: onProfile }, { label: "Workspace settings", ic: G.gear, fn: onSettings }]; return (
{open && (<>
setOpen(false)} />
Neo Anderson
neo@acme.io
{items.map((it) => )}
)}
); } function SandboxPlaceholder({ onNew }) { return (

Execution plane

Sandboxes

Temporary 10-minute sessions to test MCP servers safely before installing — no production secrets, auto-expiring.

No active sandboxes

Start a guided 10-minute test session — pick a sandbox-enabled MCP server, choose a runtime, and launch.

); } function SideFoot() { const rt = useRuntime(); return (
{rt.online ? "Control plane online" : (rt.loading ? "Connecting…" : "Runtime offline")}
{rt.health ? rt.health.runtime_id + " · v" + rt.health.version : "cloud.matrixhub.io"}
API docs
); } // fmtBytes renders a byte count as a compact human string. function fmtBytes(n) { n = Number(n) || 0; if (n < 1024) return n + " B"; const u = ["KB", "MB", "GB", "TB"]; let i = -1; do { n /= 1024; i++; } while (n >= 1024 && i < u.length - 1); return n.toFixed(n < 10 ? 1 : 0) + " " + u[i]; } // StorageCard shows data-directory usage from GET /v1/system/storage. function StorageCard() { const { data } = useFetch("/v1/system/storage", 15000); const areaLabels = { models: "Model cache", mcp: "MCP cache", agents: "Agents", jobs: "Jobs", logs: "Logs", database: "Database" }; const areas = data ? data.areas || {} : {}; const keys = Object.keys(areaLabels).filter((k) => k in areas); return (
Storage {data && {fmtBytes(data.total_bytes)} used{data.free_bytes ? " · " + fmtBytes(data.free_bytes) + " free" : ""}}
{!data &&
Loading…
} {data && keys.map((k) => (
{areaLabels[k]} {fmtBytes(areas[k])}
))} {data &&
{data.jobs_count || 0} job dir(s) · {data.data_dir}
}
); } function CloudApp({ user, onSignOut }) { const [route, setRoute] = React.useState("overview"); const [sideOpen, setSideOpen] = React.useState(false); const [detailItem, setDetailItem] = React.useState(null); const [sandboxModal, setSandboxModal] = React.useState(null); const [sandboxSession, setSandboxSession] = React.useState(null); function go(id) { setRoute(id); setDetailItem(null); setSandboxSession(null); setSideOpen(false); } function openItem(item, sandbox) { if (sandbox) setSandboxModal(item); else setDetailItem(item); } function startSandbox(item) { setSandboxModal(null); setSandboxSession(item); setDetailItem(null); setRoute("sandboxes"); } let view; if (sandboxSession) view = { setSandboxSession(null); setRoute("catalog"); }} />; else if (detailItem) view = setDetailItem(null)} startSandbox={(it) => setSandboxModal(it)} />; else if (route === "overview") view = ; else if (route === "catalog") view = ; else if (route === "sandboxes") view = setRoute("new-sandbox")} />; else if (route === "new-sandbox") view = setRoute("sandboxes")} onLaunch={(it) => startSandbox(it)} />; else if (route === "models") view = setRoute("attach-model")} />; else if (route === "attach-model") view = setRoute("models")} onDone={() => setRoute("models")} />; else if (route === "runtimes") view = ; else if (route === "agents") view = ; else if (route === "logs") view = ; else if (route === "install") view = ; else if (route === "policies") view = ; else if (route === "audit") view = ; else if (route === "settings") view = ; else if (route === "profile") view = ; else if (route === "matrixshell") view = go("overview")} />; else view = ; return ( <>
MatrixCloud
⌘K
{sideOpen &&
setSideOpen(false)} />}
{view}
{sandboxModal && setSandboxModal(null)} onStart={() => startSandbox(sandboxModal)} />} ); } function Root() { const rt = useRuntimeState(); const [auth0, setAuth0] = React.useState({ loading: true, user: null }); React.useEffect(() => { let alive = true; if (!getToken()) { setAuth0({ loading: false, user: null }); return; } auth.me().then((u) => alive && setAuth0({ loading: false, user: u })) .catch(() => { setToken(null); alive && setAuth0({ loading: false, user: null }); }); return () => { alive = false; }; }, []); async function signOut(all) { await auth.logout(all); setAuth0({ loading: false, user: null }); } // Email-link flows (reset / verify) take precedence — they must work whether // or not a session is already active. const intent = React.useMemo(urlIntent, []); if (intent.kind === "reset" || intent.kind === "verify") { return setAuth0({ loading: false, user: u })} />; } if (auth0.loading) { return
Loading MatrixCloud…
; } if (!auth0.user) return setAuth0({ loading: false, user: u })} />; return ( ); } ReactDOM.createRoot(document.getElementById("cloud-root")).render();