Skip to content

chore: add design system enforcement hook and component inventory#846

Merged
Aureliolo merged 3 commits intomainfrom
chore/design-system-enforcement
Mar 26, 2026
Merged

chore: add design system enforcement hook and component inventory#846
Aureliolo merged 3 commits intomainfrom
chore/design-system-enforcement

Conversation

@Aureliolo
Copy link
Copy Markdown
Owner

Summary

  • Add PostToolUse hook (scripts/check_web_design_system.py) that validates web/src/ files against the design system on every Edit/Write -- catches hardcoded colors, fonts, missing Storybook stories, duplicate component patterns, and proposes shared component extraction
  • Document component inventory and reuse rules in CLAUDE.md ("Web Dashboard Design System" section) so all agents enforce design system coherence
  • Add component inventory to docs/design/brand-and-ux.md with full props table, utility functions, types, and guidance for creating new shared components

Test plan

  • Script catches hardcoded hex colors in Tailwind arbitrary values, CSS properties, and JSX inline styles
  • Script catches hardcoded font-family declarations
  • Script detects missing Storybook stories for new components in components/
  • Script detects duplicate patterns (StatusBadge, SectionCard, MetricCard, Avatar)
  • Script proposes extraction for complex .map() blocks (>8 lines)
  • Script passes clean on all existing components and pages
  • Script skips non-web files (Python, Go, etc.)
  • Hook reads file path from stdin JSON (PostToolUse format)
  • CLI mode works for direct testing
  • Ruff check + format pass
  • Pre-commit hooks pass

🤖 Generated with Claude Code

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>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 26, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2a0cb919-d567-46f5-9490-522c4cc761e3

📥 Commits

Reviewing files that changed from the base of the PR and between f3d8582 and 09eb63f.

📒 Files selected for processing (1)
  • scripts/check_web_design_system.py

Walkthrough

Added .claude/settings.json to register a PostToolUse hook that runs python scripts/check_web_design_system.py after tool usage when the matcher matches Edit|Write. Added scripts/check_web_design_system.py, a validator that scans web/src/-relative .tsx, .ts, and .css files for hardcoded colors, non-tokenized font declarations, missing components/ui/* Storybook stories, prohibited inline UI patterns, and heuristics suggesting reusable component extraction; it reports violations and exits nonzero. Updated CLAUDE.md and docs/design/brand-and-ux.md with rules for shared UI components, design-token constraints, prohibited patterns, and the enforcement mechanism.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: adding a design system enforcement hook and documenting component inventory.
Description check ✅ Passed The description clearly explains all major changes including the validation hook, documentation updates, and comprehensive test plan covering all key features.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 40.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 26, 2026 17:48 — with GitHub Actions Inactive
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 26, 2026

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Snapshot Warnings

⚠️: No snapshots were found for the head SHA 09eb63f.
Ensure 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 Files

None

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


try:
content = file_path.read_text(encoding="utf-8")
except OSError, UnicodeDecodeError:
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

This except syntax is for Python 2. For Python 3, multiple exceptions must be caught as a tuple. This will cause a SyntaxError in Python 3.

    except (OSError, UnicodeDecodeError):

try:
data = json.load(sys.stdin)
return data.get("tool_input", {}).get("file_path")
except json.JSONDecodeError, AttributeError:
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

This except syntax is for Python 2. For Python 3, multiple exceptions must be caught as a tuple. This will cause a SyntaxError in Python 3.

    except (json.JSONDecodeError, AttributeError):

)

HARDCODED_RGBA_RE = re.compile(
r"(?:rgba?)\(\s*\d+\s*,\s*\d+\s*,\s*\d+",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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+[^)]*\)",

in_string = not in_string
if i == comment_pos and not in_string:
return True
return "/*" in prefix and "*/" not in prefix[prefix.index("/*") :]
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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("/*") :]

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 52d95f2 and 84e50e0.

📒 Files selected for processing (4)
  • .claude/settings.json
  • CLAUDE.md
  • docs/design/brand-and-ux.md
  • scripts/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: No from __future__ import annotations in 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.json
  • 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 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.md
  • CLAUDE.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.md
  • CLAUDE.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.md
  • 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 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.md
  • CLAUDE.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.md
  • 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 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.md
  • CLAUDE.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.md
  • 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:

  • docs/design/brand-and-ux.md
  • CLAUDE.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.md
  • 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 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_COMPLEXITY in the script.

Comment on lines +117 to +128
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("/*") :]
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Comment on lines +326 to +339
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."
)
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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>
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 26, 2026 18:10 — with GitHub Actions Inactive
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 84e50e0 and f3d8582.

📒 Files selected for processing (3)
  • CLAUDE.md
  • docs/design/brand-and-ux.md
  • scripts/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: No from __future__ import annotations in 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.md
  • CLAUDE.md
  • scripts/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.md
  • CLAUDE.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.md
  • 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 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.md
  • CLAUDE.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.md
  • CLAUDE.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.md
  • CLAUDE.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.md
  • CLAUDE.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.md
  • 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 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
  • CLAUDE.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, and SemanticColor correctly reference lib/utils.ts, matching the actual implementation in web/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 like var(--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 parts and "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_path is 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.

Comment on lines +40 to +55
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
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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>
@Aureliolo Aureliolo merged commit 15abc43 into main Mar 26, 2026
9 of 11 checks passed
@Aureliolo Aureliolo deleted the chore/design-system-enforcement branch March 26, 2026 18:16
@Aureliolo Aureliolo temporarily deployed to cloudflare-preview March 26, 2026 18:16 — with GitHub Actions Inactive
Aureliolo added a commit that referenced this pull request Mar 30, 2026
🤖 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-&gt;3 and @types/node 22-&gt;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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants