@optifye/dashboard-core 4.3.4 → 4.3.6

package/dist/index.mjs

@@ -24427,6 +24427,7 @@ var AIAgentView = () => {
   const entityConfig = useEntityConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
+  const { formatNumber } = useFormatNumber();
   const [inputValue, setInputValue] = useState("");
   const [loadingThreads, setLoadingThreads] = useState(/* @__PURE__ */ new Set());
   const [lastError, setLastError] = useState(null);
@@ -25057,17 +25058,49 @@ var AIAgentView = () => {
               chartElements.push(chartElement);
             } else {
               console.warn(`[DEBUG] Chart element was null for type: ${chartType}`);
+              console.warn(`[DEBUG] Args were:`, args);
+              chartElements.push(
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
+                    children: [
+                      /* @__PURE__ */ jsx("strong", { children: "Chart Rendering Error:" }),
+                      " Failed to render ",
+                      chartType,
+                      /* @__PURE__ */ jsx("br", {}),
+                      /* @__PURE__ */ jsxs("small", { children: [
+                        "Check console for details. Args: ",
+                        JSON.stringify(args, null, 2)
+                      ] })
+                    ]
+                  },
+                  `error-${startIndex}`
+                )
+              );
             }
           } catch (error) {
             console.error(`Failed to parse chart ${chartType}:`, error);
+            console.error(`Args string was:`, argsString);
             chartElements.push(
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "text-red-500 text-sm",
+                  className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
                   children: [
-                    "Error rendering chart: ",
-                    match[0]
+                    /* @__PURE__ */ jsx("strong", { children: "Chart Parsing Error:" }),
+                    " Failed to parse ",
+                    chartType,
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsxs("small", { children: [
+                      "Error: ",
+                      error instanceof Error ? error.message : String(error)
+                    ] }),
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsxs("small", { children: [
+                      "Original: ",
+                      match[0]
+                    ] })
                   ]
                 },
                 `error-${startIndex}`
@@ -25098,111 +25131,265 @@ var AIAgentView = () => {
       return chartElements;
     };
     const parseChartArguments = (argsString) => {
-      const args = {};
       console.log("[DEBUG] Parsing chart arguments:", argsString);
-      const jsonParamRegex = /(\w+)\s*=\s*(\[[\s\S]*?\](?=\s*(?:,|\s*\)|\s*$))|\{[\s\S]*?\}(?=\s*(?:,|\s*\)|\s*$)))/g;
-      let jsonMatch;
-      while ((jsonMatch = jsonParamRegex.exec(argsString)) !== null) {
-        const paramName = jsonMatch[1];
-        const jsonValue = jsonMatch[2];
-        console.log(`[DEBUG] Found JSON parameter: ${paramName} = ${jsonValue}`);
-        try {
-          args[paramName] = JSON.parse(jsonValue);
-          console.log(`[DEBUG] Successfully parsed ${paramName}:`, args[paramName]);
-          argsString = argsString.replace(jsonMatch[0], "");
-        } catch (e) {
-          console.error(`Failed to parse ${paramName} JSON:`, e);
-          console.error(`JSON value that failed:`, jsonValue);
-        }
-      }
-      const argRegex = /(\w+)\s*=\s*("([^"]*)"|'([^']*)'|([^,\s\)]+))/g;
-      let argMatch;
-      while ((argMatch = argRegex.exec(argsString)) !== null) {
-        const key = argMatch[1];
-        const value = argMatch[3] || argMatch[4] || argMatch[5];
-        if (key === "data") continue;
-        if (value === "true" || value === "True") {
-          args[key] = true;
-        } else if (value === "false" || value === "False") {
-          args[key] = false;
-        } else if (value === "null" || value === "None") {
-          args[key] = null;
-        } else if (!isNaN(Number(value)) && value !== "") {
-          args[key] = Number(value);
-        } else {
-          args[key] = value;
+      const extractParameters = (str) => {
+        const params = {};
+        let currentPos = 0;
+        while (currentPos < str.length) {
+          while (currentPos < str.length && /\s|,/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          const paramMatch = str.substring(currentPos).match(/^(\w+)\s*=/);
+          if (!paramMatch) {
+            console.warn("[DEBUG] No parameter name found at position", currentPos);
+            break;
+          }
+          const paramName = paramMatch[1];
+          currentPos += paramMatch[0].length;
+          while (currentPos < str.length && /\s/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          let value;
+          let valueEnd;
+          if (str[currentPos] === "[") {
+            let bracketCount = 0;
+            let arrayStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "[") bracketCount++;
+              else if (str[i] === "]") bracketCount--;
+              if (bracketCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (bracketCount !== 0) {
+              console.error("[DEBUG] Unmatched brackets in array value");
+              break;
+            }
+            const arrayStr = str.substring(arrayStart, valueEnd);
+            console.log(`[DEBUG] Found array parameter: ${paramName} = ${arrayStr}`);
+            try {
+              value = JSON.parse(arrayStr);
+              console.log(`[DEBUG] Successfully parsed array ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse array ${paramName}:`, e);
+              console.error(`Array value that failed:`, arrayStr);
+              value = arrayStr;
+            }
+          } else if (str[currentPos] === "{") {
+            let braceCount = 0;
+            let objectStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "{") braceCount++;
+              else if (str[i] === "}") braceCount--;
+              if (braceCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (braceCount !== 0) {
+              console.error("[DEBUG] Unmatched braces in object value");
+              break;
+            }
+            const objectStr = str.substring(objectStart, valueEnd);
+            console.log(`[DEBUG] Found object parameter: ${paramName} = ${objectStr}`);
+            try {
+              value = JSON.parse(objectStr);
+              console.log(`[DEBUG] Successfully parsed object ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse object ${paramName}:`, e);
+              console.error(`Object value that failed:`, objectStr);
+              value = objectStr;
+            }
+          } else if (str[currentPos] === '"') {
+            let stringStart = currentPos + 1;
+            let stringEnd = stringStart;
+            while (stringEnd < str.length) {
+              if (str[stringEnd] === '"' && str[stringEnd - 1] !== "\\") {
+                break;
+              }
+              stringEnd++;
+            }
+            if (stringEnd >= str.length) {
+              console.error("[DEBUG] Unterminated string value");
+              valueEnd = str.length;
+              break;
+            }
+            value = str.substring(stringStart, stringEnd);
+            valueEnd = stringEnd + 1;
+            console.log(`[DEBUG] Found string parameter: ${paramName} = "${value}"`);
+          } else {
+            let valueStart = currentPos;
+            let valueEndPos = valueStart;
+            while (valueEndPos < str.length && str[valueEndPos] !== ",") {
+              valueEndPos++;
+            }
+            const rawValue = str.substring(valueStart, valueEndPos).trim();
+            valueEnd = valueEndPos;
+            if (rawValue === "true" || rawValue === "True") {
+              value = true;
+            } else if (rawValue === "false" || rawValue === "False") {
+              value = false;
+            } else if (rawValue === "null" || rawValue === "None") {
+              value = null;
+            } else if (!isNaN(Number(rawValue)) && rawValue !== "") {
+              value = Number(rawValue);
+            } else {
+              value = rawValue;
+            }
+            console.log(`[DEBUG] Found unquoted parameter: ${paramName} = ${rawValue} (parsed as ${typeof value})`);
+          }
+          params[paramName] = value;
+          currentPos = valueEnd;
         }
-      }
-      console.log("[DEBUG] Final parsed arguments:", args);
-      return args;
+        return params;
+      };
+      const result = extractParameters(argsString);
+      console.log("[DEBUG] Final parsed arguments:", result);
+      return result;
     };
     const renderChart = (chartType, args, key) => {
       console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
+      const CHART_COLORS = {
+        primary: "#3b82f6",
+        // blue-500
+        secondary: "#10b981",
+        // green-500
+        accent: "#f59e0b",
+        // amber-500
+        danger: "#ef4444",
+        // red-500
+        violet: "#8b5cf6",
+        // violet-500
+        cyan: "#06b6d4",
+        // cyan-500
+        orange: "#f97316",
+        // orange-500
+        indigo: "#6366f1"
+        // indigo-500
+      };
+      const CHART_COLOR_PALETTE = Object.values(CHART_COLORS);
+      const CHART_STYLES = {
+        grid: {
+          strokeDasharray: "3 3",
+          stroke: "#e5e7eb"
+          // gray-300
+        },
+        axis: {
+          tick: { fontSize: 12, fill: "#4b5563" },
+          // gray-600
+          stroke: "#9ca3af"
+          // gray-400
+        },
+        margin: { top: 10, right: 30, left: 20, bottom: 40 },
+        barRadius: [4, 4, 0, 0]
+        // Top corners rounded
+      };
+      const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+          return /* @__PURE__ */ jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
+            payload.map((entry, index) => /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", style: { color: entry.color }, children: [
+              entry.name,
+              ": ",
+              typeof entry.value === "number" ? formatNumber(entry.value) : entry.value,
+              args.unit || ""
+            ] }, index))
+          ] });
+        }
+        return null;
+      };
+      const ChartWrapper = ({ children, title }) => /* @__PURE__ */ jsxs("div", { className: "my-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: title }),
+        children
+      ] });
       switch (chartType) {
         case "create_gauge_chart":
           console.log("[DEBUG] Rendering gauge chart");
-          return /* @__PURE__ */ jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "h-64 w-full flex justify-center", children: /* @__PURE__ */ jsx(
             GaugeChart,
             {
               value: args.value || 0,
               min: args.min_value || 0,
               max: args.max_value || 100,
               target: args.target,
-              label: args.title || "",
+              label: args.label || "",
               unit: args.unit || "",
               thresholds: args.thresholds,
               className: "w-full max-w-sm"
             }
-          ) }, `gauge-${key}`);
+          ) }) }, `gauge-${key}`);
         case "create_bar_chart":
           console.log("[DEBUG] Rendering bar chart");
           if (!args.data || !args.x_field || !args.y_field) {
             console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
             /* @__PURE__ */ jsx(
-              BarChart,
+              XAxis,
               {
-                data: args.data,
-                bars: [{
-                  dataKey: args.y_field,
-                  fill: args.color || "#3b82f6",
-                  labelList: args.show_values
-                }],
-                xAxisDataKey: args.x_field,
-                className: "h-64",
-                showLegend: false
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
               }
             ),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `bar-${key}`);
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: args.y_field,
+                fill: args.color || CHART_COLORS.primary,
+                radius: CHART_STYLES.barRadius
+              }
+            )
+          ] }) }) }) }, `bar-${key}`);
         case "create_line_chart":
           console.log("[DEBUG] Rendering line chart");
           if (!args.data || !args.x_field || !args.y_field) {
             console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: {
-            height: args.height || 256,
-            width: args.width || "100%"
-          }, children: [
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
             /* @__PURE__ */ jsx(
-              LineChart,
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
               {
-                data: args.data,
-                lines: [{
-                  dataKey: args.y_field,
-                  stroke: "#3b82f6",
-                  strokeWidth: 2
-                }],
-                xAxisDataKey: args.x_field,
-                className: "h-full",
-                showLegend: false
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
               }
             ),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `line-${key}`);
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `line-${key}`);
         case "create_pie_chart":
           console.log("[DEBUG] Rendering pie chart");
           if (!args.data || !args.label_field || !args.value_field) {
@@ -25215,16 +25402,14 @@ var AIAgentView = () => {
             value: item[args.value_field]
           }));
           console.log("[DEBUG] Pie chart data transformed:", pieData);
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
-            /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsx(
-              PieChart4,
-              {
-                data: pieData,
-                showPercentages: args.show_percentages || false
-              }
-            ) })
-          ] }, `pie-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md mx-auto", children: /* @__PURE__ */ jsx(
+            PieChart4,
+            {
+              data: pieData,
+              showPercentages: args.show_percentages || false,
+              colors: CHART_COLOR_PALETTE
+            }
+          ) }) }, `pie-${key}`);
         case "create_comparison_table":
           console.log("[DEBUG] Rendering comparison table");
           if (!args.data) {
@@ -25241,27 +25426,24 @@ var AIAgentView = () => {
               return args.sort_descending === false ? comparison : -comparison;
             });
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
-            /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
-              /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: `px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
-                  children: col
-                },
-                col
-              )) }) }),
-              /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsx(
-                "td",
-                {
-                  className: `px-4 py-2 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
-                  children: row[col]
-                },
-                col
-              )) }, rowIdx)) })
-            ] })
-          ] }, `table-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+            /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: `px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
+                children: col
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: `px-6 py-4 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
+                children: typeof row[col] === "number" ? formatNumber(row[col]) : row[col]
+              },
+              col
+            )) }, rowIdx)) })
+          ] }) }) }, `table-${key}`);
         case "create_multi_line_chart":
           console.log("[DEBUG] Rendering multi-line chart");
           if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
