@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/index.cjs

@@ -1,22 +1,34 @@
 'use strict';
 
 var ui = require('@dhis2/ui');
-var dhis2FormUtilsHooks = require('@nnkogift/dhis2-form-utils-hooks');
-var react = require('react');
-var dhis2FormUtilsMetadata = require('@nnkogift/dhis2-form-utils-metadata');
 var i18n = require('@dhis2/d2-i18n');
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var react$1 = require('@xyflow/react');
+var dhis2FormUtilsHooks = require('@nnkogift/dhis2-form-utils-hooks');
+var dhis2FormUtilsMetadata = require('@nnkogift/dhis2-form-utils-metadata');
+var appRuntime = require('@dhis2/app-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 
-// src/RulesPanel.tsx
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 
 // src/buildGraph.ts
-var nodeKey = (kind, id) => `${kind}:${id}`;
-var edgeKey = (source, ruleId, target, effectType) => `${source}|${ruleId}|${target}|${effectType ?? ""}`;
 function accumulateGraph(previous, entry, labelLookup) {
   const nodes = new Map(previous.nodes.map((node) => [node.id, node]));
   const edges = new Map(previous.edges.map((edge) => [edge.id, edge]));
@@ -78,167 +90,13 @@ function buildGraphFromTrace(entries, labelLookup) {
     { nodes: [], edges: [] }
   );
 }
-var createLookup = (rules, fields, sections, stages) => ({
-  resolveRuleName: (id) => rules.get(id) ?? id,
-  resolveFieldName: (id) => fields.get(id) ?? id,
-  resolveSectionName: (id) => sections.get(id) ?? id,
-  resolveStageName: (id) => stages.get(id) ?? id
-});
-function buildEventLookup(source) {
-  const rules = /* @__PURE__ */ new Map();
-  const fields = /* @__PURE__ */ new Map();
-  const sections = /* @__PURE__ */ new Map();
-  const stages = /* @__PURE__ */ new Map();
-  for (const rule of source.metadata.programRules) {
-    if (!rule.id) {
-      continue;
-    }
-    rules.set(rule.id, rule.displayName ?? rule.id);
-  }
-  const stage = dhis2FormUtilsMetadata.selectProgramStage(
-    source.metadata,
-    source.programStageId
-  ) ?? {
-    id: source.programStageId,
-    programStageDataElements: [],
-    programStageSections: []
-  };
-  for (const psde of stage.programStageDataElements ?? []) {
-    const de = psde.dataElement;
-    if (!de?.id) {
-      continue;
-    }
-    fields.set(de.id, de.displayFormName ?? de.displayName ?? de.id);
-  }
-  for (const section of stage.programStageSections ?? []) {
-    sections.set(section.id, section.displayName ?? section.id);
-  }
-  for (const programStage of source.metadata.programStages) {
-    if (!programStage.id) {
-      continue;
-    }
-    stages.set(programStage.id, programStage.displayName ?? programStage.id);
-  }
-  return createLookup(rules, fields, sections, stages);
-}
-function buildTrackerLookup(source) {
-  const rules = /* @__PURE__ */ new Map();
-  const fields = /* @__PURE__ */ new Map();
-  const sections = /* @__PURE__ */ new Map();
-  const stages = /* @__PURE__ */ new Map();
-  for (const rule of source.metadata.programRules) {
-    if (!rule.id) {
-      continue;
-    }
-    rules.set(rule.id, rule.name ?? rule.id);
-  }
-  for (const ptea of source.metadata.programTrackedEntityAttributes) {
-    const tea = ptea.trackedEntityAttribute;
-    if (!tea.id) {
-      continue;
-    }
-    fields.set(tea.id, tea.formName ?? tea.displayName ?? tea.id);
-  }
-  for (const section of source.metadata.programSections ?? []) {
-    sections.set(section.id, section.displayName ?? section.id);
-  }
-  for (const programStage of source.programStages ?? []) {
-    if (!programStage.id) {
-      continue;
-    }
-    stages.set(programStage.id, programStage.displayName ?? programStage.id);
-  }
-  return createLookup(rules, fields, sections, stages);
-}
-function createLabelLookup(source) {
-  return source.formKind === "event" ? buildEventLookup(source) : buildTrackerLookup(source);
-}
-var EFFECT_VARIANT = {
-  HIDEFIELD: "hide",
-  HIDEOPTION: "hide",
-  HIDEOPTIONGROUP: "hide",
-  HIDESECTION: "hide",
-  HIDEPROGRAMSTAGE: "hide",
-  SHOWFIELD: "show",
-  SHOWOPTION: "show",
-  SHOWOPTIONGROUP: "show",
-  ASSIGN: "assign",
-  SETMANDATORYFIELD: "mandatory",
-  UNSETMANDATORYFIELD: "mandatory",
-  SHOWWARNING: "warning",
-  WARNINGONCOMPLETE: "warning",
-  SHOWERROR: "error",
-  ERRORONCOMPLETE: "error",
-  DISPLAYTEXT: "feedback",
-  DISPLAYKEYVALUEPAIR: "feedback",
-  SENDMESSAGE: "message",
-  SCHEDULEMESSAGE: "message",
-  read: "read"
-};
-var EFFECT_VISUALS = {
-  hide: {
-    tagClassName: "bg-dhis2-grey-200 text-dhis2-grey-900",
-    edgeStroke: "#494949",
-    shortLabel: "hide"
-  },
-  show: {
-    tagClassName: "bg-dhis2-green-100 text-dhis2-green-900",
-    edgeStroke: "#388e3c",
-    shortLabel: "show"
-  },
-  assign: {
-    tagClassName: "bg-dhis2-blue-100 text-dhis2-blue-900",
-    edgeStroke: "#1565c0",
-    shortLabel: "assign"
-  },
-  mandatory: {
-    tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
-    edgeStroke: "#e56408",
-    shortLabel: "required"
-  },
-  warning: {
-    tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
-    edgeStroke: "#ff8302",
-    shortLabel: "warn"
-  },
-  error: {
-    tagClassName: "bg-dhis2-red-100 text-dhis2-red-900",
-    edgeStroke: "#c62828",
-    shortLabel: "error"
-  },
-  feedback: {
-    tagClassName: "bg-dhis2-purple-100 text-dhis2-purple-900",
-    edgeStroke: "#9c27b0",
-    shortLabel: "feedback"
-  },
-  message: {
-    tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
-    edgeStroke: "#00796b",
-    shortLabel: "message"
-  },
-  read: {
-    tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
-    edgeStroke: "#00796b",
-    shortLabel: "read"
-  },
-  default: {
-    tagClassName: "bg-dhis2-grey-100 text-dhis2-grey-800",
-    edgeStroke: "#494949",
-    shortLabel: "effect"
+var nodeKey, edgeKey;
+var init_buildGraph = __esm({
+  "src/buildGraph.ts"() {
+    nodeKey = (kind, id) => `${kind}:${id}`;
+    edgeKey = (source, ruleId, target, effectType) => `${source}|${ruleId}|${target}|${effectType ?? ""}`;
   }
-};
-var EFFECT_ICONS = {
-  hide: ui.IconViewOff16,
-  show: ui.IconView16,
-  assign: ui.IconEdit16,
-  mandatory: ui.IconStarFilled16,
-  warning: ui.IconWarningFilled16,
-  error: ui.IconErrorFilled16,
-  feedback: ui.IconMessages16,
-  message: ui.IconMail16,
-  read: ui.IconLink16,
-  default: ui.IconInfo16
-};
+});
 function getEffectVariant(type) {
   return EFFECT_VARIANT[type] ?? "default";
 }
@@ -246,7 +104,6 @@ function getEffectVisual(type) {
   const variant = getEffectVariant(type);
   return { variant, ...EFFECT_VISUALS[variant] };
 }
-var TAG_LAYOUT_CLASS = "max-w-full break-words";
 function tagPropsForVariant(variant) {
   switch (variant) {
     case "show":
@@ -286,12 +143,108 @@ function getEffectEdgeStroke(type, highlighted = true) {
 function getEffectShortLabel(type) {
   return getEffectVisual(type).shortLabel;
 }
+var EFFECT_VARIANT, EFFECT_VISUALS; exports.EFFECT_ICONS = void 0; var TAG_LAYOUT_CLASS;
+var init_effectStyles = __esm({
+  "src/effectStyles.ts"() {
+    EFFECT_VARIANT = {
+      HIDEFIELD: "hide",
+      HIDEOPTION: "hide",
+      HIDEOPTIONGROUP: "hide",
+      HIDESECTION: "hide",
+      HIDEPROGRAMSTAGE: "hide",
+      SHOWFIELD: "show",
+      SHOWOPTION: "show",
+      SHOWOPTIONGROUP: "show",
+      ASSIGN: "assign",
+      SETMANDATORYFIELD: "mandatory",
+      UNSETMANDATORYFIELD: "mandatory",
+      SHOWWARNING: "warning",
+      WARNINGONCOMPLETE: "warning",
+      SHOWERROR: "error",
+      ERRORONCOMPLETE: "error",
+      DISPLAYTEXT: "feedback",
+      DISPLAYKEYVALUEPAIR: "feedback",
+      SENDMESSAGE: "message",
+      SCHEDULEMESSAGE: "message",
+      read: "read"
+    };
+    EFFECT_VISUALS = {
+      hide: {
+        tagClassName: "bg-dhis2-grey-200 text-dhis2-grey-900",
+        edgeStroke: "#494949",
+        shortLabel: "hide"
+      },
+      show: {
+        tagClassName: "bg-dhis2-green-100 text-dhis2-green-900",
+        edgeStroke: "#388e3c",
+        shortLabel: "show"
+      },
+      assign: {
+        tagClassName: "bg-dhis2-blue-100 text-dhis2-blue-900",
+        edgeStroke: "#1565c0",
+        shortLabel: "assign"
+      },
+      mandatory: {
+        tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
+        edgeStroke: "#e56408",
+        shortLabel: "required"
+      },
+      warning: {
+        tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
+        edgeStroke: "#ff8302",
+        shortLabel: "warn"
+      },
+      error: {
+        tagClassName: "bg-dhis2-red-100 text-dhis2-red-900",
+        edgeStroke: "#c62828",
+        shortLabel: "error"
+      },
+      feedback: {
+        tagClassName: "bg-dhis2-purple-100 text-dhis2-purple-900",
+        edgeStroke: "#9c27b0",
+        shortLabel: "feedback"
+      },
+      message: {
+        tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
+        edgeStroke: "#00796b",
+        shortLabel: "message"
+      },
+      read: {
+        tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
+        edgeStroke: "#00796b",
+        shortLabel: "read"
+      },
+      default: {
+        tagClassName: "bg-dhis2-grey-100 text-dhis2-grey-800",
+        edgeStroke: "#494949",
+        shortLabel: "effect"
+      }
+    };
+    exports.EFFECT_ICONS = {
+      hide: ui.IconViewOff16,
+      show: ui.IconView16,
+      assign: ui.IconEdit16,
+      mandatory: ui.IconStarFilled16,
+      warning: ui.IconWarningFilled16,
+      error: ui.IconErrorFilled16,
+      feedback: ui.IconMessages16,
+      message: ui.IconMail16,
+      read: ui.IconLink16,
+      default: ui.IconInfo16
+    };
+    TAG_LAYOUT_CLASS = "max-w-full break-words";
+  }
+});
 function translate(message, variables) {
   return String(i18n__default.default.t(message, variables));
 }
+var init_i18n = __esm({
+  "src/i18n.ts"() {
+  }
+});
 function EffectBadge({ type, children, className = "" }) {
   const variant = getEffectVariant(type);
-  const Icon = EFFECT_ICONS[variant];
+  const Icon = exports.EFFECT_ICONS[variant];
   const tagProps = getEffectTagRenderProps(type);
   const label = children ?? type;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -305,23 +258,13 @@ function EffectBadge({ type, children, className = "" }) {
     }
   );
 }
-var LEGEND_VARIANTS = [
-  { variant: "read", label: translate("Read") },
-  { variant: "hide", label: translate("Hide") },
-  { variant: "show", label: translate("Show") },
-  { variant: "assign", label: translate("Assign") },
-  { variant: "mandatory", label: translate("Required") },
-  { variant: "warning", label: translate("Warning") },
-  { variant: "error", label: translate("Error") },
-  { variant: "feedback", label: translate("Feedback") }
-];
 function EffectLegend({ activeVariants }) {
   const items = LEGEND_VARIANTS.filter((item) => activeVariants.has(item.variant));
   if (!items.length) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-dp8 border-t border-dhis2-grey-200 px-dp12 py-dp8", children: items.map((item) => {
-    const Icon = EFFECT_ICONS[item.variant];
+    const Icon = exports.EFFECT_ICONS[item.variant];
     const tagProps = getEffectTagRenderPropsForVariant(item.variant);
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Tag,
@@ -335,230 +278,74 @@ function EffectLegend({ activeVariants }) {
     );
   }) });
 }
