tanuki-telemetry 1.1.0

package/frontend/src/components/SettingsPage.tsx

@@ -0,0 +1,213 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import gsap from "gsap";
+import type { AuthUser } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+interface ApiKeyItem {
+  id: string;
+  label: string;
+  last_used_at: string | null;
+  created_at: string;
+}
+
+export function SettingsPage({ user }: { user: AuthUser | null }) {
+  const [keys, setKeys] = useState<ApiKeyItem[]>([]);
+  const [newKeyLabel, setNewKeyLabel] = useState("");
+  const [generatedKey, setGeneratedKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const loadKeys = useCallback(() => {
+    apiFetch("/api/keys")
+      .then((r) => r.json())
+      .then((data) => {
+        setKeys(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    loadKeys();
+  }, [loadKeys]);
+
+  const handleGenerate = async () => {
+    const label = newKeyLabel.trim() || "default";
+    try {
+      const res = await apiFetch("/api/keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ label }),
+      });
+      const data = await res.json();
+      setGeneratedKey(data.key);
+      setNewKeyLabel("");
+      setCopied(false);
+      loadKeys();
+    } catch {
+      // handled by apiFetch
+    }
+  };
+
+  const handleRevoke = async (keyId: string) => {
+    try {
+      await apiFetch(`/api/keys/${keyId}`, { method: "DELETE" });
+      loadKeys();
+      if (generatedKey) setGeneratedKey(null);
+    } catch {
+      // handled by apiFetch
+    }
+  };
+
+  const handleCopy = () => {
+    if (generatedKey) {
+      navigator.clipboard.writeText(generatedKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const pageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!pageRef.current) return;
+    gsap.fromTo(
+      pageRef.current.children,
+      { opacity: 0, y: 10 },
+      { opacity: 1, y: 0, duration: 0.3, stagger: 0.08, ease: "power2.out" }
+    );
+  }, []);
+
+  return (
+    <div ref={pageRef} className="flex-1 overflow-y-auto p-6 max-w-2xl mx-auto w-full">
+      {/* User info */}
+      {user && (
+        <div className="mb-8 border border-border p-4">
+          <div className="text-[10px] text-accent font-bold tracking-widest mb-3">
+            ACCOUNT
+          </div>
+          <div className="flex items-center gap-3">
+            {user.avatar_url && (
+              <img
+                src={user.avatar_url}
+                alt=""
+                className="w-8 h-8 rounded-full"
+              />
+            )}
+            <div>
+              <div className="text-text text-xs font-mono">{user.name}</div>
+              <div className="text-text-dim text-[10px] font-mono">
+                {user.email}
+              </div>
+            </div>
+            <a
+              href="/auth/logout"
+              className="ml-auto text-[10px] text-error hover:text-text font-mono transition-colors"
+            >
+              LOGOUT
+            </a>
+          </div>
+        </div>
+      )}
+
+      {/* API Keys */}
+      <div className="border border-border p-4">
+        <div className="text-[10px] text-accent font-bold tracking-widest mb-3">
+          API KEYS
+        </div>
+        <p className="text-text-dim text-[10px] font-mono mb-4">
+          Use API keys to connect Claude Code MCP clients to this Tanuki
+          server.
+        </p>
+
+        {/* Generate new key */}
+        <div className="flex gap-2 mb-4">
+          <input
+            type="text"
+            placeholder="label (optional)"
+            value={newKeyLabel}
+            onChange={(e) => setNewKeyLabel(e.target.value)}
+            className="flex-1 bg-bg border border-border px-3 py-1.5 text-xs font-mono text-text placeholder:text-text-dim focus:outline-none focus:border-accent"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleGenerate();
+            }}
+          />
+          <button
+            onClick={handleGenerate}
+            className="px-4 py-1.5 border border-accent text-accent hover:bg-accent hover:text-bg text-[10px] font-mono font-bold tracking-wider transition-colors"
+          >
+            GENERATE
+          </button>
+        </div>
+
+        {/* Show generated key (one-time) */}
+        {generatedKey && (
+          <div className="mb-4 border border-accent bg-bg p-3">
+            <div className="text-[10px] text-accent font-bold mb-2">
+              NEW API KEY — COPY NOW (shown once)
+            </div>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 text-xs font-mono text-text bg-bg-elevated px-2 py-1 overflow-x-auto select-all">
+                {generatedKey}
+              </code>
+              <button
+                onClick={handleCopy}
+                className="px-3 py-1 border border-border text-[10px] font-mono hover:border-accent hover:text-accent transition-colors"
+              >
+                {copied ? "COPIED" : "COPY"}
+              </button>
+            </div>
+            <div className="text-[10px] text-text-dim font-mono mt-2">
+              Add to your <code>.claude.json</code>:
+            </div>
+            <pre className="text-[10px] text-text-muted font-mono mt-1 overflow-x-auto">
+{`"telemetry": {
+  "type": "sse",
+  "url": "${window.location.origin}/mcp/sse",
+  "headers": { "Authorization": "Bearer ${generatedKey}" }
+}`}
+            </pre>
+          </div>
+        )}
+
+        {/* Key list */}
+        {loading ? (
+          <div className="text-text-dim text-[10px] font-mono">Loading...</div>
+        ) : keys.length === 0 ? (
+          <div className="text-text-dim text-[10px] font-mono">
+            No API keys yet. Generate one to connect Claude Code.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {keys.map((k) => (
+              <div
+                key={k.id}
+                className="flex items-center justify-between border border-border px-3 py-2"
+              >
+                <div className="flex items-center gap-3">
+                  <span className="text-xs font-mono text-text">{k.label}</span>
+                  <span className="text-[10px] font-mono text-text-dim">
+                    created{" "}
+                    {new Date(k.created_at + "Z").toLocaleDateString()}
+                  </span>
+                  {k.last_used_at && (
+                    <span className="text-[10px] font-mono text-text-dim">
+                      last used{" "}
+                      {new Date(k.last_used_at + "Z").toLocaleDateString()}
+                    </span>
+                  )}
+                </div>
+                <button
+                  onClick={() => handleRevoke(k.id)}
+                  className="text-[10px] font-mono text-error hover:text-text transition-colors"
+                >
+                  REVOKE
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/StreamComms.tsx

@@ -0,0 +1,228 @@
+import { useRef, useEffect, useState, useMemo } from "react"
+import gsap from "gsap"
+import type { Session, Event } from "@/types"
+import { cn } from "@/lib/utils"
+
+type MsgType = "broadcast" | "finding" | "blocker" | "done" | "directive"
+
+interface StreamMessage {
+  stream_name: string
+  msg_type: MsgType
+  message: string
+  timestamp: string
+  for_streams?: string[]
+}
+
+interface Props {
+  childSessions: Session[]
+  parentSessionId?: string
+}
+
+const MSG_TYPE_STYLES: Record<MsgType, { border: string; text: string; icon: string }> = {
+  broadcast: {
+    border: "border-l-info",
+    text: "text-info",
+    icon: "\u2139",
+  },
+  finding: {
+    border: "border-l-warning",
+    text: "text-warning",
+    icon: "\uD83D\uDCA1",
+  },
+  blocker: {
+    border: "border-l-error",
+    text: "text-error",
+    icon: "\u26D4",
+  },
+  done: {
+    border: "border-l-accent",
+    text: "text-accent",
+    icon: "\u2705",
+  },
+  directive: {
+    border: "border-l-purple",
+    text: "text-purple",
+    icon: "\u27A1",
+  },
+}
+
+export function StreamComms({ childSessions, parentSessionId }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const [messages, setMessages] = useState<StreamMessage[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // Build a map of session_id -> worktree_name
+  const sessionNameMap = useMemo(() => {
+    const map = new Map<string, string>()
+    for (const s of childSessions) {
+      map.set(s.id, s.worktree_name)
+    }
+    return map
+  }, [childSessions])
+
+  // Fetch events from all child sessions + parent coordinator events
+  useEffect(() => {
+    if (childSessions.length === 0) {
+      setMessages([])
+      setLoading(false)
+      return
+    }
+
+    const fetchAll = async () => {
+      const allMessages: StreamMessage[] = []
+
+      // Fetch child session events
+      await Promise.all(
+        childSessions.map(async (child) => {
+          try {
+            const res = await fetch(`/api/sessions/${child.id}`)
+            const data = await res.json()
+            const events: Event[] = data.events || []
+
+            for (const ev of events) {
+              if (!ev.metadata) continue
+              try {
+                const meta = JSON.parse(ev.metadata)
+                if (meta.msg_type && isValidMsgType(meta.msg_type)) {
+                  allMessages.push({
+                    stream_name: sessionNameMap.get(child.id) || child.id.slice(0, 8),
+                    msg_type: meta.msg_type as MsgType,
+                    message: ev.message,
+                    timestamp: ev.timestamp,
+                    for_streams: meta.for_streams,
+                  })
+                }
+              } catch {
+                // ignore parse errors
+              }
+            }
+          } catch {
+            // ignore fetch errors
+          }
+        })
+      )
+
+      // Fetch coordinator events from parent session
+      if (parentSessionId) {
+        try {
+          const res = await fetch(`/api/sessions/${parentSessionId}`)
+          const data = await res.json()
+          const events: Event[] = data.events || []
+
+          for (const ev of events) {
+            if (!ev.metadata) continue
+            try {
+              const meta = JSON.parse(ev.metadata)
+              if (meta.stream === "coordinator" && meta.msg_type) {
+                allMessages.push({
+                  stream_name: "coordinator",
+                  msg_type: (meta.msg_type === "directive" ? "directive" : meta.msg_type) as MsgType,
+                  message: ev.message,
+                  timestamp: ev.timestamp,
+                  for_streams: meta.for_streams,
+                })
+              }
+            } catch {
+              // ignore parse errors
+            }
+          }
+        } catch {
+          // ignore fetch errors
+        }
+      }
+
+      // Sort by timestamp
+      allMessages.sort((a, b) => a.timestamp.localeCompare(b.timestamp))
+      setMessages(allMessages)
+      setLoading(false)
+    }
+
+    fetchAll()
+  }, [childSessions, sessionNameMap, parentSessionId])
+
+  // Animate new messages
+  useEffect(() => {
+    if (!ref.current || messages.length === 0) return
+    const items = ref.current.querySelectorAll(".comm-msg")
+    if (items.length > 0) {
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -8 },
+        { opacity: 1, x: 0, duration: 0.3, stagger: 0.03, ease: "power2.out" }
+      )
+    }
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [messages])
+
+  if (loading) {
+    return (
+      <div className="text-text-dim text-[10px] py-2">
+        loading stream comms...
+      </div>
+    )
+  }
+
+  if (messages.length === 0) {
+    return (
+      <div className="text-text-dim text-[10px] py-2">
+        no inter-stream messages yet
+      </div>
+    )
+  }
+
+  return (
+    <div ref={ref} className="max-h-80 overflow-y-auto space-y-0.5">
+      {messages.map((msg, i) => {
+        const style = MSG_TYPE_STYLES[msg.msg_type] || MSG_TYPE_STYLES.broadcast
+        const time = formatTime(msg.timestamp)
+        const isCoordinator = msg.stream_name === "coordinator"
+
+        return (
+          <div
+            key={i}
+            className={cn(
+              "comm-msg flex items-start gap-2 px-2 py-1.5 border-l-2 text-[11px] font-mono",
+              style.border,
+              isCoordinator ? "bg-purple/[0.04]" : "bg-bg/50"
+            )}
+          >
+            <span className="flex-shrink-0 text-text-dim w-11 tabular-nums">
+              {time}
+            </span>
+            <span className="flex-shrink-0">{style.icon}</span>
+            <span className={cn("flex-shrink-0 font-bold", style.text)}>
+              [{msg.stream_name}]
+            </span>
+            {isCoordinator && msg.for_streams && msg.for_streams.length > 0 && (
+              <span className="flex-shrink-0 text-text-dim">
+                {"\u2192"} {msg.for_streams.join(", ")}:
+              </span>
+            )}
+            <span className={cn("flex-1", isCoordinator ? "text-purple/80" : "text-text")}>
+              {msg.message}
+            </span>
+          </div>
+        )
+      })}
+      <div ref={bottomRef} />
+    </div>
+  )
+}
+
+function isValidMsgType(t: string): t is MsgType {
+  return ["broadcast", "finding", "blocker", "done", "directive"].includes(t)
+}
+
+function formatTime(ts: string): string {
+  try {
+    const d = new Date(ts + "Z")
+    return d.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    })
+  } catch {
+    return "--:--"
+  }
+}

package/frontend/src/components/TanukiLogo.tsx

@@ -0,0 +1,16 @@
+export function TanukiLogo({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 168 128"
+      className={className}
+      fill="currentColor"
+    >
+      <g transform="translate(0,128) scale(0.1,-0.1)" stroke="none">
+        <path d="M113 1183 c-18 -37 -17 -212 1 -235 25 -34 48 -22 150 77 12 12 42 35 68 53 27 18 48 37 48 42 0 12 -55 50 -73 50 -9 0 -19 5 -22 10 -3 6 -17 10 -30 10 -13 0 -27 5 -30 10 -3 6 -27 10 -53 10 -41 0 -49 -3 -59 -27z m117 -30 c49 -18 70 -31 70 -44 0 -5 -26 -27 -57 -51 -32 -23 -63 -49 -70 -57 -9 -12 -14 -13 -24 -4 -15 15 -8 135 10 157 17 20 15 20 71 -1z" />
+        <path d="M1455 1200 c-3 -5 -17 -10 -30 -10 -13 0 -27 -4 -30 -10 -3 -5 -13 -10 -22 -10 -18 0 -73 -38 -73 -50 0 -5 21 -23 46 -41 25 -17 62 -46 82 -64 101 -93 114 -99 138 -67 18 23 19 198 2 235 -11 24 -19 27 -60 27 -26 0 -50 -4 -53 -10z m76 -67 c11 -30 12 -130 1 -137 -11 -6 -92 52 -92 65 0 5 -6 9 -13 9 -21 0 -48 35 -41 53 3 9 25 22 48 27 22 6 46 12 51 14 19 6 36 -7 46 -31z" />
+        <path d="M490 1002 c0 -4 -12 -13 -27 -19 -62 -27 -268 -227 -341 -330 -129 -182 -108 -278 103 -457 17 -14 36 -26 43 -26 6 0 12 -4 12 -8 0 -5 16 -14 35 -22 19 -8 35 -17 35 -22 0 -4 7 -8 15 -8 8 0 23 -4 33 -9 9 -5 31 -14 47 -21 17 -7 38 -16 47 -21 10 -5 29 -9 43 -9 14 0 33 -4 43 -9 20 -10 195 -31 262 -31 67 0 242 21 262 31 10 5 27 9 37 9 11 0 33 5 48 11 15 6 37 15 48 19 43 16 160 75 163 82 2 5 9 8 15 8 12 0 39 21 102 78 78 72 125 152 125 217 0 43 -33 120 -82 188 -71 99 -282 304 -340 330 -15 6 -28 15 -28 19 0 5 -27 8 -60 8 -60 0 -100 -16 -164 -65 -23 -18 -26 -27 -26 -83 0 -53 10 -93 30 -112 3 -3 17 -21 31 -40 15 -19 39 -48 53 -65 14 -16 32 -42 39 -57 6 -16 15 -28 19 -28 5 0 8 -9 8 -19 0 -11 5 -23 10 -26 14 -8 13 -71 -1 -97 -23 -43 -53 -65 -131 -97 -46 -19 -146 -26 -233 -16 -56 6 -72 11 -135 39 -28 13 -59 42 -77 74 -15 26 -17 88 -3 97 6 3 10 13 10 21 0 13 52 99 69 114 4 3 18 21 33 42 15 20 33 42 40 50 28 30 38 60 38 117 0 48 -4 62 -24 82 -45 45 -103 69 -167 69 -32 0 -59 -3 -59 -8z m121 -43 c57 -19 89 -56 89 -103 -1 -23 -6 -50 -13 -62 -19 -32 -71 -94 -79 -94 -5 0 -8 20 -8 44 0 76 -67 146 -127 131 -32 -8 -80 -61 -89 -98 -10 -46 4 -93 38 -126 17 -17 35 -28 39 -25 4 2 10 0 13 -5 4 -5 22 -7 41 -4 28 4 35 2 35 -11 0 -9 -4 -16 -10 -16 -5 0 -10 -8 -10 -18 0 -10 -4 -22 -10 -28 -5 -5 -12 -30 -16 -54 -4 -35 0 -55 18 -89 22 -43 81 -99 109 -105 8 -2 28 -9 44 -16 50 -22 257 -19 335 5 76 23 153 90 165 144 8 36 -2 108 -16 117 -5 3 -9 12 -9 21 0 9 -7 25 -17 35 -22 25 -10 33 27 18 61 -25 122 25 135 111 8 57 -11 101 -58 129 -46 29 -74 25 -113 -15 -38 -40 -48 -68 -42 -125 l3 -39 -28 27 c-46 44 -78 111 -75 156 3 34 10 45 44 71 61 47 119 47 190 0 76 -51 260 -238 315 -320 69 -104 77 -133 55 -199 -21 -62 -109 -159 -182 -202 -24 -14 -44 -30 -44 -35 0 -5 -6 -9 -12 -9 -7 0 -38 -12 -68 -26 -348 -164 -823 -106 -1080 133 -81 76 -120 136 -120 188 0 85 130 254 325 421 99 85 133 97 206 73z m-65 -147 c23 -29 17 -103 -10 -134 -29 -35 -56 -35 -90 -2 -20 21 -26 37 -26 70 0 24 5 44 10 44 6 0 10 7 10 15 0 37 79 43 106 7z m696 -5 c28 -35 23 -99 -8 -131 -34 -33 -61 -33 -90 2 -37 42 -26 144 16 156 27 8 65 -5 82 -27z" />
+        <path d="M725 557 c-31 -19 -45 -35 -45 -51 0 -18 48 -67 83 -83 15 -7 38 -18 52 -25 19 -9 31 -9 50 0 14 7 37 18 52 25 35 16 83 65 83 83 0 17 -15 33 -48 52 -28 16 -200 15 -227 -1z m184 -33 c36 -7 39 -17 12 -41 -40 -37 -51 -43 -71 -43 -33 0 -97 37 -103 59 -4 16 1 21 27 24 55 7 103 7 135 1z" />
+      </g>
+    </svg>
+  )
+}