{isSource ? 'Source' : 'Atom'} · {isSource ? KIND_LABEL[s.kind] : s.title.slice(0,18)+'…'}
{onClose && (
)}
{!isSource && a && (
<>
{a.label || `Atom ${a.id}`}
{a.rag}
· {AXES.find(x => x.key === a.axis)?.label || a.axis}
· conf {Math.round(a.conf * 100)}%
"{a.excerpt}"
)}
{isSource && (
<>
{s.title}
{KIND_LABEL[s.kind]}
· {s.origin}
· {s.date}
{s.pages && · {s.pages}pp}
· {s.atoms} atoms
"{s.excerpt}"
)}
{/* provenance footer */}
From {s.origin}
Ingested {s.date}
);
}
// ────────────────────────────────────────────────────────────
// Sources list (for left panel)
// ────────────────────────────────────────────────────────────
function SourcesList({ onSelect, selectedId, compact = false }) {
return (
{SOURCES.map(s => {
const selected = selectedId === `src:${s.id}`;
return (
);
})}
{items.map((a) => {
const src = SOURCE_BY_ID[a.src];
const selected = selectedId === a.id;
return (
);
})}
Notebook · 10 sources · 135 atoms
{c.name}{' '}
Digital
{/* view toggle */}
{[
{ id: 'sources', label: 'Sources' },
{ id: 'graph', label: 'Graph' },
{ id: 'list', label: 'List' },
].map(t => (
))}
{view === 'graph' && (
)}
{view === 'sources' && (
{ setSelected(id); }} selectedId={selected} compact />
)}
{view === 'list' && (
)}
{/* detail bottom sheet */}
{adding &&
setAdding(false)} compact />}
);
}
// ────────────────────────────────────────────────────────────
// Desktop Notebook screen
// ────────────────────────────────────────────────────────────
function DNotebook({ companyId, goPortfolio, goScore, goChat }) {
const c = COMPANIES.find(x => x.id === companyId);
const [selected, setSelected] = React.useState('a-flywheel');
const [view, setView] = React.useState('graph'); // graph or list
const [adding, setAdding] = React.useState(false);
return (
{/* Left — Sources */}
{/* Center — Graph or List */}
{c.sector} · {c.stage}
{c.name}{' '}
Digital
· Notebook
{[
{ id: 'graph', label: 'Graph' },
{ id: 'list', label: 'List' },
].map(t => (
))}
● {ATOMS.filter(a => a.rag==='green').length} green
● {ATOMS.filter(a => a.rag==='amber').length} amber
● {ATOMS.filter(a => a.rag==='red').length} red
Hover to focus · click to pin
{view === 'graph' && (
)}
{view === 'list' && (
)}
{/* Right — selected detail + provenance */}
{adding &&
setAdding(false)} />}