initial commit

2026-02-21 17:37:49 +02:00
commit 9f661e4d57
50 changed files with 3037 additions and 0 deletions
--- a/.envrc
+++ b/.envrc
@@ -0,0 +1 @@
+eval "$(devbox generate direnv --print-envrc)"
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,26 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Devbox
+.devbox/
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,17 @@
+{
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": false,
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ],
+  "tailwindStylesheet": "./src/routes/layout.css"
+}
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,122 @@
+# Agent Instructions
+
+This is a SvelteKit 5 project with TypeScript and Tailwind CSS for a router dashboard interface.
+
+## Build Commands
+
+```bash
+# Development server
+deno run dev
+
+# Build for production
+deno run build
+
+# Preview production build
+deno run preview
+
+# Type checking
+deno run check
+deno run check:watch
+
+# Linting and formatting
+deno run lint
+deno run format
+```
+
+## Code Style Guidelines
+
+### TypeScript
+
+- Use strict TypeScript mode
+- Use `import type` for type-only imports
+- Prefer interfaces over type aliases for object shapes
+- Use PascalCase for types, interfaces, enums, and components
+- Use camelCase for functions, variables, and properties
+- Enum values use PascalCase (e.g., `IPv4`, `Static`)
+- Use explicit return types on exported functions
+
+### Svelte 5 Runes
+
+- Use `$props()` for component props with typed interfaces
+- Use `$derived()` for computed values
+- Always define Props interface for component props
+- Example:
+  ```svelte
+  <script lang="ts">
+    interface Props {
+      iface: NetworkInterface
+      class?: string
+    }
+    let { iface, class: className = '' }: Props = $props()
+    const ipv4Addresses = $derived(iface.Addresses?.filter((addr) => addr.Family === 2) ?? [])
+  </script>
+  ```
+
+### Formatting
+
+- Use 2 spaces for indentation
+- Single quotes for strings
+- Trailing commas enabled
+- No semicolons
+- Print width: 100
+- Tailwind CSS class sorting enabled
+
+### Imports
+
+- Use `$lib/` alias for imports from src/lib
+- Group imports: external libraries, then $lib imports, then relative imports
+- Use type imports: `import type { NetworkInterface } from '$lib/types'`
+
+### Error Handling
+
+- Use optional chaining (`?.`) and nullish coalescing (`??`) for safe property access
+- Provide default values for optional props
+- Use proper TypeScript narrowing with type guards when needed
+
+### Component Structure
+
+- One component per file
+- Use `.svelte` extension for components
+- Place reusable UI components in `$lib/components/ui/`
+- Place feature-specific components in `$lib/components/<feature>/`
+- Use `Snippet` type from svelte for children props
+
+### Styling
+
+- Use Tailwind CSS classes
+- Prefer utility classes over custom CSS
+- Use color utilities from the project's palette (green-600, yellow-600, red-600, etc.)
+
+## MCP Tools
+
+You have access to Svelte 5 and SvelteKit documentation via MCP:
+
+### 1. list-sections
+
+Use FIRST to discover available documentation sections.
+
+### 2. get-documentation
+
+Fetch documentation for specific sections after listing.
+
+### 3. svelte-autofixer
+
+MUST use this tool whenever writing Svelte code before sending to the user. Keep calling until no issues remain.
+
+### 4. playground-link
+
+Generate Svelte Playground links after user confirmation. Never use if code was written to project files.
+
+## Project Structure
+
+```
+src/
+  routes/           # SvelteKit routes
+  lib/
+    components/     # Svelte components
+      ui/           # Reusable UI primitives
+      network/      # Network-specific components
+    types.ts        # TypeScript type definitions
+    utils/          # Utility functions
+static/             # Static assets
+```
--- a/README.md
+++ b/README.md
@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+deno run npm:sv create --template minimal --types ts --add prettier eslint tailwindcss="plugins:none" sveltekit-adapter="adapter:static" devtools-json mcp="ide:opencode+setup:local" --install deno router-dash
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/deno.lock
+++ b/deno.lock
--- a/devbox.json
+++ b/devbox.json
@@ -0,0 +1,13 @@
+{
+  "packages": ["deno@latest"],
+  "shell": {
+    "init_hook": ["echo 'Welcome to router-dash dev environment!'"],
+    "scripts": {
+      "dev": "deno task dev",
+      "build": "deno task build",
+      "check": "deno task check",
+      "lint": "deno task lint",
+      "format": "deno task format"
+    }
+  }
+}
--- a/devbox.lock
+++ b/devbox.lock
@@ -0,0 +1,57 @@
+{
+  "lockfile_version": "1",
+  "packages": {
+    "deno@latest": {
+      "last_modified": "2026-02-15T09:18:18Z",
+      "resolved": "github:NixOS/nixpkgs/e3cb16bccd9facebae3ba29c6a76a4cc1b73462a#deno",
+      "source": "devbox-search",
+      "version": "2.6.8",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/g1ppl8rayksihnhnzi97xyhzyzdfc8qc-deno-2.6.8",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/g1ppl8rayksihnhnzi97xyhzyzdfc8qc-deno-2.6.8"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/rj9fgwv2frhqmg0v2g64kmanlfayib03-deno-2.6.8",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/rj9fgwv2frhqmg0v2g64kmanlfayib03-deno-2.6.8"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/hs3cj286jdbn8ahrqa3h8jvc3wj3a0c0-deno-2.6.8",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/hs3cj286jdbn8ahrqa3h8jvc3wj3a0c0-deno-2.6.8"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/61qqy6wi21p9a9a1glwiy80crd0kbr9f-deno-2.6.8",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/61qqy6wi21p9a9a1glwiy80crd0kbr9f-deno-2.6.8"
+        }
+      }
+    },
+    "github:NixOS/nixpkgs/nixpkgs-unstable": {
+      "last_modified": "2026-02-11T21:01:36Z",
+      "resolved": "github:NixOS/nixpkgs/2343bbb58f99267223bc2aac4fc9ea301a155a16?lastModified=1770843696&narHash=sha256-LovWTGDwXhkfCOmbgLVA10bvsi%2FP8eDDpRudgk68HA8%3D"
+    }
+  }
+}
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,39 @@
+import prettier from 'eslint-config-prettier'
+import path from 'node:path'
+import { includeIgnoreFile } from '@eslint/compat'
+import js from '@eslint/js'
+import svelte from 'eslint-plugin-svelte'
+import { defineConfig } from 'eslint/config'
+import globals from 'globals'
+import ts from 'typescript-eslint'
+import svelteConfig from './svelte.config.js'
+
+const gitignorePath = path.resolve(import.meta.dirname, '.gitignore')
+
+export default defineConfig(
+  includeIgnoreFile(gitignorePath),
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs.recommended,
+  prettier,
+  ...svelte.configs.prettier,
+  {
+    languageOptions: { globals: { ...globals.browser, ...globals.node } },
+    rules: {
+      // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+      // see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+      'no-undef': 'off',
+    },
+  },
+  {
+    files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        extraFileExtensions: ['.svelte'],
+        parser: ts.parser,
+        svelteConfig,
+      },
+    },
+  },
+)
--- a/opencode.json
+++ b/opencode.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "svelte": {
+      "type": "local",
+      "command": ["npx", "-y", "@sveltejs/mcp"]
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "router-dash",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "lucide-svelte": "^0.575.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^9.39.2",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.14.0",
+    "globals": "^17.3.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "svelte": "^5.51.0",
+    "svelte-check": "^4.3.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vite-plugin-devtools-json": "^1.0.0"
+  }
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {}
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <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/src/lib/assets/favicon.svg
+++ b/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
--- a/src/lib/components/DHCPLeases.svelte
+++ b/src/lib/components/DHCPLeases.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { NetworkInterface, LeaseWithInterface } from '$lib/types'
+  import { formatIP } from '$lib/utils/network'
+  import Card from '$lib/components/ui/Card.svelte'
+  import LeaseTable from '$lib/components/dhcp/LeaseTable.svelte'
+
+  interface Props {
+    interfaces: NetworkInterface[]
+  }
+
+  let { interfaces }: Props = $props()
+
+  function calculateTimeRemaining(remainingMs: number): string {
+    if (remainingMs < 3600000) {
+      const mins = Math.floor(remainingMs / 60000)
+      return `${mins}m`
+    } else if (remainingMs < 86400000) {
+      const hours = Math.floor(remainingMs / 3600000)
+      return `${hours}h`
+    } else {
+      const days = Math.floor(remainingMs / 86400000)
+      return `${days}d`
+    }
+  }
+
+  const leases = $derived.by(() => {
+    const allLeases: LeaseWithInterface[] = []
+    const now = Date.now() * 1000
+
+    for (const iface of interfaces) {
+      if (iface.DHCPServer?.Leases) {
+        for (const lease of iface.DHCPServer.Leases) {
+          const expirationTime = lease.ExpirationRealtimeUSec || lease.ExpirationUSec
+          const isExpired = expirationTime < now
+          const remainingMs = (expirationTime - now) / 1000
+
+          allLeases.push({
+            ...lease,
+            interfaceName: iface.Name,
+            isExpired,
+            timeRemaining: isExpired ? 'Expired' : calculateTimeRemaining(remainingMs),
+          })
+        }
+      }
+    }
+
+    return allLeases.sort((a, b) => {
+      const hostA = a.Hostname || ''
+      const hostB = b.Hostname || ''
+      if (hostA !== hostB) return hostA.localeCompare(hostB)
+      return formatIP(a.Address, 2).localeCompare(formatIP(b.Address, 2))
+    })
+  })
+
+  const totalLeases = $derived(leases.length)
+  const activeLeases = $derived(leases.filter((l) => !l.isExpired).length)
+</script>
+
+<Card>
+  <div class="mb-4 flex items-center justify-between">
+    <div>
+      <h2 class="text-lg font-semibold text-gray-800">DHCP Leases</h2>
+      <p class="text-sm text-gray-500">{activeLeases} active of {totalLeases} total</p>
+    </div>
+  </div>
+
+  {#if totalLeases > 0}
+    <LeaseTable {leases} />
+  {:else}
+    <p class="py-4 text-center text-gray-500">No DHCP leases found</p>
+  {/if}
+</Card>
--- a/src/lib/components/EmptyState.svelte
+++ b/src/lib/components/EmptyState.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props {
+    message: string
+  }
+
+  let { message }: Props = $props()
+</script>
+
+<div class="py-12 text-center">
+  <p class="text-gray-500">{message}</p>
+</div>
--- a/src/lib/components/NetworkInterfaceCard.svelte
+++ b/src/lib/components/NetworkInterfaceCard.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { AddressFamily, type NetworkInterface } from '$lib/types'
+  import { formatMAC } from '$lib/utils/network'
+  import Card from '$lib/components/ui/Card.svelte'
+  import Code from '$lib/components/ui/Code.svelte'
+  import InterfaceHeader from '$lib/components/network/InterfaceHeader.svelte'
+  import AddressList from '$lib/components/network/AddressList.svelte'
+  import DNSList from '$lib/components/network/DNSList.svelte'
+  import InfoRow from '$lib/components/network/InfoRow.svelte'
+  import StatusBadge from '$lib/components/network/StatusBadge.svelte'
+
+  interface Props {
+    iface: NetworkInterface
+  }
+
+  let { iface }: Props = $props()
+
+  const ipv4Addresses = $derived.by(
+    () => iface.Addresses?.filter((addr) => addr.Family === AddressFamily.IPv4) ?? [],
+  )
+  const ipv6Addresses = $derived.by(
+    () => iface.Addresses?.filter((addr) => addr.Family === AddressFamily.IPv6) ?? [],
+  )
+</script>
+
+<Card>
+  <InterfaceHeader {iface} />
+
+  <div class="space-y-3">
+    {#if iface.HardwareAddress}
+      <InfoRow label="MAC">
+        <Code value={formatMAC(iface.HardwareAddress)} />
+      </InfoRow>
+    {/if}
+
+    {#if ipv4Addresses.length > 0}
+      <div class="flex gap-2">
+        <span class="w-16 text-xs font-medium text-gray-500">IPv4:</span>
+        <AddressList addresses={ipv4Addresses} />
+      </div>
+    {/if}
+
+    {#if ipv6Addresses.length > 0}
+      <div class="flex gap-2">
+        <span class="w-16 text-xs font-medium text-gray-500">IPv6:</span>
+        <AddressList addresses={ipv6Addresses} />
+      </div>
+    {/if}
+
+    <InfoRow label="MTU">
+      <span class="text-sm text-gray-700">{iface.MTU}</span>
+    </InfoRow>
+
+    {#if iface.OnlineState}
+      <InfoRow label="Online">
+        <StatusBadge state={iface.OnlineState} />
+      </InfoRow>
+    {/if}
+  </div>
+
+  {#if iface.DNS && iface.DNS.length > 0}
+    <DNSList dnsServers={iface.DNS} />
+  {/if}
+</Card>
--- a/src/lib/components/PageHeader.svelte
+++ b/src/lib/components/PageHeader.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  interface Props {
+    title: string
+    subtitle: string
+  }
+
+  let { title, subtitle }: Props = $props()
+</script>
+
+<header class="border-b border-gray-200 bg-white shadow-sm">
+  <div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
+    <h1 class="text-2xl font-bold text-gray-900">{title}</h1>
+    <p class="mt-1 text-sm text-gray-500">{subtitle}</p>
+  </div>
+</header>
--- a/src/lib/components/PageLayout.svelte
+++ b/src/lib/components/PageLayout.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<div class="min-h-screen bg-gray-50">
+  {@render children()}
+</div>
--- a/src/lib/components/dhcp/LeaseBadge.svelte
+++ b/src/lib/components/dhcp/LeaseBadge.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Badge from '$lib/components/ui/Badge.svelte'
+
+  interface Props {
+    isExpired: boolean
+    timeRemaining: string
+  }
+
+  let { isExpired, timeRemaining }: Props = $props()
+</script>
+
+{#if isExpired}
+  <Badge variant="red">
+    <span class="mr-1">●</span> Expired
+  </Badge>
+{:else}
+  <Badge variant="green">
+    <span class="mr-1">●</span> Active ({timeRemaining})
+  </Badge>
+{/if}
--- a/src/lib/components/dhcp/LeaseTable.svelte
+++ b/src/lib/components/dhcp/LeaseTable.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { LeaseWithInterface } from '$lib/types'
+  import { formatIP, formatMAC } from '$lib/utils/network'
+  import Table from '$lib/components/ui/Table.svelte'
+  import TableHead from '$lib/components/ui/TableHead.svelte'
+  import TableBody from '$lib/components/ui/TableBody.svelte'
+  import TableHeader from '$lib/components/ui/TableHeader.svelte'
+  import TableRow from '$lib/components/ui/TableRow.svelte'
+  import TableCell from '$lib/components/ui/TableCell.svelte'
+  import Code from '$lib/components/ui/Code.svelte'
+  import LeaseBadge from './LeaseBadge.svelte'
+
+  interface Props {
+    leases: LeaseWithInterface[]
+  }
+
+  let { leases }: Props = $props()
+</script>
+
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableHeader label="Hostname" />
+      <TableHeader label="IP Address" />
+      <TableHeader label="MAC Address" />
+      <TableHeader label="Interface" />
+      <TableHeader label="Status" />
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {#each leases as lease (formatIP(lease.Address, 2))}
+      <TableRow class={lease.isExpired ? 'opacity-50' : ''}>
+        <TableCell class="font-medium text-gray-900">
+          {lease.Hostname || 'Unknown'}
+        </TableCell>
+        <TableCell mono class="text-gray-700">{formatIP(lease.Address, 2)}</TableCell>
+        <TableCell mono class="text-gray-500">
+          {#if lease.HardwareAddress && lease.HardwareAddressLength > 0}
+            {formatMAC(lease.HardwareAddress)}
+          {:else}
+            <span class="text-gray-400">-</span>
+          {/if}
+        </TableCell>
+        <TableCell>
+          <Code value={lease.interfaceName} />
+        </TableCell>
+        <TableCell>
+          <LeaseBadge isExpired={lease.isExpired} timeRemaining={lease.timeRemaining} />
+        </TableCell>
+      </TableRow>
+    {/each}
+  </TableBody>
+</Table>
--- a/src/lib/components/network/AddressList.svelte
+++ b/src/lib/components/network/AddressList.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { InterfaceAddress } from '$lib/types'
+  import { formatIP } from '$lib/utils/network'
+  import Code from '$lib/components/ui/Code.svelte'
+
+  interface Props {
+    addresses: InterfaceAddress[]
+  }
+
+  let { addresses }: Props = $props()
+</script>
+
+<div class="flex flex-col gap-1">
+  {#each addresses as addr (formatIP(addr.Address, addr.Family))}
+    <Code value="{formatIP(addr.Address, addr.Family)}/{addr.PrefixLength}" />
+  {/each}
+</div>
--- a/src/lib/components/network/DNSList.svelte
+++ b/src/lib/components/network/DNSList.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { DNS } from '$lib/types'
+  import { formatIP } from '$lib/utils/network'
+  import Code from '$lib/components/ui/Code.svelte'
+
+  interface Props {
+    dnsServers: DNS[]
+  }
+
+  let { dnsServers }: Props = $props()
+</script>
+
+<div class="mt-4 border-t border-gray-100 pt-4">
+  <div class="mb-2 text-xs font-medium text-gray-500">DNS Servers:</div>
+  <div class="flex flex-wrap gap-2">
+    {#each dnsServers as dns (formatIP(dns.Address, dns.Family))}
+      <Code variant="blue" value={formatIP(dns.Address, dns.Family)} />
+    {/each}
+  </div>
+</div>
--- a/src/lib/components/network/InfoRow.svelte
+++ b/src/lib/components/network/InfoRow.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    label: string
+    children: Snippet
+    class?: string
+  }
+
+  let { label, children, class: className = '' }: Props = $props()
+</script>
+
+<div class="flex items-center gap-2 {className}">
+  <span class="w-16 text-xs font-medium text-gray-500">{label}:</span>
+  {@render children()}
+</div>
--- a/src/lib/components/network/InterfaceHeader.svelte
+++ b/src/lib/components/network/InterfaceHeader.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { NetworkInterface } from '$lib/types'
+  import InterfaceIcon from './InterfaceIcon.svelte'
+  import StatusBadge from './StatusBadge.svelte'
+
+  interface Props {
+    iface: NetworkInterface
+  }
+
+  let { iface }: Props = $props()
+</script>
+
+<div class="mb-4 flex items-center justify-between">
+  <div class="flex items-center gap-3">
+    <InterfaceIcon kind={iface.Kind ?? iface.Type} />
+    <div>
+      <h3 class="text-lg font-semibold text-gray-800">{iface.Name}</h3>
+      {#if iface.Kind}
+        <span class="text-sm text-gray-500">{iface.Kind}</span>
+      {/if}
+    </div>
+  </div>
+  <div class="text-right">
+    <StatusBadge state={iface.OperationalState} />
+    <div class="text-xs text-gray-500">{iface.CarrierState}</div>
+  </div>
+</div>
--- a/src/lib/components/network/InterfaceIcon.svelte
+++ b/src/lib/components/network/InterfaceIcon.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { RefreshCcw, EthernetPort, Network, Tag, Shield, Wifi } from 'lucide-svelte'
+
+  interface Props {
+    kind: string
+  }
+
+  let { kind }: Props = $props()
+
+  const iconMap: Record<string, typeof RefreshCcw> = {
+    loopback: RefreshCcw,
+    ether: EthernetPort,
+    bridge: Network,
+    tun: Shield,
+    vlan: Tag,
+  }
+
+  $effect(() => console.log(kind))
+  const IconComponent = $derived(iconMap[kind] ?? Wifi)
+</script>
+
+<IconComponent class="h-6 w-6" />
--- a/src/lib/components/network/RoutesTable.svelte
+++ b/src/lib/components/network/RoutesTable.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { InterfaceRoute } from '$lib/types'
+  import { formatIP } from '$lib/utils/network'
+  import Card from '$lib/components/ui/Card.svelte'
+  import Table from '$lib/components/ui/Table.svelte'
+  import TableHead from '$lib/components/ui/TableHead.svelte'
+  import TableBody from '$lib/components/ui/TableBody.svelte'
+  import TableHeader from '$lib/components/ui/TableHeader.svelte'
+  import TableRow from '$lib/components/ui/TableRow.svelte'
+  import TableCell from '$lib/components/ui/TableCell.svelte'
+
+  interface Props {
+    routes: InterfaceRoute[]
+  }
+
+  let { routes }: Props = $props()
+
+  let expanded = $state(false)
+
+  const displayRoutes = $derived(expanded ? routes : routes.slice(0, 10))
+  const remainingCount = $derived(routes.length - 10)
+
+  function formatRouteDestination(route: InterfaceRoute): string {
+    return `${formatIP(route.Destination, route.Family)}/${route.DestinationPrefixLength}`
+  }
+
+  function formatGateway(route: InterfaceRoute): string {
+    if (!route.Gateway) return '-'
+    return formatIP(route.Gateway, route.Family)
+  }
+</script>
+
+<Card class="mt-8">
+  <h2 class="mb-4 text-lg font-semibold text-gray-800">Routes</h2>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableHeader label="Destination" />
+        <TableHeader label="Gateway" />
+        <TableHeader label="Table" />
+        <TableHeader label="Priority" />
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each displayRoutes as route (`${route.Family}-${route.Destination.join('.')}-${route.Gateway?.join('.') || 'nogw'}-${route.Priority}-${route.Table}`)}
+        <TableRow>
+          <TableCell mono>{formatRouteDestination(route)}</TableCell>
+          <TableCell mono>{formatGateway(route)}</TableCell>
+          <TableCell>{route.TableString}</TableCell>
+          <TableCell>{route.Priority}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+  {#if routes.length > 10}
+    <button
+      onclick={() => (expanded = !expanded)}
+      class="mt-2 ml-4 cursor-pointer text-sm text-blue-600 hover:text-blue-800 hover:underline"
+    >
+      {#if expanded}
+        Show less
+      {:else}
+        Show {remainingCount} more routes
+      {/if}
+    </button>
+  {/if}
+</Card>
--- a/src/lib/components/network/StatusBadge.svelte
+++ b/src/lib/components/network/StatusBadge.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { getStatusColor } from '$lib/utils/network'
+
+  interface Props {
+    state: string
+    class?: string
+  }
+
+  let { state, class: className = '' }: Props = $props()
+</script>
+
+<span class="text-sm font-medium {getStatusColor(state)} {className}">{state}</span>
--- a/src/lib/components/ui/Badge.svelte
+++ b/src/lib/components/ui/Badge.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    variant?: 'default' | 'green' | 'red' | 'blue' | 'yellow'
+    class?: string
+  }
+
+  let { children, variant = 'default', class: className = '' }: Props = $props()
+
+  const variantClasses = {
+    default: 'bg-gray-100 text-gray-800',
+    green: 'bg-green-100 text-green-800',
+    red: 'bg-red-100 text-red-800',
+    blue: 'bg-blue-50 text-blue-700',
+    yellow: 'bg-yellow-100 text-yellow-800',
+  }
+</script>
+
+<span
+  class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {variantClasses[
+    variant
+  ]} {className}"
+>
+  {@render children()}
+</span>
--- a/src/lib/components/ui/Card.svelte
+++ b/src/lib/components/ui/Card.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    class?: string
+  }
+
+  let { children, class: className = '' }: Props = $props()
+</script>
+
+<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-md {className}">
+  {@render children()}
+</div>
--- a/src/lib/components/ui/Code.svelte
+++ b/src/lib/components/ui/Code.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  interface Props {
+    value: string
+    variant?: 'default' | 'blue'
+  }
+
+  let { value, variant = 'default' }: Props = $props()
+
+  const variantClasses = {
+    default: 'bg-gray-100',
+    blue: 'bg-blue-50 text-blue-700',
+  }
+</script>
+
+<code class="rounded px-2 py-1 font-mono text-xs {variantClasses[variant]}">{value}</code>
--- a/src/lib/components/ui/Table.svelte
+++ b/src/lib/components/ui/Table.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    class?: string
+  }
+
+  let { children, class: className = '' }: Props = $props()
+</script>
+
+<div class="overflow-x-auto {className}">
+  <table class="min-w-full divide-y divide-gray-200">
+    {@render children()}
+  </table>
+</div>
--- a/src/lib/components/ui/TableBody.svelte
+++ b/src/lib/components/ui/TableBody.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<tbody class="divide-y divide-gray-200">
+  {@render children()}
+</tbody>
--- a/src/lib/components/ui/TableCell.svelte
+++ b/src/lib/components/ui/TableCell.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    class?: string
+    mono?: boolean
+  }
+
+  let { children, class: className = '', mono = false }: Props = $props()
+
+  const fontClass = $derived(mono ? 'font-mono' : '')
+</script>
+
+<td class="px-4 py-2 text-sm {fontClass} {className}">
+  {@render children()}
+</td>
--- a/src/lib/components/ui/TableHead.svelte
+++ b/src/lib/components/ui/TableHead.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<thead>
+  {@render children()}
+</thead>
--- a/src/lib/components/ui/TableHeader.svelte
+++ b/src/lib/components/ui/TableHeader.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  interface Props {
+    label: string
+    class?: string
+  }
+
+  let { label, class: className = '' }: Props = $props()
+</script>
+
+<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase {className}">
+  {label}
+</th>
--- a/src/lib/components/ui/TableRow.svelte
+++ b/src/lib/components/ui/TableRow.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    class?: string
+  }
+
+  let { children, class: className = '' }: Props = $props()
+</script>
+
+<tr class={className}>
+  {@render children()}
+</tr>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -0,0 +1,301 @@
+export enum AddressFamily {
+  IPv4 = 2,
+  IPv6 = 10,
+}
+
+export type IPAddress = number[] // Array of byte values
+
+export enum ConfigSource {
+  Static = 'static',
+  Foreign = 'foreign',
+  DHCPv4 = 'DHCPv4',
+  DHCPv6 = 'DHCPv6',
+  DHCPPD = 'DHCP-PD',
+  NDisc = 'NDisc',
+}
+
+export enum ConfigState {
+  Configured = 'configured',
+}
+
+export enum ScopeString {
+  Host = 'host',
+  Link = 'link',
+  Global = 'global',
+}
+
+export enum ProtocolString {
+  Kernel = 'kernel',
+  Boot = 'boot',
+}
+
+export enum TypeString {
+  Local = 'local',
+  Broadcast = 'broadcast',
+  Unicast = 'unicast',
+  Anycast = 'anycast',
+  Multicast = 'multicast',
+  Unreachable = 'unreachable',
+  Table = 'table',
+}
+
+export enum TableString {
+  Local = 'local',
+  Main = 'main',
+  Default = 'default',
+}
+
+export type TableStringType = TableString | string
+
+export enum AdministrativeState {
+  Unmanaged = 'unmanaged',
+  Configured = 'configured',
+}
+
+export enum OperationalState {
+  Carrier = 'carrier',
+  Routable = 'routable',
+  Enslaved = 'enslaved',
+  NoCarrier = 'no-carrier',
+  Degraded = 'degraded',
+}
+
+export enum CarrierState {
+  Carrier = 'carrier',
+  Enslaved = 'enslaved',
+  NoCarrier = 'no-carrier',
+  DegradedCarrier = 'degraded-carrier',
+}
+
+export enum AddressState {
+  Off = 'off',
+  Routable = 'routable',
+  Degraded = 'degraded',
+}
+
+export enum OnlineState {
+  Online = 'online',
+  Offline = 'offline',
+}
+
+export enum ActivationPolicy {
+  Up = 'up',
+}
+
+export enum DNSEnabled {
+  Yes = 'yes',
+  No = 'no',
+}
+
+export enum InterfaceType {
+  Loopback = 'loopback',
+  Ether = 'ether',
+  Bridge = 'bridge',
+  Vlan = 'vlan',
+  None = 'none',
+}
+
+export interface DNS {
+  Family: AddressFamily
+  Address: IPAddress
+  ConfigSource: ConfigSource
+  ConfigProvider?: IPAddress
+}
+
+export interface DNSSetting {
+  LLMNR?: DNSEnabled
+  MDNS?: DNSEnabled
+  ConfigSource: ConfigSource
+}
+
+export interface InterfaceAddress {
+  Family: AddressFamily
+  Address: IPAddress
+  PrefixLength: number
+  ConfigSource: ConfigSource
+  ConfigProvider?: IPAddress
+  Scope?: number
+  ScopeString?: ScopeString
+  Flags: number
+  FlagsString: string | null
+  Broadcast?: IPAddress
+  PreferredLifetimeUSec?: number
+  PreferredLifetimeUsec?: number // Note: both variants exist
+  ValidLifetimeUSec?: number
+  ValidLifetimeUsec?: number // Note: both variants exist
+  ConfigState?: ConfigState
+}
+
+export interface InterfaceRoute {
+  Family: AddressFamily
+  Destination: IPAddress
+  DestinationPrefixLength: number
+  Gateway?: IPAddress
+  PreferredSource?: IPAddress
+  TOS: number
+  Scope: number
+  Protocol: number
+  Type: number
+  Priority: number
+  Table: number
+  Flags: number
+  NextHopID?: number
+  ConfigSource: ConfigSource
+  ConfigProvider?: IPAddress
+  ScopeString: ScopeString
+  ProtocolString: ProtocolString | string
+  TypeString: TypeString | string
+  TableString: TableStringType
+  Preference: number
+  FlagsString: string
+  ConfigState?: ConfigState
+  LifetimeUSec?: number
+}
+
+export interface NextHop {
+  ID: number
+  Family: AddressFamily
+  ConfigSource: ConfigSource
+  ConfigProvider: IPAddress
+  Gateway: IPAddress
+  Flags: number
+  FlagsString: string
+  Protocol: number
+  ProtocolString: string
+  Blackhole: boolean
+  ConfigState?: ConfigState
+}
+
+export interface DHCPv4Lease {
+  LeaseTimestampUSec: number
+  Timeout1USec: number
+  Timeout2USec: number
+}
+
+export interface DHCPv4Client {
+  Lease: DHCPv4Lease
+  ClientIdentifier: number[]
+}
+
+export interface DHCPv6Prefix {
+  Prefix: IPAddress
+  PrefixLength: number
+  PreferredLifetimeUSec: number
+  ValidLifetimeUSec: number
+}
+
+export interface DHCPv6Lease {
+  Timeout1USec: number
+  Timeout2USec: number
+  LeaseTimestampUSec: number
+}
+
+export interface DHCPv6Client {
+  Lease: DHCPv6Lease
+  Prefixes: DHCPv6Prefix[]
+  DUID: number[]
+}
+
+export interface DHCPLease {
+  ClientId: number[]
+  Address: IPAddress
+  Hostname?: string
+  HardwareAddressType: number
+  HardwareAddressLength: number
+  HardwareAddress: IPAddress
+  ExpirationUSec: number
+  ExpirationRealtimeUSec: number
+}
+
+export interface StaticLease {
+  ClientId: number[]
+  Address: IPAddress
+  HardwareAddressType: number
+  HardwareAddressLength: number
+  HardwareAddress: IPAddress
+}
+
+export interface DHCPServer {
+  PoolOffset: number
+  PoolSize: number
+  Leases?: DHCPLease[]
+  StaticLeases?: StaticLease[]
+}
+
+export interface NetworkInterface {
+  Index: number
+  Name: string
+  Kind?: string
+  Type: InterfaceType
+  Driver?: string
+  Flags: number
+  FlagsString: string
+  KernelOperationalState: number
+  KernelOperationalStateString: string
+  MTU: number
+  MinimumMTU: number
+  MaximumMTU: number
+  HardwareAddress?: IPAddress
+  PermanentHardwareAddress?: IPAddress
+  BroadcastAddress?: IPAddress
+  IPv6LinkLocalAddress?: IPAddress
+  MasterInterfaceIndex?: number
+  AdministrativeState: AdministrativeState
+  OperationalState: OperationalState
+  CarrierState: CarrierState
+  AddressState: AddressState
+  IPv4AddressState: AddressState
+  IPv6AddressState: AddressState
+  OnlineState?: OnlineState
+  NetworkFile?: string
+  NetworkFileDropins?: string[]
+  RequiredForOnline?: boolean
+  RequiredFamilyForOnline?: 'any'
+  ActivationPolicy?: ActivationPolicy
+  LinkFile?: string
+  NetDevFile?: string
+  NetDevFileDropins?: string[]
+  Path?: string
+  Vendor?: string
+  Model?: string
+  DNS?: DNS[]
+  DNSSettings?: DNSSetting[]
+  Addresses?: InterfaceAddress[]
+  Routes?: InterfaceRoute[]
+  NextHops?: NextHop[]
+  DHCPv4Client?: DHCPv4Client
+  DHCPv6Client?: DHCPv6Client
+  DHCPServer?: DHCPServer
+}
+
+export interface RoutingPolicyRule {
+  Family: AddressFamily
+  Protocol: number
+  ProtocolString: ProtocolString | string
+  TOS: number
+  Type: number
+  TypeString: TypeString | string
+  IPProtocol: number
+  IPProtocolString: ProtocolString | string
+  Priority: number
+  FirewallMark: number
+  FirewallMask: number
+  Table?: number
+  TableString: TableStringType
+  Invert: boolean
+  ConfigSource: ConfigSource
+  ConfigState?: ConfigState
+}
+
+export interface NetworkStatus {
+  Interfaces: NetworkInterface[]
+  Routes: InterfaceRoute[]
+  RoutingPolicyRules: RoutingPolicyRule[]
+}
+
+// DHCP Lease with interface context
+export interface LeaseWithInterface extends DHCPLease {
+  interfaceName: string
+  isExpired: boolean
+  timeRemaining: string
+}
--- a/src/lib/utils/network.ts
+++ b/src/lib/utils/network.ts
@@ -0,0 +1,54 @@
+import type { IPAddress, AddressFamily } from '$lib/types'
+
+export function formatIP(address: IPAddress, family: AddressFamily): string {
+  if (family === 2) {
+    // IPv4
+    return address.slice(0, 4).join('.')
+  } else if (family === 10) {
+    // IPv6
+    const hexParts: string[] = []
+    for (let i = 0; i < 16; i += 2) {
+      const hex = ((address[i] << 8) | address[i + 1]).toString(16)
+      hexParts.push(hex)
+    }
+    // Compress zeros
+    let ipv6 = hexParts.join(':')
+    // Simple compression of leading zeros in each group
+    ipv6 = ipv6.replace(/:0+/g, ':')
+    // Compress longest run of zeros
+    const zeroRuns = ipv6.match(/:(?::0*)+/g)
+    if (zeroRuns) {
+      const longest = zeroRuns.reduce((a, b) => (a.length > b.length ? a : b))
+      ipv6 = ipv6.replace(longest, '::')
+    }
+    return ipv6
+  }
+  return address.join('.')
+}
+
+export function formatMAC(address: IPAddress): string {
+  return address
+    .slice(0, 6)
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join(':')
+    .toUpperCase()
+}
+
+export function getStatusColor(state: string): string {
+  switch (state) {
+    case 'routable':
+    case 'online':
+    case 'carrier':
+      return 'text-green-600'
+    case 'degraded':
+      return 'text-yellow-600'
+    case 'no-carrier':
+    case 'offline':
+    case 'off':
+      return 'text-red-600'
+    case 'enslaved':
+      return 'text-blue-600'
+    default:
+      return 'text-gray-600'
+  }
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import './layout.css'
+  import favicon from '$lib/assets/favicon.svg'
+
+  let { children } = $props()
+</script>
+
+<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+{@render children()}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { type NetworkInterface, InterfaceType } from '$lib/types'
+  import NetworkInterfaceCard from '$lib/components/NetworkInterfaceCard.svelte'
+  import DHCPLeases from '$lib/components/DHCPLeases.svelte'
+  import PageLayout from '$lib/components/PageLayout.svelte'
+  import PageHeader from '$lib/components/PageHeader.svelte'
+  import RoutesTable from '$lib/components/network/RoutesTable.svelte'
+  import EmptyState from '$lib/components/EmptyState.svelte'
+
+  const { data } = $props()
+
+  const allRoutes = $derived(
+    data.networkStatus.Interfaces.flatMap((iface: NetworkInterface) => iface.Routes || []).concat(
+      data.networkStatus.Routes,
+    ),
+  )
+
+  const displayedInterfaces = $derived(
+    data.networkStatus.Interfaces.filter(
+      ({ Type: type }) => ![InterfaceType.Loopback, InterfaceType.Bridge].includes(type),
+    ),
+  )
+</script>
+
+<svelte:head>
+  <title>Router Dash</title>
+</svelte:head>
+
+<PageLayout>
+  <PageHeader title="Router Dash" subtitle="Router network status" />
+
+  <main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+    {#if data.networkStatus}
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+        {#each displayedInterfaces as iface (iface.Name)}
+          <NetworkInterfaceCard {iface} />
+        {/each}
+      </div>
+
+      {#if allRoutes.length > 0}
+        <RoutesTable routes={allRoutes} />
+      {/if}
+
+      <div class="mt-8">
+        <DHCPLeases interfaces={data.networkStatus.Interfaces} />
+      </div>
+    {:else}
+      <EmptyState message="No network data available" />
+    {/if}
+  </main>
+</PageLayout>
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -0,0 +1,9 @@
+import type { NetworkStatus } from '$lib/types'
+import networkData from '$lib/network-status.json'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async () => {
+  return {
+    networkStatus: networkData as NetworkStatus,
+  }
+}
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
--- a/static/robots.txt
+++ b/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,6 @@
+import adapter from '@sveltejs/adapter-static'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = { kit: { adapter: adapter() } }
+
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "rewriteRelativeImportExtensions": true,
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  //
+  // To make changes to top-level options such as include and exclude, we recommend extending
+  // the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,6 @@
+import devtoolsJson from 'vite-plugin-devtools-json'
+import tailwindcss from '@tailwindcss/vite'
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({ plugins: [tailwindcss(), sveltekit(), devtoolsJson()] })
				`@@ -0,0 +1 @@`
				`eval "$(devbox generate direnv --print-envrc)"`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.