@mohndoe/pi-atlas 0.1.1

package/src/components/Dashboard.ts

@@ -0,0 +1,222 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, Spacer, Text, type Component, type TUI } from "@earendil-works/pi-tui";
+import { BorderBox } from "@mohndoe/pi-tui-extras";
+import type { TextDef } from "@mohndoe/pi-tui-extras/src";
+import { ColorPalette, langPalette, modelPalette } from "../colorPalette";
+import { Languages } from "../tabs/Languages";
+import { Models } from "../tabs/Models";
+import { Overview } from "../tabs/Overview";
+import { Projects } from "../tabs/Projects";
+import { Usage } from "../tabs/Usage";
+import type { StatsSummary, TimeRange } from "../types";
+import { RangeSelector } from "./RangeSelector";
+import { TabBar } from "./TabBar";
+
+function stylizedRangeTitle(theme: Theme, label: string): string {
+  return theme.fg("accent", label) + " " + theme.fg("muted", "[r]");
+}
+
+export class Dashboard extends BorderBox {
+  /** Rows consumed by header, spacers, dividers, tab bar, and footer (non-content chrome). */
+  private static readonly CHROME_ROWS = 3;
+
+  private tabBar: TabBar;
+  private onClose: (() => void) | null = null;
+  private tabs: Component[] = [];
+  private langPalette: ColorPalette;
+  private modelPalette: ColorPalette;
+  private contentHeight = 0;
+
+  private rangeLabelTitle: TextDef;
+
+  constructor(
+    private summaries: Map<TimeRange, StatsSummary>,
+    private theme: Theme,
+    private tui: TUI,
+    updateLabel: string | null,
+    private rangeSelector: RangeSelector,
+    onClose?: () => void,
+  ) {
+    // BorderBox footer with update label (styled to match current DashboardPopup look)
+    const footers = updateLabel
+      ? [{ text: theme.fg("muted", theme.italic(updateLabel)), align: "right" as const }]
+      : [];
+
+    const rangeLabelTitle: TextDef = {
+      text: stylizedRangeTitle(theme, rangeSelector.selectedLabel),
+      align: "right",
+    };
+
+    super({
+      titles: [
+        { text: theme.bold("Pi Atlas") + theme.fg("dim", " · v0.1"), align: "left" },
+        rangeLabelTitle,
+      ],
+      footers,
+      borderStyle: "singleRounded",
+      borderFn: (s: string) => theme.fg("text", s),
+      padding: { left: 1, right: 1, top: 1 },
+    });
+
+    this.rangeLabelTitle = rangeLabelTitle;
+
+    this.onClose = onClose ?? null;
+    this.langPalette = langPalette;
+    this.modelPalette = modelPalette;
+    this.tabBar = new TabBar(["Overview", "Languages", "Models", "Projects", "Usage"], theme, 0);
+    this.contentHeight = this.computeContentHeight();
+    this.buildTabs();
+  }
+
+  /** Compute the available content height from current terminal dimensions.
+   *  Total popup = 80% of terminal. Subtract chrome rows (inside border) and
+   *  2 border lines (top + bottom from BorderBox). */
+  private computeContentHeight(): number {
+    const termHeight = this.tui.terminal.rows;
+    const dashRows = Math.floor(termHeight * 0.8);
+    return Math.max(5, dashRows - Dashboard.CHROME_ROWS - 2);
+  }
+
+  private get currentSummary(): StatsSummary {
+    return this.summaries.get(this.rangeSelector.selectedValue) ?? this.summaries.get("All")!;
+  }
+
+  private buildTabs(): void {
+    const contentHeight = this.contentHeight;
+    const summary = this.currentSummary;
+    const rangeKey = this.rangeSelector.selectedValue;
+
+    // Invalidate old tabs — cleans up marquee timers, caches, etc.
+    for (const tab of this.tabs) {
+      tab.invalidate?.();
+    }
+
+    this.tabs = [
+      new Overview(summary, rangeKey, this.theme, contentHeight),
+      new Languages(summary.languages, this.theme, this.langPalette, this.tui, contentHeight),
+      new Models(summary.models, this.theme, this.modelPalette, this.tui, contentHeight),
+      new Projects(summary.projects, this.theme, this.tui, contentHeight),
+      new Usage(
+        summary.tools,
+        {
+          total: summary.totalTokens,
+          input: summary.totalInputTokens,
+          output: summary.totalOutputTokens,
+          cacheRead: summary.totalCacheReadTokens,
+          cacheWrite: summary.totalCacheWriteTokens,
+        },
+        this.theme,
+        this.tui,
+        contentHeight,
+      ),
+    ];
+  }
+
+  override render(width: number): string[] {
+    // Clear BorderBox render cache so timer-driven child updates
+    // (e.g. marquee scrolling) are reflected in the output.
+    // Direct property access works because TS private is compile-time only.
+    // TODO: fix marquee animation
+    // this.borderCache = null;
+    this.clear();
+
+    // width - border*2 - padding*2
+    const innerWidth = width - 2 - 2;
+
+    this.addChild(this.tabBar);
+    this.addChild(
+      new Text(this.theme.fg("borderMuted", "─".repeat(Math.max(innerWidth, 60))), 0, 0),
+    );
+
+    const allEmpty = [...this.summaries.values()].every((s) => s.sessionCount === 0);
+
+    if (allEmpty) {
+      this.addChild(new Spacer(1));
+      this.addChild(
+        new Text(this.theme.fg("muted", "No sessions found in ~/.pi/agent/sessions"), 1, 0),
+      );
+      this.addChild(new Spacer(1));
+    } else if (this.currentSummary.sessionCount === 0) {
+      this.addChild(new Spacer(1));
+      this.addChild(new Text(this.theme.fg("muted", "No data for this time range"), 1, 0));
+      this.addChild(new Spacer(1));
+    } else {
+      const activeTab = this.tabs[this.tabBar.activeIndex];
+      if (activeTab) {
+        this.addChild(activeTab);
+      }
+    }
+
+    this.addChild(
+      new Text(this.theme.fg("borderMuted", "─".repeat(Math.max(innerWidth, 60))), 0, 0),
+    );
+
+    const controls = this.theme.fg("dim", "Esc/q close  ←→ tabs  r range  ↑↓ scroll");
+    this.addChild(new Text(controls, 0, 0));
+
+    // Recompute content height — rebuild tabs if terminal was resized
+    const newContentHeight = this.computeContentHeight();
+    if (newContentHeight !== this.contentHeight) {
+      this.contentHeight = newContentHeight;
+      this.buildTabs();
+    }
+
+    return super.render(width);
+  }
+
+  override handleInput(data: string): void {
+    // Invalidate BorderBox render cache so next render() picks up state changes.
+    this.invalidate();
+
+    if (matchesKey(data, "escape") || data === "q" || data === "Q") {
+      this.onClose?.();
+      return;
+    }
+
+    // Tab bar input (left/right)
+    if (matchesKey(data, "left") || matchesKey(data, "right")) {
+      this.tabBar.handleInput(data);
+      this.tabBar.invalidate();
+      return;
+    }
+
+    // r key: cycle range with wrap-around
+    if (matchesKey(data, "r")) {
+      const previousRange = this.rangeSelector.selectedIndex;
+      this.rangeSelector.handleInput(data);
+
+      if (previousRange !== this.rangeSelector.selectedIndex) {
+        this.rangeLabelTitle.text = stylizedRangeTitle(
+          this.theme,
+          this.rangeSelector.selectedLabel,
+        );
+        this.buildTabs();
+      }
+      return;
+    }
+
+    // enter: consumed (no-op)
+    if (matchesKey(data, "enter")) {
+      return;
+    }
+
+    // up/down: dispatch to table tabs, consumed on Overview
+    if (matchesKey(data, "up") || matchesKey(data, "down")) {
+      const tabIndex = this.tabBar.activeIndex;
+      if (tabIndex >= 1) {
+        this.tabs[tabIndex]?.handleInput?.(data);
+        this.tabs[tabIndex]?.invalidate?.();
+        return;
+      }
+    }
+  }
+
+  override invalidate(): void {
+    super.invalidate();
+    this.tabBar.invalidate();
+    this.rangeSelector.invalidate();
+    for (const tab of this.tabs) {
+      tab.invalidate?.();
+    }
+  }
+}

