muonroi-cli 1.2.0

package/src/ui/status-bar/store.ts

@@ -0,0 +1,166 @@
+/**
+ * src/ui/status-bar/store.ts
+ *
+ * Status bar store: subscribable atom holding model/provider/tier/tokens/USD/degraded.
+ * wireStatusBar() connects to routerStore (Plan 03), subscribeThresholds (Plan 04),
+ * and subscribeDowngrade (Plan 05).
+ */
+
+import { routerStore } from "../../router/store.js";
+import { subscribeDowngrade } from "../../usage/downgrade.js";
+import { subscribeThresholds } from "../../usage/thresholds.js";
+
+export interface StatusBarState {
+  provider: string;
+  model: string;
+  tier: "hot" | "warm" | "cold" | "degraded";
+  in_tokens: number;
+  out_tokens: number;
+  cache_read_tokens: number;
+  cache_creation_tokens: number;
+  session_usd: number;
+  month_usd: number;
+  cap_usd: number;
+  current_pct: number;
+  degraded: boolean;
+  routed_from: string | null;
+  ee_status: "ok" | "warn" | "down" | "unknown";
+}
+
+type Listener = (s: StatusBarState) => void;
+
+function makeStore() {
+  let state: StatusBarState = {
+    provider: "",
+    model: "",
+    tier: "hot",
+    in_tokens: 0,
+    out_tokens: 0,
+    cache_read_tokens: 0,
+    cache_creation_tokens: 0,
+    session_usd: 0,
+    month_usd: 0,
+    cap_usd: 0,
+    current_pct: 0,
+    degraded: false,
+    routed_from: null,
+    ee_status: "unknown",
+  };
+  const listeners = new Set<Listener>();
+  return {
+    getState: () => state,
+    setState: (p: Partial<StatusBarState>) => {
+      state = { ...state, ...p };
+      for (const l of listeners) l(state);
+    },
+    subscribe: (fn: Listener) => {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    },
+  };
+}
+
+export const statusBarStore = makeStore();
+
+let wired = false;
+
+/**
+ * Wire status bar to upstream stores.
+ * Returns an unsubscribe-all function.
+ * Idempotent -- second call is a no-op until the returned cleanup runs.
+ */
+export function wireStatusBar(): () => void {
+  if (wired) return () => {};
+  wired = true;
+
+  const offRouter = routerStore.subscribe((rs) => {
+    statusBarStore.setState({
+      tier: rs.tier,
+      degraded: rs.degraded,
+      provider: rs.lastDecision?.provider ?? statusBarStore.getState().provider,
+      model: rs.lastDecision?.model ?? statusBarStore.getState().model,
+    });
+  });
+
+  const offThresholds = subscribeThresholds((ev) => {
+    statusBarStore.setState({
+      session_usd: ev.current_usd,
+      month_usd: ev.current_usd,
+      cap_usd: ev.cap_usd,
+      current_pct: ev.current_pct,
+    });
+  });
+
+  const offDowngrade = subscribeDowngrade((ev) => {
+    statusBarStore.setState({
+      model: ev.toModel,
+      current_pct: ev.pct,
+    });
+  });
+
+  // EE health polling (every 30s) — reads config.json for server URL
+  let eeTimer: ReturnType<typeof setInterval> | null = null;
+  let eeBaseUrl = "http://127.0.0.1:8082";
+  let eeAuthToken = "";
+  try {
+    const fs = require("node:fs");
+    const os = require("node:os");
+    const path = require("node:path");
+    const cfgPath = path.join(os.homedir(), ".experience", "config.json");
+    const cfg = JSON.parse(fs.readFileSync(cfgPath, "utf8"));
+    if (cfg.serverBaseUrl) eeBaseUrl = cfg.serverBaseUrl;
+    eeAuthToken = cfg.serverReadAuthToken || cfg.serverAuthToken || "";
+  } catch { /* config unreadable — try localhost */ }
+
+  async function checkEEHealth() {
+    try {
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 5000);
+      const headers: Record<string, string> = {};
+      if (eeAuthToken) headers["Authorization"] = `Bearer ${eeAuthToken}`;
+      const res = await fetch(`${eeBaseUrl}/health`, { signal: controller.signal, headers });
+      clearTimeout(timeout);
+      if (res.ok) {
+        const data = (await res.json()) as { status?: string };
+        statusBarStore.setState({ ee_status: data.status === "ok" ? "ok" : "warn" });
+      } else {
+        statusBarStore.setState({ ee_status: "warn" });
+      }
+    } catch {
+      statusBarStore.setState({ ee_status: "down" });
+    }
+  }
+  checkEEHealth();
+  eeTimer = setInterval(checkEEHealth, 30_000);
+
+  return () => {
+    offRouter();
+    offThresholds();
+    offDowngrade();
+    if (eeTimer) clearInterval(eeTimer);
+    wired = false;
+  };
+}
+
+/** Test helper: reset store to default state. */
+export function __resetStatusBarStoreForTests(): void {
+  statusBarStore.setState({
+    provider: "",
+    model: "",
+    tier: "hot",
+    in_tokens: 0,
+    out_tokens: 0,
+    cache_read_tokens: 0,
+    cache_creation_tokens: 0,
+    session_usd: 0,
+    month_usd: 0,
+    cap_usd: 0,
+    current_pct: 0,
+    degraded: false,
+    routed_from: null,
+    ee_status: "unknown",
+  });
+  wired = false;
+}

