# Discord Chat Client Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

---

## ▶ Continuation State (last updated 2026-04-28)

Pick up here if resuming on a new device or session.

### Task Status

| # | Task | Status | Notes |
|---|------|--------|-------|
| 1 | API utilities (`http.js` + `ws.js`) | ✅ Done | Error logging added, empty-token guard added |
| 2 | AuthPage real API wiring | ✅ Done | `doLogin` helper extracted, loading guard on Enter key |
| 3 | AppContext global state + WS events | ✅ Done | Race condition fix in `selectConnection`, `sendMessage` rollback added |
| 4 | MainApp two-column layout | ✅ Done | |
| 5 | HubRow + UserBar | ✅ Done | `colorToCss` extracted to `src/utils/color.js` (shared), stub buttons `disabled` |
| 6 | ConnectionItem + ConnectionList + Sidebar | ✅ Done | `h-full` on Sidebar, search fallback for unresolved users, `min-w-0` truncate fix |
| 7 | MessageItem + MessageList + MessageInput + ChatArea | 🔄 Created, review **interrupted** — needs spec + quality review before proceeding |
| 8 | End-to-end verification | ⬜ Pending | Run `pnpm dev` in `client/`, manual browser smoke test (see task for steps) |

### Extra file created (not in original plan)

- `client/src/utils/color.js` — shared `colorToCss([r,g,b,a])` utility used by UserBar, ConnectionItem, MessageItem, ChatArea

### How to resume

**Option A — continue subagent-driven development (recommended):**
1. Open project in Claude Code: `cd /home/ffus/Projects/go-socket`
2. Use skill `superpowers:subagent-driven-development`
3. Start with Task 7 review: dispatch spec reviewer then code quality reviewer for the four files listed under Task 7
4. Then dispatch Task 8 (verification) — requires running `pnpm dev` and testing in browser

**Option B — inline continuation:**
1. Open project in Claude Code
2. Say: "Continue the plan at `docs/superpowers/plans/2026-04-28-discord-client.md`. Tasks 1–6 done, Task 7 files created but review was interrupted. Resume from Task 7 spec review."

### Key decisions made during implementation (not in plan)

- `colorToCss` shared in `src/utils/color.js` — do NOT redefine it per-component
- `sendMessage` reads `userId` fresh from localStorage at call time (not via closure) to avoid stale capture
- `selectConnection` clears messages immediately before fetch and guards result with `selectedIdRef`
- WS_DM handler compares `event.receiver` (connection UUID) to `selectedIdRef.current` — this is **correct**, `message.Receiver = conn.Id` in server code
- Stub buttons (HubRow `+`, UserBar gear) use `disabled` attribute
- `state.connections` is always initialized as `[]` in context — no null guard needed on `.filter()`

---

**Goal:** Build a Discord-inspired DM chat UI in the React client, wired to the go-socket backend via REST and WebSocket.

**Architecture:** Two-column layout (280px sidebar + flex chat). Global state in a React Context + useReducer. Thin fetch wrapper auto-injects the `token` header. WebSocket is a singleton module with per-event-type handlers. No test framework is installed — each task verifies in the browser via `pnpm dev`.

**Tech Stack:** React 19, React Router DOM 7, Tailwind CSS 4, Vite 8. Backend at `http://localhost:8080`.

---

## File Map

**Created:**
- `client/src/api/http.js` — fetch wrapper, auto-injects token
- `client/src/api/ws.js` — WebSocket singleton, event dispatch
- `client/src/context/AppContext.jsx` — global state, data loading, WS wiring
- `client/src/components/HubRow.jsx` — stub hub icons row
- `client/src/components/UserBar.jsx` — bottom current-user bar
- `client/src/components/ConnectionItem.jsx` — single DM contact row
- `client/src/components/ConnectionList.jsx` — filtered list + search input
- `client/src/components/Sidebar.jsx` — assembles sidebar panels
- `client/src/components/MessageItem.jsx` — single chat message
- `client/src/components/MessageList.jsx` — scrollable message history
- `client/src/components/MessageInput.jsx` — text input + send
- `client/src/components/ChatArea.jsx` — assembles chat panel

**Modified:**
- `client/src/components/AuthPage.jsx` — wire up real login/register API
- `client/src/components/MainApp.jsx` — replace stub with full layout

