tanuki-telemetry 1.1.0

package/frontend/src/components/KnowledgePage.tsx

@@ -0,0 +1,308 @@
+import { useState, useRef, useEffect, type ReactNode } from "react"
+import gsap from "gsap"
+import { AlertTriangle, CheckCircle2, HelpCircle, ArrowRight, BookOpen, ChevronDown, ChevronRight } from "lucide-react"
+import type { Insight } from "@/types"
+import { useKnowledge } from "@/hooks/useKnowledge"
+import { cn } from "@/lib/utils"
+import type { WsMessage } from "@/hooks/useWebSocket"
+
+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: "border-error/30 text-error",
+  success_pattern: "border-accent/30 text-accent",
+  codebase_gotcha: "border-warning/30 text-warning",
+  optimization: "border-info/30 text-info",
+  rule_learned: "border-purple/30 text-purple",
+}
+
+const typeBorderColors: Record<string, string> = {
+  mistake: "border-l-error/40",
+  success_pattern: "border-l-accent/40",
+  codebase_gotcha: "border-l-warning/40",
+  optimization: "border-l-info/40",
+  rule_learned: "border-l-purple/40",
+}
+
+const typeLabels: Record<string, string> = {
+  mistake: "MISTAKES",
+  success_pattern: "PATTERNS",
+  codebase_gotcha: "GOTCHAS",
+  optimization: "OPTIMIZATIONS",
+  rule_learned: "RULES",
+}
+
+export function KnowledgePage({ wsMessages = [] }: { wsMessages?: WsMessage[] }) {
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>()
+  const [selectedType, setSelectedType] = useState<string | undefined>()
+  const [expandedId, setExpandedId] = useState<number | null>(null)
+  const { data, loading, reload } = useKnowledge(selectedCategory)
+  const listRef = useRef<HTMLDivElement>(null)
+  const animatedRef = useRef(false)
+
+  useEffect(() => {
+    if (wsMessages.length === 0) return
+    const latest = wsMessages[wsMessages.length - 1]
+    if (latest.type === "insight") {
+      reload()
+    }
+  }, [wsMessages, reload])
+
+  const insights = data?.insights ?? []
+  const categories = data?.categories ?? []
+
+  const filtered = selectedType
+    ? insights.filter((i) => i.insight_type === selectedType)
+    : insights
+
+  // Animate only on initial load
+  useEffect(() => {
+    if (!listRef.current || animatedRef.current || filtered.length === 0) return
+    animatedRef.current = true
+    const items = listRef.current.querySelectorAll(".k-card")
+    gsap.fromTo(
+      items,
+      { opacity: 0, y: 6 },
+      { opacity: 1, y: 0, duration: 0.2, stagger: 0.02, ease: "power2.out" }
+    )
+  }, [filtered.length > 0])
+
+  if (loading && !data) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-dim text-xs">
+        loading knowledge base...
+      </div>
+    )
+  }
+
+  if (insights.length === 0) {
+    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">knowledge base is empty</div>
+          <div className="text-[10px]">run sessions with reflection to populate insights</div>
+        </div>
+      </div>
+    )
+  }
+
+  const typeCounts: Record<string, number> = {}
+  for (const ins of insights) {
+    typeCounts[ins.insight_type] = (typeCounts[ins.insight_type] || 0) + 1
+  }
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left sidebar */}
+      <div className="w-[300px] min-w-[260px] border-r border-border flex flex-col flex-shrink-0">
+        <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> knowledge/
+          </span>
+        </div>
+
+        {/* Type filters */}
+        <div className="px-4 py-2.5 border-b border-border">
+          <div className="text-[9px] text-text-dim uppercase tracking-wider mb-2 font-bold">Type</div>
+          <div className="space-y-px">
+            <FilterButton
+              active={!selectedType}
+              onClick={() => setSelectedType(undefined)}
+              label="ALL"
+              count={insights.length}
+            />
+            {Object.entries(typeLabels).map(([type, label]) => (
+              <FilterButton
+                key={type}
+                active={selectedType === type}
+                onClick={() => setSelectedType(selectedType === type ? undefined : type)}
+                label={label}
+                count={typeCounts[type] || 0}
+                icon={typeIcons[type]}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Category filters */}
+        <div className="px-4 py-2.5 flex-1 overflow-y-auto">
+          <div className="text-[9px] text-text-dim uppercase tracking-wider mb-2 font-bold">Category</div>
+          <div className="space-y-px">
+            <FilterButton
+              active={!selectedCategory}
+              onClick={() => setSelectedCategory(undefined)}
+              label="all"
+              count={insights.length}
+            />
+            {categories.map((cat) => (
+              <FilterButton
+                key={cat.category}
+                active={selectedCategory === cat.category}
+                onClick={() => setSelectedCategory(selectedCategory === cat.category ? undefined : cat.category)}
+                label={cat.category}
+                count={cat.count}
+                meta={`${Math.round(cat.avg_confidence * 100)}%`}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div ref={listRef} className="flex-1 overflow-y-auto p-4 space-y-1">
+        {/* Summary */}
+        <div className="flex items-center gap-4 mb-3 text-[10px] text-text-dim px-2">
+          <span><span className="text-text font-bold">{filtered.length}</span> insights</span>
+          <span className="text-border">|</span>
+          <span>
+            avg conf <span className="text-accent font-bold">
+              {filtered.length > 0
+                ? Math.round((filtered.reduce((a, i) => a + i.confidence, 0) / filtered.length) * 100)
+                : 0}%
+            </span>
+          </span>
+          <span className="text-border">|</span>
+          <span>
+            <span className="text-text font-bold">{filtered.reduce((a, i) => a + i.times_validated, 0)}</span> validations
+          </span>
+        </div>
+
+        {filtered.map((ins) => (
+          <InsightCard
+            key={ins.id}
+            insight={ins}
+            expanded={expandedId === ins.id}
+            onToggle={() => setExpandedId(expandedId === ins.id ? null : ins.id)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FilterButton({
+  active,
+  onClick,
+  label,
+  count,
+  icon,
+  meta,
+}: {
+  active: boolean
+  onClick: () => void
+  label: string
+  count: number
+  icon?: ReactNode
+  meta?: string
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full text-left px-2 py-1.5 text-[11px] transition-colors flex items-center gap-2 border-l-2",
+        active
+          ? "bg-bg-hover text-accent border-l-accent"
+          : "text-text-muted hover:text-text border-l-transparent"
+      )}
+    >
+      {icon && <span className="flex-shrink-0">{icon}</span>}
+      <span className="flex-1 truncate">{label}</span>
+      <span className="text-[10px] text-text-dim flex-shrink-0">
+        {meta ? `${count} · ${meta}` : count}
+      </span>
+    </button>
+  )
+}
+
+function InsightCard({
+  insight: ins,
+  expanded,
+  onToggle,
+}: {
+  insight: Insight
+  expanded: boolean
+  onToggle: () => void
+}) {
+  const filePatterns = ins.file_patterns ? (JSON.parse(ins.file_patterns) as string[]) : []
+  const errorPatterns = ins.error_patterns ? (JSON.parse(ins.error_patterns) as string[]) : []
+  const pct = Math.round(ins.confidence * 100)
+
+  return (
+    <div
+      className={cn(
+        "k-card border border-border border-l-2 bg-bg cursor-pointer transition-colors hover:bg-bg-elevated",
+        typeBorderColors[ins.insight_type] || "border-l-border",
+        expanded && "bg-bg-elevated border-border-bright"
+      )}
+      onClick={onToggle}
+    >
+      <div className="flex items-baseline gap-3 px-3 pt-2.5 pb-2">
+        <span
+          className={cn(
+            "text-[10px] px-1.5 py-0.5 border font-bold font-mono flex-shrink-0",
+            typeColors[ins.insight_type] || "border-border text-text-dim"
+          )}
+        >
+          {typeIcons[ins.insight_type] || "--"}
+        </span>
+
+        <div className="flex-1 min-w-0">
+          <div className="text-[11px] font-bold text-text">{ins.title}</div>
+          <div className="flex items-center gap-3 mt-1 text-[10px] text-text-dim">
+            <span className="text-text-muted">{ins.category}</span>
+            <span className="text-accent font-mono">{pct}%</span>
+            {ins.times_validated > 0 && (
+              <span>{ins.times_validated}x validated</span>
+            )}
+          </div>
+        </div>
+
+        <span className="text-text-dim flex-shrink-0">
+          {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+        </span>
+      </div>
+
+      {expanded && (
+        <div data-expand className="px-3 pb-3 border-t border-border pt-2.5 ml-9">
+          <div className="text-[11px] text-text-muted leading-relaxed mb-3">
+            {ins.description}
+          </div>
+
+          {ins.evidence && (
+            <div className="mb-3">
+              <div className="text-[9px] text-text-dim uppercase tracking-wider mb-1 font-bold">Evidence</div>
+              <pre className="text-[10px] text-text-dim bg-bg border border-border p-2 overflow-auto max-h-32 whitespace-pre-wrap">
+                {ins.evidence}
+              </pre>
+            </div>
+          )}
+
+          <div className="flex gap-4 flex-wrap text-[10px]">
+            {filePatterns.length > 0 && (
+              <div>
+                <span className="text-accent mr-1">files:</span>
+                <span className="text-text-muted">{filePatterns.join(", ")}</span>
+              </div>
+            )}
+            {errorPatterns.length > 0 && (
+              <div>
+                <span className="text-error mr-1">errors:</span>
+                <span className="text-text-muted">{errorPatterns.join(", ")}</span>
+              </div>
+            )}
+            <div>
+              <span className="text-text-dim mr-1">session:</span>
+              <span className="text-text-muted font-mono text-[9px]">{ins.session_id.slice(0, 8)}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/frontend/src/components/LoginPage.tsx

@@ -0,0 +1,55 @@
+import { useRef, useEffect } from "react"
+import gsap from "gsap"
+
+export function LoginPage() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    gsap.fromTo(
+      ref.current.children,
+      { opacity: 0, y: 12 },
+      { opacity: 1, y: 0, duration: 0.5, stagger: 0.15, ease: "power2.out" }
+    )
+  }, [])
+
+  return (
+    <div ref={ref} className="h-screen flex flex-col items-center justify-center bg-bg">
+      {/* Scanline overlay */}
+      <div className="pointer-events-none fixed inset-0 z-[100] opacity-[0.03]">
+        <div
+          className="w-full h-px bg-accent"
+          style={{ animation: "scanline 8s linear infinite" }}
+        />
+      </div>
+
+      <div className="text-center space-y-8">
+        <div className="space-y-2">
+          <h1 className="text-accent text-lg font-bold tracking-widest font-mono">
+            TANUKI
+          </h1>
+          <p className="text-text-dim text-[11px] font-mono">
+            autonomous workflow monitor
+          </p>
+        </div>
+
+        <a
+          href="/auth/google"
+          className="inline-flex items-center gap-3 px-6 py-3 border border-accent text-accent hover:bg-accent hover:text-bg transition-colors duration-200 text-xs font-mono tracking-wider"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
+            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+          </svg>
+          SIGN IN WITH GOOGLE
+        </a>
+      </div>
+
+      <div className="absolute bottom-4 text-[10px] text-text-dim font-mono">
+        access restricted to authorized team members
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/PlanProgress.tsx

@@ -0,0 +1,163 @@
+import { useRef, useEffect, type ReactNode } from "react"
+import gsap from "gsap"
+import { Circle, Play, CheckCircle2, MinusCircle, AlertTriangle } from "lucide-react"
+import type { PlanStep } from "@/types"
+import { formatDuration, cn } from "@/lib/utils"
+
+interface Props {
+  steps: PlanStep[]
+}
+
+const statusIcons: Record<string, ReactNode> = {
+  pending: <Circle size={10} />,
+  in_progress: <Play size={10} fill="currentColor" />,
+  completed: <CheckCircle2 size={10} />,
+  skipped: <MinusCircle size={10} />,
+  failed: <AlertTriangle size={10} />,
+}
+
+const statusColors: Record<string, string> = {
+  pending: "text-text-dim",
+  in_progress: "text-warning",
+  completed: "text-accent",
+  skipped: "text-text-dim",
+  failed: "text-error",
+}
+
+export function PlanProgress({ steps }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const completed = steps.filter((s) => s.status === "completed").length
+  const failed = steps.filter((s) => s.status === "failed").length
+  const total = steps.length
+  const pct = total > 0 ? Math.round((completed / total) * 100) : 0
+
+  const prevCountRef = useRef(0)
+
+  useEffect(() => {
+    if (!ref.current) return
+    if (steps.length === prevCountRef.current) return
+    const isInitial = prevCountRef.current === 0
+    prevCountRef.current = steps.length
+    if (isInitial) {
+      const items = ref.current.querySelectorAll(".plan-step")
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -6 },
+        { opacity: 1, x: 0, duration: 0.2, stagger: 0.04, ease: "power2.out" }
+      )
+    }
+  }, [steps])
+
+  return (
+    <div ref={ref} className="mt-2">
+      {/* Progress bar */}
+      <div className="flex items-center gap-3 mb-3">
+        <div className="flex-1 h-1.5 bg-border rounded-full overflow-hidden">
+          <div
+            className="h-full bg-accent rounded-full transition-all duration-500"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+        <span className="text-[10px] text-text-muted tabular-nums w-16 text-right">
+          {completed}/{total}
+          {failed > 0 && (
+            <span className="text-error ml-1">({failed} fail)</span>
+          )}
+        </span>
+      </div>
+
+      {/* Steps */}
+      <div className="space-y-0">
+        {steps.map((step) => {
+          const isSubStep = step.parent_step != null
+          const fileTargets = step.file_targets
+            ? (JSON.parse(step.file_targets) as string[])
+            : []
+
+          return (
+            <div
+              key={step.id}
+              className={cn(
+                "plan-step flex items-baseline gap-2 pt-2 pb-1.5 px-2 border-l-2 transition-colors duration-200",
+                isSubStep && "ml-6",
+                step.status === "in_progress"
+                  ? "border-l-warning bg-warning/[0.03]"
+                  : step.status === "completed"
+                  ? "border-l-accent/40"
+                  : step.status === "failed"
+                  ? "border-l-error/40 bg-error/[0.03]"
+                  : "border-l-border"
+              )}
+            >
+              {/* Status icon */}
+              <span
+                className={cn(
+                  "text-[10px] font-mono font-bold flex-shrink-0 w-6",
+                  statusColors[step.status],
+                  step.status === "in_progress" && "animate-pulse"
+                )}
+              >
+                {statusIcons[step.status]}
+              </span>
+
+              {/* Step number */}
+              <span className="text-[10px] text-text-dim w-4 flex-shrink-0 tabular-nums">
+                {step.step_number}
+              </span>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span
+                    className={cn(
+                      "text-xs font-bold",
+                      step.status === "completed"
+                        ? "text-text line-through opacity-60"
+                        : step.status === "in_progress"
+                        ? "text-warning"
+                        : step.status === "failed"
+                        ? "text-error"
+                        : step.status === "skipped"
+                        ? "text-text-dim line-through"
+                        : "text-text"
+                    )}
+                  >
+                    {step.title}
+                  </span>
+                  {step.duration_seconds != null && (
+                    <span className="text-[10px] text-text-dim">
+                      {formatDuration(step.duration_seconds)}
+                    </span>
+                  )}
+                </div>
+
+                {step.description && step.status !== "completed" && (
+                  <div className="text-[10px] text-text-muted mt-0.5">
+                    {step.description}
+                  </div>
+                )}
+
+                {step.outcome && (
+                  <div
+                    className={cn(
+                      "text-[10px] mt-0.5",
+                      step.status === "failed" ? "text-error/80" : "text-accent/70"
+                    )}
+                  >
+                    {"\u2192"} {step.outcome}
+                  </div>
+                )}
+
+                {fileTargets.length > 0 && step.status !== "completed" && (
+                  <div className="text-[9px] text-text-dim mt-0.5">
+                    {fileTargets.join(", ")}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}