fix(ui): UI/UX pass — connectivity probe, mobile overflow, real metrics, deep links (#85)

Found during a browser-driven audit of the whole app:

- connectivity banner showed permanently: pingServer() resolved
  undefined, which React Query treats as an error; returns boolean now
- Vite dev proxy now forwards /health so the probe actually measures
  the backend, and the API target is env-overridable (VITE_API_PROXY)
- auth-session removed from the persisted query cache — stale sessions
  no longer rehydrate into a false signed-in flash
- workspace Observability tab no longer shows fabricated random metrics
  ("87K Active User", fake performance/speed-test cards); the dashboard
  now aggregates real per-service metrics (CPU, memory, network, instances)
- service detail tabs write ?section= so tab state is shareable/deep-linked
- Security page auto-selects the first project instead of rendering blank
- People page user-creation form no longer overflows its card
  (minmax(0,1fr) grid tracks; same fix on env-var rows)
- page padding is responsive (px-4 sm:px-8) so mobile keeps content width;
  Projects header wraps instead of clipping the "+ new project" button
- template deploy modal shows a loading state while the session resolves
  instead of flashing the sign-in prompt
- audit log table strips the CIDR suffix from displayed IPs
- docs list excerpts no longer repeat the document title
- activity filter placeholder "Search search…" → "Search events…"
- workspace view tabs get more room: ⌘K button now waits for lg:

Generated with [Devin](https://devin.ai)

Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/frontend/src/features/docs/DocsBrowser.tsx

@@ -15,6 +15,7 @@ function renderMarkdown(markdown: string): string {
 
 function excerpt(markdown: string, length = 140): string {
   const text = markdown
+    .replace(/^#[^\n]*\n/, ' ')
     .replace(/```[\s\S]*?```/g, ' ')
     .replace(/[#>*`\-[\]()]/g, ' ')
     .replace(/\s+/g, ' ')
@@ -119,7 +120,7 @@ export function DocsBrowser() {
 
       <div className="min-w-0 flex-1 overflow-y-auto max-md:hidden">
         {selected ? (
-          <article className="docs-article px-8 py-6">
+          <article className="docs-article px-4 py-6 sm:px-8">
             <p className="mb-1 text-[11px] font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
               {selected.section} / {selected.path}
             </p>