package/src/components/Header.ts

@@ -0,0 +1,40 @@
+import { type Component, visibleWidth } from "@earendil-works/pi-tui";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { BorderBox } from "@mohndoe/pi-tui-extras";
+import { RangeSelector } from "./RangeSelector";
+
+const RANGE_BOX_WIDTH = 17;
+
+export class Header implements Component {
+  private rangeBox: BorderBox;
+
+  constructor(
+    theme: Theme,
+    private rangeSelector: RangeSelector,
+  ) {
+    this.rangeBox = new BorderBox({
+      titles: [{ text: "Range (r)", align: "left" }],
+      borderStyle: "single",
+      borderFn: (s: string) => theme.fg("dim", s),
+    });
+    this.rangeBox.addChild(this.rangeSelector);
+  }
+
+  render(width: number): string[] {
+    const title = "";
+    const version = "";
+
+    const boxLines = this.rangeBox.render(RANGE_BOX_WIDTH);
+    const leftWidth = width - RANGE_BOX_WIDTH;
+
+    const line1 = title + " ".repeat(Math.max(0, leftWidth - visibleWidth(title)));
+    const line2 = version + " ".repeat(Math.max(0, leftWidth - visibleWidth(version)));
+    const line3 = " ".repeat(leftWidth);
+
+    return [line1 + boxLines[0], line2 + boxLines[1], line3 + boxLines[2]];
+  }
+
+  invalidate(): void {
+    this.rangeBox.invalidate();
+  }
+}

