AI Decision Bar - Testing Guide¶

Quick Test Steps¶

1. Restart Hugo Server¶

Since JavaScript files use asset fingerprinting, you must restart the server:

# Stop current server (Ctrl+C)
make clean
make server

2. Test URL¶

Visit an AI resource detail page:

• Example: http://localhost:1313/ai/angelslim/
• Or any page under /ai/[slug]/

3. Visual Verification¶

Check that the Decision Bar displays:

Expected Layout (single line, 48px height):

Score: 66 / 100  Early / Niche | Emerging project · Monitor progress

Elements to verify:

• ✅ Score displays as Score: XX / 100
• ✅ Status text appears (no badge background)
• ✅ Separator | visible between status and summary
• ✅ Summary statement inline
• ✅ Height approximately 48px
• ✅ Subtle background highlight (light blue tint)
• ✅ No progress bar visible

4. Browser Console¶

Open DevTools Console (F12) and check:

• ✅ No JavaScript errors
• ✅ API call succeeds: https://ai-oss-rank-worker.jimmysong.io/api/health?repos=...
• ✅ Response contains projects[0].scores.health
• ✅ Score value logged correctly

5. Page Structure¶

Verify content order in page:

[1] Title (h1)
[2] Description paragraph
[3] Decision Bar ← NEW POSITION
[4] Meta info (inline with dots)
[5] Action buttons (GitHub primary)
[6] Right sidebar: Score Breakdown
[7] Content sections

6. Responsive Testing¶

Desktop (> 992px):

• Single line layout
• All elements visible inline

Mobile (< 768px):

• Allow flex-wrap if needed
• Font size 13px
• Height maintains ~48px

7. Dark Mode¶

Toggle system dark mode:

• ✅ Text contrast sufficient
• ✅ Background highlight visible but subtle
• ✅ Status color readable

Common Issues¶

Issue: "Score data unavailable"¶

Cause: JavaScript not updated or API call failed

Fix:

1. Check Network tab for API call
2. Verify response format
3. Check console for errors
4. Ensure Hugo server restarted

Issue: Progress bar still visible¶

Cause: CSS cache or old HTML

Fix:

1. Hard refresh browser (Cmd+Shift+R / Ctrl+F5)
2. Clear browser cache
3. Check Hugo logs for build errors

Issue: Wrong class names¶

Cause: Template not updated

Fix:

1. Verify ai-judgement-header.html uses .ai-decision-bar
2. Check data-ai-decision-bar attribute present
3. Restart Hugo server

Issue: JavaScript not loading¶

Cause: Asset fingerprinting cache

Fix:

rm -rf resources/_gen
hugo server

Success Criteria¶

All of these should be true:

• Decision bar height is 48px (±4px)
• No progress bar visible
• Score displays as "Score: XX / 100"
• Status text has color (no badge background)
• Summary statement inline after separator
• Meta info inline with dot separators
• Action buttons minimal styling
• No console errors
• API call succeeds
• Responsive on mobile

Next Steps After Testing¶

1. If tests pass:
2. Deploy to preview environment
3. Test on multiple resources

4. Gather user feedback

5. If tests fail:

6. Check specific issue in list above
7. Review browser console
8. Verify file changes applied
9. Check Hugo build logs

Debugging Commands¶

# Check Hugo version
hugo version

# Clean build cache
make clean

# Start with verbose logging
hugo server --verbose --debug

# Check asset fingerprinting
ls resources/_gen/assets/js/

# View compiled CSS
cat resources/_gen/assets/scss/...

Contact¶

If issues persist, provide:

1. Screenshot of page
2. Browser console errors
3. Network tab API response
4. Hugo version output