pi-observability 1.0.1 → 1.3.1

package/.oxfmtrc.json

@@ -0,0 +1,3 @@
+{
+  "ignorePatterns": []
+}

package/.oxlintrc.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "typescript",
+    "unicorn",
+    "oxc"
+  ],
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {},
+  "env": {
+    "builtin": true
+  }
+}

package/.zed/settings.json

@@ -0,0 +1,222 @@
+{
+  "lsp": {
+    "oxlint": {
+      "initialization_options": {
+        "settings": {
+          "configPath": "./.oxlintrc.json",
+          "run": "onType",
+          "disableNestedConfig": false,
+          "fixKind": "safe_fix",
+          "typeAware": true,
+          "unusedDisableDirectives": "deny"
+        }
+      }
+    },
+    "oxfmt": {
+      "initialization_options": {
+        "settings": {
+          "configPath": "./vite.config.ts",
+          "run": "onSave"
+        }
+      }
+    }
+  },
+  "languages": {
+    "CSS": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "HTML": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "JavaScript": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ],
+      "code_action": "source.fixAll.oxc"
+    },
+    "JSX": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "JSON": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "JSON5": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "JSONC": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "Less": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "Markdown": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "MDX": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "SCSS": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "TypeScript": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "TSX": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "Vue.js": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    },
+    "YAML": {
+      "format_on_save": "on",
+      "prettier": {
+        "allowed": false
+      },
+      "formatter": [
+        {
+          "language_server": {
+            "name": "oxfmt"
+          }
+        }
+      ]
+    }
+  }
+}

package/README.md

@@ -1,26 +1,101 @@
 # 🔭 pi-observability
 
-A [pi](https://github.com/mariozechner/pi) extension that replaces the default footer with a live observability bar and provides a full dashboard command.
+A [pi](https://github.com/mariozechner/pi) extension that replaces the default footer with a live observability bar, provides a full dashboard command, and prints a TPS summary after each agent run.
 
 ## Features
 
-- **Live footer bar** showing:
-  - Session input/output tokens & estimated cost
-  - Live TPS (tokens per second) during streaming
-  - Session runtime
-  - Current model & git branch
-  - Git diff stats (added/removed lines)
-  - Context usage (current / max)
+- **Live footer bar** — Fully customizable status bar with configurable segments, layout presets, and context-zone thresholds:
+  - **Model & thinking level** — Colors match pi's input field (off/low/medium/high). `xhigh`/`max` renders in rainbow
+  - **Session runtime**
+  - **Working directory** — Toggle between folder name or full path
+  - **Git branch & diff stats** — Added/removed lines
+  - **Context usage** — Progress bar + percentage + token count, with color-coded zones
+  - **Session tokens** — Input/output totals
+  - **Live TPS** — During streaming (chunk-based estimate)
+  - **Estimated cost**
 
-- **`/obs` command** — Print a full observability dashboard with per-turn breakdowns and last 10 session history
+- **`/obs` command** — Full-screen TUI dashboard with per-turn breakdowns and last 10 session history. Renders through pi's native TUI (no console spam), with theme-aware borders and dynamic terminal width.
+
+- **End-of-run TPS notification** — Prints the legacy TPS summary after each agent run: output TPS, input/output tokens, cache read/write tokens, total tokens, and elapsed time.
 
 - **`/obs-toggle` command** — Toggle the live footer on/off
 
+- **`/obs-settings` command** — Interactive TUI for customizing the footer: choose from 4 layout presets or toggle individual segments and set context-usage warning thresholds
+
 ## Preview
 
+![pi-observability demo](./demo-preview.gif)
+
+### Footer
+
+Compact single-line layout that falls back to two lines when the terminal is narrow:
+
+```
+gpt-5.5:high ▸ ⏱ 12:34 ▸ 📁 my-app ▸  main +42 -7 ▸ ctx [████░░░░░░] 42% 4.2k/200k ▸ ↑1.2k ↓3.4k ▸ $0.0042
+```
+
+With `xhigh` or `max` thinking, the model name renders in rainbow:
+
+```
+gpt-5.5:xhigh ▸ ⏱ 12:34 ▸ 📁 my-app ▸ ↑1.2k ↓3.4k ▸ $0.0042
+```
+
+#### Settings
+
+Run `/obs-settings` to open the interactive settings panel:
+
+| Preset | Description |
+|--------|-------------|
+| `minimal` | Model, context usage (bar + numbers), cost only |
+| `standard` | Everything except TPS (default) |
+| `verbose` | All segments on |
+| `performance` | Model, context %, TPS, cost |
+
+Individual segments you can toggle:
+
+- **Model & Thinking** — Model name + thinking level
+- **Runtime** — Session timer
+- **Working Directory** — Current folder or full path (`/obs-toggle-path`)
+- **Git Branch & Diff** — Branch name + added/removed line counts
+- **Context Usage** — Master toggle with 3 sub-options:
+  - Progress bar (`[████░░░░░░]`)
+  - Percentage
+  - Token count (`used/total`)
+- **Session Tokens** — Total input/output
+- **TPS** — Live during streaming, last-turn when idle
+- **Cost** — Estimated session cost
+
+Context-usage color zones (configurable):
+
+| Zone | Default | Color |
+|------|---------|-------|
+| Normal | ≤ 70% | Green |
+| Expert | 71–85% | Yellow |
+| Warning | > 85% | Red |
+
+### Dashboard (`/obs`)
+
 ```
-~/projects/my-app (main)  +42 -7
-⏱ 12:34  ctx 4.2k/200k  ↑1.2k ↓3.4k  $0.0042  ⚡ 45.2 tok/s      claude-sonnet-4
+┌──────────────────────────────────────────┐
+│ Agent Observability Dashboard            │
+├──────────────────────────────────────────┤
+│ Runtime: 12:34    Dir: ~/projects/my-app │
+│ Branch: main    Model: claude-sonnet-4   │
+├──────────────────────────────────────────┤
+│ Tokens: ↑1.2k ↓3.4k                      │
+│ Cost: $0.004200                          │
+└──────────────────────────────────────────┘
+
+  TURNS  (2)
+  #   Input   Output   Time   TPS    Cost    Model
+  ─────────────────────────────────────────────────
+  1   ↑450    ↓1200    0:45   26.7   $0.00   claude-sonnet-4
+  2   ↑320    ↓900     0:32   28.1   $0.00   claude-sonnet-4
+
+  LAST 10 SESSIONS
+  When                Duration   Turns   Input   Output   Cost
+  ───────────────────────────────────────────────────────────
+  Apr 18, 04:19 PM    9:05       10      ↑110k   ↓9.9k    $0.00
 ```
 
 ## Install
@@ -39,34 +114,26 @@ pi install git:github.com/imran-vz/pi-observability
 
 ### Manual
 
-Copy `extensions/observability.ts` to `~/.pi/agent/extensions/observability.ts` (or `.pi/extensions/observability.ts` for project-local).
+Copy the entire `extensions/` directory to `~/.pi/agent/extensions/` (or `.pi/extensions/` for project-local):
+
+```bash
+cp -r extensions/* ~/.pi/agent/extensions/
+```
+
+> **Note:** This extension is split into multiple files (`observability.ts` + `lib/`). Copying only the main file will break imports.
 
 ## Commands
 
 | Command | Description |
 |---------|-------------|
-| `/obs` | Print full observability dashboard + last 10 sessions history |
+| `/obs` | Open full observability dashboard in TUI overlay |
 | `/obs-toggle` | Toggle the observability footer on/off |
+| `/obs-toggle-path` | Toggle between folder name and full path in footer |
+| `/obs-settings` | Open interactive footer settings (presets, segments, context zones) |
 
-## Dashboard Output
+## Migration from TPS
 
-```
-╔══════════════════════════════════════════════════════════════╗
-║  🕵️  Agent Observability Dashboard                           ║
-╠══════════════════════════════════════════════════════════════╣
-║  Runtime: 12:34                                              ║
-║  Dir: ~/projects/my-app                                      ║
-║  Branch: main                                                ║
-║  Model: claude-sonnet-4                                      ║
-╠══════════════════════════════════════════════════════════════╣
-║  Tokens: ↑1.2k ↓3.4k                                         ║
-║  Cost: $0.004200                                             ║
-╠══════════════════════════════════════════════════════════════╣
-║  Turns:                                                      ║
-║  #1  ↑450  ↓1200  0:45  26.7/s  $0.0015  claude-sonne       ║
-║  #2  ↑320  ↓900   0:32  28.1/s  $0.0012  claude-sonne       ║
-╚══════════════════════════════════════════════════════════════╝
-```
+The standalone TPS extension is no longer required. pi-observability now includes its end-of-run TPS notification, so remove `~/.pi/agent/extensions/tps.ts` if it is installed to avoid duplicate notifications.
 
 ## Requirements
 

package/extensions/lib/footer-engine/format.ts

@@ -0,0 +1,67 @@
+import { homedir } from "node:os";
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+
+export function fmtDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) ms = 0;
+  const s = Math.floor(ms / 1000);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (h > 0) return `${h}:${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+  return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+
+export function fmtTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return `${n}`;
+}
+
+export function shortenPath(p: string): string {
+  const home = homedir();
+  if (home && p.startsWith(home)) return p.replace(home, "~");
+  return p;
+}
+
+export function thinkingColor(level: string): ThemeColor {
+  switch (level) {
+    case "off":
+      return "thinkingOff";
+    case "minimal":
+      return "thinkingMinimal";
+    case "low":
+      return "thinkingLow";
+    case "medium":
+      return "thinkingMedium";
+    case "high":
+      return "thinkingHigh";
+    case "xhigh":
+      return "thinkingXhigh";
+    default:
+      return "thinkingOff";
+  }
+}
+
+export function contextUsageColor(pct: number, expert: number, warning: number): ThemeColor {
+  if (pct <= expert) return "success";
+  if (pct <= warning) return "warning";
+  return "error";
+}
+
+export function rainbowText(text: string): string {
+  const colors = [
+    "\x1b[38;2;255;0;0m", // red
+    "\x1b[38;2;255;127;0m", // orange
+    "\x1b[38;2;255;255;0m", // yellow
+    "\x1b[38;2;0;255;0m", // green
+    "\x1b[38;2;0;255;255m", // cyan
+    "\x1b[38;2;0;0;255m", // blue
+    "\x1b[38;2;255;0;255m", // magenta
+  ];
+  let result = "";
+  for (let i = 0; i < text.length; i++) {
+    result += colors[i % colors.length] + text[i];
+  }
+  result += "\x1b[0m";
+  return result;
+}

package/extensions/lib/footer-engine/index.ts

@@ -0,0 +1,55 @@
+export type {
+  SegmentKey,
+  FooterSettings,
+  FooterInput,
+  SegmentRenderer,
+  LayoutAssembler,
+  FooterEngineOptions,
+} from "./types.js";
+
+export {
+  fmtDuration,
+  fmtTokens,
+  shortenPath,
+  thinkingColor,
+  contextUsageColor,
+  rainbowText,
+} from "./format.js";
+
+export { builtinRenderers } from "./segments.js";
+export { defaultAssembler } from "./layout.js";
+
+import { builtinRenderers } from "./segments.js";
+import { defaultAssembler } from "./layout.js";
+import type { FooterInput, FooterEngineOptions } from "./types.js";
+
+export function renderFooter(input: FooterInput, width: number): string[] {
+  const segments: Record<string, string> = {};
+  for (const [key, renderer] of Object.entries(builtinRenderers)) {
+    if (input.settings.segments[key as keyof FooterInput["settings"]["segments"]]) {
+      segments[key] = renderer(input);
+    } else {
+      segments[key] = "";
+    }
+  }
+  return defaultAssembler(segments, width, input.theme);
+}
+
+export function createFooterEngine(options: FooterEngineOptions) {
+  const segmentRenderers = { ...builtinRenderers, ...options.segments };
+  const assembler = options.layout ?? defaultAssembler;
+
+  return {
+    render(input: FooterInput, width: number): string[] {
+      const segments: Record<string, string> = {};
+      for (const [key, renderer] of Object.entries(segmentRenderers)) {
+        if (input.settings.segments[key as keyof FooterInput["settings"]["segments"]]) {
+          segments[key] = renderer(input);
+        } else {
+          segments[key] = "";
+        }
+      }
+      return assembler(segments, width, input.theme);
+    },
+  };
+}

package/extensions/lib/footer-engine/layout.ts

@@ -0,0 +1,47 @@
+import { visibleWidth, truncateToWidth } from "@earendil-works/pi-tui";
+import type { LayoutAssembler } from "./types.js";
+
+export const defaultAssembler: LayoutAssembler = (segments, width, theme) => {
+  const sep = " " + theme.fg("dim", "▸") + " ";
+
+  const leftParts = [segments["modelThink"]].filter(Boolean);
+  const rightParts = [
+    segments["contextUsage"],
+    segments["tokens"],
+    segments["tps"],
+    segments["cost"],
+  ].filter(Boolean);
+  const middleParts = [segments["runtime"], segments["pwd"], segments["git"]].filter(Boolean);
+
+  const leftStr = leftParts.join(sep);
+  const rightStr = rightParts.join(sep);
+  const middleStr = middleParts.join(sep);
+
+  const singleLine = middleStr
+    ? leftStr + sep + middleStr + sep + rightStr
+    : leftStr + sep + rightStr;
+
+  if (visibleWidth(singleLine) <= width) {
+    const pad = width - visibleWidth(singleLine);
+    return [singleLine + " ".repeat(Math.max(0, pad))];
+  }
+
+  // Fallback: two lines
+  function fitLine(parts: string[]): string {
+    const line = parts.filter(Boolean).join(sep);
+    const w = visibleWidth(line);
+    if (w < width) return line + " ".repeat(width - w);
+    if (w > width) return truncateToWidth(line, width);
+    return line;
+  }
+
+  const line1 = fitLine([segments["modelThink"], segments["pwd"], segments["git"]]);
+  const line2 = fitLine([
+    segments["runtime"],
+    segments["contextUsage"],
+    segments["tokens"],
+    segments["tps"],
+    segments["cost"],
+  ]);
+  return [line1, line2];
+};

package/extensions/lib/footer-engine/segments.ts

@@ -0,0 +1,95 @@
+import { basename } from "node:path";
+import type { SegmentRenderer } from "./types.js";
+import {
+  fmtDuration,
+  fmtTokens,
+  shortenPath,
+  thinkingColor,
+  contextUsageColor,
+  rainbowText,
+} from "./format.js";
+
+export const builtinRenderers: Record<string, SegmentRenderer> = {
+  modelThink(input) {
+    const { model, thinkingLevel, fastModeEnabled, serviceTier, theme } = input;
+    const text = `${model}:${thinkingLevel}`;
+    const tier = fastModeEnabled ? theme.fg("accent", ` ⚡${serviceTier ?? "fast"}`) : "";
+    if (thinkingLevel === "xhigh" || thinkingLevel === "max") {
+      return rainbowText(text) + tier;
+    }
+    return theme.fg(thinkingColor(thinkingLevel), text) + tier;
+  },
+
+  runtime(input) {
+    return input.theme.fg("dim", `⏱ ${fmtDuration(input.runtimeMs)}`);
+  },
+
+  pwd(input) {
+    const path = input.showFullPath ? shortenPath(input.cwd) : basename(input.cwd);
+    return input.theme.fg("dim", `📁 ${path}`);
+  },
+
+  git(input) {
+    const { gitBranch, gitDiffAdded, gitDiffRemoved, theme } = input;
+    if (!gitBranch) return "";
+    let text = theme.fg("dim", ` ${gitBranch}`);
+    if (gitDiffAdded > 0 || gitDiffRemoved > 0) {
+      text += ` ${theme.fg("success", `+${gitDiffAdded}`)} ${theme.fg("error", `-${gitDiffRemoved}`)}`;
+    }
+    return text;
+  },
+
+  contextUsage(input) {
+    const { contextUsage, theme, settings } = input;
+    if (!contextUsage || !contextUsage.contextWindow) return "";
+
+    const tokens = contextUsage.tokens || 0;
+    const max = contextUsage.contextWindow;
+    const pct = Math.min(100, Math.max(0, Math.round((tokens / max) * 100)));
+
+    let text = "ctx";
+
+    if (settings.segments.contextProgress) {
+      const barWidth = 10;
+      const filled = Math.round((pct / 100) * barWidth);
+      const empty = barWidth - filled;
+      const bar = "█".repeat(filled) + "░".repeat(empty);
+      text += ` [${bar}]`;
+    }
+
+    if (settings.segments.contextPercentage) {
+      text += ` ${pct}%`;
+    }
+
+    if (settings.segments.contextNumbers) {
+      text += ` ${fmtTokens(tokens)}/${fmtTokens(max)}`;
+    }
+
+    return theme.fg(
+      contextUsageColor(pct, settings.contextZones.expert, settings.contextZones.warning),
+      text,
+    );
+  },
+
+  tokens(input) {
+    const { totalInputTokens, totalOutputTokens, theme } = input;
+    return theme.fg("dim", `↑${fmtTokens(totalInputTokens)} ↓${fmtTokens(totalOutputTokens)}`);
+  },
+
+  tps(input) {
+    const { isStreaming, currentTurnStartTime, currentTurnUpdateCount, lastTurnTps, theme } = input;
+    if (isStreaming && currentTurnStartTime) {
+      const elapsed = (Date.now() - currentTurnStartTime) / 1000;
+      const liveTps = elapsed > 0 ? currentTurnUpdateCount / elapsed : 0;
+      return theme.fg("accent", `⚡${liveTps.toFixed(1)}`);
+    } else if (lastTurnTps > 0) {
+      return theme.fg("dim", `⚡${lastTurnTps.toFixed(1)}`);
+    }
+    return "";
+  },
+
+  cost(input) {
+    const { totalCost, theme } = input;
+    return theme.fg("dim", `$${totalCost.toFixed(4)}`);
+  },
+};