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

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

@@ -0,0 +1,234 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { StatusBadge } from "@/components/shared/status-badge";
+import { KindBadge } from "@/components/shared/kind-badge";
+import { TruncatedId } from "@/components/shared/truncated-id";
+import type { TaskDetail } from "@/types";
+
+/** Tiny copy-to-clipboard button (icon only) — magenta hover */
+function CopyButton({ 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 justify-center h-6 w-6 rounded text-foreground-muted hover:text-primary hover:bg-primary-muted transition-colors"
+      title="Copy to clipboard"
+    >
+      {copied ? <Check className="h-3 w-3 text-success" /> : <Copy className="h-3 w-3" />}
+    </button>
+  );
+}
+
+/** Consistent section header with magenta left border accent */
+function SectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <h4 className="text-xs font-medium text-foreground-muted tracking-wider mb-1.5 pl-2 border-l-2 border-primary">
+      {children}
+    </h4>
+  );
+}
+
+function renderDescription(prompt: Record<string, unknown> | undefined, description: string | null) {
+  if (prompt || !description) return null;
+  const text = description.length > 500 ? description.slice(0, 500) + "..." : description;
+  return (
+    <div>
+      <SectionHeader>Description</SectionHeader>
+      <p className="text-sm text-foreground-secondary whitespace-pre-wrap break-words leading-relaxed">{text}</p>
+    </div>
+  );
+}
+
+function ErrorSection({
+  resultError,
+  taskError,
+}: {
+  resultError: Record<string, unknown> | undefined | null;
+  taskError: TaskDetail["error"] | undefined;
+}) {
+  const [stackExpanded, setStackExpanded] = useState(false);
+
+  const errorName =
+    taskError?.name ?? (resultError?.name != null ? String(resultError.name) : "Error");
+  const errorMessage =
+    taskError?.message ?? (resultError?.message != null ? String(resultError.message) : "Unknown error");
+  const errorStack =
+    taskError?.stack ?? (resultError?.stack != null ? String(resultError.stack) : undefined);
+
+  return (
+    <div>
+      <SectionHeader>Error</SectionHeader>
+      <div className="rounded-md bg-error-muted border border-error/30 border-l-[3px] border-l-error p-3 shadow-glow-error">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-sm font-medium text-error">
+            {errorName}: {errorMessage}
+          </p>
+          <CopyButton text={`${errorName}: ${errorMessage}`} />
+        </div>
+        {errorStack && (
+          <div className="mt-2">
+            <button
+              type="button"
+              onClick={() => setStackExpanded((prev) => !prev)}
+              className="text-xs text-foreground-muted hover:text-foreground-secondary transition-colors flex items-center gap-1"
+            >
+              <span className="inline-block transition-transform" style={{ transform: stackExpanded ? "rotate(90deg)" : "rotate(0deg)" }}>
+                &#9654;
+              </span>
+              Stack Trace
+            </button>
+            {stackExpanded && (
+              <pre className="mt-2 rounded bg-background-secondary p-2 text-[11px] font-mono text-foreground-secondary overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap break-words">
+                {errorStack}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const OUTPUT_CHAR_LIMIT = 500;
+
+function ResultOutput({ value }: { value: unknown }) {
+  const [expanded, setExpanded] = useState(false);
+  const fullText = JSON.stringify(value, null, 2);
+  const isLong = fullText.length > OUTPUT_CHAR_LIMIT;
+  const displayText = isLong && !expanded ? fullText.slice(0, OUTPUT_CHAR_LIMIT) + "\n..." : fullText;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1.5">
+        <SectionHeader>Output</SectionHeader>
+        <CopyButton text={fullText} />
+      </div>
+      <pre className="rounded-md bg-background-secondary border border-border/50 p-3 text-xs font-mono text-secondary overflow-x-auto max-h-[60vh] overflow-y-auto">
+        {displayText}
+      </pre>
+      {isLong && (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="mt-1.5 flex items-center gap-1 text-xs leading-tight text-foreground-muted hover:text-primary transition-colors"
+        >
+          {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+          {expanded ? "Collapse" : `Expand (${fullText.length.toLocaleString()} chars)`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function AgentPanel({ task }: { task: TaskDetail | null }) {
+  if (!task) return <div className="p-4 text-sm text-foreground-muted">Select a task to view details</div>;
+
+  // Try to find agent prompt data from taskDef or inputs
+  const taskDef = task.taskDef || {};
+  const inputs = task.input || (taskDef.inputs as Record<string, unknown> | undefined) || {};
+  const metadata = taskDef.metadata as Record<string, unknown> | undefined;
+
+  // Extract displayable info
+  const title = task.title || task.label || task.effectId;
+  const description: string | null =
+    (inputs.prd as string) ||
+    (inputs.description as string) ||
+    (inputs.task as string) ||
+    (inputs.prompt as string) ||
+    (metadata?.label as string) ||
+    null;
+
+  // Check for agent prompt structure (if present)
+  const agentDef = taskDef.agent as Record<string, unknown> | undefined;
+  const prompt = agentDef?.prompt as Record<string, unknown> | undefined;
+
+  // Result summary
+  const resultData = task.result;
+  const resultStatus = resultData?.status as string | undefined;
+  const resultValue = resultData?.result || resultData?.value;
+  const resultError = resultData?.error as Record<string, unknown> | undefined;
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* Header with title, kind, status */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-semibold text-foreground">{String(title)}</h3>
+          <div className="flex items-center gap-2">
+            <KindBadge kind={task.kind} />
+            <StatusBadge status={task.status} />
+          </div>
+          {task.invocationKey && (
+            <TruncatedId id={task.invocationKey} chars={4} className="text-foreground-muted" />
+          )}
+        </div>
+
+        {/* Agent prompt data (if present) */}
+        {typeof prompt?.role === "string" && (
+          <div>
+            <SectionHeader>Role</SectionHeader>
+            <p className="text-sm text-foreground">{prompt.role}</p>
+          </div>
+        )}
+        {typeof prompt?.task === "string" && (
+          <div>
+            <SectionHeader>Task</SectionHeader>
+            <p className="text-sm text-foreground">{prompt.task}</p>
+          </div>
+        )}
+        {Array.isArray(prompt?.instructions) && (
+          <div>
+            <SectionHeader>Instructions</SectionHeader>
+            <ol className="space-y-2">
+              {(prompt.instructions as string[]).map((inst: string, i: number) => (
+                <li key={i} className="flex items-start gap-2.5 text-sm text-foreground-secondary">
+                  <span className="flex-shrink-0 flex items-center justify-center h-5 w-5 rounded-full bg-secondary-muted text-secondary text-xs leading-tight font-medium mt-px">
+                    {i + 1}
+                  </span>
+                  <span className="leading-relaxed">{inst}</span>
+                </li>
+              ))}
+            </ol>
+          </div>
+        )}
+
+        {/* Description / inputs summary (when no agent prompt) */}
+        {renderDescription(prompt, description)}
+
+        {/* Result status */}
+        {resultStatus != null && (
+          <div>
+            <SectionHeader>Result</SectionHeader>
+            <div className="flex items-center gap-2 mb-2">
+              <StatusBadge status={resultStatus === "ok" ? "resolved" : "error"} />
+            </div>
+          </div>
+        )}
+
+        {/* Error display with expandable stack trace */}
+        {(resultError != null || task.error != null) && (
+          <ErrorSection
+            resultError={resultError}
+            taskError={task.error}
+          />
+        )}
+
+        {/* Result value — monospace with brand accent */}
+        {resultValue != null && (
+          <ResultOutput value={resultValue} />
+        )}
+      </div>
+    </ScrollArea>
+  );
+}

package/src/components/details/json-tree/categorize.ts

@@ -0,0 +1,131 @@
+/** Type guard for plain objects */
+export function isRecord(v: unknown): v is Record<string, unknown> {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+
+/** Format a camelCase or snake_case key into a readable label */
+export function formatLabel(key: string): string {
+  return key
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/** Known array keys that represent "findings"-style lists of strings */
+export const FINDINGS_KEYS = new Set([
+  "findings",
+  "issues",
+  "recommendations",
+  "errors",
+  "warnings",
+  "notes",
+  "suggestions",
+  "problems",
+  "improvements",
+  "todos",
+  "comments",
+  "messages",
+]);
+
+export interface CategorizedData {
+  status: string | null;
+  score: number | null;
+  passesQuality: boolean | null;
+  booleans: Array<{ key: string; value: boolean }>;
+  findings: Array<{ key: string; items: string[] }>;
+  summary: string | null;
+  taskId: string | null;
+  metadata: Array<{ key: string; value: unknown }>;
+}
+
+export function categorizeData(data: unknown): CategorizedData {
+  const result: CategorizedData = {
+    status: null,
+    score: null,
+    passesQuality: null,
+    booleans: [],
+    findings: [],
+    summary: null,
+    taskId: null,
+    metadata: [],
+  };
+
+  if (!isRecord(data)) {
+    return result;
+  }
+
+  const obj = data;
+  const consumed = new Set<string>();
+
+  // Status
+  if ("status" in obj && typeof obj.status === "string") {
+    result.status = obj.status;
+    consumed.add("status");
+  }
+
+  // Score
+  if ("score" in obj && typeof obj.score === "number") {
+    result.score = obj.score;
+    consumed.add("score");
+  }
+
+  // passesQuality
+  if ("passesQuality" in obj && typeof obj.passesQuality === "boolean") {
+    result.passesQuality = obj.passesQuality;
+    consumed.add("passesQuality");
+  }
+
+  // Summary
+  if ("summary" in obj && typeof obj.summary === "string") {
+    result.summary = obj.summary;
+    consumed.add("summary");
+  }
+
+  // TaskId
+  if ("taskId" in obj && typeof obj.taskId === "string") {
+    result.taskId = obj.taskId;
+    consumed.add("taskId");
+  }
+
+  // Collect booleans and findings
+  for (const [key, val] of Object.entries(obj)) {
+    if (consumed.has(key)) continue;
+
+    // Boolean fields (excluding passesQuality already consumed)
+    if (typeof val === "boolean") {
+      result.booleans.push({ key, value: val });
+      consumed.add(key);
+      continue;
+    }
+
+    // Findings: arrays of strings with recognized key names
+    if (
+      Array.isArray(val) &&
+      val.length > 0 &&
+      val.every((item) => typeof item === "string") &&
+      FINDINGS_KEYS.has(key.toLowerCase())
+    ) {
+      result.findings.push({ key, items: val as string[] });
+      consumed.add(key);
+      continue;
+    }
+  }
+
+  // If fewer than 2 booleans, move them back to metadata
+  if (result.booleans.length < 2) {
+    // Don't render boolean grid -- push to metadata
+    for (const b of result.booleans) {
+      result.metadata.push({ key: b.key, value: b.value });
+    }
+    result.booleans = [];
+  }
+
+  // Everything else goes to metadata
+  for (const [key, val] of Object.entries(obj)) {
+    if (!consumed.has(key)) {
+      result.metadata.push({ key, value: val });
+    }
+  }
+
+  return result;
+}

package/src/components/details/json-tree/index.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { TaskDetail } from "@/types";
+
+import { JsonTreeView } from "./json-node";
+import { categorizeData } from "./categorize";
+import { DataToggle } from "./tree-controls";
+import {
+  AtAGlanceHeader,
+  BooleanFlagsGrid,
+  FindingsSection,
+  SummaryBlock,
+  MetadataGrid,
+  CollapsibleRawJson,
+} from "./smart-summary";
+
+/* ------------------------------------------------------------------ */
+/*  JsonTree -- Smart Data View (main export)                           */
+/* ------------------------------------------------------------------ */
+
+export function JsonTree({ task }: { task: TaskDetail | null }) {
+  const [showInput, setShowInput] = useState(true);
+
+  const activeData = showInput ? task?.input : task?.result;
+
+  const categorized = useMemo(
+    () => categorizeData(activeData),
+    [activeData]
+  );
+
+  if (!task) {
+    return (
+      <div className="p-4 text-sm text-foreground-muted">
+        Select a task to view data
+      </div>
+    );
+  }
+
+  const hasData = task.input || task.result;
+  if (!hasData) {
+    return (
+      <div className="p-4 text-sm text-foreground-muted">
+        No I/O data for this task
+      </div>
+    );
+  }
+
+  const isPrimitive =
+    activeData === null ||
+    activeData === undefined ||
+    typeof activeData !== "object" ||
+    Array.isArray(activeData);
+
+  return (
+    <div className="p-4">
+      {/* 1. Input/Output Toggle */}
+      <DataToggle showInput={showInput} onToggle={setShowInput} />
+
+      <ScrollArea>
+        {isPrimitive ? (
+          /* For non-object data, just show the raw tree */
+          <div className="rounded-md bg-background-secondary p-3">
+            <JsonTreeView data={activeData} />
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {/* 2. At-a-Glance Header Bar */}
+            <AtAGlanceHeader
+              status={categorized.status}
+              score={categorized.score}
+              passesQuality={categorized.passesQuality}
+              taskId={categorized.taskId}
+            />
+
+            {/* 3. Boolean Flags Grid */}
+            <BooleanFlagsGrid booleans={categorized.booleans} />
+
+            {/* 4. Findings / Issues Section */}
+            <FindingsSection findings={categorized.findings} />
+
+            {/* 5. Summary Block */}
+            {categorized.summary && (
+              <SummaryBlock summary={categorized.summary} />
+            )}
+
+            {/* 6. Metadata Section */}
+            <MetadataGrid metadata={categorized.metadata} />
+
+            {/* 7. Collapsible Raw JSON */}
+            <CollapsibleRawJson data={activeData} />
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Re-exports for backward compatibility                               */
+/* ------------------------------------------------------------------ */
+
+export { JsonTreeView } from "./json-node";
+export { CopyButton, JsonNode } from "./json-node";
+export { categorizeData, FINDINGS_KEYS, formatLabel, isRecord } from "./categorize";
+export type { CategorizedData } from "./categorize";
+export {
+  StatusPill,
+  ScoreBar,
+  QualityBadge,
+  AtAGlanceHeader,
+  BooleanFlagsGrid,
+  FindingsSection,
+  SummaryBlock,
+  MetadataGrid,
+  CollapsibleRawJson,
+  SmartSectionHeader,
+} from "./smart-summary";
+export { DataToggle } from "./tree-controls";