Fix search result navigation and revise OSS worth

app/page.jsx

@@ -447,6 +447,7 @@ export default function Home() {
         developers={developers}
         onResults={handleSearch}
         onReset={handleResetFilter}
+        onSelectDeveloper={handleSelectDev}
         onGenerateCard={handleGenerateCard}
         onSearchState={handleTourSearchState}
         onOpenCardFeature={handleOpenCardFeature}

components/DetailPanel.jsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { track } from '@vercel/analytics';
 import * as d3 from 'd3';
-import { formatNum, formatRelativeTime, isStaleData } from '../lib/format.js';
+import { formatNum, formatRelativeTime, formatUsd, isStaleData } from '../lib/format.js';
 import { DIMENSIONS, SCORE_METHODOLOGY } from '../lib/scoring.js';
 import { SOCIAL_PREVIEW_VERSION } from '../lib/site.js';
 import { classifyAgent } from '../lib/agent-class.js';
@@ -417,35 +417,40 @@ function OssWorthSection({ worth }) {
           <span>Public contribution footprint</span>
           <h3 id="oss-worth-title">OSS Worth</h3>
         </div>
-        <strong title={`${worth.totalCredits.toLocaleString()} OSS Credits`}>
-          {formatNum(worth.totalCredits)} <small>OSC</small>
-        </strong>
+        <div className="oss-worth__totals">
+          <strong title={`${worth.totalCredits.toLocaleString()} OSS Credits`}>
+            {formatNum(worth.totalCredits)} <small>OSC</small>
+          </strong>
+          <span title={`${formatUsd(worth.totalDollarValue)} estimated value`}>
+            {formatUsd(worth.totalDollarValue, true)} estimated
+          </span>
+        </div>
       </div>
       <p className="oss-worth__disclaimer">
-        Fictional OSS Credits celebrate public contributions. They are not compensation, skill, employability, or financial value.
+        A playful estimate based on public activity, not compensation, skill, employability, or market value. 10 OSC equals $1 in this estimate.
       </p>
       <div className="oss-worth__cards">
-        <WorthCard platform="GitHub" allocation="60% allocation" worth={worth.github} />
-        <WorthCard platform="Stack Overflow" allocation="40% allocation" worth={worth.stackoverflow} />
+        <WorthCard platform="GitHub" worth={worth.github} />
+        <WorthCard platform="Stack Overflow" worth={worth.stackoverflow} />
       </div>
       <details className="oss-worth__methodology">
         <summary>How this is calculated</summary>
-        <p>Inputs are log-normalized against fixed reference caps. Formula {worth.formulaVersion}.</p>
+        <p>GitHub follows GitEstimate: contributions × $0.50 + followers × $0.10 + stars × $0.30. Stack Overflow is calculated separately using answers × $0.50 + reputation × $0.10 + badges × $0.30. Formula {worth.formulaVersion}.</p>
       </details>
     </section>
   );
 }
 
