saeeol 1.0.9 → 1.1.0

package/src/cli/cmd/tui/routes/session/messages/tool-renderers.tsx

@@ -1,303 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-
-import { createMemo, createSignal, For, onMount, Show, Switch, Match } from "solid-js"
-import path from "path"
-import type { ToolPart } from "@saeeol/sdk/v2"
-import { BashTool } from "@/tool/bash"
-import type { WriteTool } from "@/tool/write"
-import type { GlobTool } from "@/tool/glob"
-import type { ReadTool } from "@/tool/read"
-import type { GrepTool } from "@/tool/grep"
-import type { WebFetchTool } from "@/tool/webfetch"
-import type { WebSearchTool } from "@/tool/websearch"
-import type { TaskTool } from "@/tool/task"
-import type { SemanticSearchTool } from "@/saeeol/tool/semantic-search" 
-import { Global } from "@saeeol/core/global"
-import { Filesystem } from "@/util/filesystem"
-import { useSync } from "@tui/context/sync"
-import { useRoute } from "@tui/context/route"
-import { useTheme } from "@tui/context/theme"
-import { Locale } from "@/util/locale"
-import stripAnsi from "strip-ansi"
-import { use } from "../context"
-import type { ToolProps } from "./tool-parts"
-import { InlineTool, BlockTool } from "./tool-parts"
-import { normalizePath, input, filetype } from "./message-utils"
-
-export function Bash(props: ToolProps<typeof BashTool>) {
-  const { theme } = useTheme()
-  const sync = useSync()
-  const isRunning = createMemo(() => props.part.state.status === "running")
-  const output = createMemo(() => stripAnsi(props.metadata.output?.trim() ?? ""))
-  const [expanded, setExpanded] = createSignal(false)
-  const lines = createMemo(() => output().split("\n"))
-  const overflow = createMemo(() => lines().length > 10)
-  const limited = createMemo(() => {
-    if (expanded() || !overflow()) return output()
-    return [...lines().slice(0, 10), "…"].join("\n")
-  })
-
-  const workdirDisplay = createMemo(() => {
-    const workdir = props.input.workdir
-    if (!workdir || workdir === ".") return undefined
-    const base = sync.path.directory
-    if (!base) return undefined
-    const absolute = path.resolve(base, workdir)
-    if (absolute === base) return undefined
-    const home = Global.Path.home
-    if (!home) return absolute
-    const match = absolute === home || absolute.startsWith(home + path.sep)
-    return match ? absolute.replace(home, "~") : absolute
-  })
-
-  const title = createMemo(() => {
-    const desc = props.input.description ?? "Shell"
-    const wd = workdirDisplay()
-    if (!wd) return `# ${desc}`
-    if (desc.includes(wd)) return `# ${desc}`
-    return `# ${desc} in ${wd}`
-  })
-
-  return (
-    <Switch>
-      <Match when={props.metadata.output !== undefined}>
-        <BlockTool
-          title={title()}
-          part={props.part}
-          spinner={isRunning()}
-          onClick={overflow() ? () => setExpanded((prev) => !prev) : undefined}
-        >
-          <box gap={1}>
-            <text fg={theme.text}>$ {props.input.command}</text>
-            <Show when={output()}>
-              <text fg={theme.text}>{limited()}</text>
-            </Show>
-            <Show when={overflow()}>
-              <text fg={theme.textMuted}>{expanded() ? "Click to collapse" : "Click to expand"}</text>
-            </Show>
-          </box>
-        </BlockTool>
-      </Match>
-      <Match when={true}>
-        <InlineTool icon="$" pending="Writing command..." complete={props.input.command} part={props.part}>
-          {props.input.command}
-        </InlineTool>
-      </Match>
-    </Switch>
-  )
-}
-
-export function Write(props: ToolProps<typeof WriteTool>) {
-  const { theme, syntax } = useTheme()
-  const code = createMemo(() => {
-    if (!props.input.content) return ""
-    return props.input.content
-  })
-
-  return (
-    <Switch>
-      <Match when={props.metadata.diagnostics !== undefined}>
-        <BlockTool title={"# Wrote " + normalizePath(props.input.filePath!)} part={props.part}>
-          <line_number fg={theme.textMuted} minWidth={3} paddingRight={1}>
-            <code
-              conceal={false}
-              fg={theme.text}
-              filetype={filetype(props.input.filePath!)}
-              syntaxStyle={syntax()}
-              content={code()}
-            />
-          </line_number>
-          <Diagnostics diagnostics={props.metadata.diagnostics} filePath={props.input.filePath ?? ""} />
-        </BlockTool>
-      </Match>
-      <Match when={true}>
-        <InlineTool icon="←" pending="Preparing write..." complete={props.input.filePath} part={props.part}>
-          Write {normalizePath(props.input.filePath!)}
-        </InlineTool>
-      </Match>
-    </Switch>
-  )
-}
-
-export function Glob(props: ToolProps<typeof GlobTool>) {
-  return (
-    <InlineTool icon="✱" pending="Finding files..." complete={props.input.pattern} part={props.part}>
-      Glob "{props.input.pattern}" <Show when={props.input.path}>in {normalizePath(props.input.path)} </Show>
-      <Show when={props.metadata.count}>
-        ({props.metadata.count} {props.metadata.count === 1 ? "match" : "matches"})
-      </Show>
-    </InlineTool>
-  )
-}
-
-export function Read(props: ToolProps<typeof ReadTool>) {
-  const { theme } = useTheme()
-  const isRunning = createMemo(() => props.part.state.status === "running")
-  const loaded = createMemo(() => {
-    if (props.part.state.status !== "completed") return []
-    if (props.part.state.time.compacted) return []
-    const value = props.metadata.loaded
-    if (!value || !Array.isArray(value)) return []
-    return value.filter((p): p is string => typeof p === "string")
-  })
-  return (
-    <>
-      <InlineTool
-        icon="→"
-        pending="Reading file..."
-        complete={props.input.filePath}
-        spinner={isRunning()}
-        part={props.part}
-      >
-        Read {normalizePath(props.input.filePath!)} {input(props.input, ["filePath"])}
-      </InlineTool>
-      <For each={loaded()}>
-        {(filepath) => (
-          <box paddingLeft={3}>
-            <text paddingLeft={3} fg={theme.textMuted}>
-              ↳ Loaded {normalizePath(filepath)}
-            </text>
-          </box>
-        )}
-      </For>
-    </>
-  )
-}
-
-export function Grep(props: ToolProps<typeof GrepTool>) {
-  return (
-    <InlineTool icon="✱" pending="Searching content..." complete={props.input.pattern} part={props.part}>
-      Grep "{props.input.pattern}" <Show when={props.input.path}>in {normalizePath(props.input.path)} </Show>
-      <Show when={props.metadata.matches}>
-        ({props.metadata.matches} {props.metadata.matches === 1 ? "match" : "matches"})
-      </Show>
-    </InlineTool>
-  )
-}
-
-export function WebFetch(props: ToolProps<typeof WebFetchTool>) {
-  return (
-    <InlineTool icon="%" pending="Fetching from the web..." complete={props.input.url} part={props.part}>
-      WebFetch {props.input.url}
-    </InlineTool>
-  )
-}
-
-export function WebSearch(props: ToolProps<typeof WebSearchTool>) {
-  const metadata = props.metadata as { numResults?: number }
-  return (
-    <InlineTool icon="◈" pending="Searching web..." complete={props.input.query} part={props.part}>
-      Exa Web Search "{props.input.query}" <Show when={metadata.numResults}>({metadata.numResults} results)</Show>
-    </InlineTool>
-  )
-}
-
-export function SemanticSearch(props: ToolProps<typeof SemanticSearchTool>) {
-  const meta = createMemo(() => props.metadata as { results?: { length: number }[] })
-  const args = createMemo(() => props.input as { query?: string; path?: string })
-  const count = createMemo(() => meta().results?.length ?? 0)
-
-  return (
-    <InlineTool icon="✱" pending="Searching codebase..." complete={args().query} part={props.part}>
-      Codebase Search "{args().query}" <Show when={args().path}>in {normalizePath(args().path!)} </Show>
-      <Show when={count() > 0}>
-        ({count()} {count() === 1 ? "result" : "results"})
-      </Show>
-    </InlineTool>
-  )
-}
-
-export function Task(props: ToolProps<typeof TaskTool>) {
-  const { navigate } = useRoute()
-  const sync = useSync()
-
-  onMount(() => {
-    if (props.metadata.sessionId && !sync.data.message[props.metadata.sessionId]?.length)
-      void sync.session.sync(props.metadata.sessionId)
-  })
-
-  const messages = createMemo(() => sync.data.message[props.metadata.sessionId ?? ""] ?? [])
-
-  const tools = createMemo(() => {
-    return messages().flatMap((msg) =>
-      (sync.data.part[msg.id] ?? [])
-        .filter((part): part is ToolPart => part.type === "tool")
-        .map((part) => ({ tool: part.tool, state: part.state })),
-    )
-  })
-
-  const current = createMemo(() =>
-    tools().findLast((x) => (x.state.status === "running" || x.state.status === "completed") && x.state.title),
-  )
-
-  const isRunning = createMemo(() => props.part.state.status === "running")
-
-  const duration = createMemo(() => {
-    const first = messages().find((x) => x.role === "user")?.time.created
-    const assistant = messages().findLast((x) => x.role === "assistant")?.time.completed
-    if (!first || !assistant) return 0
-    return assistant - first
-  })
-
-  const content = createMemo(() => {
-    if (!props.input.description) return ""
-    let content = [`${Locale.titlecase(props.input.subagent_type ?? "General")} Task — ${props.input.description}`]
-    if (isRunning()) {
-      if (tools().length === 0) {
-        content.push(`↳ Starting...`)
-      } else if (current()) {
-        const state = current()!.state
-        const title = state.status === "running" || state.status === "completed" ? state.title : undefined
-        content.push(`↳ ${Locale.titlecase(current()!.tool)} ${title}`)
-      } else {
-        content.push(`↳ ${tools().length} toolcalls`)
-      }
-    }
-
-    if (props.part.state.status === "completed") {
-      content.push(`└ ${tools().length} toolcalls · ${Locale.duration(duration())}`)
-    }
-
-    return content.join("\n")
-  })
-
-  return (
-    <InlineTool
-      icon="│"
-      spinner={isRunning()}
-      complete={props.input.description}
-      pending="Delegating..."
-      part={props.part}
-      onClick={() => {
-        if (props.metadata.sessionId) {
-          navigate({ type: "session", sessionID: props.metadata.sessionId })
-        }
-      }}
-    >
-      {content()}
-    </InlineTool>
-  )
-}
-
-function Diagnostics(props: { diagnostics?: Record<string, Record<string, any>[]>; filePath: string }) {
-  const { theme } = useTheme()
-  const errors = createMemo(() => {
-    const normalized = Filesystem.normalizePath(props.filePath)
-    const arr = props.diagnostics?.[normalized] ?? []
-    return arr.filter((x) => x.severity === 1).slice(0, 3)
-  })
-
-  return (
-    <Show when={errors().length}>
-      <box>
-        <For each={errors()}>
-          {(diagnostic) => (
-            <text fg={theme.error}>
-              Error [{diagnostic.range.start.line + 1}:{diagnostic.range.start.character + 1}] {diagnostic.message}
-            </text>
-          )}
-        </For>
-      </box>
-    </Show>
-  )
-}

