kokoirc 0.2.3 → 0.2.5

package/src/types/index.ts

@@ -59,14 +59,13 @@ export interface Buffer {
 export type MessageType = 'message' | 'action' | 'event' | 'notice' | 'ctcp'
 
 export interface Message {
-  id: string
+  id: number
   timestamp: Date
   type: MessageType
   nick?: string
   nickMode?: string
   text: string
   highlight: boolean
-  tags?: Record<string, string>
   eventKey?: string
   eventParams?: string[]
 }

package/src/types/theme.ts

@@ -34,4 +34,5 @@ export interface StyledSpan {
   italic: boolean
   underline: boolean
   dim: boolean
+  indentMarker?: boolean
 }

package/src/ui/chat/ChatView.tsx

@@ -1,27 +1,38 @@
 import { useRef, useEffect } from "react"
 import { useStore } from "@/core/state/store"
+import { useShallow } from "zustand/react/shallow"
 import { MessageLine } from "./MessageLine"
+import type { Message } from "@/types"
 import type { ScrollBoxRenderable } from "@opentui/core"
 
+const NO_BUFFER = { messages: [] as Message[], activeBufferId: null as string | null, currentNick: "", hasBuffer: false }
+
 export function ChatView() {
-  const activeBufferId = useStore((s) => s.activeBufferId)
-  const buffersMap = useStore((s) => s.buffers)
-  const connectionsMap = useStore((s) => s.connections)
+  const data = useStore(useShallow((s) => {
+    const id = s.activeBufferId
+    if (!id) return NO_BUFFER
+    const buf = s.buffers.get(id)
+    if (!buf) return NO_BUFFER
+    const conn = s.connections.get(buf.connectionId)
+    return {
+      messages: buf.messages,
+      activeBufferId: id,
+      currentNick: conn?.nick ?? "",
+      hasBuffer: true,
+    }
+  }))
   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])
+  }, [data.activeBufferId])
 
