Console frontend

Development

Nix

For users with Nix installed, you can use the provided flake for a reproducible development environment:

cd .configs
nix develop

This provides Node.js 24, pnpm, and Git. The flake is regularly updated to track the latest nixpkgs-unstable.

Local Development

The following snippet contains the most important commands for development.

pnpm install
cp .env.example .env # Copy the example environment file
pnpm run build # Build the project
pnpm run dev # Starts a development server on port 5173

pnpm run check # Check for various issues
pnpm run lint # Lint the code
pnpm run format # Format the code (Or use a Prettier extension in  your editor)
pnpm run test # Run tests with Vitest

Mobile responsiveness

The console should remain usable at small viewport widths, with 375px as the baseline mobile target.

When changing layouts, lists, tables, or chart-heavy pages, validate in responsive mode (for example 375x812) and ensure:

• No page-level horizontal scrolling on mobile
• Horizontal overflow is scoped to the component that needs it (for example tables)
• Two-column desktop layouts collapse to one column on mobile where relevant
• Touch targets and controls remain usable without overlapping

CSS Architecture

Styles use @layer ordering and design tokens from @nais/ds-svelte-community:

• Tokens: Use --ax-space-*, --ax-radius-*, --ax-text-* variables — never hardcode spacing, radii, or colors
• Utility classes: src/styles/app.css provides .layout-two-column, .layout-sidebar, .table-scroll, .detail-actions, .loading-centered for common patterns
• LayerChart theming: src/styles/layerchart.css maps chart library variables to design tokens. The .dark block must mirror the :root declarations (tokens resolve differently per scope)
• Validation: Run pnpm run lint — ESLint includes custom rules for missing CSS variables and unused GraphQL files

AI-Assisted Development

The project is configured with AI assistant guidelines and the Svelte MCP (Model Context Protocol) server:

• AGENTS.md — Project guidelines for AI assistants (GitHub Copilot, Cursor, Claude Code, etc.), covering Svelte 5 runes patterns, Houdini GraphQL conventions, CSS variable rules, component library usage, code quality standards, and security patterns.

• Svelte MCP Server — Provides Svelte 5 and SvelteKit documentation to AI assistants via the official remote endpoint at https://mcp.svelte.dev/mcp. In VS Code, it is available through the MCP server registry (no project config needed). For other editors (Cursor, Claude Code, Zed), it is configured in .mcp.json. Tools: list-sections, get-documentation, svelte-autofixer, playground-link.

Using the nais API proxy

To connect to a nais-api instance, run the nais CLI proxy on your host machine:

nais auth login -n
nais alpha api proxy

Then set your .env:

GRAPHQL_ENDPOINT="http://localhost:4242/graphql"
VITE_PROXY_ENDPOINT="http://localhost:4242"
VITE_SCHEMA_ENDPOINT="http://localhost:4242/graphql"

Security Hardening

This project implements several security measures to protect against supply chain attacks:

Lifecycle Script Control

pnpm v11 blocks lifecycle scripts by default. Only packages listed in pnpm-workspace.yaml under allowBuilds can run lifecycle scripts.

Dependency Update Policy

pnpm enforces a 14-day cooldown period via minimumReleaseAge: 20160 in pnpm-workspace.yaml. Only packages published at least 14 days ago are eligible for installation, reducing the risk of newly compromised packages.

To check for available updates:

pnpm run check-outdated

To update outdated dependencies (respects 14-day cooldown):

pnpm run update-outdated