@flame0510/project-aether 1.4.1 → 1.4.2

package/app/agents/PageClient.tsx

@@ -770,6 +770,14 @@ function currentPortRange(ports: string): string {
   return min === max ? `${min}` : `${min}-${max}`;
 }
 
+/** The agent's own published host ports, from the `3700:3000, 3701:3001` string. */
+function ownHostPorts(ports: string): number[] {
+  return (ports || '')
+    .split(',')
+    .map((p) => parseInt(p.trim().split(':')[0] ?? '', 10))
+    .filter((n) => Number.isInteger(n));
+}
+
 function EditAgentModal({ agent, onClose, onSaved, onStarted }: {
   agent: Agent;
   onClose: () => void;
@@ -780,20 +788,37 @@ function EditAgentModal({ agent, onClose, onSaved, onStarted }: {
 }) {
   const initialName = agent.displayName || agent.name;
   const initialPorts = currentPortRange(agent.ports);
+  const ownPorts = useMemo(() => ownHostPorts(agent.ports), [agent.ports]);
   const [displayName, setDisplayName] = useState(initialName);
   const [portRange, setPortRange] = useState(initialPorts);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
+  // The ports other containers hold, fetched when the panel opens: the same set the
+  // create form gets as a page prop, from the same lookup (`GET /api/agents/ports`).
+  const [usedPorts, setUsedPorts] = useState<Set<number> | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch('/api/agents/ports', { signal: controller.signal })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: { ports?: number[] } | null) => {
+        if (data && Array.isArray(data.ports)) setUsedPorts(new Set(data.ports));
+      })
+      .catch((e: unknown) => { if ((e as Error)?.name !== 'AbortError') setUsedPorts(null); });
+    return () => controller.abort();
+  }, []);
 
-  // Client-side shape checks (the same messages as the API). Whether a port is already
-  // published by another agent is checked by the server, which knows every container
-  // and excludes this agent's own block.
+  // The same rules and messages as agent creation (lib/agent-ports.ts). This agent's own
+  // block is excluded, so keeping or shifting it is not a conflict with itself; every
+  // other container counts, running or stopped.
   const nameError = displayName.trim() ? '' : 'Display name must not be empty';
   const portError = useMemo(() => {
     if (!portRange.trim()) return '';
-    const r = validatePortInput(portRange);
+    const others = new Set(usedPorts ?? []);
+    for (const p of ownPorts) others.delete(p);
+    const r = validatePortInput(portRange, others);
     return r.valid ? '' : r.error;
-  }, [portRange]);
+  }, [portRange, usedPorts, ownPorts]);
 
   const nameChanged = displayName.trim() !== initialName;
   const portsChanged = portRange.trim() !== initialPorts;
@@ -882,7 +907,7 @@ function EditAgentModal({ agent, onClose, onSaved, onStarted }: {
             {error && <div style={{ fontSize: 11, color: '#ef4444' }}>{error}</div>}
             <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
               <Button variant="secondary" size="sm" onClick={onClose} disabled={saving}>Cancel</Button>
-              <Button variant="primary" size="sm" onClick={handleSave} disabled={saving}>
+              <Button variant="primary" size="sm" onClick={handleSave} disabled={saving || !!nameError || !!portError}>
                 {saving ? 'Saving...' : 'Save & Recreate'}
               </Button>
             </div>

package/app/agents/create/PageClient.tsx

@@ -60,6 +60,20 @@ export default function CreatePageClient({ templates, models, usedNames, usedPor
   const [selectedTemplate, setSelectedTemplate] = useState<string>('');
   const [agentName, setAgentName] = useState('');
   const [portRange, setPortRange] = useState<string>('');
+  // The server render seeds this; the same endpoint the Edit panel uses refreshes it, so
+  // both flows validate against the same numbers (every container, running or stopped).
+  const [usedPorts, setUsedPorts] = useState<number[]>(initialUsedPorts);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch('/api/agents/ports', { signal: controller.signal })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: { ports?: number[] } | null) => {
+        if (data && Array.isArray(data.ports)) setUsedPorts(data.ports);
+      })
+      .catch(() => { /* the server still validates on submit */ });
+    return () => controller.abort();
+  }, []);
   const [selectedModel, setSelectedModel] = useState<string>(
     models.length > 0 ? models[0].id : ''
   );
