feat: initial SleepGuard implementation

Wake-on-demand proxy + agent system with SvelteKit dashboard. Monorepo: shared types, proxy (Hono + http-proxy), agent (monitors + locks), web (SvelteKit SPA). Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-10 13:46:51 +03:00
commit 852e01df39
64 changed files with 4864 additions and 0 deletions
--- a/packages/proxy/web/package.json
+++ b/packages/proxy/web/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@sleepguard/web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "typecheck": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@sleepguard/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
--- a/packages/proxy/web/src/app.css
+++ b/packages/proxy/web/src/app.css
@@ -0,0 +1,78 @@
+:root {
+  --bg: #0f172a;
+  --bg-card: #1e293b;
+  --bg-hover: #334155;
+  --text: #e2e8f0;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --green: #22c55e;
+  --yellow: #eab308;
+  --red: #ef4444;
+  --orange: #f97316;
+  --border: #334155;
+  --radius: 8px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: var(--radius);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color 0.15s;
+}
+
+button.primary {
+  background: var(--accent);
+  color: white;
+}
+
+button.primary:hover {
+  background: var(--accent-hover);
+}
+
+button.danger {
+  background: var(--red);
+  color: white;
+}
+
+button.danger:hover {
+  background: #dc2626;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+}
+
+.card h2 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
--- a/packages/proxy/web/src/app.html
+++ b/packages/proxy/web/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
--- a/packages/proxy/web/src/lib/api.ts
+++ b/packages/proxy/web/src/lib/api.ts
@@ -0,0 +1,34 @@
+import type { ProxyStatus, ServiceHealth, LogEntry } from '@sleepguard/shared';
+
+const BASE = '/api';
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  });
+  if (!res.ok) {
+    throw new Error(`API error: ${res.status} ${res.statusText}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export function fetchStatus(): Promise<ProxyStatus> {
+  return request<ProxyStatus>('/status');
+}
+
+export function fetchServices(): Promise<ServiceHealth[]> {
+  return request<ServiceHealth[]>('/services');
+}
+
+export function fetchLogs(): Promise<LogEntry[]> {
+  return request<LogEntry[]>('/logs');
+}
+
+export function wake(): Promise<{ ok: boolean; state: string }> {
+  return request('/wake', { method: 'POST' });
+}
+
+export function shutdown(): Promise<{ ok: boolean; state: string }> {
+  return request('/shutdown', { method: 'POST' });
+}
--- a/packages/proxy/web/src/lib/components/ActivityLog.svelte
+++ b/packages/proxy/web/src/lib/components/ActivityLog.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { LogEntry } from '@sleepguard/shared';
+
+  interface Props {
+    logs: LogEntry[];
+  }
+
+  let { logs }: Props = $props();
+
+  const levelColors: Record<string, string> = {
+    info: 'var(--accent)',
+    warn: 'var(--yellow)',
+    error: 'var(--red)',
+  };
+
+  function formatTime(iso: string): string {
+    return new Date(iso).toLocaleTimeString();
+  }
+</script>
+
+<div class="card">
+  <h2>Activity Log</h2>
+  <div class="log-container">
+    {#if logs.length === 0}
+      <p class="empty">No activity yet</p>
+    {:else}
+      {#each logs.toReversed() as entry}
+        <div class="log-entry">
+          <span class="log-time">{formatTime(entry.timestamp)}</span>
+          <span class="log-level" style:color={levelColors[entry.level]}>{entry.level}</span>
+          <span class="log-message">{entry.message}</span>
+          {#if entry.details}
+            <span class="log-details">{entry.details}</span>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .log-container {
+    max-height: 300px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .empty {
+    color: var(--text-dim);
+    font-size: 0.875rem;
+  }
+  .log-entry {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    font-size: 0.8rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .log-entry:last-child {
+    border-bottom: none;
+  }
+  .log-time {
+    color: var(--text-dim);
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+  }
+  .log-level {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    flex-shrink: 0;
+  }
+  .log-message {
+    color: var(--text);
+  }
+  .log-details {
+    width: 100%;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    padding-left: 1rem;
+  }
+</style>
--- a/packages/proxy/web/src/lib/components/IdleTimer.svelte
+++ b/packages/proxy/web/src/lib/components/IdleTimer.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    lastActivity: string;
+    remainingSeconds: number;
+  }
+
+  let { lastActivity, remainingSeconds }: Props = $props();
+
+  function formatTime(seconds: number): string {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${String(s).padStart(2, '0')}`;
+  }
+
+  function formatDate(iso: string): string {
+    return new Date(iso).toLocaleTimeString();
+  }
+</script>
+
+<div class="card">
+  <h2>Idle Timer</h2>
+  <div class="timer-display">
+    <span class="time">{formatTime(remainingSeconds)}</span>
+    <span class="label">until idle check</span>
+  </div>
+  <p class="last-activity">Last activity: {formatDate(lastActivity)}</p>
+</div>
+
+<style>
+  .timer-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .time {
+    font-size: 2rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+  .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .last-activity {
+    margin-top: 0.75rem;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    text-align: center;
+  }
+</style>
--- a/packages/proxy/web/src/lib/components/LocksList.svelte
+++ b/packages/proxy/web/src/lib/components/LocksList.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { Lock } from '@sleepguard/shared';
+
+  interface Props {
+    locks: Lock[];
+  }
+
+  let { locks }: Props = $props();
+
+  function formatDate(iso: string): string {
+    return new Date(iso).toLocaleString();
+  }
+</script>
+
+<div class="card">
+  <h2>Locks</h2>
+  {#if locks.length === 0}
+    <p class="empty">No active locks</p>
+  {:else}
+    <ul class="lock-list">
+      {#each locks as lock}
+        <li class="lock-item">
+          <span class="lock-name">{lock.name}</span>
+          {#if lock.reason}
+            <span class="lock-reason">{lock.reason}</span>
+          {/if}
+          {#if lock.expiresAt}
+            <span class="lock-expires">Expires: {formatDate(lock.expiresAt)}</span>
+          {:else}
+            <span class="lock-expires">No expiry</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .empty {
+    color: var(--text-dim);
+    font-size: 0.875rem;
+  }
+  .lock-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .lock-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    padding: 0.5rem;
+    border-radius: var(--radius);
+    background: var(--bg);
+  }
+  .lock-name {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: var(--yellow);
+  }
+  .lock-reason {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+  .lock-expires {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+  }
+</style>
--- a/packages/proxy/web/src/lib/components/ServiceList.svelte
+++ b/packages/proxy/web/src/lib/components/ServiceList.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { ServiceHealth } from '@sleepguard/shared';
+
+  interface Props {
+    services: ServiceHealth[];
+  }
+
+  let { services }: Props = $props();
+</script>
+
+<div class="card">
+  <h2>Services</h2>
+  {#if services.length === 0}
+    <p class="empty">No services configured</p>
+  {:else}
+    <ul class="service-list">
+      {#each services as service}
+        <li class="service-item">
+          <span class="dot" class:healthy={service.healthy}></span>
+          <div class="service-info">
+            <span class="service-name">{service.name}</span>
+            <span class="service-host">{service.host}</span>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .empty {
+    color: var(--text-dim);
+    font-size: 0.875rem;
+  }
+  .service-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .service-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem;
+    border-radius: var(--radius);
+    background: var(--bg);
+  }
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-dim);
+    flex-shrink: 0;
+  }
+  .dot.healthy {
+    background: var(--green);
+  }
+  .service-info {
+    display: flex;
+    flex-direction: column;
+  }
+  .service-name {
+    font-weight: 500;
+    font-size: 0.875rem;
+  }
+  .service-host {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+</style>
--- a/packages/proxy/web/src/lib/components/StateIndicator.svelte
+++ b/packages/proxy/web/src/lib/components/StateIndicator.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { MachineState } from '@sleepguard/shared';
+
+  interface Props {
+    state: MachineState;
+  }
+
+  let { state }: Props = $props();
+
+  const stateConfig: Record<MachineState, { label: string; color: string; pulse: boolean }> = {
+    [MachineState.OFFLINE]: { label: 'Offline', color: 'var(--text-dim)', pulse: false },
+    [MachineState.WAKING]: { label: 'Waking...', color: 'var(--yellow)', pulse: true },
+    [MachineState.ONLINE]: { label: 'Online', color: 'var(--green)', pulse: false },
+    [MachineState.IDLE_CHECK]: { label: 'Idle Check', color: 'var(--orange)', pulse: true },
+    [MachineState.SHUTTING_DOWN]: { label: 'Shutting Down', color: 'var(--red)', pulse: true },
+  };
+
+  let config = $derived(stateConfig[state]);
+</script>
+
+<div class="state-indicator">
+  <span class="dot" class:pulse={config.pulse} style:background-color={config.color}></span>
+  <span class="label">{config.label}</span>
+</div>
+
+<style>
+  .state-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .dot.pulse {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  .label {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+</style>
--- a/packages/proxy/web/src/lib/components/StatusCard.svelte
+++ b/packages/proxy/web/src/lib/components/StatusCard.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { ProxyStatus } from '@sleepguard/shared';
+  import { MachineState } from '@sleepguard/shared';
+  import StateIndicator from './StateIndicator.svelte';
+  import { wake, shutdown } from '../api.js';
+  import { refreshStatus } from '../stores/machine.js';
+
+  interface Props {
+    status: ProxyStatus;
+  }
+
+  let { status }: Props = $props();
+  let loading = $state(false);
+
+  async function handleWake() {
+    loading = true;
+    try {
+      await wake();
+      await refreshStatus();
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleShutdown() {
+    loading = true;
+    try {
+      await shutdown();
+      await refreshStatus();
+    } finally {
+      loading = false;
+    }
+  }
+
+  let canWake = $derived(status.state === MachineState.OFFLINE);
+  let canShutdown = $derived(status.state === MachineState.ONLINE || status.state === MachineState.IDLE_CHECK);
+</script>
+
+<div class="card">
+  <h2>Machine Status</h2>
+  <StateIndicator state={status.state} />
+
+  <div class="controls">
+    <button class="primary" onclick={handleWake} disabled={!canWake || loading}>
+      Wake
+    </button>
+    <button class="danger" onclick={handleShutdown} disabled={!canShutdown || loading}>
+      Shutdown
+    </button>
+  </div>
+
+  {#if status.agent}
+    <div class="metrics">
+      <div class="metric">
+        <span class="metric-label">CPU</span>
+        <span class="metric-value">{status.agent.cpu.usagePercent}%</span>
+      </div>
+      <div class="metric">
+        <span class="metric-label">RAM</span>
+        <span class="metric-value">{status.agent.memory.usedPercent}%</span>
+      </div>
+      {#if status.agent.gpu.available}
+        <div class="metric">
+          <span class="metric-label">GPU</span>
+          <span class="metric-value">{status.agent.gpu.usagePercent}%</span>
+        </div>
+      {/if}
+      <div class="metric">
+        <span class="metric-label">Disk I/O</span>
+        <span class="metric-value">{status.agent.diskIo.active ? 'Active' : 'Idle'}</span>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+  .metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 0.75rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+  }
+  .metric {
+    display: flex;
+    flex-direction: column;
+  }
+  .metric-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .metric-value {
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+</style>
--- a/packages/proxy/web/src/lib/stores/machine.ts
+++ b/packages/proxy/web/src/lib/stores/machine.ts
@@ -0,0 +1,88 @@
+import { writable, derived } from 'svelte/store';
+import type { ProxyStatus, WsMessage } from '@sleepguard/shared';
+import { MachineState } from '@sleepguard/shared';
+import { fetchStatus } from '../api.js';
+
+export const status = writable<ProxyStatus | null>(null);
+export const connected = writable(false);
+export const error = writable<string | null>(null);
+
+export const machineState = derived(status, ($s) => $s?.state ?? MachineState.OFFLINE);
+
+let ws: WebSocket | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+
+function getWsUrl(): string {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${window.location.host}/api/ws`;
+}
+
+export function connectWs(): void {
+  if (ws) return;
+
+  try {
+    ws = new WebSocket(getWsUrl());
+
+    ws.onopen = () => {
+      connected.set(true);
+      error.set(null);
+      // Fetch full status on connect
+      refreshStatus();
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data) as WsMessage;
+        handleMessage(msg);
+      } catch {
+        // ignore parse errors
+      }
+    };
+
+    ws.onclose = () => {
+      connected.set(false);
+      ws = null;
+      scheduleReconnect();
+    };
+
+    ws.onerror = () => {
+      error.set('WebSocket connection failed');
+      ws?.close();
+    };
+  } catch {
+    scheduleReconnect();
+  }
+}
+
+function scheduleReconnect(): void {
+  if (reconnectTimer) return;
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connectWs();
+  }, 3000);
+}
+
+function handleMessage(msg: WsMessage): void {
+  if (msg.type === 'state_change' || msg.type === 'status_update') {
+    refreshStatus();
+  }
+}
+
+export async function refreshStatus(): Promise<void> {
+  try {
+    const s = await fetchStatus();
+    status.set(s);
+    error.set(null);
+  } catch (e) {
+    error.set(e instanceof Error ? e.message : 'Failed to fetch status');
+  }
+}
+
+export function disconnectWs(): void {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  ws?.close();
+  ws = null;
+}
--- a/packages/proxy/web/src/routes/+layout.svelte
+++ b/packages/proxy/web/src/routes/+layout.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import '../app.css';
+  import { onMount, onDestroy } from 'svelte';
+  import { connectWs, disconnectWs } from '$lib/stores/machine.js';
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
+
+  onMount(() => {
+    connectWs();
+  });
+
+  onDestroy(() => {
+    disconnectWs();
+  });
+</script>
+
+<div class="app">
+  <header>
+    <nav>
+      <a href="/dashboard" class="logo">SleepGuard</a>
+      <div class="nav-links">
+        <a href="/dashboard">Dashboard</a>
+        <a href="/dashboard/settings">Settings</a>
+      </div>
+    </nav>
+  </header>
+  <main>
+    {@render children()}
+  </main>
+</div>
+
+<style>
+  .app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    border-bottom: 1px solid var(--border);
+    padding: 0 1.5rem;
+  }
+  nav {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+  }
+  .logo {
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: var(--accent);
+    text-decoration: none;
+  }
+  .nav-links {
+    display: flex;
+    gap: 1.5rem;
+  }
+  .nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: color 0.15s;
+  }
+  .nav-links a:hover {
+    color: var(--text);
+  }
+  main {
+    flex: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1.5rem;
+    width: 100%;
+  }
+</style>
--- a/packages/proxy/web/src/routes/+page.svelte
+++ b/packages/proxy/web/src/routes/+page.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { status, error, connected } from '$lib/stores/machine.js';
+  import StatusCard from '$lib/components/StatusCard.svelte';
+  import ServiceList from '$lib/components/ServiceList.svelte';
+  import IdleTimer from '$lib/components/IdleTimer.svelte';
+  import LocksList from '$lib/components/LocksList.svelte';
+  import ActivityLog from '$lib/components/ActivityLog.svelte';
+</script>
+
+<svelte:head>
+  <title>SleepGuard Dashboard</title>
+</svelte:head>
+
+<div class="dashboard">
+  {#if $error}
+    <div class="error-banner">{$error}</div>
+  {/if}
+
+  {#if !$connected}
+    <div class="warning-banner">Connecting to server...</div>
+  {/if}
+
+  {#if $status}
+    <div class="grid">
+      <div class="col-main">
+        <StatusCard status={$status} />
+        {#if $status.idleTimer}
+          <IdleTimer
+            lastActivity={$status.idleTimer.lastActivity}
+            remainingSeconds={$status.idleTimer.remainingSeconds}
+          />
+        {/if}
+        <ActivityLog logs={$status.logs} />
+      </div>
+      <div class="col-side">
+        <ServiceList services={$status.services} />
+        <LocksList locks={$status.locks} />
+      </div>
+    </div>
+  {:else}
+    <div class="loading">Loading...</div>
+  {/if}
+</div>
+
+<style>
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 1rem;
+    align-items: start;
+  }
+  .col-main, .col-side {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .error-banner {
+    background: rgba(239, 68, 68, 0.15);
+    border: 1px solid var(--red);
+    color: var(--red);
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+  }
+  .warning-banner {
+    background: rgba(234, 179, 8, 0.15);
+    border: 1px solid var(--yellow);
+    color: var(--yellow);
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+  }
+  .loading {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 3rem;
+  }
+  @media (max-width: 768px) {
+    .grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
--- a/packages/proxy/web/src/routes/settings/+page.svelte
+++ b/packages/proxy/web/src/routes/settings/+page.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { status } from '$lib/stores/machine.js';
+</script>
+
+<svelte:head>
+  <title>Settings — SleepGuard</title>
+</svelte:head>
+
+<div class="settings">
+  <h1>Settings</h1>
+
+  {#if $status}
+    <div class="card">
+      <h2>Current Configuration</h2>
+      <div class="config-grid">
+        <div class="config-item">
+          <label>Idle Timeout</label>
+          <span>{$status.config.idleTimeoutMinutes} minutes</span>
+        </div>
+        <div class="config-item">
+          <label>Health Check Interval</label>
+          <span>{$status.config.healthCheckIntervalSeconds} seconds</span>
+        </div>
+        <div class="config-item">
+          <label>Waking Timeout</label>
+          <span>{$status.config.wakingTimeoutSeconds} seconds</span>
+        </div>
+      </div>
+    </div>
+
+    {#if $status.agent}
+      <div class="card">
+        <h2>Agent Details</h2>
+        <div class="config-grid">
+          <div class="config-item">
+            <label>CPU Cores</label>
+            <span>{$status.agent.cpu.cores}</span>
+          </div>
+          <div class="config-item">
+            <label>Load Average</label>
+            <span>{$status.agent.cpu.loadAvg.map(v => v.toFixed(2)).join(' / ')}</span>
+          </div>
+          <div class="config-item">
+            <label>Total Memory</label>
+            <span>{Math.round($status.agent.memory.totalMB / 1024)} GB</span>
+          </div>
+          {#if $status.agent.gpu.available}
+            <div class="config-item">
+              <label>GPU</label>
+              <span>{$status.agent.gpu.name}</span>
+            </div>
+            <div class="config-item">
+              <label>GPU Memory</label>
+              <span>{$status.agent.gpu.memoryUsedMB} / {$status.agent.gpu.memoryTotalMB} MB</span>
+            </div>
+            <div class="config-item">
+              <label>GPU Temp</label>
+              <span>{$status.agent.gpu.temperature}°C</span>
+            </div>
+          {/if}
+          <div class="config-item">
+            <label>Disk I/O</label>
+            <span>R: {$status.agent.diskIo.readKBps} KB/s | W: {$status.agent.diskIo.writeKBps} KB/s</span>
+          </div>
+          <div class="config-item">
+            <label>Uptime</label>
+            <span>{Math.round($status.agent.uptime / 3600)} hours</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <h2>Watched Processes</h2>
+        <div class="process-list">
+          {#each $status.agent.processes as proc}
+            <div class="process-item">
+              <span class="dot" class:running={proc.running}></span>
+              <span class="process-name">{proc.name}</span>
+              {#if proc.running}
+                <span class="process-pids">PIDs: {proc.pids.join(', ')}</span>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  {:else}
+    <p class="loading">Loading configuration...</p>
+  {/if}
+</div>
+
+<style>
+  .settings {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+  .config-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 0.75rem;
+  }
+  .config-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+  .config-item label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .config-item span {
+    font-weight: 500;
+  }
+  .process-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .process-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    background: var(--bg);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+  }
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-dim);
+    flex-shrink: 0;
+  }
+  .dot.running {
+    background: var(--green);
+  }
+  .process-name {
+    font-weight: 500;
+  }
+  .process-pids {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    margin-left: auto;
+  }
+  .loading {
+    color: var(--text-muted);
+  }
+</style>
--- a/packages/proxy/web/static/favicon.svg
+++ b/packages/proxy/web/static/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <circle cx="16" cy="16" r="14" fill="#1e293b" stroke="#3b82f6" stroke-width="2"/>
+  <circle cx="16" cy="14" r="4" fill="#3b82f6"/>
+  <path d="M10 22 Q16 18 22 22" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round"/>
+</svg>
--- a/packages/proxy/web/svelte.config.js
+++ b/packages/proxy/web/svelte.config.js
@@ -0,0 +1,19 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      pages: 'build',
+      assets: 'build',
+      fallback: 'index.html',
+    }),
+    paths: {
+      base: '/dashboard',
+    },
+  },
+};
+
+export default config;
--- a/packages/proxy/web/tsconfig.json
+++ b/packages/proxy/web/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+}
--- a/packages/proxy/web/vite.config.ts
+++ b/packages/proxy/web/vite.config.ts
@@ -0,0 +1,11 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+    },
+  },
+});