-
-// src/formatAgo.ts
-function formatAgo(timestamp, now = Date.now()) {
-  const diffMs = Math.max(0, now - timestamp);
-  if (diffMs < 5e3) {
-    return translate("just now");
-  }
-  const seconds = Math.floor(diffMs / 1e3);
-  if (seconds < 60) {
-    return translate("{{seconds}}s ago", { seconds });
+var LEGEND_VARIANTS;
+var init_EffectBadge = __esm({
+  "src/EffectBadge.tsx"() {
+    init_effectStyles();
+    init_i18n();
+    LEGEND_VARIANTS = [
+      { variant: "read", label: translate("Read") },
+      { variant: "hide", label: translate("Hide") },
+      { variant: "show", label: translate("Show") },
+      { variant: "assign", label: translate("Assign") },
+      { variant: "mandatory", label: translate("Required") },
+      { variant: "warning", label: translate("Warning") },
+      { variant: "error", label: translate("Error") },
+      { variant: "feedback", label: translate("Feedback") }
+    ];
   }
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) {
-    return translate("{{minutes}}m ago", { minutes });
+});
+
+// src/traceEntry.ts
+function resolveGraphTraceEntry(entries, selectedEntryId) {
+  if (!entries.length) {
+    return null;
   }
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) {
-    return translate("{{hours}}h ago", { hours });
+  if (selectedEntryId) {
+    return entries.find((entry) => entry.id === selectedEntryId) ?? entries[entries.length - 1];
   }
-  return new Date(timestamp).toLocaleString();
+  return entries[entries.length - 1];
 }
-
-// src/formatRuleActionSummary.ts
-function resolveFieldLabel(id, displayName, labelLookup) {
-  if (labelLookup) {
-    const resolved = labelLookup.resolveFieldName(id);
-    if (resolved !== id) {
-      return resolved;
-    }
+function getActiveRuleIds(entries) {
+  const latest = resolveGraphTraceEntry(entries);
+  if (!latest) {
+    return /* @__PURE__ */ new Set();
   }
-  return displayName ?? id;
+  return new Set(latest.ruleResults.map((result) => result.ruleId));
 }
-function resolveSectionLabel(id, displayName, labelLookup) {
-  if (labelLookup) {
-    const resolved = labelLookup.resolveSectionName(id);
-    if (resolved !== id) {
-      return resolved;
-    }
+var init_traceEntry = __esm({
+  "src/traceEntry.ts"() {
   }
-  return displayName ?? id;
+});
+
+// src/graphLayout.ts
+function median(values) {
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
 }
-function formatRuleActionSummary(action, labelLookup) {
-  const type = action.programRuleActionType ?? "UNKNOWN";
-  let targetLabel = "";
-  if (action.dataElement?.id) {
-    targetLabel = resolveFieldLabel(
-      action.dataElement.id,
-      action.dataElement.displayName,
-      labelLookup
-    );
-  } else if (action.trackedEntityAttribute?.id) {
-    targetLabel = resolveFieldLabel(
-      action.trackedEntityAttribute.id,
-      action.trackedEntityAttribute.displayName,
-      labelLookup
-    );
-  } else if (action.programStageSection?.id) {
-    targetLabel = resolveSectionLabel(
-      action.programStageSection.id,
-      action.programStageSection.displayName,
-      labelLookup
-    );
-  } else if (action.programSection?.id) {
-    targetLabel = resolveSectionLabel(
-      action.programSection.id,
-      action.programSection.displayName,
-      labelLookup
-    );
-  } else if (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR") {
-    targetLabel = action.location ?? "feedback";
-  }
-  let detail;
-  if (action.data) {
-    detail = action.data;
-  }
-  if (action.content && (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR")) {
-    detail = action.content;
+function staggerOffset(indexInBucket) {
+  if (indexInBucket === 0) {
+    return 0;
   }
-  return { type, targetLabel, detail };
-}
-
-// src/resolveProgramRulesList.ts
-function sortByPriority(rules) {
-  return [...rules].sort((left, right) => (left.priority ?? 0) - (right.priority ?? 0));
+  const magnitude = Math.ceil(indexInBucket / 2) * STAGGER;
+  return indexInBucket % 2 === 1 ? magnitude : -magnitude;
 }
-function toCatalogRule(rule) {
-  return {
-    id: rule.id,
-    name: rule.name,
-    condition: rule.condition,
-    priority: rule.priority,
-    programRuleActions: [...rule.programRuleActions ?? []],
-    programStageId: rule.programStageId
-  };
+function columnFor(node) {
+  if (node.role === "target" && node.kind === "feedback") {
+    return FEEDBACK_COLUMN;
+  }
+  return ROLE_COLUMNS[node.role];
 }
-function resolveProgramRulesList(metadata) {
-  if (metadata.formKind === "event") {
-    return sortByPriority(
-      metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
-        (rule) => toCatalogRule({
-          id: rule.id,
-          name: rule.displayName ?? rule.id,
-          condition: rule.condition,
-          priority: rule.priority,
-          programRuleActions: rule.programRuleActions,
-          programStageId: rule.programStage?.id ?? null
-        })
-      )
-    );
-  }
-  return sortByPriority(
-    metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
-      (rule) => toCatalogRule({
-        id: rule.id,
-        name: rule.name ?? rule.id,
-        condition: rule.condition,
-        priority: rule.priority,
-        programRuleActions: rule.programRuleActions,
-        programStageId: rule.programStage?.id ?? null
-      })
-    )
-  );
-}
-
-// src/constants.ts
-var DEFAULT_TRACE_MAX_ENTRIES = 200;
-
-// src/traceStore.ts
-function createRuleTraceStore(maxEntries = DEFAULT_TRACE_MAX_ENTRIES) {
-  let entries = [];
-  const listeners = /* @__PURE__ */ new Set();
-  let disposeTraceSubscription = null;
-  const notify = () => {
-    for (const listener of listeners) {
-      listener();
-    }
-  };
-  return {
-    record(entry) {
-      entries = [...entries, entry].slice(-maxEntries);
-      notify();
-    },
-    getSnapshot() {
-      return entries;
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    dispose() {
-      disposeTraceSubscription?.();
-      disposeTraceSubscription = null;
-      listeners.clear();
-    },
-    bindTraceSubscription(unsubscribe) {
-      disposeTraceSubscription = unsubscribe;
-    }
-  };
-}
-
-// src/attach.ts
-function attachRuleDevtools(formStore, options) {
-  const store = createRuleTraceStore(
-    DEFAULT_TRACE_MAX_ENTRIES
-  );
-  store.bindTraceSubscription(formStore.subscribeTrace(store.record));
-  return store;
-}
-var RuleTraceContext = react.createContext(null);
-function RuleDevtoolsScope({ formStore, children }) {
-  const traceStore = react.useMemo(() => attachRuleDevtools(formStore), [formStore]);
-  react.useEffect(() => {
-    return () => {
-      traceStore.dispose();
-    };
-  }, [traceStore]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RuleTraceContext.Provider, { value: traceStore, children });
-}
-function useRuleTraceStore() {
-  const store = react.useContext(RuleTraceContext);
-  if (!store) {
-    throw new Error("useRuleTraceStore must be used within RuleDevtoolsScope");
-  }
-  return store;
-}
-
-// src/graphLayout.ts
-var ROLE_COLUMNS = {
-  source: 0,
-  rule: 280,
-  target: 560
-};
-var FEEDBACK_COLUMN = 720;
-var LANE_HEIGHT = 104;
-var STAGGER = 24;
-function median(values) {
-  const sorted = [...values].sort((a, b) => a - b);
-  const mid = Math.floor(sorted.length / 2);
-  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
-}
-function staggerOffset(indexInBucket) {
-  if (indexInBucket === 0) {
-    return 0;
-  }
-  const magnitude = Math.ceil(indexInBucket / 2) * STAGGER;
-  return indexInBucket % 2 === 1 ? magnitude : -magnitude;
-}
-function columnFor(node) {
-  if (node.role === "target" && node.kind === "feedback") {
-    return FEEDBACK_COLUMN;
-  }
-  return ROLE_COLUMNS[node.role];
-}
-function prepareFlowGraph(graph) {
-  const readSources = /* @__PURE__ */ new Set();
-  const effectTargets = /* @__PURE__ */ new Set();
-  for (const edge of graph.edges) {
-    if (edge.effectType === "read") {
-      readSources.add(edge.source);
-    } else {
-      effectTargets.add(edge.target);
-    }
+function prepareFlowGraph(graph) {
+  const readSources = /* @__PURE__ */ new Set();
+  const effectTargets = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    if (edge.effectType === "read") {
+      readSources.add(edge.source);
+    } else {
+      effectTargets.add(edge.target);
+    }
   }
   const flowNodes = [];
   const endpointByGraphId = /* @__PURE__ */ new Map();
@@ -651,59 +438,57 @@ function computeGraphLayout(flowNodes, flowEdges) {
   }
   return positions;
 }
+var ROLE_COLUMNS, FEEDBACK_COLUMN, LANE_HEIGHT, STAGGER;
+var init_graphLayout = __esm({
+  "src/graphLayout.ts"() {
+    ROLE_COLUMNS = {
+      source: 0,
+      rule: 280,
+      target: 560
+    };
+    FEEDBACK_COLUMN = 720;
+    LANE_HEIGHT = 104;
+    STAGGER = 24;
+    ({
+      field: ROLE_COLUMNS.source,
+      rule: ROLE_COLUMNS.rule,
+      section: ROLE_COLUMNS.target,
+      feedback: FEEDBACK_COLUMN
+    });
+  }
+});
 
 // src/graphNodeStyles.ts
-var GRAPH_NODE_CLASSES = {
-  field: "border-dhis2-blue-500",
-  rule: "border-dhis2-teal-600 bg-dhis2-teal-050",
-  section: "border-dhis2-grey-600",
-  feedback: "border-dhis2-purple-500"
-};
-var LEGEND_SWATCH_CLASSES = {
-  field: "bg-dhis2-blue-500",
-  rule: "bg-dhis2-teal-600",
-  section: "bg-dhis2-grey-600",
-  feedback: "bg-dhis2-purple-500"
-};
 function getGraphNodeClassName(kind, highlighted) {
   return `p-dp8 rounded border bg-white min-w-28 max-w-[180px] text-xs shadow-[0_1px_2px_rgb(0_0_0/6%)] transition-opacity duration-150 ease-out cursor-grab active:cursor-grabbing ${GRAPH_NODE_CLASSES[kind]} ${highlighted ? "" : "opacity-35"}`;
 }
 function getLegendSwatchClassName(kind) {
   return `size-2.5 shrink-0 rounded-sm ${LEGEND_SWATCH_CLASSES[kind]}`;
 }
-
-// src/traceEntry.ts
-function resolveGraphTraceEntry(entries, selectedEntryId) {
-  if (!entries.length) {
-    return null;
-  }
-  if (selectedEntryId) {
-    return entries.find((entry) => entry.id === selectedEntryId) ?? entries[entries.length - 1];
-  }
-  return entries[entries.length - 1];
-}
-function getActiveRuleIds(entries) {
-  const latest = resolveGraphTraceEntry(entries);
-  if (!latest) {
-    return /* @__PURE__ */ new Set();
-  }
-  return new Set(latest.ruleResults.map((result) => result.ruleId));
-}
-var KIND_LABELS = {
-  field: "Field",
-  rule: "Rule",
-  section: "Section",
-  feedback: "Feedback"
-};
-var READ_LABEL_EDGE_THRESHOLD = 4;
-var DEFAULT_EDGE_OPTIONS = {
-  type: "ruleGraphEdge",
-  style: { stroke: getEffectEdgeStroke("default") },
-  markerEnd: {
-    type: react$1.MarkerType.ArrowClosed,
-    color: getEffectEdgeStroke("default")
+var GRAPH_NODE_CLASSES, LEGEND_SWATCH_CLASSES;
+var init_graphNodeStyles = __esm({
+  "src/graphNodeStyles.ts"() {
+    GRAPH_NODE_CLASSES = {
+      field: "border-dhis2-blue-500",
+      rule: "border-dhis2-teal-600 bg-dhis2-teal-050",
+      section: "border-dhis2-grey-600",
+      feedback: "border-dhis2-purple-500"
+    };
+    LEGEND_SWATCH_CLASSES = {
+      field: "bg-dhis2-blue-500",
+      rule: "bg-dhis2-teal-600",
+      section: "bg-dhis2-grey-600",
+      feedback: "bg-dhis2-purple-500"
+    };
   }
-};
+});
+
+// src/RuleGraphView.tsx
+var RuleGraphView_exports = {};
+__export(RuleGraphView_exports, {
+  RuleGraphView: () => RuleGraphView,
+  toFlowGraph: () => toFlowGraph
+});
 function RuleGraphNode({ data }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getGraphNodeClassName(data.kind, data.highlighted), children: [
     /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left }),
@@ -713,9 +498,6 @@ function RuleGraphNode({ data }) {
     /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right })
   ] });
 }
-var nodeTypes = {
-  ruleGraphNode: react.memo(RuleGraphNode)
-};
 function RuleGraphEdge({
   id,
   sourceX,
@@ -777,9 +559,6 @@ function RuleGraphEdge({
     ) }) : null
   ] });
 }
-var edgeTypes = {
-  ruleGraphEdge: react.memo(RuleGraphEdge)
-};
 function effectNodeKey(effect) {
   const kind = effect.type === "HIDESECTION" ? "section" : effect.type === "DISPLAYTEXT" || effect.type === "DISPLAYKEYVALUEPAIR" ? "feedback" : "field";
   return `${kind}:${effect.targetId}`;
@@ -809,15 +588,6 @@ function ruleGraphKeys(entry, ruleId) {
   }
   return keys;
 }
-var formatDisplayValue = (value) => {
-  if (value === void 0 || value === null || value === "") {
-    return void 0;
-  }
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  return JSON.stringify(value);
-};
 function toFlowGraph(graph, fieldState, formValues, highlightedKeys) {
   const { nodes: flowNodes, edges: flowEdges } = prepareFlowGraph(graph);
   const positions = computeGraphLayout(flowNodes, flowEdges);
@@ -896,210 +666,1015 @@ function GraphToolbar({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 border-b border-dhis2-grey-200 bg-white", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-dp8 px-dp12 py-dp8", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        "div",
+        {
+          className: "flex min-w-0 flex-wrap items-center gap-x-dp12 gap-y-dp8",
+          "aria-hidden": "true",
+          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: getLegendSwatchClassName(item.kind) }),
+                item.label
+              ]
+            },
+            item.kind
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-dhis2-grey-600", children: translate("{{nodes}} nodes \xB7 {{edges}} edges", {
+          nodes: nodeCount,
+          edges: edgeCount
+        }) }),
+        headerActions
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(EffectLegend, { activeVariants: activeEffectVariants })
+  ] });
+}
+function FitViewOnChange({
+  layoutKey,
+  nodeCount,
+  edgeCount
+}) {
+  const { fitView } = react$1.useReactFlow();
+  react.useEffect(() => {
+    const frameId = requestAnimationFrame(() => {
+      void fitView({ padding: 0.2, duration: 150 });
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [edgeCount, fitView, layoutKey, nodeCount]);
+  return null;
+}
+function mergeNodePositions(next, current) {
+  const currentById = new Map(current.map((node) => [node.id, node]));
+  return next.map((node) => {
+    const existing = currentById.get(node.id);
+    if (existing) {
+      return { ...node, position: existing.position };
+    }
+    return node;
+  });
+}
+function RuleGraphCanvas({
+  nodes: layoutNodes,
+  edges: layoutEdges,
+  layoutKey
+}) {
+  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(layoutEdges);
+  react.useEffect(() => {
+    setNodes((current) => mergeNodePositions(layoutNodes, current));
+  }, [layoutNodes, setNodes]);
+  react.useEffect(() => {
+    setEdges(layoutEdges);
+  }, [layoutEdges, setEdges]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes,
+      edgeTypes,
+      onNodesChange,
+      onEdgesChange,
+      nodesDraggable: true,
+      defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+      elevateEdgesOnSelect: true,
+      fitView: true,
+      proOptions: { hideAttribution: true },
+      className: "h-full w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FitViewOnChange,
+          {
+            layoutKey,
+            nodeCount: nodes.length,
+            edgeCount: edges.length
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 16, size: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false })
+      ]
+    }
+  );
+}
+function RuleGraphView({
+  entries,
+  fieldState,
+  formValues,
+  selectedEntryId,
+  highlightRuleId,
+  labelLookup,
+  className,
+  layoutKey,
+  headerActions,
+  minHeightClassName = "min-h-[360px]"
+}) {
+  const graphEntry = react.useMemo(
+    () => resolveGraphTraceEntry(entries, selectedEntryId),
+    [entries, selectedEntryId]
+  );
+  const graph = react.useMemo(
+    () => graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },
+    [graphEntry, labelLookup]
+  );
+  const highlightedKeys = react.useMemo(() => {
+    if (!graphEntry || !selectedEntryId && !highlightRuleId) {
+      return null;
+    }
+    const keys = /* @__PURE__ */ new Set();
+    if (selectedEntryId) {
+      for (const key of entryGraphKeys(graphEntry)) {
+        keys.add(key);
+      }
+    }
+    if (highlightRuleId) {
+      for (const key of ruleGraphKeys(graphEntry, highlightRuleId)) {
+        keys.add(key);
+      }
+    }
+    return keys;
+  }, [graphEntry, highlightRuleId, selectedEntryId]);
+  const { nodes, edges } = react.useMemo(
+    () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),
+    [graph, fieldState, formValues, highlightedKeys]
+  );
+  const activeEffectVariants = react.useMemo(() => {
+    const variants = /* @__PURE__ */ new Set();
+    for (const edge of graph.edges) {
+      if (edge.effectType) {
+        variants.add(getEffectVariant(edge.effectType));
+      }
+    }
+    return variants;
+  }, [graph.edges]);
+  if (!graph.nodes.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.NoticeBox, { title: translate("No rule relationships yet"), children: translate(
+      "Interact with the form to build the dependency graph. Only rules active in the latest evaluation are shown. Select a trace entry to inspect a past evaluation. Connections flow Field \u2192 Rule \u2192 Target (read / effect)."
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex h-full min-h-[480px] flex-1 flex-col overflow-hidden rounded-md border border-dhis2-grey-200 bg-white ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GraphToolbar,
+          {
+            nodeCount: graph.nodes.length,
+            edgeCount: graph.edges.length,
+            headerActions,
+            activeEffectVariants
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${minHeightClassName} flex-1 bg-white`,
+            style: { width: "100%", height: "100%" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(RuleGraphCanvas, { nodes, edges, layoutKey }) })
+          }
+        )
+      ]
+    }
+  );
+}
+var KIND_LABELS, READ_LABEL_EDGE_THRESHOLD, DEFAULT_EDGE_OPTIONS, nodeTypes, edgeTypes, formatDisplayValue;
+var init_RuleGraphView = __esm({
+  "src/RuleGraphView.tsx"() {
+    init_buildGraph();
+    init_graphLayout();
+    init_EffectBadge();
+    init_effectStyles();
+    init_graphNodeStyles();
+    init_i18n();
+    init_traceEntry();
+    KIND_LABELS = {
+      field: "Field",
+      rule: "Rule",
+      section: "Section",
+      feedback: "Feedback"
+    };
+    READ_LABEL_EDGE_THRESHOLD = 4;
+    DEFAULT_EDGE_OPTIONS = {
+      type: "ruleGraphEdge",
+      style: { stroke: getEffectEdgeStroke("default") },
+      markerEnd: {
+        type: react$1.MarkerType.ArrowClosed,
+        color: getEffectEdgeStroke("default")
+      }
+    };
+    nodeTypes = {
+      ruleGraphNode: react.memo(RuleGraphNode)
+    };
+    edgeTypes = {
+      ruleGraphEdge: react.memo(RuleGraphEdge)
+    };
+    formatDisplayValue = (value) => {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+      }
+      return JSON.stringify(value);
+    };
+  }
+});
+
+// src/RuleGraphModal.tsx
+var RuleGraphModal_exports = {};
+__export(RuleGraphModal_exports, {
+  RuleGraphModal: () => RuleGraphModal
+});
+function RuleGraphModal({
+  open,
+  onClose,
+  subtitle,
+  layoutKey,
+  ...graphProps
+}) {
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { large: true, fluid: true, onClose, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.ModalTitle, { children: [
+      translate("Rule dependency graph"),
+      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-dp4 block text-sm font-normal text-dhis2-grey-700", children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RuleGraphView,
+      {
+        ...graphProps,
+        layoutKey: layoutKey ?? "modal",
+        className: "h-full min-h-0 rounded-none border-0",
+        minHeightClassName: "min-h-0 h-full"
+      }
+    ) }) })
+  ] });
+}
+var init_RuleGraphModal = __esm({
+  "src/RuleGraphModal.tsx"() {
+    init_i18n();
+    init_RuleGraphView();
+  }
+});
+
+// src/RulesPanel.tsx
+init_buildGraph();
+var createLookup = (rules, fields, sections, stages) => ({
+  resolveRuleName: (id) => rules.get(id) ?? id,
+  resolveFieldName: (id) => fields.get(id) ?? id,
+  resolveSectionName: (id) => sections.get(id) ?? id,
+  resolveStageName: (id) => stages.get(id) ?? id
+});
+function buildEventLookup(source) {
+  const rules = /* @__PURE__ */ new Map();
+  const fields = /* @__PURE__ */ new Map();
+  const sections = /* @__PURE__ */ new Map();
+  const stages = /* @__PURE__ */ new Map();
+  for (const rule of source.metadata.programRules) {
+    if (!rule.id) {
+      continue;
+    }
+    rules.set(rule.id, rule.displayName ?? rule.id);
+  }
+  const stage = dhis2FormUtilsMetadata.selectProgramStage(
+    source.metadata,
+    source.programStageId
+  ) ?? {
+    id: source.programStageId,
+    programStageDataElements: [],
+    programStageSections: []
+  };
+  for (const psde of stage.programStageDataElements ?? []) {
+    const de = psde.dataElement;
+    if (!de?.id) {
+      continue;
+    }
+    fields.set(de.id, de.displayFormName ?? de.displayName ?? de.id);
+  }
+  for (const section of stage.programStageSections ?? []) {
+    sections.set(section.id, section.displayName ?? section.id);
+  }
+  for (const programStage of source.metadata.programStages) {
+    if (!programStage.id) {
+      continue;
+    }
+    stages.set(programStage.id, programStage.displayName ?? programStage.id);
+  }
+  return createLookup(rules, fields, sections, stages);
+}
+function buildTrackerLookup(source) {
+  const rules = /* @__PURE__ */ new Map();
+  const fields = /* @__PURE__ */ new Map();
+  const sections = /* @__PURE__ */ new Map();
+  const stages = /* @__PURE__ */ new Map();
+  for (const rule of source.metadata.programRules) {
+    if (!rule.id) {
+      continue;
+    }
+    rules.set(rule.id, rule.name ?? rule.id);
+  }
+  for (const ptea of source.metadata.programTrackedEntityAttributes) {
+    const tea = ptea.trackedEntityAttribute;
+    if (!tea.id) {
+      continue;
+    }
+    fields.set(tea.id, tea.formName ?? tea.displayName ?? tea.id);
+  }
+  for (const section of source.metadata.programSections ?? []) {
+    sections.set(section.id, section.displayName ?? section.id);
+  }
+  for (const programStage of source.programStages ?? []) {
+    if (!programStage.id) {
+      continue;
+    }
+    stages.set(programStage.id, programStage.displayName ?? programStage.id);
+  }
+  return createLookup(rules, fields, sections, stages);
+}
+function createLabelLookup(source) {
+  return source.formKind === "event" ? buildEventLookup(source) : buildTrackerLookup(source);
+}
+
+// src/RulesPanel.tsx
+init_EffectBadge();
+
+// src/formatAgo.ts
+init_i18n();
+function formatAgo(timestamp, now = Date.now()) {
+  const diffMs = Math.max(0, now - timestamp);
+  if (diffMs < 5e3) {
+    return translate("just now");
+  }
+  const seconds = Math.floor(diffMs / 1e3);
+  if (seconds < 60) {
+    return translate("{{seconds}}s ago", { seconds });
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return translate("{{minutes}}m ago", { minutes });
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return translate("{{hours}}h ago", { hours });
+  }
+  return new Date(timestamp).toLocaleString();
+}
+
+// src/formatRuleActionSummary.ts
+function resolveFieldLabel(id, displayName, labelLookup) {
+  if (labelLookup) {
+    const resolved = labelLookup.resolveFieldName(id);
+    if (resolved !== id) {
+      return resolved;
+    }
+  }
+  return displayName ?? id;
+}
+function resolveSectionLabel(id, displayName, labelLookup) {
+  if (labelLookup) {
+    const resolved = labelLookup.resolveSectionName(id);
+    if (resolved !== id) {
+      return resolved;
+    }
+  }
+  return displayName ?? id;
+}
+function formatRuleActionSummary(action, labelLookup) {
+  const type = action.programRuleActionType ?? "UNKNOWN";
+  let targetLabel = "";
+  if (action.dataElement?.id) {
+    targetLabel = resolveFieldLabel(
+      action.dataElement.id,
+      action.dataElement.displayName,
+      labelLookup
+    );
+  } else if (action.trackedEntityAttribute?.id) {
+    targetLabel = resolveFieldLabel(
+      action.trackedEntityAttribute.id,
+      action.trackedEntityAttribute.displayName,
+      labelLookup
+    );
+  } else if (action.programStageSection?.id) {
+    targetLabel = resolveSectionLabel(
+      action.programStageSection.id,
+      action.programStageSection.displayName,
+      labelLookup
+    );
+  } else if (action.programSection?.id) {
+    targetLabel = resolveSectionLabel(
+      action.programSection.id,
+      action.programSection.displayName,
+      labelLookup
+    );
+  } else if (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR") {
+    targetLabel = action.location ?? "feedback";
+  }
+  let detail;
+  if (action.data) {
+    detail = action.data;
+  }
+  if (action.content && (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR")) {
+    detail = action.content;
+  }
+  return { type, targetLabel, detail };
+}
+
+// src/RulesPanel.tsx
+init_i18n();
+
+// src/resolveProgramRulesList.ts
+function sortByPriority(rules) {
+  return [...rules].sort((left, right) => (left.priority ?? 0) - (right.priority ?? 0));
+}
+function toCatalogRule(rule) {
+  return {
+    id: rule.id,
+    name: rule.name,
+    condition: rule.condition,
+    priority: rule.priority,
+    programRuleActions: [...rule.programRuleActions ?? []],
+    programStageId: rule.programStageId
+  };
+}
+function resolveProgramRulesList(metadata) {
+  if (metadata.formKind === "event") {
+    return sortByPriority(
+      metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
+        (rule) => toCatalogRule({
+          id: rule.id,
+          name: rule.displayName ?? rule.id,
+          condition: rule.condition,
+          priority: rule.priority,
+          programRuleActions: rule.programRuleActions,
+          programStageId: rule.programStage?.id ?? null
+        })
+      )
+    );
+  }
+  return sortByPriority(
+    metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
+      (rule) => toCatalogRule({
+        id: rule.id,
+        name: rule.name ?? rule.id,
+        condition: rule.condition,
+        priority: rule.priority,
+        programRuleActions: rule.programRuleActions,
+        programStageId: rule.programStage?.id ?? null
+      })
+    )
+  );
+}
+
+// src/constants.ts
+var DEFAULT_TRACE_MAX_ENTRIES = 200;
+
+// src/traceStore.ts
+function createRuleTraceStore(maxEntries = DEFAULT_TRACE_MAX_ENTRIES) {
+  let entries = [];
+  const listeners = /* @__PURE__ */ new Set();
+  let disposeTraceSubscription = null;
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  return {
+    record(entry) {
+      entries = [...entries, entry].slice(-maxEntries);
+      notify();
+    },
+    getSnapshot() {
+      return entries;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    dispose() {
+      disposeTraceSubscription?.();
+      disposeTraceSubscription = null;
+      listeners.clear();
+    },
+    bindTraceSubscription(unsubscribe) {
+      disposeTraceSubscription = unsubscribe;
+    }
+  };
+}
+
+// src/attach.ts
+function attachRuleDevtools(formStore, options) {
+  const store = createRuleTraceStore(
+    DEFAULT_TRACE_MAX_ENTRIES
+  );
+  store.bindTraceSubscription(formStore.subscribeTrace(store.record));
+  return store;
+}
+var RuleTraceContext = react.createContext(null);
+function RuleDevtoolsScope({ formStore, children }) {
+  const traceStore = react.useMemo(() => attachRuleDevtools(formStore), [formStore]);
+  react.useEffect(() => {
+    return () => {
+      traceStore.dispose();
+    };
+  }, [traceStore]);
+  return /* @__PURE__ */ jsxRuntime.jsx(RuleTraceContext.Provider, { value: traceStore, children });
+}
+function useRuleTraceStore() {
+  const store = react.useContext(RuleTraceContext);
+  if (!store) {
+    throw new Error("useRuleTraceStore must be used within RuleDevtoolsScope");
+  }
+  return store;
+}
+
+// src/RuleDetailsModal.tsx
+init_effectStyles();
+init_i18n();
+
+// src/programRuleDetailQuery.ts
+var PROGRAM_RULE_ACTION_DETAIL_FIELDS = [
+  "id",
+  "programRuleActionType",
+  "priority",
+  "content",
+  "data",
+  "location",
+  "dataElement[id,displayName]",
+  "trackedEntityAttribute[id,displayName]",
+  "option[id,displayName]",
+  "optionGroup[id,displayName]",
+  "programStageSection[id,displayName]",
+  "programStage[id,displayName]",
+  "programSection[id,displayName]"
+].join(",");
+var PROGRAM_RULE_DETAIL_FIELDS = [
+  "id",
+  "name",
+  "displayName",
+  "code",
+  "description",
+  "condition",
+  "priority",
+  "lastUpdated",
+  "lastUpdatedBy[displayName]",
+  "program[id,displayName]",
+  "programStage[id,displayName]",
+  `programRuleActions[${PROGRAM_RULE_ACTION_DETAIL_FIELDS}]`
+].join(",");
+var programRuleDetailQuery = {
+  programRule: {
+    resource: "programRules",
+    id: (variables) => variables.ruleId,
+    params: {
+      fields: PROGRAM_RULE_DETAIL_FIELDS
+    }
+  }
+};
+
+// src/useProgramRuleDetail.ts
+function isCurrentDetail(ruleId, detail) {
+  return ruleId != null && detail?.id === ruleId;
+}
+function resolveDetailState(ruleId, detail, hasError) {
+  const isCurrent = isCurrentDetail(ruleId, detail);
+  return {
+    detail: isCurrent ? detail : void 0,
+    loading: ruleId != null && !isCurrent && !hasError
+  };
+}
+function useProgramRuleDetail(ruleId) {
+  const { data, error, refetch } = appRuntime.useDataQuery(
+    programRuleDetailQuery,
+    { lazy: true }
+  );
+  react.useEffect(() => {
+    if (ruleId) {
+      void refetch({ ruleId });
+    }
+  }, [ruleId, refetch]);
+  return { ...resolveDetailState(ruleId, data?.programRule, Boolean(error)), error };
+}
+var EM_DASH = "\u2014";
+function formatTimestamp(value) {
+  if (!value) {
+    return null;
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  const day = String(date.getDate());
+  const month = date.toLocaleString("en-GB", { month: "short" });
+  const year = String(date.getFullYear());
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${day} ${month} ${year} ${hours}:${minutes}`;
+}
+function resolveStatusChip(status) {
+  switch (status) {
+    case "firing":
+      return {
+        label: translate("Firing"),
+        className: "bg-dhis2-teal-100 text-dhis2-teal-900"
+      };
+    case "idle":
+      return { label: translate("Idle"), className: "bg-dhis2-grey-200 text-dhis2-grey-700" };
+    case "out-of-scope":
+      return {
+        label: translate("Out of scope"),
+        className: "bg-dhis2-grey-200 text-dhis2-grey-600"
+      };
+  }
+}
+var VARIABLE_PATTERNS = [
+  {
+    pattern: /#\{[^}]*\}/g,
+    kind: "Data element",
+    className: "bg-dhis2-blue-100 text-dhis2-blue-900"
+  },
+  {
+    pattern: /A\{[^}]*\}/g,
+    kind: "Tracked entity attribute",
+    className: "bg-dhis2-teal-100 text-dhis2-teal-900"
+  },
+  {
+    pattern: /V\{[^}]*\}/g,
+    kind: "Environment variable",
+    className: "bg-dhis2-grey-200 text-dhis2-grey-900"
+  },
+  {
+    pattern: /d2:\w+(?=\()/g,
+    kind: "Function",
+    className: "bg-dhis2-yellow-100 text-dhis2-yellow-900"
+  }
+];
+var RESOLVABLE_VARIABLE_KINDS = /* @__PURE__ */ new Set([
+  "Data element",
+  "Tracked entity attribute"
+]);
+function resolveVariableDisplayName(name, programRuleVariables) {
+  const variable = programRuleVariables.find((candidate) => candidate.name === name);
+  return variable?.dataElement?.displayName ?? variable?.trackedEntityAttribute?.displayName;
+}
+function resolveVariableToken(token, kind, programRuleVariables) {
+  if (kind === "Function") {
+    return `${token}()`;
+  }
+  if (!RESOLVABLE_VARIABLE_KINDS.has(kind)) {
+    return token;
+  }
+  return resolveVariableDisplayName(token.slice(2, -1), programRuleVariables) ?? token;
+}
+function matchDistinctTokens(condition, pattern, seen) {
+  const matches = condition.match(pattern) ?? [];
+  const distinct = matches.filter((token) => !seen.has(token));
+  for (const token of distinct) {
+    seen.add(token);
+  }
+  return distinct;
+}
+function parseConditionVariables(condition, programRuleVariables) {
+  if (!condition) {
+    return [];
+  }
+  const seen = /* @__PURE__ */ new Set();
+  return VARIABLE_PATTERNS.flatMap(
+    ({ pattern, kind, className }) => matchDistinctTokens(condition, pattern, seen).map((token) => ({
+      token,
+      kind,
+      label: resolveVariableToken(token, kind, programRuleVariables),
+      className
+    }))
+  );
+}
+var ACTION_TARGET_RESOLVERS = [
+  { label: "Data element", getRef: (action) => action.dataElement },
+  { label: "Tracked entity attribute", getRef: (action) => action.trackedEntityAttribute },
+  { label: "Program stage section", getRef: (action) => action.programStageSection },
+  { label: "Program stage", getRef: (action) => action.programStage },
+  { label: "Option", getRef: (action) => action.option },
+  { label: "Option group", getRef: (action) => action.optionGroup }
+];
+function formatActionTargetValue(ref) {
+  return `${ref.displayName ?? ref.id} \xB7 ${ref.id}`;
+}
+function resolveActionTarget(action) {
+  for (const { label, getRef } of ACTION_TARGET_RESOLVERS) {
+    const ref = getRef(action);
+    if (ref?.id) {
+      return { label: translate(label), value: formatActionTargetValue(ref) };
+    }
+  }
+  return null;
+}
+function BasicDetailCell({ label, value, mono }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-xs text-dhis2-grey-600", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: `m-0 mt-[2px] text-sm text-dhis2-grey-900 ${mono ? "font-mono" : ""}`, children: value })
+  ] });
+}
+var FEEDBACK_ACTION_TYPES = /* @__PURE__ */ new Set(["DISPLAYTEXT", "DISPLAYKEYVALUEPAIR"]);
+function resolveDataRow(action) {
+  return action.data ? { label: translate("Data (expression)"), value: action.data, mono: true } : null;
+}
+function resolveContentRow(action) {
+  const showContent = Boolean(action.content) && FEEDBACK_ACTION_TYPES.has(action.programRuleActionType);
+  return showContent ? { label: translate("Content (static text)"), value: action.content ?? "" } : null;
+}
+function resolveLocationRow(action) {
+  return action.location ? { label: translate("Location"), value: action.location, mono: true } : null;
+}
+function resolveActionRows(action) {
+  const rows = [
+    resolveActionTarget(action),
+    resolveDataRow(action),
+    resolveContentRow(action),
+    resolveLocationRow(action)
+  ];
+  return rows.filter((row) => row !== null);
+}
+function ActionCard({ action, index }) {
+  const type = action.programRuleActionType;
+  const visual = getEffectVisual(type);
+  const Icon = exports.EFFECT_ICONS[visual.variant];
+  const rows = resolveActionRows(action);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "relative rounded-[3px] border border-dhis2-grey-300 bg-white py-dp12 pe-dp16 ps-dp16 shadow-[0_1px_2px_rgb(0_0_0/4%)]",
+      style: { borderInlineStartWidth: 3, borderInlineStartColor: visual.edgeStroke },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-dp12 flex items-center justify-between gap-dp8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: `inline-flex items-center gap-[4px] rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${visual.tagClassName}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+                type
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] uppercase tracking-wide text-dhis2-grey-600", children: translate("Action {{n}}", { n: index + 1 }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-dp10", children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[172px_minmax(0,1fr)] gap-dp10", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-dhis2-grey-600", children: row.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `min-w-0 break-words text-sm ${row.mono ? "font-mono text-[12px]" : ""}`,
+              children: row.value
+            }
+          )
+        ] }, row.label)) })
+      ]
+    }
+  );
+}
+function orDash(value) {
+  return value ?? EM_DASH;
+}
+function resolveDetailDisplayName(rule) {
+  return rule?.displayName;
+}
+function resolveDetailName(rule) {
+  return rule?.name;
+}
+function resolveRuleDisplayName(rule, fallback) {
+  const displayName = resolveDetailDisplayName(rule) ?? resolveDetailName(rule);
+  return displayName ?? fallback;
+}
+function resolveRuleStageName(rule) {
+  return rule?.programStage?.displayName;
+}
+function resolveStageName(rule, programStageName) {
+  if (programStageName === null) {
+    return translate("All stages (registration)");
+  }
+  return orDash(resolveRuleStageName(rule) ?? programStageName);
+}
+function resolveLastUpdatedByName(rule) {
+  return rule?.lastUpdatedBy?.displayName;
+}
+function resolveLastUpdatedValue(rule) {
+  const label = formatTimestamp(rule?.lastUpdated);
+  if (!label) {
+    return EM_DASH;
+  }
+  const by = resolveLastUpdatedByName(rule);
+  return by ? `${label} \xB7 ${by}` : label;
+}
+function resolvePriorityCellValue(rule) {
+  return rule?.priority != null ? String(rule.priority) : EM_DASH;
+}
+function resolveActionsCellValue(rule) {
+  return translate("{{n}} action(s)", { n: rule?.programRuleActions?.length ?? 0 });
+}
+function resolveBasicDetailCells(rule, ruleName, programStageName) {
+  return [
+    { label: translate("Name"), value: resolveRuleDisplayName(rule, ruleName) },
+    { label: translate("Code"), value: orDash(rule?.code), mono: true },
+    { label: translate("Identifier"), value: orDash(rule?.id), mono: true },
+    { label: translate("Program"), value: orDash(rule?.program?.displayName) },
+    { label: translate("Program stage"), value: resolveStageName(rule, programStageName) },
+    { label: translate("Priority"), value: resolvePriorityCellValue(rule) },
+    { label: translate("Actions"), value: resolveActionsCellValue(rule) },
+    { label: translate("Last updated"), value: resolveLastUpdatedValue(rule) }
+  ];
+}
+function BasicDetails({
+  rule,
+  ruleName,
+  programStageName
+}) {
+  const cells = resolveBasicDetailCells(rule, ruleName, programStageName);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-dp24 gap-y-dp12 rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-050 p-dp16", children: cells.map((cell) => /* @__PURE__ */ jsxRuntime.jsx(BasicDetailCell, { ...cell }, cell.label)) });
+}
+var SECTION_HEADING_CLASS = "m-0 mb-dp8 text-[13px] font-bold uppercase tracking-wide text-dhis2-grey-700";
+function RuleDetailsHeader({
+  title,
+  chip,
+  description
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-dp24 -mt-dp24 mb-0 border-b border-dhis2-grey-300 px-dp24 pb-dp16 pe-[44px] pt-[20px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[11px] font-bold uppercase tracking-[.09em] text-dhis2-grey-600", children: translate("Program rule") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[6px] flex flex-wrap items-center gap-dp8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-medium leading-[1.3] text-dhis2-grey-900", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
         {
-          className: "flex min-w-0 flex-wrap items-center gap-x-dp12 gap-y-dp8",
-          "aria-hidden": "true",
-          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: getLegendSwatchClassName(item.kind) }),
-                item.label
-              ]
-            },
-            item.kind
-          ))
+          className: `rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${chip.className}`,
+          children: chip.label
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-dhis2-grey-600", children: translate("{{nodes}} nodes \xB7 {{edges}} edges", {
-          nodes: nodeCount,
-          edges: edgeCount
-        }) }),
-        headerActions
-      ] })
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(EffectLegend, { activeVariants: activeEffectVariants })
+    description ? /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "m-0 mt-[6px] text-sm text-dhis2-grey-700",
+        style: { textWrap: "pretty" },
+        children: description
+      }
+    ) : null
   ] });
 }
-function FitViewOnChange({
-  layoutKey,
-  nodeCount,
-  edgeCount
+function ConditionSection({
+  condition,
+  variables
 }) {
-  const { fitView } = react$1.useReactFlow();
-  react.useEffect(() => {
-    const frameId = requestAnimationFrame(() => {
-      void fitView({ padding: 0.2, duration: 150 });
-    });
-    return () => {
-      cancelAnimationFrame(frameId);
-    };
-  }, [edgeCount, fitView, layoutKey, nodeCount]);
-  return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Condition") }),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap break-words rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-200 px-dp16 py-[14px] font-mono text-[13px] leading-[1.6] text-dhis2-grey-900", children: condition ?? EM_DASH }),
+    variables.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-dp12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 mb-dp8 text-xs text-dhis2-grey-600", children: translate("Variables referenced") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-dp8", children: variables.map((variable) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: `inline-flex items-center gap-[4px] rounded-full px-dp8 py-[2px] text-xs ${variable.className}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", children: variable.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: translate(variable.kind) })
+          ]
+        },
+        variable.token
+      )) })
+    ] }) : null
+  ] });
 }
