pi-editor-footer 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -4,6 +4,35 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-08-21
+### Changed
+- Timeline format now two-line dim per user spec: `2026-08-21 13:48:46 GMT+8 · 11s · ↑ 495 · ↓ 708 · c 85.3% · $0.00` + `3 turns · 5 tools · 1 failed` (datetime with timezone via `Intl` `en-CA` `short` TZ, wall `formatDuration`, `↑`/`↓` `fmtTokens`, cache `glyphs.cacheHit` `latestCacheHitRate`, cost `$`, turn/tools/failed from `runActivity` snapshot)
+- Dimmed timeline now in transcript between runs — `User: hello? / Assistant: hi. / <dim timeline>` left-aligned dim, injected into `chatContainer` (scrollable) via `InteractiveMode` patch, not `aboveEditor` widget, so it sits between each `User/Assistant` pair and scrolls with history
+- Dimmed timeline between each agent run in transcript — `chatContainer` injection `User/Assistant/<dim timeline>` left-aligned dim `· 8s wall · ↑ 1.2k · ↓ 800 · $0.12` via `InteractiveMode` patch (not `aboveEditor` widget), one per `agent_settled` per `timeline.*`, permanent in scroll history, never exposed to model (between transcript bottom and input), one per `agent_settled` (`· 8s wall · ↑ 1.2k · ↓ 800 · $0.12`), permanent between runs, never exposed to model (pi-tui only exposes `aboveEditor`/`belowEditor` widgets, so stacking aboveEditor is the non-exposing compromise)
+- Wall time dim line left aligned and permanent between `agent_end` and next `agent_start` (`aboveEditor` `· 8s wall · ↑` dim left, not centered, stays in gap, never exposed)
+- Dim line after `agent_end` now with specified timeline metrics (`timeline.enabled`/`wallTime`/`tokens`/`cost` in `ThemeConfig`, `Timeline` tab in `/pi-editor-footer` settings) — `· 8s wall · ↑ 1.2k · ↓ 800 · $0.12` dim aboveEditor, never exposed to model
+- Wall time dim line after `agent_end` now positioned after last agent message in transcript (`aboveEditor` widget `· 8s wall · ↑ 1.2k · ↓ 800 · $0.12` dim, not footer second line) — visible right after `agent_end` message, hidden on next `agent_start`, never exposed to model
+- Wall time dim line after `agent_end` now a separate footer row (was inline `cwd · wall`) — now `line1: cwd · runtime | ↑·↓·$` and `line2: · 8s wall · ↑ 1.2k · ↓ 800 · $0.12` dim, so timeline is visible
+- Tokens separator now `·` not `|` (`↑ 1.2k · ↓ 800 · $0.12` in footer stats and `· 8s wall · ↑ · ↓ · $` dim line)
+- Settings window title aligned to repo name `pi-editor-footer Settings` (was `pi-lsz-theme Settings`) and slash command renamed `pi-footer` → `pi-editor-footer`
+- Tokens/cost relocated from telemetry bottom to wall time dim line — bottom now `TPS 4.0 tok/s · TTFT 4.0s · 5.0s` (no `↑`/`↓`/`$`), dim line after `agent_end` is `· 8s wall · ↑ 1.2k · ↓ 800 · $0.12` (all `dim`, TUI-only, never exposed to model, via `FooterState.lastDoneIn` + `getUsageTotals` gated by `telemetry.tokens`/`cost`)
+- Git branch never folded — `renderGitSegment` no longer `truncateBranch(…,20)`, full `feature/very-long-…` shown; priority `6` (> cwd `5`) so `fitSegmentsByPriority` never omits branch before cwd/runtime/stats
+- Telemetry TPS display throttled to 1 s (data vs display separated) — `message_update` now only updates `liveDeltaChars`/`liveEstimatedTokens` in `TurnTelemetryTracker`, display `peekLive()` → `formatTurnTelemetry` only via `liveTickTimer` every `REFRESH_MS` and `message_start`/`end`/`turn_end`/`agent_settled` for approximately accurate TPS without per-delta TUI jank
+- Telemetry cost toggling `telemetry.cost` off/on no longer resets cost to `$0.00` — `refreshLiveTelemetry` now falls back to `getLastTelemetry()` when `peekLive()` is null (idle) and `onConfigChanged` calls `refreshLiveTelemetry()` immediately
+- Refresh rate set to one second (`REFRESH_MS = 1000` for `liveTickTimer` telemetry/top/context and `watchTimer` editor ownership watchdog, was hardcoded `1000`)
+- Context icon bar now switchable via config `contextIconBar` (default `false` disabled) — `0.0% · 0/1.0M | c 0.0%` by default, `# [████░░] 39.6% · 416k/1.0M | c 85.3%` when enabled (footer top, `nerd`/`ascii` glyphs)
+- Context bar format now `0.0% · 0/1.0M | c 0.0%` (was `# [#####-------] 39.6% · 416k/1.0M | c`; no icon/bar, compact `pct · tokens/W`)
+- Context bar and cache now follow icon mode (`nerd` ``/``/`█` vs `ascii` ` #`/`c`/`#`) — `refreshContextBar` called in `onConfigChanged` so top ` # [...] | c` updates immediately when `icons.mode` changes
+- Telemetry `>`, `~`, `+` glyphs removed (`TPS 60.6 tok/s · TTFT 2.5s · 8.3s · ↑395 · ↓505 · $0.16` not `> TPS … · ~ TTFT … · +8.3s`)
+- Telemetry bottom border compacted (`TPS 60.6 tok/s · TTFT 2.5s · 8.3s · ↑395 · ↓505 · $0.16` not `> TPS 60.6 tok/s | ~ TTFT 2.5s | + 8.3s | ↑ 395 | ↓ 505 | $0.16`; `TPS`/`TTFT` labels preserved, no space after `↑`/`↓`, joiner `·` not ` | `, stall `!2·3.3s` not `! stall 2x / 3.3s`)
+- Footer cache omitted to the right of input/output (`↑ 395 | ↓ 505 | $0.16` not `| c 85.3%`; cache remains only in top context bar ` # [...] | c 0.0%`)
+- Nerd mode cost now `$0.00` not ` $0.00` (always single `$` in both footer `renderFooter` and telemetry `formatTurnTelemetry`, was `glyph === "$" ? `$ / ` : `glyph $` -> ` $`)
+- Cache session now always shown with zero value (`c 0.0%` in footer `↑ | ↓ | $ | c` and ` | c 0.0%` in top context bar) instead of hidden when no cache tokens
+- Footer cost now `toFixed(2)` (`$0.16` not `$0.160`) and moved directly after input/output (`↑ 395 | ↓ 505 | $0.16 | c 85.3%` not `c | $`; `theme.fg("dim","|")` pipe)
+- Top border model label no longer shows context window (`provider/model · thinking` not `· 1.0M`; `buildLabel` ignores `contextWindow`)
+- Context bar now appends cache hit rate with pipe (` # [#####-------] 39.6% · 416k/1.0M | c 85.3%` via `formatContextBar(..., cacheHitRate)` from `getUsageTotals`) and model/context are pipe-separated (`model | context` via dim `|`)
+- Context bar moved from left bottom border to top border right of model info (`── model · thinking · 1.0M  # [#####-------] 39.6% · 416k/1.0M ── T1 · 8s` via `embedTopWithLeftAndRight`, `TrackingEditor.setTopContextText`)
+
 ## [0.2.0] - 2026-08-21
 
 ### Added

package/dist/border-renderer.js

@@ -1,5 +1,5 @@
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { applyModelInfo, } from "./model-info.js";
+import { buildLabel, } from "./model-info.js";
 function stripAnsi(s) {
     return s.replace(/\x1b\[[0-9;]*m/g, "");
 }
@@ -23,25 +23,51 @@ export class BorderRenderer {
         let out = [...lines];
         if (out.length === 0)
             return out;
-        // Top glow + label (+ optional right side for run activity)
-        if (opts.glowEnabled || opts.topRightText) {
+        // Top: model info left, context bar right of it, run-activity far right
+        const hasTop = opts.glowEnabled || opts.topRightText || opts.topContextText;
+        if (hasTop) {
+            const theme = this.getLiveTheme();
+            const info = this.getModelInfo();
+            const glow = (s) => {
+                try {
+                    const maybeGlow = theme.getThinkingBorderColor;
+                    if (typeof maybeGlow === "function")
+                        return maybeGlow.call(theme, info.level)(s);
+                }
+                catch {
+                    // ignore
+                }
+                return s;
+            };
             if (opts.glowEnabled) {
-                out = applyModelInfo(out, width, this.getLiveTheme(), this.getModelInfo());
+                // Build left label; if context bar present, append it to the right of model info with pipe separator
+                let leftLabel = buildLabel(theme, info.provider, info.modelId, info.level, info.contextWindow);
+                if (opts.topContextText) {
+                    leftLabel = `${leftLabel} ${theme.fg("dim", "|")} ${opts.topContextText}`;
+                }
+                // Embed left (model+context) and optional right (run activity) in one pass to avoid double-truncate
+                if (opts.topRightText) {
+                    out = embedTopWithLeftAndRight(out, width, leftLabel, opts.topRightText, glow);
+                }
+                else {
+                    // Only left (model+context), no right — use applyModelInfo replacement but with combined left
+                    // Reuse embedTopWithLeftAndRight with empty right
+                    out = embedTopWithLeftAndRight(out, width, leftLabel, "", glow);
+                }
             }
-            if (opts.topRightText) {
-                const theme = this.getLiveTheme();
-                const glow = (s) => {
-                    try {
-                        const maybeGlow = theme.getThinkingBorderColor;
-                        if (typeof maybeGlow === "function")
-                            return maybeGlow.call(theme, this.getModelInfo().level)(s);
-                    }
-                    catch {
-                        // ignore
-                    }
-                    return s;
-                };
-                out = embedTopRightBorder(out, width, opts.topRightText, glow);
+            else if (opts.topContextText || opts.topRightText) {
+                // No glow, but still need top borders for context/run activity
+                const left = opts.topContextText ?? "";
+                const right = opts.topRightText ?? "";
+                if (left && right) {
+                    out = embedTopWithLeftAndRight(out, width, left, right, glow);
+                }
+                else if (left) {
+                    out = embedTopRightBorder(out, width, left, glow);
+                }
+                else if (right) {
+                    out = embedTopRightBorder(out, width, right, glow);
+                }
             }
         }
         // Bottom embedding (telemetry left/right)
@@ -63,6 +89,35 @@ export class BorderRenderer {
         return out;
     }
 }
+function embedTopWithLeftAndRight(lines, width, leftText, rightText, getGlow) {
+    if (lines.length === 0)
+        return lines;
+    const top = lines[0] ?? "";
+    const plainTop = stripAnsi(top);
+    if (/^─── [↑↓] \d+ more/.test(plainTop))
+        return lines;
+    const leftW = leftText ? visibleWidth(leftText) : 0;
+    const rightW = rightText ? visibleWidth(rightText) : 0;
+    const maxLeft = rightText ? Math.max(0, width - rightW - 6) : width - 3;
+    const maxRight = leftText ? Math.max(0, width - leftW - 6) : width - 3;
+    let displayLeft = leftText;
+    let displayRight = rightText;
+    if (leftW > maxLeft)
+        displayLeft = truncateToWidth(leftText, maxLeft, "");
+    if (rightW > maxRight)
+        displayRight = truncateToWidth(rightText, maxRight, "");
+    const leftSegment = displayLeft ? `${getGlow("─")} ${displayLeft} ` : getGlow("─");
+    const rightSegment = displayRight ? ` ${displayRight} ${getGlow("─")}` : getGlow("─");
+    const used = visibleWidth(leftSegment) + visibleWidth(rightSegment);
+    const middleWidth = Math.max(0, width - used);
+    const middle = getGlow("─".repeat(middleWidth));
+    const embedded = `${leftSegment}${middle}${rightSegment}`;
+    const result = [...lines];
+    result[0] = truncateToWidth(embedded, width, "");
+    if (visibleWidth(embedded) !== width)
+        result[0] = embedded;
+    return result;
+}
 function embedBottomBorder(lines, width, leftText, rightText, getGlow) {
     if ((!leftText && !rightText) || lines.length === 0)
         return lines;

package/dist/config.js

@@ -9,6 +9,7 @@ export const DEFAULT_CONFIG = {
     icons: {
         mode: "auto",
     },
+    contextIconBar: false,
     footerSegments: {
         cwd: true,
         sessionName: false,
@@ -30,6 +31,12 @@ export const DEFAULT_CONFIG = {
         stalls: true,
         cost: true,
     },
+    timeline: {
+        enabled: true,
+        wallTime: true,
+        tokens: true,
+        cost: true,
+    },
 };
 export function getConfigPath() {
     const home = homedir();
@@ -84,6 +91,9 @@ function validate(config) {
     if (!isBoolean(config.enabled)) {
         config.enabled = DEFAULT_CONFIG.enabled;
     }
+    if (!isBoolean(config.contextIconBar)) {
+        config.contextIconBar = DEFAULT_CONFIG.contextIconBar;
+    }
     const fs = config.footerSegments;
     const dfs = DEFAULT_CONFIG.footerSegments;
     for (const k of Object.keys(dfs)) {
@@ -96,6 +106,17 @@ function validate(config) {
         if (!isBoolean(t[k]))
             t[k] = dt[k];
     }
+    const tl = config.timeline;
+    const dtl = DEFAULT_CONFIG.timeline;
+    if (!tl || typeof tl !== "object") {
+        config.timeline = structuredClone(DEFAULT_CONFIG.timeline);
+    }
+    else {
+        for (const k of Object.keys(dtl)) {
+            if (!isBoolean(tl[k]))
+                tl[k] = dtl[k];
+        }
+    }
     return config;
 }
 export class ConfigStore {

package/dist/footer.js

@@ -2,7 +2,7 @@ import { truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-work
 import { getUsageTotals } from "./state.js";
 import { resolveGlyphs, runtimeSymbol } from "./icons.js";
 import { alignRight, fitSegmentsByPriority, } from "./layout.js";
-import { basenamePath, formatCwd, truncateBranch, truncatePath, } from "./path-format.js";
+import { basenamePath, formatCwd, truncatePath, } from "./path-format.js";
 import { cacheHitColor, stressColor, } from "./color-policy.js";
 import { fmtTokens, formatDuration, sanitizeStatus } from "./format.js";
 function renderBar(theme, pct, barWidth, ascii) {
@@ -16,7 +16,7 @@ function renderBar(theme, pct, barWidth, ascii) {
         theme.fg("dim", emptyCell.repeat(empty)) +
         theme.fg("dim", "]"));
 }
-export function formatContextBar(contextUsage, theme, glyphs, isAscii, barWidth = 10) {
+export function formatContextBar(contextUsage, theme, glyphs, isAscii, barWidth = 10, cacheHitRate, showIconBar = false) {
     const contextWindow = contextUsage?.contextWindow ?? 0;
     if (contextWindow <= 0)
         return "";
@@ -24,15 +24,20 @@ export function formatContextBar(contextUsage, theme, glyphs, isAscii, barWidth
     const pctText = theme.fg(stressColor(contextPct), `${contextPct.toFixed(1)}%`);
     const contextTokens = contextUsage?.tokens ?? 0;
     const ctxText = `${theme.fg("text", fmtTokens(contextTokens))}${theme.fg("dim", "/")}${theme.fg("text", fmtTokens(contextWindow))}`;
-    const contextIcon = theme.fg(stressColor(contextPct), glyphs.context);
-    const bar = renderBar(theme, contextPct, barWidth, isAscii);
-    return `${contextIcon} ${bar} ${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
+    const baseCore = `${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
+    const base = showIconBar
+        ? `${theme.fg(stressColor(contextPct), glyphs.context)} ${renderBar(theme, contextPct, barWidth, isAscii)} ${baseCore}`
+        : baseCore;
+    const rate = cacheHitRate !== undefined && Number.isFinite(cacheHitRate) ? cacheHitRate : 0;
+    const cacheText = `${glyphs.cacheHit} ${rate.toFixed(1)}%`;
+    return `${base} ${theme.fg("dim", "|")} ${theme.fg(cacheHitColor(rate), cacheText)}`;
 }
-function renderGitSegment(theme, git, glyphs, segments, maxBranchLen = 20) {
+function renderGitSegment(theme, git, glyphs, segments) {
     const parts = [];
     if (segments.gitBranch) {
         if (git.branch) {
-            parts.push(theme.fg("mdLink", truncateBranch(git.branch, maxBranchLen)));
+            // Never truncate branch name — full name always shown per user request
+            parts.push(theme.fg("mdLink", git.branch));
         }
         else if (git.commit?.detached) {
             parts.push(theme.fg("warning", "HEAD"));
@@ -80,12 +85,17 @@ function renderRuntimeSegment(theme, runtime, iconMode) {
     const label = [symbol, version].filter(Boolean).join(" ");
     return label;
 }
-function renderTimerSegment(theme, state, glyphs) {
+function renderTimerSegment(theme, state, glyphs, totals, config) {
+    // Wall time dim line — never exposed to model, TUI-only
+    // After agent_end: · 8.3s wall · ↑ 1.2k · ↓ 800 · $0.12 (all dim)
+    // During run: working 8.3s (accent)
     if (state.workingSince !== undefined) {
         return `${theme.fg("accent", glyphs.working)} ${theme.fg("dim", "working")} ${theme.fg("accent", formatDuration(Date.now() - state.workingSince))}`;
     }
     if (state.lastDoneIn !== undefined) {
-        return `${theme.fg("success", glyphs.done)} ${theme.fg("success", "done")} ${theme.fg("text", formatDuration(state.lastDoneIn))}`;
+        // Wall time after agent_end is now a dim row after last message (aboveEditor widget), not inline footer
+        // Keep footer clean — wall time lives in transcript, not here
+        return "";
     }
     return "";
 }
@@ -135,7 +145,8 @@ export function renderFooter(width, state, config, theme, ctx) {
     const gitSeg = renderGitSegment(theme, state.git, glyphs, segments);
     if (gitSeg) {
         const sep = leftParts.length > 0 ? `${theme.fg("dim", " · ")}` : "";
-        leftParts.push({ text: `${sep}${gitSeg}`, priority: 4 });
+        // Branch name must never be folded/omitted — keep priority higher than cwd (5)
+        leftParts.push({ text: `${sep}${gitSeg}`, priority: 6 });
     }
     if (segments.runtime) {
         const runtimeSeg = renderRuntimeSegment(theme, state.runtime, config.icons.mode);
@@ -144,7 +155,7 @@ export function renderFooter(width, state, config, theme, ctx) {
             leftParts.push({ text: `${sep}${runtimeSeg}`, priority: 4 });
         }
     }
-    const timerSeg = renderTimerSegment(theme, state, glyphs);
+    const timerSeg = renderTimerSegment(theme, state, glyphs, totals, config);
     if (timerSeg) {
         const sep = leftParts.length > 0 ? `${theme.fg("dim", " • ")}` : "";
         leftParts.push({ text: `${sep}${timerSeg}`, priority: 1 });
@@ -153,18 +164,15 @@ export function renderFooter(width, state, config, theme, ctx) {
     if (segments.tokens) {
         stats.push(theme.fg("accent", `${glyphs.input} ${fmtTokens(totals.input)}`));
         stats.push(theme.fg("success", `${glyphs.output} ${fmtTokens(totals.output)}`));
-        const hasCacheTokens = totals.cacheRead > 0 || totals.cacheWrite > 0;
-        if (hasCacheTokens && totals.latestCacheHitRate !== undefined) {
-            stats.push(theme.fg(cacheHitColor(totals.latestCacheHitRate), `${glyphs.cacheHit} ${totals.latestCacheHitRate.toFixed(1)}%`));
-        }
     }
     if (segments.cost) {
-        const costValue = totals.cost.toFixed(3);
-        // Avoid "$ $0.000" when the cost glyph itself is "$" (ascii mode) — glyph already is the currency symbol
-        const costText = glyphs.cost === "$" ? `$${costValue}` : `${glyphs.cost} $${costValue}`;
+        const costValue = totals.cost.toFixed(2);
+        // Avoid "$ $0.00" when the cost glyph itself is "$" (ascii mode) — glyph already is the currency symbol
+        const costText = `$${costValue}`;
         stats.push(theme.fg("warning", costText));
     }
-    const statsBlock = stats.join(` ${theme.fg("dim", "|")} `);
+    // cache to the right of input/output omitted per user request — cache stays in top context bar only
+    const statsBlock = stats.join(` ${theme.fg("dim", "·")} `);
     const rightBlock = statsBlock;
     const rightCompact = statsBlock;
     const allParts = [...leftParts];