feat(ui): improve visual polish, responsiveness, and accessibility (#58)

* feat(ui): improve visual polish, responsiveness, and UX consistency

- GatewayConnectScreen: replace hardcoded text-white* with semantic
  foreground/muted-foreground tokens so the connect form is readable
  in both light and dark modes
- HeaderBar: show gateway status chip for "connected" state in addition
  to "connecting", giving users clear visual feedback once connected
- FleetSidebar: add aria-label and aria-pressed to agent row buttons
  for screen-reader accessibility
- HQSidebar: add role=tablist/tab/tabpanel, aria-selected, aria-controls,
  and aria-labelledby to the headquarters panel tabs
- OfficePage: replace Suspense fallback={null} with a themed spinner
  so users see feedback instead of a blank screen during initial load

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(office): widen agent nameplate to prevent name truncation

- Expand background plane from 0.68 to 1.1 width
- Increase maxWidth from 0.56 to 1.0
- Slightly reduce fontSize 0.1 to 0.09 for better fit
- Add whiteSpace nowrap to prevent wrapping
- Truncate names >14 chars with ellipsis for very long agent names

---------

Co-authored-by: Claw3D UI Bot <ui-improvements@claw3d.local>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/office/page.tsx

@@ -10,12 +10,29 @@ const readDebugFlag = (value: string | undefined): boolean => {
   return ENABLED_RE.test(normalized);
 };
 
+function OfficeLoadingFallback() {
+  return (
+    <div
+      className="flex h-full w-full items-center justify-center bg-background"
+      aria-label="Loading office"
+      role="status"
+    >
+      <div className="flex flex-col items-center gap-3">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-primary" />
+        <p className="font-mono text-[11px] tracking-[0.08em] text-muted-foreground">
+          Loading…
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export default function OfficePage() {
   const showOpenClawConsole = readDebugFlag(process.env.DEBUG);
 
   return (
     <AgentStoreProvider>
-      <Suspense fallback={null}>
+      <Suspense fallback={<OfficeLoadingFallback />}>
         <OfficeScreen showOpenClawConsole={showOpenClawConsole} />
       </Suspense>
     </AgentStoreProvider>