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

README.md

@@ -845,11 +845,10 @@ 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 now implemented. All IRC command responses
+**Note:** Numeric replies are planned for full implementation. The current MVP
-(success and error) are delivered as numeric replies through the message queue.
+returns standard HTTP error responses (4xx/5xx with JSON error bodies) instead
-HTTP error codes are reserved for transport-level issues (auth failures,
+of numeric replies for error conditions. Numeric replies in the message queue
-malformed requests, server errors). The `params` field in the message envelope
+will be added post-MVP.
-carries IRC-style parameters (e.g., channel name, target nick).
 
 ### Channel Modes
 
@@ -1055,8 +1054,8 @@ reference with all required and optional fields.
 
 | Command   | Required Fields     | Optional      | Response Status |
 |-----------|---------------------|---------------|-----------------|
-| `PRIVMSG` | `to`, `body`        | `meta`        | 200 OK          |
+| `PRIVMSG` | `to`, `body`        | `meta`        | 201 Created     |
-| `NOTICE`  | `to`, `body`        | `meta`        | 200 OK          |
+| `NOTICE`  | `to`, `body`        | `meta`        | 201 Created     |
 | `JOIN`    | `to`                |               | 200 OK          |
 | `PART`    | `to`                | `body`        | 200 OK          |
 | `NICK`    | `body`              |               | 200 OK          |
@@ -1064,44 +1063,18 @@ reference with all required and optional fields.
 | `QUIT`    |                     | `body`        | 200 OK          |
 | `PING`    |                     |               | 200 OK          |
 
-All IRC commands return HTTP 200 OK. IRC-level success and error responses
+**Errors (all commands):**
-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 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 |
+| 404    | `channel not found` | Target channel doesn't exist |
-
+| 404    | `user not found` | DM target nick doesn't exist |
-**IRC numeric error replies (delivered via message queue):**
+| 409    | `nick already in use` | NICK target is taken |
-
-| 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
 

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)
+		  body, meta, created_at)
-		 VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+		 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'
@@ -692,14 +686,14 @@ func scanMessages(
 		var (
 			msg        IRCMessage
 			qID        int64
-			params, body, meta string
+			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)

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)

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

internal/handlers/api.go

