feat(web): project detail views — missions, tasks, PRD viewer (#122) (#140)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/projects/mission-timeline.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+import type { Mission, MissionStatus } from '@/lib/types';
+
+interface MissionTimelineProps {
+  missions: Mission[];
+}
+
+const statusOrder: MissionStatus[] = ['planning', 'active', 'paused', 'completed', 'failed'];
+
+const statusStyles: Record<MissionStatus, { dot: string; label: string; badge: string }> = {
+  planning: {
+    dot: 'bg-gray-400',
+    label: 'text-gray-400',
+    badge: 'bg-gray-600/20 text-gray-300',
+  },
+  active: {
+    dot: 'bg-blue-400',
+    label: 'text-blue-400',
+    badge: 'bg-blue-600/20 text-blue-400',
+  },
+  paused: {
+    dot: 'bg-warning',
+    label: 'text-warning',
+    badge: 'bg-warning/20 text-warning',
+  },
+  completed: {
+    dot: 'bg-success',
+    label: 'text-success',
+    badge: 'bg-success/20 text-success',
+  },
+  failed: {
+    dot: 'bg-error',
+    label: 'text-error',
+    badge: 'bg-error/20 text-error',
+  },
+};
+
+function sortMissions(missions: Mission[]): Mission[] {
+  return [...missions].sort((a, b) => {
+    const aIdx = statusOrder.indexOf(a.status);
+    const bIdx = statusOrder.indexOf(b.status);
+    if (aIdx !== bIdx) return aIdx - bIdx;
+    return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+  });
+}
+
+export function MissionTimeline({ missions }: MissionTimelineProps): React.ReactElement {
+  if (missions.length === 0) {
+    return (
+      <div className="py-6 text-center">
+        <p className="text-sm text-text-muted">No missions for this project</p>
+      </div>
+    );
+  }
+
+  const sorted = sortMissions(missions);
+
+  return (
+    <ol className="relative space-y-0">
+      {sorted.map((mission, idx) => {
+        const styles = statusStyles[mission.status] ?? statusStyles.planning;
+        const isLast = idx === sorted.length - 1;
+        return (
+          <li key={mission.id} className="relative flex gap-4 pb-6 last:pb-0">
+            {/* Vertical line */}
+            {!isLast && <div className="absolute left-2.5 top-5 h-full w-px bg-surface-border" />}
+            {/* Status dot */}
+            <div
+              className={cn('mt-1 h-5 w-5 shrink-0 rounded-full border-2 border-bg', styles.dot)}
+            />
+            <div className="flex-1 rounded-lg border border-surface-border bg-surface-card p-3">
+              <div className="flex items-start justify-between gap-2">
+                <span className="text-sm font-medium text-text-primary">{mission.name}</span>
+                <span className={cn('shrink-0 rounded-full px-2 py-0.5 text-xs', styles.badge)}>
+                  {mission.status}
+                </span>
+              </div>
+              {mission.description && (
+                <p className="mt-1 text-xs text-text-muted">{mission.description}</p>
+              )}
+              <p className="mt-2 text-xs text-text-muted">
+                Created {new Date(mission.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

apps/web/src/components/projects/prd-viewer.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+interface PrdViewerProps {
+  content: string;
+}
+
+/**
+ * Lightweight markdown-to-HTML renderer for PRD content.
+ * Supports headings, bold, italic, inline code, code blocks, and lists.
+ * No external dependency — keeps bundle size minimal.
+ */
+function renderMarkdown(md: string): string {
+  let html = md
+    // Escape HTML entities first to prevent XSS
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  // Code blocks (must run before inline code)
+  html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_match, code: string) => {
+    return `<pre class="overflow-x-auto rounded-lg bg-surface-elevated p-4 my-4"><code class="text-xs text-text-secondary whitespace-pre">${code.trim()}</code></pre>`;
+  });
+
+  // Headings
+  html = html.replace(
+    /^#### (.+)$/gm,
+    '<h4 class="text-sm font-semibold text-text-primary mt-4 mb-1">$1</h4>',
+  );
+  html = html.replace(
+    /^### (.+)$/gm,
+    '<h3 class="text-base font-semibold text-text-primary mt-6 mb-2">$1</h3>',
+  );
+  html = html.replace(
+    /^## (.+)$/gm,
+    '<h2 class="text-lg font-semibold text-text-primary mt-8 mb-3">$1</h2>',
+  );
+  html = html.replace(
+    /^# (.+)$/gm,
+    '<h1 class="text-xl font-bold text-text-primary mt-8 mb-4">$1</h1>',
+  );
+
+  // Horizontal rule
+  html = html.replace(/^---$/gm, '<hr class="my-6 border-surface-border" />');
+
+  // Unordered list items
+  html = html.replace(
+    /^[-*] (.+)$/gm,
+    '<li class="ml-4 text-sm text-text-secondary list-disc">$1</li>',
+  );
+
+  // Ordered list items
+  html = html.replace(
+    /^\d+\. (.+)$/gm,
+    '<li class="ml-4 text-sm text-text-secondary list-decimal">$1</li>',
+  );
+
+  // Bold + italic
+  html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  // Bold
+  html = html.replace(
+    /\*\*(.+?)\*\*/g,
+    '<strong class="font-semibold text-text-primary">$1</strong>',
+  );
+  // Italic
+  html = html.replace(/\*(.+?)\*/g, '<em class="italic text-text-secondary">$1</em>');
+
+  // Inline code
+  html = html.replace(
+    /`([^`]+)`/g,
+    '<code class="rounded bg-surface-elevated px-1 py-0.5 text-xs text-text-secondary">$1</code>',
+  );
+
+  // Paragraphs — wrap lines that aren't already wrapped in a block element
+  const lines = html.split('\n');
+  const result: string[] = [];
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed === '') {
+      result.push('');
+    } else if (
+      trimmed.startsWith('<h') ||
+      trimmed.startsWith('<pre') ||
+      trimmed.startsWith('<li') ||
+      trimmed.startsWith('<hr')
+    ) {
+      result.push(trimmed);
+    } else {
+      result.push(`<p class="text-sm text-text-secondary leading-relaxed my-2">${trimmed}</p>`);
+    }
+  }
+
+  return result.join('\n');
+}
+
+export function PrdViewer({ content }: PrdViewerProps): React.ReactElement {
+  const html = renderMarkdown(content);
+
+  return <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: html }} />;
+}