Skip to content

Commit 592408c

Browse files
author
DavidQ
committed
Complete STYLE_07 first by adding clear launch/help text for Open Tool vs Open In Host.
Append the queued STYLE_10 through STYLE_17 roadmap sections without rewriting existing roadmap text. Keep roadmap handling append-only plus execution-backed status updates. PR: BUILD_PR_STYLE_07_LAUNCH_CLARITY_AND_ROADMAP_APPEND_ONLY
1 parent 8778fce commit 592408c

7 files changed

Lines changed: 261 additions & 30 deletions

‎docs/dev/reports/master_roadmap_style_append_block.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
2+
### STYLE_07 — Clarify Tool Launch Labels / Help Text
3+
4+
[ ] Visible explanation added near launch controls
5+
[ ] `Open Tool` explained as: launch the tool directly/standalone
6+
[ ] `Open In Host` explained as: launch the same tool inside a shared host shell/container
7+
[ ] Explanation is clear without requiring external docs
8+
[ ] No inline `style=""`
9+
[ ] No JS-driven layout changes
10+
[ ] Pages are visually testable
11+
12+
### STYLE_10 — Interaction & Flow
13+
14+
[ ] Primary actions accessible via keyboard (Enter)
15+
[ ] Escape cancels or resets where applicable
16+
[ ] Logical tab flow across panels (left → center → right)
17+
[ ] Initial focus set correctly on load
18+
[ ] Focus preserved after actions
19+
[ ] Buttons reflect active/disabled state
20+
[ ] No layout shift during interaction
21+
[ ] Interaction patterns consistent across migrated tools
22+
[ ] No inline `style=""`
23+
[ ] No JS-driven layout changes
24+
[ ] Pages are visually stable and usable
25+
26+
### STYLE_11 — Visual Hierarchy & Readability
27+
28+
[ ] Clear heading hierarchy across tools
29+
[ ] Panel titles consistent in size and spacing
30+
[ ] Section grouping visually obvious
31+
[ ] Spacing rhythm consistent across panels
32+
[ ] Labels and helper text clearly distinguishable
33+
[ ] No visual clutter in dense layouts
34+
[ ] No layout breakage
35+
[ ] Pages remain easy to scan quickly
36+
37+
### STYLE_12 — Component Standardization
38+
39+
[ ] Buttons visually consistent across all tools
40+
[ ] Inputs and textareas standardized
41+
[ ] Labels aligned and consistently styled
42+
[ ] Panels share common structure and spacing
43+
[ ] Debug/readout areas visually consistent
44+
[ ] No one-off component styling remains
45+
[ ] No inline `style=""`
46+
[ ] No layout regressions
47+
48+
### STYLE_13 — Color System & Theming
49+
50+
[ ] Semantic color tokens defined (primary, success, warning, danger)
51+
[ ] Panel background layers consistent
52+
[ ] Text contrast validated for readability
53+
[ ] Accent usage consistent across tools
54+
[ ] No arbitrary color usage in tool pages
55+
[ ] Theme remains cohesive across all entry points
56+
57+
### STYLE_14 — Micro Polish & Feedback
58+
59+
[ ] Buttons have consistent hover states
60+
[ ] Disabled states clearly visible
61+
[ ] Subtle transitions applied (fast, non-distracting)
62+
[ ] No visual jitter during updates
63+
[ ] Feedback (status/messages) does not shift layout
64+
[ ] Interaction feels responsive and immediate
65+
66+
### STYLE_15 — Tool UX Consistency Pass
67+
68+
[ ] All tools follow same layout pattern
69+
[ ] Primary actions consistently placed
70+
[ ] Secondary actions consistently placed
71+
[ ] Panel ordering consistent across tools
72+
[ ] No tool-specific UX deviations without justification
73+
[ ] Navigation and interaction patterns unified
74+
75+
### STYLE_16 — Performance & Render Cleanliness
76+
77+
[ ] No unnecessary layout reflows detected
78+
[ ] No layout thrashing during interaction
79+
[ ] DOM updates efficient and minimal
80+
[ ] No visual lag in tool interaction
81+
[ ] No unnecessary repaint-heavy effects
82+
83+
### STYLE_17 — Final QA & Visual Audit
84+
85+
[ ] No horizontal overflow issues
86+
[ ] No unexpected vertical scroll traps
87+
[ ] Spacing consistent across all pages
88+
[ ] Typography consistent across all pages
89+
[ ] All tools visually aligned with system
90+
[ ] No regressions from earlier STYLE phases
91+
[ ] Pages production-ready

