@bismawy/pi-arnative 0.2.0 → 0.2.1

package/README.md

@@ -1,89 +1,69 @@
-<div align="center">
+# Arnative
 
-# pi-arnative
+A visual layer and tool styling tailored to your vibe coding.
 
-An arnative look for [pi](https://github.com/earendil-works/pi-coding-agent) — 11 warm-neutral themes, rounded tool boxes, a branded header with clickable tabs, a 2-line footer, a transcript clock, and a `/usage` dashboard.
+[![Custom badge](https://shieldcn.dev/badge/pi-%20Packages.svg?variant=outline&size=xs&logo=ri%3APiPiBold)](https://pi.dev/packages/@bismawy/pi-arnative)
+[![badge](https://shieldcn.dev/npm/react.svg?variant=outline&size=xs)](https://www.npmjs.com/package/@bismawy/pi-arnative)
+[![license](https://shieldcn.dev/github/bismawy/pi-arnative/license.svg?variant=outline&size=xs)](https://github.com/bismawy/pi-arnative)
 
-[pi package](https://pi.dev/packages/@bismawy/pi-arnative) · [npm](https://www.npmjs.com/package/@bismawy/pi-arnative) · [Issues](https://github.com/bismawy/pi-arnative/issues)
+## Overview
 
-![npm](https://img.shields.io/npm/v/@bismawy/pi-arnative)
-![license](https://img.shields.io/badge/license-MIT-green)
+pi-arnative replaces pi’s default terminal chrome with a unified, cohesive visual aesthetic.
 
-</div>
-
-## What it does
-
-pi-arnative replaces pi's chrome with one visual language — box drawing, dim borders, cyan accent, tint for values — without touching session data.
-
-- **11 themes, one generator:** `arnative` plus 10 variants (`sun`, `zinc`, `violet`, `emerald`, `matrix`, `cyberpunk`, `synthwave`, `gruvbox`, `nord`, `dracula`), all generated from a single base file so their structure can never drift.
-- **Header box with tabs:** replaces pi's stacked resource list with a 5-line box — logo, version + shortcuts, and a clickable `Model / Directory / Context / Skills / Extensions / Themes` tab menu. The `Directory` tab shows the full working directory (wrapped at `/`, never truncated).
-- **Tool boxes:** every tool call renders in its own rounded box — spinner while running, then `✓`/`x`, right-aligned duration, and a one-line summary. Click or `ctrl+e` for the full output.
-- **2-line footer:** `cwd | duration | branch/tag/status` on the first line, extension status + tok/s + cache + tokens on the second, plus a full-box editor with a `> ` prompt.
-- **Transcript clock:** user and assistant messages get a right-aligned time, and the user bubble background is repaired where Markdown resets would otherwise leave black blocks.
-- **Render fixes:** hidden reload box, readable drag selection, single-line compaction messages, and a higher-contrast `↓ Jump to latest message` pill.
-- **Contrast-checked themes:** the self-check measures every `themes/*.json` against its own canvas, so no variant ships an unreadable box.
+- Warm Themes: Cohesive, contrast-checked color palettes generated without drift.
+- Tabbed Header: Compact box menu with quick access to Model, Skills, Extensions, and Themes.
+- Rounded Tool Boxes: Clear status, spinner, and duration for every tool call.
+- Enhanced Footer: 2-line layout showing directory path, git branch, model, and token metrics.
+- Transcript Clock: Timestamps for messages with clean bubble backgrounds.
+- Usage Dashboard: /usage command to track tokens and session costs.
 
 ## Install
 
-**Install [JetBrains Mono Nerd Font](https://www.nerdfonts.com/font-downloads) first.** Every icon in this package (tab icons `󰋖 󰺨 󰰡 󰹲`, tool icons `󰔟 󱞩 ✓`, footer icons `󰃭 󰍛 󰣇`, and the rounded box corners `╭─╮`) is a Nerd Font glyph — without the font they render as empty boxes (□) or random characters.
-
-1. Download **JetBrainsMono Nerd Font** from [nerdfonts.com/font-downloads](https://www.nerdfonts.com/font-downloads).
-2. Extract and install it (Linux: copy into `~/.local/share/fonts/` then `fc-cache -f`; Windows: right click → Install).
-3. Set your terminal to **JetBrainsMono NF** (or another Nerd Font) as the primary font.
-
 ```bash
 pi install npm:@bismawy/pi-arnative
 ```
 
-Pick a theme in `/settings` > Theme > `arnative` (or any `arnative-*` variant). Everything else — header, footer, tool boxes, clock — turns itself on at session start.
-
-To try it without installing, from this directory:
+Select a theme via `/settings` → **Theme** → `arnative` (or any `arnative-*` variant).
 
+To test locally without installing:
 ```bash
 pi --extension ./extensions/footer.ts
 ```
+> **Prerequisite:** Requires a [Nerd Font](https://www.nerdfonts.com/font-downloads) (e.g. JetBrains Mono Nerd Font) for icons and rounded box borders.
 
-## Commands
-
-| Command | Action |
-| :--- | :--- |
-| `/usage` | Token, message & cache usage across all local Pi sessions |
+## Shortcuts
 
-| Shortcut | Action |
-| :--- | :--- |
-| `ctrl+alt+t` | Cycle the header tab (Model → Directory → Context → Skills → Extensions → Themes) |
-| click a header tab | Open that tab |
-| click a tool box / `ctrl+e` | Toggle full title and output |
+| Key / Action | Result |
+| --- | --- |
+| `/usage` | Show session usage & token metrics |
+| `ctrl+alt+t` | Cycle header tabs (Model → Directory → Context → Skills → Extensions → Themes) |
+| `ctrl+alt+r` | Quick reload runtime (`/reload`) |
+| Click tab | Open selected header tab |
+| Click tool / `ctrl+e` | Toggle tool output box |
 
-## How it works
+## Architecture
 
 <details>
 <summary><b>Extensions</b></summary>
 
 | File | Role |
-| :--- | :--- |
-| `extensions/tools.ts` | Tool call boxes, summaries, spinner, duration, per-tool backgrounds |
-| `extensions/section-headers.ts` | Header box, logo, tab menu, and the interception of pi's resource list |
-| `extensions/footer.ts` | 2-line footer and the full-box editor |
-| `extensions/timestamps.ts` | Transcript clock and user bubble background repair |
-| `extensions/ui-render-tweaks.ts` | Reload box, drag selection, compaction, Jev review box, contrast self-check |
-| `extensions/usage.ts` | `/usage` table dashboard |
-
-`lib/box.ts` and `lib/ansi.ts` hold the single definitions shared by all of them. They live outside `extensions/` so pi never loads them as extensions.
+| --- | --- |
+| `extensions/tools.ts` | Rounded tool boxes, spinners, and duration |
+| `extensions/section-headers.ts` | Tabbed header and resource box |
+| `extensions/footer.ts` | 2-line status footer and boxed editor |
+| `extensions/timestamps.ts` | Message clock and bubble background fixes |
+| `extensions/ui-render-tweaks.ts` | Contrast tweaks, selection style, and UI polish |
+| `extensions/usage.ts` | `/usage` token dashboard |
 
 </details>
 
 <details>
 <summary><b>Themes</b></summary>
 
-- `themes/arnative.json` is both the default theme and the structure source of truth — it is never rewritten by the generator.
-- `themes/gen-themes.mjs` holds the palette table and writes the variants by text substitution on the base, so the original formatting is preserved.
-- `npm run themes` rewrites every variant; `npm test` runs the same generator in `--check` mode, so a hand-edited variant file cannot drift.
-- Every variant fills all `vars`/`colors`/`export` keys, so no color can silently inherit the base.
+- `themes/arnative.json` serves as the structure source of truth.
+- `themes/gen-themes.mjs` generates variants with automated contrast checks.
 
-Palette: `sun` warm amber · `zinc` neutral grey · `violet` purple · `emerald` green · `matrix` monochrome phosphor green on near-black · `cyberpunk` neon magenta/cyan on deep indigo · `synthwave` 80s retro · `gruvbox` warm retro · `nord` cool frost blue · `dracula` dark purple.
-
-Contrast rules enforced by the self-check (measured against each theme's own `userMessageBg` canvas): content ≥ 3.0, secondary text ≥ 2.0, `thinking*` ramp 1.3–4.0, accent pill ≥ 4.5, tool box text ≥ 4.5 on both success and error backgrounds, error box weight matched to the success box, and `scrollbarThumb` / `searchMatchBg` distinguishable from their track / selection.
+**Variants:** `sun` · `zinc` · `violet` · `emerald` · `matrix` · `cyberpunk` · `synthwave` · `gruvbox` · `nord` · `dracula`
 
 </details>
 
@@ -91,18 +71,16 @@ Contrast rules enforced by the self-check (measured against each theme's own `us
 <summary><b>Development</b></summary>
 
 ```bash
-npm test        # every self-check + theme generator --check
-npm run themes  # rewrite all theme variants
+npm test        # Run self-checks & theme generator check
+npm run themes  # Rebuild all theme variants
 ```
 
-Each extension is also a standalone self-check: `node extensions/tools.ts`.
-
 </details>
 
 ## License
 
 Distributed under the **MIT** license.
 
-## Developer
+## Author
 
-Developed and maintained by [Bisma](https://github.com/bismawy).
+[Bisma](https://github.com/bismawy)

package/extensions/footer.ts

@@ -9,10 +9,14 @@
  */
 import type { AssistantMessage } from "@earendil-works/pi-ai";
 import { CustomEditor, FooterComponent, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Key, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { execFile } from "node:child_process";
 import { formatTokens } from "../lib/usage-store.ts";
 
+// The TUI drops key-release events before handleInput, so press+release cannot
+// fire this twice even when the terminal reports event types (Kitty flag 2).
+const RELOAD_SHORTCUT = Key.ctrlAlt("r");
+
 // Intercept the built-in FooterComponent to force a pure 2-line footer
 const PATCHED_KEY = Symbol.for("pi-arnative.footer2LinesPatched");
 if (FooterComponent?.prototype?.render && !(globalThis as Record<symbol, boolean>)[PATCHED_KEY]) {
@@ -471,6 +475,17 @@ export default function (pi: ExtensionAPI) {
 					return super.renderTopBorder(width, hiddenLineCount);
 				}
 
+				handleInput(data: string) {
+					if (matchesKey(data, RELOAD_SHORTCUT)) {
+						this.setText("");
+						if (this.onSubmit) {
+							this.onSubmit("/reload");
+						}
+						return;
+					}
+					super.handleInput(data);
+				}
+
 				render(width: number): string[] {
 					// The box eats 5 columns: 2 sides + the 3-column " > " prompt, so the
 					// content is rendered 5 columns narrower.
@@ -643,5 +658,12 @@ if (isMain) {
 	assert(getToolWorkingMessage("mcp", { tool: "fetch_repo" }) === "Fetching", "mcp fetch -> Fetching");
 	assert(boxed.slice(0, 4).every((l) => visibleWidth(l) === visibleWidth(D) + 5), "lebar kotak seragam (sisi+prompt)");
 	assert(boxEditorLines(["\u2500\u2500\u2500\u2500"], 1, plain).length === 1, "terlalu sempit: tak diubah");
+
+	// Guard: the reload shortcut must match every encoding a terminal can deliver,
+	// so a typo in the key id fails here instead of silently doing nothing.
+	assert(matchesKey("\x1b\x12", RELOAD_SHORTCUT), "shortcut cocok dgn ctrl+alt+r legacy (ESC + 0x12)");
+	assert(matchesKey("\x1b[114;7u", RELOAD_SHORTCUT), "shortcut cocok dgn ctrl+alt+r Kitty CSI-u");
+	assert(!matchesKey("\x12", RELOAD_SHORTCUT), "ctrl+r polos tidak memicu reload");
+	assert(!matchesKey("r", RELOAD_SHORTCUT), "huruf r tidak memicu reload");
 	console.log("footer.ts self-check OK");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Arnative look for Pi: 11 warm-neutral themes, rounded tool boxes, branded header with tabs, 2-line footer with git/model/status, transcript clock, and a /usage dashboard.",
   "keywords": [
     "pi-package",
@@ -37,6 +37,7 @@
     "@earendil-works/pi-tui": "*"
   },
   "scripts": {
+    "dev": "pi --extension ./extensions/tools.ts --extension ./extensions/section-headers.ts --extension ./extensions/footer.ts --extension ./extensions/timestamps.ts --extension ./extensions/ui-render-tweaks.ts --extension ./extensions/usage.ts",
     "test": "node lib/box.ts && node lib/ansi.ts && node themes/gen-themes.mjs --check && node extensions/tools.ts && node extensions/footer.ts && node extensions/timestamps.ts && node extensions/section-headers.ts && node extensions/ui-render-tweaks.ts && node extensions/usage.ts",
     "themes": "node themes/gen-themes.mjs"
   }