From ef28e8c5cea65df07959e7508f9d680ccfb33c4d Mon Sep 17 00:00:00 2001
From: Vibe Kanban <vibe-kanban@example.com>
Date: Wed, 13 May 2026 20:54:00 +0000
Subject: [PATCH 1/4] Fix backstage queue controls

---
 src/components/ParticipantItem.tsx |  4 +--
 src/components/QueueManager.tsx    | 14 +++++------
 src/index.tsx                      |  3 ++-
 src/pages/BackstagePage.tsx        | 39 ++++++++++++++++++++++--------
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/components/ParticipantItem.tsx b/src/components/ParticipantItem.tsx
index ea9543b..22b4877 100644
--- a/src/components/ParticipantItem.tsx
+++ b/src/components/ParticipantItem.tsx
@@ -387,9 +387,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%',
diff --git a/src/components/QueueManager.tsx b/src/components/QueueManager.tsx
index 46e48ca..6a13884 100644
--- a/src/components/QueueManager.tsx
+++ b/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) => {
diff --git a/src/index.tsx b/src/index.tsx
index 2c09c45..865c5b3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -214,7 +214,7 @@ 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);
 
@@ -222,6 +222,7 @@ async function createResources(app: ModuleAPI) {
                 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',
diff --git a/src/pages/BackstagePage.tsx b/src/pages/BackstagePage.tsx
index d102028..ee6c4bb 100644
--- a/src/pages/BackstagePage.tsx
+++ b/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,6 +97,7 @@ 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
         });
@@ -103,6 +105,7 @@ export function BackstagePage({
         // 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

From 232de07aa3d8176e2eb09f49f392c90a5cd53c82 Mon Sep 17 00:00:00 2001
From: Vibe Kanban <vibe-kanban@example.com>
Date: Fri, 15 May 2026 18:10:09 +0000
Subject: [PATCH 2/4] Center kiosk QR content

---
 src/pages/SignupQRPage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/SignupQRPage.tsx b/src/pages/SignupQRPage.tsx
index 4d90705..269f32e 100644
--- a/src/pages/SignupQRPage.tsx
+++ b/src/pages/SignupQRPage.tsx
@@ -31,6 +31,8 @@ export function SignupQRPage({
                     justifyContent: 'center',
                     minHeight: '100vh',
                     padding: `${spacing.xl}px`,
+                    boxSizing: 'border-box',
+                    transform: 'translateX(clamp(-40px, -2.5vw, -16px))',
                 }}
             >
                 {/* Dual QR Code Container */}

From a85a5cc26856bdbf2456611f041f8ade1db17fd6 Mon Sep 17 00:00:00 2001
From: Vibe Kanban <vibe-kanban@example.com>
Date: Fri, 15 May 2026 19:42:33 +0000
Subject: [PATCH 3/4] Fix better-sqlite3 Docker rebuild

---
 Dockerfile | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index 09f951e..e0aaed2 100644
--- a/Dockerfile
+++ b/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 ./
 

From 3a05e59e62c59d77c3d3fc90cd6b72946cded17e Mon Sep 17 00:00:00 2001
From: Vibe Kanban <vibe-kanban@example.com>
Date: Fri, 15 May 2026 19:48:51 +0000
Subject: [PATCH 4/4] Show performer social links on kiosk

---
 src/pages/DisplayPage.tsx | 66 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/src/pages/DisplayPage.tsx b/src/pages/DisplayPage.tsx
index 26bd3f9..8e5ecc5 100644
--- a/src/pages/DisplayPage.tsx
+++ b/src/pages/DisplayPage.tsx
@@ -12,6 +12,7 @@ import { useNavigate } from 'react-router';
 import { Participant } from '../types';
 import { BackgroundLayout } from '../components/BackgroundLayout';
 import { QRCodeDisplay } from '../components/QRCodeDisplay';
+import { buildSocialUrl, getPlatformIcon } from '../utils/socialLinks';
 import {
     colors,
     getTypographyStyle,
@@ -30,6 +31,12 @@ type DisplayPageProps = {
 export function DisplayPage({ participants, currentPerformerId }: DisplayPageProps) {
     const navigate = useNavigate();
     const currentPerformer = participants.find(p => p.id === currentPerformerId);
+    const socialLinks = currentPerformer
+        ? [...currentPerformer.socialLinks]
+            .filter(link => link.url.trim().length > 0)
+            .sort((a, b) => a.order - b.order)
+            .slice(0, 3)
+        : [];
 
     // Generate QR code URL for performer profile
     const getPerformerQRUrl = (performer: Participant): string => {
@@ -143,6 +150,65 @@ export function DisplayPage({ participants, currentPerformerId }: DisplayPagePro
                         {currentPerformer.name}
                     </div>
 
+                    {/* Social links (if provided) */}
+                    {socialLinks.length > 0 && (
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                gap: `${spacing.sm}px`,
+                                alignItems: 'center',
+                            }}
+                        >
+                            {socialLinks.map((link) => {
+                                const Icon = getPlatformIcon(link.type);
+                                const url = buildSocialUrl(link.url, link.type);
+
+                                return (
+                                    <a
+                                        key={link.id}
+                                        href={url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        style={{
+                                            ...getTypographyStyle('socialHandle', 'kiosk'),
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: `${spacing.xs}px`,
+                                            maxWidth: '420px',
+                                            padding: '10px 16px',
+                                            color: colors.whiteNoise,
+                                            backgroundColor: 'rgba(255, 255, 255, 0.18)',
+                                            border: '1px solid rgba(255, 255, 255, 0.34)',
+                                            borderRadius: '999px',
+                                            textDecoration: 'none',
+                                            overflow: 'hidden',
+                                        }}
+                                    >
+                                        <span
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                flexShrink: 0,
+                                            }}
+                                        >
+                                            <Icon size={34} />
+                                        </span>
+                                        <span
+                                            style={{
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }}
+                                        >
+                                            {link.url}
+                                        </span>
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    )}
+
                     {/* Description (if exists) */}
                     {currentPerformer.description && (
                         <div