@camstack/addon-admin-ui 0.1.1

package/src/pages/IntegrationDetail.tsx

@@ -0,0 +1,224 @@
+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 ?? []) as unknown as Array<Record<string, unknown>>)
+    .filter((d) => String(d.providerId) === integrationId)
+
+  const activeDevices = devices.map((d) => ({
+    id: String(d.id),
+    name: String(d.name ?? d.id),
+    status: String(d.status ?? 'offline'),
+    snapshotUrl: d.snapshotUrl ? String(d.snapshotUrl) : null,
+  }))
+
+  const discoveredDevices = (discovered ?? []).map((d: any) => ({
+    externalId: String(d.externalId ?? d.id),
+    name: String(d.name ?? d.externalId ?? d.id),
+  }))
+
+  const providerStatus = typeof provider.status === 'object'
+    ? (provider.status as any).connected ? 'running' : 'stopped'
+    : String(provider.status ?? '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

@@ -0,0 +1,330 @@
+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 },
+]
+
+function getDeviceType(device: Record<string, unknown>): string {
+  const type = String(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 ?? []) as unknown as Array<Record<string, unknown>>
+  const deviceList = (devices ?? []) as unknown as Array<Record<string, unknown>>
+
+  // 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 = String(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, Array<Record<string, unknown>>>()
+    for (const device of filteredDevices) {
+      let key: string
+      switch (groupBy) {
+        case 'provider':
+          key = String(device.providerId ?? 'unknown')
+          break
+        case 'type':
+          key = getDeviceType(device)
+          break
+        case 'status':
+          key = String(device.status ?? '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) => String(p.id) === key)
+      return provider ? String(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) => String(p.id) === key)
+      return String(provider?.type ?? 'rtsp')
+    }
+    return 'rtsp'
+  }
+
+  function getGroupProviderStatus(key: string): string {
+    if (groupBy === 'provider') {
+      const provider = providerList.find((p) => String(p.id) === key)
+      return String(provider?.status ?? '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 = String(device.id)
+                  const deviceName = String(device.name ?? device.id)
+                  const deviceType = getDeviceType(device)
+                  const deviceStatus = String(device.status ?? 'offline')
+                  const phase = String(device.phase ?? '—')
+
+                  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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,18 @@
+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>
+  )
+}