chore(design): organize and align design system - #6
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughChangesThe PR defines a UI/UX workflow, synchronizes shared and page-specific design specifications, and adds Dashboard, Session, and Todos prototypes with shared and page-specific interaction logic. Older prototype artifacts are removed. ChangesUI/UX design system and prototypes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@design-system/MASTER.md`:
- Around line 393-396: Update the Work disclosure requirements in
design-system/MASTER.md lines 393-396 and the Session Work specifications in
design-system/pages/session.md lines 106-108 and 149-151 to use a stable
accessible name containing only the Work/state identity. Keep aria-expanded and
aria-controls, and expose changing live duration and activity through a separate
live status region rather than the disclosure button name.
In `@design-system/prototypes/app.js`:
- Around line 67-99: Update closeOverlays and the sidebar/inspector trigger
handlers to synchronize overlay state beyond CSS classes: apply inert/visibility
to closed panels, keep each trigger’s aria-expanded accurate across mobile and
desktop toggles, and track the active trigger so Escape and close actions
restore focus. Add breakpoint-change handling so state and accessibility
attributes are recalculated when responsive thresholds change, including the
related logic near the additional referenced section.
- Around line 83-93: Move the inspector toggling and resizing implementation
anchored by the data-open-inspector handler from design-system/prototypes/app.js
lines 83-93 into session.html, preserving its responsive behavior and
closeOverlays integration. Move the Session layout and inspector styles from
design-system/prototypes/styles.css lines 204-235 into session.html’s inline
stylesheet; leave shared files limited to cross-page behavior and styles.
- Around line 101-111: Implement the complete ARIA tab interaction contract in
design-system/prototypes/app.js lines 101-111 by adding roving tabindex,
keyboard navigation, and proper tab activation for shared sidebar tabs. Apply
the same behavior in design-system/prototypes/session.html lines 1499-1519 for
Inspector and HITL tabs, ensuring each tab references its associated panel and
selection, focus, and visibility remain synchronized.
In `@design-system/prototypes/dashboard.html`:
- Line 2: Change the root html elements in
design-system/prototypes/dashboard.html (line 2),
design-system/prototypes/session.html (line 2), and
design-system/prototypes/todos.html (line 2) to use lang="en"; wrap each Chinese
passage in an appropriate language annotation such as lang="zh-CN".
In `@design-system/prototypes/styles.css`:
- Around line 289-293: Update the .rail-project.active styles to use a
light-mode foreground color with sufficient contrast against the white
--bg-elevated background, while preserving the existing dark-mode appearance
through the theme’s established color variables.
- Around line 169-179: Update the .sr-only accessibility utility to replace the
deprecated clip declaration with an equivalent clip-path value, preserving the
existing screen-reader-only behavior and validation compatibility.
In `@design-system/prototypes/todos.html`:
- Around line 600-605: Implement the complete modal lifecycle for the todo
drawer around the todo-drawer element and its open/close controls: keep the
closed drawer hidden and inert, remove those states when opening, move focus
into the dialog, trap Tab navigation within it, close on Escape, and restore
focus to the triggering control when closed. Apply the same behavior to the
related drawer markup and preserve the existing close controls.
- Around line 550-585: Replace the nested main landmark represented by the
todo-board element with a non-landmark container, preserving its todo-board
class and data-todo-panel="board" hook. Keep the existing lane structure and
content unchanged inside the replacement container.
- Around line 660-667: Update the submit handler for [data-capture-form] to
delegate capture feedback to the shared showToast() helper instead of directly
manipulating .toast or creating an independent timeout. Preserve the trimmed
input text and existing message content while reusing showToast()’s coordinated
lifecycle.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: c6507306-a9bd-49a5-a64b-8931be1ca0ee
📒 Files selected for processing (16)
AGENTS.mddesign-system/MASTER.mddesign-system/pages/dashboard.mddesign-system/pages/session.mddesign-system/pages/todos.mddesign-system/prototypes/app.jsdesign-system/prototypes/dashboard.htmldesign-system/prototypes/session.htmldesign-system/prototypes/styles.cssdesign-system/prototypes/todos.htmldesign/prototypes/signal-workbench/README.mddesign/prototypes/signal-workbench/app.jsdesign/prototypes/signal-workbench/design-system/signal-workbench/README.mddesign/prototypes/signal-workbench/index.htmldesign/prototypes/signal-workbench/styles.cssdesign/tui-design.html
💤 Files with no reviewable changes (5)
- design/prototypes/signal-workbench/design-system/signal-workbench/README.md
- design/prototypes/signal-workbench/index.html
- design/prototypes/signal-workbench/README.md
- design/tui-design.html
- design/prototypes/signal-workbench/app.js
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 16 files
Tip: cubic can generate docs of your entire codebase and keep them up to date. Try it here.
Re-trigger cubic
There was a problem hiding this comment.
All reported issues were addressed across 6 files (changes from recent commits).
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@design-system/prototypes/session.html`:
- Around line 1036-1068: Update the max-width: 1180px media-query rules around
`.session-page .app-shell` to add a higher-specificity
`.session-page.sidebar-collapsed .app-shell` override that removes the reserved
inspector grid column while `.context-inspector` is fixed. Preserve the existing
plain-layout columns and align the collapsed-sidebar behavior with the 760px
breakpoint.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: a1c81bcf-b3c1-4e84-b8c2-ed60fdc6bbe9
📒 Files selected for processing (6)
design-system/pages/session.mddesign-system/prototypes/app.jsdesign-system/prototypes/dashboard.htmldesign-system/prototypes/session.htmldesign-system/prototypes/styles.cssdesign-system/prototypes/todos.html
🚧 Files skipped from review as they are similar to previous changes (2)
- design-system/prototypes/dashboard.html
- design-system/pages/session.md
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.
Summary
design-system/AGENTS.mdthat Master and page rules are normative while prototypes and UI/UX Pro Max are advisory referencesdocs/unchangedWhy
The project had active design guidance and prototypes spread across an older structure. This gives future UI work one clear design baseline, page-specific exceptions, and lightweight rendered references without making prototypes authoritative.
Validation
git diff --checkaria-controlstargets, and local prototype assetsdashboard.html,session.html, andtodos.htmlSummary by CodeRabbit