@flame0510/project-aether 1.1.9

package/app/components/ui/Tabs.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+interface TabItem {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  count?: number | string;
+}
+
+interface TabsProps {
+  items: TabItem[];
+  className?: string;
+}
+
+export function Tabs({ items, className }: TabsProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 0,
+        borderBottom: '1px solid var(--border)',
+        marginBottom: 20,
+      }}
+      className={className}
+    >
+      {items.map((item) => (
+        <button
+          type="button"
+          key={item.label}
+          onClick={item.onClick}
+          style={{
+            background: 'transparent',
+            border: 'none',
+            borderBottom: item.active ? '2px solid var(--violet)' : '2px solid transparent',
+            color: item.active ? 'var(--violet)' : 'var(--text-dim)',
+            padding: '12px 16px',
+            fontSize: 13,
+            fontFamily: 'var(--font-mono-stack)',
+            cursor: 'pointer',
+            letterSpacing: '0.04em',
+            transition: 'color 0.12s, border-color 0.12s',
+            flex: 1,
+            fontWeight: item.active ? 600 : 400,
+            textTransform: 'capitalize',
+          }}
+        >
+          {item.label}
+          {item.count !== undefined ? ` (${item.count})` : ''}
+        </button>
+      ))}
+    </div>
+  );
+}

package/app/components/ui/TemplateOption.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+interface TemplateOptionProps {
+  id: string;
+  selected: boolean;
+  description: string;
+  onClick: () => void;
+  badge?: ReactNode;
+}
+
+export function TemplateOption({ id, selected, description, onClick, badge }: TemplateOptionProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        width: '100%',
+        padding: '14px 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: selected ? 'var(--violet-bg)' : 'transparent',
+        border: `1px solid ${selected ? 'var(--violet)' : 'var(--border)'}`,
+      }}
+    >
+      <span
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: selected ? 'var(--violet)' : 'var(--border)',
+          color: selected ? '#111' : '#666',
+          fontSize: 12,
+          fontWeight: 600,
+          flexShrink: 0,
+        }}
+      >
+        {id[0].toUpperCase()}
+      </span>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontWeight: 500, fontSize: 14 }}>{id}</div>
+        <div style={{ fontSize: 11, color: '#888', marginTop: 2 }}>{description}</div>
+      </div>
+      {badge}
+    </button>
+  );
+}

