@terasky/backstage-plugin-ai-rules 1.6.0 → 1.8.0

package/dist/components/AiRulesComponent/AiRulesComponent.esm.js

@@ -1,23 +1,64 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
 import { useAiRules } from '../../hooks/useAiRules.esm.js';
-import { InfoCard, Progress, EmptyState, MarkdownContent } from '@backstage/core-components';
-import { makeStyles, Typography, FormControlLabel, Checkbox, Button, Card, CardContent, useTheme, Accordion, AccordionSummary, Chip, Tooltip, IconButton, AccordionDetails } from '@material-ui/core';
+import { InfoCard, Progress, EmptyState, MarkdownContent, CodeSnippet } from '@backstage/core-components';
+import { Typography, FormControlLabel, Checkbox, Button, TextField, Card, CardContent, Tooltip, makeStyles, useTheme, Accordion, AccordionSummary, Chip, IconButton, AccordionDetails, Snackbar } from '@material-ui/core';
+import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import CodeIcon from '@material-ui/icons/Code';
 import LaunchIcon from '@material-ui/icons/Launch';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import GetAppIcon from '@material-ui/icons/GetApp';
 import { AIRuleType } from '../../types.esm.js';
 
 const isAIRulesAvailable = (entity) => {
   const sourceAnnotation = entity.metadata?.annotations?.["backstage.io/source-location"] || "";
   return sourceAnnotation.startsWith("url:");
 };
