Spaces:

KeefeBuild
/

Keefe-Discere-Multimodal-OS

Running

File size: 53,544 Bytes

0ee7bc1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>⚡ Keefe-Discere OS — Multimodal Any-to-Any Edge</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<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=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<script>
  tailwind.config = {
    theme: {
      extend: {
        fontFamily: {
          sans: ['Inter', 'ui-sans-serif', 'system-ui'],
          mono: ['JetBrains Mono', 'Fira Code', 'ui-monospace'],
        },
        colors: {
          keefe: {
            bg: '#090d16',
            panel: '#0d1420',
            border: '#1e293b',
            indigo: '#6366f1',
            cyan: '#06b6d4',
            emerald: '#10b981',
            amber: '#f59e0b',
            rose: '#f43f5e',
          }
        },
        animation: {
          'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          'glow': 'glow 2s ease-in-out infinite alternate',
          'scan': 'scan 3s linear infinite',
          'blink': 'blink 1.2s steps(2, start) infinite',
        },
        keyframes: {
          glow: {
            '0%': { boxShadow: '0 0 10px rgba(99, 102, 241, 0.3)' },
            '100%': { boxShadow: '0 0 20px rgba(6, 182, 212, 0.5)' },
          },
          scan: {
            '0%': { transform: 'translateY(-100%)' },
            '100%': { transform: 'translateY(100%)' },
          },
          blink: {
            'to': { visibility: 'hidden' }
          }
        }
      }
    }
  }
</script>
<style>
  * { -webkit-tap-highlight-color: transparent; }
  html, body {
    background-color: #090d16;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
  }
  /* Grid background pattern */
  .cyber-grid {
    background-image:
      linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: -1px -1px;
  }
  .cyber-grid::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.12), transparent 50%),
                radial-gradient(ellipse at bottom, rgba(6, 182, 212, 0.08), transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  .glass {
    background: rgba(13, 20, 32, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(30, 41, 59, 0.7);
  }

  .glass-strong {
    background: rgba(9, 13, 22, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(30, 41, 59, 0.85);
  }

  /* Scrollbars */
  .thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
  .thin-scroll::-webkit-scrollbar-track { background: transparent; }
  .thin-scroll::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 10px;
  }
  .thin-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.4);
  }

  /* XML tag styles */
  .xml-block {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 3px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: #fcd34d;
    position: relative;
    overflow: hidden;
  }
  .xml-block::before {
    content: '⚡ TOOL_CALL';
    position: absolute;
    top: -8px;
    right: 10px;
    background: #090d16;
    padding: 0 6px;
    font-size: 9px;
    letter-spacing: 2px;
    color: #f59e0b;
    font-weight: 700;
  }
  .xml-tag { color: #fbbf24; font-weight: 500; }
  .xml-name { color: #fb923c; font-weight: 600; }
  .xml-input { color: #fde68a; }

  /* Message animations */
  @keyframes slideInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .msg-enter { animation: slideInUp 0.35s ease-out forwards; }

  /* Drop zone pulse */
  .drop-zone.drag-over {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: #06b6d4 !important;
    box-shadow: inset 0 0 0 2px rgba(6, 182, 212, 0.4), 0 0 30px rgba(6, 182, 212, 0.2);
  }
  .drop-zone.drag-over .drop-label { color: #06b6d4; }

  /* Blinking cursor */
  .cursor-blink::after {
    content: '▊';
    color: #06b6d4;
    animation: blink 1.2s steps(2, start) infinite;
    margin-left: 2px;
  }

  /* Status dot pulse */
  .status-dot {
    position: relative;
  }
  .status-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: #10b981;
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    opacity: 0.6;
  }
  @keyframes pulse-ring {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.8); opacity: 0; }
  }

  /* Scan line effect for active tool calls */
  .scan-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.2), transparent);
    animation: scan 2.5s linear infinite;
    pointer-events: none;
  }

  /* Textarea auto resize */
  textarea { resize: none; }

  /* Button hover effects */
  .btn-primary {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    transition: all 0.2s ease;
  }
  .btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.5), 0 0 45px rgba(6, 182, 212, 0.3);
    transform: translateY(-1px);
  }
  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Modal backdrop */
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
  }

  /* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, #a5b4fc 0%, #67e8f9 50%, #86efac 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Code block for regular code */
  .code-block {
    background: rgba(2, 6, 23, 0.8);
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    padding: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #94a3b8;
    overflow-x: auto;
  }

  /* Tool result card */
  .tool-result {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(6, 182, 212, 0.03));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 3px solid #10b981;
    border-radius: 10px;
    padding: 12px 14px;
  }
  .tool-result::before {
    content: '✓ TOOL_RESULT';
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: #10b981;
    font-weight: 700;
    margin-bottom: 6px;
  }

  /* Error card */
  .error-block {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(244, 63, 94, 0.03));
    border: 1px solid rgba(244, 63, 94, 0.25);
    border-left: 3px solid #f43f5e;
    border-radius: 10px;
    padding: 12px 14px;
    color: #fca5a5;
  }

  /* Chip styles */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.6);
    color: #cbd5e1;
  }

  /* Prevent text selection on UI */
  .no-select { user-select: none; }

  /* Loading dots */
  .loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background: #06b6d4;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
  }
  .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
  .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
  @keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
  }

  /* Focus ring */
  input:focus, textarea:focus {
    outline: none;
  }
  .focus-ring:focus {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
  }
</style>
</head>
<body class="cyber-grid h-screen w-screen relative">

