@frontmcp/ui 1.11.1 → 1.11.3

package/renderer/index.js

@@ -262,54 +262,12 @@ function ContentViewInner({ content, options }) {
   return renderContent(content, options);
 }
 
-// libs/ui/src/renderer/common/use-renderer-theme.ts
-var import_react2 = require("react");
-var import_styles = require("@mui/material/styles");
-function extractThemeValues(theme) {
-  const palette = theme.palette;
-  return {
-    mode: palette.mode,
-    primary: palette.primary.main,
-    secondary: palette.secondary.main,
-    error: palette.error.main,
-    warning: palette.warning.main,
-    success: palette.success.main,
-    info: palette.info.main,
-    background: palette.background.default,
-    paper: palette.background.paper,
-    textPrimary: palette.text.primary,
-    textSecondary: palette.text.secondary,
-    divider: palette.divider,
-    fontFamily: theme.typography.fontFamily ?? "sans-serif",
-    monoFontFamily: theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace',
-    fontSize: theme.typography.fontSize ?? 14,
-    borderRadius: typeof theme.shape.borderRadius === "number" ? theme.shape.borderRadius : 4,
-    seriesColors: [
-      palette.primary.main,
-      palette.secondary.main,
-      palette.error.main,
-      palette.warning.main,
-      palette.success.main,
-      palette.info.main
-    ]
-  };
-}
-function useRendererTheme() {
-  const theme = (0, import_styles.useTheme)();
-  return (0, import_react2.useMemo)(() => extractThemeValues(theme), [theme]);
-}
-
-// libs/ui/src/renderer/common/inject-stylesheet.ts
-function injectStylesheet(href, id) {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(id)) return;
-  const link = document.createElement("link");
-  link.id = id;
-  link.rel = "stylesheet";
-  link.href = href;
-  link.crossOrigin = "anonymous";
-  document.head.appendChild(link);
-}
+// libs/ui/src/renderer/charts/index.ts
+var import_Alert = __toESM(require("@mui/material/Alert"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_styles2 = require("@mui/material/styles");
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_react4 = __toESM(require("react"));
 
 // libs/ui/src/renderer/common/lazy-import.ts
 var ESM_SH_BASE = "https://esm.sh/";
@@ -371,10 +329,10 @@ function createLazyImport(moduleId, importer) {
 }
 
 // libs/ui/src/renderer/common/use-lazy-module.ts
-var import_react3 = require("react");
+var import_react2 = require("react");
 function useLazyModule(lazy) {
-  const [, forceUpdate] = (0, import_react3.useState)(0);
-  (0, import_react3.useEffect)(() => {
+  const [, forceUpdate] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
     if (lazy.getState().status === "loaded") {
       forceUpdate((n) => n + 1);
       return;
@@ -387,206 +345,605 @@ function useLazyModule(lazy) {
   return lazy.get();
 }
 
-// libs/ui/src/renderer/mdx/index.ts
-var import_react4 = __toESM(require("react"));
-var import_Box = __toESM(require("@mui/material/Box"));
-var import_Typography = __toESM(require("@mui/material/Typography"));
-var import_Link = __toESM(require("@mui/material/Link"));
-var import_Table = __toESM(require("@mui/material/Table"));
-var import_TableBody = __toESM(require("@mui/material/TableBody"));
-var import_TableCell = __toESM(require("@mui/material/TableCell"));
-var import_TableHead = __toESM(require("@mui/material/TableHead"));
-var import_TableRow = __toESM(require("@mui/material/TableRow"));
-var import_styles2 = require("@mui/material/styles");
-var lazyReactMarkdown = createLazyImport(
-  "react-markdown",
-  async () => {
-    const mod = await runtimeImportWithFallback(
-      "react-markdown",
-      esmShUrl("react-markdown@9", { external: ["react", "react-dom"] })
-    );
-    return mod;
-  }
-);
-var lazyRemarkGfm = createLazyImport("remark-gfm", async () => {
-  const mod = await runtimeImportWithFallback("remark-gfm", esmShUrl("remark-gfm@4"));
-  return mod;
-});
-var lazyRehypeHighlight = createLazyImport("rehype-highlight", async () => {
-  const mod = await runtimeImportWithFallback("rehype-highlight", esmShUrl("rehype-highlight@7"));
-  return mod;
-});
-var lazyRehypeRaw = createLazyImport("rehype-raw", async () => {
-  const mod = await runtimeImportWithFallback("rehype-raw", esmShUrl("rehype-raw@7"));
-  return mod;
-});
-var MarkdownRoot = (0, import_styles2.styled)(import_Box.default, {
-  name: "FrontMcpMarkdown",
-  slot: "Root"
-})(() => ({
-  lineHeight: 1.7,
-  "& > *:first-of-type": { marginTop: 0 },
-  "& > *:last-child": { marginBottom: 0 },
-  "& img": { maxWidth: "100%", height: "auto" }
-}));
-var CodeBlock = (0, import_styles2.styled)("pre", {
-  name: "FrontMcpMarkdown",
-  slot: "Code"
-})(({ theme }) => {
-  const monoFont = String(
-    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
-  );
-  return {
-    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
-    padding: theme.spacing(2),
-    borderRadius: Number(theme.shape.borderRadius),
-    overflow: "auto",
-    fontFamily: monoFont,
-    fontSize: "0.875rem",
-    "& code": {
-      backgroundColor: "transparent",
-      padding: 0,
-      fontSize: "inherit",
-      fontFamily: "inherit"
-    }
-  };
-});
-var InlineCode = (0, import_styles2.styled)("code")(({ theme }) => {
-  const monoFont = String(
-    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
-  );
-  return {
-    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200],
-    padding: "2px 6px",
-    borderRadius: Number(theme.shape.borderRadius) / 2,
-    fontFamily: monoFont,
-    fontSize: "0.85em"
-  };
-});
-var Blockquote = (0, import_styles2.styled)("blockquote", {
-  name: "FrontMcpMarkdown",
-  slot: "Blockquote"
-})(({ theme }) => ({
-  borderLeft: `4px solid ${theme.palette.primary.main}`,
-  margin: theme.spacing(2, 0),
-  padding: theme.spacing(1, 2),
-  color: theme.palette.text.secondary,
-  "& > p": { margin: 0 }
-}));
-function createMuiComponents() {
+// libs/ui/src/renderer/common/use-renderer-theme.ts
+var import_styles = require("@mui/material/styles");
+var import_react3 = require("react");
+function extractThemeValues(theme) {
+  const palette = theme.palette;
   return {
-    h1: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "h4", gutterBottom: true }),
-    h2: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "h5", gutterBottom: true }),
-    h3: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "h6", gutterBottom: true }),
-    h4: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "subtitle1", gutterBottom: true, fontWeight: 600 }),
-    h5: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "subtitle2", gutterBottom: true }),
-    h6: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "subtitle2", gutterBottom: true }),
-    p: (props) => import_react4.default.createElement(import_Typography.default, { ...props, variant: "body1", paragraph: true }),
-    a: (props) => import_react4.default.createElement(import_Link.default, { ...props, target: "_blank", rel: "noopener noreferrer" }),
-    blockquote: (props) => import_react4.default.createElement(Blockquote, props),
-    pre: (props) => import_react4.default.createElement(CodeBlock, props),
-    code: ({ inline, className, children, ...rest }) => {
-      if (inline) return import_react4.default.createElement(InlineCode, rest, children);
-      return import_react4.default.createElement("code", { className, ...rest }, children);
-    },
-    table: (props) => import_react4.default.createElement(import_Table.default, { ...props, size: "small" }),
-    thead: (props) => import_react4.default.createElement(import_TableHead.default, props),
-    tbody: (props) => import_react4.default.createElement(import_TableBody.default, props),
-    tr: (props) => import_react4.default.createElement(import_TableRow.default, { ...props, hover: true }),
-    th: (props) => import_react4.default.createElement(import_TableCell.default, { ...props, sx: { fontWeight: 600 } }),
-    td: (props) => import_react4.default.createElement(import_TableCell.default, props)
+    mode: palette.mode,
+    primary: palette.primary.main,
+    secondary: palette.secondary.main,
+    error: palette.error.main,
+    warning: palette.warning.main,
+    success: palette.success.main,
+    info: palette.info.main,
+    background: palette.background.default,
+    paper: palette.background.paper,
+    textPrimary: palette.text.primary,
+    textSecondary: palette.text.secondary,
+    divider: palette.divider,
+    fontFamily: theme.typography.fontFamily ?? "sans-serif",
+    monoFontFamily: theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace',
+    fontSize: theme.typography.fontSize ?? 14,
+    borderRadius: typeof theme.shape.borderRadius === "number" ? theme.shape.borderRadius : 4,
+    seriesColors: [
+      palette.primary.main,
+      palette.secondary.main,
+      palette.error.main,
+      palette.warning.main,
+      palette.success.main,
+      palette.info.main
+    ]
   };
 }
-function MarkdownView({ content, className }) {
-  const components = (0, import_react4.useMemo)(() => createMuiComponents(), []);
-  const ReactMarkdownMod = useLazyModule(lazyReactMarkdown);
-  const remarkGfmMod = lazyRemarkGfm.get();
-  const rehypeHighlightMod = lazyRehypeHighlight.get();
-  const rehypeRawMod = lazyRehypeRaw.get();
-  if (ReactMarkdownMod) {
-    const ReactMarkdown = ReactMarkdownMod.default;
-    const remarkPlugins = [];
-    const rehypePlugins = [];
-    if (remarkGfmMod) remarkPlugins.push(remarkGfmMod.default);
-    if (rehypeHighlightMod) rehypePlugins.push(rehypeHighlightMod.default);
-    if (rehypeRawMod) rehypePlugins.push(rehypeRawMod.default);
-    return import_react4.default.createElement(
-      MarkdownRoot,
-      { className },
-      import_react4.default.createElement(ReactMarkdown, {
-        children: content,
-        remarkPlugins,
-        rehypePlugins,
-        components
-      })
-    );
-  }
-  return import_react4.default.createElement(MarkdownRoot, { className }, ...renderFallback(content));
+function useRendererTheme() {
+  const theme = (0, import_styles.useTheme)();
+  return (0, import_react3.useMemo)(() => extractThemeValues(theme), [theme]);
 }
-function renderFallback(content) {
-  const lines = content.split("\n");
-  const elements = [];
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.startsWith("# ")) {
-      elements.push(import_react4.default.createElement(import_Typography.default, { key: i, variant: "h4", gutterBottom: true }, line.slice(2)));
-    } else if (line.startsWith("## ")) {
-      elements.push(import_react4.default.createElement(import_Typography.default, { key: i, variant: "h5", gutterBottom: true }, line.slice(3)));
-    } else if (line.startsWith("### ")) {
-      elements.push(import_react4.default.createElement(import_Typography.default, { key: i, variant: "h6", gutterBottom: true }, line.slice(4)));
-    } else if (line.startsWith("- ") || line.startsWith("* ")) {
-      elements.push(import_react4.default.createElement("li", { key: i }, line.slice(2)));
-    } else if (line.startsWith("**") && line.endsWith("**")) {
-      elements.push(import_react4.default.createElement(import_Typography.default, { key: i, variant: "body1", sx: { fontWeight: 700 } }, line.slice(2, -2)));
-    } else if (line.trim()) {
-      elements.push(import_react4.default.createElement(import_Typography.default, { key: i, variant: "body1", sx: { mb: 2 } }, line));
-    }
-  }
-  return elements;
+
+// libs/ui/src/renderer/charts/index.ts
+var CHART_TYPE_RE2 = /"type"\s*:\s*"(?:bar|line|area|pie|scatter|radar|composed)"/;
+function isChart(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return CHART_TYPE_RE2.test(trimmed) && trimmed.includes('"data"');
 }
