Quiet transient RPC errors and surface chat-send hiccups inline

Transient failures (DO reset, connection loss) were logged as scary
console errors with dead-end toasts at every load site. Route them
through logRpcFailure — debug-level for transient, loud otherwise —
and skip the toasts, since a reconnect or retry is expected to cure
them. Failed chat sends now show an inline composer hint instead of
a toast; the wording is hedged because a reset after commit means the
message may have landed. DO resets on the send path report through
reportDoResetError for telemetry.

Author: ndisidore

packages/workshop-frontend/src/BlueprintLandingPage.tsx

@@ -1,4 +1,4 @@
-import { withDoResetRetry } from './rpcErrors'
+import { logRpcFailure, withDoResetRetry } from './rpcErrors'
 import { useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from 'react'
 import { useNavigate, useParams, useRouter } from '@tanstack/react-router'
 import { RpcStub, RpcTarget } from 'capnweb'
@@ -121,7 +121,9 @@ export default function BlueprintLandingPage({ rpcStub }: Props) {
   // When authenticated, fetch models for binding assignment.
   useEffect(() => {
     if (isAuthenticated && authenticatedApi) {
-      authenticatedApi.listModels().then(setModels).catch(console.error)
+      withDoResetRetry(() => authenticatedApi.listModels())
+        .then(setModels)
+        .catch(err => logRpcFailure('Failed to load models:', err))
     } else {
       setModels([])
     }
@@ -191,7 +193,7 @@ export default function BlueprintLandingPage({ rpcStub }: Props) {
         }
       })
       .catch(err => {
-        console.error('Failed to subscribe to connected accounts:', err)
+        logRpcFailure('Failed to subscribe to connected accounts:', err)
       })
 
     return () => {

packages/workshop-frontend/src/ChatInterface.tsx

@@ -1,3 +1,4 @@
+import { isDurableObjectResetError, isTransientRpcError, logRpcFailure, reportDoResetError } from "./rpcErrors";
 import {
   Fragment,
   memo,
@@ -1780,6 +1781,7 @@ export const ChatInput = ({
   attachLabel,
   draftUpdateBanner,
   blockedReason,
+  chatKey,
   onStop,
   showThinkingTraces = true,
   onToggleThinkingTraces,
@@ -1825,6 +1827,8 @@ export const ChatInput = ({
   /** When set, the composer is disabled and shows this message — the user must resolve something
    * (e.g. accept/deny a pending connection request) before they can type or send. */
   blockedReason?: string;
+  /** Identity of the chat the composer is bound to; a change clears chat-scoped hints. */
+  chatKey?: number | null;
   onStop?: () => void;
   showThinkingTraces?: boolean;
   onToggleThinkingTraces?: () => void;
@@ -1838,6 +1842,9 @@ export const ChatInput = ({
   const [capsules, setCapsules] = useState<InputCapsule[]>([]);
   const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
   const [isSending, setIsSending] = useState(false);
+  const [sendHiccup, setSendHiccup] = useState(false);
+
+  useEffect(() => setSendHiccup(false), [chatKey]);
   const [isAttachmentDragActive, setIsAttachmentDragActive] = useState(false);
   const [selectedSlashCommand, setSelectedSlashCommand] = useState<SelectedSlashCommand | null>(null);
   // The caret the slash command picker parses at. Deliberately updated only when it moves to a
@@ -2276,6 +2283,7 @@ export const ChatInput = ({
 
   const handleSend = async () => {
     if (sendInFlightRef.current || isSending || isBlocked) return;
+    setSendHiccup(false);
     const attachmentsSnapshot = pendingAttachments;
     const readyAttachments = attachmentsSnapshot
       .filter((attachment) => attachment.uploadState === "ready" && attachment.ref)
@@ -2455,7 +2463,8 @@ export const ChatInput = ({
 
   const submitMessage = () => {
     void handleSend().catch((err) => {
-      console.error("Failed to send chat message:", err);
+      // The onSend handlers already log; the composer only needs the hint state.
+      if (isTransientRpcError(err)) setSendHiccup(true);
     });
   };
 
@@ -3050,6 +3059,11 @@ export const ChatInput = ({
           </div>
         )}
         {draftUpdateBanner}
+        {sendHiccup && (
+          <div className="px-4 pt-2 text-xs text-kumo-warning">
+            Connection hiccup — your message may not have been sent. Check the thread, then try again.
+          </div>
+        )}
         {/* Textarea */}
         <div className="relative px-4 pb-1 pt-3">
           {slashCommandPicker.popup}
@@ -5213,9 +5227,10 @@ function ChatInterface({
           forceUpdate();
         }
       } catch (err) {
-        console.error("Failed to subscribe to chats:", err);
-        reportIssue('chat.subscription-load', err)
-        toasts.add({ title: "Unable to load conversations", variant: "error" });
+        if (!logRpcFailure("Failed to subscribe to chats:", err)) {
+          reportIssue('chat.subscription-load', err)
+          toasts.add({ title: "Unable to load conversations", variant: "error" });
+        }
       }
     };
 
@@ -5366,8 +5381,10 @@ function ChatInterface({
         );
       }
     } catch (err) {
-      console.error("Failed to send message:", err);
-      toasts.add({ title: "Failed to send message", variant: "error" });
+      if (isDurableObjectResetError(err)) reportDoResetError("chat.send", err);
+      if (!logRpcFailure("Failed to send message:", err)) {
+        toasts.add({ title: "Failed to send message", variant: "error" });
+      }
       throw err;
     }
   };
@@ -5388,8 +5405,10 @@ function ChatInterface({
           message, model, capsules, attachments, formats);
       onNavigateToChatRef.current(newChatId);
     } catch (err) {
-      console.error("Failed to create new chat:", err);
-      toasts.add({ title: "Failed to start conversation", variant: "error" });
+      if (isDurableObjectResetError(err)) reportDoResetError("chat.new", err);
+      if (!logRpcFailure("Failed to create new chat:", err)) {
+        toasts.add({ title: "Failed to start conversation", variant: "error" });
+      }
       throw err;
     }
   };
@@ -7576,6 +7595,7 @@ function ChatInterface({
               <div className={`flex-shrink-0 bg-kumo-base ${sidebarMode ? "" : "border-t border-kumo-line"}`}>
                 <div className={useConstrainedChatWidth ? "mx-auto w-full max-w-[920px]" : ""}>
                   <ChatInput
+                    chatKey={selectedChatId}
                     createCapsuleGatekeeper={(accountId, url) =>
                       overseer.newGatekeeper(accountId, url)
                     }

packages/workshop-frontend/src/ConnectAccountModal.tsx

@@ -4,6 +4,7 @@ import { RpcStub } from 'capnweb'
 import { AuthenticatedApi, GatekeeperVendorFilter } from '@gadgets/workshop-shared/api'
 import { VendorDescription } from '@gadgets/workshop-shared/gatekeeper'
 import VendorCard from './VendorCard'
+import { withDoResetRetry } from './rpcErrors'
 
 interface ConnectAccountModalProps {
   visible: boolean
@@ -41,7 +42,7 @@ export default function ConnectAccountModal({
     const fetchVendors = async () => {
       setVendorsLoading(true)
       try {
-        const vendorList = await authenticatedApi.listGatekeeperVendors(filter)
+        const vendorList = await withDoResetRetry(() => authenticatedApi.listGatekeeperVendors(filter))
         const unavailable = vendorList.filter(v => v.unavailable)
         if (unavailable.length > 0) {
           toasts.add({

packages/workshop-frontend/src/Connections.tsx

@@ -70,6 +70,8 @@ export default function Connections({ overseer, gadget, chatId, authenticatedApi
       setHooks(hookList.filter((hook) => hook.gadgetId === id))
       onHasGatekeepersChange?.(bindingList.length > 0)
     } catch (err) {
+      // Loud on purpose: this panel has no retry path, so a quieted transient failure would
+      // silently render "no connected resources".
       console.error('Failed to load gatekeepers:', err)
       reportIssue('connections.load', err)
       toasts.add({ title: 'Failed to load connections', variant: 'error' })

packages/workshop-frontend/src/GatekeeperModal.tsx

@@ -1,4 +1,4 @@
-import { withDoResetRetry } from './rpcErrors'
+import { logRpcFailure, withDoResetRetry } from './rpcErrors'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Dialog, useKumoToastManager, type PortalContainer } from '@cloudflare/kumo'
 import {
@@ -369,7 +369,7 @@ export default function GatekeeperModal({
     setSpawnerEnv(
       (spawnerEnvCandidatesRef.current ?? []).map(entry => ({ ...entry, enabled: true })))
 
-    authenticatedApi.listModels().then(models => {
+    withDoResetRetry(() => authenticatedApi.listModels()).then(models => {
       if (cancelled) return
       setAvailableModels(models)
       if (models.length > 0) {
@@ -388,7 +388,7 @@ export default function GatekeeperModal({
       toasts.add({ title: "Couldn't load AI models", variant: 'error' })
     })
 
-    authenticatedApi.listGatekeeperVendors().then(vendors => {
+    withDoResetRetry(() => authenticatedApi.listGatekeeperVendors()).then(vendors => {
       if (cancelled) return
       setVendors(vendors)
     }).catch(err => {
@@ -441,7 +441,7 @@ export default function GatekeeperModal({
         }
       })
       .catch(error => {
-        console.error('Failed to subscribe to connected accounts:', error)
+        logRpcFailure('Failed to subscribe to connected accounts:', error)
       })
 
     return () => {

packages/workshop-frontend/src/ObserverConfigModal.tsx

@@ -116,6 +116,8 @@ export default function ObserverConfigModal({
         subStub = stub
       })
       .catch(err => {
+        // Loud on purpose: the modal has no retry path, so a quieted transient failure would
+        // strand the user on a permanent loader.
         console.error('Failed to subscribe to connected accounts:', err)
         toasts.add({ title: 'Failed to load your connected accounts', variant: 'error' })
       })

packages/workshop-frontend/src/OnboardingWizard.tsx

@@ -1,4 +1,4 @@
-import { withDoResetRetry } from './rpcErrors'
+import { logRpcFailure, withDoResetRetry } from './rpcErrors'
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useKumoToastManager } from '@cloudflare/kumo'
 import { RpcTarget } from 'capnweb'
@@ -230,7 +230,7 @@ export default function OnboardingWizard({
         }
       })
       .catch((err) => {
-        console.error('Failed to subscribe to connected accounts:', err)
+        logRpcFailure('Failed to subscribe to connected accounts:', err)
       })
 
     return () => {

packages/workshop-frontend/src/ResourcePicker.tsx

@@ -1,4 +1,4 @@
-import { withDoResetRetry } from './rpcErrors'
+import { logRpcFailure, withDoResetRetry } from './rpcErrors'
 import { useState, useEffect, useRef, useMemo, useCallback, type MutableRefObject } from 'react'
 import { Tooltip, useKumoToastManager } from '@cloudflare/kumo'
 import { Plus, CaretRight, Warning } from '@phosphor-icons/react'
@@ -162,7 +162,7 @@ export default function ResourcePicker({
             () => authenticatedApi.subscribeConnectedAccounts(subscriber))
         subscriptionRef.current = { stub }
       } catch (error) {
-        console.error('Failed to subscribe to connected accounts:', error)
+        logRpcFailure('Failed to subscribe to connected accounts:', error)
         // Nothing more is coming, so show what we have rather than hiding forever.
         setAccountsLoaded(true)
       }

packages/workshop-frontend/src/components/AppShell/SidebarWorkspaces.tsx

@@ -1,4 +1,4 @@
-import { withDoResetRetry } from '../../rpcErrors'
+import { logRpcFailure, withDoResetRetry } from '../../rpcErrors'
 import {
   createContext,
   useCallback,
@@ -97,7 +97,7 @@ export function SidebarWorkspacesProvider({ children }: { children: ReactNode })
         setGadgetsLoading(false)
       })
       .catch((err) => {
-        console.error('Failed to load workspaces for sidebar:', err)
+        logRpcFailure('Failed to load workspaces for sidebar:', err)
         if (!cancelled) setGadgetsLoading(false)
       })
     return () => { cancelled = true }

packages/workshop-frontend/src/routes/__root.tsx

@@ -1,4 +1,4 @@
-import { withDoResetRetry } from '../rpcErrors'
+import { logRpcFailure, withDoResetRetry } from '../rpcErrors'
 import { useState, useEffect } from 'react'
 import { createRootRoute, Outlet, useRouterState } from '@tanstack/react-router'
 import { TooltipProvider, Toasty } from '@cloudflare/kumo'
@@ -155,7 +155,7 @@ function AuthenticatedShell({
     withDoResetRetry(() => authenticatedApi.isOnboardingCompleted()).then((completed) => {
       if (!cancelled) setOnboardingNeeded(!completed)
     }).catch((err) => {
-      console.error('Failed to check onboarding status:', err)
+      logRpcFailure('Failed to check onboarding status:', err)
       // If the check fails, skip onboarding to avoid blocking the user
       if (!cancelled) setOnboardingNeeded(false)
     })