T34-TigerByte · alexYooDev · May 26, 2026 · May 26, 2026
diff --git a/frontend/public/Spike-Thumbs-Up.png b/frontend/public/Spike-Thumbs-Up.png
diff --git a/frontend/src/components/ui/CalloutBox.tsx b/frontend/src/components/ui/CalloutBox.tsx
@@ -16,7 +16,7 @@ const STYLES: Record<CalloutStatus, { border: string; bg: string; text: string }
 export default function CalloutBox({ status, title, children, className = 'mt-4' }: CalloutBoxProps) {
   const { border, bg, text } = STYLES[status];
   return (
-    <div className={`${className} pl-4 py-3 border-l-4 rounded-r-lg ${border} ${bg}`}>
+    <div className={`${className} pl-4 py-3 border-l-4 rounded-r-lg print:break-inside-avoid ${border} ${bg}`}>
       {title && (
         <p className={`font-mono text-[10px] font-semibold uppercase tracking-widest ${children ? 'mb-2' : ''} ${text}`}>
           {title}

diff --git a/frontend/src/components/ui/PerformanceReportView.tsx b/frontend/src/components/ui/PerformanceReportView.tsx
@@ -2,13 +2,13 @@ import { useState } from 'react';
 import { Download } from 'lucide-react';
 import type { SessionReport } from '../../schemas/api.schema';
 import SectionPanel from './SectionPanel';
-import InfoField from './InfoField';
 import { toScoreStatus, toQuestionType, barColor, scoreColor } from '../../pages/learner/performance/utils';
 import { TACTIC_LABELS, BCSM_STAGE_META, BCSM_SHORT_LABELS } from '../../pages/learner/performance/constants';
 import type { ScoreEntry, InvQuestion, BcsmStage, BcsmBreakdownEntry, ChipStatus } from '../../pages/learner/performance/types';
 import InvestigationSection from '../../pages/learner/performance/InvestigationSection';
 import NegotiationSection from '../../pages/learner/performance/NegotiationSection';
 import BcsmSection from '../../pages/learner/performance/BcsmSection';
+import PartBSection from '../../pages/learner/performance/PartBSection';
 
 export interface ReportHeaderField {
   label: string;
@@ -24,7 +24,7 @@ interface Props {
 }
 
 export default function PerformanceReportView({ report, isLoading, headerTitle, headerFields, onBack }: Props) {
-  const [open, setOpen] = useState({ s1: true, s2: true, s3: true });
+  const [open, setOpen] = useState({ s1: true, s2: true, s3: true, s4: true });
   const toggle = (key: keyof typeof open) => setOpen(prev => ({ ...prev, [key]: !prev[key] }));
 
   const isReportReady = !!(report?.scores?.total && report?.verdict && report?.investigation && report?.bcsm);
@@ -69,6 +69,7 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
         points: q.points,
         verified: aiVerified[i] ?? false,
         correctAnswer: q.correct_answer,
+        selectedAnswer: q.selected_answer ?? '—',
       }))
     : [];
 
@@ -80,6 +81,7 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
     points: aiFeedback?.ENCRYPTION_PROOF ? 10 : 0,
     verified: aiFeedback?.ENCRYPTION_PROOF ?? false,
     correctAnswer: 'Request decryption proof from threat actor',
+    selectedAnswer: aiFeedback?.ENCRYPTION_PROOF ? 'Requested' : 'Not requested',
   } : null;
 
   const allInvestigation = encryptionProofQ ? [...investigation, encryptionProofQ] : investigation;
@@ -138,13 +140,11 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
             <p className='text-slate-400 text-sm'>
               Behavioral Change Stairway Model (BCSM) post-session evaluation
             </p>
-            <div className={`grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-${Math.min(headerFields.length, 5)} gap-4 mt-5`}>
+            <div className='flex flex-wrap gap-x-6 gap-y-1.5 mt-4'>
               {headerFields.map(field => (
-                <InfoField
-                  key={field.label}
-                  label={field.label}
-                  value={<span className='text-slate-300 font-mono text-xs'>{field.value}</span>}
-                />
+                <span key={field.label} className='font-mono text-xs text-slate-500'>
+                  {field.label}: <span className='text-slate-300'>{field.value}</span>
+                </span>
               ))}
             </div>
           </div>
@@ -153,6 +153,16 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
         <></>
       </SectionPanel>
 
+      {!isLoading && isReportReady && (
+        <div className='px-5 py-3.5 rounded-lg bg-gray-50 border-l-4 border-orange-400'>
+          <p className='font-mono text-[10px] text-orange-600 uppercase tracking-widest mb-1'>How the score is composed</p>
+          <p className='text-xs text-gray-500'>
+            Performance score = 100%: Investigation tasks 40% + Negotiation outcomes 10% (AI-evaluated) + BCSM five-stage assessment 50% (AI-evaluated).
+            {report?.verdict?.pass_threshold ? ` A score of ${report.verdict.pass_threshold} or above is a pass.` : ''}
+          </p>
+        </div>
+      )}
+
       {isLoading && (
         <div className='flex flex-col items-center justify-center py-16 gap-3'>
           <div className='w-8 h-8 rounded-full border-2 border-gray-200 border-t-orange-500 animate-spin' />
@@ -177,7 +187,7 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
 
       {!isLoading && isReportReady && (
         <>
-          <div className='grid grid-cols-2 lg:grid-cols-4 gap-3'>
+          <div className='grid grid-cols-2 lg:grid-cols-4 gap-3 print:break-inside-avoid'>
             {scores.map((s) => (
               <div
                 key={s.label}
@@ -202,11 +212,11 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
 
           {verdict && (
             <div
-              className={`flex items-start gap-3 px-5 py-4 rounded-xl border ${verdict.passed ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}
+              className={`flex items-start gap-3 px-5 py-4 rounded-xl border print:break-inside-avoid ${verdict.passed ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}
             >
               <span className='text-2xl mt-0.5'>◎</span>
               <div>
-                <p className='text-sm font-bold text-gray-900'>{verdict.title}</p>
+                <p className='font-mono text-xs font-semibold text-gray-900 uppercase tracking-wider'>{verdict.title}</p>
                 <p className='text-xs text-gray-500 mt-1 leading-relaxed'>
                   {report?.open_ended_evaluation}
                 </p>
@@ -241,6 +251,11 @@ export default function PerformanceReportView({ report, isLoading, headerTitle,
             isOpen={open.s3}
             onToggle={() => toggle('s3')}
           />
+
+          <PartBSection
+            isOpen={open.s4}
+            onToggle={() => toggle('s4')}
+          />
         </>
       )}
     </div>

diff --git a/frontend/src/components/ui/SectionPanel.tsx b/frontend/src/components/ui/SectionPanel.tsx
@@ -10,7 +10,7 @@ interface SectionPanelProps {
 
 export default function SectionPanel({ title, icon, header, children, className }: SectionPanelProps) {
   return (
-    <section className={`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${className ?? ''}`}>
+    <section className={`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden print:overflow-visible print:break-inside-avoid ${className ?? ''}`}>
       {header ?? <PanelHeader icon={icon} title={title} />}
       {children}
     </section>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -6,4 +6,26 @@ html, body {
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
+}
+
+@media print {
+  html, body {
+    background: white !important;
+    background-image: none !important;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Prevent table rows from splitting across pages */
+  tr {
+    break-inside: avoid;
+  }
+
+  /* Keep headings with the content that follows */
+  h3 {
+    break-after: avoid;
+  }
 }
diff --git a/frontend/src/pages/learner/performance/BcsmSection.tsx b/frontend/src/pages/learner/performance/BcsmSection.tsx
@@ -1,8 +1,6 @@
 import SectionPanel from '../../../components/ui/SectionPanel';
-import CalloutBox from '../../../components/ui/CalloutBox';
 import type { BcsmStage, BcsmBreakdownEntry } from './types';
-import { toScoreStatus, scoreColor, stageNumClass, chipClass, chipPrefix } from './utils';
-import { TACTIC_DESCRIPTIONS } from './constants';
+import { toScoreStatus, scoreColor, stageNumClass } from './utils';
 import SectionToggleHeader from './SectionToggleHeader';
 
 interface Props {
@@ -14,6 +12,17 @@ interface Props {
   onToggle: () => void;
 }
 
+function buildNotes(chips: BcsmStage['chips'], score: number, max: number): { main: string; missed: string } {
+  const detected = chips.filter(c => c.status === 'detected').map(c => c.label);
+  const missed = chips.filter(c => c.status === 'missed').map(c => c.label);
+  const n = detected.length;
+  const marksText = score >= max ? 'full marks' : score > 0 ? 'partial marks' : 'no marks';
+  const main = n > 0
+    ? `Detected: ${detected.join(', ')}. ${n} action${n !== 1 ? 's' : ''} — ${marksText}.`
+    : `No actions detected. 0 actions — ${marksText}.`;
+  return { main, missed: missed.length > 0 ? `Missed: ${missed.join(', ')}.` : '' };
+}
+
 export default function BcsmSection({ bcsm, bcsmBreakdown, totalScore, maxScore, isOpen, onToggle }: Props) {
   return (
     <SectionPanel
@@ -33,66 +42,62 @@ export default function BcsmSection({ bcsm, bcsmBreakdown, totalScore, maxScore,
       }
     >
       {isOpen && (
-        <div className='border-t border-gray-200 px-5 py-4 space-y-3'>
-          <p className='font-mono text-[10px] text-gray-400 text-right'>
+        <div className='border-t border-gray-200'>
+          <p className='font-mono text-[10px] text-gray-400 text-right px-5 pt-3 pb-1'>
             5 pts = 1 action detected · 10 pts = 2 or more actions detected
           </p>
-          {bcsm.map((stage) => (
-            <div key={stage.num} className='border border-gray-200 rounded-xl p-4'>
-              <div className='flex items-center justify-between mb-3'>
-                <div className='flex items-center gap-3'>
-                  <div className={`w-6 h-6 rounded-full flex items-center justify-center font-mono text-xs font-bold shrink-0 ${stageNumClass(stage.status)}`}>
-                    {stage.num}
-                  </div>
-                  <div>
-                    <p className='text-sm font-semibold text-gray-900'>{stage.title}</p>
-                    <p className='text-xs text-gray-400 mt-0.5'>{stage.subtitle}</p>
-                  </div>
-                </div>
-                <span className={`font-mono text-base font-bold ${scoreColor(stage.status)}`}>
-                  {stage.score} / {stage.max}
-                </span>
-              </div>
-              <div className='flex flex-wrap gap-1.5'>
-                {stage.chips.map((chip) => (
-                  <span
-                    key={chip.key}
-                    className={`text-xs px-2.5 py-1 rounded-full border font-mono flex items-center gap-1 ${chipClass(chip.status)}`}
-                  >
-                    <span className='text-[10px]'>{chipPrefix(chip.status)}</span>
-                    {chip.label}
-                  </span>
-                ))}
-              </div>
-              {stage.chips.some((c) => c.status === 'missed') && (
-                <CalloutBox
-                  status={stage.chips.some((c) => c.status === 'detected') ? 'partial' : 'fail'}
-                  title='Missed tactics'
-                  className='mt-3'
-                >
-                  <ul className='space-y-1.5'>
-                    {stage.chips
-                      .filter((c) => c.status === 'missed')
-                      .map((c) => (
-                        <li key={c.key}>
-                          <span className='font-semibold'>{c.label}</span>
-                          {TACTIC_DESCRIPTIONS[c.key] ? ` — ${TACTIC_DESCRIPTIONS[c.key]}` : ''}
-                        </li>
-                      ))}
-                  </ul>
-                </CalloutBox>
-              )}
-            </div>
-          ))}
-          <div className='grid grid-cols-5 gap-2 mt-2 bg-gray-50 rounded-xl p-4 text-center'>
-            {bcsmBreakdown.map((b) => (
+          <table className='w-full text-sm'>
+            <thead>
+              <tr className='bg-gray-50'>
+                <th className='text-left px-5 py-2.5 font-mono text-[10px] text-gray-400 uppercase tracking-wide w-52'>Stage</th>
+                <th className='text-center px-4 py-2.5 font-mono text-[10px] text-gray-400 uppercase tracking-wide w-24'>Score</th>
+                <th className='text-left px-4 py-2.5 font-mono text-[10px] text-gray-400 uppercase tracking-wide'>Detected actions &amp; notes</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bcsm.map(stage => {
+                const notes = buildNotes(stage.chips, stage.score, stage.max);
+                return (
+                <tr key={stage.num} className='border-t border-gray-100 align-top'>
+                  <td className='px-5 py-3 w-52'>
+                    <div className='flex items-start gap-2'>
+                      <div className={`w-5 h-5 rounded-full flex items-center justify-center font-mono text-[10px] font-bold shrink-0 mt-0.5 ${stageNumClass(stage.status)}`}>
+                        {stage.num}
+                      </div>
+                      <div>
+                        <p className='text-sm font-semibold text-gray-900'>{stage.title}</p>
+                        <p className='text-xs text-gray-400 mt-0.5 leading-snug'>{stage.subtitle}</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className='px-4 py-3 text-center w-24'>
+                    <span className={`font-mono text-sm font-bold whitespace-nowrap ${scoreColor(stage.status)}`}>
+                      {stage.score} / {stage.max}
+                    </span>
+                  </td>
+                  <td className='px-4 py-3'>
+                    <p className='text-xs text-gray-600 leading-relaxed'>{notes.main}</p>
+                    {notes.missed && (
+                      <p className='text-xs text-orange-400 leading-relaxed mt-1'>{notes.missed}</p>
+                    )}
+                  </td>
+                </tr>
+                );
+              })}
+            </tbody>
+          </table>
+
+          {/* Score breakdown strip */}
+          <div className='mx-5 mt-3 mb-4 grid grid-cols-5 gap-2 bg-gray-50 rounded-xl p-4 text-center'>
+            {bcsmBreakdown.map(b => (
               <div key={b.label}>
                 <p className='font-mono text-[10px] text-gray-400 uppercase mb-1'>{b.label}</p>
                 <p className={`font-mono text-base font-bold ${scoreColor(b.status)}`}>{b.score}</p>
               </div>
             ))}
           </div>
-          <div className='flex items-center gap-2 pt-3 border-t border-gray-100'>
+
+          <div className='flex items-center gap-2 px-5 pb-4 pt-1 border-t border-gray-100'>
             <span className='text-gray-400 text-sm'>◈</span>
             <p className='font-mono text-[10px] text-gray-400'>
               BCSM stages evaluated by AI Model 3 · Full conversation transcript analysed