Update index.html

index.html

@@ -104,57 +104,47 @@ tailwind.config = {
     --pre-bg:    #e4ddd0;
   }
 
-  body                { background: var(--bg); color: var(--pearl); }
-  #sidebar            { background: var(--surface); border-color: var(--border); }
-  header              { background: var(--surface); border-color: var(--border); }
-  .bg-smoke           { background: var(--surface) !important; }
-  .bg-ash             { background: var(--mist) !important; }
-  .bg-mist            { background: var(--mist) !important; }
-  .hover\:bg-ash:hover  { background: var(--border) !important; }
-  .hover\:bg-mist:hover { background: var(--mist) !important; }
-  .border-ash         { border-color: var(--border) !important; }
-  .border-mist        { border-color: var(--mist) !important; }
-  .text-fog           { color: var(--fog) !important; }
-  .text-ghost         { color: var(--ghost) !important; }
-  .text-pearl         { color: var(--pearl) !important; }
-  .text-cream         { color: var(--cream) !important; }
-  .text-amber         { color: var(--accent) !important; }
-  .text-ink           { color: var(--user-text) !important; }
-  .text-rose          { color: var(--danger) !important; }
-  .text-sage          { color: var(--safe) !important; }
-  .bg-amber           { background: var(--user-bg) !important; }
-  .hover\:bg-ember:hover { background: var(--accent2) !important; }
-  .bg-amber\/10       { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
-  .bg-amber\/20       { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
-  .border-amber\/25   { border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important; }
-  .from-amber         { --tw-gradient-from: var(--accent) !important; }
-  .to-ember           { --tw-gradient-to: var(--accent2) !important; }
-  .bg-rose            { background: var(--danger) !important; }
-  .hover\:text-rose:hover { color: var(--danger) !important; }
-  .hover\:text-sage:hover { color: var(--safe) !important; }
-  .hover\:text-pearl:hover { color: var(--pearl) !important; }
-  textarea, input, select { background: var(--mist); color: var(--cream); }
-
-  .prose-msg { line-height: 1.65; color: var(--prose); }
+  body:not(.light) {
+    background-image:
+      radial-gradient(1px 1px at 20% 30%, rgba(160,200,255,0.4) 0%, transparent 100%),
+      radial-gradient(1px 1px at 75% 15%, rgba(160,200,255,0.3) 0%, transparent 100%),
+      radial-gradient(1px 1px at 55% 70%, rgba(160,200,255,0.25) 0%, transparent 100%),
+      radial-gradient(1px 1px at 90% 55%, rgba(160,200,255,0.2) 0%, transparent 100%),
+      radial-gradient(1px 1px at 10% 85%, rgba(160,200,255,0.2) 0%, transparent 100%);
+  }
+
+  body:not(.light) #sidebar::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    opacity: 0.5;
+  }
+  /*#sidebar { position: relative; }*/
+
+  .font-display { font-family: 'Syne', sans-serif !important; }
+
+  .prose-msg { line-height: 1.7; color: var(--prose); }
   .prose-msg p { margin: 0 0 0.6em; } .prose-msg p:last-child { margin-bottom: 0; }
-  .prose-msg code { font-family: 'DM Mono', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.875em; color: var(--code-col); }
-  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
-  .prose-msg pre code { background: transparent; padding: 0; color: var(--prose); font-size: 0.82em; }
-  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Fraunces', serif; color: var(--cream); margin: 0.8em 0 0.3em; font-weight: 700; }
+  .prose-msg code { font-family: 'Intel One Mono', 'Fira Code', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.875em; color: var(--code-col); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
+  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
+  .prose-msg pre code { background: transparent; border: none; padding: 0; color: var(--prose); font-size: 0.82em; }
+  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Syne', sans-serif; color: var(--cream); margin: 0.8em 0 0.3em; font-weight: 700; }
   .prose-msg h1 { font-size: 1.25em; } .prose-msg h2 { font-size: 1.1em; } .prose-msg h3 { font-size: 1em; }
   .prose-msg ul, .prose-msg ol { padding-left: 1.25em; margin: 0.4em 0 0.6em; }
+  .prose-msg li::marker { color: var(--accent); }
   .prose-msg li { margin: 0.2em 0; }
   .prose-msg blockquote { border-left: 2px solid var(--accent); padding-left: 0.75em; color: var(--ghost); margin: 0.5em 0; font-style: italic; }
   .prose-msg a { color: var(--accent); text-decoration: underline; }
   .prose-msg strong { color: var(--cream); font-weight: 500; }
   .prose-msg table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 0.85em; }
-  .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; }
+  .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--accent); }
   .prose-msg td { border-top: 1px solid var(--border); padding: 5px 8px; }
 
   .prose-user { line-height: 1.65; color: var(--user-text); }
   .prose-user p { margin: 0 0 0.5em; } .prose-user p:last-child { margin-bottom: 0; }
