index.tsx

import {
  BoxRenderable,
  TextareaRenderable,
  MouseEvent,
  PasteEvent,
  RGBA,
  TextAttributes,
  decodePasteBytes,
  t,
  dim,
  fg,
} from "@opentui/core"
import { createEffect, createMemo, onMount, createSignal, onCleanup, on, Show, Switch, Match } from "solid-js"
import "opentui-spinner/solid"
import path from "path"
import { fileURLToPath } from "url"
import { Filesystem } from "@/util/filesystem"
import { useLocal } from "@tui/context/local"
import { selectedForeground, tint, useTheme } from "@tui/context/theme"
import { EmptyBorder, SplitBorder } from "@tui/component/border"
import { useSDK } from "@tui/context/sdk"
import { useRoute } from "@tui/context/route"
import { useProject } from "@tui/context/project"
import { useSync } from "@tui/context/sync"
import { useEvent } from "@tui/context/event"
import { useEditorContext } from "@tui/context/editor"
import { MessageID, PartID } from "@/session/schema"
import { createStore, produce, unwrap } from "solid-js/store"
import { useKeybind } from "@tui/context/keybind"
import { usePromptHistory, type PromptInfo } from "./history"
import { assign } from "./part"
import { usePromptStash } from "./stash"
import { DialogStash } from "../dialog-stash"
import { type AutocompleteRef, Autocomplete } from "./autocomplete"
import { useCommandDialog } from "../dialog-command"
import { useRenderer, useTerminalDimensions, type JSX } from "@opentui/solid"
import * as Editor from "@tui/util/editor"
import { useExit } from "../../context/exit"
import { useTuiConfig } from "../../context/tui-config"
import * as Clipboard from "../../util/clipboard"
import type { AssistantMessage, FilePart, UserMessage } from "@opencode-ai/sdk/v2"
import { TuiEvent } from "../../event"
import { iife } from "@/util/iife"
import { Locale } from "@/util/locale"
import { formatDuration } from "@/util/format"
import { createColors, createFrames } from "../../ui/spinner.ts"
import { useDialog } from "@tui/ui/dialog"
import { DialogProvider as DialogProviderConnect } from "../dialog-provider"
import { DialogAlert } from "../../ui/dialog-alert"
import { useToast } from "../../ui/toast"
import { useKV } from "../../context/kv"
import { createFadeIn } from "../../util/signal"
import { useTextareaKeybindings } from "../textarea-keybindings"
import { DialogSkill } from "../dialog-skill"
import { DialogWorkspaceCreate, restoreWorkspaceSession } from "../dialog-workspace-create"
import { DialogWorkspaceUnavailable } from "../dialog-workspace-unavailable"
import { useArgs } from "@tui/context/args"
import { useVimEnabled } from "../vim"
import { createVimState, type VimMode, type VimRegister } from "../vim/vim-state"
import { createVimHandler } from "../vim/vim-handler"
import { clearSelection } from "../vim/vim-motions"
import { vimScroll } from "../vim/vim-scroll"
import { useVimIndicator } from "../vim/vim-indicator"
import { emptyRows } from "./empty-selection"
import { CONSOLE_MANAGED_ICON, consoleManagedProviderLabel } from "@tui/util/provider-origin"

export type PromptProps = {
  sessionID?: string
  workspaceID?: string
  visible?: boolean
  disabled?: boolean
  onSubmit?: () => void
  ref?: (ref: PromptRef | undefined) => void
  hint?: JSX.Element
  right?: JSX.Element
  showPlaceholder?: boolean
  placeholders?: {
    normal?: string[]
    shell?: string[]
  }
  copy?: {
    enter: () => void
    exit: () => void
    visual: (mode: "char" | "line") => void
    yank: () => { text: string; linewise: boolean } | null
    copy: () => Promise<void> | void
    isVisual: () => boolean
    exitVisual: () => void
    visualMode: () => undefined | "char" | "line"
    move: (action: "up" | "down" | "left" | "right") => void
    jump: (action: "top" | "bottom" | "high" | "middle" | "low") => void
    wordNext: (big: boolean) => boolean
    wordPrev: (big: boolean) => boolean
    nextParagraph: () => boolean
    previousParagraph: () => boolean
    text: () => string
    col: () => number
    setCol: (offset: number) => void
    setStick: (stick: "start" | "first" | "end") => void
    scroll: (action: "center" | "top" | "bottom") => void
    active: () => boolean
  }
}

export type PromptRef = {
  focused: boolean
  current: PromptInfo
  set(prompt: PromptInfo): void
  reset(): void
  blur(): void
  focus(): void
  submit(): void
}

let lastVimMode: VimMode = "insert"
const EMPTY_RENDER = "__vim_empty_render"
const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

function randomIndex(count: number) {
  if (count <= 0) return 0
  return Math.floor(Math.random() * count)
}

function fadeColor(color: RGBA, alpha: number) {
  return RGBA.fromValues(color.r, color.g, color.b, color.a * alpha)
}

let stashed: { prompt: PromptInfo; cursor: number } | undefined

