@mohndoe/pi-atlas 0.1.1

package/src/tabs/Languages.ts

@@ -0,0 +1,102 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Container, Text, type TUI } from "@earendil-works/pi-tui";
+import { ColorPalette } from "../colorPalette";
+import { cell, type CellComponent } from "../components/cells";
+import { SortedTable } from "../components/SortedTable";
+import { formatNumber } from "../format";
+import type { LangStat } from "../types";
+import { BorderBox } from "@mohndoe/pi-tui-extras";
+
+const EMPTY_MESSAGE = "No language data for this time range";
+
+export class Languages extends Container {
+  private isEmpty: boolean;
+  private theme: Theme;
+  private table: SortedTable | null = null;
+  private rows: CellComponent[][] = [];
+
+  constructor(
+    private languages: LangStat[],
+    theme: Theme,
+    private palette: ColorPalette,
+    private tui: TUI,
+    private maxHeight: number,
+  ) {
+    super();
+    this.theme = theme;
+    this.isEmpty = languages.length === 0;
+    this.buildRows();
+  }
+
+  /** Build row cells once in constructor. Data is stable per Languages instance —
+   *  a new Languages is created whenever Dashboard.buildTabs() runs (range switch). */
+  private buildRows(): void {
+    if (this.isEmpty) return;
+    const maxLines = Math.max(...this.languages.map((l) => l.lines), 0);
+    this.rows = this.languages.map((l) => {
+      const barPct = maxLines > 0 ? (l.lines / maxLines) * 100 : 0;
+      return [
+        cell.marquee(l.language, this.tui),
+        cell.bar(barPct, this.palette.getColor(l.language), "transparent"),
+        cell.text(this.theme.fg("muted", formatNumber(l.edits))),
+        cell.text(this.theme.bold(formatNumber(l.lines))),
+      ];
+    });
+  }
+
+  override render(width: number): string[] {
+    this.clear();
+
+    const baseBorderBoxOptions = {
+      borderStyle: "singleRounded" as const,
+      borderFn: (s: string) => this.theme.fg("border", s),
+    };
+
+    if (!this.isEmpty) {
+      const bb = new BorderBox({
+        ...baseBorderBoxOptions,
+        titles: [
+          { text: "Languages", align: "left" },
+          { text: this.theme.fg("dim", formatNumber(this.languages.length)), align: "right" },
+        ],
+      });
+
+      if (!this.table) {
+        this.table = new SortedTable(
+          {
+            columns: [
+              { header: cell.header("Name"), width: 12 },
+              { header: cell.header("Share %"), width: "fill" },
+              { header: cell.header("Edits"), width: 8 },
+              { header: cell.header("Lines"), width: 14 },
+            ],
+            rows: this.rows,
+            maxHeight: this.maxHeight,
+            sort: { column: 3, direction: "desc" },
+            tui: this.tui,
+          },
+          this.theme,
+        );
+      }
+      bb.addChild(this.table);
+      this.addChild(bb);
+    } else {
+      const bb = new BorderBox({
+        ...baseBorderBoxOptions,
+        titles: [{ text: "Languages", align: "left" }],
+      });
+      bb.addChild(new Text(this.theme.fg("muted", EMPTY_MESSAGE)));
+      this.addChild(bb);
+    }
+    return super.render(width);
+  }
+
+  handleInput(data: string): void {
+    this.table?.handleInput(data);
+  }
+
+  override invalidate(): void {
+    super.invalidate();
+    this.table?.invalidate();
+  }
+}

package/src/tabs/Models.ts