+const RULE_TYPE_COLORS = {
+  [AIRuleType.CURSOR]: "#0066CC",
+  [AIRuleType.COPILOT]: "#6F42C1",
+  [AIRuleType.CLINE]: "#28A745",
+  [AIRuleType.CLAUDE_CODE]: "#FF6B35",
+  [AIRuleType.WINDSURF]: "#00B4D8",
+  [AIRuleType.ROO_CODE]: "#6610F2",
+  [AIRuleType.CODEX]: "#10A37F",
+  [AIRuleType.GEMINI]: "#4285F4",
+  [AIRuleType.AMAZON_Q]: "#FF9900",
+  [AIRuleType.CONTINUE]: "#1A73E8",
+  [AIRuleType.AIDER]: "#E83E8C"
+};
+const RULE_TYPE_DISPLAY_NAMES = {
+  [AIRuleType.CURSOR]: "Cursor",
+  [AIRuleType.COPILOT]: "Copilot",
+  [AIRuleType.CLINE]: "Cline",
+  [AIRuleType.CLAUDE_CODE]: "Claude Code",
+  [AIRuleType.WINDSURF]: "Windsurf",
+  [AIRuleType.ROO_CODE]: "Roo Code",
+  [AIRuleType.CODEX]: "OpenAI Codex",
+  [AIRuleType.GEMINI]: "Gemini CLI",
+  [AIRuleType.AMAZON_Q]: "Amazon Q",
+  [AIRuleType.CONTINUE]: "Continue",
+  [AIRuleType.AIDER]: "Aider"
+};
+const RULE_TYPE_DISPLAY_ORDER = [
+  AIRuleType.CURSOR,
+  AIRuleType.CLAUDE_CODE,
+  AIRuleType.COPILOT,
+  AIRuleType.CLINE,
+  AIRuleType.WINDSURF,
+  AIRuleType.ROO_CODE,
+  AIRuleType.CODEX,
+  AIRuleType.GEMINI,
+  AIRuleType.AMAZON_Q,
+  AIRuleType.CONTINUE,
+  AIRuleType.AIDER
+];
 const useStyles = makeStyles((theme) => ({
   root: {
     "& .MuiAccordion-root": {
       marginBottom: theme.spacing(1),
-      "&:before": {
-        display: "none"
-      }
+      "&:before": { display: "none" }
     }
   },
   filterSection: {
@@ -26,6 +67,10 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.default,
     borderRadius: theme.shape.borderRadius
   },
+  searchBar: {
+    marginBottom: theme.spacing(2),
+    width: "100%"
+  },
   ruleCard: {
     marginBottom: theme.spacing(1),
     border: `1px solid ${theme.palette.divider}`
@@ -40,7 +85,14 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     gap: theme.spacing(1),
-    flex: 1
+    flex: 1,
+    overflow: "hidden"
+  },
+  ruleHeaderActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    flexShrink: 0
   },
   ruleType: {
     textTransform: "uppercase",
@@ -52,9 +104,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: theme.shape.borderRadius,
     overflow: "auto",
     maxHeight: "300px",
-    "& > *": {
-      backgroundColor: "transparent !important"
-    }
+    "& > *": { backgroundColor: "transparent !important" }
   },
   ruleMetadata: {
     display: "flex",
@@ -64,88 +114,34 @@ const useStyles = makeStyles((theme) => ({
   },
   statsContainer: {
     display: "flex",
+    flexWrap: "wrap",
     gap: theme.spacing(2),
-    marginBottom: theme.spacing(2)
+    marginBottom: theme.spacing(2),
+    alignItems: "center"
   },
   statCard: {
-    minWidth: "120px",
+    minWidth: "100px",
     textAlign: "center"
   },
-  emptyStateIcon: {
-    fontSize: "4rem",
-    color: theme.palette.grey[400]
-  },
   filterContainer: {
     display: "flex",
     flexWrap: "wrap",
-    "& > *": {
-      marginRight: theme.spacing(1)
-    }
+    "& > *": { marginRight: theme.spacing(1) }
   },
   applyFilterButton: {
     marginTop: theme.spacing(1)
+  },
+  viewToggle: {
+    marginBottom: theme.spacing(1)
+  },
+  exportButton: {
+    marginLeft: "auto"
   }
 }));
-const RuleTypeIcon = ({ type }) => {
-  const colors = {
-    [AIRuleType.CURSOR]: "#0066CC",
-    [AIRuleType.COPILOT]: "#6F42C1",
-    [AIRuleType.CLINE]: "#28A745",
-    [AIRuleType.CLAUDE_CODE]: "#FF6B35"
-  };
-  return /* @__PURE__ */ jsx(CodeIcon, { style: { color: colors[type] } });
-};
-const renderFrontmatter = (theme, frontmatter) => {
-  if (!frontmatter || Object.keys(frontmatter).length === 0) {
-    return null;
-  }
-  const filteredEntries = Object.entries(frontmatter).filter(
-    ([key]) => !["description", "globs"].includes(key)
-  );
-  if (filteredEntries.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { style: {
-    marginBottom: "16px",
-    padding: "16px",
-    backgroundColor: theme.palette.type === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
-    borderRadius: "8px",
-    border: `1px solid ${theme.palette.type === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)"}`
-  }, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", style: {
-      marginBottom: "12px",
-      fontWeight: "bold",
-      color: theme.palette.text.secondary,
-      textTransform: "uppercase",
-      letterSpacing: "0.5px"
-    }, children: "Metadata" }),
-    filteredEntries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: index < filteredEntries.length - 1 ? "12px" : "0" }, children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "body2", style: {
-        fontWeight: "bold",
-        textTransform: "capitalize",
-        color: theme.palette.primary.main,
-        marginBottom: "4px"
-      }, children: [
-        key,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", style: {
-        lineHeight: "1.5",
-        marginLeft: "8px",
-        color: theme.palette.text.primary
-      }, children: Array.isArray(value) ? value.join(", ") : String(value) })
-    ] }, key))
-  ] });
-};
-const parseCursorContent = (content) => {
-  return manualParseFrontmatter(content);
-};
+const parseCursorContent = (content) => manualParseFrontmatter(content);
 const manualParseFrontmatter = (content) => {
   if (!content.trim().startsWith("---")) {
-    return {
-      frontmatter: void 0,
-      content
-    };
+    return { frontmatter: void 0, content };
   }
   try {
     const lines = content.split("\n");
@@ -156,12 +152,7 @@ const manualParseFrontmatter = (content) => {
         break;
       }
     }
-    if (frontmatterEndIndex === -1) {
-      return {
-        frontmatter: void 0,
-        content
-      };
-    }
+    if (frontmatterEndIndex === -1) return { frontmatter: void 0, content };
     const frontmatterLines = lines.slice(1, frontmatterEndIndex);
     const contentLines = lines.slice(frontmatterEndIndex + 1);
     const frontmatter = {};
@@ -178,143 +169,207 @@ const manualParseFrontmatter = (content) => {
       frontmatter: Object.keys(frontmatter).length > 0 ? frontmatter : void 0,
       content: contentLines.join("\n").trim()
     };
-  } catch (error) {
-    return {
-      frontmatter: void 0,
-      content
-    };
+  } catch (_e) {
+    return { frontmatter: void 0, content };
   }
 };
 const constructFileUrl = (gitUrl, filePath) => {
   const cleanGitUrl = gitUrl.replace(/\/+$/, "");
-  if (cleanGitUrl.includes("github.com")) {
-    return `${cleanGitUrl}/blob/main/${filePath}`;
-  }
-  if (cleanGitUrl.includes("gitlab.com")) {
-    return `${cleanGitUrl}/-/blob/main/${filePath}`;
-  }
+  if (cleanGitUrl.includes("github.com")) return `${cleanGitUrl}/blob/main/${filePath}`;
+  if (cleanGitUrl.includes("gitlab.com")) return `${cleanGitUrl}/-/blob/main/${filePath}`;
   return `${cleanGitUrl}/blob/main/${filePath}`;
 };
