From c17f8fb5060379641590d19656eda01d63c11b8a Mon Sep 17 00:00:00 2001
From: Ben <ben@kraal.se>
Date: Wed, 12 Aug 2026 20:14:35 +0200
Subject: [PATCH] Improve live recordings UI, upload flow, and default Flux
 theme.

Refresh list status over Reverb with polling fallback, clarify queued vs processing, streamline upload empty states, and seed an admin login.
---
 .env.example                                  |  21 ++-
 README.md                                     |  12 +-
 app/Events/RecordingTranscriptionUpdated.php  |   1 +
 app/Livewire/Recordings/Index.php             |  55 +++++++
 app/Livewire/UploadRecordings.php             |  75 +++++-----
 app/Models/Recording.php                      |   2 +-
 database/seeders/DatabaseSeeder.php           |   9 ++
 resources/css/app.css                         |   7 +-
 resources/js/transcription.js                 |  75 +---------
 .../views/components/disk-space-bar.blade.php |   6 +-
 .../transcription-status-badge.blade.php      |  23 ++-
 resources/views/layouts/app.blade.php         |  68 ++++-----
 resources/views/layouts/app/header.blade.php  |  28 ++--
 resources/views/layouts/auth/card.blade.php   |  21 ++-
 resources/views/layouts/auth/simple.blade.php |  20 +--
 resources/views/layouts/auth/split.blade.php  |  26 ++--
 .../livewire/recordings/create.blade.php      |   4 -
 .../views/livewire/recordings/index.blade.php | 128 ++++++++++-------
 .../views/livewire/recordings/show.blade.php  |  25 +++-
 .../livewire/upload-recordings.blade.php      |  69 ++++++---
 resources/views/partials/head.blade.php       |   2 +
 routes/channels.php                           |   4 +
 tests/Feature/DemoUserSeederTest.php          |  12 ++
 .../Feature/RecordingDuplicateUploadTest.php  |  16 +--
 tests/Feature/RecordingUploadTest.php         |   8 +-
 tests/Feature/Recordings/IndexTest.php        | 135 ++++++++++++++++++
 tests/Feature/TranscriptionBroadcastTest.php  |   1 +
 .../Feature/UploadRecordingsLivewireTest.php  |   3 +-
 28 files changed, 523 insertions(+), 333 deletions(-)

diff --git a/.env.example b/.env.example
index b425773..679ef61 100644
--- a/.env.example
+++ b/.env.example
@@ -74,10 +74,16 @@ REVERB_SCHEME=http
 REVERB_SERVER_HOST=0.0.0.0
 REVERB_SERVER_PORT=8080
 
+# Host ports for docker compose (FrankenPHP app, Reverb WS, Whisper)
+APP_HOST_PORT=8080
+REVERB_HOST_PORT=8081
+WHISPER_HOST_PORT=8090
+
 VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
-VITE_REVERB_HOST="${REVERB_HOST}"
-VITE_REVERB_PORT="${REVERB_PORT}"
-VITE_REVERB_SCHEME="${REVERB_SCHEME}"
+VITE_REVERB_HOST=localhost
+# Browser WS port: use REVERB_HOST_PORT with Docker (8081), or REVERB_PORT for bare-metal reverb:start
+VITE_REVERB_PORT="${REVERB_HOST_PORT}"
+VITE_REVERB_SCHEME=http
 
 # AndyTranscribe / local faster-whisper
 LOCAL_WHISPER_URL=http://127.0.0.1:8090/v1
@@ -87,15 +93,6 @@ TRANSCRIPTION_TIMEOUT=600
 # Must be greater than TRANSCRIPTION_TIMEOUT so long Whisper jobs are not re-queued mid-run
 DB_QUEUE_RETRY_AFTER=660
 
-# Host ports for docker compose (FrankenPHP app, Reverb WS, Whisper)
-APP_HOST_PORT=8080
-REVERB_HOST_PORT=8081
-WHISPER_HOST_PORT=8090
-
-# Browser-facing Reverb host/port (used at Vite build time in Docker)
-VITE_REVERB_HOST=localhost
-VITE_REVERB_SCHEME=http
-
 # Demo user created on every container start (db:seed via entrypoint)
 SEED_USER_NAME="Demo User"
 SEED_USER_EMAIL=demo@example.com
diff --git a/README.md b/README.md
index 4949eba..a26f8b7 100644
--- a/README.md
+++ b/README.md
@@ -87,14 +87,14 @@ Whisper may take a minute or two while the model downloads.
 
 ### Demo login
 
-Every container start runs `db:seed`, which ensures this user exists:
+Every container start runs `db:seed`, which ensures these users exist:
 
-| Field | Default |
+| Email | Password |
 | --- | --- |
-| Email | `demo@example.com` |
-| Password | `password` |
+| `demo@example.com` | `password` |
+| `admin@example.com` | `password` |
 
-Override with `SEED_USER_NAME`, `SEED_USER_EMAIL`, and `SEED_USER_PASSWORD` in `.env`.
+Override the demo user with `SEED_USER_NAME`, `SEED_USER_EMAIL`, and `SEED_USER_PASSWORD` in `.env`.
 
 ### 5. Open the app
 
@@ -197,7 +197,7 @@ Use the GPU Whisper service instead of the CPU `whisper` service when you have a
 
 ## Usage
 
-1. Open the app and **Log in** with the demo user (`demo@example.com` / `password`), or **Register** a new account.
+1. Open the app and **Log in** with `admin@example.com` / `password` (or `demo@example.com` / `password`), or **Register** a new account.
 2. Open **Recordings → Upload** and drop one or many audio files.
 3. Transcription starts automatically (the `queue` service must be running).
 4. Watch live progress on the list or detail page; stop or restart anytime.
diff --git a/app/Events/RecordingTranscriptionUpdated.php b/app/Events/RecordingTranscriptionUpdated.php
index 166b441..d48bc79 100644
--- a/app/Events/RecordingTranscriptionUpdated.php
+++ b/app/Events/RecordingTranscriptionUpdated.php
@@ -27,6 +27,7 @@ class RecordingTranscriptionUpdated implements ShouldBroadcastNow
     {
         return [
             new PrivateChannel('recording.'.$this->recording->id),
+            new PrivateChannel('user.'.$this->recording->user_id.'.recordings'),
         ];
     }
 
diff --git a/app/Livewire/Recordings/Index.php b/app/Livewire/Recordings/Index.php
index e003ca1..6922be1 100644
--- a/app/Livewire/Recordings/Index.php
+++ b/app/Livewire/Recordings/Index.php
@@ -8,6 +8,7 @@ use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Gate;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use Livewire\Attributes\Title;
 use Livewire\Attributes\Url;
 use Livewire\Component;
