saeeol 1.2.1 → 1.2.3

package/src/cli/cmd/tui/component/dialog/dialog-session-list.tsx

@@ -0,0 +1,301 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useRoute } from "@tui/context/route"
+import { useSync } from "@tui/context/sync"
+import { createMemo, createResource, createSignal, onMount } from "solid-js"
+import { Locale } from "@/util/locale"
+import { useProject } from "@tui/context/project"
+import { useKeybind } from "../../context/keybind"
+import { useTheme } from "../../context/theme"
+import { useSDK } from "../../context/sdk"
+import { Flag } from "@saeeol/core/flag/flag"
+import { DialogSessionRename } from "./dialog-session-rename"
+import { Keybind } from "@/util/keybind"
+import { createDebouncedSignal } from "../../util/signal"
+import { useToast } from "../../ui/toast"
+import { DialogWorkspaceCreate, openWorkspaceSession, restoreWorkspaceSession } from "./dialog-workspace-create"
+import { Spinner } from "../spinner"
+import path from "path" 
+import { errorMessage } from "@/util/error"
+import { DialogSessionDeleteFailed } from "./dialog-session-delete-failed"
+
+type WorkspaceStatus = "connected" | "connecting" | "disconnected" | "error"
+
+export function DialogSessionList() {
+  const dialog = useDialog()
+  const route = useRoute()
+  const sync = useSync()
+  const project = useProject()
+  const keybind = useKeybind()
+  const { theme } = useTheme()
+  const sdk = useSDK()
+  const toast = useToast()
+  const [toDelete, setToDelete] = createSignal<string>()
+  const [search, setSearch] = createDebouncedSignal("", 150)
+  const [global, setGlobal] = createSignal(true) 
+  // TODO: extend /experimental/session to accept `scope`/`path` so this dialog can respect the
+  // upstream `session_directory_filter_enabled` KV toggle (via sync.session.query()) while
+  // keeping worktree grouping. Currently the toggle has no effect here.
+  const [searchResults, searchActions] = createResource(
+    () => search(),
+    async (query) => {
+      const result = await sdk.client.experimental.session.list(
+        {
+          search: query || undefined,
+          roots: true,
+          worktrees: true,
+          limit: 30,
+        },
+        { throwOnError: true },
+      )
+      return result.data ?? []
+    },
+  )
+
+  const currentSessionID = createMemo(() => (route.data.type === "session" ? route.data.sessionID : undefined))
+  const sessions = createMemo(() => {
+    const all = searchResults() ?? []
+    if (global()) return all
+    const root = project.instance.path().worktree
+    if (!root || root === "/") return all
+    return all.filter((s) => s.directory === root || s.directory.startsWith(root + path.sep))
+  })
+
+  function createWorkspace() {
+    dialog.replace(() => (
+      <DialogWorkspaceCreate
+        onSelect={(workspaceID) =>
+          openWorkspaceSession({
+            dialog,
+            route,
+            sdk,
+            sync,
+            toast,
+            workspaceID,
+          })
+        }
+      />
+    ))
+  }
+
+  function recover(session: NonNullable<ReturnType<typeof sessions>[number]>) {
+    const workspace = project.workspace.get(session.workspaceID!)
+    const list = () => dialog.replace(() => <DialogSessionList />)
+    dialog.replace(() => (
+      <DialogSessionDeleteFailed
+        session={session.title}
+        workspace={workspace?.name ?? session.workspaceID!}
+        onDone={list}
+        onDelete={async () => {
+          const current = currentSessionID()
+          const info = current ? sync.data.session.find((item) => item.id === current) : undefined
+          const result = await sdk.client.experimental.workspace.remove({ id: session.workspaceID! })
+          if (result.error) {
+            toast.show({
+              variant: "error",
+              title: "Failed to delete workspace",
+              message: errorMessage(result.error),
+            })
+            return false
+          }
+          await project.workspace.sync()
+          await sync.session.refresh()
+          if (search()) await searchActions.refetch() 
+          if (info?.workspaceID === session.workspaceID) {
+            route.navigate({ type: "home" })
+          }
+          return true
+        }}
+        onRestore={() => {
+          dialog.replace(() => (
+            <DialogWorkspaceCreate
+              onSelect={(workspaceID) =>
+                restoreWorkspaceSession({
+                  dialog,
+                  sdk,
+                  sync,
+                  project,
+                  toast,
+                  workspaceID,
+                  sessionID: session.id,
+                  done: list,
+                })
+              }
+            />
+          ))
+          return false
+        }}
+      />
+    ))
+  }
+
+  const options = createMemo(() => {
+    const today = new Date().toDateString()
+    const all = global() 
+    return sessions()
+      .filter((x) => x.parentID === undefined)
+      .toSorted((a, b) => {
+        const updatedDay = new Date(b.time.updated).setHours(0, 0, 0, 0) - new Date(a.time.updated).setHours(0, 0, 0, 0)
+        if (updatedDay !== 0) return updatedDay
+        return b.time.created - a.time.created
+      })
+      .map((x) => {
+        const workspace = x.workspaceID ? project.workspace.get(x.workspaceID) : undefined
+
+        let workspaceStatus: WorkspaceStatus | null = null
+        if (x.workspaceID) {
+          workspaceStatus = project.workspace.status(x.workspaceID) || "error"
+        }
+
+        let footer = ""
+        if (Flag.SAEEOL_EXPERIMENTAL_WORKSPACES) {
+          if (x.workspaceID) {
+            let desc = "unknown"
+            if (workspace) {
+              desc = `${workspace.type}: ${workspace.name}`
+            }
+
+            footer = (
+              <>
+                {desc}{" "}
+                <span
+                  style={{
+                    fg: workspaceStatus === "connected" ? theme.success : theme.error,
+                  }}
+                >
+                  ●
+                </span>
+              </>
+            )
+          }
+        } else {
+          footer = Locale.time(x.time.updated)
+        }
+
+        const date = new Date(x.time.updated)
+        let category = date.toDateString()
+        if (category === today) {
+          category = "Today"
+        }
+        const isDeleting = toDelete() === x.id
+        const status = sync.data.session_status?.[x.id]
+        const isWorking = status?.type === "busy"
+        return {
+          title: isDeleting ? `Press ${keybind.print("session_delete")} again to confirm` : x.title,
+          description: all && x.worktreeName ? `(${x.worktreeName})` : undefined, 
+          bg: isDeleting ? theme.error : undefined,
+          value: x.id,
+          category,
+          footer,
+          gutter: isWorking ? () => <Spinner /> : undefined,
+        }
+      })
+  })
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  return (
+    <DialogSelect
+      title={global() ? "Sessions (all worktrees)" : "Sessions (current worktree)"} 
+      options={options()}
+      skipFilter={true}
+      current={currentSessionID()}
+      onFilter={setSearch}
+      onMove={() => {
+        setToDelete(undefined)
+      }}
+      onSelect={(option) => {
+        route.navigate({
+          type: "session",
+          sessionID: option.value,
+        })
+        dialog.clear()
+      }}
+      keybind={[
+        {
+          keybind: keybind.all.session_delete?.[0],
+          title: "delete",
+          onTrigger: async (option) => {
+            if (toDelete() === option.value) {
+              const session = sessions().find((item) => item.id === option.value)
+              const status = session?.workspaceID ? project.workspace.status(session.workspaceID) : undefined
+
+              try {
+                const result = await sdk.client.session.delete({
+                  sessionID: option.value,
+                })
+                if (result.error) {
+                  if (session?.workspaceID) {
+                    recover(session)
+                  } else {
+                    toast.show({
+                      variant: "error",
+                      title: "Failed to delete session",
+                      message: errorMessage(result.error),
+                    })
+                  }
+                  setToDelete(undefined)
+                  return
+                }
+              } catch (err) {
+                if (session?.workspaceID) {
+                  recover(session)
+                } else {
+                  toast.show({
+                    variant: "error",
+                    title: "Failed to delete session",
+                    message: errorMessage(err),
+                  })
+                }
+                setToDelete(undefined)
+                return
+              }
+              if (status && status !== "connected") {
+                await sync.session.refresh()
+              }
+              void searchActions.refetch() 
+              setToDelete(undefined)
+              return
+            }
+            setToDelete(option.value)
+          },
+        },
+        {
+          keybind: keybind.all.session_rename?.[0],
+          title: "rename", 
+          onTrigger: async (option) => {
+            const item = sessions().find((x) => x.id === option.value)
+            dialog.replace(() => (
+              <DialogSessionRename
+                session={option.value}
+                title={item?.title}
+                onConfirm={() => {
+                  void searchActions.refetch()
+                }}
+              />
+            ))
+          },
+        },
+        {
+          keybind: { name: "a", ctrl: true, meta: false, shift: false, leader: false },
+          title: global() ? "current" : "all",
+          onTrigger: async () => {
+            setToDelete(undefined)
+            setGlobal((v) => !v)
+          },
+        },
+        {
+          keybind: Keybind.parse("ctrl+w")[0],
+          title: "new workspace",
+          side: "right",
+          disabled: !Flag.SAEEOL_EXPERIMENTAL_WORKSPACES,
+          onTrigger: () => {
+            createWorkspace()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog/dialog-session-rename.tsx

@@ -0,0 +1,35 @@
+import { DialogPrompt } from "@tui/ui/dialog-prompt"
+import { useDialog } from "@tui/ui/dialog"
+import { useSync } from "@tui/context/sync"
+import { createMemo } from "solid-js"
+import { useSDK } from "../../context/sdk"
+
+interface DialogSessionRenameProps {
+  session: string
+  title?: string 
+  onConfirm?: () => void 
+}
+
+export function DialogSessionRename(props: DialogSessionRenameProps) {
+  const dialog = useDialog()
+  const sync = useSync()
+  const sdk = useSDK()
+  const session = createMemo(() => sync.session.get(props.session))
+
+  return (
+    <DialogPrompt
+      title="Rename Session"
+      value={session()?.title ?? props.title} 
+      onConfirm={(value) => {
+        void sdk.client.session
+          .update({
+            sessionID: props.session,
+            title: value,
+          })
+          .then(() => props.onConfirm?.()) 
+        dialog.clear()
+      }}
+      onCancel={() => dialog.clear()}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog/dialog-skill.tsx

@@ -0,0 +1,37 @@
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { createResource, createMemo } from "solid-js"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "@tui/context/sdk"
+import { t } from "@/util/i18n"
+
+export type DialogSkillProps = {
+  onSelect: (skill: string) => void
+}
+
+export function DialogSkill(props: DialogSkillProps) {
+  const dialog = useDialog()
+  const sdk = useSDK()
+  dialog.setSize("large")
+
+  const [skills] = createResource(async () => {
+    const result = await sdk.client.app.skills()
+    return result.data ?? []
+  })
+
+  const options = createMemo<DialogSelectOption<string>[]>(() => {
+    const list = skills() ?? []
+    const maxWidth = Math.max(0, ...list.map((s) => s.name.length))
+    return list.map((skill) => ({
+      title: skill.name.padEnd(maxWidth),
+      description: skill.description?.replace(/\s+/g, " ").trim(),
+      value: skill.name,
+      category: t("cmd.skill.title"),
+      onSelect: () => {
+        props.onSelect(skill.name)
+        dialog.clear()
+      },
+    }))
+  })
+
+  return <DialogSelect title={t("cmd.skill.title")} placeholder={t("cmd.skill.search")} options={options()} />
+}

package/src/cli/cmd/tui/component/dialog/dialog-stash.tsx

@@ -0,0 +1,87 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { createMemo, createSignal } from "solid-js"
+import { Locale } from "@/util/locale"
+import { useTheme } from "../../context/theme"
+import { useKeybind } from "../../context/keybind"
+import { usePromptStash, type StashEntry } from "../prompt/stash"
+
+function getRelativeTime(timestamp: number): string {
+  const now = Date.now()
+  const diff = now - timestamp
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (seconds < 60) return "just now"
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  if (days < 7) return `${days}d ago`
+  return Locale.datetime(timestamp)
+}
+
+function getStashPreview(input: string, maxLength: number = 50): string {
+  const firstLine = input.split("\n")[0].trim()
+  return Locale.truncate(firstLine, maxLength)
+}
+
+export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
+  const dialog = useDialog()
+  const stash = usePromptStash()
+  const { theme } = useTheme()
+  const keybind = useKeybind()
+
+  const [toDelete, setToDelete] = createSignal<number>()
+
+  const options = createMemo(() => {
+    const entries = stash.list()
+    // Show most recent first
+    return entries
+      .map((entry, index) => {
+        const isDeleting = toDelete() === index
+        const lineCount = (entry.input.match(/\n/g)?.length ?? 0) + 1
+        return {
+          title: isDeleting ? `Press ${keybind.print("stash_delete")} again to confirm` : getStashPreview(entry.input),
+          bg: isDeleting ? theme.error : undefined,
+          value: index,
+          description: getRelativeTime(entry.timestamp),
+          footer: lineCount > 1 ? `~${lineCount} lines` : undefined,
+        }
+      })
+      .toReversed()
+  })
+
+  return (
+    <DialogSelect
+      title="Stash"
+      options={options()}
+      onMove={() => {
+        setToDelete(undefined)
+      }}
+      onSelect={(option) => {
+        const entries = stash.list()
+        const entry = entries[option.value]
+        if (entry) {
+          stash.remove(option.value)
+          props.onSelect(entry)
+        }
+        dialog.clear()
+      }}
+      keybind={[
+        {
+          keybind: keybind.all.stash_delete?.[0],
+          title: "delete",
+          onTrigger: (option) => {
+            if (toDelete() === option.value) {
+              stash.remove(option.value)
+              setToDelete(undefined)
+              return
+            }
+            setToDelete(option.value)
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog/dialog-status.tsx

@@ -0,0 +1,190 @@
+import { TextAttributes } from "@opentui/core"
+import { fileURLToPath } from "bun"
+import { useTheme } from "../../context/theme"
+import { useDialog } from "@tui/ui/dialog"
+import { useSync } from "@tui/context/sync"
+import { useProject } from "@tui/context/project"
+import { For, Match, Switch, Show, createMemo } from "solid-js"
+import { InstallationVersion } from "@saeeol/core/installation/version"
+import { Global } from "@saeeol/core/global" 
+
+export type DialogStatusProps = {}
+
+export function DialogStatus() {
+  const sync = useSync()
+  const project = useProject()
+  const { theme } = useTheme()
+  const dialog = useDialog()
+
+  const enabledFormatters = createMemo(() => sync.data.formatter.filter((f) => f.enabled))
+
+  const plugins = createMemo(() => {
+    const list = sync.data.config.plugin ?? []
+    const result = list.map((item) => {
+      const value = typeof item === "string" ? item : item[0]
+      if (value.startsWith("file://")) {
+        const path = fileURLToPath(value)
+        const parts = path.split(/[/\\]/) 
+        const filename = parts.pop() || path
+        if (!filename.includes(".")) return { name: filename }
+        const basename = filename.split(".")[0]
+        if (basename === "index") {
+          const dirname = parts.pop()
+          const name = dirname || basename
+          return { name }
+        }
+        return { name: basename }
+      }
+      const index = value.lastIndexOf("@")
+      if (index <= 0) return { name: value, version: "latest" }
+      const name = value.substring(0, index)
+      const version = value.substring(index + 1)
+      return { name, version }
+    })
+    return result.toSorted((a, b) => a.name.localeCompare(b.name))
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme.text} attributes={TextAttributes.BOLD}>
+          Status
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      
+      <text fg={theme.textMuted}>Saeeol v{InstallationVersion}</text>
+      
+      
+      <box>
+        <text fg={theme.text}>Paths</text>
+        <text fg={theme.textMuted}>
+          Global config {"  "}
+          {Global.Path.config.replace(Global.Path.home, "~")}
+        </text>
+        <Show when={project.instance.path().directory}>
+          <text fg={theme.textMuted}>
+            Project {"       "}
+            {project.instance.path().directory.replace(Global.Path.home, "~")}
+          </text>
+        </Show>
+      </box>
+      
+      <Show when={Object.keys(sync.data.mcp).length > 0} fallback={<text fg={theme.text}>No MCP Servers</text>}>
+        <box>
+          <text fg={theme.text}>{Object.keys(sync.data.mcp).length} MCP Servers</text>
+          <For each={Object.entries(sync.data.mcp)}>
+            {([key, item]) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: (
+                      {
+                        connected: theme.success,
+                        failed: theme.error,
+                        disabled: theme.textMuted,
+                        needs_auth: theme.warning,
+                        needs_client_registration: theme.error,
+                      } as Record<string, typeof theme.success>
+                    )[item.status],
+                  }}
+                >
+                  •
+                </text>
+                <text fg={theme.text} wrapMode="word">
+                  <b>{key}</b>{" "}
+                  <span style={{ fg: theme.textMuted }}>
+                    <Switch fallback={item.status}>
+                      <Match when={item.status === "connected"}>Connected</Match>
+                      <Match when={item.status === "failed" && item}>{(val) => val().error}</Match>
+                      <Match when={item.status === "disabled"}>Disabled in configuration</Match>
+                      <Match when={(item.status as string) === "needs_auth"}>
+                        Needs authentication (run: saeeol mcp auth {key})
+                      </Match>
+                      <Match when={(item.status as string) === "needs_client_registration" && item}>
+                        {(val) => (val() as { error: string }).error}
+                      </Match>
+                    </Switch>
+                  </span>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+      {sync.data.lsp.length > 0 && (
+        <box>
+          <text fg={theme.text}>{sync.data.lsp.length} LSP Servers</text>
+          <For each={sync.data.lsp}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: {
+                      connected: theme.success,
+                      error: theme.error,
+                    }[item.status],
+                  }}
+                >
+                  •
+                </text>
+                <text fg={theme.text} wrapMode="word">
+                  <b>{item.id}</b> <span style={{ fg: theme.textMuted }}>{item.root}</span>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      )}
+      <Show when={enabledFormatters().length > 0} fallback={<text fg={theme.text}>No Formatters</text>}>
+        <box>
+          <text fg={theme.text}>{enabledFormatters().length} Formatters</text>
+          <For each={enabledFormatters()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: theme.success,
+                  }}
+                >
+                  •
+                </text>
+                <text wrapMode="word" fg={theme.text}>
+                  <b>{item.name}</b>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+      <Show when={plugins().length > 0} fallback={<text fg={theme.text}>No Plugins</text>}>
+        <box>
+          <text fg={theme.text}>{plugins().length} Plugins</text>
+          <For each={plugins()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: theme.success,
+                  }}
+                >
+                  •
+                </text>
+                <text wrapMode="word" fg={theme.text}>
+                  <b>{item.name}</b>
+                  {item.version && <span style={{ fg: theme.textMuted }}> @{item.version}</span>}
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+    </box>
+  )
+}

package/src/cli/cmd/tui/component/dialog/dialog-tag.tsx

@@ -0,0 +1,44 @@
+import { createMemo, createResource } from "solid-js"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "@tui/context/sdk"
+import { createStore } from "solid-js/store"
+
+export function DialogTag(props: { onSelect?: (value: string) => void }) {
+  const sdk = useSDK()
+  const dialog = useDialog()
+
+  const [store] = createStore({
+    filter: "",
+  })
+
+  const [files] = createResource(
+    () => [store.filter],
+    async () => {
+      const result = await sdk.client.find.files({
+        query: store.filter,
+      })
+      if (result.error) return []
+      const sliced = (result.data ?? []).slice(0, 5)
+      return sliced
+    },
+  )
+
+  const options = createMemo(() =>
+    (files() ?? []).map((file) => ({
+      value: file,
+      title: file,
+    })),
+  )
+
+  return (
+    <DialogSelect
+      title="Autocomplete"
+      options={options()}
+      onSelect={(option) => {
+        props.onSelect?.(option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}