@arcote.tech/arc-process 0.7.28 → 0.7.29

package/src/profiles/arc.ts

@@ -12,6 +12,7 @@
 
 import { defineProfile } from "../model/profile";
 import type {
+  CatalogEntry,
   ContextInfo,
   MethodRef,
   ProcessGraph,
@@ -32,6 +33,7 @@ export const ARC_ELEMENT_COLOR: Record<string, 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)
   context: "#7c3aed", // violet — zwinięty kontekst
   note: "#eab308", // yellow — notatka
   unknown: "#868e96", // slate
@@ -59,6 +61,8 @@ export interface ArcRefProps {
   staticView?: string;
   listener?: string;
   route?: string;
+  /** AI tool (element tool() z arc-ai, np. tool czatu). */
+  tool?: string;
   aggregate?: string;
   /** Z `aggregate`: metoda mutująca. */
   mutationMethod?: string;
@@ -107,6 +111,9 @@ export function resolveArcRef(props: ArcRefProps): ResolvedRef | null {
   if (props.route) {
     return { nodeId: props.route, kind: "route", key: `route:${props.route}` };
   }
+  if (props.tool) {
+    return { nodeId: props.tool, kind: "tool", key: `tool:${props.tool}` };
+  }
   if (props.page) {
     const path = normalizePagePath(props.page);
     return { nodeId: path, kind: "page", key: `page:${path}` };
@@ -192,6 +199,7 @@ export interface ArcGraphInput {
   components?: ArcGraphComponent[];
   componentEdges?: ArcGraphComponentEdge[];
   contexts?: ContextInfo[];
+  catalog?: CatalogEntry[];
 }
 
 /** Przekształca dane mapy Arka na generyczny graf procesu. */
@@ -222,7 +230,12 @@ export function toProcessGraph(input: ArcGraphInput): ProcessGraph {
       kind: e.usage === "query" ? "uiQuery" : "uiMutation",
     })),
   ];
