@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.8

package/src/components/common/research/EvidenceDossier.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react'
+import { Fragment, useState, type ReactNode } from 'react'
 import { styled } from 'styled-components'
 
 export type EvidenceStrength = 'strong' | 'working' | 'weak'
@@ -10,16 +10,32 @@ export interface EvidenceSource {
   url?: string
   note: string
   quote?: string
+  sourceDate?: string
+  freshness?: 'fresh' | 'stale' | 'undated'
+  freshnessMode?: 'recent' | 'open'
   strength?: EvidenceStrength
 }
 
+/** A jargon term found in a finding's claim with a plain-language note. */
+export interface EvidenceTermNote {
+  term: string
+  explanation: string
+  /** Spelled-out form when the term is or contains an acronym. */
+  expansion?: string
+  /** Authoritative explainer link, included only when clearly canonical. */
+  url?: string
+}
+
 export interface EvidenceFinding {
   id: string
   title: string
   claim: string
   confidence: EvidenceStrength
   annotation?: string
+  freshnessMode?: 'recent' | 'open'
   evidence: EvidenceSource[]
+  /** Plain-language notes for specialist terms, rendered as inline annotations. */
+  glossary?: EvidenceTermNote[]
 }
 
 export interface EvidenceDossierProps {
@@ -33,6 +49,7 @@ export interface EvidenceDossierProps {
   nextSteps: string[]
   onTitleChange?: (title: string) => void
   onDeleteFinding?: (findingId: string) => void
+  onUpdate?: () => void
   footer?: ReactNode
   className?: string
 }
@@ -43,26 +60,28 @@ const strengthLabels: Record<EvidenceStrength, string> = {
   weak: 'needs support',
 }
 
-type DossierRenderMode = 'read' | 'review' | 'audit'
+type DossierRenderMode = 'read' | 'review' | 'audit' | 'markdown'
 
 const modeLabels: Record<DossierRenderMode, string> = {
   read: 'Read',
   review: 'Claims',
   audit: 'Sources',
+  markdown: 'MD',
 }
 
 const modeDescriptions: Record<DossierRenderMode, string> = {
   read: 'Polished dossier with quiet evidence links.',
   review: 'Every claim opened with its supporting evidence.',
   audit: 'Source-first trace for verification.',
+  markdown: 'Markdown handoff for agents, slides, and reports.',
 }
 
 function cleanDisplayText(value: unknown): string {
   return String(value ?? '')
-    .replace(/\*\*([^*]+)\*\*/g, '$1')
-    .replace(/\*([^*]+)\*/g, '$1')
-    .replace(/__([^_]+)__/g, '$1')
-    .replace(/_([^_]+)_/g, '$1')
+    .replace(/\*\*([^*\n]+)\*\*/g, '$1')
+    .replace(/\*([^*\n]+)\*/g, '$1')
+    .replace(/__([^_\n]+)__/g, '$1')
+    .replace(/_([^_\n]+)_/g, '$1')
     .replace(/\s*\[(?:\d+(?:,\s*)?)+\]/g, '')
     .replace(/\s*\[\d+\](?=\[\d+\])/g, '')
     .replace(/\[(\d+)\]/g, '')
@@ -71,13 +90,241 @@ function cleanDisplayText(value: unknown): string {
     .trim()
 }
 
+function displayPrompt(value: string): string {
+  return cleanDisplayText(value)
+    .replace(/\bcodign\b/gi, 'coding')
+    .replace(/\bmodles\b/gi, 'models')
+    .replace(/\bmdoels\b/gi, 'models')
+    .replace(/\bresearhc\b/gi, 'research')
+    .replace(/\bquesiton\b/gi, 'question')
+    .replace(/\bquesitons\b/gi, 'questions')
+    .replace(/\bsoruce\b/gi, 'source')
+    .replace(/\bsoruces\b/gi, 'sources')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function displayTitle(value: string, fallback = 'Research finding'): string {
+  const cleaned = cleanDisplayText(value) || fallback
+  return cleaned.replace(/[A-Za-z]/, letter => letter.toUpperCase())
+}
+
+function cleanRichText(value: unknown): string {
+  return String(value ?? '')
+    .replace(/\*\*([^*\n]+)\*\*/g, '$1')
+    .replace(/\*([^*\n]+)\*/g, '$1')
+    .replace(/__([^_\n]+)__/g, '$1')
+    .replace(/_([^_\n]+)_/g, '$1')
+    .replace(/\s*\[(?:\d+(?:,\s*)?)+\]/g, '')
+    .replace(/\s*\[\d+\](?=\[\d+\])/g, '')
+    .replace(/\[(\d+)\]/g, '')
+    .replace(/[^\S\r\n]+([,.;:])/g, '$1')
+    .replace(/[^\S\r\n]{2,}/g, ' ')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+function structuredFindingFields(value: string): {
+  title?: string
+  claim?: string
+  annotation?: string
+} | null {
+  const decodeJsonString = (raw: string): string => {
+    try {
+      return JSON.parse(`"${raw}"`) as string
+    } catch {
+      return raw.replace(/\\"/g, '"').replace(/\\n/g, '\n')
+    }
+  }
+  const readField = (source: string, key: string): string => {
+    const match = source.match(
+      new RegExp(`"${key}"\\s*:\\s*"((?:\\\\.|[^"\\\\])*)`, 'is'),
+    )
+    return match?.[1] ? decodeJsonString(match[1]) : ''
+  }
+  const trimmed = value
+    .trim()
+    .replace(/^```(?:json)?\s*/i, '')
+    .replace(/\s*```$/i, '')
+    .trim()
+  const objectStart = trimmed.indexOf('{')
+  if (objectStart < 0) return null
+  const jsonish = trimmed.slice(objectStart)
+  try {
+    const parsed = JSON.parse(jsonish) as Record<string, unknown>
+    return {
+      title:
+        typeof parsed.title === 'string'
+          ? cleanDisplayText(parsed.title)
+          : undefined,
+      claim:
+        typeof parsed.claim === 'string'
+          ? cleanRichText(parsed.claim)
+          : typeof parsed.summary === 'string'
+          ? cleanRichText(parsed.summary)
+          : undefined,
+      annotation:
+        typeof parsed.annotation === 'string'
+          ? cleanDisplayText(parsed.annotation)
+          : typeof parsed.caveat === 'string'
+          ? cleanDisplayText(parsed.caveat)
+          : undefined,
+    }
+  } catch {
+    const title = cleanDisplayText(readField(jsonish, 'title'))
+    const claim =
+      cleanRichText(readField(jsonish, 'claim')) ||
+      cleanRichText(readField(jsonish, 'summary')) ||
+      cleanRichText(readField(jsonish, 'finding'))
+    const annotation =
+      cleanDisplayText(readField(jsonish, 'annotation')) ||
+      cleanDisplayText(readField(jsonish, 'caveat'))
+    return title || claim || annotation ? { title, claim, annotation } : null
+  }
+}
+
+function tableCells(line: string): string[] {
+  const trimmed = line.trim()
+  if (!trimmed.startsWith('|') || !trimmed.endsWith('|')) return []
+  return trimmed
+    .slice(1, -1)
+    .split('|')
+    .map(cell => cleanDisplayText(cell))
+}
+
+function isTableSeparator(line: string): boolean {
+  const cells = tableCells(line)
+  return Boolean(cells.length) && cells.every(cell => /^:?-{3,}:?$/.test(cell))
+}
+
+function readableParagraphs(text: string): string[] {
+  const cleaned = cleanDisplayText(text)
+  if (!cleaned) return []
+  const numberedSections = cleaned
+    .replace(/\s*;\s*(?=\(\d+\)\s)/g, '\n')
+    .split(/\n+/)
+    .map(section => section.trim())
+    .filter(Boolean)
+  if (
+    numberedSections.length >= 3 &&
+    numberedSections
+      .slice(1)
+      .every(section => /^\(\d+\)\s/.test(section))
+  ) {
+    return numberedSections
+  }
+  if (cleaned.length < 420) return [cleaned]
+  // Split only at whitespace AFTER sentence punctuation — lossless, and never
+  // breaks inside tokens like "2.5", "AGENTS.md", or "e.g." (no space there).
+  const sentences = cleaned.split(/(?<=[.!?])\s+/)
+  if (sentences.length < 4) return [cleaned]
+  const paragraphs: string[] = []
+  let current = ''
+  for (const sentence of sentences.map(item => item.trim()).filter(Boolean)) {
+    const next = current ? `${current} ${sentence}` : sentence
+    if (current && next.length > 260) {
+      paragraphs.push(current)
+      current = sentence
+    } else {
+      current = next
+    }
+  }
+  if (current) paragraphs.push(current)
+  return paragraphs
+}
+
+function summarySentence(value: string, fallback: string): string {
+  const cleaned = cleanDisplayText(value || fallback)
+  if (!cleaned) return fallback
+  const firstSentence = cleaned.split(/(?<=[.!?])\s+/)[0]?.trim()
+  const summary = firstSentence && firstSentence.length >= 70 ? firstSentence : cleaned
+  return summary.length > 280 ? `${summary.slice(0, 277).trim()}...` : summary
+}
+
+function sourceNoteSummary(value: string): string {
+  const cleaned = cleanDisplayText(value)
+    .replace(/^Source date:\s*[^.]+\.\s*/i, '')
+    .replace(/^https?:\/\/\S+\s*/i, '')
+    .trim()
+  if (!cleaned) return 'Linked source.'
+  const tableStart = cleaned.indexOf('|')
+  if (tableStart > 0 && tableStart < 180) {
+    return cleaned.slice(0, tableStart).trim()
+  }
+  const firstSentence = cleaned.split(/(?<=[.!?])\s+/)[0]?.trim() || cleaned
+  return firstSentence.length > 150
+    ? `${firstSentence.slice(0, 147).trim()}...`
+    : firstSentence
+}
+
+function pipeSummaryRows(value: string): Array<[string, string]> {
+  const cleaned = cleanDisplayText(value)
+  const pipeIndex = cleaned.indexOf('|')
+  if (pipeIndex < 0) return []
+  const pipeText = cleaned.slice(pipeIndex)
+  const cells = pipeText
+    .split('|')
+    .map(cell => cleanDisplayText(cell))
+    .filter(Boolean)
+    .filter(cell => !/^-+$/.test(cell))
+  if (cells.length < 4) return []
+  const rows: Array<[string, string]> = []
+  for (let index = 0; index < Math.min(cells.length - 1, 10); index += 2) {
+    rows.push([cells[index], cells[index + 1]])
+  }
+  return rows.slice(0, 4)
+}
+
+function sourceUrlDisplay(url: string): string {
+  try {
+    const parsed = new URL(url)
+    return `${parsed.hostname.replace(/^www\./, '')}${parsed.pathname}`
+  } catch {
+    return url
+  }
+}
+
+function LinkifiedText({ text }: { text: string }): ReactNode {
+  const parts = text.split(/(https?:\/\/[^\s]+)/g)
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (!/^https?:\/\//i.test(part)) return part
+        const trailing = part.match(/[),.;:]+$/)?.[0] ?? ''
+        const href = trailing ? part.slice(0, -trailing.length) : part
+        return (
+          <span key={`${href}-${index}`}>
+            <a href={href} target="_blank" rel="noreferrer">
+              {sourceUrlDisplay(href)}
+            </a>
+            {trailing}
+          </span>
+        )
+      })}
+    </>
+  )
+}
+
+/** Untrusted model/citation URLs: only http(s) may become a clickable link
+ * (a `javascript:`/`data:` href would execute script on click). */
+function safeHttpUrl(url: string | undefined): string | undefined {
+  if (!url) return undefined
+  try {
+    const protocol = new URL(url).protocol
+    return protocol === 'http:' || protocol === 'https:' ? url : undefined
+  } catch {
+    return undefined
+  }
+}
+
 function sourceUrlWithTextFragment(source: EvidenceSource): string | undefined {
-  if (!source.url) return undefined
+  const safe = safeHttpUrl(source.url)
+  if (!safe) return undefined
   const quote = cleanDisplayText(source.quote ?? '')
-  if (!quote) return source.url
+  if (!quote) return safe
   const fragment = quote.slice(0, 140).trim()
-  if (!fragment) return source.url
-  const baseUrl = source.url.split('#')[0]
+  if (!fragment) return safe
+  const baseUrl = safe.split('#')[0]
   return `${baseUrl}#:~:text=${encodeURIComponent(fragment)}`
 }
 
@@ -112,6 +359,17 @@ function normalizeEvidenceSource(
     url: cleanDisplayText(value.url) || undefined,
     note: cleanDisplayText(value.note),
     quote: cleanDisplayText(value.quote) || undefined,
+    sourceDate: cleanDisplayText(value.sourceDate) || undefined,
+    freshness:
+      value.freshness === 'fresh' ||
+      value.freshness === 'stale' ||
+      value.freshness === 'undated'
+        ? value.freshness
+        : undefined,
+    freshnessMode:
+      value.freshnessMode === 'recent' || value.freshnessMode === 'open'
+        ? value.freshnessMode
+        : undefined,
     strength:
       value.strength === 'strong' ||
       value.strength === 'working' ||
@@ -128,15 +386,20 @@ function normalizeEvidenceFinding(
   if (!finding || typeof finding !== 'object') return null
   const value = finding as Partial<EvidenceFinding>
   const title = cleanDisplayText(value.title)
-  const claim = cleanDisplayText(value.claim)
+  const claim = cleanRichText(value.claim)
   if (!title && !claim) return null
+  const structured =
+    structuredFindingFields(claim) || structuredFindingFields(title)
   const evidence = Array.isArray(value.evidence)
     ? value.evidence.map(normalizeEvidenceSource)
     : []
   return {
     id: cleanDisplayText(value.id) || `finding-${index}`,
-    title: title || `Finding ${index + 1}`,
-    claim,
+    title:
+      (!title || /^research finding$/i.test(title)) && structured?.title
+        ? displayTitle(structured.title)
+        : displayTitle(title || structured?.title || `Finding ${index + 1}`),
+    claim: structured?.claim || claim,
     confidence:
       value.confidence === 'strong' ||
       value.confidence === 'working' ||
@@ -145,8 +408,23 @@ function normalizeEvidenceFinding(
         : evidence.length
         ? 'working'
         : 'weak',
-    annotation: cleanDisplayText(value.annotation) || undefined,
+    annotation:
+      structured?.annotation || cleanDisplayText(value.annotation) || undefined,
+    freshnessMode:
+      value.freshnessMode === 'recent' || value.freshnessMode === 'open'
+        ? value.freshnessMode
+        : undefined,
     evidence,
+    glossary: Array.isArray(value.glossary)
+      ? value.glossary.filter(
+          (note): note is EvidenceTermNote =>
+            Boolean(note) &&
+            typeof note.term === 'string' &&
+            typeof note.explanation === 'string' &&
+            Boolean(note.term.trim()) &&
+            Boolean(note.explanation.trim()),
+        )
+      : undefined,
   }
 }
 
@@ -159,11 +437,32 @@ function isEvidenceFinding(
 //#region styled-components
 
 const Dossier = styled.article`
+  --dossier-serif: var(
+    --platform-typography-font-family-content,
+    'Source Serif 4',
+    Georgia,
+    serif
+  );
+  --dossier-sans: var(
+    --platform-typography-font-family,
+    'Archivo',
+    system-ui,
+    sans-serif
+  );
+  --dossier-mono: var(
+    --platform-typography-font-family-mono,
+    'JetBrains Mono',
+    ui-monospace,
+    monospace
+  );
+
   display: grid;
   gap: 24px;
   min-width: 0;
   position: relative;
   color: var(--platform-colors-text, #1c1a17);
+  font-family: var(--dossier-serif);
+  font-optical-sizing: auto;
 `
 
 const Header = styled.header`
@@ -180,6 +479,7 @@ const ModeDock = styled.div`
   z-index: 3;
   justify-self: end;
   gap: 5px;
+  font-family: var(--dossier-sans);
 
   @media (max-width: 760px) {
     justify-self: start;
@@ -216,11 +516,11 @@ const ModeButton = styled.button<{ $active: boolean }>`
   border: 0;
   border-radius: var(--platform-radius-sm);
   background: ${({ $active }) =>
-    $active ? 'var(--platform-colors-surface-hover)' : 'transparent'};
+    $active ? 'var(--app-bg, var(--platform-colors-surface-hover))' : 'transparent'};
   padding: 0 10px;
   color: ${({ $active }) =>
     $active
-      ? 'var(--platform-colors-text, #1c1a17)'
+      ? 'var(--app-text, var(--platform-colors-text, #1c1a17))'
       : 'var(--platform-colors-text-secondary, #8f98a4)'};
   font: inherit;
   font-size: 12px;
@@ -230,6 +530,7 @@ const ModeButton = styled.button<{ $active: boolean }>`
 
 const Kicker = styled.div`
   color: var(--platform-colors-text-secondary, #8f897f);
+  font-family: var(--dossier-mono);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.08em;
@@ -238,11 +539,12 @@ const Kicker = styled.div`
 `
 
 const Title = styled.h1`
-  max-width: 22ch;
+  max-width: 28ch;
   margin: 0;
   color: var(--platform-colors-text, #20242a);
+  font-family: var(--dossier-serif);
   font-size: clamp(34px, 4.2vw, 54px);
-  font-weight: 800;
+  font-weight: 600;
   letter-spacing: 0;
   line-height: 1.05;
   overflow-wrap: anywhere;
@@ -251,15 +553,15 @@ const Title = styled.h1`
 const TitleInput = styled.textarea`
   display: block;
   width: 100%;
-  max-width: 22ch;
+  max-width: 28ch;
   min-height: 1.1em;
   margin: 0;
   border: 0;
   background: transparent;
   color: var(--platform-colors-text, #20242a);
-  font: inherit;
+  font-family: var(--dossier-serif);
   font-size: clamp(34px, 4.2vw, 54px);
-  font-weight: 800;
+  font-weight: 600;
   letter-spacing: 0;
   line-height: 1.05;
   outline: none;
@@ -276,12 +578,22 @@ const TitleInput = styled.textarea`
 const Question = styled.div`
   max-width: 72ch;
   color: var(--platform-colors-text-secondary, #6b665e);
-  font-size: 14px;
+  font-size: 15px;
   line-height: 1.55;
 `
 
+const PromptLabel = styled.span`
+  color: var(--platform-colors-text-secondary, #8f897f);
+  font-family: var(--dossier-mono);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+`
+
 const UpdatedStamp = styled.div`
   color: var(--platform-colors-text-secondary, #8f897f);
+  font-family: var(--dossier-mono);
   font-size: 11px;
   font-weight: 750;
   letter-spacing: 0.05em;
@@ -289,25 +601,80 @@ const UpdatedStamp = styled.div`
   text-transform: uppercase;
 `
 
+const HeaderMeta = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+`
+
+const UpdateButton = styled.button`
+  border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 14%));
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  padding: 6px 9px;
+  color: var(--platform-colors-text, #20242a);
+  font-family: var(--dossier-sans);
+  font-size: 11px;
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  line-height: 1;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    border-color: currentColor;
+  }
+`
+
 const Narrative = styled.section`
   display: grid;
-  gap: 18px;
-  max-width: 78ch;
-  padding: 2px 0 8px;
+  gap: 20px;
+  max-width: min(100%, 1180px);
+  border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
+  border-bottom: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
+  padding: 24px 0 28px;
 `
 
 const Lead = styled.div`
+  max-width: 72ch;
   margin: 0;
   color: var(--platform-colors-text, #1c1a17);
-  font-size: clamp(18px, 1.6vw, 22px);
-  line-height: 1.58;
+  font-size: clamp(17px, 1.12vw, 20px);
+  line-height: 1.64;
 `
 
-const NarrativeText = styled.div`
+const ExecutiveList = styled.ul`
+  display: grid;
+  gap: 15px;
   margin: 0;
-  color: var(--platform-colors-text, #3a4047);
-  font-size: 14.5px;
-  line-height: 1.72;
+  padding: 0;
+  list-style: none;
+`
+
+const ExecutiveItem = styled.li`
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  gap: 12px;
+  max-width: 72ch;
+  color: var(--platform-colors-text, #20242a);
+  font-size: 16px;
+  line-height: 1.62;
+`
+
+const ExecutiveText = styled.div`
+  margin: 0;
+  overflow-wrap: anywhere;
+`
+
+const ExecutiveBullet = styled.span`
+  color: var(--platform-colors-text-secondary, #8f897f);
+  font-family: var(--dossier-mono);
+  font-size: 12px;
+  font-weight: 850;
+  letter-spacing: 0.04em;
 `
 
 const Findings = styled.section`
@@ -318,21 +685,24 @@ const Findings = styled.section`
 const Finding = styled.article`
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr);
-  gap: 18px;
-  padding: 18px 0 20px;
+  gap: 22px;
+  padding: 24px 0 28px;
   border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
 `
 
 const FindingNumber = styled.div`
+  padding-top: 0.38em;
   color: var(--platform-colors-text-secondary, #8f897f);
+  font-family: var(--dossier-mono);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.05em;
+  line-height: 1;
 `
 
 const FindingBody = styled.div`
   display: grid;
-  gap: 10px;
+  gap: 12px;
   min-width: 0;
 `
 
@@ -358,24 +728,72 @@ const FindingTitleGroup = styled.div`
 `
 
 const FindingTitle = styled.h2`
+  flex: 1 1 auto;
+  min-width: 0;
   margin: 0;
   color: var(--platform-colors-text, #20242a);
-  font-size: clamp(17px, 1.5vw, 21px);
-  font-weight: 750;
+  font-family: var(--dossier-serif);
+  font-size: clamp(21px, 1.8vw, 30px);
+  font-weight: 600;
   letter-spacing: 0;
-  line-height: 1.2;
+  line-height: 1.18;
   overflow-wrap: anywhere;
 `
 
+const FindingBadges = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  align-items: center;
+  margin-top: 2px;
+`
+
+const FindingBadge = styled.span<{ $tone?: EvidenceStrength | 'fresh' | 'stale' | 'undated' }>`
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  border: 1px solid
+    ${({ $tone }) =>
+      $tone === 'strong' || $tone === 'fresh'
+        ? 'rgb(61 107 74 / 24%)'
+        : $tone === 'weak' || $tone === 'stale'
+        ? 'rgb(154 105 79 / 26%)'
+        : 'var(--platform-colors-border, rgb(46 51 56 / 12%))'};
+  border-radius: 999px;
+  background: ${({ $tone }) =>
+    $tone === 'strong' || $tone === 'fresh'
+      ? 'rgb(61 107 74 / 6%)'
+      : $tone === 'weak' || $tone === 'stale'
+      ? 'rgb(154 105 79 / 7%)'
+      : 'rgb(46 51 56 / 3%)'};
+  padding: 0 9px;
+  color: ${({ $tone }) =>
+    $tone === 'strong' || $tone === 'fresh'
+      ? '#3d6b4a'
+      : $tone === 'weak' || $tone === 'stale'
+      ? '#8a5f49'
+      : 'var(--platform-colors-text-secondary, #6b665e)'};
+  font-size: 11px;
+  font-family: var(--dossier-mono);
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-transform: uppercase;
+`
+
 const DeleteAction = styled.button`
+  flex: 0 0 auto;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--platform-colors-text-secondary, #8f897f);
-  font: inherit;
+  font-family: var(--dossier-sans);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.05em;
+  line-height: 1;
+  white-space: nowrap;
+  word-break: keep-all;
   text-transform: uppercase;
   opacity: 0;
   cursor: pointer;
@@ -394,6 +812,7 @@ const DeleteAction = styled.button`
 
 const Confidence = styled.span<{ $strength: EvidenceStrength }>`
   flex: 0 0 auto;
+  min-width: 0;
   color: ${({ $strength }) =>
     $strength === 'strong'
       ? '#3d6b4a'
@@ -401,38 +820,228 @@ const Confidence = styled.span<{ $strength: EvidenceStrength }>`
       ? '#9a694f'
       : 'var(--platform-colors-text-secondary, #6b665e)'};
   font-size: 11px;
+  font-family: var(--dossier-mono);
   font-weight: 800;
   letter-spacing: 0.05em;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 `
 
-const Claim = styled.p`
-  max-width: 76ch;
+const Claim = styled.div`
+  max-width: min(100%, 72ch);
   margin: 0;
   color: var(--platform-colors-text, #1c1a17);
-  font-size: 14.5px;
-  line-height: 1.72;
+  font-size: 16px;
+  line-height: 1.64;
 `
 
 const ClaimLine = styled.div`
-  display: inline;
+  display: block;
+`
+
+const SourceSupportLine = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 7px;
+  align-items: center;
+  margin-top: 10px;
+  max-width: 100%;
+  color: var(--platform-colors-text-secondary, #6b665e);
+  font-size: 13px;
+  line-height: 1.35;
+`
+
+const SourceSupportLabel = styled.span`
+  color: var(--platform-colors-text-secondary, #8f98a4);
+  font-family: var(--dossier-mono);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+`
+
+const SourceSupportLink = styled.a`
+  display: inline-block;
+  max-width: min(30ch, 42vw);
+  overflow: hidden;
+  color: inherit;
+  font-family: var(--dossier-serif);
+  text-decoration: underline;
+  text-decoration-color: var(--platform-colors-border-strong, rgb(46 51 56 / 24%));
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--platform-colors-text, #1c1a17);
+    outline: none;
+    text-decoration-color: currentColor;
+  }
+`
+
+const SourceSupportChip = styled.span`
+  display: inline-flex;
+  align-items: center;
+  max-width: min(32ch, 44vw);
+  border: 0;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  color: var(--platform-colors-text-secondary, #5f6670);
+`
+
+const ClaimContent = styled.div`
+  display: grid;
+  gap: 12px;
+  max-width: 100%;
+  min-width: 0;
+`
+
+const ClaimParagraph = styled.p`
+  margin: 0;
+
+  & + & {
+    margin-top: 0.72em;
+  }
+`
+
+const TableScroll = styled.div`
+  max-width: 100%;
+  overflow-x: auto;
+`
+
+const ClaimList = styled.ul`
+  margin: 0;
+  padding-left: 20px;
+  display: grid;
+  gap: 6px;
+
+  li {
+    margin: 0;
+  }
+`
+
+const ClaimHeading = styled.h4`
+  margin: 10px 0 0;
+  font-family: var(--dossier-sans);
+  font-size: 14px;
+  font-weight: 750;
+  letter-spacing: -0.01em;
+  color: var(--platform-colors-text, #1c1a17);
+`
+
+/** Mirrors the editor's comment-mark styling: accent underline, hover tint,
+ * with the explanation surfaced as a floating note. The note is a real
+ * element (not a CSS tooltip) so an authoritative explainer link stays
+ * clickable; it opens on hover and stays open while hovered or focused. */
+const TermNoteMark = styled.span`
+  position: relative;
+  border-bottom: 1px solid
+    rgb(from var(--platform-colors-accent, #0067b8) r g b / 46%);
+  border-radius: 2px;
+  box-decoration-break: clone;
+  cursor: help;
+  padding: 0 1px;
+
+  &:hover,
+  &:focus-within {
+    background: rgb(from var(--platform-colors-accent, #0067b8) r g b / 12%);
+    outline: none;
+  }
+`
+
+const TermNotePopover = styled.span`
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  z-index: 12;
+  /* Transparent bridge keeps hover alive between term and note. */
+  padding-bottom: 6px;
+  width: max-content;
+  max-width: min(340px, 72vw);
+
+  ${TermNoteMark}:hover &,
+  ${TermNoteMark}:focus-within & {
+    display: block;
+  }
+`
+
+const TermNoteBubble = styled.span`
+  display: block;
+  padding: 8px 10px;
+  border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 16%));
+  border-radius: var(--platform-radius-sm, 4px);
+  background: var(--platform-colors-surface, #fff);
+  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
+  color: var(--platform-colors-text, #1c1a17);
+  font-family: var(--dossier-sans);
+  font-size: 12.5px;
+  font-weight: 400;
+  line-height: 1.45;
+  white-space: normal;
+`
+
+const TermNoteLink = styled.a`
+  display: inline-block;
+  margin-top: 4px;
+  color: var(--platform-colors-accent, #0067b8);
+  font-family: var(--dossier-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
+`
+
+const ClaimTable = styled.table`
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+  color: var(--platform-colors-text, #1c1a17);
+  font-family: var(--dossier-sans);
+  font-size: 12.5px;
+  line-height: 1.45;
+
+  th,
+  td {
+    border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 12%));
+    padding: 7px 8px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    background: var(--platform-colors-surface-hover, rgb(46 51 56 / 5%));
+    font-family: var(--dossier-mono);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
 `
 
 const Annotation = styled.aside`
-  max-width: 72ch;
+  max-width: min(100%, 88ch);
   border-left: 3px solid rgb(82 90 101 / 36%);
   padding: 4px 0 4px 14px;
   color: var(--platform-colors-text-secondary, #6b665e);
-  font-size: 13px;
-  line-height: 1.55;
+  font-family: var(--dossier-serif);
+  font-size: 14px;
+  line-height: 1.6;
 `
 
 const EvidenceHandle = styled.button<{ $strength: EvidenceStrength }>`
   display: inline;
   align-items: center;
   min-height: 0;
-  margin-left: 6px;
-  transform: translateY(-1px);
+  margin-left: 0;
+  transform: none;
   border: 0;
   border-bottom: 1px solid
     ${({ $strength }) =>
@@ -450,7 +1059,7 @@ const EvidenceHandle = styled.button<{ $strength: EvidenceStrength }>`
       : $strength === 'weak'
       ? '#9a694f'
       : 'var(--platform-colors-text-secondary, #6b665e)'};
-  font: inherit;
+  font-family: var(--dossier-mono);
   font-size: 0.78em;
   font-weight: 750;
   letter-spacing: 0.02em;
@@ -467,22 +1076,33 @@ const EvidenceHandle = styled.button<{ $strength: EvidenceStrength }>`
 const EvidenceDrawer = styled.aside`
   display: grid;
   gap: 10px;
-  max-width: 64ch;
-  margin-top: 4px;
+  max-width: min(100%, 1180px);
+  margin-top: 10px;
   border-left: 2px solid var(--platform-colors-border, rgb(46 51 56 / 18%));
   padding: 2px 0 2px 14px;
 `
 
 const EvidenceGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: 10px;
+  column-count: 3;
+  column-gap: 10px;
+  min-width: 0;
+  max-width: 100%;
   margin-top: 2px;
+
+  @media (max-width: 980px) {
+    column-count: 2;
+  }
+
+  @media (max-width: 640px) {
+    column-count: 1;
+  }
 `
 
 const AuditList = styled.section`
   display: grid;
   gap: 14px;
+  min-width: 0;
+  max-width: 100%;
   border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
   padding-top: 18px;
 `
@@ -490,53 +1110,85 @@ const AuditList = styled.section`
 const AuditIntro = styled.div`
   max-width: 70ch;
   color: var(--platform-colors-text-secondary, #6b665e);
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.55;
 `
 
+const MarkdownPane = styled.pre`
+  max-width: min(100%, 1180px);
+  margin: 0;
+  overflow: auto;
+  border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 12%));
+  border-radius: var(--platform-radius-md, 0px);
+  background: var(--platform-colors-surface, rgb(255 255 255 / 58%));
+  padding: 18px;
+  color: var(--platform-colors-text, #1c1a17);
+  font-family:
+    var(--platform-typography-font-family-mono, ui-monospace, SFMono-Regular),
+    monospace;
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+`
+
 const AuditFinding = styled.div`
   display: grid;
   gap: 9px;
+  min-width: 0;
+  max-width: 100%;
 `
 
 const EvidenceCard = styled.div`
   display: grid;
+  break-inside: avoid;
   gap: 8px;
   min-width: 0;
+  max-width: 100%;
+  margin: 0 0 10px;
+  overflow: hidden;
   border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 10%));
   border-radius: var(--platform-radius-md, 0px);
   background: var(--platform-colors-surface, rgb(255 255 255 / 56%));
   padding: 12px 13px;
+  font-family: var(--dossier-sans);
 `
 
 const EvidenceTop = styled.div`
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
+  min-width: 0;
 `
 
 const EvidenceLabel = styled.span`
+  min-width: 0;
   color: var(--platform-colors-text-secondary, #8f98a4);
+  font-family: var(--dossier-mono);
   font-size: 10px;
   font-weight: 850;
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 `
 
 const EvidenceTitle = styled.a`
   min-width: 0;
-  overflow: hidden;
   color: var(--platform-colors-text, #1c1a17);
+  font-family: var(--dossier-serif);
   font-size: 14px;
-  font-weight: 750;
+  font-weight: 600;
   line-height: 1.3;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-decoration: underline;
+  text-decoration-color: var(--platform-colors-border-strong, rgb(46 51 56 / 24%));
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 
   &:hover {
-    text-decoration: underline;
     text-decoration-color: var(
       --platform-colors-border-strong,
       rgb(46 51 56 / 28%)
@@ -546,15 +1198,40 @@ const EvidenceTitle = styled.a`
 
 const EvidenceNote = styled.div`
   color: var(--platform-colors-text-secondary, #6b665e);
+  font-family: var(--dossier-serif);
   font-size: 13px;
   line-height: 1.45;
 `
 
+const EvidenceMiniTable = styled.dl`
+  display: grid;
+  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
+  gap: 4px 8px;
+  margin: 0;
+  color: var(--platform-colors-text-secondary, #6b665e);
+  font-family: var(--dossier-sans);
+  font-size: 12px;
+  line-height: 1.35;
+
+  dt {
+    color: var(--platform-colors-text, #20242a);
+    font-family: var(--dossier-mono);
+    font-weight: 750;
+  }
+
+  dd {
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+`
+
 const Quote = styled.blockquote`
   margin: 0;
   border-left: 2px solid var(--platform-colors-border, rgb(46 51 56 / 16%));
   padding-left: 10px;
   color: var(--platform-colors-text, #3a4047);
+  font-family: var(--dossier-serif);
   font-size: 12.5px;
   line-height: 1.45;
 `
@@ -584,7 +1261,7 @@ const QuietListItems = styled.div`
 
 const QuietListItem = styled.div`
   color: var(--platform-colors-text-secondary, #6b665e);
-  font-size: 14px;
+  font-size: 15px;
   line-height: 1.55;
 `
 
@@ -592,6 +1269,7 @@ const Footer = styled.footer`
   border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
   padding-top: 14px;
   color: var(--platform-colors-text-secondary, #8f98a4);
+  font-family: var(--dossier-sans);
   font-size: 12px;
   line-height: 1.5;
 `
@@ -618,9 +1296,10 @@ function SourceTitle({
 function evidenceHandleLabel(finding: EvidenceFinding): string {
   const count = finding?.evidence?.length
   const sourceLabel = count === 1 ? 'source' : 'sources'
-  if (finding.confidence === 'strong') return `checked · ${count}`
-  if (finding.confidence === 'weak') return `weak · ${count}`
-  return `${count} ${sourceLabel}`
+  if (finding.confidence === 'weak') {
+    return `Review sources · needs support · ${count} ${sourceLabel}`
+  }
+  return `Review sources · ${count} ${sourceLabel}`
 }
 
 function evidenceHandleTitle(finding: EvidenceFinding): string {
@@ -629,15 +1308,107 @@ function evidenceHandleTitle(finding: EvidenceFinding): string {
   return `Show evidence: ${cleanDisplayText(strongest.title)}`
 }
 
+function topEvidenceSources(finding: EvidenceFinding): EvidenceSource[] {
+  return finding.evidence.slice(0, 3)
+}
+
+function markdownEscape(value: string): string {
+  return cleanDisplayText(value).replace(/\[/g, '\\[').replace(/\]/g, '\\]')
+}
+
+function markdownLink(label: string, url?: string): string {
+  const cleanedLabel = markdownEscape(label || url || 'Source')
+  if (!url) return cleanedLabel
+  return `[${cleanedLabel}](${url.replace(/\)/g, '%29')})`
+}
+
+function markdownFreshnessLabel(
+  freshness?: EvidenceSource['freshness'],
+): string {
+  if (freshness === 'fresh') return 'fresh evidence'
+  if (freshness === 'stale') return 'older evidence'
+  return 'undated evidence'
+}
+
+function findingMarkdown(finding: EvidenceFinding, index: number): string {
+  const sources = topEvidenceSources(finding)
+  const lines = [
+    `## ${index + 1}. ${cleanDisplayText(finding.title)}`,
+    '',
+    cleanRichText(finding.claim),
+    '',
+    `Evidence: ${strengthLabels[finding.confidence]}; ${
+      finding.evidence.length
+    } source${finding.evidence.length === 1 ? '' : 's'}.`,
+  ]
+  if (finding.annotation) {
+    lines.push('', `Note: ${cleanDisplayText(finding.annotation)}`)
+  }
+  if (sources.length) {
+    lines.push('', 'Top supporting sources:')
+    sources.forEach(source => {
+      const date = source.sourceDate ? `, ${source.sourceDate}` : ''
+      const freshness = source.freshness
+        ? `, ${markdownFreshnessLabel(source.freshness)}`
+        : ''
+      const note = sourceNoteSummary(source.note)
+      lines.push(
+        `- ${markdownLink(source.title || source.url || 'Source', source.url)}${date}${freshness}${note ? ` — ${note}` : ''}`,
+      )
+    })
+  }
+  return lines.join('\n')
+}
+
+export function dossierMarkdown(input: {
+  title: string
+  question: string
+  updatedLabel: string | null
+  leadText: string
+  findings: EvidenceFinding[]
+}): string {
+  const lines = [
+    `# ${cleanDisplayText(input.title) || 'Untitled dossier'}`,
+    '',
+    `Original prompt: ${displayPrompt(input.question) || 'Not provided.'}`,
+  ]
+  if (input.updatedLabel) lines.push(`Updated: ${input.updatedLabel}`)
+  lines.push(
+    '',
+    '## Executive summary',
+    '',
+    cleanRichText(input.leadText),
+    '',
+    '## Findings',
+    '',
+    ...input.findings.map(findingMarkdown),
+  )
+  return `${lines.join('\n').replace(/\n{3,}/g, '\n\n').trim()}\n`
+}
+
+function findingFreshnessBadge(finding: EvidenceFinding): {
+  label: string
+  tone: 'fresh' | 'stale' | 'undated'
+} {
+  if (finding.freshnessMode === 'open') {
+    return { label: 'sources checked', tone: 'undated' }
+  }
+  if (finding.evidence.some(source => source.freshness === 'fresh')) {
+    return { label: 'fresh sources', tone: 'fresh' }
+  }
+  if (finding.evidence.some(source => source.freshness === 'stale')) {
+    return { label: 'older sources', tone: 'stale' }
+  }
+  return { label: 'check dates', tone: 'undated' }
+}
+
 function EvidenceCitation({
   finding,
   open,
-  onOpen,
   onToggle,
 }: {
   finding: EvidenceFinding
   open: boolean
-  onOpen: () => void
   onToggle: () => void
 }): React.ReactElement | null {
   if (!finding?.evidence?.length) return null
@@ -645,17 +1416,56 @@ function EvidenceCitation({
     <EvidenceHandle
       type="button"
       $strength={finding.confidence}
-      onMouseEnter={onOpen}
-      onFocus={onOpen}
       onClick={onToggle}
       aria-expanded={open}
       title={evidenceHandleTitle(finding)}
     >
-      {evidenceHandleLabel(finding)}
+      {open ? 'Hide sources' : evidenceHandleLabel(finding)}
     </EvidenceHandle>
   )
 }
 
+function SourceSupport({
+  finding,
+  open,
+  onToggle,
+}: {
+  finding: EvidenceFinding
+  open: boolean
+  onToggle: () => void
+}): React.ReactElement | null {
+  const sources = topEvidenceSources(finding)
+  if (!finding.evidence.length) return null
+  return (
+    <SourceSupportLine>
+      <EvidenceCitation
+        finding={finding}
+        open={open}
+        onToggle={onToggle}
+      />
+      {sources.length ? <SourceSupportLabel>Top sources</SourceSupportLabel> : null}
+      {sources.map((source, index) => {
+        const label =
+          cleanDisplayText(source.title) ||
+          cleanDisplayText(source.url) ||
+          `Source ${index + 1}`
+        const href = sourceUrlWithTextFragment(source)
+        return (
+          <SourceSupportChip key={source.id}>
+            {href ? (
+              <SourceSupportLink href={href} target="_blank" rel="noreferrer">
+                {label}
+              </SourceSupportLink>
+            ) : (
+              label
+            )}
+          </SourceSupportChip>
+        )
+      })}
+    </SourceSupportLine>
+  )
+}
+
 function EvidenceCards({
   sources,
 }: {
@@ -667,6 +1477,7 @@ function EvidenceCards({
         const showQuote = Boolean(
           source.quote && source.label !== 'Web evidence',
         )
+        const rows = pipeSummaryRows(source.note)
         return (
           <EvidenceCard key={source.id}>
             <EvidenceTop>
@@ -676,7 +1487,19 @@ function EvidenceCards({
               </Confidence>
             </EvidenceTop>
             <SourceTitle source={source} />
-            <EvidenceNote>{cleanDisplayText(source.note)}</EvidenceNote>
+            <EvidenceNote>
+              <LinkifiedText text={sourceNoteSummary(source.note)} />
+            </EvidenceNote>
+            {rows.length ? (
+              <EvidenceMiniTable>
+                {rows.map(([label, value], index) => (
+                  <Fragment key={`${label}-${index}`}>
+                    <dt>{label}</dt>
+                    <dd>{value}</dd>
+                  </Fragment>
+                ))}
+              </EvidenceMiniTable>
+            ) : null}
             {showQuote ? (
               <Quote>{cleanDisplayText(source.quote ?? '')}</Quote>
             ) : null}
@@ -687,17 +1510,239 @@ function EvidenceCards({
   )
 }
 
+/**
+ * Repair markdown tables whose newlines were collapsed upstream (older
+ * sanitizers flattened `\n` to spaces, leaving pipe rows glued into prose).
+ * Only runs when a `|---|` separator run is present; row boundaries in
+ * flattened text appear as `| |` (closing pipe, space, opening pipe).
+ */
+function inflateFlattenedTables(value: string): string {
+  if (!/\|[ \t]*:?-{3,}/.test(value)) return value
+  return value.replace(/\|[ \t]+\|/g, '|\n|')
+}
+
+/**
+ * Heading markers that survive mid-line come from legacy flattened text where
+ * the heading's line boundary is unrecoverable — drop the marker and its
+ * section number ("### 2. " leaves a dangling "2." otherwise), keep the
+ * words. Line-start headings are left intact for ClaimText to render.
+ */
+function stripInlineHeadingMarkers(value: string): string {
+  return value.replace(
+    /([^\n#])[ \t]+#{1,6}[ \t]+(?:\d{1,2}[.)][ \t]+)?/g,
+    '$1 ',
+  )
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/** Wrap glossary-term occurrences in an annotated mark with the explanation. */
+function annotateTerms(
+  text: string,
+  glossary: EvidenceTermNote[] | undefined,
+): ReactNode {
+  const terms = (glossary ?? []).filter(
+    item => item.term.trim() && item.explanation.trim(),
+  )
+  if (!terms.length) return text
+  const byTerm = new Map(terms.map(item => [item.term.toLowerCase(), item]))
+  const pattern = new RegExp(
+    `(${[...terms]
+      .sort((left, right) => right.term.length - left.term.length)
+      .map(item => escapeRegExp(item.term))
+      .join('|')})`,
+    'gi',
+  )
+  const parts = text.split(pattern)
+  if (parts.length === 1) return text
+  return parts.map((part, partIndex) => {
+    const note = byTerm.get(part.toLowerCase())
+    if (!note) return part
+    return (
+      <TermNoteMark
+        key={`term-${partIndex}`}
+        tabIndex={0}
+        data-explanation={note.explanation}
+        aria-label={`${part}: ${note.explanation}`}
+      >
+        {part}
+        <TermNotePopover role="note">
+          <TermNoteBubble>
+            {note.expansion ? <strong>{note.expansion} — </strong> : null}
+            {note.explanation}
+            {note.url ? (
+              <TermNoteLink
+                href={note.url}
+                target="_blank"
+                rel="noreferrer"
+                aria-label={`Authoritative explanation of ${part}`}
+              >
+                {explainerLinkLabel(note.url)} ↗
+              </TermNoteLink>
+            ) : null}
+          </TermNoteBubble>
+        </TermNotePopover>
+      </TermNoteMark>
+    )
+  })
+}
+
+function explainerLinkLabel(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '')
+  } catch {
+    return 'Learn more'
+  }
+}
+
+function ClaimText({
+  value,
+  glossary,
+}: {
+  value: string
+  glossary?: EvidenceTermNote[]
+}): React.ReactElement {
+  const lines = stripInlineHeadingMarkers(
+    inflateFlattenedTables(cleanRichText(value)),
+  )
+    .split('\n')
+    .map(line => line.trim())
+  const nodes: ReactNode[] = []
+  let index = 0
+  let paragraph: string[] = []
+  const flushParagraph = (): void => {
+    readableParagraphs(paragraph.join(' ')).forEach(text => {
+      nodes.push(
+        <ClaimParagraph key={`p-${nodes.length}`}>
+          {annotateTerms(text, glossary)}
+        </ClaimParagraph>,
+      )
+    })
+    paragraph = []
+  }
+
+  while (index < lines.length) {
+    // Detach prose glued to a table header ("…workflows: | Harness | …")
+    // so the header row is recognized when the next line is a separator.
+    const glued = lines[index]
+    const nextLine = lines[index + 1]
+    if (
+      glued &&
+      !glued.startsWith('|') &&
+      glued.includes('|') &&
+      glued.endsWith('|') &&
+      nextLine &&
+      isTableSeparator(nextLine)
+    ) {
+      const pipeAt = glued.indexOf('|')
+      const prose = glued.slice(0, pipeAt).trim()
+      if (prose) paragraph.push(prose)
+      lines[index] = glued.slice(pipeAt).trim()
+    }
+    const header = lines[index]
+    const separator = lines[index + 1]
+    if (header?.startsWith('|') && separator && isTableSeparator(separator)) {
+      const headers = tableCells(header)
+      const rows: string[][] = []
+      index += 2
+      while (index < lines.length && lines[index]?.startsWith('|')) {
+        let rowLine = lines[index]
+        // A final row may have trailing prose glued after its closing pipe
+        // (flattened upstream); keep the row and requeue the prose.
+        if (!rowLine.endsWith('|')) {
+          const lastPipe = rowLine.lastIndexOf('|')
+          if (lastPipe <= 0) break
+          const trailing = rowLine.slice(lastPipe + 1).trim()
+          rowLine = rowLine.slice(0, lastPipe + 1)
+          if (trailing) lines.splice(index + 1, 0, trailing)
+        }
+        const cells = tableCells(rowLine)
+        if (!cells.length) break
+        rows.push(cells)
+        index += 1
+      }
+      flushParagraph()
+      nodes.push(
+        <TableScroll key={`table-${nodes.length}`}>
+          <ClaimTable>
+            <thead>
+              <tr>
+                {headers.map((cell, cellIndex) => (
+                  <th key={`${cell}-${cellIndex}`}>{cell}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rowIndex) => (
+                <tr key={`row-${rowIndex}`}>
+                  {headers.map((_, cellIndex) => (
+                    <td key={`cell-${rowIndex}-${cellIndex}`}>
+                      {row[cellIndex] ?? ''}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </ClaimTable>
+        </TableScroll>,
+      )
+      continue
+    }
+    const headingMatch = header?.match(/^#{1,6}\s+(.+?)\s*#*$/)
+    if (headingMatch && headingMatch[1].length <= 120) {
+      flushParagraph()
+      nodes.push(
+        <ClaimHeading key={`heading-${nodes.length}`}>
+          {headingMatch[1]}
+        </ClaimHeading>,
+      )
+      index += 1
+      continue
+    }
+    if (headingMatch) {
+      // Over-long "heading" is legacy flattened text with prose glued after
+      // the title — drop the marker and enumeration, reprocess as paragraph.
+      lines[index] = headingMatch[1].replace(/^\d{1,2}[.)]\s+/, '')
+      continue
+    }
+    if (header && /^[*•-]\s+/.test(header)) {
+      flushParagraph()
+      const items: string[] = []
+      while (index < lines.length && /^[*•-]\s+/.test(lines[index])) {
+        items.push(lines[index].replace(/^[*•-]\s+/, ''))
+        index += 1
+      }
+      nodes.push(
+        <ClaimList key={`list-${nodes.length}`}>
+          {items.map((item, itemIndex) => (
+            <li key={`item-${itemIndex}`}>{annotateTerms(item, glossary)}</li>
+          ))}
+        </ClaimList>,
+      )
+      continue
+    }
+    if (header) paragraph.push(header)
+    else flushParagraph()
+    index += 1
+  }
+  flushParagraph()
+
+  return <ClaimContent>{nodes}</ClaimContent>
+}
+
 export function EvidenceDossier({
   title,
   question,
   answer,
   updatedAt,
-  narrative,
   findings,
   uncertainties,
   nextSteps,
   onTitleChange,
   onDeleteFinding,
+  onUpdate,
   footer,
   className,
 }: EvidenceDossierProps): React.ReactElement {
@@ -707,7 +1752,6 @@ export function EvidenceDossier({
   const safeFindings = Array.isArray(findings)
     ? findings.map(normalizeEvidenceFinding).filter(isEvidenceFinding)
     : []
-  const safeNarrative = Array.isArray(narrative) ? narrative : []
   const safeUncertainties = Array.isArray(uncertainties) ? uncertainties : []
   const safeNextSteps = Array.isArray(nextSteps) ? nextSteps : []
   const activeEvidence =
@@ -718,14 +1762,23 @@ export function EvidenceDossier({
     setOpenEvidenceId(current => (current === findingId ? null : findingId))
   }
   const leadEvidence = safeFindings[0]
-  const narrativeEvidence = (index: number): EvidenceFinding | undefined =>
-    safeFindings[index + 1] ?? safeFindings[index] ?? safeFindings[0]
+  const leadText =
+    leadEvidence?.claim ||
+    cleanDisplayText(answer) ||
+    'No executive summary available yet.'
+  const markdownText = dossierMarkdown({
+    title,
+    question,
+    updatedLabel,
+    leadText,
+    findings: safeFindings,
+  })
 
   return (
     <Dossier className={className}>
       <ModeDock>
         <ModeSwitch aria-label="Dossier reading density">
-          {(['read', 'review', 'audit'] as DossierRenderMode[]).map(item => (
+          {(['read', 'review', 'audit', 'markdown'] as DossierRenderMode[]).map(item => (
             <ModeButton
               key={item}
               type="button"
@@ -754,60 +1807,76 @@ export function EvidenceDossier({
         ) : (
           <Title>{cleanDisplayText(title)}</Title>
         )}
-        <Question>{cleanDisplayText(question)}</Question>
-        {updatedLabel ? (
-          <UpdatedStamp>Updated {updatedLabel}</UpdatedStamp>
-        ) : null}
+        <Question>
+          <PromptLabel>Original prompt: </PromptLabel>
+          {displayPrompt(question)}
+        </Question>
+        <HeaderMeta>
+          {updatedLabel ? (
+            <UpdatedStamp>Updated {updatedLabel}</UpdatedStamp>
+          ) : null}
+          {onUpdate ? (
+            <UpdateButton type="button" onClick={onUpdate}>
+              Update
+            </UpdateButton>
+          ) : null}
+        </HeaderMeta>
       </Header>
 
-      {mode !== 'audit' ? (
+      {mode === 'markdown' ? (
+        <MarkdownPane aria-label="Markdown dossier handoff">
+          {markdownText}
+        </MarkdownPane>
+      ) : null}
+
+      {mode !== 'audit' && mode !== 'markdown' ? (
         <Narrative aria-label="Dossier narrative">
-          <Kicker>Dossier</Kicker>
+          <Kicker>Executive summary</Kicker>
           <Lead>
-            {cleanDisplayText(answer)}
+            <ClaimText value={leadText} glossary={leadEvidence?.glossary} />
             {leadEvidence ? (
-              <EvidenceCitation
+              <SourceSupport
                 finding={leadEvidence}
                 open={openEvidenceId === leadEvidence.id}
-                onOpen={() => setOpenEvidenceId(leadEvidence.id)}
                 onToggle={() => toggleEvidence(leadEvidence.id)}
               />
             ) : null}
+            {activeEvidence &&
+            leadEvidence &&
+            activeEvidence.id === leadEvidence.id ? (
+              <EvidenceDrawer>
+                <EvidenceCards sources={activeEvidence?.evidence} />
+              </EvidenceDrawer>
+            ) : null}
           </Lead>
-          {activeEvidence &&
-          leadEvidence &&
-          activeEvidence.id === leadEvidence.id ? (
-            <EvidenceDrawer>
-              <EvidenceCards sources={activeEvidence?.evidence} />
-            </EvidenceDrawer>
-          ) : null}
-          {safeNarrative.map((item, index) => {
-            const relatedFinding = narrativeEvidence(index)
-            const paragraphEvidence =
-              activeEvidence &&
-              relatedFinding &&
-              activeEvidence.id === relatedFinding.id
-                ? activeEvidence
-                : null
+          <ExecutiveList aria-label="Executive summary points">
+            {safeFindings.map((finding, index) => {
+              const paragraphEvidence =
+                activeEvidence?.id === finding.id ? activeEvidence : null
             return (
-              <NarrativeText key={`${index}-${item}`}>
-                {cleanDisplayText(item)}
-                {relatedFinding ? (
-                  <EvidenceCitation
-                    finding={relatedFinding}
-                    open={openEvidenceId === relatedFinding.id}
-                    onOpen={() => setOpenEvidenceId(relatedFinding.id)}
-                    onToggle={() => toggleEvidence(relatedFinding.id)}
+              <ExecutiveItem key={finding.id}>
+                <ExecutiveBullet>
+                  {String(index + 1).padStart(2, '0')}
+                </ExecutiveBullet>
+                <div>
+                  <ExecutiveText>
+                    {summarySentence(finding.claim, finding.title)}
+                  </ExecutiveText>
+                  <SourceSupport
+                    finding={finding}
+                    open={openEvidenceId === finding.id}
+                    onToggle={() => toggleEvidence(finding.id)}
                   />
-                ) : null}
-                {paragraphEvidence ? (
-                  <EvidenceDrawer>
-                    <EvidenceCards sources={paragraphEvidence.evidence} />
-                  </EvidenceDrawer>
-                ) : null}
-              </NarrativeText>
+                  {paragraphEvidence ? (
+                    <EvidenceDrawer>
+                      <EvidenceCards sources={paragraphEvidence.evidence} />
+                    </EvidenceDrawer>
+                  ) : null}
+                </div>
+              </ExecutiveItem>
             )
-          })}
+            })}
+          </ExecutiveList>
         </Narrative>
       ) : null}
 
@@ -821,12 +1890,14 @@ export function EvidenceDossier({
           {safeFindings.map(finding => (
             <AuditFinding key={finding.id}>
               <FindingTitle>{cleanDisplayText(finding.title)}</FindingTitle>
-              <Claim>{cleanDisplayText(finding.claim)}</Claim>
+              <Claim>
+                <ClaimText value={finding.claim} glossary={finding.glossary} />
+              </Claim>
               <EvidenceCards sources={finding.evidence} />
             </AuditFinding>
           ))}
         </AuditList>
-      ) : (
+      ) : mode !== 'markdown' ? (
         <Findings aria-label="Evidence-backed positions">
           <Kicker>{mode === 'read' ? 'Argument' : 'Claim review'}</Kicker>
           {safeFindings.map((finding, index) => (
@@ -850,20 +1921,33 @@ export function EvidenceDossier({
                       </DeleteAction>
                     ) : null}
                   </FindingTitleGroup>
-                  {mode === 'review' ? (
-                    <Confidence $strength={finding.confidence}>
-                      {strengthLabels[finding.confidence]}
-                    </Confidence>
-                  ) : null}
                 </FindingHeader>
+                <FindingBadges aria-label="Finding review signals">
+                  <FindingBadge $tone={finding.confidence}>
+                    {strengthLabels[finding.confidence]}
+                  </FindingBadge>
+                  <FindingBadge $tone={findingFreshnessBadge(finding).tone}>
+                    {findingFreshnessBadge(finding).label}
+                  </FindingBadge>
+                  <FindingBadge>
+                    {finding.evidence.length} source
+                    {finding.evidence.length === 1 ? '' : 's'}
+                  </FindingBadge>
+                </FindingBadges>
                 <Claim>
-                  <ClaimLine>{cleanDisplayText(finding.claim)}</ClaimLine>
-                  <EvidenceCitation
+                  <ClaimLine>
+                    <ClaimText value={finding.claim} glossary={finding.glossary} />
+                  </ClaimLine>
+                  <SourceSupport
                     finding={finding}
                     open={openEvidenceId === finding.id}
-                    onOpen={() => setOpenEvidenceId(finding.id)}
                     onToggle={() => toggleEvidence(finding.id)}
                   />
+                  {activeEvidence?.id === finding.id && mode !== 'review' ? (
+                    <EvidenceDrawer>
+                      <EvidenceCards sources={activeEvidence.evidence} />
+                    </EvidenceDrawer>
+                  ) : null}
                 </Claim>
                 {finding.annotation ? (
                   <Annotation>
@@ -872,35 +1956,33 @@ export function EvidenceDossier({
                 ) : null}
                 {mode === 'review' ? (
                   <EvidenceCards sources={finding.evidence} />
-                ) : activeEvidence?.id === finding.id ? (
-                  <EvidenceDrawer>
-                    <EvidenceCards sources={activeEvidence.evidence} />
-                  </EvidenceDrawer>
                 ) : null}
               </FindingBody>
             </Finding>
           ))}
         </Findings>
-      )}
-
-      <BottomGrid>
-        <QuietList>
-          <Kicker>Uncertainty</Kicker>
-          <QuietListItems>
-            {safeUncertainties.map(item => (
-              <QuietListItem key={item}>{cleanDisplayText(item)}</QuietListItem>
-            ))}
-          </QuietListItems>
-        </QuietList>
-        <QuietList>
-          <Kicker>Next</Kicker>
-          <QuietListItems>
-            {safeNextSteps.map(item => (
-              <QuietListItem key={item}>{cleanDisplayText(item)}</QuietListItem>
-            ))}
-          </QuietListItems>
-        </QuietList>
-      </BottomGrid>
+      ) : null}
+
+      {mode !== 'markdown' ? (
+        <BottomGrid>
+          <QuietList>
+            <Kicker>Uncertainty</Kicker>
+            <QuietListItems>
+              {safeUncertainties.map(item => (
+                <QuietListItem key={item}>{cleanDisplayText(item)}</QuietListItem>
+              ))}
+            </QuietListItems>
+          </QuietList>
+          <QuietList>
+            <Kicker>Next</Kicker>
+            <QuietListItems>
+              {safeNextSteps.map(item => (
+                <QuietListItem key={item}>{cleanDisplayText(item)}</QuietListItem>
+              ))}
+            </QuietListItems>
+          </QuietList>
+        </BottomGrid>
+      ) : null}
 
       {footer ? <Footer>{footer}</Footer> : null}
     </Dossier>