pi-cyber-ui
Standalone Pi UI package with a cyber-inspired theme, custom editor, footer, and lightweight working indicator.
Package details
Install pi-cyber-ui from npm and Pi will load the resources declared by the package manifest.
$ pi install npm:pi-cyber-ui- Package
pi-cyber-ui- Version
0.1.30- Published
- Jun 20, 2026
- Downloads
- 1,111/mo · 540/wk
- Author
- 22gnus
- License
- unknown
- Types
- extension, theme
- Size
- 119.1 KB
- Dependencies
- 0 dependencies · 3 peers
Pi manifest JSON
{
"themes": [
"./themes"
],
"extensions": [
"./extensions/pi-cyber-ui/index.ts"
]
}Security note
Pi packages can execute code and influence agent behavior. Review the source before installing third-party packages.
README
pi-cyber-ui
A standalone Pi package that bundles a cyber-inspired editor, compact footer, lightweight working indicator, optional compact tool rendering, and a matching dark theme.
The visual direction was inspired by Tokyo Night, but this is a new project with its own palette, naming, and packaging structure.
The extension is split into small modules for easier maintenance:
editor.tswires editor/session eventscyber-editor.tsowns the prompt shell, prompt marker, dynamic border, and optional session name labeleditor-state.tshandles session state and token accountingworking.tsrenders prompt progress and idle summariesfooter.tsrenders cwd, git dirty state, model, thinking level, and context usageprofile.tsresolvesnative/full, registers/cyber-profile, and persists the global user profiletool-render.tsre-registers built-in tools with compact cyber renderers while delegating execution to Pi built-ins; activated only infullprofileread-compact.tspreserves Pi read compact compatibility for skills and agent resource files infullprofiletool-registry.tstracks tool lifecycle, durations, and per-turn tallies infullprofilepath-utils.tscontains shared path shortening/styling helperstoken-usage.tscontains protocol-aware exact/estimated token helpers
Contents
themes/cyber-ui-dark.json— Pi themeextensions/pi-cyber-ui/index.ts— extension entrypointextensions/pi-cyber-ui/profile.ts— profile resolution,/cyber-profile, and global persistenceextensions/pi-cyber-ui/editor.ts— editor/session event wiringextensions/pi-cyber-ui/editor-state.ts— editor/session stateextensions/pi-cyber-ui/cyber-editor.ts— Cyber editor shellextensions/pi-cyber-ui/token-usage.ts— token usage helpersextensions/pi-cyber-ui/footer.ts— compact footerextensions/pi-cyber-ui/working.ts— working line and idle summary widgetextensions/pi-cyber-ui/tool-render.ts— compact built-in tool rendererextensions/pi-cyber-ui/read-compact.ts— Pi read compact compatibility layerextensions/pi-cyber-ui/tool-registry.ts— tool timing/tally registryextensions/pi-cyber-ui/path-utils.ts— path display helpers
Local development
cd ~/Developer/pi-cyber-ui
npm install
npm run typecheck
Using with Pi
Install from the remote repository:
pi install git:github.com/22GNUs/pi-cyber-ui.git
For local development, you can also install from a local checkout path:
pi install /path/to/pi-cyber-ui
The package is structured to be publishable later via git or npm without changing the directory layout.
Profiles
pi-cyber-ui defaults to the low-intrusion native profile:
pi
Switch profiles with the built-in command:
/cyber-profile native
/cyber-profile full
/cyber-profile toggle
/cyber-profile status
The command persists the choice globally to ~/.pi/agent/pi-cyber-ui.json and automatically reloads Pi so the new profile takes effect.
You can also use an environment variable as a temporary override:
PI_CYBER_UI_PROFILE=full pi
Available profiles:
| Profile | Default | Tool overrides | Use case |
|---|---|---|---|
native |
✅ | none | Keeps Pi native tool definitions/renderers for maximum compatibility with Pi defaults and other extensions. Keeps theme, editor, footer, and working indicator. Tool colors come from theme tokens only. |
full |
— | read, bash, edit, write, grep, find, ls |
Enables compact tool rows, Nerd Font tool icons, per-tool header colors, summaries, durations, and compact read affordances. May conflict with other extensions that register the same tool names. |
Enable the full compact tool rendering explicitly:
/cyber-profile full
Unknown persisted or environment profile values fall back to native. If PI_CYBER_UI_PROFILE is set by your shell, it overrides the persisted config on future launches.
When it is published, install it with one of these forms:
pi install npm:pi-cyber-ui
# or
pi install git:github.com/22GNUs/pi-cyber-ui.git
Architecture contract
This package is not a full tool implementation fork. Tool rendering is profile-gated progressive enhancement.
In the default native profile, pi-cyber-ui does not re-register any Pi built-in tools. This preserves Pi native tool definitions/renderers and avoids conflicts with other extensions. Tool-level coloring is limited to theme tokens such as toolTitle, toolOutput, toolPendingBg, toolSuccessBg, toolErrorBg, and diff colors.
In the explicit full profile, built-in tools are re-registered to control the UI, but execution and prompt metadata continue to come from Pi's native tool definitions.
- Inherited from Pi native tools in
full:execute, parameter schemas, descriptions, prompt snippets, and prompt guidelines. - Customized by this package in
full:renderCall,renderResult, compact summaries, duration/spinner display, and cyber color semantics. - Consequence: Pi execution-layer improvements usually apply automatically; Pi native renderer improvements do not. Renderer-specific features must be reviewed and ported when Pi changes.
- Compatibility rule: preserve known Pi compact read affordances where they affect semantics, especially
SKILL.mdas[skill] nameand agent resource files (AGENTS.md/CLAUDE.md) as compact resource reads. - Maintenance rule: after upgrading
@earendil-works/pi-coding-agent, review Pi's built-in renderers, especiallycore/tools/read, before publishing.
Commands
/cyber-profile [native|full|toggle|status]— show or switch the globalpi-cyber-uiprofile. Changes are persisted and followed by an automatic reload.- Pi's built-in
/name <name>sets the session display name. When present,pi-cyber-uishows it in the editor's top-right border as⟦ name ⟧.
Notes
- Package name:
pi-cyber-ui - Theme name:
cyber-ui-dark - Extension entrypoint:
extensions/pi-cyber-ui/index.ts - Exact streaming usage is protocol-aware; Anthropic Messages API can surface cumulative in-flight usage, while other APIs fall back to estimates
- Working indicator uses Pi's official
ctx.ui.setWorkingIndicator()/ctx.ui.setWorkingMessage()APIs - Default profile is
native, which does not re-register built-in tools - Use
/cyber-profile fullorPI_CYBER_UI_PROFILE=fullto re-register built-in tools for compact rendering while preserving their original execution behavior and prompt metadata - Theme format follows the official Pi theme schema