@flame0510/project-aether 1.1.9

package/app/components/VersionBanner.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface VersionInfo {
+  installed: string;
+  latest: string | null;
+  updateAvailable: boolean;
+}
+
+const DISMISS_KEY = 'rev4a-update-dismissed';
+
+export default function VersionBanner() {
+  const [info, setInfo] = useState<VersionInfo | null>(null);
+  const [dismissed, setDismissed] = useState(true);
+  const [updating, setUpdating] = useState(false);
+  const [updateError, setUpdateError] = useState<string | null>(null);
+  const [updateOk, setUpdateOk] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/update-check?check=1')
+      .then((r) => r.json())
+      .then((d: VersionInfo) => {
+        if (d.updateAvailable) {
+          setInfo(d);
+          const saved = localStorage.getItem(DISMISS_KEY);
+          if (saved === d.latest) setDismissed(true);
+          else setDismissed(false);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  function handleDismiss() {
+    if (info?.latest) {
+      localStorage.setItem(DISMISS_KEY, info.latest);
+    }
+    setDismissed(true);
+  }
+
+  async function handleUpdate() {
+    setUpdating(true);
+    setUpdateError(null);
+    setUpdateOk(null);
+    try {
+      const res = await fetch('/api/update-check', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      const data = await res.json();
+      if (data.success) {
+        setUpdateOk('Update started. Restarting\u2026');
+        localStorage.removeItem(DISMISS_KEY);
+        setTimeout(function() { window.location.reload(); }, 5000);
+      } else {
+        setUpdateError(data.error || 'Update failed');
+        setUpdating(false);
+      }
+    } catch (err) {
+      setUpdateError(err instanceof Error ? err.message : 'Network error');
+      setUpdating(false);
+    }
+  }
+
+  if (!info || dismissed) return null;
+
+  return (
+    <div className="update-banner">
+      <div className="update-banner__inner">
+        <span className="update-banner__text">
+          {updateOk ? (
+            <span className="update-banner__ok">{updateOk}</span>
+          ) : updateError ? (
+            <span className="update-banner__err">{updateError}</span>
+          ) : (
+            <>
+              <span className="update-banner__label">Update available</span>
+              <span className="update-banner__sep">&mdash;</span>
+              <span className="update-banner__version">v{info.latest}</span>
+              <span className="update-banner__sep">(installed: v{info.installed})</span>
+            </>
+          )}
+        </span>
+
+        {!updateOk && (
+          <div className="update-banner__actions">
+            {updateError ? (
+              <button className="ui-btn ui-btn--primary ui-btn--sm" onClick={handleUpdate} disabled={updating}>
+                {updating ? 'Updating\u2026' : 'Retry'}
+              </button>
+            ) : (
+              <button className="ui-btn ui-btn--primary ui-btn--sm" onClick={handleUpdate} disabled={updating}>
+                {updating ? 'Updating\u2026' : 'Update now'}
+              </button>
+            )}
+            <button className="ui-btn ui-btn--ghost ui-btn--sm" onClick={handleDismiss}>
+              Dismiss
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/WizardButton.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+/**
+ * WizardButton
+ *
+ * Floating button (bottom-left) that opens the wizard.
+ * The wizard is a full-screen experience — this button is just
+ * a shortcut to revisit it after completion.
+ *
+ * The outer .floating-actions container handles positioning.
+ */
+export default function WizardButton() {
+  const router = useRouter();
+
+  return (
+    <button
+      className="ochat__trigger"
+      aria-label="Wizard"
+      title="Wizard"
+      onClick={() => router.push('/wizard')}
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
+      </svg>
+      <span className="floating-actions__label">Wizard</span>
+    </button>
+  );
+}

package/app/components/ui/Badge.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import type { Tone } from './tokens';
+import { toneVars } from './tokens';
+
+interface BadgeProps {
+  children: ReactNode;
+  tone?: Tone;
+}
+
+export function Badge({ children, tone = 'neutral' }: BadgeProps) {
+  const c = toneVars[tone] ?? toneVars.neutral;
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        border: `1px solid ${c.border}`,
+        color: c.text,
+        background: c.bg,
+        borderRadius: 0,
+        padding: '2px 8px',
+        fontSize: 10,
+        letterSpacing: '0.04em',
+      }}
+    >
+      {children}
+    </span>
+  );
+}

package/app/components/ui/Button.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { Tone } from './tokens';
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'success';
+type ButtonSize = 'sm' | 'md';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  tone?: Tone;
+  loading?: boolean;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'ui-btn--primary',
+  secondary: 'ui-btn--secondary',
+  danger: 'ui-btn--danger',
+  ghost: 'ui-btn--ghost',
+  success: 'ui-btn--success',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'ui-btn--sm',
+  md: 'ui-btn--md',
+};
+
+export function Button({
+  children,
+  variant = 'secondary',
+  size = 'md',
+  tone,
+  loading = false,
+  disabled,
+  className = '',
+  ...rest
+}: ButtonProps) {
+  const cls = [
+    'ui-btn',
+    variantClasses[variant],
+    sizeClasses[size],
+    tone ? `ui-tone--${tone}` : '',
+    loading ? 'ui-btn--loading' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button className={cls} disabled={disabled || loading} {...rest}>
+      {loading && <span className="ui-btn__spinner" style={{
+          width: 16, height: 16, border: '2px solid currentColor', borderTopColor: 'transparent',
+          borderRadius: '50%', display: 'inline-block', marginRight: 8, verticalAlign: 'middle',
+          animation: 'ui-spin 0.7s linear infinite',
+        }} />}
+      {children}
+    </button>
+  );
+}

package/app/components/ui/ConfirmModal.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Modal } from './Modal';
+import { Button } from './Button';
+
+interface ConfirmModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  tone?: 'danger' | 'warning';
+}
+
+export function ConfirmModal({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  tone = 'danger',
+}: ConfirmModalProps) {
+  return (
+    <Modal open={open} onClose={onClose} title={title} tone={tone} maxWidth={420}>
+      <div style={{ fontSize: 13, lineHeight: 1.6, color: '#aaa', marginBottom: 24, whiteSpace: 'pre-wrap' }}>
+        {message}
+      </div>
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <Button variant="secondary" size="sm" onClick={onClose}>
+          {cancelLabel}
+        </Button>
+        <Button
+          variant={tone === 'danger' ? 'danger' : 'primary'}
+          size="sm"
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

package/app/components/ui/FilterBar.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Button } from './Button';
+
+type FilterOption = 'all' | 'running' | 'exited';
+
+interface FilterBarProps {
+  options: { value: FilterOption; label: string }[];
+  active: FilterOption;
+  onChange: (v: FilterOption) => void;
+  counts?: Partial<Record<FilterOption, number>>;
+}
+
+export function FilterBar({ options, active, onChange, counts }: FilterBarProps) {
+  return (
+    <div className="ui-filter-bar">
+      {options.map((opt) => {
+        const count = counts?.[opt.value];
+        const label = count !== undefined ? `${opt.label} (${count})` : opt.label;
+        return (
+          <Button
+            key={opt.value}
+            variant={active === opt.value ? 'primary' : 'ghost'}
+            size="sm"
+            onClick={() => onChange(opt.value)}
+          >
+            {label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/app/components/ui/Input.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useId, type InputHTMLAttributes } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Input({ label, error, id, className = '', ...rest }: InputProps) {
+  const generatedId = useId();
+  const inputId = id || generatedId;
+
+  return (
+    <div className="ui-field">
+      {label && <label className="ui-field__label" htmlFor={inputId}>{label}</label>}
+      <input
+        id={inputId}
+        className={`ui-input ${error ? 'ui-input--error' : ''} ${className}`}
+        {...rest}
+      />
+      {error && <div className="ui-field__error">{error}</div>}
+    </div>
+  );
+}

package/app/components/ui/ItemList.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+interface ListItemProps {
+  children: ReactNode;
+  active?: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+interface ListItemSeparatorProps {
+  label: string;
+}
+
+interface ListContainerProps {
+  children: ReactNode;
+  style?: React.CSSProperties;
+}
+
+export function ListContainer({ children, style }: ListContainerProps) {
+  return (
+    <div
+      style={{
+        borderRight: '1px solid var(--border)',
+        overflow: 'auto',
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ListItem({ children, active, onClick, disabled, style }: ListItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        textAlign: 'left',
+        background: active ? '#1a1030' : 'transparent',
+        border: 'none',
+        borderBottom: '1px solid var(--border)',
+        color: 'var(--text)',
+        padding: '10px 12px',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontSize: 12,
+        fontFamily: 'var(--font-mono-stack)',
+        opacity: disabled ? 0.5 : 1,
+        outline: 'none',
+        transition: 'background 0.1s',
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function ListItemSeparator({ label }: ListItemSeparatorProps) {
+  return (
+    <div
+      style={{
+        padding: '8px 12px',
+        fontSize: 10,
+        letterSpacing: '0.08em',
+        color: 'var(--violet)',
+        borderBottom: '1px solid var(--border)',
+        background: 'var(--bg2)',
+        textTransform: 'uppercase',
+      }}
+    >
+      {label}
+    </div>
+  );
+}

package/app/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+interface LoadingSpinnerProps {
+  label?: string;
+  compact?: boolean;
+}
+
+export function LoadingSpinner({ label, compact }: LoadingSpinnerProps) {
+  if (compact) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '40px 20px' }}>
+        <div className="ui-spinner" />
+        {label && <span style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.06em' }}>{label}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 9999,
+      backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
+      background: 'rgba(0,0,0,0.35)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      flexDirection: 'column', gap: 16,
+    }}>
+      <div className="ui-spinner ui-spinner--lg" />
+      {label && <div style={{ color: 'var(--text)', fontSize: 14, letterSpacing: '0.03em' }}>{label}</div>}
+    </div>
+  );
+}

package/app/components/ui/Metric.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { SkeletonLines, SkeletonMetric } from '../Skeleton';
+import type { Tone } from './tokens';
+import { Surface } from './Surface';
+
+interface MetricProps {
+  title: string;
+  value: ReactNode;
+  subtitle?: ReactNode;
+  tone?: Tone;
+  loading?: boolean;
+}
+
+export function Metric({ title, value, subtitle, tone = 'neutral', loading = false }: MetricProps) {
+  return (
+    <Surface as="article" tone={tone}>
+      <div className="ui-kicker">{title}</div>
+      <div className="ui-metric-value">{loading ? <SkeletonMetric /> : value}</div>
+      {subtitle !== undefined && <div className="ui-muted ui-metric-subtitle">{loading ? <SkeletonLines count={1} /> : subtitle}</div>}
+    </Surface>
+  );
+}

package/app/components/ui/Modal.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+import type { Tone } from './tokens';
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  tone?: Tone;
+  maxWidth?: number;
+}
+
+export function Modal({ open, onClose, title, children, maxWidth = 800, tone }: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="ui-modal-overlay" onClick={onClose}>
+      <div
+        className={`ui-modal ${tone ? `ui-tone--${tone}` : ''}`}
+        style={{ maxWidth }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="ui-modal__head">
+          <span className="ui-modal__title">{title}</span>
+          <button type="button" className="ui-modal__close" onClick={onClose} aria-label="Close">✕</button>
+        </div>
+        <div className="ui-modal__body">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/ui/Page.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export function Page({ children, maxWidth = 1280 }: { children: ReactNode; maxWidth?: number }) {
+  return <div className="ui-page"><div className="ui-page__inner" style={{ maxWidth }}>{children}</div></div>;
+}
+
+export function PageHeader({ eyebrow, title, description, action }: { eyebrow?: string; title: string; description?: ReactNode; action?: ReactNode }) {
+  return (
+    <header className="ui-page-header">
+      <div>
+        {eyebrow && <div className="ui-eyebrow">{eyebrow}</div>}
+        <h1 className="ui-page-title">{title}</h1>
+        {description && <p className="ui-page-description">{description}</p>}
+      </div>
+      {action}
+    </header>
+  );
+}

package/app/components/ui/Pill.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { Tone } from './tokens';
+
+export function Pill({ children, tone = 'neutral' }: { children: ReactNode; tone?: Tone }) {
+  return <span className={`ui-pill ui-tone--${tone}`}>{children}</span>;
+}

package/app/components/ui/PropertyList.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Fragment, type ReactNode } from 'react';
+import type { Tone } from './tokens';
+
+interface PropertyListProps {
+  rows: { label: string; value: ReactNode; tone?: Tone; dim?: boolean }[];
+}
+
+export function PropertyList({ rows }: PropertyListProps) {
+  return (
+    <div className="ui-property-list">
+      {rows.map((r, i) => (
+        <Fragment key={i}>
+          <span className="ui-property-label">{r.label}</span>
+          <span
+            className="ui-property-value"
+            data-tone={r.tone || (r.dim ? 'dim' : '')}
+          >{r.value}</span>
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/app/components/ui/Select.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useId, type SelectHTMLAttributes, type ReactNode } from 'react';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: { value: string; label: ReactNode }[];
+}
+
+export function Select({ label, error, options, id, className = '', ...rest }: SelectProps) {
+  const generatedId = useId();
+  const selectId = id || generatedId;
+
+  return (
+    <div className="ui-field">
+      {label && <label className="ui-field__label" htmlFor={selectId}>{label}</label>}
+      <select id={selectId} className={`ui-select ${error ? 'ui-select--error' : ''} ${className}`} {...rest}>
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>{o.label}</option>
+        ))}
+      </select>
+      {error && <div className="ui-field__error">{error}</div>}
+    </div>
+  );
+}

package/app/components/ui/StatusCard.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { SkeletonLines } from '../Skeleton';
+import { Surface } from './Surface';
+import { toneFromHealth } from './tokens';
+
+type Health = 'ok' | 'warning' | 'error';
+
+interface StatusCardProps {
+  title: string;
+  health: Health;
+  rows: [string, ReactNode][];
+  loading?: boolean;
+}
+
+export function StatusCard({ title, health, rows, loading = false }: StatusCardProps) {
+  return (
+    <Surface as="article" tone={toneFromHealth(health)}>
+      <div className="ui-card-head">
+        <div className="ui-kicker ui-kicker--accent">{title}</div>
+        <div className={`ui-health ui-health--${health}`}>{health}</div>
+      </div>
+      <div className="ui-key-values">
+        {loading ? <SkeletonLines count={3} /> : rows.map(([label, value]) => (
+          <div key={label} className="ui-key-value">
+            <span className="ui-muted">{label}</span>
+            <span>{value}</span>
+          </div>
+        ))}
+      </div>
+    </Surface>
+  );
+}

package/app/components/ui/Surface.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { SurfaceVariant, Tone } from './tokens';
+
+interface SurfaceProps {
+  children: ReactNode;
+  as?: 'section' | 'article' | 'aside' | 'div';
+  variant?: SurfaceVariant;
+  tone?: Tone;
+  className?: string;
+}
+
+export function Surface({ children, as: Tag = 'section', variant = 'card', tone = 'neutral', className = '' }: SurfaceProps) {
+  return <Tag className={`ui-surface ui-surface--${variant} ui-tone--${tone} ${className}`.trim()}>{children}</Tag>;
+}