@camstack/addon-admin-ui 0.1.2 → 0.1.3

package/src/pages/IntegrationDetail.tsx

@@ -1,222 +0,0 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router-dom'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { RefreshCw, Settings, Plus, Play, Square } from 'lucide-react'
-import { useBackendClient } from '../hooks/useBackendClient'
-import { StatusBadge } from '../components/shared/StatusBadge'
-import { DeviceGrid } from '../components/integrations/DeviceGrid'
-import { AddDeviceDialog } from '../components/integrations/AddDeviceDialog'
-
-export function IntegrationDetailPage() {
-  const { t } = useTranslation()
-  const { integrationId } = useParams<{ integrationId: string }>()
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const [showAddDevice, setShowAddDevice] = useState(false)
-  const [showConfig, setShowConfig] = useState(false)
-
-  const { data: provider, isLoading: providerLoading } = useQuery({
-    queryKey: ['provider', integrationId],
-    queryFn: () => client.getProvider(integrationId!),
-    enabled: !!integrationId,
-  })
-
-  const { data: allDevices } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => client.listDevices(),
-    refetchInterval: 5_000,
-  })
-
-  const { data: discovered, refetch: refetchDiscovery } = useQuery({
-    queryKey: ['discover-devices', integrationId],
-    queryFn: () => client.discoverDevices(integrationId!),
-    enabled: !!integrationId && provider?.discoveryMode !== 'manual',
-  })
-
-  const startMutation = useMutation({
-    mutationFn: () => client.startProvider(integrationId!),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['provider', integrationId] }),
-  })
-
-  const stopMutation = useMutation({
-    mutationFn: () => client.stopProvider(integrationId!),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['provider', integrationId] }),
-  })
-
-  const adoptMutation = useMutation({
-    mutationFn: (externalId: string) => client.adoptDevice(integrationId!, externalId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['devices'] })
-      queryClient.invalidateQueries({ queryKey: ['discover-devices', integrationId] })
-    },
-  })
-
-  const [importingIds, setImportingIds] = useState<Set<string>>(new Set())
-
-  async function handleImport(externalId: string) {
-    setImportingIds((prev) => new Set([...prev, externalId]))
-    try {
-      await adoptMutation.mutateAsync(externalId)
-    } finally {
-      setImportingIds((prev) => {
-        const next = new Set(prev)
-        next.delete(externalId)
-        return next
-      })
-    }
-  }
-
-  if (providerLoading) {
-    return (
-      <div className="p-6">
-        <div className="h-16 rounded-lg bg-surface animate-pulse mb-4" />
-        <div className="h-40 rounded-lg bg-surface animate-pulse" />
-      </div>
-    )
-  }
-
-  if (!provider) {
-    return (
-      <div className="flex items-center justify-center py-20 text-foreground-subtle text-sm">
-        {t('integrations.integrationNotFound')}
-      </div>
-    )
-  }
-
-  const devices = (allDevices ?? [])
-    .filter((d) => d.providerId === integrationId)
-
-  const activeDevices = devices.map((d) => ({
-    id: d.id,
-    name: d.name ?? d.id,
-    status: d.state?.online ? 'online' : 'offline',
-    snapshotUrl: null as string | null,
-  }))
-
-  const discoveredDevices = (discovered ?? []).map((d) => ({
-    externalId: d.externalId,
-    name: d.name ?? d.externalId,
-  }))
-
-  const providerStatus = provider.status.connected ? 'running' : 'stopped'
-
-  const isAutoDiscovery = provider.discoveryMode !== 'manual'
-  const isManual = provider.discoveryMode === 'manual'
-
-  return (
-    <div className="p-6 space-y-5">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <img
-            src={client.getAddonAssetUrl(provider.type, 'assets/icon.svg')}
-            alt=""
-            className="h-8 w-8 rounded-lg"
-            onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
-          />
-          <div>
-            <h1 className="text-lg font-semibold text-foreground">{provider.name}</h1>
-            <p className="text-[11px] text-foreground-subtle mt-0.5">
-              {provider.type} · {activeDevices.length} {t('integrations.devices')}
-            </p>
-          </div>
-          <StatusBadge status={providerStatus} />
-        </div>
-        <div className="flex items-center gap-2">
-          {isAutoDiscovery && (
-            <button
-              onClick={() => refetchDiscovery()}
-              className="flex items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-1.5 text-[11px] text-foreground hover:bg-surface-hover transition-colors"
-            >
-              <RefreshCw className="h-3 w-3" />
-              {t('integrations.rediscover')}
-            </button>
-          )}
-          {/* TODO: open provider config dialog */}
-          <button
-            onClick={() => setShowConfig(true)}
-            className="flex items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-1.5 text-[11px] text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-          >
-            <Settings className="h-3 w-3" />
-            {t('integrations.config')}
-          </button>
-          {providerStatus === 'running' ? (
-            <button
-              onClick={() => stopMutation.mutate()}
-              className="rounded-lg border border-border bg-surface p-1.5 text-foreground-subtle hover:text-danger hover:bg-danger/10 transition-colors"
-              title="Stop"
-            >
-              <Square className="h-3.5 w-3.5" />
-            </button>
-          ) : (
-            <button
-              onClick={() => startMutation.mutate()}
-              className="rounded-lg border border-border bg-surface p-1.5 text-foreground-subtle hover:text-success hover:bg-success/10 transition-colors"
-              title="Start"
-            >
-              <Play className="h-3.5 w-3.5" />
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Device grid */}
-      <DeviceGrid
-        activeDevices={activeDevices}
-        discoveredDevices={isAutoDiscovery ? discoveredDevices : undefined}
-        onImport={handleImport}
-        importingIds={importingIds}
-      />
-
-      {/* FAB */}
-      <button
-        onClick={() => {
-          if (isManual) {
-            setShowAddDevice(true)
-          } else {
-            refetchDiscovery()
-          }
-        }}
-        className="fixed bottom-6 right-6 flex h-12 w-12 items-center justify-center rounded-full bg-primary shadow-lg shadow-primary/30 hover:shadow-primary/40 transition-shadow"
-        title={isManual ? t('integrations.addDevice') : t('integrations.rediscover')}
-      >
-        {isManual ? (
-          <Plus className="h-5 w-5 text-primary-foreground" />
-        ) : (
-          <RefreshCw className="h-5 w-5 text-primary-foreground" />
-        )}
-      </button>
-
-      {showAddDevice && integrationId && (
-        <AddDeviceDialog
-          open={showAddDevice}
-          providerId={integrationId}
-          onClose={() => setShowAddDevice(false)}
-        />
-      )}
-
-      {/* TODO: replace with a real FormBuilder config dialog */}
-      {showConfig && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-          onClick={() => setShowConfig(false)}
-        >
-          <div
-            className="rounded-xl border border-border bg-surface p-6 shadow-xl w-80"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h2 className="text-sm font-semibold text-foreground mb-2">{t('integrations.providerConfig')}</h2>
-            <p className="text-[11px] text-foreground-subtle">{t('integrations.configComingSoon')}</p>
-            <button
-              onClick={() => setShowConfig(false)}
-              className="mt-4 w-full rounded-lg bg-primary px-3 py-1.5 text-[11px] text-primary-foreground hover:bg-primary/90 transition-colors"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/pages/Integrations.tsx

@@ -1,333 +0,0 @@
-import { useState, useMemo } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { useNavigate } from 'react-router-dom'
-import {
-  Plus,
-  Search,
-  ChevronDown,
-  ChevronRight,
-  Settings,
-  Camera,
-  Lightbulb,
-  ToggleLeft,
-  Radio,
-  HelpCircle,
-} from 'lucide-react'
-import { useBackendClient } from '../hooks/useBackendClient'
-import { ProviderIcon, getProviderLabel } from '../components/shared/ProviderIcon'
-import { StatusBadge } from '../components/shared/StatusBadge'
-import { IntegrationWizard } from '../components/integrations/IntegrationWizard'
-
-type DeviceTypeFilter = 'all' | 'camera' | 'sensor' | 'light' | 'switch' | 'other'
-type GroupBy = 'provider' | 'type' | 'status'
-
-const TYPE_FILTERS: Array<{ id: DeviceTypeFilter; label: string; icon: React.ComponentType<{ className?: string }> }> = [
-  { id: 'all',    label: 'All',    icon: HelpCircle },
-  { id: 'camera', label: 'Camera', icon: Camera },
-  { id: 'sensor', label: 'Sensor', icon: Radio },
-  { id: 'light',  label: 'Light',  icon: Lightbulb },
-  { id: 'switch', label: 'Switch', icon: ToggleLeft },
-  { id: 'other',  label: 'Other',  icon: HelpCircle },
-]
-
-type DeviceEntry = Awaited<ReturnType<ReturnType<typeof useBackendClient>['listDevices']>>[number]
-type ProviderEntry = Awaited<ReturnType<ReturnType<typeof useBackendClient>['listProviders']>>[number]
-
-function getDeviceType(device: DeviceEntry): string {
-  const type = (device.type ?? '').toLowerCase()
-  if (type.includes('camera') || type === 'camera') return 'camera'
-  if (type.includes('sensor')) return 'sensor'
-  if (type.includes('light')) return 'light'
-  if (type.includes('switch')) return 'switch'
-  if (type) return 'other'
-  return 'camera' // default for untyped devices
-}
-
-export function IntegrationsPage() {
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const navigate = useNavigate()
-
-  const [wizardOpen, setWizardOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [typeFilter, setTypeFilter] = useState<DeviceTypeFilter>('all')
-  const [groupBy, setGroupBy] = useState<GroupBy>('provider')
-  const [expandedSections, setExpandedSections] = useState<ReadonlySet<string>>(new Set(['__all__']))
-
-  const { data: providers, isLoading: providersLoading } = useQuery({
-    queryKey: ['providers'],
-    queryFn: () => client.listProviders(),
-    refetchInterval: 5_000,
-  })
-
-  const { data: devices, isLoading: devicesLoading } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => client.listDevices(),
-    refetchInterval: 5_000,
-  })
-
-  const startMutation = useMutation({
-    mutationFn: (id: string) => client.startProvider(id),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['providers'] }),
-  })
-
-  const stopMutation = useMutation({
-    mutationFn: (id: string) => client.stopProvider(id),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['providers'] }),
-  })
-
-  const providerList = providers ?? []
-  const deviceList = devices ?? []
-
-  // Filter devices
-  const filteredDevices = useMemo(() => {
-    const searchLower = search.toLowerCase()
-    return deviceList.filter((d) => {
-      if (typeFilter !== 'all' && getDeviceType(d) !== typeFilter) return false
-      if (searchLower) {
-        const name = (d.name ?? d.id ?? '').toLowerCase()
-        if (!name.includes(searchLower)) return false
-      }
-      return true
-    })
-  }, [deviceList, typeFilter, search])
-
-  // Group devices
-  const grouped = useMemo(() => {
-    const groups = new Map<string, DeviceEntry[]>()
-    for (const device of filteredDevices) {
-      let key: string
-      switch (groupBy) {
-        case 'provider':
-          key = device.providerId ?? 'unknown'
-          break
-        case 'type':
-          key = getDeviceType(device)
-          break
-        case 'status':
-          key = device.state?.online ? 'online' : 'offline'
-          break
-      }
-      if (!groups.has(key)) {
-        groups.set(key, [])
-      }
-      groups.get(key)!.push(device)
-    }
-    return groups
-  }, [filteredDevices, groupBy])
-
-  function toggleSection(sectionId: string) {
-    setExpandedSections((prev) => {
-      const next = new Set(prev)
-      if (next.has(sectionId)) {
-        next.delete(sectionId)
-      } else {
-        next.add(sectionId)
-      }
-      return next
-    })
-  }
-
-  function getGroupLabel(key: string): string {
-    if (groupBy === 'provider') {
-      const provider = providerList.find((p) => p.id === key)
-      return provider ? (provider.name ?? key) : key
-    }
-    return key.charAt(0).toUpperCase() + key.slice(1)
-  }
-
-  function getGroupProviderType(key: string): string {
-    if (groupBy === 'provider') {
-      const provider = providerList.find((p) => p.id === key)
-      return provider?.type ?? 'rtsp'
-    }
-    return 'rtsp'
-  }
-
-  function getGroupProviderStatus(key: string): string {
-    if (groupBy === 'provider') {
-      const provider = providerList.find((p) => p.id === key)
-      return provider?.status?.connected ? 'running' : 'stopped'
-    }
-    return ''
-  }
-
-  const isLoading = providersLoading || devicesLoading
-
-  return (
-    <div className="p-6 space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between gap-4">
-        <h1 className="text-lg font-semibold text-foreground">Integrations</h1>
-        <button
-          onClick={() => setWizardOpen(true)}
-          className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground shadow-sm"
-        >
-          <Plus className="h-3.5 w-3.5" />
-          New Integration
-        </button>
-      </div>
-
-      {/* Toolbar: search + filters + group by */}
-      <div className="flex items-center gap-3 flex-wrap">
-        {/* 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 devices..."
-            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>
-
-        {/* Type filter chips */}
-        <div className="flex items-center gap-1">
-          {TYPE_FILTERS.map(({ id, label }) => (
-            <button
-              key={id}
-              onClick={() => setTypeFilter(id)}
-              className={`rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors ${
-                typeFilter === id
-                  ? 'bg-primary/15 text-primary border border-primary/30'
-                  : 'bg-surface border border-border text-foreground-subtle hover:text-foreground'
-              }`}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-
-        {/* Group by selector */}
-        <div className="flex items-center gap-1.5 ml-auto">
-          <span className="text-[10px] text-foreground-subtle">Group by:</span>
-          <select
-            value={groupBy}
-            onChange={(e) => setGroupBy(e.target.value as GroupBy)}
-            className="rounded-lg border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:outline-none focus:border-primary/50"
-          >
-            <option value="provider">Provider</option>
-            <option value="type">Type</option>
-            <option value="status">Status</option>
-          </select>
-        </div>
-      </div>
-
-      {/* Loading state */}
-      {isLoading && (
-        <div className="space-y-2">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="h-14 rounded-lg border border-border bg-surface animate-pulse" />
-          ))}
-        </div>
-      )}
-
-      {/* Empty state */}
-      {!isLoading && filteredDevices.length === 0 && (
-        <div className="flex flex-col items-center py-20 text-foreground-subtle">
-          <p className="text-sm">No devices found.</p>
-          <p className="text-xs mt-1">
-            {search || typeFilter !== 'all'
-              ? 'Try adjusting your filters'
-              : 'Start an integration to discover devices.'}
-          </p>
-        </div>
-      )}
-
-      {/* Collapsible sections */}
-      {!isLoading && Array.from(grouped.entries()).map(([key, groupDevices]) => {
-        const isExpanded = expandedSections.has(key) || expandedSections.has('__all__')
-        const providerType = getGroupProviderType(key)
-        const providerStatus = getGroupProviderStatus(key)
-        const providerId = groupBy === 'provider' ? key : null
-
-        return (
-          <div key={key} className="rounded-lg border border-border bg-surface overflow-hidden">
-            {/* Section header */}
-            <button
-              onClick={() => toggleSection(key)}
-              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-surface-hover transition-colors"
-            >
-              {isExpanded ? (
-                <ChevronDown className="h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" />
-              ) : (
-                <ChevronRight className="h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" />
-              )}
-
-              {groupBy === 'provider' && <ProviderIcon type={providerType} size="sm" />}
-
-              {groupBy === 'provider' ? (
-                <span
-                  className="text-xs font-semibold text-foreground hover:text-primary hover:underline cursor-pointer"
-                  onClick={(e) => { e.stopPropagation(); navigate(`/integrations/${key}`) }}
-                >
-                  {getGroupLabel(key)}
-                </span>
-              ) : (
-                <span className="text-xs font-semibold text-foreground">{getGroupLabel(key)}</span>
-              )}
-              <span className="text-[10px] text-foreground-subtle">
-                {groupDevices.length} device{groupDevices.length !== 1 ? 's' : ''}
-              </span>
-
-              {providerStatus && <StatusBadge status={providerStatus} />}
-
-              <div className="ml-auto flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
-                {providerId && (
-                  <button
-                    className="p-1.5 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-                    title="Provider settings"
-                  >
-                    <Settings className="h-3.5 w-3.5" />
-                  </button>
-                )}
-              </div>
-            </button>
-
-            {/* Device table */}
-            {isExpanded && (
-              <div className="border-t border-border">
-                {/* Table header */}
-                <div className="grid grid-cols-[1fr_80px_80px_80px_100px_100px] gap-2 px-4 py-2 text-[10px] font-medium text-foreground-subtle uppercase tracking-wider border-b border-border bg-background">
-                  <span>Name</span>
-                  <span>Type</span>
-                  <span>Status</span>
-                  <span>Phase</span>
-                  <span>Today</span>
-                  <span>Last Event</span>
-                </div>
-
-                {/* Device rows */}
-                {groupDevices.map((device) => {
-                  const deviceId = device.id
-                  const deviceName = device.name ?? device.id
-                  const deviceType = getDeviceType(device)
-                  const deviceStatus = device.state?.online ? 'online' : 'offline'
-                  const phase = (device as Record<string, unknown>).phase as string ?? '—'
-
-                  return (
-                    <button
-                      key={deviceId}
-                      onClick={() => navigate(`/devices/${deviceId}`)}
-                      className="w-full grid grid-cols-[1fr_80px_80px_80px_100px_100px] gap-2 px-4 py-2.5 text-left hover:bg-surface-hover transition-colors border-b border-border last:border-b-0"
-                    >
-                      <span className="text-xs font-medium text-foreground truncate">{deviceName}</span>
-                      <span className="text-[11px] text-foreground-subtle capitalize">{deviceType}</span>
-                      <span><StatusBadge status={deviceStatus} /></span>
-                      <span className="text-[11px] text-foreground-subtle">{phase}</span>
-                      <span className="text-[11px] text-foreground-subtle">—</span>
-                      <span className="text-[11px] text-foreground-subtle">—</span>
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        )
-      })}
-
-      <IntegrationWizard open={wizardOpen} onClose={() => setWizardOpen(false)} />
-    </div>
-  )
-}

package/src/pages/Login.tsx

@@ -1,106 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Eye, EyeOff } from 'lucide-react'
-import { useThemeMode } from '@camstack/ui'
-import { useAuth } from '../contexts/auth-context'
-
-export function LoginPage() {
-  const { login } = useAuth()
-  const theme = useThemeMode()
-  const navigate = useNavigate()
-  const [username, setUsername] = useState('')
-  const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [error, setError] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-    setSubmitting(true)
-    try {
-      await login(username, password)
-      navigate('/dashboard', { replace: true })
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Login failed')
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background p-4">
-      <div className="w-full max-w-sm">
-        {/* Logo */}
-        <div className="flex justify-center mb-8">
-          <img
-            src={theme?.resolvedMode === 'light' ? '/brand/logo-horizontal-light.svg' : '/brand/logo-horizontal-dark.svg'}
-            alt="CamStack Admin"
-            className="h-12"
-          />
-        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4 rounded-xl border border-border bg-surface p-6 shadow-xl shadow-black/10">
-          {error && (
-            <div className="rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger">
-              {error}
-            </div>
-          )}
-
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-foreground-subtle">Username</label>
-            <input
-              type="text"
-              placeholder="admin"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-foreground-disabled focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none transition-all"
-              autoFocus
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-foreground-subtle">Password</label>
-            <div className="relative">
-              <input
-                type={showPassword ? 'text' : 'password'}
-                placeholder="Enter password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full rounded-lg border border-border bg-background px-3 py-2.5 pr-10 text-sm text-foreground placeholder:text-foreground-disabled focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none transition-all"
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground transition-colors"
-                tabIndex={-1}
-              >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={submitting || !username || !password}
-            className="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-md shadow-primary/20 hover:shadow-lg hover:shadow-primary/30 disabled:opacity-50 disabled:shadow-none transition-all"
-          >
-            {submitting ? (
-              <span className="flex items-center justify-center gap-2">
-                <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
-                Logging in...
-              </span>
-            ) : (
-              'Log in'
-            )}
-          </button>
-        </form>
-
-        <p className="mt-6 text-center text-[10px] text-foreground-subtle/50">
-          CamStack v0.1.0
-        </p>
-      </div>
-    </div>
-  )
-}

package/src/pages/Metrics.tsx

@@ -1,18 +0,0 @@
-import { PipelineStatus } from '../components/metrics/PipelineStatus'
-import { IntegrationUsage } from '../components/metrics/IntegrationUsage'
-import { ProcessResources } from '../components/metrics/ProcessResources'
-import { AgentLoad } from '../components/metrics/AgentLoad'
-
-export function MetricsPage() {
-  return (
-    <div className="p-6 space-y-4">
-      <h1 className="text-lg font-semibold text-foreground">Metrics</h1>
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <PipelineStatus />
-        <IntegrationUsage />
-        <ProcessResources />
-        <AgentLoad />
-      </div>
-    </div>
-  )
-}