feat: replace external spinner with custom implementation

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -1,6 +1,5 @@
 import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, decodePasteBytes, t, dim, fg } from "@opentui/core"
 import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, on, Show, Switch, Match } from "solid-js"
-import "opentui-spinner/solid"
 import path from "path"
 import { Filesystem } from "@/util/filesystem"
 import { useLocal } from "@tui/context/local"
@@ -27,14 +26,14 @@ import { TuiEvent } from "../../event"
 import { iife } from "@/util/iife"
 import { Locale } from "@/util/locale"
 import { formatDuration } from "@/util/format"
-import { createColors, createFrames } from "../../ui/spinner.ts"
 import { useDialog } from "@tui/ui/dialog"
 import { DialogProvider as DialogProviderConnect } from "../dialog-provider"
 import { DialogAlert } from "../../ui/dialog-alert"
 import { useToast } from "../../ui/toast"
 import { useKV } from "../../context/kv"
 import { useTextareaKeybindings } from "../textarea-keybindings"
 import { DialogSkill } from "../dialog-skill"
+import { Spinner } from "../spinner"
 
 export type PromptProps = {
   sessionID?: string
@@ -820,26 +819,6 @@ export function Prompt(props: PromptProps) {
     return `Ask anything... "${list()[store.placeholder % list().length]}"`
   })
 
-  const spinnerDef = createMemo(() => {
-    const color = local.agent.color(local.agent.current().name)
-    return {
-      frames: createFrames({
-        color,
-        style: "blocks",
-        inactiveFactor: 0.6,
-        // enableFading: false,
-        minAlpha: 0.3,
-      }),
-      color: createColors({
-        color,
-        style: "blocks",
-        inactiveFactor: 0.6,
-        // enableFading: false,
-        minAlpha: 0.3,
-      }),
-    }
-  })
-
   return (
     <>
       <Autocomplete
@@ -1118,7 +1097,7 @@ export function Prompt(props: PromptProps) {
               <box flexShrink={0} flexDirection="row" gap={1}>
                 <box marginLeft={1}>
                   <Show when={kv.get("animations_enabled", true)} fallback={<text fg={theme.textMuted}>[⋯]</text>}>
-                    <spinner color={spinnerDef().color} frames={spinnerDef().frames} interval={40} />
+                    <Spinner color={local.agent.color(local.agent.current().name)} />
                   </Show>
                 </box>
                 <box flexDirection="row" gap={1} flexShrink={0}>

packages/opencode/src/cli/cmd/tui/component/spinner.tsx

@@ -1,20 +1,38 @@
-import { Show } from "solid-js"
+import { Show, createSignal, onCleanup, onMount } from "solid-js"
 import { useTheme } from "../context/theme"
 import { useKV } from "../context/kv"
 import type { JSX } from "@opentui/solid"
 import type { RGBA } from "@opentui/core"
-import "opentui-spinner/solid"
 
 const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
 
 export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
   const { theme } = useTheme()
   const kv = useKV()
   const color = () => props.color ?? theme.textMuted
+  const [idx, setIdx] = createSignal(0)
+
+  onMount(() => {
+    const id = setInterval(() => {
+      setIdx((v) => (v + 1) % frames.length)
+    }, 80)
+    onCleanup(() => clearInterval(id))
+  })
+
   return (
-    <Show when={kv.get("animations_enabled", true)} fallback={<text fg={color()}>⋯ {props.children}</text>}>
+    <Show
+      when={kv.get("animations_enabled", true)}
+      fallback={
+        <box flexDirection="row" gap={1}>
+          <text fg={color()}>⋯</text>
+          <Show when={props.children}>
+            <text fg={color()}>{props.children}</text>
+          </Show>
+        </box>
+      }
+    >
       <box flexDirection="row" gap={1}>
-        <spinner frames={frames} interval={80} color={color()} />
+        <text fg={color()}>{frames[idx()]}</text>
         <Show when={props.children}>
           <text fg={color()}>{props.children}</text>
         </Show>