saeeol 1.1.0 → 1.1.1

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

@@ -0,0 +1,217 @@
+import { createMemo, createSignal, onMount, onCleanup, Show, Switch, Match } from "solid-js"
+import "opentui-spinner/solid"
+import { useTheme } from "@tui/context/theme"
+import { useKeybind } from "@tui/context/keybind"
+import { useKV } from "../../context/kv"
+import { useDialog } from "@tui/ui/dialog"
+import { DialogAlert } from "../../ui/dialog-alert"
+import { Locale } from "@/util/locale"
+import { formatDuration } from "@/util/format"
+import { t } from "@/util/i18n"
+import { EmptyBorder } from "@tui/component/border"
+import type { PromptInfo } from "./history"
+
+export type PromptStatusBarProps = {
+  sessionID?: string
+  status: () => { type: string }
+  store: {
+    prompt: PromptInfo
+    mode: "normal" | "shell"
+    interrupt: number
+    exitPress: number
+  }
+  hint: any
+  usage: () => { context: string; cost?: string; health: string; remaining?: number; pct: number } | undefined
+  borderHighlight: () => any
+  spinnerDef: () => { frames: any; color: any }
+  editorFileLabelDisplay: () => string | undefined
+  onDismissEditorContext: () => void
+}
+
+export function PromptStatusBar(props: PromptStatusBarProps) {
+  const { theme } = useTheme()
+  const keybind = useKeybind()
+  const kv = useKV()
+  const dialog = useDialog()
+  const [editorContextHover, setEditorContextHover] = createSignal(false)
+  const [pointingHover, setPointingHover] = createSignal(false)
+  const pointing = () => props.sessionID ? kv.get(`pointing:${props.sessionID}`) : undefined
+  const pointingDisplay = createMemo(() => {
+    const p = pointing()
+    if (!p) return ""
+    const segments = p.replace(/\\/g, "/").split("/").filter(Boolean)
+    if (segments.length <= 3) return p
+    return "..." + segments.slice(-2).join("/")
+  })
+
+  return (
+    <>
+      <box
+        height={1}
+        flexShrink={0}
+        border={["left"]}
+        borderColor={props.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={props.status().type !== "idle"} fallback={props.hint ?? <text />}>
+          <box
+            flexDirection="row"
+            gap={1}
+            flexGrow={1}
+            justifyContent={props.status().type === "retry" ? "space-between" : "flex-start"}
+          >
+            <box flexShrink={0} flexDirection="row" gap={1}>
+              <box marginLeft={1}>
+                <Show when={kv.get("animations_enabled", true)} fallback={<text fg={theme.textMuted}>[⋯]</text>}>
+                  <spinner color={props.spinnerDef().color} frames={props.spinnerDef().frames} interval={40} />
+                </Show>
+              </box>
+              <box flexDirection="row" gap={1} flexShrink={0}>
+                <RetryInfo status={props.status} />
+              </box>
+            </box>
+            <text fg={props.store.interrupt > 0 ? theme.primary : theme.text}>
+              esc{" "}
+              <span style={{ fg: props.store.interrupt > 0 ? theme.primary : theme.textMuted }}>
+                {props.store.interrupt > 0 ? "again to interrupt" : "interrupt"}
+              </span>
+            </text>
+          </box>
+        </Show>
+        <Show when={props.status().type !== "retry"}>
+          <box gap={2} flexDirection="row">
+            <Show when={props.store.exitPress > 0}>
+              <text fg={theme.primary}>
+                ctrl+c <span style={{ fg: theme.primary }}>again to exit</span>
+              </text>
+            </Show>
+            <Show when={pointing()} keyed>
+              {(dir) => (
+                <text
+                  fg={pointingHover() ? theme.primary : theme.secondary}
+                  onMouseOver={() => setPointingHover(true)}
+                  onMouseOut={() => setPointingHover(false)}
+                  wrapMode="none"
+                >
+                  {pointingHover() ? `✕ ${dir}` : t("ui.statusbar.pointing", { path: pointingDisplay() })}
+                </text>
+              )}
+            </Show>
+            <Show when={props.editorFileLabelDisplay()}>
+              {(file) => (
+                <text
+                  fg={theme.secondary}
+                  onMouseOver={() => setEditorContextHover(true)}
+                  onMouseOut={() => setEditorContextHover(false)}
+                  onMouseUp={props.onDismissEditorContext}
+                >
+                  {editorContextHover() ? `x ${file()}` : file()}
+                </text>
+              )}
+            </Show>
+            <Switch>
+              <Match when={props.store.mode === "normal"}>
+                <Switch>
+                  <Match when={props.usage()}>
+                    {(item) => {
+                      const u = item()
+                      const color = u.health === "critical"
+                        ? theme.error
+                        : u.health === "warning"
+                          ? theme.warning
+                          : theme.textMuted
+                      const parts = [u.context, u.cost].filter(Boolean)
+                      return (
+                        <text fg={color} wrapMode="none">
+                          {parts.join(" · ")}
+                        </text>
+                      )
+                    }}
+                  </Match>
+                  <Match when={true}>
+                    <text fg={theme.text}>
+                      {keybind.print("agent_cycle")}×2 <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={props.store.mode === "shell"}>
+                <text fg={theme.text}>
+                  esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
+                </text>
+              </Match>
+            </Switch>
+          </box>
+        </Show>
+      </box>
+    </>
+  )
+}
+
+function RetryInfo(props: { status: () => { type: string } }) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const retry = createMemo(() => {
+    const s = props.status() as any
+    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 handleClick = () => {
+    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 base = message()
+    const hint = isTruncated() ? " (click to expand)" : ""
+    const duration = formatDuration(seconds())
+    return base + hint + ` [retrying ${duration ? `in ${duration} ` : ""}attempt #${r.attempt}]`
+  }
+  return (
+    <Show when={retry()}>
+      <box onMouseUp={handleClick}>
+        <text fg={theme.error}>{retryText()}</text>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/component/prompt/autocomplete-options.ts

@@ -0,0 +1,148 @@
+import fuzzysort from "fuzzysort"
+import { firstBy } from "remeda"
+import { createMemo, createResource } from "solid-js"
+import type { BoxRenderable } from "@opentui/core"
+import { useSDK } from "@tui/context/sdk"
+import { useSync } from "@tui/context/sync"
+import { Locale } from "@/util/locale"
+import type { PromptInfo } from "./history"
+import { useFrecency } from "./frecency"
+import { removeLineRange, extractLineRange, createFilePart } from "./autocomplete-utils"
+import type { AutocompleteOption, AutocompleteStore } from "./autocomplete-types"
+
+type InsertPartFn = (text: string, part: PromptInfo["parts"][number]) => void
+
+export function useAutocompleteOptions(
+  store: AutocompleteStore,
+  search: () => string,
+  anchor: () => BoxRenderable,
+  insertPart: InsertPartFn,
+  syncDir: string,
+) {
+  const sdk = useSDK()
+  const sync = useSync()
+  const frecency = useFrecency()
+
+  function createFilePartLocal(item: string, lineRange?: { startLine: number; endLine?: number }) {
+    return createFilePart(item, syncDir, lineRange)
+  }
+
+  const [files] = createResource(
+    () => search(),
+    async (query) => {
+      if (!store.visible || store.visible === "/") return []
+      const { lineRange, baseQuery } = extractLineRange(query ?? "")
+      const result = await sdk.client.find.files({ query: baseQuery })
+      const options: AutocompleteOption[] = []
+      if (!result.error && result.data) {
+        const sortedFiles = result.data.sort((a, b) => {
+          const aScore = frecency.getFrecency(a)
+          const bScore = frecency.getFrecency(b)
+          if (aScore !== bScore) return bScore - aScore
+          const aDepth = a.split("/").length
+          const bDepth = b.split("/").length
+          if (aDepth !== bDepth) return aDepth - bDepth
+          return a.localeCompare(b)
+        })
+        const width = anchor().width - 4
+        options.push(
+          ...sortedFiles.map((item): AutocompleteOption => {
+            const { filename, part } = createFilePartLocal(item, lineRange)
+            const isDir = item.endsWith("/")
+            return {
+              display: Locale.truncateMiddle(filename, width),
+              value: filename,
+              isDirectory: isDir,
+              path: item,
+              onSelect: () => insertPart(filename, part),
+            }
+          }),
+        )
+      }
+      return options
+    },
+    { initialValue: [] },
+  )
+
+  const mcpResources = createMemo(() => {
+    if (!store.visible || store.visible === "/") return []
+    const options: AutocompleteOption[] = []
+    for (const res of Object.values(sync.data.mcp_resource)) {
+      const text = `${res.name} (${res.uri})`
+      options.push({
+        display: text,
+        value: text,
+        description: res.description,
+        onSelect: () => {
+          insertPart(res.name, {
+            type: "file",
+            mime: res.mimeType ?? "text/plain",
+            filename: res.name,
+            url: res.uri,
+            source: { type: "resource", text: { start: 0, end: 0, value: "" }, clientName: res.client, uri: res.uri },
+          })
+        },
+      })
+    }
+    return options
+  })
+
+  const agents = createMemo(() => {
+    return sync.data.agent
+      .filter((agent) => !agent.hidden && agent.mode !== "primary")
+      .map((agent): AutocompleteOption => ({
+        display: "@" + agent.name,
+        onSelect: () => {
+          insertPart(agent.name, {
+            type: "agent",
+            name: agent.name,
+            source: { start: 0, end: 0, value: "" },
+          })
+        },
+      }))
+  })
+
+  const commands = createMemo((): AutocompleteOption[] => {
+    const results: AutocompleteOption[] = []
+    for (const serverCommand of sync.data.command) {
+      if (serverCommand.source === "skill") continue
+      const label = serverCommand.source === "mcp" ? ":mcp" : ""
+      results.push({
+        display: "/" + serverCommand.name + label,
+        description: serverCommand.description,
+        onSelect: () => {},
+      })
+    }
+    results.sort((a, b) => a.display.localeCompare(b.display))
+    const max = firstBy(results, [(x) => x.display.length, "desc"])?.display.length
+    if (!max) return results
+    return results.map((item) => ({ ...item, display: item.display.padEnd(max + 2) }))
+  })
+
+  const options = createMemo((prev: AutocompleteOption[] | undefined) => {
+    const filesValue = files()
+    const mixed: AutocompleteOption[] =
+      store.visible === "@" ? [...agents(), ...(filesValue || []), ...mcpResources()] : [...commands()]
+    const searchValue = search()
+    if (!searchValue) return mixed
+    if (files.loading && prev && prev.length > 0) return prev
+    const result = fuzzysort.go(removeLineRange(searchValue), mixed, {
+      keys: [
+        (obj) => removeLineRange((obj.value ?? obj.display).trimEnd()),
+        "description",
+        (obj) => obj.aliases?.join(" ") ?? "",
+      ],
+      limit: 10,
+      scoreFn: (objResults) => {
+        const displayResult = objResults[0]
+        let score = objResults.score
+        if (displayResult && displayResult.target.startsWith(store.visible + searchValue)) score *= 2
+        const frecencyScore = objResults.obj.path ? frecency.getFrecency(objResults.obj.path) : 0
+        return score * (1 + frecencyScore)
+      },
+    })
+    return result.map((arr) => arr.obj)
+  })
+
+  return { files, options }
+}

package/src/cli/cmd/tui/component/prompt/autocomplete-ref.ts

@@ -0,0 +1,129 @@
+import type { TextareaRenderable } from "@opentui/core"
+import { onMount, onCleanup } from "solid-js"
+import { useEditorContext } from "@tui/context/editor"
+import { normalizeMentionPath, createFilePart } from "./autocomplete-utils"
+import type { AutocompleteRef, AutocompleteStore } from "./autocomplete-types"
+
+type RefDeps = {
+  store: AutocompleteStore
+  setStore: (key: string, value: unknown) => void
+  input: () => TextareaRenderable
+  options: () => import("./autocomplete-types").AutocompleteOption[]
+  show: (mode: "@" | "/") => void
+  hide: () => void
+  select: () => void
+  expandDirectory: () => void
+  move: (dir: -1 | 1) => void
+  insertPart: (text: string, part: any) => void
+  syncDir: string
+  setRef: (ref: AutocompleteRef) => void
+}
+
+export function useAutocompleteRef(deps: RefDeps) {
+  const editor = useEditorContext()
+
+  onMount(() => {
+    const unsubscribeMention = editor.onMention((mention) => {
+      const item = normalizeMentionPath(mention.filePath, deps.syncDir || process.cwd())
+      const lineRange = {
+        startLine: mention.lineStart,
+        endLine: mention.lineEnd > mention.lineStart ? mention.lineEnd : undefined,
+      }
+      const { filename, part } = createFilePart(item, deps.syncDir, lineRange)
+      const index = deps.store.visible === "@" ? deps.store.index : deps.input().cursorOffset
+      deps.setStore("visible", false)
+      deps.setStore("index", index)
+      deps.insertPart(filename, part)
+    })
+    onCleanup(() => unsubscribeMention())
+
+    deps.setRef({
+      get visible() {
+        return deps.store.visible
+      },
+      dismiss() {
+        if (!deps.store.visible) return
+        deps.setStore("visible", false)
+      },
+      onInput(value) {
+        if (deps.store.visible) {
+          const inp = deps.input()
+          if (
+            inp.cursorOffset <= deps.store.index ||
+            inp.getTextRange(deps.store.index, inp.cursorOffset).match(/\s/) ||
+            (deps.store.visible === "/" && value.match(/^\S+\s+\S+\s*$/))
+          ) {
+            deps.hide()
+          }
+          return
+        }
+        const offset = deps.input().cursorOffset
+        if (offset === 0) return
+        if (value.startsWith("/") && !value.slice(0, offset).match(/\s/)) {
+          deps.show("/")
+          deps.setStore("index", 0)
+          return
+        }
+        const text = value.slice(0, offset)
+        const idx = text.lastIndexOf("@")
+        if (idx === -1) return
+        const between = text.slice(idx)
+        const before = idx === 0 ? undefined : value[idx - 1]
+        if ((before === undefined || /\s/.test(before)) && !between.match(/\s/)) {
+          deps.show("@")
+          deps.setStore("index", idx)
+        }
+      },
+      onKeyDown(e) {
+        if (deps.store.visible) {
+          const name = e.name?.toLowerCase()
+          const ctrlOnly = e.ctrl && !e.meta && !e.shift
+          if (name === "up" || (ctrlOnly && name === "p")) {
+            deps.setStore("input", "keyboard")
+            deps.move(-1)
+            e.preventDefault()
+            return
+          }
+          if (name === "down" || (ctrlOnly && name === "n")) {
+            deps.setStore("input", "keyboard")
+            deps.move(1)
+            e.preventDefault()
+            return
+          }
+          if (name === "escape") { deps.hide(); e.preventDefault(); return }
+          if (name === "return") { deps.select(); e.preventDefault(); return }
+          if (name === "tab") {
+            const selected = deps.options()[deps.store.selected]
+            selected?.isDirectory ? deps.expandDirectory() : deps.select()
+            e.preventDefault()
+            return
+          }
+          if (name === "right" && deps.input().cursorOffset <= deps.store.index) {
+            deps.hide()
+            return
+          }
+        }
+        if (!deps.store.visible) {
+          if (e.name === "@") {
+            const off = deps.input().cursorOffset
+            const before = off === 0 ? undefined : deps.input().getTextRange(off - 1, off)
+            if (before === undefined || before === "" || /\s/.test(before)) deps.show("@")
+          }
+          if (e.name === "/" && deps.input().cursorOffset === 0) deps.show("/")
+        }
+      },
+      onCursorChange() {
+        if (!deps.store.visible) return
+        const cursor = deps.input().cursorOffset
+        const value = deps.input().plainText
+        if (
+          cursor <= deps.store.index ||
+          deps.input().getTextRange(deps.store.index, cursor).match(/\s/) ||
+          (deps.store.visible === "/" && value.match(/^\S+\s+\S+\s*$/))
+        ) {
+          deps.hide()
+        }
+      },
+    })
+  })
+}

package/src/cli/cmd/tui/component/prompt/autocomplete-types.ts

@@ -0,0 +1,27 @@
+import type { KeyEvent } from "@opentui/core"
+
+export type AutocompleteRef = {
+  onInput: (value: string) => void
+  onKeyDown: (e: KeyEvent) => void
+  onCursorChange: () => void
+  dismiss: () => void
+  visible: false | "@" | "/"
+}
+
+export type AutocompleteOption = {
+  display: string
+  value?: string
+  aliases?: string[]
+  disabled?: boolean
+  description?: string
+  isDirectory?: boolean
+  onSelect?: () => void
+  path?: string
+}
+
+export type AutocompleteStore = {
+  index: number
+  selected: number
+  visible: AutocompleteRef["visible"]
+  input: "keyboard" | "mouse"
+}

package/src/cli/cmd/tui/component/prompt/autocomplete-utils.ts

@@ -0,0 +1,69 @@
+import { pathToFileURL } from "bun"
+import path from "path"
+
+export function removeLineRange(input: string) {
+  const hashIndex = input.lastIndexOf("#")
+  return hashIndex !== -1 ? input.substring(0, hashIndex) : input
+}
+
+export function extractLineRange(input: string) {
+  const hashIndex = input.lastIndexOf("#")
+  if (hashIndex === -1) return { baseQuery: input }
+
+  const baseName = input.substring(0, hashIndex)
+  const linePart = input.substring(hashIndex + 1)
+  const lineMatch = linePart.match(/^(\d+)(?:-(\d*))?$/)
+  if (!lineMatch) return { baseQuery: baseName }
+
+  const startLine = Number(lineMatch[1])
+  const endLine = lineMatch[2] && startLine < Number(lineMatch[2]) ? Number(lineMatch[2]) : undefined
+
+  return {
+    lineRange: { baseName, startLine, endLine },
+    baseQuery: baseName,
+  }
+}
+
+export function createFilePart(
+  item: string,
+  syncPath: string,
+  lineRange?: { startLine: number; endLine?: number },
+) {
+  const baseDir = (syncPath || process.cwd()).replace(/\/+$/, "")
+  const fullPath = path.isAbsolute(item) ? item : path.join(baseDir, item)
+  const urlObj = pathToFileURL(fullPath)
+  const filename =
+    lineRange && !item.endsWith("/")
+      ? `${item}#${lineRange.startLine}${lineRange.endLine ? `-${lineRange.endLine}` : ""}`
+      : item
+
+  if (lineRange && !item.endsWith("/")) {
+    urlObj.searchParams.set("start", String(lineRange.startLine))
+    if (lineRange.endLine !== undefined) urlObj.searchParams.set("end", String(lineRange.endLine))
+  }
+
+  return {
+    filename,
+    url: urlObj.href,
+    part: {
+      type: "file" as const,
+      mime: "text/plain",
+      filename,
+      url: urlObj.href,
+      source: {
+        type: "file" as const,
+        text: { start: 0, end: 0, value: "" },
+        path: item,
+      },
+    },
+  }
+}
+
+export function normalizeMentionPath(filePath: string, baseDir: string) {
+  const absolute = path.resolve(filePath)
+  const relative = path.relative(baseDir, absolute)
+  if (relative && !relative.startsWith("..") && !path.isAbsolute(relative)) {
+    return relative.split(path.sep).join("/")
+  }
+  return absolute.split(path.sep).join("/")
+}