kokoirc 0.2.0

package/src/ui/ErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import React, { createElement } from "react"
+
+interface Props {
+  children: React.ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+class ErrorBoundaryImpl extends React.Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error("[ErrorBoundary] Uncaught error:", error)
+    if (info.componentStack) {
+      console.error("[ErrorBoundary] Component stack:", info.componentStack)
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <box width="100%" height="100%" flexDirection="column" justifyContent="center" alignItems="center" backgroundColor="#1a1b26">
+          <text><span fg="#f7768e"><strong>kIRC crashed</strong></span></text>
+          <text><span fg="#a9b1d6">{this.state.error.message}</span></text>
+          <text><span fg="#565f89">Check console for details. Press Ctrl+C to exit.</span></text>
+        </box>
+      )
+    }
+    return this.props.children
+  }
+}
+
+/** Error boundary wrapper — uses createElement to bypass OpenTUI's JSX class component types. */
+export function ErrorBoundary({ children }: Props): React.ReactNode {
+  return createElement(ErrorBoundaryImpl, null, children)
+}

package/src/ui/chat/ChatView.tsx

@@ -0,0 +1,39 @@
+import { useRef, useEffect } from "react"
+import { useStore } from "@/core/state/store"
+import { MessageLine } from "./MessageLine"
+import type { ScrollBoxRenderable } from "@opentui/core"
+
+export function ChatView() {
+  const activeBufferId = useStore((s) => s.activeBufferId)
+  const buffersMap = useStore((s) => s.buffers)
+  const connectionsMap = useStore((s) => s.connections)
+  const colors = useStore((s) => s.theme?.colors)
+  const scrollRef = useRef<ScrollBoxRenderable>(null)
+
+  const buffer = activeBufferId ? buffersMap.get(activeBufferId) ?? null : null
+  const currentNick = buffer ? connectionsMap.get(buffer.connectionId)?.nick ?? "" : ""
+
+  // Snap to bottom when switching buffers
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.stickyScroll = true
+      scrollRef.current.scrollTo(scrollRef.current.scrollHeight)
+    }
+  }, [activeBufferId])
+
+  if (!buffer) {
+    return (
+      <box flexGrow={1} justifyContent="center" alignItems="center">
+        <text><span fg={colors?.fg_dim ?? "#292e42"}>No active buffer</span></text>
+      </box>
+    )
+  }
+
+  return (
+    <scrollbox ref={scrollRef} height="100%" stickyScroll stickyStart="bottom">
+      {buffer.messages.map((msg) => (
+        <MessageLine key={msg.id} message={msg} isOwnNick={msg.nick === currentNick} />
+      ))}
+    </scrollbox>
+  )
+}

package/src/ui/chat/MessageLine.tsx

