tanuki-telemetry 1.1.0

package/frontend/src/hooks/useWebSocket.ts

@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState, useCallback } from "react"
+import type { Session, Event, Iteration, Screenshot, Artifact, Insight, PlanStep } from "@/types"
+
+export type WsMessage =
+  | { type: "event"; data: Event }
+  | { type: "iteration"; data: Iteration }
+  | { type: "screenshot"; data: Screenshot }
+  | { type: "artifact"; data: Artifact }
+  | { type: "insight"; data: Insight }
+  | { type: "plan_step_new"; data: PlanStep }
+  | { type: "plan_step_update"; data: PlanStep }
+  | { type: "session_update"; data: Session }
+  | { type: "session_new"; data: Session }
+  | { type: "child_session_new"; data: Session }
+  | { type: "child_session_update"; data: Session }
+  | { type: "coordinator_update"; data: { session_id: string; updated_at: string } }
+
+export type WsStatus = "connecting" | "connected" | "disconnected"
+
+interface UseWebSocketReturn {
+  status: WsStatus
+  messages: WsMessage[]
+  activeSessions: Session[]
+}
+
+export function useWebSocket(): UseWebSocketReturn {
+  const [status, setStatus] = useState<WsStatus>("connecting")
+  const [messages, setMessages] = useState<WsMessage[]>([])
+  const [activeSessions, setActiveSessions] = useState<Session[]>([])
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimeout = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  const connect = useCallback(() => {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"
+    const wsUrl = `${protocol}//${window.location.host}/ws`
+
+    try {
+      const ws = new WebSocket(wsUrl)
+      wsRef.current = ws
+
+      ws.onopen = () => {
+        setStatus("connected")
+      }
+
+      ws.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data)
+
+          // Initial connection message
+          if (data.type === "connected") {
+            setActiveSessions(data.active_sessions || [])
+            return
+          }
+
+          // Batch messages
+          if (data.messages) {
+            setMessages((prev) => {
+              const next = [...prev, ...data.messages]
+              // Keep last 500 messages in memory
+              return next.slice(-500)
+            })
+          }
+        } catch {
+          // ignore parse errors
+        }
+      }
+
+      ws.onclose = () => {
+        setStatus("disconnected")
+        // Reconnect after 2s
+        reconnectTimeout.current = setTimeout(() => {
+          setStatus("connecting")
+          connect()
+        }, 2000)
+      }
+
+      ws.onerror = () => {
+        ws.close()
+      }
+    } catch {
+      setStatus("disconnected")
+      reconnectTimeout.current = setTimeout(connect, 2000)
+    }
+  }, [])
+
+  useEffect(() => {
+    connect()
+    return () => {
+      if (wsRef.current) wsRef.current.close()
+      if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current)
+    }
+  }, [connect])
+
+  return { status, messages, activeSessions }
+}

package/frontend/src/index.css

@@ -0,0 +1,66 @@
+@import "tailwindcss";
+
+@theme {
+  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Fira Mono", ui-monospace, monospace;
+
+  --color-bg: #0a0a0a;
+  --color-bg-elevated: #111111;
+  --color-bg-hover: #1a1a1a;
+  --color-border: #222222;
+  --color-border-bright: #333333;
+  --color-text: #c8c8c8;
+  --color-text-muted: #666666;
+  --color-text-dim: #444444;
+  --color-accent: #00ff88;
+  --color-accent-dim: #00994d;
+  --color-error: #ff4444;
+  --color-error-dim: #661a1a;
+  --color-warning: #ffaa00;
+  --color-warning-dim: #664400;
+  --color-info: #4488ff;
+  --color-info-dim: #1a3366;
+  --color-purple: #aa66ff;
+  --color-purple-dim: #442266;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-bright) transparent;
+  border-radius: 0 !important;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--color-border-bright); }
+
+::selection {
+  background: var(--color-accent);
+  color: var(--color-bg);
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-mono);
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.session-item, .group-header {
+  transition: border-color 0.2s ease, background-color 0.15s ease;
+}
+
+/* Expand/collapse animation for dropdown content */
+[data-expand] {
+  animation: expand 0.15s ease-out forwards;
+  transform-origin: top;
+}
+
+@keyframes expand {
+  from { opacity: 0; transform: scaleY(0.9); }
+  to { opacity: 1; transform: scaleY(1); }
+}

