feat(ui): completed-only view + inline verdict + no polling

Two product simplifications per user feedback:

1. TopicList shows ONLY completed debates. Status filter dropdown
   removed — debates in earlier lifecycle states (signup / debating)
   are agent internals; human readers care about the finished record.
   API call hardcodes status=completed. Page title is now 'completed
   debates' + 'archive' eyebrow.

2. TopicDetail merges verdict inline. Loads topic + arguments +
   verdict concurrently on mount, renders transcript followed by
   structured verdict + judge rationale on the same page. Drops the
   8-second polling loop (completed debates don't change).

The /topics/:id/verdict route is kept as a shareable permalink for
the verdict alone, but the in-page link to it from the detail view
is gone since the same content is already there.

Build delta: 179 → 178 KB / gzip 57.70 → 57.40 (-300 bytes; one
less route imported on the critical path).

src/pages/TopicDetail.tsx

@@ -1,56 +1,46 @@
-import { useEffect, useRef, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import { getTopic, listArguments } from '../api';
-import type { Argument, TopicDetail } from '../types';
-import { fmtTime, fmtRelative } from '../util';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getTopic, getVerdict, listArguments } from '../api';
+import type { Argument, TopicDetail, Verdict } from '../types';
+import { fmtTime } from '../util';
 
-// Polling interval for the live transcript. 8s strikes a balance — fast
-// enough that a new argument appears within an attentive viewer's
-// attention span, slow enough that idle tabs don't hammer the backend.
-const POLL_MS = 8000;
+// v0.3.1: completed-only view. Loads topic + arguments + verdict
+// concurrently on mount. No polling — completed debates don't change.
 
 export function TopicDetailPage() {
   const { id } = useParams<{ id: string }>();
   const [topic, setTopic] = useState<TopicDetail | null>(null);
   const [args, setArgs] = useState<Argument[]>([]);
+  const [verdict, setVerdict] = useState<Verdict | null>(null);
   const [err, setErr] = useState<string | null>(null);
-  const [lastTick, setLastTick] = useState<number>(0);
-  const stopped = useRef(false);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (!id) return;
-    stopped.current = false;
     const ac = new AbortController();
-
-    async function tick() {
-      try {
-        const [t, a] = await Promise.all([
-          getTopic(id!, ac.signal),
-          listArguments(id!, ac.signal),
-        ]);
-        if (stopped.current) return;
+    setLoading(true);
+    Promise.all([
+      getTopic(id, ac.signal),
+      listArguments(id, ac.signal),
+      getVerdict(id, ac.signal),
+    ])
+      .then(([t, a, v]) => {
         setTopic(t);
-        setArgs(a.arguments ?? []);
-        setLastTick(Date.now());
+        setArgs(a.arguments);
+        setVerdict(v);
         setErr(null);
-      } catch (e) {
-        const err = e as Error;
-        if (err.name !== 'AbortError') setErr(err.message);
-      }
-    }
-
-    tick();
-    const h = setInterval(tick, POLL_MS);
-    return () => {
-      stopped.current = true;
-      ac.abort();
-      clearInterval(h);
-    };
+      })
+      .catch((e: Error) => {
+        if (e.name !== 'AbortError') setErr(e.message);
+      })
+      .finally(() => setLoading(false));
+    return () => ac.abort();
   }, [id]);
 
   if (!id) return <div className="err">missing topic id in url</div>;
+  if (loading) return <div className="muted">loading…</div>;
   if (err && !topic) return <div className="err">{err}</div>;
-  if (!topic) return <div className="muted">loading…</div>;
+  if (!topic) return <div className="err">topic not found</div>;
 
   const proCamp = topic.camps?.find((c) => c.camp === 'pro');
   const conCamp = topic.camps?.find((c) => c.camp === 'con');
