megaproxy/tiletopia
1
0
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity Actions

Replace token-usage panel with per-pane context-fill indicator

Browse source 
For a subscription user, lifetime token totals + a $ estimate aren't
actionable; how full each session's context window is right now is. So:

- Removed the UsagePanel, the titlebar 💰 chip, and Ctrl+Shift+U.
- Repurposed the transcript reader (src-tauri/src/usage.rs): get_pane_context
  returns each recent session's CURRENT context occupancy = the last
  assistant turn's input + cache_read + cache_creation tokens (the prompt
  size), instead of lifetime sums. Same UNC/$HOME/cache/recency machinery.
- src/lib/usage.ts now holds context helpers (window inference 200k vs 1M by
  whether occupancy already exceeds 200k, % , green→amber→red ramp, label).
- App polls get_pane_context (15s, visibility-gated) into a cwd→context map
  exposed via orchestration; each LeafPane looks itself up by leaf.cwd and
  renders a slim fill bar + % in its header (hidden for non-claude/unmatched
  panes).

Also fixes the narrow-pane toolbar: a ResizeObserver sets leaf--narrow /
leaf--xnarrow width tiers; the label shrinks first, split buttons / status /
secondary chips drop out by tier, and the close × + context indicator stay
pinned right and visible down to the 180px min width.

tsc clean (apart from the not-yet-installed xterm addons). Rust builds on
the Windows host; needs runtime verification.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-28 22:43:06 +01:00
parent b23f3d1ecb
commit d951c360ae
12 changed files with 235 additions and 612 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/App.tsx
View file

