feat(web): overhaul SPA to look like a proper IRC client

Major UI overhaul of the embedded web SPA to match traditional IRC client look and feel: Layout changes: - Input bar now spans full width at bottom of window (below user list) - Removed inline join dialog from tab bar (use /join command instead) - Nick prefix shown in input bar (e.g. 'alice>') - Topic bar shows 'Topic:' label with accent color IRC command support: - Added /me command (action messages via meta.action flag) - Added /mode command for channel/user mode changes - Added /quit command for clean disconnect - Added /help command listing all available commands - /part now accepts optional reason message User list improvements: - Parse 353 RPL_NAMREPLY to extract user mode prefixes - Display @nick for ops, +nick for voiced, plain for regular users - Sort users by mode rank: ops first, then voiced, then regular - Ops shown in orange, voiced in green, regular in default color - Extracted UserList into dedicated component Message display: - Messages displayed inline with nick on same line (IRC style) - Action messages (/me) shown as '* nick does something' in purple - System messages prefixed with '***' - Uses IRC vocabulary: 'has parted' instead of 'has left' - Parse 332 RPL_TOPIC for channel topic on join UX improvements: - Command history with up/down arrow keys (100 entries) - Input always visible including on Server tab - Dark theme with monospace font (JetBrains Mono/Fira Code) - Hover highlight on messages - Custom scrollbar styling - Tab type-based styling (server tab bold) closes #50
2026-03-07 06:14:21 -08:00
14 changed files with 1076 additions and 3121 deletions
--- a/README.md
+++ b/README.md
@@ -764,98 +764,21 @@ not pollute the message queue.

 **IRC reference:** RFC 1459 §4.6.2, §4.6.3

-#### MODE — Query Modes
+#### MODE — Set/Query Modes (Planned)

-Query channel or user modes. Returns the current mode string and, for
-channels, the creation timestamp.
+Set channel or user modes.

 **C2S:**
 ```json
-{"command": "MODE", "to": "#general"}
-{"command": "MODE", "to": "alice"}
+{"command": "MODE", "to": "#general", "params": ["+m"]}
+{"command": "MODE", "to": "#general", "params": ["+o", "alice"]}
 ```