‎docs/dev/reports/style_execution_priority_rule.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Execution priority rule for style lane
2+
3+
- Complete the lowest unfinished STYLE number first.
4+
- Do not skip to STYLE_10+ implementation before STYLE_07 is done.
5+
- Roadmap updates in this PR:
6+
- append STYLE_07 checklist
7+
- append STYLE_10 through STYLE_17 sections
8+
- no deletions
9+
- no rewrites
10+
- status markers only if execution-backed

‎docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md‎

Lines changed: 95 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ This explanation should be kept visible in related UI/help text so launch choice
205205
[.] Keep header behavior compact enough not to crowd tool workspaces.
206206

207207
### E3. Launch clarity
208-
[ ] Add visible explanation near launch controls:
208+
[x] Add visible explanation near launch controls:
209209
- Open Tool = launch the tool directly/standalone
210210
- Open In Host = launch the same tool inside a shared host shell/container
211211

@@ -264,7 +264,7 @@ This explanation should be kept visible in related UI/help text so launch choice
264264
[x] STYLE_04 — Reset `/tools/index.html`.
265265
[x] STYLE_05 — Add `.is-collapsible` shared accordion behavior.
266266
[x] STYLE_06 — Establish shared tool shell and migrate one tool.
267-
[ ] STYLE_07 — Clarify tool launch labels/help text.
267+
[x] STYLE_07 — Clarify tool launch labels/help text.
268268
[.] STYLE_08+ — Continue tool UX migration tool-by-tool.
269269

270270

@@ -322,3 +322,96 @@ This explanation should be kept visible in related UI/help text so launch choice
322322
- `tools/Physics Sandbox/index.html`
323323

324324

325+
326+
327+
### STYLE_07 — Clarify Tool Launch Labels / Help Text
328+
329+
[x] Visible explanation added near launch controls
330+
[x] `Open Tool` explained as: launch the tool directly/standalone
331+
[x] `Open In Host` explained as: launch the same tool inside a shared host shell/container
332+
[x] Explanation is clear without requiring external docs
333+
[x] No inline `style=""`
334+
[x] No JS-driven layout changes
335+
[x] Pages are visually testable
336+
337+
### STYLE_10 — Interaction & Flow
338+
339+
[ ] Primary actions accessible via keyboard (Enter)
340+
[ ] Escape cancels or resets where applicable
341+
[ ] Logical tab flow across panels (left → center → right)
342+
[ ] Initial focus set correctly on load
343+
[ ] Focus preserved after actions
344+
[ ] Buttons reflect active/disabled state
345+
[ ] No layout shift during interaction
346+
[ ] Interaction patterns consistent across migrated tools
347+
[ ] No inline `style=""`
348+
[ ] No JS-driven layout changes
349+
[ ] Pages are visually stable and usable
350+
351+
### STYLE_11 — Visual Hierarchy & Readability
352+
353+
[ ] Clear heading hierarchy across tools
354+
[ ] Panel titles consistent in size and spacing
355+
[ ] Section grouping visually obvious
356+
[ ] Spacing rhythm consistent across panels
357+
[ ] Labels and helper text clearly distinguishable
358+
[ ] No visual clutter in dense layouts
359+
[ ] No layout breakage
360+
[ ] Pages remain easy to scan quickly
361+
362+
### STYLE_12 — Component Standardization
363+
364+
[ ] Buttons visually consistent across all tools
365+
[ ] Inputs and textareas standardized
366+
[ ] Labels aligned and consistently styled
367+
[ ] Panels share common structure and spacing
368+
[ ] Debug/readout areas visually consistent
369+
[ ] No one-off component styling remains
370+
[ ] No inline `style=""`
371+
[ ] No layout regressions
372+
373+
### STYLE_13 — Color System & Theming
374+
375+
[ ] Semantic color tokens defined (primary, success, warning, danger)
376+
[ ] Panel background layers consistent
377+
[ ] Text contrast validated for readability
378+
[ ] Accent usage consistent across tools
379+
[ ] No arbitrary color usage in tool pages
380+
[ ] Theme remains cohesive across all entry points
381+
382+
### STYLE_14 — Micro Polish & Feedback
383+
384+
[ ] Buttons have consistent hover states
385+
[ ] Disabled states clearly visible
386+
[ ] Subtle transitions applied (fast, non-distracting)
387+
[ ] No visual jitter during updates
388+
[ ] Feedback (status/messages) does not shift layout
389+
[ ] Interaction feels responsive and immediate
390+
391+
### STYLE_15 — Tool UX Consistency Pass
392+
393+
[ ] All tools follow same layout pattern
394+
[ ] Primary actions consistently placed
395+
[ ] Secondary actions consistently placed
396+
[ ] Panel ordering consistent across tools
397+
[ ] No tool-specific UX deviations without justification
398+
[ ] Navigation and interaction patterns unified
399+
400+
### STYLE_16 — Performance & Render Cleanliness
401+
402+
[ ] No unnecessary layout reflows detected
403+
[ ] No layout thrashing during interaction
404+
[ ] DOM updates efficient and minimal
405+
[ ] No visual lag in tool interaction
406+
[ ] No unnecessary repaint-heavy effects
407+
408+
### STYLE_17 — Final QA & Visual Audit
409+
410+
[ ] No horizontal overflow issues
411+
[ ] No unexpected vertical scroll traps
412+
[ ] Spacing consistent across all pages
413+
[ ] Typography consistent across all pages
414+
[ ] All tools visually aligned with system
415+
[ ] No regressions from earlier STYLE phases
416+
[ ] Pages production-ready
417+

