feat(tui): swap spinners to cli-spinners sand and aesthetic

CHANGELOG.md

@@ -7,6 +7,14 @@ file is the human-readable summary of what changed and why.
 
 ## Unreleased
 
+### TUI
+
+- **New spinners** — the in-progress tool/thinking spinner is now cli-spinners
+  "sand" (falling braille dots) and the busy footer spinner next to
+  `esc interrupt` is now cli-spinners "aesthetic" (a `▰▱` progress ramp),
+  still tinted with the active agent's accent color.
+  ([#129](https://github.com/quickbeard/codev-code/pull/129))
+
 ### CodeGraph
 
 - **`codev codegraph enable` wires the CodeGraph MCP server** — for standalone

DIVERGENCES.md

@@ -120,6 +120,8 @@ from the squash message first, or use a plain merge.
 | `packages/tui/src/component/prompt/index.tsx` | The busy-state footer arm (`status().type !== "idle"`) also renders `props.hint` after the `esc interrupt` text, gated on `status().type !== "retry"` | The hidden-sidebar hint (see the `routes/session/index.tsx` hint row) only rendered in the footer `Switch`'s idle fallback arm, so it vanished for the whole duration of a running turn — exactly when todos are being created. Retry keeps its `space-between` error row uncluttered. | Keep the `<Show when={status().type !== "retry"}>{props.hint}</Show>` line in the busy `Match` arm (additive); take upstream's surrounding changes. |
 | `packages/tui/src/component/prompt/index.tsx` | Removed the editor open-file label from the footer's right-side group and lifted the state behind it out of `Prompt`: the local `dismissedEditorSelectionKey` signal and the `editorContext`/`editorPath`/`editorSelectionLabel`/`editorFileLabel`/`editorFileLabelDisplay`/`editorContextLabelState` memos are gone, replaced by `useEditorLabel()` (fork-only `src/context/editor-label.tsx`) — `selection()` feeds the `prompt.editor_context.clear` `enabled` predicate and the submit-time editor part, `state()` replaces `editor.labelState()` there, and `dismiss()` replaces the local `dismissEditorContext`. The pure helpers `hasEditorRangeSelection`/`getEditorRangeLabel` moved to that context module and are imported back for `formatEditorContext`. | The label now lives in the sidebar footer (see its row above). The dismissal state had to move with it: the sidebar must label the *effective* selection — the one this file actually attaches on submit — or it would advertise context the prompt has dismissed and won't send. | Keep the deletions, the `useEditorLabel` import + its three call sites, and the helper import from `../../context/editor-label`; take upstream's surrounding changes. If upstream reworks the editor-context label, apply the change to `editorContextFileLabel` in the fork-only sidebar module rather than restoring the footer render. |
 | `packages/tui/src/routes/session/index.tsx`, `packages/tui/src/component/prompt/index.tsx` | Left accent border removed entirely: the user-message block's `border={["left"]}`/`borderColor` (agent accent)/`customBorderChars` props and the prompt input box's two bordered boxes (main box with its `bottomLeft: "╹"` char, plus the height-1 `╹` terminator row) are replaced with `paddingLeft={1}`; the now-unused `borderHighlight` memo and the `tint`/`SplitBorder` imports are removed from the prompt (the `highlight`/`agentMetaAlpha` memos stay — they still color the agent name label); the fork's in-scrollbox banner box gains `paddingLeft={1}` so the banner/tips left edge lines up with the prompt/message blocks' background edge (the removed border glyph used to occupy that aligned column) | No vertical accent line next to sent messages or the prompt — removed rather than recolored to the background because background-colored glyphs render oddly on some terminals (e.g. PowerShell). `paddingLeft={1}` keeps the same 1-column offset, so text alignment with other transcript blocks is unchanged. | Keep our `paddingLeft={1}` boxes and the `borderHighlight`/`tint`/`SplitBorder` removals; take upstream's surrounding changes. If upstream adds new accent-colored left borders to these blocks, replace them with `paddingLeft={1}` the same way. |
+| `packages/tui/src/component/spinner.tsx` | `SPINNER_FRAMES` swapped from cli-spinners "dots" (10 braille frames) to cli-spinners "sand" (35 braille frames, falling-sand animation); interval stays 80 ms | Fork visual identity for the shared `Spinner` component (in-progress tool/thinking rows, startup loading, session-list dialogs). | Keep our frames array; take upstream's surrounding changes. |
+| `packages/tui/src/component/prompt/index.tsx` | Busy footer spinner is cli-spinners "aesthetic" instead of the Knight Rider block scanner: module-level `FOOTER_FRAMES` (`▰▱` ramp, 7 chars, 8 frames), `spinnerDef` keeps the agent-color resolution but returns those frames plus a per-char color fn (`▰` → agent color, `▱` → `deriveInactiveColor(color, 0.3)`) instead of `createFrames`/`createColors` from `ui/spinner`, and the `<spinner>` interval is 120 ms (was 40; cli-spinners' stock 80 felt too fast). `ui/spinner.ts` itself is untouched; only its `deriveInactiveColor` import remains. | Fork visual identity for the busy indicator next to `esc interrupt`; the agent accent color still drives it. | Keep `FOOTER_FRAMES`, our `spinnerDef` body, the `deriveInactiveColor` import, and the 120 ms interval; take upstream's surrounding changes. If upstream reworks `spinnerDef`, re-apply the aesthetic frames + per-char color fn on top. |
 | `packages/tui/src/app.tsx` | Mounted `<EditorLabelProvider>` (fork-only `./context/editor-label`) immediately inside `<EditorContextProvider>` | The effective-editor-selection state is shared by the prompt and the sidebar footer, so it has to be provided above both. | Keep the import and the wrapper; take upstream's surrounding provider changes. If upstream moves `EditorContextProvider`, keep ours directly inside it. |
 | `packages/app/index.html` | `<title>` → "CoDev Code" | Web UI tab title. | Keep our title. |
 | `packages/app/src/pages/layout.tsx`, `packages/app/src/pages/layout-new.tsx` | Dropped the `<TabsInfoPopup />` mount and its import from both layouts (added upstream in v1.17.18; since v1.18.3 upstream itself removed the sibling `HelpButton`, so nothing is imported from `help-button` anymore) | `TabsInfoPopup` is a dev-channel-only "Introducing Tabs" promo whose `muted autoplay loop` `<video>` mounts on every layout render. The fork's Windows e2e runs on GPU-less GitHub-hosted runners (software GPU — see the runner-swap row), where continuous video decode wedges the GPU command buffer (`kTransientFailure`), making the whole app-e2e suite flaky and ~3–5× slower. It never ships (release builds use a non-`dev` `CODEV_CHANNEL`), so unmounting it costs users nothing. | Keep ours: don't re-add the `<TabsInfoPopup />` mount or restore it to the import. |

packages/tui/src/component/prompt/index.tsx

@@ -42,7 +42,7 @@ import type { AssistantMessage, FilePart, UserMessage } from "@opencode-ai/sdk/v
 import { Locale } from "../../util/locale"
 import { errorMessage } from "../../util/error"
 import { formatDuration } from "../../util/format"
-import { createColors, createFrames } from "../../ui/spinner"
+import { deriveInactiveColor } from "../../ui/spinner"
 import { useDialog } from "../../ui/dialog"
 import { DialogProvider as DialogProviderConnect } from "../dialog-provider"
 import { useConnected } from "../use-connected"
@@ -62,6 +62,18 @@ import { useLocation } from "../../context/location"
 
 registerOpencodeSpinner()
 
+// "aesthetic" from sindresorhus/cli-spinners (MIT)
+const FOOTER_FRAMES = [
+  "▰▱▱▱▱▱▱",
+  "▰▰▱▱▱▱▱",
+  "▰▰▰▱▱▱▱",
+  "▰▰▰▰▱▱▱",
+  "▰▰▰▰▰▱▱",
+  "▰▰▰▰▰▰▱",
+  "▰▰▰▰▰▰▰",
+  "▰▱▱▱▱▱▱",
+]
+
 export type PromptProps = {
   sessionID?: string
   visible?: boolean
@@ -1319,21 +1331,11 @@ export function Prompt(props: PromptProps) {
         ? (local.agent.list().find((a) => a.name === lastUserMessage()?.agent) ?? local.agent.current())
         : local.agent.current()
     const color = agent ? local.agent.color(agent.name) : theme.border
+    const inactive = deriveInactiveColor(color, 0.3)
     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,
-      }),
+      frames: FOOTER_FRAMES,
+      color: (frameIndex: number, charIndex: number) =>
+        FOOTER_FRAMES[frameIndex][charIndex] === "▰" ? color : inactive,
     }
   })
   const maxHeight = createMemo(() => tuiConfig.prompt?.max_height ?? Math.max(6, Math.floor(dimensions().height / 3)))
@@ -1498,7 +1500,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={spinnerDef().color} frames={spinnerDef().frames} interval={120} />
                     </Show>
                   </box>
                   <box flexDirection="row" gap={1} flexShrink={0}>

packages/tui/src/component/spinner.tsx

@@ -7,7 +7,44 @@ import { registerOpencodeSpinner } from "./register-spinner"
 
 registerOpencodeSpinner()
 
-export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+// "sand" from sindresorhus/cli-spinners (MIT)
+export const SPINNER_FRAMES = [
+  "⠁",
+  "⠂",
+  "⠄",
+  "⡀",
+  "⡈",
+  "⡐",
+  "⡠",
+  "⣀",
+  "⣁",
+  "⣂",
+  "⣄",
+  "⣌",
+  "⣔",
+  "⣤",
+  "⣥",
+  "⣦",
+  "⣮",
+  "⣶",
+  "⣷",
+  "⣿",
+  "⡿",
+  "⠿",
+  "⢟",
+  "⠟",
+  "⡛",
+  "⠛",
+  "⠫",
+  "⢋",
+  "⠋",
+  "⠍",
+  "⡉",
+  "⠉",
+  "⠑",
+  "⠡",
+  "⢁",
+]
 
 export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
   const { theme } = useTheme()