@bismawy/pi-arnative 0.1.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 / Context / Skills / Extensions / Themes` tab menu.
-- **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 → 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]) {
@@ -112,6 +116,19 @@ function formatModelName(
 	return `${thinkStr}${acc(name)}${provStr}`;
 }
 
+// Footer is a single line: a deep cwd (`/Users/x/Workspace/personal/proj`)
+// pushes git state and the model off screen. Keep the last 2 segments.
+export function shortenCwd(raw: string): string {
+	const p = (raw || "").trim();
+	if (!p) return p;
+	const drive = p.match(/^[A-Za-z]:/);
+	const body = drive ? p.slice(2) : p;
+	const parts = body.replace(/\\/g, "/").replace(/\/+$/, "").split("/").filter(Boolean);
+	if (parts.length <= 2) return p;
+	const head = drive ? `${drive[0]}/\u2026/` : p.startsWith("/") ? "\u2026/" : "\u2026";
+	return head + parts.slice(-2).join("/");
+}
+
 export function formatDuration(ms: number): string {
 	if (!ms || ms <= 0) return "-";
 	const totalSec = Math.floor(ms / 1000);
@@ -325,14 +342,15 @@ export default function (pi: ExtensionAPI) {
 
 						const durationStr = formatDuration(Date.now() - sessionStartMs);
 						const pDuration = `${acc("\uf017")} ${tint(durationStr)}`;
-						let left1 = `${acc("\uf07b")} ${dim(cwd)}${sep}${pDuration}`;
+						const cwdShort = shortenCwd(cwd);
+						let left1 = `${acc("\uf07b")} ${dim(cwdShort)}${sep}${pDuration}`;
 						if (git) {
 							const gitIcon = acc("\uf172");
 							const gitText = git.uncommitted > 0 ? tint(`~${git.uncommitted}`) : tint("clean");
 							const pBranch = `${acc("\uf126")} ${tint(git.branch)}${git.ahead > 0 ? ` ${tint(`↑${git.ahead}`)}` : ""}${git.behind > 0 ? ` ${tint(`↓${git.behind}`)}` : ""}`;
 							const pTag = `${acc("\uf02b")} ${tint(git.tag)}`;
 							const pState = `${gitIcon}  ${gitText}`;
-							left1 = `${acc("\uf07b")} ${dim(cwd)}${sep}${pDuration}${sep}${pBranch}${sep}${pTag}${sep}${pState}`;
+							left1 = `${acc("\uf07b")} ${dim(cwdShort)}${sep}${pDuration}${sep}${pBranch}${sep}${pTag}${sep}${pState}`;
 						}
 						const right1 = formatModelName(currentModel, currentThinkingLevel, acc, tint, dim);
 						const pad1 = " ".repeat(Math.max(1, width - visibleWidth(left1) - visibleWidth(right1)));
@@ -457,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.
@@ -591,6 +620,12 @@ if (isMain) {
 			process.exit(1);
 		}
 	};
+	assert(shortenCwd("/run/media/bisma/DATA/Pi/pi-arnative") === "\u2026/Pi/pi-arnative", "cwd dalam -> 2 segmen terakhir");
+	assert(shortenCwd("/home/bisma") === "/home/bisma", "cwd dangkal tak diubah");
+	assert(shortenCwd("D:\\Pi\\a\\pi-arnative") === "D:/\u2026/a/pi-arnative", "path Windows jauh: drive dipertahankan");
+	assert(shortenCwd("D:\\Pi\\pi-arnative") === "D:\\Pi\\pi-arnative", "path Windows dangkal tak diubah");
+	assert(shortenCwd("/a/x/y/z") === "\u2026/y/z", "path jauh -> tail");
+	assert(shortenCwd("") === "", "cwd kosong");
 	assert(formatDuration(0) === "-", "durasi kosong = -");
 	assert(formatDuration(5_000) === "5s", "detik saja");
 	assert(formatDuration(65_000) === "1m 5s", "menit + detik");
@@ -623,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

@@ -31,10 +31,14 @@ import {
 import { renderBoxLines } from "../lib/box.ts";
 import { formatTokens, getModelAllTimeUsage } from "../lib/usage-store.ts";
 
-export type TabKey = "Model" | "Context" | "Skills" | "Extensions" | "Themes";
+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 SECTION_ICONS: Record<TabKey, string> = {
 	Model: "\uf1b2",
+	Directory: "\uf07b",
 	Context: "\udb84\uddd7",
 	Skills: "\uec21",
 	Extensions: "\ueea8",
@@ -158,6 +162,38 @@ export function wrapCommaItems(items: string[], maxWidth: number): string[] {
 	return lines;
 }
 
+// Full path, hard-wrapped at "/" so the Directory tab never truncates it
+// (a single long segment is sliced as a last resort).
+export function wrapPath(path: string, maxWidth: number): string[] {
+	const p = (path || "").replace(/\\/g, "/");
+	if (!p) return [p];
+	if (maxWidth < 1) return [p];
+	const abs = p.startsWith("/");
+	const segs = p.replace(/^\/+/, "").split("/").filter(Boolean);
+	const lines: string[] = [];
+	let cur = abs ? "/" : "";
+	for (const seg of segs) {
+		const tok = cur === "/" ? seg : abs || cur ? `/${seg}` : seg;
+		if (visibleWidth(cur) + visibleWidth(tok) <= maxWidth) {
+			cur += tok;
+			continue;
+		}
+		if (cur) lines.push(cur);
+		if (visibleWidth(tok) <= maxWidth) {
+			cur = abs ? `/${seg}` : tok;
+			continue;
+		}
+		let rest = seg;
+		while (visibleWidth(rest) > maxWidth) {
+			lines.push(rest.slice(0, maxWidth));
+			rest = rest.slice(maxWidth);
+		}
+		cur = rest;
+	}
+	if (cur) lines.push(cur);
+	return lines.length > 0 ? lines : [p];
+}
+
 export function centerLine(text: string, width: number, side = "│"): string {
 	const sideW = visibleWidth(side);
 	const innerW = Math.max(0, width - sideW * 2);
@@ -200,6 +236,7 @@ export const tabStore: Map<TabKey, string[]> =
 	(globalThis as Record<symbol, Map<TabKey, string[]>>)[STORE_KEY] ??
 	new Map<TabKey, string[]>([
 		["Model", []],
+		["Directory", []],
 		["Context", []],
 		["Skills", []],
 		["Extensions", []],
@@ -231,6 +268,13 @@ export function formatModelDisplayName(model?: { id?: string; name?: string; pro
 	return `${name}${provStr}`;
 }
 
+// Full working directory for the Directory tab. ctx.cwd is authoritative; the
+// snapshot survives header re-creation when ctx is missing.
+const CWD_SNAPSHOT_KEY = Symbol.for("pi-arnative.lastCwd");
+export function getCwd(ctx?: { cwd?: string }): string {
+	return ctx?.cwd || (globalThis as Record<symbol, any>)[CWD_SNAPSHOT_KEY] || "";
+}
+
 export class ArnativeHeader implements Component {
 	public activeTab: TabKey = "Model";
 	private renderedTabLineY = -1;
@@ -259,6 +303,11 @@ 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";
 		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.
@@ -274,6 +323,7 @@ export class ArnativeHeader implements Component {
 
 		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: "Context",
 				name: "Context",
@@ -384,18 +434,16 @@ export class ArnativeHeader implements Component {
 		const sepTab = fgFirst(th, ["dim"], sepTabPlain);
 
 		const tabParts: Array<{ key: TabKey; plain: string; formatted: string }> = [];
-		for (const t of tabs) {
-			const plain = `${t.icon} ${t.label}`;
+		const makeTabPart = (t: { key: TabKey; icon: string; label: string }, label = t.label) => {
+			const plain = `${t.icon} ${label}`;
 			const isActive = t.key === this.activeTab;
-			const iconStyled = isActive
-				? fgFirst(th, ["accent"], t.icon)
-				: fgFirst(th, ["dim"], t.icon);
+			const iconStyled = isActive ? fgFirst(th, ["accent"], t.icon) : fgFirst(th, ["dim"], t.icon);
 			const labelStyled = isActive
-				? fgFirst(th, ["tint", "text"], `\x1b[1m${t.label}\x1b[22m`)
-				: fgFirst(th, ["dim"], t.label);
-			const formatted = `${iconStyled} ${labelStyled}`;
-			tabParts.push({ key: t.key, plain, formatted });
-		}
+				? fgFirst(th, ["tint", "text"], `\x1b[1m${label}\x1b[22m`)
+				: fgFirst(th, ["dim"], label);
+			return { key: t.key, plain, formatted: `${iconStyled} ${labelStyled}` };
+		};
+		for (const t of tabs) tabParts.push(makeTabPart(t));
 
 		// Tabs that don't fit on narrow screens are dropped from the right (the active tab always stays).
 		const kept: typeof tabParts = [];
@@ -407,6 +455,20 @@ 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;
 		for (const t of kept) {
@@ -463,7 +525,11 @@ export class ArnativeHeader implements Component {
 			activeItems = tabStore.get(this.activeTab) ?? [];
 		}
 
-		if (activeItems.length === 0) {
+		if (this.activeTab === "Directory") {
+			for (const line of wrapPath(getCwd(this.ctx), infoW)) {
+				infoLines.push(fgFirst(th, ["tint", "text"], line));
+			}
+		} else if (activeItems.length === 0) {
 			infoLines.push(fgFirst(th, ["tint"], "(kosong)"));
 		} else if (this.activeTab === "Model") {
 			// The Model tab already carries tint styling + a dim separator
@@ -554,8 +620,8 @@ export default function (pi: ExtensionAPI) {
 		handler: async () => {
 			const hdr = activeHeaderInstance;
 			if (!hdr) return;
-			const order: TabKey[] = ["Model", "Context", "Skills", "Extensions", "Themes"];
-			hdr.activeTab = order[(order.indexOf(hdr.activeTab) + 1) % order.length];
+			const order = TAB_ORDER;
+			hdr.activeTab = order[(order.indexOf(hdr.activeTab) + 1) % order.length]!;
 			hdr.tui?.requestRender?.();
 		},
 	});
@@ -571,6 +637,7 @@ export default function (pi: ExtensionAPI) {
 	pi.on("turn_start", async (_event, ctx) => {
 		(globalThis as Record<symbol, any>)[MODEL_SNAPSHOT_KEY] = ctx.model;
 		(globalThis as Record<symbol, any>)[THINKING_SNAPSHOT_KEY] = ctx.thinkingLevel;
+		if (ctx.cwd) (globalThis as Record<symbol, any>)[CWD_SNAPSHOT_KEY] = ctx.cwd;
 	});
 
 	pi.on("turn_end", async () => {
@@ -598,6 +665,13 @@ if (isMain) {
 	assert(extractItemsFromBody("  a, b, c").length === 3, "extractItemsFromBody koma = 3");
 	assert(extractItemsFromBody("  x\n  y\n  z").length === 3, "extractItemsFromBody baris = 3");
 
+	// Directory path wrapping: never truncated, always the full path
+	const wp = wrapPath("/run/media/bisma/DATA/Pi/pi-arnative", 20);
+	assert(wp.join("") === "/run/media/bisma/DATA/Pi/pi-arnative", "wrapPath tak menghilangkan segmen");
+	assert(wp.every((l) => visibleWidth(l) <= 20), "wrapPath hormati lebar");
+	assert(wrapPath("D:\\Pi\\pi-arnative", 80).join("") === "D:/Pi/pi-arnative", "wrapPath normalisasi backslash");
+	assert(wrapPath("/a/very-long-segment-name", 6).every((l) => visibleWidth(l) <= 6), "segmen panjang diiris");
+
 	const wrapTest = wrapCommaItems(["item1", "item2", "item3", "item4"], 15);
 	assert(wrapTest.length >= 2, "wrapCommaItems membungkus baris");
 	assert(visibleWidth(wrapTest[0]!) <= 15, "lebar baris wrap sesuai batas");
@@ -643,6 +717,7 @@ if (isMain) {
 	const fakeCtx: any = {
 		model: { name: "Gemini 3.8 Flash", provider: "antigravity" },
 		thinkingLevel: "low",
+		cwd: "/run/media/bisma/DATA/Pi/pi-arnative",
 	};
 
 	// Only "dim" is colored, so the box line colors can be asserted.
@@ -663,7 +738,21 @@ if (isMain) {
 	);
 	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
+	hdr.activeTab = "Directory";
+	hdr.render(100);
+	assert(stripAnsi(lines100[4]!).includes("Directory:"), "tab Directory tampil di menu");
+	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");
+	// Directory tab content: full path, wrapped, nothing lost
+	hdr.activeTab = "Directory";
+	const linesDir = hdr.render(100);
+	const dirContent = stripAnsi(linesDir[6]!);
+	assert(dirContent.includes("/run/media/bisma"), "path lengkap tab Directory (awal) tampil");
+	assert(dirContent.includes("pi-arnative"), "path lengkap tab Directory (akhir) tampil — tanpa truncate");
+	hdr.activeTab = "Model";
+	hdr.render(100);
 	// The inner box lines are one fully dimmed block (the "─" runs are colored too, not just the corners).
 	for (const i of [3, 5]) {
 		assert((lines100[i]!.match(/\x1b\[/g) ?? []).length === 8, `garis kotak dalam baris ${i} = satu blok dim penuh (garis "─" ikut ter-warnai, bukan hanya sudut)`);
@@ -673,7 +762,8 @@ if (isMain) {
 	const tabY = (hdr as any).renderedTabLineY;
 	assert(tabY > 0, "posisi Y baris tab tercatat");
 	const tabRegions = (hdr as any).renderedTabRegions as Array<{ key: TabKey; startX: number; endX: number }>;
-	assert(tabRegions.length >= 4, "region tab terisi (tab paling kanan bisa terpotong di 100 kolom)");
+	assert(tabRegions.length >= 3, "region tab terisi (tab kanan bisa terpotong di 100 kolom)");
+	assert(tabRegions.some((r) => r.key === "Directory"), "tab Directory ada di menu (lebar 100)");
 
 	// Click the Extensions tab (when truncated at 100 columns, use the rightmost tab)
 	const extRegion = tabRegions.find((r) => r.key === "Extensions") ?? tabRegions[tabRegions.length - 1]!;
@@ -690,20 +780,29 @@ if (isMain) {
 	const linesExt = hdr.render(100);
 	assert(stripAnsi(linesExt[6]!).includes(extRegion.key === "Extensions" ? "@bismawy/pi-agentrouter@1.6.1" : ""), "data tab aktif tampil di baris info terakhir");
 
-	// Click the Skills tab
-	const skillsRegion = tabRegions.find((r) => r.key === "Skills") ?? tabRegions[0]!;
+	// Click the Skills tab (measured at a width where every tab fits)
+	const wide = hdr.render(140);
+	const wideRegions = (hdr as any).renderedTabRegions as Array<{ key: TabKey; startX: number; endX: number }>;
+	const skillsRegion = wideRegions.find((r) => r.key === "Skills") ?? wideRegions[wideRegions.length - 1]!;
+	hdr.activeTab = "Model";
+	hdr.render(140);
+	const skillsY = (hdr as any).renderedTabLineY;
 	hdr.handleMouse({
 		type: "click",
 		button: "left",
 		x: Math.floor((skillsRegion.startX + skillsRegion.endX) / 2),
-		y: tabY,
+		y: skillsY,
 	} as any);
-	assert(hdr.activeTab === "Skills", "activeTab berubah ke Skills setelah klik");
-
-	const linesSkills = hdr.render(100);
-	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(hdr.activeTab === skillsRegion.key, `activeTab berubah ke ${skillsRegion.key} setelah klik`);
+
+	const linesSkills = hdr.render(140);
+	assert(wide.every((l) => visibleWidth(l) === 140), "baris 140 kolom tetap 140");
+	assert(wideRegions.length === 6, "lebar 140: semua 6 tab tampil");
+	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");
+	}
 
 	// The Y of a tab must point at the tab menu line, not the shortcut line above
 	const rowsPlain = lines100.map((l) => stripAnsi(l));

package/extensions/tools.ts

@@ -266,7 +266,14 @@ for (const n of BOXED_TOOLS.keys()) OWN_BOX.add(n);
 // of lines. A 1-line summary + [ctrl+o to expand] is tighter; their args lines
 // still feed the call box so the invoked MCP tool stays visible.
 const MCP_TOOL = (name: string): boolean => name === "mcp" || name === "mcpScript" || name.startsWith("mcp__");
-const pakaiCallMereka = (name: string): boolean => BOXED_TOOLS.has(name) || MCP_TOOL(name);
+
+// pi-fff "override" mode re-registers `find`/`grep` with its own renderers, replacing our
+// boxed versions -> plain text again. Box theirs too; ours carry renderShell "self" (minimal).
+const FFF_OVERRIDE = ["find", "grep"];
+const pakaiCallMereka = (self: any): boolean =>
+	BOXED_TOOLS.has(self.toolName) ||
+	MCP_TOOL(self.toolName) ||
+	(FFF_OVERRIDE.includes(self.toolName) && self.toolDefinition?.renderShell !== "self");
 
 // The MCP box title names the invoked tool (full args when expanded).
 const mcpInfo = (name: string, args: any, th: Theme): string => {
@@ -326,14 +333,15 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 	};
 
 	proto.getRenderShell = function (): string {
-		if (pakaiCallMereka(this.toolName)) return "self";
+		if (pakaiCallMereka(this)) return "self";
 		return hasOwnRenderer(this) ? origShell.call(this) : "self";
 	};
 
 	proto.getCallRenderer = function () {
 		const name: string = this.toolName;
+		const mine = pakaiCallMereka(this);
 		const own = origCall.call(this);
-		if (own && !pakaiCallMereka(name)) return own;
+		if (own && !mine) return own;
 		return (args: any, th: Theme, ctx: TCtx) =>
 			new Lines((width) => {
 				if ((ctx.state as Record<string, unknown> | undefined)?.hasResult) return [];
@@ -341,7 +349,7 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 				const theirs = own ? componentLines(own.call(this, args, th, ctx), width - 6) : [];
 				if (name === "todo" && theirs.length)
 					return box(th, width, formatTodoRows(theirs, th), "toolPendingBg");
-				if (pakaiCallMereka(name) && theirs.length)
+				if (mine && theirs.length)
 					return box(th, width, boxedRows(icon, capped(th, theirs, Boolean(this.expanded))));
 				const inner = Math.max(8, width - 4);
 				return box(th, width, titleRow(th, icon, th.fg("accent", displayName(name)), "", inner, "", false), boxBgOf(name));
@@ -351,8 +359,10 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 	proto.getResultRenderer = function () {
 		const name: string = this.toolName;
 		const own = origResult.call(this);
+		// pi-fff splits title (renderCall) and result (renderResult); both go in one box.
+		const fff = FFF_OVERRIDE.includes(name) && this.toolDefinition?.renderShell !== "self";
 		// MCP: their result renderer is deliberately skipped (unbounded error dump).
-		if (own && !pakaiCallMereka(name)) return own;
+		if (own && !pakaiCallMereka(this)) return own;
 		const boxed = BOXED_TOOLS.has(name);
 		return (result: TResult, opts: { expanded: boolean; isPartial?: boolean }, th: Theme, ctx: TCtx) => {
 			if (opts.isPartial) return EMPTY;
@@ -364,7 +374,7 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 			// Errors use our own path: pi-web-access' own error box is a box inside a
 			// box. Their renderer content is only used on success.
 			const theirs =
-				boxed && !isErr
+				(boxed || fff) && !isErr
 					? own.call(this, { content: result.content, details: result.details }, opts, th, ctx)
 					: null;
 			return new Lines((width) => {
@@ -372,6 +382,10 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 				const inner = Math.max(8, width - 4);
 				const icon = isErr ? th.fg("error", "x") : th.fg("success", "✓");
 				const boxed2 = componentLines(theirs, width - 6);
+				if (fff && boxed2.length) {
+					const callLines = componentLines(origCall.call(this)?.call(this, ctx.args, th, ctx), width - 6);
+					return box(th, width, boxedRows(icon, [callLines[0]?.trim() || displayName(name), ...boxed2]));
+				}
 				if (name === "todo" && boxed2.length) {
 					// todo call result (status completed / in_progress)
 					const callComp = origCall.call(this)?.call(this, ctx.args, th, ctx);
@@ -788,6 +802,31 @@ if (isMain) {
 		"pi-web-access: baris args renderer mereka masuk kotak",
 	);
 
+	// pi-fff override mode: find/grep re-registered with own renderers, no renderShell
+	const fffCall = { render: () => ["\x1b[1mfind \x1b[22m\x1b[36m*.ts in D:/Pi/x\x1b[39m"] };
+	const fffRes = { render: () => ["src/a.ts \x1b[2m... (6 more lines)\x1b[22m"] };
+	const fffFind = { toolName: "find", toolDefinition: { renderCall: () => fffCall, renderResult: () => fffRes } };
+	assert(
+		ToolExecutionComponent.prototype.getRenderShell.call(fffFind) === "self",
+		"pi-fff find: shell dipaksa self (ikut kotak kita)",
+	);
+	const fffOut = (ToolExecutionComponent.prototype.getResultRenderer.call(fffFind) as any)(
+		{ content: [{ type: "text", text: "src/a.ts\nsrc/b.ts" }] },
+		{ expanded: false, isPartial: false },
+		th,
+		{ args: { pattern: "*.ts", path: "D:/Pi/x" }, state: {} },
+	).render(60);
+	assert(fffOut[0].startsWith("╭") && fffOut[fffOut.length - 1].startsWith("╰"), "pi-fff find: hasil dibungkus kotak");
+	assert(fffOut.some((l: string) => l.includes("*.ts in D:/Pi/x")), "pi-fff find: judul renderCall ikut masuk kotak");
+	assert(fffOut.some((l: string) => l.includes("6 more lines")), "pi-fff find: ringkasan renderResult ikut masuk kotak");
+
+	const oursFind = { toolName: "find", toolDefinition: { renderShell: "self", renderCall: () => fffCall, renderResult: () => fffRes } };
+	assert(
+		(ToolExecutionComponent.prototype.getCallRenderer.call(oursFind) as any)() === fffCall &&
+			(ToolExecutionComponent.prototype.getResultRenderer.call(oursFind) as any)() === fffRes,
+		"find kita (renderShell self): renderer sendiri apa adanya, tak dibungkus kotak lagi",
+	);
+
 	// Guard: source_check is deliberately NOT boxed — its curator partial carries
 	// URLs + approval state, while our partial path returns nothing. Without this
 	// assert a later edit of BOXED_TOOLS would swallow it silently.

package/package.json

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