feat: ARIA error alert badge — detects errors in terminal without panel open

Author: AnasProgrammer2

src/renderer/src/components/terminal/TabBar.tsx

@@ -13,9 +13,11 @@ export function TabBar(): JSX.Element {
     sessions, activeSessionId, splitSessionId,
     setActiveSession, closeSession, setQuickConnectOpen, setSplitSession,
     aiPanelOpen, setAiPanelOpen, activeForwardIds,
-    licenseValid,
+    licenseValid, errorAlertSessionId, setErrorAlert,
   } = useAppStore()
 
+  const hasErrorAlert = errorAlertSessionId === activeSessionId
+
   const [splitMenuOpen,   setSplitMenuOpen]   = useState(false)
   const [forwardOpen,     setForwardOpen]     = useState(false)
   const splitMenuRef  = useRef<HTMLDivElement>(null)
@@ -87,16 +89,22 @@ export function TabBar(): JSX.Element {
             toast.error('License key required', { description: 'Add your license key in Settings → ARIA to use the AI assistant.' })
             return
           }
+          if (hasErrorAlert) setErrorAlert(null)
           setAiPanelOpen(!aiPanelOpen)
         }}
-        title={aiPanelOpen ? 'Close ARIA' : 'Open ARIA'}
+        title={hasErrorAlert ? 'ARIA detected an error — click to analyze' : aiPanelOpen ? 'Close ARIA' : 'Open ARIA'}
         className={cn(
-          'shrink-0 self-center flex items-center gap-1.5 px-2 py-1 rounded-md text-xs transition-colors ml-auto',
+          'shrink-0 self-center relative flex items-center gap-1.5 px-2 py-1 rounded-md text-xs transition-colors ml-auto',
           aiPanelOpen
             ? 'text-primary bg-primary/15 hover:bg-primary/25'
-            : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            : hasErrorAlert
+              ? 'text-red-400 bg-red-500/10 hover:bg-red-500/20'
+              : 'text-muted-foreground hover:text-foreground hover:bg-accent'
         )}
       >
+        {hasErrorAlert && (
+          <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-red-500 animate-pulse" />
+        )}
         <Sparkles className="w-3.5 h-3.5" />
         <span className="hidden sm:inline">ARIA AI</span>
       </button>

src/renderer/src/components/terminal/TerminalTab.tsx

@@ -54,7 +54,7 @@ export function TerminalTab({ session }: Props): JSX.Element {
   // ── Context menu state ────────────────────────────────────────────────────────
   const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number } | null>(null)
 
-  const { setSessionStatus, setSessionLogging } = useAppStore()
+  const { setSessionStatus, setSessionLogging, setErrorAlert } = useAppStore()
 
   // Derive logging state from the session's loggingPath (store is source of truth)
   const logging = !!session.loggingPath
@@ -254,6 +254,56 @@ export function TerminalTab({ session }: Props): JSX.Element {
     }
   }, [session.id, session.connection.protocol])
 
+  // ── Error Alert — always-on detector (panel open or closed) ──────────────────
+  useEffect(() => {
+    const ERROR_PATTERNS = [
+      /^%\s*(Error|Invalid|Incomplete|Ambiguous|Bad|Unknown)/im,  // Cisco IOS
+      /\bcommand not found\b/i,
+      /\bpermission denied\b/i,
+      /\bno route to host\b/i,
+      /\bconnection refused\b/i,
+      /\bdestination host unreachable\b/i,
+      /\bnetwork unreachable\b/i,
+      /\btimed? out\b/i,
+      /\boperation timed out\b/i,
+      /\bfatal error\b/i,
+      /\bsegmentation fault\b/i,
+      /^error:/im,
+      /\bFailed to\b/i,
+    ]
+    const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, '').trim()
+
+    let buf = ''
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    const proto = session.connection.protocol
+    const onData = (_sid: string, data: string) => {
+      if (_sid !== session.id) return
+      buf += data
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        const plain = stripAnsi(buf)
+        buf = ''
+        if (!plain || plain.length < 5) return
+        const { aiPanelOpen, aiStreaming } = useAppStore.getState()
+        if (aiPanelOpen || aiStreaming) return  // panel already open, no need for badge
+        if (ERROR_PATTERNS.some((p) => p.test(plain))) {
+          setErrorAlert(session.id)
+        }
+      }, 800)
+    }
+
+    let off: (() => void) | undefined
+    if      (proto === 'ssh')    off = window.api.ssh.onData(onData)
+    else if (proto === 'telnet') off = window.api.telnet.onData(onData)
+    else if (proto === 'serial') off = window.api.serial.onData(onData)
+
+    return () => {
+      if (timer) clearTimeout(timer)
+      off?.()
+    }
+  }, [session.id, session.connection.protocol, setErrorAlert])
+
   // ── 1. Init terminal ─────────────────────────────────────────────────────────
   useEffect(() => {
     mountedRef.current = true

src/renderer/src/store/index.ts

@@ -136,6 +136,10 @@ interface AppState {
   // Session logging (path stored per session so TabBar can show indicator)
   setSessionLogging: (sessionId: string, path: string | null) => void
 
+  // Error alert badge — set when ARIA detects an error in any session
+  errorAlertSessionId: string | null
+  setErrorAlert: (sessionId: string | null) => void
+
   // AI Copilot
   aiPanelOpen:  boolean
   // License state
@@ -193,6 +197,9 @@ export const useAppStore = create<AppState>((set, get) => ({
   setLicenseStatus: (s)   => set({ licenseValid: s.valid, licensePlan: s.plan, licenseExpiry: s.expiresAt }),
   setDeviceId:      (id)  => set({ deviceId: id }),
 
+  errorAlertSessionId: null,
+  setErrorAlert: (sessionId) => set({ errorAlertSessionId: sessionId }),
+
   // AI Copilot initial state
   aiPanelOpen:  false,
   aiPermission: 'troubleshoot',