Add embedded web chat client (SPA) #7

New Issue

clawbot · 2026-02-10T18:22:47+01:00

clawbot commented

2026-02-10 18:22:47 +01:00

Overview

Build an IRC-style web chat client embedded directly in the Go binary, served at GET /.

Architecture

Backend (C2S HTTP API)

New API endpoints under /api/v1/:

Method	Path	Description
GET	`/server`	Server name + MOTD
POST	`/register`	Register nick, get bearer token
GET	`/me`	Current user info
GET	`/channels`	List joined channels
GET	`/channels/all`	List all channels
POST	`/channels/join`	Join/create channel
DELETE	`/channels/{ch}/part`	Leave channel
GET	`/channels/{ch}/members`	Channel user list
GET	`/channels/{ch}/messages`	Get messages (with `?after=` cursor)
POST	`/channels/{ch}/messages`	Send message
GET	`/dm/{nick}/messages`	Get DMs
POST	`/dm/{nick}/messages`	Send DM
GET	`/poll`	Poll all new messages (channels + DMs)

Auth: Bearer token in Authorization header.

Database (migration 003)

users — nick, token, last_seen
channel_members — channel↔user join table
messages — channel messages + DMs (unified table with is_dm flag)
Proper indexes on message queries

Frontend (Preact SPA)

Preact (3KB) instead of React — minimal bundle size
esbuild for bundling — fast, zero-config
Built output in web/dist/, embedded via embed.FS
Total JS bundle: ~19KB minified

UI Design (IRC-style)

Tab bar (top): Server tab, channel tabs, DM tabs with close buttons
Messages (center): Timestamped, colored nicks, <nick> format
User list (right): Full-height panel for current channel, click to DM
Input bar (bottom): Message input with send button
Join dialog: Inline in tab bar for joining channels

Features

Nick registration with token persistence (localStorage)
Channel join/part/create
Real-time polling (1.5s interval)
DM windows as separate tabs
IRC commands: /join, /part, /msg, /nick
Per-nick color hashing
Dark theme, monospace font
Mobile-responsive (user list hidden on small screens)

Engineering Decisions

Preact over React: 3KB vs 40KB, same API, embedded binary size matters
Polling over WebSocket: Simpler, works through all proxies, adequate for chat at this scale. Can upgrade later.
Unified messages table: Channel msgs and DMs in one table with is_dm flag — simpler polling query
Bearer tokens: Simple auth model, no sessions to manage. Token in localStorage.
embed.FS: Zero external dependencies at runtime, single binary deployment
esbuild: Sub-second builds, no webpack config complexity

## Overview Build an IRC-style web chat client embedded directly in the Go binary, served at `GET /`. ## Architecture ### Backend (C2S HTTP API) New API endpoints under `/api/v1/`: | Method | Path | Description | |--------|------|-------------| | GET | `/server` | Server name + MOTD | | POST | `/register` | Register nick, get bearer token | | GET | `/me` | Current user info | | GET | `/channels` | List joined channels | | GET | `/channels/all` | List all channels | | POST | `/channels/join` | Join/create channel | | DELETE | `/channels/{ch}/part` | Leave channel | | GET | `/channels/{ch}/members` | Channel user list | | GET | `/channels/{ch}/messages` | Get messages (with `?after=` cursor) | | POST | `/channels/{ch}/messages` | Send message | | GET | `/dm/{nick}/messages` | Get DMs | | POST | `/dm/{nick}/messages` | Send DM | | GET | `/poll` | Poll all new messages (channels + DMs) | Auth: Bearer token in Authorization header. ### Database (migration 003) - `users` — nick, token, last_seen - `channel_members` — channel↔user join table - `messages` — channel messages + DMs (unified table with `is_dm` flag) - Proper indexes on message queries ### Frontend (Preact SPA) - **Preact** (3KB) instead of React — minimal bundle size - **esbuild** for bundling — fast, zero-config - Built output in `web/dist/`, embedded via `embed.FS` - Total JS bundle: ~19KB minified ### UI Design (IRC-style) - **Tab bar** (top): Server tab, channel tabs, DM tabs with close buttons - **Messages** (center): Timestamped, colored nicks, `<nick>` format - **User list** (right): Full-height panel for current channel, click to DM - **Input bar** (bottom): Message input with send button - **Join dialog**: Inline in tab bar for joining channels ### Features - Nick registration with token persistence (localStorage) - Channel join/part/create - Real-time polling (1.5s interval) - DM windows as separate tabs - IRC commands: `/join`, `/part`, `/msg`, `/nick` - Per-nick color hashing - Dark theme, monospace font - Mobile-responsive (user list hidden on small screens) ### Engineering Decisions 1. **Preact over React**: 3KB vs 40KB, same API, embedded binary size matters 2. **Polling over WebSocket**: Simpler, works through all proxies, adequate for chat at this scale. Can upgrade later. 3. **Unified messages table**: Channel msgs and DMs in one table with `is_dm` flag — simpler polling query 4. **Bearer tokens**: Simple auth model, no sessions to manage. Token in localStorage. 5. **embed.FS**: Zero external dependencies at runtime, single binary deployment 6. **esbuild**: Sub-second builds, no webpack config complexity

clawbot referenced a pull request that will close this issue

2026-02-10 18:22:55 +01:00

Add embedded web chat client (closes #7) #8

clawbot closed this issue

2026-02-11 03:02:42 +01:00

clawbot referenced this issue from a commit

2026-02-11 03:02:42 +01:00

Add embedded web chat client (closes #7) (#8)

Sign in to join this conversation.