<!-- ===== MAIN CONTAINER ===== -->
<div id="app" class="relative z-10 h-full w-full flex flex-col">

  <!-- ===== TOP BAR ===== -->
  <header class="glass-strong border-b border-slate-800/80 px-4 sm:px-6 py-3 flex items-center justify-between gap-4 flex-shrink-0">
    <div class="flex items-center gap-3 min-w-0">
      <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-indigo-500/30">
        <i data-lucide="zap" class="w-5 h-5 text-white"></i>
      </div>
      <div class="min-w-0">
        <h1 class="text-sm sm:text-base font-bold gradient-text truncate">Keefe-Discere OS</h1>
        <div class="flex items-center gap-2 mt-0.5">
          <span class="status-dot w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block"></span>
          <span class="text-[10px] text-slate-400 font-mono tracking-wide">Online • Static Edge Router</span>
        </div>
      </div>
    </div>

    <div class="flex items-center gap-2 flex-shrink-0">
      <div id="modelChip" class="chip hidden sm:inline-flex">
        <i data-lucide="cpu" class="w-3 h-3"></i>
        <span class="font-mono">KeefeBuild/Keefe-Discere</span>
      </div>
      <button id="tokenBtn" class="relative px-3 py-1.5 rounded-lg glass hover:bg-slate-800/80 transition-colors flex items-center gap-2 group">
        <i data-lucide="key-round" class="w-4 h-4 text-slate-400 group-hover:text-indigo-400"></i>
        <span class="text-xs font-medium text-slate-300 hidden sm:inline" id="tokenStatus">Set Token</span>
        <span id="tokenSavedBadge" class="hidden absolute -top-1 -right-1 w-2 h-2 rounded-full bg-emerald-400 ring-2 ring-keefe-bg"></span>
      </button>
      <button id="clearBtn" class="p-2 rounded-lg glass hover:bg-slate-800/80 transition-colors" title="Clear chat">
        <i data-lucide="trash-2" class="w-4 h-4 text-slate-400"></i>
      </button>
    </div>
  </header>

  <!-- ===== CHAT AREA ===== -->
  <main class="flex-1 flex flex-col min-h-0 relative">

    <!-- System Prompt Collapsible -->
    <div class="px-4 sm:px-6 pt-3 flex-shrink-0">
      <button id="systemPromptToggle" class="flex items-center gap-2 text-xs text-slate-400 hover:text-slate-200 transition-colors group">
        <i data-lucide="settings-2" class="w-3.5 h-3.5"></i>
        <span class="font-mono tracking-wide">SYSTEM_INSTRUCTIONS</span>
        <i data-lucide="chevron-down" id="sysPromptIcon" class="w-3.5 h-3.5 transition-transform"></i>
      </button>
      <div id="systemPromptPanel" class="hidden mt-2">
        <div class="glass rounded-xl p-3">
          <textarea id="systemPromptInput" rows="4"
            class="w-full bg-slate-950/60 text-slate-200 text-xs font-mono p-3 rounded-lg border border-slate-800 focus-ring"
            placeholder="Enter system prompt...">You are Keefe-Discere, an advanced multimodal AI operating system. You can reason across text, images, and audio inputs. When you need to use an external tool, you MUST emit a tool call in this exact format:

<tool_call><name>tool_name</name><input>input_data</input></tool_call>

Available tools:
- ocr_vision: Extract text from an image URL (input: image URL)
- transcribe_audio: Transcribe audio (input: audio URL or description)
- image_caption: Generate a detailed caption for an image (input: image URL)
- web_search: Search the web for information (input: query)
- image_generation: Generate an image from a text prompt (input: prompt)

Be concise, precise, and always acknowledge multimodal inputs. When routing to a tool, wait for its result before responding.</textarea>
          <div class="flex items-center justify-between mt-2">
            <span class="text-[10px] text-slate-500 font-mono">Tokens auto-injected into every request</span>
            <span class="text-[10px] text-emerald-400 font-mono">● LIVE</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Message Stream -->
    <div id="messageStream" class="flex-1 overflow-y-auto thin-scroll px-4 sm:px-6 py-4 min-h-0">
      <div id="messageContainer" class="max-w-4xl mx-auto space-y-4">

        <!-- Welcome message -->
        <div id="welcomeScreen" class="flex flex-col items-center justify-center py-12 text-center">
          <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-cyan-500/20 border border-indigo-500/30 flex items-center justify-center mb-6 animate-glow">
            <i data-lucide="sparkles" class="w-10 h-10 text-indigo-400"></i>
          </div>
          <h2 class="text-2xl sm:text-3xl font-bold gradient-text mb-3">Welcome to Keefe-Discere OS</h2>
          <p class="text-slate-400 max-w-md text-sm sm:text-base leading-relaxed">
            Multimodal any-to-any intelligence router. Drop an image, attach audio, or just type — and watch XML tool calls flow through the edge in real-time.
          </p>
          <div class="flex flex-wrap gap-2 mt-6 justify-center">
            <div class="chip"><i data-lucide="image" class="w-3 h-3"></i>Vision</div>
            <div class="chip"><i data-lucide="mic" class="w-3 h-3"></i>Audio</div>
            <div class="chip"><i data-lucide="text" class="w-3 h-3"></i>Text</div>
            <div class="chip"><i data-lucide="route" class="w-3 h-3"></i>Tool Routing</div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-8 max-w-xl w-full">
            <button class="suggestion-btn glass rounded-xl p-3 text-left hover:bg-slate-800/80 transition-colors group" data-prompt="Analyze this screenshot and tell me what UI patterns are used">
              <div class="flex items-center gap-2 mb-1">
                <i data-lucide="layout" class="w-3.5 h-3.5 text-indigo-400"></i>
                <span class="text-xs font-semibold text-slate-200">UI Analysis</span>
              </div>
              <p class="text-[11px] text-slate-400 line-clamp-2">Analyze a screenshot and identify UI patterns...</p>
            </button>
            <button class="suggestion-btn glass rounded-xl p-3 text-left hover:bg-slate-800/80 transition-colors group" data-prompt="Generate a cyberpunk logo for a startup called 'Nexora'">
              <div class="flex items-center gap-2 mb-1">
                <i data-lucide="palette" class="w-3.5 h-3.5 text-cyan-400"></i>
                <span class="text-xs font-semibold text-slate-200">Logo Generation</span>
              </div>
              <p class="text-[11px] text-slate-400 line-clamp-2">Design a logo with tool routing...</p>
            </button>
            <button class="suggestion-btn glass rounded-xl p-3 text-left hover:bg-slate-800/80 transition-colors group" data-prompt="What are the latest breakthroughs in multimodal AI this month?">
              <div class="flex items-center gap-2 mb-1">
                <i data-lucide="globe" class="w-3.5 h-3.5 text-emerald-400"></i>
                <span class="text-xs font-semibold text-slate-200">Web Research</span>
              </div>
              <p class="text-[11px] text-slate-400 line-clamp-2">Search for recent AI breakthroughs...</p>
            </button>
            <button class="suggestion-btn glass rounded-xl p-3 text-left hover:bg-slate-800/80 transition-colors group" data-prompt="Help me debug this error: TypeError cannot read property of undefined">
              <div class="flex items-center gap-2 mb-1">
                <i data-lucide="bug" class="w-3.5 h-3.5 text-amber-400"></i>
                <span class="text-xs font-semibold text-slate-200">Code Debug</span>
              </div>
              <p class="text-[11px] text-slate-400 line-clamp-2">Diagnose and resolve coding errors...</p>
            </button>
          </div>
        </div>

      </div>
    </div>

    <!-- Input Zone -->
    <div class="px-4 sm:px-6 pb-4 pt-2 flex-shrink-0">
      <div id="dropZone" class="drop-zone max-w-4xl mx-auto glass-strong rounded-2xl p-3 transition-all relative overflow-hidden">
        <!-- Attached files preview -->
        <div id="attachedFiles" class="hidden mb-2 flex flex-wrap gap-2"></div>

        <!-- Drop label (shown when empty & dragging) -->
        <div id="dropLabel" class="hidden text-center py-2">
          <i data-lucide="upload-cloud" class="w-6 h-6 text-cyan-400 mx-auto mb-1"></i>
          <p class="text-sm text-cyan-300 font-medium">Drop files here</p>
          <p class="text-xs text-slate-500">PNG, JPG, MP3, WAV supported</p>
        </div>

        <div class="flex items-end gap-2">
          <!-- Attach button -->
          <button id="attachBtn" class="p-2.5 rounded-xl bg-slate-800/80 hover:bg-slate-700/80 transition-colors flex-shrink-0 group relative">
            <i data-lucide="paperclip" class="w-4 h-4 text-slate-400 group-hover:text-cyan-400"></i>
            <input type="file" id="fileInput" class="absolute inset-0 opacity-0 cursor-pointer" accept="image/png,image/jpeg,image/jpg,image/webp,image/gif,audio/mpeg,audio/wav,audio/mp3,audio/ogg" multiple>
          </button>

          <!-- Textarea -->
          <div class="flex-1 min-w-0">
            <textarea id="userInput" rows="1"
              class="w-full bg-slate-950/60 text-slate-100 text-sm p-3 rounded-xl border border-slate-800 focus-ring transition-all placeholder:text-slate-600"
              placeholder="Message Keefe-Discere... (Enter to send, Shift+Enter for newline)"
              maxlength="8000"></textarea>
          </div>

          <!-- Send button -->
          <button id="sendBtn" class="btn-primary p-2.5 rounded-xl flex-shrink-0 flex items-center justify-center" title="Send (Enter)">
            <i data-lucide="send-horizontal" class="w-4 h-4 text-white"></i>
          </button>
        </div>

        <div class="flex items-center justify-between mt-2 px-1">
          <div class="flex items-center gap-3 text-[10px] text-slate-500 font-mono">
            <span class="flex items-center gap-1"><i data-lucide="command" class="w-2.5 h-2.5"></i>ENTER to send</span>
            <span class="flex items-center gap-1"><i data-lucide="shift" class="w-2.5 h-2.5"></i>+↵ for newline</span>
          </div>
          <div id="charCount" class="text-[10px] text-slate-500 font-mono">0 / 8000</div>
        </div>
      </div>
    </div>

  </main>