-  .prose-user code { background: rgba(0,0,0,0.12); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
-  .prose-user pre { background: rgba(0,0,0,0.15); border-radius: 5px; padding: 10px 12px; overflow-x: auto; margin: 0.5em 0; }
+  .prose-user code { background: rgba(255,255,255,0.1); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
   .prose-user strong { font-weight: 500; }
 
   textarea { resize: none; overflow: hidden; }
@@ -164,9 +154,109 @@ tailwind.config = {
   .dot-2 { animation: blink 1.2s 0.2s infinite; }
   .dot-3 { animation: blink 1.2s 0.4s infinite; }
   select { -webkit-appearance: none; appearance: none; }
-  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
-  #input-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
-  @media (max-width: 768px) { main { padding-bottom: 5vh; } }
+  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
+  
+  /* Tool panel styles */
+  #tool-panel, #file-explorer-panel { transition: all 0.3s ease; }
+  .tool-item { transition: all 0.2s ease; }
+  .tool-item:hover { transform: translateX(4px); }
+  .tool-item.active { background: var(--accent); color: var(--ink); }
+
+  /* File Explorer Styles */
+  .file-tree-item { transition: all 0.15s ease; }
+  .file-tree-item:hover { background: var(--mist); }
+  .file-tree-item.active { background: var(--accent) !important; color: var(--ink); }
+  .file-tree-children { border-left: 1px solid var(--border); margin-left: 11px; padding-left: 8px; }
+  .file-explorer-editor { animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+
+/* CRITICAL MOBILE FIX - Main container */
+@media (max-width: 768px) {
+  /* Override flex behavior on mobile */
+  main {
+    flex: none !important;
+    width: 100% !important;
+    max-width: 100vw !important;
+    margin-left: 0 !important;
+    position: relative !important;
+  }
+
+  
+  /* Overlay */
+  #overlay {
+    position: fixed !important;
+    inset: 0 !important;
+    background: rgba(0,0,0,0.6) !important;
+    display: none !important;
+  }
+  
+  #overlay:not(.hidden) {
+    display: block !important;
+  }
+  
+  /* Fix message container */
+  #messages {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+  
+  /* Fix input footer */
+  #input-footer {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+    padding-bottom: 5vh;
+
+  }
+  
+  /* Remove any negative margins */
+  .flex-1 {
+    min-width: 0 !important;
+  }
+
+  /* File explorer panel on mobile */
+  #file-explorer-panel {
+    width: 100% !important;
+    max-width: 100vw !important;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 480px) {
+  main {
+    width: 100vw !important;
+  }
+  
+  #messages, #input-footer {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+  #input-footer {
+    padding-bottom: 5vh;
+
+  }
+}
+
+/* iOS Safari safe area */
+@supports (-webkit-touch-callout: none) {
+  body {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  #input-footer {
+    padding-bottom: 5vh;
+  }
+}
+
+/* Smooth scrolling on mobile */
+#messages {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+#tool-result-banner, #error-banner {
+  margin-left: 12px;
+  margin-right: 12px;
+  font-size: 11px;
+}
+
 </style>
 </head>
 <body class="h-screen flex overflow-hidden">
