cerebras-cli 1.0.5 → 1.0.138

package/src/cli/cmd/tui/attach.ts

@@ -0,0 +1,25 @@
+import { cmd } from "../cmd"
+import { tui } from "./app"
+
+export const AttachCommand = cmd({
+  command: "attach <url>",
+  describe: "attach to a running opencode server",
+  builder: (yargs) =>
+    yargs
+      .positional("url", {
+        type: "string",
+        describe: "http://localhost:4096",
+        demandOption: true,
+      })
+      .option("dir", {
+        type: "string",
+        description: "directory to run in",
+      }),
+  handler: async (args) => {
+    if (args.dir) process.chdir(args.dir)
+    await tui({
+      url: args.url,
+      args: {},
+    })
+  },
+})

package/src/cli/cmd/tui/component/border.tsx

@@ -0,0 +1,21 @@
+export const EmptyBorder = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+}
+
+export const SplitBorder = {
+  border: ["left" as const, "right" as const],
+  customBorderChars: {
+    ...EmptyBorder,
+    vertical: "┃",
+  },
+}

package/src/cli/cmd/tui/component/cerebras-onboarding.tsx

@@ -0,0 +1,225 @@
+import { createSignal, createEffect, Show, onMount, For } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { useSDK } from "../context/sdk"
+import { useTheme } from "../context/theme"
+import { TextAttributes, TextareaRenderable } from "@opentui/core"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
+import { useKV } from "../context/kv"
+import { useLocal } from "../context/local"
+
+const WELCOME_OPTIONS = [
+  { id: "setup", label: "Set up Cerebras API key", description: "Connect to the fastest inference" },
+  { id: "skip", label: "Skip for now", description: "Configure later" },
+] as const
+
+type WelcomeOptionId = typeof WELCOME_OPTIONS[number]["id"]
+
+export function CerebrasOnboarding(props: { onComplete: () => void }) {
+  const { theme } = useTheme()
+  const sdk = useSDK()
+  const sync = useSync()
+  const kv = useKV()
+  const local = useLocal()
+  const dimensions = useTerminalDimensions()
+  const [step, setStep] = createSignal<"welcome" | "apikey">("welcome")
+  const [selected, setSelected] = createSignal(0)
+  const [error, setError] = createSignal("")
+  const [loading, setLoading] = createSignal(false)
+  const [ready, setReady] = createSignal(false)
+  let textarea: TextareaRenderable
+
+  // Small delay before accepting input to avoid accidental dismiss
+  onMount(() => {
+    setTimeout(() => setReady(true), 300)
+  })
+
+  // Focus textarea when step changes to apikey
+  createEffect(() => {
+    if (step() === "apikey" && textarea) {
+      setTimeout(() => textarea.focus(), 50)
+    }
+  })
+
+  const markSeen = () => {
+    kv.set("hasSeenCerebrasOnboarding", true)
+  }
+
+  const complete = () => {
+    markSeen()
+    props.onComplete()
+  }
+
+  const selectOption = (optionId: WelcomeOptionId) => {
+    if (optionId === "setup") {
+      setStep("apikey")
+    } else {
+      complete()
+    }
+  }
+
+  useKeyboard((evt) => {
+    // Always prevent arrow keys from bubbling during onboarding
+    if (evt.name === "up" || evt.name === "down") {
+      evt.preventDefault?.()
+    }
+    
+    if (!ready()) return
+    if (loading()) return
+
+    if (step() === "welcome") {
+      if (evt.name === "up") {
+        setSelected((s) => (s > 0 ? s - 1 : WELCOME_OPTIONS.length - 1))
+      } else if (evt.name === "down") {
+        setSelected((s) => (s < WELCOME_OPTIONS.length - 1 ? s + 1 : 0))
+      } else if (evt.name === "return") {
+        evt.preventDefault?.()
+        selectOption(WELCOME_OPTIONS[selected()].id)
+      } else if (evt.name === "escape") {
+        evt.preventDefault?.()
+        complete()
+      }
+    } else if (step() === "apikey") {
+      if (evt.name === "escape") {
+        evt.preventDefault?.()
+        setStep("welcome")
+      }
+    }
+  })
+
+  const handleSubmit = async () => {
+    const key = textarea?.plainText?.trim() ?? ""
+    if (!key) {
+      setError("Please enter your API key")
+      return
+    }
+
+    setLoading(true)
+    setError("")
+
+    try {
+      await sdk.client.auth.set({
+        providerID: "cerebras",
+        auth: {
+          type: "api",
+          key: key,
+        },
+      })
+      await sdk.client.instance.dispose()
+      await sync.bootstrap()
+      
+      // Set Cerebras as the default model
+      local.model.set({ providerID: "cerebras", modelID: "zai-glm-4.7" }, { recent: true })
+      
+      complete()
+    } catch (e) {
+      setError("Failed to connect. Please check your API key.")
+      setLoading(false)
+    }
+  }
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width={dimensions().width}
+      height={dimensions().height}
+      backgroundColor={theme.background}
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+    >
+      <box
+        width={Math.min(60, dimensions().width - 4)}
+        backgroundColor={theme.backgroundPanel}
+        paddingTop={2}
+        paddingBottom={2}
+        paddingLeft={3}
+        paddingRight={3}
+        gap={1}
+      >
+        <Show when={step() === "welcome"}>
+          <box gap={1}>
+            <text fg={theme.primary} attributes={TextAttributes.BOLD}>
+              ◆ Welcome to Cerebras Code CLI
+            </text>
+            <text fg={theme.text}>
+              The fastest AI coding assistant, powered by Cerebras inference.
+            </text>
+            <box marginTop={1}>
+              <text fg={theme.textMuted}>Get your free API key at:</text>
+              <text fg={theme.accent}>https://cloud.cerebras.ai?utm-source=cli</text>
+            </box>
+            <box marginTop={2} gap={0}>
+              <For each={WELCOME_OPTIONS}>
+                {(option, index) => {
+                  const isSelected = () => selected() === index()
+                  return (
+                    <box
+                      flexDirection="row"
+                      backgroundColor={isSelected() ? theme.primary : undefined}
+                      paddingLeft={1}
+                      paddingRight={1}
+                    >
+                      <text fg={isSelected() ? theme.backgroundPanel : theme.text}>
+                        {isSelected() ? "▸ " : "  "}{option.label}
+                        <span style={{ fg: isSelected() ? theme.backgroundPanel : theme.textMuted }}>
+                          {" "}— {option.description}
+                        </span>
+                      </text>
+                    </box>
+                  )
+                }}
+              </For>
+            </box>
+            <box marginTop={1}>
+              <text fg={theme.textMuted}>
+                ↑↓ navigate • enter select • esc skip
+              </text>
+            </box>
+          </box>
+        </Show>
+
+        <Show when={step() === "apikey"}>
+          <box gap={1}>
+            <box flexDirection="row" justifyContent="space-between">
+              <text fg={theme.text} attributes={TextAttributes.BOLD}>
+                Enter Cerebras API Key
+              </text>
+              <text fg={theme.textMuted}>esc to go back</text>
+            </box>
+            <text fg={theme.textMuted}>
+              Paste your API key from cloud.cerebras.ai?utm-source=cli
+            </text>
+            <box marginTop={1}>
+              <textarea
+                ref={(r: TextareaRenderable) => (textarea = r)}
+                onSubmit={handleSubmit}
+                onContentChange={() => setError("")}
+                height={1}
+                keyBindings={[{ name: "return", action: "submit" }]}
+                placeholder="csk-..."
+                textColor={theme.text}
+                focusedTextColor={theme.text}
+                cursorColor={theme.text}
+                backgroundColor={theme.backgroundElement}
+                focusedBackgroundColor={theme.backgroundElement}
+              />
+            </box>
+            <Show when={error()}>
+              <text fg={theme.error}>{error()}</text>
+            </Show>
+            <Show when={loading()}>
+              <text fg={theme.textMuted}>Connecting...</text>
+            </Show>
+            <box marginTop={1}>
+              <text fg={theme.textMuted}>
+                Press <span style={{ fg: theme.text }}>enter</span> to connect
+              </text>
+            </box>
+          </box>
+        </Show>
+      </box>
+    </box>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { createMemo } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+export function DialogAgent() {
+  const local = useLocal()
+  const dialog = useDialog()
+
+  const options = createMemo(() =>
+    local.agent.list().map((item) => {
+      return {
+        value: item.name,
+        title: item.name,
+        description: item.builtIn ? "native" : item.description,
+      }
+    }),
+  )
+
+  return (
+    <DialogSelect
+      title="Select agent"
+      current={local.agent.current().name}
+      options={options()}
+      onSelect={(option) => {
+        local.agent.set(option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,124 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect, type DialogSelectOption, type DialogSelectRef } from "@tui/ui/dialog-select"
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+  type Accessor,
+  type ParentProps,
+} from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useKeybind } from "@tui/context/keybind"
+import type { KeybindsConfig } from "@opencode-ai/sdk/v2"
+
+type Context = ReturnType<typeof init>
+const ctx = createContext<Context>()
+
+export type CommandOption = DialogSelectOption & {
+  keybind?: keyof KeybindsConfig
+  suggested?: boolean
+}
+
+function init() {
+  const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
+  const [suspendCount, setSuspendCount] = createSignal(0)
+  const dialog = useDialog()
+  const keybind = useKeybind()
+  const options = createMemo(() => {
+    const all = registrations().flatMap((x) => x())
+    const suggested = all.filter((x) => x.suggested)
+    return [
+      ...suggested.map((x) => ({
+        ...x,
+        category: "Suggested",
+        value: "suggested." + x.value,
+      })),
+      ...all,
+    ].map((x) => ({
+      ...x,
+      footer: x.keybind ? keybind.print(x.keybind) : undefined,
+    }))
+  })
+  const suspended = () => suspendCount() > 0
+
+  useKeyboard((evt) => {
+    if (suspended()) return
+    if (dialog.stack.length > 0) return
+    for (const option of options()) {
+      if (option.keybind && keybind.match(option.keybind, evt)) {
+        evt.preventDefault()
+        option.onSelect?.(dialog)
+        return
+      }
+    }
+  })
+
+  const result = {
+    trigger(name: string, source?: "prompt") {
+      for (const option of options()) {
+        if (option.value === name) {
+          option.onSelect?.(dialog, source)
+          return
+        }
+      }
+    },
+    keybinds(enabled: boolean) {
+      setSuspendCount((count) => count + (enabled ? -1 : 1))
+    },
+    suspended,
+    show() {
+      dialog.replace(() => <DialogCommand options={options()} />)
+    },
+    register(cb: () => CommandOption[]) {
+      const results = createMemo(cb)
+      setRegistrations((arr) => [results, ...arr])
+      onCleanup(() => {
+        setRegistrations((arr) => arr.filter((x) => x !== results))
+      })
+    },
+    get options() {
+      return options()
+    },
+  }
+  return result
+}
+
+export function useCommandDialog() {
+  const value = useContext(ctx)
+  if (!value) {
+    throw new Error("useCommandDialog must be used within a CommandProvider")
+  }
+  return value
+}
+
+export function CommandProvider(props: ParentProps) {
+  const value = init()
+  const dialog = useDialog()
+  const keybind = useKeybind()
+
+  useKeyboard((evt) => {
+    if (value.suspended()) return
+    if (dialog.stack.length > 0) return
+    if (evt.defaultPrevented) return
+    if (keybind.match("command_list", evt)) {
+      evt.preventDefault()
+      dialog.replace(() => <DialogCommand options={value.options} />)
+      return
+    }
+  })
+
+  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
+}
+
+function DialogCommand(props: { options: CommandOption[] }) {
+  let ref: DialogSelectRef<string>
+  return (
+    <DialogSelect
+      ref={(r) => (ref = r)}
+      title="Commands"
+      options={props.options.filter((x) => !ref?.filter || !x.value.startsWith("suggested."))}
+    />
+  )
+}

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

@@ -0,0 +1,160 @@
+import { TextareaRenderable, TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+import { createSignal, onMount } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { Installation } from "@/installation"
+
+const FEEDBACK_ENDPOINT = "https://cerebras-code-cli-feedback.kevin-taylor-d8d.workers.dev"
+
+export interface FeedbackMetadata {
+  error?: {
+    name?: string
+    message?: string
+    data?: unknown
+  }
+  sessionID?: string
+  providerID?: string
+  modelID?: string
+  [key: string]: unknown
+}
+
+export function DialogFeedback(props: { onClose: () => void; metadata?: FeedbackMetadata }) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  let textarea: TextareaRenderable
+  const [status, setStatus] = createSignal<"idle" | "sending" | "success" | "error">("idle")
+  const [errorMsg, setErrorMsg] = createSignal("")
+  const [focused, setFocused] = createSignal<"textarea" | "button">("textarea")
+
+  // Note: Global keybinds are automatically disabled when dialog.stack.length > 0
+  // (see CommandProvider in dialog-command.tsx)
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape") {
+      props.onClose()
+    }
+    if (evt.name === "tab") {
+      evt.preventDefault?.()
+      if (focused() === "textarea") {
+        setFocused("button")
+        textarea?.blur()
+      } else {
+        setFocused("textarea")
+        textarea?.focus()
+      }
+    }
+    if (evt.name === "return") {
+      if (focused() === "button") {
+        submit()
+      } else {
+        // Manually insert newline when textarea is focused
+        textarea?.insertText("\n")
+      }
+    }
+  })
+
+  onMount(() => {
+    dialog.setSize("medium")
+    setTimeout(() => {
+      textarea?.focus()
+    }, 1)
+  })
+
+  const submit = async () => {
+    const message = textarea.plainText.trim()
+    if (!message) return
+
+    setStatus("sending")
+    try {
+      const payload: Record<string, unknown> = {
+        message,
+        version: Installation.VERSION,
+        os: process.platform,
+      }
+
+      // Include metadata if provided - flatten for easier email formatting
+      if (props.metadata) {
+        // Flatten metadata into top-level fields for easier email display
+        if (props.metadata.error) {
+          payload.errorName = props.metadata.error.name
+          payload.errorMessage = props.metadata.error.message
+          if (props.metadata.error.data && typeof props.metadata.error.data === "object") {
+            const errorData = props.metadata.error.data as Record<string, unknown>
+            payload.errorStatusCode = errorData.statusCode
+            payload.errorIsRetryable = errorData.isRetryable
+            payload.errorResponseBody = errorData.responseBody
+          }
+        }
+        payload.sessionID = props.metadata.sessionID
+        payload.providerID = props.metadata.providerID
+        payload.modelID = props.metadata.modelID
+        
+        // Also include full metadata object for detailed debugging
+        payload.metadata = props.metadata
+      }
+
+      const res = await fetch(FEEDBACK_ENDPOINT, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      })
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`)
+      }
+
+      setStatus("success")
+      setTimeout(() => props.onClose(), 1500)
+    } catch (e) {
+      setStatus("error")
+      setErrorMsg(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD}>Send Feedback</text>
+        <text fg={theme.textMuted}>esc to close</text>
+      </box>
+
+      {status() === "idle" || status() === "sending" ? (
+        <box gap={1}>
+          <text fg={theme.textMuted}>Describe your feedback, bug, or feature request:</text>
+          <textarea
+            height={5}
+            ref={(val: TextareaRenderable) => (textarea = val)}
+            placeholder="Your feedback..."
+            textColor={theme.text}
+            focusedTextColor={theme.text}
+            cursorColor={theme.text}
+          />
+          <box paddingBottom={1} flexDirection="row" justifyContent="space-between">
+            <text fg={theme.textMuted}>tab to switch focus</text>
+            <box
+              paddingLeft={2}
+              paddingRight={2}
+              backgroundColor={focused() === "button" ? theme.primary : theme.backgroundElement}
+              onMouseUp={submit}
+            >
+              <text fg={focused() === "button" ? theme.selectedListItemText : theme.text}>
+                {status() === "sending" ? "Sending..." : "Submit"}
+              </text>
+            </box>
+          </box>
+        </box>
+      ) : status() === "success" ? (
+        <box padding={1}>
+          <text fg={theme.success}>✓ Feedback sent! Thank you.</text>
+        </box>
+      ) : (
+        <box padding={1} gap={1}>
+          <text fg={theme.error}>✗ Failed to send: {errorMsg()}</text>
+          <text fg={theme.textMuted}>Please try again or email support directly.</text>
+        </box>
+      )}
+    </box>
+  )
+}
+

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