saeeol 1.1.0 → 1.1.1

package/src/cli/cmd/tui/component/prompt/use-prompt-store.ts

@@ -0,0 +1,183 @@
+import type { TextareaRenderable } from "@opentui/core"
+import { createEffect, createMemo, onMount, onCleanup, on, createSignal } from "solid-js"
+import { createStore, unwrap } from "solid-js/store"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { useArgs } from "@tui/context/args"
+import { useDialog } from "@tui/ui/dialog"
+import { useRenderer } from "@opentui/solid"
+import { useEvent } from "@tui/context/event"
+import { TuiEvent } from "../../event"
+import { SaeeolSessionTuiSync } from "@/saeeol/session/tui-sync"
+import { computePromptTraits } from "./traits"
+import type { PromptInfo } from "./history"
+import type { AutocompleteRef } from "./autocomplete"
+import type { ExtmarkSyncDeps } from "./use-extmark-sync"
+import type { PromptProps, PromptRef } from "."
+
+function randomIndex(count: number) {
+  if (count <= 0) return 0
+  return Math.floor(Math.random() * count)
+}
+
+export type StoreShape = {
+  prompt: PromptInfo
+  mode: "normal" | "shell"
+  extmarkToPartIndex: Map<number, number>
+  interrupt: number
+  exitPress: number
+  placeholder: number
+}
+
+export type StoreDeps = {
+  props: PromptProps
+  getInput: () => TextareaRenderable
+  extmarkSync: ExtmarkSyncDeps
+  restoreExtmarks: (parts: PromptInfo["parts"]) => void
+  list: () => string[]
+}
+
+let stashed: { prompt: PromptInfo; cursor: number } | undefined
+
+export function usePromptStore(deps: StoreDeps) {
+  const local = useLocal()
+  const sync = useSync()
+  const args = useArgs()
+  const dialog = useDialog()
+  const renderer = useRenderer()
+  const event = useEvent()
+
+  const [store, setStore] = createStore<StoreShape>({
+    placeholder: randomIndex(deps.list().length),
+    prompt: { input: "", parts: [] },
+    mode: "normal",
+    extmarkToPartIndex: new Map(),
+    interrupt: 0,
+    exitPress: 0,
+  })
+
+  const lastUserMessage = createMemo(() => {
+    if (!deps.props.sessionID) return undefined
+    const messages = sync.data.message[deps.props.sessionID]
+    if (!messages) return undefined
+    return messages.findLast((m): m is import("@saeeol/sdk/v2").UserMessage => m.role === "user")
+  })
+
+  createEffect(
+    on(
+      () => deps.props.sessionID,
+      () => { setStore("placeholder", randomIndex(deps.list().length)) },
+      { defer: true },
+    ),
+  )
+
+  let syncedKey: string | undefined
+  createEffect(() => {
+    const sessionID = deps.props.sessionID
+    const msg = lastUserMessage()
+    if (!sessionID || !msg) return
+    const parts = sync.data.part[msg.id]
+    if (!parts) return
+    if (!SaeeolSessionTuiSync.model({ role: msg.role, parts })) return
+    const key = [sessionID, msg.id].join(":")
+    if (key === syncedKey) return
+    syncedKey = key
+    const primary = local.agent.list().find((x) => x.name === msg.agent)
+    if (msg.agent && primary) {
+      if (!args.agent) local.agent.set(msg.agent)
+      if (msg.model && !primary.model && !args.agent) {
+        local.model.set(msg.model)
+        local.model.variant.set(msg.model.variant)
+      }
+    }
+  })
+
+  let submitFn: () => Promise<boolean> = async () => false
+  const [auto, setAuto] = createSignal<AutocompleteRef>()
+
+  const ref: PromptRef = {
+    get focused() { return deps.getInput().focused },
+    get current() { return store.prompt },
+    focus() { deps.getInput().focus() },
+    blur() { deps.getInput().blur() },
+    set(prompt) {
+      const input = deps.getInput()
+      input.setText(prompt.input)
+      setStore("prompt", prompt)
+      deps.restoreExtmarks(prompt.parts)
+      input.gotoBufferEnd()
+    },
+    reset() {
+      const input = deps.getInput()
+      input.clear()
+      input.extmarks.clear()
+      setStore("prompt", { input: "", parts: [] })
+      setStore("extmarkToPartIndex", new Map())
+    },
+    submit() { void submitFn() },
+  }
+
+  onMount(() => {
+    const saved = stashed
+    stashed = undefined
+    if (store.prompt.input) return
+    if (saved && saved.prompt.input) {
+      const input = deps.getInput()
+      input.setText(saved.prompt.input)
+      setStore("prompt", saved.prompt)
+      deps.restoreExtmarks(saved.prompt.parts)
+      input.cursorOffset = saved.cursor
+    }
+  })
+
+  onCleanup(() => {
+    if (store.prompt.input) {
+      stashed = { prompt: unwrap(store.prompt) as PromptInfo, cursor: deps.getInput().cursorOffset }
+    }
+    deps.props.ref?.(undefined)
+  })
+
+  createEffect(() => {
+    if (deps.props.visible === false || deps.props.disabled) auto()?.dismiss()
+  })
+
+  createEffect(() => {
+    const input = deps.getInput()
+    if (!input || input.isDestroyed) return
+    if (deps.props.visible === false || dialog.stack.length > 0) {
+      if (input.focused) input.blur()
+      return
+    }
+    if (!input.focused) input.focus()
+  })
+
+  createEffect(() => {
+    const input = deps.getInput()
+    if (!input || input.isDestroyed) return
+    input.traits = computePromptTraits({
+      mode: store.mode,
+      disabled: !!deps.props.disabled,
+      autocompleteVisible: !!auto()?.visible,
+    })
+  })
+
+  event.on(TuiEvent.PromptAppend.type, (evt: any) => {
+    const input = deps.getInput()
+    if (!input || input.isDestroyed) return
+    input.insertText(evt.properties.text)
+    setTimeout(() => {
+      if (!input || input.isDestroyed) return
+      input.getLayoutNode().markDirty()
+      input.gotoBufferEnd()
+      renderer.requestRender()
+    }, 0)
+  })
+
+  return {
+    store,
+    setStore,
+    ref,
+    setAuto,
+    setSubmitFn: (fn: () => Promise<boolean>) => { submitFn = fn },
+  }
+}

