helixevo 0.3.0 → 0.4.0

package/dashboard/app/topology/client.tsx

@@ -0,0 +1,575 @@
+'use client'
+
+import Link from 'next/link'
+import { useRef, useState } from 'react'
+import { ConsolePanel } from '@/components/console-panel'
+import { MetricCard } from '@/components/metric-card'
+import { PageHero } from '@/components/page-hero'
+import { SectionFrame } from '@/components/section-frame'
+import type { GovernanceModeName, GovernanceState, TopologyDashboardSummary, TopologyReviewDecisionStatus, TopologyReviewStatus } from '@/lib/data'
+
+type RunState = 'idle' | 'running' | 'success' | 'error' | 'stopped'
+
+const GOVERNANCE_MODES: GovernanceModeName[] = [
+  'balanced',
+  'transfer-focused',
+  'consolidation-focused',
+  'project-critical',
+  'exploration',
+  'conservative',
+]
+
+function formatDate(value: string | undefined) {
+  if (!value) return '—'
+  return new Date(value).toLocaleString()
+}
+
+function formatMode(mode: GovernanceModeName | undefined) {
+  if (!mode) return 'auto'
+  return mode.split('-').join(' ')
+}
+
+function toneForMode(mode: GovernanceModeName): 'blue' | 'green' | 'purple' | 'yellow' | 'neutral' {
+  if (mode === 'transfer-focused') return 'purple'
+  if (mode === 'project-critical') return 'yellow'
+  if (mode === 'exploration') return 'blue'
+  if (mode === 'consolidation-focused') return 'green'
+  if (mode === 'conservative') return 'neutral'
+  return 'blue'
+}
+
+function toneForStatus(status: TopologyReviewStatus): 'yellow' | 'green' | 'neutral' | 'purple' {
+  if (status === 'accepted') return 'green'
+  if (status === 'deferred') return 'purple'
+  if (status === 'rejected') return 'neutral'
+  return 'yellow'
+}
+
+function toneForChange(changeType: string): 'blue' | 'green' | 'purple' | 'yellow' | 'neutral' {
+  if (changeType === 'merge' || changeType === 'rewire') return 'blue'
+  if (changeType === 'promote' || changeType === 'consolidate') return 'purple'
+  if (changeType === 'split') return 'yellow'
+  return 'neutral'
+}
+
+function consoleTone(state: RunState): 'neutral' | 'green' | 'red' | 'yellow' {
+  if (state === 'success') return 'green'
+  if (state === 'error') return 'red'
+  if (state === 'stopped') return 'yellow'
+  return 'neutral'
+}
+
+export default function TopologyClient({
+  initialDashboard,
+  initialGovernanceState,
+}: {
+  initialDashboard: TopologyDashboardSummary
+  initialGovernanceState: GovernanceState
+}) {
+  const [dashboard, setDashboard] = useState(initialDashboard)
+  const [governanceState, setGovernanceState] = useState(initialGovernanceState)
+  const [runState, setRunState] = useState<RunState>('idle')
+  const [output, setOutput] = useState('')
+  const [activeActionLabel, setActiveActionLabel] = useState('topology action')
+  const [pendingDecision, setPendingDecision] = useState<string | null>(null)
+  const [pendingMode, setPendingMode] = useState<string | null>(null)
+  const [pendingPlanAction, setPendingPlanAction] = useState<string | null>(null)
+  const abortRef = useRef<AbortController | null>(null)
+  const outputRef = useRef<HTMLPreElement | null>(null)
+
+  const handleOptimize = async () => {
+    setActiveActionLabel('topology review refresh')
+    setRunState('running')
+    setOutput('')
+    const controller = new AbortController()
+    abortRef.current = controller
+
+    try {
+      const res = await fetch('/api/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ command: 'graph-optimize' }),
+        signal: controller.signal,
+      })
+
+      if (!res.body) {
+        setOutput('No response body')
+        setRunState('error')
+        return
+      }
+
+      const reader = res.body.getReader()
+      const decoder = new TextDecoder()
+      let sseBuffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        sseBuffer += decoder.decode(value, { stream: true })
+        const events = sseBuffer.split('\n\n')
+        sseBuffer = events.pop() ?? ''
+
+        for (const event of events) {
+          const lines = event.split('\n')
+          let eventType = ''
+          let eventData = ''
+
+          for (const line of lines) {
+            if (line.startsWith('event: ')) eventType = line.slice(7)
+            if (line.startsWith('data: ')) eventData = line.slice(6)
+          }
+
+          if (eventType === 'output' && eventData) {
+            try {
+              const text = JSON.parse(eventData) as string
+              setOutput((prev) => prev + text)
+              setTimeout(() => {
+                if (outputRef.current) outputRef.current.scrollTop = outputRef.current.scrollHeight
+              }, 10)
+            } catch {}
+          }
+
+          if (eventType === 'done' && eventData) {
+            try {
+              const result = JSON.parse(JSON.parse(eventData) as string) as { success: boolean; stopped?: boolean }
+              setRunState(result.stopped ? 'stopped' : result.success ? 'success' : 'error')
+            } catch {
+              setRunState('success')
+            }
+          }
+        }
+      }
+
+      try {
+        const refreshed = await fetch('/api/topology-review', { cache: 'no-store' })
+        if (refreshed.ok) setDashboard(await refreshed.json())
+      } catch {}
+      setRunState((prev) => prev === 'running' ? 'success' : prev)
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name === 'AbortError') {
+        try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
+        setOutput((prev) => prev + '\n\n[Stopped by user]')
+        setRunState('stopped')
+      } else {
+        setOutput((prev) => prev || 'Network error')
+        setRunState('error')
+      }
+    } finally {
+      abortRef.current = null
+    }
+  }
+
+  const handleStop = async () => {
+    if (abortRef.current) abortRef.current.abort()
+    try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
+  }
+
+  const setGovernance = async (selectionMode: 'auto' | 'manual', manualMode?: GovernanceModeName) => {
+    const key = selectionMode === 'auto' ? 'auto' : manualMode ?? 'manual'
+    setPendingMode(key)
+    try {
+      const res = await fetch('/api/governance', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ selectionMode, manualMode }),
+      })
+      const data = await res.json()
+      if (data.success) {
+        setGovernanceState(data.state)
+        setDashboard((prev) => ({ ...prev, governance: data.summary }))
+      }
+    } finally {
+      setPendingMode(null)
+    }
+  }
+
+  const handleDecision = async (candidateId: string, decision: TopologyReviewDecisionStatus) => {
+    setPendingDecision(candidateId)
+    try {
+      const res = await fetch('/api/topology-review', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ candidateId, decision, rationale: `${decision} from topology control` }),
+      })
+      const data = await res.json()
+      if (data.success && data.dashboard) setDashboard(data.dashboard)
+    } finally {
+      setPendingDecision(null)
+    }
+  }
+
+  const handleExecutionAction = async (
+    action: 'prepare' | 'apply' | 'rollback',
+    payload: { candidateId?: string; planId?: string },
+    label: string,
+  ) => {
+    setPendingPlanAction(payload.candidateId ?? payload.planId ?? action)
+    setActiveActionLabel(label)
+    setRunState('running')
+    setOutput('')
+    try {
+      const res = await fetch('/api/topology-apply', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action, ...payload }),
+      })
+      const data = await res.json()
+      if (!res.ok || !data.success) {
+        setOutput(data.error ?? 'Topology action failed')
+        setRunState('error')
+        return
+      }
+      if (data.dashboard) setDashboard(data.dashboard)
+      setOutput(data.output || `${label} completed`)
+      setRunState('success')
+    } catch (err: unknown) {
+      setOutput(err instanceof Error ? err.message : 'Topology action failed')
+      setRunState('error')
+    } finally {
+      setPendingPlanAction(null)
+    }
+  }
+
+  return (
+    <div style={{ display: 'grid', gap: 22 }}>
+      <PageHero
+        eyebrow="Governed plasticity"
+        title="Topology Review Control"
+        description="Steer governance explicitly, refresh structural candidates from graph optimization, and move reviewed topology from manual-review into prepared, applied, and rollbackable structural execution."
+        chips={[
+          { label: `${dashboard.summary.open} open reviews`, tone: dashboard.summary.open > 0 ? 'yellow' : 'green' },
+          { label: `${dashboard.execution.prepared} prepared`, tone: dashboard.execution.prepared > 0 ? 'blue' : 'neutral' },
+          { label: `${dashboard.execution.applied} applied`, tone: dashboard.execution.applied > 0 ? 'green' : 'neutral' },
+          { label: formatMode(dashboard.governance.activeMode), tone: toneForMode(dashboard.governance.activeMode) },
+          { label: dashboard.governance.source === 'operator-selected' ? 'operator-steered' : 'derived mode', tone: dashboard.governance.source === 'operator-selected' ? 'purple' : 'neutral' },
+        ]}
+        actions={
+          <div style={{ display: 'grid', gap: 12 }}>
+            <div className="hero-note-card">
+              <div className="hero-note-label">Active governance profile</div>
+              <div className="hero-note-title">{formatMode(dashboard.governance.activeMode)}</div>
+              <div className="hero-note-copy">{dashboard.governance.profile.explanation}</div>
+            </div>
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+              <button onClick={handleOptimize} disabled={runState === 'running'} className="badge badge-blue" style={{ border: 'none', cursor: 'pointer' }}>Run graph optimize</button>
+              <Link href="/coevolution" className="badge badge-gray">Open co-evolution</Link>
+              <Link href="/network" className="badge badge-gray">Open network</Link>
+            </div>
+          </div>
+        }
+      />
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 16 }}>
+        <MetricCard label="Open review items" value={dashboard.summary.open} sublabel={`${dashboard.summary.deferred} deferred • ${dashboard.summary.accepted} accepted`} tone={dashboard.summary.open > 0 ? 'yellow' : 'green'} icon="⇄" />
+        <MetricCard label="Accepted ready" value={dashboard.acceptedReady.length} sublabel="accepted candidates not yet prepared for execution" tone={dashboard.acceptedReady.length > 0 ? 'blue' : 'neutral'} icon="✓" />
+        <MetricCard label="Prepared plans" value={dashboard.execution.prepared} sublabel={`${dashboard.execution.safeToApply} safe-to-apply • ${dashboard.execution.prepareOnly} prepare-only`} tone={dashboard.execution.prepared > 0 ? 'blue' : 'neutral'} icon="◇" />
+        <MetricCard label="Applied plans" value={dashboard.execution.applied} sublabel={`${dashboard.execution.rolledBack} rolled back • ${dashboard.execution.artifacts} artifacts`} tone={dashboard.execution.applied > 0 ? 'green' : 'neutral'} icon="↑" />
+        <MetricCard label="Manual-route backlog" value={dashboard.summary.generatedFromManualReview} sublabel="pressure routed into actual operator review" tone="purple" icon="!" />
+        <MetricCard label="Snapshots" value={dashboard.execution.snapshots} sublabel="before/after state preserved for reviewed execution" tone="purple" icon="◎" />
+      </div>
+
+      <SectionFrame
+        eyebrow="Execution pipeline"
+        title="Accepted review can now become prepared and applied structure"
+        description="Milestone 7 adds the missing transition layer between reviewed intent and safe structural execution. Only accepted candidates can enter plan preparation, and only safe plans can be applied."
+      >
+        <div className="grid-2">
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div className="section-label">Accepted and ready to prepare</div>
+            {dashboard.acceptedReady.length > 0 ? dashboard.acceptedReady.map((candidate) => (
+              <div key={candidate.id} style={{ padding: '14px 16px', borderRadius: 18, border: '1px solid var(--border)', background: 'rgba(255,255,255,0.72)' }}>
+                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{candidate.title}</div>
+                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.6 }}>{candidate.reasonSummary}</div>
+                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
+                  <span className={`badge badge-${toneForChange(candidate.changeType)}`}>{candidate.changeType}</span>
+                  <span className="badge badge-gray">accepted</span>
+                  <span className="badge badge-gray">risk {(candidate.riskScore * 100).toFixed(0)}%</span>
+                </div>
+                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 12 }}>
+                  <button
+                    onClick={() => handleExecutionAction('prepare', { candidateId: candidate.id }, `prepare ${candidate.title}`)}
+                    disabled={pendingPlanAction === candidate.id}
+                    className="badge badge-blue"
+                    style={{ border: 'none', cursor: 'pointer' }}
+                  >
+                    Prepare apply plan
+                  </button>
+                </div>
+              </div>
+            )) : (
+              <div className="empty-state" style={{ padding: 24 }}>
+                <div className="empty-state-title">No accepted candidates waiting for preparation</div>
+                <div className="empty-state-desc">Accept a topology review item first, then it will enter the reviewed execution pipeline here.</div>
+              </div>
+            )}
+          </div>
+
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div className="section-label">Prepared execution queue</div>
+            {dashboard.preparedQueue.length > 0 ? dashboard.preparedQueue.map((plan) => (
+              <div key={plan.id} style={{ padding: '14px 16px', borderRadius: 18, border: '1px solid var(--border)', background: 'rgba(255,255,255,0.72)' }}>
+                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{plan.changeType} plan</div>
+                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.6 }}>{plan.reasonSummary}</div>
+                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
+                  <span className={`badge badge-${plan.safeToApply ? 'green' : 'yellow'}`}>{plan.executionMode}</span>
+                  <span className="badge badge-gray">{plan.targetSkillSlugs.length} target nodes</span>
+                  <span className="badge badge-gray">snapshot {plan.beforeSnapshotId.slice(-8)}</span>
+                </div>
+                <div style={{ display: 'grid', gap: 4, marginTop: 10 }}>
+                  {plan.plannedGraphChanges.slice(0, 2).map((line, index) => (
+                    <div key={`${plan.id}-graph-${index}`} className="signal-text">• {line}</div>
+                  ))}
+                  {plan.warnings.slice(0, 2).map((line, index) => (
+                    <div key={`${plan.id}-warn-${index}`} className="signal-text">• {line}</div>
+                  ))}
+                </div>
+                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 12 }}>
+                  {plan.safeToApply && plan.executionMode === 'apply' ? (
+                    <button
+                      onClick={() => handleExecutionAction('apply', { planId: plan.id }, `apply ${plan.id}`)}
+                      disabled={pendingPlanAction === plan.id}
+                      className="badge badge-green"
+                      style={{ border: 'none', cursor: 'pointer' }}
+                    >
+                      Apply safely
+                    </button>
+                  ) : (
+                    <span className="badge badge-yellow">prepare-only</span>
+                  )}
+                </div>
+              </div>
+            )) : (
+              <div className="empty-state" style={{ padding: 24 }}>
+                <div className="empty-state-title">No prepared plans yet</div>
+                <div className="empty-state-desc">Prepared plans will appear here after you convert an accepted review candidate into an explicit apply plan.</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </SectionFrame>
+
+      <div className="grid-2">
+        <SectionFrame
+          eyebrow="Governance steering"
+          title="Select the active mode"
+          description="You can leave governance in derived mode or pin the network to a specific operating bias. The selected mode affects structural review posture across the dashboard and runtime summaries."
+        >
+          <div style={{ display: 'grid', gap: 14 }}>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <button
+                onClick={() => setGovernance('auto')}
+                disabled={pendingMode !== null}
+                className={`hero-chip hero-chip-${governanceState.selectionMode === 'auto' ? 'green' : 'neutral'}`}
+                style={{ border: 'none', cursor: 'pointer' }}
+              >
+                Auto / derived
+              </button>
+              {GOVERNANCE_MODES.map((mode) => (
+                <button
+                  key={mode}
+                  onClick={() => setGovernance('manual', mode)}
+                  disabled={pendingMode !== null}
+                  className={`hero-chip hero-chip-${toneForMode(mode)}`}
+                  style={{ border: governanceState.selectionMode === 'manual' && governanceState.manualMode === mode ? '1px solid rgba(0,0,0,0.12)' : 'none', cursor: 'pointer', opacity: pendingMode && pendingMode !== mode ? 0.55 : 1 }}
+                >
+                  {formatMode(mode)}
+                </button>
+              ))}
+            </div>
+
+            <div style={{ padding: '14px 16px', borderRadius: 18, background: 'rgba(255,255,255,0.72)', border: '1px solid var(--border)' }}>
+              <div className="section-label" style={{ marginBottom: 8 }}>Current steering state</div>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
+                <span className={`hero-chip hero-chip-${toneForMode(dashboard.governance.activeMode)}`}>{formatMode(dashboard.governance.activeMode)}</span>
+                <span className="badge badge-gray">source: {dashboard.governance.source}</span>
+                <span className="badge badge-gray">derived: {formatMode(dashboard.governance.derivedMode)}</span>
+                <span className="badge badge-gray">review threshold {(dashboard.governance.profile.reviewThreshold * 100).toFixed(0)}%</span>
+                <span className="badge badge-gray">risk tolerance {(dashboard.governance.profile.riskTolerance * 100).toFixed(0)}%</span>
+                <span className="badge badge-gray">plasticity bias {(dashboard.governance.profile.plasticityBias * 100).toFixed(0)}%</span>
+              </div>
+              <div style={{ display: 'grid', gap: 6 }}>
+                {dashboard.governance.rationale.map((reason, index) => (
+                  <div key={`${reason}-${index}`} className="signal-text">• {reason}</div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </SectionFrame>
+
+        <SectionFrame
+          eyebrow="Recent decisions"
+          title="Accepted, deferred, and rejected changes"
+          description="Decisions are preserved as a truthful operator log rather than hidden automation."
+        >
+          <div className="summary-list">
+            {dashboard.recentDecisions.length > 0 ? dashboard.recentDecisions.map((candidate) => (
+              <div key={candidate.id} className="summary-row" style={{ alignItems: 'flex-start' }}>
+                <div className="summary-row-main">
+                  <div className="summary-row-title">{candidate.title}</div>
+                  <div className="summary-row-meta">{candidate.reasonSummary}</div>
+                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
+                    <span className={`badge badge-${toneForStatus(candidate.status)}`}>{candidate.status}</span>
+                    <span className={`badge badge-${toneForChange(candidate.changeType)}`}>{candidate.changeType}</span>
+                    <span className="badge badge-gray">{candidate.source}</span>
+                    <span className="badge badge-gray">confidence {(candidate.confidence * 100).toFixed(0)}%</span>
+                  </div>
+                  {candidate.latestDecision ? (
+                    <div style={{ display: 'grid', gap: 4, marginTop: 10 }}>
+                      <div className="signal-text">• {candidate.latestDecision.rationale}</div>
+                      <div className="signal-text">• Decided {formatDate(candidate.latestDecision.decidedAt)} under {formatMode(candidate.latestDecision.governanceMode)}</div>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            )) : (
+              <div className="empty-state" style={{ padding: 24 }}>
+                <div className="empty-state-title">No topology decisions yet</div>
+                <div className="empty-state-desc">Run graph optimize to populate the queue, then accept, defer, or reject structural candidates from here.</div>
+              </div>
+            )}
+          </div>
+        </SectionFrame>
+      </div>
+
+      {runState !== 'idle' ? (
+        <ConsolePanel
+          tone={consoleTone(runState)}
+          title={<span>{runState === 'running' ? `Running ${activeActionLabel}…` : runState === 'success' ? `${activeActionLabel} completed` : runState === 'stopped' ? `${activeActionLabel} stopped` : `${activeActionLabel} failed`}</span>}
+          actions={runState === 'running'
+            ? <button onClick={handleStop} className="badge badge-red" style={{ border: 'none', cursor: 'pointer' }}>Stop</button>
+            : <button onClick={() => window.location.reload()} className="badge badge-gray" style={{ border: 'none', cursor: 'pointer' }}>Refresh page</button>}
+        >
+          <pre ref={outputRef} style={{ margin: 0, padding: '16px 18px', fontSize: 11.5, lineHeight: 1.62, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+            {output || 'Waiting for command output…'}
+          </pre>
+        </ConsolePanel>
+      ) : null}
+
+      <SectionFrame
+        eyebrow="Manual review queue"
+        title="Open topology backlog"
+        description="This is the real operator lane for structural plasticity. Review items are driven by graph optimize, recurring motifs, realized transfer evidence, and manual-review pressure routing."
+      >
+        <div style={{ display: 'grid', gap: 10 }}>
+          {dashboard.backlog.length > 0 ? dashboard.backlog.map((candidate) => (
+            <div key={candidate.id} style={{ padding: '14px 16px', borderRadius: 18, border: '1px solid var(--border)', background: 'rgba(255,255,255,0.72)' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+                <div style={{ flex: 1, minWidth: 280 }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{candidate.title}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.6, marginTop: 4 }}>{candidate.reasonSummary}</div>
+                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
+                    <span className={`badge badge-${toneForStatus(candidate.status)}`}>{candidate.status}</span>
+                    <span className={`badge badge-${toneForChange(candidate.changeType)}`}>{candidate.changeType}</span>
+                    <span className="badge badge-gray">{candidate.priority}</span>
+                    <span className="badge badge-gray">{candidate.source}</span>
+                    <span className="badge badge-gray">confidence {(candidate.confidence * 100).toFixed(0)}%</span>
+                    <span className="badge badge-gray">risk {(candidate.riskScore * 100).toFixed(0)}%</span>
+                    {(candidate.projectIds ?? []).slice(0, 3).map((projectId) => <span key={`${candidate.id}-${projectId}`} className="badge badge-gray">{projectId}</span>)}
+                  </div>
+                  <div style={{ display: 'grid', gap: 4, marginTop: 10 }}>
+                    {candidate.evidence.slice(0, 3).map((line, index) => (
+                      <div key={`${candidate.id}-evidence-${index}`} className="signal-text">• {line}</div>
+                    ))}
+                  </div>
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 12 }}>
+                    <button onClick={() => handleDecision(candidate.id, 'accepted')} disabled={pendingDecision === candidate.id} className="badge badge-green" style={{ border: 'none', cursor: 'pointer' }}>Accept</button>
+                    <button onClick={() => handleDecision(candidate.id, 'deferred')} disabled={pendingDecision === candidate.id} className="badge badge-purple" style={{ border: 'none', cursor: 'pointer' }}>Defer</button>
+                    <button onClick={() => handleDecision(candidate.id, 'rejected')} disabled={pendingDecision === candidate.id} className="badge badge-gray" style={{ border: 'none', cursor: 'pointer' }}>Reject</button>
+                  </div>
+                </div>
+                <div style={{ minWidth: 180, textAlign: 'right', fontSize: 11.5, color: 'var(--text-dim)', lineHeight: 1.7 }}>
+                  <div>Observed {formatDate(candidate.lastObservedAt)}</div>
+                  <div>Last activity {formatDate(candidate.lastActivityAt)}</div>
+                  <div>Governance {formatMode(candidate.governanceMode)}</div>
+                  <div>{candidate.affectedNodeIds.length} affected nodes</div>
+                </div>
+              </div>
+            </div>
+          )) : (
+            <div className="empty-state" style={{ padding: 28 }}>
+              <div className="empty-state-title">No topology backlog yet</div>
+              <div className="empty-state-desc">Run <code>graph --optimize</code> from this page to refresh structural review candidates and turn manual-review into a populated operator lane.</div>
+            </div>
+          )}
+        </div>
+      </SectionFrame>
+
+      <SectionFrame
+        eyebrow="Applied history"
+        title="Reviewed structural transitions"
+        description="Applied plans remain visible with their latest status, snapshot references, and rollback continuity."
+      >
+        <div className="summary-list">
+          {dashboard.appliedHistory.length > 0 ? dashboard.appliedHistory.map((plan) => (
+            <div key={plan.id} className="summary-row" style={{ alignItems: 'flex-start' }}>
+              <div className="summary-row-main">
+                <div className="summary-row-title">{plan.changeType} · {plan.id}</div>
+                <div className="summary-row-meta">{plan.reasonSummary}</div>
+                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
+                  <span className={`badge badge-${plan.latestStatus === 'applied' ? 'green' : plan.latestStatus === 'rolled-back' ? 'purple' : 'gray'}`}>{plan.latestStatus}</span>
+                  <span className="badge badge-gray">{plan.executionMode}</span>
+                  <span className="badge badge-gray">snapshot {plan.beforeSnapshotId.slice(-8)}</span>
+                  {plan.latestExecution?.afterSnapshotId ? <span className="badge badge-gray">after {plan.latestExecution.afterSnapshotId.slice(-8)}</span> : null}
+                </div>
+                <div style={{ display: 'grid', gap: 4, marginTop: 10 }}>
+                  {plan.plannedGraphChanges.slice(0, 2).map((line, index) => (
+                    <div key={`${plan.id}-history-${index}`} className="signal-text">• {line}</div>
+                  ))}
+                  {(plan.latestExecution?.notes ?? []).slice(0, 2).map((line, index) => (
+                    <div key={`${plan.id}-note-${index}`} className="signal-text">• {line}</div>
+                  ))}
+                </div>
+                {plan.latestStatus === 'applied' ? (
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 12 }}>
+                    <button
+                      onClick={() => handleExecutionAction('rollback', { planId: plan.id }, `rollback ${plan.id}`)}
+                      disabled={pendingPlanAction === plan.id}
+                      className="badge badge-purple"
+                      style={{ border: 'none', cursor: 'pointer' }}
+                    >
+                      Roll back
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          )) : (
+            <div className="empty-state" style={{ padding: 24 }}>
+              <div className="empty-state-title">No applied topology history yet</div>
+              <div className="empty-state-desc">Once a prepared safe plan is applied, it will appear here with rollback continuity.</div>
+            </div>
+          )}
+        </div>
+      </SectionFrame>
+
+      <SectionFrame
+        eyebrow="Ledger"
+        title="All recorded topology candidates"
+        description="A compact ledger of the full queue, including open, deferred, accepted, and rejected structural candidates."
+      >
+        <div className="summary-list">
+          {dashboard.candidates.length > 0 ? dashboard.candidates.map((candidate) => (
+            <div key={candidate.id} className="summary-row" style={{ alignItems: 'flex-start' }}>
+              <div className="summary-row-main">
+                <div className="summary-row-title">{candidate.title}</div>
+                <div className="summary-row-meta">{candidate.description ?? candidate.reasonSummary}</div>
+                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
+                  <span className={`badge badge-${toneForStatus(candidate.status)}`}>{candidate.status}</span>
+                  <span className={`badge badge-${toneForChange(candidate.changeType)}`}>{candidate.changeType}</span>
+                  <span className="badge badge-gray">{candidate.source}</span>
+                  <span className="badge badge-gray">{candidate.affectedNodeIds.length} nodes</span>
+                </div>
+              </div>
+            </div>
+          )) : (
+            <div className="empty-state" style={{ padding: 24 }}>
+              <div className="empty-state-title">No structural candidates stored yet</div>
+              <div className="empty-state-desc">The ledger will populate after the first topology refresh.</div>
+            </div>
+          )}
+        </div>
+      </SectionFrame>
+    </div>
+  )
+}

package/dashboard/app/topology/page.tsx

@@ -0,0 +1,10 @@
+import { loadGovernanceState, loadTopologyDashboardSummary } from '@/lib/data'
+import TopologyClient from './client'
+
+export const dynamic = 'force-dynamic'
+
+export default function TopologyPage() {
+  const dashboard = loadTopologyDashboardSummary()
+  const governanceState = loadGovernanceState()
+  return <TopologyClient initialDashboard={dashboard} initialGovernanceState={governanceState} />
+}

package/dashboard/components/sidebar-nav.tsx

@@ -12,6 +12,8 @@ interface NavItem {
 const WORKSPACE_NAV: NavItem[] = [
   { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1' },
   { href: '/network', label: 'Skill Network', icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1' },
+  { href: '/topology', label: 'Topology', icon: 'M4 7h6m4 0h6M7 4v6m10-6v6M5 17h14M12 10v10' },
+  { href: '/coevolution', label: 'Co-Evolution', icon: 'M4 12h4m8 0h4M12 4v4m0 8v4M7.05 7.05l2.83 2.83m4.24 4.24l2.83 2.83m0-9.9l-2.83 2.83m-4.24 4.24l-2.83 2.83' },
   { href: '/evolution', label: 'Evolution', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
   { href: '/research', label: 'Research', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' },
   { href: '/frontier', label: 'Frontier', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },