saeeol 1.2.0 → 1.2.2

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

@@ -1,343 +1 @@
-import { createMemo, createSignal, onMount, Show } from "solid-js"
-import { useSync } from "@tui/context/sync"
-import { map, pipe, sortBy } from "remeda"
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { useDialog } from "@tui/ui/dialog"
-import { useSDK } from "../context/sdk"
-import { DialogPrompt } from "../ui/dialog-prompt"
-import { Link } from "../ui/link"
-import { useTheme } from "../context/theme"
-import { TextAttributes } from "@opentui/core"
-import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@saeeol/sdk/v2"
-import { DialogModel } from "./dialog-model"
-import { useKeyboard } from "@opentui/solid"
-import * as Clipboard from "@tui/util/clipboard"
-import { useToast } from "../ui/toast"
-import { isConsoleManagedProvider } from "@tui/util/provider-origin"
-import * as Provider from "@/saeeol/cli/cmd/tui/component/dialog-provider" 
-import { useConnected } from "./use-connected"
-
-const PROVIDER_PRIORITY: Record<string, number> = Provider.PROVIDER_PRIORITY 
-
-export function createDialogProviderOptions() {
-  const sync = useSync()
-  const dialog = useDialog()
-  const sdk = useSDK()
-  const toast = useToast()
-  const { theme } = useTheme()
-  const onboarded = useConnected()
-  const options = createMemo(() => {
-    return pipe(
-      sync.data.provider_next.all,
-      sortBy((x) => PROVIDER_PRIORITY[x.id] ?? 99),
-      map((provider) => {
-        const consoleManaged = isConsoleManagedProvider(sync.data.console_state.consoleManagedProviders, provider.id)
-        const connected = sync.data.provider_next.connected.includes(provider.id)
-        const failed = sync.data.provider_next.failed ?? []
-        const failedGutter = Provider.renderGutter(provider.id, failed, theme)
-        const failedDesc = Provider.failedDescription(provider.id, failed)
-        const baseDesc = Provider.PROVIDER_DESCRIPTIONS[provider.id]
-
-        return {
-          title: Provider.PROVIDER_TITLES[provider.id] ?? provider.name, 
-          value: provider.id,
-          description: failedDesc ?? baseDesc, 
-          footer: consoleManaged ? sync.data.console_state.activeOrgName : undefined,
-          category: provider.id in PROVIDER_PRIORITY ? "Popular" : "Other",
-          gutter: failedGutter ?? (connected && onboarded() ? () => <text fg={theme.success}>✓</text> : undefined), 
-          async onSelect() {
-            if (consoleManaged) return
-
-            const methods = sync.data.provider_auth[provider.id] ?? [
-              {
-                type: "api",
-                label: "API key",
-              },
-            ]
-            let index: number | null = 0
-            if (methods.length > 1) {
-              index = await new Promise<number | null>((resolve) => {
-                dialog.replace(
-                  () => (
-                    <DialogSelect
-                      title="Select auth method"
-                      options={methods.map((x, index) => ({
-                        title: x.label,
-                        value: index,
-                      }))}
-                      onSelect={(option) => resolve(option.value)}
-                    />
-                  ),
-                  () => resolve(null),
-                )
-              })
-            }
-            if (index == null) return
-            const method = methods[index]
-            if (method.type === "oauth") {
-              let inputs: Record<string, string> | undefined
-              if (method.prompts?.length) {
-                const value = await PromptsMethod({
-                  dialog,
-                  prompts: method.prompts,
-                })
-                if (!value) return
-                inputs = value
-              }
-
-              const result = await sdk.client.provider.oauth.authorize({
-                providerID: provider.id,
-                method: index,
-                inputs,
-              })
-              if (result.error) {
-                toast.show({
-                  variant: "error",
-                  message: JSON.stringify(result.error),
-                })
-                dialog.clear()
-                return
-              }
-              if (result.data?.method === "code") {
-                dialog.replace(() => (
-                  <CodeMethod
-                    providerID={provider.id}
-                    title={method.label}
-                    index={index}
-                    authorization={result.data!}
-                  />
-                ))
-              }
-              if (result.data?.method === "auto") {
-                const saeeol = Provider.renderAutoMethod({
-                  providerID: provider.id,
-                  title: method.label,
-                  index,
-                  authorization: result.data!,
-                  useSDK,
-                  useTheme,
-                  DialogModel,
-                })
-                if (saeeol) {
-                  dialog.replace(saeeol)
-                } else {
-                  dialog.replace(() => (
-                    <AutoMethod
-                      providerID={provider.id}
-                      title={method.label}
-                      index={index}
-                      authorization={result.data!}
-                    />
-                  ))
-                } 
-              }
-            }
-            if (method.type === "api") {
-              let metadata: Record<string, string> | undefined
-              if (method.prompts?.length) {
-                const value = await PromptsMethod({ dialog, prompts: method.prompts })
-                if (!value) return
-                metadata = value
-              }
-              return dialog.replace(() => (
-                <ApiMethod providerID={provider.id} title={method.label} metadata={metadata} />
-              ))
-            }
-          },
-        }
-      }),
-    )
-  })
-  return options
-}
-
-export function DialogProvider() {
-  const options = createDialogProviderOptions()
-  return <DialogSelect title="Connect a provider" options={options()} />
-}
-
-interface AutoMethodProps {
-  index: number
-  providerID: string
-  title: string
-  authorization: ProviderAuthAuthorization
-}
-function AutoMethod(props: AutoMethodProps) {
-  const { theme } = useTheme()
-  const sdk = useSDK()
-  const dialog = useDialog()
-  const sync = useSync()
-  const toast = useToast()
-
-  useKeyboard((evt) => {
-    if (evt.name === "c" && !evt.ctrl && !evt.meta) {
-      const code = props.authorization.instructions.match(/[A-Z0-9]{4}-[A-Z0-9]{4,5}/)?.[0] ?? props.authorization.url
-      Clipboard.copy(code)
-        .then(() => toast.show({ message: "Copied to clipboard", variant: "info" }))
-        .catch(toast.error)
-    }
-  })
-
-  onMount(async () => {
-    const result = await sdk.client.provider.oauth.callback({
-      providerID: props.providerID,
-      method: props.index,
-    })
-    if (result.error) {
-      dialog.clear()
-      return
-    }
-    await sdk.client.instance.dispose()
-    await sync.bootstrap()
-    dialog.replace(() => <DialogModel providerID={props.providerID} />)
-  })
-
-  return (
-    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text}>
-          {props.title}
-        </text>
-        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
-      <box gap={1}>
-        <Link href={props.authorization.url} fg={theme.primary} />
-        <text fg={theme.textMuted}>{props.authorization.instructions}</text>
-      </box>
-      <text fg={theme.textMuted}>Waiting for authorization...</text>
-      <text fg={theme.text}>
-        c <span style={{ fg: theme.textMuted }}>copy</span>
-      </text>
-    </box>
-  )
-}
-
-interface CodeMethodProps {
-  index: number
-  title: string
-  providerID: string
-  authorization: ProviderAuthAuthorization
-}
-function CodeMethod(props: CodeMethodProps) {
-  const { theme } = useTheme()
-  const sdk = useSDK()
-  const sync = useSync()
-  const dialog = useDialog()
-  const [error, setError] = createSignal(false)
-
-  return (
-    <DialogPrompt
-      title={props.title}
-      placeholder="Authorization code"
-      onConfirm={async (value) => {
-        const { error } = await sdk.client.provider.oauth.callback({
-          providerID: props.providerID,
-          method: props.index,
-          code: value,
-        })
-        if (!error) {
-          await sdk.client.instance.dispose()
-          await sync.bootstrap()
-          dialog.replace(() => <DialogModel providerID={props.providerID} />)
-          return
-        }
-        setError(true)
-      }}
-      description={() => (
-        <box gap={1}>
-          <text fg={theme.textMuted}>{props.authorization.instructions}</text>
-          <Link href={props.authorization.url} fg={theme.primary} />
-          <Show when={error()}>
-            <text fg={theme.error}>Invalid code</text>
-          </Show>
-        </box>
-      )}
-    />
-  )
-}
-
-interface ApiMethodProps {
-  providerID: string
-  title: string
-  metadata?: Record<string, string>
-}
-function ApiMethod(props: ApiMethodProps) {
-  const dialog = useDialog()
-  const sdk = useSDK()
-  const sync = useSync()
-  const { theme } = useTheme()
-
-  return (
-    <DialogPrompt
-      title={props.title}
-      placeholder="API key"
-      description={Provider.renderApiDescription(props.providerID, theme)} 
-      onConfirm={async (value) => {
-        if (!value) return
-        await sdk.client.auth.set({
-          providerID: props.providerID,
-          auth: {
-            type: "api",
-            key: value,
-            ...(props.metadata ? { metadata: props.metadata } : {}),
-          },
-        })
-        await sdk.client.instance.dispose()
-        await sync.bootstrap()
-        dialog.replace(() => <DialogModel providerID={props.providerID} />)
-      }}
-    />
-  )
-}
-
-interface PromptsMethodProps {
-  dialog: ReturnType<typeof useDialog>
-  prompts: NonNullable<ProviderAuthMethod["prompts"]>[number][]
-}
-async function PromptsMethod(props: PromptsMethodProps) {
-  const inputs: Record<string, string> = {}
-  for (const prompt of props.prompts) {
-    if (prompt.when) {
-      const value = inputs[prompt.when.key]
-      if (value === undefined) continue
-      const matches = prompt.when.op === "eq" ? value === prompt.when.value : value !== prompt.when.value
-      if (!matches) continue
-    }
-
-    if (prompt.type === "select") {
-      const value = await new Promise<string | null>((resolve) => {
-        props.dialog.replace(
-          () => (
-            <DialogSelect
-              title={prompt.message}
-              options={prompt.options.map((x) => ({
-                title: x.label,
-                value: x.value,
-                description: x.hint,
-              }))}
-              onSelect={(option) => resolve(option.value)}
-            />
-          ),
-          () => resolve(null),
-        )
-      })
-      if (value === null) return null
-      inputs[prompt.key] = value
-      continue
-    }
-
-    const value = await new Promise<string | null>((resolve) => {
-      props.dialog.replace(
-        () => (
-          <DialogPrompt title={prompt.message} placeholder={prompt.placeholder} onConfirm={(value) => resolve(value)} />
-        ),
-        () => resolve(null),
-      )
-    })
-    if (value === null) return null
-    inputs[prompt.key] = value
-  }
-  return inputs
-}
+export * from "./dialog/dialog-provider"

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