package/src/cli/cmd/tui/routes/session/messages/tool-router.tsx

@@ -1,111 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-
-import { createMemo, Match, Show, Switch, createSignal } from "solid-js"
-import type { ToolPart as ToolPartType } from "@saeeol/sdk/v2"
-import { useSync } from "@tui/context/sync"
-import { Suggest } from "@/saeeol/suggestion/tui/render" 
-import { use } from "../context"
-import type { ToolProps } from "./tool-parts"
-import { GenericTool, InlineTool, BlockTool } from "./tool-parts"
-import { Bash, Write, Glob, Read, Grep, WebFetch, WebSearch, SemanticSearch, Task } from "./tool-renderers"
-import { Edit, ApplyPatch, TodoWrite, Question, Skill } from "./tool-renderers-2"
-
-export function ToolPart(props: { last: boolean; part: ToolPartType; message: any }) {
-  const ctx = use()
-  const sync = useSync()
-
-  const shouldHide = createMemo(() => {
-    if (ctx.showDetails()) return false
-    if (props.part.state.status !== "completed") return false
-    return true
-  })
-
-  const toolprops = {
-    get metadata() {
-      return props.part.state.status === "pending" ? {} : (props.part.state.metadata ?? {})
-    },
-    get input() {
-      return props.part.state.input ?? {}
-    },
-    get output() {
-      return props.part.state.status === "completed" ? props.part.state.output : undefined
-    },
-    get permission() {
-      const permissions = sync.data.permission[props.message.sessionID] ?? []
-      const permissionIndex = permissions.findIndex((x: any) => x.tool?.callID === props.part.callID)
-      return permissions[permissionIndex]
-    },
-    get tool() {
-      return props.part.tool
-    },
-    get part() {
-      return props.part
-    },
-  }
-
-  return (
-    <Show when={!shouldHide()}>
-      <Switch>
-        <Match when={props.part.tool === "bash"}>
-          <Bash {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "glob"}>
-          <Glob {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "read"}>
-          <Read {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "grep"}>
-          <Grep {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "semantic_search"}>
-          <SemanticSearch {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "webfetch"}>
-          <WebFetch {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "websearch"}>
-          <WebSearch {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "write"}>
-          <Write {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "edit"}>
-          <Edit {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "task"}>
-          <Task {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "apply_patch"}>
-          <ApplyPatch {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "todowrite"}>
-          <TodoWrite {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "question"}>
-          <Question {...toolprops} />
-        </Match>
-        <Match when={props.part.tool === "suggest"}>
-          {(() => {
-            const pending = createMemo(() => {
-              const requests = sync.data.suggestion[props.message.sessionID] ?? []
-              return requests.find(
-                (r) =>
-                  r.blocking === false &&
-                  r.tool?.callID === props.part.callID &&
-                  r.tool?.messageID === props.part.messageID,
-              )
-            })
-            return <Suggest {...toolprops} InlineTool={InlineTool} BlockTool={BlockTool} pendingRequest={pending()} />
-          })()}
-        </Match>
-        <Match when={props.part.tool === "skill"}>
-          <Skill {...toolprops} />
-        </Match>
-        <Match when={true}>
-          <GenericTool {...toolprops} />
-        </Match>
-      </Switch>
-    </Show>
-  )
-}

