Explain inter-rater reliability before the first reviewer pair completes

The section only rendered once a reviewer pair had produced comparable
answers, so a dual-review project with nothing finished yet showed no
trace of the feature at all. It now keeps its heading and says what
unlocks the numbers whenever any study has two different reviewers,
and stays hidden entirely on single-reviewer projects.

Claude-Session: https://claude.ai/code/session_01H77BMkZ9GhK8D98TG4cpTg

Author: InfinityBowman

packages/web/src/components/project/overview-tab/OverviewTab.tsx

@@ -90,6 +90,12 @@ export function OverviewTab() {
     return map;
   }, [studies]);
 
+  // Reliability only applies to studies two different people appraise, so the
+  // section stays hidden entirely on a single-reviewer project.
+  const dualReviewedStudies = studies.filter(
+    s => s.reviewer1 && s.reviewer2 && s.reviewer1 !== s.reviewer2,
+  ).length;
+
   const reliability = useMemo(() => {
     // getData throws while the pool has no active connection (a cold refresh
     // renders this tab from cached rows before the gate's effects run) --
@@ -115,7 +121,9 @@ export function OverviewTab() {
 
             <ProgressSection counts={stageCounts} total={studies.length} />
 
-            {reliability.length > 0 && <ReliabilitySection tools={reliability} />}
+            {(reliability.length > 0 || dualReviewedStudies > 0) && (
+              <ReliabilitySection tools={reliability} dualReviewedStudies={dualReviewedStudies} />
+            )}
 
             {!empty && (
               <section aria-labelledby='overview-results-heading'>

packages/web/src/components/project/overview-tab/ReliabilitySection.tsx

@@ -20,6 +20,7 @@ import { ReliabilityAboutDialog } from './ReliabilityAboutDialog';
 
 interface ReliabilitySectionProps {
   tools: ToolReliability[];
+  dualReviewedStudies: number;
 }
 
 // Landis and Koch band boundaries, which getKappaInterpretation also uses
@@ -188,22 +189,31 @@ function ToolCard({ tool }: { tool: ToolReliability }) {
   );
 }
 
-export function ReliabilitySection({ tools }: ReliabilitySectionProps) {
+export function ReliabilitySection({ tools, dualReviewedStudies }: ReliabilitySectionProps) {
   return (
     <section aria-labelledby='overview-reliability-heading'>
       <div className='mb-2.5 flex items-baseline justify-between gap-4'>
         <h2 id='overview-reliability-heading' className='text-sm font-semibold'>
           Inter-rater reliability
         </h2>
-        <span className='text-muted-foreground text-xs'>
-          Before reconciliation, pooled across reviewer pairs
-        </span>
-      </div>
-      <div className='flex flex-col gap-3'>
-        {tools.map(tool => (
-          <ToolCard key={tool.definition.type} tool={tool} />
-        ))}
+        {tools.length > 0 && (
+          <span className='text-muted-foreground text-xs'>
+            Before reconciliation, pooled across reviewer pairs
+          </span>
+        )}
       </div>
+      {tools.length === 0 ?
+        <p className='text-muted-foreground text-sm'>
+          Agreement appears once both reviewers of a study have completed their appraisals.{' '}
+          {dualReviewedStudies} {dualReviewedStudies === 1 ? 'study has' : 'studies have'} two
+          reviewers.
+        </p>
+      : <div className='flex flex-col gap-3'>
+          {tools.map(tool => (
+            <ToolCard key={tool.definition.type} tool={tool} />
+          ))}
+        </div>
+      }
     </section>
   );
 }

packages/web/src/components/project/overview-tab/__tests__/ReliabilitySection.test.tsx

@@ -48,7 +48,7 @@ function rob2Tool(): ToolReliability {
 
 describe('ReliabilitySection', () => {
   it('renders one card per tool with agreement, kappa, overall and breakdown', () => {
-    render(<ReliabilitySection tools={[rob2Tool()]} />);
+    render(<ReliabilitySection tools={[rob2Tool()]} dualReviewedStudies={6} />);
 
     expect(screen.getByRole('heading', { name: 'RoB 2' })).toBeInTheDocument();
     expect(screen.getByText('8 outcomes across 6 studies')).toBeInTheDocument();
@@ -79,14 +79,14 @@ describe('ReliabilitySection', () => {
       tool.definition.judgementScale,
       tool.definition.items,
     );
-    render(<ReliabilitySection tools={[tool]} />);
+    render(<ReliabilitySection tools={[tool]} dualReviewedStudies={6} />);
     expect(
       screen.getByText(`Needs ${MIN_PAIRS_FOR_KAPPA - 1} more comparisons`),
     ).toBeInTheDocument();
   });
 
   it('opens a dialog with the tool notes and the confusion matrix', () => {
-    render(<ReliabilitySection tools={[rob2Tool()]} />);
+    render(<ReliabilitySection tools={[rob2Tool()]} dualReviewedStudies={6} />);
     fireEvent.click(screen.getByRole('button', { name: 'How this is calculated' }));
 
     const dialog = screen.getByRole('dialog', {
@@ -99,4 +99,12 @@ describe('ReliabilitySection', () => {
     expect(rows[0]).toHaveTextContent('Low2004');
     expect(rows[2]).toHaveTextContent('High004');
   });
+
+  it('explains what is missing when no reviewer pair has finished yet', () => {
+    render(<ReliabilitySection tools={[]} dualReviewedStudies={1} />);
+
+    expect(screen.getByRole('heading', { name: 'Inter-rater reliability' })).toBeInTheDocument();
+    expect(screen.getByText(/1 study has two reviewers/)).toBeInTheDocument();
+    expect(screen.queryByText(/pooled across reviewer pairs/)).not.toBeInTheDocument();
+  });
 });