fix: sidebar, welcome screen and UX

webui/components/sidebar/bottom/preferences/preferences-panel.html

@@ -9,13 +9,17 @@
     <template x-if="$store.preferences">
       <div class="pref-section">
         <span>
-          <h3 class="pref-header" data-bs-toggle="collapse" data-bs-target="#pref-list">
+          <h3 class="pref-header" 
+              data-bs-toggle="collapse"
+              @click="$store.sidebar.toggleSection('preferences')"
+              x-effect="!$store.sidebar.isSectionOpen('preferences') ? $el.classList.add('collapsed') : $el.classList.remove('collapsed')">
             Preferences
             <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
               <path d="M8 4l8 8-8 8" />
             </svg>
           </h3>
-          <ul class="config-list collapse show" id="pref-list">
+          <ul class="config-list collapse" id="preferences-collapse"
+              x-effect="(() => { const c = bootstrap.Collapse.getOrCreateInstance($el, { toggle: false }); $store.sidebar.isSectionOpen('preferences') ? c.show() : c.hide(); })()">
             <li x-data>
               <span>Autoscroll</span>
               <label class="switch">
@@ -89,7 +93,7 @@
       flex-direction: column;
       gap: 1px;
     }
-    #pref-list li {
+    #preferences-collapse li {
     opacity: 0.8;
     }
     .pref-section .switch-label,

webui/components/sidebar/sidebar-store.js

