@truefoundry/trueforge-ui 0.3.0-rc.2 → 0.3.0-rc.4

package/dist/chunk-5I2COQNL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/agent-details/AgentMetricChart.tsx"],"sourcesContent":["'use client';\n\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Tooltip,\n  type ChartData,\n  type ChartOptions,\n} from 'chart.js';\nimport { useMemo, type ComponentType } from 'react';\nimport { Line } from 'react-chartjs-2';\n\nimport { useThemeMode } from '../../theme/SlotsProvider.js';\nimport { formatCostUsd, formatDurationMs } from '../../utils/sessionDisplayFormat.js';\nimport type { AgentMetricChartProps } from './types.js';\n\nChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Legend, Tooltip);\n\nconst LIGHT_COLORS = ['#2563eb', '#16a34a', '#9333ea', '#ea580c', '#0891b2'];\nconst DARK_COLORS = ['#60a5fa', '#4ade80', '#c084fc', '#fb923c', '#22d3ee'];\nconst numberFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 });\nconst timestampFormatter = new Intl.DateTimeFormat(undefined, {\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: '2-digit',\n});\n\nfunction formatValue(value: number, unit: string): string {\n  if (unit === '$') return formatCostUsd(value);\n  if (unit === 'ms') return formatDurationMs(value);\n  return `${numberFormatter.format(value)}${unit === 'count' || unit.length === 0 ? '' : ` ${unit}`}`;\n}\n\nfunction formatTimestamp(timestamp: string): string {\n  const date = new Date(timestamp);\n  return Number.isNaN(date.getTime()) ? timestamp : timestampFormatter.format(date);\n}\n\nexport function AgentMetricChart({ graph, definition, error }: AgentMetricChartProps) {\n  const mode = useThemeMode();\n  const colors = mode === 'dark' ? DARK_COLORS : LIGHT_COLORS;\n  const axisColor = mode === 'dark' ? '#a1a1aa' : '#71717a';\n  const gridColor = mode === 'dark' ? '#27272a' : '#e4e4e7';\n  const labels = useMemo(\n    () =>\n      graph == null\n        ? []\n        : [...new Set(graph.graphLines.flatMap(line => line.values.map(point => point.timestamp)))].sort(),\n    [graph],\n  );\n  const data = useMemo<ChartData<'line', Array<number | null>, string>>(\n    () => ({\n      labels: labels.map(formatTimestamp),\n      datasets:\n        graph?.graphLines.map((line, index) => {\n          const valuesByTimestamp = new Map(line.values.map(point => [point.timestamp, point.value]));\n          const color = colors[index % colors.length];\n          return {\n            label: line.name,\n            data: labels.map(timestamp => valuesByTimestamp.get(timestamp) ?? null),\n            borderColor: color,\n            backgroundColor: color,\n            pointRadius: 2,\n            pointHoverRadius: 4,\n            borderWidth: 2,\n            tension: 0.25,\n            spanGaps: true,\n          };\n        }) ?? [],\n    }),\n    [colors, graph, labels],\n  );\n  const options = useMemo<ChartOptions<'line'>>(\n    () => ({\n      responsive: true,\n      maintainAspectRatio: false,\n      animation: false,\n      interaction: { intersect: false, mode: 'index' },\n      plugins: {\n        legend: {\n          display: (graph?.graphLines.length ?? 0) > 1,\n          labels: { color: axisColor, boxWidth: 10, boxHeight: 2 },\n        },\n        tooltip: {\n          callbacks: {\n            label: context => {\n              const value = context.parsed.y;\n              return `${context.dataset.label ?? ''}: ${value == null ? '—' : formatValue(value, graph?.unit ?? '')}`;\n            },\n          },\n        },\n      },\n      scales: {\n        x: {\n          grid: { display: false },\n          border: { color: gridColor },\n          ticks: { color: axisColor, maxRotation: 0, autoSkip: true, maxTicksLimit: 8 },\n        },\n        y: {\n          beginAtZero: true,\n          grid: { color: gridColor },\n          border: { display: false },\n          ticks: {\n            color: axisColor,\n            callback: value => formatValue(Number(value), graph?.unit ?? ''),\n          },\n        },\n      },\n    }),\n    [axisColor, graph, gridColor],\n  );\n  const hasData = graph?.graphLines.some(line => line.values.length > 0) === true;\n\n  return (\n    <section className=\"min-w-0 rounded-lg border border-border bg-card-bg p-4\" data-slot=\"agent-metric-chart\">\n      <h3 className=\"text-sm font-semibold text-text-primary\">{graph?.displayName ?? definition.displayName}</h3>\n      <p className=\"mt-1 text-xs text-text-secondary\">{graph?.description ?? definition.description}</p>\n      <div className=\"mt-4 h-64\">\n        {error != null ? (\n          <div className=\"flex h-full items-center justify-center text-sm text-failure-bg\">{error}</div>\n        ) : hasData ? (\n          <Line data={data} options={options} />\n        ) : (\n          <div className=\"flex h-full items-center justify-center text-sm text-text-secondary\">No data</div>\n        )}\n      </div>\n    </section>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentMetricChart: ComponentType<AgentMetricChartProps>;\n  }\n}\n"],"mappings":"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","names":[]}