package/src/cli/cmd/tui/component/prompt/use-prompt-submit.tsx

@@ -0,0 +1,179 @@
+import type { TextareaRenderable } from "@opentui/core"
+import { produce, type SetStoreFunction } from "solid-js/store"
+import { useLocal } from "@tui/context/local"
+import { useSDK } from "@tui/context/sdk"
+import { useSync } from "@tui/context/sync"
+import { useRoute } from "@tui/context/route"
+import { useProject } from "@tui/context/project"
+import { useEditorContext, editorSelectionKey } from "@tui/context/editor"
+import { useDialog } from "@tui/ui/dialog"
+import { useToast } from "../../ui/toast"
+import { MessageID, PartID } from "@/session/schema"
+import { iife } from "@/util/iife"
+import { DialogProvider as DialogProviderConnect } from "../dialog-provider"
+import { DialogWorkspaceCreate, restoreWorkspaceSession } from "../dialog-workspace-create"
+import { DialogWorkspaceUnavailable } from "../dialog-workspace-unavailable"
+import { assign } from "./part"
+import type { PromptInfo } from "./history"
+import type { AutocompleteRef } from "./autocomplete"
+import type { ExtmarkSyncDeps } from "./use-extmark-sync"
+import { formatEditorContext } from "./use-prompt-memos"
+import type { PromptProps } from "."
+import type { StoreShape } from "./use-prompt-store"
+
+export type SubmitDeps = {
+  props: PromptProps
+  getInput: () => TextareaRenderable
+  store: StoreShape
+  setStore: SetStoreFunction<StoreShape>
+  autocomplete: () => AutocompleteRef | undefined
+  extmarkSync: ExtmarkSyncDeps
+  syncExtmarks: () => void
+  history: { append: (info: PromptInfo & { mode: "normal" | "shell" }) => void }
+  lastSubmittedEditorSelectionKey: { value: string | undefined }
+  editorContext: () => any
+  exit: () => Promise<void>
+}
+
+export function usePromptSubmit(deps: SubmitDeps) {
+  const local = useLocal()
+  const sdk = useSDK()
+  const sync = useSync()
+  const route = useRoute()
+  const project = useProject()
+  const dialog = useDialog()
+  const toast = useToast()
+
+  function promptModelWarning() {
+    toast.show({ variant: "warning", message: "Connect a provider to send prompts", duration: 3000 })
+    if (sync.data.provider.length === 0) dialog.replace(() => <DialogProviderConnect />)
+  }
+
+  async function submit(): Promise<boolean> {
+    const input = deps.getInput()
+    if (input && !input.isDestroyed && input.plainText !== deps.store.prompt.input) {
+      deps.setStore("prompt", "input", input.plainText)
+      deps.syncExtmarks()
+    }
+    if (deps.props.disabled) return false
+    if (deps.autocomplete()?.visible) return false
+    if (!deps.store.prompt.input) return false
+    const agent = local.agent.current()
+    if (!agent) return false
+    const trimmed = deps.store.prompt.input.trim()
+    if (trimmed === "exit" || trimmed === "quit" || trimmed === ":q") {
+      void deps.exit()
+      return true
+    }
+    const selectedModel = local.model.current()
+    if (!selectedModel) {
+      void promptModelWarning()
+      return false
+    }
+
+    const ws = deps.props.sessionID ? sync.session.get(deps.props.sessionID) : undefined
+    const wsID = ws?.workspaceID
+    const wsStatus = wsID ? (project.workspace.status(wsID) ?? "error") : undefined
+    if (deps.props.sessionID && wsID && wsStatus !== "connected") {
+      dialog.replace(() => (
+        <DialogWorkspaceUnavailable
+          onRestore={() => {
+            dialog.replace(() => (
+              <DialogWorkspaceCreate
+                onSelect={(id) =>
+                  restoreWorkspaceSession({ dialog, sdk, sync, project, toast, workspaceID: id, sessionID: deps.props.sessionID! })
+                }
+              />
+            ))
+          }}
+        />
+      ))
+      return false
+    }
+
+    let sessionID = deps.props.sessionID
+    if (sessionID == null) {
+      const res = await sdk.client.session.create({ workspace: deps.props.workspaceID })
+      if (res.error) {
+        console.log("Creating a session failed:", res.error)
+        toast.show({ message: "Creating a session failed. Open console for more details.", variant: "error" })
+        return true
+      }
+      sessionID = res.data.id
+    }
+
+    const messageID = MessageID.ascending()
+    let inputText = deps.store.prompt.input
+    const allExtmarks = input.extmarks.getAllForTypeId(deps.extmarkSync.promptPartTypeId)
+    const sorted = allExtmarks.sort((a: { start: number }, b: { start: number }) => b.start - a.start)
+    for (const extmark of sorted) {
+      const idx = deps.store.extmarkToPartIndex.get(extmark.id)
+      if (idx !== undefined) {
+        const part = deps.store.prompt.parts[idx]
+        if (part?.type === "text" && part.text) {
+          inputText = inputText.slice(0, extmark.start) + part.text + inputText.slice(extmark.end)
+        }
+      }
+    }
+
+    const nonTextParts = deps.store.prompt.parts.filter((p) => p.type !== "text")
+    const currentMode = deps.store.mode
+    const variant = local.model.variant.current()
+    const editorSel = deps.editorContext()
+    const editorKey = editorSelectionKey(editorSel)
+    const editorParts =
+      editorSel && editorKey !== deps.lastSubmittedEditorSelectionKey.value
+        ? [{ id: PartID.ascending(), type: "text" as const, text: formatEditorContext(editorSel), synthetic: true, metadata: { kind: "editor_context", source: editorSel.source ?? "editor", filePath: editorSel.filePath, ranges: editorSel.ranges } }]
+        : []
+
+    if (currentMode === "shell") {
+      void sdk.client.session.shell({ sessionID, agent: agent.name ?? "", model: { providerID: selectedModel.providerID, modelID: selectedModel.modelID }, command: inputText })
+      deps.setStore("mode", "normal")
+    } else if (
+      inputText.startsWith("/") &&
+      iife(() => { const cmd = inputText.split("\n")[0].split(" ")[0].slice(1); return sync.data.command.some((x) => x.name === cmd) })
+    ) {
+      const firstLineEnd = inputText.indexOf("\n")
+      const firstLine = firstLineEnd === -1 ? inputText : inputText.slice(0, firstLineEnd)
+      const [cmd, ...lineArgs] = firstLine.split(" ")
+      const rest = firstLineEnd === -1 ? "" : inputText.slice(firstLineEnd + 1)
+      void sdk.client.session.command({ sessionID, command: cmd.slice(1), arguments: lineArgs.join(" ") + (rest ? "\n" + rest : ""), agent: agent.name ?? "", model: `${selectedModel.providerID}/${selectedModel.modelID}`, messageID, variant, parts: nonTextParts.filter((x) => x.type === "file").map((x) => ({ id: PartID.ascending(), ...x })) })
+    } else {
+      sdk.client.session.prompt({ sessionID, ...selectedModel, messageID, agent: agent.name ?? "", model: selectedModel, variant, parts: [...editorParts, { id: PartID.ascending(), type: "text", text: inputText }, ...nonTextParts.map(assign)] }).catch(() => {})
+      deps.lastSubmittedEditorSelectionKey.value = editorKey
+    }
+    toast.dismiss()
+    deps.history.append({ ...deps.store.prompt, mode: currentMode })
+    input.extmarks.clear()
+    deps.setStore("prompt", { input: "", parts: [] })
+    deps.setStore("extmarkToPartIndex", new Map())
+    deps.props.onSubmit?.()
+    if (!deps.props.sessionID) setTimeout(() => { route.navigate({ type: "session", sessionID }) }, 50)
+    input.clear()
+    return true
+  }
+
+  function pasteText(text: string, virtualText: string) {
+    const input = deps.getInput()
+    const offset = input.visualCursor.offset
+    const start = offset
+    const end = start + virtualText.length
+    input.insertText(virtualText + " ")
+    const id = input.extmarks.create({ start, end, virtual: true, styleId: deps.extmarkSync.pasteStyleId, typeId: deps.extmarkSync.promptPartTypeId })
+    deps.setStore(produce((draft: any) => { const idx = draft.prompt.parts.length; draft.prompt.parts.push({ type: "text" as const, text, source: { text: { start, end, value: virtualText } } }); draft.extmarkToPartIndex.set(id, idx) }))
+  }
+
+  async function pasteAttachment(file: { filename?: string; filepath?: string; content: string; mime: string }) {
+    const input = deps.getInput()
+    const start = input.visualCursor.offset
+    const pdf = file.mime === "application/pdf"
+    const count = deps.store.prompt.parts.filter((x: any) => x.type === "file" && (pdf ? x.mime === "application/pdf" : x.mime.startsWith("image/"))).length
+    const virtualText = pdf ? `[PDF ${count + 1}]` : `[Image ${count + 1}]`
+    const end = start + virtualText.length
+    input.insertText(virtualText + " ")
+    const id = input.extmarks.create({ start, end, virtual: true, styleId: deps.extmarkSync.pasteStyleId, typeId: deps.extmarkSync.promptPartTypeId })
+    deps.setStore(produce((draft: any) => { const idx = draft.prompt.parts.length; draft.prompt.parts.push({ type: "file" as const, mime: file.mime, filename: file.filename, url: `data:${file.mime};base64,${file.content}`, source: { type: "file", path: file.filepath ?? file.filename ?? "", text: { start, end, value: virtualText } } }); draft.extmarkToPartIndex.set(id, idx) }))
+  }
+
+  return { submit, pasteText, pasteAttachment, promptModelWarning }
+}