@@ -5,17 +5,57 @@ const model = {
   isOpen: true,
   _initialized: false,
 
+  // Centralized collapse state for all sidebar sections (persisted in localStorage)
+  sectionStates: {
+    tasks: false,       // default: collapsed
+    preferences: false  // default: collapsed
+  },
+
   // Initialize the store by setting up a resize listener
   // Guard ensures this runs only once, even if called from multiple components
   init() {
     if (this._initialized) return;
     this._initialized = true;
 
+    this.loadSectionStates();
     this.handleResize();
     this.resizeHandler = () => this.handleResize();
     window.addEventListener("resize", this.resizeHandler);
   },
 
+  // Load section collapse states from localStorage
+  loadSectionStates() {
+    try {
+      const stored = localStorage.getItem('sidebarSections');
+      if (stored) {
+        this.sectionStates = { ...this.sectionStates, ...JSON.parse(stored) };
+      }
+    } catch (e) {
+      console.error('Failed to load sidebar section states', e);
+    }
+  },
+
+  // Persist section states to localStorage
+  persistSectionStates() {
+    try {
+      localStorage.setItem('sidebarSections', JSON.stringify(this.sectionStates));
+    } catch (e) {
+      console.error('Failed to persist section states', e);
+    }
+  },
+
+  // Check if a section should be open (used by x-init in templates)
+  isSectionOpen(name) {
+    return this.sectionStates[name] === true;
+  },
+
+  // Toggle and persist a section's open state (drives Bootstrap programmatically via components)
+  toggleSection(name) {
+    if (!(name in this.sectionStates)) return;
+    this.sectionStates[name] = !this.sectionStates[name];
+    this.persistSectionStates();
+  },
+
   // Cleanup method for lifecycle management
   destroy() {
     if (this.resizeHandler) {

webui/components/sidebar/tasks/tasks-list.html

@@ -8,13 +8,17 @@
   <div class="tasks-list-root">
     <template x-if="$store.tasks">
       <div x-data class="tasks-list-inner">
-        <h3 class="section-header section-header-collapsible" data-bs-toggle="collapse" data-bs-target="#tasks-collapse">
+        <h3 class="section-header section-header-collapsible" 
+            data-bs-toggle="collapse"
+            @click="$store.sidebar.toggleSection('tasks')"
+            x-effect="!$store.sidebar.isSectionOpen('tasks') ? $el.classList.add('collapsed') : $el.classList.remove('collapsed')">
           Tasks
           <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
             <path d="M8 4l8 8-8 8" />
           </svg>
         </h3>
-        <div class="collapse show" id="tasks-collapse">
+        <div class="collapse" id="tasks-collapse"
+             x-effect="(() => { const c = bootstrap.Collapse.getOrCreateInstance($el, { toggle: false }); $store.sidebar.isSectionOpen('tasks') ? c.show() : c.hide(); })()">
           <div class="tasks-list-body">
           <div class="tasks-list-container" x-data>
             <ul class="config-list tasks-config-list" x-show="$store.tasks.tasks.length > 0">

webui/components/sidebar/top-section/header-icons.html

@@ -62,14 +62,12 @@
     }
     #logo-container a { color: inherit; text-decoration: none; }
     #logo-container img { border-radius: var(--spacing-xs); width: auto; height: 2.6rem; -webkit-transition: filter 0.3s ease; transition: filter 0.3s ease; }
-    #right-panel.expanded #logo-container { margin-left: 4.6rem; }
 
     .light-mode #logo-container img { -webkit-filter: invert(100%) grayscale(100%); filter: invert(100%) grayscale(100%); }
 
     @media (max-width: 768px) {
       .toggle-sidebar-button { position: fixed; left: var(--spacing-md); z-index: 1004; }
-      #logo-container { margin-left: 4.6rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1004; }
-      #right-panel.expanded #logo-container { margin-left: 4.6rem; }
+      #logo-container { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1004; }
     }
   </style>
 </body>

webui/components/welcome/welcome-screen.html

@@ -11,7 +11,7 @@
                     <!-- Agent Zero Logo -->
                     <div class="welcome-logo-container">
                         <img
-                            src="/image_get?path=webui/public/lightSymbol.svg"
+                            src="./public/darkSymbol.svg"
                             alt="Agent Zero Logo"
                             class="welcome-logo"
                         />
@@ -78,22 +78,10 @@
                             </p>
                         </div>
                     </div>
-
-                    <!-- Footer Info -->
-                    <div class="welcome-footer">
-                        <p>Agent Zero Framework • Open Source AI Assistant</p>
-                    </div>
                 </div>
             </template>
         </div>
 
-        <script>
-            document.addEventListener("alpine:init", () => {
-                const s = Alpine.store("welcomeStore");
-                if (s && typeof s.init === "function") s.init();
-            });
-        </script>
-
         <style>
             /* Welcome Screen Styles */
             .welcome-container {
@@ -101,38 +89,43 @@
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                padding: 2rem;
+                padding: 3%;
                 text-align: center;
                 background: var(--color-background);
                 color: var(--color-text);
-                min-height: 400px;
+                min-height: 100vh;
             }
-
+            /* Welcome container styles */
             .welcome-logo-container {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                margin-bottom: 1.5rem;
             }
 
             .welcome-logo {
-                width: 120px;
-                height: 120px;
-                filter: brightness(1);
+                width: 7rem;
+                height: 7rem;
             }
 
-            /* Dark mode adjustments for logo */
+            /* Themes adjustments for logo */
+            .light-mode .welcome-logo {
+                filter: invert(0.5);
+            }
             .dark-mode .welcome-logo {
-                filter: brightness(1.2);
+                filter: invert(0.8);
             }
 
             .welcome-title {
                 font-size: 2rem;
-                font-weight: 300;
-                margin-bottom: 0.8rem;
+                font-weight: 400;
+                margin: var(--spacing-xs) 0 0 0;
                 color: var(--color-text);
             }
 
+            .welcome-action-title {
+                margin-bottom: 0;
+            }
+
             .welcome-subtitle {
                 font-size: 1rem;
                 margin-bottom: 2rem;
@@ -163,32 +156,19 @@
                 flex-direction: column;
                 align-items: center;
                 text-align: center;
-                min-height: 120px;
+                min-height: 10rem;
                 justify-content: center;
             }
 
             .welcome-action-card:hover {
-                border-color: var(--color-accent);
+                border-color: var(--color-accent-dark);
                 background: var(--color-message-bg);
-                transform: translateY(-2px);
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            }
-
-            .dark-mode .welcome-action-card:hover {
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
             }
 
             .welcome-action-icon {
                 font-size: 2rem;
-                margin-bottom: 0.8rem;
-                color: var(--color-accent);
-            }
-
-            .welcome-action-title {
-                font-size: 1.1rem;
-                font-weight: 500;
-                margin-bottom: 0.4rem;
-                color: var(--color-text);
+                margin-bottom: 0;
+                color: var(--color-accent-dark);
             }
 
             .welcome-action-description {
@@ -197,12 +177,6 @@
                 line-height: 1.3;
             }
 
-            .welcome-footer {
-                margin-top: 1.5rem;
-                opacity: 0.7;
-                font-size: 0.8rem;
-            }
-
             /* Light mode adjustments */
             .light-mode .welcome-title {
                 color: #2d2d2d;
@@ -226,37 +200,41 @@
 
             /* Responsive design */
             @media (max-width: 768px) {
-                .welcome-container {
-                    padding: 1rem;
-                }
-
-                .welcome-title {
-                    font-size: 2rem;
-                }
-
-                .welcome-subtitle {
-                    font-size: 1rem;
-                    margin-bottom: 2rem;
-                }
-
-                .welcome-actions {
-                    grid-template-columns: 1fr;
-                    gap: 1rem;
-                    margin-bottom: 2rem;
-                }
-
-                .welcome-action-card {
-                    padding: 1.5rem;
-                    min-height: 120px;
-                }
-
-                .welcome-action-icon {
-                    font-size: 2rem;
-                }
-
-                .welcome-action-title {
-                    font-size: 1.1rem;
-                }
+            .welcome-container {
+            padding: 1rem;
+            padding-top: 3rem;
+            }
+            .welcome-logo {
+            width: 5rem;
+            height: 5rem;
+            }
+            .welcome-logo-container {
+            margin-top: 2rem;
+            }
+            .welcome-title {
+            font-size: 1.5rem;
+            margin: 0 !important;
+            }
+            .welcome-subtitle {
+            font-size: 1rem;
+            margin-top: var(--spacing-xs);
+            margin-bottom: 0;
+            }
+            .welcome-actions {
+            grid-template-columns: 1fr;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            }
+            .welcome-action-card {
+            padding: 1.5rem;
+            min-height: 120px;
+            }
+            .welcome-action-icon {
+            font-size: 2rem;
+            }
+            .welcome-action-title {
+            font-size: 1.1rem;
+            }
             }
         </style>
     </body>

webui/index.css

@@ -164,9 +164,23 @@ img {
   transition: margin-left var(--transition-speed) ease-in-out;
 }
 
+/* Scrollbar styles for right panel */
 #right-panel.expanded {
   margin-left: 0;
 }
+div#right-panel::-webkit-scrollbar {
+  width: 6px;
+}
+div#right-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+div#right-panel::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.3);
+  border-radius: 6px;
+}
+div#right-panel::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.5);
+}
 
 #time-date-container {
   z-index: 1000;