package/src/ui/status-bar/tier-badge.test.tsx

@@ -0,0 +1,38 @@
+/**
+ * tier-badge.test.tsx -- tests for TierBadge component.
+ */
+import { describe, expect, it } from "vitest";
+import { TierBadge } from "./tier-badge.js";
+
+describe("TierBadge", () => {
+  it("renders hot with green color", () => {
+    const el = TierBadge({ tier: "hot" }) as any;
+    expect(el.props.fg).toBe("green");
+    expect(el.props.children).toBe("hot");
+    expect(el.props["data-tier"]).toBe("hot");
+  });
+
+  it("renders warm with cyan color", () => {
+    const el = TierBadge({ tier: "warm" }) as any;
+    expect(el.props.fg).toBe("cyan");
+    expect(el.props.children).toBe("warm");
+  });
+
+  it("renders cold with magenta color", () => {
+    const el = TierBadge({ tier: "cold" }) as any;
+    expect(el.props.fg).toBe("magenta");
+    expect(el.props.children).toBe("cold");
+  });
+
+  it("renders degraded with yellow and blink", () => {
+    const el = TierBadge({ tier: "degraded" }) as any;
+    expect(el.props.fg).toBe("yellow");
+    expect(el.props.blink).toBe(true);
+    expect(el.props.children).toBe("degraded");
+  });
+
+  it("does not blink for non-degraded tiers", () => {
+    const el = TierBadge({ tier: "hot" }) as any;
+    expect(el.props.blink).toBeFalsy();
+  });
+});

package/src/ui/status-bar/tier-badge.tsx

@@ -0,0 +1,29 @@
+/**
+ * src/ui/status-bar/tier-badge.tsx
+ *
+ * Tier badge sub-component: color-coded tier label with blink on degraded.
+ * Color mapping: hot=green, warm=cyan, cold=magenta, degraded=yellow blink.
+ */
+
+import * as React from "react";
+
+export interface TierBadgeProps {
+  tier: "hot" | "warm" | "cold" | "degraded";
+}
+
+const COLOR: Record<TierBadgeProps["tier"], string> = {
+  hot: "green",
+  warm: "cyan",
+  cold: "magenta",
+  degraded: "yellow",
+};
+
+export function TierBadge({ tier }: TierBadgeProps): React.ReactElement {
+  const color = COLOR[tier];
+  const blink = tier === "degraded";
+  return React.createElement(
+    "text",
+    { fg: color, blink: blink || undefined, "data-testid": "tier-badge", "data-tier": tier },
+    tier,
+  );
+}

