Refactor ChatPage and SettingPage components for improved layout and functionality

- Updated ChatPage to use a single-column layout with a minimalist header.
- Replaced button elements with a consistent Button component for navigation.
- Adjusted navigation routes to point to '/chat/list' and added a new chat route.
- Enhanced MessagesArea component to handle streaming responses correctly.
- Simplified input area with suggestion chips and improved styling.
- Refactored SettingPage to streamline tab navigation and component rendering.
- Removed unused imports and commented-out code for cleaner structure.
- Updated router configuration to reflect new routes and removed deprecated ones.

Author: shtse8

memory-bank/active_context.md

@@ -1,25 +1,9 @@
 # Active Context
 
-## Current Focus
-**Assistant Architecture - Phase 2 (Backend/Stores/UI Implementation):** Verify Assistant CRUD functionality and proceed with full UI implementation and backend integration.
+*This file is automatically managed by the AI Council.*
 
-## Next Steps
-1.  **Testing:** Verify Assistant CRUD operations (Create, List, Update, Delete) are working correctly via the UI and backend logs.
-2.  **Frontend:** Implement the full UI functionality within `AssistantSettings.tsx` (forms, validation, interaction with stores for CRUD).
-3.  **Frontend:** Replace placeholder Assistant data/logic in `InputArea.tsx` and `DefaultAssistantSettings.tsx` with integration with the new `assistantStores`.
-4.  **Refactor:** Update `ConfigResolver` and `AiStreamer` to use the real `AssistantManager` to fetch Assistant details and apply their configuration (model, instructions).
-5.  **Refactor:** Update `ChatSessionManager` to handle `assistantId` in `ChatConfig`.
+**Current Task:** None.
 
-## Recent Changes
-*   Completed systematic UI/UX refactoring based on user principles (minimalism, theme, borderless, etc.). [Resolved]
-*   Fixed UI bugs: model selector text, image previews, Assistant settings dropdown cutoff, `CustomSelect` mouse selection. [Resolved]
-*   Enhanced `ChatListPage`: Improved delete visibility, added bulk delete UI, added resource placeholder. [Resolved]
-*   Pivoted to Assistant architecture: Updated types, refactored relevant frontend components (`InputArea`, `ChatPage`, `SettingPage`, `DefaultAssistantSettings`), created placeholder `AssistantSettings` UI, fixed backend type errors (`configResolver`, `SetDefaultConfigHandler`). [Phase 1 Done]
-*   Removed redundant "Default Assistant" card from General Settings. [Done]
-*   Implemented backend handlers (`Get`, `Create`, `Update`, `Delete`) for Assistant management. [Done]
-*   Debugged and resolved "No handler found" errors and `assistants/list` timeout by adding logging and removing debounce from `AssistantManager.saveAssistants`. [Done]
+**Next Action:** Awaiting new user directive.
 
-## Active Decisions
-*   Proceeding with Assistant-based architecture.
-*   Prioritize backend/store implementation for Assistants next.
-*   File rename `DefaultModelSettings.tsx` -> `DefaultAssistantSettings.tsx` still pending (manual user action).
+**Waiting For:** User Input.

memory-bank/progress.md

@@ -45,6 +45,7 @@
 *   **[Resolved] Assistant Settings UI Bugs:** Fixed dropdown cutoff issue in modal, resolved mouse click selection issue in `CustomSelect`.
 *   **[Resolved] Assistant CRUD Backend:** Implemented and registered backend handlers (`Get`, `Create`, `Update`, `Delete`) for Assistant management. Debugged "No handler found" error (related to build/cache).
 *   **[Resolved] Assistant List Timeout:** Removed debounce timer from `AssistantManager.saveAssistants` to fix timeout during initial load.
+*   **[Resolved] UI Refactoring (Phase 2 - Expandable Edit):** Implemented expandable inline editing for Assistants and Providers settings based on user feedback. Adjusted main app layout (`app.tsx`) to use header navigation instead of a sidebar. Added search to Assistants and Providers lists.
 
 ## What's Left / Known Issues
 *   **Assistant Architecture (Phase 2+):**

