Legend swaps position with the route. Old order: header → route →
legend → banner. New order: header → legend → route → banner.
The legend now reads as a key the eye picks up before walking the
path, instead of an after-the-fact reveal of what the colours meant.
Spacing tuned to match the new rhythm:
header → legend: 28px (header.margin-bottom)
legend → route: 32px (legend.margin-bottom; was 28px top margin)
route → banner: 112px (banner.margin-top; was 64px)
The 112px before the dispatch banner gives the route room to land
visually before the editorial block at the foot starts. Mobile gets
72px instead of 112px since the page is more compressed there.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Order on the page:
1. Centred header — 48px serif 'Roadmap' h1, one merged subtitle that
combines the original page lead ('A live picture of the work…')
with both interaction hints (tap-or-hover, drag-or-scroll).
2. <RoadmapRoute> — full-bleed track + right-edge advance arrow.
3. Legend — centred in content column.
4. <LatestDispatchBanner> — moved from above the route to below the
legend. The dispatch becomes supplementary editorial that sits at
the foot of the page; the route is the primary surface and now
leads.
Banner spacing flipped: was margin-bottom 56px above the route, now
margin-top 64px below the legend.
The previous left-aligned 'What we are building.' top header and the
secondary centred 'Roadmap' route-intro block are both gone — merged
into one centred header at the top.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous pass replaced the top page header with a single centred
'Roadmap' block — that was wrong. The intent was: keep the original
left-aligned editorial lead at the very top of the page, and insert a
new smaller centred section between the dispatch banner and the route
that carries the interaction hints.
Top of page (restored):
Roadmap ← 11px tracked eyebrow
What we are building. ← 48px serif h1, left-aligned, max-width 540
A live picture of the work… ← 14px subtitle, no hover-hint copy
Between LatestDispatchBanner and RoadmapRoute (new):
Roadmap ← 22px serif title, centred
Tap or hover any milestone for the full story. Drag or scroll to move.
← 12px tracked muted hint, centred
The hover/tap hint moves out of the top subtitle and into the route-
intro block, where the drag/scroll hint joins it. Both interaction
modalities sit together right above the surface they describe — closer
to where the reader needs them.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the snap-based scroll-by-arrow model with one that handles
three input modalities feeding the same scroll state. Result: the
track glides continuously instead of clicking into milestones.
Stripped:
- scroll-snap-type: x mandatory on .rr-scroll
- scroll-behavior: smooth on .rr-scroll
- scroll-snap-align: center on .rr-dot
- The fades-only updateNav stub from commit 2
Added on .rr-scroll:
- cursor: grab → grabbing on .rr-dragging
- touch-action: pan-y so vertical page-scroll passes through on mobile
while horizontal drags activate the route's own drag handler
- user-select: none stops text selection mid-drag
- .rr-dragging .rr-card { pointer-events: none } so a hover-reveal
can't pop open while the track is being dragged
Script (vanilla, ~140 lines):
- animateScrollTo(target, durationMs): cubic-ease-out via RAF.
Cancels any existing momentum or animation before starting.
- Wheel handler: vertical deltaY translates to horizontal scrollLeft
when |deltaX| < |deltaY|; horizontal trackpad gestures pass through
1:1 unscaled. preventDefault on this scroll element only — vertical
wheel elsewhere on the page scrolls the page as normal.
- Pointer-drag: pointerdown captures the start position + scrollLeft;
pointermove updates scrollLeft and tracks velocity in px/ms over
the most recent sample. setPointerCapture for cross-element drag.
- Momentum on release: signed velocity × 16ms decays at 0.93 per
frame, stops below 0.4 px/frame. Direction inverted because
dragging right moves scrollLeft left.
- Click vs drag discrimination at 5px total movement: under 5px,
the synthetic click passes through (card navigates); over 5px,
a capturing-phase click suppressor on the scroll element eats
the next click so a drag-then-release-over-a-card doesn't
accidentally navigate.
- Advance arrow click now runs animateScrollTo(scrollLeft + 60% of
viewport, 480ms) instead of the placeholder native scrollBy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the prev/next button pair removed last commit with a single
viewport-anchored circular control.
- 48px diameter, 1px terracotta border, terracotta chevron on cream.
- Hover / focus-visible fills to terracotta with cream chevron and a
1.06× scale-up.
- Anchored absolute inside .rr-wrap (already position: relative):
right: 32px / top: 50% / translateY(-50%).
- Toggles .rr-at-end (opacity 0.25, pointer-events: none) when the
scroll container reaches its right edge.
- First-load hint: .rr-hint class added 100ms after mount fires a
rr-advance-pulse keyframe three times (iteration-count: 3) — soft
8px shadow ring in 15% terracotta pulses out and back. Animation
stops naturally; no JS cleanup needed.
No left arrow on purpose — the path reads past → future, and the
user's instinct at any milestone is 'what's next?' The right arrow
earns its keep by hinting the existence of more track beyond the
visible window. A symmetric left arrow would just be noise.
Click handler today: scrollBy({behavior: 'smooth'}) by 60% of viewport
width. Step 4 replaces this with a custom-animated glide and adds the
drag + wheel scroll modalities.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Page-level rebuild. /roadmap.astro renders a centred header block that
reads as one calm vertical stack:
Roadmap ← 11px tracked uppercase eyebrow (--on-surface-variant)
Roadmap ← 48px serif h1, single word
A live picture of the work… ← 14px subtitle, 480px max-width
The eyebrow + h1 read 'Roadmap → Roadmap' on purpose — the tracked
uppercase eyebrow primes the eye for the serif headline, and the
repetition feels confident rather than redundant. If it starts to grate
in practice, the eyebrow's the easy drop.
'What we are building.' is gone. The earlier 'The route' sub-header
inside <RoadmapRoute> is gone. The two prev/next arrow buttons in that
sub-header are gone (the single right-edge advance arrow lands in the
next commit).
Legend moves out of <RoadmapRoute> and into /roadmap.astro as the page's
final block. With the route still .rr-fullbleed, this lets the legend
return to centred content-column width — exactly the spec's
'header-centred / route-wide / legend-centred' rhythm.
Mid-state in this commit: the advance arrow doesn't exist yet, so
there's no in-page scroll affordance beyond the still-active scroll-snap
behaviour. Step 3 adds the arrow; step 4 strips the snap and adds drag
+ wheel + animated glide.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Confirmed before any code:
- /roadmap top→bottom: <header class="page-header"> with left-aligned
'What we are building.' h1 → <LatestDispatchBanner /> →
<RoadmapRoute /> (which renders the route header + arrows + legend
internally; the page doesn't see them).
- .rr-scroll has scroll-snap-type: x mandatory + scroll-behavior:
smooth. Dots carry scroll-snap-align: center. Both arrows are
scrollBy({behavior: 'smooth'}). No drag, no wheel, no momentum.
- Arrows live in the section header inside RoadmapRoute, not as a
floating viewport-anchored control. The whole route-header /
route-arrows construction comes out in commit 2; commit 3 replaces
it with the right-edge advance button anchored to .rr-region.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Italic Newsreader at the same font-size renders visibly taller than its
regular sibling — the cursive 'B' has a flourish that extends above the
cap-line. Matching font-sizes meant Bifrost always looked larger, and
trying to fit that flourish inside the line-box / gradient-clip
either made the wordmark cramped or clipped the top off.
Asymmetric sizes for optical match:
Project — 18px regular Newsreader
Bifrost — 16px italic Newsreader
At those sizes, Project's 18px cap-height roughly equals Bifrost's
16px cap + flourish-ascender, so the two words read as the same
visual height.
inline-block + padding 3px top / 1px bottom on Bifrost keeps the
gradient-clip bbox tall enough to contain the flourish without
clipping, while vertical-align: baseline keeps the typographic baseline
aligned with Project's baseline so the wordmark sits on one line.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three small tweaks:
- AppLayout wordmark: 'Project' and 'Bifrost' now share font-size 18 +
line-height 1.4 + tracking-snug via a combined selector. The previous
asymmetry (Bifrost had display: inline-block + padding 4/0/2 +
line-height: 1 to lift the gradient-clip box for the italic ascender)
was visibly making Bifrost render slightly off-height vs Project. With
parent line-height 1.4 the gradient-clip bbox is tall enough on its
own; padding hack removed.
- EventHeroCard footer status line drops the ' | CLOSES TUESDAY'
trailer. The line now reads simply '{capacity} SEATS · {n} CONFIRMED'.
closesDay variable and .hero-status-divider style both gone.
- /pulse pulse-col eyebrow: 'This week's' → 'Pulse Vote'. Matches the
more direct labelling everywhere else.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two coupled changes so the route actually uses the page width:
.rr-wrap.rr-desktop gains the .rr-fullbleed class which uses the canonical
calc(50% - 50vw) margin trick to break out of the parent .page max-width.
The headline, dispatch banner, route section header, and legend all stay
inside the content column at 72rem; only the route itself widens to the
viewport. Visually reads as a magazine spread — the section header lands
centred, then the path spreads outward beneath.
Viewport-aware layout: SSR still uses the 1100 default (we can't know
the client viewport server-side), but a new mount script on
RoadmapRoute recomputes the layout against window.innerWidth and
updates:
- .rr-track width (via inline style)
- .rr-path-svg width attribute
- .rr-path-d d attribute (rebuilt from the same cubic-bezier
formula the SSR helper uses, with the live itemX values; itemY
comes from per-milestone data-y attributes since amplitude
doesn't change with viewport)
- .rr-milestone left positions
Resize: 120ms debounced handler runs the same recompute + refreshes
the arrow/fade nav state. Each milestone keeps its same data-y, so
only the horizontal spread changes — the river's vertical shape is
preserved on resize.
Initial-scroll into shipping rewired to read the .rr-current
milestone's live `style.left` after recompute, not the SSR-computed
data-initial-x value (which is now stale once the client redoes the
math).
.rr-scroll horizontal padding 60 → 80 + scroll-padding-{left,right}
60 → 80 so first/last cards have breathing room inside the now-
viewport-wide container.
Smoke as Lars: rr-fullbleed class on the wrap, data-y attributes on
each milestone, rr-path-svg id present. The SVG width and itemX
positions land at viewport-derived values after mount.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
.nav-link.active was carrying four overlapping cues from earlier passes:
terracotta colour, serif italic, sentence case, leading '·' bullet, and
a 15px size bump. The spec's 'option 4' is colour-only. Strip the rest:
.nav-link.active {
color: var(--pigment-terracotta);
font-weight: 500;
}
That's it. Same sans uppercase as inactive links, just terracotta with
a touch more weight. The bullet ::before is gone; nothing floats below
the link.
Sign out (.logout-btn) is already --on-surface-muted with --on-surface
on hover from a prior pass — exactly the muted treatment the new spec
asks for, so no change needed. The 'Sign out is currently terracotta'
line in the spec didn't match the codebase; flagged in the audit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Findings before any code:
- .nav-link.active already terracotta from a prior pass, but with extra
serif italic + sentence case + larger font + leading '·' bullet. The
new spec wants colour-only + weight 500. Strip the rest.
- Wrapper chain to /roadmap: <main class="main-content"> (no max-width)
→ <div class="page"> with max-width: var(--content-max) = 72rem
(1152px). Single constraining wrapper. calc(50% - 50vw) escape works.
- Sign out (.logout-btn) is already --on-surface-muted with --on-surface
on hover — exactly where the spec wants it to land. Skip that
paragraph in commit 2. The spec's claim 'Sign out is currently
terracotta' doesn't match the code.
- RoadmapRoute SSR default viewportWidth is 1100 and /roadmap.astro
doesn't override. Switching to window.innerWidth requires a mount-
time + resize-debounced client recompute of SVG width / path d /
itemX dot positions. Heavier lift, but the dots really do spread
with viewport (no scaleX cheat available).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The actual cause of the persistent top/bottom card clipping wasn't the
track height or the padding — it's that the CSS spec forces
overflow-y: visible to compute as auto whenever overflow-x is auto.
Browsers clip the scroll container on both axes regardless of how we
declare overflow-y. Every previous fix was band-aiding the same
underlying problem.
Geometric fix: flip cardSide so cards hang toward the centreline
instead of away from it.
- i=0 (dot on centreline) → card below (default, no clip risk)
- i=1 (dot above-centre, odd) → card below (grows toward midY)
- i=2 (dot below-centre, even >0) → card above (grows toward midY)
- …alternating thereafter
Cards now always grow into the track, never out of it. Both axes are
naturally bounded by the track's height. Hover-expanded cards stay
inside the scroll container's clip box, so the browser-forced clipping
has nothing to remove.
Tests updated to expect the new pattern. The 7-item case carries an
extra spot-check that every card's side is opposite to its dot's
offset from the centreline — i.e. the geometric invariant the fix
relies on.
Visual rhythm: cards still alternate above/below as the path swings
up and down; the wave reads the same. What changes is which milestones
have cards above vs below — and only at the visual top of the page
where it improves things by stopping the clipping.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LatestDispatchBanner rebuilt from the three-column horizontal row into
an editorial card that reads as something to engage with, not a
database row.
New layout:
- Meta row (1fr / auto): tracked 'LATEST DISPATCH · {relative}' +
kind pill on the left; 'All dispatches →' tracked link on the right.
- 30px serif headline beneath, max-width 720px so a real title can
breathe across two lines if needed.
- Body grid (1fr / auto): the prose on the left, an author block on
the right. Prose splits into two paragraphs — p1 in primary text,
p2 in muted (--on-surface-variant) ending in an ellipsis if the
source extends beyond what was rendered. Author block has a small
'Jonathan / team' stack alongside a 36px serif italic initial in
an ink-coloured circle, plus a terracotta 'Read full dispatch →'
CTA with a 1px terracotta bottom border.
Kind pills get per-kind tinted backgrounds (decision → indigo, update
→ copper, behind_the_scenes → walnut, note → terracotta) matching the
established kind-pigment mapping.
splitExcerpt helper added to src/lib/format.ts:
- Prefers a markdown \\n\\n paragraph break (admin-controllable);
- Falls back to the first sentence boundary past character 120;
- Returns [first, null] when no good split exists — banner renders
just p1 in that case and skips p2 entirely.
Admin: the excerpt field on /admin?tab=dispatches grows from a
single-line input to a 4-row textarea with the spec'd helper text
nudging admins to write 2-4 sentences with a blank-line break.
Seed: the decision dispatch's excerpt rewritten as the spec's
two-paragraph block so the new layout has real content to render.
Body stays unchanged.
Mobile: the body collapses to single-column; the author block jumps
above the prose with order: -1, so the byline reads first on small
screens and the text flows freely below it.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The .rr-current marker on the current shipping milestone already says
'this is where we are' through colour + ring + dot scale. A second
surface saying the same thing in different words diluted both. One
signal, one place.
Removed:
- src/components/RoadmapInMotion.astro (component file)
- The import and render slot in /roadmap.astro
- The 'For shipping items: the first sentence appears on /roadmap as
the "In motion right now" line' helper text on the admin description
field (the field stays; only the helper copy goes).
The firstSentenceOf helper lived inside RoadmapInMotion only and was
never re-exported, so it dies with the file.
Banner margin-bottom restores from 40 → 56px now that nothing sits
between the dispatch banner and the route header. The route flows
directly out of the dispatch beat.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The root cause of the hover-clipping we kept band-aiding with larger
track-heights: a scroll container with overflow-x: auto implicitly
clips on the perpendicular axis too. Explicit overflow-y: visible
lets cards expand above and below the track freely.
Implementation matches the spec's belt-and-braces pattern. New layered
markup:
.rr-wrap → position: relative, anchors fades
.rr-scroll → overflow-x: auto + overflow-y: visible,
padding 60/60/80, scroll-padding 60/60 sides
.rr-scroll-inner → structural, no layout effect
.rr-track → positioned at the inner wrapper
The padding-top: 60px / padding-bottom: 80px on .rr-scroll gives cards
room to grow above and below the track without ever hitting a clip
boundary, even on browsers that mis-handle the overflow-x/y mix.
Edge fades reposition: top: 60px / bottom: 80px (was 0 / 16) so they
only cover the track itself, not the overflow padding zones above and
below where hover-expanded cards now live.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three coupled fixes to the route's geometry:
- computeRouteLayout's width calculation flipped to Math.max(viewport
* 0.80, itemCount * minSpacing + padding * 2). On a wide screen with
few items the 80% target wins and the path stretches across the
page; once item count makes the data-driven width exceed 80% (the
carousel case), the data-driven value wins and the track extends
past the viewport unchanged.
- .rr-scroll horizontal padding 140 → 60 each side. The previous 140
was overcompensating; with the new 80% target the milestones already
sit inside their own breathing room. 60 is card-half + 30px buffer,
enough for a 220px card centred under a dot 60px from the edge.
scroll-padding kept in sync at 60 for snap-stop landings.
- trackHeight default 580 → 420; midY 290 → 210. The 580 was bandaging
the vertical-clipping issue — that fix lands in the next commit. With
the clip properly addressed, 420 fits the path's amplitude 120 swing
cleanly with no wasted vertical space.
Tests rewritten to match the new width semantics: 1 item @ 1000 →
920px (0.8 * 1000 + 120); 3 items @ 1400 → 1240px; 20 items @ 800 →
6200px (data-driven wins). midY assertion 290 → 210.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Confirmed before any code:
- .rr-scroll: padding 0/140/8, scroll-padding-{left,right} 140,
overflow-x: auto only — overflow-y is implicit (the spec's known
flaky combination). paddingX default in computeRouteLayout is 60.
- <RoadmapInMotion> exists at src/components/RoadmapInMotion.astro
and is mounted at /roadmap.astro:29. firstSentenceOf helper is
local to that file (not exported, no other callers — safe to delete
outright).
- <LatestDispatchBanner> uses the three-column row grid (auto 1fr auto)
from the prior pass — that whole layout is what step 5 rebuilds.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous seed conflated status='shipping' with 'about to ship' —
'Audit log export' was status=shipping target='Next week' which is
actually a queued release, not a live one. Refined so:
status='shipping' → live in production now
status='in_beta' → not yet live, GA target set
status='exploring' → on the long horizon
status='considering' → not committed
Updated distribution: 2 shipping / 2 in_beta / 3 exploring / 2
considering. travelledStop = (1 + 0.5) / 9 ≈ 0.17, so the gradient
visibly transitions from travelled to ahead right at the 'you are
here' marker — the visual story matches the data.
Targets rewritten to read in this new register:
- Traceability layer Live since March
- Document ingestion Live since late May ← .rr-current
- Audit log export GA next week (now in_beta)
- Agentic query mode July
- Contextual memory Q3 2026
- Multi-organisation graphs Q3 2026
- Multi-tenant isolation Q4 2026
- Federated learning hooks 2027 (considering)
- Open evaluation framework 2027 (considering)
Descriptions rewritten so the In motion strip pulls a meaningful first
sentence from item #2 — 'Indexing PDF, Word, and plain text with
proper chunking.'
shipped_at backdated on items 1-2 only (60 days / 7 days ago), so the
.rr-current marker lands on the most recently-shipped item (Document
ingestion), not the about-to-GA in_beta item.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New <RoadmapInMotion> component renders between the dispatch banner
and the route's section header. Pulls the most-recent shipping item
(same selection rule the .rr-current marker uses) and prints the
first sentence of its description as a 18px serif italic line
preceded by an 'IN MOTION RIGHT NOW' tracked eyebrow.
A member who only spends 5 seconds on /roadmap now still walks away
with a sentence about what just shipped — no scroll, no hover.
firstSentenceOf() is the obvious regex against the first
[.!?](?=\s|$). Bails to the 200-char slice if no sentence boundary
fits (covers 'Dr.' / 'e.g.' confusables). Returns '' on null. The
strip hides itself entirely when there's no shipping item, or when
the shipping item has no description text.
Page subtitle: 'Hover any milestone for the full story.' →
'Tap or hover any milestone for the full story.' — touch devices
don't have hover, and the kind of detail that says we're paying
attention.
Admin description-field gains a helper note: 'For shipping items:
the first sentence appears on /roadmap as the "In motion right now"
line. Make it count.' Nudges good first-sentence writing without
adding a new field to maintain.
Banner margin under the dispatch banner reduces 56 → 40px because
the in-motion strip carries its own 36px bottom margin to the route.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three coupled changes that all serve the same goal — less furniture
above the route, more honest information below it.
Progress dots gone. At 5 pills × ~400px per pill the strip was too
coarse to feel meaningful; the arrows + edge fades already
communicate scroll position. .rr-progress markup, the script logic
that updated the .active class, and the .rr-progress / .rr-progress-dot
styles are all deleted.
Legend moves from beside 'The route' in the section header to below
the track, centred. Reading order is now title → walk the path → key,
which is the order it makes sense in. The header collapses to just
the title on the left and the two arrow buttons on the right.
Path amplitude is no longer constant. computeRouteLayout multiplies
the base amplitude (120) by a per-item factor that ramps 0.78 (first
off-axis item) → 1.18 (last item), so closer-in items swing tighter
and further-out items swing wider. The visual effect is subtle but
the path now feels hand-planned instead of strictly sinusoidal.
Test updated to verify the multiplier — |itemY[2] - midY| now exceeds
|itemY[1] - midY| in the 3-item case.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous .rr-current was a 1.15× scale on top of an animated pulsing
::after ring — subtle, and the pulse was easy to miss against the cream
ground. Replaced with a static box-shadow ring at 6px offset in 45%
terracotta, plus a 1.3× scale on the dot itself. The pulse is gone;
the ring is now visible at rest, which is what the marker needs to do.
Hover/focus on a milestone card now scales its sibling dot via :has():
- any card hover/focus → its dot 1.15
- the current-shipping card hover/focus → its dot 1.4
The dot acknowledges that you've engaged with its card. Cleaner than
tying scroll position or click state.
:has() ships in every evergreen browser since 2023; older Firefox just
won't grow the dot, which degrades to no harm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The route was clipping at three places: top and bottom of hovered
cards (the track was only 460 tall) and at the left/right viewport
edges (first card half-off-screen at scrollLeft 0, last card off the
right at scrollEnd).
Track height: default trackHeight in roadmap-layout 460 → 580; .rr-track
inline-style and the SVG height matched. midY now 290. Path centreline
stays in the visual centre and gains 60px breathing room above + 60px
below — which is exactly the room a hovered card needs to expand into.
Scroll-container padding: .rr-scroll gains 140px of horizontal padding
plus matching scroll-padding-left/right so snap-stops land cleanly.
The 140 figure is 220px card-width / 2 + 30px buffer, so the first and
last cards have a full card-width of clear space inside the viewport
at the scroll extremes.
Layout helper test verifies midY === 290.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three changes to <LatestDispatchBanner>:
- Padding: 22/26 → 28/26 — extra top weight stops the eyebrow + title
feeling stuck to the card edge.
- Excerpt: the previous nowrap + text-overflow: ellipsis clamp was
truncating mid-sentence. Replaced with -webkit-line-clamp: 2 so a
real sentence (and a half) renders. line-height 1.55, font-size
bumped 12 → 13 to match the longer reading rhythm.
- Kind pill next to the title, same pattern as the home-page dispatch
byline pill: 9px tracked uppercase, 2/8 padding, 3px radius, kind-
pigment-tinted background at 10% opacity. Wraps below the title on
narrow widths via flex-wrap on .b-title-row.
Banner margin-bottom (set on /roadmap.astro) stays at 56px for now;
the spec's reduction to 40px is conditional on the In motion strip
landing, which is the commit after next.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Confirmed before changing anything:
- trackHeight default = 460 in roadmap-layout.ts (midY 230). .rr-track
inline-styled at 460px. .rr-scroll has only padding-bottom: 8px — no
horizontal padding, no scroll-padding-{left,right}.
- .rr-current class is being applied to the correct dot:
class:list={['rr-dot', { 'rr-current': i === lastShippingIndex }]}.
lastShippingIndex computed via the spec's pop-of-shipping-indices.
- Progress dots row is rendered as <div class="rr-progress"> with
Math.max(2, Math.min(6, ceil(items.length/2))) .rr-progress-dot
children. Nav script toggles .active.
- Card eyebrow reads `${item.target.toUpperCase()} · ${STATUS_LABEL[
item.status]}` (or the bare label when target is null) — matches.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the 7-item roadmap seed with the 9-item layout from the v5
spec. Distribution: 3 shipping → 1 in_beta → 3 exploring → 2 considering.
travelledStop computes to (2 + 0.5) / 9 ≈ 0.28, so the route gradient
visibly reads as 'travelled-then-ahead' rather than one solid tone.
Each item gets a target string and either a metadata_text (8 of 9) or
a fresh attribution (the one without metadata_text, 'Multi-tenant
isolation', attributed to Camilla — so the route card surfaces the
'Shaped by Camilla' trailing line via the fallback path).
metadata_text varies across the spec'd cues — 'Shaped by Lars in our
March session' / 'Pilot-tested with Mette's team' / 'Builds on
traceability layer' / 'Request beta access →' / '2 council requests' /
'Open question on key custody' / 'Council input wanted' / 'Long-term
direction'.
Attribution coverage now spans 6 of the 7 cab members so multiple
'Shaped by ...' trailers exist if metadata_text were ever cleared.
The first three shipping items get realistic shipped_at backdates
(-21 / -7 / -1 days) so the 'most recent shipping' detection lands on
'Audit log export' — which becomes the pulsed 'you are here' dot on
the route.
Smoke as Lars: /roadmap header reads 'What we are building.',
LatestDispatchBanner shows the deprioritising-public-cloud decision,
all nine route titles render, metadata_text trailing lines present in
the DOM, .rr-current marker on the most recent shipping milestone.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Body content of /roadmap is fully replaced. The previous implementation
parsed content/roadmap.md with a hand-written regex into three flat
columns (IN PROGRESS / NEXT / LATER) — gone in its entirety, including
the parseSections helper and horizonColors map (page-local, not exported,
so nothing else broke).
New layout:
1. Page header — tracked 'ROADMAP' eyebrow + 48px serif 'What we
are building.' + a 14px sub line up to ~540px wide that explains
the hover affordance. 36px margin below.
2. <LatestDispatchBanner /> — renders nothing if zero dispatches.
56px below before the route's section header.
3. <RoadmapRoute items={items} /> — pulls all roadmap_items ordered
by display_order asc, falls back to id asc on ties.
Page padding 40/36/80 desktop, 32/24/64 mobile. h1 drops to 36px on
phones; banner gap collapses to 36px.
content/roadmap.md is no longer read; admin manages everything via
/admin?tab=roadmap. The markdown file stays in the repo as the seed
source for fresh databases (still consumed by scripts/seed-roadmap.js)
but the live page is database-driven.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The treasure-map metaphor is a desktop affordance — on phones it
becomes a vertical timeline instead. Markup was rendered alongside the
desktop track in commit RM.5; this commit adds the styles to actually
show it and hides the desktop bits.
Per-row layout — 32px / 1fr grid:
- Left column holds the 12px round status-coloured dot and a 1px
rgba(0,0,0,0.18) vertical line continuing down to the next dot. The
last row has no line (rendered conditionally in the markup), so the
trail ends cleanly at the final milestone.
- Right column holds the same eyebrow / serif title / description /
trailing line — but always visible. No hover, no reveal. Reading is
the only interaction.
Arrow buttons and progress dots both hidden at this breakpoint. The
mobile timeline needs no JS — pure markup + CSS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Vanilla TS script at the bottom of RoadmapRoute.astro. No library.
- Arrows scrollBy ±72% of the scroll-container's clientWidth, smooth
behaviour. Disabled at scroll start/end.
- Edge fades (.rr-fade-left / -right) flip opacity 0↔1 at scroll start /
end so the affordance disappears when there's nowhere further to go.
- Progress dots track scrollLeft/(scrollWidth-clientWidth) percentage,
bucketing into dots.length slots. Active dot gets .active (themed in
CSS as --on-surface).
- On mount, the script reads section.data-initial-x — the SVG x position
of the most recent shipping milestone (computed server-side from the
layout helper) — and scrolls so that x sits ~25% from the left edge
of the viewport. Clamped to [0, scrollWidth-clientWidth]. Member opens
/roadmap and immediately sees one shipped item + several ahead-of-them
items, not the very start of history.
- setTimeout(update, 50) re-measures after first paint settles
(especially relevant when SVG fonts or other late-arriving assets
shift the trackWidth by a couple of px).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The treasure-map. Static render only; nav script lands in the next commit.
Section header: serif 'The route' + tracked-uppercase legend
(Shipping / In beta / Exploring / Considering) on the left; two 32px
round arrow buttons on the right (matching the /pulse RoadmapCarousel
chrome).
Body — desktop layout (.rr-desktop):
- Outer .rr-wrap holds an overflow-x: auto .rr-scroll with snap-x.
- Track is sized to layout.trackWidth × 460. Cubic-bezier SVG path
rendered behind milestones, stroked with a horizontal gradient that
fades from #2a2520 / 0.55 alpha through to #2a2520 / 0.15 at the
travelled-stop position (computed by travelledStopFor in step 3).
- Each milestone is a 14px round dot in its status colour, with a 5px
cream halo cutting the path beneath. The 'you are here' marker (most
recent shipping item) gets a 1.15× scale + a quiet 2.4s pulse ring.
- Cards hang from each dot via a 1px / 30px vertical connector, on the
alternating cardSide returned by layout. .rr-card is the anchor target;
hover and :focus-visible both reveal the description + trailing line
via max-height + opacity transitions, so keyboard tab is a first-class
interaction (no mouse required).
- Trailing line: item.metadata_text if set, else 'Shaped by {first
names}' if attributed_members non-empty, else nothing.
- Edge fades on both sides for scroll affordance (left fade hidden when
at scrollLeft 0; right fade hides when at scrollEnd — the JS in step 6
will toggle their opacity).
Progress dots row underneath — count = max(2, min(6, ceil(items/2))).
First dot starts active; nav script will move it.
Mobile vertical fallback (.rr-mobile) markup is included now but kept
display:none on desktop. Step 7 turns it on at the (max-width: 767px)
breakpoint.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
White card with 0.5px border, 12px radius, 22px/26px padding. Three-
column grid (auto / 1fr / auto):
- Left: 30px deterministic-pigment avatar + tracked 'LATEST DISPATCH ·
{relative}' eyebrow + 11px '{first_name} · {title || team}' line.
- Middle: 19px serif title + 12px single-line ellipsis excerpt.
- Right: 11px terracotta 'READ DISPATCH' link (1px terracotta bottom
border) + 10px muted 'ALL DISPATCHES →' below it.
The whole card is one <a> targeting the dispatch slug — hover lifts it
1px and tints the surface; entire surface is the click target.
Hidden entirely when getLatestPublishedDispatches(1) returns []. The
banner doesn't render an empty-state placeholder — the /roadmap page
just starts with the route in that case.
At <768px the grid collapses to a single column and the excerpt wraps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pure math, no DOM. computeRouteLayout(opts) takes itemCount + viewport
width and returns trackWidth, pathD, itemX, itemY, cardSide, midY:
- itemX evenly distributes items between padding and viewport-padding,
expanding the canvas beyond the viewport when itemCount * minSpacingX
exceeds the available width. Single-item case centres the dot.
- itemY puts the first item on the centreline; subsequent items
alternate +amplitude / -amplitude so the path snakes gently up and
down. The route reads as a river rather than a saw-tooth because the
cubic-bezier control points use the segment midpoint x — that holds
the tangent flat at each milestone.
- cardSide alternates 'below' / 'above' starting from 'below' on item 0.
Cards hang from their dot via a thin vertical connector in the
consuming component.
Also adds travelledStopFor(statuses) — the stop position on the path
stroke gradient where 'travelled' fades into 'ahead'. Clamps to 0.98
even when every item is shipping so the fade is always visible.
9 unit tests cover itemCount 1/2/3/7/20 plus the travelledStop edge
cases (no shipping → 0; all shipping → ≤ 0.98; mixed → exact midpoint).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Migration 0007 (spec said 0006 but 0006 was already roadmap_considering)
adds a single nullable metadata_text column to roadmap_items — a short
admin-set narrative cue shown on hover in the route cards. ~60 chars
suggested in admin helper text. Hidden in the UI when NULL.
db.ts: RoadmapItem type gains the field. createRoadmapItem + updateRoadmapItem
accept an optional metadata_text parameter. moveRoadmapItem passes it through
when swapping display_order between siblings so the helper preserves it.
Admin: /admin?tab=roadmap edit form gets a new 'Hover note' input under
the description, with the helper text and a 120-char hard cap. Empty
string saves as NULL.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Confirmed before writing code:
- Current /roadmap reads content/roadmap.md via a hand-written
parseSections regex into three flat columns (IN PROGRESS / NEXT /
LATER) — it doesn't query roadmap_items at all. Full body replace
in step 8; AppLayout + new editorial page header stay.
- roadmap_items.status enum already covers 'considering' from 0006.
No need to fold the enum extension into this migration.
- getLatestPublishedDispatches(limit: number) is in db.ts (line 1177);
pass 1 for the banner. No new helper.
- No tests reference /roadmap markup. The route layout helper is the
only new unit-test surface.
Divergence: spec asks for migration 0006_roadmap_metadata.sql but that
number's already used by roadmap_considering. Going with 0007.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The italic 'B' on 'Bifrost' was being clipped at the top because
background-clip: text only paints inside the inline element's content
box — which at the previous tight line-height didn't include the
ascender flourish.
Two cooperating fixes:
- .wordmark-project gets line-height: 1.5 so the parent line-box has
enough vertical room for the italic ascender to live in.
- .wordmark-bifrost becomes display: inline-block with 4px top / 2px
bottom padding. That extends the element's content box vertically so
the gradient-clip mask covers the full italic glyph including the
serif curl above the cap-height.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two fixes for the previous baseline-align attempt:
- 'Bifrost' was getting its italic ascender clipped because line-height
was pinned at 1. Switched to line-height: 1.3 on .wordmark-project so
the swash on the italic 'B' / 'f' has room to render.
- The lockup was reading low overall because align-items: baseline +
translateY(3px) on the SVG together shifted the SVG below the text
baseline. Reverted to align-items: center for reliable cross-browser
centring, dropped the SVG transform, and pulled the SVG height from
22 → 20 so the visible glyph height of the wordmark matches the cap-
height of Newsreader at 18px more closely. The '·' bullet keeps a
-2px nudge because Newsreader's bullet sits typographically above its
baseline at this size.
- 2px padding-top on .wordmark-project compensates for the small bit
of descender slack at the bottom of the Fenja SVG — caps now sit on
the same visible cap-line as the wordmark glyphs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three small adjustments so the lockup reads as one mark, not a logo
next to a label:
- align-items: baseline on .wordmark-link so the typographic baseline
drives vertical alignment (instead of bounding-box centres).
- 'Project' + 'Bifrost' bumped from text-body-md (16px) to 18px with
line-height: 1 and tracking-snug. The bigger weight matches the
visible glyph height of the Fenja SVG and pulls the bullet into
conversation with the wordmark instead of floating between them.
- The Fenja SVG gets a translateY(3px) nudge to compensate for the
descender slack in its 265×101 viewBox — the SVG's actual baseline
sits a couple of px above its bounding-box bottom, so the flex
baseline-align would otherwise place 'fenja' above the text baseline.
- The '·' separator drops 1px and grows to 18px so it sits between the
two marks rather than floating above them.
The exact numbers are empirical — eyeballed in dev — but the rationale
each pin to a baseline relationship rather than 'magic px offset'.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
.wordmark-project was Manrope 500 — visually a sans-serif label next to
a serif-italic gradient noun. Switches to Newsreader 400 so the
wordmark reads as one continuous editorial mark, with the italic +
gradient on 'Bifrost' doing the visual lift instead of a family contrast.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Council section gets a proper carousel — a horizontal marquee that
moves continuously across the page, listing every cab member in turn
rather than a fixed-size grid.
Implementation:
- Members rendered twice in a single flex track; CSS keyframe translates
from translateX(0) to translateX(-50%) over 40s+ (duration scales with
member count via the --marquee-duration inline custom prop, capped at
6 sec per member or 28 sec minimum). At -50% the first copy is fully
offscreen and the second copy occupies the visible window seamlessly;
the loop resets without a visible jump.
- aria-hidden on the duplicated copies so screen readers don't double-
announce.
- mask-image fades both edges so members slide in and out softly rather
than clipping at the container edge.
- Paused on hover so a reader can stop and parse a tile.
- prefers-reduced-motion: animation off and the strip becomes a quietly
scrollable horizontal list — keyboard / trackpad users can pan
manually instead of relying on the animation.
Seed adds 3 more cab members for a total of 7 (Mads Lindberg, Camilla
Storm, Frederik Lund) with backdated cab_joined_date so member_numbers
allocate 5/6/7. Each gets title + pull_quote + focus_tags consistent
with the existing four. Tenure spread is now 3 → 24 weeks across the
seven members so /members renders meaningfully varied 'member since'
dates.
The previous 4-tile grid + 5th-tile-as-link case is gone; the marquee
loops the full set so no truncation is needed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The pulse vote widget on /pulse and on /dispatches/[slug] now behaves
the way the v5 spec asks:
- Eyebrow shortens: 'This week's pulse' → 'This week's'.
- Status line copy changes shape depending on whether the viewer has
voted yet. Pre-vote: 'Vote to see how the council weighs in · Closes
TUESDAY' — sets expectations that the percentages reveal after a
vote. Post-vote: '2 of 7 voted · Closes TUESDAY · Click to change' —
tells the viewer they can change their mind.
- Each option now renders a right-aligned tabular-nums percentage badge,
but only after the viewer has voted. Pre-vote there's no percentage
on screen at all — voting is a commitment, not a peek.
- Options stay clickable after voting (no `disabled`). Re-clicking a
different option changes the vote.
DB: new helper castOrChangeVote(pulseId, userId, optionIndex) does an
UPSERT — INSERT on first vote, UPDATE option_index + voted_at on
subsequent. Returns true if this was the brand-new vote, so the caller
can write the 'voted' activity row exactly once and not double-count
changes-of-mind in the feed. castVote(...) (INSERT OR IGNORE) stays in
db.ts for callers that explicitly want first-vote-wins semantics.
Status-class rename: .locked → .closed on both pulse-option and
inline-poll-option. The class now reflects what it actually represents
(the pulse is closed) rather than the false invariant 'the user has
voted and can't change'.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Greeting (1, 2): the tracked date label above the greeting and the
milestone tenure line below it both come out. The greeting is now just
'Good morning, Jonathan.' alone on the left, with the MEMBER · NNN /
'Founding circle' stamp on the right. tenureMilestone helper + test stay
in place — they're still useful for future surfaces but no longer
rendered on /pulse.
Section titles (3): the noun in each section title gets serif italic +
a trailing period — 'On the <em>roadmap.</em>' and 'The <em>council.</em>'.
The two-word framing reads better visually than the previous flat
sans-serif title.
Spacing (6): bumped the major section transitions. Greeting → hero now
80px (was 56), also-coming-up → editorial 96px, editorial → roadmap
96px, roadmap → council 96px. The hero → also-coming-up gap stays at
the deliberate 18px because they're a pair, and the dispatch column's
internal margin-top 48px to its 'Earlier' list stays unchanged because
they belong to the same story.
Footer (7): 'Council manifesto' link removed from the footer for all
pages. The standalone /council-manifesto route stays in the codebase
(orphaned, not linked) so it isn't a 404 when someone has the URL.
Active nav link (8): the previous 4px terracotta dot below the active
link is gone. The active link now reads in a different typographic
register entirely:
- terracotta colour
- serif italic Newsreader (vs sans uppercase for inactive)
- sentence case (text-transform: none — the label appears as 'Pulse'
instead of 'PULSE')
- leading '· ' prefix dot for an additional 'you are here' marker
Four cues at once, no positioned overlay, no floating elements. The
typography shift alone tells you which page you're on.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Spacing — explicit per-section margins on /pulse rather than a single
gap. Page is padding: 40px 36px 80px now. Transitions match the spec:
greeting ─ 48px ─ below nav
greeting ─ 56px ─ hero
hero ─ 18px ─ also coming up (intentionally tight; related)
also ─ 72px ─ editorial row
editorial ─ 72px ─ roadmap
roadmap ─ 72px ─ council
The hero, editorial, roadmap and council transitions all sit at 72px so
the page reads as four distinct registers rather than a slab stack. The
hero → also-coming-up gap stays deliberately tight at 18px because the
two are a pair (the strip is the lighter outro to the indigo card).
Council section restructured to match the roadmap carousel framing:
- Outer card chrome dropped — no more single white surface wrapping the
grid. Section is just a header row + a 4-column grid of tiles.
- Header row: 22px serif 'The council' on the left, 11px terracotta
tracked uppercase 'See who our council is made up of →' on the right.
Same pattern as the roadmap header.
- Tiles: 38px avatar (down from 56), 15px serif name, 11px title,
10px tracked organisation. No background, no border. 24px grid gap.
- First 4 members render; if more, a 5th tile replaces the would-be
fifth member with a right-aligned 'See all N council members →' link.
With the current 4-member seed this case isn't exercised but the
branch is in place for when the council grows.
- 2-up on tablets, 1-up below 520px.
Seed update: roadmap now has 7 items spanning all four statuses (2
shipping / 1 in_beta / 2 exploring / 2 considering) ordered by
display_order 1..7. Traceability layer carries the 'Shaped by Lars'
attribution; Agentic query mode is attributed to Anna; Contextual memory
to Henriette. The rest are unattributed so the attribution trailer's
hidden case is exercised too. With 7 items the carousel arrows engage
and the right-edge fade is visible at start.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the 3-column grid on /pulse with a CSS scroll-snap carousel.
3 cards per view on desktop (flex 0 0 calc((100% - 2px) / 3)), one full
card with a slice of the next at 88% on mobile.
Header row: serif 22px 'On the roadmap' title on the left; right side has
the 'See the full roadmap →' section link plus two 30px round arrow
buttons. Arrows disable (opacity 0.25) when at start/end of scroll. Hidden
on mobile — touch swipe is the affordance.
Carousel-scroll has 0.5px top + bottom borders in rgba(0,0,0,0.08).
Scrollbar hidden cross-browser. Each card has a 0.5px right border (last
card excluded), 24/26 padding, background --background so it sits on the
cream rather than introducing a white surface.
Card contents:
- 6px status dot in the status colour + tracked 10px label
'{STATUS_LABEL} · {TARGET}' in the same family colour. The
considering tier uses the lighter #d4d2c8 dot with the #b4b2a9 label
to distinguish it from exploring.
- 19px serif title, line-height 1.2.
- 12px description, line-height 1.55, --on-surface-variant. If the
item has attributions, an attributionLine() trailer appends 'Shaped
by Lars.' / 'Shaped by Lars and Anna.' / etc. in --on-surface-muted.
Right-edge fade gradient (80px) fades to opacity 0 at scrollEnd via a
small vanilla script. The script also handles arrow disabled state and
scrollBy ±cardWidth on click. No library.
Items are loaded with the full set ordered by display_order ASC (then
id ASC tiebreak) — admin orders chronologically nearest-to-furthest and
the carousel just consumes that.
If items.length < 4 the arrows + fade are hidden; the cards still flex
naturally and don't actually need to scroll.
/pulse: dropped the old .roadmap-section/.roadmap-grid/.roadmap-card +
status-dot/breathe styles. Carousel does its own.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Below the indigo hero, two new sections replace the previous fenja-section
two-box layout.
ALSO-COMING-UP STRIP — plain text on cream, not a card. Flex
justify-between, 4px vertical padding. Up to 2 upcoming events on the
left, each rendered as a 22px serif day number beside a stacked
column: 9px tracked 'MONTH · KIND' label on top, 13px event title on
bottom. A 1px × 28px vertical divider in rgba(0,0,0,0.08) between the
two items. Right side carries the lone 'All gatherings →' link in 11px
terracotta tracked uppercase.
EDITORIAL ROW — 1.7fr / 1fr grid with a 56px column gap. Asymmetric
on purpose; the dispatch column carries the weight.
Dispatch column (left, wider, no card chrome):
- Byline row: 26px deterministic-pigment avatar + 12px author first
name + 11px relative time + kind pill (9px tracked, 2/8 padding,
3px radius, pigment-tinted background, margin-left: auto).
- 32px serif headline, line-height 1.15.
- 14px lead paragraph, line-height 1.7 (via dispatchLongPreview).
- 'Read the full dispatch' link — 11px terracotta tracked uppercase
with a hard 1px terracotta underline (not the global .section-link
italic treatment — this one's a button-ish affordance).
- Margin-top 48px, padding-top 28px, 0.5px on-surface-border line,
then the EARLIER list. Rows are 15px serif title left, 10px tracked
'{KIND} · {N}D' right. Day count is rounded UTC delta.
Pulse column (right, narrower, no card chrome):
- 10px tracked 'this week's pulse' eyebrow with a 5px terracotta dot
prefix. The only return of an eyebrow on /pulse.
- 22px serif question.
- 11px tracked status line: 'CLOSES {DAY} · {N} OF {TOTAL} VOTED'.
- Options stack with 6px gap. Each option has no top/right/bottom
border, only a 2px left border. Default left-border is rgba(0,0,0,
0.1); selected option flips to terracotta and gains a 5% terracotta
background tint. Letter prefix (A/B/C/D) is tracked, 10px, muted
by default and terracotta when chosen.
- Vote action POST handler unchanged — same /pulse?action=vote path
introduced in v2.
If the featured dispatch has no attached poll, the right column
doesn't render and the dispatch column takes the full row (the spec's
single-column collapse case).
Stale CSS for the old events-card / hero-* / coming-up-* / fenja-* /
fenja-poll-* class names all deleted in the same pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Self-contained component for the next gathering. Three-column grid:
- Left (140px): 10px tracked weekday · 88px serif day numeral (zero-
padded, line-height 0.85) · 11px tracked MONTH · HH:MM line. All on
the bleached --on-ink cream.
- Middle (1fr): 10px tracked NEXT GATHERING · KIND eyebrow · 26px serif
title · 13px description (--on-ink-body @ 85%) · 12px location line
(--on-ink-muted @ 65%).
- Right (auto, min 140px): tracked duration label right-aligned, then
up to 3 confirmed attendees as 'name + 18px avatar' rows, with a
+N overflow chip beneath if more.
Bottom strip after a 0.5px --ink-divider top border, padding-top 22px:
- Left: tracked '{capacity} SEATS · {n} CONFIRMED | CLOSES {DAY}' status
line, with a low-opacity '|' divider character between the halves.
- Right: form actions — 'Can't make it' link + cream pill 'Save your
seat →'. If already confirmed, swaps to outlined 'You're confirmed
✓' + a small 'Change' link.
Empty state collapses the action strip and renders a serif italic
'Nothing scheduled yet — when we have something, you'll be the first to
know.' (the only italic on the card, mirroring the spec).
/pulse swap: the previous inline events-card markup (hero body + bundled
coming-up grid + see-all link) is replaced by a single <EventHeroCard>
slot. The 'Also coming up' strip lives outside the indigo card now and
will be built in step 6; for this commit a temporary comment marker
holds its slot. AvatarPile import is dropped from /pulse since
EventHeroCard renders the attendees list inline.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the single-column greeting block with a 1fr / 1fr row. The left
side holds the date label (MONDAY, 11 MAY in tracked uppercase 11px,
swapped from the bullet separator to comma per spec), the serif 36px
greeting line ('Good morning, Jonathan.') with the first name italic,
and a milestone-aware tenure line. The right side (only rendered when
the user has a member_number — i.e. cab members) shows 'MEMBER · NNN'
zero-padded above 'Founding circle' in serif.
tenureMilestone(days) is the new helper that produces the milestone copy
through seven buckets: 0 / 1–6 / 7–20 / 21–55 / 56–180 / 181–364 / 365+.
The 1–6 bucket renders 'Day 2.', 'Day 3.' etc. (day count is days-since-
join; day one is the first 24 hours after joining). The months bucket
uses Math.floor(days/30) with a min of 2 to avoid a one-day-after-21
reading '1 months in.'. Years pluralise normally.
daysSince(iso) — small wrapper that handles SQL date strings ('YYYY-MM-DD
HH:MM:SS' or pure dates) and returns whole-day UTC delta. Same UTC
coercion the rest of the page uses.
Tests: 7 cases for tenureMilestone at the boundary days 0/1/7/22/60/200/
400 (plus an extra 730 to exercise the year plural). 43/43 passing.
This block replaces the in-line <MembershipCard> idea that was floating
around in earlier passes; the dark indigo card stays in src/components
for /members/:slug, but on /pulse the two-line stamp is enough.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Active link no longer carries a background fill or pill. Instead, a
4px terracotta dot is centred 22px below the link via ::after. Quieter,
more confident, and survives the cream/white surface change without
needing a hover-area redesign.
- Vertical divider before the user's name shifts from the existing ghost-
border colour to a solid rgba(0,0,0,0.15) line, 18px tall with 18px
padding either side (replacing the prior --space-2 / 8px). Still a
scaled-1px element rather than a pipe character.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Migration 0006 (the spec said 0005 but that number was already taken by
polls_on_dispatches from the previous session): rebuilds the
roadmap_items CHECK to ('shipping','in_beta','exploring','considering')
and renames any existing 'beta' rows to 'in_beta' in-place. FKs from
roadmap_attributions are preserved across the DROP/RENAME by toggling
PRAGMA foreign_keys off around the rebuild — attribution count unchanged
after migrate (verified 4 rows survive on the demo DB).
Tokens (src/styles/tokens.css): adds --on-ink, --on-ink-body,
--on-ink-muted, --ink-divider. The bleached #fffcf7 cream replaces the
warm #e8e0d0 --ink-text wherever it sits on indigo. Legacy --ink-text /
--ink-muted stay in tokens.css for now — if any later commit references
them they remain defined; the migration of existing call sites is
covered here.
Migrated to the new tokens in this pass:
- src/components/MembershipCard.astro (members/:slug card)
- src/pages/events.astro (hero invitation card)
Both render with cleaner whites on indigo as a side effect.
Code updates for the new status enum:
- db.ts: RoadmapStatus = shipping | in_beta | exploring | considering
- admin/RoadmapTab.astro: Status select gains Considering + In beta;
grouped section iteration covers all four
- admin/index.astro: validation list updated
- scripts/seed-roadmap.js: 'In progress' markdown bucket → 'in_beta'
- pulse.astro: roadmapStatusDot + roadmapStatusBlurb temporarily widened
(full rewrite of that section lands in step 7)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Confirmed before writing code:
- /pulse render order: greeting · events-card · fenja-section (article +
inline poll) · roadmap-section (3-col grid) · council-section.
- <MembershipCard> already absent from /pulse (removed in v2). The
component stays in src/components for /members/:slug use.
- events.kind: ('dinner','office_hours','summit','virtual','working_session')
- roadmap_items.status: ('shipping','beta','exploring') — needs widening.
- tokens.css: --background #faf6ee, --ink #2c3a52, --ink-text #e8e0d0,
--ink-muted #b8a989. No --on-ink* tokens yet.
Divergences resolved with the user before step 2:
1. Migration is 0006_roadmap_considering.sql, not 0005 — that number is
already taken by polls_on_dispatches from the previous session.
2. roadmap_items.status will rename existing 'beta' rows to 'in_beta'
(matching the spec's canonical name) in the same migration.
3. --on-ink, --on-ink-muted, --on-ink-body, --ink-divider added; existing
--ink-text / --ink-muted references on indigo surfaces (MembershipCard,
/events hero, /pulse hero) migrate in the same pass so old tokens
aren't left half-used.
4. Eyebrow uppercase labels return on /pulse only (NEXT GATHERING ·
KIND, EARLIER, THIS WEEK'S PULSE, MEMBER · NNN). /members /events
/dispatches keep the eyebrowless treatment.
5. Pulse column shows the featured dispatch's attached poll. No attached
poll ⇒ editorial row collapses to one column. Aligns with the
polls-attached-to-articles model from the previous pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Layout (per the v4 follow-up spec):
1b. Latest from Fenja is now a two-box layout when there's an attached
poll: article on the left (wider), poll widget on the right. Without
a poll, the article box takes the full row. Both boxes are surfaced
on --surface-card with the same generous padding so they read as
sibling pieces.
1c. Featured excerpt is extended to ~720 chars (was ~520) via a wider
threshold on dispatchLongPreview. Below the article+poll row, the
next two most-recent published dispatches render as minimalist rows
— just title + kind + relative time, separated by ghost borders.
2. Hero event: date column is now 150px wide (was 110px); grid uses
align-items: center so the date+detail columns are vertically aligned
rather than top-stuck. Day number scaled up to 3.5rem (was 2.75).
Outer card padding bumped from --space-7 to --space-10. Hero title
bumped to 2rem.
3. More air: page-level section gap --space-10 → --space-12. Each
on-page card has been re-padded; outer page horizontal padding goes
down to --space-16 from --space-20 to match the narrower canvas.
6. Council members no longer have individual card chrome. One outer
--surface-card wraps the whole grid; each member cell is just an
avatar + name + title + company stack with no background or border.
Cells use a larger 6/8 grid gap so they don't crowd each other.
Inline poll widget on /dispatches/[slug]: when a dispatch has an
attached pulse, the article body is followed by a compact poll card
matching the /pulse-side widget. Vote POST handled inline; the page
re-renders with the locked + result-bar state.
scripts/seed-demo.js: the existing 'Which milestone should we anchor Q3
around?' pulse now attaches to the decision dispatch ('We are
deprioritising public-cloud parity for Q3') via pulse_id. Other
dispatches stay poll-free.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
