fix(ui): chat polish — floating bar, dotted bg, tool icon, flash fix

- Chat input bar: floating with backdrop blur and rounded corners
- Chat thread: dotted background pattern matching kanban board
- Tool call cards: blue Wrench icon for completed (was green Check)
- Memo wrap ChatSidebar, SessionSwitcher, ChatThread to prevent re-renders
- Keep old messages visible during session switch to prevent flash

ui/web/src/components/chat/chat-input.tsx

@@ -69,7 +69,7 @@ export function ChatInput({ onSend, onAbort, isRunning, disabled }: ChatInputPro
 
   return (
     <div
-      className="border-t bg-background safe-bottom"
+      className="mx-3 mb-3 rounded-xl border bg-background/95 backdrop-blur-sm shadow-sm safe-bottom"
       style={{ paddingBottom: `calc(env(safe-area-inset-bottom) + var(--keyboard-height, 0px))` }}
     >
       {/* Attached files preview */}

ui/web/src/components/chat/session-switcher.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { MessageSquare } from "lucide-react";
 import { formatRelativeTime } from "@/lib/format";
@@ -40,7 +41,7 @@ function sessionLabel(session: SessionInfo): string {
   return scope.length > 24 ? scope.slice(0, 21) + "…" : scope;
 }
 
-export function SessionSwitcher({ sessions, activeKey, onSelect, loading }: SessionSwitcherProps) {
+export const SessionSwitcher = memo(function SessionSwitcher({ sessions, activeKey, onSelect, loading }: SessionSwitcherProps) {
   const { t } = useTranslation("common");
 
   if (sessions.length === 0 && loading) {
@@ -90,4 +91,4 @@ export function SessionSwitcher({ sessions, activeKey, onSelect, loading }: Sess
       })}
     </div>
   );
-}
+});

ui/web/src/components/chat/tool-call-card.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Wrench, Check, AlertTriangle, Loader2, ChevronDown, ChevronRight, Zap } from "lucide-react";
+import { Wrench, AlertTriangle, Loader2, ChevronDown, ChevronRight, Zap } from "lucide-react";
 import type { ToolStreamEntry } from "@/types/chat";
 
 const isSkillTool = (name: string) => name === "use_skill";
@@ -89,7 +89,7 @@ function ToolIcon({ phase, isSkill }: { phase: ToolStreamEntry["phase"]; isSkill
   }
   switch (phase) {
     case "calling": return <Loader2 className={`${cls} animate-spin text-blue-500`} />;
-    case "completed": return <Check className={`${cls} text-green-500`} />;
+    case "completed": return <Wrench className={`${cls} text-blue-500`} />;
     case "error": return <AlertTriangle className={`${cls} text-red-500`} />;
     default: return <Wrench className={`${cls} text-muted-foreground`} />;
   }
@@ -102,7 +102,7 @@ function PhaseLabel({ phase, isSkill }: { phase: ToolStreamEntry["phase"]; isSki
     : { calling: t("toolRunning"), completed: t("toolDone"), error: t("toolFailed") };
   const colors: Record<string, string> = {
     calling: "text-blue-500",
-    completed: "text-green-500",
+    completed: "text-blue-500",
     error: "text-red-500",
   };
   return <span className={`text-[11px] ${colors[phase] ?? "text-muted-foreground"}`}>{labels[phase] ?? phase}</span>;

ui/web/src/pages/chat/chat-sidebar.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -15,7 +16,7 @@ interface ChatSidebarProps {
   onNewChat: () => void;
 }
 
-export function ChatSidebar({
+export const ChatSidebar = memo(function ChatSidebar({
   agentId,
   onAgentChange,
   sessions,
@@ -55,4 +56,4 @@ export function ChatSidebar({
       </div>
     </div>
   );
-}
+});

ui/web/src/pages/chat/chat-thread.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Bot } from "lucide-react";
 import { MessageBubble } from "@/components/chat/message-bubble";
@@ -70,7 +70,7 @@ function buildDisplayItems(messages: ChatMessage[]): DisplayItem[] {
   return items;
 }
 
-export function ChatThread({
+export const ChatThread = memo(function ChatThread({
   messages, streamText, thinkingText, toolStream, blockReplies,
   activity, teamTasks, isRunning, loading, scrollTrigger = 0,
 }: ChatThreadProps) {
@@ -101,7 +101,15 @@ export function ChatThread({
   }
 
   return (
-    <div ref={ref} onScroll={onScroll} className="flex-1 overflow-y-auto overscroll-contain px-4 py-4">
+    <div
+      ref={ref}
+      onScroll={onScroll}
+      className="flex-1 overflow-y-auto overscroll-contain px-4 py-4"
+      style={{
+        backgroundImage: "radial-gradient(circle, var(--color-border) 1px, transparent 1px)",
+        backgroundSize: "24px 24px",
+      }}
+    >
       <div className="mx-auto max-w-3xl space-y-3">
         {displayItems.map((item) => {
           switch (item.kind) {
@@ -127,7 +135,7 @@ export function ChatThread({
       </div>
     </div>
   );
-}
+});
 
 /** Renders multiple consecutive tool-only messages as a single compact card */
 function MergedToolGroup({ msgs }: { msgs: ChatMessage[] }) {

ui/web/src/pages/chat/hooks/use-chat-messages.ts

@@ -35,12 +35,12 @@ export function useChatMessages(sessionKey: string, agentId: string) {
   const activityRef = useRef<RunActivity | null>(null);
   const blockRepliesRef = useRef<ChatMessage[]>([]);
 
-  // Synchronously clear state during render when session changes.
-  // This prevents a flash of old messages before the useEffect fires.
+  // Clear streaming/run state when session changes, but keep messages
+  // until new history loads to avoid a flash of empty content.
   const [prevKey, setPrevKey] = useState(sessionKey);
   if (sessionKey !== prevKey) {
     setPrevKey(sessionKey);
-    setMessages([]);
+    // Don't clear messages — they'll be replaced by loadHistory()
     setStreamText(null);
     setThinkingText(null);
     setToolStream([]);