@@ -19,14 +20,30 @@ class Index extends Component
 {
     use WithPagination;
 
+    public int $userId;
+
     #[Url(as: 'q', history: true)]
     public string $search = '';
 
+    public function mount(): void
+    {
+        $this->userId = (int) Auth::id();
+    }
+
     public function updatedSearch(): void
     {
         $this->resetPage();
     }
 
+    /**
+     * Re-render when any of this user's recordings broadcast a status change.
+     */
+    #[On('echo-private:user.{userId}.recordings,.RecordingTranscriptionUpdated')]
+    public function onTranscriptionUpdated(): void
+    {
+        //
+    }
+
     public function queuePending(): void
     {
         $queued = 0;
@@ -69,6 +86,36 @@ class Index extends Component
         Flux::toast(text: 'Recording deleted.', variant: 'success');
     }
 
+    public function deleteAll(): void
+    {
+        $deleted = 0;
+
+        Auth::user()->recordings()
+            ->orderBy('id')
+            ->each(function (Recording $recording) use (&$deleted): void {
+                Gate::authorize('delete', $recording);
+
+                $recording->deleteFile();
+                $recording->delete();
+                $deleted++;
+            });
+
+        $this->resetPage();
+
+        if ($deleted === 0) {
+            Flux::toast(text: 'No recordings to delete.', variant: 'danger');
+
+            return;
+        }
+
+        Flux::toast(
+            text: $deleted === 1
+                ? 'Deleted 1 recording.'
+                : "Deleted {$deleted} recordings.",
+            variant: 'success',
+        );
+    }
+
     public function render(): View
     {
         $user = Auth::user();
@@ -78,6 +125,8 @@ class Index extends Component
             ->orderBy('id')
             ->each(fn (Recording $recording) => $recording->recoverOrphanedTranscription());
 
+        $totalCount = $user->recordings()->count();
+
         $query = $user->recordings()->latest();
 
         $search = trim($this->search);
@@ -94,10 +143,16 @@ class Index extends Component
             ->filter(fn (Recording $recording) => ! $recording->hasActiveTranscriptionJob())
             ->count();
 
+        $hasActiveTranscriptions = $user->recordings()
+            ->whereIn('transcription_status', ['pending', 'processing'])
+            ->exists();
+
         return view('livewire.recordings.index', [
             'recordings' => $recordings,
             'search' => $search,
             'pendingCount' => $pendingCount,
+            'hasActiveTranscriptions' => $hasActiveTranscriptions,
+            'totalCount' => $totalCount,
         ]);
     }
 }
diff --git a/app/Livewire/UploadRecordings.php b/app/Livewire/UploadRecordings.php
index f49625d..e3ba8d2 100644
--- a/app/Livewire/UploadRecordings.php
+++ b/app/Livewire/UploadRecordings.php
@@ -19,10 +19,10 @@ class UploadRecordings extends Component
      */
     public array $audio = [];
 
-    public string $title = '';
-
     public bool $saving = false;
 
+    public bool $showCancel = true;
+
     public function updatedAudio(): void
     {
         if ($this->saving || $this->audio === []) {
@@ -40,49 +40,46 @@ class UploadRecordings extends Component
 
         $this->saving = true;
 
-        $store ??= app(StoreUploadedRecordings::class);
+        try {
+            $store ??= app(StoreUploadedRecordings::class);
 
-        $this->validate([
-            'audio' => ['required', 'array', 'min:1', 'max:50'],
-            'audio.*' => [
-                'required',
-                File::types(StoreRecordingRequest::AUDIO_EXTENSIONS)->max('2gb'),
-            ],
-            'title' => ['nullable', 'string', 'max:255'],
-        ], [
-            'audio.required' => 'Please choose at least one audio file to upload.',
-            'audio.min' => 'Please choose at least one audio file to upload.',
-            'audio.max' => 'You can upload at most 50 files at once.',
-            'audio.*' => 'Unsupported audio type. Use MP3, WAV, OGG, FLAC, M4A, AAC, WebM, WMA, or AIFF.',
-            'audio.*.max' => 'Each audio file may not be larger than 2 GB.',
-        ]);
+            $this->validate([
+                'audio' => ['required', 'array', 'min:1', 'max:50'],
+                'audio.*' => [
+                    'required',
+                    File::types(StoreRecordingRequest::AUDIO_EXTENSIONS)->max('2gb'),
+                ],
+            ], [
+                'audio.required' => 'Please choose at least one audio file to upload.',
+                'audio.min' => 'Please choose at least one audio file to upload.',
+                'audio.max' => 'You can upload at most 50 files at once.',
+                'audio.*' => 'Unsupported audio type. Use MP3, WAV, OGG, FLAC, M4A, AAC, WebM, WMA, or AIFF.',
+                'audio.*.max' => 'Each audio file may not be larger than 2 GB.',
+            ]);
 
-        $result = $store->handle(
-            Auth::user(),
-            $this->audio,
-            filled($this->title) ? $this->title : null,
-        );
+            $result = $store->handle(Auth::user(), $this->audio);
 
-        $this->audio = [];
-        $this->title = '';
-        $this->saving = false;
+            $this->audio = [];
 
-        if ($result['recordings'] === []) {
-            session()->flash('error', $result['message']);
+            if ($result['recordings'] === []) {
+                session()->flash('error', $result['message']);
 
-            return $this->redirect(route('recordings.create'), navigate: true);
+                return $this->redirect(route('recordings.create'), navigate: true);
+            }
+
+            session()->flash('success', $result['message']);
+
+            if (count($result['recordings']) === 1) {
+                return $this->redirect(
+                    route('recordings.show', $result['recordings'][0]),
+                    navigate: true,
+                );
+            }
+
+            return $this->redirect(route('recordings.index'), navigate: true);
+        } finally {
+            $this->saving = false;
         }
-
-        session()->flash('success', $result['message']);
-
-        if (count($result['recordings']) === 1) {
-            return $this->redirect(
-                route('recordings.show', $result['recordings'][0]),
-                navigate: true,
-            );
-        }
-
-        return $this->redirect(route('recordings.index'), navigate: true);
     }
 
     public function render()
diff --git a/app/Models/Recording.php b/app/Models/Recording.php
index c0168e1..5b9a480 100644
--- a/app/Models/Recording.php
+++ b/app/Models/Recording.php
@@ -135,7 +135,7 @@ class Recording extends Model
             'ollama_url' => null,
             'transcription_status' => 'pending',
             'transcription_progress' => 'Queued — waiting to start…',
-            'transcription_percent' => 5,
+            'transcription_percent' => null,
             'transcription_started_at' => now(),
             'transcription_error' => null,
             // Keep the previous transcript until a new run succeeds.
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 62e06ad..d3f1e65 100755
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -29,6 +29,15 @@ class DatabaseSeeder extends Seeder
             ],
         );
 
+        User::query()->updateOrCreate(
+            ['email' => 'admin@example.com'],
+            [
+                'name' => 'Admin',
+                'password' => 'password',
+                'email_verified_at' => now(),
+            ],
+        );
+
         Recording::query()
             ->whereNull('user_id')
             ->update(['user_id' => $user->id]);
diff --git a/resources/css/app.css b/resources/css/app.css
index 406abdf..9981bdc 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,11 +8,8 @@
 @source '../js';
 
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
-    --color-accent: var(--color-teal-700);
-    --color-accent-content: var(--color-teal-700);
-    --color-accent-foreground: var(--color-white);
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
 }
 
 @custom-variant dark (&:where(.dark, .dark *));