@@ -0,0 +1,92 @@
+import { useStore } from "@/core/state/store"
+import { resolveAbstractions, parseFormatString, StyledText } from "@/core/theme"
+import { formatTimestamp } from "@/core/irc/formatting"
+import type { Message } from "@/types"
+import type { StyledSpan } from "@/types/theme"
+
+interface Props {
+  message: Message
+  isOwnNick: boolean
+}
+
+export function MessageLine({ message, isOwnNick }: Props) {
+  const theme = useStore((s) => s.theme)
+  const config = useStore((s) => s.config)
+  const abstracts = theme?.abstracts ?? {}
+  const messages: Record<string, string> = theme?.formats.messages ?? {}
+
+  // Timestamp
+  const ts = formatTimestamp(message.timestamp, config?.general.timestamp_format ?? "%H:%M:%S")
+  const tsFormat = abstracts.timestamp ?? "$*"
+  const tsResolved = resolveAbstractions(tsFormat, abstracts)
+  const tsSpans = parseFormatString(tsResolved, [ts])
+
+  let msgSpans: StyledSpan[]
+
+  if (message.type === "event") {
+    const events = theme?.formats.events ?? {}
+    if (message.eventKey && events[message.eventKey]) {
+      const format = events[message.eventKey]
+      const resolved = resolveAbstractions(format, abstracts)
+      msgSpans = parseFormatString(resolved, message.eventParams ?? [])
+    } else {
+      // System events (whois, help, status) — text may contain inline %Z codes
+      msgSpans = parseFormatString(message.text, [])
+    }
+  } else {
+    // Message/action/notice
+    const nickWidth = config?.display.nick_column_width ?? 8
+    const alignment = config?.display.nick_alignment ?? "right"
+    const rawNickMode = message.nickMode ?? ""
+    const nick = message.nick ?? ""
+    const maxLen = config?.display.nick_max_length ?? nickWidth
+    const truncate = config?.display.nick_truncation ?? true
+
+    // Truncate nick if needed
+    let displayNick = nick
+    if (truncate && displayNick.length > maxLen) {
+      displayNick = displayNick.slice(0, maxLen)
+    }
+
+    // Pad the combined mode+nick so alignment covers the whole column
+    // e.g., width=8, mode="@", nick="brudny" → " @brudny" (right-aligned)
+    const totalLen = rawNickMode.length + displayNick.length
+    const padSize = Math.max(0, nickWidth - totalLen)
+    let nickMode: string
+    if (alignment === "right") {
+      nickMode = " ".repeat(padSize) + rawNickMode
+    } else if (alignment === "center") {
+      const left = Math.floor(padSize / 2)
+      nickMode = " ".repeat(left) + rawNickMode
+      displayNick = displayNick + " ".repeat(padSize - left)
+    } else {
+      nickMode = rawNickMode
+      displayNick = displayNick + " ".repeat(padSize)
+    }
+
+    let msgFormatKey: string
+    if (message.type === "action") {
+      msgFormatKey = "action"
+    } else if (isOwnNick) {
+      msgFormatKey = "own_msg"
+    } else if (message.highlight) {
+      msgFormatKey = "pubmsg_mention"
+    } else {
+      msgFormatKey = "pubmsg"
+    }
+
+    const msgFormat = messages[msgFormatKey] ?? "$0 $1"
+    const resolved = resolveAbstractions(msgFormat, abstracts)
+    msgSpans = parseFormatString(resolved, [displayNick, message.text, nickMode])
+  }
+
+  // Combine timestamp + space + message into single text element
+  const separator: StyledSpan = { text: " ", bold: false, italic: false, underline: false, dim: false }
+  const allSpans = [...tsSpans, separator, ...msgSpans]
+
+  return (
+    <box width="100%">
+      <StyledText spans={allSpans} />
+    </box>
+  )
+}

package/src/ui/hooks/useStatusbarColors.ts

@@ -0,0 +1,23 @@
+import { useStore } from "@/core/state/store"
+
+/** Resolve statusbar color: config override → theme fallback */
+function c(configVal: string, themeFallback: string | undefined, hardFallback: string): string {
+  return configVal || themeFallback || hardFallback
+}
+
+export function useStatusbarColors() {
+  const sb = useStore((s) => s.config?.statusbar)
+  const colors = useStore((s) => s.theme?.colors)
+  return {
+    bg: c(sb?.background ?? "", colors?.bg_alt, "#16161e"),
+    accent: c(sb?.accent_color ?? "", colors?.accent, "#7aa2f7"),
+    text: c(sb?.text_color ?? "", colors?.fg, "#a9b1d6"),
+    muted: c(sb?.muted_color ?? "", colors?.fg_muted, "#565f89"),
+    dim: c(sb?.dim_color ?? "", colors?.fg_dim, "#292e42"),
+    promptColor: c(sb?.prompt_color ?? "", colors?.accent, "#7aa2f7"),
+    inputColor: c(sb?.input_color ?? "", colors?.fg, "#c0caf5"),
+    cursorColor: c(sb?.cursor_color ?? "", colors?.cursor, "#7aa2f7"),
+    prompt: sb?.prompt ?? "[$channel] > ",
+    separator: sb?.separator ?? " | ",
+  }
+}

package/src/ui/input/CommandInput.tsx

