Add browser chart operation with ECharts for data visualization

packages/cletus/docs/chart-display.md

@@ -0,0 +1,171 @@
+# Chart Display Operation
+
+The `chart_display` operation allows you to visualize data as interactive charts in the browser UI using ECharts.
+
+## Usage
+
+The operation is browser-only and displays charts with the ability to switch between different visualization variants.
+
+### Basic Example
+
+```typescript
+{
+  "chartGroup": "partToWhole",
+  "title": "Market Share by Company",
+  "data": [
+    { "name": "Apple", "value": 28 },
+    { "name": "Samsung", "value": 22 },
+    { "name": "Xiaomi", "value": 13 },
+    { "name": "Oppo", "value": 10 },
+    { "name": "Others", "value": 27 }
+  ],
+  "defaultVariant": "pie"
+}
+```
+
+## Chart Groups and Variants
+
+Each chart group represents a category of related visualizations that display similar types of data:
+
+### Part to Whole (`partToWhole`)
+Shows how individual parts contribute to a whole.
+- **Variants**: `pie`, `donut`, `treemap`, `sunburst`
+
+### Category Comparison (`categoryComparison`)
+Compares values across different categories.
+- **Variants**: `bar`, `horizontalBar`, `pictorialBar`
+
+### Time Series (`timeSeries`)
+Displays data trends over time.
+- **Variants**: `line`, `area`, `step`, `smoothLine`
+
+### Distribution (`distribution`)
+Shows how data is distributed.
+- **Variants**: `histogram`, `boxplot`
+
+### Correlation (`correlation`)
+Shows relationships between variables.
+- **Variants**: `scatter`, `effectScatter`, `heatmap`
+
+### Ranking (`ranking`)
+Displays ordered/ranked data.
+- **Variants**: `orderedBar`, `horizontalOrderedBar`
+
+### Hierarchical (`hierarchical`)
+Represents hierarchical data structures.
+- **Variants**: `treemap`, `sunburst`, `tree`
+
+### Flow (`flow`)
+Shows flow or funnel processes.
+- **Variants**: `sankey`, `funnel`
+
+### Geospatial (`geospatial`)
+Displays geographic data.
+- **Variants**: `map`
+
+### Multivariate Comparison (`multivariateComparison`)
+Compares multiple variables simultaneously.
+- **Variants**: `groupedBar`, `stackedBar`, `radar`, `parallel`
+
+## Data Format
+
+Data should be an array of objects with `name` and `value` properties:
+
+```json
+[
+  { "name": "Category A", "value": 10 },
+  { "name": "Category B", "value": 20 },
+  { "name": "Category C", "value": 30 }
+]
+```
+
+## Advanced Usage
+
+### Custom Variant Options
+
+You can customize each variant with ECharts-specific options:
+
+```typescript
+{
+  "chartGroup": "partToWhole",
+  "data": [...],
+  "variantOptions": {
+    "pie": {
+      "series": [{
+        "label": {
+          "show": true,
+          "position": "outside"
+        }
+      }]
+    },
+    "donut": {
+      "series": [{
+        "label": {
+          "show": false
+        }
+      }]
+    }
+  }
+}
+```
+
+## Browser UI
+
+In the browser, the chart will be displayed with:
+1. A visual representation of the data
+2. Variant selector buttons above the chart
+3. Click any variant button to instantly switch the chart type
+4. All variants in the same chart group display the same underlying data
+
+## Example Use Cases
+
+### Sales Data
+```typescript
+{
+  "chartGroup": "categoryComparison",
+  "title": "Monthly Sales",
+  "data": [
+    { "name": "Jan", "value": 1200 },
+    { "name": "Feb", "value": 1500 },
+    { "name": "Mar", "value": 1800 }
+  ],
+  "defaultVariant": "bar"
+}
+```
+
+### Time Series Analysis
+```typescript
+{
+  "chartGroup": "timeSeries",
+  "title": "Temperature Over Time",
+  "data": [
+    { "name": "00:00", "value": 20 },
+    { "name": "06:00", "value": 18 },
+    { "name": "12:00", "value": 25 },
+    { "name": "18:00", "value": 22 }
+  ],
+  "defaultVariant": "smoothLine"
+}
+```
+
+### Budget Breakdown
+```typescript
+{
+  "chartGroup": "partToWhole",
+  "title": "Budget Allocation",
+  "data": [
+    { "name": "Engineering", "value": 50000 },
+    { "name": "Marketing", "value": 30000 },
+    { "name": "Sales", "value": 25000 },
+    { "name": "Operations", "value": 20000 }
+  ],
+  "defaultVariant": "treemap"
+}
+```
+
+## Implementation Details
+
+- **Mode**: `local` (no approval needed)
+- **Toolset**: Artist
+- **Browser Only**: Yes (requires browser UI to display)
+- **Library**: ECharts 5.x

