@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/screens/modules/DesktopScreen.tsx

@@ -0,0 +1,304 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import useSWR from "swr";
+import { Section, Kbd, StatusDot } from "../../components/Section";
+import { Button, Field, Input, Switch, Loading, Empty } from "../../components/ui";
+import { UiSelect } from "../../components/UiSelect";
+import { useToast } from "../../components/Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { Desktop, fetchDesktopMessages, type GlobalMessage } from "../../lib/api/desktop";
+
+const DEFAULT_SHORTCUT = "CommandOrControl+G";
+const POSITION_OPTS = [
+  { value: "left",   label: "Izquierda" },
+  { value: "center", label: "Centro" },
+  { value: "right",  label: "Derecha" },
+];
+const THEME_OPTS = [
+  { value: "light", label: "Claro" },
+  { value: "dark",  label: "Oscuro" },
+];
+
+// Desktop module — manage the floating voice window (the Electron app launched
+// with `apx desktop start`). The window is a separate process spawned by the
+// CLI, so the web admin doesn't start/stop it — it edits persisted config,
+// toggles per-user autostart, and previews the last conversation.
+export function DesktopScreen() {
+  const toast = useToast();
+  const { config, isLoading: cfgLoading, patch } = useGlobalConfig();
+
+  // config.desktop isn't on the typed GlobalConfig — read it off a local view.
+  const cfgView = config as unknown as {
+    desktop?: {
+      shortcut?: string; enabled?: boolean;
+      theme?: "light" | "dark";
+      position?: "left" | "center" | "right";
+    };
+    overlay?: { shortcut?: string }; // legacy fallback
+  };
+  const savedShortcut = cfgView.desktop?.shortcut || cfgView.overlay?.shortcut || DEFAULT_SHORTCUT;
+  const enabled  = cfgView.desktop?.enabled !== false;
+  const theme    = cfgView.desktop?.theme    || "light";
+  const position = cfgView.desktop?.position || "right";
+
+  const { data: status, isLoading: stLoading, mutate: mutateStatus } = useSWR(
+    "/desktop/status",
+    () => Desktop.status(),
+    { refreshInterval: 5000 },
+  );
+  const running = !!status?.running;
+
+  const { data: autostart, mutate: mutateAutostart } = useSWR(
+    "/desktop/autostart",
+    () => Desktop.autostartGet(),
+  );
+
+  const { data: msgs, isLoading: msgsLoading, mutate: mutateMsgs } = useSWR(
+    "/messages/global?channel=desktop",
+    () => fetchDesktopMessages(40),
+    { refreshInterval: 8000 },
+  );
+
+  const [shortcut, setShortcut] = useState(savedShortcut);
+  const [busy, setBusy] = useState(false);
+  const [autostartBusy, setAutostartBusy] = useState(false);
+  useEffect(() => setShortcut(savedShortcut), [savedShortcut]);
+
+  const saveShortcut = async () => {
+    const next = shortcut.trim();
+    if (!next || next === savedShortcut) return;
+    setBusy(true);
+    try {
+      await patch({ "desktop.shortcut": next });
+      toast.success("Atajo guardado. Reiniciá la ventana (apx desktop stop && start) para aplicarlo.");
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setBusy(false); }
+  };
+
+  const patchKey = async (key: string, value: unknown, ok: string) => {
+    setBusy(true);
+    try {
+      await patch({ [key]: value });
+      toast.success(ok);
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setBusy(false); }
+  };
+
+  const toggleAutostart = async (v: boolean) => {
+    setAutostartBusy(true);
+    try {
+      await Desktop.autostartSet(v);
+      await mutateAutostart();
+      toast.success(v ? "Autostart activado para el próximo login." : "Autostart desactivado.");
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setAutostartBusy(false); }
+  };
+
+  return (
+    <div className="mx-auto max-w-6xl space-y-6 p-6" data-testid="screen-desktop">
+      <header>
+        <h1 className="text-2xl font-bold tracking-tight">Escritorio</h1>
+        <p className="text-sm text-muted-fg">
+          Ventana flotante de voz (Electron): atajo global, escucha por micrófono y muestra el chat.
+        </p>
+      </header>
+
+      {/* ── Two-column layout: config on the left, last conversation on the right. ── */}
+      <div className="grid gap-6 lg:grid-cols-[1fr_1fr]">
+        {/* ── LEFT: configuration + status ─────────────────────────────── */}
+        <div className="space-y-6">
+          <Section title="Estado" description="La ventana se lanza desde la terminal o por autostart.">
+            {stLoading ? <Loading /> : (
+              <div className="flex items-center gap-2 text-sm">
+                <StatusDot ok={running} />
+                <span className="font-medium">{running ? "En ejecución" : "Detenida"}</span>
+                <button
+                  type="button"
+                  onClick={() => mutateStatus()}
+                  className="ml-2 text-xs text-muted-fg underline-offset-2 hover:underline"
+                >
+                  refrescar
+                </button>
+              </div>
+            )}
+            <p className="mt-3 text-xs text-muted-fg">
+              Desde terminal: <Kbd>apx desktop start</Kbd> · <Kbd>apx desktop --debug</Kbd>
+            </p>
+          </Section>
+
+          <Section
+            title="Arranque automático"
+            description="Lanza la ventana al iniciar sesión del usuario. Equivalente a `apx desktop install` (no requiere sudo)."
+          >
+            {!autostart ? <Loading /> : (
+              <div className="flex items-center justify-between gap-3">
+                <Switch
+                  checked={autostart.enabled}
+                  onChange={toggleAutostart}
+                  disabled={autostartBusy}
+                  label={autostart.enabled ? "Activado" : "Desactivado"}
+                />
+                <span className="text-xs text-muted-fg">platform: {autostart.platform}</span>
+              </div>
+            )}
+          </Section>
+
+          <Section
+            title="Atajo de teclado"
+            description="Botón de acceso rápido global que muestra/oculta la ventana y arranca a escuchar."
+          >
+            {cfgLoading ? <Loading /> : (
+              <div className="flex items-end gap-3">
+                <div className="flex-1">
+                  <Field
+                    label="Acelerador"
+                    hint='Formato Electron, p. ej. "CommandOrControl+G" o "CommandOrControl+Shift+Space". Reiniciá la ventana para aplicar.'
+                  >
+                    <Input
+                      value={shortcut}
+                      onChange={(e) => setShortcut(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === "Enter") saveShortcut(); }}
+                      placeholder={DEFAULT_SHORTCUT}
+                      className="max-w-md font-mono"
+                      disabled={busy}
+                    />
+                  </Field>
+                </div>
+                <Button
+                  variant="primary"
+                  onClick={saveShortcut}
+                  loading={busy}
+                  disabled={!shortcut.trim() || shortcut.trim() === savedShortcut}
+                >
+                  Guardar
+                </Button>
+              </div>
+            )}
+          </Section>
+
+          <Section title="Apariencia" description="Tema y posición de la ventana en la pantalla.">
+            {cfgLoading ? <Loading /> : (
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <Field label="Tema" hint="Reiniciá la ventana para aplicar.">
+                  <UiSelect
+                    value={theme}
+                    onChange={(v) => patchKey("desktop.theme", v, `Tema: ${v}.`)}
+                    options={THEME_OPTS}
+                    disabled={busy}
+                  />
+                </Field>
+                <Field label="Posición" hint='"izquierda" / "centro" / "derecha" del borde superior.'>
+                  <UiSelect
+                    value={position}
+                    onChange={(v) => patchKey("desktop.position", v, `Posición: ${v}.`)}
+                    options={POSITION_OPTS}
+                    disabled={busy}
+                  />
+                </Field>
+              </div>
+            )}
+          </Section>
+
+          <Section
+            title="Activación + transcripción"
+            description="El plugin del daemon procesa los mensajes. STT se configura en Voces."
+          >
+            {cfgLoading ? <Loading /> : (
+              <div className="space-y-3">
+                <Switch
+                  checked={enabled}
+                  onChange={(v) => patchKey("desktop.enabled", v, v ? "Desktop activado." : "Desktop desactivado.")}
+                  disabled={busy}
+                  label={enabled ? "Plugin activado (responde mensajes)" : "Plugin desactivado"}
+                />
+                <p className="text-xs text-muted-fg">
+                  Motor de voz a texto: <Link to="/m/voice" className="font-medium text-fg underline underline-offset-2">Voces</Link>{" "}
+                  (whisper local, idioma, modelo).
+                </p>
+              </div>
+            )}
+          </Section>
+        </div>
+
+        {/* ── RIGHT: last conversation preview ─────────────────────────── */}
+        <div>
+          <Section
+            title="Última conversación"
+            description="Lo último charlado con el agente desde la ventana flotante."
+            action={
+              <button
+                type="button"
+                onClick={() => mutateMsgs()}
+                className="text-xs text-muted-fg underline-offset-2 hover:underline"
+              >
+                refrescar
+              </button>
+            }
+          >
+            <DesktopLastConversation
+              messages={msgs || []}
+              loading={msgsLoading}
+            />
+          </Section>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Last-conversation panel ─────────────────────────────────────────────
+
+function DesktopLastConversation({ messages, loading }: { messages: GlobalMessage[]; loading: boolean }) {
+  // Group by exchange: a user turn + everything that follows until the next
+  // user turn. Show the LAST exchange front-and-center, older ones beneath.
+  const groups = useMemo(() => groupExchanges(messages), [messages]);
+
+  if (loading) return <Loading />;
+  if (!messages.length) return <Empty>Sin mensajes todavía. Mandale algo a la ventana de escritorio para que aparezca aquí.</Empty>;
+
+  return (
+    <div className="space-y-3 max-h-[560px] overflow-y-auto pr-1">
+      {groups.slice().reverse().map((g, idx) => (
+        <div key={idx} className="rounded-lg border border-border bg-card/40 p-3">
+          {g.map((m, i) => <MessageLine key={i} m={m} />)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function MessageLine({ m }: { m: GlobalMessage }) {
+  const isUser = m.direction === "in";
+  const when = formatWhen(m.ts);
+  return (
+    <div className="py-1">
+      <div className="flex items-baseline gap-2 text-[11px] text-muted-fg">
+        <span className="font-semibold">{isUser ? "Vos" : "Roby"}</span>
+        <span>{when}</span>
+      </div>
+      <div className={"mt-0.5 text-sm leading-snug whitespace-pre-wrap " + (isUser ? "text-muted-fg" : "text-fg")}>
+        {(m.body || "").trim() || <span className="italic opacity-50">(vacío)</span>}
+      </div>
+    </div>
+  );
+}
+
+function groupExchanges(messages: GlobalMessage[]): GlobalMessage[][] {
+  // messages come oldest-first; chunk on user-direction boundaries.
+  const out: GlobalMessage[][] = [];
+  for (const m of messages) {
+    if (m.direction === "in" || !out.length) out.push([m]);
+    else out[out.length - 1].push(m);
+  }
+  return out;
+}
+
+function formatWhen(iso: string): string {
+  try {
+    const d = new Date(iso);
+    const same = d.toDateString() === new Date().toDateString();
+    return same
+      ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+      : d.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  } catch { return ""; }
+}

package/src/interfaces/web/src/screens/modules/VoiceScreen.tsx

@@ -0,0 +1,174 @@
+import { useMemo, useState } from "react";
+import useSWR from "swr";
+import { Section } from "../../components/Section";
+import { Empty, Loading } from "../../components/ui";
+import { useToast } from "../../components/Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { VoiceProviderList } from "../../components/voice/VoiceProviderList";
+import { VoiceProviderModal, type VoiceProviderSave } from "../../components/voice/VoiceProviderModal";
+import { VoiceTestCard } from "../../components/voice/VoiceTestCard";
+import { VoiceSttCard } from "../../components/voice/VoiceSttCard";
+import { Voice, type TranscriptionConfig, type TtsMode, type VoiceTtsConfig } from "../../lib/api/voice";
+
+// Voices module — configure TTS/STT providers, pick the default engine, and
+// test playback. TTS provider availability comes from the daemon
+// (/tts/providers); per-engine config + the default + STT settings persist via
+// the admin config PATCH (voice.tts.* / transcription.*).
+export function VoiceScreen() {
+  const toast = useToast();
+  const { config, isLoading: cfgLoading, patch, mutate: mutateCfg } = useGlobalConfig();
+  const {
+    data: providersData,
+    isLoading: provLoading,
+    error: provError,
+    mutate: mutateProviders,
+  } = useSWR("/tts/providers", () => Voice.providers());
+
+  const [editing, setEditing] = useState<string | null>(null);
+  const [busyDefault, setBusyDefault] = useState(false);
+
+  // config.voice is typed as Record<string,unknown> and transcription isn't on
+  // GlobalConfig (owned by another agent) — read both off a local view.
+  const cfgView = config as unknown as {
+    voice?: { tts?: VoiceTtsConfig };
+    transcription?: TranscriptionConfig;
+  };
+  const voiceCfg = (cfgView.voice?.tts || {}) as VoiceTtsConfig;
+  const transcriptionCfg = (cfgView.transcription || {}) as TranscriptionConfig;
+  const configuredProvider = providersData?.configured_provider || voiceCfg.provider || "auto";
+  const mode: TtsMode = providersData?.mode || voiceCfg.mode || "chain";
+  const engines = providersData?.engines || [];
+  const order = providersData?.order || [];
+
+  const editingConfig = useMemo<Record<string, unknown>>(() => {
+    if (!editing) return {};
+    return (voiceCfg as Record<string, unknown>)[editing] as Record<string, unknown> || {};
+  }, [editing, voiceCfg]);
+
+  const setDefault = async (id: string) => {
+    setBusyDefault(true);
+    try {
+      await patch({ "voice.tts.provider": id, "voice.tts.mode": "single" });
+      await mutateProviders();
+      toast.success(`Motor por defecto: ${id}.`);
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusyDefault(false);
+    }
+  };
+
+  const setMode = async (next: TtsMode) => {
+    setBusyDefault(true);
+    try {
+      const set: Record<string, unknown> = { "voice.tts.mode": next };
+      // Switching to single needs a concrete default; pick the first available
+      // (or first listed) engine when none is set yet.
+      if (next === "single" && (configuredProvider === "auto" || !configuredProvider)) {
+        const pick = engines.find((e) => e.available)?.id || order[0] || "mock";
+        set["voice.tts.provider"] = pick;
+      }
+      await patch(set);
+      await mutateProviders();
+      toast.success(next === "chain" ? "Modo: cadena con fallback." : "Modo: solo el motor por defecto.");
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusyDefault(false);
+    }
+  };
+
+  const toggleEnabled = async (id: string, enabled: boolean) => {
+    setBusyDefault(true);
+    try {
+      await patch({ [`voice.tts.${id}.enabled`]: enabled });
+      await mutateProviders();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusyDefault(false);
+    }
+  };
+
+  const reorder = async (nextOrder: string[]) => {
+    setBusyDefault(true);
+    try {
+      await patch({ "voice.tts.order": nextOrder });
+      await mutateProviders();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusyDefault(false);
+    }
+  };
+
+  const saveProvider = async ({ set, unset }: VoiceProviderSave) => {
+    await patch(set, unset.length ? unset : undefined);
+    await mutateProviders();
+    await mutateCfg();
+    toast.success("Configuración de voz guardada.");
+  };
+
+  const patchStt = async (set: Record<string, unknown>, unset?: string[]) => {
+    try {
+      await patch(set, unset);
+      toast.success("Transcripción actualizada.");
+    } catch (e) {
+      toast.error((e as Error).message);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6 p-6" data-testid="screen-voice">
+      <header>
+        <h1 className="text-2xl font-bold tracking-tight">Voces</h1>
+        <p className="text-sm text-muted-fg">
+          Configurá el texto a voz (TTS) y la transcripción (STT), elegí el motor por defecto y probá la voz.
+        </p>
+      </header>
+
+      <Section
+        title="Proveedores de voz (TTS)"
+        description="Motores de síntesis. El estado lo reporta el daemon en vivo. Elegí cuál usar por defecto."
+      >
+        {provLoading || cfgLoading ? (
+          <Loading />
+        ) : provError ? (
+          <Empty>No se pudieron cargar los proveedores: {(provError as Error).message}</Empty>
+        ) : (
+          <VoiceProviderList
+            engines={engines}
+            order={order}
+            mode={mode}
+            configuredProvider={configuredProvider}
+            onSetMode={setMode}
+            onSetDefault={setDefault}
+            onToggleEnabled={toggleEnabled}
+            onReorder={reorder}
+            onConfigure={(id) => setEditing(id)}
+            busy={busyDefault}
+          />
+        )}
+      </Section>
+
+      <Section title="Probar voz" description='Elegí con qué motor sintetizar y, si aplica, cómo querés que hable.'>
+        <VoiceTestCard engines={engines} defaultProvider={configuredProvider} mode={mode} />
+      </Section>
+
+      <Section
+        title="Transcripción (STT)"
+        description="Motor de voz a texto que usan el deck, Telegram y la CLI al escuchar."
+      >
+        {cfgLoading ? <Loading /> : <VoiceSttCard config={transcriptionCfg} onPatch={patchStt} />}
+      </Section>
+
+      <VoiceProviderModal
+        open={!!editing}
+        providerId={editing}
+        config={editingConfig}
+        onClose={() => setEditing(null)}
+        onSave={saveProvider}
+      />
+    </div>
+  );
+}

package/src/interfaces/web/src/screens/project/AgentBrainGraph.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide,
+  type Simulation,
+} from "d3-force";
+
+// Animated relational "brain" graph (d3-force + SVG), inspired by panda's
+// AgentBrainGraphCanvas. Center = agent; items are real project data
+// (memory facts, threads, tasks, heartbeats, hierarchy) with semantic edges.
+
+export interface BrainNode {
+  id: string;
+  label: string;
+  kind: "agent" | "memory" | "thread" | "task" | "routine" | "agentlink";
+  relation: string;
+  detail?: string;
+}
+
+interface SimNode extends BrainNode {
+  x?: number; y?: number; vx?: number; vy?: number;
+  fx?: number | null; fy?: number | null;
+}
+interface SimLink { source: SimNode; target: SimNode; }
+
+const KIND_COLOR: Record<BrainNode["kind"], string> = {
+  agent: "#a78bfa", memory: "#38bdf8", thread: "#34d399",
+  task: "#fbbf24", routine: "#f472b6", agentlink: "#c084fc",
+};
+const KIND_LABEL: Record<BrainNode["kind"], string> = {
+  agent: "agente", memory: "memoria", thread: "thread",
+  task: "task", routine: "rutina", agentlink: "jerarquía",
+};
+
+const W = 760, H = 460;
+
+export function AgentBrainGraph({ center, nodes }: { center: string; nodes: BrainNode[] }) {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const simRef = useRef<Simulation<SimNode, SimLink> | null>(null);
+  const nodesRef = useRef<SimNode[]>([]);
+  const linksRef = useRef<SimLink[]>([]);
+  const dragRef = useRef<SimNode | null>(null);
+  const [, setVersion] = useState(0);
+  const [selected, setSelected] = useState<BrainNode | null>(null);
+
+  useEffect(() => {
+    const centerNode: SimNode = { id: "__center", label: center, kind: "agent", relation: "self", x: W / 2, y: H / 2, fx: W / 2, fy: H / 2 };
+    const simNodes: SimNode[] = [centerNode, ...nodes.map((n) => ({ ...n }))];
+    const links: SimLink[] = simNodes.slice(1).map((n) => ({ source: centerNode, target: n }));
+    nodesRef.current = simNodes;
+    linksRef.current = links;
+
+    const sim = forceSimulation<SimNode>(simNodes)
+      .force("link", forceLink<SimNode, SimLink>(links).distance(120).strength(0.5))
+      .force("charge", forceManyBody().strength(-220))
+      .force("center", forceCenter(W / 2, H / 2).strength(0.05))
+      .force("collide", forceCollide(26))
+      .on("tick", () => setVersion((v) => v + 1));
+    simRef.current = sim;
+    return () => { sim.stop(); };
+  }, [center, nodes]);
+
+  const toSvg = (e: React.PointerEvent) => {
+    const rect = svgRef.current!.getBoundingClientRect();
+    return {
+      x: ((e.clientX - rect.left) / rect.width) * W,
+      y: ((e.clientY - rect.top) / rect.height) * H,
+    };
+  };
+  const onDown = (n: SimNode) => (e: React.PointerEvent) => {
+    if (n.id === "__center") return;
+    dragRef.current = n;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+    simRef.current?.alphaTarget(0.3).restart();
+  };
+  const onMove = (e: React.PointerEvent) => {
+    const n = dragRef.current;
+    if (!n) return;
+    const { x, y } = toSvg(e);
+    n.fx = x; n.fy = y;
+  };
+  const onUp = () => {
+    const n = dragRef.current;
+    if (n) { n.fx = null; n.fy = null; }
+    dragRef.current = null;
+    simRef.current?.alphaTarget(0);
+  };
+
+  const simNodes = nodesRef.current;
+  const links = linksRef.current;
+
+  return (
+    <div className="space-y-3">
+      <div className="overflow-hidden rounded-xl border border-border bg-muted/10">
+        <svg
+          ref={svgRef}
+          viewBox={`0 0 ${W} ${H}`}
+          className="h-[460px] w-full touch-none select-none"
+          onPointerMove={onMove}
+          onPointerUp={onUp}
+          onPointerLeave={onUp}
+        >
+          {links.map((l, i) => (
+            <line key={i} x1={l.source.x} y1={l.source.y} x2={l.target.x} y2={l.target.y}
+              stroke={KIND_COLOR[l.target.kind]} strokeOpacity={0.22} strokeWidth={1.5} />
+          ))}
+          {simNodes.map((n) => {
+            if (n.id === "__center") {
+              return (
+                <g key={n.id} transform={`translate(${n.x},${n.y})`}>
+                  <circle r={22} fill={KIND_COLOR.agent} />
+                  <text textAnchor="middle" y={4} fontSize={11} fontWeight={700} fill="#1a1a1a">
+                    {center.length > 8 ? center.slice(0, 8) : center}
+                  </text>
+                </g>
+              );
+            }
+            const isSel = selected?.id === n.id;
+            return (
+              <g key={n.id} transform={`translate(${n.x},${n.y})`} className="cursor-grab active:cursor-grabbing"
+                 onPointerDown={onDown(n)} onClick={() => setSelected(n)}>
+                <circle r={isSel ? 9 : 6} fill={KIND_COLOR[n.kind]} fillOpacity={isSel ? 1 : 0.9}
+                  stroke={isSel ? "#fff" : "none"} strokeWidth={isSel ? 2 : 0} />
+                <text x={10} y={4} fontSize={10} className="fill-foreground/80">
+                  {n.label.length > 22 ? `${n.label.slice(0, 22)}…` : n.label}
+                </text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-fg">
+        {(Object.keys(KIND_LABEL) as BrainNode["kind"][]).filter((k) => k !== "agent").map((k) => (
+          <span key={k} className="inline-flex items-center gap-1">
+            <span className="size-2 rounded-full" style={{ background: KIND_COLOR[k] }} /> {KIND_LABEL[k]}
+          </span>
+        ))}
+        <span className="ml-auto">{nodes.length} nodos · arrastrá para reacomodar</span>
+      </div>
+      {selected && (
+        <div className="rounded-lg border border-border bg-card p-3 text-xs">
+          <div className="flex items-center gap-2">
+            <span className="size-2 rounded-full" style={{ background: KIND_COLOR[selected.kind] }} />
+            <span className="font-medium">{selected.label}</span>
+            <span className="text-muted-fg">· {selected.relation}</span>
+          </div>
+          {selected.detail && <p className="mt-1 whitespace-pre-wrap text-muted-fg">{selected.detail}</p>}
+        </div>
+      )}
+    </div>
+  );
+}