package/src/ui/status-bar/usd-meter.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * usd-meter.test.tsx -- tests for UsdMeter component.
+ */
+import { describe, expect, it } from "vitest";
+import { UsdMeter } from "./usd-meter.js";
+
+describe("UsdMeter", () => {
+  it("renders session and month USD formatted to 2 decimals", () => {
+    const el = UsdMeter({ session_usd: 3.5, month_usd: 10.123, current_pct: 40 }) as any;
+    expect(el.props.children).toBe("session: $3.50 | month: $10.12");
+  });
+
+  it("renders white color when current_pct < 50", () => {
+    const el = UsdMeter({ session_usd: 0, month_usd: 0, current_pct: 20 }) as any;
+    expect(el.props.fg).toBe("white");
+  });
+
+  it("renders cyan color when current_pct >= 50 and < 80", () => {
+    const el = UsdMeter({ session_usd: 0, month_usd: 0, current_pct: 55 }) as any;
+    expect(el.props.fg).toBe("cyan");
+  });
+
+  it("renders yellow color when current_pct >= 80 and < 100", () => {
+    const el = UsdMeter({ session_usd: 0, month_usd: 0, current_pct: 80 }) as any;
+    expect(el.props.fg).toBe("yellow");
+  });
+
+  it("renders red color when current_pct >= 100", () => {
+    const el = UsdMeter({ session_usd: 0, month_usd: 0, current_pct: 100 }) as any;
+    expect(el.props.fg).toBe("red");
+  });
+
+  it("has data-testid usd-meter", () => {
+    const el = UsdMeter({ session_usd: 0, month_usd: 0, current_pct: 0 }) as any;
+    expect(el.props["data-testid"]).toBe("usd-meter");
+  });
+});

package/src/ui/status-bar/usd-meter.tsx

@@ -0,0 +1,22 @@
+/**
+ * src/ui/status-bar/usd-meter.tsx
+ *
+ * USD meter sub-component: session + month with threshold color escalation.
+ * white < 50%, cyan >= 50%, yellow >= 80%, red >= 100%.
+ */
+
+import * as React from "react";
+
+export interface UsdMeterProps {
+  session_usd: number;
+  month_usd: number;
+  current_pct: number;
+}
+
+export function UsdMeter({ session_usd, month_usd, current_pct }: UsdMeterProps): React.ReactElement {
+  const color = current_pct >= 100 ? "red" : current_pct >= 80 ? "yellow" : current_pct >= 50 ? "cyan" : "white";
+
+  const text = `session: $${session_usd.toFixed(2)} | month: $${month_usd.toFixed(2)}`;
+
+  return React.createElement("text", { fg: color, "data-testid": "usd-meter", "data-pct": current_pct }, text);
+}

package/src/ui/terminal-selection-text.ts

@@ -0,0 +1,72 @@
+import type { Renderable } from "@opentui/core";
+import { TextBufferRenderable } from "@opentui/core";
+
+/** Subset of OpenTUI Selection used for clipboard (avoid private package subpaths). */
+export type TuiSelectionSnapshot = {
+  selectedRenderables: Renderable[];
+  bounds: { x: number; y: number; width: number; height: number };
+  anchor: { x: number; y: number };
+  getSelectedText(): string;
+};
+
+function isStrictDescendantOf(ancestor: Renderable, node: Renderable): boolean {
+  let p: Renderable | null = node.parent as Renderable | null;
+  while (p) {
+    if (p === ancestor) return true;
+    p = p.parent as Renderable | null;
+  }
+  return false;
+}
+
+/** Drop parents when a deeper selected renderable is nested under them (duplicate coverage). */
+function selectedTextBuffersOnly(selection: TuiSelectionSnapshot): TextBufferRenderable[] {
+  const raw = selection.selectedRenderables.filter(
+    (r): r is TextBufferRenderable => !r.isDestroyed && r instanceof TextBufferRenderable,
+  );
+  return raw.filter((r) => !raw.some((other) => other !== r && isStrictDescendantOf(r, other)));
+}
+
+function sortReadingOrder(a: TextBufferRenderable, b: TextBufferRenderable): number {
+  if (a.y !== b.y) return a.y - b.y;
+  return a.x - b.x;
+}
+
+/**
+ * OpenTUI's Selection.getSelectedText() concatenates every intersected text buffer. In markdown-heavy
+ * UIs a tiny drag can still hit dozens/hundreds of sibling line renderables. We narrow to leaf buffers,
+ * optionally to the selection midpoint for thin rects, and fall back to the anchor cell's smallest buffer
+ * when the joined text is still huge.
+ */
+export function getCompactTuiSelectionText(selection: TuiSelectionSnapshot): string {
+  let buffers = selectedTextBuffersOnly(selection);
+  if (buffers.length === 0) return selection.getSelectedText();
+
+  const b = selection.bounds;
+  const thin = b.height <= 2;
+  if (thin && buffers.length > 6) {
+    const midX = Math.floor(b.x + b.width / 2);
+    const midY = Math.floor(b.y + b.height / 2);
+    const narrowed = buffers.filter((r) => midX >= r.x && midX < r.x + r.width && midY >= r.y && midY < r.y + r.height);
+    if (narrowed.length > 0) buffers = narrowed;
+  }
+
+  buffers = [...buffers].sort(sortReadingOrder);
+  let text = buffers
+    .map((r) => r.getSelectedText())
+    .filter((t) => t.length > 0)
+    .join("\n");
+
+  const lineCount = text === "" ? 0 : text.split("\n").length;
+  if (lineCount > 40 && thin) {
+    const ax = selection.anchor.x;
+    const ay = selection.anchor.y;
+    const atPoint = buffers.filter((r) => ax >= r.x && ax < r.x + r.width && ay >= r.y && ay < r.y + r.height);
+    if (atPoint.length > 0) {
+      atPoint.sort((a, b) => a.width * a.height - b.width * b.height);
+      const fallback = atPoint[0].getSelectedText();
+      if (fallback && fallback.split("\n").length < lineCount) text = fallback;
+    }
+  }
+
+  return text || selection.getSelectedText();
+}