‎docs/operations/dev/codex_commands.md‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,25 @@ MODEL: GPT-5.4-codex
22
REASONING: high
33

44
COMMAND:
5-
Create BUILD_PR_STYLE_09_TOOL_HEIGHT_AND_VIEWPORT_FIT as one focused, testable PR.
5+
Create BUILD_PR_STYLE_07_LAUNCH_CLARITY_AND_ROADMAP_APPEND_ONLY
66

77
Rules:
8-
- one PR purpose only
9-
- refine the existing shared tool shell only
10-
- no legacy styling as the baseline
11-
- keep CSS Grid for the primary shell
12-
- preserve STYLE_08 adaptive density improvements
13-
- no embedded <style> in HTML
14-
- no inline style=""
15-
- no JS-generated styling
16-
- keep theme under src/engine/theme
17-
- do NOT create or leave staging folders in <project folder>/tmp/
188
- output ONLY the final zip to:
19-
<project folder>/tmp/BUILD_PR_STYLE_09_TOOL_HEIGHT_AND_VIEWPORT_FIT.zip
20-
21-
Roadmap rule:
22-
- Codex updates MASTER_ROADMAP_STYLE.md during execution only
23-
- append STYLE_09 checklist/results only
24-
- do not delete existing text
25-
- do not rewrite existing text
26-
- update completion markers only if execution-backed
9+
<project folder>/tmp/BUILD_PR_STYLE_07_LAUNCH_CLARITY_AND_ROADMAP_APPEND_ONLY.zip
10+
- do NOT create staging folders in <project folder>/tmp
11+
- complete existing unfinished STYLE items before new ones
12+
- lowest unfinished STYLE number first
13+
- do NOT start STYLE_10 implementation work in this PR
14+
- roadmap updates happen during execution only
15+
- roadmap changes are append-only except for execution-backed status markers
16+
- do NOT delete existing roadmap text
17+
- do NOT rewrite existing roadmap text
2718

