fix: use synchronous MockProviderProvider in stories to avoid race conditions

packages/kilo-vscode/webview-ui/src/context/provider.tsx

@@ -22,7 +22,7 @@ interface ProviderContextValue {
 
 const KILO_AUTO: ModelSelection = { providerID: "kilo", modelID: "kilo/auto" }
 
-const ProviderContext = createContext<ProviderContextValue>()
+export const ProviderContext = createContext<ProviderContextValue>()
 
 export const ProviderProvider: ParentComponent = (props) => {
   const vscode = useVSCode()

packages/kilo-vscode/webview-ui/src/stories/StoryProviders.tsx

@@ -9,10 +9,11 @@
  * thing so components that call useVSCode()/useServer()/useProvider() don't throw.
  */
 
-import { createSignal, onMount, type ParentComponent } from "solid-js"
+import { createSignal, type ParentComponent } from "solid-js"
 import { VSCodeProvider } from "../context/vscode"
 import { ServerProvider } from "../context/server"
-import { ProviderProvider } from "../context/provider"
+import { ProviderContext } from "../context/provider"
+import { flattenModels, findModel as _findModel } from "../context/provider-utils"
 import { ConfigProvider } from "../context/config"
 import { DataProvider } from "@kilocode/kilo-ui/context/data"
 import { DiffComponentProvider } from "@kilocode/kilo-ui/context/diff"
@@ -40,6 +41,44 @@ function t(key: string) {
 // Default mock data (empty session)
 // ---------------------------------------------------------------------------
 
+// ---------------------------------------------------------------------------
+// Mock providers — pre-loaded Kilo Gateway model for stories
+// ---------------------------------------------------------------------------
+
+const MOCK_PROVIDERS = {
+  kilo: {
+    id: "kilo",
+    name: "Kilo",
+    env: [] as string[],
+    models: {
+      "anthropic/claude-sonnet-4-6": {
+        id: "anthropic/claude-sonnet-4-6",
+        name: "Anthropic: Claude Sonnet 4.6",
+        inputPrice: 0.003,
+        outputPrice: 0.015,
+      },
+    },
+  },
+}
+
+const MOCK_MODELS = flattenModels(MOCK_PROVIDERS as any)
+
+/** A synchronous mock ProviderContext — provides models without waiting for a postMessage round-trip. */
+const MockProviderProvider: ParentComponent = (props) => {
+  const value = {
+    providers: () => MOCK_PROVIDERS as any,
+    connected: () => ["kilo"],
+    defaults: () => ({}),
+    defaultSelection: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }),
+    models: () => MOCK_MODELS,
+    findModel: (sel: any) => _findModel(MOCK_MODELS, sel),
+  }
+  return <ProviderContext.Provider value={value}>{props.children}</ProviderContext.Provider>
+}
+
+/** @deprecated use MockProviderProvider; kept for callers that still call dispatchMockProviders */
+export function dispatchMockProviders() {}
+
 export const defaultMockData = {
   session: [],
   session_status: {},
@@ -122,7 +161,7 @@ export function mockSessionValue(overrides?: {
     permissions: () => permissions,
     questions: () => qs,
     questionErrors: () => new Set<string>(),
-    selected: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-5" }),
+    selected: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }),
     selectModel: noop,
     totalCost: () => 0,
     contextUsage: () => undefined,
@@ -130,7 +169,7 @@ export function mockSessionValue(overrides?: {
     selectedAgent: () => "code",
     selectAgent: noop,
     getSessionAgent: () => "code",
-    getSessionModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-5" }),
+    getSessionModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }),
     setSessionModel: noop,
     setSessionAgent: noop,
     variantList: () => [],
@@ -178,13 +217,11 @@ export const StoryProviders: ParentComponent<StoryProvidersProps> = (props) => {
   })
   const [locale] = createSignal<"en">("en")
 
-  onMount(() => dispatchMockProviders())
-
   return (
     <VSCodeProvider>
       <ServerProvider>
         <ConfigProvider>
-          <ProviderProvider>
+          <MockProviderProvider>
             <DialogProvider>
               <LanguageContext.Provider
                 value={{
@@ -209,7 +246,7 @@ export const StoryProviders: ParentComponent<StoryProvidersProps> = (props) => {
                 </I18nProvider>
               </LanguageContext.Provider>
             </DialogProvider>
-          </ProviderProvider>
+          </MockProviderProvider>
         </ConfigProvider>
       </ServerProvider>
     </VSCodeProvider>

packages/kilo-vscode/webview-ui/src/stories/history.stories.tsx

@@ -64,7 +64,7 @@ const WithSessions: ParentComponent<{ sessions?: typeof mockSessions }> = (props
     permissions: () => [],
     questions: () => [],
     questionErrors: () => new Set<string>(),
-    selected: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-5" }),
+    selected: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }),
     selectModel: noop,
     totalCost: () => 0,
     contextUsage: () => undefined,
@@ -72,7 +72,7 @@ const WithSessions: ParentComponent<{ sessions?: typeof mockSessions }> = (props
     selectedAgent: () => "code",
     selectAgent: noop,
     getSessionAgent: () => "code",
-    getSessionModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-5" }),
+    getSessionModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }),
     setSessionModel: noop,
     setSessionAgent: noop,
     variantList: () => [],