nikcli 0.0.6

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

@@ -0,0 +1,234 @@
+import { createMemo, createSignal } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { map, pipe, flatMap, entries, filter, sortBy, take } from "remeda"
+import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
+import { useKeybind } from "../context/keybind"
+import * as fuzzysort from "fuzzysort"
+
+export function useConnected() {
+  const sync = useSync()
+  return createMemo(() =>
+    sync.data.provider.some((x) => x.id !== "nikcli" || Object.values(x.models).some((y) => y.cost?.input !== 0)),
+  )
+}
+
+export function DialogModel(props: { providerID?: string }) {
+  const local = useLocal()
+  const sync = useSync()
+  const dialog = useDialog()
+  const keybind = useKeybind()
+  const [ref, setRef] = createSignal<DialogSelectRef<unknown>>()
+  const [query, setQuery] = createSignal("")
+
+  const connected = useConnected()
+  const providers = createDialogProviderOptions()
+
+  const showExtra = createMemo(() => {
+    if (!connected()) return false
+    if (props.providerID) return false
+    return true
+  })
+
+  const options = createMemo(() => {
+    const q = query()
+    const needle = q.trim()
+    const showSections = showExtra() && needle.length === 0
+    const favorites = connected() ? local.model.favorite() : []
+    const recents = local.model.recent()
+
+    const recentList = showSections
+      ? recents.filter(
+          (item) => !favorites.some((fav) => fav.providerID === item.providerID && fav.modelID === item.modelID),
+        )
+      : []
+
+    const favoriteOptions = showSections
+      ? favorites.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: "Favorites",
+              disabled: provider.id === "nikcli" && model.id.includes("-nano"),
+              footer: model.cost?.input === 0 && provider.id === "nikcli" ? "Free" : undefined,
+              onSelect: () => {
+                dialog.clear()
+                local.model.set(
+                  {
+                    providerID: provider.id,
+                    modelID: model.id,
+                  },
+                  { recent: true },
+                )
+              },
+            },
+          ]
+        })
+      : []
+
+    const recentOptions = showSections
+      ? recentList.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: "Recent",
+              disabled: provider.id === "nikcli" && model.id.includes("-nano"),
+              footer: model.cost?.input === 0 && provider.id === "nikcli" ? "Free" : undefined,
+              onSelect: () => {
+                dialog.clear()
+                local.model.set(
+                  {
+                    providerID: provider.id,
+                    modelID: model.id,
+                  },
+                  { recent: true },
+                )
+              },
+            },
+          ]
+        })
+      : []
+
+    const providerOptions = pipe(
+      sync.data.provider,
+      sortBy(
+        (provider) => provider.id !== "nikcli",
+        (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]) => {
+            const value = {
+              providerID: provider.id,
+              modelID: model,
+            }
+            return {
+              value,
+              title: info.name ?? model,
+              description: favorites.some(
+                (item) => item.providerID === value.providerID && item.modelID === value.modelID,
+              )
+                ? "(Favorite)"
+                : undefined,
+              category: connected() ? provider.name : undefined,
+              disabled: provider.id === "nikcli" && model.includes("-nano"),
+              footer: info.cost?.input === 0 && provider.id === "nikcli" ? "Free" : undefined,
+              onSelect() {
+                dialog.clear()
+                local.model.set(
+                  {
+                    providerID: provider.id,
+                    modelID: model,
+                  },
+                  { recent: true },
+                )
+              },
+            }
+          }),
+          filter((x) => {
+            if (!showSections) return true
+            const value = x.value
+            const inFavorites = favorites.some(
+              (item) => item.providerID === value.providerID && item.modelID === value.modelID,
+            )
+            if (inFavorites) return false
+            const inRecents = recentList.some(
+              (item) => item.providerID === value.providerID && item.modelID === value.modelID,
+            )
+            if (inRecents) return false
+            return true
+          }),
+          sortBy(
+            (x) => x.footer !== "Free",
+            (x) => x.title,
+          ),
+        ),
+      ),
+    )
+
+    const popularProviders = !connected()
+      ? pipe(
+          providers(),
+          map((option) => {
+            return {
+              ...option,
+              category: "Popular providers",
+            }
+          }),
+          take(6),
+        )
+      : []
+
+    // Search shows a single merged list (favorites inline)
+    if (needle) {
+      const filteredProviders = fuzzysort.go(needle, providerOptions, { keys: ["title", "category"] }).map((x) => x.obj)
+      const filteredPopular = fuzzysort.go(needle, popularProviders, { keys: ["title"] }).map((x) => x.obj)
+      return [...filteredProviders, ...filteredPopular]
+    }
+
+    return [...favoriteOptions, ...recentOptions, ...providerOptions, ...popularProviders]
+  })
+
+  const provider = createMemo(() =>
+    props.providerID ? sync.data.provider.find((x) => x.id === props.providerID) : null,
+  )
+
+  const title = createMemo(() => {
+    if (provider()) return provider()!.name
+    return "Select model"
+  })
+
+  return (
+    <DialogSelect
+      keybind={[
+        {
+          keybind: keybind.all.model_provider_list?.[0],
+          title: connected() ? "Connect provider" : "View all providers",
+          onTrigger() {
+            dialog.replace(() => <DialogProvider />)
+          },
+        },
+        {
+          keybind: keybind.all.model_favorite_toggle?.[0],
+          title: "Favorite",
+          disabled: !connected(),
+          onTrigger: (option) => {
+            local.model.toggleFavorite(option.value as { providerID: string; modelID: string })
+          },
+        },
+      ]}
+      ref={setRef}
+      onFilter={setQuery}
+      skipFilter={true}
+      title={title()}
+      current={local.model.current()}
+      options={options()}
+    />
+  )
+}

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