-  if (!buffer) {
+  if (!data.hasBuffer) {
     return (
       <box flexGrow={1} justifyContent="center" alignItems="center">
         <text><span fg={colors?.fg_dim ?? "#292e42"}>No active buffer</span></text>
@@ -31,8 +42,8 @@ export function ChatView() {
 
   return (
     <scrollbox ref={scrollRef} height="100%" stickyScroll stickyStart="bottom">
-      {buffer.messages.map((msg) => (
-        <MessageLine key={msg.id} message={msg} isOwnNick={msg.nick === currentNick} />
+      {data.messages.map((msg) => (
+        <MessageLine key={msg.id} message={msg} isOwnNick={msg.nick === data.currentNick} />
       ))}
     </scrollbox>
   )

package/src/ui/chat/MessageLine.tsx

@@ -1,15 +1,19 @@
+import React from "react"
 import { useStore } from "@/core/state/store"
-import { resolveAbstractions, parseFormatString, StyledText } from "@/core/theme"
+import { resolveAbstractions, parseFormatString, StyledText, renderStyledSpans } from "@/core/theme"
 import { formatTimestamp } from "@/core/irc/formatting"
+import { classifyUrl } from "@/core/image-preview/fetch"
 import type { Message } from "@/types"
 import type { StyledSpan } from "@/types/theme"
 
+const URL_RE = /https?:\/\/[^\s<>"')\]]+/gi
+
 interface Props {
   message: Message
   isOwnNick: boolean
 }
 
-export function MessageLine({ message, isOwnNick }: Props) {
+export const MessageLine = React.memo(function MessageLine({ message, isOwnNick }: Props) {
   const theme = useStore((s) => s.theme)
   const config = useStore((s) => s.config)
   const abstracts = theme?.abstracts ?? {}
@@ -42,10 +46,10 @@ export function MessageLine({ message, isOwnNick }: Props) {
     const maxLen = config?.display.nick_max_length ?? nickWidth
     const truncate = config?.display.nick_truncation ?? true
 
-    // Truncate nick if needed
+    // Truncate nick if needed — show "+" to indicate truncation
     let displayNick = nick
     if (truncate && displayNick.length > maxLen) {
-      displayNick = displayNick.slice(0, maxLen)
+      displayNick = displayNick.slice(0, maxLen - 1) + "+"
     }
 
     // Pad the combined mode+nick so alignment covers the whole column
@@ -84,9 +88,43 @@ export function MessageLine({ message, isOwnNick }: Props) {
   const separator: StyledSpan = { text: " ", bold: false, italic: false, underline: false, dim: false }
   const allSpans = [...tsSpans, separator, ...msgSpans]
 
+  // Click any URL in the message to attempt image preview (erssi-style content-type sniffing)
+  const handleClick = () => {
+    const text = message.text
+    const urls = text.match(URL_RE)
+    if (!urls) return
+
+    for (const url of urls) {
+      if (classifyUrl(url)) {
+        useStore.getState().showImagePreview(url)
+        return
+      }
+    }
+  }
+
+  // Split at %| indent marker for wrap-indented two-column layout
+  const markerIdx = allSpans.findIndex((s) => s.indentMarker)
+  if (markerIdx !== -1) {
+    // Absorb whitespace-only spans after marker into prefix (for correct alignment)
+    let bodyStart = markerIdx + 1
+    while (bodyStart < allSpans.length && allSpans[bodyStart].text.trim() === "") {
+      bodyStart++
+    }
+    const prefixSpans = [...allSpans.slice(0, markerIdx), ...allSpans.slice(markerIdx + 1, bodyStart)]
+    const bodySpans = allSpans.slice(bodyStart)
+    const prefixWidth = prefixSpans.reduce((w, s) => w + s.text.length, 0)
+
+    return (
+      <box width="100%" flexDirection="row" onMouseDown={handleClick}>
+        <text width={prefixWidth}>{renderStyledSpans(prefixSpans)}</text>
+        <text flexGrow={1}>{renderStyledSpans(bodySpans, prefixSpans.length)}</text>
+      </box>
+    )
+  }
+
   return (
-    <box width="100%">
+    <box width="100%" onMouseDown={handleClick}>
       <StyledText spans={allSpans} />
     </box>
   )
-}
+})

package/src/ui/input/CommandInput.tsx

@@ -2,6 +2,7 @@ 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 { nextMsgId } from "@/core/utils/id"
 import { useKeyboard, useRenderer } from "@opentui/react"
 import { useStatusbarColors } from "@/ui/hooks/useStatusbarColors"
 import type { InputRenderable } from "@opentui/core"
@@ -49,6 +50,10 @@ export function CommandInput() {
   const addMessage = useStore((s) => s.addMessage)
   const sb = useStatusbarColors()
 
+  // ── Multiline paste handling ──────────────────────────────────
+  const pasteQueueRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  const handleSubmitRef = useRef<(v: string) => void>(() => {})
+
   const handleSubmit = useCallback((submittedValue?: string | unknown) => {
     const text = typeof submittedValue === "string" ? submittedValue : value
     const trimmed = text.trim()
@@ -75,7 +80,7 @@ export function CommandInput() {
         client.say(buffer.name, trimmed)
         const conn = useStore.getState().connections.get(buffer.connectionId)
         addMessage(buffer.id, {
-          id: crypto.randomUUID(),
+          id: nextMsgId(),
           timestamp: new Date(),
           type: "message",
           nick: conn?.nick ?? "",
@@ -87,6 +92,56 @@ export function CommandInput() {
     }
   }, [value, buffer, addMessage])
 
+  // Keep ref in sync for paste queue callbacks
+  handleSubmitRef.current = handleSubmit
+
+  // Intercept multiline paste — split into lines and send with delay
+  useEffect(() => {
+    const PASTE_DELAY = 500 // ms between lines
+
+    const onPaste = (event: { text: string; preventDefault(): void }) => {
+      const text = event.text
+      if (!text) return
+
+      const lines = text.split(/\r?\n/).filter((l) => l.trim())
+      if (lines.length <= 1) return // single-line paste: let input handle normally
+
+      event.preventDefault()
+
+      // Prepend any existing input text to first pasted line
+      const currentInput = inputRef.current?.value ?? ""
+      if (currentInput.trim()) {
+        lines[0] = currentInput + lines[0]
+      }
+
+      // Clear input
+      setValue("")
+      if (inputRef.current) inputRef.current.value = ""
+
+      // Cancel any pending paste queue
+      for (const t of pasteQueueRef.current) clearTimeout(t)
+      pasteQueueRef.current = []
+
+      // Capture current submit for all queued lines
+      const submit = handleSubmitRef.current
+
+      // Send first line immediately, rest with delay to avoid excess flood
+      submit(lines[0])
+      for (let i = 1; i < lines.length; i++) {
+        const line = lines[i]
+        const timer = setTimeout(() => submit(line), PASTE_DELAY * i)
+        pasteQueueRef.current.push(timer)
+      }
+    }
+
+    renderer.keyInput.on("paste", onPaste)
+    return () => {
+      renderer.keyInput.off("paste", onPaste)
+      for (const t of pasteQueueRef.current) clearTimeout(t)
+      pasteQueueRef.current = []
+    }
+  }, [renderer])
+
   const tryNickCompletion = (currentValue: string) => {
     if (!buffer) return null
     const nicks = Array.from(buffer.users.keys())

package/src/ui/layout/AppLayout.tsx

@@ -15,9 +15,10 @@ interface Props {
   input: React.ReactNode
   topicbar: React.ReactNode
   statusline?: React.ReactNode
+  overlay?: React.ReactNode
 }
 
-export function AppLayout({ sidebar, chat, nicklist, input, topicbar, statusline }: Props) {
+export function AppLayout({ sidebar, chat, nicklist, input, topicbar, statusline, overlay }: 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)
@@ -34,7 +35,6 @@ export function AppLayout({ sidebar, chat, nicklist, input, topicbar, statusline
   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])
@@ -58,10 +58,11 @@ export function AppLayout({ sidebar, chat, nicklist, input, topicbar, statusline
     const d = dragRef.current
     if (!d) return
     dragRef.current = null
-    const newConfig = cloneConfig(store.config!)
+    const s = useStore.getState()
+    const newConfig = cloneConfig(s.config!)
     if (d.side === "left") newConfig.sidepanel.left.width = d.currentWidth
     else newConfig.sidepanel.right.width = d.currentWidth
-    store.setConfig(newConfig)
+    s.setConfig(newConfig)
     saveConfig(CONFIG_PATH, newConfig)
   }
 
@@ -114,6 +115,7 @@ export function AppLayout({ sidebar, chat, nicklist, input, topicbar, statusline
             onMouseDragEnd={endDrag}
           />
         )}
+        {overlay}
       </box>
 
       {/* Status line + Input area — shared background from config */}

package/src/ui/overlay/ImagePreview.tsx

@@ -0,0 +1,77 @@
+import { useMemo } from "react"
+import { useStore } from "@/core/state/store"
+
+export function ImagePreview() {
+  const preview = useStore((s) => s.imagePreview)
+  const hideImagePreview = useStore((s) => s.hideImagePreview)
+  const theme = useStore((s) => s.theme?.colors)
+
+  const termCols = process.stdout.columns || 80
+  const termRows = process.stdout.rows || 24
+
+  const layout = useMemo(() => {
+    if (!preview) return null
+    const popupWidth = Math.max(preview.width, 20)
+    const popupHeight = Math.max(preview.height, 5)
+    const left = Math.max(0, Math.floor((termCols - popupWidth) / 2))
+    const top = Math.max(0, Math.floor((termRows - popupHeight) / 2))
+    return { popupWidth, popupHeight, left, top }
+  }, [preview?.width, preview?.height, termCols, termRows])
+
+  if (!preview || !layout) return null
+
+  const bg = theme?.bg ?? "#1a1b26"
+  const accent = theme?.accent ?? "#7aa2f7"
+  const muted = theme?.fg_muted ?? "#565f89"
+
+  const title = preview.title
+    ? ` ${preview.title.slice(0, layout.popupWidth - 4)} `
+    : " Preview "
+
+  let statusText: React.ReactNode = null
+  if (preview.status === "loading") {
+    statusText = <text><span fg={muted}>Loading image...</span></text>
+  } else if (preview.status === "error") {
+    statusText = <text><span fg="#f7768e">{preview.error ?? "Error"}</span></text>
+  }
+
+  return (
+    <>
+      {/* Full-screen transparent backdrop — click anywhere to dismiss */}
+      <box
+        position="absolute"
+        left={0}
+        top={0}
+        width="100%"
+        height="100%"
+        onMouseDown={() => hideImagePreview()}
+      />
+      {/* Centered popup */}
+      <box
+        position="absolute"
+        left={layout.left}
+        top={layout.top}
+        width={layout.popupWidth}
+        height={layout.popupHeight}
+        border={["top", "bottom", "left", "right"]}
+        borderStyle="single"
+        borderColor={accent}
+        backgroundColor={bg}
+        onMouseDown={() => hideImagePreview()}
+      >
+        <box height={1} width="100%">
+          <text>
+            <span fg={accent}>{title}</span>
+            <span fg={muted}> [click/key to close]</span>
+          </text>
+        </box>
+
+        {statusText && (
+          <box width="100%" flexGrow={1} justifyContent="center" alignItems="center">
+            {statusText}
+          </box>
+        )}
+      </box>
+    </>
+  )
+}

package/src/ui/sidebar/BufferList.tsx

@@ -21,26 +21,35 @@ export function BufferList() {
         // Connection header
         if (buf.connectionId !== lastConnectionId) {
           lastConnectionId = buf.connectionId
-          const format = theme?.formats.sidepanel.header ?? "%B$0%N"
-          const resolved = resolveAbstractions(format, theme?.abstracts ?? {})
-          const spans = parseFormatString(resolved, [buf.connectionLabel])
+          const hdrFormat = theme?.formats.sidepanel.header ?? "%B$0%N"
+          const hdrResolved = resolveAbstractions(hdrFormat, theme?.abstracts ?? {})
+          // Measure visible overhead of header format (everything except $0)
+          const hdrOverhead = parseFormatString(hdrResolved, [""]).reduce((w, s) => w + s.text.length, 0)
+          const maxLabelLen = leftWidth - 3 - hdrOverhead
+          const displayLabel = maxLabelLen > 0 && buf.connectionLabel.length > maxLabelLen
+            ? buf.connectionLabel.slice(0, maxLabelLen - 1) + "+"
+            : buf.connectionLabel
+          const hdrSpans = parseFormatString(hdrResolved, [displayLabel])
           items.push(
             <box key={`h-${buf.connectionId}`} width="100%">
-              <StyledText spans={spans} />
+              <StyledText spans={hdrSpans} />
             </box>
           )
         }
 
         refNum++
+        const refStr = String(refNum)
         const isActive = buf.id === activeBufferId
         const formatKey = isActive
           ? "item_selected"
           : `item_activity_${buf.activity}`
         const format = theme?.formats.sidepanel[formatKey] ?? "$0. $1"
         const resolved = resolveAbstractions(format, theme?.abstracts ?? {})
-        const maxLen = leftWidth - 4
-        const displayName = buf.name.length > maxLen ? buf.name.slice(0, maxLen - 1) + "\u2026" : buf.name
-        const spans = parseFormatString(resolved, [String(refNum), displayName])
+        // Measure visible overhead of format (refnum + decoration, excluding channel name)
+        const formatOverhead = parseFormatString(resolved, [refStr, ""]).reduce((w, s) => w + s.text.length, 0)
+        const maxLen = leftWidth - 3 - formatOverhead
+        const displayName = maxLen > 0 && buf.name.length > maxLen ? buf.name.slice(0, maxLen - 1) + "+" : buf.name
+        const spans = parseFormatString(resolved, [refStr, displayName])
 
         items.push(
           <box key={buf.id} width="100%" onMouseDown={() => setActiveBuffer(buf.id)}>

package/src/ui/sidebar/NickList.tsx

@@ -8,15 +8,15 @@ const DEFAULT_PREFIX_ORDER = "~&@%+"
 const EMPTY_NICKS: import("@/types").NickEntry[] = []
 
 export function NickList() {
-  const activeBufferId = useStore((s) => s.activeBufferId)
-  const buffersMap = useStore((s) => s.buffers)
-  const connectionsMap = useStore((s) => s.connections)
+  const buffer = useStore((s) => s.activeBufferId ? s.buffers.get(s.activeBufferId) ?? null : null)
+  const conn = useStore((s) => {
+    const buf = s.activeBufferId ? s.buffers.get(s.activeBufferId) : null
+    return buf ? s.connections.get(buf.connectionId) : undefined
+  })
   const theme = useStore((s) => s.theme)
+  const rightWidth = useStore((s) => s.config?.sidepanel.right.width ?? 18)
   const colors = theme?.colors
 
-  const buffer = activeBufferId ? buffersMap.get(activeBufferId) ?? null : null
-  const conn = buffer ? connectionsMap.get(buffer.connectionId) : undefined
-
   const prefixOrder = conn?.isupport?.PREFIX
     ? extractPrefixChars(conn.isupport.PREFIX)
     : DEFAULT_PREFIX_ORDER
@@ -46,7 +46,14 @@ export function NickList() {
         const formatKey = getFormatKey(entry.prefix)
         const format = formats[formatKey] ?? " $0"
         const resolved = resolveAbstractions(format, abstracts)
-        const spans = parseFormatString(resolved, [entry.nick])
+        // Measure visible overhead of format (prefix char etc., excluding nick)
+        const formatOverhead = parseFormatString(resolved, [""]).reduce((w, s) => w + s.text.length, 0)
+        const maxNickLen = rightWidth - 3 - formatOverhead
+        let displayNick = entry.nick
+        if (maxNickLen > 0 && displayNick.length > maxNickLen) {
+          displayNick = displayNick.slice(0, maxNickLen - 1) + "+"
+        }
+        const spans = parseFormatString(resolved, [displayNick])
 
         return (
           <box key={entry.nick} width="100%"
@@ -65,6 +72,7 @@ export function NickList() {
                   unreadCount: 0,
                   lastRead: new Date(),
                   users: new Map(),
+                  listModes: new Map(),
                 })
               }
               store.setActiveBuffer(queryId)

package/src/ui/splash/SplashScreen.tsx

@@ -46,6 +46,7 @@ export function SplashScreen({ onDone }: { onDone: () => void }) {
   const [visibleLines, setVisibleLines] = useState(0)
   const [showLogo, setShowLogo] = useState(false)
   const doneRef = useRef(false)
+  const finishTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const finish = () => {
     if (doneRef.current) return
@@ -63,10 +64,13 @@ export function SplashScreen({ onDone }: { onDone: () => void }) {
       if (count >= BIRD.length) {
         clearInterval(timer)
         setShowLogo(true)
-        setTimeout(finish, 2500)
+        finishTimer.current = setTimeout(finish, 2500)
       }
     }, 50)
-    return () => clearInterval(timer)
+    return () => {
+      clearInterval(timer)
+      if (finishTimer.current) clearTimeout(finishTimer.current)
+    }
   }, [])
 
   return (

package/src/ui/statusbar/StatusLine.tsx

@@ -8,7 +8,10 @@ import { useStatusbarColors } from "@/ui/hooks/useStatusbarColors"
 export function StatusLine() {
   const config = useStore((s) => s.config)
   const buffer = useStore((s) => s.activeBufferId ? s.buffers.get(s.activeBufferId) : null)
-  const connections = useStore((s) => s.connections)
+  const conn = useStore((s) => {
+    const buf = s.activeBufferId ? s.buffers.get(s.activeBufferId) : null
+    return buf ? s.connections.get(buf.connectionId) ?? null : null
+  })
   const activeBufferId = useStore((s) => s.activeBufferId)
   const setActiveBuffer = useStore((s) => s.setActiveBuffer)
 
@@ -24,7 +27,6 @@ export function StatusLine() {
 
   if (!config?.statusbar.enabled) return null
 
-  const conn = buffer ? connections.get(buffer.connectionId) : null
   const items = config.statusbar.items
 
   function getItemFormat(item: StatusbarItem): string {