diff --git a/resources/js/transcription.js b/resources/js/transcription.js
index e9855cd..78498b9 100644
--- a/resources/js/transcription.js
+++ b/resources/js/transcription.js
@@ -5,7 +5,7 @@
 const BADGE_COLORS = {
     done: 'teal',
     processing: 'amber',
-    pending: 'amber',
+    pending: 'zinc',
     failed: 'red',
     cancelled: 'zinc',
 };
@@ -55,12 +55,6 @@ export function formatTimestamp(value) {
         + ':' + pad(date.getMinutes());
 }
 
-function formatWordCount(count) {
-    const n = Number(count) || 0;
-
-    return n > 0 ? n.toLocaleString() : '—';
-}
-
 function subscribeToRecording(recordingId, handler) {
     if (!window.Echo) {
         return () => {};
@@ -76,14 +70,6 @@ function subscribeToRecording(recordingId, handler) {
     };
 }
 
-function subscribeToRecordings(recordingIds, handler) {
-    const leaveFns = recordingIds.map((id) => subscribeToRecording(id, handler));
-
-    return () => {
-        leaveFns.forEach((leave) => leave());
-    };
-}
-
 /**
  * Show-page Alpine component: Echo push + local elapsed tick + optional status hydrate.
  */
@@ -208,34 +194,19 @@ export function transcriptionMonitor({ statusUrl, initial }) {
 }
 
 /**
- * Index-page Alpine component: patch row status from Reverb events.
+ * Index-page Alpine component: inline audio player only.
+ * Status/progress refresh via Livewire Echo + wire:poll.
  */
-export function recordingsIndex({ recordings, pendingCount }) {
-    const byId = {};
-
-    for (const row of recordings) {
-        byId[row.id] = row;
-    }
-
+export function recordingsIndex() {
     return {
-        rows: byId,
-        pendingCount: Number(pendingCount) || 0,
-        leaveChannel: null,
         playingId: null,
         isPlaying: false,
 
         start() {
-            this.leaveChannel = subscribeToRecordings(Object.keys(this.rows), (event) => {
-                this.applyPayload(event);
-            });
+            //
         },
 
         destroy() {
-            if (this.leaveChannel) {
-                this.leaveChannel();
-                this.leaveChannel = null;
-            }
-
             const player = this.$refs.player;
 
             if (player) {
@@ -282,41 +253,5 @@ export function recordingsIndex({ recordings, pendingCount }) {
                 this.isPlaying = false;
             });
         },
-
-        applyPayload(payload) {
-            const id = payload.id;
-
-            if (!this.rows[id]) {
-                return;
-            }
-
-            const previousStatus = this.rows[id].status;
-            const next = {
-                ...this.rows[id],
-                status: payload.status,
-                status_label: payload.status_label,
-                progress: payload.progress,
-                percent: payload.percent,
-                is_active: payload.is_active,
-                word_count: payload.word_count ?? this.rows[id].word_count,
-                word_count_display: formatWordCount(payload.word_count ?? this.rows[id].word_count),
-                badge_color: badgeColorFor(payload.status),
-            };
-
-            this.rows[id] = next;
-
-            const wasQueueable = ['pending', 'failed', 'cancelled'].includes(previousStatus);
-            const isQueueable = ['pending', 'failed', 'cancelled'].includes(payload.status);
-
-            if (wasQueueable && !isQueueable) {
-                this.pendingCount = Math.max(0, this.pendingCount - 1);
-            } else if (!wasQueueable && isQueueable) {
-                this.pendingCount += 1;
-            }
-        },
-
-        row(id) {
-            return this.rows[id] || {};
-        },
     };
 }
diff --git a/resources/views/components/disk-space-bar.blade.php b/resources/views/components/disk-space-bar.blade.php
index a1e672e..b8e3be2 100644
--- a/resources/views/components/disk-space-bar.blade.php
+++ b/resources/views/components/disk-space-bar.blade.php
@@ -2,11 +2,11 @@
     /** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
 @endphp
 <div
-    class="flex items-center gap-2 rounded-lg border border-stone-200 bg-stone-50 px-2.5 py-1.5 dark:border-zinc-600 dark:bg-zinc-900/50"
+    class="flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1.5 dark:border-zinc-600 dark:bg-zinc-900/50"
     title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }} · {{ $disk['used_percent'] }}% used"
 >
     <div
-        class="h-1.5 w-14 shrink-0 overflow-hidden rounded-full bg-stone-200 dark:bg-zinc-700"
+        class="h-1.5 w-14 shrink-0 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
@@ -18,7 +18,7 @@
             style="width: {{ min(100, max(0, $disk['used_percent'])) }}%"
         ></div>
     </div>
-    <span class="hidden text-xs font-medium tabular-nums text-stone-600 sm:inline dark:text-zinc-300">
+    <span class="hidden text-xs font-medium tabular-nums text-zinc-600 sm:inline dark:text-zinc-300">
         {{ $disk['free_human'] }} free
     </span>
 </div>
diff --git a/resources/views/components/transcription-status-badge.blade.php b/resources/views/components/transcription-status-badge.blade.php
index 9775da2..2393571 100644
--- a/resources/views/components/transcription-status-badge.blade.php
+++ b/resources/views/components/transcription-status-badge.blade.php
@@ -1,7 +1,7 @@
 @props([
     'status',
     'label' => null,
-    /** @var string|null Alpine expression that returns a row object with badge_color + status_label */
+    /** @var string|null Alpine expression that returns a row object with badge_color + status_label (+ status for spinner) */
     'alpineRow' => null,
 ])
 
@@ -17,14 +17,17 @@
 
     $color = match ($status) {
         'done' => 'teal',
-        'processing', 'pending' => 'amber',
+        'processing' => 'amber',
+        'pending' => 'zinc',
         'failed' => 'red',
         default => 'zinc',
     };
+
+    $icon = $status === 'processing' ? 'loading' : null;
 @endphp
 
 @if ($alpineRow)
-    <span {{ $attributes->class('inline-flex') }}>
+    <span {{ $attributes->class('inline-flex items-center gap-1.5') }}>
         @foreach (['teal', 'amber', 'red', 'zinc'] as $badgeColor)
             @if ($badgeColor === $color)
                 <flux:badge
@@ -43,9 +46,17 @@
                 >{{ $label }}</flux:badge>
             @endif
         @endforeach
+        <flux:icon.loading
+            variant="micro"
+            class="size-3 text-amber-600 dark:text-amber-400"
+            x-show="{{ $alpineRow }}.status === 'processing'"
+            x-cloak
+        />
     </span>
 @else
-    <flux:badge size="sm" :color="$color" {{ $attributes }}>
-        {{ $label }}
-    </flux:badge>
+    <span {{ $attributes->class('inline-flex items-center gap-1.5') }}>
+        <flux:badge size="sm" :color="$color" :icon="$icon">
+            {{ $label }}
+        </flux:badge>
+    </span>
 @endif
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index a8f907e..a999509 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,52 +1,46 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     @include('partials.head', ['title' => $title ?? null])
     <style>[x-cloak]{display:none!important}</style>
 </head>