@@ -25273,30 +25455,44 @@ var AIAgentView = () => {
             });
             return null;
           }
-          const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, {}),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              args.y_fields.map((field, index) => /* @__PURE__ */ jsx(
-                Line,
-                {
-                  type: "monotone",
-                  dataKey: field,
-                  stroke: colors[index % colors.length],
-                  strokeWidth: 2,
-                  name: args.legend[index] || field,
-                  dot: { r: 4 },
-                  activeDot: { r: 6 }
-                },
-                field
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `multi-line-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.y_fields.map((field, index) => /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: "monotone",
+                dataKey: field,
+                stroke: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                strokeWidth: 2,
+                name: args.legend[index] || field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              },
+              field
+            ))
+          ] }) }) }) }, `multi-line-${key}`);
         case "create_stacked_bar_chart":
           console.log("[DEBUG] Rendering stacked bar chart");
           if (!args.data || !args.x_field || !args.stack_fields) {
@@ -25307,27 +25503,42 @@ var AIAgentView = () => {
             });
             return null;
           }
-          const stackColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, {}),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              args.stack_fields.map((field, index) => /* @__PURE__ */ jsx(
-                Bar,
-                {
-                  dataKey: field,
-                  stackId: "stack",
-                  fill: stackColors[index % stackColors.length],
-                  name: field
-                },
-                field
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `stacked-bar-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.stack_fields.map((field, index) => /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: field,
+                stackId: "stack",
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                name: field,
+                radius: index === args.stack_fields.length - 1 ? CHART_STYLES.barRadius : void 0
+              },
+              field
+            ))
+          ] }) }) }) }, `stacked-bar-${key}`);
         case "create_dual_axis_chart":
           console.log("[DEBUG] Rendering dual-axis chart");
           if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
