@industry-theme/principal-view-panels 0.12.69 → 0.12.70

package/dist/panels/TraceListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,UAAU,CAAC;AAsB/E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2nD7D,CAAC"}
+{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,UAAU,CAAC;AA+C/E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAu2D7D,CAAC"}

package/dist/panels.bundle.js

@@ -99273,7 +99273,7 @@ const SavePatternModal = ({
         color: theme2.colors.text,
         fontFamily: theme2.fonts.monospace
       }, children: pattern.name }),
-      (_a = pattern.children) == null ? void 0 : _a.map((child, i) => renderSpanPattern(child, depth + 1))
+      (_a = pattern.children) == null ? void 0 : _a.map((child) => renderSpanPattern(child, depth + 1))
     ] }, `${pattern.name}-${depth}`);
   };
   return /* @__PURE__ */ jsx(
@@ -99393,7 +99393,7 @@ const SavePatternModal = ({
                 borderRadius: "4px",
                 maxHeight: "150px",
                 overflow: "auto"
-              }, children: fingerprint.length > 0 ? fingerprint.map((pattern, i) => renderSpanPattern(pattern, 0)) : /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted, fontSize: theme2.fontSizes[1] }, children: "No spans to capture" }) })
+              }, children: fingerprint.length > 0 ? fingerprint.map((pattern) => renderSpanPattern(pattern, 0)) : /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted, fontSize: theme2.fontSizes[1] }, children: "No spans to capture" }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
               /* @__PURE__ */ jsxs("label", { style: {
@@ -101021,6 +101021,24 @@ function useTracePatterns({
     patternsFilePath
   };
 }
+const SpanPatternTree = ({ pattern, theme: theme2, depth }) => {
+  var _a;
+  return /* @__PURE__ */ jsxs("div", { style: { marginLeft: depth * 16 }, children: [
+    /* @__PURE__ */ jsxs("code", { style: {
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[0],
+      color: theme2.colors.text
+    }, children: [
+      pattern.name,
+      pattern.nameMatch && pattern.nameMatch !== "exact" && /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.textMuted }, children: [
+        " (",
+        pattern.nameMatch,
+        ")"
+      ] })
+    ] }),
+    (_a = pattern.children) == null ? void 0 : _a.map((child, i) => /* @__PURE__ */ jsx(SpanPatternTree, { pattern: child, theme: theme2, depth: depth + 1 }, i))
+  ] });
+};
 const TraceListPanel = ({
   context: context2,
   actions,
@@ -101128,12 +101146,14 @@ const TraceListPanel = ({
   }, [versionSnapshots, scenarioTraceSet]);
   const [scenarioVisibilityMap, setScenarioVisibilityMap] = useState({});
   const [patternVisibilityMap, setPatternVisibilityMap] = useState({});
+  const [expandedPatternIds, setExpandedPatternIds] = useState(/* @__PURE__ */ new Set());
   const repositoryPath = (_b = (_a = context2.currentScope) == null ? void 0 : _a.repository) == null ? void 0 : _b.path;
   const readFile = actions.readFile;
   const writeFile = (_d = (_c = context2.adapters) == null ? void 0 : _c.fileSystem) == null ? void 0 : _d.writeFile;
   const {
     patterns: tracePatterns,
-    savePattern
+    savePattern,
+    removePattern
   } = useTracePatterns({
     repositoryPath,
     readFile,
@@ -101210,6 +101230,60 @@ const TraceListPanel = ({
     },
     [actions, versionSnapshots]
   );
+  const handlePatternVisibilityToggle = React__default.useCallback(
+    async (patternId, isVisible) => {
+      setPatternVisibilityMap((prev) => ({
+        ...prev,
+        [patternId]: isVisible
+      }));
+      const pattern = tracePatterns.find((p2) => p2.id === patternId);
+      if (pattern && savePattern) {
+        try {
+          await savePattern({
+            ...pattern,
+            filterDefault: !isVisible
+            // filterDefault is inverse of visibility
+          });
+        } catch (error) {
+          console.error("[TraceListPanel] Failed to update pattern filterDefault:", error);
+          setPatternVisibilityMap((prev) => ({
+            ...prev,
+            [patternId]: !isVisible
+          }));
+        }
+      }
+    },
+    [tracePatterns, savePattern]
+  );
+  const handlePatternClick = React__default.useCallback((patternId) => {
+    setExpandedPatternIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(patternId)) {
+        newSet.delete(patternId);
+      } else {
+        newSet.add(patternId);
+      }
+      return newSet;
+    });
+  }, []);
+  const handlePatternDelete = React__default.useCallback(
+    async (patternId) => {
+      if (!removePattern) return;
+      try {
+        await removePattern(patternId);
+      } catch (error) {
+        console.error("[TraceListPanel] Failed to delete pattern:", error);
+      }
+    },
+    [removePattern]
+  );
+  const patternTraceCounts = useMemo(() => {
+    const counts = {};
+    patternMatches.forEach((match) => {
+      counts[match.patternId] = (counts[match.patternId] || 0) + 1;
+    });
+    return counts;
+  }, [patternMatches]);
   const filteredTraces = React__default.useMemo(() => {
     return traces.filter((trace2) => {
       const hasScenarioMatches = trace2.scenarioMatches && trace2.scenarioMatches.length > 0;
@@ -102364,6 +102438,163 @@ const TraceListPanel = ({
               })
             }
           ),
+          tracePatterns.length > 0 && /* @__PURE__ */ jsxs("div", { style: { borderBottom: `1px solid ${theme2.colors.border}` }, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: "12px 16px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  backgroundColor: theme2.colors.backgroundSecondary
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Bookmark, { size: 16, color: "#06b6d4" }),
+                  /* @__PURE__ */ jsxs("span", { style: {
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[2],
+                    fontWeight: theme2.fontWeights.medium,
+                    color: theme2.colors.text
+                  }, children: [
+                    "Patterns (",
+                    tracePatterns.length,
+                    ")"
+                  ] })
+                ]
+              }
+            ),
+            tracePatterns.map((pattern) => {
+              const isExpanded = expandedPatternIds.has(pattern.id);
+              const isVisible = patternVisibilityMap[pattern.id] !== false;
+              const traceCount = patternTraceCounts[pattern.id] || 0;
+              return /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    onClick: () => handlePatternClick(pattern.id),
+                    style: {
+                      padding: "10px 16px",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      cursor: "pointer",
+                      backgroundColor: isExpanded ? `${theme2.colors.primary}10` : "transparent",
+                      borderLeft: isExpanded ? `2px solid ${theme2.colors.primary}` : "2px solid transparent",
+                      transition: "background-color 0.15s"
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isExpanded) e.currentTarget.style.backgroundColor = `${theme2.colors.primary}05`;
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isExpanded) e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    children: [
+                      isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: theme2.colors.textSecondary }),
+                      /* @__PURE__ */ jsx("span", { style: {
+                        flex: 1,
+                        fontFamily: theme2.fonts.body,
+                        fontSize: theme2.fontSizes[1],
+                        color: theme2.colors.text
+                      }, children: pattern.name }),
+                      traceCount > 0 && /* @__PURE__ */ jsxs("span", { style: {
+                        padding: "2px 6px",
+                        fontSize: theme2.fontSizes[0],
+                        fontFamily: theme2.fonts.body,
+                        backgroundColor: `#06b6d415`,
+                        color: "#06b6d4",
+                        borderRadius: "3px"
+                      }, children: [
+                        traceCount,
+                        " ",
+                        traceCount === 1 ? "trace" : "traces"
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handlePatternVisibilityToggle(pattern.id, !isVisible);
+                          },
+                          title: isVisible ? "Hide matching traces" : "Show matching traces",
+                          style: {
+                            padding: "4px",
+                            background: "transparent",
+                            border: "none",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            opacity: 0.6,
+                            transition: "opacity 0.15s"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "0.6";
+                          },
+                          children: isVisible ? /* @__PURE__ */ jsx(Eye, { size: 14, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(EyeOff, { size: 14, color: theme2.colors.textMuted })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            if (confirm(`Delete pattern "${pattern.name}"?`)) {
+                              handlePatternDelete(pattern.id);
+                            }
+                          },
+                          title: "Delete pattern",
+                          style: {
+                            padding: "4px",
+                            background: "transparent",
+                            border: "none",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            opacity: 0.6,
+                            transition: "opacity 0.15s"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "0.6";
+                          },
+                          children: /* @__PURE__ */ jsx(Trash2, { size: 14, color: theme2.colors.error })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isExpanded && /* @__PURE__ */ jsxs("div", { style: {
+                  padding: "12px 16px 12px 40px",
+                  backgroundColor: theme2.colors.backgroundSecondary,
+                  borderTop: `1px solid ${theme2.colors.border}`
+                }, children: [
+                  pattern.description && /* @__PURE__ */ jsx("div", { style: {
+                    marginBottom: "12px",
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textSecondary
+                  }, children: pattern.description }),
+                  /* @__PURE__ */ jsx("div", { style: {
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textMuted,
+                    marginBottom: "8px"
+                  }, children: "Span Structure:" }),
+                  /* @__PURE__ */ jsx("div", { style: {
+                    padding: "8px 12px",
+                    backgroundColor: theme2.colors.background,
+                    borderRadius: "4px",
+                    border: `1px solid ${theme2.colors.border}`
+                  }, children: pattern.rootSpans.map((spanPattern, i) => /* @__PURE__ */ jsx(SpanPatternTree, { pattern: spanPattern, theme: theme2, depth: 0 }, i)) })
+                ] })
+              ] }, pattern.id);
+            })
+          ] }),
           /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
             StoryboardWorkflowsTreeCore,
             {