@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/layouts/AppLayout.tsx

@@ -1,254 +0,0 @@
-import { Outlet, useLocation, useNavigate } from 'react-router-dom'
-import {
-  LayoutDashboard, Plug, LogOut, Activity,
-  Moon, Sun, Monitor, Puzzle, Bot, Cpu, ScrollText,
-  Users, Wrench, Gauge, Terminal, Box, Languages,
-  Camera, Clock, GitBranch, Server,
-  type LucideIcon,
-} from 'lucide-react'
-import { useQuery } from '@tanstack/react-query'
-import { useThemeMode } from '@camstack/ui'
-import { useAuth } from '../contexts/auth-context'
-import { useTranslation } from 'react-i18next'
-import { getBackendClient } from '../lib/backend'
-import type { AddonPageInfo } from './AddonPageLoader'
-import { flattenPages } from './AddonPageLoader'
-
-const THEME_ICONS = { dark: Moon, light: Sun, system: Monitor } as const
-
-/** Map icon name strings from addon page declarations to Lucide components */
-const ICON_MAP: Record<string, LucideIcon> = {
-  gauge: Gauge,
-  puzzle: Puzzle,
-  bot: Bot,
-  cpu: Cpu,
-  terminal: Terminal,
-  box: Box,
-  wrench: Wrench,
-  activity: Activity,
-  plug: Plug,
-}
-
-export function AppLayout() {
-  const location = useLocation()
-  const navigate = useNavigate()
-  const { user, logout } = useAuth()
-  const theme = useThemeMode()
-  const { t, i18n } = useTranslation()
-  const client = getBackendClient()
-
-  const { data: updateCount = 0 } = useQuery({
-    queryKey: ['updates', 'count'],
-    queryFn: async () => {
-      const updates = await client.trpc.update.listUpdates.query()
-      return updates.length
-    },
-    staleTime: 30_000,
-    refetchInterval: 30_000,
-  })
-
-  const { data: addonPages } = useQuery({
-    queryKey: ['addon-pages'],
-    queryFn: async (): Promise<readonly AddonPageInfo[]> => {
-      const raw = await client.trpc.addonPages.listPages.query()
-      return flattenPages(raw as readonly unknown[])
-    },
-    staleTime: 60_000,
-  })
-
-  const handleLogout = () => {
-    logout()
-    navigate('/login')
-  }
-
-  const isActive = (path: string) =>
-    location.pathname === path || location.pathname.startsWith(path + '/')
-
-  const toggleLanguage = () => {
-    const nextLng = i18n.language === 'en' ? 'it' : 'en'
-    i18n.changeLanguage(nextLng)
-  }
-
-  const CAMERA_ITEMS = [
-    { label: t('nav.cameras', 'Cameras'), icon: Camera, path: '/cameras' },
-    { label: t('nav.integrations'), icon: Plug, path: '/integrations' },
-    { label: t('nav.timeline', 'Timeline'), icon: Clock, path: '/timeline' },
-    { label: t('nav.pipeline', 'Pipeline'), icon: GitBranch, path: '/pipeline' },
-  ] as const
-
-  const SYSTEM_ITEMS = [
-    { label: t('system.addons'), icon: Puzzle, path: '/system/addons' },
-    { label: t('system.agents', 'Agents & Processes'), icon: Server, path: '/system/agents' },
-    { label: t('system.logs'), icon: ScrollText, path: '/system/logs' },
-    { label: t('system.users'), icon: Users, path: '/system/users' },
-    { label: t('system.settings'), icon: Wrench, path: '/system/settings' },
-  ] as const
-
-  const themeMode = theme?.mode ?? 'system'
-  const THEME_LABELS: Record<string, string> = {
-    dark: t('theme.dark'),
-    light: t('theme.light'),
-    system: t('theme.system'),
-  }
-
-  return (
-    <div className="flex h-screen bg-background text-foreground">
-      {/* Sidebar */}
-      <aside className="flex w-48 flex-col border-r border-border bg-surface/80 backdrop-blur-sm shrink-0">
-        {/* App logo */}
-        <div className="flex h-14 items-center px-3 border-b border-border">
-          <img
-            src={theme?.resolvedMode === 'light' ? '/brand/logo-horizontal-light.svg' : '/brand/logo-horizontal-dark.svg'}
-            alt="CamStack Admin"
-            className="h-9"
-          />
-        </div>
-
-        {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
-          {/* Dashboard */}
-          {(() => {
-            const active = isActive('/dashboard')
-            return (
-              <button
-                onClick={() => navigate('/dashboard')}
-                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] font-medium transition-all ${
-                  active
-                    ? 'bg-primary/12 text-primary shadow-sm shadow-primary/5'
-                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
-                }`}
-              >
-                <LayoutDashboard className={`h-4 w-4 shrink-0 ${active ? 'text-primary' : ''}`} />
-                {t('nav.dashboard')}
-              </button>
-            )
-          })()}
-
-          {/* Cameras section */}
-          <div className="pt-4 pb-1.5 px-2.5">
-            <span className="text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/60">
-              {t('nav.camerasSection', 'Cameras')}
-            </span>
-          </div>
-          {CAMERA_ITEMS.map((item) => {
-            const Icon = item.icon
-            const active = isActive(item.path)
-            return (
-              <button
-                key={item.path}
-                onClick={() => navigate(item.path)}
-                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] transition-all ${
-                  active
-                    ? 'bg-primary/12 text-primary'
-                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
-                }`}
-              >
-                <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
-                {item.label}
-              </button>
-            )
-          })}
-
-          {/* System section */}
-          <div className="pt-4 pb-1.5 px-2.5">
-            <span className="text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/60">
-              {t('system.title')}
-            </span>
-          </div>
-          {SYSTEM_ITEMS.map((item) => {
-            const Icon = item.icon
-            const active = isActive(item.path)
-            const isAddons = item.path === '/system/addons'
-            return (
-              <button
-                key={item.path}
-                onClick={() => navigate(item.path)}
-                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] transition-all ${
-                  active
-                    ? 'bg-primary/12 text-primary'
-                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
-                }`}
-              >
-                <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
-                <span className="flex-1 text-left">{item.label}</span>
-                {isAddons && updateCount > 0 && (
-                  <span className="ml-auto rounded-full bg-primary px-1.5 py-0.5 text-[9px] font-bold text-primary-foreground leading-none">
-                    {updateCount}
-                  </span>
-                )}
-              </button>
-            )
-          })}
-
-          {/* Addon pages are rendered after system items via dynamic query */}
-
-          {/* Dynamic addon pages section */}
-          {addonPages && addonPages.length > 0 && (
-            <div className="pt-4 pb-1.5 px-2.5">
-              <span className="text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/60">
-                {t('nav.addonPages', 'Addon Pages')}
-              </span>
-            </div>
-          )}
-          {addonPages?.map((page) => {
-            const active = isActive(page.path)
-            const Icon = ICON_MAP[page.icon] ?? Puzzle
-            return (
-              <button
-                key={page.id}
-                onClick={() => navigate(page.path)}
-                className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] transition-all ${
-                  active
-                    ? 'bg-primary/12 text-primary'
-                    : 'text-foreground-subtle hover:bg-surface-hover hover:text-foreground'
-                }`}
-              >
-                <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
-                {page.label}
-              </button>
-            )
-          })}
-        </nav>
-
-        {/* Bottom controls */}
-        <div className="border-t border-border p-2 space-y-0.5">
-          {/* Language toggle */}
-          <button
-            onClick={toggleLanguage}
-            title={t('language.select')}
-            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] text-foreground-subtle hover:bg-surface-hover hover:text-foreground transition-colors"
-          >
-            <Languages className="h-3.5 w-3.5 shrink-0" />
-            <span>{i18n.language === 'en' ? t('language.en') : t('language.it')}</span>
-          </button>
-
-          {/* Theme toggle */}
-          <button
-            onClick={() => theme?.toggleMode()}
-            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] text-foreground-subtle hover:bg-surface-hover hover:text-foreground transition-colors"
-          >
-            {(() => {
-              const ThemeIcon = THEME_ICONS[themeMode]
-              return <ThemeIcon className="h-3.5 w-3.5" />
-            })()}
-            <span>{THEME_LABELS[themeMode]}</span>
-          </button>
-
-          {/* Logout */}
-          <button
-            onClick={handleLogout}
-            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[12px] text-foreground-subtle hover:bg-surface-hover hover:text-danger transition-colors"
-          >
-            <LogOut className="h-3.5 w-3.5" />
-            <span className="truncate">{user?.username ?? 'User'}</span>
-          </button>
-        </div>
-      </aside>
-
-      {/* Main content */}
-      <main className="flex-1 overflow-auto bg-background">
-        <Outlet />
-      </main>
-    </div>
-  )
-}

