antri_cli 1.44.0 → 1.46.0

package/dist/desktop/public/app.js

@@ -8,8 +8,15 @@ let activePaletteMatches = [];
 let paletteSelectedIndex = 0;
 let activePaletteMode = null; // 'slash' | 'file' | null
 
+// Skills State
+let allSkillsList = [];
+let selectedSkillId = null;
+let currentSkillCategory = 'all';
+let skillSearchQuery = '';
+
 // Initialize on Load
 document.addEventListener('DOMContentLoaded', async () => {
+  await checkAuthStatus();
   await loadStatus();
   await loadCommands();
   await loadProfiles();
@@ -17,6 +24,23 @@ document.addEventListener('DOMContentLoaded', async () => {
   await loadMemory();
 });
 
+// Toast Notification
+function showToast(message, isError = false) {
+  let toast = document.getElementById('antri-toast');
+  if (!toast) {
+    toast = document.createElement('div');
+    toast.id = 'antri-toast';
+    toast.className = 'antri-toast';
+    document.body.appendChild(toast);
+  }
+  toast.textContent = message;
+  toast.style.background = isError ? '#991b1b' : '#1c1917';
+  toast.classList.add('show');
+  setTimeout(() => {
+    toast.classList.remove('show');
+  }, 2500);
+}
+
 // Load System Status & Config
 async function loadStatus() {
   try {
@@ -369,7 +393,7 @@ function handleInputKey(event) {
   }
 }
 
-// Chat Prompt Submission with SSE Streaming
+// Chat Prompt Submission with Real-Time Word-by-Word Side-by-Side Streaming
 async function submitPrompt() {
   const input = document.getElementById('prompt-input');
   let prompt = input.value.trim();
@@ -408,7 +432,7 @@ async function submitPrompt() {
 
   const sendBtn = document.getElementById('send-btn');
   sendBtn.disabled = true;
-  sendBtn.textContent = 'Thinking...';
+  sendBtn.textContent = 'Streaming...';
 
   try {
     const response = await fetch('/api/chat', {
@@ -425,7 +449,7 @@ async function submitPrompt() {
       const { done, value } = await reader.read();
       if (done) break;
 
-      const chunk = decoder.decode(value);
+      const chunk = decoder.decode(value, { stream: true });
       const lines = chunk.split('\n');
 
       for (const line of lines) {
@@ -440,8 +464,9 @@ async function submitPrompt() {
               // Tool call badge
               const toolBadge = document.createElement('div');
               toolBadge.className = 'tool-badge-pill';
-              toolBadge.textContent = `Tool: ${data.name}`;
+              toolBadge.textContent = `• Tool: ${data.name}`;
               assistantMsgEl.insertBefore(toolBadge, contentEl);
+              scrollToBottom();
             }
           } catch (e) {}
         }
@@ -569,7 +594,9 @@ async function startGoalLoop() {
   }
 }
 
-// Profile Management
+// ==========================================
+// Thinking Profile Management
+// ==========================================
 async function loadProfiles() {
   try {
     const res = await fetch('/api/profiles');
@@ -625,6 +652,31 @@ async function createProfile() {
 
   input.value = '';
   await loadProfiles();
+  showToast(`Profile '${name}' created.`);
+}
+
+async function handleProfileImport(event) {
+  const files = event.target.files;
+  if (!files || files.length === 0) return;
+
+  for (const file of files) {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const content = e.target.result;
+      const res = await fetch('/api/profile/import', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: file.name, content }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        await loadProfiles();
+        showToast(`Profile '${file.name}' imported successfully.`);
+      }
+    };
+    reader.readAsText(file);
+  }
+  event.target.value = '';
 }
 
 async function saveActiveProfile() {
@@ -634,50 +686,286 @@ async function saveActiveProfile() {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ content }),
   });
-  alert('Profile saved.');
+  showToast('Profile saved successfully.');
+}
+
+async function pushProfilesToCloud() {
+  try {
+    showToast('Pushing profiles to Google Cloud Firestore...');
+    const res = await fetch('/api/profile/push', { method: 'POST' });
+    const data = await res.json();
+    if (data.success) {
+      showToast(`Pushed ${data.count} profile(s) to Google Cloud Firestore.`);
+    } else {
+      showToast(`Push failed: ${data.error || 'Check network connection'}`, true);
+    }
+  } catch (err) {
+    showToast(`Push failed: ${err.message}`, true);
+  }
+}
+
+async function pullProfilesFromCloud() {
+  try {
+    showToast('Pulling profiles from Google Cloud Firestore...');
+    const res = await fetch('/api/profile/pull', { method: 'POST' });
+    const data = await res.json();
+    if (data.success) {
+      await loadProfiles();
+      showToast(`Pulled ${data.count} profile(s) from Google Cloud Firestore.`);
+    } else {
+      showToast(`Pull failed: ${data.error || 'Check network connection'}`, true);
+    }
+  } catch (err) {
+    showToast(`Pull failed: ${err.message}`, true);
+  }
+}
+
+function exportActiveProfile() {
+  const activeTitle = document.getElementById('active-profile-title').textContent || 'profile.md';
+  const content = document.getElementById('profile-editor').value;
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', activeTitle);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+async function deleteActiveProfile() {
+  const activeTitle = (document.getElementById('active-profile-title').textContent || '').replace('.md', '');
+  if (activeTitle === 'profile_1') {
+    alert('Cannot delete default profile_1.');
+    return;
+  }
+  if (!confirm(`Are you sure you want to delete profile '${activeTitle}.md'?`)) return;
+
+  const res = await fetch('/api/profile/delete', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: activeTitle }),
+  });
+  const data = await res.json();
+  if (data.success) {
+    await loadProfiles();
+    showToast(`Profile '${activeTitle}' deleted.`);
+  }
 }
 
 async function onProfileChange(name) {
   await selectProfile(name);
 }
 
-// Skills & Memory Loaders
+// ==========================================
+// Markdown Skills Studio Management
+// ==========================================
 async function loadSkills() {
   try {
     const res = await fetch('/api/skills');
     const data = await res.json();
-    const grid = document.getElementById('skills-catalog-grid');
-    grid.innerHTML = '';
-
-    data.allTools.forEach((t) => {
-      const card = document.createElement('div');
-      card.className = 'skill-card';
-      card.innerHTML = `
-        <h4>${t.name}</h4>
-        <p>${t.description}</p>
-        <button class="skill-btn" onclick="testSkill('${t.name}')">Dry-Run Skill</button>
-      `;
-      grid.appendChild(card);
-    });
+    allSkillsList = data.markdownSkills || [];
+    renderSkillList();
+
+    if (!selectedSkillId && allSkillsList.length > 0) {
+      selectSkill(allSkillsList[0].id);
+    }
   } catch (err) {
     console.error('Failed to load skills:', err);
   }
 }
 
-async function testSkill(skillName) {
-  try {
-    const res = await fetch('/api/skill/test', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ skillName, args: {} }),
-    });
-    const data = await res.json();
-    alert(`Skill '${skillName}' Output:\n${data.output || 'Execution complete'}`);
-  } catch (err) {
-    alert(`Execution failed: ${err.message}`);
+function setSkillCategory(category) {
+  currentSkillCategory = category;
+  document.querySelectorAll('.category-pill').forEach((btn) => {
+    btn.classList.toggle('active', btn.textContent.toLowerCase() === category.toLowerCase());
+  });
+  renderSkillList();
+}
+
+function filterSkills(query) {
+  skillSearchQuery = (query || '').toLowerCase().trim();
+  renderSkillList();
+}
+
+function renderSkillList() {
+  const listContainer = document.getElementById('skills-catalog-list');
+  if (!listContainer) return;
+  listContainer.innerHTML = '';
+
+  let filtered = allSkillsList;
+  if (currentSkillCategory !== 'all') {
+    if (currentSkillCategory === 'Core') {
+      filtered = filtered.filter((s) => s.isCore);
+    } else if (currentSkillCategory === 'Custom') {
+      filtered = filtered.filter((s) => !s.isCore);
+    } else {
+      filtered = filtered.filter((s) => s.category && s.category.toLowerCase() === currentSkillCategory.toLowerCase());
+    }
+  }
+
+  if (skillSearchQuery) {
+    filtered = filtered.filter(
+      (s) =>
+        s.name.toLowerCase().includes(skillSearchQuery) ||
+        s.description.toLowerCase().includes(skillSearchQuery) ||
+        (s.triggers && s.triggers.some((t) => t.includes(skillSearchQuery)))
+    );
+  }
+
+  if (filtered.length === 0) {
+    listContainer.innerHTML = '<div class="empty-state">No skills match the search criteria.</div>';
+    return;
+  }
+
+  filtered.forEach((skill) => {
+    const card = document.createElement('div');
+    card.className = `skill-item-card ${skill.id === selectedSkillId ? 'active' : ''}`;
+    card.innerHTML = `
+      <div class="skill-item-header">
+        <span class="skill-item-name">${skill.name}</span>
+        <span class="skill-type-tag ${skill.isCore ? 'core' : 'custom'}">${skill.isCore ? 'Core' : 'Custom'}</span>
+      </div>
+      <div class="skill-item-desc">${skill.description}</div>
+      <div class="skill-item-footer">
+        <span class="skill-category-badge">${skill.category}</span>
+        <span class="skill-version-tag">v${skill.version}</span>
+      </div>
+    `;
+    card.onclick = () => selectSkill(skill.id);
+    listContainer.appendChild(card);
+  });
+}
+
+function selectSkill(skillId) {
+  selectedSkillId = skillId;
+  const skill = allSkillsList.find((s) => s.id === skillId);
+  if (!skill) return;
+
+  document.getElementById('active-skill-title').textContent = `${skill.name} (${skill.id}.md)`;
+  document.getElementById('active-skill-meta').textContent = `Category: ${skill.category} · Author: ${skill.author} · Version: ${skill.version} · Triggers: ${skill.triggers.join(', ') || 'Auto'}`;
+  document.getElementById('skill-editor').value = skill.content || skill.instructions;
+
+  // Toggle Delete button (allow delete only on custom skills)
+  const deleteBtn = document.getElementById('btn-delete-skill');
+  if (deleteBtn) {
+    deleteBtn.style.display = skill.isCore ? 'none' : 'inline-flex';
+  }
+
+  renderSkillList();
+}
+
+async function saveCurrentSkill() {
+  if (!selectedSkillId) return;
+  const content = document.getElementById('skill-editor').value;
+
+  const res = await fetch('/api/skill/save', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id: selectedSkillId, content }),
+  });
+  const data = await res.json();
+  if (data.success) {
+    await loadSkills();
+    selectSkill(selectedSkillId);
+    showToast('Skill markdown saved successfully.');
+  }
+}
+
+async function createNewSkillPrompt() {
+  const name = prompt('Enter name for the new skill (e.g., "fastapi_specialist"):');
+  if (!name) return;
+  const description = prompt('Enter a short description for what this skill does:', 'Specialist guidelines and heuristics.');
+
+  const res = await fetch('/api/skill/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, description, category: 'Custom' }),
+  });
+  const data = await res.json();
+  if (data.success && data.skill) {
+    await loadSkills();
+    selectSkill(data.skill.id);
+    showToast(`Skill '${data.skill.name}' created!`);
   }
 }
 
