@pi-unipi/info-screen 0.1.2 → 0.1.4

package/core-groups.ts

@@ -173,6 +173,78 @@ function discoverExtensions(): Array<{ name: string; source: string; version: st
   return extensions;
 }
 
+/**
+ * Load time tracking.
+ */
+const loadTimes: Array<{ name: string; type: string; ms: number }> = [];
+let totalLoadTimeMs = 0;
+let loadTrackingStarted = false;
+let loadTrackingStartMs = 0;
+const moduleStartTimes = new Map<string, number>();
+
+/** Start load time tracking */
+export function startLoadTracking(): void {
+  if (!loadTrackingStarted) {
+    loadTrackingStartMs = Date.now();
+    loadTrackingStarted = true;
+  }
+}
+
+/** Record when a module starts loading */
+export function recordModuleStart(name: string): void {
+  moduleStartTimes.set(name, Date.now());
+}
+
+/** Record a load time */
+export function recordLoadTime(name: string, type: string, ms?: number): void {
+  // If no ms provided, calculate from start time
+  if (ms === undefined || ms === 0) {
+    const startTime = moduleStartTimes.get(name);
+    if (startTime) {
+      ms = Date.now() - startTime;
+    } else {
+      ms = 0;
+    }
+  }
+  // Avoid duplicates
+  const existing = loadTimes.find(t => t.name === name && t.type === type);
+  if (!existing) {
+    loadTimes.push({ name, type, ms });
+    totalLoadTimeMs += ms;
+  }
+}
+
+/** Finish load tracking */
+export function finishLoadTracking(): void {
+  if (loadTrackingStarted) {
+    totalLoadTimeMs = Date.now() - loadTrackingStartMs;
+  }
+}
+
+/** Get load times */
+export function getLoadTimes(): Array<{ name: string; type: string; ms: number }> {
+  return [...loadTimes];
+}
+
+/** Get total load time */
+export function getTotalLoadTime(): number {
+  return totalLoadTimeMs > 0 ? totalLoadTimeMs : (loadTrackingStarted ? Date.now() - loadTrackingStartMs : 0);
+}
+
+/**
+ * Additional skill directories registered by extensions.
+ */
+const extraSkillDirs: string[] = [];
+
+/**
+ * Register an additional skill directory (from extensions).
+ */
+export function registerSkillDir(dir: string): void {
+  if (!extraSkillDirs.includes(dir)) {
+    extraSkillDirs.push(dir);
+  }
+}
+
 /**
  * Discover loaded skills by scanning filesystem.
  */
@@ -185,6 +257,8 @@ function discoverSkills(): Array<{ name: string; source: string }> {
   const skillDirs = [
     join(homeDir, ".pi", "agent", "skills"),
     join(cwd, ".pi", "skills"),
+    // Add extra dirs from extensions
+    ...extraSkillDirs,
   ];
 
   const counted = new Set<string>();
@@ -204,10 +278,14 @@ function discoverSkills(): Array<{ name: string; source: string }> {
         const skillPath = join(dir, name, "SKILL.md");
         if (existsSync(skillPath)) {
           counted.add(name);
-          skills.push({
-            name,
-            source: dir.includes(homeDir) ? "global" : "project",
-          });
+          // Determine source based on path
+          let source = "extension";
+          if (dir.includes(join(homeDir, ".pi"))) {
+            source = "global";
+          } else if (dir === join(cwd, ".pi", "skills")) {
+            source = "project";
+          }
+          skills.push({ name, source });
         }
       }
     } catch {
@@ -228,6 +306,18 @@ const announcedModules: Array<{ name: string; version: string }> = [];
  */
 const registeredTools: Array<{ name: string; source: string }> = [];
 
+/**
+ * Reference to pi API for getting tools.
+ */
+let piApi: any = null;
+
+/**
+ * Set the pi API reference.
+ */
+export function setPiApi(api: any): void {
+  piApi = api;
+}
+
 /**
  * Add a module to the announced list.
  */
@@ -299,6 +389,43 @@ export function registerCoreGroups(): void {
     },
   });
 
