@arcote.tech/arc-map 0.7.28 → 0.7.30

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-map",
   "type": "module",
-  "version": "0.7.28",
+  "version": "0.7.30",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Arc Context Map — interactive map of context spaces, elements, event-flow and React useScope usages (dev tool)",
@@ -19,13 +19,11 @@
     "ts-morph": "^24.0.0",
     "@xyflow/react": "^12.0.0",
     "elkjs": "^0.9.3",
-    "@mdx-js/mdx": "^3.1.0",
-    "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^4.0.0"
+    "@arcote.tech/arc-process": "^0.7.30"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.28",
-    "@arcote.tech/platform": "^0.7.28",
+    "@arcote.tech/arc": "^0.7.30",
+    "@arcote.tech/platform": "^0.7.30",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "typescript": "^5.0.0"

package/src/app/nodes.tsx

@@ -4,17 +4,6 @@
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import type { MapComponent, MapElement } from "../types";
 import { COMPONENT_COLOR, ELEMENT_COLOR, GLASS } from "./theme";
-import { useExpand, useFocus } from "./contexts";
-import type { RelKind, StepNode as StepModel } from "./usecase-model";
-
-const REL_LABEL: Record<RelKind, string> = {
-  queries: "czyta",
-  mutates: "mutuje",
-  mutatedBy: "mutowane przez",
-  queriedBy: "czytane przez",
-  handledBy: "obsługiwane przez",
-  usedByUI: "UI",
-};
 
 const KIND_ICON: Record<string, string> = {
   aggregate: "◆",
@@ -235,244 +224,8 @@ export function ComponentNode({ data, selected }: NodeProps) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Use-case data-flow nodes
-// ---------------------------------------------------------------------------
-
-/** A narrated `<Arc>` step on the backbone — with badges per relation kind. */
-export function StepNode({ data }: NodeProps) {
-  const step = (data as { step: StepModel }).step;
-  const expandedKinds = (data as { expanded: RelKind[] }).expanded ?? [];
-  const { toggle } = useExpand();
-  const { focusNodeId } = useFocus();
-  const el = step.element;
-  const missing = !step.exists;
-  // Keep the declared kind even when the element does not exist yet, so we don't
-  // lose knowledge — colour/label like any other node, just dashed + faded.
-  const kind = (el?.kind ?? (step.ref?.kind as string) ?? "unknown") as keyof typeof ELEMENT_COLOR;
-  const color = ELEMENT_COLOR[kind] ?? ELEMENT_COLOR.unknown;
-  const myId = el?.id ?? step.ref?.nodeId;
-  const dimmed = !!focusNodeId && focusNodeId !== myId;
-  const focused = !!focusNodeId && focusNodeId === myId;
-  const badgeKinds = Object.keys(step.badges) as RelKind[];
-
-  return (
-    <div
-      style={{
-        minWidth: 200,
-        maxWidth: 230,
-        boxSizing: "border-box",
-        borderRadius: 14,
-        // Dashed is reserved for MISSING (not-yet-implemented) elements. Branch
-        // alternatives stay solid — their "alt" nature is shown by the ⋔ badge,
-        // not by a dashed border that reads as "not implemented".
-        border: `1px ${missing ? "dashed" : "solid"} ${color}`,
-        borderLeft: `5px ${missing ? "dashed" : "solid"} ${color}`,
-        background: GLASS.cardStrong,
-        backdropFilter: GLASS.blurSoft,
-        WebkitBackdropFilter: GLASS.blurSoft,
-        padding: "10px 12px",
-        position: "relative",
-        opacity: dimmed ? 0.35 : missing ? 0.7 : 1,
-        boxShadow: focused ? `0 0 0 2px ${color}` : GLASS.shadow,
-        transition: "opacity 120ms ease, box-shadow 120ms ease",
-      }}
-    >
-      <Handle type="target" position={Position.Left} style={{ background: color, border: "none" }} />
-      <Handle type="source" position={Position.Right} style={{ background: color, border: "none" }} />
-      <span
-        style={{
-          position: "absolute",
-          top: -10,
-          left: -10,
-          width: 22,
-          height: 22,
-          borderRadius: 99,
-          background: color,
-          color: "#fff",
-          fontSize: 12,
-          fontWeight: 700,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
-        }}
-      >
-        {step.seq}
-      </span>
-      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-        <span style={{ color, fontSize: 13 }}>{KIND_ICON[kind] ?? "•"}</span>
-        <span style={{ fontWeight: 700, fontSize: 13, color: GLASS.text }}>
-          {step.ref?.nodeId ?? step.label}
-        </span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 2 }}>
-        <span
-          style={{
-            fontSize: 9.5,
-            fontWeight: 600,
-            color,
-            background: tint(color, 0.12),
-            borderRadius: 5,
-            padding: "1px 6px",
-            textTransform: "uppercase",
-            letterSpacing: 0.4,
-          }}
-        >
-          {kind}
-        </span>
-        {step.method ? (
-          <span style={{ fontSize: 11, color: "#3b2a55" }}>
-            ·{step.method.name}
-            <span style={{ color: GLASS.textFaint }}> ({step.method.kind})</span>
-          </span>
-        ) : null}
-      </div>
-      {step.label && step.label !== step.ref?.nodeId ? (
-        <div style={{ fontSize: 11, color: GLASS.textMuted, marginTop: 3 }}>{step.label}</div>
-      ) : null}
-      {step.stepTitle || step.laneTitle || step.alt ? (
-        <div style={{ display: "flex", gap: 5, marginTop: 4, flexWrap: "wrap" }}>
-          {step.stepTitle ? (
-            <span style={{ fontSize: 9, fontWeight: 700, color: "#1c7ed6", background: "rgba(28,126,214,0.1)", borderRadius: 4, padding: "0 5px" }}>
-              ▸ {step.stepTitle}
-            </span>
-          ) : null}
-          {step.alt ? (
-            <span style={{ fontSize: 9, fontWeight: 700, color: "#e64980", background: "rgba(230,73,128,0.1)", borderRadius: 4, padding: "0 5px" }}>
-              ⋔ {step.laneTitle ?? "alt"}
-            </span>
-          ) : step.laneTitle ? (
-            <span style={{ fontSize: 9, fontWeight: 700, color: "#7c3aed", background: "rgba(124,58,237,0.1)", borderRadius: 4, padding: "0 5px" }}>
-              ∥ {step.laneTitle}
-            </span>
-          ) : null}
-        </div>
-      ) : null}
-      {badgeKinds.length ? (
-        <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 7 }}>
-          {badgeKinds.map((k) => {
-            const active = expandedKinds.includes(k);
-            const c = REL_BADGE_COLOR[k];
-            return (
-              <button
-                key={k}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggle(step.occId, k);
-                }}
-                style={{
-                  fontSize: 9.5,
-                  fontWeight: 600,
-                  border: `1px solid ${c}`,
-                  background: active ? c : tint(c, 0.1),
-                  color: active ? "#fff" : c,
-                  borderRadius: 6,
-                  padding: "1px 6px",
-                  cursor: "pointer",
-                }}
-                title={`${REL_LABEL[k]}: ${step.badges[k]!.join(", ")}`}
-              >
-                {relBadgeLabel(k, el?.kind)} {step.badges[k]!.length}
-              </button>
-            );
-          })}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-const REL_BADGE_COLOR: Record<RelKind, string> = {
-  queries: "#2f9e44",
-  mutates: "#e11d48",
-  mutatedBy: "#d97706",
-  queriedBy: "#0ca678",
-  handledBy: "#1c7ed6",
-  usedByUI: "#4263eb",
-};
-
-function relBadgeLabel(k: RelKind, elKind?: string): string {
-  if (k === "mutatedBy" && elKind === "event") return "emitowane przez";
-  return REL_LABEL[k];
-}
-
-/** A dependency element revealed in a left/right column when a badge expands. */
-export function DepNode({ data }: NodeProps) {
-  const el = (data as { element: MapElement }).element;
-  const { focusNodeId } = useFocus();
-  const color = ELEMENT_COLOR[el.kind] ?? "#64748b";
-  const dimmed = !!focusNodeId && focusNodeId !== el.id;
-  const focused = !!focusNodeId && focusNodeId === el.id;
-  return (
-    <div
-      style={{
-        width: 178,
-        boxSizing: "border-box",
-        borderRadius: 10,
-        border: `1px solid ${color}`,
-        borderLeft: `4px solid ${color}`,
-        background: GLASS.card,
-        padding: "6px 9px",
-        opacity: dimmed ? 0.35 : 1,
-        boxShadow: focused ? `0 0 0 2px ${color}` : GLASS.shadow,
-        transition: "opacity 120ms ease",
-      }}
-    >
-      <Handle type="target" position={Position.Left} style={{ background: color, border: "none" }} />
-      <Handle type="source" position={Position.Right} style={{ background: color, border: "none" }} />
-      <div style={{ display: "flex", gap: 5, alignItems: "center" }}>
-        <span style={{ color, fontSize: 11 }}>{KIND_ICON[el.kind] ?? "•"}</span>
-        <span style={{ fontWeight: 600, fontSize: 11.5, color: GLASS.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {el.name}
-        </span>
-      </div>
-      <div style={{ fontSize: 8.5, color, textTransform: "uppercase", letterSpacing: 0.3 }}>{el.kind}</div>
-    </div>
-  );
-}
-
-/** An element on a connecting flow path between two narrated steps. Rendered
- *  exactly like any other element node — no special "connector" marking. */
-export function ConnectorNode({ data }: NodeProps) {
-  const el = (data as { element: MapElement }).element;
-  const { focusNodeId } = useFocus();
-  const color = ELEMENT_COLOR[el.kind] ?? "#64748b";
-  const dimmed = !!focusNodeId && focusNodeId !== el.id;
-  const focused = !!focusNodeId && focusNodeId === el.id;
-  return (
-    <div
-      style={{
-        width: 178,
-        boxSizing: "border-box",
-        borderRadius: 10,
-        border: `1px solid ${color}`,
-        borderLeft: `4px solid ${color}`,
-        background: GLASS.card,
-        padding: "6px 9px",
-        opacity: dimmed ? 0.35 : 1,
-        boxShadow: focused ? `0 0 0 2px ${color}` : GLASS.shadow,
-        transition: "opacity 120ms ease",
-      }}
-    >
-      <Handle type="target" position={Position.Left} style={{ background: color, border: "none" }} />
-      <Handle type="source" position={Position.Right} style={{ background: color, border: "none" }} />
-      <div style={{ display: "flex", gap: 5, alignItems: "center" }}>
-        <span style={{ color, fontSize: 11 }}>{KIND_ICON[el.kind] ?? "•"}</span>
-        <span style={{ fontWeight: 600, fontSize: 11.5, color: GLASS.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {el.name}
-        </span>
-      </div>
-      <div style={{ fontSize: 8.5, color, textTransform: "uppercase", letterSpacing: 0.3 }}>{el.kind}</div>
-    </div>
-  );
-}
-
 export const nodeTypes = {
   space: SpaceNode,
   element: ElementNode,
   component: ComponentNode,
-  step: StepNode,
-  dep: DepNode,
-  connector: ConnectorNode,
 };

package/src/app/theme.ts

@@ -13,6 +13,7 @@ export const ELEMENT_COLOR: Record<ElementKind, string> = {
   listener: "#7048e8", // grape/lilac — policy / reaction
   route: "#e64980", // pink — external boundary
   page: "#4263eb", // indigo — UI / page
+  tool: "#0891b2", // cyan — AI tool (wołany przez LLM)
   unknown: "#868e96", // slate
 };
 

package/src/app/usecase-view.tsx

@@ -1,48 +1,37 @@
 /**
- * Use-case mode: folder tree | MDX prose | data-flow diagram.
+ * Use-case mode: drzewo folderów | ProcessDiagram (proza MDX + diagram).
  *
- * Selecting a use case fetches its raw MDX; rendering collects `<Arc>` refs (one
- * per occurrence, document order). The model builds a horizontal backbone of
- * steps + connectors; per-step badges expand into left/right dependency columns.
- * Hovering a chip highlights its step node and vice-versa.
+ * Wybór use case'a pobiera surowy MDX; render i cały pipeline diagramu
+ * (wystąpienia → model → collapse → layout 8 kierunków) mieszka w
+ * @arcote.tech/arc-process — arc-map dostarcza tylko drzewo, fetch i
+ * profil Arka z grafem mapy (`toProcessGraph`).
  */
 
+import { useEffect, useMemo, useState } from "react";
 import {
-  Background,
-  Controls,
-  MiniMap,
-  ReactFlow,
-  type Node,
-} from "@xyflow/react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { MapElement, MapJson, UseCaseEntry } from "../types";
-import { buildUseCaseModel } from "./usecase-model";
-import { layoutUseCaseModel } from "./usecase-layout";
-import { nodeTypes } from "./nodes";
+  arcProfile,
+  localStorageStore,
+  toProcessGraph,
+  type ProcessNode,
+} from "@arcote.tech/arc-process";
+import { ProcessDiagram, type SourceProvider } from "@arcote.tech/arc-process/react";
+import type { MapJson, UseCaseEntry } from "../types";
 import { UseCaseTree } from "./usecase-tree";
-import { MdxView } from "./mdx-view";
-import { ELEMENT_COLOR, GLASS } from "./theme";
-import {
-  ExpandContext,
-  FocusContext,
-  MapDataContext,
-  type ArcRegEntry,
-} from "./contexts";
-
-function elementIdOf(n: Node): string | undefined {
-  const d = n.data as any;
-  return d?.step?.element?.id ?? d?.element?.id;
-}
+import { GLASS } from "./theme";
+
+/** Kod źródłowy elementu z serwera mapy (`MapElement.source` → /api/source). */
+const sourceProvider: SourceProvider = async (node: ProcessNode) => {
+  const source = (node.meta as { source?: { file: string; line?: number } })
+    ?.source;
+  if (!source?.file) return null;
+  const res = await fetch(`/api/source?file=${encodeURIComponent(source.file)}`);
+  if (!res.ok) return null;
+  return { file: source.file, line: source.line, code: await res.text() };
+};
 
 export function UseCaseView({ map, useCases }: { map: MapJson; useCases: UseCaseEntry[] }) {
   const [selectedId, setSelectedId] = useState<string | null>(useCases[0]?.id ?? null);
   const [mdx, setMdx] = useState<string>("");
-  const [refs, setRefs] = useState<ArcRegEntry[]>([]);
-  const [expanded, setExpanded] = useState<Record<string, string[]>>({});
-  const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
-  const [scrollToKey, setScrollToKey] = useState<string | null>(null);
-
-  const proseRef = useRef<HTMLDivElement>(null);
 
   // Auto-select the first use case once the list loads (list arrives async).
   useEffect(() => {
@@ -52,122 +41,53 @@ export function UseCaseView({ map, useCases }: { map: MapJson; useCases: UseCase
   // Fetch raw MDX on selection.
   useEffect(() => {
     if (!selectedId) return;
-    setRefs([]);
-    setExpanded({});
+    setMdx("");
     fetch(`/api/use-cases/raw?id=${encodeURIComponent(selectedId)}`)
       .then((r) => (r.ok ? r.text() : Promise.reject(new Error(`HTTP ${r.status}`))))
       .then(setMdx)
       .catch((e) => setMdx(`# Błąd\n\nNie udało się wczytać: ${String(e)}`));
   }, [selectedId]);
 
-  // Model from the ordered occurrences (no dedup).
-  const model = useMemo(
-    () =>
-      buildUseCaseModel({
-        map,
-        occurrences: refs.map((r) => ({ occId: r.id, ref: r.ref, label: r.label, path: r.path })),
-      }),
-    [map, refs],
-  );
-
-  const layout = useMemo(
-    () => layoutUseCaseModel({ model, map, expanded: expanded as Record<string, any> }),
-    [model, map, expanded],
-  );
-
-  const toggle = useMemo(
-    () => (occId: string, relKind: string) =>
-      setExpanded((prev) => {
-        const cur = prev[occId] ?? [];
-        const next = cur.includes(relKind) ? cur.filter((k) => k !== relKind) : [...cur, relKind];
-        return { ...prev, [occId]: next };
-      }),
-    [],
-  );
-
-  // occId step click -> scroll prose to its chip.
-  const keyByOcc = useMemo(() => {
-    const m = new Map<string, string>();
-    for (const s of model.steps) if (s.ref) m.set(s.occId, s.ref.key);
-    return m;
-  }, [model]);
-
-  // Highlighting is done inside the node components via FocusContext, so the
-  // `nodes` array identity stays stable on hover (no re-render churn / flicker).
-  const nodes = layout.nodes;
-
-  // Prose scroll on node click.
-  useEffect(() => {
-    if (!scrollToKey || !proseRef.current) return;
-    const el = proseRef.current.querySelector(`[data-arc-key="${CSS.escape(scrollToKey)}"]`);
-    el?.scrollIntoView({ behavior: "smooth", block: "center" });
-    setScrollToKey(null);
-  }, [scrollToKey]);
-
-  const focusState = useMemo(
-    () => ({ focusNodeId, setFocusNodeId, scrollToKey, setScrollToKey }),
-    [focusNodeId, scrollToKey],
-  );
-  const expandState = useMemo(() => ({ expanded, toggle }), [expanded, toggle]);
+  const graph = useMemo(() => toProcessGraph(map), [map]);
+  const store = useMemo(() => localStorageStore("arc-map"), []);
 
   return (
-    <MapDataContext.Provider value={map}>
-      <FocusContext.Provider value={focusState}>
-        <ExpandContext.Provider value={expandState}>
-          <div style={{ display: "grid", gridTemplateColumns: "240px minmax(360px, 1fr) minmax(460px, 1.2fr)", height: "100%" }}>
-            {/* Tree */}
-            <div style={{ borderRight: `1px solid ${GLASS.border}`, overflow: "auto", background: GLASS.card }}>
-              <UseCaseTree useCases={useCases} selectedId={selectedId} onSelect={setSelectedId} />
-            </div>
-
-            {/* Prose */}
-            <div ref={proseRef} style={{ overflow: "auto", padding: "24px 28px", borderRight: `1px solid ${GLASS.border}` }}>
-              {selectedId ? (
-                <MdxView key={selectedId} mdx={mdx} onRefs={setRefs} />
-              ) : (
-                <div style={{ color: GLASS.textMuted }}>Wybierz use-case z drzewa po lewej.</div>
-              )}
-            </div>
-
-            {/* Diagram */}
-            <div style={{ position: "relative" }}>
-              <ReactFlow
-                key={selectedId ?? "none"}
-                nodes={nodes}
-                edges={layout.edges}
-                nodeTypes={nodeTypes}
-                nodesDraggable={false}
-                onNodeMouseEnter={(_, n) => {
-                  const id = elementIdOf(n);
-                  if (id) setFocusNodeId(id);
-                }}
-                onNodeMouseLeave={() => setFocusNodeId(null)}
-                onNodeClick={(_, n) => {
-                  const k = keyByOcc.get(n.id);
-                  if (k) setScrollToKey(k);
-                }}
-                fitView
-                fitViewOptions={{ padding: 0.18 }}
-                minZoom={0.1}
-                proOptions={{ hideAttribution: true }}
-              >
-                <Background color="#c9b8e8" gap={26} size={1.5} />
-                <Controls />
-                <MiniMap
-                  pannable
-                  zoomable
-                  nodeColor={(n) => {
-                    const d = n.data as any;
-                    const k = d?.step?.element?.kind ?? d?.element?.kind;
-                    return (k && ELEMENT_COLOR[k as MapElement["kind"]]) || (d?.step && !d.step.exists ? "#e11d48" : "#64748b");
-                  }}
-                  style={{ background: "rgba(255,255,255,0.6)", border: `1px solid ${GLASS.border}`, borderRadius: 12 }}
-                />
-              </ReactFlow>
-            </div>
-          </div>
-        </ExpandContext.Provider>
-      </FocusContext.Provider>
-    </MapDataContext.Provider>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "240px 1fr",
+        height: "100%",
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
+      {/* Tree */}
+      <div
+        style={{
+          borderRight: `1px solid ${GLASS.border}`,
+          overflow: "auto",
+          minHeight: 0,
+          background: GLASS.card,
+        }}
+      >
+        <UseCaseTree useCases={useCases} selectedId={selectedId} onSelect={setSelectedId} />
+      </div>
+
+      {selectedId && mdx ? (
+        <ProcessDiagram
+          mdx={mdx}
+          profile={arcProfile}
+          graph={graph}
+          store={store}
+          docId={selectedId}
+          title={selectedId}
+          sourceProvider={sourceProvider}
+        />
+      ) : (
+        <div style={{ color: GLASS.textMuted, padding: 24 }}>
+          Wybierz use-case z drzewa po lewej.
+        </div>
+      )}
+    </div>
   );
 }

package/src/index.ts

@@ -13,6 +13,11 @@ export type { ScanInput, ScanResult } from "./scan";
 export { buildModuleIndex } from "./module-index";
 export { discoverUseCases, parseFrontmatter } from "./use-cases/discover";
 export type { UseCasePackage, DiscoveredUseCase } from "./use-cases/discover";
-export { resolveRef } from "./refs";
-export type { ArcRefProps, ResolvedRef, ArcRefKind } from "./refs";
+export {
+  arcProfile,
+  normalizePagePath,
+  resolveArcRef,
+  toProcessGraph,
+} from "@arcote.tech/arc-process";
+export type { ArcRefProps, ResolvedRef } from "@arcote.tech/arc-process";
 export * from "./types";

package/src/mapper.ts

@@ -20,9 +20,11 @@ import {
 } from "@arcote.tech/arc";
 import {
   UNGROUPED_SPACE_ID,
+  type CatalogEntry,
   type ElementKind,
   type MapComponent,
   type MapComponentEdge,
+  type MapContextInfo,
   type MapEdge,
   type MapElement,
   type MapElementMethod,
@@ -46,6 +48,8 @@ export interface BuildMapInput {
   components?: MapComponent[];
   /** Page nodes (from arc `page()` registry), appended as kind `page`. */
   pages?: MapElement[];
+  /** Generyczny katalog deklaracji (arc.catalog.yml) — przechodzi 1:1. */
+  catalog?: CatalogEntry[];
   /** ISO timestamp; injected so the function stays deterministic for tests. */
   generatedAt?: string;
 }
@@ -62,6 +66,9 @@ function detectKind(el: ArcContextElementAny): ElementKind {
   if (el instanceof ArcView) return "view";
   if (el instanceof ArcListener) return "listener";
   if (el instanceof ArcRoute) return "route";
+  // AI tool (arc-ai) — bez instanceof (arc-map nie zależy od arc-ai);
+  // rozpoznanie po rozszerzalnym `types` z ArcFragmentBase.
+  if (typeof el.is === "function" && el.is("tool")) return "tool";
   return "unknown";
 }
 
@@ -144,6 +151,11 @@ function extractElement(
     name: el.name,
     kind,
     spaceId: spaceOf(el, module),
+    contextPath: (el as any).__contextPath,
+    source:
+      typeof (el as any).getSourceLocation === "function"
+        ? (el as any).getSourceLocation()
+        : undefined,
     moduleId: module?.moduleId,
     moduleName: module?.moduleName,
     scope: module?.scope,
@@ -239,6 +251,12 @@ function collectRawEdges(el: ArcContextElementAny, kind: ElementKind): RawEdge[]
   push("queries", depTargets(data.queryElements));
   push("mutates", depTargets(data.mutationElements));
 
+  if (kind === "tool") {
+    // AI tool (arc-ai) — deps przez publiczne gettery, nie `.data`.
+    push("queries", depTargets((el as any).queryElements));
+    push("mutates", depTargets((el as any).mutationElements));
+  }
+
   if (kind === "listener") {
     push("listens", depTargets((el as any).eventElements));
   }
@@ -387,6 +405,66 @@ export function buildMapJson(input: BuildMapInput): MapJson {
     edges,
     components: resolvedComponents,
     componentEdges: resolvedComponentEdges,
+    contexts: collectContexts(context),
+    catalog: input.catalog,
     generatedAt: input.generatedAt,
   };
 }
+
+// ---------------------------------------------------------------------------
+// Drzewo kontekstów
+// ---------------------------------------------------------------------------
+
+/**
+ * Zbierz hierarchię kontekstów dla `MapJson.contexts`:
+ *  (a) z drzewa `ArcContext.children` (konteksty zagnieżdżone / po merge'u),
+ *  (b) uzupełniająco ze stampów `__contextPath` elementów — działa też na
+ *      runtime'ach, gdzie kontener drzewa nie dotarł, a stampy tak.
+ */
+function collectContexts(context: ArcContextAny): MapContextInfo[] {
+  const out: MapContextInfo[] = [];
+  const seen = new Set<string>();
+
+  const walk = (ctx: ArcContextAny, ancestors: string[]) => {
+    for (const child of ctx.children ?? []) {
+      const path = [...ancestors, child.id];
+      if (!seen.has(child.id)) {
+        seen.add(child.id);
+        out.push({
+          id: child.id,
+          path,
+          name: child.meta?.name,
+          title: child.meta?.title,
+          description: child.meta?.description,
+          hasCard: child.meta?.card !== undefined || undefined,
+        });
+      }
+      walk(child, path);
+    }
+  };
+  walk(context, []);
+
+  for (const el of context.elements as ArcContextElementAny[]) {
+    const p = (el as any).__contextPath as string[] | undefined;
+    if (!p) continue;
+    for (let i = 0; i < p.length; i++) {
+      const id = p[i];
+      if (seen.has(id)) continue;
+      seen.add(id);
+      // Nazwa tylko, gdy kontekst faktycznie ją zadeklarował (stamp
+      // __contextName) — anonimowe konteksty (id z hasha) zostają bez nazwy
+      // i diagram ich nie zwija w boxy.
+      const declaredName =
+        id === (el as any).__contextId
+          ? ((el as any).__contextName as string | undefined)
+          : undefined;
+      out.push({
+        id,
+        path: p.slice(0, i + 1),
+        name: declaredName,
+      });
+    }
+  }
+
+  return out;
+}