@@ -250,9 +340,9 @@ tailwind.config = {
       <div class="relative">
         <select id="model-select" class="w-full bg-ash border border-mist rounded-md px-3 py-2 pr-7 text-xs font-mono text-cream focus:border-amber transition-colors cursor-pointer" onchange="saveSettings()">
 <optgroup label='Openrouter'>
+	<option value='openrouter/free'>Free Models Router </option>
 	<option value='openrouter/hunter-alpha'>Hunter Alpha </option>
 	<option value='openrouter/healer-alpha'>Healer Alpha </option>
-	<option value='openrouter/free'>Free Models Router </option>
 </optgroup>
 <optgroup label='Nvidia'>
 	<option value='nvidia/nemotron-3-super-120b-a12b:free'>NVIDIA: Nemotron 3 Super (free) </option>
@@ -569,26 +659,25 @@ let chats = {}; // { id: { id, title, messages: [], createdAt } }
 
 // ── Init ───────────────────────────────────────────────────────────────────
 function init() {
-  if (localStorage.getItem('nexus_privacy_seen')) dismissPrivacyNotice();
+  if (localStorage.getItem('flexchat_privacy_seen')) dismissPrivacyNotice();
 
-  if (localStorage.getItem('nexus_theme') === 'light') toggleTheme(); // ← add this
+  if (localStorage.getItem('flexchat_theme') === 'light') toggleTheme(); // ← add this
 
   loadSettings();
   loadChats();
   updateModelBadge();
-  newChat();
 }
 
 function dismissPrivacyNotice() {
   document.getElementById('privacy-modal').remove();
-  localStorage.setItem('nexus_privacy_seen', '1');
+  localStorage.setItem('flexchat_privacy_seen', '1');
 }
   
 function toggleTheme() {
   const isLight = document.body.classList.toggle('light');
   document.getElementById('theme-icon-dark').classList.toggle('hidden', isLight);
   document.getElementById('theme-icon-light').classList.toggle('hidden', !isLight);
-  localStorage.setItem('nexus_theme', isLight ? 'light' : 'dark');
+  localStorage.setItem('flexchat_theme', isLight ? 'light' : 'dark');
   document.getElementById('hljs-theme').href = isLight
     ? 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css'
     : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css';
@@ -602,13 +691,13 @@ function saveSettings() {
     temperature: document.getElementById('temperature').value,
     maxTokens: document.getElementById('max-tokens').value,
   };
-  localStorage.setItem('nexus_settings', JSON.stringify(settings));
+  localStorage.setItem('flexchat_settings', JSON.stringify(settings));
   updateModelBadge();
 }
 
 function loadSettings() {
   try {
-    const s = JSON.parse(localStorage.getItem('nexus_settings') || '{}');
+    const s = JSON.parse(localStorage.getItem('flexchat_settings') || '{}');
     if (s.apiKey) document.getElementById('api-key').value = s.apiKey;
     if (s.model) document.getElementById('model-select').value = s.model;
     if (s.systemPrompt) document.getElementById('system-prompt').value = s.systemPrompt;
@@ -635,12 +724,12 @@ function toggleKeyVisibility() {
 function genId() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 6); }
 
 function saveChats() {
-  localStorage.setItem('nexus_chats', JSON.stringify(chats));
+  localStorage.setItem('flexchat_chats', JSON.stringify(chats));
 }
 
 function loadChats() {
   try {
-    chats = JSON.parse(localStorage.getItem('nexus_chats') || '{}');
+    chats = JSON.parse(localStorage.getItem('flexchat_chats') || '{}');
   } catch(e) { chats = {}; }
   renderConvList();
 }
@@ -663,7 +752,9 @@ function switchChat(id) {
   renderMessages();
   renderConvList();
   const chat = chats[id];
-  document.getElementById('chat-title').textContent = chat.title;
+ if (chat) {
+    document.getElementById('chat-title').textContent = chat.title;
+  }
   closeSidebar();
 }
 
@@ -676,9 +767,11 @@ function deleteChat(id, e) {
 }
 
 function clearCurrentChat() {
-  if (!currentChatId) return;
-  chats[currentChatId].messages = [];
-  chats[currentChatId].title = 'New conversation';
+    if (!currentChatId) return;
+  const chat = chats[currentChatId];
+  if (!chat) return;
+  chat.messages = [];
+  chat.title = 'New conversation';
   document.getElementById('chat-title').textContent = 'New conversation';
   saveChats();
   renderConvList();
@@ -687,6 +780,8 @@ function clearCurrentChat() {
 
 function renderConvList() {
   const list = document.getElementById('conv-list');
+  if (!list) return;
+
   const sorted = Object.values(chats).sort((a,b) => b.createdAt - a.createdAt);
   if (sorted.length === 0) {
     list.innerHTML = '<div class="text-fog/60 text-xs font-mono px-3 py-2">No conversations yet</div>';
@@ -709,9 +804,10 @@ const msgContentMap = {};
 
 function renderMessages() {
   const container = document.getElementById('messages');
-  const msgs = chats[currentChatId]?.messages || [];
+  const chat = chats[currentChatId];
+  const msgs = chat ? chat.messages : [];
 
-  if (msgs.length === 0) {
+  if (!chat || msgs.length === 0) {
     container.innerHTML = `<div id="empty-state" class="h-full flex flex-col items-center justify-center text-center py-16">
       <div class="font-display text-5xl italic text-cream/20 mb-4 select-none">FlexChat</div>
       <div class="text-fog text-sm font-mono max-w-xs">Enter your OpenRouter API key in the sidebar, choose a model, and start a conversation.</div>
@@ -754,7 +850,7 @@ function renderMessage(msg, idx) {
   } else {
     return `<div class="flex gap-3 items-start">
       <div class="w-7 h-7 rounded-md bg-gradient-to-br from-amber to-ember flex items-center justify-center flex-shrink-0 mt-0.5 shadow-md">
-        <span class="text-ink text-xs font-display font-bold italic">N</span>
+        <span class="text-ink text-xs font-display font-bold italic">Bot</span>
       </div>
       <div class="flex-1 min-w-0 group">
         <div class="text-xs font-mono text-ghost mb-1.5">${escHtml(msg.model || 'assistant')}</div>
@@ -802,7 +898,10 @@ async function sendMessage() {
   const input = document.getElementById('user-input');
   const text = input.value.trim();
   if (!text || isStreaming) return;
-
+  
+  if (!currentChatId || !chats[currentChatId]) {
+    newChat();
+  }
   const apiKey = document.getElementById('api-key').value.trim();
   if (!apiKey) { showError('Please enter your OpenRouter API key in the sidebar.'); return; }
 
@@ -847,7 +946,7 @@ async function sendMessage() {
   placeholder.className = 'flex gap-3 items-start';
   placeholder.innerHTML = `
     <div class="w-7 h-7 rounded-md bg-gradient-to-br from-amber to-ember flex items-center justify-center flex-shrink-0 mt-0.5 shadow-md">
-      <span class="text-ink text-xs font-display font-bold italic">N</span>
+      <span class="text-ink text-xs font-display font-bold italic">Bot</span>
     </div>
     <div class="flex-1 min-w-0">
       <div class="text-xs font-mono text-ghost mb-1.5">${escHtml(model.split('/').pop())}</div>
@@ -1033,13 +1132,18 @@ function openSidebar() {
 function closeSidebar() {
   const s = document.getElementById('sidebar');
   const o = document.getElementById('overlay');
+  
+  s.removeAttribute('data-open');
   s.classList.add('-translate-x-full');
-  o.classList.add('opacity-0');
-  setTimeout(() => o.classList.add('hidden'), 300);
+  
+  o.classList.add('hidden');
+  setTimeout(() => {
+    o.style.display = 'none';
+  }, 300);
 }
 
 // ── Boot ───────────────────────────────────────────────────────────────────
 init();
 </script>
 </body>
-</html>
+</html>