cerebras-cli 1.0.0

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

@@ -0,0 +1,39 @@
+import { Bus } from "@/bus"
+import z from "zod"
+
+export const TuiEvent = {
+  PromptAppend: Bus.event("tui.prompt.append", z.object({ text: z.string() })),
+  CommandExecute: Bus.event(
+    "tui.command.execute",
+    z.object({
+      command: z.union([
+        z.enum([
+          "session.list",
+          "session.new",
+          "session.share",
+          "session.interrupt",
+          "session.compact",
+          "session.page.up",
+          "session.page.down",
+          "session.half.page.up",
+          "session.half.page.down",
+          "session.first",
+          "session.last",
+          "prompt.clear",
+          "prompt.submit",
+          "agent.cycle",
+        ]),
+        z.string(),
+      ]),
+    }),
+  ),
+  ToastShow: Bus.event(
+    "tui.toast.show",
+    z.object({
+      title: z.string().optional(),
+      message: z.string(),
+      variant: z.enum(["info", "success", "warning", "error"]),
+      duration: z.number().default(5000).optional().describe("Duration in milliseconds"),
+    }),
+  ),
+}

package/src/cli/cmd/tui/routes/home.tsx

@@ -0,0 +1,104 @@
+import { Prompt, type PromptRef } from "@tui/component/prompt"
+import { createMemo, Match, onMount, Show, Switch } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { Logo } from "../component/logo"
+import { Locale } from "@/util/locale"
+import { useSync } from "../context/sync"
+import { Toast } from "../ui/toast"
+import { useArgs } from "../context/args"
+import { useDirectory } from "../context/directory"
+import { useRoute, useRouteData } from "@tui/context/route"
+import { usePromptRef } from "../context/prompt"
+import { Installation } from "@/installation"
+
+// TODO: what is the best way to do this?
+let once = false
+
+export function Home() {
+  const sync = useSync()
+  const { theme } = useTheme()
+  const route = useRouteData("home")
+  const promptRef = usePromptRef()
+  const mcp = createMemo(() => Object.keys(sync.data.mcp).length > 0)
+  const mcpError = createMemo(() => {
+    return Object.values(sync.data.mcp).some((x) => x.status === "failed")
+  })
+
+  const connectedMcpCount = createMemo(() => {
+    return Object.values(sync.data.mcp).filter((x) => x.status === "connected").length
+  })
+
+  const Hint = (
+    <Show when={connectedMcpCount() > 0}>
+      <box flexShrink={0} flexDirection="row" gap={1}>
+        <text fg={theme.text}>
+          <Switch>
+            <Match when={mcpError()}>
+              <span style={{ fg: theme.error }}>•</span> mcp errors{" "}
+              <span style={{ fg: theme.textMuted }}>ctrl+x s</span>
+            </Match>
+            <Match when={true}>
+              <span style={{ fg: theme.success }}>•</span>{" "}
+              {Locale.pluralize(connectedMcpCount(), "{} mcp server", "{} mcp servers")}
+            </Match>
+          </Switch>
+        </text>
+      </box>
+    </Show>
+  )
+
+  let prompt: PromptRef
+  const args = useArgs()
+  onMount(() => {
+    if (once) return
+    if (route.initialPrompt) {
+      prompt.set(route.initialPrompt)
+      once = true
+    } else if (args.prompt) {
+      prompt.set({ input: args.prompt, parts: [] })
+      once = true
+    }
+  })
+  const directory = useDirectory()
+
+  return (
+    <>
+      <box flexGrow={1} justifyContent="center" alignItems="center" paddingLeft={2} paddingRight={2} gap={1}>
+        <Logo />
+        <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1}>
+          <Prompt
+            ref={(r) => {
+              prompt = r
+              promptRef.set(r)
+            }}
+            hint={Hint}
+          />
+        </box>
+        <Toast />
+      </box>
+      <box paddingTop={1} paddingBottom={1} paddingLeft={2} paddingRight={2} flexDirection="row" flexShrink={0} gap={2}>
+        <text fg={theme.textMuted}>{directory()}</text>
+        <box gap={1} flexDirection="row" flexShrink={0}>
+          <Show when={mcp()}>
+            <text fg={theme.text}>
+              <Switch>
+                <Match when={mcpError()}>
+                  <span style={{ fg: theme.error }}>⊙ </span>
+                </Match>
+                <Match when={true}>
+                  <span style={{ fg: theme.success }}>⊙ </span>
+                </Match>
+              </Switch>
+              {connectedMcpCount()} MCP
+            </text>
+            <text fg={theme.textMuted}>/status</text>
+          </Show>
+        </box>
+        <box flexGrow={1} />
+        <box flexShrink={0}>
+          <text fg={theme.textMuted}>{Installation.VERSION}</text>
+        </box>
+      </box>
+    </>
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-message.tsx

@@ -0,0 +1,93 @@
+import { createMemo } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { Clipboard } from "@tui/util/clipboard"
+import type { PromptInfo } from "@tui/component/prompt/history"
+
+export function DialogMessage(props: {
+  messageID: string
+  sessionID: string
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const sdk = useSDK()
+  const message = createMemo(() => sync.data.message[props.sessionID]?.find((x) => x.id === props.messageID))
+  const route = useRoute()
+
+  return (
+    <DialogSelect
+      title="Message Actions"
+      options={[
+        {
+          title: "Revert",
+          value: "session.revert",
+          description: "undo messages and file changes",
+          onSelect: (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            sdk.client.session.revert({
+              sessionID: props.sessionID,
+              messageID: msg.id,
+            })
+
+            if (props.setPrompt) {
+              const parts = sync.data.part[msg.id]
+              const promptInfo = parts.reduce(
+                (agg, part) => {
+                  if (part.type === "text") {
+                    if (!part.synthetic) agg.input += part.text
+                  }
+                  if (part.type === "file") agg.parts.push(part)
+                  return agg
+                },
+                { input: "", parts: [] as PromptInfo["parts"] },
+              )
+              props.setPrompt(promptInfo)
+            }
+
+            dialog.clear()
+          },
+        },
+        {
+          title: "Copy",
+          value: "message.copy",
+          description: "copy message text to clipboard",
+          onSelect: async (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            const parts = sync.data.part[msg.id]
+            const text = parts.reduce((agg, part) => {
+              if (part.type === "text" && !part.synthetic) {
+                agg += part.text
+              }
+              return agg
+            }, "")
+
+            await Clipboard.copy(text)
+            dialog.clear()
+          },
+        },
+        {
+          title: "Fork",
+          value: "session.fork",
+          description: "create a new session",
+          onSelect: async (dialog) => {
+            const result = await sdk.client.session.fork({
+              sessionID: props.sessionID,
+              messageID: props.messageID,
+            })
+            route.navigate({
+              sessionID: result.data!.id,
+              type: "session",
+            })
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-timeline.tsx

@@ -0,0 +1,37 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@opencode-ai/sdk/v2"
+import { Locale } from "@/util/locale"
+import { DialogMessage } from "./dialog-message"
+import { useDialog } from "../../ui/dialog"
+
+export function DialogTimeline(props: { sessionID: string; onMove: (messageID: string) => void }) {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find((x) => x.type === "text" && !x.synthetic) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: (dialog) => {
+          dialog.replace(() => <DialogMessage messageID={message.id} sessionID={props.sessionID} />)
+        },
+      })
+    }
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Timeline" options={options()} />
+}

package/src/cli/cmd/tui/routes/session/footer.tsx

@@ -0,0 +1,76 @@
+import { createMemo, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { useTheme } from "../../context/theme"
+import { useSync } from "../../context/sync"
+import { useDirectory } from "../../context/directory"
+import { useConnected } from "../../component/dialog-model"
+import { createStore } from "solid-js/store"
+
+export function Footer() {
+  const { theme } = useTheme()
+  const sync = useSync()
+  const mcp = createMemo(() => Object.keys(sync.data.mcp))
+  const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
+  const lsp = createMemo(() => Object.keys(sync.data.lsp))
+  const directory = useDirectory()
+  const connected = useConnected()
+
+  const [store, setStore] = createStore({
+    welcome: false,
+  })
+
+  onMount(() => {
+    function tick() {
+      if (connected()) return
+      if (!store.welcome) {
+        setStore("welcome", true)
+        timeout = setTimeout(() => tick(), 5000)
+        return
+      }
+
+      if (store.welcome) {
+        setStore("welcome", false)
+        timeout = setTimeout(() => tick(), 10_000)
+        return
+      }
+    }
+    let timeout = setTimeout(() => tick(), 10_000)
+
+    onCleanup(() => {
+      clearTimeout(timeout)
+    })
+  })
+
+  return (
+    <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
+      <text fg={theme.textMuted}>{directory()}</text>
+      <box gap={2} flexDirection="row" flexShrink={0}>
+        <Switch>
+          <Match when={store.welcome}>
+            <text fg={theme.text}>
+              Get started <span style={{ fg: theme.textMuted }}>/connect</span>
+            </text>
+          </Match>
+          <Match when={connected()}>
+            <text fg={theme.text}>
+              <span style={{ fg: theme.success }}>•</span> {lsp().length} LSP
+            </text>
+            <Show when={mcp().length}>
+              <text fg={theme.text}>
+                <Switch>
+                  <Match when={mcpError()}>
+                    <span style={{ fg: theme.error }}>⊙ </span>
+                  </Match>
+                  <Match when={true}>
+                    <span style={{ fg: theme.success }}>⊙ </span>
+                  </Match>
+                </Switch>
+                {mcp().length} MCP
+              </text>
+            </Show>
+            <text fg={theme.textMuted}>/status</text>
+          </Match>
+        </Switch>
+      </box>
+    </box>
+  )
+}

package/src/cli/cmd/tui/routes/session/header.tsx

@@ -0,0 +1,183 @@
+import { type Accessor, createMemo, Match, Show, Switch } from "solid-js"
+import { useRouteData } from "@tui/context/route"
+import { useSync } from "@tui/context/sync"
+import { pipe, sumBy } from "remeda"
+import { useTheme } from "@tui/context/theme"
+import { SplitBorder, EmptyBorder } from "@tui/component/border"
+import type { AssistantMessage, Message, Session } from "@opencode-ai/sdk/v2"
+import { useDirectory } from "../../context/directory"
+import { useKeybind } from "../../context/keybind"
+
+const Title = (props: { session: Accessor<Session> }) => {
+  const { theme } = useTheme()
+  return (
+    <text fg={theme.text}>
+      <span style={{ bold: true }}>#</span> <span style={{ bold: true }}>{props.session().title}</span>
+    </text>
+  )
+}
+
+// Compact cache indicator for header
+const CacheIndicator = (props: { messages: Accessor<Message[]> }) => {
+  const { theme } = useTheme()
+
+  const cacheStats = createMemo(() => {
+    const assistants = props.messages().filter((m) => m.role === "assistant") as AssistantMessage[]
+    let totalCachedTokens = 0
+    let totalPromptTokens = 0
+    for (const msg of assistants) {
+      const cached = msg.tokens.cache.read
+      const total = msg.tokens.input + cached
+      totalCachedTokens += cached
+      totalPromptTokens += total
+    }
+    const hitRate = totalPromptTokens > 0 ? (totalCachedTokens / totalPromptTokens) * 100 : 0
+    return { hitRate, hasData: totalPromptTokens > 0 }
+  })
+
+  // Pie/wheel indicator
+  const pieIndicator = createMemo(() => {
+    const rate = cacheStats().hitRate
+    if (rate >= 87.5) return "●"
+    if (rate >= 62.5) return "◕"
+    if (rate >= 37.5) return "◑"
+    if (rate >= 12.5) return "◔"
+    return "○"
+  })
+
+  // Minesweeper-style face indicator
+  const faceIndicator = createMemo(() => {
+    const rate = cacheStats().hitRate
+    if (rate >= 70) return "😊" // Happy - good cache
+    if (rate >= 40) return "😐" // Neutral - okay cache
+    return "😟" // Worried - bad cache
+  })
+
+  const rateColor = createMemo(() => {
+    const rate = cacheStats().hitRate
+    if (rate >= 70) return theme.success
+    if (rate >= 40) return theme.warning
+    return theme.error
+  })
+
+  // Progress bar using block characters
+  const barWidth = 12
+  const filledBlocks = createMemo(() => Math.round((cacheStats().hitRate / 100) * barWidth))
+  const progressBar = createMemo(() => {
+    const filled = filledBlocks()
+    const empty = barWidth - filled
+    return "█".repeat(filled) + "░".repeat(empty)
+  })
+
+  return (
+    <Show when={cacheStats().hasData}>
+      <box flexDirection="row" gap={1} flexShrink={0} alignItems="center">
+        <text fg={theme.textMuted} flexShrink={0}>
+          <span style={{ fg: rateColor() }}>{pieIndicator()}</span> {cacheStats().hitRate.toFixed(0)}%
+        </text>
+        <text flexShrink={0}>
+          <span style={{ fg: rateColor() }}>{progressBar()}</span>
+        </text>
+      </box>
+    </Show>
+  )
+}
+
+const ContextInfo = (props: {
+  context: Accessor<string | undefined>
+  messages: Accessor<Message[]>
+}) => {
+  const { theme } = useTheme()
+  return (
+    <box flexDirection="row" gap={1} flexShrink={0}>
+      <CacheIndicator messages={props.messages} />
+      <Show when={props.context()}>
+        <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
+          • {props.context()}
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+export function Header() {
+  const route = useRouteData("session")
+  const sync = useSync()
+  const session = createMemo(() => sync.session.get(route.sessionID)!)
+  const messages = createMemo(() => sync.data.message[route.sessionID] ?? [])
+  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
+
+  const context = createMemo(() => {
+    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
+    if (!last) return
+    const total =
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+    const model = sync.data.provider.find((x) => x.id === last.providerID)?.models[last.modelID]
+    let result = total.toLocaleString()
+    if (model?.limit.context) {
+      result += "  " + Math.round((total / model.limit.context) * 100) + "%"
+    }
+    return result
+  })
+
+  const { theme } = useTheme()
+  const keybind = useKeybind()
+
+  return (
+    <box flexShrink={0}>
+      <box
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={1}
+        {...SplitBorder}
+        border={["left"]}
+        borderColor={theme.border}
+        flexShrink={0}
+        backgroundColor={theme.backgroundPanel}
+      >
+        <Switch>
+          <Match when={session()?.parentID}>
+            <box flexDirection="row" gap={2}>
+              <text fg={theme.text}>
+                <b>Subagent session</b>
+              </text>
+              <text fg={theme.text}>
+                Prev <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle_reverse")}</span>
+              </text>
+              <text fg={theme.text}>
+                Next <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle")}</span>
+              </text>
+              <box flexGrow={1} flexShrink={1} />
+              <ContextInfo context={context} messages={messages} />
+            </box>
+          </Match>
+          <Match when={true}>
+            <box flexDirection="row" justifyContent="space-between" gap={1}>
+              <Title session={session} />
+              <ContextInfo context={context} messages={messages} />
+            </box>
+            <Show when={shareEnabled()}>
+              <box flexDirection="row" justifyContent="space-between" gap={1}>
+                <box flexGrow={1} flexShrink={1}>
+                  <Switch>
+                    <Match when={session().share?.url}>
+                      <text fg={theme.textMuted} wrapMode="word">
+                        {session().share!.url}
+                      </text>
+                    </Match>
+                    <Match when={true}>
+                      <text fg={theme.text} wrapMode="word">
+                        /share <span style={{ fg: theme.textMuted }}>copy link</span>
+                      </text>
+                    </Match>
+                  </Switch>
+                </box>
+              </box>
+            </Show>
+          </Match>
+        </Switch>
+      </box>
+    </box>
+  )
+}