refactor(web-ui): Modal, nav search, welcome panel, Git tool card

src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx

@@ -88,27 +88,37 @@ 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;
       items.push({ kind: 'assistant', id: w.id, label: displayName, sublabel: w.description });
     }
 
     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));

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,14 +128,22 @@
         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 {
     display: flex;
     align-items: center;
     gap: 6px;
     min-width: 0;
-    flex: 1;
+    flex: 0 1 auto;
   }
 
   &__title {
@@ -144,26 +159,29 @@
     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;
     color: var(--color-text-muted);
     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 {

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 && (

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"

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);
 }
 

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}