@@ -73,11 +87,11 @@ export default function CreatePageClient({ templates, models, usedNames, usedPor
     setSelectedTemplate(id);
     setAgentName('');
     // Auto-assign port block: find first free 10-port block
-    if (initialUsedPorts.length === 0) {
+    if (usedPorts.length === 0) {
       setPortRange('3700-3709');
     } else {
-      // Simple client-side block finder
-      const block = initialUsedPorts.length ? findAvailablePortBlock(new Set(initialUsedPorts)) : null;
+      // Same block finder as the server: the first free 10-port block.
+      const block = findAvailablePortBlock(new Set(usedPorts));
       setPortRange(block ? `${block}-${block + 9}` : '');
     }
   };
@@ -91,9 +105,9 @@ export default function CreatePageClient({ templates, models, usedNames, usedPor
 
   const portError = useMemo(() => {
     if (!portRange.trim()) return '';
-    const res = validatePortInput(portRange, new Set(initialUsedPorts));
+    const res = validatePortInput(portRange, new Set(usedPorts));
     return res.valid ? '' : res.error;
-  }, [portRange, initialUsedPorts]);
+  }, [portRange, usedPorts]);
 
   const canProceed = (): boolean => {
     if (step === 'template') return selectedTemplate !== '';

package/app/api/agents/ports/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import { requireAuthJWT } from '@/lib/rev4a-auth';
+import { getUsedHostPorts } from '@/lib/agent-ports-server';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * GET /api/agents/ports
+ *
+ * The host ports held by any container, running or stopped — the set the port validators
+ * in lib/agent-ports.ts take. The create form receives it as a page prop; the Edit panel
+ * fetches it when it opens, so both flows validate a range against the same numbers and
+ * the same rules, and give the same message.
+ */
+export async function GET(request: Request): Promise<NextResponse> {
+  const denied = await requireAuthJWT(request); if (denied) return denied as any;
+  const ports = await getUsedHostPorts();
+  return NextResponse.json({ ports: [...ports].sort((a, b) => a - b) });
+}

package/docs/ARCHITECTURE.md

@@ -189,6 +189,10 @@ The central container, running the Next.js dashboard + orchestration API.
   `recreateAgentContainer()` refuses such a clash **before** removing anything, naming the
   container that holds each port, so the agent stays up and the operator changes the range
   from the Edit panel; a failed `docker run` no longer leaves a container behind.
+  The two forms validate a range **as it is typed** against that same set — the create
+  wizard through its page prop plus `GET /api/agents/ports`, the Edit panel through the
+  endpoint when it opens — so both show the same message and disable their action while
+  the range is refused, instead of letting the server refuse it on submit.
 - **Agent edits** are `lib/agent-edit.ts`, with their state in the `agent_edits` table
   (`lib/agent-edit-state.ts`): the display name (`AGENT_NAME`) and/or the port range are
   applied by rebuilding the container on the image it already runs — **no backup**, the

package/docs/FRONTEND-ARCHITECTURE.md

@@ -48,7 +48,7 @@ All shared UI primitives live in `app/components/ui/` and are exported from `app
 | `ImageDownloadBanner` | `app/agents/ImageDownloadBanner.tsx` | Agent image banner on the Agents page. Polls `/api/agents/image-status` every 2 s; offers **Download Image** when no supported version is downloaded, **Download <version>** when the registry publishes a newer one, and shows the download in progress and its completion. Downloading changes no agent. |
 | `BrowserAccessSection` / `OpenControlUiButton` | `app/agents/BrowserAccessSection.tsx` | Browser access to one agent's Control UI, in its detail panel: requests waiting for approval (Approve / Reject) and approved browsers (Rename / Revoke), refreshed every 5 s while mounted. A successful approve, reject, rename or revoke updates the list at once, since the refresh behind it runs the OpenClaw CLI and takes seconds; a read started before the mutation is discarded. On agents that require approval, "Invite link" fetches `/api/agents/[id]/invite-link` and shows the link in a read-only field with Copy, which uses the Clipboard API in a secure context and the field's selection over plain HTTP, plus a warning when the link uses localhost. `OpenControlUiButton` opens `/api/agents/[id]/open-control-ui` in a new tab inside the click; that route redirects to a one-time link that pairs the browser with no approval, or to the plain token link when none can be issued. Used on the agent cards and in the panel. |
 | `ChannelManager` / `ChannelSection` | `app/agents/ChannelManager.tsx`, `ChannelSection` inline in `app/agents/PageClient.tsx` | Telegram, in the agent detail panel (`ChannelSection` is the card that opens the modal; the modal title is the agent's display name). Reads `GET /channels`; lists pending pairing requests with **Approve** (`POST /channels/pairing`) and approved senders with **Revoke** after a confirm (`DELETE /channels/pairing?senderId=`). Pending comes from `openclaw pairing list`, approved from OpenClaw's pairing store (`lib/channelManager.ts`). Polls pairings every 5 s while open; one keyed busy state per action. |
-| `EditAgentModal` / `EditBanner` | `app/agents/PageClient.tsx` | Rename/ports editing. The modal has **Display Name** and **Host Port** (same input and validation messages as the create wizard, from `lib/agent-ports.ts`), sends `PATCH /api/agents/[id]` and closes on `202`; `EditBanner` (top of the agent detail) polls `GET /api/agents/[id]` every 2 s while an edit is `rebuilding`, resumes on mount, and refetches the agent once it finishes, so a reload or a navigation shows the running edit instead of allowing a second (the server answers 409). No backup is taken: the volume is untouched. |
+| `EditAgentModal` / `EditBanner` | `app/agents/PageClient.tsx` | Rename/ports editing. The modal has **Display Name** and **Host Port** (same input and validation messages as the create wizard, from `lib/agent-ports.ts`), sends `PATCH /api/agents/[id]` and closes on `202`; `EditBanner` (top of the agent detail) polls `GET /api/agents/[id]` every 2 s while an edit is `rebuilding`, resumes on mount, and refetches the agent once it finishes, so a reload or a navigation shows the running edit instead of allowing a second (the server answers 409). No backup is taken: the volume is untouched. The port range is validated **as it is typed**: the modal fetches `GET /api/agents/ports` when it opens (the same set the create form uses, every container, running or stopped) and excludes the agent's own block, so an occupied range shows the API's message inline and the Save button stays disabled — the create wizard does the same with the same endpoint. |
 | `ModelSection` | `app/agents/ModelSection.tsx` | Primary model and fallbacks for one agent, in its detail panel. Explicit save, no restart. The model is a property of the agent, not of the gateway. Tags models the catalogue marks `deprecated`. |
 | `ModelsProvider` / `useModels` | `app/lib/models-context.tsx` | The client's single model list, from `/api/models`. Whatever changes what is offered calls `refresh()`: the Gateway page after a toggle, a key save or removal, or a sync, and the first-run wizard after saving keys. Everything else only reads, PulseChat included. |
 | `WizardPageClient` + step components | `app/wizard/PageClient.tsx` | Multi-step first-run wizard plus its frame shell, with mobile-first CSS. |

package/docs/dev/API-REFERENCE.md

@@ -704,6 +704,27 @@ List running agent containers (Docker containers with `AGENT_ID` label) with ful
 
 ---
 
+### `GET /api/agents/ports`
+The host ports held by any container, running or stopped: the set the validators in
+`lib/agent-ports.ts` take, sorted ascending. Backed by the shared lookup
+(`getUsedHostPorts()`, `lib/agent-ports-server.ts`), which reads every container's
+`HostConfig.PortBindings` — a stopped container keeps its block while `docker ps -a` and
+the API's container list report nothing for it.
+
+**Auth:** `rev4a_token` cookie or `Authorization: Bearer <REV4A_TOKEN>`
+
+**Response:**
+```json
+{ "ports": [3700, 3701, 3710, 3711, 3741, 5555] }
+```
+
+The Edit panel fetches it when it opens and the create form refreshes it on mount (the
+page also receives it as a prop), so both validate a range as the operator types, against
+the same numbers and with the same messages, and both disable their action while the range
+is refused.
+
+---
+
 ### `GET /api/agents/models-summary`
 One row per agent container, running or not: the model it runs and whether that
 model is still in good standing. Feeds the model chip on the agent cards. Running

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flame0510/project-aether",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Rev4a — Revolution for Agents. OpenClaw agent fleet orchestrator.",
   "keywords": [
     "openclaw",