Navi Webclient — Context for Claude

What this repo is

A new web client for Navi — a personal modular AI agent system. The backend (FastAPI + Ollama) already exists and is fully operational at http://localhost:8000. Your job is to build the frontend that talks to it.

The current client (/home/gmikcon/Projects/navi-1/client/) is a vanilla JS placeholder. It works, but it was built as a temporary scaffold. The new client should be a proper application.

Server

The backend lives at /home/gmikcon/Projects/navi-1/.
Running server: http://localhost:8000
WebSocket: ws://localhost:8000/ws/sessions/{session_id}

Do not modify the backend. All server docs are in docs/.

Key server docs (read these first)

File	What's in it
`docs/api.md`	Complete REST + WebSocket API reference. Start here.
`docs/architecture.md`	How the server is structured internally
`docs/profiles.md`	What profiles are, their IDs and capabilities
`docs/sessions.md`	Session model, two-buffer design, compression
`docs/current-client-spec.md`	Full spec of the existing vanilla JS client: layout, state shape, WS event handling, component breakdown, design system (colors, typography), file/image attachment flow
`docs/spec.md`	New client spec — stack, component architecture, Pinia stores, WS logic, responsive layout, animations, error handling. Start here before implementing anything.

What the backend does

Navi is a tool-calling LLM agent. A session is a persistent conversation linked to a profile (e.g. "secretary", "server_admin"). The client sends messages over WebSocket and receives a stream of typed events in response:

thinking chunks (model reasoning, collapsible)
tool calls (what tools the agent is using and their results)
text deltas (the final streamed response)

See docs/api.md for the full event reference and typical event sequences.

Profiles

Three profiles are currently active:

ID	Name	Purpose
`secretary`	Personal Secretary	Research, writing, analysis, everyday tasks
`server_admin`	Server Administrator	Remote ops, monitoring, infrastructure
`developer`	Tool Developer	Writing/testing Navi's own tools

Profiles are fetched live from GET /agents/profiles.

Existing client (reference only)

The old client is at /home/gmikcon/Projects/navi-1/client/. You can read it to understand what was built before, but you are not constrained by its design. It uses vanilla JS ES modules, marked.js + highlight.js.

Key UX patterns worth knowing about:

Session ID stored in URL hash for bookmarking
Thinking blocks auto-collapse when reasoning ends, can be re-expanded
Tool cards collapsed by default, expandable
Profile can be switched mid-session by the agent (handle profile_switched event)
Stop button during generation (POST /sessions/{id}/stop)
Image paste/attach support (base64)
File upload before sending a message (POST /sessions/{id}/files)

What the user expects

Clean, modern UI — this is a daily-use personal assistant
Sidebar with session list (pinned sessions first)
Main chat area with proper markdown rendering
Tool call visibility — the user wants to see what the agent is doing
Thinking blocks — collapsible, clearly separated from the response
Profile indicator and ability to create sessions with a specific profile