@ -23,10 +23,10 @@ import {
createPaneWindow,
takePendingWindowInit,
pushWindowWorkspaces,
getClaudeUsage,
getPaneContext,
type PaneId,
type SpawnSpec,
type SessionUsage,
type SessionContext,
type SshHost,
type McpStatus,
type McpMirror,
@ -108,8 +108,6 @@ import Palette from "./components/Palette";
import HostManager from "./components/HostManager";
import Help from "./components/Help";
import McpPanel from "./components/McpPanel";
import UsagePanel from "./components/UsagePanel";
import { totalCost, formatUsd } from "./lib/usage";
import McpConfirm, { type McpConfirmSpec } from "./components/McpConfirm";
import TabStrip from "./components/TabStrip";
import "./App.css";
@ -243,9 +241,7 @@ export default function App() {
token: null,
});
const [mcpPanelOpen, setMcpPanelOpen] = useState(false);
const [usagePanelOpen, setUsagePanelOpen] = useState(false);
const [usageSessions, setUsageSessions] = useState<SessionUsage[]>([]);
const [usageLoading, setUsageLoading] = useState(false);
const [contextSessions, setContextSessions] = useState<SessionContext[]>([]);
const [ready, setReady] = useState(false);
const [notifications, setNotifications] = useState<Toast[]>([]);
const [paletteOpen, setPaletteOpen] = useState(false);
@ -757,59 +753,52 @@ export default function App() {
const openHostManager = useCallback(() => setHostManagerOpen(true), []);
const closeHostManager = useCallback(() => setHostManagerOpen(false), []);
// ---- claude usage tracking ----------------------------------------------
// Reads ~/.claude transcripts in the open WSL panes' distros (backend). The
// fetch guard collapses overlapping calls (the open panel polls every 5s and
// the background heartbeat every 20s both call this).
const usageFetchingRef = useRef(false);
const refreshUsage = useCallback(async () => {
if (usageFetchingRef.current) return;
// ---- claude context tracking --------------------------------------------
// Reads each recent session's current context occupancy from ~/.claude
// transcripts (backend), for the per-pane context-fill indicator. The fetch
// guard collapses overlapping ticks.
const contextFetchingRef = useRef(false);
const refreshContext = useCallback(async () => {
if (contextFetchingRef.current) return;
const distros = new Set<string>();
for (const leaf of walkLeaves(treeRef.current)) {
if (leaf.shellKind === "wsl" && leaf.distro) distros.add(leaf.distro);
}
if (distros.size === 0) {
setUsageSessions([]);
setContextSessions([]);
return;
}
usageFetchingRef.current = true;
setUsageLoading(true);
contextFetchingRef.current = true;
try {
setUsageSessions(await getClaudeUsage(Array.from(distros)));
setContextSessions(await getPaneContext(Array.from(distros)));
} catch (e) {
console.warn("getClaudeUsage failed:", e);
console.warn("getPaneContext failed:", e);
} finally {
usageFetchingRef.current = false;
setUsageLoading(false);
contextFetchingRef.current = false;
}
}, []);
// Background heartbeat so the titlebar total stays roughly current without
// the panel open. Gated on visibility so a hidden/minimized window stays quiet.
// Poll on a light interval, gated on visibility so a hidden/minimized window
// stays quiet.
useEffect(() => {
const tick = () => {
if (document.visibilityState === "visible") void refreshUsage();
if (document.visibilityState === "visible") void refreshContext();
};
tick();
const id = window.setInterval(tick, 20000);
const id = window.setInterval(tick, 15000);
return () => clearInterval(id);
}, [refreshUsage]);
}, [refreshContext]);
// cwd + label of open WSL panes, for highlighting matching sessions.
const openPanes = useMemo(
() =>
Array.from(walkLeaves(tree))
.filter((l) => l.shellKind === "wsl")
.map((l) => ({ cwd: l.cwd ?? "", label: l.label ?? l.distro ?? "pane" })),
[tree],
);
// Titlebar chip total — scoped to the open panes ("this workspace"), matching
// the usage panel's default view, so it isn't inflated by unrelated projects.
const workspaceUsageTotal = useMemo(() => {
const cwds = new Set(openPanes.map((p) => p.cwd).filter(Boolean));
return totalCost(usageSessions.filter((s) => cwds.has(s.cwd)));
}, [openPanes, usageSessions]);
// cwd -> newest session's context, consumed by each LeafPane via orchestration.
const paneContext = useMemo(() => {
const m = new Map<string, SessionContext>();
for (const s of contextSessions) {
if (!s.cwd) continue;
const prev = m.get(s.cwd);
if (!prev || s.lastActiveMs > prev.lastActiveMs) m.set(s.cwd, s);
}
return m;
}, [contextSessions]);
// Outside-click dismissal for the titlebar dropdowns. Mirrors the
// per-pane shell-picker pattern in LeafPane.tsx.
@ -913,13 +902,6 @@ export default function App() {
return;
}
// Ctrl+Shift+U — usage panel
if (ctrl && shift && !alt && key === "u") {
e.preventDefault();
e.stopPropagation();
setUsagePanelOpen((v) => !v);
return;
}
// Ctrl+Shift+Alt+B — global broadcast all/none
if (ctrl && shift && alt && key === "b") {
@ -1353,6 +1335,7 @@ export default function App() {
reportLeafIdle,
moveToNewWindow,
getInitialPaneIdFor,
paneContext,
}),
[
activeLeafId,
@ -1378,6 +1361,7 @@ export default function App() {
reportLeafIdle,
moveToNewWindow,
getInitialPaneIdFor,
paneContext,
],
);
@ -2154,14 +2138,6 @@ export default function App() {
>
🤖
</button>
<button
className="palette-btn usage-btn"
onClick={() => setUsagePanelOpen(true)}
title="claude token usage & estimated cost (Ctrl+Shift+U)"
aria-label="Usage"
>
💰{workspaceUsageTotal > 0 ? ` ~${formatUsd(workspaceUsageTotal)}` : ""}
</button>
<button
className="palette-btn"
onClick={() => setHelpOpen(true)}
@ -2282,16 +2258,6 @@ export default function App() {
/>
)}
{usagePanelOpen && (
<UsagePanel
sessions={usageSessions}
loading={usageLoading}
onRefresh={refreshUsage}
onClose={() => setUsagePanelOpen(false)}
openPanes={openPanes}
/>
)}
{confirmQueue.length > 0 && (
<McpConfirm
spec={confirmQueue[0]}

194
src/components/UsagePanel.css
View file

@ -1,194 +0,0 @@
/* Usage panel — mirrors the McpPanel modal shell (.backdrop + fixed dialog).
Palette matches McpPanel.css / SearchBar.css: #161616 surface, #2a2a2a
borders, #ccc text, accent green for cost. */
.usage-panel {
position: fixed;
top: 8vh;
left: 50%;
transform: translateX(-50%);
width: min(640px, 92vw);
max-height: 84vh;
background: #161616;
color: #ccc;
border: 1px solid #2a2a2a;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
z-index: 100;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
}
.usage-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #2a2a2a;
}
.usage-title {
font-weight: 600;
font-size: 13px;
}
.usage-scope {
font: inherit;
font-size: 11px;
background: transparent;
border: 1px solid #2a2a2a;
border-radius: 3px;
color: #9aa0a6;
padding: 2px 8px;
cursor: pointer;
margin-right: auto;
}
.usage-scope:hover {
background: #2a2a2a;
color: #ddd;
}
.usage-total {
font-size: 13px;
font-weight: 600;
color: #e6e6e6;
}
.usage-total-usd {
color: #6cc04a;
font-weight: 600;
}
.usage-link {
font: inherit;
background: transparent;
border: none;
color: #6ca0d8;
cursor: pointer;
text-decoration: underline;
padding: 0;
}
.usage-refresh,
.usage-close {
background: transparent;
border: none;
color: #888;
line-height: 1;
cursor: pointer;
border-radius: 3px;
}
.usage-refresh {
font-size: 15px;
padding: 2px 7px;
}
.usage-close {
font-size: 18px;
padding: 2px 8px;
}
.usage-refresh:hover,
.usage-close:hover {
background: #2a2a2a;
color: #ddd;
}
.usage-refresh:disabled {
opacity: 0.4;
cursor: default;
}
.usage-body {
overflow-y: auto;
flex: 1;
padding: 6px 0;
}
.usage-empty {
color: #777;
font-size: 12px;
padding: 22px 16px;
text-align: center;
}
.usage-list {
list-style: none;
}
.usage-row {
display: flex;
gap: 8px;
padding: 8px 14px;
border-bottom: 1px solid #202020;
}
.usage-row--open {
background: #18221a;
}
.usage-dot {
color: #444;
font-size: 11px;
line-height: 18px;
}
.usage-row--open .usage-dot {
color: #6cc04a;
}
.usage-row-main {
flex: 1;
min-width: 0;
}
.usage-row-top {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 12px;
}
.usage-proj {
font-weight: 600;
color: #e6e6e6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.usage-model {
color: #888;
font-size: 11px;
}
.usage-tokens {
color: #9aa0a6;
margin-left: auto;
white-space: nowrap;
}
.usage-cost {
color: #6cc04a;
font-weight: 600;
white-space: nowrap;
min-width: 56px;
text-align: right;
}
.usage-row-sub {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 2px;
font-size: 11px;
color: #666;
}
.usage-cwd {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.usage-pane-tag {
color: #6cc04a;
white-space: nowrap;
}
.usage-when {
margin-left: auto;
white-space: nowrap;
}
.usage-foot {
padding: 7px 14px;
border-top: 1px solid #2a2a2a;
font-size: 10px;
color: #666;
text-align: center;
}

171
src/components/UsagePanel.tsx
View file

@ -1,171 +0,0 @@
import { useEffect, useState } from "react";
import type { SessionUsage } from "../ipc";
import {
sessionCost,
sessionTokens,
dominantModel,
totalCost,
formatUsd,
formatTokens,
relativeTime,
} from "../lib/usage";
import "./UsagePanel.css";
// Re-fetch cadence while the panel is open. App owns the data + the slower
// background poll that feeds the titlebar chip; this keeps the open panel live.
const PANEL_REFRESH_MS = 5000;
interface UsagePanelProps {
sessions: SessionUsage[];
loading: boolean;
onRefresh: () => void;
onClose: () => void;
/** cwd + label of currently-open WSL panes, used to highlight matching
* sessions (a session whose transcript cwd equals an open pane's cwd). */
openPanes: { cwd: string; label: string }[];
}
export default function UsagePanel({
sessions,
loading,
onRefresh,
onClose,
openPanes,
}: UsagePanelProps) {
// Default to the open panes' sessions ("this workspace"); toggle to see
// every recent session on the distros.
const [showAll, setShowAll] = useState(false);
// Refresh on open and on a light interval while open.
useEffect(() => {
onRefresh();
const id = window.setInterval(onRefresh, PANEL_REFRESH_MS);
return () => clearInterval(id);
// onRefresh is a stable useCallback in the parent.
}, [onRefresh]);
// cwd -> first matching open pane label.
const paneByCwd = new Map<string, string>();
for (const p of openPanes) {
if (p.cwd && !paneByCwd.has(p.cwd)) paneByCwd.set(p.cwd, p.label);
}
const matched = sessions.filter((s) => paneByCwd.has(s.cwd));
const shown = showAll ? sessions : matched;
const nowMs = Date.now();
const total = totalCost(shown);
return (
<>
<button className="backdrop" onClick={onClose} aria-label="Close" />
<div className="usage-panel" role="dialog" aria-label="Token usage">
<header className="usage-header">
<span className="usage-title">Usage</span>
<button
className="usage-scope"
onClick={() => setShowAll((v) => !v)}
title={
showAll
? "Showing every recent session on the open panes' distros"
: "Showing only sessions for currently-open panes"
}
>
{showAll ? `all recent (${sessions.length})` : `open panes (${matched.length})`}
</button>
<span
className="usage-total"
title="Total tokens across the listed sessions"
>
{formatTokens(shown.reduce((a, s) => a + sessionTokens(s), 0))} tok
<span className="usage-total-usd" title="API-pricing estimate — n/a on a Pro/Max subscription">
{" · ~"}
{formatUsd(total)}
</span>
</span>
<button
className="usage-refresh"
onClick={onRefresh}
disabled={loading}
title="Refresh"
aria-label="Refresh"
>
⟳
</button>
<button className="usage-close" onClick={onClose} aria-label="Close">
×
</button>
</header>
<div className="usage-body">
{shown.length === 0 ? (
<p className="usage-empty">
{loading
? "Reading transcripts…"
: sessions.length > 0 && !showAll
? "No open pane has a matching claude session yet."
: "No recent claude sessions found in the open panes' WSL distros."}
{sessions.length > 0 && !showAll && (
<>
{" "}
<button className="usage-link" onClick={() => setShowAll(true)}>
Show all recent ({sessions.length})
</button>
</>
)}
</p>
) : (
<ul className="usage-list">
{shown.map((s) => {
const paneLabel = paneByCwd.get(s.cwd);
const open = paneLabel !== undefined;
return (
<li
key={`${s.distro}/${s.sessionId}`}
className={`usage-row${open ? " usage-row--open" : ""}`}
>
<span className="usage-dot" aria-hidden>
{open ? "●" : "○"}
</span>
<div className="usage-row-main">
<div className="usage-row-top">
<span className="usage-proj" title={s.cwd}>
{projectName(s.cwd) || s.projectDir}
</span>
<span className="usage-model">{dominantModel(s)}</span>
<span className="usage-tokens">
{formatTokens(sessionTokens(s))} tok
</span>
<span className="usage-cost">{formatUsd(sessionCost(s))}</span>
</div>
<div className="usage-row-sub">
<span className="usage-cwd" title={s.cwd}>
{s.cwd}
</span>
{open && (
<span className="usage-pane-tag">[pane: {paneLabel}]</span>
)}
<span className="usage-when">{relativeTime(s.lastActiveMs, nowMs)}</span>
</div>
</div>
</li>
);
})}
</ul>
)}
</div>
<footer className="usage-foot">
● = open pane &nbsp;·&nbsp; ~$ is an API-pricing estimate (n/a on Pro/Max;
can't reflect <code>/usage</code> quota) &nbsp;·&nbsp; recent sessions only
</footer>
</div>
</>
);
}
/** Last path segment of a cwd for a compact project label. */
function projectName(cwd: string): string {
const parts = cwd.split("/").filter(Boolean);
return parts.length ? parts[parts.length - 1] : cwd;
}

32
src/ipc.ts
View file

@ -39,33 +39,25 @@ export interface SshHost {
export const listDistros = (): Promise<string[]> => invoke("list_distros");
// ---- claude usage tracking ------------------------------------------------
// ---- claude context tracking ----------------------------------------------
/** Per-model token tally within one claude session. Mirrors Rust ModelUsage. */
export interface ModelUsage {
model: string;
inputTokens: number;
outputTokens: number;
cacheCreationTokens: number;
cacheReadTokens: number;
}
/** One claude session's usage, read from its transcript. Mirrors Rust
* SessionUsage. Cost is computed frontend-side (see src/lib/usage.ts). */
export interface SessionUsage {
/** One claude session's current context-window occupancy, read from its
* transcript. Mirrors Rust SessionContext. `contextTokens` is the prompt
* size of the last assistant turn (input + both cache buckets). */
export interface SessionContext {
sessionId: string;
cwd: string;
projectDir: string;
distro: string;
lastActiveMs: number;
models: ModelUsage[];
contextTokens: number;
model: string;
}
/** Scan ~/.claude/projects in the given WSL distros (distinct distros of
* open WSL panes) and return recent sessions' token tallies. WSL/Windows
* only — returns [] otherwise. */
export const getClaudeUsage = (distros: string[]): Promise<SessionUsage[]> =>
invoke("get_claude_usage", { distros });
/** Scan ~/.claude/projects in the given WSL distros (distinct distros of open
* WSL panes) and return each recent session's current context occupancy.
* WSL/Windows only — returns [] otherwise. */
export const getPaneContext = (distros: string[]): Promise<SessionContext[]> =>
invoke("get_pane_context", { distros });
export const spawnPane = (args: {
spec: SpawnSpec;

56
src/lib/layout/LeafPane.css
View file

@ -84,6 +84,10 @@
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
/* Give up width first when the pane is narrow, so the chips, context
indicator, and close button stay visible (overrides .pane-toolbar > *). */
flex-shrink: 1;
min-width: 0;
}
.pane-label:hover {
background: #222;
@ -242,6 +246,9 @@
.pane-status.idle { color: #d96060; }
.pane-actions {
/* Final fallback right-anchor (non-claude pane has no .pane-ctx, and at
narrow tiers .pane-status is hidden) so the close button stays pinned right. */
margin-left: auto;
display: flex;
gap: 2px;
}
@ -264,6 +271,55 @@
background: #5a1a1a;
color: #fcc;
}
/* ---- per-pane context-fill indicator ----------------------------------- */
.pane-ctx {
/* Fallback right-anchor: when .pane-status is hidden (narrow tiers) its
margin-left:auto is gone, so carry it here too. First auto in DOM order
(status → ctx → actions) consumes the free space; the rest no-op. */
margin-left: auto;
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: #9aa0a6;
}
.pane-ctx-bar {
width: 42px;
height: 6px;
background: #2a2a2a;
border-radius: 3px;
overflow: hidden;
}
.pane-ctx-fill {
display: block;
height: 100%;
border-radius: 3px;
transition: width 0.3s, background 0.3s;
}
.pane-ctx-pct {
font-variant-numeric: tabular-nums;
min-width: 26px;
text-align: right;
}
/* ---- narrow-pane reflow -------------------------------------------------
The close button + context indicator stay visible at every width; lower-
priority toolbar items drop out by tier so a 180px pane keeps its close ×. */
.leaf--narrow .pane-status,
.leaf--narrow .pane-actions .pane-btn:not(.close) {
display: none;
}
.leaf--xnarrow .pane-status,
.leaf--xnarrow .pane-actions .pane-btn:not(.close),
.leaf--xnarrow .distro-wrap,
.leaf--xnarrow .bcast-chip {
display: none;
}
/* Keep just the % (drop the bar) at the tightest width. */
.leaf--xnarrow .pane-ctx-bar {
display: none;
}
.xterm-wrap {
flex: 1 1 auto;
min-height: 0;

47
src/lib/layout/LeafPane.tsx
View file

@ -10,6 +10,12 @@ import {
import { createPortal } from "react-dom";
import { type LeafNode, resolveFontSize, type LeafShellSpec } from "./tree";
import { useOrchestration } from "./orchestration";
import {
contextLabel,
contextPercent,
contextColor,
contextFraction,
} from "../../lib/usage";
import XtermPane from "../../components/XtermPane";
import type { SpawnSpec } from "../../ipc";
import "./LeafPane.css";
@ -42,6 +48,7 @@ export default function LeafPane({ leaf }: { leaf: LeafNode }) {
const [editingLabel, setEditingLabel] = useState(false);
const [labelDraft, setLabelDraft] = useState("");
const labelInputRef = useRef<HTMLInputElement | null>(null);
const rootRef = useRef<HTMLDivElement | null>(null);
const startEditLabel = useCallback(
(e: MouseEvent) => {
@ -156,6 +163,22 @@ export default function LeafPane({ leaf }: { leaf: LeafNode }) {
return () => orch.reportLeafIdle(leaf.id, false);
}, [leaf.id, orch.reportLeafIdle]);
// ---- width tier ---------------------------------------------------------
// Drives which toolbar items collapse on a narrow pane (CSS does the hiding).
// The close button + context indicator stay visible at every tier; min pane
// width is 180px (MIN_PANE_PX), so "xnarrow" must keep those reachable.
const [widthTier, setWidthTier] = useState<"" | "narrow" | "xnarrow">("");
useEffect(() => {
const el = rootRef.current;
if (!el) return;
const ro = new ResizeObserver(() => {
const w = el.clientWidth;
setWidthTier(w < 230 ? "xnarrow" : w < 320 ? "narrow" : "");
});
ro.observe(el);
return () => ro.disconnect();
}, []);
// ---- broadcast ---------------------------------------------------------
const onTerminalInput = useCallback(
(b64: string) => {
@ -386,9 +409,13 @@ export default function LeafPane({ leaf }: { leaf: LeafNode }) {
};
})();
const ctx =
leaf.shellKind === "wsl" && leaf.cwd ? orch.paneContext.get(leaf.cwd) : undefined;
return (
<div
className={`leaf${isActive ? " active" : ""}${isBroadcasting ? " broadcasting" : ""}${isIdle ? " idle" : ""}${isDragSource ? " drag-source" : ""}${isDragTarget ? " drag-target" : ""}`}
ref={rootRef}
className={`leaf${isActive ? " active" : ""}${isBroadcasting ? " broadcasting" : ""}${isIdle ? " idle" : ""}${isDragSource ? " drag-source" : ""}${isDragTarget ? " drag-target" : ""}${widthTier ? ` leaf--${widthTier}` : ""}`}
role="group"
aria-label={`Terminal pane: ${leaf.label ?? leaf.distro ?? "unnamed"}`}
data-leaf-id={leaf.id}
@ -537,6 +564,24 @@ export default function LeafPane({ leaf }: { leaf: LeafNode }) {
<span className={`pane-status ${statusOk ? "ok" : "err"}`}>{status}</span>
)}
{ctx && (
<span
className="pane-ctx"
title={`Context: ${contextLabel(ctx)} (${ctx.model})`}
>
<span className="pane-ctx-bar">
<span
className="pane-ctx-fill"
style={{
width: `${contextPercent(ctx)}%`,
background: contextColor(contextFraction(ctx)),
}}
/>
</span>
<span className="pane-ctx-pct">{contextPercent(ctx)}%</span>
</span>
)}
<span className="pane-actions">
<button
className="pane-btn"

6
src/lib/layout/orchestration.tsx
View file

@ -1,6 +1,6 @@
import { createContext, useContext, type ReactNode } from "react";
import type { Orientation, NodeId, LeafShellSpec, Direction } from "./tree";
import type { PaneId, SshHost } from "../../ipc";
import type { PaneId, SshHost, SessionContext } from "../../ipc";
/**
* Orchestration context — every piece of shared state and every operation
@ -77,6 +77,10 @@ export interface Orchestration {
* the spawn). One-shot — App clears the entry once the pane has
* registered. */
getInitialPaneIdFor: (leafId: NodeId) => PaneId | undefined;
/** cwd -> the newest claude session's current context occupancy, for the
* per-pane context-fill indicator. A leaf looks itself up by `leaf.cwd`;
* absent for non-claude / unmatched panes. Polled by App. */
paneContext: Map<string, SessionContext>;
}
/** Discriminated intent emitted by XtermPane's key handler. App resolves

10
src/lib/shortcuts.ts
View file

@ -130,16 +130,6 @@ export const SHORTCUT_SECTIONS: ShortcutSection[] = [
},
],
},
{
title: "Panels",
items: [
{
keys: "Ctrl+Shift+U",
description:
"Open the usage panel — per-session claude token counts + estimated cost for the open WSL panes",
},
],
},
{
title: "Help",
items: [{ keys: "F1", description: "Show this help overlay" }],

112
src/lib/usage.ts
View file

@ -1,81 +1,38 @@
// Pricing + formatting helpers for the claude usage panel. Token tallies come
// from the backend (src-tauri/src/usage.rs); cost is applied here so the rate
// table is easy to edit without recompiling Rust.
// Helpers for the per-pane context-fill indicator. Context occupancy (token
// count) comes from the backend (src-tauri/src/usage.rs, get_pane_context); this
// turns it into a window %, a colour, and a human label.
import type { SessionUsage } from "../ipc";
import type { SessionContext } from "../ipc";
interface Rate {
/** USD per million tokens. */
input: number;
output: number;
cacheWrite: number;
cacheRead: number;
const WINDOW_STANDARD = 200_000;
const WINDOW_LARGE = 1_000_000;
/**
* Context-window size for a session. The transcript's model id doesn't encode
* the 200k-vs-1M variant, so we infer: a session whose prompt has already
* exceeded 200k must be running the 1M-context window. Approximate near the
* boundary, but correct for the cases that matter (a small session reads
* against 200k; a large one against 1M).
*/
export function contextWindow(contextTokens: number): number {
return contextTokens > WINDOW_STANDARD ? WINDOW_LARGE : WINDOW_STANDARD;
}
// Published Anthropic API rates, USD per million tokens, as of 2026-05.
// UPDATE if pricing changes. Matched against the model id by substring.
// cacheWrite uses the 5-minute-TTL rate (1.25× input); 1-hour cache writes
// (2× input) are billed slightly higher than this estimate shows.
const RATES: { match: string; rate: Rate }[] = [
{ match: "opus", rate: { input: 15, output: 75, cacheWrite: 18.75, cacheRead: 1.5 } },
{ match: "sonnet", rate: { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.3 } },
{ match: "haiku", rate: { input: 1, output: 5, cacheWrite: 1.25, cacheRead: 0.1 } },
];
// Unknown model → assume sonnet-tier rates (a middle-ground estimate).
const FALLBACK_RATE = RATES[1].rate;
function rateFor(model: string): Rate {
const m = model.toLowerCase();
return RATES.find((r) => m.includes(r.match))?.rate ?? FALLBACK_RATE;
/** Fraction (0..1) of the inferred window currently occupied. */
export function contextFraction(s: SessionContext): number {
const w = contextWindow(s.contextTokens);
return w > 0 ? Math.min(1, s.contextTokens / w) : 0;
}
/** Estimated USD cost for one session, summed per-model. */
export function sessionCost(s: SessionUsage): number {
let usd = 0;
for (const mu of s.models) {
const r = rateFor(mu.model);
usd +=
(mu.inputTokens * r.input +
mu.outputTokens * r.output +
mu.cacheCreationTokens * r.cacheWrite +
mu.cacheReadTokens * r.cacheRead) /
1_000_000;
}
return usd;
export function contextPercent(s: SessionContext): number {
return Math.round(contextFraction(s) * 100);
}
/** Total tokens (all kinds) for one session. */
export function sessionTokens(s: SessionUsage): number {
let t = 0;
for (const mu of s.models) {
t += mu.inputTokens + mu.outputTokens + mu.cacheCreationTokens + mu.cacheReadTokens;
}
return t;
}
/** Short family name of the model that produced the most output in a session. */
export function dominantModel(s: SessionUsage): string {
let best: SessionUsage["models"][number] | undefined;
for (const mu of s.models) {
if (!best || mu.outputTokens > best.outputTokens) best = mu;
}
return best ? shortModel(best.model) : "—";
}
export function shortModel(model: string): string {
const m = model.toLowerCase();
if (m.includes("opus")) return "opus";
if (m.includes("sonnet")) return "sonnet";
if (m.includes("haiku")) return "haiku";
return model;
}
export function totalCost(sessions: SessionUsage[]): number {
return sessions.reduce((acc, s) => acc + sessionCost(s), 0);
}
export function formatUsd(n: number): string {
return "$" + n.toFixed(2);
/** Green → amber → red ramp as the window fills. */
export function contextColor(fraction: number): string {
if (fraction >= 0.85) return "#d65a5a";
if (fraction >= 0.6) return "#d6a23a";
return "#5aa84a";
}
export function formatTokens(n: number): string {
@ -84,14 +41,9 @@ export function formatTokens(n: number): string {
return String(n);
}
/** `nowMs` is passed in so callers can avoid Date.now() churn in render. */
export function relativeTime(ms: number, nowMs: number): string {
const dt = Math.max(0, nowMs - ms);
const s = Math.floor(dt / 1000);
if (s < 60) return `${s}s ago`;
const m = Math.floor(s / 60);
if (m < 60) return `${m}m ago`;
const h = Math.floor(m / 60);
if (h < 24) return `${h}h ago`;
return `${Math.floor(h / 24)}d ago`;
/** e.g. "~274k / 1M" for a tooltip. */
export function contextLabel(s: SessionContext): string {
const w = contextWindow(s.contextTokens);
const wLabel = w >= 1_000_000 ? "1M" : "200k";
return `~${formatTokens(s.contextTokens)} / ${wLabel}`;
}