package/src/cli/cmd/tui/component/spinner.tsx

@@ -0,0 +1,24 @@
+import { Show } from "solid-js"
+import { useTheme } from "../context/theme"
+import { useKV } from "../context/kv"
+import type { JSX } from "@opentui/solid"
+import type { RGBA } from "@opentui/core"
+import "opentui-spinner/solid"
+
+const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
+  const { theme } = useTheme()
+  const kv = useKV()
+  const color = () => props.color ?? theme.textMuted
+  return (
+    <Show when={kv.get("animations_enabled", true)} fallback={<text fg={color()}>⋯ {props.children}</text>}>
+      <box flexDirection="row" gap={1}>
+        <spinner frames={frames} interval={80} color={color()} />
+        <Show when={props.children}>
+          <text fg={color()}>{props.children}</text>
+        </Show>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/component/startup-loading.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js"
+import { useTheme } from "../context/theme"
+import { Spinner } from "./spinner"
+
+export function StartupLoading(props: { ready: () => boolean }) {
+  const theme = useTheme().theme
+  const [show, setShow] = createSignal(false)
+  const text = createMemo(() => (props.ready() ? "Finishing startup..." : "Loading plugins..."))
+  let wait: NodeJS.Timeout | undefined
+  let hold: NodeJS.Timeout | undefined
+  let stamp = 0
+
+  createEffect(() => {
+    if (props.ready()) {
+      if (wait) {
+        clearTimeout(wait)
+        wait = undefined
+      }
+      if (!show()) return
+      if (hold) return
+
+      const left = 3000 - (Date.now() - stamp)
+      if (left <= 0) {
+        setShow(false)
+        return
+      }
+
+      hold = setTimeout(() => {
+        hold = undefined
+        setShow(false)
+      }, left).unref()
+      return
+    }
+
+    if (hold) {
+      clearTimeout(hold)
+      hold = undefined
+    }
+    if (show()) return
+    if (wait) return
+
+    wait = setTimeout(() => {
+      wait = undefined
+      stamp = Date.now()
+      setShow(true)
+    }, 500).unref()
+  })
+
+  onCleanup(() => {
+    if (wait) clearTimeout(wait)
+    if (hold) clearTimeout(hold)
+  })
+
+  return (
+    <Show when={show()}>
+      <box position="absolute" zIndex={5000} left={0} right={0} bottom={1} justifyContent="center" alignItems="center">
+        <box backgroundColor={theme.backgroundPanel} paddingLeft={1} paddingRight={1}>
+          <Spinner color={theme.textMuted}>{text()}</Spinner>
+        </box>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/component/textarea-keybindings.ts

@@ -0,0 +1,69 @@
+import { createMemo } from "solid-js"
+import type { KeyBinding } from "@opentui/core"
+import { useKeybind } from "../context/keybind"
+import { Keybind } from "@/util/keybind"
+
+const TEXTAREA_ACTIONS = [
+  "submit",
+  "newline",
+  "move-left",
+  "move-right",
+  "move-up",
+  "move-down",
+  "select-left",
+  "select-right",
+  "select-up",
+  "select-down",
+  "line-home",
+  "line-end",
+  "select-line-home",
+  "select-line-end",
+  "visual-line-home",
+  "visual-line-end",
+  "select-visual-line-home",
+  "select-visual-line-end",
+  "buffer-home",
+  "buffer-end",
+  "select-buffer-home",
+  "select-buffer-end",
+  "delete-line",
+  "delete-to-line-end",
+  "delete-to-line-start",
+  "backspace",
+  "delete",
+  "undo",
+  "redo",
+  "word-forward",
+  "word-backward",
+  "select-word-forward",
+  "select-word-backward",
+  "delete-word-forward",
+  "delete-word-backward",
+] as const
+
+function mapTextareaKeybindings(
+  keybinds: Record<string, Keybind.Info[]>,
+  action: (typeof TEXTAREA_ACTIONS)[number],
+): KeyBinding[] {
+  const configKey = `input_${action.replace(/-/g, "_")}`
+  const bindings = keybinds[configKey]
+  if (!bindings) return []
+  return bindings.map((binding) => ({
+    name: binding.name,
+    ctrl: binding.ctrl || undefined,
+    meta: binding.meta || undefined,
+    shift: binding.shift || undefined,
+    super: binding.super || undefined,
+    action,
+  }))
+}
+
+export function useTextareaKeybindings() {
+  const keybind = useKeybind()
+
+  return createMemo(() => {
+    const keybinds = keybind.all
+
+    return TEXTAREA_ACTIONS.flatMap((action) => mapTextareaKeybindings(keybinds, action)) satisfies KeyBinding[]
+  })
+}

package/src/cli/cmd/tui/component/todo-item.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from "../context/theme"
+
+export interface TodoItemProps {
+  status: string
+  content: string
+}
+
+export function TodoItem(props: TodoItemProps) {
+  const { theme } = useTheme()
+
+  return (
+    <box flexDirection="row" gap={0}>
+      <text
+        flexShrink={0}
+        style={{
+          fg: props.status === "in_progress" ? theme.warning : theme.textMuted,
+        }}
+      >
+        [{props.status === "completed" ? "✓" : props.status === "in_progress" ? "•" : " "}]{" "}
+      </text>
+      <text
+        flexGrow={1}
+        wrapMode="word"
+        style={{
+          fg: props.status === "in_progress" ? theme.warning : theme.textMuted,
+        }}
+      >
+        {props.content}
+      </text>
+    </box>
+  )
+}

package/src/cli/cmd/tui/component/use-connected.tsx

@@ -0,0 +1,11 @@
+import { createMemo } from "solid-js"
+import { useSync } from "@tui/context/sync"
+
+export function useConnected() {
+  const sync = useSync()
+  return createMemo(() =>
+    sync.data.provider.some(
+      (x) => (x.id !== "saeeol" && x.id !== "saeeol") || Object.values(x.models ?? {}).some((y) => y.cost?.input !== 0),
+    ),
+  )
+}

package/src/cli/cmd/tui/component/worker/worker-cell.tsx

@@ -0,0 +1,62 @@
+import { For, Show } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { getWorkerState, type WorkerInfo } from "@/saeeol/worker"
+
+const STATUS_ICON: Record<string, string> = {
+  queued: "□",
+  spawning: "◐",
+  running: "◐",
+  done: "●",
+  error: "✕",
+  cancelled: "⊘",
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  queued: "gray",
+  spawning: "blue",
+  running: "blue",
+  done: "green",
+  error: "red",
+  cancelled: "yellow",
+}
+
+export function WorkerCell(props: { worker: WorkerInfo; selected: boolean }) {
+  const theme = useTheme()
+  const w = () => props.worker
+  const icon = () => STATUS_ICON[w().status] ?? "?"
+  const color = () => STATUS_COLOR[w().status] ?? "white"
+  const bg = () => props.selected ? ((theme as any).base00 ?? "#1a1a2e") : "transparent"
+
+  const desc = () => {
+    const d = w().description
+    return d.length > 16 ? d.slice(0, 15) + "…" : d
+  }
+
+  const tokens = () => {
+    const t = w().tokens
+    const total = (t.input + t.output + t.reasoning) / 1000
+    return total < 1 ? "" : `${total.toFixed(1)}k`
+  }
+
+  return (
+    <box
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0}
+      paddingBottom={0}
+      border={props.selected}
+      borderStyle={props.selected ? "single" : undefined}
+      borderColor={props.selected ? "cyan" : undefined}
+      backgroundColor={bg()}
+    >
+      <text fg={color()}>{icon()} </text>
+      <text fg="white">W{w().index + 1}</text>
+      <text fg="gray"> @{w().agent}</text>
+      {"\n"}
+      <text fg="gray">{desc()}</text>
+      <Show when={tokens()}>
+        <text fg="gray"> {tokens()}</text>
+      </Show>
+    </box>
+  )
+}