---

## Key API Facts

- All REST requests send token as a plain header named `token` (not Bearer)
- `POST /token` body (form-encoded): `username`, `password` → `{ token, userId }`
- `POST /user` body: `username`, `password` → 201 Created
- `GET /connections` → `Connection[]`
- `GET /user?targetid=<uuid>` → `{ name, pronouns, description, avatarType, profileBackgroundType, createdAt, color: [r,g,b,a] }`
- `GET /connections/unreadmessages?connections=uuid,uuid` → `uint32[]` (same order)
- `GET /connection/messages?connectionid=<uuid>` → `Message[]` (oldest first)
- `POST /connection/message` body: `connectionid`, `msgContent` → 202 (no body)
- WebSocket: connect to `ws://localhost:8080/ws`, on open send `{"token":"..."}`, server replies `{"type":0,"event":{"success":true,"error":""}}`

## Key Data Shapes

```js
// Connection
{ id, createdAt, requestorId, recipientId, userWantingToElevate, state }
// state: 0 = Stranger, 1 = Friend

// Message
{ id, content, attachedFile, createdAt, sender /* user UUID */, receiver /* connection UUID */ }

// User (from GET /user)
{ name, pronouns, description, avatarType, profileBackgroundType, createdAt, color: [r,g,b,a] }

// WS envelope
{ type: 0-9, event: any }
// type 1 (DirectMessage): event = Message
// type 2 (ConnectionCreated): event = Connection
// type 3 (ConnectionDeleted): event = "uuid-string"
// type 4 (ConnectionElevated): event = { id, newState: 1 }
// type 5 (ConnectionDeElevated): event = { id, newState: 0 }
```

---

## Task 1: API Utilities

**Files:**
- Create: `client/src/api/http.js`
- Create: `client/src/api/ws.js`

- [ ] **Step 1: Create `client/src/api/http.js`**

```js
const BASE = 'http://localhost:8080'

export async function apiFetch(method, path, { body, query } = {}) {
  const token = localStorage.getItem('token') || ''
  let url = BASE + path
  if (query) url += '?' + new URLSearchParams(query)
  const opts = { method, headers: { token } }
  if (body) opts.body = new URLSearchParams(body)
  const res = await fetch(url, opts)
  if (!res.ok) throw new Error(`${method} ${path} → ${res.status}`)
  const text = await res.text()
  try { return JSON.parse(text) } catch { return text }
}
```

- [ ] **Step 2: Create `client/src/api/ws.js`**

```js
let socket = null
const handlers = {}

export function wsOnEvent(type, fn) {
  handlers[type] = fn
}

export function wsConnect() {
  if (socket) return
  const token = localStorage.getItem('token') || ''
  socket = new WebSocket('ws://localhost:8080/ws')
  socket.onopen = () => socket.send(JSON.stringify({ token }))
  socket.onmessage = (e) => {
    try {
      const msg = JSON.parse(e.data)
      handlers[msg.type]?.(msg.event)
    } catch {}
  }
  socket.onclose = () => { socket = null }
}

export function wsDisconnect() {
  socket?.close()
  socket = null
}
```

---

## Task 2: AuthPage — Wire Up Real API

**Files:**
- Modify: `client/src/components/AuthPage.jsx`

The login response is `{ token, userId }`. Both must be saved to localStorage — `userId` is needed to identify "my" messages and to fetch own profile.

- [ ] **Step 1: Replace `client/src/components/AuthPage.jsx` with wired version**

