Initial curated ITWorx_MCP_Hub source from 368fba691ea8d23403b4d56b53b5ec670d7c5020
This commit is contained in:
commit
cb5be898ea
663 files changed
+82674
No files matched your search
@@ -0,0 +1,135 @@
|
||||
import type { Health } from "../contracts";
|
||||
|
||||
type TopologyProps = {
|
||||
hub?: Health;
|
||||
gateway?: Health;
|
||||
connectors?: Array<{ name: string; state: Health }>;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
const labels: Record<Health, string> = {
|
||||
healthy: "healthy",
|
||||
degraded: "degraded",
|
||||
unavailable: "unavailable",
|
||||
unknown: "unknown",
|
||||
};
|
||||
|
||||
function shortConnectorName(name: string): string {
|
||||
const normalized = name.toLowerCase();
|
||||
if (normalized.includes("gitea")) return "Gitea";
|
||||
if (normalized.includes("unraid")) return "Unraid";
|
||||
if (normalized.includes("knowledge")) return "Knowledge";
|
||||
if (normalized.includes("mobility")) return "Mobility";
|
||||
return name.length > 13 ? `${name.slice(0, 12)}…` : name;
|
||||
}
|
||||
|
||||
export function McpTopology({ hub = "healthy", gateway = "healthy", connectors = [], compact = false }: TopologyProps) {
|
||||
const targets = connectors.length
|
||||
? connectors.slice(0, 3).map((connector) => ({ label: shortConnectorName(connector.name), state: connector.state }))
|
||||
: [
|
||||
{ label: "Gitea", state: "healthy" as const },
|
||||
{ label: "Knowledge", state: "healthy" as const },
|
||||
{ label: "Unraid", state: "healthy" as const },
|
||||
];
|
||||
const hiddenTargets = Math.max(0, connectors.length - targets.length);
|
||||
const description = `Client requests pass through a ${labels[hub]} policy boundary and a ${labels[gateway]} MCP gateway to ${connectors.length || 3} scoped connector${(connectors.length || 3) === 1 ? "" : "s"}.`;
|
||||
|
||||
return (
|
||||
<figure className={compact ? "topology topology-compact" : "topology"} aria-label="Governed MCP request path">
|
||||
<div className="topology-head">
|
||||
<span><span className={`signal-dot signal-${hub}`} aria-hidden="true" />Governed request path</span>
|
||||
<small>{connectors.length ? `${connectors.length} live routes` : "Deny by default"}</small>
|
||||
</div>
|
||||
<div className="topology-canvas" aria-hidden="true">
|
||||
<svg viewBox="0 0 620 244" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="flow-gradient" x1="0" x2="1">
|
||||
<stop offset="0" stopColor="currentColor" stopOpacity="0.18" />
|
||||
<stop offset="0.5" stopColor="currentColor" stopOpacity="0.9" />
|
||||
<stop offset="1" stopColor="currentColor" stopOpacity="0.18" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g className="topology-links">
|
||||
<path d="M118 122H202" />
|
||||
<path d="M318 122H390" />
|
||||
<path d="M494 122H524V48H542" />
|
||||
<path d="M494 122H542" />
|
||||
<path d="M494 122H524V196H542" />
|
||||
</g>
|
||||
<g className="topology-flow">
|
||||
<path d="M118 122H202" />
|
||||
<path d="M318 122H390" />
|
||||
<path d="M494 122H524V48H542" />
|
||||
<path d="M494 122H542" />
|
||||
<path d="M494 122H524V196H542" />
|
||||
</g>
|
||||
|
||||
<g className="topology-node topology-node-client">
|
||||
<rect x="20" y="92" width="98" height="60" rx="10" />
|
||||
<circle cx="45" cy="115" r="8" />
|
||||
<path d="M34 140c2-8 6-11 11-11s9 3 11 11" />
|
||||
<text x="67" y="116">Client</text>
|
||||
<text className="topology-sub" x="67" y="135">Codex / MCP</text>
|
||||
</g>
|
||||
|
||||
<g className={`topology-node topology-node-${hub}`}>
|
||||
<rect x="202" y="84" width="116" height="76" rx="10" />
|
||||
<path d="M228 105.5 240 110v9c0 8-4 13-12 17-8-4-12-9-12-17v-9l12-4.5Z" />
|
||||
<path d="m222 120 4 4 8-9" />
|
||||
<text x="250" y="112">Policy gate</text>
|
||||
<text className="topology-sub" x="250" y="132">Scope + identity</text>
|
||||
<circle className="topology-state" cx="300" cy="99" r="4" />
|
||||
</g>
|
||||
|
||||
<g className={`topology-node topology-node-${gateway}`}>
|
||||
<rect x="390" y="84" width="104" height="76" rx="10" />
|
||||
<circle cx="416" cy="122" r="13" />
|
||||
<circle cx="416" cy="122" r="4" />
|
||||
<text x="438" y="116">Gateway</text>
|
||||
<text className="topology-sub" x="438" y="136">ContextForge</text>
|
||||
<circle className="topology-state" cx="476" cy="99" r="4" />
|
||||
</g>
|
||||
|
||||
{targets.map((target, index) => {
|
||||
const y = [28, 102, 176][index] ?? 102;
|
||||
return (
|
||||
<g className={`topology-target topology-node-${target.state}`} key={`${target.label}-${index}`}>
|
||||
<rect x="542" y={y} width="70" height="40" rx="8" />
|
||||
<circle className="topology-state" cx="555" cy={y + 20} r="4" />
|
||||
<text x="565" y={y + 24}>{target.label}</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
<div className="topology-mobile-flow" aria-hidden="true">
|
||||
<div className="topology-mobile-node">
|
||||
<span className="topology-mobile-mark">C</span>
|
||||
<span><strong>Client</strong><small>Codex / MCP</small></span>
|
||||
</div>
|
||||
<span className="topology-mobile-link" />
|
||||
<div className={`topology-mobile-node topology-node-${hub}`}>
|
||||
<span className="topology-mobile-mark">P</span>
|
||||
<span><strong>Policy gate</strong><small>Scope + identity</small></span>
|
||||
<i className="topology-state" />
|
||||
</div>
|
||||
<span className="topology-mobile-link" />
|
||||
<div className={`topology-mobile-node topology-node-${gateway}`}>
|
||||
<span className="topology-mobile-mark">G</span>
|
||||
<span><strong>Gateway</strong><small>ContextForge</small></span>
|
||||
<i className="topology-state" />
|
||||
</div>
|
||||
<span className="topology-mobile-link" />
|
||||
<div className="topology-mobile-targets">
|
||||
{targets.map((target, index) => <span className={`topology-node-${target.state}`} key={`${target.label}-mobile-${index}`}><i className="topology-state" />{target.label}</span>)}
|
||||
{hiddenTargets > 0 ? <span>+{hiddenTargets} routes</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>
|
||||
<span>{description}</span>
|
||||
{hiddenTargets > 0 ? <small>+{hiddenTargets} additional scoped route{hiddenTargets === 1 ? "" : "s"}</small> : null}
|
||||
</figcaption>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user