@@ -1,103 +1 @@
-import { TextAttributes } from "@opentui/core"
-import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
-import { createStore } from "solid-js/store"
-import { For } from "solid-js"
-import { useKeyboard } from "@opentui/solid"
-
-export function DialogSessionDeleteFailed(props: {
-  session: string
-  workspace: string
-  onDelete?: () => boolean | void | Promise<boolean | void>
-  onRestore?: () => boolean | void | Promise<boolean | void>
-  onDone?: () => void
-}) {
-  const dialog = useDialog()
-  const { theme } = useTheme()
-  const [store, setStore] = createStore({
-    active: "delete" as "delete" | "restore",
-  })
-
-  const options = [
-    {
-      id: "delete" as const,
-      title: "Delete workspace",
-      description: "Delete the workspace and all sessions attached to it.",
-      run: props.onDelete,
-    },
-    {
-      id: "restore" as const,
-      title: "Restore to new workspace",
-      description: "Try to restore this session into a new workspace.",
-      run: props.onRestore,
-    },
-  ]
-
-  async function confirm() {
-    const result = await options.find((item) => item.id === store.active)?.run?.()
-    if (result === false) return
-    props.onDone?.()
-    if (!props.onDone) dialog.clear()
-  }
-
-  useKeyboard((evt) => {
-    if (evt.name === "return") {
-      evt.preventDefault()
-      evt.stopPropagation()
-      void confirm()
-    }
-    if (evt.name === "left" || evt.name === "up") {
-      setStore("active", "delete")
-    }
-    if (evt.name === "right" || evt.name === "down") {
-      setStore("active", "restore")
-    }
-  })
-
-  return (
-    <box paddingLeft={2} paddingRight={2} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text}>
-          Failed to Delete Session
-        </text>
-        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
-      <text fg={theme.textMuted} wrapMode="word">
-        {`The session "${props.session}" could not be deleted because the workspace "${props.workspace}" is not available.`}
-      </text>
-      <text fg={theme.textMuted} wrapMode="word">
-        Choose how you want to recover this broken workspace session.
-      </text>
-      <box flexDirection="column" paddingBottom={1} gap={1}>
-        <For each={options}>
-          {(item) => (
-            <box
-              flexDirection="column"
-              paddingLeft={1}
-              paddingRight={1}
-              paddingTop={1}
-              paddingBottom={1}
-              backgroundColor={item.id === store.active ? theme.primary : undefined}
-              onMouseUp={() => {
-                setStore("active", item.id)
-                void confirm()
-              }}
-            >
-              <text
-                attributes={TextAttributes.BOLD}
-                fg={item.id === store.active ? theme.selectedListItemText : theme.text}
-              >
-                {item.title}
-              </text>
-              <text fg={item.id === store.active ? theme.selectedListItemText : theme.textMuted} wrapMode="word">
-                {item.description}
-              </text>
-            </box>
-          )}
-        </For>
-      </box>
-    </box>
-  )
-}
+export * from "./dialog/dialog-session-delete-failed"