feat: show the conversation evidence behind each learning trajectory

Reviewers were asked to include or exclude learning trajectories while
only seeing metadata — credit class, confidence, status. The decisions
and their redacted context turns were already captured and stored, but
no endpoint returned them, so the evidence was unreachable from the UI.

Add GET /api/learning/trajectories/:id and an expandable row on the
learning page that fetches on demand.

Also widen SentMessageSchema to accept matrixEventId, imageOutcomeCredit
and imageOutcomeAt. The learning loop added these to SentMessageRecord
and they flow out of /api/messages, but the strict contract rejected
them, breaking the dashboard.

Enable generation with shadow mode off so eligible examples reach reply
prompts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/dashboard/src/features/accounts/accounts-page.tsx

@@ -1,13 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
-import type { AccountEstablishmentSummary } from '../../../../../packages/api-contracts/src/index.js';
+import type {
+  AccountEstablishmentSummary,
+  RedditAccountSummary,
+} from '../../../../../packages/api-contracts/src/index.js';
 import { RedditUsernameLink } from '../../components/reddit-username-link.js';
 import {
   useImportRedditSessionMutation,
   useLoginStatusQuery,
   useRedditAccountsQuery,
+  useRemoveRedditAccountMutation,
 } from '../settings/settings-queries.js';
 import './accounts.css';
 
+const CONFIRM_TIMEOUT_MS = 8_000;
+
 function errorMessage(error: Error | null): string {
   return error?.message ?? 'Something went wrong.';
 }
@@ -85,6 +91,73 @@ function establishmentPill(establishment: AccountEstablishmentSummary | null | u
   return <span className="pill success">Established</span>;
 }
 