-<body class="min-h-screen bg-stone-100 text-stone-900 antialiased dark:bg-zinc-900 dark:text-zinc-100">
-    <flux:header class="border-b border-stone-200 bg-white dark:border-zinc-700 dark:bg-zinc-800">
-        <div class="mx-auto flex w-full max-w-5xl items-center gap-4 px-4 sm:px-6">
-            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
+<body class="min-h-screen bg-white text-zinc-800 antialiased dark:bg-zinc-900 dark:text-zinc-100">
+    <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
 
-            <a href="{{ route('recordings.index') }}" wire:navigate class="text-lg font-semibold tracking-tight text-teal-800 dark:text-teal-300">
-                AndyTranscribe
-            </a>
+        <flux:brand href="{{ route('recordings.index') }}" name="AndyTranscribe" wire:navigate class="max-lg:hidden" />
 
-            <flux:navbar class="-mb-px max-lg:hidden">
-                <flux:navbar.item
-                    :href="route('recordings.index')"
-                    :current="request()->routeIs('recordings.index', 'recordings.show')"
-                    wire:navigate
-                >
-                    {{ __('Recordings') }}
-                </flux:navbar.item>
-                <flux:navbar.item
-                    :href="route('recordings.create')"
-                    :current="request()->routeIs('recordings.create')"
-                    wire:navigate
-                >
-                    {{ __('Upload') }}
-                </flux:navbar.item>
-            </flux:navbar>
+        <flux:navbar class="-mb-px max-lg:hidden">
+            <flux:navbar.item
+                :href="route('recordings.index')"
+                :current="request()->routeIs('recordings.index', 'recordings.show')"
+                wire:navigate
+            >
+                {{ __('Recordings') }}
+            </flux:navbar.item>
+            <flux:navbar.item
+                :href="route('recordings.create')"
+                :current="request()->routeIs('recordings.create')"
+                wire:navigate
+            >
+                {{ __('Upload') }}
+            </flux:navbar.item>
+        </flux:navbar>
 
-            <flux:spacer />
+        <flux:spacer />
 
-            <x-disk-space-bar />
+        <x-disk-space-bar />
 
-            <x-appearance-toggle />
+        <x-appearance-toggle />
 
-            @auth
-                <x-desktop-user-menu />
-            @endauth
-        </div>
+        @auth
+            <x-desktop-user-menu />
+        @endauth
     </flux:header>
 
-    <flux:sidebar collapsible="mobile" sticky class="border-e border-stone-200 bg-white lg:hidden dark:border-zinc-700 dark:bg-zinc-800">
+    <flux:sidebar collapsible="mobile" sticky class="lg:hidden">
         <flux:sidebar.header>
-            <a href="{{ route('recordings.index') }}" wire:navigate class="text-base font-semibold text-teal-800 dark:text-teal-300">
-                AndyTranscribe
-            </a>
+            <flux:sidebar.brand href="{{ route('recordings.index') }}" name="AndyTranscribe" wire:navigate />
             <flux:sidebar.collapse />
         </flux:sidebar.header>
 
@@ -60,7 +54,7 @@
         </flux:sidebar.nav>
     </flux:sidebar>
 
-    <main class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
+    <flux:main container>
         @if (session('success'))
             <flux:callout variant="success" icon="check-circle" class="mb-6">
                 <flux:callout.text>{{ session('success') }}</flux:callout.text>
@@ -86,7 +80,7 @@
         @endif
 
         {{ $slot }}
-    </main>
+    </flux:main>
 
     <flux:toast />
 
diff --git a/resources/views/layouts/app/header.blade.php b/resources/views/layouts/app/header.blade.php
index 8595eea..a44e2c4 100644
--- a/resources/views/layouts/app/header.blade.php
+++ b/resources/views/layouts/app/header.blade.php
@@ -1,27 +1,23 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
         <style>[x-cloak]{display:none!important}</style>
     </head>
-    <body class="min-h-screen bg-stone-100 text-stone-900 antialiased dark:bg-zinc-900 dark:text-zinc-100">
-        <flux:header class="border-b border-stone-200 bg-white dark:border-zinc-700 dark:bg-zinc-800">
-            <div class="mx-auto flex w-full max-w-5xl items-center gap-4 px-4 sm:px-6">
-                <a href="{{ route('recordings.index') }}" class="text-lg font-semibold tracking-tight text-teal-800 dark:text-teal-300">
-                    AndyTranscribe
-                </a>
-                <flux:spacer />
-                <x-disk-space-bar />
-                <x-appearance-toggle />
-                @auth
-                    <x-desktop-user-menu />
-                @endauth
-            </div>
+    <body class="min-h-screen bg-white text-zinc-800 antialiased dark:bg-zinc-900 dark:text-zinc-100">
+        <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+            <flux:brand href="{{ route('recordings.index') }}" name="AndyTranscribe" wire:navigate />
+            <flux:spacer />
+            <x-disk-space-bar />
+            <x-appearance-toggle />
+            @auth
+                <x-desktop-user-menu />
+            @endauth
         </flux:header>
 
-        <main class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
+        <flux:main container>
             {{ $slot }}
-        </main>
+        </flux:main>
 
         @fluxScripts
     </body>
diff --git a/resources/views/layouts/auth/card.blade.php b/resources/views/layouts/auth/card.blade.php
index c5cf75a..666702a 100644
--- a/resources/views/layouts/auth/card.blade.php
+++ b/resources/views/layouts/auth/card.blade.php
@@ -1,21 +1,20 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>
-    <body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
-        <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <body class="min-h-screen bg-zinc-50 antialiased dark:bg-zinc-900">
+        <div class="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div class="flex w-full max-w-md flex-col gap-6">
-                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
-                    <span class="flex h-9 w-9 items-center justify-center rounded-md">
-                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
-                    </span>
-
-                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
-                </a>
+                <flux:brand
+                    class="justify-center"
+                    name="{{ config('app.name', 'AndyTranscribe') }}"
+                    href="{{ route('home') }}"
+                    wire:navigate
+                />
 
                 <div class="flex flex-col gap-6">
-                    <div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
+                    <div class="rounded-xl border border-zinc-200 bg-white text-zinc-800 shadow-xs dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100">
                         <div class="px-10 py-8">{{ $slot }}</div>
                     </div>
                 </div>
diff --git a/resources/views/layouts/auth/simple.blade.php b/resources/views/layouts/auth/simple.blade.php
index fd066e1..c80a2e6 100644
--- a/resources/views/layouts/auth/simple.blade.php
+++ b/resources/views/layouts/auth/simple.blade.php
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
         <style>[x-cloak]{display:none!important}</style>
     </head>
-    <body class="min-h-screen bg-stone-100 text-stone-900 antialiased dark:bg-zinc-900 dark:text-zinc-100">
-        <div class="relative flex min-h-svh flex-col items-center justify-center gap-6 bg-stone-100 p-6 md:p-10 dark:bg-zinc-900">
+    <body class="min-h-screen bg-white text-zinc-800 antialiased dark:bg-zinc-900 dark:text-zinc-100">
+        <div class="relative flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div class="absolute end-4 top-4">
                 <x-appearance-toggle />
             </div>
