Ben Stull
adb5d25715
Roadmap item #32 (session/transcript page polish) plus the /docs surfaces' share of #31, for rfc-app v0.21.0. - DocsSessionIndex: the session root (/docs/sessions/:nnnn) no longer renders a dead-end "N transcript(s) — select from the nav" placeholder. It now renders a transcript INLINE: the lone transcript for single-transcript sessions, or the `.0` driver transcript (falling back to first-by-sort) for multi-transcript sessions, with the remaining siblings listed/linked above the body. URL stays stable to the session number — inline render, no 301. - DocsSessionTranscript: adds a compact metadata header above the body (title; started/ended parsed from the filename's ISO segments, human-readable; derived duration; optional TL;DR from the manifest's `tldr` string field, graceful-degrade when absent; external "View source on git.wiggleverse.org" link). The parse/header helpers are exported so the inline-collapse view reuses identical rendering. - Docs.css (new): token-based styling for the new metadata-header + sibling-list elements only; existing docs classes stay owned by App.css to avoid racing the #31 sweep. - DocsUserGuide: loading/error states brought onto the shared .docs-empty/.docs-error convention with a retry button. No backend change: /api/docs/sessions/manifest already passes the full sessions.json entry through, so a `tldr` field on an entry reaches the frontend with no docs_sessions.py change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
129 lines
3.7 KiB
CSS
129 lines
3.7 KiB
CSS
/* Docs.css — docs-surface polish scoped to v0.21.0 / roadmap item #32.
|
|
*
|
|
* This sheet owns ONLY the classes introduced by item #32 (the
|
|
* transcript metadata header and the session-root sibling list). The
|
|
* pre-existing docs classes (.docs-article, .docs-empty, .docs-error,
|
|
* .docs-source-link, .philosophy-body, .muted) live in App.css and are
|
|
* deliberately NOT touched here — redefining them would race the #31
|
|
* App.css token sweep for the same selectors. Every value below reads
|
|
* a token from tokens.css so the new surfaces sit on the same
|
|
* spacing/type/color scale as the rest of the docs chrome.
|
|
*
|
|
* Imported from DocsSessionTranscript.jsx + DocsSessionIndex.jsx (the
|
|
* two components that render these elements). CSS custom properties are
|
|
* not import-order-sensitive at use time, so the import site doesn't
|
|
* matter for correctness.
|
|
*/
|
|
|
|
/* ── Transcript metadata header ─────────────────────────────────────
|
|
* A compact card above the rendered transcript body: title, the
|
|
* started/ended/duration grid, an optional TL;DR, and the external
|
|
* "view source" link. */
|
|
.docs-transcript-meta {
|
|
margin: 0 0 var(--space-9);
|
|
padding: var(--space-7);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface-sunken);
|
|
}
|
|
|
|
.docs-transcript-meta-title {
|
|
margin: 0 0 var(--space-5);
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--leading-tight);
|
|
color: var(--color-text-strong);
|
|
font-family: var(--font-mono);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.docs-transcript-meta-grid {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: var(--space-2) var(--space-7);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.docs-transcript-meta-row {
|
|
display: contents;
|
|
}
|
|
|
|
.docs-transcript-meta-grid dt {
|
|
margin: 0;
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.docs-transcript-meta-grid dd {
|
|
margin: 0;
|
|
font-size: var(--text-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.docs-transcript-meta-tldr {
|
|
margin: var(--space-6) 0 0;
|
|
padding-top: var(--space-6);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-relaxed);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.docs-transcript-meta-source {
|
|
display: inline-block;
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
/* ── Session-root sibling-transcript list ───────────────────────────
|
|
* Rendered above the inlined primary transcript when a session has
|
|
* more than one transcript (driver `.0` + subagents). The primary is
|
|
* marked "(shown below)"; the rest link to their standalone routes. */
|
|
.docs-session-siblings {
|
|
margin: 0 0 var(--space-9);
|
|
padding: var(--space-6) var(--space-7);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface-muted);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: var(--space-3) var(--space-6);
|
|
}
|
|
|
|
.docs-session-siblings-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.docs-session-siblings-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2) var(--space-5);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.docs-session-siblings-list a {
|
|
color: var(--color-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.docs-session-siblings-list a:hover {
|
|
color: var(--color-accent-strong);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.docs-session-siblings-current {
|
|
color: var(--color-text-muted);
|
|
}
|