Phone header: assistant button in the corner, gated on an available provider as the sidebar entry is; header triggers on the right at 44px

frontend/src/routes/_layout.tsx

@@ -1,16 +1,23 @@
+import { useQuery } from "@tanstack/react-query"
 import {
   createFileRoute,
   Outlet,
   redirect,
   useRouterState,
 } from "@tanstack/react-router"
+import { Bot } from "lucide-react"
 
-import { ControlTrigger } from "@/components/Chat/ChatPanel"
+import {
+  aiStatusQueryOptions,
+  ControlTrigger,
+} from "@/components/Chat/ChatPanel"
+import { chatStore } from "@/components/Chat/chatStore"
 import { ConnectionNotice } from "@/components/Common/ConnectionNotice"
 import ErrorComponent from "@/components/Common/ErrorComponent"
 import { Footer } from "@/components/Common/Footer"
 import { useFlowSocket } from "@/components/Flow/useFlowSocket"
 import AppSidebar from "@/components/Sidebar/AppSidebar"
+import { Button } from "@/components/ui/button"
 import {
   SidebarInset,
   SidebarProvider,
@@ -38,6 +45,8 @@ function Layout() {
   // here rather than only inside the editor.
   useFlowSocket()
   const home = useRouterState({ select: (s) => s.location.pathname === "/" })
+  // Gated as the sidebar's entry is: with no provider there is nothing to open.
+  const assistant = useQuery(aiStatusQueryOptions())
 
   return (
     <SidebarProvider className="bg-card">
@@ -48,10 +57,25 @@ function Layout() {
         <ConnectionNotice />
         {/* The sidebar carries its own collapse control; a phone has no
             sidebar on screen to carry it. Home's chat sits opposite, where
-            the brain view has it on a wider screen. */}
+            the brain view has it on a wider screen, and the assistant in the
+            corner, one tap away rather than behind the sidebar sheet. */}
         <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 px-4 md:hidden">
           <SidebarTrigger className="-ml-1 text-muted-foreground" />
-          {home ? <ControlTrigger className="-mr-1 ml-auto" /> : null}
+          <div className="-mr-3 ml-auto flex items-center">
+            {home ? <ControlTrigger className="size-11" /> : null}
+            {assistant.data?.available ? (
+              <Button
+                variant="ghost"
+                size="icon-touch"
+                className="text-muted-foreground"
+                onClick={chatStore.toggle}
+                aria-label="Assistant"
+                title="Assistant"
+              >
+                <Bot />
+              </Button>
+            ) : null}
+          </div>
         </header>
         <main className="flex-1 p-4 sm:p-6 md:p-8">
           <div className="mx-auto max-w-7xl">