src/extension.ts

@@ -67,6 +67,7 @@ import { GetAssistantsHandler } from './webview/handlers/GetAssistantsHandler';
 import { CreateAssistantHandler } from './webview/handlers/CreateAssistantHandler'; // Import CreateAssistantHandler
 import { UpdateAssistantHandler } from './webview/handlers/UpdateAssistantHandler'; // Import UpdateAssistantHandler
 import { DeleteAssistantHandler } from './webview/handlers/DeleteAssistantHandler'; // Import DeleteAssistantHandler
+import { CreateNewChatHandler } from './webview/handlers/CreateNewChatHandler'; // Re-import CreateNewChatHandler
 // Removed GetVertexProjectsHandler and GetVertexLocationsHandler imports
 
 let aiServiceInstance: AiService | undefined = undefined;
@@ -204,6 +205,7 @@ class ZenCoderChatViewProvider implements vscode.WebviewViewProvider {
             new CreateAssistantHandler(), // Register CreateAssistantHandler
             new UpdateAssistantHandler(), // Register UpdateAssistantHandler
             new DeleteAssistantHandler(), // Register DeleteAssistantHandler
+            new CreateNewChatHandler(), // Re-register CreateNewChatHandler
             // Removed GetVertexProjectsHandler and GetVertexLocationsHandler instances
         ];
 

src/webview/handlers/CreateNewChatHandler.ts

@@ -0,0 +1,34 @@
+import * as vscode from 'vscode';
+import { RequestHandler, HandlerContext } from './RequestHandler';
+import { ChatSession } from '../../common/types';
+
+// No payload needed for this request
+type CreateNewChatPayload = undefined;
+
+// Define the expected return type (the newly created session)
+type CreateNewChatResult = ChatSession;
+
+export class CreateNewChatHandler implements RequestHandler {
+    public readonly requestType = 'createNewChat';
+
+    public async handle(payload: CreateNewChatPayload, context: HandlerContext): Promise<CreateNewChatResult> {
+        console.log('[CreateNewChatHandler] Handling createNewChat request.');
+
+        try {
+            // createChatSession should handle ID generation internally if no ID is passed
+            const newSession = await context.chatSessionManager.createChatSession();
+            if (!newSession) {
+                throw new Error('Failed to create new chat session in manager.');
+            }
+            console.log(`[CreateNewChatHandler] Successfully created new session ${newSession.id}.`);
+
+            // No need to push updates here, the frontend will navigate and load the new session
+
+            return newSession; // Return the full session object
+        } catch (error: any) {
+            console.error(`[CreateNewChatHandler] Error creating new chat:`, error);
+            vscode.window.showErrorMessage(`Failed to create new chat: ${error.message}`);
+            throw new Error(`Failed to create new chat: ${error.message}`);
+        }
+    }
+}

src/webview/handlers/UpdateChatConfigHandler.ts

