spec-gen-cli 1.0.0

package/src/viewer/components/ClusterGraph.jsx

@@ -0,0 +1,441 @@
+import { useMemo, useRef, useEffect } from 'react';
+import { usePanZoom } from '../hooks/usePanZoom.js';
+import { extColor } from '../utils/constants.js';
+import { computeClusterLayout } from '../utils/graph-helpers.js';
+
+export function ClusterGraph({
+  clusters,
+  edges,
+  nodes,
+  allNodes,
+  expandedClusters,
+  onToggle,
+  onSelectNode,
+  onClear,
+  hasSelection,
+  selectedId,
+  affectedIds,
+  linkedIds,
+  focusedIds,
+}) {
+  const clusterPos = useMemo(
+    () => computeClusterLayout(clusters),
+    [clusters.map((c) => c.id).join()]
+  );
+  const visibleIds = useMemo(() => new Set(nodes.map((n) => n.id)), [nodes]);
+  const {
+    transform,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onWheel,
+    onMouseLeave,
+    onDblClick,
+    reset,
+    panToCenter,
+    isDrag,
+  } = usePanZoom();
+
+  const clusterKey = clusters.map((c) => c.id).join('|');
+  useEffect(() => {
+    reset();
+  }, [clusterKey]);
+
+  const prevExpandedRef = useRef(new Set());
+  useEffect(() => {
+    for (const cid of expandedClusters) {
+      if (prevExpandedRef.current.has(cid)) continue;
+      const cp = clusterPos[cid];
+      if (!cp) continue;
+      const members = (allNodes || nodes).filter((n) => n.cluster.id === cid);
+      const r = 55 + members.length * 9 + 20;
+      const { k, x: tx, y: ty } = transform;
+      const inView =
+        (cp.x - r) * k + tx >= 0 &&
+        (cp.x + r) * k + tx <= 900 &&
+        (cp.y - r) * k + ty >= 0 &&
+        (cp.y + r) * k + ty <= 540;
+      if (!inView) {
+        panToCenter(cp.x, cp.y);
+      }
+    }
+    prevExpandedRef.current = new Set(expandedClusters);
+  }, [expandedClusters]);
+
+  const nodeLayouts = useMemo(() => {
+    const layouts = {};
+    clusters.forEach((cl) => {
+      if (!expandedClusters.has(cl.id)) return;
+      const members = (allNodes || nodes).filter((n) => n.cluster.id === cl.id);
+      const cp = clusterPos[cl.id];
+      if (!cp) return;
+      const r = 55 + members.length * 9;
+      const layout = {};
+      members.forEach((n, i) => {
+        const a = (i / Math.max(members.length, 1)) * Math.PI * 2 - Math.PI / 2;
+        layout[n.id] = { x: cp.x + Math.cos(a) * r, y: cp.y + Math.sin(a) * r };
+      });
+      layouts[cl.id] = layout;
+    });
+    return layouts;
+  }, [clusters, expandedClusters, allNodes, nodes, clusterPos]);
+
+  const clusterEdges = useMemo(() => {
+    const counts = {};
+    edges.forEach((e) => {
+      const sn = nodes.find((n) => n.id === e.source);
+      const tn = nodes.find((n) => n.id === e.target);
+      if (!sn || !tn || sn.cluster.id === tn.cluster.id) return;
+      const key = `${sn.cluster.id}->${tn.cluster.id}`;
+      counts[key] = (counts[key] || 0) + 1;
+    });
+    return Object.entries(counts).map(([key, count]) => {
+      const [sc, tc] = key.split('->');
+      return { id: key, source: sc, target: tc, count };
+    });
+  }, [edges, nodes]);
+
+  return (
+    <svg
+      viewBox="0 0 900 540"
+      style={{ width: '100%', height: '100%', cursor: 'grab' }}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+      onMouseLeave={onMouseLeave}
+      onWheel={onWheel}
+      onDoubleClick={onDblClick}
+      onClick={(e) => {
+        if (!isDrag() && (e.target === e.currentTarget || e.target.tagName === 'svg'))
+          onSelectNode(null);
+      }}
+    >
+      <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" />
+        </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" />
+        </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" />
+        </marker>
+        <filter id="cglow">
+          <feGaussianBlur stdDeviation="6" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+        <filter id="nglow">
+          <feGaussianBlur stdDeviation="3" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <g transform={`translate(${transform.x},${transform.y}) scale(${transform.k})`}>
+        {/* Inter-cluster edges */}
+        {!selectedId &&
+          clusterEdges.map((e) => {
+            const s = clusterPos[e.source],
+              t = clusterPos[e.target];
+            if (!s || !t) return null;
+            const dx = t.x - s.x,
+              dy = t.y - s.y,
+              len = Math.sqrt(dx * dx + dy * dy) || 1;
+            const nx = dx / len,
+              ny = dy / len;
+            const rs = 38,
+              rt = 38;
+            const w = Math.min(1 + e.count * 0.15, 4);
+            return (
+              <g key={e.id}>
+                <line
+                  x1={s.x + nx * rs}
+                  y1={s.y + ny * rs}
+                  x2={t.x - nx * (rt + 5)}
+                  y2={t.y - ny * (rt + 5)}
+                  stroke="#1e2448"
+                  strokeWidth={w}
+                  strokeOpacity={0.5}
+                  markerEnd="url(#carr)"
+                />
+                <text
+                  x={(s.x + nx * rs + t.x - nx * (rt + 5)) / 2}
+                  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' }}
+                >
+                  {e.count}
+                </text>
+              </g>
+            );
+          })}
+
+        {/* Node-level edges when a node is selected */}
+        {selectedId &&
+          (() => {
+            const getNodePos = (nid) => {
+              const n = (allNodes || nodes).find((x) => x.id === nid);
+              if (!n) return null;
+              const clId = n.cluster.id;
+              if (nodeLayouts[clId]?.[nid]) return nodeLayouts[clId][nid];
+              return clusterPos[clId] || null;
+            };
+
+            return edges
+              .filter((e) => e.source === selectedId || e.target === selectedId)
+              .map((e, i) => {
+                const sp = getNodePos(e.source);
+                const tp = getNodePos(e.target);
+                if (!sp || !tp) return null;
+                const dx = tp.x - sp.x,
+                  dy = tp.y - sp.y,
+                  len = Math.sqrt(dx * dx + dy * dy) || 1;
+                const nx = dx / len,
+                  ny = dy / len;
+                const isOut = e.source === selectedId;
+                return (
+                  <line
+                    key={i}
+                    x1={sp.x + nx * 14}
+                    y1={sp.y + ny * 14}
+                    x2={tp.x - nx * 19}
+                    y2={tp.y - ny * 19}
+                    stroke={isOut ? '#7c6af7' : '#3ecfcf'}
+                    strokeWidth={1.5}
+                    strokeOpacity={0.9}
+                    strokeDasharray={e.isType ? '4 2' : undefined}
+                    markerEnd={isOut ? 'url(#carr-sel)' : 'url(#carr-in)'}
+                  />
+                );
+              });
+          })()}
+
+        {/* Intra-cluster edges (expanded) */}
+        {clusters
+          .filter((cl) => expandedClusters.has(cl.id))
+          .map((cl) => {
+            const layout = nodeLayouts[cl.id] || {};
+            return edges
+              .filter((e) => {
+                const sn = nodes.find((n) => n.id === e.source);
+                const tn = nodes.find((n) => n.id === e.target);
+                return sn?.cluster.id === cl.id && tn?.cluster.id === cl.id;
+              })
+              .map((e) => {
+                const s = layout[e.source],
+                  t = layout[e.target];
+                if (!s || !t) return null;
+                const dx = t.x - s.x,
+                  dy = t.y - s.y,
+                  len = Math.sqrt(dx * dx + dy * dy) || 1;
+                const nx = dx / len,
+                  ny = dy / len,
+                  r = 13;
+                return (
+                  <line
+                    key={e.id}
+                    x1={s.x + nx * r}
+                    y1={s.y + ny * r}
+                    x2={t.x - nx * (r + 4)}
+                    y2={t.y - ny * (r + 4)}
+                    stroke={cl.color}
+                    strokeWidth={0.8}
+                    strokeOpacity={0.45}
+                    strokeDasharray={e.isType ? '3 2' : undefined}
+                    markerEnd="url(#carr)"
+                  />
+                );
+              });
+          })}
+
+        {/* Cluster bubbles */}
+        {clusters.map((cl) => {
+          const p = clusterPos[cl.id];
+          if (!p) return null;
+          const allMembers = (allNodes || nodes).filter((n) => n.cluster.id === cl.id);
+          const visibleMembers = allMembers.filter((n) => visibleIds.has(n.id));
+          const isExpanded = expandedClusters.has(cl.id);
+          const r = 32 + Math.min(allMembers.length * 1.4, 18);
+          const inDeg = clusterEdges
+            .filter((e) => e.target === cl.id)
+            .reduce((s, e) => s + e.count, 0);
+          const outDeg = clusterEdges
+            .filter((e) => e.source === cl.id)
+            .reduce((s, e) => s + e.count, 0);
+
+          return (
+            <g key={cl.id}>
+              {(() => {
+                 const clusterLinked =
+                   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 = 
+                   (hasFocused && !clusterFocused && !clusterLinked) ||
+                   (!hasFocused && visibleMembers.length === 0 && !clusterLinked);
+                const isLinkedCollapsed = clusterLinked && !isExpanded;
+                return (
+                  <g
+                    transform={`translate(${p.x},${p.y})`}
+                    onClick={() => {
+                      if (!isDrag()) onToggle(cl.id);
+                    }}
+                    style={{ cursor: 'pointer' }}
+                    filter={
+                      isExpanded ? 'url(#cglow)' : isLinkedCollapsed ? 'url(#cglow)' : undefined
+                    }
+                    opacity={isClusterGreyed ? 0.18 : 1}
+                  >
+                    <circle
+                      r={r}
+                      fill={isLinkedCollapsed ? `${cl.color}18` : `${cl.color}10`}
+                      stroke={cl.color}
+                      strokeWidth={isExpanded ? 1.8 : isLinkedCollapsed ? 1.5 : 1}
+                      strokeOpacity={isExpanded ? 0.85 : isLinkedCollapsed ? 0.7 : 0.35}
+                    />
+                    <text
+                      textAnchor="middle"
+                      y={-10}
+                      fontSize={8.5}
+                      fontWeight={700}
+                      fill={cl.color}
+                      fontFamily="'JetBrains Mono',monospace"
+                      style={{ pointerEvents: 'none' }}
+                    >
+                      {cl.name.split('/').pop()}
+                    </text>
+                    <text
+                      textAnchor="middle"
+                      y={3}
+                      fontSize={7}
+                      fill={`${cl.color}90`}
+                      fontFamily="'JetBrains Mono',monospace"
+                      style={{ pointerEvents: 'none' }}
+                    >
+                      {visibleMembers.length}/{allMembers.length} files
+                    </text>
+                    <text
+                      textAnchor="middle"
+                      y={14}
+                      fontSize={6.5}
+                      fill={`${cl.color}60`}
+                      fontFamily="'JetBrains Mono',monospace"
+                      style={{ pointerEvents: 'none' }}
+                    >
+                      ↙{inDeg} ↗{outDeg}
+                    </text>
+                    <text
+                      textAnchor="middle"
+                      y={r - 8}
+                      fontSize={9}
+                      fill={`${cl.color}80`}
+                      fontFamily="'JetBrains Mono',monospace"
+                      style={{ pointerEvents: 'none' }}
+                    >
+                      {isExpanded ? '▲' : '▼'}
+                    </text>
+                  </g>
+                );
+              })()}
+
+              {/* Member nodes */}
+              {isExpanded &&
+                allMembers.map((n) => {
+                  const np = nodeLayouts[cl.id]?.[n.id];
+                  if (!np) return null;
+                   const isSel = n.id === selectedId;
+                   const isAff = affectedIds.includes(n.id);
+                   const col = extColor(n.ext);
+                   const isInFocused = focusedIds?.includes(n.id) || false;
+                   const isLinked = linkedIds.has(n.id);
+                   const hasFocused = focusedIds?.length > 0;
+                   const isVisible = visibleIds.has(n.id);
+                   const isGreyed = !isInFocused && (
+                     (hasFocused && !isLinked) ||
+                     (!hasFocused && !isVisible && !isLinked)
+                   );
+                  return (
+                    <g
+                      key={n.id}
+                      transform={`translate(${np.x},${np.y})`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (!isDrag()) onSelectNode(n.id);
+                      }}
+                      style={{ cursor: 'pointer' }}
+                      filter={isSel ? 'url(#nglow)' : undefined}
+                      opacity={isGreyed ? 0.18 : 1}
+                    >
+                      <circle
+                        r={13}
+                        fill={isSel ? `${col}1a` : '#0b0d1e'}
+                        stroke={isSel ? col : isAff ? col : cl.color}
+                        strokeWidth={isSel ? 2 : 0.8}
+                        strokeOpacity={isSel ? 1 : isAff ? 0.9 : 0.45}
+                      />
+                      <text
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                        fontSize={6}
+                        fill={isSel ? '#fff' : '#5a6090'}
+                        fontFamily="'JetBrains Mono',monospace"
+                        style={{ pointerEvents: 'none' }}
+                      >
+                        {n.label.length > 10 ? n.label.slice(0, 9) + '...' : n.label}
+                      </text>
+                    </g>
+                  );
+                })}
+            </g>
+          );
+        })}
+      </g>
+      <foreignObject x="8" y="8" width="52" height="44" style={{ pointerEvents: 'all' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          <button
+            onClick={reset}
+            title="Reset pan/zoom (or double-click background)"
+            style={{
+              fontSize: 8,
+              padding: '2px 6px',
+              background: '#0d0f22',
+              border: `1px solid ${transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? '#7c6af7' : '#1a1f38'}`,
+              borderRadius: 4,
+              color: transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? '#7c6af7' : '#2a2f4a',
+              cursor: 'pointer',
+              fontFamily: "'JetBrains Mono',monospace",
+              letterSpacing: '0.05em',
+            }}
+          >
+            ⌖ view
+          </button>
+          <button
+            onClick={onClear}
+            title="Clear selection and collapse all clusters (Escape)"
+            style={{
+              fontSize: 8,
+              padding: '2px 6px',
+              background: '#0d0f22',
+              border: `1px solid ${hasSelection ? '#7c6af7' : '#1a1f38'}`,
+              borderRadius: 4,
+              color: hasSelection ? '#7c6af7' : '#2a2f4a',
+              cursor: hasSelection ? 'pointer' : 'default',
+              fontFamily: "'JetBrains Mono',monospace",
+              letterSpacing: '0.05em',
+            }}
+          >
+            x clear
+          </button>
+        </div>
+      </foreignObject>
+    </svg>
+  );
+}

package/src/viewer/components/FilterBar.jsx

@@ -0,0 +1,179 @@
+function FToggle({ active, onChange, label, badge, activeColor = '#7c6af7' }) {
+  return (
+    <button
+      onClick={() => onChange(!active)}
+      style={{
+        background: active ? `${activeColor}1a` : 'transparent',
+        border: `1px solid ${active ? activeColor : '#1a1f38'}`,
+        borderRadius: 4,
+        color: active ? activeColor : '#3a3f5c',
+        padding: '2px 8px',
+        cursor: 'pointer',
+        fontSize: 9,
+        fontFamily: 'inherit',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+      }}
+    >
+      {label}
+      {badge !== undefined && (
+        <span
+          style={{
+            background: '#0d0f22',
+            borderRadius: 3,
+            padding: '0 4px',
+            color: '#3a3f5c',
+            fontSize: 8,
+          }}
+        >
+          {badge}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function FilterBar({ filters, setFilters, stats, clusterNames }) {
+  const hasActive =
+    filters.hideOrphans ||
+    filters.minScore > 0 ||
+    filters.topN < 999 ||
+    filters.cluster !== '' ||
+    filters.refactorOnly;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        flexWrap: 'wrap',
+        padding: '7px 18px',
+        borderBottom: '1px solid #0f1224',
+        background: '#07091a',
+        flexShrink: 0,
+        fontSize: 9,
+      }}
+    >
+      <span style={{ color: '#2a2f4a', letterSpacing: '0.08em', fontWeight: 700 }}>FILTERS</span>
+
+      <FToggle
+        active={filters.hideOrphans}
+        onChange={(v) => setFilters((f) => ({ ...f, hideOrphans: v }))}
+        label="Hide orphans"
+        badge={stats.orphanCount}
+        activeColor="#f77c6a"
+      />
+
+      <FToggle
+        active={filters.refactorOnly}
+        onChange={(v) => setFilters((f) => ({ ...f, refactorOnly: v }))}
+        label="Nodes to refactor"
+        badge={stats.refactorVisible}
+        activeColor="#f97373"
+      />
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+        <span style={{ color: '#2a2f4a' }}>{'Score >='}</span>
+        <input
+          type="range"
+          min={0}
+          max={65}
+          step={5}
+          value={filters.minScore}
+          onChange={(e) => setFilters((f) => ({ ...f, minScore: +e.target.value }))}
+          style={{ width: 72, accentColor: '#7c6af7' }}
+        />
+        <span style={{ color: '#7c6af7', minWidth: 16 }}>{filters.minScore}</span>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+        <span style={{ color: '#2a2f4a' }}>Top</span>
+        <select
+          value={filters.topN}
+          onChange={(e) => setFilters((f) => ({ ...f, topN: +e.target.value }))}
+          style={{
+            background: '#0d0f22',
+            border: '1px solid #1a1f38',
+            color: '#c8cde8',
+            borderRadius: 4,
+            padding: '2px 5px',
+            fontSize: 9,
+            fontFamily: 'inherit',
+          }}
+        >
+          {[999, 50, 30, 20, 10].map((n) => (
+            <option key={n} value={n}>
+              {n === 999 ? 'All' : String(n)}
+            </option>
+          ))}
+        </select>
+        <span style={{ color: '#2a2f4a' }}>nodes</span>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+        <span style={{ color: '#2a2f4a' }}>Cluster</span>
+        <select
+          value={filters.cluster}
+          onChange={(e) => setFilters((f) => ({ ...f, cluster: e.target.value }))}
+          style={{
+            background: '#0d0f22',
+            border: '1px solid #1a1f38',
+            color: '#c8cde8',
+            borderRadius: 4,
+            padding: '2px 5px',
+            fontSize: 9,
+            fontFamily: 'inherit',
+            maxWidth: 130,
+          }}
+        >
+          <option value="">All</option>
+          {clusterNames.map((n) => (
+            <option key={n} value={n}>
+              {n}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {hasActive && (
+        <button
+          onClick={() =>
+            setFilters({
+              hideOrphans: false,
+              minScore: 0,
+              topN: 999,
+              cluster: '',
+              refactorOnly: false,
+            })
+          }
+          style={{
+            background: 'none',
+            border: '1px solid #2a2f4a',
+            borderRadius: 4,
+            color: '#3a3f5c',
+            padding: '2px 7px',
+            cursor: 'pointer',
+            fontSize: 9,
+            fontFamily: 'inherit',
+          }}
+        >
+          reset
+        </button>
+      )}
+
+      <div style={{ marginLeft: 'auto', color: '#2a2f4a', display: 'flex', gap: 8 }}>
+        <span>
+          <span style={{ color: '#7c6af7' }}>{stats.visible}</span>/
+          <span style={{ color: '#3a4060' }}>{stats.total}</span> nodes
+        </span>
+        <span>
+          <span style={{ color: '#3ecfcf' }}>{stats.visibleEdges}</span> edges
+        </span>
+        {stats.orphanCount > 0 && !filters.hideOrphans && (
+          <span style={{ color: '#f77c6a66' }}>{stats.orphanCount} orphans</span>
+        )}
+      </div>
+    </div>
+  );
+}