From f9f7900953f5e399f3e638ef017007c2d2c7f250 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sat, 28 Mar 2026 17:07:10 +0800
Subject: [PATCH] refactor(web-ui): polish Modal, nav search, welcome panel,
 and Git tool card UI

---
 .../components/NavPanel/NavSearchDialog.tsx   |  22 +-
 .../components/Modal/Modal.scss               |  48 +++-
 .../components/Modal/Modal.tsx                |  32 ++-
 .../src/flow_chat/components/ChatInput.tsx    |   6 +-
 .../src/flow_chat/components/WelcomePanel.css |   8 +-
 .../src/flow_chat/components/WelcomePanel.tsx |   4 +-
 .../flow_chat/tool-cards/GitToolDisplay.scss  | 223 +++++++++++-------
 .../flow_chat/tool-cards/GitToolDisplay.tsx   |  79 ++++---
 8 files changed, 277 insertions(+), 145 deletions(-)

diff --git a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx
index 04d8619f..15838b2c 100644
--- a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx
@@ -88,19 +88,29 @@ const NavSearchDialog: React.FC<NavSearchDialogProps> = ({ open, onClose }) => {
   }, [flowChatState.sessions, openedWorkspacesList]);
 
   const results = useMemo((): SearchResultItem[] => {
-    if (!query.trim()) return [];
-
     const items: SearchResultItem[] = [];
+    const q = query.trim();
+
+    if (!q) {
+      for (const w of projectWorkspaces.slice(0, MAX_PER_GROUP)) {
+        items.push({ kind: 'workspace', id: w.id, label: w.name, sublabel: w.rootPath });
+      }
+      for (const w of assistantWorkspacesList.slice(0, MAX_PER_GROUP)) {
+        const displayName = w.identity?.name?.trim() || w.name;
+        items.push({ kind: 'assistant', id: w.id, label: displayName, sublabel: w.description });
+      }
+      return items;
+    }
 
     const filteredWorkspaces = projectWorkspaces
-      .filter(w => matchesQuery(query, w.name, w.rootPath))
+      .filter(w => matchesQuery(q, w.name, w.rootPath))
       .slice(0, MAX_PER_GROUP);
     for (const w of filteredWorkspaces) {
       items.push({ kind: 'workspace', id: w.id, label: w.name, sublabel: w.rootPath });
     }
 
     const filteredAssistants = assistantWorkspacesList
-      .filter(w => matchesQuery(query, w.name, w.identity?.name, w.description))
+      .filter(w => matchesQuery(q, w.name, w.identity?.name, w.description))
       .slice(0, MAX_PER_GROUP);
     for (const w of filteredAssistants) {
       const displayName = w.identity?.name?.trim() || w.name;
@@ -108,7 +118,7 @@ const NavSearchDialog: React.FC<NavSearchDialogProps> = ({ open, onClose }) => {
     }
 
     const filteredSessions = allSessions
-      .filter(({ session }) => !session.parentSessionId && matchesQuery(query, getTitle(session)))
+      .filter(({ session }) => !session.parentSessionId && matchesQuery(q, getTitle(session)))
       .slice(0, MAX_PER_GROUP);
     for (const { session, workspace } of filteredSessions) {
       items.push({
@@ -155,7 +165,7 @@ const NavSearchDialog: React.FC<NavSearchDialogProps> = ({ open, onClose }) => {
     }
     if (e.key === 'ArrowDown') {
       e.preventDefault();
-      setActiveIndex(i => Math.min(i + 1, results.length - 1));
+      setActiveIndex(i => Math.min(i + 1, Math.max(0, results.length - 1)));
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
       setActiveIndex(i => Math.max(i - 1, 0));
diff --git a/src/web-ui/src/component-library/components/Modal/Modal.scss b/src/web-ui/src/component-library/components/Modal/Modal.scss
index e5475360..d7feef9b 100644
--- a/src/web-ui/src/component-library/components/Modal/Modal.scss
+++ b/src/web-ui/src/component-library/components/Modal/Modal.scss
@@ -3,6 +3,8 @@
  */
 @use '../../styles/tokens.scss' as tokens;
 
+$modal-edge-gutter: 8px;
+$modal-edge-gutter-sm: 10px;
 
 .modal-overlay {
   position: fixed;
@@ -98,20 +100,25 @@
   }
 
 
+  &__header-shell {
+    position: relative;
+    flex-shrink: 0;
+
+    &--close-only {
+      min-height: 34px;
+    }
+  }
+
   &__header {
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: 6px;
-    padding: 6px 10px;
+    padding: 6px $modal-edge-gutter;
     border-bottom: 1px solid var(--border-subtle);
     background: transparent;
 
-    .modal--content-inset & {
-      padding-inline: 28px;
-    }
-
     &--draggable {
       cursor: move;
       user-select: none;
@@ -121,6 +128,14 @@
         background: var(--element-bg-subtle);
       }
     }
+
+    &--empty {
+      min-height: 34px;
+    }
+  }
+
+  &.modal--with-close .modal__header:has(.modal__title-group) {
+    padding-inline-end: calc(#{$modal-edge-gutter} + 22px + 8px);
   }
 
   &__title-group {
@@ -128,7 +143,7 @@
     align-items: center;
     gap: 6px;
     min-width: 0;
-    flex: 1;
+    flex: 0 1 auto;
   }
 
   &__title {
@@ -144,18 +159,22 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    margin-left: auto;
   }
 
 
   &__close {
+    position: absolute;
+    top: 0;
+    right: $modal-edge-gutter;
+    bottom: 0;
+    z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 22px;
     height: 22px;
     padding: 0;
-    margin-left: auto;
+    margin: auto 0;
     background: transparent;
     border: 1px solid transparent;
     border-radius: 6px;
@@ -163,7 +182,6 @@
     cursor: pointer;
     transition: all 0.2s ease;
     outline: none;
-    flex-shrink: 0;
 
     svg {
       display: block;
@@ -304,11 +322,15 @@
     }
 
     &__header {
-      padding: 12px 14px;
+      padding: 12px $modal-edge-gutter-sm;
+    }
+
+    &.modal--with-close .modal__header:has(.modal__title-group) {
+      padding-inline-end: calc(#{$modal-edge-gutter-sm} + 22px + 10px);
     }
 
-    &.modal--content-inset .modal__header {
-      padding-inline: 14px;
+    &__close {
+      right: $modal-edge-gutter-sm;
     }
 
     &__title {
diff --git a/src/web-ui/src/component-library/components/Modal/Modal.tsx b/src/web-ui/src/component-library/components/Modal/Modal.tsx
index 19731000..dc3ba1e6 100644
--- a/src/web-ui/src/component-library/components/Modal/Modal.tsx
+++ b/src/web-ui/src/component-library/components/Modal/Modal.tsx
@@ -257,6 +257,7 @@ export const Modal: React.FC<ModalProps> = ({
           resizable ? 'modal--resizable' : '',
           isResizing ? 'modal--resizing' : '',
           contentInset ? 'modal--content-inset' : '',
+          showCloseButton ? 'modal--with-close' : '',
         ]
           .filter(Boolean)
           .join(' ')}
@@ -265,14 +266,31 @@ export const Modal: React.FC<ModalProps> = ({
         style={appliedStyle}
       >
         {(title || showCloseButton) && (
-          <div 
-            ref={headerRef}
-            className={`modal__header ${draggable ? 'modal__header--draggable' : ''}`}
+          <div
+            className={[
+              'modal__header-shell',
+              !title && showCloseButton && !draggable ? 'modal__header-shell--close-only' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
           >
-            {title && (
-              <div className="modal__title-group">
-                <h2 className="modal__title">{title}</h2>
-                {titleExtra && <span className="modal__title-extra">{titleExtra}</span>}
+            {(title || (draggable && showCloseButton)) && (
+              <div
+                ref={headerRef}
+                className={[
+                  'modal__header',
+                  draggable ? 'modal__header--draggable' : '',
+                  !title && showCloseButton ? 'modal__header--empty' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                {title && (
+                  <div className="modal__title-group">
+                    <h2 className="modal__title">{title}</h2>
+                    {titleExtra && <span className="modal__title-extra">{titleExtra}</span>}
+                  </div>
+                )}
               </div>
             )}
             {showCloseButton && (
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 74076fe0..d5ecef9b 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -1411,7 +1411,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         containerRef.current &&
         !containerRef.current.contains(target)
       ) {
-        if (inputState.value.trim() === '') {
+        // While IME is composing, React value can still be empty (RichTextInput skips onChange),
+        // but the editor DOM holds preedit text — collapsing would show space-hint on top of it.
+        if (inputState.value.trim() === '' && !isImeComposingRef.current) {
           dispatchInput({ type: 'DEACTIVATE' });
         }
       }
@@ -1589,7 +1591,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 data-testid="chat-input-textarea"
               />
 
-              {!inputState.isActive && (
+              {!inputState.isActive && !inputState.value.trim() && (
                 <span className="bitfun-chat-input__space-hint">
                   <Trans
                     i18nKey="input.spaceToActivate"
diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.css b/src/web-ui/src/flow_chat/components/WelcomePanel.css
index 6f75b859..1974b692 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.css
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.css
@@ -147,12 +147,16 @@
   font-family: inherit;
   font-weight: 600;
   line-height: inherit;
-  cursor: pointer;
+  cursor: default;
   vertical-align: baseline;
   transition: background 0.15s;
 }
 
-.welcome-panel__inline-btn:hover {
+.welcome-panel__inline-btn--interactive {
+  cursor: pointer;
+}
+
+.welcome-panel__inline-btn--interactive:hover:not(:disabled) {
   background: var(--element-bg-subtle);
 }
 
diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.tsx b/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
index df1cd0ea..2283a6ab 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
@@ -198,7 +198,7 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
                 {t('welcome.noWorkspaceHint')}
                 <button
                   type="button"
-                  className="welcome-panel__inline-btn"
+                  className="welcome-panel__inline-btn welcome-panel__inline-btn--interactive"
                   onClick={() => { void handleOpenOtherFolder(); }}
                   disabled={isSelectingWorkspace}
                 >
@@ -216,7 +216,7 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
                     <span className="welcome-panel__workspace-anchor" ref={workspaceDropdownRef}>
                       <button
                         type="button"
-                        className={`welcome-panel__inline-btn${workspaceDropdownOpen ? ' welcome-panel__inline-btn--active' : ''}`}
+                        className={`welcome-panel__inline-btn welcome-panel__inline-btn--interactive${workspaceDropdownOpen ? ' welcome-panel__inline-btn--active' : ''}`}
                         onClick={() => setWorkspaceDropdownOpen(v => !v)}
                         disabled={isSelectingWorkspace}
                         title={currentWorkspace?.rootPath}
diff --git a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
index c8f3ff8e..d1350d78 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
@@ -1,7 +1,36 @@
 /**
  * Git tool display styles based on BaseToolCard.
+ * Expanded layout aligns with TerminalToolCard (bash): scrollable output + full-width footer bar.
  */
 
+@use './_tool-card-common.scss';
+
+.base-tool-card-wrapper.git-tool-display .base-tool-card-header {
+  cursor: pointer;
+}
+
+.base-tool-card-wrapper.git-tool-display .git-result-footer {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-bottom: -10px;
+  padding: 6px 10px;
+  border-radius: 0 0 7px 7px;
+}
+
+.base-tool-card-wrapper.git-tool-display:hover {
+  .git-result-output {
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.12));
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.22));
+    }
+
+    scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.12)) transparent;
+  }
+}
+
 .git-tool-display {
   .git-icon {
     color: var(--color-text-secondary);
@@ -30,7 +59,7 @@
     }
 
     .command-text {
-      font-family: 'JetBrains Mono', 'Fira Code', monospace;
+      font-family: var(--tool-card-font-mono);
       font-size: 12px;
       font-weight: 500;
       color: var(--tool-card-text-primary);
@@ -48,7 +77,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 200px;
-    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-family: var(--tool-card-font-mono);
   }
 
   .preview-toggle-btn {
@@ -82,87 +111,123 @@
     }
   }
 
-  .git-expanded-content {
-    padding: 12px 16px;
-    border-top: 1px solid var(--vscode-editorWidget-border);
+  .git-result-container {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
 
-    .git-meta-info {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 12px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-
-      .meta-item {
-        font-size: 11px;
-        color: var(--tool-card-text-secondary);
-        font-family: 'JetBrains Mono', 'Fira Code', monospace;
-
-        &.success {
-          color: rgba(34, 197, 94, 0.9);
-        }
-
-        &.error {
-          color: rgba(239, 68, 68, 0.9);
-        }
-
-        &.working-dir {
-          max-width: 150px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
+  .git-result-output {
+    margin-bottom: 0;
+    background: transparent;
+    border: none;
+    max-height: 300px;
+    overflow-y: auto;
+  }
 
-    .output-section {
-      &:not(:last-child) {
-        margin-bottom: 12px;
-      }
+  .git-result-output + .git-result-footer {
+    margin-top: 6px;
+    border-top: 1px solid var(--border-subtle);
+  }
 
-      .output-label {
-        font-size: 11px;
-        font-weight: 600;
-        color: var(--tool-card-text-secondary);
-        margin-bottom: 4px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-
-        &.error-label {
-          color: rgba(239, 68, 68, 0.8);
-        }
-      }
+  .git-stderr-block {
+    margin-top: 8px;
+  }
 
-      .output-content {
-        margin: 0;
-        padding: 10px 12px;
-        background: rgba(0, 0, 0, 0.25);
-        border-radius: 6px;
-        font-size: 12px;
-        line-height: 1.6;
-        color: var(--tool-card-text-primary);
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        font-family: 'JetBrains Mono', 'Fira Code', monospace;
-        max-height: 300px;
-        overflow-y: auto;
-
-        &.stdout {
-          // Keep stdout clean: no left border.
-        }
-
-        &.stderr {
-          background: rgba(239, 68, 68, 0.05);
-        }
-
-        &.warning {
-          border-left: 3px solid rgba(234, 179, 8, 0.5);
-          background: rgba(234, 179, 8, 0.05);
-        }
+  .git-output-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 4px;
+  }
 
-      }
+  .git-output-block {
+    margin: 0;
+    padding: 8px 10px;
+    background: var(--color-bg-scene);
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: var(--tool-card-font-mono);
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .git-output-stdout {
+    width: 100%;
+  }
+
+  .git-output-stderr {
+    background: rgba(239, 68, 68, 0.06);
+    color: var(--color-text-primary);
+  }
+
+  .git-output-warning {
+    border-left: 3px solid rgba(234, 179, 8, 0.45);
+    background: rgba(234, 179, 8, 0.06);
+  }
+
+  .git-result-footer {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    line-height: 1.2;
+    background: var(--element-bg-subtle, rgba(255, 255, 255, 0.05));
+    box-sizing: border-box;
+  }
+
+  .git-result-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .git-result-value {
+    font-family: var(--tool-card-font-mono);
+    font-size: 11px;
+    color: var(--color-text-primary);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.2;
+  }
+
+  .git-exit-code {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    font-size: 9px;
+    font-weight: 600;
+    font-family: var(--tool-card-font-mono);
+    line-height: 1.2;
+    margin-left: auto;
+    background: transparent;
+
+    &.success {
+      color: var(--color-text-muted);
     }
+
+    &.error {
+      color: var(--color-error);
+    }
+  }
+
+  .git-execution-time {
+    font-size: 9px;
+    color: var(--color-text-muted);
+    font-family: var(--tool-card-font-mono);
+    line-height: 1.2;
   }
 
   .error-content {
@@ -174,7 +239,7 @@
       color: rgba(239, 68, 68, 0.9);
       font-size: 13px;
       margin-bottom: 8px;
-      font-family: 'JetBrains Mono', 'Fira Code', monospace;
+      font-family: var(--tool-card-font-mono);
       white-space: pre-wrap;
       word-break: break-word;
     }
@@ -193,7 +258,7 @@
       .error-operation,
       .error-args {
         color: rgba(239, 68, 68, 0.7);
-        font-family: 'JetBrains Mono', 'Fira Code', monospace;
+        font-family: var(--tool-card-font-mono);
       }
     }
   }
diff --git a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx
index e579f28a..2608e647 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx
@@ -271,44 +271,55 @@ export const GitToolDisplay: React.FC<ToolCardProps> = ({
     if (!resultData) return null;
 
     const { stdout, stderr, exit_code, execution_time_ms, working_directory } = resultData;
+    const hasStdout = Boolean(stdout?.trim());
+    const hasStderr = Boolean(stderr?.trim());
+    const showFooter =
+      exit_code !== undefined ||
+      execution_time_ms !== undefined ||
+      Boolean(working_directory?.trim());
 
     return (
-      <div className="git-expanded-content">
-        <div className="git-meta-info">
-          {exit_code !== undefined && (
-            <span className={`meta-item ${exit_code === 0 ? 'success' : 'error'}`}>
-              {t('toolCards.git.exitCode', { code: exit_code })}
-            </span>
-          )}
-          {execution_time_ms !== undefined && (
-            <span className="meta-item">
-              {t('toolCards.git.duration', { time: execution_time_ms >= 1000 
-                ? `${(execution_time_ms / 1000).toFixed(2)}s` 
-                : `${execution_time_ms}ms` })}
-            </span>
-          )}
-          {working_directory && (
-            <span className="meta-item working-dir" title={working_directory}>
-              {t('toolCards.git.directory', { dir: working_directory.split(/[/\\]/).pop() })}
-            </span>
-          )}
-        </div>
-
-        {stdout && (
-          <div className="output-section">
-            <div className="output-label">{t('toolCards.git.output')}</div>
-            <pre className="output-content stdout">{stdout}</pre>
+      <div className="git-result-container">
+        {(hasStdout || hasStderr) && (
+          <div className="git-result-output">
+            {hasStdout && <pre className="git-output-block git-output-stdout">{stdout}</pre>}
+            {hasStderr && (
+              <div className="git-stderr-block">
+                <div className="git-output-label">
+                  {resultData.success ? t('toolCards.git.warning') : t('toolCards.git.error')}
+                </div>
+                <pre
+                  className={`git-output-block ${resultData.success ? 'git-output-warning' : 'git-output-stderr'}`}
+                >
+                  {stderr}
+                </pre>
+              </div>
+            )}
           </div>
         )}
 
-        {stderr && (
-          <div className="output-section">
-            <div className="output-label error-label">
-              {resultData.success ? t('toolCards.git.warning') : t('toolCards.git.error')}
-            </div>
-            <pre className={`output-content ${resultData.success ? 'warning' : 'stderr'}`}>
-              {stderr}
-            </pre>
+        {showFooter && (
+          <div className="git-result-footer">
+            {working_directory?.trim() && (
+              <>
+                <span className="git-result-label">{t('toolCards.terminal.workingDirectory')}</span>
+                <span className="git-result-value" title={working_directory}>
+                  {working_directory}
+                </span>
+              </>
+            )}
+            {exit_code !== undefined && (
+              <span className={`git-exit-code ${exit_code === 0 ? 'success' : 'error'}`}>
+                {t('toolCards.git.exitCode', { code: exit_code })}
+              </span>
+            )}
+            {execution_time_ms !== undefined && (
+              <span className="git-execution-time">
+                {execution_time_ms >= 1000
+                  ? `${(execution_time_ms / 1000).toFixed(2)}s`
+                  : `${execution_time_ms}ms`}
+              </span>
+            )}
           </div>
         )}
       </div>
@@ -340,7 +351,7 @@ export const GitToolDisplay: React.FC<ToolCardProps> = ({
         onClick={handleCardClick}
         className="git-tool-display"
         header={renderHeader()}
-        expandedContent={renderExpandedContent()}
+        expandedContent={isExpanded ? renderExpandedContent() : null}
         errorContent={renderErrorContent()}
         isFailed={(isFailed && status === 'error') || undefined}
         requiresConfirmation={requiresConfirmation && !userConfirmed}