feat(web): polish responsive accessible interface

apps/web/src/App.tsx

@@ -9,6 +9,7 @@ import { SkillsPanel } from "./components/skills/SkillsPanel.js";
 import { EventTimeline } from "./components/timeline/EventTimeline.js";
 import { ApprovalDialog } from "./components/approvals/ApprovalDialog.js";
 import { ModelSettings, type ModelView } from "./components/settings/ModelSettings.js";
+import { CompletionAnnouncer } from "./components/common/CompletionAnnouncer.js";
 import { HarnessClientStore } from "./store/harness-client-store.js";
 
 type AppStore = HarnessRuntimeStore & {
@@ -60,6 +61,10 @@ export function App({ store: suppliedStore, autoStart = true, modelConfigured: s
   const busy = Object.values(snapshot.runs).some((run) => run.status === "running");
   const approvalPending = Object.values(snapshot.approvals).some((approval) => approval.status === "pending");
   const pendingApproval = Object.values(snapshot.approvals).find((approval) => approval.status === "pending");
+  const latestAssistantStatus = [...snapshot.messageOrder]
+    .reverse()
+    .map((messageId) => snapshot.messages[messageId])
+    .find((message) => message?.role === "assistant")?.status;
 
   useEffect(() => {
     if (!autoStart) return undefined;
@@ -127,6 +132,7 @@ export function App({ store: suppliedStore, autoStart = true, modelConfigured: s
           });
         }}
       />
+      <CompletionAnnouncer status={latestAssistantStatus} />
     </AssistantRuntimeProvider>
   );
 }