Skip to content

feat: Site chrome: section nav, interim logo, branch chip, AI trigger, minimal docs - #269

Draft
Yona-Appletree wants to merge 13 commits into
mainfrom
claude/top-bar-ux-ace649
Draft

feat: Site chrome: section nav, interim logo, branch chip, AI trigger, minimal docs#269
Yona-Appletree wants to merge 13 commits into
mainfrom
claude/top-bar-ux-ace649

Conversation

@Yona-Appletree

@Yona-Appletree Yona-Appletree commented Aug 2, 2026

Copy link
Copy Markdown
Member

Plan: lp2025/2026-08-01-2219-top-bar-site-chrome
Path: ~/.photomancer/planning/lp2025/2026-08-01-2219-top-bar-site-chrome/plan.md

Production implementation of the converged top-bar UX spike (the spike itself is the first three commits — spikes/top-bar/index.html, the design record).

One shared chrome across the app: Studio / Boards / Docs section tabs, inert brand lockup (interim WS2812-pixel LogoMark; home = the Studio tab), version chip showing the git branch on dev builds, violet Bot AI-settings trigger, tools overflow menu, and a minimal in-app docs page over docs/user-guide/.

Status: P1 (SiteChrome) ✅ · P2 (version chip + build.rs) ✅ · P3 (AI trigger) ✅ · P4 docs page ⏳ · P5 standalone pages under chrome · P6 stories/favicon/cleanup → FINAL visual gate

Resume notes: read plan.md + phase files; _DONE.md doesn't exist yet. PR stays draft until the final visual gate passes.

🤖 Generated with Claude Code

Yona-Appletree and others added 6 commits August 1, 2026 17:34
…es, branch chip, AI trigger

Explores the top bar as real site navigation (Studio / Boards / Docs
in-app, one shared chrome), with the brand lockup inert — home is the
Studio nav item, the logo is reserved for a future landing page.
Sections: logo marks (play-in-circuit A-E + inverted play-contains
F-H knockouts), bar concepts (0=today baseline, tabs, pills,
breadcrumb, mark-menu), one-chrome-across-sections minis (incl. the
interactive-docs vision with a live clock node), version/branch chip
states, AI-settings trigger variants.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… bot AI pill

Gate feedback applied: E's WS2812 pixel moves inside the play triangle
(I = package+lens, J = +corner pads); bar concept A (section tabs) is
the keeper with a 390px narrow demo; the AI trigger becomes the labeled
pill with the bot icon. Losing marks and structures shrink to rejected
strips with reasons.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…hout label

E ships as the interim mark until the human-designed logo (in
progress) lands; I/J join the rejected strip. The AI trigger drops
its label — bot icon in the violet chip is enough at every width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…logo, tools menu

Studio/Boards/Docs nav tabs replace the wordmark-as-home-link; the brand
lockup (new LogoMark, the interim WS2812-pixel mark) is inert by design —
home is the Studio tab, which inherits ShellLogo's detach-dispatch
behavior. Mapping/board editors move to an overflow menu.

Plan: 2026-08-01-2219-top-bar-site-chrome (P1)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
One chip replaces the 'dev build' text + separate info button; the chip
itself opens the build-info popover. build.rs bakes branch/sha/dirty in
(best-effort, never fails the build); a fetched version.json still wins,
so deploys keep showing the version tag. Long branch names ellipsize
from the left; dirty trees get the warning family and a ± marker.

Plan: 2026-08-01-2219-top-bar-site-chrome (P2)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The gear promised app-wide settings but only held agent config. New
StudioIconName::AgentSettings (Bot) in the status-bound violet family;
label/title 'AI settings'. The gear stays in the registry, reserved for
a future real studio-settings surface.

Plan: 2026-08-01-2219-top-bar-site-chrome (P3)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@Yona-Appletree Yona-Appletree changed the title spike(top-bar): site chrome & branding playground feat: Site chrome: section nav, interim logo, branch chip, AI trigger, minimal docs Aug 2, 2026
@github-actions

github-actions Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

CI refreshed the story baselines on this branch

The validate-stories job detected drift and committed the fresh set: 15 changed, 18 added
in 1bb12a7.

Review every PNG in the PR's Files changed view (swipe / onion-skin).
Your local branch is now behind — git pull before pushing again.