package/src/layouts/ProtectedRoute.tsx

@@ -1,25 +0,0 @@
-import { Navigate } from 'react-router-dom'
-import { useAuth } from '../contexts/auth-context'
-
-interface ProtectedRouteProps {
-  children: React.ReactNode
-  requiredRole?: string
-}
-
-export function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
-  const { user, loading } = useAuth()
-
-  if (loading) {
-    return <div className="flex h-screen items-center justify-center bg-background text-foreground-subtle">Loading...</div>
-  }
-
-  if (!user) {
-    return <Navigate to="/login" replace />
-  }
-
-  if (requiredRole === 'admin' && user.role !== 'admin' && user.role !== 'super_admin') {
-    return <Navigate to="/access-denied" replace />
-  }
-
-  return <>{children}</>
-}

package/src/lib/addon-page-context.ts

@@ -1,29 +0,0 @@
-import React from 'react'
-import * as ReactDOM from 'react-dom/client'
-import * as ReactQuery from '@tanstack/react-query'
-
-export interface AddonPageContext {
-  readonly trpc: unknown
-  readonly theme: { readonly isDark: boolean }
-  readonly locale: string
-  readonly navigate: (path: string) => void
-  readonly toast: (message: string, type?: 'success' | 'error' | 'info') => void
-}
-
-declare global {
-  interface Window {
-    __camstack: {
-      readonly React: typeof React
-      readonly ReactDOM: typeof ReactDOM
-      readonly ReactQuery: typeof ReactQuery
-    }
-  }
-}
-
-export function initializeAddonPageContext(): void {
-  window.__camstack = {
-    React,
-    ReactDOM,
-    ReactQuery,
-  }
-}

