From 86607fbf06fce7ae4d13faeccde62f3d59925476 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 13 May 2026 11:18:51 +0100
Subject: [PATCH] refactor(live): Skeleton loading, EmptyState, spacing

Show 3 skeleton rows while SSE is not yet connected, replace emoji empty state with EmptyState component (Radio+Zap icons), add focus-visible ring to Clear button, slightly increase event row padding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/views/LiveView.vue | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/web/src/views/LiveView.vue b/web/src/views/LiveView.vue
index 15aa94a..0a5d63e 100644
--- a/web/src/views/LiveView.vue
+++ b/web/src/views/LiveView.vue
@@ -5,7 +5,10 @@ import { useAuthStore } from '@/stores/auth'
 import Card from '@/components/ui/Card.vue'
 import CardContent from '@/components/ui/CardContent.vue'
 import Button from '@/components/ui/Button.vue'
+import Skeleton from '@/components/ui/Skeleton.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 import { formatDateTime } from '@/lib/utils'
+import { Radio, Zap } from 'lucide-vue-next'
 
 const authStore = useAuthStore()
 const token = authStore.getToken()
@@ -74,7 +77,7 @@ function getProjectName(data: unknown): string {
       <Button v-if="!connected" variant="outline" size="sm" @click="connect">
         Reconnect
       </Button>
-      <Button variant="ghost" size="sm" @click="clearEvents">
+      <Button variant="ghost" size="sm" class="focus-visible:ring-2 focus-visible:ring-ring" @click="clearEvents">
         Clear
       </Button>
     </div>
@@ -87,18 +90,25 @@ function getProjectName(data: unknown): string {
     <!-- Event feed -->
     <Card class="flex-1 overflow-hidden">
       <CardContent class="p-0 h-full">
-        <div v-if="recentEvents.length === 0" class="flex items-center justify-center h-full text-sm text-muted-foreground">
-          <div class="text-center">
-            <div class="text-2xl mb-2">📡</div>
-            <p>Waiting for events...</p>
-            <p class="text-xs mt-1">Activity will appear here in real-time</p>
-          </div>
+        <!-- Loading skeletons while not yet connected -->
+        <div v-if="!connected && recentEvents.length === 0" class="p-4 space-y-4">
+          <Skeleton class="h-24 w-full rounded-xl" />
+          <Skeleton class="h-24 w-full rounded-xl" />
+          <Skeleton class="h-24 w-full rounded-xl" />
         </div>
-        <div v-else class="overflow-y-auto h-full font-mono text-xs">
+
+        <!-- Empty state once connected but no events -->
+        <EmptyState
+          v-else-if="recentEvents.length === 0"
+          title="No live sessions"
+          description="Start a Claude Code session to see activity here."
+          :icons="[Radio, Zap]"
+        />
+        <div v-else class="overflow-y-auto h-full font-mono text-xs space-y-0">
           <div
             v-for="(event, idx) in recentEvents"
             :key="idx"
-            class="flex items-start gap-2 px-4 py-1.5 hover:bg-muted/50 border-b border-border/30"
+            class="flex items-start gap-2 px-4 py-2 hover:bg-muted/50 border-b border-border/30"
           >
             <span :class="getEventColor(event.type)" class="shrink-0 mt-0.5">
               {{ getEventIcon(event.type) }}