docs: document ?replay=1 query parameter for GET /state

When a client reconnects to an existing session (e.g. browser tab
closed and reopened), the server now enqueues synthetic JOIN messages
plus TOPIC/NAMES numerics for every channel the session belongs to.
These are delivered only to the reconnecting client, not broadcast
to other users.

Server changes:
- Add replayChannelState() to handlers that enqueues per-channel
  JOIN + join-numerics (332/353/366) to a specific client.
- HandleState accepts ?replay=1 query parameter to trigger replay.
- HandleLogin (password auth) also replays channel state for the
  new client since it creates a fresh client for an existing session.

SPA changes:
- On resume, call /state?replay=1 instead of /state so the server
  enqueues channel state into the message queue.
- processMessage now creates channel tabs when receiving a JOIN
  where msg.from matches the current nick (handles both live joins
  and replayed joins on reconnect).
- onLogin no longer re-sends JOIN commands for saved channels on
  resume — the server handles it via the replay mechanism, avoiding
  spurious JOIN broadcasts to other channel members.

Closes #60

README.md

@@ -845,10 +845,11 @@ the server to the client (never C2S) and use 3-digit string codes in the
 | `442` | ERR_NOTONCHANNEL    | Action on unjoined channel | `{"command":"442","to":"alice","params":["#general"],"body":["You're not on that channel"]}` |
 | `482` | ERR_CHANOPRIVSNEEDED | Non-op tries op action | `{"command":"482","to":"alice","params":["#general"],"body":["You're not channel operator"]}` |
 
-**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.
+**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).
 
 ### Channel Modes
 
@@ -936,6 +937,12 @@ Return the current user's session state.
 
 **Request:** No body. Requires auth.
 
+**Query Parameters:**
+
+| Parameter | Type   | Default | Description |
+|-----------|--------|---------|-------------|
+| `replay`  | string | (none)  | When set to `1`, enqueues synthetic JOIN + TOPIC + NAMES messages for every channel the session belongs to into the calling client's queue. Used by the SPA on reconnect to restore channel tabs without re-sending JOIN commands. |
+
 **Response:** `200 OK`
 ```json
 {
@@ -968,6 +975,12 @@ curl -s http://localhost:8080/api/v1/state \
   -H "Authorization: Bearer $TOKEN" | jq .
 ```
 
+**Reconnect with channel replay:**
+```bash
+curl -s "http://localhost:8080/api/v1/state?replay=1" \
+  -H "Authorization: Bearer $TOKEN" | jq .
+```
+
 ### GET /api/v1/messages — Poll Messages (Long-Poll)
 
 Retrieve messages from the client's delivery queue. This is the primary
@@ -1054,8 +1067,8 @@ reference with all required and optional fields.
 
 | Command   | Required Fields     | Optional      | Response Status |
 |-----------|---------------------|---------------|-----------------|
-| `PRIVMSG` | `to`, `body`        | `meta`        | 201 Created     |
-| `NOTICE`  | `to`, `body`        | `meta`        | 201 Created     |
+| `PRIVMSG` | `to`, `body`        | `meta`        | 200 OK          |
+| `NOTICE`  | `to`, `body`        | `meta`        | 200 OK          |
 | `JOIN`    | `to`                |               | 200 OK          |
 | `PART`    | `to`                | `body`        | 200 OK          |
 | `NICK`    | `body`              |               | 200 OK          |
@@ -1063,18 +1076,44 @@ reference with all required and optional fields.
 | `QUIT`    |                     | `body`        | 200 OK          |
 | `PING`    |                     |               | 200 OK          |
 
-**Errors (all commands):**
+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):**
 
 | Status | Error | When |
 |--------|-------|------|
-| 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 |
+| 400    | `invalid request` | Malformed JSON or empty command |
 | 401    | `unauthorized` | Missing or invalid auth token |
