fix: correct anti-pattern tool scope and refactor 15 UI code violations

[google-labs-jules]

The automated audit:anti-patterns pipeline command was failing because the internal detect-antipatterns.mjs script was erroneously targeting the boomtick-pkg submodule directory (which uses raw pixel mapping data by design) rather than the parent repository. This commit re-targets the CLI invocation in package.json to properly scan the parent directory by using explicit $PWD paths.

As a result of this correction, 15 pre-existing, previously hidden anti-pattern violations were uncovered in the main application source code. This PR addresses and refactors all 15 violations spanning multiple component files by replacing raw spacing classes with native layout primitives, substituting hardcoded pixel margins and sizes with standard tokens, migrating off of legacy color names to semantic tokens (text-main, text-dim), and eliminating banned inline style objects.

---

PR created automatically by Jules for task 16898833701483276387 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[github-actions]

🚀 Deployment Details (Last updated: Jul 22, 2026, 9:25 PM PST)

🚀 Pushed to gh-pages; publish in progress

• Preview URL: https://arii.github.io/tech-dancer/fix-layout-maps-hardcoded-pixel-16898833701483276387/
• Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
• Commit SHA: 4b40c27
• Marker File: verify here

[github-actions]

🐙 GitHub Models Code Review

Powered by GitHub Models

Reviewing: PR #3853

Model: gpt-4o-mini

Code Review Feedback

[ARCHITECTURE] Review

Upon reviewing the provided changes in the Pull Request, I have assessed the modifications against the stated goals, previous findings, and the visual and design guidelines. Below are my findings:

Findings

1. ErrorBoundaryFallback.tsx

   • Resolved Issues: The change from className="text-gray-600" to className="text-dim" is a positive adjustment, aligning with the semantic token usage.
   • Status: Resolved

2. EndpointCard.tsx

   • Resolved Issues:
     • The use of Box for layout has been replaced with Stack, which adheres to the design system guidelines.
     • The legacy color names have been replaced with semantic tokens, which is a significant improvement.
     • Inline styles have been removed, and the component now uses the design tokens for margins and paddings.
   • Status: Resolved

3. HeroSection.tsx

   • Resolved Issues: The inline style for contentVisibility and containIntrinsicSize has been removed, and the class name has been updated to use the appropriate CSS properties.
   • Status: Resolved

4. VersionTruth.tsx

   • Resolved Issues: The hardcoded pixel values for maxWidth have been replaced with design tokens, which is in line with the design system.
   • Status: Resolved

Additional Observations

• General Improvements: The overall refactoring has improved the maintainability and readability of the components. The use of semantic tokens and layout primitives enhances consistency across the application.
• No New Issues: There are no new issues introduced in this PR that would warrant a separate finding.

Conclusion

All previously identified issues have been addressed satisfactorily, and the changes align well with the design system guidelines. The refactoring has improved the code quality and adherence to best practices.

[PERFORMANCE] Review

Upon reviewing the provided changes in the Pull Request, I have identified the following points related to performance, redundant re-renders, and adherence to design guidelines:

Findings

1. ErrorBoundaryFallback Component:

   • Resolved Issues: The change from className="text-gray-600" to className="text-dim" is an improvement as it aligns with the use of semantic tokens.
   • Status: Resolved.

2. EndpointCard Component:

   • Issue: The use of raw Tailwind classes for layout and styling is still present. The component uses className attributes for styling instead of relying solely on the layout primitives provided.
     • Snippet:

       <Stack direction="row" align="center" gap={3}>

   • Concern: Although the Stack component is used, there are still instances where raw Tailwind classes are mixed with layout primitives, which is against the design system guidelines.
   • Status: Open.

3. HeroSection Component:

   • Issue: The inline style for contentVisibility and containIntrinsicSize is still present, which goes against the design guidelines that ban inline styles.
     • Snippet:

       style={{ contentVisibility: "auto", containIntrinsicSize: "48px" }}

   • Concern: Inline styles can lead to performance issues and are not maintainable. They should be replaced with class-based styling.
   • Status: Open.

4. VersionTruth Component:

   • Issue: The change from maxWidth="1024px" to maxWidth="5xl" is an improvement in terms of responsiveness and adherence to design tokens.
   • Status: Resolved.

5. General Observations:

   • The use of Box and Stack components is appropriate, but there are still instances where raw Tailwind classes are used for layout and styling, which should be addressed to fully comply with the design system.
   • The changes made in this PR do not introduce any new performance issues, but they do not fully resolve the existing ones related to the use of raw Tailwind classes and inline styles.

Conclusion

The PR resolves some issues but leaves others open, particularly regarding the adherence to design system guidelines. The use of raw Tailwind classes and inline styles remains a concern that needs to be addressed to improve maintainability and performance.

Final Verdict:

[SECURITY] Review

Upon reviewing the provided pull request, I will focus on confirming the resolution of previous findings and identifying any new issues, particularly in relation to security, data validation, and adherence to the design guidelines.