webui/index.html

@@ -128,8 +128,6 @@
 
     <!-- Non-module scripts after Alpine.js -->
     <script type="text/javascript" src="js/settings.js"></script>
-    <script type="text/javascript" src="js/file_browser.js"></script>
-    <script type="module" src="js/tunnel.js"></script>
     <script>
         // Expose git info for sidebar component
         globalThis.gitinfo = { version: "{{version_no}}", commit_time: "{{version_time}}" };
@@ -139,10 +137,11 @@
 <body class="dark-mode device-pointer" x-data>
     <div class="container">
         <!-- Sidebar Overlay -->
-        <template x-if="$store.sidebar">
-            <div id="sidebar-overlay" class="sidebar-overlay" x-data
-                :class="{'visible': $store.sidebar.isOpen && $store.sidebar.isMobile()}"
-                @click="$store.sidebar.close()"></div>
+        <div id="sidebar-overlay" x-data>
+            <template x-if="$store.sidebar">
+                <div class="sidebar-overlay" :class="{'visible': $store.sidebar.isOpen && $store.sidebar.isMobile()}" @click="$store.sidebar.close()"></div>
+            </template>
+        </div>
         </template>
         <!-- Left Sidebar (Header Icons, Quick Actions, Tabs, Chats, Tasks) -->
         <x-component path="sidebar/left-sidebar.html"></x-component>