</div>

<!-- ===== TOKEN MODAL ===== -->
<div id="tokenModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 modal-backdrop">
  <div class="glass-strong rounded-2xl p-6 w-full max-w-md shadow-2xl border border-slate-800/80">
    <div class="flex items-center justify-between mb-4">
      <div>
        <h3 class="text-base font-bold gradient-text">HF Access Token</h3>
        <p class="text-xs text-slate-400 mt-0.5">Stored locally in your browser only</p>
      </div>
      <button id="closeTokenModal" class="p-1.5 rounded-lg hover:bg-slate-800/80 transition-colors">
        <i data-lucide="x" class="w-4 h-4 text-slate-400"></i>
      </button>
    </div>

    <div class="space-y-3">
      <div class="relative">
        <input type="password" id="tokenInput"
          class="w-full bg-slate-950/80 text-slate-100 text-sm font-mono p-3 pr-10 rounded-lg border border-slate-800 focus-ring"
          placeholder="hf_xxxxxxxxxxxxxxxxxxxxx" autocomplete="off">
        <button id="toggleTokenVis" class="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded hover:bg-slate-800/80 transition-colors">
          <i data-lucide="eye" id="eyeIcon" class="w-4 h-4 text-slate-400"></i>
        </button>
      </div>

      <div class="flex items-center justify-between text-xs">
        <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener"
          class="text-indigo-400 hover:text-indigo-300 underline-offset-2 hover:underline flex items-center gap-1">
          <i data-lucide="external-link" class="w-3 h-3"></i> Get token at huggingface.co
        </a>
        <span id="tokenSavedStatus" class="text-emerald-400 hidden">✓ Saved</span>
      </div>

      <div class="flex gap-2 pt-2">
        <button id="saveTokenBtn" class="btn-primary flex-1 py-2.5 rounded-lg text-sm font-semibold text-white flex items-center justify-center gap-2">
          <i data-lucide="shield-check" class="w-4 h-4"></i> Save & Encrypt Locally
        </button>
        <button id="clearTokenBtn" class="px-4 py-2.5 rounded-lg bg-slate-800/80 hover:bg-slate-700/80 transition-colors text-sm text-slate-300">
          Clear
        </button>
      </div>

      <div class="bg-slate-950/50 rounded-lg p-3 border border-slate-800/80">
        <p class="text-[10px] text-slate-500 leading-relaxed font-mono">
          <i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
          Token never leaves your browser except for direct HTTPS calls to the Hugging Face Inference API (api-inference.huggingface.co). No analytics, no tracking.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- ===== TOAST CONTAINER ===== -->
<div id="toastContainer" class="fixed bottom-24 right-4 z-50 space-y-2 pointer-events-none"></div>

<script type="module">
import { InferenceClient } from "https://cdn.jsdelivr.net/npm/@huggingface/inference@4.13.22/+esm";

// ====================== STATE ======================
const state = {
  token: localStorage.getItem('keefe_hf_token') || '',
  model: 'KeefeBuild/Keefe-Discere',
  messages: [], // {role: 'user'|'assistant'|'system', content: string, files?: []}
  attachedFiles: [], // {file, dataUrl, type, name}
  isStreaming: false,
  toolCallDepth: 0,
  maxToolCallDepth: 3,
};

