@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

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

@@ -1,894 +1,904 @@
-import { useState, type ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export type EvidenceStrength = 'strong' | 'working' | 'weak'
-
-export interface EvidenceSource {
-  id: string
-  label: string
-  title: string
-  url?: string
-  note: string
-  quote?: string
-  strength?: EvidenceStrength
-}
-
-export interface EvidenceFinding {
-  id: string
-  title: string
-  claim: string
-  confidence: EvidenceStrength
-  annotation?: string
-  evidence: EvidenceSource[]
-}
-
-export interface EvidenceDossierProps {
-  title: string
-  question: string
-  answer: string
-  updatedAt?: string
-  narrative?: string[]
-  findings: EvidenceFinding[]
-  uncertainties: string[]
-  nextSteps: string[]
-  onTitleChange?: (title: string) => void
-  onDeleteFinding?: (findingId: string) => void
-  footer?: ReactNode
-  className?: string
-}
-
-const strengthLabels: Record<EvidenceStrength, string> = {
-  strong: 'well supported',
-  working: 'working view',
-  weak: 'needs support',
-}
-
-type DossierRenderMode = 'read' | 'review' | 'audit'
-
-const modeLabels: Record<DossierRenderMode, string> = {
-  read: 'Read',
-  review: 'Claims',
-  audit: 'Sources',
-}
-
-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.',
-}
-
-function cleanDisplayText(value: unknown): string {
-  return String(value ?? '')
-    .replace(/\*\*([^*]+)\*\*/g, '$1')
-    .replace(/\*([^*]+)\*/g, '$1')
-    .replace(/__([^_]+)__/g, '$1')
-    .replace(/_([^_]+)_/g, '$1')
-    .replace(/\s*\[(?:\d+(?:,\s*)?)+\]/g, '')
-    .replace(/\s*\[\d+\](?=\[\d+\])/g, '')
-    .replace(/\[(\d+)\]/g, '')
-    .replace(/\s+([,.;:])/g, '$1')
-    .replace(/\s{2,}/g, ' ')
-    .trim()
-}
-
-function sourceUrlWithTextFragment(source: EvidenceSource): string | undefined {
-  if (!source.url) return undefined
-  const quote = cleanDisplayText(source.quote ?? '')
-  if (!quote) return source.url
-  const fragment = quote.slice(0, 140).trim()
-  if (!fragment) return source.url
-  const baseUrl = source.url.split('#')[0]
-  return `${baseUrl}#:~:text=${encodeURIComponent(fragment)}`
-}
-
-function formatUpdatedAt(value?: string): string | null {
-  if (!value) return null
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return value
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  }).format(date)
-}
-
-function normalizeEvidenceSource(source: unknown, index: number): EvidenceSource {
-  const value =
-    source && typeof source === 'object'
-      ? (source as Partial<EvidenceSource>)
-      : {}
-  return {
-    id: cleanDisplayText(value.id) || `source-${index}`,
-    label: cleanDisplayText(value.label) || 'Evidence',
-    title: cleanDisplayText(value.title) || 'Untitled source',
-    url: cleanDisplayText(value.url) || undefined,
-    note: cleanDisplayText(value.note),
-    quote: cleanDisplayText(value.quote) || undefined,
-    strength:
-      value.strength === 'strong' ||
-      value.strength === 'working' ||
-      value.strength === 'weak'
-        ? value.strength
-        : 'working',
-  }
-}
-
-function normalizeEvidenceFinding(
-  finding: unknown,
-  index: number,
-): EvidenceFinding | null {
-  if (!finding || typeof finding !== 'object') return null
-  const value = finding as Partial<EvidenceFinding>
-  const title = cleanDisplayText(value.title)
-  const claim = cleanDisplayText(value.claim)
-  if (!title && !claim) return null
-  const evidence = Array.isArray(value.evidence)
-    ? value.evidence.map(normalizeEvidenceSource)
-    : []
-  return {
-    id: cleanDisplayText(value.id) || `finding-${index}`,
-    title: title || `Finding ${index + 1}`,
-    claim,
-    confidence:
-      value.confidence === 'strong' ||
-      value.confidence === 'working' ||
-      value.confidence === 'weak'
-        ? value.confidence
-        : evidence.length
-          ? 'working'
-          : 'weak',
-    annotation: cleanDisplayText(value.annotation) || undefined,
-    evidence,
-  }
-}
-
-function isEvidenceFinding(
-  finding: EvidenceFinding | null,
-): finding is EvidenceFinding {
-  return finding !== null
-}
-
-//#region styled-components
-
-const Dossier = styled.article`
-  display: grid;
-  gap: 24px;
-  min-width: 0;
-  position: relative;
-  color: var(--platform-colors-text, #2e3338);
-`
-
-const Header = styled.header`
-  display: grid;
-  gap: 16px;
-  padding-bottom: 22px;
-  border-bottom: 1px solid rgb(46 51 56 / 12%);
-`
-
-const ModeDock = styled.div`
-  display: grid;
-  position: sticky;
-  top: 12px;
-  z-index: 3;
-  justify-self: end;
-  gap: 5px;
-
-  @media (max-width: 760px) {
-    justify-self: start;
-  }
-`
-
-const ModeSwitch = styled.div`
-  display: inline-flex;
-  gap: 4px;
-  padding: 3px;
-  border: 1px solid rgb(46 51 56 / 10%);
-  border-radius: 999px;
-  background: rgb(255 254 250 / 86%);
-  box-shadow: 0 10px 30px rgb(46 51 56 / 8%);
-  backdrop-filter: blur(10px);
-`
-
-const ModeDescription = styled.div`
-  max-width: 260px;
-  justify-self: end;
-  color: var(--platform-colors-text-tertiary, #8f98a4);
-  font-size: 11px;
-  line-height: 1.25;
-  text-align: right;
-
-  @media (max-width: 760px) {
-    justify-self: start;
-    text-align: left;
-  }
-`
-
-const ModeButton = styled.button<{ $active: boolean }>`
-  min-height: 26px;
-  border: 0;
-  border-radius: 999px;
-  background: ${({ $active }) =>
-    $active ? 'rgb(46 51 56 / 9%)' : 'transparent'};
-  padding: 0 10px;
-  color: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text, #2e3338)'
-      : 'var(--platform-colors-text-tertiary, #8f98a4)'};
-  font: inherit;
-  font-size: 12px;
-  font-weight: 750;
-  cursor: pointer;
-`
-
-const Kicker = styled.div`
-  color: var(--platform-colors-text-tertiary, #9aa2ad);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  line-height: 1.3;
-  text-transform: uppercase;
-`
-
-const Title = styled.h1`
-  max-width: 22ch;
-  margin: 0;
-  color: var(--platform-colors-text, #20242a);
-  font-size: clamp(34px, 4.2vw, 54px);
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1.05;
-  overflow-wrap: anywhere;
-`
-
-const TitleInput = styled.textarea`
-  display: block;
-  width: 100%;
-  max-width: 22ch;
-  min-height: 1.1em;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  color: var(--platform-colors-text, #20242a);
-  font: inherit;
-  font-size: clamp(34px, 4.2vw, 54px);
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1.05;
-  outline: none;
-  overflow: hidden;
-  overflow-wrap: anywhere;
-  resize: none;
-  field-sizing: content;
-
-  &:focus {
-    box-shadow: inset 0 -2px 0 rgb(46 51 56 / 18%);
-  }
-`
-
-const Question = styled.div`
-  max-width: 72ch;
-  color: var(--platform-colors-text-secondary, #68717c);
-  font-size: 14px;
-  line-height: 1.55;
-`
-
-const UpdatedStamp = styled.div`
-  color: var(--platform-colors-text-tertiary, #9aa2ad);
-  font-size: 11px;
-  font-weight: 750;
-  letter-spacing: 0.05em;
-  line-height: 1.3;
-  text-transform: uppercase;
-`
-
-const Narrative = styled.section`
-  display: grid;
-  gap: 18px;
-  max-width: 78ch;
-  padding: 2px 0 8px;
-`
-
-const Lead = styled.div`
-  margin: 0;
-  color: var(--platform-colors-text, #2e3338);
-  font-size: clamp(18px, 1.6vw, 22px);
-  line-height: 1.58;
-`
-
-const NarrativeText = styled.div`
-  margin: 0;
-  color: var(--platform-colors-text, #3a4047);
-  font-size: 14.5px;
-  line-height: 1.72;
-`
-
-const Findings = styled.section`
-  display: grid;
-  gap: 10px;
-`
-
-const Finding = styled.article`
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
-  gap: 18px;
-  padding: 18px 0 20px;
-  border-top: 1px solid rgb(46 51 56 / 10%);
-`
-
-const FindingNumber = styled.div`
-  color: var(--platform-colors-text-tertiary, #9aa2ad);
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-`
-
-const FindingBody = styled.div`
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-`
-
-const FindingHeader = styled.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 18px;
-
-  @media (max-width: 760px) {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 8px;
-  }
-`
-
-const FindingTitleGroup = styled.div`
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  min-width: 0;
-  max-width: 100%;
-`
-
-const FindingTitle = styled.h2`
-  margin: 0;
-  color: var(--platform-colors-text, #20242a);
-  font-size: clamp(17px, 1.5vw, 21px);
-  font-weight: 750;
-  letter-spacing: 0;
-  line-height: 1.2;
-  overflow-wrap: anywhere;
-`
-
-const DeleteAction = styled.button`
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--platform-colors-text-tertiary, #9aa2ad);
-  font: inherit;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  opacity: 0;
-  cursor: pointer;
-  transition: opacity 120ms ease, color 120ms ease;
-
-  ${Finding}:hover &,
-  &:focus-visible {
-    opacity: 0.7;
-  }
-
-  &:hover {
-    color: #8a5f49;
-    opacity: 1;
-  }
-`
-
-const Confidence = styled.span<{ $strength: EvidenceStrength }>`
-  flex: 0 0 auto;
-  color: ${({ $strength }) =>
-    $strength === 'strong'
-      ? '#3d6b4a'
-      : $strength === 'weak'
-      ? '#9a694f'
-      : 'var(--platform-colors-text-secondary, #68717c)'};
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-`
-
-const Claim = styled.p`
-  max-width: 76ch;
-  margin: 0;
-  color: var(--platform-colors-text, #2e3338);
-  font-size: 14.5px;
-  line-height: 1.72;
-`
-
-const ClaimLine = styled.div`
-  display: inline;
-`
-
-const Annotation = styled.aside`
-  max-width: 72ch;
-  border-left: 3px solid rgb(82 90 101 / 36%);
-  padding: 4px 0 4px 14px;
-  color: var(--platform-colors-text-secondary, #68717c);
-  font-size: 13px;
-  line-height: 1.55;
-`
-
-const EvidenceHandle = styled.button<{ $strength: EvidenceStrength }>`
-  display: inline;
-  align-items: center;
-  min-height: 0;
-  margin-left: 6px;
-  transform: translateY(-1px);
-  border: 0;
-  border-bottom: 1px solid
-    ${({ $strength }) =>
-      $strength === 'strong'
-        ? 'rgb(61 107 74 / 38%)'
-        : $strength === 'weak'
-        ? 'rgb(154 105 79 / 42%)'
-        : 'rgb(46 51 56 / 26%)'};
-  border-radius: 0;
-  background: transparent;
-  padding: 0 1px;
-  color: ${({ $strength }) =>
-    $strength === 'strong'
-      ? '#3d6b4a'
-      : $strength === 'weak'
-      ? '#9a694f'
-      : 'var(--platform-colors-text-secondary, #68717c)'};
-  font: inherit;
-  font-size: 0.78em;
-  font-weight: 750;
-  letter-spacing: 0.02em;
-  cursor: pointer;
-  vertical-align: baseline;
-
-  &:hover,
-  &:focus-visible {
-    outline: none;
-    border-bottom-color: currentColor;
-  }
-`
-
-const EvidenceDrawer = styled.aside`
-  display: grid;
-  gap: 10px;
-  max-width: 64ch;
-  margin-top: 4px;
-  border-left: 2px solid 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;
-  margin-top: 2px;
-`
-
-const AuditList = styled.section`
-  display: grid;
-  gap: 14px;
-  border-top: 1px solid rgb(46 51 56 / 10%);
-  padding-top: 18px;
-`
-
-const AuditIntro = styled.div`
-  max-width: 70ch;
-  color: var(--platform-colors-text-secondary, #68717c);
-  font-size: 13px;
-  line-height: 1.55;
-`
-
-const AuditFinding = styled.div`
-  display: grid;
-  gap: 9px;
-`
-
-const EvidenceCard = styled.div`
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  border: 1px solid rgb(46 51 56 / 10%);
-  border-radius: 8px;
-  background: rgb(255 255 255 / 56%);
-  padding: 12px 13px;
-`
-
-const EvidenceTop = styled.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
-`
-
-const EvidenceLabel = styled.span`
-  color: var(--platform-colors-text-tertiary, #8f98a4);
-  font-size: 10px;
-  font-weight: 850;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-`
-
-const EvidenceTitle = styled.a`
-  min-width: 0;
-  overflow: hidden;
-  color: var(--platform-colors-text, #2e3338);
-  font-size: 14px;
-  font-weight: 750;
-  line-height: 1.3;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover {
-    text-decoration: underline;
-    text-decoration-color: rgb(46 51 56 / 28%);
-  }
-`
-
-const EvidenceNote = styled.div`
-  color: var(--platform-colors-text-secondary, #68717c);
-  font-size: 13px;
-  line-height: 1.45;
-`
-
-const Quote = styled.blockquote`
-  margin: 0;
-  border-left: 2px solid rgb(46 51 56 / 16%);
-  padding-left: 10px;
-  color: var(--platform-colors-text, #3a4047);
-  font-size: 12.5px;
-  line-height: 1.45;
-`
-
-const BottomGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-
-  @media (max-width: 760px) {
-    grid-template-columns: 1fr;
-  }
-`
-
-const QuietList = styled.section`
-  display: grid;
-  align-content: start;
-  gap: 12px;
-  border-top: 1px solid rgb(46 51 56 / 10%);
-  padding-top: 16px;
-`
-
-const QuietListItems = styled.div`
-  display: grid;
-  gap: 9px;
-`
-
-const QuietListItem = styled.div`
-  color: var(--platform-colors-text-secondary, #68717c);
-  font-size: 14px;
-  line-height: 1.55;
-`
-
-const Footer = styled.footer`
-  border-top: 1px solid rgb(46 51 56 / 10%);
-  padding-top: 14px;
-  color: var(--platform-colors-text-tertiary, #8f98a4);
-  font-size: 12px;
-  line-height: 1.5;
-`
-
-//#endregion
-
-function SourceTitle({
-  source,
-}: {
-  source: EvidenceSource
-}): React.ReactElement {
-  const content = cleanDisplayText(source.title)
-  const href = sourceUrlWithTextFragment(source)
-  if (href) {
-    return (
-      <EvidenceTitle href={href} target="_blank" rel="noreferrer">
-        {content}
-      </EvidenceTitle>
-    )
-  }
-  return <EvidenceTitle as="span">{content}</EvidenceTitle>
-}
-
-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}`
-}
-
-function evidenceHandleTitle(finding: EvidenceFinding): string {
-  const strongest = finding?.evidence?.[0]
-  if (!strongest) return 'Show evidence'
-  return `Show evidence: ${cleanDisplayText(strongest.title)}`
-}
-
-function EvidenceCitation({
-  finding,
-  open,
-  onOpen,
-  onToggle,
-}: {
-  finding: EvidenceFinding
-  open: boolean
-  onOpen: () => void
-  onToggle: () => void
-}): React.ReactElement | null {
-  if (!finding?.evidence?.length) return null
-  return (
-    <EvidenceHandle
-      type="button"
-      $strength={finding.confidence}
-      onMouseEnter={onOpen}
-      onFocus={onOpen}
-      onClick={onToggle}
-      aria-expanded={open}
-      title={evidenceHandleTitle(finding)}
-    >
-      {evidenceHandleLabel(finding)}
-    </EvidenceHandle>
-  )
-}
-
-function EvidenceCards({
-  sources,
-}: {
-  sources: EvidenceSource[]
-}): React.ReactElement {
-  return (
-    <EvidenceGrid>
-      {sources.map(source => {
-        const showQuote = Boolean(
-          source.quote && source.label !== 'Web evidence',
-        )
-        return (
-          <EvidenceCard key={source.id}>
-            <EvidenceTop>
-              <EvidenceLabel>{source.label}</EvidenceLabel>
-              <Confidence $strength={source.strength ?? 'working'}>
-                {strengthLabels[source.strength ?? 'working']}
-              </Confidence>
-            </EvidenceTop>
-            <SourceTitle source={source} />
-            <EvidenceNote>{cleanDisplayText(source.note)}</EvidenceNote>
-            {showQuote ? (
-              <Quote>{cleanDisplayText(source.quote ?? '')}</Quote>
-            ) : null}
-          </EvidenceCard>
-        )
-      })}
-    </EvidenceGrid>
-  )
-}
-
-export function EvidenceDossier({
-  title,
-  question,
-  answer,
-  updatedAt,
-  narrative,
-  findings,
-  uncertainties,
-  nextSteps,
-  onTitleChange,
-  onDeleteFinding,
-  footer,
-  className,
-}: EvidenceDossierProps): React.ReactElement {
-  const [mode, setMode] = useState<DossierRenderMode>('read')
-  const [openEvidenceId, setOpenEvidenceId] = useState<string | null>(null)
-  const updatedLabel = formatUpdatedAt(updatedAt)
-  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 =
-    openEvidenceId && mode === 'read'
-      ? safeFindings.find(finding => finding.id === openEvidenceId)
-      : null
-  const toggleEvidence = (findingId: string): void => {
-    setOpenEvidenceId(current => (current === findingId ? null : findingId))
-  }
-  const leadEvidence = safeFindings[0]
-  const narrativeEvidence = (index: number): EvidenceFinding | undefined =>
-    safeFindings[index + 1] ?? safeFindings[index] ?? safeFindings[0]
-
-  return (
-    <Dossier className={className}>
-      <ModeDock>
-        <ModeSwitch aria-label="Dossier reading density">
-          {(['read', 'review', 'audit'] as DossierRenderMode[]).map(item => (
-            <ModeButton
-              key={item}
-              type="button"
-              $active={mode === item}
-              title={modeDescriptions[item]}
-              onClick={() => {
-                setMode(item)
-                setOpenEvidenceId(null)
-              }}
-            >
-              {modeLabels[item]}
-            </ModeButton>
-          ))}
-        </ModeSwitch>
-        <ModeDescription>{modeDescriptions[mode]}</ModeDescription>
-      </ModeDock>
-      <Header>
-        <Kicker>Living dossier</Kicker>
-        {onTitleChange ? (
-          <TitleInput
-            value={title}
-            rows={1}
-            onChange={event => onTitleChange(event.currentTarget.value)}
-            aria-label="Dossier title"
-          />
-        ) : (
-          <Title>{cleanDisplayText(title)}</Title>
-        )}
-        <Question>{cleanDisplayText(question)}</Question>
-        {updatedLabel ? (
-          <UpdatedStamp>Updated {updatedLabel}</UpdatedStamp>
-        ) : null}
-      </Header>
-
-      {mode !== 'audit' ? (
-        <Narrative aria-label="Dossier narrative">
-          <Kicker>Dossier</Kicker>
-          <Lead>
-            {cleanDisplayText(answer)}
-            {leadEvidence ? (
-              <EvidenceCitation
-                finding={leadEvidence}
-                open={openEvidenceId === leadEvidence.id}
-                onOpen={() => setOpenEvidenceId(leadEvidence.id)}
-                onToggle={() => toggleEvidence(leadEvidence.id)}
-              />
-            ) : 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
-            return (
-              <NarrativeText key={`${index}-${item}`}>
-                {cleanDisplayText(item)}
-                {relatedFinding ? (
-                  <EvidenceCitation
-                    finding={relatedFinding}
-                    open={openEvidenceId === relatedFinding.id}
-                    onOpen={() => setOpenEvidenceId(relatedFinding.id)}
-                    onToggle={() => toggleEvidence(relatedFinding.id)}
-                  />
-                ) : null}
-                {paragraphEvidence ? (
-                  <EvidenceDrawer>
-                    <EvidenceCards sources={paragraphEvidence.evidence} />
-                  </EvidenceDrawer>
-                ) : null}
-              </NarrativeText>
-            )
-          })}
-        </Narrative>
-      ) : null}
-
-      {mode === 'audit' ? (
-        <AuditList aria-label="Source audit">
-          <Kicker>Source trace</Kicker>
-          <AuditIntro>
-            Each claim is shown only to explain what the sources support. Use
-            this view to verify provenance, links, quotes, and weak spots.
-          </AuditIntro>
-          {safeFindings.map(finding => (
-            <AuditFinding key={finding.id}>
-              <FindingTitle>{cleanDisplayText(finding.title)}</FindingTitle>
-              <Claim>{cleanDisplayText(finding.claim)}</Claim>
-              <EvidenceCards sources={finding.evidence} />
-            </AuditFinding>
-          ))}
-        </AuditList>
-      ) : (
-        <Findings aria-label="Evidence-backed positions">
-          <Kicker>{mode === 'read' ? 'Argument' : 'Claim review'}</Kicker>
-          {safeFindings.map((finding, index) => (
-            <Finding key={finding.id}>
-              <FindingNumber>
-                {String(index + 1).padStart(2, '0')}
-              </FindingNumber>
-              <FindingBody>
-                <FindingHeader>
-                  <FindingTitleGroup>
-                    <FindingTitle>
-                      {cleanDisplayText(finding.title)}
-                    </FindingTitle>
-                    {onDeleteFinding ? (
-                      <DeleteAction
-                        type="button"
-                        onClick={() => onDeleteFinding(finding.id)}
-                        aria-label={`Delete ${finding.title}`}
-                      >
-                        Delete
-                      </DeleteAction>
-                    ) : null}
-                  </FindingTitleGroup>
-                  {mode === 'review' ? (
-                    <Confidence $strength={finding.confidence}>
-                      {strengthLabels[finding.confidence]}
-                    </Confidence>
-                  ) : null}
-                </FindingHeader>
-                <Claim>
-                  <ClaimLine>{cleanDisplayText(finding.claim)}</ClaimLine>
-                  <EvidenceCitation
-                    finding={finding}
-                    open={openEvidenceId === finding.id}
-                    onOpen={() => setOpenEvidenceId(finding.id)}
-                    onToggle={() => toggleEvidence(finding.id)}
-                  />
-                </Claim>
-                {finding.annotation ? (
-                  <Annotation>
-                    {cleanDisplayText(finding.annotation)}
-                  </Annotation>
-                ) : 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>
-
-      {footer ? <Footer>{footer}</Footer> : null}
-    </Dossier>
-  )
-}
+import { useState, type ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export type EvidenceStrength = 'strong' | 'working' | 'weak'
+
+export interface EvidenceSource {
+  id: string
+  label: string
+  title: string
+  url?: string
+  note: string
+  quote?: string
+  strength?: EvidenceStrength
+}
+
+export interface EvidenceFinding {
+  id: string
+  title: string
+  claim: string
+  confidence: EvidenceStrength
+  annotation?: string
+  evidence: EvidenceSource[]
+}
+
+export interface EvidenceDossierProps {
+  title: string
+  question: string
+  answer: string
+  updatedAt?: string
+  narrative?: string[]
+  findings: EvidenceFinding[]
+  uncertainties: string[]
+  nextSteps: string[]
+  onTitleChange?: (title: string) => void
+  onDeleteFinding?: (findingId: string) => void
+  footer?: ReactNode
+  className?: string
+}
+
+const strengthLabels: Record<EvidenceStrength, string> = {
+  strong: 'well supported',
+  working: 'working view',
+  weak: 'needs support',
+}
+
+type DossierRenderMode = 'read' | 'review' | 'audit'
+
+const modeLabels: Record<DossierRenderMode, string> = {
+  read: 'Read',
+  review: 'Claims',
+  audit: 'Sources',
+}
+
+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.',
+}
+
+function cleanDisplayText(value: unknown): string {
+  return String(value ?? '')
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/__([^_]+)__/g, '$1')
+    .replace(/_([^_]+)_/g, '$1')
+    .replace(/\s*\[(?:\d+(?:,\s*)?)+\]/g, '')
+    .replace(/\s*\[\d+\](?=\[\d+\])/g, '')
+    .replace(/\[(\d+)\]/g, '')
+    .replace(/\s+([,.;:])/g, '$1')
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+}
+
+function sourceUrlWithTextFragment(source: EvidenceSource): string | undefined {
+  if (!source.url) return undefined
+  const quote = cleanDisplayText(source.quote ?? '')
+  if (!quote) return source.url
+  const fragment = quote.slice(0, 140).trim()
+  if (!fragment) return source.url
+  const baseUrl = source.url.split('#')[0]
+  return `${baseUrl}#:~:text=${encodeURIComponent(fragment)}`
+}
+
+function formatUpdatedAt(value?: string): string | null {
+  if (!value) return null
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(date)
+}
+
+function normalizeEvidenceSource(
+  source: unknown,
+  index: number,
+): EvidenceSource {
+  const value =
+    source && typeof source === 'object'
+      ? (source as Partial<EvidenceSource>)
+      : {}
+  return {
+    id: cleanDisplayText(value.id) || `source-${index}`,
+    label: cleanDisplayText(value.label) || 'Evidence',
+    title: cleanDisplayText(value.title) || 'Untitled source',
+    url: cleanDisplayText(value.url) || undefined,
+    note: cleanDisplayText(value.note),
+    quote: cleanDisplayText(value.quote) || undefined,
+    strength:
+      value.strength === 'strong' ||
+      value.strength === 'working' ||
+      value.strength === 'weak'
+        ? value.strength
+        : 'working',
+  }
+}
+
+function normalizeEvidenceFinding(
+  finding: unknown,
+  index: number,
+): EvidenceFinding | null {
+  if (!finding || typeof finding !== 'object') return null
+  const value = finding as Partial<EvidenceFinding>
+  const title = cleanDisplayText(value.title)
+  const claim = cleanDisplayText(value.claim)
+  if (!title && !claim) return null
+  const evidence = Array.isArray(value.evidence)
+    ? value.evidence.map(normalizeEvidenceSource)
+    : []
+  return {
+    id: cleanDisplayText(value.id) || `finding-${index}`,
+    title: title || `Finding ${index + 1}`,
+    claim,
+    confidence:
+      value.confidence === 'strong' ||
+      value.confidence === 'working' ||
+      value.confidence === 'weak'
+        ? value.confidence
+        : evidence.length
+        ? 'working'
+        : 'weak',
+    annotation: cleanDisplayText(value.annotation) || undefined,
+    evidence,
+  }
+}
+
+function isEvidenceFinding(
+  finding: EvidenceFinding | null,
+): finding is EvidenceFinding {
+  return finding !== null
+}
+
+//#region styled-components
+
+const Dossier = styled.article`
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+  position: relative;
+  color: var(--platform-colors-text, #2e3338);
+`
+
+const Header = styled.header`
+  display: grid;
+  gap: 16px;
+  padding-bottom: 22px;
+  border-bottom: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 12%));
+`
+
+const ModeDock = styled.div`
+  display: grid;
+  position: sticky;
+  top: 12px;
+  z-index: 3;
+  justify-self: end;
+  gap: 5px;
+
+  @media (max-width: 760px) {
+    justify-self: start;
+  }
+`
+
+const ModeSwitch = styled.div`
+  display: inline-flex;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 10%));
+  border-radius: 999px;
+  background: var(--platform-colors-surface, rgb(255 254 250 / 86%));
+  box-shadow: var(--platform-shadows-sm, 0 10px 30px rgb(46 51 56 / 8%));
+  backdrop-filter: blur(10px);
+`
+
+const ModeDescription = styled.div`
+  max-width: 260px;
+  justify-self: end;
+  color: var(--platform-colors-text-secondary, #8f98a4);
+  font-size: 11px;
+  line-height: 1.25;
+  text-align: right;
+
+  @media (max-width: 760px) {
+    justify-self: start;
+    text-align: left;
+  }
+`
+
+const ModeButton = styled.button<{ $active: boolean }>`
+  min-height: 26px;
+  border: 0;
+  border-radius: 999px;
+  background: ${({ $active }) =>
+    $active ? 'var(--platform-colors-surface-hover)' : 'transparent'};
+  padding: 0 10px;
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text, #2e3338)'
+      : 'var(--platform-colors-text-secondary, #8f98a4)'};
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+  cursor: pointer;
+`
+
+const Kicker = styled.div`
+  color: var(--platform-colors-text-secondary, #9aa2ad);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  line-height: 1.3;
+  text-transform: uppercase;
+`
+
+const Title = styled.h1`
+  max-width: 22ch;
+  margin: 0;
+  color: var(--platform-colors-text, #20242a);
+  font-size: clamp(34px, 4.2vw, 54px);
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1.05;
+  overflow-wrap: anywhere;
+`
+
+const TitleInput = styled.textarea`
+  display: block;
+  width: 100%;
+  max-width: 22ch;
+  min-height: 1.1em;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: var(--platform-colors-text, #20242a);
+  font: inherit;
+  font-size: clamp(34px, 4.2vw, 54px);
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1.05;
+  outline: none;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  resize: none;
+  field-sizing: content;
+
+  &:focus {
+    box-shadow: inset 0 -2px 0 rgb(46 51 56 / 18%);
+  }
+`
+
+const Question = styled.div`
+  max-width: 72ch;
+  color: var(--platform-colors-text-secondary, #68717c);
+  font-size: 14px;
+  line-height: 1.55;
+`
+
+const UpdatedStamp = styled.div`
+  color: var(--platform-colors-text-secondary, #9aa2ad);
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.05em;
+  line-height: 1.3;
+  text-transform: uppercase;
+`
+
+const Narrative = styled.section`
+  display: grid;
+  gap: 18px;
+  max-width: 78ch;
+  padding: 2px 0 8px;
+`
+
+const Lead = styled.div`
+  margin: 0;
+  color: var(--platform-colors-text, #2e3338);
+  font-size: clamp(18px, 1.6vw, 22px);
+  line-height: 1.58;
+`
+
+const NarrativeText = styled.div`
+  margin: 0;
+  color: var(--platform-colors-text, #3a4047);
+  font-size: 14.5px;
+  line-height: 1.72;
+`
+
+const Findings = styled.section`
+  display: grid;
+  gap: 10px;
+`
+
+const Finding = styled.article`
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 18px;
+  padding: 18px 0 20px;
+  border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
+`
+
+const FindingNumber = styled.div`
+  color: var(--platform-colors-text-secondary, #9aa2ad);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+`
+
+const FindingBody = styled.div`
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+`
+
+const FindingHeader = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 18px;
+
+  @media (max-width: 760px) {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+`
+
+const FindingTitleGroup = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 0;
+  max-width: 100%;
+`
+
+const FindingTitle = styled.h2`
+  margin: 0;
+  color: var(--platform-colors-text, #20242a);
+  font-size: clamp(17px, 1.5vw, 21px);
+  font-weight: 750;
+  letter-spacing: 0;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+`
+
+const DeleteAction = styled.button`
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--platform-colors-text-secondary, #9aa2ad);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 120ms ease, color 120ms ease;
+
+  ${Finding}:hover &,
+  &:focus-visible {
+    opacity: 0.7;
+  }
+
+  &:hover {
+    color: #8a5f49;
+    opacity: 1;
+  }
+`
+
+const Confidence = styled.span<{ $strength: EvidenceStrength }>`
+  flex: 0 0 auto;
+  color: ${({ $strength }) =>
+    $strength === 'strong'
+      ? '#3d6b4a'
+      : $strength === 'weak'
+      ? '#9a694f'
+      : 'var(--platform-colors-text-secondary, #68717c)'};
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+`
+
+const Claim = styled.p`
+  max-width: 76ch;
+  margin: 0;
+  color: var(--platform-colors-text, #2e3338);
+  font-size: 14.5px;
+  line-height: 1.72;
+`
+
+const ClaimLine = styled.div`
+  display: inline;
+`
+
+const Annotation = styled.aside`
+  max-width: 72ch;
+  border-left: 3px solid rgb(82 90 101 / 36%);
+  padding: 4px 0 4px 14px;
+  color: var(--platform-colors-text-secondary, #68717c);
+  font-size: 13px;
+  line-height: 1.55;
+`
+
+const EvidenceHandle = styled.button<{ $strength: EvidenceStrength }>`
+  display: inline;
+  align-items: center;
+  min-height: 0;
+  margin-left: 6px;
+  transform: translateY(-1px);
+  border: 0;
+  border-bottom: 1px solid
+    ${({ $strength }) =>
+      $strength === 'strong'
+        ? 'rgb(61 107 74 / 38%)'
+        : $strength === 'weak'
+        ? 'rgb(154 105 79 / 42%)'
+        : 'var(--platform-colors-border-strong, rgb(46 51 56 / 26%))'};
+  border-radius: 0;
+  background: transparent;
+  padding: 0 1px;
+  color: ${({ $strength }) =>
+    $strength === 'strong'
+      ? '#3d6b4a'
+      : $strength === 'weak'
+      ? '#9a694f'
+      : 'var(--platform-colors-text-secondary, #68717c)'};
+  font: inherit;
+  font-size: 0.78em;
+  font-weight: 750;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  vertical-align: baseline;
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    border-bottom-color: currentColor;
+  }
+`
+
+const EvidenceDrawer = styled.aside`
+  display: grid;
+  gap: 10px;
+  max-width: 64ch;
+  margin-top: 4px;
+  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;
+  margin-top: 2px;
+`
+
+const AuditList = styled.section`
+  display: grid;
+  gap: 14px;
+  border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
+  padding-top: 18px;
+`
+
+const AuditIntro = styled.div`
+  max-width: 70ch;
+  color: var(--platform-colors-text-secondary, #68717c);
+  font-size: 13px;
+  line-height: 1.55;
+`
+
+const AuditFinding = styled.div`
+  display: grid;
+  gap: 9px;
+`
+
+const EvidenceCard = styled.div`
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 10%));
+  border-radius: 8px;
+  background: var(--platform-colors-surface, rgb(255 255 255 / 56%));
+  padding: 12px 13px;
+`
+
+const EvidenceTop = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+`
+
+const EvidenceLabel = styled.span`
+  color: var(--platform-colors-text-secondary, #8f98a4);
+  font-size: 10px;
+  font-weight: 850;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+`
+
+const EvidenceTitle = styled.a`
+  min-width: 0;
+  overflow: hidden;
+  color: var(--platform-colors-text, #2e3338);
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.3;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: var(
+      --platform-colors-border-strong,
+      rgb(46 51 56 / 28%)
+    );
+  }
+`
+
+const EvidenceNote = styled.div`
+  color: var(--platform-colors-text-secondary, #68717c);
+  font-size: 13px;
+  line-height: 1.45;
+`
+
+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-size: 12.5px;
+  line-height: 1.45;
+`
+
+const BottomGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+
+  @media (max-width: 760px) {
+    grid-template-columns: 1fr;
+  }
+`
+
+const QuietList = styled.section`
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  border-top: 1px solid var(--platform-colors-divider, rgb(46 51 56 / 10%));
+  padding-top: 16px;
+`
+
+const QuietListItems = styled.div`
+  display: grid;
+  gap: 9px;
+`
+
+const QuietListItem = styled.div`
+  color: var(--platform-colors-text-secondary, #68717c);
+  font-size: 14px;
+  line-height: 1.55;
+`
+
+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-size: 12px;
+  line-height: 1.5;
+`
+
+//#endregion
+
+function SourceTitle({
+  source,
+}: {
+  source: EvidenceSource
+}): React.ReactElement {
+  const content = cleanDisplayText(source.title)
+  const href = sourceUrlWithTextFragment(source)
+  if (href) {
+    return (
+      <EvidenceTitle href={href} target="_blank" rel="noreferrer">
+        {content}
+      </EvidenceTitle>
+    )
+  }
+  return <EvidenceTitle as="span">{content}</EvidenceTitle>
+}
+
+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}`
+}
+
+function evidenceHandleTitle(finding: EvidenceFinding): string {
+  const strongest = finding?.evidence?.[0]
+  if (!strongest) return 'Show evidence'
+  return `Show evidence: ${cleanDisplayText(strongest.title)}`
+}
+
+function EvidenceCitation({
+  finding,
+  open,
+  onOpen,
+  onToggle,
+}: {
+  finding: EvidenceFinding
+  open: boolean
+  onOpen: () => void
+  onToggle: () => void
+}): React.ReactElement | null {
+  if (!finding?.evidence?.length) return null
+  return (
+    <EvidenceHandle
+      type="button"
+      $strength={finding.confidence}
+      onMouseEnter={onOpen}
+      onFocus={onOpen}
+      onClick={onToggle}
+      aria-expanded={open}
+      title={evidenceHandleTitle(finding)}
+    >
+      {evidenceHandleLabel(finding)}
+    </EvidenceHandle>
+  )
+}
+
+function EvidenceCards({
+  sources,
+}: {
+  sources: EvidenceSource[]
+}): React.ReactElement {
+  return (
+    <EvidenceGrid>
+      {sources.map(source => {
+        const showQuote = Boolean(
+          source.quote && source.label !== 'Web evidence',
+        )
+        return (
+          <EvidenceCard key={source.id}>
+            <EvidenceTop>
+              <EvidenceLabel>{source.label}</EvidenceLabel>
+              <Confidence $strength={source.strength ?? 'working'}>
+                {strengthLabels[source.strength ?? 'working']}
+              </Confidence>
+            </EvidenceTop>
+            <SourceTitle source={source} />
+            <EvidenceNote>{cleanDisplayText(source.note)}</EvidenceNote>
+            {showQuote ? (
+              <Quote>{cleanDisplayText(source.quote ?? '')}</Quote>
+            ) : null}
+          </EvidenceCard>
+        )
+      })}
+    </EvidenceGrid>
+  )
+}
+
+export function EvidenceDossier({
+  title,
+  question,
+  answer,
+  updatedAt,
+  narrative,
+  findings,
+  uncertainties,
+  nextSteps,
+  onTitleChange,
+  onDeleteFinding,
+  footer,
+  className,
+}: EvidenceDossierProps): React.ReactElement {
+  const [mode, setMode] = useState<DossierRenderMode>('read')
+  const [openEvidenceId, setOpenEvidenceId] = useState<string | null>(null)
+  const updatedLabel = formatUpdatedAt(updatedAt)
+  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 =
+    openEvidenceId && mode === 'read'
+      ? safeFindings.find(finding => finding.id === openEvidenceId)
+      : null
+  const toggleEvidence = (findingId: string): void => {
+    setOpenEvidenceId(current => (current === findingId ? null : findingId))
+  }
+  const leadEvidence = safeFindings[0]
+  const narrativeEvidence = (index: number): EvidenceFinding | undefined =>
+    safeFindings[index + 1] ?? safeFindings[index] ?? safeFindings[0]
+
+  return (
+    <Dossier className={className}>
+      <ModeDock>
+        <ModeSwitch aria-label="Dossier reading density">
+          {(['read', 'review', 'audit'] as DossierRenderMode[]).map(item => (
+            <ModeButton
+              key={item}
+              type="button"
+              $active={mode === item}
+              title={modeDescriptions[item]}
+              onClick={() => {
+                setMode(item)
+                setOpenEvidenceId(null)
+              }}
+            >
+              {modeLabels[item]}
+            </ModeButton>
+          ))}
+        </ModeSwitch>
+        <ModeDescription>{modeDescriptions[mode]}</ModeDescription>
+      </ModeDock>
+      <Header>
+        <Kicker>Living dossier</Kicker>
+        {onTitleChange ? (
+          <TitleInput
+            value={title}
+            rows={1}
+            onChange={event => onTitleChange(event.currentTarget.value)}
+            aria-label="Dossier title"
+          />
+        ) : (
+          <Title>{cleanDisplayText(title)}</Title>
+        )}
+        <Question>{cleanDisplayText(question)}</Question>
+        {updatedLabel ? (
+          <UpdatedStamp>Updated {updatedLabel}</UpdatedStamp>
+        ) : null}
+      </Header>
+
+      {mode !== 'audit' ? (
+        <Narrative aria-label="Dossier narrative">
+          <Kicker>Dossier</Kicker>
+          <Lead>
+            {cleanDisplayText(answer)}
+            {leadEvidence ? (
+              <EvidenceCitation
+                finding={leadEvidence}
+                open={openEvidenceId === leadEvidence.id}
+                onOpen={() => setOpenEvidenceId(leadEvidence.id)}
+                onToggle={() => toggleEvidence(leadEvidence.id)}
+              />
+            ) : 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
+            return (
+              <NarrativeText key={`${index}-${item}`}>
+                {cleanDisplayText(item)}
+                {relatedFinding ? (
+                  <EvidenceCitation
+                    finding={relatedFinding}
+                    open={openEvidenceId === relatedFinding.id}
+                    onOpen={() => setOpenEvidenceId(relatedFinding.id)}
+                    onToggle={() => toggleEvidence(relatedFinding.id)}
+                  />
+                ) : null}
+                {paragraphEvidence ? (
+                  <EvidenceDrawer>
+                    <EvidenceCards sources={paragraphEvidence.evidence} />
+                  </EvidenceDrawer>
+                ) : null}
+              </NarrativeText>
+            )
+          })}
+        </Narrative>
+      ) : null}
+
+      {mode === 'audit' ? (
+        <AuditList aria-label="Source audit">
+          <Kicker>Source trace</Kicker>
+          <AuditIntro>
+            Each claim is shown only to explain what the sources support. Use
+            this view to verify provenance, links, quotes, and weak spots.
+          </AuditIntro>
+          {safeFindings.map(finding => (
+            <AuditFinding key={finding.id}>
+              <FindingTitle>{cleanDisplayText(finding.title)}</FindingTitle>
+              <Claim>{cleanDisplayText(finding.claim)}</Claim>
+              <EvidenceCards sources={finding.evidence} />
+            </AuditFinding>
+          ))}
+        </AuditList>
+      ) : (
+        <Findings aria-label="Evidence-backed positions">
+          <Kicker>{mode === 'read' ? 'Argument' : 'Claim review'}</Kicker>
+          {safeFindings.map((finding, index) => (
+            <Finding key={finding.id}>
+              <FindingNumber>
+                {String(index + 1).padStart(2, '0')}
+              </FindingNumber>
+              <FindingBody>
+                <FindingHeader>
+                  <FindingTitleGroup>
+                    <FindingTitle>
+                      {cleanDisplayText(finding.title)}
+                    </FindingTitle>
+                    {onDeleteFinding ? (
+                      <DeleteAction
+                        type="button"
+                        onClick={() => onDeleteFinding(finding.id)}
+                        aria-label={`Delete ${finding.title}`}
+                      >
+                        Delete
+                      </DeleteAction>
+                    ) : null}
+                  </FindingTitleGroup>
+                  {mode === 'review' ? (
+                    <Confidence $strength={finding.confidence}>
+                      {strengthLabels[finding.confidence]}
+                    </Confidence>
+                  ) : null}
+                </FindingHeader>
+                <Claim>
+                  <ClaimLine>{cleanDisplayText(finding.claim)}</ClaimLine>
+                  <EvidenceCitation
+                    finding={finding}
+                    open={openEvidenceId === finding.id}
+                    onOpen={() => setOpenEvidenceId(finding.id)}
+                    onToggle={() => toggleEvidence(finding.id)}
+                  />
+                </Claim>
+                {finding.annotation ? (
+                  <Annotation>
+                    {cleanDisplayText(finding.annotation)}
+                  </Annotation>
+                ) : 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>
+
+      {footer ? <Footer>{footer}</Footer> : null}
+    </Dossier>
+  )
+}