@arcote.tech/arc-process 0.7.28

package/src/mdx/structure.tsx

@@ -0,0 +1,206 @@
+/**
+ * Strukturalne komponenty MDX przepływów. Renderują lekki znacznik w prozie
+ * ORAZ nadają zagnieżdżonym wystąpieniom ścieżkę strukturalną (przez context),
+ * którą model zamienia na depth (czas) × lane (tor).
+ *
+ *   <Parallel>              — dzieci biegną równolegle (AND); wspólny depth, lane'y
+ *   <Branch><Lane>…</Lane>  — ścieżki alternatywne (XOR); lane'y branchy
+ *   <Step id title>         — nazwana faza; `id` czyni ją celem dla <Continue>
+ *   <Entry title>           — punkt wejścia procesu (subproces poza osią)
+ *   <Continue to="faza"/>   — wpięcie bieżącego Entry w fazę osi głównej
+ *   <Note side="N">…</Note> — notatka doczepiana do poprzedzającego kroku
+ */
+
+import { Children, isValidElement, useId, type ReactNode } from "react";
+import type { Direction, PathSeg } from "../model/types";
+import { StructureContext, useRegister, useStructure } from "./contexts";
+import { GLASS } from "../react/theme";
+
+/** Owiń każde dziecko segmentem strukturalnym + indeksem toru. */
+function mapLanes(
+  children: ReactNode,
+  base: PathSeg[],
+  seg: (i: number) => PathSeg,
+): ReactNode {
+  let i = 0;
+  return Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    const s = seg(i++);
+    return (
+      <StructureContext.Provider value={{ path: [...base, s] }}>
+        {child}
+      </StructureContext.Provider>
+    );
+  });
+}
+
+const wrapStyle: React.CSSProperties = {
+  display: "block",
+  borderLeft: `3px solid ${GLASS.border}`,
+  paddingLeft: 12,
+  margin: "8px 0",
+};
+
+const tagStyle = (color: string): React.CSSProperties => ({
+  display: "inline-block",
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: 0.5,
+  color,
+  background: "rgba(124,58,237,0.08)",
+  borderRadius: 5,
+  padding: "1px 7px",
+  marginBottom: 4,
+});
+
+export function Parallel({ children }: { children?: ReactNode }) {
+  const id = useId();
+  const { path } = useStructure();
+  return (
+    <span style={{ ...wrapStyle, borderLeftColor: "#7c3aed" }}>
+      <span style={tagStyle("#7c3aed")}>∥ równolegle</span>
+      {mapLanes(children, path, (i) => ({ type: "parallel", id, laneIndex: i }))}
+    </span>
+  );
+}
+
+export function Branch({ children }: { children?: ReactNode }) {
+  const id = useId();
+  const { path } = useStructure();
+  return (
+    <span style={{ ...wrapStyle, borderLeftColor: "#e64980" }}>
+      <span style={tagStyle("#e64980")}>⋔ alternatywnie</span>
+      {mapLanes(children, path, (i) => ({ type: "branch", id, laneIndex: i }))}
+    </span>
+  );
+}
+
+export function Lane({ title, children }: { title?: string; children?: ReactNode }) {
+  const id = useId();
+  const { path } = useStructure();
+  return (
+    <StructureContext.Provider
+      value={{ path: [...path, { type: "lane", id, title, alt: true }] }}
+    >
+      <span style={{ display: "block", margin: "4px 0" }}>
+        {title ? (
+          <span style={{ fontSize: 11, fontWeight: 700, color: "#e64980", marginRight: 6 }}>
+            {title}:
+          </span>
+        ) : null}
+        {children}
+      </span>
+    </StructureContext.Provider>
+  );
+}
+
+export function Step({
+  id: phaseId,
+  title,
+  children,
+}: {
+  /** Identyfikator fazy — cel dla `<Continue to>`. */
+  id?: string;
+  title?: string;
+  children?: ReactNode;
+}) {
+  const id = useId();
+  const { path } = useStructure();
+  return (
+    <StructureContext.Provider
+      value={{ path: [...path, { type: "step", id, title, phaseId }] }}
+    >
+      <span style={{ ...wrapStyle, borderLeftColor: "#1c7ed6" }}>
+        {title ? <span style={tagStyle("#1c7ed6")}>▸ {title}</span> : null}
+        {children}
+      </span>
+    </StructureContext.Provider>
+  );
+}
+
+export function Entry({ title, children }: { title?: string; children?: ReactNode }) {
+  const id = useId();
+  const { path } = useStructure();
+  return (
+    <StructureContext.Provider
+      value={{ path: [...path, { type: "entry", id, title }] }}
+    >
+      <span style={{ ...wrapStyle, borderLeftColor: "#0ca678" }}>
+        <span style={tagStyle("#0ca678")}>⇥ wejście{title ? `: ${title}` : ""}</span>
+        {children}
+      </span>
+    </StructureContext.Provider>
+  );
+}
+
+export function Continue({ to }: { to: string }) {
+  const domId = useId();
+  const register = useRegister();
+  const { path } = useStructure();
+  register?.({ domId, occurrence: { type: "continue", to, path } });
+  return (
+    <span
+      data-arc-id={domId}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontSize: 11,
+        fontWeight: 700,
+        color: "#0ca678",
+      }}
+    >
+      ⤳ dalej: {to}
+    </span>
+  );
+}
+
+function textOf(node: ReactNode): string {
+  if (node == null || node === false) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (typeof node === "object" && "props" in (node as unknown as Record<string, unknown>)) {
+    return textOf(
+      (node as unknown as { props?: { children?: ReactNode } }).props?.children,
+    );
+  }
+  return "";
+}
+
+export function Note({
+  side = "N",
+  title,
+  children,
+}: {
+  side?: Direction;
+  title?: string;
+  children?: ReactNode;
+}) {
+  const domId = useId();
+  const register = useRegister();
+  const { path } = useStructure();
+  const text = textOf(children);
+  register?.({
+    domId,
+    occurrence: { type: "note", occId: domId, text, side, title, path },
+  });
+  return (
+    <span
+      data-arc-id={domId}
+      style={{
+        display: "block",
+        margin: "6px 0",
+        padding: "6px 10px",
+        borderRadius: 8,
+        background: "rgba(234,179,8,0.10)",
+        borderLeft: "3px solid #eab308",
+        fontSize: 12.5,
+        color: GLASS.textMuted,
+      }}
+    >
+      {title ? <b style={{ color: GLASS.text }}>{title}: </b> : "📝 "}
+      {children}
+    </span>
+  );
+}

