From e97175660a848a1e8bf0e68bbc0a29cda03890ff Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Mon, 6 Apr 2026 18:20:57 +0800
Subject: [PATCH] feat(web-ui): shell nav empty state and chat input space hint

- ShellNav: center empty state, quick new terminal button, scroll section min-height

- ChatInput: show space-to-activate hint when processing is collapsed (companion off)

- i18n: nav.shell.empty.quickNew (en-US, zh-CN)
---
 src/web-ui/src/app/scenes/shell/ShellNav.scss | 27 ++++++++++++++++---
 src/web-ui/src/app/scenes/shell/ShellNav.tsx  | 18 +++++++++++--
 .../src/flow_chat/components/ChatInput.tsx    |  3 +--
 src/web-ui/src/locales/en-US/common.json      |  3 ++-
 src/web-ui/src/locales/zh-CN/common.json      |  3 ++-
 5 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.scss b/src/web-ui/src/app/scenes/shell/ShellNav.scss
index 07827dedd..ca2d9da33 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.scss
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.scss
@@ -275,6 +275,7 @@
 
   &__sections {
     flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0 0 $size-gap-3;
@@ -285,6 +286,14 @@
       background: var(--border-subtle);
       border-radius: 2px;
     }
+
+    &--empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: $size-gap-3;
+    }
   }
 
   &__terminal-list {
@@ -443,10 +452,22 @@
   }
 
   &__empty {
-    padding: $size-gap-3;
-    margin: 0 $size-gap-3;
-    border: 1px dashed var(--border-subtle);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $size-gap-3;
+    align-self: stretch;
+    width: 100%;
+    box-sizing: border-box;
+    padding: $size-gap-4 $size-gap-3;
+    text-align: center;
+    border: 2px dashed var(--border-subtle);
     border-radius: 10px;
+  }
+
+  &__empty-message {
+    margin: 0;
     color: var(--color-text-muted);
     font-size: var(--font-size-xs);
     line-height: $line-height-relaxed;
diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.tsx b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
index 84e8f3dc2..e3ed68def 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.tsx
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
@@ -24,6 +24,7 @@ import { useShellStore } from './shellStore';
 import { useShellEntries } from './hooks';
 import type { ShellEntry } from './hooks/shellEntryTypes';
 import { useShellNavMenuState } from './hooks/useShellNavMenuState';
+import { Button } from '@/component-library/components/Button';
 import { Tooltip } from '@/component-library/components/Tooltip';
 import ShellNavEntryItem from './components/ShellNavEntryItem';
 import ShellNavWorkspaceSwitcher from './components/ShellNavWorkspaceSwitcher';
@@ -328,7 +329,9 @@ const ShellNav: React.FC = () => {
         </button>
       </div>
 
-      <div className="bitfun-shell-nav__sections">
+      <div
+        className={`bitfun-shell-nav__sections${!hasVisibleContent ? ' bitfun-shell-nav__sections--empty' : ''}`}
+      >
         {hasVisibleContent ? (
           <div className="bitfun-shell-nav__terminal-list">
             {visibleEntries.map((entry) => (
@@ -348,7 +351,18 @@ const ShellNav: React.FC = () => {
           </div>
         ) : (
           <div className="bitfun-shell-nav__empty">
-            {navView === 'agent' ? t('nav.shell.empty.agent') : t('nav.shell.empty.manual')}
+            <p className="bitfun-shell-nav__empty-message">
+              {navView === 'agent' ? t('nav.shell.empty.agent') : t('nav.shell.empty.manual')}
+            </p>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => { void handleCreateManualTerminal(); }}
+            >
+              <Plus size={14} aria-hidden />
+              {t('nav.shell.empty.quickNew')}
+            </Button>
           </div>
         )}
       </div>
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index d7866c6a6..35ef59ead 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -2290,8 +2290,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
               {!inputState.isActive &&
                 !inputState.value.trim() &&
-                !agentCompanionEnabled &&
-                !isCollapsedProcessing && (
+                !agentCompanionEnabled && (
                 <span className="bitfun-chat-input__space-hint">
                   <Trans
                     i18nKey="input.spaceToActivate"
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index 195445f0d..4823a6ab0 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -152,7 +152,8 @@
       },
       "empty": {
         "manual": "No user terminals yet",
-        "agent": "No agent terminals yet"
+        "agent": "No agent terminals yet",
+        "quickNew": "Quick new terminal"
       }
     },
     "sessions": {
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 595fd4a4b..ea658a894 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -152,7 +152,8 @@
       },
       "empty": {
         "manual": "还没有用户终端",
-        "agent": "还没有 Agent 终端"
+        "agent": "还没有 Agent 终端",
+        "quickNew": "快速新建"
       }
     },
     "sessions": {