@@ -91,7 +91,7 @@ func (hdlr *Handlers) fanOut(
 	sessionIDs []int64,
 ) (string, error) {
 	dbID, msgUUID, err := hdlr.params.Database.InsertMessage(
-		request.Context(), command, from, target, nil, body, nil,
+		request.Context(), command, from, target, body, nil,
 	)
 	if err != nil {
 		return "", fmt.Errorf("insert message: %w", err)
@@ -185,7 +185,7 @@ func (hdlr *Handlers) handleCreateSession(
 		return
 	}
 
-	hdlr.deliverMOTD(request, clientID, sessionID, payload.Nick)
+	hdlr.deliverMOTD(request, clientID, sessionID)
 
 	hdlr.respondJSON(writer, request, map[string]any{
 		"id":    sessionID,
@@ -219,76 +219,49 @@ func (hdlr *Handlers) handleCreateSessionError(
 	)
 }
 
-// deliverWelcome sends the RPL_WELCOME (001) numeric to a
-// new client.
-func (hdlr *Handlers) deliverWelcome(
-	request *http.Request,
-	clientID int64,
-	nick string,
-) {
-	ctx := request.Context()
-
-	hdlr.enqueueNumeric(
-		ctx, clientID, "001", nick, nil,
-		"Welcome to the network, "+nick,
-	)
-}
-
 // deliverMOTD sends the MOTD as IRC numeric messages to a
 // new client.
 func (hdlr *Handlers) deliverMOTD(
 	request *http.Request,
 	clientID, sessionID int64,
-	nick string,
 ) {
 	motd := hdlr.params.Config.MOTD
-	srvName := hdlr.serverName()
+	serverName := hdlr.params.Config.ServerName
 
-	ctx := request.Context()
+	if serverName == "" {
-
+		serverName = "neoirc"
-	hdlr.deliverWelcome(request, clientID, nick)
+	}
 
 	if motd == "" {
-		hdlr.broker.Notify(sessionID)
-
 		return
 	}
 
+	ctx := request.Context()
+
 	hdlr.enqueueNumeric(
-		ctx, clientID, "375", nick, nil,
+		ctx, clientID, "375", serverName,
-		"- "+srvName+" Message of the Day -",
+		"- "+serverName+" Message of the Day -",
 	)
 
 	for line := range strings.SplitSeq(motd, "\n") {
 		hdlr.enqueueNumeric(
-			ctx, clientID, "372", nick, nil,
+			ctx, clientID, "372", serverName,
 			"- "+line,
 		)
 	}
 
 	hdlr.enqueueNumeric(
-		ctx, clientID, "376", nick, nil,
+		ctx, clientID, "376", serverName,
 		"End of /MOTD command.",
 	)
 
 	hdlr.broker.Notify(sessionID)
 }
 
-func (hdlr *Handlers) serverName() string {
-	name := hdlr.params.Config.ServerName
-	if name == "" {
-		return "neoirc"
-	}
-
-	return name
-}
-
 func (hdlr *Handlers) enqueueNumeric(
 	ctx context.Context,
 	clientID int64,
-	command, nick string,
+	command, serverName, text string,
-	params []string,
-	text string,
 ) {
 	body, err := json.Marshal([]string{text})
 	if err != nil {
@@ -299,22 +272,9 @@ func (hdlr *Handlers) enqueueNumeric(
 		return
 	}
 
-	var paramsJSON json.RawMessage
-
-	if len(params) > 0 {
-		paramsJSON, err = json.Marshal(params)
-		if err != nil {
-			hdlr.log.Error(
-				"marshal numeric params", "error", err,
-			)
-
-			return
-		}
-	}
-
 	dbID, _, insertErr := hdlr.params.Database.InsertMessage(
-		ctx, command, hdlr.serverName(), nick,
+		ctx, command, serverName, "",
-		paramsJSON, json.RawMessage(body), nil,
+		json.RawMessage(body), nil,
 	)
 	if insertErr != nil {
 		hdlr.log.Error(
@@ -572,7 +532,7 @@ func (hdlr *Handlers) HandleSendCommand() http.HandlerFunc {
 			writer, request.Body, hdlr.maxBodySize(),
 		)
 
-		sessionID, clientID, nick, ok :=
+		sessionID, _, nick, ok :=
 			hdlr.requireAuth(writer, request)
 		if !ok {
 			return
@@ -622,8 +582,7 @@ func (hdlr *Handlers) HandleSendCommand() http.HandlerFunc {
 		}
 
 		hdlr.dispatchCommand(
-			writer, request,
+			writer, request, sessionID, nick,
-			sessionID, clientID, nick,
 			payload.Command, payload.To,
 			payload.Body, bodyLines,
 		)
@@ -633,7 +592,7 @@ func (hdlr *Handlers) HandleSendCommand() http.HandlerFunc {
 func (hdlr *Handlers) dispatchCommand(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick, command, target string,
 	body json.RawMessage,
 	bodyLines func() []string,
@@ -641,30 +600,24 @@ func (hdlr *Handlers) dispatchCommand(
 	switch command {
 	case cmdPrivmsg, "NOTICE":
 		hdlr.handlePrivmsg(
-			writer, request,
+			writer, request, sessionID, nick,
-			sessionID, clientID, nick,
 			command, target, body, bodyLines,
 		)
 	case "JOIN":
 		hdlr.handleJoin(
-			writer, request,
+			writer, request, sessionID, nick, target,
-			sessionID, clientID, nick, target,
 		)
 	case "PART":
 		hdlr.handlePart(
-			writer, request,
+			writer, request, sessionID, nick, target, body,
-			sessionID, clientID, nick, target, body,
 		)
 	case "NICK":
 		hdlr.handleNick(
-			writer, request,
+			writer, request, sessionID, nick, bodyLines,
-			sessionID, clientID, nick, bodyLines,
 		)
 	case "TOPIC":
 		hdlr.handleTopic(
-			writer, request,
+			writer, request, nick, target, body, bodyLines,
-			sessionID, clientID, nick,
-			target, body, bodyLines,
 		)
 	case "QUIT":
 		hdlr.handleQuit(
@@ -674,63 +627,50 @@ func (hdlr *Handlers) dispatchCommand(
 		hdlr.respondJSON(writer, request,
 			map[string]string{
 				"command": "PONG",
-				"from":    hdlr.serverName(),
+				"from":    hdlr.params.Config.ServerName,
 			},
 			http.StatusOK)
 	default:
-		hdlr.enqueueNumeric(
+		hdlr.respondError(
-			request.Context(), clientID,
+			writer, request,
-			"421", nick, []string{command},
+			"unknown command: "+command,
-			"Unknown command",
+			http.StatusBadRequest,
 		)
-		hdlr.broker.Notify(sessionID)
-		hdlr.respondJSON(writer, request,
-			map[string]string{"status": "error"},
-			http.StatusOK)
 	}
 }
 
 func (hdlr *Handlers) handlePrivmsg(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick, command, target string,
 	body json.RawMessage,
 	bodyLines func() []string,
 ) {
 	if target == "" {
-		hdlr.enqueueNumeric(
+		hdlr.respondError(
-			request.Context(), clientID,
+			writer, request,
-			"461", nick, []string{command},
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
-		hdlr.broker.Notify(sessionID)
-		hdlr.respondJSON(writer, request,
-			map[string]string{"status": "error"},
-			http.StatusOK)
 
 		return
 	}
 
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.enqueueNumeric(
+		hdlr.respondError(
-			request.Context(), clientID,
+			writer, request,
-			"461", nick, []string{command},
+			"body required",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
-		hdlr.broker.Notify(sessionID)
-		hdlr.respondJSON(writer, request,
-			map[string]string{"status": "error"},
-			http.StatusOK)
 
 		return
 	}
 
 	if strings.HasPrefix(target, "#") {
 		hdlr.handleChannelMsg(
-			writer, request,
+			writer, request, sessionID, nick,
-			sessionID, clientID, nick,
 			command, target, body,
 		)
 
@@ -738,36 +678,15 @@ func (hdlr *Handlers) handlePrivmsg(
 	}
 
 	hdlr.handleDirectMsg(
-		writer, request,
+		writer, request, sessionID, nick,
-		sessionID, clientID, nick,
 		command, target, body,
 	)
 }
 
-// respondIRCError enqueues a numeric error reply, notifies
-// the broker, and sends HTTP 200 with {"status":"error"}.
-func (hdlr *Handlers) respondIRCError(
-	writer http.ResponseWriter,
-	request *http.Request,
-	clientID, sessionID int64,
-	numeric, nick string,
-	params []string,
-	text string,
-) {
-	hdlr.enqueueNumeric(
-		request.Context(), clientID,
-		numeric, nick, params, text,
-	)
-	hdlr.broker.Notify(sessionID)
-	hdlr.respondJSON(writer, request,
-		map[string]string{"status": "error"},
-		http.StatusOK)
-}
-
 func (hdlr *Handlers) handleChannelMsg(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick, command, target string,
 	body json.RawMessage,
 ) {
@@ -775,10 +694,10 @@ func (hdlr *Handlers) handleChannelMsg(
 		request.Context(), target,
 	)
 	if err != nil {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"403", nick, []string{target},
+			"channel not found",
-			"No such channel",
+			http.StatusNotFound,
 		)
 
 		return
@@ -801,27 +720,15 @@ func (hdlr *Handlers) handleChannelMsg(
 	}
 
 	if !isMember {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"442", nick, []string{target},
+			"not a member of this channel",
-			"You're not on that channel",
+			http.StatusForbidden,
 		)
 
 		return
 	}
 
-	hdlr.sendChannelMsg(
-		writer, request, command, nick, target, body, chID,
-	)
-}
-
-func (hdlr *Handlers) sendChannelMsg(
-	writer http.ResponseWriter,
-	request *http.Request,
-	command, nick, target string,
-	body json.RawMessage,
-	chID int64,
-) {
 	memberIDs, err := hdlr.params.Database.GetChannelMemberIDs(
 		request.Context(), chID,
 	)
@@ -854,13 +761,13 @@ func (hdlr *Handlers) sendChannelMsg(
 
 	hdlr.respondJSON(writer, request,
 		map[string]string{"id": msgUUID, "status": "sent"},
-		http.StatusOK)
+		http.StatusCreated)
 }
 
 func (hdlr *Handlers) handleDirectMsg(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick, command, target string,
 	body json.RawMessage,
 ) {
@@ -868,15 +775,11 @@ func (hdlr *Handlers) handleDirectMsg(
 		request.Context(), target,
 	)
 	if err != nil {
-		hdlr.enqueueNumeric(
+		hdlr.respondError(
-			request.Context(), clientID,
+			writer, request,
-			"401", nick, []string{target},
+			"user not found",
-			"No such nick/channel",
+			http.StatusNotFound,
 		)
-		hdlr.broker.Notify(sessionID)
-		hdlr.respondJSON(writer, request,
-			map[string]string{"status": "error"},
-			http.StatusOK)
 
 		return
 	}
@@ -902,20 +805,20 @@ func (hdlr *Handlers) handleDirectMsg(
 
 	hdlr.respondJSON(writer, request,
 		map[string]string{"id": msgUUID, "status": "sent"},
-		http.StatusOK)
+		http.StatusCreated)
 }
 
 func (hdlr *Handlers) handleJoin(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick, target string,
 ) {
 	if target == "" {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"461", nick, []string{"JOIN"},
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -927,27 +830,15 @@ func (hdlr *Handlers) handleJoin(
 	}
 
 	if !validChannelRe.MatchString(channel) {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"403", nick, []string{channel},
+			"invalid channel name",
-			"No such channel",
+			http.StatusBadRequest,
 		)
 
 		return
 	}
 
-	hdlr.executeJoin(
-		writer, request,
-		sessionID, clientID, nick, channel,
-	)
-}
-
-func (hdlr *Handlers) executeJoin(
-	writer http.ResponseWriter,
-	request *http.Request,
-	sessionID, clientID int64,
-	nick, channel string,
-) {
 	chID, err := hdlr.params.Database.GetOrCreateChannel(
 		request.Context(), channel,
 	)
@@ -988,10 +879,6 @@ func (hdlr *Handlers) executeJoin(
 		request, "JOIN", nick, channel, nil, memberIDs,
 	)
 
-	hdlr.deliverJoinNumerics(
-		request, clientID, sessionID, nick, channel, chID,
-	)
-
 	hdlr.respondJSON(writer, request,
 		map[string]string{
 			"status":  "joined",
@@ -1000,96 +887,19 @@ func (hdlr *Handlers) executeJoin(
 		http.StatusOK)
 }
 
-// deliverJoinNumerics sends RPL_TOPIC/RPL_NOTOPIC,
-// RPL_NAMREPLY, and RPL_ENDOFNAMES to the joining client.
-func (hdlr *Handlers) deliverJoinNumerics(
-	request *http.Request,
-	clientID, sessionID int64,
-	nick, channel string,
-	chID int64,
-) {
-	ctx := request.Context()
-
-	chInfo, err := hdlr.params.Database.GetChannelByName(
-		ctx, channel,
-	)
-	if err == nil {
-		_ = chInfo // chInfo is the ID; topic comes from DB.
-	}
-
-	// Get topic from channel info.
-	channels, listErr := hdlr.params.Database.ListChannels(
-		ctx, sessionID,
-	)
-
-	topic := ""
-
-	if listErr == nil {
-		for _, ch := range channels {
-			if ch.Name == channel {
-				topic = ch.Topic
-
-				break
-			}
-		}
-	}
-
-	if topic != "" {
-		hdlr.enqueueNumeric(
-			ctx, clientID, "332", nick,
-			[]string{channel}, topic,
-		)
-	} else {
-		hdlr.enqueueNumeric(
-			ctx, clientID, "331", nick,
-			[]string{channel}, "No topic is set",
-		)
-	}
-
-	// Get member list for NAMES reply.
-	members, memErr := hdlr.params.Database.ChannelMembers(
-		ctx, chID,
-	)
-
-	if memErr == nil && len(members) > 0 {
-		nicks := make([]string, 0, len(members))
-
-		for _, mem := range members {
-			nicks = append(nicks, mem.Nick)
-		}
-
-		hdlr.enqueueNumeric(
-			ctx, clientID, "353", nick,
-			[]string{"=", channel},
-			strings.Join(nicks, " "),
-		)
-	}
-
-	hdlr.enqueueNumeric(
-		ctx, clientID, "366", nick,
-		[]string{channel}, "End of /NAMES list",
-	)
-
-	hdlr.broker.Notify(sessionID)
-}
-
 func (hdlr *Handlers) handlePart(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick, target string,
 	body json.RawMessage,
 ) {
 	if target == "" {
-		hdlr.enqueueNumeric(
+		hdlr.respondError(
-			request.Context(), clientID,
+			writer, request,
-			"461", nick, []string{"PART"},
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
-		hdlr.broker.Notify(sessionID)
-		hdlr.respondJSON(writer, request,
-			map[string]string{"status": "error"},
-			http.StatusOK)
 
 		return
 	}
@@ -1103,15 +913,11 @@ func (hdlr *Handlers) handlePart(
 		request.Context(), channel,
 	)
 	if err != nil {
-		hdlr.enqueueNumeric(
+		hdlr.respondError(
-			request.Context(), clientID,
+			writer, request,
-			"403", nick, []string{channel},
+			"channel not found",
-			"No such channel",
+			http.StatusNotFound,
 		)
-		hdlr.broker.Notify(sessionID)
-		hdlr.respondJSON(writer, request,
-			map[string]string{"status": "error"},
-			http.StatusOK)
 
 		return
 	}
@@ -1155,16 +961,16 @@ func (hdlr *Handlers) handlePart(
 func (hdlr *Handlers) handleNick(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
+	sessionID int64,
 	nick string,
 	bodyLines func() []string,
 ) {
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"461", nick, []string{"NICK"},
+			"body required (new nick)",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -1173,10 +979,10 @@ func (hdlr *Handlers) handleNick(
 	newNick := strings.TrimSpace(lines[0])
 
 	if !validNickRe.MatchString(newNick) {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"432", nick, []string{newNick},
+			"invalid nick",
-			"Erroneous nickname",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -1192,27 +998,15 @@ func (hdlr *Handlers) handleNick(
 		return
 	}
 
-	hdlr.executeNickChange(
-		writer, request,
-		sessionID, clientID, nick, newNick,
-	)
-}
-
-func (hdlr *Handlers) executeNickChange(
-	writer http.ResponseWriter,
-	request *http.Request,
-	sessionID, clientID int64,
-	nick, newNick string,
-) {
 	err := hdlr.params.Database.ChangeNick(
 		request.Context(), sessionID, newNick,
 	)
 	if err != nil {
 		if strings.Contains(err.Error(), "UNIQUE") {
-			hdlr.respondIRCError(
+			hdlr.respondError(
-				writer, request, clientID, sessionID,
+				writer, request,
-				"433", nick, []string{newNick},
+				"nick already in use",
-				"Nickname is already in use",
+				http.StatusConflict,
 			)
 
 			return
@@ -1262,7 +1056,7 @@ func (hdlr *Handlers) broadcastNick(
 
 	dbID, _, _ := hdlr.params.Database.InsertMessage(
 		request.Context(), "NICK", oldNick, "",
-		nil, json.RawMessage(nickBody), nil,
+		json.RawMessage(nickBody), nil,
 	)
 
 	_ = hdlr.params.Database.EnqueueToSession(
@@ -1294,16 +1088,15 @@ func (hdlr *Handlers) broadcastNick(
 func (hdlr *Handlers) handleTopic(
 	writer http.ResponseWriter,
 	request *http.Request,
-	sessionID, clientID int64,
 	nick, target string,
 	body json.RawMessage,
 	bodyLines func() []string,
 ) {
 	if target == "" {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"461", nick, []string{"TOPIC"},
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -1311,55 +1104,28 @@ func (hdlr *Handlers) handleTopic(
 
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondIRCError(
+		hdlr.respondError(
-			writer, request, clientID, sessionID,
+			writer, request,
-			"461", nick, []string{"TOPIC"},
+			"body required (topic text)",
-			"Not enough parameters",
+			http.StatusBadRequest,
 		)
 
 		return
 	}
 
+	topic := strings.Join(lines, " ")
+
 	channel := target
 	if !strings.HasPrefix(channel, "#") {
 		channel = "#" + channel
 	}
 
-	chID, err := hdlr.params.Database.GetChannelByName(
+	err := hdlr.params.Database.SetTopic(
-		request.Context(), channel,
-	)
-	if err != nil {
-		hdlr.respondIRCError(
-			writer, request, clientID, sessionID,
-			"403", nick, []string{channel},
-			"No such channel",
-		)
-
-		return
-	}
-
-	hdlr.executeTopic(
-		writer, request,
-		sessionID, clientID, nick,
-		channel, strings.Join(lines, " "),
-		body, chID,
-	)
-}
-
-func (hdlr *Handlers) executeTopic(
-	writer http.ResponseWriter,
-	request *http.Request,
-	sessionID, clientID int64,
-	nick, channel, topic string,
-	body json.RawMessage,
-	chID int64,
-) {
-	setErr := hdlr.params.Database.SetTopic(
 		request.Context(), channel, topic,
 	)
-	if setErr != nil {
+	if err != nil {
 		hdlr.log.Error(
-			"set topic failed", "error", setErr,
+			"set topic failed", "error", err,
 		)
 		hdlr.respondError(
 			writer, request,
@@ -1370,6 +1136,19 @@ func (hdlr *Handlers) executeTopic(
 		return
 	}
 
+	chID, err := hdlr.params.Database.GetChannelByName(
+		request.Context(), channel,
+	)
+	if err != nil {
+		hdlr.respondError(
+			writer, request,
+			"channel not found",
+			http.StatusNotFound,
+		)
+
+		return
+	}
+
 	memberIDs, _ := hdlr.params.Database.GetChannelMemberIDs(
 		request.Context(), chID,
 	)
@@ -1378,12 +1157,6 @@ func (hdlr *Handlers) executeTopic(
 		request, "TOPIC", nick, channel, body, memberIDs,
 	)
 
-	hdlr.enqueueNumeric(
-		request.Context(), clientID,
-		"332", nick, []string{channel}, topic,
-	)
-	hdlr.broker.Notify(sessionID)
-
 	hdlr.respondJSON(writer, request,
 		map[string]string{
 			"status": "ok", "topic": topic,
@@ -1409,8 +1182,7 @@ func (hdlr *Handlers) handleQuit(
 
 	if len(channels) > 0 {
 		dbID, _, _ = hdlr.params.Database.InsertMessage(
-			request.Context(), "QUIT", nick, "",
+			request.Context(), "QUIT", nick, "", body, nil,
-			nil, body, nil,
 		)
 	}
 
@@ -1659,8 +1431,7 @@ func (hdlr *Handlers) cleanupUser(
 
 	if len(channels) > 0 {
 		quitDBID, _, _ = hdlr.params.Database.InsertMessage(
-			ctx, "QUIT", nick, "",
+			ctx, "QUIT", nick, "", nil, nil,
-			nil, nil, nil,
 		)
 	}
 

internal/handlers/api_test.go

@@ -462,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) {
@@ -486,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")
@@ -722,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -765,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,
 		)
 	}
 
@@ -794,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -817,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -847,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,
@@ -858,17 +768,8 @@ func TestNonMemberCannotSend(t *testing.T) {
 			bodyKey:    []string{"sneaky"},
 		},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusForbidden {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 403, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(aliceToken, lastID)
-
-	if !findNumeric(msgs, "442") {
-		t.Fatalf(
-			"expected ERR_NOTONCHANNEL (442), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -885,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,
 		)
 	}
 
@@ -917,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 {
+	if status != http.StatusNotFound {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 404, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "401") {
-		t.Fatalf(
-			"expected ERR_NOSUCHNICK (401), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -981,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 {
+	if status != http.StatusConflict {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 409, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "433") {
-		t.Fatalf(
-			"expected ERR_NICKNAMEINUSE (433), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -1005,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "432") {
-		t.Fatalf(
-			"expected ERR_ERRONEUSNICKNAME (432), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -1029,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -1081,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -1109,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "461") {
-		t.Fatalf(
-			"expected ERR_NEEDMOREPARAMS (461), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -1192,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 {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	msgs, _ := tserver.pollMessages(token, lastID)
-
-	if !findNumeric(msgs, "421") {
-		t.Fatalf(
-			"expected ERR_UNKNOWNCOMMAND (421), got %v",
-			msgs,
-		)
 	}
 }
 
@@ -1454,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(
+		tserver.url(apiMessages+"?timeout=1"),
-			"%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, 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,

web/dist/style.css

@@ -1,28 +1,40 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
+* {
-
+  margin: 0;
-:root {
+  padding: 0;
-  --bg: #1a1a2e;
+  box-sizing: border-box;
-  --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;
 }
 
-html, body, #root {
+:root {
+  --bg: #0a0e14;
+  --bg-secondary: #0d1117;
+  --bg-input: #161b22;
+  --bg-highlight: #1a2030;
+  --text: #c9d1d9;
+  --text-muted: #6e7681;
+  --accent: #58a6ff;
+  --accent-dim: #1f6feb;
+  --border: #21262d;
+  --nick: #79c0ff;
+  --timestamp: #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: 'Courier New', Courier, monospace;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
-  font-size: 14px;
+    Courier, monospace;
+  font-size: 13px;
   background: var(--bg);
   color: var(--text);
 }
@@ -57,15 +69,19 @@ html, body, #root {
   padding: 10px 24px;
   font-size: 16px;
   font-family: inherit;
-  background: var(--accent);
+  background: var(--accent-dim);
   border: none;
   color: white;
   border-radius: 4px;
   cursor: pointer;
 }
 
+.login-screen button:hover {
+  background: var(--accent);
+}
+
 .login-screen .error {
-  color: var(--accent);
+  color: var(--unread-bg);
 }
 
 .login-screen .motd {
@@ -89,36 +105,63 @@ html, body, #root {
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
   flex-shrink: 0;
-  align-items: center;
+  align-items: stretch;
+  min-height: 32px;
+}
+
+.tab-bar::-webkit-scrollbar {
+  height: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--border);
 }
 
 .tab {
-  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   color: var(--text-muted);
   user-select: none;
-  position: relative;
+  font-size: 12px;
+  gap: 6px;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .tab:hover {
   background: var(--tab-hover);
+  color: var(--text);
 }
 
 .tab.active {
   color: var(--text);
   border-bottom-color: var(--tab-active);
+  background: var(--bg-highlight);
+}
+
+.tab.server {
+  font-weight: bold;
+}
+
+.tab .tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tab .close-btn {
-  margin-left: 8px;
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: 14px;
+  line-height: 1;
+  flex-shrink: 0;
 }
 
 .tab .close-btn:hover {
-  color: var(--accent);
+  color: var(--unread-bg);
 }
 
 .tab .unread-badge {
@@ -127,19 +170,22 @@ html, body, #root {
   color: white;
   font-size: 10px;
   font-weight: bold;
-  padding: 1px 5px;
+  padding: 0 5px;
   border-radius: 8px;
-  margin-left: 6px;
   min-width: 16px;
   text-align: center;
+  line-height: 16px;
+  flex-shrink: 0;
 }
 
 /* Connection status */
 .connection-status {
-  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
   background: var(--warn);
-  color: #1a1a2e;
+  color: var(--bg);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: bold;
   white-space: nowrap;
   flex-shrink: 0;
@@ -147,7 +193,7 @@ html, body, #root {
 
 /* Topic bar */
 .topic-bar {
-  padding: 6px 12px;
+  padding: 4px 12px;
   background: var(--topic-bg);
   border-bottom: 1px solid var(--border);
   color: var(--text-muted);
@@ -158,6 +204,11 @@ html, body, #root {
   flex-shrink: 0;
 }
 
+.topic-bar .topic-label {
+  color: var(--accent);
+  font-weight: bold;
+}
+
 /* Content area */
 .content {
   display: flex;
@@ -171,147 +222,210 @@ html, body, #root {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-width: 0;
 }
 
 .messages {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 12px;
+  padding: 4px 0;
+}
+
+.messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.messages::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
 }
 
 .message {
-  padding: 2px 0;
+  padding: 1px 12px;
-  line-height: 1.4;
+  line-height: 1.5;
   word-wrap: break-word;
 }
 
+.message:hover {
+  background: var(--bg-highlight);
+}
+
 .message .timestamp {
   color: var(--timestamp);
-  font-size: 12px;
+  font-size: 11px;
-  margin-right: 8px;
+  margin-right: 6px;
 }
 
 .message .nick {
-  color: var(--nick);
   font-weight: bold;
-  margin-right: 8px;
+  margin-right: 6px;
 }
 
-.message .nick::before { content: '<'; }
+.message .nick::before {
-.message .nick::after { content: '>'; }
+  content: '<';
+  color: var(--text-muted);
+}
+
+.message .nick::after {
+  content: '>';
+  color: var(--text-muted);
+}
 
 .message.system {
-  color: var(--text-muted);
+  color: var(--system-color);
   font-style: italic;
 }
 
-.message.system .nick {
+.message.system .timestamp {
-  color: var(--text-muted);
+  color: var(--timestamp);
 }
 
-.message.system .nick::before,
+.message.system .content::before {
-.message.system .nick::after { content: ''; }
+  content: '*** ';
+}
 
-/* Input */
+.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: 10px 12px;
+  padding: 8px 8px;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 13px;
-  background: var(--bg-input);
+  background: transparent;
   border: none;
   color: var(--text);
   outline: none;
 }
 
-.input-bar button {
+.input-bar input::placeholder {
-  padding: 10px 16px;
+  color: var(--text-muted);
-  font-family: inherit;
-  background: var(--accent);
-  border: none;
-  color: white;
-  cursor: pointer;
 }
 
 /* User list */
 .user-list {
-  width: 160px;
+  width: 170px;
   background: var(--bg-secondary);
   border-left: 1px solid var(--border);
-  overflow-y: auto;
+  display: flex;
-  padding: 8px;
+  flex-direction: column;
   flex-shrink: 0;
 }
 
-.user-list h3 {
+.user-list-header {
+  padding: 6px 10px;
   color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
-  margin-bottom: 8px;
+  letter-spacing: 0.5px;
-  letter-spacing: 1px;
+  border-bottom: 1px solid var(--border);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.user-list-entries {
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 0;
+}
+
+.user-list-entries::-webkit-scrollbar {
+  width: 4px;
+}
+
+.user-list-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
 }
 
 .user-list .user {
-  padding: 3px 4px;
+  padding: 2px 10px;
-  color: var(--nick);
+  font-size: 12px;
-  font-size: 13px;
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
 }
 
 .user-list .user:hover {
   background: var(--tab-hover);
 }
 
-/* Server tab */
+.user-list .user.op {
+  color: var(--op-color);
+}
+
+.user-list .user.voice {
+  color: var(--voice-color);
+}
+
+/* Server tab messages */
 .server-messages {
   color: var(--text-muted);
-  padding: 12px;
+  padding: 8px 12px;
   white-space: pre-wrap;
   overflow-y: auto;
   flex: 1;
 }
 
-/* Channel join dialog */
+.server-messages .message {
-.join-dialog {
+  padding: 1px 0;
-  padding: 12px;
-  display: flex;
-  gap: 8px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  margin-left: auto;
 }
 
-.join-dialog input {
+.server-messages .message:hover {
-  padding: 6px 10px;
+  background: var(--bg-highlight);
-  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; }
+  .user-list {
-  .tab { padding: 6px 10px; font-size: 13px; }
+    display: none;
+  }
+
+  .tab {
+    padding: 5px 8px;
+    font-size: 11px;
+  }
+
+  .input-bar .input-nick {
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .input-bar input {
+    font-size: 12px;
+  }
 }

web/src/app.jsx

@@ -5,13 +5,17 @@ const API = '/api/v1';
 const POLL_TIMEOUT = 15;
 const RECONNECT_DELAY = 3000;
 const MEMBER_REFRESH_INTERVAL = 10000;
+const MAX_HISTORY = 100;
 
 function api(path, opts = {}) {
   const token = localStorage.getItem('neoirc_token');
-  const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
+  const headers = {
+    'Content-Type': 'application/json',
+    ...(opts.headers || {}),
+  };
   if (token) headers['Authorization'] = `Bearer ${token}`;
   const { signal, ...rest } = opts;
-  return fetch(API + path, { ...rest, headers, signal }).then(async r => {
+  return fetch(API + path, { ...rest, headers, signal }).then(async (r) => {
     const data = await r.json().catch(() => null);
     if (!r.ok) throw { status: r.status, data };
     return data;
@@ -20,12 +24,17 @@ function api(path, opts = {}) {
 
 function formatTime(ts) {
   const d = new Date(ts);
-  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  return d.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
 }
 
 function nickColor(nick) {
   let h = 0;
-  for (let i = 0; i < nick.length; i++) h = nick.charCodeAt(i) + ((h << 5) - h);
+  for (let i = 0; i < nick.length; i++)
+    h = nick.charCodeAt(i) + ((h << 5) - h);
   const hue = Math.abs(h) % 360;
   return `hsl(${hue}, 70%, 65%)`;
 }
@@ -38,13 +47,17 @@ function LoginScreen({ onLogin }) {
   const inputRef = useRef();
 
   useEffect(() => {
-    api('/server').then(s => {
+    api('/server')
+      .then((s) => {
         if (s.name) setServerName(s.name);
         if (s.motd) setMotd(s.motd);
-    }).catch(() => {});
+      })
+      .catch(() => {});
     const saved = localStorage.getItem('neoirc_token');
     if (saved) {
-      api('/state').then(u => onLogin(u.nick)).catch(() => localStorage.removeItem('neoirc_token'));
+      api('/state')
+        .then((u) => onLogin(u.nick))
+        .catch(() => localStorage.removeItem('neoirc_token'));
     }
     inputRef.current?.focus();
   }, []);
@@ -55,7 +68,7 @@ function LoginScreen({ onLogin }) {
     try {
       const res = await api('/session', {
         method: 'POST',
-        body: JSON.stringify({ nick: nick.trim() })
+        body: JSON.stringify({ nick: nick.trim() }),
       });
       localStorage.setItem('neoirc_token', res.token);
       onLogin(res.nick);
@@ -74,7 +87,7 @@ function LoginScreen({ onLogin }) {
           type="text"
           placeholder="Choose a nickname..."
           value={nick}
-          onInput={e => setNick(e.target.value)}
+          onInput={(e) => setNick(e.target.value)}
           maxLength={32}
           autoFocus
         />
@@ -94,15 +107,64 @@ function Message({ msg }) {
       </div>
     );
   }
+  if (msg.action) {
+    return (
+      <div class="message action">
+        <span class="timestamp">{formatTime(msg.ts)}</span>
+        <span class="content">
+          {'* '}
+          <span class="action-nick" style={{ color: nickColor(msg.from) }}>
+            {msg.from}
+          </span>{' '}
+          {msg.text}
+        </span>
+      </div>
+    );
+  }
   return (
     <div class="message">
       <span class="timestamp">{formatTime(msg.ts)}</span>
-      <span class="nick" style={{ color: nickColor(msg.from) }}>{msg.from}</span>
+      <span class="nick" style={{ color: nickColor(msg.from) }}>
+        {msg.from}
+      </span>
       <span class="content">{msg.text}</span>
     </div>
   );
 }
 
+function UserList({ members, userModes, onDM }) {
+  const sorted = [...members].sort((a, b) => {
+    const modeA = userModes[a.nick] || '';
+    const modeB = userModes[b.nick] || '';
+    const rankA = modeA === 'o' ? 0 : modeA === 'v' ? 1 : 2;
+    const rankB = modeB === 'o' ? 0 : modeB === 'v' ? 1 : 2;
+    if (rankA !== rankB) return rankA - rankB;
+    return a.nick.localeCompare(b.nick);
+  });
+
+  return (
+    <div class="user-list">
+      <div class="user-list-header">Users ({members.length})</div>
+      <div class="user-list-entries">
+        {sorted.map((u) => {
+          const mode = userModes[u.nick] || '';
+          const prefix = mode === 'o' ? '@' : mode === 'v' ? '+' : '';
+          return (
+            <div
+              class={`user ${mode === 'o' ? 'op' : mode === 'v' ? 'voice' : ''}`}
+              onClick={() => onDM(u.nick)}
+              title={u.nick}
+            >
+              {prefix}
+              {u.nick}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 function App() {
   const [loggedIn, setLoggedIn] = useState(false);
   const [nick, setNick] = useState('');
@@ -110,11 +172,13 @@ function App() {
   const [activeTab, setActiveTab] = useState(0);
   const [messages, setMessages] = useState({ Server: [] });
   const [members, setMembers] = useState({});
+  const [userModes, setUserModes] = useState({});
   const [topics, setTopics] = useState({});
   const [unread, setUnread] = useState({});
   const [input, setInput] = useState('');
-  const [joinInput, setJoinInput] = useState('');
   const [connected, setConnected] = useState(true);
+  const [cmdHistory, setCmdHistory] = useState([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
 
   const lastIdRef = useRef(0);
   const seenIdsRef = useRef(new Set());
@@ -125,69 +189,115 @@ function App() {
   const messagesEndRef = useRef();
   const inputRef = useRef();
 
-  useEffect(() => { tabsRef.current = tabs; }, [tabs]);
+  useEffect(() => {
-  useEffect(() => { activeTabRef.current = activeTab; }, [activeTab]);
+    tabsRef.current = tabs;
-  useEffect(() => { nickRef.current = nick; }, [nick]);
+  }, [tabs]);
+  useEffect(() => {
+    activeTabRef.current = activeTab;
+  }, [activeTab]);
+  useEffect(() => {
+    nickRef.current = nick;
+  }, [nick]);
 
   // Persist joined channels
   useEffect(() => {
-    const channels = tabs.filter(t => t.type === 'channel').map(t => t.name);
+    const channels = tabs.filter((t) => t.type === 'channel').map((t) => t.name);
     localStorage.setItem('neoirc_channels', JSON.stringify(channels));
   }, [tabs]);
 
   // Clear unread on tab switch
   useEffect(() => {
     const tab = tabs[activeTab];
-    if (tab) setUnread(prev => ({ ...prev, [tab.name]: 0 }));
+    if (tab) setUnread((prev) => ({ ...prev, [tab.name]: 0 }));
   }, [activeTab, tabs]);
 
   const addMessage = useCallback((tabName, msg) => {
     if (msg.id && seenIdsRef.current.has(msg.id)) return;
     if (msg.id) seenIdsRef.current.add(msg.id);
-    setMessages(prev => ({
+    setMessages((prev) => ({
       ...prev,
-      [tabName]: [...(prev[tabName] || []), msg]
+      [tabName]: [...(prev[tabName] || []), msg],
     }));
     const currentTab = tabsRef.current[activeTabRef.current];
     if (!currentTab || currentTab.name !== tabName) {
-      setUnread(prev => ({ ...prev, [tabName]: (prev[tabName] || 0) + 1 }));
+      setUnread((prev) => ({
+        ...prev,
+        [tabName]: (prev[tabName] || 0) + 1,
+      }));
     }
   }, []);
 
   const addSystemMessage = useCallback((tabName, text) => {
-    setMessages(prev => ({
+    setMessages((prev) => ({
       ...prev,
-      [tabName]: [...(prev[tabName] || []), {
+      [tabName]: [
+        ...(prev[tabName] || []),
+        {
           id: 'sys-' + Date.now() + '-' + Math.random(),
           ts: new Date().toISOString(),
           text,
-        system: true
+          system: true,
-      }]
+        },
+      ],
     }));
   }, []);
 
   const refreshMembers = useCallback((channel) => {
     const chName = channel.replace('#', '');
-    api(`/channels/${chName}/members`).then(m => {
+    api(`/channels/${chName}/members`)
-      setMembers(prev => ({ ...prev, [channel]: m }));
+      .then((m) => {
-    }).catch(() => {});
+        setMembers((prev) => ({ ...prev, [channel]: m }));
+      })
+      .catch(() => {});
   }, []);
 
-  const processMessage = useCallback((msg) => {
+  const parseNamesReply = useCallback((channel, namesStr) => {
+    // Parse 353 RPL_NAMREPLY body: "@op1 alice bob +voiced1"
+    const nicks = namesStr.trim().split(/\s+/);
+    const modes = {};
+    for (const entry of nicks) {
+      if (entry.startsWith('@')) {
+        modes[entry.slice(1)] = 'o';
+      } else if (entry.startsWith('+')) {
+        modes[entry.slice(1)] = 'v';
+      }
+      // plain nicks have no mode entry
+    }
+    setUserModes((prev) => ({
+      ...prev,
+      [channel]: { ...(prev[channel] || {}), ...modes },
+    }));
+  }, []);
+
+  const processMessage = useCallback(
+    (msg) => {
       const body = Array.isArray(msg.body) ? msg.body.join('\n') : '';
-    const base = { id: msg.id, ts: msg.ts, from: msg.from, to: msg.to, command: msg.command };
+      const base = {
+        id: msg.id,
+        ts: msg.ts,
+        from: msg.from,
+        to: msg.to,
+        command: msg.command,
+      };
+      const isAction = msg.meta && msg.meta.action;
 
       switch (msg.command) {
         case 'PRIVMSG':
         case 'NOTICE': {
-        const parsed = { ...base, text: body, system: false };
+          const parsed = {
+            ...base,
+            text: body,
+            system: false,
+            action: isAction,
+          };
           const target = msg.to;
           if (target && target.startsWith('#')) {
             addMessage(target, parsed);
           } else {
-          const dmPeer = msg.from === nickRef.current ? msg.to : msg.from;
+            const dmPeer =
-          setTabs(prev => {
+              msg.from === nickRef.current ? msg.to : msg.from;
-            if (!prev.find(t => t.type === 'dm' && t.name === dmPeer)) {
+            setTabs((prev) => {
+              if (!prev.find((t) => t.type === 'dm' && t.name === dmPeer)) {
                 return [...prev, { type: 'dm', name: dmPeer }];
               }
               return prev;
@@ -198,21 +308,23 @@ function App() {
         }
         case 'JOIN': {
           const text = `${msg.from} has joined ${msg.to}`;
-        if (msg.to) addMessage(msg.to, { ...base, text, system: true });
+          if (msg.to)
+            addMessage(msg.to, { ...base, text, system: true });
           if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to);
           break;
         }
         case 'PART': {
           const reason = body ? ': ' + body : '';
-        const text = `${msg.from} has left ${msg.to}${reason}`;
+          const text = `${msg.from} has parted ${msg.to}${reason}`;
-        if (msg.to) addMessage(msg.to, { ...base, text, system: true });
+          if (msg.to)
+            addMessage(msg.to, { ...base, text, system: true });
           if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to);
           break;
         }
         case 'QUIT': {
           const reason = body ? ': ' + body : '';
           const text = `${msg.from} has quit${reason}`;
-        tabsRef.current.forEach(tab => {
+          tabsRef.current.forEach((tab) => {
             if (tab.type === 'channel') {
               addMessage(tab.name, { ...base, text, system: true });
             }
@@ -222,14 +334,13 @@ function App() {
         case 'NICK': {
           const newNick = Array.isArray(msg.body) ? msg.body[0] : body;
           const text = `${msg.from} is now known as ${newNick}`;
-        tabsRef.current.forEach(tab => {
+          tabsRef.current.forEach((tab) => {
             if (tab.type === 'channel') {
               addMessage(tab.name, { ...base, text, system: true });
             }
           });
           if (msg.from === nickRef.current && newNick) setNick(newNick);
-        // Refresh members in all channels
+          tabsRef.current.forEach((tab) => {
-        tabsRef.current.forEach(tab => {
             if (tab.type === 'channel') refreshMembers(tab.name);
           });
           break;
@@ -238,19 +349,50 @@ function App() {
           const text = `${msg.from} set the topic: ${body}`;
           if (msg.to) {
             addMessage(msg.to, { ...base, text, system: true });
-          setTopics(prev => ({ ...prev, [msg.to]: body }));
+            setTopics((prev) => ({ ...prev, [msg.to]: body }));
           }
           break;
         }
+        case '332': {
+          // RPL_TOPIC — channel topic on join
+          const channel =
+            Array.isArray(msg.params) && msg.params.length > 0
+              ? msg.params[0]
+              : msg.to;
+          if (channel) {
+            setTopics((prev) => ({ ...prev, [channel]: body }));
+          }
+          break;
+        }
+        case '353': {
+          // RPL_NAMREPLY — parse user modes from names list
+          const channel =
+            Array.isArray(msg.params) && msg.params.length > 1
+              ? msg.params[1]
+              : msg.to;
+          if (channel && body) {
+            parseNamesReply(channel, body);
+          }
+          break;
+        }
+        case '366':
+          // RPL_ENDOFNAMES — ignore
+          break;
         case '375':
         case '372':
         case '376':
           addMessage('Server', { ...base, text: body, system: true });
           break;
         default:
-        addMessage('Server', { ...base, text: body || msg.command, system: true });
+          addMessage('Server', {
+            ...base,
+            text: body || msg.command,
+            system: true,
+          });
       }
-  }, [addMessage, refreshMembers]);
+    },
+    [addMessage, refreshMembers, parseNamesReply],
+  );
 
   // Long-poll loop
   useEffect(() => {
@@ -264,7 +406,7 @@ function App() {
           pollAbortRef.current = controller;
           const result = await api(
             `/messages?after=${lastIdRef.current}&timeout=${POLL_TIMEOUT}`,
-            { signal: controller.signal }
+            { signal: controller.signal },
           );
           if (!alive) break;
           setConnected(true);
@@ -278,13 +420,16 @@ function App() {
           if (!alive) break;
           if (err.name === 'AbortError') continue;
           setConnected(false);
-          await new Promise(r => setTimeout(r, RECONNECT_DELAY));
+          await new Promise((r) => setTimeout(r, RECONNECT_DELAY));
         }
       }
     };
 
     poll();
-    return () => { alive = false; pollAbortRef.current?.abort(); };
+    return () => {
+      alive = false;
+      pollAbortRef.current?.abort();
+    };
   }, [loggedIn, processMessage]);
 
   // Refresh members for active channel
@@ -293,7 +438,10 @@ function App() {
     const tab = tabs[activeTab];
     if (!tab || tab.type !== 'channel') return;
     refreshMembers(tab.name);
-    const iv = setInterval(() => refreshMembers(tab.name), MEMBER_REFRESH_INTERVAL);
+    const iv = setInterval(
+      () => refreshMembers(tab.name),
+      MEMBER_REFRESH_INTERVAL,
+    );
     return () => clearInterval(iv);
   }, [loggedIn, activeTab, tabs, refreshMembers]);
 
@@ -303,71 +451,100 @@ function App() {
   }, [messages, activeTab]);
 
   // Focus input on tab change
-  useEffect(() => { inputRef.current?.focus(); }, [activeTab]);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [activeTab]);
 
   // Fetch topic for active channel
   useEffect(() => {
     if (!loggedIn) return;
     const tab = tabs[activeTab];
     if (!tab || tab.type !== 'channel') return;
-    api('/channels').then(channels => {
+    api('/channels')
-      const ch = channels.find(c => c.name === tab.name);
+      .then((channels) => {
-      if (ch && ch.topic) setTopics(prev => ({ ...prev, [tab.name]: ch.topic }));
+        const ch = channels.find((c) => c.name === tab.name);
-    }).catch(() => {});
+        if (ch && ch.topic)
+          setTopics((prev) => ({ ...prev, [tab.name]: ch.topic }));
+      })
+      .catch(() => {});
   }, [loggedIn, activeTab, tabs]);
 
-  const onLogin = useCallback(async (userNick) => {
+  const onLogin = useCallback(
+    async (userNick) => {
       setNick(userNick);
       setLoggedIn(true);
       addSystemMessage('Server', `Connected as ${userNick}`);
       // Auto-rejoin saved channels
-    const saved = JSON.parse(localStorage.getItem('neoirc_channels') || '[]');
+      const saved = JSON.parse(
+        localStorage.getItem('neoirc_channels') || '[]',
+      );
       for (const ch of saved) {
         try {
-        await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: ch }) });
+          await api('/messages', {
-        setTabs(prev => {
+            method: 'POST',
-          if (prev.find(t => t.type === 'channel' && t.name === ch)) return prev;
+            body: JSON.stringify({ command: 'JOIN', to: ch }),
+          });
+          setTabs((prev) => {
+            if (prev.find((t) => t.type === 'channel' && t.name === ch))
+              return prev;
             return [...prev, { type: 'channel', name: ch }];
           });
         } catch (e) {
           // Channel may not exist anymore
         }
       }
-  }, [addSystemMessage]);
+    },
+    [addSystemMessage],
+  );
 
   const joinChannel = async (name) => {
     if (!name) return;
     name = name.trim();
     if (!name.startsWith('#')) name = '#' + name;
     try {
-      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: name }) });
+      await api('/messages', {
-      setTabs(prev => {
+        method: 'POST',
-        if (prev.find(t => t.type === 'channel' && t.name === name)) return prev;
+        body: JSON.stringify({ command: 'JOIN', to: name }),
+      });
+      setTabs((prev) => {
+        if (prev.find((t) => t.type === 'channel' && t.name === name))
+          return prev;
         return [...prev, { type: 'channel', name }];
       });
       setActiveTab(tabs.length);
       // Load history
       try {
-        const hist = await api(`/history?target=${encodeURIComponent(name)}&limit=50`);
+        const hist = await api(
+          `/history?target=${encodeURIComponent(name)}&limit=50`,
+        );
         if (Array.isArray(hist)) {
           for (const m of hist) processMessage(m);
         }
       } catch (e) {
         // History may be empty
       }
-      setJoinInput('');
     } catch (err) {
-      addSystemMessage('Server', `Failed to join ${name}: ${err.data?.error || 'error'}`);
+      addSystemMessage(
+        'Server',
+        `Failed to join ${name}: ${err.data?.error || 'error'}`,
+      );
     }
   };
 
-  const partChannel = async (name) => {
+  const partChannel = async (name, reason) => {
     try {
-      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PART', to: name }) });
+      const payload = { command: 'PART', to: name };
+      if (reason) payload.body = [reason];
+      await api('/messages', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
     } catch (e) {
       // Ignore
     }
-    setTabs(prev => prev.filter(t => !(t.type === 'channel' && t.name === name)));
+    setTabs((prev) =>
+      prev.filter((t) => !(t.type === 'channel' && t.name === name)),
+    );
     setActiveTab(0);
   };
 
@@ -376,68 +553,284 @@ function App() {
     if (tab.type === 'channel') {
       partChannel(tab.name);
     } else if (tab.type === 'dm') {
-      setTabs(prev => prev.filter((_, i) => i !== idx));
+      setTabs((prev) => prev.filter((_, i) => i !== idx));
       if (activeTab >= idx) setActiveTab(Math.max(0, activeTab - 1));
     }
   };
 
   const openDM = (targetNick) => {
-    setTabs(prev => {
+    setTabs((prev) => {
-      if (prev.find(t => t.type === 'dm' && t.name === targetNick)) return prev;
+      if (prev.find((t) => t.type === 'dm' && t.name === targetNick))
+        return prev;
       return [...prev, { type: 'dm', name: targetNick }];
     });
-    const idx = tabs.findIndex(t => t.type === 'dm' && t.name === targetNick);
+    const idx = tabs.findIndex(
+      (t) => t.type === 'dm' && t.name === targetNick,
+    );
     setActiveTab(idx >= 0 ? idx : tabs.length);
   };
 
+  const handleCommand = async (text) => {
+    const parts = text.split(' ');
+    const cmd = parts[0].toLowerCase();
+    const tab = tabs[activeTab];
+
+    switch (cmd) {
+      case '/join':
+        if (parts[1]) joinChannel(parts[1]);
+        else
+          addSystemMessage(
+            tab?.name || 'Server',
+            'Usage: /join #channel',
+          );
+        break;
+
+      case '/part': {
+        if (tab?.type === 'channel') {
+          const reason = parts.slice(1).join(' ') || '';
+          partChannel(tab.name, reason);
+        } else {
+          addSystemMessage(
+            tab?.name || 'Server',
+            'Not in a channel',
+          );
+        }
+        break;
+      }
+
+      case '/msg':
+        if (parts[1] && parts.slice(2).join(' ')) {
+          const target = parts[1];
+          const msgBody = parts.slice(2).join(' ');
+          try {
+            await api('/messages', {
+              method: 'POST',
+              body: JSON.stringify({
+                command: 'PRIVMSG',
+                to: target,
+                body: [msgBody],
+              }),
+            });
+            openDM(target);
+          } catch (err) {
+            addSystemMessage(
+              'Server',
+              `DM failed: ${err.data?.error || 'error'}`,
+            );
+          }
+        } else {
+          addSystemMessage(
+            tab?.name || 'Server',
+            'Usage: /msg <nick> <message>',
+          );
+        }
+        break;
+
+      case '/me':
+        if (tab && tab.type !== 'server') {
+          const actionText = parts.slice(1).join(' ');
+          if (actionText) {
+            try {
+              await api('/messages', {
+                method: 'POST',
+                body: JSON.stringify({
+                  command: 'PRIVMSG',
+                  to: tab.name,
+                  body: [actionText],
+                  meta: { action: true },
+                }),
+              });
+            } catch (err) {
+              addSystemMessage(
+                tab.name,
+                `Action failed: ${err.data?.error || 'error'}`,
+              );
+            }
+          } else {
+            addSystemMessage(tab.name, 'Usage: /me <action>');
+          }
+        }
+        break;
+
+      case '/nick':
+        if (parts[1]) {
+          try {
+            await api('/messages', {
+              method: 'POST',
+              body: JSON.stringify({
+                command: 'NICK',
+                body: [parts[1]],
+              }),
+            });
+          } catch (err) {
+            addSystemMessage(
+              'Server',
+              `Nick change failed: ${err.data?.error || 'error'}`,
+            );
+          }
+        } else {
+          addSystemMessage(
+            tab?.name || 'Server',
+            'Usage: /nick <newnick>',
+          );
+        }
+        break;
+
+      case '/topic':
+        if (tab?.type === 'channel') {
+          const topicText = parts.slice(1).join(' ');
+          try {
+            await api('/messages', {
+              method: 'POST',
+              body: JSON.stringify({
+                command: 'TOPIC',
+                to: tab.name,
+                body: [topicText],
+              }),
+            });
+          } catch (err) {
+            addSystemMessage(
+              tab.name,
+              `Topic failed: ${err.data?.error || 'error'}`,
+            );
+          }
+        } else {
+          addSystemMessage(
+            tab?.name || 'Server',
+            'Not in a channel',
+          );
+        }
+        break;
+
+      case '/mode':
+        if (tab?.type === 'channel' && parts.length >= 2) {
+          const modeTarget = parts[1].startsWith('#')
+            ? parts[1]
+            : tab.name;
+          const modeParams = parts[1].startsWith('#')
+            ? parts.slice(2)
+            : parts.slice(1);
+          try {
+            await api('/messages', {
+              method: 'POST',
+              body: JSON.stringify({
+                command: 'MODE',
+                to: modeTarget,
+                params: modeParams,
+              }),
+            });
+          } catch (err) {
+            addSystemMessage(
+              tab.name,
+              `Mode failed: ${err.data?.error || 'error'}`,
+            );
+          }
+        } else {
+          addSystemMessage(
+            tab?.name || 'Server',
+            'Usage: /mode [#channel] <+/-mode> [nick]',
+          );
+        }
+        break;
+
+      case '/quit': {
+        const quitMsg = parts.slice(1).join(' ');
+        try {
+          const payload = { command: 'QUIT' };
+          if (quitMsg) payload.body = [quitMsg];
+          await api('/messages', {
+            method: 'POST',
+            body: JSON.stringify(payload),
+          });
+        } catch (e) {
+          // Ignore
+        }
+        localStorage.removeItem('neoirc_token');
+        window.location.reload();
+        break;
+      }
+
+      case '/help':
+        addSystemMessage(
+          tab?.name || 'Server',
+          'Commands: /join #channel, /part [reason], /msg nick message, ' +
+            '/me action, /nick newnick, /topic text, /mode [#channel] +/-mode [nick], ' +
+            '/quit [reason], /help',
+        );
+        break;
+
+      default:
+        addSystemMessage(
+          tab?.name || 'Server',
+          `Unknown command: ${cmd} — Type /help for available commands`,
+        );
+    }
+  };
+
   const sendMessage = async () => {
     const text = input.trim();
     if (!text) return;
+
+    // Add to command history
+    setCmdHistory((prev) => {
+      const next = [text, ...prev];
+      return next.slice(0, MAX_HISTORY);
+    });
+    setHistoryIdx(-1);
     setInput('');
+
     const tab = tabs[activeTab];
-    if (!tab || tab.type === 'server') return;
 
     if (text.startsWith('/')) {
-      const parts = text.split(' ');
+      await handleCommand(text);
-      const cmd = parts[0].toLowerCase();
-      if (cmd === '/join' && parts[1]) { joinChannel(parts[1]); return; }
-      if (cmd === '/part') { if (tab.type === 'channel') partChannel(tab.name); return; }
-      if (cmd === '/msg' && parts[1] && parts.slice(2).join(' ')) {
-        const target = parts[1];
-        const body = parts.slice(2).join(' ');
-        try {
-          await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: target, body: [body] }) });
-          openDM(target);
-        } catch (err) {
-          addSystemMessage('Server', `DM failed: ${err.data?.error || 'error'}`);
-        }
       return;
     }
-      if (cmd === '/nick' && parts[1]) {
+
-        try {
+    if (!tab || tab.type === 'server') {
-          await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'NICK', body: [parts[1]] }) });
+      addSystemMessage(
-        } catch (err) {
+        'Server',
-          addSystemMessage('Server', `Nick change failed: ${err.data?.error || 'error'}`);
+        'Cannot send messages to the server tab. Join a channel with /join #channel',
-        }
+      );
-        return;
-      }
-      if (cmd === '/topic' && tab.type === 'channel') {
-        const topicText = parts.slice(1).join(' ');
-        try {
-          await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'TOPIC', to: tab.name, body: [topicText] }) });
-        } catch (err) {
-          addSystemMessage('Server', `Topic failed: ${err.data?.error || 'error'}`);
-        }
-        return;
-      }
-      addSystemMessage('Server', `Unknown command: ${cmd}`);
       return;
     }
 
     try {
-      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: tab.name, body: [text] }) });
+      await api('/messages', {
+        method: 'POST',
+        body: JSON.stringify({
+          command: 'PRIVMSG',
+          to: tab.name,
+          body: [text],
+        }),
+      });
     } catch (err) {
-      addSystemMessage(tab.name, `Send failed: ${err.data?.error || 'error'}`);
+      addSystemMessage(
+        tab.name,
+        `Send failed: ${err.data?.error || 'error'}`,
+      );
+    }
+  };
+
+  const handleInputKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      sendMessage();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (cmdHistory.length > 0) {
+        const nextIdx = Math.min(historyIdx + 1, cmdHistory.length - 1);
+        setHistoryIdx(nextIdx);
+        setInput(cmdHistory[nextIdx]);
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (historyIdx > 0) {
+        const nextIdx = historyIdx - 1;
+        setHistoryIdx(nextIdx);
+        setInput(cmdHistory[nextIdx]);
+      } else {
+        setHistoryIdx(-1);
+        setInput('');
+      }
     }
   };
 
@@ -446,72 +839,87 @@ function App() {
   const currentTab = tabs[activeTab] || tabs[0];
   const currentMessages = messages[currentTab.name] || [];
   const currentMembers = members[currentTab.name] || [];
+  const currentUserModes = userModes[currentTab.name] || {};
   const currentTopic = topics[currentTab.name] || '';
 
   return (
     <div class="app">
       <div class="tab-bar">
-        {!connected && <div class="connection-status">⚠ Reconnecting...</div>}
+        {!connected && (
+          <div class="connection-status">⚠ Reconnecting...</div>
+        )}
         {tabs.map((tab, i) => (
           <div
-            class={`tab ${i === activeTab ? 'active' : ''}`}
+            class={`tab ${i === activeTab ? 'active' : ''} ${tab.type}`}
             onClick={() => setActiveTab(i)}
           >
+            <span class="tab-name">
               {tab.type === 'dm' ? `→${tab.name}` : tab.name}
+            </span>
             {unread[tab.name] > 0 && i !== activeTab && (
               <span class="unread-badge">{unread[tab.name]}</span>
             )}
             {tab.type !== 'server' && (
-              <span class="close-btn" onClick={(e) => { e.stopPropagation(); closeTab(i); }}>×</span>
+              <span
+                class="close-btn"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeTab(i);
+                }}
+              >
+                ×
+              </span>
             )}
           </div>
         ))}
-        <div class="join-dialog">
-          <input
-            placeholder="#channel"
-            value={joinInput}
-            onInput={e => setJoinInput(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && joinChannel(joinInput)}
-          />
-          <button onClick={() => joinChannel(joinInput)}>Join</button>
-        </div>
       </div>
 
-      {currentTab.type === 'channel' && currentTopic && (
+      {currentTab.type === 'channel' && (
-        <div class="topic-bar" title={currentTopic}>{currentTopic}</div>
+        <div class="topic-bar" title={currentTopic}>
+          <span class="topic-label">Topic:</span>{' '}
+          {currentTopic || '(no topic set)'}
+        </div>
       )}
 
       <div class="content">
         <div class="messages-pane">
-          <div class={currentTab.type === 'server' ? 'server-messages' : 'messages'}>
+          <div
-            {currentMessages.map(m => <Message msg={m} />)}
+            class={
+              currentTab.type === 'server'
+                ? 'server-messages'
+                : 'messages'
+            }
+          >
+            {currentMessages.map((m) => (
+              <Message msg={m} />
+            ))}
             <div ref={messagesEndRef} />
           </div>
-          {currentTab.type !== 'server' && (
-            <div class="input-bar">
-              <input
-                ref={inputRef}
-                placeholder={`Message ${currentTab.name}...`}
-                value={input}
-                onInput={e => setInput(e.target.value)}
-                onKeyDown={e => e.key === 'Enter' && sendMessage()}
-              />
-              <button onClick={sendMessage}>Send</button>
-            </div>
-          )}
         </div>
 
         {currentTab.type === 'channel' && (
-          <div class="user-list">
+          <UserList
-            <h3>Users ({currentMembers.length})</h3>
+            members={currentMembers}
-            {currentMembers.map(u => (
+            userModes={currentUserModes}
-              <div class="user" onClick={() => openDM(u.nick)} style={{ color: nickColor(u.nick) }}>
+            onDM={openDM}
-                {u.nick}
+          />
-              </div>
-            ))}
-          </div>
         )}
       </div>
+
+      <div class="input-bar">
+        <span class="input-nick">{nick}</span>
+        <input
+          ref={inputRef}
+          placeholder={
+            currentTab.type === 'server'
+              ? 'Type /join #channel to get started...'
+              : `Message ${currentTab.name}...`
+          }
+          value={input}
+          onInput={(e) => setInput(e.target.value)}
+          onKeyDown={handleInputKeyDown}
+        />
+      </div>
     </div>
   );
 }

web/src/style.css

@@ -1,28 +1,40 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
+* {
-
+  margin: 0;
-:root {
+  padding: 0;
-  --bg: #1a1a2e;
+  box-sizing: border-box;
-  --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;
 }
 
-html, body, #root {
+:root {
+  --bg: #0a0e14;
+  --bg-secondary: #0d1117;
+  --bg-input: #161b22;
+  --bg-highlight: #1a2030;
+  --text: #c9d1d9;
+  --text-muted: #6e7681;
+  --accent: #58a6ff;
+  --accent-dim: #1f6feb;
+  --border: #21262d;
+  --nick: #79c0ff;
+  --timestamp: #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: 'Courier New', Courier, monospace;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
-  font-size: 14px;
+    Courier, monospace;
+  font-size: 13px;
   background: var(--bg);
   color: var(--text);
 }
@@ -57,15 +69,19 @@ html, body, #root {
   padding: 10px 24px;
   font-size: 16px;
   font-family: inherit;
-  background: var(--accent);
+  background: var(--accent-dim);
   border: none;
   color: white;
   border-radius: 4px;
   cursor: pointer;
 }
 
+.login-screen button:hover {
+  background: var(--accent);
+}
+
 .login-screen .error {
-  color: var(--accent);
+  color: var(--unread-bg);
 }
 
 .login-screen .motd {
@@ -89,36 +105,63 @@ html, body, #root {
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
   flex-shrink: 0;
-  align-items: center;
+  align-items: stretch;
+  min-height: 32px;
+}
+
+.tab-bar::-webkit-scrollbar {
+  height: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--border);
 }
 
 .tab {
-  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   color: var(--text-muted);
   user-select: none;
-  position: relative;
+  font-size: 12px;
+  gap: 6px;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .tab:hover {
   background: var(--tab-hover);
+  color: var(--text);
 }
 
 .tab.active {
   color: var(--text);
   border-bottom-color: var(--tab-active);
+  background: var(--bg-highlight);
+}
+
+.tab.server {
+  font-weight: bold;
+}
+
+.tab .tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tab .close-btn {
-  margin-left: 8px;
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: 14px;
+  line-height: 1;
+  flex-shrink: 0;
 }
 
 .tab .close-btn:hover {
-  color: var(--accent);
+  color: var(--unread-bg);
 }
 
 .tab .unread-badge {
@@ -127,19 +170,22 @@ html, body, #root {
   color: white;
   font-size: 10px;
   font-weight: bold;
-  padding: 1px 5px;
+  padding: 0 5px;
   border-radius: 8px;
-  margin-left: 6px;
   min-width: 16px;
   text-align: center;
+  line-height: 16px;
+  flex-shrink: 0;
 }
 
 /* Connection status */
 .connection-status {
-  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
   background: var(--warn);
-  color: #1a1a2e;
+  color: var(--bg);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: bold;
   white-space: nowrap;
   flex-shrink: 0;
@@ -147,7 +193,7 @@ html, body, #root {
 
 /* Topic bar */
 .topic-bar {
-  padding: 6px 12px;
+  padding: 4px 12px;
   background: var(--topic-bg);
   border-bottom: 1px solid var(--border);
   color: var(--text-muted);
@@ -158,6 +204,11 @@ html, body, #root {
   flex-shrink: 0;
 }
 
+.topic-bar .topic-label {
+  color: var(--accent);
+  font-weight: bold;
+}
+
 /* Content area */
 .content {
   display: flex;
@@ -171,147 +222,210 @@ html, body, #root {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-width: 0;
 }
 
 .messages {
   flex: 1;
   overflow-y: auto;
-  padding: 8px 12px;
+  padding: 4px 0;
+}
+
+.messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.messages::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
 }
 
 .message {
-  padding: 2px 0;
+  padding: 1px 12px;
-  line-height: 1.4;
+  line-height: 1.5;
   word-wrap: break-word;
 }
 
+.message:hover {
+  background: var(--bg-highlight);
+}
+
 .message .timestamp {
   color: var(--timestamp);
-  font-size: 12px;
+  font-size: 11px;
-  margin-right: 8px;
+  margin-right: 6px;
 }
 
 .message .nick {
-  color: var(--nick);
   font-weight: bold;
-  margin-right: 8px;
+  margin-right: 6px;
 }
 
-.message .nick::before { content: '<'; }
+.message .nick::before {
-.message .nick::after { content: '>'; }
+  content: '<';
+  color: var(--text-muted);
+}
+
+.message .nick::after {
+  content: '>';
+  color: var(--text-muted);
+}
 
 .message.system {
-  color: var(--text-muted);
+  color: var(--system-color);
   font-style: italic;
 }
 
-.message.system .nick {
+.message.system .timestamp {
-  color: var(--text-muted);
+  color: var(--timestamp);
 }
 
-.message.system .nick::before,
+.message.system .content::before {
-.message.system .nick::after { content: ''; }
+  content: '*** ';
+}
 
-/* Input */
+.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: 10px 12px;
+  padding: 8px 8px;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 13px;
-  background: var(--bg-input);
+  background: transparent;
   border: none;
   color: var(--text);
   outline: none;
 }
 
-.input-bar button {
+.input-bar input::placeholder {
-  padding: 10px 16px;
+  color: var(--text-muted);
-  font-family: inherit;
-  background: var(--accent);
-  border: none;
-  color: white;
-  cursor: pointer;
 }
 
 /* User list */
 .user-list {
-  width: 160px;
+  width: 170px;
   background: var(--bg-secondary);
   border-left: 1px solid var(--border);
-  overflow-y: auto;
+  display: flex;
-  padding: 8px;
+  flex-direction: column;
   flex-shrink: 0;
 }
 
-.user-list h3 {
+.user-list-header {
+  padding: 6px 10px;
   color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
-  margin-bottom: 8px;
+  letter-spacing: 0.5px;
-  letter-spacing: 1px;
+  border-bottom: 1px solid var(--border);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.user-list-entries {
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 0;
+}
+
+.user-list-entries::-webkit-scrollbar {
+  width: 4px;
+}
+
+.user-list-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
 }
 
 .user-list .user {
-  padding: 3px 4px;
+  padding: 2px 10px;
-  color: var(--nick);
+  font-size: 12px;
-  font-size: 13px;
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
 }
 
 .user-list .user:hover {
   background: var(--tab-hover);
 }
 
-/* Server tab */
+.user-list .user.op {
+  color: var(--op-color);
+}
+
+.user-list .user.voice {
+  color: var(--voice-color);
+}
+
+/* Server tab messages */
 .server-messages {
   color: var(--text-muted);
-  padding: 12px;
+  padding: 8px 12px;
   white-space: pre-wrap;
   overflow-y: auto;
   flex: 1;
 }
 
-/* Channel join dialog */
+.server-messages .message {
-.join-dialog {
+  padding: 1px 0;
-  padding: 12px;
-  display: flex;
-  gap: 8px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  margin-left: auto;
 }
 
-.join-dialog input {
+.server-messages .message:hover {
-  padding: 6px 10px;
+  background: var(--bg-highlight);
-  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; }
+  .user-list {
-  .tab { padding: 6px 10px; font-size: 13px; }
+    display: none;
+  }
+
+  .tab {
+    padding: 5px 8px;
+    font-size: 11px;
+  }
+
+  .input-bar .input-nick {
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .input-bar input {
+    font-size: 12px;
+  }
 }