@pi-unipi/info-screen 0.1.3 → 0.1.5

package/core-groups.ts

@@ -180,6 +180,7 @@ 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 {
@@ -189,10 +190,28 @@ export function startLoadTracking(): void {
   }
 }
 
+/** 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 {
-  loadTimes.push({ name, type, ms });
-  totalLoadTimeMs += ms;
+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 */
@@ -209,7 +228,7 @@ export function getLoadTimes(): Array<{ name: string; type: string; ms: number }
 
 /** Get total load time */
 export function getTotalLoadTime(): number {
-  return totalLoadTimeMs;
+  return totalLoadTimeMs > 0 ? totalLoadTimeMs : (loadTrackingStarted ? Date.now() - loadTrackingStartMs : 0);
 }
 
 /**
@@ -388,17 +407,13 @@ export function registerCoreGroups(): void {
       const times = getLoadTimes();
       const total = getTotalLoadTime();
       
-      // Sort by load time descending
-      const sorted = [...times].sort((a, b) => b.ms - a.ms);
+      // Filter out 0ms entries and sort by load time descending
+      const validTimes = times.filter(t => t.ms > 0);
+      const sorted = [...validTimes].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) },
+        count: { value: String(validTimes.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,
@@ -510,16 +525,28 @@ export function registerCoreGroups(): void {
         return source === "sdk";
       });
 
-      // Build tool list as comma-separated values
+      // Build tool list as comma-separated values with wrapping
       const toolNames = tools.map((t) => `${t.name}`);
-      const toolListStr = toolNames.join(", ");
+      // 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(extension.length + sdk.length) },
         list: {
-          value: toolListStr.length > 0 ? toolListStr : "none",
+          value: chunks.length > 0 ? chunks[0] : "none",
+          detail: chunks.length > 1 ? chunks.slice(1).join("\n") : undefined,
         },
       };
     },
@@ -585,16 +612,28 @@ export function registerCoreGroups(): void {
       const global = skills.filter((s) => s.source === "global");
       const project = skills.filter((s) => s.source === "project");
 
-      // Build skill list as comma-separated values
+      // Build skill list as comma-separated values with wrapping
       const skillNames = skills.map((s) => `${s.name} (${s.source})`);
-      const skillListStr = skillNames.join(", ");
+      // 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: skillListStr.length > 0 ? skillListStr : "none",
+          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, setPiApi, registerSkillDir, startLoadTracking, recordLoadTime, finishLoadTracking } from "./core-groups.js";
+import { registerCoreGroups, trackModule, trackTool, setPiApi, registerSkillDir, startLoadTracking, recordLoadTime, finishLoadTracking, recordModuleStart } from "./core-groups.js";
 
 /** Re-export infoRegistry, registerSkillDir, and load tracking for external use */
