feat: web chat channel with SSE token streaming and multi-session UI

[dmagyar]

Summary

Adds a self-contained browser-based chat interface to nanobot via a new `WebChannel`.

Core channel (`nanobot/channels/web.py`)

• HTTP server (aiohttp) with POST `/api/chat` returning a Server-Sent Events stream
• SSE events: `token` (live LLM text), `progress`, `done`, `error`
• Per-request asyncio queue bridges the agent loop to the SSE stream
• Keep-alive pings every 120 s; nginx buffering disabled via `X-Accel-Buffering: no`
• Integrates with the plugin channel architecture (`discover_all()`) — accepts both `WebConfig` and raw dict config
• `agent_loop` injected by `ChannelManager` after channel discovery

Agent loop integration (`nanobot/agent/loop.py`)

• Uses `on_stream` / `on_stream_end` callbacks for token-level streaming
• `on_tool_result` callback wired through `_LoopHook.after_iteration` to stream tool output back to the browser
• `process_direct` passes `media` list for image attachment support
• No changes to other channels — fully backwards compatible
• Kept in sync with upstream `runner.run(AgentRunSpec(...))` refactor

Server-side session storage

• Sessions persisted as `~/.nanobot/web-sessions/{uuid}.md`
• YAML frontmatter + embedded `` block for lossless round-trip
• Human-readable `### human` / `### assistant` sections for manual inspection
• REST API: `GET/POST /api/sessions`, `GET/PUT/PATCH/DELETE /api/sessions/{id}`
• Legacy localStorage data migrated automatically on first load

File & image attachment support

• `POST /api/upload` — multipart upload saved to `~/.nanobot/web-uploads/`
• `GET /api/uploads/{id}` — serve uploaded file
• Images routed as multimodal `image_url` content blocks (vision-capable models)
• Text files injected as `` blocks in the message
• Drag-and-drop onto the chat area supported

Frontend (`web/`)

• Multi-session sidebar — conversations stored server-side, click to switch, first message auto-names the session, pin/rename/delete support
• SSE token streaming — tokens appear live with a blinking cursor; final text rendered as Markdown via `marked.js`
• Tool output panels — each tool call rendered in a collapsible panel (click header to expand/collapse); streaming output shown live inside the panel
• Base64 image rendering — raw base64 image strings detected by magic-byte prefix and rendered as inline `` elements
• Image lightbox — click any image to open full-screen overlay; close via ✕, backdrop click, or Escape
• File upload UI — paperclip button, upload preview bar with thumbnails, drag-and-drop
• Stop button — cancel generation mid-stream
• Light / dark theme via `prefers-color-scheme`
• Service worker for offline caching / PWA support
• Mobile-responsive layout

Config (`nanobot/config/schema.py`)

• `WebConfig` with `host`, `port`, `static_dir`, `allow_from`, `vision` fields
• `vision: false` disables sending images to the LLM (for models without vision support)
• `ChannelsConfig` uses `extra="allow"` — web channel discovered dynamically like all others

Docker (`Dockerfile`)

• `web/` directory packaged into the wheel via hatchling `force-include`
• `openssh-client` added for bridge npm install

pyproject.toml

• Added `[web]` optional dep group: `aiohttp>=3.9.0,<4.0.0`

Enable the web channel

{
  "channels": {
    "web": {
      "enabled": true,
      "host": "0.0.0.0",
      "port": 8080
    }
  }
}

pip install -e ".[web]"
nanobot gateway

Test plan

• docker compose build && docker compose up — server starts, /api/health returns {"status":"ok"}
• Open http://localhost:8080 — chat UI loads, empty state shown
• Send a message — tokens stream live, final answer rendered as Markdown
• Send a message that triggers tool calls — each tool appears as a collapsible panel with streaming output
• Upload a text file — contents injected into message context
• Upload an image (vision-capable model) — image included in LLM request
• Bot response with base64 image — renders inline, click opens lightbox
• Sessions persist across page reload
• Open a second browser tab — sessions are independent, sidebar syncs
• Drag and drop file onto chat area — attachment added to preview bar
• Stop button cancels mid-stream generation

[dmahurin]

Note, now there are 3 web chat PR's, they all have unique feature/advantages/simplicity

#1047
#1748

https://github.com/search?q=repo%3AHKUDS%2Fnanobot+%22web+chat%22&type=pullrequests

[dmagyar]

I saw those - and I'm not married to my implementation. I like this UX better. Maybe implementing the backend APIs should be in the project and the associated front-end could be a separate project (so there could be multiple flavours).
Here is an example screenshot from my PR:

[dmagyar]

@dmahurin is there a similar PR that you intend to merge in? I'm okay closing this and use the one you will eventually include. Once the APIs are there (for streaming, tool calls/responses) I can just focus on making an UI as a separate project.

[dmahurin]

@dmagyar, I do not have a preference on any specific web chat implementation. This is more a question for @Re-bin on what kind of web chat implementation would be good enough. Minimal, Full featured, or somewhere in between.

[dmagyar]

Friendly reminder @Re-bin, @dmahurin - should I keep updating this PR in the hopes of a merge or you guys picked one of the other web fronts? Happy to keep this updated if you need more time.

[dmagyar]

Can I please get a verdict on this PR? I'm keeping it updated in the hopes of a merge; also using it in production for quite a while. If you decide not to merge which web channel interface should I use?

[dmagyar]

Dear maintainers any feedback on this PR? I have not seen a more complete web channel yet. @chengyongru?

[dmagyar]

Very fair comments @chengyongru - I've submitted a new PR with ONLY the web related features. This will miss some interesting features (like showing tool executions, collapsible thinking logic etc.) but you are right - this should be a clean PR for only adding the web channel. Please find the new PR here: #2871