spinnerverb 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ideademic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# spinnerverb
+
+Interactive TUI to customize [Claude Code](https://claude.ai/code) spinner verbs.
+
+```
+npx spinnerverb
+```
+
+## What it does
+
+Claude Code shows animated verbs while working ("Thinking", "Reasoning", "Pondering", etc.). This tool lets you customize them through an interactive terminal UI.
+
+- **Append** your verbs alongside the defaults, or **replace** them entirely
+- Edit globally (`~/.claude/settings.json`) or per-project (`.claude/settings.json`)
+- Add, edit, delete, and clear verbs with instant save
+
+## Screenshots
+
+```
+███ spinnerverb
+Scope: Global (~/.claude)  │  ~/.claude/settings.json
+
+╭──────────────────────────────────────────────────────╮
+│ APPEND — your verbs are added alongside the defaults │
+╰──────────────────────────────────────────────────────╯
+▶ Mode: append
+  ───
+  Vibing
+  Manifesting
+  Yapping
+  ───
+  + Add verb
+  Clear all verbs
+
+↑↓/jk navigate  enter select/edit  d delete  q quit
+```
+
+## Controls
+
+| Key | Action |
+|---|---|
+| `↑↓` / `jk` | Navigate |
+| `Enter` / `Space` | Select / edit |
+| `d` | Delete verb |
+| `q` / `Esc` | Quit |
+
+## How it works
+
+Reads and writes the `spinnerVerbs` field in your Claude Code `settings.json`:
+
+```json
+{
+  "spinnerVerbs": {
+    "mode": "append",
+    "verbs": ["Vibing", "Manifesting", "Yapping"]
+  }
+}
+```
+
+- `"append"` — your verbs are added to Claude Code's built-in set
+- `"replace"` — only your verbs are used
+
+## Settings file locations
+
+| Scope | File | Committed |
+|---|---|---|
+| Global | `~/.claude/settings.json` | N/A |
+| Project | `.claude/settings.json` | Yes |
+| Project (local) | `.claude/settings.local.json` | No |
+
+## License
+
+MIT

package/index.mjs

@@ -0,0 +1,471 @@
+#!/usr/bin/env node
+import React, { useState, useEffect } from "react";
+import { render, Box, Text, useInput, useApp } from "ink";
+import TextInput from "ink-text-input";
+import fs from "fs";
+import path from "path";
+import os from "os";
+
+const GLOBAL_SETTINGS = path.join(os.homedir(), ".claude", "settings.json");
+const LOCAL_SETTINGS = path.join(process.cwd(), ".claude", "settings.json");
+const LOCAL_SETTINGS_LOCAL = path.join(
+  process.cwd(),
+  ".claude",
+  "settings.local.json"
+);
+
+const DEFAULT_VERBS = [
+  "Thinking",
+  "Reasoning",
+  "Considering",
+  "Analyzing",
+  "Synthesizing",
+  "Evaluating",
+  "Processing",
+  "Computing",
+  "Reflecting",
+  "Examining",
+  "Contemplating",
+  "Deliberating",
+  "Pondering",
+  "Working",
+];
+
+function readSettings(filePath) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath, "utf8"));
+  } catch {
+    return {};
+  }
+}
+
+function writeSettings(filePath, settings) {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(filePath, JSON.stringify(settings, null, 2) + "\n");
+}
+
+function getSpinnerVerbs(settings) {
+  return settings.spinnerVerbs || null;
+}
+
+// ── Screens ──
+
+const SCREEN = {
+  SCOPE: "scope",
+  MAIN: "main",
+  ADD: "add",
+  CONFIRM_DELETE: "confirm_delete",
+  CONFIRM_CLEAR: "confirm_clear",
+};
+
+function Header({ scope, filePath }) {
+  return React.createElement(
+    Box,
+    { flexDirection: "column", marginBottom: 1 },
+    React.createElement(
+      Text,
+      { bold: true, color: "cyan" },
+      "\u2588\u2588\u2588 spinnerverb"
+    ),
+    React.createElement(
+      Text,
+      { dimColor: true },
+      `Scope: ${scope === "global" ? "Global (~/.claude)" : "Project (./.claude)"}  \u2502  ${filePath}`
+    )
+  );
+}
+
+function ScopeScreen() {
+  const { exit } = useApp();
+  const [selected, setSelected] = useState(0);
+
+  const globalExists = fs.existsSync(GLOBAL_SETTINGS);
+  const localExists = fs.existsSync(LOCAL_SETTINGS);
+  const localLocalExists = fs.existsSync(LOCAL_SETTINGS_LOCAL);
+
+  const options = [
+    {
+      label: "Global",
+      desc: `~/.claude/settings.json ${globalExists ? "(exists)" : "(will create)"}`,
+      value: "global",
+      file: GLOBAL_SETTINGS,
+    },
+    {
+      label: "Project",
+      desc: `.claude/settings.json ${localExists ? "(exists)" : "(will create)"}`,
+      value: "local",
+      file: LOCAL_SETTINGS,
+    },
+    {
+      label: "Project (local)",
+      desc: `.claude/settings.local.json ${localLocalExists ? "(exists)" : "(will create)"}`,
+      value: "local-local",
+      file: LOCAL_SETTINGS_LOCAL,
+    },
+  ];
+
+  useInput((input, key) => {
+    if (key.upArrow || input === "k")
+      setSelected((s) => (s - 1 + options.length) % options.length);
+    if (key.downArrow || input === "j")
+      setSelected((s) => (s + 1) % options.length);
+    if (key.return) {
+      const opt = options[selected];
+      renderApp(opt.value, opt.file);
+    }
+    if (input === "q" || key.escape) exit();
+  });
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    React.createElement(
+      Box,
+      { marginBottom: 1, flexDirection: "column" },
+      React.createElement(
+        Text,
+        { bold: true, color: "cyan" },
+        "\u2588\u2588\u2588 spinnerverb"
+      ),
+      React.createElement(
+        Text,
+        { dimColor: true },
+        "Choose which settings file to edit"
+      )
+    ),
+    ...options.map((opt, i) =>
+      React.createElement(
+        Box,
+        { key: opt.value },
+        React.createElement(
+          Text,
+          {
+            color: i === selected ? "cyan" : undefined,
+            bold: i === selected,
+          },
+          `${i === selected ? "\u25b6 " : "  "}${opt.label}`
+        ),
+        React.createElement(Text, { dimColor: true }, `  ${opt.desc}`)
+      )
+    ),
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(
+        Text,
+        { dimColor: true },
+        "\u2191\u2193/jk navigate  enter select  q quit"
+      )
+    )
+  );
+}
+
+function MainApp({ scope, filePath }) {
+  const { exit } = useApp();
+  const [settings, setSettings] = useState(() => readSettings(filePath));
+  const [screen, setScreen] = useState(SCREEN.MAIN);
+  const [cursor, setCursor] = useState(0);
+  const [newVerb, setNewVerb] = useState("");
+  const [deleteIdx, setDeleteIdx] = useState(-1);
+  const [saved, setSaved] = useState(false);
+  const [editIdx, setEditIdx] = useState(-1);
+  const [editValue, setEditValue] = useState("");
+
+  const sv = getSpinnerVerbs(settings);
+  const mode = sv?.mode || "append";
+  const verbs = sv?.verbs || [];
+
+  function persist(newSettings) {
+    setSettings(newSettings);
+    writeSettings(filePath, newSettings);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 1500);
+  }
+
+  function updateSpinnerVerbs(newMode, newVerbs) {
+    const updated = { ...settings };
+    if (newVerbs.length === 0) {
+      delete updated.spinnerVerbs;
+    } else {
+      updated.spinnerVerbs = { mode: newMode, verbs: newVerbs };
+    }
+    persist(updated);
+  }
+
+  function toggleMode() {
+    const newMode = mode === "append" ? "replace" : "append";
+    updateSpinnerVerbs(newMode, verbs);
+  }
+
+  // ── Main screen ──
+  if (screen === SCREEN.MAIN) {
+    const menuItems = [
+      { type: "toggle", label: `Mode: ${mode}` },
+      { type: "separator" },
+      ...verbs.map((v, i) => ({ type: "verb", label: v, index: i })),
+      { type: "separator" },
+      { type: "add", label: "+ Add verb" },
+      { type: "clear", label: "Clear all verbs" },
+    ];
+
+    // Filter separators for cleanliness if no verbs
+    const items =
+      verbs.length === 0
+        ? menuItems.filter(
+            (m) => m.type !== "separator" && m.type !== "clear"
+          )
+        : menuItems;
+
+    useInput((input, key) => {
+      if (screen !== SCREEN.MAIN) return;
+      if (key.upArrow || input === "k")
+        setCursor((c) => {
+          let next = (c - 1 + items.length) % items.length;
+          while (items[next].type === "separator")
+            next = (next - 1 + items.length) % items.length;
+          return next;
+        });
+      if (key.downArrow || input === "j")
+        setCursor((c) => {
+          let next = (c + 1) % items.length;
+          while (items[next].type === "separator")
+            next = (next + 1) % items.length;
+          return next;
+        });
+      if (key.return || input === " ") {
+        const item = items[cursor];
+        if (item.type === "toggle") toggleMode();
+        if (item.type === "add") {
+          setNewVerb("");
+          setScreen(SCREEN.ADD);
+        }
+        if (item.type === "clear") setScreen(SCREEN.CONFIRM_CLEAR);
+        if (item.type === "verb") {
+          setEditIdx(item.index);
+          setEditValue(item.label);
+          setScreen(SCREEN.ADD);
+        }
+      }
+      if (input === "d" || key.delete) {
+        const item = items[cursor];
+        if (item.type === "verb") {
+          setDeleteIdx(item.index);
+          setScreen(SCREEN.CONFIRM_DELETE);
+        }
+      }
+      if (input === "q" || key.escape) exit();
+    });
+
+    // Clamp cursor
+    useEffect(() => {
+      if (cursor >= items.length) setCursor(Math.max(0, items.length - 1));
+      if (items[cursor]?.type === "separator")
+        setCursor((c) => Math.min(c + 1, items.length - 1));
+    }, [items.length]);
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      React.createElement(Header, { scope, filePath }),
+
+      // Mode info box
+      React.createElement(
+        Box,
+        {
+          borderStyle: "round",
+          borderColor: mode === "replace" ? "yellow" : "green",
+          paddingX: 1,
+          marginBottom: 1,
+        },
+        React.createElement(
+          Text,
+          null,
+          mode === "append"
+            ? React.createElement(
+                React.Fragment,
+                null,
+                React.createElement(
+                  Text,
+                  { color: "green", bold: true },
+                  "APPEND"
+                ),
+                React.createElement(
+                  Text,
+                  null,
+                  ` \u2014 your verbs are added alongside the ${DEFAULT_VERBS.length} defaults`
+                )
+              )
+            : React.createElement(
+                React.Fragment,
+                null,
+                React.createElement(
+                  Text,
+                  { color: "yellow", bold: true },
+                  "REPLACE"
+                ),
+                React.createElement(
+                  Text,
+                  null,
+                  " \u2014 only your verbs are used, defaults are hidden"
+                )
+              )
+        )
+      ),
+
+      // Menu items
+      ...items.map((item, i) => {
+        if (item.type === "separator")
+          return React.createElement(
+            Text,
+            { key: `sep-${i}`, dimColor: true },
+            "  \u2500\u2500\u2500"
+          );
+        const sel = i === cursor;
+        const pointer = sel ? "\u25b6 " : "  ";
+        let color = undefined;
+        if (item.type === "add") color = "green";
+        if (item.type === "clear") color = "red";
+        if (item.type === "toggle") color = "cyan";
+        return React.createElement(
+          Text,
+          { key: `item-${i}`, bold: sel, color: sel ? color || "cyan" : color },
+          `${pointer}${item.label}`
+        );
+      }),
+
+      // Footer
+      React.createElement(
+        Box,
+        { marginTop: 1, flexDirection: "column" },
+        saved
+          ? React.createElement(Text, { color: "green" }, "\u2713 Saved!")
+          : null,
+        React.createElement(
+          Text,
+          { dimColor: true },
+          "\u2191\u2193/jk navigate  enter select/edit  d delete  q quit"
+        )
+      )
+    );
+  }
+
+  // ── Add / Edit screen ──
+  if (screen === SCREEN.ADD) {
+    const isEdit = editIdx >= 0;
+
+    useInput((input, key) => {
+      if (screen !== SCREEN.ADD) return;
+      if (key.escape) {
+        setEditIdx(-1);
+        setEditValue("");
+        setScreen(SCREEN.MAIN);
+      }
+    });
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      React.createElement(Header, { scope, filePath }),
+      React.createElement(
+        Text,
+        { bold: true },
+        isEdit ? `Edit verb (was "${verbs[editIdx]}"):` : "Enter new verb:"
+      ),
+      React.createElement(
+        Box,
+        null,
+        React.createElement(Text, null, "> "),
+        React.createElement(TextInput, {
+          value: isEdit ? editValue : newVerb,
+          onChange: isEdit ? setEditValue : setNewVerb,
+          onSubmit: (val) => {
+            const trimmed = val.trim();
+            if (trimmed) {
+              const newVerbs = [...verbs];
+              if (isEdit) {
+                newVerbs[editIdx] = trimmed;
+              } else {
+                newVerbs.push(trimmed);
+              }
+              updateSpinnerVerbs(mode, newVerbs);
+            }
+            setEditIdx(-1);
+            setEditValue("");
+            setNewVerb("");
+            setScreen(SCREEN.MAIN);
+          },
+        })
+      ),
+      React.createElement(
+        Text,
+        { dimColor: true, marginTop: 1 },
+        "enter confirm  esc cancel"
+      )
+    );
+  }
+
+  // ── Confirm delete ──
+  if (screen === SCREEN.CONFIRM_DELETE) {
+    useInput((input, key) => {
+      if (screen !== SCREEN.CONFIRM_DELETE) return;
+      if (input === "y" || input === "Y") {
+        const newVerbs = verbs.filter((_, i) => i !== deleteIdx);
+        updateSpinnerVerbs(mode, newVerbs);
+        setScreen(SCREEN.MAIN);
+      }
+      if (input === "n" || input === "N" || key.escape) setScreen(SCREEN.MAIN);
+    });
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      React.createElement(Header, { scope, filePath }),
+      React.createElement(
+        Text,
+        { color: "yellow" },
+        `Delete "${verbs[deleteIdx]}"? (y/n)`
+      )
+    );
+  }
+
+  // ── Confirm clear ──
+  if (screen === SCREEN.CONFIRM_CLEAR) {
+    useInput((input, key) => {
+      if (screen !== SCREEN.CONFIRM_CLEAR) return;
+      if (input === "y" || input === "Y") {
+        updateSpinnerVerbs(mode, []);
+        setCursor(0);
+        setScreen(SCREEN.MAIN);
+      }
+      if (input === "n" || input === "N" || key.escape) setScreen(SCREEN.MAIN);
+    });
+
+    return React.createElement(
+      Box,
+      { flexDirection: "column" },
+      React.createElement(Header, { scope, filePath }),
+      React.createElement(
+        Text,
+        { color: "red" },
+        `Remove all ${verbs.length} custom verbs? (y/n)`
+      )
+    );
+  }
+
+  return null;
+}
+
+// ── Entrypoint ──
+
+let activeInstance = null;
+
+function renderApp(scope, filePath) {
+  if (activeInstance) activeInstance.unmount();
+  activeInstance = render(
+    React.createElement(MainApp, { scope, filePath })
+  );
+}
+
+// Start with scope picker
+activeInstance = render(React.createElement(ScopeScreen));

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "spinnerverb",
+  "version": "1.0.0",
+  "description": "Interactive TUI to customize Claude Code spinner verbs",
+  "bin": {
+    "spinnerverb": "./index.mjs"
+  },
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ideademic/spinnerverb.git"
+  },
+  "author": "Ideademic",
+  "keywords": [
+    "claude",
+    "claude-code",
+    "spinner",
+    "spinner-verbs",
+    "customization",
+    "tui",
+    "cli",
+    "anthropic",
+    "settings"
+  ],
+  "files": [
+    "index.mjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "ink": "^5.1.0",
+    "ink-text-input": "^6.0.0",
+    "react": "^18.3.1"
+  }
+}