pi-extmgr 0.1.2 → 0.1.4

package/README.md

@@ -1,430 +1,83 @@
-# 🔧 pi-extmgr
+# pi-extmgr
 
-<img width="2560" height="369" alt="image" src="https://i.imgur.com/nP5rJPC.png" />
-
-> Enhanced UI/UX for managing Pi extensions and discovering community packages
+<img width="2560" height="369" alt="image" src="https://i.imgur.com/tTD31v8.png" />
 
 [![CI](https://github.com/ayagmar/pi-extmgr/actions/workflows/ci.yml/badge.svg)](https://github.com/ayagmar/pi-extmgr/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-**pi-extmgr** transforms extension management in Pi from a command-line chore into a delightful interactive experience. Browse, install, and manage extensions with an intuitive TUI interface, smart autocomplete, and one-click operations.
-
-<!-- Replace with actual demo GIF/Screenshot when available -->
-<!-- ![Demo](demo.gif) -->
-
-## ✨ Features
-
-### 🎨 Interactive TUI Interface
-
-- **Beautiful themed interface** with color-coded status indicators
-- **Unified view** - local extensions and npm/git packages in one screen
-- **Keyboard-driven navigation** - fast and efficient
-- **Real-time previews** with package descriptions
-- **Context-aware help** - press `?` anywhere for shortcuts
-
-### 📋 Unified Extension Manager
-
-All your extensions in one place:
-
-- **Local extensions**: `● enabled` / `○ disabled` with `[G]` global or `[P]` project scope
-- **Installed packages**: `◆` npm / `◇` git icon with name@version and size info
-- **Visual distinction** between toggle-able locals and action-based packages
-- **Smart deduplication** - packages already managed as local extensions are hidden
-- **Theme adaptive UI** - Works consistently in dark and light themes
-
-### 🔍 Smart Package Discovery
-
-- **Browse community packages** with pagination (20 per page)
-- **Cached search results** - npm metadata cached for 24 hours for fast navigation
-- **Keyword filtering** - automatically shows `pi-package` tagged npm packages
-- **Detailed package info** - view version, author, homepage, and install size
-
-### 📦 Flexible Installation
-
-- **Multiple source support**: npm, git, local paths
-- **Two install modes**:
-  - **Managed** (npm) - Auto-updates with `pi update`, stored in pi's package cache
-  - **Standalone** (local) - Full package directory to `~/.pi/agent/extensions/{package}/`
-- **Multi-file extension support** - Local install copies entire package directory, preserving imports
-- **Auto-extract** from npm tarballs for local installs
-- **One-click reload** after installation
-
-### ⚡ Quick Extension Management
-
-- **Enable/disable extensions** with staging (preview before applying)
-- **Package actions** - update/remove/view details without leaving the manager
-- **Visual change indicators** (`*`) show pending modifications
-- **Bulk operations** - update all packages at once
-- **Scope indicators**: Global (G) vs Project (P) for all items
-
-### 📊 Extension Change History
+A better way to manage Pi extensions. Browse, install, enable/disable, and remove extensions from one place.
 
-Track all your extension management actions:
-
-- **Automatic logging** - Every toggle, install, update, and remove is recorded
-- **Session persistence** - View change history with `/extensions history`
-- **Statistics** - View totals by action type with `/extensions stats`
-- **Error tracking** - Failed operations are logged with error details
-
-### 🎯 Quality of Life
-
-- **Tab autocomplete** for all subcommands
-- **Status bar integration** - shows installed package count
-- **Keyboard shortcut**: `Ctrl+Shift+E` opens extension manager
-- **Non-interactive mode** - works in scripts and CI
-- **Parallel data loading** - local extensions and packages fetched simultaneously
-- **Metadata caching** - npm package info cached for 24 hours for faster browsing
-
-## 🚀 Installation
+## Install
 
 ```bash
 pi install npm:pi-extmgr
 ```
 
-Then reload Pi:
+Then reload Pi with `/reload`.
 
-```
-/reload
-```
+## What it does
 
-## 📖 Usage
+- **Unified view**: See all your local extensions and installed npm/git packages in one list
+- **Toggle extensions**: Enable/disable local extensions with Space/Enter, save with `S`
+- **Package actions**: Update or remove installed packages with `A`
+- **Browse community**: Search and install from npm (`R` to browse)
+- **History tracking**: See what you've changed with `/extensions history`
 
-### Interactive Mode (Recommended)
+## Usage
+
+Open the manager:
 
 ```
-/extensions              # Open unified interactive manager
+/extensions
 ```
 
-The unified view displays:
-
-- **Local extensions** first (toggle-able)
-- **Installed packages** second (action-based)
-- Sorted alphabetically within each group
-
-#### Keyboard Shortcuts
-
-| Key           | Action                                              |
-| ------------- | --------------------------------------------------- |
-| `↑↓`          | Navigate items                                      |
-| `Space/Enter` | Toggle local extension on/off                       |
-| `S`           | Save changes to local extensions                    |
-| `A`           | Actions on selected package (update/remove/details) |
-| `R`           | Browse remote packages                              |
-| `?` / `H`     | Show help                                           |
-| `Esc`         | Cancel / Exit                                       |
-
-**Staged Changes**: Toggle extensions on/off without immediate effect. Press `S` to apply all changes at once. Pending changes show `*` next to the extension name.
-
-#### Package Actions
-
-When a package is selected, press `A` to:
-
-- **Update package** - fetch latest version
-- **Remove package** - uninstall completely
-- **View details** - see version, source, scope
-- **Back to manager** - return to unified view
-
-#### Community Package Browser
+### In the manager
 
-Browse and install from npm:
+| Key           | Action                                           |
+| ------------- | ------------------------------------------------ |
+| `↑↓`          | Navigate                                         |
+| `Space/Enter` | Toggle local extension on/off                    |
+| `S`           | Save changes                                     |
+| `A`           | Actions on selected package (update/remove/view) |
+| `R`           | Browse remote packages                           |
+| `?` / `H`     | Help                                             |
+| `Esc`         | Exit                                             |
 
-| Key     | Action               |
-| ------- | -------------------- |
-| `↑↓`    | Navigate packages    |
-| `Enter` | View package details |
-| `N`     | Next page            |
-| `P`     | Previous page        |
-| `R`     | Refresh search       |
-| `Esc`   | Cancel               |
-
-### Command Reference
+### Commands
 
 ```bash
-# Unified Manager (Recommended)
-/extensions                   # Open unified interactive manager
-
-# Legacy Commands
-/extensions list              # List local extensions (text output)
-/extensions installed         # Redirects to unified view
-
-# Package Discovery
-/extensions remote            # Browse community packages
-/extensions packages          # Alias for remote
-/extensions search <query>    # Search npm for packages
-
-# Package Management
-/extensions install <source>  # Install from npm/git/path
-/extensions remove [source]   # Remove package (interactive if no source)
-/extensions uninstall [source]# Alias for remove
-
-# History & Stats
-/extensions history           # View recent extension changes
-/extensions stats             # View extension manager statistics
-/extensions clear-cache       # Clear metadata cache
+/extensions                      # Open the manager
+/extensions search <query>       # Search npm
+/extensions install <source>     # Install package
+/extensions remove [source]      # Remove package
+/extensions history              # View change history
+/extensions stats                # View statistics
+/extensions clear-cache          # Clear metadata cache
 ```
 
-### Install Sources
+### Install sources
 
 ```bash
-# npm packages (auto-detected if no prefix)
-/extensions install npm:some-package
+/extensions install npm:package-name
 /extensions install @scope/package
-
-# Git repositories
 /extensions install git:https://github.com/user/repo.git
-
-# GitHub single-file extensions (.ts files)
-# Automatically converts blob URLs to raw and downloads directly
 /extensions install https://github.com/user/repo/blob/main/extension.ts
-
-# Local paths
 /extensions install /path/to/extension.ts
-/extensions install ./my-extension/
-```
-
-### Non-Interactive Mode
-
-All commands work in non-interactive environments (CI, scripts):
-
-```bash
-# These work without UI
-/extensions list
-/extensions installed
-
-# These require arguments in non-interactive mode
-/extensions install npm:package-name
-/extensions remove npm:package-name
-```
-
-## 🎮 Keyboard Shortcuts
-
-### Global
-
-- `Ctrl+Shift+E` - Open Extensions Manager
-
-### In Unified Manager
-
-| Key            | Action                          |
-| -------------- | ------------------------------- |
-| `↑/↓` or `K/J` | Navigate                        |
-| `Enter/Space`  | Toggle local extension          |
-| `S`            | Save changes                    |
-| `A`            | Package actions (update/remove) |
-| `R`            | Browse remote packages          |
-| `?` / `H`      | Help                            |
-| `Esc`          | Cancel / Exit                   |
-
-## 🏗️ Extension Discovery
-
-pi-extmgr discovers extensions from multiple sources:
-
-### Local Extensions
-
-```
-~/.pi/agent/extensions/              # Global
-├── my-extension.ts
-├── disabled-extension.ts.disabled
-└── my-extension/
-    └── index.ts
-
-./.pi/extensions/                    # Project
-├── project-tool.ts
-└── local-helper/
-    └── index.ts
-```
-
-### Installed Packages
-
-Managed by `pi install`:
-
-- npm packages (`npm:package@version`)
-- git packages (`git:https://...`)
-- Stored in pi's package cache
-
-**Naming**: Append `.disabled` to disable a local extension without removing it.
-
-## 🔧 Configuration
-
-No configuration needed! But you can customize your Pi theme to change the appearance:
-
-```typescript
-// In your theme extension
-export default function myTheme(pi: ExtensionAPI) {
-  pi.registerTheme({
-    name: "my-theme",
-    colors: {
-      accent: "#00ff00",
-      success: "#00aa00",
-      error: "#ff0000",
-      warning: "#ffaa00",
-      // ... other colors
-    },
-  });
-}
-```
-
-## 📝 Example Workflows
-
-### Managing All Extensions
-
-1. Press `Ctrl+Shift+E` or type `/extensions`
-2. See all local extensions and installed packages in one view
-3. Navigate with `↑↓`
-4. For local extensions: press `Space` to toggle on/off
-5. For packages: press `A` for actions (update/remove)
-6. Press `S` to save any changes to local extensions
-7. Confirm reload to apply changes
-
-### Installing a New Extension
-
-1. Type `/extensions` to open manager
-2. Press `R` for remote packages
-3. Browse or search for the extension
-4. Press `Enter` on the desired package
-5. Choose install mode:
-   - **"Install via npm (managed)"** - Uses pi's package manager. Auto-updates with `pi update`. Best for most users.
-   - **"Install locally (standalone)"** - Copies entire package to `~/.pi/agent/extensions/{package}/`. Supports multi-file extensions with imports. Manual updates required.
-6. Confirm installation
-7. Choose to reload Pi to activate
-
-**Local Install Directory Structure:**
-
-```
-~/.pi/agent/extensions/
-└── pi-some-extension/          # Full package directory
-    ├── index.ts               # Entry point
-    ├── utils.ts               # Helper (imports work!)
-    └── package.json           # Original package.json preserved
-```
-
-### Updating a Package
-
-1. Type `/extensions` to open unified manager
-2. Navigate to the installed package
-3. Press `A` for actions
-4. Select "Update package"
-5. Confirm reload if updated
-
-### Disabling a Local Extension Temporarily
-
-1. Type `/extensions` to open manager
-2. Navigate to the local extension with `↑↓`
-3. Press `Space` to toggle it off
-4. Press `S` to save
-5. Confirm reload
-
-The extension remains installed but won't load until re-enabled.
-
-### Removing a Package
-
-1. Type `/extensions` to open unified manager
-2. Navigate to the installed package with `↑↓`
-3. Press `A` for actions
-4. Select "Remove package"
-5. Confirm removal
-
-**Important**: Unlike install/update, removing a package requires a **full restart** of pi (not just `/reload`). The extension files are deleted, but the extension remains loaded in memory until you exit and restart pi.
-
-### Updating All Packages
-
-1. Type `/extensions` to open unified manager
-2. Navigate to any installed package
-3. Press `A` for actions
-4. Select "Update package"
-5. Or use command: `/extensions install npm:pi-extmgr` then select "[Update all packages]"
-
-### Viewing Change History
-
-See what you've done in the current session:
-
-```
-/extensions history
-```
-
-Output shows recent actions like:
-
-```
-[12:34:56] ✓ global:my-extension: enabled → disabled
-[12:35:10] ✓ Installed pi-some-package@1.2.3
-[12:36:22] ✓ Updated pi-other-package → @2.0.0
-```
-
-### Viewing Statistics
-
-Get a summary of your extension management activity:
-
-```
-/extensions stats
-```
-
-Shows installed package count, total changes, and breakdown by action type.
-
-## 🐛 Troubleshooting
-
-### Commands not showing after install
-
-Make sure to reload Pi:
-
-```
-/reload
+/extensions install ./local-folder/
 ```
 
-### Extension not appearing in list
-
-Check that the file has a `.ts` or `.js` extension and is in one of the discovery paths:
-
-- `~/.pi/agent/extensions/` (global)
-- `.pi/extensions/` (project)
+## Tips
 
-### Package installation fails
-
-- Check npm is installed and accessible
-- For git installs, ensure git is available
-- Verify the package has the `pi-package` keyword for browsing
-
-### Commands still work after removing package
-
-This is expected behavior. When you remove a package:
-
-1. The files are deleted from disk
-2. The extension remains loaded in pi's memory
-3. Commands continue to work until you **restart pi**\n
-   A full restart (Ctrl+C or `/quit`) is required to fully unload removed extensions. `/reload` is only sufficient for install/update operations.
-
-### Back to manager closes everything
-
-Fixed! Pressing "Back to manager" now correctly returns to the unified view instead of closing.
-
-## 🤝 Contributing
-
-Contributions welcome! Please ensure:
-
-1. Run `pnpm run check` before committing
-2. Husky pre-commit hooks will validate automatically
-3. Follow existing code style
-
-```bash
-# Setup
-git clone https://github.com/ayagmar/pi-extmgr.git
-cd pi-extmgr
-pnpm install
-
-# Development
-pnpm run typecheck  # Type checking
-pnpm run lint       # Linting
-pnpm run check      # Full validation
-
-# Test in Pi
-pi install ./index.ts
-/reload
-```
+- **Staged changes**: Toggle extensions on/off, then press `S` to apply all at once. A `*` shows pending changes.
+- **Two install modes**:
+  - **Managed** (npm): Auto-updates with `pi update`, stored in pi's package cache
+  - **Local** (standalone): Copies to `~/.pi/agent/extensions/{package}/`, supports multi-file extensions
+- **Remove requires restart**: After removing a package, you need to fully restart Pi (not just `/reload`) for it to be completely unloaded.
 
-## 📄 License
+## Keyboard shortcut
 
-MIT © [ayagmar](https://github.com/ayagmar)
+Press `Ctrl+Shift+E` anywhere to open the extension manager.
 
----
+## License
 
-<p align="center">
-  Made with ❤️ for the Pi community
-</p>
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-extmgr",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Enhanced UX for managing local Pi extensions and community packages",
   "keywords": [
     "pi-package",
@@ -30,7 +30,7 @@
       "./src/index.ts"
     ],
     "video": "https://github.com/ayagmar/pi-extmgr/releases/download/v0.0.2/Screencast_20260207_013142.mp4",
-    "image": "https://i.imgur.com/nP5rJPC.png"
+    "image": "https://i.imgur.com/tTD31v8.png"
   },
   "peerDependencies": {
     "@mariozechner/pi-coding-agent": "*",

package/src/ui/remote.ts

@@ -4,7 +4,7 @@
 import type { ExtensionAPI, ExtensionCommandContext } from "@mariozechner/pi-coding-agent";
 import type { BrowseAction, NpmPackage } from "../types/index.js";
 import { PAGE_SIZE } from "../constants.js";
-import { truncate } from "../utils/format.js";
+import { truncate, dynamicTruncate } from "../utils/format.js";
 import {
   searchNpmPackages,
   getSearchCache,
@@ -119,9 +119,11 @@ export async function browseRemotePackages(
       : `Search: ${truncate(query, 40)}`;
 
   // Use simple select instead of custom component to avoid hanging issues
+  // Calculate reserved space: name (~25) + version (~10) + separator (3) = ~40 chars
+  const reservedSpace = 40;
   const selectItems: string[] = packages.map(
     (p) =>
-      `${p.name}${p.version ? ` @${p.version}` : ""} - ${truncate(p.description || "No description", 50)}`
+      `${p.name}${p.version ? ` @${p.version}` : ""} - ${dynamicTruncate(p.description || "No description", reservedSpace)}`
   );
 
   // Add navigation options

package/src/ui/unified.ts

@@ -21,7 +21,7 @@ import { showPackageActions } from "../packages/management.js";
 import { showRemote } from "./remote.js";
 import { showHelp } from "./help.js";
 import { discoverExtensions as discoverExt } from "../extensions/discovery.js";
-import { formatEntry as formatExtEntry, truncate } from "../utils/format.js";
+import { formatEntry as formatExtEntry, dynamicTruncate } from "../utils/format.js";
 import {
   getStatusIcon,
   getPackageIcon,
@@ -291,8 +291,9 @@ function formatUnifiedItemLabel(
     const infoParts: string[] = [];
 
     // Show description if available
+    // Reserved space: icon (2) + scope (3) + name (~25) + version (~10) + separator (3) = ~43 chars
     if (item.description) {
-      infoParts.push(truncate(item.description, 40));
+      infoParts.push(dynamicTruncate(item.description, 43));
     } else if (item.source?.startsWith("npm:")) {
       infoParts.push("npm");
     } else if (item.source?.startsWith("git:")) {

package/src/utils/format.ts

@@ -8,6 +8,36 @@ export function truncate(text: string, maxLength: number): string {
   return text.slice(0, maxLength - 3) + "...";
 }
 
+/**
+ * Get the terminal width, with a minimum fallback
+ */
+export function getTerminalWidth(minWidth = 80): number {
+  return Math.max(minWidth, process.stdout.columns || minWidth);
+}
+
+/**
+ * Calculate available space for description based on fixed-width elements
+ */
+export function getDescriptionWidth(
+  totalWidth: number,
+  reservedSpace: number,
+  minDescWidth = 20
+): number {
+  return Math.max(minDescWidth, totalWidth - reservedSpace);
+}
+
+/**
+ * Dynamic truncate that adapts to available terminal width
+ * @param text - Text to truncate
+ * @param reservedSpace - Space taken by fixed elements (icons, name, version, etc.)
+ * @param minWidth - Minimum terminal width to consider
+ */
+export function dynamicTruncate(text: string, reservedSpace: number, minWidth = 80): string {
+  const termWidth = getTerminalWidth(minWidth);
+  const maxDescWidth = getDescriptionWidth(termWidth, reservedSpace);
+  return truncate(text, maxDescWidth);
+}
+
 export function formatEntry(entry: ExtensionEntry): string {
   const state = entry.state === "enabled" ? "on " : "off";
   const scope = entry.scope === "global" ? "G" : "P";