// =========================================================
// DOCUMENTS WORKSPACE V2 — Phase 17
// -----------------------------------------------------------------
// Depth cap: Project → Documents → Document Detail.
// Three peer views: Overview / Library / Collections.
//
// Reads exclusively from pdata.documents[] (canonical) + a lightweight
// pdata.collections[] (which stores IDs, never copies). Every canonical
// item continues to carry Phase-12 `links: {stage, mission, feature, ...}`.
// Documents remain the source of truth: Research / Design / Development
// / Commercial reference the SAME document IDs.
// =========================================================
const DX_STATE = {
'draft': { tone: 'gray', label: 'Draft' },
'in-review': { tone: 'blue', label: 'In review' },
'approved': { tone: 'green', label: 'Approved' },
'final': { tone: 'green', label: 'Final' },
'superseded': { tone: 'gray', label: 'Superseded' },
};
// Type badges — deliberately monochrome. Type is visual variety in the
// preview, not a color. Every badge is neutral gray with a short mono
// code, in the tradition of the Development workspace's category badges.
const DX_KIND = {
spec: { short: 'SPEC', label: 'Specification' },
brief: { short: 'BRF', label: 'Brief' },
doc: { short: 'DOC', label: 'Document' },
design: { short: 'DES', label: 'Design export' },
data: { short: 'DATA', label: 'Data' },
notes: { short: 'NOTE', label: 'Notes' },
contract: { short: 'CTR', label: 'Contract' },
invoice: { short: 'INV', label: 'Invoice' },
transcript: { short: 'TRSC', label: 'Transcript' },
image: { short: 'IMG', label: 'Image' },
link: { short: 'LINK', label: 'Web link' },
slide: { short: 'DECK', label: 'Deck' },
};
function dxKindMeta(kindKey) { return DX_KIND[kindKey] || { short: 'DOC', label: 'Document' }; }
function dxStateChip(state, size = 'sm') {
const s = DX_STATE[state];
if (!s) return null;
return ;
}
function dxPortrait(name, pdata) {
return (pdata.people || {})[(name || '').toLowerCase()]?.portrait || null;
}
function dxDocById(pdata, id) {
return (pdata.documents || []).find(d => d.id === id);
}
// -----------------------------------------------------------------
// REALISTIC DOCUMENT PREVIEWS
// Each preview is a small production-oriented SVG. Deliberate variety
// per file type — never gray rectangles.
// -----------------------------------------------------------------
function DXPreview({ doc, size = 'md' }) {
const kindKey = doc?.kindKey || 'doc';
const W = 320, H = 200;
const common = { viewBox: `0 0 ${W} ${H}`, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice' };
// --- SPEC — paper cover with structured sections + margin note ---
if (kindKey === 'spec') {
return (
);
}
// --- CONTRACT — paper cover with signature lines ---
if (kindKey === 'contract') {
return (
);
}
// --- INVOICE — line items + total ---
if (kindKey === 'invoice') {
return (
);
}
// --- DATA — spreadsheet + micro chart ---
if (kindKey === 'data') {
return (
);
}
// --- DIAGRAM — layered nodes ---
if (kindKey === 'diagram') {
return (
);
}
// --- DESIGN — 3 mini frames ---
if (kindKey === 'design') {
return (
);
}
// --- TRANSCRIPT — participant column + text ---
if (kindKey === 'transcript') {
return (
);
}
// --- IMAGE — soft landscape composition ---
if (kindKey === 'image') {
return (
);
}
// --- LINK — link-preview card ---
if (kindKey === 'link') {
return (
);
}
// --- NOTES — hand-written-looking bullets ---
if (kindKey === 'notes') {
return (
);
}
// --- DEFAULT DOC (fallback) ---
return (
);
}
// -----------------------------------------------------------------
// Detailed spec preview — used ONLY on Document Detail for `doc-1`.
// Larger, cleaner, with real section headings + margin annotations.
// -----------------------------------------------------------------
function DXSpecPreview({ doc, details }) {
const sections = details?.sections || [];
const annotations = details?.annotations || [];
return (
Product specification · v3
{doc.title.replace(' — Product specification', '')}
{doc.owner}
·
Sep 15, 2026
·
Feature · Smart Project Brief
{sections.map(s => {
const notes = annotations.filter(a => a.on === s.title);
return (
{String(s.n).padStart(2, '0')}
{notes.length > 0 && (
{notes.map((a, i) => (
))}
)}
);
})}
);
}
// -----------------------------------------------------------------
// Card + Row (used across Overview / Library / Collection Detail)
// -----------------------------------------------------------------
function DXCard({ doc, pdata, size = 'md' }) {
const kMeta = dxKindMeta(doc.kindKey);
return (
{kMeta.short}
{doc.sourceOfTruth && }
{doc.title}
{doc.owner}
{doc.updated}
{dxStateChip(doc.state)}
{doc.version && {doc.version}}
{doc.size}
{doc.links &&
}
);
}
function DXRow({ doc, pdata }) {
const kMeta = dxKindMeta(doc.kindKey);
return (
{doc.sourceOfTruth && }
{doc.title}
{kMeta.short}
{doc.owner}
·
{doc.updated}
·
{doc.size}
{doc.version && <>
·
{doc.version}
}
{doc.links &&
}
{dxStateChip(doc.state)}
);
}
// =========================================================
// OVERVIEW
// =========================================================
function DXOverview({ pdata, onNavigate }) {
const docs = pdata.documents || [];
const currentStage = pdata.stages.find(s => s.n === pdata.currentStage);
const stageDocs = docs.filter(d => d.links?.stage === pdata.currentStage);
const needsReview = docs.filter(d => d.state === 'in-review').slice(0, 4);
const recentOrder = ['2h ago','4h ago','1d ago','2d ago','3d ago','4d ago','5d ago','6d ago','1w ago','2w ago','5w ago'];
const recent = [...docs].sort((a, b) => recentOrder.indexOf(a.updated) - recentOrder.indexOf(b.updated)).slice(0, 5);
const sot = docs.filter(d => d.sourceOfTruth);
const collections = pdata.collections || [];
return (
{/* --- Current-stage documents ------------------------------ */}
Current stage
S{String(pdata.currentStage).padStart(2, '0')}
{currentStage?.name}
{stageDocs.length}
document{stageDocs.length === 1 ? '' : 's'} connected to this stage
View Stage
{stageDocs.length > 0 && (
{stageDocs.slice(0, 3).map(d => )}
)}
{/* --- Two-column: Needs review + Recently updated ---------- */}
{needsReview.length ? (
{needsReview.map(d => )}
) : (
Nothing waiting on review.
)}
{/* --- Source of truth ------------------------------------- */}
{sot.length > 0 && (
Source of truth
Canonical documents this project relies on
)}
{/* --- Featured collections -------------------------------- */}
{collections.length > 0 && (
{collections.slice(0, 4).map(c => )}
)}
);
}
// =========================================================
// LIBRARY
// =========================================================
function DXLibrary({ pdata }) {
const docs = pdata.documents || [];
const [q, setQ] = React.useState('');
const [kind, setKind] = React.useState('all');
const [stage, setStage] = React.useState('all');
const [feat, setFeat] = React.useState('all');
const [owner, setOwner] = React.useState('all');
const [state, setState] = React.useState('all');
const [view, setView] = React.useState('grid');
const kinds = Array.from(new Set(docs.map(d => d.kindKey).filter(Boolean)));
const stages = Array.from(new Set(docs.map(d => d.links?.stage).filter(Boolean))).sort();
const feats = Array.from(new Set(docs.map(d => d.links?.feature).filter(Boolean)));
const owners = Array.from(new Set(docs.map(d => d.owner).filter(Boolean)));
const states = Array.from(new Set(docs.map(d => d.state).filter(Boolean)));
const qq = q.trim().toLowerCase();
const filtered = docs.filter(d => {
if (kind !== 'all' && d.kindKey !== kind) return false;
if (stage !== 'all' && String(d.links?.stage) !== stage) return false;
if (feat !== 'all' && d.links?.feature !== feat) return false;
if (owner !== 'all' && d.owner !== owner) return false;
if (state !== 'all' && d.state !== state) return false;
if (qq) {
const hay = [d.title, d.owner, d.kind, d.kindKey, dxKindMeta(d.kindKey).label].join(' ').toLowerCase();
if (!hay.includes(qq)) return false;
}
return true;
});
const clearAll = () => { setKind('all'); setStage('all'); setFeat('all'); setOwner('all'); setState('all'); setQ(''); };
const any = q || kind !== 'all' || stage !== 'all' || feat !== 'all' || owner !== 'all' || state !== 'all';
return (
{/* Filter bar */}
setQ(e.target.value)}
/>
{any && }
{/* Result count */}
{filtered.length} of {docs.length} documents
{filtered.length ? (
view === 'grid'
?
{filtered.map(d => )}
:
{filtered.map(d => )}
) : (
No documents match those filters. .
)}
{mosaic.map((d, i) => (
))}
{mosaic.length < 4 && Array.from({ length: 4 - mosaic.length }).map((_, i) => (
))}
{col.title}
{col.purpose}
{docs.length} documents
{col.owner}
Updated {col.updated}
);
}
function DXCollections({ pdata }) {
const cols = pdata.collections || [];
return (
{cols.length ? (
{cols.map(c => )}
) : (
No collections yet.
)}
Back to Collections
Collection
{col.title}
{col.purpose}
{docs.length} documents
{col.owner}
Updated {col.updated}
{stages.map(s => {
const st = pdata.stages.find(x => x.n === s);
return (
S{String(s).padStart(2,'0')}
{st?.name}
);
})}
{features.slice(0, 2).map(fid => {
const f = pdata.features.find(x => x.id === fid);
if (!f) return null;
return (
{f.title}
);
})}
{docs.map(d => )}
);
}
// =========================================================
// DOCUMENT DETAIL
// =========================================================
function DXDocumentDetail({ pdata, docId }) {
const doc = dxDocById(pdata, docId);
if (!doc) {
return (
);
}
const details = pdata.documentDetails?.[doc.id] || {};
const history = details.history || [{ v: doc.version || 'v1', date: doc.updatedAt || doc.updated, by: doc.owner, note: '' }];
const reviewers = details.reviewers || [];
const activity = details.activity || [
{ by: doc.owner, verb: `updated to ${doc.version || 'v1'}`, when: doc.updated },
];
const stage = doc.links?.stage ? pdata.stages.find(s => s.n === doc.links.stage) : null;
const feature = doc.links?.feature ? pdata.features.find(f => f.id === doc.links.feature) : null;
const missionMeta = doc.links?.mission ? window.MYGENI_MISSIONS[doc.links.mission] : null;
const kMeta = dxKindMeta(doc.kindKey);
const isSpec = doc.kindKey === 'spec';
return (
Back to Library
{/* --- Compact header --------------------------------------- */}
Document · {kMeta.label}
·
{doc.id.toUpperCase()}
{doc.sourceOfTruth && (
<>
·
SOURCE OF TRUTH
)}
{doc.title}
{details.summary &&
{details.summary}
}
{/* --- Preview + Rail --------------------------------------- */}
{kMeta.short}
·
{doc.size}
·
{doc.version}
{/* Rail */}
{/* Reviewers */}
{reviewers.length > 0 && (
Review
{dxStateChip(doc.state)}
{reviewers.map((r, i) => (
{r.name}
{r.role} · {r.when}
))}
)}
{/* Version history */}
{history.length > 0 && (
Version history
{history.map((h, i) => (
{i < history.length - 1 && }
{h.v}
{i === 0 && Current}
·
{h.date}
{h.note &&
{h.note}
}
))}
)}
{/* Related canonical */}
{/* Activity */}
{activity.length > 0 && (
Activity
{activity.map((a, i) => (
))}
)}
);
}
// =========================================================
// ROUTER SHELL
// -----------------------------------------------------------------
// Sub-route shape:
// /documents → Overview
// /documents/library → Library
// /documents/collections → Collections list
// /documents/collection/:id → Collection Detail
// /documents/doc/:id → Document Detail
// =========================================================
function DocumentsWorkspaceV2({ pdata, subId, sub2 }) {
const isDocDetail = subId === 'doc';
const isColDetail = subId === 'collection';
const isDetail = isDocDetail || isColDetail;
const view = isDetail
? (isDocDetail ? 'doc' : 'collection')
: (subId === 'library' ? 'library' : (subId === 'collections' ? 'collections' : 'overview'));
const setView = (v) => {
location.hash = v === 'overview'
? `#/projects/${pdata.id}/documents`
: `#/projects/${pdata.id}/documents/${v}`;
};
return (
{!isDetail && (
{[
{ k: 'overview', label: 'Overview' },
{ k: 'library', label: 'Library' },
{ k: 'collections', label: 'Collections' },
].map(t => (
))}
One place. Everything canonical. No folders.
)}
{view === 'overview' &&
}
{view === 'library' &&
}
{view === 'collections' &&
}
{view === 'collection' &&
}
{view === 'doc' &&
}