@arcote.tech/arc-process 0.7.28 → 0.7.29

package/src/react/process-diagram.tsx

@@ -44,10 +44,12 @@ import { MdxView, parseProcessFrontmatter } from "../mdx/mdx-view";
 import {
   FocusContext,
   ProcessDataContext,
+  SelectionContext,
   ViewStateContext,
 } from "../mdx/contexts";
 import { makeNodeTypes } from "./nodes";
-import { GLASS, MISSING_COLOR } from "./theme";
+import { ProcessDrawer, type SourceProvider } from "./drawer";
+import { GLASS } from "./theme";
 
 export interface ProcessDiagramProps {
   /** Surowy MDX procesu. */
@@ -70,6 +72,8 @@ export interface ProcessDiagramProps {
   defaultCollapsed?: boolean;
   /** Id/nazwa kontekstu domowego (fallback: frontmatter `context:`). */
   homeContextId?: string;
+  /** Dostawca kodu źródłowego do drawera (np. fetch /api/source w arc-map). */
+  sourceProvider?: SourceProvider;
 }
 
 function rfNode(n: DiagramNode): Node {
@@ -115,11 +119,13 @@ export function ProcessDiagram({
   title,
   defaultCollapsed,
   homeContextId,
+  sourceProvider,
 }: ProcessDiagramProps) {
   const [occurrences, setOccurrences] = useState<Occurrence[]>([]);
   const [viewState, setViewState] = useState<ProcessViewState | null>(null);
   const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
   const [scrollToKey, setScrollToKey] = useState<string | null>(null);
+  const [selectedOcc, setSelectedOcc] = useState<string | null>(null);
   const proseRef = useRef<HTMLDivElement>(null);
 
   const frontmatter = useMemo(() => parseProcessFrontmatter(mdx), [mdx]);
@@ -132,6 +138,7 @@ export function ProcessDiagram({
   useEffect(() => {
     setOccurrences([]);
     setViewState(null);
+    setSelectedOcc(null);
   }, [mdx]);
 
   const model = useMemo(
@@ -218,15 +225,35 @@ export function ProcessDiagram({
 
   const processData = useMemo(() => ({ graph, profile }), [graph, profile]);
 
+  const selectionState = useMemo(
+    () => ({ selectedOcc, selectOcc: setSelectedOcc }),
+    [selectedOcc],
+  );
+
+  // Krok do drawera: wybrany occId szukamy najpierw wśród kroków po collapse
+  // (pseudo-kroki boxów), potem w oryginalnych (chip prozy członka boxa).
+  const selectedStep = useMemo(() => {
+    if (!selectedOcc) return null;
+    const group = collapse.groupByOcc.get(selectedOcc);
+    return (
+      collapse.steps.find((s) => s.occId === (group ?? selectedOcc)) ??
+      model.steps.find((s) => s.occId === selectedOcc) ??
+      null
+    );
+  }, [selectedOcc, collapse, model]);
+
   return (
     <ProcessDataContext.Provider value={processData}>
       <FocusContext.Provider value={focusState}>
+        <SelectionContext.Provider value={selectionState}>
         <ViewStateContext.Provider value={viewStateActions}>
           <div
             style={{
               display: "grid",
               gridTemplateColumns: "minmax(320px, 1fr) minmax(420px, 1.3fr)",
               height: "100%",
+              minHeight: 0,
+              overflow: "hidden",
             }}
           >
             {/* Proza */}
@@ -234,6 +261,7 @@ export function ProcessDiagram({
               ref={proseRef}
               style={{
                 overflow: "auto",
+                minHeight: 0,
                 padding: "20px 24px",
                 borderRight: `1px solid ${GLASS.border}`,
               }}
@@ -241,8 +269,8 @@ export function ProcessDiagram({
               <MdxView key={docKey} mdx={mdx} onOccurrences={setOccurrences} />
             </div>
 
-            {/* Diagram */}
-            <div style={{ position: "relative" }}>
+            {/* Diagram — sztywno wypełnia dostępną wysokość, bez scrolla strony */}
+            <div style={{ position: "relative", minHeight: 0, overflow: "hidden" }}>
               <ReactFlow
                 key={docKey}
                 nodes={nodes}
@@ -260,7 +288,10 @@ export function ProcessDiagram({
                 onNodeClick={(_, n) => {
                   const k = keyByOcc.get(n.id);
                   if (k) setScrollToKey(k);
+                  // Kroki (także boxy kontekstów) otwierają drawer.
+                  if (n.type === "step") setSelectedOcc(n.id);
                 }}
+                onPaneClick={() => setSelectedOcc(null)}
                 fitView
                 fitViewOptions={{ padding: 0.18 }}
                 minZoom={0.1}
@@ -273,9 +304,10 @@ export function ProcessDiagram({
                   zoomable
                   nodeColor={(n) => {
                     const step = (n.data as { step?: ProcessStep }).step;
-                    if (step && !step.exists) return MISSING_COLOR;
+                    // Kolor z zadeklarowanego rodzaju — także dla TODO.
                     const kind =
                       step?.node?.kind ??
+                      step?.ref?.kind ??
                       (n.data as { node?: { kind: string } }).node?.kind;
                     return kind ? kindColor(profile, kind) : "#64748b";
                   }}
@@ -286,9 +318,20 @@ export function ProcessDiagram({
                   }}
                 />
               </ReactFlow>
+
+              {/* Drawer szczegółów wybranego kroku. */}
+              {selectedStep ? (
+                <ProcessDrawer
+                  step={selectedStep}
+                  profile={profile}
+                  onClose={() => setSelectedOcc(null)}
+                  sourceProvider={sourceProvider}
+                />
+              ) : null}
             </div>
           </div>
         </ViewStateContext.Provider>
+        </SelectionContext.Provider>
       </FocusContext.Provider>
     </ProcessDataContext.Provider>
   );

package/tests/build.test.ts

@@ -239,10 +239,13 @@ describe("buildProcessModel — fazy, Entry/Continue, notatki, konteksty", () =>
     const m = buildProcessModel({ graph, profile: arcProfile, occurrences });
     const by = new Map(m.steps.map((s) => [s.occId, s]));
 
-    // Oś główna zaczyna od depth 0.
-    expect([by.get("m1")!.depth, by.get("m1")!.lane]).toEqual([0, 0]);
-    expect([by.get("m2")!.depth, by.get("m2")!.lane]).toEqual([1, 0]);
-    // Entry (łańcuch L=2, cel depth 0) → start = max(0, 0-2) = 0, tor nad osią.
+    // Oś główna przesunięta o wyprzedzenie wejścia (maxLead = 2 − 0 = 2),
+    // by łańcuch Entry zmieścił się PRZED fazą — continues idzie w prawo.
+    expect([by.get("m1")!.depth, by.get("m1")!.lane]).toEqual([2, 0]);
+    expect([by.get("m2")!.depth, by.get("m2")!.lane]).toEqual([3, 0]);
+    // Entry (łańcuch L=2, cel depth 2) → depths 0,1 — koniec kolumnę przed fazą.
+    expect(by.get("e1")!.depth).toBe(0);
+    expect(by.get("e2")!.depth).toBe(1);
     expect(by.get("e1")!.lane).toBeLessThan(0);
     expect(by.get("e2")!.lane).toBe(by.get("e1")!.lane);
     expect(by.get("e1")!.entryTitle).toBe("Formularz");
@@ -294,6 +297,46 @@ describe("buildProcessModel — fazy, Entry/Continue, notatki, konteksty", () =>
     expect(m.continueEdges).toEqual([{ fromOcc: "f1", toOcc: "m1", phaseId: "" }]);
   });
 
+  test("maxLead: wejście w środek nie przesuwa osi, gdy faza jest wystarczająco głęboko", () => {
+    const occurrences: Occurrence[] = [
+      occ("m1", { view: "v" }, "m1", phasePath("start")),
+      occ("m2", { view: "x" }, "m2", phasePath("wywiad")),
+      occ("a1", { command: "cmd" }, "a1", entryPath("en-a", "Admin")),
+      { type: "continue", to: "wywiad", path: entryPath("en-a", "Admin") },
+    ];
+    const m = buildProcessModel({ graph, profile: arcProfile, occurrences });
+    const by = new Map(m.steps.map((s) => [s.occId, s]));
+    // Faza wywiad na depth 1, łańcuch L=1 → lead 0 → oś bez przesunięcia.
+    expect(by.get("m1")!.depth).toBe(0);
+    expect(by.get("m2")!.depth).toBe(1);
+    expect(by.get("a1")!.depth).toBe(0); // kolumnę przed fazą wywiad
+  });
+
+  test("tory wejść: cel dalej w prawo = bliżej osi (mniej przecięć)", () => {
+    const occurrences: Occurrence[] = [
+      // Dwa wejścia NAD osią (indeksy 0 i 2 w kolejności dokumentu).
+      occ("f1", { command: "cmd" }, "f1", entryPath("en-a", "A")),
+      { type: "continue", to: "p1", path: entryPath("en-a", "A") },
+      occ("g1", { listener: "l" }, "g1", entryPath("en-b", "B")),
+      { type: "continue", to: "p2", path: entryPath("en-b", "B") },
+      occ("h1", { view: "x" }, "h1", entryPath("en-c", "C")),
+      { type: "continue", to: "p1", path: entryPath("en-c", "C") },
+      occ("m1", { view: "v" }, "m1", phasePath("p1")),
+      occ("m2", { event: "e" }, "m2", phasePath("p2")),
+    ];
+    const m = buildProcessModel({ graph, profile: arcProfile, occurrences });
+    const by = new Map(m.steps.map((s) => [s.occId, s]));
+    // Nad osią: f1 (cel p1) i h1 (cel p1)... f1(k=0) i h1(k=2) nad osią,
+    // g1(k=1) pod osią. Nad osią cel głębszy → tor bliższy osi.
+    expect(by.get("g1")!.lane).toBeGreaterThan(0);
+    const f1 = by.get("f1")!;
+    const h1 = by.get("h1")!;
+    // Oba celują w p1 — kolejność stabilna, oba nad osią na różnych torach.
+    expect(f1.lane).toBeLessThan(0);
+    expect(h1.lane).toBeLessThan(0);
+    expect(f1.lane).not.toBe(h1.lane);
+  });
+
   test("notatka dokleja się do poprzedzającego kroku", () => {
     const occurrences: Occurrence[] = [
       occ("m1", { view: "v" }, "m1"),
@@ -332,6 +375,57 @@ describe("buildProcessModel — fazy, Entry/Continue, notatki, konteksty", () =>
     expect(m.steps[0].node?.contextPath).toEqual(["ctx_ai", "ctx_chat"]);
   });
 
+  test("piny rozwiązują się z katalogu (catalogKind, label, pierwszeństwo MDX)", () => {
+    const g = toProcessGraph({
+      elements: [el("cmd", "command")],
+      edges: [],
+      catalog: [
+        {
+          kind: "personas",
+          name: "prospekt",
+          data: { name: "prospekt", label: "Prospekt", color: "#0e7490" },
+        },
+        {
+          kind: "metrics",
+          name: "leads.submitted",
+          data: { name: "leads.submitted", label: "Zgłoszone leady" },
+        },
+      ],
+    });
+    const o: StepOccurrence = {
+      ...occ("o1", { command: "cmd" }),
+      pins: [
+        { kind: "persona", name: "prospekt" },
+        { kind: "metric", name: "leads.submitted", label: "Leady (MDX)" },
+        { kind: "persona", name: "nieznana" },
+      ],
+    };
+    const m = buildProcessModel({ graph: g, profile: arcProfile, occurrences: [o] });
+    expect(m.steps[0].pins).toEqual([
+      {
+        kind: "persona",
+        name: "prospekt",
+        label: "Prospekt",
+        data: { name: "prospekt", label: "Prospekt", color: "#0e7490" },
+        resolved: true,
+      },
+      {
+        kind: "metric",
+        name: "leads.submitted",
+        label: "Leady (MDX)", // etykieta z MDX wygrywa nad katalogiem
+        data: { name: "leads.submitted", label: "Zgłoszone leady" },
+        resolved: true,
+      },
+      {
+        kind: "persona",
+        name: "nieznana",
+        label: "nieznana",
+        data: undefined,
+        resolved: false,
+      },
+    ]);
+  });
+
   test("sides/expand z wystąpienia przechodzą na krok", () => {
     const o: StepOccurrence = {
       ...occ("o1", { command: "cmd" }),

package/tests/layout.test.ts

@@ -134,6 +134,40 @@ describe("layoutProcess — tracki i kierunki", () => {
     expect(edge).toBeDefined();
   });
 
+  test("fork/join: blok Parallel dostaje rozwidlenie i scalenie", () => {
+    const occurrences: Occurrence[] = [
+      occ("s1", { command: "cmd" }),
+      { ...occ("p1", { view: "v" }), path: [{ type: "parallel", id: "P", laneIndex: 0 }] },
+      { ...occ("p2", { event: "e" }), path: [{ type: "parallel", id: "P", laneIndex: 1 }] },
+      occ("s2", { listener: "l" }),
+    ];
+    const { layout } = run(occurrences);
+    const bb = layout.edges
+      .filter((e) => e.backbone)
+      .map((e) => `${e.source}->${e.target}`);
+    // Fork: s1 → oba lane'y; join: oba lane'y → s2.
+    expect(bb).toContain("s1->p1");
+    expect(bb).toContain("s1->p2");
+    expect(bb).toContain("p1->s2");
+    expect(bb).toContain("p2->s2");
+  });
+
+  test("szkielet osi głównej nie przerywa się na bloku Entry w środku dokumentu", () => {
+    const occurrences: Occurrence[] = [
+      { ...occ("m1", { command: "cmd" }), path: [{ type: "step", id: "sA", phaseId: "a" }] },
+      // Entry wtrącone w dokument między fazami.
+      { ...occ("e1", { view: "v" }), path: [{ type: "entry", id: "en", title: "E" }] },
+      { type: "continue", to: "b", path: [{ type: "entry", id: "en" }] },
+      { ...occ("m2", { event: "e" }), path: [{ type: "step", id: "sB", phaseId: "b" }] },
+    ];
+    const { layout } = run(occurrences);
+    const bb = layout.edges
+      .filter((e) => e.backbone)
+      .map((e) => `${e.source}->${e.target}`);
+    expect(bb).toContain("m1->m2"); // oś główna ciągła mimo Entry pomiędzy
+    expect(bb).not.toContain("e1->m2"); // Entry łączy się przez continues, nie szkielet
+  });
+
   test("Entry na torze ujemnym renderuje się nad osią + krawędź continues", () => {
     const occurrences: Occurrence[] = [
       {