Docs

Phase B Handoff — Business Themes Mockups & Tab Controls

STATUS: Phase B & C COMPLETE (kept as a historical record). The mockups (main-view.html + properties.html), startup auto-open, and tab-bar controls all shipped; see business-theme-and-mockups.md for the as-built details and the Phase B gotchas (per-instance dock locations, the url-aware open guard, relative mockup fonts).

Below is the original paste-ready prompt used to resume the work in a fresh session. Phase A (the two UI themes) is done, committed, and pushed.


Resume the Tranquil “business themes” work — Phase B. Phase A (the two UI themes) is done, committed, and pushed.

Read first: docs/tranquil/business-theme-and-mockups.md in the tranquil-client repo — it’s the canonical spec (design tokens, layout geometry, verbatim screenshot content, component list, alignment strategy). Also see memory project_business_themes.

Context / state:

  • Branch theme/business in tranquil-client (and in tranquil-theme-icons); new repos tranquil-business-light / -dark on main. All pushed to tranquillabs (private).
  • Phase A shipped: both themes (reference token palette, shared partials via @{theme-scope}, only colors.less differs), tree-view restyle, Inter bundled via atom:// (CSP blocks data: fonts), -webkit-font-smoothing: auto for 1× displays, icon colors added to tranquil-theme-icons.

Do Phase B (per the doc):

  1. tranquil-automations/mockups/: main-view.html (left note-list pane + editor pane, verbatim screenshot content + a component showcase of every editor element) and properties.html (properties panel). Shared mockup.css on the reference tokens + bundled Inter/IBM Plex Mono. No JS framework. A webview’s document base is the mockup folder, so a plain relative @font-face works here (unlike the theme).
  2. Auto-open both on startup from tranquil-automations activate() via the tranquil-browser file opener (main-view → center, properties → right dock); guard against duplicate-open on reload; gate behind a config flag. Risk to verify: the browser model may restrict getAllowedLocations() to center — confirm the right-dock open works.
  3. Custom right-aligned tab-bar controls injected into center + right panes (observePanes → filter by getContainer().getLocation() → append into .tab-bar, margin-left:auto + high flex order). Visual mimics only; do not modify the tabs package.

Constraints: source ~/.nvm/nvm.sh && nvm use before yarn/node; never modify Pulsar core / third-party packages; no Claude co-author on commits; don’t commit/push until I ask. Then Phase C: update the doc’s phase status.


Loose ends noted at end of Phase A

  • tranquil-dev.code-workspace (adds the two new theme folders) lives loose in the parent Repos/ dir and is not tracked by any repo — updated on disk only.
  • The new packages aren’t yet in any CI/build package list — not blocking local dev (they load via dev symlinks + link:../), but relevant when the mockups/packaging land.