@@ -25339,19 +25550,67 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", orientation: "left", label: { value: args.left_label || "", angle: -90, position: "insideLeft" } }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", label: { value: args.right_label || "", angle: 90, position: "insideRight" } }),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: args.left_y_field, fill: "#3b82f6", name: args.left_label || args.left_y_field }),
-              /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: args.right_y_field, stroke: "#ef4444", strokeWidth: 2, name: args.right_label || args.right_y_field })
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `dual-axis-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                label: { value: args.left_label || "", angle: -90, position: "insideLeft" },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                label: { value: args.right_label || "", angle: 90, position: "insideRight" },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.left_y_field,
+                fill: CHART_COLORS.primary,
+                name: args.left_label || args.left_y_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.right_y_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 2,
+                name: args.right_label || args.right_y_field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `dual-axis-${key}`);
         case "create_scatter_plot":
           console.log("[DEBUG] Rendering scatter plot");
           if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
@@ -25371,26 +25630,50 @@ var AIAgentView = () => {
             acc[group].push(item);
             return acc;
           }, {});
-          const scatterColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ScatterChart, { children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field, type: "number", name: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, { dataKey: args.y_field, type: "number", name: args.y_field }),
-              /* @__PURE__ */ jsx(Tooltip, { cursor: { strokeDasharray: "3 3" } }),
-              /* @__PURE__ */ jsx(Legend, {}),
-              Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsx(
-                Scatter,
-                {
-                  name: group,
-                  data,
-                  fill: scatterColors[index % scatterColors.length]
-                },
-                group
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `scatter-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                type: "number",
+                name: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                dataKey: args.y_field,
+                type: "number",
+                name: args.y_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                cursor: { strokeDasharray: "3 3" },
+                content: /* @__PURE__ */ jsx(CustomTooltip, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsx(
+              Scatter,
+              {
+                name: group,
+                data,
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length]
+              },
+              group
+            ))
+          ] }) }) }) }, `scatter-${key}`);
         case "create_combo_chart":
           console.log("[DEBUG] Rendering combo chart");
           if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