-            <div class="flex w-full max-w-sm flex-col gap-2">
-                <a href="{{ url('/') }}" class="mb-1 flex flex-col items-center gap-2 font-medium">
-                    <span class="flex h-9 w-9 items-center justify-center rounded-md bg-teal-700 text-sm font-semibold text-white dark:bg-teal-600">
-                        AT
-                    </span>
-                    <span class="text-lg font-semibold tracking-tight text-teal-800 dark:text-teal-300">{{ config('app.name', 'AndyTranscribe') }}</span>
-                </a>
+            <div class="flex w-full max-w-sm flex-col gap-6">
+                <flux:brand
+                    class="justify-center"
+                    name="{{ config('app.name', 'AndyTranscribe') }}"
+                    href="{{ url('/') }}"
+                    wire:navigate
+                />
                 <div class="flex flex-col gap-6">
                     {{ $slot }}
                 </div>
diff --git a/resources/views/layouts/auth/split.blade.php b/resources/views/layouts/auth/split.blade.php
index a25d1d6..cb0075e 100644
--- a/resources/views/layouts/auth/split.blade.php
+++ b/resources/views/layouts/auth/split.blade.php
@@ -1,17 +1,14 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         @include('partials.head')
     </head>
-    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
+    <body class="min-h-screen bg-white antialiased dark:bg-zinc-900">
         <div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
-            <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
-                <div class="absolute inset-0 bg-neutral-900"></div>
+            <div class="relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-zinc-800">
+                <div class="absolute inset-0 bg-zinc-900"></div>
                 <a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
-                    <span class="flex h-10 w-10 items-center justify-center rounded-md">
-                        <x-app-logo-icon class="me-2 h-7 fill-current text-white" />
-                    </span>
-                    {{ config('app.name', 'Laravel') }}
+                    {{ config('app.name', 'AndyTranscribe') }}
                 </a>
 
                 @php
@@ -27,13 +24,12 @@
             </div>
             <div class="w-full lg:p-8">
                 <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-                    <a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
-                        <span class="flex h-9 w-9 items-center justify-center rounded-md">
-                            <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
-                        </span>
-
-                        <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
-                    </a>
+                    <flux:brand
+                        class="z-20 justify-center lg:hidden"
+                        name="{{ config('app.name', 'AndyTranscribe') }}"
+                        href="{{ route('home') }}"
+                        wire:navigate
+                    />
                     {{ $slot }}
                 </div>
             </div>
diff --git a/resources/views/livewire/recordings/create.blade.php b/resources/views/livewire/recordings/create.blade.php
index 85d0c46..c0acbe8 100644
--- a/resources/views/livewire/recordings/create.blade.php
+++ b/resources/views/livewire/recordings/create.blade.php
@@ -1,10 +1,6 @@
 <div>
     <div class="mb-8">
         <flux:heading size="xl">Upload recordings</flux:heading>
-        <flux:text class="mt-1">
-            Drop one or many pocket-recorder files. Embedded metadata is extracted when available.
-            Duplicate files (same name and size, or identical content) are skipped.
-        </flux:text>
     </div>
 
     <livewire:upload-recordings />
diff --git a/resources/views/livewire/recordings/index.blade.php b/resources/views/livewire/recordings/index.blade.php
index a0fe5ba..9bcc816 100644
--- a/resources/views/livewire/recordings/index.blade.php
+++ b/resources/views/livewire/recordings/index.blade.php
@@ -1,25 +1,8 @@
 <div
-    x-data="recordingsIndex(@js([
-        'recordings' => $recordings->map(fn ($recording) => [
-            'id' => $recording->id,
-            'status' => $recording->transcription_status,
-            'status_label' => $recording->transcriptionStatusLabel(),
-            'progress' => $recording->transcription_progress,
-            'percent' => $recording->transcription_percent,
-            'is_active' => $recording->isTranscribing(),
-            'word_count' => $recording->word_count,
-            'word_count_display' => $recording->word_count > 0
-                ? number_format($recording->word_count)
-                : '—',
-            'badge_color' => match ($recording->transcription_status) {
-                'done' => 'teal',
-                'processing', 'pending' => 'amber',
-                'failed' => 'red',
-                default => 'zinc',
-            },
-        ])->values(),
-        'pendingCount' => $pendingCount,
-    ]))"
+    @if ($hasActiveTranscriptions)
+        wire:poll.2s.visible
+    @endif
+    x-data="recordingsIndex()"
     x-init="
         start();
         return () => destroy();
@@ -39,34 +22,64 @@
                     class="min-w-[16rem]"
                 />
             </div>
-            <div x-show="pendingCount > 0" x-cloak>
-                <flux:button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    wire:click="queuePending"
-                >
-                    Queue <span x-text="pendingCount"></span> pending
-                    <span x-text="pendingCount === 1 ? 'transcription' : 'transcriptions'"></span>
-                </flux:button>
+            <div class="flex flex-wrap items-center justify-end gap-2">
+                @if ($pendingCount > 0)
+                    <flux:button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        wire:click="queuePending"
+                    >
+                        Queue {{ $pendingCount }} pending
+                        {{ $pendingCount === 1 ? 'transcription' : 'transcriptions' }}
+                    </flux:button>
+                @endif
+
+                @if ($totalCount > 0)
+                    <flux:modal.trigger name="delete-all-recordings">
+                        <flux:button type="button" variant="danger" size="sm">
+                            Delete all
+                        </flux:button>
+                    </flux:modal.trigger>
+                @endif
             </div>
         </div>
     </div>
 
+    @if ($totalCount > 0)
+        <flux:modal name="delete-all-recordings" class="max-w-md">
+            <div class="space-y-6">
+                <div>
+                    <flux:heading size="lg">Delete all recordings?</flux:heading>
+                    <flux:text class="mt-2">
+                        This permanently removes
+                        {{ $totalCount === 1 ? 'your 1 recording' : "all {$totalCount} recordings" }}
+                        and their audio files. This cannot be undone.
+                    </flux:text>
+                </div>
+                <div class="flex justify-end gap-2">
+                    <flux:modal.close>
+                        <flux:button variant="ghost">Cancel</flux:button>
+                    </flux:modal.close>
+                    <flux:button type="button" variant="danger" wire:click="deleteAll">
+                        Delete all
+                    </flux:button>
+                </div>
+            </div>
+        </flux:modal>
+    @endif
+
     @if ($recordings->isEmpty())
-        <flux:card class="border-dashed py-16 text-center">
-            @if (filled($search))
+        @if (filled($search))
+            <flux:card class="border-dashed py-16 text-center">
                 <flux:text>No recordings match “{{ $search }}”.</flux:text>
                 <div class="mt-4">
                     <flux:button variant="ghost" wire:click="$set('search', '')">Clear search</flux:button>
                 </div>
