<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Farnsworth AI - Neural Interface</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Give Claude superpowers: persistent memory, model swarms, Solana trading, and self-evolution. Your AI companion that remembers everything.">
<meta name="keywords" content="AI, Claude, memory, Solana, trading, agents, companion, neural, Farnsworth">
<meta name="author" content="Farnsworth AI">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://ai.farnsworth.cloud/">
<meta property="og:title" content="Farnsworth AI - Your Claude Companion">
<meta property="og:description" content="Give Claude superpowers: persistent memory, model swarms, Solana trading, P2P networking, and self-evolution. All processing runs locally.">
<meta property="og:image" content="https://ai.farnsworth.cloud/static/images/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Farnsworth AI">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@timowhite88">
<meta name="twitter:creator" content="@timowhite88">
<meta name="twitter:title" content="Farnsworth AI - Your Claude Companion">
<meta name="twitter:description" content="Give Claude superpowers: persistent memory, model swarms, Solana trading, P2P networking, and self-evolution. All processing runs locally.">
<meta name="twitter:image" content="https://ai.farnsworth.cloud/static/images/og-image.png">
<meta name="twitter:image:alt" content="Farnsworth AI - Neural Interface with cosmic background and glowing brain">
<!-- Theme Color -->
<meta name="theme-color" content="#6366f1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css?v=20260129a">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧠</text></svg>">
<!-- Chart.js for health metrics -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Cosmic Background -->
<div class="cosmos">
<div class="nebula nebula-1"></div>
<div class="nebula nebula-2"></div>
<div class="nebula nebula-3"></div>
<div class="stars"></div>
<canvas id="neural-canvas"></canvas>
</div>
<!-- Main Application Interface -->
<section id="chat-app" class="chat-section">
<!-- Header -->
<header class="app-header glass-panel">
<div class="header-left">
<button id="sidebar-toggle" class="sidebar-toggle-btn" title="Toggle Sidebar">
<span class="hamburger">
<span></span><span></span><span></span>
</span>
</button>
<div class="brand">
<div class="brand-orb">
<div class="mini-orb"></div>
</div>
<div class="brand-text">
<span class="brand-name">Farnsworth</span>
<span class="brand-status">
<span class="status-dot" id="connection-dot"></span>
<span id="connection-status-text">Connecting...</span>
</span>
</div>
</div>
</div>
<div class="header-center">
<!-- Chat Mode Toggle -->
<div class="chat-mode-toggle">
<button id="personal-chat-btn" class="mode-btn active" onclick="switchChatMode(false)" title="Personal chat with Farnsworth">
💬 Personal
</button>
<button id="swarm-chat-btn" class="mode-btn" onclick="switchChatMode(true)" title="Global swarm chat with all bots">
🐝 Swarm
</button>
</div>
<!-- Swarm Status (shows when in swarm mode) -->
<div class="swarm-header" id="swarm-status-header" style="display: none;">
<span class="swarm-logo">🐝</span>
<span class="swarm-title">Global Swarm</span>
<span class="online-badge" id="swarm-online-count">0</span>
<span class="swarm-live-dot"></span>
<button class="username-btn" onclick="changeUsername()" title="Change your display name">
<span class="username-icon">👤</span>
<span id="current-username">You</span>
</button>
</div>
<!-- Profile Switcher -->
<div class="profile-switcher">
<button class="profile-btn active" data-profile="default" title="Default">🧠</button>
<button class="profile-btn" data-profile="work" title="Work Mode">💼</button>
<button class="profile-btn" data-profile="creative" title="Creative Mode">🎨</button>
<button class="profile-btn" data-profile="health" title="Health Mode">🏥</button>
<button class="profile-btn" data-profile="trading" title="Trading Mode">📈</button>
</div>
</div>
<div class="header-right">
<button id="voice-toggle" class="control-btn active" title="Toggle voice output - AI will speak responses aloud">
<span class="voice-on">🔊</span>
<span class="voice-off">🔇</span>
</button>
<!-- Volume Slider -->
<div class="volume-control" id="volume-control" title="Adjust voice volume">
<span class="volume-icon">🔉</span>
<input type="range" id="volume-slider" min="0" max="100" value="80" class="volume-slider">
<span class="volume-value" id="volume-value">80%</span>
</div>
<button id="live-dashboard-btn" class="control-btn" onclick="window.open('/live', '_blank')" title="Open real-time dashboard with live metrics and visualizations">📊</button>
</div>
</header>
<!-- Main Content Area -->
<div class="main-content">
<!-- Left Sidebar - Features -->
<aside id="left-sidebar" class="sidebar left-sidebar glass-panel">
<div class="sidebar-section">
<h3 class="sidebar-title" title="Store and retrieve information that persists across sessions">
<span class="title-icon">💾</span>
Memory
<span class="help-tip">?</span>
</h3>
<p class="section-desc">Store information the AI remembers forever</p>
<div class="memory-controls">
<div class="memory-input-group">
<textarea id="memory-input" placeholder="Type facts, preferences, or context to store..." rows="2" title="Enter information you want the AI to remember permanently"></textarea>
<button id="remember-btn" class="action-btn primary" title="Save to long-term memory">Remember</button>
</div>
<div class="memory-search-group">
<input type="text" id="memory-search" placeholder="Search your memories..." title="Search through all stored memories">
<button id="recall-btn" class="action-btn" title="Find matching memories">Recall</button>
</div>
<div id="memory-results" class="memory-results"></div>
</div>
</div>
<div class="sidebar-section polymarket-section">
<h3 class="sidebar-title" title="AI Collective Polymarket Predictions">
<span class="title-icon">🎯</span>
Polymarket Picks
<span class="prediction-live-dot"></span>
</h3>
<div class="prediction-stats-bar">
<div class="stat-item accuracy">
<span class="stat-value" id="pm-accuracy">--</span>
<span class="stat-label">Accuracy</span>
</div>
<div class="stat-item streak">
<span class="stat-value" id="pm-streak">0</span>
<span class="stat-label">Streak</span>
</div>
<div class="stat-item total">
<span class="stat-value" id="pm-total">0</span>
<span class="stat-label">Picks</span>
</div>
</div>
<div class="predictions-feed" id="predictions-feed">
<div class="prediction-loading">
<div class="prediction-spinner"></div>
<span>Analyzing markets...</span>
</div>
</div>
<div class="prediction-footer">
<span class="prediction-update-time" id="pm-last-update">Updated: --</span>
<span class="prediction-interval">Every 5 min</span>
</div>
</div>
<div class="sidebar-section">
<h3 class="sidebar-title" title="Save and organize code snippets">
<span class="title-icon">💻</span>
Snippets
<span class="help-tip">?</span>
</h3>
<p class="section-desc">Save code for quick reference and reuse</p>
<div class="snippets-controls">
<button id="new-snippet-btn" class="action-btn full-width" title="Create a new code snippet">+ New Snippet</button>
<div id="snippets-list" class="snippets-list"></div>
</div>
</div>
</aside>
<!-- Chat Area -->
<main class="chat-main">
<div class="messages-container" id="messages">
<!-- Welcome Message injected by JS -->
</div>
<div id="typing-indicator" class="typing-indicator hidden">
<div class="typing-avatar">🧠</div>
<div class="typing-content">
<span class="typing-name">Farnsworth</span>
<div class="typing-dots">
<span></span><span></span><span></span>
</div>
</div>
</div>
<!-- Input Area -->
<div class="chat-footer">
<div class="input-container glass-panel">
<div class="quick-actions">
<button class="quick-action-btn" data-action="remember" title="Remember">💾</button>
<button class="quick-action-btn" data-action="recall" title="Recall">🔍</button>
<button class="quick-action-btn" data-action="think" title="Deep Think">🤔</button>
<button class="quick-action-btn" data-action="tools" title="Tools">🛠️</button>
</div>
<div class="input-row">
<button id="mic-btn" class="mic-button" title="Voice Input (Click to speak)">
<span class="mic-icon">🎤</span>
<span class="mic-listening">🔴</span>
</button>
<textarea
id="user-input"
placeholder="Ask Farnsworth anything... or click 🎤 to speak"
rows="1"
maxlength="2000"
></textarea>
<button id="send-btn" class="send-button" disabled>
<span>Send</span>
<span class="send-arrow">➤</span>
</button>
</div>
<div class="input-meta">
<span class="char-counter"><span id="char-count">0</span>/2000</span>
<span class="feature-badge" id="feature-badge">🧠 Full Features Active</span>
</div>
</div>
</div>
</main>
<!-- Right Sidebar - Tools & Widgets -->
<aside id="right-sidebar" class="sidebar right-sidebar glass-panel">
<!-- Focus Timer Widget -->
<div class="sidebar-section widget-section">
<h3 class="sidebar-title" title="Pomodoro-style focus timer to boost productivity">
<span class="title-icon">⏱️</span>
Focus Timer
</h3>
<p class="section-desc">Stay focused with timed work sessions</p>
<div class="focus-timer-widget">
<div class="timer-display">
<span id="timer-minutes">25</span>:<span id="timer-seconds">00</span>
</div>
<div class="timer-task" id="timer-task">Ready to focus</div>
<div class="timer-controls">
<button id="timer-start" class="timer-btn start" title="Start the focus timer">Start</button>
<button id="timer-stop" class="timer-btn stop hidden" title="Pause the timer">Stop</button>
<button id="timer-reset" class="timer-btn reset" title="Reset to selected duration">Reset</button>
</div>
<div class="timer-presets">
<button class="preset-btn active" data-minutes="25" title="25 minute Pomodoro">25m</button>
<button class="preset-btn" data-minutes="45" title="45 minute deep work">45m</button>
<button class="preset-btn" data-minutes="60" title="1 hour focus block">60m</button>
</div>
</div>
</div>
<!-- Evolution Stats Widget -->
<div class="sidebar-section widget-section">
<h3 class="sidebar-title" title="Real-time swarm evolution and learning stats">
<span class="title-icon">🧬</span>
Swarm Evolution
<span class="evolution-live-indicator" title="Updates every 60s">LIVE</span>
</h3>
<p class="section-desc">Watch the swarm learn and evolve in real-time</p>
<div class="evolution-widget">
<div class="evolution-cycle">
<div class="cycle-ring" title="Evolution cycle progress">
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="evolution-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6"/>
<stop offset="50%" style="stop-color:#06b6d4"/>
<stop offset="100%" style="stop-color:#10b981"/>
</linearGradient>
</defs>
<circle class="cycle-bg" cx="50" cy="50" r="40"/>
<circle class="cycle-fill" cx="50" cy="50" r="40" id="evolution-circle"/>
</svg>
<span class="cycle-value" id="evolution-cycle">--</span>
</div>
<span class="cycle-label">Generation</span>
</div>
<div class="evolution-metrics">
<div class="evo-metric" title="Total learnings accumulated">
<span class="evo-icon">📚</span>
<span class="evo-value" id="total-learnings">--</span>
<span class="evo-label">Learnings</span>
</div>
<div class="evo-metric" title="Learnings until next auto-evolution">
<span class="evo-icon">⏳</span>
<span class="evo-value" id="until-evolution">--</span>
<span class="evo-label">Until Evolve</span>
</div>
<div class="evo-metric" title="Conversation patterns discovered">
<span class="evo-icon">🔮</span>
<span class="evo-value" id="patterns-count">--</span>
<span class="evo-label">Patterns</span>
</div>
</div>
<div class="personality-stats" id="personality-stats">
<!-- Populated by JS -->
</div>
<div class="evolution-footer">
<span class="last-evolution" id="last-evolution">Last: --</span>
<button id="force-evolve-btn" class="action-btn small" title="Manually trigger evolution cycle">Evolve Now</button>
</div>
</div>
</div>
<!-- Trading Tools Widget -->
<div class="sidebar-section widget-section">
<h3 class="sidebar-title" title="Solana DeFi trading and analysis tools">
<span class="title-icon">📊</span>
Solana Tools
</h3>
<p class="section-desc">Real-time token analysis for Solana</p>
<div class="trading-widget">
<div class="tool-buttons">
<button class="tool-btn" onclick="openWhaleTracker()" title="Track large wallet movements and whale activity">
<span class="tool-icon">🐋</span>
<span class="tool-name">Whale Track</span>
</button>
<button class="tool-btn" onclick="openRugCheck()" title="Check if a token has red flags or rug pull risk">
<span class="tool-icon">🔍</span>
<span class="tool-name">Rug Check</span>
</button>
<button class="tool-btn" onclick="openTokenScanner()" title="Get price, liquidity, and holder data for any token">
<span class="tool-icon">📈</span>
<span class="tool-name">Token Scan</span>
</button>
<button class="tool-btn" onclick="openMarketSentiment()" title="Analyze overall market sentiment and trends">
<span class="tool-icon">🌡️</span>
<span class="tool-name">Sentiment</span>
</button>
</div>
</div>
</div>
<!-- System Status Widget -->
<div class="sidebar-section widget-section">
<h3 class="sidebar-title" title="Status of all Farnsworth subsystems">
<span class="title-icon">⚡</span>
System Status
</h3>
<p class="section-desc">Active features and services</p>
<div class="status-widget">
<div class="status-item" title="Long-term memory storage system">
<span class="status-label">Memory</span>
<span class="status-indicator" id="status-memory">⏳</span>
</div>
<div class="status-item" title="Journal manager">
<span class="status-label">Notes</span>
<span class="status-indicator" id="status-notes">⏳</span>
</div>
<div class="status-item" title="Swarm evolution and learning">
<span class="status-label">Evolution</span>
<span class="status-indicator" id="status-evolution">⏳</span>
</div>
<div class="status-item" title="Trading and analysis tools">
<span class="status-label">Tools</span>
<span class="status-indicator" id="status-tools">⏳</span>
</div>
<div class="status-item" title="Sequential thinking engine">
<span class="status-label">Thinking</span>
<span class="status-indicator" id="status-thinking">⏳</span>
</div>
</div>
</div>
<!-- Swarm Learning Widget (visible in Swarm mode) -->
<div id="swarm-learning-widget" class="sidebar-section widget-section hidden">
<h3 class="sidebar-title">
<span class="title-icon">🧬</span>
Swarm Learning
</h3>
<div class="learning-widget">
<div class="learning-stat">
<span class="stat-label">Learning Cycles</span>
<span class="stat-value" id="learning-cycles">0</span>
</div>
<div class="learning-stat">
<span class="stat-label">Concepts Extracted</span>
<span class="stat-value" id="concept-count">0</span>
</div>
<div class="learning-stat">
<span class="stat-label">Active Bots</span>
<span class="stat-value" id="active-bots">4</span>
</div>
<div class="top-concepts" id="top-concepts">
<!-- Populated dynamically -->
</div>
<div class="processing-stats" id="processing-stats">
<!-- Real-time processing stats populated dynamically -->
</div>
<div class="swarm-users" id="swarm-users-list">
<h4>🐝 Swarm Members</h4>
<div class="user-list">
<!-- Populated dynamically -->
</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<!-- Modal Container -->
<div id="modal-overlay" class="modal-overlay hidden">
<div id="modal-container" class="modal-container glass-panel">
<div class="modal-header">
<h3 id="modal-title">Modal Title</h3>
<button class="modal-close" onclick="closeModal()">✕</button>
</div>
<div id="modal-content" class="modal-content">
<!-- Dynamic modal content -->
</div>
<div id="modal-footer" class="modal-footer">
<!-- Dynamic modal actions -->
</div>
</div>
</div>
<!-- Thinking Visualization Modal -->
<div id="thinking-modal" class="modal-overlay hidden">
<div class="modal-container glass-panel thinking-modal">
<div class="modal-header">
<h3>🤔 Sequential Thinking</h3>
<button class="modal-close" onclick="closeThinkingModal()">✕</button>
</div>
<div class="thinking-content">
<div class="thinking-input">
<textarea id="thinking-problem" placeholder="Describe a problem to analyze step-by-step..." rows="3"></textarea>
<button id="start-thinking-btn" class="action-btn primary">Analyze</button>
</div>
<div id="thinking-steps" class="thinking-steps">
<!-- Steps will be rendered here -->
</div>
<div id="thinking-conclusion" class="thinking-conclusion hidden">
<!-- Conclusion will be rendered here -->
</div>
</div>
</div>
</div>
<!-- Snippet Editor Modal -->
<div id="snippet-modal" class="modal-overlay hidden">
<div class="modal-container glass-panel snippet-modal">
<div class="modal-header">
<h3>💻 Code Snippet</h3>
<button class="modal-close" onclick="closeSnippetModal()">✕</button>
</div>
<div class="snippet-content">
<input type="text" id="snippet-desc" placeholder="Description..." class="snippet-field">
<select id="snippet-lang" class="snippet-field">
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="bash">Bash</option>
<option value="sql">SQL</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="json">JSON</option>
<option value="other">Other</option>
</select>
<textarea id="snippet-code" placeholder="Paste your code here..." rows="10" class="snippet-code"></textarea>
<input type="text" id="snippet-tags" placeholder="Tags (comma separated)..." class="snippet-field">
<button id="save-snippet-btn" class="action-btn primary full-width">Save Snippet</button>
</div>
</div>
</div>
<!-- Health Details Modal -->
<div id="health-modal" class="modal-overlay hidden">
<div class="modal-container glass-panel health-modal">
<div class="modal-header">
<h3>🏥 Health Dashboard</h3>
<button class="modal-close" onclick="closeHealthModal()">✕</button>
</div>
<div class="health-dashboard-content">
<div class="health-charts">
<div class="chart-container">
<h4>Heart Rate (7 days)</h4>
<canvas id="heart-rate-chart"></canvas>
</div>
<div class="chart-container">
<h4>Daily Steps (7 days)</h4>
<canvas id="steps-chart"></canvas>
</div>
</div>
<div class="health-insights" id="health-insights">
<!-- AI insights will appear here -->
</div>
</div>
</div>
</div>
<!-- Tool Input Modals -->
<div id="tool-modal" class="modal-overlay hidden">
<div class="modal-container glass-panel tool-modal">
<div class="modal-header">
<h3 id="tool-modal-title">Tool</h3>
<button class="modal-close" onclick="closeToolModal()">✕</button>
</div>
<div id="tool-modal-content" class="tool-modal-content">
<!-- Dynamic tool form -->
</div>
<div id="tool-modal-result" class="tool-modal-result hidden">
<!-- Tool result display -->
</div>
</div>
</div>
<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>
<script src="/static/js/app.js?v=20260202voice"></script>
</body>
</html>
