@d3ara1n/pi-editor-shell 0.3.1 → 0.5.0

package/README.md

@@ -1,15 +1,15 @@
 # pi-editor-shell
 
-Replaces pi's default editor and status bar with a unified rounded-corner shell drawn with box-drawing glyphs (`╭╮││╰╯`), with status info embedded in the border. No Nerd Font required for the frame itself.
+Replaces pi's default editor and status bar with a unified rounded-corner shell drawn with box-drawing glyphs (`╭╮││╰╯`), with status info embedded in the border. The frame and spinner use only standard Unicode; the six border icons are Nerd Font glyphs (overridable — see [Configuration](#configuration)).
 
 ## What shows up where
 
-- **Top border** — ` model · thinking-level ` (left) + pinned extension statuses (right, via `pinnedStatus` config)
-- **Bottom border** — ` ctx NN%/NNNk · cache-tokens ` (left) + ` ~current/dir (branch) ` (right, includes git branch when available)
+- **Top border** — `  provider/model ·  thinking-level ` (left) + pinned extension statuses (right, via `pinnedStatus` config)
+- **Bottom border** — `  ctx NN%/NNNk · ⚡ cacheRead (total)  hitRate% ` (left) + `  ~/Projects (main +2 ~1) ` (right, shows git branch + dirty state when in a repo)
 - **Below shell** — Auto-wrapping extension status line (all `setStatus` entries not pinned to the top)
 - **Border color** follows pi's thinking-level / bash-mode indicator automatically.
 
-All segments are re-read from live session state on every paint, so switching thinking level or burning context updates the frame on the next render with no extra wiring.
+All segments are re-read from live session state on every paint, so switching thinking level or burning context updates the frame on the next render with no extra wiring. When the agent is active, the current phase spinner (thinking/outputting/toolcall/exec) replaces the model text in the top-left slot.
 
 ## Configuration
 
