tanuki-telemetry 1.1.0

package/frontend/src/components/WalkthroughPage.tsx

@@ -0,0 +1,458 @@
+import { useState, useEffect, useCallback, useRef, type ReactNode } from "react"
+import gsap from "gsap"
+import { Navigation, MousePointer2, Type, CheckSquare, Clock, Camera } from "lucide-react"
+import type { Walkthrough, WalkthroughAction, WalkthroughScreenshot } from "@/types"
+import { cn, timeAgo } from "@/lib/utils"
+
+interface WalkthroughDetail {
+  walkthrough: Walkthrough
+  actions: WalkthroughAction[]
+  screenshots: WalkthroughScreenshot[]
+}
+
+const STATUS_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+  pass: { bg: "bg-success/15", text: "text-success", label: "PASS" },
+  fail: { bg: "bg-danger/15", text: "text-danger", label: "FAIL" },
+  partial: { bg: "bg-warning/15", text: "text-warning", label: "PARTIAL" },
+  in_progress: { bg: "bg-info/15", text: "text-info", label: "RUNNING" },
+}
+
+const ACTION_ICONS: Record<string, ReactNode> = {
+  navigate: <Navigation size={10} />,
+  click: <MousePointer2 size={10} />,
+  type: <Type size={10} />,
+  assert: <CheckSquare size={10} />,
+  wait: <Clock size={10} />,
+  screenshot: <Camera size={10} />,
+}
+
+function screenshotUrl(walkthroughId: number, screenshotId: number): string {
+  return `/api/walkthroughs/${walkthroughId}/screenshots/${screenshotId}`
+}
+
+function ImageLightbox({ src, alt, onClose }: { src: string; alt: string; onClose: () => void }) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose()
+    }
+    document.addEventListener("keydown", handleKey)
+    return () => document.removeEventListener("keydown", handleKey)
+  }, [onClose])
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 bg-black/85 z-50 flex items-center justify-center p-4 cursor-pointer"
+      onClick={(e) => { if (e.target === overlayRef.current) onClose() }}
+    >
+      <div className="relative max-w-[95vw] max-h-[95vh]">
+        <button
+          onClick={onClose}
+          className="absolute -top-8 right-0 text-white/70 hover:text-white text-sm cursor-pointer"
+        >
+          ESC to close
+        </button>
+        <img src={src} alt={alt} className="max-w-full max-h-[90vh] object-contain rounded shadow-2xl" />
+        <div className="text-center mt-2 text-white/60 text-xs">{alt}</div>
+      </div>
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const style = STATUS_STYLES[status] || STATUS_STYLES.in_progress
+  return (
+    <span className={cn("text-[10px] font-bold px-1.5 py-0.5 rounded", style.bg, style.text)}>
+      {style.label}
+    </span>
+  )
+}
+
+export function WalkthroughPage() {
+  const [walkthroughs, setWalkthroughs] = useState<Walkthrough[]>([])
+  const [activeId, setActiveId] = useState<number | null>(null)
+  const [detail, setDetail] = useState<WalkthroughDetail | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [lightbox, setLightbox] = useState<{ src: string; alt: string } | null>(null)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const sidebarAnimated = useRef(false)
+
+  // Fetch list
+  useEffect(() => {
+    fetch("/api/walkthroughs")
+      .then((r) => r.json())
+      .then((data) => {
+        const wts = data.walkthroughs || []
+        setWalkthroughs(wts)
+        if (wts.length > 0 && activeId === null) {
+          setActiveId(wts[0].id)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
+  // Animate sidebar entries on first load
+  useEffect(() => {
+    if (!sidebarRef.current || sidebarAnimated.current || walkthroughs.length === 0) return
+    sidebarAnimated.current = true
+    const items = sidebarRef.current.querySelectorAll("button")
+    gsap.fromTo(items, { opacity: 0, x: -8 }, { opacity: 1, x: 0, duration: 0.25, stagger: 0.03, ease: "power2.out" })
+  }, [walkthroughs.length > 0])
+
+  // Fetch detail
+  const loadDetail = useCallback((id: number) => {
+    setLoading(true)
+    fetch(`/api/walkthroughs/${id}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setDetail(data)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [])
+
+  useEffect(() => {
+    if (activeId !== null) loadDetail(activeId)
+  }, [activeId, loadDetail])
+
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      {/* Left sidebar — walkthrough list */}
+      <div ref={sidebarRef} className="w-[300px] min-w-[260px] border-r border-border flex flex-col overflow-hidden flex-shrink-0 bg-bg">
+        <div className="px-4 h-9 border-b border-border flex items-center justify-between sticky top-0 bg-bg z-10 flex-shrink-0">
+          <span className="text-text-dim text-[10px]">
+            <span className="text-accent">$</span> walkthroughs/
+          </span>
+          <span className="text-[10px] text-text-dim">{walkthroughs.length} runs</span>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {walkthroughs.length === 0 ? (
+            <div className="p-4 text-xs text-text-dim">
+              No walkthrough runs yet.
+              <div className="mt-2 text-[10px]">
+                Use <code className="text-accent">log_walkthrough_start</code> to create one.
+              </div>
+            </div>
+          ) : (
+            walkthroughs.map((wt) => (
+              <button
+                key={wt.id}
+                onClick={() => setActiveId(wt.id)}
+                className={cn(
+                  "w-full text-left px-4 py-2.5 border-b border-border transition-colors cursor-pointer",
+                  activeId === wt.id
+                    ? "bg-bg-elevated border-l-2 border-l-accent"
+                    : "hover:bg-bg-elevated border-l-2 border-l-transparent"
+                )}
+              >
+                <div className="flex items-center gap-2">
+                  <StatusBadge status={wt.status} />
+                  <span className="text-xs text-text truncate font-mono">
+                    {wt.scenario || wt.app_name || `#${wt.id}`}
+                  </span>
+                </div>
+                <div className="text-[10px] text-text-dim mt-1 truncate">{wt.url}</div>
+                <div className="flex items-center gap-2 mt-1 text-[10px] text-text-muted">
+                  <span>{timeAgo(wt.started_at)}</span>
+                  {wt.total_actions > 0 && (
+                    <>
+                      <span className="text-border-bright">|</span>
+                      <span>
+                        <span className="text-success">{wt.passed}</span>
+                        /
+                        <span className="text-danger">{wt.failed}</span>
+                        /{wt.total_actions}
+                      </span>
+                    </>
+                  )}
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Right panel — detail */}
+      <div className="flex-1 overflow-y-auto">
+        {activeId === null ? (
+          <div className="h-full flex items-center justify-center text-text-dim text-xs">
+            Select a walkthrough run
+          </div>
+        ) : loading ? (
+          <div className="h-full flex items-center justify-center text-accent text-xs animate-pulse">
+            Loading...
+          </div>
+        ) : detail ? (
+          <WalkthroughDetailView
+            detail={detail}
+            onImageClick={(src, alt) => setLightbox({ src, alt })}
+          />
+        ) : null}
+      </div>
+
+      {lightbox && (
+        <ImageLightbox
+          src={lightbox.src}
+          alt={lightbox.alt}
+          onClose={() => setLightbox(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+function WalkthroughDetailView({
+  detail,
+  onImageClick,
+}: {
+  detail: WalkthroughDetail
+  onImageClick: (src: string, alt: string) => void
+}) {
+  const { walkthrough: wt, actions, screenshots } = detail
+  const detailRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!detailRef.current) return
+    gsap.fromTo(
+      detailRef.current.children,
+      { opacity: 0, y: 8 },
+      { opacity: 1, y: 0, duration: 0.3, stagger: 0.05, ease: "power2.out" }
+    )
+  }, [wt.id])
+
+  // Build a map of action_id → screenshots for inline display
+  const screenshotsByAction = new Map<number, WalkthroughScreenshot[]>()
+  const unlinkedScreenshots: WalkthroughScreenshot[] = []
+  for (const ss of screenshots) {
+    if (ss.action_id) {
+      const list = screenshotsByAction.get(ss.action_id) || []
+      list.push(ss)
+      screenshotsByAction.set(ss.action_id, list)
+    } else {
+      unlinkedScreenshots.push(ss)
+    }
+  }
+
+  return (
+    <div ref={detailRef} className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-2">
+          <StatusBadge status={wt.status} />
+          <h2 className="text-lg font-bold text-text font-mono">
+            {wt.scenario || wt.app_name || `Walkthrough #${wt.id}`}
+          </h2>
+        </div>
+        <div className="text-xs text-text-dim">{wt.url}</div>
+        <div className="text-[10px] text-text-muted mt-1">
+          Started {timeAgo(wt.started_at)}
+          {wt.ended_at && <> &middot; Ended {timeAgo(wt.ended_at)}</>}
+        </div>
+
+        {/* Stats bar */}
+        {wt.total_actions > 0 && (
+          <div className="flex items-center gap-4 mt-3 text-xs">
+            <span className="text-text-muted">
+              <span className="font-bold text-text">{wt.total_actions}</span> actions
+            </span>
+            <span className="text-success">
+              <span className="font-bold">{wt.passed}</span> passed
+            </span>
+            <span className="text-danger">
+              <span className="font-bold">{wt.failed}</span> failed
+            </span>
+            {wt.total_actions > 0 && (
+              <div className="flex-1 max-w-48 h-1.5 bg-bg rounded overflow-hidden">
+                <div
+                  className="h-full bg-success rounded"
+                  style={{ width: `${(wt.passed / wt.total_actions) * 100}%` }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Summary */}
+        {wt.summary && (
+          <div className="mt-3 text-xs text-text bg-bg-elevated rounded p-3 border border-border">
+            {wt.summary}
+          </div>
+        )}
+      </div>
+
+      {/* Action timeline */}
+      {actions.length > 0 && (
+        <div className="mb-6">
+          <h3 className="text-[10px] text-text-dim uppercase tracking-wider font-bold mb-3">
+            Action Timeline ({actions.length})
+          </h3>
+          <div className="space-y-0.5">
+            {actions.map((action, idx) => {
+              const actionScreenshots = screenshotsByAction.get(action.id) || []
+              return (
+                <ActionRow
+                  key={action.id}
+                  action={action}
+                  index={idx}
+                  screenshots={actionScreenshots}
+                  walkthroughId={wt.id}
+                  onImageClick={onImageClick}
+                  isLast={idx === actions.length - 1}
+                />
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Unlinked screenshots gallery */}
+      {unlinkedScreenshots.length > 0 && (
+        <div>
+          <h3 className="text-[10px] text-text-dim uppercase tracking-wider font-bold mb-3">
+            Screenshots ({unlinkedScreenshots.length})
+          </h3>
+          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+            {unlinkedScreenshots.map((ss) => {
+              const src = screenshotUrl(wt.id, ss.id)
+              return (
+                <div
+                  key={ss.id}
+                  className="group cursor-pointer rounded overflow-hidden border border-border hover:border-accent transition-colors bg-bg"
+                  onClick={() => onImageClick(src, ss.annotation || ss.name)}
+                >
+                  <div className="aspect-video bg-bg-elevated overflow-hidden">
+                    <img
+                      src={src}
+                      alt={ss.name}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                      loading="lazy"
+                    />
+                  </div>
+                  <div className="p-2">
+                    <div className="text-[11px] text-text truncate">{ss.name}</div>
+                    {ss.annotation && (
+                      <div className="text-[10px] text-text-dim truncate">{ss.annotation}</div>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {actions.length === 0 && screenshots.length === 0 && (
+        <div className="text-center text-text-dim text-xs py-12">
+          No actions or screenshots recorded yet.
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ActionRow({
+  action,
+  index,
+  screenshots,
+  walkthroughId,
+  onImageClick,
+  isLast,
+}: {
+  action: WalkthroughAction
+  index: number
+  screenshots: WalkthroughScreenshot[]
+  walkthroughId: number
+  onImageClick: (src: string, alt: string) => void
+  isLast: boolean
+}) {
+  const isFail = action.status === "fail"
+
+  return (
+    <div className="flex gap-3">
+      {/* Timeline gutter */}
+      <div className="flex flex-col items-center flex-shrink-0 w-7">
+        <div
+          className={cn(
+            "w-5 h-5 rounded-full flex items-center justify-center text-[8px] font-bold border",
+            isFail
+              ? "border-danger text-danger bg-danger/10"
+              : "border-accent/50 text-accent bg-accent/10"
+          )}
+        >
+          {index + 1}
+        </div>
+        {!isLast && <div className="w-px flex-1 bg-border" />}
+      </div>
+
+      {/* Content */}
+      <div className={cn("flex-1 pb-3", isLast ? "" : "")}>
+        <div
+          className={cn(
+            "rounded px-3 py-2 text-xs",
+            isFail ? "bg-danger/5 border border-danger/20" : "bg-bg-elevated"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] font-mono text-text-dim w-5 text-center flex-shrink-0">
+              {ACTION_ICONS[action.action_type] || "??"}
+            </span>
+            <span className={cn("font-bold text-[10px] uppercase", isFail ? "text-danger" : "text-text-muted")}>
+              {action.action_type}
+            </span>
+            <span className="text-text font-mono truncate flex-1">{action.target}</span>
+            <span className={cn("text-[10px] font-bold", isFail ? "text-danger" : "text-success")}>
+              {action.status.toUpperCase()}
+            </span>
+          </div>
+
+          {action.value && (
+            <div className="mt-1 text-[10px] text-text-muted ml-7">
+              value: <span className="text-text font-mono">{action.value}</span>
+            </div>
+          )}
+
+          {action.message && (
+            <div className={cn("mt-1 text-[10px] ml-7", isFail ? "text-danger" : "text-text-dim")}>
+              {action.message}
+            </div>
+          )}
+
+          <div className="text-[9px] text-text-dim mt-1 ml-7">
+            {timeAgo(action.timestamp)}
+          </div>
+        </div>
+
+        {/* Inline screenshots for this action */}
+        {screenshots.length > 0 && (
+          <div className="mt-2 flex gap-2 flex-wrap ml-7">
+            {screenshots.map((ss) => {
+              const src = screenshotUrl(walkthroughId, ss.id)
+              return (
+                <div
+                  key={ss.id}
+                  className="cursor-pointer rounded overflow-hidden border border-border hover:border-accent transition-colors"
+                  onClick={() => onImageClick(src, ss.annotation || ss.name)}
+                >
+                  <img
+                    src={src}
+                    alt={ss.name}
+                    className="h-24 w-auto object-cover"
+                    loading="lazy"
+                  />
+                  {ss.annotation && (
+                    <div className="text-[9px] text-text-dim px-1.5 py-0.5 bg-bg-elevated truncate max-w-32">
+                      {ss.annotation}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/frontend/src/hooks/useApi.ts

@@ -0,0 +1,81 @@
+import { useState, useEffect, useCallback, useRef } from "react"
+import { apiFetch } from "@/lib/api"
+import type { Session, SessionDetail, Stats } from "@/types"
+
+export function useStats() {
+  const [stats, setStats] = useState<Stats | null>(null)
+
+  const reload = useCallback(() => {
+    apiFetch("/api/stats")
+      .then((r) => r.json())
+      .then(setStats)
+      .catch(console.error)
+  }, [])
+
+  useEffect(() => {
+    reload()
+  }, [reload])
+
+  return { stats, reload }
+}
+
+export function useSessions(filter: string) {
+  const [sessions, setSessions] = useState<Session[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(() => {
+    let url = "/api/sessions?limit=100"
+    if (filter) url += "&status=" + filter
+    apiFetch(url)
+      .then((r) => r.json())
+      .then((data) => {
+        setSessions(data)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [filter])
+
+  useEffect(() => {
+    setLoading(true)
+    reload()
+  }, [reload])
+
+  return { sessions, loading, reload }
+}
+
+export function useSessionDetail(id: string | null) {
+  const [detail, setDetail] = useState<SessionDetail | null>(null)
+  const [loading, setLoading] = useState(false)
+  const currentId = useRef(id)
+  currentId.current = id
+
+  const reload = useCallback(() => {
+    if (!currentId.current) return
+    apiFetch("/api/sessions/" + currentId.current)
+      .then((r) => r.json())
+      .then((data) => {
+        // Only update if we're still viewing the same session
+        if (currentId.current === data.session?.id) {
+          setDetail(data)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    if (!id) {
+      setDetail(null)
+      return
+    }
+    setLoading(true)
+    apiFetch("/api/sessions/" + id)
+      .then((r) => r.json())
+      .then((data) => {
+        setDetail(data)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [id])
+
+  return { detail, loading, reload }
+}

package/frontend/src/hooks/useAuth.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+  avatar_url: string | null;
+}
+
+interface UseAuthReturn {
+  user: AuthUser | null;
+  loading: boolean;
+  authEnabled: boolean;
+}
+
+export function useAuth(): UseAuthReturn {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [authEnabled, setAuthEnabled] = useState(true);
+
+  useEffect(() => {
+    fetch("/auth/me")
+      .then((r) => {
+        if (r.status === 401) {
+          setUser(null);
+          setAuthEnabled(true);
+          setLoading(false);
+          return null;
+        }
+        if (r.status === 404) {
+          // /auth/me doesn't exist — auth is disabled
+          setUser(null);
+          setAuthEnabled(false);
+          setLoading(false);
+          return null;
+        }
+        return r.json();
+      })
+      .then((data) => {
+        if (data) {
+          setUser(data);
+          setAuthEnabled(true);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        // Network error or auth not configured — assume auth disabled
+        setAuthEnabled(false);
+        setLoading(false);
+      });
+  }, []);
+
+  return { user, loading, authEnabled };
+}

package/frontend/src/hooks/useKnowledge.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect, useCallback } from "react"
+import { apiFetch } from "@/lib/api"
+import type { Insight } from "@/types"
+
+interface KnowledgeData {
+  insights: Insight[]
+  categories: Array<{ category: string; count: number; avg_confidence: number }>
+  total: number
+}
+
+export function useKnowledge(category?: string) {
+  const [data, setData] = useState<KnowledgeData | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(() => {
+    setLoading(true)
+    let url = "/api/knowledge?limit=100"
+    if (category) url += "&category=" + encodeURIComponent(category)
+    apiFetch(url)
+      .then((r) => r.json())
+      .then((d) => {
+        setData(d)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [category])
+
+  useEffect(() => {
+    reload()
+  }, [reload])
+
+  return { data, loading, reload }
+}