+const RuleTypeIcon = ({ type }) => /* @__PURE__ */ jsx(CodeIcon, { style: { color: RULE_TYPE_COLORS[type] ?? "#888", flexShrink: 0 } });
+const renderFrontmatter = (theme, frontmatter) => {
+  if (!frontmatter || Object.keys(frontmatter).length === 0) return null;
+  const filteredEntries = Object.entries(frontmatter).filter(
+    ([key]) => !["description", "globs"].includes(key)
+  );
+  if (filteredEntries.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { style: {
+    marginBottom: 16,
+    padding: 16,
+    backgroundColor: theme.palette.type === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
+    borderRadius: 8,
+    border: `1px solid ${theme.palette.type === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)"}`
+  }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", style: { marginBottom: 12, fontWeight: "bold", color: theme.palette.text.secondary, textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Metadata" }),
+    filteredEntries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: index < filteredEntries.length - 1 ? 12 : 0 }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", style: { fontWeight: "bold", textTransform: "capitalize", color: theme.palette.primary.main, marginBottom: 4 }, children: [
+        key,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { lineHeight: "1.5", marginLeft: 8, color: theme.palette.text.primary }, children: Array.isArray(value) ? value.join(", ") : String(value) })
+    ] }, key))
+  ] });
+};
+const RuleContentViewer = ({ content }) => {
+  const styles = useStyles();
+  const [view, setView] = useState("rendered");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      ToggleButtonGroup,
+      {
+        size: "small",
+        value: view,
+        exclusive: true,
+        onChange: (_e, v) => {
+          if (v) setView(v);
+        },
+        className: styles.viewToggle,
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "rendered", children: "Rendered" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "raw", children: "Raw" })
+        ]
+      }
+    ),
+    view === "rendered" ? /* @__PURE__ */ jsx("div", { className: styles.ruleContent, children: /* @__PURE__ */ jsx(MarkdownContent, { content }) }) : /* @__PURE__ */ jsx(CodeSnippet, { text: content, language: "markdown" })
+  ] });
+};
+const CopyButton = ({ content }) => {
+  const [open, setOpen] = useState(false);
+  const handleCopy = useCallback((e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(content).then(() => setOpen(true));
+  }, [content]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "Copy content", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleCopy, children: /* @__PURE__ */ jsx(FileCopyIcon, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open,
+        autoHideDuration: 2e3,
+        onClose: () => setOpen(false),
+        message: "Copied to clipboard",
+        anchorOrigin: { vertical: "bottom", horizontal: "center" }
+      }
+    )
+  ] });
+};
+const GenericRuleAccordion = ({
+  rule,
+  label
+}) => {
+  const styles = useStyles();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
+    /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderContent, children: [
+        /* @__PURE__ */ jsx(RuleTypeIcon, { type: rule.type }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: rule.title || rule.fileName }),
+        /* @__PURE__ */ jsx(Chip, { label: label ?? rule.type, size: "small", className: styles.ruleType }),
+        rule.mode && /* @__PURE__ */ jsx(Chip, { label: `Mode: ${rule.mode}`, size: "small", variant: "outlined" }),
+        rule.alwaysApply !== void 0 && /* @__PURE__ */ jsx(Chip, { label: rule.alwaysApply ? "Always Apply" : "On Demand", size: "small", variant: "outlined" }),
+        rule.applyTo && /* @__PURE__ */ jsx(Chip, { label: `Applies to: ${rule.applyTo}`, size: "small", variant: "outlined" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderActions, children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: rule.content }),
+        rule.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+          e.stopPropagation();
+          window.open(constructFileUrl(rule.gitUrl, rule.filePath), "_blank");
+        }, children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" }) }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.ruleMetadata, children: /* @__PURE__ */ jsx(Chip, { label: `Path: ${rule.filePath}`, size: "small", variant: "outlined" }) }),
+      rule.frontmatter && renderFrontmatter(theme, rule.frontmatter),
+      /* @__PURE__ */ jsx(RuleContentViewer, { content: rule.content })
+    ] }) })
+  ] });
+};
 const RuleComponent = ({ rule }) => {
   const styles = useStyles();
   const theme = useTheme();
-  const renderCursorRule = (rule2) => {
-    const { frontmatter, content } = parseCursorContent(rule2.content);
+  const renderCursorRule = (r) => {
+    const { frontmatter, content } = parseCursorContent(r.content);
     return /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
       /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderContent, children: [
-          /* @__PURE__ */ jsx(RuleTypeIcon, { type: rule2.type }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", children: rule2.fileName }),
-          /* @__PURE__ */ jsx(Chip, { label: rule2.type, size: "small", className: styles.ruleType }),
+          /* @__PURE__ */ jsx(RuleTypeIcon, { type: r.type }),
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", children: r.fileName }),
+          /* @__PURE__ */ jsx(Chip, { label: r.type, size: "small", className: styles.ruleType }),
           frontmatter?.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { marginLeft: 8, color: theme.palette.text.secondary }, children: frontmatter.description })
         ] }),
