From 8b26aca387367bdbbde2c30d5f70063c71c2ddb2 Mon Sep 17 00:00:00 2001
From: cmanu <cmanughian@anaconda.com>
Date: Fri, 24 Jul 2026 16:31:52 -0700
Subject: [PATCH] fix(charts): format to make prettier

---
 packages/kilo-ui/src/components/chart.tsx     |   8 +-
 .../src/stories/tool-call-lab.stories.tsx     | 307 +++++++++++-------
 2 files changed, 193 insertions(+), 122 deletions(-)

diff --git a/packages/kilo-ui/src/components/chart.tsx b/packages/kilo-ui/src/components/chart.tsx
index f8ec69cd370..df57daeec9d 100644
--- a/packages/kilo-ui/src/components/chart.tsx
+++ b/packages/kilo-ui/src/components/chart.tsx
@@ -67,7 +67,7 @@ export function ChartTool(props: ToolProps) {
           return {
             ...dataset,
             backgroundColor: data.map((_, j) => colors.series[j % colors.series.length]),
-            borderColor: colors.series.map(c => c),
+            borderColor: colors.series.map((c) => c),
           }
         }
         return {
@@ -122,11 +122,7 @@ export function ChartTool(props: ToolProps) {
       defaultOpen={props.defaultOpen ?? true}
     >
       <div data-component="chart-container">
-        {error() ? (
-          <div data-slot="chart-error">{error()}</div>
-        ) : (
-          <canvas ref={canvas} data-slot="chart-render" />
-        )}
+        {error() ? <div data-slot="chart-error">{error()}</div> : <canvas ref={canvas} data-slot="chart-render" />}
       </div>
     </BasicTool>
   )
diff --git a/packages/kilo-vscode/webview-ui/src/stories/tool-call-lab.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/tool-call-lab.stories.tsx
index b49354f2d0b..b5f8d714d1d 100644
--- a/packages/kilo-vscode/webview-ui/src/stories/tool-call-lab.stories.tsx
+++ b/packages/kilo-vscode/webview-ui/src/stories/tool-call-lab.stories.tsx
@@ -1237,143 +1237,218 @@ export const SearchPreviews: Story = {
               <div class="tool-call-lab-stack">
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Bar chart</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-bar-preview",
-                    "chart",
-                    { title: "Bar chart" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "bar",
-                      "data": {
-                        "labels": ["A", "B", "C", "D", "E"],
-                        "datasets": [{ "label": "Value", "data": [28, 55, 43, 91, 81] }]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-bar-preview",
+                        "chart",
+                        { title: "Bar chart" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "bar",
+                          data: {
+                            labels: ["A", "B", "C", "D", "E"],
+                            datasets: [{ label: "Value", data: [28, 55, 43, 91, 81] }],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Line plot</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-line-preview",
-                    "chart",
-                    { title: "Line plot" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "line",
-                      "data": {
-                        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
-                        "datasets": [{ "label": "Value", "data": [12, 28, 19, 45, 38, 62, 55, 74], "fill": false }]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-line-preview",
+                        "chart",
+                        { title: "Line plot" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "line",
+                          data: {
+                            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
+                            datasets: [{ label: "Value", data: [12, 28, 19, 45, 38, 62, 55, 74], fill: false }],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Scatter plot</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-scatter-preview",
-                    "chart",
-                    { title: "Scatter plot" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "scatter",
-                      "data": {
-                        "datasets": [{ "label": "Points", "data": [
-                          { "x": 2, "y": 14 }, { "x": 5, "y": 38 }, { "x": 8, "y": 22 },
-                          { "x": 11, "y": 61 }, { "x": 14, "y": 44 }, { "x": 17, "y": 73 },
-                          { "x": 20, "y": 55 }, { "x": 23, "y": 88 }, { "x": 26, "y": 67 },
-                          { "x": 29, "y": 95 },
-                        ]}]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-scatter-preview",
+                        "chart",
+                        { title: "Scatter plot" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "scatter",
+                          data: {
+                            datasets: [
+                              {
+                                label: "Points",
+                                data: [
+                                  { x: 2, y: 14 },
+                                  { x: 5, y: 38 },
+                                  { x: 8, y: 22 },
+                                  { x: 11, y: 61 },
+                                  { x: 14, y: 44 },
+                                  { x: 17, y: 73 },
+                                  { x: 20, y: 55 },
+                                  { x: 23, y: 88 },
+                                  { x: 26, y: 67 },
+                                  { x: 29, y: 95 },
+                                ],
+                              },
+                            ],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Temporal (time series)</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-temporal-preview",
-                    "chart",
-                    { title: "Time series" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "line",
-                      "data": {
-                        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-                        "datasets": [{ "label": "Value", "data": [120, 145, 132, 178, 163, 201, 194, 223, 215, 248, 237, 271], "fill": true }]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-temporal-preview",
+                        "chart",
+                        { title: "Time series" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "line",
+                          data: {
+                            labels: [
+                              "Jan",
+                              "Feb",
+                              "Mar",
+                              "Apr",
+                              "May",
+                              "Jun",
+                              "Jul",
+                              "Aug",
+                              "Sep",
+                              "Oct",
+                              "Nov",
+                              "Dec",
+                            ],
+                            datasets: [
+                              {
+                                label: "Value",
+                                data: [120, 145, 132, 178, 163, 201, 194, 223, 215, 248, 237, 271],
+                                fill: true,
+                              },
+                            ],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Pie chart</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-pie-preview",
-                    "chart",
-                    { title: "Pie chart" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "pie",
-                      "data": {
-                        "labels": ["A", "B", "C", "D"],
-                        "datasets": [{ "data": [30, 50, 15, 5] }]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-pie-preview",
+                        "chart",
+                        { title: "Pie chart" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "pie",
+                          data: {
+                            labels: ["A", "B", "C", "D"],
+                            datasets: [{ data: [30, 50, 15, 5] }],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Doughnut chart</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-doughnut-preview",
-                    "chart",
-                    { title: "Doughnut chart" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "doughnut",
-                      "data": {
-                        "labels": ["A", "B", "C", "D"],
-                        "datasets": [{ "data": [40, 25, 20, 15] }]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-doughnut-preview",
+                        "chart",
+                        { title: "Doughnut chart" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "doughnut",
+                          data: {
+                            labels: ["A", "B", "C", "D"],
+                            datasets: [{ data: [40, 25, 20, 15] }],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Radar chart</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-radar-preview",
-                    "chart",
-                    { title: "Radar chart" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "radar",
-                      "data": {
-                        "labels": ["Speed", "Strength", "Agility", "Intelligence", "Endurance"],
-                        "datasets": [
-                          { "label": "Player A", "data": [80, 60, 75, 90, 70] },
-                          { "label": "Player B", "data": [55, 85, 60, 65, 80] }
-                        ]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-radar-preview",
+                        "chart",
+                        { title: "Radar chart" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "radar",
+                          data: {
+                            labels: ["Speed", "Strength", "Agility", "Intelligence", "Endurance"],
+                            datasets: [
+                              { label: "Player A", data: [80, 60, 75, 90, 70] },
+                              { label: "Player B", data: [55, 85, 60, 65, 80] },
+                            ],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
                 <div class="tool-call-lab-example">
                   <span class="tool-call-lab-example-label">Bubble chart</span>
-                  <AssistantMessage message={base} parts={[done(
-                    "chart-bubble-preview",
-                    "chart",
-                    { title: "Bubble chart" },
-                    "Render chart",
-                    JSON.stringify({
-                      "type": "bubble",
-                      "data": {
-                        "datasets": [{ "label": "Dataset", "data": [
-                          { "x": 5,  "y": 20, "r": 10 },
-                          { "x": 15, "y": 35, "r": 20 },
-                          { "x": 25, "y": 15, "r": 8 },
-                          { "x": 35, "y": 50, "r": 15 },
-                          { "x": 45, "y": 30, "r": 25 },
-                        ]}]
-                      }
-                    }),
-                  )]} />
+                  <AssistantMessage
+                    message={base}
+                    parts={[
+                      done(
+                        "chart-bubble-preview",
+                        "chart",
+                        { title: "Bubble chart" },
+                        "Render chart",
+                        JSON.stringify({
+                          type: "bubble",
+                          data: {
+                            datasets: [
+                              {
+                                label: "Dataset",
+                                data: [
+                                  { x: 5, y: 20, r: 10 },
+                                  { x: 15, y: 35, r: 20 },
+                                  { x: 25, y: 15, r: 8 },
+                                  { x: 35, y: 50, r: 15 },
+                                  { x: 45, y: 30, r: 25 },
+                                ],
+                              },
+                            ],
+                          },
+                        }),
+                      ),
+                    ]}
+                  />
                 </div>
               </div>
             </section>