-function mergeNodePositions(next, current) {
-  const currentById = new Map(current.map((node) => [node.id, node]));
-  return next.map((node) => {
-    const existing = currentById.get(node.id);
-    if (existing) {
-      return { ...node, position: existing.position };
-    }
-    return node;
-  });
+function ActionsSection({ actions }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Actions") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-dp12", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionCard, { action, index }, action.id)) })
+  ] });
 }
-function RuleGraphCanvas({
-  nodes: layoutNodes,
-  edges: layoutEdges,
-  layoutKey
+function RuleDetailsContent({
+  detail,
+  ruleName,
+  programStageName,
+  variables
 }) {
-  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(layoutNodes);
-  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(layoutEdges);
-  react.useEffect(() => {
-    setNodes((current) => mergeNodePositions(layoutNodes, current));
-  }, [layoutNodes, setNodes]);
-  react.useEffect(() => {
-    setEdges(layoutEdges);
-  }, [layoutEdges, setEdges]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.ReactFlow,
-    {
-      nodes,
-      edges,
-      nodeTypes,
-      edgeTypes,
-      onNodesChange,
-      onEdgesChange,
-      nodesDraggable: true,
-      defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
-      elevateEdgesOnSelect: true,
-      fitView: true,
-      proOptions: { hideAttribution: true },
-      className: "h-full w-full",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FitViewOnChange,
-          {
-            layoutKey,
-            nodeCount: nodes.length,
-            edgeCount: edges.length
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 16, size: 1 }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-dp24 pt-dp16", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Basic details") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BasicDetails,
+        {
+          rule: detail,
+          ruleName,
+          programStageName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ConditionSection, { condition: detail.condition, variables }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionsSection, { actions: detail.programRuleActions ?? [] })
+  ] });
 }
