initial commit

2026-02-21 17:37:49 +02:00
commit 9f661e4d57
50 changed files with 3037 additions and 0 deletions
--- 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';
				`@@ -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.