diff --git a/frontend/src/components/CopyField.jsx b/frontend/src/components/CopyField.jsx
new file mode 100644
index 00000000..605e6695
--- /dev/null
+++ b/frontend/src/components/CopyField.jsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { CopyButton } from './CopyButton';
+
+const MASK = '••••••••••••';
+
+/**
+ * The one way to show a value someone will copy: commands, IPs, URLs,
+ * connection strings, tokens, passwords.
+ *
+ *
+ *
+ *
+ *
+ * `secret` hides the value until the eye is pressed; copying works either way,
+ * so a secret never has to be shown to be used. Use the bare CopyButton only
+ * when the copied text is not on screen (a "Copy command" action).
+ */
+export default function CopyField({
+ value,
+ label,
+ secret = false,
+ multiline = false,
+ className,
+ onCopy,
+}) {
+ const { t } = useTranslation();
+ const [revealed, setRevealed] = useState(false);
+ const text = value == null ? '' : String(value);
+ const hidden = secret && !revealed;
+
+ return (
+
+ {badKey
+ ? t('app.envEditor.badKey', 'Use letters, digits and _, not starting with a digit.')
+ : t('app.envEditor.duplicate', '{{key}} is set more than once; the last one wins.', { key })}
+
+ )}
+
+ );
+ })}
+
+
+ {t('app.envEditor.pasteHint', 'Paste a .env file into a key box to fill several rows.')}
+
+
+ );
+}
diff --git a/frontend/src/components/PortField.jsx b/frontend/src/components/PortField.jsx
new file mode 100644
index 00000000..61d716ad
--- /dev/null
+++ b/frontend/src/components/PortField.jsx
@@ -0,0 +1,126 @@
+import { useEffect, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import api from '../services/api';
+
+const MIN_PORT = 1;
+const MAX_PORT = 65535;
+const PRIVILEGED_LIMIT = 1024;
+// Wait for typing to settle before asking the server about a port.
+const CHECK_DELAY_MS = 350;
+
+/**
+ * The one port input.
+ *
+ * // host port, checked
+ * // container port
+ *
+ * Host ports (the default) are checked against the server as you type and
+ * say who holds a taken one ("Used by shop-api"), with a one-click next free
+ * port. `ownerAppId` marks the app being edited, so its own port reads as
+ * its own rather than taken. Container ports only get range checks: they
+ * live inside the container and never collide on the host.
+ *
+ * onChange receives a number, or '' while the field is empty.
+ */
+export default function PortField({
+ value,
+ onChange,
+ host = true,
+ ownerAppId = null,
+ allowPrivileged = false,
+ suggestFrom = 8000,
+ placeholder = '8080',
+ disabled = false,
+ required = false,
+ id,
+ className,
+}) {
+ const { t } = useTranslation();
+ const fallbackId = useId();
+ const [check, setCheck] = useState(null);
+ const [suggestion, setSuggestion] = useState(null);
+
+ const raw = value === '' || value == null ? '' : String(value);
+ const port = raw === '' ? null : Number(raw);
+ const inRange = port != null && Number.isInteger(port) && port >= MIN_PORT && port <= MAX_PORT;
+ const privileged = inRange && port < PRIVILEGED_LIMIT;
+
+ useEffect(() => {
+ setCheck(null);
+ setSuggestion(null);
+ if (!host || !inRange || (privileged && !allowPrivileged)) return undefined;
+ let cancelled = false;
+ const timer = setTimeout(async () => {
+ try {
+ const res = await api.checkPort(port);
+ if (cancelled) return;
+ setCheck(res);
+ if (!res.free && !(ownerAppId != null && res.holder?.id === ownerAppId)) {
+ const next = await api.suggestPort(Math.max(port + 1, suggestFrom));
+ if (!cancelled) setSuggestion(next?.port ?? null);
+ }
+ } catch {
+ // The check is advisory; the deploy still validates the port.
+ }
+ }, CHECK_DELAY_MS);
+ return () => { cancelled = true; clearTimeout(timer); };
+ }, [host, port, inRange, privileged, allowPrivileged, ownerAppId, suggestFrom]);
+
+ const ownPort = check?.holder && ownerAppId != null && check.holder.id === ownerAppId;
+ let status = null;
+ if (raw !== '' && !inRange) {
+ status = { tone: 'error', text: t('app.portField.range', 'Ports run from 1 to 65535.') };
+ } else if (privileged && !allowPrivileged) {
+ status = { tone: 'error', text: t('app.portField.privileged', 'Ports below 1024 need root. Use 1024 or higher.') };
+ } else if (check && ownPort) {
+ status = { text: t('app.portField.ownPort', 'This app already uses {{port}}.', { port }) };
+ } else if (check?.holder?.kind === 'app') {
+ status = { tone: 'error', text: t('app.portField.usedByApp', 'Used by {{name}}.', { name: check.holder.name }) };
+ } else if (check?.holder) {
+ status = { tone: 'error', text: t('app.portField.usedByContainer', 'A running container already maps {{port}}.', { port }) };
+ } else if (check && !check.free) {
+ status = { tone: 'error', text: t('app.portField.bound', 'Something outside ServerKit is listening on {{port}}.', { port }) };
+ } else if (check?.free) {
+ status = { text: t('app.portField.free', '{{port}} is free.', { port }) };
+ }
+
+ return (
+