dfcode 1.0.0 → 1.0.2

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

@@ -1,256 +0,0 @@
-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 "@dfcode/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> = {
-  dfcode: 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: {
-            dfcode: "(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() {
-            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 === "dfcode" ? (
-          <box gap={1}>
-            <text fg={theme.textMuted}>
-              DFCode 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://dfcode.ai/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/packages/dfcode/src/cli/cmd/tui/component/dialog-session-list.tsx

@@ -1,114 +0,0 @@
-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 { createMemo, createSignal, createResource, onMount, Show } from "solid-js"
-import { Locale } from "@/util/locale"
-import { useKeybind } from "../context/keybind"
-import { useTheme } from "../context/theme"
-import { useSDK } from "../context/sdk"
-import { DialogSessionRename } from "./dialog-session-rename"
-import { useKV } from "../context/kv"
-import { createDebouncedSignal } from "../util/signal"
-import "opentui-spinner/solid"
-
-export function DialogSessionList() {
-  const dialog = useDialog()
-  const route = useRoute()
-  const sync = useSync()
-  const keybind = useKeybind()
-  const { theme } = useTheme()
-  const sdk = useSDK()
-  const kv = useKV()
-
-  const [toDelete, setToDelete] = createSignal<string>()
-  const [search, setSearch] = createDebouncedSignal("", 150)
-
-  const [searchResults] = createResource(search, async (query) => {
-    if (!query) return undefined
-    const result = await sdk.client.session.list({ search: query, limit: 30 })
-    return result.data ?? []
-  })
-
-  const currentSessionID = createMemo(() => (route.data.type === "session" ? route.data.sessionID : undefined))
-
-  const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
-
-  const sessions = createMemo(() => searchResults() ?? sync.data.session)
-
-  const options = createMemo(() => {
-    const today = new Date().toDateString()
-    return sessions()
-      .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 ${keybind.print("session_delete")} again to confirm` : x.title,
-          bg: isDeleting ? theme.error : undefined,
-          value: x.id,
-          category,
-          footer: Locale.time(x.time.updated),
-          gutter: isWorking ? (
-            <Show when={kv.get("animations_enabled", true)} fallback={<text fg={theme.textMuted}>[⋯]</text>}>
-              <spinner frames={spinnerFrames} interval={80} color={theme.primary} />
-            </Show>
-          ) : undefined,
-        }
-      })
-  })
-
-  onMount(() => {
-    dialog.setSize("large")
-  })
-
-  return (
-    <DialogSelect
-      title="Sessions"
-      options={options()}
-      skipFilter={true}
-      current={currentSessionID()}
-      onFilter={setSearch}
-      onMove={() => {
-        setToDelete(undefined)
-      }}
-      onSelect={(option) => {
-        route.navigate({
-          type: "session",
-          sessionID: option.value,
-        })
-        dialog.clear()
-      }}
-      keybind={[
-        {
-          keybind: keybind.all.session_delete?.[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.all.session_rename?.[0],
-          title: "rename",
-          onTrigger: async (option) => {
-            dialog.replace(() => <DialogSessionRename session={option.value} />)
-          },
-        },
-      ]}
-    />
-  )
-}

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

@@ -1,31 +0,0 @@
-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/packages/dfcode/src/cli/cmd/tui/component/dialog-stash.tsx

@@ -1,87 +0,0 @@
-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 { useTheme } from "../context/theme"
-import { useKeybind } from "../context/keybind"
-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 keybind = useKeybind()
-
-  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 ${keybind.print("stash_delete")} 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.all.stash_delete?.[0],
-          title: "delete",
-          onTrigger: (option) => {
-            if (toDelete() === option.value) {
-              stash.remove(option.value)
-              setToDelete(undefined)
-              return
-            }
-            setToDelete(option.value)
-          },
-        },
-      ]}
-    />
-  )
-}

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

@@ -1,164 +0,0 @@
-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"
-import { Installation } from "@/installation"
-
-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>
-      <text fg={theme.textMuted}>DFCode v{Installation.VERSION}</text>
-      <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: dfcode 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/packages/dfcode/src/cli/cmd/tui/component/dialog-tag.tsx

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