sea-dev 1.0.0

package/libs/ui/src/components/chart-viz/themes/light.ts

@@ -0,0 +1,98 @@
+import type { ChartVizTheme } from "./types";
+
+/**
+ * Light theme preset
+ */
+export const lightTheme: ChartVizTheme = {
+  name: "chart-viz-light",
+  backgroundColor: "#ffffff",
+  textStyle: {
+    color: "#333333",
+  },
+  title: {
+    textStyle: {
+      color: "#333333",
+    },
+    subtextStyle: {
+      color: "#666666",
+    },
+  },
+  legend: {
+    textStyle: {
+      color: "#333333",
+    },
+  },
+  tooltip: {
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    borderColor: "#cccccc",
+    textStyle: {
+      color: "#333333",
+    },
+  },
+  axisPointer: {
+    lineStyle: {
+      color: "#cccccc",
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisLabel: {
+      color: "#666666",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#eeeeee",
+      },
+    },
+    splitArea: {
+      areaStyle: {
+        color: ["rgba(0,0,0,0.02)", "rgba(0,0,0,0.05)"],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisLabel: {
+      color: "#666666",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#eeeeee",
+      },
+    },
+    splitArea: {
+      areaStyle: {
+        color: ["rgba(0,0,0,0.02)", "rgba(0,0,0,0.05)"],
+      },
+    },
+  },
+  color: [
+    "#5470c6",
+    "#91cc75",
+    "#fac858",
+    "#ee6666",
+    "#73c0de",
+    "#3ba272",
+    "#fc8452",
+    "#9a60b4",
+    "#ea7ccc",
+  ],
+};

package/libs/ui/src/components/chart-viz/themes/tailwind.ts

@@ -0,0 +1,326 @@
+import { darkTheme } from "./dark";
+import { lightTheme } from "./light";
+import type { ChartVizTheme, TailwindColors } from "./types";
+
+/**
+ * Convert OKLCH color string to hex
+ * e.g., "oklch(0.646 0.222 41.116)" -> "#e55b3c"
+ */
+function oklchToHex(oklchStr: string): string | null {
+  // Match oklch(L C H) or oklch(L C H / A)
+  const match = oklchStr.match(
+    /oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i,
+  );
+  if (!match) return null;
+
+  const L = parseFloat(match[1] ?? "0");
+  const C = parseFloat(match[2] ?? "0");
+  const H = parseFloat(match[3] ?? "0");
+
+  // OKLCH to OKLab
+  const hRad = (H * Math.PI) / 180;
+  const a = C * Math.cos(hRad);
+  const b = C * Math.sin(hRad);
+
+  // OKLab to linear sRGB (approximate)
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  // Linear sRGB to sRGB
+  const linearToSrgb = (c: number) => {
+    if (c <= 0.0031308) return 12.92 * c;
+    return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  };
+
+  const r = linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+  const g = linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+  const b2 = linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s);
+
+  // Clamp and convert to hex
+  const clamp = (v: number) => Math.max(0, Math.min(1, v));
+  const toHex = (v: number) =>
+    Math.round(clamp(v) * 255)
+      .toString(16)
+      .padStart(2, "0");
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b2)}`;
+}
+
+/**
+ * Parse a CSS color value to hex format
+ * Supports: hex, rgb, rgba, hsl, hsla, oklch, and named colors
+ */
+function parseColorToHex(value: string): string | null {
+  const trimmed = value.trim();
+
+  // Already hex
+  if (trimmed.startsWith("#")) {
+    return trimmed;
+  }
+
+  // OKLCH
+  if (trimmed.toLowerCase().startsWith("oklch(")) {
+    return oklchToHex(trimmed);
+  }
+
+  // RGB/RGBA
+  const rgbMatch = trimmed.match(/rgba?\(\s*(\d+)\s*,?\s*(\d+)\s*,?\s*(\d+)/i);
+  if (rgbMatch) {
+    const toHex = (n: string) => parseInt(n).toString(16).padStart(2, "0");
+    return `#${toHex(rgbMatch[1] ?? "0")}${toHex(rgbMatch[2] ?? "0")}${toHex(rgbMatch[3] ?? "0")}`;
+  }
+
+  // Return as-is for other formats (browser may handle)
+  return trimmed || null;
+}
+
+/**
+ * Parse raw Tailwind CSS to extract color variables
+ * Handles CSS custom properties from :root and .dark selectors
+ */
+export function parseTailwindCSS(cssText: string): { light: TailwindColors; dark: TailwindColors } {
+  const light: TailwindColors = { chartColors: [] };
+  const dark: TailwindColors = { chartColors: [] };
+
+  // Extract :root block
+  const rootMatch = cssText.match(/:root\s*\{([^}]+)\}/);
+  if (rootMatch) {
+    parseVariables(rootMatch[1] ?? "", light);
+  }
+
+  // Extract .dark block
+  const darkMatch = cssText.match(/\.dark\s*\{([^}]+)\}/);
+  if (darkMatch) {
+    parseVariables(darkMatch[1] ?? "", dark);
+  }
+
+  // If no specific blocks found, try parsing the whole thing (variables might be inline)
+  if (!rootMatch && !darkMatch) {
+    parseVariables(cssText ?? "", light);
+  }
+
+  return { light, dark };
+}
+
+/**
+ * Parse CSS variable declarations from a CSS block
+ */
+function parseVariables(block: string, colors: TailwindColors): void {
+  // Match --variable-name: value; patterns
+  const varRegex = /--([\w-]+)\s*:\s*([^;]+);/g;
+  let match;
+
+  const chartColorsMap: Map<number, string> = new Map();
+
+  while ((match = varRegex.exec(block)) !== null) {
+    const varName = match[1]?.toLowerCase() ?? "";
+    const rawValue = match[2]?.trim() ?? "";
+    const hexValue = parseColorToHex(rawValue);
+
+    if (!hexValue) continue;
+
+    // Map common variable names to TailwindColors fields
+    if (varName === "primary" || varName === "color-primary") {
+      colors.primary = hexValue;
+    } else if (
+      varName === "background" ||
+      varName === "color-background" ||
+      varName === "bg-base"
+    ) {
+      colors.background = hexValue;
+    } else if (
+      varName === "foreground" ||
+      varName === "color-foreground" ||
+      varName === "text-primary"
+    ) {
+      colors.foreground = hexValue;
+    } else if (
+      varName === "muted" ||
+      varName === "color-muted" ||
+      varName === "muted-foreground" ||
+      varName === "text-secondary"
+    ) {
+      colors.muted = hexValue;
+    } else if (varName === "border" || varName === "color-border") {
+      colors.border = hexValue;
+    } else if (varName.startsWith("chart-") || varName.startsWith("color-chart-")) {
+      // Extract chart color index (chart-1, chart-2, etc.)
+      const numMatch = varName.match(/(\d+)$/);
+      if (numMatch) {
+        chartColorsMap.set(parseInt(numMatch[1] ?? "0"), hexValue);
+      }
+    }
+  }
+
+  // Convert chart colors map to array (sorted by index)
+  if (chartColorsMap.size > 0) {
+    const sortedKeys = Array.from(chartColorsMap.keys()).sort((a, b) => a - b);
+    colors.chartColors = sortedKeys.map((k) => chartColorsMap.get(k)!);
+  }
+}
+
+/**
+ * Default chart color palette for both modes
+ */
+const defaultChartColors = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc",
+];
+
+/**
+ * Create a theme from Tailwind-style color configuration
+ */
+export function createTailwindTheme(
+  colors: TailwindColors,
+  mode: "light" | "dark" = "dark",
+): ChartVizTheme {
+  const base = mode === "dark" ? darkTheme : lightTheme;
+  const chartColors = colors.chartColors || defaultChartColors;
+
+  // If primary color is provided, make it the first chart color
+  const finalColors = colors.primary
+    ? [colors.primary, ...chartColors.filter((c) => c !== colors.primary)]
+    : chartColors;
+
+  const bg = colors.background || base.backgroundColor;
+  const fg = colors.foreground || base.textStyle.color;
+  const muted = colors.muted || (mode === "dark" ? "#aaaaaa" : "#666666");
+  const border = colors.border || (mode === "dark" ? "#555555" : "#cccccc");
+
+  return {
+    name: `tailwind-${mode}`,
+    backgroundColor: bg,
+    textStyle: {
+      color: fg,
+    },
+    title: {
+      textStyle: {
+        color: fg,
+      },
+      subtextStyle: {
+        color: muted,
+      },
+    },
+    legend: {
+      textStyle: {
+        color: fg,
+      },
+    },
+    tooltip: {
+      backgroundColor: mode === "dark" ? "rgba(50, 50, 50, 0.95)" : "rgba(255, 255, 255, 0.95)",
+      borderColor: border,
+      textStyle: {
+        color: fg,
+      },
+    },
+    axisPointer: {
+      lineStyle: {
+        color: border,
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        color: muted,
+      },
+      splitLine: {
+        lineStyle: {
+          color: mode === "dark" ? "#333333" : "#eeeeee",
+        },
+      },
+      splitArea: {
+        areaStyle: {
+          color:
+            mode === "dark"
+              ? ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
+              : ["rgba(0,0,0,0.02)", "rgba(0,0,0,0.05)"],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisTick: {
+        lineStyle: {
+          color: border,
+        },
+      },
+      axisLabel: {
+        color: muted,
+      },
+      splitLine: {
+        lineStyle: {
+          color: mode === "dark" ? "#333333" : "#eeeeee",
+        },
+      },
+      splitArea: {
+        areaStyle: {
+          color:
+            mode === "dark"
+              ? ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
+              : ["rgba(0,0,0,0.02)", "rgba(0,0,0,0.05)"],
+        },
+      },
+    },
+    color: finalColors,
+  };
+}
+
+/**
+ * Extract CSS custom properties from the document for theme creation
+ * Call this at runtime to read Tailwind CSS variables
+ */
+export function extractCSSVariables(): TailwindColors {
+  if (typeof document === "undefined") {
+    return {};
+  }
+
+  const style = getComputedStyle(document.documentElement);
+
+  const getVar = (name: string): string | undefined => {
+    const value = style.getPropertyValue(name).trim();
+    return value || undefined;
+  };
+
+  // Try common Tailwind/shadcn CSS variable names
+  return {
+    primary: getVar("--primary") || getVar("--color-primary"),
+    background: getVar("--background") || getVar("--bg-panel") || getVar("--color-background"),
+    foreground: getVar("--foreground") || getVar("--text-primary") || getVar("--color-foreground"),
+    muted: getVar("--muted") || getVar("--text-secondary") || getVar("--color-muted"),
+    border: getVar("--border") || getVar("--color-border"),
+  };
+}
+
+/**
+ * Create a theme by extracting CSS variables at runtime
+ * Useful for dynamic theming based on Tailwind config
+ */
+export function createThemeFromCSS(mode: "light" | "dark" = "dark"): ChartVizTheme {
+  const colors = extractCSSVariables();
+  return createTailwindTheme(colors, mode);
+}

package/libs/ui/src/components/chart-viz/themes/types.ts

@@ -0,0 +1,99 @@
+/**
+ * Theme configuration for chart-viz
+ * Compatible with ECharts registerTheme()
+ */
+export interface ChartVizTheme {
+  name: string;
+  backgroundColor: string;
+  textStyle: {
+    color: string;
+  };
+  title: {
+    textStyle: {
+      color: string;
+    };
+    subtextStyle: {
+      color: string;
+    };
+  };
+  legend: {
+    textStyle: {
+      color: string;
+    };
+  };
+  tooltip: {
+    backgroundColor: string;
+    borderColor: string;
+    textStyle: {
+      color: string;
+    };
+  };
+  axisPointer: {
+    lineStyle: {
+      color: string;
+    };
+  };
+  categoryAxis: {
+    axisLine: {
+      lineStyle: {
+        color: string;
+      };
+    };
+    axisTick: {
+      lineStyle: {
+        color: string;
+      };
+    };
+    axisLabel: {
+      color: string;
+    };
+    splitLine: {
+      lineStyle: {
+        color: string;
+      };
+    };
+    splitArea: {
+      areaStyle: {
+        color: string[];
+      };
+    };
+  };
+  valueAxis: {
+    axisLine: {
+      lineStyle: {
+        color: string;
+      };
+    };
+    axisTick: {
+      lineStyle: {
+        color: string;
+      };
+    };
+    axisLabel: {
+      color: string;
+    };
+    splitLine: {
+      lineStyle: {
+        color: string;
+      };
+    };
+    splitArea: {
+      areaStyle: {
+        color: string[];
+      };
+    };
+  };
+  color: string[];
+}
+
+/**
+ * Input colors for creating a Tailwind-compatible theme
+ */
+export interface TailwindColors {
+  primary?: string;
+  background?: string;
+  foreground?: string;
+  muted?: string;
+  border?: string;
+  chartColors?: string[];
+}

package/libs/ui/src/components/chart-viz/tool-display.tsx

@@ -0,0 +1,150 @@
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+interface ToolDisplayProps {
+  toolParts: unknown[];
+}
+
+function getToolName(part: unknown): string {
+  if (typeof part !== "object" || part === null) return "unknown";
+  const partObj = part as Record<string, unknown>;
+  if (partObj.type === "dynamic-tool") return partObj.toolName as string;
+  if (typeof partObj.type === "string" && partObj.type.startsWith("tool-"))
+    return partObj.type.slice(5);
+  return (partObj.type as string) || "unknown";
+}
+
+function getFriendlyName(tool: unknown): string {
+  if (typeof tool !== "object" || tool === null) return "unknown";
+  const toolObj = tool as Record<string, unknown>;
+  const toolName = getToolName(tool);
+  if (toolName === "bash") {
+    const input = toolObj.input as Record<string, unknown> | undefined;
+    const cmd = (input?.command as string)?.split(" ")[0] || "bash";
+    const cmdMap: Record<string, string> = {
+      ls: "Listing files",
+      cat: "Reading file",
+      head: "Reading file",
+      tail: "Reading file",
+      jq: "Processing data",
+      grep: "Searching",
+      wc: "Counting",
+      sort: "Sorting data",
+      find: "Finding files",
+    };
+    return cmdMap[cmd] || `Running ${cmd}`;
+  }
+  if (toolName === "renderChart") return "Rendering chart";
+  if (toolName === "sql") return "Processing data";
+  if (toolName === "showTables") return "Listing tables";
+  if (toolName === "describeTable") return "Describing table";
+  if (toolName === "setChartTheme") return "Changing theme";
+  return toolName;
+}
+
+function getDetail(tool: unknown): string | null {
+  if (typeof tool !== "object" || tool === null) return null;
+  const toolObj = tool as Record<string, unknown>;
+  const toolName = getToolName(tool);
+  const input = toolObj.input as Record<string, unknown> | undefined;
+
+  if (toolName === "bash" && input?.command) return input.command as string;
+  if (toolName === "sql" && input?.query) return input.query as string;
+  if (toolName === "renderChart") {
+    const config = input?.config as Record<string, unknown> | undefined;
+    return `${config?.type || "chart"}`;
+  }
+  if (toolName === "setChartTheme") {
+    const { theme, customColors } = input || {};
+    if (customColors) {
+      return `${theme} mode with custom colors`;
+    }
+    return `${theme} mode`;
+  }
+  return input ? JSON.stringify(input, null, 2) : null;
+}
+
+function getOutput(tool: unknown): string | null {
+  if (typeof tool !== "object" || tool === null) return null;
+  const toolObj = tool as Record<string, unknown>;
+  const toolName = getToolName(tool);
+  const output = toolObj.output as Record<string, unknown> | string | undefined;
+
+  if (toolName === "bash" && typeof output === "object" && output?.output)
+    return output.output as string;
+  if (output) return typeof output === "string" ? output : JSON.stringify(output, null, 2);
+  return null;
+}
+
+export function ToolDisplay({ toolParts }: ToolDisplayProps) {
+  const [showAll, setShowAll] = useState(false);
+  const [expanded, setExpanded] = useState<Set<number>>(new Set());
+
+  if (!toolParts?.length) return null;
+
+  const tools = toolParts.filter((t) => getToolName(t) !== "updateProgress");
+  if (!tools.length) return null;
+
+  const hiddenCount = Math.max(0, tools.length - 2);
+  const visibleTools = showAll ? tools : tools.slice(-2);
+  const startIndex = showAll ? 0 : Math.max(0, tools.length - 2);
+
+  return (
+    <div className="tool-display">
+      {hiddenCount > 0 && (
+        <button className="tool-more" onClick={() => setShowAll(!showAll)}>
+          {showAll ? "Hide" : `+${hiddenCount} more`}
+        </button>
+      )}
+      {visibleTools.map((tool, i) => {
+        const toolObj = tool as Record<string, unknown>;
+        const idx = startIndex + i;
+        const isActive = toolObj.state === "input-streaming" || toolObj.state === "input-available";
+        const isOpen = expanded.has(idx);
+        const detail = getDetail(toolObj);
+        const output = getOutput(toolObj);
+        const hasContent = detail || output;
+
+        return (
+          <div key={idx} className="tool-step">
+            <span
+              className={`tool-label ${isActive ? "active" : ""} ${hasContent ? "clickable" : ""}`}
+              onClick={() =>
+                hasContent &&
+                setExpanded((p) => {
+                  const n = new Set(p);
+                  if (n.has(idx)) n.delete(idx);
+                  else n.add(idx);
+
+                  return n;
+                })
+              }
+              aria-label={getFriendlyName(toolObj)}
+            >
+              {isActive && <span className="tool-dot" />}
+              {getFriendlyName(toolObj)}
+              {hasContent && (
+                <ChevronDown
+                  size={10}
+                  style={{
+                    transform: isOpen ? "rotate(180deg)" : "none",
+                    marginLeft: 4,
+                    opacity: 0.5,
+                  }}
+                />
+              )}
+            </span>
+            {isOpen && hasContent && (
+              <pre className="tool-output">
+                {detail && <span className="tool-input-text">{detail}</span>}
+                {output && (
+                  <span>{output.length > 400 ? output.slice(0, 400) + "..." : output}</span>
+                )}
+              </pre>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}