@manta-eu/react 0.1.8 → 0.1.10

package/src/graph/graph-layout.ts

@@ -0,0 +1,272 @@
+import dagre from "@dagrejs/dagre";
+import { match } from "ts-pattern";
+import type { RDFEdge } from "./graph-utils";
+import { getNodeCategory, NodeCategory, RelationshipType } from "./themes";
+import type { LayoutDirection, RDFNode } from "./types";
+
+const nodeWidth = 320;
+const nodeHeight = 200;
+const gridThreshold = 5;
+const gridGap = 60;
+const overlapPadding = 80;
+
+export type NodeDimensions = { width: number; height: number };
+
+export type LayoutOptions = {
+  nodeDimensions?: NodeDimensions;
+  ranksep?: number;
+  nodesep?: number;
+};
+
+const targetCategoryToRelationship: Partial<Record<NodeCategory, RelationshipType>> = {
+  [NodeCategory.Campaign]: RelationshipType.AdSetToCampaign,
+  [NodeCategory.AdSet]: RelationshipType.AdToAdSet,
+  [NodeCategory.Ad]: RelationshipType.CreativeToAd,
+  [NodeCategory.Creative]: RelationshipType.ProductToCreative,
+  [NodeCategory.Product]: RelationshipType.ProductToCreative,
+};
+
+export function detectRelationshipType(sourceType?: string, targetType?: string): RelationshipType {
+  const sourceCategory = getNodeCategory(sourceType);
+  const targetCategory = getNodeCategory(targetType);
+
+  return match([sourceCategory, targetCategory])
+    .with([NodeCategory.Prompt, NodeCategory.Creative], () => RelationshipType.PromptToCreative)
+    .with([NodeCategory.Product, NodeCategory.Creative], () => RelationshipType.ProductToCreative)
+    .with([NodeCategory.Creative, NodeCategory.Ad], () => RelationshipType.CreativeToAd)
+    .with([NodeCategory.Ad, NodeCategory.AdSet], () => RelationshipType.AdToAdSet)
+    .with([NodeCategory.AdSet, NodeCategory.Campaign], () => RelationshipType.AdSetToCampaign)
+    .otherwise(
+      () =>
+        targetCategoryToRelationship[targetCategory] ??
+        targetCategoryToRelationship[sourceCategory] ??
+        RelationshipType.Generic,
+    );
+}
+
+export function getNodeDimensions(entityType?: string): NodeDimensions {
+  const category = getNodeCategory(entityType);
+  return match(category)
+    .with(NodeCategory.Ad, () => ({ width: 220, height: 480 }))
+    .with(NodeCategory.Creative, () => ({ width: 210, height: 340 }))
+    .with(NodeCategory.Product, () => ({ width: 120, height: 160 }))
+    .otherwise(() => ({ width: 320, height: 200 }));
+}
+
+export function applyDagreLayout(
+  nodes: RDFNode[],
+  edges: RDFEdge[],
+  direction: LayoutDirection = "LR",
+  options?: LayoutOptions,
+): RDFNode[] {
+  const g = new dagre.graphlib.Graph();
+
+  const layoutWidth = options?.nodeDimensions?.width ?? nodeWidth;
+  const layoutHeight = options?.nodeDimensions?.height ?? nodeHeight;
+  const ranksep = options?.ranksep ?? (nodes.length <= 5 ? 300 : nodes.length <= 10 ? 350 : 400);
+  const nodesep = options?.nodesep ?? (nodes.length <= 5 ? 80 : nodes.length <= 10 ? 150 : 200);
+
+  g.setGraph({
+    rankdir: direction,
+    nodesep,
+    ranksep,
+    edgesep: 80,
+    ranker: "network-simplex",
+    acyclicer: "greedy",
+    align: "UL",
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+
+  for (const node of nodes) {
+    const dims = options?.nodeDimensions
+      ? { width: layoutWidth, height: layoutHeight }
+      : getNodeDimensions(node.data.type);
+    g.setNode(node.id, { width: dims.width, height: dims.height });
+  }
+
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+
+  dagre.layout(g);
+
+  const layoutedNodes = nodes.map((node) => {
+    const pos = g.node(node.id);
+    const dims = options?.nodeDimensions
+      ? { width: layoutWidth, height: layoutHeight }
+      : getNodeDimensions(node.data.type);
+    return {
+      ...node,
+      position: {
+        x: pos.x - dims.width / 2,
+        y: pos.y - dims.height / 2,
+      },
+    };
+  });
+
+  const gridResult = applyGridToFanOutRanks(layoutedNodes, direction);
+  return resolveNodeOverlaps(gridResult);
+}
+
+function applyGridToFanOutRanks(nodes: RDFNode[], direction: LayoutDirection): RDFNode[] {
+  const isLR = direction === "LR";
+  const rankTolerance = 50;
+
+  const rankGroups = new Map<number, RDFNode[]>();
+  for (const node of nodes) {
+    const rankPos = isLR ? node.position.x : node.position.y;
+    const key = Math.round(rankPos / rankTolerance) * rankTolerance;
+    const group = rankGroups.get(key) ?? [];
+    group.push(node);
+    rankGroups.set(key, group);
+  }
+
+  const updatedPositions = new Map<string, { x: number; y: number }>();
+
+  for (const [, group] of rankGroups) {
+    if (group.length <= gridThreshold) continue;
+
+    const maxWidth = Math.max(...group.map((n) => getNodeDimensions(n.data.type).width));
+    const maxHeight = Math.max(...group.map((n) => getNodeDimensions(n.data.type).height));
+    const xCell = maxWidth + gridGap;
+    const yCell = maxHeight + gridGap;
+
+    let xCount: number;
+    let yCount: number;
+
+    const targetRows = 4;
+
+    if (isLR) {
+      yCount = Math.min(targetRows, group.length);
+      xCount = Math.ceil(group.length / yCount);
+    } else {
+      xCount = Math.min(targetRows, group.length);
+      yCount = Math.ceil(group.length / xCount);
+    }
+
+    const xSpan = (xCount - 1) * xCell;
+    const ySpan = (yCount - 1) * yCell;
+
+    const xCenter = group.reduce((sum, n) => sum + n.position.x, 0) / group.length;
+    const yCenter = group.reduce((sum, n) => sum + n.position.y, 0) / group.length;
+
+    for (let i = 0; i < group.length; i++) {
+      const node = group[i];
+      if (!node) continue;
+
+      let col: number;
+      let row: number;
+
+      if (isLR) {
+        col = i % xCount;
+        row = Math.floor(i / xCount);
+      } else {
+        row = i % yCount;
+        col = Math.floor(i / yCount);
+      }
+
+      updatedPositions.set(node.id, {
+        x: xCenter + col * xCell - xSpan / 2,
+        y: yCenter + row * yCell - ySpan / 2,
+      });
+    }
+  }
+
+  if (updatedPositions.size === 0) return nodes;
+
+  return nodes.map((node) => {
+    const newPos = updatedPositions.get(node.id);
+    if (!newPos) return node;
+    return { ...node, position: newPos };
+  });
+}
+
+function resolveNodeOverlaps(nodes: RDFNode[]): RDFNode[] {
+  if (nodes.length <= 1) return nodes;
+
+  const positions = new Map(nodes.map((n) => [n.id, { x: n.position.x, y: n.position.y }]));
+  const maxIterations = 50;
+
+  for (let iter = 0; iter < maxIterations; iter++) {
+    let moved = false;
+
+    for (let i = 0; i < nodes.length; i++) {
+      for (let j = i + 1; j < nodes.length; j++) {
+        const idA = nodes[i]?.id;
+        const idB = nodes[j]?.id;
+        if (!idA || !idB) continue;
+
+        const posA = positions.get(idA);
+        const posB = positions.get(idB);
+        if (!posA || !posB) continue;
+
+        const dimsA = getNodeDimensions(nodes[i]?.data.type);
+        const dimsB = getNodeDimensions(nodes[j]?.data.type);
+        const minDistX = Math.max(dimsA.width, dimsB.width) + overlapPadding;
+        const minDistY = Math.max(dimsA.height, dimsB.height) + overlapPadding;
+
+        const dx = posB.x - posA.x;
+        const dy = posB.y - posA.y;
+        const overlapX = minDistX - Math.abs(dx);
+        const overlapY = minDistY - Math.abs(dy);
+
+        if (overlapX > 0 && overlapY > 0) {
+          moved = true;
+          if (overlapX < overlapY) {
+            const push = overlapX / 2 + 1;
+            if (dx >= 0) {
+              posA.x -= push;
+              posB.x += push;
+            } else {
+              posA.x += push;
+              posB.x -= push;
+            }
+          } else {
+            const push = overlapY / 2 + 1;
+            if (dy >= 0) {
+              posA.y -= push;
+              posB.y += push;
+            } else {
+              posA.y += push;
+              posB.y -= push;
+            }
+          }
+        }
+      }
+    }
+
+    if (!moved) break;
+  }
+
+  return nodes.map((node) => ({
+    ...node,
+    position: positions.get(node.id) ?? node.position,
+  }));
+}
+
+export function computeEdgeSiblingIndices(edges: RDFEdge[]): void {
+  const targetGroups = new Map<string, RDFEdge[]>();
+  for (const edge of edges) {
+    const key = edge.target;
+    const group = targetGroups.get(key) ?? [];
+    group.push(edge);
+    targetGroups.set(key, group);
+  }
+
+  for (const group of targetGroups.values()) {
+    for (let i = 0; i < group.length; i++) {
+      const edge = group[i];
+      if (!edge?.data) continue;
+      edge.data.edgeIndex = i;
+      edge.data.edgeSiblingCount = group.length;
+    }
+  }
+}
+
+export function computeHubThreshold(connectionCounts: Map<string, number>): number {
+  const counts = Array.from(connectionCounts.values()).sort((a, b) => a - b);
+  if (counts.length < 3) return Infinity;
+
+  const median = counts[Math.floor(counts.length / 2)] ?? 1;
+  return Math.max(median * 3, 6);
+}

package/src/graph/graph-list-utils.ts

@@ -0,0 +1,439 @@
+import type { PropertyChangeType } from "../lib/iri-labels";
+import { getAllDescendants } from "./graph-utils";
+import { formatDisplayValue, normalizeCurrencyCode } from "./property-formatters";
+import type { NodeProperty, RDFNode } from "./types";
+
+export const listPageSize = 25;
+
+const collator = new Intl.Collator();
+
+export type FlattenedRow = {
+  node: RDFNode;
+  depth: number;
+};
+
+export function flattenVisibleRows(args: {
+  nodes: RDFNode[];
+  parentChildMap: Map<string, string[]>;
+  collapsedNodeIds: Set<string>;
+}): FlattenedRow[] {
+  const { nodes, parentChildMap, collapsedNodeIds } = args;
+
+  const nodeMap = new Map(nodes.map((node) => [node.id, node]));
+  const labelById = new Map(nodes.map((node) => [node.id, node.data.label ?? ""]));
+
+  const byLabel = (left: string, right: string) =>
+    collator.compare(labelById.get(left) ?? "", labelById.get(right) ?? "");
+
+  const sortedNodeIds = nodes.map((node) => node.id).sort(byLabel);
+
+  const rows: FlattenedRow[] = [];
+  const visited = new Set<string>();
+
+  function visit(nodeId: string, depth: number) {
+    if (visited.has(nodeId)) return;
+
+    const node = nodeMap.get(nodeId);
+
+    if (!node) return;
+
+    visited.add(nodeId);
+    rows.push({ node, depth });
+
+    if (collapsedNodeIds.has(nodeId)) return;
+
+    for (const childId of [...(parentChildMap.get(nodeId) ?? [])].sort(byLabel)) {
+      visit(childId, depth + 1);
+    }
+  }
+
+  const rootIds = sortedNodeIds.filter((id) => {
+    const parentId = nodeMap.get(id)?.data.parentId;
+
+    return !parentId || !nodeMap.has(parentId);
+  });
+
+  for (const rootId of rootIds) {
+    visit(rootId, 0);
+  }
+
+  const hiddenByCollapse = new Set<string>();
+
+  for (const collapsedId of collapsedNodeIds) {
+    for (const descendant of getAllDescendants(collapsedId, parentChildMap)) {
+      hiddenByCollapse.add(descendant);
+    }
+  }
+
+  for (const nodeId of sortedNodeIds) {
+    if (hiddenByCollapse.has(nodeId)) continue;
+
+    visit(nodeId, 0);
+  }
+
+  return rows;
+}
+
+export type NodePropertyChange = {
+  predicate: string;
+  predicateLabel?: string | null;
+  object: string;
+  objectLabel?: string | null;
+  beforeObject?: string | null;
+  beforeObjectLabel?: string | null;
+  changeType: PropertyChangeType;
+  valueScale?: number;
+};
+
+export type NodePropertyPreview = {
+  id: string;
+  label: string;
+  value: string;
+  changeType?: PropertyChangeType;
+  rawValue?: string;
+  currentValue?: string;
+  previousValue?: string | null;
+  currentRawValue?: string;
+  previousRawValue?: string | null;
+  isHighlighted?: boolean;
+};
+
+const maxPreviewFields = 4;
+
+export type PreviewFieldHints = {
+  highlightPredicate?: string;
+  priorityPredicates?: string[];
+};
+
+export function normalizePredicateKey(value: string): string {
+  return (value.split(/[#/:]/).pop() ?? "").replace(/[^a-z0-9]/gi, "").toLowerCase();
+}
+
+export function isDisplayablePreviewKey(key: string): boolean {
+  return !/label|name|image|url|identifier/i.test(key);
+}
+
+export type PriorityPreviewFieldsOptions = {
+  limit?: number;
+  keepUnmatched?: boolean;
+};
+
+export function selectPriorityPreviewFields(
+  properties: NodeProperty[],
+  hints: PreviewFieldHints,
+  currencyCode: string | null = null,
+  options: PriorityPreviewFieldsOptions = {},
+): NodePropertyPreview[] {
+  const { limit = maxPreviewFields, keepUnmatched = false } = options;
+
+  const highlight = hints.highlightPredicate ? normalizePredicateKey(hints.highlightPredicate) : undefined;
+
+  const rankByKey = new Map<string, number>();
+
+  for (const [index, predicate] of (hints.priorityPredicates ?? []).entries()) {
+    const normalized = normalizePredicateKey(predicate);
+
+    if (!rankByKey.has(normalized)) {
+      rankByKey.set(normalized, index + 1);
+    }
+  }
+
+  const rankOf = (key: string) => {
+    const normalized = normalizePredicateKey(key);
+
+    if (highlight && normalized === highlight) return 0;
+
+    return rankByKey.get(normalized) ?? Number.POSITIVE_INFINITY;
+  };
+
+  return properties
+    .filter((property) => isDisplayablePreviewKey(property.key))
+    .map((property, index) => ({ property, index, rank: rankOf(property.key) }))
+    .filter((entry) => keepUnmatched || Number.isFinite(entry.rank))
+    .sort((left, right) => left.rank - right.rank || left.index - right.index)
+    .slice(0, limit)
+    .map(({ property, index, rank }) => {
+      const value = formatDisplayValue(String(property.value), {
+        predicate: property.iri ?? property.key,
+        predicateLabel: property.key,
+        currencyCode,
+        valueScale: property.valueScale,
+      });
+
+      return {
+        id: `${property.key}-${index}`,
+        label: property.label ?? propertyLabelFromKey(property.key),
+        value,
+        rawValue: String(property.value),
+        currentValue: value,
+        previousValue: null,
+        currentRawValue: String(property.value),
+        previousRawValue: null,
+        isHighlighted: rank === 0,
+      };
+    });
+}
+
+function propertyLabelFromKey(key: string): string {
+  return (
+    key
+      .split(/[#/]/)
+      .pop()
+      ?.replace(/([a-z])([A-Z])/g, "$1 $2")
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (letter) => letter.toUpperCase()) ?? key
+  );
+}
+
+export function previewFieldPriority(label: string, predicate: string): number {
+  const combined = `${label} ${predicate}`.toLowerCase();
+
+  if (combined.includes("status")) return 100;
+  if (combined.includes("daily budget")) return 95;
+  if (combined.includes("budget")) return 90;
+  if (combined.includes("wasted spend")) return 88;
+  if (combined.includes("expected revenue")) return 86;
+  if (combined.includes("revenue")) return 84;
+  if (combined.includes("current roas")) return 80;
+  if (combined.includes("roas")) return 75;
+  if (combined.includes("archive reason")) return 70;
+  if (combined.includes("objective")) return 60;
+  if (combined.includes("spend")) return 55;
+  if (combined.includes("return")) return 50;
+
+  return 0;
+}
+
+export function shouldHidePreviewField(label: string, predicate: string): boolean {
+  return /conversion specs|action shape|conversion id|action type/i.test(`${label} ${predicate}`);
+}
+
+function isStatusProperty(property: NodePropertyChange): boolean {
+  const combined = `${property.predicateLabel ?? ""} ${property.predicate}`.toLowerCase();
+  return combined.includes("status");
+}
+
+export function getCurrencyCode(changes: NodePropertyChange[], properties: NodeProperty[]): string | null {
+  const changedCurrency = changes.find((property) => {
+    const combined = `${property.predicateLabel ?? ""} ${property.predicate}`.toLowerCase();
+    return combined.includes("currency");
+  });
+
+  if (changedCurrency) {
+    return normalizeCurrencyCode(changedCurrency.objectLabel ?? changedCurrency.object);
+  }
+
+  const localCurrency = properties.find((property) => property.key.toLowerCase().includes("currency"));
+  return normalizeCurrencyCode(localCurrency?.value);
+}
+
+function buildChangedPreviewFields(changes: NodePropertyChange[], currencyCode: string | null): NodePropertyPreview[] {
+  return changes
+    .filter((property) => property.changeType !== "UNCHANGED")
+    .map((property) => {
+      const label = property.predicateLabel || propertyLabelFromKey(property.predicate);
+
+      return { property, label, priority: previewFieldPriority(label, property.predicate) };
+    })
+    .filter((entry) => !shouldHidePreviewField(entry.label, entry.property.predicate))
+    .sort((left, right) => right.priority - left.priority || collator.compare(left.label, right.label))
+    .slice(0, maxPreviewFields)
+    .map(({ property, label }) => {
+      const currentValue = formatDisplayValue(property.objectLabel || property.object, {
+        predicate: property.predicate,
+        predicateLabel: property.predicateLabel,
+        currencyCode,
+        valueScale: property.valueScale,
+      });
+      const previousValue =
+        property.changeType === "UPDATED" && property.beforeObject != null
+          ? formatDisplayValue(property.beforeObjectLabel || property.beforeObject, {
+              predicate: property.predicate,
+              predicateLabel: property.predicateLabel,
+              currencyCode,
+              valueScale: property.valueScale,
+            })
+          : null;
+
+      return {
+        id: `${property.predicate}-${property.object}`,
+        label,
+        value: previousValue ? `${previousValue} -> ${currentValue}` : currentValue,
+        changeType: property.changeType,
+        rawValue: property.objectLabel || property.object,
+        currentValue,
+        previousValue,
+        currentRawValue: property.objectLabel || property.object,
+        previousRawValue: property.beforeObjectLabel || property.beforeObject,
+      };
+    });
+}
+
+function buildFallbackPreviewFields(properties: NodeProperty[], currencyCode: string | null): NodePropertyPreview[] {
+  const ranked = properties
+    .filter((property) => !/label|image|url/i.test(property.key) && !shouldHidePreviewField(property.key, property.key))
+    .map((property) => {
+      const label = property.label ?? propertyLabelFromKey(property.key);
+      return {
+        property,
+        label,
+        priority: previewFieldPriority(label, property.key),
+      };
+    })
+    .sort((left, right) => right.priority - left.priority || collator.compare(left.label, right.label))
+    .slice(0, maxPreviewFields);
+
+  return ranked.map(({ property, label }) => {
+    const value = formatDisplayValue(String(property.value), {
+      predicate: property.iri ?? property.key,
+      predicateLabel: property.key,
+      currencyCode,
+      valueScale: property.valueScale,
+    });
+
+    return {
+      id: `${property.key}-${property.value}`,
+      label,
+      value,
+      rawValue: String(property.value),
+      currentValue: value,
+      previousValue: null,
+      currentRawValue: String(property.value),
+      previousRawValue: null,
+    };
+  });
+}
+
+function buildFallbackPreviewFieldsFromQueryProperties(
+  properties: NodePropertyChange[],
+  currencyCode: string | null,
+): NodePropertyPreview[] {
+  const ranked = properties
+    .map((property) => {
+      const label = property.predicateLabel || propertyLabelFromKey(property.predicate);
+      return {
+        property,
+        label,
+        priority: previewFieldPriority(label, property.predicate),
+      };
+    })
+    .filter(
+      ({ label, property }) =>
+        !/image|url/i.test(`${label} ${property.predicate}`) && !shouldHidePreviewField(label, property.predicate),
+    )
+    .sort((left, right) => right.priority - left.priority || collator.compare(left.label, right.label))
+    .slice(0, maxPreviewFields);
+
+  return ranked.map(({ property, label }) => {
+    const currentValue = formatDisplayValue(property.objectLabel || property.object, {
+      predicate: property.predicate,
+      predicateLabel: property.predicateLabel,
+      currencyCode,
+      valueScale: property.valueScale,
+    });
+
+    return {
+      id: `${property.predicate}-${property.object}`,
+      label,
+      value: currentValue,
+      rawValue: property.objectLabel || property.object,
+      currentValue,
+      previousValue: null,
+      currentRawValue: property.objectLabel || property.object,
+      previousRawValue: null,
+    };
+  });
+}
+
+function buildStatusPreviewField(
+  queryProperties: NodePropertyChange[],
+  localStatusValue?: string,
+): NodePropertyPreview | null {
+  const statusProperties = queryProperties.filter(isStatusProperty);
+  const updatedStatus = statusProperties.find((property) => property.changeType === "UPDATED");
+
+  if (updatedStatus) {
+    const previousValue = formatDisplayValue(updatedStatus.beforeObjectLabel || updatedStatus.beforeObject || "");
+    const currentValue = formatDisplayValue(updatedStatus.objectLabel || updatedStatus.object);
+
+    return {
+      id: `status-${updatedStatus.predicate}`,
+      label: "Status",
+      value: `${previousValue} -> ${currentValue}`,
+      changeType: updatedStatus.changeType,
+      rawValue: updatedStatus.objectLabel || updatedStatus.object,
+      currentValue,
+      previousValue,
+      currentRawValue: updatedStatus.objectLabel || updatedStatus.object,
+      previousRawValue: updatedStatus.beforeObjectLabel || updatedStatus.beforeObject,
+    };
+  }
+
+  if (!localStatusValue) return null;
+
+  const effectiveStatus = statusProperties.find((property) => {
+    const label = (property.predicateLabel || propertyLabelFromKey(property.predicate)).toLowerCase();
+    return label === "effective status";
+  });
+
+  const sourceStatus = effectiveStatus ?? statusProperties[0];
+  if (!sourceStatus) return null;
+
+  const currentStatus = formatDisplayValue(sourceStatus.objectLabel || sourceStatus.object);
+  const nextStatus = formatDisplayValue(localStatusValue);
+
+  if (currentStatus.toLowerCase() === nextStatus.toLowerCase()) {
+    return null;
+  }
+
+  return {
+    id: `status-${sourceStatus.predicate}`,
+    label: "Status",
+    value: `${currentStatus} -> ${nextStatus}`,
+    changeType: "UPDATED",
+    rawValue: localStatusValue,
+    currentValue: nextStatus,
+    previousValue: currentStatus,
+    currentRawValue: localStatusValue,
+    previousRawValue: sourceStatus.objectLabel || sourceStatus.object,
+  };
+}
+
+export function buildPreviewFields(
+  queryProperties: NodePropertyChange[],
+  localProperties: NodeProperty[],
+  currencyCode: string | null,
+  localStatusValue?: string,
+): NodePropertyPreview[] {
+  const statusPreview = buildStatusPreviewField(queryProperties, localStatusValue);
+  const nonStatusQueryProperties = queryProperties.filter((property) => !isStatusProperty(property));
+  const changedPreview = buildChangedPreviewFields(nonStatusQueryProperties, currencyCode);
+  const fallbackPreview =
+    nonStatusQueryProperties.length > 0
+      ? buildFallbackPreviewFieldsFromQueryProperties(nonStatusQueryProperties, currencyCode)
+      : buildFallbackPreviewFields(localProperties, currencyCode);
+  const merged: NodePropertyPreview[] = [];
+  const seenLabels = new Set<string>();
+
+  for (const field of [statusPreview, ...changedPreview, ...fallbackPreview].filter(Boolean) as NodePropertyPreview[]) {
+    const key = field.label.toLowerCase();
+    if (seenLabels.has(key)) continue;
+    merged.push(field);
+    seenLabels.add(key);
+    if (merged.length >= maxPreviewFields) break;
+  }
+
+  return merged;
+}
+
+export function isStatusField(field: NodePropertyPreview): boolean {
+  return field.label.toLowerCase().includes("status");
+}
+
+export function getStatusPillColor(value: string): string {
+  const v = value.toLowerCase();
+  if (["active", "enabled", "serving"].includes(v)) return "bg-success text-success-foreground";
+  if (["paused", "pending", "draft"].includes(v)) return "bg-warning text-warning-foreground";
+  if (["removed", "error", "deleted"].includes(v)) return "bg-error text-error-foreground";
+  return "bg-accent text-muted-foreground";
+}