feat: Improve visualizer graph quality and UI

- Bridge pass: connect isolated seed nodes that share callees
- Kind labels on nodes (fn, class, comp, etc.) for quick identification
- Quick action buttons in detail panel (Expand Callees, Callers, Call Graph, Impact)
- Wider detail panel (460px) for better code readability
- Multiline node labels showing name + kind

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/visualizer/public/index.html

@@ -42,7 +42,7 @@
       --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
       --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
       --sidebar-width: 320px;
-      --panel-width: 420px;
+      --panel-width: 460px;
       --header-height: 52px;
       --radius: 8px;
       --radius-sm: 6px;
@@ -991,8 +991,8 @@
               'height': 'label',
               'padding': '12px',
               'shape': 'data(shape)',
-              'text-wrap': 'none',
-              'text-max-width': '160px',
+              'text-wrap': 'wrap',
+              'text-max-width': '180px',
               'transition-property': 'background-opacity, border-color, border-opacity, opacity, text-opacity',
               'transition-duration': '0.2s',
             }
@@ -1130,16 +1130,24 @@
     // ====================================================================
     // Graph Operations
     // ====================================================================
+    const kindLabels = {
+      'function': 'fn', 'method': 'method', 'class': 'class', 'interface': 'iface',
+      'component': 'comp', 'route': 'route', 'enum': 'enum', 'type_alias': 'type',
+      'struct': 'struct', 'trait': 'trait', 'variable': 'var', 'constant': 'const',
+      'property': 'prop', 'field': 'field', 'file': 'file', 'module': 'mod',
+    };
+
     function addNodeToGraph(node) {
       if (cy.getElementById(node.id).length > 0) return;
       const color = kindColors[node.kind] || '#8b949e';
       const shape = kindShapes[node.kind] || 'round-rectangle';
+      const kindLabel = kindLabels[node.kind] || node.kind;
       cy.add({
         group: 'nodes',
         data: {
           id: node.id,
           nodeId: node.id,
-          label: node.name,
+          label: `${node.name}\n${kindLabel}`,
           color: color,
           shape: shape,
           kind: node.kind,
@@ -1541,6 +1549,16 @@
 
         let html = '';
 
+        // Quick actions
+        html += `<div class="detail-section" style="padding:8px 16px;">
+          <div style="display:flex;gap:6px;flex-wrap:wrap;">
+            <button class="toolbar-btn" onclick="expandCallees('${escapeAttr(node.id)}')" style="font-size:12px;">Expand Callees &rarr;</button>
+            <button class="toolbar-btn" onclick="expandCallers('${escapeAttr(node.id)}')" style="font-size:12px;">&larr; Expand Callers</button>
+            <button class="toolbar-btn" onclick="loadCallGraph('${escapeAttr(node.id)}')" style="font-size:12px;">Full Call Graph</button>
+            <button class="toolbar-btn" onclick="loadImpact('${escapeAttr(node.id)}')" style="font-size:12px;">Impact Analysis</button>
+          </div>
+        </div>`;
+
         // Meta info
         html += `<div class="detail-section">
           <div class="detail-section-title">Info</div>