@sienklogic/plan-build-run 2.19.0 → 2.19.2

package/dashboard/src/pages/RoadmapPage.jsx

@@ -0,0 +1,251 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, Badge, ProgressBar, ErrorBoundary } 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 useToast from '../hooks/useToast.jsx';
+
+/**
+ * Map a phase status string to a color token and display label.
+ */
+function statusStyle(status, tokens) {
+  const s = (status || '').toLowerCase();
+  if (s === 'done' || s === 'built' || s === 'verified') {
+    return { color: tokens.success, label: status };
+  }
+  if (s === 'in-progress' || s === 'building' || s === 'planned') {
+    return { color: tokens.plan, label: status };
+  }
+  return { color: tokens.textDim, label: status || 'Not Started' };
+}
+
+function MilestoneHeader({ milestone, phases, tokens }) {
+  if (!milestone) return null;
+  const doneCount = phases.filter(p => {
+    const s = (p.status || '').toLowerCase();
+    return s === 'done' || s === 'built' || s === 'verified';
+  }).length;
+  const total = phases.length;
+  const pct = total > 0 ? Math.round((doneCount / total) * 100) : 0;
+
+  return (
+    <Card style={{ marginBottom: 16 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span style={{ fontFamily: FONTS.sans, fontSize: 18, fontWeight: 700, color: tokens.text }}>
+            {milestone.name}
+          </span>
+          <span style={{ fontFamily: FONTS.mono, fontSize: 12, color: tokens.textMuted }}>
+            {doneCount}/{total} phases
+          </span>
+        </div>
+        {milestone.goal && (
+          <span style={{ fontFamily: FONTS.sans, fontSize: 13, color: tokens.textMuted, lineHeight: 1.4 }}>
+            {milestone.goal}
+          </span>
+        )}
+        <ProgressBar pct={pct} color={tokens.success} />
+      </div>
+    </Card>
+  );
+}
+
+function PhaseCard({ phase, tokens, onClick, hovered }) {
+  const { color, label } = statusStyle(phase.status, tokens);
+
+  return (
+    <Card style={{
+      padding: '14px 16px',
+      cursor: 'pointer',
+      borderColor: hovered ? tokens.accent : undefined,
+      transition: 'border-color 0.15s',
+    }} onClick={onClick}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {/* Header: number + name + badge */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{
+            fontFamily: FONTS.mono,
+            fontSize: 12,
+            fontWeight: 700,
+            color: tokens.textDim,
+            minWidth: 28,
+          }}>
+            {String(phase.number).padStart(2, '0')}
+          </span>
+          <span style={{
+            fontFamily: FONTS.sans,
+            fontSize: 14,
+            fontWeight: 600,
+            color: tokens.text,
+            flex: 1,
+          }}>
+            {phase.name}
+          </span>
+          <Badge color={color}>{label}</Badge>
+        </div>
+
+        {/* Goal (truncated to 2 lines) */}
+        {phase.goal && (
+          <span style={{
+            fontFamily: FONTS.sans,
+            fontSize: 12,
+            color: tokens.textMuted,
+            lineHeight: 1.4,
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            marginLeft: 38,
+          }}>
+            {phase.goal}
+          </span>
+        )}
+
+        {/* Dependency info */}
+        {phase.dependsOn && phase.dependsOn !== 'None (starting phase)' && (
+          <span style={{
+            fontFamily: FONTS.sans,
+            fontSize: 11,
+            color: tokens.textDim,
+            marginLeft: 38,
+          }}>
+            Depends on: {phase.dependsOn}
+          </span>
+        )}
+
+        {/* Implements */}
+        {phase.implements && (
+          <span style={{
+            fontFamily: FONTS.mono,
+            fontSize: 11,
+            color: tokens.textDim,
+            marginLeft: 38,
+          }}>
+            {phase.implements}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+/**
+ * Parse dependency relationships from phases and render text-based arrows.
+ */
+function DependencyMap({ phases, tokens }) {
+  const deps = [];
+  for (const phase of phases) {
+    if (!phase.dependsOn || phase.dependsOn === 'None (starting phase)') continue;
+    // Extract phase numbers from dependsOn string (e.g., "Phase 01, Phase 02" or "01-slug")
+    const matches = phase.dependsOn.match(/(\d{2})/g);
+    if (matches) {
+      for (const depNum of matches) {
+        deps.push({ from: depNum, to: String(phase.number).padStart(2, '0') });
+      }
+    }
+  }
+
+  if (deps.length === 0) return null;
+
+  return (
+    <Card style={{ marginBottom: 8 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{
+          fontFamily: FONTS.mono,
+          fontSize: 11,
+          fontWeight: 600,
+          color: tokens.textMuted,
+          textTransform: 'uppercase',
+          letterSpacing: 1,
+          marginBottom: 4,
+        }}>
+          Dependencies
+        </span>
+        {deps.map((dep, idx) => (
+          <div key={idx} style={{ padding: '2px 0', fontFamily: FONTS.mono, fontSize: 12 }}>
+            <span style={{ color: tokens.textMuted }}>Phase {dep.from}</span>
+            <span style={{ color: tokens.textDim }}>{' --> '}</span>
+            <span style={{ color: tokens.textMuted }}>Phase {dep.to}</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+function RoadmapContent({ onSelectPhase }) {
+  const { tokens } = useTheme();
+  const { addToast } = useToast();
+  const [hoveredPhase, setHoveredPhase] = useState(null);
+  const { data, loading, error, refetch } = useFetch('/api/roadmap');
+  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]);
+
+  useEffect(() => {
+    if (error) addToast('error', error.message);
+  }, [error, addToast]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <SkeletonCard height={80} />
+        {[1, 2, 3, 4].map((i) => (
+          <SkeletonCard key={i} height={90} />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card style={{ border: `1px solid ${tokens.error}`, color: tokens.error }}>
+        <div style={{ fontFamily: FONTS.mono, fontSize: 12 }}>Error loading roadmap: {error.message}</div>
+      </Card>
+    );
+  }
+
+  const milestone = data && data.milestone;
+  const phases = (data && data.phases) || [];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <MilestoneHeader milestone={milestone} phases={phases} tokens={tokens} />
+      <DependencyMap phases={phases} tokens={tokens} />
+      {phases.map((phase) => (
+        <div
+          key={phase.number}
+          onMouseEnter={() => setHoveredPhase(phase.number)}
+          onMouseLeave={() => setHoveredPhase(null)}
+        >
+          <PhaseCard
+            phase={phase}
+            tokens={tokens}
+            hovered={hoveredPhase === phase.number}
+            onClick={() => onSelectPhase && onSelectPhase({ slug: phase.slug, name: phase.name })}
+          />
+        </div>
+      ))}
+      {phases.length === 0 && (
+        <Card>
+          <div style={{ fontFamily: FONTS.sans, fontSize: 13, color: tokens.textMuted, textAlign: 'center', padding: 20 }}>
+            No phases found in ROADMAP.md
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default function RoadmapPage({ onSelectPhase }) {
+  return (
+    <ErrorBoundary>
+      <RoadmapContent onSelectPhase={onSelectPhase} />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/SessionsPage.jsx

@@ -0,0 +1,117 @@
+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 SessionsPageContent() {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+
+  const { data, loading, error, refetch } = useFetch('/api/sessions');
+
+  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 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+          <SkeletonCard height={90} />
+        </div>
+        <SkeletonCard height={300} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorBox
+        title="Error loading sessions"
+        message={error.message}
+        onRetry={refetch}
+      />
+    );
+  }
+
+  const sessions = Array.isArray(data) ? data : [];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <SectionTitle>Sessions</SectionTitle>
+
+      {/* Metric cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+        <MetricCard label="Sessions" value={String(sessions.length)} sub="snapshots" color={t.accent} />
+      </div>
+
+      {/* Sessions list */}
+      {sessions.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 session snapshots found</div>
+            <div style={{ fontSize: 11 }}>Session snapshots appear when .planning/sessions/ contains files.</div>
+          </div>
+        </Card>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {sessions.map((session, i) => (
+            <Card key={session.id || session.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 }}>
+                  {session.id || session.file || `Session ${i + 1}`}
+                </div>
+                <div style={{ display: 'flex', gap: 6, flexShrink: 0, marginLeft: 12 }}>
+                  {session.status && <Badge color={t.build}>{session.status}</Badge>}
+                  {session.duration && <Badge color={t.plan}>{session.duration}</Badge>}
+                </div>
+              </div>
+              {session.date && (
+                <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: t.textMuted, marginBottom: 6 }}>
+                  {new Date(session.date).toLocaleString()}
+                </div>
+              )}
+              {session.body && (
+                <div style={{
+                  fontFamily: FONTS.sans,
+                  fontSize: 12,
+                  color: t.textMuted,
+                  lineHeight: 1.5,
+                  whiteSpace: 'pre-wrap',
+                  overflow: 'hidden',
+                  maxHeight: 60,
+                }}>
+                  {session.body.length > 200 ? session.body.slice(0, 200) + '...' : session.body}
+                </div>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SessionsPage() {
+  return (
+    <ErrorBoundary>
+      <SessionsPageContent />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/Telemetry.jsx

@@ -0,0 +1,166 @@
+import { useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, MetricCard, SectionTitle, ErrorBoundary } from '../components/ui/index.js';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import { SuccessTrend } from '../components/charts/index.js';
+import { ContextRadar } from '../components/charts/index.js';
+import { BudgetBars } from '../components/charts/index.js';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+import useToast from '../hooks/useToast.jsx';
+
+function TelemetryContent() {
+  const { tokens } = useTheme();
+  const { addToast } = useToast();
+  const { data, loading, error, refetch } = useFetch('/api/telemetry');
+  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]);
+
+  useEffect(() => {
+    if (error) addToast('error', error.message);
+  }, [error, addToast]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+          {[1, 2, 3, 4].map((i) => (
+            <SkeletonCard key={i} height={90} />
+          ))}
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+          <SkeletonCard height={220} />
+          <SkeletonCard height={220} />
+        </div>
+        <SkeletonCard height={220} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card style={{ border: `1px solid ${tokens.error}`, color: tokens.error }}>
+        <SectionTitle>Error loading telemetry</SectionTitle>
+        <div style={{ fontFamily: FONTS.mono, fontSize: 12 }}>{error.message}</div>
+      </Card>
+    );
+  }
+
+  const d = data || {};
+  const avgTokens = d.avgTokens || '0';
+  const avgTime = d.avgTime || '0s';
+  const compression = d.compression || '0x';
+  const cost = d.cost || '$0.00';
+
+  const successHistory = d.successHistory || [];
+  const contextBalance = d.contextBalance || [];
+  const subagentBudgets = d.subagentBudgets || [];
+
+  const sessions = d.sessions || [];
+  const agg = d.sessionAggregates || {};
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {/* Metric cards */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))',
+          gap: 12,
+        }}
+      >
+        <MetricCard label="Avg Tokens/SA" value={String(avgTokens)} color={tokens.accent} />
+        <MetricCard label="Avg Time" value={String(avgTime)} color={tokens.warning} />
+        <MetricCard label="Compression" value={String(compression)} color={tokens.success} />
+        <MetricCard label="Cost" value={String(cost)} color={tokens.plan} />
+      </div>
+
+      {/* Session metric cards */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))',
+          gap: 12,
+        }}
+      >
+        <MetricCard label="Total Sessions" value={String(agg.totalSessions || 0)} color={tokens.accent} />
+        <MetricCard label="Avg Duration" value={(agg.avgDuration || 0) + 'm'} color={tokens.warning} />
+        <MetricCard label="Avg Agents" value={String(agg.avgAgents || 0)} color={tokens.success} />
+        <MetricCard label="Avg Compliance" value={(agg.avgCompliance || 0) + '%'} color={tokens.plan} />
+      </div>
+
+      {/* Two-column chart row */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: 12,
+        }}
+      >
+        <Card>
+          <SectionTitle>Success Trend</SectionTitle>
+          <SuccessTrend data={successHistory} />
+        </Card>
+        <Card>
+          <SectionTitle>Context Radar</SectionTitle>
+          <ContextRadar data={contextBalance} />
+        </Card>
+      </div>
+
+      {/* Budget chart */}
+      <Card>
+        <SectionTitle>Token Budget</SectionTitle>
+        <BudgetBars data={subagentBudgets} />
+      </Card>
+
+      {/* Session History */}
+      <Card>
+        <SectionTitle>Session History</SectionTitle>
+        {sessions.length === 0 ? (
+          <div style={{ fontFamily: FONTS.mono, fontSize: 12, color: tokens.muted, padding: '12px 0' }}>
+            No session data yet
+          </div>
+        ) : (
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: FONTS.mono, fontSize: 12 }}>
+              <thead>
+                <tr style={{ borderBottom: `1px solid ${tokens.border}` }}>
+                  {['Date', 'Duration', 'Agents', 'Commits', 'Plans', 'Compliance'].map((h) => (
+                    <th key={h} style={{ textAlign: 'left', padding: '6px 8px', color: tokens.muted, fontWeight: 600 }}>{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {sessions.map((s, i) => (
+                  <tr key={i} style={{ borderBottom: `1px solid ${tokens.border}` }}>
+                    <td style={{ padding: '6px 8px' }}>{new Date(s.start).toLocaleDateString()}</td>
+                    <td style={{ padding: '6px 8px' }}>{s.duration_minutes + 'm'}</td>
+                    <td style={{ padding: '6px 8px' }}>{s.agents_spawned}</td>
+                    <td style={{ padding: '6px 8px' }}>{s.commits_created}</td>
+                    <td style={{ padding: '6px 8px' }}>{s.plans_executed}</td>
+                    <td style={{ padding: '6px 8px', color: s.compliance_pct >= 80 ? tokens.success : tokens.warning }}>
+                      {s.compliance_pct + '%'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+export default function Telemetry() {
+  return (
+    <ErrorBoundary>
+      <TelemetryContent />
+    </ErrorBoundary>
+  );
+}

package/dashboard/src/pages/planning/DecisionsTab.jsx

@@ -0,0 +1,153 @@
+import { useState } from 'react';
+import { useTheme } from '../../theme/ThemeProvider.jsx';
+import { FONTS } from '../../lib/constants.js';
+import { Card, Badge, SectionTitle } from '../../components/ui/index.js';
+import { apiPost } from '../../lib/api.js';
+import useToast from '../../hooks/useToast.jsx';
+
+export default function DecisionsTab({ decisions, onCreateDecision }) {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+  const [showForm, setShowForm] = useState(false);
+  const [phase, setPhase] = useState('');
+  const [text, setText] = useState('');
+  const [filter, setFilter] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const items = decisions || [];
+  const filtered = filter
+    ? items.filter(
+        (d) =>
+          d.text.toLowerCase().includes(filter.toLowerCase()) ||
+          d.phase.toLowerCase().includes(filter.toLowerCase())
+      )
+    : items;
+
+  async function handleSave() {
+    if (!text.trim()) return;
+    setSaving(true);
+    try {
+      await apiPost('/api/planning/decisions', { phase: phase || 'General', text });
+      setPhase('');
+      setText('');
+      setShowForm(false);
+      if (onCreateDecision) onCreateDecision();
+    } catch (err) {
+      addToast('error', 'Failed to save decision: ' + err.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleCancel() {
+    setPhase('');
+    setText('');
+    setShowForm(false);
+  }
+
+  const inputStyle = {
+    fontFamily: FONTS.mono,
+    fontSize: 12,
+    padding: '6px 10px',
+    background: t.surfaceAlt,
+    border: `1px solid ${t.border}`,
+    borderRadius: 6,
+    color: t.text,
+    outline: 'none',
+    width: '100%',
+    boxSizing: 'border-box',
+  };
+
+  const btnStyle = (bg) => ({
+    fontFamily: FONTS.mono,
+    fontSize: 11,
+    fontWeight: 600,
+    padding: '5px 14px',
+    borderRadius: 6,
+    border: 'none',
+    cursor: 'pointer',
+    background: bg,
+    color: '#fff',
+    opacity: saving ? 0.6 : 1,
+  });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+        <SectionTitle>Decisions ({filtered.length})</SectionTitle>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <input
+            type="text"
+            placeholder="Filter decisions..."
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            style={{ ...inputStyle, width: 200 }}
+          />
+          {!showForm && (
+            <button
+              onClick={() => setShowForm(true)}
+              style={btnStyle(t.accent)}
+            >
+              + Add Decision
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Inline create form */}
+      {showForm && (
+        <Card style={{ border: `1px solid ${t.accent}44` }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <input
+              type="text"
+              placeholder="Phase (e.g. Phase 01)"
+              value={phase}
+              onChange={(e) => setPhase(e.target.value)}
+              style={inputStyle}
+            />
+            <textarea
+              placeholder="Decision text..."
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              rows={3}
+              style={{ ...inputStyle, resize: 'vertical' }}
+            />
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button onClick={handleSave} disabled={saving} style={btnStyle(t.success)}>
+                Save
+              </button>
+              <button onClick={handleCancel} style={btnStyle(t.textDim)}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Decision list */}
+      {filtered.length === 0 && (
+        <Card>
+          <div style={{ fontFamily: FONTS.mono, fontSize: 12, color: t.textMuted, textAlign: 'center', padding: 20 }}>
+            {items.length === 0 ? 'No decisions recorded yet.' : 'No decisions match filter.'}
+          </div>
+        </Card>
+      )}
+
+      {filtered.map((d) => (
+        <Card key={d.id}>
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
+            <Badge color={t.plan}>{d.phase}</Badge>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontFamily: FONTS.sans, fontSize: 13, color: t.text, lineHeight: 1.4 }}>
+                {d.text}
+              </div>
+              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: t.textDim, marginTop: 4 }}>
+                {d.created}
+              </div>
+            </div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}