package/src/ui/theme.ts

@@ -0,0 +1,54 @@
+export const dark = {
+  background: "#000000",
+  backgroundPanel: "#111111",
+  backgroundElement: "#1a1a1a",
+  border: "#333333",
+  borderActive: "#555555",
+  text: "#e0e0e0",
+  textMuted: "#666666",
+  textDim: "#444444",
+  primary: "#ffffff",
+  accent: "#5c9cf5",
+  subagentAccent: "#66d9c2",
+  selected: "#ffffff",
+  selectedBg: "#2a2a2a",
+  diffAdded: "#1e3a1e",
+  diffAddedFg: "#8adf8a",
+  diffAddedLineNum: "#3a6a3a",
+  diffRemoved: "#3a1e1e",
+  diffRemovedFg: "#df8a8a",
+  diffRemovedLineNum: "#6a3a3a",
+  diffContext: "#161616",
+  diffContextFg: "#999999",
+  diffLineNumber: "#555555",
+  diffHeader: "#1c1c1c",
+  diffHeaderFg: "#888888",
+  diffSeparator: "#1a1a1a",
+  diffSeparatorFg: "#555555",
+  mdHeading: "#e0e0e0",
+  mdBold: "#e8a465",
+  mdItalic: "#e5c07b",
+  mdCode: "#6abf6a",
+  mdCodeBlockBg: "#141414",
+  mdCodeBlockFg: "#c0c0c0",
+  mdLink: "#5c9cf5",
+  mdLinkText: "#d4a0d4",
+  mdHr: "#333333",
+  mdListBullet: "#666666",
+  planBorder: "#e5c07b",
+  planTitle: "#e5c07b",
+  planStepNum: "#e5c07b",
+  planStepTitle: "#e0e0e0",
+  planStepDesc: "#999999",
+  planStepFile: "#5c9cf5",
+  planQuestionText: "#e0e0e0",
+  planOptionDefault: "#888888",
+  planOptionSelected: "#e5c07b",
+  planOptionCheck: "#22c55e",
+  planInputBg: "#1a1a1a",
+  planInputText: "#e0e0e0",
+  planHint: "#555555",
+  queueBg: "#222222",
+} as const;
+
+export type Theme = typeof dark;