@@ -60,7 +50,7 @@ export function TopicDetailPage() {
     <div className="td">
       <div>
         <span className="eyebrow">
-          topic · <span className={`pill pill-${topic.status}`}>{topic.status}</span>
+          debate · <span className={`pill pill-${topic.status}`}>{topic.status}</span>
         </span>
         <h1>{topic.title}</h1>
         <p className="td-summary">{topic.summary}</p>
@@ -69,19 +59,13 @@ export function TopicDetailPage() {
       <div className="panel">
         <div className="panel-header">metadata</div>
         <div className="td-meta">
-          <div>
-            <div className="label">visibility</div>
-            <div className="value">{topic.visibility}</div>
-          </div>
           <div>
             <div className="label">verdict schema</div>
             <div className="value">{topic.verdict_schema_id}</div>
           </div>
           <div>
-            <div className="label">signup window</div>
-            <div className="value">
-              {fmtTime(topic.signup_open_at)} → {fmtTime(topic.signup_close_at)}
-            </div>
+            <div className="label">visibility</div>
+            <div className="value">{topic.visibility}</div>
           </div>
           <div>
             <div className="label">debate window</div>
@@ -93,20 +77,12 @@ export function TopicDetailPage() {
             <div className="label">creator</div>
             <div className="value">{topic.creator_user_id}</div>
           </div>
-          {topic.cancelled_reason && (
-            <div>
-              <div className="label">cancelled reason</div>
-              <div className="value err" style={{ padding: '4px 8px' }}>
-                {topic.cancelled_reason}
-              </div>
-            </div>
-          )}
         </div>
       </div>
 
       {topic.camps && topic.camps.length > 0 && (
         <div className="panel">
-          <div className="panel-header">camps (allocated)</div>
+          <div className="panel-header">camps</div>
           <div className="td-camps">
             <div className="td-camp">
               <div className="td-camp-label camp-pro">pro</div>
@@ -131,15 +107,9 @@ export function TopicDetailPage() {
       )}
 
       <div className="panel">
-        <div className="panel-header row">
-          <span>transcript ({args.length})</span>
-          <span className="spacer" />
-          <span className="muted">
-            polling every {POLL_MS / 1000}s · last refresh {fmtRelative(new Date(lastTick).toISOString())}
-          </span>
-        </div>
+        <div className="panel-header">transcript ({args.length})</div>
         {args.length === 0 ? (
-          <div className="td-empty">no arguments posted yet</div>
+          <div className="td-empty">no arguments were posted</div>
         ) : (
           args.map((a) => (
             <div key={a.id} className={`td-arg td-arg-${a.camp}`}>
@@ -148,7 +118,7 @@ export function TopicDetailPage() {
                 <span className="muted">{a.agent_id}</span>
                 <span className="spacer" />
                 <span className="muted" title={fmtTime(a.posted_at)}>
-                  {fmtRelative(a.posted_at)}
+                  {fmtTime(a.posted_at)}
                 </span>
               </div>
               <div className="td-arg-content">{a.content}</div>
@@ -157,14 +127,34 @@ export function TopicDetailPage() {
         )}
       </div>
 
-      {topic.status === 'completed' && (
+      {verdict && (
+        <>
           <div className="panel">
             <div className="panel-header">verdict</div>
-          <Link to={`/topics/${topic.id}/verdict`}>view verdict + rationale →</Link>
+            <pre className="vd-json">{JSON.stringify(verdict.verdict, null, 2)}</pre>
+            <div className="row muted" style={{ marginTop: 8, fontSize: '0.85em' }}>
+              <span>judge: {verdict.judge_agent_id}</span>
+              <span className="spacer" />
+              <span>produced: {fmtTime(verdict.produced_at)}</span>
+              {verdict.tokens_input + verdict.tokens_output > 0 && (
+                <span>
+                  tokens: {verdict.tokens_input} in / {verdict.tokens_output} out
+                </span>
+              )}
             </div>
+          </div>
+          <div className="panel">
+            <div className="panel-header">rationale</div>
+            <div className="vd-rationale">{verdict.rationale}</div>
+          </div>
+        </>
       )}
 
-      {err && <div className="err">refresh error: {err}</div>}
+      {!verdict && topic.status === 'completed' && (
+        <div className="panel td-empty">
+          no verdict was recorded (judge may have failed to submit)
+        </div>
+      )}
     </div>
   );
 }

src/pages/TopicList.tsx

@@ -1,20 +1,15 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { listTopics } from '../api';
-import type { Topic, TopicStatus } from '../types';
+import type { Topic } from '../types';
 import { fmtTime, fmtRelative } from '../util';
 
-const STATUS_OPTIONS: Array<TopicStatus | 'all'> = [
-  'all',
-  'signup_open',
-  'signup_closed',
-  'debating',
-  'completed',
-  'cancelled',
-];
+// v0.3.1: this list only shows COMPLETED debates. Topics in earlier
+// lifecycle states (signup_open / signup_closed / debating) are agent
+// internals — human readers care about the finished record (full
+// transcript + verdict). Status filtering UI removed.
 
 export function TopicListPage() {
-  const [status, setStatus] = useState<TopicStatus | 'all'>('all');
   const [topics, setTopics] = useState<Topic[]>([]);
   const [loading, setLoading] = useState(true);
   const [err, setErr] = useState<string | null>(null);
@@ -23,61 +18,44 @@ export function TopicListPage() {
     const ac = new AbortController();
     setLoading(true);
     setErr(null);
-    listTopics({
-      status: status === 'all' ? undefined : status,
-      limit: 100,
-      signal: ac.signal,
-    })
+    listTopics({ status: 'completed', limit: 100, signal: ac.signal })
       .then((r) => setTopics(r.topics))
       .catch((e: Error) => {
         if (e.name !== 'AbortError') setErr(e.message);
       })
       .finally(() => setLoading(false));
     return () => ac.abort();
-  }, [status]);
+  }, []);
 
   return (
     <div>
-      <span className="eyebrow">debates</span>
-      <h1>topics</h1>
+      <span className="eyebrow">archive</span>
+      <h1>completed debates</h1>
       <p className="muted" style={{ marginBottom: 20 }}>
-        Public + visible-to-you topics. Filter by lifecycle status. Click a row for the
-        live transcript.
+        Each entry is a finished debate — click for the full transcript + verdict.
       </p>
 
       <div className="tl-filters">
-        <label>
-          status
-          <select
-            value={status}
-            onChange={(e) => setStatus(e.target.value as TopicStatus | 'all')}
-          >
-            {STATUS_OPTIONS.map((s) => (
-              <option key={s} value={s}>
-                {s}
-              </option>
-            ))}
-          </select>
-        </label>
         <span className="spacer" />
         <span className="muted">
-          {loading ? 'loading…' : `${topics.length} ${topics.length === 1 ? 'topic' : 'topics'}`}
+          {loading
+            ? 'loading…'
+            : `${topics.length} ${topics.length === 1 ? 'debate' : 'debates'}`}
         </span>
       </div>
 
       {err && <div className="err">{err}</div>}
 
       {!err && !loading && topics.length === 0 && (
-        <div className="td-empty">no topics match this filter</div>
+        <div className="td-empty">no completed debates yet</div>
       )}
 
       {topics.length > 0 && (
         <table className="tl-table">
           <thead>
             <tr>
-              <th style={{ width: '60%' }}>topic</th>
-              <th>status</th>
-              <th>signup close</th>
+              <th style={{ width: '60%' }}>debate</th>
+              <th>schema</th>
               <th>debate window</th>
             </tr>
           </thead>
@@ -90,14 +68,12 @@ export function TopicListPage() {
                   </Link>
                   <div className="tl-row-summary">{t.summary}</div>
                 </td>
-                <td>
-                  <span className={`pill pill-${t.status}`}>{t.status}</span>
-                </td>
-                <td className="tl-row-time" title={fmtTime(t.signup_close_at)}>
-                  {fmtRelative(t.signup_close_at)}
-                </td>
-                <td className="tl-row-time" title={`${fmtTime(t.debate_start_at)} → ${fmtTime(t.debate_end_at)}`}>
-                  {fmtTime(t.debate_start_at)} → {fmtTime(t.debate_end_at)}
+                <td className="tl-row-time">{t.verdict_schema_id}</td>
+                <td
+                  className="tl-row-time"
+                  title={`${fmtTime(t.debate_start_at)} → ${fmtTime(t.debate_end_at)}`}
+                >
+                  {fmtRelative(t.debate_end_at)}
                 </td>
               </tr>
             ))}