-            @else
-                <flux:text>No recordings yet.</flux:text>
-                <div class="mt-4">
-                    <flux:link href="{{ route('recordings.create') }}" wire:navigate>Upload your first MP3</flux:link>
-                </div>
-            @endif
-        </flux:card>
+            </flux:card>
+        @else
+            <livewire:upload-recordings :show-cancel="false" />
+        @endif
     @else
         <audio
             x-ref="player"
@@ -90,7 +103,7 @@
 
             <flux:table.rows>
                 @foreach ($recordings as $recording)
-                    <flux:table.row wire:key="recording-{{ $recording->id }}">
+                    <flux:table.row wire:key="recording-{{ $recording->id }}-{{ $recording->transcription_status }}-{{ $recording->transcription_percent }}">
                         <flux:table.cell>
                             <flux:button
                                 type="button"
@@ -127,10 +140,7 @@
                         </flux:table.cell>
                         <flux:table.cell>{{ $recording->duration_formatted }}</flux:table.cell>
                         <flux:table.cell>
-                            <span
-                                class="tabular-nums"
-                                x-text="row({{ $recording->id }}).word_count_display"
-                            >
+                            <span class="tabular-nums">
                                 {{ $recording->word_count > 0 ? number_format($recording->word_count) : '—' }}
                             </span>
                         </flux:table.cell>
@@ -138,17 +148,25 @@
                             <x-transcription-status-badge
                                 :status="$recording->transcription_status"
                                 :label="$recording->transcriptionStatusLabel()"
-                                :alpine-row="'row('.$recording->id.')'"
                             />
-                            <div
-                                class="mt-1 max-w-[14rem] truncate text-xs text-amber-700 dark:text-amber-300"
-                                x-show="row({{ $recording->id }}).is_active && row({{ $recording->id }}).progress"
-                                x-cloak
-                                :title="row({{ $recording->id }}).progress"
-                            >
-                                <span x-text="row({{ $recording->id }}).percent ? (row({{ $recording->id }}).percent + '% · ') : ''"></span>
-                                <span x-text="row({{ $recording->id }}).progress"></span>
-                            </div>
+                            @if ($recording->transcription_status === 'pending' && filled($recording->transcription_progress))
+                                <div
+                                    class="mt-1 max-w-[14rem] truncate text-xs text-zinc-500 dark:text-zinc-400"
+                                    title="{{ $recording->transcription_progress }}"
+                                >
+                                    {{ $recording->transcription_progress }}
+                                </div>
+                            @elseif ($recording->transcription_status === 'processing' && filled($recording->transcription_progress))
+                                <div
+                                    class="mt-1 max-w-[14rem] truncate text-xs text-amber-700 dark:text-amber-300"
+                                    title="{{ $recording->transcription_progress }}"
+                                >
+                                    @if ($recording->transcription_percent)
+                                        {{ $recording->transcription_percent }}% ·
+                                    @endif
+                                    {{ $recording->transcription_progress }}
+                                </div>
+                            @endif
                         </flux:table.cell>
                         <flux:table.cell>
                             {{ $recording->created_at?->format('Y-m-d H:i') }}
diff --git a/resources/views/livewire/recordings/show.blade.php b/resources/views/livewire/recordings/show.blade.php
index 09b7577..3b7a589 100644
--- a/resources/views/livewire/recordings/show.blade.php
+++ b/resources/views/livewire/recordings/show.blade.php
@@ -145,16 +145,31 @@
         <div x-show="status.is_active" x-cloak class="mt-4">
             <flux:callout variant="warning" icon="arrow-path">
                 <flux:callout.heading>
-                    <span x-text="status.progress || 'Working…'"></span>
+                    <span class="inline-flex items-center gap-2">
+                        <flux:icon.loading
+                            variant="micro"
+                            class="size-4"
+                            x-show="status.status === 'processing'"
+                            x-cloak
+                        />
+                        <span x-text="status.progress || 'Working…'"></span>
+                    </span>
                 </flux:callout.heading>
                 <flux:callout.text>
-                    <span class="tabular-nums" x-text="(status.percent ?? 0) + '%'"></span>
-                    · Elapsed <span x-text="status.elapsed_human || '0s'"></span>
+                    <span
+                        class="tabular-nums"
+                        x-show="status.status === 'processing' && status.percent != null"
+                        x-cloak
+                    >
+                        <span x-text="status.percent + '%'"></span>
+                        ·
+                    </span>
+                    Elapsed <span x-text="status.elapsed_human || '0s'"></span>
                 </flux:callout.text>
             </flux:callout>
 
-            <div class="mt-3">
-                <flux:progress color="amber" x-bind:value="Math.max(status.percent || 5, 5)" />
+            <div class="mt-3" x-show="status.status === 'processing'" x-cloak>
+                <flux:progress color="amber" x-bind:value="status.percent || 0" />
             </div>
 
             <ul class="mt-3 space-y-1 text-xs text-zinc-600 dark:text-zinc-400">
diff --git a/resources/views/livewire/upload-recordings.blade.php b/resources/views/livewire/upload-recordings.blade.php
index 0c30bb3..dc6e6d6 100644
--- a/resources/views/livewire/upload-recordings.blade.php
+++ b/resources/views/livewire/upload-recordings.blade.php
@@ -1,28 +1,59 @@
 <div
-    class="max-w-2xl space-y-6 rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
-    x-data="{ uploading: false, progress: 0 }"
+    class="max-w-2xl space-y-6 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
+    x-data="{
+        uploading: false,
+        progress: 0,
+        dragging: false,
+        openPicker() {
+            this.$refs.fileInput.click();
+        },
+        onDrop(event) {
+            this.dragging = false;
+
+            const files = event.dataTransfer?.files;
+
+            if (! files?.length) {
+                return;
+            }
+
+            const transfer = new DataTransfer();
+
+            Array.from(files).forEach((file) => transfer.items.add(file));
+
+            this.$refs.fileInput.files = transfer.files;
+            this.$refs.fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+        },
+    }"
     x-on:livewire-upload-start="uploading = true; progress = 0"
     x-on:livewire-upload-finish="uploading = false; progress = 100"
+    x-on:livewire-upload-cancel="uploading = false"
     x-on:livewire-upload-error="uploading = false"
     x-on:livewire-upload-progress="progress = $event.detail.progress"
 >
-    <flux:input
-        wire:model="title"
-        label="Title (optional)"
-        description="Used when you upload a single file. Leave blank to use embedded title or filename."
-        placeholder="Leave blank to use embedded title or filename"
-    />
-
     <div>
         <flux:label>Audio files</flux:label>
 
+        <input
+            x-ref="fileInput"
+            type="file"
+            class="sr-only"
+            wire:model="audio"
+            multiple
+            accept=".mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*"
+        >
+
         <div
-            wire:drop.file="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
-            wire:click="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
             role="button"
             tabindex="0"
