tanuki-telemetry 1.4.1 → 1.4.3

package/frontend/src/App.tsx

@@ -1,70 +1,77 @@
-import { useState, useEffect, useRef } from "react"
-import gsap from "gsap"
-import { Header } from "@/components/Header"
-import { SessionList } from "@/components/SessionList"
-import { SessionDetail } from "@/components/SessionDetail"
-import { KnowledgePage } from "@/components/KnowledgePage"
-import { CoordinatorPage } from "@/components/CoordinatorPage"
-import { LoginPage } from "@/components/LoginPage"
-import { SettingsPage } from "@/components/SettingsPage"
-import { WalkthroughPage } from "@/components/WalkthroughPage"
-import { useAuth } from "@/hooks/useAuth"
-import { useStats, useSessions, useSessionDetail } from "@/hooks/useApi"
-import { useWebSocket } from "@/hooks/useWebSocket"
-import { cn } from "@/lib/utils"
-
-type Tab = "sessions" | "knowledge" | "coordinator" | "walkthroughs" | "settings"
+import { useState, useEffect, useRef } from "react";
+import gsap from "gsap";
+import { Header } from "@/components/Header";
+import { SessionList } from "@/components/SessionList";
+import { SessionDetail } from "@/components/SessionDetail";
+import { KnowledgePage } from "@/components/KnowledgePage";
+import { CoordinatorPage } from "@/components/CoordinatorPage";
+import { LoginPage } from "@/components/LoginPage";
+import { SettingsPage } from "@/components/SettingsPage";
+import { WalkthroughPage } from "@/components/WalkthroughPage";
+import { DemosPage } from "@/components/DemosPage";
+import { useAuth } from "@/hooks/useAuth";
+import { useStats, useSessions, useSessionDetail } from "@/hooks/useApi";
+import { useWebSocket } from "@/hooks/useWebSocket";
+import { cn } from "@/lib/utils";
+
+type Tab =
+  | "sessions"
+  | "knowledge"
+  | "coordinator"
+  | "walkthroughs"
+  | "demos"
+  | "settings";
 
 export default function App() {
-  const { user, loading: authLoading, authEnabled } = useAuth()
-  const [tab, setTab] = useState<Tab>("coordinator")
-  const [filter, setFilter] = useState("")
-  const [activeId, setActiveId] = useState<string | null>(null)
-  const [parentId, setParentId] = useState<string | null>(null)
+  const { user, loading: authLoading, authEnabled } = useAuth();
+  const [tab, setTab] = useState<Tab>("coordinator");
+  const [filter, setFilter] = useState("");
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [parentId, setParentId] = useState<string | null>(null);
 
-  const tabBarRef = useRef<HTMLDivElement>(null)
+  const tabBarRef = useRef<HTMLDivElement>(null);
 
-  const { stats, reload: reloadStats } = useStats()
-  const { sessions, reload: reloadSessions } = useSessions(filter)
-  const { detail, loading, reload: reloadDetail } = useSessionDetail(activeId)
-  const { status: wsStatus, messages } = useWebSocket()
+  const { stats, reload: reloadStats } = useStats();
+  const { sessions, reload: reloadSessions } = useSessions(filter);
+  const { detail, loading, reload: reloadDetail } = useSessionDetail(activeId);
+  const { status: wsStatus, messages } = useWebSocket();
 
   // Staggered fade-in for tab bar
   useEffect(() => {
-    if (!tabBarRef.current) return
+    if (!tabBarRef.current) return;
     gsap.fromTo(
       tabBarRef.current.children,
       { opacity: 0 },
-      { opacity: 1, duration: 0.3, stagger: 0.06, ease: "power2.out" }
-    )
-  }, [])
+      { opacity: 1, duration: 0.3, stagger: 0.06, ease: "power2.out" },
+    );
+  }, []);
 
   // Navigate to a child session, remembering the parent
   const handleSelectSession = (id: string) => {
     if (detail?.session) {
-      setParentId(detail.session.id)
+      setParentId(detail.session.id);
     }
-    setActiveId(id)
-  }
+    setActiveId(id);
+  };
 
   // Navigate back to parent
   const handleBackToParent = () => {
     if (parentId) {
-      setActiveId(parentId)
-      setParentId(null)
+      setActiveId(parentId);
+      setParentId(null);
     } else if (detail?.session?.parent_session_id) {
-      setActiveId(detail.session.parent_session_id)
+      setActiveId(detail.session.parent_session_id);
     }
-  }
+  };
 
   // React to WebSocket messages
   useEffect(() => {
-    if (messages.length === 0) return
-    const latest = messages[messages.length - 1]
+    if (messages.length === 0) return;
+    const latest = messages[messages.length - 1];
 
     if (latest.type === "session_new" || latest.type === "session_update") {
-      reloadSessions()
-      reloadStats()
+      reloadSessions();
+      reloadStats();
     }
 
     if (activeId) {
@@ -74,68 +81,104 @@ export default function App() {
         (latest.type === "screenshot" && latest.data.session_id === activeId) ||
         (latest.type === "artifact" && latest.data.session_id === activeId) ||
         (latest.type === "insight" && latest.data.session_id === activeId) ||
-        (latest.type === "plan_step_new" && latest.data.session_id === activeId) ||
-        (latest.type === "plan_step_update" && latest.data.session_id === activeId) ||
-        (latest.type === "session_update" && latest.data.id === activeId)
+        (latest.type === "plan_step_new" &&
+          latest.data.session_id === activeId) ||
+        (latest.type === "plan_step_update" &&
+          latest.data.session_id === activeId) ||
+        (latest.type === "session_update" && latest.data.id === activeId);
 
       if (affectsActive) {
-        reloadDetail()
+        reloadDetail();
       }
 
       // If a child session of the active session updates, also refresh
       if (detail?.child_sessions && detail.child_sessions.length > 0) {
-        const childIds = new Set(detail.child_sessions.map((c) => c.id))
+        const childIds = new Set(detail.child_sessions.map((c) => c.id));
         const affectsChild =
           (latest.type === "session_update" && childIds.has(latest.data.id)) ||
-          (latest.type === "session_new" && latest.data.parent_session_id === activeId)
+          (latest.type === "session_new" &&
+            latest.data.parent_session_id === activeId);
         if (affectsChild) {
-          reloadDetail()
+          reloadDetail();
         }
       }
     }
-  }, [messages, activeId, reloadSessions, reloadStats, reloadDetail, detail?.child_sessions])
+  }, [
+    messages,
+    activeId,
+    reloadSessions,
+    reloadStats,
+    reloadDetail,
+    detail?.child_sessions,
+  ]);
 
   // Auth loading state
   if (authLoading) {
     return (
       <div className="h-screen flex items-center justify-center bg-bg">
-        <div className="text-accent text-xs font-mono animate-pulse">INITIALIZING...</div>
+        <div className="text-accent text-xs font-mono animate-pulse">
+          INITIALIZING...
+        </div>
       </div>
-    )
+    );
   }
 
   // Auth gate — if auth is enabled and user is not logged in, show login page
   if (authEnabled && !user) {
-    return <LoginPage />
+    return <LoginPage />;
   }
 
   return (
     <div className="h-screen flex flex-col overflow-hidden 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
+          className="w-full h-px bg-accent"
+          style={{
+            animation: "scanline 8s linear infinite",
+          }}
+        />
       </div>
 
       <Header stats={stats} />
 
       {/* Tab bar */}
-      <div ref={tabBarRef} className="border-b border-border px-5 flex items-center gap-1 bg-bg flex-shrink-0">
-        <TabButton active={tab === "coordinator"} onClick={() => setTab("coordinator")}>
+      <div
+        ref={tabBarRef}
+        className="border-b border-border px-5 flex items-center gap-1 bg-bg flex-shrink-0"
+      >
+        <TabButton
+          active={tab === "coordinator"}
+          onClick={() => setTab("coordinator")}
+        >
           COORDINATOR
         </TabButton>
-        <TabButton active={tab === "sessions"} onClick={() => setTab("sessions")}>
+        <TabButton
+          active={tab === "sessions"}
+          onClick={() => setTab("sessions")}
+        >
           SESSIONS
         </TabButton>
-        <TabButton active={tab === "knowledge"} onClick={() => setTab("knowledge")}>
+        <TabButton
+          active={tab === "knowledge"}
+          onClick={() => setTab("knowledge")}
+        >
           KNOWLEDGE
         </TabButton>
-        <TabButton active={tab === "walkthroughs"} onClick={() => setTab("walkthroughs")}>
+        <TabButton
+          active={tab === "walkthroughs"}
+          onClick={() => setTab("walkthroughs")}
+        >
           WALKTHROUGHS
         </TabButton>
+        <TabButton active={tab === "demos"} onClick={() => setTab("demos")}>
+          DEMOS
+        </TabButton>
         {authEnabled && (
-          <TabButton active={tab === "settings"} onClick={() => setTab("settings")}>
+          <TabButton
+            active={tab === "settings"}
+            onClick={() => setTab("settings")}
+          >
             SETTINGS
           </TabButton>
         )}
@@ -151,8 +194,8 @@ export default function App() {
             activeId={activeId}
             filter={filter}
             onSelect={(id) => {
-              setParentId(null)
-              setActiveId(id)
+              setParentId(null);
+              setActiveId(id);
             }}
             onFilterChange={setFilter}
           />
@@ -179,6 +222,8 @@ export default function App() {
         <KnowledgePage wsMessages={messages} />
       ) : tab === "walkthroughs" ? (
         <WalkthroughPage />
+      ) : tab === "demos" ? (
+        <DemosPage />
       ) : tab === "settings" ? (
         <SettingsPage user={user} />
       ) : null}
@@ -196,14 +241,23 @@ export default function App() {
             </>
           )}
           <span className="flex items-center gap-1.5">
