docs: write UX design guidelines with WCAG-verified color system#816
docs: write UX design guidelines with WCAG-verified color system#816
Conversation
Add the authoritative design guidelines document for the v0.5.0 dashboard rebuild, codifying decisions from the design exploration (#765) and page structure (#766) into implementable specifications. Six sections: brand identity (14 semantic color tokens, typography scale, spacing grid), component patterns (card anatomy, MetricCard/AgentCard layouts, status encoding, data display specs), interaction design (progressive disclosure, hover behavior, Cmd+K palette, drag-drop), animation language (Framer Motion spring/tween presets, card entrance stagger, status change flash), accessibility (full WCAG AA contrast matrix -- all 24 combinations pass), and responsive breakpoints. Exported artifacts: - scripts/wcag_check.py: WCAG 2.1 contrast ratio verification script - web/src/styles/design-tokens.css: CSS custom properties for Warm Ops - web/src/lib/motion.ts: Framer Motion animation presets Closes #767 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request establishes the authoritative UX design guidelines for the upcoming v0.5.0 dashboard rebuild. It codifies design decisions into implementable specifications across various aspects of the user experience, from visual brand identity and component behaviors to interaction patterns, animations, and crucial accessibility standards. The guidelines ensure a cohesive, accessible, and performant interface by providing clear rules and reusable assets for developers. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
WalkthroughAdds a new UX design guidelines document at 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive UX design guidelines for the dashboard, including a new ux-guidelines.md document, a Python script for WCAG contrast checking, and TypeScript/CSS files for animation presets and design tokens. Feedback includes correcting an sRGB threshold in the WCAG script for accurate contrast calculations, ensuring consistent color token usage for the 'Positive' change badge in the guidelines, clarifying the responsive sidebar behavior documentation, and suggesting a more performant CSS-based approach for the status flash animation.
| """ | ||
| r, g, b = hex_to_rgb(hex_color) | ||
|
|
||
| srgb_threshold = 0.04045 |
There was a problem hiding this comment.
The srgb_threshold constant used for linearizing sRGB values is incorrect. The value 0.04045 appears to be for the inverse transformation (linear to sRGB). According to the WCAG 2.1 specification for calculating relative luminance, the threshold for sRGB components should be 0.03928.
Using the wrong threshold will lead to inaccurate contrast ratio calculations, potentially causing accessibility issues to be missed by this verification script.
Reference: W3C WCAG 2.1 - Relative Luminance
| srgb_threshold = 0.04045 | |
| srgb_threshold = 0.03928 |
docs/design/ux-guidelines.md
Outdated
| | Font | Mono, 11px, weight 500 | | ||
| | Padding | 2px 6px | | ||
| | Border-radius | 4px | | ||
| | Positive | Color: `#22c55e`, bg: `rgba(34, 197, 94, 0.08)`, border: `rgba(34, 197, 94, 0.2)` | |
There was a problem hiding this comment.
There's an inconsistency in the color definition for the 'Positive' change badge. The design system emphasizes state-driven colors, and the 'Negative' badge correctly uses the danger token. However, the 'Positive' badge uses a hardcoded color #22c55e instead of the defined success token (#10b981).
To ensure consistency, please update the 'Positive' badge to use the success token and its derived colors, similar to how the danger token is used for the 'Negative' badge.
| | Positive | Color: `#22c55e`, bg: `rgba(34, 197, 94, 0.08)`, border: `rgba(34, 197, 94, 0.2)` | | |
| | Positive | Color: success, bg: rgba(16, 185, 129, 0.08), border: rgba(16, 185, 129, 0.2) | |
docs/design/ux-guidelines.md
Outdated
| | 768 - 1023px | Hidden | Hamburger opens overlay | 0px / 240px (overlay) | | ||
| | < 768px | Hidden | No toggle -- mobile not supported | 0px | | ||
|
|
||
| Sidebar state is persisted in user preferences. The auto-collapse at 1024px respects the saved preference -- if a user explicitly expanded the sidebar, it stays expanded until the viewport crosses the 768px threshold. |
There was a problem hiding this comment.
The explanation of the sidebar's responsive behavior is a bit confusing and contains a potential typo.
- It mentions "auto-collapse at 1024px", but the breakpoint for auto-collapsing seems to be when resizing down from
>=1280pxto the1024-1279pxrange. Using1280pxas the threshold in the description would be clearer. - The phrase "it stays expanded until the viewport crosses the 768px threshold" could be misinterpreted. It implies that it would stay expanded when resizing between, for example, 1200px and 800px, which is correct, but the hard stop at 768px is because the layout changes fundamentally there (sidebar becomes hidden).
I suggest rephrasing for clarity. For example:
"Sidebar state is persisted in user preferences. When resizing from a viewport of 1280px or wider into the 1024-1279px range, the sidebar automatically collapses to the icon rail. However, a user can manually expand it, and this preference will be respected within this breakpoint range. Below 768px, the sidebar is hidden and accessed via a hamburger toggle."
| /** | ||
| * Flash effect for real-time value updates. | ||
| * | ||
| * Apply as a CSS class or inline style -- not a Framer Motion variant, | ||
| * because the flash triggers on data change, not mount/unmount. | ||
| * | ||
| * Implementation pattern: | ||
| * ```tsx | ||
| * const [flash, setFlash] = useState(false); | ||
| * useEffect(() => { setFlash(true); const t = setTimeout(() => setFlash(false), 600); return () => clearTimeout(t); }, [value]); | ||
| * ``` | ||
| */ |
There was a problem hiding this comment.
The implementation pattern suggested for the status flash effect can be improved for performance. The current example using useState and useEffect will trigger a re-render of the component every time a value updates, just to apply a brief flash.
A more performant approach would be to use CSS animations, which can be handled by the browser's compositor thread and avoid re-renders of the React component. You can trigger the animation by changing a key prop on the element.
Here's an example of a more performant pattern:
CSS:
@keyframes status-flash {
33% { background-color: var(--so-overlay-flash); }
}
.status-flash-animation {
animation: status-flash 600ms ease-out;
}React Component:
const [version, setVersion] = useState(0);
useEffect(() => {
// Increment version on value change to remount the element and re-trigger the animation
setVersion(v => v + 1);
}, [value]);
return (
<div key={version} className="status-flash-animation">
{/* Your content here */}
</div>
);This avoids re-rendering the component's children and offloads the animation work to CSS.
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Snapshot WarningsEnsure that dependencies are being submitted on PR branches. Re-running this action after a short time may resolve the issue. See the documentation for more information and troubleshooting advice. Scanned FilesNone |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/design/ux-guidelines.md`:
- Around line 562-609: The `@theme` snippet uses Tailwind-style variables
(--color-*, --spacing-*) while the canonical design tokens use a --so-*
namespace; add a short explanatory note immediately before the `@theme` block that
states this difference, shows the mapping convention (e.g., that Tailwind
variables map to --so-* tokens), and links or references the design-tokens.css
source so readers know where to find the authoritative names; reference the
`@theme` block and the variable patterns (--color-*, --spacing-*, --so-*) so
maintainers can locate and keep the mapping up to date.
In `@scripts/wcag_check.py`:
- Around line 72-127: The main() function exceeds the 50-line guideline because
it builds the entire Markdown table and failure report inline; extract the table
row rendering and failure-report printing into one or two helper functions
(e.g., render_contrast_row(fg_name, fg_hex, bg_name, bg_hex, ratio, normal_pass,
large_pass) and report_failures(failures)) and call them from main(), keeping
main() responsible only for preparing all_fg/all_bg, computing ratio via
contrast_ratio(), comparing against NORMAL_TEXT_RATIO/LARGE_TEXT_RATIO,
collecting failures, and invoking the new helpers; ensure you reference the
existing names (main, contrast_ratio, NORMAL_TEXT_RATIO, LARGE_TEXT_RATIO,
failures) so callers and tests remain unchanged.
- Around line 45-65: The color dictionaries BACKGROUNDS, TEXT_COLORS, and
STATE_COLORS in scripts/wcag_check.py are duplicated from design-tokens.css and
risk drifting; replace these hard-coded dicts by loading a single shared color
source (e.g., colors.json or colors.yaml) and use that data to populate
BACKGROUNDS, TEXT_COLORS, and STATE_COLORS at module import, or at minimum add a
clear top-of-file comment/TODO that documents the exact source file and requires
updates to both locations; update the code to read the shared file (or load from
your project’s token exporter) and map keys to the same dict names so functions
that reference BACKGROUNDS/TEXT_COLORS/STATE_COLORS continue to work unchanged.
In `@web/src/lib/motion.ts`:
- Around line 99-108: The JSDoc comment for the exported staggerChildren
Variants is inaccurate — it claims "max 300ms total" but the constant {
transition: { staggerChildren: 0.03, ... } } does not enforce any cap; update
the comment to state this is a default per-child stagger (30ms) and that any
total-duration cap should be implemented by consuming components (or convert
this constant into a helper like computeStaggerChildren(countOrIndex) that
clamps delayChildren to a 300ms max). Reference the exported symbol
staggerChildren and its transition.staggerChildren value when making the change.
In `@web/src/styles/design-tokens.css`:
- Around line 44-53: Update the block comment above the spacing tokens to
clarify the naming convention: explain that the --so-space-N tokens (for example
--so-space-1, --so-space-2, --so-space-10, --so-space-12) represent a semantic
spacing scale (preset pixel values like 48px and 64px) rather than a strict
math-based multiplier of an 8px base unit, so developers won’t assume
--so-space-10 == 80px; keep the existing token names and values, just add a
short clarifying sentence describing the mapping and intent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 6b404946-54a9-4e48-96b7-452c36b795e9
📒 Files selected for processing (5)
docs/design/brand-and-ux.mddocs/design/ux-guidelines.mdscripts/wcag_check.pyweb/src/lib/motion.tsweb/src/styles/design-tokens.css
📜 Review details
🧰 Additional context used
📓 Path-based instructions (5)
docs/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
Documentation uses Markdown with Zensical build tool (config:
mkdocs.yml). Runuv run zensical buildto build docs (output:_site/docs/). Runuv run zensical servefor local preview.
Files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.py: Nofrom __future__ import annotationsin Python code—Python 3.14 has PEP 649 native lazy annotations
Use PEP 758 except syntax:except A, B:(no parentheses) on Python 3.14—ruff enforces this
All public functions must have type hints; mypy strict mode is enforced
Use Google-style docstrings on all public classes and functions; enforced by ruff D rules
Create new objects instead of mutating existing ones—use immutability patterns. For non-Pydantic internal collections (registries,BaseTool), usecopy.deepcopy()at construction andMappingProxyTypewrapping for read-only enforcement.
Use frozen Pydantic models for config/identity; separate mutable-via-copy models (usingmodel_copy(update=...)) for runtime state that evolves. Never mix static config fields with mutable runtime fields in one model.
Use Pydantic v2 (BaseModel,model_validator,computed_field,ConfigDict). Use@computed_fieldfor derived values instead of storing redundant fields (e.g.TokenUsage.total_tokens). UseNotBlankStrfor all identifier/name fields including optional and tuple variants instead of manual whitespace validators.
Preferasyncio.TaskGroupfor fan-out/fan-in parallel operations in new code (e.g. multiple tool invocations, parallel agent calls). Prefer structured concurrency over barecreate_task.
Line length limit is 88 characters (ruff standard)
Functions must be less than 50 lines; files must be less than 800 lines
Handle errors explicitly; never silently swallow exceptions
Validate at system boundaries (user input, external APIs, config files)
Linter: ruff for Python (check + format). Runuv run ruff check src/ tests/anduv run ruff format src/ tests/
Type-checker: mypy for Python with strict mode. Runuv run mypy src/ tests/
Files:
scripts/wcag_check.py
scripts/**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
Scripts in
scripts/have relaxed ruff rules:
Files:
scripts/wcag_check.py
web/**
📄 CodeRabbit inference engine (CLAUDE.md)
Use Node.js 22+ for the web dashboard. Dependencies in
web/package.json
Files:
web/src/styles/design-tokens.cssweb/src/lib/motion.ts
web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
web/src/**/*.{ts,tsx}: React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Use Zustand for state management in React
Use ESLint with@eslint-react/eslint-pluginandeslint-plugin-securityfor React linting
Web dashboard dependencies include Axios client, React Router, Recharts for charting, Framer Motion for animations, cmdk for command palette, Lucide React for icons,@tanstack/react-queryfor server state
Files:
web/src/lib/motion.ts
🧠 Learnings (11)
📓 Common learnings
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
📚 Learning: 2026-03-18T08:23:08.912Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. The design spec is the starting point for architecture, data models, and behavior.
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-16T06:24:56.341Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:13:44.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:13:44.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue — DESIGN_SPEC.md is a pointer file linking to 7 design pages (Agents, Organization, Communication, Engine, Memory, Operations)
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:12:14.508Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-15T18:38:44.202Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:38:44.202Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. DESIGN_SPEC.md is a pointer file linking to the 7 design pages (index, agents, organization, communication, engine, memory, operations).
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-14T15:43:05.601Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-17T22:08:13.456Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-17T22:08:13.456Z
Learning: Documentation source in `docs/` (Markdown, built with Zensical). Design spec in `docs/design/` (7 pages: index, agents, organization, communication, engine, memory, operations). Architecture in `docs/architecture/` (overview, tech-stack, decision log). Roadmap in `docs/roadmap/`. Security in `docs/security.md`. Licensing in `docs/licensing.md`. Reference in `docs/reference/`. REST API reference in `docs/rest-api.md`. Library reference in `docs/api/` (auto-generated from docstrings). Custom templates in `docs/overrides/`. Config in `mkdocs.yml`.
Applied to files:
docs/design/brand-and-ux.mddocs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Applied to files:
docs/design/ux-guidelines.mdweb/src/lib/motion.ts
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard dependencies include Axios client, React Router, Recharts for charting, Framer Motion for animations, cmdk for command palette, Lucide React for icons, tanstack/react-query for server state
Applied to files:
web/src/lib/motion.ts
🪛 LanguageTool
docs/design/ux-guidelines.md
[grammar] ~431-~431: Ensure spelling is correct
Context: ... (duration: 0) - Tween durations halve (200ms -> 100ms) - Infinite animations (pulse,...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (15)
scripts/wcag_check.py (1)
11-43: LGTM! Correct WCAG 2.1 luminance implementation.The
hex_to_rgb,relative_luminance, andcontrast_ratiofunctions correctly implement the W3C specification for computing relative luminance and contrast ratios. The sRGB linearization threshold (0.04045) and formula are accurate.web/src/lib/motion.ts (4)
22-22: LGTM! Type-only import is correct.Using
import typefor Framer Motion'sTransitionandVariantsensures no runtime overhead and proper type safety.
28-58: LGTM! Well-documented spring presets with clear use cases.The spring configurations cover the spectrum from gentle (tooltips) to bouncy (drag-drop) to stiff (toggles). The mass/stiffness/damping ratios are sensible for each use case.
177-180: LGTM! SSR-safe reduced motion detection.The
typeof window === "undefined"check correctly handles server-side rendering. Returningfalse(allow animations) as the SSR default is reasonable since the client will re-evaluate.
1-180: Types are correctly exported and imported.The
TransitionandVariantstypes are confirmed as public exports in framer-motion v12 and are properly imported in this file. No compatibility issues.docs/design/brand-and-ux.md (1)
187-187: LGTM! Appropriate cross-reference to the new guidelines document.The relative link to
ux-guidelines.mdcorrectly connects the brand rationale document to the implementation specifications.web/src/styles/design-tokens.css (1)
1-69: LGTM! Comprehensive design token system with proper namespacing.The
--so-prefix provides clear namespacing for SynthOrg tokens. The file correctly documents its purpose (non-Tailwind contexts) and references the WCAG verification. Color values align with the verified palette.docs/design/ux-guidelines.md (8)
1-11: LGTM! Clear document positioning and prerequisites.The document correctly establishes itself as the implementation spec ("what") that builds on brand-and-ux.md ("why"). The prerequisite reading note helps developers understand the document hierarchy.
356-371: Animation preset configs match motion.ts implementation.Cross-referencing with
web/src/lib/motion.ts:
springDefault: stiffness 300, damping 30, mass 1 ✓tweenDefault: duration 0.2, ease [0.4, 0, 0.2, 1] ✓The documentation accurately reflects the implementation.
159-178: Well-defined status encoding hierarchy.The "never color alone" rule with the explicit encoding hierarchy (color → shape → text → animation) is excellent for accessibility. The status dot spec with the 3-cycle pulse limit prevents animation fatigue.
415-424: Valuable "what NOT to animate" section.Explicitly documenting non-animated elements prevents over-animation and maintains UI stability. The reasoning for each element is clear and actionable.
236-258: AgentCard "identical across all surfaces" rule is well-specified.The explicit requirement that AgentCard layout must be identical across Agents page, Org Chart, Dashboard, etc., prevents inconsistency. This is a valuable constraint for implementation.
426-435: Reduced motion handling is comprehensive.The reduced motion fallbacks (instant springs, halved tweens, disabled infinite animations, simultaneous card entrance) properly respect user preferences while maintaining functionality.
Note: "halve" on line 431 is the correct verb form meaning "to reduce by half" — no spelling issue despite the static analysis hint.
318-347: Command palette spec references cmdk library correctly.The Cmd+K palette specification aligns with the
cmdklibrary capabilities noted in the coding guidelines. The scope behavior (global vs page-local) and keyboard navigation patterns follow established conventions.
444-470: WCAG contrast ratios are accurate. All documented values in the table match the output ofscripts/wcag_check.py, including spot-checked rows and the full set of color combinations. No corrections needed.
scripts/wcag_check.py
Outdated
| # -- Warm Ops final palette (from docs/design/brand-and-ux.md) -- | ||
|
|
||
| BACKGROUNDS = { | ||
| "bg-base": "#0a0a12", | ||
| "bg-surface": "#0f0f1a", | ||
| "bg-card": "#13131f", | ||
| } | ||
|
|
||
| TEXT_COLORS = { | ||
| "text-primary": "#e2e8f0", | ||
| "text-secondary": "#94a3b8", | ||
| "text-muted": "#8b95a5", | ||
| } | ||
|
|
||
| STATE_COLORS = { | ||
| "accent": "#38bdf8", | ||
| "accent-dim": "#0ea5e9", | ||
| "success": "#10b981", | ||
| "warning": "#f59e0b", | ||
| "danger": "#ef4444", | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify color hex values match between wcag_check.py and design-tokens.css
echo "=== Colors in wcag_check.py ==="
rg -oP '#[0-9a-fA-F]{6}' scripts/wcag_check.py | sort -u
echo ""
echo "=== Colors in design-tokens.css ==="
rg -oP '#[0-9a-fA-F]{6}' web/src/styles/design-tokens.css | sort -u
echo ""
echo "=== Checking for mismatches ==="
# Extract and compare
py_colors=$(rg -oP '#[0-9a-fA-F]{6}' scripts/wcag_check.py | tr '[:upper:]' '[:lower:]' | sort -u)
css_colors=$(rg -oP '#[0-9a-fA-F]{6}' web/src/styles/design-tokens.css | tr '[:upper:]' '[:lower:]' | sort -u)
# Colors in py but not in css (should be empty or subset)
echo "Colors in wcag_check.py:"
echo "$py_colors"Repository: Aureliolo/synthorg
Length of output: 476
Colors are already synchronized with design-tokens.css.
All 11 colors in the palette match their corresponding values in web/src/styles/design-tokens.css. To prevent future drift, consider extracting the palette to a shared JSON/YAML source or adding a comment documenting the synchronization requirement.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@scripts/wcag_check.py` around lines 45 - 65, The color dictionaries
BACKGROUNDS, TEXT_COLORS, and STATE_COLORS in scripts/wcag_check.py are
duplicated from design-tokens.css and risk drifting; replace these hard-coded
dicts by loading a single shared color source (e.g., colors.json or colors.yaml)
and use that data to populate BACKGROUNDS, TEXT_COLORS, and STATE_COLORS at
module import, or at minimum add a clear top-of-file comment/TODO that documents
the exact source file and requires updates to both locations; update the code to
read the shared file (or load from your project’s token exporter) and map keys
to the same dict names so functions that reference
BACKGROUNDS/TEXT_COLORS/STATE_COLORS continue to work unchanged.
…mini - Add missing gauge data display spec (Section 2.3) per issue #767 - Add bg-card-hover to WCAG contrast matrix (32 combinations, all pass) - Link ux-guidelines.md in DESIGN_SPEC.md, mkdocs.yml, update CLAUDE.md page counts (9 -> 10), add page-structure.md to mkdocs nav (pre-existing) - Fix page transition spec: clarify exit (150ms, easeIn) vs enter (tweenDefault) - Fix staggerChildren JSDoc: remove false "max 300ms" claim, document consumer responsibility for capping - Convert STATUS_FLASH_DURATION_MS to STATUS_FLASH object with decomposed phase durations (200ms flash + 100ms hold + 300ms fade) - Add reducedMotionInstant transition constant; clarify prefersReducedMotion() is a point-in-time snapshot, not reactive - Replace deprecated aria-grabbed/aria-dropeffect with modern ARIA patterns - Use success token (#10b981) for positive change badge instead of #22c55e - Fix spacing grid description ("multiples or halves" -> "4px sub-grid") - Refactor wcag_check.py: extract helpers to keep main() under 50 lines, add color source sync comment - Clarify sidebar responsive behavior, @theme vs --so-* naming note Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/design/ux-guidelines.md`:
- Around line 54-55: Update the WCAG scope sentence so it matches the matrix
inputs by including bg-card-hover (or by referencing Section 5.1’s validated
tokens), e.g., change the listed tokens from "bg-base, bg-surface, and bg-card"
to "bg-base, bg-surface, bg-card, and bg-card-hover" (or add a clarifying clause
pointing readers to Section 5.1) so the wording aligns with the actual
validation matrix.
- Around line 566-573: The mobile sidebar behavior is contradictory between the
table row for the "< 768px" breakpoint and the following paragraph; update the
spec so they match: either (A) make mobile unsupported by changing the paragraph
to state the sidebar is not accessible on mobile (remove "accessed via the
hamburger toggle" and clarify "no toggle"), or (B) make mobile supported by
changing the table row for "< 768px" to show "Hidden | Hamburger opens overlay |
0px / 240px (overlay)". Edit the table row and/or the paragraph text so both the
"< 768px" table entry and the subsequent description use the same single
behavior, and ensure the persisted preference sentence still applies correctly
for ranges where persistence is intended.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 67ae2d7a-8edf-4e19-aedc-6eb55e9aaecf
📒 Files selected for processing (7)
CLAUDE.mddocs/DESIGN_SPEC.mddocs/design/ux-guidelines.mdmkdocs.ymlscripts/wcag_check.pyweb/src/lib/motion.tsweb/src/styles/design-tokens.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Backend
- GitHub Check: Build Sandbox
- GitHub Check: Build Web
- GitHub Check: Dependency Review
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (5)
docs/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
Documentation uses Markdown with Zensical build tool (config:
mkdocs.yml). Runuv run zensical buildto build docs (output:_site/docs/). Runuv run zensical servefor local preview.
Files:
docs/DESIGN_SPEC.mddocs/design/ux-guidelines.md
**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.py: Nofrom __future__ import annotationsin Python code—Python 3.14 has PEP 649 native lazy annotations
Use PEP 758 except syntax:except A, B:(no parentheses) on Python 3.14—ruff enforces this
All public functions must have type hints; mypy strict mode is enforced
Use Google-style docstrings on all public classes and functions; enforced by ruff D rules
Create new objects instead of mutating existing ones—use immutability patterns. For non-Pydantic internal collections (registries,BaseTool), usecopy.deepcopy()at construction andMappingProxyTypewrapping for read-only enforcement.
Use frozen Pydantic models for config/identity; separate mutable-via-copy models (usingmodel_copy(update=...)) for runtime state that evolves. Never mix static config fields with mutable runtime fields in one model.
Use Pydantic v2 (BaseModel,model_validator,computed_field,ConfigDict). Use@computed_fieldfor derived values instead of storing redundant fields (e.g.TokenUsage.total_tokens). UseNotBlankStrfor all identifier/name fields including optional and tuple variants instead of manual whitespace validators.
Preferasyncio.TaskGroupfor fan-out/fan-in parallel operations in new code (e.g. multiple tool invocations, parallel agent calls). Prefer structured concurrency over barecreate_task.
Line length limit is 88 characters (ruff standard)
Functions must be less than 50 lines; files must be less than 800 lines
Handle errors explicitly; never silently swallow exceptions
Validate at system boundaries (user input, external APIs, config files)
Linter: ruff for Python (check + format). Runuv run ruff check src/ tests/anduv run ruff format src/ tests/
Type-checker: mypy for Python with strict mode. Runuv run mypy src/ tests/
Files:
scripts/wcag_check.py
scripts/**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
Scripts in
scripts/have relaxed ruff rules:
Files:
scripts/wcag_check.py
web/**
📄 CodeRabbit inference engine (CLAUDE.md)
Use Node.js 22+ for the web dashboard. Dependencies in
web/package.json
Files:
web/src/styles/design-tokens.cssweb/src/lib/motion.ts
web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
web/src/**/*.{ts,tsx}: React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Use Zustand for state management in React
Use ESLint with@eslint-react/eslint-pluginandeslint-plugin-securityfor React linting
Web dashboard dependencies include Axios client, React Router, Recharts for charting, Framer Motion for animations, cmdk for command palette, Lucide React for icons,@tanstack/react-queryfor server state
Files:
web/src/lib/motion.ts
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to docs/**/*.md : Documentation uses Markdown with Zensical build tool (config: `mkdocs.yml`). Run `uv run zensical build` to build docs (output: `_site/docs/`). Run `uv run zensical serve` for local preview.
📚 Learning: 2026-03-16T06:24:56.341Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:12:14.508Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-15T18:38:44.202Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:38:44.202Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. DESIGN_SPEC.md is a pointer file linking to the 7 design pages (index, agents, organization, communication, engine, memory, operations).
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:13:44.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:13:44.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue — DESIGN_SPEC.md is a pointer file linking to 7 design pages (Agents, Organization, Communication, Engine, Memory, Operations)
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. The design spec is the starting point for architecture, data models, and behavior.
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-18T08:23:08.912Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-14T15:43:05.601Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-17T22:08:13.456Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-17T22:08:13.456Z
Learning: Documentation source in `docs/` (Markdown, built with Zensical). Design spec in `docs/design/` (7 pages: index, agents, organization, communication, engine, memory, operations). Architecture in `docs/architecture/` (overview, tech-stack, decision log). Roadmap in `docs/roadmap/`. Security in `docs/security.md`. Licensing in `docs/licensing.md`. Reference in `docs/reference/`. REST API reference in `docs/rest-api.md`. Library reference in `docs/api/` (auto-generated from docstrings). Custom templates in `docs/overrides/`. Config in `mkdocs.yml`.
Applied to files:
docs/DESIGN_SPEC.mdCLAUDE.mdmkdocs.ymldocs/design/ux-guidelines.md
📚 Learning: 2026-03-15T11:48:14.867Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T11:48:14.867Z
Learning: When implementation deviates from the spec (better approach found, scope evolved, etc.), alert the user and explain why — user decides whether to proceed or update the spec. Do NOT silently diverge — every deviation needs explicit user approval.
Applied to files:
CLAUDE.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: If implementation deviates from the spec (better approach found, scope evolved, etc.), alert the user and explain why—user decides whether to proceed or update the spec. Do NOT silently diverge.
Applied to files:
CLAUDE.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to docs/**/*.md : Documentation uses Markdown with Zensical build tool (config: `mkdocs.yml`). Run `uv run zensical build` to build docs (output: `_site/docs/`). Run `uv run zensical serve` for local preview.
Applied to files:
CLAUDE.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Before docs build, run `uv run python scripts/export_openapi.py` to generate OpenAPI schema
Applied to files:
CLAUDE.md
📚 Learning: 2026-03-19T07:12:14.508Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to src/synthorg/**/*.py : Package structure: src/synthorg/ organized as: api/ (REST+WebSocket, Litestar), auth/ (auth subpackage), backup/ (scheduled/manual backups), budget/ (cost tracking, CFO), cli/ (superseded by Go CLI), communication/ (message bus, meetings), config/ (YAML loading), core/ (domain models, resilience config), engine/ (orchestration, task state, coordination, approval gates, stagnation detection, context budget, compaction), hr/ (hiring, performance, promotion), memory/ (pluggable backend, Mem0, retrieval, consolidation), persistence/ (operational data, SQLite, settings), observability/ (logging, correlation, sinks), providers/ (LLM abstraction, LiteLLM, auth types, presets, runtime CRUD), settings/ (runtime-editable, typed definitions, encryption, config bridge), security/ (SecOps, rule engine, output scanning, progressive trust, autonomy levels), templates/ (company templates, personalities), tools/ (registry, built-in tools, git, sandbox, code_runner, MCP...
Applied to files:
CLAUDE.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Applied to files:
docs/design/ux-guidelines.mdweb/src/lib/motion.ts
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard dependencies include Axios client, React Router, Recharts for charting, Framer Motion for animations, cmdk for command palette, Lucide React for icons, tanstack/react-query for server state
Applied to files:
web/src/lib/motion.ts
🪛 LanguageTool
docs/design/ux-guidelines.md
[grammar] ~444-~444: Ensure spelling is correct
Context: ... (duration: 0) - Tween durations halve (200ms -> 100ms) - Infinite animations (pulse,...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (6)
CLAUDE.md (1)
13-13: Design-page counts are currently accurate; no action needed.Verification confirms both mentions correctly reference 10 design pages in
docs/design/. While counts can drift if pages are added/removed, the hardcoded values match the current directory inventory and align with the file's own guidance (line 18) to update docs when reality changes.scripts/wcag_check.py (1)
76-143: Good helper extraction and reporting structure.Breaking row rendering and failure reporting out of
main()improves readability and keeps responsibilities clear.web/src/lib/motion.ts (1)
99-205: Motion presets module is coherent and implementation-aligned.The stagger cap note, reduced-motion helper, and exported preset set are clear and practical for consistent usage across components.
docs/DESIGN_SPEC.md (1)
22-22: Design index update looks correct.Adding the UX guidelines page to the design table keeps the pointer doc aligned with the new authoritative spec.
mkdocs.yml (1)
114-115: Navigation wiring is correct.Both new Design entries are properly placed in the MkDocs nav tree.
web/src/styles/design-tokens.css (1)
44-53: Spacing scale clarification is clear and useful.The semantic-scale note removes ambiguity around token naming vs numeric value expectations.
- Update WCAG scope text to include bg-card-hover - Fix contradictory mobile sidebar description (no toggle, not hamburger) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/design/ux-guidelines.md`:
- Around line 89-100: The spacing token table is inconsistent: `space-12` is
defined as 64px but its usage text mentions a 56px compact rail; fix by either
updating the usage note for `space-12` to reference 64px (e.g., "Sidebar width
(compact rail: 64px)") or by removing the 56px mention and creating a separate
layout token (e.g., `rail-compact: 56px`) outside the spacing scale and
referencing that new layout token in the usage notes; update the `space-12` row
and, if adding a new token, add a corresponding usage entry for the new layout
token to keep guidance consistent.
- Around line 546-551: The breakpoint table entries ("Tablet", "Desktop small",
"Desktop") conflict with the project's authoritative contract; update the table
so the "Tablet" row reads 768-1279px and "Desktop" reads >=1280px (removing or
merging "Desktop small" into Tablet), and ensure you either merge the ranges
here or add an explicit note marked as an approved deviation referencing the
authoritative contract; apply the same change to the related section referenced
by the reviewer (the subsequent breakpoint rows around the later table).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 35a3b408-5d47-4da9-910c-cae5020873d4
📒 Files selected for processing (1)
docs/design/ux-guidelines.md
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Backend
- GitHub Check: Build Sandbox
- GitHub Check: Build Web
- GitHub Check: Dependency Review
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (1)
docs/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
Documentation uses Markdown with Zensical build tool (config:
mkdocs.yml). Runuv run zensical buildto build docs (output:_site/docs/). Runuv run zensical servefor local preview.
Files:
docs/design/ux-guidelines.md
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to docs/**/*.md : Documentation uses Markdown with Zensical build tool (config: `mkdocs.yml`). Run `uv run zensical build` to build docs (output: `_site/docs/`). Run `uv run zensical serve` for local preview.
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. The design spec is the starting point for architecture, data models, and behavior.
📚 Learning: 2026-03-16T06:24:56.341Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:12:14.508Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-15T18:38:44.202Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:38:44.202Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. DESIGN_SPEC.md is a pointer file linking to the 7 design pages (index, agents, organization, communication, engine, memory, operations).
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:13:44.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:13:44.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue — DESIGN_SPEC.md is a pointer file linking to 7 design pages (Agents, Organization, Communication, Engine, Memory, Operations)
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-14T15:43:05.601Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. The design spec is the starting point for architecture, data models, and behavior.
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-17T22:08:13.456Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-17T22:08:13.456Z
Learning: Documentation source in `docs/` (Markdown, built with Zensical). Design spec in `docs/design/` (7 pages: index, agents, organization, communication, engine, memory, operations). Architecture in `docs/architecture/` (overview, tech-stack, decision log). Roadmap in `docs/roadmap/`. Security in `docs/security.md`. Licensing in `docs/licensing.md`. Reference in `docs/reference/`. REST API reference in `docs/rest-api.md`. Library reference in `docs/api/` (auto-generated from docstrings). Custom templates in `docs/overrides/`. Config in `mkdocs.yml`.
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-18T08:23:08.912Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Applied to files:
docs/design/ux-guidelines.md
🪛 LanguageTool
docs/design/ux-guidelines.md
[grammar] ~444-~444: Ensure spelling is correct
Context: ... (duration: 0) - Tween durations halve (200ms -> 100ms) - Infinite animations (pulse,...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
| | Breakpoint | Range | Sidebar | Content layout | Tailwind class | | ||
| |------------|-------|---------|----------------|----------------| | ||
| | Desktop | >= 1280px | Full (220px expanded) | Multi-column grids | `xl:` | | ||
| | Desktop small | 1024 - 1279px | Auto-collapses to icon rail (56px) | Full width minus rail | `lg:` | | ||
| | Tablet | 768 - 1023px | Hidden (hamburger toggle, 240px overlay) | Single column | `md:` | | ||
| | Mobile | < 768px | Hidden | "Use desktop or CLI" message | default | |
There was a problem hiding this comment.
Align breakpoint ranges with the stated authoritative contract.
This spec defines Tablet as 768-1023px and introduces Desktop small (1024-1279px), but the issue objective contract is Tablet 768-1279px / Desktop >=1280px. For a single source of truth, either merge these ranges in this doc or explicitly mark this as an approved deviation with a reference.
Also applies to: 555-573
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/design/ux-guidelines.md` around lines 546 - 551, The breakpoint table
entries ("Tablet", "Desktop small", "Desktop") conflict with the project's
authoritative contract; update the table so the "Tablet" row reads 768-1279px
and "Desktop" reads >=1280px (removing or merging "Desktop small" into Tablet),
and ensure you either merge the ranges here or add an explicit note marked as an
approved deviation referencing the authoritative contract; apply the same change
to the related section referenced by the reviewer (the subsequent breakpoint
rows around the later table).
The compact sidebar rail is 56px (per page-structure.md), not space-12 (64px). Remove the misleading "compact rail: 56px, rounded to nearest" usage note and replace with accurate description. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
♻️ Duplicate comments (1)
docs/design/ux-guidelines.md (1)
546-551:⚠️ Potential issue | 🟠 MajorBreakpoint contract still diverges from the stated authoritative ranges.
The table and sidebar behavior currently split
768-1279pxintoTablet (768-1023)andDesktop small (1024-1279), which conflicts with the linked objective contract (Tablet 768-1279,Desktop >=1280) unless this is explicitly documented as an approved deviation in this spec. Please either merge the ranges or add a clear approved-deviation note at the breakpoint section.Based on learnings: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.🛠️ Proposed doc alignment (contract-preserving)
| Breakpoint | Range | Sidebar | Content layout | Tailwind class | |------------|-------|---------|----------------|----------------| | Desktop | >= 1280px | Full (220px expanded) | Multi-column grids | `xl:` | -| Desktop small | 1024 - 1279px | Auto-collapses to icon rail (56px) | Full width minus rail | `lg:` | -| Tablet | 768 - 1023px | Hidden (hamburger toggle, 240px overlay) | Single column | `md:` | +| Tablet | 768 - 1279px | Auto-collapses to icon rail (56px); overlay toggle allowed on narrower tablet layouts | Adaptive: multi-column at wider widths, single column at narrower widths | `md:` / `lg:` | | Mobile | < 768px | Hidden | "Use desktop or CLI" message | default |If the split is intentional, add an explicit line under Breakpoint Definitions such as:
Approved deviation from issue contract: tablet band is split into 768-1023 and 1024-1279 for layout behavior clarity.Also applies to: 555-573
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/design/ux-guidelines.md` around lines 546 - 551, The Breakpoint table splits the tablet band into "Tablet (768-1023px)" and "Desktop small (1024-1279px)" which diverges from the authoritative contract ("Tablet 768-1279" and "Desktop >=1280"); update the docs/design/ux-guidelines.md by either merging those two rows into a single "Tablet 768-1279px" row and removing "Desktop small", or add an explicit approved-deviation note under the "Breakpoint Definitions" section (e.g., "Approved deviation: tablet band split into 768-1023 and 1024-1279 for layout behavior clarity") and apply the same change where the table is repeated further down so the contract is consistent across the "Breakpoint" table and any related sidebar behavior notes (refer to the rows labeled Tablet, Desktop small, and Desktop).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@docs/design/ux-guidelines.md`:
- Around line 546-551: The Breakpoint table splits the tablet band into "Tablet
(768-1023px)" and "Desktop small (1024-1279px)" which diverges from the
authoritative contract ("Tablet 768-1279" and "Desktop >=1280"); update the
docs/design/ux-guidelines.md by either merging those two rows into a single
"Tablet 768-1279px" row and removing "Desktop small", or add an explicit
approved-deviation note under the "Breakpoint Definitions" section (e.g.,
"Approved deviation: tablet band split into 768-1023 and 1024-1279 for layout
behavior clarity") and apply the same change where the table is repeated further
down so the contract is consistent across the "Breakpoint" table and any related
sidebar behavior notes (refer to the rows labeled Tablet, Desktop small, and
Desktop).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 965dac99-8f1b-4655-bb2b-695bbff12d02
📒 Files selected for processing (1)
docs/design/ux-guidelines.md
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Build Web
- GitHub Check: Build Sandbox
- GitHub Check: Dependency Review
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (1)
docs/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
Documentation uses Markdown with Zensical build tool (config:
mkdocs.yml). Runuv run zensical buildto build docs (output:_site/docs/). Runuv run zensical servefor local preview.
Files:
docs/design/ux-guidelines.md
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:38:44.202Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. DESIGN_SPEC.md is a pointer file linking to the 7 design pages (index, agents, organization, communication, engine, memory, operations).
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to docs/**/*.md : Documentation uses Markdown with Zensical build tool (config: `mkdocs.yml`). Run `uv run zensical build` to build docs (output: `_site/docs/`). Run `uv run zensical serve` for local preview.
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. The design spec is the starting point for architecture, data models, and behavior.
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:13:44.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue — DESIGN_SPEC.md is a pointer file linking to 7 design pages (Agents, Organization, Communication, Engine, Memory, Operations)
📚 Learning: 2026-03-16T06:24:56.341Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T06:24:56.341Z
Learning: Applies to docs/design/**/*.md : Design specification pages in `docs/design/` must be consulted before implementing features (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:12:14.508Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:12:14.508Z
Learning: Applies to docs/design/*.md : Design spec pages: 7 pages in `docs/design/` — index, agents, organization, communication, engine, memory, operations
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-15T18:38:44.202Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:38:44.202Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. DESIGN_SPEC.md is a pointer file linking to the 7 design pages (index, agents, organization, communication, engine, memory, operations).
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-19T07:13:44.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T07:13:44.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue — DESIGN_SPEC.md is a pointer file linking to 7 design pages (Agents, Organization, Communication, Engine, Memory, Operations)
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-14T15:43:05.601Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T15:43:05.601Z
Learning: Applies to docs/** : Docs source in docs/ (Markdown, built with Zensical); design spec in docs/design/ (7 pages: index, agents, organization, communication, engine, memory, operations)
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Always read the relevant `docs/design/` page before implementing any feature or planning any issue. The design spec is the starting point for architecture, data models, and behavior.
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-17T22:08:13.456Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-17T22:08:13.456Z
Learning: Documentation source in `docs/` (Markdown, built with Zensical). Design spec in `docs/design/` (7 pages: index, agents, organization, communication, engine, memory, operations). Architecture in `docs/architecture/` (overview, tech-stack, decision log). Roadmap in `docs/roadmap/`. Security in `docs/security.md`. Licensing in `docs/licensing.md`. Reference in `docs/reference/`. REST API reference in `docs/rest-api.md`. Library reference in `docs/api/` (auto-generated from docstrings). Custom templates in `docs/overrides/`. Config in `mkdocs.yml`.
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-18T08:23:08.912Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-18T08:23:08.912Z
Learning: When approved deviations occur, update the relevant `docs/design/` page to reflect the new reality.
Applied to files:
docs/design/ux-guidelines.md
📚 Learning: 2026-03-24T19:31:05.964Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-24T19:31:05.964Z
Learning: Applies to web/src/**/*.{ts,tsx} : React 19 + shadcn/ui + Tailwind CSS 4 for the web dashboard
Applied to files:
docs/design/ux-guidelines.md
🪛 LanguageTool
docs/design/ux-guidelines.md
[grammar] ~444-~444: Ensure spelling is correct
Context: ... (duration: 0) - Tween durations halve (200ms -> 100ms) - Infinite animations (pulse,...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 I have created a release *beep* *boop* --- #MAJOR CHANGES; We got a somewhat working webui :) ## [0.5.0](v0.4.9...v0.5.0) (2026-03-30) ### Features * add analytics trends and budget forecast API endpoints ([#798](#798)) ([16b61f5](16b61f5)) * add department policies to default templates ([#852](#852)) ([7a41548](7a41548)) * add remaining activity event types (task_started, tool_used, delegation, cost_incurred) ([#832](#832)) ([4252fac](4252fac)) * agent performance, activity, and history API endpoints ([#811](#811)) ([9b75c1d](9b75c1d)) * Agent Profiles and Detail pages (biography, career, performance) ([#874](#874)) ([62d7880](62d7880)) * app shell, Storybook, and CI/CD pipeline ([#819](#819)) ([d4dde90](d4dde90)) * Approvals page with risk grouping, urgency indicators, batch actions ([#889](#889)) ([4e9673d](4e9673d)) * Budget Panel page (P&L dashboard, breakdown charts, forecast) ([#890](#890)) ([b63b0f1](b63b0f1)) * build infrastructure layer (API client, auth, WebSocket) ([#815](#815)) ([9f01d3e](9f01d3e)) * CLI global options infrastructure, UI modes, exit codes, env vars ([#891](#891)) ([fef4fc5](fef4fc5)) * CodeMirror editor and theme preferences toggle ([#905](#905), [#807](#807)) ([#909](#909)) ([41fbedc](41fbedc)) * Company page (department/agent management) ([#888](#888)) ([cfb88b0](cfb88b0)) * comprehensive hint coverage across all CLI commands ([#900](#900)) ([937974e](937974e)) * config system extensions, per-command flags for init/start/stop/status/logs ([#895](#895)) ([32f83fe](32f83fe)) * configurable currency system replacing hardcoded USD ([#854](#854)) ([b372551](b372551)) * Dashboard page (metric cards, activity feed, budget burn) ([#861](#861)) ([7d519d5](7d519d5)) * department health, provider status, and activity feed endpoints ([#818](#818)) ([6d5f196](6d5f196)) * design tokens and core UI components ([#833](#833)) ([ed887f2](ed887f2)) * extend approval, meeting, and budget API responses ([#834](#834)) ([31472bf](31472bf)) * frontend polish -- real-time UX, accessibility, responsive, performance ([#790](#790), [#792](#792), [#791](#791), [#793](#793)) ([#917](#917)) ([f04a537](f04a537)) * implement human roles and access control levels ([#856](#856)) ([d6d8a06](d6d8a06)) * implement semantic conflict detection in workspace merge ([#860](#860)) ([d97283b](d97283b)) * interaction components and animation patterns ([#853](#853)) ([82d4b01](82d4b01)) * Login page + first-run bootstrap + Company page ([#789](#789), [#888](#888)) ([#896](#896)) ([8758e8d](8758e8d)) * Meetings page with timeline viz, token bars, contribution formatting ([#788](#788)) ([#904](#904)) ([b207f46](b207f46)) * Messages page with threading, channel badges, sender indicators ([#787](#787)) ([#903](#903)) ([28293ad](28293ad)) * Org Chart force-directed view and drag-drop reassignment ([#872](#872), [#873](#873)) ([#912](#912)) ([a68a938](a68a938)) * Org Chart page (living nodes, status, CRUD, department health) ([#870](#870)) ([0acbdae](0acbdae)) * per-command flags for remaining commands, auto-behavior wiring, help/discoverability ([#897](#897)) ([3f7afa2](3f7afa2)) * Providers page with backend rework -- health, CRUD, subscription auth ([#893](#893)) ([9f8dd98](9f8dd98)) * scaffold React + Vite + TypeScript + Tailwind project ([#799](#799)) ([bd151aa](bd151aa)) * Settings page with search, dependency indicators, grouped rendering ([#784](#784)) ([#902](#902)) ([a7b9870](a7b9870)) * Setup Wizard rebuild with template comparison, cost estimator, theme customization ([#879](#879)) ([ae8b50b](ae8b50b)) * setup wizard UX -- template filters, card metadata, provider form reuse ([#910](#910)) ([7f04676](7f04676)) * setup wizard UX overhaul -- mode choice, step reorder, provider fixes ([#907](#907)) ([ee964c4](ee964c4)) * structured ModelRequirement in template agent configs ([#795](#795)) ([7433548](7433548)) * Task Board page (rich Kanban, filtering, dependency viz) ([#871](#871)) ([04a19b0](04a19b0)) ### Bug Fixes * align frontend types with backend and debounce WS refetches ([#916](#916)) ([134c11b](134c11b)) * auto-cleanup targets newly pulled images instead of old ones ([#884](#884)) ([50e6591](50e6591)) * correct wipe backup-skip flow and harden error handling ([#808](#808)) ([c05860f](c05860f)) * improve provider setup in wizard, subscription auth, dashboard bugs ([#914](#914)) ([87bf8e6](87bf8e6)) * improve update channel detection and add config get command ([#814](#814)) ([6b137f0](6b137f0)) * resolve all ESLint warnings, add zero-warnings enforcement ([#899](#899)) ([079b46a](079b46a)) * subscription auth uses api_key, base URL optional for cloud providers ([#915](#915)) ([f0098dd](f0098dd)) ### Refactoring * semantic analyzer cleanup -- shared filtering, concurrency, extraction ([#908](#908)) ([81372bf](81372bf)) ### Documentation * brand identity and UX design system from [#765](#765) exploration ([#804](#804)) ([389a9f4](389a9f4)) * page structure and information architecture for v0.5.0 dashboard ([#809](#809)) ([f8d6d4a](f8d6d4a)) * write UX design guidelines with WCAG-verified color system ([#816](#816)) ([4a4594e](4a4594e)) ### Tests * add unit tests for agent hooks and page components ([#875](#875)) ([#901](#901)) ([1d81546](1d81546)) ### CI/CD * bump actions/deploy-pages from 4.0.5 to 5.0.0 in the major group ([#831](#831)) ([01c19de](01c19de)) * bump astral-sh/setup-uv from 7.6.0 to 8.0.0 in /.github/actions/setup-python-uv in the all group ([#920](#920)) ([5f6ba54](5f6ba54)) * bump codecov/codecov-action from 5.5.3 to 6.0.0 in the major group ([#868](#868)) ([f22a181](f22a181)) * bump github/codeql-action from 4.34.1 to 4.35.0 in the all group ([#883](#883)) ([87a4890](87a4890)) * bump sigstore/cosign-installer from 4.1.0 to 4.1.1 in the minor-and-patch group ([#830](#830)) ([7a69050](7a69050)) * bump the all group with 3 updates ([#923](#923)) ([ff27c8e](ff27c8e)) * bump wrangler from 4.76.0 to 4.77.0 in /.github in the minor-and-patch group ([#822](#822)) ([07d43eb](07d43eb)) * bump wrangler from 4.77.0 to 4.78.0 in /.github in the all group ([#882](#882)) ([f84118d](f84118d)) ### Maintenance * add design system enforcement hook and component inventory ([#846](#846)) ([15abc43](15abc43)) * add dev-only auth bypass for frontend testing ([#885](#885)) ([6cdcd8a](6cdcd8a)) * add pre-push rebase check hook ([#855](#855)) ([b637a04](b637a04)) * backend hardening -- eviction/size-caps and model validation ([#911](#911)) ([81253d9](81253d9)) * bump axios from 1.13.6 to 1.14.0 in /web in the all group across 1 directory ([#922](#922)) ([b1b0232](b1b0232)) * bump brace-expansion from 5.0.4 to 5.0.5 in /web ([#862](#862)) ([ba4a565](ba4a565)) * bump eslint-plugin-react-refresh from 0.4.26 to 0.5.2 in /web ([#801](#801)) ([7574bb5](7574bb5)) * bump faker from 40.11.0 to 40.11.1 in the minor-and-patch group ([#803](#803)) ([14d322e](14d322e)) * bump https://github.com/astral-sh/ruff-pre-commit from v0.15.7 to 0.15.8 ([#864](#864)) ([f52901e](f52901e)) * bump nginxinc/nginx-unprivileged from `6582a34` to `f99cc61` in /docker/web in the all group ([#919](#919)) ([df85e4f](df85e4f)) * bump nginxinc/nginx-unprivileged from `ccbac1a` to `6582a34` in /docker/web ([#800](#800)) ([f4e9450](f4e9450)) * bump node from `44bcbf4` to `71be405` in /docker/sandbox ([#827](#827)) ([91bec67](91bec67)) * bump node from `5209bca` to `cf38e1f` in /docker/web ([#863](#863)) ([66d6043](66d6043)) * bump picomatch in /site ([#842](#842)) ([5f20bcc](5f20bcc)) * bump recharts 2->3 and @types/node 22->25 in /web ([#802](#802)) ([a908800](a908800)) * Bump requests from 2.32.5 to 2.33.0 ([#843](#843)) ([41daf69](41daf69)) * bump smol-toml from 1.6.0 to 1.6.1 in /site ([#826](#826)) ([3e5dbe4](3e5dbe4)) * bump the all group with 3 updates ([#921](#921)) ([7bace0b](7bace0b)) * bump the minor-and-patch group across 1 directory with 2 updates ([#829](#829)) ([93e611f](93e611f)) * bump the minor-and-patch group across 1 directory with 3 updates ([#841](#841)) ([7010c8e](7010c8e)) * bump the minor-and-patch group across 1 directory with 3 updates ([#869](#869)) ([548cee5](548cee5)) * bump the minor-and-patch group in /site with 2 updates ([#865](#865)) ([9558101](9558101)) * bump the minor-and-patch group with 2 updates ([#867](#867)) ([4830706](4830706)) * consolidate Dependabot groups to 1 PR per ecosystem ([06d2556](06d2556)) * consolidate Dependabot groups to 1 PR per ecosystem ([#881](#881)) ([06d2556](06d2556)) * improve worktree skill with full dep sync and status enhancements ([#906](#906)) ([772c625](772c625)) * remove Vue remnants and document framework decision ([#851](#851)) ([bf2adf6](bf2adf6)) * update web dependencies and fix brace-expansion CVE ([#880](#880)) ([a7a0ed6](a7a0ed6)) * upgrade to Storybook 10 and TypeScript 6 ([#845](#845)) ([52d95f2](52d95f2)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Summary
docs/design/ux-guidelines.md-- the single authoritative design guidelines document for all v0.5.0 dashboard page implementations, covering 6 sections: brand identity, component patterns, interaction design, animation language, accessibility, and responsive breakpointsscripts/wcag_check.py-- WCAG 2.1 contrast ratio verification script that validates all 24 foreground/background color combinations pass AA thresholds (all pass, lowest ratio:dangeronbg-cardat 4.89:1)web/src/styles/design-tokens.css-- CSS custom properties for the Warm Ops color system, typography, spacing, shadows, and overlay tokensweb/src/lib/motion.ts-- Framer Motion spring/tween presets, card entrance variants, page transition variants, badge bounce, and reduced motion helperdocs/design/brand-and-ux.mdreference table to link to the new guidelinesTest plan
uv run python scripts/wcag_check.py-- all 24 combinations pass WCAG AAuv run ruff check scripts/wcag_check.py-- no lint errorstsc -b) --motion.tscompiles cleanlybrand-and-ux.mdandpage-structure.md@themesnippet in guidelines matchesdesign-tokens.cssvaluesCloses #767