Skip to content

Add expandable 'Why this score?' explanation under match score - #2

Open
Uzma1206 wants to merge 1 commit into
wadekarg:mainfrom
Uzma1206:main
Open

Add expandable 'Why this score?' explanation under match score#2
Uzma1206 wants to merge 1 commit into
wadekarg:mainfrom
Uzma1206:main

Conversation

@Uzma1206

@Uzma1206 Uzma1206 commented Aug 1, 2026

Copy link
Copy Markdown

What this does

Adds a collapsible "Why this score?" section directly under the match score circle. When expanded, it shows a plain-language breakdown of what's helping the candidate's fit ("Why it's strong") and what's holding it back ("What's holding it back"), sourced from the existing insights.strengths and insights.gaps fields already returned by the AI analysis.

Motivation

The AI response already includes insights.strengths and insights.gaps — this data was being rendered lower down in the separate Insights section, but nothing tied it directly to the score itself. Users see an "80" or "65" with no immediate context for why that number was chosen. This surfaces that reasoning right where users are already looking, without requiring them to scroll down to a separate section.

Changes

  • content.js: Added a <details>/<summary> block to the score section template (getPanelHTML), and populated it in renderAnalysis() using the existing data.insights.strengths / data.insights.gaps fields — no changes to the AI prompt or response schema were needed.
  • styles.css: Added minimal styling for the new .jm-why-score block, including custom expand/collapse arrows (▸ / ▾) and removal of the default <details> marker.

Why this approach

Used the native <details>/<summary> HTML elements instead of a custom toggle with a JS click handler — this keeps the change small, avoids adding event listeners, and gets keyboard accessibility and expand/collapse behavior for free from the browser.

Testing

  • Verified on multiple live job postings (LinkedIn) with varying resume/job combinations
  • Confirmed expand/collapse toggle works correctly and arrow direction updates
  • Confirmed no regression to the existing Matching Skills / Missing Skills / Recommendations / Insights sections below it
  • Confirmed the section doesn't render (gracefully) when insights.strengths/insights.gaps are absent from the AI response

Screenshots

(attach a screenshot of the collapsed and expanded state here)

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.

1 participant