fix(agents): improve navbar layout for agent status screens (#13494)

### What this PR does

Before this PR:
- Agent status screens (Disabled, Stopped, Empty) did not show the
Navbar component
- AgentSidePanel tabs had incorrect padding when navbar is at top
position
- AgentStatusScreen used motion animation which was unnecessary

<img width="1060" height="700" alt="image"
src="https://github.com/user-attachments/assets/ec90c9ed-f8a9-4c1d-a9a4-af2ef34ab772"
/>

After this PR:
- All agent status screens now consistently display the Navbar component
- AgentSidePanel tabs padding adjusts correctly based on navbar position
(adds `pt-0.5` when navbar is at top)
- Removed motion animation from AgentStatusScreen for cleaner code
- AgentNavbar is always shown regardless of navbar position setting

<img width="1060" height="700" alt="image"
src="https://github.com/user-attachments/assets/fee0aaa6-d49b-4dd8-819d-6f7a0b083945"
/>

### Why we need it and why it was done in this way

The following tradeoffs were made:
- Removed motion animation to simplify the component; the animation was
brief and not critical to UX

The following alternatives were considered:
- Using CSS attribute selectors for navbar position styling, but using
the existing `useNavbarPosition` hook is more consistent with the
codebase

### Breaking changes

None

### Special notes for your reviewer

This is a UI layout fix to ensure consistent navbar display across all
agent page states.

### Checklist

- [x] PR: The PR description is expressive enough and will help future
contributors
- [x] Code: [Write code that humans can
understand](https://en.wikiquote.org/wiki/Martin_Fowler#code-for-humans)
and [Keep it simple](https://en.wikipedia.org/wiki/KISS_principle)
- [x] Refactor: You have [left the code cleaner than you found it (Boy
Scout
Rule)](https://learning.oreilly.com/library/view/97-things-every/9780596809515/ch08.html)
- [x] Upgrade: Impact of this change on upgrade flows was considered and
addressed if required
- [x] Documentation: A [user-guide update](https://docs.cherry-ai.com)
was considered and is present (link) or not required. Check this only
when the PR introduces or changes a user-facing feature or behavior.
- [ ] Self-review: I have reviewed my own code (e.g., via
[`/gh-pr-review`](/.claude/skills/gh-pr-review/SKILL.md), `gh pr diff`,
or GitHub UI) before requesting review from others

### Release note

```release-note
NONE
```

Signed-off-by: kangfenmao <kangfenmao@qq.com>

src/renderer/src/pages/agents/AgentPage.tsx

@@ -1,3 +1,4 @@
+import { Navbar } from '@renderer/components/app/Navbar'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { useActiveAgent } from '@renderer/hooks/agents/useActiveAgent'
 import { useAgents } from '@renderer/hooks/agents/useAgents'
@@ -44,7 +45,8 @@ const AgentPage = () => {
 
   if (!apiServerConfig.enabled) {
     return (
-      <Container className="bg-background">
+      <Container>
+        <Navbar />
         <AgentServerDisabled />
       </Container>
     )
@@ -52,7 +54,8 @@ const AgentPage = () => {
 
   if (!apiServerLoading && !apiServerRunning) {
     return (
-      <Container className="bg-background">
+      <Container>
+        <Navbar />
         <AgentServerStopped />
       </Container>
     )
@@ -60,7 +63,8 @@ const AgentPage = () => {
 
   if (agents && agents.length === 0) {
     return (
-      <Container className="bg-background">
+      <Container>
+        <Navbar />
         <AgentEmpty />
       </Container>
     )
@@ -68,7 +72,7 @@ const AgentPage = () => {
 
   return (
     <Container>
-      {isLeftNavbar && <AgentNavbar />}
+      <AgentNavbar />
       <div
         id={isLeftNavbar ? 'content-container' : undefined}
         className="flex min-w-0 flex-1 shrink flex-row overflow-hidden">

src/renderer/src/pages/agents/AgentSidePanel.tsx

@@ -16,7 +16,7 @@ const AgentSidePanel = ({ onSelectItem }: AgentSidePanelProps) => {
   const { t } = useTranslation()
   const { chat } = useRuntime()
   const { activeAgentId } = chat
-  const { isLeftNavbar } = useNavbarPosition()
+  const { isLeftNavbar, isTopNavbar } = useNavbarPosition()
   const { topicPosition } = useSettings()
 
   const sessionsOnRight = topicPosition === 'right'
@@ -34,7 +34,7 @@ const AgentSidePanel = ({ onSelectItem }: AgentSidePanelProps) => {
       {/* Tabs */}
       {!sessionsOnRight && (
         <div
-          className="mx-3 flex border-(--color-border) border-b bg-transparent py-1.5 pt-0.5"
+          className={cn('mx-3 flex border-(--color-border) border-b bg-transparent py-1.5', isTopNavbar && 'pt-0.5')}
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
           <TabButton active={tab === 'agents'} onClick={() => setTab('agents')}>
             {t('agent.sidebar_title')}

src/renderer/src/pages/agents/components/status/AgentStatusScreen.tsx

@@ -1,5 +1,4 @@
 import type { LucideIcon } from 'lucide-react'
-import { motion } from 'motion/react'
 import type { ReactNode } from 'react'
 
 interface AgentStatusScreenProps {
@@ -12,18 +11,14 @@ interface AgentStatusScreenProps {
 
 const AgentStatusScreen = ({ icon: Icon, iconClassName, title, description, actions }: AgentStatusScreenProps) => {
   return (
-    <motion.div
-      className="flex h-full w-full flex-col items-center justify-center gap-4"
-      initial={{ opacity: 0, scale: 0.9 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.3, ease: 'easeOut' }}>
+    <div id="content-container" className="flex h-full w-full flex-col items-center justify-center gap-4">
       <Icon size={56} strokeWidth={1.2} className={iconClassName} />
       <div className="flex flex-col items-center gap-2">
         <h3 className="m-0 font-medium text-(--color-text) text-base">{title}</h3>
         <p className="m-0 max-w-xs text-center text-(--color-text-secondary) text-sm">{description}</p>
       </div>
       <div className="flex gap-3">{actions}</div>
-    </motion.div>
+    </div>
   )
 }