@flame0510/project-aether 1.1.9

package/app/components/ModelPickerModal.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from 'react';
+import { useModels } from '../lib/models-context';
+
+interface ProviderEntry {
+  provider: string;
+  emoji: string;
+  models: { id: string; label: string }[];
+}
+
+interface ModelPickerModalProps {
+  open: boolean;
+  value?: string;
+  title?: string;
+  onClose: () => void;
+  onSelect: (model: string) => void;
+}
+
+const FALLBACK_PROVIDERS: ProviderEntry[] = [
+  { provider: 'Default', emoji: '🔧', models: [{ id: '', label: 'Default' }] },
+];
+
+export default function ModelPickerModal({ open, value = '', title = 'Select model', onClose, onSelect }: ModelPickerModalProps) {
+  const { providers: contextProviders, loaded } = useModels();
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({ 0: true });
+  const providers = loaded && contextProviders.length ? contextProviders : FALLBACK_PROVIDERS;
+
+  if (!open) return null;
+
+  const current = value ? value.split('/').slice(1).join('/') || value : 'Default';
+
+  return (
+    <div className="model-picker" onClick={onClose}>
+      <div className="model-picker__panel" onClick={(e) => e.stopPropagation()}>
+        <div className="model-picker__header">
+          <div>
+            <div className="model-picker__title">{title}</div>
+            <div className="model-picker__current">Attuale: {current}</div>
+          </div>
+          <button className="model-picker__close" onClick={onClose} aria-label="Close">×</button>
+        </div>
+        <div className="model-picker__body">
+          {providers.map((provider, pIdx) => (
+            <div key={`${provider.provider}-${pIdx}`} className="model-picker__provider">
+              <button
+                className={`model-picker__provider-header${expanded[pIdx] ? ' model-picker__provider-header--expanded' : ''}`}
+                onClick={() => setExpanded((prev) => ({ ...prev, [pIdx]: !prev[pIdx] }))}
+              >
+                <span className="model-picker__chevron">{expanded[pIdx] ? '▾' : '▸'}</span>
+                <span className="model-picker__emoji">{provider.emoji}</span>
+                <span className="model-picker__provider-name">{provider.provider}</span>
+                <span className="model-picker__count">{provider.models.length}</span>
+              </button>
+              {expanded[pIdx] && (
+                <div className="model-picker__models">
+                  {provider.models.map((m) => (
+                    <button
+                      key={m.id || '__default__'}
+                      className={`model-picker__model${(value || '') === m.id ? ' model-picker__model--active' : ''}`}
+                      onClick={() => onSelect(m.id)}
+                    >
+                      {m.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      <style jsx>{`
+        .model-picker { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
+        .model-picker__panel { width: min(520px, 100%); max-height: min(720px, 88dvh); background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.45); overflow: hidden; display: flex; flex-direction: column; }
+        .model-picker__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
+        .model-picker__title { color: var(--text); font-size: 14px; font-weight: 600; }
+        .model-picker__current { color: var(--text-dim); font-size: 10px; margin-top: 3px; }
+        .model-picker__close { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 0; width: 30px; height: 30px; cursor: pointer; font-size: 18px; line-height: 1; }
+        .model-picker__body { overflow: auto; padding: 8px; }
+        .model-picker__provider-header { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 0; background: none; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 12px; }
+        .model-picker__provider-header:hover, .model-picker__provider-header--expanded { background: var(--bg3); color: var(--text); }
+        .model-picker__chevron { width: 14px; }
+        .model-picker__emoji { width: 18px; text-align: center; }
+        .model-picker__provider-name { flex: 1; text-align: left; font-weight: 600; }
+        .model-picker__count { font-size: 10px; color: var(--text-dim); background: var(--bg); border-radius: 0; padding: 1px 6px; }
+        .model-picker__models { display: grid; gap: 2px; padding: 2px 0 6px 40px; }
+        .model-picker__model { text-align: left; border: 0; border-radius: 0; background: none; color: var(--text); cursor: pointer; padding: 7px 9px; font: inherit; font-size: 11px; }
+        .model-picker__model:hover { background: var(--bg3); }
+        .model-picker__model--active { background: rgba(146,91,252,.14); color: var(--violet); }
+        @media (max-width: 600px) { .model-picker { align-items: flex-end; padding: 0; } .model-picker__panel { border-radius: 0; max-height: 82dvh; } }
+      `}</style>
+    </div>
+  );
+}

package/app/components/PasswordInput.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from './ui';
+import { EyeIcon, EyeOffIcon } from './Icons';
+
+function generateKey(): string {
+  const arr = new Uint8Array(24);
+  crypto.getRandomValues(arr);
+  return Array.from(arr, (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+interface PasswordInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  showGenerate?: boolean;
+}
+
+export default function PasswordInput({
+  value,
+  onChange,
+  placeholder = '',
+  disabled = false,
+  style,
+  showGenerate = false,
+}: PasswordInputProps) {
+  const [visible, setVisible] = useState(false);
+
+  const hasRightButton = showGenerate;
+  const paddingRight = hasRightButton ? 150 : 44;
+
+  return (
+    <div style={{ position: 'relative', ...style }}>
+      <Input
+        type={visible ? 'text' : 'password'}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        style={{ paddingRight }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          right: 4,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+        }}
+      >
+        {showGenerate && (
+          <button
+            onClick={() => {
+              onChange(generateKey());
+              setVisible(true);
+            }}
+            disabled={disabled}
+            type="button"
+            tabIndex={-1}
+            className="ui-btn ui-btn--ghost ui-btn--sm"
+            title="Generate secure key"
+            style={{ marginRight: 2 }}
+          >
+            Generate
+          </button>
+        )}
+        <button
+          onClick={() => setVisible((v) => !v)}
+          disabled={disabled}
+          type="button"
+          tabIndex={-1}
+          className="ui-btn ui-btn--ghost ui-btn--sm"
+          title={visible ? 'Hide' : 'Show'}
+          style={{ minWidth: 32, justifyContent: 'center' }}
+        >
+          {visible ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
+        </button>
+      </div>
+    </div>
+  );
+}

package/app/components/PulseChat.tsx

@@ -0,0 +1,362 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+const STORAGE_KEY = 'rev4a_pulse_chat';
+const MODEL_STORAGE_KEY = 'rev4a-pulse-model';
+
+interface ModelOption {
+  id: string;
+  label: string;
+}
+
+interface ModelGroup {
+  provider: string;
+  emoji: string;
+  models: ModelOption[];
+}
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+function loadMessages(): Message[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveMessages(messages: Message[]) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(messages));
+  } catch {
+    // storage full or unavailable — silently ignore
+  }
+}
+
+function renderContent(text: string) {
+  const parts = text.split(/(\[([^\]]+)\]\(([^)]+)\))/g);
+  const result: React.ReactNode[] = [];
+  let i = 0;
+  while (i < parts.length) {
+    const part = parts[i];
+    if (part?.startsWith('[') && parts[i + 2]) {
+      const label = parts[i + 1];
+      const href = parts[i + 2];
+      const isInternal = href?.startsWith('/');
+      result.push(
+        isInternal ? (
+          <Link key={i} href={href!} style={{ color: 'var(--violet)', textDecoration: 'underline' }}>
+            {label}
+          </Link>
+        ) : (
+          <a key={i} href={href} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--violet)', textDecoration: 'underline' }}>
+            {label}
+          </a>
+        ),
+      );
+      i += 3;
+    } else {
+      if (part) result.push(<span key={i}>{part}</span>);
+      i += 1;
+    }
+  }
+  return result;
+}
+
+export default function PulseChat() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>(loadMessages);
+  const [input, setInput] = useState('');
+  const [streaming, setStreaming] = useState(false);
+  const [selectedModel, setSelectedModel] = useState<string>('');
+  const [modelGroups, setModelGroups] = useState<ModelGroup[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(true);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Fetch available models from backend on mount
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchModels() {
+      try {
+        const res = await fetch('/api/models');
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data: ModelGroup[] = await res.json();
+        if (cancelled) return;
+
+        setModelGroups(data);
+
+        const allIds = data.flatMap((g) => g.models.map((m) => m.id));
+
+        // Restore saved model if valid, otherwise pick first
+        try {
+          const saved = localStorage.getItem(MODEL_STORAGE_KEY);
+          if (saved && allIds.includes(saved)) {
+            setSelectedModel(saved);
+          } else if (allIds.length > 0) {
+            setSelectedModel(allIds[0]);
+          }
+        } catch {
+          if (allIds.length > 0) setSelectedModel(allIds[0]);
+        }
+      } catch {
+        // API unavailable — leave selectedModel empty, select stays disabled
+      } finally {
+        if (!cancelled) setModelsLoading(false);
+      }
+    }
+
+    fetchModels();
+    return () => { cancelled = true; };
+  }, []);
+
+  // Save model preference on change
+  useEffect(() => {
+    try {
+      localStorage.setItem(MODEL_STORAGE_KEY, selectedModel);
+    } catch {
+      // ignore
+    }
+  }, [selectedModel]);
+
+  useEffect(() => {
+    saveMessages(messages);
+  }, [messages]);
+
+  useEffect(() => {
+    if (open) {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+      inputRef.current?.focus();
+    }
+  }, [open, messages]);
+
+  const newSession = useCallback(() => {
+    setMessages([]);
+    localStorage.removeItem(STORAGE_KEY);
+    inputRef.current?.focus();
+  }, []);
+
+  const send = useCallback(async () => {
+    const text = input.trim();
+    if (!text || streaming) return;
+
+    const userMsg: Message = { role: 'user', content: text };
+    const history = [...messages, userMsg];
+    setMessages(history);
+    setInput('');
+    setStreaming(true);
+
+    const assistantMsg: Message = { role: 'assistant', content: '' };
+    setMessages([...history, assistantMsg]);
+
+    abortRef.current = new AbortController();
+
+    try {
+      const res = await fetch('/api/assistant', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: text,
+          page: pathname,
+          model: selectedModel,
+          history: messages.slice(-8).map((m) => ({ role: m.role, content: m.content })),
+        }),
+        signal: abortRef.current.signal,
+      });
+
+      if (!res.ok) {
+        const err = await res.text();
+        setMessages((prev) => [
+          ...prev.slice(0, -1),
+          { role: 'assistant', content: `Error: ${err}` },
+        ]);
+        return;
+      }
+
+      const reader = res.body?.getReader();
+      const decoder = new TextDecoder();
+      let accumulated = '';
+
+      if (!reader) return;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split('\n');
+
+        for (const line of lines) {
+          if (!line.startsWith('data:')) continue;
+          const data = line.slice(5).trim();
+          if (data === '[DONE]') continue;
+          try {
+            const json = JSON.parse(data);
+            const delta = json?.choices?.[0]?.delta?.content ?? '';
+            if (delta) {
+              accumulated += delta;
+              setMessages((prev) => [
+                ...prev.slice(0, -1),
+                { role: 'assistant', content: accumulated },
+              ]);
+            }
+          } catch {
+            // non-JSON SSE line, skip
+          }
+        }
+      }
+    } catch (err: unknown) {
+      if ((err as Error)?.name !== 'AbortError') {
+        setMessages((prev) => [
+          ...prev.slice(0, -1),
+          { role: 'assistant', content: 'Connection error. Try again.' },
+        ]);
+      }
+    } finally {
+      setStreaming(false);
+      abortRef.current = null;
+    }
+  }, [input, messages, pathname, streaming]);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+
+  return (
+    <>
+      {/* Floating trigger button */}
+      <button
+        className="ochat__trigger"
+        aria-label="Pulse — Rev4a Assistant"
+        onClick={() => setOpen((v) => !v)}
+        title="Pulse — Rev4a Assistant"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      </button>
+
+      {/* Chat panel */}
+      {open && (
+        <div className="ochat__panel">
+          <div className="ochat__header">
+            <span className="ochat__header-title">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--violet)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 6 }}>
+                <ellipse cx="12" cy="12" rx="10" ry="6" />
+                <circle cx="12" cy="12" r="3" fill="var(--violet)" stroke="none" />
+              </svg>
+              PULSE
+            </span>
+            <select
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              disabled={modelsLoading || modelGroups.length === 0}
+              style={{
+                border: '1px solid var(--border)',
+                background: 'var(--bg)',
+                color: 'var(--text)',
+                fontFamily: 'var(--font-mono-stack)',
+                fontSize: 11,
+                borderRadius: 0,
+                padding: '1px 4px',
+                cursor: modelsLoading ? 'wait' : 'pointer',
+                outline: 'none',
+                opacity: modelsLoading ? 0.5 : 1,
+              }}
+              aria-label="Select model"
+            >
+              {modelsLoading ? (
+                <option value="">…</option>
+              ) : (
+                modelGroups.map((group) => (
+                  <optgroup key={group.provider} label={`${group.emoji} ${group.provider}`}>
+                    {group.models.map((m) => (
+                      <option key={m.id} value={m.id}>
+                        {group.emoji} {m.label}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))
+              )}
+            </select>
+            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+              {messages.length > 0 && (
+                <button
+                  className="ochat__clear"
+                  onClick={newSession}
+                  title="New session"
+                  aria-label="New session"
+                >
+                  <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
+                    <path d="M2 8h12M8 2v12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                </button>
+              )}
+              <button className="ochat__close" onClick={() => setOpen(false)} aria-label="Close">
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div className="ochat__messages">
+            {messages.length === 0 && (
+              <p className="ochat__empty">
+                Hello! I'm <strong>Pulse</strong>, the oracle of Rev4a. Ask me about the dashboard, data, or the page you're looking at.
+              </p>
+            )}
+            {messages.map((m, i) => (
+              <div key={i} className={`ochat__msg ochat__msg--${m.role}`}>
+                {m.role === 'assistant' ? renderContent(m.content) : m.content}
+                {m.role === 'assistant' && streaming && i === messages.length - 1 && (
+                  <span className="ochat__cursor" />
+                )}
+              </div>
+            ))}
+            <div ref={bottomRef} />
+          </div>
+
+          <div className="ochat__footer">
+            <textarea
+              ref={inputRef}
+              className="ochat__input"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder="Ask Pulse…"
+              rows={1}
+              disabled={streaming}
+            />
+            <button
+              className="ochat__send"
+              onClick={send}
+              disabled={!input.trim() || streaming}
+              aria-label="Send"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13" />
+                <polygon points="22 2 15 22 11 13 2 9 22 2" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/app/components/Rev4aLoader.tsx

@@ -0,0 +1,48 @@
+type Rev4aLoaderProps = {
+  label?: string;
+  fullHeight?: boolean;
+  compact?: boolean;
+};
+
+export default function Rev4aLoader({ label = 'LOADING', fullHeight = false, compact = false }: Rev4aLoaderProps) {
+  const logoSize = compact ? 42 : 64;
+  return (
+    <div
+      style={{
+        flex: 1,
+        minHeight: fullHeight ? '100dvh' : compact ? 120 : 220,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: compact ? 12 : 20,
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: compact ? 10 : 14 }}>
+        <img
+          src="/rev4a-logo.svg"
+          alt="Rev4a loading"
+          width={logoSize}
+          height={logoSize}
+          style={{
+            objectFit: 'contain',
+            display: 'block',
+            animation: 'rev4a-loader-pulse 1.35s ease-in-out infinite',
+            filter: 'drop-shadow(0 0 16px rgba(146,91,252,0.22))',
+          }}
+        />
+        <div style={{ fontFamily: 'var(--font-serif-stack, serif)', fontSize: compact ? 16 : 22, letterSpacing: compact ? 3 : 4, color: 'var(--violet)' }}>
+          REV4A
+        </div>
+        <div style={{ fontSize: compact ? 10 : 11, letterSpacing: '0.12em', color: 'var(--text-dim)' }}>
+          {label}
+        </div>
+      </div>
+      <style>{`
+        @keyframes rev4a-loader-pulse {
+          0%, 100% { transform: scale(0.96); opacity: 0.72; }
+          50% { transform: scale(1); opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}