spec-gen-cli 1.0.0

package/src/viewer/components/FlatGraph.jsx

@@ -0,0 +1,275 @@
+import { useRef, useState, useEffect } from 'react';
+import { usePanZoom } from '../hooks/usePanZoom.js';
+import { extColor } from '../utils/constants.js';
+import { computeLayout } from '../utils/graph-helpers.js';
+
+export function FlatGraph({
+  nodes,
+  edges,
+  selectedId,
+  affectedIds,
+  focusedIds,
+  onSelect,
+  refactorOnly,
+  linkedIds,
+}) {
+  const posRef = useRef(null);
+  const prevKey = useRef(null);
+  const [, tick] = useState(0);
+  const key = nodes
+    .map((n) => n.id)
+    .sort()
+    .join('|');
+  const {
+    transform,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onWheel,
+    onMouseLeave,
+    onDblClick,
+    reset,
+    isDrag,
+  } = usePanZoom();
+
+  useEffect(() => {
+    if (key !== prevKey.current) {
+      posRef.current = computeLayout(nodes, edges);
+      prevKey.current = key;
+      tick((t) => t + 1);
+      reset();
+    }
+  }, [key]);
+
+  const pos = posRef.current || {};
+
+  const getState = (id) => {
+    if (id === selectedId) return 'selected';
+    if (affectedIds.includes(id)) return 'affected';
+    if (focusedIds.length && focusedIds.includes(id)) return 'focused';
+    if (focusedIds.length) return 'dimmed';
+    return 'default';
+  };
+
+  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'))
+          onSelect(null);
+      }}
+    >
+      <defs>
+        <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
+          <path d="M0,0 L0,5 L6,2.5z" fill="#1e2340" />
+        </marker>
+        <marker id="arr-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="arr-aff" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
+          <path d="M0,0 L0,5 L6,2.5z" fill="#f77c6a" />
+        </marker>
+        <marker id="arr-type" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
+          <path d="M0,0 L0,5 L6,2.5z" fill="#2a2f5a" />
+        </marker>
+        <filter id="glow">
+          <feGaussianBlur stdDeviation="4" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+        <filter id="glow-aff">
+          <feGaussianBlur stdDeviation="2.5" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <g transform={`translate(${transform.x},${transform.y}) scale(${transform.k})`}>
+        {/* Cluster halos */}
+        {Object.entries(
+          nodes.reduce((acc, n) => {
+            if (!acc[n.cluster.id]) acc[n.cluster.id] = { nodes: [], color: n.cluster.color };
+            acc[n.cluster.id].nodes.push(n);
+            return acc;
+          }, {})
+        ).map(([cid, { nodes: cn, color }]) => {
+          const pts = cn.map((n) => pos[n.id]).filter(Boolean);
+          if (!pts.length) return null;
+          const cx = pts.reduce((s, p) => s + p.x, 0) / pts.length;
+          const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length;
+          const r =
+            Math.max(...pts.map((p) => Math.sqrt((p.x - cx) ** 2 + (p.y - cy) ** 2)), 20) + 28;
+          return (
+            <ellipse
+              key={cid}
+              cx={cx}
+              cy={cy}
+              rx={r}
+              ry={r * 0.85}
+              fill={`${color}07`}
+              stroke={`${color}18`}
+              strokeWidth={1}
+              strokeDasharray="5 3"
+            />
+          );
+        })}
+
+        {/* Edges */}
+        {edges.map((e) => {
+          const s = pos[e.source],
+            t = pos[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,
+            nr = 18;
+          const isSel = e.source === selectedId || e.target === selectedId;
+          const isAff = affectedIds.includes(e.target) && e.source === selectedId;
+          return (
+            <line
+              key={e.id}
+              x1={s.x + nx * nr}
+              y1={s.y + ny * nr}
+              x2={t.x - nx * (nr + 5)}
+              y2={t.y - ny * (nr + 5)}
+              stroke={isSel ? '#7c6af7' : isAff ? '#f77c6a' : e.isType ? '#252a4a' : '#181c36'}
+              strokeWidth={isSel ? 1.5 : isAff ? 1.2 : 0.8}
+              strokeOpacity={isSel ? 0.9 : isAff ? 0.7 : e.isType ? 0.35 : 0.55}
+              strokeDasharray={e.isType ? '4 2' : undefined}
+              markerEnd={
+                isSel
+                  ? 'url(#arr-sel)'
+                  : isAff
+                    ? 'url(#arr-aff)'
+                    : e.isType
+                      ? 'url(#arr-type)'
+                      : 'url(#arr)'
+              }
+            />
+          );
+        })}
+
+        {/* Nodes */}
+        {nodes.map((n) => {
+          const p = pos[n.id];
+          if (!p) return null;
+          const state = getState(n.id);
+          const col = extColor(n.ext);
+          const isSel = state === 'selected';
+          const isAff = state === 'affected';
+          const isDim = state === 'dimmed';
+          const isZeroScore = refactorOnly && n.score === 0 && !linkedIds.has(n.id);
+          const r = 15 + Math.min(n.score / 14, 6);
+          const hasRef = !!n.refactor;
+          let refColor = null;
+          if (hasRef) {
+            const p = n.refactor.maxPriority || 0;
+            refColor = p >= 5 ? '#f97373' : p >= 3 ? '#fbbf24' : '#4ade80';
+          }
+
+          return (
+            <g
+              key={n.id}
+              transform={`translate(${p.x},${p.y})`}
+              onClick={() => {
+                if (!isDrag()) onSelect(n.id);
+              }}
+              style={{ cursor: 'pointer' }}
+              opacity={isDim ? 0.08 : isZeroScore ? 0.18 : 1}
+              filter={isSel ? 'url(#glow)' : isAff ? 'url(#glow-aff)' : undefined}
+            >
+              <circle
+                r={r + 4}
+                fill="none"
+                stroke={n.cluster.color}
+                strokeWidth={1}
+                strokeOpacity={isSel ? 0.5 : 0.1}
+              />
+              {hasRef && (
+                <circle
+                  r={r + 7}
+                  fill="none"
+                  stroke={refColor}
+                  strokeWidth={1.3}
+                  strokeOpacity={0.9}
+                />
+              )}
+              <circle
+                r={r}
+                fill={isSel ? `${col}1a` : isAff ? `${col}0d` : '#0b0d1e'}
+                stroke={isSel ? col : isAff ? col : '#1c2038'}
+                strokeWidth={isSel ? 2.5 : isAff ? 2 : 0.8}
+              />
+              {n.isEntry && (
+                <circle
+                  r={r + 8}
+                  fill="none"
+                  stroke={col}
+                  strokeWidth={0.7}
+                  strokeDasharray="3 2"
+                  strokeOpacity={0.28}
+                />
+              )}
+              <text
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize={7}
+                fontWeight={isSel ? 700 : 400}
+                fill={isSel ? '#fff' : isAff ? col : '#5a6090'}
+                fontFamily="'JetBrains Mono',monospace"
+                style={{ pointerEvents: 'none' }}
+              >
+                {n.label.length > 13 ? n.label.slice(0, 12) + '...' : n.label}
+              </text>
+              {n.score > 0 && (
+                <text
+                  x={r + 1}
+                  y={-r + 2}
+                  fontSize={6}
+                  fill={col}
+                  fontFamily="monospace"
+                  style={{ pointerEvents: 'none' }}
+                >
+                  {n.score}
+                </text>
+              )}
+            </g>
+          );
+        })}
+      </g>
+      <foreignObject x="8" y="8" width="52" height="20" style={{ pointerEvents: 'all' }}>
+        <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',
+          }}
+        >
+          ⌖ reset view
+        </button>
+      </foreignObject>
+    </svg>
+  );
+}

