Skip to content

Redesign the web interface around the sediment core - #8

Merged
gothicscientist merged 5 commits into
mainfrom
claude/project-thread-60ubx3
Nov 3, 2026
Merged

Redesign the web interface around the sediment core#8
gothicscientist merged 5 commits into
mainfrom
claude/project-thread-60ubx3

Conversation

@gothicscientist

@gothicscientist gothicscientist commented Nov 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Requested by Bharat · project thread

What changed

A new visual system and app shell for apps/web, built on top of the PR #6 fixes. The direction comes from the product itself: strata are layers of sediment, and the reference library is a stack of archaeological periods.

Visual system

  • Cool field-stone page, white panels for working surfaces (figures, tables, forms), slate ink instead of black.
  • Malachite is the colour for interaction and formal results. Ochre is for exploratory results. Formal tags are solid and exploratory tags are dashed, so they differ in shape as well as colour.
  • A sediment ramp (light and young at the top, dark and old at the bottom) is used only for archaeological periods, and it stays the same on every screen.
  • Type stays EB Garamond throughout, with IBM Plex Mono for code. The type scale is re-tuned for the new layout.

Motion (second commit, at Bharat's request). Everything is CSS and is switched off under prefers-reduced-motion.

  • The headline words drop in and settle. The stratum rule under each page heading draws itself in.
  • Landing core: grains drift down through the youngest layer. A hovered layer slides out of the core like a pulled sample chip. Tapping the surface of the core shakes it.
  • The workflow line draws across when it scrolls into view, and the step numbers pop in one by one.
  • Buttons are chunky and sink when pressed. The logo's layers ripple on hover. The rail's active marker pops.
  • Loading shows layers stacking up. Ticked requirements, the chosen method's tag and the active period chip pop.
  • A "Nothing at this depth" 404 page and a hand-dug footer signature.

Navigation: a dark rail grouped by task (Explore, Analyse, Ask, Reference). Upload, Compose and Workspace are numbered because they form a sequence. Server status (API, reference build, qpAdm, assistant) shows at the foot of the rail. On small screens the rail opens as a menu sheet.

Landing: the hero shows the real reference library as a drilled core. There is one layer per period, each with a lithology pattern, and thickness grows with the population count. Every layer links to the library filtered to that period. Below it: the four-step workflow, each step linking into the composer with its method already chosen, then the PCA space, exploratory and formal side by side, and the worked examples.

Library: period filter chips in the sediment colours, a period swatch on each table row, and repeated publication labels ("AADR; AADR; AADR") collapsed to one.

Compose: methods are tiles grouped by kind. A sticky run panel shows a readiness checklist and the Run button. ?method= preselects a method. Behaviour fix: choosing a G25 dataset now also selects its coordinate space. Before, the composer kept the PCA space and the API rejected the analysis.

Results and the rest: qpAdm results open with a verdict panel. Inputs and provenance are shown as ruled key/value panels. The assistant has question bubbles and a sticky question box. Uploading a raw file is now the first option, with G25 paste second.

Screenshots

These come from a local run against the committed AADR v66.p1 reference build. docs/screenshots/* is regenerated, and pre-redesign shots are kept in docs/screenshots/before-redesign/.

Before After
before after
before after

Testing

  • pnpm typecheck is clean and pnpm test passes 51 of 51.
  • pnpm test:e2e smoke test passed: every page, the skip link, and a G25 upload through to the QC report.
  • UPLOAD_DEMO=1 pnpm screenshots ran the upload → workspace → analysis flow. I also captured a hovered core layer with Playwright to check the pull-out works.
  • qpAdm was not installed in this run, so the formal method tiles show as unavailable in the screenshots.

Not in this PR

  • The no-AASI-proxy notice still appears on every qpAdm result, including the Denisova examples. Deciding when it applies is a science question, not a design one.

🤖 Generated with Claude Code

https://claude.ai/code/session_01HEuHS4owTqCYiz6PtRUaCN

@claude
web: redesign the interface around the sediment core
da30d91 
A new visual system and app shell for the Strata web frontend:

- Field-stone page with white working panels, slate ink, malachite for
  interaction and formal results, ochre for exploratory ones. A sediment
  ramp is reserved for archaeological periods on every screen.
- Archivo (variable width, expanded at display sizes) for the interface;
  Source Serif 4 for reading text. EB Garamond is dropped.
- A dark navigation rail grouped by task (Explore, Analyse, Ask,
  Reference) with the upload, compose, workspace sequence numbered and
  server status read out at the foot; a menu sheet on small screens.
- Landing: the reference library drawn as a drilled core, one layer per
  period with lithology patterns, thickness by population count, each
  layer linking to the filtered library. Then the four-step workflow,
  the PCA space, exploratory vs formal side by side, worked examples.
- Library: period filter chips in the sediment colours, period swatches
  in the table, duplicate publication labels collapsed.
- Compose: method tiles grouped by kind, a sticky run panel with a
  readiness checklist, ?method= preselects a method, and choosing a G25
  dataset now also chooses its coordinate space.
- qpAdm verdict panel, ruled key-value panels for inputs and provenance,
  assistant conversation with a sticky question box.
- Screenshots in docs/screenshots regenerated from a local run against
  the real reference build; four pre-redesign shots kept for comparison.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HEuHS4owTqCYiz6PtRUaCN
@gothicscientist gothicscientist self-assigned this Nov 2, 2026
claude added 3 commits November 2, 2026 04:42
@claude
web: back to EB Garamond, and give the interface some play
77843a4 
- Type returns to a single EB Garamond family (Plex Mono for code), with
  the type scale and arbitrary sizes re-tuned for its smaller x-height.
  Archivo and Source Serif 4 are removed.
- Headline words drop in and settle; the stratum rule under each page
  heading draws itself in on every page.
- Landing core: grains drift down through the youngest layer, a hovered
  layer slides out like a pulled sample chip, and tapping the core's
  surface shakes it and lets the layers re-deposit.
- Workflow line draws across when it scrolls into view and the step
  numbers pop in turn; steps tilt and turn green on hover.
- Chunky pressable buttons that sink when clicked; logo layers ripple on
  hover; the rail's active marker pops and items nudge on hover.
- Loading shows layers stacking up; ticked requirements, the chosen
  method's tag and active period chips pop.
- A 'Nothing at this depth' 404 and a hand-dug footer signature.
- All motion is CSS and is switched off under prefers-reduced-motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HEuHS4owTqCYiz6PtRUaCN
@claude
web: cut the copy down to what people need
4b5ae64 
- Rail drops the per-item hint lines; footer is a single line of links.
- Page ledes shortened to a few words or removed; landing copy, workflow
  steps, the two-kinds comparison and example rows trimmed hard.
- Caveats fold to their title (one click opens the full text), so the
  scientific warnings stay available without filling the page.
- Example and analysis pages lead with the result; background, inputs,
  parameters and provenance move into collapsed sections.
- Figure and table captions, form hints and method descriptions cut to
  one short line; a duplicated qpAdm footnote is removed.
- Smoke test now looks for the new landing heading.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HEuHS4owTqCYiz6PtRUaCN
@claude
Merge main into the redesign to clear its conflicts
1473d22 
PR #8 conflicted with main after PR #7 merged, so GitHub could not
build or test the merged result. Conflicts in SiteFooter and
AnalysisDocument are resolved in favour of the redesign's markup, with
main's two changes carried across:

- key/value values wrap anywhere instead of overflowing (the .kv grid
  already uses minmax(0, 1fr));
- the rail's Assistant readout says "bring your own API key" when the
  server has no provider, matching visitor-supplied keys.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HEuHS4j3Gtr3f1zAaXvqFB
@gothicscientist gothicscientist mentioned this pull request Nov 3, 2026
Merged
@gothicscientist
Merge pull request #9 from gothicscientist/claude/project-thread-6yzr20
7ce2202 
Clear the redesign PR's merge conflicts with main
@gothicscientist
gothicscientist merged commit 86b37f0 into main Nov 3, 2026
3 checks passed
This was referenced Nov 3, 2026
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@gothicscientist gothicscientist

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@gothicscientist @claude