package/src/lib/backend.ts

@@ -1,16 +0,0 @@
-import { BackendClient } from '@camstack/sdk'
-
-let instance: BackendClient | null = null
-
-export function getBackendClient(): BackendClient {
-  if (!instance) {
-    const serverUrl = window.location.origin
-    const token = localStorage.getItem('camstack_admin_token') ?? undefined
-    instance = new BackendClient({ serverUrl, token })
-  }
-  return instance
-}
-
-export function resetBackendClient(): void {
-  instance = null
-}

package/src/main.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react'
-
-// Expose React on window so addon page vendor modules can access it.
-// The import map in index.html maps 'react' → /vendor/react.mjs which
-// re-exports from window.__camstackReact.
-;(window as any).__camstackReact = React
-
-import { initializeAddonPageContext } from './lib/addon-page-context'
-initializeAddonPageContext()
-
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { App } from './App'
-import './index.css'
-import './i18n'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/src/pages/AccessDenied.tsx

@@ -1,22 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import { ShieldX } from 'lucide-react'
-
-export function AccessDeniedPage() {
-  const navigate = useNavigate()
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground p-4">
-      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-danger/10 mb-4">
-        <ShieldX className="h-8 w-8 text-danger" />
-      </div>
-      <h1 className="text-xl font-bold">Access Denied</h1>
-      <p className="mt-2 text-sm text-foreground-subtle">You don't have permission to access this page.</p>
-      <button
-        onClick={() => navigate('/dashboard')}
-        className="mt-6 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground shadow-md shadow-primary/20 hover:shadow-lg transition-all"
-      >
-        Go to Dashboard
-      </button>
-    </div>
-  )
-}

package/src/pages/Cameras.tsx