-            wire:keydown.enter="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
-            class="mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-6 py-10 text-center transition-colors data-dragging:border-accent data-dragging:bg-accent/5 dark:border-white/20 dark:bg-white/5 dark:data-dragging:border-accent dark:data-dragging:bg-accent/10"
+            x-on:click="openPicker()"
+            x-on:keydown.enter.prevent="openPicker()"
+            x-on:keydown.space.prevent="openPicker()"
+            x-on:dragenter.prevent="dragging = true"
+            x-on:dragover.prevent="dragging = true"
+            x-on:dragleave.prevent="dragging = false"
+            x-on:drop.prevent="onDrop($event)"
+            x-bind:class="dragging ? 'border-accent bg-accent/5 dark:border-accent dark:bg-accent/10' : 'border-zinc-300 bg-zinc-50 dark:border-white/20 dark:bg-white/5'"
+            class="mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed px-6 py-10 text-center transition-colors"
         >
             <div class="mb-3 flex size-12 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-800 dark:ring-white/10">
                 <flux:icon.cloud-arrow-up class="size-6 text-zinc-500 dark:text-zinc-400" />
@@ -57,11 +88,9 @@
         @enderror
     </div>
 
-    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
-        Uploads start as soon as you drop or choose files. Duplicate files (same name and size, or identical content) are skipped.
-    </flux:text>
-
-    <div class="flex items-center gap-3">
-        <flux:link href="{{ route('recordings.index') }}">Cancel</flux:link>
-    </div>
+    @if ($showCancel)
+        <div class="flex items-center gap-3">
+            <flux:link href="{{ route('recordings.index') }}" wire:navigate>Cancel</flux:link>
+        </div>
+    @endif
 </div>
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index b23d7bd..31382b0 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -7,6 +7,8 @@
 </title>
 
 <link rel="icon" href="/favicon.ico" sizes="any">
+<link rel="preconnect" href="https://fonts.bunny.net">
+<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
 
 @vite(['resources/css/app.css', 'resources/js/app.js'])
 @fluxAppearance
diff --git a/routes/channels.php b/routes/channels.php
index e9a5147..a22983e 100644
--- a/routes/channels.php
+++ b/routes/channels.php
@@ -10,3 +10,7 @@ Broadcast::channel('recording.{recordingId}', function (User $user, int $recordi
         ->where('user_id', $user->id)
         ->exists();
 });
+
+Broadcast::channel('user.{userId}.recordings', function (User $user, int $userId): bool {
+    return (int) $user->id === $userId;
+});
diff --git a/tests/Feature/DemoUserSeederTest.php b/tests/Feature/DemoUserSeederTest.php
index 1e17743..d3dd74f 100644
--- a/tests/Feature/DemoUserSeederTest.php
+++ b/tests/Feature/DemoUserSeederTest.php
@@ -24,12 +24,24 @@ class DemoUserSeederTest extends TestCase
         $this->assertTrue(Hash::check('password', $user->password));
     }
 
+    public function test_seeder_creates_admin_user(): void
+    {
+        $this->seed(DatabaseSeeder::class);
+
+        $user = User::query()->where('email', 'admin@example.com')->first();
+
+        $this->assertNotNull($user);
+        $this->assertSame('Admin', $user->name);
+        $this->assertTrue(Hash::check('password', $user->password));
+    }
+
     public function test_seeder_is_idempotent(): void
     {
         $this->seed(DatabaseSeeder::class);
         $this->seed(DatabaseSeeder::class);
 
         $this->assertSame(1, User::query()->where('email', 'demo@example.com')->count());
+        $this->assertSame(1, User::query()->where('email', 'admin@example.com')->count());
     }
 
     public function test_seeder_assigns_orphaned_recordings_to_demo_user(): void
diff --git a/tests/Feature/RecordingDuplicateUploadTest.php b/tests/Feature/RecordingDuplicateUploadTest.php
index 339dccb..65134a7 100644
--- a/tests/Feature/RecordingDuplicateUploadTest.php
+++ b/tests/Feature/RecordingDuplicateUploadTest.php
@@ -70,22 +70,14 @@ class RecordingDuplicateUploadTest extends TestCase
         Bus::assertDispatched(TranscribeRecording::class, 2);
     }
 
-    public function test_upload_page_mentions_duplicate_skipping(): void
+    public function test_upload_page_shows_dropzone(): void
     {
-        Recording::query()->create([
-            'user_id' => $this->user->id,
-            'title' => 'Existing',
-            'original_filename' => 'note.mp3',
-            'file_path' => 'recordings/note.mp3',
-            'file_size_bytes' => 2048,
-            'content_hash' => str_repeat('a', 64),
-            'transcription_status' => 'done',
-        ]);
-
         $this->get(route('recordings.create'))
             ->assertOk()
             ->assertSeeLivewire('upload-recordings')
-            ->assertSee('Duplicate files', false);
+            ->assertSee('Drop audio files here or click to browse')
+            ->assertDontSee('Title (optional)')
+            ->assertDontSee('Uploads start as soon as you drop');
     }
 
     public function test_duplicate_filename_and_size_is_skipped_without_content_hash(): void
diff --git a/tests/Feature/RecordingUploadTest.php b/tests/Feature/RecordingUploadTest.php
index c7b28ec..8f189e0 100644
--- a/tests/Feature/RecordingUploadTest.php
+++ b/tests/Feature/RecordingUploadTest.php
@@ -59,16 +59,16 @@ class RecordingUploadTest extends TestCase
         $file = UploadedFile::fake()->create('meeting.mp3', 500, 'audio/mpeg');
 
         Livewire::test(UploadRecordings::class)
-            ->set('title', 'Team meeting')
             ->set('audio', [$file])
             ->assertRedirect(route('recordings.show', Recording::query()->first()));
 
         $recording = Recording::query()->first();
 
         $this->assertNotNull($recording);
-        $this->assertSame('Team meeting', $recording->title);
+        $this->assertSame('meeting', $recording->title);
         $this->assertSame('pending', $recording->transcription_status);
         $this->assertSame('local', $recording->transcription_driver);
+        $this->assertNull($recording->transcription_percent);
         $this->assertNotNull($recording->transcription_started_at);
         Storage::disk('local')->assertExists($recording->file_path);
         Bus::assertDispatched(TranscribeRecording::class);
@@ -132,11 +132,11 @@ class RecordingUploadTest extends TestCase
             ['talk.m4a', 'audio/mp4', 'm4a-bytes'],
         ] as [$name, $mime, $contents]) {
             Livewire::test(UploadRecordings::class)
-                ->set('title', $name)
                 ->set('audio', [UploadedFile::fake()->createWithContent($name, $contents)])
                 ->assertRedirect();
 
-            $recording = Recording::query()->where('title', $name)->first();
+            $expectedTitle = pathinfo($name, PATHINFO_FILENAME);
+            $recording = Recording::query()->where('title', $expectedTitle)->first();
 
             $this->assertNotNull($recording, "Failed uploading {$name}");
             Storage::disk('local')->assertExists($recording->file_path);
diff --git a/tests/Feature/Recordings/IndexTest.php b/tests/Feature/Recordings/IndexTest.php
index cff7242..80494ad 100644
--- a/tests/Feature/Recordings/IndexTest.php
+++ b/tests/Feature/Recordings/IndexTest.php
@@ -38,6 +38,19 @@ class IndexTest extends TestCase
             ->assertSee('Pocket note');
     }
 
