spec-gen-cli 1.1.0 → 1.2.0

package/src/viewer/components/ArchitectureView.jsx

@@ -10,7 +10,7 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
     return new Set(graph.nodes.filter(n => focusedIds.includes(n.id)).map(n => n.cluster.id));
   }, [focusedIds, graph]);
 
-  if (!overview) return <div style={{ color: '#3a3f5c', padding: 24, fontSize: 11 }}>No graph loaded.</div>;
+  if (!overview) return <div style={{ color: 'var(--tx-ghost)', padding: 24, fontSize: 11 }}>No graph loaded.</div>;
 
   const { summary, clusters, globalEntryPoints, criticalHubs } = overview;
 
@@ -49,7 +49,7 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
         <line
           key={`${cl.id}->${toId}`}
           x1={sx} y1={sy} x2={ex} y2={ey}
-          stroke={isHov ? '#7c6af7' : '#1e2240'}
+          stroke={isHov ? 'var(--ac-primary)' : 'var(--ac-arrow)'}
           strokeWidth={isHov ? 1.5 : 1}
           markerEnd="url(#arrowhead)"
           opacity={isHov ? 1 : 0.6}
@@ -71,8 +71,8 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
             summary.cycles > 0 ? ['⚠ cycles', summary.cycles] : null,
             summary.layerViolations > 0 ? ['⚠ violations', summary.layerViolations] : null,
           ].filter(Boolean).map(([l, v]) => (
-            <div key={l} style={{ fontSize: 9, color: '#6a70a0', background: '#0e1028', borderRadius: 4, padding: '2px 8px', border: '1px solid #141830' }}>
-              <span style={{ color: l.startsWith('⚠') ? '#f97316' : '#c8cde8' }}>{v}</span> {l}
+            <div key={l} style={{ fontSize: 9, color: 'var(--tx-muted)', background: 'var(--bg-raised)', borderRadius: 4, padding: '2px 8px', border: '1px solid var(--bd-muted)' }}>
+              <span style={{ color: l.startsWith('⚠') ? '#f97316' : 'var(--tx-primary)' }}>{v}</span> {l}
             </div>
           ))}
         </div>
@@ -80,7 +80,7 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
         <svg width={SVG_W} height={SVG_H} style={{ display: 'block', minWidth: SVG_W }}>
           <defs>
             <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
-              <path d="M0,0 L0,6 L6,3 z" fill="#3a3f6c" />
+              <path d="M0,0 L0,6 L6,3 z" style={{ fill: 'var(--ac-cluster-arr)' }} />
             </marker>
           </defs>
 
@@ -102,25 +102,25 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
                 <rect
                   x={x} y={y} width={BOX_W} height={BOX_H}
                   rx={6} ry={6}
-                  fill={isHov ? '#12163a' : '#0b0e28'}
-                  stroke={isHov ? color : isDimmed ? '#0e1028' : '#1e2240'}
+                  style={{ fill: isHov ? 'var(--bg-hover)' : 'var(--bg-node)' }}
+                  stroke={isHov ? color : isDimmed ? 'var(--bg-raised)' : 'var(--ac-arrow)'}
                   strokeWidth={isHov ? 1.5 : 1}
                 />
                 <rect x={x} y={y} width={4} height={BOX_H} rx={3} ry={3} fill={color} opacity={0.8} />
-                <text x={x + 12} y={y + 18} fill="#c8cde8" fontSize={10} fontWeight="600" fontFamily="inherit">
-                  {cl.name.length > 18 ? cl.name.slice(0, 17) + '...' : cl.name}
+                <text x={x + 12} y={y + 18} style={{ fill: 'var(--tx-primary)' }} fontSize={10} fontWeight="600" fontFamily="inherit">
+                  {cl.name.length > 18 ? cl.name.slice(0, 17) + '…' : cl.name}
                 </text>
                 <text x={x + 12} y={y + 31} fill={color} fontSize={8} fontFamily="inherit" opacity={0.9}>
                   {ROLE_LABEL[cl.role] ?? cl.role}
                 </text>
