Fleshing-Out Implementation of Credential Management for Ansible Playbooks

Data/Server/WebUI/src/Access_Management/Credential_Editor.jsx

@@ -0,0 +1,549 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+  IconButton,
+  Tooltip,
+  CircularProgress
+} from "@mui/material";
+import UploadIcon from "@mui/icons-material/UploadFile";
+import ClearIcon from "@mui/icons-material/Clear";
+
+const CREDENTIAL_TYPES = [
+  { value: "machine", label: "Machine" },
+  { value: "domain", label: "Domain" },
+  { value: "token", label: "Token" }
+];
+
+const CONNECTION_TYPES = [
+  { value: "ssh", label: "SSH" },
+  { value: "winrm", label: "WinRM" }
+];
+
+const BECOME_METHODS = [
+  { value: "", label: "None" },
+  { value: "sudo", label: "sudo" },
+  { value: "su", label: "su" },
+  { value: "runas", label: "runas" },
+  { value: "enable", label: "enable" }
+];
+
+function emptyForm() {
+  return {
+    name: "",
+    description: "",
+    site_id: "",
+    credential_type: "machine",
+    connection_type: "ssh",
+    username: "",
+    password: "",
+    private_key: "",
+    private_key_passphrase: "",
+    become_method: "",
+    become_username: "",
+    become_password: ""
+  };
+}
+
+function normalizeSiteId(value) {
+  if (value === null || typeof value === "undefined" || value === "") return "";
+  const num = Number(value);
+  if (Number.isNaN(num)) return "";
+  return String(num);
+}
+
+export default function CredentialEditor({
+  open,
+  mode = "create",
+  credential,
+  onClose,
+  onSaved
+}) {
+  const isEdit = mode === "edit" && credential && credential.id;
+  const [form, setForm] = useState(emptyForm);
+  const [sites, setSites] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [passwordDirty, setPasswordDirty] = useState(false);
+  const [privateKeyDirty, setPrivateKeyDirty] = useState(false);
+  const [passphraseDirty, setPassphraseDirty] = useState(false);
+  const [becomePasswordDirty, setBecomePasswordDirty] = useState(false);
+  const [clearPassword, setClearPassword] = useState(false);
+  const [clearPrivateKey, setClearPrivateKey] = useState(false);
+  const [clearPassphrase, setClearPassphrase] = useState(false);
+  const [clearBecomePassword, setClearBecomePassword] = useState(false);
+  const [fetchingDetail, setFetchingDetail] = useState(false);
+
+  const credentialId = credential?.id;
+
+  useEffect(() => {
+    if (!open) return;
+    let canceled = false;
+    (async () => {
+      try {
+        const resp = await fetch("/api/sites");
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (canceled) return;
+        const parsed = Array.isArray(data?.sites)
+          ? data.sites
+              .filter((s) => s && s.id)
+              .map((s) => ({
+                id: s.id,
+                name: s.name || `Site ${s.id}`
+              }))
+          : [];
+        parsed.sort((a, b) => String(a.name || "").localeCompare(String(b.name || "")));
+        setSites(parsed);
+      } catch {
+        if (!canceled) setSites([]);
+      }
+    })();
+    return () => {
+      canceled = true;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    setError("");
+    setPasswordDirty(false);
+    setPrivateKeyDirty(false);
+    setPassphraseDirty(false);
+    setBecomePasswordDirty(false);
+    setClearPassword(false);
+    setClearPrivateKey(false);
+    setClearPassphrase(false);
+    setClearBecomePassword(false);
+    if (isEdit && credentialId) {
+      const applyData = (detail) => {
+        const next = emptyForm();
+        next.name = detail?.name || "";
+        next.description = detail?.description || "";
+        next.site_id = normalizeSiteId(detail?.site_id);
+        next.credential_type = (detail?.credential_type || "machine").toLowerCase();
+        next.connection_type = (detail?.connection_type || "ssh").toLowerCase();
+        next.username = detail?.username || "";
+        next.become_method = (detail?.become_method || "").toLowerCase();
+        next.become_username = detail?.become_username || "";
+        setForm(next);
+      };
+
+      if (credential?.name) {
+        applyData(credential);
+      } else {
+        setFetchingDetail(true);
+        (async () => {
+          try {
+            const resp = await fetch(`/api/credentials/${credentialId}`);
+            if (resp.ok) {
+              const data = await resp.json();
+              applyData(data?.credential || {});
+            }
+          } catch {
+            /* ignore */
+          } finally {
+            setFetchingDetail(false);
+          }
+        })();
+      }
+    } else {
+      setForm(emptyForm());
+    }
+  }, [open, isEdit, credentialId, credential]);
+
+  const currentCredentialFlags = useMemo(() => ({
+    hasPassword: Boolean(credential?.has_password),
+    hasPrivateKey: Boolean(credential?.has_private_key),
+    hasPrivateKeyPassphrase: Boolean(credential?.has_private_key_passphrase),
+    hasBecomePassword: Boolean(credential?.has_become_password)
+  }), [credential]);
+
+  const disableSave = loading || fetchingDetail;
+
+  const updateField = (key) => (event) => {
+    const value = event?.target?.value ?? "";
+    setForm((prev) => ({ ...prev, [key]: value }));
+    if (key === "password") {
+      setPasswordDirty(true);
+      setClearPassword(false);
+    } else if (key === "private_key") {
+      setPrivateKeyDirty(true);
+      setClearPrivateKey(false);
+    } else if (key === "private_key_passphrase") {
+      setPassphraseDirty(true);
+      setClearPassphrase(false);
+    } else if (key === "become_password") {
+      setBecomePasswordDirty(true);
+      setClearBecomePassword(false);
+    }
+  };
+
+  const handlePrivateKeyUpload = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    try {
+      const text = await file.text();
+      setForm((prev) => ({ ...prev, private_key: text }));
+      setPrivateKeyDirty(true);
+      setClearPrivateKey(false);
+    } catch {
+      setError("Unable to read private key file.");
+    } finally {
+      event.target.value = "";
+    }
+  };
+
+  const handleCancel = () => {
+    if (loading) return;
+    onClose && onClose();
+  };
+
+  const validate = () => {
+    if (!form.name.trim()) {
+      setError("Credential name is required.");
+      return false;
+    }
+    setError("");
+    return true;
+  };
+
+  const buildPayload = () => {
+    const payload = {
+      name: form.name.trim(),
+      description: form.description.trim(),
+      credential_type: (form.credential_type || "machine").toLowerCase(),
+      connection_type: (form.connection_type || "ssh").toLowerCase(),
+      username: form.username.trim(),
+      become_method: form.become_method.trim(),
+      become_username: form.become_username.trim()
+    };
+    const siteId = normalizeSiteId(form.site_id);
+    if (siteId) {
+      payload.site_id = Number(siteId);
+    } else {
+      payload.site_id = null;
+    }
+    if (passwordDirty) {
+      payload.password = form.password;
+    }
+    if (privateKeyDirty) {
+      payload.private_key = form.private_key;
+    }
+    if (passphraseDirty) {
+      payload.private_key_passphrase = form.private_key_passphrase;
+    }
+    if (becomePasswordDirty) {
+      payload.become_password = form.become_password;
+    }
+    if (clearPassword) payload.clear_password = true;
+    if (clearPrivateKey) payload.clear_private_key = true;
+    if (clearPassphrase) payload.clear_private_key_passphrase = true;
+    if (clearBecomePassword) payload.clear_become_password = true;
+    return payload;
+  };
+
+  const handleSave = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    setError("");
+    const payload = buildPayload();
+    try {
+      const resp = await fetch(
+        isEdit ? `/api/credentials/${credentialId}` : "/api/credentials",
+        {
+          method: isEdit ? "PUT" : "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        }
+      );
+      const data = await resp.json();
+      if (!resp.ok) {
+        throw new Error(data?.error || `Request failed (${resp.status})`);
+      }
+      onSaved && onSaved(data?.credential || null);
+    } catch (err) {
+      setError(String(err.message || err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const title = isEdit ? "Edit Credential" : "Create Credential";
+  const helperStyle = { fontSize: 12, color: "#8a8a8a", mt: 0.5 };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleCancel}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}
+    >
+      <DialogTitle sx={{ pb: 1 }}>{title}</DialogTitle>
+      <DialogContent dividers sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        {fetchingDetail && (
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#aaa" }}>
+            <CircularProgress size={18} sx={{ color: "#58a6ff" }} />
+            <Typography variant="body2">Loading credential details…</Typography>
+          </Box>
+        )}
+        {error && (
+          <Box sx={{ bgcolor: "#2c1c1c", border: "1px solid #663939", borderRadius: 1, p: 1 }}>
+            <Typography variant="body2" sx={{ color: "#ff8080" }}>{error}</Typography>
+          </Box>
+        )}
+        <TextField
+          label="Name"
+          value={form.name}
+          onChange={updateField("name")}
+          required
+          disabled={disableSave}
+          sx={{
+            "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+            "& label": { color: "#888" }
+          }}
+        />
+        <TextField
+          label="Description"
+          value={form.description}
+          onChange={updateField("description")}
+          disabled={disableSave}
+          multiline
+          minRows={2}
+          sx={{
+            "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+            "& label": { color: "#888" }
+          }}
+        />
+        <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
+          <FormControl sx={{ minWidth: 220 }} size="small" disabled={disableSave}>
+            <InputLabel sx={{ color: "#aaa" }}>Site</InputLabel>
+            <Select
+              value={form.site_id}
+              label="Site"
+              onChange={updateField("site_id")}
+              sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+            >
+              <MenuItem value="">(None)</MenuItem>
+              {sites.map((site) => (
+                <MenuItem key={site.id} value={String(site.id)}>
+                  {site.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl sx={{ minWidth: 180 }} size="small" disabled={disableSave}>
+            <InputLabel sx={{ color: "#aaa" }}>Credential Type</InputLabel>
+            <Select
+              value={form.credential_type}
+              label="Credential Type"
+              onChange={updateField("credential_type")}
+              sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+            >
+              {CREDENTIAL_TYPES.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl sx={{ minWidth: 180 }} size="small" disabled={disableSave}>
+            <InputLabel sx={{ color: "#aaa" }}>Connection</InputLabel>
+            <Select
+              value={form.connection_type}
+              label="Connection"
+              onChange={updateField("connection_type")}
+              sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+            >
+              {CONNECTION_TYPES.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+        <TextField
+          label="Username"
+          value={form.username}
+          onChange={updateField("username")}
+          disabled={disableSave}
+          sx={{
+            "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+            "& label": { color: "#888" }
+          }}
+        />
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <TextField
+            label="Password"
+            type="password"
+            value={form.password}
+            onChange={updateField("password")}
+            disabled={disableSave}
+            sx={{
+              flex: 1,
+              "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+              "& label": { color: "#888" }
+            }}
+          />
+          {isEdit && currentCredentialFlags.hasPassword && !passwordDirty && !clearPassword && (
+            <Tooltip title="Clear stored password">
+              <IconButton size="small" onClick={() => setClearPassword(true)} sx={{ color: "#ff8080" }}>
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+        {isEdit && currentCredentialFlags.hasPassword && !passwordDirty && !clearPassword && (
+          <Typography sx={helperStyle}>Stored password will remain unless you change or clear it.</Typography>
+        )}
+        {clearPassword && (
+          <Typography sx={{ ...helperStyle, color: "#ffaaaa" }}>Password will be removed when saving.</Typography>
+        )}
+
+        <Box sx={{ display: "flex", gap: 1, alignItems: "flex-start" }}>
+          <TextField
+            label="SSH Private Key"
+            value={form.private_key}
+            onChange={updateField("private_key")}
+            disabled={disableSave}
+            multiline
+            minRows={4}
+            maxRows={12}
+            sx={{
+              flex: 1,
+              "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff", fontFamily: "monospace" },
+              "& label": { color: "#888" }
+            }}
+          />
+          <Button
+            variant="outlined"
+            component="label"
+            startIcon={<UploadIcon />}
+            disabled={disableSave}
+            sx={{ alignSelf: "center", borderColor: "#58a6ff", color: "#58a6ff" }}
+          >
+            Upload
+            <input type="file" hidden accept=".pem,.key,.txt" onChange={handlePrivateKeyUpload} />
+          </Button>
+          {isEdit && currentCredentialFlags.hasPrivateKey && !privateKeyDirty && !clearPrivateKey && (
+            <Tooltip title="Clear stored private key">
+              <IconButton size="small" onClick={() => setClearPrivateKey(true)} sx={{ color: "#ff8080" }}>
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+        {isEdit && currentCredentialFlags.hasPrivateKey && !privateKeyDirty && !clearPrivateKey && (
+          <Typography sx={helperStyle}>Private key is stored. Upload or paste a new one to replace, or clear it.</Typography>
+        )}
+        {clearPrivateKey && (
+          <Typography sx={{ ...helperStyle, color: "#ffaaaa" }}>Private key will be removed when saving.</Typography>
+        )}
+
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <TextField
+            label="Private Key Passphrase"
+            type="password"
+            value={form.private_key_passphrase}
+            onChange={updateField("private_key_passphrase")}
+            disabled={disableSave}
+            sx={{
+              flex: 1,
+              "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+              "& label": { color: "#888" }
+            }}
+          />
+          {isEdit && currentCredentialFlags.hasPrivateKeyPassphrase && !passphraseDirty && !clearPassphrase && (
+            <Tooltip title="Clear stored passphrase">
+              <IconButton size="small" onClick={() => setClearPassphrase(true)} sx={{ color: "#ff8080" }}>
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+        {isEdit && currentCredentialFlags.hasPrivateKeyPassphrase && !passphraseDirty && !clearPassphrase && (
+          <Typography sx={helperStyle}>A passphrase is stored for this key.</Typography>
+        )}
+        {clearPassphrase && (
+          <Typography sx={{ ...helperStyle, color: "#ffaaaa" }}>Key passphrase will be removed when saving.</Typography>
+        )}
+
+        <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
+          <FormControl sx={{ minWidth: 180 }} size="small" disabled={disableSave}>
+            <InputLabel sx={{ color: "#aaa" }}>Privilege Escalation</InputLabel>
+            <Select
+              value={form.become_method}
+              label="Privilege Escalation"
+              onChange={updateField("become_method")}
+              sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+            >
+              {BECOME_METHODS.map((opt) => (
+                <MenuItem key={opt.value || "none"} value={opt.value}>{opt.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <TextField
+            label="Escalation Username"
+            value={form.become_username}
+            onChange={updateField("become_username")}
+            disabled={disableSave}
+            sx={{
+              flex: 1,
+              minWidth: 200,
+              "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+              "& label": { color: "#888" }
+            }}
+          />
+        </Box>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <TextField
+            label="Escalation Password"
+            type="password"
+            value={form.become_password}
+            onChange={updateField("become_password")}
+            disabled={disableSave}
+            sx={{
+              flex: 1,
+              "& .MuiInputBase-root": { bgcolor: "#1f1f1f", color: "#fff" },
+              "& label": { color: "#888" }
+            }}
+          />
+          {isEdit && currentCredentialFlags.hasBecomePassword && !becomePasswordDirty && !clearBecomePassword && (
+            <Tooltip title="Clear stored escalation password">
+              <IconButton size="small" onClick={() => setClearBecomePassword(true)} sx={{ color: "#ff8080" }}>
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+        {isEdit && currentCredentialFlags.hasBecomePassword && !becomePasswordDirty && !clearBecomePassword && (
+          <Typography sx={helperStyle}>Escalation password is stored.</Typography>
+        )}
+        {clearBecomePassword && (
+          <Typography sx={{ ...helperStyle, color: "#ffaaaa" }}>Escalation password will be removed when saving.</Typography>
+        )}
+      </DialogContent>
+      <DialogActions sx={{ px: 3, py: 2 }}>
+        <Button onClick={handleCancel} sx={{ color: "#58a6ff" }} disabled={loading}>
+          Cancel
+        </Button>
+        <Button
+          onClick={handleSave}
+          variant="outlined"
+          sx={{ color: "#58a6ff", borderColor: "#58a6ff" }}
+          disabled={disableSave}
+        >
+          {loading ? <CircularProgress size={18} sx={{ color: "#58a6ff" }} /> : "Save"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

Data/Server/WebUI/src/Access_Management/Credential_List.jsx

@@ -0,0 +1,320 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Button,
+  IconButton,
+  Menu,
+  MenuItem,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+  Typography,
+  CircularProgress
+} from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import AddIcon from "@mui/icons-material/Add";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import LockIcon from "@mui/icons-material/Lock";
+import WifiIcon from "@mui/icons-material/Wifi";
+import ComputerIcon from "@mui/icons-material/Computer";
+import CredentialEditor from "./Credential_Editor.jsx";
+import { ConfirmDeleteDialog } from "../Dialogs.jsx";
+
+const tablePaperSx = { m: 2, p: 0, bgcolor: "#1e1e1e", borderRadius: 2 };
+const tableSx = {
+  minWidth: 840,
+  "& th, & td": {
+    color: "#ddd",
+    borderColor: "#2a2a2a",
+    fontSize: 13,
+    py: 0.9
+  },
+  "& th .MuiTableSortLabel-root": { color: "#ddd" },
+  "& th .MuiTableSortLabel-root.Mui-active": { color: "#ddd" }
+};
+
+const columns = [
+  { id: "name", label: "Name" },
+  { id: "credential_type", label: "Credential Type" },
+  { id: "connection_type", label: "Connection" },
+  { id: "site_name", label: "Site" },
+  { id: "username", label: "Username" },
+  { id: "updated_at", label: "Updated" },
+  { id: "actions", label: "" }
+];
+
+function formatTs(ts) {
+  if (!ts) return "-";
+  const date = new Date(Number(ts) * 1000);
+  if (Number.isNaN(date?.getTime())) return "-";
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+}
+
+function titleCase(value) {
+  if (!value) return "-";
+  const lower = String(value).toLowerCase();
+  return lower.replace(/(^|\s)\w/g, (c) => c.toUpperCase());
+}
+
+function connectionIcon(connection) {
+  const val = (connection || "").toLowerCase();
+  if (val === "ssh") return <LockIcon fontSize="small" sx={{ mr: 0.6, color: "#58a6ff" }} />;
+  if (val === "winrm") return <WifiIcon fontSize="small" sx={{ mr: 0.6, color: "#58a6ff" }} />;
+  return <ComputerIcon fontSize="small" sx={{ mr: 0.6, color: "#58a6ff" }} />;
+}
+
+export default function CredentialList({ isAdmin = false }) {
+  const [rows, setRows] = useState([]);
+  const [orderBy, setOrderBy] = useState("name");
+  const [order, setOrder] = useState("asc");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const [menuRow, setMenuRow] = useState(null);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editorMode, setEditorMode] = useState("create");
+  const [editingCredential, setEditingCredential] = useState(null);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleteBusy, setDeleteBusy] = useState(false);
+
+  const sortedRows = useMemo(() => {
+    const sorted = [...rows];
+    sorted.sort((a, b) => {
+      const aVal = (a?.[orderBy] ?? "").toString().toLowerCase();
+      const bVal = (b?.[orderBy] ?? "").toString().toLowerCase();
+      if (aVal < bVal) return order === "asc" ? -1 : 1;
+      if (aVal > bVal) return order === "asc" ? 1 : -1;
+      return 0;
+    });
+    return sorted;
+  }, [rows, order, orderBy]);
+
+  const fetchCredentials = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const resp = await fetch("/api/credentials");
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = await resp.json();
+      const list = Array.isArray(data?.credentials) ? data.credentials : [];
+      list.sort((a, b) => String(a?.name || "").localeCompare(String(b?.name || "")));
+      setRows(list);
+    } catch (err) {
+      setRows([]);
+      setError(String(err.message || err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCredentials();
+  }, [fetchCredentials]);
+
+  const handleSort = (columnId) => () => {
+    if (orderBy === columnId) {
+      setOrder((prev) => (prev === "asc" ? "desc" : "asc"));
+    } else {
+      setOrderBy(columnId);
+      setOrder("asc");
+    }
+  };
+
+  const openMenu = (event, row) => {
+    setMenuAnchor(event.currentTarget);
+    setMenuRow(row);
+  };
+
+  const closeMenu = () => {
+    setMenuAnchor(null);
+    setMenuRow(null);
+  };
+
+  const handleCreate = () => {
+    setEditorMode("create");
+    setEditingCredential(null);
+    setEditorOpen(true);
+  };
+
+  const handleEdit = (row) => {
+    closeMenu();
+    setEditorMode("edit");
+    setEditingCredential(row);
+    setEditorOpen(true);
+  };
+
+  const handleDelete = (row) => {
+    closeMenu();
+    setDeleteTarget(row);
+  };
+
+  const doDelete = async () => {
+    if (!deleteTarget?.id) return;
+    setDeleteBusy(true);
+    try {
+      const resp = await fetch(`/api/credentials/${deleteTarget.id}`, { method: "DELETE" });
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => ({}));
+        throw new Error(data?.error || `HTTP ${resp.status}`);
+      }
+      setDeleteTarget(null);
+      await fetchCredentials();
+    } catch (err) {
+      setError(String(err.message || err));
+    } finally {
+      setDeleteBusy(false);
+    }
+  };
+
+  const handleEditorSaved = async () => {
+    setEditorOpen(false);
+    setEditingCredential(null);
+    await fetchCredentials();
+  };
+
+  if (!isAdmin) {
+    return (
+      <Paper sx={{ m: 2, p: 3, bgcolor: "#1e1e1e" }}>
+        <Typography variant="h6" sx={{ color: "#ff8080" }}>
+          Access denied
+        </Typography>
+        <Typography variant="body2" sx={{ color: "#bbb" }}>
+          You do not have permission to manage credentials.
+        </Typography>
+      </Paper>
+    );
+  }
+
+  return (
+    <>
+      <Paper sx={tablePaperSx} elevation={3}>
+        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, borderBottom: "1px solid #2a2a2a" }}>
+          <Box>
+            <Typography variant="h6" sx={{ color: "#58a6ff", mb: 0.3 }}>
+              Credentials
+            </Typography>
+            <Typography variant="body2" sx={{ color: "#aaa" }}>
+              Stored credentials for remote automation tasks and Ansible playbook runs.
+            </Typography>
+          </Box>
+          <Box sx={{ display: "flex", gap: 1 }}>
+            <Button
+              variant="outlined"
+              size="small"
+              startIcon={<RefreshIcon />}
+              sx={{ borderColor: "#58a6ff", color: "#58a6ff" }}
+              onClick={fetchCredentials}
+              disabled={loading}
+            >
+              Refresh
+            </Button>
+            <Button
+              variant="contained"
+              size="small"
+              startIcon={<AddIcon />}
+              sx={{ bgcolor: "#58a6ff", color: "#0b0f19" }}
+              onClick={handleCreate}
+            >
+              New Credential
+            </Button>
+          </Box>
+        </Box>
+        {loading && (
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#7db7ff", px: 2, py: 1.5 }}>
+            <CircularProgress size={18} sx={{ color: "#58a6ff" }} />
+            <Typography variant="body2">Loading credentials…</Typography>
+          </Box>
+        )}
+        {error && (
+          <Box sx={{ px: 2, py: 1.5, color: "#ff8080" }}>
+            <Typography variant="body2">{error}</Typography>
+          </Box>
+        )}
+
+        <Table size="small" sx={tableSx}>
+          <TableHead>
+            <TableRow>
+              {columns.map((col) => (
+                <TableCell key={col.id} align={col.id === "actions" ? "right" : "left"}>
+                  {col.id === "actions" ? null : (
+                    <TableSortLabel
+                      active={orderBy === col.id}
+                      direction={orderBy === col.id ? order : "asc"}
+                      onClick={handleSort(col.id)}
+                    >
+                      {col.label}
+                    </TableSortLabel>
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {!sortedRows.length && !loading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} sx={{ color: "#888", textAlign: "center", py: 4 }}>
+                  No credentials have been created yet.
+                </TableCell>
+              </TableRow>
+            ) : (
+              sortedRows.map((row) => (
+                <TableRow key={row.id} hover>
+                  <TableCell>{row.name || "-"}</TableCell>
+                  <TableCell>{titleCase(row.credential_type)}</TableCell>
+                  <TableCell>
+                    <Box sx={{ display: "flex", alignItems: "center" }}>
+                      {connectionIcon(row.connection_type)}
+                      {titleCase(row.connection_type)}
+                    </Box>
+                  </TableCell>
+                  <TableCell>{row.site_name || "-"}</TableCell>
+                  <TableCell>{row.username || "-"}</TableCell>
+                  <TableCell>{formatTs(row.updated_at || row.created_at)}</TableCell>
+                  <TableCell align="right">
+                    <IconButton size="small" onClick={(e) => openMenu(e, row)} sx={{ color: "#7db7ff" }}>
+                      <MoreVertIcon fontSize="small" />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </Paper>
+
+      <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu} elevation={2} PaperProps={{ sx: { bgcolor: "#1f1f1f", color: "#f5f5f5" } }}>
+        <MenuItem onClick={() => handleEdit(menuRow)}>Edit</MenuItem>
+        <MenuItem onClick={() => handleDelete(menuRow)} sx={{ color: "#ff8080" }}>
+          Delete
+        </MenuItem>
+      </Menu>
+
+      <CredentialEditor
+        open={editorOpen}
+        mode={editorMode}
+        credential={editingCredential}
+        onClose={() => {
+          setEditorOpen(false);
+          setEditingCredential(null);
+        }}
+        onSaved={handleEditorSaved}
+      />
+
+      <ConfirmDeleteDialog
+        open={Boolean(deleteTarget)}
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={doDelete}
+        confirmDisabled={deleteBusy}
+        message={
+          deleteTarget
+            ? `Delete credential '${deleteTarget.name || ""}'? Any jobs referencing it will require an update.`
+            : ""
+        }
+      />
+    </>
+  );
+}

Data/Server/WebUI/src/App.jsx

@@ -39,7 +39,8 @@ import AssemblyList from "./Assemblies/Assembly_List";
 import AssemblyEditor from "./Assemblies/Assembly_Editor";
 import ScheduledJobsList from "./Scheduling/Scheduled_Jobs_List";
 import CreateJob from "./Scheduling/Create_Job.jsx";
-import UserManagement from "./Admin/User_Management.jsx";
+import CredentialList from "./Access_Management/Credential_List.jsx";
+import UserManagement from "./Access_Management/Users.jsx";
 import ServerInfo from "./Admin/Server_Info.jsx";
 
 // Networking Imports
@@ -201,12 +202,16 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
         items.push({ label: "Automation", page: "jobs" });
         items.push({ label: "Community Content", page: "community" });
         break;
-      case "admin_users":
-        items.push({ label: "Admin Settings", page: "admin_users" });
-        items.push({ label: "User Management", page: "admin_users" });
+      case "access_credentials":
+        items.push({ label: "Access Management", page: "access_credentials" });
+        items.push({ label: "Credentials", page: "access_credentials" });
+        break;
+      case "access_users":
+        items.push({ label: "Access Management", page: "access_credentials" });
+        items.push({ label: "Users", page: "access_users" });
         break;
       case "server_info":
-        items.push({ label: "Admin Settings", page: "admin_users" });
+        items.push({ label: "Admin Settings" });
         items.push({ label: "Server Info", page: "server_info" });
         break;
       case "filters":
@@ -551,7 +556,7 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
   const isAdmin = (String(userRole || '').toLowerCase() === 'admin');
 
   useEffect(() => {
-    if (!isAdmin && (currentPage === 'admin_users' || currentPage === 'server_info')) {
+    if (!isAdmin && (currentPage === 'server_info' || currentPage === 'access_credentials' || currentPage === 'access_users')) {
       setNotAuthorizedOpen(true);
       setCurrentPage('devices');
     }
@@ -705,7 +710,10 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
           />
         );
 
-      case "admin_users":
+      case "access_credentials":
+        return <CredentialList isAdmin={isAdmin} />;
+
+      case "access_users":
         return <UserManagement isAdmin={isAdmin} />;
 
       case "server_info":

Data/Server/WebUI/src/Navigation_Sidebar.jsx

@@ -22,7 +22,7 @@ import {
   Apps as AssembliesIcon
 } from "@mui/icons-material";
 import { LocationCity as SitesIcon } from "@mui/icons-material";
-import { ManageAccounts as AdminUsersIcon, Dns as ServerInfoIcon } from "@mui/icons-material";
+import { Dns as ServerInfoIcon, VpnKey as CredentialIcon, PersonOutline as UserIcon } from "@mui/icons-material";
 
 function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
   const [expandedNav, setExpandedNav] = useState({
@@ -30,6 +30,7 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
     devices: true,
     automation: true,
     filters: true,
+    access: true,
     admin: true
   });
 
@@ -289,10 +290,57 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
           );
         })()}
 
+        {/* Access Management */}
+        {(() => {
+          if (!isAdmin) return null;
+          const groupActive = currentPage === "access_credentials" || currentPage === "access_users";
+          return (
+        <Accordion
+          expanded={expandedNav.access}
+          onChange={(_, e) => setExpandedNav((s) => ({ ...s, access: e }))}
+          square
+          disableGutters
+          sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            sx={{
+              position: "relative",
+              background: groupActive
+                ? "linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.00) 100%)"
+                : "#2c2c2c",
+              minHeight: "36px",
+              "& .MuiAccordionSummary-content": { margin: 0 },
+              "&::before": {
+                content: '""',
+                position: "absolute",
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: groupActive ? 3 : 0,
+                bgcolor: "#58a6ff",
+                borderTopRightRadius: 2,
+                borderBottomRightRadius: 2,
+                transition: "width 160ms ease"
+              }
+            }}
+          >
+            <Typography sx={{ fontSize: "0.85rem", color: "#58a6ff" }}>
+              <b>Access Management</b>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
+            <NavItem icon={<CredentialIcon fontSize="small" />} label="Credentials" pageKey="access_credentials" />
+            <NavItem icon={<UserIcon fontSize="small" />} label="Users" pageKey="access_users" />
+          </AccordionDetails>
+        </Accordion>
+          );
+        })()}
+
         {/* Admin */}
         {(() => {
           if (!isAdmin) return null;
-          const groupActive = currentPage === "admin_users" || currentPage === "server_info";
+          const groupActive = currentPage === "server_info";
           return (
         <Accordion
           expanded={expandedNav.admin}
@@ -329,7 +377,6 @@ function NavigationSidebar({ currentPage, onNavigate, isAdmin = false }) {
             </Typography>
           </AccordionSummary>
           <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-            <NavItem icon={<AdminUsersIcon fontSize="small" />} label="User Management" pageKey="admin_users" />
             <NavItem icon={<ServerInfoIcon fontSize="small" />} label="Server Info" pageKey="server_info" />
           </AccordionDetails>
         </Accordion>

Data/Server/WebUI/src/Scheduling/Create_Job.jsx

@@ -9,8 +9,10 @@ import {
   Button,
   IconButton,
   Checkbox,
+  FormControl,
   FormControlLabel,
   Select,
+  InputLabel,
   Menu,
   MenuItem,
   Divider,
@@ -24,7 +26,8 @@ import {
   TableCell,
   TableBody,
   TableSortLabel,
-  GlobalStyles
+  GlobalStyles,
+  CircularProgress
 } from "@mui/material";
 import {
   Add as AddIcon,
@@ -34,7 +37,8 @@ import {
   Sync as SyncIcon,
   Timer as TimerIcon,
   Check as CheckIcon,
-  Error as ErrorIcon
+  Error as ErrorIcon,
+  Refresh as RefreshIcon
 } from "@mui/icons-material";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -421,6 +425,52 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
   const [stopAfterEnabled, setStopAfterEnabled] = useState(false);
   const [expiration, setExpiration] = useState("no_expire");
   const [execContext, setExecContext] = useState("system");
+  const [credentials, setCredentials] = useState([]);
+  const [credentialLoading, setCredentialLoading] = useState(false);
+  const [credentialError, setCredentialError] = useState("");
+  const [selectedCredentialId, setSelectedCredentialId] = useState("");
+
+  const loadCredentials = useCallback(async () => {
+    setCredentialLoading(true);
+    setCredentialError("");
+    try {
+      const resp = await fetch("/api/credentials");
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = await resp.json();
+      const list = Array.isArray(data?.credentials) ? data.credentials : [];
+      list.sort((a, b) => String(a?.name || "").localeCompare(String(b?.name || "")));
+      setCredentials(list);
+    } catch (err) {
+      setCredentials([]);
+      setCredentialError(String(err.message || err));
+    } finally {
+      setCredentialLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadCredentials();
+  }, [loadCredentials]);
+
+  const remoteExec = useMemo(() => execContext === "ssh" || execContext === "winrm", [execContext]);
+  const filteredCredentials = useMemo(() => {
+    if (!remoteExec) return credentials;
+    const target = execContext === "winrm" ? "winrm" : "ssh";
+    return credentials.filter((cred) => String(cred.connection_type || "").toLowerCase() === target);
+  }, [credentials, remoteExec, execContext]);
+
+  useEffect(() => {
+    if (!remoteExec) {
+      return;
+    }
+    if (!filteredCredentials.length) {
+      setSelectedCredentialId("");
+      return;
+    }
+    if (!selectedCredentialId || !filteredCredentials.some((cred) => String(cred.id) === String(selectedCredentialId))) {
+      setSelectedCredentialId(String(filteredCredentials[0].id));
+    }
+  }, [remoteExec, filteredCredentials, selectedCredentialId]);
 
   // dialogs state
   const [addCompOpen, setAddCompOpen] = useState(false);
@@ -827,11 +877,12 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
   const isValid = useMemo(() => {
     const base = jobName.trim().length > 0 && components.length > 0 && targets.length > 0;
     if (!base) return false;
+    if (remoteExec && !selectedCredentialId) return false;
     if (scheduleType !== "immediately") {
       return !!startDateTime;
     }
     return true;
-  }, [jobName, components.length, targets.length, scheduleType, startDateTime]);
+  }, [jobName, components.length, targets.length, scheduleType, startDateTime, remoteExec, selectedCredentialId]);
 
   const [confirmOpen, setConfirmOpen] = useState(false);
   const editing = !!(initialJob && initialJob.id);
@@ -1306,6 +1357,7 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
         setStopAfterEnabled(Boolean(initialJob.duration_stop_enabled));
         setExpiration(initialJob.expiration || "no_expire");
         setExecContext(initialJob.execution_context || "system");
+        setSelectedCredentialId(initialJob.credential_id ? String(initialJob.credential_id) : "");
         const comps = Array.isArray(initialJob.components) ? initialJob.components : [];
         const hydrated = await hydrateExistingComponents(comps);
         if (!canceled) {
@@ -1316,6 +1368,7 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
         setPageTitleJobName("");
         setComponents([]);
         setComponentVarErrors({});
+        setSelectedCredentialId("");
       }
     };
     hydrate();
@@ -1411,6 +1464,10 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
   };
 
   const handleCreate = async () => {
+    if (remoteExec && !selectedCredentialId) {
+      alert("Please select a credential for this execution context.");
+      return;
+    }
     const requiredErrors = {};
     components.forEach((comp) => {
       if (!comp || !comp.localId) return;
@@ -1438,7 +1495,8 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
       targets,
       schedule: { type: scheduleType, start: scheduleType !== "immediately" ? (() => { try { const d = startDateTime?.toDate?.() || new Date(startDateTime); d.setSeconds(0,0); return d.toISOString(); } catch { return startDateTime; } })() : null },
       duration: { stopAfterEnabled, expiration },
-      execution_context: execContext
+      execution_context: execContext,
+      credential_id: remoteExec && selectedCredentialId ? Number(selectedCredentialId) : null
     };
     try {
       const resp = await fetch(initialJob && initialJob.id ? `/api/scheduled_jobs/${initialJob.id}` : "/api/scheduled_jobs", {
@@ -1665,10 +1723,61 @@ export default function CreateJob({ onCancel, onCreated, initialJob = null }) {
         {tab === 4 && (
           <Box>
             <SectionHeader title="Execution Context" />
-            <Select size="small" value={execContext} onChange={(e) => setExecContext(e.target.value)} sx={{ minWidth: 280 }}>
-              <MenuItem value="system">Run as SYSTEM Account</MenuItem>
-              <MenuItem value="current_user">Run as the Logged-In User</MenuItem>
+            <Select
+              size="small"
+              value={execContext}
+              onChange={(e) => setExecContext(e.target.value)}
+              sx={{ minWidth: 320 }}
+            >
+              <MenuItem value="system">Run on agent as SYSTEM (device-local)</MenuItem>
+              <MenuItem value="current_user">Run on agent as logged-in user (device-local)</MenuItem>
+              <MenuItem value="ssh">Run from server via SSH (remote)</MenuItem>
+              <MenuItem value="winrm">Run from server via WinRM (remote)</MenuItem>
             </Select>
+            {remoteExec && (
+              <Box sx={{ mt: 2, display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }}>
+                <FormControl
+                  size="small"
+                  sx={{ minWidth: 320 }}
+                  disabled={credentialLoading || !filteredCredentials.length}
+                >
+                  <InputLabel sx={{ color: "#aaa" }}>Credential</InputLabel>
+                  <Select
+                    value={selectedCredentialId}
+                    label="Credential"
+                    onChange={(e) => setSelectedCredentialId(e.target.value)}
+                    sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+                  >
+                    {filteredCredentials.map((cred) => (
+                      <MenuItem key={cred.id} value={String(cred.id)}>
+                        {cred.name}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<RefreshIcon fontSize="small" />}
+                  onClick={loadCredentials}
+                  disabled={credentialLoading}
+                  sx={{ color: "#58a6ff", borderColor: "#58a6ff" }}
+                >
+                  Refresh
+                </Button>
+                {credentialLoading && <CircularProgress size={18} sx={{ color: "#58a6ff" }} />}
+                {!credentialLoading && credentialError && (
+                  <Typography variant="body2" sx={{ color: "#ff8080" }}>
+                    {credentialError}
+                  </Typography>
+                )}
+                {!credentialLoading && !credentialError && !filteredCredentials.length && (
+                  <Typography variant="body2" sx={{ color: "#ff8080" }}>
+                    No {execContext === "winrm" ? "WinRM" : "SSH"} credentials available. Create one under Access Management &gt; Credentials.
+                  </Typography>
+                )}
+              </Box>
+            )}
           </Box>
         )}
 

Data/Server/WebUI/src/Scheduling/Quick_Job.jsx

@@ -10,7 +10,12 @@ import {
   Paper,
   FormControlLabel,
   Checkbox,
-  TextField
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  CircularProgress
 } from "@mui/material";
 import { Folder as FolderIcon, Description as DescriptionIcon } from "@mui/icons-material";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
@@ -82,6 +87,10 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
   const [error, setError] = useState("");
   const [runAsCurrentUser, setRunAsCurrentUser] = useState(false);
   const [mode, setMode] = useState("scripts"); // 'scripts' | 'ansible'
+  const [credentials, setCredentials] = useState([]);
+  const [credentialsLoading, setCredentialsLoading] = useState(false);
+  const [credentialsError, setCredentialsError] = useState("");
+  const [selectedCredentialId, setSelectedCredentialId] = useState("");
   const [variables, setVariables] = useState([]);
   const [variableValues, setVariableValues] = useState({});
   const [variableErrors, setVariableErrors] = useState({});
@@ -115,6 +124,53 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
     }
   }, [open, loadTree]);
 
+  useEffect(() => {
+    if (!open || mode !== "ansible") return;
+    let canceled = false;
+    setCredentialsLoading(true);
+    setCredentialsError("");
+    (async () => {
+      try {
+        const resp = await fetch("/api/credentials");
+        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+        const data = await resp.json();
+        if (canceled) return;
+        const list = Array.isArray(data?.credentials)
+          ? data.credentials.filter((cred) => String(cred.connection_type || "").toLowerCase() === "ssh")
+          : [];
+        list.sort((a, b) => String(a?.name || "").localeCompare(String(b?.name || "")));
+        setCredentials(list);
+      } catch (err) {
+        if (!canceled) {
+          setCredentials([]);
+          setCredentialsError(String(err.message || err));
+        }
+      } finally {
+        if (!canceled) setCredentialsLoading(false);
+      }
+    })();
+    return () => {
+      canceled = true;
+    };
+  }, [open, mode]);
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedCredentialId("");
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (mode !== "ansible") return;
+    if (!credentials.length) {
+      setSelectedCredentialId("");
+      return;
+    }
+    if (!selectedCredentialId || !credentials.some((cred) => String(cred.id) === String(selectedCredentialId))) {
+      setSelectedCredentialId(String(credentials[0].id));
+    }
+  }, [mode, credentials, selectedCredentialId]);
+
   const renderNodes = (nodes = []) =>
     nodes.map((n) => (
       <TreeItem
@@ -286,6 +342,10 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
       setError(mode === 'ansible' ? "Please choose a playbook to run." : "Please choose a script to run.");
       return;
     }
+    if (mode === 'ansible' && !selectedCredentialId) {
+      setError("Select a credential to run this playbook.");
+      return;
+    }
     if (variables.length) {
       const errors = {};
       variables.forEach((variable) => {
@@ -314,7 +374,12 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
         resp = await fetch("/api/ansible/quick_run", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ playbook_path, hostnames, variable_values: variableOverrides })
+          body: JSON.stringify({
+            playbook_path,
+            hostnames,
+            variable_values: variableOverrides,
+            credential_id: selectedCredentialId ? Number(selectedCredentialId) : null
+          })
         });
       } else {
         // quick_run expects a path relative to Assemblies root with 'Scripts/' prefix
@@ -340,6 +405,9 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
     }
   };
 
+  const credentialRequired = mode === "ansible";
+  const disableRun = running || !selectedPath || (credentialRequired && (!selectedCredentialId || !credentials.length));
+
   return (
     <Dialog open={open} onClose={running ? undefined : onClose} fullWidth maxWidth="md"
       PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}
@@ -353,6 +421,38 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
         <Typography variant="body2" sx={{ color: "#aaa", mb: 1 }}>
           Select a {mode === 'ansible' ? 'playbook' : 'script'} to run on {hostnames.length} device{hostnames.length !== 1 ? "s" : ""}.
         </Typography>
+        {mode === 'ansible' && (
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap", mb: 2 }}>
+            <FormControl
+              size="small"
+              sx={{ minWidth: 260 }}
+              disabled={credentialsLoading || !credentials.length}
+            >
+              <InputLabel sx={{ color: "#aaa" }}>Credential</InputLabel>
+              <Select
+                value={selectedCredentialId}
+                label="Credential"
+                onChange={(e) => setSelectedCredentialId(e.target.value)}
+                sx={{ bgcolor: "#1f1f1f", color: "#fff" }}
+              >
+                {credentials.map((cred) => (
+                  <MenuItem key={cred.id} value={String(cred.id)}>
+                    {cred.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            {credentialsLoading && <CircularProgress size={18} sx={{ color: "#58a6ff" }} />}
+            {!credentialsLoading && credentialsError && (
+              <Typography variant="body2" sx={{ color: "#ff8080" }}>{credentialsError}</Typography>
+            )}
+            {!credentialsLoading && !credentialsError && !credentials.length && (
+              <Typography variant="body2" sx={{ color: "#ff8080" }}>
+                No SSH credentials available. Create one under Access Management.
+              </Typography>
+            )}
+          </Box>
+        )}
         <Box sx={{ display: "flex", gap: 2 }}>
           <Paper sx={{ flex: 1, p: 1, bgcolor: "#1e1e1e", maxHeight: 400, overflow: "auto" }}>
             <SimpleTreeView sx={{ color: "#e6edf3" }} onItemSelectionToggle={onItemSelect}>
@@ -444,8 +544,8 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose} disabled={running} sx={{ color: "#58a6ff" }}>Cancel</Button>
-        <Button onClick={onRun} disabled={running || !selectedPath}
-          sx={{ color: running || !selectedPath ? "#666" : "#58a6ff" }}
+        <Button onClick={onRun} disabled={disableRun}
+          sx={{ color: disableRun ? "#666" : "#58a6ff" }}
         >
           Run
         </Button>
@@ -453,4 +553,3 @@ export default function QuickJob({ open, onClose, hostnames = [] }) {
     </Dialog>
   );
 }
-