TUI 交互设计

export type KeybindConfig = {
  leader: boolean // Leader 模式状态
  bindings: Record<string, string[]> // 快捷键映射
}

const defaultBindings: KeybindConfig = {
  leader: false,
  bindings: {
    // 命令面板
    command_list: [
      ["ctrl", "x"],
      ["ctrl", "x"],
    ],

    // 输入
    input_submit: [["enter"]],
    input_clear: [["ctrl", "u"]],
    input_paste: [
      ["ctrl", "v"],
      ["ctrl", "shift", "v"],
    ],

    // 会话
    session_interrupt: [["escape"]],
    session_new: [["ctrl", "n"]],
    session_share: [["ctrl", "s"]],
    session_rename: [["ctrl", "r"]],

    // 导航
    messages_page_up: [["ctrl"], ["u"]],
    messages_page_down: [["ctrl"], ["d"]],
    messages_first: [["ctrl"], ["g"], ["g"]],
    messages_last: [["g"]],

    // 历史
    history_previous: [["up"]],
    history_next: [["down"]],

    // 侧边栏
    sidebar_toggle: [["ctrl"], ["b"]],

    // 主题
    theme_list: [["ctrl"], ["t"]],

    // Agent/Model
    agent_cycle: [["ctrl"], ["a"]],
    model_list: [["ctrl"], ["m"]],

    // 退出
    app_exit: [["ctrl"], ["c"]],
  },
}

const keybind = useKeybind()

// 检查快捷键
if (keybind.match("session_interrupt", event)) {
  // 执行中断
  sdk.client.session.abort({ sessionID })
}

// 在组件中使用
useKeyboard((evt) => {
  if (evt.ctrl && evt.name === "c") {
    exit()
  }
})

command.register(() => [
  {
    title: "Switch session",
    value: "session.list",
    keybind: "session_list",
    category: "Session",
    suggested: sync.data.session.length > 0,
    slash: {
      name: "sessions",
      aliases: ["resume", "continue"],
    },
    onSelect: () => {
      dialog.replace(() => <DialogSessionList />)
    },
  },
  {
    title: "New session",
    value: "session.new",
    keybind: "session_new",
    category: "Session",
    slash: {
      name: "new",
      aliases: ["clear"],
    },
    onSelect: () => {
      route.navigate({ type: "home" })
      dialog.clear()
    },
  },
])

export type Command = {
  title: string // 显示标题
  value: string // 命令值
  category?: string // 分类分类
  keybind?: string // 关联快捷键
  slash?: {
    // 斜杠命令配置
    name: string // 命令名
    aliases?: string[] // 别名
  }
  suggested?: boolean // 是否建议显示
  hidden?: boolean // 是否隐藏
  enabled?: boolean // 是否启用
  disabled?: boolean // 是否禁用
  onSelect: (dialog: DialogContext) => void // 选择回调
}

function filterCommands(query: string, commands: Command[]): Command[] {
  if (!query) return commands

  const tokens = query.toLowerCase().split(/\s+/)

  return commands.filter((cmd) => {
    const text = `${cmd.title} ${cmd.value} ${cmd.category ?? ""}`.toLowerCase()
    return tokens.every((token) => text.includes(token))
  })
}

// 在 Prompt 组件中
if (inputText.startsWith("/") && sync.data.command.some((x) => x.name === command)) {
  const [command, ...firstLineArgs] = inputText.split(" ")
  const args = firstLineArgs.join(" ")

  sdk.client.session.command({
    sessionID,
    command: command.slice(1),
    arguments: args,
    agent: local.agent.current().name,
    model: `${selectedModel.providerID}/${selectedModel.modelID}`,
  })
}

export type DialogContext = {
  replace(component: () => JSX.Element): void
  clear(): void
  push(component: () => JSX.Element): void
  pop(): void
}

const dialog = useDialog()

// 替换当前对话框
dialog.replace(() => <DialogModel />)

// 添加新对话框（推入堆栈）
dialog.push(() => <DialogAgent />)

// 关闭当前对话框（弹出堆栈）
dialog.pop()

// 关闭所有对话框
dialog.clear()

export async function showConfirm(
  dialog: DialogContext,
  title: string,
  message: string
): Promise<boolean> {
  return new Promise((resolve) => {
    dialog.replace(() => (
      <DialogConfirm
        title={title}
        message={message}
        onConfirm={() => {
          dialog.clear()
          resolve(true)
        }}
        onCancel={() => {
          dialog.clear()
          resolve(false)
        }}
      />
    ))
  })
}

