@odradekk/vera-theme

Vera unified theme package: Obsidian-toned palette plus Kylin-inspired chrome (banner, status line, spinner, thinking cycle).

Packages

Package details

extension

Install @odradekk/vera-theme from npm and Pi will load the resources declared by the package manifest.

$ pi install npm:@odradekk/vera-theme
Package
@odradekk/vera-theme
Version
0.3.0
Published
May 8, 2026
Downloads
206/mo · 13/wk
Author
odradekk
License
MIT
Types
extension
Size
117.8 KB
Dependencies
0 dependencies · 4 peers
Pi manifest JSON
{
  "extensions": [
    "./src/index.ts"
  ]
}

Security note

Pi packages can execute code and influence agent behavior. Review the source before installing third-party packages.

README

vera-theme

Purpose

Unified visual identity package for Vera. Combines the previous vera-ui session chrome (banner, status line, thinking shortcut) with Kylin-inspired design-language elements (braille spinner, vertical-bar separators in the status line, chevron label for collapsed thinking blocks). Pairs with the bundled vera theme JSON (Obsidian palette).

Non-goals

  • Replacing the editor component or the chat-message renderer (those are pinned by the Pi SDK; see project notes on TUI extensibility limits).
  • Web/search/data retrieval tools, compaction, prompt-rule assembly, or any non-presentation concerns.

Registered surface

Commands

  • /thinking — cycle thinking level, or set directly (e.g. /thinking high).
  • /statusline — toggle status line placement; or set directly (/statusline below, /statusline embed).

Shortcuts

  • Configurable thinking-cycle shortcut from vera-theme.json (default alt+t).
  • Configurable status-line toggle shortcut (default alt+s).

Hooks / UI integration

  • session_start — loads config; installs banner, status line, working spinner, hidden-thinking label.
  • turn_start / turn_end — refreshes status line and git snapshot.
  • model_select — syncs current model and refreshes status line.

Theme

  • agent/themes/vera.json — Obsidian-toned palette tuned for Vera. Set via settings.json ("theme": "vera") or the /theme picker.

Editor chrome

Rounded box around the input area (╭─╮│ │╰─╯).

Top edge — run-state indicator

Embedded on the right, animated with a braille spinner. States:

  • idle (no history yet) — nothing rendered
  • idle_done (after first turn) — ✓ done
  • streamingstreaming ⠋
  • thinkingthinking ⠋ (color follows thinkingHigh)
  • tool⚙ <toolName> ⠋

Driven by Pi events: turn_start, turn_end, tool_execution_start, tool_execution_end, and message_update.thinking_start/end.

Bottom edge

Two appearances, controlled by the status-line mode:

  • below (default) — plain closed border ╰─────╯. The full status line lives in the footer line below the editor.
  • embed — status line rendered into the bottom edge ╰─ project · model · thinking · gauge · tokens ───╯. The footer line is hidden.

Toggle with /statusline or alt+s. When the autocomplete suggestion list is open the chrome stays applied; the stock internal divider between input and suggestions is upgraded to ├─┤ so the box reads as a paneled view. Disable via editorChrome.enabled = false.

Status line fields (preserved from vera-ui, restyled)

  1. Project context (cwd basename + git branch + dirty markers)
  2. Model identity (current model name)
  3. Thinking level (color-coded by level)
  4. Context-window gauge (16-cell bar + percent)
  5. Token stats (input · output · cache · hit-rate)

Outer separators between sections use (Kylin-style); inner separators within a section use ·. Width-adaptive collapse is preserved: when the terminal is narrow, lower-priority sections drop in order tokens → gauge → identity-only.

Config

Looked up in this order (first hit wins):

  1. Project: .pi/config/vera-theme.json
  2. Agent: agent/config/vera-theme.json
  3. Built-in defaults

Schema

{
  "banner": { "enabled": true },
  "statusLine": { "enabled": true, "mode": "below", "shortcut": "alt+s" },
  "spinner": { "enabled": true },
  "editorChrome": { "enabled": true },
  "thinkingCycle": {
    "enabled": true,
    "shortcut": "alt+t",
    "default": ["low", "medium", "high", "xhigh"],
    "profiles": {
      "exampleProfile": {
        "match": ["*haiku*", "*flash*"],
        "levels": ["off", "minimal", "low"]
      }
    }
  }
}