package/app/components/ui/Toast.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+type ToastType = 'success' | 'error' | 'info';
+
+interface ToastItem {
+  id: number;
+  message: string;
+  type: ToastType;
+}
+
+let nextId = 0;
+const listeners: Set<(t: ToastItem) => void> = new Set();
+
+export function showToast(message: string, type: ToastType = 'info') {
+  const item: ToastItem = { id: nextId++, message, type };
+  listeners.forEach((fn) => fn(item));
+}
+
+export function ToastContainer() {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  useEffect(() => {
+    const handler = (t: ToastItem) => {
+      setToasts((prev) => [...prev, t]);
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((x) => x.id !== t.id));
+      }, 4000);
+    };
+    listeners.add(handler);
+    return () => { listeners.delete(handler); };
+  }, []);
+
+  return (
+    <div className="ui-toast-container">
+      {toasts.map((t) => (
+        <div key={t.id} className={`ui-toast ui-toast--${t.type}`}>
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/components/ui/index.ts

@@ -0,0 +1,19 @@
+export * from './ConfirmModal';
+export * from './Badge';
+export * from './Button';
+export * from './FilterBar';
+export * from './Input';
+export * from './LoadingSpinner';
+export * from './Metric';
+export * from './Modal';
+export * from './Page';
+export * from './Pill';
+export * from './PropertyList';
+export * from './Select';
+export * from './StatusCard';
+export * from './Surface';
+export * from './Toast';
+export * from './tokens';
+export * from './Tabs';
+export * from './ItemList';
+export * from './TemplateOption';

package/app/components/ui/tokens.ts

@@ -0,0 +1,18 @@
+export type Tone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+export type SurfaceVariant = 'panel' | 'card' | 'subtle';
+
+export const toneVars: Record<Tone, { text: string; border: string; bg: string }> = {
+  neutral: { text: 'var(--text)', border: 'var(--border)', bg: 'var(--bg2)' },
+  accent: { text: 'var(--violet)', border: 'var(--violet-dim)', bg: 'rgba(167, 139, 250, 0.08)' },
+  success: { text: 'var(--green)', border: '#255b3f', bg: 'rgba(34, 197, 94, 0.08)' },
+  warning: { text: 'var(--yellow)', border: '#7c5a1a', bg: 'rgba(245, 158, 11, 0.08)' },
+  danger: { text: 'var(--red)', border: '#7f1d1d', bg: 'rgba(239, 68, 68, 0.08)' },
+  info: { text: 'var(--info)', border: 'rgba(99, 102, 241, 0.28)', bg: 'rgba(99, 102, 241, 0.12)' },
+};
+
+export function toneFromHealth(health?: 'ok' | 'warning' | 'error' | 'info'): Tone {
+  if (health === 'ok' || health === 'info') return 'success';
+  if (health === 'warning') return 'warning';
+  if (health === 'error') return 'danger';
+  return 'neutral';
+}

package/app/config/PageClient.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { Button, Input, Page, PageHeader, Surface, Pill, Modal } from '../components/ui';
+import PasswordInput from '../components/PasswordInput';
+
+interface EnvVars {
+  [key: string]: string;
+}
+
+const ENV_METADATA: Record<
+  string,
+  { label: string; description: string; placeholder: string; sensitive?: boolean }
+> = {
+  REV4A_PASSWORD: {
+    label: 'Login password',
+    description: 'Password used to access the Rev4a dashboard',
+    placeholder: 'Dashboard password',
+    sensitive: true,
+  },
+  REV4A_TOKEN: {
+    label: 'Internal Auth Token',
+    description: 'Token for internal API authentication (skills API, cost-override, JWT fallback)',
+    placeholder: 'Internal auth token',
+    sensitive: true,
+  },
+  REV4A_API_KEY: {
+    label: 'Rev4a API Key',
+    description: 'Master key for provider gateway — agents use this to authenticate when calling Rev4a as an LLM provider. Synced to Gateway.',
+    placeholder: 'Gateway master key',
+    sensitive: true,
+  },
+  REV4A_JWT_SECRET: {
+    label: 'JWT Secret',
+    description: 'Secret used to sign session JWT cookies for dashboard authentication',
+    placeholder: 'At least 32 characters',
+    sensitive: true,
+  },
+  REV4A_WORKSPACE_ROOT: {
+    label: 'Workspace root',
+    description: 'Filesystem path for the local file explorer (e.g. /home/user/projects/rev4a). Leave empty to disable the Local workspace.',
+    placeholder: '/path/to/workspace',
+    sensitive: false,
+  },
+};
+
+type SaveStatus = 'idle' | 'saving' | 'ok' | 'error';
+
+export default function ConfigPageClient() {
+  const [env, setEnv] = useState<EnvVars>({});
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState<SaveStatus>('idle');
+  const [statusMsg, setStatusMsg] = useState('');
+  const [restarting, setRestarting] = useState(false);
+  const [confirmAction, setConfirmAction] = useState<'save' | 'restart' | null>(null);
+
+  const loadEnv = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/config/env');
+      const data = await res.json();
+      if (data.env) setEnv(data.env);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadEnv();
+  }, [loadEnv]);
+
+  const handleChange = (key: string, value: string) => {
+    setEnv((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSave = async () => {
+    setStatus('saving');
+    setStatusMsg('');
+    try {
+      const res = await fetch('/api/config/env', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ env }),
+      });
+      const data = await res.json();
+      if (data.status === 'ok') {
+        setStatus('ok');
+        setStatusMsg('Environment variables saved. Restart Rev4a to apply them.');
+      } else {
+        setStatus('error');
+        setStatusMsg(data.error || 'Error');
+      }
+    } catch (e: unknown) {
+      setStatus('error');
+      setStatusMsg(e instanceof Error ? e.message : 'Network error');
+    }
+  };
+
+
+
+  // Sort keys: sensitive first, then alphabetical
+  const sortedKeys = Object.entries(ENV_METADATA).sort(([, a], [, b]) => {
+    if (a.sensitive && !b.sensitive) return -1;
+    if (!a.sensitive && b.sensitive) return 1;
+    return a.label.localeCompare(b.label);
+  });
+
+  return (
+    <Page maxWidth={900}>
+      <PageHeader
+        eyebrow=""
+        title="Configuration"
+        description="Environment variables. Values are visible only to you."
+      />
+
+      {loading ? (
+        <div style={{ display: 'grid', gap: 12 }}>
+          {[1, 2, 3].map((i) => (
+            <Surface key={i}>
+              <div
+                style={{
+                  height: 18,
+                  background: 'rgba(255,255,255,0.04)',
+                  borderRadius: 0,
+                  marginBottom: 8,
+                  width: '40%',
+                }}
+              />
+              <div
+                style={{
+                  height: 40,
+                  background: 'rgba(255,255,255,0.04)',
+                  borderRadius: 0,
+                }}
+              />
+            </Surface>
+          ))}
+        </div>
+      ) : (
+        <>
+          <section style={{ display: 'grid', gap: 16, marginBottom: 20 }}>
+            {sortedKeys.map(([key, meta]) => {
+              const value = env[key] || '';
+              return (
+                <Surface key={key} variant="panel">
+                  <div style={{ padding: '14px 16px', display: 'grid', gap: 8 }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        flexWrap: 'wrap',
+                      }}
+                    >
+                      <label
+                        style={{
+                          fontWeight: 600,
+                          fontSize: 13,
+                          letterSpacing: '0.02em',
+                        }}
+                      >
+                        {meta.label}
+                      </label>
+                      {meta.sensitive && <Pill tone="warning">Secret key</Pill>}
+                      <code
+                        style={{
+                          fontSize: 10,
+                          color: 'var(--text-dim)',
+                          background: 'rgba(255,255,255,0.04)',
+                          padding: '2px 6px',
+                          borderRadius: 0,
+                        }}
+                      >
+                        {key}
+                      </code>
+                    </div>
+
+                    <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.4 }}>
+                      {meta.description}
+                    </div>
+
+                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                      {meta.sensitive ? (
+                        <PasswordInput
+                          value={value}
+                          onChange={(v) => handleChange(key, v)}
+                          placeholder={meta.placeholder}
+                          style={{ flex: 1 }}
+                          showGenerate
+                        />
+                      ) : (
+                        <div style={{ flex: 1 }}>
+                          <Input
+                            value={value}
+                            onChange={(e) => handleChange(key, e.target.value)}
+                            placeholder={meta.placeholder}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </Surface>
+              );
+            })}
+          </section>
+
+          <div
+            style={{
+              display: 'flex',
+              gap: 12,
+              alignItems: 'center',
+              marginBottom: 20,
+            }}
+          >
+            <Button
+              variant="primary"
+              size="md"
+              loading={restarting}
+              onClick={() => setConfirmAction('restart')}
+            >
+              {restarting ? 'Restarting...' : 'Save & Restart'}
+            </Button>
+          </div>
+
+          {/* Confirm modal */}
+          <Modal
+            open={confirmAction !== null}
+            onClose={() => setConfirmAction(null)}
+            title={confirmAction === 'restart' ? 'Restart Rev4a' : 'Save configuration'}
+          >
+            <div style={{ display: 'grid', gap: 14 }}>
+              <p style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.5, margin: 0 }}>
+                {confirmAction === 'restart'
+                  ? 'This will save the current environment variables and restart the Rev4a server immediately. The dashboard will be unavailable for a few seconds.'
+                  : 'Save the current environment variables. Changes will take effect after a restart.'}
+              </p>
+              <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
+                <Button variant="ghost" size="sm" onClick={() => setConfirmAction(null)}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  loading={status === 'saving'}
+                  onClick={async () => {
+                    setStatus('saving');
+                    setStatusMsg('');
+                    try {
+                      const saveRes = await fetch('/api/config/env', {
+                        method: 'PUT',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ env }),
+                      });
+                      const saveData = await saveRes.json();
+                      if (saveData.status !== 'ok') {
+                        setStatus('error');
+                        setStatusMsg(saveData.error || 'Save error');
+                        setStatus('idle');
+                        setConfirmAction(null);
+                        return;
+                      }
+                      setStatus('ok');
+                      setStatusMsg('Environment variables saved.');
+                      if (confirmAction === 'restart') {
+                        setRestarting(true);
+                        await fetch('/api/config/restart', { method: 'POST' });
+                        setTimeout(() => {
+                          setRestarting(false);
+                          setStatus('idle');
+                          setStatusMsg('');
+                        }, 4000);
+                      }
+                      setConfirmAction(null);
+                    } catch {
+                      setStatus('error');
+                      setStatusMsg('Network error');
+                      setStatus('idle');
+                      setConfirmAction(null);
+                    }
+                  }}
+                >
+                  {confirmAction === 'restart' ? 'Save & Restart' : 'Save'}
+                </Button>
+              </div>
+            </div>
+          </Modal>
+        </>
+      )}
+    </Page>
+  );
+}

