@luan.sh/pi-custom-editor  

A Pi extension that replaces the built-in input editor chrome and footer with a configurable composition: semantic surfaces, top and bottom rules, left and right rails, a prompt marker, and four status quadrants showing path, git branch, model, thinking level, context usage, cost, and more. It keeps Pi's native input rows, cursor, and autocomplete output and only re-draws the chrome around them. It also highlights @file references and slash commands as you type.

Preview

Watch the demo.

Install

pi install npm:@luan.sh/pi-custom-editor

The extension is active in the TUI on the next session start. No configuration is required; the compact-field preset is used until you change it.

Optional companion: pi install npm:@luan.sh/pi-xsettings adds the /xsettings command with a live preview UI for every setting listed below; without it the defaults apply and there is no in-app way to change them.

What it does

• Wraps the editor through Pi's setEditorComponent layer. If another extension already installed an editor factory, that editor is decorated (its render output is re-composed) rather than replaced.
• Replaces the footer through Pi's setFooter with a status row driven by the same composition settings.
• Reads Pi's git branch, session name, model, provider, thinking level, context-window usage, and per-session token/cost totals for status segments.
• Hides Pi's native "working" transcript row only when workingPlacement is set to something other than transcript; the original visibility is restored on session shutdown.
• Follows the shared appearance settings (animation speed, smoothness, reduced motion) provided by the bundled @luan.sh/pi-libtui runtime.

Presets

claude-code, pi, borderless, top-rule, minimal-field, compact-field, full-field, status-band. A preset fixes surface, top/bottom treatment, rails, prompt marker, bottom status row, separator, band style, and the segments in each quadrant. Every explicit control below defaults to preset, meaning "inherit from the selected preset"; setting it to any other value overrides only that piece.

Status segments

Any of these can be placed, in order, in each quadrant when segmentSource is custom:

provider, model, thinking, fast, path, git, session, elapsed, context, context-window, context-qualifier, tokens, cost, clock.

Segments that have nothing to show (no branch, thinking off, zero cost) are omitted. context renders a gauge with percent used, tokens/window, and the session's input/output totals and cost. The working segment is not chosen directly; it is inserted by workingPlacement.

Editor highlights

Two built-in contributions run on the rendered editor text:

• @path and @"quoted path" references (resolved against the current working directory, with ~ expansion) render as a pill with a filetype-aware Nerd Font icon. Existing paths use the positive tone, missing paths the negative tone. A token stays plain text while the cursor is inside it or not yet separated from it by whitespace.
• A leading /command on the first prompt line is positive if it is a Pi built-in or a registered extension command, otherwise negative.

Nothing is highlighted inside inline or fenced Markdown code.

Settings

Settings are defined with @luan.sh/pi-xsettings under namespace @luan.sh/pi-custom-editor (label "Custom Editor", page "Editor", applied live). Edit them with /xsettings when @luan.sh/pi-xsettings is installed; otherwise the defaults below apply.

| Key | Default | Values | | --- | --- | --- | | preset | compact-field | one of the presets above | | surface | preset | transparent, base, editor, raised, inset, accent | | topTreatment | preset | none, half-block, rule, status-band | | bottomTreatment | preset | none, rule | | leftRail | preset | off, static, animated | | rightRail | preset | off, static, animated | | promptMarker | preset | none, angle, angleDouble, arrowHeavy, triangleFilled, triangleOutline, angleHeavy, angleWide, chevronOpen, chevronLight, chevronMedium, chevron, chevronHeavy, nfChevron, nfDoubleChevron, nfCircle, nfTerminal, nfPrompt | | railTone | accent | accent, border (color of rails at rest) | | footer | preset | off, on (bottom status row, independent of the bottom rule) | | segmentSource | preset | preset, custom | | workingPlacement | transcript | transcript, hidden, top-left-start, top-left-end, top-right-start, top-right-end, bottom-left-start, bottom-left-end, bottom-right-start, bottom-right-end | | topLeftSegments | [] | ordered list of segment ids | | topRightSegments | ["path", "git", "model", "thinking", "fast"] | ordered list of segment ids | | bottomLeftSegments | [] | ordered list of segment ids | | bottomRightSegments | ["context"] | ordered list of segment ids | | statusSeparator | preset | space, dot, chevron, powerline | | statusBand | preset | transparent, filled, powerline |

The four segment lists are only used when segmentSource is custom. The working indicator's marker, message, and animation are owned by the shared Animations → Working settings; this package only decides where it is placed.

Keybindings

This package registers no actions, commands, or keybindings.

Highlight API

Other extensions can add editor highlights through a process-wide, versioned registry. Import from @luan.sh/pi-custom-editor:

import { ensureEditorHighlightRegistry } from "@luan.sh/pi-custom-editor";

const registry = ensureEditorHighlightRegistry(); // protocol "pi-custom-editor/highlights/v1"
const dispose = registry.register({
  id: "my-extension.tickets",
  priority: 10,
  matches({ text }) {
    return [...text.matchAll(/\b[A-Z]+-\d+\b/g)].map((m) => ({
      start: m.index,
      end: m.index + m[0].length,
      presentation: { kind: "foreground", color: "accent" },
    }));
  },
});

matches receives { text, line, promptLine, excludedRanges } and returns { start, end, presentation } entries with UTF-16 offsets into text. presentation is either { kind: "foreground", color } or { kind: "pill", label, icon, foreground?, iconTone?, minimumCursorGap? }. Contributions are applied in descending priority; overlapping matches from lower-priority contributions and matches inside excludedRanges (Markdown code) are dropped. Registering the same id again replaces the earlier contribution; the returned function unregisters it. The registry is stored on globalThis under Symbol.for("pi-custom-editor/highlights/v1"), so it survives extension reloads and works across separately loaded extensions.

The package also exports TuiState, WorkingSnapshot, and formatDuration (formats milliseconds as 12s, 1m05s, or 1h02m).

Layout

| Responsibility | File | | --- | --- | | Extension entry, lifecycle events, motion scheduling | src/extension.ts | | Settings definitions and defaults | src/config/settings.ts | | Presets, segment ids, preset resolution | src/core/composition.ts | | Editor layer and composition rendering | src/ui/pi-custom-editor.ts | | Footer component | src/ui/footer.ts | | Status segment rendering | src/ui/status.ts | | Working-time state | src/runtime/state.ts | | Highlight registry protocol | src/protocol/highlights.ts | | Highlight matching and validation | src/core/highlights.ts | | Highlight painting onto editor lines | src/ui/highlights.ts | | Built-in @file and /command highlights | src/contributions/default-highlights.ts | | Filetype icons | src/core/file-icons.ts | | Public exports | src/index.ts |

Develop

Source: https://github.com/luan/agents, directory harnesses/pi/agent/packages/pi-custom-editor. Run bun run typecheck and bun test test in that directory.