@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/src/api/client_refresh.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, mock, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { ApiClient } from './client.ts';
+
+describe('ApiClient auto-refresh', () => {
+  let originalFetch: typeof globalThis.fetch;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it('retries request after successful token refresh on 401', async () => {
+    const calls: { url: string; method?: string }[] = [];
+    let callIndex = 0;
+
+    globalThis.fetch = mock.fn(async (url: any, init?: any) => {
+      calls.push({ url, method: init?.method });
+      callIndex++;
+
+      // First call: GET /api/graph → 401
+      if (callIndex === 1) {
+        return { ok: false, status: 401 } as Response;
+      }
+      // Second call: POST /api/auth/refresh → 200
+      if (callIndex === 2) {
+        return { ok: true, json: async () => ({ message: 'Token refreshed' }) } as Response;
+      }
+      // Third call: GET /api/graph retry → 200
+      if (callIndex === 3) {
+        return { ok: true, json: async () => ({ nodes: [], edges: [] }) } as Response;
+      }
+      return { ok: false, status: 500 } as Response;
+    }) as any;
+
+    const client = new ApiClient();
+    const result = await client.fetchGraph();
+
+    assert.deepEqual(result, { nodes: [], edges: [] });
+    assert.equal(calls.length, 3);
+    assert.equal(calls[0].url, '/api/graph');
+    assert.equal(calls[1].url, '/api/auth/refresh');
+    assert.equal(calls[1].method, 'POST');
+    assert.equal(calls[2].url, '/api/graph');
+  });
+
+  it('does not retry when refresh fails', async () => {
+    const calls: string[] = [];
+    let callIndex = 0;
+
+    globalThis.fetch = mock.fn(async (url: any) => {
+      calls.push(url);
+      callIndex++;
+
+      if (callIndex === 1) {
+        return { ok: false, status: 401 } as Response;
+      }
+      // Refresh fails
+      if (callIndex === 2) {
+        return { ok: false, status: 401 } as Response;
+      }
+      return { ok: true, json: async () => ({}) } as Response;
+    }) as any;
+
+    const client = new ApiClient();
+    await assert.rejects(
+      () => client.fetchGraph(),
+      (err: Error) => {
+        assert.match(err.message, /Failed to fetch graph: 401/);
+        return true;
+      },
+    );
+
+    // Only 2 calls: original + refresh attempt (no retry)
+    assert.equal(calls.length, 2);
+  });
+
+  it('does not attempt refresh for non-401 errors', async () => {
+    const calls: string[] = [];
+
+    globalThis.fetch = mock.fn(async (url: any) => {
+      calls.push(url);
+      return { ok: false, status: 500 } as Response;
+    }) as any;
+
+    const client = new ApiClient();
+    await assert.rejects(
+      () => client.fetchGraph(),
+      (err: Error) => {
+        assert.match(err.message, /Failed to fetch graph: 500/);
+        return true;
+      },
+    );
+
+    // Only 1 call — no refresh attempt
+    assert.equal(calls.length, 1);
+  });
+
+  it('deduplicates concurrent refresh attempts', async () => {
+    let callIndex = 0;
+    const refreshCalls: string[] = [];
+
+    globalThis.fetch = mock.fn(async (url: any, init?: any) => {
+      callIndex++;
+
+      if (url.includes('/api/auth/refresh')) {
+        refreshCalls.push(url);
+        return { ok: true, json: async () => ({ message: 'Token refreshed' }) } as Response;
+      }
+
+      // First two calls are 401s (concurrent requests)
+      if (callIndex <= 2) {
+        return { ok: false, status: 401 } as Response;
+      }
+
+      return { ok: true, json: async () => ({ data: 'ok' }) } as Response;
+    }) as any;
+
+    const client = new ApiClient();
+    const [result1, result2] = await Promise.all([
+      client.fetchGraph(),
+      client.fetchKanban(),
+    ]);
+
+    // Only one refresh call should have been made
+    assert.equal(refreshCalls.length, 1);
+  });
+
+  it('passes credentials: same-origin to all authenticated requests', async () => {
+    let capturedCredentials: string | undefined;
+
+    globalThis.fetch = mock.fn(async (_url: any, init?: any) => {
+      capturedCredentials = init?.credentials;
+      return { ok: true, json: async () => ({ nodes: [], edges: [] }) } as Response;
+    }) as any;
+
+    const client = new ApiClient();
+    await client.fetchGraph();
+
+    assert.equal(capturedCredentials, 'same-origin');
+  });
+});

