From d3e652bce3282e312b591818e1e72520b9a61fd9 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sun, 1 Mar 2026 12:17:28 -0500
Subject: [PATCH] feat(machine): redesign cash-in with split-screen layout

Split-screen for insertingBills (amounts left, bill visual right) and
displayingQR (info left, QR right). Add StepIndicator with success
flow accent header. Replace Skeleton with BounceDots, remove ScrollArea
and Card wrappers, wrap states in Transition for fade animations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/views/CashInView.vue | 550 +++++++++++++-------------
 1 file changed, 286 insertions(+), 264 deletions(-)

diff --git a/apps/machine/src/views/CashInView.vue b/apps/machine/src/views/CashInView.vue
index 49df04b..3316a2c 100644
--- a/apps/machine/src/views/CashInView.vue
+++ b/apps/machine/src/views/CashInView.vue
@@ -3,18 +3,32 @@ import { watch, computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAtmStore } from '@/stores/atm'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Skeleton } from '@/components/ui/skeleton'
 import { Input } from '@/components/ui/input'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import QRCode from '@/components/QRCode.vue'
+import BounceDots from '@/components/BounceDots.vue'
+import StepIndicator from '@/components/StepIndicator.vue'
 
 const router = useRouter()
 const atmStore = useAtmStore()
 const isElectron = typeof window !== 'undefined' && window.electronAPI !== undefined
 