// ====================== DOM REFS ======================
const $ = (id) => document.getElementById(id);
const messageContainer = $('messageContainer');
const messageStream = $('messageStream');
const userInput = $('userInput');
const sendBtn = $('sendBtn');
const attachBtn = $('attachBtn');
const fileInput = $('fileInput');
const attachedFilesEl = $('attachedFiles');
const dropZone = $('dropZone');
const dropLabel = $('dropLabel');
const charCount = $('charCount');
const tokenModal = $('tokenModal');
const tokenInput = $('tokenInput');
const tokenBtn = $('tokenBtn');
const tokenStatus = $('tokenStatus');
const tokenSavedBadge = $('tokenSavedBadge');
const systemPromptToggle = $('systemPromptToggle');
const systemPromptPanel = $('systemPromptPanel');
const systemPromptInput = $('systemPromptInput');
const sysPromptIcon = $('sysPromptIcon');
const clearBtn = $('clearBtn');
const welcomeScreen = $('welcomeScreen');

// ====================== UTILITIES ======================
function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
}

function showToast(msg, type = 'info', duration = 3000) {
  const colors = {
    info: 'border-indigo-500/50 bg-indigo-500/10 text-indigo-200',
    success: 'border-emerald-500/50 bg-emerald-500/10 text-emerald-200',
    error: 'border-rose-500/50 bg-rose-500/10 text-rose-200',
    warning: 'border-amber-500/50 bg-amber-500/10 text-amber-200',
  };
  const icons = {
    info: 'info', success: 'check-circle-2', error: 'alert-circle', warning: 'alert-triangle'
  };
  const toast = document.createElement('div');
  toast.className = `glass-strong rounded-lg px-4 py-3 border ${colors[type]} shadow-xl pointer-events-auto max-w-sm msg-enter flex items-start gap-3`;
  toast.innerHTML = `
    <i data-lucide="${icons[type]}" class="w-4 h-4 mt-0.5 flex-shrink-0"></i>
    <span class="text-xs leading-relaxed">${escapeHtml(msg)}</span>
  `;
  $('toastContainer').appendChild(toast);
  lucide.createIcons({ nodes: [toast] });
  setTimeout(() => {
    toast.style.transition = 'opacity 0.3s, transform 0.3s';
    toast.style.opacity = '0';
    toast.style.transform = 'translateX(20px)';
    setTimeout(() => toast.remove(), 300);
  }, duration);
}

function scrollToBottom() {
  requestAnimationFrame(() => {
    messageStream.scrollTop = messageStream.scrollHeight;
  });
}

function autoResizeTextarea() {
  userInput.style.height = 'auto';
  userInput.style.height = Math.min(userInput.scrollHeight, 180) + 'px';
}