```jsx
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

const BASE = 'http://localhost:8080'

export default function AuthPage() {
  const navigate = useNavigate()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  async function handleLogin() {
    setError('')
    setLoading(true)
    try {
      const res = await fetch(`${BASE}/token`, {
        method: 'POST',
        body: new URLSearchParams({ username, password }),
      })
      if (!res.ok) { setError('Invalid credentials'); return }
      const { token, userId } = await res.json()
      localStorage.setItem('token', token)
      localStorage.setItem('userId', userId)
      navigate('/')
    } catch {
      setError('Could not reach server')
    } finally {
      setLoading(false)
    }
  }

  async function handleRegister() {
    setError('')
    setLoading(true)
    try {
      const res = await fetch(`${BASE}/user`, {
        method: 'POST',
        body: new URLSearchParams({ username, password }),
      })
      if (!res.ok) { setError('Registration failed'); return }
      await handleLogin()
    } catch {
      setError('Could not reach server')
    } finally {
      setLoading(false)
    }
  }

  function onKey(e) {
    if (e.key === 'Enter') handleLogin()
  }

  return (
    <div className="flex items-center justify-center h-screen">
      <div className="flex flex-col gap-4 p-8 bg-gray-800 rounded-lg w-80">
        <h1 className="text-white text-xl font-semibold text-center">go-socket</h1>
        <input
          className="bg-gray-700 text-white px-4 py-2 rounded outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="Username"
          value={username}
          onChange={e => setUsername(e.target.value)}
          onKeyDown={onKey}
          autoComplete="username"
        />
        <input
          className="bg-gray-700 text-white px-4 py-2 rounded outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="Password"
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          onKeyDown={onKey}
          autoComplete="current-password"
        />
        {error && <p className="text-red-400 text-sm">{error}</p>}
        <div className="flex justify-end gap-2 mt-2">
          <button
            onClick={handleRegister}
            disabled={loading}
            className="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 text-white disabled:opacity-50"
          >
            Register
          </button>
          <button
            onClick={handleLogin}
            disabled={loading}
            className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
          >
            Login
          </button>
        </div>
      </div>
    </div>
  )
}
```

- [ ] **Step 2: Verify in browser**

Run `pnpm dev` in `client/`. Navigate to `http://localhost:5173/auth`.
- Enter valid credentials → should redirect to `/` (currently shows "Main App")
- Enter wrong credentials → should show "Invalid credentials"
- Click Register with a new username → should create account and redirect

---

## Task 3: AppContext — Global State + Data Loading + WS Events

**Files:**
- Create: `client/src/context/AppContext.jsx`

`userMap` is a `{ [userId]: userDetails }` dict populated by fetching `GET /user` for each connection's "other" participant. The `selectedIdRef` keeps the WS handler in sync with the current selection without stale closures.

- [ ] **Step 1: Create `client/src/context/AppContext.jsx`**