@@ -0,0 +1,108 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Container, Text, type TUI } from "@earendil-works/pi-tui";
+import { ColorPalette } from "../colorPalette";
+import { cell, type CellComponent } from "../components/cells";
+import { SortedTable } from "../components/SortedTable";
+import { formatCost, formatModelName, formatNumber } from "../format";
+import { type ModelStat } from "../types";
+import { BorderBox } from "@mohndoe/pi-tui-extras";
+
+const EMPTY_MESSAGE = "No model data for this time range";
+
+export class Models extends Container {
+  private isEmpty: boolean;
+  private theme: Theme;
+  private table: SortedTable | null = null;
+  private rows: CellComponent[][] = [];
+
+  constructor(
+    private models: ModelStat[],
+    theme: Theme,
+    private palette: ColorPalette,
+    private tui: TUI,
+    private maxHeight: number,
+  ) {
+    super();
+    this.theme = theme;
+    this.isEmpty = models.length === 0;
+    this.buildRows();
+  }
+
+  /** Build row cells once in constructor. Data is stable per Models instance —
+   *  a new Models is created whenever Dashboard.buildTabs() runs (range switch).
+   *  Building rows every render would destroy marquee state on each frame. */
+  private buildRows(): void {
+    if (this.isEmpty) return;
+    const totalCost = this.models.reduce((sum, item) => sum + item.cost, 0);
+    const maxCost = Math.max(...this.models.map((m) => m.cost), 0);
+    this.rows = this.models.map((m) => {
+      let pct = 0;
+      let barPct = 0;
+      if (totalCost > 0) {
+        pct = (m.cost * 100) / totalCost;
+        barPct = maxCost > 0 ? (m.cost / maxCost) * 100 : 0;
+      }
+      return [
+        cell.marquee(formatModelName(m.model), this.tui),
+        cell.text(this.theme.fg("muted", m.provider ?? "Unknown")),
+        cell.bar(barPct, this.palette.getColor(m.provider ?? "Unknown"), "transparent"),
+        cell.text(this.theme.fg("muted", formatNumber(m.calls))),
+        cell.text(m.cost > 0 ? this.theme.bold(formatCost(m.cost)) : this.theme.fg("dim", "Free")),
+      ];
+    });
+  }
+
+  override render(width: number): string[] {
+    this.clear();
+    const baseBorderBoxOptions = {
+      borderStyle: "singleRounded" as const,
+      borderFn: (s: string) => this.theme.fg("border", s),
+    };
+    if (!this.isEmpty) {
+      const bb = new BorderBox({
+        ...baseBorderBoxOptions,
+        titles: [
+          { text: "Models", align: "left" },
+          { text: this.theme.fg("dim", formatNumber(this.models.length)), align: "right" },
+        ],
+      });
+      if (!this.table) {
+        this.table = new SortedTable(
+          {
+            columns: [
+              { header: cell.header("Name"), width: 32 },
+              { header: cell.header("Provider"), width: 16 },
+              { header: cell.header("Cost %"), width: "fill" },
+              { header: cell.header("Calls"), width: 10 },
+              { header: cell.header("Cost"), width: 12 },
+            ],
+            rows: this.rows,
+            maxHeight: this.maxHeight,
+            sort: { column: 4, direction: "desc" },
+            tui: this.tui,
+          },
+          this.theme,
+        );
+      }
+      bb.addChild(this.table);
+      this.addChild(bb);
+    } else {
+      const bb = new BorderBox({
+        ...baseBorderBoxOptions,
+        titles: [{ text: "Models", align: "left" }],
+      });
+      bb.addChild(new Text(this.theme.fg("muted", EMPTY_MESSAGE)));
+      this.addChild(bb);
+    }
+    return super.render(width);
+  }
+
+  handleInput(data: string): void {
+    this.table?.handleInput(data);
+  }
+
+  override invalidate(): void {
+    super.invalidate();
+    this.table?.invalidate();
+  }
+}

package/src/tabs/Overview.ts

