Improve backstage queue controls and kiosk QR layout

.gitignore

@@ -3,3 +3,6 @@ dist
 data/kv_data.json
 assets/*.png
 !assets/cloud_gradient_logo.png
+
+test-results
+playwright-report

Dockerfile

@@ -29,6 +29,11 @@ WORKDIR /app
 # Install pnpm
 RUN npm install -g pnpm
 
+# better-sqlite3 may fall back to a native node-gyp rebuild on Alpine.
+# Keep the build toolchain available so the runtime install/rebuild is
+# deterministic when a prebuilt binary is unavailable.
+RUN apk add --no-cache python3 make g++
+
 # Copy package files
 COPY package.json pnpm-lock.yaml ./
 

package.json

@@ -8,7 +8,9 @@
     "dev": "sb dev src/index.tsx",
     "build": "sb build src/index.tsx",
     "start": "sb start",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots"
   },
   "keywords": [],
   "author": "",
@@ -31,6 +33,7 @@
     "springboard-server": "0.16.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@types/node": "^25.0.0",
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.7",

playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  outputDir: './test-results',
+  fullyParallel: false,
+  workers: 1,
+  reporter: [['list']],
+  use: {
+    baseURL: 'http://127.0.0.1:3217',
+    viewport: { width: 1920, height: 1080 },
+    trace: 'retain-on-failure',
+  },
+  webServer: {
+    command: 'npm rebuild better-sqlite3 && pnpm build && PORT=3217 pnpm start',
+    url: 'http://127.0.0.1:3217/backstage',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

src/components/ParticipantItem.tsx

@@ -54,6 +54,8 @@ export function ParticipantItem({
 
     return (
         <div
+            data-testid="participant-item"
+            data-participant-name={participant.name}
             style={{
                 border: isCurrentPerformer ? '2px solid #1976d2' : '1px solid #ddd',
                 borderRadius: '8px',
@@ -387,9 +389,7 @@ export function ParticipantItem({
                                         <button
                                             onClick={() => {
                                                 setShowMenu(false);
-                                                if (confirm('Remove this participant from the queue?')) {
-                                                    actions.removeFromQueue({ id: participant.id });
-                                                }
+                                                actions.removeFromQueue({ id: participant.id });
                                             }}
                                             style={{
                                                 width: '100%',

src/components/QueueManager.tsx

@@ -71,15 +71,12 @@ function SortableItem({
         transform: CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.5 : 1,
-        cursor: isDragging ? 'grabbing' : 'grab',
     };
 
     return (
         <div
             ref={setNodeRef}
             style={style}
-            {...attributes}
-            {...listeners}
         >
             <div
                 style={{
@@ -196,11 +193,14 @@ function SortableItem({
                             <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', flex: 1 }}>
                                 <div style={{
                                     padding: '4px',
-                                    cursor: 'grab',
+                                    cursor: isDragging ? 'grabbing' : 'grab',
                                     color: '#999',
                                     display: 'flex',
                                     alignItems: 'center'
-                                }}>
+                                }}
+                                    {...attributes}
+                                    {...listeners}
+                                >
                                     <IconGripVertical size={20} />
                                 </div>
                                 <div style={{ flex: 1, minWidth: 0 }}>
@@ -470,9 +470,7 @@ export function QueueManager({
     };
 
     const handleDelete = (id: string) => {
-        if (confirm('Remove this participant from the queue?')) {
-            actions.removeFromQueue({ id });
-        }
+        actions.removeFromQueue({ id });
     };
 
     const handleStartEdit = (participant: Participant) => {

src/index.tsx

@@ -214,14 +214,15 @@ async function createResources(app: ModuleAPI) {
             return {};
         },
 
-        addManualParticipant: async (args: { name: string; description?: string; socialLinks: SocialLink[]; addToQueue?: boolean }) => {
+        addManualParticipant: async (args: { name: string; description?: string; notes?: string; socialLinks: SocialLink[]; addToQueue?: boolean }) => {
             // Enforce 3-link maximum (take first 3 if more provided)
             const validatedSocialLinks = args.socialLinks.slice(0, 3);
 
             const newParticipant: Participant = {
                 id: `participant-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                 name: args.name,
                 description: args.description,
+                notes: args.notes,
                 socialLinks: validatedSocialLinks,
                 order: 0,
                 source: 'manual',

src/pages/BackstagePage.tsx

@@ -47,6 +47,7 @@ export function BackstagePage({
     const [syncStatus, setSyncStatus] = useState<string | null>(null);
     const [manualName, setManualName] = useState('');
     const [manualDescription, setManualDescription] = useState('');
+    const [manualNotes, setManualNotes] = useState('');
     const [manualLinks, setManualLinks] = useState<any[]>([]);
 
     // Auto-refresh effect
@@ -96,13 +97,15 @@ export function BackstagePage({
         await actions.addManualParticipant({
             name: manualName.trim(),
             description: manualDescription.trim() || undefined,
+            notes: manualNotes.trim() || undefined,
             socialLinks: manualLinks,
             addToQueue: false, // Don't add to queue automatically - must be done manually
         });
 
         // Clear form
         setManualName('');
         setManualDescription('');
+        setManualNotes('');
         setManualLinks([]);
     };
 
@@ -186,16 +189,11 @@ export function BackstagePage({
                         No participants in queue yet. Add people from the "All Signed Up" section below.
                     </div>
                 ) : (
-                    queuedParticipants.map((participant, index) => (
-                        <ParticipantItem
-                            key={participant.id}
-                            participant={participant}
-                            index={index}
-                            currentPerformerId={currentPerformerId}
-                            isInQueue={true}
-                            actions={actions}
-                        />
-                    ))
+                    <QueueManager
+                        participants={queuedParticipants}
+                        currentPerformerId={currentPerformerId}
+                        actions={actions}
+                    />
                 )}
             </div>
 
@@ -401,6 +399,27 @@ export function BackstagePage({
                             }}
                         />
                     </div>
+                    <div>
+                        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: 'bold' }}>
+                            Backstage Notes (Internal Only)
+                        </label>
+                        <textarea
+                            value={manualNotes}
+                            onChange={(e) => setManualNotes(e.target.value)}
+                            placeholder="Notes for backstage use only..."
+                            rows={3}
+                            style={{
+                                width: '100%',
+                                padding: '8px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '14px',
+                                resize: 'vertical',
+                                fontFamily: 'inherit',
+                                backgroundColor: '#fffbf0'
+                            }}
+                        />
+                    </div>
                     <div>
                         <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: 'bold' }}>
                             Social Links