@@ -0,0 +1,273 @@
+import { useState, useRef, useCallback, useEffect } from "react"
+import { useStore } from "@/core/state/store"
+import { parseCommand, executeCommand, getCommandNames, getSubcommands } from "@/core/commands"
+import { getClient } from "@/core/irc"
+import { useKeyboard, useRenderer } from "@opentui/react"
+import { useStatusbarColors } from "@/ui/hooks/useStatusbarColors"
+import type { InputRenderable } from "@opentui/core"
+
+export function CommandInput() {
+  const renderer = useRenderer()
+  const [value, setValue] = useState("")
+  const [history, setHistory] = useState<string[]>([])
+  const [historyIndex, setHistoryIndex] = useState(-1)
+  const inputRef = useRef<InputRenderable>(null)
+
+  // Auto-copy selected text to clipboard, then clear selection and refocus input
+  useEffect(() => {
+    const handleSelection = (selection: any) => {
+      if (!selection || selection.isDragging) return
+      const text = selection.getSelectedText()
+      if (text) {
+        renderer.copyToClipboardOSC52(text)
+      }
+      // Clear selection highlight and return focus to input for immediate Cmd+V
+      renderer.clearSelection()
+      if (inputRef.current) inputRef.current.focus()
+    }
+    renderer.on("selection", handleSelection)
+    return () => { renderer.off("selection", handleSelection) }
+  }, [renderer])
+
+  // Tab completion state
+  const tabState = useRef<{
+    prefix: string       // the partial text typed by user
+    matches: string[]    // sorted matching candidates
+    index: number        // current position in matches cycle
+    textBefore: string   // text before the word being completed
+    isStartOfLine: boolean
+    isCommand: boolean   // true = completing /command, false = completing nick
+    isSubcommand: boolean // true = completing subcommand after /command
+  } | null>(null)
+  const isTabCompleting = useRef(false)
+
+  const buffer = useStore((s) => s.activeBufferId ? s.buffers.get(s.activeBufferId) : null)
+  const conn = useStore((s) => {
+    const buf = s.activeBufferId ? s.buffers.get(s.activeBufferId) : null
+    return buf ? s.connections.get(buf.connectionId) : null
+  })
+  const addMessage = useStore((s) => s.addMessage)
+  const sb = useStatusbarColors()
+
+  const handleSubmit = useCallback((submittedValue?: string | unknown) => {
+    const text = typeof submittedValue === "string" ? submittedValue : value
+    const trimmed = text.trim()
+    if (!trimmed) return
+
+    setHistory((h) => [trimmed, ...h].slice(0, 100))
+    setHistoryIndex(-1)
+    setValue("")
+    // Force clear via ref in case React state sync is delayed
+    if (inputRef.current) {
+      inputRef.current.value = ""
+      inputRef.current.focus()
+    }
+
+    if (!buffer) return
+
+    const parsed = parseCommand(trimmed)
+
+    if (parsed) {
+      executeCommand(parsed, buffer.connectionId)
+    } else {
+      const client = getClient(buffer.connectionId)
+      if (client) {
+        client.say(buffer.name, trimmed)
+        const conn = useStore.getState().connections.get(buffer.connectionId)
+        addMessage(buffer.id, {
+          id: crypto.randomUUID(),
+          timestamp: new Date(),
+          type: "message",
+          nick: conn?.nick ?? "",
+          nickMode: "",
+          text: trimmed,
+          highlight: false,
+        })
+      }
+    }
+  }, [value, buffer, addMessage])
+
+  const tryNickCompletion = (currentValue: string) => {
+    if (!buffer) return null
+    const nicks = Array.from(buffer.users.keys())
+    if (nicks.length === 0) return null
+
+    const spaceIdx = currentValue.lastIndexOf(" ")
+    const textBefore = spaceIdx >= 0 ? currentValue.slice(0, spaceIdx + 1) : ""
+    const partial = spaceIdx >= 0 ? currentValue.slice(spaceIdx + 1) : currentValue
+    const isStartOfLine = spaceIdx < 0
+
+    if (!partial) return null
+
+    const lower = partial.toLowerCase()
+    const matches = nicks
+      .filter((n) => n.toLowerCase().startsWith(lower))
+      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+
+    if (matches.length === 0) return null
+
+    const s = { prefix: partial, matches, index: 0, textBefore, isStartOfLine, isCommand: false, isSubcommand: false }
+    tabState.current = s
+    return s
+  }
+
+  const handleTabCompletion = useCallback(() => {
+    const currentValue = inputRef.current?.value ?? value
+    let state = tabState.current
+
+    if (state) {
+      // Continue cycling through matches
+      state.index = (state.index + 1) % state.matches.length
+    } else {
+      // ── Command completion: "/par" → "/part "
+      if (currentValue.startsWith("/") && !currentValue.includes(" ")) {
+        const partial = currentValue.slice(1).toLowerCase()
+        if (!partial) return
+        const cmdNames = getCommandNames()
+        const matches = cmdNames.filter((n) => n.startsWith(partial))
+        if (matches.length === 0) return
+        state = { prefix: partial, matches, index: 0, textBefore: "/", isStartOfLine: false, isCommand: true, isSubcommand: false }
+        tabState.current = state
+      } else if (currentValue.startsWith("/") && currentValue.includes(" ")) {
+        // ── Subcommand / help argument completion
+        const firstSpace = currentValue.indexOf(" ")
+        const cmdName = currentValue.slice(1, firstSpace).toLowerCase()
+        const afterFirst = currentValue.slice(firstSpace + 1)
+
+        if (cmdName === "help") {
+          // /help special case: two levels of completion
+          const secondSpace = afterFirst.indexOf(" ")
+          if (secondSpace === -1) {
+            // "/help <partial>" → complete with command names
+            const partial = afterFirst.toLowerCase()
+            const cmdNames = getCommandNames()
+            const matches = partial ? cmdNames.filter((n) => n.startsWith(partial)) : cmdNames
+            if (matches.length > 0) {
+              state = { prefix: partial, matches, index: 0, textBefore: currentValue.slice(0, firstSpace + 1), isStartOfLine: false, isCommand: false, isSubcommand: true }
+              tabState.current = state
+            }
+          } else {
+            // "/help server <partial>" → complete with that command's subcommands
+            const helpTarget = afterFirst.slice(0, secondSpace).toLowerCase()
+            const partial = afterFirst.slice(secondSpace + 1).toLowerCase()
+            if (!partial.includes(" ")) {
+              const subs = getSubcommands(helpTarget)
+              if (subs.length > 0) {
+                const matches = partial ? subs.filter((s) => s.startsWith(partial)) : subs
+                if (matches.length > 0) {
+                  state = { prefix: partial, matches, index: 0, textBefore: currentValue.slice(0, firstSpace + 1 + secondSpace + 1), isStartOfLine: false, isCommand: false, isSubcommand: true }
+                  tabState.current = state
+                }
+              }
+            }
+          }
+        } else if (!afterFirst.includes(" ")) {
+          // Regular subcommand completion: "/server li" → "/server list "
+          const partial = afterFirst.toLowerCase()
+          const subs = getSubcommands(cmdName)
+          if (subs.length > 0) {
+            const matches = partial ? subs.filter((s) => s.startsWith(partial)) : subs
+            if (matches.length > 0) {
+              state = { prefix: partial, matches, index: 0, textBefore: currentValue.slice(0, firstSpace + 1), isStartOfLine: false, isCommand: false, isSubcommand: true }
+              tabState.current = state
+            }
+          }
+        }
+        // Fall through to nick completion if no subcommand matches
+        if (!state) {
+          state = tryNickCompletion(currentValue)
+        }
+      } else {
+        state = tryNickCompletion(currentValue)
+      }
+    }
+
+    if (!state) return
+
+    let completed: string
+    if (state.isCommand) {
+      completed = "/" + state.matches[state.index] + " "
+    } else if (state.isSubcommand) {
+      completed = state.textBefore + state.matches[state.index] + " "
+    } else {
+      const nick = state.matches[state.index]
+      const suffix = state.isStartOfLine ? ": " : " "
+      completed = state.textBefore + nick + suffix
+    }
+    isTabCompleting.current = true
+    setValue(completed)
+    if (inputRef.current) inputRef.current.value = completed
+    isTabCompleting.current = false
+  }, [value, buffer])
+
+  const resetTabState = useCallback(() => {
+    tabState.current = null
+  }, [])
+
+  useKeyboard((key) => {
+    if (key.eventType !== "press") return
+
+    // Ensure input stays focused on any keypress
+    if (inputRef.current) inputRef.current.focus()
+
+    if (key.name === "tab") {
+      handleTabCompletion()
+      return
+    }
+
+    // Any non-tab key resets tab completion cycling
+    resetTabState()
+
+    if (key.name === "up") {
+      if (history.length > 0) {
+        const newIdx = Math.min(historyIndex + 1, history.length - 1)
+        setHistoryIndex(newIdx)
+        const val = history[newIdx]
+        setValue(val)
+        if (inputRef.current) inputRef.current.value = val
+      }
+    }
+    if (key.name === "down") {
+      if (historyIndex > 0) {
+        const newIdx = historyIndex - 1
+        setHistoryIndex(newIdx)
+        const val = history[newIdx]
+        setValue(val)
+        if (inputRef.current) inputRef.current.value = val
+      } else {
+        setHistoryIndex(-1)
+        setValue("")
+        if (inputRef.current) inputRef.current.value = ""
+      }
+    }
+  })
+
+  // Build prompt from config template: $channel, $nick, $buffer, $server
+  const promptTemplate = sb.prompt
+  const prompt = promptTemplate
+    .replace("$server", conn?.label ?? "")
+    .replace("$channel", buffer?.name ?? "")
+    .replace("$nick", conn?.nick ?? "")
+    .replace("$buffer", buffer?.name ?? "")
+
+  return (
+    <box flexDirection="row" width="100%" backgroundColor={sb.bg}>
+      <text><span fg={sb.promptColor}>{prompt}</span></text>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={(v: string) => {
+          setValue(v)
+          // Reset tab state when user types, but not during programmatic tab completion
+          if (!isTabCompleting.current) resetTabState()
+        }}
+        onSubmit={handleSubmit}
+        focused
+        flexGrow={1}
+        backgroundColor={sb.bg}
+        textColor={sb.inputColor}
+        cursorColor={sb.cursorColor}
+      />
+    </box>
+  )
+}

