# Agent Instructions

This is a SvelteKit 5 project with TypeScript and Tailwind CSS for a router dashboard interface.

## Build Commands

```bash
# Development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run check
npm run check:watch

# Linting and formatting
npm run lint
npm 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
```