@groeponline/pi-wishcraft 0.20.0 → 0.22.0

package/src/extension/ui/overlay-chrome.ts

@@ -0,0 +1,163 @@
+/**
+ * Shared overlay chrome: rounded box, accent title, dim hint, and a
+ * substring filter over SelectList items (label + value + description).
+ * Pi's SelectList.setFilter is prefix-only on `value`; overlays must not
+ * inherit that.
+ */
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import {
+  matchesKey,
+  type SelectItem,
+  SelectList,
+  truncateToWidth,
+} from "@earendil-works/pi-tui";
+
+const NONE_VALUE = "__none__";
+
+export function overlaySelectListTheme(theme: Theme) {
+  return {
+    selectedPrefix: (text: string) => theme.fg("accent", text),
+    selectedText: (text: string) => theme.fg("accent", text),
+    description: (text: string) => theme.fg("muted", text),
+    scrollInfo: (text: string) => theme.fg("dim", text),
+    noMatch: (text: string) => theme.fg("warning", text),
+  };
+}
+
+/** Case-insensitive substring match on value, label, and description. */
+export function applyOverlayFilter(
+  items: readonly SelectItem[],
+  query: string,
+): SelectItem[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [...items];
+  return items.filter((item) => {
+    const hay = `${item.value}\n${item.label}\n${item.description ?? ""}`;
+    return hay.toLowerCase().includes(q);
+  });
+}
+
+export function isOverlayPrintable(data: string): boolean {
+  return data.length === 1 && data >= " " && data <= "~";
+}
+
+export function applyOverlayQueryKey(query: string, data: string): string | null {
+  if (data === "\x15") return "";
+  if (data === "\x7f" || data === "\b" || matchesKey(data, "backspace")) {
+    return query.slice(0, -1);
+  }
+  if (isOverlayPrintable(data)) return query + data;
+  return null;
+}
+
+export function renderOverlayBox(
+  theme: Theme,
+  width: number,
+  title: string,
+  body: readonly string[],
+  hint: string,
+): string[] {
+  const innerWidth = Math.max(1, width - 2);
+  const border = (text: string) => theme.fg("dim", text);
+  const wrapRow = (text: string): string =>
+    `${border("│")}${truncateToWidth(text, innerWidth, "…", true)}${border("│")}`;
+  const lines: string[] = [];
+  lines.push(border(`╭${"─".repeat(innerWidth)}╮`));
+  lines.push(wrapRow(theme.fg("accent", theme.bold(title))));
+  lines.push(border(`├${"─".repeat(innerWidth)}┤`));
+  for (const line of body) lines.push(wrapRow(line));
+  lines.push(border(`├${"─".repeat(innerWidth)}┤`));
+  lines.push(wrapRow(theme.fg("dim", hint)));
+  lines.push(border(`╰${"─".repeat(innerWidth)}╯`));
+  return lines;
+}
+
+function listForQuery(
+  items: readonly SelectItem[],
+  query: string,
+  maxVisible: number,
+  theme: Theme,
+): SelectList {
+  const filtered = applyOverlayFilter(items, query);
+  const visible =
+    filtered.length > 0
+      ? filtered
+      : [
+          {
+            label: `geen match voor '${query}'`,
+            value: NONE_VALUE,
+          },
+        ];
+  const list = new SelectList(
+    visible,
+    Math.max(1, Math.min(maxVisible, visible.length)),
+    overlaySelectListTheme(theme),
+  );
+  return list;
+}
+
+export async function showSelectOverlay(
+  ctx: any,
+  title: string,
+  hint: string,
+  items: SelectItem[],
+  maxVisible: number,
+): Promise<SelectItem | null> {
+  return ctx.ui.custom(
+    (
+      tui: any,
+      theme: Theme,
+      _keybindings: any,
+      done: (result: SelectItem | null) => void,
+    ) => {
+      let query = "";
+      let selectList = listForQuery(items, query, maxVisible, theme);
+      const bind = () => {
+        selectList.onSelect = (item) => {
+          if (item.value === NONE_VALUE) return;
+          done(item);
+        };
+        selectList.onCancel = () => done(null);
+      };
+      bind();
+
+      const filterHint = () => {
+        const extra = query
+          ? `filter '${query}' · ctrl+u clear`
+          : "type to filter";
+        return `${hint} · ${extra}`;
+      };
+
+      return {
+        render: (width: number) =>
+          renderOverlayBox(
+            theme,
+            width,
+            title,
+            selectList.render(Math.max(1, width - 2)),
+            filterHint(),
+          ),
+        invalidate: () => selectList.invalidate(),
+        handleInput: (data: string) => {
+          const next = applyOverlayQueryKey(query, data);
+          if (next !== null) {
+            query = next;
+            selectList = listForQuery(items, query, maxVisible, theme);
+            bind();
+            tui.requestRender();
+            return;
+          }
+          selectList.handleInput(data);
+          tui.requestRender();
+        },
+      };
+    },
+    {
+      overlay: true,
+      overlayOptions: () => ({
+        verticalAlign: "center",
+        horizontalAlign: "center",
+      }),
+    },
+  );
+}