+    public function test_empty_index_shows_upload_dropzone(): void
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user)
+            ->get(route('recordings.index'))
+            ->assertOk()
+            ->assertSeeLivewire('upload-recordings')
+            ->assertSee('Drop audio files here or click to browse')
+            ->assertDontSee('No recordings yet.')
+            ->assertDontSee('Upload your first MP3');
+    }
+
     public function test_search_filters_recordings(): void
     {
         $user = User::factory()->create();
@@ -90,6 +103,77 @@ class IndexTest extends TestCase
         Bus::assertDispatched(TranscribeRecording::class, 1);
     }
 
+    public function test_index_polls_while_transcriptions_are_active(): void
+    {
+        $user = User::factory()->create();
+        $this->actingAs($user);
+
+        Recording::query()->create([
+            'user_id' => $user->id,
+            'title' => 'In progress',
+            'original_filename' => 'active.mp3',
+            'file_path' => 'recordings/active.mp3',
+            'file_size_bytes' => 100,
+            'transcription_status' => 'processing',
+            'transcription_progress' => 'Transcribing locally…',
+            'transcription_percent' => 40,
+            'transcription_driver' => 'local',
+            'transcription_started_at' => now(),
+        ]);
+
+        Livewire::test(Index::class)
+            ->assertSee('wire:poll', false)
+            ->assertSee('Transcribing locally…')
+            ->assertSee('40%')
+            ->assertSeeHtml('bg-amber-400');
+    }
+
+    public function test_queued_recordings_do_not_show_fake_percent(): void
+    {
+        $user = User::factory()->create();
+        $this->actingAs($user);
+
+        Recording::query()->create([
+            'user_id' => $user->id,
+            'title' => 'Waiting in line',
+            'original_filename' => 'queued.mp3',
+            'file_path' => 'recordings/queued.mp3',
+            'file_size_bytes' => 100,
+            'transcription_status' => 'pending',
+            'transcription_progress' => 'Queued — waiting to start…',
+            'transcription_percent' => null,
+            'transcription_driver' => 'local',
+            'transcription_started_at' => now(),
+        ]);
+
+        Livewire::test(Index::class)
+            ->assertSee('Waiting in line')
+            ->assertSee('Queued')
+            ->assertSee('Queued — waiting to start…')
+            ->assertDontSee('5%')
+            ->assertSeeHtml('bg-zinc-400/15')
+            ->assertDontSeeHtml('bg-amber-400');
+    }
+
+    public function test_index_does_not_poll_when_all_transcriptions_are_idle(): void
+    {
+        $user = User::factory()->create();
+        $this->actingAs($user);
+
+        Recording::query()->create([
+            'user_id' => $user->id,
+            'title' => 'Finished',
+            'original_filename' => 'done.mp3',
+            'file_path' => 'recordings/done.mp3',
+            'file_size_bytes' => 100,
+            'transcription_status' => 'done',
+            'transcript' => 'all done',
+        ]);
+
+        Livewire::test(Index::class)
+            ->assertDontSee('wire:poll', false);
+    }
+
     public function test_user_can_delete_recording_from_index(): void
     {
         Storage::fake('local');
@@ -116,6 +200,57 @@ class IndexTest extends TestCase
         Storage::disk('local')->assertMissing('recordings/delete-me.mp3');
     }
 
+    public function test_user_can_delete_all_recordings_from_index(): void
+    {
+        Storage::fake('local');
+        Storage::disk('local')->put('recordings/one.mp3', 'one');
+        Storage::disk('local')->put('recordings/two.mp3', 'two');
+        Storage::disk('local')->put('recordings/other.mp3', 'other');
+
+        $user = User::factory()->create();
+        $other = User::factory()->create();
+        $this->actingAs($user);
+
+        Recording::query()->create([
+            'user_id' => $user->id,
+            'title' => 'Mine one',
+            'original_filename' => 'one.mp3',
+            'file_path' => 'recordings/one.mp3',
+            'file_size_bytes' => 3,
+            'transcription_status' => 'done',
+        ]);
+
+        Recording::query()->create([
+            'user_id' => $user->id,
+            'title' => 'Mine two',
+            'original_filename' => 'two.mp3',
+            'file_path' => 'recordings/two.mp3',
+            'file_size_bytes' => 3,
+            'transcription_status' => 'pending',
+        ]);
+
+        Recording::query()->create([
+            'user_id' => $other->id,
+            'title' => 'Someone else',
+            'original_filename' => 'other.mp3',
+            'file_path' => 'recordings/other.mp3',
+            'file_size_bytes' => 5,
+            'transcription_status' => 'done',
+        ]);
+
+        Livewire::test(Index::class)
+            ->assertSee('Delete all')
+            ->call('deleteAll')
+            ->assertDontSee('Mine one')
+            ->assertDontSee('Mine two');
+
+        $this->assertDatabaseMissing('recordings', ['user_id' => $user->id]);
+        $this->assertDatabaseHas('recordings', ['user_id' => $other->id, 'title' => 'Someone else']);
+        Storage::disk('local')->assertMissing('recordings/one.mp3');
+        Storage::disk('local')->assertMissing('recordings/two.mp3');
+        Storage::disk('local')->assertExists('recordings/other.mp3');
+    }
+
     public function test_user_cannot_delete_another_users_recording_from_index(): void
     {
         Storage::fake('local');
diff --git a/tests/Feature/TranscriptionBroadcastTest.php b/tests/Feature/TranscriptionBroadcastTest.php
index 8dd46ca..f841012 100644
--- a/tests/Feature/TranscriptionBroadcastTest.php
+++ b/tests/Feature/TranscriptionBroadcastTest.php
@@ -158,5 +158,6 @@ class TranscriptionBroadcastTest extends TestCase
 
         $this->assertSame('RecordingTranscriptionUpdated', $event->broadcastAs());
         $this->assertSame('private-recording.'.$recording->id, $event->broadcastOn()[0]->name);
+        $this->assertSame('private-user.'.$this->user->id.'.recordings', $event->broadcastOn()[1]->name);
     }
 }
diff --git a/tests/Feature/UploadRecordingsLivewireTest.php b/tests/Feature/UploadRecordingsLivewireTest.php
index 610f87f..09524dc 100644
--- a/tests/Feature/UploadRecordingsLivewireTest.php
+++ b/tests/Feature/UploadRecordingsLivewireTest.php
@@ -35,14 +35,13 @@ class UploadRecordingsLivewireTest extends TestCase
         $file = UploadedFile::fake()->create('meeting.mp3', 500, 'audio/mpeg');
 
         Livewire::test(UploadRecordings::class)
-            ->set('title', 'Team meeting')
             ->set('audio', [$file])
             ->assertRedirect(route('recordings.show', Recording::query()->first()));
 
         $recording = Recording::query()->first();
 
         $this->assertNotNull($recording);
-        $this->assertSame('Team meeting', $recording->title);
+        $this->assertSame('meeting', $recording->title);
         $this->assertSame('pending', $recording->transcription_status);
         Storage::disk('local')->assertExists($recording->file_path);
         Bus::assertDispatched(TranscribeRecording::class);