fix(web-ui): flow chat scroll bar, tool cards, AI rules config

src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss

@@ -159,6 +159,7 @@
     gap: 4px;
     margin-top: auto;
     padding-top: $size-gap-2;
+    margin-bottom: $size-gap-2;
   }
 
   &__tag {

src/web-ui/src/flow_chat/components/ScrollToLatestBar.scss

@@ -30,8 +30,7 @@
 
     // Keep content layer within visible area
     .scroll-to-latest-bar__content {
-      top: auto;
-      bottom: 4px;
+      bottom: 14px;
     }
   }
 
@@ -61,76 +60,68 @@
   }
 
   // ========== Divider content layer ==========
+  // Default: sit just above ChatInput (~80px tall + 16px bottom gap + 14px clearance)
   &__content {
     position: absolute;
-    top: 4px;
+    bottom: 110px;
     left: 0;
     right: 0;
     pointer-events: auto;
 
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 12px;
-    padding: 0 24px;
 
-    transition: opacity 0.2s ease;
+    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
   }
 
-  // ========== Divider ==========
-  &__line {
-    flex: 1;
-    max-width: 120px;
-    height: 1px;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(96, 165, 250, 0.35) 50%,
-      transparent 100%
-    );
+  // ========== Content position: input collapsed ==========
+  &--input-collapsed &__content {
+    // Pill ~42px + 16px gap + 14px clearance
+    bottom: 72px;
   }
 
-  // ========== Hint text ==========
-  &__text {
-    font-size: 11px;
-    font-weight: 400;
-    color: rgba(96, 165, 250, 0.6);
-    white-space: nowrap;
-    letter-spacing: 0.05em;
-    user-select: none;
+  // ========== Circle arrow button ==========
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px solid var(--border-base);
+    background: var(--color-bg-scene);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    pointer-events: none;
+    padding: 0;
 
-    transition: color 0.2s ease;
+    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
   }
 
   // ========== Hover state ==========
   &:hover {
-    .scroll-to-latest-bar__text {
-      color: rgba(96, 165, 250, 0.85);
-    }
-
-    .scroll-to-latest-bar__line {
-      background: linear-gradient(
-        90deg,
-        transparent 0%,
-        rgba(96, 165, 250, 0.5) 50%,
-        transparent 100%
-      );
+    .scroll-to-latest-bar__btn {
+      border-color: var(--border-medium);
+      color: var(--color-text-primary);
+      transform: translateY(1px);
     }
   }
 
   // ========== Active state ==========
   &:active {
-    .scroll-to-latest-bar__text {
-      color: rgba(96, 165, 250, 0.7);
+    .scroll-to-latest-bar__btn {
+      transform: translateY(2px);
     }
   }
 
   // ========== Focus state ==========
   &:focus-visible {
     outline: none;
 
-    .scroll-to-latest-bar__text {
-      color: rgba(96, 165, 250, 0.9);
+    .scroll-to-latest-bar__btn {
+      border-color: var(--border-strong);
+      color: var(--color-text-primary);
     }
   }
 }
@@ -144,17 +135,9 @@
       height: 70px;
     }
 
-    &__content {
-      gap: 10px;
-      padding: 0 16px;
-    }
-
-    &__line {
-      max-width: 80px;
-    }
-
-    &__text {
-      font-size: 10px;
+    &__btn {
+      width: 26px;
+      height: 26px;
     }
   }
 }

src/web-ui/src/flow_chat/components/ScrollToLatestBar.tsx

@@ -63,9 +63,11 @@ export const ScrollToLatestBar: React.FC<ScrollToLatestBarProps> = ({
       <div className="scroll-to-latest-bar__gradient" />
 
       <div className="scroll-to-latest-bar__content">
-        <span className="scroll-to-latest-bar__line" />
-        <span className="scroll-to-latest-bar__text">{t('scroll.clickToLatest')}</span>
-        <span className="scroll-to-latest-bar__line" />
+        <button className="scroll-to-latest-bar__btn" aria-hidden="true" tabIndex={-1}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 3.5V12.5M8 12.5L4 8.5M8 12.5L12 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
       </div>
     </div>
   );

src/web-ui/src/flow_chat/services/flow-chat-manager/MessageModule.ts

@@ -168,18 +168,19 @@ export async function sendMessage(
     });
 
     const currentAgentType = agentType || session.mode || 'agentic';
-    await syncSessionModelSelection(context, sessionId, currentAgentType);
 
-    const updatedSession = context.flowChatStore.getState().sessions.get(sessionId);
-    if (!updatedSession) {
-      throw new Error(`Session lost after adding dialog turn: ${sessionId}`);
-    }
-
     try {
       await ensureBackendSession(context, sessionId);
     } catch (createError: any) {
       log.warn('Backend session create/restore failed', { sessionId: sessionId, error: createError });
     }
