sea-dev 1.0.0

package/libs/ui/src/components/chart-viz/converters.ts

@@ -0,0 +1,474 @@
+// Check if config uses component format
+export function isComponentFormat(config: unknown): boolean {
+  return (
+    typeof config === "object" &&
+    config !== null &&
+    "type" in config &&
+    [
+      "BarChart",
+      "LineChart",
+      "PieChart",
+      "GaugeChart",
+      "WaterfallChart",
+      "BulletChart",
+      "HeatmapChart",
+    ].includes((config as { type: string }).type)
+  );
+}
+
+// Normalize ECharts config to fix common AI-generated issues
+function normalizeEChartsConfig(config: unknown): unknown {
+  if (!config || typeof config !== "object") return config;
+
+  const result = { ...config } as Record<string, unknown>;
+
+  // Normalize title: string -> { text: string }
+  if (typeof result.title === "string") {
+    result.title = { text: result.title, left: "center" };
+  }
+
+  // Normalize series array
+  if (result.series && Array.isArray(result.series)) {
+    result.series = result.series.map((s: unknown) => {
+      if (typeof s === "string") return { type: "bar", name: s };
+      return s;
+    });
+  }
+
+  return result;
+}
+
+// Convert component format to ECharts config
+export function componentToECharts(comp: unknown): unknown {
+  if (typeof comp !== "object" || comp === null) return normalizeEChartsConfig(comp);
+
+  const compObj = comp as Record<string, unknown>;
+  const { type } = compObj;
+  // Support both { type, props } and flat { type, data, ... } formats
+  // If props exists, use it; otherwise use the entire comp object minus type
+  const props = compObj.props || { ...compObj };
+
+  if (type === "BarChart") {
+    return convertBarChart(props);
+  }
+
+  if (type === "LineChart") {
+    return convertLineChart(props);
+  }
+
+  if (type === "PieChart") {
+    return convertPieChart(props);
+  }
+
+  if (type === "GaugeChart") {
+    return convertGaugeChart(props);
+  }
+
+  if (type === "WaterfallChart") {
+    return convertWaterfallChart(props);
+  }
+
+  if (type === "BulletChart") {
+    return convertBulletChart(props);
+  }
+
+  if (type === "HeatmapChart") {
+    return convertHeatmapChart(props);
+  }
+
+  // Pass through if already ECharts format, but normalize it first
+  return normalizeEChartsConfig(comp);
+}
+
+function convertBarChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  // Handle data array with xField/yField format (AI-generated)
+  if (propsObj.data && Array.isArray(propsObj.data) && propsObj.xField && propsObj.yField) {
+    const categories = propsObj.data.map(
+      (item: unknown) => (item as Record<string, unknown>)[propsObj.xField as string],
+    );
+    const values = propsObj.data.map(
+      (item: unknown) => (item as Record<string, unknown>)[propsObj.yField as string],
+    );
+    return {
+      title: { text: propsObj.title, left: "center" },
+      tooltip: { trigger: "axis" },
+      xAxis: { type: "category", data: categories },
+      yAxis: { type: "value" },
+      series: [
+        {
+          type: "bar",
+          data: values,
+          itemStyle: propsObj.color ? { color: propsObj.color } : undefined,
+        },
+      ],
+    };
+  }
+
+  // Handle categories/series format
+  return {
+    title: { text: propsObj.title, left: "center" },
+    tooltip: { trigger: "axis" },
+    xAxis: { type: "category", data: propsObj.categories || [] },
+    yAxis: { type: "value" },
+    series: ((propsObj.series as unknown[]) || []).map((s: unknown) => {
+      const sObj = s as Record<string, unknown>;
+      return {
+        type: "bar",
+        name: sObj.name,
+        data: sObj.data,
+        stack: propsObj.stacked ? "stack" : undefined,
+      };
+    }),
+  };
+}
+
+function convertLineChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  // Handle data array with xField/yField format (AI-generated)
+  if (propsObj.data && Array.isArray(propsObj.data) && propsObj.xField && propsObj.yField) {
+    const categories = propsObj.data.map(
+      (item: unknown) => (item as Record<string, unknown>)[propsObj.xField as string],
+    );
+    const values = propsObj.data.map(
+      (item: unknown) => (item as Record<string, unknown>)[propsObj.yField as string],
+    );
+    return {
+      title: { text: propsObj.title, left: "center" },
+      tooltip: { trigger: "axis" },
+      xAxis: { type: "category", data: categories },
+      yAxis: { type: "value" },
+      series: [
+        {
+          type: "line",
+          data: values,
+          smooth: propsObj.smooth || false,
+          itemStyle: propsObj.color ? { color: propsObj.color } : undefined,
+          lineStyle: propsObj.color ? { color: propsObj.color } : undefined,
+        },
+      ],
+    };
+  }
+
+  // Handle categories/series format
+  return {
+    title: { text: propsObj.title, left: "center" },
+    tooltip: { trigger: "axis" },
+    xAxis: { type: "category", data: propsObj.categories || [] },
+    yAxis: { type: "value" },
+    series: ((propsObj.series as unknown[]) || []).map((s: unknown) => {
+      const sObj = s as Record<string, unknown>;
+      return {
+        type: "line",
+        name: sObj.name,
+        data: sObj.data,
+        smooth: propsObj.smooth || false,
+      };
+    }),
+  };
+}
+
+function convertPieChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  return {
+    title: { text: propsObj.title, left: "center" },
+    tooltip: { trigger: "item" },
+    series: [{ type: "pie", radius: "60%", data: propsObj.data || [] }],
+  };
+}
+
+function convertGaugeChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  return {
+    title: { text: propsObj.title, left: "center" },
+    series: [
+      {
+        type: "gauge",
+        detail: { formatter: `{value}${propsObj.unit || ""}` },
+        data: [{ value: propsObj.value, name: propsObj.title }],
+        min: propsObj.min || 0,
+        max: propsObj.max || 100,
+      },
+    ],
+  };
+}
+
+function convertWaterfallChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  const items = (propsObj.items as unknown[]) || [];
+  const categories = items.map((item: unknown) => (item as Record<string, unknown>).name);
+
+  // Calculate running totals for positioning
+  let runningTotal = 0;
+  const assistData: (number | string)[] = [];
+  const positiveData: (number | string)[] = [];
+  const negativeData: (number | string)[] = [];
+
+  items.forEach((item: unknown) => {
+    const itemObj = item as Record<string, unknown>;
+    const itemType = itemObj.type;
+    const itemValue = itemObj.value as number;
+
+    if (itemType === "start" || itemType === "total" || itemType === "subtotal") {
+      assistData.push(0);
+      positiveData.push(itemValue);
+      negativeData.push("-");
+      runningTotal = itemValue;
+    } else if (itemValue >= 0) {
+      assistData.push(runningTotal);
+      positiveData.push(itemValue);
+      negativeData.push("-");
+      runningTotal += itemValue;
+    } else {
+      assistData.push(runningTotal + itemValue);
+      positiveData.push("-");
+      negativeData.push(Math.abs(itemValue));
+      runningTotal += itemValue;
+    }
+  });
+
+  return {
+    title: { text: propsObj.title, left: "center" },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: (params: unknown) => {
+        const paramsArr = params as Array<{ dataIndex: number }> | undefined;
+        if (!paramsArr || paramsArr.length === 0) return "";
+        const item = items[paramsArr[0]?.dataIndex ?? 0] as Record<string, unknown>;
+        const value = item.value as number;
+        const sign = value >= 0 ? "+" : "";
+        if (item.type === "start" || item.type === "total" || item.type === "subtotal") {
+          return `${item.name}: ${propsObj.format === "currency" ? "$" : ""}${value.toLocaleString()}`;
+        }
+        return `${item.name}: ${sign}${propsObj.format === "currency" ? "$" : ""}${value.toLocaleString()}`;
+      },
+    },
+    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+    xAxis: {
+      type: "category",
+      data: categories,
+      axisLabel: { rotate: propsObj.rotateLabels ? 45 : 0 },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        formatter: propsObj.format === "currency" ? "${value}" : "{value}",
+      },
+    },
+    series: [
+      {
+        name: "Assist",
+        type: "bar",
+        stack: "Total",
+        itemStyle: { borderColor: "transparent", color: "transparent" },
+        emphasis: { itemStyle: { borderColor: "transparent", color: "transparent" } },
+        data: assistData,
+      },
+      {
+        name: "Positive",
+        type: "bar",
+        stack: "Total",
+        itemStyle: { color: "#91cc75" },
+        label: { show: propsObj.showLabels, position: "top" },
+        data: positiveData,
+      },
+      {
+        name: "Negative",
+        type: "bar",
+        stack: "Total",
+        itemStyle: { color: "#ee6666" },
+        label: { show: propsObj.showLabels, position: "bottom" },
+        data: negativeData,
+      },
+    ],
+  };
+}
+
+function convertBulletChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  const items = (propsObj.items as unknown[]) || [];
+  const series: unknown[] = [];
+  const yAxisData = items.map((item: unknown) => (item as Record<string, unknown>).name);
+
+  // Create ranges (background bars), measure (actual bar), and markers (threshold lines)
+  items.forEach((item: unknown, idx: number) => {
+    const itemObj = item as Record<string, unknown>;
+    const itemMax = itemObj.max as number;
+    // Range bars (poor, satisfactory, good backgrounds)
+    const ranges = (itemObj.ranges as number[]) || [itemMax * 0.33, itemMax * 0.67, itemMax];
+    ranges.forEach((rangeVal: number, rangeIdx: number) => {
+      const seriesArr = series as Array<Record<string, unknown>>;
+      if (!seriesArr[rangeIdx]) {
+        seriesArr[rangeIdx] = {
+          name: `Range ${rangeIdx + 1}`,
+          type: "bar",
+          barGap: "-100%",
+          barWidth: 30,
+          itemStyle: {
+            color: rangeIdx === 0 ? "#ee6666" : rangeIdx === 1 ? "#fac858" : "#91cc75",
+            opacity: 0.3,
+          },
+          data: new Array(items.length).fill(null),
+        };
+      }
+      (seriesArr[rangeIdx].data as unknown[])[idx] = rangeVal;
+    });
+  });
+
+  // Actual value bars
+  series.push({
+    name: "Actual",
+    type: "bar",
+    barGap: "-100%",
+    barWidth: 12,
+    itemStyle: { color: "#5470c6" },
+    data: items.map((item: unknown) => (item as Record<string, unknown>).value),
+    label: {
+      show: propsObj.showLabels,
+      position: "right",
+      formatter: "{c}",
+    },
+  });
+
+  // Threshold markers
+  series.push({
+    name: "Threshold",
+    type: "scatter",
+    symbol: "rect",
+    symbolSize: [3, 30],
+    itemStyle: { color: "#333" },
+    data: items.map((item: unknown, idx: number) => {
+      const itemObj = item as Record<string, unknown>;
+      return [itemObj.threshold, idx];
+    }),
+  });
+
+  return {
+    title: { text: propsObj.title, left: "center" },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: (params: unknown) => {
+        const paramsArr = params as Array<{ dataIndex: number }> | undefined;
+        if (!paramsArr || paramsArr.length === 0) return "";
+        const item = items[paramsArr[0]?.dataIndex ?? 0] as Record<string, unknown>;
+        return `${item.name}<br/>Actual: ${item.value}<br/>Threshold: ${item.threshold}`;
+      },
+    },
+    grid: { left: "15%", right: "10%", bottom: "3%", containLabel: true },
+    xAxis: {
+      type: "value",
+      max:
+        propsObj.max ||
+        Math.max(
+          ...items.map((i: unknown) => {
+            const iObj = i as Record<string, unknown>;
+            return (iObj.max as number) || (iObj.threshold as number) * 1.5;
+          }),
+        ),
+    },
+    yAxis: {
+      type: "category",
+      data: yAxisData,
+      inverse: true,
+    },
+    series,
+  };
+}
+
+function convertHeatmapChart(props: unknown): unknown {
+  if (typeof props !== "object" || props === null) return {};
+  const propsObj = props as Record<string, unknown>;
+
+  const matrix = (propsObj.matrix as number[][]) || [];
+  const xLabels = (propsObj.xLabels as string[]) || [];
+  const yLabels = (propsObj.yLabels as string[]) || [];
+
+  // Convert matrix to ECharts format [[x, y, value], ...]
+  const data: [number, number, number][] = [];
+  let min = Infinity,
+    max = -Infinity;
+
+  matrix.forEach((row: number[], yIdx: number) => {
+    row.forEach((value: number, xIdx: number) => {
+      data.push([xIdx, yIdx, value]);
+      if (value < min) min = value;
+      if (value > max) max = value;
+    });
+  });
+
+  return {
+    title: { text: propsObj.title, left: "center" },
+    tooltip: {
+      position: "top",
+      formatter: (params: unknown) => {
+        const paramsObj = params as { data: [number, number, number] };
+        const [x, y, value] = paramsObj.data;
+        return `${propsObj.xVariable || "X"}: ${xLabels[x]}<br/>${propsObj.yVariable || "Y"}: ${yLabels[y]}<br/>Value: ${value}`;
+      },
+    },
+    grid: { left: "15%", right: "10%", top: "15%", bottom: "15%" },
+    xAxis: {
+      type: "category",
+      data: xLabels,
+      name: propsObj.xVariable,
+      nameLocation: "center",
+      nameGap: 30,
+      splitArea: { show: true },
+    },
+    yAxis: {
+      type: "category",
+      data: yLabels,
+      name: propsObj.yVariable,
+      nameLocation: "center",
+      nameGap: 50,
+      splitArea: { show: true },
+    },
+    visualMap: {
+      min: (propsObj.min as number) ?? min,
+      max: (propsObj.max as number) ?? max,
+      calculable: true,
+      orient: "horizontal",
+      left: "center",
+      bottom: "0%",
+      inRange: {
+        color: (propsObj.colorRange as string[]) || ["#ee6666", "#fac858", "#91cc75"],
+      },
+    },
+    series: [
+      {
+        name: propsObj.title,
+        type: "heatmap",
+        data,
+        label: {
+          show: propsObj.showLabels !== false,
+          formatter: (params: unknown) => {
+            const paramsObj = params as { data: [number, number, number] };
+            const val = paramsObj.data[2];
+            return propsObj.format === "percent"
+              ? `${val}%`
+              : propsObj.format === "currency"
+                ? `$${val}`
+                : val;
+          },
+        },
+        emphasis: {
+          itemStyle: { shadowBlur: 10, shadowColor: "rgba(0, 0, 0, 0.5)" },
+        },
+      },
+    ],
+  };
+}

