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/drift-badge.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AlertTriangle, CheckCircle2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+export function DriftBadge({ drift }: { drift: boolean }) {
+  if (drift) {
+    return (
+      <Badge variant="outline" className="text-warn border-warn/40 gap-1">
+        <AlertTriangle className="w-3 h-3" />
+        Drift
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="outline" className="text-success border-success/40 gap-1">
+      <CheckCircle2 className="w-3 h-3" />
+      Synced
+    </Badge>
+  );
+}

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

@@ -0,0 +1,76 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { McpEnvVar } from "@/lib/api/settings";
+
+type Props = {
+  spec: McpEnvVar;
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+};
+
+export function EnvVarEditor({ spec, value, onChange, disabled }: Props) {
+  if (spec.type === "bool") {
+    const checked = value === "true";
+    return (
+      <Switch
+        checked={checked}
+        onCheckedChange={(c) => onChange(c ? "true" : "false")}
+        disabled={disabled}
+      />
+    );
+  }
+
+  if (spec.enum_values && spec.enum_values.length > 0) {
+    return (
+      <Select value={value} onValueChange={onChange} disabled={disabled}>
+        <SelectTrigger className="w-[220px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {spec.enum_values.map((v) => (
+            <SelectItem key={v} value={v}>
+              {v}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  if (spec.type === "int" || spec.type === "float") {
+    return (
+      <Input
+        type="number"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        min={spec.min ?? undefined}
+        max={spec.max ?? undefined}
+        step={spec.type === "float" ? "0.01" : "1"}
+        disabled={disabled}
+        className="w-[160px] text-start"
+        dir="ltr"
+      />
+    );
+  }
+
+  return (
+    <Input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      className="w-[260px] text-start"
+      dir="ltr"
+    />
+  );
+}

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>
+  );
+}

web-ui/src/app/settings/_components/environment-tab.tsx

@@ -1 +1,135 @@
-export function EnvironmentTab() { return <div>Environment tab — coming soon</div>; }
+"use client";
+
+import { useState, useMemo } from "react";
+import { RefreshCw, AlertCircle } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import {
+  useMcpEnv,
+  useMcpRedeploy,
+  type McpEnvVar,
+  type EnvCategory,
+} from "@/lib/api/settings";
+import { toast } from "sonner";
+import { EnvVarRow } from "./env-var-row";
+
+const CATEGORY_LABELS: Record<EnvCategory, string> = {
+  multimodal: "Multimodal",
+  rerank: "Rerank",
+  halacha: "Halacha",
+  general: "כללי",
+  credentials: "אישורים",
+  connection: "חיבורים",
+};
+
+const CATEGORY_ORDER: EnvCategory[] = [
+  "multimodal", "rerank", "halacha", "general", "credentials", "connection",
+];
+
+export function EnvironmentTab() {
+  const { data, isPending, error } = useMcpEnv();
+  const redeploy = useMcpRedeploy();
+  const [pendingRedeploy, setPendingRedeploy] = useState(false);
+
+  const grouped = useMemo(() => {
+    if (!data?.vars) return new Map<EnvCategory, McpEnvVar[]>();
+    const m = new Map<EnvCategory, McpEnvVar[]>();
+    for (const v of data.vars) {
+      const arr = m.get(v.category) ?? [];
+      arr.push(v);
+      m.set(v.category, arr);
+    }
+    return m;
+  }, [data]);
+
+  function handleRedeploy() {
+    redeploy.mutate(undefined, {
+      onSuccess: (res) => {
+        toast.success(res.message);
+        setPendingRedeploy(false);
+      },
+      onError: (err) => toast.error(`Redeploy נכשל: ${err.message}`),
+    });
+  }
+
+  if (isPending) return <Skeleton className="h-96 w-full" />;
+  if (error) {
+    return (
+      <Card className="bg-surface border-danger/40">
+        <CardContent className="p-6 flex items-center gap-3 text-danger">
+          <AlertCircle className="w-5 h-5" />
+          <span>שגיאה בטעינת env vars: {error.message}</span>
+        </CardContent>
+      </Card>
+    );
+  }
+  if (!data) return null;
+
+  const driftCount = data.vars.filter((v) => v.drift).length;
+
+  return (
+    <div className="space-y-4">
+      <Card className="bg-surface border-rule">
+        <CardContent className="px-6 py-4 flex items-center justify-between gap-4 flex-wrap">
+          <div className="flex items-center gap-3 flex-wrap text-sm">
+            <Badge variant="outline">
+              Infisical: <code dir="ltr" className="ms-1">{data.infisical_environment}</code>
+            </Badge>
+            <Badge variant="outline">
+              Path: <code dir="ltr" className="ms-1">{data.infisical_path}</code>
+            </Badge>
+            {driftCount > 0 && (
+              <Badge variant="outline" className="text-warn border-warn/40">
+                {driftCount} drift
+              </Badge>
+            )}
+            {data.errors.length > 0 && (
+              <Badge variant="outline" className="text-danger border-danger/40">
+                {data.errors.join(", ")}
+              </Badge>
+            )}
+          </div>
+          <Button
+            onClick={handleRedeploy}
+            disabled={redeploy.isPending}
+            variant={pendingRedeploy ? "default" : "outline"}
+            size="sm"
+          >
+            <RefreshCw className={redeploy.isPending ? "w-3.5 h-3.5 animate-spin" : "w-3.5 h-3.5"} data-icon="inline-start" />
+            {redeploy.isPending ? "Redeploying..." : "Redeploy now"}
+          </Button>
+        </CardContent>
+      </Card>
+
+      {CATEGORY_ORDER.map((cat) => {
+        const vars = grouped.get(cat);
+        if (!vars || vars.length === 0) return null;
+        return (
+          <Card key={cat} className="bg-surface border-rule">
+            <CardContent className="px-6 py-5">
+              <h2 className="text-navy text-lg mb-4 flex items-center gap-2">
+                {CATEGORY_LABELS[cat]}
+                <Badge variant="outline" className="text-[0.7rem] tabular-nums">
+                  {vars.length}
+                </Badge>
+              </h2>
+              <div className="space-y-3">
+                {vars.map((v) => (
+                  <EnvVarRow
+                    key={v.key}
+                    spec={v}
+                    infisicalProjectId={data.infisical_project_id}
+                    infisicalEnv={data.infisical_environment}
+                    onPendingRedeploy={() => setPendingRedeploy(true)}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

web-ui/src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }