tanuki-telemetry 1.1.0

package/frontend/src/components/QualityReport.tsx

@@ -0,0 +1,276 @@
+import { useMemo, useRef, useState, useEffect } from "react"
+import gsap from "gsap"
+import {
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  Radar,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts"
+import type { Event } from "@/types"
+import { cn } from "@/lib/utils"
+
+// Stable chart container that measures width once and doesn't flicker on re-renders
+function ChartContainer({ height, children }: { height: number; children: (width: number) => React.ReactNode }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(0)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+    const w = containerRef.current.clientWidth
+    if (w > 0 && w !== width) setWidth(w)
+
+    const observer = new ResizeObserver((entries) => {
+      const newW = entries[0]?.contentRect.width ?? 0
+      if (newW > 0) setWidth(newW)
+    })
+    observer.observe(containerRef.current)
+    return () => observer.disconnect()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div ref={containerRef} style={{ height }}>
+      {width > 0 && children(width)}
+    </div>
+  )
+}
+
+interface QualityEvent {
+  overall_score: number
+  score_breakdown: Record<string, number>
+  version?: string
+  report_path?: string
+  timestamp: string
+}
+
+interface Props {
+  events: Event[]
+}
+
+function parseQualityEvents(events: Event[]): QualityEvent[] {
+  const results: QualityEvent[] = []
+  for (const ev of events) {
+    if (!ev.metadata) continue
+    try {
+      const meta = typeof ev.metadata === "string" ? JSON.parse(ev.metadata) : ev.metadata
+      if (meta.overall_score !== undefined && typeof meta.overall_score === "number") {
+        results.push({
+          overall_score: meta.overall_score,
+          score_breakdown: meta.score_breakdown || {},
+          version: meta.version,
+          report_path: meta.report_path,
+          timestamp: ev.timestamp,
+        })
+      }
+    } catch {
+      // ignore
+    }
+  }
+  return results
+}
+
+function scoreColor(score: number): string {
+  if (score >= 9) return "text-yellow-400"
+  if (score >= 8) return "text-accent"
+  if (score >= 7) return "text-warning"
+  return "text-error"
+}
+
+function scoreBorder(score: number): string {
+  if (score >= 9) return "border-yellow-400/40"
+  if (score >= 8) return "border-accent/40"
+  if (score >= 7) return "border-warning/40"
+  return "border-error/40"
+}
+
+function scoreBg(score: number): string {
+  if (score >= 9) return "bg-yellow-400/5"
+  if (score >= 8) return "bg-accent/5"
+  if (score >= 7) return "bg-warning/5"
+  return "bg-error/5"
+}
+
+function scoreHex(score: number): string {
+  if (score >= 9) return "#facc15"
+  if (score >= 8) return "#00ff88"
+  if (score >= 7) return "#ffaa00"
+  return "#ff4444"
+}
+
+export function QualityReport({ events }: Props) {
+  const qualityEvents = useMemo(() => parseQualityEvents(events), [events])
+
+  if (qualityEvents.length === 0) return null
+
+  const latest = qualityEvents[qualityEvents.length - 1]
+  const hasProgression = qualityEvents.length > 1
+
+  // Radar chart data from latest breakdown
+  const radarData = Object.entries(latest.score_breakdown).map(([key, value]) => ({
+    category: key,
+    score: value,
+    fullMark: 10,
+  }))
+
+  // Line chart data for progression
+  const progressionData = qualityEvents.map((qe, i) => ({
+    label: qe.version || `v${i + 1}`,
+    score: qe.overall_score,
+    ...qe.score_breakdown,
+  }))
+
+  const qrRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!qrRef.current) return
+    gsap.fromTo(
+      qrRef.current.children,
+      { opacity: 0, y: 8 },
+      { opacity: 1, y: 0, duration: 0.3, stagger: 0.06, ease: "power2.out" }
+    )
+  }, [])
+
+  return (
+    <div ref={qrRef} className="space-y-3">
+      {/* Score badge */}
+      <div className="flex items-center gap-4">
+        <div
+          className={cn(
+            "border-2 rounded-lg px-4 py-3 flex flex-col items-center",
+            scoreBorder(latest.overall_score),
+            scoreBg(latest.overall_score)
+          )}
+        >
+          <span className={cn("text-3xl font-bold font-mono", scoreColor(latest.overall_score))}>
+            {latest.overall_score.toFixed(1)}
+          </span>
+          <span className="text-[9px] text-text-dim uppercase tracking-wider mt-0.5">
+            / 10
+          </span>
+        </div>
+
+        {/* Category scores */}
+        <div className="flex-1 grid grid-cols-2 gap-x-4 gap-y-1">
+          {Object.entries(latest.score_breakdown).map(([key, value]) => (
+            <div key={key} className="flex items-center gap-2">
+              <span className="text-[10px] text-text-dim uppercase w-16 truncate">{key}</span>
+              <div className="flex-1 h-1.5 bg-border rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all"
+                  style={{
+                    width: `${(value / 10) * 100}%`,
+                    backgroundColor: scoreHex(value),
+                  }}
+                />
+              </div>
+              <span className={cn("text-[10px] font-bold font-mono w-6 text-right", scoreColor(value))}>
+                {value}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Radar chart if there are 3+ categories */}
+      {radarData.length >= 3 && (
+        <ChartContainer height={192}>
+          {(width) => (
+            <RadarChart data={radarData} cx="50%" cy="50%" outerRadius="70%" width={width} height={192}>
+              <PolarGrid stroke="#333" />
+              <PolarAngleAxis
+                dataKey="category"
+                tick={{ fill: "#666", fontSize: 10, fontFamily: "monospace" }}
+              />
+              <Radar
+                dataKey="score"
+                stroke={scoreHex(latest.overall_score)}
+                fill={scoreHex(latest.overall_score)}
+                fillOpacity={0.15}
+                strokeWidth={2}
+                isAnimationActive={false}
+              />
+            </RadarChart>
+          )}
+        </ChartContainer>
+      )}
+
+      {/* Progression line chart if multiple quality events */}
+      {hasProgression && (
+        <div>
+          <div className="text-[9px] text-text-dim uppercase tracking-wider mb-1">
+            SCORE PROGRESSION
+          </div>
+          <ChartContainer height={144}>
+            {(width) => (
+              <LineChart data={progressionData} width={width} height={144}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey="label"
+                  tick={{ fill: "#666", fontSize: 10, fontFamily: "monospace" }}
+                  stroke="#333"
+                />
+                <YAxis
+                  domain={[0, 10]}
+                  tick={{ fill: "#666", fontSize: 10, fontFamily: "monospace" }}
+                  stroke="#333"
+                  width={25}
+                />
+                <Tooltip
+                  contentStyle={{
+                    background: "#111",
+                    border: "1px solid #333",
+                    borderRadius: 4,
+                    fontSize: 11,
+                    fontFamily: "monospace",
+                  }}
+                  itemStyle={{ color: "#c8c8c8" }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="score"
+                  stroke="#00ff88"
+                  strokeWidth={2}
+                  dot={{ fill: "#00ff88", r: 4 }}
+                  name="overall"
+                  isAnimationActive={false}
+                />
+                {Object.keys(latest.score_breakdown).map((key, i) => {
+                  const colors = ["#4488ff", "#ffaa00", "#aa66ff", "#ff4444", "#facc15", "#00ccff"]
+                  return (
+                    <Line
+                      key={key}
+                      type="monotone"
+                      dataKey={key}
+                      stroke={colors[i % colors.length]}
+                      strokeWidth={1}
+                      strokeDasharray="3 3"
+                      dot={false}
+                      name={key}
+                      isAnimationActive={false}
+                    />
+                  )
+                })}
+              </LineChart>
+            )}
+          </ChartContainer>
+        </div>
+      )}
+
+      {/* Version + report link */}
+      <div className="flex items-center gap-3 text-[10px] text-text-dim">
+        {latest.version && <span>version: <span className="text-text">{latest.version}</span></span>}
+        {latest.report_path && (
+          <span>report: <span className="text-text-muted font-mono">{latest.report_path.split("/").pop()}</span></span>
+        )}
+        {hasProgression && (
+          <span>{qualityEvents.length} measurements</span>
+        )}
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/ScreenshotUpload.tsx

@@ -0,0 +1,117 @@
+import { useState, useRef, useCallback, useEffect } from "react"
+import gsap from "gsap"
+import { cn } from "@/lib/utils"
+
+interface Props {
+  sessionId: string
+  onUploaded: () => void
+}
+
+export function ScreenshotUpload({ sessionId, onUploaded }: Props) {
+  const [dragging, setDragging] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [description, setDescription] = useState("")
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const handleUpload = useCallback(
+    async (file: File) => {
+      setUploading(true)
+      const formData = new FormData()
+      formData.append("file", file)
+      formData.append("description", description || file.name)
+      formData.append("phase", "verification")
+
+      try {
+        const res = await fetch(`/api/sessions/${sessionId}/screenshots`, {
+          method: "POST",
+          body: formData,
+        })
+        if (res.ok) {
+          setDescription("")
+          onUploaded()
+        }
+      } catch {
+        // ignore
+      }
+      setUploading(false)
+    },
+    [sessionId, description, onUploaded]
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setDragging(false)
+      const file = e.dataTransfer.files[0]
+      if (file && file.type.startsWith("image/")) {
+        handleUpload(file)
+      }
+    },
+    [handleUpload]
+  )
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (file) {
+        handleUpload(file)
+      }
+      e.target.value = ""
+    },
+    [handleUpload]
+  )
+
+  const uploadRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!uploadRef.current) return
+    gsap.fromTo(uploadRef.current, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" })
+  }, [])
+
+  return (
+    <div ref={uploadRef} className="mt-3">
+      <div className="flex gap-2 mb-2">
+        <input
+          type="text"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="description (optional)"
+          className="flex-1 bg-bg border border-border rounded px-2 py-1 text-[11px] text-text font-mono placeholder:text-text-dim focus:outline-none focus:border-accent/50"
+        />
+      </div>
+      <div
+        onDragOver={(e) => {
+          e.preventDefault()
+          setDragging(true)
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={handleDrop}
+        onClick={() => fileRef.current?.click()}
+        className={cn(
+          "border border-dashed rounded p-4 text-center cursor-pointer transition-colors duration-200",
+          dragging
+            ? "border-accent bg-accent/5 text-accent"
+            : "border-border-bright text-text-dim hover:border-accent/40 hover:text-text-muted"
+        )}
+      >
+        <input
+          ref={fileRef}
+          type="file"
+          accept="image/*"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+        <div className="text-[10px] font-mono">
+          {uploading ? (
+            <span className="text-accent animate-pulse">uploading...</span>
+          ) : (
+            <>
+              <span className="text-accent mr-1">+</span>
+              drop image or click to upload
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/ScreenshotsGrid.tsx

@@ -0,0 +1,266 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { createPortal } from "react-dom"
+import gsap from "gsap"
+import type { Screenshot } from "@/types"
+import { screenshotUrl, cn } from "@/lib/utils"
+
+interface Props {
+  screenshots: Screenshot[]
+}
+
+interface ScreenshotGroup {
+  name: string
+  screenshots: Screenshot[]
+  indices: number[] // indices into the flat screenshots array
+}
+
+// Extract template/group name from file path or description
+function extractGroup(sc: Screenshot): string {
+  const fp = sc.file_path.toLowerCase()
+  // Check for template folder pattern: .../generated/trinity/... or .../reference/trinity/...
+  const match = fp.match(/\/(generated|reference)\/([^/]+)\//)
+  if (match) return match[2]
+  // Check description for template names
+  const descMatch = sc.description.match(/template[:\s]+(\w+)/i)
+  if (descMatch) return descMatch[1].toLowerCase()
+  return "_default"
+}
+
+// Extract score from description (e.g., "8.7/10", "score: 8", "Score 9.2")
+function extractScore(description: string): number | null {
+  const patterns = [
+    /(\d+\.?\d*)\/10/,
+    /score[:\s]+(\d+\.?\d*)/i,
+    /(\d+\.?\d*)\s*pts?/i,
+  ]
+  for (const p of patterns) {
+    const m = description.match(p)
+    if (m) return parseFloat(m[1])
+  }
+  return null
+}
+
+function scoreColor(score: number): string {
+  if (score >= 9) return "text-yellow-400"
+  if (score >= 8) return "text-accent"
+  if (score >= 7) return "text-warning"
+  return "text-error"
+}
+
+export function ScreenshotsGrid({ screenshots }: Props) {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+  const prevCountRef = useRef(0)
+
+  const thumbUrls = screenshots.map((sc) => screenshotUrl(sc.file_path, sc.id, "thumb"))
+  const fullUrls = screenshots.map((sc) => screenshotUrl(sc.file_path, sc.id))
+
+  // Group screenshots by template
+  const groups = useMemo((): ScreenshotGroup[] => {
+    const map = new Map<string, { screenshots: Screenshot[]; indices: number[] }>()
+    screenshots.forEach((sc, i) => {
+      const group = extractGroup(sc)
+      const existing = map.get(group) || { screenshots: [], indices: [] }
+      existing.screenshots.push(sc)
+      existing.indices.push(i)
+      map.set(group, existing)
+    })
+    return Array.from(map.entries()).map(([name, data]) => ({
+      name,
+      screenshots: data.screenshots,
+      indices: data.indices,
+    }))
+  }, [screenshots])
+
+  const hasMultipleGroups = groups.length > 1 || (groups.length === 1 && groups[0].name !== "_default")
+
+  const goNext = useCallback(() => {
+    if (activeIndex === null) return
+    setActiveIndex((activeIndex + 1) % screenshots.length)
+  }, [activeIndex, screenshots.length])
+
+  const goPrev = useCallback(() => {
+    if (activeIndex === null) return
+    setActiveIndex((activeIndex - 1 + screenshots.length) % screenshots.length)
+  }, [activeIndex, screenshots.length])
+
+  const close = useCallback(() => setActiveIndex(null), [])
+
+  useEffect(() => {
+    if (activeIndex === null) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight") goNext()
+      else if (e.key === "ArrowLeft") goPrev()
+      else if (e.key === "Escape") close()
+    }
+    window.addEventListener("keydown", handler)
+    return () => window.removeEventListener("keydown", handler)
+  }, [activeIndex, goNext, goPrev, close])
+
+  useEffect(() => {
+    if (!ref.current) return
+    if (screenshots.length === prevCountRef.current) return
+    const isInitial = prevCountRef.current === 0
+    prevCountRef.current = screenshots.length
+    if (isInitial) {
+      const cards = ref.current.querySelectorAll(".ss-card")
+      gsap.fromTo(
+        cards,
+        { opacity: 0, scale: 0.95 },
+        { opacity: 1, scale: 1, duration: 0.3, stagger: 0.06, ease: "power2.out" }
+      )
+    }
+  }, [screenshots])
+
+  const activeSc = activeIndex !== null ? screenshots[activeIndex] : null
+  const activeUrl = activeIndex !== null ? fullUrls[activeIndex] : null
+
+  const renderCard = (sc: Screenshot, flatIndex: number) => {
+    const score = extractScore(sc.description)
+    return (
+      <div
+        key={sc.id}
+        className="ss-card border border-border rounded overflow-hidden cursor-pointer hover:border-accent transition-colors duration-200 group"
+        onClick={() => setActiveIndex(flatIndex)}
+      >
+        <div className="relative">
+          <img
+            src={thumbUrls[flatIndex]}
+            alt={sc.description}
+            loading="lazy"
+            className="w-full h-32 object-cover block opacity-80 group-hover:opacity-100 transition-opacity"
+            onError={(e) => {
+              ;(e.target as HTMLImageElement).style.display = "none"
+            }}
+          />
+          {score !== null && (
+            <span
+              className={cn(
+                "absolute top-1 right-1 text-[10px] font-bold font-mono px-1.5 py-0.5 rounded bg-bg/80 border border-border",
+                scoreColor(score)
+              )}
+            >
+              {score.toFixed(1)}
+            </span>
+          )}
+          <span className="absolute bottom-1 left-1 text-[9px] px-1 py-0.5 rounded bg-bg/80 text-text-muted">
+            {sc.phase}
+          </span>
+        </div>
+        <div className="p-2 text-[10px] text-text-muted truncate">
+          <span className="text-accent mr-1">{"\u25B8"}</span>
+          {sc.description}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div ref={ref}>
+        {hasMultipleGroups ? (
+          // Grouped view
+          groups.map((group) => (
+            <div key={group.name} className="mb-4">
+              <div className="text-[10px] text-text-muted uppercase tracking-wider mb-2 flex items-center gap-2">
+                <span className="text-accent">{"\u25B8"}</span>
+                {group.name === "_default" ? "screenshots" : group.name}
+                <span className="text-text-dim">({group.screenshots.length})</span>
+              </div>
+              <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3">
+                {group.screenshots.map((sc, gi) => renderCard(sc, group.indices[gi]))}
+              </div>
+            </div>
+          ))
+        ) : (
+          // Flat view
+          <div className="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3">
+            {screenshots.map((sc, i) => renderCard(sc, i))}
+          </div>
+        )}
+      </div>
+
+      {/* Modal */}
+      {activeIndex !== null && activeUrl && activeSc && createPortal(
+        <div
+          className="fixed inset-0 bg-black/80 z-[200] flex items-center justify-center"
+          onClick={close}
+        >
+          <div
+            className="bg-bg-elevated border border-border rounded-lg shadow-2xl w-[85vw] h-[85vh] flex flex-col overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-2 border-b border-border flex-shrink-0">
+              <div className="flex items-center gap-3">
+                <span className="text-[10px] text-text-muted font-mono">
+                  {activeSc.description}
+                </span>
+                {(() => {
+                  const score = extractScore(activeSc.description)
+                  return score !== null ? (
+                    <span className={cn("text-[11px] font-bold font-mono", scoreColor(score))}>
+                      {score.toFixed(1)}/10
+                    </span>
+                  ) : null
+                })()}
+              </div>
+              <div className="flex items-center gap-3">
+                <span className="text-[10px] text-text-dim font-mono">
+                  {activeIndex + 1}/{screenshots.length}
+                </span>
+                <span className="text-[9px] text-text-dim">
+                  {"\u2190"} {"\u2192"} navigate
+                </span>
+                <button onClick={close} className="text-text-dim hover:text-text text-sm">&times;</button>
+              </div>
+            </div>
+
+            {/* Main image */}
+            <div className="flex-1 flex items-center justify-center p-6 overflow-hidden relative">
+              <button
+                onClick={goPrev}
+                className="absolute left-3 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded bg-bg/80 border border-border text-text-dim hover:text-accent hover:border-accent transition-colors"
+              >
+                {"\u2190"}
+              </button>
+              <img
+                src={activeUrl}
+                alt={activeSc.description}
+                className="max-w-full max-h-full object-contain rounded"
+              />
+              <button
+                onClick={goNext}
+                className="absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded bg-bg/80 border border-border text-text-dim hover:text-accent hover:border-accent transition-colors"
+              >
+                {"\u2192"}
+              </button>
+            </div>
+
+            {/* Gallery strip */}
+            <div className="border-t border-border px-4 py-2 flex gap-2 overflow-x-auto flex-shrink-0">
+              {screenshots.map((sc, i) => (
+                <img
+                  key={sc.id}
+                  src={thumbUrls[i]}
+                  alt={sc.description}
+                  onClick={() => setActiveIndex(i)}
+                  className={cn(
+                    "h-14 w-20 object-cover rounded cursor-pointer flex-shrink-0 border-2 transition-all",
+                    i === activeIndex
+                      ? "border-accent opacity-100"
+                      : "border-transparent opacity-50 hover:opacity-80"
+                  )}
+                  onError={(e) => {
+                    ;(e.target as HTMLImageElement).style.display = "none"
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}