-  return { nodes, relations, contexts: input.contexts ?? [] };
+  return {
+    nodes,
+    relations,
+    contexts: input.contexts ?? [],
+    catalog: input.catalog ?? [],
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -259,6 +272,7 @@ export const arcProfile = defineProfile({
     listener: { color: ARC_ELEMENT_COLOR.listener, label: "listener" },
     route: { color: ARC_ELEMENT_COLOR.route, label: "route" },
     page: { color: ARC_ELEMENT_COLOR.page, label: "page" },
+    tool: { color: ARC_ELEMENT_COLOR.tool, label: "tool" },
     context: { color: ARC_ELEMENT_COLOR.context, label: "context" },
     note: { color: ARC_ELEMENT_COLOR.note, label: "note" },
     unknown: { color: ARC_ELEMENT_COLOR.unknown },
@@ -327,6 +341,20 @@ export const arcProfile = defineProfile({
       label: "używany w UI",
     },
   },
+  pinKinds: {
+    persona: {
+      icon: "👤",
+      color: "#0e7490",
+      label: "persona",
+      catalogKind: "personas",
+    },
+    metric: {
+      icon: "📈",
+      color: "#9333ea",
+      label: "metryka",
+      catalogKind: "metrics",
+    },
+  },
   resolveRef: (props) => resolveArcRef(props as ArcRefProps),
   forwardDeps: arcForwardDeps,
 });

package/src/react/drawer.tsx

@@ -0,0 +1,374 @@
+/**
+ * Drawer szczegółów kroku — overlay z prawej NAD diagramem.
+ *
+ * Otwierany klikiem w nod lub chip prozy; zamykany Esc/×/klik w tło.
+ * Sekcje: nagłówek (rodzaj, status istnienia), Przypięcia (dane z katalogu),
+ * Wystąpienie (etykieta, faza, tor, notatki), Element (opis/schema/metody/
+ * relacje z grafu) i OTWARTY kod źródłowy (przez `sourceProvider`,
+ * kolorowany Shiki ładowanym leniwie — pierwsze otwarcie kodu, nie start).
+ */
+
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { kindColor, type ProcessProfile } from "../model/profile";
+import type { ProcessNode, ProcessStep } from "../model/types";
+import { GLASS, tint } from "./theme";
+
+/** Dostawca kodu źródłowego dla noda (np. fetch /api/source w arc-map). */
+export type SourceProvider = (
+  node: ProcessNode,
+) => Promise<{ file: string; line?: number; code: string } | null>;
+
+// ---------------------------------------------------------------------------
+// Shiki — leniwy singleton (moduł ładowany dopiero przy pierwszym kodzie)
+// ---------------------------------------------------------------------------
+
+let shikiPromise: Promise<
+  ((code: string) => string) | null
+> | null = null;
+
+function getHighlighter() {
+  if (!shikiPromise) {
+    shikiPromise = import("shiki")
+      .then(async (shiki) => {
+        const highlighter = await shiki.createHighlighter({
+          themes: ["github-light"],
+          langs: ["typescript", "tsx"],
+        });
+        return (code: string) =>
+          highlighter.codeToHtml(code, { lang: "tsx", theme: "github-light" });
+      })
+      .catch(() => null);
+  }
+  return shikiPromise;
+}
+
+function CodeBlock({ code }: { code: string }) {
+  const [html, setHtml] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    getHighlighter().then((highlight) => {
+      if (!cancelled && highlight) setHtml(highlight(code));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  const base: CSSProperties = {
+    margin: 0,
+    padding: "10px 12px",
+    borderRadius: 10,
+    border: `1px solid ${GLASS.border}`,
+    background: "rgba(255,255,255,0.75)",
+    fontSize: 11,
+    lineHeight: 1.55,
+    overflow: "auto",
+    maxHeight: 420,
+  };
+  if (html) {
+    return (
+      <div
+        style={base}
+        // Shiki generuje zaufany HTML z naszego lokalnego kodu źródłowego.
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+  return (
+    <pre style={{ ...base, fontFamily: "ui-monospace, monospace" }}>{code}</pre>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sekcje (wzorzec detail-panel z arc-map)
+// ---------------------------------------------------------------------------
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div style={{ marginBottom: 14 }}>
+      <div
+        style={{
+          fontSize: 10.5,
+          textTransform: "uppercase",
+          letterSpacing: 0.6,
+          fontWeight: 700,
+          color: GLASS.textFaint,
+          marginBottom: 5,
+        }}
+      >
+        {title}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function Json({ value }: { value: unknown }) {
+  if (value === undefined || value === null) {
+    return <em style={{ color: GLASS.textFaint }}>—</em>;
+  }
+  return (
+    <pre
+      style={{
+        margin: 0,
+        padding: "8px 10px",
+        borderRadius: 8,
+        border: `1px solid ${GLASS.border}`,
+        background: "rgba(255,255,255,0.6)",
+        fontSize: 10.5,
+        maxHeight: 220,
+        overflow: "auto",
+      }}
+    >
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Drawer
+// ---------------------------------------------------------------------------
+
+export interface ProcessDrawerProps {
+  step: ProcessStep;
+  profile: ProcessProfile;
+  onClose: () => void;
+  sourceProvider?: SourceProvider;
+}
+
+export function ProcessDrawer({
+  step,
+  profile,
+  onClose,
+  sourceProvider,
+}: ProcessDrawerProps) {
+  const [source, setSource] = useState<
+    { file: string; line?: number; code: string } | null | "loading"
+  >(sourceProvider && step.node ? "loading" : null);
+
+  useEffect(() => {
+    if (!sourceProvider || !step.node) {
+      setSource(null);
+      return;
+    }
+    let cancelled = false;
+    setSource("loading");
+    sourceProvider(step.node)
+      .then((s) => {
+        if (!cancelled) setSource(s);
+      })
+      .catch(() => {
+        if (!cancelled) setSource(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [sourceProvider, step.node]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const kind = step.node?.kind ?? step.ref?.kind ?? "unknown";
+  const color = kindColor(profile, kind);
+  const meta = (step.node?.meta ?? {}) as Record<string, unknown>;
+
+  const metaSections = useMemo(
+    () =>
+      (
+        [
+          ["Opis", meta.description],
+          ["Schema", meta.schema],
+          ["Parametry", meta.params],
+          ["Payload", meta.payload],
+          ["Metody", meta.methods],
+          ["Protekcje", meta.protections],
+        ] as [string, unknown][]
+      ).filter(([, v]) => v !== undefined && v !== null),
+    [meta],
+  );
+
+  return (
+    <>
+      {/* Tło — klik zamyka. */}
+      <div
+        onClick={onClose}
+        style={{ position: "absolute", inset: 0, zIndex: 20 }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          top: 12,
+          right: 12,
+          bottom: 12,
+          width: 480,
+          maxWidth: "85%",
+          zIndex: 21,
+          borderRadius: 16,
+          border: `1px solid ${GLASS.border}`,
+          background: GLASS.cardStrong,
+          backdropFilter: GLASS.blur,
+          boxShadow: GLASS.shadowStrong,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+        }}
+      >
+        {/* Nagłówek */}
+        <div
+          style={{
+            padding: "12px 16px",
+            borderBottom: `1px solid ${GLASS.border}`,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <span
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 3,
+              background: color,
+              boxShadow: `0 0 0 3px ${tint(color, 0.18)}`,
+            }}
+          />
+          <div style={{ minWidth: 0 }}>
+            <div
+              style={{
+                fontWeight: 800,
+                fontSize: 14,
+                color: GLASS.text,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {step.node?.label ?? step.ref?.nodeId ?? step.label}
+            </div>
+            <div style={{ fontSize: 11, color: GLASS.textMuted }}>
+              {kind}
+              {step.method ? ` · ${step.method.name} (${step.method.kind})` : ""}
+              {!step.exists ? (
+                <span style={{ color, fontWeight: 700 }}> · niezaimplementowany</span>
+              ) : null}
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              marginLeft: "auto",
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              fontSize: 16,
+              color: GLASS.textMuted,
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Treść */}
+        <div style={{ padding: 16, overflow: "auto", flex: 1, minHeight: 0 }}>
+          {step.pins.length ? (
+            <Section title="Przypięcia">
+              {step.pins.map((pin) => {
+                const spec = profile.pinKinds?.[pin.kind];
+                const pinColor =
+                  (typeof pin.data?.color === "string"
+                    ? pin.data.color
+                    : undefined) ?? spec?.color ?? "#64748b";
+                return (
+                  <div
+                    key={`${pin.kind}:${pin.name}`}
+                    style={{
+                      display: "flex",
+                      alignItems: "baseline",
+                      gap: 6,
+                      fontSize: 12,
+                      color: GLASS.text,
+                      marginBottom: 4,
+                    }}
+                  >
+                    <span style={{ color: pinColor }}>{spec?.icon ?? "◦"}</span>
+                    <b>{pin.label}</b>
+                    <span style={{ color: GLASS.textFaint, fontSize: 10.5 }}>
+                      {spec?.label ?? pin.kind} · {pin.name}
+                      {pin.resolved ? "" : " · brak w katalogu"}
+                    </span>
+                    {typeof pin.data?.description === "string" ? (
+                      <span style={{ color: GLASS.textMuted, fontSize: 11 }}>
+                        — {pin.data.description}
+                      </span>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </Section>
+          ) : null}
+
+          <Section title="Wystąpienie">
+            <div style={{ fontSize: 12, color: GLASS.text }}>
+              <div>
+                #{step.seq} — <b>{step.label || "(bez etykiety)"}</b>
+              </div>
+              {step.stepTitle ? <div>Faza: {step.stepTitle}</div> : null}
+              {step.entryTitle ? <div>Wejście: {step.entryTitle}</div> : null}
+              {step.laneTitle ? <div>Ścieżka: {step.laneTitle}</div> : null}
+              {step.notes.map((n) => (
+                <div
+                  key={n.occId}
+                  style={{
+                    marginTop: 4,
+                    padding: "4px 8px",
+                    borderRadius: 6,
+                    background: "rgba(234,179,8,0.10)",
+                    borderLeft: "3px solid #eab308",
+                    fontSize: 11.5,
+                    color: GLASS.textMuted,
+                  }}
+                >
+                  {n.title ? <b>{n.title}: </b> : "📝 "}
+                  {n.text}
+                </div>
+              ))}
+            </div>
+          </Section>
+
+          {metaSections.map(([title, value]) => (
+            <Section key={title} title={title}>
+              {typeof value === "string" ? (
+                <div style={{ fontSize: 12, color: GLASS.text }}>{value}</div>
+              ) : (
+                <Json value={value} />
+              )}
+            </Section>
+          ))}
+
+          {source === "loading" ? (
+            <Section title="Kod">
+              <div style={{ color: GLASS.textMuted, fontSize: 12 }}>Ładuję…</div>
+            </Section>
+          ) : source ? (
+            <Section
+              title={`Kod — ${source.file}${source.line ? `:${source.line}` : ""}`}
+            >
+              <CodeBlock code={source.code} />
+            </Section>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/react/index.ts

@@ -3,7 +3,9 @@
  */
 
 export { ProcessDiagram, type ProcessDiagramProps } from "./process-diagram";
+export { ProcessDrawer, type ProcessDrawerProps, type SourceProvider } from "./drawer";
 export { makeNodeTypes } from "./nodes";
+export { Pin, Person, Metric, type PinProps } from "../mdx/pin";
 export {
   cardFor,
   contextCard,
@@ -28,15 +30,18 @@ export {
   FocusContext,
   ProcessDataContext,
   RegisterContext,
+  SelectionContext,
   StructureContext,
   ViewStateContext,
   useFocus,
   useProcessData,
   useRegister,
+  useSelection,
   useStructure,
   useViewState,
   type FocusState,
   type ProcessData,
   type RegEntry,
+  type SelectionState,
   type ViewStateActions,
 } from "../mdx/contexts";

package/src/react/nodes.tsx

@@ -7,10 +7,15 @@
 
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import { kindColor, type ProcessProfile } from "../model/profile";
-import type { ContextInfo, ProcessNode, ProcessStep } from "../model/types";
+import type {
+  ContextInfo,
+  ProcessNode,
+  ProcessStep,
+  ResolvedPin,
+} from "../model/types";
 import { useViewState } from "../mdx/contexts";
 import { cardFor, DefaultContextCard } from "./context-card";
-import { GLASS, MISSING_COLOR, tint } from "./theme";
+import { GLASS, tint } from "./theme";
 
 const KIND_ICON: Record<string, string> = {
   aggregate: "◆",
@@ -21,6 +26,7 @@ const KIND_ICON: Record<string, string> = {
   listener: "♪",
   route: "⇄",
   page: "▢",
+  tool: "⚙",
   context: "▣",
   note: "✎",
   unknown: "•",
@@ -36,6 +42,50 @@ function hiddenHandles() {
   );
 }
 
+/** Badge'e przypięć (persony/metryki/…) — kolor z katalogu lub rodzaju pinu. */
+function PinBadges({
+  profile,
+  pins,
+}: {
+  profile: ProcessProfile;
+  pins: ResolvedPin[];
+}) {
+  if (!pins.length) return null;
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 3, marginTop: 2 }}>
+      {pins.map((pin) => {
+        const spec = profile.pinKinds?.[pin.kind];
+        const color =
+          (typeof pin.data?.color === "string" ? pin.data.color : undefined) ??
+          spec?.color ??
+          "#64748b";
+        return (
+          <span
+            key={`${pin.kind}:${pin.name}`}
+            title={`${spec?.label ?? pin.kind}: ${pin.name}${
+              pin.resolved ? "" : " (brak w katalogu)"
+            }`}
+            style={{
+              fontSize: 9,
+              fontWeight: 700,
+              color: GLASS.textMuted,
+              background: tint(color, 0.1),
+              border: `1px ${pin.resolved ? "solid" : "dashed"} ${tint(color, 0.65)}`,
+              borderRadius: 99,
+              padding: "0 6px",
+              lineHeight: "14px",
+              whiteSpace: "nowrap",
+              opacity: pin.resolved ? 1 : 0.8,
+            }}
+          >
+            {spec?.icon ?? "◦"} {pin.label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
 /** Badge'e grup doczepień — toggle rozwinięcia (wspólne dla kroku i karty). */
 function GroupBadges({
   profile,
@@ -114,7 +164,12 @@ export function makeNodeTypes(profile: ProcessProfile) {
       );
     }
 
-    const color = s.exists ? kindColor(profile, s.node!.kind) : MISSING_COLOR;
+    // Kolor z ZADEKLAROWANEGO rodzaju — element nieistniejący (TODO) wygląda
+    // jak każdy inny nod swojego rodzaju, tylko z kreskowaną ramką i lekko
+    // wyblakły (parytet z chipami w prozie).
+    const declaredKind = s.node?.kind ?? s.ref?.kind ?? "unknown";
+    const color = kindColor(profile, declaredKind);
+    const missing = !s.exists;
     return (
       <div
         style={{
@@ -122,8 +177,8 @@ export function makeNodeTypes(profile: ProcessProfile) {
           height: "100%",
           boxSizing: "border-box",
           borderRadius: 13,
-          border: `1px solid ${GLASS.border}`,
-          borderLeft: `4px solid ${color}`,
+          border: `1px ${missing ? "dashed" : "solid"} ${missing ? color : GLASS.border}`,
+          borderLeft: `4px ${missing ? "dashed" : "solid"} ${color}`,
           background: GLASS.card,
           backdropFilter: GLASS.blurSoft,
           boxShadow: GLASS.shadow,
@@ -132,6 +187,7 @@ export function makeNodeTypes(profile: ProcessProfile) {
           flexDirection: "column",
           gap: 2,
           cursor: "pointer",
+          opacity: missing ? 0.8 : 1,
         }}
       >
         {hiddenHandles()}
@@ -166,12 +222,11 @@ export function makeNodeTypes(profile: ProcessProfile) {
             {s.label || s.ref?.nodeId || "?"}
           </span>
         </div>
-        <div style={{ fontSize: 10, color: s.exists ? GLASS.textMuted : MISSING_COLOR }}>
-          {KIND_ICON[s.node?.kind ?? "unknown"] ?? "•"}{" "}
-          {s.exists
-            ? `${s.node!.kind}${s.method ? ` · ${s.method.name}` : ""}`
-            : `TODO: ${s.ref?.nodeId ?? "brak referencji"}`}
+        <div style={{ fontSize: 10, color: GLASS.textMuted }}>
+          {KIND_ICON[declaredKind] ?? "•"} {declaredKind}
+          {s.method ? ` · ${s.method.name}` : ""}
         </div>
+        <PinBadges profile={profile} pins={s.pins} />
         {s.exists ? (
           <GroupBadges
             profile={profile}