@flame0510/project-aether 1.1.9

package/app/agents/create/PageClient.tsx

@@ -0,0 +1,437 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button, Input, TemplateOption } from '../../components/ui';
+
+interface TemplateInfo {
+  id: string;
+  files: string[];
+}
+
+interface ModelInfo {
+  id: string;
+  name: string;
+  provider: string;
+}
+
+interface Props {
+  templates: TemplateInfo[];
+  models: ModelInfo[];
+  usedNames: string[];
+  usedPorts: number[];
+}
+
+type Step = 'template' | 'config' | 'creating' | 'done' | 'error';
+
+const REV4A_PORT = 3740;
+
+function findFirstFreeBlock(usedPorts: number[]): number | null {
+  const used = new Set(usedPorts);
+  for (let base = 3700; base + 9 <= 3799; base += 10) {
+    if (base <= REV4A_PORT && REV4A_PORT <= base + 9) continue;
+    const block = Array.from({ length: 10 }, (_, i) => base + i);
+    if (block.every((p) => !used.has(p))) return base;
+  }
+  // Fallback beyond range
+  for (let base = 3800; ; base += 10) {
+    const block = Array.from({ length: 10 }, (_, i) => base + i);
+    if (block.every((p) => !used.has(p))) return base;
+  }
+}
+
+// ─── Toast ───
+function Toast({ message, type, onClose }: { message: string; type: 'success' | 'error'; onClose: () => void }) {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 4000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div style={{
+      position: 'fixed', bottom: 24, right: 24, zIndex: 9999,
+      padding: '12px 20px', borderRadius: 0, fontSize: 13,
+      background: type === 'success' ? '#1a3a1a' : '#3a1a1a',
+      border: `1px solid ${type === 'success' ? '#22c55e' : '#ef4444'}`,
+      color: type === 'success' ? '#bbf7d0' : '#fecaca',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+      animation: 'fadeIn 0.3s ease',
+      maxWidth: 400,
+    }}>
+      <style>{`@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
+      {type === 'success' ? '✓ ' : '✗ '}{message}
+    </div>
+  );
+}
+
+export default function CreatePageClient({ templates, models, usedNames, usedPorts: initialUsedPorts }: Props) {
+  const router = useRouter();
+
+  const [step, setStep] = useState<Step>('template');
+  const [selectedTemplate, setSelectedTemplate] = useState<string>('');
+  const [agentName, setAgentName] = useState('');
+  const [portRange, setPortRange] = useState<string>('');
+  const [selectedModel, setSelectedModel] = useState<string>(
+    models.length > 0 ? models[0].id : ''
+  );
+  const [fallbacks] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMsg, setErrorMsg] = useState('');
+  const [result, setResult] = useState<{ name: string; containerId: string; traefikUrl: string } | null>(null);
+  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
+
+  const handleSelectTemplate = (id: string) => {
+    setSelectedTemplate(id);
+    setAgentName('');
+    // Auto-assign port block: find first free 10-port block
+    if (initialUsedPorts.length === 0) {
+      setPortRange('3700-3709');
+    } else {
+      // Simple client-side block finder
+      let block = findFirstFreeBlock(initialUsedPorts);
+      setPortRange(block ? `${block}-${block + 9}` : '');
+    }
+  };
+
+  const nameError = useMemo(() => {
+    if (!agentName) return '';
+    if (agentName.length > 128) return 'Name too long (max 128 chars)';
+    if (usedNames.includes(agentName)) return 'Name is already in use by another agent';
+    return '';
+  }, [agentName, usedNames]);
+
+  const portError = useMemo(() => {
+    const v = portRange.trim();
+    if (!v) return '';
+    if (v.includes('-')) {
+      const m = v.match(/^(\d{1,5})-(\d{1,5})$/);
+      if (!m) return 'Use format: 3700-3709';
+      const start = parseInt(m[1], 10);
+      const end = parseInt(m[2], 10);
+      if (start < 1 || end > 65535) return 'Ports 1-65535';
+      if (end <= start) return 'End port must be greater than start';
+      for (let p = start; p <= end; p++) {
+        if (initialUsedPorts.includes(p)) return `Port ${p} is already in use`;
+        if (p === 3740) return 'Port 3740 is reserved';
+      }
+      return '';
+    }
+    const p = parseInt(v, 10);
+    if (isNaN(p) || p < 1 || p > 65535) return 'Port must be between 1 and 65535';
+    if (p === 3740) return 'Port 3740 is reserved';
+    if (initialUsedPorts.includes(p)) return 'Port is already in use';
+    return '';
+  }, [portRange, initialUsedPorts]);
+
+  const canProceed = (): boolean => {
+    if (step === 'template') return selectedTemplate !== '';
+    if (step === 'config') return agentName.length > 0 && !nameError && !portError;
+    return false;
+  };
+
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setStep('creating');
+    setErrorMsg('');
+
+    try {
+      const body: Record<string, unknown> = {
+        name: agentName,
+        template: selectedTemplate,
+      };
+      if (portRange.trim()) body.portRange = portRange.trim();
+      if (selectedModel) body.model = selectedModel;
+      if (fallbacks.length > 0) body.fallbacks = fallbacks;
+
+      const res = await fetch('/api/agents/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok || !data.success) {
+        setErrorMsg(data.error || 'Unknown error');
+        setStep('error');
+        setSubmitting(false);
+        return;
+      }
+
+      setSubmitting(false);
+      setResult(data);
+      setStep('done');
+      setToast({ message: `Agent "${agentName}" deployed successfully`, type: 'success' });
+    } catch (e: unknown) {
+      setErrorMsg((e as Error).message || 'Network error');
+      setStep('error');
+    }
+  };
+
+  // Template description helper
+  const templateDescription = (id: string): string => {
+    const descs: Record<string, string> = {
+      atlas: 'General-purpose agent. Trello discipline, code review, git workflow.',
+      argus: 'Security & audit agent. Strict protocol, delegation, lineage tracking.',
+      prometheus: 'Client-facing agent. Project delivery, repo discipline, documentation.',
+      custom: 'Blank slate. No preset identity — the agent will introduce itself and you define everything together.',
+    };
+    return descs[id] || 'Custom agent template';
+  };
+
+  return (
+    <div style={{ minHeight: '100dvh', overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 72, boxSizing: 'border-box' }}>
+    <div style={{ maxWidth: 760, margin: '0 auto', padding: '24px 16px' }}>
+      {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
+
+      <h1 style={{ fontSize: 20, fontWeight: 500, marginBottom: 24, color: 'var(--violet)' }}>
+        Create Agent
+      </h1>
+
+      {/* ─── Step: Template ─── */}
+      {step === 'template' && (
+        <div>
+          <div style={{ fontSize: 12, color: '#888', marginBottom: 16, letterSpacing: '0.05em' }}>
+            STEP 1 OF 2 &middot; SELECT TEMPLATE
+          </div>
+
+          {/* ── Custom: blank slate ── */}
+          <div style={{ marginBottom: 24 }}>
+            <div style={{
+              fontSize: 10, color: 'var(--violet)', textTransform: 'uppercase',
+              letterSpacing: '0.08em', marginBottom: 8,
+            }}>
+              Start from scratch
+            </div>
+            <button
+              type="button"
+              onClick={() => handleSelectTemplate('custom')}
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 12,
+                width: '100%',
+                padding: '16px',
+                textAlign: 'left',
+                fontSize: 14,
+                fontFamily: 'var(--font-mono-stack)',
+                color: 'var(--text)',
+                cursor: 'pointer',
+                outline: 'none',
+                transition: 'background 0.1s, border-color 0.1s',
+                background: selectedTemplate === 'custom' ? 'var(--violet-bg)' : 'transparent',
+                border: `1px solid ${selectedTemplate === 'custom' ? 'var(--violet)' : 'var(--border)'}`,
+              }}
+            >
+              <span style={{
+                width: 32,
+                height: 32,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: selectedTemplate === 'custom' ? 'var(--violet)' : 'var(--border)',
+                color: selectedTemplate === 'custom' ? '#111' : '#666',
+                fontSize: 14,
+                fontWeight: 600,
+                flexShrink: 0,
+              }}>
+                +
+              </span>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontWeight: 500, fontSize: 14 }}>Custom Agent</div>
+                <div style={{ fontSize: 11, color: '#888', marginTop: 2 }}>
+                  Blank slate. No preset identity &mdash; the agent will introduce itself and you define everything together.
+                </div>
+              </div>
+            </button>
+          </div>
+
+          {/* ── Pre-built templates ── */}
+          <div style={{
+            fontSize: 10, color: '#888', textTransform: 'uppercase',
+            letterSpacing: '0.08em', marginBottom: 8,
+          }}>
+            Pre-built templates
+          </div>
+          <div style={{ display: 'grid', gap: 8 }}>
+            {templates.filter(t => t.id !== 'custom').map((t) => (
+              <TemplateOption
+                key={t.id}
+                id={t.id}
+                selected={selectedTemplate === t.id}
+                description={templateDescription(t.id)}
+                onClick={() => handleSelectTemplate(t.id)}
+                badge={undefined}
+              />
+            ))}
+          </div>
+
+          <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between' }}>
+            <Button variant="ghost" size="md" onClick={() => router.push('/agents')}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="md" onClick={() => setStep('config')} disabled={!canProceed()}>
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* ─── Step: Config ─── */}
+      {step === 'config' && (
+        <div>
+          <div style={{ fontSize: 12, color: '#888', marginBottom: 16, letterSpacing: '0.05em' }}>
+            STEP 2 OF 2 &middot; CONFIGURE AGENT
+          </div>
+
+          {/* Name */}
+          <div style={{ marginBottom: 16 }}>
+            <Input
+              label="Agent Name"
+              value={agentName}
+              onChange={(e) => setAgentName(e.target.value)}
+              placeholder="My Agent 🤖"
+              error={nameError}
+            />
+          </div>
+
+          {/* Template info */}
+          <div style={{ marginBottom: 16, border: '1px solid var(--border)', borderRadius: 0, padding: '10px 14px', background: 'var(--bg)' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div>
+                <div style={{ fontSize: 11, color: '#888', marginBottom: 4 }}>TEMPLATE</div>
+                <div style={{ fontSize: 14, fontWeight: 500 }}>{selectedTemplate}</div>
+              </div>
+              <Button variant="ghost" size="sm" onClick={() => setStep('template')}>
+                Change
+              </Button>
+            </div>
+            <div style={{ fontSize: 11, color: '#666', marginTop: 6 }}>{templateDescription(selectedTemplate)}</div>
+          </div>
+
+          {/* Port */}
+          <div style={{ marginBottom: 16 }}>
+            <Input
+              label="Host Port"
+              value={portRange}
+              onChange={(e) => setPortRange(e.target.value.replace(/[^0-9-]/g, '').slice(0, 11))}
+              placeholder="3700-3709"
+              error={portError}
+            />
+            <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 4 }}>
+              Port range (e.g. 3700-3709) or single port (e.g. 3700). Default: 10-port block. Port 3740 is reserved.
+            </div>
+          </div>
+
+          {/* Model */}
+          <div style={{ marginBottom: 16 }}>
+            <label style={{ display: 'block', fontSize: 12, color: '#888', marginBottom: 6 }}>Model (optional)</label>
+            {models.length === 0 ? (
+              <div style={{
+                padding: '10px 12px',
+                background: 'rgba(251,191,36,0.06)',
+                border: '1px solid rgba(251,191,36,0.2)',
+                fontSize: 12, color: '#fbbf24',
+                lineHeight: 1.5,
+              }}>
+                No provider keys configured. Add API keys in the Providers section to unlock model selection.
+              </div>
+            ) : (
+              <select
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                style={{
+                  width: '100%', padding: '10px 12px', borderRadius: 0, border: '1px solid var(--border)',
+                  background: 'var(--bg)', color: 'var(--text)', fontSize: 14, outline: 'none',
+                }}
+              >
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>{m.name} ({m.provider})</option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          {/* Buttons */}
+          <div style={{ marginTop: 24, display: 'flex', gap: 12, justifyContent: 'space-between' }}>
+            <Button variant="ghost" size="md" onClick={() => setStep('template')}>
+              Back
+            </Button>
+            <Button variant="primary" size="md" onClick={handleSubmit} disabled={!canProceed() || submitting} loading={submitting}>
+              Deploy Agent
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* ─── Step: Creating ─── */}
+      {step === 'creating' && (
+        <div style={{ textAlign: 'center', padding: 40 }}>
+          <div style={{ fontSize: 14, color: '#888', marginBottom: 16 }}>Creating agent container...</div>
+          <div style={{
+            width: 32, height: 32, border: '2px solid var(--border)', borderTopColor: 'var(--violet)',
+            borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto',
+          }} />
+          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+        </div>
+      )}
+
+      {/* ─── Step: Done ─── */}
+      {step === 'done' && result && (
+        <div>
+          <div style={{
+            border: '1px solid #22c55e', borderRadius: 0, padding: 20, background: 'rgba(34,197,94,0.06)', marginBottom: 20,
+          }}>
+            <div style={{ color: '#22c55e', fontSize: 16, fontWeight: 500, marginBottom: 8 }}>✓ Agent deployed</div>
+            <div style={{ fontSize: 13, color: '#888', marginBottom: 4 }}>
+              Container: <span style={{ color: 'var(--text)', fontFamily: 'var(--font-mono-stack)' }}>{result.containerId}</span>
+            </div>
+            <div style={{ fontSize: 13, color: '#888', marginBottom: 4 }}>
+              Name: <span style={{ color: 'var(--text)' }}>{result.name}</span>
+            </div>
+            {result.traefikUrl && (
+              <div style={{ fontSize: 13, color: '#888' }}>
+                Access: <a href={result.traefikUrl} target="_blank" rel="noopener noreferrer"
+                  style={{ color: '#60a5fa', textDecoration: 'underline' }}>{result.traefikUrl}</a>
+              </div>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: 12 }}>
+            <Button variant="ghost" size="md" onClick={() => { setToast(null); router.push('/agents'); }} style={{ flex: 1 }}>
+              View All Agents
+            </Button>
+            <Button variant="primary" size="md" onClick={() => {
+              setToast(null);
+              setStep('template');
+              setSelectedTemplate('');
+              setAgentName('');
+              setPortRange('');
+              setSelectedModel('');
+              setResult(null);
+            }} style={{ flex: 1 }}>
+              Create Another
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* ─── Step: Error ─── */}
+      {step === 'error' && (
+        <div>
+          <div style={{
+            border: '1px solid #ef4444', borderRadius: 0, padding: 20, background: 'rgba(239,68,68,0.06)', marginBottom: 20,
+          }}>
+            <div style={{ color: '#ef4444', fontSize: 16, fontWeight: 500, marginBottom: 8 }}>Failed to create agent</div>
+            <div style={{ fontSize: 13, color: '#f87171', fontFamily: 'var(--font-mono-stack)', wordBreak: 'break-word' }}>
+              {errorMsg}
+            </div>
+          </div>
+          <Button variant="ghost" size="md" onClick={() => setStep('config')}>
+            Back to Config
+          </Button>
+        </div>
+      )}
+    </div>
+    </div>
+  );
+}

package/app/agents/create/page.tsx

@@ -0,0 +1,126 @@
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import { DB_FILE, AGENTS_TOKEN_FILE, MODELS_CONFIG_FILE, PROVIDER_KEYS_FILE, templatesDir } from '@/lib/rev4a-paths';
+import CreatePageClient from './PageClient';
+
+export const dynamic = 'force-dynamic';
+
+interface TemplateInfo {
+  id: string;
+  files: string[];
+}
+
+interface ModelInfo {
+  id: string;
+  name: string;
+  provider: string;
+}
+
+async function getTemplates(): Promise<TemplateInfo[]> {
+  const dir = templatesDir(process.cwd());
+  try {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    return entries
+      .filter((e) => e.isDirectory() && e.name !== 'base-image')
+      .map((e) => ({
+        id: e.name,
+        files: fs.readdirSync(path.join(dir, e.name)),
+      }));
+  } catch {
+    return [];
+  }
+}
+
+async function getModels(): Promise<ModelInfo[]> {
+  try {
+    const raw = fs.readFileSync(MODELS_CONFIG_FILE, 'utf-8');
+    const config = JSON.parse(raw);
+    const allModels: ModelInfo[] = (config.models || []).filter((m: { enabled: boolean }) => m.enabled !== false);
+
+    let configuredProviders: string[] = [];
+    try {
+      const keysRaw = fs.readFileSync(PROVIDER_KEYS_FILE, 'utf-8');
+      configuredProviders = Object.keys(JSON.parse(keysRaw));
+    } catch { /* no keys configured yet */ }
+
+    if (configuredProviders.length > 0) {
+      return allModels.filter((m) => configuredProviders.includes(m.provider));
+    }
+
+    // No providers configured — show no models
+    return [];
+  } catch {
+    return [];
+  }
+}
+
+async function getUsedNames(): Promise<string[]> {
+  try {
+    const raw = execSync(
+      `docker ps --filter "label=AGENT_ID" --format '{{.Names}}'`,
+      { encoding: 'utf-8', timeout: 5000 },
+    ).trim();
+    if (!raw) return [];
+
+    // Read AGENT_NAME env from each container (display name)
+    const names: string[] = [];
+    for (const name of raw.split('\n').filter(Boolean)) {
+      try {
+        const displayName = execSync(
+          `docker exec ${name} sh -c 'echo $AGENT_NAME'`,
+          { encoding: 'utf-8', timeout: 3000 },
+        ).trim();
+        if (displayName) names.push(displayName);
+      } catch { /* skip */ }
+    }
+    return names;
+  } catch {
+    return [];
+  }
+}
+
+async function getUsedPorts(): Promise<number[]> {
+  try {
+    const raw = execSync(
+      `docker ps --format '{{.Ports}}'`,
+      { encoding: 'utf-8', timeout: 5000 },
+    ).trim();
+    const ports: number[] = [];
+    if (raw) {
+      for (const line of raw.split('\n')) {
+        const matches = line.match(/(\d+)->/g);
+        if (matches) {
+          matches.forEach((m) => {
+            const p = parseInt(m.replace('->', ''), 10);
+            if (!isNaN(p)) ports.push(p);
+          });
+        }
+      }
+    }
+    // Add Rev4a port as reserved so the client won't suggest it
+    ports.push(3740);
+    return [...new Set(ports)];
+  } catch {
+    return [3740];
+  }
+}
+
+export default async function CreateAgentPage() {
+
+  const [templates, models, usedNames, usedPorts] = await Promise.all([
+    getTemplates(),
+    getModels(),
+    getUsedNames(),
+    getUsedPorts(),
+  ]);
+
+  return (
+    <CreatePageClient
+      templates={templates}
+      models={models}
+      usedNames={usedNames}
+      usedPorts={usedPorts}
+    />
+  );
+}

package/app/agents/loading.tsx

@@ -0,0 +1,14 @@
+import { Skeleton, CardRowSkeleton } 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>
+  );
+}

package/app/agents/page.tsx

@@ -0,0 +1,5 @@
+import AgentsPageClient from './PageClient';
+
+export default function AgentsPage() {
+  return <AgentsPageClient />;
+}