package/src/model/build.ts

@@ -0,0 +1,470 @@
+/**
+ * Budowa modelu procesu z uporządkowanych wystąpień MDX + generycznego grafu.
+ *
+ *  - steps: jeden nod NA wystąpienie (bez dedup); istniejący lub brakujący.
+ *  - connectors: nody na najkrótszej SKIEROWANEJ ścieżce przepływu między
+ *    dwoma opowiedzianymi krokami (hydraulika, której autor nie narrował).
+ *  - attachments per krok: powiązane nody NIEwidoczne, pogrupowane wg grup
+ *    doczepień profilu — gotowe do zwinięcia w badge / rozwinięcia w kolumny.
+ *  - fazy (`<Step id>`) + wejścia (`<Entry>` … `<Continue to>`): subprocesy
+ *    wpinające się w oś główną, także w jej środek.
+ *
+ * Czysty i bez zależności (testowalny bunem).
+ */
+
+import type { ProcessProfile } from "./profile";
+import {
+  CONTEXT_REF_KIND,
+  type ContextInfo,
+  type ContinueEdge,
+  type MethodRef,
+  type NoteOccurrence,
+  type Occurrence,
+  type PathSeg,
+  type ProcessConnector,
+  type ProcessGraph,
+  type ProcessModel,
+  type ProcessNode,
+  type ProcessRelation,
+  type ProcessStep,
+  type StepOccurrence,
+} from "./types";
+
+export const DEFAULT_MAX_PATH = 5;
+
+// ---------------------------------------------------------------------------
+// Graph helpers (skierowana adjacencja przepływu + BFS)
+// ---------------------------------------------------------------------------
+
+/**
+ * Skierowana adjacencja przepływu lewo→prawo: każda krawędź wskazuje
+ * producent→konsument, więc ścieżka BFS podąża za realnym przepływem danych.
+ * Orientację wyznacza semantyka relacji z profilu:
+ *  - "out" (mutates/emits): source produkuje target → source → target
+ *  - "in"  (queries/listens/handles): source konsumuje target → target → source
+ */
+function flowAdjacency(
+  relations: ProcessRelation[],
+  profile: ProcessProfile,
+): Map<string, Set<string>> {
+  const adj = new Map<string, Set<string>>();
+  const link = (a: string, b: string) => {
+    let s = adj.get(a);
+    if (!s) adj.set(a, (s = new Set()));
+    s.add(b);
+  };
+  for (const r of relations) {
+    const semantics = profile.relations[r.kind]?.semantics ?? "in";
+    if (semantics === "out") link(r.from, r.to);
+    else link(r.to, r.from);
+  }
+  return adj;
+}
+
+function shortestPath(
+  adj: Map<string, Set<string>>,
+  start: string,
+  goal: string,
+  maxLen: number,
+): string[] | null {
+  if (start === goal) return [start];
+  const prev = new Map<string, string>();
+  const depth = new Map<string, number>([[start, 0]]);
+  const queue = [start];
+  while (queue.length) {
+    const cur = queue.shift()!;
+    const d = depth.get(cur)!;
+    if (d >= maxLen) continue;
+    for (const nb of adj.get(cur) ?? []) {
+      if (depth.has(nb)) continue;
+      depth.set(nb, d + 1);
+      prev.set(nb, cur);
+      if (nb === goal) {
+        const path = [goal];
+        let p = cur;
+        while (p !== start) {
+          path.push(p);
+          p = prev.get(p)!;
+        }
+        path.push(start);
+        return path.reverse();
+      }
+      queue.push(nb);
+    }
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Fazy i wejścia (Entry/Continue) — przydział depth × lane
+// ---------------------------------------------------------------------------
+
+interface EntryBlock {
+  id: string;
+  title?: string;
+  /** Indeksy kroków (w tablicy steps) należące do wejścia, w kolejności. */
+  stepIdx: number[];
+  /** Cel `<Continue to>`, jeśli zadeklarowany. */
+  to?: string;
+}
+
+function entrySeg(path: PathSeg[]): PathSeg | undefined {
+  return path.find((s) => s.type === "entry");
+}
+
+/**
+ * Przydziel depth (czas, x) i lane (tor, y).
+ *
+ * Przebieg 1 — oś główna (kroki poza `<Entry>`): sekwencja + bloki
+ * Parallel/Branch jak dotychczas; przy okazji mapa faz `phaseStart`
+ * (pierwsza głębokość i occId pierwszego kroku każdej fazy `<Step id>`).
+ *
+ * Przebieg 2 — wejścia: każdy blok `<Entry>` to łańcuch o długości L z celem
+ * `<Continue to=T>`; kroki dostają depth = start(T) − L + i (clamp ≥ 0) oraz
+ * tor spoza pasma głównego — wejścia naprzemiennie nad osią (lane ujemne)
+ * i pod nią (> maxLane). Ostatni krok wejścia dostaje krawędź „continues”
+ * do pierwszego kroku fazy docelowej.
+ */
+function assignDepthLane(
+  steps: ProcessStep[],
+  stepOccs: StepOccurrence[],
+  continues: { to: string; entryId?: string }[],
+): ContinueEdge[] {
+  // --- Przebieg 1: oś główna -----------------------------------------------
+  let depthCursor = 0;
+  let block: {
+    id: string;
+    base: number;
+    maxLocal: number;
+    laneDepth: Map<number, number>;
+  } | null = null;
+  const finalize = () => {
+    if (block) {
+      depthCursor = block.base + block.maxLocal + 1;
+      block = null;
+    }
+  };
+
+  const phaseStart = new Map<string, { depth: number; occId: string }>();
+  let firstPhase: { depth: number; occId: string } | null = null;
+  const entries = new Map<string, EntryBlock>();
+  const entryOrder: string[] = [];
+
+  steps.forEach((step, i) => {
+    const path = stepOccs[i].path ?? [];
+    const E = entrySeg(path);
+    if (E) {
+      // Kroki wejścia zbieramy do przebiegu 2.
+      let e = entries.get(E.id);
+      if (!e) {
+        e = { id: E.id, title: E.title, stepIdx: [] };
+        entries.set(E.id, e);
+        entryOrder.push(E.id);
+      }
+      e.stepIdx.push(i);
+      step.entryId = E.id;
+      step.entryTitle = E.title;
+      return;
+    }
+
+    const phase = path.find((s) => s.type === "step" && s.phaseId);
+    const P = path.find((s) => s.type === "parallel" || s.type === "branch");
+    if (!P) {
+      finalize();
+      step.depth = depthCursor;
+      step.lane = 0;
+      depthCursor += 1;
+    } else {
+      if (!block || block.id !== P.id) {
+        finalize();
+        block = { id: P.id, base: depthCursor, maxLocal: 0, laneDepth: new Map() };
+      }
+      const lane = P.laneIndex ?? 0;
+      const local = block.laneDepth.get(lane) ?? 0;
+      step.depth = block.base + local;
+      step.lane = lane;
+      step.alt = P.type === "branch";
+      step.blockId = P.id;
+      block.laneDepth.set(lane, local + 1);
+      block.maxLocal = Math.max(block.maxLocal, local);
+    }
+
+    if (phase?.phaseId) {
+      step.phaseId = phase.phaseId;
+      if (!phaseStart.has(phase.phaseId)) {
+        phaseStart.set(phase.phaseId, { depth: step.depth, occId: step.occId });
+      }
+    }
+    if (!firstPhase) firstPhase = { depth: step.depth, occId: step.occId };
+  });
+  finalize();
+
+  // Cele Continue → bloki Entry (marker niesie id swojego Entry w ścieżce).
+  for (const c of continues) {
+    if (!c.entryId) continue;
+    const e = entries.get(c.entryId);
+    if (e && e.to === undefined) e.to = c.to;
+  }
+
+  // --- Przebieg 2: wejścia ---------------------------------------------------
+  const continueEdges: ContinueEdge[] = [];
+  const mainLanes = steps
+    .filter((s) => !s.entryId)
+    .map((s) => s.lane);
+  const maxMainLane = mainLanes.length ? Math.max(...mainLanes) : 0;
+  let aboveCount = 0;
+  let belowCount = 0;
+
+  entryOrder.forEach((entryId, k) => {
+    const e = entries.get(entryId)!;
+    const target = (e.to !== undefined ? phaseStart.get(e.to) : undefined) ?? firstPhase;
+    const targetDepth = target?.depth ?? 0;
+    const L = e.stepIdx.length;
+    const start = Math.max(0, targetDepth - L);
+    const above = k % 2 === 0;
+    const lane = above ? -(1 + aboveCount++) : maxMainLane + 1 + belowCount++;
+    e.stepIdx.forEach((idx, i) => {
+      steps[idx].depth = start + i;
+      steps[idx].lane = lane;
+    });
+    if (target && e.to !== undefined && L > 0) {
+      continueEdges.push({
+        fromOcc: steps[e.stepIdx[L - 1]].occId,
+        toOcc: target.occId,
+        phaseId: e.to,
+      });
+    } else if (target && L > 0) {
+      // Entry bez Continue → wpięcie w pierwszą fazę dokumentu.
+      continueEdges.push({
+        fromOcc: steps[e.stepIdx[L - 1]].occId,
+        toOcc: target.occId,
+        phaseId: "",
+      });
+    }
+  });
+
+  return continueEdges;
+}
+
+// ---------------------------------------------------------------------------
+// Public builder
+// ---------------------------------------------------------------------------
+
+export interface BuildModelInput {
+  graph: ProcessGraph;
+  profile: ProcessProfile;
+  occurrences: Occurrence[];
+  maxPath?: number;
+}
+
+/** Znajdź kontekst po referencji `<Arc context="ai.chat">` (nazwy kropkowane) lub id. */
+export function resolveContextRef(
+  contexts: ContextInfo[],
+  refId: string,
+): ContextInfo | undefined {
+  const byId = contexts.find((c) => c.id === refId);
+  if (byId) return byId;
+  // Ścieżka kropkowana po nazwach: "ai.chat" → kontekst o name "chat",
+  // którego przodkowie mają nazwy "ai" (sufiks ścieżki nazw).
+  const segs = refId.split(".");
+  const nameOf = (id: string) =>
+    contexts.find((c) => c.id === id)?.name ?? id.replace(/^ctx_/, "");
+  return contexts.find((c) => {
+    const namePath = c.path.map(nameOf);
+    if (segs.length > namePath.length) return false;
+    return segs.every((s, i) => namePath[namePath.length - segs.length + i] === s);
+  });
+}
+
+/** Syntetyczny nod dla referencji całego kontekstu. */
+function contextNode(ctx: ContextInfo): ProcessNode {
+  return {
+    id: `ctx:${ctx.id}`,
+    kind: CONTEXT_REF_KIND,
+    label: ctx.title ?? ctx.name ?? ctx.id,
+    contextPath: ctx.path,
+    meta: { context: ctx },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Indeks relacji + doczepienia (reużywane przez layout do rekurencyjnych
+// rozwinięć doczepionych karteczek)
+// ---------------------------------------------------------------------------
+
+export interface RelationIndex {
+  nodeById: Map<string, ProcessNode>;
+  outByNode: Map<string, ProcessRelation[]>;
+  inByNode: Map<string, ProcessRelation[]>;
+}
+
+export function buildRelationIndex(graph: ProcessGraph): RelationIndex {
+  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
+  const outByNode = new Map<string, ProcessRelation[]>();
+  const inByNode = new Map<string, ProcessRelation[]>();
+  for (const r of graph.relations) {
+    let out = outByNode.get(r.from);
+    if (!out) outByNode.set(r.from, (out = []));
+    out.push(r);
+    let inn = inByNode.get(r.to);
+    if (!inn) inByNode.set(r.to, (inn = []));
+    inn.push(r);
+  }
+  return { nodeById, outByNode, inByNode };
+}
+
+/**
+ * Doczepienia noda wg grup profilu: powiązane nody spoza `excluded`,
+ * pogrupowane po grupie relacji. `method` pozwala profilowi zawęzić
+ * forward-zależności per metoda (np. metoda agregatu Arc).
+ */
+export function attachmentsFor(
+  index: RelationIndex,
+  profile: ProcessProfile,
+  node: ProcessNode,
+  method: MethodRef | undefined,
+  excluded: ReadonlySet<string>,
+): Partial<Record<string, string[]>> {
+  const id = node.id;
+  const override = profile.forwardDeps?.(node, method) ?? null;
+  const attachments: Partial<Record<string, string[]>> = {};
+  for (const [group, spec] of Object.entries(profile.attachmentGroups)) {
+    let ids: string[];
+    const overridden = override?.[group];
+    if (overridden !== undefined) {
+      ids = overridden;
+    } else {
+      const pool =
+        spec.direction === "out" ? index.outByNode.get(id) : index.inByNode.get(id);
+      ids = (pool ?? [])
+        .filter((r) => spec.relations.includes(r.kind))
+        .map((r) => (spec.direction === "out" ? r.to : r.from));
+    }
+    const filtered = [...new Set(ids)].filter(
+      (t) => t !== id && !excluded.has(t) && index.nodeById.has(t),
+    );
+    if (filtered.length) attachments[group] = filtered;
+  }
+  return attachments;
+}
+
+export function buildProcessModel(input: BuildModelInput): ProcessModel {
+  const { graph, profile, occurrences, maxPath = DEFAULT_MAX_PATH } = input;
+  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
+  const contexts = graph.contexts ?? [];
+
+  // Rozdziel wystąpienia: kroki / continue / notatki (kolejność dokumentu).
+  const stepOccs: StepOccurrence[] = [];
+  const continues: { to: string; entryId?: string }[] = [];
+  const notesFor = new Map<string, NoteOccurrence[]>(); // occId kroku → notatki
+  let lastStepOcc: StepOccurrence | null = null;
+  for (const o of occurrences) {
+    if (o.type === "step") {
+      stepOccs.push(o);
+      lastStepOcc = o;
+    } else if (o.type === "continue") {
+      continues.push({ to: o.to, entryId: entrySeg(o.path ?? [])?.id });
+    } else if (o.type === "note" && lastStepOcc) {
+      const list = notesFor.get(lastStepOcc.occId) ?? [];
+      list.push(o);
+      notesFor.set(lastStepOcc.occId, list);
+    }
+  }
+
+  // Rozwiązanie referencji: nody grafu + syntetyczne nody kontekstów.
+  const resolve = (nodeId: string, kind: string): ProcessNode | undefined => {
+    if (kind === CONTEXT_REF_KIND) {
+      const raw = nodeId.startsWith("ctx:") ? nodeId.slice(4) : nodeId;
+      const ctx = resolveContextRef(contexts, raw);
+      return ctx ? contextNode(ctx) : undefined;
+    }
+    return nodeById.get(nodeId);
+  };
+
+  // 1) Kroki — jeden na wystąpienie.
+  const steps: ProcessStep[] = stepOccs.map((o, i) => {
+    const node = o.ref ? resolve(o.ref.nodeId, o.ref.kind) : undefined;
+    const path = o.path ?? [];
+    return {
+      occId: o.occId,
+      seq: i + 1,
+      ref: o.ref,
+      exists: !!node,
+      node,
+      label: o.label,
+      method: o.ref?.method,
+      attachments: {},
+      sides: o.sides,
+      expand: o.expand,
+      notes: (notesFor.get(o.occId) ?? []).map((n) => ({
+        occId: n.occId,
+        side: n.side ?? ("N" as const),
+        title: n.title,
+        text: n.text,
+      })),
+      depth: 0,
+      lane: 0,
+      stepTitle: path.find((s) => s.type === "step")?.title,
+      laneTitle: path.find((s) => s.type === "lane")?.title,
+    };
+  });
+
+  const continueEdges = assignDepthLane(steps, stepOccs, continues);
+
+  // Pierwsze wystąpienie (seq) per istniejący nod.
+  const firstSeqByNode = new Map<string, number>();
+  for (const s of steps) {
+    if (s.exists && !firstSeqByNode.has(s.node!.id)) {
+      firstSeqByNode.set(s.node!.id, s.seq);
+    }
+  }
+  const stepNodeIds = [...firstSeqByNode.keys()];
+
+  // 2) Connectory — nody na SKIEROWANEJ ścieżce przepływu między krokami.
+  const flowAdj = flowAdjacency(graph.relations, profile);
+  const connectorMap = new Map<string, ProcessConnector>();
+  for (let i = 0; i < stepNodeIds.length; i++) {
+    for (let j = i + 1; j < stepNodeIds.length; j++) {
+      const a = stepNodeIds[i];
+      const b = stepNodeIds[j];
+      let path = shortestPath(flowAdj, a, b, maxPath);
+      let from = a;
+      let to = b;
+      if (!path) {
+        path = shortestPath(flowAdj, b, a, maxPath);
+        from = b;
+        to = a;
+      }
+      if (!path) continue;
+      const intermediates = path.filter((id) => !firstSeqByNode.has(id));
+      const between: [number, number] = [
+        firstSeqByNode.get(from)!,
+        firstSeqByNode.get(to)!,
+      ];
+      intermediates.forEach((id, k) => {
+        const node = nodeById.get(id);
+        if (!node || connectorMap.has(id)) return;
+        connectorMap.set(id, {
+          id,
+          node,
+          between,
+          order: k + 1,
+          count: intermediates.length,
+        });
+      });
+    }
+  }
+  const connectors = [...connectorMap.values()];
+
+  // 3) Zbiór widocznych.
+  const visible = new Set<string>([...stepNodeIds, ...connectorMap.keys()]);
+
+  // 4) Doczepienia per krok — powiązane nody NIEwidoczne, wg grup profilu.
+  const index = buildRelationIndex(graph);
+  for (const s of steps) {
+    if (!s.exists || s.node!.kind === CONTEXT_REF_KIND) continue;
+    s.attachments = attachmentsFor(index, profile, s.node!, s.method, visible);
+  }
+
+  return { steps, connectors, visible, firstSeqByNode, continueEdges };
+}