@@ -0,0 +1,152 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Container, Spacer, Text } from "@earendil-works/pi-tui";
+import { BorderBox } from "@mohndoe/pi-tui-extras";
+import { langPalette, modelPalette } from "../colorPalette";
+import { BarChart } from "../components/BarChart";
+import { KpiCards, type KpiData } from "../components/KpiCards";
+import { GridRow } from "../components/shared/GridRow";
+import { StatCard } from "../components/StatCard";
+import { formatCost, formatNumber } from "../format";
+import { type StatsSummary, type TimeRange } from "../types";
+
+const SPACER_HEIGHT = 1;
+const BAR_CHART_MAX_HEIGHT = 18;
+
+export class Overview extends Container {
+  private kpiCards: KpiCards;
+  private barChart: BarChart;
+  private topCards: GridRow;
+
+  constructor(
+    private summary: StatsSummary,
+    rangeKey: TimeRange,
+    private theme: Theme,
+    maxHeight: number,
+  ) {
+    super();
+    const kpis: KpiData = {
+      totalCost: this.summary.totalCost,
+      sessionCount: this.summary.sessionCount,
+      totalMessages: this.summary.totalMessages,
+      totalTokens: this.summary.totalTokens,
+      daysActive: this.summary.daysActive,
+      avgCostPerDay: this.summary.avgCostPerDay,
+    };
+    this.kpiCards = new KpiCards(kpis, this.theme);
+
+    const topLanguage = summary.languages[0];
+    const topModel = summary.models[0];
+    const topProject = summary.projects[0];
+
+    const langBox = new BorderBox({
+      titles: [{ text: this.theme.bold("Top Language"), align: "left" }],
+      padding: { left: 1, right: 1 },
+      borderFn: topLanguage
+        ? langPalette.getColor(topLanguage.language)
+        : (s: string) => this.theme.fg("borderMuted", s),
+    });
+    langBox.addChild(
+      topLanguage
+        ? new StatCard(
+            {
+              label: { text: topLanguage.language },
+              value: {
+                text: this.theme.bold(formatNumber(topLanguage.lines) + " lines"),
+                color: "text",
+              },
+            },
+            this.theme,
+          )
+        : new Text("No data"),
+    );
+
+    const modelBox = new BorderBox({
+      titles: [{ text: this.theme.bold("Top model"), align: "left" }],
+      padding: { left: 1, right: 1 },
+      borderFn: modelPalette.getColor(topModel?.provider || ""),
+    });
+    modelBox.addChild(
+      topModel
+        ? new StatCard(
+            {
+              label: { text: topModel.model },
+              value: {
+                text: this.theme.bold(formatCost(topModel.cost)),
+                color: "text",
+              },
+            },
+            this.theme,
+          )
+        : new Text("No data."),
+    );
+
+    const projectBox = new BorderBox({
+      titles: [{ text: this.theme.bold("Top project"), align: "left" }],
+      padding: { left: 1, right: 1 },
+      borderFn: (s: string) => this.theme.fg("borderMuted", s),
+    });
+    projectBox.addChild(
+      topProject
+        ? new StatCard(
+            {
+              label: { text: topProject.project },
+              value: {
+                text: this.theme.bold(formatCost(topProject.cost)),
+                color: "text",
+              },
+            },
+            this.theme,
+          )
+        : new Text("No data."),
+    );
+
+    this.topCards = new GridRow([langBox, modelBox, projectBox], [33, 33, 34]);
+
+    const kpiCardsHeight = this.kpiCards.render(80).length;
+    const topCardsHeight = this.topCards.render(80).length;
+
+    const chartHeight = Math.min(
+      BAR_CHART_MAX_HEIGHT,
+      maxHeight - kpiCardsHeight - topCardsHeight - SPACER_HEIGHT * 0,
+    );
+    this.barChart = new BarChart(
+      this.summary.dailySpend,
+      rangeKey,
+      chartHeight,
+      this.theme,
+      undefined,
+      this.summary.hourlySpend,
+    );
+  }
+
+  override render(width: number): string[] {
+    this.clear();
+    const kpiBorderBox = new BorderBox({
+      borderStyle: "singleRounded",
+      padding: { left: 1, right: 1 },
+    });
+    kpiBorderBox.addChild(this.kpiCards);
+    this.addChild(kpiBorderBox);
+
+    const costBarChartBox = new BorderBox({
+      borderStyle: "singleRounded",
+      titles: [{ text: this.theme.bold("Cost overtime"), align: "left" }],
+      borderFn: (s: string) => this.theme.fg("border", s),
+      padding: { left: 1, right: 1, top: 1 },
+    });
+    costBarChartBox.addChild(this.barChart);
+    this.addChild(costBarChartBox);
+
+    this.addChild(this.topCards);
+
+    return super.render(width);
+  }
+
+  override invalidate(): void {
+    super.invalidate();
+    this.kpiCards.invalidate();
+    this.barChart.invalidate();
+    this.topCards.invalidate();
+    this.children.forEach((c) => c.invalidate?.());
+  }
+}

package/src/tabs/Projects.ts

