larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/components/chat/tools/chat-chart.tsx

@@ -0,0 +1,554 @@
+'use client';
+
+import { useState, useRef, useCallback, useMemo } from 'react';
+import {
+  BarChart,
+  Bar,
+  AreaChart,
+  Area,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  ScatterChart,
+  Scatter,
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { Download, Copy, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { normalizeChartConfig, type ChartConfig, type SeriesConfig } from '@/lib/chat/chart-config';
+
+const CHART_COLORS = [
+  '#10b981', // green (emerald)
+  '#f97316', // orange
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#f59e0b', // amber/orange
+  '#0ea5e9', // sky blue
+  '#84cc16', // lime green
+  '#ea580c', // dark orange
+  '#2563eb', // dark blue
+];
+
+/* Gradient definitions for area / bar fills */
+function ChartGradients({ series }: { series: SeriesConfig[] }) {
+  return (
+    <defs>
+      {series.map((s, i) => {
+        const color = s.color || CHART_COLORS[i % CHART_COLORS.length];
+        return (
+          <linearGradient key={s.dataKey} id={`gradient-${s.dataKey}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={color} stopOpacity={0.25} />
+            <stop offset="95%" stopColor={color} stopOpacity={0.02} />
+          </linearGradient>
+        );
+      })}
+    </defs>
+  );
+}
+
+function CustomTooltip({ active, payload, label }: any) {
+  if (!active || !payload || payload.length === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-border/40 bg-card px-3 py-2.5 backdrop-blur-sm">
+      <p className="mb-1.5 text-xs font-medium text-foreground">{label}</p>
+      <div className="flex flex-col gap-1">
+        {payload.map((entry: any, i: number) => (
+          <div key={i} className="flex items-center gap-2 text-xs">
+            <span
+              className="h-2 w-2 shrink-0 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span className="text-muted-foreground">{entry.name || entry.dataKey}:</span>
+            <span className="font-medium tabular-nums text-foreground">
+              {typeof entry.value === 'number'
+                ? entry.value.toLocaleString(undefined, {
+                    maximumFractionDigits: 2,
+                  })
+                : entry.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export type { ChartConfig } from '@/lib/chat/chart-config';
+
+function downloadCSV(data: Record<string, any>[], title: string) {
+  if (data.length === 0) return;
+  const keys = Object.keys(data[0]);
+  const csv = [
+    keys.join(','),
+    ...data.map((row) =>
+      keys
+        .map((k) => {
+          const v = String(row[k] ?? '');
+          return v.includes(',') ? `"${v}"` : v;
+        })
+        .join(','),
+    ),
+  ].join('\n');
+
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${title.replace(/\s+/g, '_').toLowerCase()}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function copyDataToClipboard(data: Record<string, any>[]) {
+  if (data.length === 0) return;
+  const keys = Object.keys(data[0]);
+  const text = [
+    keys.join('\t'),
+    ...data.map((row) => keys.map((k) => String(row[k] ?? '')).join('\t')),
+  ].join('\n');
+  navigator.clipboard.writeText(text);
+}
+
+const AXIS_TICK_STYLE = {
+  fontSize: 11,
+  fill: 'var(--muted-foreground)',
+  fontFamily: 'inherit',
+};
+
+const AXIS_LINE_STYLE = {
+  stroke: 'var(--border)',
+};
+
+const LEGEND_WRAPPER_STYLE = { fontSize: 11, paddingTop: 12 };
+const LEGEND_WRAPPER_STYLE_PIE = { fontSize: 11 };
+const PIE_LABEL_LINE = { stroke: 'var(--muted-foreground)', strokeWidth: 1 };
+const SCATTER_CURSOR = { strokeDasharray: '3 3' };
+const POLAR_ANGLE_TICK = { fontSize: 11, fill: 'var(--muted-foreground)' };
+const POLAR_RADIUS_TICK = { fontSize: 10, fill: 'var(--muted-foreground)' };
+const ACTIVE_DOT = { r: 4, strokeWidth: 2, stroke: 'var(--card)' };
+const BAR_RADIUS: [number, number, number, number] = [4, 4, 0, 0];
+const CARTESIAN_CHART_MARGIN = { top: 6, right: 12, bottom: 8, left: 12 };
+const X_AXIS_HEIGHT = 52;
+const Y_AXIS_WIDTH = 62;
+const AXIS_TICK_MARGIN = 8;
+const X_AXIS_MIN_TICK_GAP = 24;
+const X_AXIS_LABEL_OFFSET = -4;
+const Y_AXIS_LABEL_OFFSET = -8;
+
+const renderPieLabel = ({ name, percent }: any) => `${name} ${(percent * 100).toFixed(0)}%`;
+
+function useDeepMemo<T>(factory: () => T, deps: any[]): T {
+  const ref = useRef<{ deps: any[]; value: T } | null>(null);
+
+  const depsStr = JSON.stringify(deps);
+
+  if (ref.current === null || JSON.stringify(ref.current.deps) !== depsStr) {
+    ref.current = { deps: JSON.parse(depsStr), value: factory() };
+  }
+
+  return ref.current.value;
+}
+
+export function ChatChart({ config }: { config: ChartConfig }) {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const [copied, setCopied] = useState(false);
+  // Tool outputs are model-generated and historic conversations may contain
+  // older payload shapes. Normalize immediately before rendering as a final
+  // defensive boundary.
+  const normalizedConfig = useMemo(() => normalizeChartConfig(config), [config]);
+  const {
+    chartType,
+    title,
+    subtitle,
+    data,
+    xAxisKey,
+    series,
+    colors,
+    stacked,
+    showLegend = true,
+    xAxisLabel,
+    yAxisLabel,
+  } = normalizedConfig;
+
+  const stableData = data;
+  const stableSeries = series;
+  const stableXAxisKey = xAxisKey;
+
+  const chartColors = useDeepMemo(() => {
+    const palette = colors && colors.length > 0 ? colors : CHART_COLORS;
+    return stableSeries.map((s, i) => s.color || palette[i % palette.length]);
+  }, [stableSeries, colors]);
+
+  const pieColors = useDeepMemo(() => {
+    return colors && colors.length > 0 ? colors : CHART_COLORS;
+  }, [colors]);
+
+  const chartDots = useDeepMemo(() => {
+    return chartColors.map((color) => ({ r: 3, fill: color }));
+  }, [chartColors]);
+
+  const handleCopy = useCallback(() => {
+    copyDataToClipboard(stableData);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [stableData]);
+
+  const handleDownload = useCallback(() => downloadCSV(stableData, title), [stableData, title]);
+
+  // Memoize axis labels stably
+  const xLabelObj = useDeepMemo(
+    () =>
+      xAxisLabel
+        ? {
+            value: xAxisLabel,
+            position: 'insideBottom',
+            offset: X_AXIS_LABEL_OFFSET,
+            style: { fontSize: 11, fill: 'var(--muted-foreground)' },
+          }
+        : undefined,
+    [xAxisLabel],
+  );
+
+  const yLabelObj = useDeepMemo(
+    () =>
+      yAxisLabel
+        ? {
+            value: yAxisLabel,
+            angle: -90,
+            position: 'insideLeft',
+            offset: Y_AXIS_LABEL_OFFSET,
+            style: { fontSize: 11, fill: 'var(--muted-foreground)' },
+          }
+        : undefined,
+    [yAxisLabel],
+  );
+
+  const renderChart = () => {
+    switch (chartType) {
+      case 'bar':
+        return (
+          <BarChart
+            data={stableData}
+            barGap={4}
+            barCategoryGap="20%"
+            margin={CARTESIAN_CHART_MARGIN}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} cursor={false} />
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE} />
+            )}
+            {stableSeries.map((s, i) => (
+              <Bar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                fill={chartColors[i]}
+                stackId={stacked ? 'stack' : undefined}
+                radius={BAR_RADIUS as any}
+                maxBarSize={40}
+                animationDuration={700}
+                animationEasing="ease-in-out"
+              />
+            ))}
+          </BarChart>
+        );
+
+      case 'area':
+        return (
+          <AreaChart data={stableData} margin={CARTESIAN_CHART_MARGIN}>
+            <ChartGradients series={stableSeries} />
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} />
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE} />
+            )}
+            {stableSeries.map((s, i) => (
+              <Area
+                key={s.dataKey}
+                type="monotone"
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                stroke={chartColors[i]}
+                strokeWidth={2}
+                fill={`url(#gradient-${s.dataKey})`}
+                stackId={stacked ? 'stack' : undefined}
+                animationDuration={800}
+                animationEasing="ease-in-out"
+              />
+            ))}
+          </AreaChart>
+        );
+
+      case 'line':
+        return (
+          <LineChart data={stableData} margin={CARTESIAN_CHART_MARGIN}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} />
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE} />
+            )}
+            {stableSeries.map((s, i) => (
+              <Line
+                key={s.dataKey}
+                type="monotone"
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                stroke={chartColors[i]}
+                strokeWidth={2}
+                dot={chartDots[i]}
+                activeDot={ACTIVE_DOT}
+                animationDuration={800}
+                animationEasing="ease-in-out"
+              />
+            ))}
+          </LineChart>
+        );
+
+      case 'pie': {
+        const dataKey = stableSeries[0]?.dataKey || 'value';
+        return (
+          <PieChart>
+            <Tooltip content={CustomTooltip} />
+            <Pie
+              data={stableData}
+              dataKey={dataKey}
+              nameKey={stableXAxisKey}
+              cx="50%"
+              cy="50%"
+              outerRadius="75%"
+              innerRadius="48%"
+              paddingAngle={2}
+              animationDuration={700}
+              animationEasing="ease-in-out"
+              label={renderPieLabel}
+              labelLine={PIE_LABEL_LINE}
+            >
+              {stableData.map((entry, i) => (
+                <Cell
+                  key={`cell-${i}`}
+                  fill={pieColors[i % pieColors.length]}
+                  stroke="var(--card)"
+                  strokeWidth={2}
+                />
+              ))}
+            </Pie>
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE_PIE} />
+            )}
+          </PieChart>
+        );
+      }
+
+      case 'scatter':
+        return (
+          <ScatterChart margin={CARTESIAN_CHART_MARGIN}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              type="number"
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              name={xAxisLabel || stableXAxisKey}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              dataKey={stableSeries[0]?.dataKey}
+              type="number"
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              name={yAxisLabel || stableSeries[0]?.label || stableSeries[0]?.dataKey}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} cursor={SCATTER_CURSOR} />
+            <Scatter
+              name={stableSeries[0]?.label || stableSeries[0]?.dataKey}
+              data={stableData}
+              fill={chartColors[0]}
+              animationDuration={700}
+              animationEasing="ease-in-out"
+            />
+          </ScatterChart>
+        );
+
+      case 'radar':
+        return (
+          <RadarChart data={stableData} outerRadius="75%">
+            <PolarGrid stroke="var(--border)" opacity={0.5} />
+            <PolarAngleAxis dataKey={stableXAxisKey} tick={POLAR_ANGLE_TICK} />
+            <PolarRadiusAxis tick={POLAR_RADIUS_TICK} />
+            <Tooltip content={CustomTooltip} />
+            {stableSeries.map((s, i) => (
+              <Radar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                stroke={chartColors[i]}
+                fill={chartColors[i]}
+                fillOpacity={0.12}
+                strokeWidth={2}
+                animationDuration={700}
+                animationEasing="ease-in-out"
+              />
+            ))}
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE_PIE} />
+            )}
+          </RadarChart>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  if (normalizedConfig.error) {
+    return (
+      <div className="my-3 flex flex-col items-center justify-center rounded-lg border border-border/70 bg-transparent p-6 text-center text-muted-foreground">
+        <p className="text-sm">This chart could not be prepared</p>
+        <p className="text-xs opacity-70 mt-1">{normalizedConfig.error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={chartRef}
+      data-testid="chat-chart"
+      className="my-3 overflow-hidden rounded-lg border border-border/70 bg-muted/25 animate-in fade-in duration-300 [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none [&_*:focus]:outline-none [&_*:focus-visible]:outline-none [&_*:focus-visible]:ring-0"
+    >
+      {/* Header */}
+      <div className="flex flex-row items-center justify-between gap-4 border-b border-border/30 px-3.5 py-2.5">
+        <div className="flex flex-col justify-center min-w-0">
+          <h3 className="text-sm font-semibold text-foreground truncate">{title}</h3>
+          {subtitle && <p className="mt-0.5 text-xs text-muted-foreground truncate">{subtitle}</p>}
+        </div>
+      </div>
+
+      <div className="px-1 pt-2.5 pb-0">
+        <div className="h-68 min-h-68 w-full sm:h-72 sm:min-h-72">
+          <ResponsiveContainer width="100%" height="100%" debounce={50}>
+            {renderChart() as any}
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Footer actions */}
+      <div className="flex flex-wrap items-center justify-start gap-1.5 border-t border-border/30 px-3 py-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 text-[11px] text-muted-foreground hover:text-foreground focus:ring-0 focus-visible:ring-0"
+          onClick={handleCopy}
+        >
+          {copied ? <Check className="h-3 w-3 text-emerald-500" /> : <Copy className="h-3 w-3" />}
+          {copied ? 'Copied' : 'Copy Data'}
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 text-[11px] text-muted-foreground hover:text-foreground focus:ring-0 focus-visible:ring-0"
+          onClick={handleDownload}
+        >
+          <Download className="h-3 w-3" />
+          CSV
+        </Button>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/apps/web/components/chat/tools/chat-citations.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ChevronDown, ChevronUp, ExternalLink, FileText, Play, TriangleAlert } from 'lucide-react';
+import { ChatMediaPreview } from './chat-media-preview';
+
+export interface ChatCitationItem {
+  label: string;
+  detail?: string;
+  timestampSecs?: number;
+  seekUrl?: string;
+  conflicted?: boolean;
+}
+
+export interface ChatCitationsUi {
+  kind: 'citations';
+  title?: string;
+  mediaUrl?: string;
+  /** Original public source, when it has a browser-supported player. */
+  sourceUrl?: string;
+  mediaType?: 'video' | 'audio';
+  fileName?: string;
+  primaryTimestampSecs?: number;
+  primaryEndSecs?: number;
+  items: ChatCitationItem[];
+}
+
+function formatTimestamp(seconds: number) {
+  const total = Math.max(0, Math.floor(seconds));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const secs = total % 60;
+  return hours > 0
+    ? `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
+    : `${minutes}:${String(secs).padStart(2, '0')}`;
+}
+
+/**
+ * Generic citation list + optional supporting clip, part of the same
+ * host-generic `output.ui.kind` contract as notice/card/table
+ * (message-item.tsx) -- any tool can return this shape, not just video ones.
+ * The first assistant message may opt into opening one supporting clip. All
+ * later clips remain compact references until the user opens them.
+ */
+export function ChatCitations({
+  ui,
+  assetId,
+  autoOpenSupportingClip = false,
+}: {
+  ui: ChatCitationsUi;
+  assetId?: string;
+  autoOpenSupportingClip?: boolean;
+}) {
+  const [clipOpen, setClipOpen] = useState(false);
+  const [sourcesOpen, setSourcesOpen] = useState(false);
+  useEffect(() => {
+    setClipOpen(!!(autoOpenSupportingClip && ui.mediaUrl));
+  }, [autoOpenSupportingClip, ui.mediaUrl]);
+  if (!ui.items?.length && !ui.mediaUrl) return null;
+
+  return (
+    <div className="mb-1 w-full max-w-2xl" data-testid="chat-citations">
+      {ui.mediaUrl ? (
+        <div className="mb-2">
+          <button
+            type="button"
+            onClick={() => setClipOpen((open) => !open)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <Play className="size-3" />
+            <span className="font-medium">{clipOpen ? 'Hide' : 'Watch'} supporting clip</span>
+            {typeof ui.primaryTimestampSecs === 'number' ? (
+              <span>· starts at {formatTimestamp(ui.primaryTimestampSecs)}</span>
+            ) : null}
+          </button>
+          {clipOpen ? (
+            <div className="mt-1.5">
+              <ChatMediaPreview
+                assetId={assetId ?? 'chat-citation'}
+                mediaType={ui.mediaType ?? 'video'}
+                fileName={ui.fileName}
+                mediaUrl={ui.mediaUrl}
+                sourceUrl={ui.sourceUrl ?? ui.mediaUrl}
+                startSecs={ui.primaryTimestampSecs}
+                endSecs={ui.primaryEndSecs}
+              />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {ui.items?.length ? (
+        <div className="overflow-hidden rounded-lg border border-border/70 bg-card/60">
+          <button
+            type="button"
+            onClick={() => setSourcesOpen((open) => !open)}
+            className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs transition-colors hover:bg-muted/40"
+            aria-expanded={sourcesOpen}
+          >
+            <span className="flex min-w-0 items-center gap-2 text-muted-foreground">
+              <FileText className="size-3.5 shrink-0" />
+              <span className="font-medium text-foreground">{ui.title ?? 'Sources'}</span>
+            </span>
+            <span className="flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+              {ui.items.length} citation{ui.items.length === 1 ? '' : 's'}
+              {sourcesOpen ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
+            </span>
+          </button>
+
+          {sourcesOpen ? (
+            <div className="border-t border-border/60 px-2 py-1.5">
+              {ui.items.map((item, i) => (
+                <div
+                  key={i}
+                  className="flex items-start gap-2 rounded-md px-1.5 py-2 hover:bg-muted/40"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      {typeof item.timestampSecs === 'number' ? (
+                        <span className="text-[11px] font-semibold tabular-nums text-foreground">
+                          {formatTimestamp(item.timestampSecs)}
+                        </span>
+                      ) : null}
+                      <span className="text-[10px] text-muted-foreground">{item.label}</span>
+                      {item.conflicted ? (
+                        <TriangleAlert
+                          className="size-3 shrink-0 text-amber-600 dark:text-amber-400"
+                          aria-label="Conflicting evidence"
+                        />
+                      ) : null}
+                    </div>
+                  </div>
+                  {item.seekUrl ? (
+                    <a
+                      href={item.seekUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={`Open source: ${item.label}`}
+                      className="mt-0.5 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      <ExternalLink className="size-3.5" />
+                    </a>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}