@@ -1,127 +0,0 @@
-import { useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { Camera, Search } from 'lucide-react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useBackendClient } from '../hooks/useBackendClient'
-import { ProviderSection } from '../components/cameras/ProviderSection'
-
-export function CamerasPage() {
-  const { t } = useTranslation()
-  const client = useBackendClient()
-  const [search, setSearch] = useState('')
-
-  const { data: devices, isLoading: devicesLoading } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => client.listDevices(),
-    refetchInterval: 5_000,
-  })
-
-  const { data: providers, isLoading: providersLoading } = useQuery({
-    queryKey: ['providers'],
-    queryFn: () => client.listProviders(),
-  })
-
-  const deviceList = devices ?? []
-  const providerList = providers ?? []
-
-  // Filter camera-type devices only and apply search
-  const cameraDevices = useMemo(() => {
-    const searchLower = search.toLowerCase()
-    return deviceList.filter((d) => {
-      const type = (d.type ?? '').toLowerCase()
-      const capabilities = d.capabilities ?? []
-      const isCamera =
-        type === 'camera' ||
-        type.includes('camera') ||
-        capabilities.some((c) => c.toLowerCase().includes('video') || c.toLowerCase().includes('stream'))
-
-      // If no type info, include all devices (early stage where type may not be set)
-      const include = isCamera || !type || type === '—'
-
-      if (!include) return false
-      if (!searchLower) return true
-
-      const name = (d.name ?? d.id ?? '').toLowerCase()
-      return name.includes(searchLower)
-    })
-  }, [deviceList, search])
-
-  // Group by provider
-  const groupedByProvider = useMemo(() => {
-    const groups = new Map<string, typeof deviceList>()
-    for (const device of cameraDevices) {
-      const providerId = device.providerId ?? ''
-      if (!groups.has(providerId)) {
-        groups.set(providerId, [])
-      }
-      groups.get(providerId)!.push(device)
-    }
-    return groups
-  }, [cameraDevices])
-
-  const isLoading = devicesLoading || providersLoading
-
-  return (
-    <div className="p-6 space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between gap-4">
-        <h1 className="text-lg font-semibold text-foreground">{t('nav.cameras', 'Cameras')}</h1>
-        <div className="flex items-center gap-3">
-          {/* Search */}
-          <div className="relative">
-            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-foreground-subtle" />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search cameras..."
-              className="rounded-lg border border-border bg-surface pl-8 pr-3 py-1.5 text-xs text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-primary/50 w-48"
-            />
-          </div>
-          <span className="text-[11px] text-foreground-subtle">
-            {cameraDevices.length} camera{cameraDevices.length !== 1 ? 's' : ''}
-          </span>
-        </div>
-      </div>
-
-      {/* Loading state */}
-      {isLoading && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-          {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div key={i} className="aspect-[16/12] rounded-lg border border-border bg-surface animate-pulse" />
-          ))}
-        </div>
-      )}
-
-      {/* Empty state */}
-      {!isLoading && cameraDevices.length === 0 && (
-        <div className="flex flex-col items-center py-20 text-foreground-subtle">
-          <Camera className="h-12 w-12 mb-4 opacity-20" />
-          <p className="text-sm font-medium text-foreground">No cameras found</p>
-          <p className="text-xs mt-1">
-            {search ? 'Try a different search term' : 'Add an integration to discover cameras'}
-          </p>
-        </div>
-      )}
-
-      {/* Provider sections */}
-      {!isLoading && Array.from(groupedByProvider.entries()).map(([providerId, providerDevices]) => {
-        const provider = providerList.find((p) => p.id === providerId)
-        return (
-          <ProviderSection
-            key={providerId}
-            providerType={provider?.type ?? 'rtsp'}
-            providerName={provider?.name ?? providerId}
-            providerStatus={provider?.status?.connected ? 'running' : 'stopped'}
-            devices={providerDevices.map((d) => ({
-              id: d.id,
-              name: d.name ?? d.id,
-              status: d.state?.online ? 'online' : 'offline',
-            }))}
-          />
-        )
-      })}
-    </div>
-  )
-}

package/src/pages/Dashboard.tsx

@@ -1,6 +0,0 @@
-import '../components/dashboard/blocks'  // side-effect: registers all blocks
-import { DashboardGrid } from '../components/dashboard/DashboardGrid'
-
-export function DashboardPage() {
-  return <DashboardGrid />
-}

package/src/pages/DeviceDetail.tsx

