> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mka1.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Architecture overview

> Explore how every MKA1 capability, service, and attached resource fits together.

export const ArchitectureMap = () => {
  const SERVICES = [{
    id: "client-developers",
    label: "Developers & Apps",
    descriptor: "CLI · Python · TypeScript · C#",
    band: "clients",
    position: {
      row: 0,
      col: 0
    },
    kind: "public",
    resources: []
  }, {
    id: "client-users",
    label: "End Users",
    descriptor: "Browser clients",
    band: "clients",
    position: {
      row: 0,
      col: 1
    },
    kind: "public",
    resources: []
  }, {
    id: "client-channels",
    label: "Messaging Channels",
    descriptor: "Telegram · WhatsApp",
    band: "clients",
    position: {
      row: 0,
      col: 2
    },
    kind: "public",
    resources: []
  }, {
    id: "client-operators",
    label: "Operators",
    descriptor: "Administrative access",
    band: "clients",
    position: {
      row: 0,
      col: 3
    },
    kind: "public",
    resources: []
  }, {
    id: "kong",
    label: "Kong API Gateway",
    descriptor: "Authentication, routing and audit shipping",
    band: "edge",
    position: {
      row: 0,
      col: 0
    },
    accent: "public",
    kind: "public",
    resources: ["database"]
  }, {
    id: "sandbox-trusted",
    label: "sandbox-trusted",
    descriptor: "Secure sandbox orchestrator",
    band: "product",
    position: {
      row: 0,
      col: 0
    },
    accent: "sandbox",
    kind: "public",
    resources: ["database", "objectstore"]
  }, {
    id: "mka1-agents-sdk",
    label: "mka1-agents-sdk",
    descriptor: "Agents, schedules and channels",
    band: "product",
    position: {
      row: 0,
      col: 1
    },
    accent: "public",
    kind: "public",
    resources: ["database", "workflows", "webhooks"]
  }, {
    id: "mkllm-gateway",
    label: "mkllm-gateway",
    descriptor: "LLM API, chat, files and retrieval",
    band: "product",
    position: {
      row: 0,
      col: 2
    },
    accent: "public",
    kind: "public",
    resources: ["database", "cache", "objectstore", "workflows", "pubsub"]
  }, {
    id: "mka1-platform",
    label: "mka1-platform",
    descriptor: "Web console and account workspace",
    band: "product",
    position: {
      row: 0,
      col: 3
    },
    accent: "public",
    kind: "public",
    resources: ["objectstore", "webhooks"]
  }, {
    id: "mka1-serving",
    label: "mka1-serving",
    descriptor: "Dedicated inference and fine-tuning",
    band: "product",
    position: {
      row: 0,
      col: 4
    },
    accent: "serving",
    kind: "public",
    resources: ["objectstore"]
  }, {
    id: "mka1-realtime",
    label: "mka1-realtime",
    descriptor: "Realtime and WebRTC API",
    band: "product",
    position: {
      row: 0,
      col: 5
    },
    accent: "public",
    kind: "public",
    resources: ["objectstore", "pubsub"]
  }, {
    id: "sandbox-runner",
    label: "sandbox-runner",
    descriptor: "Isolated microVM execution host",
    band: "product",
    position: {
      row: 1,
      col: 0
    },
    accent: "sandbox",
    kind: "paired-execution",
    resources: ["objectstore"]
  }, {
    id: "llm-async-workers",
    label: "LLM Async Workers",
    descriptor: "Background runs, documents and evaluations",
    band: "product",
    position: {
      row: 1,
      col: 2
    },
    kind: "internal",
    resources: ["database", "objectstore", "workflows"]
  }, {
    id: "voice-livekit",
    label: "Voice",
    descriptor: "Voice agent and media server",
    band: "product",
    position: {
      row: 1,
      col: 3
    },
    kind: "internal",
    resources: ["objectstore", "pubsub"]
  }, {
    id: "kubernetes-native-orchestration",
    label: "Kubernetes-Native Orchestration",
    descriptor: "GPU placement, provisioning and lifecycle",
    band: "product",
    position: {
      row: 1,
      col: 4
    },
    accent: "serving",
    kind: "paired-execution",
    resources: []
  }, {
    id: "mka1-repos",
    label: "mka1-repos",
    descriptor: "Git-compatible repositories and Git LFS",
    band: "product",
    position: {
      row: 1,
      col: 5
    },
    accent: "public",
    kind: "public",
    resources: ["database", "objectstore", "git"]
  }, {
    id: "mka1-budgeting",
    label: "mka1-budgeting",
    descriptor: "Spend ledger and budget gates",
    band: "platform",
    position: {
      row: 0,
      col: 0
    },
    accent: "public",
    kind: "public",
    resources: ["database", "webhooks"]
  }, {
    id: "authorization-fga",
    label: "Authorization (FGA)",
    descriptor: "Fine-grained access control",
    band: "platform",
    position: {
      row: 0,
      col: 1
    },
    accent: "public",
    kind: "public",
    resources: ["authz"]
  }, {
    id: "mk-search",
    label: "mk-search",
    descriptor: "Internal retrieval engine",
    band: "platform",
    position: {
      row: 0,
      col: 2
    },
    kind: "internal",
    resources: ["cache", "objectstore"]
  }, {
    id: "mka1-audit",
    label: "mka1-audit",
    descriptor: "Append-only audit trail",
    band: "platform",
    position: {
      row: 0,
      col: 3
    },
    accent: "audit",
    kind: "internal",
    resources: ["database", "webhooks"]
  }, {
    id: "authentication",
    label: "Authentication",
    descriptor: "Sessions, OAuth and API keys",
    band: "platform",
    position: {
      row: 0,
      col: 4
    },
    accent: "public",
    kind: "public",
    resources: ["database", "cache"]
  }, {
    id: "data-postgres",
    label: "Postgres (CNPG)",
    descriptor: "Service databases",
    band: "data",
    position: {
      row: 0,
      col: 0
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-dragonfly",
    label: "Dragonfly",
    descriptor: "Redis-compatible caches",
    band: "data",
    position: {
      row: 0,
      col: 1
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-temporal",
    label: "Temporal",
    descriptor: "Durable workflows",
    band: "data",
    position: {
      row: 0,
      col: 2
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-objectstore",
    label: "SeaweedFS / S3",
    descriptor: "Object storage",
    band: "data",
    position: {
      row: 0,
      col: 3
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-gitea",
    label: "Gitea",
    descriptor: "Git and LFS storage",
    band: "data",
    position: {
      row: 0,
      col: 4
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-openfga",
    label: "OpenFGA Store",
    descriptor: "Authorization data",
    band: "data",
    position: {
      row: 0,
      col: 5
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-centrifugo",
    label: "Centrifugo",
    descriptor: "Realtime pub-sub",
    band: "data",
    position: {
      row: 0,
      col: 6
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-svix",
    label: "Svix",
    descriptor: "Webhook delivery",
    band: "data",
    position: {
      row: 0,
      col: 7
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-signoz",
    label: "SigNoz",
    descriptor: "Logs, metrics and traces",
    band: "data",
    position: {
      row: 0,
      col: 8
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-posthog",
    label: "PostHog",
    descriptor: "Usage analytics",
    band: "data",
    position: {
      row: 0,
      col: 9
    },
    kind: "internal",
    resources: []
  }];
  const EDGES = [{
    from: "client-developers",
    to: "kong",
    kind: "public"
  }, {
    from: "client-users",
    to: "kong",
    kind: "public"
  }, {
    from: "client-channels",
    to: "kong",
    kind: "public"
  }, {
    from: "client-operators",
    to: "kong",
    kind: "public"
  }, {
    from: "kong",
    to: "sandbox-trusted",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-agents-sdk",
    kind: "public"
  }, {
    from: "kong",
    to: "mkllm-gateway",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-platform",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-serving",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-realtime",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-repos",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-budgeting",
    kind: "public"
  }, {
    from: "kong",
    to: "authorization-fga",
    kind: "public"
  }, {
    from: "kong",
    to: "authentication",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-audit",
    kind: "audit"
  }, {
    from: "mka1-agents-sdk",
    to: "mkllm-gateway",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "mkllm-gateway",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "mka1-serving",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "llm-async-workers",
    kind: "internal"
  }, {
    from: "sandbox-trusted",
    to: "sandbox-runner",
    kind: "pair"
  }, {
    from: "mkllm-gateway",
    to: "sandbox-trusted",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "voice-livekit",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "mka1-budgeting",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "authorization-fga",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "mk-search",
    kind: "internal"
  }, {
    from: "sandbox-trusted",
    to: "mka1-budgeting",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "authentication",
    kind: "internal"
  }, {
    from: "mka1-serving",
    to: "kubernetes-native-orchestration",
    kind: "pair"
  }];
  const RESOURCE_META = {
    database: {
      label: "Database",
      target: "data-postgres"
    },
    cache: {
      label: "Redis cache",
      target: "data-dragonfly"
    },
    objectstore: {
      label: "Object storage",
      target: "data-objectstore"
    },
    workflows: {
      label: "Workflows (Temporal)",
      target: "data-temporal"
    },
    authz: {
      label: "Authorization store",
      target: "data-openfga"
    },
    pubsub: {
      label: "Pub-sub",
      target: "data-centrifugo"
    },
    webhooks: {
      label: "Webhooks",
      target: "data-svix"
    },
    git: {
      label: "Git storage",
      target: "data-gitea"
    }
  };
  const RESOURCE_EDGES = SERVICES.reduce((edges, service) => {
    service.resources.forEach(resourceKind => {
      const metadata = RESOURCE_META[resourceKind];
      if (metadata) {
        edges.push({
          from: service.id,
          to: metadata.target,
          kind: "resource",
          resourceKind
        });
      }
    });
    return edges;
  }, []);
  const ALL_EDGES = [...EDGES, ...RESOURCE_EDGES];
  const VIEW_WIDTH = 1440;
  const VIEW_HEIGHT = 1096;
  const SIDE = 24;
  const GAP = 12;
  const TYPE_SCALE = {
    bandLabel: {
      fontSize: 12,
      fontWeight: 760,
      lineHeight: 16,
      widthFactor: 0.6
    },
    cardTitle: {
      fontSize: 14,
      fontWeight: 720,
      lineHeight: 18,
      widthFactor: 0.6
    },
    cardDescriptor: {
      fontSize: 12,
      fontWeight: 450,
      lineHeight: 16,
      widthFactor: 0.55
    },
    edgeTitle: {
      fontSize: 16,
      fontWeight: 740,
      lineHeight: 20,
      widthFactor: 0.6
    },
    edgeDescriptor: {
      fontSize: 12.5,
      fontWeight: 450,
      lineHeight: 16,
      widthFactor: 0.55
    },
    chipTitle: {
      fontSize: 11,
      fontWeight: 720,
      lineHeight: 15,
      widthFactor: 0.6
    },
    chipDescriptor: {
      fontSize: 10.5,
      fontWeight: 450,
      lineHeight: 14,
      widthFactor: 0.55
    },
    legendTitle: {
      fontSize: 11,
      fontWeight: 760,
      lineHeight: 15,
      widthFactor: 0.6
    },
    legend: {
      fontSize: 11,
      fontWeight: 500,
      lineHeight: 15,
      widthFactor: 0.55
    }
  };
  const BAND_LAYOUT = {
    clients: {
      label: "CLIENTS",
      y: 24,
      height: 118,
      cols: 4,
      pad: 44,
      cardTop: 40,
      cardHeight: 64,
      rowGap: 0
    },
    edge: {
      label: "EDGE · SINGLE FRONT DOOR",
      y: 156,
      height: 94,
      cols: 1,
      pad: 260,
      cardTop: 36,
      cardHeight: 50,
      rowGap: 0
    },
    product: {
      label: "PRODUCT SERVICES",
      y: 264,
      height: 402,
      cols: 6,
      pad: 26,
      cardTop: 43,
      cardHeight: 112,
      rowHeights: [112, 122],
      rowGap: 166
    },
    platform: {
      label: "PLATFORM SERVICES",
      y: 682,
      height: 158,
      cols: 5,
      pad: 26,
      cardTop: 43,
      cardHeight: 88,
      rowGap: 0
    },
    data: {
      label: "DATA & INFRASTRUCTURE · SHARED",
      y: 856,
      height: 164,
      cols: 10,
      pad: 12,
      cardTop: 48,
      cardHeight: 82,
      rowGap: 0
    }
  };
  const CARD_TEXT_LAYOUT = {
    clients: {
      titleType: "cardTitle",
      descriptorType: "cardDescriptor",
      paddingX: 16,
      titleBaseline: 25,
      titleToDescriptor: 21
    },
    edge: {
      titleType: "edgeTitle",
      descriptorType: "edgeDescriptor",
      paddingX: 20,
      titleBaseline: 20.5,
      titleToDescriptor: 19
    },
    product: {
      titleType: "cardTitle",
      descriptorType: "cardDescriptor",
      paddingX: 12,
      titleBaseline: 30,
      titleToDescriptor: 24
    },
    platform: {
      titleType: "cardTitle",
      descriptorType: "cardDescriptor",
      paddingX: 16,
      titleBaseline: 31,
      titleToDescriptor: 24
    },
    data: {
      titleType: "chipTitle",
      descriptorType: "chipDescriptor",
      paddingX: 12,
      titleBaseline: 22,
      titleToDescriptor: 21
    }
  };
  const BAND_COLORS = {
    clients: "var(--arch-band-clients)",
    edge: "var(--arch-band-edge)",
    product: "var(--arch-band-product)",
    platform: "var(--arch-band-platform)",
    data: "var(--arch-band-data)"
  };
  const ACCENT_COLORS = {
    public: "var(--arch-public)",
    sandbox: "var(--arch-sandbox)",
    serving: "var(--arch-serving)",
    audit: "var(--arch-audit)"
  };
  const EDGE_META = {
    public: {
      label: "Public route",
      color: "var(--arch-public)",
      marker: "arch-arrow-public"
    },
    internal: {
      label: "Internal call",
      color: "var(--arch-internal)",
      marker: "arch-arrow-internal"
    },
    audit: {
      label: "Audit stream",
      color: "var(--arch-audit)",
      marker: "arch-arrow-audit"
    },
    pair: {
      label: "Paired execution",
      color: "var(--arch-sandbox)",
      marker: "arch-arrow-sandbox"
    },
    resource: {
      label: "Resource dependency",
      color: "var(--arch-resource)",
      marker: null
    }
  };
  const [hoveredId, setHoveredId] = useState(null);
  const [pinnedId, setPinnedId] = useState(null);
  const [query, setQuery] = useState("");
  const selectedId = pinnedId || hoveredId;
  const serviceById = SERVICES.reduce((index, service) => {
    index[service.id] = service;
    return index;
  }, {});
  const selectedService = selectedId ? serviceById[selectedId] : null;
  const normalizedQuery = query.trim().toLowerCase();
  const searchResults = normalizedQuery ? SERVICES.filter(service => {
    const resourceLabels = service.resources.map(kind => RESOURCE_META[kind]?.label || "");
    return [service.label, service.descriptor, ...resourceLabels].join(" ").toLowerCase().includes(normalizedQuery);
  }).slice(0, 8) : [];
  const connectedIds = new Set(selectedId ? [selectedId] : []);
  if (selectedId) {
    ALL_EDGES.forEach(edge => {
      if (edge.from === selectedId || edge.to === selectedId) {
        connectedIds.add(edge.from);
        connectedIds.add(edge.to);
      }
    });
  }
  const getCardBox = service => {
    const layout = BAND_LAYOUT[service.band];
    const usableWidth = VIEW_WIDTH - 2 * SIDE - 2 * layout.pad;
    const slotWidth = (usableWidth - GAP * (layout.cols - 1)) / layout.cols;
    return {
      x: SIDE + layout.pad + service.position.col * (slotWidth + GAP),
      y: layout.y + layout.cardTop + service.position.row * layout.rowGap,
      width: slotWidth,
      height: layout.rowHeights?.[service.position.row] || layout.cardHeight
    };
  };
  const estimateTextWidth = (text, type) => text.length * type.fontSize * type.widthFactor;
  const wrapText = (text, maxWidth, type) => {
    const lines = [];
    text.split(" ").forEach(word => {
      const current = lines[lines.length - 1] || "";
      const candidate = current ? `${current} ${word}` : word;
      if (!current || estimateTextWidth(candidate, type) <= maxWidth) {
        if (current) lines[lines.length - 1] = candidate; else lines.push(candidate);
      } else {
        lines.push(word);
      }
    });
    return lines;
  };
  const getEdgePresentation = edge => {
    if (edge.kind !== "pair") return EDGE_META[edge.kind];
    const isServingPair = serviceById[edge.from]?.accent === "serving";
    return {
      ...EDGE_META.pair,
      color: isServingPair ? "var(--arch-serving)" : "var(--arch-sandbox)",
      marker: isServingPair ? "arch-arrow-serving" : "arch-arrow-sandbox"
    };
  };
  const getEdgePath = edge => {
    const from = serviceById[edge.from];
    const to = serviceById[edge.to];
    const fromBox = getCardBox(from);
    const toBox = getCardBox(to);
    const fromCenter = {
      x: fromBox.x + fromBox.width / 2,
      y: fromBox.y + fromBox.height / 2
    };
    const toCenter = {
      x: toBox.x + toBox.width / 2,
      y: toBox.y + toBox.height / 2
    };
    if (from.band === to.band && from.position.row === to.position.row) {
      const columnsApart = Math.abs(from.position.col - to.position.col);
      if (columnsApart > 1) {
        const routeY = Math.max(fromBox.y + fromBox.height, toBox.y + toBox.height) + 22;
        return `M ${fromCenter.x} ${fromBox.y + fromBox.height} V ${routeY} H ${toCenter.x} V ${toBox.y + toBox.height}`;
      }
      const leftToRight = fromCenter.x < toCenter.x;
      const startX = leftToRight ? fromBox.x + fromBox.width : fromBox.x;
      const endX = leftToRight ? toBox.x : toBox.x + toBox.width;
      return `M ${startX} ${fromCenter.y} H ${endX}`;
    }
    const startY = fromCenter.y < toCenter.y ? fromBox.y + fromBox.height : fromBox.y;
    const endY = fromCenter.y < toCenter.y ? toBox.y : toBox.y + toBox.height;
    const middleY = startY + (endY - startY) / 2;
    return `M ${fromCenter.x} ${startY} V ${middleY} H ${toCenter.x} V ${endY}`;
  };
  const resourceIcon = kind => {
    const common = {
      fill: "none",
      stroke: "currentColor",
      strokeWidth: 1.7,
      strokeLinecap: "round",
      strokeLinejoin: "round"
    };
    if (kind === "database") {
      return <svg viewBox="0 0 24 24" aria-hidden="true">
          <ellipse cx="12" cy="5" rx="7" ry="3" {...common} />
          <path d="M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6" {...common} />
        </svg>;
    }
    if (kind === "cache") {
      return <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m12 3 8 4-8 4-8-4 8-4Z" {...common} />
          <path d="m5 11 7 3.5 7-3.5M5 15l7 3.5 7-3.5" {...common} />
        </svg>;
    }
    if (kind === "objectstore") {
      return <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 8h14l-1 11H6L5 8Z" {...common} />
          <path d="M8 8V6a4 4 0 0 1 8 0v2M4 8h16" {...common} />
        </svg>;
    }
    if (kind === "workflows") {
      return <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="7" {...common} />
          <path d="M12 8v4l3 2M6.5 4.5H3v3M17.5 19.5H21v-3" {...common} />
          <path d="M4 7a9 9 0 0 1 15-2M20 17a9 9 0 0 1-15 2" {...common} />
        </svg>;
    }
    if (kind === "authz") {
      return <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="8" cy="10" r="4" {...common} />
          <path d="m11 13 7 7M15 17l2-2M17 19l2-2" {...common} />
        </svg>;
    }
    if (kind === "pubsub") {
      return <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="2" {...common} />
          <path d="M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7M5.5 5.5a9 9 0 0 0 0 13M18.5 5.5a9 9 0 0 1 0 13" {...common} />
        </svg>;
    }
    return <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 5v8a5 5 0 0 0 10 0V8" {...common} />
        <path d="m14 10 3-3 3 3" {...common} />
      </svg>;
  };
  const selectService = serviceId => {
    setPinnedId(current => current === serviceId ? null : serviceId);
  };
  const openSearchResult = serviceId => {
    setPinnedId(serviceId);
    setHoveredId(null);
    setQuery("");
  };
  const connectionGroup = (title, edges, endpointKey) => <div className="architecture-connections-group">
      <h4>{title}</h4>
      {edges.length ? <div className="architecture-connection-list">
          {edges.map(edge => {
    const endpoint = serviceById[edge[endpointKey]];
    const presentation = getEdgePresentation(edge);
    return <button type="button" className="architecture-connection" key={`${edge.from}-${edge.to}-${edge.kind}`} onClick={() => setPinnedId(endpoint.id)}>
                <span className="architecture-connection-line" style={{
      background: presentation.color
    }} />
                <span>
                  <small style={{
      color: presentation.color
    }}>{presentation.label}</small>
                  <strong>{endpoint.label}</strong>
                </span>
              </button>;
  })}
        </div> : <p className="architecture-empty">None shown</p>}
    </div>;
  const detailPanel = () => {
    if (!selectedService) return null;
    const incoming = EDGES.filter(edge => edge.to === selectedService.id);
    const outgoing = EDGES.filter(edge => edge.from === selectedService.id);
    const surfaceLabel = selectedService.kind === "public" ? "Public surface" : selectedService.kind === "paired-execution" ? "Execution layer" : "Internal only";
    return <aside className="architecture-inspector" aria-live="polite">
        <div className="architecture-inspector-heading">
          <div>
            <span className="architecture-eyebrow">SERVICE DETAIL</span>
            <h3>{selectedService.label}</h3>
          </div>
          {pinnedId && <button type="button" className="architecture-close" onClick={() => setPinnedId(null)} aria-label="Unpin service detail">
              ×
            </button>}
        </div>
        <span className={`architecture-surface is-${selectedService.kind}`}>
          {surfaceLabel}
        </span>
        <p className="architecture-inspector-description">
          {selectedService.descriptor}
        </p>

        <h4>Attached resources</h4>
        {selectedService.resources.length ? <div className="architecture-resource-chips">
            {selectedService.resources.map(kind => <span className="architecture-resource-chip" key={kind}>
                {resourceIcon(kind)}
                {RESOURCE_META[kind].label}
              </span>)}
          </div> : <p className="architecture-empty">No stateful resource called out.</p>}

        <div className="architecture-connections">
          {connectionGroup("Receives from", incoming, "from")}
          {connectionGroup("Connects to", outgoing, "to")}
        </div>
      </aside>;
  };
  return <div className="architecture-explorer">
      <style>{`
        .architecture-explorer {
          --arch-canvas: #f7f9fc;
          --arch-surface: #ffffff;
          --arch-surface-raised: #ffffff;
          --arch-text: #162033;
          --arch-muted: #657087;
          --arch-faint: #8e99ad;
          --arch-border: #d7dfe9;
          --arch-border-strong: #c7d1de;
          --arch-band-clients: #f2f5f9;
          --arch-band-edge: #eaf3fb;
          --arch-band-product: #f0f6fa;
          --arch-band-platform: #f5f3fb;
          --arch-band-data: #edf1f5;
          --arch-public: #24689a;
          --arch-internal: #647386;
          --arch-resource: #8a98a9;
          --arch-sandbox: #0f766e;
          --arch-serving: #5b21b6;
          --arch-audit: #9a5c22;
          --arch-shadow: 0 18px 48px rgba(23, 35, 58, 0.1);
          width: 100%;
          margin: 1.5rem 0 1rem;
          overflow: hidden;
          position: relative;
          color: var(--arch-text);
          background: var(--arch-canvas);
          border: 1px solid var(--arch-border);
          border-radius: 22px;
          box-shadow: var(--arch-shadow);
          container: architecture-explorer / inline-size;
        }

        .dark .architecture-explorer,
        [data-theme="dark"] .architecture-explorer {
          --arch-canvas: #0c111b;
          --arch-surface: #121925;
          --arch-surface-raised: #182332;
          --arch-text: #edf2f8;
          --arch-muted: #9aa8bc;
          --arch-faint: #77869a;
          --arch-border: #273346;
          --arch-border-strong: #39475c;
          --arch-band-clients: #111a25;
          --arch-band-edge: #102333;
          --arch-band-product: #10212d;
          --arch-band-platform: #1b1728;
          --arch-band-data: #151e29;
          --arch-public: #62a9d8;
          --arch-internal: #91a1b3;
          --arch-resource: #718196;
          --arch-sandbox: #35b5a7;
          --arch-serving: #a58ae8;
          --arch-audit: #d49a5d;
          --arch-shadow: 0 20px 54px rgba(0, 0, 0, 0.3);
        }

        .architecture-explorer *,
        .architecture-explorer *::before,
        .architecture-explorer *::after { box-sizing: border-box; }
        .architecture-explorer button,
        .architecture-explorer input { font: inherit; }
        .architecture-explorer button:focus-visible,
        .architecture-explorer input:focus-visible,
        .architecture-card:focus-visible {
          outline: 3px solid color-mix(in srgb, var(--arch-public) 38%, transparent);
          outline-offset: 2px;
        }

        .architecture-toolbar {
          min-height: 70px;
          padding: 13px 16px;
          display: grid;
          grid-template-columns: minmax(210px, 1fr) minmax(260px, 430px);
          gap: 16px;
          align-items: center;
          position: relative;
          z-index: 10;
          background: color-mix(in srgb, var(--arch-surface) 94%, transparent);
          border-bottom: 1px solid var(--arch-border);
        }

        .architecture-brand {
          min-width: 0;
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .architecture-brand-mark {
          width: 40px;
          height: 40px;
          flex: none;
          display: grid;
          place-items: center;
          color: #fff;
          background: linear-gradient(145deg, #246fbe, #5b57c8);
          border-radius: 11px;
          font-size: 11.5px;
          font-weight: 850;
          line-height: 1;
          letter-spacing: -0.03em;
          box-shadow: 0 6px 16px rgba(50, 89, 180, 0.28);
        }
        .architecture-brand-copy {
          min-width: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .architecture-brand-copy strong { font-size: 14px; line-height: 18px; }
        .architecture-brand-copy span {
          overflow: hidden;
          color: var(--arch-muted);
          font-size: 11.5px;
          line-height: 16px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .architecture-search-wrap { position: relative; }
        .architecture-search-icon {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--arch-faint);
          font-size: 15px;
          pointer-events: none;
        }
        .architecture-search {
          width: 100%;
          height: 42px;
          padding: 0 34px 0 36px;
          color: var(--arch-text);
          background: var(--arch-canvas);
          border: 1px solid var(--arch-border);
          border-radius: 11px;
          font-size: 12.5px;
          line-height: 18px;
        }
        .architecture-search::placeholder { color: var(--arch-faint); }
        .architecture-search-clear {
          position: absolute;
          right: 8px;
          top: 50%;
          width: 24px;
          height: 24px;
          transform: translateY(-50%);
          color: var(--arch-muted);
          background: transparent;
          border: 0;
          border-radius: 7px;
          cursor: pointer;
        }
        .architecture-search-results {
          position: absolute;
          top: calc(100% + 8px);
          left: 0;
          right: 0;
          max-height: 360px;
          overflow: auto;
          padding: 6px;
          background: var(--arch-surface);
          border: 1px solid var(--arch-border-strong);
          border-radius: 13px;
          box-shadow: 0 18px 44px rgba(22, 32, 51, 0.18);
        }
        .architecture-search-result {
          width: 100%;
          padding: 9px 10px;
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 2px 12px;
          color: var(--arch-text);
          background: transparent;
          border: 0;
          border-radius: 9px;
          text-align: left;
          cursor: pointer;
        }
        .architecture-search-result:hover { background: var(--arch-canvas); }
        .architecture-search-result strong {
          overflow: hidden;
          font-size: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .architecture-search-result span {
          overflow: hidden;
          color: var(--arch-muted);
          font-size: 10px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .architecture-search-result em {
          grid-row: 1 / span 2;
          grid-column: 2;
          align-self: center;
          color: var(--arch-public);
          font-size: 14px;
          font-style: normal;
        }
        .architecture-search-empty {
          margin: 0;
          padding: 12px;
          color: var(--arch-muted);
          font-size: 11px;
          text-align: center;
        }

        .architecture-stage { position: relative; }
        .architecture-map-scroll {
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          background: var(--arch-canvas);
          scrollbar-width: thin;
          scrollbar-color: var(--arch-border-strong) transparent;
        }
        .architecture-canvas {
          width: 100%;
          min-width: 800px;
          height: auto;
          display: block;
        }
        .architecture-band {
          stroke: var(--arch-border);
          stroke-width: 1.2;
        }
        .architecture-band-label {
          fill: var(--arch-muted);
          font-size: ${TYPE_SCALE.bandLabel.fontSize}px;
          font-weight: ${TYPE_SCALE.bandLabel.fontWeight};
          letter-spacing: 1.1px;
          pointer-events: none;
        }
        .architecture-edge {
          fill: none;
          stroke-linecap: round;
          stroke-linejoin: round;
          transition: opacity 150ms ease;
        }
        .architecture-card {
          cursor: pointer;
          outline: none;
          transition: opacity 150ms ease;
        }
        .architecture-card-shape {
          fill: var(--arch-surface-raised);
          stroke: var(--arch-border);
          stroke-width: 1.25;
        }
        .architecture-card.is-public .architecture-card-shape {
          stroke: var(--arch-public);
        }
        .architecture-card.is-internal-only .architecture-card-shape {
          stroke: var(--arch-internal);
          stroke-dasharray: 7 5;
        }
        .architecture-card.is-paired .architecture-card-shape {
          stroke-width: 1.8;
        }
        .architecture-card.has-sandbox-accent .architecture-card-shape {
          stroke: var(--arch-sandbox);
        }
        .architecture-card.has-serving-accent .architecture-card-shape {
          stroke: var(--arch-serving);
        }
        .architecture-card:focus .architecture-card-shape,
        .architecture-card.is-selected .architecture-card-shape {
          stroke-width: 3;
          filter: drop-shadow(0 5px 8px rgba(36, 104, 154, 0.24));
        }
        .architecture-card-title {
          fill: var(--arch-text);
          font-size: ${TYPE_SCALE.cardTitle.fontSize}px;
          font-weight: ${TYPE_SCALE.cardTitle.fontWeight};
          pointer-events: none;
        }
        .architecture-card-description {
          fill: var(--arch-muted);
          font-size: ${TYPE_SCALE.cardDescriptor.fontSize}px;
          font-weight: ${TYPE_SCALE.cardDescriptor.fontWeight};
          pointer-events: none;
        }
        .architecture-edge-card .architecture-card-title {
          font-size: ${TYPE_SCALE.edgeTitle.fontSize}px;
          font-weight: ${TYPE_SCALE.edgeTitle.fontWeight};
        }
        .architecture-edge-card .architecture-card-description {
          font-size: ${TYPE_SCALE.edgeDescriptor.fontSize}px;
          font-weight: ${TYPE_SCALE.edgeDescriptor.fontWeight};
        }
        .architecture-data-card .architecture-card-title {
          font-size: ${TYPE_SCALE.chipTitle.fontSize}px;
          font-weight: ${TYPE_SCALE.chipTitle.fontWeight};
        }
        .architecture-data-card .architecture-card-description {
          font-size: ${TYPE_SCALE.chipDescriptor.fontSize}px;
          font-weight: ${TYPE_SCALE.chipDescriptor.fontWeight};
        }
        .architecture-legend-title {
          fill: var(--arch-muted);
          font-size: ${TYPE_SCALE.legendTitle.fontSize}px;
          font-weight: ${TYPE_SCALE.legendTitle.fontWeight};
          letter-spacing: 1px;
        }
        .architecture-legend-text {
          fill: var(--arch-muted);
          font-size: ${TYPE_SCALE.legend.fontSize}px;
          font-weight: ${TYPE_SCALE.legend.fontWeight};
        }

        .architecture-inspector {
          width: min(340px, calc(100% - 32px));
          max-height: calc(100% - 32px);
          padding: 17px;
          overflow: auto;
          position: absolute;
          top: 16px;
          right: 16px;
          z-index: 6;
          background: color-mix(in srgb, var(--arch-surface) 96%, transparent);
          border: 1px solid var(--arch-border-strong);
          border-radius: 16px;
          box-shadow: 0 18px 48px rgba(23, 35, 58, 0.18);
          backdrop-filter: blur(12px);
        }
        .architecture-inspector-heading {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
        }
        .architecture-eyebrow {
          display: block;
          margin-bottom: 4px;
          color: var(--arch-faint);
          font-size: 8px;
          font-weight: 800;
          letter-spacing: 0.14em;
        }
        .architecture-inspector h3 {
          margin: 0;
          color: var(--arch-text);
          font-size: 17px;
          line-height: 1.2;
          letter-spacing: -0.025em;
        }
        .architecture-inspector h4 {
          margin: 16px 0 8px;
          color: var(--arch-text);
          font-size: 9px;
          font-weight: 850;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }
        .architecture-close {
          width: 27px;
          height: 27px;
          flex: none;
          display: grid;
          place-items: center;
          color: var(--arch-muted);
          background: var(--arch-canvas);
          border: 1px solid var(--arch-border);
          border-radius: 8px;
          cursor: pointer;
          font-size: 17px;
          line-height: 1;
        }
        .architecture-surface {
          width: fit-content;
          margin-top: 9px;
          padding: 4px 7px;
          display: block;
          color: var(--arch-internal);
          background: color-mix(in srgb, var(--arch-internal) 10%, transparent);
          border: 1px solid color-mix(in srgb, var(--arch-internal) 30%, var(--arch-border));
          border-radius: 999px;
          font-size: 7px;
          font-weight: 800;
          letter-spacing: 0.05em;
          text-transform: uppercase;
        }
        .architecture-surface.is-public {
          color: var(--arch-public);
          background: color-mix(in srgb, var(--arch-public) 10%, transparent);
          border-color: color-mix(in srgb, var(--arch-public) 30%, var(--arch-border));
        }
        .architecture-surface.is-paired-execution {
          color: var(--arch-sandbox);
          background: color-mix(in srgb, var(--arch-sandbox) 10%, transparent);
          border-color: color-mix(in srgb, var(--arch-sandbox) 30%, var(--arch-border));
        }
        .architecture-inspector-description {
          margin: 8px 0 0;
          color: var(--arch-muted);
          font-size: 11px;
          line-height: 1.5;
        }
        .architecture-resource-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        .architecture-resource-chip {
          padding: 6px 8px;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          color: var(--arch-text);
          background: var(--arch-canvas);
          border: 1px solid var(--arch-border);
          border-radius: 9px;
          font-size: 9px;
          font-weight: 650;
        }
        .architecture-resource-chip svg {
          width: 15px;
          height: 15px;
          color: var(--arch-public);
        }
        .architecture-connections {
          margin-top: 17px;
          padding-top: 13px;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          border-top: 1px solid var(--arch-border);
        }
        .architecture-connections h4 { margin: 0 0 7px; }
        .architecture-connection-list { display: grid; gap: 4px; }
        .architecture-connection {
          width: 100%;
          min-width: 0;
          padding: 5px 0;
          display: grid;
          grid-template-columns: 18px minmax(0, 1fr);
          gap: 6px;
          align-items: start;
          color: var(--arch-text);
          background: transparent;
          border: 0;
          text-align: left;
          cursor: pointer;
        }
        .architecture-connection:hover strong { text-decoration: underline; }
        .architecture-connection-line {
          width: 18px;
          height: 2px;
          margin-top: 8px;
          border-radius: 99px;
        }
        .architecture-connection > span:last-child {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 1px;
        }
        .architecture-connection small {
          font-size: 7px;
          font-weight: 800;
          letter-spacing: 0.04em;
          text-transform: uppercase;
        }
        .architecture-connection strong {
          overflow: hidden;
          color: var(--arch-text);
          font-size: 9px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .architecture-empty {
          margin: 0;
          color: var(--arch-muted);
          font-size: 9px;
          line-height: 1.4;
        }

        @container architecture-explorer (max-width: 900px) {
          .architecture-inspector {
            width: auto;
            max-height: none;
            margin: 12px;
            position: relative;
            inset: auto;
          }
        }

        @media (max-width: 700px) {
          .architecture-explorer { border-radius: 17px; }
          .architecture-toolbar {
            padding: 11px;
            grid-template-columns: minmax(0, 1fr);
          }
          .architecture-search-wrap { grid-row: 2; }
          .architecture-inspector { padding: 14px; }
          .architecture-connections { grid-template-columns: minmax(0, 1fr); }
        }

        @media (prefers-reduced-motion: reduce) {
          .architecture-explorer * { transition: none !important; }
        }
      `}</style>

      <header className="architecture-toolbar">
        <div className="architecture-brand">
          <span className="architecture-brand-mark" aria-hidden="true">MKA1</span>
          <span className="architecture-brand-copy">
            <strong>Architecture explorer</strong>
            <span>Layered service map</span>
          </span>
        </div>

        <div className="architecture-search-wrap">
          <span className="architecture-search-icon" aria-hidden="true">⌕</span>
          <input className="architecture-search" value={query} onChange={event => setQuery(event.target.value)} onKeyDown={event => {
    if (event.key === "Enter" && searchResults.length) {
      openSearchResult(searchResults[0].id);
    }
    if (event.key === "Escape") setQuery("");
  }} placeholder="Jump to a service or resource…" aria-label="Search services and generic resources" aria-expanded={Boolean(normalizedQuery)} />
          {query && <button type="button" className="architecture-search-clear" onClick={() => setQuery("")} aria-label="Clear search">
              ×
            </button>}
          {normalizedQuery && <div className="architecture-search-results" role="listbox">
              {searchResults.length ? searchResults.map(service => <button type="button" className="architecture-search-result" key={service.id} onClick={() => openSearchResult(service.id)} role="option">
                    <strong>{service.label}</strong>
                    <span>{BAND_LAYOUT[service.band].label}</span>
                    <span>{service.descriptor}</span>
                    <em aria-hidden="true">↗</em>
                  </button>) : <p className="architecture-search-empty">No matching service or resource.</p>}
            </div>}
        </div>
      </header>

      <div className="architecture-stage">
        <div className="architecture-map-scroll">
          <svg className="architecture-canvas" viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} preserveAspectRatio="xMidYMin meet" role="img" aria-labelledby="architecture-map-title architecture-map-description">
            <title id="architecture-map-title">MKA1 layered service architecture</title>
            <desc id="architecture-map-description">
              Clients enter through Kong, then reach product services, platform services,
              and shared data infrastructure. Hover or focus a card to highlight its connections.
            </desc>

            <defs>
              {[["arch-arrow-public", "var(--arch-public)"], ["arch-arrow-internal", "var(--arch-internal)"], ["arch-arrow-sandbox", "var(--arch-sandbox)"], ["arch-arrow-serving", "var(--arch-serving)"], ["arch-arrow-audit", "var(--arch-audit)"]].map(([id, color]) => <marker key={id} id={id} markerWidth="9" markerHeight="9" refX="7.5" refY="4.5" orient="auto" markerUnits="strokeWidth">
                  <path d="M0,0 L9,4.5 L0,9 Z" fill={color} />
                </marker>)}
            </defs>

            <rect width={VIEW_WIDTH} height={VIEW_HEIGHT} fill="var(--arch-canvas)" />
            {Object.entries(BAND_LAYOUT).map(([band, layout]) => <rect className="architecture-band" key={band} x={SIDE} y={layout.y} width={VIEW_WIDTH - SIDE * 2} height={layout.height} rx="17" fill={BAND_COLORS[band]} />)}

            <g aria-label="Resource dependency connections">
              {RESOURCE_EDGES.map(edge => {
    const isConnected = !selectedId || edge.from === selectedId || edge.to === selectedId;
    return <path className="architecture-edge" key={`${edge.from}-${edge.to}-${edge.resourceKind}`} d={getEdgePath(edge)} stroke="var(--arch-resource)" strokeWidth="1.2" strokeDasharray="4 7" opacity={selectedId ? isConnected ? 0.9 : 0.035 : 0.16} />;
  })}
            </g>

            <g aria-label="Service connections">
              {EDGES.map(edge => {
    const presentation = getEdgePresentation(edge);
    const isConnected = !selectedId || edge.from === selectedId || edge.to === selectedId;
    const isPair = edge.kind === "pair";
    return <path className="architecture-edge" key={`${edge.from}-${edge.to}-${edge.kind}`} d={getEdgePath(edge)} stroke={presentation.color} strokeWidth={isPair ? 3.6 : edge.kind === "audit" ? 2.3 : 1.9} strokeDasharray={edge.kind === "audit" ? "8 6" : undefined} markerEnd={`url(#${presentation.marker})`} opacity={isConnected ? 0.95 : 0.06} />;
  })}
            </g>

            <g aria-label="Architecture layer labels" pointerEvents="none">
              {Object.entries(BAND_LAYOUT).map(([band, layout]) => <g key={band}>
                  <rect x={SIDE + 10} y={layout.y + 7} width={estimateTextWidth(layout.label, TYPE_SCALE.bandLabel) + 28} height="25" rx="6" fill={BAND_COLORS[band]} />
                  <text className="architecture-band-label" x={SIDE + 18} y={layout.y + 24}>
                    {layout.label}
                  </text>
                </g>)}
            </g>

            <g aria-label="Architecture services and clients">
              {SERVICES.map(service => {
    const box = getCardBox(service);
    const isSelected = selectedId === service.id;
    const isConnected = !selectedId || connectedIds.has(service.id);
    const textLayout = CARD_TEXT_LAYOUT[service.band];
    const titleType = TYPE_SCALE[textLayout.titleType];
    const descriptorType = TYPE_SCALE[textLayout.descriptorType];
    const maxTextWidth = box.width - textLayout.paddingX * 2;
    const titleLines = wrapText(service.label, maxTextWidth, titleType);
    const descriptorLines = wrapText(service.descriptor, maxTextWidth, descriptorType);
    const titleY = box.y + textLayout.titleBaseline;
    const descriptorY = titleY + (titleLines.length - 1) * titleType.lineHeight + textLayout.titleToDescriptor;
    const cardClasses = ["architecture-card", service.band === "data" ? "architecture-data-card" : "", service.band === "edge" ? "architecture-edge-card" : "", service.kind === "public" ? "is-public" : "", service.kind === "internal" ? "is-internal-only" : "", service.kind === "paired-execution" ? "is-paired" : "", service.accent === "sandbox" ? "has-sandbox-accent" : "", service.accent === "serving" ? "has-serving-accent" : "", isSelected ? "is-selected" : ""].filter(Boolean).join(" ");
    return <g className={cardClasses} key={service.id} role="button" tabIndex={0} aria-label={`${service.label}: ${service.descriptor}${pinnedId === service.id ? ", selected" : ""}`} aria-pressed={pinnedId === service.id} onMouseEnter={() => setHoveredId(service.id)} onMouseLeave={() => setHoveredId(null)} onFocus={() => setHoveredId(service.id)} onBlur={() => setHoveredId(null)} onClick={() => selectService(service.id)} onKeyDown={event => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        selectService(service.id);
      }
    }} opacity={isConnected ? 1 : 0.16}>
                    <rect className="architecture-card-shape" x={box.x} y={box.y} width={box.width} height={box.height} rx="13" />
                    {service.accent && <rect x={box.x} y={box.y} width={box.width} height="6" rx="3" fill={ACCENT_COLORS[service.accent]} pointerEvents="none" />}
                    <text className="architecture-card-title" x={box.x + box.width / 2} y={titleY} textAnchor="middle">
                      {titleLines.map((line, index) => <tspan key={`${line}-${index}`} x={box.x + box.width / 2} dy={index === 0 ? 0 : titleType.lineHeight}>
                          {line}
                        </tspan>)}
                    </text>
                    <text className="architecture-card-description" x={box.x + box.width / 2} y={descriptorY} textAnchor="middle">
                      {descriptorLines.map((line, index) => <tspan key={`${line}-${index}`} x={box.x + box.width / 2} dy={index === 0 ? 0 : descriptorType.lineHeight}>
                          {line}
                        </tspan>)}
                    </text>
                  </g>;
  })}
            </g>

            <g aria-label="Compact legend" transform="translate(36 1064)">
              <text className="architecture-legend-title" x="0" y="0">
                LEGEND
              </text>
              <path d="M70 -4 H108" stroke="var(--arch-public)" strokeWidth="2" markerEnd="url(#arch-arrow-public)" />
              <text className="architecture-legend-text" x="120" y="0">Client / API traffic</text>
              <path d="M295 -4 H333" stroke="var(--arch-internal)" strokeWidth="2" markerEnd="url(#arch-arrow-internal)" />
              <text className="architecture-legend-text" x="345" y="0">Internal call</text>
              <path d="M478 -4 H516" stroke="var(--arch-resource)" strokeWidth="1.5" strokeDasharray="4 5" />
              <text className="architecture-legend-text" x="528" y="0">Resource dependency</text>
              <rect x="725" y="-13" width="32" height="16" rx="5" fill="var(--arch-surface)" stroke="var(--arch-internal)" strokeWidth="1.4" strokeDasharray="5 4" />
              <text className="architecture-legend-text" x="769" y="0">Internal-only</text>
              <path d="M910 -4 H948" stroke="var(--arch-sandbox)" strokeWidth="3" markerEnd="url(#arch-arrow-sandbox)" />
              <text className="architecture-legend-text" x="960" y="0">Paired execution</text>
              <path d="M1125 -4 H1163" stroke="var(--arch-audit)" strokeWidth="2" strokeDasharray="7 5" markerEnd="url(#arch-arrow-audit)" />
              <text className="architecture-legend-text" x="1175" y="0">Audit stream</text>
            </g>
          </svg>
        </div>

        {detailPanel()}
      </div>
    </div>;
};

MKA1 is a sovereign AI platform whose public APIs, product services, control planes, and shared state run as one Kubernetes cluster. The map below is layered: clients enter through the Kong edge gateway, the product and platform services sit behind it, and shared data infrastructure underpins them all. Hover or select any service to trace its connections and see the kinds of resources it relies on — databases, caches, object storage, workflows.

<ArchitectureMap />