+const cashInSteps = ['Insert', 'Scan', 'Done']
+
+const currentStepIndex = computed(() => {
+  switch (nestedState.value) {
+    case 'fetchingRate':
+    case 'insertingBills':
+      return 0
+    case 'generatingNdebit':
+    case 'displayingQR':
+      return 1
+    default:
+      return 2
+  }
+})
+
 // Whether the header cancel button should be visible
 // State machine routes CANCEL to confirmAbandon when bills are present
 const showCancelButton = computed(() => {
@@ -158,13 +172,8 @@ function simulateBill(denomination: number) {
 // Convert npub to hex pubkey if needed
 function normalizePubkey(input: string): string {
   const trimmed = input.trim()
-  // If it's an npub, we'd need to decode it - for now just pass through
-  // In production, use nostr-tools nip19.decode()
   if (trimmed.startsWith('npub1')) {
-    // Simple check - in production decode properly
     console.log('[CashIn] npub detected, would decode in production')
-    // For now, just return as-is and let the CLINK client handle it
-    // TODO: Properly decode npub using nostr-tools
   }
   return trimmed
 }
@@ -206,76 +215,80 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
 
 <template>
   <div class="flex min-h-0 flex-1 flex-col">
-    <!-- Header -->
-    <header class="flex items-center bg-foreground/10 px-4 pb-3 pt-12 sm:px-8 sm:py-4">
-      <Button v-if="showCancelButton" variant="ghost" class="text-muted-foreground" @click="cancel">
+    <!-- Header with success flow accent -->
+    <header
+      class="flex items-center px-8 py-4"
+      style="background: color-mix(in srgb, var(--success) 10%, var(--background))"
+    >
+      <Button
+        v-if="showCancelButton"
+        variant="ghost"
+        size="kiosk"
+        class="text-muted-foreground"
+        @click="cancel"
+      >
         ← Cancel
       </Button>
       <div v-else class="w-20"></div>
-      <h2 class="flex-1 text-center text-lg font-semibold sm:text-xl">Buy Bitcoin</h2>
+      <div class="flex flex-1 flex-col items-center gap-2">
+        <h2 class="text-[2.5rem] font-semibold">Buy Bitcoin</h2>
+        <StepIndicator :steps="cashInSteps" :current-step="currentStepIndex" />
+      </div>
       <div class="w-20"></div>
     </header>
 
-    <!-- Content -->
-    <ScrollArea class="min-h-0 flex-1">
-      <main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
-        <!-- Fetching Rate -->
-        <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <Skeleton class="h-10 w-10 rounded-full" />
-            <p class="text-muted-foreground">Fetching exchange rate...</p>
-          </CardContent>
-        </Card>
+    <!-- Content area -->
+    <main class="flex min-h-0 flex-1">
+      <Transition name="state-fade" mode="out-in">
+        <!-- Fetching Rate (centered) -->
+        <div
+          v-if="nestedState === 'fetchingRate'"
+          key="fetchingRate"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
+        >
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Fetching exchange rate...</p>
+        </div>
 
-        <!-- Inserting Bills -->
-        <Card v-else-if="nestedState === 'insertingBills'" class="w-full max-w-96 border-0 bg-card">
-          <CardHeader class="text-center">
-            <CardTitle>Insert Cash</CardTitle>
-            <CardDescription v-if="context">
+        <!-- Inserting Bills (split-screen) -->
+        <div v-else-if="nestedState === 'insertingBills'" key="insertingBills" class="flex flex-1">
+          <!-- Left panel (52%) — amounts and controls -->
+          <div class="flex w-[52%] flex-col justify-center gap-6 px-[4vw] py-6">
+            <!-- Amount display -->
+            <div v-if="context">
+              <p class="text-[6vh] font-bold text-success leading-tight">
+                {{ atmStore.fiatSymbol }}{{ (context.fiatAmount / 100).toFixed(2) }}
+              </p>
+              <p class="text-[3.5vh] font-semibold text-bitcoin">
+                {{ formatSats(context.satsAmount) }} sats
+              </p>
+            </div>
+
+            <!-- Rate -->
+            <p v-if="context" class="text-xl text-muted-foreground">
               Rate: {{ formatSats(context.exchangeRate) }} sats/{{ atmStore.fiatSymbol }}
-            </CardDescription>
-          </CardHeader>
-          <CardContent class="space-y-6">
-            <!-- Bill Status -->
-            <div v-if="context" class="rounded-lg bg-card p-4">
-              <div class="mb-2 flex justify-between">
-                <span class="text-muted-foreground">Inserted:</span>
-                <span class="text-2xl font-bold text-success"
-                  >{{ atmStore.fiatSymbol }}{{ context.fiatAmount / 100 }}</span
-                >
-              </div>
-              <div class="flex justify-between">
-                <span class="text-muted-foreground">You'll receive:</span>
-                <span class="font-semibold text-bitcoin"
-                  >{{ formatSats(context.satsAmount) }} sats</span
-                >
-              </div>
-            </div>
+            </p>
 
-            <!-- Available balance indicator -->
-            <div
+            <!-- Available balance -->
+            <p
               v-if="context && context.availableBalance > 0"
-              class="flex justify-between text-sm"
+              class="text-xl"
+              :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'"
             >
-              <span class="text-muted-foreground">Available:</span>
-              <span :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'">
-                {{ formatSats(context.availableBalance) }} sats
-              </span>
-            </div>
+              Available: {{ formatSats(context.availableBalance) }} sats
+            </p>
 
-            <!-- Bill Acceptor Status -->
-            <p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
+            <!-- Status -->
+            <p v-if="balanceLimitReached" class="text-xl text-muted-foreground">
               Maximum amount reached — press Done to continue
             </p>
-            <p v-else class="text-center text-sm text-muted-foreground">
-              💵 Insert bills into the acceptor
-            </p>
+            <p v-else class="text-xl text-muted-foreground">💵 Insert bills into the acceptor</p>
 
             <!-- Dev: Simulate bill insertion -->
             <Alert v-if="atmStore.debugMode" class="border-destructive/50 bg-destructive/10">
               <AlertDescription>
                 <p class="mb-2 text-xs text-destructive">Dev: Simulate bills</p>
-                <div class="flex flex-wrap justify-center gap-2">
+                <div class="flex flex-wrap gap-2">
                   <Button
                     v-for="denom in [1, 5, 10, 20, 50, 100]"
                     :key="denom"
@@ -291,47 +304,60 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
               </AlertDescription>
             </Alert>
 
+            <!-- Done button -->
             <Button
               class="w-full bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-              size="lg"
+              size="kiosk-lg"
               :disabled="!context || context.billsInserted.length === 0"
               @click="finishInserting"
             >
               Done Inserting
             </Button>
-          </CardContent>
-        </Card>
+          </div>
 
-        <!-- Generating NDebit -->
-        <Card
+          <!-- Right panel (48%) — bill visual -->
+          <div class="flex w-[48%] flex-col items-center justify-center gap-6 bg-foreground/5">
+            <span class="text-[14vh] leading-none">💵</span>
+            <p class="text-2xl text-muted-foreground">Feed bills here</p>
+            <p v-if="context" class="text-lg text-muted-foreground">
+              {{ context.billsInserted.length }} bill{{
+                context.billsInserted.length !== 1 ? 's' : ''
+              }}
+              inserted
+            </p>
+          </div>
+        </div>
+
+        <!-- Generating NDebit (centered) -->
+        <div
           v-else-if="nestedState === 'generatingNdebit'"
-          class="w-full max-w-80 border-0 bg-card"
+          key="generatingNdebit"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <span class="animate-hourglass text-5xl">⏳</span>
-            <p class="text-muted-foreground">Preparing your withdraw code...</p>
-          </CardContent>
-        </Card>
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Preparing your withdraw code...</p>
+        </div>
 
-        <!-- Display QR (unified lightning + clink) -->
-        <Card
-          v-else-if="nestedState === 'displayingQR'"
-          class="w-full max-w-[420px] border-0 bg-card"
-        >
-          <CardContent class="pt-6 space-y-5">
-            <!-- Amount Display -->
-            <div class="text-center">
-              <p class="text-lg font-semibold text-success">Scan to receive your sats</p>
-              <p class="text-3xl font-bold text-bitcoin">
-                {{ formatSats(context?.satsAmount || 0) }} sats
-              </p>
-              <p class="text-sm text-muted-foreground">
-                {{ atmStore.fiatSymbol }}{{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
-              </p>
+        <!-- Display QR (split-screen) -->
+        <div v-else-if="nestedState === 'displayingQR'" key="displayingQR" class="flex flex-1">
+          <!-- Left panel (52%) — info -->
+          <div class="flex w-[52%] flex-col items-center justify-center gap-5 px-[4vw]">
+            <p class="text-[2rem] font-semibold text-success">Scan to receive your sats</p>
+            <p class="text-[7vh] font-bold text-bitcoin leading-tight">
+              {{ formatSats(context?.satsAmount || 0) }} sats
+            </p>
+            <p class="text-2xl text-muted-foreground">
+              {{ atmStore.fiatSymbol }}{{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
+            </p>
+
+            <!-- Waiting indicator -->
+            <div class="flex items-center gap-3 pt-4">
+              <BounceDots />
+              <p class="text-xl text-muted-foreground">Waiting for wallet scan...</p>
             </div>
 
-            <!-- Scan with selector (web-ui only — kiosk users just scan) -->
-            <div v-if="!isElectron" class="text-center">
+            <!-- Mode selector (web-ui only) -->
+            <div v-if="!isElectron" class="pt-4 text-center">
               <p class="text-xs text-muted-foreground mb-2">Scan with</p>
               <div class="flex flex-wrap gap-2 justify-center">
                 <Button
@@ -361,42 +387,6 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
               </div>
             </div>
 
-            <!-- QR Code -->
-            <div class="flex flex-col items-center">
-              <div class="relative">
-                <Skeleton
-                  v-if="isGeneratingLnurl && !context?.ndebitUri"
-                  class="h-[240px] w-[240px] rounded-xl"
-                />
-                <div v-else-if="currentQrValue" class="rounded-xl overflow-hidden">
-                  <QRCode :value="currentQrValue" :size="216" />
-                </div>
-                <div
-                  v-else
-                  class="flex h-[240px] w-[240px] items-center justify-center rounded-xl bg-muted"
-                >
-                  <p class="text-sm text-muted-foreground">Generating...</p>
-                </div>
-                <!-- Lightning bolt overlay -->
-                <div
-                  v-if="currentQrValue"
-                  class="absolute inset-0 flex items-center justify-center pointer-events-none"
-                >
-                  <div
-                    class="w-12 h-12 rounded-full bg-bitcoin flex items-center justify-center shadow-lg"
-                  >
-                    <span class="text-2xl">⚡</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Waiting for withdraw indicator -->
-            <div v-if="currentQrValue" class="flex items-center justify-center gap-2">
-              <span class="animate-pulse text-lg">📲</span>
-              <p class="text-sm text-muted-foreground">Open your wallet and scan to claim</p>
-            </div>
-
             <!-- Mode label + truncated URI (web-ui only) -->
             <div v-if="!isElectron" class="text-center space-y-1">
               <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
@@ -409,7 +399,7 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
                 }}
               </p>
               <div v-if="currentQrValue" class="flex items-center justify-center gap-2">
-                <code class="text-xs text-muted-foreground truncate max-w-[280px]">
+                <code class="font-mono-code text-xs text-muted-foreground truncate max-w-[280px]">
                   {{ currentQrValue.split('\n')[0]?.slice(0, 32) }}...
                 </code>
                 <Button variant="ghost" size="sm" class="h-6 w-6 p-0" @click="copyQrValue">
@@ -419,62 +409,8 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
               </div>
             </div>
 
-            <!-- Alternative: Manual Options (web-ui only, no keyboard on kiosk) -->
-            <details v-if="!isElectron" class="rounded-lg bg-card p-3">
-              <summary class="cursor-pointer text-sm text-muted-foreground">
-                Alternative: Manual withdraw options
-              </summary>
-              <div class="mt-4 space-y-4">
-                <!-- CLINK Debit by pubkey -->
-                <div class="space-y-2">
-                  <p class="text-xs font-medium text-accent">Enter your npub/pubkey:</p>
-                  <div class="flex gap-2">
-                    <Input
-                      v-model="pubkeyInput"
-                      placeholder="npub1... or hex pubkey"
-                      class="flex-1 font-mono text-xs"
-                      :disabled="isProcessing"
-                    />
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      :disabled="!pubkeyInput.trim() || isProcessing"
-                      @click="submitDebitRequest"
-                    >
-                      {{ atmStore.isRequestingDebit ? '...' : 'Send' }}
-                    </Button>
-                  </div>
-                </div>
-
-                <!-- Invoice paste -->
-                <div class="space-y-2">
-                  <p class="text-xs font-medium text-bitcoin">Or paste your invoice:</p>
-                  <div class="flex gap-2">
-                    <Input
-                      v-model="invoiceInput"
-                      placeholder="lnbc... or lntb..."
-                      class="flex-1 font-mono text-xs"
-                      :disabled="isProcessing"
-                    />
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      :disabled="!invoiceInput.trim() || isProcessing"
-                      @click="submitInvoice"
-                    >
-                      {{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
-                    </Button>
-                  </div>
-                </div>
-
-                <p v-if="atmStore.paymentError" class="text-xs text-destructive">
-                  Error: {{ atmStore.paymentError }}
-                </p>
-              </div>
-            </details>
-
             <!-- Debug: Simulate payment button -->
-            <div v-if="atmStore.debugMode" class="pt-2 text-center">
+            <div v-if="atmStore.debugMode" class="pt-2">
               <Button
                 variant="ghost"
                 size="sm"
@@ -484,100 +420,186 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
                 Dev: Skip to Success
               </Button>
             </div>
-          </CardContent>
-        </Card>
+          </div>
 
-        <!-- Ask for Receipt -->
-        <Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <div class="text-6xl text-success">✅</div>
-            <CardTitle>Sats Sent!</CardTitle>
-            <p class="text-muted-foreground">Would you like a receipt?</p>
-            <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-qr">
-              <p class="text-qr-foreground">📱 Scan npub</p>
+          <!-- Right panel (48%) — QR code -->
+          <div class="flex w-[48%] flex-col items-center justify-center bg-foreground/5 p-6">
+            <div v-if="isGeneratingLnurl && !context?.ndebitUri">
+              <BounceDots class="scale-150" />
             </div>
-            <Button variant="outline" @click="skipReceipt">No Thanks</Button>
-          </CardContent>
-        </Card>
+            <div v-else-if="currentQrValue">
+              <QRCode :value="currentQrValue" :size="380" />
+            </div>
+            <div v-else class="flex flex-col items-center gap-4">
+              <BounceDots class="scale-150" />
+              <p class="text-xl text-muted-foreground">Generating...</p>
+            </div>
+          </div>
+        </div>
 
-        <!-- Sending Receipt -->
-        <Card v-else-if="nestedState === 'sendingReceipt'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <span class="animate-hourglass text-5xl">⏳</span>
-            <p class="text-muted-foreground">Sending receipt...</p>
-          </CardContent>
-        </Card>
-
-        <!-- Complete -->
-        <Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-success/20">
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">🎉</div>
-            <CardTitle class="text-success">Transaction Complete!</CardTitle>
-            <p v-if="context">
-              You received
-              <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge>
-            </p>
-            <p class="text-muted-foreground">Thank you!</p>
-          </CardContent>
-        </Card>
-
-        <!-- Confirm Abandon Warning -->
-        <Card
+        <!-- Confirm Abandon (centered, destructive accent) -->
+        <div
           v-else-if="nestedState === 'confirmAbandon'"
-          class="w-full max-w-80 border-0 bg-destructive/20"
+          key="confirmAbandon"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--destructive) 8%, var(--background))"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">⚠️</div>
-            <CardTitle class="text-destructive">Cash Already Accepted</CardTitle>
-            <p class="text-muted-foreground">
-              Your {{ atmStore.fiatSymbol
-              }}{{ context ? (context.fiatAmount / 100).toLocaleString() : '' }} has been accepted
-              and cannot be returned. Please scan the QR code to receive your Bitcoin.
-            </p>
-            <Button
-              class="w-full bg-success text-success-foreground"
-              @click="atmStore.send({ type: 'RETRY' })"
-            >
-              Show QR Code Again
-            </Button>
-            <Button variant="ghost" class="w-full text-destructive" @click="cancel">
-              Abandon (lose cash)
-            </Button>
-          </CardContent>
-        </Card>
+          <div class="text-[8vh]">⚠️</div>
+          <h3 class="text-[3rem] font-bold text-destructive">Cash Already Accepted</h3>
+          <p class="max-w-lg text-center text-2xl text-muted-foreground">
+            Your {{ atmStore.fiatSymbol
+            }}{{ context ? (context.fiatAmount / 100).toLocaleString() : '' }} has been accepted and
+            cannot be returned. Please scan the QR code to receive your Bitcoin.
+          </p>
+          <Button
+            class="w-full max-w-md bg-success text-success-foreground"
+            size="kiosk-lg"
+            @click="atmStore.send({ type: 'RETRY' })"
+          >
+            Show QR Code Again
+          </Button>
+          <Button
+            variant="ghost"
+            size="kiosk"
+            class="w-full max-w-md text-destructive"
+            @click="cancel"
+          >
+            Abandon (lose cash)
+          </Button>
+        </div>
 
-        <!-- Error -->
-        <Card
-          v-else-if="nestedState === 'error'"
-          class="w-full max-w-80 border-0 bg-destructive/20"
+        <!-- Ask for Receipt (centered) -->
+        <div
+          v-else-if="nestedState === 'askForReceipt'"
+          key="askForReceipt"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">⚠️</div>
-            <CardTitle class="text-destructive">Error</CardTitle>
-            <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
-            <Button
-              v-if="context && context.billsInserted.length > 0"
-              class="w-full bg-success text-success-foreground"
-              @click="atmStore.send({ type: 'RETRY' })"
+          <div class="text-[8vh] text-success">✅</div>
+          <h3 class="text-[3rem] font-bold">Sats Sent!</h3>
+          <p class="text-2xl text-muted-foreground">Would you like a receipt?</p>
+          <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-qr">
+            <p class="text-qr-foreground">📱 Scan npub</p>
+          </div>
+          <Button variant="outline" size="kiosk" @click="skipReceipt">No Thanks</Button>
+        </div>
+
+        <!-- Sending Receipt (centered) -->
+        <div
+          v-else-if="nestedState === 'sendingReceipt'"
+          key="sendingReceipt"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
+        >
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Sending receipt...</p>
+        </div>
+
+        <!-- Complete (centered, success accent) -->
+        <div
+          v-else-if="nestedState === 'complete'"
+          key="complete"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--success) 10%, var(--background))"
+        >
+          <div class="text-[8vh]">🎉</div>
+          <h3 class="text-[3rem] font-bold text-success">Transaction Complete!</h3>
+          <p v-if="context" class="text-2xl">
+            You received
+            <Badge variant="secondary" class="text-2xl"
+              >{{ formatSats(context.satsAmount) }} sats</Badge
             >
-              Try Again
-            </Button>
-            <Button
-              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
-              @click="cancel"
-            >
-              Return to Start
-            </Button>
-          </CardContent>
-        </Card>
+          </p>
+          <p class="text-2xl text-muted-foreground">Thank you!</p>
+        </div>
+
+        <!-- Error (centered, destructive accent) -->
+        <div
+          v-else-if="nestedState === 'error'"
+          key="error"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--destructive) 8%, var(--background))"
+        >
+          <div class="text-[8vh]">⚠️</div>
+          <h3 class="text-[3rem] font-bold text-destructive">Error</h3>
+          <p class="text-2xl text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
+          <Button
+            v-if="context && context.billsInserted.length > 0"
+            class="w-full max-w-md bg-success text-success-foreground"
+            size="kiosk-lg"
+            @click="atmStore.send({ type: 'RETRY' })"
+          >
+            Try Again
+          </Button>
+          <Button
+            class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
+            size="kiosk"
+            @click="cancel"
+          >
+            Return to Start
+          </Button>
+        </div>
 
         <!-- Fallback -->
-        <Card v-else class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="p-8 text-center">
-            <p class="text-muted-foreground">State: {{ nestedState }}</p>
-          </CardContent>
-        </Card>
-      </main>
-    </ScrollArea>
+        <div v-else key="fallback" class="flex flex-1 items-center justify-center">
+          <p class="text-xl text-muted-foreground">State: {{ nestedState }}</p>
+        </div>
+      </Transition>
+    </main>
+
+    <!-- Manual withdraw options (web-ui only, below main content) -->
+    <details
+      v-if="!isElectron && nestedState === 'displayingQR'"
+      class="mx-8 mb-4 rounded-lg bg-card p-3"
+    >
+      <summary class="cursor-pointer text-sm text-muted-foreground">
+        Alternative: Manual withdraw options
+      </summary>
+      <div class="mt-4 space-y-4">
+        <!-- CLINK Debit by pubkey -->
+        <div class="space-y-2">
+          <p class="text-xs font-medium text-accent">Enter your npub/pubkey:</p>
+          <div class="flex gap-2">
+            <Input
+              v-model="pubkeyInput"
+              placeholder="npub1... or hex pubkey"
+              class="flex-1 font-mono-code text-xs"
+              :disabled="isProcessing"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!pubkeyInput.trim() || isProcessing"
+              @click="submitDebitRequest"
+            >
+              {{ atmStore.isRequestingDebit ? '...' : 'Send' }}
+            </Button>
+          </div>
+        </div>
+
+        <!-- Invoice paste -->
+        <div class="space-y-2">
+          <p class="text-xs font-medium text-bitcoin">Or paste your invoice:</p>
+          <div class="flex gap-2">
+            <Input
+              v-model="invoiceInput"
+              placeholder="lnbc... or lntb..."
+              class="flex-1 font-mono-code text-xs"
+              :disabled="isProcessing"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!invoiceInput.trim() || isProcessing"
+              @click="submitInvoice"
+            >
+              {{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
+            </Button>
+          </div>
+        </div>
+
+        <p v-if="atmStore.paymentError" class="text-xs text-destructive">
+          Error: {{ atmStore.paymentError }}
+        </p>
+      </div>
+    </details>
   </div>
 </template>