"use client";

import { useEffect, useRef, useState, useCallback, useMemo } from "react";

interface DeckNode {

  agent_id: string;

  parent_id: string | null;

  label: string;

  model: string;

  status: string;

  tokens: number;

  host: string;

  session: string;

  spawned_at?: string;

  last_activity: string;

  current_tool: string | null;

  task_count?: number;

}

interface TreeSnapshot {

  ts: string;

  nodes: DeckNode[];

  active_count: number;

  total_tokens: number;

}

type UIStatus = "active" | "idle" | "done" | "error";

interface UINode {

  id: string;

  parentId: string | null;

  label: string;

  short: string;

  model: string;

  host: string;

  session: string;

  status: UIStatus;

  rawStatus: string;

  tokens: number;

  tool: string | null;

  lastActivity: string;

  lastActivityRaw: string;

  taskCount: number;

  isRoot: boolean;

}

const MOCK_DECK: DeckNode[] = [

  { agent_id: "root", parent_id: null, label: "DARWIN", model: "system", status: "running", tokens: 0, host: "ct215", session: "system", last_activity: new Date().toISOString(), current_tool: null, task_count: 4 },

  { agent_id: "claude", parent_id: "root", label: "Researching homelab architecture and indexing layers", model: "sonnet", status: "running", tokens: 44508, host: "ct215", session: "demo-1", last_activity: new Date().toISOString(), current_tool: "WebSearch", task_count: 2 },

  { agent_id: "codex", parent_id: "root", label: "Refactor the deck stream protocol", model: "codex", status: "done", tokens: 12044, host: "ct241", session: "demo-2", last_activity: new Date(Date.now() - 4 * 60_000).toISOString(), current_tool: null, task_count: 0 },

  { agent_id: "glm", parent_id: "root", label: "Maintain oversight site and blog", model: "glm", status: "running", tokens: 8800, host: "ct247", session: "demo-3", last_activity: new Date(Date.now() - 38_000).toISOString(), current_tool: "Edit", task_count: 1 },

  { agent_id: "claude-2", parent_id: "claude", label: "Map what indexing already exists in the homelab", model: "sonnet", status: "done", tokens: 58147, host: "ct215", session: "demo-1", last_activity: new Date(Date.now() - 2 * 3600_000).toISOString(), current_tool: null, task_count: 6 },

  { agent_id: "probe-1", parent_id: "glm", label: "Probe candidate vuln surface", model: "glm", status: "done", tokens: 3200, host: "ct247", session: "demo-3", last_activity: new Date(Date.now() - 60_000).toISOString(), current_tool: null, task_count: 0 },

];

const DECK_WS_URL =

  process.env.NEXT_PUBLIC_DECK_URL || "ws://REDACTED-IP:9893/stream";

const DECK_HTTP_URL = DECK_WS_URL.replace(/^ws/, "http").replace("/stream", "");

const ACTIVE_WINDOW_MS = 10 * 60_000;

function relativeTime(iso: string): string {

  try {

    const diff = Date.now() - new Date(iso).getTime();

    const s = Math.floor(diff / 1000);

    if (s < 5) return "now";

    if (s < 60) return `${s}s ago`;

    const m = Math.floor(s / 60);

    if (m < 60) return `${m}m ago`;

    const h = Math.floor(m / 60);

    if (h < 24) return `${h}h ago`;

    return `${Math.floor(h / 24)}d ago`;

  } catch {

    return "";

  }

}

