Merge pull request #91 from pylon-code/feat/composer-usage-prime

feat(web): composer capacity follows the composer's account, including on Prime

Author: rynfar

apps/web/src/components/BranchToolbar.tsx

@@ -1,5 +1,5 @@
 import { scopeProjectRef, scopeThreadRef } from "@t3tools/client-runtime/environment";
-import type { EnvironmentId, ServerProvider, ThreadId } from "@t3tools/contracts";
+import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
 import {
   ChevronDownIcon,
   CloudIcon,
@@ -15,7 +15,7 @@ import { useComposerDraftStore, type DraftId } from "../composerDraftStore";
 import { useProject, useThread, useThreadShellsForProjectRefs } from "../state/entities";
 import { useIsMobile } from "../hooks/useMediaQuery";
 import { ComposerUsageIndicator } from "./ComposerUsageIndicator";
-import type { ProviderUsageAccount } from "./providerUsage/ProviderUsageAccounts";
+import type { ComposerUsage } from "../providerUsageAccounts";
 import type { TimestampFormat } from "@t3tools/contracts/settings";
 import {
   type EnvMode,
@@ -60,10 +60,10 @@ interface BranchToolbarProps {
   onComposerFocusRequest?: () => void;
   availableEnvironments?: readonly EnvironmentOption[];
   onEnvironmentChange?: (environmentId: EnvironmentId) => void;
-  /** Snapshot for the account this thread runs on; drives the usage readout. */
-  providerStatus?: ServerProvider | null;
-  /** All accounts for the thread's driver, for the capacity popover. */
-  providerUsageAccounts?: readonly ProviderUsageAccount[] | undefined;
+  /** Capacity for the account the composer will send to, and its siblings. */
+  composerUsage: ComposerUsage;
+  /** How old a capacity reading may get before the readout dims. */
+  usageStaleAfterMs: number;
   timestampFormat: TimestampFormat;
 }
 
@@ -397,8 +397,8 @@ export const BranchToolbar = memo(function BranchToolbar({
   onComposerFocusRequest,
   availableEnvironments,
   onEnvironmentChange,
-  providerStatus,
-  providerUsageAccounts,
+  composerUsage,
+  usageStaleAfterMs,
   timestampFormat,
 }: BranchToolbarProps) {
   const threadRef = useMemo(
@@ -561,8 +561,9 @@ export const BranchToolbar = memo(function BranchToolbar({
 
       <ComposerUsageIndicator
         className="ml-auto"
-        provider={providerStatus}
-        usageAccounts={providerUsageAccounts}
+        environmentId={environmentId}
+        usage={composerUsage}
+        staleAfterMs={usageStaleAfterMs}
         timestampFormat={timestampFormat}
       />
     </div>

apps/web/src/components/ChatView.tsx

@@ -91,6 +91,7 @@ import {
   type AtomCommandResult,
 } from "@t3tools/client-runtime/state/runtime";
 import * as Cause from "effect/Cause";
+import * as Duration from "effect/Duration";
 import * as Schema from "effect/Schema";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { isElectron } from "../env";
@@ -218,15 +219,19 @@ import {
   applyProviderInstanceSettings,
   deriveProviderInstanceEntries,
   NO_PROVIDER_MODEL_SELECTION,
+  sortProviderInstanceEntries,
 } from "../providerInstances";
+import { resolveComposerInstanceSelection } from "../composerInstanceSelection";
 import {
   buildThreadHandoffSeed,
   getThreadContinuationLinks,
   getThreadHandoffOffer,
   summarizeHandoffDiff,
 } from "./chat/ThreadHandoff.logic";
 import { ThreadContinuationBanner } from "./chat/ThreadContinuationBanner";
-import { deriveProviderUsageAccounts } from "../providerUsageAccounts";
+import { deriveComposerUsage } from "../providerUsageAccounts";
+import { usageStaleAfterMs } from "./providerUsage/ProviderUsageMatrix.logic";
+import { resolveServerBackgroundActivitySettings } from "@t3tools/shared/backgroundActivitySettings";
 import { useCheckpointDiff } from "../lib/checkpointDiffState";
 import {
   useClientSettings,
@@ -260,6 +265,7 @@ import {
   finalizePromotedDraftThreadByRef,
   markPromotedDraftThreadByRef,
   useComposerDraftStore,
+  useEffectiveComposerModelState,
   type DraftId,
 } from "../composerDraftStore";
 import {
@@ -4790,24 +4796,70 @@ function ChatViewContent(props: ChatViewProps) {
     [threadHandoffDiff.data?.diff],
   );
   const [isContinuingThreadOnAccount, setIsContinuingThreadOnAccount] = useState(false);
-  // Capacity for every account of this thread's driver, for the composer
-  // strip's popover. Deciding where the next thread goes needs the comparison,
-  // not just the account in front of you.
-  const activeProviderUsageAccounts = useMemo(
+  // Capacity for the account the composer will actually send to, resolved the
+  // same way the composer resolves it — picker choice, session binding, drain
+  // routing and all — so the strip never names one account while the send
+  // goes to another. For a Prime Agent thread the selected model decides
+  // whose capacity applies.
+  const composerInstanceEntries = useMemo(
+    () => sortProviderInstanceEntries(threadHandoffEntries),
+    [threadHandoffEntries],
+  );
+  const composerInstanceSelection = useMemo(
     () =>
-      deriveProviderUsageAccounts({
-        providerStatuses,
-        activeInstanceId:
-          activeThread?.session?.providerInstanceId ?? activeThread?.modelSelection?.instanceId,
-        enabled: settings.showProviderUsageInContextPopover,
+      resolveComposerInstanceSelection({
+        entries: composerInstanceEntries,
+        draftActiveProvider: composerActiveProvider,
+        sessionInstanceId: activeThread?.session?.providerInstanceId,
+        threadInstanceId: activeThread?.modelSelection?.instanceId,
+        projectInstanceId: activeProject?.defaultModelSelection?.instanceId,
+        lockedProvider,
+        nowMs: Date.now(),
       }),
     [
+      activeProject?.defaultModelSelection?.instanceId,
       activeThread?.modelSelection?.instanceId,
       activeThread?.session?.providerInstanceId,
+      composerActiveProvider,
+      composerInstanceEntries,
+      lockedProvider,
+    ],
+  );
+  const { selectedModel: composerSelectedModel } = useEffectiveComposerModelState({
+    threadRef: composerDraftTarget,
+    providers: providerStatuses,
+    selectedProvider: composerInstanceSelection.driverKind,
+    selectedInstanceId: composerInstanceSelection.instanceId,
+    threadModelSelection: activeThread?.modelSelection,
+    projectModelSelection: activeProject?.defaultModelSelection,
+    settings,
+  });
+  const composerUsage = useMemo(
+    () =>
+      deriveComposerUsage({
+        providerStatuses,
+        selectedInstanceId: composerInstanceSelection.instanceId,
+        selectedModel: composerSelectedModel,
+        enabled: settings.showProviderUsageInContextPopover,
+      }),
+    [
+      composerInstanceSelection.instanceId,
+      composerSelectedModel,
       providerStatuses,
       settings.showProviderUsageInContextPopover,
     ],
   );
+  // The strip dims a reading the server should already have replaced, so the
+  // bound follows the server's own poll rather than a fixed number.
+  const composerUsageStaleAfterMs = useMemo(
+    () =>
+      usageStaleAfterMs(
+        Duration.toMillis(
+          resolveServerBackgroundActivitySettings(settings).providerHealthRefreshInterval,
+        ),
+      ),
+    [settings],
+  );
   // Both ends of the seam, read from shells the client already holds. Keyed on
   // the two ids rather than the thread object so a streaming turn does not
   // rescan every shell on each token.
@@ -8162,8 +8214,8 @@ function ChatViewContent(props: ChatViewProps) {
                                   ? { onCheckoutPullRequestRequest: openPullRequestDialog }
                                   : {})}
                                 {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
-                                providerStatus={activeProviderStatus}
-                                providerUsageAccounts={activeProviderUsageAccounts}
+                                composerUsage={composerUsage}
+                                usageStaleAfterMs={composerUsageStaleAfterMs}
                                 timestampFormat={settings.timestampFormat}
                                 availableEnvironments={logicalProjectEnvironments}
                               />

apps/web/src/components/ComposerUsageIndicator.logic.test.ts

@@ -1,41 +1,25 @@
-import {
-  ProviderDriverKind,
-  ProviderInstanceId,
-  type ServerProvider,
-  type ServerProviderUsageWindow,
-} from "@t3tools/contracts";
+import { ProviderInstanceId, type ServerProviderUsageWindow } from "@t3tools/contracts";
 import { describe, expect, it } from "vite-plus/test";
 
 import { formatTimeUntilReset, getComposerUsageView } from "./ComposerUsageIndicator.logic";
+import type { ProviderUsageAccount } from "./providerUsage/ProviderUsageAccounts";
 
-function provider(input: {
-  windows?: ReadonlyArray<ServerProviderUsageWindow>;
+function account(input: {
+  windows: ReadonlyArray<ServerProviderUsageWindow>;
   displayName?: string;
   accentColor?: string;
-}): ServerProvider {
+  checkedAt?: string;
+}): ProviderUsageAccount {
   return {
     instanceId: ProviderInstanceId.make("claudeAgent"),
-    driver: ProviderDriverKind.make("claudeAgent"),
-    ...(input.displayName ? { displayName: input.displayName } : {}),
+    displayName: input.displayName ?? "Claude",
     ...(input.accentColor ? { accentColor: input.accentColor } : {}),
-    ...(input.windows
-      ? {
-          usageLimits: {
-            source: "claudeOAuth",
-            checkedAt: "2026-08-04T21:00:00.000Z",
-            windows: input.windows,
-          },
-        }
-      : {}),
-    enabled: true,
-    installed: true,
-    version: null,
-    status: "ready" as const,
-    auth: { status: "authenticated" as const },
-    checkedAt: "2026-08-04T21:00:00.000Z",
-    models: [],
-    slashCommands: [],
-    skills: [],
+    usageLimits: {
+      source: "claudeOAuth",
+      checkedAt: input.checkedAt ?? "2026-08-06T11:59:00.000Z",
+      windows: input.windows,
+    },
+    isActive: true,
   };
 }
 
@@ -66,7 +50,7 @@ const NOW = Date.parse("2026-08-06T12:00:00.000Z");
 
 describe("getComposerUsageView", () => {
   it("shows the session and account-wide weekly only", () => {
-    const view = getComposerUsageView(provider({ windows: CLAUDE_WINDOWS }), NOW);
+    const view = getComposerUsageView(account({ windows: CLAUDE_WINDOWS }), NOW);
 
     expect(view?.entries).toEqual([
       {
@@ -88,15 +72,15 @@ describe("getComposerUsageView", () => {
 
   // The strip is a glance; the popover carries the model-scoped weeklies.
   it("leaves model-scoped weeklies out", () => {
-    const view = getComposerUsageView(provider({ windows: CLAUDE_WINDOWS }), NOW);
+    const view = getComposerUsageView(account({ windows: CLAUDE_WINDOWS }), NOW);
 
     expect(view?.entries.some((entry) => entry.detail === "Weekly (Fable)")).toBe(false);
   });
 
   // Windows are matched on duration, so Codex's differently-named ones work.
   it("reads Codex's window labels", () => {
     const view = getComposerUsageView(
-      provider({
+      account({
         windows: [
           { label: "Session", usedPercent: 25, windowDurationMins: 300 },
           { label: "Weekly", usedPercent: 82, windowDurationMins: 10_080 },
@@ -114,7 +98,7 @@ describe("getComposerUsageView", () => {
 
   it("rounds a fractional percentage", () => {
     const view = getComposerUsageView(
-      provider({ windows: [{ label: "Session", usedPercent: 14.6, windowDurationMins: 300 }] }),
+      account({ windows: [{ label: "Session", usedPercent: 14.6, windowDurationMins: 300 }] }),
       NOW,
     );
 
@@ -123,7 +107,7 @@ describe("getComposerUsageView", () => {
 
   it("carries the account name and accent for the tooltip and dot", () => {
     const view = getComposerUsageView(
-      provider({ windows: CLAUDE_WINDOWS, displayName: "Claude Work", accentColor: "#0088ff" }),
+      account({ windows: CLAUDE_WINDOWS, displayName: "Claude Work", accentColor: "#0088ff" }),
       NOW,
     );
 
@@ -133,22 +117,41 @@ describe("getComposerUsageView", () => {
 
   it("renders one entry when only a session window is reported", () => {
     const view = getComposerUsageView(
-      provider({ windows: [{ label: "Session", usedPercent: 5, windowDurationMins: 300 }] }),
+      account({ windows: [{ label: "Session", usedPercent: 5, windowDurationMins: 300 }] }),
       NOW,
     );
 
     expect(view?.entries).toHaveLength(1);
     expect(view?.entries[0]?.label).toBe("5h");
   });
 
+  // Dimming is the strip's whole way of admitting a number has fallen behind
+  // the server's own poll, so the bound must track that poll.
+  it("marks a reading stale only past the caller's bound", () => {
+    const aged = account({ windows: CLAUDE_WINDOWS, checkedAt: "2026-08-06T11:54:00.000Z" });
+
+    expect(getComposerUsageView(aged, NOW, 5 * 60_000)?.stale).toBe(true);
+    expect(getComposerUsageView(aged, NOW, 10 * 60_000)?.stale).toBe(false);
+    expect(getComposerUsageView(aged, NOW)?.age).toBe("6m");
+  });
+
+  it("has no age for a reading under a minute old", () => {
+    const view = getComposerUsageView(
+      account({ windows: CLAUDE_WINDOWS, checkedAt: "2026-08-06T11:59:30.000Z" }),
+      NOW,
+    );
+
+    expect(view?.age).toBeUndefined();
+    expect(view?.stale).toBe(false);
+  });
+
   // Nothing to say beats a placeholder in a strip this dense.
   it.each([
-    ["no provider", null],
-    ["a provider with no usage", provider({})],
-    ["a provider reporting zero windows", provider({ windows: [] })],
+    ["no account", null],
+    ["an account reporting zero windows", account({ windows: [] })],
     [
       "windows with no duration to classify",
-      provider({ windows: [{ label: "Mystery", usedPercent: 10 }] }),
+      account({ windows: [{ label: "Mystery", usedPercent: 10 }] }),
     ],
   ])("returns null for %s", (_label, input) => {
     expect(getComposerUsageView(input, NOW)).toBeNull();