```jsx
import { createContext, useContext, useReducer, useEffect, useRef, useCallback } from 'react'
import { apiFetch } from '../api/http'
import { wsConnect, wsDisconnect, wsOnEvent } from '../api/ws'

const Ctx = createContext(null)

const WS_AUTH = 0
const WS_DM = 1
const WS_CONN_CREATED = 2
const WS_CONN_DELETED = 3
const WS_CONN_ELEVATED = 4
const WS_CONN_DEELEVATED = 5
const WS_USER_PROFILE = 6

const initial = {
  connections: [],
  userMap: {},
  unread: {},
  selectedId: null,
  messages: [],
  currentUser: null,
}

function reducer(state, action) {
  switch (action.type) {
    case 'SET_CONNECTIONS':
      return { ...state, connections: action.payload }
    case 'SET_USER_MAP':
      return { ...state, userMap: { ...state.userMap, ...action.payload } }
    case 'SET_UNREAD':
      return { ...state, unread: action.payload }
    case 'SET_CURRENT_USER':
      return { ...state, currentUser: action.payload }
    case 'SELECT_CONNECTION':
      return {
        ...state,
        selectedId: action.id,
        unread: { ...state.unread, [action.id]: 0 },
      }
    case 'SET_MESSAGES':
      return { ...state, messages: action.payload }
    case 'APPEND_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] }
    case 'BUMP_UNREAD':
      return {
        ...state,
        unread: { ...state.unread, [action.id]: (state.unread[action.id] || 0) + 1 },
      }
    case 'ADD_CONNECTION':
      return { ...state, connections: [action.payload, ...state.connections] }
    case 'REMOVE_CONNECTION':
      return {
        ...state,
        connections: state.connections.filter(c => c.id !== action.id),
        selectedId: state.selectedId === action.id ? null : state.selectedId,
        messages: state.selectedId === action.id ? [] : state.messages,
      }
    case 'UPDATE_CONN_STATE':
      return {
        ...state,
        connections: state.connections.map(c =>
          c.id === action.id ? { ...c, state: action.newState } : c
        ),
      }
    case 'PATCH_USER':
      return {
        ...state,
        userMap: {
          ...state.userMap,
          [action.userId]: { ...state.userMap[action.userId], ...action.changes },
        },
      }
    default:
      return state
  }
}

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initial)
  const selectedIdRef = useRef(null)
  const userId = localStorage.getItem('userId')

  useEffect(() => {
    selectedIdRef.current = state.selectedId
  }, [state.selectedId])

  useEffect(() => {
    async function init() {
      const me = await apiFetch('GET', '/user', { query: { targetid: userId } })
      dispatch({ type: 'SET_CURRENT_USER', payload: { ...me, id: userId } })

      const conns = await apiFetch('GET', '/connections')
      dispatch({ type: 'SET_CONNECTIONS', payload: conns })

      const otherIds = [...new Set(
        conns.map(c => c.requestorId === userId ? c.recipientId : c.requestorId)
      )]
      const entries = await Promise.all(
        otherIds.map(async id => {
          const u = await apiFetch('GET', '/user', { query: { targetid: id } })
          return [id, u]
        })
      )
      dispatch({ type: 'SET_USER_MAP', payload: Object.fromEntries(entries) })

      if (conns.length > 0) {
        const ids = conns.map(c => c.id).join(',')
        const counts = await apiFetch('GET', '/connections/unreadmessages', { query: { connections: ids } })
        const unreadMap = {}
        conns.forEach((c, i) => { unreadMap[c.id] = counts[i] || 0 })
        dispatch({ type: 'SET_UNREAD', payload: unreadMap })
      }

      wsOnEvent(WS_DM, (event) => {
        if (event.receiver === selectedIdRef.current) {
          dispatch({ type: 'APPEND_MESSAGE', payload: event })
        } else {
          dispatch({ type: 'BUMP_UNREAD', id: event.receiver })
        }
      })

      wsOnEvent(WS_CONN_CREATED, async (event) => {
        dispatch({ type: 'ADD_CONNECTION', payload: event })
        const otherId = event.requestorId === userId ? event.recipientId : event.requestorId
        const u = await apiFetch('GET', '/user', { query: { targetid: otherId } })
        dispatch({ type: 'SET_USER_MAP', payload: { [otherId]: u } })
      })

      wsOnEvent(WS_CONN_DELETED, (id) => {
        dispatch({ type: 'REMOVE_CONNECTION', id })
      })

      wsOnEvent(WS_CONN_ELEVATED, ({ id, newState }) => {
        dispatch({ type: 'UPDATE_CONN_STATE', id, newState })
      })

      wsOnEvent(WS_CONN_DEELEVATED, ({ id, newState }) => {
        dispatch({ type: 'UPDATE_CONN_STATE', id, newState })
      })

      // event = { userId, profileChangeList: { pronouns?, description?, color? } }
      wsOnEvent(WS_USER_PROFILE, ({ userId: uid, profileChangeList }) => {
        dispatch({ type: 'PATCH_USER', userId: uid, changes: profileChangeList })
      })
      // types 7 (avatar) and 8 (profilebg) don't affect our color-circle display — ignore

      wsConnect()
    }

    init()
    return () => wsDisconnect()
  }, [])

  const selectConnection = useCallback(async (id) => {
    dispatch({ type: 'SELECT_CONNECTION', id })
    const msgs = await apiFetch('GET', '/connection/messages', { query: { connectionid: id } })
    dispatch({ type: 'SET_MESSAGES', payload: msgs })
  }, [])

  const sendMessage = useCallback(async (connectionId, content) => {
    const optimistic = {
      id: crypto.randomUUID(),
      content,
      attachedFile: '',
      createdAt: new Date().toISOString(),
      sender: userId,
      receiver: connectionId,
    }
    dispatch({ type: 'APPEND_MESSAGE', payload: optimistic })
    await apiFetch('POST', '/connection/message', { body: { connectionid: connectionId, msgContent: content } })
  }, [userId])

  return (
    <Ctx.Provider value={{ state, selectConnection, sendMessage, userId }}>
      {children}
    </Ctx.Provider>
  )
}

export function useApp() {
  return useContext(Ctx)
}
```

---

## Task 4: MainApp — Two-Column Layout

**Files:**
- Modify: `client/src/components/MainApp.jsx`

- [ ] **Step 1: Replace `client/src/components/MainApp.jsx`**

```jsx
import { AppProvider } from '../context/AppContext'
import Sidebar from './Sidebar'
import ChatArea from './ChatArea'

export default function MainApp() {
  return (
    <AppProvider>
      <div className="flex h-screen bg-gray-900 text-white overflow-hidden">
        <Sidebar />
        <ChatArea />
      </div>
    </AppProvider>
  )
}
```

---

## Task 5: HubRow and UserBar

**Files:**
- Create: `client/src/components/HubRow.jsx`
- Create: `client/src/components/UserBar.jsx`

- [ ] **Step 1: Create `client/src/components/HubRow.jsx`**

```jsx
export default function HubRow() {
  return (
    <div className="flex items-center gap-2 px-3 py-2 border-b border-gray-700/60">
      <button
        title="Add hub"
        className="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center text-gray-400 hover:text-white text-lg leading-none transition-colors"
      >
        +
      </button>
    </div>
  )
}
```

- [ ] **Step 2: Create `client/src/components/UserBar.jsx`**

```jsx
import { useApp } from '../context/AppContext'

function colorToCss(color) {
  if (!color) return '#4b5563'
  return `rgb(${color[0]},${color[1]},${color[2]})`
}

export default function UserBar() {
  const { state } = useApp()
  const user = state.currentUser

  return (
    <div className="flex items-center gap-2 px-3 py-3 border-t border-gray-700/60 bg-gray-900/80">
      <div
        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
        style={{ backgroundColor: colorToCss(user?.color) }}
      >
        {user?.name?.[0]?.toUpperCase() ?? '?'}
      </div>
      <span className="text-sm font-medium text-gray-200 truncate flex-1">
        {user?.name ?? '…'}
      </span>
      <button
        title="Settings (coming soon)"
        className="text-gray-500 hover:text-gray-300 transition-colors text-base px-1"
      >
        ⚙
      </button>
    </div>
  )
}
```

---

## Task 6: ConnectionItem, ConnectionList, Sidebar

**Files:**
- Create: `client/src/components/ConnectionItem.jsx`
- Create: `client/src/components/ConnectionList.jsx`
- Create: `client/src/components/Sidebar.jsx`

- [ ] **Step 1: Create `client/src/components/ConnectionItem.jsx`**

The "other user" is whichever of `requestorId`/`recipientId` isn't our `userId`.

```jsx
import { useApp } from '../context/AppContext'

function colorToCss(color) {
  if (!color) return '#4b5563'
  return `rgb(${color[0]},${color[1]},${color[2]})`
}

export default function ConnectionItem({ conn }) {
  const { state, selectConnection, userId } = useApp()
  const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
  const other = state.userMap[otherId]
  const unread = state.unread[conn.id] || 0
  const isSelected = state.selectedId === conn.id
  const isFriend = conn.state === 1

  return (
    <button
      onClick={() => selectConnection(conn.id)}
      className={`w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors
        ${isSelected ? 'bg-gray-700' : 'hover:bg-gray-700/50'}`}
    >
      <div
        className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
        style={{ backgroundColor: colorToCss(other?.color) }}
      >
        {other?.name?.[0]?.toUpperCase() ?? '?'}
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-1">
          <span className="text-sm font-medium text-gray-100 truncate">
            {other?.name ?? otherId.slice(0, 8)}
          </span>
          {isFriend && (
            <span className="text-[10px] text-green-400 shrink-0">● friend</span>
          )}
        </div>
        {other?.pronouns && (
          <span className="text-xs text-gray-500 truncate block">{other.pronouns}</span>
        )}
      </div>

      {unread > 0 && (
        <span className="shrink-0 bg-red-500 text-white text-xs font-bold rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1">
          {unread > 99 ? '99+' : unread}
        </span>
      )}
    </button>
  )
}
```

- [ ] **Step 2: Create `client/src/components/ConnectionList.jsx`**

