kyd-shared-badge 0.3.28 → 0.3.29

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -4,6 +4,7 @@ import { FiAlertTriangle } from 'react-icons/fi';
 import { PublicBadgeData, GraphInsightsPayload, ScoringSummary, BusinessRule, TopBusinessRule } from './types';
 // import ShareButton from './components/ShareButton';
 import ReportHeader from './components/ReportHeader';
+import EnterpriseCoaching from './components/EnterpriseCoaching';
 import AppendixTables from './components/AppendixTables';
 import BusinessRuleLink from './components/BusinessRuleLink';
 import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
@@ -178,6 +179,17 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
         />
       </Reveal>
+      {/* Coaching / Evidence under header when present */}
+      {(() => {
+        const em = (assessmentResult as any)?.enterprise_match;
+        const coaching = em?.coaching;
+        if (!coaching || !(Array.isArray(coaching.items) && coaching.items.length)) return null;
+        return (
+          <Reveal headless={isHeadless}>
+            <EnterpriseCoaching roleName={em?.role?.name} matchLabel={em?.label} coaching={coaching} />
+          </Reveal>
+        );
+      })()}
       <div
         className={isHeadless ? 'p-6 sm:p-8 mt-2 border' : 'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
         style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}

package/src/components/EnterpriseCoaching.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { FiThumbsUp, FiTrendingUp, FiInfo } from 'react-icons/fi';
+
+type CoachingItem = {
+  headline: string;
+  rationale: string;
+  action?: string;
+  type?: 'support' | 'coaching';
+};
+
+export default function EnterpriseCoaching({
+  roleName,
+  matchLabel,
+  coaching,
+}: {
+  roleName?: string;
+  matchLabel?: string;
+  coaching?: { items?: CoachingItem[]; summary?: string } | null;
+}) {
+  if (!coaching || !Array.isArray(coaching.items) || coaching.items.length === 0) return null;
+
+  const toneTint = (label?: string) => {
+    const l = (label || '').toLowerCase();
+    if (l.includes('optimal') || l.includes('strong')) return 'rgba(2,163,137,0.10)';
+    if (l.includes('moderate')) return 'rgba(255,187,84,0.10)';
+    return 'rgba(236,102,98,0.10)';
+  };
+
+  return (
+    <div className={'mt-4 p-4 rounded-lg border'} style={{ background: toneTint(matchLabel), borderColor: 'var(--icon-button-secondary)' }}>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <span className={'px-2 py-1 rounded text-xs font-semibold'} style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+            {matchLabel || 'Role Match'}
+          </span>
+          <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>
+            {roleName ? `Role Alignment — ${roleName}` : 'Role Alignment'}
+          </div>
+          <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
+            <FiInfo size={14} />
+            <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
+              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
+                <div style={{ fontWeight: 600 }}>AI-generated</div>
+                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>These items reflect alignment evidence and coaching opportunities based on the role requirements.</div>
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+      <ul className={'space-y-3'}>
+        {coaching.items.slice(0, 4).map((it, idx) => {
+          const isSupport = (it.type || '').toLowerCase() === 'support';
+          return (
+            <li key={idx} className={'flex items-start gap-3'} style={{ color: 'var(--text-secondary)' }}>
+              <div className={'mt-0.5'} style={{ color: isSupport ? 'var(--text-main)' : 'var(--text-secondary)' }}>
+                {isSupport ? <FiThumbsUp size={16} /> : <FiTrendingUp size={16} />}
+              </div>
+              <div>
+                <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{it.headline}</div>
+                <div className={'text-sm'}>{it.rationale}</div>
+                {it.action ? (
+                  <div className={'text-sm'}>
+                    <span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Action:</span> {it.action}
+                  </div>
+                ) : null}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      {coaching.summary ? (
+        <div className={'mt-3 text-sm'} style={{ color: 'var(--text-secondary)' }}>{coaching.summary}</div>
+      ) : null}
+    </div>
+  );
+}
+
+

package/src/types.ts

@@ -154,6 +154,18 @@ export interface FBIWantedMatch {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   raw_result: any;
 }
+export interface EnterpriseCoachingItem {
+  headline: string;
+  rationale: string;
+  action?: string;
+  type: 'support' | 'coaching';
+}
+
+export interface EnterpriseCoaching {
+  items: EnterpriseCoachingItem[];
+  summary?: string;
+}
+
 export interface EnterpriseMatch {
   role: {
     name: string;
@@ -161,6 +173,7 @@ export interface EnterpriseMatch {
   };
   label: string;
   description: string;
+  coaching?: EnterpriseCoaching;
 }