package/frontend/src/lib/api.ts

@@ -0,0 +1,15 @@
+/**
+ * Fetch wrapper that redirects to Google login on 401.
+ */
+export async function apiFetch(url: string, init?: RequestInit): Promise<Response> {
+  const res = await fetch(url, init);
+
+  if (res.status === 401) {
+    // Check if auth is enabled by trying /auth/me
+    // If we get a 401, redirect to Google login
+    window.location.href = "/auth/google";
+    throw new Error("Not authenticated — redirecting to login");
+  }
+
+  return res;
+}

package/frontend/src/lib/utils.ts

@@ -0,0 +1,58 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDuration(seconds: number | null): string {
+  if (seconds == null) return "-"
+  if (seconds < 60) return seconds + "s"
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return m + "m " + s + "s"
+}
+
+export function formatTokens(n: number | null): string {
+  if (n == null || n === 0) return "0"
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + "M"
+  if (n >= 1000) return (n / 1000).toFixed(1) + "k"
+  return String(n)
+}
+
+export function relativeTime(eventTs: string, sessionStart: string): string {
+  const diff = Math.max(
+    0,
+    Math.floor(
+      (new Date(eventTs + "Z").getTime() - new Date(sessionStart + "Z").getTime()) / 1000
+    )
+  )
+  const m = Math.floor(diff / 60)
+  const s = diff % 60
+  return "+" + m + ":" + String(s).padStart(2, "0")
+}
+
+export function timeAgo(ts: string): string {
+  const now = Date.now()
+  const then = new Date(ts.endsWith("Z") ? ts : ts + "Z").getTime()
+  const diff = Math.max(0, Math.floor((now - then) / 1000))
+  if (diff < 60) return "just now"
+  if (diff < 3600) return Math.floor(diff / 60) + "m ago"
+  if (diff < 86400) return Math.floor(diff / 3600) + "h ago"
+  return Math.floor(diff / 86400) + "d ago"
+}
+
+export function screenshotUrl(filePath: string, screenshotId?: number, size?: "thumb" | "full"): string {
+  // Prefer by-id endpoint (self-contained, always works)
+  if (screenshotId) {
+    const sizeParam = size === "thumb" ? "?size=thumb" : ""
+    return `/api/screenshots/by-id/${screenshotId}${sizeParam}`
+  }
+  // Fallback to path-based serving
+  const idx = filePath.indexOf("outputs/")
+  if (idx !== -1) {
+    return "/api/screenshots/" + filePath.substring(idx + 8)
+  }
+  const parts = filePath.split("/")
+  return "/api/screenshots/" + parts[parts.length - 1]
+}

package/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/frontend/src/types.ts

