ui(deploy): port missing agent-config fields, var-view switcher, env pill, tab seam

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

ui/src/pages/AppsTab/AppDeploymentPage/index.tsx

@@ -328,11 +328,16 @@ export default function AppDeploymentPage() {
         monitoring: {
           engineLevel: (a.engineLevel as string) ?? prev.monitoring.engineLevel,
           payloadCaptureMode: (a.payloadCaptureMode as string) ?? prev.monitoring.payloadCaptureMode,
+          payloadSize: prev.monitoring.payloadSize,
+          payloadUnit: prev.monitoring.payloadUnit,
           applicationLogLevel: (a.applicationLogLevel as string) ?? prev.monitoring.applicationLogLevel,
           agentLogLevel: (a.agentLogLevel as string) ?? prev.monitoring.agentLogLevel,
           metricsEnabled: (a.metricsEnabled as boolean) ?? prev.monitoring.metricsEnabled,
+          metricsInterval: prev.monitoring.metricsInterval,
           samplingRate: a.samplingRate !== undefined ? String(a.samplingRate) : prev.monitoring.samplingRate,
           compressSuccess: (a.compressSuccess as boolean) ?? prev.monitoring.compressSuccess,
+          replayEnabled: prev.monitoring.replayEnabled,
+          routeControlEnabled: prev.monitoring.routeControlEnabled,
         },
         resources: {
           memoryLimit: c.memoryLimitMb !== undefined ? String(c.memoryLimitMb) : prev.resources.memoryLimit,
@@ -431,13 +436,14 @@ export default function AppDeploymentPage() {
       )}
 
       {/* ── Config tabs ── */}
+      <div className={styles.tabGroup}>
       <Tabs
         tabs={tabs}
         active={tab}
         onChange={(v) => setTab(v as TabKey)}
       />
 
-      <div className={styles.section} style={{ flex: '1 1 auto', minHeight: 0 }}>
+      <div className={styles.tabContent}>
         {tab === 'monitoring' && (
           <MonitoringTab
             value={form.monitoring}
@@ -508,6 +514,7 @@ export default function AppDeploymentPage() {
           <RouteRecordingTab app={app} environment={env} />
         )}
       </div>
+      </div>
 
       {/* ── Stop confirmation dialog ── */}
       <AlertDialog