feat: AgentBadge component, force mobile mode, and transcript UX improvements

- Extract agent badge into AgentBadge component with dropdown (TODO placeholder)
- Realtime connection indicated by badge color (green=connected, indigo=disconnected)
- Remove Transcript label and chat bubble icon from titlebar
- Add force mobile mode button (bottom sheet panel on desktop)
- Size toggle persisted in localStorage and controls sheet height in mobile mode
- Replace full titlebar drag with thin 5px top edge grip
- Remove sheet-handle touch bar, size controlled via toggle button only
- Large mobile mode respects app header height
- Slide-up/down animation for mobile panel enter/exit

frontend/src/components/transcript-debug/index.ts

@@ -12,4 +12,5 @@ export { default as UserInput } from './UserInput.vue'
 export { default as PermissionApproval } from './PermissionApproval.vue'
 export { default as PlanApproval } from './PlanApproval.vue'
 export { default as CodeBlock } from './CodeBlock.vue'
+export { default as AgentBadge } from './AgentBadge.vue'
 export { AquaticBackground } from './aquaticBackground'