feat(stt): add loading and unreachable state banners for local STT

Author: ComputelessComputer

apps/desktop/src/components/main/sidebar/banner/registry.tsx

@@ -34,6 +34,53 @@ export function createBannerRegistry({
 }: BannerRegistryParams): BannerRegistryEntry[] {
   // order matters
   return [
+    {
+      banner: {
+        id: "stt-loading",
+        description: (
+          <>
+            Transcription model is
+            <strong className="font-mono animate-ping text-amber-500">
+              loading
+            </strong>
+            . This may take a moment.
+          </>
+        ),
+        primaryAction: {
+          label: "View status",
+          onClick: onOpenSTTSettings,
+        },
+        dismissible: false,
+      },
+      condition: () =>
+        isLocalSttModel &&
+        sttServerStatus === "loading" &&
+        !hasSttConfigured &&
+        !isAiTranscriptionTabActive,
+    },
+    {
+      banner: {
+        id: "stt-unreachable",
+        variant: "error",
+        description: (
+          <>
+            Transcription model{" "}
+            <strong className="font-mono text-red-500">failed to start</strong>.
+            Please try again.
+          </>
+        ),
+        primaryAction: {
+          label: "Configure transcription",
+          onClick: onOpenSTTSettings,
+        },
+        dismissible: false,
+      },
+      condition: () =>
+        isLocalSttModel &&
+        sttServerStatus === "unreachable" &&
+        !hasSttConfigured &&
+        !isAiTranscriptionTabActive,
+    },
     {
       banner: {
         id: "missing-stt",

apps/desktop/src/components/settings/ai/stt/select.tsx

@@ -15,6 +15,7 @@ import { cn } from "@hypr/utils";
 
 import { useBillingAccess } from "../../../../billing";
 import { useConfigValues } from "../../../../config/use-config";
+import { useSTTConnection } from "../../../../hooks/useSTTConnection";
 import * as settings from "../../../../store/tinybase/settings";
 import { getProviderSelectionBlockers, requiresEntitlement } from "../shared/eligibility";
 import { HealthCheckForConnection } from "./health";
@@ -27,6 +28,16 @@ export function SelectProviderAndModel() {
   ] as const);
   const billing = useBillingAccess();
   const configuredProviders = useConfiguredMapping();
+  const { local: sttLocal } = useSTTConnection();
+  const sttServerStatus = sttLocal.data?.status;
+
+  const isLocalSttModel =
+    current_stt_provider === "hyprnote" &&
+    !!current_stt_model &&
+    current_stt_model !== "cloud";
+
+  const isUnreachable = isLocalSttModel && sttServerStatus === "unreachable";
+  const isNotConfigured = !current_stt_provider || !current_stt_model;
 
   const handleSelectProvider = settings.UI.useSetValueCallback(
     "current_stt_provider",
@@ -72,7 +83,7 @@ export function SelectProviderAndModel() {
         className={cn([
           "flex flex-col gap-4",
           "p-4 rounded-xl border border-neutral-200",
-          !!current_stt_provider && !!current_stt_model ? "bg-neutral-50" : "bg-red-50",
+          isNotConfigured || isUnreachable ? "bg-red-50" : "bg-neutral-50",
         ])}
       >
         <div className="flex flex-row items-center gap-4">
@@ -184,14 +195,23 @@ export function SelectProviderAndModel() {
           {current_stt_provider && current_stt_model && <HealthCheckForConnection />}
         </div>
 
-        {(!current_stt_provider || !current_stt_model) && (
+        {isNotConfigured && (
           <div className="flex items-center gap-2 pt-2 border-t border-red-200">
             <span className="text-sm text-red-600">
               <strong className="font-medium">Transcription model</strong> is needed to make
               Hyprnote listen to your conversations.
             </span>
           </div>
         )}
+
+        {isUnreachable && (
+          <div className="flex items-center gap-2 pt-2 border-t border-red-200">
+            <span className="text-sm text-red-600">
+              <strong className="font-medium">Transcription model</strong>{" "}
+              failed to start. Please try again.
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );