@a5c-ai/babysitter-observer-dashboard 5.0.1-staging.7a8768ec

package/src/components/details/log-viewer.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Copy, Check, Terminal, AlertTriangle, Info, ChevronDown } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { TaskDetail } from "@/types";
+
+const LINE_LIMIT = 100;
+
+/** Adds line numbers to a text block with optional line limit */
+function NumberedPre({ text, colorClass, limit }: { text: string; colorClass: string; limit?: number }) {
+  const allLines = text.split("\n");
+  const [showAll, setShowAll] = useState(false);
+  const isLong = limit != null && allLines.length > limit;
+  const lines = isLong && !showAll ? allLines.slice(0, limit) : allLines;
+
+  return (
+    <>
+      <pre className="rounded-b-md bg-background p-0 text-xs font-mono whitespace-pre-wrap overflow-x-auto">
+        {lines.map((line, i) => (
+          <div key={i} className="flex hover:bg-background-secondary/50 transition-colors">
+            <span className="select-none text-foreground-muted/40 text-right w-8 flex-shrink-0 pr-2 py-px border-r border-border/30">
+              {i + 1}
+            </span>
+            <span className={`${colorClass} pl-2 py-px flex-1 break-all`}>{line}</span>
+          </div>
+        ))}
+      </pre>
+      {isLong && !showAll && (
+        <button
+          onClick={() => setShowAll(true)}
+          className="w-full flex items-center justify-center gap-1.5 py-1.5 text-xs leading-tight text-foreground-muted hover:text-primary bg-background-secondary/30 hover:bg-background-secondary hover:shadow-neon-glow-primary-xs transition-all border-t border-border/30"
+        >
+          <ChevronDown className="h-3 w-3" />
+          Show all {allLines.length} lines
+        </button>
+      )}
+    </>
+  );
+}
+
+/** Copy button for log sections */
+function LogCopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [text]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="inline-flex items-center gap-1 text-xs leading-tight text-foreground-muted hover:text-primary hover:shadow-glow-primary transition-all px-1.5 py-0.5 rounded hover:bg-primary-muted"
+      title="Copy all"
+    >
+      {copied ? <Check className="h-3 w-3 text-success" /> : <Copy className="h-3 w-3" />}
+      {copied ? "Copied" : "Copy"}
+    </button>
+  );
+}
+
+/** Section header bar for each log type */
+function LogSectionHeader({ label, colorClass, icon, text }: { label: string; colorClass: string; icon: React.ReactNode; text: string }) {
+  return (
+    <div className="flex items-center justify-between rounded-t-md bg-background-secondary/60 border-b border-border/50 px-3 py-1.5">
+      <div className="flex items-center gap-1.5">
+        {icon}
+        <span className={`text-xs font-medium tracking-wider ${colorClass}`}>{label}</span>
+      </div>
+      <LogCopyButton text={text} />
+    </div>
+  );
+}
+
+export function LogViewer({ task }: { task: TaskDetail | null }) {
+  if (!task) return <div className="p-4 text-sm text-foreground-muted">Select a task to view logs</div>;
+
+  const hasProcessLogs = task.stdout || task.stderr;
+
+  // For agent/skill tasks without process logs, show the result summary as output
+  const agentOutput = !hasProcessLogs && task.result
+    ? JSON.stringify(task.result.result ?? task.result.value ?? task.result, null, 2)
+    : undefined;
+
+  const hasAnyOutput = hasProcessLogs || agentOutput;
+
+  if (!hasAnyOutput) {
+    const hint = (task.kind === "agent" || task.kind === "skill")
+      ? "Agent tasks don't produce stdout/stderr. Results will appear here once the task completes."
+      : "No logs captured for this task.";
+    return <div className="p-4 text-sm text-foreground-muted">{hint}</div>;
+  }
+
+  return (
+    <div className="space-y-4 p-4">
+      {task.stdout && (
+        <div className="rounded-md border border-border/50 overflow-hidden">
+          <LogSectionHeader
+            label="stdout"
+            colorClass="text-success"
+            icon={<Terminal className="h-3 w-3 text-success" />}
+            text={task.stdout}
+          />
+          <ScrollArea className="max-h-[60vh]">
+            <NumberedPre text={task.stdout} colorClass="text-success" limit={LINE_LIMIT} />
+          </ScrollArea>
+        </div>
+      )}
+      {task.stderr && (
+        <div className="rounded-md border border-error/20 overflow-hidden">
+          <LogSectionHeader
+            label="stderr"
+            colorClass="text-error"
+            icon={<AlertTriangle className="h-3 w-3 text-error" />}
+            text={task.stderr}
+          />
+          <ScrollArea className="max-h-[60vh]">
+            <NumberedPre text={task.stderr} colorClass="text-error" limit={LINE_LIMIT} />
+          </ScrollArea>
+        </div>
+      )}
+      {agentOutput && (
+        <div className="rounded-md border border-secondary/20 overflow-hidden">
+          <LogSectionHeader
+            label="output"
+            colorClass="text-secondary"
+            icon={<Info className="h-3 w-3 text-secondary" />}
+            text={agentOutput}
+          />
+          <ScrollArea className="max-h-[60vh]">
+            <NumberedPre text={agentOutput} colorClass="text-secondary" limit={LINE_LIMIT} />
+          </ScrollArea>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/details/task-detail.tsx

@@ -0,0 +1,114 @@
+"use client";
+import dynamic from "next/dynamic";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { useTaskDetail } from "@/hooks/use-run-detail";
+import { Loader2, Hand } from "lucide-react";
+import { Kbd } from "@/components/shared/kbd";
+
+/* -------------------------------------------------------------------------- */
+/*  Loading skeletons for lazy-loaded tab panels                              */
+/* -------------------------------------------------------------------------- */
+
+function PanelSkeleton() {
+  return (
+    <div className="p-4 space-y-3 animate-pulse">
+      <div className="h-4 w-48 rounded bg-foreground-muted/10" />
+      <div className="h-3 w-full rounded bg-foreground-muted/10" />
+      <div className="h-3 w-3/4 rounded bg-foreground-muted/10" />
+      <div className="h-3 w-1/2 rounded bg-foreground-muted/10" />
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Lazy-loaded heavy components (code-split per tab)                         */
+/* -------------------------------------------------------------------------- */
+
+const AgentPanel = dynamic(
+  () => import("./agent-panel").then((mod) => ({ default: mod.AgentPanel })),
+  { ssr: false, loading: PanelSkeleton }
+);
+
+const TimingPanel = dynamic(
+  () => import("./timing-panel").then((mod) => ({ default: mod.TimingPanel })),
+  { ssr: false, loading: PanelSkeleton }
+);
+
+const LogViewer = dynamic(
+  () => import("./log-viewer").then((mod) => ({ default: mod.LogViewer })),
+  { ssr: false, loading: PanelSkeleton }
+);
+
+const JsonTree = dynamic(
+  () => import("./json-tree").then((mod) => ({ default: mod.JsonTree })),
+  { ssr: false, loading: PanelSkeleton }
+);
+
+const BreakpointPanel = dynamic(
+  () => import("@/components/breakpoint/breakpoint-panel").then((mod) => ({ default: mod.BreakpointPanel })),
+  { ssr: false, loading: PanelSkeleton }
+);
+
+interface TaskDetailPanelProps {
+  runId: string;
+  effectId: string | null;
+  activeTab?: string;
+  onTabChange?: (tab: string) => void;
+  runDuration?: number;
+  allTasks?: import("@/types").TaskEffect[];
+}
+
+export function TaskDetailPanel({ runId, effectId, activeTab, onTabChange, runDuration, allTasks }: TaskDetailPanelProps) {
+  const { task, loading } = useTaskDetail(runId, effectId);
+
+  if (!effectId) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-foreground-muted">
+        Click a task to view details
+      </div>
+    );
+  }
+
+  if (loading && !task) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="h-5 w-5 animate-spin text-foreground-muted" />
+      </div>
+    );
+  }
+
+  const isBreakpoint = task?.kind === "breakpoint";
+  const defaultTab = isBreakpoint ? "breakpoint" : "agent";
+
+  return (
+    <Tabs data-testid="task-detail-tabs" value={activeTab} onValueChange={onTabChange} defaultValue={defaultTab} className="h-full flex flex-col">
+      <TabsList className="shrink-0 mx-4 mt-3">
+        {isBreakpoint && (
+          <TabsTrigger value="breakpoint" className="gap-1.5">
+            <Hand className="h-3 w-3" />
+            Approval
+            <Kbd className="ml-0.5 opacity-50">5</Kbd>
+          </TabsTrigger>
+        )}
+        <TabsTrigger value="agent" className="gap-1.5">Agent <Kbd className="ml-0.5 opacity-50">1</Kbd></TabsTrigger>
+        <TabsTrigger value="timing" className="gap-1.5">Timing <Kbd className="ml-0.5 opacity-50">2</Kbd></TabsTrigger>
+        <TabsTrigger value="logs" className="gap-1.5">Logs <Kbd className="ml-0.5 opacity-50">3</Kbd></TabsTrigger>
+        <TabsTrigger value="data" className="gap-1.5">Data <Kbd className="ml-0.5 opacity-50">4</Kbd></TabsTrigger>
+      </TabsList>
+      <div className="flex-1 overflow-y-auto">
+        {isBreakpoint && task && (
+          <TabsContent value="breakpoint">
+            <BreakpointPanel
+              task={task}
+              runId={runId}
+            />
+          </TabsContent>
+        )}
+        <TabsContent value="agent"><AgentPanel task={task} /></TabsContent>
+        <TabsContent value="timing"><TimingPanel task={task} runDuration={runDuration} allTasks={allTasks} /></TabsContent>
+        <TabsContent value="logs"><LogViewer task={task} /></TabsContent>
+        <TabsContent value="data"><JsonTree task={task} /></TabsContent>
+      </div>
+    </Tabs>
+  );
+}

package/src/components/details/timing-panel.tsx

@@ -0,0 +1,247 @@
+import { formatDuration, formatTimestamp } from "@/lib/utils";
+import type { TaskDetail, TaskEffect } from "@/types";
+
+// Step colors for the timeline bar — neon gradient cycle
+const STEP_COLORS = [
+  "bg-primary",       // magenta
+  "bg-secondary",     // neon cyan
+  "bg-success",       // neon green
+  "bg-warning",       // sun yellow
+  "bg-error",         // hot red
+  "bg-primary/60",    // magenta light
+  "bg-secondary/60",  // cyan light
+  "bg-success/60",    // green light
+];
+
+function getStepColor(index: number): string {
+  return STEP_COLORS[index % STEP_COLORS.length];
+}
+
+function getTimestampMs(value: string | undefined): number | null {
+  if (!value) return null;
+  const ms = new Date(value).getTime();
+  return Number.isFinite(ms) ? ms : null;
+}
+
+/**
+ * Compute effective execution duration for a task.
+ * Prefer the parsed task duration, then explicit execution timestamps, and only
+ * fall back to requested/resolved when no execution window is available.
+ */
+function getEffectiveDuration(t: TaskEffect): number {
+  if (t.duration && t.duration > 0) return t.duration;
+
+  const execStart = getTimestampMs(t.startedAt);
+  const execEnd = getTimestampMs(t.finishedAt);
+  if (execStart != null && execEnd != null) {
+    return Math.max(execEnd - execStart, 0);
+  }
+
+  const requestedAt = getTimestampMs(t.requestedAt);
+  const resolvedAt = getTimestampMs(t.resolvedAt);
+  if (requestedAt != null && resolvedAt != null) {
+    return Math.max(resolvedAt - requestedAt, 0);
+  }
+
+  return 0;
+}
+
+/**
+ * Compute the overall run duration from the earliest requestedAt
+ * to the latest resolvedAt across all tasks.
+ * Falls back to Date.now() for any task still in "requested" state.
+ */
+function computeTimelineDuration(tasks: TaskEffect[]): number {
+  if (tasks.length === 0) return 0;
+  let earliest = Infinity;
+  let latest = -Infinity;
+  for (const t of tasks) {
+    const reqTime = new Date(t.requestedAt).getTime();
+    if (reqTime < earliest) earliest = reqTime;
+    const endTime = t.resolvedAt
+      ? new Date(t.resolvedAt).getTime()
+      : (t.status === "requested" ? Date.now() : reqTime);
+    if (endTime > latest) latest = endTime;
+  }
+  return Math.max(latest - earliest, 0);
+}
+
+interface TimingPanelProps {
+  task: TaskDetail | null;
+  runDuration?: number;
+  /** All tasks in the run — needed for the cascading timeline */
+  allTasks?: TaskEffect[];
+}
+
+export function TimingPanel({ task, runDuration, allTasks }: TimingPanelProps) {
+  if (!task) return <div className="p-4 text-sm text-foreground-muted">Select a task to view timing</div>;
+
+  const effectiveDuration = getEffectiveDuration(task as TaskEffect);
+
+  const rows = [
+    { label: "Requested", value: formatTimestamp(task.requestedAt) },
+    { label: "Resolved", value: formatTimestamp(task.resolvedAt) },
+    { label: "Duration", value: formatDuration(effectiveDuration) },
+  ];
+
+  // Show startedAt/finishedAt only if they differ from requestedAt/resolvedAt
+  const hasExecTiming = task.startedAt && task.finishedAt &&
+    (task.startedAt !== task.requestedAt || task.finishedAt !== task.resolvedAt);
+
+  if (hasExecTiming) {
+    rows.push(
+      { label: "Exec Started", value: formatTimestamp(task.startedAt) },
+      { label: "Exec Finished", value: formatTimestamp(task.finishedAt) },
+    );
+  }
+
+  // Build cascading timeline segments from all tasks
+  const sortedTasks = allTasks
+    ? [...allTasks].sort((a, b) => new Date(a.requestedAt).getTime() - new Date(b.requestedAt).getTime())
+    : [];
+
+  // Compute timeline duration from earliest requestedAt to latest resolvedAt
+  // instead of relying solely on the passed-in runDuration prop
+  const timelineDuration = sortedTasks.length > 0
+    ? computeTimelineDuration(sortedTasks)
+    : (runDuration || 0);
+  const effectiveRunDuration = timelineDuration > 0 ? timelineDuration : (runDuration || 0);
+
+  // Compute the earliest requestedAt timestamp for offset calculations
+  const earliestTime = sortedTasks.length > 0
+    ? new Date(sortedTasks[0].requestedAt).getTime()
+    : 0;
+
+  // Calculate each task's position and width relative to total timeline
+  const segments = sortedTasks.map((t, i) => {
+    const dur = getEffectiveDuration(t);
+    if (!effectiveRunDuration || effectiveRunDuration <= 0) {
+      return { taskId: t.effectId, start: 0, width: 0, color: getStepColor(i), title: t.title, duration: dur };
+    }
+    // Position based on wall-clock offset from earliest task
+    const taskStart = new Date(t.requestedAt).getTime();
+    const startPct = Math.min(((taskStart - earliestTime) / effectiveRunDuration) * 100, 100);
+    const widthPct = Math.min((dur / effectiveRunDuration) * 100, 100 - startPct);
+    return {
+      taskId: t.effectId,
+      start: startPct,
+      width: widthPct,
+      color: getStepColor(i),
+      title: t.title,
+      duration: dur,
+    };
+  });
+
+  // Compute idle gap segments between consecutive tasks
+  const idleSegments: { start: number; width: number; duration: number }[] = [];
+  if (segments.length > 1) {
+    for (let i = 0; i < segments.length - 1; i++) {
+      const currentEnd = segments[i].start + segments[i].width;
+      const nextStart = segments[i + 1].start;
+      const gapWidth = nextStart - currentEnd;
+      if (gapWidth > 0.5) { // Only show gaps > 0.5% of timeline
+        const gapDuration = (gapWidth / 100) * effectiveRunDuration;
+        idleSegments.push({ start: currentEnd, width: gapWidth, duration: gapDuration });
+      }
+    }
+  }
+  const totalIdleDuration = idleSegments.reduce((sum, g) => sum + g.duration, 0);
+
+  // Current task's segment
+  const currentIdx = sortedTasks.findIndex((t) => t.effectId === task.effectId);
+  const currentSegment = currentIdx >= 0 ? segments[currentIdx] : null;
+
+  return (
+    <div className="p-4">
+      <div className="space-y-3">
+        {rows.map(({ label, value }) => (
+          <div key={label} className="flex items-center gap-3">
+            <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-primary" />
+            <div className="flex items-center justify-between flex-1 min-w-0">
+              <span className="text-xs text-foreground-muted">{label}</span>
+              <span className="font-mono text-sm text-foreground">{value}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Cascading timeline bar showing all steps */}
+      {effectiveRunDuration > 0 && segments.length > 0 && (
+        <div className="mt-4 pt-4 border-t border-border">
+          <div className="flex items-center justify-between text-xs mb-2">
+            <span className="text-foreground-muted">Run Timeline</span>
+            <span className="font-mono text-foreground">{formatDuration(effectiveRunDuration)}</span>
+          </div>
+
+          {/* Full timeline bar with neon gradient fill */}
+          <div className="w-full h-4 bg-muted/30 rounded-full overflow-hidden relative">
+            {segments.map((seg) => (
+              <div
+                key={seg.taskId}
+                className={`absolute top-0 h-full ${seg.color} transition-all duration-300 ${
+                  seg.taskId === task.effectId ? "opacity-100 ring-1 ring-primary/50 z-10" : "opacity-60"
+                }`}
+                style={{
+                  left: `${seg.start}%`,
+                  width: `${Math.max(seg.width, 0.5)}%`,
+                }}
+                title={`${seg.title}: ${formatDuration(seg.duration)} (${seg.width.toFixed(1)}%)`}
+              />
+            ))}
+            {idleSegments.map((gap, i) => (
+              <div
+                key={`idle-${i}`}
+                className="absolute top-0 h-full bg-idle-stripes opacity-40"
+                style={{
+                  left: `${gap.start}%`,
+                  width: `${Math.max(gap.width, 0.5)}%`,
+                }}
+                title={`Idle: ${formatDuration(gap.duration)} (${gap.width.toFixed(1)}%)`}
+              />
+            ))}
+          </div>
+
+          {/* Current step info — neon percentage label when significant */}
+          {currentSegment && (
+            <div className="mt-2 flex items-center justify-between text-xs">
+              <div className="flex items-center gap-2">
+                <div className={`w-2.5 h-2.5 rounded-sm ${currentSegment.color}`} />
+                <span className="text-foreground-secondary">
+                  Step {currentIdx + 1}/{sortedTasks.length}
+                </span>
+              </div>
+              <span className={`font-mono ${currentSegment.width >= 25 ? "text-primary neon-text-subtle" : "text-foreground"}`}>
+                {currentSegment.width.toFixed(1)}% of total
+              </span>
+            </div>
+          )}
+
+          {/* Step legend (compact) */}
+          {segments.length > 1 && (
+            <div className="mt-3 space-y-1">
+              {segments.map((seg, i) => (
+                <div
+                  key={seg.taskId}
+                  className={`flex items-center gap-2 text-xs leading-tight ${
+                    seg.taskId === task.effectId ? "text-foreground" : "text-foreground-muted"
+                  }`}
+                >
+                  <div className={`w-2 h-2 rounded-sm shrink-0 ${seg.color}`} />
+                  <span className="truncate flex-1">{i + 1}. {seg.title}</span>
+                  <span className={`font-mono shrink-0 ${seg.width >= 25 ? "text-warning" : ""}`}>{formatDuration(seg.duration)}</span>
+                </div>
+              ))}
+              {totalIdleDuration > 0 && (
+                <div className="flex items-center gap-2 text-xs leading-tight text-foreground-muted">
+                  <div className="w-2 h-2 rounded-sm shrink-0 bg-idle-stripes border border-border" />
+                  <span className="truncate flex-1">Idle / Wait</span>
+                  <span className="font-mono shrink-0">{formatDuration(totalIdleDuration)}</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}