refactor(web): extract admin editor modals with deep-link routes

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/web/src/App.jsx

@@ -69,12 +69,20 @@ export function App() {
         <Route path="/failures" element={<FailuresPage />} />
         <Route path="/kv" element={<KvPage />} />
         <Route path="/variables" element={<VariablesPage />} />
+        <Route path="/variables/new" element={<VariablesPage />} />
+        <Route path="/variables/:owner/:name/edit" element={<VariablesPage />} />
         <Route path="/auth" element={<AuthProfilesPage />} />
+        <Route path="/auth/new" element={<AuthProfilesPage />} />
+        <Route path="/auth/:name/edit" element={<AuthProfilesPage />} />
         <Route path="/responses" element={<ResponsesPage />} />
         {user.role === "admin" ? (
           <>
             <Route path="/users" element={<UsersPage />} />
+            <Route path="/users/new" element={<UsersPage />} />
+            <Route path="/users/:username/edit" element={<UsersPage />} />
             <Route path="/secrets" element={<SecretsPage />} />
+            <Route path="/secrets/new" element={<SecretsPage />} />
+            <Route path="/secrets/:owner/:name/edit" element={<SecretsPage />} />
             <Route path="/manage" element={<OpsPage />} />
             <Route path="/ops" element={<Navigate to="/manage" replace />} />
             <Route path="/backup" element={<BackupPage />} />
@@ -82,7 +90,9 @@ export function App() {
         ) : (
           <>
             <Route path="/users" element={<Navigate to="/" replace />} />
+            <Route path="/users/*" element={<Navigate to="/" replace />} />
             <Route path="/secrets" element={<Navigate to="/" replace />} />
+            <Route path="/secrets/*" element={<Navigate to="/" replace />} />
             <Route path="/manage" element={<Navigate to="/" replace />} />
             <Route path="/ops" element={<Navigate to="/" replace />} />
             <Route path="/backup" element={<Navigate to="/" replace />} />

packages/web/src/components/SecretEditorModal.jsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { errorMessage } from "../api/client.js";
+import { useOwners, useUpsertSecret } from "../api/hooks.js";
+
+/**
+ * Add / replace an encrypted secret.
+ * Reusable: mount when open; parent supplies mode + initial fields.
+ *
+ * @param {"add" | "replace"} mode
+ * @param {{ owner: string, name?: string }} initial
+ * @param {() => void} onClose
+ * @param {(saved: unknown) => void} [onSaved]
+ * @param {boolean} [lockOwner]
+ */
+export function SecretEditorModal({
+  mode,
+  initial,
+  onClose,
+  onSaved,
+  lockOwner = false,
+}) {
+  const { data: owners = [] } = useOwners();
+  const upsert = useUpsertSecret();
+  const [form, setForm] = useState(() => ({
+    owner: initial.owner || owners[0] || "default",
+    name: initial.name || "",
+    value: "",
+  }));
+
+  function onSubmit(e) {
+    e.preventDefault();
+    upsert.mutate(
+      { owner: form.owner, name: form.name, value: form.value },
+      {
+        onSuccess: (data) => {
+          onSaved?.(data?.secret ?? data);
+          onClose();
+        },
+      },
+    );
+  }
+
+  const title = mode === "add" ? "New secret" : `Replace ${form.owner}/${form.name}`;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-md">
+        <h3 className="font-bold">{title}</h3>
+        <form className="mt-3 space-y-2" onSubmit={onSubmit}>
+          {mode === "add" ? (
+            <>
+              <label className="form-control w-full">
+                <span className="label py-0 text-sm">Owner</span>
+                {owners.length > 0 ? (
+                  <select
+                    className="select w-full"
+                    value={form.owner}
+                    onChange={(e) => setForm({ ...form, owner: e.target.value })}
+                    required
+                    disabled={lockOwner}
+                  >
+                    {owners.map((o) => (
+                      <option key={o} value={o}>
+                        {o}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    className="input w-full"
+                    value={form.owner}
+                    onChange={(e) => setForm({ ...form, owner: e.target.value })}
+                    required
+                    disabled={lockOwner}
+                  />
+                )}
+              </label>
+              <label className="form-control w-full">
+                <span className="label py-0 text-sm">Name</span>
+                <input
+                  className="input w-full font-mono"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  required
+                  pattern="[A-Za-z0-9._-]+"
+                  title="Letters, numbers, dots, underscores, hyphens"
+                />
+              </label>
+            </>
+          ) : null}
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">Value</span>
+            <input
+              type="password"
+              className="input w-full"
+              value={form.value}
+              onChange={(e) => setForm({ ...form, value: e.target.value })}
+              required
+              autoComplete="new-password"
+            />
+          </label>
+          <p className="text-xs opacity-60">
+            Values are encrypted at rest and never shown again after save. Values shorter than 8
+            characters are not redacted from logs.
+          </p>
+          {upsert.isError ? (
+            <p className="text-error text-sm">{errorMessage(upsert.error)}</p>
+          ) : null}
+          <div className="modal-action">
+            <button type="button" className="btn btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={upsert.isPending}>
+              {upsert.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}

packages/web/src/components/UserEditorModal.jsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { errorMessage } from "../api/client.js";
+import { useCreateUser, useUpdateUser } from "../api/hooks.js";
+
+/**
+ * Add / edit a local user.
+ * Reusable: mount when open; pass `user` for edit.
+ *
+ * @param {"add" | "edit"} mode
+ * @param {{ id: string, username: string, role: string }} [user]
+ * @param {() => void} onClose
+ * @param {(saved: unknown) => void} [onSaved]
+ */
+export function UserEditorModal({ mode, user, onClose, onSaved }) {
+  const create = useCreateUser();
+  const update = useUpdateUser();
+  const [form, setForm] = useState(() => ({
+    username: user?.username || "",
+    password: "",
+    role: user?.role || "operator",
+    id: user?.id || null,
+  }));
+
+  const mutation = mode === "add" ? create : update;
+
+  function onSubmit(e) {
+    e.preventDefault();
+    if (mode === "add") {
+      create.mutate(
+        {
+          username: form.username,
+          password: form.password,
+          role: form.role,
+        },
+        {
+          onSuccess: (data) => {
+            onSaved?.(data?.user ?? data);
+            onClose();
+          },
+        },
+      );
+      return;
+    }
+    const body = { id: form.id, role: form.role };
+    if (form.password) body.password = form.password;
+    update.mutate(body, {
+      onSuccess: (data) => {
+        onSaved?.(data?.user ?? data);
+        onClose();
+      },
+    });
+  }
+
+  const title = mode === "add" ? "New user" : form.username;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-md">
+        <h3 className="font-bold">{title}</h3>
+        <form className="mt-3 space-y-2" onSubmit={onSubmit}>
+          {mode === "add" ? (
+            <label className="form-control w-full">
+              <span className="label py-0 text-sm">Username</span>
+              <input
+                className="input w-full"
+                value={form.username}
+                onChange={(e) => setForm({ ...form, username: e.target.value })}
+                required
+              />
+            </label>
+          ) : null}
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">
+              {mode === "add" ? "Password" : "New password"}
+            </span>
+            <input
+              type="password"
+              className="input w-full"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              required={mode === "add"}
+              minLength={mode === "add" ? 8 : undefined}
+              placeholder={mode === "edit" ? "leave blank to keep" : ""}
+            />
+          </label>
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">Role</span>
+            <select
+              className="select w-full"
+              value={form.role}
+              onChange={(e) => setForm({ ...form, role: e.target.value })}
+            >
+              <option value="operator">operator</option>
+              <option value="admin">admin</option>
+            </select>
+          </label>
+          {mutation.isError ? (
+            <p className="text-error text-sm">{errorMessage(mutation.error)}</p>
+          ) : null}
+          <div className="modal-action">
+            <button type="button" className="btn btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={mutation.isPending}>
+              {mutation.isPending ? (
+                <span className="loading loading-spinner loading-xs" />
+              ) : null}
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}

packages/web/src/components/VariableEditorModal.jsx

@@ -0,0 +1,191 @@
+import { useState } from "react";
+import { errorMessage } from "../api/client.js";
+import { useOwners, useUpsertVariable } from "../api/hooks.js";
+
+const TYPES = ["string", "number", "boolean"];
+
+function defaultValue(type) {
+  if (type === "boolean") return false;
+  if (type === "number") return "";
+  return "";
+}
+
+/**
+ * Add / edit a plaintext workflow variable.
+ * Reusable: mount when open; parent supplies mode + initial fields.
+ *
+ * @param {"add" | "edit"} mode
+ * @param {{ owner: string, name?: string, type?: string, value?: string | number | boolean }} initial
+ * @param {() => void} onClose
+ * @param {(saved: unknown) => void} [onSaved]
+ * @param {boolean} [lockOwner] When true, owner cannot be changed (add mode).
+ */
+export function VariableEditorModal({
+  mode,
+  initial,
+  onClose,
+  onSaved,
+  lockOwner = false,
+}) {
+  const { data: owners = [] } = useOwners();
+  const upsert = useUpsertVariable();
+  const [form, setForm] = useState(() => ({
+    owner: initial.owner || owners[0] || "default",
+    name: initial.name || "",
+    type: initial.type || "string",
+    value:
+      initial.type === "number"
+        ? String(initial.value ?? "")
+        : initial.value !== undefined
+          ? initial.value
+          : defaultValue(initial.type || "string"),
+  }));
+  const [formError, setFormError] = useState(null);
+
+  function onTypeChange(type) {
+    setForm({ ...form, type, value: defaultValue(type) });
+  }
+
+  function onSubmit(e) {
+    e.preventDefault();
+    let value = form.value;
+    if (form.type === "number") {
+      value = Number(form.value);
+      if (!Number.isFinite(value)) {
+        setFormError("value must be a finite number");
+        return;
+      }
+    }
+    if (form.type === "boolean") {
+      value = form.value === true;
+    }
+    setFormError(null);
+    upsert.mutate(
+      { owner: form.owner, name: form.name, type: form.type, value },
+      {
+        onSuccess: (data) => {
+          onSaved?.(data?.variable ?? data);
+          onClose();
+        },
+      },
+    );
+  }
+
+  const title = mode === "add" ? "New variable" : `Edit ${form.owner}/${form.name}`;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-md">
+        <h3 className="font-bold">{title}</h3>
+        <form className="mt-3 space-y-2" onSubmit={onSubmit}>
+          {mode === "add" ? (
+            <>
+              <label className="form-control w-full">
+                <span className="label py-0 text-sm">Owner</span>
+                {owners.length > 0 ? (
+                  <select
+                    className="select w-full"
+                    value={form.owner}
+                    onChange={(e) => setForm({ ...form, owner: e.target.value })}
+                    required
+                    disabled={lockOwner}
+                  >
+                    {owners.map((o) => (
+                      <option key={o} value={o}>
+                        {o}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    className="input w-full"
+                    value={form.owner}
+                    onChange={(e) => setForm({ ...form, owner: e.target.value })}
+                    required
+                    disabled={lockOwner}
+                  />
+                )}
+              </label>
+              <label className="form-control w-full">
+                <span className="label py-0 text-sm">Name</span>
+                <input
+                  className="input w-full font-mono"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  required
+                  pattern="[A-Za-z0-9._-]+"
+                  title="Letters, numbers, dots, underscores, hyphens"
+                />
+              </label>
+            </>
+          ) : null}
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">Type</span>
+            <select
+              className="select w-full"
+              value={form.type}
+              onChange={(e) => onTypeChange(e.target.value)}
+            >
+              {TYPES.map((t) => (
+                <option key={t} value={t}>
+                  {t}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="form-control w-full">
+            <span className="label py-0 text-sm">Value</span>
+            {form.type === "boolean" ? (
+              <select
+                className="select w-full"
+                value={form.value === true ? "true" : "false"}
+                onChange={(e) => setForm({ ...form, value: e.target.value === "true" })}
+              >
+                <option value="true">true</option>
+                <option value="false">false</option>
+              </select>
+            ) : form.type === "number" ? (
+              <input
+                type="number"
+                className="input w-full font-mono"
+                value={form.value}
+                onChange={(e) => setForm({ ...form, value: e.target.value })}
+                required
+                step="any"
+              />
+            ) : (
+              <textarea
+                className="textarea w-full font-mono min-h-24"
+                value={form.value}
+                onChange={(e) => setForm({ ...form, value: e.target.value })}
+                spellCheck={false}
+              />
+            )}
+          </label>
+          <p className="text-xs opacity-60">
+            Stored in plaintext. Use Secrets for credentials. In workflows use{" "}
+            <span className="font-mono">$VAR_name</span> as a whole field.
+          </p>
+          {formError ? <p className="text-error text-sm">{formError}</p> : null}
+          {upsert.isError ? (
+            <p className="text-error text-sm">{errorMessage(upsert.error)}</p>
+          ) : null}
+          <div className="modal-action">
+            <button type="button" className="btn btn-ghost" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={upsert.isPending}>
+              {upsert.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}

packages/web/src/pages/SecretsPage.jsx

@@ -1,54 +1,80 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
+import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
-import {
+import { useDeleteSecret, useOwners, useSecrets } from "../api/hooks.js";
-  useDeleteSecret,
+import { SecretEditorModal } from "../components/SecretEditorModal.jsx";
-  useOwners,
-  useSecrets,
-  useUpsertSecret,
-} from "../api/hooks.js";
 import { formatTime } from "../lib/format.jsx";
 
 export function SecretsPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { owner: routeOwner, name: routeName } = useParams();
+  const [params] = useSearchParams();
+  const isNewRoute = /\/secrets\/new\/?$/.test(location.pathname);
+  const isEditRoute = Boolean(routeOwner && routeName);
+
   const { data: owners = [] } = useOwners();
-  const [ownerFilter, setOwnerFilter] = useState("");
+  const [ownerFilter, setOwnerFilter] = useState(
+    () => routeOwner || params.get("owner") || "",
+  );
   const { data: secrets = [], isLoading } = useSecrets(ownerFilter || undefined);
-  const upsert = useUpsertSecret();
   const del = useDeleteSecret();
-  const [mode, setMode] = useState(null);
+  const [editor, setEditor] = useState(null);
-  const [form, setForm] = useState({
-    owner: "",
-    name: "",
-    value: "",
-  });
   const [confirmDelete, setConfirmDelete] = useState(null);
+  const [highlightName, setHighlightName] = useState(() => routeName || "");
+  const highlightRef = useRef(null);
+  const openedRouteKey = useRef(null);
 
-  function openAdd() {
+  const listPath = ownerFilter
-    setMode("add");
+    ? `/secrets?owner=${encodeURIComponent(ownerFilter)}`
-    setForm({
+    : "/secrets";
-      owner: ownerFilter || owners[0] || "default",
+
-      name: "",
+  function closeEditor() {
-      value: "",
+    setEditor(null);
+    openedRouteKey.current = null;
+    if (isNewRoute || isEditRoute) {
+      navigate(listPath, { replace: true });
+    }
+  }
+
+  useEffect(() => {
+    if (!isNewRoute) return;
+    const key = `new:${params.get("owner") || ""}:${params.get("name") || ""}`;
+    if (openedRouteKey.current === key) return;
+    if (!params.get("owner") && !ownerFilter && owners.length === 0) return;
+    const owner = params.get("owner") || ownerFilter || owners[0] || "default";
+    if (params.get("owner")) setOwnerFilter(params.get("owner"));
+    openedRouteKey.current = key;
+    setEditor({
+      mode: "add",
+      initial: { owner, name: params.get("name") || "" },
     });
-  }
+  }, [isNewRoute, params, owners, ownerFilter]);
 
-  function openReplace(s) {
+  useEffect(() => {
-    setMode("replace");
+    if (!isEditRoute) {
-    setForm({ owner: s.owner, name: s.name, value: "" });
+      if (!isNewRoute) openedRouteKey.current = null;
-  }
+      return;
+    }
+    if (ownerFilter !== routeOwner) {
+      setOwnerFilter(routeOwner);
+      return;
+    }
+    const key = `edit:${routeOwner}/${routeName}`;
+    if (openedRouteKey.current === key) return;
+    openedRouteKey.current = key;
+    setHighlightName(routeName);
+    setEditor({
+      mode: "replace",
+      initial: { owner: routeOwner, name: routeName },
+    });
+  }, [isEditRoute, isNewRoute, routeOwner, routeName, ownerFilter]);
 
-  function closeForm() {
+  useEffect(() => {
-    setMode(null);
+    if (!highlightName || isLoading) return;
-    setForm({ owner: "", name: "", value: "" });
+    highlightRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }
+  }, [highlightName, isLoading, secrets]);
-
-  function onSubmit(e) {
-    e.preventDefault();
-    upsert.mutate(
-      { owner: form.owner, name: form.name, value: form.value },
-      { onSuccess: closeForm },
-    );
-  }
 
   return (
     <div className="space-y-4">
@@ -58,7 +84,16 @@ export function SecretsPage() {
           <select
             className="select select-sm"
             value={ownerFilter}
-            onChange={(e) => setOwnerFilter(e.target.value)}
+            onChange={(e) => {
+              setOwnerFilter(e.target.value);
+              setHighlightName("");
+              navigate(
+                e.target.value
+                  ? `/secrets?owner=${encodeURIComponent(e.target.value)}`
+                  : "/secrets",
+                { replace: true },
+              );
+            }}
           >
             <option value="">all owners</option>
             {owners.map((o) => (
@@ -67,7 +102,17 @@ export function SecretsPage() {
               </option>
             ))}
           </select>
-          <button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={() =>
+              navigate(
+                ownerFilter
+                  ? `/secrets/new?owner=${encodeURIComponent(ownerFilter)}`
+                  : "/secrets/new",
+              )
+            }
+          >
             <LuPlus className="size-4" />
             Add
           </button>
@@ -90,109 +135,59 @@ export function SecretsPage() {
               </tr>
             </thead>
             <tbody>
-              {secrets.map((s) => (
+              {secrets.map((s) => {
-                <tr key={s.id} className="hover">
+                const highlighted =
-                  <td className="font-mono">{s.owner}</td>
+                  highlightName &&
-                  <td className="font-mono">{s.name}</td>
+                  s.name === highlightName &&
-                  <td className="whitespace-nowrap">{formatTime(s.updated_at)}</td>
+                  (!ownerFilter || s.owner === ownerFilter);
-                  <td className="text-right whitespace-nowrap">
+                return (
-                    <button
+                  <tr
-                      type="button"
+                    key={s.id}
-                      className="btn btn-ghost btn-xs"
+                    ref={highlighted ? highlightRef : undefined}
-                      title="Replace value"
+                    className={`hover ${highlighted ? "bg-primary/10 outline outline-1 outline-primary/40" : ""}`}
-                      onClick={() => openReplace(s)}
+                  >
-                    >
+                    <td className="font-mono">{s.owner}</td>
-                      <LuPencil className="size-4" />
+                    <td className="font-mono">{s.name}</td>
-                    </button>
+                    <td className="whitespace-nowrap">{formatTime(s.updated_at)}</td>
-                    <button
+                    <td className="text-right whitespace-nowrap">
-                      type="button"
+                      <button
-                      className="btn btn-ghost btn-xs text-error"
+                        type="button"
-                      title="Delete"
+                        className="btn btn-ghost btn-xs"
-                      onClick={() => setConfirmDelete(s)}
+                        title="Replace value"
-                    >
+                        onClick={() =>
-                      <LuTrash2 className="size-4" />
+                          navigate(
-                    </button>
+                            `/secrets/${encodeURIComponent(s.owner)}/${encodeURIComponent(s.name)}/edit`,
-                  </td>
+                          )
-                </tr>
+                        }
-              ))}
+                      >
+                        <LuPencil className="size-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-ghost btn-xs text-error"
+                        title="Delete"
+                        onClick={() => setConfirmDelete(s)}
+                      >
+                        <LuTrash2 className="size-4" />
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </div>
       )}
 
-      {mode ? (
+      {editor ? (
-        <form
+        <SecretEditorModal
-          onSubmit={onSubmit}
+          mode={editor.mode}
-          className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4"
+          initial={editor.initial}
-        >
+          onClose={closeEditor}
-          <div className="flex items-center justify-between">
+          onSaved={(saved) => {
-            <legend className="fieldset-legend">
+            setHighlightName(saved?.name || editor.initial.name);
-              {mode === "add" ? "New secret" : `Replace ${form.owner}/${form.name}`}
+          }}
-            </legend>
+        />
-            <button
-              type="button"
-              className="btn btn-ghost btn-sm btn-square"
-              onClick={closeForm}
-              aria-label="Close"
-            >
-              <LuX className="size-4" />
-            </button>
-          </div>
-          {mode === "add" ? (
-            <>
-              <label className="label">Owner</label>
-              {owners.length > 0 ? (
-                <select
-                  className="select w-full"
-                  value={form.owner}
-                  onChange={(e) => setForm({ ...form, owner: e.target.value })}
-                  required
-                >
-                  {owners.map((o) => (
-                    <option key={o} value={o}>
-                      {o}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <input
-                  className="input w-full"
-                  value={form.owner}
-                  onChange={(e) => setForm({ ...form, owner: e.target.value })}
-                  required
-                />
-              )}
-              <label className="label">Name</label>
-              <input
-                className="input w-full font-mono"
-                value={form.name}
-                onChange={(e) => setForm({ ...form, name: e.target.value })}
-                required
-                pattern="[A-Za-z0-9._-]+"
-                title="Letters, numbers, dots, underscores, hyphens"
-              />
-            </>
-          ) : null}
-          <label className="label">Value</label>
-          <input
-            type="password"
-            className="input w-full"
-            value={form.value}
-            onChange={(e) => setForm({ ...form, value: e.target.value })}
-            required
-            autoComplete="new-password"
-          />
-          <p className="text-xs opacity-60 mt-1">
-            Values are encrypted at rest and never shown again after save.
-            Values shorter than 8 characters are not redacted from logs.
-          </p>
-          {upsert.isError ? (
-            <p className="text-error text-sm">{errorMessage(upsert.error)}</p>
-          ) : null}
-          <button type="submit" className="btn btn-primary mt-2" disabled={upsert.isPending}>
-            Save
-          </button>
-        </form>
       ) : null}
 
       {confirmDelete ? (
@@ -201,7 +196,9 @@ export function SecretsPage() {
             <h3 className="font-bold">
               Delete {confirmDelete.owner}/{confirmDelete.name}?
             </h3>
-            <p className="text-sm mt-2">This cannot be undone. Workflows that retrieve this name will fail.</p>
+            <p className="text-sm mt-2">
+              This cannot be undone. Workflows that retrieve this name will fail.
+            </p>
             {del.isError ? (
               <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
             ) : null}

packages/web/src/pages/UsersPage.jsx

@@ -1,66 +1,64 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
-import {
+import { useDeleteUser, useUsers } from "../api/hooks.js";
-  useCreateUser,
+import { UserEditorModal } from "../components/UserEditorModal.jsx";
-  useDeleteUser,
-  useUpdateUser,
-  useUsers,
-} from "../api/hooks.js";
 
 export function UsersPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { username: routeUsername } = useParams();
+  const isNewRoute = /\/users\/new\/?$/.test(location.pathname);
+  const isEditRoute = Boolean(routeUsername) && !isNewRoute;
+
   const { data: users = [], isLoading } = useUsers();
-  const create = useCreateUser();
-  const update = useUpdateUser();
   const del = useDeleteUser();
-  const [mode, setMode] = useState(null);
+  const [editor, setEditor] = useState(null);
-  const [form, setForm] = useState({
-    username: "",
-    password: "",
-    role: "operator",
-    id: null,
-  });
   const [confirmDelete, setConfirmDelete] = useState(null);
+  const openedRouteKey = useRef(null);
 
-  function openAdd() {
+  function closeEditor() {
-    setMode("add");
+    setEditor(null);
-    setForm({ username: "", password: "", role: "operator", id: null });
+    openedRouteKey.current = null;
-  }
+    if (isNewRoute || isEditRoute) {
-
+      navigate("/users", { replace: true });
-  function openEdit(u) {
-    setMode("edit");
-    setForm({ username: u.username, password: "", role: u.role, id: u.id });
-  }
-
-  function closeForm() {
-    setMode(null);
-  }
-
-  function onSubmit(e) {
-    e.preventDefault();
-    if (mode === "add") {
-      create.mutate(
-        {
-          username: form.username,
-          password: form.password,
-          role: form.role,
-        },
-        { onSuccess: closeForm },
-      );
-    } else {
-      const body = { id: form.id, role: form.role };
-      if (form.password) body.password = form.password;
-      update.mutate(body, { onSuccess: closeForm });
     }
   }
 
-  const mutation = mode === "add" ? create : update;
+  useEffect(() => {
+    if (!isNewRoute) return;
+    if (openedRouteKey.current === "new") return;
+    openedRouteKey.current = "new";
+    setEditor({ mode: "add" });
+  }, [isNewRoute]);
+
+  useEffect(() => {
+    if (!isEditRoute) {
+      if (!isNewRoute) openedRouteKey.current = null;
+      return;
+    }
+    if (isLoading) return;
+    const key = `edit:${routeUsername}`;
+    if (openedRouteKey.current === key) return;
+    openedRouteKey.current = key;
+    const user = users.find((u) => u.username === routeUsername);
+    if (!user) {
+      setEditor({ mode: "add" });
+      return;
+    }
+    setEditor({ mode: "edit", user });
+  }, [isEditRoute, isNewRoute, routeUsername, isLoading, users]);
 
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-2">
         <h1 className="text-xl font-semibold">Users</h1>
-        <button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
+        <button
+          type="button"
+          className="btn btn-primary btn-sm"
+          onClick={() => navigate("/users/new")}
+        >
           <LuPlus className="size-4" />
           Add
         </button>
@@ -90,7 +88,9 @@ export function UsersPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
-                      onClick={() => openEdit(u)}
+                      onClick={() =>
+                        navigate(`/users/${encodeURIComponent(u.username)}/edit`)
+                      }
                     >
                       <LuPencil className="size-4" />
                     </button>
@@ -110,53 +110,12 @@ export function UsersPage() {
         </div>
       )}
 
-      {mode ? (
+      {editor ? (
-        <form onSubmit={onSubmit} className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4">
+        <UserEditorModal
-          <div className="flex items-center justify-between">
+          mode={editor.mode}
-            <legend className="fieldset-legend">
+          user={editor.user}
-              {mode === "add" ? "New user" : form.username}
+          onClose={closeEditor}
-            </legend>
+        />
-            <button type="button" className="btn btn-ghost btn-sm btn-square" onClick={closeForm} aria-label="Close">
-              <LuX className="size-4" />
-            </button>
-          </div>
-          {mode === "add" ? (
-            <>
-              <label className="label">Username</label>
-              <input
-                className="input w-full"
-                value={form.username}
-                onChange={(e) => setForm({ ...form, username: e.target.value })}
-                required
-              />
-            </>
-          ) : null}
-          <label className="label">{mode === "add" ? "Password" : "New password"}</label>
-          <input
-            type="password"
-            className="input w-full"
-            value={form.password}
-            onChange={(e) => setForm({ ...form, password: e.target.value })}
-            required={mode === "add"}
-            minLength={mode === "add" ? 8 : undefined}
-            placeholder={mode === "edit" ? "leave blank to keep" : ""}
-          />
-          <label className="label">Role</label>
-          <select
-            className="select w-full"
-            value={form.role}
-            onChange={(e) => setForm({ ...form, role: e.target.value })}
-          >
-            <option value="operator">operator</option>
-            <option value="admin">admin</option>
-          </select>
-          {mutation.isError ? (
-            <p className="text-error text-sm">{errorMessage(mutation.error)}</p>
-          ) : null}
-          <button type="submit" className="btn btn-primary mt-2" disabled={mutation.isPending}>
-            Save
-          </button>
-        </form>
       ) : null}
 
       {confirmDelete ? (

packages/web/src/pages/VariablesPage.jsx

@@ -1,95 +1,110 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
+import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
-import {
+import { useDeleteVariable, useOwners, useVariables } from "../api/hooks.js";
-  useDeleteVariable,
+import { VariableEditorModal } from "../components/VariableEditorModal.jsx";
-  useOwners,
-  useUpsertVariable,
-  useVariables,
-} from "../api/hooks.js";
 import { formatTime } from "../lib/format.jsx";
 
-const TYPES = ["string", "number", "boolean"];
-
-function defaultValue(type) {
-  if (type === "boolean") return false;
-  if (type === "number") return "";
-  return "";
-}
-
 function displayValue(value) {
   if (typeof value === "string") return value === "" ? '""' : value;
   return String(value);
 }
 
 export function VariablesPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { owner: routeOwner, name: routeName } = useParams();
+  const [params] = useSearchParams();
+  const isNewRoute = /\/variables\/new\/?$/.test(location.pathname);
+  const isEditRoute = Boolean(routeOwner && routeName);
+
   const { data: owners = [] } = useOwners();
-  const [ownerFilter, setOwnerFilter] = useState("");
+  const [ownerFilter, setOwnerFilter] = useState(
+    () => routeOwner || params.get("owner") || "",
+  );
   const { data: variables = [], isLoading } = useVariables(ownerFilter || undefined);
-  const upsert = useUpsertVariable();
   const del = useDeleteVariable();
-  const [mode, setMode] = useState(null);
+  const [editor, setEditor] = useState(null);
-  const [form, setForm] = useState({
-    owner: "",
-    name: "",
-    type: "string",
-    value: "",
-  });
-  const [formError, setFormError] = useState(null);
   const [confirmDelete, setConfirmDelete] = useState(null);
+  const [highlightName, setHighlightName] = useState(() => routeName || "");
+  const highlightRef = useRef(null);
+  const openedRouteKey = useRef(null);
 
-  function openAdd() {
+  const listPath = ownerFilter
-    setMode("add");
+    ? `/variables?owner=${encodeURIComponent(ownerFilter)}`
-    setFormError(null);
+    : "/variables";
-    setForm({
-      owner: ownerFilter || owners[0] || "default",
-      name: "",
-      type: "string",
-      value: "",
-    });
-  }
 
-  function openEdit(row) {
+  function closeEditor() {
-    setMode("edit");
+    setEditor(null);
-    setFormError(null);
+    openedRouteKey.current = null;
-    setForm({
+    if (isNewRoute || isEditRoute) {
-      owner: row.owner,
+      navigate(listPath, { replace: true });
-      name: row.name,
-      type: row.type,
-      value: row.type === "number" ? String(row.value) : row.value,
-    });
-  }
-
-  function closeForm() {
-    setMode(null);
-    setFormError(null);
-    setForm({ owner: "", name: "", type: "string", value: "" });
-  }
-
-  function onTypeChange(type) {
-    setForm({ ...form, type, value: defaultValue(type) });
-  }
-
-  function onSubmit(e) {
-    e.preventDefault();
-    let value = form.value;
-    if (form.type === "number") {
-      value = Number(form.value);
-      if (!Number.isFinite(value)) {
-        setFormError("value must be a finite number");
-        return;
-      }
     }
-    if (form.type === "boolean") {
-      value = form.value === true;
-    }
-    setFormError(null);
-    upsert.mutate(
-      { owner: form.owner, name: form.name, type: form.type, value },
-      { onSuccess: closeForm },
-    );
   }
 
+  useEffect(() => {
+    if (!isNewRoute) return;
+    const key = `new:${params.get("owner") || ""}:${params.get("name") || ""}`;
+    if (openedRouteKey.current === key) return;
+    if (!params.get("owner") && !ownerFilter && owners.length === 0) return;
+    const owner = params.get("owner") || ownerFilter || owners[0] || "default";
+    if (params.get("owner")) setOwnerFilter(params.get("owner"));
+    openedRouteKey.current = key;
+    setEditor({
+      mode: "add",
+      initial: {
+        owner,
+        name: params.get("name") || "",
+        type: "string",
+        value: "",
+      },
+    });
+  }, [isNewRoute, params, owners, ownerFilter]);
+
+  useEffect(() => {
+    if (!isEditRoute) {
+      if (!isNewRoute) openedRouteKey.current = null;
+      return;
+    }
+    if (ownerFilter !== routeOwner) {
+      setOwnerFilter(routeOwner);
+      return;
+    }
+    if (isLoading) return;
+    const key = `edit:${routeOwner}/${routeName}`;
+    if (openedRouteKey.current === key) return;
+    openedRouteKey.current = key;
+    setHighlightName(routeName);
+    const row = variables.find((v) => v.owner === routeOwner && v.name === routeName);
+    if (row) {
+      setEditor({
+        mode: "edit",
+        initial: {
+          owner: row.owner,
+          name: row.name,
+          type: row.type,
+          value: row.value,
+        },
+      });
+      return;
+    }
+    setEditor({
+      mode: "add",
+      initial: {
+        owner: routeOwner,
+        name: routeName,
+        type: "string",
+        value: "",
+      },
+    });
+  }, [isEditRoute, isNewRoute, routeOwner, routeName, ownerFilter, isLoading, variables]);
+
+  useEffect(() => {
+    if (!highlightName || isLoading) return;
+    highlightRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [highlightName, isLoading, variables]);
+
   return (
     <div className="space-y-4">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
@@ -98,7 +113,16 @@ export function VariablesPage() {
           <select
             className="select select-sm"
             value={ownerFilter}
-            onChange={(e) => setOwnerFilter(e.target.value)}
+            onChange={(e) => {
+              setOwnerFilter(e.target.value);
+              setHighlightName("");
+              navigate(
+                e.target.value
+                  ? `/variables?owner=${encodeURIComponent(e.target.value)}`
+                  : "/variables",
+                { replace: true },
+              );
+            }}
           >
             <option value="">all owners</option>
             {owners.map((o) => (
@@ -107,7 +131,17 @@ export function VariablesPage() {
               </option>
             ))}
           </select>
-          <button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={() =>
+              navigate(
+                ownerFilter
+                  ? `/variables/new?owner=${encodeURIComponent(ownerFilter)}`
+                  : "/variables/new",
+              )
+            }
+          >
             <LuPlus className="size-4" />
             Add
           </button>
@@ -132,144 +166,66 @@ export function VariablesPage() {
               </tr>
             </thead>
             <tbody>
-              {variables.map((row) => (
+              {variables.map((row) => {
-                <tr key={row.id} className="hover">
+                const highlighted =
-                  <td className="font-mono">{row.owner}</td>
+                  highlightName &&
-                  <td className="font-mono">{row.name}</td>
+                  row.name === highlightName &&
-                  <td className="font-mono text-xs">{row.type}</td>
+                  (!ownerFilter || row.owner === ownerFilter);
-                  <td className="font-mono text-xs max-w-xs truncate" title={displayValue(row.value)}>
+                return (
-                    {displayValue(row.value)}
+                  <tr
-                  </td>
+                    key={row.id}
-                  <td className="whitespace-nowrap">{formatTime(row.updated_at)}</td>
+                    ref={highlighted ? highlightRef : undefined}
-                  <td className="text-right whitespace-nowrap">
+                    className={`hover ${highlighted ? "bg-primary/10 outline outline-1 outline-primary/40" : ""}`}
-                    <button
+                  >
-                      type="button"
+                    <td className="font-mono">{row.owner}</td>
-                      className="btn btn-ghost btn-xs"
+                    <td className="font-mono">{row.name}</td>
-                      title="Edit"
+                    <td className="font-mono text-xs">{row.type}</td>
-                      onClick={() => openEdit(row)}
+                    <td
+                      className="font-mono text-xs max-w-xs truncate"
+                      title={displayValue(row.value)}
                     >
-                      <LuPencil className="size-4" />
+                      {displayValue(row.value)}
-                    </button>
+                    </td>
-                    <button
+                    <td className="whitespace-nowrap">{formatTime(row.updated_at)}</td>
-                      type="button"
+                    <td className="text-right whitespace-nowrap">
-                      className="btn btn-ghost btn-xs text-error"
+                      <button
-                      title="Delete"
+                        type="button"
-                      onClick={() => setConfirmDelete(row)}
+                        className="btn btn-ghost btn-xs"
-                    >
+                        title="Edit"
-                      <LuTrash2 className="size-4" />
+                        onClick={() =>
-                    </button>
+                          navigate(
-                  </td>
+                            `/variables/${encodeURIComponent(row.owner)}/${encodeURIComponent(row.name)}/edit`,
-                </tr>
+                          )
-              ))}
+                        }
+                      >
+                        <LuPencil className="size-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-ghost btn-xs text-error"
+                        title="Delete"
+                        onClick={() => setConfirmDelete(row)}
+                      >
+                        <LuTrash2 className="size-4" />
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </div>
       )}
 
-      {mode ? (
+      {editor ? (
-        <form
+        <VariableEditorModal
-          onSubmit={onSubmit}
+          mode={editor.mode}
-          className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4"
+          initial={editor.initial}
-        >
+          onClose={closeEditor}
-          <div className="flex items-center justify-between">
+          onSaved={(saved) => {
-            <legend className="fieldset-legend">
+            setHighlightName(saved?.name || editor.initial.name);
-              {mode === "add" ? "New variable" : `Edit ${form.owner}/${form.name}`}
+          }}
-            </legend>
+        />
-            <button
-              type="button"
-              className="btn btn-ghost btn-sm btn-square"
-              onClick={closeForm}
-              aria-label="Close"
-            >
-              <LuX className="size-4" />
-            </button>
-          </div>
-          {mode === "add" ? (
-            <>
-              <label className="label">Owner</label>
-              {owners.length > 0 ? (
-                <select
-                  className="select w-full"
-                  value={form.owner}
-                  onChange={(e) => setForm({ ...form, owner: e.target.value })}
-                  required
-                >
-                  {owners.map((o) => (
-                    <option key={o} value={o}>
-                      {o}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <input
-                  className="input w-full"
-                  value={form.owner}
-                  onChange={(e) => setForm({ ...form, owner: e.target.value })}
-                  required
-                />
-              )}
-              <label className="label">Name</label>
-              <input
-                className="input w-full font-mono"
-                value={form.name}
-                onChange={(e) => setForm({ ...form, name: e.target.value })}
-                required
-                pattern="[A-Za-z0-9._-]+"
-                title="Letters, numbers, dots, underscores, hyphens"
-              />
-            </>
-          ) : null}
-          <label className="label">Type</label>
-          <select
-            className="select w-full"
-            value={form.type}
-            onChange={(e) => onTypeChange(e.target.value)}
-          >
-            {TYPES.map((t) => (
-              <option key={t} value={t}>
-                {t}
-              </option>
-            ))}
-          </select>
-          <label className="label">Value</label>
-          {form.type === "boolean" ? (
-            <select
-              className="select w-full"
-              value={form.value === true ? "true" : "false"}
-              onChange={(e) => setForm({ ...form, value: e.target.value === "true" })}
-            >
-              <option value="true">true</option>
-              <option value="false">false</option>
-            </select>
-          ) : form.type === "number" ? (
-            <input
-              type="number"
-              className="input w-full font-mono"
-              value={form.value}
-              onChange={(e) => setForm({ ...form, value: e.target.value })}
-              required
-              step="any"
-            />
-          ) : (
-            <textarea
-              className="textarea w-full font-mono min-h-24"
-              value={form.value}
-              onChange={(e) => setForm({ ...form, value: e.target.value })}
-              spellCheck={false}
-            />
-          )}
-          <p className="text-xs opacity-60 mt-1">
-            Stored in plaintext. Use Secrets for credentials. In workflows use{" "}
-            <span className="font-mono">$VAR_name</span> as a whole field.
-          </p>
-          {formError ? <p className="text-error text-sm">{formError}</p> : null}
-          {upsert.isError ? (
-            <p className="text-error text-sm">{errorMessage(upsert.error)}</p>
-          ) : null}
-          <button type="submit" className="btn btn-primary mt-2" disabled={upsert.isPending}>
-            Save
-          </button>
-        </form>
       ) : null}
 
       {confirmDelete ? (