Update index.html

index.html

@@ -104,38 +104,6 @@ tailwind.config = {
     --pre-bg:    #d8eaf8;
   }
 
-  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); }
-
-  /* Subtle starfield in dark mode */
   body:not(.light) {
     background-image:
       radial-gradient(1px 1px at 20% 30%, rgba(160,200,255,0.4) 0%, transparent 100%),
@@ -145,7 +113,6 @@ tailwind.config = {
       radial-gradient(1px 1px at 10% 85%, rgba(160,200,255,0.2) 0%, transparent 100%);
   }
 
-  /* Glowing accent on sidebar top */
   body:not(.light) #sidebar::before {
     content: '';
     position: absolute;
@@ -154,7 +121,7 @@ tailwind.config = {
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
     opacity: 0.5;
   }
-  #sidebar { position: relative; }
+  /*#sidebar { position: relative; }*/
 
   .font-display { font-family: 'Syne', sans-serif !important; }
 
@@ -188,7 +155,108 @@ tailwind.config = {
   .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), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
-  @media (max-width: 768px) { main { padding-bottom: 5vh; } }
+  
+  /* 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">
@@ -272,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>
@@ -591,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';
@@ -624,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;
@@ -657,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();
 }
@@ -685,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();
 }
 
@@ -698,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();
@@ -709,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>';
@@ -731,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>
@@ -776,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>
@@ -824,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; }
 
@@ -869,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>
@@ -1055,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>