fix(documents-ui): a11y, mobile, realtime lift, type-safety, UI polish

- A2: lift useRealtimeInvalidation to DocumentsHub (covers all 3 render modes)
- B1-B4: aria-label, aria-pressed, aria-expanded, Lock SVG aria-hidden
- C1-C7: Sheet wrap for mobile sidebar, border axis fix, 44x44 tap targets
- Mobile Important: useMobileChrome title, FolderActionsMenu icon size, breadcrumb tap targets, signer email truncate
- Type-safety: ENTITY_TYPES guard, AggregatedSection discriminated union
- UI/UX: em-dash to colon in SigningDetailsDialog, Loading state normalize, StatusPill on HubRootView, view signing details as Button

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/documents/hub-root-view.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { FileText, ClipboardSignature } from 'lucide-react';
 
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
+import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
 
 interface HubRootDoc {
   id: string;
@@ -23,6 +24,17 @@ interface Props {
   portSlug: string;
 }
 
+const STATUS_PILL_MAP: Record<string, StatusPillStatus> = {
+  draft: 'draft',
+  sent: 'sent',
+  partially_signed: 'partial',
+  completed: 'completed',
+  signed: 'signed',
+  expired: 'expired',
+  cancelled: 'cancelled',
+  rejected: 'rejected',
+};
+
 export function HubRootView({ portSlug }: Props) {
   const { data: workflows, isLoading: workflowsLoading } = usePaginatedQuery<HubRootDoc>({
     queryKey: ['documents', 'hub-root', 'workflows'],
@@ -49,11 +61,13 @@ export function HubRootView({ portSlug }: Props) {
         ) : (
           <ul className="divide-y">
             {workflows.map((w) => (
-              <li key={w.id} className="px-3 py-2 text-sm">
-                <Link href={`/${portSlug}/documents/${w.id}`} className="hover:underline">
+              <li key={w.id} className="flex items-center justify-between gap-2 px-3 py-2 text-sm">
+                <Link href={`/${portSlug}/documents/${w.id}`} className="truncate hover:underline">
                   {w.title}
                 </Link>
-                <span className="ml-2 text-xs text-muted-foreground">{w.status}</span>
+                <StatusPill status={STATUS_PILL_MAP[w.status] ?? 'pending'}>
+                  {w.status.replace(/_/g, ' ')}
+                </StatusPill>
               </li>
             ))}
           </ul>