package/src/extension/ui/powerline-menu-view.ts

@@ -6,6 +6,7 @@ import {
   showSegmentNavigator,
   showSelectOverlay,
 } from "./menu-views.ts";
+import { showTpsOverlay } from "./token-overlays.ts";
 import {
   assertPowerlineMenuBounds,
   type PowerlineMenuNode,
@@ -47,10 +48,7 @@ async function activatePowerlineMenuAction(
     return;
   }
   if (id === "tps") {
-    const live = process.env.POWERLINE_TPS
-      ? `(override ${process.env.POWERLINE_TPS})`
-      : "(live 1s window)";
-    ctx.ui.notify(`TPS ${live}`, "info");
+    await showTpsOverlay(rt, ctx);
     return;
   }
   if (id === "toggle") {

package/src/extension/ui/token-overlays.ts

@@ -0,0 +1,82 @@
+import type { SelectItem } from "@earendil-works/pi-tui";
+
+import { config } from "../core/state.ts";
+import type { RuntimeState } from "../core/types.ts";
+import {
+  summarizeTpsRing,
+  tpsOverlayLines,
+  tpsSamples,
+} from "../../usage/tps-ring.ts";
+import {
+  formatUsageOverlayLines,
+  loadUsageFileFromDisk,
+  summarizeUsageOverlay,
+} from "../../usage/usage-store.ts";
+import { parseTokenBudget } from "../../usage/token-budget.ts";
+import { getSessionTotalCost } from "../../usage/ledger.ts";
+import { readSettings } from "../settings/settings-io.ts";
+import { showSelectOverlay } from "./overlay-chrome.ts";
+
+function sessionTotals(rt: RuntimeState, ctx: any) {
+  const events = rt.sessionBranchCache.get(ctx.sessionManager);
+  const snap = rt.tokenStatsCache.get(events);
+  return {
+    input: snap.input,
+    output: snap.output,
+    cacheRead: snap.cacheRead,
+    cacheWrite: snap.cacheWrite,
+    cost: getSessionTotalCost(snap),
+  };
+}
+
+export function buildTpsOverlayItems(rt: RuntimeState, ctx: any): SelectItem[] {
+  const events = rt.sessionBranchCache.get(ctx.sessionManager);
+  const snap = rt.tokenStatsCache.get(events);
+  const summary = summarizeTpsRing(
+    tpsSamples,
+    Date.now(),
+    { input: snap.input, output: snap.output },
+    {
+      windowMs: config.segmentOptions?.tps?.windowMs ?? 1000,
+      override: process.env.POWERLINE_TPS,
+    },
+  );
+  const lines = tpsOverlayLines(summary);
+  return lines.map((line) => ({ label: line, value: line }));
+}
+
+export function buildUsageOverlayItems(rt: RuntimeState, ctx: any): SelectItem[] {
+  const wishcraft = readSettings(ctx.cwd ?? process.cwd()).wishcraft;
+  const budget = parseTokenBudget(wishcraft);
+  const summary = summarizeUsageOverlay({
+    file: loadUsageFileFromDisk(),
+    session: sessionTotals(rt, ctx),
+    dailyLimit: budget.daily,
+  });
+  const lines = formatUsageOverlayLines(summary);
+  return lines.map((line) => ({ label: line, value: line }));
+}
+
+export async function showTpsOverlay(rt: RuntimeState, ctx: any): Promise<void> {
+  const items = buildTpsOverlayItems(rt, ctx);
+  const picked = await showSelectOverlay(
+    ctx,
+    "TPS",
+    "same 1s window as the segment · enter copy · esc close",
+    items,
+    Math.min(items.length, 12),
+  );
+  if (picked) ctx.ui.notify(picked.value, "info");
+}
+
+export async function showUsageOverlay(rt: RuntimeState, ctx: any): Promise<void> {
+  const items = buildUsageOverlayItems(rt, ctx);
+  const picked = await showSelectOverlay(
+    ctx,
+    "Usage",
+    "today / week from wishcraft-usage.json · enter copy · esc close",
+    items,
+    Math.min(items.length, 16),
+  );
+  if (picked) ctx.ui.notify(picked.value, "info");
+}

package/src/extension/welcome/welcome-integration.ts

@@ -2,6 +2,7 @@ import {
   WelcomeComponent,
   WelcomeHeader,
   discoverLoadedCounts,
+  discoverWhatsNew,
   getRecentSessions,
 } from "../../welcome/index.ts";
 import { estimateInitialContextTokens } from "../../usage/context.ts";
@@ -19,6 +20,7 @@ export function setupWelcomeHeader(rt: RuntimeState, ctx: any) {
   const queueCount = queueSummary.queueCount + queueSummary.ideaCount;
   const hasStash =
     rt.stashedEditorText !== null || rt.stashedPromptHistory.length > 0;
+  const whatsNew = discoverWhatsNew();
 
   const header = new WelcomeHeader(
     modelName,
@@ -28,6 +30,7 @@ export function setupWelcomeHeader(rt: RuntimeState, ctx: any) {
     initialContextTokens,
     queueCount,
     hasStash,
+    whatsNew,
   );
   rt.welcomeHeaderActive = true;
 
@@ -83,6 +86,7 @@ export function setupWelcomeOverlay(rt: RuntimeState, ctx: any) {
     const queueCount = queueSummary.queueCount + queueSummary.ideaCount;
     const hasStash =
       rt.stashedEditorText !== null || rt.stashedPromptHistory.length > 0;
+    const whatsNew = discoverWhatsNew();
 
     ctx.ui
       .custom(
@@ -100,18 +104,17 @@ export function setupWelcomeOverlay(rt: RuntimeState, ctx: any) {
             initialContextTokens,
             queueCount,
             hasStash,
+            whatsNew,
           );
 
           let countdown = 30;
           let dismissed = false;
           let interval: ReturnType<typeof setInterval> | null = null;
-          let glow: ReturnType<typeof setInterval> | null = null;
 
           const dismiss = () => {
             if (dismissed) return;
             dismissed = true;
             if (interval) clearInterval(interval);
-            if (glow) clearInterval(glow);
             rt.dismissWelcomeOverlay = null;
             done();
           };
@@ -124,12 +127,6 @@ export function setupWelcomeOverlay(rt: RuntimeState, ctx: any) {
             if (countdown <= 0) dismiss();
           }, 1000);
 
-          // wensballon: zachte vlam-flikker, alleen tijdens de overlay
-          glow = setInterval(() => {
-            if (dismissed) return;
-            tui.requestRender();
-          }, 140);
-
           rt.dismissWelcomeOverlay = dismiss;
 
           if (rt.welcomeOverlayShouldDismiss) {
@@ -145,7 +142,6 @@ export function setupWelcomeOverlay(rt: RuntimeState, ctx: any) {
             dispose: () => {
               dismissed = true;
               if (interval) clearInterval(interval);
-              if (glow) clearInterval(glow);
             },
           };
         },

package/src/segments/registry.ts

@@ -5,6 +5,7 @@ import type {
   StatusLineSegment,
   StatusLineSegmentId,
 } from "../config/types.ts";
+import { getIcons } from "../theme/icons.ts";
 import {
   modelSegment,
   shellModeSegment,
@@ -43,6 +44,97 @@ import {
 // Segment Registry
 // ═══════════════════════════════════════════════════════════════════════════
 
+// ═══════════════════════════════════════════════════════════════════════════
+// Segment decoration (labels + templates)
+//
+// `powerline.segmentLabels.<id>` inserts a label between the icon and the
+// value for ANY segment; `segmentOptions.<id>.template` replaces the value
+// text ("{value}" is substituted). Both are applied centrally here so every
+// segment honors them uniformly (previously only tps/open_ports did).
+// ═══════════════════════════════════════════════════════════════════════════
+
+const ANSI_ESCAPE_RE = /\x1b\[[0-9;]*m/g;
+
+function stripAnsi(text: string): string {
+  return text.replace(ANSI_ESCAPE_RE, "");
+}
+
+/** Index of the first visible (non-escape) character in a rendered string. */
+function firstVisibleCharIndex(content: string): number {
+  for (let i = 0; i < content.length; i++) {
+    if (content[i] === "\x1b") {
+      const match = ANSI_ESCAPE_RE.exec(content.slice(i));
+      if (match) {
+        i += match[0].length - 1;
+        continue;
+      }
+    }
+    return i;
+  }
+  return content.length;
+}
+
+function leadingIconAndValue(
+  visible: string,
+): { icon: string; value: string } {
+  const trimmed = visible.trimStart();
+  const spaceIndex = trimmed.indexOf(" ");
+  if (spaceIndex <= 0) return { icon: "", value: trimmed };
+
+  const candidate = trimmed.slice(0, spaceIndex);
+  const icons = getIcons();
+  const iconValues = new Set(
+    Object.values(icons).filter((icon) => icon.length > 0),
+  );
+  if (!iconValues.has(candidate)) return { icon: "", value: trimmed };
+  return { icon: candidate, value: trimmed.slice(spaceIndex + 1).trimStart() };
+}
+
+/**
+ * Apply `segmentLabels` (label between icon and value) and
+ * `segmentOptions.<id>.template` ({value} substitution) to a rendered
+ * segment. Label-only insertion preserves the original ANSI styling spans;
+ * templates rebuild the content with the segment's leading style.
+ */
+export function applySegmentDecoration(
+  id: StatusLineSegmentId,
+  ctx: SegmentContext,
+  rendered: RenderedSegment,
+): RenderedSegment {
+  const label = ctx.segmentLabels?.get(id);
+  const optionsForId = (
+    ctx.options as Record<string, { template?: string } | undefined> | undefined
+  )?.[id];
+  const template = optionsForId?.template;
+  if (!label && !template) return rendered;
+  if (!rendered.visible || !rendered.content) return rendered;
+
+  const visible = stripAnsi(rendered.content);
+  const { icon, value } = leadingIconAndValue(visible);
+  const firstVisibleIndex = firstVisibleCharIndex(rendered.content);
+  const styledPrefix = rendered.content.slice(0, firstVisibleIndex);
+
+  if (!template) {
+    // Label-only: pure insertion right after the icon, so every inner ANSI
+    // span of the original content is preserved untouched.
+    let insertAt = firstVisibleIndex + icon.length;
+    if (rendered.content[insertAt] === " ") insertAt += 1;
+    return {
+      content:
+        rendered.content.slice(0, insertAt) +
+        `${label} ` +
+        rendered.content.slice(insertAt),
+      visible: true,
+    };
+  }
+
+  // Template (with optional label): rebuild with the segment's leading style.
+  let newValue = template.replaceAll("{value}", value);
+  if (label) newValue = `${label} ${newValue}`;
+  const content = `${styledPrefix}${icon ? `${icon} ` : ""}${newValue}${rendered.content.endsWith("\x1b[0m") ? "\x1b[0m" : ""}`;
+  return { content, visible: true };
+}
+
 export const SEGMENTS: Record<BuiltinStatusLineSegmentId, StatusLineSegment> = {
   model: modelSegment,
   shell_mode: shellModeSegment,
@@ -72,47 +164,16 @@ export function renderSegment(
   id: StatusLineSegmentId,
   ctx: SegmentContext,
 ): RenderedSegment {
+  let rendered: RenderedSegment;
   if (isCustomSegmentId(id)) {
     const customId = id.slice("custom:".length);
     const computed = customComputedSegments.get(customId);
-    if (computed) return applyLabelAndTemplate(id, computed.render(ctx), ctx);
-    return applyLabelAndTemplate(id, renderCustomSegment(id, ctx), ctx);
-  }
-
-  const segment = SEGMENTS[id];
-  if (!segment) {
-    return { content: "", visible: false };
-  }
-  return applyLabelAndTemplate(id, segment.render(ctx), ctx);
-}
-
-const ANSI_RE = /\x1b\[[0-9;]*m/g;
-
-/** Centrale label + template-afhandeling voor álle segments.
- * Template (segmentOptions.<seg>.template) wint op het label; `{value}`
- * wordt vervangen door de kale (ANSI-vrije) segmenttekst. */
-function applyLabelAndTemplate(
-  id: string,
-  rendered: RenderedSegment,
-  ctx: SegmentContext,
-): RenderedSegment {
-  if (!rendered.visible || !rendered.content) return rendered;
-  const template = (
-    (ctx.options as Record<string, { template?: string } | undefined>)?.[id]
-      ?.template
-  )?.trim();
-  if (template) {
-    const plain = rendered.content.replace(ANSI_RE, "");
-    return {
-      ...rendered,
-      content: template.includes("{value}")
-        ? template.replace("{value}", plain)
-        : template,
-    };
-  }
-  const label = ctx.segmentLabels?.get(id);
-  if (label) {
-    return { ...rendered, content: `${label} ${rendered.content}` };
+    rendered = computed
+      ? computed.render(ctx)
+      : renderCustomSegment(id, ctx);
+  } else {
+    const segment = SEGMENTS[id];
+    rendered = segment ? segment.render(ctx) : { content: "", visible: false };
   }
-  return rendered;
+  return applySegmentDecoration(id, ctx, rendered);
 }