```jsx
import { useState } from 'react'
import { useApp } from '../context/AppContext'
import ConnectionItem from './ConnectionItem'

export default function ConnectionList() {
  const { state, userId } = useApp()
  const [search, setSearch] = useState('')

  const filtered = state.connections.filter(conn => {
    if (!search) return true
    const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
    const other = state.userMap[otherId]
    return other?.name?.toLowerCase().includes(search.toLowerCase())
  })

  return (
    <div className="flex flex-col flex-1 min-h-0">
      <div className="px-3 py-2">
        <input
          className="w-full bg-gray-700 text-white text-sm px-3 py-1.5 rounded-md outline-none placeholder-gray-500 focus:ring-1 focus:ring-gray-500"
          placeholder="Search…"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
      </div>

      <div className="flex-1 overflow-y-auto px-2 py-1 space-y-0.5">
        {filtered.length === 0 && (
          <p className="text-gray-600 text-xs text-center py-4">No contacts</p>
        )}
        {filtered.map(conn => (
          <ConnectionItem key={conn.id} conn={conn} />
        ))}
      </div>
    </div>
  )
}
```

- [ ] **Step 3: Create `client/src/components/Sidebar.jsx`**

```jsx
import HubRow from './HubRow'
import ConnectionList from './ConnectionList'
import UserBar from './UserBar'

export default function Sidebar() {
  return (
    <div className="w-[280px] shrink-0 flex flex-col bg-gray-900 border-r border-gray-700/60">
      <HubRow />
      <ConnectionList />
      <UserBar />
    </div>
  )
}
```

---

## Task 7: MessageItem, MessageList, MessageInput, ChatArea

**Files:**
- Create: `client/src/components/MessageItem.jsx`
- Create: `client/src/components/MessageList.jsx`
- Create: `client/src/components/MessageInput.jsx`
- Create: `client/src/components/ChatArea.jsx`

- [ ] **Step 1: Create `client/src/components/MessageItem.jsx`**

Messages are displayed in Discord style: avatar + sender name on first message of a group, compact rows for consecutive same-sender messages.

```jsx
import { useApp } from '../context/AppContext'

function colorToCss(color) {
  if (!color) return '#4b5563'
  return `rgb(${color[0]},${color[1]},${color[2]})`
}

function formatTime(iso) {
  const d = new Date(iso)
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

export default function MessageItem({ msg, showHeader }) {
  const { state, userId } = useApp()
  const isMe = msg.sender === userId
  const sender = isMe ? state.currentUser : state.userMap[msg.sender]

  return (
    <div className={`flex gap-3 px-4 ${showHeader ? 'mt-4' : 'mt-0.5'} group`}>
      {showHeader ? (
        <div
          className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0 mt-0.5"
          style={{ backgroundColor: colorToCss(sender?.color) }}
        >
          {sender?.name?.[0]?.toUpperCase() ?? '?'}
        </div>
      ) : (
        <div className="w-9 shrink-0" />
      )}

      <div className="flex-1 min-w-0">
        {showHeader && (
          <div className="flex items-baseline gap-2 mb-0.5">
            <span
              className="text-sm font-semibold"
              style={{ color: colorToCss(sender?.color) }}
            >
              {sender?.name ?? msg.sender.slice(0, 8)}
            </span>
            <span className="text-xs text-gray-500">{formatTime(msg.createdAt)}</span>
          </div>
        )}
        <p className="text-sm text-gray-200 break-words leading-relaxed">{msg.content}</p>
      </div>

      <span className="text-[10px] text-gray-600 opacity-0 group-hover:opacity-100 self-center shrink-0 transition-opacity">
        {formatTime(msg.createdAt)}
      </span>
    </div>
  )
}
```

- [ ] **Step 2: Create `client/src/components/MessageList.jsx`**

Groups consecutive messages from the same sender so that only the first shows the header (avatar + name).

```jsx
import { useEffect, useRef } from 'react'
import { useApp } from '../context/AppContext'
import MessageItem from './MessageItem'

export default function MessageList() {
  const { state } = useApp()
  const bottomRef = useRef(null)

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [state.messages])

  return (
    <div className="flex-1 overflow-y-auto py-2">
      {state.messages.map((msg, i) => {
        const prev = state.messages[i - 1]
        const showHeader = !prev || prev.sender !== msg.sender
        return <MessageItem key={msg.id} msg={msg} showHeader={showHeader} />
      })}
      <div ref={bottomRef} />
    </div>
  )
}
```