package/templates/product-system/packages/frontend/src/components/CoherenceView.tsx

@@ -0,0 +1,414 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { apiClient } from '../api/client';
+
+const TYPE_ORDER = ['deprecate_node', 'remove_edge', 'update_description', 'add_edge', 'add_node'];
+const TYPE_LABELS: Record<string, string> = {
+  add_edge: 'Add Edge', add_node: 'Add Node', remove_edge: 'Remove Edge',
+  deprecate_node: 'Remove Node', update_description: 'Update Description',
+  edge: 'Add Edge', node: 'Add Node',
+};
+const TYPE_CSS: Record<string, string> = {
+  add_edge: 'add-edge', add_node: 'add-node', remove_edge: 'remove-edge',
+  deprecate_node: 'deprecate-node', update_description: 'update-desc',
+  edge: 'add-edge', node: 'add-node',
+};
+const CONFIDENCE_LABELS: Record<string, string> = { high: 'High', medium: 'Medium', low: 'Low' };
+
+interface CoherenceViewProps {
+  graphData: any;
+  onNodeClick: (node: any) => void;
+  projectId?: string;
+}
+
+export function CoherenceView({ graphData, onNodeClick, projectId }: CoherenceViewProps) {
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedBatches, setExpandedBatches] = useState<Set<string>>(new Set());
+  const [resolvedExpanded, setResolvedExpanded] = useState(false);
+  const [applyingIds, setApplyingIds] = useState<Set<string>>(new Set());
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await apiClient.fetchCoherence(projectId);
+      setData(result);
+      setError(null);
+      return result;
+    } catch (err: any) {
+      setError(err.message || 'Failed to load coherence data');
+      return null;
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    fetchData();
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, [fetchData]);
+
+  // Start polling when review is running
+  useEffect(() => {
+    if (!data || data.review_status !== 'running') {
+      if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+      return;
+    }
+    if (pollRef.current) return;
+    pollRef.current = setInterval(async () => {
+      const result = await fetchData();
+      if (result && result.review_status !== 'running') {
+        if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+      }
+    }, 3000);
+  }, [data?.review_status, fetchData]);
+
+  const findNode = (nodeId: string) => graphData?.nodes.find((n: any) => n.id === nodeId) || null;
+
+  const sortByType = (proposals: any[]) => {
+    return [...proposals].sort((a, b) => {
+      const aIdx = TYPE_ORDER.indexOf(a.type);
+      const bIdx = TYPE_ORDER.indexOf(b.type);
+      return (aIdx >= 0 ? aIdx : TYPE_ORDER.length) - (bIdx >= 0 ? bIdx : TYPE_ORDER.length);
+    });
+  };
+
+  const groupByBatch = (proposals: any[]) => {
+    const batched = new Map<string, any[]>();
+    const unbatched: any[] = [];
+    for (const p of proposals) {
+      if (p.batch_id) {
+        if (!batched.has(p.batch_id)) batched.set(p.batch_id, []);
+        batched.get(p.batch_id)!.push(p);
+      } else {
+        unbatched.push(p);
+      }
+    }
+    const realBatches = new Map<string, any[]>();
+    for (const [batchId, items] of batched) {
+      if (items.length >= 2) realBatches.set(batchId, items);
+      else unbatched.push(...items);
+    }
+    return { batched: realBatches, unbatched };
+  };
+
+  const handleRunReview = async () => {
+    try {
+      await apiClient.runCoherenceReview(projectId);
+      await fetchData();
+    } catch (err) {
+      console.error('Failed to start coherence review:', err);
+    }
+  };
+
+  const handleApprove = async (id: string) => {
+    setApplyingIds(prev => new Set(prev).add(id));
+    try {
+      await apiClient.approveProposal(id, projectId);
+      await fetchData();
+    } catch (err) {
+      console.error('Failed to approve proposal:', err);
+    } finally {
+      setApplyingIds(prev => { const n = new Set(prev); n.delete(id); return n; });
+    }
+  };
+
+  const handleDismiss = async (id: string) => {
+    try {
+      await apiClient.dismissProposal(id, projectId);
+      await fetchData();
+    } catch (err) {
+      console.error('Failed to dismiss proposal:', err);
+    }
+  };
+
+  const handleBatchApprove = async (batchId: string) => {
+    setApplyingIds(prev => new Set(prev).add(batchId));
+    try {
+      await apiClient.batchApprove(batchId, [], projectId);
+      await fetchData();
+    } catch (err) {
+      console.error('Failed to batch approve:', err);
+    } finally {
+      setApplyingIds(prev => { const n = new Set(prev); n.delete(batchId); return n; });
+    }
+  };
+
+  const toggleBatch = (batchId: string) => {
+    setExpandedBatches(prev => {
+      const next = new Set(prev);
+      if (next.has(batchId)) next.delete(batchId);
+      else next.add(batchId);
+      return next;
+    });
+  };
+
+  const getProposalSummary = (p: any) => {
+    switch (p.type) {
+      case 'add_edge': case 'edge': case 'remove_edge': {
+        const fromName = findNode(p.from_id)?.name || p.from_id;
+        const toName = findNode(p.to_id)?.name || p.to_id;
+        return `${fromName} --${p.relation}--> ${toName}`;
+      }
+      case 'add_node': case 'node':
+        return `${p.proposed_node_type} "${p.proposed_node_name}"`;
+      case 'deprecate_node':
+        return `Remove ${findNode(p.target_node_id)?.name || p.target_node_id}`;
+      case 'update_description':
+        return `Update ${findNode(p.target_node_id)?.name || p.target_node_id}`;
+      default: return p.type;
+    }
+  };
+
+  const NodeRef = ({ nodeId }: { nodeId: string }) => {
+    const node = findNode(nodeId);
+    return (
+      <span
+        className="coherence-node-ref"
+        onClick={() => { if (node) onNodeClick(node); }}
+        style={{ cursor: node ? 'pointer' : 'default' }}
+      >
+        {node ? node.name : nodeId}
+      </span>
+    );
+  };
+
+  const ProposalContent = ({ proposal }: { proposal: any }) => {
+    switch (proposal.type) {
+      case 'add_edge': case 'edge':
+        return (
+          <div className="coherence-proposal-edge">
+            <NodeRef nodeId={proposal.from_id} />
+            <span className="coherence-edge-arrow"> --{proposal.relation}--&gt; </span>
+            <NodeRef nodeId={proposal.to_id} />
+          </div>
+        );
+      case 'remove_edge':
+        return (
+          <div className="coherence-proposal-edge coherence-proposal-remove">
+            <NodeRef nodeId={proposal.from_id} />
+            <span className="coherence-edge-arrow"> --{proposal.relation}--&gt; </span>
+            <NodeRef nodeId={proposal.to_id} />
+          </div>
+        );
+      case 'add_node': case 'node':
+        return (
+          <>
+            <div className="coherence-proposal-node">
+              <span className="coherence-node-type-badge">{proposal.proposed_node_type}</span>
+              <span className="coherence-node-name">{proposal.proposed_node_name}</span>
+            </div>
+            {proposal.suggested_edges?.length > 0 && (
+              <div className="coherence-suggested-edges">
+                <span className="coherence-suggested-label">Suggested edges:</span>
+                {proposal.suggested_edges.map((edge: any, i: number) => {
+                  const fromName = edge.from_id === 'NEW' ? proposal.proposed_node_name : (findNode(edge.from_id)?.name || edge.from_id);
+                  const toName = edge.to_id === 'NEW' ? proposal.proposed_node_name : (findNode(edge.to_id)?.name || edge.to_id);
+                  return <div key={i} className="coherence-suggested-edge">{fromName} --{edge.relation}--&gt; {toName}</div>;
+                })}
+              </div>
+            )}
+          </>
+        );
+      case 'deprecate_node':
+        return (
+          <>
+            <div className="coherence-proposal-node coherence-proposal-remove">
+              <NodeRef nodeId={proposal.target_node_id} />
+            </div>
+            {proposal.affected_edges?.length > 0 && (
+              <div className="coherence-affected-edges">
+                <span className="coherence-suggested-label">
+                  Will also remove {proposal.affected_edges.length} edge{proposal.affected_edges.length > 1 ? 's' : ''}:
+                </span>
+                {proposal.affected_edges.map((edge: any, i: number) => (
+                  <div key={i} className="coherence-suggested-edge coherence-removal-edge">
+                    {findNode(edge.from)?.name || edge.from} --{edge.relation}--&gt; {findNode(edge.to)?.name || edge.to}
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        );
+      case 'update_description':
+        return (
+          <>
+            <div className="coherence-proposal-update">
+              <NodeRef nodeId={proposal.target_node_id} />
+            </div>
+            {proposal.proposed_description && (
+              <div className="coherence-proposed-desc">
+                <span className="coherence-suggested-label">Suggested description:</span>
+                <div className="coherence-desc-preview">{proposal.proposed_description}</div>
+              </div>
+            )}
+          </>
+        );
+      default:
+        return <div className="coherence-proposal-generic">{JSON.stringify(proposal)}</div>;
+    }
+  };
+
+  const ProposalCard = ({ proposal, resolved, conflicts, inBatch }: { proposal: any; resolved: boolean; conflicts: any; inBatch?: boolean }) => {
+    const hasConflict = conflicts?.[proposal.id]?.length > 0;
+    const statusClass = proposal.status === 'approved' ? 'approved' : proposal.status === 'dismissed' ? 'dismissed' : '';
+
+    return (
+      <div className={`coherence-proposal ${statusClass}${hasConflict ? ' coherence-proposal-conflict' : ''}`} data-id={proposal.id}>
+        <div className="coherence-proposal-header">
+          <span className={`coherence-proposal-type coherence-type-${TYPE_CSS[proposal.type] || 'default'}`}>
+            {TYPE_LABELS[proposal.type] || proposal.type}
+          </span>
+          {proposal.confidence && (
+            <span className={`coherence-confidence coherence-confidence-${proposal.confidence}`}>
+              {CONFIDENCE_LABELS[proposal.confidence] || proposal.confidence}
+            </span>
+          )}
+          {resolved && (
+            <span className={`coherence-proposal-status-badge coherence-status-${proposal.status}`}>{proposal.status}</span>
+          )}
+        </div>
+        {hasConflict && (
+          <div className="coherence-conflict-warning">Conflicts with other proposals — resolve the conflict before approving.</div>
+        )}
+        <ProposalContent proposal={proposal} />
+        {!inBatch && <div className="coherence-proposal-reasoning">{proposal.reasoning}</div>}
+        {!resolved && (
+          <div className="coherence-proposal-actions">
+            <button
+              className="coherence-approve-btn"
+              disabled={applyingIds.has(proposal.id)}
+              onClick={() => handleApprove(proposal.id)}
+            >
+              {applyingIds.has(proposal.id) ? 'Applying...' : 'Approve'}
+            </button>
+            <button className="coherence-dismiss-btn" onClick={() => handleDismiss(proposal.id)}>Dismiss</button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (error) return <div className="coherence-error">Failed to load coherence data: {error}</div>;
+  if (!data) return <div>Loading...</div>;
+
+  const isRunning = data.review_status === 'running';
+  const pendingProposals = data.proposals.filter((p: any) => p.status === 'pending');
+  const resolvedProposals = data.proposals.filter((p: any) => p.status !== 'pending');
+  const hasPending = pendingProposals.length > 0;
+  const runDisabled = isRunning || hasPending;
+  const conflicts = data.conflicts || {};
+  const lastReview = data.last_review_timestamp ? new Date(data.last_review_timestamp).toLocaleString() : 'Never';
+
+  const sortedPending = sortByType(pendingProposals);
+  const { batched, unbatched } = groupByBatch(sortedPending);
+
+  return (
+    <div className="coherence-panel">
+      <div className="coherence-header">
+        <div className="coherence-header-left">
+          <h2 className="coherence-title">Coherence Review</h2>
+          <span className="coherence-last-review">Last review: {lastReview}</span>
+        </div>
+        <button
+          className={`coherence-run-btn${isRunning ? ' running' : ''}`}
+          disabled={runDisabled}
+          title={hasPending && !isRunning ? 'Resolve all pending proposals first' : ''}
+          onClick={handleRunReview}
+        >
+          {isRunning ? 'Analyzing...' : 'Review Coherence'}
+        </button>
+      </div>
+
+      {data.partial_run && !isRunning && (
+        <div className="coherence-warning-banner">
+          The last review did not complete fully. Some proposals may be missing.
+        </div>
+      )}
+
+      {isRunning && (
+        <div className="coherence-running-banner">
+          {data.progress?.message || 'AI agent is analyzing the graph for inconsistencies...'}
+        </div>
+      )}
+
+      <div className="coherence-section">
+        <h3 className="coherence-section-title">
+          Pending Proposals{hasPending ? ` (${pendingProposals.length})` : ''}
+        </h3>
+
+        {!hasPending && !isRunning && (
+          <div className={`coherence-empty${data.last_review_timestamp && resolvedProposals.length === 0 ? ' coherence-no-issues' : ''}`}>
+            {data.last_review_timestamp && resolvedProposals.length === 0
+              ? 'No issues found. The graph is coherent.'
+              : data.last_review_timestamp
+                ? 'All proposals resolved. Click "Review Coherence" to run a new analysis.'
+                : 'No pending proposals. Click "Review Coherence" to analyze the graph.'}
+          </div>
+        )}
+
+        {Array.from(batched.entries()).map(([batchId, batchProposals]) => {
+          const isExpanded = expandedBatches.has(batchId);
+          const typeLabels = [...new Set(batchProposals.map((p: any) => TYPE_LABELS[p.type] || p.type))].join(', ');
+
+          return (
+            <div key={batchId} className="coherence-batch" data-batch={batchId}>
+              <div className="coherence-batch-header">
+                <div className="coherence-batch-info">
+                  <span className="coherence-batch-badge">Batch ({batchProposals.length})</span>
+                  <span className="coherence-batch-types">{typeLabels}</span>
+                </div>
+                <div className="coherence-batch-actions">
+                  <button className="coherence-batch-expand-btn" onClick={() => toggleBatch(batchId)}>
+                    {isExpanded ? 'Collapse' : 'Expand to cherry-pick'}
+                  </button>
+                  <button
+                    className="coherence-approve-btn coherence-batch-approve-btn"
+                    disabled={applyingIds.has(batchId)}
+                    onClick={() => handleBatchApprove(batchId)}
+                  >
+                    {applyingIds.has(batchId) ? 'Applying...' : 'Approve All'}
+                  </button>
+                </div>
+              </div>
+              <div className="coherence-proposal-reasoning">{batchProposals[0]?.reasoning || ''}</div>
+              {isExpanded ? (
+                <div className="coherence-batch-items">
+                  {batchProposals.map((p: any) => (
+                    <ProposalCard key={p.id} proposal={p} resolved={false} conflicts={conflicts} inBatch />
+                  ))}
+                </div>
+              ) : (
+                <div className="coherence-batch-summary">
+                  {batchProposals.map((p: any) => (
+                    <div key={p.id} className="coherence-batch-summary-item">
+                      <span className={`coherence-proposal-type coherence-type-${TYPE_CSS[p.type] || 'default'}`}>
+                        {TYPE_LABELS[p.type] || p.type}
+                      </span>
+                      <span className="coherence-batch-summary-text">{getProposalSummary(p)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {unbatched.map((p: any) => (
+          <ProposalCard key={p.id} proposal={p} resolved={false} conflicts={conflicts} />
+        ))}
+      </div>
+
+      {resolvedProposals.length > 0 && (
+        <div className="coherence-section">
+          <button className="coherence-resolved-toggle" onClick={() => setResolvedExpanded(v => !v)}>
+            <span className="coherence-toggle-icon" dangerouslySetInnerHTML={{ __html: resolvedExpanded ? '&#9660;' : '&#9654;' }} />
+            {' '}Resolved ({resolvedProposals.length})
+          </button>
+          <div className={`coherence-resolved-list${resolvedExpanded ? '' : ' collapsed'}`}>
+            {resolvedProposals.map((p: any) => (
+              <ProposalCard key={p.id} proposal={p} resolved={true} conflicts={{}} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/components/GraphLegend.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useCallback } from 'react';
+import { NODE_COLORS, EDGE_COLORS, EDGE_LABELS, LEGEND_LABELS, NODE_SHAPES, nodeShapePath } from '../constants/graph';
+
+interface GraphLegendProps {
+  visible: boolean;
+  onTypeToggle: (hiddenTypes: Set<string>) => void;
+  onSearchChange: (query: string) => void;
+}
+
+export function GraphLegend({ visible, onTypeToggle, onSearchChange }: GraphLegendProps) {
+  const [hiddenTypes, setHiddenTypes] = useState<Set<string>>(new Set());
+  const [edgesCollapsed, setEdgesCollapsed] = useState(() => {
+    const stored = localStorage.getItem('legend-edges-collapsed');
+    return stored === null ? true : stored === 'true';
+  });
+
+  const handleTypeClick = useCallback((type: string) => {
+    setHiddenTypes(prev => {
+      const next = new Set(prev);
+      if (next.has(type)) next.delete(type);
+      else next.add(type);
+      onTypeToggle(next);
+      return next;
+    });
+  }, [onTypeToggle]);
+
+  const toggleEdges = useCallback(() => {
+    setEdgesCollapsed(prev => {
+      const next = !prev;
+      localStorage.setItem('legend-edges-collapsed', String(next));
+      return next;
+    });
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div id="graph-legend">
+      <div className="graph-legend">
+        <div className="legend-search-container" id="search-container">
+          <input
+            type="text"
+            className="search-input"
+            placeholder="Search nodes..."
+            onChange={(e) => onSearchChange(e.target.value)}
+          />
+        </div>
+        <div className="legend-header"><span>Legend</span></div>
+        <div className="legend-body">
+          <div className="legend-section">
+            <div className="legend-section-title">Node Types</div>
+            <div className="legend-items">
+              {Object.entries(NODE_COLORS).map(([type, color]) => {
+                const shape = NODE_SHAPES[type] || 'circle';
+                const pathD = nodeShapePath(shape, 6);
+                const active = !hiddenTypes.has(type);
+                return (
+                  <div
+                    key={type}
+                    className={`legend-item legend-type-toggle${active ? ' active' : ''}`}
+                    onClick={() => handleTypeClick(type)}
+                    title={`Toggle ${LEGEND_LABELS[type]}`}
+                  >
+                    <svg className="legend-node-svg" width="16" height="16" viewBox="-8 -8 16 16">
+                      <path d={pathD} fill={color} />
+                    </svg>
+                    <span className="legend-item-label">{LEGEND_LABELS[type] || type}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className="legend-section">
+            <div className="legend-section-title">Node Size</div>
+            <div className="legend-size-explanation">
+              <span className="legend-size-small" />
+              <span className="legend-size-arrow">{'\u2192'}</span>
+              <span className="legend-size-large" />
+              <span className="legend-item-label">more connections = larger</span>
+            </div>
+          </div>
+        </div>
+        <button className="legend-edges-toggle" onClick={toggleEdges} title="Toggle edge relations">
+          <span className="legend-toggle-icon" dangerouslySetInnerHTML={{ __html: edgesCollapsed ? '&#9654;' : '&#9660;' }} />
+          <span>Edge Relations</span>
+        </button>
+        <div className={`legend-edges-body${edgesCollapsed ? ' collapsed' : ''}`}>
+          <div className="legend-section">
+            <div className="legend-items">
+              {Object.entries(EDGE_COLORS).map(([relation, color]) => (
+                <div key={relation} className="legend-item">
+                  <span className="legend-edge-swatch" style={{ background: color }} />
+                  <span className="legend-item-label">{EDGE_LABELS[relation] || relation}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="legend-section">
+            <div className="legend-section-title">Node Border</div>
+            <div className="legend-items">
+              <div className="legend-item">
+                <span className="legend-node-swatch legend-border-yellow" />
+                <span className="legend-item-label">incomplete</span>
+              </div>
+              <div className="legend-item">
+                <span className="legend-node-swatch legend-border-red" />
+                <span className="legend-item-label">has open questions</span>
+              </div>
+            </div>
+          </div>
+          <div className="legend-section">
+            <div className="legend-section-title">Gap Indicators</div>
+            <div className="legend-items">
+              <div className="legend-item">
+                <span className="legend-node-swatch legend-gap-pulse" />
+                <span className="legend-item-label">{'\u26A0'} pulsing = open questions</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}