@@ -0,0 +1,181 @@
+export interface Session {
+  id: string
+  worktree_name: string
+  ticket_id: string | null
+  ticket_title: string | null
+  branch_name: string | null
+  mode: "local" | "remote"
+  status: "in_progress" | "completed" | "failed" | "interrupted"
+  total_input_tokens: number
+  total_output_tokens: number
+  total_iterations: number
+  max_iterations: number
+  started_at: string
+  ended_at: string | null
+  duration_seconds: number | null
+  final_result: string | null
+  created_at: string
+  parent_session_id: string | null
+  user_email: string | null
+}
+
+export interface Event {
+  id: number
+  session_id: string
+  phase: string
+  event_type: EventType
+  message: string
+  metadata: string | null
+  tokens_used: number
+  timestamp: string
+}
+
+export type EventType =
+  | "decision"
+  | "action"
+  | "error"
+  | "fix"
+  | "info"
+  | "phase_change"
+  | "review_pass"
+  | "review_flag"
+  | "review_dispatch"
+  | "error_resolve"
+  | "cost_checkpoint"
+  | "pattern_detect"
+  | "knowledge_extract"
+
+export interface Iteration {
+  id: number
+  session_id: string
+  iteration_number: number
+  trigger: string
+  error_summary: string
+  fix_description: string | null
+  files_changed: string | null
+  result: "pass" | "fail" | "partial"
+  duration_seconds: number | null
+  timestamp: string
+}
+
+export interface Screenshot {
+  id: number
+  session_id: string
+  iteration_number: number | null
+  phase: string
+  description: string
+  file_path: string
+  stored_path: string | null
+  thumb_path: string | null
+  event_id: number | null
+  timestamp: string
+}
+
+export interface FinalResult {
+  tests_passed?: boolean
+  lint_passed?: boolean
+  typecheck_passed?: boolean
+  pr_url?: string
+  pr_number?: number
+}
+
+export interface Stats {
+  total_sessions: number
+  avg_iterations: number
+  avg_duration_seconds: number
+  total_tokens: number
+  completed: number
+  failed: number
+  pass_rate: number
+}
+
+export interface PlanStep {
+  id: number
+  session_id: string
+  step_number: number
+  title: string
+  description: string
+  status: "pending" | "in_progress" | "completed" | "skipped" | "failed"
+  parent_step: number | null
+  file_targets: string | null
+  outcome: string | null
+  started_at: string | null
+  completed_at: string | null
+  duration_seconds: number | null
+  created_at: string
+}
+
+export interface Insight {
+  id: number
+  session_id: string
+  insight_type: "mistake" | "success_pattern" | "codebase_gotcha" | "optimization" | "rule_learned"
+  category: string
+  title: string
+  description: string
+  evidence: string | null
+  confidence: number
+  times_validated: number
+  file_patterns: string | null
+  error_patterns: string | null
+  created_at: string
+}
+
+export interface Artifact {
+  id: number
+  session_id: string
+  artifact_type: string
+  description: string
+  file_path: string
+  stored_path: string | null
+  mime_type: string | null
+  file_size: number | null
+  metadata: string | null
+  event_id: number | null
+  timestamp: string
+}
+
+export interface Walkthrough {
+  id: number
+  url: string
+  app_name: string | null
+  scenario: string | null
+  status: "in_progress" | "pass" | "fail" | "partial"
+  summary: string | null
+  total_actions: number
+  passed: number
+  failed: number
+  started_at: string
+  ended_at: string | null
+}
+
+export interface WalkthroughAction {
+  id: number
+  walkthrough_id: number
+  action_type: "navigate" | "click" | "type" | "assert" | "wait" | "screenshot"
+  target: string
+  value: string | null
+  status: "pass" | "fail"
+  message: string | null
+  timestamp: string
+}
+
+export interface WalkthroughScreenshot {
+  id: number
+  walkthrough_id: number
+  action_id: number | null
+  name: string
+  annotation: string | null
+  stored_path: string
+  timestamp: string
+}
+
+export interface SessionDetail {
+  session: Session
+  events: Event[]
+  iterations: Iteration[]
+  screenshots: Screenshot[]
+  artifacts: Artifact[]
+  insights: Insight[]
+  plan_steps: PlanStep[]
+  child_sessions: Session[]
+}

package/frontend/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/frontend/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3333',
+      '/ws': {
+        target: 'ws://localhost:3333',
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+  },
+})

