feat: intent registry — sparkline charts, skill history, changelog, URL-tracked state

- SkillSparkline: bar chart with colored added/removed/modified bars, gray unchanged bars, Plot.tip hover tooltips with color swatches
- PlotContainer: responsive Observable Plot wrapper with overflow:visible fix and loading placeholders
- Package detail: Skill/History tabs (URL-tracked), version selector synced to URL, compact header layout with inline sparkline
- Changelog (History tab): collapsible timeline with grouped unchanged versions, multi-expand tracked in URL, latest expanded by default
- Skill detail: Skill/History tabs replacing collapsible, URL-tracked tab state
- Skills list: multi-expand tracked in URL, added/modified badges from changelog diff
- Sidebar: All Skills link above skill list
- Registry index: sparkline placeholders while loading, compact card layout with inline sparklines
- Search schema uses v.fallback for graceful handling of invalid URL params
- Update @sentry/tanstackstart-react to fix upstream type errors

Author: tannerlinsley

pnpm-lock.yaml

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import * as Plot from '@observablehq/plot'
+
+interface PlotContainerProps {
+  /** Build Plot options given the measured container width. */
+  options: (width: number) => Parameters<typeof Plot.plot>[0]
+  /** Fixed height in pixels. Passed through to the wrapper div. */
+  height: number
+  className?: string
+  style?: React.CSSProperties
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export function PlotContainer({
+  options,
+  height,
+  className,
+  style,
+  onClick,
+}: PlotContainerProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    let currentPlot: ReturnType<typeof Plot.plot> | null = null
+
+    const render = () => {
+      if (currentPlot) {
+        currentPlot.remove()
+        currentPlot = null
+      }
+
+      const width = container.clientWidth
+      if (width === 0) return
+
+      currentPlot = Plot.plot({ ...options(width), width, height })
+      currentPlot.style.overflow = 'visible'
+      container.appendChild(currentPlot)
+      setReady(true)
+    }
+
+    render()
+
+    const observer = new ResizeObserver(render)
+    observer.observe(container)
+
+    return () => {
+      observer.disconnect()
+      if (currentPlot) currentPlot.remove()
+    }
+  }, [options, height])
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!onClick || (e.key !== 'Enter' && e.key !== ' ')) return
+      e.preventDefault()
+      // Synthesize a click at the container center for keyboard users
+      const el = e.currentTarget
+      const rect = el.getBoundingClientRect()
+      const synth = new MouseEvent('click', {
+        bubbles: true,
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2,
+      })
+      el.dispatchEvent(synth)
+    },
+    [onClick],
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${!ready ? 'animate-pulse rounded bg-gray-100 dark:bg-gray-800/40' : ''} ${className ?? ''}`}
+      style={{ width: '100%', height, ...style }}
+      onClick={onClick}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      aria-label={onClick ? 'Interactive chart' : undefined}
+    />
+  )
+}

src/components/charts/PlotContainer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as Plot from '@observablehq/plot'
 import { type BinType, binTimeSeriesData } from '~/utils/chart'
+import { PlotContainer } from '~/components/charts/PlotContainer'
 
 export type ChartVariant = 'area' | 'bar' | 'cumulative'
 
@@ -21,47 +22,26 @@ export function TimeSeriesChart({
   height = 200,
   yLabel,
 }: TimeSeriesChartProps) {
-  const containerRef = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (!containerRef.current || data.length === 0) return
-
-    const container = containerRef.current
-
-    const renderChart = () => {
-      if (!container) return
-      container.innerHTML = ''
-
+  const options = React.useCallback(
+    (_width: number) => {
       const binnedData = binTimeSeriesData(data, binType)
-      if (binnedData.length === 0) return
+      if (binnedData.length === 0) return { marks: [] }
 
       const marks = getMarksForVariant(variant, binnedData, color, binType)
 
-      const plot = Plot.plot({
-        width: container.clientWidth,
-        height,
+      return {
         marginLeft: 60,
         marginRight: 20,
         marginTop: 20,
         marginBottom: 40,
-        x: { label: 'Date', type: 'utc', grid: true },
+        x: { label: 'Date', type: 'utc' as const, grid: true },
         y: { label: yLabel ?? getDefaultYLabel(variant), grid: true },
         marks,
         style: { background: 'transparent', fontSize: '12px' },
-      })
-
-      container.appendChild(plot)
-    }
-
-    renderChart()
-    const resizeObserver = new ResizeObserver(() => renderChart())
-    resizeObserver.observe(container)
-
-    return () => {
-      resizeObserver.disconnect()
-      container.innerHTML = ''
-    }
-  }, [data, binType, variant, color, height, yLabel])
+      }
+    },
+    [data, binType, variant, color, yLabel],
+  )
 
   if (data.length === 0) {
     return (
@@ -71,7 +51,7 @@ export function TimeSeriesChart({
     )
   }
 
-  return <div ref={containerRef} className="w-full" />
+  return <PlotContainer options={options} height={height} />
 }
 
 function getDefaultYLabel(variant: ChartVariant): string {
@@ -89,15 +69,6 @@ function getMarksForVariant(
   color: string,
   binType: BinType,
 ): Plot.Markish[] {
-  const _tipFormat = {
-    x: (d: Date) =>
-      d.toLocaleDateString('en-US', {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-      }),
-  }
-
   switch (variant) {
     case 'bar':
       return [

src/components/charts/TimeSeriesChart.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react'
+import * as Plot from '@observablehq/plot'
+import { PlotContainer } from '~/components/charts/PlotContainer'
+import type { SkillHistoryEntry } from '~/utils/intent.functions'
+
+export function SkillSparklinePlaceholder({
+  height = 40,
+}: {
+  height?: number
+}) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-800/40"
+      style={{ width: '100%', height }}
+    />
+  )
+}
+
+interface SkillSparklineProps {
+  history: Array<SkillHistoryEntry>
+  height?: number
+  maxSlots?: number
+  onVersionClick?: (entry: SkillHistoryEntry, index: number) => void
+}
+
+export function SkillSparkline({
+  history,
+  height = 40,
+  maxSlots,
+  onVersionClick,
+}: SkillSparklineProps) {
+  const n = history.length
+  const slots = Math.max(maxSlots ?? n, n)
+  const offset = slots - n
+
+  const options = React.useCallback(
+    (width: number) => {
+      const pxPerSlot = width / slots
+      const barPx = Math.min(10, pxPerSlot * 0.6)
+      const barW = (barPx / 2) * (slots / width)
+
+      const rectData: Array<{
+        x1: number
+        x2: number
+        y1: number
+        y2: number
+        type: string
+      }> = []
+
+      for (let i = 0; i < n; i++) {
+        const entry = history[i]
+        const x = i + offset
+        const hasChanges =
+          entry.added > 0 || entry.modified > 0 || entry.removed > 0
+
+        if (hasChanges) {
+          let y0 = 0
+          if (entry.added > 0) {
+            rectData.push({
+              x1: x - barW,
+              x2: x + barW,
+              y1: y0,
+              y2: y0 + entry.added,
+              type: 'added',
+            })
+            y0 += entry.added
+          }
+          if (entry.modified > 0) {
+            rectData.push({
+              x1: x - barW,
+              x2: x + barW,
+              y1: y0,
+              y2: y0 + entry.modified,
+              type: 'modified',
+            })
+            y0 += entry.modified
+          }
+          if (entry.removed > 0) {
+            rectData.push({
+              x1: x - barW,
+              x2: x + barW,
+              y1: y0,
+              y2: y0 + entry.removed,
+              type: 'removed',
+            })
+          }
+        } else {
+          // No changes — gray bar showing total
+          rectData.push({
+            x1: x - barW,
+            x2: x + barW,
+            y1: 0,
+            y2: entry.total,
+            type: 'unchanged',
+          })
+        }
+      }
+
+      const yMax = Math.max(...history.map((h) => h.total), 1)
+
+      const tipData = history.map((d, i) => {
+        const status =
+          d.added > 0
+            ? 'added'
+            : d.modified > 0
+              ? 'modified'
+              : d.removed > 0
+                ? 'removed'
+                : 'unchanged'
+        return { ...d, _x: i + offset, _status: status }
+      })
+
+      return {
+        height,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 2,
+        marginBottom: 2,
+        x: { axis: null, domain: [-0.5, slots - 0.5] },
+        y: { axis: null, domain: [0, yMax] },
+        marks: [
+          Plot.rect(rectData, {
+            x1: 'x1',
+            x2: 'x2',
+            y1: 'y1',
+            y2: 'y2',
+            fill: 'type',
+          }),
+          Plot.tip(
+            tipData,
+            Plot.pointer({
+              x: '_x',
+              y: 'total',
+              fill: '_status',
+              channels: {
+                Version: (d) => `v${d.version}`,
+                Skills: (d) => d.total,
+                Added: (d) => (d.added > 0 ? `+${d.added}` : null),
+                Removed: (d) => (d.removed > 0 ? `-${d.removed}` : null),
+                Modified: (d) => (d.modified > 0 ? `~${d.modified}` : null),
+              },
+              format: {
+                x: false,
+                y: false,
+                fill: true,
+              },
+            } as Plot.TipOptions),
+          ),
+        ],
+        color: {
+          domain: ['added', 'removed', 'modified', 'unchanged'],
+          range: ['#22c55e', '#ef4444', '#f59e0b', '#808080'],
+        },
+        style: { background: 'transparent' },
+      } satisfies Partial<Parameters<typeof Plot.plot>[0]>
+    },
+    [history, height, slots, offset, n],
+  )
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!onVersionClick) return
+      const container = e.currentTarget
+      const rect = container.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const width = container.clientWidth
+      if (width === 0) return
+
+      const domainX = (x / width) * slots - 0.5
+      const slotIndex = Math.round(domainX)
+      const historyIndex = slotIndex - offset
+      if (historyIndex < 0 || historyIndex >= n) return
+
+      e.preventDefault()
+      e.stopPropagation()
+      onVersionClick(history[historyIndex], historyIndex)
+    },
+    [onVersionClick, slots, offset, n, history],
+  )
+
+  if (history.length === 0) {
+    return null
+  }
+
+  return (
+    <PlotContainer
+      options={options}
+      height={height}
+      onClick={onVersionClick ? handleClick : undefined}
+      style={onVersionClick ? { cursor: 'pointer' } : undefined}
+    />
+  )
+}