chore: add design system enforcement hook and component inventory#846
chore: add design system enforcement hook and component inventory#846
Conversation
Add PostToolUse hook that validates web/src/ files against the design system on every Edit/Write. The script checks for hardcoded colors, fonts, missing Storybook stories, duplicate patterns (StatusBadge, SectionCard, MetricCard, Avatar), and proposes shared component extraction for complex .map() blocks. Document component inventory and reuse rules in CLAUDE.md and docs/design/brand-and-ux.md so all agents have the reference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughAdded 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
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.
Code Review
This pull request establishes a mandatory design system for the web dashboard by adding a component inventory to the documentation and implementing an automated validation script. The script is integrated as a PostToolUse hook to enforce rules against hardcoded styles and encourage component reuse. Feedback highlights critical Python 3 syntax errors in exception handling that would cause runtime failures, along with suggestions to refine regex patterns and comment detection logic for better accuracy.
scripts/check_web_design_system.py
Outdated
|
|
||
| try: | ||
| content = file_path.read_text(encoding="utf-8") | ||
| except OSError, UnicodeDecodeError: |
scripts/check_web_design_system.py
Outdated
| try: | ||
| data = json.load(sys.stdin) | ||
| return data.get("tool_input", {}).get("file_path") | ||
| except json.JSONDecodeError, AttributeError: |
scripts/check_web_design_system.py
Outdated
| ) | ||
|
|
||
| HARDCODED_RGBA_RE = re.compile( | ||
| r"(?:rgba?)\(\s*\d+\s*,\s*\d+\s*,\s*\d+", |
There was a problem hiding this comment.
The regular expression for rgba values is a bit too broad and could be more precise. It only matches the beginning of the function call (e.g., rgba(1,2,3) and doesn't ensure it's a whole word or a complete function call. This could lead to false positives on code that is not a color definition. A more specific regex would improve accuracy.
r"\brgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+[^)]*\)",
scripts/check_web_design_system.py
Outdated
| in_string = not in_string | ||
| if i == comment_pos and not in_string: | ||
| return True | ||
| return "/*" in prefix and "*/" not in prefix[prefix.index("/*") :] |
There was a problem hiding this comment.
The logic to detect if a match is inside a block comment is flawed. It uses prefix.index("/*") which finds the first occurrence of /*. This can fail if there are multiple block comments on a single line, for example /* closed */ code /* open comment. Using rfind to get the last occurrence would make this heuristic more robust.
return "/*" in prefix and "*/" not in prefix[prefix.rfind("/*") :]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/brand-and-ux.md`:
- Around line 190-241: Update the Component Inventory table rows to match the
actual implementations: change DeptHealthBar props from `percentage`,
`agentCount?`, `taskCount?` to `health`, `agentCount`, `taskCount` (required)
for `DeptHealthBar` (dept-health-bar.tsx); add optional `borderColor?` to the
`Avatar` props (`avatar.tsx`); add optional `max?` (default 100) to
`ProgressGauge` props (`progress-gauge.tsx`); and add optional `color?` (default
'var(--so-accent)') and `animated?` (default true) to `Sparkline` props
(`sparkline.tsx`); ensure the table entries and descriptive text reflect these
exact prop names and defaults.
In `@scripts/check_web_design_system.py`:
- Around line 117-128: The helper _is_in_comment_context currently only inspects
the current line prefix and misses block comments that start on previous lines;
modify _is_in_comment_context to scan backwards through preceding lines (e.g.,
from the current file buffer or provided lines array) to detect an unmatched
"/*" before the match_start without a closing "*/", or alternatively add an
argument like in_block_comment_state that callers maintain while iterating lines
so the function can return True when a prior "/*" is open; update callers that
invoke _is_in_comment_context to pass the lines buffer or maintain/update the
block-comment state while scanning to ensure multi-line /* ... */ blocks are
recognized.
- Around line 326-339: The current regex in map_blocks only matches `.map()`
arrow functions whose return expression is wrapped in parentheses; update the
logic around map_blocks (the regex literal) to also detect arrow functions that
return JSX/expressions without outer parens and block-bodied arrow functions
that use `return`, or alternatively document this limitation near
_MAP_BLOCK_COMPLEXITY with a comment and in any output comments; specifically
adjust the regex or add a second pattern to capture `.map((...) => <...>)` and
`.map((...) => { return ... })`, then reuse the same complexity check and
proposals.append (referencing rel_path and _MAP_BLOCK_COMPLEXITY) so missed
candidates are reported or the limitation is clearly described.
- Around line 194-214: The docstring for check_missing_story says it targets
components/ui/ but the code only checks for "components" in parts, so it
currently flags any components/*; update the function to only run for the
components/ui subtree or make the docstring reflect the broader behavior.
Concretely, in check_missing_story use parts to ensure the path contains the
sequence "components" followed immediately by "ui" (e.g., check
parts.index("components")+1 < len(parts) and parts[parts.index("components")+1]
== "ui") before proceeding, or alternatively change the docstring to say it
applies to any components/ subdirectory — keep references to the function name
check_missing_story and the parts variable when locating the change.
- Around line 363-364: The except block currently catching OSError and
UnicodeDecodeError (except OSError, UnicodeDecodeError:) silently returns [],
which hides real failures; update the handler in
scripts/check_web_design_system.py to log the caught exception details
(including exception type and message) via the module logger or a provided
logger before returning [], and add a brief comment explaining why these
exceptions are being suppressed; target the specific except block that mentions
OSError and UnicodeDecodeError so the fix logs errors for debugging while
preserving the original return behavior.
🪄 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: ca96c7c0-9602-4415-8c48-59bdb26f5908
📒 Files selected for processing (4)
.claude/settings.jsonCLAUDE.mddocs/design/brand-and-ux.mdscripts/check_web_design_system.py
📜 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). (2)
- GitHub Check: Analyze (python)
- GitHub Check: Dependency Review
🧰 Additional context used
📓 Path-based instructions (2)
**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.py: Nofrom __future__ import annotationsin Python files—Python 3.14 has PEP 649 native lazy annotations.
Use PEP 758 except syntax:except A, B:without parentheses in Python 3.14+. Ruff enforces this.
All public functions in Python must have type hints. Mypy strict mode is enforced.
Docstrings must use Google style and are required on all public classes and functions in Python. Enforced by ruff D rules.
Line length must be 88 characters in Python (ruff enforced).
Functions must be less than 50 lines, files must be less than 800 lines in Python.
Handle errors explicitly in Python—never silently swallow exceptions.
Files:
scripts/check_web_design_system.py
scripts/**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
All scripts in scripts/ have relaxed ruff rules: print and deferred imports are allowed (not enforced as violations).
Files:
scripts/check_web_design_system.py
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/components/**/*.{ts,tsx} : Web dashboard must use shadcn/ui components and Tailwind CSS 4. Design tokens are CSS custom properties (--so-* prefix, single source of truth in web/src/styles/).
📚 Learning: 2026-03-15T18:17:43.675Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:17:43.675Z
Learning: Pre-commit hooks: trailing-whitespace, end-of-file-fixer, check-yaml, check-toml, check-json, check-merge-conflict, check-added-large-files, no-commit-to-branch (main), ruff check+format, gitleaks, hadolint (Dockerfile linting).
Applied to files:
.claude/settings.jsonscripts/check_web_design_system.py
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/components/**/*.{ts,tsx} : Web dashboard must use shadcn/ui components and Tailwind CSS 4. Design tokens are CSS custom properties (--so-* prefix, single source of truth in web/src/styles/).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.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.mdCLAUDE.md
📚 Learning: 2026-03-15T21:20:09.993Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T21:20:09.993Z
Learning: Applies to web/src/components/** : Vue components organized by feature (agents/, approvals/, budget/, common/, dashboard/, layout/, messages/, org-chart/, tasks/).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.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.mdCLAUDE.md
📚 Learning: 2026-03-26T17:10:34.500Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.500Z
Learning: Update relevant docs/design/ pages when approved deviations from the design spec occur to reflect the new reality.
Applied to files:
docs/design/brand-and-ux.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/brand-and-ux.md
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components must use Zustand for state management. API endpoints use Axios with typed client modules in api/endpoint-modules (18 domains).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.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.mdCLAUDE.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.mdCLAUDE.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.mdCLAUDE.md
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/**/*.stories.{ts,tsx} : Storybook 10: Backgrounds API uses parameters.backgrounds.options (object keyed by name) + initialGlobals.backgrounds.value (replaces old default + values array).
Applied to files:
docs/design/brand-and-ux.md
📚 Learning: 2026-03-15T18:17:43.675Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:17:43.675Z
Learning: Applies to web/** : Web dashboard: Node.js 20+, dependencies in web/package.json (Vue 3, PrimeVue, Tailwind CSS, Pinia, VueFlow, ECharts, Axios, vue-draggable-plus, Vitest, fast-check, ESLint, vue-tsc).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.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 web/package.json : Web dashboard Node.js 20+; dependencies in web/package.json (Vue 3, PrimeVue, Tailwind CSS, Pinia, VueFlow, ECharts, Axios, vue-draggable-plus, Vitest, ESLint, vue-tsc)
Applied to files:
docs/design/brand-and-ux.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
🔇 Additional comments (5)
scripts/check_web_design_system.py (3)
37-52: ALLOWED_HEX_COLORS matches design-tokens.css — good synchronization.The allowlist correctly mirrors all 14 canonical hex values from
web/src/styles/design-tokens.css. This ensures the validator won't flag legitimate design token definitions.
131-166: LGTM!The color validation logic correctly normalizes short hex codes (e.g.,
#abc→#aabbcc), checks against the allowlist, and skips comment contexts. The regex coverage for Tailwind arbitrary values, CSS properties, and JSX inline styles is comprehensive.
399-434: LGTM!The dual-mode entry point (stdin JSON for hook invocation, CLI args for manual testing) is well-structured. Exit codes align with the documented behavior (0 = clean, 1 = violations).
.claude/settings.json (1)
1-16: LGTM!The hook configuration correctly wires the design system validator to run after Edit/Write operations. The 10-second timeout is reasonable for single-file validation.
CLAUDE.md (1)
143-196: LGTM!The new "Web Dashboard Design System" section provides clear, actionable rules that align with the enforcement script. The component inventory, design token constraints, and prohibited patterns are well-documented. The threshold of ">8 lines" for complex
.map()blocks correctly matches_MAP_BLOCK_COMPLEXITYin the script.
scripts/check_web_design_system.py
Outdated
| def _is_in_comment_context(line: str, match_start: int) -> bool: | ||
| """Rough heuristic: skip matches inside comments.""" | ||
| prefix = line[:match_start] | ||
| if "//" in prefix: | ||
| comment_pos = prefix.index("//") | ||
| in_string = False | ||
| for i, ch in enumerate(prefix): | ||
| if ch in ("'", '"', "`") and (i == 0 or prefix[i - 1] != "\\"): | ||
| in_string = not in_string | ||
| if i == comment_pos and not in_string: | ||
| return True | ||
| return "/*" in prefix and "*/" not in prefix[prefix.index("/*") :] |
There was a problem hiding this comment.
Edge case: multi-line block comments not fully handled.
The heuristic works for single-line contexts but won't detect matches inside multi-line /* ... */ blocks where /* is on a previous line. This could cause false positives for hex colors inside block comments spanning multiple lines.
💡 Suggested improvement for multi-line awareness
For a more robust solution, consider tracking whether the file is inside a block comment by scanning preceding lines, or document this as a known limitation. Given this is a linting aid (not a security gate), the current heuristic is acceptable but may produce occasional false positives.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@scripts/check_web_design_system.py` around lines 117 - 128, The helper
_is_in_comment_context currently only inspects the current line prefix and
misses block comments that start on previous lines; modify
_is_in_comment_context to scan backwards through preceding lines (e.g., from the
current file buffer or provided lines array) to detect an unmatched "/*" before
the match_start without a closing "*/", or alternatively add an argument like
in_block_comment_state that callers maintain while iterating lines so the
function can return True when a prior "/*" is open; update callers that invoke
_is_in_comment_context to pass the lines buffer or maintain/update the
block-comment state while scanning to ensure multi-line /* ... */ blocks are
recognized.
| map_blocks = re.findall( | ||
| r"\.map\(\s*\([^)]*\)\s*=>\s*\(([\s\S]*?)\)\s*\)", | ||
| content, | ||
| ) | ||
| for block in map_blocks: | ||
| line_count = block.count("\n") | ||
| if line_count > _MAP_BLOCK_COMPLEXITY and ( | ||
| ("className" in block and "border" in block) or "rounded" in block | ||
| ): | ||
| proposals.append( | ||
| f" {rel_path}: Complex list item ({line_count} lines) in .map() " | ||
| f"-- consider extracting to a shared component in " | ||
| f"`web/src/components/ui/` with a Storybook story." | ||
| ) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Regex only matches .map() with parenthesized return body.
The pattern \.map\(\s*\([^)]*\)\s*=>\s*\(([\s\S]*?)\)\s*\) requires the arrow function to wrap its return in parentheses: .map((x) => (...)). It won't match the common pattern .map((x) => <div>...</div>) without outer parens, or block-body .map((x) => { return ... }).
This is acceptable as a heuristic (catches the most verbose pattern), but may miss some candidates. Consider documenting this limitation or extending the pattern.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@scripts/check_web_design_system.py` around lines 326 - 339, The current regex
in map_blocks only matches `.map()` arrow functions whose return expression is
wrapped in parentheses; update the logic around map_blocks (the regex literal)
to also detect arrow functions that return JSX/expressions without outer parens
and block-bodied arrow functions that use `return`, or alternatively document
this limitation near _MAP_BLOCK_COMPLEXITY with a comment and in any output
comments; specifically adjust the regex or add a second pattern to capture
`.map((...) => <...>)` and `.map((...) => { return ... })`, then reuse the same
complexity check and proposals.append (referencing rel_path and
_MAP_BLOCK_COMPLEXITY) so missed candidates are reported or the limitation is
clearly described.
…mini Script fixes: - Fix _normalize_hex to handle 8-digit (#rrggbbaa) and 4-digit (#rgba) hex - Fix HARDCODED_FONT_RE false negative for font-family: var(--so-*) - Add is_relative_to() guard to prevent ValueError crash - Tighten check_missing_story to only require stories for components/ui/ - Add stderr warnings for file read and JSON parse errors (not silently swallowed) - Add stderr warning on project root cwd fallback - Fix _check_avatar false negative by removing redundant third condition - Add type validation for json.load() return value - Fix block-comment detection: string-awareness + rfind for last occurrence - Make HARDCODED_RGBA_RE exclusion position-specific (var() nesting check) - Add word boundary to HARDCODED_RGBA_RE - Fix HARDCODED_FONT_RE lookahead to include \s* inside negative lookahead - Document .map() regex limitation (parenthesized returns only) - Update ALLOWED_HEX_COLORS comment to reference source file path Documentation fixes: - Fix DeptHealthBar props: percentage -> health, mark agentCount/taskCount required - Fix StatusBadge label description: boolean toggle, not custom string - Add missing Sparkline props: color?, animated? - Add missing ProgressGauge prop: max? - Add missing Avatar prop: borderColor?; fix "department-colored" wording - Fix getStatusColor() return type to include "text-secondary" - Update brand-and-ux.md enforcement description to match CLAUDE.md - Update scripts/ description to include dev-time validation hooks 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 `@scripts/check_web_design_system.py`:
- Around line 260-273: The avatar detection regex in _check_avatar is a
heuristic that can produce false positives for non-avatar circular flex
elements; update the function by adding a clear comment above _check_avatar
explaining the heuristic and its potential false positives, and change the
returned warning text from an absolute directive to a softer suggestion (e.g.,
"possible inline avatar/initials circle detected — consider using `<Avatar>`
from `@/components/ui/avatar` or ignore if not applicable") so consumers
understand this is a heuristic; keep references to the pattern variable and
has_avatar_import logic intact.
- Around line 40-55: The ALLOWED_HEX_COLORS set is missing a clear pointer to
the source of truth; update the top of the file or directly above the
ALLOWED_HEX_COLORS definition to add a concise comment that links to the
canonical design tokens file (mentioning the filename design-tokens.css and its
repository location) so maintainers can reconcile values easily; ensure the
comment refers to ALLOWED_HEX_COLORS and the design tokens source and keep it
short and clearly labeled (e.g., "source of truth: design-tokens.css").
🪄 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: a7fb5820-0660-4df1-82c8-bbc690fe587c
📒 Files selected for processing (3)
CLAUDE.mddocs/design/brand-and-ux.mdscripts/check_web_design_system.py
📜 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). (2)
- GitHub Check: Dependency Review
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.py: Nofrom __future__ import annotationsin Python files—Python 3.14 has PEP 649 native lazy annotations.
Use PEP 758 except syntax:except A, B:without parentheses in Python 3.14+. Ruff enforces this.
All public functions in Python must have type hints. Mypy strict mode is enforced.
Docstrings must use Google style and are required on all public classes and functions in Python. Enforced by ruff D rules.
Line length must be 88 characters in Python (ruff enforced).
Functions must be less than 50 lines, files must be less than 800 lines in Python.
Handle errors explicitly in Python—never silently swallow exceptions.
Files:
scripts/check_web_design_system.py
scripts/**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
All scripts in scripts/ have relaxed ruff rules: print and deferred imports are allowed (not enforced as violations).
Files:
scripts/check_web_design_system.py
🧠 Learnings (28)
📓 Common learnings
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/components/**/*.{ts,tsx} : Web dashboard must use shadcn/ui components and Tailwind CSS 4. Design tokens are CSS custom properties (--so-* prefix, single source of truth in web/src/styles/).
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:17:43.675Z
Learning: Pre-commit hooks: trailing-whitespace, end-of-file-fixer, check-yaml, check-toml, check-json, check-merge-conflict, check-added-large-files, no-commit-to-branch (main), ruff check+format, gitleaks, hadolint (Dockerfile linting).
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/components/**/*.{ts,tsx} : Web dashboard must use shadcn/ui components and Tailwind CSS 4. Design tokens are CSS custom properties (--so-* prefix, single source of truth in web/src/styles/).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.mdscripts/check_web_design_system.py
📚 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.mdCLAUDE.md
📚 Learning: 2026-03-15T21:20:09.993Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T21:20:09.993Z
Learning: Applies to web/src/components/** : Vue components organized by feature (agents/, approvals/, budget/, common/, dashboard/, layout/, messages/, org-chart/, tasks/).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.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.mdCLAUDE.md
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/**/*.{ts,tsx} : Web dashboard components must use Zustand for state management. API endpoints use Axios with typed client modules in api/endpoint-modules (18 domains).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.md
📚 Learning: 2026-03-26T17:10:34.500Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.500Z
Learning: Update relevant docs/design/ pages when approved deviations from the design spec occur to reflect the new reality.
Applied to files:
docs/design/brand-and-ux.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/brand-and-ux.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.mdCLAUDE.md
📚 Learning: 2026-03-15T18:17:43.675Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T18:17:43.675Z
Learning: Applies to web/** : Web dashboard: Node.js 20+, dependencies in web/package.json (Vue 3, PrimeVue, Tailwind CSS, Pinia, VueFlow, ECharts, Axios, vue-draggable-plus, Vitest, fast-check, ESLint, vue-tsc).
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.md
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to web/src/**/*.stories.{ts,tsx} : Storybook 10: Backgrounds API uses parameters.backgrounds.options (object keyed by name) + initialGlobals.backgrounds.value (replaces old default + values array).
Applied to files:
docs/design/brand-and-ux.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.mdCLAUDE.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 web/package.json : Web dashboard Node.js 20+; dependencies in web/package.json (Vue 3, PrimeVue, Tailwind CSS, Pinia, VueFlow, ECharts, Axios, vue-draggable-plus, Vitest, ESLint, vue-tsc)
Applied to files:
docs/design/brand-and-ux.mdCLAUDE.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:
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-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/api/**/*.py : API package (api/): Litestar REST + WebSocket with controllers, guards, channels, JWT + API key + WS ticket auth, approval gate integration, coordination endpoint, collaboration endpoint, settings endpoint, provider management endpoint (CRUD + test + presets), backup endpoint, RFC 9457 structured errors, AppState hot-reload slots, service auto-wiring (Phase 1 at construction, Phase 2 on startup), lifecycle helpers
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/security/**/*.py : Security package (security/): SecOps agent, rule engine (soft-allow/hard-deny, fail-closed), audit log, output scanner, output scan response policies (redact/withhold/log-only/autonomy-tiered), risk classifier, risk tier classifier, action type registry, ToolInvoker security integration, progressive trust (4 strategies), autonomy levels (presets, resolver, change strategy), timeout policies (park/resume)
Applied to files:
CLAUDE.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:
CLAUDE.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 **/*.py : Handle errors explicitly, never silently swallow exceptions
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-16T07:22:28.134Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T07:22:28.134Z
Learning: Applies to **/*.py : Handle errors explicitly; never silently swallow exceptions
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to **/*.py : Handle errors explicitly in Python—never silently swallow exceptions.
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-14T16:18:57.267Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T16:18:57.267Z
Learning: Applies to **/*.py : Use PEP 758 except syntax with `except A, B:` (no parentheses) for multiple exceptions—ruff enforces this on Python 3.14.
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-16T07:22:28.134Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-16T07:22:28.134Z
Learning: Applies to **/*.py : Use `except A, B:` syntax (no parentheses) for exception handling — PEP 758 exception syntax enforced by ruff on Python 3.14
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-14T16:18:57.267Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-14T16:18:57.267Z
Learning: Applies to **/*.py : Handle errors explicitly—never silently swallow exceptions.
Applied to files:
scripts/check_web_design_system.py
📚 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 **/*.py : Use PEP 758 except syntax: `except A, B:` (no parentheses) — enforced by ruff on Python 3.14
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-15T16:55:07.730Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-15T16:55:07.730Z
Learning: Applies to **/*.py : Use PEP 758 except syntax: use `except A, B:` (no parentheses) — ruff enforces this on Python 3.14.
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-26T17:10:34.499Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-26T17:10:34.499Z
Learning: Applies to **/*.py : Use PEP 758 except syntax: `except A, B:` without parentheses in Python 3.14+. Ruff enforces this.
Applied to files:
scripts/check_web_design_system.py
📚 Learning: 2026-03-19T21:11:37.538Z
Learnt from: CR
Repo: Aureliolo/synthorg PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-19T21:11:37.538Z
Learning: Applies to **/*.py : Errors: handle explicitly, never silently swallow.
Applied to files:
scripts/check_web_design_system.py
🔇 Additional comments (11)
CLAUDE.md (1)
143-196: LGTM! Clear and actionable design system documentation.The component inventory, design token rules, and enforcement section provide clear guidance. The documentation aligns well with the validation script's checks and the learnings about using shadcn/ui components with
--so-*design tokens.docs/design/brand-and-ux.md (2)
209-222: LGTM! Utility functions and types correctly documented.The file locations for
cn(),getStatusColor(),getHealthColor(),AgentRuntimeStatus, andSemanticColorcorrectly referencelib/utils.ts, matching the actual implementation inweb/src/lib/utils.ts.
190-208: Component inventory provides comprehensive reference.The Core Components table with props and purpose descriptions is well-structured. The documented props align with the previous review feedback that was addressed in commit f3d8582.
scripts/check_web_design_system.py (8)
1-21: LGTM! Well-documented module with clear usage instructions.The module docstring clearly explains the dual-mode operation (hook vs CLI), exit codes, and usage examples. This is essential for a validation tool that can be invoked in multiple ways.
110-123: Path validation provides defense-in-depth against traversal.The
is_relative_to(project_root)check at line 112 ensures only files within the project directory are processed. Combined with suffix and directory filtering, this mitigates the path traversal concerns flagged by static analysis.
176-182: Good handling of rgba() inside var() fallbacks.The logic correctly detects unclosed
var(parentheses to skip false positives likevar(--so-overlay, rgba(0,0,0,0.5)).
217-238: LGTM! Story check correctly scoped to components/ui/.The condition now requires both
"components" in partsand"ui" in parts(line 223-224), matching the documented behavior. The path construction at line 232-233 is safe since it only modifies the suffix within the same directory.
345-361: LGTM! Map block complexity heuristic with documented limitations.The comment at lines 345-347 clearly documents that only parenthesized returns are matched, which addresses the previous review feedback about the regex limitation.
383-391: LGTM! Explicit error handling with stderr logging.The exception handler now logs a warning with the exception details to stderr before returning, which addresses the previous concern about silently swallowing errors. As per coding guidelines: "Handle errors explicitly in Python—never silently swallow exceptions."
421-434: Good defensive JSON parsing with type validation.The function validates that
file_pathis a string (line 428) before using it, and logs parse failures to stderr. This provides defense against malformed hook input.
437-472: Entry point cleanly handles both hook and CLI modes.The dual-mode design allows easy testing via CLI while supporting the hook invocation pattern. The exit code semantics (0 = clean/skip, 1 = violations) integrate well with the PostToolUse hook workflow.
| ALLOWED_HEX_COLORS: set[str] = { | ||
| "#38bdf8", | ||
| "#0ea5e9", # accent, accent-dim | ||
| "#10b981", # success | ||
| "#f59e0b", # warning | ||
| "#ef4444", # danger | ||
| "#e2e8f0", | ||
| "#94a3b8", | ||
| "#8b95a5", # text-primary, text-secondary, text-muted | ||
| "#0a0a12", | ||
| "#0f0f1a", | ||
| "#13131f", | ||
| "#181828", # bg-base, bg-surface, bg-card, bg-card-hover | ||
| "#1e1e2e", | ||
| "#2a2a3e", # border, border-bright | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding a comment linking to the source of truth for allowed colors.
The inline comments reference design-tokens.css, but adding the full path (web/src/styles/design-tokens.css) would help maintainers keep this list synchronized.
💡 Suggested improvement
# ── Allowed raw hex values ────────────────────────────────────────────
-# Must match :root variables in web/src/styles/design-tokens.css.
+# Must match :root variables in web/src/styles/design-tokens.css
+# (single source of truth for design tokens).
# Any OTHER hex color in a .tsx/.ts/.css file is a violation.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@scripts/check_web_design_system.py` around lines 40 - 55, The
ALLOWED_HEX_COLORS set is missing a clear pointer to the source of truth; update
the top of the file or directly above the ALLOWED_HEX_COLORS definition to add a
concise comment that links to the canonical design tokens file (mentioning the
filename design-tokens.css and its repository location) so maintainers can
reconcile values easily; ensure the comment refers to ALLOWED_HEX_COLORS and the
design tokens source and keep it short and clearly labeled (e.g., "source of
truth: design-tokens.css").
The avatar detection regex can false-positive on non-avatar circular flex elements. Change the warning to a soft suggestion and document the heuristic limitation in the docstring. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
🤖 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
scripts/check_web_design_system.py) that validatesweb/src/files against the design system on every Edit/Write -- catches hardcoded colors, fonts, missing Storybook stories, duplicate component patterns, and proposes shared component extractiondocs/design/brand-and-ux.mdwith full props table, utility functions, types, and guidance for creating new shared componentsTest plan
components/.map()blocks (>8 lines)🤖 Generated with Claude Code