feat(ui): credential vault page — list, add, delete with type-specific forms

- ui/src/api/credentials.ts: typed API client for vault CRUD
  (listCredentials, createCredential, updateCredential, deleteCredential)
- ui/src/pages/Credentials.tsx: full-featured Credentials page
  - Table listing all credentials (label, type badge, device_id, created_by, timestamp)
  - Filter by label substring (debounced) and credential type
  - Add modal with type-specific field forms (SSH / SNMP / API key / password / custom JSON)
  - Delete button (admin-only) with confirm dialog
  - Encrypted-at-rest info banner
- ui/src/App.tsx: /credentials route
- ui/src/components/Layout.tsx: 🔑 Credentials nav entry

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AbfhpQR6qzZAXcTacEcZvn

Author: claude

ui/src/App.tsx

@@ -11,6 +11,7 @@ import Networks from "./pages/Networks";
 import Topology from "./pages/Topology";
 import Devices from "./pages/Devices";
 import Teams from "./pages/Teams";
+import Credentials from "./pages/Credentials";
 
 export default function App() {
   const auth = useAuthProvider();
@@ -36,6 +37,7 @@ export default function App() {
             <Route path="devices" element={<Devices />} />
             <Route path="vulns" element={<Vulns />} />
             <Route path="teams" element={<Teams />} />
+            <Route path="credentials" element={<Credentials />} />
           </Route>
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>

ui/src/api/credentials.ts

@@ -0,0 +1,55 @@
+import { apiFetch } from "./client";
+
+export interface Credential {
+  id: string;
+  label: string;
+  credential_type: string;
+  device_id: string | null;
+  created_by: string;
+  updated_by: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CredentialCreate {
+  label: string;
+  credential_type: string;
+  device_id?: string | null;
+  data: Record<string, string>;
+}
+
+export interface CredentialUpdate {
+  label?: string;
+  device_id?: string | null;
+  data?: Record<string, string>;
+}
+
+export const listCredentials = (params?: {
+  credential_type?: string;
+  label?: string;
+  skip?: number;
+  limit?: number;
+}) => {
+  const qs = new URLSearchParams();
+  if (params?.credential_type) qs.set("credential_type", params.credential_type);
+  if (params?.label) qs.set("label", params.label);
+  if (params?.skip != null) qs.set("skip", String(params.skip));
+  if (params?.limit != null) qs.set("limit", String(params.limit));
+  const q = qs.toString();
+  return apiFetch<Credential[]>(`/api/v1/vault/credentials${q ? `?${q}` : ""}`);
+};
+
+export const createCredential = (body: CredentialCreate) =>
+  apiFetch<Credential>("/api/v1/vault/credentials", {
+    method: "POST",
+    body: JSON.stringify(body),
+  });
+
+export const updateCredential = (id: string, body: CredentialUpdate) =>
+  apiFetch<Credential>(`/api/v1/vault/credentials/${id}`, {
+    method: "PATCH",
+    body: JSON.stringify(body),
+  });
+
+export const deleteCredential = (id: string) =>
+  apiFetch<void>(`/api/v1/vault/credentials/${id}`, { method: "DELETE" });

ui/src/components/Layout.tsx

@@ -10,6 +10,7 @@ const NAV_ITEMS = [
   { to: "/devices", label: "Devices", icon: "⊞" },
   { to: "/vulns", label: "Vulnerabilities", icon: "🛡" },
   { to: "/teams", label: "Teams", icon: "👥" },
+  { to: "/credentials", label: "Credentials", icon: "🔑" },
 ];
 
 export default function Layout() {