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

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

@@ -0,0 +1,894 @@
+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>
+  )
+}