@flame0510/project-aether 1.8.0 → 1.9.1

package/README.md

@@ -74,7 +74,7 @@ already filled in — you normally never set these by hand. See
 | Variable | Default | Required | Description |
 |---|---|---|---|
 | `PORT` | `3740` | No | Dashboard HTTP port |
-| `TERMINAL_WS_PORT` | `3741` | No | Container terminal WebSocket port |
+| `TERMINAL_WS_PORT` | `3741` | No | Loopback port of the container terminal server (the browser uses the dashboard's port) |
 | `REV4A_PASSWORD` | — | Yes | Dashboard login password (set via the setup wizard) |
 | `REV4A_TOKEN` | auto-generated | Yes | Bearer token for API routes and agent calls |
 | `REV4A_JWT_SECRET` | auto-generated | Yes | Secret for auth cookies |

package/app/agents/PageClient.tsx

@@ -284,6 +284,9 @@ function AgentListItem({
 
 export default function AgentsPageClient() {
   const router = useRouter();
+  // "+ New" navigates with router.push, which prefetches nothing: warm the route up front,
+  // so the click shows Create Agent (or its loading frame) at once.
+  useEffect(() => { router.prefetch('/agents/create'); }, [router]);
   const [agents, setAgents] = useState<Agent[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');

package/app/agents/create/loading.tsx

@@ -0,0 +1,51 @@
+import { Skeleton } from '../../components/Skeleton';
+
+/**
+ * Create Agent while the route loads: the template step's own frame (same wrappers,
+ * paddings and font boxes as PageClient.tsx), not the Agents list's rows — so opening it
+ * from "+ New" shows its shape at once and nothing moves when it lands.
+ */
+
+function Line({ width, size }: { width: number | string; size: number }) {
+  return <div style={{ fontSize: size }}><Skeleton as="span" inline width={width} height={Math.round(size * 0.8)} /></div>;
+}
+
+/** One card: an avatar, a name line, a description (one or two lines). */
+function Card({ square, lines, padding }: { square: boolean; lines: number; padding: string }) {
+  return (
+    <div style={{ display: 'flex', alignItems: square ? 'flex-start' : 'center', gap: 12, padding, border: '1px solid var(--border)' }}>
+      <Skeleton width={square ? 32 : 28} height={square ? 32 : 28} variant={square ? 'block' : 'circle'} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <Line width={110} size={14} />
+        <div style={{ marginTop: 2 }}>
+          {Array.from({ length: lines }).map((_, i) => <Line key={i} width={i === lines - 1 ? '45%' : '92%'} size={11} />)}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function CreateAgentLoading() {
+  return (
+    <div aria-busy="true" style={{ minHeight: '100dvh', overflowY: 'auto', paddingBottom: 72, boxSizing: 'border-box', width: '100%' }}>
+      <div style={{ width: '100%', maxWidth: 760, margin: '0 auto', padding: '24px 16px', boxSizing: 'border-box' }}>
+        <div style={{ fontSize: 20, fontWeight: 500, marginBottom: 24 }}>
+          <Skeleton as="span" inline width={150} height={20} accent />
+        </div>
+        <div style={{ fontSize: 12, marginBottom: 16 }}><Skeleton as="span" inline width={230} height={10} /></div>
+        <div style={{ marginBottom: 24 }}>
+          <div style={{ fontSize: 10, marginBottom: 8 }}><Skeleton as="span" inline width={130} height={8} /></div>
+          <Card square lines={2} padding="16px" />
+        </div>
+        <div style={{ fontSize: 10, marginBottom: 8 }}><Skeleton as="span" inline width={140} height={8} /></div>
+        <div style={{ display: 'grid', gap: 8 }}>
+          {[0, 1, 2].map((i) => <Card key={i} square={false} lines={1} padding="14px 16px" />)}
+        </div>
+        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between' }}>
+          <Skeleton width={70} height={28} />
+          <Skeleton width={62} height={28} accent />
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/agents/loading.tsx

@@ -1,14 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
 export default function AgentsLoading() {
-  return (
-    <div style={{
-      padding: '24px 20px',
-      maxWidth: 1080,
-      margin: '0 auto',
-    }}>
-      <Skeleton width={120} height={24} accent style={{ marginBottom: 20 }} />
-      <CardRowSkeleton count={5} height={56} />
-    </div>
-  );
+  return <ListPageSkeleton rows={5} rowHeight={56} />;
 }

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

@@ -221,7 +221,13 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
     // this is intentional (e.g. BOOTSTRAP.md only exists in custom/).
     const templateFiles = ['AGENTS.md', 'SOUL.md', 'IDENTITY.md', 'MEMORY.md', 'TOOLS.md', 'HEARTBEAT.md', 'BOOTSTRAP.md'];
 
+    // --init: Docker's tini runs as PID 1 and collects orphaned processes. Without it
+    // openclaw-gateway is PID 1 and never does, so every process a tool leaves behind
+    // (Chrome, builds, scripts) stays a zombie and counts against the container's pids
+    // limit until the container can no longer start anything. Same flag in
+    // lib/agent-recreate.ts.
     const cmd = `docker run -d \
+      --init \
       --name "${containerName}" \
       --network "${network}" \
       --restart unless-stopped \

package/app/api/assistant/route.ts

@@ -60,7 +60,7 @@ const PAGE_CONTEXT: Record<string, PageContext> = {
   },
   '/containers/terminal/[id]': {
     title: 'Container Terminal',
-    description: 'Interactive web terminal for a specific Docker container. Gives you a direct shell into any running container.',
+    description: 'Interactive web terminal for a specific Docker container: a real shell (Tab completion, history, top, vi, resizing). A dropped connection is resumed for 2 minutes; Close ends the shell.',
     actions: ['Run shell commands inside the container', 'Inspect files, processes, and logs live', 'Use any CLI tool available inside the container'],
     hints: 'This is a live terminal — changes you make inside the container are real. Be careful with destructive commands.',
   },

package/app/components/Skeleton.tsx

@@ -337,3 +337,48 @@ export function AgentSyncRowsSkeleton({ rows = 3 }: { rows?: number }) {
     </div>
   );
 }
+
+/**
+ * The frame of a route's `loading.tsx`: full width up to `maxWidth`, centred, scrollable.
+ *
+ * `width: 100%` is the point. The app shell's content area is a column flexbox, and a
+ * child with `margin: 0 auto` but no width is not stretched by it — it shrinks to its
+ * content. Every loader used to do exactly that, so its only fixed-width piece (a 120 px
+ * title bar) set the width of everything, and the rows came out 120 px wide.
+ */
+export function RouteLoadingShell({ children, maxWidth = 1080, padding = '24px 20px' }: {
+  children: React.ReactNode;
+  maxWidth?: number;
+  padding?: string;
+}) {
+  return (
+    <div
+      aria-busy="true"
+      style={{
+        width: '100%',
+        maxWidth,
+        margin: '0 auto',
+        padding,
+        boxSizing: 'border-box',
+        height: '100%',
+        overflowY: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** A title bar over a list of rows — the loader of the list pages. */
+export function ListPageSkeleton({ rows = 5, rowHeight = 48, titleWidth = 120 }: {
+  rows?: number;
+  rowHeight?: number;
+  titleWidth?: number;
+}) {
+  return (
+    <RouteLoadingShell>
+      <Skeleton width={titleWidth} height={20} accent style={{ marginBottom: 20 }} />
+      <CardRowSkeleton count={rows} height={rowHeight} />
+    </RouteLoadingShell>
+  );
+}

package/app/config/loading.tsx

@@ -1,10 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
-const PageSkeleton = () => (
-  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
-    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
-    <CardRowSkeleton count={5} height={48} />
-  </div>
-);
-
-export default PageSkeleton;
+export default function ConfigLoading() {
+  return <ListPageSkeleton />;
+}

package/app/containers/ContainersClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { Button, Pill } from '../components/ui';
 
 interface ContainerInfo {
@@ -85,7 +86,8 @@ export default function ContainersClient() {
                 {c.state === 'running' ? c.status.replace(/^Up\s+/, '') : c.status}
               </span>
               {c.state === 'running' && (
-                <a
+                // A client-side navigation (prefetched), not a full page reload.
+                <Link
                   href={`/containers/terminal/${encodeURIComponent(c.name)}`}
                   style={{
                     fontSize: 10,
@@ -100,7 +102,7 @@ export default function ContainersClient() {
                   }}
                 >
                   TERMINAL
-                </a>
+                </Link>
               )}
             </div>
 

package/app/containers/loading.tsx

@@ -1,21 +1,5 @@
-import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+import { ListPageSkeleton } from '../components/Skeleton';
 
 export default function ContainersLoading() {
-  return (
-    <div style={{
-      padding: '16px 20px',
-      maxWidth: 1080,
-      margin: '0 auto',
-      height: '100%',
-      boxSizing: 'border-box',
-      overflowY: 'auto',
-      WebkitOverflowScrolling: 'touch',
-      paddingBottom: 72,
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
-        <Skeleton width={140} height={20} accent />
-      </div>
-      <CardRowSkeleton count={4} height={56} />
-    </div>
-  );
+  return <ListPageSkeleton rows={4} rowHeight={56} titleWidth={140} />;
 }