@hienlh/ppm 0.17.44 → 0.17.45

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,103 @@ 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);
+
+  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)}
+      </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-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="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>tab_closed</code> paid for the
+        whole transcript again because PPM shut the session's subprocess down when the last tab
+        disconnected.
+      </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 +318,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-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,
             }];
           }