@nethru/kit 1.1.9 → 1.1.10

package/dist/components/charts/Chart.js

@@ -220,7 +220,8 @@ function toOptions(props, legendLimitEnabled, handleLegendItemClick) {
         autoRotation: false,
         format: xAxisLabelFormat ? `{value:${xAxisLabelFormat}}` : undefined,
         style: {
-          color: grey[600]
+          color: grey[600],
+          fontSize: '12px'
         }
       },
       categories: categorize ? categories : undefined,
@@ -278,7 +279,12 @@ function toOptions(props, legendLimitEnabled, handleLegendItemClick) {
     legend: {
       align: legendAlign,
       verticalAlign: 'top',
-      enabled: showLegend
+      enabled: showLegend,
+      itemStyle: {
+        fontFamily: fontFamily,
+        fontSize: '13px',
+        fontWeight: '300'
+      }
     },
     tooltip: {
       followPointer: false,
@@ -346,6 +352,7 @@ const tooltipFormatter = (_this, props) => {
 function formatDate(data, format) {
   return Highcharts.dateFormat(format, data.getTime() - data.getTimezoneOffset() * 60000);
 }
+export const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
 const ZIndex = {
   AVERAGE_LINE_BASE: 10,
   COMPARE_CHART_BASE: 5,

package/dist/components/charts/ColumnChart.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import Highcharts from 'highcharts';
 import HighchartsReactModule from 'highcharts-react-official';
 import 'highcharts/modules/pattern-fill.js';
+import { fontFamily } from "./Chart";
 
 // Handle both ES module and CommonJS exports
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,6 +58,7 @@ const ColumnChart = ({
         labels: {
           style: {
             color: '#777',
+            fontSize: '12px',
             fontFamily: fontFamily,
             fontWeight: '400'
           }
@@ -104,7 +106,6 @@ const ColumnChart = ({
   });
 };
 export default ColumnChart;
-const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
 const styles = {
   chartWrapper: {
     background: 'transparent',

package/dist/components/charts/PeriodCompareChart.js

@@ -0,0 +1,49 @@
+import React, { useMemo } from "react";
+import { blue } from "@nethru/ui/base/colors";
+import Chart from "./Chart";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PeriodCompareChart({
+  metrics,
+  records,
+  averages,
+  isDaily = false,
+  xPlotIndex,
+  xAxisTickInterval,
+  yAxisLabelEnabled = false,
+  legendLimit = 3,
+  colors = defaultColors,
+  ...props
+}) {
+  const yAxisPlotLines = useMemo(() => {
+    return averages.map((average, index) => {
+      return {
+        ...average,
+        color: index > 0 ? colors[index][0] : colors[index],
+        labelColor: 'black',
+        labelAlign: index === 1 ? 'right' : 'left'
+      };
+    });
+  }, [averages]);
+  const tooltip = useMemo(() => ({
+    headerVisible: !isDaily,
+    dateFormat: isDaily ? '' : '%H:%M',
+    legendColors: [colors[0], blue[300]]
+  }), [isDaily]);
+  return /*#__PURE__*/_jsx(Chart, {
+    type: "area",
+    metrics: metrics,
+    records: records,
+    categorize: true,
+    xAxisType: "datetime",
+    xAxisLabelFormat: isDaily ? '%m-%d' : '%H:%M',
+    xPlotIndex: xPlotIndex,
+    xAxisTickInterval: xAxisTickInterval,
+    yAxisPlotLines: yAxisPlotLines,
+    yAxisLabelEnabled: yAxisLabelEnabled,
+    legendLimit: legendLimit,
+    colors: colors,
+    tooltip: tooltip,
+    ...props
+  });
+}
+const defaultColors = [blue[500], [blue[200], blue[100]]];

package/dist/components/charts/PieChart.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import Highcharts from 'highcharts';
 import HighchartsReactModule from 'highcharts-react-official';
 import 'highcharts/modules/pattern-fill.js';
+import { fontFamily } from "./Chart";
 
 // Handle both ES module and CommonJS exports
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,7 +28,13 @@ const PieChart = ({
         width: width,
         height: height,
         style: {
-          fontFamily: fontFamily
+          fontFamily: fontFamily,
+          overflow: 'visible'
+        },
+        events: {
+          load() {
+            this.container.parentElement.style.overflow = 'visible';
+          }
         }
       },
       title: {
@@ -107,7 +114,6 @@ const PieChart = ({
   });
 };
 export default PieChart;
-const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
 const styles = {
   chartWrapper: {
     background: 'transparent',

package/dist/components/chat/content/ToolContent.js

@@ -1,10 +1,13 @@
 import React, { useMemo } from "react";
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { useToolContext } from "../contexts/ToolContext";
 import ColumnChartContent from "./wisecollector/ColumnChartContent";
 import StackedAreaChartContent from "./wisecollector/StackedAreaChartContent";
 import PieChartContent from "./wisecollector/PieChartContent";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PeriodCompareChartContent from "./wisecollector/PeriodCompareChartContent";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const summaryToolNames = ['query-summary-by-container-id', 'query-summary-by-task-id'];
+const trendToolNames = ['query-trend-by-container-id', 'query-trend-by-task-id'];
 export default function ToolContent() {
   const {
     kinds,
@@ -12,14 +15,23 @@ export default function ToolContent() {
   } = useToolContext();
   const hasCompare = kinds.includes('COMPARE');
   const jsonTools = [];
-  const querySummaryTools = useMemo(() => tools.filter(t => t.name === 'query-summary-by-task-id'), [tools]);
-  const queryTrendTools = useMemo(() => groupBySamePeriod(tools), [tools]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [hasCompare && querySummaryTools.length >= 2 ? /*#__PURE__*/_jsx(ColumnChartContent, {
-      tools: querySummaryTools
-    }) : querySummaryTools.map((tool, index) => /*#__PURE__*/_jsx(PieChartContent, {
+  const summaryTools = useMemo(() => tools.filter(t => summaryToolNames.includes(t.name)), [tools]);
+  const {
+    periodTrendTools,
+    trendTools
+  } = useMemo(() => groupTools(hasCompare, tools), [tools]);
+  const toolCount = useMemo(() => summaryTools.length + periodTrendTools.length + trendTools.length + jsonTools.length, [summaryTools, periodTrendTools, trendTools, jsonTools]);
+  console.log(summaryTools, periodTrendTools, trendTools, jsonTools);
+  return /*#__PURE__*/_jsxs(Stack, {
+    gap: 5,
+    marginBottom: toolCount > 0 ? 5 : 0,
+    children: [hasCompare && summaryTools.length >= 2 ? /*#__PURE__*/_jsx(ColumnChartContent, {
+      tools: summaryTools
+    }) : summaryTools.map((tool, index) => /*#__PURE__*/_jsx(PieChartContent, {
       tool: tool
-    }, index)), queryTrendTools.map((tools, index1) => {
+    }, index)), periodTrendTools.map((tools, index) => /*#__PURE__*/_jsx(PeriodCompareChartContent, {
+      tools: tools
+    }, index)), trendTools.map((tools, index1) => {
       if (hasCompare && tools.length >= 2) return /*#__PURE__*/_jsx(StackedAreaChartContent, {
         tools: tools
       }, index1);else {
@@ -43,21 +55,40 @@ export default function ToolContent() {
     }, index))]
   });
 }
-function groupBySamePeriod(tools) {
+function groupTools(hasCompare, tools) {
+  const periodKey = t => `${t.arguments.from}~${t.arguments.to}`;
+  const idMap = new Map();
   const periodMap = new Map();
-  tools.filter(t => t.name === 'query-trend-by-task-id').forEach(tool => {
-    const period = key(tool);
-    if (!periodMap.has(period)) periodMap.set(period, []);
-    periodMap.get(period).push(tool);
-  });
-  return Array.from(periodMap.values());
-  function key(tool) {
-    const {
-      from,
-      to
-    } = tool.arguments;
-    return `${from}-${to}`;
+  const used = new Set();
+  const filtered = tools.filter(t => trendToolNames.includes(t.name));
+  const periodTrendTools = [];
+  if (hasCompare) {
+    for (const tool of filtered) {
+      const id = tool.arguments.containerId ?? tool.arguments.taskId;
+      if (!idMap.has(id)) idMap.set(id, []);
+      idMap.get(id).push(tool);
+    }
+    for (const [id, items] of idMap.entries()) {
+      if (!id) continue;
+      if (items.length < 2) continue;
+      const distinctPeriods = new Set(items.map(periodKey));
+      if (distinctPeriods.size < 2) continue;
+      periodTrendTools.push(items);
+      for (const item of items) {
+        used.add(item);
+      }
+    }
+  }
+  for (const tool of filtered) {
+    if (used.has(tool)) continue;
+    const key = periodKey(tool);
+    if (!periodMap.has(key)) periodMap.set(key, []);
+    periodMap.get(key).push(tool);
   }
+  return {
+    periodTrendTools,
+    trendTools: Array.from(periodMap.values())
+  };
 }
 const styles = {
   contentTool: {

package/dist/components/chat/content/wisecollector/ColumnChartContent.js

@@ -7,7 +7,7 @@ const ColumnChartContent = ({
   tools = []
 }) => {
   const {
-    configMap
+    getName
   } = useToolContext();
   return /*#__PURE__*/_jsx(_Fragment, {
     children: tools.length > 0 && /*#__PURE__*/_jsx("div", {
@@ -17,25 +17,29 @@ const ColumnChartContent = ({
         marginBottom: '30px'
       },
       children: /*#__PURE__*/_jsx(ColumnChart, {
-        data: toData(tools, configMap)
+        data: toData(tools, getName)
       })
     })
   });
 };
-function toData(tools, configMap) {
+function toData(tools, getName) {
   const items = [];
-  const hasConvert = tools.some(content => content.result?.result[0]?.metric?.filter !== undefined);
-  tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(content => {
+  const hasConvert = tools.some(tool => {
+    const result = tool?.result?.result;
+    return Array.isArray(result) ? result[0]?.metric?.filter !== undefined : result?.filter !== undefined;
+  });
+  tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(tool => {
     const {
+      containerId,
       taskId,
       from,
       to
-    } = content.arguments;
+    } = tool.arguments;
     const item = {
-      name: `<b>${configMap.get(taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
+      name: `<b>${getName(containerId, taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
       data: []
     };
-    const result = reduce(content.result.result);
+    const result = Array.isArray(tool.result.result) ? reduce(tool.result.result) : tool.result.result;
     item.data.push(result.input);
     item.data.push(result.output);
     if (hasConvert) item.data.push(result.filter);

package/dist/components/chat/content/wisecollector/PeriodCompareChartContent.js

@@ -0,0 +1,117 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import { formatDateRange, isOneDay } from "../../../../js/dateHelper";
+import PeriodCompareChart from "../../../charts/PeriodCompareChart";
+import { useToolContext } from "../../contexts/ToolContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PeriodCompareChartContent({
+  tools
+}) {
+  const chartData = useMemo(() => toChartData(tools), [tools]);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Title, {
+      tools: tools
+    }), /*#__PURE__*/_jsx(PeriodCompareChart, {
+      ...chartData,
+      height: 220
+    })]
+  });
+}
+function Title({
+  tools
+}) {
+  const {
+    getName
+  } = useToolContext();
+  const {
+    containerId,
+    taskId
+  } = tools[0].arguments;
+  return /*#__PURE__*/_jsx("div", {
+    style: styles.title,
+    children: getName(containerId, taskId)
+  });
+}
+function toChartData(tools) {
+  const current = toSeries(tools[0]);
+  const prev = toSeries(tools[1]);
+  const currentSum = sum(current.records, 'output');
+  const records = prev.records.map((record, index) => ({
+    time: current.records[index]?.time ?? record.time,
+    diffTime: record.time,
+    metric: {
+      current: index < current.records.length ? current.records[index].metric.output : undefined,
+      prev: record.metric.output
+    }
+  }));
+  const averages = [{
+    label: `${current.unit}분 평균 (${current.period})`,
+    value: current.records.length ? currentSum / current.records.length : null
+  }, {
+    label: `${current.unit}분 평균 (${prev.period})`,
+    value: prev.records.length ? sum(prev.records, 'output') / prev.records.length : null
+  }];
+  return {
+    dimension: 'time',
+    metrics: [{
+      metric: 'current',
+      chartType: 'line'
+    }, {
+      metric: 'prev',
+      chartType: 'gradient'
+    }],
+    metas: {
+      time: {
+        name: '일시',
+        type: 'DATE'
+      },
+      current: {
+        name: current.period,
+        type: 'NUMBER',
+        pointerNames: current.isDaily && getPointerNames(current.records)
+      },
+      prev: {
+        name: prev.period,
+        type: 'NUMBER',
+        pointerNames: current.isDaily && getPointerNames(prev.records)
+      }
+    },
+    records: records,
+    averages: averages,
+    isDaily: current.isDaily,
+    xPlotIndex: current.records.length - 1,
+    secondaryXAxis: records.map(r => r.diffTime),
+    opacity: 1
+  };
+}
+function toSeries(tool) {
+  if (!tool) return {
+    records: [],
+    period: '',
+    unit: 30
+  };
+  const {
+    from,
+    to,
+    unit
+  } = tool.arguments;
+  return {
+    records: tool.result.result,
+    period: formatDateRange(from, to),
+    unit: Number(unit),
+    isDaily: !isOneDay(from, to)
+  };
+}
+function sum(records, field) {
+  return records.map(record => record.metric[field]).reduce((accumulator, current) => accumulator + current, 0);
+}
+function getPointerNames(records) {
+  return records.map(record => dayjs(record.time).format('YYYY-MM-DD'));
+}
+const styles = {
+  title: {
+    fontSize: '14px',
+    fontWeight: '500',
+    textAlign: 'center'
+  }
+};

package/dist/components/chat/content/wisecollector/PieChartContent.js

@@ -13,11 +13,7 @@ const PieChartContent = ({
     children: [/*#__PURE__*/_jsx(Title, {
       tool: tool
     }), /*#__PURE__*/_jsx("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        marginBottom: '30px'
-      },
+      style: styles.container,
       children: toData(tool).map((item, index) => /*#__PURE__*/_jsx(PieChart, {
         data: item,
         width: width
@@ -29,33 +25,41 @@ const Title = ({
   tool
 }) => {
   const {
-    configMap
+    getName
   } = useToolContext();
   const {
+    containerId,
     taskId,
     from,
     to
   } = tool.arguments;
   return /*#__PURE__*/_jsxs("div", {
-    style: titleStyles,
+    style: styles.title,
     children: [/*#__PURE__*/_jsx("div", {
-      children: configMap.get(taskId)
+      children: getName(containerId, taskId)
     }), /*#__PURE__*/_jsxs("div", {
-      style: subtitleStyles,
+      style: styles.subtitle,
       children: ["(", formatDateRange(from, to), ")"]
     })]
   });
 };
 function toData(tool) {
   const items = [];
-  tool?.result?.result?.forEach(agent => {
+  const result = tool?.result?.result;
+  if (Array.isArray(result)) {
+    result.forEach(row => {
+      add(row.metric);
+    });
+  } else add(result);
+  return items;
+  function add(row, name) {
     const {
       output,
       filter,
       error
-    } = agent.metric;
+    } = row;
     const item = {
-      name: agent.name,
+      name: name ?? row.name,
       metrics: []
     };
     item.metrics.push({
@@ -74,16 +78,22 @@ function toData(tool) {
       value: error
     });
     items.push(item);
-  });
-  return items;
+  }
 }
-const titleStyles = {
-  fontSize: '14px',
-  fontWeight: '500',
-  textAlign: 'center'
-};
-const subtitleStyles = {
-  fontSize: '10px',
-  fontWeight: '100'
+const styles = {
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginBottom: '30px'
+  },
+  title: {
+    fontSize: '14px',
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  subtitle: {
+    fontSize: '10px',
+    fontWeight: '100'
+  }
 };
 export default PieChartContent;

package/dist/components/chat/content/wisecollector/StackedAreaChartContent.js

@@ -7,11 +7,11 @@ export default function StackedAreaChartContent({
   tools
 }) {
   const {
-    configMap
+    getName
   } = useToolContext();
   return /*#__PURE__*/_jsx("div", {
     children: /*#__PURE__*/_jsx(StackedAreaTrendChart, {
-      metrics: toMetrics(tools, configMap),
+      metrics: toMetrics(tools, getName),
       records: fillRecords(tools, toRecords(tools)),
       isDaily: isDaily(tools),
       xPlotIndex: xPlotIndex(tools),
@@ -20,10 +20,10 @@ export default function StackedAreaChartContent({
     })
   });
 }
-function toMetrics(tools, configMap) {
+function toMetrics(tools, getName) {
   return tools.map(tool => ({
     id: tool.arguments.taskId,
-    name: configMap.get(tool.arguments.taskId),
+    name: getName(tool.arguments.containerId, tool.arguments.taskId),
     type: 'NUMBER'
   }));
 }

package/dist/components/chat/contexts/ToolContext.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useCallback, useContext, useMemo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ToolContext = /*#__PURE__*/createContext();
 export function ToolContextProvider({
@@ -7,12 +7,18 @@ export function ToolContextProvider({
 }) {
   const kinds = useMemo(() => message.kinds ?? [], [message]);
   const tools = useMemo(() => message.content.filter(c => c.type === 'tool'), [message]);
-  const configMap = useMemo(() => makeTaskConfigs(tools), [tools]);
+  const containerConfigMap = useMemo(() => makeContainerConfigs(tools), [tools]);
+  const taskConfigMap = useMemo(() => makeTaskConfigs(tools), [tools]);
+  const getName = useCallback((containerId, taskId) => {
+    return containerConfigMap.get(containerId) || taskConfigMap.get(taskId);
+  }, [containerConfigMap, taskConfigMap]);
   return /*#__PURE__*/_jsx(ToolContext.Provider, {
     value: {
       kinds: kinds,
       tools,
-      configMap
+      getName,
+      containerConfigMap,
+      taskConfigMap
     },
     children: children
   });
@@ -20,6 +26,15 @@ export function ToolContextProvider({
 export function useToolContext() {
   return useContext(ToolContext);
 }
+function makeContainerConfigs(tools) {
+  const map = new Map();
+  tools.filter(t => t.name === 'search-container-by-keyword').forEach(tool => {
+    tool.result?.result?.forEach(item => {
+      map.set(item.id, item.name);
+    });
+  });
+  return map;
+}
 function makeTaskConfigs(tools) {
   const map = new Map();
   tools.filter(t => t.name === 'search-task-by-keyword').forEach(tool => {

package/dist/components/chat/mock.js

@@ -1,3 +1,22 @@
+const mockSearchContainerByKeyword = {
+  "type": "tool",
+  "name": "search-container-by-keyword",
+  "arguments": {
+    "keyword": "와이즈컬렉터3"
+  },
+  "result": {
+    "code": "SUCCESS",
+    "message": "Found 1 container(s) matching keyword: '와이즈컬렉터3'",
+    "result": [{
+      "id": "00001",
+      "type": "WEB",
+      "name": "와이즈컬렉터3",
+      "url": "https://wc.nethru.co.kr",
+      "loggingId": "wc3",
+      "disabled": false
+    }]
+  }
+};
 const mockSearchTaskByKeyword = {
   "type": "tool",
   "name": "search-task-by-keyword",
@@ -34,7 +53,28 @@ const mockSearchTaskByKeyword = {
     }]
   }
 };
-const mockSummary1 = {
+const mockCollectSummary1 = {
+  "type": "tool",
+  "name": "query-summary-by-container-id",
+  "arguments": {
+    "containerId": "00001",
+    "from": "20251222",
+    "to": "20251222"
+  },
+  "result": {
+    "code": "SUCCESS",
+    "message": "",
+    "result": {
+      "input": 185,
+      "output": 85,
+      "filter": 50,
+      "error": 50
+    },
+    "queryTimestamp": "2025-12-22 15:06:20",
+    "cacheValidUntil": "2025-12-22 15:07:20"
+  }
+};
+const mockConvertSummary1 = {
   "type": "tool",
   "name": "query-summary-by-task-id",
   "arguments": {
@@ -59,7 +99,7 @@ const mockSummary1 = {
     "cacheValidUntil": "2025-12-04 09:34:48"
   }
 };
-const mockSummary2 = {
+const mockConvertSummary2 = {
   "type": "tool",
   "name": "query-summary-by-task-id",
   "arguments": {
@@ -84,7 +124,408 @@ const mockSummary2 = {
     "cacheValidUntil": "2025-12-04 09:34:48"
   }
 };
-const mockTrendConvert1 = {
+const mockCollectTrend1 = {
+  "type": "tool",
+  "name": "query-trend-by-container-id",
+  "arguments": {
+    "containerId": "00001",
+    "from": "20251210",
+    "to": "20251210",
+    "unit": "30"
+  },
+  "result": {
+    "code": "SUCCESS",
+    "message": "",
+    "result": [{
+      "time": 1765292400000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765294200000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765296000000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765297800000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765299600000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765301400000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765303200000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765305000000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765306800000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765308600000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765310400000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765312200000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765314000000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765315800000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765317600000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765319400000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765321200000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765323000000,
+      "metric": {
+        "input": 22,
+        "output": 22,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765324800000,
+      "metric": {
+        "input": 16,
+        "output": 16,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765326600000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765328400000,
+      "metric": {
+        "input": 32,
+        "output": 32,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765330200000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765332000000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765333800000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765335600000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765337400000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765339200000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765341000000,
+      "metric": {
+        "input": 2,
+        "output": 2,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765342800000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765344600000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765346400000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765348200000,
+      "metric": {
+        "input": 3,
+        "output": 3,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765350000000,
+      "metric": {
+        "input": 0,
+        "output": 0,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765351800000,
+      "metric": {
+        "input": 144,
+        "output": 144,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765353600000,
+      "metric": {
+        "input": 240,
+        "output": 240,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765355400000,
+      "metric": {
+        "input": 451,
+        "output": 451,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765357200000,
+      "metric": {
+        "input": 559,
+        "output": 559,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765359000000,
+      "metric": {
+        "input": 88,
+        "output": 88,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765360800000,
+      "metric": {
+        "input": 26,
+        "output": 26,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765362600000,
+      "metric": {
+        "input": 112,
+        "output": 112,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765364400000,
+      "metric": {
+        "input": 86,
+        "output": 86,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765366200000,
+      "metric": {
+        "input": 568,
+        "output": 568,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765368000000,
+      "metric": {
+        "input": 623,
+        "output": 623,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765369800000,
+      "metric": {
+        "input": 593,
+        "output": 593,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765371600000,
+      "metric": {
+        "input": 415,
+        "output": 415,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765373400000,
+      "metric": {
+        "input": 449,
+        "output": 449,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765375200000,
+      "metric": {
+        "input": 168,
+        "output": 168,
+        "filter": 0,
+        "error": 0
+      }
+    }, {
+      "time": 1765377000000,
+      "metric": {
+        "input": 150,
+        "output": 150,
+        "filter": 0,
+        "error": 0
+      }
+    }],
+    "queryTimestamp": "2025-12-11 13:07:30",
+    "cacheValidUntil": "2025-12-11 13:08:30"
+  }
+};
+const mockConvertTrend1 = {
   "type": "tool",
   "name": "query-trend-by-task-id",
   "arguments": {
@@ -485,7 +926,7 @@ const mockTrendConvert1 = {
     "cacheValidUntil": "2025-12-11 13:08:30"
   }
 };
-const mockTrendConvert2 = {
+const mockConvertTrend2 = {
   "type": "tool",
   "name": "query-trend-by-task-id",
   "arguments": {
@@ -718,32 +1159,43 @@ const mockTrendConvert2 = {
     "cacheValidUntil": "2025-12-11 13:08:30"
   }
 };
+const sampleTable = {
+  "type": "text",
+  "value": "현재 등록된 컨테이너 목록은 아래와 같습니다 👇  \n\n| ID | 유형 | 이름 | URL | 활성화 여부 |\n|----|------|------|------|--------------|\n| 00001 | WEB | 와이즈컬렉터3 | [https://wc.nethru.co.kr](https://wc.nethru.co.kr) | ✅ 활성 |\n| 00003 | WEB | 넷스루 홈페이지 | [http://www.nethru.co.kr](http://www.nethru.co.kr) | ✅ 활성 |\n| 00004 | WEB | WC몰 | [https://wcmall.nethru.co.kr](https://wcmall.nethru.co.kr) | ✅ 활성 |\n| 00005 | WEB | Google Arts & Culture | [https://artsandculture.google.com](https://artsandculture.google.com) | ✅ 활성 |\n| 00006 | MOBILE | OmniNotes | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00007 | MOBILE | Plaid | [https://www.plaid.com](https://www.plaid.com) | ✅ 활성 |\n| 00008 | MOBILE | 안드로이드 샘플앱 | [http://www.androidtest.com](http://www.androidtest.com) | ✅ 활성 |\n| 00009 | MOBILE | 엄니노트 | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00026 | WEB | 신수민티스토리 | [https://nethoomru.tistory.com](https://nethoomru.tistory.com) | ✅ 활성 |\n| 00710 | WEB | solmin_test2 | [https://wc-solmin.tistory.com](https://wc-solmin.tistory.com) | ✅ 활성 |\n| 00711 | MOBILE | KB Pay | [https://kbpay.kbcard.com](https://kbpay.kbcard.com) | ✅ 활성 |\n| 00712 | MOBILE | OmniNotes2 | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00715 | WEB | test2 | [https://wc-solmin.tistory.com](https://wc-solmin.tistory.com) | ❌ 비활성 |\n| 00718 | MOBILE | iOS 샘플앱 | [http://www.iostest.com](http://www.iostest.com) | ✅ 활성 |\n| 00742 | MOBILE | 모바일 샘플앱 250903 (iOS 테스트 임시) | [http://www.androidtest.com](http://www.androidtest.com) | ✅ 활성 |\n| 00743 | MOBILE | 요기요 | [https://www.yogiyo.co.kr](https://www.yogiyo.co.kr) | ✅ 활성 |\n| 00744 | MOBILE | 사내 TFT 예제 - KBPay | [https://www.tftex1.co.kr](https://www.tftex1.co.kr) | ✅ 활성 |\n| 00745 | MOBILE | OmniNotes-soomsoom | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00746 | MOBILE | 믿고걸_뉴스 | [http://www.worthskippingnews.com](http://www.worthskippingnews.com) | ✅ 활성 |\n| 00747 | WEB | KB 은행 | [https://www.kbstar.com](https://www.kbstar.com) | ✅ 활성 |\n| 00748 | MOBILE | test251127 | [http://www.test251127.com](http://www.test251127.com) | ❌ 비활성 |\n| 00764 | MOBILE | test749 | [http://w.a.com](http://w.a.com) | ❌ 비활성 |\n| 00765 | MOBILE | test750 | [http://www.test.com](http://www.test.com) | ❌ 비활성 |\n\n총 **24개 컨테이너**가 등록되어 있으며, 이 중 **18개는 활성화**, **6개는 비활성화** 상태입니다.  \n\n특정 컨테이너(예: “KB Pay”나 “와이즈컬렉터3”)의 **태스크 목록이나 설정 세부 정보**를 보고 싶으신가요?"
+};
+const sampleMarkdowns = {
+  type: "text",
+  value: "# Hello\n" + "https://example.org\n" + "```sh\n" + "# Code block\n" + "const func = () => {};\n" + "```\n" + "![Placeholder image](https://unsplash.it/600/400)\n" + "\n" + "~~strike~~ this\n" + "\n" + "[MIT](license) © [Titus Wormer](https://wooorm.com)\n" + "## TODO\n" + "\n" + "* [ ]  This\n" + "* [ ]  That\n" + "* [x]  The other\n" + "\n" + "|Fahrenheit|Celsius|Kelvin|\n" + "|---:|---:|---:|\n" + "|-459.67|-273.15|0|\n" + "|-40|-40|233.15|\n" + "|32|0|273.15|\n" + "|212|100|373.15|\n"
+};
 export const defaultMessages = [{
   role: 'assistant',
   // kinds: [],
-  //kinds: ['COMPARE'],
+  kinds: ['COMPARE'],
   content: [
-  // mockTrendConvert1,
+  // mockCollectSummary1,
+  // mockConvertSummary1,
+  // mockConvertSummary2,
+
+  // PeriodCompareChart
+  // mockCollectTrend1,
   // {
-  //     ...mockTrendConvert1,
+  //     ...mockCollectTrend1,
   //     "arguments": {
-  //         "taskId": "wc_convert_2",
-  //         "from": "20251210",
-  //         "to": "20251210",
+  //         "containerId": "00001",
+  //         "from": "20251209",
+  //         "to": "20251209",
   //         "unit": "30"
   //     }
   // },
-  // mockTrendConvert2,
-  // mockSummary1,
-  // mockSummary2,
-  // mockSearchTaskByKeyword,
+
+  // StackedAreadTrendChart
+  // mockConvertTrend1,
+  // mockConvertTrend1,
+
+  mockSearchContainerByKeyword, mockSearchTaskByKeyword,
+  // sampleTable,
+  // sampleMarkdowns,
   {
-    "type": "text",
-    "value": "현재 등록된 컨테이너 목록은 아래와 같습니다 👇  \n\n| ID | 유형 | 이름 | URL | 활성화 여부 |\n|----|------|------|------|--------------|\n| 00001 | WEB | 와이즈컬렉터3 | [https://wc.nethru.co.kr](https://wc.nethru.co.kr) | ✅ 활성 |\n| 00003 | WEB | 넷스루 홈페이지 | [http://www.nethru.co.kr](http://www.nethru.co.kr) | ✅ 활성 |\n| 00004 | WEB | WC몰 | [https://wcmall.nethru.co.kr](https://wcmall.nethru.co.kr) | ✅ 활성 |\n| 00005 | WEB | Google Arts & Culture | [https://artsandculture.google.com](https://artsandculture.google.com) | ✅ 활성 |\n| 00006 | MOBILE | OmniNotes | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00007 | MOBILE | Plaid | [https://www.plaid.com](https://www.plaid.com) | ✅ 활성 |\n| 00008 | MOBILE | 안드로이드 샘플앱 | [http://www.androidtest.com](http://www.androidtest.com) | ✅ 활성 |\n| 00009 | MOBILE | 엄니노트 | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00026 | WEB | 신수민티스토리 | [https://nethoomru.tistory.com](https://nethoomru.tistory.com) | ✅ 활성 |\n| 00710 | WEB | solmin_test2 | [https://wc-solmin.tistory.com](https://wc-solmin.tistory.com) | ✅ 활성 |\n| 00711 | MOBILE | KB Pay | [https://kbpay.kbcard.com](https://kbpay.kbcard.com) | ✅ 활성 |\n| 00712 | MOBILE | OmniNotes2 | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00715 | WEB | test2 | [https://wc-solmin.tistory.com](https://wc-solmin.tistory.com) | ❌ 비활성 |\n| 00718 | MOBILE | iOS 샘플앱 | [http://www.iostest.com](http://www.iostest.com) | ✅ 활성 |\n| 00742 | MOBILE | 모바일 샘플앱 250903 (iOS 테스트 임시) | [http://www.androidtest.com](http://www.androidtest.com) | ✅ 활성 |\n| 00743 | MOBILE | 요기요 | [https://www.yogiyo.co.kr](https://www.yogiyo.co.kr) | ✅ 활성 |\n| 00744 | MOBILE | 사내 TFT 예제 - KBPay | [https://www.tftex1.co.kr](https://www.tftex1.co.kr) | ✅ 활성 |\n| 00745 | MOBILE | OmniNotes-soomsoom | [https://www.omnintes.com](https://www.omnintes.com) | ✅ 활성 |\n| 00746 | MOBILE | 믿고걸_뉴스 | [http://www.worthskippingnews.com](http://www.worthskippingnews.com) | ✅ 활성 |\n| 00747 | WEB | KB 은행 | [https://www.kbstar.com](https://www.kbstar.com) | ✅ 활성 |\n| 00748 | MOBILE | test251127 | [http://www.test251127.com](http://www.test251127.com) | ❌ 비활성 |\n| 00764 | MOBILE | test749 | [http://w.a.com](http://w.a.com) | ❌ 비활성 |\n| 00765 | MOBILE | test750 | [http://www.test.com](http://www.test.com) | ❌ 비활성 |\n\n총 **24개 컨테이너**가 등록되어 있으며, 이 중 **18개는 활성화**, **6개는 비활성화** 상태입니다.  \n\n특정 컨테이너(예: “KB Pay”나 “와이즈컬렉터3”)의 **태스크 목록이나 설정 세부 정보**를 보고 싶으신가요?"
-  }, {
-    type: "text",
-    value: "# Hello\n" + "https://example.org\n" + "```sh\n" + "# Code block\n" + "const func = () => {};\n" + "```\n" + "![Placeholder image](https://unsplash.it/600/400)\n" + "\n" + "~~strike~~ this\n" + "\n" + "[MIT](license) © [Titus Wormer](https://wooorm.com)\n" + "## TODO\n" + "\n" + "* [ ]  This\n" + "* [ ]  That\n" + "* [x]  The other\n" + "\n" + "|Fahrenheit|Celsius|Kelvin|\n" + "|---:|---:|---:|\n" + "|-459.67|-273.15|0|\n" + "|-40|-40|233.15|\n" + "|32|0|273.15|\n" + "|212|100|373.15|\n"
-  }, {
     type: 'text',
     value: '안녕하세요! 저는 회사 내부 정보와 다양한 기능에 접근할 수 있는 AI 어시스턴트입니다.\n무엇을 도와드릴까요?'
   }]

package/dist/index.js

@@ -3,4 +3,5 @@ export { default as AiChat } from './components/chat/AiChat';
 export { ChatProvider, useChatContext } from './components/chat/contexts/ChatContext';
 export { default as PieChart } from './components/charts/PieChart';
 export { default as ColumnChart } from './components/charts/ColumnChart';
-export { default as StackedAreaTrendChart } from './components/charts/StackedAreaTrendChart';
+export { default as StackedAreaTrendChart } from './components/charts/StackedAreaTrendChart';
+export { default as PeriodCompareChart } from './components/charts/PeriodCompareChart';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/kit",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "A React component library by Nethru",
   "main": "dist/index.js",
   "homepage": ".",