+/**
+ * Removal is destructive — the account's messages, activity and sync state go
+ * with it — so the button arms a confirmation that disarms itself if ignored.
+ */
+function AccountRow({ account }: { account: RedditAccountSummary }) {
+  const removeMutation = useRemoveRedditAccountMutation();
+  const [confirmRemove, setConfirmRemove] = useState(false);
+
+  useEffect(() => {
+    if (!confirmRemove) return;
+    const timer = globalThis.setTimeout(() => setConfirmRemove(false), CONFIRM_TIMEOUT_MS);
+    return () => globalThis.clearTimeout(timer);
+  }, [confirmRemove]);
+
+  return (
+    <div className={account.isRunning ? 'account-row is-active' : 'account-row'}>
+      <div>
+        <strong><RedditUsernameLink username={account.redditUsername} /></strong>
+        <span>{account.isRunning ? 'Running independently' : 'Waiting for a refreshed session'}</span>
+      </div>
+      <div className="account-row-pills">
+        {establishmentPill(account.establishment)}
+        <span className={account.isRunning ? 'pill success' : 'pill warning'}>
+          {account.isRunning ? 'Running' : 'Paused'}
+        </span>
+      </div>
+      <div className="account-row-actions">
+        {confirmRemove ? (
+          <>
+            <span className="account-remove-warning">
+              Removes u/{account.redditUsername}, its stored session and all of its messages,
+              conversations and activity. This cannot be undone.
+            </span>
+            <button className="button secondary" onClick={() => setConfirmRemove(false)} type="button">
+              Cancel
+            </button>
+            <button
+              aria-busy={removeMutation.isPending || undefined}
+              className="button danger"
+              disabled={removeMutation.isPending}
+              onClick={() => removeMutation.mutate(account.accountId)}
+              type="button"
+            >
+              {removeMutation.isPending ? 'Removing…' : 'Confirm removal'}
+            </button>
+          </>
+        ) : (
+          <button
+            aria-label={`Remove u/${account.redditUsername}`}
+            className="button secondary"
+            onClick={() => setConfirmRemove(true)}
+            type="button"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+      {removeMutation.isError ? (
+        <strong className="save-error" role="alert">{errorMessage(removeMutation.error)}</strong>
+      ) : null}
+      {account.establishment && account.establishment.state !== 'unknown' ? (
+        <EstablishmentDetail establishment={account.establishment} />
+      ) : null}
+    </div>
+  );
+}
+
 function sessionLabel(status: ReturnType<typeof useLoginStatusQuery>['data']): string {
   if (!status) return 'Unknown';
   if (!status.ready) return 'Browser unavailable';
@@ -211,21 +284,7 @@ export function AccountsPage() {
                   </div>
                 ) : null}
                 {accounts.map((account) => (
-                  <div className={account.isRunning ? 'account-row is-active' : 'account-row'} key={account.accountId}>
-                    <div>
-                      <strong><RedditUsernameLink username={account.redditUsername} /></strong>
-                      <span>{account.isRunning ? 'Running independently' : 'Waiting for a refreshed session'}</span>
-                    </div>
-                    <div className="account-row-pills">
-                      {establishmentPill(account.establishment)}
-                      <span className={account.isRunning ? 'pill success' : 'pill warning'}>
-                        {account.isRunning ? 'Running' : 'Paused'}
-                      </span>
-                    </div>
-                    {account.establishment && account.establishment.state !== 'unknown' ? (
-                      <EstablishmentDetail establishment={account.establishment} />
-                    ) : null}
-                  </div>
+                  <AccountRow account={account} key={account.accountId} />
                 ))}
                 {accountsQuery.isSuccess && accounts.length === 0 ? (
                   <div className="empty-state">

apps/dashboard/src/features/accounts/accounts.css

@@ -9,6 +9,8 @@
 .account-row span { color: var(--muted); font-size: .82rem; }
 .account-row .pill { font-size: .7rem; }
 .account-row > .account-row-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
+.account-row > .account-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; margin-left: auto; }
+.account-row .account-remove-warning { flex-basis: 100%; text-align: right; color: var(--danger-text, var(--muted)); font-size: .78rem; }
 
 /* Establishment evidence sits on its own row beneath the account summary. */
 .account-establishment { flex-basis: 100%; display: grid; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--border); }

apps/dashboard/src/features/learning/learning-api.ts

@@ -1,4 +1,10 @@
-import { LearningOverviewResponseSchema, LearningReviewResponseSchema, type LearningOverviewResponse } from '../../../../../packages/api-contracts/src/index.js';
+import {
+  LearningOverviewResponseSchema,
+  LearningReviewResponseSchema,
+  LearningTrajectoryDetailResponseSchema,
+  type LearningOverviewResponse,
+  type LearningTrajectoryDetailResponse,
+} from '../../../../../packages/api-contracts/src/index.js';
 import { createDashboardRequest } from '../../api/request.js';
 
 async function parse<T>(response: Response, schema: { parse(value: unknown): T }): Promise<T> {
@@ -12,6 +18,10 @@ export const learningApi = {
   getOverview(): Promise<LearningOverviewResponse> {
     return request('/api/learning').then((response) => parse(response, LearningOverviewResponseSchema));
   },
+  getTrajectory(id: string): Promise<LearningTrajectoryDetailResponse> {
+    return request(`/api/learning/trajectories/${encodeURIComponent(id)}`)
+      .then((response) => parse(response, LearningTrajectoryDetailResponseSchema));
+  },
   review(id: string, status: 'eligible' | 'excluded'): Promise<{ success: true }> {
     return request(`/api/learning/trajectories/${encodeURIComponent(id)}`, {
       method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status }),

apps/dashboard/src/features/learning/learning-page.tsx

@@ -1,11 +1,57 @@
+import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { learningApi } from './learning-api.js';
 import './learning.css';
 
 const humanCredits = new Set(['human-created-success', 'human-improved-success', 'human-completed-ai-trajectory']);
 
+function TrajectoryDetail({ id }: { id: string }) {
+  const detail = useQuery({ queryKey: ['learning', 'trajectory', id], queryFn: () => learningApi.getTrajectory(id) });
+  if (detail.isPending) return <div className="panel-loading" role="status"><span className="spinner" />Loading decisions…</div>;
+  if (detail.isError) return <div className="error-panel" role="alert">{detail.error.message}</div>;
+  const { trajectory, decisions } = detail.data;
+  return (
+    <div className="trajectory-detail">
+      <dl className="trajectory-facts">
+        <div><dt>Conversation</dt><dd>{trajectory.conversationId}</dd></div>
+        <div><dt>Policy mode</dt><dd>{trajectory.policyMode ?? 'Unknown'}</dd></div>
+        <div><dt>Outcome</dt><dd>{trajectory.outcomeType.replaceAll('-', ' ')}</dd></div>
+        <div><dt>Matures</dt><dd>{new Date(trajectory.maturityAt).toLocaleString()}</dd></div>
+        {trajectory.invalidationReason ? <div><dt>Invalidated</dt><dd>{trajectory.invalidationReason}</dd></div> : null}
+      </dl>
+      {decisions.length === 0 ? <p className="feature-empty">No manual decisions were captured for this trajectory.</p> : (
+        <ol className="decision-list">
+          {decisions.map((decision) => (
+            <li key={decision.id} className="decision-card">
+              <div className="decision-heading">
+                <span className="decision-stage">{decision.stage.replaceAll('-', ' ')}</span>
+                {decision.isDirectMediaInvitation ? <span className="decision-flag">Direct media ask</span> : null}
+                <span className={`trajectory-status status-${decision.qualityStatus}`}>{decision.qualityStatus}</span>
+                <span className="decision-turns">{decision.turnsUntilOutcome} turn(s) to outcome</span>
+              </div>
+              {decision.context.length > 0 ? (
+                <div className="decision-context">
+                  {decision.context.map((turn) => (
+                    <p key={turn.eventId} className={`turn turn-${turn.role}`}>
+                      <span className="turn-actor">{turn.role === 'recipient' ? 'Them' : turn.actor === 'human' ? 'You' : 'AI'}</span>
+                      <span className="turn-text">{turn.text}</span>
+                    </p>
+                  ))}
+                </div>
+              ) : null}
+              <p className="decision-chosen"><span className="turn-actor">Your message</span><span className="turn-text">{decision.chosenResponse}</span></p>
+            </li>
+          ))}
+        </ol>
+      )}
+      <p className="decision-note">Identifiers are redacted before storage. Text shown here is what generation would receive.</p>
+    </div>
+  );
+}
+
 export function LearningPage() {
   const client = useQueryClient();
+  const [expanded, setExpanded] = useState<string | null>(null);
   const overview = useQuery({ queryKey: ['learning'], queryFn: learningApi.getOverview });
   const review = useMutation({
     mutationFn: ({ id, status }: { id: string; status: 'eligible' | 'excluded' }) => learningApi.review(id, status),
@@ -27,11 +73,16 @@ export function LearningPage() {
       <section className="panel learning-panel" aria-labelledby="trajectory-heading">
         <div className="panel-heading"><div><span className="eyebrow">Policy {overview.data.policyVersion}</span><h2 id="trajectory-heading">Attributed trajectories</h2></div><span className="sample-size">n = {summary.total}</span></div>
         {trajectories.length === 0 ? <p className="feature-empty">No received-image trajectories have been extracted yet. A full chat sync will backfill authoritative histories.</p> : (
-          <div className="table-scroll"><table className="performance-table learning-table"><thead><tr><th>Credit</th><th>Community</th><th>Confidence</th><th>Status</th><th>Updated</th><th>Review</th></tr></thead><tbody>{trajectories.map((item) => (
-            <tr key={item.id} className={humanCredits.has(item.creditClass) ? 'human-led' : ''}>
-              <th scope="row">{item.creditClass.replaceAll('-', ' ')}</th><td>{item.subreddit ? `r/${item.subreddit}` : 'Unknown'}</td><td>{item.attributionConfidence}</td><td><span className={`trajectory-status status-${item.status}`}>{item.status}</span></td><td>{new Date(item.updatedAt).toLocaleString()}</td><td><div className="review-actions"><button className="button secondary" disabled={review.isPending || item.status === 'invalidated'} onClick={() => review.mutate({ id: item.id, status: 'eligible' })}>Include</button><button className="button secondary" disabled={review.isPending || item.status === 'invalidated'} onClick={() => review.mutate({ id: item.id, status: 'excluded' })}>Exclude</button></div></td>
-            </tr>
-          ))}</tbody></table></div>
+          <div className="table-scroll"><table className="performance-table learning-table"><thead><tr><th><span className="sr-only">Expand</span></th><th>Credit</th><th>Community</th><th>Confidence</th><th>Status</th><th>Updated</th><th>Review</th></tr></thead><tbody>{trajectories.flatMap((item) => {
+            const isOpen = expanded === item.id;
+            return [
+              <tr key={item.id} className={humanCredits.has(item.creditClass) ? 'human-led' : ''}>
+                <td><button type="button" className="button secondary expand-toggle" aria-expanded={isOpen} aria-controls={`detail-${item.id}`} onClick={() => setExpanded(isOpen ? null : item.id)}>{isOpen ? '▾' : '▸'}<span className="sr-only"> Show conversation evidence</span></button></td>
+                <th scope="row">{item.creditClass.replaceAll('-', ' ')}</th><td>{item.subreddit ? `r/${item.subreddit}` : 'Unknown'}</td><td>{item.attributionConfidence}</td><td><span className={`trajectory-status status-${item.status}`}>{item.status}</span></td><td>{new Date(item.updatedAt).toLocaleString()}</td><td><div className="review-actions"><button className="button secondary" disabled={review.isPending || item.status === 'invalidated'} onClick={() => review.mutate({ id: item.id, status: 'eligible' })}>Include</button><button className="button secondary" disabled={review.isPending || item.status === 'invalidated'} onClick={() => review.mutate({ id: item.id, status: 'excluded' })}>Exclude</button></div></td>
+              </tr>,
+              ...(isOpen ? [<tr key={`${item.id}-detail`} id={`detail-${item.id}`} className="detail-row"><td colSpan={7}><TrajectoryDetail id={item.id} /></td></tr>] : []),
+            ];
+          })}</tbody></table></div>
         )}
       </section>
     </main>

apps/dashboard/src/features/learning/learning.css

@@ -8,5 +8,24 @@
 .learning-table tr.human-led th:first-child { color: var(--accent); }
 .review-actions { display: flex; gap: .4rem; }
 .review-actions .button { padding: .4rem .6rem; }
+.expand-toggle { padding: .3rem .5rem; line-height: 1; }
+.detail-row > td { background: var(--surface-strong); padding: .85rem 1rem; }
+.trajectory-detail { display: grid; gap: .85rem; }
+.trajectory-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 0; }
+.trajectory-facts dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
+.trajectory-facts dd { margin: 0; font-size: .85rem; word-break: break-all; }
+.decision-list { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
+.decision-card { border: 1px solid var(--border); border-radius: .6rem; display: grid; gap: .5rem; padding: .7rem .8rem; }
+.decision-heading { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
+.decision-stage { color: var(--accent); font-size: .78rem; text-transform: capitalize; }
+.decision-flag { border-radius: 999px; background: var(--surface); color: var(--warning); font-size: .72rem; padding: .2rem .5rem; }
+.decision-turns { color: var(--muted); font-size: .72rem; margin-left: auto; }
+.decision-context { display: grid; gap: .3rem; }
+.turn { display: grid; gap: .1rem; margin: 0; }
+.turn-actor { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
+.turn-text { font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.turn-recipient .turn-text { color: var(--muted); }
+.decision-chosen { border-left: 2px solid var(--accent); display: grid; gap: .1rem; margin: 0; padding-left: .6rem; }
+.decision-note { color: var(--muted); font-size: .72rem; margin: 0; }
 @media (max-width: 900px) { .learning-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 600px) { .learning-metrics { grid-template-columns: 1fr; } }

apps/dashboard/src/features/settings/settings-api.ts

@@ -6,6 +6,7 @@ import {
   ErrorResponseSchema,
   LoginStatusResponseSchema,
   RedditAccountsResponseSchema,
+  RedditAccountRemovalResponseSchema,
   RedditCookieImportRequestSchema,
   RedditCookieImportResponseSchema,
   type ConfigResponse,
@@ -52,6 +53,16 @@ export function fetchRedditAccounts(): Promise<RedditAccountSummary[]> {
   return request('/api/accounts').then((response) => parseResponse(response, RedditAccountsResponseSchema));
 }
 
+export async function removeRedditAccount(accountId: string): Promise<RedditAccountSummary> {
+  const response = await request(`/api/accounts/${encodeURIComponent(accountId)}`, { method: 'DELETE' });
+  // A refused removal carries its reason in the same envelope as a successful
+  // one, so parse the body before falling back to the bare status code.
+  const parsed = RedditAccountRemovalResponseSchema.safeParse(await response.json() as unknown);
+  if (!parsed.success) throw new Error(`Request failed (${response.status})`);
+  if (!parsed.data.ok) throw new Error(parsed.data.error);
+  return parsed.data.account;
+}
+
 export async function importRedditSession(exported: unknown): Promise<RedditAccountSummary> {
   const body = RedditCookieImportRequestSchema.parse(exported);
   const response = await parseResponse(

apps/dashboard/src/features/settings/settings-queries.ts

@@ -1,6 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import type { ConfigResponse } from '../../../../../packages/api-contracts/src/index.js';
-import { fetchLoginStatus, fetchRedditAccounts, fetchSettings, importRedditSession, saveSettings } from './settings-api.js';
+import {
+  fetchLoginStatus,
+  fetchRedditAccounts,
+  fetchSettings,
+  importRedditSession,
+  removeRedditAccount,
+  saveSettings,
+} from './settings-api.js';
 import {
   fetchPushNotifications,
   savePushNotifications,
@@ -75,3 +82,20 @@ export function useImportRedditSessionMutation() {
     },
   });
 }
+
+export function useRemoveRedditAccountMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: removeRedditAccount,
+    onSuccess() {
+      invalidateAccountContent(queryClient);
+      // Removal takes the account's outreach history with it, so every
+      // account-derived view on the dashboard is now stale.
+      void queryClient.invalidateQueries({ queryKey: ['dashboard', 'growth'] });
+      void queryClient.invalidateQueries({ queryKey: ['dashboard', 'stats'] });
+      void queryClient.invalidateQueries({ queryKey: ['performance'] });
+      void queryClient.invalidateQueries({ queryKey: ['outreach'] });
+      void queryClient.invalidateQueries({ queryKey: ['attention'] });
+    },
+  });
+}