+async function handleSkillImport(event) {
+  const files = event.target.files;
+  if (!files || files.length === 0) return;
+
+  for (const file of files) {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const content = e.target.result;
+      const res = await fetch('/api/skill/import', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: file.name, content }),
+      });
+      const data = await res.json();
+      if (data.success && data.skill) {
+        await loadSkills();
+        selectSkill(data.skill.id);
+        showToast(`Skill '${data.skill.name}' imported successfully.`);
+      }
+    };
+    reader.readAsText(file);
+  }
+  event.target.value = '';
+}
+
+function exportCurrentSkill() {
+  if (!selectedSkillId) return;
+  const skill = allSkillsList.find((s) => s.id === selectedSkillId);
+  const content = document.getElementById('skill-editor').value;
+  const filename = `${skill ? skill.id : 'skill'}.md`;
+
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+async function deleteCurrentSkill() {
+  if (!selectedSkillId) return;
+  const skill = allSkillsList.find((s) => s.id === selectedSkillId);
+  if (skill && skill.isCore) {
+    alert('Cannot delete built-in core skills.');
+    return;
+  }
+  if (!confirm(`Are you sure you want to delete skill '${skill ? skill.name : selectedSkillId}'?`)) return;
+
+  const res = await fetch('/api/skill/delete', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id: selectedSkillId }),
+  });
+  const data = await res.json();
+  if (data.success) {
+    selectedSkillId = null;
+    await loadSkills();
+    showToast('Skill deleted.');
+  }
+}
+
+function activateCurrentSkillInChat() {
+  if (!selectedSkillId) return;
+  const skill = allSkillsList.find((s) => s.id === selectedSkillId);
+  if (!skill) return;
+
+  showTab('chat');
+  const input = document.getElementById('prompt-input');
+  input.value = `[Apply Skill: ${skill.name}] `;
+  input.focus();
+  showToast(`Skill '${skill.name}' loaded into prompt.`);
+}
+
+// Memory Loader
 async function loadMemory() {
   try {
     const res = await fetch('/api/memory');
@@ -697,3 +985,96 @@ async function loadMemory() {
     console.error('Failed to load memory:', err);
   }
 }
+
+// Authentication Helpers
+let currentAuthUser = null;
+
+async function checkAuthStatus() {
+  try {
+    const res = await fetch('/api/auth/status');
+    const data = await res.json();
+    const dot = document.getElementById('auth-status-dot');
+    const text = document.getElementById('auth-status-text');
+
+    if (data.isAuthenticated && data.user) {
+      currentAuthUser = data.user;
+      if (dot) dot.classList.add('logged-in');
+      if (text) text.textContent = data.user.email.split('@')[0];
+    } else {
+      currentAuthUser = null;
+      if (dot) dot.classList.remove('logged-in');
+      if (text) text.textContent = 'Login';
+    }
+  } catch (e) {
+    console.error('Failed to check auth status:', e);
+  }
+}
+
+function openAuthModal() {
+  const modal = document.getElementById('auth-modal');
+  const formView = document.getElementById('auth-form-view');
+  const loggedView = document.getElementById('auth-logged-view');
+  const emailText = document.getElementById('logged-user-email');
+  const idText = document.getElementById('logged-user-id');
+
+  if (currentAuthUser) {
+    if (formView) formView.style.display = 'none';
+    if (loggedView) loggedView.style.display = 'block';
+    if (emailText) emailText.textContent = currentAuthUser.email;
+    if (idText) idText.textContent = `Cloud Partition: ${currentAuthUser.userId}`;
+  } else {
+    if (formView) formView.style.display = 'block';
+    if (loggedView) loggedView.style.display = 'none';
+  }
+
+  if (modal) modal.style.display = 'flex';
+}
+
+function closeAuthModal() {
+  const modal = document.getElementById('auth-modal');
+  if (modal) modal.style.display = 'none';
+}
+
+async function submitDesktopLogin() {
+  const emailInput = document.getElementById('modal-email-input');
+  const passInput = document.getElementById('modal-pass-input');
+  const email = (emailInput ? emailInput.value : '').trim();
+  const password = passInput ? passInput.value : '';
+
+  if (!email || !email.includes('@')) {
+    alert('Please enter a valid email address.');
+    return;
+  }
+
+  try {
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    });
+    const data = await res.json();
+    if (data.success && data.user) {
+      currentAuthUser = data.user;
+      closeAuthModal();
+      await checkAuthStatus();
+      await loadProfiles();
+      showToast(`Logged in as ${data.user.email}`);
+    } else {
+      alert(data.error || 'Login failed.');
+    }
+  } catch (err) {
+    alert('Login error: ' + err.message);
+  }
+}
+
+async function submitDesktopLogout() {
+  try {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    currentAuthUser = null;
+    closeAuthModal();
+    await checkAuthStatus();
+    showToast('Logged out of ANTRI.');
+  } catch (err) {
+    console.error('Logout error:', err);
+  }
+}