-**S2C (via message queue):**
-
-For channels, the server sends RPL_CHANNELMODEIS (324) and
-RPL_CREATIONTIME (329):
-```json
-{"command": "324", "to": "alice", "params": ["#general", "+n"]}
-{"command": "329", "to": "alice", "params": ["#general", "1709251200"]}
-```
-
-For users, the server sends RPL_UMODEIS (221):
-```json
-{"command": "221", "to": "alice", "body": ["+"]}
-```
-
-**Note:** Mode changes (setting/unsetting modes) are not yet implemented.
-Currently only query is supported.
+**Status:** Not yet implemented. See [Channel Modes](#channel-modes) for the
+planned mode set.

 **IRC reference:** RFC 1459 §4.2.3

-#### NAMES — Channel Member List
-
-Request the member list for a channel. Returns RPL_NAMREPLY (353) and
-RPL_ENDOFNAMES (366).
-
-**C2S:**
-```json
-{"command": "NAMES", "to": "#general"}
-```
-
-**IRC reference:** RFC 1459 §4.2.5
-
-#### LIST — List Channels
-
-Request a list of all channels with member counts. Returns RPL_LIST (322)
-for each channel followed by RPL_LISTEND (323).
-
-**C2S:**
-```json
-{"command": "LIST"}
-```
-
-**IRC reference:** RFC 1459 §4.2.6
-
-#### WHOIS — User Information
-
-Query information about a user. Returns RPL_WHOISUSER (311),
-RPL_WHOISSERVER (312), RPL_WHOISCHANNELS (319), and RPL_ENDOFWHOIS (318).
-
-**C2S:**
-```json
-{"command": "WHOIS", "to": "alice"}
-```
-
-**IRC reference:** RFC 1459 §4.5.2
-
-#### WHO — Channel User List
-
-Query users in a channel. Returns RPL_WHOREPLY (352) for each user followed
-by RPL_ENDOFWHO (315).
-
-**C2S:**
-```json
-{"command": "WHO", "to": "#general"}
-```
-
-**IRC reference:** RFC 1459 §4.5.1
-
-#### LUSERS — Server Statistics
-
-Request server user/channel statistics. Returns RPL_LUSERCLIENT (251),
-RPL_LUSEROP (252), RPL_LUSERCHANNELS (254), and RPL_LUSERME (255).
-
-**C2S:**
-```json
-{"command": "LUSERS"}
-```
-
-LUSERS replies are also sent automatically during connection registration.
-
-**IRC reference:** RFC 1459 §4.3.2
-
 #### KICK — Kick User (Planned)

 Remove a user from a channel.
@@ -905,27 +828,12 @@ the server to the client (never C2S) and use 3-digit string codes in the
 | Code | Name                 | When Sent | Example |
 |------|----------------------|-----------|---------|
 | `001` | RPL_WELCOME         | After session creation | `{"command":"001","to":"alice","body":["Welcome to the network, alice"]}` |
-| `002` | RPL_YOURHOST        | After session creation | `{"command":"002","to":"alice","body":["Your host is neoirc, running version 0.1"]}` |
+| `002` | RPL_YOURHOST        | After session creation | `{"command":"002","to":"alice","body":["Your host is neoirc-server, running version 0.1"]}` |
 | `003` | RPL_CREATED         | After session creation | `{"command":"003","to":"alice","body":["This server was created 2026-02-10"]}` |
-| `004` | RPL_MYINFO          | After session creation | `{"command":"004","to":"alice","params":["neoirc","0.1","","imnst"]}` |
-| `005` | RPL_ISUPPORT        | After session creation | `{"command":"005","to":"alice","params":["CHANTYPES=#","NICKLEN=32","NETWORK=neoirc"],"body":["are supported by this server"]}` |
-| `221` | RPL_UMODEIS         | In response to user MODE query | `{"command":"221","to":"alice","body":["+"]}` |
-| `251` | RPL_LUSERCLIENT     | On connect or LUSERS command | `{"command":"251","to":"alice","body":["There are 5 users and 0 invisible on 1 servers"]}` |
-| `252` | RPL_LUSEROP         | On connect or LUSERS command | `{"command":"252","to":"alice","params":["0"],"body":["operator(s) online"]}` |
-| `254` | RPL_LUSERCHANNELS   | On connect or LUSERS command | `{"command":"254","to":"alice","params":["3"],"body":["channels formed"]}` |
-| `255` | RPL_LUSERME         | On connect or LUSERS command | `{"command":"255","to":"alice","body":["I have 5 clients and 1 servers"]}` |
-| `311` | RPL_WHOISUSER       | In response to WHOIS | `{"command":"311","to":"alice","params":["bob","bob","neoirc","*"],"body":["bob"]}` |
-| `312` | RPL_WHOISSERVER     | In response to WHOIS | `{"command":"312","to":"alice","params":["bob","neoirc"],"body":["neoirc server"]}` |
-| `315` | RPL_ENDOFWHO        | End of WHO response | `{"command":"315","to":"alice","params":["#general"],"body":["End of /WHO list"]}` |
-| `318` | RPL_ENDOFWHOIS      | End of WHOIS response | `{"command":"318","to":"alice","params":["bob"],"body":["End of /WHOIS list"]}` |
-| `319` | RPL_WHOISCHANNELS   | In response to WHOIS | `{"command":"319","to":"alice","params":["bob"],"body":["#general #dev"]}` |
+| `004` | RPL_MYINFO          | After session creation | `{"command":"004","to":"alice","params":["neoirc-server","0.1","","imnst"]}` |
 | `322` | RPL_LIST            | In response to LIST | `{"command":"322","to":"alice","params":["#general","5"],"body":["General discussion"]}` |
 | `323` | RPL_LISTEND         | End of LIST response | `{"command":"323","to":"alice","body":["End of /LIST"]}` |
-| `324` | RPL_CHANNELMODEIS   | In response to channel MODE query | `{"command":"324","to":"alice","params":["#general","+n"]}` |
-| `329` | RPL_CREATIONTIME    | After channel MODE query | `{"command":"329","to":"alice","params":["#general","1709251200"]}` |
-| `331` | RPL_NOTOPIC         | Channel has no topic (on JOIN) | `{"command":"331","to":"alice","params":["#general"],"body":["No topic is set"]}` |
 | `332` | RPL_TOPIC           | On JOIN or TOPIC query | `{"command":"332","to":"alice","params":["#general"],"body":["Welcome!"]}` |
-| `352` | RPL_WHOREPLY        | In response to WHO | `{"command":"352","to":"alice","params":["#general","bob","neoirc","neoirc","bob","H"],"body":["0 bob"]}` |
 | `353` | RPL_NAMREPLY        | On JOIN or NAMES query | `{"command":"353","to":"alice","params":["=","#general"],"body":["@op1 alice bob +voiced1"]}` |
 | `366` | RPL_ENDOFNAMES      | End of NAMES response | `{"command":"366","to":"alice","params":["#general"],"body":["End of /NAMES list"]}` |
 | `372` | RPL_MOTD            | MOTD line | `{"command":"372","to":"alice","body":["Welcome to the server"]}` |
@@ -933,18 +841,14 @@ the server to the client (never C2S) and use 3-digit string codes in the
 | `376` | RPL_ENDOFMOTD       | End of MOTD | `{"command":"376","to":"alice","body":["End of /MOTD command"]}` |
 | `401` | ERR_NOSUCHNICK      | DM to nonexistent nick | `{"command":"401","to":"alice","params":["bob"],"body":["No such nick/channel"]}` |
 | `403` | ERR_NOSUCHCHANNEL   | Action on nonexistent channel | `{"command":"403","to":"alice","params":["#nope"],"body":["No such channel"]}` |
-| `421` | ERR_UNKNOWNCOMMAND  | Unrecognized command | `{"command":"421","to":"alice","params":["FOO"],"body":["Unknown command"]}` |
-| `432` | ERR_ERRONEUSNICKNAME | Invalid nick format | `{"command":"432","to":"alice","params":["bad nick!"],"body":["Erroneous nickname"]}` |
 | `433` | ERR_NICKNAMEINUSE   | NICK to taken nick | `{"command":"433","to":"*","params":["alice"],"body":["Nickname is already in use"]}` |
 | `442` | ERR_NOTONCHANNEL    | Action on unjoined channel | `{"command":"442","to":"alice","params":["#general"],"body":["You're not on that channel"]}` |
-| `461` | ERR_NEEDMOREPARAMS  | Missing required fields | `{"command":"461","to":"alice","params":["JOIN"],"body":["Not enough parameters"]}` |
 | `482` | ERR_CHANOPRIVSNEEDED | Non-op tries op action | `{"command":"482","to":"alice","params":["#general"],"body":["You're not channel operator"]}` |

-**Note:** Numeric replies are now implemented. All IRC command responses
-(success and error) are delivered as numeric replies through the message queue.
-HTTP error codes are reserved for transport-level issues (auth failures,
-malformed requests, server errors). The `params` field in the message envelope
-carries IRC-style parameters (e.g., channel name, target nick).
+**Note:** Numeric replies are planned for full implementation. The current MVP
+returns standard HTTP error responses (4xx/5xx with JSON error bodies) instead
+of numeric replies for error conditions. Numeric replies in the message queue
+will be added post-MVP.

 ### Channel Modes

@@ -1150,78 +1054,27 @@ reference with all required and optional fields.

 | Command   | Required Fields     | Optional      | Response Status |
 |-----------|---------------------|---------------|-----------------|
-| `PRIVMSG` | `to`, `body`        | `meta`        | 200 OK          |
-| `NOTICE`  | `to`, `body`        | `meta`        | 200 OK          |
+| `PRIVMSG` | `to`, `body`        | `meta`        | 201 Created     |
+| `NOTICE`  | `to`, `body`        | `meta`        | 201 Created     |
 | `JOIN`    | `to`                |               | 200 OK          |
 | `PART`    | `to`                | `body`        | 200 OK          |
 | `NICK`    | `body`              |               | 200 OK          |
 | `TOPIC`   | `to`, `body`        |               | 200 OK          |
-| `MODE`    | `to`                |               | 200 OK          |
-| `NAMES`   | `to`                |               | 200 OK          |
-| `LIST`    |                     |               | 200 OK          |
-| `WHOIS`   | `to` or `body`      |               | 200 OK          |
-| `WHO`     | `to`                |               | 200 OK          |
-| `LUSERS`  |                     |               | 200 OK          |
 | `QUIT`    |                     | `body`        | 200 OK          |
 | `PING`    |                     |               | 200 OK          |

-All IRC commands return HTTP 200 OK. IRC-level success and error responses
-are delivered as **numeric replies** through the message queue (see
-[Numeric Replies](#numeric-replies) below). HTTP error codes (4xx/5xx) are
-reserved for transport-level problems: malformed JSON (400), missing/invalid
-auth tokens (401), and server errors (500).
-
-**HTTP errors (transport-level only):**
+**Errors (all commands):**

 | Status | Error | When |
 |--------|-------|------|
-| 400    | `invalid request` | Malformed JSON or empty command |
+| 400    | `invalid request` | Malformed JSON |
+| 400    | `to field required` | Missing `to` for commands that need it |
+| 400    | `body required` | Missing `body` for commands that need it |
+| 400    | `unknown command: X` | Unrecognized command |
 | 401    | `unauthorized` | Missing or invalid auth token |
-| 500    | `internal error` | Server-side failure |
-
-**IRC numeric error replies (delivered via message queue):**
-
-| Numeric | Name | When |
-|---------|------|------|
-| 401     | ERR_NOSUCHNICK | DM target nick doesn't exist |
-| 403     | ERR_NOSUCHCHANNEL | Target channel doesn't exist or invalid name |
-| 421     | ERR_UNKNOWNCOMMAND | Unrecognized command |
-| 432     | ERR_ERRONEUSNICKNAME | Invalid nickname format |
-| 433     | ERR_NICKNAMEINUSE | NICK target is taken |
-| 442     | ERR_NOTONCHANNEL | Not a member of the target channel |
-| 461     | ERR_NEEDMOREPARAMS | Missing required fields (to, body) |
-
-**IRC numeric success replies (delivered via message queue):**
-
-| Numeric | Name | When |
-|---------|------|------|
-| 001     | RPL_WELCOME | Sent on session creation/login |
-| 002     | RPL_YOURHOST | Sent on session creation/login |
-| 003     | RPL_CREATED | Sent on session creation/login |
-| 004     | RPL_MYINFO | Sent on session creation/login |
-| 005     | RPL_ISUPPORT | Sent on session creation/login |
-| 221     | RPL_UMODEIS | In response to user MODE query |
-| 251     | RPL_LUSERCLIENT | On connect or LUSERS command |
-| 252     | RPL_LUSEROP | On connect or LUSERS command |
-| 254     | RPL_LUSERCHANNELS | On connect or LUSERS command |
-| 255     | RPL_LUSERME | On connect or LUSERS command |
-| 311     | RPL_WHOISUSER | WHOIS user info |
-| 312     | RPL_WHOISSERVER | WHOIS server info |
-| 315     | RPL_ENDOFWHO | End of WHO list |
-| 318     | RPL_ENDOFWHOIS | End of WHOIS list |
-| 319     | RPL_WHOISCHANNELS | WHOIS channels list |
-| 322     | RPL_LIST | Channel in LIST response |
-| 323     | RPL_LISTEND | End of LIST |
-| 324     | RPL_CHANNELMODEIS | Channel mode query response |
-| 329     | RPL_CREATIONTIME | Channel creation timestamp |
-| 331     | RPL_NOTOPIC | Channel has no topic (on JOIN) |
-| 332     | RPL_TOPIC | Channel topic (on JOIN, TOPIC set) |
-| 352     | RPL_WHOREPLY | User in WHO response |
-| 353     | RPL_NAMREPLY | Channel member list (on JOIN, NAMES) |
-| 366     | RPL_ENDOFNAMES | End of NAMES list |
-| 375     | RPL_MOTDSTART | Start of MOTD |
-| 372     | RPL_MOTD | MOTD line |
-| 376     | RPL_ENDOFMOTD | End of MOTD |
+| 404    | `channel not found` | Target channel doesn't exist |
+| 404    | `user not found` | DM target nick doesn't exist |
+| 409    | `nick already in use` | NICK target is taken |

 ### GET /api/v1/history — Message History

@@ -2224,18 +2077,10 @@ GET /api/v1/challenge
 - [ ] **Message rotation** — enforce `MAX_HISTORY` per channel
 - [ ] **Channel modes** — enforce `+i`, `+m`, `+s`, `+t`, `+n`
 - [ ] **User channel modes** — `+o` (operator), `+v` (voice)
- [x] **MODE command** — query channel and user modes (set not yet implemented)
- [x] **NAMES command** — query channel member list
- [x] **LIST command** — list all channels with member counts
- [x] **WHOIS command** — query user information and channel membership
- [x] **WHO command** — query channel user list
- [x] **LUSERS command** — query server statistics
- [x] **Connection registration numerics** — 001-005 sent on session creation
- [x] **LUSERS numerics** — 251/252/254/255 sent on connect and via /LUSERS
+- [ ] **MODE command** — set/query channel and user modes
 - [ ] **KICK command** — remove users from channels
- [x] **Numeric replies** — send IRC numeric codes via the message queue
-  (001-005 welcome, 251-255 LUSERS, 311-319 WHOIS, 322-329 LIST/MODE,
-  331-332 TOPIC, 352-353 WHO/NAMES, 366, 372-376 MOTD, 401-461 errors)
+- [ ] **Numeric replies** — send IRC numeric codes via the message queue
+  (001 welcome, 353 NAMES, 332 TOPIC, etc.)
 - [ ] **Max message size enforcement** — reject oversized messages
 - [ ] **NOTICE command** — distinct from PRIVMSG (no auto-reply flag)
 - [ ] **Multi-client sessions** — add client to existing session
@@ -2255,7 +2100,7 @@ GET /api/v1/challenge
 - [ ] **Push notifications** — optional webhook/push for mobile clients
  when messages arrive during disconnect
 - [ ] **Message search** — full-text search over channel history
- [x] **User info command** — WHOIS for querying user info and channels
+- [ ] **User info command** — WHOIS-equivalent for querying user metadata
 - [ ] **Connection flood protection** — per-IP connection limits as a
  complement to hashcash
 - [ ] **Invite system** — `INVITE` command for `+i` channels
--- a/cmd/neoirc-cli/main.go
+++ b/cmd/neoirc-cli/main.go
@@ -138,29 +138,16 @@ func (a *App) dispatchCommand(cmd, args string) {
 		a.cmdQuery(args)
 	case "/topic":
 		a.cmdTopic(args)
+	case "/names":
+		a.cmdNames()
+	case "/list":
+		a.cmdList()
 	case "/window", "/w":
 		a.cmdWindow(args)
 	case "/quit":
 		a.cmdQuit()
 	case "/help":
 		a.cmdHelp()
-	default:
-		a.dispatchInfoCommand(cmd, args)
-	}
-}
-
-func (a *App) dispatchInfoCommand(cmd, args string) {
-	switch cmd {
-	case "/names":
-		a.cmdNames()
-	case "/list":
-		a.cmdList()
-	case "/motd":
-		a.cmdMotd()
-	case "/who":
-		a.cmdWho(args)
-	case "/whois":
-		a.cmdWhois(args)
 	default:
 		a.ui.AddStatus(
 			"[red]Unknown command: " + cmd,
@@ -523,96 +510,6 @@ func (a *App) cmdList() {
 	a.ui.AddStatus("[cyan]*** End of channel list")
 }

-func (a *App) cmdMotd() {
-	a.mu.Lock()
-	connected := a.connected
-	a.mu.Unlock()
-
-	if !connected {
-		a.ui.AddStatus("[red]Not connected")
-
-		return
-	}
-
-	err := a.client.SendMessage(
-		&api.Message{Command: "MOTD"}, //nolint:exhaustruct
-	)
-	if err != nil {
-		a.ui.AddStatus(fmt.Sprintf(
-			"[red]MOTD failed: %v", err,
-		))
-	}
-}
-
-func (a *App) cmdWho(args string) {
-	a.mu.Lock()
-	connected := a.connected
-	target := a.target
-	a.mu.Unlock()
-
-	if !connected {
-		a.ui.AddStatus("[red]Not connected")
-
-		return
-	}
-
-	channel := args
-	if channel == "" {
-		channel = target
-	}
-
-	if channel == "" ||
-		!strings.HasPrefix(channel, "#") {
-		a.ui.AddStatus(
-			"[red]Usage: /who #channel",
-		)
-
-		return
-	}
-
-	err := a.client.SendMessage(
-		&api.Message{ //nolint:exhaustruct
-			Command: "WHO", To: channel,
-		},
-	)
-	if err != nil {
-		a.ui.AddStatus(fmt.Sprintf(
-			"[red]WHO failed: %v", err,
-		))
-	}
-}
-
-func (a *App) cmdWhois(args string) {
-	a.mu.Lock()
-	connected := a.connected
-	a.mu.Unlock()
-
-	if !connected {
-		a.ui.AddStatus("[red]Not connected")
-
-		return
-	}
-
-	if args == "" {
-		a.ui.AddStatus(
-			"[red]Usage: /whois <nick>",
-		)
-
-		return
-	}
-
-	err := a.client.SendMessage(
-		&api.Message{ //nolint:exhaustruct
-			Command: "WHOIS", To: args,
-		},
-	)
-	if err != nil {
-		a.ui.AddStatus(fmt.Sprintf(
-			"[red]WHOIS failed: %v", err,
-		))
-	}
-}
-
 func (a *App) cmdWindow(args string) {
 	if args == "" {
 		a.ui.AddStatus(
@@ -677,9 +574,6 @@ func (a *App) cmdHelp() {
 		"  /topic [text]   — View/set topic",
 		"  /names          — List channel members",
 		"  /list           — List channels",
-		"  /who [#channel] — List users in channel",
-		"  /whois <nick>   — Show user info",
-		"  /motd           — Show message of the day",
 		"  /window <n>     — Switch buffer",
 		"  /quit           — Disconnect and exit",
 		"  /help           — This help",
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -13,14 +13,6 @@ import (
 	_ "github.com/joho/godotenv/autoload" // loads .env file
 )

-const defaultMOTD = ` _ __   ___  ___  (_)_ __ ___
-| '_ \ / _ \/ _ \ | | '__/ __|
-| | | |  __/ (_) || | | | (__
-|_| |_|\___|\___/ |_|_|  \___|
-
-Welcome to NeoIRC — IRC semantics over HTTP.
-Type /help for available commands.`
-
 // Params defines the dependencies for creating a Config.
 type Params struct {
 	fx.In
@@ -70,7 +62,7 @@ func New(
 	viper.SetDefault("METRICS_PASSWORD", "")
 	viper.SetDefault("MAX_HISTORY", "10000")
 	viper.SetDefault("MAX_MESSAGE_SIZE", "4096")
-	viper.SetDefault("MOTD", defaultMOTD)
+	viper.SetDefault("MOTD", "")
 	viper.SetDefault("SERVER_NAME", "")
 	viper.SetDefault("FEDERATION_KEY", "")
 	viper.SetDefault("SESSION_IDLE_TIMEOUT", "24h")
--- a/internal/db/queries.go
+++ b/internal/db/queries.go
@@ -35,7 +35,6 @@ type IRCMessage struct {
 	Command string          `json:"command"`
 	From    string          `json:"from,omitempty"`
 	To      string          `json:"to,omitempty"`
-	Params  json.RawMessage `json:"params,omitempty"`
 	Body    json.RawMessage `json:"body,omitempty"`
 	TS      string          `json:"ts"`
 	Meta    json.RawMessage `json:"meta,omitempty"`
@@ -492,17 +491,12 @@ func (database *Database) GetSessionChannelIDs(
 func (database *Database) InsertMessage(
 	ctx context.Context,
 	command, from, target string,
-	params json.RawMessage,
 	body json.RawMessage,
 	meta json.RawMessage,
 ) (int64, string, error) {
 	msgUUID := uuid.New().String()
 	now := time.Now().UTC()

-	if params == nil {
-		params = json.RawMessage("[]")
-	}
-
 	if body == nil {
 		body = json.RawMessage("[]")
 	}
@@ -514,10 +508,10 @@ func (database *Database) InsertMessage(
 	res, err := database.conn.ExecContext(ctx,
 		`INSERT INTO messages
 		 (uuid, command, msg_from, msg_to,
-		  params, body, meta, created_at)
-		 VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+		  body, meta, created_at)
+		 VALUES (?, ?, ?, ?, ?, ?, ?)`,
 		msgUUID, command, from, target,
-		string(params), string(body), string(meta), now)
+		string(body), string(meta), now)
 	if err != nil {
 		return 0, "", fmt.Errorf(
 			"insert message: %w", err,
@@ -584,7 +578,7 @@ func (database *Database) PollMessages(
 	rows, err := database.conn.QueryContext(ctx,
 		`SELECT cq.id, m.uuid, m.command,
 		   m.msg_from, m.msg_to,
-		   m.params, m.body, m.meta, m.created_at
+		   m.body, m.meta, m.created_at
 		 FROM client_queues cq
 		 INNER JOIN messages m
 		   ON m.id = cq.message_id
@@ -648,7 +642,7 @@ func (database *Database) queryHistory(
 	if beforeID > 0 {
 		rows, err := database.conn.QueryContext(ctx,
 			`SELECT id, uuid, command, msg_from,
-			   msg_to, params, body, meta, created_at
+			   msg_to, body, meta, created_at
 			 FROM messages
 			 WHERE msg_to = ? AND id < ?
 			   AND command = 'PRIVMSG'
@@ -665,7 +659,7 @@ func (database *Database) queryHistory(

 	rows, err := database.conn.QueryContext(ctx,
 		`SELECT id, uuid, command, msg_from,
-		   msg_to, params, body, meta, created_at
+		   msg_to, body, meta, created_at
 		 FROM messages
 		 WHERE msg_to = ?
 		   AND command = 'PRIVMSG'
@@ -690,16 +684,16 @@ func scanMessages(

 	for rows.Next() {
 		var (
-			msg                IRCMessage
-			qID                int64
-			params, body, meta string
-			createdAt          time.Time
+			msg        IRCMessage
+			qID        int64
+			body, meta string
+			createdAt  time.Time
 		)

 		err := rows.Scan(
 			&qID, &msg.ID, &msg.Command,
 			&msg.From, &msg.To,
-			&params, &body, &meta, &createdAt,
+			&body, &meta, &createdAt,
 		)
 		if err != nil {
 			return nil, fallbackQID, fmt.Errorf(
@@ -707,10 +701,6 @@ func scanMessages(
 			)
 		}

-		if params != "" && params != "[]" {
-			msg.Params = json.RawMessage(params)
-		}
-
 		msg.Body = json.RawMessage(body)
 		msg.Meta = json.RawMessage(meta)
 		msg.TS = createdAt.Format(time.RFC3339Nano)
@@ -953,125 +943,3 @@ func (database *Database) GetSessionChannels(

 	return scanChannels(rows)
 }
-
-// GetChannelCount returns the total number of channels.
-func (database *Database) GetChannelCount(
-	ctx context.Context,
-) (int64, error) {
-	var count int64
-
-	err := database.conn.QueryRowContext(
-		ctx,
-		"SELECT COUNT(*) FROM channels",
-	).Scan(&count)
-	if err != nil {
-		return 0, fmt.Errorf(
-			"get channel count: %w", err,
-		)
-	}
-
-	return count, nil
-}
-
-// ChannelInfoFull contains extended channel information.
-type ChannelInfoFull struct {
-	ID          int64  `json:"id"`
-	Name        string `json:"name"`
-	Topic       string `json:"topic"`
-	MemberCount int64  `json:"memberCount"`
-}
-
-// ListAllChannelsWithCounts returns every channel
-// with its member count.
-func (database *Database) ListAllChannelsWithCounts(
-	ctx context.Context,
-) ([]ChannelInfoFull, error) {
-	rows, err := database.conn.QueryContext(ctx,
-		`SELECT c.id, c.name, c.topic,
-		   COUNT(cm.session_id) AS member_count
-		 FROM channels c
-		 LEFT JOIN channel_members cm
-		   ON cm.channel_id = c.id
-		 GROUP BY c.id
-		 ORDER BY c.name`)
-	if err != nil {
-		return nil, fmt.Errorf(
-			"list channels with counts: %w", err,
-		)
-	}
-
-	defer func() { _ = rows.Close() }()
-
-	var out []ChannelInfoFull
-
-	for rows.Next() {
-		var chanInfo ChannelInfoFull
-
-		err = rows.Scan(
-			&chanInfo.ID, &chanInfo.Name,
-			&chanInfo.Topic, &chanInfo.MemberCount,
-		)
-		if err != nil {
-			return nil, fmt.Errorf(
-				"scan channel full: %w", err,
-			)
-		}
-
-		out = append(out, chanInfo)
-	}
-
-	err = rows.Err()
-	if err != nil {
-		return nil, fmt.Errorf("rows error: %w", err)
-	}
-
-	if out == nil {
-		out = []ChannelInfoFull{}
-	}
-
-	return out, nil
-}
-
-// GetChannelCreatedAt returns the creation time of a
-// channel.
-func (database *Database) GetChannelCreatedAt(
-	ctx context.Context,
-	channelID int64,
-) (time.Time, error) {
-	var createdAt time.Time
-
-	err := database.conn.QueryRowContext(
-		ctx,
-		"SELECT created_at FROM channels WHERE id = ?",
-		channelID,
-	).Scan(&createdAt)
-	if err != nil {
-		return time.Time{}, fmt.Errorf(
-			"get channel created_at: %w", err,
-		)
-	}
-
-	return createdAt, nil
-}
-
-// GetSessionCreatedAt returns the creation time of a
-// session.
-func (database *Database) GetSessionCreatedAt(
-	ctx context.Context,
-	sessionID int64,
-) (time.Time, error) {
-	var createdAt time.Time
-
-	err := database.conn.QueryRowContext(
-		ctx,
-		"SELECT created_at FROM sessions WHERE id = ?",
-		sessionID,
-	).Scan(&createdAt)
-	if err != nil {
-		return time.Time{}, fmt.Errorf(
-			"get session created_at: %w", err,
-		)
-	}
-
-	return createdAt, nil
-}
--- a/internal/db/queries_test.go
+++ b/internal/db/queries_test.go
@@ -383,7 +383,7 @@ func TestInsertMessage(t *testing.T) {
 	body := json.RawMessage(`["hello"]`)

 	dbID, msgUUID, err := database.InsertMessage(
-		ctx, "PRIVMSG", "poller", "#test", nil, body, nil,
+		ctx, "PRIVMSG", "poller", "#test", body, nil,
 	)
 	if err != nil {
 		t.Fatal(err)
@@ -417,7 +417,7 @@ func TestPollMessages(t *testing.T) {
 	body := json.RawMessage(`["hello"]`)

 	dbID, _, err := database.InsertMessage(
-		ctx, "PRIVMSG", "poller", "#test", nil, body, nil,
+		ctx, "PRIVMSG", "poller", "#test", body, nil,
 	)
 	if err != nil {
 		t.Fatal(err)
@@ -475,7 +475,7 @@ func TestGetHistory(t *testing.T) {
 	for range msgCount {
 		_, _, err := database.InsertMessage(
 			ctx, "PRIVMSG", "user", "#hist",
-			nil, json.RawMessage(`["msg"]`), nil,
+			json.RawMessage(`["msg"]`), nil,
 		)
 		if err != nil {
 			t.Fatal(err)
@@ -627,7 +627,7 @@ func TestEnqueueToClient(t *testing.T) {
 	body := json.RawMessage(`["test"]`)

 	dbID, _, err := database.InsertMessage(
-		ctx, "PRIVMSG", "sender", "#ch", nil, body, nil,
+		ctx, "PRIVMSG", "sender", "#ch", body, nil,
 	)
 	if err != nil {
 		t.Fatal(err)
--- a/internal/db/schema/001_initial.sql
+++ b/internal/db/schema/001_initial.sql
@@ -50,7 +50,6 @@ CREATE TABLE IF NOT EXISTS messages (
    command TEXT NOT NULL DEFAULT 'PRIVMSG',
    msg_from TEXT NOT NULL DEFAULT '',
    msg_to TEXT NOT NULL DEFAULT '',
-    params TEXT NOT NULL DEFAULT '[]',
    body TEXT NOT NULL DEFAULT '[]',
    meta TEXT NOT NULL DEFAULT '{}',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
--- a/internal/globals/globals.go
+++ b/internal/globals/globals.go
@@ -2,8 +2,6 @@
 package globals

 import (
-	"time"
-
 	"go.uber.org/fx"
 )

@@ -17,18 +15,16 @@ var (

 // Globals holds application-wide metadata.
 type Globals struct {
-	Appname   string
-	Version   string
-	StartTime time.Time
+	Appname string
+	Version string
 }

 // New creates a new Globals instance from the global state.
 func New(_ fx.Lifecycle) (*Globals, error) {
-	result := &Globals{
-		Appname:   Appname,
-		Version:   Version,
-		StartTime: time.Now(),
+	n := &Globals{
+		Appname: Appname,
+		Version: Version,
 	}

-	return result, nil
+	return n, nil
 }
--- a/internal/handlers/api.go
+++ b/internal/handlers/api.go
--- a/internal/handlers/api_test.go
+++ b/internal/handlers/api_test.go
@@ -115,9 +115,8 @@ func newTestServer(

 func newTestGlobals() *globals.Globals {
 	return &globals.Globals{
-		Appname:   "neoirc-test",
-		Version:   "test",
-		StartTime: time.Now(),
+		Appname: "neoirc-test",
+		Version: "test",
 	}
 }

@@ -463,19 +462,6 @@ func findMessage(
 	return false
 }

-func findNumeric(
-	msgs []map[string]any,
-	numeric string,
-) bool {
-	for _, msg := range msgs {
-		if msg[commandKey] == numeric {
-			return true
-		}
-	}
-
-	return false
-}
-
 // --- Tests ---

 func TestCreateSessionValid(t *testing.T) {
@@ -487,47 +473,6 @@ func TestCreateSessionValid(t *testing.T) {
 	}
 }

-func TestWelcomeNumeric(t *testing.T) {
-	tserver := newTestServer(t)
-	token := tserver.createSession("welcomer")
-
-	msgs, _ := tserver.pollMessages(token, 0)
-
-	if !findNumeric(msgs, "001") {
-		t.Fatalf(
-			"expected RPL_WELCOME (001), got %v",
-			msgs,
-		)
-	}
-}
-
-func TestJoinNumerics(t *testing.T) {
-	tserver := newTestServer(t)
-	token := tserver.createSession("jnumtest")
-
-	_, lastID := tserver.pollMessages(token, 0)
-
-	tserver.sendCommand(token, map[string]any{
-		commandKey: joinCmd, toKey: "#numtest",
-	})
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "353") {
-		t.Fatalf(
-			"expected RPL_NAMREPLY (353), got %v",
-			msgs,
-		)
-	}
-
-	if !findNumeric(msgs, "366") {
-		t.Fatalf(
-			"expected RPL_ENDOFNAMES (366), got %v",
-			msgs,
-		)
-	}
-}
-
 func TestCreateSessionDuplicate(t *testing.T) {
 	tserver := newTestServer(t)
 	tserver.createSession("alice")
@@ -723,23 +668,11 @@ func TestJoinMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("joiner3")

-	// Drain initial MOTD/welcome numerics.
-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: joinCmd},
 	)
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -766,9 +699,9 @@ func TestChannelMessage(t *testing.T) {
 			bodyKey:    []string{"hello world"},
 		},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusCreated {
 		t.Fatalf(
-			"expected 200, got %d: %v", status, result,
+			"expected 201, got %d: %v", status, result,
 		)
 	}

@@ -795,22 +728,11 @@ func TestMessageMissingBody(t *testing.T) {
 		commandKey: joinCmd, toKey: "#test",
 	})

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd, toKey: "#test",
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -818,23 +740,12 @@ func TestMessageMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("noto")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd,
 		bodyKey:    []string{"hello"},
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -848,8 +759,6 @@ func TestNonMemberCannotSend(t *testing.T) {
 		commandKey: joinCmd, toKey: "#private",
 	})

-	_, lastID := tserver.pollMessages(aliceToken, 0)
-
 	// Alice tries to send without joining.
 	status, _ := tserver.sendCommand(
 		aliceToken,
@@ -859,17 +768,8 @@ func TestNonMemberCannotSend(t *testing.T) {
 			bodyKey:    []string{"sneaky"},
 		},
 	)
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(aliceToken, lastID)
-
-	if !findNumeric(msgs, "442") {
-		t.Fatalf(
-			"expected ERR_NOTONCHANNEL (442), got %v",
-			msgs,
-		)
+	if status != http.StatusForbidden {
+		t.Fatalf("expected 403, got %d", status)
 	}
 }

@@ -886,9 +786,9 @@ func TestDirectMessage(t *testing.T) {
 			bodyKey:    []string{"hey bob"},
 		},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusCreated {
 		t.Fatalf(
-			"expected 200, got %d: %v", status, result,
+			"expected 201, got %d: %v", status, result,
 		)
 	}

@@ -918,24 +818,13 @@ func TestDMToNonexistentUser(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("dmsender")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd,
 		toKey:      "nobody",
 		bodyKey:    []string{"hello?"},
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "401") {
-		t.Fatalf(
-			"expected ERR_NOSUCHNICK (401), got %v",
-			msgs,
-		)
+	if status != http.StatusNotFound {
+		t.Fatalf("expected 404, got %d", status)
 	}
 }

@@ -982,23 +871,12 @@ func TestNickCollision(t *testing.T) {

 	tserver.createSession("taken_nick")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "NICK",
 		bodyKey:    []string{"taken_nick"},
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "433") {
-		t.Fatalf(
-			"expected ERR_NICKNAMEINUSE (433), got %v",
-			msgs,
-		)
+	if status != http.StatusConflict {
+		t.Fatalf("expected 409, got %d", status)
 	}
 }

@@ -1006,23 +884,12 @@ func TestNickInvalid(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("nickval")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "NICK",
 		bodyKey:    []string{"bad nick!"},
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "432") {
-		t.Fatalf(
-			"expected ERR_ERRONEUSNICKNAME (432), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -1030,22 +897,11 @@ func TestNickEmptyBody(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("nicknobody")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: "NICK"},
 	)
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -1082,23 +938,12 @@ func TestTopicMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("topicnoto")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "TOPIC",
 		bodyKey:    []string{"topic"},
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -1110,22 +955,11 @@ func TestTopicMissingBody(t *testing.T) {
 		commandKey: joinCmd, toKey: "#topictest",
 	})

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "TOPIC", toKey: "#topictest",
 	})
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -1193,22 +1027,11 @@ func TestUnknownCommand(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("cmdtest")

-	_, lastID := tserver.pollMessages(token, 0)
-
 	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: "BOGUS"},
 	)
-	if status != http.StatusOK {
-		t.Fatalf("expected 200, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "421") {
-		t.Fatalf(
-			"expected ERR_UNKNOWNCOMMAND (421), got %v",
-			msgs,
-		)
+	if status != http.StatusBadRequest {
+		t.Fatalf("expected 400, got %d", status)
 	}
 }

@@ -1455,18 +1278,12 @@ func TestLongPollTimeout(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("lp_timeout")

-	// Drain initial welcome/MOTD numerics.
-	_, lastID := tserver.pollMessages(token, 0)
-
 	start := time.Now()

 	resp, err := doRequestAuth(
 		t,
 		http.MethodGet,
-		tserver.url(fmt.Sprintf(
-			"%s?timeout=1&after=%d",
-			apiMessages, lastID,
-		)),
+		tserver.url(apiMessages+"?timeout=1"),
 		token,
 		nil,
 	)
--- a/internal/handlers/auth.go
+++ b/internal/handlers/auth.go
@@ -80,7 +80,7 @@ func (hdlr *Handlers) handleRegister(
 		return
 	}

-	hdlr.deliverMOTD(request, clientID, sessionID, payload.Nick)
+	hdlr.deliverMOTD(request, clientID, sessionID)

 	hdlr.respondJSON(writer, request, map[string]any{
 		"id":    sessionID,
@@ -162,7 +162,7 @@ func (hdlr *Handlers) handleLogin(
 		return
 	}

-	sessionID, clientID, token, err :=
+	sessionID, _, token, err :=
 		hdlr.params.Database.LoginUser(
 			request.Context(),
 			payload.Nick,
@@ -178,10 +178,6 @@ func (hdlr *Handlers) handleLogin(
 		return
 	}

-	hdlr.deliverMOTD(
-		request, clientID, sessionID, payload.Nick,
-	)
-
 	hdlr.respondJSON(writer, request, map[string]any{
 		"id":    sessionID,
 		"nick":  payload.Nick,
--- a/web/dist/app.js
+++ b/web/dist/app.js
--- a/web/dist/style.css
+++ b/web/dist/style.css
@@ -6,282 +6,218 @@

 :root {
  --bg: #0a0e14;
-  --bg-panel: #0d1117;
-  --bg-input: #0d1117;
-  --bg-tab: #161b22;
-  --bg-tab-active: #0d1117;
-  --bg-topic: #0d1117;
+  --bg-secondary: #0d1117;
+  --bg-input: #161b22;
+  --bg-highlight: #1a2030;
  --text: #c9d1d9;
-  --text-dim: #6e7681;
-  --text-bright: #e6edf3;
+  --text-muted: #6e7681;
  --accent: #58a6ff;
  --accent-dim: #1f6feb;
  --border: #21262d;
-  --system: #7d8590;
-  --action: #d2a8ff;
-  --warn: #d29922;
-  --error: #f85149;
-  --unread: #f0883e;
-  --nick-brackets: #6e7681;
+  --nick: #79c0ff;
  --timestamp: #484f58;
-  --input-bg: #161b22;
-  --prompt: #3fb950;
-  --tab-indicator: #58a6ff;
-  --user-list-bg: #0d1117;
-  --user-list-header: #484f58;
+  --tab-active: #58a6ff;
+  --tab-bg: #0d1117;
+  --tab-hover: #161b22;
+  --topic-bg: #0d1117;
+  --unread-bg: #da3633;
+  --warn: #d29922;
+  --op-color: #f0883e;
+  --voice-color: #3fb950;
+  --action-color: #bc8cff;
+  --system-color: #484f58;
 }

 html,
 body,
 #root {
  height: 100%;
-  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono",
-    "Consolas", "Liberation Mono", "Courier New", monospace;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
+    Courier, monospace;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
-  overflow: hidden;
 }

-/* ============================================
-   Login Screen
-   ============================================ */
-
+/* Login screen */
 .login-screen {
  display: flex;
+  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
-  background: var(--bg);
+  gap: 16px;
 }

-.login-box {
-  text-align: center;
-  max-width: 360px;
-  width: 100%;
-  padding: 32px;
-}
-
-.login-box h1 {
+.login-screen h1 {
  color: var(--accent);
-  font-size: 1.8em;
-  margin-bottom: 16px;
-  font-weight: 400;
+  font-size: 2em;
 }

-.login-box .motd {
-  color: var(--accent);
-  font-size: 11px;
-  margin-bottom: 20px;
-  text-align: left;
-  white-space: pre;
+.login-screen input {
+  padding: 10px 16px;
+  font-size: 16px;
  font-family: inherit;
-  line-height: 1.2;
-  overflow-x: auto;
-}
-
-.login-box form {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: stretch;
-}
-
-.login-box label {
-  color: var(--text-dim);
-  text-align: left;
-  font-size: 12px;
-}
-
-.login-box input {
-  padding: 8px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--input-bg);
+  background: var(--bg-input);
  border: 1px solid var(--border);
-  color: var(--text-bright);
-  border-radius: 3px;
-  outline: none;
+  color: var(--text);
+  border-radius: 4px;
+  width: 280px;
 }

-.login-box input:focus {
-  border-color: var(--accent-dim);
-}
-
-.login-box button {
-  padding: 8px 16px;
+.login-screen button {
+  padding: 10px 24px;
+  font-size: 16px;
  font-family: inherit;
-  font-size: 14px;
  background: var(--accent-dim);
  border: none;
-  color: var(--text-bright);
-  border-radius: 3px;
+  color: white;
+  border-radius: 4px;
  cursor: pointer;
-  margin-top: 4px;
 }

-.login-box button:hover {
+.login-screen button:hover {
  background: var(--accent);
 }

-.login-box .error {
-  color: var(--error);
-  font-size: 12px;
-  margin-top: 8px;
+.login-screen .error {
+  color: var(--unread-bg);
 }

-/* ============================================
-   IRC App Layout
-   ============================================ */
+.login-screen .motd {
+  color: var(--text-muted);
+  max-width: 400px;
+  text-align: center;
+  white-space: pre-wrap;
+}

-.irc-app {
+/* Main layout */
+.app {
  display: flex;
  flex-direction: column;
  height: 100%;
-  overflow: hidden;
 }

-/* ============================================
-   Tab Bar
-   ============================================ */
-
+/* Tab bar */
 .tab-bar {
  display: flex;
-  background: var(--bg-tab);
+  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 32px;
-  align-items: stretch;
-}
-
-.tabs {
-  display: flex;
  overflow-x: auto;
-  flex: 1;
-  scrollbar-width: none;
+  flex-shrink: 0;
+  align-items: stretch;
+  min-height: 32px;
 }

-.tabs::-webkit-scrollbar {
-  display: none;
+.tab-bar::-webkit-scrollbar {
+  height: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--border);
 }

 .tab {
  display: flex;
  align-items: center;
-  padding: 0 12px;
+  padding: 6px 12px;
  cursor: pointer;
-  color: var(--text-dim);
+  border-bottom: 2px solid transparent;
  white-space: nowrap;
+  color: var(--text-muted);
  user-select: none;
-  border-right: 1px solid var(--border);
  font-size: 12px;
-  gap: 4px;
-  position: relative;
+  gap: 6px;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }

 .tab:hover {
+  background: var(--tab-hover);
  color: var(--text);
-  background: rgba(255, 255, 255, 0.03);
 }

 .tab.active {
-  color: var(--text-bright);
-  background: var(--bg-tab-active);
-  border-bottom: 2px solid var(--tab-indicator);
-  margin-bottom: -1px;
+  color: var(--text);
+  border-bottom-color: var(--tab-active);
+  background: var(--bg-highlight);
 }

-.tab.has-unread .tab-label {
-  color: var(--unread);
+.tab.server {
  font-weight: bold;
 }

-.tab .unread-count {
-  color: var(--unread);
-  font-size: 11px;
-  font-weight: bold;
+.tab .tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

-.tab-close {
-  color: var(--text-dim);
+.tab .close-btn {
+  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
-  margin-left: 2px;
+  flex-shrink: 0;
 }

-.tab-close:hover {
-  color: var(--error);
+.tab .close-btn:hover {
+  color: var(--unread-bg);
 }

-.status-area {
+.tab .unread-badge {
+  display: inline-block;
+  background: var(--unread-bg);
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 0 5px;
+  border-radius: 8px;
+  min-width: 16px;
+  text-align: center;
+  line-height: 16px;
+  flex-shrink: 0;
+}
+
+/* Connection status */
+.connection-status {
  display: flex;
  align-items: center;
-  gap: 10px;
  padding: 0 12px;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
-.status-nick {
-  color: var(--accent);
+  background: var(--warn);
+  color: var(--bg);
+  font-size: 11px;
  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
 }

-.status-warn {
-  color: var(--warn);
-  animation: blink 1.5s ease-in-out infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* ============================================
-   Topic Bar
-   ============================================ */
-
+/* Topic bar */
 .topic-bar {
  padding: 4px 12px;
-  background: var(--bg-topic);
+  background: var(--topic-bg);
  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
-  line-height: 1.5;
 }

-.topic-label {
-  color: var(--text-dim);
+.topic-bar .topic-label {
+  color: var(--accent);
+  font-weight: bold;
 }

-.topic-text {
-  color: var(--text);
-}
-
-/* ============================================
-   Main Content Area
-   ============================================ */
-
-.main-area {
+/* Content area */
+.content {
  display: flex;
  flex: 1;
  overflow: hidden;
-  min-height: 0;
 }

-/* ============================================
-   Messages Panel
-   ============================================ */
-
-.messages-panel {
+/* Messages */
+.messages-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
@@ -289,178 +225,207 @@ body,
  min-width: 0;
 }

-.messages-scroll {
+.messages {
  flex: 1;
  overflow-y: auto;
-  padding: 4px 8px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  padding: 4px 0;
 }

-.messages-scroll::-webkit-scrollbar {
-  width: 8px;
+.messages::-webkit-scrollbar {
+  width: 6px;
 }

-.messages-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.messages-scroll::-webkit-scrollbar-thumb {
+.messages::-webkit-scrollbar-thumb {
  background: var(--border);
-  border-radius: 4px;
+  border-radius: 3px;
 }

-/* ============================================
-   Message Lines
-   ============================================ */
-
 .message {
-  padding: 1px 0;
-  line-height: 1.4;
-  white-space: pre-wrap;
+  padding: 1px 12px;
+  line-height: 1.5;
  word-wrap: break-word;
-  font-size: 13px;
+}
+
+.message:hover {
+  background: var(--bg-highlight);
 }

 .message .timestamp {
  color: var(--timestamp);
-  font-size: 12px;
+  font-size: 11px;
+  margin-right: 6px;
 }

 .message .nick {
  font-weight: bold;
+  margin-right: 6px;
 }

-.message .content {
+.message .nick::before {
+  content: '<';
+  color: var(--text-muted);
+}
+
+.message .nick::after {
+  content: '>';
+  color: var(--text-muted);
+}
+
+.message.system {
+  color: var(--system-color);
+  font-style: italic;
+}
+
+.message.system .timestamp {
+  color: var(--timestamp);
+}
+
+.message.system .content::before {
+  content: '*** ';
+}
+
+.message.action {
+  color: var(--action-color);
+}
+
+.message.action .timestamp {
+  color: var(--timestamp);
+}
+
+.message.action .action-nick {
+  font-weight: bold;
+}
+
+/* Input bar — full width at bottom */
+.input-bar {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.input-bar .input-nick {
+  padding: 0 8px 0 12px;
+  color: var(--accent);
+  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-size: 13px;
+}
+
+.input-bar .input-nick::after {
+  content: '>';
+  color: var(--text-muted);
+  margin-left: 1px;
+}
+
+.input-bar input {
+  flex: 1;
+  padding: 8px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  background: transparent;
+  border: none;
  color: var(--text);
+  outline: none;
 }

-/* System messages (joins, parts, quits, etc.) */
-.system-message {
-  color: var(--system);
+.input-bar input::placeholder {
+  color: var(--text-muted);
 }

-.system-message .system-text {
-  color: var(--system);
-}
-
-/* /me action messages */
-.action-message .action-text {
-  color: var(--action);
-}
-
-/* ============================================
-   User List (Right Panel)
-   ============================================ */
-
+/* User list */
 .user-list {
-  width: 160px;
-  background: var(--user-list-bg);
+  width: 170px;
+  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
-  overflow: hidden;
 }

 .user-list-header {
  padding: 6px 10px;
-  color: var(--user-list-header);
+  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
+  font-weight: bold;
  flex-shrink: 0;
 }

 .user-list-entries {
  overflow-y: auto;
-  padding: 4px 0;
  flex: 1;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  padding: 4px 0;
 }

-.nick-entry {
+.user-list-entries::-webkit-scrollbar {
+  width: 4px;
+}
+
+.user-list-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
+}
+
+.user-list .user {
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  line-height: 1.5;
+  color: var(--text);
 }

-.nick-entry:hover {
-  background: rgba(255, 255, 255, 0.04);
+.user-list .user:hover {
+  background: var(--tab-hover);
 }

-.nick-prefix {
-  color: var(--text-dim);
-  display: inline-block;
-  width: 1ch;
-  text-align: right;
-  margin-right: 1px;
+.user-list .user.op {
+  color: var(--op-color);
 }

-.nick-name {
-  font-weight: normal;
+.user-list .user.voice {
+  color: var(--voice-color);
 }

-/* ============================================
-   Input Line (Bottom)
-   ============================================ */
-
-.input-line {
-  display: flex;
-  align-items: center;
-  background: var(--input-bg);
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 36px;
-  padding: 0 8px;
-  gap: 6px;
-}
-
-.input-prompt {
-  color: var(--prompt);
-  font-size: 13px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.input-line input {
+/* Server tab messages */
+.server-messages {
+  color: var(--text-muted);
+  padding: 8px 12px;
+  white-space: pre-wrap;
+  overflow-y: auto;
  flex: 1;
-  padding: 4px 0;
-  font-family: inherit;
-  font-size: 13px;
-  background: transparent;
-  border: none;
-  color: var(--text-bright);
-  outline: none;
-  caret-color: var(--accent);
 }

-.input-line input::placeholder {
-  color: var(--text-dim);
-  font-style: italic;
+.server-messages .message {
+  padding: 1px 0;
 }

-/* ============================================
-   Responsive
-   ============================================ */
+.server-messages .message:hover {
+  background: var(--bg-highlight);
+}

+/* Responsive */
@media (max-width: 600px) {
  .user-list {
    display: none;
  }

  .tab {
-    padding: 0 8px;
+    padding: 5px 8px;
    font-size: 11px;
  }

-  .input-prompt {
+  .input-bar .input-nick {
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .input-bar input {
    font-size: 12px;
  }
 }
--- a/web/src/app.jsx
+++ b/web/src/app.jsx
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -6,282 +6,218 @@

 :root {
  --bg: #0a0e14;
-  --bg-panel: #0d1117;
-  --bg-input: #0d1117;
-  --bg-tab: #161b22;
-  --bg-tab-active: #0d1117;
-  --bg-topic: #0d1117;
+  --bg-secondary: #0d1117;
+  --bg-input: #161b22;
+  --bg-highlight: #1a2030;
  --text: #c9d1d9;
-  --text-dim: #6e7681;
-  --text-bright: #e6edf3;
+  --text-muted: #6e7681;
  --accent: #58a6ff;
  --accent-dim: #1f6feb;
  --border: #21262d;
-  --system: #7d8590;
-  --action: #d2a8ff;
-  --warn: #d29922;
-  --error: #f85149;
-  --unread: #f0883e;
-  --nick-brackets: #6e7681;
+  --nick: #79c0ff;
  --timestamp: #484f58;
-  --input-bg: #161b22;
-  --prompt: #3fb950;
-  --tab-indicator: #58a6ff;
-  --user-list-bg: #0d1117;
-  --user-list-header: #484f58;
+  --tab-active: #58a6ff;
+  --tab-bg: #0d1117;
+  --tab-hover: #161b22;
+  --topic-bg: #0d1117;
+  --unread-bg: #da3633;
+  --warn: #d29922;
+  --op-color: #f0883e;
+  --voice-color: #3fb950;
+  --action-color: #bc8cff;
+  --system-color: #484f58;
 }

 html,
 body,
 #root {
  height: 100%;
-  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono",
-    "Consolas", "Liberation Mono", "Courier New", monospace;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
+    Courier, monospace;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
-  overflow: hidden;
 }

-/* ============================================
-   Login Screen
-   ============================================ */
-
+/* Login screen */
 .login-screen {
  display: flex;
+  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
-  background: var(--bg);
+  gap: 16px;
 }

-.login-box {
-  text-align: center;
-  max-width: 360px;
-  width: 100%;
-  padding: 32px;
-}
-
-.login-box h1 {
+.login-screen h1 {
  color: var(--accent);
-  font-size: 1.8em;
-  margin-bottom: 16px;
-  font-weight: 400;
+  font-size: 2em;
 }

-.login-box .motd {
-  color: var(--accent);
-  font-size: 11px;
-  margin-bottom: 20px;
-  text-align: left;
-  white-space: pre;
+.login-screen input {
+  padding: 10px 16px;
+  font-size: 16px;
  font-family: inherit;
-  line-height: 1.2;
-  overflow-x: auto;
-}
-
-.login-box form {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: stretch;
-}
-
-.login-box label {
-  color: var(--text-dim);
-  text-align: left;
-  font-size: 12px;
-}
-
-.login-box input {
-  padding: 8px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--input-bg);
+  background: var(--bg-input);
  border: 1px solid var(--border);
-  color: var(--text-bright);
-  border-radius: 3px;
-  outline: none;
+  color: var(--text);
+  border-radius: 4px;
+  width: 280px;
 }

-.login-box input:focus {
-  border-color: var(--accent-dim);
-}
-
-.login-box button {
-  padding: 8px 16px;
+.login-screen button {
+  padding: 10px 24px;
+  font-size: 16px;
  font-family: inherit;
-  font-size: 14px;
  background: var(--accent-dim);
  border: none;
-  color: var(--text-bright);
-  border-radius: 3px;
+  color: white;
+  border-radius: 4px;
  cursor: pointer;
-  margin-top: 4px;
 }

-.login-box button:hover {
+.login-screen button:hover {
  background: var(--accent);
 }

-.login-box .error {
-  color: var(--error);
-  font-size: 12px;
-  margin-top: 8px;
+.login-screen .error {
+  color: var(--unread-bg);
 }

-/* ============================================
-   IRC App Layout
-   ============================================ */
+.login-screen .motd {
+  color: var(--text-muted);
+  max-width: 400px;
+  text-align: center;
+  white-space: pre-wrap;
+}

-.irc-app {
+/* Main layout */
+.app {
  display: flex;
  flex-direction: column;
  height: 100%;
-  overflow: hidden;
 }

-/* ============================================
-   Tab Bar
-   ============================================ */
-
+/* Tab bar */
 .tab-bar {
  display: flex;
-  background: var(--bg-tab);
+  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 32px;
-  align-items: stretch;
-}
-
-.tabs {
-  display: flex;
  overflow-x: auto;
-  flex: 1;
-  scrollbar-width: none;
+  flex-shrink: 0;
+  align-items: stretch;
+  min-height: 32px;
 }

-.tabs::-webkit-scrollbar {
-  display: none;
+.tab-bar::-webkit-scrollbar {
+  height: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--border);
 }

 .tab {
  display: flex;
  align-items: center;
-  padding: 0 12px;
+  padding: 6px 12px;
  cursor: pointer;
-  color: var(--text-dim);
+  border-bottom: 2px solid transparent;
  white-space: nowrap;
+  color: var(--text-muted);
  user-select: none;
-  border-right: 1px solid var(--border);
  font-size: 12px;
-  gap: 4px;
-  position: relative;
+  gap: 6px;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }

 .tab:hover {
+  background: var(--tab-hover);
  color: var(--text);
-  background: rgba(255, 255, 255, 0.03);
 }

 .tab.active {
-  color: var(--text-bright);
-  background: var(--bg-tab-active);
-  border-bottom: 2px solid var(--tab-indicator);
-  margin-bottom: -1px;
+  color: var(--text);
+  border-bottom-color: var(--tab-active);
+  background: var(--bg-highlight);
 }

-.tab.has-unread .tab-label {
-  color: var(--unread);
+.tab.server {
  font-weight: bold;
 }

-.tab .unread-count {
-  color: var(--unread);
-  font-size: 11px;
-  font-weight: bold;
+.tab .tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

-.tab-close {
-  color: var(--text-dim);
+.tab .close-btn {
+  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
-  margin-left: 2px;
+  flex-shrink: 0;
 }

-.tab-close:hover {
-  color: var(--error);
+.tab .close-btn:hover {
+  color: var(--unread-bg);
 }

-.status-area {
+.tab .unread-badge {
+  display: inline-block;
+  background: var(--unread-bg);
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 0 5px;
+  border-radius: 8px;
+  min-width: 16px;
+  text-align: center;
+  line-height: 16px;
+  flex-shrink: 0;
+}
+
+/* Connection status */
+.connection-status {
  display: flex;
  align-items: center;
-  gap: 10px;
  padding: 0 12px;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
-.status-nick {
-  color: var(--accent);
+  background: var(--warn);
+  color: var(--bg);
+  font-size: 11px;
  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
 }

-.status-warn {
-  color: var(--warn);
-  animation: blink 1.5s ease-in-out infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* ============================================
-   Topic Bar
-   ============================================ */
-
+/* Topic bar */
 .topic-bar {
  padding: 4px 12px;
-  background: var(--bg-topic);
+  background: var(--topic-bg);
  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
-  line-height: 1.5;
 }

-.topic-label {
-  color: var(--text-dim);
+.topic-bar .topic-label {
+  color: var(--accent);
+  font-weight: bold;
 }

-.topic-text {
-  color: var(--text);
-}
-
-/* ============================================
-   Main Content Area
-   ============================================ */
-
-.main-area {
+/* Content area */
+.content {
  display: flex;
  flex: 1;
  overflow: hidden;
-  min-height: 0;
 }

-/* ============================================
-   Messages Panel
-   ============================================ */
-
-.messages-panel {
+/* Messages */
+.messages-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
@@ -289,178 +225,207 @@ body,
  min-width: 0;
 }

-.messages-scroll {
+.messages {
  flex: 1;
  overflow-y: auto;
-  padding: 4px 8px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  padding: 4px 0;
 }

-.messages-scroll::-webkit-scrollbar {
-  width: 8px;
+.messages::-webkit-scrollbar {
+  width: 6px;
 }

-.messages-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.messages-scroll::-webkit-scrollbar-thumb {
+.messages::-webkit-scrollbar-thumb {
  background: var(--border);
-  border-radius: 4px;
+  border-radius: 3px;
 }

-/* ============================================
-   Message Lines
-   ============================================ */
-
 .message {
-  padding: 1px 0;
-  line-height: 1.4;
-  white-space: pre-wrap;
+  padding: 1px 12px;
+  line-height: 1.5;
  word-wrap: break-word;
-  font-size: 13px;
+}
+
+.message:hover {
+  background: var(--bg-highlight);
 }

 .message .timestamp {
  color: var(--timestamp);
-  font-size: 12px;
+  font-size: 11px;
+  margin-right: 6px;
 }

 .message .nick {
  font-weight: bold;
+  margin-right: 6px;
 }

-.message .content {
+.message .nick::before {
+  content: '<';
+  color: var(--text-muted);
+}
+
+.message .nick::after {
+  content: '>';
+  color: var(--text-muted);
+}
+
+.message.system {
+  color: var(--system-color);
+  font-style: italic;
+}
+
+.message.system .timestamp {
+  color: var(--timestamp);
+}
+
+.message.system .content::before {
+  content: '*** ';
+}
+
+.message.action {
+  color: var(--action-color);
+}
+
+.message.action .timestamp {
+  color: var(--timestamp);
+}
+
+.message.action .action-nick {
+  font-weight: bold;
+}
+
+/* Input bar — full width at bottom */
+.input-bar {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.input-bar .input-nick {
+  padding: 0 8px 0 12px;
+  color: var(--accent);
+  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-size: 13px;
+}
+
+.input-bar .input-nick::after {
+  content: '>';
+  color: var(--text-muted);
+  margin-left: 1px;
+}
+
+.input-bar input {
+  flex: 1;
+  padding: 8px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  background: transparent;
+  border: none;
  color: var(--text);
+  outline: none;
 }

-/* System messages (joins, parts, quits, etc.) */
-.system-message {
-  color: var(--system);
+.input-bar input::placeholder {
+  color: var(--text-muted);
 }

-.system-message .system-text {
-  color: var(--system);
-}
-
-/* /me action messages */
-.action-message .action-text {
-  color: var(--action);
-}
-
-/* ============================================
-   User List (Right Panel)
-   ============================================ */
-
+/* User list */
 .user-list {
-  width: 160px;
-  background: var(--user-list-bg);
+  width: 170px;
+  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
-  overflow: hidden;
 }

 .user-list-header {
  padding: 6px 10px;
-  color: var(--user-list-header);
+  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
+  font-weight: bold;
  flex-shrink: 0;
 }

 .user-list-entries {
  overflow-y: auto;
-  padding: 4px 0;
  flex: 1;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  padding: 4px 0;
 }

-.nick-entry {
+.user-list-entries::-webkit-scrollbar {
+  width: 4px;
+}
+
+.user-list-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
+}
+
+.user-list .user {
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  line-height: 1.5;
+  color: var(--text);
 }

-.nick-entry:hover {
-  background: rgba(255, 255, 255, 0.04);
+.user-list .user:hover {
+  background: var(--tab-hover);
 }

-.nick-prefix {
-  color: var(--text-dim);
-  display: inline-block;
-  width: 1ch;
-  text-align: right;
-  margin-right: 1px;
+.user-list .user.op {
+  color: var(--op-color);
 }

-.nick-name {
-  font-weight: normal;
+.user-list .user.voice {
+  color: var(--voice-color);
 }

-/* ============================================
-   Input Line (Bottom)
-   ============================================ */
-
-.input-line {
-  display: flex;
-  align-items: center;
-  background: var(--input-bg);
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 36px;
-  padding: 0 8px;
-  gap: 6px;
-}
-
-.input-prompt {
-  color: var(--prompt);
-  font-size: 13px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.input-line input {
+/* Server tab messages */
+.server-messages {
+  color: var(--text-muted);
+  padding: 8px 12px;
+  white-space: pre-wrap;
+  overflow-y: auto;
  flex: 1;
-  padding: 4px 0;
-  font-family: inherit;
-  font-size: 13px;
-  background: transparent;
-  border: none;
-  color: var(--text-bright);
-  outline: none;
-  caret-color: var(--accent);
 }

-.input-line input::placeholder {
-  color: var(--text-dim);
-  font-style: italic;
+.server-messages .message {
+  padding: 1px 0;
 }

-/* ============================================
-   Responsive
-   ============================================ */
+.server-messages .message:hover {
+  background: var(--bg-highlight);
+}

+/* Responsive */
@media (max-width: 600px) {
  .user-list {
    display: none;
  }

  .tab {
-    padding: 0 8px;
+    padding: 5px 8px;
    font-size: 11px;
  }

-  .input-prompt {
+  .input-bar .input-nick {
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .input-bar input {
    font-size: 12px;
  }
 }