saeeol 1.2.1 → 1.2.2

package/src/cli/cmd/tui/component/dialog-go-upsell.tsx

@@ -1,159 +1 @@
-import { BoxRenderable, RGBA, TextAttributes } from "@opentui/core"
-import { useKeyboard } from "@opentui/solid"
-import open from "open"
-import { createSignal, onCleanup, onMount } from "solid-js"
-import { selectedForeground, useTheme } from "@tui/context/theme"
-import { useDialog, type DialogContext } from "@tui/ui/dialog"
-import { Link } from "@tui/ui/link"
-import { GoLogo } from "./logo"
-import { BgPulse, type BgPulseMask } from "./bg-pulse"
-
-const GO_URL = "https://saeeol.ai/go"
-const PAD_X = 3
-const PAD_TOP_OUTER = 1
-
-export type DialogGoUpsellProps = {
-  onClose?: (dontShowAgain?: boolean) => void
-}
-
-function subscribe(props: DialogGoUpsellProps, dialog: ReturnType<typeof useDialog>) {
-  open(GO_URL).catch(() => {})
-  props.onClose?.()
-  dialog.clear()
-}
-
-function dismiss(props: DialogGoUpsellProps, dialog: ReturnType<typeof useDialog>) {
-  props.onClose?.(true)
-  dialog.clear()
-}
-
-export function DialogGoUpsell(props: DialogGoUpsellProps) {
-  const dialog = useDialog()
-  const { theme } = useTheme()
-  const fg = selectedForeground(theme)
-  const [selected, setSelected] = createSignal<"dismiss" | "subscribe">("subscribe")
-  const [center, setCenter] = createSignal<{ x: number; y: number } | undefined>()
-  const [masks, setMasks] = createSignal<BgPulseMask[]>([])
-  let content: BoxRenderable | undefined
-  let logoBox: BoxRenderable | undefined
-  let headingBox: BoxRenderable | undefined
-  let descBox: BoxRenderable | undefined
-  let buttonsBox: BoxRenderable | undefined
-
-  const sync = () => {
-    if (!content || !logoBox) return
-    setCenter({
-      x: logoBox.x - content.x + logoBox.width / 2,
-      y: logoBox.y - content.y + logoBox.height / 2 + PAD_TOP_OUTER,
-    })
-    const next: BgPulseMask[] = []
-    const baseY = PAD_TOP_OUTER
-    for (const b of [headingBox, descBox, buttonsBox]) {
-      if (!b) continue
-      next.push({
-        x: b.x - content.x,
-        y: b.y - content.y + baseY,
-        width: b.width,
-        height: b.height,
-        pad: 2,
-        strength: 0.78,
-      })
-    }
-    setMasks(next)
-  }
-
-  onMount(() => {
-    sync()
-    for (const b of [content, logoBox, headingBox, descBox, buttonsBox]) b?.on("resize", sync)
-  })
-
-  onCleanup(() => {
-    for (const b of [content, logoBox, headingBox, descBox, buttonsBox]) b?.off("resize", sync)
-  })
-
-  useKeyboard((evt) => {
-    if (evt.name === "left" || evt.name === "right" || evt.name === "tab") {
-      setSelected((s) => (s === "subscribe" ? "dismiss" : "subscribe"))
-      return
-    }
-    if (evt.name === "return") {
-      evt.preventDefault()
-      evt.stopPropagation()
-      if (selected() === "subscribe") subscribe(props, dialog)
-      else dismiss(props, dialog)
-    }
-  })
-
-  return (
-    <box ref={(item: BoxRenderable) => (content = item)}>
-      <box position="absolute" top={-PAD_TOP_OUTER} left={0} right={0} bottom={0} zIndex={0}>
-        <BgPulse centerX={center()?.x} centerY={center()?.y} masks={masks()} />
-      </box>
-      <box paddingLeft={PAD_X} paddingRight={PAD_X} paddingBottom={1} gap={1}>
-        <box ref={(item: BoxRenderable) => (headingBox = item)} flexDirection="row" justifyContent="space-between">
-          <text attributes={TextAttributes.BOLD} fg={theme.text}>
-            Free limit reached
-          </text>
-          <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
-            esc
-          </text>
-        </box>
-        <box ref={(item: BoxRenderable) => (descBox = item)} gap={0}>
-          <box flexDirection="row">
-            <text fg={theme.textMuted}>Subscribe to </text>
-            <text attributes={TextAttributes.BOLD} fg={theme.textMuted}>
-              Saeeol Go
-            </text>
-            <text fg={theme.textMuted}> for reliable access to the</text>
-          </box>
-          <text fg={theme.textMuted}>best open-source models, starting at $5/month.</text>
-        </box>
-        <box alignItems="center" gap={1} paddingBottom={1}>
-          <box ref={(item: BoxRenderable) => (logoBox = item)}>
-            <GoLogo />
-          </box>
-          <Link href={GO_URL} fg={theme.primary} />
-        </box>
-        <box ref={(item: BoxRenderable) => (buttonsBox = item)} flexDirection="row" justifyContent="space-between">
-          <box
-            paddingLeft={2}
-            paddingRight={2}
-            backgroundColor={selected() === "dismiss" ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-            onMouseOver={() => setSelected("dismiss")}
-            onMouseUp={() => dismiss(props, dialog)}
-          >
-            <text
-              fg={selected() === "dismiss" ? fg : theme.textMuted}
-              attributes={selected() === "dismiss" ? TextAttributes.BOLD : undefined}
-            >
-              don't show again
-            </text>
-          </box>
-          <box
-            paddingLeft={2}
-            paddingRight={2}
-            backgroundColor={selected() === "subscribe" ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
-            onMouseOver={() => setSelected("subscribe")}
-            onMouseUp={() => subscribe(props, dialog)}
-          >
-            <text
-              fg={selected() === "subscribe" ? fg : theme.text}
-              attributes={selected() === "subscribe" ? TextAttributes.BOLD : undefined}
-            >
-              subscribe
-            </text>
-          </box>
-        </box>
-      </box>
-    </box>
-  )
-}
-
-DialogGoUpsell.show = (dialog: DialogContext) => {
-  return new Promise<boolean>((resolve) => {
-    dialog.replace(
-      () => <DialogGoUpsell onClose={(dontShow) => resolve(dontShow ?? false)} />,
-      () => resolve(false),
-    )
-  })
-}
+export * from "./dialog/dialog-go-upsell"

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

@@ -1,86 +1 @@
-import { createMemo, createSignal } from "solid-js"
-import { useLocal } from "@tui/context/local"
-import { useSync } from "@tui/context/sync"
-import { map, pipe, entries, sortBy } from "remeda"
-import { DialogSelect, type DialogSelectRef, type DialogSelectOption } from "@tui/ui/dialog-select"
-import { useTheme } from "../context/theme"
-import { Keybind } from "@/util/keybind"
-import { TextAttributes } from "@opentui/core"
-import { useSDK } from "@tui/context/sdk"
-
-function Status(props: { enabled: boolean; loading: boolean }) {
-  const { theme } = useTheme()
-  if (props.loading) {
-    return <span style={{ fg: theme.textMuted }}>⋯ Loading</span>
-  }
-  if (props.enabled) {
-    return <span style={{ fg: theme.success, attributes: TextAttributes.BOLD }}>✓ Enabled</span>
-  }
-  return <span style={{ fg: theme.textMuted }}>○ Disabled</span>
-}
-
-export function DialogMcp() {
-  const local = useLocal()
-  const sync = useSync()
-  const sdk = useSDK()
-  const [, setRef] = createSignal<DialogSelectRef<unknown>>()
-  const [loading, setLoading] = createSignal<string | null>(null)
-
-  const options = createMemo(() => {
-    // Track sync data and loading state to trigger re-render when they change
-    const mcpData = sync.data.mcp
-    const loadingMcp = loading()
-
-    return pipe(
-      mcpData ?? {},
-      entries(),
-      sortBy(([name]) => name),
-      map(([name, status]) => ({
-        value: name,
-        title: name,
-        description: status.status === "failed" ? "failed" : status.status,
-        footer: <Status enabled={local.mcp.isEnabled(name)} loading={loadingMcp === name} />,
-        category: undefined,
-      })),
-    )
-  })
-
-  const keybinds = createMemo(() => [
-    {
-      keybind: Keybind.parse("space")[0],
-      title: "toggle",
-      onTrigger: async (option: DialogSelectOption<string>) => {
-        // Prevent toggling while an operation is already in progress
-        if (loading() !== null) return
-
-        setLoading(option.value)
-        try {
-          await local.mcp.toggle(option.value)
-          // Refresh MCP status from server
-          const status = await sdk.client.mcp.status()
-          if (status.data) {
-            sync.set("mcp", status.data)
-          } else {
-            console.error("Failed to refresh MCP status: no data returned")
-          }
-        } catch (error) {
-          console.error("Failed to toggle MCP:", error)
-        } finally {
-          setLoading(null)
-        }
-      },
-    },
-  ])
-
-  return (
-    <DialogSelect
-      ref={setRef}
-      title="MCPs"
-      options={options()}
-      keybind={keybinds()}
-      onSelect={(_option) => {
-        // Don't close on select, only on escape
-      }}
-    />
-  )
-}
+export * from "./dialog/dialog-mcp"

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

@@ -1,238 +1 @@
-import { useTerminalDimensions } from "@opentui/solid" 
-import { createEffect, createMemo, createSignal, Show } from "solid-js" 
-import { useLocal } from "@tui/context/local"
-import { useSync } from "@tui/context/sync"
-import { map, pipe, flatMap, entries, filter, sortBy, take, groupBy } from "remeda" 
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { useDialog } from "@tui/ui/dialog"
-import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
-import { DialogVariant } from "./dialog-variant"
-import { useKeybind } from "../context/keybind"
-import type { Model } from "@saeeol/sdk/v2" 
-import * as fuzzysort from "fuzzysort"
-import { useConnected } from "./use-connected"
-import { ModelInfoPanel } from "@/saeeol/components/model-info-panel"
-import { t } from "@/util/i18n"
-
-export function DialogModel(props: { providerID?: string }) {
-  const local = useLocal()
-  const sync = useSync()
-  const dialog = useDialog()
-  const keybind = useKeybind()
-  const [query, setQuery] = createSignal("")
-  const dimensions = useTerminalDimensions() 
-
-  const connected = useConnected()
-  const providers = createDialogProviderOptions()
-  // Memoize anything that iterates all Saeeol models to avoid calculating it for
-  // each Saeeol model and tanking the UI at a couple hundred models
-  const saeeolRank = createMemo(() => {
-    const provider = sync.data.provider.find((provider) => provider.id === "saeeol")
-    const models = provider?.models ?? {}
-    return new Map(Object.entries(models).map(([id, info]) => [id, info.recommendedIndex ?? Infinity] as const))
-  })
-
-  const showExtra = createMemo(() => connected() && !props.providerID)
-  const wide = createMemo(() => dimensions().width >= 108)
-  const [preview, setPreview] = createSignal<{
-    model: Model
-    provider: string
-  }>()
-
-  const lookup = (providerID: string, modelID: string) => {
-    const provider = sync.data.provider.find((x) => x.id === providerID)
-    const model = provider?.models?.[modelID]
-    if (!provider || !model) return
-    return {
-      model,
-      provider: provider.name,
-    }
-  }
-
-  createEffect(() => {
-    dialog.setSize(wide() ? "xlarge" : "large")
-  })
-
-  createEffect(() => {
-    const current = local.model.current()
-    if (!current) return
-    const next = lookup(current.providerID, current.modelID)
-    if (!next) return
-    setPreview(next)
-  })
-
-  const options = createMemo(() => {
-    const needle = query().trim()
-    const favorites = connected() ? local.model.favorite() : []
-    const recents = local.model.recent()
-
-    function toOptions(items: typeof favorites, category: string) {
-      if (!showExtra()) return [] 
-      return items.flatMap((item) => {
-        const provider = sync.data.provider.find((x) => x.id === item.providerID)
-        if (!provider) return []
-        const model = provider.models?.[item.modelID]
-        if (!model) return []
-        return [
-          {
-            key: item,
-            value: { providerID: provider.id, modelID: model.id },
-            title: model.name ?? item.modelID,
-            description: provider.name,
-            category,
-            disabled: provider.id === "saeeol" && model.id.includes("-nano"),
-            footer: model.cost?.input === 0 && provider.id === "saeeol" ? "Free" : undefined,
-            onSelect: () => {
-              onSelect(provider.id, model.id)
-            },
-          },
-        ]
-      })
-    }
-
-    const favoriteOptions = toOptions(favorites, t("cmd.model.favorites"))
-    const recentOptions = toOptions(
-      recents.filter(
-        (item) => !favorites.some((fav) => fav.providerID === item.providerID && fav.modelID === item.modelID),
-      ),
-      t("cmd.model.recent"),
-    )
-
-    const providerOptions = pipe(
-      sync.data.provider,
-      sortBy(
-        (provider) => provider.id !== "saeeol",
-        (provider) => provider.name,
-      ),
-      flatMap((provider) =>
-        pipe(
-          provider.models,
-          entries(),
-          filter(([_, info]) => info.status !== "deprecated"),
-          filter(([_, info]) => (props.providerID ? info.providerID === props.providerID : true)),
-          map(([model, info]) => ({
-            value: { providerID: provider.id, modelID: model },
-            title: info.name ?? model,
-            description: favorites.some((item) => item.providerID === provider.id && item.modelID === model)
-              ? "(Favorite)"
-              : undefined,
-            category: connected()
-              ? provider.id === "saeeol" && info.recommendedIndex !== undefined
-                ? t("cmd.model.recommended")
-                : provider.name
-              : undefined,
-            disabled: provider.id === "saeeol" && model.includes("-nano"),
-            footer: info.cost?.input === 0 && provider.id === "saeeol" ? "Free" : undefined,
-            onSelect() {
-              onSelect(provider.id, model)
-            },
-          })),
-          filter((x) => {
-            if (favorites.some((item) => item.providerID === x.value.providerID && item.modelID === x.value.modelID))
-              return false
-            if (recents.some((item) => item.providerID === x.value.providerID && item.modelID === x.value.modelID))
-              return false
-            return true
-          }),
-          sortBy(
-            (x) => (x.value.providerID === "saeeol" ? (saeeolRank().get(x.value.modelID) ?? Infinity) : 0),
-            (x) => x.footer !== "Free",
-            (x) => x.title,
-          ),
-        ),
-      ),
-    )
-
-    const popularProviders = !connected()
-      ? pipe(
-          providers(),
-          map((option) => ({
-            ...option,
-            category: t("cmd.model.popular_providers"),
-          })),
-          take(6),
-        )
-      : []
-    if (needle) {
-      const rank = <U extends { title: string; category?: string }>(items: U[]) =>
-        fuzzysort.go(needle, items, { keys: ["title", "category"] }).map((x) => x.obj)
-      // rank within each provider category to preserve category order
-      const rankedProviders = pipe(
-        providerOptions,
-        groupBy((x) => x.category ?? ""),
-        entries(),
-        flatMap(([_, items]) => rank(items)),
-      )
-      return [...rank(favoriteOptions), ...rank(recentOptions), ...rankedProviders, ...rank(popularProviders)]
-    }
-
-    return [...favoriteOptions, ...recentOptions, ...providerOptions, ...popularProviders]
-  })
-
-  const provider = createMemo(() =>
-    props.providerID ? sync.data.provider.find((x) => x.id === props.providerID) : null,
-  )
-
-  const title = createMemo(() => {
-    const value = provider()
-    if (!value) return t("cmd.model.title")
-    return value.name
-  })
-
-  function onSelect(providerID: string, modelID: string) {
-    local.model.set({ providerID, modelID }, { recent: true })
-    const list = local.model.variant.list()
-    const cur = local.model.variant.selected()
-    if (cur === "default" || (cur && list.includes(cur))) {
-      dialog.clear()
-      return
-    }
-    if (list.length > 0) {
-      dialog.replace(() => <DialogVariant />)
-      return
-    }
-    dialog.clear()
-  }
-  return (
-    <box flexDirection="row">
-      <box flexGrow={1} flexShrink={1}>
-        <DialogSelect<ReturnType<typeof options>[number]["value"]>
-          options={options()}
-          keybind={[
-            {
-              keybind: keybind.all.model_provider_list?.[0],
-              title: connected() ? t("cmd.model.connect_provider") : t("cmd.model.view_all_providers"),
-              onTrigger() {
-                dialog.replace(() => <DialogProvider />)
-              },
-            },
-            {
-              keybind: keybind.all.model_favorite_toggle?.[0],
-              title: t("cmd.model.favorite"),
-              disabled: !connected(),
-              onTrigger: (option) => {
-                local.model.toggleFavorite(option.value as { providerID: string; modelID: string })
-              },
-            },
-          ]}
-          onFilter={setQuery}
-          onMove={(option) => {
-            if (typeof option.value === "string") {
-              setPreview(undefined)
-              return
-            }
-            const next = lookup(option.value.providerID, option.value.modelID)
-            if (!next) return
-            setPreview(next)
-          }}
-          skipFilter={true}
-          title={title()}
-          current={local.model.current()}
-        />
-      </box>
-      <Show when={wide() && preview()}>
-        {(item) => <ModelInfoPanel model={item().model} provider={item().provider} />}
-      </Show>
-    </box>
-  )
-}
+export * from "./dialog/dialog-model"