rird 1.0.200

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

@@ -0,0 +1,224 @@
+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 { useTheme } from "../context/theme"
+import { TextAttributes } from "@opentui/core"
+import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2"
+import { DialogModel } from "./dialog-model"
+
+const PROVIDER_PRIORITY: Record<string, number> = {
+  rird: 0,
+  anthropic: 1,
+  "github-copilot": 2,
+  openai: 3,
+  google: 4,
+  openrouter: 5,
+}
+
+export function createDialogProviderOptions() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const options = createMemo(() => {
+    return pipe(
+      sync.data.provider_next.all,
+      sortBy((x) => PROVIDER_PRIORITY[x.id] ?? 99),
+      map((provider) => ({
+        title: provider.name,
+        value: provider.id,
+        description: {
+          rird: "(Recommended)",
+          anthropic: "(Claude Max or API key)",
+        }[provider.id],
+        category: provider.id in PROVIDER_PRIORITY ? "Popular" : "Other",
+        async onSelect() {
+          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()
+
+  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}>
+        <text fg={theme.primary}>{props.authorization.url}</text>
+        <text fg={theme.textMuted}>{props.authorization.instructions}</text>
+      </box>
+      <text fg={theme.textMuted}>Waiting for authorization...</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>
+          <text fg={theme.primary}>{props.authorization.url}</text>
+          <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 === "rird" ? (
+          <box gap={1}>
+            <text fg={theme.textMuted}>
+              RIRD Mode gives you access to all the best AI models at the cheapest prices with a single API key.
+            </text>
+            <text fg={theme.text}>
+              Go to <span style={{ fg: theme.primary }}>https://rird.ai</span> to get a key
+            </text>
+          </box>
+        ) : undefined
+      }
+      onConfirm={async (value) => {
+        if (!value) return
+        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-session-list.tsx

@@ -0,0 +1,102 @@
+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 { createEffect, createMemo, createSignal, onMount } from "solid-js"
+import { Locale } from "@/util/locale"
+import { Keybind } from "@/util/keybind"
+import { useTheme } from "../context/theme"
+import { useSDK } from "../context/sdk"
+import { DialogSessionRename } from "./dialog-session-rename"
+import "opentui-spinner/solid"
+
+export function DialogSessionList() {
+  const dialog = useDialog()
+  const sync = useSync()
+  const { theme } = useTheme()
+  const route = useRoute()
+  const sdk = useSDK()
+
+  const [toDelete, setToDelete] = createSignal<string>()
+
+  const deleteKeybind = "ctrl+d"
+
+  const currentSessionID = createMemo(() => (route.data.type === "session" ? route.data.sessionID : undefined))
+
+  const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+  const options = createMemo(() => {
+    const today = new Date().toDateString()
+    return sync.data.session
+      .filter((x) => x.parentID === undefined)
+      .toSorted((a, b) => b.time.updated - a.time.updated)
+      .map((x) => {
+        const date = new Date(x.time.updated)
+        let category = date.toDateString()
+        if (category === today) {
+          category = "Today"
+        }
+        const isDeleting = toDelete() === x.id
+        const status = sync.data.session_status?.[x.id]
+        const isWorking = status?.type === "busy"
+        return {
+          title: isDeleting ? `Press ${deleteKeybind} again to confirm` : x.title,
+          bg: isDeleting ? theme.error : undefined,
+          value: x.id,
+          category,
+          footer: Locale.time(x.time.updated),
+          gutter: isWorking ? <spinner frames={spinnerFrames} interval={80} color={theme.primary} /> : undefined,
+        }
+      })
+      .slice(0, 150)
+  })
+
+  createEffect(() => {
+    console.log("session count", sync.data.session.length)
+  })
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  return (
+    <DialogSelect
+      title="Sessions"
+      options={options()}
+      current={currentSessionID()}
+      onMove={() => {
+        setToDelete(undefined)
+      }}
+      onSelect={(option) => {
+        route.navigate({
+          type: "session",
+          sessionID: option.value,
+        })
+        dialog.clear()
+      }}
+      keybind={[
+        {
+          keybind: Keybind.parse(deleteKeybind)[0],
+          title: "delete",
+          onTrigger: async (option) => {
+            if (toDelete() === option.value) {
+              sdk.client.session.delete({
+                sessionID: option.value,
+              })
+              setToDelete(undefined)
+              return
+            }
+            setToDelete(option.value)
+          },
+        },
+        {
+          keybind: Keybind.parse("ctrl+r")[0],
+          title: "rename",
+          onTrigger: async (option) => {
+            dialog.replace(() => <DialogSessionRename session={option.value} />)
+          },
+        },
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,31 @@
+import { DialogPrompt } from "@tui/ui/dialog-prompt"
+import { useDialog } from "@tui/ui/dialog"
+import { useSync } from "@tui/context/sync"
+import { createMemo } from "solid-js"
+import { useSDK } from "../context/sdk"
+
+interface DialogSessionRenameProps {
+  session: string
+}
+
+export function DialogSessionRename(props: DialogSessionRenameProps) {
+  const dialog = useDialog()
+  const sync = useSync()
+  const sdk = useSDK()
+  const session = createMemo(() => sync.session.get(props.session))
+
+  return (
+    <DialogPrompt
+      title="Rename Session"
+      value={session()?.title}
+      onConfirm={(value) => {
+        sdk.client.session.update({
+          sessionID: props.session,
+          title: value,
+        })
+        dialog.clear()
+      }}
+      onCancel={() => dialog.clear()}
+    />
+  )
+}

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

@@ -0,0 +1,86 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { createMemo, createSignal } from "solid-js"
+import { Locale } from "@/util/locale"
+import { Keybind } from "@/util/keybind"
+import { useTheme } from "../context/theme"
+import { usePromptStash, type StashEntry } from "./prompt/stash"
+
+function getRelativeTime(timestamp: number): string {
+  const now = Date.now()
+  const diff = now - timestamp
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (seconds < 60) return "just now"
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  if (days < 7) return `${days}d ago`
+  return Locale.datetime(timestamp)
+}
+
+function getStashPreview(input: string, maxLength: number = 50): string {
+  const firstLine = input.split("\n")[0].trim()
+  return Locale.truncate(firstLine, maxLength)
+}
+
+export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
+  const dialog = useDialog()
+  const stash = usePromptStash()
+  const { theme } = useTheme()
+
+  const [toDelete, setToDelete] = createSignal<number>()
+
+  const options = createMemo(() => {
+    const entries = stash.list()
+    // Show most recent first
+    return entries
+      .map((entry, index) => {
+        const isDeleting = toDelete() === index
+        const lineCount = (entry.input.match(/\n/g)?.length ?? 0) + 1
+        return {
+          title: isDeleting ? "Press ctrl+d again to confirm" : getStashPreview(entry.input),
+          bg: isDeleting ? theme.error : undefined,
+          value: index,
+          description: getRelativeTime(entry.timestamp),
+          footer: lineCount > 1 ? `~${lineCount} lines` : undefined,
+        }
+      })
+      .toReversed()
+  })
+
+  return (
+    <DialogSelect
+      title="Stash"
+      options={options()}
+      onMove={() => {
+        setToDelete(undefined)
+      }}
+      onSelect={(option) => {
+        const entries = stash.list()
+        const entry = entries[option.value]
+        if (entry) {
+          stash.remove(option.value)
+          props.onSelect(entry)
+        }
+        dialog.clear()
+      }}
+      keybind={[
+        {
+          keybind: Keybind.parse("ctrl+d")[0],
+          title: "delete",
+          onTrigger: (option) => {
+            if (toDelete() === option.value) {
+              stash.remove(option.value)
+              setToDelete(undefined)
+              return
+            }
+            setToDelete(option.value)
+          },
+        },
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,162 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useSync } from "@tui/context/sync"
+import { For, Match, Switch, Show, createMemo } from "solid-js"
+
+export type DialogStatusProps = {}
+
+export function DialogStatus() {
+  const sync = useSync()
+  const { theme } = useTheme()
+
+  const enabledFormatters = createMemo(() => sync.data.formatter.filter((f) => f.enabled))
+
+  const plugins = createMemo(() => {
+    const list = sync.data.config.plugin ?? []
+    const result = list.map((value) => {
+      if (value.startsWith("file://")) {
+        const path = value.substring("file://".length)
+        const parts = path.split("/")
+        const filename = parts.pop() || path
+        if (!filename.includes(".")) return { name: filename }
+        const basename = filename.split(".")[0]
+        if (basename === "index") {
+          const dirname = parts.pop()
+          const name = dirname || basename
+          return { name }
+        }
+        return { name: basename }
+      }
+      const index = value.lastIndexOf("@")
+      if (index <= 0) return { name: value, version: "latest" }
+      const name = value.substring(0, index)
+      const version = value.substring(index + 1)
+      return { name, version }
+    })
+    return result.toSorted((a, b) => a.name.localeCompare(b.name))
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme.text} attributes={TextAttributes.BOLD}>
+          Status
+        </text>
+        <text fg={theme.textMuted}>esc</text>
+      </box>
+      <Show when={Object.keys(sync.data.mcp).length > 0} fallback={<text fg={theme.text}>No MCP Servers</text>}>
+        <box>
+          <text fg={theme.text}>{Object.keys(sync.data.mcp).length} MCP Servers</text>
+          <For each={Object.entries(sync.data.mcp)}>
+            {([key, item]) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: (
+                      {
+                        connected: theme.success,
+                        failed: theme.error,
+                        disabled: theme.textMuted,
+                        needs_auth: theme.warning,
+                        needs_client_registration: theme.error,
+                      } as Record<string, typeof theme.success>
+                    )[item.status],
+                  }}
+                >
+                  •
+                </text>
+                <text fg={theme.text} wrapMode="word">
+                  <b>{key}</b>{" "}
+                  <span style={{ fg: theme.textMuted }}>
+                    <Switch fallback={item.status}>
+                      <Match when={item.status === "connected"}>Connected</Match>
+                      <Match when={item.status === "failed" && item}>{(val) => val().error}</Match>
+                      <Match when={item.status === "disabled"}>Disabled in configuration</Match>
+                      <Match when={(item.status as string) === "needs_auth"}>
+                        Needs authentication (run: rird mcp auth {key})
+                      </Match>
+                      <Match when={(item.status as string) === "needs_client_registration" && item}>
+                        {(val) => (val() as { error: string }).error}
+                      </Match>
+                    </Switch>
+                  </span>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+      {sync.data.lsp.length > 0 && (
+        <box>
+          <text fg={theme.text}>{sync.data.lsp.length} LSP Servers</text>
+          <For each={sync.data.lsp}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: {
+                      connected: theme.success,
+                      error: theme.error,
+                    }[item.status],
+                  }}
+                >
+                  •
+                </text>
+                <text fg={theme.text} wrapMode="word">
+                  <b>{item.id}</b> <span style={{ fg: theme.textMuted }}>{item.root}</span>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      )}
+      <Show when={enabledFormatters().length > 0} fallback={<text fg={theme.text}>No Formatters</text>}>
+        <box>
+          <text fg={theme.text}>{enabledFormatters().length} Formatters</text>
+          <For each={enabledFormatters()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: theme.success,
+                  }}
+                >
+                  •
+                </text>
+                <text wrapMode="word" fg={theme.text}>
+                  <b>{item.name}</b>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+      <Show when={plugins().length > 0} fallback={<text fg={theme.text}>No Plugins</text>}>
+        <box>
+          <text fg={theme.text}>{plugins().length} Plugins</text>
+          <For each={plugins()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: theme.success,
+                  }}
+                >
+                  •
+                </text>
+                <text wrapMode="word" fg={theme.text}>
+                  <b>{item.name}</b>
+                  {item.version && <span style={{ fg: theme.textMuted }}> @{item.version}</span>}
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+    </box>
+  )
+}

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

@@ -0,0 +1,44 @@
+import { createMemo, createResource } from "solid-js"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "@tui/context/sdk"
+import { createStore } from "solid-js/store"
+
+export function DialogTag(props: { onSelect?: (value: string) => void }) {
+  const sdk = useSDK()
+  const dialog = useDialog()
+
+  const [store] = createStore({
+    filter: "",
+  })
+
+  const [files] = createResource(
+    () => [store.filter],
+    async () => {
+      const result = await sdk.client.find.files({
+        query: store.filter,
+      })
+      if (result.error) return []
+      const sliced = (result.data ?? []).slice(0, 5)
+      return sliced
+    },
+  )
+
+  const options = createMemo(() =>
+    (files() ?? []).map((file) => ({
+      value: file,
+      title: file,
+    })),
+  )
+
+  return (
+    <DialogSelect
+      title="Autocomplete"
+      options={options()}
+      onSelect={(option) => {
+        props.onSelect?.(option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/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, onMount } 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)
+      }}
+    />
+  )
+}