package/dist/desktop/public/index.html

@@ -15,7 +15,7 @@
   <header class="app-header">
     <div class="brand-zone">
       <span class="logo-mark">ANTRI</span>
-      <span class="version-tag">v1.44.0</span>
+      <span class="version-tag">v1.46.0</span>
     </div>
 
     <!-- Mode Toggle -->
@@ -63,6 +63,11 @@
       <button id="btn-perms-toggle" class="perms-badge" onclick="toggleAlwaysAllow()">
         <span id="perms-text">Ask-First</span>
       </button>
+
+      <button id="btn-auth-status" class="auth-header-btn" onclick="openAuthModal()">
+        <span id="auth-status-dot" class="status-dot"></span>
+        <span id="auth-status-text">Login</span>
+      </button>
     </div>
   </header>
 
@@ -269,11 +274,15 @@
         <div class="panel-header">
           <div>
             <h2>Thinking Profile Studio</h2>
-            <p>Manage user preferences, coding styles, and automatically extracted notes.</p>
+            <p>Manage user preferences, coding styles, and automatically extracted notes in <code>~/.antri/profiles/</code>.</p>
           </div>
           <div class="debate-controls">
+            <input type="file" id="profile-import-input" accept=".md,.txt" style="display:none;" onchange="handleProfileImport(event)" />
             <input type="text" id="new-profile-name" placeholder="New profile name (e.g. backend_architect)" />
-            <button class="action-btn" onclick="createProfile()">Create Profile</button>
+            <button class="action-btn" onclick="createProfile()">+ Create</button>
+            <button class="action-btn-secondary" onclick="document.getElementById('profile-import-input').click()">📁 Import .md</button>
+            <button class="action-btn-secondary" onclick="pushProfilesToCloud()">☁️ Push</button>
+            <button class="action-btn-secondary" onclick="pullProfilesFromCloud()">☁️ Pull</button>
           </div>
         </div>
 
@@ -283,25 +292,68 @@
           </div>
           <div class="profile-editor-container">
             <div class="editor-header">
-              <h3 id="active-profile-title">profile_1.md</h3>
-              <button class="save-btn" onclick="saveActiveProfile()">Save Profile</button>
+              <div>
+                <h3 id="active-profile-title">profile_1.md</h3>
+                <span class="editor-subtitle">Editing active thinking profile instructions</span>
+              </div>
+              <div class="editor-action-group">
+                <button class="btn-sm-action" onclick="exportActiveProfile()">⬇️ Export</button>
+                <button class="btn-sm-action btn-danger" onclick="deleteActiveProfile()">🗑️ Delete</button>
+                <button class="save-btn" onclick="saveActiveProfile()">💾 Save Profile</button>
+              </div>
             </div>
             <textarea id="profile-editor" class="profile-textarea" placeholder="Profile markdown content..."></textarea>
           </div>
         </div>
       </section>
 