Story Before After
studio__board-diagram__catalog-page-macos__lg.png studio__board-diagram__catalog-page-macos__lg.png@e048c70ed0 studio__board-diagram__catalog-page-macos__lg.png@1bb12a75af
studio__board-diagram__catalog-page-macos__md.png studio__board-diagram__catalog-page-macos__md.png@e048c70ed0 studio__board-diagram__catalog-page-macos__md.png@1bb12a75af
studio__board-diagram__catalog-page-macos__sm.png studio__board-diagram__catalog-page-macos__sm.png@e048c70ed0 studio__board-diagram__catalog-page-macos__sm.png@1bb12a75af
studio__board-diagram__detail-page-dom-z-102__lg.png studio__board-diagram__detail-page-dom-z-102__lg.png@e048c70ed0 studio__board-diagram__detail-page-dom-z-102__lg.png@1bb12a75af
studio__board-diagram__detail-page-dom-z-102__md.png studio__board-diagram__detail-page-dom-z-102__md.png@e048c70ed0 studio__board-diagram__detail-page-dom-z-102__md.png@1bb12a75af
studio__board-diagram__detail-page-dom-z-102__sm.png studio__board-diagram__detail-page-dom-z-102__sm.png@e048c70ed0 studio__board-diagram__detail-page-dom-z-102__sm.png@1bb12a75af
studio__board-diagram__firmware-detail-exact-fit__lg.png studio__board-diagram__firmware-detail-exact-fit__lg.png@e048c70ed0 studio__board-diagram__firmware-detail-exact-fit__lg.png@1bb12a75af
studio__board-diagram__firmware-detail-exact-fit__md.png studio__board-diagram__firmware-detail-exact-fit__md.png@e048c70ed0 studio__board-diagram__firmware-detail-exact-fit__md.png@1bb12a75af
25 more file(s)
  • studio__board-diagram__firmware-detail-exact-fit__sm.png (changed)
  • studio__board-diagram__firmware-detail-headroom-and-gaps__lg.png (changed)
  • studio__board-diagram__firmware-detail-headroom-and-gaps__md.png (changed)
  • studio__board-diagram__firmware-detail-headroom-and-gaps__sm.png (changed)
  • studio__board-diagram__firmware-detail-no-build__lg.png (changed)
  • studio__board-diagram__firmware-detail-no-build__md.png (changed)
  • studio__board-diagram__firmware-detail-no-build__sm.png (changed)
  • studio__layout__site-chrome__boards-active__lg.png (added)
  • studio__layout__site-chrome__boards-active__md.png (added)
  • studio__layout__site-chrome__boards-active__sm.png (added)
  • studio__layout__site-chrome__docs-active__lg.png (added)
  • studio__layout__site-chrome__docs-active__md.png (added)
  • studio__layout__site-chrome__docs-active__sm.png (added)
  • studio__layout__site-chrome__logo-mark-sizes__lg.png (added)
  • studio__layout__site-chrome__logo-mark-sizes__md.png (added)
  • studio__layout__site-chrome__logo-mark-sizes__sm.png (added)
  • studio__layout__site-chrome__narrow__lg.png (added)
  • studio__layout__site-chrome__narrow__md.png (added)
  • studio__layout__site-chrome__narrow__sm.png (added)
  • studio__layout__site-chrome__studio-active__lg.png (added)
  • studio__layout__site-chrome__studio-active__md.png (added)
  • studio__layout__site-chrome__studio-active__sm.png (added)
  • studio__layout__version-badge__chip-states__lg.png (added)
  • studio__layout__version-badge__chip-states__md.png (added)
  • studio__layout__version-badge__chip-states__sm.png (added)

Yona-Appletree and others added 6 commits August 2, 2026 01:15
StudioRoute::Docs + a standalone docs page (compiled-in manifest,
sidebar + article). MarkdownText grows a docs mode: heading levels now
survive parsing and MarkdownDocs renders them as real h1-h3 styles —
same parser and untrusted-input hardening, chat rendering unchanged.
In-section article switches ride a hashchange listener (no reload);
leaving the section hard-reloads like every standalone page.

Plan: 2026-08-01-2219-top-bar-site-chrome (P4)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The chrome wraps both standalone early-returns at the web_app route
boundary (lpa-boards stays chrome-free and platform-blind). Standalone
chrome installs a leave-section hashchange reload — those pages have no
studio route listener — via addEventListener so the docs page's own
in-section listener coexists; installs are route-guarded so story-book
mounts never capture the book's navigation. Boards drops its top padding
(rhythm now comes from the chrome).

ADR: docs/adr/2026-08-02-site-chrome-in-app-sections.md
Plan: 2026-08-01-2219-top-bar-site-chrome (P5)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
site_chrome_stories cover the three sections, a 390px narrow frame, and
the logo mark sizes; a pure VersionChipPreview makes the four chip
states capturable (the live chip's state is fetch/compile-time-driven).
The interim mark ships as favicon.svg (index.html link + deploy entry).
user-guide README now points authors at the in-app #/docs render target.

Plan: 2026-08-01-2219-top-bar-site-chrome (P6)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
# Conflicts:
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__catalog-page-macos__lg.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__catalog-page-macos__md.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__catalog-page-macos__sm.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__detail-page-dom-z-102__lg.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__detail-page-dom-z-102__md.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__detail-page-dom-z-102__sm.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-exact-fit__lg.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-exact-fit__md.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-exact-fit__sm.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-headroom-and-gaps__lg.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-headroom-and-gaps__md.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-headroom-and-gaps__sm.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-no-build__lg.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-no-build__md.png
#	lp-app/lpa-studio-web/story-images/studio__board-diagram__firmware-detail-no-build__sm.png
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant