nyxora 1.6.13 → 1.7.1

package/packages/dashboard/src/Overview.tsx

@@ -1,157 +0,0 @@
-import { apiFetch } from './utils/api';
-import React, { useState, useEffect, useRef } from 'react';
-import './overview.css';
-
-interface Config {
-  agent: { name: string; default_chain: string };
-  llm: { provider: string; model: string; temperature: number };
-}
-
-interface Stats {
-  cost: number;
-  tokens: number;
-  messages: number;
-}
-
-interface EventLog {
-  timestamp: string;
-  event: string;
-  meta: any;
-}
-
-interface GatewayLog {
-  timestamp: string;
-  message: string;
-  meta?: any;
-}
-
-interface OverviewProps {
-  config: Config | null;
-}
-
-const Overview: React.FC<OverviewProps> = ({ config }) => {
-  const [stats, setStats] = useState<Stats>({ cost: 0, tokens: 0, messages: 0 });
-  const [events, setEvents] = useState<EventLog[]>([]);
-  const [gatewayLogs, setGatewayLogs] = useState<GatewayLog[]>([]);
-  const eventLogsEndRef = useRef<HTMLDivElement>(null);
-  const gatewayLogsEndRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const statsRes = await apiFetch('/api/stats');
-        if (statsRes.ok) setStats(await statsRes.json());
-
-        const logsRes = await apiFetch('/api/logs');
-        if (logsRes.ok) {
-          const logs = await logsRes.json();
-          setEvents(logs.events);
-          setGatewayLogs(logs.gateway);
-        }
-      } catch (err) {
-        console.error("Failed to fetch analytics");
-      }
-    };
-
-    fetchData();
-    const interval = setInterval(fetchData, 2000);
-    return () => clearInterval(interval);
-  }, []);
-
-  if (!config) return <div className="overview-container">Loading...</div>;
-
-  return (
-    <div className="overview-container">
-      <div className="overview-header">
-        <h1>Nyxora Status</h1>
-        <p>System health, active configuration, and loaded Web3 skills.</p>
-      </div>
-
-      <div className="panel gateway-access">
-        <div className="panel-header">
-          <h3>System Configuration</h3>
-          <p>Current runtime parameters for your Web3 Agent.</p>
-        </div>
-        
-        <div className="form-row">
-          <div className="form-group flex-1">
-            <label>API Endpoint</label>
-            <input type="text" value="/api/chat" readOnly />
-          </div>
-          <div className="form-group flex-1">
-            <label>Agent Name</label>
-            <input type="text" value={config.agent.name} readOnly />
-          </div>
-          <div className="form-group flex-1">
-            <label>Memory Storage</label>
-            <input type="text" value="./memory.json" readOnly />
-          </div>
-        </div>
-      </div>
-
-      <div className="metrics-grid">
-        <div className="metric-card">
-          <label>COST</label>
-          <div className="metric-val">${stats.cost.toFixed(4)}</div>
-          <div className="metric-sub">{stats.tokens} tokens - {stats.messages} msgs</div>
-        </div>
-        <div className="metric-card">
-          <label>SESSIONS</label>
-          <div className="metric-val">1</div>
-          <div className="metric-sub">Local chat session active</div>
-        </div>
-        <div className="metric-card">
-          <label>SKILLS</label>
-          <div className="metric-val">2/2</div>
-          <div className="metric-sub">2 Web3 skills loaded</div>
-        </div>
-        <div className="metric-card">
-          <label>CRON</label>
-          <div className="metric-val">0 jobs</div>
-          <div className="metric-sub">No scheduled tasks</div>
-        </div>
-        <div className="metric-card">
-          <label>MODEL AUTH</label>
-          <div className="metric-val text-green">1 ok</div>
-          <div className="metric-sub">{config.llm.provider.toUpperCase()} provider connected</div>
-        </div>
-      </div>
-
-      <div className="logs-grid">
-        <div className="log-panel">
-          <div className="log-header">
-            <span>Event Log <span className="badge">{events.length}</span></span>
-          </div>
-          <div className="log-content">
-            {events.map((log, i) => (
-              <div key={i} className="log-row">
-                <span className="log-time">{log.timestamp}</span>
-                <span className="log-msg">
-                  {log.event} <span className="log-meta">{JSON.stringify(log.meta)}</span>
-                </span>
-              </div>
-            ))}
-            <div ref={eventLogsEndRef} />
-          </div>
-        </div>
-        <div className="log-panel">
-          <div className="log-header">
-            <span>Gateway Logs <span className="badge">{gatewayLogs.length}</span></span>
-          </div>
-          <div className="log-content">
-            {gatewayLogs.map((log, i) => (
-              <div key={i} className="log-row gateway-row">
-                <span className="log-json">
-                  {`{"timestamp":"${log.timestamp}","message":${JSON.stringify(log.message)}${log.meta ? `,"meta":${JSON.stringify(log.meta)}` : ''}}`}
-                </span>
-              </div>
-            ))}
-            <div ref={gatewayLogsEndRef} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Overview;

package/packages/dashboard/src/PendingTransactions.tsx

@@ -1,75 +0,0 @@
-import { useEffect, useState } from 'react';
-import { apiFetch } from './utils/api';
-import { ShieldAlert, Check, X } from 'lucide-react';
-
-export default function PendingTransactions() {
-  const [pending, setPending] = useState<any[]>([]);
-  const [loadingId, setLoadingId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchPending = async () => {
-      try {
-        const res = await apiFetch('/api/transactions');
-        if (res.ok) {
-          setPending(await res.json());
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    };
-    fetchPending();
-    const interval = setInterval(fetchPending, 2000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const handleAction = async (id: string, action: 'approve' | 'reject') => {
-    setLoadingId(id);
-    try {
-      const res = await apiFetch(`/api/transactions/${id}/${action}`, { method: 'POST' });
-      if (res.ok) {
-        setPending(prev => prev.filter(t => t.id !== id));
-      } else {
-        const data = await res.json();
-        alert(`Error: ${data.error}`);
-      }
-    } catch (e: any) {
-      alert(`Failed to ${action}: ${e.message}`);
-    } finally {
-      setLoadingId(null);
-    }
-  };
-
-  if (pending.length === 0) return null;
-
-  return (
-    <div style={{ position: 'fixed', bottom: 20, right: 20, width: 350, zIndex: 1000, display: 'flex', flexDirection: 'column', gap: 10 }}>
-      {pending.map(tx => (
-        <div key={tx.id} style={{ background: '#1e293b', padding: 20, borderRadius: 16, border: '1px solid #eab308', boxShadow: '0 10px 25px -5px rgba(0,0,0,0.5)' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 15 }}>
-            <ShieldAlert color="#eab308" />
-            <strong style={{ color: 'white' }}>Action Required</strong>
-          </div>
-          <p style={{ color: '#cbd5e1', fontSize: '0.9rem', marginBottom: 15 }}>
-            Type: {tx.type.toUpperCase()}<br/>
-            Chain: {tx.chainName.toUpperCase()}<br/>
-            {tx.type === 'transfer' ? `To: ${tx.details.toAddress}\nAmount: ${tx.details.amountEth}` : `Swap: ${tx.details.amount} ${tx.details.fromToken} to ${tx.details.toToken}`}
-          </p>
-          <div style={{ display: 'flex', gap: 10 }}>
-            <button 
-              onClick={() => handleAction(tx.id, 'approve')} 
-              disabled={loadingId === tx.id}
-              style={{ flex: 1, padding: '10px', background: loadingId === tx.id ? '#15803d' : '#22c55e', color: 'white', border: 'none', borderRadius: 8, cursor: loadingId === tx.id ? 'not-allowed' : 'pointer', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
-              <Check size={16} /> {loadingId === tx.id ? 'Processing...' : 'Approve'}
-            </button>
-            <button 
-              onClick={() => handleAction(tx.id, 'reject')} 
-              disabled={loadingId === tx.id}
-              style={{ flex: 1, padding: '10px', background: loadingId === tx.id ? '#b91c1c' : '#ef4444', color: 'white', border: 'none', borderRadius: 8, cursor: loadingId === tx.id ? 'not-allowed' : 'pointer', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
-              <X size={16} /> Reject
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/packages/dashboard/src/Settings.tsx

@@ -1,338 +0,0 @@
-import { apiFetch } from './utils/api';
-import React, { useState, useEffect } from 'react';
-import { Save, User, Cpu, Key, Network, Globe } from 'lucide-react';
-import { PillSelect } from './components/PillSelect';
-
-interface Config {
-  agent: { name: string; default_chain: string };
-  llm: { provider: string; model: string; temperature: number; api_keys?: string[] };
-  web3?: { rpc_urls?: Record<string, string | string[]> };
-}
-
-interface SettingsProps {
-  config: Config | null;
-  onConfigChange: (newConfig: Config) => void;
-}
-
-const Settings: React.FC<SettingsProps> = ({ config, onConfigChange }) => {
-  const [formData, setFormData] = useState<Config | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    if (config) {
-      setFormData({
-        agent: {
-          name: config.agent?.name || 'Nyxora',
-          default_chain: config.agent?.default_chain || 'base'
-        },
-        llm: {
-          provider: config.llm?.provider || 'openai',
-          model: config.llm?.model || 'gpt-4o-mini',
-          temperature: config.llm?.temperature ?? 0.2,
-          api_keys: Array.isArray(config.llm?.api_keys) 
-            ? config.llm.api_keys 
-            : (config.llm?.api_keys ? [config.llm.api_keys as unknown as string] : [])
-        },
-        web3: {
-          rpc_urls: config.web3?.rpc_urls || {}
-        }
-      });
-    }
-  }, [config]);
-
-  if (!formData) return <div className="overview-container">Loading settings...</div>;
-
-  const handleChange = (section: 'agent' | 'llm', field: string, value: string | number) => {
-    setFormData(prev => {
-      if (!prev) return prev;
-      return {
-        ...prev,
-        [section]: {
-          ...prev[section],
-          [field]: field === 'temperature' ? Number(value) : value
-        }
-      };
-    });
-  };
-
-  const handleWeb3Change = (chainName: string, value: string) => {
-    setFormData(prev => {
-      if (!prev) return prev;
-      const urls = value.split(',').map(s => s.trim()).filter(s => s);
-      const newRpcUrls = { ...(prev.web3?.rpc_urls || {}) };
-      
-      if (urls.length === 0) {
-        delete newRpcUrls[chainName];
-      } else if (urls.length === 1) {
-        newRpcUrls[chainName] = urls[0];
-      } else {
-        newRpcUrls[chainName] = urls;
-      }
-      
-      return {
-        ...prev,
-        web3: {
-          ...prev.web3,
-          rpc_urls: newRpcUrls
-        }
-      };
-    });
-  };
-
-  const handleAddApiKey = () => {
-    setFormData(prev => {
-      if (!prev) return prev;
-      const currentKeys = prev.llm.api_keys || [];
-      if (currentKeys.length >= 10) return prev;
-      return { ...prev, llm: { ...prev.llm, api_keys: [...currentKeys, ''] } };
-    });
-  };
-
-  const handleUpdateApiKey = (index: number, value: string) => {
-    setFormData(prev => {
-      if (!prev) return prev;
-      const newKeys = [...(prev.llm.api_keys || [])];
-      newKeys[index] = value;
-      return { ...prev, llm: { ...prev.llm, api_keys: newKeys } };
-    });
-  };
-
-  const handleRemoveApiKey = (index: number) => {
-    setFormData(prev => {
-      if (!prev) return prev;
-      const newKeys = [...(prev.llm.api_keys || [])];
-      newKeys.splice(index, 1);
-      return { ...prev, llm: { ...prev.llm, api_keys: newKeys } };
-    });
-  };
-
-  const handleSave = async () => {
-    setIsSaving(true);
-    try {
-      const res = await apiFetch('/api/config', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(formData)
-      });
-      if (res.ok) {
-        onConfigChange(formData);
-        alert('Settings saved successfully!');
-      }
-    } catch (e) {
-      console.error(e);
-      alert('Failed to save settings');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <div className="overview-container" style={{ maxWidth: '900px', margin: '0 auto' }}>
-      <div className="overview-header" style={{ marginBottom: '32px' }}>
-        <h1 style={{ color: '#eceff4' }}>Configuration</h1>
-        <p style={{ color: '#d8dee9' }}>Modify the core behaviors and parameters of the Nyxora Agent.</p>
-      </div>
-
-      <div className="panel" style={{ background: 'transparent', border: 'none', padding: 0 }}>
-        <div className="nord-panel-header">
-          <User size={18} color="#81a1c1" />
-          <h3>Agent Profile</h3>
-        </div>
-        <div className="form-row">
-          <div className="form-group flex-1">
-            <label className="nord-label">Agent Name</label>
-            <input 
-              className="nord-pill-input"
-              type="text" 
-              value={formData.agent.name} 
-              onChange={e => handleChange('agent', 'name', e.target.value)} 
-            />
-          </div>
-          <div className="form-group flex-1">
-            <label className="nord-label">Default Web3 Chain</label>
-            <PillSelect 
-              value={formData.agent.default_chain}
-              onChange={(val) => handleChange('agent', 'default_chain', val)}
-              pillColor="#88c0d0"
-              textColor="#000000"
-              options={[
-                { id: 'ethereum', label: 'Ethereum Mainnet', icon: <Globe size={14} /> },
-                { id: 'bsc', label: 'BNB Chain', icon: <Globe size={14} /> },
-                { id: 'base', label: 'Base', icon: <Globe size={14} /> },
-                { id: 'optimism', label: 'Optimism', icon: <Globe size={14} /> },
-                { id: 'arbitrum', label: 'Arbitrum', icon: <Globe size={14} /> },
-                { id: 'sepolia', label: 'Sepolia Testnet', icon: <Globe size={14} /> }
-              ]}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="panel" style={{ background: 'transparent', border: 'none', padding: 0, marginTop: '32px' }}>
-        <div className="nord-panel-header">
-          <Cpu size={18} color="#81a1c1" />
-          <h3>LLM Engine</h3>
-        </div>
-        <div className="form-row">
-          <div className="form-group flex-1">
-            <label className="nord-label">Provider</label>
-            <PillSelect 
-              value={formData.llm.provider}
-              onChange={(val) => handleChange('llm', 'provider', val)}
-              pillColor="#81a1c1"
-              textColor="#000000"
-              options={[
-                { id: 'gemini', label: 'Google Gemini', icon: <Cpu size={14} /> },
-                { id: 'openai', label: 'OpenAI', icon: <Cpu size={14} /> },
-                { id: 'openrouter', label: 'OpenRouter', icon: <Cpu size={14} /> },
-                { id: 'ollama', label: 'Ollama (Local)', icon: <Cpu size={14} /> }
-              ]}
-            />
-          </div>
-          <div className="form-group flex-1">
-            <label className="nord-label">Model Name</label>
-            <input 
-              className="nord-pill-input"
-              style={{ color: '#81a1c1' }}
-              type="text" 
-              value={formData.llm.model} 
-              onChange={e => handleChange('llm', 'model', e.target.value)} 
-            />
-          </div>
-          <div className="form-group flex-1">
-            <label className="nord-label">Temperature ({formData.llm.temperature})</label>
-            <input 
-              className="nord-slider"
-              type="range" 
-              min="0" max="1" step="0.1"
-              value={formData.llm.temperature} 
-              onChange={e => handleChange('llm', 'temperature', e.target.value)} 
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="panel" style={{ background: 'transparent', border: 'none', padding: 0, marginTop: '32px' }}>
-        <div className="nord-panel-header" style={{ justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <Key size={18} color="#81a1c1" />
-            <h3>API Keys (Rotation)</h3>
-          </div>
-          <span style={{ fontSize: '0.8rem', color: '#81a1c1', fontWeight: 600 }}>
-            {formData.llm.api_keys?.length || 0} / 10 Keys
-          </span>
-        </div>
-        <p style={{ fontSize: '0.85rem', color: '#d8dee9', marginBottom: '20px' }}>
-          Add up to 10 API keys. The system will automatically rotate through them (Round-Robin) for each request to prevent rate limits. Leave empty to fallback to default credentials set via CLI (nyxora setup).
-        </p>
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          {(formData.llm.api_keys || []).map((key, index) => (
-            <div key={index} style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-              <input 
-                className="nord-input"
-                type="password" 
-                value={key}
-                placeholder="sk-..."
-                onChange={(e) => handleUpdateApiKey(index, e.target.value)}
-              />
-              <button 
-                onClick={() => handleRemoveApiKey(index)}
-                style={{ 
-                  background: 'rgba(191, 97, 106, 0.15)', 
-                  color: '#bf616a', 
-                  border: '1px solid rgba(191, 97, 106, 0.3)', 
-                  borderRadius: '6px', 
-                  padding: '10px 16px', 
-                  cursor: 'pointer', 
-                  transition: 'all 0.2s',
-                  fontWeight: 600,
-                  fontSize: '0.85rem'
-                }}
-                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(191, 97, 106, 0.25)'}
-                onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(191, 97, 106, 0.15)'}
-              >
-                Delete
-              </button>
-            </div>
-          ))}
-
-          {(!formData.llm.api_keys || formData.llm.api_keys.length < 10) && (
-            <button 
-              onClick={handleAddApiKey}
-              style={{ 
-                alignSelf: 'flex-start', 
-                background: 'transparent', 
-                color: '#81a1c1', 
-                border: '1px dashed #434c5e', 
-                borderRadius: '6px', 
-                padding: '10px 20px', 
-                cursor: 'pointer', 
-                marginTop: '8px', 
-                transition: 'all 0.2s',
-                fontWeight: 600,
-                fontSize: '0.85rem'
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.borderColor = '#81a1c1';
-                e.currentTarget.style.background = 'rgba(129, 161, 193, 0.1)';
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.borderColor = '#434c5e';
-                e.currentTarget.style.background = 'transparent';
-              }}
-            >
-              + Add API Key
-            </button>
-          )}
-        </div>
-      </div>
-
-      <div className="panel" style={{ background: 'transparent', border: 'none', padding: 0, marginTop: '40px' }}>
-        <div className="nord-panel-header">
-          <Network size={18} color="#81a1c1" />
-          <h3>Web3 & RPC Settings</h3>
-        </div>
-        <p style={{ fontSize: '0.85rem', color: '#d8dee9', marginBottom: '20px' }}>
-          Override the default public RPCs with your own Premium endpoints (Alchemy/Infura). 
-          Separate multiple URLs with a comma for Fallback High-Availability.
-        </p>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
-          {['ethereum', 'base', 'bsc', 'arbitrum', 'optimism', 'sepolia'].map(chain => {
-            const rpcVal = formData.web3?.rpc_urls?.[chain];
-            const displayVal = Array.isArray(rpcVal) ? rpcVal.join(', ') : (rpcVal || '');
-            return (
-              <div key={chain} className="form-group" style={{ position: 'relative' }}>
-                <label className="nord-label" style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                  <img 
-                    src={`https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${chain === 'bsc' ? 'smartchain' : chain}/info/logo.png`} 
-                    alt={chain} 
-                    style={{ width: '14px', height: '14px', borderRadius: '50%' }}
-                    onError={(e) => e.currentTarget.style.display = 'none'}
-                  />
-                  {chain} RPC
-                </label>
-                <input 
-                  className="nord-input"
-                  type="text" 
-                  placeholder="https://..." 
-                  value={displayVal}
-                  onChange={(e) => handleWeb3Change(chain, e.target.value)}
-                />
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div className="form-actions" style={{ justifyContent: 'flex-end', marginTop: '48px', paddingTop: '24px', borderTop: '1px solid rgba(216, 222, 233, 0.05)' }}>
-        <button className="nord-btn-primary" onClick={handleSave} disabled={isSaving}>
-          <Save size={16} style={{ marginRight: '8px' }} />
-          {isSaving ? 'Saving...' : 'Save Configuration'}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Settings;