package/install.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+set -e
+
+# Tanuki — one-command install
+# Usage: curl -fsSL <url>/install.sh | bash
+#    or: ./install.sh
+
+TANUKI_DIR="${TANUKI_DIR:-$HOME/.claude/mcp-servers/telemetry}"
+DATA_DIR="${DATA_DIR:-$HOME/.tanuki/data}"
+VERSION="1.1.0"
+
+echo ""
+echo "  ┌─────────────────────────┐"
+echo "  │  TANUKI  //  v${VERSION}     │"
+echo "  └─────────────────────────┘"
+echo ""
+
+# Check prerequisites
+command -v docker >/dev/null 2>&1 || { echo "Error: docker is required. Install Docker Desktop first."; exit 1; }
+command -v git >/dev/null 2>&1 || { echo "Error: git is required."; exit 1; }
+
+# Clone or update
+if [ -d "$TANUKI_DIR/.git" ]; then
+  echo "[1/4] Updating existing installation..."
+  cd "$TANUKI_DIR"
+  git pull --ff-only 2>/dev/null || echo "  (local changes detected — skipping git pull)"
+else
+  echo "[1/4] Cloning tanuki..."
+  mkdir -p "$(dirname "$TANUKI_DIR")"
+  git clone https://github.com/anthropics/tanuki-telemetry.git "$TANUKI_DIR" 2>/dev/null || {
+    echo "  Repo not accessible — using local copy"
+  }
+fi
+
+cd "$TANUKI_DIR"
+
+# Create data directory
+mkdir -p "$DATA_DIR"
+
+# Build Docker images
+echo "[2/4] Building Docker images..."
+docker build -t telemetry-mcp:latest -t telemetry-dashboard:latest . -q
+
+# Stop existing dashboard if running
+echo "[3/4] Starting dashboard..."
+docker rm -f telemetry-dashboard 2>/dev/null || true
+docker run -d --rm \
+  --name telemetry-dashboard \
+  -p 3333:3333 \
+  -v "$DATA_DIR:/data" \
+  telemetry-dashboard:latest
+
+# Configure Claude Code MCP
+echo "[4/4] Configuring Claude Code..."
+CLAUDE_CONFIG="$HOME/.claude.json"
+if [ -f "$CLAUDE_CONFIG" ]; then
+  # Check if telemetry MCP is already configured
+  if grep -q '"telemetry"' "$CLAUDE_CONFIG" 2>/dev/null; then
+    echo "  MCP already configured in .claude.json"
+  else
+    echo "  Add this to your .claude.json mcpServers:"
+    echo ""
+    echo '  "telemetry": {'
+    echo '    "type": "stdio",'
+    echo '    "command": "docker",'
+    echo '    "args": ["run", "--rm", "-i", "-v", "'$DATA_DIR':/data", "--entrypoint", "node", "telemetry-mcp:latest", "dist/index.js"]'
+    echo '  }'
+    echo ""
+  fi
+else
+  echo "  No .claude.json found — create one with:"
+  echo ""
+  echo '  { "mcpServers": { "telemetry": { "type": "stdio", "command": "docker", "args": ["run", "--rm", "-i", "-v", "'$DATA_DIR':/data", "--entrypoint", "node", "telemetry-mcp:latest", "dist/index.js"] } } }'
+  echo ""
+fi
+
+# Wait for dashboard to start
+sleep 2
+if curl -s http://localhost:3333/health | grep -q '"ok":true'; then
+  echo ""
+  echo "  Tanuki is running at http://localhost:3333"
+  echo ""
+else
+  echo ""
+  echo "  Dashboard may still be starting — check http://localhost:3333"
+  echo ""
+fi

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "tanuki-telemetry",
+  "version": "1.1.0",
+  "description": "Workflow monitor and telemetry dashboard for Claude Code autonomous agents",
+  "type": "module",
+  "bin": {
+    "tanuki": "./bin/tanuki.mjs",
+    "tanuki-telemetry": "./bin/tanuki.mjs"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "frontend/src/",
+    "frontend/index.html",
+    "frontend/package.json",
+    "frontend/tsconfig.json",
+    "frontend/tsconfig.app.json",
+    "frontend/eslint.config.js",
+    "frontend/vite.config.ts",
+    "tsconfig.json",
+    "Dockerfile",
+    "install.sh"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:frontend": "cd frontend && npx vite build",
+    "build:all": "tsc && cd frontend && npx vite build",
+    "start": "node dist/index.js",
+    "dev": "tsx src/index.ts"
+  },
+  "keywords": ["claude", "mcp", "telemetry", "dashboard", "autonomous", "agents", "workflow"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anthropics/tanuki-telemetry.git"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "better-sqlite3": "^11.8.1",
+    "better-sqlite3-session-store": "^0.1.0",
+    "express": "^4.21.0",
+    "express-session": "^1.19.0",
+    "multer": "^2.1.1",
+    "passport": "^0.7.0",
+    "passport-google-oauth20": "^2.0.0",
+    "sharp": "^0.34.5",
+    "uuid": "^11.1.0",
+    "ws": "^8.19.0"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/express": "^5.0.0",
+    "@types/express-session": "^1.18.2",
+    "@types/multer": "^2.1.0",
+    "@types/node": "^22.13.10",
+    "@types/passport": "^1.0.17",
+    "@types/passport-google-oauth20": "^2.0.17",
+    "@types/sharp": "^0.31.1",
+    "@types/uuid": "^10.0.0",
+    "@types/ws": "^8.18.1",
+    "typescript": "^5.7.3"
+  }
+}