package/src/cli/cmd/tui/routes/session/messages/user-message.tsx

@@ -1,125 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-
-import { createMemo, createSignal, For, Show } from "solid-js"
-import type { Part, UserMessage } from "@saeeol/sdk/v2"
-import { SplitBorder } from "@tui/component/border"
-import { selectedForeground, useTheme } from "@tui/context/theme"
-import { useLocal } from "@tui/context/local"
-import { Locale } from "@/util/locale"
-import { use } from "../context"
-
-const MIME_BADGE: Record<string, string> = {
-  "text/plain": "txt",
-  "image/png": "img",
-  "image/jpeg": "img",
-  "image/gif": "img",
-  "image/webp": "img",
-  "application/pdf": "pdf",
-  "application/x-directory": "dir",
-}
-
-export function UserMessage(props: {
-  message: UserMessage
-  parts: Part[]
-  onMouseUp: () => void
-  index: number
-  pending?: string
-}) {
-  const ctx = use()
-  const local = useLocal()
-  const text = createMemo(() => {
-    const texts = props.parts
-      .map((x) => {
-        if (x.type === "text" && !x.synthetic) {
-          return x.text
-        }
-        return null
-      })
-      .filter(Boolean)
-    return texts.join("\n\n")
-  })
-  const files = createMemo(() => props.parts.flatMap((x) => (x.type === "file" ? [x] : [])))
-  const { theme } = useTheme()
-  const [hover, setHover] = createSignal(false)
-  const queued = createMemo(() => props.pending && props.message.id > props.pending)
-  const color = createMemo(() => local.agent.color(props.message.agent))
-  const queuedFg = createMemo(() => selectedForeground(theme, color()))
-  const metadataVisible = createMemo(() => queued() || ctx.showTimestamps())
-
-  const compaction = createMemo(() => props.parts.find((x) => x.type === "compaction"))
-
-  return (
-    <>
-      <Show when={text()}>
-        <box
-          id={props.message.id}
-          border={["left"]}
-          borderColor={color()}
-          customBorderChars={SplitBorder.customBorderChars}
-          marginTop={props.index === 0 ? 0 : 1}
-        >
-          <box
-            onMouseOver={() => {
-              setHover(true)
-            }}
-            onMouseOut={() => {
-              setHover(false)
-            }}
-            onMouseUp={props.onMouseUp}
-            paddingTop={1}
-            paddingBottom={1}
-            paddingLeft={2}
-            backgroundColor={hover() ? theme.backgroundElement : theme.backgroundPanel}
-            flexShrink={0}
-          >
-            <text fg={theme.text}>{text()}</text>
-            <Show when={files().length}>
-              <box flexDirection="row" paddingBottom={metadataVisible() ? 1 : 0} paddingTop={1} gap={1} flexWrap="wrap">
-                <For each={files()}>
-                  {(file) => {
-                    const bg = createMemo(() => {
-                      if (file.mime.startsWith("image/")) return theme.accent
-                      if (file.mime === "application/pdf") return theme.primary
-                      return theme.secondary
-                    })
-                    return (
-                      <text fg={theme.text}>
-                        <span style={{ bg: bg(), fg: theme.background }}> {MIME_BADGE[file.mime] ?? file.mime} </span>
-                        <span style={{ bg: theme.backgroundElement, fg: theme.textMuted }}> {file.filename} </span>
-                      </text>
-                    )
-                  }}
-                </For>
-              </box>
-            </Show>
-            <Show
-              when={queued()}
-              fallback={
-                <Show when={ctx.showTimestamps()}>
-                  <text fg={theme.textMuted}>
-                    <span style={{ fg: theme.textMuted }}>
-                      {Locale.todayTimeOrDateTime(props.message.time.created)}
-                    </span>
-                  </text>
-                </Show>
-              }
-            >
-              <text fg={theme.textMuted}>
-                <span style={{ bg: color(), fg: queuedFg(), bold: true }}> QUEUED </span>
-              </text>
-            </Show>
-          </box>
-        </box>
-      </Show>
-      <Show when={compaction()}>
-        <box
-          marginTop={1}
-          border={["top"]}
-          title=" Compaction "
-          titleAlignment="center"
-          borderColor={theme.borderActive}
-        />
-      </Show>
-    </>
-  )
-}