-| 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 |
+| 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 |
+| 331     | RPL_NOTOPIC | Channel has no topic (on JOIN) |
+| 332     | RPL_TOPIC | Channel topic (on JOIN, TOPIC set) |
+| 353     | RPL_NAMREPLY | Channel member list (on JOIN) |
+| 366     | RPL_ENDOFNAMES | End of NAMES list (on JOIN) |
+| 375     | RPL_MOTDSTART | Start of MOTD |
+| 372     | RPL_MOTD | MOTD line |
+| 376     | RPL_ENDOFMOTD | End of MOTD |
 
 ### GET /api/v1/history — Message History
 

cmd/neoirc-cli/main.go

@@ -138,16 +138,29 @@ 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,
@@ -510,6 +523,96 @@ 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(
@@ -574,6 +677,9 @@ 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",

internal/config/config.go

@@ -13,6 +13,14 @@ 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
@@ -62,7 +70,7 @@ func New(
 	viper.SetDefault("METRICS_PASSWORD", "")
 	viper.SetDefault("MAX_HISTORY", "10000")
 	viper.SetDefault("MAX_MESSAGE_SIZE", "4096")
-	viper.SetDefault("MOTD", "")
+	viper.SetDefault("MOTD", defaultMOTD)
 	viper.SetDefault("SERVER_NAME", "")
 	viper.SetDefault("FEDERATION_KEY", "")
 	viper.SetDefault("SESSION_IDLE_TIMEOUT", "24h")

internal/db/queries.go

@@ -35,6 +35,7 @@ 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"`
@@ -491,12 +492,17 @@ 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("[]")
 	}
@@ -508,10 +514,10 @@ func (database *Database) InsertMessage(
 	res, err := database.conn.ExecContext(ctx,
 		`INSERT INTO messages
 		 (uuid, command, msg_from, msg_to,
-		  body, meta, created_at)
-		 VALUES (?, ?, ?, ?, ?, ?, ?)`,
+		  params, body, meta, created_at)
+		 VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
 		msgUUID, command, from, target,
-		string(body), string(meta), now)
+		string(params), string(body), string(meta), now)
 	if err != nil {
 		return 0, "", fmt.Errorf(
 			"insert message: %w", err,
@@ -578,7 +584,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.body, m.meta, m.created_at
+		   m.params, m.body, m.meta, m.created_at
 		 FROM client_queues cq
 		 INNER JOIN messages m
 		   ON m.id = cq.message_id
@@ -642,7 +648,7 @@ func (database *Database) queryHistory(
 	if beforeID > 0 {
 		rows, err := database.conn.QueryContext(ctx,
 			`SELECT id, uuid, command, msg_from,
-			   msg_to, body, meta, created_at
+			   msg_to, params, body, meta, created_at
 			 FROM messages
 			 WHERE msg_to = ? AND id < ?
 			   AND command = 'PRIVMSG'
@@ -659,7 +665,7 @@ func (database *Database) queryHistory(
 
 	rows, err := database.conn.QueryContext(ctx,
 		`SELECT id, uuid, command, msg_from,
-		   msg_to, body, meta, created_at
+		   msg_to, params, body, meta, created_at
 		 FROM messages
 		 WHERE msg_to = ?
 		   AND command = 'PRIVMSG'
@@ -686,14 +692,14 @@ func scanMessages(
 		var (
 			msg                IRCMessage
 			qID                int64
-			body, meta string
+			params, body, meta string
 			createdAt          time.Time
 		)
 
 		err := rows.Scan(
 			&qID, &msg.ID, &msg.Command,
 			&msg.From, &msg.To,
-			&body, &meta, &createdAt,
+			&params, &body, &meta, &createdAt,
 		)
 		if err != nil {
 			return nil, fallbackQID, fmt.Errorf(
@@ -701,6 +707,10 @@ 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)

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", body, nil,
+		ctx, "PRIVMSG", "poller", "#test", nil, 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", body, nil,
+		ctx, "PRIVMSG", "poller", "#test", nil, 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",
-			json.RawMessage(`["msg"]`), nil,
+			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", body, nil,
+		ctx, "PRIVMSG", "sender", "#ch", nil, body, nil,
 	)
 	if err != nil {
 		t.Fatal(err)

internal/db/schema/001_initial.sql

@@ -50,6 +50,7 @@ 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

internal/handlers/api_test.go

@@ -462,6 +462,19 @@ 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) {
@@ -473,6 +486,47 @@ 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")
@@ -668,11 +722,23 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -699,9 +765,9 @@ func TestChannelMessage(t *testing.T) {
 			bodyKey:    []string{"hello world"},
 		},
 	)
-	if status != http.StatusCreated {
+	if status != http.StatusOK {
 		t.Fatalf(
-			"expected 201, got %d: %v", status, result,
+			"expected 200, got %d: %v", status, result,
 		)
 	}
 
@@ -728,11 +794,22 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -740,12 +817,23 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -759,6 +847,8 @@ func TestNonMemberCannotSend(t *testing.T) {
 		commandKey: joinCmd, toKey: "#private",
 	})
 
+	_, lastID := tserver.pollMessages(aliceToken, 0)
+
 	// Alice tries to send without joining.
 	status, _ := tserver.sendCommand(
 		aliceToken,
@@ -768,8 +858,17 @@ func TestNonMemberCannotSend(t *testing.T) {
 			bodyKey:    []string{"sneaky"},
 		},
 	)
-	if status != http.StatusForbidden {
-		t.Fatalf("expected 403, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -786,9 +885,9 @@ func TestDirectMessage(t *testing.T) {
 			bodyKey:    []string{"hey bob"},
 		},
 	)
-	if status != http.StatusCreated {
+	if status != http.StatusOK {
 		t.Fatalf(
-			"expected 201, got %d: %v", status, result,
+			"expected 200, got %d: %v", status, result,
 		)
 	}
 
@@ -818,13 +917,24 @@ 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.StatusNotFound {
-		t.Fatalf("expected 404, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -871,12 +981,23 @@ 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.StatusConflict {
-		t.Fatalf("expected 409, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -884,12 +1005,23 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -897,11 +1029,22 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -938,12 +1081,23 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -955,11 +1109,22 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -1027,11 +1192,22 @@ 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.StatusBadRequest {
-		t.Fatalf("expected 400, got %d", status)
+	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,
+		)
 	}
 }
 
@@ -1278,12 +1454,18 @@ 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(apiMessages+"?timeout=1"),
+		tserver.url(fmt.Sprintf(
+			"%s?timeout=1&after=%d",
+			apiMessages, lastID,
+		)),
 		token,
 		nil,
 	)

internal/handlers/auth.go

@@ -80,7 +80,7 @@ func (hdlr *Handlers) handleRegister(
 		return
 	}
 
-	hdlr.deliverMOTD(request, clientID, sessionID)
+	hdlr.deliverMOTD(request, clientID, sessionID, payload.Nick)
 
 	hdlr.respondJSON(writer, request, map[string]any{
 		"id":    sessionID,
@@ -162,7 +162,7 @@ func (hdlr *Handlers) handleLogin(
 		return
 	}
 
-	sessionID, _, token, err :=
+	sessionID, clientID, token, err :=
 		hdlr.params.Database.LoginUser(
 			request.Context(),
 			payload.Nick,
@@ -178,6 +178,16 @@ func (hdlr *Handlers) handleLogin(
 		return
 	}
 
+	hdlr.deliverMOTD(
+		request, clientID, sessionID, payload.Nick,
+	)
+
+	// Replay channel state so the new client knows which
+	// channels the session already belongs to.
+	hdlr.replayChannelState(
+		request, clientID, sessionID, payload.Nick,
+	)
+
 	hdlr.respondJSON(writer, request, map[string]any{
 		"id":    sessionID,
 		"nick":  payload.Nick,

web/dist/style.css

@@ -1,317 +1,466 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
 :root {
-  --bg: #1a1a2e;
-  --bg-secondary: #16213e;
-  --bg-input: #0f3460;
-  --text: #e0e0e0;
-  --text-muted: #888;
-  --accent: #e94560;
-  --accent2: #0f3460;
-  --border: #2a2a4a;
-  --nick: #53a8b6;
-  --timestamp: #666;
-  --tab-active: #e94560;
-  --tab-bg: #16213e;
-  --tab-hover: #1a1a3e;
-  --topic-bg: #121a30;
-  --unread-bg: #e94560;
-  --warn: #f0ad4e;
+  --bg: #0a0e14;
+  --bg-panel: #0d1117;
+  --bg-input: #0d1117;
+  --bg-tab: #161b22;
+  --bg-tab-active: #0d1117;
+  --bg-topic: #0d1117;
+  --text: #c9d1d9;
+  --text-dim: #6e7681;
+  --text-bright: #e6edf3;
+  --accent: #58a6ff;
+  --accent-dim: #1f6feb;
+  --border: #21262d;
+  --system: #7d8590;
+  --action: #d2a8ff;
+  --warn: #d29922;
+  --error: #f85149;
+  --unread: #f0883e;
+  --nick-brackets: #6e7681;
+  --timestamp: #484f58;
+  --input-bg: #161b22;
+  --prompt: #3fb950;
+  --tab-indicator: #58a6ff;
+  --user-list-bg: #0d1117;
+  --user-list-header: #484f58;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 14px;
+  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono",
+    "Consolas", "Liberation Mono", "Courier New", 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%;
-  gap: 16px;
+  background: var(--bg);
 }
 
-.login-screen h1 {
-  color: var(--accent);
-  font-size: 2em;
-}
-
-.login-screen input {
-  padding: 10px 16px;
-  font-size: 16px;
-  font-family: inherit;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 4px;
-  width: 280px;
-}
-
-.login-screen button {
-  padding: 10px 24px;
-  font-size: 16px;
-  font-family: inherit;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.login-screen .error {
-  color: var(--accent);
-}
-
-.login-screen .motd {
-  color: var(--text-muted);
-  max-width: 400px;
+.login-box {
   text-align: center;
-  white-space: pre-wrap;
+  max-width: 360px;
+  width: 100%;
+  padding: 32px;
 }
 
-/* Main layout */
-.app {
+.login-box h1 {
+  color: var(--accent);
+  font-size: 1.8em;
+  margin-bottom: 16px;
+  font-weight: 400;
+}
+
+.login-box .motd {
+  color: var(--accent);
+  font-size: 11px;
+  margin-bottom: 20px;
+  text-align: left;
+  white-space: pre;
+  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);
+  border: 1px solid var(--border);
+  color: var(--text-bright);
+  border-radius: 3px;
+  outline: none;
+}
+
+.login-box input:focus {
+  border-color: var(--accent-dim);
+}
+
+.login-box button {
+  padding: 8px 16px;
+  font-family: inherit;
+  font-size: 14px;
+  background: var(--accent-dim);
+  border: none;
+  color: var(--text-bright);
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 4px;
+}
+
+.login-box button:hover {
+  background: var(--accent);
+}
+
+.login-box .error {
+  color: var(--error);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+/* ============================================
+   IRC App Layout
+   ============================================ */
+
+.irc-app {
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
 }
 
-/* Tab bar */
+/* ============================================
+   Tab Bar
+   ============================================ */
+
 .tab-bar {
   display: flex;
-  background: var(--bg-secondary);
+  background: var(--bg-tab);
   border-bottom: 1px solid var(--border);
-  overflow-x: auto;
   flex-shrink: 0;
-  align-items: center;
+  height: 32px;
+  align-items: stretch;
+}
+
+.tabs {
+  display: flex;
+  overflow-x: auto;
+  flex: 1;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
 }
 
 .tab {
-  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
+  color: var(--text-dim);
   white-space: nowrap;
-  color: var(--text-muted);
   user-select: none;
+  border-right: 1px solid var(--border);
+  font-size: 12px;
+  gap: 4px;
   position: relative;
 }
 
 .tab:hover {
-  background: var(--tab-hover);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .tab.active {
-  color: var(--text);
-  border-bottom-color: var(--tab-active);
+  color: var(--text-bright);
+  background: var(--bg-tab-active);
+  border-bottom: 2px solid var(--tab-indicator);
+  margin-bottom: -1px;
 }
 
-.tab .close-btn {
-  margin-left: 8px;
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.tab .close-btn:hover {
-  color: var(--accent);
-}
-
-.tab .unread-badge {
-  display: inline-block;
-  background: var(--unread-bg);
-  color: white;
-  font-size: 10px;
+.tab.has-unread .tab-label {
+  color: var(--unread);
   font-weight: bold;
-  padding: 1px 5px;
-  border-radius: 8px;
-  margin-left: 6px;
-  min-width: 16px;
-  text-align: center;
 }
 
-/* Connection status */
-.connection-status {
-  padding: 4px 12px;
-  background: var(--warn);
-  color: #1a1a2e;
-  font-size: 12px;
+.tab .unread-count {
+  color: var(--unread);
+  font-size: 11px;
   font-weight: bold;
-  white-space: nowrap;
+}
+
+.tab-close {
+  color: var(--text-dim);
+  font-size: 14px;
+  line-height: 1;
+  margin-left: 2px;
+}
+
+.tab-close:hover {
+  color: var(--error);
+}
+
+.status-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
   flex-shrink: 0;
+  font-size: 12px;
 }
 
-/* Topic bar */
+.status-nick {
+  color: var(--accent);
+  font-weight: bold;
+}
+
+.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 {
-  padding: 6px 12px;
-  background: var(--topic-bg);
+  padding: 4px 12px;
+  background: var(--bg-topic);
   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;
 }
 
-/* Content area */
-.content {
+.topic-label {
+  color: var(--text-dim);
+}
+
+.topic-text {
+  color: var(--text);
+}
+
+/* ============================================
+   Main Content Area
+   ============================================ */
+
+.main-area {
   display: flex;
   flex: 1;
   overflow: hidden;
+  min-height: 0;
 }
 
-/* Messages */
-.messages-pane {
+/* ============================================
+   Messages Panel
+   ============================================ */
+
+.messages-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-width: 0;
 }
 
-.messages {
+.messages-scroll {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 12px;
+  padding: 4px 8px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
 }
 
+.messages-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.messages-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.messages-scroll::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+/* ============================================
+   Message Lines
+   ============================================ */
+
 .message {
-  padding: 2px 0;
+  padding: 1px 0;
   line-height: 1.4;
+  white-space: pre-wrap;
   word-wrap: break-word;
+  font-size: 13px;
 }
 
 .message .timestamp {
   color: var(--timestamp);
   font-size: 12px;
-  margin-right: 8px;
 }
 
 .message .nick {
-  color: var(--nick);
   font-weight: bold;
-  margin-right: 8px;
 }
 
-.message .nick::before { content: '<'; }
-.message .nick::after { content: '>'; }
+.message .content {
+  color: var(--text);
+}
 
-.message.system {
-  color: var(--text-muted);
+/* System messages (joins, parts, quits, etc.) */
+.system-message {
+  color: var(--system);
+}
+
+.system-message .system-text {
+  color: var(--system);
+}
+
+/* /me action messages */
+.action-message .action-text {
+  color: var(--action);
+}
+
+/* ============================================
+   User List (Right Panel)
+   ============================================ */
+
+.user-list {
+  width: 160px;
+  background: var(--user-list-bg);
+  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);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.user-list-entries {
+  overflow-y: auto;
+  padding: 4px 0;
+  flex: 1;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.nick-entry {
+  padding: 2px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+}
+
+.nick-entry:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.nick-prefix {
+  color: var(--text-dim);
+  display: inline-block;
+  width: 1ch;
+  text-align: right;
+  margin-right: 1px;
+}
+
+.nick-name {
+  font-weight: normal;
+}
+
+/* ============================================
+   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 {
+  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;
 }
 
-.message.system .nick {
-  color: var(--text-muted);
-}
+/* ============================================
+   Responsive
+   ============================================ */
 
-.message.system .nick::before,
-.message.system .nick::after { content: ''; }
-
-/* Input */
-.input-bar {
-  display: flex;
-  border-top: 1px solid var(--border);
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-}
-
-.input-bar input {
-  flex: 1;
-  padding: 10px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--bg-input);
-  border: none;
-  color: var(--text);
-  outline: none;
-}
-
-.input-bar button {
-  padding: 10px 16px;
-  font-family: inherit;
-  background: var(--accent);
-  border: none;
-  color: white;
-  cursor: pointer;
-}
-
-/* User list */
-.user-list {
-  width: 160px;
-  background: var(--bg-secondary);
-  border-left: 1px solid var(--border);
-  overflow-y: auto;
-  padding: 8px;
-  flex-shrink: 0;
-}
-
-.user-list h3 {
-  color: var(--text-muted);
-  font-size: 11px;
-  text-transform: uppercase;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-}
-
-.user-list .user {
-  padding: 3px 4px;
-  color: var(--nick);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.user-list .user:hover {
-  background: var(--tab-hover);
-}
-
-/* Server tab */
-.server-messages {
-  color: var(--text-muted);
-  padding: 12px;
-  white-space: pre-wrap;
-  overflow-y: auto;
-  flex: 1;
-}
-
-/* Channel join dialog */
-.join-dialog {
-  padding: 12px;
-  display: flex;
-  gap: 8px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  margin-left: auto;
-}
-
-.join-dialog input {
-  padding: 6px 10px;
-  font-family: inherit;
-  font-size: 13px;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 3px;
-  width: 200px;
-}
-
-.join-dialog button {
-  padding: 6px 14px;
-  font-family: inherit;
-  font-size: 13px;
-  background: var(--accent2);
-  border: none;
-  color: var(--text);
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-/* Responsive */
 @media (max-width: 600px) {
-  .user-list { display: none; }
-  .tab { padding: 6px 10px; font-size: 13px; }
+  .user-list {
+    display: none;
+  }
+
+  .tab {
+    padding: 0 8px;
+    font-size: 11px;
+  }
+
+  .input-prompt {
+    font-size: 12px;
+  }
 }

web/src/style.css

@@ -1,317 +1,466 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
 :root {
-  --bg: #1a1a2e;
-  --bg-secondary: #16213e;
-  --bg-input: #0f3460;
-  --text: #e0e0e0;
-  --text-muted: #888;
-  --accent: #e94560;
-  --accent2: #0f3460;
-  --border: #2a2a4a;
-  --nick: #53a8b6;
-  --timestamp: #666;
-  --tab-active: #e94560;
-  --tab-bg: #16213e;
-  --tab-hover: #1a1a3e;
-  --topic-bg: #121a30;
-  --unread-bg: #e94560;
-  --warn: #f0ad4e;
+  --bg: #0a0e14;
+  --bg-panel: #0d1117;
+  --bg-input: #0d1117;
+  --bg-tab: #161b22;
+  --bg-tab-active: #0d1117;
+  --bg-topic: #0d1117;
+  --text: #c9d1d9;
+  --text-dim: #6e7681;
+  --text-bright: #e6edf3;
+  --accent: #58a6ff;
+  --accent-dim: #1f6feb;
+  --border: #21262d;
+  --system: #7d8590;
+  --action: #d2a8ff;
+  --warn: #d29922;
+  --error: #f85149;
+  --unread: #f0883e;
+  --nick-brackets: #6e7681;
+  --timestamp: #484f58;
+  --input-bg: #161b22;
+  --prompt: #3fb950;
+  --tab-indicator: #58a6ff;
+  --user-list-bg: #0d1117;
+  --user-list-header: #484f58;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 14px;
+  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono",
+    "Consolas", "Liberation Mono", "Courier New", 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%;
-  gap: 16px;
+  background: var(--bg);
 }
 
-.login-screen h1 {
-  color: var(--accent);
-  font-size: 2em;
-}
-
-.login-screen input {
-  padding: 10px 16px;
-  font-size: 16px;
-  font-family: inherit;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 4px;
-  width: 280px;
-}
-
-.login-screen button {
-  padding: 10px 24px;
-  font-size: 16px;
-  font-family: inherit;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.login-screen .error {
-  color: var(--accent);
-}
-
-.login-screen .motd {
-  color: var(--text-muted);
-  max-width: 400px;
+.login-box {
   text-align: center;
-  white-space: pre-wrap;
+  max-width: 360px;
+  width: 100%;
+  padding: 32px;
 }
 
-/* Main layout */
-.app {
+.login-box h1 {
+  color: var(--accent);
+  font-size: 1.8em;
+  margin-bottom: 16px;
+  font-weight: 400;
+}
+
+.login-box .motd {
+  color: var(--accent);
+  font-size: 11px;
+  margin-bottom: 20px;
+  text-align: left;
+  white-space: pre;
+  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);
+  border: 1px solid var(--border);
+  color: var(--text-bright);
+  border-radius: 3px;
+  outline: none;
+}
+
+.login-box input:focus {
+  border-color: var(--accent-dim);
+}
+
+.login-box button {
+  padding: 8px 16px;
+  font-family: inherit;
+  font-size: 14px;
+  background: var(--accent-dim);
+  border: none;
+  color: var(--text-bright);
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 4px;
+}
+
+.login-box button:hover {
+  background: var(--accent);
+}
+
+.login-box .error {
+  color: var(--error);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+/* ============================================
+   IRC App Layout
+   ============================================ */
+
+.irc-app {
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
 }
 
-/* Tab bar */
+/* ============================================
+   Tab Bar
+   ============================================ */
+
 .tab-bar {
   display: flex;
-  background: var(--bg-secondary);
+  background: var(--bg-tab);
   border-bottom: 1px solid var(--border);
-  overflow-x: auto;
   flex-shrink: 0;
-  align-items: center;
+  height: 32px;
+  align-items: stretch;
+}
+
+.tabs {
+  display: flex;
+  overflow-x: auto;
+  flex: 1;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
 }
 
 .tab {
-  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
+  color: var(--text-dim);
   white-space: nowrap;
-  color: var(--text-muted);
   user-select: none;
+  border-right: 1px solid var(--border);
+  font-size: 12px;
+  gap: 4px;
   position: relative;
 }
 
 .tab:hover {
-  background: var(--tab-hover);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .tab.active {
-  color: var(--text);
-  border-bottom-color: var(--tab-active);
+  color: var(--text-bright);
+  background: var(--bg-tab-active);
+  border-bottom: 2px solid var(--tab-indicator);
+  margin-bottom: -1px;
 }
 
-.tab .close-btn {
-  margin-left: 8px;
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.tab .close-btn:hover {
-  color: var(--accent);
-}
-
-.tab .unread-badge {
-  display: inline-block;
-  background: var(--unread-bg);
-  color: white;
-  font-size: 10px;
+.tab.has-unread .tab-label {
+  color: var(--unread);
   font-weight: bold;
-  padding: 1px 5px;
-  border-radius: 8px;
-  margin-left: 6px;
-  min-width: 16px;
-  text-align: center;
 }
 
-/* Connection status */
-.connection-status {
-  padding: 4px 12px;
-  background: var(--warn);
-  color: #1a1a2e;
-  font-size: 12px;
+.tab .unread-count {
+  color: var(--unread);
+  font-size: 11px;
   font-weight: bold;
-  white-space: nowrap;
+}
+
+.tab-close {
+  color: var(--text-dim);
+  font-size: 14px;
+  line-height: 1;
+  margin-left: 2px;
+}
+
+.tab-close:hover {
+  color: var(--error);
+}
+
+.status-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
   flex-shrink: 0;
+  font-size: 12px;
 }
 
-/* Topic bar */
+.status-nick {
+  color: var(--accent);
+  font-weight: bold;
+}
+
+.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 {
-  padding: 6px 12px;
-  background: var(--topic-bg);
+  padding: 4px 12px;
+  background: var(--bg-topic);
   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;
 }
 
-/* Content area */
-.content {
+.topic-label {
+  color: var(--text-dim);
+}
+
+.topic-text {
+  color: var(--text);
+}
+
+/* ============================================
+   Main Content Area
+   ============================================ */
+
+.main-area {
   display: flex;
   flex: 1;
   overflow: hidden;
+  min-height: 0;
 }
 
-/* Messages */
-.messages-pane {
+/* ============================================
+   Messages Panel
+   ============================================ */
+
+.messages-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-width: 0;
 }
 
-.messages {
+.messages-scroll {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 12px;
+  padding: 4px 8px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
 }
 
+.messages-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.messages-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.messages-scroll::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+/* ============================================
+   Message Lines
+   ============================================ */
+
 .message {
-  padding: 2px 0;
+  padding: 1px 0;
   line-height: 1.4;
+  white-space: pre-wrap;
   word-wrap: break-word;
+  font-size: 13px;
 }
 
 .message .timestamp {
   color: var(--timestamp);
   font-size: 12px;
-  margin-right: 8px;
 }
 
 .message .nick {
-  color: var(--nick);
   font-weight: bold;
-  margin-right: 8px;
 }
 
-.message .nick::before { content: '<'; }
-.message .nick::after { content: '>'; }
+.message .content {
+  color: var(--text);
+}
 
-.message.system {
-  color: var(--text-muted);
+/* System messages (joins, parts, quits, etc.) */
+.system-message {
+  color: var(--system);
+}
+
+.system-message .system-text {
+  color: var(--system);
+}
+
+/* /me action messages */
+.action-message .action-text {
+  color: var(--action);
+}
+
+/* ============================================
+   User List (Right Panel)
+   ============================================ */
+
+.user-list {
+  width: 160px;
+  background: var(--user-list-bg);
+  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);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.user-list-entries {
+  overflow-y: auto;
+  padding: 4px 0;
+  flex: 1;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.nick-entry {
+  padding: 2px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+}
+
+.nick-entry:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.nick-prefix {
+  color: var(--text-dim);
+  display: inline-block;
+  width: 1ch;
+  text-align: right;
+  margin-right: 1px;
+}
+
+.nick-name {
+  font-weight: normal;
+}
+
+/* ============================================
+   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 {
+  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;
 }
 
-.message.system .nick {
-  color: var(--text-muted);
-}
+/* ============================================
+   Responsive
+   ============================================ */
 
-.message.system .nick::before,
-.message.system .nick::after { content: ''; }
-
-/* Input */
-.input-bar {
-  display: flex;
-  border-top: 1px solid var(--border);
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-}
-
-.input-bar input {
-  flex: 1;
-  padding: 10px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--bg-input);
-  border: none;
-  color: var(--text);
-  outline: none;
-}
-
-.input-bar button {
-  padding: 10px 16px;
-  font-family: inherit;
-  background: var(--accent);
-  border: none;
-  color: white;
-  cursor: pointer;
-}
-
-/* User list */
-.user-list {
-  width: 160px;
-  background: var(--bg-secondary);
-  border-left: 1px solid var(--border);
-  overflow-y: auto;
-  padding: 8px;
-  flex-shrink: 0;
-}
-
-.user-list h3 {
-  color: var(--text-muted);
-  font-size: 11px;
-  text-transform: uppercase;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-}
-
-.user-list .user {
-  padding: 3px 4px;
-  color: var(--nick);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.user-list .user:hover {
-  background: var(--tab-hover);
-}
-
-/* Server tab */
-.server-messages {
-  color: var(--text-muted);
-  padding: 12px;
-  white-space: pre-wrap;
-  overflow-y: auto;
-  flex: 1;
-}
-
-/* Channel join dialog */
-.join-dialog {
-  padding: 12px;
-  display: flex;
-  gap: 8px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  margin-left: auto;
-}
-
-.join-dialog input {
-  padding: 6px 10px;
-  font-family: inherit;
-  font-size: 13px;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 3px;
-  width: 200px;
-}
-
-.join-dialog button {
-  padding: 6px 14px;
-  font-family: inherit;
-  font-size: 13px;
-  background: var(--accent2);
-  border: none;
-  color: var(--text);
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-/* Responsive */
 @media (max-width: 600px) {
-  .user-list { display: none; }
-  .tab { padding: 6px 10px; font-size: 13px; }
+  .user-list {
+    display: none;
+  }
+
+  .tab {
+    padding: 0 8px;
+    font-size: 11px;
+  }
+
+  .input-prompt {
+    font-size: 12px;
+  }
 }