Review Findings

1. Resolved Issues:

   • The changes in src/components/ui/EndpointCard.tsx have successfully replaced raw Tailwind classes with standard layout primitives (<Stack>, <Box>, <Text>). This addresses the previously noted violations regarding the use of raw Tailwind classes for layout and styling.
   • The use of semantic tokens has been improved, specifically in the ErrorBoundaryFallback component where the legacy color name text-gray-600 was replaced with text-dim. This resolves the issue of inconsistent use of semantic tokens.
   • Inline styles have been removed in favor of class-based styling, particularly in the HeroSection component, where the inline style for contentVisibility has been replaced with a class.

2. New Issues:

   • Security Concern: The command in package.json for audit:anti-patterns now includes paths that could potentially expose new input paths if those directories contain untrusted input. The command is as follows:

     "audit:anti-patterns": "PYTHONPATH=boomtick-pkg/cli:boomtick-pkg/cli/dev_tools node boomtick-pkg/scripts/detect-antipatterns.mjs $PWD/src $PWD/.github/workflows $PWD/.npmrc"

     While this command is intended for auditing, if any of the specified directories contain user-generated or untrusted data, this could introduce a security risk. It is essential to ensure that the auditing tool does not process untrusted input or that appropriate sanitization is in place.

3. Design Guidelines:

   • The changes made to the VersionTruth component regarding the maximum width have been updated from a hardcoded pixel value to a responsive design token (5xl). This adheres to the design guidelines and improves responsiveness.
   • The use of semantic tokens and layout primitives has been consistently applied across the components, which aligns with the design system.

Conclusion

The majority of the previous findings have been resolved effectively, and the code now adheres more closely to the design guidelines. However, the introduction of the new command in package.json raises a potential security concern regarding untrusted input paths.

Final Verdict

Given the successful resolution of previous issues but the introduction of a new security concern, I will classify this review as a warning.

[STYLE] Review

Upon reviewing the provided pull request changes, I will focus on the specific modifications made to the files and assess them against the established visual and design guidelines, as well as the previous findings.

Review Findings

1. File: package.json

   • Change: The command for audit:anti-patterns was modified to target the parent directory correctly.
   • Status: This change is appropriate and resolves the previous issue of the command failing due to incorrect path targeting. No further issues are raised here.
   • Confidence: High

2. File: src/components/ErrorBoundaryFallback.tsx

   • Change: The class name for the text color was changed from text-gray-600 to text-dim.
   • Status: This change adheres to the design system by using semantic tokens instead of legacy color names. The issue regarding inconsistent use of semantic tokens is resolved.
   • Confidence: High

3. File: src/components/ui/EndpointCard.tsx

   • Change: Raw Tailwind classes for layout and styling were replaced with <Stack> and <Text> components, and legacy color names were replaced with semantic tokens.
   • Status: The changes made in this file address multiple previous findings:
     • The use of raw Tailwind classes for layout has been replaced with appropriate layout primitives.
     • Legacy color names have been updated to semantic tokens.
     • The inline styles have been removed in favor of class-based styling.
   • Confidence: High

4. File: src/components/ui/HeroSection.tsx

   • Change: The inline style for contentVisibility and containIntrinsicSize was removed, and the class name was updated to include these properties.
   • Status: This change aligns with the design guidelines by avoiding inline styles. However, the use of CSS variables for --hero-bar-height remains a concern as it still uses a hardcoded value for height.
   • Confidence: Medium
   • New Issue: The use of style={{ contentVisibility: "auto", containIntrinsicSize: "48px" }} was removed, but the CSS variable still relies on a hardcoded pixel value. This should be flagged as it does not adhere to the design system's guidelines against hardcoded pixel values.
   • Finding:
     • Issue: Hardcoded pixel values for layout dimensions are used instead of design tokens.
     • Status: Open
     • Confidence: High

5. File: src/pages/VersionTruth.tsx

   • Change: The hardcoded pixel value for maxWidth was replaced with a design token (5xl).
   • Status: This change adheres to the design system guidelines and resolves the previous finding regarding hardcoded pixel values.
   • Confidence: High

Summary of Findings

The majority of the changes made in this pull request successfully address the previous findings and adhere to the design system guidelines. However, there remains a concern regarding the use of hardcoded pixel values in the HeroSection component.

JSON Output

Final Verdict

The pull request is mostly successful in addressing previous issues, with one remaining concern regarding hardcoded pixel values. Therefore, the final verdict is:

---

Generated by github-models-code-review

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

The refactoring effort demonstrates a clean transition from imperative, hardcoded styles to a declarative, token-based system. The removal of inline style objects in favor of utility-first classes and layout primitives is a significant improvement for maintainability. The codebase is now more consistent with the established design system.

However, one minor observation: in EndpointCard.tsx, the conversion to React.memo is welcome, but ensure that the props object is stable or that the memoization is genuinely beneficial for this specific component before widespread adoption. The layout cleanup is excellent.

FINAL RECOMMENDATION