const confirmed = await DialogConfirm.show(dialog, "Delete Session", "Are you sure you want to delete this session?")

if (confirmed) {
  sdk.client.session.delete({ sessionID })
}

export async function showAlert(
  dialog: DialogContext,
  title: string,
  message: string
): Promise<void> {
  return new Promise((resolve) => {
    dialog.replace(() => (
      <DialogAlert
        title={title}
        message={message}
        onDismiss={() => {
          dialog.clear()
          resolve()
        }}
      />
    ))
  })
}

export type ToastProps = {
  title?: string
  message: string
  variant?: "success" | "error" | "warning" | "info"
  duration?: number
}

const toast = useToast()

// 基本用法
toast.show({
  message: "操作成功",
  variant: "success",
  duration: 3000,
})

// 带标题
toast.show({
  title: "Success",
  message: "文件已保存",
  variant: "success",
})

// 快捷方法
toast.success("成功")
toast.error("错误")
toast.warning("警告")
toast.info("信息")

const [toasts, setToasts] = createSignal<ToastItem[]>([])

function show(props: ToastProps) {
  const id = Date.now()
  setToasts((prev) => [...prev, { ...props, id }])

  // 自动移除
  setTimeout(() => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, props.duration ?? 3000)
}

// 输入 `/hom` -> 补全为 `/home/user/...`
// 支持相对路径和绝对路径
// 支持 Tab 键切换候选

function autocompleteFile(input: string): string[] {
  const parts = input.split("/")
  const path = parts.slice(0, -1).join("/") || "."
  const prefix = parts[parts.length - 1] || ""

  try {
    const files = readdirSync(path)
    return files.filter((f) => f.startsWith(prefix)).map((f) => [...parts.slice(0, -1), f].join("/"))
  } catch {
    return []
  }
}

function autocompleteCommand(input: string): Command[] {
  const command = input.slice(1).trim() // 去掉 /
  return sync.data.command.filter(
    (cmd) => cmd.name.startsWith(command) || cmd.aliases?.some((a) => a.startsWith(command)),
  )
}

function autocompleteAgent(input: string): Agent[] {
  const name = input.slice(1).trim() // 去掉 @
  return sync.data.agent.filter((agent) => agent.name.startsWith(name))
}

onPaste={async (event) => {
  const text = event.text.replace(/\r\n/g, "\n").replace(/\r/g, "\n")

  // 长文本自动摘要
  if (text.length > 150) {
    pasteText(text, `[Pasted ~${lineCount} lines]`)
    return
  }

  input.insertText(text)
}}

onPaste={async (event) => {
  const filepath = event.text.trim()
  const file = Bun.file(filepath)

  // 图像文件
  if (file.type.startsWith("image/")) {
    const content = await file.arrayBuffer()
    await pasteImage({
      filename: file.name,
      mime: file.type,
      content: Buffer.from(content).toString("base64"),
    })
  }

  // 文本文件
  if (file.type.startsWith("text/")) {
    const text = await file.text()
    pasteText(text, `[File: ${file.name}]`)
  }
}}

// Windows 快捷键处理
if (keybind.match("input_paste", e)) {
  const content = await Clipboard.read()
  if (content?.mime.startsWith("image/")) {
    e.preventDefault()
    await pasteImage({
      filename: "clipboard",
      mime: content.mime,
      content: content.data,
    })
  }
}

onMouseUp={async () => {
  const text = renderer.getSelection()?.getSelectedText()
  if (text && text.length > 0) {
    await Clipboard.copy(text)
      .then(() => toast.show({
        message: "Copied to clipboard",
        variant: "info"
      }))
    renderer.clearSelection()
  }
}}

export function usePromptHistory() {
  const [history, setHistory] = createSignal<PromptInfo[]>([])

  return {
    append(item: PromptInfo) {
      setHistory((prev) => [...prev, item])
    },

    move(direction: number, current: string): PromptInfo | undefined {
      const index = this.index()
      const next = Math.max(0, Math.min(index + direction, history.length - 1))
      this.index = next
      return history()[next]
    },

    get index(): number {
      return this.currentIndex
    },
  }
}

