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/features/office/components/HQSidebar.tsx

@@ -137,7 +137,11 @@ export function HQSidebar({
           </div>
 
           {!railOnly ? (
-            <div className="grid grid-cols-3 border-b border-cyan-500/15">
+            <div
+              role="tablist"
+              aria-label="Headquarters panels"
+              className="grid grid-cols-3 border-b border-cyan-500/15"
+            >
               {PRIMARY_TABS.map((tab) => {
                 const isActive = tab === activeTab;
                 const showBadge = tab === "inbox" && inboxCount > 0;
@@ -145,6 +149,10 @@ export function HQSidebar({
                   <button
                     key={tab}
                     type="button"
+                    role="tab"
+                    aria-selected={isActive}
+                    aria-controls={`hq-panel-${tab}`}
+                    id={`hq-tab-${tab}`}
                     onClick={() => onTabChange(tab)}
                     className={`flex items-center justify-center gap-1 border-r border-cyan-500/10 px-2 py-2.5 font-mono text-[11px] uppercase tracking-[0.18em] transition-colors last:border-r-0 ${
                       isActive
@@ -154,7 +162,7 @@ export function HQSidebar({
                   >
                     <span>{TAB_LABELS[tab]}</span>
                     {showBadge ? (
-                      <span className="rounded bg-cyan-500/15 px-1.5 py-0.5 text-[10px] text-cyan-300">
+                      <span className="rounded bg-cyan-500/15 px-1.5 py-0.5 text-[10px] text-cyan-300" aria-label={`${inboxCount} unread`}>
                         {inboxCount}
                       </span>
                     ) : null}
@@ -164,7 +172,14 @@ export function HQSidebar({
             </div>
           ) : null}
 
-          <div className="min-h-0 flex-1 overflow-hidden">{activePanel}</div>
+          <div
+            role="tabpanel"
+            id={`hq-panel-${activeTab}`}
+            aria-labelledby={`hq-tab-${activeTab}`}
+            className="min-h-0 flex-1 overflow-hidden"
+          >
+            {activePanel}
+          </div>
         </div>
       ) : null}
     </aside>