feat(vscode): Move Navigation into the title bar (#88)

* Move Navigation into the title bar

* Fix spacing

* Update Changelog

* Remove unused function

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 - VS Code extension: reorganized extension location. It is now on the right sidebar for VSCode and on the left for Cursor/Windsurf.
+- VS Code extension: Move Navigation Info into the title bar.
 - Worktrees now do not create a remote branch by default; only the push action publishes the branch to remote.
 
 

packages/ui/src/components/layout/VSCodeLayout.tsx

@@ -52,11 +52,6 @@ export const VSCodeLayout: React.FC = () => {
     setCurrentView('sessions');
   }, []);
 
-  const handleNewSession = React.useCallback(() => {
-    openNewSessionDraft();
-    setCurrentView('chat');
-  }, [openNewSessionDraft]);
-
   // Listen for connection status changes
   React.useEffect(() => {
     const handler = (event: Event) => {
@@ -70,6 +65,23 @@ export const VSCodeLayout: React.FC = () => {
     return () => window.removeEventListener('openchamber:connection-status', handler as EventListener);
   }, []);
 
+  // Listen for navigation events from VS Code extension title bar buttons
+  React.useEffect(() => {
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent<{ view?: string }>).detail;
+      const view = detail?.view;
+      if (view === 'settings') {
+        setCurrentView('settings');
+      } else if (view === 'chat') {
+        setCurrentView('chat');
+      } else if (view === 'sessions') {
+        setCurrentView('sessions');
+      }
+    };
+    window.addEventListener('openchamber:navigate', handler as EventListener);
+    return () => window.removeEventListener('openchamber:navigate', handler as EventListener);
+  }, []);
+
   // Bootstrap config and sessions when connected
   React.useEffect(() => {
     const runBootstrap = async () => {
@@ -140,8 +152,6 @@ export const VSCodeLayout: React.FC = () => {
         <div className="flex flex-col h-full">
           <VSCodeHeader 
             title="Sessions" 
-            onNewSession={handleNewSession}
-            onSettings={() => setCurrentView('settings')}
           />
           <div className="flex-1 overflow-hidden">
             <SessionSidebar
@@ -210,7 +220,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
           <RiArrowLeftLine className="h-5 w-5" />
         </button>
       )}
-      <h1 className="text-sm font-medium truncate flex-1" title={title}>{title}</h1>
+      <h1 className="text-sm font-medium truncate flex-1 h-9 w-9 items-center justify-center p-2" title={title}>{title}</h1>
       {onNewSession && (
         <button
           onClick={onNewSession}

packages/vscode/package.json

@@ -86,6 +86,16 @@
       {
         "command": "openchamber.improveCode",
         "title": "Improve Code"
+      },
+      {
+        "command": "openchamber.newSession",
+        "title": "New Session",
+        "icon": "$(add)"
+      },
+      {
+        "command": "openchamber.showSettings",
+        "title": "Settings",
+        "icon": "$(settings-gear)"
       }
     ],
     "submenus": [
@@ -107,6 +117,18 @@
           "group": "navigation@1"
         }
       ],
+      "view/title": [
+        {
+          "command": "openchamber.newSession",
+          "when": "view == openchamber.chatView",
+          "group": "navigation@1"
+        },
+        {
+          "command": "openchamber.showSettings",
+          "when": "view == openchamber.chatView",
+          "group": "navigation@2"
+        }
+      ],
       "openchamber.submenu": [
         {
           "command": "openchamber.explain"

packages/vscode/src/ChatViewProvider.ts

@@ -116,6 +116,30 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
       });
     }
   }
+
+  public createNewSession() {
+    if (this._view) {
+      // Reveal the webview panel
+      this._view.show(true);
+      
+      this._view.webview.postMessage({
+        type: 'command',
+        command: 'newSession'
+      });
+    }
+  }
+
+  public showSettings() {
+    if (this._view) {
+      // Reveal the webview panel
+      this._view.show(true);
+      
+      this._view.webview.postMessage({
+        type: 'command',
+        command: 'showSettings'
+      });
+    }
+  }
   
   private _sendCachedState() {
     if (!this._view) {

packages/vscode/src/extension.ts

@@ -296,6 +296,18 @@ export async function activate(context: vscode.ExtensionContext) {
     })
   );
 
+  context.subscriptions.push(
+    vscode.commands.registerCommand('openchamber.newSession', () => {
+      chatViewProvider?.createNewSession();
+    })
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand('openchamber.showSettings', () => {
+      chatViewProvider?.showSettings();
+    })
+  );
+
   context.subscriptions.push(
     vscode.commands.registerCommand('openchamber.showOpenCodeStatus', async () => {
       const config = vscode.workspace.getConfiguration('openchamber');

packages/vscode/webview/main.tsx

@@ -711,6 +711,23 @@ onCommand('createSessionWithPrompt', (payload) => {
   });
 });
 
+// Listen for newSession command from extension title bar button
+onCommand('newSession', () => {
+  import('../../ui/src/stores/useSessionStore').then(({ useSessionStore }) => {
+    const store = useSessionStore.getState();
+    store.openNewSessionDraft();
+  });
+  
+  // Also dispatch event to navigate to chat view in VSCodeLayout
+  window.dispatchEvent(new CustomEvent('openchamber:navigate', { detail: { view: 'chat' } }));
+});
+
+// Listen for showSettings command from extension title bar button
+onCommand('showSettings', () => {
+  // Dispatch event to navigate to settings view in VSCodeLayout
+  window.dispatchEvent(new CustomEvent('openchamber:navigate', { detail: { view: 'settings' } }));
+});
+
 import('../../ui/src/main')
   .then(async () => {
     await waitForUiMount();