jonsoc 1.1.49 → 1.1.50

package/src/cli/cmd/tui/component/prompt/index.tsx

@@ -1,1347 +0,0 @@
-import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg } from "@opentui/core"
-import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, Show, Switch, Match, on } from "solid-js"
-import "opentui-spinner/solid"
-import { useLocal } from "@tui/context/local"
-import { useTheme } from "@tui/context/theme"
-import { EmptyBorder } from "@tui/component/border"
-import { useSDK } from "@tui/context/sdk"
-import { useRoute } from "@tui/context/route"
-import { useSync } from "@tui/context/sync"
-import { Identifier } from "@/id/id"
-import { createStore, produce } from "solid-js/store"
-import { useKeybind } from "@tui/context/keybind"
-import { usePromptHistory, type PromptInfo } from "./history"
-import { usePromptStash } from "./stash"
-import { DialogStash } from "../dialog-stash"
-import { type AutocompleteRef, Autocomplete } from "./autocomplete"
-import { useCommandDialog } from "../dialog-command"
-import { useRenderer } from "@opentui/solid"
-import { Editor } from "@tui/util/editor"
-import { useExit } from "../../context/exit"
-import { Clipboard } from "../../util/clipboard"
-import type { FilePart } from "@jonsoc/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 { useTextareaKeybindings } from "../textarea-keybindings"
-import path from "path"
-import { mkdir } from "fs/promises"
-import { tmpdir } from "os"
-
-export type PromptProps = {
-  sessionID?: string
-  visible?: boolean
-  disabled?: boolean
-  onSubmit?: () => void
-  ref?: (ref: PromptRef) => void
-  hint?: JSX.Element
-  showPlaceholder?: boolean
-}
-
-export type PromptRef = {
-  focused: boolean
-  current: PromptInfo
-  set(prompt: PromptInfo): void
-  reset(): void
-  blur(): void
-  focus(): void
-  submit(): void
-}
-
-const PLACEHOLDERS = ["Fix a TODO in the codebase", "What is the tech stack of this project?", "Fix broken tests"]
-
-export function Prompt(props: PromptProps) {
-  let input: TextareaRenderable
-  let anchor: BoxRenderable
-  let autocomplete: AutocompleteRef
-
-  const keybind = useKeybind()
-  const local = useLocal()
-  const sdk = useSDK()
-  const route = useRoute()
-  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 { theme, syntax } = useTheme()
-  const kv = useKV()
-
-  async function pasteImagePath(filepath: string, event: PasteEvent) {
-    const full = path.isAbsolute(filepath) ? filepath : path.resolve(filepath)
-    const file = Bun.file(full)
-    if (file.type === "image/svg+xml") {
-      const content = await file.text().catch(() => { })
-      if (!content) return false
-      event.preventDefault()
-      pasteText(content, `[SVG: ${file.name ?? "image"}]`)
-      return true
-    }
-    if (file.type.startsWith("image/")) {
-      const content = await file
-        .arrayBuffer()
-        .then((buffer) => Buffer.from(buffer).toString("base64"))
-        .catch(() => { })
-      if (!content) return false
-      event.preventDefault()
-      await pasteImage({ filename: file.name, mime: file.type, content, path: full })
-      return true
-    }
-    return false
-  }
-
-  function imageExt(mime: string) {
-    return iife(() => {
-      if (mime === "image/png") return "png"
-      if (mime === "image/jpeg") return "jpg"
-      if (mime === "image/jpg") return "jpg"
-      if (mime === "image/webp") return "webp"
-      if (mime === "image/gif") return "gif"
-      if (mime === "image/svg+xml") return "svg"
-      return "png"
-    })
-  }
-
-  async function persistImage(file: { content: string; mime: string; filename?: string }) {
-    const dir = path.join(tmpdir(), "jonsoc", "attachments")
-    await mkdir(dir, { recursive: true })
-    const parsed = file.filename ? path.parse(file.filename) : undefined
-    const baseRaw = parsed?.name ?? "image"
-    const base = baseRaw.replace(/[<>:"/\\|?*]+/g, "-")
-    const ext = parsed?.ext ? parsed.ext.slice(1) : imageExt(file.mime)
-    const name = `${base}-${crypto.randomUUID()}.${ext}`
-    const filepath = path.join(dir, name)
-    const buffer = Buffer.from(file.content, "base64")
-    await Bun.write(filepath, buffer)
-    return { path: filepath, filename: name }
-  }
-
-  async function readLatestScreenClipOnce() {
-    if (process.platform !== "win32") return
-    const local = process.env["LOCALAPPDATA"]
-    if (!local) return
-    const cwd = path.join(local, "Packages")
-    const glob = new Bun.Glob("{MicrosoftWindows.Client.CBS_*,Microsoft.ScreenSketch_*}/TempState/ScreenClip/*.png")
-    const entries: Array<{ path: string; time: number }> = []
-    for await (const item of glob.scan({ cwd, absolute: true })) {
-      const file = Bun.file(item)
-      const stat = await file.stat().catch(() => { })
-      if (!stat?.isFile()) continue
-      const time = typeof stat.mtimeMs === "number" ? stat.mtimeMs : (stat.mtime?.getTime?.() ?? 0)
-      entries.push({ path: item, time })
-    }
-    if (entries.length === 0) return
-    const latest = entries.reduce((acc, entry) => (entry.time > acc.time ? entry : acc), {
-      path: "",
-      time: -1,
-    })
-    if (latest.time < 0) return
-    const file = Bun.file(latest.path)
-    if (!file.type.startsWith("image/")) return
-    const content = await file
-      .arrayBuffer()
-      .then((buffer) => Buffer.from(buffer).toString("base64"))
-      .catch(() => { })
-    if (!content) return
-    return { filename: file.name, mime: file.type, content, path: latest.path }
-  }
-
-  async function readLatestScreenClip() {
-    const delays = [0, 50, 150]
-    for (const delay of delays) {
-      if (delay > 0) await new Promise((resolve) => setTimeout(resolve, delay))
-      const result = await readLatestScreenClipOnce()
-      if (result) return result
-    }
-  }
-
-  async function readClipboardImage(opts?: { allowScreenClip?: boolean }) {
-    const content = await Clipboard.read()
-    if (content?.mime.startsWith("image/")) {
-      const saved = await persistImage({ content: content.data, mime: content.mime, filename: "clipboard" }).catch(
-        () => undefined,
-      )
-      const savedPath = saved?.path
-      const savedName = saved?.filename ?? "clipboard"
-      return {
-        filename: savedName,
-        mime: content.mime,
-        content: content.data,
-        path: savedPath,
-        source: "clipboard" as const,
-      }
-    }
-    if (content) return
-    if (!opts?.allowScreenClip) return
-    const screenClip = await readLatestScreenClip()
-    if (screenClip) return { ...screenClip, source: "screenclip" as const }
-  }
-
-  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
-
-  sdk.event.on(TuiEvent.PromptAppend.type, (evt) => {
-    input.insertText(evt.properties.text)
-    setTimeout(() => {
-      input.getLayoutNode().markDirty()
-      input.gotoBufferEnd()
-      renderer.requestRender()
-    }, 0)
-  })
-
-  createEffect(() => {
-    if (props.disabled) input.cursorColor = theme.backgroundElement
-    if (!props.disabled) input.cursorColor = theme.text
-  })
-
-  const lastUserMessage = createMemo(() => {
-    if (!props.sessionID) return undefined
-    const messages = sync.data.message[props.sessionID]
-    if (!messages) return undefined
-    return messages.findLast((m) => m.role === "user")
-  })
-
-  const [store, setStore] = createStore<{
-    prompt: PromptInfo
-    mode: "normal" | "shell"
-    extmarkToPartIndex: Map<number, number>
-    interrupt: number
-    placeholder: number
-  }>({
-    placeholder: Math.floor(Math.random() * PLACEHOLDERS.length),
-    prompt: {
-      input: "",
-      parts: [],
-    },
-    mode: "normal",
-    extmarkToPartIndex: new Map(),
-    interrupt: 0,
-  })
-
-  const [escClearAt, setEscClearAt] = createSignal<number | undefined>()
-  const escClearWindowMs = 1500
-
-  // 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) {
-        local.agent.set(msg.agent)
-        if (msg.model) local.model.set(msg.model)
-        if (msg.variant) local.model.variant.set(msg.variant)
-      }
-    }
-  })
-
-  createEffect(() => {
-    if (store.prompt.input === "") setEscClearAt(undefined)
-  })
-
-  command.register(() => {
-    return [
-      {
-        title: "Clear prompt",
-        value: "prompt.clear",
-        category: "Prompt",
-        hidden: true,
-        onSelect: (dialog) => {
-          clearPromptInput()
-          dialog.clear()
-        },
-      },
-      {
-        title: "Submit prompt",
-        value: "prompt.submit",
-        keybind: "input_submit",
-        category: "Prompt",
-        hidden: true,
-        onSelect: (dialog) => {
-          if (!input.focused) return
-          submit()
-          dialog.clear()
-        },
-      },
-      {
-        title: "Paste",
-        value: "prompt.paste",
-        keybind: "input_paste",
-        category: "Prompt",
-        hidden: false,
-        onSelect: async () => {
-          const allowClipboardImage = sync.data.config.experimental?.paste_clipboard_image !== false
-          const text = await Clipboard.readText()
-          if (text) {
-            insertPlainText(text)
-            return
-          }
-          if (!allowClipboardImage) {
-            toast.show({
-              variant: "warning",
-              message: "No text in clipboard",
-            })
-            return
-          }
-          const content = await readClipboardImage({ allowScreenClip: true })
-          if (!content) {
-            toast.show({
-              variant: "warning",
-              message: "No image in clipboard",
-            })
-            return
-          }
-          await pasteImage({
-            filename: content.filename,
-            mime: content.mime,
-            content: content.content,
-            path: content.path,
-          })
-        },
-      },
-      {
-        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
-          // TODO: this should be its own command
-          if (store.mode === "shell") {
-            setStore("mode", "normal")
-            return
-          }
-          if (!props.sessionID) return
-
-          setStore("interrupt", store.interrupt + 1)
-
-          setTimeout(() => {
-            setStore("interrupt", 0)
-          }, 5000)
-
-          if (store.interrupt >= 2) {
-            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)
-        },
-      },
-    ]
-  })
-
-  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()
-    },
-    reset() {
-      input.clear()
-      input.extmarks.clear()
-      setStore("prompt", {
-        input: "",
-        parts: [],
-      })
-      setStore("extmarkToPartIndex", new Map())
-    },
-    submit() {
-      submit()
-    },
-  }
-
-  createEffect(
-    on(
-      () => props.visible !== false,
-      (visible, prev) => {
-        if (visible && !prev) input?.focus()
-        if (!visible) input?.blur()
-      },
-    ),
-  )
-
-  function restoreExtmarksFromParts(parts: PromptInfo["parts"]) {
-    input.extmarks.clear()
-    const newMap = new Map<number, number>()
-
-    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,
-        })
-        newMap.set(extmarkId, partIndex)
-      }
-    })
-
-    setStore("extmarkToPartIndex", newMap)
-  }
-
-  function syncExtmarksWithPromptParts() {
-    const allExtmarks = input.extmarks.getAllForTypeId(promptPartTypeId)
-    const currentMap = store.extmarkToPartIndex
-    const currentParts = store.prompt.parts
-
-    setStore(
-      produce((draft) => {
-        const newMap = new Map<number, number>()
-        const newParts: typeof draft.prompt.parts = []
-
-        for (const extmark of allExtmarks) {
-          const partIndex = currentMap.get(extmark.id)
-          if (partIndex !== undefined) {
-            const part = currentParts[partIndex]
-            if (part) {
-              // Create a deep copy to avoid mutating the original
-              const updatedPart = { ...part }
-              if (part.type === "agent" && part.source) {
-                updatedPart.source = {
-                  ...part.source,
-                  start: extmark.start,
-                  end: extmark.end,
-                }
-              } else if (part.type === "file" && part.source?.text) {
-                updatedPart.source = {
-                  ...part.source,
-                  text: {
-                    ...part.source.text,
-                    start: extmark.start,
-                    end: extmark.end,
-                  },
-                }
-              } else if (part.type === "text" && part.source?.text) {
-                updatedPart.source = {
-                  ...part.source,
-                  text: {
-                    ...part.source.text,
-                    start: extmark.start,
-                    end: extmark.end,
-                  },
-                }
-              }
-              newMap.set(extmark.id, newParts.length)
-              newParts.push(updatedPart)
-            }
-          }
-        }
-
-        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())
-        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()
-        }
-        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()
-            }}
-          />
-        ))
-      },
-    },
-  ])
-
-  async function submit() {
-    if (props.disabled) return
-    if (autocomplete?.visible) return
-    if (!store.prompt.input) return
-    const trimmed = store.prompt.input.trim()
-    if (trimmed === "exit" || trimmed === "quit" || trimmed === ":q") {
-      exit()
-      return
-    }
-    const selectedModel = local.model.current()
-    if (!selectedModel) {
-      promptModelWarning()
-      return
-    }
-    const sessionID = props.sessionID
-      ? props.sessionID
-      : await (async () => {
-        const sessionID = await sdk.client.session.create({}).then((x) => x.data!.id)
-        return sessionID
-      })()
-    const messageID = Identifier.ascending("message")
-    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()
-
-    if (store.mode === "shell") {
-      sdk.client.session.shell({
-        sessionID,
-        agent: local.agent.current().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 : "")
-
-      sdk.client.session.command({
-        sessionID,
-        command: command.slice(1),
-        arguments: args,
-        agent: local.agent.current().name,
-        model: `${selectedModel.providerID}/${selectedModel.modelID}`,
-        messageID,
-        variant,
-        parts: nonTextParts
-          .filter((x) => x.type === "file")
-          .map((x) => ({
-            id: Identifier.ascending("part"),
-            ...x,
-          })),
-      })
-    } else {
-      sdk.client.session
-        .prompt({
-          sessionID,
-          ...selectedModel,
-          messageID,
-          agent: local.agent.current().name,
-          model: selectedModel,
-          variant,
-          parts: [
-            {
-              id: Identifier.ascending("part"),
-              type: "text",
-              text: inputText,
-            },
-            ...nonTextParts.map((x) => ({
-              id: Identifier.ascending("part"),
-              ...x,
-            })),
-          ],
-        })
-        .catch(() => { })
-    }
-    history.append({
-      ...store.prompt,
-      mode: currentMode,
-    })
-    input.extmarks.clear()
-    setStore("prompt", {
-      input: "",
-      parts: [],
-    })
-    setStore("extmarkToPartIndex", new Map())
-    props.onSubmit?.()
-
-    // temporary hack to make sure the message is sent
-    if (!props.sessionID)
-      setTimeout(() => {
-        route.navigate({
-          type: "session",
-          sessionID,
-        })
-      }, 50)
-    input.clear()
-  }
-  const exit = useExit()
-
-  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)
-      }),
-    )
-  }
-
-  function clearPromptInput() {
-    input.clear()
-    input.extmarks.clear()
-    setStore("prompt", {
-      input: "",
-      parts: [],
-    })
-    setStore("extmarkToPartIndex", new Map())
-    setEscClearAt(undefined)
-  }
-
-  function insertPlainText(text: string) {
-    if (!text) return
-    input.focus()
-    input.insertText(text)
-    input.gotoBufferEnd()
-    const value = input.plainText
-    setStore("prompt", "input", value)
-    autocomplete.onInput(value)
-    syncExtmarksWithPromptParts()
-    setTimeout(() => {
-      input.getLayoutNode().markDirty()
-      renderer.requestRender()
-    }, 0)
-  }
-
-  async function pasteImage(file: { filename?: string; content: string; mime: string; path?: string }) {
-    const currentOffset = input.visualCursor.offset
-    const extmarkStart = currentOffset
-    const count = store.prompt.parts.filter((x) => x.type === "file").length
-    const virtualText = file.path ? `[Image ${count + 1}: ${file.path}]` : `[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 sourcePath = file.path ?? file.filename ?? ""
-    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: sourcePath,
-        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 highlight = createMemo(() => {
-    if (keybind.leader) return theme.border
-    if (store.mode === "shell") return theme.primary
-    return local.agent.color(local.agent.current().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 spinnerDef = createMemo(() => {
-    const color = local.agent.color(local.agent.current().name)
-    return {
-      frames: createFrames({
-        color,
-        style: "custom",
-        activeChar: "▣",
-        inactiveChar: "·",
-        trailSteps: 1,
-        inactiveFactor: 0.6,
-        // enableFading: false,
-        minAlpha: 0.3,
-      }),
-      color: createColors({
-        color,
-        style: "custom",
-        activeChar: "▣",
-        inactiveChar: "·",
-        trailSteps: 1,
-        inactiveFactor: 0.6,
-        // enableFading: false,
-        minAlpha: 0.3,
-      }),
-    }
-  })
-
-  return (
-    <>
-      <Autocomplete
-        sessionID={props.sessionID}
-        ref={(r) => (autocomplete = 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}>
-        <Show when={status().type !== "idle"}>
-          <box flexDirection="row" height={1} marginLeft={1}>
-            <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>
-        <box
-          border={["left"]}
-          borderColor={highlight()}
-          customBorderChars={{
-            ...EmptyBorder,
-            vertical: "┃",
-            bottomLeft: "╹",
-          }}
-        >
-          <box
-            paddingLeft={2}
-            paddingRight={2}
-            paddingTop={1}
-            flexShrink={0}
-            backgroundColor={theme.backgroundElement}
-            flexGrow={1}
-          >
-            <textarea
-              placeholder={props.sessionID ? undefined : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
-              textColor={keybind.leader ? theme.textMuted : theme.text}
-              focusedTextColor={keybind.leader ? theme.textMuted : theme.text}
-              minHeight={1}
-              maxHeight={6}
-              onContentChange={() => {
-                const value = input.plainText
-                setStore("prompt", "input", value)
-                autocomplete.onInput(value)
-                syncExtmarksWithPromptParts()
-              }}
-              keyBindings={textareaKeybindings()}
-              onKeyDown={async (e) => {
-                if (props.disabled) {
-                  e.preventDefault()
-                  return
-                }
-                if (e.name === "escape" && store.mode === "normal" && store.prompt.input !== "") {
-                  const now = Date.now()
-                  const last = escClearAt()
-                  const within = last !== undefined && now - last < escClearWindowMs
-                  if (within && status().type === "idle") {
-                    clearPromptInput()
-                    e.preventDefault()
-                    return
-                  }
-                  if (!within) {
-                    setEscClearAt(now)
-                    toast.show({
-                      variant: "warning",
-                      message: "Press esc again to clear input",
-                      duration: escClearWindowMs,
-                    })
-                    if (status().type === "idle") {
-                      e.preventDefault()
-                      return
-                    }
-                  }
-                }
-                if (keybind.match("input_clear", e) && store.prompt.input !== "") {
-                  clearPromptInput()
-                  return
-                }
-                if (keybind.match("app_exit", e)) {
-                  if (store.prompt.input === "") {
-                    await exit()
-                    // Don't preventDefault - let textarea potentially handle the event
-                    e.preventDefault()
-                    return
-                  }
-                }
-                if (e.name === "!" && input.visualCursor.offset === 0) {
-                  setStore("mode", "shell")
-                  e.preventDefault()
-                  return
-                }
-                if (store.mode === "shell") {
-                  if ((e.name === "backspace" && input.visualCursor.offset === 0) || e.name === "escape") {
-                    setStore("mode", "normal")
-                    e.preventDefault()
-                    return
-                  }
-                }
-                if (store.mode === "normal") autocomplete.onKeyDown(e)
-                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)
-                      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={submit}
-              onPaste={async (event: PasteEvent) => {
-                if (props.disabled) {
-                  event.preventDefault()
-                  return
-                }
-
-                const clipboardText = async () => {
-                  return await Clipboard.readText()
-                }
-
-                // 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 = event.text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\0/g, "")
-                const allowClipboardImage = sync.data.config.experimental?.paste_clipboard_image !== false
-                const clipboardFallback = normalizedText.trim() ? undefined : await clipboardText()
-                const text = clipboardFallback ? clipboardFallback : normalizedText
-                const pastedContent = text.trim()
-                if (!pastedContent) {
-                  if (allowClipboardImage) {
-                    const clipboard = await readClipboardImage({ allowScreenClip: true })
-                    if (clipboard) {
-                      event.preventDefault()
-                      await pasteImage(clipboard)
-                      return
-                    }
-                  }
-                  return
-                }
-
-                if (allowClipboardImage) {
-                  const dataImage = Clipboard.parseImageDataUrl(pastedContent)
-                  if (dataImage) {
-                    event.preventDefault()
-                    await pasteImage({
-                      filename: "clipboard",
-                      mime: dataImage.mime,
-                      content: dataImage.data,
-                    })
-                    return
-                  }
-                }
-
-                // Some terminals paste images as a placeholder string like:
-                // "img 483795798.png". On Win11, Snipping Tool also writes a temp file
-                // under Packages/*/TempState/ScreenClip. Prefer that when present.
-                if (allowClipboardImage && pastedContent.toLowerCase().startsWith("img ")) {
-                  const name = pastedContent
-                    .slice(4)
-                    .trim()
-                    .replace(/^'+|'+$/g, "")
-                  const fromPath = path.isAbsolute(name) ? name : ""
-                  if (fromPath) {
-                    const handled = await pasteImagePath(fromPath, event)
-                    if (handled) return
-                  }
-                  if (name.endsWith(".png")) {
-                    const local = process.env["LOCALAPPDATA"]
-                    if (local) {
-                      const cwd = path.join(local, "Packages")
-                      const glob = new Bun.Glob(
-                        `{MicrosoftWindows.Client.CBS_*,Microsoft.ScreenSketch_*}/TempState/ScreenClip/${name}`,
-                      )
-                      for await (const item of glob.scan({ cwd, absolute: true })) {
-                        const file = Bun.file(item)
-                        if (file.type.startsWith("image/")) {
-                          const content = await file
-                            .arrayBuffer()
-                            .then((buffer) => Buffer.from(buffer).toString("base64"))
-                            .catch(() => { })
-                          if (content) {
-                            event.preventDefault()
-                            await pasteImage({ filename: file.name, mime: file.type, content })
-                            return
-                          }
-                        }
-                      }
-                    }
-                  }
-
-                  if (allowClipboardImage) {
-                    const content = await Clipboard.read()
-                    if (content?.mime.startsWith("image/")) {
-                      event.preventDefault()
-                      await pasteImage({
-                        filename: "clipboard",
-                        mime: content.mime,
-                        content: content.data,
-                      })
-                      return
-                    }
-                  }
-                }
-
-                // trim ' from the beginning and end of the pasted content. just
-                // ' and nothing else
-                const filepath = pastedContent.replace(/^'+|'+$/g, "").replace(/\\ /g, " ")
-                const isUrl = /^(https?):\/\//.test(filepath)
-                if (!isUrl) {
-                  const handled = await pasteImagePath(filepath, event)
-                  if (handled) return
-                }
-
-                const lineCount = (pastedContent.match(/\n/g)?.length ?? 0) + 1
-                if (
-                  (lineCount >= 3 || pastedContent.length > 150) &&
-                  !sync.data.config.experimental?.disable_paste_summary
-                ) {
-                  event.preventDefault()
-                  pasteText(pastedContent, `[Pasted ~${lineCount} lines]`)
-                  return
-                }
-
-                if (clipboardFallback) {
-                  event.preventDefault()
-                  insertPlainText(text)
-                  return
-                }
-
-                // Force layout update and render for the pasted content
-                setTimeout(() => {
-                  input.getLayoutNode().markDirty()
-                  renderer.requestRender()
-                }, 0)
-              }}
-              ref={(r: TextareaRenderable) => {
-                input = r
-                if (promptPartTypeId === 0) {
-                  promptPartTypeId = input.extmarks.registerType("prompt-part")
-                }
-                props.ref?.(ref)
-                setTimeout(() => {
-                  input.cursorColor = theme.text
-                }, 0)
-              }}
-              onMouseDown={(r: MouseEvent) => r.target?.focus()}
-              focusedBackgroundColor={theme.backgroundElement}
-              cursorColor={theme.text}
-              syntaxStyle={syntax()}
-            />
-            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
-              <text fg={highlight()}>
-                {store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
-              </text>
-              <Show when={store.mode === "normal"}>
-                <box flexDirection="row" gap={1}>
-                  <text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
-                    {local.model.parsed().model}
-                  </text>
-                  <text fg={theme.textMuted}>{local.model.parsed().provider}</text>
-                  <Show when={showVariant()}>
-                    <text>
-                      <span style={{ fg: theme.warning, bold: true }}>{local.model.variant.current()}</span>
-                    </text>
-                  </Show>
-                </box>
-              </Show>
-            </box>
-          </box>
-        </box>
-        <box
-          height={1}
-          border={["left"]}
-          borderColor={highlight()}
-          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 flexDirection="row" justifyContent="space-between">
-          <Show when={status().type === "retry"} fallback={<text />}>
-            <box flexDirection="row" gap={1} flexGrow={1} justifyContent="space-between">
-              <box flexShrink={0} flexDirection="row" gap={1}>
-                <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()) {
-                        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>
-            </box>
-          </Show>
-          <Show when={status().type !== "retry"}>
-            <box gap={2} flexDirection="row">
-              <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>
-                  <text fg={theme.text}>
-                    {keybind.print("agent_cycle")} <span style={{ fg: theme.textMuted }}>agents</span>
-                  </text>
-                  <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>
-    </>
-  )
-}