feat(webui): animate active tasks and add model search

webui/frontend/app/app.css

@@ -369,4 +369,102 @@ a {
 .msa-loading-defer {
   opacity: 0;
   animation: msa-loading-reveal 150ms ease-out 250ms forwards;
+}
+
+@keyframes msa-agent-gaze-working {
+  0%,
+  8%,
+  28%,
+  43%,
+  67%,
+  76%,
+  94%,
+  100% {
+    transform: translate(0, 0);
+  }
+
+  14%,
+  22% {
+    transform: translate(1.15px, 0.25px);
+  }
+
+  49%,
+  61% {
+    transform: translate(-1.15px, -0.25px);
+  }
+
+  82%,
+  90% {
+    transform: translate(0.3px, 1.25px);
+  }
+}
+
+@keyframes msa-agent-left-eye-working {
+  0%,
+  30%,
+  38%,
+  47%,
+  67%,
+  76%,
+  94%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  34% {
+    transform: scaleY(0.12);
+  }
+
+  53%,
+  63% {
+    transform: scaleY(1.15);
+  }
+}
+
+@keyframes msa-agent-right-eye-working {
+  0%,
+  30%,
+  38%,
+  47%,
+  67%,
+  76%,
+  94%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  34% {
+    transform: scaleY(0.12);
+  }
+
+  53%,
+  63% {
+    transform: scaleY(1.15);
+  }
+}
+
+.msa-agent-working .task-icon-eyes,
+.msa-agent-working .task-icon-eye {
+  transform-box: fill-box;
+  transform-origin: center;
+  will-change: transform;
+}
+
+.msa-agent-working .task-icon-eyes {
+  animation: msa-agent-gaze-working 6.4s ease-in-out infinite;
+}
+
+.msa-agent-working .task-icon-eye-left {
+  animation: msa-agent-left-eye-working 6.4s ease-in-out infinite;
+}
+
+.msa-agent-working .task-icon-eye-right {
+  animation: msa-agent-right-eye-working 6.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .msa-agent-working .task-icon-eyes,
+  .msa-agent-working .task-icon-eye {
+    animation: none;
+  }
 }

webui/frontend/app/components/common/Composer.tsx

@@ -994,7 +994,11 @@ export function Composer({
               className="-mx-2 flex w-[calc(100%+1rem)] cursor-pointer items-center justify-between gap-2 rounded-lg border-none bg-transparent px-2 py-1 text-left outline-none"
             >
               <span className="flex shrink-0 items-center gap-1">
-                <IconTask className="h-5.5 w-5.5" />
+                <span
+                  className={`flex h-5.5 w-5.5 items-center justify-center ${planLive ? 'msa-agent-working' : ''}`}
+                >
+                  <IconTask className="h-5.5 w-5.5" />
+                </span>
                 <span className="text-sm font-medium text-msa-text-1">
                   {t.home.thinkingTasks}
                 </span>

webui/frontend/app/components/messages/TurnProcess.tsx

@@ -82,7 +82,11 @@ export function TurnProcess({
     return (
       <div className="space-y-3">
         <div className="flex items-center gap-1.5 text-sm font-medium text-msa-text-3">
-          <TaskIcon className="h-5 w-5 shrink-0" />
+          <span
+            className={`flex h-5 w-5 shrink-0 items-center justify-center ${live ? 'msa-agent-working' : ''}`}
+          >
+            <TaskIcon className="h-5 w-5" />
+          </span>
           <span>
             {t.chat.processing}
             {timing}

webui/frontend/app/routes/settings/models.tsx

@@ -198,6 +198,7 @@ export default function ModelsSettings() {
                 label: p.name,
                 disabled: !p.enabled
               }))}
+              showSearch={{ optionFilterProp: 'label' }}
               // The closed box shows the logo + name; the tags (built-in pill,
               // key glyph) ride the dropdown OPTIONS, where the user is choosing
               // and the "is this ready to use" signal actually helps. Both are
@@ -240,6 +241,7 @@ export default function ModelsSettings() {
               value={resolvedDefaultModelId}
               onChange={(v) => updateSettings({ default_model_id: v })}
               options={defaultModelOptions}
+              showSearch={{ optionFilterProp: 'label' }}
               open={defaultModelOpen}
               onOpenChange={setDefaultModelOpen}
               // A provider with no models leaves this picker with nothing to