-                <text x={x + 12} y={y + 44} fill="#3a4060" fontSize={8} fontFamily="inherit">
+                <text x={x + 12} y={y + 44} style={{ fill: 'var(--tx-dim)' }} fontSize={8} fontFamily="inherit">
                   {cl.fileCount} files
                   {cl.hubCount > 0 ? `  ·  ${cl.hubCount} hub${cl.hubCount > 1 ? 's' : ''}` : ''}
                   {cl.entryPointCount > 0 ? `  ·  ${cl.entryPointCount} entry` : ''}
                 </text>
                 {cl.dependsOn.length > 0 && (
-                  <text x={x + BOX_W - 6} y={y + 18} fill="#3a4060" fontSize={7} fontFamily="inherit" textAnchor="end">
-                    {'->'}{ cl.dependsOn.length}
+                  <text x={x + BOX_W - 6} y={y + 18} style={{ fill: 'var(--tx-dim)' }} fontSize={7} fontFamily="inherit" textAnchor="end">
+                    →{cl.dependsOn.length}
                   </text>
                 )}
               </g>
@@ -130,7 +130,7 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
 
         <div style={{ display: 'flex', gap: 12, marginTop: 12, flexWrap: 'wrap' }}>
           {Object.entries(ROLE_LABEL).map(([role, label]) => (
-            <div key={role} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 8, color: '#3a4060' }}>
+            <div key={role} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 8, color: 'var(--tx-dim)' }}>
               <div style={{ width: 8, height: 8, borderRadius: 2, background: ROLE_COLOR[role] }} />
               {label}
             </div>
@@ -138,7 +138,7 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
         </div>
       </div>
 