-function WorthCard({ platform, allocation, worth }) {
+function WorthCard({ platform, worth }) {
   const platformClass = platform === 'GitHub' ? 'github' : 'stackoverflow';
   return (
     <article className={`worth-card worth-card--${platformClass}${worth.available ? '' : ' worth-card--unavailable'}`}>
       <div className="worth-card__header">
         <span>{platform}</span>
-        <small>{allocation}</small>
+        <small>Independent value</small>
       </div>
-      <strong title={`${worth.credits.toLocaleString()} of ${worth.maxCredits.toLocaleString()} OSS Credits`}>
-        {formatNum(worth.credits)} <small>/ {formatNum(worth.maxCredits)} OSC</small>
+      <strong title={`${formatUsd(worth.dollarValue)} and ${worth.credits.toLocaleString()} OSS Credits`}>
+        {formatUsd(worth.dollarValue, true)} <small>· {formatNum(worth.credits)} OSC</small>
       </strong>
       {!worth.available ? (
         <p>No linked Stack Overflow profile</p>
@@ -455,7 +460,7 @@ function WorthCard({ platform, allocation, worth }) {
             <li key={dimension.key}>
               <span>
                 {dimension.label}
-                <small>{Math.round(dimension.weight * 100)}% · cap {formatNum(dimension.cap)}</small>
+                <small>{formatUsd(dimension.dollarsPerUnit)} each · {formatUsd(dimension.dollarValue, true)}</small>
               </span>
               <b>{formatNum(dimension.sourceValue)}</b>
             </li>

components/Leaderboard.jsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react';
-import { formatNum } from '../lib/format.js';
+import { formatNum, formatUsd } from '../lib/format.js';
 import { extractCountry, normalizeCountry, countryKey } from '../lib/country.js';
 import { SCORE_METHODOLOGY } from '../lib/scoring.js';
 import { compareOssWorth } from '../lib/oss-worth.js';
@@ -262,10 +262,10 @@ export default function Leaderboard({
                     {dev.soReputation ? <span className="lb-badge lb-badge--so" title="SO Reputation">● {formatNum(dev.soReputation)}</span> : null}
                     <span
                       className="lb-badge lb-badge--worth"
-                      title={`${dev.ossWorth?.totalCredits?.toLocaleString() || 0} OSS Credits`}
-                      aria-label={`${dev.ossWorth?.totalCredits?.toLocaleString() || 0} OSS Credits`}
+                      title={`${dev.ossWorth?.totalCredits?.toLocaleString() || 0} OSS Credits · ${formatUsd(dev.ossWorth?.totalDollarValue || 0)} estimated`}
+                      aria-label={`${dev.ossWorth?.totalCredits?.toLocaleString() || 0} OSS Credits, ${formatUsd(dev.ossWorth?.totalDollarValue || 0)} estimated`}
                     >
-                      OSC {formatNum(dev.ossWorth?.totalCredits || 0)}
+                      OSC {formatNum(dev.ossWorth?.totalCredits || 0)} · {formatUsd(dev.ossWorth?.totalDollarValue || 0, true)}
                     </span>
                   </div>
                 </div>

components/SearchBar.jsx

@@ -25,7 +25,7 @@ const SAMPLES_BY_MODE = {
   ],
 };
 
-export default function SearchBar({ developers, onResults, onReset, onGenerateCard, onSearchState, onOpenCardFeature, onOpenCompareFeature, compareCount = 0 }) {
+export default function SearchBar({ developers, onResults, onReset, onSelectDeveloper, onGenerateCard, onSearchState, onOpenCardFeature, onOpenCompareFeature, compareCount = 0 }) {
   const [query, setQuery] = useState('');
   const [mode, setMode] = useState('text');
   const [topN, setTopN] = useState(50);
@@ -230,18 +230,25 @@ export default function SearchBar({ developers, onResults, onReset, onGenerateCa
           </div>
           {singleResult && (
             <div className="search-bar__card-suggestion">
-              <img src={singleResult.avatarUrl} alt="" />
-              <div className="search-bar__card-identity">
-                <strong>
-                  {singleResult.name || singleResult.login}
-                  <SpecialTags tags={singleResult.specialTags} compact />
-                </strong>
-                <span>
-                  @{singleResult.login}
-                  {singleResult.globalRank ? ` · Global #${singleResult.globalRank}` : ''}
+              <button
+                type="button"
+                className="search-bar__profile-result"
+                onClick={() => onSelectDeveloper(singleResult)}
+                aria-label={`Open ${singleResult.name || singleResult.login}'s profile`}
+              >
+                <img src={singleResult.avatarUrl} alt="" />
+                <span className="search-bar__card-identity">
+                  <strong>
+                    {singleResult.name || singleResult.login}
+                    <SpecialTags tags={singleResult.specialTags} compact />
+                  </strong>
+                  <span>
+                    @{singleResult.login}
+                    {singleResult.globalRank ? ` · Global #${singleResult.globalRank}` : ''}
+                  </span>
                 </span>
-              </div>
-              <button onClick={() => onGenerateCard(singleResult)}>
+              </button>
+              <button type="button" className="search-bar__card-action" onClick={() => onGenerateCard(singleResult)}>
                 <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                   <rect x="3" y="3" width="18" height="18" rx="2" />
                   <circle cx="8.5" cy="8.5" r="1.5" />