@flame0510/project-aether 1.1.9

package/app/plugins/PageClient.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useResponsive } from '../design-system';
+import { Button, Pill, LoadingSpinner } from '../components/ui';
+
+type BadgeColor = 'green' | 'red' | 'gray' | 'violet' | 'blue';
+
+function Badge({ children, color }: { children: React.ReactNode; color: BadgeColor }) {
+  const toneMap: Record<BadgeColor, 'success' | 'danger' | 'neutral' | 'accent' | 'info'> = {
+    green: 'success', red: 'danger', gray: 'neutral', violet: 'accent', blue: 'info',
+  };
+  return <Pill tone={toneMap[color]}>{children}</Pill>;
+}
+
+function PanelTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{
+      padding: '10px 20px',
+      fontSize: 10,
+      letterSpacing: 2,
+      color: 'var(--violet)',
+      borderBottom: '1px solid var(--border)',
+      background: 'var(--bg2)',
+      textTransform: 'uppercase',
+      flexShrink: 0,
+      fontFamily: 'var(--font-mono-stack)',
+    }}>
+      {children}
+    </div>
+  );
+}
+
+function EmptyState({ message }: { message: string }) {
+  return <div className="empty-state">{message}</div>;
+}
+
+function ErrorState({ message }: { message: string }) {
+  return <div className="error-state">⚠ {message}</div>;
+}
+
+function LoadingState() {
+  return <LoadingSpinner label="LOADING" compact />;
+}
+
+// ─── Plugin type ──────────────────────────────────────────────────────────────
+
+interface Plugin {
+  id: string;
+  name?: string;
+  enabled: boolean;
+  status?: string;
+  version?: string;
+  origin?: string;
+  format?: string;
+  source?: string;
+  toolNames?: string[];
+  channelIds?: string[];
+  providerIds?: string[];
+  cliBackendIds?: string[];
+  hookNames?: string[];
+  services?: string[];
+  compat?: string[];
+}
+
+interface RowProps { label: string; value: string; mono?: boolean; small?: boolean; }
+function Row({ label, value, mono, small }: RowProps) {
+  return (
+    <div style={{ marginBottom: 10 }}>
+      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: 'var(--text-dim)', letterSpacing: '0.1em', marginBottom: 2 }}>{label.toUpperCase()}</div>
+      <div style={{
+        fontFamily: "'JetBrains Mono', monospace",
+        fontSize: small ? 10 : 12,
+        color: 'var(--text)',
+        wordBreak: 'break-all',
+        ...(mono ? { background: 'var(--bg3)', padding: '4px 8px', borderRadius: 0, border: '1px solid #222228' } : {}),
+      }}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+export default function PluginsPage() {
+  const [plugins, setPlugins] = useState<Plugin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Plugin | null>(null);
+  const [filter, setFilter] = useState('all');
+  const [toggling, setToggling] = useState<string | null>(null);
+  const [toastMsg, setToastMsg] = useState<string | null>(null);
+  const isMobile = useResponsive('lg');
+
+  const load = useCallback(async (signal?: AbortSignal) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/plugins', { credentials: 'same-origin', signal });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      if (!signal?.aborted) setPlugins(data.plugins || []);
+    } catch (e) {
+      if ((e as Error)?.name === 'AbortError') return;
+      if (!signal?.aborted) setError((e as Error).message);
+    } finally {
+      if (!signal?.aborted) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    load(controller.signal);
+    return () => controller.abort();
+  }, [load]);
+
+  const filtered = plugins.filter(p => {
+    if (filter === 'enabled') return p.enabled;
+    if (filter === 'disabled') return !p.enabled;
+    return true;
+  });
+
+  const showToast = (msg: string) => {
+    setToastMsg(msg);
+    setTimeout(() => setToastMsg(null), 3000);
+  };
+
+  const handleToggle = async (plugin: Plugin) => {
+    const action = plugin.enabled ? 'disable' : 'enable';
+    setToggling(plugin.id);
+    try {
+      const res = await fetch('/api/plugins', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ action, pluginId: plugin.id }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        showToast(`Plugin ${plugin.id} ${action}d`);
+        await load();
+        if (selected?.id === plugin.id) setSelected(p => p ? { ...p, enabled: !p.enabled } : p);
+      } else {
+        showToast(`Error: ${data.error}`);
+      }
+    } catch (e) {
+      showToast(`Error: ${(e as Error).message}`);
+    } finally {
+      setToggling(null);
+    }
+  };
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      background: 'var(--bg)',
+      color: 'var(--text)',
+      overflow: 'hidden',
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 14px',
+        height: 48,
+        borderBottom: '1px solid var(--border)',
+        background: 'var(--bg)',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+      }}>
+        <span style={{ fontFamily: 'var(--font-serif-stack)', fontSize: '20px', letterSpacing: '4px', color: 'var(--violet)' }}>PLUGINS</span>
+      </div>
+      <div style={{ flex: 1, display: 'flex', flexDirection: isMobile ? 'column' : 'row', overflow: 'hidden' }}>
+        {/* List */}
+        <div style={{ width: isMobile ? '100%' : 340, maxHeight: isMobile ? '45%' : '100%', borderRight: isMobile ? 'none' : '1px solid #222228', borderBottom: isMobile ? '1px solid #222228' : 'none', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+          {/* Filter bar */}
+          <div style={{ padding: '8px 12px', borderBottom: '1px solid #222228', background: 'var(--bg2)', display: 'flex', gap: 6 }}>
+            {(['all', 'enabled', 'disabled'] as const).map(f => (
+              <Button key={f} variant={filter === f ? 'primary' : 'ghost'} size="sm" onClick={() => setFilter(f)}>
+                {f.toUpperCase()}
+              </Button>
+            ))}
+            <Button variant="ghost" size="sm" onClick={() => load()} style={{ marginLeft: 'auto' }}>
+              ⟳
+            </Button>
+          </div>
+
+          {/* List body */}
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            {loading && <LoadingState />}
+            {!loading && error && <ErrorState message={error} />}
+            {!loading && !error && filtered.length === 0 && <EmptyState message="no plugins match" />}
+            {!loading && !error && filtered.map(p => (
+              <div
+                key={p.id}
+                onClick={() => setSelected(p)}
+                style={{
+                  padding: '10px 14px',
+                  borderBottom: '1px solid #18181c',
+                  cursor: 'pointer',
+                  background: selected?.id === p.id ? 'var(--bg3)' : 'transparent',
+                  borderLeft: selected?.id === p.id ? '2px solid #925BFC' : '2px solid transparent',
+                  transition: 'all 0.1s',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: 'var(--text)', flex: 1 }}>
+                    {p.name || p.id}
+                  </span>
+                  <Badge color={p.enabled ? 'green' : 'gray'}>{p.status || (p.enabled ? 'enabled' : 'disabled')}</Badge>
+                </div>
+                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--text-dim)' }}>
+                  {p.id} {p.version ? `· v${p.version}` : ''}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Detail */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+          {!selected ? (
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#333', fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>
+              ← select a plugin
+            </div>
+          ) : (
+            <>
+              <PanelTitle>PLUGIN — {selected.id}</PanelTitle>
+              <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
+                  <h2 style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: 'var(--text)', margin: 0 }}>{selected.name || selected.id}</h2>
+                  <Badge color={selected.enabled ? 'green' : 'gray'}>{selected.status || (selected.enabled ? 'enabled' : 'disabled')}</Badge>
+                  <Badge color={selected.origin === 'bundled' ? 'blue' : 'violet'}>{selected.origin || 'unknown'}</Badge>
+                </div>
+
+                {selected.version && <Row label="Version" value={selected.version} />}
+                <Row label="ID" value={selected.id} />
+                <Row label="Format" value={selected.format || '—'} />
+                {selected.source && <Row label="Source" value={selected.source} mono small />}
+
+                {([
+                  ['Tools', selected.toolNames],
+                  ['Channels', selected.channelIds],
+                  ['Providers', selected.providerIds],
+                  ['CLI Backends', selected.cliBackendIds],
+                  ['Hooks', selected.hookNames],
+                  ['Services', selected.services],
+                ] as [string, string[] | undefined][]).map(([label, arr]) => arr && arr.length > 0 && (
+                  <div key={label} style={{ marginBottom: 12 }}>
+                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: 'var(--text-dim)', letterSpacing: '0.1em', marginBottom: 4 }}>{label.toUpperCase()}</div>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                      {arr.map(s => <Badge key={s} color="gray">{s}</Badge>)}
+                    </div>
+                  </div>
+                ))}
+
+                {selected.compat && selected.compat.length > 0 && (
+                  <div style={{ marginBottom: 12 }}>
+                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: 'var(--text-dim)', letterSpacing: '0.1em', marginBottom: 4 }}>COMPAT</div>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                      {selected.compat.map(c => <Badge key={c} color="violet">{c}</Badge>)}
+                    </div>
+                  </div>
+                )}
+
+                <div style={{ marginTop: 24 }}>
+                  <Button
+                    variant={selected.enabled ? 'danger' : 'success'}
+                    size="sm"
+                    onClick={() => handleToggle(selected)}
+                    disabled={toggling === selected.id}
+                    loading={toggling === selected.id}
+                  >
+                    {selected.enabled ? 'DISABLE' : 'ENABLE'}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {toastMsg && (
+          <div style={{
+            position: 'fixed', bottom: 24, right: 24,
+            background: 'var(--bg2)', border: '1px solid #925BFC',
+            color: 'var(--text)', fontFamily: "'JetBrains Mono', monospace",
+            fontSize: 12, padding: '10px 18px', borderRadius: 0,
+            zIndex: 1000,
+          }}>
+            {toastMsg}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/plugins/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/plugins/page.tsx

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

package/app/setup/PageClient.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '../components/ui';
+import { ArrowRightIcon, CheckCircleIcon } from '../wizard/icons';
+
+type Step = 'password' | 'done';
+
+const STEPS = [
+  { key: 'password' as const, label: 'Password' },
+  { key: 'done' as const,     label: 'Done' },
+];
+
+export default function SetupPageClient() {
+  const router = useRouter();
+  const [step, setStep] = useState<Step>('password');
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const stepIndex = STEPS.findIndex((s) => s.key === step);
+
+  // Redirect if already configured
+  useEffect(() => {
+    fetch('/api/auth/status')
+      .then((r) => r.json())
+      .then((d: { configured: boolean }) => {
+        if (d.configured) router.replace('/login');
+      })
+      .catch(() => {});
+  }, [router]);
+
+
+
+  // ─── Password ─────────────────────────────────────────────────────
+
+  const handleSetPassword = useCallback(async () => {
+    if (password.length < 8) {
+      setPasswordError('Password must be at least 8 characters');
+      return;
+    }
+    setSaving(true);
+    setPasswordError('');
+
+    try {
+      const res = await fetch('/api/setup/password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+
+      if (res.ok) {
+        // Password saved to .env — login route reads it from file.
+        // No restart needed: JWT_SECRET was inlined at build time.
+        setSaving(false);
+        setStep('done');
+        return;
+      }
+
+      const err = await res.json().catch(() => ({ error: 'Unknown error' }));
+      setPasswordError(err.error || 'Failed to set password');
+    } catch {
+      setPasswordError('Network error — please try again');
+    }
+    setSaving(false);
+  }, [password]);
+
+
+
+  // ─── Done — go straight to login ───────────────────────────────────
+
+  const handleDone = useCallback(async () => {
+    router.push('/login');
+  }, [router]);
+
+  // ─── Render ────────────────────────────────────────────────────────
+
+  return (
+    <div className="setup-outer">
+      <div className="setup-card">
+        <div className="setup-header">
+          <div className="setup-logo">REV4A</div>
+          <div className="setup-stepper">
+            {STEPS.map((s, i) => (
+              <div
+                key={s.key}
+                className={`setup-step${i < stepIndex ? ' done' : ''}${i === stepIndex ? ' active' : ''}`}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="setup-body">
+          {step === 'password' && (
+            <div style={{ display: 'grid', gap: 14 }}>
+              <h2 style={{
+                fontFamily: 'var(--font-serif-stack)', fontSize: 22, letterSpacing: 1.5,
+                color: 'var(--violet)', margin: 0,
+              }}>
+                Set Admin Password
+              </h2>
+              <p style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.6, margin: 0 }}>
+                Choose a password to protect your Rev4a dashboard.
+                You'll use this to log in as admin.
+              </p>
+              <input
+                type="password"
+                placeholder="Minimum 8 characters"
+                value={password}
+                onChange={(e) => { setPassword(e.target.value); setPasswordError(''); }}
+                onKeyDown={(e) => e.key === 'Enter' && handleSetPassword()}
+                className="setup-input"
+                autoFocus
+              />
+              {passwordError && (
+                <div style={{
+                  fontSize: 11, color: '#ef4444', padding: '4px 8px',
+                  background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)',
+                }}>
+                  {passwordError}
+                </div>
+              )}
+              <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
+                <Button variant="primary" size="md" onClick={handleSetPassword} loading={saving}>
+                  Set Password <ArrowRightIcon />
+                </Button>
+              </div>
+            </div>
+          )}
+
+
+
+          {step === 'done' && (
+            <div style={{ display: 'grid', gap: 14, textAlign: 'center' }}>
+              <div style={{ margin: '0 auto', display: 'flex', justifyContent: 'center' }}>
+                <CheckCircleIcon size={48} color="var(--violet)" />
+              </div>
+              <h2 style={{
+                fontFamily: 'var(--font-serif-stack)', fontSize: 22, letterSpacing: 1.5,
+                color: 'var(--violet)', margin: 0,
+              }}>
+                Ready to Go
+              </h2>
+              <p style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.6, margin: 0 }}>
+                The essentials are done. After logging in, the setup wizard
+                will help you add your first provider and create your first agent.
+              </p>
+              <div style={{ display: 'grid', gap: 6, textAlign: 'left', padding: '10px 12px', background: 'rgba(52,211,153,0.06)', border: '1px solid rgba(52,211,153,0.15)' }}>
+                {[
+                  'Set admin password',
+                  'Agent base image is built by the setup script',
+                  'Next: add providers & agents in the wizard',
+                ].map((t) => (
+                  <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text)' }}>
+                    <span style={{ color: 'var(--violet)' }}>•</span> {t}
+                  </div>
+                ))}
+              </div>
+              <Button variant="primary" size="md" onClick={handleDone}>
+                Start Using Rev4a <ArrowRightIcon />
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <style>{`
+        .setup-outer {
+          min-height: 100vh; min-height: 100dvh;
+          display: flex; align-items: flex-start; justify-content: center;
+          background: radial-gradient(circle at top, rgba(146,91,252,0.12), transparent 40%), var(--bg);
+          font-family: var(--font-mono-stack);
+          padding: 0;
+        }
+        .setup-card {
+          width: 100%;
+          background: var(--bg);
+          overflow: hidden;
+        }
+        .setup-header {
+          padding: 14px 16px 10px;
+          border-bottom: 1px solid var(--border);
+          display: flex; flex-direction: column; align-items: center; gap: 8px;
+        }
+        .setup-logo {
+          font-family: var(--font-serif-stack);
+          font-size: 20px; letter-spacing: 3px;
+          color: var(--violet);
+        }
+        .setup-stepper {
+          display: flex; gap: 6px; align-items: center;
+        }
+        .setup-step {
+          width: 8px; height: 8px;
+          border-radius: 50%;
+          background: var(--border);
+          opacity: 0.3;
+          transition: all 0.2s;
+          flex-shrink: 0;
+        }
+        .setup-step.done { background: var(--violet); opacity: 0.7; }
+        .setup-step.active { background: var(--violet); opacity: 1; box-shadow: 0 0 6px rgba(146,91,252,0.5); }
+        .setup-body { padding: 16px; }
+        .setup-input {
+          background: var(--bg); border: 1px solid var(--border);
+          color: var(--text); padding: 8px 10px;
+          font-size: 12px; font-family: var(--font-mono-stack);
+          outline: none; width: 100%; box-sizing: border-box;
+        }
+        .setup-input:focus { border-color: var(--violet); }
+
+        @media (min-width: 481px) {
+          .setup-outer { align-items: center; padding: 24px; }
+          .setup-card {
+            width: min(92vw, 480px);
+            background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(12,12,12,0.98));
+            border: 1px solid var(--border);
+            box-shadow: 0 24px 64px rgba(0,0,0,0.42);
+          }
+          .setup-header { padding: 18px 24px 14px; }
+          .setup-body { padding: 20px 24px 24px; }
+        }
+      `}</style>
+    </div>
+  );
+}

package/app/setup/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '../components/Skeleton';
+
+export default function SetupLoading() {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100vh',
+      background: 'var(--bg)',
+    }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20, maxWidth: 340, width: '100%' }}>
+        <Skeleton width={80} height={80} accent variant="circle" />
+        <Skeleton width={200} height={28} accent />
+        <Skeleton width={300} height={16} />
+        <Skeleton width="100%" height={48} style={{ border: '1px solid rgba(255,255,255,0.06)' }} />
+        <Skeleton width="100%" height={48} style={{ border: '1px solid rgba(255,255,255,0.06)' }} />
+      </div>
+    </div>
+  );
+}

package/app/setup/page.tsx

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