-function RuleGraphView({
-  entries,
-  fieldState,
-  formValues,
-  selectedEntryId,
-  highlightRuleId,
-  labelLookup,
-  className,
-  layoutKey,
-  headerActions,
-  minHeightClassName = "min-h-[360px]"
+function RuleDetailsBody({
+  detail,
+  loading,
+  error,
+  ruleName,
+  programStageName,
+  variables
 }) {
-  const graphEntry = react.useMemo(
-    () => resolveGraphTraceEntry(entries, selectedEntryId),
-    [entries, selectedEntryId]
-  );
-  const graph = react.useMemo(
-    () => graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },
-    [graphEntry, labelLookup]
-  );
-  const highlightedKeys = react.useMemo(() => {
-    if (!graphEntry || !selectedEntryId && !highlightRuleId) {
-      return null;
-    }
-    const keys = /* @__PURE__ */ new Set();
-    if (selectedEntryId) {
-      for (const key of entryGraphKeys(graphEntry)) {
-        keys.add(key);
-      }
-    }
-    if (highlightRuleId) {
-      for (const key of ruleGraphKeys(graphEntry, highlightRuleId)) {
-        keys.add(key);
-      }
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[280px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { small: true }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm text-dhis2-red-700", children: translate("Could not load this rule: {{message}}", { message: error.message }) });
+  }
+  if (!detail) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RuleDetailsContent,
+    {
+      detail,
+      ruleName,
+      programStageName,
+      variables
     }
-    return keys;
-  }, [graphEntry, highlightRuleId, selectedEntryId]);
-  const { nodes, edges } = react.useMemo(
-    () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),
-    [graph, fieldState, formValues, highlightedKeys]
   );
-  const activeEffectVariants = react.useMemo(() => {
-    const variants = /* @__PURE__ */ new Set();
-    for (const edge of graph.edges) {
-      if (edge.effectType) {
-        variants.add(getEffectVariant(edge.effectType));
-      }
-    }
-    return variants;
-  }, [graph.edges]);
-  if (!graph.nodes.length) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.NoticeBox, { title: translate("No rule relationships yet"), children: translate(
-      "Interact with the form to build the dependency graph. Only rules active in the latest evaluation are shown. Select a trace entry to inspect a past evaluation. Connections flow Field \u2192 Rule \u2192 Target (read / effect)."
-    ) }) });
-  }
+}
+function RuleDetailsFooter({ onClose }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `flex h-full min-h-[480px] flex-1 flex-col overflow-hidden rounded-md border border-dhis2-grey-200 bg-white ${className ?? ""}`,
+      style: { order: 3 },
+      className: "-mx-dp24 -mb-dp24 mt-dp16 flex items-center justify-between gap-dp12 border-t border-dhis2-grey-300 bg-dhis2-grey-050 px-dp24 py-[14px]",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          GraphToolbar,
-          {
-            nodeCount: graph.nodes.length,
-            edgeCount: graph.edges.length,
-            headerActions,
-            activeEffectVariants
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${minHeightClassName} flex-1 bg-white`,
-            style: { width: "100%", height: "100%" },
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(RuleGraphCanvas, { nodes, edges, layoutKey }) })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm text-dhis2-grey-600", children: translate("Read-only view. Edit rules in the Maintenance app.") }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.ButtonStrip, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { secondary: true, onClick: onClose, children: translate("Close") }) })
       ]
     }
   );
 }
-function RuleGraphModal({
+function resolveActiveRuleId(open, ruleId) {
+  return open ? ruleId : null;
+}
+function shouldRenderModal(open, ruleId) {
+  return open && ruleId != null;
+}
+function RuleDetailsModal({
   open,
   onClose,
-  subtitle,
-  layoutKey,
-  ...graphProps
+  ruleId,
+  ruleName,
+  status,
+  programStageName,
+  programRuleVariables
 }) {
-  if (!open) {
+  const { detail, loading, error } = useProgramRuleDetail(resolveActiveRuleId(open, ruleId));
+  if (!shouldRenderModal(open, ruleId)) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { large: true, fluid: true, onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.ModalTitle, { children: [
-      translate("Rule dependency graph"),
-      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-dp4 block text-sm font-normal text-dhis2-grey-700", children: subtitle }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-      RuleGraphView,
+  const chip = resolveStatusChip(status);
+  const variables = parseConditionVariables(detail?.condition, programRuleVariables);
+  const title = resolveRuleDisplayName(detail, ruleName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { position: "middle", onClose, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RuleDetailsHeader, { title, chip, description: detail?.description }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RuleDetailsBody,
       {
-        ...graphProps,
-        layoutKey: layoutKey ?? "modal",
-        className: "h-full min-h-0 rounded-none border-0",
-        minHeightClassName: "min-h-0 h-full"
+        detail,
+        loading,
+        error,
+        ruleName,
+        programStageName,
+        variables
       }
-    ) }) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RuleDetailsFooter, { onClose })
   ] });
 }
+
+// src/RulesPanelGraphFallback.tsx
+init_i18n();
+function RulesPanelGraphFallback() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex min-h-[200px] items-center justify-center",
+      role: "status",
+      "aria-label": translate("Loading graph"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { small: true })
+    }
+  );
+}
+
+// src/TraceTimeline.tsx
+init_EffectBadge();
+init_i18n();
 function resolveLabel(id, resolver) {
   const label = resolver?.(id) ?? id;
   return { label, showId: label !== id };
@@ -1316,11 +1891,69 @@ function TraceTimeline({
     ) }, entry.id);
   }) });
 }
-function resolveScopeStageId(metadata) {
+
+// src/RulesPanel.tsx
+init_traceEntry();
+var REORDER_DURATION_MS = 220;
+var REORDER_EASING = "ease-out";
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useFlipReorder(orderedIds, containerRef) {
+  const positionsRef = react.useRef(/* @__PURE__ */ new Map());
+  react.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const previousPositions = positionsRef.current;
+    const items = container.querySelectorAll("[data-rule-id]");
+    if (!prefersReducedMotion()) {
+      items.forEach((item) => {
+        const id = item.dataset.ruleId;
+        if (!id) {
+          return;
+        }
+        const previousRect = previousPositions.get(id);
+        if (!previousRect) {
+          return;
+        }
+        const currentRect = item.getBoundingClientRect();
+        const deltaY = previousRect.top - currentRect.top;
+        if (deltaY === 0) {
+          return;
+        }
+        item.style.transition = "none";
+        item.style.transform = `translateY(${String(deltaY)}px)`;
+        item.getBoundingClientRect();
+        item.style.transition = `transform ${String(REORDER_DURATION_MS)}ms ${REORDER_EASING}`;
+        item.style.transform = "";
+      });
+    }
+    const nextPositions = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const id = item.dataset.ruleId;
+      if (id) {
+        nextPositions.set(id, item.getBoundingClientRect());
+      }
+    });
+    positionsRef.current = nextPositions;
+  }, [orderedIds.join("|")]);
+}
+var LazyRuleGraphView = react.lazy(
+  () => Promise.resolve().then(() => (init_RuleGraphView(), RuleGraphView_exports)).then((module) => ({ default: module.RuleGraphView }))
+);
+var LazyRuleGraphModal = react.lazy(
+  () => Promise.resolve().then(() => (init_RuleGraphModal(), RuleGraphModal_exports)).then((module) => ({ default: module.RuleGraphModal }))
+);
+function resolveScopeStageId(metadata, activeProgramStageId) {
+  if (activeProgramStageId !== void 0) {
+    return activeProgramStageId;
+  }
   return metadata.formKind === "event" ? metadata.programStageId : null;
 }
 function isRuleInScope(rule, scopeStageId) {
-  return rule.programStageId === null || rule.programStageId === scopeStageId;
+  return rule.programStageId === scopeStageId;
 }
 function resolveAccentClassName(inScope, firing, selected) {
   if (selected) {
@@ -1337,6 +1970,17 @@ function resolveCardStatus(inScope, firing) {
   }
   return firing ? { label: translate("Firing"), className: "text-dhis2-teal-700" } : { label: translate("Idle"), className: "text-dhis2-grey-600" };
 }
+function resolveDetailsStatus(inScope, firing) {
+  if (!inScope) {
+    return "out-of-scope";
+  }
+  return firing ? "firing" : "idle";
+}
+function resolveAppliesToCaption(rule, labelLookup) {
+  return rule.programStageId === null ? translate("Applies to registration") : translate("Applies to {{stage}}", {
+    stage: labelLookup.resolveStageName(rule.programStageId)
+  });
+}
 function formatActionLabel(action) {
   if (action.targetLabel && action.detail) {
     return `${action.type} \xB7 ${action.targetLabel} = ${action.detail}`;
@@ -1370,7 +2014,11 @@ function resolveTabLabel(key) {
       return translate("Graph");
   }
 }
-function RulesPanel({ metadata, showConditions = true }) {
+function RulesPanel({
+  metadata,
+  showConditions = true,
+  activeProgramStageId
+}) {
   const formStore = dhis2FormUtilsHooks.useFormStore();
   const { form } = dhis2FormUtilsHooks.useFormStateContext();
   const traceStore = useRuleTraceStore();
@@ -1379,9 +2027,13 @@ function RulesPanel({ metadata, showConditions = true }) {
   const [highlightRuleId, setHighlightRuleId] = react.useState(null);
   const [graphModalOpen, setGraphModalOpen] = react.useState(false);
   const [scopeFilter, setScopeFilter] = react.useState("scoped");
+  const [detailsRuleId, setDetailsRuleId] = react.useState(null);
   const labelLookup = react.useMemo(() => createLabelLookup(metadata), [metadata]);
   const catalog = react.useMemo(() => resolveProgramRulesList(metadata), [metadata]);
-  const scopeStageId = react.useMemo(() => resolveScopeStageId(metadata), [metadata]);
+  const scopeStageId = react.useMemo(
+    () => resolveScopeStageId(metadata, activeProgramStageId),
+    [metadata, activeProgramStageId]
+  );
   const entries = react.useSyncExternalStore(
     react.useCallback((listener) => traceStore.subscribe(listener), [traceStore]),
     react.useCallback(() => traceStore.getSnapshot(), [traceStore]),
@@ -1433,6 +2085,15 @@ function RulesPanel({ metadata, showConditions = true }) {
     }
     return null;
   }, [highlightedRuleName, selectedEntry]);
+  const detailsRule = react.useMemo(
+    () => catalog.find((rule) => rule.id === detailsRuleId) ?? null,
+    [catalog, detailsRuleId]
+  );
+  const detailsStatus = detailsRule ? resolveDetailsStatus(
+    isRuleInScope(detailsRule, scopeStageId),
+    activeRuleIds.has(detailsRule.id)
+  ) : "idle";
+  const detailsProgramStageName = detailsRule ? detailsRule.programStageId === null ? null : labelLookup.resolveStageName(detailsRule.programStageId) : void 0;
   const graphProps = {
     entries,
     fieldState,
@@ -1534,6 +2195,9 @@ function RulesPanel({ metadata, showConditions = true }) {
             onSelectRule: (ruleId) => {
               setHighlightRuleId(ruleId);
               setTab("graph");
+            },
+            onOpenDetails: (ruleId) => {
+              setDetailsRuleId(ruleId);
             }
           }
         ) : tab === "trace" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1553,19 +2217,19 @@ function RulesPanel({ metadata, showConditions = true }) {
             },
             labelLookup
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          RuleGraphView,
+        ) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(RulesPanelGraphFallback, {}), children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyRuleGraphView,
           {
             ...graphProps,
             headerActions: graphHasNodes ? expandGraphButton : void 0
           }
-        ) }),
+        ) }) }),
         entries.length > 0 && tab !== "rules" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sr-only", "aria-live": "polite", children: translate("{{evaluations}} evaluations \xB7 {{rules}} rules observed", {
           evaluations: entries.length,
           rules: observedRuleCount
         }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RuleGraphModal,
+        graphModalOpen ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyRuleGraphModal,
           {
             ...graphProps,
             open: graphModalOpen,
@@ -1573,13 +2237,35 @@ function RulesPanel({ metadata, showConditions = true }) {
               setGraphModalOpen(false);
             },
             subtitle: graphSubtitle,
-            layoutKey: graphModalOpen ? "open" : "closed"
+            layoutKey: "open"
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RuleDetailsModal,
+          {
+            open: detailsRuleId != null,
+            onClose: () => {
+              setDetailsRuleId(null);
+            },
+            ruleId: detailsRuleId,
+            ruleName: detailsRule?.name ?? "",
+            status: detailsStatus,
+            programStageName: detailsProgramStageName,
+            programRuleVariables: metadata.metadata.programRuleVariables
           }
         )
       ]
     }
   );
 }
+function sortRulesFiringFirst(visibleRules, activeRuleIds) {
+  const firing = [];
+  const idle = [];
+  for (const rule of visibleRules) {
+    (activeRuleIds.has(rule.id) ? firing : idle).push(rule);
+  }
+  return [...firing, ...idle];
+}
 function RulesTab({
   catalog,
   scopeStageId,
@@ -1588,21 +2274,31 @@ function RulesTab({
   selectedRuleId,
   showConditions,
   labelLookup,
-  onSelectRule
+  onSelectRule,
+  onOpenDetails
 }) {
+  const listRef = react.useRef(null);
+  const visibleRules = scopeFilter === "all" ? catalog : catalog.filter((rule) => isRuleInScope(rule, scopeStageId));
+  const sortedRules = react.useMemo(
+    () => sortRulesFiringFirst(visibleRules, activeRuleIds),
+    [visibleRules, activeRuleIds]
+  );
+  useFlipReorder(
+    react.useMemo(() => sortedRules.map((rule) => rule.id), [sortedRules]),
+    listRef
+  );
   if (!catalog.length) {
     return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("This program has no rules.") });
   }
-  const visibleRules = scopeFilter === "all" ? catalog : catalog.filter((rule) => isRuleInScope(rule, scopeStageId));
-  if (!visibleRules.length) {
+  if (!sortedRules.length) {
     return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("No rules are in scope for this stage.") });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col gap-[10px] p-0", children: visibleRules.map((rule) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: listRef, className: "m-0 flex list-none flex-col gap-[10px] p-0", children: sortedRules.map((rule) => {
     const inScope = isRuleInScope(rule, scopeStageId);
     const firing = activeRuleIds.has(rule.id);
     const isSelected = selectedRuleId === rule.id;
     const status = resolveCardStatus(inScope, firing);
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "m-0 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { "data-rule-id": rule.id, className: "m-0 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "article",
       {
         role: "button",
@@ -1633,13 +2329,29 @@ function RulesTab({
                 children: rule.name
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: `shrink-0 text-[11px] font-semibold ${status.className}`,
-                children: status.label
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[6px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `text-[11px] font-semibold ${status.className}`,
+                  children: status.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  title: translate("Program rule details"),
+                  "aria-label": translate("Program rule details"),
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onOpenDetails(rule.id);
+                  },
+                  className: "inline-flex size-[22px] shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-transparent text-dhis2-grey-600 hover:bg-dhis2-grey-200 hover:text-dhis2-blue-600",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconInfo16, {})
+                }
+              )
+            ] })
           ] }),
           rule.programRuleActions.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-[6px]", children: rule.programRuleActions.map((action, index) => {
             const summary = formatRuleActionSummary(
@@ -1663,16 +2375,17 @@ function RulesTab({
               children: rule.condition
             }
           ) : null,
-          !inScope && rule.programStageId ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-dhis2-grey-600", children: translate("Applies to {{stage}}", {
-            stage: labelLookup.resolveStageName(rule.programStageId)
-          }) }) : null
+          !inScope ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-dhis2-grey-600", children: resolveAppliesToCaption(rule, labelLookup) }) : null
         ]
       }
     ) }, rule.id);
   }) });
 }
 
-exports.EFFECT_ICONS = EFFECT_ICONS;
+// src/index.ts
+init_effectStyles();
+
+exports.RuleDetailsModal = RuleDetailsModal;
 exports.RuleDevtoolsScope = RuleDevtoolsScope;
 exports.RulesPanel = RulesPanel;
 exports.createLabelLookup = createLabelLookup;