tanuki-telemetry 1.1.0

package/frontend/src/components/Timeline.tsx

@@ -0,0 +1,416 @@
+import { useRef, useEffect, useState, useMemo, type ReactNode } from "react"
+import { createPortal } from "react-dom"
+import gsap from "gsap"
+import { HelpCircle, Play, AlertTriangle, Wrench, Minus, Hash, CheckCircle2, XCircle, RotateCw, ArrowRight, DollarSign, Layers, Star } from "lucide-react"
+import type { Event, Screenshot } from "@/types"
+import { relativeTime, screenshotUrl, cn } from "@/lib/utils"
+
+interface Props {
+  events: Event[]
+  sessionStart: string
+  screenshots?: Screenshot[]
+}
+
+export function Timeline({ events, sessionStart, screenshots = [] }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const prevCountRef = useRef(0)
+
+  useEffect(() => {
+    if (!ref.current) return
+    // Only animate new items, not on every refresh
+    const currentCount = events.length
+    if (currentCount === prevCountRef.current) return
+    const isInitial = prevCountRef.current === 0
+    prevCountRef.current = currentCount
+
+    if (isInitial) {
+      const items = ref.current.querySelectorAll(".tl-item")
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -8 },
+        { opacity: 1, x: 0, duration: 0.25, stagger: 0.03, ease: "power2.out" }
+      )
+    }
+  }, [events])
+
+  // Build map of event_id → linked screenshots
+  const eventScreenshots = useMemo(() => {
+    const map = new Map<number, Screenshot[]>()
+    for (const sc of screenshots) {
+      if (sc.event_id) {
+        const existing = map.get(sc.event_id) || []
+        existing.push(sc)
+        map.set(sc.event_id, existing)
+      }
+    }
+    return map
+  }, [screenshots])
+
+  return (
+    <div ref={ref} className="mt-2 space-y-0">
+      {events.map((ev) => (
+        <TimelineItem key={ev.id} event={ev} sessionStart={sessionStart} linkedScreenshots={eventScreenshots.get(ev.id)} />
+      ))}
+    </div>
+  )
+}
+
+function TimelineItem({
+  event,
+  sessionStart,
+  linkedScreenshots,
+}: {
+  event: Event
+  sessionStart: string
+  linkedScreenshots?: Screenshot[]
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const hasMeta = event.metadata && event.metadata !== "null"
+  const detailRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!detailRef.current) return
+    if (expanded) {
+      gsap.fromTo(
+        detailRef.current,
+        { height: 0, opacity: 0 },
+        { height: "auto", opacity: 1, duration: 0.25, ease: "power2.out" }
+      )
+    }
+  }, [expanded])
+
+  const parsedMeta: object | string | null = hasMeta ? (safeParse(event.metadata!) as object | string) : null
+  const tokensUsed = event.tokens_used
+  const hasMetaScreenshot = parsedMeta && typeof parsedMeta === "object" && !Array.isArray(parsedMeta) &&
+    ["screenshot", "screenshot_path", "file_path", "image", "image_path"].some((k) => {
+      const v = (parsedMeta as Record<string, unknown>)[k]
+      return typeof v === "string" && /\.(png|jpg|jpeg|gif|webp)$/i.test(v)
+    })
+  const hasLinkedScreenshots = linkedScreenshots && linkedScreenshots.length > 0
+  const hasScreenshot = hasMetaScreenshot || hasLinkedScreenshots
+
+  const phaseColors: Record<string, string> = {
+    setup: "text-info",
+    scope: "text-purple",
+    implementation: "text-warning",
+    verification: "text-accent",
+    deliverables: "text-accent",
+  }
+
+  const eventColors: Record<string, string> = {
+    decision: "text-info",
+    action: "text-accent",
+    error: "text-error",
+    fix: "text-warning",
+    info: "text-text-muted",
+    phase_change: "text-purple",
+    review_pass: "text-accent",
+    review_flag: "text-error",
+    review_dispatch: "text-info",
+    error_resolve: "text-accent",
+    cost_checkpoint: "text-text-dim",
+    pattern_detect: "text-purple",
+    knowledge_extract: "text-warning",
+  }
+
+  const eventIcons: Record<string, ReactNode> = {
+    decision: <HelpCircle size={10} />,
+    action: <Play size={10} />,
+    error: <AlertTriangle size={10} />,
+    fix: <Wrench size={10} />,
+    info: <Minus size={10} />,
+    phase_change: <Hash size={10} />,
+    review_pass: <CheckCircle2 size={10} />,
+    review_flag: <XCircle size={10} />,
+    review_dispatch: <RotateCw size={10} />,
+    error_resolve: <ArrowRight size={10} />,
+    cost_checkpoint: <DollarSign size={10} />,
+    pattern_detect: <Layers size={10} />,
+    knowledge_extract: <Star size={10} />,
+  }
+
+  const isExpandable = hasMeta || tokensUsed > 0
+  const isError = event.event_type === "error" || event.event_type === "review_flag"
+  const isPhaseChange = event.event_type === "phase_change"
+  return (
+    <div
+      className={cn(
+        "tl-item border-l-2 ml-1 transition-colors duration-150",
+        event.event_type === "review_flag"
+          ? "border-l-error/40 bg-error/[0.03]"
+          : event.event_type === "review_pass"
+          ? "border-l-accent/40 bg-accent/[0.03]"
+          : event.event_type === "review_dispatch"
+          ? "border-l-info/30 bg-info/[0.02]"
+          : event.event_type === "error_resolve"
+          ? "border-l-accent/40 bg-accent/[0.02]"
+          : event.event_type === "knowledge_extract"
+          ? "border-l-warning/40 bg-warning/[0.03]"
+          : event.event_type === "pattern_detect"
+          ? "border-l-purple/40 bg-purple/[0.03]"
+          : isError
+          ? "border-l-error/40 bg-error/[0.03]"
+          : isPhaseChange
+          ? "border-l-purple/60"
+          : "border-l-border-bright",
+        isExpandable && "cursor-pointer",
+        expanded && "bg-bg-hover"
+      )}
+      onClick={() => isExpandable && setExpanded(!expanded)}
+    >
+      {/* Main row */}
+      <div className="flex gap-2 pt-2 pb-1.5 px-2 hover:bg-bg-hover transition-colors duration-150 group items-baseline">
+        {/* Timestamp */}
+        <span className="text-[10px] text-text-dim w-11 flex-shrink-0 font-mono tabular-nums leading-none">
+          {relativeTime(event.timestamp, sessionStart)}
+        </span>
+
+        {/* Icon */}
+        <span
+          className={cn(
+            "text-[10px] w-3 flex-shrink-0 font-bold text-center",
+            eventColors[event.event_type] || "text-text-muted"
+          )}
+        >
+          {eventIcons[event.event_type] || "-"}
+        </span>
+
+        {/* Phase tag */}
+        <span
+          className={cn(
+            "text-[10px] w-14 flex-shrink-0 uppercase tracking-wider truncate leading-none",
+            phaseColors[event.phase.toLowerCase()] || "text-text-muted"
+          )}
+        >
+          {event.phase.slice(0, 8)}
+        </span>
+
+        {/* Event type tag */}
+        <span
+          className={cn(
+            "text-[9px] px-1 py-px border rounded flex-shrink-0 uppercase tracking-wider",
+            event.event_type === "error"
+              ? "border-error/30 text-error"
+              : event.event_type === "fix"
+              ? "border-warning/30 text-warning"
+              : event.event_type === "action"
+              ? "border-accent/20 text-accent/70"
+              : event.event_type === "decision"
+              ? "border-info/30 text-info"
+              : event.event_type === "phase_change"
+              ? "border-purple/30 text-purple"
+              : event.event_type === "review_pass"
+              ? "border-accent/40 text-accent bg-accent/5"
+              : event.event_type === "review_flag"
+              ? "border-error/40 text-error bg-error/5"
+              : event.event_type === "review_dispatch"
+              ? "border-info/30 text-info bg-info/5"
+              : event.event_type === "error_resolve"
+              ? "border-accent/30 text-accent bg-accent/5"
+              : event.event_type === "cost_checkpoint"
+              ? "border-border text-text-dim"
+              : event.event_type === "pattern_detect"
+              ? "border-purple/30 text-purple bg-purple/5"
+              : event.event_type === "knowledge_extract"
+              ? "border-warning/30 text-warning bg-warning/5"
+              : "border-border text-text-dim"
+          )}
+        >
+          {event.event_type.replace("_", " ")}
+        </span>
+
+        {/* Message */}
+        <div className="flex-1 min-w-0">
+          <span
+            className={cn(
+              "text-xs break-words",
+              isError ? "text-error/90" : "text-text"
+            )}
+          >
+            {event.message}
+          </span>
+        </div>
+
+        {/* Screenshot + expand indicator */}
+        <span className="flex items-center gap-1 flex-shrink-0">
+          {hasScreenshot && (
+            <span className="text-[10px] text-accent" title="has screenshot">
+              {"\uD83D\uDDBC"}
+            </span>
+          )}
+          {isExpandable && (
+            <span className="text-[10px] text-text-dim opacity-0 group-hover:opacity-100 transition-opacity">
+              {expanded ? "\u25BE" : "\u25B8"}
+            </span>
+          )}
+        </span>
+      </div>
+
+      {/* Expanded detail panel */}
+      {expanded && isExpandable && (
+        <div
+          ref={detailRef}
+          data-expand
+          className="overflow-hidden"
+        >
+          <div className="mx-2 mb-2 ml-8 border border-border rounded bg-bg">
+            {/* Detail header */}
+            <div className="flex items-center gap-3 px-3 py-1.5 border-b border-border text-[10px] text-text-dim">
+              <span>
+                EVENT #{event.id}
+              </span>
+              <span className="text-border-bright">|</span>
+              <span>
+                phase: <span className={phaseColors[event.phase.toLowerCase()] || "text-text-muted"}>{event.phase}</span>
+              </span>
+              <span className="text-border-bright">|</span>
+              <span>
+                type: <span className={eventColors[event.event_type] || "text-text-muted"}>{event.event_type}</span>
+              </span>
+              {tokensUsed > 0 && (
+                <>
+                  <span className="text-border-bright">|</span>
+                  <span>
+                    tokens: <span className="text-text">{tokensUsed.toLocaleString()}</span>
+                  </span>
+                </>
+              )}
+            </div>
+
+            {/* Metadata */}
+            {parsedMeta && (
+              <div className="px-3 py-2">
+                {typeof parsedMeta === "object" && parsedMeta !== null && !Array.isArray(parsedMeta) ? (
+                  <MetadataTable data={parsedMeta as Record<string, unknown>} />
+                ) : (
+                  <pre className="text-[10px] text-text-muted whitespace-pre-wrap overflow-auto max-h-64">
+                    {JSON.stringify(parsedMeta, null, 2)}
+                  </pre>
+                )}
+              </div>
+            )}
+
+            {/* No metadata but has tokens */}
+            {!parsedMeta && tokensUsed > 0 && (
+              <div className="px-3 py-2 text-[10px] text-text-dim">
+                <span className="text-text-muted">tokens_used:</span>{" "}
+                <span className="text-text">{tokensUsed.toLocaleString()}</span>
+              </div>
+            )}
+
+            {/* Inline screenshot if metadata contains screenshot/image path */}
+            {parsedMeta && <InlineScreenshot meta={parsedMeta as Record<string, unknown>} />}
+
+            {/* Linked screenshots via event_id */}
+            {hasLinkedScreenshots && (
+              <div className="px-3 py-2 border-t border-border">
+                <div className="text-[9px] text-text-dim uppercase tracking-wider mb-1">LINKED SCREENSHOTS</div>
+                <div className="flex gap-2 overflow-x-auto">
+                  {linkedScreenshots!.map((sc) => (
+                    <img
+                      key={sc.id}
+                      src={screenshotUrl(sc.file_path, sc.id, "thumb")}
+                      alt={sc.description}
+                      title={sc.description}
+                      className="h-20 w-auto rounded border border-border cursor-pointer hover:border-accent transition-colors flex-shrink-0"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = "none" }}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function MetadataTable({ data }: { data: Record<string, unknown> }) {
+  return (
+    <div className="space-y-1">
+      {Object.entries(data).map(([key, value]) => (
+        <div key={key} className="flex gap-2 text-[10px]">
+          <span className="text-accent/60 flex-shrink-0 min-w-[100px]">{key}:</span>
+          <span className="text-text-muted break-all">
+            {renderValue(value)}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function renderValue(value: unknown): string {
+  if (value === null || value === undefined) return "null"
+  if (typeof value === "string") return value
+  if (typeof value === "number" || typeof value === "boolean") return String(value)
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]"
+    if (value.every((v) => typeof v === "string")) return value.join(", ")
+    return JSON.stringify(value, null, 2)
+  }
+  return JSON.stringify(value, null, 2)
+}
+
+function InlineScreenshot({ meta }: { meta: Record<string, unknown> }) {
+  // Look for screenshot paths in metadata
+  const screenshotKeys = ["screenshot", "screenshot_path", "file_path", "image", "image_path"]
+  let imgPath: string | null = null
+
+  for (const key of screenshotKeys) {
+    const val = meta[key]
+    if (typeof val === "string" && (val.endsWith(".png") || val.endsWith(".jpg") || val.endsWith(".jpeg") || val.endsWith(".gif") || val.endsWith(".webp"))) {
+      imgPath = val
+      break
+    }
+  }
+
+  if (!imgPath) return null
+
+  const url = screenshotUrl(imgPath)
+  const [lightbox, setLightbox] = useState(false)
+
+  return (
+    <>
+      <div className="px-3 py-2 border-t border-border">
+        <div className="text-[9px] text-text-dim uppercase tracking-wider mb-1">SCREENSHOT</div>
+        <img
+          src={url}
+          alt=""
+          className="max-w-full max-h-48 rounded border border-border cursor-pointer hover:border-accent transition-colors"
+          onClick={(e) => { e.stopPropagation(); setLightbox(true) }}
+          onError={(e) => { (e.target as HTMLImageElement).style.display = "none" }}
+        />
+      </div>
+      {lightbox && createPortal(
+        <div
+          className="fixed inset-0 bg-black/80 z-[200] flex items-center justify-center"
+          onClick={(e) => { e.stopPropagation(); setLightbox(false) }}
+        >
+          <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()}
+          >
+            <div className="flex items-center justify-between px-4 py-2 border-b border-border flex-shrink-0">
+              <span className="text-[10px] text-text-muted font-mono">screenshot preview</span>
+              <button onClick={(e) => { e.stopPropagation(); setLightbox(false) }} className="text-text-dim hover:text-text text-sm">&times;</button>
+            </div>
+            <div className="flex-1 flex items-center justify-center p-6 overflow-hidden">
+              <img src={url} alt="" className="max-w-full max-h-full object-contain rounded" />
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}
+
+function safeParse(str: string): unknown {
+  try {
+    return JSON.parse(str)
+  } catch {
+    return str
+  }
+}