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/ConfigTabs/VariablesTab.tsx

@@ -1,6 +1,5 @@
-import { Button, Input } from '@cameleer/design-system';
+import { EnvEditor } from '../../../../components/EnvEditor';
 import type { VariablesFormState } from '../hooks/useDeploymentPageState';
-import styles from '../AppDeploymentPage.module.css';
 
 interface Props {
   value: VariablesFormState;
@@ -9,52 +8,11 @@ interface Props {
 }
 
 export function VariablesTab({ value, onChange, disabled }: Props) {
-  function updateRow(index: number, field: 'key' | 'value', v: string) {
-    const next = value.envVars.map((row, i) => (i === index ? { ...row, [field]: v } : row));
-    onChange({ envVars: next });
-  }
-
-  function removeRow(index: number) {
-    onChange({ envVars: value.envVars.filter((_, i) => i !== index) });
-  }
-
-  function addRow() {
-    onChange({ envVars: [...value.envVars, { key: '', value: '' }] });
-  }
-
   return (
-    <div>
-      <div className={styles.envVarsList}>
-        {value.envVars.map((row, i) => (
-          <div key={i} className={styles.envVarRow}>
-            <Input
-              disabled={disabled}
-              value={row.key}
-              onChange={(e) => updateRow(i, 'key', e.target.value)}
-              placeholder="KEY"
-            />
-            <Input
-              disabled={disabled}
-              value={row.value}
-              onChange={(e) => updateRow(i, 'value', e.target.value)}
-              placeholder="value"
-            />
-            <Button
-              size="sm"
-              variant="ghost"
-              disabled={disabled}
-              onClick={() => removeRow(i)}
-            >
-              &times;
-            </Button>
-          </div>
-        ))}
-      </div>
-      <div style={{ marginTop: 10 }}>
-        <Button size="sm" variant="secondary" disabled={disabled} onClick={addRow}>
-          + Add Variable
-        </Button>
-      </div>
-    </div>
+    <EnvEditor
+      value={value.envVars}
+      onChange={(entries) => onChange({ envVars: entries })}
+      disabled={disabled}
+    />
   );
 }