fix: improve web chat scroll and text

ui/src/styles/base.css

@@ -12,6 +12,7 @@
   --chrome: rgba(10, 14, 20, 0.75);
   --chrome-strong: rgba(10, 14, 20, 0.82);
   --text: rgba(246, 248, 252, 0.95);
+  --chat-text: rgba(246, 248, 252, 0.88);
   --muted: rgba(210, 218, 230, 0.62);
   --border: rgba(255, 255, 255, 0.08);
   --accent: #ff7a3d;
@@ -40,6 +41,7 @@
   --chrome: rgba(255, 255, 255, 0.72);
   --chrome-strong: rgba(255, 255, 255, 0.82);
   --text: rgba(20, 24, 36, 0.96);
+  --chat-text: rgba(20, 24, 36, 0.82);
   --muted: rgba(50, 58, 76, 0.6);
   --border: rgba(16, 24, 40, 0.12);
   --accent: #ff7a3d;

ui/src/styles/components.css

@@ -504,6 +504,7 @@
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   word-break: break-word;
+  color: var(--chat-text);
 }
 
 .chat-stamp {

ui/src/ui/app-render.ts

@@ -213,6 +213,7 @@ export function renderApp(state: AppViewState) {
               onPasswordChange: (next) => (state.password = next),
               onSessionKeyChange: (next) => {
                 state.sessionKey = next;
+                state.chatMessage = "";
                 state.applySettings({ ...state.settings, sessionKey: next });
               },
               onRefresh: () => state.loadOverview(),

ui/src/ui/app.ts

@@ -168,6 +168,7 @@ export class ClawdisApp extends LitElement {
 
   client: GatewayBrowserClient | null = null;
   private chatScrollFrame: number | null = null;
+  private chatScrollTimeout: number | null = null;
   private nodesPollInterval: number | null = null;
   basePath = "";
   private popStateHandler = () => this.onPopState();
@@ -202,6 +203,7 @@ export class ClawdisApp extends LitElement {
       (changed.has("chatMessages") ||
         changed.has("chatStream") ||
         changed.has("chatLoading") ||
+        changed.has("chatMessage") ||
         changed.has("tab"))
     ) {
       this.scheduleChatScroll();
@@ -241,11 +243,21 @@ export class ClawdisApp extends LitElement {
 
   private scheduleChatScroll() {
     if (this.chatScrollFrame) cancelAnimationFrame(this.chatScrollFrame);
+    if (this.chatScrollTimeout != null) {
+      clearTimeout(this.chatScrollTimeout);
+      this.chatScrollTimeout = null;
+    }
     this.chatScrollFrame = requestAnimationFrame(() => {
       this.chatScrollFrame = null;
       const container = this.querySelector(".chat-thread") as HTMLElement | null;
       if (!container) return;
       container.scrollTop = container.scrollHeight;
+      this.chatScrollTimeout = window.setTimeout(() => {
+        this.chatScrollTimeout = null;
+        const latest = this.querySelector(".chat-thread") as HTMLElement | null;
+        if (!latest) return;
+        latest.scrollTop = latest.scrollHeight;
+      }, 120);
     });
   }
 

ui/src/ui/controllers/chat.ts

@@ -46,6 +46,7 @@ export async function sendChat(state: ChatState) {
   if (!msg) return;
 
   state.chatSending = true;
+  state.chatMessage = "";
   state.lastError = null;
   const runId = crypto.randomUUID();
   state.chatRunId = runId;
@@ -57,10 +58,10 @@ export async function sendChat(state: ChatState) {
       deliver: false,
       idempotencyKey: runId,
     });
-    state.chatMessage = "";
   } catch (err) {
     state.chatRunId = null;
     state.chatStream = null;
+    state.chatMessage = msg;
     state.lastError = String(err);
   } finally {
     state.chatSending = false;