feat: better heatmap styling

src/main/a2ui/catalog.ts

@@ -15,7 +15,7 @@ const CATALOG_ENTRIES: A2UICatalogEntry[] = [
   { type: 'text', description: 'Text block with Markdown support' },
   { type: 'button', description: 'Clickable button that dispatches an action' },
   { type: 'card', description: 'Card with title, subtitle, body, and action buttons' },
-  { type: 'chart', description: 'Bar, line, or pie chart visualization', custom: true },
+  { type: 'chart', description: 'Bar, stacked-bar, line, area, pie, donut, or heatmap chart visualization', custom: true },
   { type: 'table', description: 'Data table with columns and rows', custom: true },
   { type: 'textField', description: 'Text input field with data binding' },
   { type: 'checkBox', description: 'Checkbox input with data binding' },

src/main/a2ui/generator.ts

@@ -56,7 +56,7 @@ function createSurfaceMessages(
 // ---- Tool argument interfaces ----
 
 export interface RenderChartArgs {
-  chartType: 'bar' | 'stacked-bar' | 'line' | 'pie';
+  chartType: 'bar' | 'stacked-bar' | 'line' | 'area' | 'pie' | 'donut' | 'heatmap';
   title?: string;
   series: Array<{ label: string; value: number; segments?: Array<{ label: string; value: number }> }>;
 }

src/main/engine/ChatEngine.ts

@@ -323,7 +323,7 @@ Available Data Tools:
 - get_media_posts: Get posts that use a specific media file.
 
 Available UI Render Tools (use these to show rich interactive elements):
-- render_chart: Show data as a bar, stacked-bar, line, or pie chart. Use when presenting statistics or comparisons. Use stacked-bar when each bar has multiple segments (e.g., published vs draft posts per year).
+- render_chart: Show data as a bar, stacked-bar, line, area, pie, donut, or heatmap chart. Use when presenting statistics or comparisons. Use stacked-bar when each bar has multiple segments (e.g., published vs draft posts per year). Use area for cumulative or trend data where the filled region emphasizes volume. Use donut for proportional breakdowns with a total displayed in the center. Use heatmap for grid/matrix visualizations where color intensity shows magnitude — e.g., posts per month across years (each series entry is a row like a year, each segment is a column like a month), or a calendar view where rows are weekdays and columns are week numbers. ALWAYS prefer heatmap over a table with emojis or color indicators when showing intensity grids or calendar-style activity views.
 - render_table: Show data in a structured table. Use for tabular comparisons and listings.
 - render_form: Show an interactive form to collect user input (e.g., metadata edits, settings).
 - render_card: Show an information card with title, body, and action buttons.

src/main/engine/OpenCodeManager.ts

@@ -924,31 +924,31 @@ export class OpenCodeManager {
         input_schema: {
           type: 'object',
           properties: {
-            chartType: { type: 'string', enum: ['bar', 'stacked-bar', 'line', 'pie'], description: 'The type of chart to render. Use stacked-bar when each bar has multiple segments (categories).' },
+            chartType: { type: 'string', enum: ['bar', 'stacked-bar', 'line', 'area', 'pie', 'donut', 'heatmap'], description: 'The type of chart to render. Use stacked-bar when each bar has multiple segments (categories). Use area for trend/cumulative data. Use donut for proportional data with a total in the center. Use heatmap for grid/matrix visualizations where color intensity shows magnitude (e.g., posts per month across years). Prefer heatmap over tables with emojis for intensity data.' },
             title: { type: 'string', description: 'Optional chart title' },
             series: {
               type: 'array',
               items: {
                 type: 'object',
                 properties: {
-                  label: { type: 'string', description: 'Data point label' },
-                  value: { type: 'number', description: 'Data point value (total for stacked bars)' },
+                  label: { type: 'string', description: 'Data point label (row label for heatmaps, e.g., year)' },
+                  value: { type: 'number', description: 'Data point value (total for stacked bars, ignored for heatmaps)' },
                   segments: {
                     type: 'array',
                     items: {
                       type: 'object',
                       properties: {
-                        label: { type: 'string', description: 'Segment category label' },
-                        value: { type: 'number', description: 'Segment value' },
+                        label: { type: 'string', description: 'Segment/column label (e.g., month name for heatmaps)' },
+                        value: { type: 'number', description: 'Segment value (color intensity for heatmaps)' },
                       },
                       required: ['label', 'value'],
                     },
-                    description: 'Segments for stacked-bar charts. Each segment is a category within the bar.',
+                    description: 'Segments within this data point. Required for stacked-bar and heatmap charts. For heatmaps, each segment becomes a cell in that row.',
                   },
                 },
                 required: ['label', 'value'],
               },
-              description: 'Array of data points with label and value. For stacked-bar charts, include segments.',
+              description: 'Array of data points. For stacked-bar and heatmap charts, include segments. For heatmaps, each entry is a row and segments are columns.',
             },
           },
           required: ['chartType', 'series'],
@@ -1070,12 +1070,24 @@ export class OpenCodeManager {
                         value: { type: 'string', description: 'Display value (for type metric)' },
                         title: { type: 'string', description: 'Title (for type list, chart, or table)' },
                         items: { type: 'array', items: { type: 'string' }, description: 'Items (for type list)' },
-                        chartType: { type: 'string', enum: ['bar', 'line', 'pie'], description: 'Chart type (for type chart)' },
+                        chartType: { type: 'string', enum: ['bar', 'stacked-bar', 'line', 'area', 'pie', 'donut', 'heatmap'], description: 'Chart type (for type chart). Use heatmap for intensity grids.' },
                         series: {
                           type: 'array',
                           items: {
                             type: 'object',
-                            properties: { label: { type: 'string' }, value: { type: 'number' } },
+                            properties: {
+                              label: { type: 'string' },
+                              value: { type: 'number' },
+                              segments: {
+                                type: 'array',
+                                items: {
+                                  type: 'object',
+                                  properties: { label: { type: 'string' }, value: { type: 'number' } },
+                                  required: ['label', 'value'],
+                                },
+                                description: 'Segments for stacked-bar and heatmap charts',
+                              },
+                            },
                             required: ['label', 'value'],
                           },
                           description: 'Data series (for type chart)',