-      <!-- TAB 5: Dynamic Skills -->
+      <!-- TAB 5: Markdown Skills Studio -->
       <section id="tab-skills" class="tab-panel">
         <div class="panel-header">
           <div>
-            <h2>Dynamic Skill Studio</h2>
-            <p>Tools synthesized autonomously by the agent in <code>~/.agent-cli/skills/</code>.</p>
+            <h2>Markdown (.md) Skill Studio</h2>
+            <p>Specialist capability directives loaded from <code>~/.antri/skills/</code>. Add or import new skills as Markdown files.</p>
+          </div>
+          <div class="debate-controls">
+            <input type="file" id="skill-import-input" accept=".md,.txt" style="display:none;" onchange="handleSkillImport(event)" />
+            <input type="text" id="skill-search-input" placeholder="Search skills by name, category, or trigger..." oninput="filterSkills(this.value)" />
+            <button class="action-btn" onclick="createNewSkillPrompt()">+ Create Skill</button>
+            <button class="action-btn-secondary" onclick="document.getElementById('skill-import-input').click()">📁 Import .md</button>
           </div>
         </div>
 
-        <div class="skills-grid" id="skills-catalog-grid">
-          <!-- Populated dynamically -->
+        <div class="skill-studio-layout">
+          <!-- Left: Skills List & Filters -->
+          <div class="skill-list-sidebar">
+            <div class="skill-category-filters" id="skill-category-filters">
+              <button class="category-pill active" onclick="setSkillCategory('all')">All</button>
+              <button class="category-pill" onclick="setSkillCategory('Core')">Core</button>
+              <button class="category-pill" onclick="setSkillCategory('Custom')">Custom</button>
+              <button class="category-pill" onclick="setSkillCategory('Engineering')">Engineering</button>
+              <button class="category-pill" onclick="setSkillCategory('Architecture')">Architecture</button>
+              <button class="category-pill" onclick="setSkillCategory('Security')">Security</button>
+            </div>
+            <div class="skill-items-container" id="skills-catalog-list">
+              <!-- Populated dynamically -->
+            </div>
+          </div>
+
+          <!-- Right: Live Skill Markdown Editor -->
+          <div class="skill-editor-container">
+            <div class="editor-header">
+              <div>
+                <h3 id="active-skill-title">Select a Skill</h3>
+                <span id="active-skill-meta" class="editor-subtitle">Click any skill on the left to inspect or edit instructions</span>
+              </div>
+              <div class="editor-action-group">
+                <button class="btn-sm-action" id="btn-activate-skill" onclick="activateCurrentSkillInChat()">⚡ Activate in Chat</button>
+                <button class="btn-sm-action" id="btn-export-skill" onclick="exportCurrentSkill()">⬇️ Export</button>
+                <button class="btn-sm-action btn-danger" id="btn-delete-skill" onclick="deleteCurrentSkill()">🗑️ Delete</button>
+                <button class="save-btn" id="btn-save-skill" onclick="saveCurrentSkill()">💾 Save Skill</button>
+              </div>
+            </div>
+            <textarea id="skill-editor" class="profile-textarea" placeholder="Skill markdown content (# Skill Title, instructions, heuristics...)" spellcheck="false"></textarea>
+          </div>
         </div>
       </section>
 
