@arandevcode/opencode-thinking

🇪🇸 Also available in Spanish

Animated visual indicators when the model is processing — rainbow border around the input area and sidebar glow. No config needed.

Install

opencode plugin @arandevcode/opencode-thinking

Or install from GitHub source to follow latest development:

// ~/.config/opencode/opencode.json
{
  "plugin": [
    "https://github.com/arandevcode/opencode-plugins/tree/main/opencode-thinking"
  ]
}

Commands

| Command | Effect | |---|---| | /thinking_visual | Toggle all effects | | /thinking_visual a | Border animation only | | /thinking_visual b | Sidebar glow only | | /thinking_visual all | Both | | /thinking_visual none | Disable |

More Information

How activation works

Automatic (default): the plugin listens for session status. When opencode starts processing (session.status === "busy"), rainbow effects appear. When done (session.idle), they disappear.

Manual: use /thinking_visual or toggle individual modes via Command Palette (Cmd+K → "Thinking Visual").

Project structure

├── .opencode/
│   ├── opencode.json            ← project config (activates plugin + slash cmds)
│   └── plugins/
│       ├── opencode-thinking-tui.ts      ← TUI plugin (visual effects)
│       └── opencode-thinking-server.ts   ← Server plugin (handles /thinking_visual)
├── src/                         ← npm distribution source
│   ├── index.ts
│   ├── tui.ts
│   ├── server.ts
│   └── types.ts
├── docs/
│   └── ARCHITECTURE.md
├── example.opencode.json
└── package.json

.opencode/plugins/ lets the plugin work without npm install, without build, without global install — opencode loads them automatically from the project.

Install in another project

// .opencode/opencode.json
{
  "plugin": [
    "@arandevcode/opencode-thinking/tui",
    "@arandevcode/opencode-thinking/server"
  ]
}

Development

npm install        # install deps (type-check only)
npm run build      # compile src/ → dist/
npm run dev        # continuous compilation

License

MIT