package/src/ui/layout/AppLayout.tsx

@@ -0,0 +1,126 @@
+import { useState, useRef, useEffect } from "react"
+import { useStore } from "@/core/state/store"
+import { useStatusbarColors } from "@/ui/hooks/useStatusbarColors"
+import { cloneConfig, saveConfig } from "@/core/config/loader"
+import { CONFIG_PATH } from "@/core/constants"
+import { BufferType } from "@/types"
+
+const MIN_WIDTH = 10
+const MAX_WIDTH = 50
+
+interface Props {
+  sidebar: React.ReactNode
+  chat: React.ReactNode
+  nicklist: React.ReactNode
+  input: React.ReactNode
+  topicbar: React.ReactNode
+  statusline?: React.ReactNode
+}
+
+export function AppLayout({ sidebar, chat, nicklist, input, topicbar, statusline }: Props) {
+  const config = useStore((s) => s.config)
+  const colors = useStore((s) => s.theme?.colors)
+  const buffer = useStore((s) => s.activeBufferId ? s.buffers.get(s.activeBufferId) : null)
+  const sb = useStatusbarColors()
+  const leftWidth = config?.sidepanel.left.width ?? 20
+  const rightWidth = config?.sidepanel.right.width ?? 18
+  const leftVisible = config?.sidepanel.left.visible ?? true
+  const rightVisible = config?.sidepanel.right.visible ?? true
+
+  // Hide nicklist for non-channel buffers (query, server, special)
+  const showNicklist = rightVisible && buffer?.type === BufferType.Channel
+
+  // Drag-to-resize state
+  const [liveLeftWidth, setLiveLeftWidth] = useState(leftWidth)
+  const [liveRightWidth, setLiveRightWidth] = useState(rightWidth)
+  const dragRef = useRef<{ side: "left" | "right"; startX: number; startWidth: number; currentWidth: number } | null>(null)
+  const store = useStore()
+
+  useEffect(() => { setLiveLeftWidth(leftWidth) }, [leftWidth])
+  useEffect(() => { setLiveRightWidth(rightWidth) }, [rightWidth])
+
+  function startDrag(side: "left" | "right", event: any) {
+    const w = side === "left" ? liveLeftWidth : liveRightWidth
+    dragRef.current = { side, startX: event.x, startWidth: w, currentWidth: w }
+  }
+
+  function onDrag(event: any) {
+    const d = dragRef.current
+    if (!d) return
+    const delta = d.side === "left" ? event.x - d.startX : d.startX - event.x
+    const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, d.startWidth + delta))
+    d.currentWidth = newWidth
+    if (d.side === "left") setLiveLeftWidth(newWidth)
+    else setLiveRightWidth(newWidth)
+  }
+
+  function endDrag() {
+    const d = dragRef.current
+    if (!d) return
+    dragRef.current = null
+    const newConfig = cloneConfig(store.config!)
+    if (d.side === "left") newConfig.sidepanel.left.width = d.currentWidth
+    else newConfig.sidepanel.right.width = d.currentWidth
+    store.setConfig(newConfig)
+    saveConfig(CONFIG_PATH, newConfig)
+  }
+
+  const bg = colors?.bg ?? "#1a1b26"
+  const border = colors?.border ?? "#292e42"
+
+  return (
+    <box flexDirection="column" width="100%" height="100%" backgroundColor={bg}>
+      {/* Topic bar */}
+      <box height={1}>{topicbar}</box>
+
+      {/* Main area: sidebar | chat | nicklist */}
+      <box flexDirection="row" flexGrow={1}>
+        {leftVisible && (
+          <box width={liveLeftWidth} flexDirection="column" border={["right"]} borderStyle="single" borderColor={border}>
+            {sidebar}
+          </box>
+        )}
+        <box flexGrow={1} flexDirection="column">
+          {chat}
+        </box>
+        {showNicklist && (
+          <box width={liveRightWidth} flexDirection="column" border={["left"]} borderStyle="single" borderColor={border}>
+            {nicklist}
+          </box>
+        )}
+
+        {/* Invisible drag hit zones overlaying the borders */}
+        {leftVisible && (
+          <box
+            position="absolute"
+            left={liveLeftWidth - 2}
+            top={0}
+            width={2}
+            height="100%"
+            onMouseDown={(e: any) => startDrag("left", e)}
+            onMouseDrag={onDrag}
+            onMouseDragEnd={endDrag}
+          />
+        )}
+        {showNicklist && (
+          <box
+            position="absolute"
+            right={liveRightWidth - 1}
+            top={0}
+            width={2}
+            height="100%"
+            onMouseDown={(e: any) => startDrag("right", e)}
+            onMouseDrag={onDrag}
+            onMouseDragEnd={endDrag}
+          />
+        )}
+      </box>
+
+      {/* Status line + Input area — shared background from config */}
+      <box height={statusline ? 3 : 2} flexDirection="column" border={["top"]} borderStyle="single" borderColor={border} backgroundColor={sb.bg}>
+        {statusline}
+        {input}
+      </box>
+    </box>
+  )
+}

