PI WEB Pendant Theme

A Pendant-inspired theme pack for PI WEB with retro 8-bit aesthetics: sharp corners, flat surfaces, a subtle pixel grid, Source Sans 3 body font, and Press Start 2P pixel accents on section headers.

Version 0.5.0 targets PI WEB browser API v5 with CSS stylesheet contributions and stylesheet-integration v1. API v5 alone is not sufficient: early v5 hosts did not include CSS-first themes. Verified against upstream 4c31ebc8 (1.202610.6). Use published version 0.4.0 for older v4 hosts. Current upstream still accepts v4 plugins with a deprecation diagnostic. See visual review for verification and captures.

Command logos

When a Pendant theme is active, bash tool cards (tool-execution-view → section.tool-card) get an unobtrusive brand logo in their title, matching the first token of the command to a Simple Icons slug — the same idea as the Pendant VS Code extension.

• 247 commands mapped across git, shells, every major language/runtime, package managers, build tools, test runners, linters, bundlers, containers, Kubernetes, IaC, clouds, databases, and observability tools.
• 124 brand icons (Simple Icons, CC0) + 13 hand-crafted generic glyphs (symbol:search, symbol:cloud, symbol:hammer, symbol:terminal, …) for commands with no brand mark.
• The bash tool title is visually replaced with the tool's name (Git, uv, PDM, Python, PyPI, Rust, Docker, …); generic glyphs keep bash.
• cd <dir> && <cmd> / cd <dir>; <cmd> prefixes are stripped, so cd ~/repo && git push shows the Git logo.
• Pendant Dark and Pendant Light use each brand's official hex; all experiment themes (Amber CRT, Green Phosphor, Cyan/Teal, Nearly Monochrome, Muted Everything) desaturate logos to --pi-text-secondary so they stay on-palette.
• Fully gated behind the Pendant theme toggle: switching to a stock theme strips every logo and restores the original bash title.

The mapping + icon path data live in logos/manifest.json (commandToSlug, brands, symbols). Brand icons are CC0 (Simple Icons); the generic symbol:* glyphs are MIT-licensed part of this plugin. Brand logos are trademarks of their owners and are used here only to identify tools the agent is running.

Themes

This package contributes 7 themes to PI WEB's theme picker:

All themes share structural CSS in styles/pendant.css, with separate palette files in styles/. The refinement uses semantic font/chat/syntax properties, readable prose, targeted pixel headings, and visible tool-status glyphs. PI WEB owns stylesheet adoption and removal across the document and participating shadow roots. Command logos still use a private DOM adapter; no browser prototypes are patched.

Fonts are bundled as WOFF2/TTF (no external requests):

• Source Sans 3 (variable) — body text
• Source Code Pro (variable) — code
• Press Start 2P — section header arcade kickers

Installation

Via Pi (recommended)

pi install -g @compn3rd/pi-web-pendant-theme

Then reload the PI WEB browser tab and select a Pendant theme from the theme picker (gear icon or action palette). After a PI WEB upgrade, install a matching plugin version and hard-reload the tab. An enabled plugin with no themes may have been rejected during browser loading: check the browser console for an unsupported API version error. This browser-only plugin needs no daemon restart.

Session extension load errors

This is a browser-only plugin. Its package.json declares pi.extensions: [] separately from piWeb.plugins so Pi does not try to import the package root as a session extension. If a new session reports Failed to load extension: Cannot find module pointing at this package directory, update the package to include that manifest and open a new session. No daemon restart is required.

Manual

Clone or symlink into ~/.pi-web/plugins/pendant/:

mkdir -p ~/.pi-web/plugins
git clone https://github.com/CompN3rd/pi-web-pendant-theme.git ~/.pi-web/plugins/pendant

Hard-reload the PI WEB browser tab.

Fonts & assets

Development

git clone https://github.com/CompN3rd/pi-web-pendant-theme.git
cd pi-web-pendant-theme
# edit pi-web-plugin.js, then symlink for live testing:
ln -s "$PWD" ~/.pi-web/plugins/pendant
# hard-reload browser

Tests

npm test    # parser, command-logo layout, and PI WEB browser-v5 package contracts
npm run verify:parser
npm run test:visual -- refinement --profile refinement  # requires a built current PI WEB checkout
npm run review:render              # regenerate comparisons from both capture sets

The source-contract tests check fixed logo sizing, SVG containment, PI WEB API version, required browser metadata, and module-relative asset URLs. They do not compute browser layout or load the package in PI WEB. Computed dimensions, responsive widths, DOM injection/re-render behavior, and theme transitions still are checked by the real-browser visual harness as well. See review/README.md for prerequisites and the remaining coverage boundaries.

Rebuilding the icon manifest

logos/manifest.json is generated from simple-icons (CC0) plus hand-crafted symbol:* glyphs. To regenerate after bumping the Simple Icons set:

node scripts/build-manifest.js

License

MIT — plugin code and the symbol:* generic glyphs. Fonts have their own OFL licenses (see above). Brand icons in logos/manifest.json are CC0 from Simple Icons; the brand marks themselves are trademarks of their owners, used here only to identify which tool the agent is running.