export function Prompt(props: PromptProps) {
  let input: TextareaRenderable
  let anchor: BoxRenderable
  let autocomplete: AutocompleteRef

  const keybind = useKeybind()
  const cfg = useTuiConfig()
  const local = useLocal()
  const args = useArgs()
  const sdk = useSDK()
  const editor = useEditorContext()
  const route = useRoute()
  const project = useProject()
  const sync = useSync()
  const dialog = useDialog()
  const toast = useToast()
  const status = createMemo(() => sync.data.session_status?.[props.sessionID ?? ""] ?? { type: "idle" })
  const history = usePromptHistory()
  const stash = usePromptStash()
  const command = useCommandDialog()
  const renderer = useRenderer()
  const dimensions = useTerminalDimensions()
  const { theme, syntax } = useTheme()
  const kv = useKV()
  const vimEnabled = useVimEnabled()
  const mini = createMemo(() => kv.get("ui_minimal", false))
  const animationsEnabled = createMemo(() => kv.get("animations_enabled", true))
  const list = createMemo(() => props.placeholders?.normal ?? [])
  const shell = createMemo(() => props.placeholders?.shell ?? [])
  const fileContextEnabled = createMemo(() => kv.get("file_context_enabled", true))
  const editorPath = createMemo(() => (fileContextEnabled() ? editor.selection()?.filePath : undefined))
  const editorSelectionLabel = createMemo(() => {
    const selection = fileContextEnabled() ? editor.selection()?.selection : undefined
    if (!selection) return
    if (selection.start.line === selection.end.line && selection.start.character === selection.end.character) return
    if (selection.start.line === selection.end.line) return `#${selection.start.line}`
    return `#${selection.start.line}-${selection.end.line}`
  })
  const editorFileLabel = createMemo(() => {
    const value = editorPath()
    if (!value) return
    const filename = path.basename(value)
    const file = /^index\.[^./]+$/.test(filename)
      ? [path.basename(path.dirname(value)), filename].filter(Boolean).join("/")
      : filename
    return `${file.split(path.sep).join("/")}${editorSelectionLabel() ?? ""}`
  })
  const editorFileLabelDisplay = createMemo(() => {
    const file = editorFileLabel()
    if (!file) return
    return Locale.truncateMiddle(file, Math.max(12, Math.min(48, Math.floor(dimensions().width / 3))))
  })
  const [auto, setAuto] = createSignal<AutocompleteRef>()
  const maxHeight = createMemo(() => cfg?.prompt_max_height ?? 6)
  const showScrollbar = createMemo(() => cfg?.prompt_scrollbar !== false)
  const activeOrgName = createMemo(() => sync.data.console_state.activeOrgName)
  const canSwitchOrgs = createMemo(() => sync.data.console_state.switchableOrgCount > 1)
  const currentProviderLabel = createMemo(() => {
    const current = local.model.current()
    const provider = local.model.parsed().provider
    if (!current) return provider
    return consoleManagedProviderLabel(sync.data.console_state.consoleManagedProviders, current.providerID, provider)
  })
  const hasRightContent = createMemo(() => Boolean(props.right || activeOrgName()))

  const [scrollbar, setScrollbar] = createSignal<string[] | null>(null)
  function syncScrollbar() {
    setTimeout(() => {
      if (!input || input.isDestroyed) return
      if (!showScrollbar()) {
        if (scrollbar() !== null) {
          setScrollbar(null)
          renderer.requestRender()
        }
        return
      }
      const total = input.editorView.getTotalVirtualLineCount()
      const h = input.height
      if (total <= h) {
        if (scrollbar() !== null) {
          setScrollbar(null)
          renderer.requestRender()
        }
        return
      }
      const range = total - h
      const virtual = h * 2
      const size = Math.max(1, Math.floor(virtual * (h / total)))
      const ratio = range > 0 ? input.scrollY / range : 0
      const start = Math.round(ratio * (virtual - size))
      const end = start + size
      const chars: string[] = []
      for (let row = 0; row < h; row++) {
        const cs = row * 2
        const ce = cs + 2
        const ts = Math.max(start, cs)
        const te = Math.min(end, ce)
        const cov = te - ts
        if (cov >= 2) chars.push("\u2588")
        else if (cov > 0) chars.push(ts - cs === 0 ? "\u2580" : "\u2584")
        else chars.push(" ")
      }
      setScrollbar(chars)
      renderer.requestRender()
    }, 0)
  }

  createEffect(() => {
    if (showScrollbar()) {
      syncScrollbar()
      return
    }
    if (scrollbar() !== null) setScrollbar(null)
  })

  function promptModelWarning() {
    toast.show({
      variant: "warning",
      message: "Connect a provider to send prompts",
      duration: 3000,
    })
    if (sync.data.provider.length === 0) {
      dialog.replace(() => <DialogProviderConnect />)
    }
  }

  const textareaKeybindings = useTextareaKeybindings()

  const fileStyleId = syntax().getStyleId("extmark.file")!
  const agentStyleId = syntax().getStyleId("extmark.agent")!
  const pasteStyleId = syntax().getStyleId("extmark.paste")!
  let promptPartTypeId = 0
  const event = useEvent()

  event.on(TuiEvent.PromptAppend.type, (evt) => {
    if (!input || input.isDestroyed) return
    input.insertText(evt.properties.text)
    setTimeout(() => {
      // setTimeout is a workaround and needs to be addressed properly
      if (!input || input.isDestroyed) return
      input.getLayoutNode().markDirty()
      input.gotoBufferEnd()
      renderer.requestRender()
    }, 0)
  })

  createEffect(() => {
    if (props.disabled || vimState.isCopy()) {
      input.cursorColor = theme.backgroundElement
      input.showCursor = false
      return
    }
    const visual = vimState.isVisual()
    input.cursorColor = theme.text
    input.showCursor = !visual
    input.selectionBg = visual ? theme.secondary : undefined
    input.selectionFg = visual ? selectedForeground(theme, theme.secondary) : undefined
  })

  createEffect((prev: boolean | undefined) => {
    const active = props.copy?.active() ?? false
    if (prev === true && !active && vimState.isCopy()) {
      vimState.setMode("normal")
    }
    return active
  })

  createEffect(() => {
    if (!input || input.isDestroyed) return
    if (vimEnabled() && store.mode === "normal") {
      if (vimState.isCopy()) {
        input.cursorStyle = { style: "block", blinking: false }
        return
      }
      if (vimState.isInsert()) {
        input.cursorStyle = { style: "line", blinking: true }
        return
      }
      if (vimState.isReplace()) {
        input.cursorStyle = { style: "underline", blinking: false }
        return
      }
      input.cursorStyle = { style: "block", blinking: false }
      return
    }
    input.cursorStyle = { style: "block", blinking: true }
  })

  const lastUserMessage = createMemo(() => {
    if (!props.sessionID) return undefined
    const messages = sync.data.message[props.sessionID]
    if (!messages) return undefined
    return messages.findLast((m): m is UserMessage => m.role === "user")
  })

  const usage = createMemo(() => {
    if (!props.sessionID) return
    const msg = sync.data.message[props.sessionID] ?? []
    const last = msg.findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
    if (!last) return

    const tokens =
      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
    if (tokens <= 0) return

    const model = sync.data.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
    const pct = model?.limit.context ? `${Math.round((tokens / model.limit.context) * 100)}%` : undefined
    const cost = msg.reduce((sum, item) => sum + (item.role === "assistant" ? item.cost : 0), 0)
    return {
      context: pct ? `${Locale.number(tokens)} (${pct})` : Locale.number(tokens),
      cost: cost > 0 ? money.format(cost) : undefined,
    }
  })

  const [store, setStore] = createStore<{
    prompt: PromptInfo
    mode: "normal" | "shell"
    extmarkToPartIndex: Map<number, number>
    interrupt: number
    placeholder: number
  }>({
    placeholder: randomIndex(list().length),
    prompt: {
      input: "",
      parts: [],
    },
    mode: "normal",
    extmarkToPartIndex: new Map(),
    interrupt: 0,
  })
  const vimState = createVimState({
    enabled: vimEnabled,
    initial: () => lastVimMode,
  })
  onCleanup(() => {
    if (vimEnabled()) lastVimMode = vimState.isCopy() ? "normal" : vimState.mode()
  })
  const vimIndicator = useVimIndicator({
    enabled: vimEnabled,
    active: () => store.mode === "normal",
    state: vimState,
    copyVisual: () => props.copy?.visualMode(),
  })
  let flash = 0
  let timer: ReturnType<typeof setTimeout> | undefined
  let clipboardRegister: VimRegister = null
  onCleanup(() => {
    if (timer) clearTimeout(timer)
  })

  function useSystemClipboardRegister() {
    return !!cfg.vim_system_clipboard_register
  }

  function promptActive() {
    if (!input || input.isDestroyed) return false
    return input.plainText.length > 0
  }

  function promptSelectionText() {
    if (!input || input.isDestroyed) return
    const text = input.editorView.getSelectedText()
    if (!text) return
    return text
  }

  async function copyPromptSelection() {
    const text = promptSelectionText()
    if (!text) return false
    return Clipboard.copy(text)
      .then(() => {
        toast.show({ message: "Copied to clipboard", variant: "info" })
        return true
      })
      .catch((error) => {
        toast.error(error)
        return false
      })
  }

  function setVimRegister(register: VimRegister, notify = false) {
    if (!useSystemClipboardRegister()) {
      vimState.setRegister(register)
      return
    }
    clipboardRegister = register
    if (!register) return
    Clipboard.copy(register.text)
      .then(() => {
        if (notify) toast.show({ message: "Copied to clipboard", variant: "info" })
      })
      .catch(toast.error)
  }

  async function syncVimRegisterFromClipboard() {
    if (!useSystemClipboardRegister()) return
    const content = await Clipboard.read()
    if (content?.mime !== "text/plain" || !content.data) {
      clipboardRegister = null
      return
    }
    clipboardRegister = {
      text: content.data,
      linewise: clipboardRegister?.text === content.data ? clipboardRegister.linewise : false,
    }
  }

  function shouldSyncVimRegister(event: { name?: string; ctrl?: boolean; meta?: boolean; super?: boolean }) {
    if (!useSystemClipboardRegister() || !vimEnabled()) return false
    if (event.ctrl || event.meta || event.super) return false
    if (vimState.isInsert() || vimState.isReplace() || vimState.isCopy()) return false
    return event.name?.toLowerCase() === "p"
  }

  function promptJump(action: "top" | "bottom" | "high" | "middle" | "low") {
    if (!input || input.isDestroyed) return
    if (action === "top") {
      input.gotoBufferHome()
      return
    }
    if (action === "bottom") {
      input.gotoBufferEnd()
      return
    }

    const row =
      action === "high" ? 0 : action === "middle" ? Math.max(0, Math.floor((input.height - 1) / 2)) : input.height - 1

    let prev = -1
    while (input.visualCursor.visualRow > row && input.cursorOffset !== prev) {
      prev = input.cursorOffset
      input.moveCursorUp()
    }

    prev = -1
    while (input.visualCursor.visualRow < row && input.cursorOffset !== prev) {
      prev = input.cursorOffset
      input.moveCursorDown()
    }
  }

  const vim = createVimHandler({
    enabled: vimEnabled,
    state: vimState,
    textarea: () => input,
    register: () => (useSystemClipboardRegister() ? clipboardRegister : vimState.register()),
    setRegister: setVimRegister,
    submit,
    scroll(action) {
      if (action === "line-down") command.trigger("session.line.down")
      if (action === "line-up") command.trigger("session.line.up")
      if (action === "half-down") command.trigger("session.half.page.down")
      if (action === "half-up") command.trigger("session.half.page.up")
      if (action === "page-down") command.trigger("session.page.down")
      if (action === "page-up") command.trigger("session.page.up")
    },
    jump(action) {
      if (action === "high" || action === "middle" || action === "low") {
        promptJump(action)
        return
      }
      if (promptActive()) {
        promptJump(action)
        return
      }
      if (action === "top") command.trigger("session.first")
      if (action === "bottom") command.trigger("session.last")
    },
    copy(action) {
      props.copy?.move(action)
    },
    copyVisual(mode) {
      props.copy?.visual(mode)
    },
    copyExitVisual() {
      props.copy?.exitVisual()
    },
    copyYank() {
      const reg = props.copy?.yank()
      if (reg) setVimRegister(reg, true)
    },
    copyCopy() {
      return props.copy?.copy()
    },
    copyIsVisual() {
      return props.copy?.isVisual() ?? false
    },
    copyJump(action) {
      props.copy?.jump(action)
    },
    copyWordNext(big) {
      return props.copy?.wordNext(big) ?? false
    },
    copyWordPrev(big) {
      return props.copy?.wordPrev(big) ?? false
    },
    copyNextParagraph() {
      return props.copy?.nextParagraph() ?? false
    },
    copyPreviousParagraph() {
      return props.copy?.previousParagraph() ?? false
    },
    copyText() {
      return props.copy?.text() ?? ""
    },
    copyCol() {
      return props.copy?.col() ?? 0
    },
    setCopyCol(offset: number) {
      props.copy?.setCol(offset)
    },
    setCopyStick(stick: "start" | "first" | "end") {
      props.copy?.setStick(stick)
    },
    copyScroll(action: "center" | "top" | "bottom") {
      props.copy?.scroll(action)
    },
    autocomplete: () => autocomplete.visible,
    history: () => true,
    snapshot: promptSnapshot,
    restore(next) {
      input.setText(next.text)
      input.cursorOffset = Math.max(0, Math.min(next.cursor, next.text.length))
      const parts = Array.isArray(next.data) ? (next.data as PromptInfo["parts"]) : []
      setStore("prompt", {
        input: next.text,
        parts,
      })
      restoreExtmarksFromParts(parts)
    },
    flash(span) {
      flash++
      const id = flash
      const cur = input.cursorOffset
      input.editorView.setSelection(span.start, span.end)
      input.cursorOffset = cur
      input.getLayoutNode().markDirty()
      renderer.requestRender()
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        if (!input || input.isDestroyed) return
        if (id !== flash) return
        if (vimState.isVisual()) return
        const sel = input.editorView.getSelection()
        if (!sel) return
        if (sel.start !== span.start || sel.end !== span.end) return
        clearSelection(input)
        input.getLayoutNode().markDirty()
        renderer.requestRender()
      }, 70)
    },
  })

  createEffect(
    on(
      () => props.sessionID,
      () => {
        setStore("placeholder", randomIndex(list().length))
      },
      { defer: true },
    ),
  )

  // Initialize agent/model/variant from last user message when session changes
  let syncedSessionID: string | undefined
  createEffect(() => {
    const sessionID = props.sessionID
    const msg = lastUserMessage()

    if (sessionID !== syncedSessionID) {
      if (!sessionID || !msg) return

      syncedSessionID = sessionID

      // Only set agent if it's a primary agent (not a subagent)
      const isPrimaryAgent = local.agent.list().some((x) => x.name === msg.agent)
      if (msg.agent && isPrimaryAgent) {
        // Keep command line --agent if specified.
        if (!args.agent) local.agent.set(msg.agent)
        if (msg.model) {
          local.model.set(msg.model)
          local.model.variant.set(msg.model.variant)
        }
      }
    }
  })

  command.register(() => {
    return [
      {
        title: "Clear prompt",
        value: "prompt.clear",
        category: "Prompt",
        hidden: true,
        onSelect: (dialog) => {
          input.extmarks.clear()
          input.clear()
          vimState.resetHistory()
          dialog.clear()
        },
      },
      {
        title: "Submit prompt",
        value: "prompt.submit",
        category: "Prompt",
        hidden: true,
        onSelect: async (dialog) => {
          if (!input.focused) return
          const handled = await submit()
          if (!handled) return

          dialog.clear()
        },
      },
      {
        title: "Copy prompt selection",
        value: "prompt.copy_selection",
        keybind: "prompt_copy_selection",
        category: "Prompt",
        enabled: () => !!promptSelectionText(),
        onSelect: async (dialog) => {
          if (!(await copyPromptSelection())) return
          dialog.clear()
        },
      },
      {
        title: "Paste",
        value: "prompt.paste",
        keybind: "input_paste",
        category: "Prompt",
        hidden: true,
        onSelect: async () => {
          const content = await Clipboard.read()
          if (content?.mime.startsWith("image/")) {
            await pasteAttachment({
              filename: "clipboard",
              mime: content.mime,
              content: content.data,
            })
          }
        },
      },
      {
        title: "Interrupt session",
        value: "session.interrupt",
        keybind: "session_interrupt",
        category: "Session",
        hidden: true,
        enabled: status().type !== "idle",
        onSelect: (dialog) => {
          if (autocomplete.visible) return
          if (!input.focused) return
          if (vimState.isCopy()) {
            vimState.setMode("normal")
            props.copy?.exit()
            dialog.clear()
            return
          }
          if (vimEnabled() && store.mode === "normal" && vimState.mode() !== "normal") {
            if (vimState.isVisual()) clearSelection(input)
            vimState.setMode("normal")
            setStore("interrupt", 0)
            dialog.clear()
            return
          }
          // TODO: this should be its own command
          if (store.mode === "shell") {
            setStore("mode", "normal")
            vimState.clearPending()
            return
          }
          if (!props.sessionID) return

          setStore("interrupt", store.interrupt + 1)

          setTimeout(() => {
            setStore("interrupt", 0)
          }, 5000)

          if (store.interrupt >= 2) {
            void sdk.client.session.abort({
              sessionID: props.sessionID,
            })
            setStore("interrupt", 0)
          }
          dialog.clear()
        },
      },
      {
        title: "Open editor",
        category: "Session",
        keybind: "editor_open",
        value: "prompt.editor",
        slash: {
          name: "editor",
        },
        onSelect: async (dialog) => {
          dialog.clear()

          // replace summarized text parts with the actual text
          const text = store.prompt.parts
            .filter((p) => p.type === "text")
            .reduce((acc, p) => {
              if (!p.source) return acc
              return acc.replace(p.source.text.value, p.text)
            }, store.prompt.input)

          const nonTextParts = store.prompt.parts.filter((p) => p.type !== "text")

          const value = text
          const content = await Editor.open({ value, renderer })
          if (!content) return

          input.setText(content)

          // Update positions for nonTextParts based on their location in new content
          // Filter out parts whose virtual text was deleted
          // this handles a case where the user edits the text in the editor
          // such that the virtual text moves around or is deleted
          const updatedNonTextParts = nonTextParts
            .map((part) => {
              let virtualText = ""
              if (part.type === "file" && part.source?.text) {
                virtualText = part.source.text.value
              } else if (part.type === "agent" && part.source) {
                virtualText = part.source.value
              }

              if (!virtualText) return part

              const newStart = content.indexOf(virtualText)
              // if the virtual text is deleted, remove the part
              if (newStart === -1) return null

              const newEnd = newStart + virtualText.length

              if (part.type === "file" && part.source?.text) {
                return {
                  ...part,
                  source: {
                    ...part.source,
                    text: {
                      ...part.source.text,
                      start: newStart,
                      end: newEnd,
                    },
                  },
                }
              }

              if (part.type === "agent" && part.source) {
                return {
                  ...part,
                  source: {
                    ...part.source,
                    start: newStart,
                    end: newEnd,
                  },
                }
              }

              return part
            })
            .filter((part) => part !== null)

          setStore("prompt", {
            input: content,
            // keep only the non-text parts because the text parts were
            // already expanded inline
            parts: updatedNonTextParts,
          })
          restoreExtmarksFromParts(updatedNonTextParts)
          input.cursorOffset = Bun.stringWidth(content)
          vimState.resetHistory()
        },
      },
      {
        title: "Copy mode",
        value: "session.copy_mode",
        keybind: "copy_mode",
        category: "Session",
        hidden: true,
        onSelect: (dialog) => {
          if (!vimEnabled() || !props.copy) return
          if (vimState.isCopy()) {
            vimState.setMode("normal")
            props.copy.exit()
            dialog.clear()
            return
          }
          vimState.setMode("copy")
          props.copy.enter()
          dialog.clear()
        },
      },
      {
        title: "Skills",
        value: "prompt.skills",
        category: "Prompt",
        slash: {
          name: "skills",
        },
        onSelect: () => {
          dialog.replace(() => (
            <DialogSkill
              onSelect={(skill) => {
                input.setText(`/${skill} `)
                setStore("prompt", {
                  input: `/${skill} `,
                  parts: [],
                })
                input.gotoBufferEnd()
                vimState.resetHistory()
              }}
            />
          ))
        },
      },
    ]
  })

  const ref: PromptRef = {
    get focused() {
      return input.focused
    },
    get current() {
      return store.prompt
    },
    focus() {
      input.focus()
    },
    blur() {
      input.blur()
    },
    set(prompt) {
      input.setText(prompt.input)
      setStore("prompt", prompt)
      restoreExtmarksFromParts(prompt.parts)
      input.gotoBufferEnd()
      vimState.resetHistory()
    },
    reset() {
      input.clear()
      input.extmarks.clear()
      setStore("prompt", {
        input: "",
        parts: [],
      })
      setStore("extmarkToPartIndex", new Map())
      vimState.resetHistory()
    },
    submit() {
      void submit()
    },
  }

  onMount(() => {
    const saved = stashed
    stashed = undefined
    if (store.prompt.input) return
    if (saved && saved.prompt.input) {
      input.setText(saved.prompt.input)
      setStore("prompt", saved.prompt)
      restoreExtmarksFromParts(saved.prompt.parts)
      input.cursorOffset = saved.cursor
    }
  })

  onCleanup(() => {
    if (store.prompt.input) {
      stashed = { prompt: unwrap(store.prompt), cursor: input.cursorOffset }
    }
    props.ref?.(undefined)
  })

  createEffect(() => {
    if (!input || input.isDestroyed) return
    if (props.visible === false || dialog.stack.length > 0) {
      if (input.focused) input.blur()
      vimState.clearPending()
      return
    }

    // Slot/plugin updates can remount the background prompt while a dialog is open.
    // Keep focus with the dialog and let the prompt reclaim it after the dialog closes.
    if (!input.focused) input.focus()
  })

  createEffect(() => {
    if (!input || input.isDestroyed) return
    const capture =
      store.mode === "normal"
        ? auto()?.visible
          ? (["escape", "navigate", "submit", "tab"] as const)
          : (["tab"] as const)
        : undefined
    input.traits = {
      capture,
      suspend: !!props.disabled || store.mode === "shell",
      status: store.mode === "shell" ? "SHELL" : undefined,
    }
  })

  function submitFromTextarea() {
    if (store.mode !== "normal") {
      submit()
      return
    }
    if (vimEnabled() && (vimState.isInsert() || vimState.isReplace()) && !cfg.vim_enter_submit) {
      input.insertText("\n")
      return
    }
    submit()
  }

  function restoreExtmarksFromParts(parts: PromptInfo["parts"]) {
    input.extmarks.clear()
    setStore("extmarkToPartIndex", new Map())

    parts.forEach((part, partIndex) => {
      let start = 0
      let end = 0
      let virtualText = ""
      let styleId: number | undefined

      if (part.type === "file" && part.source?.text) {
        start = part.source.text.start
        end = part.source.text.end
        virtualText = part.source.text.value
        styleId = fileStyleId
      } else if (part.type === "agent" && part.source) {
        start = part.source.start
        end = part.source.end
        virtualText = part.source.value
        styleId = agentStyleId
      } else if (part.type === "text" && part.source?.text) {
        start = part.source.text.start
        end = part.source.text.end
        virtualText = part.source.text.value
        styleId = pasteStyleId
      }

      if (virtualText) {
        const extmarkId = input.extmarks.create({
          start,
          end,
          virtual: true,
          styleId,
          typeId: promptPartTypeId,
        })
        setStore("extmarkToPartIndex", (map: Map<number, number>) => {
          const newMap = new Map(map)
          newMap.set(extmarkId, partIndex)
          return newMap
        })
      }
    })
  }

  function syncExtmarksWithPromptParts() {
    const allExtmarks = input.extmarks.getAllForTypeId(promptPartTypeId)
    setStore(
      produce((draft) => {
        const newMap = new Map<number, number>()
        const newParts: typeof draft.prompt.parts = []

        for (const extmark of allExtmarks) {
          const partIndex = draft.extmarkToPartIndex.get(extmark.id)
          if (partIndex !== undefined) {
            const part = draft.prompt.parts[partIndex]
            if (part) {
              if (part.type === "agent" && part.source) {
                part.source.start = extmark.start
                part.source.end = extmark.end
              } else if (part.type === "file" && part.source?.text) {
                part.source.text.start = extmark.start
                part.source.text.end = extmark.end
              } else if (part.type === "text" && part.source?.text) {
                part.source.text.start = extmark.start
                part.source.text.end = extmark.end
              }
              newMap.set(extmark.id, newParts.length)
              newParts.push(part)
            }
          }
        }

        draft.extmarkToPartIndex = newMap
        draft.prompt.parts = newParts
      }),
    )
  }

  command.register(() => [
    {
      title: "Stash prompt",
      value: "prompt.stash",
      category: "Prompt",
      enabled: !!store.prompt.input,
      onSelect: (dialog) => {
        if (!store.prompt.input) return
        stash.push({
          input: store.prompt.input,
          parts: store.prompt.parts,
        })
        input.extmarks.clear()
        input.clear()
        setStore("prompt", { input: "", parts: [] })
        setStore("extmarkToPartIndex", new Map())
        vimState.resetHistory()
        dialog.clear()
      },
    },
    {
      title: "Stash pop",
      value: "prompt.stash.pop",
      category: "Prompt",
      enabled: stash.list().length > 0,
      onSelect: (dialog) => {
        const entry = stash.pop()
        if (entry) {
          input.setText(entry.input)
          setStore("prompt", { input: entry.input, parts: entry.parts })
          restoreExtmarksFromParts(entry.parts)
          input.gotoBufferEnd()
          vimState.resetHistory()
        }
        dialog.clear()
      },
    },
    {
      title: "Stash list",
      value: "prompt.stash.list",
      category: "Prompt",
      enabled: stash.list().length > 0,
      onSelect: (dialog) => {
        dialog.replace(() => (
          <DialogStash
            onSelect={(entry) => {
              input.setText(entry.input)
              setStore("prompt", { input: entry.input, parts: entry.parts })
              restoreExtmarksFromParts(entry.parts)
              input.gotoBufferEnd()
              vimState.resetHistory()
            }}
          />
        ))
      },
    },
  ])

  async function submit() {
    // IME: double-defer may fire before onContentChange flushes the last
    // composed character (e.g. Korean hangul) to the store, so read
    // plainText directly and sync before any downstream reads.
    if (input && !input.isDestroyed && input.plainText !== store.prompt.input) {
      setStore("prompt", "input", input.plainText)
      syncExtmarksWithPromptParts()
    }
    if (props.disabled) return false
    if (autocomplete?.visible) return false
    if (!store.prompt.input) return false
    const agent = local.agent.current()
    if (!agent) return false
    const trimmed = store.prompt.input.trim()
    if (trimmed === "exit" || trimmed === "quit" || trimmed === ":q") {
      void exit()
      return true
    }
    const selectedModel = local.model.current()
    if (!selectedModel) {
      void promptModelWarning()
      return false
    }

    const workspaceSession = props.sessionID ? sync.session.get(props.sessionID) : undefined
    const workspaceID = workspaceSession?.workspaceID
    const workspaceStatus = workspaceID ? (project.workspace.status(workspaceID) ?? "error") : undefined
    if (props.sessionID && workspaceID && workspaceStatus !== "connected") {
      dialog.replace(() => (
        <DialogWorkspaceUnavailable
          onRestore={() => {
            dialog.replace(() => (
              <DialogWorkspaceCreate
                onSelect={(nextWorkspaceID) =>
                  restoreWorkspaceSession({
                    dialog,
                    sdk,
                    sync,
                    project,
                    toast,
                    workspaceID: nextWorkspaceID,
                    sessionID: props.sessionID!,
                  })
                }
              />
            ))
          }}
        />
      ))
      return false
    }

    let sessionID = props.sessionID
    if (sessionID == null) {
      const res = await sdk.client.session.create({ workspace: props.workspaceID })

      if (res.error) {
        console.log("Creating a session failed:", res.error)

        toast.show({
          message: "Creating a session failed. Open console for more details.",
          variant: "error",
        })

        return true
      }

      sessionID = res.data.id
    }

    const messageID = MessageID.ascending()
    let inputText = store.prompt.input

    // Expand pasted text inline before submitting
    const allExtmarks = input.extmarks.getAllForTypeId(promptPartTypeId)
    const sortedExtmarks = allExtmarks.sort((a: { start: number }, b: { start: number }) => b.start - a.start)

    for (const extmark of sortedExtmarks) {
      const partIndex = store.extmarkToPartIndex.get(extmark.id)
      if (partIndex !== undefined) {
        const part = store.prompt.parts[partIndex]
        if (part?.type === "text" && part.text) {
          const before = inputText.slice(0, extmark.start)
          const after = inputText.slice(extmark.end)
          inputText = before + part.text + after
        }
      }
    }

    // Filter out text parts (pasted content) since they're now expanded inline
    const nonTextParts = store.prompt.parts.filter((part) => part.type !== "text")

    // Capture mode before it gets reset
    const currentMode = store.mode
    const variant = local.model.variant.current()
    const editorSelection = fileContextEnabled() ? editor.selection() : undefined
    const editorParts = editorSelection
      ? [
          {
            id: PartID.ascending(),
            type: "text" as const,
            text: (() => {
              const start = editorSelection.selection.start
              const end = editorSelection.selection.end

              let text = ""
              if (start.line === end.line && start.character === end.character) {
                text = `Note: The user opened the file "${editorSelection.filePath}".`
              } else if (start.line === end.line) {
                text = `Note: The user selected line ${start.line + 1} from "${editorSelection.filePath}". \`\`\`${editorSelection.text}\`\`\`\n\n`
              } else {
                text = `Note: The user selected lines ${start.line + 1} to ${end.line + 1} from "${editorSelection.filePath}". \`\`\`${editorSelection.text}\`\`\`\n\n`
              }

              return `<system-reminder>${text} This may or may not be relevant to the current task.</system-reminder>\n`
            })(),
            synthetic: true,
            metadata: {
              kind: "editor_context",
              source: editorSelection.source ?? "editor",
              filePath: editorSelection.filePath,
              selection: editorSelection.selection,
            },
          },
        ]
      : []

    if (store.mode === "shell") {
      void sdk.client.session.shell({
        sessionID,
        agent: agent.name,
        model: {
          providerID: selectedModel.providerID,
          modelID: selectedModel.modelID,
        },
        command: inputText,
      })
      setStore("mode", "normal")
    } else if (
      inputText.startsWith("/") &&
      iife(() => {
        const firstLine = inputText.split("\n")[0]
        const command = firstLine.split(" ")[0].slice(1)
        return sync.data.command.some((x) => x.name === command)
      })
    ) {
      // Parse command from first line, preserve multi-line content in arguments
      const firstLineEnd = inputText.indexOf("\n")
      const firstLine = firstLineEnd === -1 ? inputText : inputText.slice(0, firstLineEnd)
      const [command, ...firstLineArgs] = firstLine.split(" ")
      const restOfInput = firstLineEnd === -1 ? "" : inputText.slice(firstLineEnd + 1)
      const args = firstLineArgs.join(" ") + (restOfInput ? "\n" + restOfInput : "")

      void sdk.client.session.command({
        sessionID,
        command: command.slice(1),
        arguments: args,
        agent: agent.name,
        model: `${selectedModel.providerID}/${selectedModel.modelID}`,
        messageID,
        variant,
        parts: nonTextParts
          .filter((x) => x.type === "file")
          .map((x) => ({
            id: PartID.ascending(),
            ...x,
          })),
      })
    } else {
      sdk.client.session
        .prompt({
          sessionID,
          ...selectedModel,
          messageID,
          agent: agent.name,
          model: selectedModel,
          variant,
          parts: [
            ...editorParts,
            {
              id: PartID.ascending(),
              type: "text",
              text: inputText,
            },
            ...nonTextParts.map(assign),
          ],
        })
        .catch(() => {})
      editor.clearSelection()
    }
    vimState.clearPending()
    history.append({
      ...store.prompt,
      mode: currentMode,
    })
    input.extmarks.clear()
    setStore("prompt", {
      input: "",
      parts: [],
    })
    setStore("extmarkToPartIndex", new Map())
    vimState.resetHistory()
    props.onSubmit?.()

    // temporary hack to make sure the message is sent
    if (!props.sessionID)
      setTimeout(() => {
        route.navigate({
          type: "session",
          sessionID,
        })
      }, 50)
    input.clear()
    return true
  }
  const exit = useExit()

  function promptSnapshot() {
    syncExtmarksWithPromptParts()
    return {
      text: input.plainText,
      cursor: input.cursorOffset,
      data: structuredClone(unwrap(store.prompt.parts)),
    }
  }

  function pasteText(text: string, virtualText: string) {
    const currentOffset = input.visualCursor.offset
    const extmarkStart = currentOffset
    const extmarkEnd = extmarkStart + virtualText.length

    input.insertText(virtualText + " ")

    const extmarkId = input.extmarks.create({
      start: extmarkStart,
      end: extmarkEnd,
      virtual: true,
      styleId: pasteStyleId,
      typeId: promptPartTypeId,
    })

    setStore(
      produce((draft) => {
        const partIndex = draft.prompt.parts.length
        draft.prompt.parts.push({
          type: "text" as const,
          text,
          source: {
            text: {
              start: extmarkStart,
              end: extmarkEnd,
              value: virtualText,
            },
          },
        })
        draft.extmarkToPartIndex.set(extmarkId, partIndex)
      }),
    )
  }

  async function pasteAttachment(file: { filename?: string; filepath?: string; content: string; mime: string }) {
    const currentOffset = input.visualCursor.offset
    const extmarkStart = currentOffset
    const pdf = file.mime === "application/pdf"
    const count = store.prompt.parts.filter((x) => {
      if (x.type !== "file") return false
      if (pdf) return x.mime === "application/pdf"
      return x.mime.startsWith("image/")
    }).length
    const virtualText = pdf ? `[PDF ${count + 1}]` : `[Image ${count + 1}]`
    const extmarkEnd = extmarkStart + virtualText.length
    const textToInsert = virtualText + " "

    input.insertText(textToInsert)

    const extmarkId = input.extmarks.create({
      start: extmarkStart,
      end: extmarkEnd,
      virtual: true,
      styleId: pasteStyleId,
      typeId: promptPartTypeId,
    })

    const part: Omit<FilePart, "id" | "messageID" | "sessionID"> = {
      type: "file" as const,
      mime: file.mime,
      filename: file.filename,
      url: `data:${file.mime};base64,${file.content}`,
      source: {
        type: "file",
        path: file.filepath ?? file.filename ?? "",
        text: {
          start: extmarkStart,
          end: extmarkEnd,
          value: virtualText,
        },
      },
    }
    setStore(
      produce((draft) => {
        const partIndex = draft.prompt.parts.length
        draft.prompt.parts.push(part)
        draft.extmarkToPartIndex.set(extmarkId, partIndex)
      }),
    )
    return
  }

  const dimmed = createMemo(() => keybind.leader || vimState.isCopy())
  const highlight = createMemo(() => {
    if (dimmed()) return theme.border
    if (store.mode === "shell") return theme.primary
    const agent = local.agent.current()
    if (!agent) return theme.border
    return local.agent.color(agent.name)
  })

  const showVariant = createMemo(() => {
    const variants = local.model.variant.list()
    if (variants.length === 0) return false
    const current = local.model.variant.current()
    return !!current
  })

  const agentMetaAlpha = createFadeIn(() => !!local.agent.current(), animationsEnabled)
  const modelMetaAlpha = createFadeIn(() => !!local.agent.current() && store.mode === "normal", animationsEnabled)
  const variantMetaAlpha = createFadeIn(
    () => !!local.agent.current() && store.mode === "normal" && showVariant(),
    animationsEnabled,
  )
  const borderHighlight = createMemo(() => tint(theme.border, highlight(), agentMetaAlpha()))

  const placeholderText = createMemo(() => {
    if (props.showPlaceholder === false) return undefined
    if (mini()) return undefined
    if (props.sessionID) return undefined
    if (store.mode === "shell") {
      if (!shell().length) return undefined
      const example = shell()[store.placeholder % shell().length]
      return `Run a command... "${example}"`
    }
    if (!list().length) return undefined
    return `Ask anything... "${list()[store.placeholder % list().length]}"`
  })

  const spinnerDef = createMemo(() => {
    const agent = local.agent.current()
    const color = agent ? local.agent.color(agent.name) : theme.border
    return {
      frames: createFrames({
        color,
        style: "blocks",
        inactiveFactor: 0.6,
        // enableFading: false,
        minAlpha: 0.3,
      }),
      color: createColors({
        color,
        style: "blocks",
        inactiveFactor: 0.6,
        // enableFading: false,
        minAlpha: 0.3,
      }),
    }
  })

  function isInsertIndicator(indicator: string) {
    return indicator === "-- INSERT --"
  }

  function isVisualIndicator(indicator: string) {
    return ["-- VISUAL --", "-- VISUAL LINE --", "-- V-COPY --", "-- VL-COPY --"].includes(indicator)
  }

  function VimIndicator() {
    return (
      <Show when={vimIndicator()}>
        {(indicator) => (
          <text
            fg={
              vimState.pending()
                ? theme.textMuted
                : isInsertIndicator(indicator())
                  ? local.agent.color(local.agent.current()?.name ?? "build")
                  : isVisualIndicator(indicator())
                    ? theme.text
                    : theme.textMuted
            }
            attributes={vimState.pending() || isVisualIndicator(indicator()) ? TextAttributes.BOLD : undefined}
          >
            {indicator()}
          </text>
        )}
      </Show>
    )
  }

  return (
    <>
      <Autocomplete
        sessionID={props.sessionID}
        ref={(r) => {
          autocomplete = r
          setAuto(() => r)
        }}
        anchor={() => anchor}
        input={() => input}
        setPrompt={(cb) => {
          setStore("prompt", produce(cb))
        }}
        setExtmark={(partIndex, extmarkId) => {
          setStore("extmarkToPartIndex", (map: Map<number, number>) => {
            const newMap = new Map(map)
            newMap.set(extmarkId, partIndex)
            return newMap
          })
        }}
        value={store.prompt.input}
        fileStyleId={fileStyleId}
        agentStyleId={agentStyleId}
        promptPartTypeId={() => promptPartTypeId}
      />
      <box ref={(r) => (anchor = r)} visible={props.visible !== false}>
        <box
          border={["left"]}
          borderColor={borderHighlight()}
          customBorderChars={{
            ...SplitBorder.customBorderChars,
            bottomLeft: "╹",
          }}
        >
          <box
            paddingLeft={2}
            paddingRight={1}
            paddingTop={1}
            flexShrink={0}
            backgroundColor={theme.backgroundElement}
            flexGrow={1}
          >
            <box flexDirection="row">
              <textarea
                placeholder={placeholderText()}
                placeholderColor={theme.textMuted}
                textColor={dimmed() ? theme.textMuted : theme.text}
                focusedTextColor={dimmed() ? theme.textMuted : theme.text}
                minHeight={1}
                maxHeight={maxHeight()}
                flexGrow={1}
                onCursorChange={() => syncScrollbar()}
                onContentChange={() => {
                  if (vimState.isCopy()) {
                    const prev = store.prompt.input
                    if (input.plainText !== prev) input.setText(prev)
                    return
                  }
                  const value = input.plainText
                  setStore("prompt", "input", value)
                  autocomplete.onInput(value)
                  syncExtmarksWithPromptParts()
                  syncScrollbar()
                }}
                keyBindings={textareaKeybindings()}
                onKeyDown={async (e) => {
                  if (props.disabled) {
                    e.preventDefault()
                    return
                  }
                  if (keybind.match("input_force_submit", e)) {
                    e.preventDefault()
                    void submit()
                    return
                  }
                  // In copy mode, forward all keys to vim handler
                  if (vimState.isCopy()) {
                    const active = vimState.isCopy()
                    vim.handleKey(e)
                    if (active && !vimState.isCopy()) props.copy?.exit()
                    if (!e.defaultPrevented) e.preventDefault()
                    return
                  }
                  // Check clipboard for images before terminal-handled paste runs.
                  // This helps terminals that forward Ctrl+V to the app; Windows
                  // Terminal 1.25+ usually handles Ctrl+V before this path.
                  if (keybind.match("input_paste", e)) {
                    const content = await Clipboard.read()
                    if (content?.mime.startsWith("image/")) {
                      e.preventDefault()
                      await pasteAttachment({
                        filename: "clipboard",
                        mime: content.mime,
                        content: content.data,
                      })
                      return
                    }
                    // If no image, let the default paste behavior continue
                  }
                  if (keybind.match("input_clear", e) && store.prompt.input !== "") {
                    input.clear()
                    input.extmarks.clear()
                    setStore("prompt", {
                      input: "",
                      parts: [],
                    })
                    setStore("extmarkToPartIndex", new Map())
                    vimState.resetHistory()
                    return
                  }
                  const isVimScrollOverride =
                    vimEnabled() &&
                    store.mode === "normal" &&
                    (vimState.mode() === "normal" || vimState.isCopy()) &&
                    !!vimScroll(e)
                  if (!isVimScrollOverride && keybind.match("app_exit", e)) {
                    if (store.prompt.input === "") {
                      await exit()
                      e.preventDefault()
                      return
                    }
                  }
                  if (e.name === "!" && input.visualCursor.offset === 0) {
                    setStore("placeholder", randomIndex(shell().length))
                    setStore("mode", "shell")
                    e.preventDefault()
                    return
                  }
                  if (store.mode === "shell") {
                    if ((e.name === "backspace" && input.visualCursor.offset === 0) || e.name === "escape") {
                      setStore("mode", "normal")
                      vimState.clearPending()
                      e.preventDefault()
                      return
                    }
                  }
                  if (store.mode === "normal") autocomplete.onKeyDown(e)
                  if (e.defaultPrevented) return
                  if (store.mode === "normal" && shouldSyncVimRegister(e)) {
                    e.preventDefault()
                    await syncVimRegisterFromClipboard()
                    vim.handleKey(e)
                    return
                  }
                  if (store.mode === "normal" && vim.handleKey(e)) return
                  if (!autocomplete.visible) {
                    if (
                      (keybind.match("history_previous", e) && input.cursorOffset === 0) ||
                      (keybind.match("history_next", e) && input.cursorOffset === input.plainText.length)
                    ) {
                      const direction = keybind.match("history_previous", e) ? -1 : 1
                      const item = history.move(direction, input.plainText)

                      if (item) {
                        input.setText(item.input)
                        setStore("prompt", item)
                        setStore("mode", item.mode ?? "normal")
                        restoreExtmarksFromParts(item.parts)
                        vimState.resetHistory()
                        e.preventDefault()
                        if (direction === -1) input.cursorOffset = 0
                        if (direction === 1) input.cursorOffset = input.plainText.length
                      }
                      return
                    }

                    if (keybind.match("history_previous", e) && input.visualCursor.visualRow === 0)
                      input.cursorOffset = 0
                    if (keybind.match("history_next", e) && input.visualCursor.visualRow === input.height - 1)
                      input.cursorOffset = input.plainText.length
                  }
                }}
                onSubmit={submitFromTextarea}
                onPaste={async (event: PasteEvent) => {
                  if (props.disabled) {
                    event.preventDefault()
                    return
                  }

                  // Normalize line endings at the boundary
                  // Windows ConPTY/Terminal often sends CR-only newlines in bracketed paste
                  // Replace CRLF first, then any remaining CR
                  const normalizedText = decodePasteBytes(event.bytes).replace(/\r\n/g, "\n").replace(/\r/g, "\n")
                  const pastedContent = normalizedText.trim()

                  // Windows Terminal <1.25 can surface image-only clipboard as an
                  // empty bracketed paste. Windows Terminal 1.25+ does not.
                  if (!pastedContent) {
                    command.trigger("prompt.paste")
                    return
                  }

                  // Once we cross an async boundary below, the terminal may perform its
                  // default paste unless we suppress it first and handle insertion ourselves.
                  event.preventDefault()

                  const filepath = iife(() => {
                    const raw = pastedContent.replace(/^['"]+|['"]+$/g, "")
                    if (raw.startsWith("file://")) {
                      try {
                        return fileURLToPath(raw)
                      } catch {}
                    }
                    if (process.platform === "win32") return raw
                    return raw.replace(/\\(.)/g, "$1")
                  })
                  const isUrl = /^(https?):\/\//.test(filepath)
                  if (!isUrl) {
                    try {
                      const mime = await Filesystem.mimeType(filepath)
                      const filename = path.basename(filepath)
                      if (mime === "image/svg+xml") {
                        const content = await Filesystem.readText(filepath).catch(() => {})
                        if (content) {
                          pasteText(content, `[SVG: ${filename ?? "image"}]`)
                          return
                        }
                      }
                      if (mime.startsWith("image/") || mime === "application/pdf") {
                        const content = await Filesystem.readArrayBuffer(filepath)
                          .then((buffer) => Buffer.from(buffer).toString("base64"))
                          .catch(() => {})
                        if (content) {
                          await pasteAttachment({
                            filename,
                            filepath,
                            mime,
                            content,
                          })
                          return
                        }
                      }
                    } catch {}
                  }

                  const lineCount = (pastedContent.match(/\n/g)?.length ?? 0) + 1
                  if (
                    (lineCount >= 3 || pastedContent.length > 150) &&
                    !sync.data.config.experimental?.disable_paste_summary
                  ) {
                    pasteText(pastedContent, `[Pasted ~${lineCount} lines]`)
                    return
                  }

                  input.insertText(normalizedText)

                  setTimeout(() => {
                    if (!input || input.isDestroyed) return
                    input.getLayoutNode().markDirty()
                    renderer.requestRender()
                  }, 0)
                }}
                ref={(r: TextareaRenderable) => {
                  input = r
                  if (promptPartTypeId === 0) {
                    promptPartTypeId = input.extmarks.registerType("prompt-part")
                  }
                  if (!(input as any)[EMPTY_RENDER]) {
                    ;(input as any)[EMPTY_RENDER] = true
                    const render = input.render.bind(input)
                    input.render = (buffer, deltaTime) => {
                      render(buffer, deltaTime)
                      if (!vimState.isVisual()) return
                      const rows = emptyRows(
                        input.plainText,
                        input.editorView.getSelection(),
                        input.lineInfo,
                        input.scrollY,
                        input.height,
                      )
                      if (rows.length) {
                        const bg = input.selectionBg ?? input.textColor
                        const fg =
                          input.selectionFg ??
                          (input.backgroundColor.a > 0 ? input.backgroundColor : RGBA.fromInts(0, 0, 0))
                        rows.forEach((row) => {
                          buffer.setCell(input.x, input.y + row, " ", fg, bg)
                        })
                      }
                      if (input.visualCursor.visualRow < 0 || input.visualCursor.visualRow >= input.height) return
                      if (input.visualCursor.visualCol < 0 || input.visualCursor.visualCol >= input.width) return
                      // recolor the cursor cell in place; setCell would clobber the underlying glyph
                      const cursorOffset =
                        ((input.y + input.visualCursor.visualRow) * buffer.width +
                          input.x +
                          input.visualCursor.visualCol) *
                        4
                      buffer.buffers.fg.set(selectedForeground(theme, theme.text).buffer.subarray(0, 4), cursorOffset)
                      buffer.buffers.bg.set(theme.text.buffer.subarray(0, 4), cursorOffset)
                    }
                  }
                  props.ref?.(ref)
                  setTimeout(() => {
                    if (!input || input.isDestroyed) return
                    input.cursorColor = theme.text
                    syncScrollbar()
                  }, 0)
                }}
                onMouseDown={(r: MouseEvent) => r.target?.focus()}
                focusedBackgroundColor={theme.backgroundElement}
                cursorColor={theme.text}
                syntaxStyle={syntax()}
              />
              <Show when={showScrollbar()}>
                <box
                  width={1}
                  flexShrink={0}
                  marginLeft={1}
                  backgroundColor={scrollbar() ? theme.backgroundPanel : theme.backgroundElement}
                >
                  <Show when={scrollbar()}>
                    {(chars) => (
                      <text>
                        {chars().map((c, i) => (
                          <>
                            {i > 0 ? "\n" : ""}
                            <span style={{ fg: c === " " ? theme.backgroundPanel : theme.border }}>{c}</span>
                          </>
                        ))}
                      </text>
                    )}
                  </Show>
                </box>
              </Show>
            </box>
            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1} justifyContent="space-between">
              <box flexDirection="row" gap={1}>
                <Show when={local.agent.current()} fallback={<box height={1} />}>
                  {(agent) => (
                    <>
                      <text fg={fadeColor(highlight(), agentMetaAlpha())}>
                        {store.mode === "shell" ? "Shell" : Locale.titlecase(agent().name)}
                      </text>
                      <Show when={store.mode === "normal"}>
                        <box flexDirection="row" gap={1}>
                          <text fg={fadeColor(theme.textMuted, modelMetaAlpha())}>·</text>
                          <text
                            flexShrink={0}
                            fg={fadeColor(dimmed() ? theme.textMuted : theme.text, modelMetaAlpha())}
                          >
                            {local.model.parsed().model}
                          </text>
                          <text fg={fadeColor(theme.textMuted, modelMetaAlpha())}>{currentProviderLabel()}</text>
                          <Show when={showVariant()}>
                            <text fg={fadeColor(theme.textMuted, variantMetaAlpha())}>·</text>
                            <text>
                              <span style={{ fg: fadeColor(theme.warning, variantMetaAlpha()), bold: true }}>
                                {local.model.variant.current()}
                              </span>
                            </text>
                          </Show>
                        </box>
                      </Show>
                    </>
                  )}
                </Show>
              </box>
              <Show when={hasRightContent()}>
                <box flexDirection="row" gap={1} alignItems="center">
                  {props.right}
                  <Show when={activeOrgName()}>
                    <text
                      fg={theme.textMuted}
                      onMouseUp={() => {
                        if (!canSwitchOrgs()) return
                        command.trigger("console.org.switch")
                      }}
                    >
                      {`${CONSOLE_MANAGED_ICON} ${activeOrgName()}`}
                    </text>
                  </Show>
                </box>
              </Show>
            </box>
          </box>
        </box>
        <box
          height={1}
          border={["left"]}
          borderColor={borderHighlight()}
          customBorderChars={{
            ...EmptyBorder,
            vertical: theme.backgroundElement.a !== 0 ? "╹" : " ",
          }}
        >
          <box
            height={1}
            border={["bottom"]}
            borderColor={theme.backgroundElement}
            customBorderChars={
              theme.backgroundElement.a !== 0
                ? {
                    ...EmptyBorder,
                    horizontal: "▀",
                  }
                : {
                    ...EmptyBorder,
                    horizontal: " ",
                  }
            }
          />
        </box>
        <box width="100%" flexDirection="row" justifyContent="space-between">
          <Show
            when={status().type !== "idle"}
            fallback={
              <box flexDirection="row" gap={1}>
                <VimIndicator />
                {props.hint ?? <text />}
              </box>
            }
          >
            <box
              flexDirection="row"
              gap={1}
              flexGrow={1}
              justifyContent={status().type === "retry" ? "space-between" : "flex-start"}
            >
              <box flexShrink={0} flexDirection="row" gap={1}>
                <VimIndicator />
                <box marginLeft={1}>
                  <Show when={kv.get("animations_enabled", true)} fallback={<text fg={theme.textMuted}>[⋯]</text>}>
                    <spinner color={spinnerDef().color} frames={spinnerDef().frames} interval={40} />
                  </Show>
                </box>
                <box flexDirection="row" gap={1} flexShrink={0}>
                  {(() => {
                    const retry = createMemo(() => {
                      const s = status()
                      if (s.type !== "retry") return
                      return s
                    })
                    const message = createMemo(() => {
                      const r = retry()
                      if (!r) return
                      if (r.message.includes("exceeded your current quota") && r.message.includes("gemini"))
                        return "gemini is way too hot right now"
                      if (r.message.length > 80) return r.message.slice(0, 80) + "..."
                      return r.message
                    })
                    const isTruncated = createMemo(() => {
                      const r = retry()
                      if (!r) return false
                      return r.message.length > 120
                    })
                    const [seconds, setSeconds] = createSignal(0)
                    onMount(() => {
                      const timer = setInterval(() => {
                        const next = retry()?.next
                        if (next) setSeconds(Math.round((next - Date.now()) / 1000))
                      }, 1000)

                      onCleanup(() => {
                        clearInterval(timer)
                      })
                    })
                    const handleMessageClick = () => {
                      const r = retry()
                      if (!r) return
                      if (isTruncated()) {
                        void DialogAlert.show(dialog, "Retry Error", r.message)
                      }
                    }

                    const retryText = () => {
                      const r = retry()
                      if (!r) return ""
                      const baseMessage = message()
                      const truncatedHint = isTruncated() ? " (click to expand)" : ""
                      const duration = formatDuration(seconds())
                      const retryInfo = ` [retrying ${duration ? `in ${duration} ` : ""}attempt #${r.attempt}]`
                      return baseMessage + truncatedHint + retryInfo
                    }

                    return (
                      <Show when={retry()}>
                        <box onMouseUp={handleMessageClick}>
                          <text fg={theme.error}>{retryText()}</text>
                        </box>
                      </Show>
                    )
                  })()}
                </box>
              </box>
              <text fg={store.interrupt > 0 ? theme.primary : theme.text}>
                esc{" "}
                <span style={{ fg: store.interrupt > 0 ? theme.primary : theme.textMuted }}>
                  {store.interrupt > 0 ? "again to interrupt" : "interrupt"}
                </span>
              </text>
            </box>
          </Show>
          <Show when={status().type !== "retry" && !mini()}>
            <box gap={2} flexDirection="row">
              <Show when={editorFileLabelDisplay()}>{(file) => <text fg={theme.secondary}>{file()}</text>}</Show>
              <Switch>
                <Match when={store.mode === "normal"}>
                  <Show when={local.model.variant.list().length > 0}>
                    <text fg={theme.text}>
                      {keybind.print("variant_cycle")} <span style={{ fg: theme.textMuted }}>variants</span>
                    </text>
                  </Show>
                  <Switch>
                    <Match when={usage()}>
                      {(item) => (
                        <text fg={theme.textMuted} wrapMode="none">
                          {[item().context, item().cost].filter(Boolean).join(" · ")}
                        </text>
                      )}
                    </Match>
                    <Match when={true}>
                      <text fg={theme.text}>
                        {keybind.print("agent_cycle")} <span style={{ fg: theme.textMuted }}>agents</span>
                      </text>
                    </Match>
                  </Switch>
                  <text fg={theme.text}>
                    {keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
                  </text>
                </Match>
                <Match when={store.mode === "shell"}>
                  <text fg={theme.text}>
                    esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
                  </text>
                </Match>
              </Switch>
            </box>
          </Show>
        </box>
      </box>
    </>
  )
}