Add browser chart operation with ECharts for data visualization

[Copilot]

• Install echarts dependency
• Add chart_display operation kind to OperationKindSchema in schemas.ts
• Define chart schemas with proper TypeScript types for each chart group
• Create chart_display tool in tools/artist.ts
• Implement chart_display operation in operations/artist.tsx (local mode, no analysis needed)
• Create browser renderer in browser/operations/artist.tsx with echarts integration
• Add variant switching UI in browser renderer
• Build and test the implementation
• Add documentation for chart display operation
• Add unit tests for chart display logic
• Address initial code review feedback (extract utilities, fix type mapping, remove duplication)
• Address first round PR feedback (React hooks, signature, discriminated unions, browser metadata)
• Address second round PR feedback:
  • Moved chart schemas outside function to artist_schemas.ts for exportable types
  • Changed from discriminatedUnion to union with chart property + globalToolProperties
  • Replaced all any types with proper types (ChartDataPoint, EChartsOption, etc.)
  • Updated operation to use chart input property containing ChartConfig
  • All types now properly typed and exported for reuse
  • Cleaned up temporary backup files

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add browser only chart operation to artist toolset</issue_title>
<issue_description>Use https://echarts.apache.org/en/index.html

There are a lot of different types of charts that display similar sorts of data. The tool for each type of data should have a schema and the call chooses which type. I want charts that are a different view to the same sort of data grouped together so in the browser UI I can easily toggle to a different chart to display that same data. In the browser - like images - I should be able to see the chart in the operation and have a way to select which display variant. Again the goal is for the agent to use a chart to display data it retrieved when it would be better visualized in a chart vs markdown. The operation should be local so there's no analysis that needs to be done in the operation. The input is the payload and the render function does the heavy lifting. Use this chat with Claude as guidance:

import * as echarts from 'echarts';

// Your data from above
const chartConfig = { chartGroup: "...", option: {...} };

// Initialize ECharts
const chart = echarts.init(document.getElementById('chart'));

// Set option directly
chart.setOption(chartConfig.option);

// Switch variants by updating the option
chart.setOption(newVariantConfig.option);

where the chartConfig is defined like so:

{
  "chartGroup": "partToWhole",
  "availableVariants": ["pie", "donut", "treemap", "sunburst"],
  "currentVariant": "pie",
  "option": {
    "title": {
      "text": "Market Share by Company",
      "left": "center"
    },
    "tooltip": {
      "trigger": "item",
      "formatter": "{a} <br/>{b}: {c} ({d}%)"
    },
    "legend": {
      "orient": "vertical",
      "left": "left"
    },
    "series": [
      {
        "name": "Market Share",
        "type": "pie",
        "radius": "50%",
        "data": [
          { "value": 28, "name": "Apple" },
          { "value": 22, "name": "Samsung" },
          { "value": 13, "name": "Xiaomi" },
          { "value": 10, "name": "Oppo" },
          { "value": 27, "name": "Others" }
        ],
        "emphasis": {
          "itemStyle": {
            "shadowBlur": 10,
            "shadowOffsetX": 0,
            "shadowColor": "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  }
}

{
  "currentVariant": "donut",
  "option": {
    "series": [
      {
        "type": "pie",
        "radius": ["40%", "70%"],
        "data": [
          { "value": 28, "name": "Apple" },
          { "value": 22, "name": "Samsung" }
        ]
      }
    ]
  }
}

{
  "currentVariant": "treemap",
  "option": {
    "series": [
      {
        "type": "treemap",
        "data": [
          { "value": 28, "name": "Apple" },
          { "value": 22, "name": "Samsung" },
          { "value": 13, "name": "Xiaomi" },
          { "value": 10, "name": "Oppo" },
          { "value": 27, "name": "Others" }
        ]
      }
    ]
  }
}

{
  "currentVariant": "sunburst",
  "option": {
    "series": [
      {
        "type": "sunburst",
        "data": [
          { "value": 28, "name": "Apple" },
          { "value": 22, "name": "Samsung" },
          { "value": 13, "name": "Xiaomi" }
        ],
        "radius": [0, "90%"]
      }
    ]
  }
}

as examples

Where chartGroups and variants are:

• partToWhole: ["pie", "donut", "treemap", "sunburst"]
• categoryComparison: ["bar", "horizontalBar", "pictorialBar"]
• timeSeries: ["line", "area", "step", "smoothLine"]
• distribution: ["histogram", "boxplot"]
• correlation: ["scatter", "effectScatter", "heatmap"]
• ranking: ["orderedBar", "horizontalOrderedBar"]
• hierarchical: ["treemap", "sunburst", "tree"]
• flow: ["sankey", "funnel"]
• geospatial: ["map", "scatter"]
• multivariateComparison: ["groupedBar", "stackedBar", "radar", "parallel"]

If you can think of a way to join some of these if theres exact overlap or add more EChart types to a group feel free to shuffle things around. Each chartgroup should have a schema and the schema has the chartGroup, each available variant, the custom options to apply to the variant, and the data/series. Ideally the data/series is not duplicated and the variant specific details can be applied/merged/obtained cleanly.</issue_description>

Comments on the Issue (you are @copilot in this section)

Custom agent used: Cletus-Developer
An agent that understands the cletus package.

• Fixes Add browser only chart operation to artist toolset #161

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[ClickerMonkey]

@copilot

[Copilot]

@copilot

Addressed all feedback in commit b13c20d:

1. React imports: Changed to direct hook imports (useRef, useState, useEffect)
2. Simplified signature: Removed type annotations from operation signature
3. Type-safe schemas: Replaced any/Record with discriminated union of 10 chart group schemas, each with proper variant enums and data validation
4. Browser-only metadata: Added onlyClient: 'browser' to tool metadata

All changes have been committed and the build passes successfully.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/142.0.7444.175/linux64/chrome-linux64.zip
  • Triggering command: /usr/local/bin/node node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[ClickerMonkey]

@copilot

[ClickerMonkey]

Remove global tool properties from above, change schema to that plus chart: z.union(all types) discriminated union is an untested zod type in aeye

[Copilot]

Done in commit 7f108e2. Removed ...globalToolProperties from all chart schemas and changed the tool schema from discriminatedUnion to:

schema: z.object({
  chart: ChartConfigSchema,
  ...globalToolProperties,
})

where ChartConfigSchema is a union of all chart schemas.

[ClickerMonkey]

Move the schemas out of this function so the inferred types can also be exported so the operation definition can go off the types to be precise and not have types duplicated

[Copilot]

Done in commit 7f108e2. Moved all chart schemas to a new exported file artist_schemas.ts that exports:

• Individual chart schemas (PartToWholeChartSchema, etc.)
• ChartConfigSchema (union of all schemas)
• ChartConfig type (inferred from schema)
• ChartDataPoint type

The operation now uses ChartConfig type from the exported schemas, eliminating type duplication.

[Copilot]

@copilot

Addressed all feedback in commit 7f108e2:

1. Schema structure: Changed to union with chart property + globalToolProperties
2. Exported types: Moved schemas to artist_schemas.ts with all types exported
3. Type safety: Replaced all any types with proper TypeScript types

The tool now accepts { chart: ChartConfig, ...globalToolProperties } where ChartConfig is a properly typed union of all chart group schemas.