-        rule2.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "small",
-            onClick: (e) => {
-              e.stopPropagation();
-              window.open(constructFileUrl(rule2.gitUrl, rule2.filePath), "_blank");
-            },
-            children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" })
-          }
-        ) })
+        /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderActions, children: [
+          /* @__PURE__ */ jsx(CopyButton, { content }),
+          r.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+            e.stopPropagation();
+            window.open(constructFileUrl(r.gitUrl, r.filePath), "_blank");
+          }, children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" }) }) })
+        ] })
       ] }) }),
       /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("div", { className: styles.ruleMetadata, children: [
-          /* @__PURE__ */ jsx(Chip, { label: `Path: ${rule2.filePath}`, size: "small", variant: "outlined" }),
+          /* @__PURE__ */ jsx(Chip, { label: `Path: ${r.filePath}`, size: "small", variant: "outlined" }),
           frontmatter?.globs && /* @__PURE__ */ jsx(Chip, { label: `Globs: ${Array.isArray(frontmatter.globs) ? frontmatter.globs.join(", ") : frontmatter.globs}`, size: "small", variant: "outlined" })
         ] }),
         renderFrontmatter(theme, frontmatter),
-        /* @__PURE__ */ jsx("div", { className: styles.ruleContent, children: /* @__PURE__ */ jsx(MarkdownContent, { content }) })
-      ] }) })
-    ] });
-  };
-  const renderCopilotRule = (rule2) => {
-    const ruleNumber = rule2.order || (rule2.fileName.match(/Rule (\d+)/) || [])[1] || rule2.id.split("-").pop();
-    return /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
-      /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderContent, children: [
-          /* @__PURE__ */ jsx(RuleTypeIcon, { type: rule2.type }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", children: rule2.title || `Copilot Rule #${ruleNumber}` }),
-          /* @__PURE__ */ jsx(Chip, { label: rule2.type, size: "small", className: styles.ruleType }),
-          rule2.applyTo && /* @__PURE__ */ jsx(
-            Chip,
-            {
-              label: `Applies to: ${rule2.applyTo}`,
-              size: "small",
-              variant: "outlined",
-              style: { marginLeft: 8 }
-            }
-          )
-        ] }),
-        rule2.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "small",
-            onClick: (e) => {
-              e.stopPropagation();
-              window.open(constructFileUrl(rule2.gitUrl, rule2.filePath), "_blank");
-            },
-            children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" })
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.ruleMetadata, children: [
-          /* @__PURE__ */ jsx(Chip, { label: `Path: ${rule2.filePath}`, size: "small", variant: "outlined" }),
-          rule2.frontmatter && renderFrontmatter(theme, rule2.frontmatter)
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: styles.ruleContent, children: /* @__PURE__ */ jsx(MarkdownContent, { content: rule2.content }) })
+        /* @__PURE__ */ jsx(RuleContentViewer, { content })
       ] }) })
     ] });
   };
