web: busy character animation

web/src/App.tsx

@@ -7,6 +7,7 @@ import { AuthScreen } from "@/components/auth/auth-screen";
 import { ChatAttachmentList } from "@/components/chat/chat-attachment-list";
 import { ChatMessagesPanel } from "@/components/chat/chat-messages-panel";
 import { SearchResultsPanel } from "@/components/search/search-results-panel";
+import { SybilCharacter } from "@/components/sybil-character";
 import {
   createChat,
   createChatFromSearch,
@@ -1999,12 +2000,9 @@ export default function App() {
                 Sybil Web{authMode ? ` (${authMode === "open" ? "open mode" : "token mode"})` : ""}
               </p>
             </div>
-            <img
-              aria-hidden="true"
-              alt=""
-              className="absolute right-4 top-3 aspect-square h-[calc(100%-1.5rem)] rounded-xl border border-violet-200/24 bg-white/6 object-cover p-1 shadow-[inset_0_1px_0_hsl(252_90%_86%/0.12),0_10px_24px_hsl(240_80%_2%/0.3)]"
-              draggable={false}
-              src="/character-idle.gif"
+            <SybilCharacter
+              className="absolute right-4 top-3 h-[calc(100%-1.5rem)]"
+              isBusy={isSending}
             />
           </div>