kyd-shared-badge 0.2.30 → 0.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -49,14 +49,11 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
   const graphInsights: GraphInsightsPayload = (assessmentResult)?.graph_insights || {} as GraphInsightsPayload;
   const scoringSummary: ScoringSummary = (assessmentResult)?.scoring_summary || {} as ScoringSummary;
   
-  // const devTrustScore = summary_scores.developer_trust;
-  // const riskScore = summary_scores.risk_score;
-  // const aiUsageScore = summary_scores.ai_usage;
 
   const wrapperMaxWidth = 'max-w-5xl';
 
   // Overall and genre scores
-  const overallFinalPercent = Math.round(Number(scoringSummary?.overall?.combined?.percent_progress || 0));
+  const overallFinalPercent = assessmentResult?.final_percent || 0;
 
   // Build category display grouped by genres from scoring_summary.config.genre_mapping
   const genreMapping = (scoringSummary?.config?.genre_mapping) || {};
@@ -155,75 +152,70 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
         className={'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
         style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
       >
-
         <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
           <div className="pt-8 first:pt-0">
             <Reveal as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              {/* Technical semicircle gauge (refactored) */}
-              {(() => {
-                const ui = graphInsights?.uiSummary?.technical || {};
-                const pct = Math.round(Number(ui?.percent ?? 0));
-                const label = ui?.label || 'EVIDENCE';
-                const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Technical');
-                return (
-                  <Reveal delayMs={0} offsetY={12}>
-                    <GaugeCard
-                      key={'technical-card'}
-                      title={'KYD Technical'}
-                      description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
-                      percent={pct}
-                      label={label}
-                      topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                      topMoversTitle={'Top Score Movers'}
-                    />
-                  </Reveal>
-                );
-              })()}
-
-              {/* Risk descending bars card (abstracted) */}
-              {(() => {
-                const ui = graphInsights?.uiSummary?.risk || {};
-                const pctGood = Math.round(Number(ui?.percent_good ?? 0));
-                const label = ui?.label || 'RISK';
-                const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Risk');
-                const tooltip = 'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.';
-                return (
-                  <Reveal delayMs={80} offsetY={12}>
-                    <RiskCard
-                      title={'KYD Risk'}
-                      description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
-                      percentGood={pctGood}
-                      label={label}
-                      topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                      topMoversTitle={'Top Score Movers'}
-                      tooltipText={tooltip}
-                    />
-                  </Reveal>
-                );
-              })()}
-
-              {/* AI transparency semicircle gauge */}
-              {(() => {
-                const ai_usage_summary = assessmentResult?.ai_usage_summary;
-                const label = 'AI Transparency'// TODO: calculate label frontend
-                const topMovers = ai_usage_summary?.key_findings || []
-                return (
-                  <Reveal delayMs={160} offsetY={12}>
-                    <GaugeCard
-                      key={'ai-card'}
-                      title={'KYD AI'}
-                      description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
-                      percent={ai_usage_summary?.transparency_score}
-                      label={label}
-                      // id non-functional
-                      topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
-                      topMoversTitle={'Key Findings'}
-                    />
-                  </Reveal>
-                );
-              })()}
-            </div>
+            <Reveal as={'div'} offsetY={8} durationMs={500} className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full">
+                {/* Technical semicircle gauge (refactored) */}
+                {(() => {
+                  const ui = graphInsights?.uiSummary?.technical || {};
+                  const pct = Math.round(Number(ui?.percent ?? 0));
+                  const label = ui?.label || 'EVIDENCE';
+                  const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Technical');
+                  return (
+                      <GaugeCard
+                        key={'technical-card'}
+                        title={'KYD Technical'}
+                        description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
+                        percent={pct}
+                        label={label}
+                        topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
+                        topMoversTitle={'Top Score Movers'}
+                      />
+                  );
+                })()}
+
+                {/* Risk descending bars card (abstracted) */}
+                {(() => {
+                  const ui = graphInsights?.uiSummary?.risk || {};
+                  const pctGood = Math.round(Number(ui?.percent_good ?? 0));
+                  const label = ui?.label || 'RISK';
+                  const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Risk');
+                  const tooltip = 'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.';
+                  return (
+                      <RiskCard
+                        title={'KYD Risk'}
+                        description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
+                        percentGood={pctGood}
+                        label={label}
+                        topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
+                        topMoversTitle={'Top Score Movers'}
+                        tooltipText={tooltip}
+                      />
+                  );
+                })()}
+
+                {/* AI transparency semicircle gauge */}
+                {(() => {
+                  const ai_usage_summary = assessmentResult?.ai_usage_summary;
+                  const label = 'AI Transparency'// TODO: calculate label frontend
+                  const topMovers = ai_usage_summary?.key_findings || []
+                  return (
+                      <GaugeCard
+                        key={'ai-card'}
+                        title={'KYD AI'}
+                        description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
+                        percent={ai_usage_summary?.transparency_score}
+                        label={label}
+                        // id non-functional
+                        topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
+                        topMoversTitle={'Key Findings'}
+                      />
+                  );
+                })()}
+              </div>
+            </Reveal>
           </div>
 
           {/* Technical Scores */}

package/src/components/GaugeCard.tsx

@@ -34,7 +34,7 @@ export default function GaugeCard({
 
   return (
     <div
-      className={'rounded-md p-5 border flex flex-col'}
+      className={'rounded-md p-5 border flex flex-col min-h-full'}
       style={{
         backgroundColor: 'var(--content-card-background)',
         borderColor: 'var(--icon-button-secondary)',

package/src/components/Reveal.tsx

@@ -4,7 +4,7 @@ import React, { CSSProperties, PropsWithChildren } from 'react';
 import { useInViewOnce } from './useInViewOnce';
 
 type RevealProps = PropsWithChildren<{
-  as?: keyof JSX.IntrinsicElements;
+  as?: React.ElementType;
   /** px to translate on Y axis initially */
   offsetY?: number;
   /** px to translate on X axis initially (rarely needed) */

package/src/types.ts

@@ -156,6 +156,7 @@ export interface FBIWantedMatch {
 }
 
 export interface AssessmentResult {
+  final_percent: number;
   report_summary?: string;
   recommendations: {
     summary?: string;
@@ -238,6 +239,10 @@ export interface ClientMetadata {
 // --- Scoring Summary (from rules engine) ---
 export interface ScoringSummaryConfig {
   coldstart_fraction?: number;
+  coldstart_mapping?: {
+    default?: number;
+    by_category?: { [category: string]: number };
+  };
   system_weights?: { [k: string]: number };
   genre_mapping?: { [genre: string]: string[] };
 }