ui: improve flow ai agent

Author: hoalongnatsu

ui/src/components/Sidebar.tsx

@@ -57,9 +57,24 @@ interface SideItem {
 }
 
 export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
+  // Agent config drives whether the Agent zone is usable. Shares the
+  // ["agent-config"] cache key with TopBar/NowPage — one fetch, zero extra
+  // load. enable===false means the agent is deliberately off.
+  const configQ = useQuery({
+    queryKey: ["agent-config"],
+    queryFn: api.getAgentConfig,
+    staleTime: 60_000,
+    retry: 1,
+  });
+  const agentOff = configQ.data?.enable === false;
+
+  // The agent status route (/api/agent/status) is only mounted when the agent
+  // is enabled, so skip the poll when it's off — otherwise it 404s and the
+  // runbooks hint flickers. Disabled query → data undefined → runbooks off.
   const statusQ = useQuery({
     queryKey: ["status"],
     queryFn: api.status,
+    enabled: !agentOff,
     staleTime: 30_000,
     retry: 1,
   });
@@ -149,6 +164,22 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
     { to: "/settings", label: "Settings", icon: Settings },
   ];
 
+  // When the agent is disabled (agent.enable=false) every Agent view and the
+  // agent-backed Runbooks tool are non-functional. Dim + lock them with a
+  // clear hint (visible-with-hint, audit I4) so they read as disabled instead
+  // of navigating to empty/erroring pages.
+  const AGENT_OFF_HINT =
+    "AI agent is disabled — set agent.enable to use these views";
+  const applyAgentOff = (items: SideItem[]): SideItem[] =>
+    agentOff
+      ? items.map((it) => ({
+          ...it,
+          dim: true,
+          locked: true,
+          dimTitle: AGENT_OFF_HINT,
+        }))
+      : items;
+
   return (
     // force-dark: the rail keeps its dark identity in BOTH themes — the
     // CSS variables are re-pinned on this subtree (see index.css).
@@ -157,8 +188,8 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
 
       <nav aria-label="Primary" className="dark-scroll flex-1 overflow-y-auto px-2 py-2">
         <Zone title="Respond" items={respond} onNavigate={onNavigate} />
-        <Zone title="Agent" items={agent} onNavigate={onNavigate} />
-        <Zone title="Tools" items={tools} onNavigate={onNavigate} />
+        <Zone title="Agent" items={applyAgentOff(agent)} onNavigate={onNavigate} />
+        <Zone title="Tools" items={applyAgentOff(tools)} onNavigate={onNavigate} />
         <Zone title="Manage" items={manage} onNavigate={onNavigate} />
       </nav>
     </div>

ui/src/components/TopBar.tsx

@@ -38,18 +38,24 @@ export function TopBar({ title, subtitle, actions }: Props) {
   const { open } = useOpenIncidentCount();
   const { theme, toggle } = useTheme();
 
-  const liveness = useQuery({
-    queryKey: ["status-pulse"],
-    queryFn: api.status,
-    refetchInterval: () => (document.hidden ? false : 30_000),
-    retry: 1,
-  });
   const config = useQuery({
     queryKey: ["agent-config"],
     queryFn: api.getAgentConfig,
     staleTime: 60_000,
     retry: 1,
   });
+  // Only poll the agent liveness endpoint when the agent is actually enabled.
+  // /api/agent/status does not exist when agent.enable=false, so polling it
+  // would 404 forever and the chip would show "reconnecting…" for a deployment
+  // that is simply running without the agent. Gate on the config: undefined
+  // (still loading) keeps polling; an explicit false stops it.
+  const liveness = useQuery({
+    queryKey: ["status-pulse"],
+    queryFn: api.status,
+    enabled: config.data?.enable !== false,
+    refetchInterval: () => (document.hidden ? false : 30_000),
+    retry: 1,
+  });
 
   return (
     <header
@@ -153,7 +159,12 @@ function AgentChip({
   let dot = "bg-ink-400";
   let label = "agent";
 
-  if (livenessLoading || configLoading) {
+  if (agentEnabled === false) {
+    // Config says the agent is off — this is a deliberate state, not an
+    // error. A 404 from the (unmounted) status endpoint must NOT surface as
+    // "reconnecting…"/"unreachable", so this check comes first.
+    label = "agent off";
+  } else if (livenessLoading || configLoading) {
     label = "connecting…";
     dot = "motion-safe:animate-pulse bg-ink-300";
   } else if (livenessError) {
@@ -166,8 +177,6 @@ function AgentChip({
       cls = "border-sev-warn/40 bg-sev-warn/15 text-sev-warn";
       dot = "motion-safe:animate-pulse bg-sev-warn";
     }
-  } else if (agentEnabled === false) {
-    label = "agent off";
   } else if (mode) {
     label = mode;
     if (mode === "detect") {

ui/src/lib/api.ts

@@ -36,9 +36,15 @@ export function clearSecret() {
 // longer unlocked by a static token here — it rides the SSO session (the RBAC
 // admin user). Throws ApiError(401) when the secret is rejected; other errors
 // propagate unchanged.
+//
+// We verify against /api/admin/config/agent (getAgentConfig), NOT
+// /api/agent/status: the config endpoint is always mounted and gateway-secret
+// gated, whereas the agent status route only exists when agent.enable=true.
+// Verifying against status coupled sign-in to the agent being on, so an
+// alert-router deployment with a gateway secret but no agent could not log in.
 export async function signIn(value: string): Promise<void> {
   setSecret(value.trim());
-  await api.status();
+  await api.getAgentConfig();
 }
 
 // AUTH_EXPIRED_EVENT fires when a request that carried a secret comes back

ui/src/lib/auth.tsx

@@ -27,8 +27,9 @@ interface Props {
 //    probed via the deployment org's whoami. After the OIDC callback redirects
 //    to "/", a held session opens the app directly instead of re-prompting; or
 //  - on an OSS/community binary, the X-Gateway-Secret gateway secret, verified
-//    against /api/agent/status. The gateway secret is OSS-only — a licensed
-//    binary never offers it; its sign-in is the built-in admin / SSO.
+//    against /api/admin/config/agent (always mounted + secret-gated, so it
+//    works whether or not the agent is enabled). The gateway secret is OSS-only
+//    — a licensed binary never offers it; its sign-in is the built-in admin / SSO.
 //    A bad/absent credential AND no session fall through to the sign-in screen.
 //    Transient network errors deliberately do NOT trap the user (kept
 //    behavior). Mid-session OSS secret rotation is handled by <ReauthModal>.
@@ -41,7 +42,7 @@ export function AuthGate({ children }: Props) {
     let alive = true;
     resolveInitialAuth({
       hasSecret: () => Boolean(getSecret()),
-      checkSecret: () => api.status(),
+      checkSecret: () => api.getAgentConfig(),
       deploymentOrg: () => api.getSSODeployment().then((d) => d.org),
       probeSession: (org) => getSsoSession(org),
     }).then((state) => {

ui/src/pages/NowPage.tsx

@@ -62,18 +62,21 @@ export function NowPage() {
     staleTime: 15_000,
   });
   // Same keys as TopBar's chip queries — one cache entry, zero extra load.
-  const status = useQuery({
-    queryKey: ["status-pulse"],
-    queryFn: api.status,
-    refetchInterval: () => (document.hidden ? false : 30_000),
-    retry: 1,
-  });
   const config = useQuery({
     queryKey: ["agent-config"],
     queryFn: api.getAgentConfig,
     staleTime: 60_000,
     retry: 1,
   });
+  // Skip the agent liveness poll when the agent is disabled — the status
+  // route is unmounted in that case, so polling it would 404 every 30s.
+  const status = useQuery({
+    queryKey: ["status-pulse"],
+    queryFn: api.status,
+    enabled: config.data?.enable !== false,
+    refetchInterval: () => (document.hidden ? false : 30_000),
+    retry: 1,
+  });
 
   const sorted = useMemo(() => {
     const list = [...(incidents.data ?? [])];
@@ -163,6 +166,10 @@ export function NowPage() {
           ? ("warn" as const)
           : ("info" as const)
       : undefined;
+  // When the agent is off the liveness query is disabled (stays "pending"),
+  // so the status skeleton/error blocks must be suppressed — the agent-off
+  // pill above already communicates the state.
+  const agentOn = config.data?.enable !== false;
 
   return (
     <>
@@ -538,14 +545,14 @@ function AgentPulse({
           </div>
         )}
 
-        {status.isPending && (
+        {agentOn && status.isPending && (
           <div aria-hidden className="grid grid-cols-3 gap-2">
             <div className="sk h-12" />
             <div className="sk h-12" />
             <div className="sk h-12" />
           </div>
         )}
-        {status.isError && (
+        {agentOn && status.isError && (
           <RetryableError
             context="Couldn't load agent status"
             error={status.error}