- [ ] **Step 3: Create `client/src/components/MessageInput.jsx`**

```jsx
import { useState, useRef } from 'react'
import { useApp } from '../context/AppContext'

export default function MessageInput() {
  const { state, sendMessage } = useApp()
  const [text, setText] = useState('')
  const textareaRef = useRef(null)

  async function handleSend() {
    const trimmed = text.trim()
    if (!trimmed || !state.selectedId) return
    setText('')
    await sendMessage(state.selectedId, trimmed)
    textareaRef.current?.focus()
  }

  function onKeyDown(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

  if (!state.selectedId) return null

  return (
    <div className="px-4 py-3 border-t border-gray-700/60">
      <div className="flex items-end gap-2 bg-gray-700 rounded-lg px-4 py-2">
        <textarea
          ref={textareaRef}
          className="flex-1 bg-transparent text-white text-sm resize-none outline-none placeholder-gray-500 max-h-36 leading-relaxed"
          rows={1}
          placeholder="Message…"
          value={text}
          onChange={e => setText(e.target.value)}
          onKeyDown={onKeyDown}
        />
        <button
          onClick={handleSend}
          disabled={!text.trim()}
          className="text-blue-400 hover:text-blue-300 disabled:text-gray-600 transition-colors pb-0.5 shrink-0"
          title="Send (Enter)"
        >
          ↵
        </button>
      </div>
    </div>
  )
}
```

- [ ] **Step 4: Create `client/src/components/ChatArea.jsx`**

```jsx
import { useApp } from '../context/AppContext'
import MessageList from './MessageList'
import MessageInput from './MessageInput'

function colorToCss(color) {
  if (!color) return '#4b5563'
  return `rgb(${color[0]},${color[1]},${color[2]})`
}

export default function ChatArea() {
  const { state, userId } = useApp()
  const conn = state.connections.find(c => c.id === state.selectedId)

  let header = null
  if (conn) {
    const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
    const other = state.userMap[otherId]
    header = (
      <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-700/60 shrink-0">
        <div
          className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
          style={{ backgroundColor: colorToCss(other?.color) }}
        >
          {other?.name?.[0]?.toUpperCase() ?? '?'}
        </div>
        <div>
          <p className="text-sm font-semibold text-white">{other?.name ?? '…'}</p>
          {other?.pronouns && (
            <p className="text-xs text-gray-500">{other.pronouns}</p>
          )}
        </div>
        {conn.state === 1 && (
          <span className="ml-auto text-xs text-green-400">● friend</span>
        )}
      </div>
    )
  }

  return (
    <div className="flex-1 flex flex-col bg-gray-800 min-w-0">
      {header}
      {state.selectedId ? (
        <>
          <MessageList />
          <MessageInput />
        </>
      ) : (
        <div className="flex-1 flex items-center justify-center text-gray-600 text-sm">
          Select a conversation
        </div>
      )}
    </div>
  )
}
```

---

## Task 8: End-to-End Verification

- [ ] **Step 1: Start the dev server**

In `client/`:
```bash
pnpm dev
```

Expected: Vite starts, no compile errors, app available at `http://localhost:5173`.

- [ ] **Step 2: Verify auth flow**

Navigate to `http://localhost:5173/auth`.
- Log in with valid credentials → redirected to `/`
- Sidebar shows your connections with avatar circles and names
- Unread badges appear for connections with unread messages

- [ ] **Step 3: Verify DM loading**

Click any connection in the sidebar.
- Right panel shows the contact name in the header
- Message history loads (oldest → newest, scrolled to bottom)
- Unread badge clears on the selected connection

- [ ] **Step 4: Verify sending**

Type a message in the input and press Enter.
- Message appears immediately (optimistic append)
- Opening a second browser tab as the recipient user → new message arrives via WebSocket without refresh

- [ ] **Step 5: Verify WS events**

From the second tab, send a message back.
- First tab receives it live in the open chat
- If a different connection is selected, the unread badge increments on the correct sidebar item

- [ ] **Step 6: Verify new connection**

Use the debug client (`machine-client/index.html`) or the second tab to create a new connection with the logged-in user.
- The new contact appears at the top of the sidebar without refresh