@sienklogic/plan-build-run 2.1.0 → 2.1.1

package/dashboard/src/pages/MemoryPage.jsx

@@ -0,0 +1,107 @@
+import { useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, MetricCard, SectionTitle, Badge, ErrorBoundary, ErrorBox } from '../components/ui/index.js';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+import useDocumentTitle from '../hooks/useDocumentTitle.js';
+import useToast from '../hooks/useToast.jsx';
+
+function MemoryPageContent() {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+
+  const { data, loading, error, refetch } = useFetch('/api/memory');
+
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const ws = useWebSocket(wsUrl);
+  useDocumentTitle({ wsEvents: ws.events });
+
+  useEffect(() => {
+    if (ws.events.length > 0) {
+      refetch();
+    }
+  }, [ws.events.length, refetch]);
+
+  useEffect(() => {
+    if (error && addToast) addToast('error', error.message);
+  }, [error, addToast]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <SkeletonCard height={90} />
+        <SkeletonCard height={300} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorBox
+        title="Error loading memory"
+        message={error.message}
+        onRetry={refetch}
+      />
+    );
+  }
+
+  const entries = Array.isArray(data) ? data : [];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <SectionTitle>Memory</SectionTitle>
+
+      {/* Metric card */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+        <MetricCard label="Entries" value={String(entries.length)} sub="memory files" color={t.accent} />
+      </div>
+
+      {/* Memory entries */}
+      {entries.length === 0 ? (
+        <Card>
+          <div style={{ padding: 32, textAlign: 'center', color: t.textMuted, fontFamily: FONTS.mono, fontSize: 12 }}>
+            <div style={{ fontSize: 32, opacity: 0.3, marginBottom: 12 }}>&#x25C8;</div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>No memory entries</div>
+            <div style={{ fontSize: 11 }}>Memory entries appear when .planning/memory/ contains .md files.</div>
+          </div>
+        </Card>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {entries.map((entry, i) => (
+            <Card key={entry.file || i}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
+                <div style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: t.accent }}>
+                  {entry.title}
+                </div>
+                <Badge color={t.build}>{entry.type}</Badge>
+              </div>
+              {entry.content && (
+                <div style={{
+                  fontFamily: FONTS.sans,
+                  fontSize: 12,
+                  color: t.textMuted,
+                  lineHeight: 1.5,
+                  whiteSpace: 'pre-wrap',
+                  overflow: 'hidden',
+                  maxHeight: 80,
+                }}>
+                  {entry.content.length > 300 ? entry.content.slice(0, 300) + '...' : entry.content}
+                </div>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function MemoryPage() {
+  return (
+    <ErrorBoundary>
+      <MemoryPageContent />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/Overview.jsx

@@ -0,0 +1,360 @@
+import { useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, MetricCard, SectionTitle, Badge, StatusDot, ErrorBoundary, PipelineView, AutoModeBanner, ProgressDisplay, NextUpBlock, CheckpointBox, ErrorBox } from '../components/ui/index.js';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import { TokenChart, PhaseDonut } from '../components/charts/index.js';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+import useDocumentTitle from '../hooks/useDocumentTitle.js';
+import useToast from '../hooks/useToast.jsx';
+
+const PHASE_COLORS = { Plan: 'plan', Build: 'build', Run: 'run' };
+
+function deriveNextCommand(s) {
+  const stopped = (s.stopped_at || '').toLowerCase();
+  if (stopped.includes('context')) return '$pbr:plan';
+  if (stopped.includes('plan')) return '$pbr:build';
+  if (stopped.includes('build')) return '$pbr:review';
+  if (stopped.includes('review')) return '$pbr:run';
+  return '$pbr:continue';
+}
+
+function OverviewContent({ project }) {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+  const status = useFetch('/api/status');
+  const telemetry = useFetch('/api/telemetry');
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const ws = useWebSocket(wsUrl);
+  useDocumentTitle({ wsEvents: ws.events });
+
+  useEffect(() => {
+    if (ws.events.length > 0) {
+      status.refetch();
+      telemetry.refetch();
+    }
+  }, [ws.events.length, status.refetch, telemetry.refetch]);
+
+  useEffect(() => {
+    if (status.error) addToast('error', status.error.message);
+  }, [status.error, addToast]);
+
+  useEffect(() => {
+    if (telemetry.error) addToast('error', telemetry.error.message);
+  }, [telemetry.error, addToast]);
+
+  const isLoading = status.loading || telemetry.loading;
+  const fetchError = status.error || telemetry.error;
+
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <SkeletonCard height={80} />
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+          {[1, 2, 3, 4, 5].map((i) => (
+            <SkeletonCard key={i} height={90} />
+          ))}
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
+          <SkeletonCard height={220} />
+          <SkeletonCard height={220} />
+        </div>
+      </div>
+    );
+  }
+
+  if (fetchError) {
+    return (
+      <ErrorBox
+        title="Error loading data"
+        message={fetchError.message}
+        onRetry={() => { status.refetch(); telemetry.refetch(); }}
+      />
+    );
+  }
+
+  const s = status.data || {};
+  const tel = telemetry.data || {};
+
+  const proj = project || { name: s.project || 'My Project', repo: s.repo || 'user/repo', branch: s.branch || 'main' };
+  const phase = s.phase || 'Build';
+
+  const pills = ['Plan', 'Build', 'Run'];
+  const activePill = phase;
+
+  const tokenHistory = tel.tokenHistory || [];
+  const phaseDist = tel.phaseDistribution || [];
+  const subagentPerf = tel.subagents || s.subagents || [];
+
+  const subagentCount = subagentPerf.length || 0;
+  const totalTokens = subagentPerf.reduce((sum, sa) => sum + (sa.tokens || 0), 0);
+  const successCount = subagentPerf.filter((sa) => sa.status === 'success').length;
+  const successRate = subagentCount > 0 ? Math.round((successCount / subagentCount) * 100) : 0;
+  const contextUsed = s.contextUsed || tel.contextUsed || 0;
+  const cost = s.cost || tel.cost || 0;
+
+  // Pipeline stage derivation from status data
+  const PIPELINE_STAGES = [
+    { id: 'questioning', label: 'Question' },
+    { id: 'research', label: 'Research' },
+    { id: 'requirements', label: 'Requirements' },
+    { id: 'roadmap', label: 'Roadmap' },
+    { id: 'plan', label: 'Plan' },
+    { id: 'build', label: 'Build' },
+    { id: 'review', label: 'Review' },
+  ];
+  const stoppedAt = s.stopped_at || s.status || '';
+  const currentStageId = stoppedAt.toLowerCase().includes('build') ? 'build'
+    : stoppedAt.toLowerCase().includes('plan') ? 'plan'
+    : stoppedAt.toLowerCase().includes('review') ? 'review'
+    : stoppedAt.toLowerCase().includes('roadmap') ? 'roadmap'
+    : stoppedAt.toLowerCase().includes('research') ? 'research'
+    : stoppedAt.toLowerCase().includes('requirement') ? 'requirements'
+    : stoppedAt.toLowerCase().includes('question') ? 'questioning'
+    : 'build';
+
+  // Context budget data
+  const budgetTotal = s.budgetTotal || tel.budgetTotal || 200000;
+  const budgetUsed = s.budgetUsed || tel.budgetUsed || 0;
+  const budgetProjected = s.budgetProjected || tel.budgetProjected || 0;
+  const budgetPct = budgetTotal > 0 ? Math.round((budgetUsed / budgetTotal) * 100) : 0;
+  const budgetColor = budgetPct > 70 ? t.warning : t.plan;
+
+  // Auto mode data
+  const autoMode = s.autoMode || tel.autoMode || null;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* Auto-mode banner */}
+      <AutoModeBanner autoMode={autoMode} />
+
+      {/* Session banner */}
+      <Card
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: 12,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 3,
+            background: `linear-gradient(90deg, ${t.plan}, ${t.build}, ${t.run})`,
+          }}
+        />
+        <div>
+          <div
+            style={{
+              fontFamily: FONTS.mono,
+              fontSize: 10,
+              color: t.textMuted,
+              textTransform: 'uppercase',
+              letterSpacing: 1.5,
+              marginBottom: 4,
+            }}
+          >
+            Current Session
+          </div>
+          <div
+            style={{
+              fontSize: 18,
+              fontWeight: 700,
+              color: t.accent,
+              fontFamily: FONTS.sans,
+            }}
+          >
+            {proj.name}
+          </div>
+          <div
+            style={{
+              fontFamily: FONTS.mono,
+              fontSize: 11,
+              color: t.textMuted,
+              marginTop: 2,
+            }}
+          >
+            {proj.repo} / {proj.branch}
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          {pills.map((p) => (
+            <span
+              key={p}
+              style={{
+                padding: '4px 12px',
+                borderRadius: 6,
+                fontFamily: FONTS.mono,
+                fontSize: 11,
+                fontWeight: p === activePill ? 700 : 400,
+                background: p === activePill ? `${t[PHASE_COLORS[p]]}22` : 'transparent',
+                color: p === activePill ? t[PHASE_COLORS[p]] : t.textDim,
+                border: `1px solid ${p === activePill ? t[PHASE_COLORS[p]] + '44' : t.border}`,
+              }}
+            >
+              {p}
+            </span>
+          ))}
+        </div>
+      </Card>
+
+      {/* Pipeline tracker */}
+      <Card>
+        <SectionTitle>Pipeline</SectionTitle>
+        <PipelineView stages={PIPELINE_STAGES} currentStage={currentStageId} />
+      </Card>
+
+      {/* Workflow status checkpoint */}
+      <CheckpointBox
+        title="Workflow Status"
+        status={currentStageId === 'review' ? 'passed' : 'pending'}
+        items={PIPELINE_STAGES.map((stage, idx) => ({
+          label: stage.label,
+          checked: idx <= PIPELINE_STAGES.findIndex((ps) => ps.id === currentStageId),
+        }))}
+        readOnly={true}
+      />
+
+      {/* 5 metric cards */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))',
+          gap: 12,
+        }}
+      >
+        <MetricCard label="Subagents" value={String(subagentCount)} sub="active this session" color={t.build} />
+        <MetricCard label="Tokens" value={totalTokens > 1000 ? `${(totalTokens / 1000).toFixed(1)}K` : String(totalTokens)} sub="input + output" color={t.accent} />
+        <MetricCard label="Success" value={`${successRate}%`} sub="pass rate" color={t.success} />
+        <MetricCard label="Context" value={typeof contextUsed === 'number' ? `${contextUsed}%` : String(contextUsed)} sub="budget used" color={t.plan} />
+        <MetricCard label="Cost" value={typeof cost === 'number' ? `$${cost.toFixed(2)}` : String(cost)} sub="estimated" color={t.info} />
+      </div>
+
+      {/* Context budget gauge */}
+      {budgetUsed > 0 && (
+        <ProgressDisplay
+          label="Context Budget"
+          value={budgetUsed}
+          total={budgetTotal}
+          sub={budgetProjected > 0 ? `Projected: ${budgetProjected.toLocaleString()} tokens` : undefined}
+          color={budgetColor}
+        />
+      )}
+
+      {/* Charts row */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '2fr 1fr',
+          gap: 12,
+        }}
+      >
+        <Card>
+          <SectionTitle>Token Usage</SectionTitle>
+          <TokenChart data={tokenHistory} />
+        </Card>
+        <Card>
+          <SectionTitle>Phases</SectionTitle>
+          <PhaseDonut data={phaseDist} />
+        </Card>
+      </div>
+
+      {/* Next action block */}
+      {s.stopped_at && (
+        <NextUpBlock
+          command={deriveNextCommand(s)}
+          phaseName={s.stopped_at}
+        />
+      )}
+
+      {/* Subagent activity table */}
+      <Card>
+        <SectionTitle>Subagent Activity</SectionTitle>
+        <div style={{ overflowX: 'auto' }}>
+          <table
+            style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              fontFamily: FONTS.mono,
+              fontSize: 11,
+            }}
+          >
+            <thead>
+              <tr
+                style={{
+                  borderBottom: `1px solid ${t.border}`,
+                  textAlign: 'left',
+                }}
+              >
+                {['Agent', 'Task', 'Phase', 'Model', 'Tokens', 'Time', 'Status'].map((h) => (
+                  <th
+                    key={h}
+                    style={{
+                      padding: '6px 8px',
+                      color: t.textMuted,
+                      fontWeight: 600,
+                      fontSize: 10,
+                      textTransform: 'uppercase',
+                      letterSpacing: 0.8,
+                    }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {subagentPerf.map((row, i) => (
+                <tr
+                  key={i}
+                  style={{
+                    borderBottom: `1px solid ${t.border}`,
+                    transition: 'background 0.15s',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = t.surfaceAlt;
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  <td style={{ padding: '7px 8px', color: t.accent, fontWeight: 600 }}>
+                    {row.name}
+                  </td>
+                  <td style={{ padding: '7px 8px', color: t.text }}>{row.task}</td>
+                  <td style={{ padding: '7px 8px' }}>
+                    <Badge color={t[PHASE_COLORS[row.phase]]}>{row.phase}</Badge>
+                  </td>
+                  <td style={{ padding: '7px 8px', color: t.textMuted }}>{row.model}</td>
+                  <td style={{ padding: '7px 8px', color: t.text }}>
+                    {(row.tokens / 1000).toFixed(1)}K
+                  </td>
+                  <td style={{ padding: '7px 8px', color: t.textMuted }}>{row.time}</td>
+                  <td style={{ padding: '7px 8px' }}>
+                    <StatusDot status={row.status} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default function Overview({ project }) {
+  return (
+    <ErrorBoundary>
+      <OverviewContent project={project} />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/PhaseDetailView.jsx

@@ -0,0 +1,216 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, Badge, ErrorBoundary, QualityGateBadge, CheckpointBox } from '../components/ui/index.js';
+import TabBar from '../components/ui/TabBar.jsx';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+
+const TABS = ['plans', 'summaries', 'verifications', 'context'];
+
+function statusColor(status, tokens) {
+  const s = (status || '').toLowerCase();
+  if (s === 'complete' || s === 'done' || s === 'passed') return tokens.success;
+  if (s === 'partial' || s === 'in-progress') return tokens.plan;
+  if (s === 'failed' || s === 'checkpoint') return tokens.error;
+  return tokens.textDim;
+}
+
+function PlanCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text, flex: 1 }}>
+            {item.file}
+          </span>
+          {item.plan && (
+            <Badge color={tokens.accent}>Plan {item.plan}</Badge>
+          )}
+          {item.status && (
+            <Badge color={statusColor(item.status, tokens)}>{item.status}</Badge>
+          )}
+        </div>
+        {item.type && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textDim }}>
+            Type: {item.type}
+          </span>
+        )}
+        {item.tasks_total != null && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textMuted }}>
+            Tasks: {item.tasks_total}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function SummaryCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text, flex: 1 }}>
+            {item.file}
+          </span>
+          {item.status && (
+            <Badge color={statusColor(item.status, tokens)}>{item.status}</Badge>
+          )}
+        </div>
+        {(item.tasks_completed != null || item.tasks_total != null) && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textMuted }}>
+            Completed: {item.tasks_completed ?? '?'}/{item.tasks_total ?? '?'}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function VerificationCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text, flex: 1 }}>
+            {item.file}
+          </span>
+          {item.status && (
+            <Badge color={statusColor(item.status, tokens)}>{item.status}</Badge>
+          )}
+          {item.status && <QualityGateBadge passed={item.status === 'passed' || item.status === 'complete'} />}
+        </div>
+        {(item.must_haves_passed != null || item.must_haves_total != null) && (
+          <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: tokens.textMuted }}>
+            Must-haves: {item.must_haves_passed ?? '?'}/{item.must_haves_total ?? '?'}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function ContextCard({ item, tokens }) {
+  return (
+    <Card style={{ padding: '12px 16px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <span style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: tokens.text }}>
+          {item.file}
+        </span>
+        {item.body && (
+          <span style={{ fontFamily: FONTS.sans, fontSize: 12, color: tokens.textMuted, lineHeight: 1.4, whiteSpace: 'pre-wrap' }}>
+            {item.body.slice(0, 200)}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+const TAB_RENDERERS = {
+  plans: PlanCard,
+  summaries: SummaryCard,
+  verifications: VerificationCard,
+  context: ContextCard,
+};
+
+function PhaseDetailContent({ phaseSlug, phaseName, onBack }) {
+  const { tokens } = useTheme();
+  const [activeTab, setActiveTab] = useState('plans');
+  const { data, loading, error, refetch } = useFetch(`/api/roadmap/phases/${phaseSlug}`);
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const { events: wsEvents } = useWebSocket(wsUrl);
+
+  useEffect(() => {
+    if (wsEvents.length > 0) refetch();
+  }, [wsEvents.length, refetch]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <SkeletonCard height={40} />
+        <SkeletonCard height={30} />
+        {[1, 2, 3].map((i) => (
+          <SkeletonCard key={i} height={70} />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span
+            onClick={onBack}
+            style={{ cursor: 'pointer', fontFamily: FONTS.mono, fontSize: 14, color: tokens.accent }}
+          >
+            &larr; Back
+          </span>
+          <span style={{ fontFamily: FONTS.sans, fontSize: 16, fontWeight: 700, color: tokens.text }}>
+            {phaseName || phaseSlug}
+          </span>
+        </div>
+        <Card style={{ border: `1px solid ${tokens.error}`, color: tokens.error }}>
+          <div style={{ fontFamily: FONTS.mono, fontSize: 12 }}>Error loading phase: {error.message}</div>
+        </Card>
+      </div>
+    );
+  }
+
+  const items = (data && data[activeTab]) || [];
+  const Renderer = TAB_RENDERERS[activeTab];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {/* Header with back navigation */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <span
+          onClick={onBack}
+          style={{ cursor: 'pointer', fontFamily: FONTS.mono, fontSize: 14, color: tokens.accent }}
+        >
+          &larr; Back
+        </span>
+        <span style={{ fontFamily: FONTS.sans, fontSize: 16, fontWeight: 700, color: tokens.text }}>
+          {phaseName || phaseSlug}
+        </span>
+      </div>
+
+      {/* Tab bar */}
+      <TabBar tabs={TABS} active={activeTab} onChange={setActiveTab} />
+
+      {/* Phase verification checkpoint summary */}
+      {activeTab === 'verifications' && items.length > 0 && (
+        <CheckpointBox
+          title="Phase Verification"
+          status={items.every(i => i.status === 'passed' || i.status === 'complete') ? 'passed' : items.some(i => i.status === 'failed') ? 'failed' : 'pending'}
+          items={items.map(i => ({ label: i.file, checked: i.status === 'passed' || i.status === 'complete' }))}
+          readOnly={true}
+        />
+      )}
+
+      {/* Tab content */}
+      {items.length === 0 ? (
+        <Card>
+          <div style={{ fontFamily: FONTS.sans, fontSize: 13, color: tokens.textMuted, textAlign: 'center', padding: 20 }}>
+            No {activeTab} found
+          </div>
+        </Card>
+      ) : (
+        items.map((item, idx) => (
+          <Renderer key={item.file || idx} item={item} tokens={tokens} />
+        ))
+      )}
+    </div>
+  );
+}
+
+export default function PhaseDetailView({ phaseSlug, phaseName, onBack }) {
+  return (
+    <ErrorBoundary>
+      <PhaseDetailContent phaseSlug={phaseSlug} phaseName={phaseName} onBack={onBack} />
+    </ErrorBoundary>
+  );
+}