fix(M02-흐름도): 알약 판 숫자에 천 단위 쉼표 · 온 길 줄에 선 규칙 글(보낸 알약 → (규칙) → 받는 알약)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D2nUMUMTsqm93PbQtipo6c

M02_MasterTemplete/DataFlow/M02_DF_PillPanel.ts

@@ -47,6 +47,7 @@ const line = (label: string, ...value: (HTMLElement | string)[]): HTMLElement =>
     children: [el("span", { className: "m02-dflink-label", text: label }), ...value],
   });
 
+/** 한 줄 = 선 하나면 「보낸 알약 → (규칙 글) → 받는 알약」 · 함수 안 걸음이면 알약 하나 */
 function steps(
   lg: CfLogic,
   list: CfStep[],
@@ -55,21 +56,30 @@ function steps(
   onBox?: (id: string) => void,
 ): HTMLElement {
   if (!list.length) return el("p", { className: "m02-dflink-note", text: empty });
+  const pill = (box: string, name: string): HTMLElement | string =>
+    onBox
+      ? createButton({
+          label: portText(lg, { box, name }),
+          variant: "ghost",
+          size: "sm",
+          onClick: () => onBox(box),
+        })
+      : portText(lg, { box, name });
   return el("ol", {
     className: "m02-dfpill-list",
     children: list.map((s) => {
-      const parts: (HTMLElement | string)[] = [
-        arrow,
-        onBox
-          ? createButton({
-              label: portText(lg, { box: s.box, name: s.port }),
-              variant: "ghost",
-              size: "sm",
-              onClick: () => onBox(s.box),
-            })
-          : portText(lg, { box: s.box, name: s.port }),
-      ];
-      if (s.rule) parts.push(el("span", { className: "m02-dfpill-rule", text: labelOf(s.rule) }));
+      const link = s.link ? lg.links.find((l) => l.id === s.link) : undefined;
+      const parts: (HTMLElement | string)[] = link
+        ? [
+            arrow,
+            pill(link.from.box, link.from.name),
+            "→",
+            ...(s.rule
+              ? [el("span", { className: "m02-dfpill-rule", text: `(${labelOf(s.rule)})` }), "→"]
+              : []),
+            pill(link.to.box, link.to.name),
+          ]
+        : [arrow, pill(s.box, s.port)];
       return el("li", { className: "m02-dfpill-step", children: parts });
     }),
   });