bincode-cli 1.0.1

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

@@ -0,0 +1,560 @@
+import type { BoxRenderable, TextareaRenderable, KeyEvent, ScrollBoxRenderable } from "@opentui/core"
+import fuzzysort from "fuzzysort"
+import { firstBy } from "remeda"
+import { createMemo, createResource, createEffect, onMount, onCleanup, For, Show, createSignal } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useSDK } from "@tui/context/sdk"
+import { useSync } from "@tui/context/sync"
+import { useTheme, selectedForeground } from "@tui/context/theme"
+import { SplitBorder } from "@tui/component/border"
+import { useCommandDialog } from "@tui/component/dialog-command"
+import { useTerminalDimensions } from "@opentui/solid"
+import { Locale } from "@/util/locale"
+import type { PromptInfo } from "./history"
+
+export type AutocompleteRef = {
+  onInput: (value: string) => void
+  onKeyDown: (e: KeyEvent) => void
+  visible: false | "@" | "/"
+}
+
+export type AutocompleteOption = {
+  display: string
+  aliases?: string[]
+  disabled?: boolean
+  description?: string
+  onSelect?: () => void
+}
+
+export function Autocomplete(props: {
+  value: string
+  sessionID?: string
+  setPrompt: (input: (prompt: PromptInfo) => void) => void
+  setExtmark: (partIndex: number, extmarkId: number) => void
+  anchor: () => BoxRenderable
+  input: () => TextareaRenderable
+  ref: (ref: AutocompleteRef) => void
+  fileStyleId: number
+  agentStyleId: number
+  promptPartTypeId: () => number
+}) {
+  const sdk = useSDK()
+  const sync = useSync()
+  const command = useCommandDialog()
+  const { theme } = useTheme()
+  const dimensions = useTerminalDimensions()
+
+  const [store, setStore] = createStore({
+    index: 0,
+    selected: 0,
+    visible: false as AutocompleteRef["visible"],
+  })
+
+  const [positionTick, setPositionTick] = createSignal(0)
+
+  createEffect(() => {
+    if (store.visible) {
+      let lastPos = { x: 0, y: 0, width: 0 }
+      const interval = setInterval(() => {
+        const anchor = props.anchor()
+        if (anchor.x !== lastPos.x || anchor.y !== lastPos.y || anchor.width !== lastPos.width) {
+          lastPos = { x: anchor.x, y: anchor.y, width: anchor.width }
+          setPositionTick((t) => t + 1)
+        }
+      }, 50)
+
+      onCleanup(() => clearInterval(interval))
+    }
+  })
+
+  const position = createMemo(() => {
+    if (!store.visible) return { x: 0, y: 0, width: 0 }
+    const dims = dimensions()
+    positionTick()
+    const anchor = props.anchor()
+    const parent = anchor.parent
+    const parentX = parent?.x ?? 0
+    const parentY = parent?.y ?? 0
+
+    return {
+      x: anchor.x - parentX,
+      y: anchor.y - parentY,
+      width: anchor.width,
+    }
+  })
+
+  const filter = createMemo(() => {
+    if (!store.visible) return
+    // Track props.value to make memo reactive to text changes
+    props.value // <- there surely is a better way to do this, like making .input() reactive
+
+    return props.input().getTextRange(store.index + 1, props.input().cursorOffset)
+  })
+
+  function insertPart(text: string, part: PromptInfo["parts"][number]) {
+    const input = props.input()
+    const currentCursorOffset = input.cursorOffset
+
+    const charAfterCursor = props.value.at(currentCursorOffset)
+    const needsSpace = charAfterCursor !== " "
+    const append = "@" + text + (needsSpace ? " " : "")
+
+    input.cursorOffset = store.index
+    const startCursor = input.logicalCursor
+    input.cursorOffset = currentCursorOffset
+    const endCursor = input.logicalCursor
+
+    input.deleteRange(startCursor.row, startCursor.col, endCursor.row, endCursor.col)
+    input.insertText(append)
+
+    const virtualText = "@" + text
+    const extmarkStart = store.index
+    const extmarkEnd = extmarkStart + Bun.stringWidth(virtualText)
+
+    const styleId = part.type === "file" ? props.fileStyleId : part.type === "agent" ? props.agentStyleId : undefined
+
+    const extmarkId = input.extmarks.create({
+      start: extmarkStart,
+      end: extmarkEnd,
+      virtual: true,
+      styleId,
+      typeId: props.promptPartTypeId(),
+    })
+
+    props.setPrompt((draft) => {
+      if (part.type === "file" && part.source?.text) {
+        part.source.text.start = extmarkStart
+        part.source.text.end = extmarkEnd
+        part.source.text.value = virtualText
+      } else if (part.type === "agent" && part.source) {
+        part.source.start = extmarkStart
+        part.source.end = extmarkEnd
+        part.source.value = virtualText
+      }
+      const partIndex = draft.parts.length
+      draft.parts.push(part)
+      props.setExtmark(partIndex, extmarkId)
+    })
+  }
+
+  const [files] = createResource(
+    () => filter(),
+    async (query) => {
+      if (!store.visible || store.visible === "/") return []
+
+      // Get files from SDK
+      const result = await sdk.client.find.files({
+        query: query ?? "",
+      })
+
+      const options: AutocompleteOption[] = []
+
+      // Add file options
+      if (!result.error && result.data) {
+        const width = props.anchor().width - 4
+        options.push(
+          ...result.data.map(
+            (item): AutocompleteOption => ({
+              display: Locale.truncateMiddle(item, width),
+              onSelect: () => {
+                insertPart(item, {
+                  type: "file",
+                  mime: "text/plain",
+                  filename: item,
+                  url: `file://${process.cwd()}/${item}`,
+                  source: {
+                    type: "file",
+                    text: {
+                      start: 0,
+                      end: 0,
+                      value: "",
+                    },
+                    path: item,
+                  },
+                })
+              },
+            }),
+          ),
+        )
+      }
+
+      return options
+    },
+    {
+      initialValue: [],
+    },
+  )
+
+  const agents = createMemo(() => {
+    const agents = sync.data.agent
+    return agents
+      .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 session = createMemo(() => (props.sessionID ? sync.session.get(props.sessionID) : undefined))
+  const commands = createMemo((): AutocompleteOption[] => {
+    const results: AutocompleteOption[] = []
+    const s = session()
+    for (const command of sync.data.command) {
+      results.push({
+        display: "/" + command.name,
+        description: command.description,
+        onSelect: () => {
+          const newText = "/" + command.name + " "
+          const cursor = props.input().logicalCursor
+          props.input().deleteRange(0, 0, cursor.row, cursor.col)
+          props.input().insertText(newText)
+          props.input().cursorOffset = Bun.stringWidth(newText)
+        },
+      })
+    }
+    if (s) {
+      results.push(
+        {
+          display: "/undo",
+          description: "undo the last message",
+          onSelect: () => {
+            command.trigger("session.undo")
+          },
+        },
+        {
+          display: "/redo",
+          description: "redo the last message",
+          onSelect: () => command.trigger("session.redo"),
+        },
+        {
+          display: "/compact",
+          aliases: ["/summarize"],
+          description: "compact the session",
+          onSelect: () => command.trigger("session.compact"),
+        },
+        // {
+        //   display: "/unshare",
+        //   disabled: !s.share,
+        //   description: "unshare a session",
+        //   onSelect: () => command.trigger("session.unshare"),
+        // },
+        {
+          display: "/rename",
+          description: "rename session",
+          onSelect: () => command.trigger("session.rename"),
+        },
+        {
+          display: "/copy",
+          description: "copy session transcript to clipboard",
+          onSelect: () => command.trigger("session.copy"),
+        },
+        {
+          display: "/export",
+          description: "export session transcript to file",
+          onSelect: () => command.trigger("session.export"),
+        },
+        {
+          display: "/timeline",
+          description: "jump to message",
+          onSelect: () => command.trigger("session.timeline"),
+        },
+        {
+          display: "/fork",
+          description: "fork from message",
+          onSelect: () => command.trigger("session.fork"),
+        },
+        {
+          display: "/thinking",
+          description: "toggle thinking visibility",
+          onSelect: () => command.trigger("session.toggle.thinking"),
+        },
+      )
+      // if (sync.data.config.share !== "disabled") {
+      //   results.push({
+      //     display: "/share",
+      //     disabled: !!s.share?.url,
+      //     description: "share a session",
+      //     onSelect: () => command.trigger("session.share"),
+      //   })
+      // }
+    }
+
+    results.push(
+      {
+        display: "/new",
+        aliases: ["/clear"],
+        description: "create a new session",
+        onSelect: () => command.trigger("session.new"),
+      },
+      {
+        display: "/models",
+        description: "list models",
+        onSelect: () => command.trigger("model.list"),
+      },
+      {
+        display: "/agents",
+        description: "list agents",
+        onSelect: () => command.trigger("agent.list"),
+      },
+      {
+        display: "/session",
+        aliases: ["/resume", "/continue"],
+        description: "list sessions",
+        onSelect: () => command.trigger("session.list"),
+      },
+      {
+        display: "/status",
+        description: "show status",
+        onSelect: () => command.trigger("bincode.status"),
+      },
+      {
+        display: "/mcp",
+        description: "toggle MCPs",
+        onSelect: () => command.trigger("mcp.list"),
+      },
+      {
+        display: "/theme",
+        description: "toggle theme",
+        onSelect: () => command.trigger("theme.switch"),
+      },
+      {
+        display: "/editor",
+        description: "open editor",
+        onSelect: () => command.trigger("prompt.editor", "prompt"),
+      },
+      {
+        display: "/connect",
+        description: "connect to a provider",
+        onSelect: () => command.trigger("provider.connect"),
+      },
+      {
+        display: "/help",
+        description: "show help",
+        onSelect: () => command.trigger("help.show"),
+      },
+      {
+        display: "/commands",
+        description: "show all commands",
+        onSelect: () => command.show(),
+      },
+      {
+        display: "/exit",
+        aliases: ["/quit", "/q"],
+        description: "exit the app",
+        onSelect: () => command.trigger("app.exit"),
+      },
+    )
+    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(() => {
+    const mixed: AutocompleteOption[] = (
+      store.visible === "@" ? [...agents(), ...(files() || [])] : [...commands()]
+    ).filter((x) => x.disabled !== true)
+    const currentFilter = filter()
+    if (!currentFilter) return mixed
+    const result = fuzzysort.go(currentFilter, mixed, {
+      keys: [(obj) => obj.display.trimEnd(), "description", (obj) => obj.aliases?.join(" ") ?? ""],
+      limit: 10,
+      scoreFn: (objResults) => {
+        const displayResult = objResults[0]
+        if (displayResult && displayResult.target.startsWith(store.visible + currentFilter)) {
+          return objResults.score * 2
+        }
+        return objResults.score
+      },
+    })
+    return result.map((arr) => arr.obj)
+  })
+
+  createEffect(() => {
+    filter()
+    setStore("selected", 0)
+  })
+
+  function move(direction: -1 | 1) {
+    if (!store.visible) return
+    if (!options().length) return
+    let next = store.selected + direction
+    if (next < 0) next = options().length - 1
+    if (next >= options().length) next = 0
+    moveTo(next)
+  }
+
+  function moveTo(next: number) {
+    setStore("selected", next)
+    if (!scroll) return
+    const viewportHeight = Math.min(height(), options().length)
+    const scrollBottom = scroll.scrollTop + viewportHeight
+    if (next < scroll.scrollTop) {
+      scroll.scrollBy(next - scroll.scrollTop)
+    } else if (next + 1 > scrollBottom) {
+      scroll.scrollBy(next + 1 - scrollBottom)
+    }
+  }
+
+  function select() {
+    const selected = options()[store.selected]
+    if (!selected) return
+    hide()
+    selected.onSelect?.()
+  }
+
+  function show(mode: "@" | "/") {
+    command.keybinds(false)
+    setStore({
+      visible: mode,
+      index: props.input().cursorOffset,
+    })
+  }
+
+  function hide() {
+    const text = props.input().plainText
+    if (store.visible === "/" && !text.endsWith(" ") && text.startsWith("/")) {
+      const cursor = props.input().logicalCursor
+      props.input().deleteRange(0, 0, cursor.row, cursor.col)
+      // Sync the prompt store immediately since onContentChange is async
+      props.setPrompt((draft) => {
+        draft.input = props.input().plainText
+      })
+    }
+    command.keybinds(true)
+    setStore("visible", false)
+  }
+
+  onMount(() => {
+    props.ref({
+      get visible() {
+        return store.visible
+      },
+      onInput(value) {
+        if (store.visible) {
+          if (
+            // Typed text before the trigger
+            props.input().cursorOffset <= store.index ||
+            // There is a space between the trigger and the cursor
+            props.input().getTextRange(store.index, props.input().cursorOffset).match(/\s/) ||
+            // "/<command>" is not the sole content
+            (store.visible === "/" && value.match(/^\S+\s+\S+\s*$/))
+          ) {
+            hide()
+            return
+          }
+        }
+      },
+      onKeyDown(e: KeyEvent) {
+        if (store.visible) {
+          const name = e.name?.toLowerCase()
+          const ctrlOnly = e.ctrl && !e.meta && !e.shift
+          const isNavUp = name === "up" || (ctrlOnly && name === "p")
+          const isNavDown = name === "down" || (ctrlOnly && name === "n")
+
+          if (isNavUp) {
+            move(-1)
+            e.preventDefault()
+            return
+          }
+          if (isNavDown) {
+            move(1)
+            e.preventDefault()
+            return
+          }
+          if (name === "escape") {
+            hide()
+            e.preventDefault()
+            return
+          }
+          if (name === "return" || name === "tab") {
+            select()
+            e.preventDefault()
+            return
+          }
+        }
+        if (!store.visible) {
+          if (e.name === "@") {
+            const cursorOffset = props.input().cursorOffset
+            const charBeforeCursor =
+              cursorOffset === 0 ? undefined : props.input().getTextRange(cursorOffset - 1, cursorOffset)
+            const canTrigger = charBeforeCursor === undefined || charBeforeCursor === "" || /\s/.test(charBeforeCursor)
+            if (canTrigger) show("@")
+          }
+
+          if (e.name === "/") {
+            if (props.input().cursorOffset === 0) show("/")
+          }
+        }
+      },
+    })
+  })
+
+  const height = createMemo(() => {
+    if (options().length) return Math.min(10, options().length)
+    return 1
+  })
+
+  let scroll: ScrollBoxRenderable
+
+  return (
+    <box
+      visible={store.visible !== false}
+      position="absolute"
+      top={position().y - height()}
+      left={position().x}
+      width={position().width}
+      zIndex={100}
+      {...SplitBorder}
+      borderColor={theme.border}
+    >
+      <scrollbox
+        ref={(r: ScrollBoxRenderable) => (scroll = r)}
+        backgroundColor={theme.backgroundMenu}
+        height={height()}
+        scrollbarOptions={{ visible: false }}
+      >
+        <For
+          each={options()}
+          fallback={
+            <box paddingLeft={1} paddingRight={1}>
+              <text fg={theme.textMuted}>No matching items</text>
+            </box>
+          }
+        >
+          {(option, index) => (
+            <box
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={index() === store.selected ? theme.primary : undefined}
+              flexDirection="row"
+            >
+              <text fg={index() === store.selected ? selectedForeground(theme) : theme.text} flexShrink={0}>
+                {option.display}
+              </text>
+              <Show when={option.description}>
+                <text fg={index() === store.selected ? selectedForeground(theme) : theme.textMuted} wrapMode="none">
+                  {option.description}
+                </text>
+              </Show>
+            </box>
+          )}
+        </For>
+      </scrollbox>
+    </box>
+  )
+}

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

@@ -0,0 +1,108 @@
+import path from "path"
+import { Global } from "@/global"
+import { onMount } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { clone } from "remeda"
+import { createSimpleContext } from "../../context/helper"
+import { appendFile, writeFile } from "fs/promises"
+import type { AgentPart, FilePart, TextPart } from "@bincode-ai/sdk/v2"
+
+export type PromptInfo = {
+  input: string
+  mode?: "normal" | "shell"
+  parts: (
+    | Omit<FilePart, "id" | "messageID" | "sessionID">
+    | Omit<AgentPart, "id" | "messageID" | "sessionID">
+    | (Omit<TextPart, "id" | "messageID" | "sessionID"> & {
+        source?: {
+          text: {
+            start: number
+            end: number
+            value: string
+          }
+        }
+      })
+  )[]
+}
+
+const MAX_HISTORY_ENTRIES = 50
+
+export const { use: usePromptHistory, provider: PromptHistoryProvider } = createSimpleContext({
+  name: "PromptHistory",
+  init: () => {
+    const historyFile = Bun.file(path.join(Global.Path.state, "prompt-history.jsonl"))
+    onMount(async () => {
+      const text = await historyFile.text().catch(() => "")
+      const lines = text
+        .split("\n")
+        .filter(Boolean)
+        .map((line) => {
+          try {
+            return JSON.parse(line)
+          } catch {
+            return null
+          }
+        })
+        .filter((line): line is PromptInfo => line !== null)
+        .slice(-MAX_HISTORY_ENTRIES)
+
+      setStore("history", lines)
+
+      // Rewrite file with only valid entries to self-heal corruption
+      if (lines.length > 0) {
+        const content = lines.map((line) => JSON.stringify(line)).join("\n") + "\n"
+        writeFile(historyFile.name!, content).catch(() => {})
+      }
+    })
+
+    const [store, setStore] = createStore({
+      index: 0,
+      history: [] as PromptInfo[],
+    })
+
+    return {
+      move(direction: 1 | -1, input: string) {
+        if (!store.history.length) return undefined
+        const current = store.history.at(store.index)
+        if (!current) return undefined
+        if (current.input !== input && input.length) return
+        setStore(
+          produce((draft) => {
+            const next = store.index + direction
+            if (Math.abs(next) > store.history.length) return
+            if (next > 0) return
+            draft.index = next
+          }),
+        )
+        if (store.index === 0)
+          return {
+            input: "",
+            parts: [],
+          }
+        return store.history.at(store.index)
+      },
+      append(item: PromptInfo) {
+        const entry = clone(item)
+        let trimmed = false
+        setStore(
+          produce((draft) => {
+            draft.history.push(entry)
+            if (draft.history.length > MAX_HISTORY_ENTRIES) {
+              draft.history = draft.history.slice(-MAX_HISTORY_ENTRIES)
+              trimmed = true
+            }
+            draft.index = 0
+          }),
+        )
+
+        if (trimmed) {
+          const content = store.history.map((line) => JSON.stringify(line)).join("\n") + "\n"
+          writeFile(historyFile.name!, content).catch(() => {})
+          return
+        }
+
+        appendFile(historyFile.name!, JSON.stringify(entry) + "\n").catch(() => {})
+      },
+    }
+  },
+})