@@ -333,6 +385,36 @@
     </main>
   </div>
 
+  <!-- AUTH MODAL -->
+  <div id="auth-modal" class="modal-backdrop" style="display:none;" onclick="if(event.target===this)closeAuthModal()">
+    <div class="modal-box">
+      <div class="modal-header">
+        <h3 id="modal-auth-title">ANTRI Account</h3>
+        <button class="modal-close" onclick="closeAuthModal()">✕</button>
+      </div>
+      <div class="modal-body" id="modal-auth-body">
+        <div id="auth-form-view">
+          <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">Sign in to sync your thinking profiles and memories across CLI, Desktop, and Mobile.</p>
+          <div style="margin-bottom:12px;">
+            <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Email Address</label>
+            <input type="email" id="modal-email-input" class="modal-input" placeholder="user@gmail.com" />
+          </div>
+          <div style="margin-bottom:16px;">
+            <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Password</label>
+            <input type="password" id="modal-pass-input" class="modal-input" placeholder="••••••••" />
+          </div>
+          <button class="action-btn" style="width:100%;margin-bottom:8px;" onclick="submitDesktopLogin()">Sign In / Register</button>
+        </div>
+        <div id="auth-logged-view" style="display:none;text-align:center;padding:12px 0;">
+          <div style="font-size:32px;margin-bottom:8px;">👤</div>
+          <div id="logged-user-email" style="font-weight:700;font-size:15px;color:var(--primary);margin-bottom:4px;"></div>
+          <div id="logged-user-id" style="font-size:12px;color:var(--text-muted);margin-bottom:16px;"></div>
+          <button class="action-btn-danger" style="width:100%;" onclick="submitDesktopLogout()">Logout</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="app.js"></script>
 </body>
 </html>