Polish the docs: consistent screenshots + one site-wide assistant#5
Merged
Conversation
The docs screenshots were captured per element, so a couple of them came out far narrower than the tab views: the customize panel was ~280px wide and a single expanded member card ~350px, against ~1100px for the full tab views. Displayed at the column width they were upscaled 1.4–2.7×, which made them look blurry and oversized next to the crisp, downscaled tab screenshots. Capture those two states wide instead: the customize panel as a full-viewport shot (showing the panel overlaid on the app, which also reads better as documentation), and the expanded baselines as the full Team view rather than a lone card. Every screenshot is now ~2200–2560px wide and downscales into the column uniformly. As a backstop, the docs Figure now reads each image's natural width on load and caps its display width at the captured CSS size (screenshots are taken at 2× for retina), centering it. That guarantees no screenshot is ever upscaled past its real resolution, whatever its source element, while wide tab views still fill the column.
Puts the same "Ask The Joy Matrix" chat from the app onto the docs site so a reader can ask questions while browsing. The in-app assistant wires up tools that read and mutate a live project, but the docs page has no project — so this is a read-only variant: same partner key, system prompt, and domain skill, but no tools. A short docs-context note appended to the system prompt tells the assistant it's on the documentation site (no project to act on) so it answers conceptually and points people back to the app to try it. It's a standalone component rather than a reuse of JoyMatrixChat on purpose: JoyMatrixChat imports the tool builder, which imports App.jsx, so reusing it would pull the whole application into the docs bundle. DocsChat depends only on the Talk2View SDK, the system prompt, and the skill, keeping the docs entry lean (the SDK itself is already shared between the two entries).
Moves the project model out of App.jsx into a new src/state.js: the state shape (DEMO_STATE / EMPTY_STATE), forward-only schema migration, the assignment algorithm (quadrantOf, the per-quadrant weights, capacity budget, and computeAssignments), localStorage load/save, and the JSON import/export envelope. App.jsx now imports these instead of defining them. The motivation is decoupling. tools.js — the Talk2View chat's tool factory — previously imported buildExportEnvelope and quadrantOf from App.jsx, which meant anything pulling in the chat (e.g. a second entry point) dragged the whole application along with it. tools.js now imports from state.js, so the chat depends only on the model, not the UI. It also puts all the localStorage IO in one place behind loadState/saveState, with everything else operating on plain state objects. Pure refactor: no behaviour change. The app still boots, assigns, and persists exactly as before; this just sets up the next commit, which points the documentation page at the same chat the app uses.
Replaces the docs page's bespoke, read-only chat with the real JoyMatrixChat —
one assistant across the whole site. It's backed by the shared localStorage
project, so on the docs page a reader can ask conceptual questions ("what do the
four quadrants mean?") and questions about their own work ("who's at burnout
risk?", "add a task"), and any edits or theme changes persist and show up when
they return to the app.
This is only possible because the previous commit moved the model into
src/state.js: mounting the full chat (with its tools) no longer drags App.jsx
into the docs bundle, which stays ~31 kB. DocsChat is now a thin wrapper that
supplies JoyMatrixChat the same props the app does, with two differences — it
reads the existing project on mount but doesn't persist unless the chat actually
changes something (so merely opening the docs never writes a project), and
switch_tab is a no-op because the docs page has no tabs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #4. Two improvements to the documentation page, plus a refactor that enables the second.
Summary
Figurecaps every image at its captured CSS size so nothing is ever upscaled regardless of source.JoyMatrixChatas the app, backed by the sharedlocalStorageproject. A reader can ask conceptual questions and questions about their own project ("who's at burnout risk?", "add a task"), with edits and theme changes persisting back to the app. It reads the project on mount but only writes if the chat changes something (opening the docs never creates a project);switch_tabis a no-op since the docs page has no tabs.localStorageIO, JSON import/export) moved out ofApp.jsxinto a new React-freesrc/state.js.tools.jsnow imports fromstate.jsinstead ofApp.jsx, so mounting the full chat on the docs page no longer drags the app into the docs bundle (it stays ~31 kB). Pure refactor, no behavior change.Commits
b04a259Capture documentation screenshots at a consistent width33071b8Add the Talk2View assistant to the documentation page781314eExtract the project model into a shared, React-free moduled53a069Use the same assistant on the docs page as the app(Commits 2 and 4 show the evolution: a standalone read-only docs chat, then the unified one once the model was decoupled.)
Test plan
npm run build— both entries build; docs bundle stays ~31 kB (app not pulled into docs)npm run screenshotsruns green; customize/team-baselines now ~2200–2560px wide/docs/screenshots render uniformly (no upscaling); customize shot is wide and crisp/docs/and registers skills + tools (the app'sJoyMatrixChat)/docs/