@hienlh/ppm 0.17.44 → 0.17.46

package/src/web/components/chat/session-debug-dialog.tsx

@@ -6,6 +6,19 @@ import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { Button } from "@/components/ui/button";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { copyToClipboard } from "@/lib/clipboard";
+import type { TurnUsage } from "../../../shared/turn-usage";
+import {
+  assessTurnCost,
+  fmtTokens,
+  prefixTokens,
+  uncachedPrefixTokens,
+} from "../../../shared/turn-usage";
+
+interface TurnRecord {
+  id: number;
+  recordedAt: string;
+  usage: TurnUsage;
+}
 
 interface DebugInfo {
   ppmSessionId: string;
@@ -160,6 +173,115 @@ function TranscriptImages({ sessionId, projectName }: { sessionId: string; proje
   );
 }
 
+/**
+ * Per-turn token history for the open session.
+ *
+ * Cost per turn is dominated by the replayed transcript, so a session that suddenly got
+ * expensive is diagnosed by comparing its turns against each other: the cheap ones read
+ * their prefix from cache, the expensive ones paid for it again.
+ */
+function TurnUsageHistory({ sessionId, projectName }: { sessionId: string; projectName: string }) {
+  const [turns, setTurns] = useState<TurnRecord[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    api.get<{ turns: TurnRecord[] }>(
+      `${projectUrl(projectName)}/chat/sessions/${sessionId}/usage?project=${encodeURIComponent(projectName)}`,
+    ).then((r) => { if (live) setTurns(r.turns); })
+      .catch((e: Error) => { if (live) setError(e.message); });
+    return () => { live = false; };
+  }, [sessionId, projectName]);
+
+  if (error) return <p className="text-[11px] text-error">{error}</p>;
+  if (!turns) return <p className="text-[11px] text-text-subtle">Loading token history...</p>;
+
+  if (turns.length === 0) {
+    return (
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold text-foreground">Token &amp; cache</h3>
+        <p className="text-[11px] text-text-subtle">
+          No turns recorded yet. Send a message and the token split for each turn shows up here.
+        </p>
+      </div>
+    );
+  }
+
+  const cold = turns.filter((t) => t.usage.coldStart).length;
+  const totalCost = turns.reduce((s, t) => s + t.usage.costUsd, 0);
+  const wasted = turns.reduce((s, t) => s + uncachedPrefixTokens(t.usage), 0);
+  // More than one account over these turns explains cold prefixes on its own: the cache
+  // does not follow a session across accounts.
+  const accountsUsed = new Set(turns.map((t) => t.usage.accountId).filter(Boolean)).size;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h3 className="text-xs font-semibold text-foreground">Token &amp; cache</h3>
+      <p className="text-[11px] text-text-secondary">
+        Last {turns.length} turn{turns.length === 1 ? "" : "s"} · {cold} restarted the session ·{" "}
+        {fmtTokens(wasted)} of transcript re-sent uncached · ${totalCost.toFixed(2)}
+        {accountsUsed > 1 && ` · spread over ${accountsUsed} accounts`}
+      </p>
+
+      <div className="max-h-[30vh] overflow-y-auto rounded-md border border-border">
+        <table className="w-full font-mono text-[10.5px]">
+          <thead className="sticky top-0 bg-surface text-text-subtle">
+            <tr>
+              <th className="px-2 py-1 text-left font-normal">When</th>
+              <th className="px-2 py-1 text-left font-normal">Account</th>
+              <th className="px-2 py-1 text-right font-normal">Prefix</th>
+              <th className="px-2 py-1 text-right font-normal">Cached</th>
+              <th className="px-2 py-1 text-right font-normal">Cost</th>
+              <th className="px-2 py-1 text-left font-normal">Start</th>
+            </tr>
+          </thead>
+          <tbody>
+            {turns.map((t) => {
+              const hit = Math.round(t.usage.cacheHitRate * 100);
+              const level = assessTurnCost(t.usage).level;
+              return (
+                <tr key={t.id} className="border-t border-border">
+                  <td className="px-2 py-1 text-text-subtle">
+                    {t.recordedAt.slice(11, 16) || t.recordedAt.slice(0, 10)}
+                  </td>
+                  <td
+                    className="max-w-24 truncate px-2 py-1 text-text-subtle"
+                    title={t.usage.accountLabel ?? t.usage.accountId ?? ""}
+                  >
+                    {t.usage.accountLabel ?? t.usage.accountId?.slice(0, 8) ?? "—"}
+                  </td>
+                  <td className="px-2 py-1 text-right text-text-secondary">
+                    {fmtTokens(prefixTokens(t.usage))}
+                  </td>
+                  <td
+                    className={`px-2 py-1 text-right ${
+                      level === "bad" ? "text-warning" : level === "warn" ? "text-text-primary" : "text-success"
+                    }`}
+                  >
+                    {hit}%
+                  </td>
+                  <td className="px-2 py-1 text-right text-text-secondary">
+                    ${t.usage.costUsd.toFixed(3)}
+                  </td>
+                  <td className="px-2 py-1 text-text-subtle">
+                    {t.usage.coldStart ? (t.usage.coldReason ?? "cold") : "warm"}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      <p className="text-[11px] text-text-subtle">
+        A high "Cached" share is the cheap case. A turn marked <code>idle_timeout</code> paid for the
+        whole transcript again because the session sat idle with no tab open long enough for PPM to
+        release its subprocess. The cache is scoped per account, so a turn on a different account
+        starts cold no matter how the session was resumed.
+      </p>
+    </div>
+  );
+}
+
 /** Toolbar button opening the session's debug facts and transcript maintenance. */
 export function SessionDebugButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
   const [open, setOpen] = useState(false);
@@ -208,6 +330,9 @@ export function SessionDebugButton({ sessionId, projectName }: { sessionId: stri
       <Button size="sm" onClick={copy} disabled={!info} className="w-full">
         {copied ? <><ClipboardCheck className="size-3.5" /> Copied!</> : <><Copy className="size-3.5" /> Copy</>}
       </Button>
+      <div className="border-t border-border pt-3">
+        {open && <TurnUsageHistory sessionId={sessionId} projectName={projectName} />}
+      </div>
       <div className="border-t border-border pt-3">
         {open && <TranscriptImages sessionId={sessionId} projectName={projectName} />}
       </div>

package/src/web/components/chat/turn-change-rollup.tsx

@@ -13,10 +13,9 @@ import { TurnChangePill, changeTotals } from "./turn-change-pill";
 import { TurnChangeTray } from "./turn-change-tray";
 import { TurnChangeSheet } from "./turn-change-sheet";
 
-export function TurnChangeRollup({ timestamp, content, accountLabel, changes, onJumpToEdit }: {
+export function TurnChangeRollup({ timestamp, content, changes, onJumpToEdit }: {
   timestamp: string;
   content: string;
-  accountLabel?: string;
   changes?: TurnFileChange[];
   onJumpToEdit?: (editRef: string) => void;
 }) {
@@ -35,7 +34,6 @@ export function TurnChangeRollup({ timestamp, content, accountLabel, changes, on
     <MessageActionBar
       timestamp={timestamp}
       content={content}
-      accountLabel={accountLabel}
       className="-mt-1.5"
     >
       {changes && changes.length > 0 && (

package/src/web/components/chat/turn-cost-warning.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { ChevronDown, TriangleAlert } from "lucide-react";
+import type { TurnUsage } from "../../../shared/turn-usage";
+import {
+  assessTurnCost,
+  fmtTokens,
+  prefixCostMultiplier,
+  prefixTokens,
+} from "../../../shared/turn-usage";
+
+/**
+ * Why a turn cost more than the one before it.
+ *
+ * A session's transcript is replayed to the API every turn, so the bill tracks the cache
+ * hit rate on that prefix rather than anything visible in the conversation. When the prefix
+ * stops being cached the same message can cost several times more, which is invisible
+ * without saying so — hence a notice attached to the turn that paid for it.
+ *
+ * Only renders for turns worth acting on; a cheap or well-cached turn shows nothing.
+ */
+export function TurnCostWarning({ usage }: { usage: TurnUsage }) {
+  const [open, setOpen] = useState(false);
+  const verdict = assessTurnCost(usage);
+  if (verdict.level === "ok") return null;
+
+  const multiplier = prefixCostMultiplier(usage);
+  const prefix = prefixTokens(usage);
+  const hitPct = Math.round(usage.cacheHitRate * 100);
+  const isBad = verdict.level === "bad";
+
+  return (
+    <div
+      className={`rounded-md border px-2.5 py-2 text-[11px] ${
+        isBad ? "border-warning/40 bg-warning/10" : "border-border bg-surface"
+      }`}
+    >
+      <button
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="flex w-full items-start gap-2 py-1 text-left text-text-secondary transition-colors hover:text-text-primary"
+      >
+        <TriangleAlert
+          className={`mt-px size-3.5 shrink-0 ${isBad ? "text-warning" : "text-text-subtle"}`}
+        />
+        <span className="flex-1">
+          Costly turn — {hitPct}% of a {fmtTokens(prefix)}-token transcript came from cache,
+          so it cost about{" "}
+          <strong className="font-semibold">{multiplier.toFixed(1)}x</strong> a fully cached
+          turn.
+        </span>
+        <ChevronDown
+          className={`mt-px size-3.5 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {open && (
+        <div className="mt-2 flex flex-col gap-2 border-t border-border pt-2">
+          {verdict.reason && <p className="text-text-secondary">{verdict.reason}</p>}
+          <dl className="grid grid-cols-2 gap-x-3 gap-y-1 font-mono text-[10.5px] text-text-subtle">
+            <Row label="From cache" value={`${fmtTokens(usage.cacheReadTokens)} (${hitPct}%)`} />
+            <Row label="Written to cache" value={fmtTokens(usage.cacheWriteTokens)} />
+            <Row label="Fresh input" value={fmtTokens(usage.inputTokens)} />
+            <Row label="Output" value={fmtTokens(usage.outputTokens)} />
+            <Row label="Model" value={usage.model || "unknown"} />
+            <Row label="Cost" value={`$${usage.costUsd.toFixed(4)}`} />
+          </dl>
+          <p className="text-text-subtle">
+            A turn stays cached while the session keeps running. Closing the last tab of an idle
+            session, switching model, or a retry all restart it, and the next turn re-sends the
+            transcript at full price.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <>
+      <dt className="truncate">{label}</dt>
+      <dd className="truncate text-right text-text-secondary">{value}</dd>
+    </>
+  );
+}

package/src/web/hooks/use-chat.ts

@@ -554,6 +554,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         const finalEvents = [...streamingEventsRef.current];
         const finalAccount = streamingAccountRef.current;
         const doneUuid = ev.lastMessageUuid as string | undefined;
+        const doneUsage = ev.usage;
         setMessages((prev) => {
           const last = prev[prev.length - 1];
           if (last?.role === "assistant") {
@@ -563,6 +564,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
               content: finalContent || last.content,
               events: finalEvents.length > 0 ? finalEvents : last.events,
               ...(doneUuid && { sdkUuid: doneUuid }),
+              ...(doneUsage && { usage: doneUsage }),
             }];
           }
           // No assistant message flushed yet (rAF was still pending when cancelled).
@@ -575,6 +577,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
               events: finalEvents,
               timestamp: new Date().toISOString(),
               ...(doneUuid && { sdkUuid: doneUuid }),
+              ...(doneUsage && { usage: doneUsage }),
               ...finalAccount,
             }];
           }

package/src/web/hooks/use-usage.ts

@@ -12,7 +12,11 @@ interface UseUsageReturn {
   refreshUsage: () => void;
 }
 
-export function useUsage(projectName: string, providerId = "claude"): UseUsageReturn {
+/**
+ * `sessionId` scopes the reported account to this session's binding. Without it the header
+ * shows whichever account ran last across every open session, which is wrong for all but one.
+ */
+export function useUsage(projectName: string, providerId = "claude", sessionId?: string): UseUsageReturn {
   const [usageInfo, setUsageInfo] = useState<UsageInfo>({});
   const [usageLoading, setUsageLoading] = useState(false);
   const [lastFetchedAt, setLastFetchedAt] = useState<string | null>(null);
@@ -22,11 +26,12 @@ export function useUsage(projectName: string, providerId = "claude"): UseUsageRe
     if (!projectName) return;
     setUsageLoading(true);
     const qs = forceRefresh ? "&refresh=1" : "";
+    const sessionQs = sessionId ? `&session=${encodeURIComponent(sessionId)}` : "";
     // Via api.get, not raw fetch: the toolbar's loading state is gated on this
     // settling, and a raw fetch has no timeout to stop it stalling forever.
     api
       .get<(UsageInfo & { lastFetchedAt?: string }) | null>(
-        `${projectUrl(projectName)}/chat/usage?providerId=${providerId}${qs}`,
+        `${projectUrl(projectName)}/chat/usage?providerId=${providerId}${sessionQs}${qs}`,
       )
       .then((data) => {
         if (!data) return;
@@ -35,7 +40,7 @@ export function useUsage(projectName: string, providerId = "claude"): UseUsageRe
       })
       .catch(() => {})
       .finally(() => setUsageLoading(false));
-  }, [projectName, providerId]);
+  }, [projectName, providerId, sessionId]);
 
   // Read cache on mount + auto-read every POLL_INTERVAL
   useEffect(() => {