Approved with Minor Changes

DEFINITION of DONE

• Verify that the [content-visibility:auto] and [contain-intrinsic-size:var(--spacing-12)] utility classes in HeroSection.tsx are correctly resolved by your current Tailwind configuration (or postcss-plugin), as manual tailwind class injection can occasionally fail if the arbitrary value parser is not properly configured.
• Run a full regression test on the EndpointCard to ensure the memoization does not interfere with the handleToggleResponse state updates.
• Update snapshots for any component test suites that may have been affected by the layout token migration.

Review automatically published via RepoAuditor.

[arii]

PR Review: #3853

Context

• Last Commit Tracked (SHA): 42ed291

Audit Checklist

For EVERY changed file, verify against these standards. Mark as - [x] when verified.

• Dead abstractions: No new class, context, or hook that a simpler primitive handles.
• Unnecessary indirection: No layer of wrapping where a direct function call suffices.
• Responsibility creep: Component does not take on state/logic belonging in parent/hook.
• Import bloat: No unnecessary import React from 'react' (React 17+).
• Token compliance: Uses established design tokens (no raw Tailwind values or inline styles).
• Audit ratio: If > 100 lines added, identified at least 10 lines to refactor/remove.

CI Log Triage

(Populated if CI failures detected)

• Failed Checks:

• Deployment Impact Analysis

• Detected Errors:
  None detected by parser.

• Root Cause Analysis:

• Expected visual regression failures due to correct conversion of pixel layouts (1024px) to semantic classes (5xl) and legacy colors to semantic tokens (text-main).

• Remediation Steps:

• Manually review the changed Playwright snapshots to confirm they reflect the correct UI output under the new tokens.

• Dead abstractions: N/A.

• Unnecessary indirection: Removed unnecessary standard Box rendering in favor of the correct semantic <Text> element in EndpointCard.

• Responsibility creep: N/A.

• Import bloat: N/A.

• Token compliance: Replaced raw Tailwind classes (text-primary, text-secondary, text-gray-600) with semantic design tokens (text-main, text-dim). Converted inline styles computing pixel values (--hero-bar-height) to use rem units instead to avoid layout mapping anti-patterns. Refactored hardcoded layout boundaries (maxWidth="1024px") to responsive token values (maxWidth="5xl").

• Audit ratio: N/A.

• This PR successfully resolves numerous layout and design token anti-pattern violations (e.g. replacing hardcoded raw colors with text-main, and standardizing on the Text primitive).

• It also successfully modifies package.json to properly invoke the detect-antipatterns.mjs tool using absolute $PWD directory scopes, aligning exactly with the requirements.

• Failing CI Checks: The Deployment Impact Analysis (Visual Diffs) failed, which is expected due to stylistic and structural adjustments from token normalization. However, it blocks approval until manually reviewed.

Not Approved

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

• The PR description is concise and clearly explains the motivation for the infrastructure change.
• Refactoring 15 UI violations is a high-impact cleanup. The transition from inline styles and hardcoded margins to semantic tokens (text-dim, 5xl, 3xl, 5xl) is appropriate and aligns with architectural standards.
• Removed verbose/redundant style attributes in HeroSection.tsx and EndpointCard.tsx, replacing them with cleaner primitive usage.

FINAL RECOMMENDATION

Approved with Minor Changes

DEFINITION of DONE

• Verify audit:anti-patterns passes locally with the new directory scanning logic.
• Run npm run audit:anti-patterns to confirm no remaining violations exist in src/.
• Validate that removing the startsWith constraint in deploy.yml does not trigger premature builds for non-production branches; confirm intent with the CI/CD pipeline owner.
• Verify tests (E2E and component) to ensure no regressions in layout after migrating pixel values to tokens.
• Update snapshots if necessary for ErrorBoundaryFallback and EndpointCard due to style class changes.

Review automatically published via RepoAuditor.

k

[arii]

⚠️ BLOCKING CI FAILURE: Approval overridden to COMMENT because the following checks are failing: Deployment Impact Analysis. Please resolve CI issues before approval.

PR Context: #3853

The PR is approved.

[arii]

@jules-fix-ci

[arii]

@jules-fix-ci

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

The code changes are concise and maintain high structural integrity. The shift toward tokenized values and layout primitives reduces technical debt significantly. The usage of arbitrary Tailwind values in HeroSection is a pragmatic trade-off for performance without introducing unnecessary wrapper complexity.

FINAL RECOMMENDATION

Approved with Minor Changes

DEFINITION of DONE

1. Confirm that audit:anti-patterns execution time remains within the SLA threshold for CI pipelines.
2. Verify that accessibility/tab navigation in EndpointCard is not impacted by the swap from native button to Box (ensure proper role attributes are applied if needed).
3. Run audit for anti-patterns: Execute npm run audit:anti-patterns locally to ensure zero exit code after refactoring.
4. Update snapshots if necessary: Review visual regressions in the component library storybook.

Review automatically published via RepoAuditor.