+  // 1b. Load time group
+  infoRegistry.registerGroup({
+    id: "loadtime",
+    name: "Load Time",
+    icon: "⏱️",
+    priority: 15,
+    config: {
+      showByDefault: true,
+      stats: [
+        { id: "total", label: "Total Load Time", show: true },
+        { id: "count", label: "Items Loaded", show: true },
+        { id: "list", label: "Load Times", show: true },
+      ],
+    },
+    dataProvider: async () => {
+      const times = getLoadTimes();
+      const total = getTotalLoadTime();
+      
+      // Sort by load time descending
+      const sorted = [...times].sort((a, b) => b.ms - a.ms);
+      
+      // Build list as comma-separated values
+      const listStr = sorted.length > 0 
+        ? sorted.map(t => `${t.name} (${t.ms}ms)`).join(", ") 
+        : "none";
+
+      return {
+        total: { value: `${total}ms` },
+        count: { value: String(times.length) },
+        list: {
+          value: sorted.length > 0 ? `${sorted[0].name} (${sorted[0].ms}ms)` : "none",
+          detail: sorted.length > 1 ? sorted.slice(1).map(t => `${t.name} (${t.ms}ms)`).join(", ") : undefined,
+        },
+      };
+    },
+  });
+
   // 2. Usage group
   infoRegistry.registerGroup({
     id: "usage",
@@ -374,20 +501,56 @@ export function registerCoreGroups(): void {
       ],
     },
     dataProvider: async () => {
-      const tools = getRegisteredTools();
-      const builtin = tools.filter((t) => t.source === "builtin");
-      const custom = tools.filter((t) => t.source === "registered");
+      // Use pi.getAllTools() to get actual tools with source info
+      let tools: Array<{ name: string; source?: string; sourceInfo?: any }> = [];
+      
+      if (piApi && typeof piApi.getAllTools === "function") {
+        try {
+          tools = piApi.getAllTools();
+        } catch {
+          // Fallback to tracked tools
+          tools = getRegisteredTools();
+        }
+      } else {
+        tools = getRegisteredTools();
+      }
 
-      // Build tool list - show all
+      // Categorize by source
+      const builtin = tools.filter((t) => {
+        const source = t.sourceInfo?.source || t.source;
+        return source === "builtin";
+      });
+      const extension = tools.filter((t) => {
+        const source = t.sourceInfo?.source || t.source;
+        return source !== "builtin" && source !== "sdk";
+      });
+      const sdk = tools.filter((t) => {
+        const source = t.sourceInfo?.source || t.source;
+        return source === "sdk";
+      });
+
+      // Build tool list as comma-separated values with wrapping
       const toolNames = tools.map((t) => `${t.name}`);
+      // Split into chunks of ~60 chars for wrapping
+      const chunks: string[] = [];
+      let current = "";
+      for (const name of toolNames) {
+        if (current && (current.length + name.length + 2) > 60) {
+          chunks.push(current);
+          current = name;
+        } else {
+          current = current ? `${current}, ${name}` : name;
+        }
+      }
+      if (current) chunks.push(current);
 
       return {
         total: { value: String(tools.length) },
         builtin: { value: String(builtin.length) },
-        registered: { value: String(custom.length) },
+        registered: { value: String(extension.length + sdk.length) },
         list: {
-          value: toolNames.length > 0 ? toolNames[0] : "none",
-          detail: toolNames.length > 1 ? toolNames.slice(1).join("\n") : undefined,
+          value: chunks.length > 0 ? chunks[0] : "none",
+          detail: chunks.length > 1 ? chunks.slice(1).join("\n") : undefined,
         },
       };
     },
@@ -453,16 +616,28 @@ export function registerCoreGroups(): void {
       const global = skills.filter((s) => s.source === "global");
       const project = skills.filter((s) => s.source === "project");
 
-      // Build skill list - show all
+      // Build skill list as comma-separated values with wrapping
       const skillNames = skills.map((s) => `${s.name} (${s.source})`);
+      // Split into chunks of ~60 chars for wrapping
+      const chunks: string[] = [];
+      let current = "";
+      for (const name of skillNames) {
+        if (current && (current.length + name.length + 2) > 60) {
+          chunks.push(current);
+          current = name;
+        } else {
+          current = current ? `${current}, ${name}` : name;
+        }
+      }
+      if (current) chunks.push(current);
 
       return {
         count: { value: String(skills.length) },
         global: { value: String(global.length) },
         project: { value: String(project.length) },
         list: {
-          value: skillNames.length > 0 ? skillNames[0] : "none",
-          detail: skillNames.length > 1 ? skillNames.slice(1).join("\n") : undefined,
+          value: chunks.length > 0 ? chunks[0] : "none",
+          detail: chunks.length > 1 ? chunks.slice(1).join("\n") : undefined,
         },
       };
     },

package/index.ts

@@ -12,10 +12,10 @@
 import type { ExtensionAPI, ExtensionContext } from "@mariozechner/pi-coding-agent";
 import { UNIPI_EVENTS, MODULES, UNIPI_PREFIX, emitEvent, getPackageVersion } from "@pi-unipi/core";
 import { infoRegistry } from "./registry.js";
-import { registerCoreGroups, trackModule, trackTool } from "./core-groups.js";
+import { registerCoreGroups, trackModule, trackTool, setPiApi, registerSkillDir, startLoadTracking, recordLoadTime, finishLoadTracking, recordModuleStart } from "./core-groups.js";
 
-/** Re-export infoRegistry for external use */
-export { infoRegistry };
+/** Re-export infoRegistry, registerSkillDir, and load tracking for external use */
+export { infoRegistry, registerSkillDir, startLoadTracking, recordLoadTime, finishLoadTracking, recordModuleStart };
 import { getInfoSettings } from "./config.js";
 import { InfoOverlay } from "./tui/info-overlay.js";
 import { SettingsOverlay } from "./settings/settings-tui.js";
@@ -31,33 +31,38 @@ const moduleReadyPromise = new Promise<void>((resolve) => {
 });
 
 /** Timeout for waiting for modules */
-const MODULE_WAIT_TIMEOUT_MS = 2000;
+const MODULE_WAIT_TIMEOUT_MS = 5000;
 
 /**
- * Wait for all modules to announce, then return.
+ * Wait for modules to announce, then return.
  */
 async function waitForModules(): Promise<void> {
   const settings = getInfoSettings();
-  const timeoutMs = settings.bootTimeoutMs;
+  const timeoutMs = settings.bootTimeoutMs || MODULE_WAIT_TIMEOUT_MS;
 
-  // Wait for module ready or timeout
-  await Promise.race([
-    moduleReadyPromise,
-    new Promise<void>((resolve) => setTimeout(resolve, timeoutMs)),
-  ]);
+  // Wait a bit for modules to announce
+  // We wait for the full timeout to give all modules time to emit MODULE_READY
+  await new Promise<void>((resolve) => setTimeout(resolve, timeoutMs));
 }
 
 export default function (pi: ExtensionAPI) {
+  // Set pi API reference for tools access
+  setPiApi(pi);
+
   // Register core groups on load
   registerCoreGroups();
 
 
 
+  // Start load tracking
+  startLoadTracking();
+
   // Listen for module announcements
   pi.events.on(UNIPI_EVENTS.MODULE_READY, (event: any) => {
     if (event.name && event.name !== MODULES.INFO_SCREEN) {
       // Track the module
       trackModule(event.name, event.version || "unknown");
+      recordLoadTime(event.name, "module", event.loadTimeMs);
 
       // Track tools from this module
       if (event.tools && Array.isArray(event.tools)) {
@@ -126,6 +131,9 @@ export default function (pi: ExtensionAPI) {
       );
     }
 
+    // Finish load tracking
+    finishLoadTracking();
+
     // Announce module
     emitEvent(pi, UNIPI_EVENTS.MODULE_READY, {
       name: MODULES.INFO_SCREEN,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-unipi/info-screen",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Dashboard and module registry for Unipi — configurable info overlay with tabbed groups",
   "type": "module",
   "license": "MIT",

package/tui/info-overlay.ts

@@ -26,9 +26,7 @@ const ansi = {
   white: "\x1b[37m",
   red: "\x1b[31m",
   gray: "\x1b[90m",
-  // Backgrounds
-  bgDarkGray: "\x1b[48;5;235m",
-  bgDarkerGray: "\x1b[48;5;233m",
+
 };
 
 /** Tab color palette */
@@ -50,7 +48,7 @@ export class InfoOverlay implements Component {
   private loading = true;
   private error: string | null = null;
   private scrollOffset = 0;
-  /** Tab scroll offset for horizontal scrolling */
+  /** Tab scroll offset for windowed scrolling */
   private tabScrollOffset = 0;
   /** Callback when overlay should close */
   onClose?: () => void;
@@ -155,12 +153,12 @@ export class InfoOverlay implements Component {
       return this.renderError(width);
     }
 
-    // Check for new groups (but don't re-trigger loading)
+    // Check for new groups and re-fetch data
     const allGroups = infoRegistry.getAllGroups();
     const groupIds = allGroups.map(g => g.id).join(",");
     const currentIds = this.groups.map(g => g.id).join(",");
     
-    if (groupIds !== currentIds) {
+    if (groupIds !== currentIds || this.groups.length !== allGroups.length) {
       this.groups = allGroups;
       // Apply saved order
       const settings = getInfoSettings();
@@ -172,10 +170,11 @@ export class InfoOverlay implements Component {
           return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
         });
       }
-      // Load data for any new groups (non-blocking)
-      this.loadDataForNewGroups(allGroups);
     }
 
+    // Always re-fetch data for all groups to catch late updates
+    this.refreshAllData();
+
     if (this.groups.length === 0) {
       return this.renderEmpty(width);
     }
@@ -199,6 +198,22 @@ export class InfoOverlay implements Component {
     }
   }
 
+  /**
+   * Refresh data for all groups (non-blocking).
+   */
+  private refreshAllData(): void {
+    for (const group of this.groups) {
+      // Invalidate cache to get fresh data
+      infoRegistry.invalidateCache(group.id);
+      // Fetch fresh data (non-blocking)
+      infoRegistry.getGroupData(group.id).then(data => {
+        this.groupData.set(group.id, data);
+      }).catch(() => {
+        // Ignore errors
+      });
+    }
+  }
+
   /**
    * Render loading state.
    */
@@ -263,46 +278,39 @@ export class InfoOverlay implements Component {
     // Inner width for content (subtract 2 for left+right borders)
     const innerWidth = width - 2;
 
-    // Background colors
-    const bgHeader = ansi.bgDarkGray;
-    const bgContent = ansi.bgDarkerGray;
+    // Fixed content height for stability
+    const CONTENT_HEIGHT = 12;
 
     // Top border
     lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
 
-    // Header with background
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderHeader(innerWidth, group), innerWidth, bgHeader)}${ansi.dim}│${ansi.reset}`);
+    // Header
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderHeader(innerWidth, group), innerWidth)}${ansi.dim}│${ansi.reset}`);
     lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
 
     // Tab bar with horizontal scrolling
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderTabBar(innerWidth), innerWidth, bgHeader)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderTabBar(innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
     lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
 
-    // Content with scrolling
+    // Content with scrolling (fixed height)
     const contentLines = this.renderGroupContent(innerWidth, group, data);
-    const maxVisibleLines = 15; // Max content lines visible
     
     // Clamp scroll offset
-    const maxScroll = Math.max(0, contentLines.length - maxVisibleLines);
+    const maxScroll = Math.max(0, contentLines.length - CONTENT_HEIGHT);
     this.scrollOffset = Math.min(this.scrollOffset, maxScroll);
     
     // Get visible slice
-    const visibleContent = contentLines.slice(this.scrollOffset, this.scrollOffset + maxVisibleLines);
+    const visibleContent = contentLines.slice(this.scrollOffset, this.scrollOffset + CONTENT_HEIGHT);
     
-    for (const line of visibleContent) {
-      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth, bgContent)}${ansi.dim}│${ansi.reset}`);
-    }
-    
-    // Show scroll indicator if needed
-    if (contentLines.length > maxVisibleLines) {
-      const scrollInfo = ` ${this.scrollOffset + 1}-${Math.min(this.scrollOffset + maxVisibleLines, contentLines.length)}/${contentLines.length} `;
-      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(scrollInfo, innerWidth, bgContent)}${ansi.dim}│${ansi.reset}`);
+    // Render content lines (pad to fixed height)
+    for (let i = 0; i < CONTENT_HEIGHT; i++) {
+      const line = visibleContent[i] ?? "";
+      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
     }
 
-    // Footer
-    const hasScroll = contentLines.length > maxVisibleLines;
+    // Footer with scroll indicator inline
     lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderFooter(innerWidth, hasScroll), innerWidth, bgHeader)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.renderFooterWithScroll(innerWidth, contentLines.length, CONTENT_HEIGHT)}${ansi.dim}│${ansi.reset}`);
     lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
 
     return lines;
@@ -327,8 +335,9 @@ export class InfoOverlay implements Component {
   }
 
   /**
-   * Render tab bar with horizontal scrolling.
-   * When tabs overflow, slides to keep active tab visible.
+   * Render tab bar with windowed scrolling.
+   * Window slides only when active tab reaches the edge.
+   * Example: abcde → user on 'e' presses right → efghi
    */
   private renderTabBar(width: number): string {
     if (this.groups.length === 0) return "";
@@ -337,13 +346,15 @@ export class InfoOverlay implements Component {
     const tabWidths = this.groups.map(g => visibleWidth(` ${g.icon} ${g.name} `));
     const separatorWidth = visibleWidth(`${ansi.dim}│${ansi.reset}`);
     
-    // Find how many tabs fit
+    // Find how many tabs fit (account for potential scroll indicators)
+    const indicatorSpace = 3; // Space for ◀ or ▶
     let maxTabs = 0;
     let totalWidth = 0;
     for (let i = 0; i < this.groups.length; i++) {
       const tabW = tabWidths[i]!;
       const sepW = i > 0 ? separatorWidth : 0;
-      if (totalWidth + sepW + tabW > width - 2) break;
+      // Reserve space for scroll indicator on one side
+      if (totalWidth + sepW + tabW > width - 2 - indicatorSpace) break;
       totalWidth += sepW + tabW;
       maxTabs = i + 1;
     }
@@ -353,15 +364,27 @@ export class InfoOverlay implements Component {
       return this.renderAllTabs(width);
     }
 
-    // Calculate scroll offset to keep active tab visible
-    // Center the active tab in the visible window
-    const halfVisible = Math.floor(maxTabs / 2);
-    let startIdx = this.activeTabIndex - halfVisible;
-    startIdx = Math.max(0, Math.min(startIdx, this.groups.length - maxTabs));
+    // Windowed scrolling: slide only when active tab reaches edge
+    // Initialize tabScrollOffset if needed
+    if (this.tabScrollOffset === undefined) {
+      this.tabScrollOffset = 0;
+    }
+
+    // Ensure active tab is visible within the window
+    if (this.activeTabIndex < this.tabScrollOffset) {
+      // Active tab is before window - slide left
+      this.tabScrollOffset = this.activeTabIndex;
+    } else if (this.activeTabIndex >= this.tabScrollOffset + maxTabs) {
+      // Active tab is after window - slide right
+      this.tabScrollOffset = this.activeTabIndex - maxTabs + 1;
+    }
+
+    // Clamp scroll offset
+    this.tabScrollOffset = Math.max(0, Math.min(this.tabScrollOffset, this.groups.length - maxTabs));
     
     // Build visible tabs
     const tabs: string[] = [];
-    for (let i = startIdx; i < startIdx + maxTabs && i < this.groups.length; i++) {
+    for (let i = this.tabScrollOffset; i < this.tabScrollOffset + maxTabs && i < this.groups.length; i++) {
       const group = this.groups[i]!;
       const isActive = i === this.activeTabIndex;
       const color = TAB_COLORS[i % TAB_COLORS.length]!;
@@ -376,8 +399,8 @@ export class InfoOverlay implements Component {
     const tabStr = tabs.join(`${ansi.dim}│${ansi.reset}`);
     
     // Add scroll indicators
-    const hasLeft = startIdx > 0;
-    const hasRight = startIdx + maxTabs < this.groups.length;
+    const hasLeft = this.tabScrollOffset > 0;
+    const hasRight = this.tabScrollOffset + maxTabs < this.groups.length;
     
     if (hasLeft) {
       return `${ansi.dim}◀${ansi.reset} ${tabStr}`;
@@ -474,26 +497,37 @@ export class InfoOverlay implements Component {
   }
 
   /**
-   * Render footer with navigation hints.
+   * Render footer with navigation hints and scroll indicator.
    */
-  private renderFooter(width: number, _hasScroll?: boolean): string {
+  private renderFooterWithScroll(width: number, totalLines: number, visibleHeight: number): string {
+    // Left side: scroll indicator
+    const hasScroll = totalLines > visibleHeight;
+    let scrollStr = "";
+    if (hasScroll) {
+      scrollStr = `${ansi.dim}${this.scrollOffset + 1}-${Math.min(this.scrollOffset + visibleHeight, totalLines)}/${totalLines}${ansi.reset}`;
+    }
+
+    // Right side: navigation hints
     const hints = [
       `${ansi.cyan}←/→${ansi.reset} tabs`,
+      `${ansi.green}↑/↓${ansi.reset} scroll`,
+      `${ansi.red}q/Esc${ansi.reset} close`,
     ];
-    
-    hints.push(`${ansi.green}↑/↓${ansi.reset} scroll`);
-    hints.push(`${ansi.yellow}g/G${ansi.reset} top/bottom`);
-    hints.push(`${ansi.red}q/Esc${ansi.reset} close`);
 
     const hintStr = hints.join(`  ${ansi.dim}•${ansi.reset}  `);
-    const visLen = visibleWidth(hintStr);
+    const hintWidth = visibleWidth(hintStr);
+    const scrollWidth = visibleWidth(scrollStr);
 
-    if (visLen >= width - 4) {
-      return truncateToWidth(hintStr, width - 4);
+    // Calculate spacing
+    const gap = 4;
+    const totalWidth = scrollWidth + gap + hintWidth;
+    
+    if (totalWidth >= width - 2) {
+      // Too wide, just show hints
+      return truncateToWidth(hintStr, width - 2);
     }
 
-    const leftPad = Math.floor((width - visLen) / 2);
-
-    return " ".repeat(leftPad) + hintStr;
+    const padding = " ".repeat(width - 2 - totalWidth);
+    return scrollStr + padding + hintStr;
   }
 }

package/types.ts

@@ -70,7 +70,7 @@ export interface GroupSettings {
 /** Default settings */
 export const DEFAULT_SETTINGS: InfoScreenSettings = {
   showOnBoot: true,
-  bootTimeoutMs: 2000,
+  bootTimeoutMs: 5000,
   groups: {},
   groupOrder: [],
 };