-  const renderClineRule = (rule2) => /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
+  const renderCopilotRule = (r) => /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
     /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderContent, children: [
-        /* @__PURE__ */ jsx(RuleTypeIcon, { type: rule2.type }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: rule2.title || rule2.fileName }),
-        /* @__PURE__ */ jsx(Chip, { label: rule2.type, size: "small", className: styles.ruleType })
+        /* @__PURE__ */ jsx(RuleTypeIcon, { type: r.type }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: r.title || r.fileName }),
+        /* @__PURE__ */ jsx(Chip, { label: r.type, size: "small", className: styles.ruleType }),
+        r.applyTo && /* @__PURE__ */ jsx(Chip, { label: `Applies to: ${r.applyTo}`, size: "small", variant: "outlined", style: { marginLeft: 8 } })
       ] }),
-      rule2.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          size: "small",
-          onClick: (e) => {
-            e.stopPropagation();
-            window.open(constructFileUrl(rule2.gitUrl, rule2.filePath), "_blank");
-          },
-          children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" })
-        }
-      ) })
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderActions, children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: r.content }),
+        r.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+          e.stopPropagation();
+          window.open(constructFileUrl(r.gitUrl, r.filePath), "_blank");
+        }, children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" }) }) })
+      ] })
     ] }) }),
     /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: styles.ruleMetadata, children: /* @__PURE__ */ jsx(Chip, { label: `Path: ${rule2.filePath}`, size: "small", variant: "outlined" }) }),
-      /* @__PURE__ */ jsx("div", { className: styles.ruleContent, children: /* @__PURE__ */ jsx(MarkdownContent, { content: rule2.content }) })
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleMetadata, children: [
+        /* @__PURE__ */ jsx(Chip, { label: `Path: ${r.filePath}`, size: "small", variant: "outlined" }),
+        r.frontmatter && renderFrontmatter(theme, r.frontmatter)
+      ] }),
+      /* @__PURE__ */ jsx(RuleContentViewer, { content: r.content })
     ] }) })
   ] });
-  const renderClaudeCodeRule = (rule2) => /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
+  const renderClineRule = (r) => /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
     /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderContent, children: [
-        /* @__PURE__ */ jsx(RuleTypeIcon, { type: rule2.type }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: rule2.title || rule2.fileName }),
-        /* @__PURE__ */ jsx(Chip, { label: rule2.type, size: "small", className: styles.ruleType })
+        /* @__PURE__ */ jsx(RuleTypeIcon, { type: r.type }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: r.title || r.fileName }),
+        /* @__PURE__ */ jsx(Chip, { label: r.type, size: "small", className: styles.ruleType })
       ] }),
-      rule2.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          size: "small",
-          onClick: (e) => {
-            e.stopPropagation();
-            window.open(constructFileUrl(rule2.gitUrl, rule2.filePath), "_blank");
-          },
-          children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" })
-        }
-      ) })
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderActions, children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: r.content }),
+        r.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+          e.stopPropagation();
+          window.open(constructFileUrl(r.gitUrl, r.filePath), "_blank");
+        }, children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" }) }) })
+      ] })
     ] }) }),
     /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: styles.ruleMetadata, children: /* @__PURE__ */ jsx(Chip, { label: `Path: ${rule2.filePath}`, size: "small", variant: "outlined" }) }),
-      /* @__PURE__ */ jsx("div", { className: styles.ruleContent, children: /* @__PURE__ */ jsx(MarkdownContent, { content: rule2.content }) })
+      /* @__PURE__ */ jsx("div", { className: styles.ruleMetadata, children: /* @__PURE__ */ jsx(Chip, { label: `Path: ${r.filePath}`, size: "small", variant: "outlined" }) }),
+      /* @__PURE__ */ jsx(RuleContentViewer, { content: r.content })
+    ] }) })
+  ] });
+  const renderClaudeCodeRule = (r) => /* @__PURE__ */ jsxs(Accordion, { className: styles.ruleCard, children: [
+    /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderContent, children: [
+        /* @__PURE__ */ jsx(RuleTypeIcon, { type: r.type }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: r.title || r.fileName }),
+        /* @__PURE__ */ jsx(Chip, { label: "claude-code", size: "small", className: styles.ruleType })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.ruleHeaderActions, children: [
+        /* @__PURE__ */ jsx(CopyButton, { content: r.content }),
+        r.gitUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Open file in repository", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+          e.stopPropagation();
+          window.open(constructFileUrl(r.gitUrl, r.filePath), "_blank");
+        }, children: /* @__PURE__ */ jsx(LaunchIcon, { fontSize: "small" }) }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.ruleMetadata, children: /* @__PURE__ */ jsx(Chip, { label: `Path: ${r.filePath}`, size: "small", variant: "outlined" }) }),
+      /* @__PURE__ */ jsx(RuleContentViewer, { content: r.content })
     ] }) })
   ] });
   switch (rule.type) {
@@ -327,51 +382,73 @@ const RuleComponent = ({ rule }) => {
     case AIRuleType.CLINE:
       return renderClineRule(rule);
     default:
-      return null;
+      return /* @__PURE__ */ jsx(GenericRuleAccordion, { rule });
   }
 };
