feat: add agent reset flow and document machine handover

src/components/app-shell.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Suspense, type ReactNode } from "react"
+import { Suspense, type ReactNode, useEffect, useState } from "react"
 
 import { AppSidebar } from "@/components/app-sidebar"
 import { AuthGuard } from "@/components/auth/auth-guard"
@@ -15,6 +15,14 @@ interface AppShellProps {
 
 export function AppShell({ header, children }: AppShellProps) {
   const { isLoading } = useAuth()
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
+
+  const renderSkeleton = !hydrated || isLoading
+
   return (
     <SidebarProvider>
       <AppSidebar />
@@ -22,7 +30,7 @@ export function AppShell({ header, children }: AppShellProps) {
         <Suspense fallback={null}>
           <AuthGuard />
         </Suspense>
-        {isLoading ? (
+        {renderSkeleton ? (
           <header className="flex h-auto shrink-0 flex-wrap items-start gap-3 border-b bg-background/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-[width,height] ease-linear sm:h-(--header-height) sm:flex-nowrap sm:items-center sm:px-6 lg:px-8 sm:group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
             <div className="flex flex-1 flex-col gap-1">
               <Skeleton className="h-4 w-52" />
@@ -37,7 +45,7 @@ export function AppShell({ header, children }: AppShellProps) {
           header
         )}
         <main className="flex flex-1 flex-col gap-8 bg-gradient-to-br from-background via-background to-primary/10 pb-12 pt-6">
-          {isLoading ? (
+          {renderSkeleton ? (
             <div className="space-y-6">
               <div className="px-4 lg:px-6">
                 <div className="grid gap-6 lg:grid-cols-2">