@@ -20,11 +20,30 @@ In `~/.pi/agent/settings.json` under the `editorShell` key:
   "editorShell": {
     // Status keys to pin to the top-right corner of the shell.
     // Only keys set via ctx.ui.setStatus() are eligible.
-    "pinnedStatus": ["subagent", "access-denied"]
+    "pinnedStatus": ["subagent", "access-denied"],
+
+    // Per-slot border-icon overrides. Any subset; missing keys fall back
+    // to the built-in Nerd Font set (see table below). Values are raw
+    // characters — "\uf0e7" for a Nerd Font glyph, "🤖" for an emoji.
+    "icons": {
+      "model": "🤖",
+      "cache": "\uf0e7"
+    }
   }
 }
 ```
 
+### Default icons
+
+| Slot | Glyph | Nerd Font name |
+|------|-------|----------------|
+| `model` | `` | oct-cpu |
+| `thinking` | `` | oct-light_bulb |
+| `context` | `` | oct-cache |
+| `cache` | `⚡` | oct-zap |
+| `hitRate` | `` | fa-bullseye |
+| `folder` | `` | fa-folder_open |
+
 ## Commands
 
 | Command | Description |
@@ -35,9 +54,15 @@ In `~/.pi/agent/settings.json` under the `editorShell` key:
 
 The default pi editor only draws a horizontal line above and below the input area (no side borders), and a separate footer renders the status bar. This extension replaces both — it wraps the built-in `CustomEditor`, renders it at `width - 2`, wraps every line with left/right glyphs, and embeds the status bar information (extension statuses) below the shell. The total width is unchanged. Border color follows pi's `borderColor` (which encodes thinking level / bash mode), so the shell stays semantically consistent and reacts to theme changes automatically.
 
+When the autocomplete popup is open, the divider between editor content and popup items becomes a T-junction (`├─┤`) carrying the context/cwd info, closing everything into one connected card with two panes. Below `MIN_WIDTH` (20 columns), it falls back to the default editor.
+
 ## Installation
 
-Add the package directory to the `extensions` array in `~/.pi/agent/settings.json`:
+```bash
+pi install npm:@d3ara1n/pi-editor-shell
+```
+
+Or add to `~/.pi/agent/settings.json`:
 
 ```jsonc
 {
@@ -47,8 +72,6 @@ Add the package directory to the `extensions` array in `~/.pi/agent/settings.jso
 }
 ```
 
-Then run `/reload` or restart pi.
-
 ## Caveats
 
 - **Mutually exclusive** with other editor-replacing extensions (`border-status-editor`, `rainbow-editor`, `modal-editor`, …). Disable those when enabling this one — `setEditorComponent` is last-writer-wins.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@d3ara1n/pi-editor-shell",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
-  "description": "Replaces pi's default editor and status bar with a unified rounded-corner shell — no Nerd Font required",
+  "description": "Replaces pi's default editor and status bar with a unified rounded-corner shell embedding status info in the border",
   "keywords": [
     "pi-package",
-    "pi"
+    "pi",
+    "pi-extension"
   ],
   "main": "src/index.ts",
   "peerDependencies": {
@@ -15,7 +16,8 @@
   "pi": {
     "extensions": [
       "./src/index.ts"
-    ]
+    ],
+    "image": "https://raw.githubusercontent.com/d3ara1n/pi-extensions/main/packages/pi-editor-shell/preview.png"
   },
   "license": "MIT",
   "repository": {

package/src/config.ts

@@ -10,16 +10,55 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 
+/** Border icon slots that users can override. Each holds a single glyph
+ *  (Nerd Font codepoint, Unicode symbol, or emoji) — whatever the user's
+ *  terminal can render. Defaults live next to the renderer in index.ts. */
+export interface EditorShellIcons {
+  model: string;
+  thinking: string;
+  context: string;
+  cache: string;
+  hitRate: string;
+  folder: string;
+}
+
 export interface EditorShellConfig {
   /**
    * Status keys to pin to the shell's top-right corner.
    * Only keys set via ctx.ui.setStatus() are eligible.
    */
   pinnedStatus: string[];
+  /**
+   * Per-slot border-icon overrides. Any subset; missing keys fall back to
+   * the built-in Nerd Font set. Values are raw characters — JSON `"\uf0e7"`
+   * for a Nerd Font glyph, or `"🤖"` for an emoji, etc.
+   */
+  icons: Partial<EditorShellIcons>;
+}
+
+const ICON_KEYS: ReadonlyArray<keyof EditorShellIcons> = [
+  "model",
+  "thinking",
+  "context",
+  "cache",
+  "hitRate",
+  "folder",
+];
+
+/** Keep only known icon slots with string values — silently drops typos and
+ *  wrong-typed entries so a bad config never crashes the renderer. */
+function filterIcons(obj: Record<string, unknown>): Partial<EditorShellIcons> {
+  const out: Partial<EditorShellIcons> = {};
+  for (const key of ICON_KEYS) {
+    const v = obj[key];
+    if (typeof v === "string") out[key] = v;
+  }
+  return out;
 }
 
 export const DEFAULT_CONFIG: EditorShellConfig = {
   pinnedStatus: [],
+  icons: {},
 };
 
 function getAgentDir(): string {
@@ -51,9 +90,14 @@ export function loadEditorShellConfig(cwd?: string): EditorShellConfig {
   if (!raw) return { ...DEFAULT_CONFIG };
 
   const pinned = raw.pinnedStatus;
+  const iconsRaw = raw.icons;
   return {
     pinnedStatus: Array.isArray(pinned)
       ? pinned.filter((k): k is string => typeof k === "string")
       : DEFAULT_CONFIG.pinnedStatus,
+    icons:
+      iconsRaw && typeof iconsRaw === "object"
+        ? filterIcons(iconsRaw as Record<string, unknown>)
+        : {},
   };
 }

package/src/index.ts

@@ -4,7 +4,7 @@ import { spawn } from "node:child_process";
 import * as os from "node:os";
 import * as path from "node:path";
 import { CardEditor, type FrameProvider, type SpinnerPhase } from "./card-editor";
-import { loadEditorShellConfig, type EditorShellConfig } from "./config";
+import { loadEditorShellConfig, type EditorShellConfig, type EditorShellIcons } from "./config";
 
 /**
  * pi-editor-shell — Replaces pi's default editor and status bar with a
@@ -47,15 +47,18 @@ function contextToken(pct: number | null | undefined): ThemeColor {
   return "success";
 }
 
-// ── Nerd Font icons (Octicons + FontAwesome) ──────────────────────────
-const ICON = {
+// ── Built-in icon set (Nerd Font). Users can override any subset via the
+//    `editorShell.icons` config — see config.ts. `cache` uses U+26A1, which
+//    Nerd Fonts maps `oct-zap` to directly (no dedicated glyph), so it is
+//    the same glyph in and out of a Nerd Font terminal.
+const DEFAULT_ICONS: EditorShellIcons = {
   model: "\uf4bc", //   oct-cpu
-  thinking: "\uf400", //   oct-light-bulb
+  thinking: "\uf400", //   oct-light_bulb
   context: "\uf49b", //   oct-cache
-  cache: "\u26a1", // ⚡  oct-zap
+  cache: "\u26a1", // ⚡  oct-zap (NF maps this codepoint to U+26A1)
   hitRate: "\uf140", //   fa-bullseye（靶心，缓存命中率）
-  folder: "\uf07c", //   fa-folder
-} as const;
+  folder: "\uf07c", //   fa-folder_open
+};
 
 /** Minimal inline types to read cache-read totals without importing the
  *  full pi-ai message union tree. */
@@ -192,7 +195,10 @@ export default function (pi: ExtensionAPI) {
   // The factory may run again when pi rebuilds the editor (model switch,
   // reload, …), so always drive whichever instance is current.
   let editor: CardEditor | undefined;
-  let config: EditorShellConfig = { pinnedStatus: [] };
+  let config: EditorShellConfig = { pinnedStatus: [], icons: {} };
+  // Resolved icons for the current session: built-in defaults merged with
+  // the user's overrides. Re-computed at session_start.
+  let icons: EditorShellIcons = { ...DEFAULT_ICONS };
   // Shared footer-data ref — the provider (running inside CardEditor.render)
   // reads it to resolve pinned status keys to their current text.
   let footerSnap: FooterSnap | undefined;
@@ -241,6 +247,7 @@ export default function (pi: ExtensionAPI) {
 
     _cwd = ctx.cwd;
     config = loadEditorShellConfig(ctx.cwd);
+    icons = { ...DEFAULT_ICONS, ...config.icons };
     _cacheTotal = sumCacheRead(ctx);
     _latestUsage = latestAssistantUsage(ctx);
     refreshGitDirty(ctx.cwd, () => editor?.requestRender());
@@ -283,7 +290,7 @@ export default function (pi: ExtensionAPI) {
       const hitRate = cacheHitRate(_latestUsage);
       const cachePart =
         _cacheTotal > 0
-          ? `${theme.fg("dim", " · ")}${theme.fg("warning", `${ICON.cache} ${formatTokens(cacheReadNow)} (${formatTokens(_cacheTotal)})${hitRate != null ? ` ${ICON.hitRate} ${hitRate.toFixed(1)}%` : ""}`)}`
+          ? `${theme.fg("dim", " · ")}${theme.fg("warning", `${icons.cache} ${formatTokens(cacheReadNow)} (${formatTokens(_cacheTotal)})${hitRate != null ? ` ${icons.hitRate} ${hitRate.toFixed(1)}%` : ""}`)}`
           : "";
 
       // Git branch + dirty state — pi's format: ~/Projects (main).
@@ -292,16 +299,16 @@ export default function (pi: ExtensionAPI) {
       const dirty = branch ? gitDirtyDisplay() : "";
       const cwdDisplay =
         branch && branch !== "detached"
-          ? `${ICON.folder} ${cwdText} (${branch}${dirty})`
-          : `${ICON.folder} ${cwdText}`;
+          ? `${icons.folder} ${cwdText} (${branch}${dirty})`
+          : `${icons.folder} ${cwdText}`;
 
       // Model in accent; thinking label in its level token — same hue the
       // border takes on, so switching levels visibly retints both together.
       return {
-        topLeft: ` ${theme.fg("accent", `${ICON.model} ${model}`)}${theme.fg("dim", " · ")}${theme.fg(thinkingColor, `${ICON.thinking} ${thinking}`)} `,
+        topLeft: ` ${theme.fg("accent", `${icons.model} ${model}`)}${theme.fg("dim", " · ")}${theme.fg(thinkingColor, `${icons.thinking} ${thinking}`)} `,
         topRight: buildPinned(),
         // Context in severity color; cwd stays muted so it never competes.
-        bottomLeft: ` ${theme.fg(contextToken(pct), `${ICON.context} ${ctxText}`)}${cachePart} `,
+        bottomLeft: ` ${theme.fg(contextToken(pct), `${icons.context} ${ctxText}`)}${cachePart} `,
         bottomRight: theme.fg("muted", ` ${cwdDisplay} `),
       };
     };
@@ -310,6 +317,10 @@ export default function (pi: ExtensionAPI) {
     ctx.ui.setWorkingVisible(false);
 
     ctx.ui.setEditorComponent((tui, theme, keybindings) => {
+      // pi may rebuild the editor mid-session (model switch, reload). Stop the
+      // previous editor's spinner timer so it can't keep firing requestRender()
+      // on a stale tui handle.
+      editor?.setSpinner(null);
       editor = new CardEditor(tui, theme, keybindings, provider);
       return editor;
     });