@@ -27,20 +27,43 @@ export class UpdateChatConfigHandler implements RequestHandler {
         console.log(`[UpdateChatConfigHandler] Handling updateChatConfig for chat ID: ${chatId}`, config);
 
         try {
-            const chat = context.chatSessionManager.getChatSession(chatId); // Use chatSessionManager
+            let chat = context.chatSessionManager.getChatSession(chatId); // Use chatSessionManager
+            let mergedConfig: ChatConfig;
+
             if (!chat) {
-                throw new Error(`Chat session not found: ${chatId}`);
+                // Session doesn't exist, likely a new chat. Create it first.
+                console.log(`[UpdateChatConfigHandler] Chat session ${chatId} not found. Creating new session.`);
+                chat = await context.chatSessionManager.createChatSession(chatId); // Create with default config
+                if (!chat) {
+                     throw new Error(`Failed to create new chat session: ${chatId}`);
+                }
+                 console.log(`[UpdateChatConfigHandler] Successfully created new session ${chatId}. Now applying config.`);
+                 // Now apply the desired config as an update
+                 mergedConfig = {
+                    ...chat.config, // Start with the default config from the newly created chat
+                    ...config       // Apply partial updates from payload
+                 };
+                 await context.chatSessionManager.updateChatSession(chatId, { config: mergedConfig });
+                 console.log(`[UpdateChatConfigHandler] Successfully applied initial config to new session ${chatId}.`);
+                 // Re-fetch the chat to ensure we have the updated config for the return value
+                 chat = context.chatSessionManager.getChatSession(chatId);
+                 if (!chat) {
+                     // This should be highly unlikely if creation and update succeeded
+                     throw new Error(`Failed to retrieve newly created session ${chatId} after config update.`);
+                 }
+
+            } else {
+                // Session exists, merge existing config with the partial update
+                mergedConfig = {
+                    ...chat.config, // Start with existing config
+                    ...config       // Apply partial updates
+                };
+                // Pass the complete, merged config object
+                await context.chatSessionManager.updateChatSession(chatId, { config: mergedConfig }); // Use chatSessionManager
+                console.log(`[UpdateChatConfigHandler] Successfully updated config for chat ${chatId}.`);
             }
-            // Merge existing config with the partial update
-            const mergedConfig: ChatConfig = {
-                ...chat.config, // Start with existing config
-                ...config       // Apply partial updates
-            };
-            // Pass the complete, merged config object
-            await context.chatSessionManager.updateChatSession(chatId, { config: mergedConfig }); // Use chatSessionManager
-            console.log(`[UpdateChatConfigHandler] Successfully updated config for chat ${chatId}.`);
 
-            // Get the updated session data
+            // Get the updated/created session data
             const updatedSession = context.chatSessionManager.getChatSession(chatId); // Use chatSessionManager
             if (updatedSession) {
                 // Trigger a push update for the specific chat session

webview-ui/src/app.tsx

@@ -1,51 +1,103 @@
 import { useStore } from '@nanostores/preact';
-import { ComponentChild } from 'preact';
-// Removed useEffect, useRef
-// Removed import './app.css';
+import { ComponentChild, VNode } from 'preact'; // Import VNode
+import { FunctionalComponent } from 'preact';
+import { useEffect, useRef } from 'preact/hooks'; // Added useRef
 import { SettingPage } from './pages/SettingPage';
 import { ChatPage } from './pages/ChatPage';
-import { ChatListPage } from './pages/ChatListPage'; // Import ChatListPage
-import { router } from './stores/router';
+import { ChatListPage } from './pages/ChatListPage';
+import { router, $location } from './stores/router'; // Import router and $location
+import { requestData } from './utils/communication';
+import { ChatSession } from '../../src/common/types';
+
+// Removed HeaderNavItem component as header is removed
 
 export function App() {
     const page = useStore(router);
+    const lastLocation = useStore($location); // Get last location state
+    const initialRedirectDone = useRef(false); // Prevent multiple redirects
 
-    // Removed initial redirect logic
+    // Effect to handle initial redirection from '/'
+    useEffect(() => {
+        // Only run once on initial load when page might be null or '/'
+        if (!initialRedirectDone.current && (page === null || window.location.pathname === '/')) {
+            initialRedirectDone.current = true; // Mark as done
+            // Wait for lastLocation to be loaded (not 'loading' or 'error')
+            if (typeof lastLocation === 'string' && lastLocation !== 'loading' && lastLocation !== 'error' && lastLocation !== '/') {
+                 console.log(`[App] Initial load: Redirecting to last location: ${lastLocation}`);
+                 router.open(lastLocation, true); // Redirect to last known location
+            } else if (lastLocation !== 'loading') { // If loaded but invalid/error/root, go to new chat
+                 console.log(`[App] Initial load: No valid last location found (or was '/'). Redirecting to /chat/new.`);
+                 router.open('/chat/new', true); // Default redirect to new chat
+            }
+            // If lastLocation is still 'loading', the $location subscribe effect in router.ts will handle the initial open later.
+        }
+    }, [page, lastLocation]); // Rerun if page or lastLocation changes
 
-    // --- Page Routing ---
-    let CurrentPage: ComponentChild = null;
+    // Effect to handle /chat/new route
+     useEffect(() => {
+        if (page?.route === 'newChat') {
+            console.log('[App] Detected /chat/new route, requesting new session...');
+            // Prevent potential double requests if component re-renders quickly
+            let createRequestSent = false; // Use a simple flag within the effect's scope
+            if (!createRequestSent) {
+                createRequestSent = true;
+                requestData<ChatSession>('createNewChat')
+                    .then(newSession => {
+                        if (newSession?.id) {
+                            console.log(`[App] New session created: ${newSession.id}. Redirecting...`);
+                            router.open(`/chat/${newSession.id}`, true); // Redirect with replace
+                        } else {
+                            console.error('[App] Backend did not return a valid new session.');
+                            router.open('/chat/list'); // Fallback to list
+                        }
+                    })
+                    .catch(error => {
+                        console.error('[App] Error creating new chat:', error);
+                        router.open('/chat/list'); // Fallback to list
+                    });
+                 // Note: createRequestSent flag only prevents immediate re-trigger within the same render cycle.
+                 // If the component unmounts and remounts quickly on the same route, it might still trigger again.
+                 // A more robust solution might involve a store or ref if needed, but this handles simple cases.
+            }
+        }
+    }, [page]); // Depend only on page
 
-    // Wait for the router 'page' object to be defined
-    if (!page) {
-         return (
-            <div class="flex justify-center items-center h-screen text-gray-500 dark:text-gray-400">
-                Initializing Router...
-            </div>
-        );
-    }
+    // --- Page Routing ---
+    let CurrentPage: ComponentChild | VNode<any> | null = null;
 
-    // Determine which component to render based on the route name
-    // '/' and '/chat/:chatId' now both render ChatPage
-    if (page.route === 'home' || page.route === 'chat') {
-        // Pass potential chatId from params. ChatPage will handle if it's undefined.
-        const chatId = (page.route === 'chat' && page.params && page.params.chatId) ? page.params.chatId : undefined;
-        // Use key={chatId || 'new'} to ensure component remounts when navigating between '/' and '/chat/:id'
-        // or between different chat IDs. 'new' key for the initial '/' load.
-        CurrentPage = <ChatPage key={chatId || 'new'} chatIdFromRoute={chatId} />;
+    // Handle initial loading state or root path before redirect
+    if (!page || page.path === '/') {
+         CurrentPage = (
+             <div class="flex justify-center items-center h-full bg-background text-foreground/70">
+                 <span class="i-carbon-circle-dash animate-spin mr-2"></span>
+                 Loading...
+             </div>
+         );
+    } else if (page.route === 'chat') { // Specific chat
+        const chatId = page.params.chatId;
+        CurrentPage = <ChatPage key={chatId} chatIdFromRoute={chatId} />;
     } else if (page.route === 'settings') {
         CurrentPage = <SettingPage />;
-    } else if (page.route === 'sessions') { // Add route for sessions
+    } else if (page.route === 'chatList') { // Use new route name 'chatList'
         CurrentPage = <ChatListPage />;
-    } else {
-        // Fallback for unknown routes
-        CurrentPage = <div class="p-6 text-center text-red-500">404: Page Not Found</div>;
+    } else if (page.route === 'newChat') { // Display loading while creating
+         CurrentPage = (
+            <div class="flex justify-center items-center h-full bg-background text-foreground/70">
+                <span class="i-carbon-circle-dash animate-spin mr-2"></span>
+                Creating new chat...
+            </div>
+        );
+    } else { // Fallback 404
+        CurrentPage = <div class="p-6 text-center text-vscode-error">404: Page Not Found</div>;
     }
 
     return (
-        <div class="flex w-screen h-screen text-gray-900 dark:text-gray-100 overflow-hidden">
-            <div class="flex-grow flex flex-col overflow-y-auto">
+        // Main container: Single column flex layout
+        <div class="flex flex-col w-screen h-screen bg-background text-foreground overflow-hidden font-sans text-vscode">
+            {/* Main Content Area */}
+            <main class="flex-1 flex flex-col overflow-y-auto">
                 {CurrentPage}
-            </div>
+            </main>
         </div>
     );
 }