saeeol 1.2.1 → 1.2.3

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

@@ -0,0 +1,159 @@
+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),
+    )
+  })
+}

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

@@ -0,0 +1,86 @@
+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
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,238 @@
+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>
+  )
+}