-      <div style={{ width: 220, borderLeft: '1px solid #0f1224', overflow: 'auto', padding: '12px 10px', flexShrink: 0 }}>
+      <div style={{ width: 220, borderLeft: '1px solid var(--bd-faint)', overflow: 'auto', padding: '12px 10px', flexShrink: 0 }}>
         {globalEntryPoints.length > 0 && (
           <>
             <div style={{ ...S, color: '#4ade80', fontWeight: 600, marginBottom: 6, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
@@ -146,8 +146,8 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
             </div>
             {globalEntryPoints.map((ep, i) => (
               <div key={i} style={{ marginBottom: 6 }}>
-                <div style={{ ...S, color: '#c8cde8', fontWeight: 600 }}>{ep.name}</div>
-                <div style={{ ...S, color: '#3a4060', wordBreak: 'break-all' }}>{ep.file}</div>
+                <div style={{ ...S, color: 'var(--tx-primary)', fontWeight: 600 }}>{ep.name}</div>
+                <div style={{ ...S, color: 'var(--tx-dim)', wordBreak: 'break-all' }}>{ep.file}</div>
               </div>
             ))}
           </>
@@ -160,8 +160,8 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
             </div>
             {criticalHubs.map((hub, i) => (
               <div key={i} style={{ marginBottom: 6 }}>
-                <div style={{ ...S, color: '#c8cde8', fontWeight: 600 }}>{hub.name}</div>
-                <div style={{ ...S, color: '#3a4060', wordBreak: 'break-all' }}>{hub.file}</div>
+                <div style={{ ...S, color: 'var(--tx-primary)', fontWeight: 600 }}>{hub.name}</div>
+                <div style={{ ...S, color: 'var(--tx-dim)', wordBreak: 'break-all' }}>{hub.file}</div>
                 <div style={{ ...S, color: '#f97316', opacity: 0.7 }}>fanIn {hub.fanIn}  ·  fanOut {hub.fanOut}</div>
               </div>
             ))}
@@ -169,7 +169,7 @@ export function ArchitectureView({ graph, llmCtx, focusedIds }) {
         )}
 
         {globalEntryPoints.length === 0 && criticalHubs.length === 0 && (
-          <div style={{ ...S, color: '#3a3f5c' }}>Run <code style={{ color: '#7c6af7' }}>spec-gen analyze</code> to populate call graph data.</div>
+          <div style={{ ...S, color: 'var(--tx-ghost)' }}>Run <code style={{ color: 'var(--ac-primary)' }}>spec-gen analyze</code> to populate call graph data.</div>
         )}
       </div>
     </div>

package/src/viewer/components/ChatPanel.jsx

@@ -11,9 +11,9 @@ function escapeHtml(str) {
 function renderInline(text) {
   // Escape HTML first to prevent XSS, then apply markdown formatting
   return escapeHtml(text)
-    .replace(/`([^`]+)`/g, '<code style="background:#1a1f38;padding:1px 4px;border-radius:3px;font-family:JetBrains Mono,monospace;font-size:8px;color:#c8cde8">$1</code>')
-    .replace(/\*\*([^*]+)\*\*/g, '<strong style="color:#c8cde8">$1</strong>')
-    .replace(/\*([^*]+)\*/g, '<em style="color:#9b96c8">$1</em>');
+    .replace(/`([^`]+)`/g, '<code style="background:var(--bd-muted);padding:1px 4px;border-radius:3px;font-family:JetBrains Mono,monospace;font-size:8px;color:var(--tx-primary)">$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong style="color:var(--tx-primary)">$1</strong>')
+    .replace(/\*([^*]+)\*/g, '<em style="color:var(--tx-secondary)">$1</em>');
 }
 
 function MarkdownBlock({ text }) {
@@ -34,9 +34,9 @@ function MarkdownBlock({ text }) {
       }
       elements.push(
         <pre key={i} style={{
-          background: '#0c0e22', border: '1px solid #141830', borderRadius: 4,
+          background: 'var(--bg-input)', border: '1px solid var(--bd-muted)', borderRadius: 4,
           padding: '6px 8px', margin: '4px 0', overflowX: 'auto',
-          fontSize: 8, color: '#9b96c8', fontFamily: 'JetBrains Mono,monospace', lineHeight: 1.5,
+          fontSize: 8, color: 'var(--tx-secondary)', fontFamily: 'JetBrains Mono,monospace', lineHeight: 1.5,
         }}>
           {codeLines.join('\n')}
         </pre>
@@ -49,7 +49,7 @@ function MarkdownBlock({ text }) {
     if (/^#{3,4}\s+/.test(line)) {
       const content = line.replace(/^#{3,4}\s+/, '');
       elements.push(
-        <div key={i} style={{ fontSize: 9, color: '#7c6af7', fontWeight: 600, margin: '8px 0 3px', letterSpacing: '0.04em' }}
+        <div key={i} style={{ fontSize: 9, color: 'var(--ac-primary)', fontWeight: 600, margin: '8px 0 3px', letterSpacing: '0.04em' }}
           dangerouslySetInnerHTML={{ __html: renderInline(content) }} />
       );
       i++;
@@ -60,7 +60,7 @@ function MarkdownBlock({ text }) {
     if (/^#{1,2}\s+/.test(line)) {
       const content = line.replace(/^#{1,2}\s+/, '');
       elements.push(
-        <div key={i} style={{ fontSize: 10, color: '#c8cde8', fontWeight: 700, margin: '10px 0 4px' }}
+        <div key={i} style={{ fontSize: 10, color: 'var(--tx-primary)', fontWeight: 700, margin: '10px 0 4px' }}
           dangerouslySetInnerHTML={{ __html: renderInline(content) }} />
       );
       i++;
@@ -77,8 +77,8 @@ function MarkdownBlock({ text }) {
       elements.push(
         <ul key={i} style={{ margin: '3px 0', paddingLeft: 14, listStyle: 'none' }}>
           {items.map((item, j) => (
-            <li key={j} style={{ fontSize: 9, color: '#9b96c8', lineHeight: 1.6, position: 'relative', paddingLeft: 8 }}>
-              <span style={{ position: 'absolute', left: 0, color: '#7c6af7' }}>·</span>
+            <li key={j} style={{ fontSize: 9, color: 'var(--tx-secondary)', lineHeight: 1.6, position: 'relative', paddingLeft: 8 }}>
+              <span style={{ position: 'absolute', left: 0, color: 'var(--ac-primary)' }}>·</span>
               <span dangerouslySetInnerHTML={{ __html: renderInline(item) }} />
             </li>
           ))}
@@ -98,8 +98,8 @@ function MarkdownBlock({ text }) {
       elements.push(
         <ol key={i} style={{ margin: '3px 0', paddingLeft: 0, listStyle: 'none' }}>
           {items.map((item, j) => (
-            <li key={j} style={{ fontSize: 9, color: '#9b96c8', lineHeight: 1.6, display: 'flex', gap: 5, margin: '1px 0' }}>
-              <span style={{ color: '#7c6af7', flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>{item.num}.</span>
+            <li key={j} style={{ fontSize: 9, color: 'var(--tx-secondary)', lineHeight: 1.6, display: 'flex', gap: 5, margin: '1px 0' }}>
+              <span style={{ color: 'var(--ac-primary)', flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>{item.num}.</span>
               <span dangerouslySetInnerHTML={{ __html: renderInline(item.text) }} />
             </li>
           ))}
@@ -110,7 +110,7 @@ function MarkdownBlock({ text }) {
 
     // Horizontal rule
     if (/^---+$/.test(line.trim())) {
-      elements.push(<hr key={i} style={{ border: 'none', borderTop: '1px solid #141830', margin: '6px 0' }} />);
+      elements.push(<hr key={i} style={{ border: 'none', borderTop: '1px solid var(--bd-muted)', margin: '6px 0' }} />);
       i++;
       continue;
     }
@@ -124,7 +124,7 @@ function MarkdownBlock({ text }) {
 
     // Plain paragraph
     elements.push(
-      <div key={i} style={{ fontSize: 9, color: '#9b96c8', lineHeight: 1.6 }}
+      <div key={i} style={{ fontSize: 9, color: 'var(--tx-secondary)', lineHeight: 1.6 }}
         dangerouslySetInnerHTML={{ __html: renderInline(line) }} />
     );
     i++;
@@ -144,7 +144,7 @@ function ToolSpinner() {
     const id = setInterval(() => setFrame((f) => (f + 1) % frames.length), 80);
     return () => clearInterval(id);
   }, []);
-  return <span style={{ color: '#7c6af7', fontFamily: 'monospace', fontSize: 10, lineHeight: 1 }}>{frames[frame]}</span>;
+  return <span style={{ color: 'var(--ac-primary)', fontFamily: 'monospace', fontSize: 10, lineHeight: 1 }}>{frames[frame]}</span>;
 }
 
 // ============================================================================
@@ -270,8 +270,8 @@ export function ChatPanel({ onHighlight, onClose }) {
     <div
       style={{
         width: 340,
-        borderLeft: '1px solid #0f1224',
-        background: '#080b1e',
+        borderLeft: '1px solid var(--bd-faint)',
+        background: 'var(--bg-deep)',
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
@@ -284,22 +284,22 @@ export function ChatPanel({ onHighlight, onClose }) {
           display: 'flex',
           flexDirection: 'column',
           padding: '6px 10px',
-          borderBottom: '1px solid #0f1224',
+          borderBottom: '1px solid var(--bd-faint)',
           flexShrink: 0,
           gap: 5,
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <span style={{ fontSize: 9, color: '#7c6af7', letterSpacing: '0.1em', fontFamily: 'inherit' }}>
-            DIAGRAM CHAT
+          <span style={{ fontSize: 9, color: 'var(--ac-primary)', letterSpacing: '0.1em', fontFamily: 'inherit' }}>
+            ✦ DIAGRAM CHAT
           </span>
           <div style={{ display: 'flex', gap: 6 }}>
           <button
             onClick={clear}
             title="Clear conversation"
             style={{
-              background: 'none', border: '1px solid #1a1f38', borderRadius: 3,
-              color: '#3a3f5c', fontSize: 8, padding: '2px 6px', cursor: 'pointer', fontFamily: 'inherit',
+              background: 'none', border: '1px solid var(--bd-muted)', borderRadius: 3,
+              color: 'var(--tx-ghost)', fontSize: 8, padding: '2px 6px', cursor: 'pointer', fontFamily: 'inherit',
             }}
           >
             CLEAR
@@ -308,8 +308,8 @@ export function ChatPanel({ onHighlight, onClose }) {
             onClick={onClose}
             title="Close chat"
             style={{
-              background: 'none', border: '1px solid #1a1f38', borderRadius: 3,
-              color: '#3a3f5c', fontSize: 10, padding: '2px 6px', cursor: 'pointer', fontFamily: 'inherit', lineHeight: 1,
+              background: 'none', border: '1px solid var(--bd-muted)', borderRadius: 3,
+              color: 'var(--tx-ghost)', fontSize: 10, padding: '2px 6px', cursor: 'pointer', fontFamily: 'inherit', lineHeight: 1,
             }}
           >
             x
@@ -319,15 +319,15 @@ export function ChatPanel({ onHighlight, onClose }) {
         {/* Model selector */}
         {modelInfo && (
           <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-            <span style={{ fontSize: 8, color: '#3a3f5c', letterSpacing: '0.06em', flexShrink: 0 }}>
+            <span style={{ fontSize: 8, color: 'var(--tx-ghost)', letterSpacing: '0.06em', flexShrink: 0 }}>
               {modelInfo.provider.toUpperCase()}
             </span>
             <select
               value={modelInfo.currentModel}
               onChange={(e) => setModelInfo((prev) => ({ ...prev, currentModel: e.target.value }))}
               style={{
-                flex: 1, background: '#0c0e22', border: '1px solid #2a2f4c', borderRadius: 3,
-                color: '#9b96c8', fontSize: 8, padding: '2px 4px', fontFamily: 'inherit',
+                flex: 1, background: 'var(--bg-input)', border: '1px solid var(--bd-muted)', borderRadius: 3,
+                color: 'var(--tx-secondary)', fontSize: 8, padding: '2px 4px', fontFamily: 'inherit',
                 cursor: 'pointer', outline: 'none',
               }}
             >
@@ -353,15 +353,15 @@ export function ChatPanel({ onHighlight, onClose }) {
           <div key={i} style={{ alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start', maxWidth: '96%' }}>
             <div
               style={{
-                background: m.role === 'user' ? '#141830' : '#0c0e22',
-                border: `1px solid ${m.role === 'user' ? '#1a1f38' : '#0f1224'}`,
+                background: m.role === 'user' ? 'var(--bg-hover)' : 'var(--bg-input)',
+                border: `1px solid ${m.role === 'user' ? 'var(--bd-muted)' : 'var(--bd-faint)'}`,
                 borderRadius: m.role === 'user' ? '8px 8px 2px 8px' : '8px 8px 8px 2px',
                 padding: '6px 10px',
                 fontFamily: 'inherit',
               }}
             >
               {m.role === 'user' ? (
-                <div style={{ fontSize: 9, color: '#c8cde8', lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
+                <div style={{ fontSize: 9, color: 'var(--tx-primary)', lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
                   {m.content}
                 </div>
               ) : (
@@ -374,8 +374,8 @@ export function ChatPanel({ onHighlight, onClose }) {
         {loading && (
           <div style={{ alignSelf: 'flex-start' }}>
             <div style={{
-              fontSize: 9, color: '#7c6af7', background: '#0c0e22',
-              border: '1px solid #0f1224', borderRadius: '8px 8px 8px 2px',
+              fontSize: 9, color: 'var(--ac-primary)', background: 'var(--bg-input)',
+              border: '1px solid var(--bd-faint)', borderRadius: '8px 8px 8px 2px',
               padding: '6px 10px', fontFamily: 'inherit',
               display: 'flex', flexDirection: 'column', gap: 4,
             }}>
@@ -385,7 +385,7 @@ export function ChatPanel({ onHighlight, onClose }) {
                 activeTools.map((name, i) => (
                   <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                     <ToolSpinner />
-                    <span style={{ color: '#9b96c8' }}>{name.replace(/_/g, ' ')}</span>
+                    <span style={{ color: 'var(--tx-secondary)' }}>{name.replace(/_/g, ' ')}</span>
                   </div>
                 ))
               )}
@@ -395,8 +395,8 @@ export function ChatPanel({ onHighlight, onClose }) {
 
         {error && (
           <div style={{
-            fontSize: 9, color: '#f87171', background: '#1a0a0a',
-            border: '1px solid #3a1a1a', borderRadius: 4,
+            fontSize: 9, color: 'var(--tx-primary)', background: 'rgba(192,57,43,0.10)',
+            border: '1px solid rgba(192,57,43,0.35)', borderRadius: 4,
             padding: '5px 8px', fontFamily: 'inherit',
           }}>
             Error: {error}
@@ -409,7 +409,7 @@ export function ChatPanel({ onHighlight, onClose }) {
       {/* Input area */}
       <div
         style={{
-          borderTop: '1px solid #0f1224', padding: '8px 10px',
+          borderTop: '1px solid var(--bd-faint)', padding: '8px 10px',
           display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0,
         }}
       >
@@ -420,8 +420,8 @@ export function ChatPanel({ onHighlight, onClose }) {
           placeholder="Ask about the codebase... (Enter to send, Shift+Enter for newline)"
           rows={3}
           style={{
-            background: '#0c0e22', border: '1px solid #141830', borderRadius: 4,
-            color: '#c8cde8', fontSize: 9, padding: '6px 8px',
+            background: 'var(--bg-input)', border: '1px solid var(--bd-muted)', borderRadius: 4,
+            color: 'var(--tx-primary)', fontSize: 9, padding: '6px 8px',
             resize: 'none', outline: 'none', fontFamily: 'inherit', lineHeight: 1.4,
           }}
         />
@@ -430,10 +430,10 @@ export function ChatPanel({ onHighlight, onClose }) {
             onClick={send}
             disabled={!input.trim() || loading}
             style={{
-              background: input.trim() && !loading ? '#1a1050' : 'transparent',
-              border: `1px solid ${input.trim() && !loading ? '#7c6af7' : '#1a1f38'}`,
+              background: input.trim() && !loading ? 'var(--bg-select)' : 'transparent',
+              border: `1px solid ${input.trim() && !loading ? 'var(--ac-primary)' : 'var(--bd-muted)'}`,
               borderRadius: 4,
-              color: input.trim() && !loading ? '#c8cde8' : '#3a3f5c',
+              color: input.trim() && !loading ? 'var(--tx-primary)' : 'var(--tx-ghost)',
               fontSize: 8, padding: '4px 12px',
               cursor: input.trim() && !loading ? 'pointer' : 'default',
               fontFamily: 'inherit', letterSpacing: '0.06em',

package/src/viewer/components/ClusterGraph.jsx

@@ -17,6 +17,7 @@ export function ClusterGraph({
   affectedIds,
   linkedIds,
   focusedIds,
+  noGlow,
 }) {
   const clusterPos = useMemo(
     () => computeClusterLayout(clusters),
@@ -112,13 +113,13 @@ export function ClusterGraph({
     >
       <defs>
         <marker id="carr" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
-          <path d="M0,0 L0,5 L6,2.5z" fill="#2a3060" />
+          <path d="M0,0 L0,5 L6,2.5z" style={{ fill: 'var(--ac-cluster-arr)' }} />
         </marker>
         <marker id="carr-sel" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
-          <path d="M0,0 L0,5 L6,2.5z" fill="#7c6af7" />
+          <path d="M0,0 L0,5 L6,2.5z" style={{ fill: 'var(--ac-primary)' }} />
         </marker>
         <marker id="carr-in" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
-          <path d="M0,0 L0,5 L6,2.5z" fill="#3ecfcf" />
+          <path d="M0,0 L0,5 L6,2.5z" style={{ fill: 'var(--ac-teal)' }} />
         </marker>
         <filter id="cglow">
           <feGaussianBlur stdDeviation="6" result="b" />
@@ -139,7 +140,11 @@ export function ClusterGraph({
       <g transform={`translate(${transform.x},${transform.y}) scale(${transform.k})`}>
         {/* Inter-cluster edges */}
         {!selectedId &&
-          clusterEdges.map((e) => {
+          (() => {
+            const focusedClusterIds = focusedIds?.length > 0
+              ? new Set(nodes.filter((n) => focusedIds.includes(n.id)).map((n) => n.cluster.id))
+              : null;
+            return clusterEdges.map((e) => {
             const s = clusterPos[e.source],
               t = clusterPos[e.target];
             if (!s || !t) return null;
@@ -151,6 +156,8 @@ export function ClusterGraph({
             const rs = 38,
               rt = 38;
             const w = Math.min(1 + e.count * 0.15, 4);
+            const isDimEdge = focusedClusterIds &&
+              !focusedClusterIds.has(e.source) && !focusedClusterIds.has(e.target);
             return (
               <g key={e.id}>
                 <line
@@ -158,9 +165,9 @@ export function ClusterGraph({
                   y1={s.y + ny * rs}
                   x2={t.x - nx * (rt + 5)}
                   y2={t.y - ny * (rt + 5)}
-                  stroke="#1e2448"
+                  stroke="var(--ac-arrow)"
                   strokeWidth={w}
-                  strokeOpacity={0.5}
+                  strokeOpacity={isDimEdge ? 0.06 : 0.5}
                   markerEnd="url(#carr)"
                 />
                 <text
@@ -168,15 +175,15 @@ export function ClusterGraph({
                   y={(s.y + ny * rs + t.y - ny * (rt + 5)) / 2 - 4}
                   textAnchor="middle"
                   fontSize={7}
-                  fill="#2a3060"
                   fontFamily="'JetBrains Mono',monospace"
-                  style={{ pointerEvents: 'none' }}
+                  style={{ pointerEvents: 'none', fill: 'var(--ac-cluster-arr)' }}
                 >
                   {e.count}
                 </text>
               </g>
             );
-          })}
+          });
+          })()}
 
         {/* Node-level edges when a node is selected */}
         {selectedId &&
@@ -208,7 +215,7 @@ export function ClusterGraph({
                     y1={sp.y + ny * 14}
                     x2={tp.x - nx * 19}
                     y2={tp.y - ny * 19}
-                    stroke={isOut ? '#7c6af7' : '#3ecfcf'}
+                    stroke={isOut ? 'var(--ac-primary)' : 'var(--ac-teal)'}
                     strokeWidth={1.5}
                     strokeOpacity={0.9}
                     strokeDasharray={e.isType ? '4 2' : undefined}
@@ -239,6 +246,9 @@ export function ClusterGraph({
                 const nx = dx / len,
                   ny = dy / len,
                   r = 13;
+                const isSel = e.source === selectedId || e.target === selectedId;
+                const isDimEdge = focusedIds?.length > 0 && !isSel &&
+                  !focusedIds.includes(e.source) && !focusedIds.includes(e.target);
                 return (
                   <line
                     key={e.id}
@@ -248,7 +258,7 @@ export function ClusterGraph({
                     y2={t.y - ny * (r + 4)}
                     stroke={cl.color}
                     strokeWidth={0.8}
-                    strokeOpacity={0.45}
+                    strokeOpacity={isDimEdge ? 0.06 : 0.45}
                     strokeDasharray={e.isType ? '3 2' : undefined}
                     markerEnd="url(#carr)"
                   />
@@ -278,7 +288,7 @@ export function ClusterGraph({
                    linkedIds.size > 0 && allMembers.some((n) => linkedIds.has(n.id));
                  const hasFocused = focusedIds?.length > 0;
                  const clusterFocused = hasFocused && allMembers.some((n) => focusedIds.includes(n.id));
-                 const isClusterGreyed = 
+                 const isClusterGreyed =
                    (hasFocused && !clusterFocused && !clusterLinked) ||
                    (!hasFocused && visibleMembers.length === 0 && !clusterLinked);
                 const isLinkedCollapsed = clusterLinked && !isExpanded;
@@ -290,10 +300,11 @@ export function ClusterGraph({
                     }}
                     style={{ cursor: 'pointer' }}
                     filter={
-                      isExpanded ? 'url(#cglow)' : isLinkedCollapsed ? 'url(#cglow)' : undefined
+                      noGlow ? undefined : isExpanded ? 'url(#cglow)' : isLinkedCollapsed ? 'url(#cglow)' : undefined
                     }
                     opacity={isClusterGreyed ? 0.18 : 1}
                   >
+                    <title>{cl.name} — {allMembers.length} file{allMembers.length !== 1 ? 's' : ''}</title>
                     <circle
                       r={r}
                       fill={isLinkedCollapsed ? `${cl.color}18` : `${cl.color}10`}
@@ -371,12 +382,13 @@ export function ClusterGraph({
                         if (!isDrag()) onSelectNode(n.id);
                       }}
                       style={{ cursor: 'pointer' }}
-                      filter={isSel ? 'url(#nglow)' : undefined}
+                      filter={noGlow ? undefined : isSel ? 'url(#nglow)' : undefined}
                       opacity={isGreyed ? 0.18 : 1}
                     >
+                      <title>{n.label}{n.path ? `\n${n.path}` : ''}</title>
                       <circle
                         r={13}
-                        fill={isSel ? `${col}1a` : '#0b0d1e'}
+                        fill={isSel ? `${col}1a` : 'var(--bg-node)'}
                         stroke={isSel ? col : isAff ? col : cl.color}
                         strokeWidth={isSel ? 2 : 0.8}
                         strokeOpacity={isSel ? 1 : isAff ? 0.9 : 0.45}
@@ -385,7 +397,7 @@ export function ClusterGraph({
                         textAnchor="middle"
                         dominantBaseline="middle"
                         fontSize={6}
-                        fill={isSel ? '#fff' : '#5a6090'}
+                        fill={isSel ? 'var(--tx-node-sel)' : 'var(--tx-node)'}
                         fontFamily="'JetBrains Mono',monospace"
                         style={{ pointerEvents: 'none' }}
                       >
@@ -406,10 +418,10 @@ export function ClusterGraph({
             style={{
               fontSize: 8,
               padding: '2px 6px',
-              background: '#0d0f22',
-              border: `1px solid ${transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? '#7c6af7' : '#1a1f38'}`,
+              background: 'var(--bg-input)',
+              border: `1px solid ${transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? 'var(--ac-primary)' : 'var(--bd-muted)'}`,
               borderRadius: 4,
-              color: transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? '#7c6af7' : '#2a2f4a',
+              color: transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? 'var(--ac-primary)' : 'var(--tx-faint)',
               cursor: 'pointer',
               fontFamily: "'JetBrains Mono',monospace",
               letterSpacing: '0.05em',
@@ -423,10 +435,10 @@ export function ClusterGraph({
             style={{
               fontSize: 8,
               padding: '2px 6px',
-              background: '#0d0f22',
-              border: `1px solid ${hasSelection ? '#7c6af7' : '#1a1f38'}`,
+              background: 'var(--bg-input)',
+              border: `1px solid ${hasSelection ? 'var(--ac-primary)' : 'var(--bd-muted)'}`,
               borderRadius: 4,
-              color: hasSelection ? '#7c6af7' : '#2a2f4a',
+              color: hasSelection ? 'var(--ac-primary)' : 'var(--tx-faint)',
               cursor: hasSelection ? 'pointer' : 'default',
               fontFamily: "'JetBrains Mono',monospace",
               letterSpacing: '0.05em',