feat(banner): add error variant and local STT connection status

Author: ComputelessComputer

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

@@ -11,7 +11,10 @@ export function Banner({ banner, onDismiss }: { banner: BannerType; onDismiss?:
         className={cn([
           "relative group overflow-hidden rounded-lg",
           "flex flex-col gap-2",
-          "bg-white border border-neutral-200 shadow-sm p-4",
+          "bg-white p-4",
+          banner.variant === "error"
+            ? "border border-red-300 shadow-sm shadow-red-100"
+            : "border border-neutral-200 shadow-sm",
         ])}
       >
         {banner.dismissible && onDismiss && (

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

@@ -1,10 +1,12 @@
+import type { ServerStatus } from "@hypr/plugin-local-stt";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { cn } from "@hypr/utils";
 
 import { useAuth } from "../../../../auth";
 import { useConfigValues } from "../../../../config/use-config";
+import { useSTTConnection } from "../../../../hooks/useSTTConnection";
 import { useTabs } from "../../../../store/zustand/tabs";
 import { Banner } from "./component";
 import { createBannerRegistry, getBannerToShow } from "./registry";
@@ -24,7 +26,18 @@ export function BannerArea({ isProfileExpanded }: { isProfileExpanded: boolean }
       "current_stt_model",
     ] as const);
   const hasLLMConfigured = !!(current_llm_provider && current_llm_model);
-  const hasSttConfigured = !!(current_stt_provider && current_stt_model);
+
+  const { conn: sttConnection, local: sttLocal } = useSTTConnection();
+  const sttServerStatus = sttLocal.data?.status as ServerStatus | undefined;
+
+  const isLocalSttModel =
+    current_stt_provider === "hyprnote" &&
+    !!current_stt_model &&
+    current_stt_model !== "cloud";
+
+  const hasSttConfigured = isLocalSttModel
+    ? !!sttConnection
+    : !!(current_stt_provider && current_stt_model && sttConnection);
 
   const currentTab = useTabs((state) => state.currentTab);
   const isAiTranscriptionTabActive =
@@ -64,6 +77,8 @@ export function BannerArea({ isProfileExpanded }: { isProfileExpanded: boolean }
         isAuthenticated,
         hasLLMConfigured,
         hasSttConfigured,
+        sttServerStatus,
+        isLocalSttModel,
         isAiTranscriptionTabActive,
         isAiIntelligenceTabActive,
         onSignIn: handleSignIn,
@@ -74,6 +89,8 @@ export function BannerArea({ isProfileExpanded }: { isProfileExpanded: boolean }
       isAuthenticated,
       hasLLMConfigured,
       hasSttConfigured,
+      sttServerStatus,
+      isLocalSttModel,
       isAiTranscriptionTabActive,
       isAiIntelligenceTabActive,
       handleSignIn,

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

@@ -1,3 +1,5 @@
+import type { ServerStatus } from "@hypr/plugin-local-stt";
+
 import type { BannerCondition, BannerType } from "./types";
 
 type BannerRegistryEntry = {
@@ -9,6 +11,8 @@ type BannerRegistryParams = {
   isAuthenticated: boolean;
   hasLLMConfigured: boolean;
   hasSttConfigured: boolean;
+  sttServerStatus: ServerStatus | undefined;
+  isLocalSttModel: boolean;
   isAiTranscriptionTabActive: boolean;
   isAiIntelligenceTabActive: boolean;
   onSignIn: () => void | Promise<void>;
@@ -20,6 +24,8 @@ export function createBannerRegistry({
   isAuthenticated,
   hasLLMConfigured,
   hasSttConfigured,
+  sttServerStatus,
+  isLocalSttModel,
   isAiTranscriptionTabActive,
   isAiIntelligenceTabActive,
   onSignIn,
@@ -43,7 +49,8 @@ export function createBannerRegistry({
         },
         dismissible: false,
       },
-      condition: () => !hasSttConfigured && !isAiTranscriptionTabActive,
+      condition: () =>
+        !hasSttConfigured && !isLocalSttModel && !isAiTranscriptionTabActive,
     },
     {
       banner: {

apps/desktop/src/components/main/sidebar/banner/types.ts

@@ -13,6 +13,7 @@ export type BannerType = {
   primaryAction?: BannerAction;
   secondaryAction?: BannerAction;
   dismissible: boolean;
+  variant?: "default" | "error";
 };
 
 export type BannerCondition = () => boolean;