package/src/cli/cmd/tui/routes/session/network.tsx

@@ -1,82 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-import { Show, createEffect, createSignal, onCleanup } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { useTheme } from "../../context/theme"
-import { SplitBorder } from "../../component/border"
-import { useSDK } from "../../context/sdk"
-import { useDialog } from "../../ui/dialog"
-import type { SessionNetworkWait } from "@saeeol/sdk/v2"
-import { useKeybind } from "../../context/keybind"
-
-export function NetworkPrompt(props: { request: SessionNetworkWait }) {
-  const sdk = useSDK()
-  const { theme } = useTheme()
-  const keybind = useKeybind()
-  const dialog = useDialog()
-  const [countdown, setCountdown] = createSignal(10)
-
-  function reply() {
-    void sdk.client.network.reply({ requestID: props.request.id }).catch(() => {})
-  }
-
-  function reject() {
-    void sdk.client.network.reject({ requestID: props.request.id }).catch(() => {})
-  }
-
-  createEffect(() => {
-    if (!props.request.restored) {
-      setCountdown(10)
-      return
-    }
-    const started = Date.now()
-    const remaining = () => Math.max(0, 10 - Math.floor((Date.now() - started) / 1000))
-    setCountdown(remaining())
-    const timer = setInterval(() => {
-      const next = remaining()
-      setCountdown(next)
-      if (next <= 0) clearInterval(timer)
-    }, 250)
-    onCleanup(() => clearInterval(timer))
-  })
-
-  useKeyboard((evt) => {
-    if (dialog.stack.length > 0) return
-    if (evt.name === "return" && props.request.restored) {
-      evt.preventDefault()
-      reply()
-      return
-    }
-    if (evt.name === "escape" || keybind.match("app_exit", evt)) {
-      evt.preventDefault()
-      reject()
-    }
-  })
-
-  return (
-    <box
-      backgroundColor={theme.backgroundPanel}
-      border={["left"]}
-      borderColor={theme.accent}
-      customBorderChars={SplitBorder.customBorderChars}
-    >
-      <box flexDirection="column" gap={1} paddingLeft={1} paddingRight={3} paddingTop={1} paddingBottom={1}>
-        <Show
-          when={props.request.restored}
-          fallback={
-            <>
-              <text fg={theme.warning}>Network disconnected</text>
-              <text fg={theme.text}>{props.request.message}</text>
-              <text fg={theme.textMuted}>Waiting for network...</text>
-              <text fg={theme.textMuted}>Press Esc to stop this turn.</text>
-            </>
-          }
-        >
-          <text fg={theme.success}>Network reconnected</text>
-          <text fg={theme.text}>Connection restored. Retrying in {countdown()}s.</text>
-          <text fg={theme.textMuted}>Press Enter to resume now.</text>
-          <text fg={theme.textMuted}>Press Esc to stop.</text>
-        </Show>
-      </box>
-    </box>
-  )
-}