From 146de9164025a16a7b3921f02259716462d5bb5e Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 08:41:04 +0000
Subject: [PATCH] Add numbering to attendees list and style the title

Update styling for the key attendees section title to be centered, larger, and bolder. Add a numbering column to the key attendees table.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 68c08cb0-3e5d-40e9-b8bc-df7ff1b2fd8d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/ZgwFc55
Replit-Helium-Checkpoint-Created: true
---
 artifacts/tx-os/src/pages/protocol.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index ebfccb59..666a6935 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -1279,7 +1279,7 @@ export default function ProtocolPage() {
                   ))}
                 </div>
                 <div>
-                  <div className="px-4 pt-2.5 pb-1.5 text-[11px] font-semibold text-slate-400">
+                  <div className="px-4 pt-3 pb-2 text-center text-sm font-bold text-slate-800">
                     {t("protocol.bookings.keyAttendees")}
                   </div>
                   {b.keyAttendees && b.keyAttendees.length > 0 ? (
@@ -2495,6 +2495,9 @@ function AttendeesTable({
       <Table>
         <TableHeader>
           <TableRow className="border-b border-slate-200 bg-slate-100/80 hover:bg-slate-100/80">
+            <TableHead className="h-10 w-10 whitespace-nowrap px-4 text-center text-xs font-bold uppercase tracking-wide text-slate-600">
+              #
+            </TableHead>
             {(["name", "position", "side"] as const).map((col) => (
               <TableHead
                 key={col}
@@ -2511,6 +2514,11 @@ function AttendeesTable({
               key={i}
               className="border-b border-slate-100 last:border-b-0 even:bg-slate-50/60"
             >
+              <TableCell className="w-10 px-4 py-2.5 text-center">
+                <span className="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">
+                  {i + 1}
+                </span>
+              </TableCell>
               <TableCell className="px-4 py-2.5 text-center font-medium text-slate-700">
                 {a.name || "—"}
               </TableCell>