test: verify expanded drift suggestions

[dylantarre]

Test PR — Expanded Suggestion Coverage

This PR adds a new component with intentional design drift to verify Buoy's expanded suggestion builder:

Drift types exercised:

• Hardcoded colors (hex values)
• Hardcoded spacing (px values)
• Hardcoded border-radius
• Hardcoded box-shadow
• Hardcoded z-index
• Hardcoded opacity
• Hardcoded transition/duration
• Hardcoded border-width
• Hardcoded letter-spacing
• Arbitrary Tailwind values (where applicable)

Expected: Buoy should detect these drift signals and suggest design token replacements where the repo's token system provides alternatives.

[ahoybuoy]

🛟 Buoy Design Review

18 issues in 1 file

File	Line	Issue
StatusPanel.tsx	56	hardcoded-spacing: 8px
StatusPanel.tsx	57	hardcoded-spacing: 8px
StatusPanel.tsx	30	inline-style: display: 'flex', flexDirection: 'column' as const, gap: '8px'
StatusPanel.tsx	15	hardcoded-spacing: 20px
StatusPanel.tsx	16	hardcoded-color: #ffffff
StatusPanel.tsx	17	hardcoded-radius: 12px
StatusPanel.tsx	18	hardcoded-shadow: 0 1px 6px rgba(0, 0, 0, 0.06)
StatusPanel.tsx	22	hardcoded-typography: 15px
StatusPanel.tsx	24	hardcoded-color: #111827
StatusPanel.tsx	25	hardcoded-spacing: 14px
StatusPanel.tsx	30	hardcoded-spacing: 8px
StatusPanel.tsx	37	hardcoded-radius: 8px
StatusPanel.tsx	38	hardcoded-color: #f9fafb
StatusPanel.tsx	43	hardcoded-typography: 14px
StatusPanel.tsx	44	hardcoded-color: #374151
StatusPanel.tsx	53	hardcoded-spacing: 6px
StatusPanel.tsx	58	hardcoded-radius: 50%
StatusPanel.tsx	63	hardcoded-typography: 12px

You're using the same spacing values like 8px and 14px repeatedly, and colors like #ffffff and #f9fafb are very close. These are great candidates for tokens. For spacing, consider tokens like --spacing-sm (8px) and --spacing-md (14px). For colors, pick one white (--color-white) and stick with it.

Tip: Start by defining these tokens in your CSS or Tailwind config to keep things consistent.

_{18 issues · reply @ahoybuoy for help}

[ahoybuoy]

🛟 Buoy Design Review

18 issues in 1 file

File	Line	Issue
StatusPanel.tsx	56	hardcoded-spacing: 8px
StatusPanel.tsx	57	hardcoded-spacing: 8px
StatusPanel.tsx	30	inline-style: display: 'flex', flexDirection: 'column' as const, gap: '8px'
StatusPanel.tsx	15	hardcoded-spacing: 20px
StatusPanel.tsx	16	hardcoded-color: #ffffff
StatusPanel.tsx	17	hardcoded-radius: 12px
StatusPanel.tsx	18	hardcoded-shadow: 0 1px 6px rgba(0, 0, 0, 0.06)
StatusPanel.tsx	22	hardcoded-typography: 15px
StatusPanel.tsx	24	hardcoded-color: #111827
StatusPanel.tsx	25	hardcoded-spacing: 14px
StatusPanel.tsx	30	hardcoded-spacing: 8px
StatusPanel.tsx	37	hardcoded-radius: 8px
StatusPanel.tsx	38	hardcoded-color: #f9fafb
StatusPanel.tsx	43	hardcoded-typography: 14px
StatusPanel.tsx	44	hardcoded-color: #374151
StatusPanel.tsx	53	hardcoded-spacing: 6px
StatusPanel.tsx	58	hardcoded-radius: 50%
StatusPanel.tsx	63	hardcoded-typography: 12px

You're using the same spacing values like 8px and 14px repeatedly, and colors like #ffffff and #f9fafb are very close—pick one and stick with it. These are perfect candidates for tokens like --spacing-sm, --spacing-md, and --color-background. Since you're using inline styles, consider extracting these values into a shared theme file to keep things consistent.

Tip: Start by defining tokens for the most repeated values like 8px and #ffffff to create a foundation for your design system.

_{18 issues · reply @ahoybuoy for help}