@@ -0,0 +1,92 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Container, Text, type TUI } from "@earendil-works/pi-tui";
+import { BorderBox, type BorderBoxOptions } from "@mohndoe/pi-tui-extras";
+import { cell, type CellComponent } from "../components/cells";
+import { SortedTable } from "../components/SortedTable";
+import { formatCost, formatNumber } from "../format";
+import { type ProjectStat } from "../types";
+
+const EMPTY_MESSAGE = "No projects data for this time range";
+
+export class Projects extends Container {
+  private isEmpty: boolean;
+  private theme: Theme;
+  private table: SortedTable | null = null;
+  private rows: CellComponent[][] = [];
+
+  constructor(
+    private projects: ProjectStat[],
+    theme: Theme,
+    private tui: TUI,
+    private maxHeight: number,
+  ) {
+    super();
+    this.theme = theme;
+    this.isEmpty = projects.length === 0;
+    this.buildRows();
+  }
+
+  /** Build row cells once in constructor. Data is stable per Projects instance. */
+  private buildRows(): void {
+    if (this.isEmpty) return;
+    const maxCost = Math.max(...this.projects.map((p) => p.cost), 0);
+    this.rows = this.projects.map((p) => {
+      const barPct = maxCost > 0 ? (p.cost / maxCost) * 100 : 0;
+      return [
+        cell.marquee(p.project, this.tui),
+        cell.bar(barPct, (s) => s, "transparent"),
+        cell.text(this.theme.fg("muted", formatNumber(p.sessions))),
+        cell.text(p.cost > 0 ? this.theme.bold(formatCost(p.cost)) : this.theme.fg("dim", "Free")),
+      ];
+    });
+  }
+
+  override render(width: number): string[] {
+    this.clear();
+
+    const borderBoxOptions: BorderBoxOptions = {
+      borderStyle: "singleRounded",
+      borderFn: (s) => this.theme.fg("border", s),
+      titles: [{ text: "Projects", align: "left" }],
+    };
+    let borderBox = new BorderBox(borderBoxOptions);
+    if (!this.isEmpty) {
+      borderBoxOptions.titles = [
+        ...borderBoxOptions.titles!,
+        { text: this.theme.fg("dim", formatNumber(this.projects.length)), align: "right" },
+      ];
+      if (!this.table) {
+        this.table = new SortedTable(
+          {
+            columns: [
+              { header: cell.header("Name"), width: 20 },
+              { header: cell.header("Share %"), width: "fill" },
+              { header: cell.header("Sessions"), width: 14 },
+              { header: cell.header("Cost"), width: 8 },
+            ],
+            rows: this.rows,
+            maxHeight: this.maxHeight,
+            sort: { column: 3, direction: "desc" },
+            tui: this.tui,
+          },
+          this.theme,
+        );
+      }
+      borderBox = new BorderBox(borderBoxOptions);
+      borderBox.addChild(this.table);
+    } else {
+      borderBox.addChild(new Text(this.theme.fg("muted", EMPTY_MESSAGE)));
+    }
+    this.addChild(borderBox);
+    return super.render(width);
+  }
+
+  handleInput(data: string): void {
+    this.table?.handleInput(data);
+  }
+
+  override invalidate(): void {
+    super.invalidate();
+    this.table?.invalidate();
+  }
+}

package/src/tabs/Usage.ts