@@ -0,0 +1,260 @@
+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 } from "@nikcli-ai/sdk/v2"
+import { DialogModel } from "./dialog-model"
+import { useKeyboard } from "@opentui/solid"
+import { Clipboard } from "@tui/util/clipboard"
+import { useToast } from "../ui/toast"
+
+const PROVIDER_PRIORITY: Record<string, number> = {
+  nikcli: 0,
+  anthropic: 1,
+  "github-copilot": 2,
+  openai: 3,
+  google: 4,
+}
+
+export function createDialogProviderOptions() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const connected = createMemo(() => new Set(sync.data.provider_next.connected))
+  const options = createMemo(() => {
+    return pipe(
+      sync.data.provider_next.all,
+      sortBy((x) => PROVIDER_PRIORITY[x.id] ?? 99),
+      map((provider) => {
+        const isConnected = connected().has(provider.id)
+        return {
+          title: provider.name,
+          value: provider.id,
+          description: {
+            nikcli: "(Recommended)",
+            anthropic: "(Claude Max or API key)",
+            openai: "(ChatGPT Plus/Pro or API key)",
+          }[provider.id],
+          category: provider.id in PROVIDER_PRIORITY ? "Popular" : "Other",
+          footer: isConnected ? "Connected" : undefined,
+          async onSelect() {
+            if (isConnected) {
+              dialog.replace(() => <DialogModel providerID={provider.id} />)
+              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") {
+              const result = await sdk.client.provider.oauth.authorize({
+                providerID: provider.id,
+                method: index,
+              })
+              if (result.data?.method === "code") {
+                dialog.replace(() => (
+                  <CodeMethod
+                    providerID={provider.id}
+                    title={method.label}
+                    index={index}
+                    authorization={result.data!}
+                  />
+                ))
+              }
+              if (result.data?.method === "auto") {
+                dialog.replace(() => (
+                  <AutoMethod
+                    providerID={provider.id}
+                    title={method.label}
+                    index={index}
+                    authorization={result.data!}
+                  />
+                ))
+              }
+            }
+            if (method.type === "api") {
+              return dialog.replace(() => <ApiMethod providerID={provider.id} title={method.label} />)
+            }
+          },
+        }
+      }),
+    )
+  })
+  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}/)?.[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}>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
+}
+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={
+        props.providerID === "nikcli" ? (
+          <box gap={1}>
+            <text fg={theme.textMuted}>
+              Nikcli Zen gives you access to all the best coding models at the cheapest prices with a single API key.
+            </text>
+            <text fg={theme.text}>
+              Go to <span style={{ fg: theme.primary }}>https://nikcli.store/zen</span> to get a key
+            </text>
+          </box>
+        ) : undefined
+      }
+      onConfirm={async (value) => {
+        if (!value) return
+        await sdk.client.auth.set({
+          providerID: props.providerID,
+          auth: {
+            type: "api",
+            key: value,
+          },
+        })
+        await sdk.client.instance.dispose()
+        await sync.bootstrap()
+        dialog.replace(() => <DialogModel providerID={props.providerID} />)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,217 @@
+import { createMemo, createSignal, createResource } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { entries, sortBy } from "remeda"
+import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "@tui/context/sdk"
+import { useToast } from "@tui/ui/toast"
+import { DialogProvider } from "./dialog-provider"
+
+interface RagConfig {
+  model?: string
+  provider?: string
+}
+
+interface ConfigWithRag {
+  rag?: RagConfig
+}
+
+interface OpenRouterEmbeddingModel {
+  id: string
+  name?: string
+  context_length?: number
+}
+
+function isEmbeddingModel(providerID: string, modelID: string, info: any): boolean {
+  const id = modelID.toLowerCase()
+  const name = String(info?.name ?? "").toLowerCase()
+
+  // Ollama frequently uses embedding models without an "embed" substring (e.g. all-minilm).
+  if (providerID === "ollama") {
+    if (id.includes("embed") || id.includes("embedding")) return true
+    if (id.includes("minilm")) return true
+    if (id.startsWith("e5") || id.includes("/e5") || id.includes("e5-")) return true
+    if (id.includes("bge")) return true
+    if (id.includes("gte")) return true
+    if (id.includes("arctic-embed")) return true
+    return name.includes("embed") || name.includes("embedding")
+  }
+
+  return (
+    id.includes("embedding") ||
+    id.includes("embed") ||
+    name.includes("embedding") ||
+    name.includes("embed") ||
+    id.includes("text-embedding") ||
+    name.includes("text-embedding")
+  )
+}
+
+async function fetchOpenRouterEmbeddingModels(apiKey: string): Promise<OpenRouterEmbeddingModel[]> {
+  try {
+    const response = await fetch("https://openrouter.ai/api/v1/embeddings/models", {
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+      },
+    })
+    if (!response.ok) return []
+    const data = await response.json()
+    return data.data ?? []
+  } catch {
+    return []
+  }
+}
+
+export function DialogRagModel() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const toast = useToast()
+  const [ref, setRef] = createSignal<DialogSelectRef<{ providerID: string; modelID: string }>>()
+  const [query, setQuery] = createSignal("")
+
+  const currentRag = createMemo(() => (sync.data.config as ConfigWithRag | undefined)?.rag)
+  // Prefer provider_next.connected but also include config.providers list as fallback.
+  const connectedProviderIDs = createMemo(() => {
+    const ids = new Set<string>()
+    for (const id of sync.data.provider_next.connected ?? []) ids.add(id)
+    for (const p of sync.data.provider ?? []) ids.add((p as any).id)
+    return ids
+  })
+
+  const openRouterKey = createMemo(() => {
+    if (!connectedProviderIDs().has("openrouter")) return undefined
+    const p = (sync.data.provider ?? []).find((x) => (x as any).id === "openrouter") as any
+    return (p?.key as string | undefined) ?? (p?.options?.apiKey as string | undefined)
+  })
+
+  const [openRouterModels] = createResource(openRouterKey, async (key) => {
+    if (!key) return [] as OpenRouterEmbeddingModel[]
+    return fetchOpenRouterEmbeddingModels(key)
+  })
+
+  const options = createMemo(() => {
+    const needle = query().trim().toLowerCase()
+    const connected = connectedProviderIDs()
+
+    const allOptions: Array<{
+      value: { providerID: string; modelID: string }
+      title: string
+      description: string
+      category?: string
+      disabled?: boolean
+      onSelect: () => void
+    }> = []
+
+    for (const provider of sync.data.provider_next.all as any[]) {
+      if (!connected.has(provider.id)) continue
+      for (const [model, info] of entries(provider.models)) {
+        if (!isEmbeddingModel(provider.id, model, info)) continue
+        if (info.status === "deprecated") continue
+
+        const value = { providerID: provider.id, modelID: model }
+        const isCurrent = provider.id === currentRag()?.provider && model === currentRag()?.model
+
+        allOptions.push({
+          value,
+          title: info.name ?? model,
+          description: provider.name,
+          category: provider.name,
+          disabled: isCurrent,
+          onSelect: async () => {
+            const { error } = await sdk.client.config.update({
+              config: { rag: { provider: provider.id, model: model } } as any,
+            })
+            if (error) {
+              toast.show({ message: "Failed to update RAG config", variant: "error" })
+              return
+            }
+            toast.show({ message: "RAG model updated", variant: "success" })
+            dialog.clear()
+          },
+        })
+      }
+    }
+
+    const sorted = sortBy(allOptions, (x) => x.title)
+    if (sorted.length === 0) {
+      if (connected.size === 0) {
+        return [
+          {
+            value: { providerID: "__help__", modelID: "__connect__" },
+            title: "No providers connected",
+            description: "Run /connect to add a provider, then retry.",
+            category: "Help",
+            onSelect: () => {
+              dialog.replace(() => <DialogProvider />)
+            },
+          },
+          {
+            value: { providerID: "__help__", modelID: "__retry__" },
+            title: "Retry provider scan",
+            description: "Refresh providers and models list",
+            category: "Help",
+            onSelect: async () => {
+              await sdk.client.instance.dispose()
+              await sync.bootstrap()
+              toast.show({ message: "Providers refreshed", variant: "info" })
+            },
+          },
+        ] as any
+      }
+
+      return [
+        {
+          value: { providerID: "__help__", modelID: "__none__" },
+          title: "No embedding models found",
+          description: "Connected providers did not expose embedding models",
+          category: "Help",
+          onSelect: () => {},
+        },
+      ] as any
+    }
+
+    // If OpenRouter is connected, augment with embedding models fetched from OpenRouter API.
+    // This helps when models.dev metadata is incomplete/outdated.
+    if (connected.has("openrouter")) {
+      const existing = new Set(sorted.filter((x) => x.value.providerID === "openrouter").map((x) => x.value.modelID))
+      for (const model of openRouterModels() ?? []) {
+        if (!model?.id) continue
+        if (existing.has(model.id)) continue
+        const value = { providerID: "openrouter", modelID: model.id }
+        const isCurrent = currentRag()?.provider === "openrouter" && currentRag()?.model === model.id
+        sorted.push({
+          value,
+          title: model.name ?? model.id,
+          description: model.context_length ? `${Math.round(model.context_length / 1000)}k ctx` : "OpenRouter",
+          category: "OpenRouter",
+          disabled: isCurrent,
+          onSelect: async () => {
+            const { error } = await sdk.client.config.update({
+              config: { rag: { provider: "openrouter", model: model.id } } as any,
+            })
+            if (error) {
+              toast.show({ message: "Failed to update RAG config", variant: "error" })
+              return
+            }
+            toast.show({ message: "RAG model updated", variant: "success" })
+            dialog.clear()
+          },
+        })
+      }
+    }
+
+    if (!needle) return sorted
+    return sorted.filter((x) => x.title.toLowerCase().includes(needle))
+  })
+
+  return (
+    <DialogSelect
+      ref={(r) => setRef(r as any)}
+      onFilter={setQuery}
+      skipFilter={true}
+      title="Select RAG embedding model"
+      options={options() as any}
+    />
+  )
+}