feat(settings): implement Environment tab with edit + drift detection

Add drift-badge, env-var-editor, env-var-row components and replace the
environment-tab stub; install shadcn Switch which was missing.

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

web-ui/src/app/settings/_components/env-var-row.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import { ExternalLink, Save, Lock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { McpEnvVar } from "@/lib/api/settings";
+import { useUpdateMcpEnv } from "@/lib/api/settings";
+import { toast } from "sonner";
+import { DriftBadge } from "./drift-badge";
+import { EnvVarEditor } from "./env-var-editor";
+
+type Props = {
+  spec: McpEnvVar;
+  infisicalProjectId: string;
+  infisicalEnv: string;
+  onPendingRedeploy: () => void;
+};
+
+export function EnvVarRow({
+  spec,
+  infisicalProjectId,
+  infisicalEnv,
+  onPendingRedeploy,
+}: Props) {
+  const [draft, setDraft] = useState<string>(spec.infisical_value ?? "");
+  const update = useUpdateMcpEnv();
+  const dirty = draft !== (spec.infisical_value ?? "");
+
+  function handleSave() {
+    update.mutate(
+      { key: spec.key, value: draft },
+      {
+        onSuccess: (res) => {
+          toast.success(res.message);
+          onPendingRedeploy();
+        },
+        onError: (err) => toast.error(`שגיאה: ${err.message}`),
+      },
+    );
+  }
+
+  const infisicalUrl =
+    `https://secret.dev.marcus-law.co.il/project/${infisicalProjectId}/secrets/overview?env=${infisicalEnv}`;
+
+  return (
+    <div className="rounded-md border border-rule p-4 bg-rule-soft/20 hover:bg-rule-soft/40 transition-colors">
+      <div className="flex items-start justify-between gap-3 mb-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <code className="font-mono text-sm font-medium text-navy" dir="ltr">
+              {spec.key}
+            </code>
+            <Badge variant="outline" className="text-[0.7rem]">
+              {spec.type}
+            </Badge>
+            {spec.is_secret && (
+              <Badge variant="outline" className="text-[0.7rem] text-warn border-warn/40 gap-1">
+                <Lock className="w-3 h-3" />
+                secret
+              </Badge>
+            )}
+            <DriftBadge drift={spec.drift} />
+          </div>
+          <p className="text-sm text-ink-muted mt-1">{spec.description}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+        <div className="flex items-center gap-2">
+          <span className="text-[0.72rem] text-ink-muted w-20">Infisical:</span>
+          {spec.is_editable ? (
+            <EnvVarEditor
+              spec={spec}
+              value={draft}
+              onChange={setDraft}
+              disabled={update.isPending}
+            />
+          ) : (
+            <span className="font-mono text-ink" dir="ltr">
+              {spec.infisical_value ?? <em className="text-ink-muted">— לא מוגדר —</em>}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-[0.72rem] text-ink-muted w-20">Container:</span>
+          <span className="font-mono text-ink" dir="ltr">
+            {spec.container_value ?? <em className="text-ink-muted">— לא מוגדר —</em>}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-2 mt-3">
+        {!spec.is_editable && (
+          <a
+            href={infisicalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[0.78rem] text-gold-deep hover:underline flex items-center gap-1"
+          >
+            ערוך ב-Infisical
+            <ExternalLink className="w-3 h-3" />
+          </a>
+        )}
+        {spec.is_editable && (
+          <Button
+            size="sm"
+            onClick={handleSave}
+            disabled={!dirty || update.isPending}
+          >
+            <Save className="w-3.5 h-3.5" data-icon="inline-start" />
+            {update.isPending ? "שומר..." : "שמור"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}