package/src/viewer/components/MicroComponents.jsx

@@ -0,0 +1,83 @@
+export function Hint({ children }) {
+  return (
+    <div style={{ fontSize: 10, color: '#2a2f4a', lineHeight: 1.8, marginTop: 4 }}>{children}</div>
+  );
+}
+
+export function SL({ children }) {
+  return (
+    <div
+      style={{
+        fontSize: 8,
+        color: '#3a3f5c',
+        letterSpacing: '0.08em',
+        marginTop: 12,
+        marginBottom: 5,
+        textTransform: 'uppercase',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function Row({ label, value }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '3px 0',
+        borderBottom: '1px solid #0e1025',
+      }}
+    >
+      <span style={{ fontSize: 9, color: '#3a4070' }}>{label}</span>
+      <span style={{ fontSize: 9, color: '#8890b0' }}>{value}</span>
+    </div>
+  );
+}
+
+export function Chip({ color, children }) {
+  return (
+    <span
+      style={{
+        fontSize: 8,
+        padding: '2px 6px',
+        borderRadius: 3,
+        background: `${color}1a`,
+        border: `1px solid ${color}45`,
+        color,
+        letterSpacing: '0.02em',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function KindBadge({ kind }) {
+  const map = {
+    class: ['#a78bfa', '#1a1060'],
+    function: ['#4ecdc4', '#00301a'],
+    interface: ['#60a5fa', '#001a30'],
+    type: ['#f472b6', '#2a0a20'],
+    enum: ['#f5c518', '#2a1a00'],
+  };
+  const [c, bg] = map[kind] || ['#64748b', '#1a1a2a'];
+  return (
+    <span
+      style={{
+        fontSize: 7,
+        padding: '1px 5px',
+        borderRadius: 3,
+        background: bg,
+        color: c,
+        minWidth: 44,
+        textAlign: 'center',
+      }}
+    >
+      {kind || '--'}
+    </span>
+  );
+}

package/src/viewer/hooks/usePanZoom.js

@@ -0,0 +1,79 @@
+import { useState, useCallback, useRef } from 'react';
+
+export function usePanZoom() {
+  const [transform, setTransform] = useState({ x: 0, y: 0, k: 1 });
+  const dragging = useRef(false);
+  const hasDragged = useRef(false);
+  const last = useRef({ x: 0, y: 0 });
+
+  const onMouseDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    dragging.current = true;
+    hasDragged.current = false;
+    last.current = { x: e.clientX, y: e.clientY };
+    e.currentTarget.style.cursor = 'grabbing';
+  }, []);
+
+  const onMouseMove = useCallback((e) => {
+    if (!dragging.current) return;
+    const dx = e.clientX - last.current.x;
+    const dy = e.clientY - last.current.y;
+    if (Math.abs(dx) > 2 || Math.abs(dy) > 2) hasDragged.current = true;
+    last.current = { x: e.clientX, y: e.clientY };
+    setTransform((t) => ({ ...t, x: t.x + dx, y: t.y + dy }));
+  }, []);
+
+  const onMouseUp = useCallback((e) => {
+    dragging.current = false;
+    e.currentTarget.style.cursor = 'grab';
+  }, []);
+
+  const onWheel = useCallback((e) => {
+    e.preventDefault();
+    const factor = e.deltaY < 0 ? 1.06 : 1 / 1.06;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    setTransform((t) => {
+      const k = Math.max(0.15, Math.min(8, t.k * factor));
+      const ratio = k / t.k;
+      return {
+        k,
+        x: cx - ratio * (cx - t.x),
+        y: cy - ratio * (cy - t.y),
+      };
+    });
+  }, []);
+
+  const onDblClick = useCallback((e) => {
+    if (e.target === e.currentTarget || e.target.tagName === 'svg') {
+      setTransform({ x: 0, y: 0, k: 1 });
+    }
+  }, []);
+
+  const onMouseLeave = useCallback((e) => {
+    dragging.current = false;
+    e.currentTarget.style.cursor = 'grab';
+  }, []);
+
+  const reset = useCallback(() => setTransform({ x: 0, y: 0, k: 1 }), []);
+
+  const panToCenter = useCallback((svgX, svgY) => {
+    setTransform((t) => ({ ...t, x: 450 - svgX * t.k, y: 270 - svgY * t.k }));
+  }, []);
+
+  const isDrag = useCallback(() => hasDragged.current, []);
+
+  return {
+    transform,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onWheel,
+    onMouseLeave,
+    onDblClick,
+    reset,
+    panToCenter,
+    isDrag,
+  };
+}

package/src/viewer/utils/constants.js

@@ -0,0 +1,47 @@
+export const CLUSTER_PALETTE = [
+  '#7c6af7',
+  '#3ecfcf',
+  '#f77c6a',
+  '#6af7a0',
+  '#f7c76a',
+  '#f76ac8',
+  '#6aaff7',
+  '#c8f76a',
+  '#f7a06a',
+  '#a0a0ff',
+  '#ff6b9d',
+  '#00d4aa',
+  '#ffb347',
+];
+
+export const EXT_COLOR = {
+  '.ts': '#4ecdc4',
+  '.tsx': '#3ecfcf',
+  '.js': '#f5c518',
+  '.jsx': '#f5a018',
+  '.css': '#a78bfa',
+  '.html': '#fb923c',
+  '.json': '#34d399',
+  '.toml': '#f472b6',
+  '.md': '#94a3b8',
+  '.yml': '#60a5fa',
+  '': '#64748b',
+};
+
+export const extColor = (ext) => EXT_COLOR[ext] || '#64748b';
+
+export const ROLE_COLOR = {
+  entry_layer:    '#4ade80',
+  orchestrator:   '#7c6af7',
+  core_utilities: '#f97316',
+  api_layer:      '#3ecfcf',
+  internal:       '#475569',
+};
+
+export const ROLE_LABEL = {
+  entry_layer:    'entry layer',
+  orchestrator:   'orchestrator',
+  core_utilities: 'core utilities',
+  api_layer:      'API layer',
+  internal:       'internal',
+};