feat: move vault ssh signing into a plugin (C5)

src/ui/sidebar/HostEditor.tsx

@@ -41,7 +41,6 @@ import {
   updateSSHHost,
   getSnippets,
   getUserInfo,
-  getVaultProfiles,
   getHostPassword,
   adminCreateUserHost,
   adminUpdateUserHost,
@@ -57,7 +56,7 @@ import {
   parseCustomThemes,
   type SavedCustomTheme,
 } from "@/api/open-tabs-api";
-import type { Host, VaultProfile } from "@/types/ui-types";
+import type { Host } from "@/types/ui-types";
 import type { SSHHost } from "@/types";
 import { useTabsSafe } from "@/shell/TabContext";
 import { updatePluginHostSettings } from "@/api/plugins-api";
@@ -78,7 +77,6 @@ import { useConnectionDefaults } from "@/contexts/ConnectionDefaultsContext";
 import { HostEditorGeneralTab } from "./HostEditorGeneralTab";
 import { withProtocolSettings } from "./host-protocols";
 import { canEditHost } from "./host-permissions";
-import { VaultProfileManager } from "./VaultProfileManager";
 import {
   getHostEditorSection,
   isSshGroupTab,
@@ -167,8 +165,6 @@ export function HostEditor({
   const [saving, setSaving] = useState(false);
   const [snippets, setSnippets] = useState<{ id: number; name: string }[]>([]);
   const [isOidcUser, setIsOidcUser] = useState(false);
-  const [vaultProfiles, setVaultProfiles] = useState<VaultProfile[]>([]);
-  const [showVaultManager, setShowVaultManager] = useState(false);
   const [showSecretSources, setShowSecretSources] = useState(false);
   const [quickCredentialName, setQuickCredentialName] = useState("");
   const [creatingQuickCredential, setCreatingQuickCredential] = useState(false);
@@ -232,12 +228,6 @@ export function HostEditor({
     setField("customThemeColors", { ...theme.colors });
   };
 
-  const reloadVaultProfiles = () => {
-    getVaultProfiles()
-      .then((res) => setVaultProfiles(res as unknown as VaultProfile[]))
-      .catch(() => {});
-  };
-
   useEffect(() => {
     getUserInfo()
       .then((info) => setIsOidcUser(info.is_oidc))
@@ -251,7 +241,6 @@ export function HostEditor({
     loadSnippets
       .then((res) => setSnippets(mapSnippetResponse(res)))
       .catch(() => {});
-    reloadVaultProfiles();
   }, [adminTargetUserId]);
 
   useEffect(() => {
@@ -465,7 +454,7 @@ export function HostEditor({
   };
 
   // Shared hosts: view-level recipients see a read-only editor; edit-level
-  // recipients may change the host but never its credential/vault references
+  // recipients may change the host but never its credential references
   // or auth type (owner-only, enforced server-side too).
   const isSharedHost = !!host?.isShared;
   const readOnly = isSharedHost && host !== null && !canEditHost(host);
@@ -873,58 +862,6 @@ export function HostEditor({
                         </div>
                       </>
                     )}
-                    {authMethod === "vault" && (
-                      <div className="flex flex-col gap-1.5 col-span-2">
-                        <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                          {t("hosts.vaultProfile")}
-                        </label>
-                        <Select2
-                          value={form.vaultProfileId}
-                          onChange={(e) =>
-                            setField("vaultProfileId", e.target.value)
-                          }
-                          className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
-                        >
-                          <option value="">
-                            {t("hosts.selectAVaultProfile")}
-                          </option>
-                          {vaultProfiles.map((p) => (
-                            <option key={p.id} value={p.id}>
-                              {p.shared ? `${p.name} (shared)` : p.name}
-                            </option>
-                          ))}
-                        </Select2>
-                        <div className="flex items-center justify-between">
-                          <p className="text-[10px] text-muted-foreground">
-                            {t("hosts.vaultProfileHint")}
-                          </p>
-                          <div className="flex items-center gap-2 shrink-0">
-                            <a
-                              href="https://docs.termix.site/features/authentication/vault"
-                              target="_blank"
-                              rel="noreferrer"
-                              className="text-[10px] text-accent-brand hover:underline"
-                            >
-                              {t("hosts.docsLink")}
-                            </a>
-                            <button
-                              type="button"
-                              className="text-[10px] text-accent-brand hover:text-accent-brand/80"
-                              onClick={() => setShowVaultManager((v) => !v)}
-                            >
-                              {t("hosts.vaultManageProfiles")}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                    {authMethod === "vault" && showVaultManager && (
-                      <VaultProfileManager
-                        profiles={vaultProfiles}
-                        onChanged={reloadVaultProfiles}
-                        onClose={() => setShowVaultManager(false)}
-                      />
-                    )}
                     {authMethod === "credential" && (
                       <>
                         <div className="flex flex-col gap-1.5">

src/ui/sidebar/HostEditorData.ts

@@ -134,7 +134,6 @@ export function createHostEditorForm(
         : d?.credentialId != null
           ? String(d.credentialId)
           : "",
-    vaultProfileId: host?.vaultProfileId ?? "",
     overrideCredentialUsername: host?.overrideCredentialUsername ?? false,
     folder: host?.folder ?? "",
     parentHostId: host?.parentHostId ?? "",
@@ -294,7 +293,6 @@ export function omitOwnerSshAuthFromSharedEdit(
     keyType: _keyType,
     sudoPassword: _sudoPassword,
     credentialId: _credentialId,
-    vaultProfileId: _vaultProfileId,
     overrideCredentialUsername: _overrideCredentialUsername,
     shareSshAuth: _shareSshAuth,
     ...editableFields
@@ -325,7 +323,6 @@ export function buildHostEditorPayload(
   const usesKey = form.authType === "key";
   const usesPassword = form.authType === "password";
   const usesAgent = form.authType === "agent";
-  const usesVault = form.authType === "vault";
   // With SSH off, the host's primary protocol is the first plugin protocol
   // switched on, and its port stands in for the host port.
   const primaryProtocol = protocols.enableSsh
@@ -410,8 +407,6 @@ export function buildHostEditorPayload(
     keyType: usesKey && form.keyType !== "auto" ? form.keyType : null,
     credentialId:
       usesCredential && form.credentialId ? Number(form.credentialId) : null,
-    vaultProfileId:
-      usesVault && form.vaultProfileId ? Number(form.vaultProfileId) : null,
     overrideCredentialUsername: form.overrideCredentialUsername,
     notes: form.notes,
     enableTerminal: form.enableTerminal,

src/ui/sidebar/HostManagerData.ts

@@ -78,10 +78,6 @@ export function sshHostToHost(h: SSHHostWithStatus): Host {
     keyPassword: h.keyPassword,
     keyType: h.keyType,
     credentialId: h.credentialId != null ? String(h.credentialId) : undefined,
-    vaultProfileId:
-      (h as { vaultProfileId?: number | string | null }).vaultProfileId != null
-        ? String((h as { vaultProfileId?: number | string }).vaultProfileId)
-        : undefined,
     notes: h.notes,
     pin: h.pin ?? false,
     sortOrder: h.sortOrder ?? null,

src/ui/sidebar/VaultProfileManager.tsx

@@ -1,274 +0,0 @@
-import { getErrorMessage } from "../lib/error-message.js";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Pencil, Plus, Trash2, X } from "lucide-react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
-import {
-  createVaultProfile,
-  updateVaultProfile,
-  deleteVaultProfile,
-  type VaultProfilePayload,
-} from "@/main-axios";
-import type { VaultProfile } from "@/types/ui-types";
-import { Select2 } from "@/components/select2";
-
-type FormState = VaultProfilePayload & { id?: string };
-
-const emptyForm: FormState = {
-  name: "",
-  vaultAddr: "",
-  vaultNamespace: "",
-  oidcMount: "oidc",
-  oidcRole: "",
-  sshMount: "ssh-client-signer",
-  sshRole: "",
-  validPrincipals: "",
-  keyType: "ssh-ed25519",
-  shared: false,
-};
-
-function toForm(p: VaultProfile): FormState {
-  return {
-    id: p.id,
-    name: p.name,
-    vaultAddr: p.vaultAddr,
-    vaultNamespace: p.vaultNamespace ?? "",
-    oidcMount: p.oidcMount ?? "oidc",
-    oidcRole: p.oidcRole ?? "",
-    sshMount: p.sshMount ?? "ssh-client-signer",
-    sshRole: p.sshRole,
-    validPrincipals: p.validPrincipals ?? "",
-    keyType: p.keyType ?? "ssh-ed25519",
-    shared: p.shared,
-  };
-}
-
-export function VaultProfileManager({
-  profiles,
-  onChanged,
-  onClose,
-}: {
-  profiles: VaultProfile[];
-  onChanged: () => void;
-  onClose: () => void;
-}) {
-  const { t } = useTranslation();
-  const [form, setForm] = useState<FormState | null>(null);
-  const [saving, setSaving] = useState(false);
-
-  const setField = <K extends keyof FormState>(k: K, v: FormState[K]) =>
-    setForm((p) => (p ? { ...p, [k]: v } : p));
-
-  const handleSave = async () => {
-    if (!form) return;
-    if (!form.name.trim() || !form.vaultAddr.trim() || !form.sshRole.trim()) {
-      toast.error(t("hosts.vaultProfileValidationError"));
-      return;
-    }
-    setSaving(true);
-    try {
-      const payload: VaultProfilePayload = {
-        name: form.name.trim(),
-        vaultAddr: form.vaultAddr.trim(),
-        vaultNamespace: form.vaultNamespace?.trim() || null,
-        oidcMount: form.oidcMount?.trim() || null,
-        oidcRole: form.oidcRole?.trim() || null,
-        sshMount: form.sshMount?.trim() || null,
-        sshRole: form.sshRole.trim(),
-        validPrincipals: form.validPrincipals?.trim() || null,
-        keyType: form.keyType?.trim() || null,
-        shared: !!form.shared,
-      };
-      if (form.id) {
-        await updateVaultProfile(Number(form.id), payload);
-        toast.success(t("hosts.vaultProfileSaved"));
-      } else {
-        await createVaultProfile(payload);
-        toast.success(t("hosts.vaultProfileCreated"));
-      }
-      setForm(null);
-      onChanged();
-    } catch (e) {
-      toast.error(getErrorMessage(e, t("hosts.vaultProfileSaveFailed")));
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDelete = async (p: VaultProfile) => {
-    try {
-      await deleteVaultProfile(Number(p.id));
-      toast.success(t("hosts.vaultProfileDeleted"));
-      onChanged();
-    } catch (e) {
-      toast.error(getErrorMessage(e, t("hosts.vaultProfileDeleteFailed")));
-    }
-  };
-
-  const field = (label: string, key: keyof FormState, placeholder?: string) => (
-    <div className="flex flex-col gap-1">
-      <label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
-        {label}
-      </label>
-      <Input
-        className="h-8 text-xs"
-        placeholder={placeholder}
-        value={(form?.[key] as string) ?? ""}
-        onChange={(e) => setField(key, e.target.value as FormState[typeof key])}
-      />
-    </div>
-  );
-
-  return (
-    <div className="flex flex-col gap-3 col-span-2 border border-border bg-muted/20 p-3">
-      <div className="flex items-center justify-between">
-        <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-          {t("hosts.vaultManageProfiles")}
-        </span>
-        <button
-          type="button"
-          onClick={onClose}
-          className="text-muted-foreground hover:text-foreground"
-        >
-          <X className="size-3.5" />
-        </button>
-      </div>
-
-      {!form && (
-        <>
-          <div className="flex flex-col divide-y divide-border/50">
-            {profiles.length === 0 && (
-              <span className="text-[11px] text-muted-foreground py-1">
-                {t("hosts.vaultNoProfiles")}
-              </span>
-            )}
-            {profiles.map((p) => (
-              <div
-                key={p.id}
-                className="flex items-center justify-between py-1.5"
-              >
-                <div className="flex flex-col min-w-0">
-                  <span className="text-xs text-foreground truncate">
-                    {p.name}
-                    {p.shared && (
-                      <span className="ml-1 text-[9px] text-accent-brand">
-                        {t("hosts.vaultSharedBadge")}
-                      </span>
-                    )}
-                  </span>
-                  <span className="text-[10px] text-muted-foreground truncate">
-                    {p.vaultAddr}
-                  </span>
-                </div>
-                {p.owned && (
-                  <div className="flex items-center gap-1 shrink-0">
-                    <button
-                      type="button"
-                      title="Edit"
-                      onClick={() => setForm(toForm(p))}
-                      className="size-7 flex items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-muted-foreground/10"
-                    >
-                      <Pencil className="size-3.5" />
-                    </button>
-                    <button
-                      type="button"
-                      title="Delete"
-                      onClick={() => handleDelete(p)}
-                      className="size-7 flex items-center justify-center rounded text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10"
-                    >
-                      <Trash2 className="size-3.5" />
-                    </button>
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="h-7 text-[10px] self-start"
-            onClick={() => setForm({ ...emptyForm })}
-          >
-            <Plus className="size-3 mr-1" /> {t("hosts.vaultNewProfile")}
-          </Button>
-        </>
-      )}
-
-      {form && (
-        <div className="flex flex-col gap-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-            {field(t("hosts.friendlyNameLabel"), "name", "Production Vault")}
-            {field(
-              t("hosts.vaultAddrLabel"),
-              "vaultAddr",
-              "https://vault:8200",
-            )}
-            {field(t("hosts.vaultNamespaceLabel"), "vaultNamespace", "admin")}
-            {field(t("hosts.vaultOidcMountLabel"), "oidcMount", "oidc")}
-            {field(t("hosts.vaultOidcRoleLabel"), "oidcRole", "default")}
-            {field(
-              t("hosts.vaultSshMountLabel"),
-              "sshMount",
-              "ssh-client-signer",
-            )}
-            {field(t("hosts.vaultSshRoleLabel"), "sshRole", "my-role")}
-            {field(
-              t("hosts.vaultValidPrincipalsLabel"),
-              "validPrincipals",
-              "root,deploy",
-            )}
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
-              {t("hosts.vaultKeyTypeLabel")}
-            </label>
-            <Select2
-              value={form.keyType ?? "ssh-ed25519"}
-              onChange={(e) => setField("keyType", e.target.value)}
-              className="flex h-8 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
-            >
-              <option value="ssh-ed25519">Ed25519</option>
-              <option value="ecdsa-sha2-nistp256">ECDSA (nistp256)</option>
-              <option value="ssh-rsa">RSA (4096)</option>
-            </Select2>
-          </div>
-          <label className="flex items-center gap-2 text-xs text-foreground">
-            <input
-              type="checkbox"
-              checked={!!form.shared}
-              onChange={(e) => setField("shared", e.target.checked)}
-            />
-            {t("hosts.vaultSharedLabel")}
-          </label>
-          <div className="flex justify-end gap-2">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => setForm(null)}
-              disabled={saving}
-            >
-              {t("hosts.cancelBtn")}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="border-accent-brand/40 text-accent-brand"
-              onClick={handleSave}
-              disabled={saving}
-            >
-              {form.id
-                ? t("hosts.vaultSaveProfile")
-                : t("hosts.vaultCreateProfile")}
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}