package/src/components/KpiCards.ts

@@ -0,0 +1,104 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { type Component } from "@earendil-works/pi-tui";
+import { formatCost, formatNumber } from "../format";
+import { GridRow } from "./shared/GridRow";
+import { StatCard } from "./StatCard";
+
+export interface KpiData {
+  totalCost: number;
+  sessionCount: number;
+  totalMessages: number;
+  totalTokens: number;
+  daysActive: number;
+  avgCostPerDay: number;
+}
+
+export class KpiCards implements Component {
+  private theme: Theme;
+  private row: GridRow;
+
+  constructor(kpis: KpiData, theme: Theme) {
+    this.theme = theme;
+
+    const colPcts = [16, 16, 16, 16, 16, 17];
+
+    const totalCostCard = new StatCard(
+      {
+        label: { text: "Total cost" },
+        value: {
+          text: this.theme.bold(formatCost(kpis.totalCost)),
+          color: "success",
+        },
+      },
+      this.theme,
+    );
+
+    const sessionsCard = new StatCard(
+      {
+        label: { text: "Sessions" },
+        value: {
+          text: this.theme.bold(formatNumber(kpis.sessionCount)),
+          color: "accent",
+        },
+      },
+      this.theme,
+    );
+
+    const messagesCard = new StatCard(
+      {
+        label: { text: "Messages" },
+        value: {
+          text: this.theme.bold(formatNumber(kpis.totalMessages)),
+          color: "borderAccent",
+        },
+      },
+      this.theme,
+    );
+
+    const activeDaysCard = new StatCard(
+      {
+        label: { text: "Active days" },
+        value: {
+          text: this.theme.bold(formatNumber(kpis.daysActive)),
+          color: "warning",
+        },
+      },
+      this.theme,
+    );
+
+    const avgDayCard = new StatCard(
+      {
+        label: { text: "Avg/Day" },
+        value: {
+          text: this.theme.bold(formatCost(kpis.avgCostPerDay)),
+          color: "border",
+        },
+      },
+      this.theme,
+    );
+
+    const tokensCard = new StatCard(
+      {
+        label: { text: "Tokens" },
+        value: {
+          text: this.theme.bold(formatNumber(kpis.totalTokens)),
+          color: "error",
+        },
+      },
+      this.theme,
+    );
+
+    this.row = new GridRow(
+      [totalCostCard, tokensCard, messagesCard, sessionsCard, activeDaysCard, avgDayCard],
+      colPcts,
+    );
+  }
+
+  render(width: number): string[] {
+    return [...this.row.render(width)];
+  }
+
+  invalidate(): void {
+    this.row.invalidate();
+  }
+}

package/src/components/LoadingView.ts

@@ -0,0 +1,38 @@
+import { type Component } from "@earendil-works/pi-tui";
+
+export class LoadingView implements Component {
+  private progress = 0;
+  private message: string;
+  private cachedLines: string[] | null = null;
+  private cachedWidth = -1;
+  private tui: { requestRender: () => void } | null;
+
+  constructor(message = "Parsing session logs...", tui?: { requestRender: () => void }) {
+    this.message = message;
+    this.tui = tui ?? null;
+  }
+
+  setProgress(p: number): void {
+    this.progress = p;
+    this.invalidate();
+  }
+
+  render(width: number): string[] {
+    if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+
+    const barW = Math.min(40, width - 10);
+    const filled = Math.round((this.progress / 100) * barW);
+    const bar = "█".repeat(filled) + "░".repeat(barW - filled);
+
+    const lines = ["", `  ${this.message}`, `  [${bar}] ${this.progress}%`, ""];
+
+    this.cachedLines = lines;
+    this.cachedWidth = width;
+    return lines;
+  }
+
+  invalidate(): void {
+    this.cachedLines = null;
+    this.cachedWidth = -1;
+  }
+}

package/src/components/MarqueeText.ts

@@ -0,0 +1,79 @@
+import type { Component } from "@earendil-works/pi-tui";
+import type { TUI } from "@earendil-works/pi-tui";
+
+/**
+ * A component that displays text with a marquee scroll effect when the text
+ * overflows the available width. Text scrolls left at 1 character per tick
+ * (150ms), wrapping around when reaching the end.
+ *
+ * Each instance manages its own tick counter and animation timer. When a TUI
+ * reference is provided, the timer calls tui.requestRender() to animate.
+ */
+export class MarqueeText implements Component {
+  private tickCounter = 0;
+  private timer: ReturnType<typeof setInterval> | undefined;
+  private closed = false;
+
+  constructor(
+    private text: string,
+    private tui: TUI,
+  ) {}
+
+  render(width: number): string[] {
+    if (this.text.length <= width) {
+      this.stopTimer();
+      return [this.text];
+    }
+
+    // Start animation timer on first render with overflow
+    if (!this.timer) {
+      this.startTimer();
+    }
+
+    // Gap separates end of text from its beginning when wrapping
+    const gap = " ".repeat(5);
+    const extended = this.text + gap;
+    const offset = this.tickCounter % extended.length;
+    const visible = (extended + extended).slice(offset, offset + width);
+    return [visible];
+  }
+
+  /** Advance the tick counter by one (for testing or external control) */
+  advance(): void {
+    this.tickCounter++;
+  }
+
+  /** Reset the marquee to start position and restart animation */
+  reset(): void {
+    this.tickCounter = 0;
+    this.stopTimer();
+  }
+
+  /** Stop the animation timer and mark instance as closed. */
+  destroy(): void {
+    this.closed = true;
+    this.stopTimer();
+  }
+
+  invalidate(): void {
+    // No internal cache to clear
+  }
+
+  private startTimer(): void {
+    this.timer = setInterval(() => {
+      if (this.closed) {
+        this.stopTimer();
+        return;
+      }
+      this.tickCounter++;
+      this.tui.requestRender();
+    }, 150);
+  }
+
+  private stopTimer(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+  }
+}