+const exportRulesToMarkdown = (rules) => {
+  const lines = ["# AI Coding Rules Export\n"];
+  const grouped = {};
+  for (const rule of rules) {
+    if (!grouped[rule.type]) grouped[rule.type] = [];
+    grouped[rule.type].push(rule);
+  }
+  for (const type of RULE_TYPE_DISPLAY_ORDER) {
+    const typeRules = grouped[type];
+    if (!typeRules || typeRules.length === 0) continue;
+    lines.push(`## ${RULE_TYPE_DISPLAY_NAMES[type]}
+`);
+    for (const rule of typeRules) {
+      const title = rule.title || rule.fileName;
+      lines.push(`### ${title}
+`);
+      lines.push(`_File: \`${rule.filePath}\`_
+`);
+      lines.push(`${rule.content}
+`);
+    }
+  }
+  const blob = new Blob([lines.join("\n")], { type: "text/markdown" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "ai-rules-export.md";
+  a.click();
+  URL.revokeObjectURL(url);
+};
 const AIRulesComponent = ({ title = "AI Coding Rules" } = {}) => {
-  const { rulesByType, loading, error, hasGitUrl, totalRules, allowedRuleTypes, selectedRuleTypes, setSelectedRuleTypes, applyFilters, resetFilters, hasUnappliedChanges, hasSearched } = useAiRules();
+  const { rulesByType, rules, loading, error, hasGitUrl, totalRules, allowedRuleTypes, selectedRuleTypes, setSelectedRuleTypes, applyFilters, resetFilters, hasUnappliedChanges, hasSearched } = useAiRules();
   const styles = useStyles();
-  const ruleTypeDisplayOrder = [AIRuleType.CURSOR, AIRuleType.CLAUDE_CODE, AIRuleType.COPILOT, AIRuleType.CLINE];
-  const formatRuleTypeName = (type) => {
-    switch (type) {
-      case AIRuleType.CURSOR:
-        return "Cursor";
-      case AIRuleType.CLAUDE_CODE:
-        return "Claude Code";
-      case AIRuleType.COPILOT:
-        return "Copilot";
-      case AIRuleType.CLINE:
-        return "Cline";
-    }
-  };
+  const [searchQuery, setSearchQuery] = useState("");
+  const formatRuleTypeName = (type) => RULE_TYPE_DISPLAY_NAMES[type] ?? type;
   const handleTypeToggle = (type, checked) => {
     const newTypes = checked ? [...selectedRuleTypes, type] : selectedRuleTypes.filter((t) => t !== type);
     setSelectedRuleTypes(newTypes);
   };
+  const filteredRulesByType = useMemo(() => {
+    if (!searchQuery.trim()) return rulesByType;
+    const q = searchQuery.toLowerCase();
+    const filtered = {};
+    for (const type of RULE_TYPE_DISPLAY_ORDER) {
+      const typeRules = (rulesByType[type] || []).filter((rule) => {
+        const r = rule;
+        return rule.content?.toLowerCase().includes(q) || rule.fileName?.toLowerCase().includes(q) || r.title?.toLowerCase().includes(q) || r.description?.toLowerCase().includes(q);
+      });
+      if (typeRules.length > 0) filtered[type] = typeRules;
+    }
+    return filtered;
+  }, [rulesByType, searchQuery]);
+  const filteredTotal = useMemo(
+    () => Object.values(filteredRulesByType).reduce((sum, arr) => sum + (arr?.length ?? 0), 0),
+    [filteredRulesByType]
+  );
   if (loading) {
     return /* @__PURE__ */ jsx(InfoCard, { title, children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (!hasGitUrl) {
-    return /* @__PURE__ */ jsx(InfoCard, { title, children: /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        missing: "content",
-        title: "No Git Repository",
-        description: "This component doesn't have a Git source URL configured."
-      }
-    ) });
+    return /* @__PURE__ */ jsx(InfoCard, { title, children: /* @__PURE__ */ jsx(EmptyState, { missing: "content", title: "No Git Repository", description: "This component doesn't have a Git source URL configured." }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(InfoCard, { title, children: /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        missing: "content",
-        title: "Error Loading Rules",
-        description: error
-      }
-    ) });
+    return /* @__PURE__ */ jsx(InfoCard, { title, children: /* @__PURE__ */ jsx(EmptyState, { missing: "content", title: "Error Loading Rules", description: error }) });
   }
   return /* @__PURE__ */ jsxs(InfoCard, { title, className: styles.root, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.filterSection, children: [
@@ -379,28 +456,13 @@ const AIRulesComponent = ({ title = "AI Coding Rules" } = {}) => {
       /* @__PURE__ */ jsx("div", { className: styles.filterContainer, children: allowedRuleTypes.map((type) => /* @__PURE__ */ jsx(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: selectedRuleTypes.includes(type),
-              onChange: (e) => handleTypeToggle(type, e.target.checked)
-            }
-          ),
+          control: /* @__PURE__ */ jsx(Checkbox, { checked: selectedRuleTypes.includes(type), onChange: (e) => handleTypeToggle(type, e.target.checked) }),
           label: formatRuleTypeName(type)
         },
         type
       )) }),
       /* @__PURE__ */ jsxs("div", { className: styles.applyFilterButton, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "contained",
-            color: "primary",
-            onClick: applyFilters,
-            disabled: !hasUnappliedChanges,
-            children: "Apply Filter"
-          }
-        ),
+        /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: applyFilters, disabled: !hasUnappliedChanges, children: "Apply Filter" }),
         hasUnappliedChanges && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", style: { marginTop: 8 }, children: 'You have unsaved filter changes. Click "Apply Filter" to update the results.' }),
         !hasUnappliedChanges && selectedRuleTypes.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", style: { marginTop: 8 }, children: "Select at least one rule type to search for AI rules." })
       ] })
@@ -411,32 +473,48 @@ const AIRulesComponent = ({ title = "AI Coding Rules" } = {}) => {
         missing: "content",
         title: "No AI Rules Found",
         description: "No AI rules were found in this repository for the selected rule types.",
-        action: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outlined",
-            onClick: resetFilters,
-            children: "Reset Filters"
-          }
-        )
+        action: /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: resetFilters, children: "Reset Filters" })
       }
     ) : totalRules > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          className: styles.searchBar,
