tanuki-telemetry 1.1.0

package/frontend/src/components/ArtifactsPanel.tsx

@@ -0,0 +1,429 @@
+import { useState, useCallback, useRef, useEffect, type ReactNode } from "react"
+import gsap from "gsap"
+import { FileText, Hash, ChevronRight, Presentation, Equal, Braces, ArrowRight, File } from "lucide-react"
+import type { Artifact } from "@/types"
+import { timeAgo } from "@/lib/utils"
+
+interface Props {
+  artifacts: Artifact[]
+}
+
+const TYPE_ICONS: Record<string, ReactNode> = {
+  template: <FileText size={10} />,
+  rubric: <Hash size={10} />,
+  report: <ChevronRight size={10} />,
+  pptx: <Presentation size={10} />,
+  summary: <Equal size={10} />,
+  config: <Braces size={10} />,
+  output: <ArrowRight size={10} />,
+}
+
+const LINE_LIMIT = 200
+
+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 isTextViewable(a: Artifact): boolean {
+  const mime = a.mime_type || ""
+  const ext = a.file_path?.split(".").pop()?.toLowerCase() || ""
+  return (
+    mime.startsWith("text/") ||
+    mime === "application/json" ||
+    ["md", "json", "txt", "csv", "log", "yaml", "yml", "toml", "xml", "html", "css", "js", "ts", "tsx", "jsx", "sh", "py", "rb", "sql"].includes(ext) ||
+    ["report", "summary"].includes(a.artifact_type)
+  )
+}
+
+function isImage(a: Artifact): boolean {
+  return a.mime_type?.startsWith("image/") || false
+}
+
+function getContentType(a: Artifact): "markdown" | "json" | "text" {
+  const mime = a.mime_type || ""
+  const ext = a.file_path?.split(".").pop()?.toLowerCase() || ""
+
+  if (mime === "application/json" || ext === "json") return "json"
+  if (mime === "text/markdown" || ext === "md" || ["report", "summary"].includes(a.artifact_type)) return "markdown"
+  return "text"
+}
+
+// Minimal markdown to HTML — handles the common cases
+function renderMarkdown(md: string): string {
+  let html = md
+    // Escape HTML
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+  // Code blocks (fenced)
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, lang, code) =>
+    `<pre class="artifact-code-block" data-lang="${lang}"><code>${code}</code></pre>`
+  )
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code class="artifact-inline-code">$1</code>')
+  // Headers
+  html = html.replace(/^#### (.+)$/gm, '<h4 class="artifact-h4">$1</h4>')
+  html = html.replace(/^### (.+)$/gm, '<h3 class="artifact-h3">$1</h3>')
+  html = html.replace(/^## (.+)$/gm, '<h2 class="artifact-h2">$1</h2>')
+  html = html.replace(/^# (.+)$/gm, '<h1 class="artifact-h1">$1</h1>')
+  // Bold & italic
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>")
+  // Unordered lists
+  html = html.replace(/^- (.+)$/gm, '<li class="artifact-li">$1</li>')
+  // Horizontal rules
+  html = html.replace(/^---$/gm, '<hr class="artifact-hr" />')
+  // Links
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="artifact-link">$1</a>')
+  // Paragraphs (double newlines)
+  html = html.replace(/\n\n/g, "</p><p>")
+  // Single newlines to <br> (but not inside <pre>)
+  html = html.replace(/(?<!<\/pre>)\n(?!<)/g, "<br>")
+  return `<p>${html}</p>`
+}
+
+// Collapsible JSON viewer
+function JsonViewer({ data, depth = 0 }: { data: unknown; depth?: number }) {
+  const [collapsed, setCollapsed] = useState(depth > 2)
+
+  if (data === null) return <span className="text-text-dim">null</span>
+  if (typeof data === "boolean") return <span className="text-warning">{String(data)}</span>
+  if (typeof data === "number") return <span className="text-info">{data}</span>
+  if (typeof data === "string") return <span className="text-success">"{data}"</span>
+
+  if (Array.isArray(data)) {
+    if (data.length === 0) return <span className="text-text-dim">[]</span>
+    return (
+      <span>
+        <button
+          onClick={(e) => { e.stopPropagation(); setCollapsed(!collapsed) }}
+          className="text-text-dim hover:text-text cursor-pointer"
+        >
+          {collapsed ? "▶" : "▼"} [{data.length}]
+        </button>
+        {!collapsed && (
+          <div style={{ paddingLeft: 16 }}>
+            {data.map((item, i) => (
+              <div key={i}>
+                <JsonViewer data={item} depth={depth + 1} />
+                {i < data.length - 1 && <span className="text-text-dim">,</span>}
+              </div>
+            ))}
+          </div>
+        )}
+      </span>
+    )
+  }
+
+  if (typeof data === "object") {
+    const entries = Object.entries(data as Record<string, unknown>)
+    if (entries.length === 0) return <span className="text-text-dim">{"{}"}</span>
+    return (
+      <span>
+        <button
+          onClick={(e) => { e.stopPropagation(); setCollapsed(!collapsed) }}
+          className="text-text-dim hover:text-text cursor-pointer"
+        >
+          {collapsed ? "▶" : "▼"} {"{"}
+          {collapsed && <span className="text-text-dim">…{entries.length} keys{"}"}</span>}
+        </button>
+        {!collapsed && (
+          <div style={{ paddingLeft: 16 }}>
+            {entries.map(([key, val], i) => (
+              <div key={key}>
+                <span className="text-accent">"{key}"</span>
+                <span className="text-text-dim">: </span>
+                <JsonViewer data={val} depth={depth + 1} />
+                {i < entries.length - 1 && <span className="text-text-dim">,</span>}
+              </div>
+            ))}
+          </div>
+        )}
+        {!collapsed && <span>{"}"}</span>}
+      </span>
+    )
+  }
+
+  return <span>{String(data)}</span>
+}
+
+// Text content with line limiting
+function TextContent({ text, type }: { text: string; type: "markdown" | "json" | "text" }) {
+  const [showAll, setShowAll] = useState(false)
+  const lines = text.split("\n")
+  const truncated = lines.length > LINE_LIMIT && !showAll
+  const displayText = truncated ? lines.slice(0, LINE_LIMIT).join("\n") : text
+
+  if (type === "json") {
+    try {
+      const parsed = JSON.parse(text)
+      return (
+        <div className="text-xs font-mono p-3 bg-bg rounded overflow-x-auto max-h-[500px] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+          <JsonViewer data={parsed} />
+        </div>
+      )
+    } catch {
+      // Fall through to plain text if JSON is invalid
+    }
+  }
+
+  if (type === "markdown") {
+    return (
+      <div onClick={(e) => e.stopPropagation()}>
+        <div
+          className="artifact-markdown text-xs p-3 bg-bg rounded overflow-x-auto max-h-[500px] overflow-y-auto"
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(displayText) }}
+        />
+        {truncated && (
+          <button
+            onClick={() => setShowAll(true)}
+            className="text-[10px] text-accent hover:underline mt-1 px-3 cursor-pointer"
+          >
+            Show all {lines.length} lines…
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  // Plain text
+  return (
+    <div onClick={(e) => e.stopPropagation()}>
+      <pre className="text-xs font-mono p-3 bg-bg rounded overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words text-text">
+        {displayText}
+      </pre>
+      {truncated && (
+        <button
+          onClick={() => setShowAll(true)}
+          className="text-[10px] text-accent hover:underline mt-1 px-3 cursor-pointer"
+        >
+          Show all {lines.length} lines…
+        </button>
+      )}
+    </div>
+  )
+}
+
+// Image lightbox modal
+function ImageLightbox({ src, alt, onClose }: { src: string; alt: string; onClose: () => void }) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose()
+    }
+    document.addEventListener("keydown", handleKey)
+    return () => document.removeEventListener("keydown", handleKey)
+  }, [onClose])
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-8 cursor-pointer"
+      onClick={(e) => { if (e.target === overlayRef.current) onClose() }}
+    >
+      <div className="relative max-w-[90vw] max-h-[90vh]">
+        <button
+          onClick={onClose}
+          className="absolute -top-8 right-0 text-white/70 hover:text-white text-sm cursor-pointer"
+        >
+          ESC to close
+        </button>
+        <img src={src} alt={alt} className="max-w-full max-h-[85vh] object-contain rounded" />
+      </div>
+    </div>
+  )
+}
+
+// Individual artifact row with expand/collapse
+function ArtifactRow({ artifact }: { artifact: Artifact }) {
+  const [expanded, setExpanded] = useState(false)
+  const [content, setContent] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [lightbox, setLightbox] = useState(false)
+
+  const viewable = isTextViewable(artifact)
+  const image = isImage(artifact)
+  const contentType = viewable ? getContentType(artifact) : null
+
+  const handleToggle = useCallback(() => {
+    if (image) {
+      setLightbox(true)
+      return
+    }
+    if (!viewable) return
+
+    const next = !expanded
+    setExpanded(next)
+
+    if (next && content === null && !loading) {
+      setLoading(true)
+      setError(null)
+      fetch(artifactUrl(artifact.id))
+        .then((res) => {
+          if (!res.ok) throw new Error(`HTTP ${res.status}`)
+          return res.text()
+        })
+        .then((text) => {
+          setContent(text)
+          setLoading(false)
+        })
+        .catch((err) => {
+          setError(err.message)
+          setLoading(false)
+        })
+    }
+  }, [expanded, content, loading, artifact.id, viewable, image])
+
+  const clickable = viewable || image
+
+  return (
+    <>
+      <div
+        data-artifact
+        className={`text-xs py-1.5 px-2 bg-bg transition-colors group ${clickable ? "hover:bg-bg-elevated cursor-pointer" : ""} ${expanded ? "bg-bg-elevated" : ""}`}
+        onClick={handleToggle}
+      >
+        <div className="flex items-center gap-3">
+          {/* Expand indicator for viewable content */}
+          {viewable && (
+            <span className="text-text-dim text-[10px] w-3 flex-shrink-0">
+              {expanded ? "▼" : "▶"}
+            </span>
+          )}
+
+          {/* Inline thumbnail for images */}
+          {image && (
+            <img
+              src={artifactUrl(artifact.id)}
+              alt={artifact.description}
+              className="w-8 h-8 object-cover rounded border border-border flex-shrink-0"
+              loading="lazy"
+            />
+          )}
+
+          <div className="flex-1 min-w-0">
+            <div className="text-text truncate">{artifact.description}</div>
+            <div className="text-[10px] text-text-dim">
+              {formatSize(artifact.file_size)}
+              {artifact.mime_type && <span className="ml-2">{artifact.mime_type}</span>}
+              <span className="ml-2">{timeAgo(artifact.timestamp)}</span>
+              {image && <span className="ml-2 text-info">click to enlarge</span>}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            {artifact.mime_type === "application/pdf" && (
+              <a
+                href={artifactUrl(artifact.id)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[10px] text-info hover:underline px-1"
+                onClick={(e) => e.stopPropagation()}
+              >
+                open
+              </a>
+            )}
+            <a
+              href={artifactUrl(artifact.id)}
+              download
+              className="text-[10px] text-accent hover:underline px-1"
+              onClick={(e) => e.stopPropagation()}
+            >
+              download
+            </a>
+          </div>
+        </div>
+
+        {/* Expanded inline preview */}
+        {expanded && viewable && (
+          <div data-expand className="mt-2 border-t border-border pt-2">
+            {loading && <div className="text-[10px] text-text-dim py-2">Loading…</div>}
+            {error && <div className="text-[10px] text-danger py-2">Error: {error}</div>}
+            {content !== null && contentType && <TextContent text={content} type={contentType} />}
+          </div>
+        )}
+      </div>
+
+      {/* Image lightbox */}
+      {lightbox && (
+        <ImageLightbox
+          src={artifactUrl(artifact.id)}
+          alt={artifact.description}
+          onClose={() => setLightbox(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export function ArtifactsPanel({ artifacts }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const animatedRef = useRef(false)
+
+  useEffect(() => {
+    if (!ref.current || animatedRef.current || artifacts.length === 0) return
+    animatedRef.current = true
+    const items = ref.current.querySelectorAll("[data-artifact]")
+    gsap.fromTo(items, { opacity: 0, x: -6 }, { opacity: 1, x: 0, duration: 0.2, stagger: 0.03, ease: "power2.out" })
+  }, [artifacts.length > 0])
+
+  // Group by artifact_type
+  const grouped = new Map<string, Artifact[]>()
+  for (const a of artifacts) {
+    const group = grouped.get(a.artifact_type) || []
+    group.push(a)
+    grouped.set(a.artifact_type, group)
+  }
+
+  return (
+    <div ref={ref} className="space-y-3 mt-2">
+      <style>{`
+        .artifact-markdown p { margin: 0.25em 0; }
+        .artifact-markdown h1 { font-size: 1.25em; font-weight: 700; margin: 0.5em 0 0.25em; }
+        .artifact-markdown h2 { font-size: 1.1em; font-weight: 700; margin: 0.5em 0 0.25em; }
+        .artifact-markdown h3 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em; }
+        .artifact-markdown h4 { font-size: 0.95em; font-weight: 600; margin: 0.3em 0 0.15em; }
+        .artifact-markdown strong { font-weight: 700; }
+        .artifact-markdown em { font-style: italic; }
+        .artifact-markdown .artifact-code-block {
+          background: var(--color-bg-elevated, #1a1a2e);
+          padding: 0.5em;
+          border-radius: 4px;
+          overflow-x: auto;
+          font-size: 0.9em;
+          margin: 0.5em 0;
+        }
+        .artifact-markdown .artifact-inline-code {
+          background: var(--color-bg-elevated, #1a1a2e);
+          padding: 0.1em 0.3em;
+          border-radius: 3px;
+          font-size: 0.9em;
+        }
+        .artifact-markdown .artifact-li { margin-left: 1em; list-style: disc inside; }
+        .artifact-markdown .artifact-hr { border-color: var(--color-border, #333); margin: 0.5em 0; }
+        .artifact-markdown .artifact-link { color: var(--color-accent, #6af); text-decoration: underline; }
+      `}</style>
+      {Array.from(grouped.entries()).map(([type, items]) => (
+        <div key={type}>
+          <div className="text-[9px] text-text-dim uppercase tracking-wider mb-1 font-bold">
+            {TYPE_ICONS[type] || <File size={10} />} {type} ({items.length})
+          </div>
+          <div className="space-y-1">
+            {items.map((a) => (
+              <ArtifactRow key={a.id} artifact={a} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/frontend/src/components/ChildStreams.tsx

@@ -0,0 +1,176 @@
+import { useRef, useEffect, useState } from "react"
+import gsap from "gsap"
+import { ChevronDown, ChevronRight } from "lucide-react"
+import type { Session } from "@/types"
+import { formatDuration, formatTokens, cn } from "@/lib/utils"
+
+interface Props {
+  children: Session[]
+  onSelectSession: (id: string) => void
+}
+
+export function ChildStreams({ children, onSelectSession }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [expanded, setExpanded] = useState(true)
+
+  useEffect(() => {
+    if (!ref.current || !expanded) return
+    gsap.fromTo(
+      ref.current.querySelectorAll(".child-card"),
+      { opacity: 0, y: 10 },
+      { opacity: 1, y: 0, duration: 0.4, stagger: 0.06, ease: "power2.out" }
+    )
+  }, [children, expanded])
+
+  const completed = children.filter((c) => c.status === "completed").length
+  const failed = children.filter((c) => c.status === "failed").length
+  const inProgress = children.filter((c) => c.status === "in_progress").length
+  const totalTokens = children.reduce(
+    (sum, c) => sum + (c.total_input_tokens || 0) + (c.total_output_tokens || 0),
+    0
+  )
+
+  return (
+    <div>
+      {/* Aggregated stats bar */}
+      <div className="flex items-center gap-4 mb-3 text-[10px]">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-accent hover:text-text transition-colors"
+        >
+          {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+        </button>
+        <span className="text-text-muted">
+          {children.length} stream{children.length !== 1 ? "s" : ""}
+        </span>
+        {inProgress > 0 && (
+          <span className="text-warning font-bold">{inProgress} LIVE</span>
+        )}
+        {completed > 0 && (
+          <span className="text-accent">{completed} done</span>
+        )}
+        {failed > 0 && (
+          <span className="text-error">{failed} failed</span>
+        )}
+        <span className="text-text-dim">
+          {formatTokens(totalTokens)} total tokens
+        </span>
+      </div>
+
+      {/* Child cards */}
+      {expanded && (
+        <div ref={ref} data-expand className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+          {children.map((child) => (
+            <ChildCard
+              key={child.id}
+              session={child}
+              onClick={() => onSelectSession(child.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ChildCard({
+  session,
+  onClick,
+}: {
+  session: Session
+  onClick: () => void
+}) {
+  const totalTokens =
+    (session.total_input_tokens || 0) + (session.total_output_tokens || 0)
+
+  const statusStyles: Record<string, string> = {
+    completed: "border-accent/40 hover:border-accent",
+    failed: "border-error/40 hover:border-error",
+    in_progress: "border-warning/40 hover:border-warning",
+    interrupted: "border-text-dim/40 hover:border-text-dim",
+  }
+
+  const statusBadgeStyles: Record<string, string> = {
+    completed: "text-accent",
+    failed: "text-error",
+    in_progress: "text-warning",
+    interrupted: "text-text-dim",
+  }
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "child-card border rounded-md p-3 bg-bg cursor-pointer transition-all duration-200 hover:bg-bg-hover group",
+        statusStyles[session.status] || "border-border"
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs font-bold text-text truncate mr-2">
+          {session.worktree_name}
+        </span>
+        <span
+          className={cn(
+            "text-[9px] font-bold uppercase tracking-wider flex-shrink-0",
+            statusBadgeStyles[session.status] || "text-text-dim"
+          )}
+        >
+          {session.status === "in_progress" ? "LIVE" : session.status}
+        </span>
+      </div>
+
+      {/* Progress bar */}
+      <IterationBar
+        current={session.total_iterations}
+        max={session.max_iterations}
+        status={session.status}
+      />
+
+      {/* Stats row */}
+      <div className="flex gap-3 mt-2 text-[10px] text-text-dim">
+        <span>{formatDuration(session.duration_seconds)}</span>
+        <span>{formatTokens(totalTokens)} tok</span>
+        <span>
+          {session.total_iterations}/{session.max_iterations} iter
+        </span>
+      </div>
+
+      {/* Click hint */}
+      <div className="text-[9px] text-text-dim mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+        click to view details &rarr;
+      </div>
+    </div>
+  )
+}
+
+function IterationBar({
+  current,
+  max,
+  status,
+}: {
+  current: number
+  max: number
+  status: string
+}) {
+  const pct = max > 0 ? Math.min(100, Math.round((current / max) * 100)) : 0
+
+  const barColor: Record<string, string> = {
+    completed: "bg-accent",
+    failed: "bg-error",
+    in_progress: "bg-warning",
+    interrupted: "bg-text-dim",
+  }
+
+  return (
+    <div className="w-full h-1 bg-border rounded-full overflow-hidden">
+      <div
+        className={cn(
+          "h-full rounded-full transition-all duration-500",
+          barColor[status] || "bg-text-dim"
+        )}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  )
+}