fix(webui): polish session titles and status

webui/src/components/ChatList.tsx

@@ -7,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { deriveTitle } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import type { ChatSummary } from "@/lib/types";
 
@@ -64,8 +65,11 @@ export function ChatList({
                 const fallbackTitle = t("chat.fallbackTitle", {
                   id: s.chatId.slice(0, 6),
                 });
-                const rawLabel = (s.title || s.preview)?.trim();
-                const title = rawLabel || fallbackTitle;
+                const generatedTitle = s.title?.trim() || "";
+                const title =
+                  generatedTitle || deriveTitle(s.preview, t("chat.newChat"));
+                const tooltipTitle =
+                  generatedTitle || deriveTitle(s.preview, fallbackTitle);
                 return (
                   <li key={s.key} className="min-w-0">
                     <div
@@ -79,7 +83,7 @@ export function ChatList({
                       <button
                         type="button"
                         onClick={() => onSelect(s.key)}
-                        title={rawLabel || fallbackTitle}
+                        title={tooltipTitle}
                         className="min-w-0 flex-1 overflow-hidden py-1.5 text-left"
                       >
                         <span className="block w-full truncate font-medium leading-5">{title}</span>

webui/src/components/ConnectionBadge.tsx

@@ -36,21 +36,25 @@ export function ConnectionBadge() {
     status === "connecting" ||
     status === "reconnecting" ||
     status === "error";
+  const label = t(`connection.${status}`);
   return (
     <span
       className={cn(
-        "inline-flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-[11px] font-medium transition-colors",
+        "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors",
+        "text-muted-foreground/70 hover:bg-sidebar-accent/65",
         meta.color,
       )}
       aria-live="polite"
+      role="status"
+      title={label}
     >
-      <span className="relative flex h-1.5 w-1.5" aria-hidden>
+      <span className="relative flex h-2 w-2" aria-hidden>
         {pulsing && (
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" />
         )}
-        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+        <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
       </span>
-      {t(`connection.${status}`)}
+      <span className="sr-only">{label}</span>
     </span>
   );
 }

webui/src/components/Sidebar.tsx

@@ -117,12 +117,12 @@ export function Sidebar(props: SidebarProps) {
         />
       </div>
       <Separator className="bg-sidebar-border/50" />
-      <div className="space-y-1 px-2.5 py-2.5 text-xs">
+      <div className="flex items-center gap-1 px-2.5 py-2.5 text-xs">
         <Button
           type="button"
           variant="ghost"
           onClick={props.onOpenSettings}
-          className="h-8 w-full justify-start gap-2 rounded-full px-2.5 text-[12.5px] font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground"
+          className="h-8 min-w-0 flex-1 justify-start gap-2 rounded-full px-2.5 text-[12.5px] font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground"
         >
           <Settings className="h-3.5 w-3.5" aria-hidden />
           {t("sidebar.settings")}

webui/src/components/thread/ThreadShell.tsx

@@ -167,8 +167,9 @@ export function ThreadShell({
 
   useEffect(() => {
     if (!chatId) return;
-    return client.onSessionUpdate((updatedChatId) => {
+    return client.onSessionUpdate((updatedChatId, scope) => {
       if (updatedChatId !== chatId) return;
+      if (scope === "metadata") return;
       pendingCanonicalHydrateRef.current.add(chatId);
       refreshHistory();
     });