package/src/usage/downgrade.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import {
+  DOWNGRADE_CHAIN,
+  type DowngradeEvent,
+  downgradeChain,
+  emitDowngrade,
+  subscribeDowngrade,
+} from "./downgrade.js";
+
+describe("DOWNGRADE_CHAIN", () => {
+  it("is exactly Opus -> Sonnet -> Haiku -> HALT", () => {
+    expect(DOWNGRADE_CHAIN).toEqual([
+      "claude-3-opus-latest",
+      "claude-3-5-sonnet-latest",
+      "claude-3-5-haiku-latest",
+      "HALT",
+    ]);
+  });
+});
+
+describe("downgradeChain()", () => {
+  it("from Opus yields Sonnet with transition label", () => {
+    const step = downgradeChain("claude-3-opus-latest", 80);
+    expect(step.next).toBe("claude-3-5-sonnet-latest");
+    expect(step.isHalt).toBe(false);
+    expect(step.eventLabel).toContain("switching");
+    expect(step.eventLabel).toContain("Opus");
+    expect(step.eventLabel).toContain("Sonnet");
+    expect(step.eventLabel).toContain("80%");
+  });
+
+  it("from Sonnet yields Haiku with transition label", () => {
+    const step = downgradeChain("claude-3-5-sonnet-latest", 95);
+    expect(step.next).toBe("claude-3-5-haiku-latest");
+    expect(step.isHalt).toBe(false);
+    expect(step.eventLabel).toContain("Sonnet");
+    expect(step.eventLabel).toContain("Haiku");
+  });
+
+  it("from Haiku yields HALT with isHalt=true", () => {
+    const step = downgradeChain("claude-3-5-haiku-latest", 100);
+    expect(step.next).toBe("HALT");
+    expect(step.isHalt).toBe(true);
+    expect(step.eventLabel).toContain("halting");
+  });
+
+  it("unknown model treated as top of chain (Opus position)", () => {
+    const step = downgradeChain("some-unknown-model", 90);
+    expect(step.next).toBe("claude-3-5-sonnet-latest");
+    expect(step.isHalt).toBe(false);
+  });
+});
+
+describe("subscribeDowngrade()", () => {
+  it("fires listener with fromModel, toModel, pct on emitDowngrade", () => {
+    const events: DowngradeEvent[] = [];
+    const unsub = subscribeDowngrade((e) => events.push(e));
+
+    emitDowngrade({
+      fromModel: "claude-3-opus-latest",
+      toModel: "claude-3-5-sonnet-latest",
+      pct: 82,
+      atMs: Date.now(),
+    });
+
+    expect(events).toHaveLength(1);
+    expect(events[0].fromModel).toBe("claude-3-opus-latest");
+    expect(events[0].toModel).toBe("claude-3-5-sonnet-latest");
+    expect(events[0].pct).toBe(82);
+
+    unsub();
+
+    // After unsub, no more events
+    emitDowngrade({
+      fromModel: "claude-3-5-sonnet-latest",
+      toModel: "claude-3-5-haiku-latest",
+      pct: 95,
+      atMs: Date.now(),
+    });
+    expect(events).toHaveLength(1);
+  });
+});

package/src/usage/downgrade.ts

@@ -0,0 +1,70 @@
+/**
+ * src/usage/downgrade.ts
+ *
+ * Auto-downgrade chain for USAGE-04.
+ * Opus -> Sonnet -> Haiku -> HALT with status-bar transition events.
+ *
+ * Plan 06 (status bar) subscribes to DowngradeEvent for UI updates.
+ */
+
+export const DOWNGRADE_CHAIN: ReadonlyArray<string> = [
+  "claude-3-opus-latest",
+  "claude-3-5-sonnet-latest",
+  "claude-3-5-haiku-latest",
+  "HALT",
+];
+
+export interface DowngradeStep {
+  next: string;
+  isHalt: boolean;
+  eventLabel: string;
+}
+
+export interface DowngradeEvent {
+  fromModel: string;
+  toModel: string;
+  pct: number;
+  atMs: number;
+}
+
+/**
+ * Given the current model, return the next step down in the downgrade chain.
+ * Unknown models are treated as top-of-chain (Opus position).
+ */
+export function downgradeChain(currentModel: string, capPct = 0): DowngradeStep {
+  const idx = DOWNGRADE_CHAIN.indexOf(currentModel);
+  const i = idx === -1 ? 0 : idx; // unknown model treated as top
+  const next = DOWNGRADE_CHAIN[i + 1] ?? "HALT";
+  const isHalt = next === "HALT";
+
+  const human = (m: string) =>
+    m.includes("opus") ? "Opus" : m.includes("sonnet") ? "Sonnet" : m.includes("haiku") ? "Haiku" : m;
+
+  const eventLabel = isHalt
+    ? `Capping at ${capPct.toFixed(0)}% — halting (Haiku exhausted)`
+    : `Capping at ${capPct.toFixed(0)}% — switching ${human(currentModel)} → ${human(next)}`;
+
+  return { next, isHalt, eventLabel };
+}
+
+type Listener = (e: DowngradeEvent) => void;
+const listeners = new Set<Listener>();
+
+/**
+ * Subscribe to downgrade transition events.
+ * Returns an unsubscribe function.
+ */
+export function subscribeDowngrade(fn: Listener): () => void {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}
+
+/**
+ * Emit a downgrade event to all subscribers.
+ * Called by decide() when cap-driven downgrade occurs.
+ */
+export function emitDowngrade(e: DowngradeEvent): void {
+  for (const l of listeners) l(e);
+}