// ====================== MARKDOWN / XML RENDERER ======================
function renderContent(text) {
  if (!text) return '';
  let html = escapeHtml(text);

  // Code blocks ```lang\ncode```
  html = html.replace(/```(\w+)?\n?([\s\S]*?)```/g, (m, lang, code) => {
    return `<pre class="code-block my-2"><code class="language-${lang || 'text'}">${code.trim()}</code></pre>`;
  });

  // Inline code
  html = html.replace(/`([^`]+)`/g, '<code class="bg-slate-800/80 px-1.5 py-0.5 rounded text-xs text-cyan-300 font-mono">$1</code>');

  // Bold
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold text-slate-100">$1</strong>');

  // Italic
  html = html.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');

  // Headings
  html = html.replace(/^### (.+)$/gm, '<h3 class="font-bold text-base mt-3 mb-1 text-slate-100">$1</h3>');
  html = html.replace(/^## (.+)$/gm, '<h2 class="font-bold text-lg mt-3 mb-1 text-slate-100">$1</h2>');
  html = html.replace(/^# (.+)$/gm, '<h1 class="font-bold text-xl mt-3 mb-2 text-slate-100">$1</h1>');

  // Lists
  html = html.replace(/^- (.+)$/gm, '<li class="ml-4 list-disc text-slate-300">$1</li>');
  html = html.replace(/^(\d+)\. (.+)$/gm, '<li class="ml-4 list-decimal text-slate-300">$2</li>');
  html = html.replace(/(<li[^>]*>.*?<\/li>\n?)+/g, (m) => `<ul class="my-2 space-y-0.5">${m}</ul>`);

  // Links
  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" class="text-cyan-400 hover:text-cyan-300 underline underline-offset-2">$1</a>');

  // Bare URLs
  html = html.replace(/(?<!\()https?:\/\/[^\s<)]+/g, (url) => {
    if (url.includes('class="') || url.includes('href="')) return url;
    return `<a href="${url}" target="_blank" rel="noopener" class="text-cyan-400 hover:text-cyan-300 break-all">${url}</a>`;
  });

  // Tool calls: extract <tool_call>...</tool_call> blocks
  html = html.replace(/&lt;tool_call&gt;([\s\S]*?)&lt;\/tool_call&gt;/g, (m, inner) => {
    // Parse name & input
    const nameMatch = inner.match(/&lt;name&gt;([\s\S]*?)&lt;\/name&gt;/);
    const inputMatch = inner.match(/&lt;input&gt;([\s\S]*?)&lt;\/input&gt;/);
    const name = nameMatch ? nameMatch[1] : 'unknown';
    const input = inputMatch ? inputMatch[1] : '';
    const icon = getToolIcon(name);
    return `
      <div class="xml-block my-3">
        <div class="flex items-center gap-2 mb-2">
          <i data-lucide="${icon}" class="w-3.5 h-3.5 text-amber-400"></i>
          <span class="text-[10px] font-mono tracking-wider text-amber-300 uppercase">${escapeHtml(name)}</span>
        </div>
        <div class="flex flex-col gap-1 text-[11.5px]">
          <div><span class="xml-tag">&lt;name&gt;</span><span class="xml-name">${escapeHtml(name)}</span><span class="xml-tag">&lt;/name&gt;</span></div>
          <div class="break-all"><span class="xml-tag">&lt;input&gt;</span><span class="xml-input">${escapeHtml(input)}</span><span class="xml-tag">&lt;/input&gt;</span></div>
        </div>
      </div>
    `;
  });

  // Standalone XML-ish tags that weren't tool_calls
  html = html.replace(/&lt;(\/?[a-zA-Z_][\w\-]*)&gt;/g, '<span class="xml-tag">&lt;$1&gt;</span>');

  // Paragraphs / newlines
  html = html.split('\n\n').map(p => {
    if (p.includes('<pre') || p.includes('<div class="xml-block"') || p.includes('<h') || p.includes('<ul')) return p;
    return `<p class="mb-2 leading-relaxed text-slate-200">${p.replace(/\n/g, '<br>')}</p>`;
  }).join('');

  return html;
}

function getToolIcon(name) {
  const icons = {
    ocr_vision: 'scan-eye',
    transcribe_audio: 'audio-waveform',
    image_caption: 'image-text',
    web_search: 'globe',
    image_generation: 'image-plus',
    code_execute: 'terminal',
    math: 'sigma',
  };
  return icons[name] || 'wrench';
}

// ====================== MESSAGE RENDERING ======================
function addMessage(role, content, files = [], opts = {}) {
  if (welcomeScreen && !welcomeScreen.classList.contains('hidden')) {
    welcomeScreen.classList.add('hidden');
  }

  const msgId = 'msg_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7);
  const msg = { id: msgId, role, content, files, timestamp: new Date() };
  state.messages.push(msg);

  const wrapper = document.createElement('div');
  wrapper.id = msgId;
  wrapper.className = `msg-enter flex gap-3 ${role === 'user' ? 'justify-end' : ''}`;

  if (role === 'user') {
    wrapper.innerHTML = `
      <div class="max-w-[85%] sm:max-w-[75%]">
        ${files.length ? renderUserFiles(files) : ''}
        <div class="bg-gradient-to-br from-indigo-600/90 to-indigo-700/90 rounded-2xl rounded-tr-sm px-4 py-2.5 shadow-lg shadow-indigo-900/30">
          <div class="text-sm text-slate-50 leading-relaxed whitespace-pre-wrap break-words">${escapeHtml(content)}</div>
        </div>
        <div class="text-[10px] text-slate-500 font-mono mt-1 text-right">
          <i data-lucide="user" class="w-2.5 h-2.5 inline"></i> YOU • ${formatTime(msg.timestamp)}
        </div>
      </div>
    `;
  } else if (role === 'system-log') {
    wrapper.className = 'msg-enter flex justify-center';
    wrapper.innerHTML = `
      <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800/60 border border-slate-700/60">
        <i data-lucide="${opts.icon || 'info'}" class="w-3 h-3 text-slate-400"></i>
        <span class="text-[11px] font-mono text-slate-400">${escapeHtml(content)}</span>
      </div>
    `;
  } else if (role === 'tool-call') {
    wrapper.className = 'msg-enter flex justify-center';
    wrapper.innerHTML = `
      <div class="glass rounded-xl px-4 py-2.5 border-amber-500/40 shadow-lg max-w-md relative overflow-hidden">
        <div class="scan-line"></div>
        <div class="relative flex items-center gap-3">
          <div class="w-7 h-7 rounded-lg bg-amber-500/20 border border-amber-500/40 flex items-center justify-center">
            <i data-lucide="${opts.icon || 'route'}" class="w-3.5 h-3.5 text-amber-400"></i>
          </div>
          <div>
            <div class="text-[10px] font-mono tracking-wider text-amber-300 uppercase">Cloud Action Badge</div>
            <div class="text-xs text-slate-200">${escapeHtml(content)}</div>
          </div>
          <div class="loading-dots"><span></span><span></span><span></span></div>
        </div>
      </div>
    `;
  } else if (role === 'tool-result') {
    wrapper.innerHTML = `
      <div class="w-full max-w-3xl">
        <div class="tool-result">
          <div class="flex items-center gap-2 mb-2">
            <i data-lucide="${opts.icon || 'check'}" class="w-3.5 h-3.5 text-emerald-400"></i>
            <span class="text-[10px] font-mono tracking-wider text-emerald-300 uppercase">${escapeHtml(opts.toolName || 'RESULT')}</span>
            <span class="text-[10px] text-slate-500 font-mono ml-auto">${formatTime(msg.timestamp)}</span>
          </div>
          <div class="text-xs text-slate-300 whitespace-pre-wrap break-words leading-relaxed">${opts.html ? opts.html : escapeHtml(content)}</div>
        </div>
      </div>
    `;
  } else {
    // Assistant
    wrapper.innerHTML = `
      <div class="w-full max-w-3xl">
        <div class="flex items-center gap-2 mb-2">
          <div class="w-6 h-6 rounded-lg bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center">
            <i data-lucide="zap" class="w-3 h-3 text-white"></i>
          </div>
          <span class="text-xs font-semibold text-slate-300">Keefe-Discere</span>
          <span class="text-[10px] text-slate-500 font-mono">• ${formatTime(msg.timestamp)}</span>
        </div>
        <div class="glass rounded-2xl rounded-tl-sm px-4 py-3 text-sm leading-relaxed break-words assistant-content">
          ${opts.html || renderContent(content)}
        </div>
      </div>
    `;
  }

  messageContainer.appendChild(wrapper);
  lucide.createIcons({ nodes: [wrapper] });
  scrollToBottom();
  return msgId;
}

function renderUserFiles(files) {
  return `<div class="flex flex-wrap gap-2 mb-2 justify-end">
    ${files.map(f => {
      if (f.type.startsWith('image/')) {
        return `<img src="${f.dataUrl}" alt="${escapeHtml(f.name)}" class="h-24 w-24 object-cover rounded-lg border border-slate-700">`;
      } else if (f.type.startsWith('audio/')) {
        return `<div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800/80 border border-slate-700">
          <i data-lucide="audio-waveform" class="w-4 h-4 text-cyan-400"></i>
          <span class="text-xs text-slate-300">${escapeHtml(f.name)}</span>
        </div>`;
      }
      return '';
    }).join('')}
  </div>`;
}

function updateAssistantMessage(msgId, content) {
  const el = document.getElementById(msgId);
  if (!el) return;
  const contentEl = el.querySelector('.assistant-content');
  if (!contentEl) return;
  contentEl.innerHTML = renderContent(content);
  lucide.createIcons({ nodes: [contentEl] });
  scrollToBottom();
}

function removeMessage(msgId) {
  const el = document.getElementById(msgId);
  if (el) el.remove();
  state.messages = state.messages.filter(m => m.id !== msgId);
}

function formatTime(d) {
  const date = new Date(d);
  return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
}

// ====================== FILE HANDLING ======================
function readFileAsDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

async function handleFiles(fileList) {
  const files = Array.from(fileList);
  for (const file of files) {
    if (!file.type.startsWith('image/') && !file.type.startsWith('audio/')) {
      showToast(`Unsupported file type: ${file.type}`, 'error');
      continue;
    }
    if (file.size > 20 * 1024 * 1024) {
      showToast(`File too large (max 20MB): ${file.name}`, 'error');
      continue;
    }
    try {
      const dataUrl = await readFileAsDataURL(file);
      state.attachedFiles.push({ file, dataUrl, type: file.type, name: file.name });
    } catch (err) {
      console.error(err);
      showToast(`Failed to read: ${file.name}`, 'error');
    }
  }
  renderAttachedFiles();
}

function renderAttachedFiles() {
  if (state.attachedFiles.length === 0) {
    attachedFilesEl.classList.add('hidden');
    attachedFilesEl.innerHTML = '';
    return;
  }
  attachedFilesEl.classList.remove('hidden');
  attachedFilesEl.innerHTML = state.attachedFiles.map((f, idx) => {
    if (f.type.startsWith('image/')) {
      return `<div class="relative group">
        <img src="${f.dataUrl}" alt="${escapeHtml(f.name)}" class="h-16 w-16 object-cover rounded-lg border border-slate-700">
        <button class="remove-file absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-rose-500 hover:bg-rose-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity" data-idx="${idx}">
          <i data-lucide="x" class="w-3 h-3 text-white"></i>
        </button>
        <div class="text-[9px] text-slate-400 mt-0.5 truncate max-w-[64px] font-mono">${escapeHtml(f.name)}</div>
      </div>`;
    } else {
      return `<div class="relative group flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800/80 border border-slate-700">
        <i data-lucide="audio-waveform" class="w-4 h-4 text-cyan-400"></i>
        <span class="text-xs text-slate-300 max-w-[120px] truncate">${escapeHtml(f.name)}</span>
        <button class="remove-file p-1 rounded hover:bg-slate-700/80" data-idx="${idx}">
          <i data-lucide="x" class="w-3 h-3 text-slate-400"></i>
        </button>
      </div>`;
    }
  }).join('');

  attachedFilesEl.querySelectorAll('.remove-file').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const idx = parseInt(btn.dataset.idx);
      state.attachedFiles.splice(idx, 1);
      renderAttachedFiles();
    });
  });

  lucide.createIcons({ nodes: [attachedFilesEl] });
}

// ====================== XML TOOL PARSER ======================
function parseToolCalls(text) {
  const calls = [];
  const regex = /<tool_call>\s*<name>([\s\S]*?)<\/name>\s*<input>([\s\S]*?)<\/input>\s*<\/tool_call>/g;
  let match;
  while ((match = regex.exec(text)) !== null) {
    calls.push({
      full: match[0],
      name: match[1].trim(),
      input: match[2].trim(),
    });
  }
  return calls;
}

// ====================== TOOL EXECUTION ======================
async function executeTool(name, input) {
  if (!state.token) {
    throw new Error('HF token required to execute tool');
  }
  const client = new InferenceClient(state.token);

  const callMsgId = addMessage('tool-call', `👁️ Routing to HF Inference • ${name}`, [], {
    icon: getToolIcon(name)
  });

  try {
    let result = '';
    let resultHtml = '';

    if (name === 'ocr_vision' || name === 'image_caption') {
      // Image-to-text
      let imageUrl = input.trim();
      // If input is not a URL, try to use first attached image
      if (!imageUrl.match(/^https?:\/\//)) {
        const attachedImage = state.attachedFiles.find(f => f.type.startsWith('image/'));
        if (attachedImage) {
          imageUrl = attachedImage.dataUrl;
        } else {
          throw new Error('No image URL provided and no image attached');
        }
      }

      const caption = await client.imageToText({
        model: name === 'ocr_vision' ? 'Salesforce/blip-image-captioning-large' : 'Salesforce/blip-image-captioning-large',
        data: imageUrl,
      });
      result = Array.isArray(caption) ? caption.map(c => c.generated_text).join('\n') : (caption?.generated_text || String(caption));
      resultHtml = `
        <div class="flex items-start gap-3">
          <img src="${imageUrl.startsWith('data:') ? imageUrl : imageUrl}" alt="input" class="w-20 h-20 rounded-lg object-cover border border-slate-700 flex-shrink-0" onerror="this.style.display='none'">
          <div class="flex-1 min-w-0">
            <div class="text-[10px] font-mono text-emerald-300 mb-1 uppercase tracking-wider">Caption Output</div>
            <div class="text-slate-200">${escapeHtml(result)}</div>
          </div>
        </div>`;
    }
    else if (name === 'transcribe_audio') {
      let audioData = input.trim();
      const attachedAudio = state.attachedFiles.find(f => f.type.startsWith('audio/'));
      if (attachedAudio) {
        // Convert dataUrl to Blob
        const res = await fetch(attachedAudio.dataUrl);
        audioData = await res.blob();
      } else if (audioData.match(/^https?:\/\//)) {
        const res = await fetch(audioData);
        audioData = await res.blob();
      } else {
        throw new Error('No audio URL provided and no audio attached');
      }
      const transcript = await client.automaticSpeechRecognition({
        model: 'openai/whisper-large-v3',
        data: audioData,
      });
      result = transcript?.text || String(transcript);
      resultHtml = `
        <div>
          <div class="text-[10px] font-mono text-emerald-300 mb-1 uppercase tracking-wider">Transcript</div>
          <div class="text-slate-200 leading-relaxed">${escapeHtml(result)}</div>
        </div>`;
    }
    else if (name === 'web_search') {
      // Simulated web search result (no actual external search tool, but we can provide a helpful response)
      result = `Searched for: "${input}"\n\n[Simulated search results would appear here. In production, this would route to a search API or use a web-grounded model.]`;
      resultHtml = `
        <div>
          <div class="text-[10px] font-mono text-emerald-300 mb-1 uppercase tracking-wider">Query: ${escapeHtml(input)}</div>
          <div class="text-slate-200 leading-relaxed text-[11px] font-mono opacity-80">${escapeHtml(result)}</div>
        </div>`;
    }
    else if (name === 'image_generation') {
      const blob = await client.textToImage({
        model: 'black-forest-labs/FLUX.1-schnell',
        inputs: input,
        parameters: { num_inference_steps: 25 }
      });
      const imgUrl = URL.createObjectURL(blob);
      result = `Generated image for: "${input}"`;
      resultHtml = `
        <div>
          <div class="text-[10px] font-mono text-emerald-300 mb-2 uppercase tracking-wider">Generated Image</div>
          <img src="${imgUrl}" alt="${escapeHtml(input)}" class="max-w-full rounded-lg border border-slate-700 shadow-lg">
          <div class="text-[10px] text-slate-400 mt-1 font-mono">Prompt: ${escapeHtml(input)}</div>
        </div>`;
    }
    else {
      throw new Error(`Unknown tool: ${name}`);
    }

    // Remove the "routing" message and add result
    removeMessage(callMsgId);
    addMessage('tool-result', result, [], {
      html: resultHtml,
      toolName: name,
      icon: getToolIcon(name)
    });

    return result;
  } catch (err) {
    removeMessage(callMsgId);
    addMessage('system-log', `Tool error: ${err.message}`, [], { icon: 'alert-triangle' });
    throw err;
  }
}

// ====================== MAIN SEND / STREAM ======================
async function sendMessage() {
  const text = userInput.value.trim();
  if (!text && state.attachedFiles.length === 0) return;
  if (state.isStreaming) return;

  if (!state.token) {
    openTokenModal();
    showToast('Please set your HF access token first', 'warning');
    return;
  }

  state.isStreaming = true;
  sendBtn.disabled = true;
  sendBtn.innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';

  const files = [...state.attachedFiles];
  state.attachedFiles = [];
  renderAttachedFiles();
  userInput.value = '';
  autoResizeTextarea();
  updateCharCount();

  // Add user message
  addMessage('user', text || '(multimodal input)', files);

  try {
    await runAssistantLoop(text, files);
  } catch (err) {
    console.error(err);
    addMessage('system-log', `Error: ${err.message}`, [], { icon: 'alert-circle' });
    showToast(err.message, 'error');
  } finally {
    state.isStreaming = false;
    sendBtn.disabled = false;
    sendBtn.innerHTML = '<i data-lucide="send-horizontal" class="w-4 h-4 text-white"></i>';
    lucide.createIcons({ nodes: [sendBtn] });
  }
}

async function runAssistantLoop(userText, files) {
  // Build messages array for HF API
  const systemPrompt = systemPromptInput.value.trim();
  const apiMessages = [];
  if (systemPrompt) {
    apiMessages.push({ role: 'system', content: systemPrompt });
  }

  // Add recent chat history (last 10 turns)
  const history = state.messages.slice(-10).filter(m => m.role === 'user' || m.role === 'assistant');
  for (const m of history) {
    if (m.role === 'user') {
      if (m.files && m.files.length > 0) {
        const content = [];
        if (m.content && m.content !== '(multimodal input)') {
          content.push({ type: 'text', text: m.content });
        }
        for (const f of m.files) {
          if (f.type.startsWith('image/')) {
            content.push({ type: 'image_url', image_url: { url: f.dataUrl } });
          } else if (f.type.startsWith('audio/')) {
            content.push({ type: 'text', text: `[Audio attachment: ${f.name}]` });
          }
        }
        apiMessages.push({ role: 'user', content });
      } else {
        apiMessages.push({ role: 'user', content: m.content });
      }
    } else {
      apiMessages.push({ role: 'assistant', content: m.content });
    }
  }

  const assistantMsgId = addMessage('assistant', '', [], {
    html: '<div class="text-slate-400 flex items-center gap-2"><div class="loading-dots"><span></span><span></span><span></span></div><span class="text-xs font-mono">Reasoning...</span></div>'
  });

  const client = new InferenceClient(state.token);
  let fullResponse = '';

  try {
    // Try streaming first
    const stream = client.chatCompletionStream({
      model: state.model,
      messages: apiMessages,
      temperature: 0.7,
      max_tokens: 2048,
      stream: true,
    });

    let firstChunk = true;
    for await (const chunk of stream) {
      const delta = chunk.choices?.[0]?.delta?.content || '';
      if (delta) {
        if (firstChunk) {
          fullResponse = delta;
          firstChunk = false;
        } else {
          fullResponse += delta;
        }
        updateAssistantMessage(assistantMsgId, fullResponse);
      }
    }
  } catch (streamErr) {
    console.warn('Streaming failed, falling back to non-streaming:', streamErr.message);
    // Fallback to non-streaming
    try {
      const result = await client.chatCompletion({
        model: state.model,
        messages: apiMessages,
        temperature: 0.7,
        max_tokens: 2048,
      });
      fullResponse = result.choices?.[0]?.message?.content || '';
      updateAssistantMessage(assistantMsgId, fullResponse);
    } catch (fallbackErr) {
      removeMessage(assistantMsgId);
      throw fallbackErr;
    }
  }

  // Parse & execute any tool calls in the response
  const toolCalls = parseToolCalls(fullResponse);
  if (toolCalls.length > 0 && state.toolCallDepth < state.maxToolCallDepth) {
    state.toolCallDepth++;
    const toolResults = [];
    for (const call of toolCalls) {
      try {
        const result = await executeTool(call.name, call.input);
        toolResults.push({ name: call.name, input: call.input, result });
      } catch (err) {
        toolResults.push({ name: call.name, input: call.input, error: err.message });
      }
    }

    // Follow-up turn with tool results
    if (toolResults.length > 0) {
      const followUpMessages = [
        ...apiMessages,
        { role: 'assistant', content: fullResponse },
        {
          role: 'user',
          content: `[SYSTEM] Tool execution complete. Here are the results:\n\n${toolResults.map(r =>
            `--- ${r.name} ---\nInput: ${r.input}\nResult: ${r.error ? `ERROR: ${r.error}` : r.result}\n`
          ).join('\n')}\n\nPlease respond to the user incorporating these tool results. Do NOT emit any new <tool_call> tags unless absolutely necessary.`
        }
      ];

      const followUpMsgId = addMessage('assistant', '', [], {
        html: '<div class="text-slate-400 flex items-center gap-2"><div class="loading-dots"><span></span><span></span><span></span></div><span class="text-xs font-mono">Synthesizing tool results...</span></div>'
      });

      let followUpResponse = '';
      try {
        const followStream = client.chatCompletionStream({
          model: state.model,
          messages: followUpMessages,
          temperature: 0.5,
          max_tokens: 2048,
          stream: true,
        });

        let first = true;
        for await (const chunk of followStream) {
          const delta = chunk.choices?.[0]?.delta?.content || '';
          if (delta) {
            followUpResponse += delta;
            updateAssistantMessage(followUpMsgId, followUpResponse);
          }
        }
      } catch (followErr) {
        console.warn('Follow-up stream failed:', followErr.message);
        try {
          const result = await client.chatCompletion({
            model: state.model,
            messages: followUpMessages,
            temperature: 0.5,
            max_tokens: 2048,
          });
          followUpResponse = result.choices?.[0]?.message?.content || '';
          updateAssistantMessage(followUpMsgId, followUpResponse);
        } catch (e) {
          removeMessage(followUpMsgId);
          addMessage('system-log', `Follow-up failed: ${e.message}`, [], { icon: 'alert-circle' });
        }
      }
    }
    state.toolCallDepth = 0;
  }
}

// ====================== EVENT LISTENERS ======================
userInput.addEventListener('input', () => {
  autoResizeTextarea();
  updateCharCount();
});

userInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
});

sendBtn.addEventListener('click', sendMessage);

function updateCharCount() {
  const len = userInput.value.length;
  charCount.textContent = `${len} / 8000`;
  charCount.classList.toggle('text-amber-400', len > 6000);
  charCount.classList.toggle('text-rose-400', len > 7500);
}

fileInput.addEventListener('change', (e) => {
  handleFiles(e.target.files);
  e.target.value = '';
});

// Drag and drop
let dragCounter = 0;
['dragenter', 'dragover'].forEach(evt => {
  dropZone.addEventListener(evt, (e) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter++;
    dropZone.classList.add('drag-over');
    if (state.attachedFiles.length === 0) {
      dropLabel.classList.remove('hidden');
    }
  });
});
['dragleave', 'drop'].forEach(evt => {
  dropZone.addEventListener(evt, (e) => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter--;
    if (dragCounter <= 0) {
      dragCounter = 0;
      dropZone.classList.remove('drag-over');
      dropLabel.classList.add('hidden');
    }
  });
});
dropZone.addEventListener('drop', (e) => {
  if (e.dataTransfer?.files?.length) {
    handleFiles(e.dataTransfer.files);
  }
});

// Paste images
userInput.addEventListener('paste', (e) => {
  const items = e.clipboardData?.items;
  if (!items) return;
  const files = [];
  for (const item of items) {
    if (item.kind === 'file') {
      const file = item.getAsFile();
      if (file) files.push(file);
    }
  }
  if (files.length > 0) {
    e.preventDefault();
    handleFiles(files);
  }
});

// System prompt toggle
systemPromptToggle.addEventListener('click', () => {
  systemPromptPanel.classList.toggle('hidden');
  sysPromptIcon.classList.toggle('rotate-180');
});

// Clear chat
clearBtn.addEventListener('click', () => {
  if (state.messages.length === 0) return;
  if (confirm('Clear all messages?')) {
    state.messages = [];
    messageContainer.innerHTML = '';
    welcomeScreen.classList.remove('hidden');
    messageContainer.appendChild(welcomeScreen);
    showToast('Chat cleared', 'info');
  }
});

// Suggestion buttons
document.addEventListener('click', (e) => {
  const btn = e.target.closest('.suggestion-btn');
  if (btn) {
    userInput.value = btn.dataset.prompt || '';
    userInput.focus();
    autoResizeTextarea();
    updateCharCount();
  }
});

// ====================== TOKEN MODAL ======================
function openTokenModal() {
  tokenModal.classList.remove('hidden');
  tokenModal.classList.add('flex');
  tokenInput.value = state.token;
  tokenInput.focus();
  lucide.createIcons();
}
function closeTokenModal() {
  tokenModal.classList.add('hidden');
  tokenModal.classList.remove('flex');
}

tokenBtn.addEventListener('click', openTokenModal);
$('closeTokenModal').addEventListener('click', closeTokenModal);
tokenModal.addEventListener('click', (e) => {
  if (e.target === tokenModal) closeTokenModal();
});

$('toggleTokenVis').addEventListener('click', () => {
  const isPw = tokenInput.type === 'password';
  tokenInput.type = isPw ? 'text' : 'password';
  const icon = $('eyeIcon');
  icon.setAttribute('data-lucide', isPw ? 'eye-off' : 'eye');
  lucide.createIcons({ nodes: [icon.parentElement] });
});

$('saveTokenBtn').addEventListener('click', () => {
  const val = tokenInput.value.trim();
  if (!val) {
    showToast('Token cannot be empty', 'error');
    return;
  }
  state.token = val;
  localStorage.setItem('keefe_hf_token', val);
  updateTokenStatus();
  showToast('Token saved locally', 'success');
  closeTokenModal();
});

$('clearTokenBtn').addEventListener('click', () => {
  if (confirm('Remove stored token?')) {
    state.token = '';
    localStorage.removeItem('keefe_hf_token');
    tokenInput.value = '';
    updateTokenStatus();
    showToast('Token cleared', 'info');
  }
});

tokenInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    $('saveTokenBtn').click();
  }
});

function updateTokenStatus() {
  if (state.token) {
    tokenStatus.textContent = 'Token Active';
    tokenStatus.classList.remove('text-slate-300');
    tokenStatus.classList.add('text-emerald-400');
    tokenSavedBadge.classList.remove('hidden');
  } else {
    tokenStatus.textContent = 'Set Token';
    tokenStatus.classList.add('text-slate-300');
    tokenStatus.classList.remove('text-emerald-400');
    tokenSavedBadge.classList.add('hidden');
  }
}

// ====================== INIT ======================
updateTokenStatus();
updateCharCount();
lucide.createIcons();

// Welcome token prompt
if (!state.token) {
  setTimeout(() => {
    showToast('Set your Hugging Face token to begin', 'info', 5000);
  }, 800);
}

// Global keyboard shortcut
document.addEventListener('keydown', (e) => {
  // Cmd/Ctrl+K to focus input
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    userInput.focus();
  }
  // Escape to close modal
  if (e.key === 'Escape') {
    if (!tokenModal.classList.contains('hidden')) closeTokenModal();
  }
});

// Expose for debugging
window.keefe = { state, sendMessage };

</script>
</body>
</html>