@@ -190,10 +189,13 @@
                 <button class="toast__copy" style="display: none;">Copy</button>
                 <button class="toast__close">Close</button>
             </div>
-            <!-- Progress Bar -->
-            <x-component path="chat/input/progress.html"></x-component>
-            <!-- Input Section -->
-            <x-component path="chat/input/chat-bar.html"></x-component>
+            <!-- Chat Input Area -->
+            <div x-show="!$store.welcomeStore || !$store.welcomeStore.isVisible">
+                <!-- Progress Bar -->
+                <x-component path="chat/input/progress.html"></x-component>
+                <!-- Input Section -->
+                <x-component path="chat/input/chat-bar.html"></x-component>
+            </div>
         </div>
     </div>
     <div id="settingsModal" x-data="settingsModalProxy">

webui/index.js

@@ -331,26 +331,37 @@ async function poll() {
       // Check if this context exists in the chats list
       const contextExists = chatsStore.contains(context);
 
-      // If it doesn't exist in the chats list, try to select the first chat
-      if (!contextExists && chatsStore.contexts.length > 0) {
-        const firstChatId = chatsStore.firstId();
-        if (firstChatId) {
-          setContext(firstChatId);
-          chatsStore.setSelected(firstChatId);
+      if (!contextExists) {
+        if (chatsStore.contexts.length > 0) {
+          // If it doesn't exist in the list but other contexts do, fall back to the first
+          const firstChatId = chatsStore.firstId();
+          if (firstChatId) {
+            setContext(firstChatId);
+            chatsStore.setSelected(firstChatId);
+          }
+        } else if (typeof deselectChat === "function") {
+          // No contexts remain – clear state so the welcome screen can surface
+          deselectChat();
         }
+      } else {
+        tasksStore.setSelected(context);
       }
-
-      tasksStore.setSelected(context);
     } else {
-      // No context selected, try to select the first available item
-      if (contexts.length > 0) {
-        const firstChatId = chatsStore.firstId();
-        if (firstChatId) {
-          setContext(firstChatId);
-          chatsStore.setSelected(firstChatId);
-        }
+    const welcomeStore =
+      globalThis.Alpine && typeof globalThis.Alpine.store === "function"
+        ? globalThis.Alpine.store("welcomeStore")
+        : null;
+    const welcomeVisible = Boolean(welcomeStore && welcomeStore.isVisible);
+
+    // No context selected, try to select the first available item unless welcome screen is active
+    if (!welcomeVisible && contexts.length > 0) {
+      const firstChatId = chatsStore.firstId();
+      if (firstChatId) {
+        setContext(firstChatId);
+        chatsStore.setSelected(firstChatId);
       }
     }
+  }
 
     lastLogVersion = response.log_version;
     lastLogGuid = response.log_guid;
@@ -617,6 +628,18 @@ document.addEventListener("DOMContentLoaded", function () {
     chatHistory.addEventListener("scroll", updateAfterScroll);
   }
 
+  // Restore previously selected context (if any) before polling begins
+  let storedContext = null;
+  try {
+    storedContext = localStorage.getItem("lastSelectedChat");
+  } catch (_e) {
+    storedContext = null;
+  }
+
+  if (storedContext && storedContext !== "null" && storedContext !== "") {
+    setContext(storedContext);
+  }
+
   // Start polling for updates
   startPolling();
 });