@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

package/src/dashboard/app/pages/HookInspector.jsx

@@ -1,429 +1,464 @@
 import { useState, useMemo, useCallback } from 'react';
 import { Handle, Position, MarkerType } from '@xyflow/react';
+import { CaretDown, CaretRight } from '@phosphor-icons/react';
 import morphData from 'virtual:morph-data';
 import FlowGraph from '../components/FlowGraph.jsx';
 import DetailPanel from '../components/DetailPanel.jsx';
-import { useDetailPanel } from '../hooks/useDetailPanel.js';
-
-// Event color palette
-const EVENT_COLORS = {
-  'session-start':  { color: '#34d399', bg: '#064e3b', label: 'Session Start' },
-  'user-prompt':    { color: '#fbbf24', bg: '#78350f', label: 'User Prompt' },
-  'pre-tool-use':   { color: '#60a5fa', bg: '#1e3a5f', label: 'Pre-Tool-Use' },
-  'post-tool-use':  { color: '#f472b6', bg: '#500724', label: 'Post-Tool-Use' },
-  'pre-compact':    { color: '#a78bfa', bg: '#2e1065', label: 'Pre-Compact' },
-  'stop':           { color: '#ef4444', bg: '#450a0a', label: 'Stop' },
-  'teammate-idle':  { color: '#94a3b8', bg: '#1e293b', label: 'Teammate Idle' },
-  'worktree-create': { color: '#2dd4bf', bg: '#134e4a', label: 'Worktree Create' },
-  'worktree-remove': { color: '#fb923c', bg: '#431407', label: 'Worktree Remove' },
+import EntityLink, { useSelection } from '../components/EntityLink.jsx';
+
+/**
+ * Every event the scanner can report. `when` and `power` are what the panel
+ * explains; `canBlock` is the badge on the graph (the tool-call veto).
+ * Colors are the dashboard palette as hex, because the MiniMap cannot read
+ * CSS variables.
+ */
+const EVENTS = {
+  'session-start': {
+    label: 'Início da sessão', color: '#73daca',
+    when: 'Dispara quando uma sessão do Claude Code começa, é retomada ou limpa.',
+    power: 'Observa: não impede nada, mas pode injetar contexto na sessão.',
+  },
+  'user-prompt': {
+    label: 'Prompt do usuário', color: '#e0af68',
+    when: 'Dispara quando o usuário envia uma mensagem, antes de o Claude processá-la.',
+    power: 'Pode acrescentar contexto ao prompt ou barrá-lo.',
+  },
+  'pre-tool-use': {
+    label: 'Antes da ferramenta', color: '#7aa2f7', canBlock: true, toolEvent: true,
+    when: 'Dispara antes de cada chamada de ferramenta que casa com o matcher (Bash, Write, Edit…).',
+    power: 'Pode bloquear a chamada: a ferramenta não roda e o Claude recebe o motivo.',
+  },
+  'post-tool-use': {
+    label: 'Depois da ferramenta', color: '#bb9af7', toolEvent: true,
+    when: 'Dispara depois que a ferramenta roda (inclui falhas e lotes de chamadas).',
+    power: 'Observa o resultado: não desfaz a chamada, mas pode devolver um aviso ao Claude.',
+  },
+  stop: {
+    label: 'Fim da resposta', color: '#f7768e',
+    when: 'Dispara quando o Claude (ou um sub-agent) termina de responder.',
+    power: 'Observa e valida; pode pedir que o Claude continue em vez de parar.',
+  },
+  'pre-compact': {
+    label: 'Antes de compactar', color: '#ff9e64',
+    when: 'Dispara antes de o Claude Code compactar o histórico da conversa.',
+    power: 'Observa: não impede a compactação.',
+  },
+  'teammate-idle': {
+    label: 'Colega ocioso', color: '#8d97a5',
+    when: 'Dispara quando um colega de uma equipe de agentes fica ocioso.',
+    power: 'Observa.',
+  },
+  'worktree-create': {
+    label: 'Criar worktree', color: '#9ece6a',
+    when: 'Dispara quando o Claude Code cria uma worktree (claude -w, EnterWorktree, agente isolado).',
+    power: 'Assume a criação: o morph-spec a delega ao próprio CLI.',
+  },
+  'worktree-remove': {
+    label: 'Remover worktree', color: '#ff9e64',
+    when: 'Dispara quando o Claude Code remove uma worktree que ele criou.',
+    power: 'Assume a remoção: o morph-spec a delega ao próprio CLI.',
+  },
+  unregistered: {
+    label: 'Não registrados', color: '#5c6573',
+    when: 'Arquivos de hook que o instalador não registra em nenhum evento.',
+    power: 'Nunca disparam: estão no framework, mas fora da lista de hooks instalados.',
+  },
 };
 
-// Node dimensions
-const NODE_W = 200;
-const NODE_H = 120; // base; expands with hooks
+function eventMeta(key) {
+  return EVENTS[key] || { label: key, color: '#8d97a5', when: 'Evento sem descrição no dashboard.', power: '' };
+}
+
+/**
+ * The URL key of one registration. A hook file can register more than once
+ * under the same event with different matchers, so the name alone is not
+ * unique: `?sel=` holds `event:name:matcher`. A bare hook name also works and
+ * opens that hook's first registration.
+ */
+export function hookKey(hook) {
+  return `${hook.event}:${hook.name}:${hook.matcher || ''}`;
+}
+
+function findHook(hooks, sel) {
+  if (!sel) return null;
+  return hooks.find((h) => hookKey(h) === sel) || hooks.find((h) => h.name === sel) || null;
+}
+
+function matcherText(hook) {
+  if (hook.matcher) return hook.matcher;
+  return eventMeta(hook.event).toolEvent ? 'todas as ferramentas' : null;
+}
+
+// ─── Nodes ────────────────────────────────────────────────────────────────────
+
+const NODE_W = 280;
+const ROW_H = 26;
+const HEAD_H = 58;
+const nodeHeight = (count) => HEAD_H + Math.max(count, 1) * ROW_H;
 
-// ─── Custom: EventGroupNode ───────────────────────────────────────────────────
 function EventGroupNode({ data }) {
-  const { eventKey, hooks, canBlock } = data;
-  const palette = EVENT_COLORS[eventKey] || { color: '#94a3b8', bg: '#1e293b', label: eventKey };
+  const { eventKey, hooks, onSelectHook, selectedKey } = data;
+  const meta = eventMeta(eventKey);
 
   return (
     <div
-      className="rounded-xl px-4 py-3 min-w-[190px] cursor-pointer select-none"
-      style={{
-        background: palette.bg,
-        border: `2px solid ${palette.color}`,
-        boxShadow: `0 0 12px ${palette.color}33`,
-      }}
+      className="cursor-pointer select-none rounded-xl bg-[var(--color-raised)] px-3.5 py-3"
+      style={{ width: NODE_W, boxShadow: `inset 0 0 0 1px var(--color-hair-strong), inset 3px 0 0 ${meta.color}` }}
     >
-      <Handle type="target" position={Position.Left}
-        style={{ background: palette.color, width: 8, height: 8, border: 'none' }} />
-
-      {/* Header */}
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-white text-xs font-bold tracking-wide uppercase">{palette.label}</span>
-        {canBlock && (
-          <span className="text-[9px] font-bold px-1.5 py-0.5 rounded"
-            style={{ background: '#1e40af', color: '#93c5fd', border: '1px solid #3b82f6' }}>
-            can BLOCK
+      <Handle type="target" position={Position.Left} style={{ background: meta.color, width: 8, height: 8, border: 'none' }} />
+
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <span className="text-[13px] font-medium text-[var(--color-fg)]">{meta.label}</span>
+        {meta.canBlock ? (
+          <span className="rounded-full px-2 py-0.5 text-xs text-[var(--color-warn)] shadow-[inset_0_0_0_1px_var(--color-hair-strong)]">
+            pode bloquear
           </span>
+        ) : (
+          <span className="text-xs text-[var(--color-faint)]">{hooks.length}</span>
         )}
       </div>
 
-      {/* Hook list */}
-      <ul className="space-y-0.5">
-        {hooks.map((h) => (
-          <li key={h.name}
-            className="text-[10px] font-mono truncate"
-            style={{ color: palette.color }}
-            title={h.name}>
-            · {h.name}
-          </li>
-        ))}
-      </ul>
-
-      <Handle type="source" position={Position.Right}
-        style={{ background: palette.color, width: 8, height: 8, border: 'none' }} />
+      {hooks.length === 0 ? (
+        <p className="text-xs text-[var(--color-faint)]">Nenhum hook do morph-spec aqui.</p>
+      ) : (
+        <ul className="space-y-0.5">
+          {hooks.map((h) => {
+            const key = hookKey(h);
+            const matcher = matcherText(h);
+            return (
+              <li key={key}>
+                <button
+                  type="button"
+                  className="nodrag flex w-full items-center justify-between gap-2 rounded-md px-1.5 py-0.5 text-left text-xs transition-colors hover:bg-white/[0.06]"
+                  style={{ background: key === selectedKey ? 'rgb(255 255 255 / 0.08)' : undefined }}
+                  onClick={(e) => { e.stopPropagation(); onSelectHook(key); }}
+                  title={h.description || h.name}
+                >
+                  <span className="truncate font-mono text-[var(--color-fg)]">{h.name}</span>
+                  {matcher && <span className="shrink-0 truncate font-mono text-[var(--color-dim)]" style={{ maxWidth: 110 }}>{matcher}</span>}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      <Handle type="source" position={Position.Right} style={{ background: meta.color, width: 8, height: 8, border: 'none' }} />
     </div>
   );
 }
 
-// ─── Custom: ToolNode ─────────────────────────────────────────────────────────
-function ToolNode({ data }) {
+function ToolNode() {
   return (
-    <div
-      className="rounded-xl px-5 py-3 select-none text-center min-w-[140px]"
-      style={{
-        background: '#374151',
-        border: '2px solid #6b7280',
-        boxShadow: '0 0 10px #6b728033',
-      }}
-    >
-      <Handle type="target" position={Position.Left}
-        style={{ background: '#9ca3af', width: 8, height: 8, border: 'none' }} />
-      <div className="text-gray-100 text-sm font-bold">TOOL</div>
-      <div className="text-gray-400 text-[10px] mt-0.5">executes</div>
-      <Handle type="source" position={Position.Right}
-        style={{ background: '#9ca3af', width: 8, height: 8, border: 'none' }} />
+    <div className="cursor-pointer select-none rounded-xl bg-[var(--color-core)] px-5 py-3 text-center shadow-[inset_0_0_0_1px_var(--color-hair-strong)]" style={{ width: 150 }}>
+      <Handle type="target" position={Position.Left} style={{ background: '#8d97a5', width: 8, height: 8, border: 'none' }} />
+      <div className="text-sm font-medium text-[var(--color-fg)]">Ferramenta</div>
+      <div className="mt-0.5 text-xs text-[var(--color-dim)]">executa</div>
+      <Handle type="source" position={Position.Right} style={{ background: '#8d97a5', width: 8, height: 8, border: 'none' }} />
     </div>
   );
 }
 
-const nodeTypes = {
-  eventGroupNode: EventGroupNode,
-  toolNode: ToolNode,
-};
+const nodeTypes = { eventGroupNode: EventGroupNode, toolNode: ToolNode };
+
+// ─── Layout ───────────────────────────────────────────────────────────────────
+// Main row: session-start → user-prompt → pre-tool-use → tool → post-tool-use → stop / pre-compact
+// Second row: events outside the tool-call flow (worktree pair, teammate-idle,
+// unregistered hooks and any event this page does not know).
 
-// ─── Layout: manual horizontal positions ─────────────────────────────────────
-// Flow: session-start → user-prompt → pre-tool-use → TOOL → post-tool-use → stop
-//                                                                           → pre-compact
-// teammate-idle is disconnected at bottom
-// Loop-back: post-tool-use → user-prompt (dashed)
-
-const COL_GAP = 260;
-const ROW_Y = 100;
-const BRANCH_Y_STOP = 80;
-const BRANCH_Y_COMPACT = 240;
-
-function buildNodesAndEdges(hooksByEvent) {
-  // Main flow columns (x positions)
-  const cols = {
-    'session-start': 0,
-    'user-prompt':   COL_GAP,
-    'pre-tool-use':  COL_GAP * 2,
-    '__tool__':      COL_GAP * 3,
-    'post-tool-use': COL_GAP * 4,
-    'stop':          COL_GAP * 5,
-    'pre-compact':   COL_GAP * 5,
-    'teammate-idle': COL_GAP * 2,
-    // Worktree lifecycle — outside the tool-call flow, drawn as a pair below it.
-    'worktree-create': COL_GAP * 0,
-    'worktree-remove': COL_GAP * 1,
-  };
+const COL_GAP = NODE_W + 90;
+const MAIN_ROW = ['session-start', 'user-prompt', 'pre-tool-use', '__tool__', 'post-tool-use'];
+const SIDE_ROW = ['worktree-create', 'worktree-remove', 'teammate-idle', 'unregistered'];
 
+function buildNodesAndEdges(hooksByEvent, onSelectHook, selectedKey) {
   const nodes = [];
   const edges = [];
+  const hooksOf = (k) => hooksByEvent[k] || [];
 
-  // Helper to build an EventGroupNode
-  function addEventNode(eventKey, x, y, extra = {}) {
-    const hooks = hooksByEvent[eventKey] || [];
+  function addEventNode(eventKey, x, y) {
     nodes.push({
       id: eventKey,
       type: 'eventGroupNode',
       position: { x, y },
-      data: {
-        eventKey,
-        hooks,
-        canBlock: eventKey === 'pre-tool-use',
-        color: (EVENT_COLORS[eventKey] || {}).color || '#94a3b8',
-        ...extra,
-      },
+      data: { eventKey, hooks: hooksOf(eventKey), onSelectHook, selectedKey, color: eventMeta(eventKey).color },
     });
   }
 
-  // Main flow nodes
-  addEventNode('session-start', cols['session-start'], ROW_Y);
-  addEventNode('user-prompt',   cols['user-prompt'],   ROW_Y);
-  addEventNode('pre-tool-use',  cols['pre-tool-use'],  ROW_Y);
-
-  // TOOL node
-  nodes.push({
-    id: '__tool__',
-    type: 'toolNode',
-    position: { x: cols['__tool__'], y: ROW_Y + 30 },
-    data: { color: '#6b7280' },
+  MAIN_ROW.forEach((key, i) => {
+    if (key === '__tool__') {
+      nodes.push({ id: '__tool__', type: 'toolNode', position: { x: i * COL_GAP + (NODE_W - 150) / 2, y: 20 }, data: { color: '#8d97a5' } });
+    } else {
+      addEventNode(key, i * COL_GAP, 0);
+    }
   });
 
-  addEventNode('post-tool-use', cols['post-tool-use'], ROW_Y);
-
-  // Branches: stop (top branch) and pre-compact (bottom branch)
-  addEventNode('stop',         cols['stop'],         BRANCH_Y_STOP);
-  addEventNode('pre-compact',  cols['pre-compact'],  BRANCH_Y_COMPACT);
+  const branchX = MAIN_ROW.length * COL_GAP;
+  const stopH = nodeHeight(hooksOf('stop').length);
+  addEventNode('stop', branchX, 0);
+  addEventNode('pre-compact', branchX, stopH + 50);
 
-  // teammate-idle disconnected below main flow
-  addEventNode('teammate-idle', cols['teammate-idle'] - COL_GAP * 0.5, ROW_Y + 280);
-
-  // Worktree lifecycle (WorktreeCreate → WorktreeRemove) — its own row below
-  // the main flow: these fire on `claude -w` / EnterWorktree / Agent isolation,
-  // not on a tool call.
-  addEventNode('worktree-create', cols['worktree-create'], ROW_Y + 280);
-  addEventNode('worktree-remove', cols['worktree-remove'], ROW_Y + 280);
-
-  // ─── Edges ────────────────────────────────────────────────────────────
-  const solid = (id, source, target, color = '#475569') => ({
-    id, source, target,
-    type: 'smoothstep',
-    style: { stroke: color, strokeWidth: 2 },
+  const mainBottom = Math.max(
+    ...MAIN_ROW.filter((k) => k !== '__tool__').map((k) => nodeHeight(hooksOf(k).length)),
+    stopH + 50 + nodeHeight(hooksOf('pre-compact').length),
+  );
+  const sideY = mainBottom + 110;
+  const known = new Set([...MAIN_ROW, 'stop', 'pre-compact', ...SIDE_ROW]);
+  const extra = Object.keys(hooksByEvent).filter((k) => !known.has(k));
+  [...SIDE_ROW, ...extra].forEach((key, i) => addEventNode(key, i * COL_GAP, sideY));
+
+  const solid = (id, source, target, color) => ({
+    id, source, target, type: 'smoothstep',
+    style: { stroke: color, strokeWidth: 1.8, opacity: 0.75 },
     markerEnd: { type: MarkerType.ArrowClosed, color },
   });
 
-  edges.push(solid('e-ss-up', 'session-start', 'user-prompt', EVENT_COLORS['user-prompt'].color));
-  edges.push(solid('e-up-ptu', 'user-prompt', 'pre-tool-use', EVENT_COLORS['pre-tool-use'].color));
-  edges.push(solid('e-ptu-tool', 'pre-tool-use', '__tool__', '#6b7280'));
-  edges.push(solid('e-tool-pou', '__tool__', 'post-tool-use', EVENT_COLORS['post-tool-use'].color));
-
-  // Post-tool-use branches to stop and pre-compact
-  edges.push(solid('e-pou-stop', 'post-tool-use', 'stop', EVENT_COLORS['stop'].color));
-  edges.push(solid('e-pou-compact', 'post-tool-use', 'pre-compact', EVENT_COLORS['pre-compact'].color));
-  edges.push(solid('e-wt-create-remove', 'worktree-create', 'worktree-remove', EVENT_COLORS['worktree-remove'].color));
-
-  // Loop-back dashed: post-tool-use → user-prompt
+  edges.push(solid('e-ss-up', 'session-start', 'user-prompt', EVENTS['user-prompt'].color));
+  edges.push(solid('e-up-ptu', 'user-prompt', 'pre-tool-use', EVENTS['pre-tool-use'].color));
+  edges.push(solid('e-ptu-tool', 'pre-tool-use', '__tool__', '#8d97a5'));
+  edges.push(solid('e-tool-pou', '__tool__', 'post-tool-use', EVENTS['post-tool-use'].color));
+  edges.push(solid('e-pou-stop', 'post-tool-use', 'stop', EVENTS.stop.color));
+  edges.push(solid('e-pou-compact', 'post-tool-use', 'pre-compact', EVENTS['pre-compact'].color));
+  edges.push(solid('e-wt', 'worktree-create', 'worktree-remove', EVENTS['worktree-remove'].color));
   edges.push({
-    id: 'e-loop',
-    source: 'post-tool-use',
-    target: 'user-prompt',
-    type: 'smoothstep',
-    style: { stroke: '#fbbf24', strokeWidth: 1.5, strokeDasharray: '6 4' },
-    label: 'conversation loop',
-    labelStyle: { fill: '#fbbf24', fontSize: 10, fontFamily: 'monospace' },
-    labelBgStyle: { fill: '#1c1917', fillOpacity: 0.85 },
-    markerEnd: { type: MarkerType.ArrowClosed, color: '#fbbf24' },
+    id: 'e-loop', source: 'post-tool-use', target: 'user-prompt', type: 'smoothstep',
+    style: { stroke: '#e0af68', strokeWidth: 1.4, strokeDasharray: '6 4', opacity: 0.7 },
+    label: 'a conversa continua',
+    labelStyle: { fill: '#e0af68', fontSize: 12 },
+    labelBgStyle: { fill: '#12151b', fillOpacity: 0.9 },
+    markerEnd: { type: MarkerType.ArrowClosed, color: '#e0af68' },
   });
 
   return { nodes, edges };
 }
 
-// ─── HookDetail: detail panel content ────────────────────────────────────────
-function HookDetail({ hook }) {
+// ─── Panels ───────────────────────────────────────────────────────────────────
+
+function Section({ title, children }) {
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium text-[var(--color-faint)]">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function EventExplainer({ eventKey }) {
+  const meta = eventMeta(eventKey);
+  return (
+    <div className="space-y-1.5 rounded-xl bg-white/[0.03] px-4 py-3 text-sm leading-relaxed shadow-[inset_0_0_0_1px_var(--color-hair)]">
+      <p className="flex items-center gap-2 text-[var(--color-fg)]">
+        <span className="inline-block h-2 w-2 shrink-0 rounded-full" style={{ background: meta.color }} />
+        {meta.label}
+      </p>
+      <p className="text-[var(--color-dim)]">{meta.when}</p>
+      {meta.power && <p className="text-[var(--color-dim)]">{meta.power}</p>}
+    </div>
+  );
+}
+
+function HookDetail({ hook, hookNames }) {
   const [showSource, setShowSource] = useState(false);
-  const palette = EVENT_COLORS[hook.event] || { color: '#94a3b8' };
+  const matcher = matcherText(hook);
 
   return (
-    <div className="text-sm text-gray-200 space-y-3">
-      {/* Meta */}
-      <div>
-        <p className="text-gray-400 text-xs">
-          Event: <span className="font-mono" style={{ color: palette.color }}>{hook.event}</span>
-        </p>
-        <p className="text-gray-400 text-xs mt-0.5">
-          File: <span className="text-gray-300 font-mono">{hook.filename}</span>
-        </p>
-      </div>
+    <div className="space-y-6 text-sm text-[var(--color-dim)]">
+      <Section title="Quando roda">
+        <EventExplainer eventKey={hook.event} />
+        {hook.rawEvent && (
+          <p className="mt-2 text-xs">Evento do Claude Code: <span className="font-mono text-[var(--color-fg)]">{hook.rawEvent}</span></p>
+        )}
+      </Section>
+
+      {matcher && (
+        <Section title="Ferramentas observadas">
+          <code className="inline-block rounded-lg bg-white/[0.03] px-2.5 py-1 font-mono text-xs text-[var(--color-fg)] shadow-[inset_0_0_0_1px_var(--color-hair)]">{matcher}</code>
+        </Section>
+      )}
 
-      {/* Description */}
       {hook.description && (
-        <div>
-          <p className="text-gray-500 text-[10px] uppercase tracking-wide mb-1">Description</p>
-          <p className="text-gray-300 text-xs leading-relaxed">{hook.description}</p>
-        </div>
+        <Section title="O que faz">
+          <p className="whitespace-pre-line leading-relaxed text-[var(--color-fg)]">{hook.description}</p>
+        </Section>
       )}
 
-      {/* Imports */}
       {hook.imports?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-[10px] uppercase tracking-wide mb-1.5">Imports</p>
-          <div className="flex flex-wrap gap-1">
-            {hook.imports.map((imp) => (
-              <span key={imp}
-                className="px-2 py-0.5 rounded text-[10px] font-mono bg-gray-800 border border-gray-700 text-gray-400"
-                title={imp}>
-                {imp.length > 28 ? '…' + imp.slice(-22) : imp}
-              </span>
-            ))}
+        <Section title="Importa">
+          <div className="flex flex-wrap gap-1.5">
+            {hook.imports.map((imp) => {
+              const base = imp.split('/').pop().replace(/\.m?js$/, '');
+              return hookNames.has(base) && base !== hook.name ? (
+                <EntityLink key={imp} kind="hook" id={base} chip title={imp}>{base}</EntityLink>
+              ) : (
+                <span key={imp} title={imp} className="rounded-full px-2 py-0.5 font-mono text-[11px] text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)]">
+                  {imp}
+                </span>
+              );
+            })}
           </div>
-        </div>
+        </Section>
       )}
 
-      {/* Source toggle */}
-      <div>
+      <Section title="Código">
         <button
+          type="button"
           onClick={() => setShowSource((v) => !v)}
-          className="w-full text-left px-3 py-1.5 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded text-xs text-gray-300 transition-colors"
+          className="fluid flex w-full items-center gap-2 rounded-lg bg-white/[0.04] px-3 py-2 text-left text-xs text-[var(--color-fg)] shadow-[inset_0_0_0_1px_var(--color-hair)] transition-colors hover:bg-white/[0.07]"
+          aria-expanded={showSource}
         >
-          {showSource ? 'Hide Source' : 'Show Source'}
+          {showSource ? <CaretDown weight="light" size={14} /> : <CaretRight weight="light" size={14} />}
+          <span className="font-mono">{hook.filename}</span>
+          <span className="ml-auto text-[var(--color-faint)]">{showSource ? 'ocultar' : 'mostrar'}</span>
         </button>
         {showSource && (
-          <pre className="mt-2 p-3 bg-gray-950 border border-gray-800 rounded text-[9px] text-gray-400 overflow-x-auto whitespace-pre font-mono leading-relaxed max-h-80 overflow-y-auto">
+          <pre className="mt-2 max-h-[28rem] overflow-auto rounded-lg bg-[var(--color-ink)] p-3 font-mono text-xs leading-relaxed text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)]">
             {hook.source}
           </pre>
         )}
-      </div>
+      </Section>
     </div>
   );
 }
 
-// ─── EventGroupDetail: panel for clicking a group node ───────────────────────
-function EventGroupDetail({ eventKey, hooks, openHook }) {
-  const palette = EVENT_COLORS[eventKey] || { color: '#94a3b8', label: eventKey };
-  const isBlockable = eventKey === 'pre-tool-use';
-
+function EventGroupDetail({ eventKey, hooks, onSelectHook }) {
   return (
-    <div className="space-y-3">
-      {/* Event header */}
-      <div className="flex items-center gap-2">
-        <span
-          className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0"
-          style={{ background: palette.color }}
-        />
-        <span className="text-gray-300 text-sm font-semibold">{palette.label}</span>
-        {isBlockable && (
-          <span className="text-[9px] font-bold px-1.5 py-0.5 rounded"
-            style={{ background: '#1e40af', color: '#93c5fd', border: '1px solid #3b82f6' }}>
-            can BLOCK
-          </span>
+    <div className="space-y-5 text-sm text-[var(--color-dim)]">
+      <EventExplainer eventKey={eventKey} />
+      <Section title={`${hooks.length} ${hooks.length === 1 ? 'hook registrado' : 'hooks registrados'}`}>
+        {hooks.length === 0 ? (
+          <p className="text-xs">O morph-spec não instala nenhum hook neste evento.</p>
+        ) : (
+          <ul className="space-y-2">
+            {hooks.map((hook) => {
+              const matcher = matcherText(hook);
+              return (
+                <li key={hookKey(hook)}>
+                  <button
+                    type="button"
+                    onClick={() => onSelectHook(hookKey(hook))}
+                    className="fluid w-full rounded-xl bg-white/[0.03] px-3.5 py-2.5 text-left shadow-[inset_0_0_0_1px_var(--color-hair)] transition-colors hover:bg-white/[0.06]"
+                  >
+                    <span className="flex items-center justify-between gap-2">
+                      <span className="font-mono text-xs text-[var(--color-fg)]">{hook.name}</span>
+                      {matcher && <span className="font-mono text-xs text-[var(--color-dim)]">{matcher}</span>}
+                    </span>
+                    {hook.description && (
+                      <span className="mt-1 line-clamp-2 block text-xs leading-snug">{hook.description}</span>
+                    )}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
         )}
-      </div>
-      <p className="text-gray-500 text-xs">{hooks.length} hook{hooks.length !== 1 ? 's' : ''} registered</p>
-
-      {/* Hook list */}
-      <ul className="space-y-2">
-        {hooks.map((hook) => (
-          <li key={hook.name}>
-            <button
-              onClick={() => openHook(hook)}
-              className="w-full text-left px-3 py-2 rounded-lg border transition-colors hover:opacity-90"
-              style={{
-                background: '#111827',
-                borderColor: palette.color + '55',
-              }}
-            >
-              <p className="font-mono text-xs" style={{ color: palette.color }}>{hook.name}</p>
-              {hook.description && (
-                <p className="text-gray-400 text-[10px] mt-0.5 line-clamp-2 leading-snug">
-                  {hook.description}
-                </p>
-              )}
-            </button>
-          </li>
-        ))}
-      </ul>
+      </Section>
+    </div>
+  );
+}
+
+function ToolDetail() {
+  return (
+    <div className="space-y-3 text-sm leading-relaxed text-[var(--color-dim)]">
+      <p>
+        A chamada de ferramenta que o Claude Code faz de fato: <span className="font-mono text-[var(--color-fg)]">Bash</span>,{' '}
+        <span className="font-mono text-[var(--color-fg)]">Read</span>, <span className="font-mono text-[var(--color-fg)]">Edit</span> e as demais.
+      </p>
+      <p>
+        Os hooks de antes da ferramenta rodam primeiro e podem bloqueá-la. Os de depois rodam com o resultado em mãos e só observam.
+      </p>
     </div>
   );
 }
 
 // ─── Main Page ────────────────────────────────────────────────────────────────
+
 export default function HookInspector() {
   const { hooks } = morphData;
-  const { panel, openPanel, closePanel } = useDetailPanel();
+  const [sel, setSel] = useSelection();
+  // Event group and tool panels are local: only a hook has a shareable URL.
+  const [aside, setAside] = useState(null);
 
-  // Group hooks by event
   const hooksByEvent = useMemo(() => {
     const map = {};
-    for (const hook of hooks) {
-      if (!map[hook.event]) map[hook.event] = [];
-      map[hook.event].push(hook);
-    }
+    for (const hook of hooks) (map[hook.event] ||= []).push(hook);
     return map;
   }, [hooks]);
 
-  // Build graph
-  const { nodes, edges } = useMemo(() => buildNodesAndEdges(hooksByEvent), [hooksByEvent]);
+  const hookNames = useMemo(() => new Set(hooks.map((h) => h.name)), [hooks]);
+  const selectedHook = findHook(hooks, sel);
+  const selectedKey = selectedHook ? hookKey(selectedHook) : null;
 
-  // Open panel: click on an event group → show its hooks list
-  // From that list, user can click a hook → show hook detail
-  const openHookDetail = useCallback((hook) => {
-    const palette = EVENT_COLORS[hook.event] || { label: hook.event };
-    openPanel(`${hook.name}`, <HookDetail hook={hook} />);
-  }, [openPanel]);
+  const { nodes, edges } = useMemo(
+    () => buildNodesAndEdges(hooksByEvent, setSel, selectedKey),
+    [hooksByEvent, setSel, selectedKey]
+  );
 
   const handleNodeClick = useCallback((_event, node) => {
-    if (node.type === 'toolNode') {
-      openPanel('TOOL executes', (
-        <div className="text-gray-300 text-sm space-y-2">
-          <p>This represents the actual tool call Claude Code performs (e.g., <span className="font-mono text-blue-300">Bash</span>, <span className="font-mono text-blue-300">Read</span>, <span className="font-mono text-blue-300">Edit</span>).</p>
-          <p className="text-gray-400 text-xs">Pre-Tool-Use hooks run before this and can block execution by returning a non-empty decision. Post-Tool-Use hooks run after and receive the tool result.</p>
-        </div>
-      ));
-      return;
-    }
-    if (node.type === 'eventGroupNode') {
-      const { eventKey, hooks: hooksInGroup } = node.data;
-      const palette = EVENT_COLORS[eventKey] || { label: eventKey };
-      openPanel(
-        palette.label,
-        <EventGroupDetail eventKey={eventKey} hooks={hooksInGroup} openHook={openHookDetail} />
-      );
-    }
-  }, [openPanel, openHookDetail]);
-
-  const totalHooks = hooks.length;
-  const eventCount = Object.keys(hooksByEvent).length;
+    if (node.type === 'toolNode') setAside({ type: 'tool' });
+    else if (node.type === 'eventGroupNode') setAside({ type: 'event', key: node.data.eventKey });
+  }, []);
+
+  const closePanel = useCallback(() => {
+    if (selectedHook) setSel(null);
+    else setAside(null);
+  }, [selectedHook, setSel]);
+
+  const fileCount = hookNames.size;
+  const registered = hooks.filter((h) => h.event !== 'unregistered').length;
+  const unregistered = hooks.length - registered;
+
+  let title = '';
+  let subtitle;
+  let content = null;
+  if (selectedHook) {
+    title = selectedHook.name;
+    subtitle = [eventMeta(selectedHook.event).label, matcherText(selectedHook)].filter(Boolean).join(' · ');
+    content = <HookDetail key={selectedKey} hook={selectedHook} hookNames={hookNames} />;
+  } else if (aside?.type === 'event') {
+    title = eventMeta(aside.key).label;
+    subtitle = 'Evento do Claude Code';
+    content = <EventGroupDetail eventKey={aside.key} hooks={hooksByEvent[aside.key] || []} onSelectHook={setSel} />;
+  } else if (aside?.type === 'tool') {
+    title = 'Ferramenta';
+    subtitle = 'A chamada que os hooks cercam';
+    content = <ToolDetail />;
+  }
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Header bar */}
-      <div className="flex items-center justify-between px-5 py-3 bg-gray-900 border-b border-gray-800 flex-shrink-0">
+    <div className="flex h-full flex-col">
+      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-[var(--color-hair)] bg-[var(--color-ink)]/70 px-5 py-3 backdrop-blur">
         <div>
-          <h1 className="text-white font-bold text-base leading-tight">Hook Inspector</h1>
-          <p className="text-gray-400 text-xs mt-0.5">
-            Lifecycle timeline — {totalHooks} hooks across {eventCount} event types. Click a node to inspect.
+          <h1 className="text-base font-semibold leading-tight text-[var(--color-fg)]">Hooks</h1>
+          <p className="mt-0.5 text-sm text-[var(--color-dim)]">
+            {fileCount} {fileCount === 1 ? 'arquivo' : 'arquivos'}, {registered} {registered === 1 ? 'registro' : 'registros'} em eventos
+            {unregistered > 0 ? `, ${unregistered} não ${unregistered === 1 ? 'registrado' : 'registrados'}` : ''}. Clique num hook para ler.
           </p>
         </div>
-        <div className="flex items-center gap-3">
-          {/* Legend */}
-          <div className="flex flex-wrap gap-2">
-            {Object.entries(EVENT_COLORS).map(([key, { color, label }]) => (
-              <div key={key} className="flex items-center gap-1.5">
-                <span className="inline-block w-2.5 h-2.5 rounded-full" style={{ background: color }} />
-                <span className="text-gray-400 text-[10px] hidden lg:inline">{label}</span>
-              </div>
-            ))}
-          </div>
+        <div className="flex flex-wrap gap-x-3 gap-y-1">
+          {Object.entries(EVENTS).map(([key, { color, label }]) => (
+            <span key={key} className="flex items-center gap-1.5 text-xs text-[var(--color-dim)]">
+              <span className="inline-block h-2 w-2 rounded-full" style={{ background: color }} />
+              {label}
+            </span>
+          ))}
         </div>
       </div>
 
-      {/* Flow graph */}
-      <div className="flex-1 relative">
-        <FlowGraph
-          nodes={nodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          onNodeClick={handleNodeClick}
-          fitView
-        />
-
-        {/* Floating legend / instructions */}
-        <div className="absolute top-3 left-3 bg-gray-900/90 border border-gray-700 rounded-lg p-3 text-xs space-y-2 z-10 max-w-[200px]">
-          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-1">Flow Key</p>
-          <div className="flex items-center gap-2">
-            <span className="inline-block w-6 border-t-2 border-yellow-400 border-dashed" />
-            <span className="text-gray-400 text-[10px]">conversation loop</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="inline-block w-2 h-2 rounded" style={{ background: '#374151', border: '1.5px solid #6b7280' }} />
-            <span className="text-gray-400 text-[10px]">tool execution</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="px-1.5 py-0.5 rounded text-[8px] font-bold"
-              style={{ background: '#1e40af', color: '#93c5fd', border: '1px solid #3b82f6' }}>
-              can BLOCK
-            </span>
-            <span className="text-gray-400 text-[10px]">pre-tool only</span>
-          </div>
+      <div className="relative flex-1">
+        <FlowGraph nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={handleNodeClick} fitView />
+
+        <div className="absolute left-3 top-3 z-10 max-w-[240px] space-y-2 rounded-xl bg-[var(--color-ink)]/85 p-3 text-xs text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] backdrop-blur">
+          <p className="text-[var(--color-faint)]">Como ler</p>
+          <p>A linha de cima é a ordem de uma rodada: prompt, ferramenta, fim. A de baixo são eventos fora dessa rodada.</p>
+          <p>À direita de cada hook, as ferramentas que ele observa.</p>
           <div className="flex items-center gap-2">
-            <span className="text-gray-500 text-[10px] italic">teammate-idle</span>
-            <span className="text-gray-500 text-[10px]">= disconnected</span>
+            <span className="inline-block w-5 border-t border-dashed" style={{ borderColor: '#e0af68' }} />
+            <span>a conversa continua</span>
           </div>
         </div>
-
-        {/* Hook count badge */}
-        <div className="absolute top-3 right-3 bg-gray-900/90 border border-gray-700 rounded-lg px-3 py-1.5 text-xs text-gray-400 z-10">
-          {totalHooks} hooks · {eventCount} events
-        </div>
       </div>
 
-      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
-        {panel.content}
+      <DetailPanel open={Boolean(content)} title={title} subtitle={subtitle} onClose={closePanel}>
+        {content}
       </DetailPanel>
     </div>
   );