Skip to main content

​
Kalweb

CI License: MIT Unified home dashboard for the Kalex ecosystem. Built with Next.js 16, shadcn/ui, and Recharts.

​
Features

  • Kalnet Integration - Real-time home network monitoring
    • System health status with visual indicators
    • Individual service status and latency
    • Storage usage with pie chart
    • Media library statistics (Jellyfin)
    • Automation stats (n8n)
    • Active streaming sessions
  • Coming Soon
    • Budget tracking (Kalops integration)
    • Calendar events
    • Task management

​
Tech Stack

​
Getting Started

​
Prerequisites

  • Node.js 20+
  • npm or pnpm

​
Installation

# Install dependencies
npm install

# Copy environment file
cp .env.example .env.local

# Start development server
npm run dev
Open http://localhost:3000 to see the dashboard.

​
Environment Variables

VariableDescriptionDefault
NEXT_PUBLIC_KALNET_API_URLKalnet metrics collector URLhttp://localhost:9091
NEXT_PUBLIC_DEMO_MODEUse mock data instead of live APItrue

​
Project Structure

kalweb/
├── app/
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Main dashboard
│   └── globals.css       # Global styles
├── components/
│   ├── kalnet/           # Kalnet widget components
│   │   ├── index.tsx     # Main widget
│   │   ├── status-cards.tsx
│   │   ├── storage-chart.tsx
│   │   └── active-streams.tsx
│   └── ui/               # shadcn/ui components
│       ├── badge.tsx
│       ├── card.tsx
│       └── progress.tsx
├── lib/
│   ├── use-kalex.ts      # SWR hook for Kalex API
│   └── utils.ts          # Utility functions
└── types/
    └── kalex.ts          # TypeScript types

​
API Integration

The dashboard fetches data from the Kalnet /api/kalex endpoint which provides: 
interface KalexResponse {
  status: "healthy" | "degraded" | "down";
  status_icon: string;
  timestamp: string;
  uptime: KalexUptime;
  services: KalexService[];
  media: KalexMediaStats;
  storage: KalexStorageStats;
  automation: KalexAutomation;
  streams: KalexActiveStream[];
}
Data refreshes every 15 seconds via SWR.

​
Development

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint
  • Kalnet - Home network service mesh
  • Kalops - Budget tracking system

​
License

MIT