+          variant: "outlined",
+          size: "small",
+          label: "Search rules",
+          placeholder: "Search by name, title, or content\u2026",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: styles.statsContainer, children: [
         /* @__PURE__ */ jsx(Card, { className: styles.statCard, children: /* @__PURE__ */ jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", children: totalRules }),
-          /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: "Total Rules" })
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", children: searchQuery ? filteredTotal : totalRules }),
+          /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: searchQuery ? "Matching" : "Total Rules" })
         ] }) }),
-        ruleTypeDisplayOrder.map((type) => {
-          const typeRules = rulesByType[type] || [];
+        RULE_TYPE_DISPLAY_ORDER.map((type) => {
+          const typeRules = (searchQuery ? filteredRulesByType : rulesByType)[type] || [];
           if (typeRules.length === 0) return null;
           return /* @__PURE__ */ jsx(Card, { className: styles.statCard, children: /* @__PURE__ */ jsxs(CardContent, { children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h4", children: typeRules.length }),
             /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: formatRuleTypeName(type) })
           ] }) }, type);
-        })
+        }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Download all rules as Markdown", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            startIcon: /* @__PURE__ */ jsx(GetAppIcon, {}),
+            className: styles.exportButton,
+            onClick: () => exportRulesToMarkdown(rules),
+            children: "Export"
+          }
+        ) })
       ] }),
-      ruleTypeDisplayOrder.map((type) => {
-        const typeRules = rulesByType[type] || [];
+      RULE_TYPE_DISPLAY_ORDER.map((type) => {
+        const typeRules = (searchQuery ? filteredRulesByType : rulesByType)[type] || [];
         if (typeRules.length === 0) return null;
         return /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "h5", gutterBottom: true, style: { marginTop: 16 }, children: [
@@ -447,7 +525,8 @@ const AIRulesComponent = ({ title = "AI Coding Rules" } = {}) => {
           ] }),
           typeRules.map((rule) => /* @__PURE__ */ jsx(RuleComponent, { rule }, rule.id))
         ] }, type);
-      })
+      }),
+      searchQuery && filteredTotal === 0 && /* @__PURE__ */ jsx(EmptyState, { missing: "content", title: "No matching rules", description: `No rules match "${searchQuery}". Clear the search to show all rules.` })
     ] }) : /* @__PURE__ */ jsx("div", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", children: 'Select rule types above and click "Apply Filter" to search for AI coding rules in this repository.' }) })
   ] });
 };