-            <span className={cn("inline-block w-1.5 h-1.5", wsStatus === "connected" ? "bg-accent" : wsStatus === "connecting" ? "bg-warning" : "bg-error")} />
+            <span
+              className={cn(
+                "inline-block w-1.5 h-1.5",
+                wsStatus === "connected"
+                  ? "bg-accent"
+                  : wsStatus === "connecting"
+                    ? "bg-warning"
+                    : "bg-error",
+              )}
+            />
           </span>
           <span className="text-border-bright">|</span>
           {sessions.length} sessions
         </span>
       </div>
     </div>
-  )
+  );
 }
 
 function TabButton({
@@ -211,9 +265,9 @@ function TabButton({
   onClick,
   children,
 }: {
-  active: boolean
-  onClick: () => void
-  children: React.ReactNode
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
 }) {
   return (
     <button
@@ -222,11 +276,10 @@ function TabButton({
         "px-3 py-2 text-[10px] font-bold uppercase tracking-widest border-b-2 transition-colors duration-200",
         active
           ? "border-b-accent text-accent"
-          : "border-b-transparent text-text-dim hover:text-text-muted"
+          : "border-b-transparent text-text-dim hover:text-text-muted",
       )}
     >
       {children}
     </button>
-  )
+  );
 }
-

package/frontend/src/components/DemosPage.tsx

@@ -0,0 +1,297 @@
+import { useState, useEffect, useRef } from "react";
+import gsap from "gsap";
+import { Play, Film, Clock, HardDrive, Calendar } from "lucide-react";
+import type { Artifact } from "@/types";
+import { cn, timeAgo } from "@/lib/utils";
+
+function formatSize(bytes: number | null): string {
+  if (bytes == null) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function artifactUrl(id: number): string {
+  return `/api/artifacts/by-id/${id}`;
+}
+
+function isVideo(a: Artifact): boolean {
+  const mime = a.mime_type || "";
+  const ext = a.file_path?.split(".").pop()?.toLowerCase() || "";
+  return mime.startsWith("video/") || ["mp4", "webm", "mov"].includes(ext);
+}
+
+export function DemosPage() {
+  const [demos, setDemos] = useState<Artifact[]>([]);
+  const [activeId, setActiveId] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const sidebarAnimated = useRef(false);
+
+  useEffect(() => {
+    fetch("/api/artifacts?type=demo,recording")
+      .then((r) => r.json())
+      .then((data) => {
+        const items = data.artifacts || [];
+        setDemos(items);
+        if (items.length > 0) {
+          setActiveId(items[0].id);
+        }
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  // Animate sidebar entries on first load
+  useEffect(() => {
+    if (!sidebarRef.current || sidebarAnimated.current || demos.length === 0)
+      return;
+    sidebarAnimated.current = true;
+    const items = sidebarRef.current.querySelectorAll("[data-demo-item]");
+    gsap.fromTo(
+      items,
+      { opacity: 0, x: -8 },
+      { opacity: 1, x: 0, duration: 0.25, stagger: 0.03, ease: "power2.out" },
+    );
+  }, [demos.length > 0]);
+
+  const activeDemo = demos.find((d) => d.id === activeId) || null;
+
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      {/* Left sidebar — demo 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> demos/
+          </span>
+          <span className="text-[10px] text-text-dim">
+            {demos.length} recordings
+          </span>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="p-4 text-xs text-accent animate-pulse">
+              Loading...
+            </div>
+          ) : demos.length === 0 ? (
+            <div className="p-4 text-xs text-text-dim">
+              No demos or recordings yet.
+              <div className="mt-2 text-[10px]">
+                Use <code className="text-accent">/demo</code> to record one, or{" "}
+                <code className="text-accent">/record</code> for manual
+                recording.
+              </div>
+            </div>
+          ) : (
+            demos.map((demo) => (
+              <button
+                key={demo.id}
+                data-demo-item
+                onClick={() => setActiveId(demo.id)}
+                className={cn(
+                  "w-full text-left px-4 py-2.5 border-b border-border transition-colors cursor-pointer",
+                  activeId === demo.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">
+                  <span
+                    className={cn(
+                      "text-[10px] font-bold px-1.5 py-0.5 rounded",
+                      demo.artifact_type === "demo"
+                        ? "bg-accent/15 text-accent"
+                        : "bg-info/15 text-info",
+                    )}
+                  >
+                    {demo.artifact_type === "demo" ? "DEMO" : "REC"}
+                  </span>
+                  <span className="text-xs text-text truncate font-mono">
+                    {demo.description || `Recording #${demo.id}`}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 mt-1 text-[10px] text-text-muted">
+                  <span>{timeAgo(demo.timestamp)}</span>
+                  {demo.file_size && (
+                    <>
+                      <span className="text-border-bright">|</span>
+                      <span>{formatSize(demo.file_size)}</span>
+                    </>
+                  )}
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Right panel — video player */}
+      <div className="flex-1 overflow-y-auto">
+        {activeDemo ? (
+          <DemoDetail demo={activeDemo} />
+        ) : (
+          <div className="h-full flex items-center justify-center text-text-dim text-xs">
+            {loading ? (
+              <span className="text-accent animate-pulse">Loading...</span>
+            ) : demos.length === 0 ? (
+              <div className="text-center">
+                <Film className="mx-auto mb-3 text-text-dim" size={32} />
+                <div>No demos recorded yet</div>
+                <div className="text-[10px] mt-1">
+                  Run <code className="text-accent">/demo</code> to create one
+                </div>
+              </div>
+            ) : (
+              "Select a demo"
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DemoDetail({ demo }: { demo: Artifact }) {
+  const detailRef = useRef<HTMLDivElement>(null);
+  const video = isVideo(demo);
+  const metadata = parseMetadata(demo.metadata);
+
+  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" },
+    );
+  }, [demo.id]);
+
+  return (
+    <div ref={detailRef} className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-2">
+          <span
+            className={cn(
+              "text-[10px] font-bold px-1.5 py-0.5 rounded",
+              demo.artifact_type === "demo"
+                ? "bg-accent/15 text-accent"
+                : "bg-info/15 text-info",
+            )}
+          >
+            {demo.artifact_type === "demo" ? "DEMO" : "RECORDING"}
+          </span>
+          <h2 className="text-lg font-bold text-text font-mono truncate">
+            {demo.description || `Recording #${demo.id}`}
+          </h2>
+        </div>
+
+        {/* Meta row */}
+        <div className="flex items-center gap-4 text-xs text-text-muted mt-2">
+          <span className="flex items-center gap-1">
+            <Calendar size={10} />
+            {timeAgo(demo.timestamp)}
+          </span>
+          {demo.file_size && (
+            <span className="flex items-center gap-1">
+              <HardDrive size={10} />
+              {formatSize(demo.file_size)}
+            </span>
+          )}
+          {demo.mime_type && (
+            <span className="text-text-dim">{demo.mime_type}</span>
+          )}
+          {Boolean(metadata?.duration) && (
+            <span className="flex items-center gap-1">
+              <Clock size={10} />
+              {String(metadata!.duration)}
+            </span>
+          )}
+        </div>
+
+        {/* Session link */}
+        {demo.session_id && (
+          <div className="text-[10px] text-text-dim mt-1">
+            Session:{" "}
+            <span className="text-accent font-mono">
+              {demo.session_id.slice(0, 8)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Video player or download */}
+      {video ? (
+        <div className="mb-6">
+          <div className="rounded-lg overflow-hidden border border-border bg-black">
+            <video
+              key={demo.id}
+              controls
+              preload="metadata"
+              className="w-full max-h-[70vh]"
+              poster={undefined}
+            >
+              <source
+                src={artifactUrl(demo.id)}
+                type={demo.mime_type || "video/mp4"}
+              />
+              Your browser does not support video playback.
+            </video>
+          </div>
+          <div className="flex items-center gap-3 mt-3">
+            <a
+              href={artifactUrl(demo.id)}
+              download
+              className="text-[10px] text-accent hover:underline flex items-center gap-1"
+            >
+              <Play size={10} /> Download video
+            </a>
+          </div>
+        </div>
+      ) : (
+        <div className="mb-6 p-4 bg-bg-elevated rounded border border-border">
+          <div className="text-xs text-text-dim mb-2">
+            This artifact is not a video file. You can download it directly:
+          </div>
+          <a
+            href={artifactUrl(demo.id)}
+            download
+            className="text-xs text-accent hover:underline"
+          >
+            Download {demo.file_path?.split("/").pop() || "file"}
+          </a>
+        </div>
+      )}
+
+      {/* Metadata */}
+      {metadata && Object.keys(metadata).length > 0 && (
+        <div>
+          <h3 className="text-[10px] text-text-dim uppercase tracking-wider font-bold mb-2">
+            Metadata
+          </h3>
+          <div className="bg-bg-elevated rounded p-3 border border-border text-xs font-mono">
+            {Object.entries(metadata).map(([key, value]) => (
+              <div key={key} className="flex gap-2">
+                <span className="text-accent">{key}:</span>
+                <span className="text-text">{String(value)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function parseMetadata(raw: string | null): Record<string, unknown> | null {
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tanuki-telemetry",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Workflow monitor and telemetry dashboard for Claude Code autonomous agents",
   "type": "module",
   "bin": {