> ## 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

> Explore how MKA1's capabilities, services, and supporting infrastructure fit 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: "client-repositories",
    label: "Version Control",
    descriptor: "Git · HF Hub · GitHub · OCI",
    band: "clients",
    position: {
      row: 0,
      col: 4
    },
    kind: "public",
    resources: []
  }, {
    id: "kong",
    label: "Kong API Gateway",
    descriptor: "API routing, authentication and audit",
    band: "edge",
    position: {
      row: 0,
      col: 0
    },
    accent: "public",
    kind: "public",
    resources: ["database"],
    details: ["Circuit-breaker control"]
  }, {
    id: "workload-kong",
    label: "Workload Kong",
    descriptor: "Isolated gateway for tenant workloads",
    band: "edge",
    position: {
      row: 0,
      col: 1
    },
    accent: "compute",
    kind: "public",
    resources: ["database"]
  }, {
    id: "sandbox-trusted",
    label: "sandbox-trusted",
    descriptor: "Sandbox API and coding harness broker",
    band: "product",
    position: {
      row: 1,
      col: 0
    },
    accent: "sandbox",
    kind: "public",
    resources: ["database", "objectstore"],
    details: ["sandbox-runner", "Coding harness"]
  }, {
    id: "mka1-agents",
    label: "mka1-agents",
    descriptor: "Agents API, scheduler and connectors",
    band: "product",
    position: {
      row: 0,
      col: 1
    },
    accent: "public",
    kind: "public",
    resources: ["database", "workflows", "webhooks"],
    details: ["Scheduler", "Connector workers"]
  }, {
    id: "mkllm-gateway",
    label: "mkllm-gateway",
    descriptor: "LLM API, chat, files and retrieval",
    band: "product",
    position: {
      row: 1,
      col: 1
    },
    accent: "public",
    kind: "public",
    resources: ["database", "cache", "objectstore", "workflows", "pubsub"],
    details: ["LLM async workers", "mka1-livekit voice media"]
  }, {
    id: "mka1-platform",
    label: "mka1-platform",
    descriptor: "Web console and account workspace",
    band: "product",
    position: {
      row: 1,
      col: 2
    },
    accent: "public",
    kind: "public",
    resources: ["objectstore", "webhooks"]
  }, {
    id: "mka1-compute",
    label: "mka1-compute",
    descriptor: "Tenant CPU/GPU jobs and services",
    band: "product",
    position: {
      row: 0,
      col: 2
    },
    accent: "compute",
    kind: "public",
    resources: ["database"]
  }, {
    id: "mka1-realtime",
    label: "mka1-realtime",
    descriptor: "Realtime and WebRTC API",
    band: "product",
    position: {
      row: 1,
      col: 4
    },
    accent: "public",
    kind: "public",
    resources: ["objectstore", "pubsub"]
  }, {
    id: "mka1-tracking",
    label: "mka1-tracking",
    descriptor: "Experiment metrics and artifacts",
    band: "product",
    position: {
      row: 0,
      col: 0
    },
    accent: "public",
    kind: "public",
    resources: []
  }, {
    id: "mka1-repos",
    label: "mka1-repos",
    descriptor: "Git, Hugging Face Hub, GitHub API and OCI",
    band: "product",
    position: {
      row: 0,
      col: 4
    },
    accent: "public",
    kind: "public",
    resources: ["database", "objectstore", "git"],
    details: ["Git and LFS proxy", "Repository API", "HF Hub gateway", "GitHub API gateway", "OCI registry"]
  }, {
    id: "mka1-datasets",
    label: "mka1-datasets",
    descriptor: "Generation API and Temporal worker",
    band: "product",
    position: {
      row: 0,
      col: 3
    },
    accent: "public",
    kind: "public",
    resources: ["database", "workflows"]
  }, {
    id: "mka1-academy",
    label: "mka1-academy",
    descriptor: "Courses, progress and certificates",
    band: "product",
    position: {
      row: 1,
      col: 3
    },
    accent: "public",
    kind: "public",
    resources: ["database"]
  }, {
    id: "mka1-budgeting",
    label: "mka1-budgeting",
    descriptor: "Spend ledger and budget gates",
    band: "platform",
    position: {
      row: 0,
      col: 1
    },
    accent: "public",
    kind: "public",
    resources: ["database", "webhooks"]
  }, {
    id: "authorization-service",
    label: "authorization-service",
    descriptor: "Fine-grained authorization control",
    band: "platform",
    position: {
      row: 0,
      col: 0
    },
    accent: "public",
    kind: "public",
    resources: ["authz"]
  }, {
    id: "mka1-audit",
    label: "mka1-audit",
    descriptor: "Append-only audit trail",
    band: "platform",
    position: {
      row: 0,
      col: 5
    },
    accent: "audit",
    kind: "internal",
    resources: ["database", "webhooks"]
  }, {
    id: "mk-authentication",
    label: "mk-authentication",
    descriptor: "Sessions, OAuth and API keys",
    band: "platform",
    position: {
      row: 0,
      col: 3
    },
    accent: "public",
    kind: "public",
    resources: ["database", "cache"]
  }, {
    id: "mka1-analytics",
    label: "mka1-analytics",
    descriptor: "Product analytics and feature flags",
    band: "platform",
    position: {
      row: 0,
      col: 2
    },
    accent: "public",
    kind: "public",
    resources: ["database", "eventstore"],
    details: ["Analytics API and worker", "Feature flags API"]
  }, {
    id: "mka1-dory",
    label: "mka1-dory",
    descriptor: "Data-subject cleanup dispatcher",
    band: "platform",
    position: {
      row: 0,
      col: 4
    },
    kind: "internal",
    resources: ["database", "workflows"]
  }, {
    id: "data-postgres",
    label: "Postgres (CNPG)",
    descriptor: "Per-service databases and queues",
    band: "data",
    position: {
      row: 0,
      col: 0
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-dragonfly",
    label: "Dragonfly / Redis",
    descriptor: "Service 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-mk-search",
    label: "mk-search",
    descriptor: "Vector and graph retrieval",
    band: "data",
    position: {
      row: 0,
      col: 4
    },
    kind: "internal",
    resources: ["cache"]
  }, {
    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: 1,
      col: 1
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-svix",
    label: "Svix",
    descriptor: "Webhook delivery",
    band: "data",
    position: {
      row: 1,
      col: 2
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-observability",
    label: "Observability",
    descriptor: "Telemetry and uptime status",
    band: "data",
    position: {
      row: 1,
      col: 3
    },
    kind: "internal",
    resources: [],
    details: ["SigNoz logs, metrics and traces", "Gatus availability checks"]
  }, {
    id: "data-analytics-clickhouse",
    label: "Analytics ClickHouse",
    descriptor: "Dedicated event store",
    band: "data",
    position: {
      row: 1,
      col: 4
    },
    kind: "internal",
    resources: [],
    details: ["ClickHouse Keeper coordination"]
  }, {
    id: "data-gitea",
    label: "Gitea",
    descriptor: "Git and LFS storage",
    band: "data",
    position: {
      row: 1,
      col: 5
    },
    kind: "internal",
    resources: []
  }, {
    id: "data-mlflow",
    label: "MLflow",
    descriptor: "Private tracking backend",
    band: "data",
    position: {
      row: 1,
      col: 0
    },
    kind: "internal",
    resources: ["database", "objectstore"]
  }];
  const EDGES = [{
    from: "client-developers",
    to: "kong",
    kind: "public"
  }, {
    from: "client-developers",
    to: "workload-kong",
    kind: "public"
  }, {
    from: "client-users",
    to: "kong",
    kind: "public"
  }, {
    from: "client-users",
    to: "workload-kong",
    kind: "public"
  }, {
    from: "client-channels",
    to: "kong",
    kind: "public"
  }, {
    from: "client-operators",
    to: "kong",
    kind: "public"
  }, {
    from: "client-repositories",
    to: "kong",
    kind: "public"
  }, {
    from: "kong",
    to: "sandbox-trusted",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-agents",
    kind: "public"
  }, {
    from: "kong",
    to: "mkllm-gateway",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-platform",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-compute",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-realtime",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-tracking",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-repos",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-datasets",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-academy",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-budgeting",
    kind: "public"
  }, {
    from: "kong",
    to: "authorization-service",
    kind: "public"
  }, {
    from: "kong",
    to: "mk-authentication",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-analytics",
    kind: "public"
  }, {
    from: "kong",
    to: "mka1-audit",
    kind: "audit"
  }, {
    from: "mka1-agents",
    to: "mkllm-gateway",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "mkllm-gateway",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "mka1-compute",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "mka1-academy",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "sandbox-trusted",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "mka1-budgeting",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "authorization-service",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "data-mk-search",
    kind: "internal"
  }, {
    from: "sandbox-trusted",
    to: "mka1-budgeting",
    kind: "internal"
  }, {
    from: "mka1-platform",
    to: "mk-authentication",
    kind: "internal"
  }, {
    from: "workload-kong",
    to: "mka1-compute",
    kind: "public"
  }, {
    from: "mka1-datasets",
    to: "mka1-compute",
    kind: "internal"
  }, {
    from: "mka1-datasets",
    to: "mka1-repos",
    kind: "internal"
  }, {
    from: "mka1-tracking",
    to: "data-mlflow",
    kind: "internal"
  }, {
    from: "mkllm-gateway",
    to: "mka1-dory",
    kind: "internal"
  }, {
    from: "mka1-dory",
    to: "mk-authentication",
    kind: "internal"
  }, {
    from: "mka1-dory",
    to: "mka1-audit",
    kind: "internal"
  }, {
    from: "mka1-dory",
    to: "mka1-realtime",
    kind: "internal"
  }, {
    from: "mka1-dory",
    to: "data-mk-search",
    kind: "internal"
  }];
  const CLIENT_ROUTES = [{
    from: "client-channels",
    via: "kong",
    to: "mka1-agents"
  }, {
    from: "client-repositories",
    via: "kong",
    to: "mka1-repos"
  }];
  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"
    },
    eventstore: {
      label: "Analytics events",
      target: "data-analytics-clickhouse"
    }
  };
  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 SIDE = 24;
  const BAND_GAP = 14;
  const LANE_SPACING = 14;
  const LANE_MARGIN = 14;
  const ARROW_RUN = 28;
  const PORT_SPACING = 40;
  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_SPECS = [["clients", {
    label: "CLIENTS",
    cols: 5,
    pad: 20,
    gap: 40,
    rows: 1,
    cardTop: 40,
    cardHeight: 60,
    rowGap: 0,
    bottomPad: 21
  }], ["edge", {
    label: "EDGE · PUBLIC GATEWAYS",
    cols: 2,
    pad: 170,
    gap: 12,
    rows: 1,
    cardTop: 40,
    cardHeight: 50,
    rowGap: 0,
    bottomPad: 12
  }], ["product", {
    label: "PRODUCT SERVICES",
    cols: 5,
    pad: 20,
    gap: 40,
    rows: 2,
    cardTop: 68,
    cardHeight: 88,
    rowGap: 144,
    bottomPad: 35
  }], ["platform", {
    label: "PLATFORM SERVICES",
    cols: 6,
    pad: 20,
    gap: 36,
    rows: 1,
    cardTop: 82,
    cardHeight: 76,
    rowGap: 0,
    bottomPad: 14
  }], ["data", {
    label: "DATA & INFRASTRUCTURE",
    cols: 6,
    pad: 20,
    gap: 36,
    rows: 2,
    cardTop: 40,
    cardHeight: 54,
    rowGap: 110,
    bottomPad: 20
  }]];
  const BAND_LAYOUT = {};
  let nextBandY = 24;
  BAND_SPECS.forEach(([band, spec]) => {
    const height = spec.cardTop + (spec.rows - 1) * spec.rowGap + spec.cardHeight + spec.bottomPad;
    BAND_LAYOUT[band] = {
      ...spec,
      y: nextBandY,
      height
    };
    nextBandY += height + BAND_GAP;
  });
  const LEGEND_Y = nextBandY + 20;
  const VIEW_HEIGHT = LEGEND_Y + 22;
  const CARD_TEXT_LAYOUT = {
    clients: {
      titleType: "cardTitle",
      descriptorType: "cardDescriptor",
      paddingX: 16,
      titleGap: 5
    },
    edge: {
      titleType: "edgeTitle",
      descriptorType: "edgeDescriptor",
      paddingX: 20,
      titleGap: 3
    },
    product: {
      titleType: "cardTitle",
      descriptorType: "cardDescriptor",
      paddingX: 12,
      titleGap: 7
    },
    platform: {
      titleType: "cardTitle",
      descriptorType: "cardDescriptor",
      paddingX: 12,
      titleGap: 7
    },
    data: {
      titleType: "chipTitle",
      descriptorType: "chipDescriptor",
      paddingX: 12,
      titleGap: 5
    }
  };
  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)",
    compute: "var(--arch-compute)",
    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"
    },
    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, ...service.details || [], ...resourceLabels].join(" ").toLowerCase().includes(normalizedQuery);
  }).slice(0, 8) : [];
  const edgeKey = edge => `${edge.from}->${edge.to}:${edge.kind}`;
  const activeEdgeKeys = new Set();
  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);
        activeEdgeKeys.add(edgeKey(edge));
      }
    });
    CLIENT_ROUTES.forEach(route => {
      if (route.from !== selectedId && route.to !== selectedId) return;
      [route.from, route.via, route.to].forEach(id => connectedIds.add(id));
      EDGES.forEach(edge => {
        const firstHop = edge.from === route.from && edge.to === route.via;
        const secondHop = edge.from === route.via && edge.to === route.to;
        if (firstHop || secondHop) activeEdgeKeys.add(edgeKey(edge));
      });
    });
  }
  const rowCounts = SERVICES.reduce((counts, service) => {
    const key = `${service.band}:${service.position.row}`;
    counts[key] = (counts[key] || 0) + 1;
    return counts;
  }, {});
  const getCardBox = service => {
    const layout = BAND_LAYOUT[service.band];
    const usableWidth = VIEW_WIDTH - 2 * SIDE - 2 * layout.pad;
    const slotWidth = (usableWidth - layout.gap * (layout.cols - 1)) / layout.cols;
    const rowCount = rowCounts[`${service.band}:${service.position.row}`];
    const rowInset = (layout.cols - rowCount) * (slotWidth + layout.gap) / 2;
    return {
      x: SIDE + layout.pad + rowInset + service.position.col * (slotWidth + layout.gap),
      y: layout.y + layout.cardTop + service.position.row * layout.rowGap,
      width: slotWidth,
      height: 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 => EDGE_META[edge.kind];
  const ROW_KEYS = [["clients", 0], ["edge", 0], ["product", 0], ["product", 1], ["platform", 0], ["data", 0], ["data", 1]];
  const boxById = SERVICES.reduce((index, service) => {
    index[service.id] = getCardBox(service);
    return index;
  }, {});
  const rowOf = id => ROW_KEYS.findIndex(([band, row]) => band === serviceById[id].band && row === serviceById[id].position.row);
  const rowBoxes = ROW_KEYS.map(([band, row]) => SERVICES.filter(service => service.band === band && service.position.row === row).map(service => boxById[service.id]));
  const rowTop = row => Math.min(...rowBoxes[row].map(box => box.y));
  const rowBottom = row => Math.max(...rowBoxes[row].map(box => box.y + box.height));
  const centerX = id => boxById[id].x + boxById[id].width / 2;
  const rowGutters = row => {
    const spans = rowBoxes[row].map(box => [box.x, box.x + box.width]).sort((a, b) => a[0] - b[0]);
    const gutters = [];
    for (let index = 1; index < spans.length; index += 1) {
      const from = spans[index - 1][1];
      const to = spans[index][0];
      if (to - from >= 2 * LANE_SPACING) gutters.push((from + to) / 2);
    }
    return gutters;
  };
  const channelLabelZone = channel => {
    const [band, row] = ROW_KEYS[channel + 1];
    if (row !== 0) return null;
    const layout = BAND_LAYOUT[band];
    return {
      left: SIDE + 10,
      right: SIDE + 10 + estimateTextWidth(layout.label, TYPE_SCALE.bandLabel) + 28,
      top: layout.y + 7,
      bottom: layout.y + 32
    };
  };
  const trees = [];
  const sideEdges = [];
  EDGES.forEach(edge => {
    const step = Math.sign(rowOf(edge.to) - rowOf(edge.from));
    if (step === 0) {
      sideEdges.push(edge);
      return;
    }
    const sink = serviceById[edge.to].band === "edge";
    const key = sink ? `into:${edge.to}:${edge.kind}` : `from:${edge.from}:${edge.kind}:${step}`;
    let tree = trees.find(candidate => candidate.key === key);
    if (!tree) {
      tree = {
        key,
        sink,
        kind: edge.kind,
        hub: sink ? edge.to : edge.from,
        step: sink ? -step : step,
        leaves: [],
        gutter: {},
        trunkX: {},
        lanes: {}
      };
      trees.push(tree);
    }
    tree.leaves.push({
      id: sink ? edge.from : edge.to,
      edge
    });
  });
  trees.forEach(tree => {
    const hubRow = rowOf(tree.hub);
    const deepest = tree.leaves.reduce((far, leaf) => Math.abs(rowOf(leaf.id) - hubRow) > Math.abs(far - hubRow) ? rowOf(leaf.id) : far, hubRow);
    let x = centerX(tree.hub);
    for (let row = hubRow + tree.step; row !== deepest; row += tree.step) {
      const gutters = rowGutters(row);
      const nearest = gutters.reduce((best, gutter) => Math.abs(gutter - x) < Math.abs(best - x) ? gutter : best);
      tree.gutter[row] = nearest;
      x = nearest;
    }
  });
  ROW_KEYS.forEach((_, row) => {
    const users = trees.filter(tree => tree.gutter[row] !== undefined);
    const byGutter = {};
    users.forEach(tree => {
      byGutter[tree.gutter[row]] = byGutter[tree.gutter[row]] || [];
      byGutter[tree.gutter[row]].push(tree);
    });
    Object.values(byGutter).forEach(group => {
      const heading = tree => tree.leaves.reduce((sum, leaf) => sum + centerX(leaf.id), 0) / tree.leaves.length;
      group.sort((a, b) => heading(a) - heading(b) || a.key.localeCompare(b.key)).forEach((tree, index) => {
        tree.trunkX[row] = tree.gutter[row] + (index - (group.length - 1) / 2) * LANE_SPACING;
      });
    });
  });
  const attachments = {};
  const attach = (id, side, entry) => {
    const key = `${id}:${side}`;
    attachments[key] = attachments[key] || [];
    attachments[key].push(entry);
  };
  trees.forEach(tree => {
    const hubRow = rowOf(tree.hub);
    const hubSide = tree.step > 0 ? "bottom" : "top";
    const leafSide = tree.step > 0 ? "top" : "bottom";
    const firstTrunk = tree.trunkX[hubRow + tree.step];
    const leafMean = tree.leaves.reduce((sum, leaf) => sum + centerX(leaf.id), 0) / tree.leaves.length;
    attach(tree.hub, hubSide, {
      tree,
      role: "hub",
      prefer: firstTrunk !== undefined ? firstTrunk : leafMean,
      fixed: firstTrunk,
      center: tree.sink
    });
    tree.leaves.forEach(leaf => {
      const arrivesFrom = tree.trunkX[rowOf(leaf.id) - tree.step];
      attach(leaf.id, leafSide, {
        tree,
        leaf,
        role: "leaf",
        prefer: arrivesFrom !== undefined ? arrivesFrom : centerX(tree.hub),
        center: tree.sink || tree.kind === "public"
      });
    });
  });
  const clampToCard = (id, x) => {
    const box = boxById[id];
    return Math.min(box.x + box.width - 18, Math.max(box.x + 18, x));
  };
  Object.entries(attachments).forEach(([key, entries]) => {
    const id = key.slice(0, key.lastIndexOf(":"));
    const center = centerX(id);
    const taken = [];
    const place = (entry, x) => {
      entry.x = clampToCard(id, x);
      taken.push(entry.x);
    };
    const isFree = x => taken.every(other => Math.abs(other - x) >= PORT_SPACING - 4);
    entries.filter(entry => entry.fixed !== undefined).forEach(entry => {
      const inside = entry.fixed >= boxById[id].x + 18 && entry.fixed <= boxById[id].x + boxById[id].width - 18;
      place(entry, inside ? entry.fixed : entry.prefer);
    });
    const centered = entries.filter(entry => entry.x === undefined && entry.center);
    if (centered.length && isFree(center)) place(centered.shift(), center);
    const rest = [...centered, ...entries.filter(entry => entry.x === undefined && !entry.center)];
    rest.sort((a, b) => Math.abs(a.prefer - center) - Math.abs(b.prefer - center)).forEach(entry => {
      const direction = entry.prefer < center - 1 ? -1 : 1;
      for (let slot = 1; slot < 6; slot += 1) {
        const candidate = center + direction * slot * PORT_SPACING;
        if (isFree(candidate)) {
          place(entry, candidate);
          return;
        }
      }
      place(entry, center + direction * PORT_SPACING);
    });
  });
  const portOf = (tree, leaf) => {
    const side = leaf ? `${leaf.id}:${tree.step > 0 ? "top" : "bottom"}` : `${tree.hub}:${tree.step > 0 ? "bottom" : "top"}`;
    return attachments[side].find(entry => entry.tree === tree && (leaf ? entry.leaf === leaf : entry.role === "hub")).x;
  };
  trees.forEach(tree => {
    if (tree.leaves.length !== 1) return;
    const [leaf] = tree.leaves;
    if (Math.abs(rowOf(leaf.id) - rowOf(tree.hub)) !== 1) return;
    const hubEntry = attachments[`${tree.hub}:${tree.step > 0 ? "bottom" : "top"}`].find(entry => entry.tree === tree);
    const leafEntry = attachments[`${leaf.id}:${tree.step > 0 ? "top" : "bottom"}`].find(entry => entry.tree === tree);
    const hubBox = boxById[tree.hub];
    const reachable = leafEntry.x >= hubBox.x + 18 && leafEntry.x <= hubBox.x + hubBox.width - 18;
    const siblings = attachments[`${tree.hub}:${tree.step > 0 ? "bottom" : "top"}`].filter(entry => entry !== hubEntry);
    if (reachable && siblings.every(entry => Math.abs(entry.x - leafEntry.x) >= PORT_SPACING - 4)) {
      hubEntry.x = leafEntry.x;
    }
  });
  const channelSegments = {};
  trees.forEach(tree => {
    const hubRow = rowOf(tree.hub);
    const hubX = portOf(tree);
    const deepestRow = tree.leaves.reduce((far, leaf) => Math.abs(rowOf(leaf.id) - hubRow) > Math.abs(far - hubRow) ? rowOf(leaf.id) : far, hubRow);
    let entryX = hubX;
    for (let row = hubRow; row !== deepestRow; row += tree.step) {
      const next = row + tree.step;
      const channel = tree.step > 0 ? row : next;
      const exits = tree.leaves.filter(leaf => rowOf(leaf.id) === next).map(leaf => portOf(tree, leaf));
      if (tree.trunkX[next] !== undefined) exits.push(tree.trunkX[next]);
      const xs = [entryX, ...exits];
      const from = Math.min(...xs);
      const to = Math.max(...xs);
      if (to - from > 0.5) {
        channelSegments[channel] = channelSegments[channel] || [];
        channelSegments[channel].push({
          tree,
          from,
          to,
          upXs: tree.step > 0 ? [entryX] : exits,
          downXs: tree.step > 0 ? exits : [entryX],
          arrowsUp: !tree.sink && tree.step < 0,
          anchor: tree.sink || (tree.step > 0 ? channel === hubRow : channel !== hubRow - 1) ? "top" : "bottom"
        });
      }
      entryX = tree.trunkX[next] !== undefined ? tree.trunkX[next] : entryX;
    }
  });
  Object.entries(channelSegments).forEach(([channelKey, segments]) => {
    const channel = Number(channelKey);
    const zone = channelLabelZone(channel);
    const underLabel = x => zone && x >= zone.left - 8 && x <= zone.right + 8;
    const regions = zone ? [{
      top: rowBottom(channel) + LANE_MARGIN,
      bottom: BAND_LAYOUT[ROW_KEYS[channel + 1][0]].y - BAND_GAP / 2,
      fits: segment => !segment.downXs.some(underLabel)
    }, {
      top: zone.bottom + 8,
      bottom: rowTop(channel + 1) - ARROW_RUN,
      fits: () => true
    }] : [{
      top: rowBottom(channel) + LANE_MARGIN,
      bottom: rowTop(channel + 1) - ARROW_RUN,
      fits: () => true
    }];
    const stack = group => {
      const lanes = [];
      group.sort((a, b) => a.from - b.from).forEach(segment => {
        let lane = lanes.findIndex(members => members.every(other => segment.from > other.to + 10 || segment.to < other.from - 10));
        if (lane === -1) {
          lanes.push([]);
          lane = lanes.length - 1;
        }
        lanes[lane].push(segment);
        segment.lane = lane;
      });
    };
    regions.forEach((region, index) => {
      const members = segments.filter(segment => segment.region === undefined && region.fits(segment));
      members.forEach(segment => {
        segment.region = index;
      });
      const fromTop = members.filter(segment => segment.anchor === "top");
      const fromBottom = members.filter(segment => segment.anchor === "bottom");
      stack(fromTop);
      stack(fromBottom);
      fromTop.forEach(segment => {
        const y = region.top + segment.lane * LANE_SPACING;
        segment.tree.lanes[channel] = segment.arrowsUp ? Math.max(y, rowBottom(channel) + ARROW_RUN) : y;
      });
      fromBottom.forEach(segment => {
        const y = region.bottom - segment.lane * LANE_SPACING;
        segment.tree.lanes[channel] = segment.arrowsUp ? Math.max(y, rowBottom(channel) + ARROW_RUN) : y;
      });
    });
  });
  const treePoints = (tree, leaf) => {
    const hubRow = rowOf(tree.hub);
    const leafRow = rowOf(leaf.id);
    const hubBox = boxById[tree.hub];
    const leafBox = boxById[leaf.id];
    let x = portOf(tree);
    const points = [[x, tree.step > 0 ? hubBox.y + hubBox.height : hubBox.y]];
    for (let row = hubRow; row !== leafRow; row += tree.step) {
      const next = row + tree.step;
      const channel = tree.step > 0 ? row : next;
      const targetX = next === leafRow ? portOf(tree, leaf) : tree.trunkX[next];
      if (Math.abs(targetX - x) > 0.5) {
        points.push([x, tree.lanes[channel]], [targetX, tree.lanes[channel]]);
        x = targetX;
      }
    }
    points.push([x, tree.step > 0 ? leafBox.y : leafBox.y + leafBox.height]);
    return tree.sink ? points.reverse() : points;
  };
  const sidePoints = edge => {
    const fromBox = boxById[edge.from];
    const toBox = boxById[edge.to];
    const y = fromBox.y + fromBox.height / 2;
    return fromBox.x < toBox.x ? [[fromBox.x + fromBox.width, y], [toBox.x, y]] : [[fromBox.x, y], [toBox.x + toBox.width, y]];
  };
  const toPath = points => points.map(([x, y], index) => `${index ? "L" : "M"} ${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
  const edgePaths = {};
  trees.forEach(tree => tree.leaves.forEach(leaf => {
    edgePaths[edgeKey(leaf.edge)] = toPath(treePoints(tree, leaf));
  }));
  sideEdges.forEach(edge => {
    edgePaths[edgeKey(edge)] = toPath(sidePoints(edge));
  });
  const getResourcePath = edge => {
    const fromBox = boxById[edge.from];
    const toBox = boxById[edge.to];
    const fromX = fromBox.x + fromBox.width / 2;
    const toX = toBox.x + toBox.width / 2;
    const startY = fromBox.y + fromBox.height;
    const endY = toBox.y;
    const middleY = startY + (endY - startY) / 2;
    return `M ${fromX} ${startY} V ${middleY} H ${toX} V ${endY}`;
  };
  const resourceEdgeElement = (edge, opacity) => <path className="architecture-edge" key={`${edgeKey(edge)}${opacity ? ":active" : ""}`} d={getResourcePath(edge)} stroke="var(--arch-resource)" strokeWidth="1.2" strokeDasharray="4 7" opacity={opacity} />;
  const serviceEdgeElement = (edge, opacity) => {
    const presentation = getEdgePresentation(edge);
    return <path className="architecture-edge" key={`${edgeKey(edge)}${opacity ? ":active" : ""}`} d={edgePaths[edgeKey(edge)]} stroke={presentation.color} strokeWidth={edge.kind === "audit" ? 2.3 : 1.9} strokeDasharray={edge.kind === "audit" ? "8 6" : undefined} markerEnd={`url(#${presentation.marker})`} opacity={opacity} />;
  };
  const resourceIcon = kind => {
    const common = {
      fill: "none",
      stroke: "currentColor",
      strokeWidth: 1.7,
      strokeLinecap: "round",
      strokeLinejoin: "round"
    };
    if (kind === "database" || kind === "eventstore") {
      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}-${edge.via || ""}`} onClick={() => setPinnedId(endpoint.id)}>
                <span className="architecture-connection-line" style={{
      background: presentation.color
    }} />
                <span>
                  <small style={{
      color: presentation.color
    }}>
                    {edge.via ? `${presentation.label} via ${serviceById[edge.via].label}` : 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 routes = CLIENT_ROUTES.map(route => ({
      ...route,
      kind: "public"
    }));
    const incoming = [...EDGES.filter(edge => edge.to === selectedService.id), ...routes.filter(route => route.to === selectedService.id)];
    const outgoing = [...EDGES.filter(edge => edge.from === selectedService.id), ...routes.filter(route => route.from === selectedService.id)];
    const surfaceLabel = selectedService.kind === "public" ? "Public surface" : "Internal only";
    return <aside className={["architecture-inspector", centerX(selectedService.id) > VIEW_WIDTH / 2 ? "is-left" : "", pinnedId ? "" : "is-preview"].filter(Boolean).join(" ")} 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">
              <svg viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2.5 2.5l7 7M9.5 2.5l-7 7" />
              </svg>
            </button>}
        </div>
        <span className={`architecture-surface is-${selectedService.kind}`}>
          {surfaceLabel}
        </span>
        <p className="architecture-inspector-description">
          {selectedService.descriptor}
        </p>

        {selectedService.details?.length > 0 && <>
            <h4>Included components</h4>
            <div className="architecture-resource-chips">
              {selectedService.details.map(detail => <span className="architecture-resource-chip" key={detail}>{detail}</span>)}
            </div>
          </>}

        <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-compute: #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-compute: #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;
          background: #fff url("/logo/meetkai.png") 50% 50% / 26px auto no-repeat;
          border: 1px solid var(--arch-border);
          border-radius: 11px;
          box-shadow: 0 6px 16px rgba(15, 27, 45, 0.12);
        }
        .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.has-sandbox-accent .architecture-card-shape {
          stroke: var(--arch-sandbox);
        }
        .architecture-card.has-compute-accent .architecture-card-shape {
          stroke: var(--arch-compute);
        }
        .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.is-left {
          right: auto;
          left: 16px;
        }
        .architecture-inspector.is-preview {
          pointer-events: none;
        }
        .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;
        }
        .architecture-close svg {
          width: 11px;
          height: 11px;
          display: block;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.7;
          stroke-linecap: round;
        }
        .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-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,
          .architecture-inspector.is-left {
            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" />
          <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 use the API or workload gateway to reach grouped services and shared
              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-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">
              <g opacity={selectedId ? 0.035 : 0.06}>
                {RESOURCE_EDGES.map(edge => resourceEdgeElement(edge))}
              </g>
              {RESOURCE_EDGES.filter(edge => activeEdgeKeys.has(edgeKey(edge))).map(edge => resourceEdgeElement(edge, 0.9))}
            </g>

            <g aria-label="Service connections">
              <g opacity={selectedId ? 0.06 : 0.22}>
                {EDGES.map(edge => serviceEdgeElement(edge))}
              </g>
              {EDGES.filter(edge => activeEdgeKeys.has(edgeKey(edge))).map(edge => serviceEdgeElement(edge, 0.95))}
            </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 = boxById[service.id];
    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 titleHeight = titleLines.length * titleType.lineHeight;
    const blockHeight = titleHeight + textLayout.titleGap + descriptorLines.length * descriptorType.lineHeight;
    const blockTop = box.y + (box.height - blockHeight) / 2 + (service.accent ? 3 : 0);
    const firstBaseline = type => type.lineHeight / 2 + type.fontSize * 0.36;
    const titleY = blockTop + firstBaseline(titleType);
    const descriptorY = blockTop + titleHeight + textLayout.titleGap + firstBaseline(descriptorType);
    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.accent === "sandbox" ? "has-sandbox-accent" : "", service.accent === "compute" ? "has-compute-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 && <>
                        <clipPath id={`arch-card-clip-${service.id}`}>
                          <rect x={box.x} y={box.y} width={box.width} height={box.height} rx="13" />
                        </clipPath>
                        <rect x={box.x} y={box.y} width={box.width} height="5" fill={ACCENT_COLORS[service.accent]} clipPath={`url(#arch-card-clip-${service.id})`} 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 ${LEGEND_Y})`}>
              <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="M920 -4 H958" stroke="var(--arch-audit)" strokeWidth="2" strokeDasharray="7 5" markerEnd="url(#arch-arrow-audit)" />
              <text className="architecture-legend-text" x="970" 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 on Kubernetes. The map below is layered: clients enter through the Kong edge gateways, the product and platform services sit behind them, 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, such as databases, caches, object storage, and workflows.

<ArchitectureMap />

<Note>
  The Helm deployment is modular. You can enable the services your installation needs.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.