function cleanLabel(raw: string): string {

  return raw

    .replace(/^#+\s*/g, "")

    .replace(/[*_`>]/g, "")

    .replace(/\s+/g, " ")

    .trim();

}

function truncate(s: string, n: number): string {

  return s.length > n ? s.slice(0, n - 1).trimEnd() + "…" : s;

}

function toUINode(n: DeckNode): UINode {

  const recent =

    n.last_activity &&

    Date.now() - new Date(n.last_activity).getTime() < ACTIVE_WINDOW_MS;

  let status: UIStatus;

  if (n.status === "error") status = "error";

  else if (n.status === "running" && recent) status = "active";

  else if (n.status === "running") status = "idle";

  else status = "done";

  const isRoot = n.parent_id === null;

  const clean = cleanLabel(n.label);

  return {

    id: n.agent_id,

    parentId: n.parent_id,

    label: clean,

    short: truncate(clean, isRoot ? 16 : 22),

    model: n.model,

    host: n.host,

    session: n.session,

    status,

    rawStatus: n.status,

    tokens: n.tokens ?? 0,

    tool: n.current_tool,

    lastActivity: n.last_activity ? relativeTime(n.last_activity) : "",

    lastActivityRaw: n.last_activity,

    taskCount: n.task_count ?? 0,

    isRoot,

  };

}

const STATUS_COLOR: Record<UIStatus, string> = {

  active: "#16e0c8",

  idle: "#0d9e8e",

  done: "#3a4048",

  error: "#ef4444",

};

const STATUS_TEXT: Record<UIStatus, string> = {

  active: "text-teal-bio",

  idle: "text-teal-dim",

  done: "text-text-muted",

  error: "text-red-400",

};

interface Pos {

  id: string;

  x: number;

  y: number;

  node: UINode;

}

const COL_W = 230;

const ROW_H = 46;

const PAD = 40;

function layoutTree(nodes: UINode[]): { positions: Pos[]; width: number; height: number } {

  const byId = new Map(nodes.map((n) => [n.id, n]));

  const children = new Map<string | null, UINode[]>();

  for (const n of nodes) {

    const list = children.get(n.parentId) ?? [];

    list.push(n);

    children.set(n.parentId, list);

  }

  for (const list of Array.from(children.values())) {

    list.sort((a, b) => {

      if (a.status === "active" && b.status !== "active") return -1;

      if (b.status === "active" && a.status !== "active") return 1;

      return (b.lastActivityRaw || "").localeCompare(a.lastActivityRaw || "");

    });

  }

  const positions: Pos[] = [];

  let leafCursor = 0;

  function walk(id: string, depth: number): number {

    const node = byId.get(id)!;

    const kids = (children.get(id) ?? []).filter((k) => byId.has(k.id));

    let y: number;

    if (kids.length === 0) {

      y = leafCursor * ROW_H + PAD;

      leafCursor += 1;

    } else {

      const ys = kids.map((k) => walk(k.id, depth + 1));

      y = (ys[0] + ys[ys.length - 1]) / 2;

    }

    positions.push({ id, x: depth * COL_W + PAD, y, node });

    return y;

  }

  const roots = nodes.filter((n) => n.parentId === null || !byId.has(n.parentId));

  for (const r of roots) walk(r.id, 0);

  const width = Math.max(COL_W, ...positions.map((p) => p.x)) + COL_W;

  const height = Math.max(ROW_H, ...positions.map((p) => p.y)) + PAD;

  return { positions, width, height };

}

function InspectPanel({

  node,

  onClose,

  onAttach,

}: {

  node: UINode;

  onClose: () => void;

  onAttach: (n: UINode) => void;

}) {

  const canAttach = node.status === "active" || node.status === "idle";

  const summary = node.tool

    ? `Currently using ${node.tool}.`

    : node.status === "active"

    ? "Working - no tool call in flight."

    : node.status === "idle"

    ? "Session open but quiet."

    : node.status === "error"

    ? "Ended in an error state."

    : "Finished its task.";

  return (

    <div

      className="absolute inset-x-0 bottom-0 z-20 border-t border-teal-bio/25"

      style={{

        background: "rgba(8,10,12,0.97)",

        backdropFilter: "blur(6px)",

        animation: "sheet-up 0.32s cubic-bezier(0.16,1,0.3,1)",

        maxHeight: "62%",

        overflowY: "auto",

      }}

      role="dialog"

      aria-label={`Inspect ${node.label}`}

    >

      <div className="px-4 pt-3.5 pb-4">

        {}

        <div className="flex items-start justify-between gap-3 mb-3">

          <div className="min-w-0">

            <div className="flex items-center gap-2 mb-1">

              <span

                className="w-2 h-2 rounded-full shrink-0"

                style={{ background: STATUS_COLOR[node.status], boxShadow: node.status === "active" ? `0 0 8px ${STATUS_COLOR[node.status]}` : "none" }}

              />

              <span className={`font-mono text-label-sm uppercase tracking-widest ${STATUS_TEXT[node.status]}`}>

                {node.status}

              </span>

            </div>

            <p className="font-ui text-sm text-text-primary leading-snug">

              {node.label}

            </p>

          </div>

          <button

            onClick={onClose}

            aria-label="Close inspector"

            className="shrink-0 w-8 h-8 grid place-items-center text-text-muted hover:text-teal-bio transition-colors"

            style={{ touchAction: "manipulation" }}

          >

            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">

              <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />

            </svg>

          </button>

        </div>

        {}

        <div className="grid grid-cols-2 gap-x-4 gap-y-2.5 mb-3">

          <Meta k="Host" v={node.host} />

          <Meta k="Model" v={node.model} />

          <Meta k="Tokens" v={node.tokens > 0 ? node.tokens.toLocaleString() : "-"} mono />

          <Meta k="Last active" v={node.lastActivity || "-"} />

          <Meta k="Tool" v={node.tool || "-"} />

          <Meta k="Tasks" v={String(node.taskCount)} />

        </div>

        {}

        <div className="border-l-2 border-teal-bio/40 pl-3 py-1.5 mb-3.5">

          <p className="font-ui text-xs text-text-secondary leading-relaxed">{summary}</p>

        </div>

        {}

        {canAttach ? (

          <button

            onClick={() => onAttach(node)}

            className="font-display font-bold uppercase w-full"

            style={{

              height: 44,

              fontSize: "0.78rem",

              letterSpacing: "0.08em",

              color: "#050607",

              background: "#16e0c8",

              border: "none",

              transition: "filter 0.2s",

              touchAction: "manipulation",

            }}

            onMouseEnter={(e) => (e.currentTarget.style.filter = "brightness(1.1)")}

            onMouseLeave={(e) => (e.currentTarget.style.filter = "brightness(1)")}

          >

            Attach in workspace ▸

          </button>

        ) : (

          <div

            className="font-mono uppercase text-center"

            style={{ height: 44, lineHeight: "44px", fontSize: "0.66rem", letterSpacing: "0.08em", color: "#4a525e", border: "1px solid rgba(22,224,200,0.1)" }}

          >

            Session ended - read-only

          </div>

        )}

      </div>

    </div>

  );

}

function Meta({ k, v, mono }: { k: string; v: string; mono?: boolean }) {

  return (

    <div className="min-w-0">

      <p className="font-mono uppercase" style={{ fontSize: "0.5rem", letterSpacing: "0.12em", color: "#4a525e" }}>

        {k}

      </p>

      <p className={`truncate text-text-secondary ${mono ? "font-mono" : "font-ui"}`} style={{ fontSize: "0.74rem" }} title={v}>

        {v}

      </p>

    </div>

  );

}

type DeckMode = "live" | "mock" | "connecting";

export default function AgentTree() {

  const [agents, setAgents] = useState<UINode[]>(() => MOCK_DECK.map(toUINode));

  const [mode, setMode] = useState<DeckMode>("connecting");

  const [totalTokens, setTotalTokens] = useState(0);

  const [selected, setSelected] = useState<string | null>(null);

  const [hovered, setHovered] = useState<string | null>(null);

  const wsRef = useRef<WebSocket | null>(null);

  const retryRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const wrapRef = useRef<HTMLDivElement>(null);

  const [view, setView] = useState({ x: 0, y: 0, k: 1 });

  const dragRef = useRef<{ x: number; y: number; vx: number; vy: number; moved: boolean } | null>(null);

  const pinchRef = useRef<{ d: number; k: number } | null>(null);

  const fittedRef = useRef(false);

  const applySnapshot = useCallback((snap: TreeSnapshot) => {

    setAgents(snap.nodes.map(toUINode));

    setTotalTokens(snap.total_tokens ?? 0);

    setMode("live");

  }, []);

  const refetch = useCallback(() => {

    fetch(`${DECK_HTTP_URL}/tree`)

      .then((r) => r.json())

      .then((snap: TreeSnapshot) => applySnapshot(snap))

      .catch(() => {});

  }, [applySnapshot]);

  const connectWs = useCallback(() => {

    if (wsRef.current) { try { wsRef.current.close(); } catch {} }

    let ws: WebSocket;

    try {

      ws = new WebSocket(DECK_WS_URL);

    } catch {

      setMode("mock");

      return;

    }

    wsRef.current = ws;

    setMode("connecting");

    ws.onmessage = (e) => {

      try {

        const data = JSON.parse(e.data);

        if (data.type === "snapshot" || data.nodes) applySnapshot(data as TreeSnapshot);

        else if (data.type === "ping") {  }

        else refetch();

      } catch {  }

    };

    ws.onerror = () => { setMode("mock"); };

    ws.onclose = () => {

      if (retryRef.current) clearTimeout(retryRef.current);

      retryRef.current = setTimeout(connectWs, 5000);

    };

  }, [applySnapshot, refetch]);

  useEffect(() => {

    connectWs();

    refetch();

    return () => {

      if (retryRef.current) clearTimeout(retryRef.current);

      if (wsRef.current) try { wsRef.current.close(); } catch {}

    };

  }, []);

  const { positions, width, height } = useMemo(() => layoutTree(agents), [agents]);

  const posMap = useMemo(() => new Map(positions.map((p) => [p.id, p])), [positions]);

  const counts = useMemo(() => {

    const c = { active: 0, idle: 0, done: 0, error: 0 };

    for (const a of agents) c[a.status] += 1;

    return c;

  }, [agents]);

  const fitToView = useCallback(() => {

    const wrap = wrapRef.current;

    if (!wrap || positions.length === 0) return;

    const cw = wrap.clientWidth;

    const ch = wrap.clientHeight;

    if (cw === 0 || ch === 0) return;

    const k = Math.min(cw / (width + PAD), ch / (height + PAD), 1.2);

    const x = (cw - width * k) / 2;

    const y = (ch - height * k) / 2;

    setView({ x, y, k: Math.max(0.25, k) });

  }, [positions.length, width, height]);

  useEffect(() => {

    if (!fittedRef.current && positions.length > 0) {

      fittedRef.current = true;

      requestAnimationFrame(fitToView);

    }

  }, [positions.length, fitToView]);

  useEffect(() => {

    const onResize = () => fitToView();

    window.addEventListener("resize", onResize);

    return () => window.removeEventListener("resize", onResize);

  }, [fitToView]);

  const onPointerDown = (e: React.PointerEvent) => {

    if (e.button !== 0 && e.pointerType === "mouse") return;

    (e.target as Element).setPointerCapture?.(e.pointerId);

    dragRef.current = { x: e.clientX, y: e.clientY, vx: view.x, vy: view.y, moved: false };

  };

  const onPointerMove = (e: React.PointerEvent) => {

    const d = dragRef.current;

    if (!d) return;

    const dx = e.clientX - d.x;

    const dy = e.clientY - d.y;

    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) d.moved = true;

    setView((v) => ({ ...v, x: d.vx + dx, y: d.vy + dy }));

  };

  const onPointerUp = (e: React.PointerEvent) => {

    (e.target as Element).releasePointerCapture?.(e.pointerId);

    const d = dragRef.current;

    dragRef.current = null;

    if (d && !d.moved) {

      const wrap = wrapRef.current;

      if (!wrap) return;

      const rect = wrap.getBoundingClientRect();

      const sx = e.clientX - rect.left;

      const sy = e.clientY - rect.top;

      const tx = (sx - view.x) / view.k;

      const ty = (sy - view.y) / view.k;

      let hit: string | null = null;

      let best = Infinity;

      for (const p of positions) {

        const dist = Math.hypot(p.x - tx, p.y - ty);

        const r = (p.node.isRoot ? 11 : 8) + 8;

        if (dist < r && dist < best) { best = dist; hit = p.id; }

      }

      if (hit) setSelected((s) => (s === hit ? null : hit));

    }

  };

  const onWheel = (e: React.WheelEvent) => {

    e.preventDefault();

    const wrap = wrapRef.current;

    if (!wrap) return;

    const rect = wrap.getBoundingClientRect();

    const cx = e.clientX - rect.left;

    const cy = e.clientY - rect.top;

    setView((v) => {

      const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;

      const k = Math.min(2.4, Math.max(0.25, v.k * factor));

      const ratio = k / v.k;

      return { k, x: cx - (cx - v.x) * ratio, y: cy - (cy - v.y) * ratio };

    });

  };

  const touchDist = (t: React.TouchList) =>

    Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);

  const onTouchStart = (e: React.TouchEvent) => {

    if (e.touches.length === 2) pinchRef.current = { d: touchDist(e.touches), k: view.k };

  };

  const onTouchMove = (e: React.TouchEvent) => {

    if (e.touches.length === 2 && pinchRef.current) {

      const nd = touchDist(e.touches);

      const k = Math.min(2.4, Math.max(0.25, pinchRef.current.k * (nd / pinchRef.current.d)));

      setView((v) => ({ ...v, k }));

    }

  };

  const onTouchEnd = (e: React.TouchEvent) => {

    if (e.touches.length < 2) pinchRef.current = null;

  };

  const zoomBy = (factor: number) => {

    const wrap = wrapRef.current;

    if (!wrap) return;

    const cx = wrap.clientWidth / 2;

    const cy = wrap.clientHeight / 2;

    setView((v) => {

      const k = Math.min(2.4, Math.max(0.25, v.k * factor));

      const ratio = k / v.k;

      return { k, x: cx - (cx - v.x) * ratio, y: cy - (cy - v.y) * ratio };

    });

  };

  const onAttach = useCallback((n: UINode) => {

    const params = new URLSearchParams({

      target: n.host || "ct215",

      session: n.session,

      agent: /codex/i.test(n.model) ? "codex" : /glm|opencode/i.test(n.model) ? "opencode" : "claude",

    });

    window.location.href = `/workspace?${params.toString()}`;

  }, []);

  const selectedNode = selected ? agents.find((a) => a.id === selected) ?? null : null;

  return (

    <div className="flex flex-col gap-4 h-full min-h-0">

      {}

      <div>

        <div className="flex items-center justify-between mb-3">

          <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest">

            Agent nervous system

          </p>

          <span

            className={`font-mono text-label-sm px-1.5 py-0.5 rounded-sm ${

              mode === "live"

                ? "text-teal-bio bg-teal-bio/10"

                : mode === "connecting"

                ? "text-yellow-400 bg-yellow-400/10"

                : "text-text-muted bg-surface-2"

            }`}

          >

            {mode === "live" ? "live" : mode === "connecting" ? "connecting…" : "mock"}

          </span>

        </div>

        <div className="flex items-center gap-4 flex-wrap">

          <span className="flex items-center gap-2">

            <span className="w-2 h-2 rounded-full bg-teal-bio inline-block animate-pulse-slow" />

            <span className="font-mono text-label-sm text-teal-bio">{counts.active} active</span>

          </span>

          {counts.idle > 0 && (

            <span className="font-mono text-label-sm text-teal-dim">{counts.idle} idle</span>

          )}

          <span className="font-mono text-label-sm text-text-muted">{counts.done} done</span>

          {counts.error > 0 && (

            <span className="font-mono text-label-sm text-red-400">{counts.error} error</span>

          )}

          {totalTokens > 0 && (

            <span className="font-mono text-label-sm text-text-muted ml-auto">

              {(totalTokens / 1_000_000).toFixed(1)}M tok

            </span>

          )}

        </div>

      </div>

      {}

      <div

        ref={wrapRef}

        className="relative flex-1 min-h-[320px] overflow-hidden rounded-sm select-none"

        style={{

          border: "1px solid rgba(22,224,200,0.1)",

          background: "rgba(5,6,7,0.6)",

          cursor: dragRef.current ? "grabbing" : "grab",

          touchAction: "none",

        }}

        onPointerDown={onPointerDown}

        onPointerMove={onPointerMove}

        onPointerUp={onPointerUp}

        onPointerLeave={onPointerUp}

        onWheel={onWheel}

        onTouchStart={onTouchStart}

        onTouchMove={onTouchMove}

        onTouchEnd={onTouchEnd}

        aria-label="Agent tree - drag to pan, scroll or pinch to zoom, tap a node to inspect"

        role="application"

      >

        <svg

          width="100%"

          height="100%"

          aria-hidden="false"

          role="img"

          style={{ display: "block" }}

        >

          <g transform={`translate(${view.x},${view.y}) scale(${view.k})`}>

            {}

            {agents.map((n) => {

              if (!n.parentId) return null;

              const from = posMap.get(n.parentId);

              const to = posMap.get(n.id);

              if (!from || !to) return null;

              const live = n.status === "active";

              const midX = (from.x + to.x) / 2;

              return (

                <path

                  key={`e-${n.id}`}

                  d={`M${from.x},${from.y} C${midX},${from.y} ${midX},${to.y} ${to.x},${to.y}`}

                  fill="none"

                  stroke={live ? "#16e0c8" : "#1e242b"}

                  strokeWidth={live ? 1.4 : 1}

                  opacity={live ? 0.5 : 0.5}

                />

              );

            })}

            {}

            {positions.map(({ id, x, y, node }) => {

              const color = STATUS_COLOR[node.status];

              const r = node.isRoot ? 11 : node.status === "active" ? 8 : 6;

              const isSel = selected === id;

              const isHov = hovered === id;

              const labelText = isHov ? truncate(node.label, 40) : node.short;

              return (

                <g

                  key={id}

                  transform={`translate(${x},${y})`}

                  style={{ cursor: "pointer" }}

                  onMouseEnter={() => setHovered(id)}

                  onMouseLeave={() => setHovered((h) => (h === id ? null : h))}

                  role="button"

                  aria-label={`${node.label} - ${node.status}`}

                >

                  {}

                  {(isSel || node.status === "active") && (

                    <circle

                      r={r + 5}

                      fill="none"

                      stroke={isSel ? "#16e0c8" : color}

                      strokeWidth={isSel ? 1.4 : 0.8}

                      opacity={isSel ? 0.9 : 0.35}

                      className={node.status === "active" && !isSel ? "animate-pulse-slow" : ""}

                    />

                  )}

                  <circle r={r} fill={color} fillOpacity={node.status === "done" ? 0.55 : 0.95} />

                  {node.taskCount > 0 && r >= 8 && (

                    <text textAnchor="middle" dominantBaseline="central" fontSize={8} fill="#050607" fontFamily="monospace" fontWeight={700}>

                      {node.taskCount > 99 ? "99" : node.taskCount}

                    </text>

                  )}

                  {}

                  <text

                    x={r + 8}

                    y={-1}

                    dominantBaseline="middle"

                    fontSize={node.isRoot ? 12 : 11}

                    fill={node.status === "active" ? "#e8eaed" : node.status === "done" ? "#5a626e" : "#9aa3af"}

                    fontFamily={node.isRoot ? "'Space Grotesk', sans-serif" : "'JetBrains Mono', monospace"}

                    fontWeight={node.isRoot ? 700 : 400}

                    style={{ pointerEvents: "none" }}

                  >

                    {labelText}

                  </text>

                  <text

                    x={r + 8}

                    y={12}

                    dominantBaseline="middle"

                    fontSize={8}

                    fill={node.status === "active" ? "#16e0c8" : "#3a4048"}

                    fontFamily="'JetBrains Mono', monospace"

                    style={{ pointerEvents: "none" }}

                  >

                    {node.host} · {node.lastActivity}

                  </text>

                </g>

              );

            })}

          </g>

        </svg>

        {}

        <div className="absolute top-2 right-2 flex flex-col gap-1.5">

          <TreeBtn label="Zoom in" onClick={() => zoomBy(1.2)}>+</TreeBtn>

          <TreeBtn label="Zoom out" onClick={() => zoomBy(1 / 1.2)}>−</TreeBtn>

          <TreeBtn label="Fit to view" onClick={fitToView}>

            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">

              <path d="M1 4V1h3M11 4V1H8M1 8v3h3M11 8v3H8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />

            </svg>

          </TreeBtn>

        </div>

        {}

        <div className="absolute bottom-2 left-2 font-mono pointer-events-none" style={{ fontSize: "0.5rem", letterSpacing: "0.06em", color: "#3a4048" }}>

          DRAG · SCROLL/PINCH · TAP NODE

        </div>

        {}

        {selectedNode && (

          <InspectPanel node={selectedNode} onClose={() => setSelected(null)} onAttach={onAttach} />

        )}

      </div>

      {}

      <div className="flex gap-3.5 flex-wrap pt-1 border-t border-surface-2">

        {(["active", "idle", "done", "error"] as UIStatus[]).map((s) => (

          <span key={s} className={`flex items-center gap-1.5 font-mono text-label-sm ${STATUS_TEXT[s]}`}>

            <span className="w-2 h-2 rounded-full inline-block" style={{ background: STATUS_COLOR[s] }} />

            {s}

          </span>

        ))}

      </div>

    </div>

  );

}

function TreeBtn({ children, onClick, label }: { children: React.ReactNode; onClick: () => void; label: string }) {

  return (

    <button

      onClick={onClick}

      aria-label={label}

      title={label}

      className="grid place-items-center font-mono text-teal-dim hover:text-teal-bio transition-colors"

      style={{

        width: 30,

        height: 30,

        background: "rgba(8,10,12,0.92)",

        border: "1px solid rgba(22,224,200,0.16)",

        fontSize: "1rem",

        lineHeight: 1,

        touchAction: "manipulation",

      }}

    >

      {children}

    </button>

  );

}