Move the previous + upcoming dates out of the dark hero box into an editorial
strip beneath it (large serif day, terracotta eyebrow, "All gatherings" link
top-aligned on the right). Hero card keeps just the RSVP footer.
- Replace the name link/logout with a faded person-icon button that opens a
Settings + Sign out dropdown on hover/click; opaque (non-glass) panel.
- Inline the logo SVG so it never re-fetches (kills the flicker).
- Size the Fenja AI logo larger than the "Project · Bifrost" wordmark and
align them on a shared optical centre.
- Add per-item feature bullets (features column, migration 0009, db helpers,
admin field) rendered as plus-icon lists on desktop + mobile.
- Reseed with the live roadmap items; status labels renamed
(In dev / Planning) and "— Alpha" suffix dropped from titles.
- Enlarge the route and lock the roadmap page to sideways-only scroll so the
timeline stays on screen; full-bleed edge-to-edge width; nudge the header
down toward the page centre.
- Small-caps stage suffix helper (splitStageSuffix) in format.ts.
generateTempPassword() used randomBytes(4) — 32 bits behind a known
'Bifrost-' prefix — for a directly-usable login password set by the admin
reset action. Brute-forceable. Bump to randomBytes(16) (128 bits) base64url.
Flagged by automated security review.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
deploy.sh runs as fenja and called `sudo systemctl restart`, which prompted
for fenja's (nonexistent) password and aborted the deploy. Use `sudo -n` so
it never hangs: restart silently when the NOPASSWD rule is present, else
print the manual restart command and exit non-zero. Drop sudo from the
read-only status line. Narrow the documented sudoers rule to restart-only
and create it via visudo.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- /account gains a Change password form (verify current, 8+ char new,
confirm match) backed by updateUserPassword + verifyPassword/hashPassword.
- Admin users resource gains a "Reset password" action that generates a
fresh temp password, sets it immediately, and reveals it once in the panel
(new temp-password action-result, reusing the copy-box UI) for the admin
to send to the user.
- Backstage top-left logo now links to the portal (main menu).
Temp passwords are generated + hashed at request time; never stored in git
or logged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
pnpm 11 ignores both package.json's pnpm.onlyBuiltDependencies and the
pnpm-workspace.yaml onlyBuiltDependencies key — it reads the build allow-list
from `allowBuilds` (as written by `pnpm approve-builds`). Switch to that so
`pnpm install` compiles better-sqlite3/esbuild/sharp automatically on deploy,
and remove the now-ignored package.json field that emitted a warning.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
pnpm 10+ no longer reads pnpm.onlyBuiltDependencies from package.json and
blocks build scripts by default, so better-sqlite3's native binary was
never compiled on install (ERR_PNPM_IGNORED_BUILDS) — the SSR server would
crash at runtime. Allow-list the native/build-script deps here so every
`pnpm install` (including scripts/deploy.sh) builds them.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Generate a dedicated ed25519 deploy key on the server (private key stays
put), register the public half read-only, and clone via a bifrost-portal-git
SSH alias with IdentitiesOnly so it can't clash with the existing apps' keys.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Make explicit that /opt/bifrost-portal is its own repo/remote, separate
from the existing /opt/fenja and /opt/bifrost-customer apps on the box.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Recon of the live box (Ubuntu 24.04 x86_64, nginx 1.24, certbot 2.9)
showed established conventions from the existing fenja / bifrost-customer
services. Match them so the portal looks like a first-class citizen:
- service runs as the existing `fenja` user, journald logging + full
hardening block (ProtectKernelModules, LockPersonality), ExecStart on
/usr/bin/node (box upgraded globally to Node 22)
- code in /opt/bifrost-portal, in-dir .env (EnvironmentFile), data under
the shared /opt/fenja/data/bifrost-portal (ReadWritePaths)
- nginx: 1.24 `listen ... ssl http2` syntax, certbot options-ssl-nginx +
dhparam includes, server_tokens off, sites-available/bifrost-portal (no
.conf) symlinked; 12m body size for photo uploads; port 4322 (free)
- deploy.sh / backup.sh point at the new paths
- DEPLOY.md rewritten as a server-specific runbook incl. the global Node 22
upgrade + retest of the existing apps, and pnpm via corepack
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Run the Astro Node standalone server as a hardened systemd service on
127.0.0.1:4322, behind the existing nginx which terminates TLS and proxies
the bifrost-portal.fenja.ai hostname. Coexists with the other Fenja site;
its config is untouched.
- deploy/bifrost-portal.service: systemd unit (bifrost user, EnvironmentFile,
ProtectSystem, ReadWritePaths to the data dir only)
- deploy/nginx/bifrost-portal.fenja.ai.conf: HTTP->HTTPS + proxy site block
- .env.production.example: prod env vars (secret, db path, uploads, host/port)
- scripts/deploy.sh: server-side pull -> install (rebuild native dep) ->
build -> migrate -> restart; persistent data untouched
- scripts/backup.sh: nightly online .backup, 30-day retention
- DEPLOY.md: full runbook (port check, DNS, provision, TLS, backups, rollback)
Persistent data (db, uploads, backups) lives in /var/lib/bifrost-portal,
outside the /opt/bifrost-portal build dir, so redeploys never wipe it.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
So production migrations hit the same SQLite file the running app uses
(src/lib/db.ts), instead of a repo-local bifrost.db. Mirrors the pattern
already in seed-production.js and seed-roadmap.js. Falls back to the dev
db when unset.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds scripts/seed-production.js (db:seed:production / db:setup:production):
the curated pilot data — 8 council members, 2 Fenja admins, 10 roadmap
items, the launch event, the pulse vote, and the welcome dispatch — so a
production DB can be built reproducibly from git instead of committing the
binary bifrost.db.
Idempotent (every insert guarded). No credentials in the repo: council
accounts get a random unusable hash; admin temp passwords are hashed at
run time from ADMIN_SEED_PASSWORD (placeholder printed if unset, change on
first login). Run on deploy as: pnpm db:setup:production.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Mobile: a hamburger nav with a dropdown, and ≤767/720px breakpoints
across pages that collapse multi-column grids to one column and cut the
112px desktop side padding down for phones; admin gets a phone pass too.
- Readability: bump the type-scale tokens and the small hardcoded sizes
across user-facing pages (roadmap route excepted — already enlarged).
- Pulse votes now sit in a warm terracotta-tinted panel so they stand out.
- Header: 50% larger Fenja AI logo, the dot vertically centred to it, and a
rebalanced "Project Bifrost" lockup (smaller, matched cap heights).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Admin can now upload a png/jpg event photo (SPEC §8 exception added):
- new image-upload admin field kind with live preview, uploading via
POST /api/admin/upload (fenja-only, type + 5MB validation);
- files stored under data/uploads (gitignored, BIFROST_UPLOAD_DIR
overridable) and served by GET /uploads/[file] with a traversal guard.
Reworks the /pulse event card: the greeting moved inside a taller box, the
"next gathering" label sits above the date + title, and the photo renders
as a top-right background that blends into the indigo via gradient masks.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds three things to the /roadmap horizontal route:
- a scroll-proximity focus effect (centre milestone scales/brightens,
edges recede) so the track feels alive as you move it;
- eased, accumulating wheel/trackpad scrolling instead of instant jumps;
- a trailing tail past the last milestone (opt-in tailLength) so the line
keeps going and the final item can scroll toward the centre.
Also enlarges the milestone card text for readability.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The pulse close label rendered only the weekday (e.g. "Closes TUESDAY"),
which is ambiguous for pulses closing more than a week out. Show the day
and month instead (e.g. "Closes 23 JUNE") on both the /pulse page and the
dispatch detail poll footer.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Lets a fenja admin edit a member's email in the People resource (the
field was read-only). Email is required, format- and uniqueness-checked,
and normalised to lowercase on save; collisions surface as a form error
via the new updateUserEmail() helper.
Also folds ø/æ/å in slugifyName so Danish names produce clean member
slugs (soren-friis, not s-ren-friis) — NFKD leaves those letters intact.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds a fifth roadmap status, `planned`, for items that are committed and
scheduled but not yet started — sitting between `in_beta` and `exploring`
in the progression. Rendered with the design system's indigo pigment
(#5a6d83) on the route, carousel, legend, and admin pill.
Migration 0008 widens the status CHECK constraint via a table rebuild
(SQLite can't alter it in place), preserving rows and attributions.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Create Invitation flow rendered "/invite?t=…" instead of
"https://host/invite?t=…" because the origin was gated on an unset
PUBLIC_ORIGIN env var.
Solution: OpContext now carries `origin` (always set by the route
handler from Astro.url.origin), and invitations.ts builds the magic
link from it. No env vars required.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1. Markdown preview in the admin edit panel now re-renders from the
textarea's current value on every toggle (dynamic-imports marked on
the client). Previously the panel showed the server-rendered seed
value forever, so new dispatches always previewed empty.
2. Pulse sub-form drops the opens_at field (opens on dispatch publish
automatically) and changes closes_at to a date input — the chosen
day is treated as end-of-day in the DB.
3. /dispatches/[slug] reading width widened 50% (720 → 1080px).
4. Roadmap display_order cascades on insert / update / delete:
inserting at N bumps N..end up by 1, deleting N pulls N+1..end
down by 1, moving from A to B shifts the intermediate range by 1
in the appropriate direction. Order stays dense — no gaps, no
collisions. All three transitions run in a transaction.
5. /roadmap always anchors at scrollLeft=0 on mount so the first
milestone aligns with the content-column left edge. Previously
the page jumped to the last-shipping milestone, which felt random
once items past the viewport landed.
6. Events admin list shows the actual date (fmtDateTime) instead of
"in 3 days" — easier to scan when planning across months.
7. duration_label is auto-computed from starts_at + ends_at on save
(minutes < 90, hours < 4, "Half day", "Full day", "N days").
The manual field is gone from the admin form; the column on the
member-facing event pages keeps reading the stored value as before.
8. Pulse hero still skips office hours per the existing logic — no
change. Confirmed via the test note's clarification.
9. Pulse "also coming up" strip relabeled to Previous + Upcoming.
Previous = most recent past non-office-hours event. Upcoming =
next non-office-hours event after the hero. Each card now carries
a small terracotta eyebrow with the label.
Typecheck clean, build clean, 147/147 tests pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The first route item now starts where the dispatch banner's left edge
sits (the page's content-max column), instead of 60px from the
viewport edge. Looks intentional now — the route and the dispatch
banner share a vertical anchor.
- computeRouteLayout now accepts optional paddingLeft / paddingRight
that override the symmetric paddingX. Existing call sites and
tests are unchanged.
- RoadmapRoute SSR + client recompute set paddingLeft = max(60,
(vw - 1152) / 2), so on viewports ≤ 1152px nothing moves (degrades
gracefully) and on wider screens the start migrates inward.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Backstage rebuild is complete. The old single-page /admin (with
seven ?tab= sections backed by six tab partials) is gone. /admin
now redirects to the first registered resource (dispatches), and
every entity is served by the shared /admin/[resource] dynamic
route from steps 4–10.
- tests/admin-resources.test.ts: vitest-based verifier that walks
every registered resource and asserts:
- identity fields (key/label/plural/singular/groupKey)
- list.queryFn, action.handler, ops.* members are functions
- column kinds are in the registered set (text/pill/relative-date/
number/tag-list); same for columnsByFilter overrides
- field kinds are in the registered set (11 kinds)
- embed.component is in the registered set (pulse-sub-form)
- resource keys are unique, action keys are unique per resource
- at most one filter is isDefault
- groupKey resolves to a real group
- review-mode resources have at least one action
- ops.create requires a non-null form
87 assertions, integrated into pnpm test, fails CI on any drift.
- src/pages/admin/index.astro: thin redirect to /admin/<first-key>.
- src/pages/admin/preview.astro: deleted (step-4 smoke route).
- src/components/admin/*.astro: deleted (6 old tab partials —
ActivityTab, DispatchesTab, EventsTab, PulsesTab, RoadmapTab,
UserEditTab — all replaced by the resource configs).
Full suite: 147 tests pass (60 prior + 87 verifier). Typecheck
clean. Build clean. Manual smoke shows every /admin/<resource>
URL resolves through the dynamic route; old /admin?tab=… references
exist only in deleted files.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Last resource lands. /admin/activity tails the activity table —
votes, RSVPs, office-hour bookings, roadmap ships, pulse opens —
with last-7-days / last-30-days filters. Pure read view: no form,
no summary, no ops.
src/admin/components/ResourceListView.astro: rows fall back to <div>
when the resource has no panel pathway (form: null AND no summary).
Activity rows aren't clickable now — previously they'd dirty the URL
with a ?edit= that resolved to nothing.
The registry is complete: 7 resources across 3 groups, matching the
sidebar layout described in the spec.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three more resources land. /admin/users replaces the old participants
tab, /admin/invitations replaces the old invites tab, /admin/join_requests
replaces the read-only join queue.
- src/admin/resources/users.ts ("People"): single resource for all users,
filter chips swap visible columns (council shows member_number +
focus_tags; pilots/team show role + last_seen_at). Form fields are
conditional — title / pull_quote / focus_tags / cab_joined_date /
member_number render only when role === cab. No ops.create (users
come via invites); deactivateUser is the delete handler.
- src/admin/resources/invitations.ts: form-for-create, summary-for-view.
Create generates a token via generateInviteToken(), stores its hash,
surfaces the magic link as a one-shot ?invite_url= block in the panel.
Revoke is an action (sets expires_at = now); the row stays for audit.
- src/admin/resources/join-requests.ts: form: null, review-mode panel
with the user's summary + approve_as_cab / decline actions.
Plumbing to support the above:
- src/admin/resource-types.ts: new Resource.summary callback (read-only
field pairs for review panels); OpContext.result lets ops surface
ActionResults (e.g. invite-link).
- src/admin/components/ResourceEditPanel.astro: review mode when an
existing item is shown and resource.summary is defined; renders the
?invite_url= block above the summary with a copy-to-clipboard button.
- src/admin/components/ResourceListView.astro: "+ New" suppressed when
ops.create is undefined.
- src/pages/admin/[resource].astro: captures ctx.result and action
handler return values, propagates them via &invite_url=...; routes to
the list view (not the row) when an action removes the item.
- src/lib/db.ts: adds getJoinRequestById, deleteJoinRequest,
getInviteById.
Deviation from the original delta: no approve_as_pilot action and no
invite-link result on join-request approval. The existing
join_requests schema only stores user_id — requests come from
already-authenticated pilots asking for a CAB upgrade, not from
strangers needing an invite. The schema change for stranger sign-ups
is left for a future follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Backstage rebuild's first three resource configs. /admin/dispatches,
/admin/roadmap, and /admin/events now resolve through the dynamic route
with full list views, edit panels, and the publish/archive actions.
- src/admin/resources/dispatches.ts — kind/status/author/excerpt/body
fields, embedded pulse sub-form (pulse_question + multi-text options +
opens/closes datetimes), publish/archive actions, notifyCount on
drafts so the sidebar lights up terracotta until they ship.
- src/admin/resources/roadmap.ts — title/description/status/target/
display_order/metadata_text plus a multi-select-async for attributed
members. ops.update writes via setRoadmapAttributions() after the
basic save so the pivot table stays in sync.
- src/admin/resources/events.ts — full event fields; ops.create
auto-generates a unique slug from the title when blank.
- src/admin/embeds/PulseSubForm.astro — reads the dispatch's current
pulse via getPulseById(), renders question + options + opens/closes.
Pulses follow their parent dispatch's lifecycle (draft → open on
publish, → closed on archive); no status field of their own.
- src/admin/components/ResourceEditPanel.astro — dispatches on
embed.component, renders PulseSubForm for 'pulse-sub-form'.
- src/admin/resource-types.ts — renamed column .valueOf to .value
(collision with Object.prototype.valueOf was breaking TS structural
matching); OpContext now optionally carries the raw FormData so
resources with sub-forms can read embed fields.
- src/pages/admin/[resource].astro — passes formData into opCtx.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The production route every Backstage resource lives under. Resolves
the resource from the URL segment against the registry, gates on
user.role === 'fenja', and renders the AdminLayout shell with the
ResourceListView + (optionally) ResourceEditPanel.
POST dispatch keyed by _action:
- save: parses formdata per field.kind (multi-text/multi-select-async
use getAll(), number coerces, others coerce to string), validates
via validateForResource, then routes to ops.update(id) when
?edit=<id> is set or ops.create() when ?new=1. Redirects with
?msg=saved | ?msg=created. On failure, re-renders the panel with
errors + the submitted values.
- delete: calls ops.delete(id), redirects with ?msg=deleted.
- <action.key>: looks up the action in resource.actions and runs its
handler, redirects with ?msg=action_<key>.
404s when the resource key isn't in the registry — most keys won't
resolve until steps 8-10 land. A small .bs-flash banner above the
list surfaces the ?msg= text (or the error message after a failed
save).
Old /admin (?tab=...) continues to work alongside.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Right-slide panel that renders a resource's edit form. Driven by the
URL: ?new=1 opens a fresh form, ?edit=<id> hydrates with the current
item. POSTs back to the same URL with _action (save | delete | <action
key>); the route handler in step 7 dispatches.
- FieldRenderer.astro: dispatches on field.kind, wraps each field with
label + helper text + error state.
- fields/*.astro: one component per kind — Text, Textarea, Markdown
(with Write/Preview toggle), Select, SelectAsync, MultiSelectAsync,
MultiText (with add/remove), Date, Datetime, Number, Readonly.
- ResourceEditPanel.astro: header (title + close X), scrollable body,
sticky footer (save + per-resource secondary actions + destructive
delete when ops.delete is defined and item exists). Scrim closes on
click, Esc, or the close link. Confirm-before-submit honours
action.confirmText. Embedded sub-form sections render a placeholder
until step 8 wires the pulse renderer.
- admin.css: panel chrome + scrim + slide-in keyframes, full field
styling for every kind, mobile full-screen modal collapse.
- preview.astro: exercises every field kind so the panel can be
eyeballed in a logged-in session. Try /admin/preview?new=1 and
/admin/preview?edit=<id>.
Autosave deferred to Phase 2 per the approved deltas.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The shared list-rendering component every resource will use. Reads
URL state (?filter, ?q, ?page) and derives:
- active filter (with isDefault fallback)
- active column set (columnsByFilter[filterKey] override → columns)
- filtered + searched + sorted + paginated row set
Rows are full anchor elements pointing at ?edit=<id> so the table
is fully keyboard-navigable and works without JS. The "+ New" button
is suppressed when resource.form is null (activity, join_requests).
- ResourceListView.astro: page header (eyebrow + serif h1 + optional
description + new-item button), toolbar (search form + filter
chips), grid table with --bs-grid-cols set from column widths,
pagination, mobile card collapse.
- ListCell.astro: discriminated render for text / pill / relative-date
/ number / tag-list columns.
- admin.css: list-view styles plus the full pill palette (decision,
update, note, bts, published, draft, archived, open, closed,
pending, accepted, expired, approved, declined, shipping, in-beta,
exploring, considering, active, departed, pilot, cab, fenja).
- preview.astro: inline sample dispatches resource so the list view
renders against real DB rows. Step 8 moves this to its production
config; this inline copy disappears with the preview route in
step 11.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two-pane Backstage chrome: sticky topbar with the wordmark + " /
Backstage" lockup and a "Back to the portal" link, plus a left
sidebar that walks the resource registry and renders grouped
links with active-state and count badges.
- src/admin/components/AdminLayout.astro — the shell. Pre-resolves
list-counts and notify-counts per resource so the sidebar can
render badges without async work in markup. Renders an empty
state until resources land.
- src/admin/resources/index.ts — empty registry stub. Three groups
declared (publishing, council, system); resources populated in
steps 8–10.
- src/admin/admin.css — Backstage tokens (--admin-sidebar-bg,
--admin-active-accent, etc.) and the shell styles (bs-topbar,
bs-sidebar, bs-resource, bs-count). Mobile collapses the sidebar
above the main pane.
- src/pages/admin/preview.astro — temporary smoke-test route at
/admin/preview. Deleted in step 11 when the new admin replaces
the old one.
Old /admin (?tab=…) is untouched and continues to work.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Establishes the load-bearing type surface for the Backstage rebuild:
- src/admin/resource-types.ts — discriminated unions for Field, Column,
Filter, Action, plus the top-level Resource and ResourceGroup. Strict
per the maintainability bar: a config object missing a required key
fails TypeScript.
- src/admin/validate.ts — validateForResource() derives validation
from the field definitions (required, maxLength, multi-text min/max,
number bounds, date parse, visibleWhen-aware).
- tests/admin-validate.test.ts — 8 cases locking the validator API:
required, maxLength, visibleWhen skip & reveal, multi-text bounds,
number bounds, all-valid, form-null short-circuit.
No consumers yet. Next commit pulls these into admin.css and the
shared layout components.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Move the ~300-line <style> block from src/pages/admin/index.astro
into a dedicated stylesheet, imported from the page frontmatter.
No rule changes — verbatim extraction so the existing admin UI
continues to render identically.
This is the first commit of the Backstage rebuild: it establishes
the shared admin stylesheet that the resource-pattern components
will consume in subsequent steps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Triple the top padding above the header (32→96px desktop, 24→72px
mobile) so the title sits with more breathing room below the nav.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pair the legend visually with the route by widening the gap above it
and narrowing the gap below.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