package/libs/ui/src/components/chart-viz/dashboard.tsx

@@ -0,0 +1,146 @@
+import * as echarts from "echarts";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { componentToECharts } from "./converters";
+import { getThemeName, type ChartVizTheme } from "./themes";
+
+interface DashboardRendererProps {
+  config: unknown;
+  theme?: ChartVizTheme | string;
+}
+
+// Helper to parse config
+function parseConfig(rawConfig: unknown): unknown {
+  if (typeof rawConfig === "string") {
+    try {
+      return JSON.parse(rawConfig);
+    } catch {
+      console.error("Failed to parse dashboard config:", rawConfig);
+      return null;
+    }
+  }
+  return rawConfig;
+}
+
+export function DashboardRenderer({ config: rawConfig, theme }: DashboardRendererProps) {
+  // Parse config if it's a string
+  const config = parseConfig(rawConfig) as Record<string, unknown> | null;
+
+  // Get the theme name (registers custom themes automatically)
+  const themeName = useMemo(() => getThemeName(theme), [theme]);
+
+  if (!config) {
+    return (
+      <div style={{ padding: "16px", color: "#ff6b6b" }}>Failed to parse dashboard config</div>
+    );
+  }
+
+  // Handle title being either a string or an ECharts title config object
+  const titleObj = config.title as { text: string } | string | undefined;
+  const titleText =
+    typeof titleObj === "string"
+      ? titleObj
+      : (titleObj as { text: string } | undefined)?.text || "Dashboard";
+
+  return (
+    <div className="w-full space-y-6">
+      <h2 className="text-2xl font-bold tracking-tight">{titleText}</h2>
+      <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
+        {(config.components as unknown[])
+          ?.filter((comp: unknown) => {
+            const compObj = comp as Record<string, unknown>;
+            return compObj.type !== "MetricCard";
+          })
+          .map((comp: unknown, idx: number) => (
+            <DashboardComponent
+              key={idx}
+              component={comp}
+              themeName={themeName}
+              componentIndex={idx}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+function DashboardComponent({
+  component,
+  themeName,
+  componentIndex,
+}: {
+  component: unknown;
+  themeName: string;
+  componentIndex: number;
+}) {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const [renderError, setRenderError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Reset error when component changes
+    setRenderError(null);
+
+    if (!chartRef.current) return;
+
+    try {
+      if (!chartInstance.current || chartInstance.current.isDisposed()) {
+        chartInstance.current = echarts.init(chartRef.current, themeName);
+      }
+    } catch (initError: unknown) {
+      console.error(`Dashboard component ${componentIndex} init error:`, initError);
+      setRenderError(
+        `Failed to initialize: ${initError instanceof Error ? initError.message : String(initError)}`,
+      );
+      return;
+    }
+
+    let echartsConfig: unknown;
+    try {
+      echartsConfig = componentToECharts(component);
+    } catch (convertError: unknown) {
+      console.error(`Dashboard component ${componentIndex} conversion error:`, convertError);
+      setRenderError(
+        `Failed to convert config: ${convertError instanceof Error ? convertError.message : String(convertError)}`,
+      );
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      try {
+        if (chartInstance.current && !chartInstance.current.isDisposed()) {
+          chartInstance.current.setOption(echartsConfig as echarts.EChartsOption);
+        }
+      } catch (setOptionError: unknown) {
+        console.error(`Dashboard component ${componentIndex} setOption error:`, setOptionError);
+        setRenderError(
+          `Render error: ${setOptionError instanceof Error ? setOptionError.message : String(setOptionError)}`,
+        );
+      }
+    });
+
+    return () => {
+      if (chartInstance.current && !chartInstance.current.isDisposed()) {
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  }, [component, themeName, componentIndex]);
+
+  // Handle render error
+  if (renderError) {
+    return (
+      <div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
+        <div className="text-destructive mb-2 font-semibold">
+          Component {componentIndex + 1} failed
+        </div>
+        <div className="text-destructive/80 text-sm">{renderError}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-card rounded-lg border p-4 shadow-sm">
+      <div ref={chartRef} className="h-[350px] w-full" />
+    </div>
+  );
+}

package/libs/ui/src/components/chart-viz/index.ts

@@ -0,0 +1,37 @@
+export { ChartRenderer } from "./chart";
+export { componentToECharts, isComponentFormat } from "./converters";
+export { DashboardRenderer } from "./dashboard";
+export { MarkdownRenderer } from "./markdown";
+export { TableRenderer } from "./table";
+export { ToolDisplay } from "./tool-display";
+export type {
+  BulletItem,
+  ChartConfig,
+  ComponentConfig,
+  DashboardConfig,
+  HeatmapProps,
+  InlineChartConfig,
+  MarkdownConfig,
+  MetricCardProps,
+  TableColumn,
+  TableConfig,
+  WaterfallItem,
+} from "./types";
+
+// Theme exports
+export {
+  createTailwindTheme,
+  createThemeFromCSS,
+  darkTheme,
+  extractCSSVariables,
+  getThemeName,
+  isThemeRegistered,
+  lightTheme,
+  parseTailwindCSS,
+  registerBuiltInThemes,
+  registerTheme,
+} from "./themes";
+export type { ChartVizTheme, TailwindColors } from "./themes";
+
+// Theme context exports
+export { ChartThemeProvider, useChartTheme } from "./theme-context";