packages/cletus/esbuild.browser.cjs

@@ -28,6 +28,21 @@ async function build() {
     fs.writeFileSync(path.join(distDir, 'styles.css'), result.css);
     console.log('✓ Tailwind CSS built successfully');
 
+    // Copy KaTeX CSS
+    console.log('Copying KaTeX CSS...');
+    // Try to resolve katex CSS from node_modules (works with monorepo structure)
+    let katexCssPath = path.join(__dirname, 'node_modules/katex/dist/katex.min.css');
+    if (!fs.existsSync(katexCssPath)) {
+      // Try root node_modules for monorepo
+      katexCssPath = path.join(__dirname, '../../node_modules/katex/dist/katex.min.css');
+    }
+    if (fs.existsSync(katexCssPath)) {
+      fs.copyFileSync(katexCssPath, path.join(distDir, 'katex.min.css'));
+      console.log('✓ KaTeX CSS copied successfully');
+    } else {
+      console.warn('⚠ KaTeX CSS not found, skipping...');
+    }
+
     // Build the browser client
     console.log('Building browser client...');
     await esbuild.build({
@@ -52,10 +67,10 @@ async function build() {
       'utf-8'
     );
 
-    // Inject the CSS link into the HTML with absolute path
+    // Inject the CSS links into the HTML with absolute paths
     const updatedHtml = htmlContent.replace(
       '</head>',
-      '  <link rel="stylesheet" href="/styles.css">\n</head>'
+      '  <link rel="stylesheet" href="/styles.css">\n  <link rel="stylesheet" href="/katex.min.css">\n</head>'
     );
 
     fs.writeFileSync(

packages/cletus/package.json

@@ -41,18 +41,22 @@
   ],
   "dependencies": {
     "cli-highlight": "^2.1.11",
+    "echarts": "^5.6.0",
     "fastembed": "^2.0.0",
     "ink": "^6.4.0",
     "ink-big-text": "^2.0.0",
     "ink-gradient": "^3.0.0",
     "ink-select-input": "^6.2.0",
     "ink-text-input": "^6.0.0",
+    "katex": "^0.16.27",
     "mic": "^2.1.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "sharp": "^0.34.3",
     "ws": "^8.18.0"
   },
@@ -83,6 +87,7 @@
     "@types/uuid": "^10.0.0",
     "@types/wav": "^1.0.4",
     "@types/ws": "^8.5.13",
+    "autoprefixer": "^10.4.23",
     "babel-jest": "^29.7.0",
     "diff": "^8.0.2",
     "esbuild": "^0.26.0",
@@ -100,7 +105,9 @@
     "node-html-markdown": "^1.3.0",
     "node-poppler": "^8.0.4",
     "pdf-parse": "^1.1.1",
+    "postcss": "^8.5.6",
     "react": "^19.2.0",
+    "rimraf": "^6.1.2",
     "ts-jest": "^29.2.5",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",

packages/cletus/src/agents/chat-agent.ts

@@ -153,7 +153,6 @@ export function createChatAgent(ai: CletusAI) {
         continue; // Skip utility, it's always available
       }
 
-      // All toolsets including DBA
       const tools = toolRegistry.getToolset(name);
       const toolSignatures = tools
         .map(t => {