package/src/components/RangeSelector.ts

@@ -0,0 +1,63 @@
+import { matchesKey, type Component } from "@earendil-works/pi-tui";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { TimeRange } from "../types";
+
+export interface RangeOption {
+  label: string;
+  value: TimeRange;
+}
+
+export class RangeSelector implements Component {
+  selectedIndex: number;
+  private cachedLines: string[] | null = null;
+  private cachedWidth = -1;
+
+  constructor(
+    private theme: Theme,
+    private ranges: RangeOption[] = [
+      { label: "Today", value: "1d" },
+      { label: "Last 7 days", value: "7d" },
+      { label: "Last 30 days", value: "30d" },
+      { label: "All time", value: "All" },
+    ],
+    selectedIndex = 0,
+  ) {
+    this.selectedIndex = selectedIndex;
+  }
+
+  get selectedValue(): TimeRange {
+    if (this.selectedRangeOption) return this.selectedRangeOption.value;
+    return "All";
+  }
+
+  get selectedRangeOption(): RangeOption {
+    return this.ranges[this.selectedIndex] ?? this.ranges[0]!;
+  }
+
+  get selectedLabel(): string {
+    if (this.selectedRangeOption) return this.selectedRangeOption.label;
+    return "All time";
+  }
+
+  render(width: number): string[] {
+    if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+
+    this.cachedLines = [this.theme.fg("accent", this.selectedLabel)];
+    this.cachedWidth = width;
+    return this.cachedLines;
+  }
+
+  handleInput(data: string): void {
+    // enter is a no-op (selection is consumed) but must not propagate farther
+    if (matchesKey(data, "enter")) return;
+
+    if (matchesKey(data, "r")) {
+      this.selectedIndex = (this.selectedIndex + 1) % this.ranges.length;
+    }
+  }
+
+  invalidate(): void {
+    this.cachedLines = null;
+    this.cachedWidth = -1;
+  }
+}

package/src/components/RankedBarList.ts

@@ -0,0 +1,71 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { type Component } from "@earendil-works/pi-tui";
+import type { ChalkInstance } from "chalk";
+import { UsageRow } from "./UsageRow";
+
+export interface RankedBarItem {
+  name: string;
+  primaryValue: number;
+  mainValueText: string;
+  secondaryValueText?: string;
+  color: ChalkInstance;
+}
+
+export class RankedBarList implements Component {
+  private cachedLines: string[] | null = null;
+  private cachedWidth = -1;
+
+  constructor(
+    private items: RankedBarItem[],
+    private theme: Theme,
+  ) {}
+
+  render(width: number): string[] {
+    if (this.cachedLines && this.cachedWidth === width) {
+      return this.cachedLines;
+    }
+
+    const lines: string[] = [];
+
+    if (this.items.length === 0) {
+      this.cachedLines = [];
+      this.cachedWidth = width;
+      return [];
+    }
+
+    const total = this.items.reduce((sum, item) => sum + item.primaryValue, 0);
+
+    const highestItem = total > 0 ? (this.items[0]!.primaryValue * 100) / total : 0;
+
+    for (const item of this.items) {
+      let pct = 0;
+      let barPct = 0;
+      if (total > 0) {
+        pct = (item.primaryValue * 100) / total;
+        barPct = (pct * 100) / highestItem;
+      }
+
+      const row = new UsageRow(
+        {
+          name: item.name,
+          mainValueText: item.mainValueText,
+          secondaryValueText: item.secondaryValueText,
+          pct,
+          barPct,
+        },
+        item.color,
+        this.theme,
+      );
+      lines.push(...row.render(width));
+    }
+
+    this.cachedLines = lines;
+    this.cachedWidth = width;
+    return lines;
+  }
+
+  invalidate(): void {
+    this.cachedLines = null;
+    this.cachedWidth = -1;
+  }
+}