Spaces:

KeefeBuild
/

Keefe-Discere-Multimodal-OS

Running

App Files Files Community

KeefeBuild commited on 7 days ago

Commit

0ee7bc1

verified ·

1 Parent(s): 0959483

Update index.html

Browse files

Files changed (1) hide show

index.html +1406 -25

index.html CHANGED Viewed

@@ -1,25 +1,1406 @@
-Keefe-Discere Any-to-Any OS
-      ⚡ Keefe-Discere Multimodal Any-to-Any OS
-      Static Cloud Router • 100% Free Hosting
-      Hugging Face Read Token (Required for Private Models/API):
-      Ready. Enter a prompt or multimodal instruction below...
-      Send

+<!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>