@@ -1,175 +0,0 @@
-import { useState } from 'react'
-import { useParams, Link } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
-import { ChevronRight } from 'lucide-react'
-import { useBackendClient } from '../hooks/useBackendClient'
-import { StatusBadge } from '../components/shared/StatusBadge'
-import { ProviderIcon, getProviderLabel } from '../components/shared/ProviderIcon'
-import { StreamArea } from '../components/cameras/StreamArea'
-import { LiveEventsPanel } from '../components/cameras/LiveEventsPanel'
-import { CameraEventsTab } from '../components/cameras/tabs/CameraEventsTab'
-import { PipelineTab } from '../components/cameras/tabs/PipelineTab'
-import { RecordingTab } from '../components/device/tabs/RecordingTab'
-import { ZonesTab } from '../components/device/tabs/ZonesTab'
-import { AddonsTab } from '../components/cameras/tabs/AddonsTab'
-import { StreamsTab } from '../components/cameras/tabs/StreamsTab'
-import { LogsTab } from '../components/device/tabs/LogsTab'
-import { ReplTab } from '../components/device/tabs/ReplTab'
-
-const TABS = [
-  { id: 'events',    label: 'Events' },
-  { id: 'pipeline',  label: 'Pipeline' },
-  { id: 'recording', label: 'Recording' },
-  { id: 'zones',     label: 'Zones' },
-  { id: 'addons',    label: 'Addons' },
-  { id: 'streams',   label: 'Streams' },
-  { id: 'logs',      label: 'Logs' },
-  { id: 'repl',      label: 'REPL' },
-] as const
-
-type TabId = (typeof TABS)[number]['id']
-
-export function DeviceDetailPage() {
-  const { deviceId } = useParams<{ deviceId: string }>()
-  const client = useBackendClient()
-  const [activeTab, setActiveTab] = useState<TabId>('events')
-
-  const { data: deviceData, isLoading } = useQuery({
-    queryKey: ['device', deviceId],
-    queryFn: () => client.getDevice(deviceId!),
-    enabled: !!deviceId,
-    refetchInterval: 5_000,
-  })
-
-  const device = (deviceData ?? {}) as Record<string, unknown>
-  const name = String(device.name ?? deviceId ?? 'Device')
-  const status = String(device.status ?? 'offline')
-  const provider = String(device.providerId ?? device.provider ?? 'rtsp')
-  const phase = String(device.phase ?? '—')
-  const priority = device.priority != null ? String(device.priority) : null
-
-  function renderTabContent() {
-    if (!deviceId) return null
-
-    switch (activeTab) {
-      case 'events':
-        return <CameraEventsTab deviceId={deviceId} />
-      case 'pipeline':
-        return <PipelineTab deviceId={deviceId} />
-      case 'recording':
-        return <RecordingTab />
-      case 'zones':
-        return <ZonesTab />
-      case 'addons':
-        return <AddonsTab deviceId={deviceId} />
-      case 'streams':
-        return <StreamsTab deviceId={deviceId} />
-      case 'logs':
-        return <LogsTab />
-      case 'repl':
-        return <ReplTab deviceId={deviceId} />
-      default:
-        return null
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <div className="flex flex-col h-full">
-        <div className="border-b border-border bg-surface px-6 py-4">
-          <div className="h-4 w-48 rounded bg-surface-hover animate-pulse mb-3" />
-          <div className="h-8 w-64 rounded bg-surface-hover animate-pulse" />
-        </div>
-        <div className="flex-1 p-6">
-          <div className="h-40 rounded-lg border border-border bg-surface animate-pulse" />
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header with breadcrumb + status bar */}
-      <div className="border-b border-border bg-surface px-6 py-4">
-        {/* Breadcrumb */}
-        <nav className="flex items-center gap-1 text-[11px] text-foreground-subtle mb-3">
-          <Link to="/cameras" className="hover:text-foreground transition-colors">
-            Cameras
-          </Link>
-          <ChevronRight className="h-3 w-3" />
-          <span className="text-foreground-subtle">{getProviderLabel(provider)}</span>
-          <ChevronRight className="h-3 w-3" />
-          <span className="text-foreground">{name}</span>
-        </nav>
-
-        {/* Status bar */}
-        <div className="flex items-center gap-3">
-          <ProviderIcon type={provider} size="lg" />
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <h1 className="text-base font-semibold text-foreground truncate">{name}</h1>
-              <StatusBadge status={status} />
-            </div>
-            <div className="flex items-center gap-3 mt-1 text-[10px] text-foreground-subtle">
-              <span className="inline-flex items-center gap-1">
-                <span className={`h-1.5 w-1.5 rounded-full ${status === 'online' || status === 'running' ? 'bg-success' : 'bg-foreground-subtle/30'}`} />
-                {status === 'online' || status === 'running' ? 'Online' : 'Offline'}
-              </span>
-              <span>Phase: <span className="text-foreground">{phase}</span></span>
-              {priority && <span>Priority: <span className="text-foreground">{priority}</span></span>}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Top row: stream area + live events panel */}
-      <div className="flex border-b border-border">
-        {/* Stream area */}
-        <div className="flex-1 p-4 border-r border-border">
-          <StreamArea
-            deviceName={name}
-            detectionsToday={0}
-            inferenceMs={0}
-            activeTracks={0}
-            storageGb={0}
-          />
-        </div>
-
-        {/* Live Events panel */}
-        <div className="w-[300px] flex-shrink-0 bg-surface">
-          <LiveEventsPanel deviceId={deviceId ?? ''} />
-        </div>
-      </div>
-
-      {/* Tab bar */}
-      <div className="border-b border-border bg-surface px-6">
-        <div className="flex items-center gap-0 overflow-x-auto">
-          {TABS.map((tab) => {
-            const isActive = activeTab === tab.id
-            return (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={`relative flex-shrink-0 px-4 py-3 text-xs font-medium transition-colors ${
-                  isActive
-                    ? 'text-primary'
-                    : 'text-foreground-subtle hover:text-foreground'
-                }`}
-              >
-                {tab.label}
-                {isActive && (
-                  <span className="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-primary" />
-                )}
-              </button>
-            )
-          })}
-        </div>
-      </div>
-
-      {/* Tab content */}
-      <div className="flex-1 overflow-y-auto p-6">
-        {renderTabContent()}
-      </div>
-    </div>
-  )
-}