+
+    await syncSessionModelSelection(context, sessionId, currentAgentType);
+
+    const updatedSession = context.flowChatStore.getState().sessions.get(sessionId);
+    if (!updatedSession) {
+      throw new Error(`Session lost after adding dialog turn: ${sessionId}`);
+    }
 
     context.contentBuffers.set(sessionId, new Map());
     context.activeTextItems.set(sessionId, new Map());

src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss

@@ -29,7 +29,9 @@
       inset 0 2px 4px rgba(0, 0, 0, 0.4);
   }
 
-  &.has-expanded {
+  /* Divider when body below header: success expanded panel or failed error panel */
+  &:has(> .base-tool-card-expanded),
+  &:has(> .base-tool-card-error) {
     .base-tool-card-header::after {
       content: '';
       position: absolute;
@@ -38,6 +40,8 @@
       right: 0;
       height: 1px;
       background: var(--border-base);
+      pointer-events: none;
+      z-index: 2;
     }
   }
 
@@ -227,6 +231,8 @@
   background: none !important;
   border: none !important;
   box-shadow: none !important;
+  /* Outside the clickable .base-tool-card row; do not inherit pointer from wrapper */
+  cursor: default;
 
   .error-content {
     display: flex;

src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx

@@ -49,7 +49,7 @@ export const BaseToolCard: React.FC<BaseToolCardProps> = ({
     status !== 'error';
 
   return (
-    <div className={`base-tool-card-wrapper ${hasExpandedContent ? 'has-expanded' : ''} ${showConfirmationHighlight ? 'requires-confirmation' : ''} ${className}`}>
+    <div className={`base-tool-card-wrapper ${showConfirmationHighlight ? 'requires-confirmation' : ''} ${className}`}>
       <div 
         className={`base-tool-card status-${status} ${isExpanded ? 'expanded' : ''}`}
         onClick={onClick}

src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss

@@ -8,6 +8,16 @@
 .file-operation-card {
   cursor: pointer;
 
+  /* .status-error sets cursor:default on the card; header remains clickable (toggle error / open editor) */
+  .base-tool-card.status-error {
+    cursor: pointer;
+  }
+
+  /* Ensure header row shows hand; inner triggers (e.g. Tooltip) can otherwise show I-beam/default */
+  .base-tool-card-header {
+    cursor: pointer;
+  }
+
   &.non-clickable {
     cursor: default;
     border-color: var(--border-light, rgba(255, 255, 255, 0.06));
@@ -35,6 +45,10 @@
     .base-tool-card {
       cursor: default;
     }
+
+    .base-tool-card-header {
+      cursor: default;
+    }
   }
 
   .tool-identifier-icon {

src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx

@@ -303,7 +303,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     }
 
     if (isFailed) {
-      setIsErrorExpanded(!isErrorExpanded);
+      setIsErrorExpanded(prev => !prev);
       return;
     }
 

src/web-ui/src/infrastructure/config/components/AIRulesMemoryConfig.scss

@@ -179,19 +179,6 @@
     gap: $size-gap-2;
     margin-top: $size-gap-3;
   }
-
-  &__empty-row {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: $size-gap-3;
-    padding: $size-gap-6 $size-gap-4;
-    color: var(--color-text-muted);
-    font-size: $font-size-sm;
-    p {
-      margin: 0;
-    }
-  }
 }
 
 @keyframes bitfun-ai-rules-config-slide-down {
@@ -221,11 +208,6 @@
     &__form-body {
       gap: $size-gap-2;
     }
-    &__empty-row {
-      flex-direction: column;
-      gap: $size-gap-2;
-      padding: $size-gap-4;
-    }
     &__action-btn {
       width: 24px;
       height: 24px;

src/web-ui/src/infrastructure/config/components/AIRulesMemoryConfig.tsx

@@ -230,10 +230,10 @@ function RulesPanel() {
           <ConfigPageRow label={t('list.loading')} align="center"><span /></ConfigPageRow>
         )}
         {!currentRules.isLoading && rules.length === 0 && (
-          <div className="bitfun-ai-rules-config__empty-row">
-            <p>{t('list.empty.description')}</p>
-            <Button variant="secondary" size="small" onClick={() => handleAdd(level)}>
-              <Plus size={14} /> {t('form.actions.add')}
+          <div className="bitfun-collection-empty">
+            <p>{t('list.empty.title')}</p>
+            <Button variant="dashed" size="small" onClick={() => handleAdd(level)}>
+              <Plus size={14} /> {t('toolbar.addTooltip')}
             </Button>
           </div>
         )}