kokoirc 0.2.2 → 0.2.4

package/src/core/state/store.ts

@@ -1,8 +1,20 @@
 import { create } from "zustand"
-import type { Connection, Buffer, Message, NickEntry, ActivityLevel, ListEntry, ListModeKey } from "@/types"
+import { BufferType, ActivityLevel, makeBufferId } from "@/types"
+import type { Connection, Buffer, Message, NickEntry, ListEntry, ListModeKey } from "@/types"
 import type { AppConfig } from "@/types/config"
 import type { ThemeFile } from "@/types/theme"
 import { logMessage, updateReadMarker } from "@/core/storage"
+import { nextMsgId } from "@/core/utils/id"
+
+export interface ImagePreviewState {
+  url: string
+  status: "loading" | "ready" | "error"
+  error?: string
+  width: number
+  height: number
+  title?: string
+  protocol?: string  // needed for cleanup on dismiss
+}
 
 interface AppState {
   // Data
@@ -13,6 +25,12 @@ interface AppState {
   config: AppConfig | null
   theme: ThemeFile | null
 
+  // Image preview
+  imagePreview: ImagePreviewState | null
+  showImagePreview: (url: string) => void
+  updateImagePreview: (updates: Partial<ImagePreviewState>) => void
+  hideImagePreview: () => void
+
   // Connection actions
   addConnection: (conn: Connection) => void
   updateConnection: (id: string, updates: Partial<Connection>) => void
@@ -21,11 +39,13 @@ interface AppState {
   // Buffer actions
   addBuffer: (buffer: Buffer) => void
   removeBuffer: (id: string) => void
+  closeConnection: (connectionId: string) => void
   setActiveBuffer: (id: string) => void
   updateBufferActivity: (id: string, level: ActivityLevel) => void
 
   // Message actions
   addMessage: (bufferId: string, message: Message) => void
+  clearMessages: (bufferId: string) => void
 
   // Nicklist actions
   addNick: (bufferId: string, entry: NickEntry) => void
@@ -41,6 +61,12 @@ interface AppState {
   addListEntry: (bufferId: string, modeChar: ListModeKey, entry: ListEntry) => void
   removeListEntry: (bufferId: string, modeChar: ListModeKey, mask: string) => void
 
+  // Batch actions (single set() for N mutations)
+  batchRemoveNick: (entries: Array<{ bufferId: string; nick: string }>) => void
+  batchAddNick: (entries: Array<{ bufferId: string; entry: NickEntry }>) => void
+  batchUpdateNick: (entries: Array<{ bufferId: string; oldNick: string; newNick: string; prefix?: string }>) => void
+  batchAddMessage: (entries: Array<{ bufferId: string; message: Message }>) => void
+
   // Config/Theme
   setConfig: (config: AppConfig) => void
   setTheme: (theme: ThemeFile) => void
@@ -59,6 +85,96 @@ export const useStore = create<AppState>((set, get) => ({
   config: null,
   theme: null,
 
+  // Image preview
+  imagePreview: null,
+  showImagePreview: (url) => {
+    // Concurrency guard — ignore if already loading
+    const current = get().imagePreview
+    if (current?.status === "loading") return
+
+    set({
+      imagePreview: { url, status: "loading", width: 0, height: 0 },
+    })
+    // Kick off the async render pipeline
+    import("@/core/image-preview/render").then(({ preparePreview }) => {
+      preparePreview(url)
+    }).catch((err) => {
+      const s = get()
+      const buf = s.activeBufferId
+      if (buf) {
+        s.addMessage(buf, {
+          id: nextMsgId(),
+          timestamp: new Date(),
+          type: "event",
+          text: `%Zf7768e[img] import failed: ${err.message}%N`,
+          highlight: false,
+        })
+      }
+      set({ imagePreview: null })
+    })
+  },
+  updateImagePreview: (updates) => set((s) => {
+    if (!s.imagePreview) return s
+    return { imagePreview: { ...s.imagePreview, ...updates } }
+  }),
+  hideImagePreview: () => {
+    const prev = get().imagePreview
+    if (!prev) { set({ imagePreview: null }); return }
+
+    try {
+      const { writeSync } = require("node:fs")
+      const { flushStdin } = require("@/core/image-preview/stdin-guard")
+      const inTmux = !!process.env.TMUX
+
+      // Disable mouse tracking + flush kernel input buffer.
+      // Do NOT call process.stdin.pause()/resume() — triggers Bun malloc crash.
+      writeSync(1, "\x1b[?1003l\x1b[?1006l\x1b[?1002l\x1b[?1000l")
+      flushStdin()
+
+      if (prev.protocol === "kitty") {
+        // Kitty: image is on separate graphics layer — delete command removes it
+        const deleteCmd = "\x1b_Ga=d,q=2\x1b\\"
+        if (inTmux) {
+          const escaped = deleteCmd.replace(/\x1b/g, "\x1b\x1b")
+          writeSync(1, `\x1bPtmux;${escaped}\x1b\\`)
+        } else {
+          writeSync(1, deleteCmd)
+        }
+      } else {
+        // iTerm2/Sixel/Symbols: image is in the cell buffer — overwrite with
+        // spaces using theme bg color. OpenTUI's diff renderer skips empty
+        // cells (they look "unchanged"), so we must fill them with the correct
+        // bg to avoid a default-bg hole where the image was.
+        const termCols = process.stdout.columns || 80
+        const termRows = process.stdout.rows || 24
+        const popupW = prev.width || 0
+        const popupH = prev.height || 0
+        if (popupW > 0 && popupH > 0) {
+          const left = Math.max(0, Math.floor((termCols - popupW) / 2))
+          const top = Math.max(0, Math.floor((termRows - popupH) / 2))
+          // Use theme bg color for spaces so empty cells match the UI
+          const theme = get().theme
+          const hex = theme?.colors?.bg ?? "#1a1b26"
+          const r = parseInt(hex.slice(1, 3), 16)
+          const g = parseInt(hex.slice(3, 5), 16)
+          const b = parseInt(hex.slice(5, 7), 16)
+          const bgSeq = `\x1b[48;2;${r};${g};${b}m`
+          const blankLine = bgSeq + " ".repeat(popupW) + "\x1b[0m"
+          writeSync(1, "\x1b7") // save cursor
+          for (let row = 0; row < popupH; row++) {
+            writeSync(1, `\x1b[${top + row + 1};${left + 1}H${blankLine}`)
+          }
+          writeSync(1, "\x1b8") // restore cursor
+        }
+      }
+
+      flushStdin()
+      writeSync(1, "\x1b[?1000h\x1b[?1002h\x1b[?1003h\x1b[?1006h")
+    } catch {}
+
+    set({ imagePreview: null })
+  },
+
   addConnection: (conn) => set((s) => {
     const connections = new Map(s.connections)
     connections.set(conn.id, conn)
@@ -87,13 +203,82 @@ export const useStore = create<AppState>((set, get) => ({
   removeBuffer: (id) => set((s) => {
     const buffers = new Map(s.buffers)
     buffers.delete(id)
+
+    // If no buffers left, recreate the default welcome state
+    if (buffers.size === 0) {
+      const defaultId = makeBufferId("_default", "Status")
+      buffers.set(defaultId, {
+        id: defaultId,
+        connectionId: "_default",
+        type: BufferType.Server,
+        name: "Status",
+        messages: [{
+          id: nextMsgId(),
+          timestamp: new Date(),
+          type: "event" as const,
+          text: "Welcome to kokoIRC. Type /connect to connect to a server.",
+          highlight: false,
+        }],
+        activity: ActivityLevel.None,
+        unreadCount: 0,
+        lastRead: new Date(),
+        users: new Map(),
+        listModes: new Map(),
+      })
+      return { buffers, activeBufferId: defaultId, previousActiveBufferId: null }
+    }
+
     if (s.activeBufferId !== id) return { buffers }
-    // Fall back to previous buffer if it still exists, otherwise null
+    // Fall back to previous buffer if it still exists, otherwise first available
     const fallback = s.previousActiveBufferId && buffers.has(s.previousActiveBufferId)
-      ? s.previousActiveBufferId : null
+      ? s.previousActiveBufferId : buffers.keys().next().value ?? null
     return { buffers, activeBufferId: fallback }
   }),
 
+  closeConnection: (connectionId) => set((s) => {
+    const buffers = new Map(s.buffers)
+    const connections = new Map(s.connections)
+
+    // Remove all buffers for this connection
+    for (const [id, buf] of buffers) {
+      if (buf.connectionId === connectionId) buffers.delete(id)
+    }
+    // Remove the connection entry
+    connections.delete(connectionId)
+
+    // If no buffers left, recreate the default welcome state
+    if (buffers.size === 0) {
+      const defaultId = makeBufferId("_default", "Status")
+      buffers.set(defaultId, {
+        id: defaultId,
+        connectionId: "_default",
+        type: BufferType.Server,
+        name: "Status",
+        messages: [{
+          id: nextMsgId(),
+          timestamp: new Date(),
+          type: "event" as const,
+          text: "Welcome to kokoIRC. Type /connect to connect to a server.",
+          highlight: false,
+        }],
+        activity: ActivityLevel.None,
+        unreadCount: 0,
+        lastRead: new Date(),
+        users: new Map(),
+        listModes: new Map(),
+      })
+      return { buffers, connections, activeBufferId: defaultId, previousActiveBufferId: null }
+    }
+
+    // If active buffer was removed, fall back
+    const needsFallback = !buffers.has(s.activeBufferId ?? "")
+    const fallback = needsFallback
+      ? (s.previousActiveBufferId && buffers.has(s.previousActiveBufferId)
+        ? s.previousActiveBufferId : buffers.keys().next().value ?? null)
+      : s.activeBufferId
+    return { buffers, connections, activeBufferId: fallback }
+  }),
+
   setActiveBuffer: (id) => {
     // Persist read marker for TUI client
     const slashIdx = id.indexOf("/")
@@ -145,6 +330,14 @@ export const useStore = create<AppState>((set, get) => ({
     })
   },
 
+  clearMessages: (bufferId) => set((s) => {
+    const buffers = new Map(s.buffers)
+    const buf = buffers.get(bufferId)
+    if (!buf) return s
+    buffers.set(bufferId, { ...buf, messages: [] })
+    return { buffers }
+  }),
+
   addNick: (bufferId, entry) => set((s) => {
     const buffers = new Map(s.buffers)
     const buf = buffers.get(bufferId)
@@ -230,6 +423,71 @@ export const useStore = create<AppState>((set, get) => ({
     return { buffers }
   }),
 
+  batchRemoveNick: (entries) => set((s) => {
+    const buffers = new Map(s.buffers)
+    for (const { bufferId, nick } of entries) {
+      const buf = buffers.get(bufferId)
+      if (!buf) continue
+      const users = new Map(buf.users)
+      users.delete(nick)
+      buffers.set(bufferId, { ...buf, users })
+    }
+    return { buffers }
+  }),
+
+  batchAddNick: (entries) => set((s) => {
+    const buffers = new Map(s.buffers)
+    for (const { bufferId, entry } of entries) {
+      const buf = buffers.get(bufferId)
+      if (!buf) continue
+      const users = new Map(buf.users)
+      users.set(entry.nick, entry)
+      buffers.set(bufferId, { ...buf, users })
+    }
+    return { buffers }
+  }),
+
+  batchUpdateNick: (entries) => set((s) => {
+    const buffers = new Map(s.buffers)
+    for (const { bufferId, oldNick, newNick, prefix } of entries) {
+      const buf = buffers.get(bufferId)
+      if (!buf) continue
+      const users = new Map(buf.users)
+      const existing = users.get(oldNick)
+      if (existing) {
+        users.delete(oldNick)
+        users.set(newNick, { ...existing, nick: newNick, prefix: prefix ?? existing.prefix })
+      }
+      buffers.set(bufferId, { ...buf, users })
+    }
+    return { buffers }
+  }),
+
+  batchAddMessage: (entries) => {
+    // Log each message to persistent storage before the set() call
+    for (const { bufferId, message } of entries) {
+      const slashIdx = bufferId.indexOf("/")
+      if (slashIdx > 0) {
+        const network = bufferId.slice(0, slashIdx)
+        const buffer = bufferId.slice(slashIdx + 1)
+        logMessage(network, buffer, message.id, message.type, message.text, message.nick ?? null, message.highlight, message.timestamp)
+      }
+    }
+
+    return set((s) => {
+      const buffers = new Map(s.buffers)
+      const maxLines = s.config?.display.scrollback_lines ?? 2000
+      for (const { bufferId, message } of entries) {
+        const buf = buffers.get(bufferId)
+        if (!buf) continue
+        const messages = [...buf.messages, message]
+        if (messages.length > maxLines) messages.splice(0, messages.length - maxLines)
+        buffers.set(bufferId, { ...buf, messages })
+      }
+      return { buffers }
+    })
+  },
+
   setConfig: (config) => set({ config }),
   setTheme: (theme) => set({ theme }),
 

package/src/core/storage/index.ts

@@ -35,7 +35,7 @@ export async function initStorage(config: LoggingConfig): Promise<void> {
 export function logMessage(
   network: string,
   buffer: string,
-  msgId: string,
+  msgId: string | number,
   type: MessageType,
   text: string,
   nick: string | null,
@@ -45,7 +45,7 @@ export function logMessage(
   if (!writer) return
 
   const row: LogRow = {
-    msg_id: msgId,
+    msg_id: String(msgId),
     network,
     buffer,
     timestamp: timestamp.getTime(),

package/src/core/storage/writer.ts

@@ -14,6 +14,8 @@ export class LogWriter {
   private cryptoKey: CryptoKey | null = null
   private hasFts: boolean
   private listeners: MessageListener[] = []
+  private insertStmt: ReturnType<Database["prepare"]> | null = null
+  private insertFtsStmt: ReturnType<Database["prepare"]> | null = null
 
   constructor(db: Database, config: LoggingConfig) {
     this.db = db
@@ -25,6 +27,14 @@ export class LogWriter {
     if (this.config.encrypt) {
       this.cryptoKey = await loadOrCreateKey()
     }
+    this.insertStmt = this.db.prepare(
+      "INSERT INTO messages (msg_id, network, buffer, timestamp, type, nick, text, highlight, iv) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)"
+    )
+    if (this.hasFts) {
+      this.insertFtsStmt = this.db.prepare(
+        "INSERT INTO messages_fts (rowid, nick, text) VALUES (?, ?, ?)"
+      )
+    }
   }
 
   /** Subscribe to new messages (for WebSocket real-time push). */
@@ -70,16 +80,8 @@ export class LogWriter {
     this.flushing = true
     const batch = this.queue.splice(0)
 
-    const insert = this.db.prepare(
-      "INSERT INTO messages (msg_id, network, buffer, timestamp, type, nick, text, highlight, iv) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)"
-    )
-
-    // Prepare FTS insert if available
-    const insertFts = this.hasFts
-      ? this.db.prepare(
-          "INSERT INTO messages_fts (rowid, nick, text) VALUES (?, ?, ?)"
-        )
-      : null
+    const insert = this.insertStmt!
+    const insertFts = this.insertFtsStmt
 
     try {
       // bun:sqlite transactions are sync, but encrypt is async — handle both modes

package/src/core/theme/renderer.tsx

@@ -1,15 +1,43 @@
 import { TextAttributes } from "@opentui/core"
 import type { StyledSpan } from "@/types/theme"
 
+const URL_RE = /https?:\/\/[^\s<>"')\]]+/gi
+
 interface Props {
   spans: StyledSpan[]
 }
 
+/** Split text into segments, wrapping URLs in <a href> for OSC 8 hyperlinks */
+function linkify(text: string): React.ReactNode[] {
+  const parts: React.ReactNode[] = []
+  let lastIndex = 0
+  URL_RE.lastIndex = 0
+
+  let match: RegExpExecArray | null
+  while ((match = URL_RE.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index))
+    }
+    const url = match[0]
+    parts.push(<a key={match.index} href={url}>{url}</a>)
+    lastIndex = match.index + url.length
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex))
+  }
+
+  return parts.length > 0 ? parts : [text]
+}
+
 export function StyledText({ spans }: Props) {
   return (
     <text>
       {spans.map((span, i) => {
-        let content: any = span.text
+        let content: any = linkify(span.text)
+        if (content.length === 1 && typeof content[0] === "string") {
+          content = content[0]
+        }
         if (span.bold) content = <strong>{content}</strong>
         if (span.italic) content = <em>{content}</em>
         if (span.underline) content = <u>{content}</u>

package/src/core/utils/id.ts

@@ -0,0 +1,2 @@
+let counter = 0
+export function nextMsgId(): number { return ++counter }

package/src/types/config.ts

@@ -63,11 +63,24 @@ export interface ScriptsConfig {
   [scriptName: string]: any  // per-script config: [scripts.my-script]
 }
 
+export interface ImagePreviewConfig {
+  enabled: boolean
+  max_width: number       // max popup width in columns (0 = auto ~60% of terminal)
+  max_height: number      // max popup height in rows (0 = auto ~60% of terminal)
+  cache_max_mb: number    // disk cache limit (default: 100)
+  cache_max_days: number  // max age before cleanup (default: 7)
+  fetch_timeout: number   // seconds (default: 30)
+  max_file_size: number   // max download bytes (default: 10MB)
+  protocol: string        // "auto" | "kitty" | "iterm2" | "sixel" | "symbols"
+  kitty_format: string    // "rgba" | "png" — kitty protocol pixel format (default: "rgba")
+}
+
 export interface AppConfig {
   general: GeneralConfig
   display: DisplayConfig
   sidepanel: SidepanelConfig
   statusbar: StatusbarConfig
+  image_preview: ImagePreviewConfig
   servers: Record<string, ServerConfig>
   aliases: Record<string, string>
   ignores: IgnoreEntry[]
@@ -123,4 +136,5 @@ export interface ServerConfig {
   auto_reconnect?: boolean    // auto reconnect on disconnect (default: true)
   reconnect_delay?: number    // seconds between reconnect attempts (default: 30)
   reconnect_max_retries?: number // max reconnect attempts (default: 10)
+  autosendcmd?: string        // commands to run on connect, before autojoin (;-separated, WAIT <ms> for delays)
 }

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/ui/chat/ChatView.tsx

@@ -4,15 +4,21 @@ import { MessageLine } from "./MessageLine"
 import type { ScrollBoxRenderable } from "@opentui/core"
 
 export function ChatView() {
+  const buffer = useStore((s) => {
+    const id = s.activeBufferId
+    return id ? s.buffers.get(id) ?? null : null
+  })
   const activeBufferId = useStore((s) => s.activeBufferId)
-  const buffersMap = useStore((s) => s.buffers)
-  const connectionsMap = useStore((s) => s.connections)
+  const currentNick = useStore((s) => {
+    const id = s.activeBufferId
+    if (!id) return ""
+    const buf = s.buffers.get(id)
+    if (!buf) return ""
+    return s.connections.get(buf.connectionId)?.nick ?? ""
+  })
   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) {

package/src/ui/chat/MessageLine.tsx

@@ -1,9 +1,12 @@
 import { useStore } from "@/core/state/store"
 import { resolveAbstractions, parseFormatString, StyledText } 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
@@ -84,8 +87,22 @@ 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
+      }
+    }
+  }
+
   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"
@@ -75,7 +76,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 ?? "",

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)
@@ -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>
+    </>
+  )
+}