2819
Required work:
29-
1. Refine the shared tool-shell CSS for better viewport-height fit.
30-
2. Reduce page-level vertical scrolling where practical.
31-
3. Localize scrolling to panels/readouts where needed.
32-
4. Preserve the shared shell structure and adaptive density work from STYLE_08.
33-
5. Validate against the current migrated shell tools.
34-
6. Package only the final zip to the project tmp path above.
20+
1. Implement STYLE_07 launch clarity/help text in the relevant UI.
21+
2. Use exactly this wording:
22+
- Open Tool = launch the tool directly/standalone
23+
- Open In Host = launch the same tool inside a shared host shell/container
24+
3. Append the bundled STYLE_07 and STYLE_10 through STYLE_17 sections to docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md.
25+
4. Mark STYLE_07 completion boxes only if execution-backed by the implemented change.
26+
5. Keep the change narrow, testable, and free of inline/embedded styling.

‎docs/operations/dev/commit_comment.txt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
Improve tool viewport fit on top of the shared CSS Grid shell.
1+
Complete STYLE_07 first by adding clear launch/help text for Open Tool vs Open In Host.
22

3-
Reduce page-level vertical scrolling where practical, localize scrolling to panels when needed, and preserve STYLE_08 adaptive density improvements.
3+
Append the queued STYLE_10 through STYLE_17 roadmap sections without rewriting existing roadmap text.
4+
Keep roadmap handling append-only plus execution-backed status updates.
45

5-
PR: BUILD_PR_STYLE_09_TOOL_HEIGHT_AND_VIEWPORT_FIT
6+
PR: BUILD_PR_STYLE_07_LAUNCH_CLARITY_AND_ROADMAP_APPEND_ONLY

‎docs/pr/BUILD_PR_STYLE_07_LAUNCH_CLARITY_AND_ROADMAP_APPEND_ONLY.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# BUILD_PR_STYLE_07_LAUNCH_CLARITY_AND_ROADMAP_APPEND_ONLY
2+
3+
## Purpose
4+
Complete the lowest unfinished STYLE item first by adding launch clarity/help text for tool launch modes, while also appending the next queued STYLE roadmap sections for future execution.
5+
6+
## Single PR Purpose
7+
Finish STYLE_07 first, without skipping ahead.
8+
9+
## Required Sequence Rule
10+
- Complete existing unfinished STYLE items before starting newer STYLE items.
11+
- Lowest unfinished STYLE number wins.
12+
- Do not start STYLE_10+ work until STYLE_07 is completed and roadmap status is updated from execution-backed results.
13+
14+
## STYLE_07 Scope
15+
Add visible launch clarity/help text anywhere launch choices are presented:
16+
17+
- Open Tool = launch the tool directly/standalone
18+
- Open In Host = launch the same tool inside a shared host shell/container
19+
20+
## STYLE_07 Rules
21+
1. Keep this focused on launch clarity/help text only.
22+
2. No redesign of the tool shell.
23+
3. No new styling systems beyond what is needed to present the clarification cleanly.
24+
4. No embedded `<style>` blocks.
25+
5. No inline `style=""`.
26+
6. No JS-generated styling.
27+
7. Use the shared style system where needed.
28+
29+
## Roadmap Work In This PR
30+
Append the queued STYLE_10 through STYLE_17 sections to `docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md` exactly as bundled.
31+
Do not delete existing roadmap text.
32+
Do not rewrite existing roadmap text.
33+
Only append the new sections and any execution-backed status markers earned by STYLE_07.
34+
35+
## Acceptance
36+
- STYLE_07 launch clarity/help text is visible in the relevant UI
37+
- wording matches the approved definitions exactly
38+
- roadmap is append-only for the new queued STYLE sections
39+
- no skipping ahead to STYLE_10 implementation work
40+
- change is testable

‎tools/renderToolsIndex.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ function renderToolCard(tool) {
2525
<a class="tools-platform-card__action" href="${escapeHtml(tool.entryPoint)}">Open Tool</a>
2626
<a class="tools-platform-card__action tools-platform-card__action--secondary" href="${escapeHtml(hostHref)}">Open In Host</a>
2727
</div>
28+
<p class="tools-platform-card__launch-help">
29+
Open Tool = launch the tool directly/standalone<br />
30+
Open In Host = launch the same tool inside a shared host shell/container
31+
</p>
2832
${sampleLinks}
2933
</div>
3034
`;

0 commit comments

Comments
 (0)