// 上键导航
if (keybind.match("history_previous", e) && input.cursorOffset === 0) {
  const item = history.move(-1, input.plainText)
  if (item) {
    input.setText(item.input)
    input.cursorOffset = 0
  }
}

// 下键导航
if (keybind.match("history_next", e) && input.cursorOffset === input.plainText.length) {
  const item = history.move(1, input.plainText)
  if (item) {
    input.setText(item.input)
    input.cursorOffset = input.plainText.length
  }
}

const STORAGE_KEY = "prompt_history"
const MAX_HISTORY = 100

function append(item: PromptInfo) {
  const current = kv.get<PromptInfo[]>(STORAGE_KEY, [])
  const updated = [...current.slice(-MAX_HISTORY + 1), item]
  kv.set(STORAGE_KEY, updated)
}

export function usePromptStash() {
  const [stash, setStash] = createSignal<PromptInfo[]>([])

  return {
    push(item: PromptInfo) {
      setStash((prev) => [...prev, item])
    },

    pop(): PromptInfo | undefined {
      const item = stash().at(-1)
      setStash((prev) => prev.slice(0, -1))
      return item
    },

    list(): PromptInfo[] {
      return stash()
    },
  }
}

// 保存当前输入
const promptInfo = {
  input: "help me write tests",
  parts: [],
}
stash.push(promptInfo)
input.clear()

// 恢复暂存
const item = stash.pop()
if (item) {
  input.setText(item.input)
  restoreExtmarksFromParts(item.parts)
}

// 页面上滚
scroll.scrollBy(-scroll.height / 2)

// 页面下滚
scroll.scrollBy(scroll.height / 2)

// 滚动到顶部
scroll.scrollTo(0)

// 滚动到底部
scroll.scrollTo(scroll.scrollHeight)

// 滚动到指定消息
const child = scroll.getChildren().find((c) => c.id === messageID)
if (child) scroll.scrollBy(child.y - scroll.y - 1)

function findNextVisibleMessage(direction: "next" | "prev"): string | null {
  const visibleMessages = scroll
    .getChildren()
    .filter((c) => isValidMessage(c))
    .sort((a, b) => a.y - b.y)

  if (direction === "next") {
    return visibleMessages.find((c) => c.y > scrollTop + 10)?.id ?? null
  }

  return [...visibleMessages].reverse().find((c) => c.y < scrollTop - 10)?.id ?? null
}

const stickyScroll = true
const stickyStart = "bottom"

// 提交后自动滚动
onSubmit={() => {
  setTimeout(() => {
    scroll.scrollTo(scroll.scrollHeight)
  }, 50)
}}

async function approve() {
  await sdk.client.permission.reply({
    requestID: request.id,
    sessionID: request.sessionID,
    approved: true,
  })
}

async function alwaysApprove() {
  await sdk.client.permission.always({
    requestID: request.id,
    sessionID: request.sessionID,
  })
}

const { mode, setMode } = useTheme()

// 切换主题
setMode(mode() === "dark" ? "light" : "dark")

// 使用 Tab 键在组件间切换
useKeyboard((evt) => {
  if (evt.name === "tab") {
    focusNextComponent()
  }
})

// 上下键导航列表
useKeyboard((evt) => {
  if (evt.name === "down") {
    setSelectedIndex((i) => Math.min(i + 1, items.length - 1))
  } else if (evt.name === "up") {
    setSelectedIndex((i) => Math.max(i - 1, 0))
  }
})

createEffect(() => {
  if (route.data.type === "home") {
    renderer.setTerminalTitle("OpenCode")
    return
  }

  if (route.data.type === "session") {
    const session = sync.session.get(route.data.sessionID)
    const title = session.title.slice(0, 40)
    renderer.setTerminalTitle(`OC | ${title}`)
  }
})

useKeyboard((evt) => {
  if (keybind.match("terminal_suspend", evt)) {
    process.once("SIGCONT", () => {
      renderer.resume()
    })
    renderer.suspend()
    process.kill(0, "SIGTSTP")
  }
})

// 切换调试覆盖层
command.register(() => [
  {
    title: "Toggle debug panel",
    onSelect: () => {
      renderer.toggleDebugOverlay()
    },
  },
])

// 切换控制台
command.register(() => [
  {
    title: "Toggle console",
    onSelect: () => {
      renderer.console.toggle()
    },
  },
])