@@ -0,0 +1,181 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Container, Text, type TUI } from "@earendil-works/pi-tui";
+import { BorderBox, type BorderBoxOptions } from "@mohndoe/pi-tui-extras";
+import { cell, type CellComponent } from "../components/cells";
+import { GridRow } from "../components/shared/GridRow";
+import { SortedTable } from "../components/SortedTable";
+import { StatCard } from "../components/StatCard";
+import { formatNumber, stripAnsi } from "../format";
+import type { StatsSummary, ToolStat } from "../types";
+
+interface TokenUsageStat {
+  total: StatsSummary["totalTokens"];
+  input: StatsSummary["totalInputTokens"];
+  output: StatsSummary["totalOutputTokens"];
+  cacheRead: StatsSummary["totalCacheReadTokens"];
+  cacheWrite: StatsSummary["totalCacheWriteTokens"];
+}
+
+const TOOL_NAME_MAX_LENGTH = 120;
+
+const EMPTY_MESSAGE = "No tools data for this time range";
+
+export class Usage extends Container {
+  private isEmpty: boolean;
+  private theme: Theme;
+  private tokenUsage: TokenUsageStat;
+  private rows: CellComponent[][] = [];
+  private table: SortedTable | null = null;
+  private tableHeight: number;
+
+  constructor(
+    private tools: ToolStat[],
+    tokenUsage: TokenUsageStat,
+    theme: Theme,
+    private tui: TUI,
+    maxHeight: number,
+  ) {
+    super();
+    this.theme = theme;
+    this.tokenUsage = tokenUsage;
+    this.isEmpty = tools.length === 0;
+    // Tool table gets contentHeight - 4 to account for "Tokens" title + spacer + 2 line overhead
+    this.tableHeight = Math.max(3, maxHeight - 4);
+    this.buildRows();
+  }
+
+  /** Build row cells once in constructor. */
+  private buildRows(): void {
+    if (this.isEmpty) return;
+    const maxCount = Math.max(...this.tools.map((t) => t.count), 0);
+    this.rows = this.tools.map((t) => {
+      const barPct = maxCount > 0 ? (t.count / maxCount) * 100 : 0;
+      return [
+        cell.marquee(stripAnsi(t.name).slice(0, TOOL_NAME_MAX_LENGTH), this.tui),
+        cell.bar(barPct, (s) => s, "transparent"),
+        cell.text(this.theme.bold(formatNumber(t.count))),
+      ];
+    });
+  }
+
+  override render(width: number): string[] {
+    this.clear();
+
+    // Token section: title + stat cards
+    const title = this.theme.bold("Tokens");
+    const subtitle = this.theme.fg("muted", formatNumber(this.tokenUsage.total));
+    const row = new GridRow(
+      [
+        new StatCard(
+          {
+            label: {
+              text: "Input",
+            },
+            value: {
+              text: this.theme.bold(formatNumber(this.tokenUsage.input)),
+              color: "accent",
+            },
+          },
+          this.theme,
+        ),
+        new StatCard(
+          {
+            label: {
+              text: "Output",
+            },
+            value: {
+              text: this.theme.bold(formatNumber(this.tokenUsage.output)),
+              color: "accent",
+            },
+          },
+
+          this.theme,
+        ),
+        new StatCard(
+          {
+            label: {
+              text: "Cache Read",
+            },
+            value: {
+              text: this.theme.bold(formatNumber(this.tokenUsage.cacheRead)),
+              color: "accent",
+            },
+          },
+          this.theme,
+        ),
+        new StatCard(
+          {
+            label: {
+              text: "Cache Write",
+            },
+            value: {
+              text: this.theme.bold(formatNumber(this.tokenUsage.cacheWrite)),
+              color: "accent",
+            },
+          },
+          this.theme,
+        ),
+      ],
+      [25, 25, 25, 25],
+    );
+    const statRowBorderBox = new BorderBox({
+      titles: [
+        { text: title, align: "left" },
+        { text: subtitle, align: "right" },
+      ],
+      borderFn: (s: string) => this.theme.fg("border", s),
+      padding: { left: 1, right: 1 },
+    });
+    statRowBorderBox.addChild(row);
+    this.addChild(statRowBorderBox);
+
+    const borderBoxOptions: BorderBoxOptions = {
+      borderStyle: "singleRounded",
+      borderFn: (s) => this.theme.fg("border", s),
+      titles: [{ text: "Tools", align: "left" }],
+    };
+
+    let borderBox = new BorderBox(borderBoxOptions);
+
+    // Tool table section
+    if (!this.isEmpty) {
+      borderBoxOptions.titles = [
+        ...borderBoxOptions.titles!,
+        { text: this.theme.fg("dim", formatNumber(this.rows.length)), align: "right" },
+      ];
+
+      if (!this.table) {
+        this.table = new SortedTable(
+          {
+            columns: [
+              { header: cell.header("Command"), width: 20 },
+              { header: cell.header("Share %"), width: "fill" },
+              { header: cell.header("Calls"), width: 12 },
+            ],
+            rows: this.rows,
+            maxHeight: this.tableHeight,
+            sort: { column: 2, direction: "desc" },
+            tui: this.tui,
+          },
+          this.theme,
+        );
+      }
+      borderBox = new BorderBox(borderBoxOptions);
+      borderBox.addChild(this.table);
+    } else {
+      borderBox.addChild(new Text(this.theme.fg("muted", EMPTY_MESSAGE)));
+    }
+    this.addChild(borderBox);
+
+    return super.render(width);
+  }
+
+  handleInput(data: string): void {
+    this.table?.handleInput(data);
+  }
+
+  override invalidate(): void {
+    super.invalidate();
+    this.table?.invalidate();
+  }
+}