tanuki-telemetry 1.1.0

package/frontend/src/components/CoordinatorPage.tsx

@@ -0,0 +1,317 @@
+import { useState, useEffect, useRef, useCallback, type ReactNode } from "react"
+import gsap from "gsap"
+import { Circle, Play, CheckCircle2, AlertTriangle, PauseCircle, Search } from "lucide-react"
+import { cn, timeAgo } from "@/lib/utils"
+import { apiFetch } from "@/lib/api"
+import { TanukiLogo } from "./TanukiLogo"
+import type { Event } from "@/types"
+import type { WsMessage } from "@/hooks/useWebSocket"
+
+interface WorkspaceState {
+  name: string
+  status: "idle" | "working" | "done" | "failed" | "paused"
+  last_task?: string
+  pending?: string[]
+  session_id?: string
+  last_updated?: string
+}
+
+interface CoordinatorState {
+  session_id: string
+  started_at: string
+  last_updated: string
+  workspaces: Record<string, WorkspaceState>
+  pending_tasks: string[]
+  decisions: string[]
+  notes: string
+}
+
+interface CoordinatorDetail {
+  state: CoordinatorState
+  history: Array<{ timestamp: string; summary: string; key_decisions: string[]; pending_work: string[] }>
+}
+
+interface LiveEvent extends Event {
+  worktree_name: string
+}
+
+interface LiveData {
+  events: LiveEvent[]
+  workspace_events: Record<string, LiveEvent>
+}
+
+const statusColors: Record<string, string> = {
+  idle: "text-text-dim border-border",
+  working: "text-warning border-warning/40",
+  done: "text-accent border-accent/40",
+  failed: "text-error border-error/40",
+  paused: "text-info border-info/40",
+}
+
+const statusBorderL: Record<string, string> = {
+  idle: "border-l-border",
+  working: "border-l-warning",
+  done: "border-l-accent/40",
+  failed: "border-l-error/40",
+  paused: "border-l-info/40",
+}
+
+const statusIcons: Record<string, ReactNode> = {
+  idle: <Circle size={10} />,
+  working: <Play size={10} fill="currentColor" />,
+  done: <CheckCircle2 size={10} />,
+  failed: <AlertTriangle size={10} />,
+  paused: <PauseCircle size={10} />,
+}
+
+const eventTypeColors: Record<string, string> = {
+  action: "text-accent",
+  decision: "text-info",
+  error: "text-error",
+  fix: "text-warning",
+  info: "text-text-dim",
+  phase_change: "text-accent",
+  review_pass: "text-accent",
+  review_flag: "text-error",
+}
+
+export function CoordinatorPage({ wsMessages = [] }: { wsMessages?: WsMessage[] }) {
+  const [detail, setDetail] = useState<CoordinatorDetail | null>(null)
+  const [liveData, setLiveData] = useState<LiveData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [showSearch, setShowSearch] = useState(false)
+  const feedRef = useRef<HTMLDivElement>(null)
+  const workspacesRef = useRef<HTMLDivElement>(null)
+  const autoScroll = useRef(true)
+
+  // Load the latest coordinator session
+  const loadLatest = useCallback(() => {
+    apiFetch("/api/coordinator/sessions?limit=1")
+      .then((r) => r.json())
+      .then((data) => {
+        setLoading(false)
+        if (data.length > 0) {
+          const id = data[0].session_id
+          apiFetch(`/api/coordinator/sessions/${id}`)
+            .then((r) => r.json())
+            .then(setDetail)
+            .catch(() => {})
+          apiFetch(`/api/coordinator/sessions/${id}/live`)
+            .then((r) => r.json())
+            .then(setLiveData)
+            .catch(() => {})
+        }
+      })
+      .catch(() => setLoading(false))
+  }, [])
+
+  useEffect(() => { loadLatest() }, [loadLatest])
+
+  const reloadLive = useCallback(() => {
+    if (!detail) return
+    apiFetch(`/api/coordinator/sessions/${detail.state.session_id}/live`)
+      .then((r) => r.json())
+      .then(setLiveData)
+      .catch(() => {})
+  }, [detail])
+
+  // Poll live data
+  useEffect(() => {
+    if (!detail) return
+    const interval = setInterval(reloadLive, 2000)
+    return () => clearInterval(interval)
+  }, [detail, reloadLive])
+
+  // React to WS
+  useEffect(() => {
+    if (wsMessages.length === 0) return
+    const latest = wsMessages[wsMessages.length - 1]
+    if (latest.type === "coordinator_update") {
+      loadLatest()
+    }
+    if (latest.type === "event" || latest.type === "session_update") {
+      reloadLive()
+    }
+  }, [wsMessages, loadLatest, reloadLive])
+
+  // Auto-scroll feed to bottom
+  useEffect(() => {
+    if (feedRef.current && autoScroll.current) {
+      feedRef.current.scrollTop = feedRef.current.scrollHeight
+    }
+  }, [liveData])
+
+  // Detect manual scroll to disable auto-scroll
+  const handleFeedScroll = () => {
+    if (!feedRef.current) return
+    const { scrollTop, scrollHeight, clientHeight } = feedRef.current
+    autoScroll.current = scrollHeight - scrollTop - clientHeight < 40
+  }
+
+  // Animate workspaces on load
+  useEffect(() => {
+    if (!workspacesRef.current || !detail) return
+    const items = workspacesRef.current.querySelectorAll("[data-ws]")
+    gsap.fromTo(items, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.2, stagger: 0.04, ease: "power2.out" })
+  }, [detail?.state.session_id])
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-dim text-xs">
+        loading coordinator...
+      </div>
+    )
+  }
+
+  if (!detail) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-dim text-xs">
+        <div className="text-center space-y-2">
+          <div className="text-text-muted">no coordinator session</div>
+          <div className="text-[10px]">use save_coordinator_state to start one</div>
+        </div>
+      </div>
+    )
+  }
+
+  const state = detail.state
+  const workspaceEntries = Object.entries(state.workspaces)
+  const events = liveData?.events || []
+  const workspaceEvents = liveData?.workspace_events || {}
+
+  const filteredEvents = search
+    ? events.filter((ev) =>
+        ev.message.toLowerCase().includes(search.toLowerCase()) ||
+        ev.worktree_name.toLowerCase().includes(search.toLowerCase()) ||
+        ev.event_type.toLowerCase().includes(search.toLowerCase())
+      )
+    : events
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Live feed — terminal tail */}
+      <div className="flex-shrink-0 border-b border-border flex flex-col" style={{ height: "40%" }}>
+        {/* Feed header */}
+        <div className="flex items-center justify-between px-4 h-9 border-b border-border bg-bg flex-shrink-0">
+          <div className="flex items-center gap-3">
+            <span className="text-text-dim text-[10px]">
+              <span className="text-accent">$</span> tail -f coordinator/
+            </span>
+            <span className="text-[10px] text-text-dim">{events.length}</span>
+            {autoScroll.current && events.length > 0 && (
+              <span className="inline-block w-1.5 h-1.5 bg-accent animate-pulse" />
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {showSearch && (
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="filter logs..."
+                autoFocus
+                className="bg-bg border border-border px-2 py-0.5 text-[10px] text-text font-mono w-48 focus:outline-none focus:border-accent/50"
+              />
+            )}
+            <button
+              onClick={() => { setShowSearch(!showSearch); if (showSearch) setSearch("") }}
+              className={cn("text-text-dim hover:text-accent transition-colors cursor-pointer", showSearch && "text-accent")}
+            >
+              <Search size={12} />
+            </button>
+            {/* Mascot */}
+            <div className="ml-2">
+              <TanukiLogo className="w-5 h-5 text-accent/30 animate-pulse" />
+            </div>
+          </div>
+        </div>
+
+        {/* Feed body */}
+        <div
+          ref={feedRef}
+          onScroll={handleFeedScroll}
+          className="flex-1 overflow-y-auto font-mono text-[10px] px-3 py-1 bg-bg"
+        >
+          {filteredEvents.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-text-dim">
+              {search ? "no matching events" : "waiting for events..."}
+            </div>
+          ) : (
+            filteredEvents.map((ev) => (
+              <div key={ev.id} className="flex items-start gap-2 py-px hover:bg-bg-hover transition-colors leading-tight">
+                <span className="text-text-dim w-[52px] flex-shrink-0 tabular-nums">
+                  {ev.timestamp.slice(11, 19)}
+                </span>
+                <span className={cn(
+                  "font-bold w-[65px] flex-shrink-0 uppercase text-[9px]",
+                  eventTypeColors[ev.event_type] || "text-text-dim"
+                )}>
+                  {ev.event_type}
+                </span>
+                <span className="text-info w-[90px] flex-shrink-0 truncate">
+                  {ev.worktree_name}
+                </span>
+                <span className="text-text-muted flex-1 truncate">
+                  {ev.message}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Workspaces + state — bottom section */}
+      <div ref={workspacesRef} className="flex-1 overflow-y-auto p-4">
+        {/* Workspace grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+          {workspaceEntries.map(([id, ws]) => {
+            const lastEvent = ws.session_id ? workspaceEvents[ws.session_id] : undefined
+            return (
+              <div
+                key={id}
+                data-ws
+                className={cn(
+                  "border border-border border-l-2 p-2.5 transition-colors bg-bg",
+                  statusBorderL[ws.status] || "border-l-border"
+                )}
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  <span className={cn("flex-shrink-0", statusColors[ws.status])}>
+                    {statusIcons[ws.status]}
+                  </span>
+                  <span className="text-[11px] font-bold text-text truncate flex-1">{ws.name}</span>
+                  <span className={cn(
+                    "text-[9px] font-mono uppercase tracking-wider font-bold flex-shrink-0",
+                    statusColors[ws.status]
+                  )}>{ws.status}</span>
+                </div>
+
+                {ws.last_task && (
+                  <div className="text-[10px] text-text-muted pl-5 truncate">{ws.last_task}</div>
+                )}
+
+                {lastEvent && (
+                  <div className="pl-5 mt-1 text-[10px] text-text-dim truncate">
+                    <span className={cn("font-bold mr-1", eventTypeColors[lastEvent.event_type])}>
+                      {lastEvent.event_type}
+                    </span>
+                    {lastEvent.message}
+                    <span className="ml-1 text-text-dim">{timeAgo(lastEvent.timestamp)}</span>
+                  </div>
+                )}
+
+                {ws.pending && ws.pending.length > 0 && (
+                  <div className="pl-5 mt-1 text-[10px] text-text-dim">
+                    {ws.pending.length} pending
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/Header.tsx

@@ -0,0 +1,108 @@
+import { useRef, useEffect, useState } from "react"
+import gsap from "gsap"
+import { ArrowUp } from "lucide-react"
+import type { Stats } from "@/types"
+import { formatTokens, cn } from "@/lib/utils"
+import { TanukiLogo } from "./TanukiLogo"
+
+// Baked at build time — compare against /api/version to detect updates
+const CLIENT_VERSION = "1.1.0"
+
+export function Header({ stats }: { stats: Stats | null }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const statsRef = useRef<HTMLDivElement>(null)
+  const [serverVersion, setServerVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    gsap.fromTo(
+      ref.current.children,
+      { opacity: 0 },
+      { opacity: 1, duration: 0.3, stagger: 0.06, ease: "power2.out" }
+    )
+  }, [])
+
+  useEffect(() => {
+    if (!statsRef.current || !stats) return
+    gsap.fromTo(
+      statsRef.current.children,
+      { opacity: 0 },
+      { opacity: 1, duration: 0.25, stagger: 0.05, ease: "power2.out" }
+    )
+  }, [stats])
+
+  // Check for version mismatch periodically
+  useEffect(() => {
+    const check = () => {
+      fetch("/api/version")
+        .then((r) => r.json())
+        .then((data) => setServerVersion(data.version))
+        .catch(() => {})
+    }
+    check()
+    const interval = setInterval(check, 60000) // check every minute
+    return () => clearInterval(interval)
+  }, [])
+
+  const updateAvailable = serverVersion && serverVersion !== CLIENT_VERSION
+
+  return (
+    <div
+      ref={ref}
+      className="border-b border-border px-4 py-2 flex items-center gap-4 bg-bg-elevated flex-shrink-0"
+    >
+      <div className="flex items-center gap-2.5 select-none">
+        <TanukiLogo className="w-6 h-6 text-accent" />
+        <span className="text-accent text-[11px] font-bold tracking-widest">TANUKI</span>
+        <span className="text-[9px] text-text-dim font-mono">v{CLIENT_VERSION}</span>
+      </div>
+      <div className="h-4 w-px bg-border" />
+      {stats && (
+        <div ref={statsRef} className="flex gap-5 text-[11px] text-text-muted">
+          <StatItem label="sessions" value={String(stats.total_sessions)} />
+          <StatItem label="avg iter" value={String(stats.avg_iterations)} />
+          <StatItem label="tokens" value={formatTokens(stats.total_tokens)} />
+          <StatItem
+            label="pass"
+            value={stats.pass_rate + "%"}
+            accent={stats.pass_rate >= 70}
+          />
+        </div>
+      )}
+      <div className="ml-auto flex items-center gap-2 text-text-dim text-[10px]">
+        {updateAvailable && (
+          <button
+            onClick={() => window.location.reload()}
+            className={cn(
+              "flex items-center gap-1 px-2 py-0.5 border border-warning text-warning text-[9px] font-bold cursor-pointer",
+              "hover:bg-warning hover:text-bg transition-colors animate-pulse"
+            )}
+          >
+            <ArrowUp size={10} />
+            v{serverVersion}
+          </button>
+        )}
+        <span className="inline-block w-1 h-1 bg-accent" />
+      </div>
+    </div>
+  )
+}
+
+function StatItem({
+  label,
+  value,
+  accent,
+}: {
+  label: string
+  value: string
+  accent?: boolean
+}) {
+  return (
+    <span>
+      <span className={accent ? "text-accent font-bold" : "text-text font-bold"}>
+        {value}
+      </span>{" "}
+      {label}
+    </span>
+  )
+}

package/frontend/src/components/InsightsPanel.tsx

@@ -0,0 +1,142 @@
+import { useRef, useEffect, type ReactNode } from "react"
+import gsap from "gsap"
+import { AlertTriangle, CheckCircle2, HelpCircle, ArrowRight, BookOpen } from "lucide-react"
+import type { Insight } from "@/types"
+import { cn } from "@/lib/utils"
+
+interface Props {
+  insights: Insight[]
+}
+
+const typeIcons: Record<string, ReactNode> = {
+  mistake: <AlertTriangle size={10} />,
+  success_pattern: <CheckCircle2 size={10} />,
+  codebase_gotcha: <HelpCircle size={10} />,
+  optimization: <ArrowRight size={10} />,
+  rule_learned: <BookOpen size={10} />,
+}
+
+const typeColors: Record<string, string> = {
+  mistake: "text-error border-error/30",
+  success_pattern: "text-accent border-accent/30",
+  codebase_gotcha: "text-warning border-warning/30",
+  optimization: "text-info border-info/30",
+  rule_learned: "text-purple border-purple/30",
+}
+
+export function InsightsPanel({ insights }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const prevCountRef = useRef(0)
+
+  useEffect(() => {
+    if (!ref.current) return
+    if (insights.length === prevCountRef.current) return
+    const isInitial = prevCountRef.current === 0
+    prevCountRef.current = insights.length
+    if (isInitial) {
+      const items = ref.current.querySelectorAll(".insight-card")
+      gsap.fromTo(
+        items,
+        { opacity: 0, y: 8 },
+        { opacity: 1, y: 0, duration: 0.3, stagger: 0.06, ease: "power2.out" }
+      )
+    }
+  }, [insights])
+
+  if (insights.length === 0) return null
+
+  return (
+    <div ref={ref} className="mt-2 space-y-2">
+      {insights.map((ins) => {
+        const filePatterns = ins.file_patterns
+          ? (JSON.parse(ins.file_patterns) as string[])
+          : []
+        const errorPatterns = ins.error_patterns
+          ? (JSON.parse(ins.error_patterns) as string[])
+          : []
+
+        return (
+          <div
+            key={ins.id}
+            className="insight-card border border-border rounded bg-bg p-3 hover:bg-bg-hover transition-colors duration-150"
+          >
+            {/* Header row */}
+            <div className="flex items-start gap-2 mb-2">
+              <span
+                className={cn(
+                  "text-[10px] px-1.5 py-0.5 border rounded font-bold font-mono flex-shrink-0",
+                  typeColors[ins.insight_type] || "text-text-dim border-border"
+                )}
+              >
+                {typeIcons[ins.insight_type] || "--"}
+              </span>
+              <div className="flex-1 min-w-0">
+                <div className="text-xs font-bold text-text">{ins.title}</div>
+                <div className="flex items-center gap-2 mt-0.5 text-[10px] text-text-dim">
+                  <span className="text-text-muted">{ins.category}</span>
+                  <span className="text-border-bright">|</span>
+                  <ConfidenceBar confidence={ins.confidence} />
+                  {ins.times_validated > 0 && (
+                    <>
+                      <span className="text-border-bright">|</span>
+                      <span>
+                        validated{" "}
+                        <span className="text-accent">{ins.times_validated}x</span>
+                      </span>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="text-[11px] text-text-muted leading-relaxed mb-2 pl-8">
+              {ins.description}
+            </div>
+
+            {/* Evidence */}
+            {ins.evidence && (
+              <div className="pl-8 mb-2">
+                <pre className="text-[10px] text-text-dim bg-bg-elevated border border-border rounded p-2 overflow-auto max-h-24 whitespace-pre-wrap">
+                  {ins.evidence}
+                </pre>
+              </div>
+            )}
+
+            {/* Patterns */}
+            {(filePatterns.length > 0 || errorPatterns.length > 0) && (
+              <div className="pl-8 flex gap-3 flex-wrap text-[10px]">
+                {filePatterns.length > 0 && (
+                  <span className="text-text-dim">
+                    <span className="text-accent mr-1">files:</span>
+                    {filePatterns.join(", ")}
+                  </span>
+                )}
+                {errorPatterns.length > 0 && (
+                  <span className="text-text-dim">
+                    <span className="text-error mr-1">errors:</span>
+                    {errorPatterns.join(", ")}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function ConfidenceBar({ confidence }: { confidence: number }) {
+  const pct = Math.round(confidence * 100)
+  const bars = Math.round(confidence * 5)
+  const filled = "\u2588".repeat(bars)
+  const empty = "\u2591".repeat(5 - bars)
+  return (
+    <span className="font-mono">
+      <span className="text-accent">{filled}</span>
+      <span className="text-border">{empty}</span>
+      <span className="ml-1">{pct}%</span>
+    </span>
+  )
+}

package/frontend/src/components/IterationsTable.tsx

@@ -0,0 +1,98 @@
+import { useRef, useEffect } from "react"
+import gsap from "gsap"
+import type { Iteration } from "@/types"
+import { formatDuration, cn } from "@/lib/utils"
+
+interface Props {
+  iterations: Iteration[]
+}
+
+export function IterationsTable({ iterations }: Props) {
+  const ref = useRef<HTMLTableElement>(null)
+  const prevCountRef = useRef(0)
+
+  useEffect(() => {
+    if (!ref.current) return
+    if (iterations.length === prevCountRef.current) return
+    const isInitial = prevCountRef.current === 0
+    prevCountRef.current = iterations.length
+    if (isInitial) {
+      const rows = ref.current.querySelectorAll("tbody tr")
+      gsap.fromTo(
+        rows,
+        { opacity: 0, y: 6 },
+        { opacity: 1, y: 0, duration: 0.3, stagger: 0.05, ease: "power2.out" }
+      )
+    }
+  }, [iterations])
+
+  return (
+    <div className="mt-2 overflow-x-auto">
+      <table ref={ref} className="w-full text-xs">
+        <thead>
+          <tr className="text-text-dim text-[10px] uppercase tracking-wider">
+            <th className="text-left py-2 px-2 border-b border-border">#</th>
+            <th className="text-left py-2 px-2 border-b border-border">
+              TRIGGER
+            </th>
+            <th className="text-left py-2 px-2 border-b border-border">
+              ERROR
+            </th>
+            <th className="text-left py-2 px-2 border-b border-border">FIX</th>
+            <th className="text-left py-2 px-2 border-b border-border">
+              RESULT
+            </th>
+            <th className="text-left py-2 px-2 border-b border-border">
+              TIME
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {iterations.map((it) => (
+            <tr
+              key={it.id}
+              className="hover:bg-bg-hover transition-colors duration-150"
+            >
+              <td className="py-2 px-2 border-b border-border text-text-dim">
+                {it.iteration_number}
+              </td>
+              <td className="py-2 px-2 border-b border-border text-warning">
+                {it.trigger}
+              </td>
+              <td className="py-2 px-2 border-b border-border text-text-muted max-w-[200px] truncate">
+                {it.error_summary}
+              </td>
+              <td className="py-2 px-2 border-b border-border text-text max-w-[200px] truncate">
+                {it.fix_description || "—"}
+              </td>
+              <td className="py-2 px-2 border-b border-border">
+                <ResultTag result={it.result} />
+              </td>
+              <td className="py-2 px-2 border-b border-border text-text-dim">
+                {formatDuration(it.duration_seconds)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function ResultTag({ result }: { result: string }) {
+  const styles: Record<string, string> = {
+    pass: "text-accent border-accent",
+    fail: "text-error border-error",
+    partial: "text-warning border-warning",
+  }
+  return (
+    <span
+      className={cn(
+        "text-[10px] px-1.5 py-0.5 border rounded uppercase font-bold",
+        styles[result] || "text-text-dim border-border"
+      )}
+    >
+      {result}
+    </span>
+  )
+}