tanuki-telemetry 1.1.0

package/frontend/src/components/SessionDetail.tsx

@@ -0,0 +1,265 @@
+import { useRef, useEffect } from "react"
+import gsap from "gsap"
+import type { SessionDetail as SessionDetailType, FinalResult } from "@/types"
+import { formatDuration, formatTokens, cn } from "@/lib/utils"
+import { Timeline } from "./Timeline"
+import { IterationsTable } from "./IterationsTable"
+import { ScreenshotsGrid } from "./ScreenshotsGrid"
+import { InsightsPanel } from "./InsightsPanel"
+import { PlanProgress } from "./PlanProgress"
+import { ChildStreams } from "./ChildStreams"
+import { StreamComms } from "./StreamComms"
+import { ScreenshotUpload } from "./ScreenshotUpload"
+import { ArtifactsPanel } from "./ArtifactsPanel"
+import { QualityReport } from "./QualityReport"
+
+interface Props {
+  detail: SessionDetailType | null
+  loading: boolean
+  onSelectSession?: (id: string) => void
+  onReload?: () => void
+}
+
+export function SessionDetail({ detail, loading, onSelectSession, onReload }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const prevSessionId = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!ref.current || !detail) return
+    // Only animate on session change, not on live refreshes
+    if (detail.session.id === prevSessionId.current) return
+    prevSessionId.current = detail.session.id
+    gsap.fromTo(
+      ref.current.children,
+      { opacity: 0, y: 16 },
+      { opacity: 1, y: 0, duration: 0.5, stagger: 0.1, ease: "power2.out" }
+    )
+  }, [detail])
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-dim text-xs">
+        <pre>
+{`> loading session data...
+> ████████░░░░░░░░ 50%`}
+        </pre>
+      </div>
+    )
+  }
+
+  if (!detail) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-dim text-xs">
+        <pre className="text-center">
+{`╔══════════════════════════════╗
+║                              ║
+║   select a session to view   ║
+║   session data               ║
+║                              ║
+║   ← click a session          ║
+║                              ║
+╚══════════════════════════════╝`}
+        </pre>
+      </div>
+    )
+  }
+
+  const s = detail.session
+  const totalTokens = (s.total_input_tokens || 0) + (s.total_output_tokens || 0)
+  let finalResult: FinalResult | null = null
+  try {
+    if (s.final_result) finalResult = JSON.parse(s.final_result)
+  } catch {
+    /* ignore */
+  }
+
+  return (
+    <div ref={ref} className="flex-1 overflow-y-auto p-5 space-y-4">
+      {/* Session header */}
+      <div className="border border-border rounded-md p-4 bg-bg-elevated">
+        <div className="flex items-center gap-3 mb-3">
+          <StatusBadge status={s.status} />
+          <h2 className="text-base font-bold text-text">{s.worktree_name}</h2>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
+          {s.ticket_id && (
+            <MetaField label="TICKET" value={`${s.ticket_id}${s.ticket_title ? " — " + s.ticket_title : ""}`} />
+          )}
+          {s.branch_name && (
+            <MetaField label="BRANCH" value={s.branch_name} />
+          )}
+          <MetaField label="MODE" value={s.mode.toUpperCase()} />
+          <MetaField label="DURATION" value={formatDuration(s.duration_seconds)} />
+          <MetaField label="TOKENS" value={formatTokens(totalTokens)} />
+          <MetaField
+            label="ITERATIONS"
+            value={`${s.total_iterations}/${s.max_iterations}`}
+          />
+        </div>
+      </div>
+
+      {/* Quality report */}
+      <QualityReport events={detail.events} />
+
+      {/* Child streams */}
+      {detail.child_sessions && detail.child_sessions.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title={`CHILD STREAMS (${detail.child_sessions.length})`} />
+          <ChildStreams
+            children={detail.child_sessions}
+            onSelectSession={onSelectSession || (() => {})}
+          />
+        </div>
+      )}
+
+      {/* Stream communications */}
+      {detail.child_sessions && detail.child_sessions.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title="STREAM COMMS" />
+          <StreamComms childSessions={detail.child_sessions} parentSessionId={detail.session.id} />
+        </div>
+      )}
+
+      {/* Final result */}
+      {finalResult && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title="FINAL RESULT" />
+          <div className="flex gap-3 flex-wrap mt-2">
+            {finalResult.tests_passed !== undefined && (
+              <ResultBadge
+                label="TESTS"
+                pass={finalResult.tests_passed}
+              />
+            )}
+            {finalResult.lint_passed !== undefined && (
+              <ResultBadge
+                label="LINT"
+                pass={finalResult.lint_passed}
+              />
+            )}
+            {finalResult.typecheck_passed !== undefined && (
+              <ResultBadge
+                label="TYPECHECK"
+                pass={finalResult.typecheck_passed}
+              />
+            )}
+            {finalResult.pr_url && (
+              <a
+                href={finalResult.pr_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-info hover:underline"
+              >
+                PR #{finalResult.pr_number || ""}
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Plan */}
+      {detail.plan_steps && detail.plan_steps.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title={`PLAN (${detail.plan_steps.filter(s => s.status === "completed").length}/${detail.plan_steps.length} complete)`} />
+          <PlanProgress steps={detail.plan_steps} />
+        </div>
+      )}
+
+      {/* Timeline */}
+      {detail.events.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title={`TIMELINE (${detail.events.length} events)`} />
+          <Timeline events={detail.events} sessionStart={s.started_at} screenshots={detail.screenshots} />
+        </div>
+      )}
+
+      {/* Iterations */}
+      {detail.iterations.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title={`ITERATIONS (${detail.iterations.length})`} />
+          <IterationsTable iterations={detail.iterations} />
+        </div>
+      )}
+
+      {/* Screenshots */}
+      <div className="border border-border rounded-md p-4 bg-bg-elevated">
+        <SectionHeader title={`SCREENSHOTS (${detail.screenshots.length})`} />
+        {detail.screenshots.length > 0 && (
+          <ScreenshotsGrid screenshots={detail.screenshots} />
+        )}
+        <ScreenshotUpload sessionId={s.id} onUploaded={() => onReload?.()} />
+      </div>
+
+      {/* Artifacts */}
+      {detail.artifacts && detail.artifacts.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title={`ARTIFACTS (${detail.artifacts.length})`} />
+          <ArtifactsPanel artifacts={detail.artifacts} />
+        </div>
+      )}
+
+      {/* Insights — post-game analysis */}
+      {detail.insights && detail.insights.length > 0 && (
+        <div className="border border-border rounded-md p-4 bg-bg-elevated">
+          <SectionHeader title={`INSIGHTS (${detail.insights.length})`} />
+          <InsightsPanel insights={detail.insights} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SectionHeader({ title }: { title: string }) {
+  return (
+    <div className="text-[10px] text-text-muted uppercase tracking-widest mb-2 font-bold">
+      <span className="text-accent mr-1">▸</span>
+      {title}
+    </div>
+  )
+}
+
+function MetaField({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-[9px] text-text-dim uppercase tracking-wider mb-0.5">
+        {label}
+      </div>
+      <div className="text-xs text-text truncate">{value}</div>
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles: Record<string, string> = {
+    completed: "border-accent text-accent",
+    failed: "border-error text-error",
+    in_progress: "border-warning text-warning",
+    interrupted: "border-text-dim text-text-dim",
+  }
+  return (
+    <span
+      className={cn(
+        "text-[10px] px-2 py-0.5 border rounded font-bold uppercase tracking-wider",
+        styles[status] || "border-text-dim text-text-dim"
+      )}
+    >
+      {status === "in_progress" ? "LIVE" : status}
+    </span>
+  )
+}
+
+function ResultBadge({ label, pass }: { label: string; pass: boolean }) {
+  return (
+    <span
+      className={cn(
+        "text-[10px] px-2 py-0.5 border rounded font-bold tracking-wider",
+        pass
+          ? "border-accent text-accent"
+          : "border-error text-error"
+      )}
+    >
+      {label}: {pass ? "PASS" : "FAIL"}
+    </span>
+  )
+}

package/frontend/src/components/SessionList.tsx

@@ -0,0 +1,234 @@
+import { useRef, useEffect, useState, useMemo } from "react"
+import gsap from "gsap"
+import type { Session } from "@/types"
+import { formatDuration, formatTokens, cn } from "@/lib/utils"
+
+const FILTERS = [
+  { label: "ALL", value: "" },
+  { label: "PASS", value: "completed" },
+  { label: "FAIL", value: "failed" },
+  { label: "LIVE", value: "in_progress" },
+]
+
+interface Props {
+  sessions: Session[]
+  activeId: string | null
+  filter: string
+  onSelect: (id: string) => void
+  onFilterChange: (f: string) => void
+}
+
+interface WorktreeGroup {
+  name: string
+  sessions: Session[]
+  latest: Session
+  hasLive: boolean
+}
+
+function workLabel(s: Session): string {
+  if (s.ticket_title) return s.ticket_title
+  if (s.ticket_id) return s.ticket_id
+  // Fall back to branch name or a short id
+  if (s.branch_name) return s.branch_name
+  return s.started_at.slice(0, 16).replace("T", " ")
+}
+
+export function SessionList({
+  sessions,
+  activeId,
+  filter,
+  onSelect,
+  onFilterChange,
+}: Props) {
+  const listRef = useRef<HTMLDivElement>(null)
+  const prevCountRef = useRef(0)
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set())
+
+  // Auto-expand the group containing the active session
+  useEffect(() => {
+    if (!activeId) return
+    const session = sessions.find((s) => s.id === activeId)
+    if (session) {
+      setExpandedGroups((prev) => new Set([...prev, session.worktree_name]))
+    }
+  }, [activeId, sessions])
+
+  const groups = useMemo((): WorktreeGroup[] => {
+    const map = new Map<string, Session[]>()
+    for (const s of sessions) {
+      if (s.parent_session_id) continue
+      const existing = map.get(s.worktree_name) || []
+      existing.push(s)
+      map.set(s.worktree_name, existing)
+    }
+    return Array.from(map.entries())
+      .map(([name, sess]) => ({
+        name,
+        sessions: sess.sort((a, b) => b.created_at.localeCompare(a.created_at)),
+        latest: sess[0],
+        hasLive: sess.some((s) => s.status === "in_progress"),
+      }))
+      .sort((a, b) => b.latest.created_at.localeCompare(a.latest.created_at))
+  }, [sessions])
+
+  useEffect(() => {
+    if (!listRef.current) return
+    if (sessions.length === prevCountRef.current) return
+    const isInitial = prevCountRef.current === 0
+    prevCountRef.current = sessions.length
+    if (isInitial) {
+      const items = listRef.current.querySelectorAll(".session-item, .group-header")
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -12 },
+        { opacity: 1, x: 0, duration: 0.3, stagger: 0.04, ease: "power2.out" }
+      )
+    }
+  }, [sessions])
+
+  const toggleGroup = (name: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev)
+      if (next.has(name)) next.delete(name)
+      else next.add(name)
+      return next
+    })
+  }
+
+  return (
+    <div className="w-[300px] min-w-[260px] border-r border-border flex flex-col flex-shrink-0">
+      {/* Filter bar */}
+      <div className="px-4 h-9 border-b border-border flex items-center justify-between sticky top-0 bg-bg z-10">
+        <span className="text-text-dim text-[10px]">
+          <span className="text-accent">$</span> sessions/
+        </span>
+        <div className="flex gap-1">
+          {FILTERS.map((f) => (
+            <button
+              key={f.value}
+              onClick={() => onFilterChange(f.value)}
+              className={cn(
+                "px-2 py-0.5 text-[10px] border font-mono transition-colors",
+                filter === f.value
+                  ? "border-accent text-accent bg-accent/5"
+                  : "border-border text-text-dim hover:border-border-bright hover:text-text-muted"
+              )}
+            >
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Sessions */}
+      <div ref={listRef} className="flex-1 overflow-y-auto">
+        {sessions.length === 0 && (
+          <div className="p-8 text-center text-text-dim text-xs">
+            <pre className="inline-block text-left">
+{`> no sessions found
+> waiting for data...
+> _`}
+            </pre>
+          </div>
+        )}
+
+        {groups.map((group) => {
+          const isExpanded = expandedGroups.has(group.name)
+          return (
+            <div key={group.name}>
+              {/* Group header — workspace name */}
+              <div
+                className={cn(
+                  "group-header px-4 py-2 border-b border-border border-l-2 cursor-pointer hover:bg-bg-hover flex items-center gap-2",
+                  group.hasLive ? "border-l-warning" : isExpanded ? "border-l-accent/40" : "border-l-transparent"
+                )}
+                onClick={() => toggleGroup(group.name)}
+              >
+                <span className="text-[10px] text-text-dim w-3">
+                  {isExpanded ? "\u25BE" : "\u25B8"}
+                </span>
+                <StatusIndicator status={group.latest.status} />
+                <span className="text-[11px] font-bold text-text truncate flex-1">
+                  {group.name}
+                </span>
+                <span className="text-[10px] text-text-dim flex-shrink-0">
+                  {group.sessions.length}
+                </span>
+                {group.hasLive && (
+                  <span className="inline-block w-1.5 h-1.5 bg-warning animate-pulse flex-shrink-0" />
+                )}
+              </div>
+
+              {/* Child sessions — work items */}
+              {isExpanded && (
+                <div data-expand>
+                  {group.sessions.map((s) => (
+                    <SessionItem
+                      key={s.id}
+                      session={s}
+                      active={activeId === s.id}
+                      onSelect={onSelect}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function SessionItem({
+  session: s,
+  active,
+  onSelect,
+}: {
+  session: Session
+  active: boolean
+  onSelect: (id: string) => void
+}) {
+  const totalTokens = (s.total_input_tokens || 0) + (s.total_output_tokens || 0)
+  return (
+    <div
+      onClick={() => onSelect(s.id)}
+      className={cn(
+        "session-item pl-9 pr-4 py-2 border-b border-border border-l-2 cursor-pointer transition-colors hover:bg-bg-hover",
+        active ? "bg-bg-hover border-l-accent" : "border-l-transparent"
+      )}
+    >
+      <div className="flex items-center gap-2 mb-0.5">
+        <StatusIndicator status={s.status} />
+        <span className="text-[11px] text-text truncate flex-1">
+          {workLabel(s)}
+        </span>
+        <span className="text-[10px] text-text-dim flex-shrink-0">
+          {formatDuration(s.duration_seconds)}
+        </span>
+      </div>
+      <div className="flex gap-3 text-[10px] text-text-dim pl-4">
+        <span>{s.total_iterations}/{s.max_iterations} iter</span>
+        <span>{formatTokens(totalTokens)} tok</span>
+        <span>{s.status}</span>
+      </div>
+    </div>
+  )
+}
+
+function StatusIndicator({ status }: { status: Session["status"] }) {
+  const colors: Record<string, string> = {
+    completed: "bg-accent",
+    failed: "bg-error",
+    in_progress: "bg-warning animate-pulse",
+    interrupted: "bg-text-dim",
+  }
+  return (
+    <span
+      className={cn(
+        "inline-block w-1.5 h-1.5 flex-shrink-0",
+        colors[status] || "bg-text-dim"
+      )}
+    />
+  )
+}