@bismawy/pi-arnative 0.2.0 → 0.2.2

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 Directory, 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 (Directory → Model → 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/extensions/section-headers.ts

@@ -34,7 +34,7 @@ import { formatTokens, getModelAllTimeUsage } from "../lib/usage-store.ts";
 export type TabKey = "Model" | "Directory" | "Context" | "Skills" | "Extensions" | "Themes";
 
 // Tab order for Ctrl+Alt+T and for the menu line.
-export const TAB_ORDER: TabKey[] = ["Model", "Directory", "Context", "Skills", "Extensions", "Themes"];
+export const TAB_ORDER: TabKey[] = ["Directory", "Model", "Context", "Skills", "Extensions", "Themes"];
 
 export const SECTION_ICONS: Record<TabKey, string> = {
 	Model: "\uf1b2",
@@ -276,7 +276,7 @@ export function getCwd(ctx?: { cwd?: string }): string {
 }
 
 export class ArnativeHeader implements Component {
-	public activeTab: TabKey = "Model";
+	public activeTab: TabKey = "Directory";
 	private renderedTabLineY = -1;
 	private renderedTabRegions: Array<{ key: TabKey; startX: number; endX: number }> = [];
 
@@ -303,27 +303,25 @@ export class ArnativeHeader implements Component {
 
 	getTabsData(width: number): Array<{ key: TabKey; name: string; icon: string; count: number; label: string }> {
 		const modelObj = this.ctx?.model ?? (globalThis as Record<symbol, any>)[MODEL_SNAPSHOT_KEY];
-		const cwd = getCwd(this.ctx);
-		// Tab row stays compact (basename only): the full path is in the content
-		// line below, and render() expands this label when every tab still fits.
-		const dirBase = cwd.replace(/\\/g, "/").replace(/\/+$/, "").split("/").pop() || cwd;
-		const dirLabel = dirBase ? `Directory: ${dirBase}` : "Directory";
+		// Tab row stays compact: the Directory tab shows just its name, the full path
+		// lives in the content line below.
+		const dirLabel = "Directory";
 		const fullModelName = formatModelDisplayName(modelObj);
 		// Drop bracketed details from the tail of the name ("... Free (1M) [OpenCode] (Freeflow)"
 		// -> "Space Bunny Free"); the details still show in the Model tab data line.
-		let modelLabel = `Model: ${fullModelName.replace(/(\s*\([^()]*\)|\s*\[[^[\]]*\])+$/, "").trim()}`;
+		let modelLabel = `Model [${fullModelName.replace(/(\s*\([^()]*\)|\s*\[[^[\]]*\])+$/, "").trim()}]`;
 		// Responsive on medium screens: drop the provider when columns < 112
 		if (width < 112 && modelLabel.includes(" (")) {
-			modelLabel = `Model: ${fullModelName.slice(0, fullModelName.indexOf(" (")).trim()}`;
+			modelLabel = `Model [${fullModelName.slice(0, fullModelName.indexOf(" (")).trim()}]`;
 		}
 		// Below 88 columns: shorten the model name
 		if (width < 88 && modelLabel.length > 18) {
-			modelLabel = `Model: ${modelLabel.slice(7, 18).trim()}…`;
+			modelLabel = `Model [${modelLabel.slice(7, 18).trim()}…]`;
 		}
 
 		return [
-			{ key: "Model", name: "Model", icon: SECTION_ICONS.Model, count: 0, label: modelLabel },
 			{ key: "Directory", name: "Directory", icon: SECTION_ICONS.Directory, count: 0, label: dirLabel },
+			{ key: "Model", name: "Model", icon: SECTION_ICONS.Model, count: 0, label: modelLabel },
 			{
 				key: "Context",
 				name: "Context",
@@ -418,6 +416,7 @@ export class ArnativeHeader implements Component {
 			`${fgFirst(th, ["tint"], "[!]")} ${fgFirst(th, ["dim"], "Bash")}`,
 			`${fgFirst(th, ["tint"], "[Ctrl+o]")} ${fgFirst(th, ["dim"], "More/expand")}`,
 			`${fgFirst(th, ["tint"], "[Ctrl+alt+t]")} ${fgFirst(th, ["dim"], "Next tab")}`,
+			`${fgFirst(th, ["tint"], "[Ctrl+alt+r]")} ${fgFirst(th, ["dim"], "Reload")}`,
 		];
 		// Shortcut list is trimmed from the right (longest prefix that still fits) so
 		// narrow screens never clip the tabs or the data.
@@ -434,7 +433,8 @@ export class ArnativeHeader implements Component {
 		const sepTab = fgFirst(th, ["dim"], sepTabPlain);
 
 		const tabParts: Array<{ key: TabKey; plain: string; formatted: string }> = [];
-		const makeTabPart = (t: { key: TabKey; icon: string; label: string }, label = t.label) => {
+		const makeTabPart = (t: { key: TabKey; icon: string; label: string }) => {
+			const { label } = t;
 			const plain = `${t.icon} ${label}`;
 			const isActive = t.key === this.activeTab;
 			const iconStyled = isActive ? fgFirst(th, ["accent"], t.icon) : fgFirst(th, ["dim"], t.icon);
@@ -455,22 +455,9 @@ export class ArnativeHeader implements Component {
 				usedWidth += w;
 			}
 		}
-		// All tabs fit? Then the Directory tab may show the whole path instead of the
-		// basename. Skipped when it would push another tab off the menu.
-		if (kept.length === tabParts.length) {
-			const i = kept.findIndex((t) => t.key === "Directory");
-			const cwdFull = getCwd(this.ctx);
-			const dirTab = tabs[i];
-			if (i >= 0 && dirTab && cwdFull) {
-				const full = makeTabPart(dirTab, `Directory: ${cwdFull}`);
-				if (usedWidth - visibleWidth(kept[i]!.plain) + visibleWidth(full.plain) <= innerW) {
-					kept[i] = full;
-					usedWidth += visibleWidth(full.plain) - visibleWidth(tabParts[i]!.plain);
-				}
-			}
-		}
 		this.renderedTabRegions = [];
-		let curX = INFO_X;
+		// The tab row has its own left border + a leading space before the first tab.
+		let curX = INFO_X + 2;
 		for (const t of kept) {
 			const w = visibleWidth(t.plain);
 			this.renderedTabRegions.push({ key: t.key, startX: curX, endX: curX + w - 1 });
@@ -723,8 +710,13 @@ if (isMain) {
 	// Only "dim" is colored, so the box line colors can be asserted.
 	const ansiTheme = { fg: (c: string, t: string) => (c === "dim" ? `\x1b[2m${t}\x1b[22m` : t) };
 	const hdr = new ArnativeHeader(fakeTui, ansiTheme, fakeCtx);
-	assert(hdr.activeTab === "Model", "default tab adalah Model");
+	assert(hdr.activeTab === "Directory", "default tab adalah Directory");
+
+	// Default view: the working directory path, shown on open
+	const linesDefault = hdr.render(100);
+	assert(stripAnsi(linesDefault[6]!).includes("/run/media/bisma/DATA/Pi/pi-arnative"), "path direktori tampil sejak tab pertama dibuka");
 
+	hdr.activeTab = "Model";
 	const lines100 = hdr.render(100);
 	assert(lines100.length === 8, "render 100 = border + 6 baris logo + border (3 baris info mengisi 3 baris logo)");
 	assert(lines100.every((l) => visibleWidth(l) === 100), "semua baris render 100 tepat 100 kolom");
@@ -737,11 +729,13 @@ if (isMain) {
 		"ascii Pi asli di kolom kiri, 6 baris",
 	);
 	assert(stripAnsi(lines100[1]!).includes("pi v") && stripAnsi(lines100[1]!).includes("Arnative"), "baris versi + merek");
-	assert(stripAnsi(lines100[4]!).includes("Model: Gemini 3.8 Flash"), "menu tab Model tampil");
-	// Directory tab: whole path in the content line, no truncation
+	assert(stripAnsi(lines100[4]!).includes("Model [Gemini 3.8 Flash]"), "menu tab Model tampil (Model [nama])");
+	// Directory tab: name only in the menu, whole path in the content line below
 	hdr.activeTab = "Directory";
 	hdr.render(100);
-	assert(stripAnsi(lines100[4]!).includes("Directory:"), "tab Directory tampil di menu");
+	assert(stripAnsi(lines100[4]!).includes("Directory"), "tab Directory tampil di menu");
+	assert(!stripAnsi(lines100[4]!).includes("Directory: /"), "menu Directory tanpa path (detail hanya saat diklik)");
+	assert(stripAnsi(lines100[4]!).indexOf("Directory") < stripAnsi(lines100[4]!).indexOf("Model ["), "Directory tab berada paling kiri");
 	hdr.activeTab = "Model";
 	hdr.render(100);
 	assert(stripAnsi(lines100[6]!).includes("Gemini 3.8 Flash (Antigravity)"), "data tab aktif Model tampil di baris info terakhir");
@@ -801,20 +795,20 @@ if (isMain) {
 	if (skillsRegion.key === "Skills") {
 		assert(linesSkills[6]!.includes("agents-sdk, cloudflare"), "data tab Skills tampil di baris info terakhir");
 		assert(!linesSkills[6]!.includes("Gemini 3.8 Flash (Antigravity)"), "data Model tidak tampil di konten tab Skills");
-		assert(linesSkills[4]!.includes("Model: Gemini 3.8 Flash"), "menu tab tetap tampil saat tab lain aktif");
+		assert(linesSkills[4]!.includes("Model [Gemini 3.8 Flash]"), "menu tab tetap tampil saat tab lain aktif");
 	}
 
 	// The Y of a tab must point at the tab menu line, not the shortcut line above
 	const rowsPlain = lines100.map((l) => stripAnsi(l));
-	assert(rowsPlain[tabY]!.includes("Model:"), "renderedTabLineY menunjuk baris menu tab");
-	assert(tabRegions.every((r) => rowsPlain[tabY]!.slice(r.startX, r.endX + 1).includes(r.key === "Model" ? "Model:" : r.key)), "region tab rata dengan teks di baris itu");
+	assert(rowsPlain[tabY]!.includes("Model ["), "renderedTabLineY menunjuk baris menu tab");
+	assert(tabRegions.every((r) => rowsPlain[tabY]!.slice(r.startX, r.endX + 1).includes(r.key === "Model" ? "Model [" : r.key)), "region tab rata dengan teks di baris itu");
 
 	// Narrow screen: version + tabs + data stay intact, shortcuts get trimmed
 	const narrow = hdr.render(60);
 	assert(narrow.every((l) => visibleWidth(l) === 60), "baris 60 kolom tetap 60");
 	assert(stripAnsi(narrow[1]!).includes("pi v"), "versi tetap utuh di 60 kolom");
 	assert(stripAnsi(narrow[1]!).includes("More/expand") === false, "shortcut panjang dibuang di 60 kolom");
-	assert(stripAnsi(narrow[4]!).includes("Model:"), "tab Model tetap tampil di 60 kolom");
+	assert(stripAnsi(narrow[4]!).includes("Model ["), "tab Model tetap tampil di 60 kolom");
 
 	// Intercept addChild: capture the data and suppress the child
 	const proto = Object.getPrototypeOf(UserMessageComponent.prototype) as { addChild?: unknown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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"
   }