saeeol 1.2.1 → 1.2.2

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

@@ -0,0 +1,50 @@
+import { DialogSelect, type DialogSelectRef } from "../ui/dialog-select"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+import { onCleanup } from "solid-js"
+
+export function DialogThemeList() {
+  const theme = useTheme()
+  const options = Object.keys(theme.all())
+    .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+    .map((value) => ({
+      title: value,
+      value: value,
+    }))
+  const dialog = useDialog()
+  let confirmed = false
+  let ref: DialogSelectRef<string>
+  const initial = theme.selected
+
+  onCleanup(() => {
+    if (!confirmed) theme.set(initial)
+  })
+
+  return (
+    <DialogSelect
+      title="Themes"
+      options={options}
+      current={initial}
+      onMove={(opt) => {
+        theme.set(opt.value)
+      }}
+      onSelect={(opt) => {
+        theme.set(opt.value)
+        confirmed = true
+        dialog.clear()
+      }}
+      ref={(r) => {
+        ref = r
+      }}
+      onFilter={(query) => {
+        if (query.length === 0) {
+          theme.set(initial)
+          return
+        }
+
+        const first = ref.filtered[0]
+        if (first) theme.set(first.value)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,39 @@
+import { createMemo } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+export function DialogVariant() {
+  const local = useLocal()
+  const dialog = useDialog()
+
+  const options = createMemo(() => {
+    return [
+      {
+        value: "default",
+        title: "Default",
+        onSelect: () => {
+          dialog.clear()
+          local.model.variant.set(undefined)
+        },
+      },
+      ...local.model.variant.list().map((variant) => ({
+        value: variant,
+        title: variant,
+        onSelect: () => {
+          dialog.clear()
+          local.model.variant.set(variant)
+        },
+      })),
+    ]
+  })
+
+  return (
+    <DialogSelect<string>
+      options={options()}
+      title={"Select variant"}
+      current={local.model.variant.selected()}
+      flat={true}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog/dialog-workspace-create.tsx

@@ -0,0 +1,200 @@
+import { createSaeeolClient } from "@saeeol/sdk/v2"
+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 { useProject } from "@tui/context/project"
+import { createMemo, createSignal, onMount } from "solid-js"
+import { setTimeout as sleep } from "node:timers/promises"
+import { errorMessage } from "@/util/error"
+import { useSDK } from "../context/sdk"
+import { useToast } from "../ui/toast"
+
+type Adapter = {
+  type: string
+  name: string
+  description: string
+}
+
+function scoped(sdk: ReturnType<typeof useSDK>, sync: ReturnType<typeof useSync>, workspaceID: string) {
+  return createSaeeolClient({
+    baseUrl: sdk.url,
+    fetch: sdk.fetch,
+    directory: sync.path.directory || sdk.directory,
+    experimental_workspaceID: workspaceID,
+  })
+}
+
+export async function openWorkspaceSession(input: {
+  dialog: ReturnType<typeof useDialog>
+  route: ReturnType<typeof useRoute>
+  sdk: ReturnType<typeof useSDK>
+  sync: ReturnType<typeof useSync>
+  toast: ReturnType<typeof useToast>
+  workspaceID: string
+}) {
+  const client = scoped(input.sdk, input.sync, input.workspaceID)
+
+  while (true) {
+    const result = await client.session.create({ workspace: input.workspaceID }).catch(() => undefined)
+    if (!result) {
+      input.toast.show({
+        message: "Failed to create workspace session",
+        variant: "error",
+      })
+      return
+    }
+    if (result.response?.status && result.response.status >= 500 && result.response.status < 600) {
+      await sleep(1000)
+      continue
+    }
+    if (!result.data) {
+      input.toast.show({
+        message: "Failed to create workspace session",
+        variant: "error",
+      })
+      return
+    }
+
+    input.route.navigate({
+      type: "session",
+      sessionID: result.data.id,
+    })
+    input.dialog.clear()
+    return
+  }
+}
+
+export async function restoreWorkspaceSession(input: {
+  dialog: ReturnType<typeof useDialog>
+  sdk: ReturnType<typeof useSDK>
+  sync: ReturnType<typeof useSync>
+  project: ReturnType<typeof useProject>
+  toast: ReturnType<typeof useToast>
+  workspaceID: string
+  sessionID: string
+  done?: () => void
+}) {
+  const result = await input.sdk.client.experimental.workspace
+    .sessionRestore({ id: input.workspaceID, sessionID: input.sessionID })
+    .catch(() => undefined)
+  if (!result?.data) {
+    input.toast.show({
+      message: `Failed to restore session: ${errorMessage(result?.error ?? "no response")}`,
+      variant: "error",
+    })
+    return
+  }
+
+  input.project.workspace.set(input.workspaceID)
+
+  await input.sync.bootstrap({ fatal: false }).catch(() => undefined)
+
+  await Promise.all([input.project.workspace.sync(), input.sync.session.sync(input.sessionID)])
+
+  input.toast.show({
+    message: "Session restored into the new workspace",
+    variant: "success",
+  })
+  input.done?.()
+  if (input.done) return
+  input.dialog.clear()
+}
+
+export function DialogWorkspaceCreate(props: { onSelect: (workspaceID: string) => Promise<void> | void }) {
+  const dialog = useDialog()
+  const sync = useSync()
+  const project = useProject()
+  const sdk = useSDK()
+  const toast = useToast()
+  const [creating, setCreating] = createSignal<string>()
+  const [adapters, setAdapters] = createSignal<Adapter[]>()
+
+  onMount(() => {
+    dialog.setSize("medium")
+    void (async () => {
+      const dir = sync.path.directory || sdk.directory
+      const url = new URL("/experimental/workspace/adapter", sdk.url)
+      if (dir) url.searchParams.set("directory", dir)
+      const res = await sdk
+        .fetch(url)
+        .then((x) => x.json() as Promise<Adapter[]>)
+        .catch(() => undefined)
+      if (!res) {
+        toast.show({
+          message: "Failed to load workspace adapters",
+          variant: "error",
+        })
+        return
+      }
+      setAdapters(res)
+    })()
+  })
+
+  const options = createMemo(() => {
+    const type = creating()
+    if (type) {
+      return [
+        {
+          title: `Creating ${type} workspace...`,
+          value: "creating" as const,
+          description: "This can take a while for remote environments",
+        },
+      ]
+    }
+    const list = adapters()
+    if (!list) {
+      return [
+        {
+          title: "Loading workspaces...",
+          value: "loading" as const,
+          description: "Fetching available workspace adapters",
+        },
+      ]
+    }
+    return list.map((item) => ({
+      title: item.name,
+      value: item.type,
+      description: item.description,
+    }))
+  })
+
+  const create = async (type: string) => {
+    if (creating()) return
+    setCreating(type)
+
+    const result = await sdk.client.experimental.workspace.create({ type, branch: null }).catch(() => {
+      toast.show({
+        message: "Creating workspace failed",
+        variant: "error",
+      })
+      return undefined
+    })
+
+    const workspace = result?.data
+    if (!workspace) {
+      setCreating(undefined)
+      toast.show({
+        message: `Failed to create workspace: ${errorMessage(result?.error ?? "no response")}`,
+        variant: "error",
+      })
+      return
+    }
+
+    await project.workspace.sync()
+    await props.onSelect(workspace.id)
+    setCreating(undefined)
+  }
+
+  return (
+    <DialogSelect
+      title={creating() ? "Creating Workspace" : "New Workspace"}
+      skipFilter={true}
+      options={options()}
+      onSelect={(option) => {
+        if (option.value === "creating" || option.value === "loading") return
+        void create(option.value)
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog/dialog-workspace-unavailable.tsx

@@ -0,0 +1,81 @@
+import { TextAttributes } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
+import { createStore } from "solid-js/store"
+import { For } from "solid-js"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+
+export function DialogWorkspaceUnavailable(props: { onRestore?: () => boolean | void | Promise<boolean | void> }) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const [store, setStore] = createStore({
+    active: "restore" as "cancel" | "restore",
+  })
+
+  const options = ["cancel", "restore"] as const
+
+  async function confirm() {
+    if (store.active === "cancel") {
+      dialog.clear()
+      return
+    }
+    const result = await props.onRestore?.()
+    if (result === false) return
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "return") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      void confirm()
+      return
+    }
+    if (evt.name === "left") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      setStore("active", "cancel")
+      return
+    }
+    if (evt.name === "right") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      setStore("active", "restore")
+    }
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Workspace Unavailable
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <text fg={theme.textMuted} wrapMode="word">
+        This session is attached to a workspace that is no longer available.
+      </text>
+      <text fg={theme.textMuted} wrapMode="word">
+        Would you like to restore this session into a new workspace?
+      </text>
+      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1} gap={1}>
+        <For each={options}>
+          {(item) => (
+            <box
+              paddingLeft={2}
+              paddingRight={2}
+              backgroundColor={item === store.active ? theme.primary : undefined}
+              onMouseUp={() => {
+                setStore("active", item)
+                void confirm()
+              }}
+            >
+              <text fg={item === store.active ? theme.selectedListItemText : theme.textMuted}>{item}</text>
+            </box>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}

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

@@ -1,32 +1 @@
-import { createMemo } from "solid-js"
-import { useLocal } from "@tui/context/local"
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { useDialog } from "@tui/ui/dialog"
-
-export function DialogAgent() {
-  const local = useLocal()
-  const dialog = useDialog()
-
-  const options = createMemo(() =>
-    local.agent.list().map((item) => {
-      return {
-        value: item.name,
-        title: item.displayName ?? item.name, 
-        description:
-          [item.deprecated && "deprecated", item.native && "native"].filter(Boolean).join(", ") || item.description,
-      }
-    }),
-  )
-
-  return (
-    <DialogSelect
-      title="Select agent"
-      current={local.agent.current()?.name ?? ""} 
-      options={options()}
-      onSelect={(option) => {
-        local.agent.set(option.value)
-        dialog.clear()
-      }}
-    />
-  )
-}
+export * from "./dialog/dialog-agent"

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

@@ -1,190 +1 @@
-import { useDialog } from "@tui/ui/dialog"
-import { DialogSelect, type DialogSelectOption, type DialogSelectRef } from "@tui/ui/dialog-select"
-import {
-  createContext,
-  createMemo,
-  createSignal,
-  getOwner,
-  onCleanup,
-  runWithOwner,
-  useContext,
-  type Accessor,
-  type ParentProps,
-} from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-import { useKeybind } from "@tui/context/keybind"
-import { t } from "@/util/i18n"
-
-type Context = ReturnType<typeof init>
-const ctx = createContext<Context>()
-
-export type Slash = {
-  name: string
-  aliases?: string[]
-}
-
-export type CommandOption = DialogSelectOption<string> & {
-  keybind?: string
-  suggested?: boolean
-  slash?: Slash
-  hidden?: boolean
-  enabled?: boolean
-}
-
-function init() {
-  const root = getOwner()
-  const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
-  const [suspendCount, setSuspendCount] = createSignal(0)
-  const dialog = useDialog()
-  const keybind = useKeybind()
-
-  // Double-tap tracking for agent_cycle keybinds
-  const DOUBLE_TAB_KEYS = new Set(["agent_cycle", "agent_cycle_reverse"])
-  const DOUBLE_TAB_WINDOW = 400
-  let lastTabKey = ""
-  let lastTabTime = 0
-
-  const entries = createMemo(() => {
-    const all = registrations().flatMap((x) => x())
-    return all.map((x) => ({
-      ...x,
-      footer: x.keybind ? keybind.print(x.keybind) : undefined,
-    }))
-  })
-
-  const isEnabled = (option: CommandOption) => option.enabled !== false
-  const isVisible = (option: CommandOption) => isEnabled(option) && !option.hidden
-
-  const visibleOptions = createMemo(() => entries().filter((option) => isVisible(option)))
-  const suggestedOptions = createMemo(() =>
-    visibleOptions()
-      .filter((option) => option.suggested)
-      .map((option) => ({
-        ...option,
-        value: `suggested:${option.value}`,
-        category: t("cmd.suggested"),
-      })),
-  )
-  const suspended = () => suspendCount() > 0
-
-  useKeyboard((evt) => {
-    if (suspended()) return
-    if (dialog.stack.length > 0) return
-    if (evt.defaultPrevented) return
-    for (const option of entries()) {
-      if (!isEnabled(option)) continue
-      if (option.keybind && keybind.match(option.keybind, evt)) {
-        // Require double-tap for agent cycle keybinds
-        if (DOUBLE_TAB_KEYS.has(option.keybind)) {
-          const now = Date.now()
-          const match = option.keybind === lastTabKey && now - lastTabTime < DOUBLE_TAB_WINDOW
-          lastTabKey = option.keybind
-          lastTabTime = now
-          if (!match) {
-            evt.preventDefault()
-            return
-          }
-        }
-        evt.preventDefault()
-        option.onSelect?.(dialog)
-        return
-      }
-    }
-  })
-
-  const result = {
-    trigger(name: string) {
-      for (const option of entries()) {
-        if (option.value === name) {
-          if (!isEnabled(option)) return
-          option.onSelect?.(dialog)
-          return
-        }
-      }
-    },
-    slashes() {
-      return visibleOptions().flatMap((option) => {
-        const slash = option.slash
-        if (!slash) return []
-        return {
-          display: "/" + slash.name,
-          description: option.description ?? option.title,
-          aliases: slash.aliases?.map((alias) => "/" + alias),
-          onSelect: () => result.trigger(option.value),
-        }
-      })
-    },
-    keybinds(enabled: boolean) {
-      setSuspendCount((count) => count + (enabled ? -1 : 1))
-    },
-    suspended,
-    show() {
-      dialog.replace(() => <DialogCommand options={visibleOptions()} suggestedOptions={suggestedOptions()} />)
-    },
-    register(cb: () => CommandOption[]) {
-      const owner = getOwner() ?? root
-      if (!owner) return () => {}
-
-      let list: Accessor<CommandOption[]> | undefined
-
-      // TUI plugins now register commands via an async store that runs outside an active reactive scope.
-      // runWithOwner attaches createMemo/onCleanup to this owner so plugin registrations stay reactive and dispose correctly.
-      runWithOwner(owner, () => {
-        list = createMemo(cb)
-        const ref = list
-        if (!ref) return
-        setRegistrations((arr) => [ref, ...arr])
-        onCleanup(() => {
-          setRegistrations((arr) => arr.filter((x) => x !== ref))
-        })
-      })
-
-      if (!list) return () => {}
-      let done = false
-      return () => {
-        if (done) return
-        done = true
-        const ref = list
-        if (!ref) return
-        setRegistrations((arr) => arr.filter((x) => x !== ref))
-      }
-    },
-  }
-  return result
-}
-
-export function useCommandDialog() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useCommandDialog must be used within a CommandProvider")
-  }
-  return value
-}
-
-export function CommandProvider(props: ParentProps) {
-  const value = init()
-  const dialog = useDialog()
-  const keybind = useKeybind()
-
-  useKeyboard((evt) => {
-    if (value.suspended()) return
-    if (dialog.stack.length > 0) return
-    if (evt.defaultPrevented) return
-    if (keybind.match("command_list", evt)) {
-      evt.preventDefault()
-      value.show()
-      return
-    }
-  })
-
-  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
-}
-
-function DialogCommand(props: { options: CommandOption[]; suggestedOptions: CommandOption[] }) {
-  let ref: DialogSelectRef<string>
-  const list = () => {
-    if (ref?.filter) return props.options
-    return [...props.suggestedOptions, ...props.options]
-  }
-  return <DialogSelect ref={(r) => (ref = r)} title={t("cmd.title")} options={list()} />
-}
+export * from "./dialog/dialog-command"

package/src/cli/cmd/tui/component/dialog-console-org.tsx

@@ -1,103 +1 @@
-import { createResource, createMemo } from "solid-js"
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { useSDK } from "@tui/context/sdk"
-import { useDialog } from "@tui/ui/dialog"
-import { useToast } from "@tui/ui/toast"
-import { useTheme } from "@tui/context/theme"
-import type { ExperimentalConsoleListOrgsResponse } from "@saeeol/sdk/v2"
-
-type OrgOption = ExperimentalConsoleListOrgsResponse["orgs"][number]
-
-const accountHost = (url: string) => {
-  try {
-    return new URL(url).host
-  } catch {
-    return url
-  }
-}
-
-const accountLabel = (item: Pick<OrgOption, "accountEmail" | "accountUrl">) =>
-  `${item.accountEmail}  ${accountHost(item.accountUrl)}`
-
-export function DialogConsoleOrg() {
-  const sdk = useSDK()
-  const dialog = useDialog()
-  const toast = useToast()
-  const { theme } = useTheme()
-
-  const [orgs] = createResource(async () => {
-    const result = await sdk.client.experimental.console.listOrgs({}, { throwOnError: true })
-    return result.data?.orgs ?? []
-  })
-
-  const current = createMemo(() => orgs()?.find((item) => item.active))
-
-  const options = createMemo(() => {
-    const listed = orgs()
-    if (listed === undefined) {
-      return [
-        {
-          title: "Loading orgs...",
-          value: "loading",
-          onSelect: () => {},
-        },
-      ]
-    }
-
-    if (listed.length === 0) {
-      return [
-        {
-          title: "No orgs found",
-          value: "empty",
-          onSelect: () => {},
-        },
-      ]
-    }
-
-    return listed
-      .toSorted((a, b) => {
-        const activeAccountA = a.active ? 0 : 1
-        const activeAccountB = b.active ? 0 : 1
-        if (activeAccountA !== activeAccountB) return activeAccountA - activeAccountB
-
-        const accountCompare = accountLabel(a).localeCompare(accountLabel(b))
-        if (accountCompare !== 0) return accountCompare
-
-        return a.orgName.localeCompare(b.orgName)
-      })
-      .map((item) => ({
-        title: item.orgName,
-        value: item,
-        category: accountLabel(item),
-        categoryView: (
-          <box flexDirection="row" gap={2}>
-            <text fg={theme.accent}>{item.accountEmail}</text>
-            <text fg={theme.textMuted}>{accountHost(item.accountUrl)}</text>
-          </box>
-        ),
-        onSelect: async () => {
-          if (item.active) {
-            dialog.clear()
-            return
-          }
-
-          await sdk.client.experimental.console.switchOrg(
-            {
-              accountID: item.accountID,
-              orgID: item.orgID,
-            },
-            { throwOnError: true },
-          )
-
-          await sdk.client.instance.dispose()
-          toast.show({
-            message: `Switched to ${item.orgName}`,
-            variant: "info",
-          })
-          dialog.clear()
-        },
-      }))
-  })
-
-  return <DialogSelect<string | OrgOption> title="Switch org" options={options()} current={current()} />
-}
+export * from "./dialog/dialog-console-org"