🤖 fix: initialize ORPCProvider in connected state when client prop provided

Fixes Storybook tests failing in CI. When a client prop is passed to
ORPCProvider, the component now starts in "connected" state immediately
instead of waiting for useEffect. This prevents a flash of null content
that caused tests to see an empty storybook-root div.

Change-Id: I048104e7f2fe434efcf9b50db0bae445d912b014
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/orpc/react.tsx

@@ -70,7 +70,16 @@ function createBrowserClient(authToken: string | null): {
 }
 
 export const ORPCProvider = (props: ORPCProviderProps) => {
-  const [state, setState] = useState<ConnectionState>({ status: "connecting" });
+  // If client is provided externally, start in connected state immediately
+  // This avoids a flash of null content on first render
+  const [state, setState] = useState<ConnectionState>(() => {
+    if (props.client) {
+      // Also set the global client reference immediately
+      window.__ORPC_CLIENT__ = props.client;
+      return { status: "connected", client: props.client, cleanup: () => undefined };
+    }
+    return { status: "connecting" };
+  });
   const [authToken, setAuthToken] = useState<string | null>(() => {
     // Check URL param first, then localStorage
     const urlParams = new URLSearchParams(window.location.search);

src/common/orpc/schemas.ts

@@ -469,6 +469,20 @@ export const ReasoningEndEventSchema = z.object({
   messageId: z.string(),
 });
 
+// Usage schema matching LanguageModelV2Usage from @ai-sdk/provider
+export const LanguageModelUsageSchema = z.object({
+  inputTokens: z.number().optional(),
+  outputTokens: z.number().optional(),
+  totalTokens: z.number().optional(),
+});
+
+export const UsageDeltaEventSchema = z.object({
+  type: z.literal("usage-delta"),
+  workspaceId: z.string(),
+  messageId: z.string(),
+  usage: LanguageModelUsageSchema,
+});
+
 export const WorkspaceInitEventSchema = z.discriminatedUnion("type", [
   z.object({
     type: z.literal("init-start"),
@@ -518,6 +532,7 @@ export const WorkspaceChatMessageSchema = z.union([
     ToolCallEndEventSchema,
     ReasoningDeltaEventSchema,
     ReasoningEndEventSchema,
+    UsageDeltaEventSchema,
     // Flatten WorkspaceInitEventSchema members into this union if possible,
     // or just include it as a union member. Zod discriminated union is strict.
     // WorkspaceInitEventSchema is already a discriminated union.

src/common/orpc/types.ts

@@ -12,6 +12,7 @@ import type {
   ToolCallEndEvent,
   ReasoningDeltaEvent,
   ReasoningEndEvent,
+  UsageDeltaEvent,
 } from "@/common/types/stream";
 
 export type BranchListResult = z.infer<typeof schemas.BranchListResultSchema>;
@@ -76,6 +77,10 @@ export function isReasoningEnd(msg: WorkspaceChatMessage): msg is ReasoningEndEv
   return (msg as { type?: string }).type === "reasoning-end";
 }
 
+export function isUsageDelta(msg: WorkspaceChatMessage): msg is UsageDeltaEvent {
+  return (msg as { type?: string }).type === "usage-delta";
+}
+
 export function isMuxMessage(msg: WorkspaceChatMessage): msg is MuxMessage {
   return "role" in msg && !("type" in (msg as { type?: string }));
 }

tests/integration/usageDelta.test.ts

@@ -5,6 +5,7 @@ import {
   modelString,
   assertStreamSuccess,
 } from "./helpers";
+import { isUsageDelta } from "../../src/common/orpc/types";
 import { KNOWN_MODELS } from "../../src/common/constants/knownModels";
 
 // Skip all tests if TEST_INTEGRATION is not set
@@ -45,16 +46,15 @@ describeIntegration("usage-delta events", () => {
 
         // Verify usage-delta events were emitted
         const allEvents = collector.getEvents();
-        const usageDeltas = allEvents.filter(
-          (e) => "type" in e && e.type === "usage-delta"
-        ) as Array<{ type: "usage-delta"; usage: { inputTokens: number; outputTokens: number } }>;
+        const usageDeltas = allEvents.filter(isUsageDelta);
 
         // Multi-step stream should emit at least one usage-delta (on finish-step)
         expect(usageDeltas.length).toBeGreaterThan(0);
 
         // Each usage-delta should have valid usage data
         for (const delta of usageDeltas) {
           expect(delta.usage).toBeDefined();
+          // inputTokens should be present and > 0 (full context)
           expect(delta.usage.inputTokens).toBeGreaterThan(0);
           // outputTokens may be 0 for some steps, but should be defined
           expect(typeof delta.usage.outputTokens).toBe("number");