pi-observability 1.0.0 → 1.3.0

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/DEVELOPMENT.md

@@ -0,0 +1,243 @@
+# Development Workflow
+
+This guide covers how to develop, test, and publish the `pi-observability` extension.
+
+## Table of Contents
+
+- [Project Structure](#project-structure)
+- [Local Development](#local-development)
+- [Testing Changes](#testing-changes)
+- [Publishing](#publishing)
+- [Versioning](#versioning)
+- [Troubleshooting](#troubleshooting)
+
+---
+
+## Project Structure
+
+```
+pi-observability/
+├── extensions/
+│   └── observability.ts          # Main extension entry point
+├── package.json                  # Package manifest + pi config
+├── tsconfig.json                 # TypeScript config
+├── README.md                     # User-facing docs
+├── DEVELOPMENT.md                # This file
+└── LICENSE
+```
+
+The `pi` key in `package.json` declares what pi loads:
+
+```json
+{
+  "pi": {
+    "extensions": ["./extensions/observability.ts"]
+  }
+}
+```
+
+---
+
+## Local Development
+
+### 1. Clone and install
+
+```bash
+git clone https://github.com/imran-vz/pi-observability.git
+cd pi-observability
+npm install
+```
+
+### 2. Link for live testing
+
+The fastest way to iterate is to **symlink** the extension into pi's auto-discovery directory. This lets you edit the source file and hot-reload with `/reload`.
+
+```bash
+npm run dev:link
+```
+
+This creates a symlink:
+```
+~/.pi/agent/extensions/observability.ts → ./extensions/observability.ts
+```
+
+> **Important:** If you previously had a copy (not symlink) at `~/.pi/agent/extensions/observability.ts`, this script removes it first.
+
+### 3. Start pi and test
+
+```bash
+pi
+```
+
+Make edits to `extensions/observability.ts`, then in pi run:
+
+```
+/reload
+```
+
+The extension reloads instantly. No need to restart pi.
+
+### 4. Unlink when done
+
+```bash
+npm run dev:unlink
+```
+
+This removes the symlink. To continue using the published version, reinstall:
+
+```bash
+pi install npm:pi-observability
+```
+
+### Alternative: `-e` flag (quick tests)
+
+For one-off testing without linking:
+
+```bash
+pi -e ./extensions/observability.ts
+```
+
+This loads the extension for that session only. Good for testing on a clean slate.
+
+### Alternative: Local path in settings
+
+Add to `~/.pi/agent/settings.json`:
+
+```json
+{
+  "extensions": ["/absolute/path/to/pi-observability/extensions/observability.ts"]
+}
+```
+
+---
+
+## Testing Changes
+
+Before publishing, verify:
+
+1. **Type check:**
+   ```bash
+   npm run typecheck
+   ```
+
+2. **Load in pi:**
+   ```bash
+   npm run dev:link
+   pi
+   ```
+
+3. **Test all commands:**
+   - `/obs` — Dashboard prints correctly
+   - `/obs-toggle` — Footer toggles on/off
+   - Footer updates during streaming
+   - History persists across sessions
+
+4. **Test edge cases:**
+   - Non-git directories (diff stats should show 0)
+   - Very long paths (truncation works)
+   - Context window exceeded (usage display)
+   - Multiple models in one session
+
+---
+
+## Publishing
+
+### Prerequisites
+
+- Logged into npm: `npm login`
+- Write access to the GitHub repo
+- Clean working tree: `git status`
+
+### Release workflow
+
+**Patch release** (bug fixes):
+```bash
+npm run version:patch   # bumps 1.0.0 → 1.0.1, tags, pushes
+npm run publish:pkg     # publishes to npm
+```
+
+**Minor release** (new features):
+```bash
+npm run version:minor   # bumps 1.0.0 → 1.1.0
+npm run publish:pkg
+```
+
+**Major release** (breaking changes):
+```bash
+npm run version:major   # bumps 1.0.0 → 2.0.0
+npm run publish:pkg
+```
+
+### What `npm version` does
+
+1. Updates `version` in `package.json`
+2. Creates a git commit: `1.0.1`
+3. Creates a git tag: `v1.0.1`
+4. Pushes commit + tag to origin
+
+### After publishing
+
+Users update with:
+```bash
+pi update
+```
+
+Or reinstall to get the latest:
+```bash
+pi remove npm:pi-observability
+pi install npm:pi-observability
+```
+
+---
+
+## Versioning
+
+We follow [SemVer](https://semver.org/):
+
+| Version change | When to use |
+|----------------|-------------|
+| **Patch** `1.0.0 → 1.0.1` | Bug fixes, typo corrections, performance improvements |
+| **Minor** `1.0.0 → 1.1.0` | New commands, new footer features, new metrics |
+| **Major** `1.0.0 → 2.0.0` | Breaking changes (command renames, removed features) |
+
+---
+
+## Troubleshooting
+
+### Extension not loading after `/reload`
+
+```bash
+# Check the symlink points to the right place
+ls -la ~/.pi/agent/extensions/observability.ts
+
+# If it's a copy instead of a symlink, remove and re-link
+rm ~/.pi/agent/extensions/observability.ts
+npm run dev:link
+```
+
+### Type errors from pi packages
+
+Pi bundles its core packages at runtime. The `devDependencies` are only for IDE support. If TypeScript complains about missing modules during `npm run typecheck`, make sure you've run:
+
+```bash
+npm install
+```
+
+### Published version not updating for users
+
+npm has a TTL on package metadata. Users may need:
+```bash
+pi remove npm:pi-observability
+pi install npm:pi-observability
+```
+
+Or wait a few minutes and run `pi update`.
+
+### Conflicts with local copy
+
+If you have both the npm-installed version and a local symlink, pi may load both. Unlink during published-version testing:
+
+```bash
+npm run dev:unlink
+pi
+```

package/README.md

@@ -1,6 +1,6 @@
 # 🔭 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
 
@@ -8,19 +8,69 @@ A [pi](https://github.com/mariozechner/pi) extension that replaces the default f
   - Session input/output tokens & estimated cost
   - Live TPS (tokens per second) during streaming
   - Session runtime
-  - Current model & git branch
+  - Current model, thinking level, fast mode & git branch
   - Git diff stats (added/removed lines)
   - Context usage (current / max)
+  - **Thinking level colors match pi's input field** — off/low/medium/high use the same theme colors as the editor border
+  - **Rainbow mode** — `xhigh` and `max` thinking levels render the model indicator in cycling rainbow colors
 
-- **`/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
 
 ## Preview
 
+### Screed recording
+
+> GitHub does not render inline MP4 players in `README.md`, so here's a short animated preview. Click it to open the full recording.
+
+[![Animated preview of pi-observability](./demo-preview.gif)](./output.mp4)
+
+[Open the full screed recording (MP4)](./output.mp4)
+
+### 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 4.2k/200k ▸ ↑1.2k ↓3.4k ▸ ⚡45.2 ▸ $0.0042
+```
+
+With `xhigh` or `max` thinking, the model name renders in rainbow:
+
 ```
-~/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
+gpt-5.5:xhigh ▸ ⏱ 12:34 ▸ 📁 my-app ▸ ↑1.2k ↓3.4k ▸ ⚡45.2 ▸ $0.0042
+```
+
+### Git diff in the status bar
+
+![Git diff in the footer status bar](./diff.png)
+
+### Dashboard (`/obs`)
+
+```
+┌──────────────────────────────────────────┐
+│ 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 +89,25 @@ 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 |
 
-## 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 "@mariozechner/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;
+}