-lazyReactMarkdown.load().catch(() => {
-});
-lazyRemarkGfm.load().catch(() => {
-});
-lazyRehypeHighlight.load().catch(() => {
-});
-lazyRehypeRaw.load().catch(() => {
+var lazyRecharts = createLazyImport("recharts", async () => {
+  const mod = await runtimeImportWithFallback("recharts", esmShUrl("recharts@2", { external: ["react", "react-dom"] }));
+  return mod;
 });
-var MdxRenderer = class {
-  type = "mdx";
-  priority = 5;
-  canHandle(content) {
-    return /^---\s*\n/.test(content) || /import\s+/.test(content) || /<[A-Z]/.test(content) || /^#{1,6}\s+\S/m.test(content) || /^\s*[-*+]\s+\S/m.test(content);
-  }
-  render(content, options) {
-    return import_react4.default.createElement(MarkdownView, {
-      content,
-      className: options?.className ?? "fmcp-mdx-content"
-    });
-  }
-};
-var mdxRenderer = new MdxRenderer();
-
-// libs/ui/src/renderer/html/index.ts
-var import_react5 = __toESM(require("react"));
-var import_Box2 = __toESM(require("@mui/material/Box"));
-var import_styles3 = require("@mui/material/styles");
-var HtmlRoot = (0, import_styles3.styled)(import_Box2.default, {
-  name: "FrontMcpHtml",
+var ChartRoot = (0, import_styles2.styled)(import_Box.default, {
+  name: "FrontMcpChart",
   slot: "Root"
 })(({ theme }) => ({
-  "& a": { color: theme.palette.primary.main },
-  "& table": { borderCollapse: "collapse", width: "100%" },
-  "& th, & td": { border: `1px solid ${theme.palette.divider}`, padding: theme.spacing(1) },
-  "& pre": {
-    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
-    padding: theme.spacing(1.5),
-    borderRadius: theme.shape.borderRadius,
-    overflow: "auto"
-  }
+  width: "100%",
+  padding: theme.spacing(2)
 }));
-var purifyModule = null;
-var purifyPromise = null;
+function ChartView({ config, className }) {
+  const themeValues = useRendererTheme();
+  const recharts = useLazyModule(lazyRecharts);
+  const colors = (0, import_react4.useMemo)(() => config.colors ?? themeValues.seriesColors, [config.colors, themeValues.seriesColors]);
+  if (!recharts) {
+    return import_react4.default.createElement(import_Alert.default, { severity: "info" }, "Loading chart library...");
+  }
+  const { ResponsiveContainer, Tooltip, Legend, CartesianGrid, XAxis, YAxis } = recharts;
+  const height = config.height ?? 400;
+  const xKey = config.xKey ?? "name";
+  const yKeys = config.yKeys ?? Object.keys(config.data?.[0] ?? {}).filter((k) => k !== xKey);
+  const chartContent = renderChartType(
+    recharts,
+    config.type,
+    config.data,
+    xKey,
+    yKeys,
+    colors,
+    themeValues.borderRadius
+  );
+  return import_react4.default.createElement(
+    ChartRoot,
+    { className },
+    config.title && import_react4.default.createElement(
+      import_Typography.default,
+      { variant: "subtitle1", gutterBottom: true, sx: { fontWeight: 600, textAlign: "center" } },
+      config.title
+    ),
+    import_react4.default.createElement(ResponsiveContainer, { width: "100%", height }, chartContent)
+  );
+}
+function renderChartType(rc, type, data, xKey, yKeys, colors, borderRadius) {
+  const commonProps = { data };
+  const grid = import_react4.default.createElement(rc.CartesianGrid, { strokeDasharray: "3 3", opacity: 0.3 });
+  const xAxis = import_react4.default.createElement(rc.XAxis, { dataKey: xKey });
+  const yAxis = import_react4.default.createElement(rc.YAxis);
+  const tooltip = import_react4.default.createElement(rc.Tooltip, { contentStyle: { borderRadius } });
+  const legend = import_react4.default.createElement(rc.Legend);
+  switch (type) {
+    case "bar":
+      return import_react4.default.createElement(
+        rc.BarChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => import_react4.default.createElement(rc.Bar, {
+            key,
+            dataKey: key,
+            fill: colors[i % colors.length],
+            radius: [borderRadius, borderRadius, 0, 0]
+          })
+        )
+      );
+    case "line":
+      return import_react4.default.createElement(
+        rc.LineChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => import_react4.default.createElement(rc.Line, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            strokeWidth: 2
+          })
+        )
+      );
+    case "area":
+      return import_react4.default.createElement(
+        rc.AreaChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => import_react4.default.createElement(rc.Area, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            fill: colors[i % colors.length],
+            fillOpacity: 0.3
+          })
+        )
+      );
+    case "pie":
+      return import_react4.default.createElement(
+        rc.PieChart,
+        {},
+        tooltip,
+        legend,
+        import_react4.default.createElement(
+          rc.Pie,
+          { data, dataKey: yKeys[0] ?? "value", nameKey: xKey, cx: "50%", cy: "50%", outerRadius: "80%", label: true },
+          ...data.map((_, i) => import_react4.default.createElement(rc.Cell, { key: i, fill: colors[i % colors.length] }))
+        )
+      );
+    case "scatter":
+      return import_react4.default.createElement(
+        rc.ScatterChart,
+        {},
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => import_react4.default.createElement(rc.Scatter, { key, name: key, dataKey: key, data, fill: colors[i % colors.length] })
+        )
+      );
+    case "radar":
+      return import_react4.default.createElement(
+        rc.RadarChart,
+        { cx: "50%", cy: "50%", outerRadius: "80%", data },
+        import_react4.default.createElement(rc.PolarGrid),
+        import_react4.default.createElement(rc.PolarAngleAxis, { dataKey: xKey }),
+        import_react4.default.createElement(rc.PolarRadiusAxis),
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => import_react4.default.createElement(rc.Radar, {
+            key,
+            name: key,
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            fill: colors[i % colors.length],
+            fillOpacity: 0.3
+          })
+        )
+      );
+    case "composed":
+      return import_react4.default.createElement(
+        rc.ComposedChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map((key, i) => {
+          if (i % 2 === 0) {
+            return import_react4.default.createElement(rc.Bar, {
+              key,
+              dataKey: key,
+              fill: colors[i % colors.length],
+              radius: [borderRadius, borderRadius, 0, 0]
+            });
+          }
+          return import_react4.default.createElement(rc.Line, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            strokeWidth: 2
+          });
+        })
+      );
+    default:
+      return import_react4.default.createElement(rc.BarChart, commonProps, grid, xAxis, yAxis, tooltip, legend);
+  }
+}
+lazyRecharts.load().catch(() => {
+});
+var ChartsRenderer = class {
+  type = "chart";
+  priority = 80;
+  canHandle(content) {
+    return isChart(content);
+  }
+  render(content, options) {
+    try {
+      const config = JSON.parse(content);
+      return import_react4.default.createElement(ChartView, {
+        config,
+        className: options?.className ?? "fmcp-chart-content"
+      });
+    } catch {
+      return import_react4.default.createElement(import_Alert.default, { severity: "error" }, "Invalid chart JSON");
+    }
+  }
+};
+var chartsRenderer = new ChartsRenderer();
+
+// libs/ui/src/renderer/csv/index.ts
+var import_Box2 = __toESM(require("@mui/material/Box"));
+var import_styles3 = require("@mui/material/styles");
+var import_Table = __toESM(require("@mui/material/Table"));
+var import_TableBody = __toESM(require("@mui/material/TableBody"));
+var import_TableCell = __toESM(require("@mui/material/TableCell"));
+var import_TableContainer = __toESM(require("@mui/material/TableContainer"));
+var import_TableHead = __toESM(require("@mui/material/TableHead"));
+var import_TablePagination = __toESM(require("@mui/material/TablePagination"));
+var import_TableRow = __toESM(require("@mui/material/TableRow"));
+var import_TableSortLabel = __toESM(require("@mui/material/TableSortLabel"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_react5 = __toESM(require("react"));
+function detectDelimiter(content) {
+  const firstLine = content.split("\n")[0];
+  const commas = (firstLine.match(/,/g) ?? []).length;
+  const tabs = (firstLine.match(/\t/g) ?? []).length;
+  const semicolons = (firstLine.match(/;/g) ?? []).length;
+  if (tabs > commas && tabs > semicolons) return "	";
+  if (semicolons > commas) return ";";
+  return ",";
+}
+function parseCsv(content, delimiter) {
+  return content.trim().split("\n").map((line) => line.split(delimiter).map((cell) => cell.trim()));
+}
+var CsvRoot = (0, import_styles3.styled)(import_Box2.default, {
+  name: "FrontMcpCsvTable",
+  slot: "Root"
+})({
+  width: "100%"
+});
+var StyledHeaderCell = (0, import_styles3.styled)(import_TableCell.default, {
+  name: "FrontMcpCsvTable",
+  slot: "Header"
+})(({ theme }) => ({
+  fontWeight: 600,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
+  whiteSpace: "nowrap"
+}));
+var FilterToolbar = (0, import_styles3.styled)(import_Box2.default, {
+  name: "FrontMcpCsvTable",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  display: "flex",
+  gap: theme.spacing(1)
+}));
+function CsvTableView({ content, className, pageSize = 25 }) {
+  const delimiter = (0, import_react5.useMemo)(() => detectDelimiter(content), [content]);
+  const allRows = (0, import_react5.useMemo)(() => parseCsv(content, delimiter), [content, delimiter]);
+  const headers = allRows[0] ?? [];
+  const dataRows = (0, import_react5.useMemo)(() => allRows.slice(1), [allRows]);
+  const [page, setPage] = (0, import_react5.useState)(0);
+  const [rowsPerPage, setRowsPerPage] = (0, import_react5.useState)(pageSize);
+  const [sortCol, setSortCol] = (0, import_react5.useState)(null);
+  const [sortDir, setSortDir] = (0, import_react5.useState)("asc");
+  const [filter, setFilter] = (0, import_react5.useState)("");
+  const filteredRows = (0, import_react5.useMemo)(() => {
+    if (!filter) return dataRows;
+    const lower = filter.toLowerCase();
+    return dataRows.filter((row) => row.some((cell) => cell.toLowerCase().includes(lower)));
+  }, [dataRows, filter]);
+  const sortedRows = (0, import_react5.useMemo)(() => {
+    if (sortCol === null) return filteredRows;
+    const sorted = [...filteredRows];
+    sorted.sort((a, b) => {
+      const va = a[sortCol] ?? "";
+      const vb = b[sortCol] ?? "";
+      const numA = Number(va);
+      const numB = Number(vb);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return sortDir === "asc" ? numA - numB : numB - numA;
+      }
+      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
+    return sorted;
+  }, [filteredRows, sortCol, sortDir]);
+  const pageRows = (0, import_react5.useMemo)(
+    () => sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [sortedRows, page, rowsPerPage]
+  );
+  const handleSort = (0, import_react5.useCallback)((colIndex) => {
+    setSortCol((prev) => {
+      if (prev === colIndex) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+        return colIndex;
+      }
+      setSortDir("asc");
+      return colIndex;
+    });
+  }, []);
+  const handleChangePage = (0, import_react5.useCallback)((_, newPage) => setPage(newPage), []);
+  const handleChangeRowsPerPage = (0, import_react5.useCallback)((e) => {
+    setRowsPerPage(parseInt(e.target.value, 10));
+    setPage(0);
+  }, []);
+  return import_react5.default.createElement(
+    CsvRoot,
+    { className },
+    import_react5.default.createElement(
+      FilterToolbar,
+      null,
+      import_react5.default.createElement(import_TextField.default, {
+        size: "small",
+        placeholder: "Filter rows...",
+        value: filter,
+        onChange: (e) => {
+          setFilter(e.target.value);
+          setPage(0);
+        },
+        sx: { minWidth: 200 }
+      })
+    ),
+    import_react5.default.createElement(
+      import_TableContainer.default,
+      { sx: { border: 1, borderColor: "divider", borderRadius: 1 } },
+      import_react5.default.createElement(
+        import_Table.default,
+        { size: "small", stickyHeader: true },
+        import_react5.default.createElement(
+          import_TableHead.default,
+          null,
+          import_react5.default.createElement(
+            import_TableRow.default,
+            null,
+            headers.map(
+              (header, i) => import_react5.default.createElement(
+                StyledHeaderCell,
+                { key: i },
+                import_react5.default.createElement(
+                  import_TableSortLabel.default,
+                  {
+                    active: sortCol === i,
+                    direction: sortCol === i ? sortDir : "asc",
+                    onClick: () => handleSort(i)
+                  },
+                  header
+                )
+              )
+            )
+          )
+        ),
+        import_react5.default.createElement(
+          import_TableBody.default,
+          null,
+          pageRows.map(
+            (row, ri) => import_react5.default.createElement(
+              import_TableRow.default,
+              { key: ri, hover: true },
+              row.map((cell, ci) => import_react5.default.createElement(import_TableCell.default, { key: ci }, cell))
+            )
+          )
+        )
+      )
+    ),
+    sortedRows.length > rowsPerPage && import_react5.default.createElement(import_TablePagination.default, {
+      count: sortedRows.length,
+      page,
+      rowsPerPage,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage,
+      rowsPerPageOptions: [10, 25, 50, 100]
+    })
+  );
+}
+var CsvRenderer = class {
+  type = "csv";
+  priority = 10;
+  canHandle(content) {
+    const lines = content.trim().split("\n").slice(0, 5);
+    if (lines.length < 2) return false;
+    for (const delim of [",", "	", ";"]) {
+      const counts = lines.map((line) => line.split(delim).length);
+      if (counts[0] > 1 && counts.every((c) => c === counts[0])) return true;
+    }
+    return false;
+  }
+  render(content, options) {
+    const pageSize = options?.rendererOptions?.["pageSize"];
+    return import_react5.default.createElement(CsvTableView, {
+      content,
+      className: options?.className ?? "fmcp-csv-table",
+      pageSize
+    });
+  }
+};
+var csvRenderer = new CsvRenderer();
+
+// libs/ui/src/renderer/flow/index.ts
+var import_Alert2 = __toESM(require("@mui/material/Alert"));
+var import_Box3 = __toESM(require("@mui/material/Box"));
+var import_styles4 = require("@mui/material/styles");
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var import_react6 = __toESM(require("react"));
+
+// libs/ui/src/renderer/common/inject-stylesheet.ts
+function injectStylesheet(href, id) {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const link = document.createElement("link");
+  link.id = id;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.crossOrigin = "anonymous";
+  document.head.appendChild(link);
+}
+
+// libs/ui/src/renderer/flow/index.ts
+var XYFLOW_CSS_URL = "https://esm.sh/@xyflow/react@12/dist/style.css";
+var XYFLOW_CSS_ID = "fmcp-xyflow-css";
+function isFlow(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return trimmed.includes('"nodes"') && trimmed.includes('"edges"');
+}
+var lazyXYFlow = createLazyImport("@xyflow/react", async () => {
+  const mod = await runtimeImportWithFallback(
+    "@xyflow/react",
+    esmShUrl("@xyflow/react@12", { external: ["react", "react-dom"] })
+  );
+  return mod;
+});
+var FlowRoot = (0, import_styles4.styled)(import_Box3.default, {
+  name: "FrontMcpFlow",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  border: `1px solid ${theme.palette.divider}`
+}));
+function FlowView({ config, className }) {
+  (0, import_react6.useEffect)(() => {
+    injectStylesheet(XYFLOW_CSS_URL, XYFLOW_CSS_ID);
+  }, []);
+  const themeValues = useRendererTheme();
+  const xyflow = useLazyModule(lazyXYFlow);
+  const height = config.height ?? 500;
+  const styledNodes = (0, import_react6.useMemo)(() => {
+    return config.nodes.map((node) => ({
+      ...node,
+      style: {
+        background: themeValues.paper,
+        color: themeValues.textPrimary,
+        border: `1px solid ${themeValues.divider}`,
+        borderRadius: themeValues.borderRadius,
+        padding: 8,
+        fontSize: themeValues.fontSize,
+        fontFamily: themeValues.fontFamily,
+        ...node.style
+      }
+    }));
+  }, [config.nodes, themeValues]);
+  const styledEdges = (0, import_react6.useMemo)(() => {
+    return config.edges.map((edge, i) => ({
+      ...edge,
+      style: {
+        stroke: themeValues.seriesColors[i % themeValues.seriesColors.length],
+        strokeWidth: 2,
+        ...edge.style
+      }
+    }));
+  }, [config.edges, themeValues]);
+  if (!xyflow) {
+    return import_react6.default.createElement(import_Alert2.default, { severity: "info" }, "Loading flow diagram library...");
+  }
+  const { ReactFlow, Controls, MiniMap, Background } = xyflow;
+  return import_react6.default.createElement(
+    FlowRoot,
+    { className },
+    config.title && import_react6.default.createElement(
+      import_Typography2.default,
+      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
+      config.title
+    ),
+    import_react6.default.createElement(
+      import_Box3.default,
+      { sx: { height } },
+      import_react6.default.createElement(
+        ReactFlow,
+        {
+          nodes: styledNodes,
+          edges: styledEdges,
+          fitView: config.fitView !== false,
+          proOptions: { hideAttribution: true }
+        },
+        import_react6.default.createElement(Controls, {
+          style: {
+            backgroundColor: themeValues.paper,
+            borderRadius: themeValues.borderRadius,
+            border: `1px solid ${themeValues.divider}`
+          }
+        }),
+        import_react6.default.createElement(MiniMap, {
+          style: {
+            backgroundColor: themeValues.background,
+            borderRadius: themeValues.borderRadius
+          },
+          nodeColor: themeValues.primary
+        }),
+        Background && import_react6.default.createElement(Background, {
+          color: themeValues.divider,
+          gap: 16
+        })
+      )
+    )
+  );
+}
+lazyXYFlow.load().catch(() => {
+});
+var FlowRenderer = class {
+  type = "flow";
+  priority = 70;
+  canHandle(content) {
+    return isFlow(content);
+  }
+  render(content, options) {
+    try {
+      const config = JSON.parse(content);
+      return import_react6.default.createElement(FlowView, {
+        config,
+        className: options?.className ?? "fmcp-flow-content"
+      });
+    } catch {
+      return import_react6.default.createElement(import_Alert2.default, { severity: "error" }, "Invalid flow JSON");
+    }
+  }
+};
+var flowRenderer = new FlowRenderer();
+
+// libs/ui/src/renderer/html/index.ts
+var import_Box4 = __toESM(require("@mui/material/Box"));
+var import_styles5 = require("@mui/material/styles");
+var import_react7 = __toESM(require("react"));
+var HtmlRoot = (0, import_styles5.styled)(import_Box4.default, {
+  name: "FrontMcpHtml",
+  slot: "Root"
+})(({ theme }) => ({
+  "& a": { color: theme.palette.primary.main },
+  "& table": { borderCollapse: "collapse", width: "100%" },
+  "& th, & td": { border: `1px solid ${theme.palette.divider}`, padding: theme.spacing(1) },
+  "& pre": {
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
+    padding: theme.spacing(1.5),
+    borderRadius: theme.shape.borderRadius,
+    overflow: "auto"
+  }
+}));
+var purifyModule = null;
+var purifyPromise = null;
 function loadDOMPurify() {
   if (purifyModule) return Promise.resolve(purifyModule);
   if (purifyPromise) return purifyPromise;
@@ -610,16 +967,16 @@ function sanitizeSync(html) {
 }
 loadDOMPurify();
 function HtmlView({ html, className }) {
-  const [purifyReady, setPurifyReady] = (0, import_react5.useState)(!!purifyModule);
-  (0, import_react5.useEffect)(() => {
+  const [purifyReady, setPurifyReady] = (0, import_react7.useState)(!!purifyModule);
+  (0, import_react7.useEffect)(() => {
     if (!purifyModule) {
       loadDOMPurify().then((mod) => {
         if (mod) setPurifyReady(true);
       });
     }
   }, []);
-  const sanitized = (0, import_react5.useMemo)(() => sanitizeSync(html), [html, purifyReady]);
-  return import_react5.default.createElement(HtmlRoot, {
+  const sanitized = (0, import_react7.useMemo)(() => sanitizeSync(html), [html, purifyReady]);
+  return import_react7.default.createElement(HtmlRoot, {
     className,
     dangerouslySetInnerHTML: { __html: sanitized }
   });
@@ -631,7 +988,7 @@ var HtmlRenderer = class {
     return /^\s*</.test(content) && /<\/\w+>/.test(content);
   }
   render(content, options) {
-    return import_react5.default.createElement(HtmlView, {
+    return import_react7.default.createElement(HtmlView, {
       html: content,
       className: options?.className ?? "fmcp-html-content"
     });
@@ -639,251 +996,158 @@ var HtmlRenderer = class {
 };
 var htmlRenderer = new HtmlRenderer();
 
-// libs/ui/src/renderer/react/index.ts
-var import_react6 = __toESM(require("react"));
-var import_Box3 = __toESM(require("@mui/material/Box"));
-var import_Alert = __toESM(require("@mui/material/Alert"));
-
-// libs/ui/src/runtime/babel-runtime.ts
-var BABEL_STANDALONE_CDN = "https://esm.sh/@babel/standalone@7";
-var BABEL_STANDALONE_FALLBACK_CDN = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.10/babel.min.js";
-var babelState = { status: "idle" };
-async function loadBabel() {
-  if (babelState.status === "loaded") {
-    return babelState.babel;
-  }
-  if (babelState.status === "loading") {
-    return babelState.promise;
-  }
-  if (babelState.status === "error") {
-    throw babelState.error;
-  }
-  const promise = doLoadBabel();
-  babelState = { status: "loading", promise };
-  try {
-    const babel = await promise;
-    babelState = { status: "loaded", babel };
-    return babel;
-  } catch (error) {
-    const err = error instanceof Error ? error : new Error(String(error));
-    babelState = { status: "error", error: err };
-    throw err;
-  }
-}
-async function doLoadBabel() {
-  const globalBabel = globalThis["Babel"];
-  if (globalBabel && typeof globalBabel.transform === "function") {
-    return globalBabel;
-  }
-  try {
-    const module2 = await import(
-      /* @vite-ignore */
-      /* webpackIgnore: true */
-      BABEL_STANDALONE_CDN
-    );
-    if (module2 && typeof module2.transform === "function") {
-      return module2;
-    }
-    if (module2.default && typeof module2.default.transform === "function") {
-      return module2.default;
-    }
-  } catch {
-  }
-  return new Promise((resolve, reject) => {
-    if (typeof document === "undefined") {
-      reject(new Error("Babel Standalone requires a browser environment"));
-      return;
-    }
-    const script = document.createElement("script");
-    script.src = BABEL_STANDALONE_FALLBACK_CDN;
-    script.crossOrigin = "anonymous";
-    script.onload = () => {
-      const babel = globalThis["Babel"];
-      if (babel && typeof babel.transform === "function") {
-        resolve(babel);
-      } else {
-        reject(new Error("Babel Standalone loaded but transform function not found"));
-      }
-    };
-    script.onerror = () => {
-      reject(new Error(`Failed to load Babel Standalone from ${BABEL_STANDALONE_FALLBACK_CDN}`));
-    };
-    document.head.appendChild(script);
-  });
-}
-async function transpileJsx(source, filename = "component.jsx") {
-  const babel = await loadBabel();
-  const result = babel.transform(source, {
-    presets: ["react"],
-    filename
-  });
-  return result.code;
-}
-
-// libs/ui/src/renderer/react/index.ts
-function isReactJsx(content) {
-  if (/^#{1,6}\s+\S/m.test(content)) return false;
-  return /(?:function|const|class)\s+\w+/.test(content) && /(?:return|=>)[\s(]*</.test(content);
-}
-function parseImports(source) {
-  const results = [];
-  const defaultRe = /^import\s+(\w+)\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
-  let m;
-  while ((m = defaultRe.exec(source)) !== null) {
-    results.push({ line: m[0], localName: m[1], specifier: m[2], named: false });
-  }
-  const namedRe = /^import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
-  while ((m = namedRe.exec(source)) !== null) {
-    const names = m[1].split(",").map((n) => n.trim()).filter(Boolean);
-    for (const name of names) {
-      results.push({ line: m[0], localName: name, specifier: m[2], named: true });
-    }
-  }
-  return results;
-}
-function stripImports(source) {
-  return source.replace(/^import\s+\w+\s+from\s+['"][^'"]+['"][\s;]*$/gm, "").replace(/^import\s+\{[^}]+\}\s+from\s+['"][^'"]+['"][\s;]*$/gm, "");
-}
-function rewriteExportDefault(source) {
-  let result = source.replace(/^export\s+default\s+(function|class)\b/gm, "var __default__ = $1");
-  result = result.replace(/^export\s+default\s+(\([^)]*\)\s*=>)/gm, "var __default__ = $1");
-  result = result.replace(/^export\s+default\s+(\w+)\s*;?\s*$/gm, "var __default__ = $1;");
-  return result;
-}
-function isReactSpecifier(specifier) {
-  return specifier === "react" || /^https?:\/\/esm\.sh\/react(?:@[\d.]+)?$/.test(specifier);
-}
-async function resolveModules(imports) {
-  const modules = {};
-  const specifierMap = /* @__PURE__ */ new Map();
-  for (const imp of imports) {
-    const existing = specifierMap.get(imp.specifier) ?? [];
-    existing.push(imp);
-    specifierMap.set(imp.specifier, existing);
-  }
-  for (const [specifier, specImports] of specifierMap) {
-    let mod;
-    if (isReactSpecifier(specifier)) {
-      mod = import_react6.default;
-    } else {
-      mod = await runtimeImport(specifier);
-    }
-    for (const imp of specImports) {
-      if (imp.named) {
-        modules[imp.localName] = mod[imp.localName] ?? mod["default"]?.[imp.localName];
-      } else {
-        modules[imp.localName] = mod["default"] ?? mod;
-      }
-    }
-  }
-  return modules;
+// libs/ui/src/renderer/image/index.ts
+var import_Alert3 = __toESM(require("@mui/material/Alert"));
+var import_Box5 = __toESM(require("@mui/material/Box"));
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
+var import_styles6 = require("@mui/material/styles");
+var import_Typography3 = __toESM(require("@mui/material/Typography"));
+var import_react8 = __toESM(require("react"));
+var IMAGE_DATA_URI = /^data:image\/(?:png|jpeg|jpg|gif|webp|svg\+xml|avif)[;,]/;
+var IMAGE_URL = /^https?:\/\/[^?#\s]+\.(?:png|jpe?g|gif|webp|svg|avif|ico)(?:\?[^#\s]*)?$/i;
+var IMAGE_SERVICE_URL = /^https?:\/\/(?:picsum\.photos|images\.unsplash\.com|i\.imgur\.com|placekitten\.com|via\.placeholder\.com)\//i;
+function isImage(content) {
+  const trimmed = content.trim();
+  return IMAGE_DATA_URI.test(trimmed) || IMAGE_URL.test(trimmed) || IMAGE_SERVICE_URL.test(trimmed);
 }
-function ReactJsxView({ source, className }) {
-  const [Component, setComponent] = (0, import_react6.useState)(null);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [loading, setLoading] = (0, import_react6.useState)(true);
-  (0, import_react6.useEffect)(() => {
-    let cancelled = false;
-    async function transpileAndRender() {
-      try {
-        const imports = parseImports(source);
-        const modules = await resolveModules(imports);
-        let code = stripImports(source);
-        code = rewriteExportDefault(code);
-        code = await transpileJsx(code, "component.jsx");
-        code += "\nreturn __default__;";
-        const argNames = Object.keys(modules);
-        const argValues = argNames.map((n) => modules[n]);
-        const factory = new Function(...argNames, code);
-        const Comp = factory(...argValues);
-        if (!cancelled) {
-          setComponent(() => Comp);
-          setError(null);
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : String(err));
-          setComponent(null);
-          setLoading(false);
-        }
-      }
-    }
-    setLoading(true);
-    setError(null);
-    setComponent(null);
-    transpileAndRender();
-    return () => {
-      cancelled = true;
-    };
-  }, [source]);
-  if (loading) {
-    return import_react6.default.createElement(import_Box3.default, { className, sx: { p: 2, color: "text.secondary" } }, "Transpiling JSX...");
-  }
+var ImageRoot = (0, import_styles6.styled)(import_Box5.default, {
+  name: "FrontMcpImage",
+  slot: "Root"
+})({
+  display: "inline-block",
+  position: "relative",
+  maxWidth: "100%"
+});
+var StyledImage = (0, import_styles6.styled)("img", {
+  name: "FrontMcpImage",
+  slot: "Image"
+})({
+  maxWidth: "100%",
+  height: "auto",
+  display: "block",
+  cursor: "pointer",
+  borderRadius: "inherit"
+});
+var LightboxBackdrop = (0, import_styles6.styled)(import_Box5.default, {
+  name: "FrontMcpImage",
+  slot: "Lightbox"
+})({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16
+});
+var LightboxImage = (0, import_styles6.styled)("img")({
+  maxWidth: "90vw",
+  maxHeight: "90vh",
+  objectFit: "contain",
+  borderRadius: 8
+});
+function LightboxOverlay({ src, alt, onClose }) {
+  return import_react8.default.createElement(
+    LightboxBackdrop,
+    {
+      onClick: onClose,
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1300,
+        bgcolor: "rgba(0,0,0,0.8)"
+      }
+    },
+    import_react8.default.createElement(LightboxImage, { src, alt })
+  );
+}
+function ImageView({ src, alt, caption, className }) {
+  const [loaded, setLoaded] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(false);
+  const [lightboxOpen, setLightboxOpen] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    setLoaded(false);
+    setError(false);
+    setLightboxOpen(false);
+  }, [src]);
+  const handleLoad = (0, import_react8.useCallback)(() => setLoaded(true), []);
+  const handleError = (0, import_react8.useCallback)(() => {
+    setLoaded(true);
+    setError(true);
+  }, []);
   if (error) {
-    return import_react6.default.createElement(
-      import_Box3.default,
-      { className },
-      import_react6.default.createElement(import_Alert.default, { severity: "error", sx: { mb: 1 } }, `JSX render error: ${error}`),
-      import_react6.default.createElement(
-        "pre",
-        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
-        source
-      )
-    );
-  }
-  if (!Component) {
-    return import_react6.default.createElement(
-      import_Box3.default,
-      { className },
-      import_react6.default.createElement(import_Alert.default, { severity: "warning" }, "No component exported. Use `export default MyComponent`.")
-    );
+    return import_react8.default.createElement(import_Alert3.default, { severity: "error" }, `Failed to load image: ${src}`);
   }
-  return import_react6.default.createElement(import_Box3.default, { className }, import_react6.default.createElement(Component, {}));
+  return import_react8.default.createElement(
+    ImageRoot,
+    { className },
+    !loaded && import_react8.default.createElement(import_Skeleton.default, { variant: "rectangular", width: 400, height: 300 }),
+    import_react8.default.createElement(StyledImage, {
+      src,
+      alt: alt ?? "Image",
+      onLoad: handleLoad,
+      onError: handleError,
+      onClick: () => setLightboxOpen(true),
+      style: loaded ? void 0 : { display: "none" }
+    }),
+    caption && import_react8.default.createElement(
+      import_Typography3.default,
+      { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block", textAlign: "center" } },
+      caption
+    ),
+    lightboxOpen && import_react8.default.createElement(LightboxOverlay, {
+      src,
+      alt: alt ?? "Image",
+      onClose: () => setLightboxOpen(false)
+    })
+  );
 }
-var ReactJsxRenderer = class {
-  type = "jsx";
-  priority = 10;
+var ImageRenderer = class {
+  type = "image";
+  priority = 30;
   canHandle(content) {
-    return isReactJsx(content);
+    return isImage(content);
   }
   render(content, options) {
-    return import_react6.default.createElement(ReactJsxView, {
-      source: content,
-      className: options?.className ?? "fmcp-jsx-content"
+    const caption = options?.rendererOptions?.["caption"];
+    return import_react8.default.createElement(ImageView, {
+      src: content.trim(),
+      alt: options?.toolName ?? "Image",
+      caption,
+      className: options?.className ?? "fmcp-image-content"
     });
   }
 };
-var reactJsxRenderer = new ReactJsxRenderer();
+var imageRenderer = new ImageRenderer();
 
-// libs/ui/src/renderer/pdf/index.ts
-var import_react7 = __toESM(require("react"));
-var import_Box4 = __toESM(require("@mui/material/Box"));
-var import_IconButton = __toESM(require("@mui/material/IconButton"));
-var import_Typography2 = __toESM(require("@mui/material/Typography"));
-var import_TextField = __toESM(require("@mui/material/TextField"));
-var import_styles4 = require("@mui/material/styles");
-var lazyReactPdf = createLazyImport("react-pdf", async () => {
+// libs/ui/src/renderer/maps/index.ts
+var import_Alert4 = __toESM(require("@mui/material/Alert"));
+var import_Box6 = __toESM(require("@mui/material/Box"));
+var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_styles7 = require("@mui/material/styles");
+var import_Typography4 = __toESM(require("@mui/material/Typography"));
+var import_react9 = __toESM(require("react"));
+var LEAFLET_CSS_URL = "https://esm.sh/leaflet@1.9.4/dist/leaflet.css";
+var LEAFLET_CSS_ID = "fmcp-leaflet-css";
+var DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+var DEFAULT_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var GEOJSON_TYPE_RE2 = /"type"\s*:\s*"(?:FeatureCollection|Feature|Point|LineString|Polygon|MultiPoint|MultiLineString|MultiPolygon|GeometryCollection)"/;
+function isMap(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) === 123 && GEOJSON_TYPE_RE2.test(trimmed)) return true;
+  try {
+    const parsed = JSON.parse(trimmed);
+    return !!(parsed.center && Array.isArray(parsed.center) || parsed.markers && Array.isArray(parsed.markers) || parsed.geojson && typeof parsed.geojson === "object");
+  } catch {
+    return false;
+  }
+}
+var lazyReactLeaflet = createLazyImport("react-leaflet", async () => {
   const mod = await runtimeImportWithFallback(
-    "react-pdf",
-    esmShUrl("react-pdf@9", { external: ["react", "react-dom"] })
+    "react-leaflet",
+    esmShUrl("react-leaflet@5", { external: ["react", "react-dom"] })
   );
-  const pdfjs = mod["pdfjs"];
-  if (pdfjs?.GlobalWorkerOptions) {
-    pdfjs.GlobalWorkerOptions.workerSrc = `${ESM_SH_BASE}pdfjs-dist@${pdfjs.version ?? "4"}/build/pdf.worker.min.mjs?raw`;
-  }
   return mod;
 });
-function toDataUri(content) {
-  if (content.startsWith("data:")) return content;
-  if (content.startsWith("%PDF-")) {
-    const base64 = typeof btoa === "function" ? btoa(content) : Buffer.from(content).toString("base64");
-    return `data:application/pdf;base64,${base64}`;
-  }
-  return `data:application/pdf;base64,${content}`;
-}
-var PdfRoot = (0, import_styles4.styled)(import_Box4.default, {
-  name: "FrontMcpPdf",
+var MapRoot = (0, import_styles7.styled)(import_Box6.default, {
+  name: "FrontMcpMap",
   slot: "Root"
 })(({ theme }) => ({
   width: "100%",
@@ -891,650 +1155,562 @@ var PdfRoot = (0, import_styles4.styled)(import_Box4.default, {
   overflow: "hidden",
   border: `1px solid ${theme.palette.divider}`
 }));
-var Toolbar = (0, import_styles4.styled)(import_Box4.default, {
-  name: "FrontMcpPdf",
-  slot: "Toolbar"
+function parseMapConfig(content) {
+  const parsed = JSON.parse(content);
+  if (parsed.type && [
+    "FeatureCollection",
+    "Feature",
+    "Point",
+    "LineString",
+    "Polygon",
+    "MultiPoint",
+    "MultiLineString",
+    "MultiPolygon",
+    "GeometryCollection"
+  ].includes(parsed.type)) {
+    return {
+      center: [0, 0],
+      zoom: 2,
+      geojson: parsed
+    };
+  }
+  return parsed;
+}
+function MapView({ config, className }) {
+  (0, import_react9.useEffect)(() => {
+    injectStylesheet(LEAFLET_CSS_URL, LEAFLET_CSS_ID);
+  }, []);
+  const leaflet = useLazyModule(lazyReactLeaflet);
+  const height = config.height ?? 400;
+  const center = config.center ?? [51.505, -0.09];
+  const zoom = config.zoom ?? 13;
+  if (!leaflet) {
+    return import_react9.default.createElement(import_Alert4.default, { severity: "info" }, "Loading map library...");
+  }
+  const { MapContainer, TileLayer, Marker, Popup, GeoJSON } = leaflet;
+  const tileUrl = config.tileLayer?.url ?? DEFAULT_TILE_URL;
+  const attribution = config.tileLayer?.attribution ?? DEFAULT_ATTRIBUTION;
+  return import_react9.default.createElement(
+    MapRoot,
+    { className },
+    config.title && import_react9.default.createElement(
+      import_Typography4.default,
+      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
+      config.title
+    ),
+    import_react9.default.createElement(
+      MapContainer,
+      {
+        center,
+        zoom,
+        style: { height, width: "100%" },
+        scrollWheelZoom: true
+      },
+      import_react9.default.createElement(TileLayer, { url: tileUrl, attribution }),
+      config.markers?.map(
+        (marker, i) => import_react9.default.createElement(
+          Marker,
+          { key: i, position: marker.position },
+          marker.popup && import_react9.default.createElement(Popup, null, import_react9.default.createElement(import_Paper.default, { elevation: 0, sx: { p: 1 } }, marker.popup))
+        )
+      ),
+      config.geojson && import_react9.default.createElement(GeoJSON, { data: config.geojson })
+    )
+  );
+}
+lazyReactLeaflet.load().catch(() => {
+});
+var MapsRenderer = class {
+  type = "map";
+  priority = 60;
+  canHandle(content) {
+    return isMap(content);
+  }
+  render(content, options) {
+    try {
+      const config = parseMapConfig(content);
+      return import_react9.default.createElement(MapView, {
+        config,
+        className: options?.className ?? "fmcp-map-content"
+      });
+    } catch {
+      return import_react9.default.createElement(import_Alert4.default, { severity: "error" }, "Invalid map/GeoJSON data");
+    }
+  }
+};
+var mapsRenderer = new MapsRenderer();
+
+// libs/ui/src/renderer/math/index.ts
+var import_Alert5 = __toESM(require("@mui/material/Alert"));
+var import_Box7 = __toESM(require("@mui/material/Box"));
+var import_styles8 = require("@mui/material/styles");
+var import_react10 = __toESM(require("react"));
+var KATEX_CSS_URL = "https://esm.sh/katex@0.16.11/dist/katex.min.css";
+var KATEX_CSS_ID = "fmcp-katex-css";
+var MATH_DISPLAY = /\$\$(?:[^$]|\$(?!\$))+\$\$/s;
+var MATH_INLINE = /\$[^$\n]+?\$/;
+var MATH_BRACKET_DISPLAY = /\\\[(?:[^\\]|\\.)*\\\]/s;
+var MATH_PAREN_INLINE = /\\\((?:[^\\]|\\.)*\\\)/s;
+var MATH_BEGIN = /\\begin\{(?:equation|align|gather|matrix|pmatrix|bmatrix|cases)\}/;
+function isMath(content) {
+  const trimmed = content.trim();
+  return MATH_DISPLAY.test(trimmed) || MATH_INLINE.test(trimmed) || MATH_BRACKET_DISPLAY.test(trimmed) || MATH_PAREN_INLINE.test(trimmed) || MATH_BEGIN.test(trimmed);
+}
+var lazyKatex = createLazyImport("katex", async () => {
+  const mod = await runtimeImportWithFallback("katex", esmShUrl("katex@0.16"));
+  return mod;
+});
+var MathRoot = (0, import_styles8.styled)(import_Box7.default, {
+  name: "FrontMcpMath",
+  slot: "Root"
 })(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  padding: theme.spacing(1, 2),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50]
+  color: theme.palette.text.primary,
+  "& .katex-display": {
+    margin: theme.spacing(2, 0),
+    textAlign: "center"
+  }
 }));
-var PageContainer = (0, import_styles4.styled)(import_Box4.default, {
-  name: "FrontMcpPdf",
-  slot: "PageContainer"
+var MathDisplay = (0, import_styles8.styled)(import_Box7.default, {
+  name: "FrontMcpMath",
+  slot: "Display"
+})(({ theme }) => ({
+  display: "block",
+  textAlign: "center",
+  margin: theme.spacing(2, 0),
+  fontSize: "1.2em",
+  overflow: "auto"
+}));
+var MathInline = (0, import_styles8.styled)("span", {
+  name: "FrontMcpMath",
+  slot: "Inline"
 })({
-  display: "flex",
-  justifyContent: "center",
-  overflow: "auto",
-  maxHeight: 700
+  display: "inline"
 });
-function PdfView({ content, className, title }) {
-  const [numPages, setNumPages] = (0, import_react7.useState)(0);
-  const [pageNumber, setPageNumber] = (0, import_react7.useState)(1);
-  const [scale, setScale] = (0, import_react7.useState)(1);
-  const reactPdf = useLazyModule(lazyReactPdf);
-  const dataUri = (0, import_react7.useMemo)(() => toDataUri(content), [content]);
-  const onDocumentLoadSuccess = (0, import_react7.useCallback)(({ numPages: n }) => {
-    setNumPages(n);
+function parseMathContent(source) {
+  const segments = [];
+  const mathRegex = /(\$\$(?:[^$]|\$(?!\$))+\$\$|\$[^$\n]+?\$|\\\[(?:[^\\]|\\.)*\\\]|\\\((?:[^\\]|\\.)*\\\)|\\begin\{(?:[^\\]|\\.)*\\end\{[^}]+\})/gs;
+  let lastIndex = 0;
+  let match;
+  while ((match = mathRegex.exec(source)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: "text", content: source.slice(lastIndex, match.index) });
+    }
+    const raw = match[0];
+    if (raw.startsWith("$$")) {
+      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
+    } else if (raw.startsWith("\\[")) {
+      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
+    } else if (raw.startsWith("\\begin")) {
+      segments.push({ type: "display", content: raw });
+    } else if (raw.startsWith("\\(")) {
+      segments.push({ type: "inline", content: raw.slice(2, -2).trim() });
+    } else if (raw.startsWith("$")) {
+      segments.push({ type: "inline", content: raw.slice(1, -1).trim() });
+    }
+    lastIndex = match.index + raw.length;
+  }
+  if (lastIndex < source.length) {
+    segments.push({ type: "text", content: source.slice(lastIndex) });
+  }
+  return segments;
+}
+function MathView({ content, className }) {
+  (0, import_react10.useEffect)(() => {
+    injectStylesheet(KATEX_CSS_URL, KATEX_CSS_ID);
   }, []);
-  const goToPrev = (0, import_react7.useCallback)(() => setPageNumber((p) => Math.max(1, p - 1)), []);
-  const goToNext = (0, import_react7.useCallback)(() => setPageNumber((p) => Math.min(numPages, p + 1)), []);
-  const zoomIn = (0, import_react7.useCallback)(() => setScale((s) => Math.min(3, s + 0.25)), []);
-  const zoomOut = (0, import_react7.useCallback)(() => setScale((s) => Math.max(0.25, s - 0.25)), []);
-  if (!reactPdf) {
-    return import_react7.default.createElement("iframe", {
-      className: className ?? "fmcp-pdf-content",
-      src: dataUri,
-      style: { width: "100%", height: "600px", border: "none" },
-      title: title ?? "PDF Document"
-    });
+  const katexMod = useLazyModule(lazyKatex);
+  const segments = (0, import_react10.useMemo)(() => parseMathContent(content), [content]);
+  const renderToString = katexMod?.default?.renderToString ?? katexMod?.renderToString;
+  if (!renderToString) {
+    return import_react10.default.createElement(
+      MathRoot,
+      { className },
+      import_react10.default.createElement("pre", { style: { fontFamily: "monospace", whiteSpace: "pre-wrap" } }, content)
+    );
   }
-  const { Document, Page } = reactPdf;
-  return import_react7.default.createElement(
-    PdfRoot,
-    { className },
-    import_react7.default.createElement(
-      Toolbar,
-      null,
-      import_react7.default.createElement(
-        import_IconButton.default,
-        { size: "small", onClick: goToPrev, disabled: pageNumber <= 1, "aria-label": "Previous page" },
-        "\u25C0"
-      ),
-      import_react7.default.createElement(
-        import_Typography2.default,
-        { variant: "body2", sx: { minWidth: 80, textAlign: "center" } },
-        `${pageNumber} / ${numPages || "..."}`
-      ),
-      import_react7.default.createElement(
-        import_IconButton.default,
-        { size: "small", onClick: goToNext, disabled: pageNumber >= numPages, "aria-label": "Next page" },
-        "\u25B6"
-      ),
-      import_react7.default.createElement(import_Box4.default, { sx: { flex: 1 } }),
-      import_react7.default.createElement(import_IconButton.default, { size: "small", onClick: zoomOut, "aria-label": "Zoom out" }, "\u2212"),
-      import_react7.default.createElement(
-        import_Typography2.default,
-        { variant: "body2", sx: { minWidth: 50, textAlign: "center" } },
-        `${Math.round(scale * 100)}%`
-      ),
-      import_react7.default.createElement(import_IconButton.default, { size: "small", onClick: zoomIn, "aria-label": "Zoom in" }, "+"),
-      import_react7.default.createElement(import_Box4.default, { sx: { flex: 1 } }),
-      import_react7.default.createElement(import_TextField.default, {
-        size: "small",
-        type: "number",
-        value: pageNumber,
-        onChange: (e) => {
-          const n = parseInt(e.target.value, 10);
-          if (n >= 1 && n <= numPages) setPageNumber(n);
-        },
-        sx: { width: 70 },
-        slotProps: { htmlInput: { min: 1, max: numPages, "aria-label": "Go to page" } }
-      })
-    ),
-    import_react7.default.createElement(
-      PageContainer,
-      null,
-      import_react7.default.createElement(
-        Document,
-        { file: dataUri, onLoadSuccess: onDocumentLoadSuccess },
-        import_react7.default.createElement(Page, { pageNumber, scale, renderTextLayer: false, renderAnnotationLayer: false })
-      )
-    )
-  );
+  const elements = segments.map((seg, i) => {
+    if (seg.type === "text") {
+      return import_react10.default.createElement("span", { key: i }, seg.content);
+    }
+    try {
+      const html = renderToString(seg.content, {
+        displayMode: seg.type === "display",
+        throwOnError: false
+      });
+      if (seg.type === "display") {
+        return import_react10.default.createElement(MathDisplay, {
+          key: i,
+          dangerouslySetInnerHTML: { __html: html }
+        });
+      }
+      return import_react10.default.createElement(MathInline, {
+        key: i,
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    } catch (err) {
+      return import_react10.default.createElement(
+        import_Alert5.default,
+        { key: i, severity: "error", sx: { my: 1 } },
+        `LaTeX error: ${err instanceof Error ? err.message : String(err)}
+Source: ${seg.content}`
+      );
+    }
+  });
+  return import_react10.default.createElement(MathRoot, { className }, ...elements);
 }
-lazyReactPdf.load().catch(() => {
+lazyKatex.load().catch(() => {
 });
-var PdfRenderer = class {
-  type = "pdf";
-  priority = 90;
+var MathRenderer = class {
+  type = "math";
+  priority = 40;
   canHandle(content) {
-    return content.startsWith("%PDF-") || content.trim().startsWith("JVBER") || /^data:application\/pdf[;,]/.test(content.trim());
+    return isMath(content);
   }
   render(content, options) {
-    return import_react7.default.createElement(PdfView, {
+    return import_react10.default.createElement(MathView, {
       content,
-      className: options?.className ?? "fmcp-pdf-content",
-      title: options?.toolName ?? "PDF Document"
+      className: options?.className ?? "fmcp-math-content"
     });
   }
 };
-var pdfRenderer = new PdfRenderer();
+var mathRenderer = new MathRenderer();
 
-// libs/ui/src/renderer/csv/index.ts
-var import_react8 = __toESM(require("react"));
-var import_Box5 = __toESM(require("@mui/material/Box"));
+// libs/ui/src/renderer/mdx/index.ts
+var import_Box8 = __toESM(require("@mui/material/Box"));
+var import_Link = __toESM(require("@mui/material/Link"));
+var import_styles9 = require("@mui/material/styles");
 var import_Table2 = __toESM(require("@mui/material/Table"));
 var import_TableBody2 = __toESM(require("@mui/material/TableBody"));
 var import_TableCell2 = __toESM(require("@mui/material/TableCell"));
-var import_TableContainer = __toESM(require("@mui/material/TableContainer"));
 var import_TableHead2 = __toESM(require("@mui/material/TableHead"));
 var import_TableRow2 = __toESM(require("@mui/material/TableRow"));
-var import_TablePagination = __toESM(require("@mui/material/TablePagination"));
-var import_TableSortLabel = __toESM(require("@mui/material/TableSortLabel"));
-var import_TextField2 = __toESM(require("@mui/material/TextField"));
-var import_styles5 = require("@mui/material/styles");
-function detectDelimiter(content) {
-  const firstLine = content.split("\n")[0];
-  const commas = (firstLine.match(/,/g) ?? []).length;
-  const tabs = (firstLine.match(/\t/g) ?? []).length;
-  const semicolons = (firstLine.match(/;/g) ?? []).length;
-  if (tabs > commas && tabs > semicolons) return "	";
-  if (semicolons > commas) return ";";
-  return ",";
-}
-function parseCsv(content, delimiter) {
-  return content.trim().split("\n").map((line) => line.split(delimiter).map((cell) => cell.trim()));
-}
-var CsvRoot = (0, import_styles5.styled)(import_Box5.default, {
-  name: "FrontMcpCsvTable",
-  slot: "Root"
-})({
-  width: "100%"
-});
-var StyledHeaderCell = (0, import_styles5.styled)(import_TableCell2.default, {
-  name: "FrontMcpCsvTable",
-  slot: "Header"
-})(({ theme }) => ({
-  fontWeight: 600,
-  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
-  whiteSpace: "nowrap"
-}));
-var FilterToolbar = (0, import_styles5.styled)(import_Box5.default, {
-  name: "FrontMcpCsvTable",
-  slot: "Toolbar"
-})(({ theme }) => ({
-  padding: theme.spacing(1, 2),
-  display: "flex",
-  gap: theme.spacing(1)
-}));
-function CsvTableView({ content, className, pageSize = 25 }) {
-  const delimiter = (0, import_react8.useMemo)(() => detectDelimiter(content), [content]);
-  const allRows = (0, import_react8.useMemo)(() => parseCsv(content, delimiter), [content, delimiter]);
-  const headers = allRows[0] ?? [];
-  const dataRows = (0, import_react8.useMemo)(() => allRows.slice(1), [allRows]);
-  const [page, setPage] = (0, import_react8.useState)(0);
-  const [rowsPerPage, setRowsPerPage] = (0, import_react8.useState)(pageSize);
-  const [sortCol, setSortCol] = (0, import_react8.useState)(null);
-  const [sortDir, setSortDir] = (0, import_react8.useState)("asc");
-  const [filter, setFilter] = (0, import_react8.useState)("");
-  const filteredRows = (0, import_react8.useMemo)(() => {
-    if (!filter) return dataRows;
-    const lower = filter.toLowerCase();
-    return dataRows.filter((row) => row.some((cell) => cell.toLowerCase().includes(lower)));
-  }, [dataRows, filter]);
-  const sortedRows = (0, import_react8.useMemo)(() => {
-    if (sortCol === null) return filteredRows;
-    const sorted = [...filteredRows];
-    sorted.sort((a, b) => {
-      const va = a[sortCol] ?? "";
-      const vb = b[sortCol] ?? "";
-      const numA = Number(va);
-      const numB = Number(vb);
-      if (!isNaN(numA) && !isNaN(numB)) {
-        return sortDir === "asc" ? numA - numB : numB - numA;
-      }
-      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-    });
-    return sorted;
-  }, [filteredRows, sortCol, sortDir]);
-  const pageRows = (0, import_react8.useMemo)(
-    () => sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-    [sortedRows, page, rowsPerPage]
-  );
-  const handleSort = (0, import_react8.useCallback)((colIndex) => {
-    setSortCol((prev) => {
-      if (prev === colIndex) {
-        setSortDir((d) => d === "asc" ? "desc" : "asc");
-        return colIndex;
-      }
-      setSortDir("asc");
-      return colIndex;
-    });
-  }, []);
-  const handleChangePage = (0, import_react8.useCallback)((_, newPage) => setPage(newPage), []);
-  const handleChangeRowsPerPage = (0, import_react8.useCallback)((e) => {
-    setRowsPerPage(parseInt(e.target.value, 10));
-    setPage(0);
-  }, []);
-  return import_react8.default.createElement(
-    CsvRoot,
-    { className },
-    import_react8.default.createElement(
-      FilterToolbar,
-      null,
-      import_react8.default.createElement(import_TextField2.default, {
-        size: "small",
-        placeholder: "Filter rows...",
-        value: filter,
-        onChange: (e) => {
-          setFilter(e.target.value);
-          setPage(0);
-        },
-        sx: { minWidth: 200 }
-      })
-    ),
-    import_react8.default.createElement(
-      import_TableContainer.default,
-      { sx: { border: 1, borderColor: "divider", borderRadius: 1 } },
-      import_react8.default.createElement(
-        import_Table2.default,
-        { size: "small", stickyHeader: true },
-        import_react8.default.createElement(
-          import_TableHead2.default,
-          null,
-          import_react8.default.createElement(
-            import_TableRow2.default,
-            null,
-            headers.map(
-              (header, i) => import_react8.default.createElement(
-                StyledHeaderCell,
-                { key: i },
-                import_react8.default.createElement(
-                  import_TableSortLabel.default,
-                  {
-                    active: sortCol === i,
-                    direction: sortCol === i ? sortDir : "asc",
-                    onClick: () => handleSort(i)
-                  },
-                  header
-                )
-              )
-            )
-          )
-        ),
-        import_react8.default.createElement(
-          import_TableBody2.default,
-          null,
-          pageRows.map(
-            (row, ri) => import_react8.default.createElement(
-              import_TableRow2.default,
-              { key: ri, hover: true },
-              row.map((cell, ci) => import_react8.default.createElement(import_TableCell2.default, { key: ci }, cell))
-            )
-          )
-        )
-      )
-    ),
-    sortedRows.length > rowsPerPage && import_react8.default.createElement(import_TablePagination.default, {
-      count: sortedRows.length,
-      page,
-      rowsPerPage,
-      onPageChange: handleChangePage,
-      onRowsPerPageChange: handleChangeRowsPerPage,
-      rowsPerPageOptions: [10, 25, 50, 100]
-    })
-  );
-}
-var CsvRenderer = class {
-  type = "csv";
-  priority = 10;
-  canHandle(content) {
-    const lines = content.trim().split("\n").slice(0, 5);
-    if (lines.length < 2) return false;
-    for (const delim of [",", "	", ";"]) {
-      const counts = lines.map((line) => line.split(delim).length);
-      if (counts[0] > 1 && counts.every((c) => c === counts[0])) return true;
-    }
-    return false;
-  }
-  render(content, options) {
-    const pageSize = options?.rendererOptions?.["pageSize"];
-    return import_react8.default.createElement(CsvTableView, {
-      content,
-      className: options?.className ?? "fmcp-csv-table",
-      pageSize
-    });
+var import_Typography5 = __toESM(require("@mui/material/Typography"));
+var import_react11 = __toESM(require("react"));
+var lazyReactMarkdown = createLazyImport(
+  "react-markdown",
+  async () => {
+    const mod = await runtimeImportWithFallback(
+      "react-markdown",
+      esmShUrl("react-markdown@9", { external: ["react", "react-dom"] })
+    );
+    return mod;
   }
-};
-var csvRenderer = new CsvRenderer();
-
-// libs/ui/src/renderer/image/index.ts
-var import_react9 = __toESM(require("react"));
-var import_Box6 = __toESM(require("@mui/material/Box"));
-var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
-var import_Alert2 = __toESM(require("@mui/material/Alert"));
-var import_Typography3 = __toESM(require("@mui/material/Typography"));
-var import_styles6 = require("@mui/material/styles");
-var IMAGE_DATA_URI = /^data:image\/(?:png|jpeg|jpg|gif|webp|svg\+xml|avif)[;,]/;
-var IMAGE_URL = /^https?:\/\/[^?#\s]+\.(?:png|jpe?g|gif|webp|svg|avif|ico)(?:\?[^#\s]*)?$/i;
-var IMAGE_SERVICE_URL = /^https?:\/\/(?:picsum\.photos|images\.unsplash\.com|i\.imgur\.com|placekitten\.com|via\.placeholder\.com)\//i;
-function isImage(content) {
-  const trimmed = content.trim();
-  return IMAGE_DATA_URI.test(trimmed) || IMAGE_URL.test(trimmed) || IMAGE_SERVICE_URL.test(trimmed);
-}
-var ImageRoot = (0, import_styles6.styled)(import_Box6.default, {
-  name: "FrontMcpImage",
-  slot: "Root"
-})({
-  display: "inline-block",
-  position: "relative",
-  maxWidth: "100%"
+);
+var lazyRemarkGfm = createLazyImport("remark-gfm", async () => {
+  const mod = await runtimeImportWithFallback("remark-gfm", esmShUrl("remark-gfm@4"));
+  return mod;
 });
-var StyledImage = (0, import_styles6.styled)("img", {
-  name: "FrontMcpImage",
-  slot: "Image"
-})({
-  maxWidth: "100%",
-  height: "auto",
-  display: "block",
-  cursor: "pointer",
-  borderRadius: "inherit"
+var lazyRehypeHighlight = createLazyImport("rehype-highlight", async () => {
+  const mod = await runtimeImportWithFallback("rehype-highlight", esmShUrl("rehype-highlight@7"));
+  return mod;
 });
-var LightboxBackdrop = (0, import_styles6.styled)(import_Box6.default, {
-  name: "FrontMcpImage",
-  slot: "Lightbox"
-})({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: 16
+var lazyRehypeRaw = createLazyImport("rehype-raw", async () => {
+  const mod = await runtimeImportWithFallback("rehype-raw", esmShUrl("rehype-raw@7"));
+  return mod;
 });
-var LightboxImage = (0, import_styles6.styled)("img")({
-  maxWidth: "90vw",
-  maxHeight: "90vh",
-  objectFit: "contain",
-  borderRadius: 8
+var MarkdownRoot = (0, import_styles9.styled)(import_Box8.default, {
+  name: "FrontMcpMarkdown",
+  slot: "Root"
+})(() => ({
+  lineHeight: 1.7,
+  "& > *:first-of-type": { marginTop: 0 },
+  "& > *:last-child": { marginBottom: 0 },
+  "& img": { maxWidth: "100%", height: "auto" }
+}));
+var CodeBlock = (0, import_styles9.styled)("pre", {
+  name: "FrontMcpMarkdown",
+  slot: "Code"
+})(({ theme }) => {
+  const monoFont = String(
+    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
+  );
+  return {
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
+    padding: theme.spacing(2),
+    borderRadius: Number(theme.shape.borderRadius),
+    overflow: "auto",
+    fontFamily: monoFont,
+    fontSize: "0.875rem",
+    "& code": {
+      backgroundColor: "transparent",
+      padding: 0,
+      fontSize: "inherit",
+      fontFamily: "inherit"
+    }
+  };
 });
-function LightboxOverlay({ src, alt, onClose }) {
-  return import_react9.default.createElement(
-    LightboxBackdrop,
-    {
-      onClick: onClose,
-      sx: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1300,
-        bgcolor: "rgba(0,0,0,0.8)"
-      }
-    },
-    import_react9.default.createElement(LightboxImage, { src, alt })
+var InlineCode = (0, import_styles9.styled)("code")(({ theme }) => {
+  const monoFont = String(
+    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
   );
+  return {
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200],
+    padding: "2px 6px",
+    borderRadius: Number(theme.shape.borderRadius) / 2,
+    fontFamily: monoFont,
+    fontSize: "0.85em"
+  };
+});
+var Blockquote = (0, import_styles9.styled)("blockquote", {
+  name: "FrontMcpMarkdown",
+  slot: "Blockquote"
+})(({ theme }) => ({
+  borderLeft: `4px solid ${theme.palette.primary.main}`,
+  margin: theme.spacing(2, 0),
+  padding: theme.spacing(1, 2),
+  color: theme.palette.text.secondary,
+  "& > p": { margin: 0 }
+}));
+function createMuiComponents() {
+  return {
+    h1: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "h4", gutterBottom: true }),
+    h2: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "h5", gutterBottom: true }),
+    h3: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "h6", gutterBottom: true }),
+    h4: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "subtitle1", gutterBottom: true, fontWeight: 600 }),
+    h5: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "subtitle2", gutterBottom: true }),
+    h6: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "subtitle2", gutterBottom: true }),
+    p: (props) => import_react11.default.createElement(import_Typography5.default, { ...props, variant: "body1", paragraph: true }),
+    a: (props) => import_react11.default.createElement(import_Link.default, { ...props, target: "_blank", rel: "noopener noreferrer" }),
+    blockquote: (props) => import_react11.default.createElement(Blockquote, props),
+    pre: (props) => import_react11.default.createElement(CodeBlock, props),
+    code: ({ inline, className, children, ...rest }) => {
+      if (inline) return import_react11.default.createElement(InlineCode, rest, children);
+      return import_react11.default.createElement("code", { className, ...rest }, children);
+    },
+    table: (props) => import_react11.default.createElement(import_Table2.default, { ...props, size: "small" }),
+    thead: (props) => import_react11.default.createElement(import_TableHead2.default, props),
+    tbody: (props) => import_react11.default.createElement(import_TableBody2.default, props),
+    tr: (props) => import_react11.default.createElement(import_TableRow2.default, { ...props, hover: true }),
+    th: (props) => import_react11.default.createElement(import_TableCell2.default, { ...props, sx: { fontWeight: 600 } }),
+    td: (props) => import_react11.default.createElement(import_TableCell2.default, props)
+  };
 }
-function ImageView({ src, alt, caption, className }) {
-  const [loaded, setLoaded] = (0, import_react9.useState)(false);
-  const [error, setError] = (0, import_react9.useState)(false);
-  const [lightboxOpen, setLightboxOpen] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
-    setLoaded(false);
-    setError(false);
-    setLightboxOpen(false);
-  }, [src]);
-  const handleLoad = (0, import_react9.useCallback)(() => setLoaded(true), []);
-  const handleError = (0, import_react9.useCallback)(() => {
-    setLoaded(true);
-    setError(true);
-  }, []);
-  if (error) {
-    return import_react9.default.createElement(import_Alert2.default, { severity: "error" }, `Failed to load image: ${src}`);
+function MarkdownView({ content, className }) {
+  const components = (0, import_react11.useMemo)(() => createMuiComponents(), []);
+  const ReactMarkdownMod = useLazyModule(lazyReactMarkdown);
+  const remarkGfmMod = lazyRemarkGfm.get();
+  const rehypeHighlightMod = lazyRehypeHighlight.get();
+  const rehypeRawMod = lazyRehypeRaw.get();
+  if (ReactMarkdownMod) {
+    const ReactMarkdown = ReactMarkdownMod.default;
+    const remarkPlugins = [];
+    const rehypePlugins = [];
+    if (remarkGfmMod) remarkPlugins.push(remarkGfmMod.default);
+    if (rehypeHighlightMod) rehypePlugins.push(rehypeHighlightMod.default);
+    if (rehypeRawMod) rehypePlugins.push(rehypeRawMod.default);
+    return import_react11.default.createElement(
+      MarkdownRoot,
+      { className },
+      import_react11.default.createElement(ReactMarkdown, {
+        children: content,
+        remarkPlugins,
+        rehypePlugins,
+        components
+      })
+    );
   }
-  return import_react9.default.createElement(
-    ImageRoot,
-    { className },
-    !loaded && import_react9.default.createElement(import_Skeleton.default, { variant: "rectangular", width: 400, height: 300 }),
-    import_react9.default.createElement(StyledImage, {
-      src,
-      alt: alt ?? "Image",
-      onLoad: handleLoad,
-      onError: handleError,
-      onClick: () => setLightboxOpen(true),
-      style: loaded ? void 0 : { display: "none" }
-    }),
-    caption && import_react9.default.createElement(
-      import_Typography3.default,
-      { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block", textAlign: "center" } },
-      caption
-    ),
-    lightboxOpen && import_react9.default.createElement(LightboxOverlay, {
-      src,
-      alt: alt ?? "Image",
-      onClose: () => setLightboxOpen(false)
-    })
-  );
+  return import_react11.default.createElement(MarkdownRoot, { className }, ...renderFallback(content));
 }
-var ImageRenderer = class {
-  type = "image";
-  priority = 30;
+function renderFallback(content) {
+  const lines = content.split("\n");
+  const elements = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("# ")) {
+      elements.push(import_react11.default.createElement(import_Typography5.default, { key: i, variant: "h4", gutterBottom: true }, line.slice(2)));
+    } else if (line.startsWith("## ")) {
+      elements.push(import_react11.default.createElement(import_Typography5.default, { key: i, variant: "h5", gutterBottom: true }, line.slice(3)));
+    } else if (line.startsWith("### ")) {
+      elements.push(import_react11.default.createElement(import_Typography5.default, { key: i, variant: "h6", gutterBottom: true }, line.slice(4)));
+    } else if (line.startsWith("- ") || line.startsWith("* ")) {
+      elements.push(import_react11.default.createElement("li", { key: i }, line.slice(2)));
+    } else if (line.startsWith("**") && line.endsWith("**")) {
+      elements.push(
+        import_react11.default.createElement(import_Typography5.default, { key: i, variant: "body1", sx: { fontWeight: 700 } }, line.slice(2, -2))
+      );
+    } else if (line.trim()) {
+      elements.push(import_react11.default.createElement(import_Typography5.default, { key: i, variant: "body1", sx: { mb: 2 } }, line));
+    }
+  }
+  return elements;
+}
+lazyReactMarkdown.load().catch(() => {
+});
+lazyRemarkGfm.load().catch(() => {
+});
+lazyRehypeHighlight.load().catch(() => {
+});
+lazyRehypeRaw.load().catch(() => {
+});
+var MdxRenderer = class {
+  type = "mdx";
+  priority = 5;
   canHandle(content) {
-    return isImage(content);
+    return /^---\s*\n/.test(content) || /import\s+/.test(content) || /<[A-Z]/.test(content) || /^#{1,6}\s+\S/m.test(content) || /^\s*[-*+]\s+\S/m.test(content);
   }
   render(content, options) {
-    const caption = options?.rendererOptions?.["caption"];
-    return import_react9.default.createElement(ImageView, {
-      src: content.trim(),
-      alt: options?.toolName ?? "Image",
-      caption,
-      className: options?.className ?? "fmcp-image-content"
+    return import_react11.default.createElement(MarkdownView, {
+      content,
+      className: options?.className ?? "fmcp-mdx-content"
     });
   }
 };
-var imageRenderer = new ImageRenderer();
+var mdxRenderer = new MdxRenderer();
 
-// libs/ui/src/renderer/charts/index.ts
-var import_react10 = __toESM(require("react"));
-var import_Box7 = __toESM(require("@mui/material/Box"));
-var import_Alert3 = __toESM(require("@mui/material/Alert"));
-var import_Typography4 = __toESM(require("@mui/material/Typography"));
-var import_styles7 = require("@mui/material/styles");
-var CHART_TYPE_RE2 = /"type"\s*:\s*"(?:bar|line|area|pie|scatter|radar|composed)"/;
-function isChart(content) {
+// libs/ui/src/renderer/media/index.ts
+var import_Box9 = __toESM(require("@mui/material/Box"));
+var import_Paper2 = __toESM(require("@mui/material/Paper"));
+var import_styles10 = require("@mui/material/styles");
+var import_react12 = __toESM(require("react"));
+var VIDEO_PATTERNS2 = [
+  /^https?:\/\/[^?#\s]+\.(?:mp4|webm|ogg|mov)(?:\?[^#\s]*)?$/i,
+  /^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be|vimeo\.com)\//i,
+  /^data:video\//
+];
+var AUDIO_PATTERNS2 = [
+  /^https?:\/\/[^?#\s]+\.(?:mp3|wav|ogg|aac|flac|m4a)(?:\?[^#\s]*)?$/i,
+  /^https?:\/\/(?:www\.)?soundcloud\.com\//i,
+  /^data:audio\//
+];
+function isVideo(content) {
   const trimmed = content.trim();
-  if (trimmed.charCodeAt(0) !== 123) return false;
-  return CHART_TYPE_RE2.test(trimmed) && trimmed.includes('"data"');
+  return VIDEO_PATTERNS2.some((p) => p.test(trimmed));
 }
-var lazyRecharts = createLazyImport("recharts", async () => {
-  const mod = await runtimeImportWithFallback("recharts", esmShUrl("recharts@2", { external: ["react", "react-dom"] }));
+function isAudio(content) {
+  const trimmed = content.trim();
+  return AUDIO_PATTERNS2.some((p) => p.test(trimmed));
+}
+function isMedia(content) {
+  return isVideo(content) || isAudio(content);
+}
+var lazyReactPlayer = createLazyImport("react-player", async () => {
+  const mod = await runtimeImportWithFallback(
+    "react-player",
+    esmShUrl("react-player@2", { external: ["react", "react-dom"] })
+  );
   return mod;
 });
-var ChartRoot = (0, import_styles7.styled)(import_Box7.default, {
-  name: "FrontMcpChart",
+var MediaRoot = (0, import_styles10.styled)(import_Paper2.default, {
+  name: "FrontMcpMedia",
   slot: "Root"
 })(({ theme }) => ({
-  width: "100%",
-  padding: theme.spacing(2)
+  overflow: "hidden",
+  borderRadius: theme.shape.borderRadius
 }));
-function ChartView({ config, className }) {
-  const themeValues = useRendererTheme();
-  const recharts = useLazyModule(lazyRecharts);
-  const colors = (0, import_react10.useMemo)(() => config.colors ?? themeValues.seriesColors, [config.colors, themeValues.seriesColors]);
-  if (!recharts) {
-    return import_react10.default.createElement(import_Alert3.default, { severity: "info" }, "Loading chart library...");
+var VideoWrapper = (0, import_styles10.styled)(import_Box9.default)({
+  position: "relative",
+  paddingTop: "56.25%",
+  // 16:9 aspect ratio
+  "& > *": {
+    position: "absolute",
+    top: 0,
+    left: 0
   }
-  const { ResponsiveContainer, Tooltip, Legend, CartesianGrid, XAxis, YAxis } = recharts;
-  const height = config.height ?? 400;
-  const xKey = config.xKey ?? "name";
-  const yKeys = config.yKeys ?? Object.keys(config.data?.[0] ?? {}).filter((k) => k !== xKey);
-  const chartContent = renderChartType(
-    recharts,
-    config.type,
-    config.data,
-    xKey,
-    yKeys,
-    colors,
-    themeValues.borderRadius
-  );
-  return import_react10.default.createElement(
-    ChartRoot,
-    { className },
-    config.title && import_react10.default.createElement(
-      import_Typography4.default,
-      { variant: "subtitle1", gutterBottom: true, sx: { fontWeight: 600, textAlign: "center" } },
-      config.title
-    ),
-    import_react10.default.createElement(ResponsiveContainer, { width: "100%", height }, chartContent)
-  );
-}
-function renderChartType(rc, type, data, xKey, yKeys, colors, borderRadius) {
-  const commonProps = { data };
-  const grid = import_react10.default.createElement(rc.CartesianGrid, { strokeDasharray: "3 3", opacity: 0.3 });
-  const xAxis = import_react10.default.createElement(rc.XAxis, { dataKey: xKey });
-  const yAxis = import_react10.default.createElement(rc.YAxis);
-  const tooltip = import_react10.default.createElement(rc.Tooltip, { contentStyle: { borderRadius } });
-  const legend = import_react10.default.createElement(rc.Legend);
-  switch (type) {
-    case "bar":
-      return import_react10.default.createElement(
-        rc.BarChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => import_react10.default.createElement(rc.Bar, {
-            key,
-            dataKey: key,
-            fill: colors[i % colors.length],
-            radius: [borderRadius, borderRadius, 0, 0]
-          })
-        )
-      );
-    case "line":
-      return import_react10.default.createElement(
-        rc.LineChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => import_react10.default.createElement(rc.Line, {
-            key,
-            type: "monotone",
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            strokeWidth: 2
-          })
-        )
-      );
-    case "area":
-      return import_react10.default.createElement(
-        rc.AreaChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => import_react10.default.createElement(rc.Area, {
-            key,
-            type: "monotone",
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            fill: colors[i % colors.length],
-            fillOpacity: 0.3
-          })
-        )
-      );
-    case "pie":
-      return import_react10.default.createElement(
-        rc.PieChart,
-        {},
-        tooltip,
-        legend,
-        import_react10.default.createElement(
-          rc.Pie,
-          { data, dataKey: yKeys[0] ?? "value", nameKey: xKey, cx: "50%", cy: "50%", outerRadius: "80%", label: true },
-          ...data.map((_, i) => import_react10.default.createElement(rc.Cell, { key: i, fill: colors[i % colors.length] }))
-        )
-      );
-    case "scatter":
-      return import_react10.default.createElement(
-        rc.ScatterChart,
-        {},
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => import_react10.default.createElement(rc.Scatter, { key, name: key, dataKey: key, data, fill: colors[i % colors.length] })
-        )
-      );
-    case "radar":
-      return import_react10.default.createElement(
-        rc.RadarChart,
-        { cx: "50%", cy: "50%", outerRadius: "80%", data },
-        import_react10.default.createElement(rc.PolarGrid),
-        import_react10.default.createElement(rc.PolarAngleAxis, { dataKey: xKey }),
-        import_react10.default.createElement(rc.PolarRadiusAxis),
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => import_react10.default.createElement(rc.Radar, {
-            key,
-            name: key,
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            fill: colors[i % colors.length],
-            fillOpacity: 0.3
-          })
+});
+var AudioWrapper = (0, import_styles10.styled)(import_Box9.default)(({ theme }) => ({
+  padding: theme.spacing(1),
+  "& > *": {
+    width: "100%"
+  }
+}));
+function MediaView({ url, isAudioContent, className }) {
+  const reactPlayerMod = useLazyModule(lazyReactPlayer);
+  if (!reactPlayerMod) {
+    if (isAudioContent) {
+      return import_react12.default.createElement(
+        MediaRoot,
+        { variant: "outlined", className },
+        import_react12.default.createElement(
+          AudioWrapper,
+          null,
+          import_react12.default.createElement("audio", { controls: true, src: url, style: { width: "100%" } })
         )
       );
-    case "composed":
-      return import_react10.default.createElement(
-        rc.ComposedChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map((key, i) => {
-          if (i % 2 === 0) {
-            return import_react10.default.createElement(rc.Bar, {
-              key,
-              dataKey: key,
-              fill: colors[i % colors.length],
-              radius: [borderRadius, borderRadius, 0, 0]
-            });
-          }
-          return import_react10.default.createElement(rc.Line, {
-            key,
-            type: "monotone",
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            strokeWidth: 2
-          });
+    }
+    return import_react12.default.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      import_react12.default.createElement(
+        VideoWrapper,
+        null,
+        import_react12.default.createElement("video", {
+          controls: true,
+          src: url,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }
         })
-      );
-    default:
-      return import_react10.default.createElement(rc.BarChart, commonProps, grid, xAxis, yAxis, tooltip, legend);
+      )
+    );
+  }
+  const ReactPlayer = reactPlayerMod.default;
+  if (isAudioContent) {
+    return import_react12.default.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      import_react12.default.createElement(
+        AudioWrapper,
+        null,
+        import_react12.default.createElement(ReactPlayer, {
+          url,
+          controls: true,
+          width: "100%",
+          height: 50
+        })
+      )
+    );
   }
+  return import_react12.default.createElement(
+    MediaRoot,
+    { variant: "outlined", className },
+    import_react12.default.createElement(
+      VideoWrapper,
+      null,
+      import_react12.default.createElement(ReactPlayer, {
+        url,
+        controls: true,
+        width: "100%",
+        height: "100%"
+      })
+    )
+  );
 }
-lazyRecharts.load().catch(() => {
+lazyReactPlayer.load().catch(() => {
 });
-var ChartsRenderer = class {
-  type = "chart";
-  priority = 80;
+var VideoRenderer = class {
+  type = "video";
+  priority = 20;
   canHandle(content) {
-    return isChart(content);
+    return isVideo(content);
   }
   render(content, options) {
-    try {
-      const config = JSON.parse(content);
-      return import_react10.default.createElement(ChartView, {
-        config,
-        className: options?.className ?? "fmcp-chart-content"
-      });
-    } catch {
-      return import_react10.default.createElement(import_Alert3.default, { severity: "error" }, "Invalid chart JSON");
-    }
+    return import_react12.default.createElement(MediaView, {
+      url: content.trim(),
+      isAudioContent: false,
+      className: options?.className ?? "fmcp-media-content"
+    });
   }
 };
-var chartsRenderer = new ChartsRenderer();
+var AudioRenderer = class {
+  type = "audio";
+  priority = 20;
+  canHandle(content) {
+    return isAudio(content);
+  }
+  render(content, options) {
+    return import_react12.default.createElement(MediaView, {
+      url: content.trim(),
+      isAudioContent: true,
+      className: options?.className ?? "fmcp-media-content"
+    });
+  }
+};
+var videoRenderer = new VideoRenderer();
+var audioRenderer = new AudioRenderer();
 
 // libs/ui/src/renderer/mermaid/index.ts
-var import_react11 = __toESM(require("react"));
-var import_Box8 = __toESM(require("@mui/material/Box"));
-var import_Alert4 = __toESM(require("@mui/material/Alert"));
-var import_styles8 = require("@mui/material/styles");
+var import_Alert6 = __toESM(require("@mui/material/Alert"));
+var import_Box10 = __toESM(require("@mui/material/Box"));
+var import_styles11 = require("@mui/material/styles");
+var import_react13 = __toESM(require("react"));
 var MERMAID_PATTERN2 = /^\s*(?:graph|sequenceDiagram|classDiagram|stateDiagram|flowchart|erDiagram|gantt|pie|journey|gitGraph)\b/;
 function isMermaid(content) {
   return MERMAID_PATTERN2.test(content.trim());
@@ -1544,7 +1720,7 @@ var lazyMermaid = createLazyImport("mermaid", async () => {
   const mermaid = mod["default"] ?? mod;
   return mermaid;
 });
-var MermaidRoot = (0, import_styles8.styled)(import_Box8.default, {
+var MermaidRoot = (0, import_styles11.styled)(import_Box10.default, {
   name: "FrontMcpMermaid",
   slot: "Root"
 })(({ theme }) => ({
@@ -1573,12 +1749,12 @@ function getMermaidThemeVariables(tv) {
   };
 }
 function MermaidView({ definition, className }) {
-  const containerRef = (0, import_react11.useRef)(null);
-  const [svg, setSvg] = (0, import_react11.useState)(null);
-  const [error, setError] = (0, import_react11.useState)(null);
+  const containerRef = (0, import_react13.useRef)(null);
+  const [svg, setSvg] = (0, import_react13.useState)(null);
+  const [error, setError] = (0, import_react13.useState)(null);
   const themeValues = useRendererTheme();
-  const uniqueId = (0, import_react11.useId)().replace(/:/g, "-");
-  (0, import_react11.useEffect)(() => {
+  const uniqueId = (0, import_react13.useId)().replace(/:/g, "-");
+  (0, import_react13.useEffect)(() => {
     let cancelled = false;
     async function renderDiagram() {
       try {
@@ -1607,341 +1783,75 @@ function MermaidView({ definition, className }) {
     };
   }, [definition, themeValues, uniqueId]);
   if (error) {
-    return import_react11.default.createElement(
-      import_Box8.default,
-      { className },
-      import_react11.default.createElement(import_Alert4.default, { severity: "error", sx: { mb: 1 } }, `Mermaid parse error: ${error}`),
-      import_react11.default.createElement(
-        "pre",
-        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
-        definition
-      )
-    );
-  }
-  if (!svg) {
-    return import_react11.default.createElement(
-      MermaidRoot,
-      { className },
-      import_react11.default.createElement(import_Box8.default, { sx: { color: "text.secondary" } }, "Rendering diagram...")
-    );
-  }
-  return import_react11.default.createElement(MermaidRoot, {
-    ref: containerRef,
-    className,
-    dangerouslySetInnerHTML: { __html: svg }
-  });
-}
-lazyMermaid.load().catch(() => {
-});
-var MermaidRenderer = class {
-  type = "mermaid";
-  priority = 50;
-  canHandle(content) {
-    return isMermaid(content);
-  }
-  render(content, options) {
-    return import_react11.default.createElement(MermaidView, {
-      definition: content.trim(),
-      className: options?.className ?? "fmcp-mermaid-content"
-    });
-  }
-};
-var mermaidRenderer = new MermaidRenderer();
-
-// libs/ui/src/renderer/flow/index.ts
-var import_react12 = __toESM(require("react"));
-var import_Box9 = __toESM(require("@mui/material/Box"));
-var import_Alert5 = __toESM(require("@mui/material/Alert"));
-var import_Typography5 = __toESM(require("@mui/material/Typography"));
-var import_styles9 = require("@mui/material/styles");
-var XYFLOW_CSS_URL = "https://esm.sh/@xyflow/react@12/dist/style.css";
-var XYFLOW_CSS_ID = "fmcp-xyflow-css";
-function isFlow(content) {
-  const trimmed = content.trim();
-  if (trimmed.charCodeAt(0) !== 123) return false;
-  return trimmed.includes('"nodes"') && trimmed.includes('"edges"');
-}
-var lazyXYFlow = createLazyImport("@xyflow/react", async () => {
-  const mod = await runtimeImportWithFallback(
-    "@xyflow/react",
-    esmShUrl("@xyflow/react@12", { external: ["react", "react-dom"] })
-  );
-  return mod;
-});
-var FlowRoot = (0, import_styles9.styled)(import_Box9.default, {
-  name: "FrontMcpFlow",
-  slot: "Root"
-})(({ theme }) => ({
-  width: "100%",
-  borderRadius: theme.shape.borderRadius,
-  overflow: "hidden",
-  border: `1px solid ${theme.palette.divider}`
-}));
-function FlowView({ config, className }) {
-  (0, import_react12.useEffect)(() => {
-    injectStylesheet(XYFLOW_CSS_URL, XYFLOW_CSS_ID);
-  }, []);
-  const themeValues = useRendererTheme();
-  const xyflow = useLazyModule(lazyXYFlow);
-  const height = config.height ?? 500;
-  const styledNodes = (0, import_react12.useMemo)(() => {
-    return config.nodes.map((node) => ({
-      ...node,
-      style: {
-        background: themeValues.paper,
-        color: themeValues.textPrimary,
-        border: `1px solid ${themeValues.divider}`,
-        borderRadius: themeValues.borderRadius,
-        padding: 8,
-        fontSize: themeValues.fontSize,
-        fontFamily: themeValues.fontFamily,
-        ...node.style
-      }
-    }));
-  }, [config.nodes, themeValues]);
-  const styledEdges = (0, import_react12.useMemo)(() => {
-    return config.edges.map((edge, i) => ({
-      ...edge,
-      style: {
-        stroke: themeValues.seriesColors[i % themeValues.seriesColors.length],
-        strokeWidth: 2,
-        ...edge.style
-      }
-    }));
-  }, [config.edges, themeValues]);
-  if (!xyflow) {
-    return import_react12.default.createElement(import_Alert5.default, { severity: "info" }, "Loading flow diagram library...");
-  }
-  const { ReactFlow, Controls, MiniMap, Background } = xyflow;
-  return import_react12.default.createElement(
-    FlowRoot,
-    { className },
-    config.title && import_react12.default.createElement(
-      import_Typography5.default,
-      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
-      config.title
-    ),
-    import_react12.default.createElement(
-      import_Box9.default,
-      { sx: { height } },
-      import_react12.default.createElement(
-        ReactFlow,
-        {
-          nodes: styledNodes,
-          edges: styledEdges,
-          fitView: config.fitView !== false,
-          proOptions: { hideAttribution: true }
-        },
-        import_react12.default.createElement(Controls, {
-          style: {
-            backgroundColor: themeValues.paper,
-            borderRadius: themeValues.borderRadius,
-            border: `1px solid ${themeValues.divider}`
-          }
-        }),
-        import_react12.default.createElement(MiniMap, {
-          style: {
-            backgroundColor: themeValues.background,
-            borderRadius: themeValues.borderRadius
-          },
-          nodeColor: themeValues.primary
-        }),
-        Background && import_react12.default.createElement(Background, {
-          color: themeValues.divider,
-          gap: 16
-        })
-      )
-    )
-  );
-}
-lazyXYFlow.load().catch(() => {
-});
-var FlowRenderer = class {
-  type = "flow";
-  priority = 70;
-  canHandle(content) {
-    return isFlow(content);
-  }
-  render(content, options) {
-    try {
-      const config = JSON.parse(content);
-      return import_react12.default.createElement(FlowView, {
-        config,
-        className: options?.className ?? "fmcp-flow-content"
-      });
-    } catch {
-      return import_react12.default.createElement(import_Alert5.default, { severity: "error" }, "Invalid flow JSON");
-    }
-  }
-};
-var flowRenderer = new FlowRenderer();
-
-// libs/ui/src/renderer/math/index.ts
-var import_react13 = __toESM(require("react"));
-var import_Box10 = __toESM(require("@mui/material/Box"));
-var import_Alert6 = __toESM(require("@mui/material/Alert"));
-var import_styles10 = require("@mui/material/styles");
-var KATEX_CSS_URL = "https://esm.sh/katex@0.16.11/dist/katex.min.css";
-var KATEX_CSS_ID = "fmcp-katex-css";
-var MATH_DISPLAY = /\$\$(?:[^$]|\$(?!\$))+\$\$/s;
-var MATH_INLINE = /\$[^$\n]+?\$/;
-var MATH_BRACKET_DISPLAY = /\\\[(?:[^\\]|\\.)*\\\]/s;
-var MATH_PAREN_INLINE = /\\\((?:[^\\]|\\.)*\\\)/s;
-var MATH_BEGIN = /\\begin\{(?:equation|align|gather|matrix|pmatrix|bmatrix|cases)\}/;
-function isMath(content) {
-  const trimmed = content.trim();
-  return MATH_DISPLAY.test(trimmed) || MATH_INLINE.test(trimmed) || MATH_BRACKET_DISPLAY.test(trimmed) || MATH_PAREN_INLINE.test(trimmed) || MATH_BEGIN.test(trimmed);
-}
-var lazyKatex = createLazyImport("katex", async () => {
-  const mod = await runtimeImportWithFallback("katex", esmShUrl("katex@0.16"));
-  return mod;
-});
-var MathRoot = (0, import_styles10.styled)(import_Box10.default, {
-  name: "FrontMcpMath",
-  slot: "Root"
-})(({ theme }) => ({
-  color: theme.palette.text.primary,
-  "& .katex-display": {
-    margin: theme.spacing(2, 0),
-    textAlign: "center"
-  }
-}));
-var MathDisplay = (0, import_styles10.styled)(import_Box10.default, {
-  name: "FrontMcpMath",
-  slot: "Display"
-})(({ theme }) => ({
-  display: "block",
-  textAlign: "center",
-  margin: theme.spacing(2, 0),
-  fontSize: "1.2em",
-  overflow: "auto"
-}));
-var MathInline = (0, import_styles10.styled)("span", {
-  name: "FrontMcpMath",
-  slot: "Inline"
-})({
-  display: "inline"
-});
-function parseMathContent(source) {
-  const segments = [];
-  const mathRegex = /(\$\$(?:[^$]|\$(?!\$))+\$\$|\$[^$\n]+?\$|\\\[(?:[^\\]|\\.)*\\\]|\\\((?:[^\\]|\\.)*\\\)|\\begin\{(?:[^\\]|\\.)*\\end\{[^}]+\})/gs;
-  let lastIndex = 0;
-  let match;
-  while ((match = mathRegex.exec(source)) !== null) {
-    if (match.index > lastIndex) {
-      segments.push({ type: "text", content: source.slice(lastIndex, match.index) });
-    }
-    const raw = match[0];
-    if (raw.startsWith("$$")) {
-      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
-    } else if (raw.startsWith("\\[")) {
-      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
-    } else if (raw.startsWith("\\begin")) {
-      segments.push({ type: "display", content: raw });
-    } else if (raw.startsWith("\\(")) {
-      segments.push({ type: "inline", content: raw.slice(2, -2).trim() });
-    } else if (raw.startsWith("$")) {
-      segments.push({ type: "inline", content: raw.slice(1, -1).trim() });
-    }
-    lastIndex = match.index + raw.length;
-  }
-  if (lastIndex < source.length) {
-    segments.push({ type: "text", content: source.slice(lastIndex) });
-  }
-  return segments;
-}
-function MathView({ content, className }) {
-  (0, import_react13.useEffect)(() => {
-    injectStylesheet(KATEX_CSS_URL, KATEX_CSS_ID);
-  }, []);
-  const katexMod = useLazyModule(lazyKatex);
-  const segments = (0, import_react13.useMemo)(() => parseMathContent(content), [content]);
-  const renderToString = katexMod?.default?.renderToString ?? katexMod?.renderToString;
-  if (!renderToString) {
     return import_react13.default.createElement(
-      MathRoot,
-      { className },
-      import_react13.default.createElement("pre", { style: { fontFamily: "monospace", whiteSpace: "pre-wrap" } }, content)
-    );
-  }
-  const elements = segments.map((seg, i) => {
-    if (seg.type === "text") {
-      return import_react13.default.createElement("span", { key: i }, seg.content);
-    }
-    try {
-      const html = renderToString(seg.content, {
-        displayMode: seg.type === "display",
-        throwOnError: false
-      });
-      if (seg.type === "display") {
-        return import_react13.default.createElement(MathDisplay, {
-          key: i,
-          dangerouslySetInnerHTML: { __html: html }
-        });
-      }
-      return import_react13.default.createElement(MathInline, {
-        key: i,
-        dangerouslySetInnerHTML: { __html: html }
-      });
-    } catch (err) {
-      return import_react13.default.createElement(
-        import_Alert6.default,
-        { key: i, severity: "error", sx: { my: 1 } },
-        `LaTeX error: ${err instanceof Error ? err.message : String(err)}
-Source: ${seg.content}`
-      );
-    }
+      import_Box10.default,
+      { className },
+      import_react13.default.createElement(import_Alert6.default, { severity: "error", sx: { mb: 1 } }, `Mermaid parse error: ${error}`),
+      import_react13.default.createElement(
+        "pre",
+        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
+        definition
+      )
+    );
+  }
+  if (!svg) {
+    return import_react13.default.createElement(
+      MermaidRoot,
+      { className },
+      import_react13.default.createElement(import_Box10.default, { sx: { color: "text.secondary" } }, "Rendering diagram...")
+    );
+  }
+  return import_react13.default.createElement(MermaidRoot, {
+    ref: containerRef,
+    className,
+    dangerouslySetInnerHTML: { __html: svg }
   });
-  return import_react13.default.createElement(MathRoot, { className }, ...elements);
 }
-lazyKatex.load().catch(() => {
+lazyMermaid.load().catch(() => {
 });
-var MathRenderer = class {
-  type = "math";
-  priority = 40;
+var MermaidRenderer = class {
+  type = "mermaid";
+  priority = 50;
   canHandle(content) {
-    return isMath(content);
+    return isMermaid(content);
   }
   render(content, options) {
-    return import_react13.default.createElement(MathView, {
-      content,
-      className: options?.className ?? "fmcp-math-content"
+    return import_react13.default.createElement(MermaidView, {
+      definition: content.trim(),
+      className: options?.className ?? "fmcp-mermaid-content"
     });
   }
 };
-var mathRenderer = new MathRenderer();
+var mermaidRenderer = new MermaidRenderer();
 
-// libs/ui/src/renderer/maps/index.ts
-var import_react14 = __toESM(require("react"));
+// libs/ui/src/renderer/pdf/index.ts
 var import_Box11 = __toESM(require("@mui/material/Box"));
-var import_Alert7 = __toESM(require("@mui/material/Alert"));
-var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+var import_styles12 = require("@mui/material/styles");
+var import_TextField2 = __toESM(require("@mui/material/TextField"));
 var import_Typography6 = __toESM(require("@mui/material/Typography"));
-var import_styles11 = require("@mui/material/styles");
-var LEAFLET_CSS_URL = "https://esm.sh/leaflet@1.9.4/dist/leaflet.css";
-var LEAFLET_CSS_ID = "fmcp-leaflet-css";
-var DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-var DEFAULT_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
-var GEOJSON_TYPE_RE2 = /"type"\s*:\s*"(?:FeatureCollection|Feature|Point|LineString|Polygon|MultiPoint|MultiLineString|MultiPolygon|GeometryCollection)"/;
-function isMap(content) {
-  const trimmed = content.trim();
-  if (trimmed.charCodeAt(0) === 123 && GEOJSON_TYPE_RE2.test(trimmed)) return true;
-  try {
-    const parsed = JSON.parse(trimmed);
-    return !!(parsed.center && Array.isArray(parsed.center) || parsed.markers && Array.isArray(parsed.markers) || parsed.geojson && typeof parsed.geojson === "object");
-  } catch {
-    return false;
-  }
-}
-var lazyReactLeaflet = createLazyImport("react-leaflet", async () => {
+var import_react14 = __toESM(require("react"));
+var lazyReactPdf = createLazyImport("react-pdf", async () => {
   const mod = await runtimeImportWithFallback(
-    "react-leaflet",
-    esmShUrl("react-leaflet@5", { external: ["react", "react-dom"] })
+    "react-pdf",
+    esmShUrl("react-pdf@9", { external: ["react", "react-dom"] })
   );
+  const pdfjs = mod["pdfjs"];
+  if (pdfjs?.GlobalWorkerOptions) {
+    pdfjs.GlobalWorkerOptions.workerSrc = `${ESM_SH_BASE}pdfjs-dist@${pdfjs.version ?? "4"}/build/pdf.worker.min.mjs?raw`;
+  }
   return mod;
 });
-var MapRoot = (0, import_styles11.styled)(import_Box11.default, {
-  name: "FrontMcpMap",
+function toDataUri(content) {
+  if (content.startsWith("data:")) return content;
+  if (content.startsWith("%PDF-")) {
+    const base64 = typeof btoa === "function" ? btoa(content) : Buffer.from(content).toString("base64");
+    return `data:application/pdf;base64,${base64}`;
+  }
+  return `data:application/pdf;base64,${content}`;
+}
+var PdfRoot = (0, import_styles12.styled)(import_Box11.default, {
+  name: "FrontMcpPdf",
   slot: "Root"
 })(({ theme }) => ({
   width: "100%",
@@ -1949,239 +1859,335 @@ var MapRoot = (0, import_styles11.styled)(import_Box11.default, {
   overflow: "hidden",
   border: `1px solid ${theme.palette.divider}`
 }));
-function parseMapConfig(content) {
-  const parsed = JSON.parse(content);
-  if (parsed.type && [
-    "FeatureCollection",
-    "Feature",
-    "Point",
-    "LineString",
-    "Polygon",
-    "MultiPoint",
-    "MultiLineString",
-    "MultiPolygon",
-    "GeometryCollection"
-  ].includes(parsed.type)) {
-    return {
-      center: [0, 0],
-      zoom: 2,
-      geojson: parsed
-    };
-  }
-  return parsed;
-}
-function MapView({ config, className }) {
-  (0, import_react14.useEffect)(() => {
-    injectStylesheet(LEAFLET_CSS_URL, LEAFLET_CSS_ID);
+var Toolbar = (0, import_styles12.styled)(import_Box11.default, {
+  name: "FrontMcpPdf",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1, 2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50]
+}));
+var PageContainer = (0, import_styles12.styled)(import_Box11.default, {
+  name: "FrontMcpPdf",
+  slot: "PageContainer"
+})({
+  display: "flex",
+  justifyContent: "center",
+  overflow: "auto",
+  maxHeight: 700
+});
+function PdfView({ content, className, title }) {
+  const [numPages, setNumPages] = (0, import_react14.useState)(0);
+  const [pageNumber, setPageNumber] = (0, import_react14.useState)(1);
+  const [scale, setScale] = (0, import_react14.useState)(1);
+  const reactPdf = useLazyModule(lazyReactPdf);
+  const dataUri = (0, import_react14.useMemo)(() => toDataUri(content), [content]);
+  const onDocumentLoadSuccess = (0, import_react14.useCallback)(({ numPages: n }) => {
+    setNumPages(n);
   }, []);
-  const leaflet = useLazyModule(lazyReactLeaflet);
-  const height = config.height ?? 400;
-  const center = config.center ?? [51.505, -0.09];
-  const zoom = config.zoom ?? 13;
-  if (!leaflet) {
-    return import_react14.default.createElement(import_Alert7.default, { severity: "info" }, "Loading map library...");
+  const goToPrev = (0, import_react14.useCallback)(() => setPageNumber((p) => Math.max(1, p - 1)), []);
+  const goToNext = (0, import_react14.useCallback)(() => setPageNumber((p) => Math.min(numPages, p + 1)), []);
+  const zoomIn = (0, import_react14.useCallback)(() => setScale((s) => Math.min(3, s + 0.25)), []);
+  const zoomOut = (0, import_react14.useCallback)(() => setScale((s) => Math.max(0.25, s - 0.25)), []);
+  if (!reactPdf) {
+    return import_react14.default.createElement("iframe", {
+      className: className ?? "fmcp-pdf-content",
+      src: dataUri,
+      style: { width: "100%", height: "600px", border: "none" },
+      title: title ?? "PDF Document"
+    });
   }
-  const { MapContainer, TileLayer, Marker, Popup, GeoJSON } = leaflet;
-  const tileUrl = config.tileLayer?.url ?? DEFAULT_TILE_URL;
-  const attribution = config.tileLayer?.attribution ?? DEFAULT_ATTRIBUTION;
+  const { Document, Page } = reactPdf;
   return import_react14.default.createElement(
-    MapRoot,
+    PdfRoot,
     { className },
-    config.title && import_react14.default.createElement(
-      import_Typography6.default,
-      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
-      config.title
-    ),
     import_react14.default.createElement(
-      MapContainer,
-      {
-        center,
-        zoom,
-        style: { height, width: "100%" },
-        scrollWheelZoom: true
-      },
-      import_react14.default.createElement(TileLayer, { url: tileUrl, attribution }),
-      config.markers?.map(
-        (marker, i) => import_react14.default.createElement(
-          Marker,
-          { key: i, position: marker.position },
-          marker.popup && import_react14.default.createElement(Popup, null, import_react14.default.createElement(import_Paper.default, { elevation: 0, sx: { p: 1 } }, marker.popup))
-        )
+      Toolbar,
+      null,
+      import_react14.default.createElement(
+        import_IconButton.default,
+        { size: "small", onClick: goToPrev, disabled: pageNumber <= 1, "aria-label": "Previous page" },
+        "\u25C0"
+      ),
+      import_react14.default.createElement(
+        import_Typography6.default,
+        { variant: "body2", sx: { minWidth: 80, textAlign: "center" } },
+        `${pageNumber} / ${numPages || "..."}`
       ),
-      config.geojson && import_react14.default.createElement(GeoJSON, { data: config.geojson })
+      import_react14.default.createElement(
+        import_IconButton.default,
+        { size: "small", onClick: goToNext, disabled: pageNumber >= numPages, "aria-label": "Next page" },
+        "\u25B6"
+      ),
+      import_react14.default.createElement(import_Box11.default, { sx: { flex: 1 } }),
+      import_react14.default.createElement(import_IconButton.default, { size: "small", onClick: zoomOut, "aria-label": "Zoom out" }, "\u2212"),
+      import_react14.default.createElement(
+        import_Typography6.default,
+        { variant: "body2", sx: { minWidth: 50, textAlign: "center" } },
+        `${Math.round(scale * 100)}%`
+      ),
+      import_react14.default.createElement(import_IconButton.default, { size: "small", onClick: zoomIn, "aria-label": "Zoom in" }, "+"),
+      import_react14.default.createElement(import_Box11.default, { sx: { flex: 1 } }),
+      import_react14.default.createElement(import_TextField2.default, {
+        size: "small",
+        type: "number",
+        value: pageNumber,
+        onChange: (e) => {
+          const n = parseInt(e.target.value, 10);
+          if (n >= 1 && n <= numPages) setPageNumber(n);
+        },
+        sx: { width: 70 },
+        slotProps: { htmlInput: { min: 1, max: numPages, "aria-label": "Go to page" } }
+      })
+    ),
+    import_react14.default.createElement(
+      PageContainer,
+      null,
+      import_react14.default.createElement(
+        Document,
+        { file: dataUri, onLoadSuccess: onDocumentLoadSuccess },
+        import_react14.default.createElement(Page, { pageNumber, scale, renderTextLayer: false, renderAnnotationLayer: false })
+      )
     )
   );
 }
-lazyReactLeaflet.load().catch(() => {
-});
-var MapsRenderer = class {
-  type = "map";
-  priority = 60;
-  canHandle(content) {
-    return isMap(content);
+lazyReactPdf.load().catch(() => {
+});
+var PdfRenderer = class {
+  type = "pdf";
+  priority = 90;
+  canHandle(content) {
+    return content.startsWith("%PDF-") || content.trim().startsWith("JVBER") || /^data:application\/pdf[;,]/.test(content.trim());
+  }
+  render(content, options) {
+    return import_react14.default.createElement(PdfView, {
+      content,
+      className: options?.className ?? "fmcp-pdf-content",
+      title: options?.toolName ?? "PDF Document"
+    });
+  }
+};
+var pdfRenderer = new PdfRenderer();
+
+// libs/ui/src/renderer/react/index.ts
+var import_Alert7 = __toESM(require("@mui/material/Alert"));
+var import_Box12 = __toESM(require("@mui/material/Box"));
+var import_react15 = __toESM(require("react"));
+
+// libs/ui/src/runtime/babel-runtime.ts
+var BABEL_STANDALONE_CDN = "https://esm.sh/@babel/standalone@7";
+var BABEL_STANDALONE_FALLBACK_CDN = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.10/babel.min.js";
+var babelState = { status: "idle" };
+async function loadBabel() {
+  if (babelState.status === "loaded") {
+    return babelState.babel;
+  }
+  if (babelState.status === "loading") {
+    return babelState.promise;
+  }
+  if (babelState.status === "error") {
+    throw babelState.error;
+  }
+  const promise = doLoadBabel();
+  babelState = { status: "loading", promise };
+  try {
+    const babel = await promise;
+    babelState = { status: "loaded", babel };
+    return babel;
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    babelState = { status: "error", error: err };
+    throw err;
+  }
+}
+async function doLoadBabel() {
+  const globalBabel = globalThis["Babel"];
+  if (globalBabel && typeof globalBabel.transform === "function") {
+    return globalBabel;
+  }
+  try {
+    const module2 = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      BABEL_STANDALONE_CDN
+    );
+    if (module2 && typeof module2.transform === "function") {
+      return module2;
+    }
+    if (module2.default && typeof module2.default.transform === "function") {
+      return module2.default;
+    }
+  } catch {
+  }
+  return new Promise((resolve, reject) => {
+    if (typeof document === "undefined") {
+      reject(new Error("Babel Standalone requires a browser environment"));
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = BABEL_STANDALONE_FALLBACK_CDN;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      const babel = globalThis["Babel"];
+      if (babel && typeof babel.transform === "function") {
+        resolve(babel);
+      } else {
+        reject(new Error("Babel Standalone loaded but transform function not found"));
+      }
+    };
+    script.onerror = () => {
+      reject(new Error(`Failed to load Babel Standalone from ${BABEL_STANDALONE_FALLBACK_CDN}`));
+    };
+    document.head.appendChild(script);
+  });
+}
+async function transpileJsx(source, filename = "component.jsx") {
+  const babel = await loadBabel();
+  const result = babel.transform(source, {
+    presets: ["react"],
+    filename
+  });
+  return result.code;
+}
+
+// libs/ui/src/renderer/react/index.ts
+function isReactJsx(content) {
+  if (/^#{1,6}\s+\S/m.test(content)) return false;
+  return /(?:function|const|class)\s+\w+/.test(content) && /(?:return|=>)[\s(]*</.test(content);
+}
+function parseImports(source) {
+  const results = [];
+  const defaultRe = /^import\s+(\w+)\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
+  let m;
+  while ((m = defaultRe.exec(source)) !== null) {
+    results.push({ line: m[0], localName: m[1], specifier: m[2], named: false });
   }
-  render(content, options) {
-    try {
-      const config = parseMapConfig(content);
-      return import_react14.default.createElement(MapView, {
-        config,
-        className: options?.className ?? "fmcp-map-content"
-      });
-    } catch {
-      return import_react14.default.createElement(import_Alert7.default, { severity: "error" }, "Invalid map/GeoJSON data");
+  const namedRe = /^import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
+  while ((m = namedRe.exec(source)) !== null) {
+    const names = m[1].split(",").map((n) => n.trim()).filter(Boolean);
+    for (const name of names) {
+      results.push({ line: m[0], localName: name, specifier: m[2], named: true });
     }
   }
-};
-var mapsRenderer = new MapsRenderer();
-
-// libs/ui/src/renderer/media/index.ts
-var import_react15 = __toESM(require("react"));
-var import_Box12 = __toESM(require("@mui/material/Box"));
-var import_Paper2 = __toESM(require("@mui/material/Paper"));
-var import_styles12 = require("@mui/material/styles");
-var VIDEO_PATTERNS2 = [
-  /^https?:\/\/[^?#\s]+\.(?:mp4|webm|ogg|mov)(?:\?[^#\s]*)?$/i,
-  /^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be|vimeo\.com)\//i,
-  /^data:video\//
-];
-var AUDIO_PATTERNS2 = [
-  /^https?:\/\/[^?#\s]+\.(?:mp3|wav|ogg|aac|flac|m4a)(?:\?[^#\s]*)?$/i,
-  /^https?:\/\/(?:www\.)?soundcloud\.com\//i,
-  /^data:audio\//
-];
-function isVideo(content) {
-  const trimmed = content.trim();
-  return VIDEO_PATTERNS2.some((p) => p.test(trimmed));
+  return results;
 }
-function isAudio(content) {
-  const trimmed = content.trim();
-  return AUDIO_PATTERNS2.some((p) => p.test(trimmed));
+function stripImports(source) {
+  return source.replace(/^import\s+\w+\s+from\s+['"][^'"]+['"][\s;]*$/gm, "").replace(/^import\s+\{[^}]+\}\s+from\s+['"][^'"]+['"][\s;]*$/gm, "");
 }
-function isMedia(content) {
-  return isVideo(content) || isAudio(content);
+function rewriteExportDefault(source) {
+  let result = source.replace(/^export\s+default\s+(function|class)\b/gm, "var __default__ = $1");
+  result = result.replace(/^export\s+default\s+(\([^)]*\)\s*=>)/gm, "var __default__ = $1");
+  result = result.replace(/^export\s+default\s+(\w+)\s*;?\s*$/gm, "var __default__ = $1;");
+  return result;
 }
-var lazyReactPlayer = createLazyImport("react-player", async () => {
-  const mod = await runtimeImportWithFallback(
-    "react-player",
-    esmShUrl("react-player@2", { external: ["react", "react-dom"] })
-  );
-  return mod;
-});
-var MediaRoot = (0, import_styles12.styled)(import_Paper2.default, {
-  name: "FrontMcpMedia",
-  slot: "Root"
-})(({ theme }) => ({
-  overflow: "hidden",
-  borderRadius: theme.shape.borderRadius
-}));
-var VideoWrapper = (0, import_styles12.styled)(import_Box12.default)({
-  position: "relative",
-  paddingTop: "56.25%",
-  // 16:9 aspect ratio
-  "& > *": {
-    position: "absolute",
-    top: 0,
-    left: 0
+function isReactSpecifier(specifier) {
+  return specifier === "react" || /^https?:\/\/esm\.sh\/react(?:@[\d.]+)?$/.test(specifier);
+}
+async function resolveModules(imports) {
+  const modules = {};
+  const specifierMap = /* @__PURE__ */ new Map();
+  for (const imp of imports) {
+    const existing = specifierMap.get(imp.specifier) ?? [];
+    existing.push(imp);
+    specifierMap.set(imp.specifier, existing);
   }
-});
-var AudioWrapper = (0, import_styles12.styled)(import_Box12.default)(({ theme }) => ({
-  padding: theme.spacing(1),
-  "& > *": {
-    width: "100%"
+  for (const [specifier, specImports] of specifierMap) {
+    let mod;
+    if (isReactSpecifier(specifier)) {
+      mod = import_react15.default;
+    } else {
+      mod = await runtimeImport(specifier);
+    }
+    for (const imp of specImports) {
+      if (imp.named) {
+        modules[imp.localName] = mod[imp.localName] ?? mod["default"]?.[imp.localName];
+      } else {
+        modules[imp.localName] = mod["default"] ?? mod;
+      }
+    }
   }
-}));
-function MediaView({ url, isAudioContent, className }) {
-  const reactPlayerMod = useLazyModule(lazyReactPlayer);
-  if (!reactPlayerMod) {
-    if (isAudioContent) {
-      return import_react15.default.createElement(
-        MediaRoot,
-        { variant: "outlined", className },
-        import_react15.default.createElement(
-          AudioWrapper,
-          null,
-          import_react15.default.createElement("audio", { controls: true, src: url, style: { width: "100%" } })
-        )
-      );
+  return modules;
+}
+function ReactJsxView({ source, className }) {
+  const [Component, setComponent] = (0, import_react15.useState)(null);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [loading, setLoading] = (0, import_react15.useState)(true);
+  (0, import_react15.useEffect)(() => {
+    let cancelled = false;
+    async function transpileAndRender() {
+      try {
+        const imports = parseImports(source);
+        const modules = await resolveModules(imports);
+        let code = stripImports(source);
+        code = rewriteExportDefault(code);
+        code = await transpileJsx(code, "component.jsx");
+        code += "\nreturn __default__;";
+        const argNames = Object.keys(modules);
+        const argValues = argNames.map((n) => modules[n]);
+        const factory = new Function(...argNames, code);
+        const Comp = factory(...argValues);
+        if (!cancelled) {
+          setComponent(() => Comp);
+          setError(null);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setComponent(null);
+          setLoading(false);
+        }
+      }
     }
+    setLoading(true);
+    setError(null);
+    setComponent(null);
+    transpileAndRender();
+    return () => {
+      cancelled = true;
+    };
+  }, [source]);
+  if (loading) {
+    return import_react15.default.createElement(import_Box12.default, { className, sx: { p: 2, color: "text.secondary" } }, "Transpiling JSX...");
+  }
+  if (error) {
     return import_react15.default.createElement(
-      MediaRoot,
-      { variant: "outlined", className },
+      import_Box12.default,
+      { className },
+      import_react15.default.createElement(import_Alert7.default, { severity: "error", sx: { mb: 1 } }, `JSX render error: ${error}`),
       import_react15.default.createElement(
-        VideoWrapper,
-        null,
-        import_react15.default.createElement("video", {
-          controls: true,
-          src: url,
-          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }
-        })
+        "pre",
+        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
+        source
       )
     );
   }
-  const ReactPlayer = reactPlayerMod.default;
-  if (isAudioContent) {
+  if (!Component) {
     return import_react15.default.createElement(
-      MediaRoot,
-      { variant: "outlined", className },
-      import_react15.default.createElement(
-        AudioWrapper,
-        null,
-        import_react15.default.createElement(ReactPlayer, {
-          url,
-          controls: true,
-          width: "100%",
-          height: 50
-        })
-      )
+      import_Box12.default,
+      { className },
+      import_react15.default.createElement(import_Alert7.default, { severity: "warning" }, "No component exported. Use `export default MyComponent`.")
     );
   }
-  return import_react15.default.createElement(
-    MediaRoot,
-    { variant: "outlined", className },
-    import_react15.default.createElement(
-      VideoWrapper,
-      null,
-      import_react15.default.createElement(ReactPlayer, {
-        url,
-        controls: true,
-        width: "100%",
-        height: "100%"
-      })
-    )
-  );
+  return import_react15.default.createElement(import_Box12.default, { className }, import_react15.default.createElement(Component, {}));
 }
-lazyReactPlayer.load().catch(() => {
-});
-var VideoRenderer = class {
-  type = "video";
-  priority = 20;
-  canHandle(content) {
-    return isVideo(content);
-  }
-  render(content, options) {
-    return import_react15.default.createElement(MediaView, {
-      url: content.trim(),
-      isAudioContent: false,
-      className: options?.className ?? "fmcp-media-content"
-    });
-  }
-};
-var AudioRenderer = class {
-  type = "audio";
-  priority = 20;
+var ReactJsxRenderer = class {
+  type = "jsx";
+  priority = 10;
   canHandle(content) {
-    return isAudio(content);
+    return isReactJsx(content);
   }
   render(content, options) {
-    return import_react15.default.createElement(MediaView, {
-      url: content.trim(),
-      isAudioContent: true,
-      className: options?.className ?? "fmcp-media-content"
+    return import_react15.default.createElement(ReactJsxView, {
+      source: content,
+      className: options?.className ?? "fmcp-jsx-content"
     });
   }
 };
-var videoRenderer = new VideoRenderer();
-var audioRenderer = new AudioRenderer();
+var reactJsxRenderer = new ReactJsxRenderer();
 
 // libs/ui/src/renderer/index.ts
 function registerAllRenderers() {