package/src/usage/estimator.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { estimateTokensFromChars, projectCostUSD } from "./estimator.js";
+
+describe("estimator", () => {
+  describe("projectCostUSD", () => {
+    it("computes cost for known anthropic model", () => {
+      // claude-3-5-sonnet-latest: $3/M input, $15/M output
+      // 1M input + 1M output = $3 + $15 = $18
+      const cost = projectCostUSD("anthropic", "claude-3-5-sonnet-latest", 1_000_000, 1_000_000);
+      expect(cost).toBeCloseTo(18.0, 4);
+    });
+
+    it("returns 0 for unknown model", () => {
+      const cost = projectCostUSD("anthropic", "nonexistent-model", 1_000_000, 1_000_000);
+      expect(cost).toBe(0);
+    });
+
+    it("returns 0 for unknown provider", () => {
+      const cost = projectCostUSD("unknown-provider", "gpt-4o", 1_000_000, 1_000_000);
+      expect(cost).toBe(0);
+    });
+
+    it("ollama wildcard returns 0 cost", () => {
+      const cost = projectCostUSD("ollama", "llama3.2", 1_000_000, 1_000_000);
+      expect(cost).toBe(0);
+    });
+
+    it("computes haiku cost correctly", () => {
+      // claude-3-5-haiku-latest: $0.80/M input, $4.00/M output
+      // 100k input + 25k output = 0.08 + 0.10 = 0.18
+      const cost = projectCostUSD("anthropic", "claude-3-5-haiku-latest", 100_000, 25_000);
+      expect(cost).toBeCloseTo(0.18, 4);
+    });
+  });
+
+  describe("estimateTokensFromChars", () => {
+    it("divides chars by 4 and rounds up", () => {
+      expect(estimateTokensFromChars(100)).toBe(25);
+      expect(estimateTokensFromChars(101)).toBe(26);
+      expect(estimateTokensFromChars(0)).toBe(0);
+    });
+  });
+});

package/src/usage/estimator.ts

@@ -0,0 +1,34 @@
+/**
+ * src/usage/estimator.ts
+ *
+ * Token estimation and cost projection for the reservation ledger.
+ * Phase 1 explicitly accepts chars/4 estimator -- fine for cap projection, NOT for billing.
+ * Phase 4 swaps in tiktoken-encoder for actual token counts.
+ */
+
+import { lookupPricing } from "../providers/pricing.js";
+
+/**
+ * Rough token estimate from character count.
+ * Acceptable for cap projection only -- not for billing reconciliation.
+ */
+export function estimateTokensFromChars(chars: number): number {
+  return Math.ceil(chars / 4);
+}
+
+/**
+ * Project the USD cost of a request given token estimates and the static pricing table.
+ * Returns 0 for unknown provider/model -- caller decides how to handle (ledger treats as 0 risk).
+ */
+export function projectCostUSD(
+  provider: string,
+  model: string,
+  estInputTokens: number,
+  estOutputTokens: number,
+): number {
+  const p = lookupPricing(provider, model);
+  if (!p) return 0;
+  const inUSD = (estInputTokens / 1_000_000) * p.input_per_million_usd;
+  const outUSD = (estOutputTokens / 1_000_000) * p.output_per_million_usd;
+  return inUSD + outUSD;
+}