@@ -25402,19 +25685,65 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", orientation: "left" }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right" }),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: args.bar_field, fill: "#3b82f6", name: args.bar_field }),
-              /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: args.line_field, stroke: "#ef4444", strokeWidth: 2, name: args.line_field })
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `combo-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.bar_field,
+                fill: CHART_COLORS.primary,
+                name: args.bar_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.line_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 2,
+                name: args.line_field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `combo-${key}`);
         case "create_area_chart":
           console.log("[DEBUG] Rendering area chart");
           if (!args.data || !args.x_field || !args.y_field) {
@@ -25425,27 +25754,48 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, {}),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(
-                Area,
-                {
-                  type: "monotone",
-                  dataKey: args.y_field,
-                  stroke: "#3b82f6",
-                  fill: args.fill ? "#3b82f6" : "none",
-                  fillOpacity: args.fill ? 0.6 : 0,
-                  name: args.y_field
-                }
-              )
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "colorGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: CHART_COLORS.primary, stopOpacity: 0.8 }),
+              /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: CHART_COLORS.primary, stopOpacity: 0.1 })
             ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `area-${key}`);
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Area,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                fill: args.fill !== false ? "url(#colorGradient)" : "none",
+                name: args.y_field,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `area-${key}`);
         default:
           console.warn(`Unknown chart type: ${chartType}`);
           return null;