-export { infoRegistry, registerSkillDir, startLoadTracking, recordLoadTime, finishLoadTracking };
+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";
@@ -62,7 +62,7 @@ export default function (pi: ExtensionAPI) {
     if (event.name && event.name !== MODULES.INFO_SCREEN) {
       // Track the module
       trackModule(event.name, event.version || "unknown");
-      recordLoadTime(event.name, "module", event.loadTimeMs || 0);
+      recordLoadTime(event.name, "module", event.loadTimeMs);
 
       // Track tools from this module
       if (event.tools && Array.isArray(event.tools)) {

package/package.json

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

package/settings/settings-tui.ts

@@ -35,6 +35,7 @@ export class SettingsOverlay implements Component {
   private settings: InfoScreenSettings;
   private groups: Array<{ id: string; name: string; icon: string }>;
   private selectedIndex = 0;
+  private savedGroupIndex = 0; // Saved position before entering stats mode
   private mode: "groups" | "stats" = "groups";
   private selectedGroupId: string | null = null;
   /** Callback when overlay should close */
@@ -90,9 +91,9 @@ export class SettingsOverlay implements Component {
         this.selectedIndex = (this.selectedIndex + 1) % this.groups.length;
         break;
       case " ": // Space - toggle visibility
-      case "\r": // Enter - toggle visibility
         this.toggleGroupVisibility(this.groups[this.selectedIndex].id);
         break;
+      case "\r": // Enter - enter stats mode
       case "\x1b[C": // Right - enter stats mode
       case "l":
         this.enterStatsMode(this.groups[this.selectedIndex].id);
@@ -129,14 +130,12 @@ export class SettingsOverlay implements Component {
         this.selectedIndex = (this.selectedIndex + 1) % group.config.stats.length;
         break;
       case " ": // Space - toggle stat
-      case "\r": // Enter - toggle stat
         this.toggleStatVisibility(this.selectedGroupId, group.config.stats[this.selectedIndex].id);
         break;
       case "\x1b[D": // Left - back to groups
       case "h":
-        this.mode = "groups";
-        this.selectedGroupId = null;
-        this.selectedIndex = this.groups.findIndex((g) => g.id === this.selectedGroupId) ?? 0;
+      case "\r": // Enter - also go back
+        this.backToGroups();
         break;
       case "q": // Quit from stats mode
       case "\x1b":
@@ -145,6 +144,15 @@ export class SettingsOverlay implements Component {
     }
   }
 
+  /**
+   * Return to groups mode, restoring cursor position.
+   */
+  private backToGroups(): void {
+    this.mode = "groups";
+    this.selectedIndex = this.savedGroupIndex; // Restore saved position
+    this.selectedGroupId = null;
+  }
+
   /**
    * Toggle group visibility.
    */
@@ -176,6 +184,7 @@ export class SettingsOverlay implements Component {
    * Enter stats editing mode for a group.
    */
   private enterStatsMode(groupId: string): void {
+    this.savedGroupIndex = this.selectedIndex; // Save position for later
     this.mode = "stats";
     this.selectedGroupId = groupId;
     this.selectedIndex = 0;
@@ -228,20 +237,28 @@ export class SettingsOverlay implements Component {
     }
   }
 
+  /**
+   * Pad a line to fill a target visual width.
+   */
+  private padToWidth(line: string, targetWidth: number): string {
+    const visLen = visibleWidth(line);
+    const pad = Math.max(0, targetWidth - visLen);
+    return line + " ".repeat(pad);
+  }
+
   /**
    * Render groups mode.
    */
   private renderGroupsMode(width: number): string[] {
     const lines: string[] = [];
+    const innerWidth = width - 2; // Subtract border chars
 
-    // Header
-    lines.push("");
-    lines.push(this.renderCentered(`${ansi.bold}⚙️  Info Screen Settings${ansi.reset}`, width));
-    lines.push("");
+    // Top border
+    lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
 
-    // Separator
-    lines.push(ansi.dim + "─".repeat(width) + ansi.reset);
-    lines.push("");
+    // Header
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.bold}⚙️  Info Screen Settings${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
 
     // Group list
     for (let i = 0; i < this.groups.length; i++) {
@@ -259,18 +276,17 @@ export class SettingsOverlay implements Component {
         line += `  ${ansi.dim}→ stats${ansi.reset}`;
       }
 
-      if (visibleWidth(line) > width - 2) {
-        line = truncateToWidth(line, width - 2);
+      if (visibleWidth(line) > innerWidth - 2) {
+        line = truncateToWidth(line, innerWidth - 2);
       }
 
-      lines.push(line);
+      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
     }
 
     // Footer
-    lines.push("");
-    lines.push(ansi.dim + "─".repeat(width) + ansi.reset);
-    lines.push(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  → stats  J/K reorder  q close${ansi.reset}`, width));
-    lines.push("");
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  Enter/→ stats  J/K reorder  q close${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
 
     return lines;
   }
@@ -288,15 +304,14 @@ export class SettingsOverlay implements Component {
     }
 
     const groupSettings = getGroupSettings(group.id);
+    const innerWidth = width - 2;
 
-    // Header
-    lines.push("");
-    lines.push(this.renderCentered(`${group.icon} ${group.name} Stats`, width));
-    lines.push("");
+    // Top border
+    lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
 
-    // Separator
-    lines.push(ansi.dim + "─".repeat(width) + ansi.reset);
-    lines.push("");
+    // Header
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${group.icon} ${group.name} Stats`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
 
     // Stats list
     for (let i = 0; i < group.config.stats.length; i++) {
@@ -309,18 +324,17 @@ export class SettingsOverlay implements Component {
 
       let line = `  ${indicator} ${toggle} ${stat.label}`;
 
-      if (visibleWidth(line) > width - 2) {
-        line = truncateToWidth(line, width - 2);
+      if (visibleWidth(line) > innerWidth - 2) {
+        line = truncateToWidth(line, innerWidth - 2);
       }
 
-      lines.push(line);
+      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
     }
 
     // Footer
-    lines.push("");
-    lines.push(ansi.dim + "─".repeat(width) + ansi.reset);
-    lines.push(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  ← back  q close${ansi.reset}`, width));
-    lines.push("");
+    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
+    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  ←/Enter back  q close${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
+    lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
 
     return lines;
   }

package/tui/info-overlay.ts

@@ -153,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();
@@ -170,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);
     }
@@ -197,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.
    */