package/app/config/loading.tsx

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

package/app/config/page.tsx

@@ -0,0 +1,7 @@
+import ConfigPageClient from './PageClient';
+
+export const dynamic = 'force-dynamic';
+
+export default function ConfigPage() {
+  return <ConfigPageClient />;
+}

package/app/containers/ContainersClient.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button, Pill } from '../components/ui';
+
+interface ContainerInfo {
+  id: string;
+  name: string;
+  image: string;
+  status: string;
+  state: string;
+  ports: string;
+  ip: string | null;
+  agentId: string | null;
+  displayName?: string | null;
+}
+
+export default function ContainersClient() {
+  const [containers, setContainers] = useState<ContainerInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  async function load(signal?: AbortSignal) {
+    try {
+      const res = await fetch('/api/containers', { signal });
+      if (!res.ok) throw new Error(`Error ${res.status}`);
+      const data = await res.json();
+      if (!signal?.aborted) setContainers(Array.isArray(data) ? data : []);
+    } catch(e: any) {
+      if (e?.name === 'AbortError') return;
+      if (!signal?.aborted) setError(e.message);
+    } finally {
+      if (!signal?.aborted) setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    const controller = new AbortController();
+    load(controller.signal);
+    const i = setInterval(() => { if (!controller.signal.aborted) load(controller.signal); }, 15000);
+    return () => { controller.abort(); clearInterval(i); };
+  }, []);
+
+  return (
+    <div style={{ padding: '16px', maxWidth: 1080, margin: '0 auto', height: '100%', overflowY: 'auto', WebkitOverflowScrolling: 'touch', boxSizing: 'border-box', paddingBottom: 72 }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 }}>
+        <h1 style={{ fontSize: 20, fontWeight: 400, color: 'var(--violet)', letterSpacing: 2, margin: 0 }}>CONTAINERS</h1>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 12, color: 'var(--text-dim)' }}>
+            {containers.length} container · <span style={{ fontFamily: 'var(--font-mono-stack)', fontSize: 11 }}>{new Date().toLocaleTimeString('it-IT')}</span>
+          </span>
+          <Button variant="ghost" size="sm" onClick={() => load()}>↻</Button>
+        </div>
+      </div>
+
+      {loading && <p style={{ color: 'var(--text-dim)', fontSize: 12, padding: '20px 0' }}>Loading...</p>}
+      {error && <p style={{ color: '#ef4444', fontSize: 12 }}>{error}</p>}
+
+      {/* Container cards */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {containers.map(c => (
+          <div
+            key={c.id}
+            style={{
+              padding: '12px 14px',
+              border: '1px solid var(--border)',
+              borderRadius: 0,
+              background: 'var(--bg)',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 6,
+            }}
+          >
+            {/* Top row: name + status bullet + actions */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+              <span style={{
+                width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
+                background: c.state === 'running' ? 'var(--green)' : (c.state === 'restarting' ? 'var(--yellow)' : 'var(--red)')
+              }} />
+              <span style={{ fontSize: 13, fontWeight: 500, fontFamily: 'var(--font-mono-stack)', wordBreak: 'break-all', flex: '1 1 auto', minWidth: 0 }}>
+                {c.name}
+              </span>
+              <span style={{ fontSize: 11, color: 'var(--text-dim)', flexShrink: 0, fontFamily: 'var(--font-mono-stack)' }}>
+                {c.state === 'running' ? c.status.replace(/^Up\s+/, '') : c.status}
+              </span>
+              {c.state === 'running' && (
+                <a
+                  href={`/containers/terminal/${encodeURIComponent(c.name)}`}
+                  style={{
+                    fontSize: 10,
+                    color: 'var(--violet)',
+                    textDecoration: 'none',
+                    border: '1px solid var(--violet)',
+                    padding: '2px 8px',
+                    borderRadius: 0,
+                    flexShrink: 0,
+                    fontFamily: 'var(--font-mono-stack)',
+                    letterSpacing: '0.05em',
+                  }}
+                >
+                  TERMINAL
+                </a>
+              )}
+            </div>
+
+            {/* Second row: image + ports + ip + agent info */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', fontSize: 11, color: 'var(--text-dim)' }}>
+              <span style={{ fontFamily: 'var(--font-mono-stack)', wordBreak: 'break-all' }}>{c.image}</span>
+              {c.ip && <span style={{ fontFamily: 'var(--font-mono-stack)', color: '#888' }}>{c.ip}</span>}
+              {c.ports && <span style={{ fontFamily: 'var(--font-mono-stack)', color: '#888' }}>{c.ports}</span>}
+            </div>
+
+            {/* Agent badge — only for Rev4a-managed agents */}
+            {(c.displayName || c.agentId) && (
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                {c.displayName ? (
+                  <Pill tone="accent">{c.displayName}</Pill>
+                ) : c.agentId ? (
+                  <Pill tone="neutral">{c.agentId}</Pill>
+                ) : null}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/containers/loading.tsx

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

package/app/containers/page.tsx

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