package/src/ui/layout/TopicBar.tsx

@@ -0,0 +1,46 @@
+import { useStore } from "@/core/state/store"
+import { parseFormatString, StyledText } from "@/core/theme"
+import { BufferType } from "@/types"
+import type { StyledSpan } from "@/types/theme"
+
+export function TopicBar() {
+  const activeBufferId = useStore((s) => s.activeBufferId)
+  const buffer = useStore((s) => s.activeBufferId ? s.buffers.get(s.activeBufferId) : null)
+  const colors = useStore((s) => s.theme?.colors)
+  const topic = buffer?.topic ?? ""
+  const name = buffer?.name ?? ""
+
+  const bgAlt = colors?.bg_alt ?? "#16161e"
+  const accent = colors?.accent ?? "#7aa2f7"
+  const fgMuted = colors?.fg_muted ?? "#565f89"
+  const fg = colors?.fg ?? "#a9b1d6"
+
+  const isQuery = buffer?.type === BufferType.Query
+
+  // Build the topic bar as styled spans
+  const spans: StyledSpan[] = []
+  const plain = (text: string, color?: string): StyledSpan => ({
+    text, fg: color, bold: false, italic: false, underline: false, dim: false,
+  })
+
+  spans.push(plain(name, accent))
+
+  if (isQuery && topic) {
+    spans.push(plain(` (${topic})`, fgMuted))
+  } else if (topic) {
+    spans.push(plain(" — ", fgMuted))
+    // Parse mIRC/IRC formatting codes in topic text
+    const topicSpans = parseFormatString(topic, [])
+    // Set default fg on spans that don't have an explicit color
+    for (const s of topicSpans) {
+      if (!s.fg) s.fg = fg
+    }
+    spans.push(...topicSpans)
+  }
+
+  return (
+    <box width="100%" backgroundColor={bgAlt}>
+      <StyledText spans={spans} />
+    </box>
+  )
+}