Show workspace roots

Author: ericdallo

src/bridge/transport.ts

@@ -35,6 +35,7 @@ import type {
   SSESessionConnectedPayload,
   SSESessionMessagePayload,
   SSETrustUpdatedPayload,
+  WorkspaceFolder,
 } from './types';
 
 /** Timeout for the initial SSE handshake (session:connected). */
@@ -340,6 +341,11 @@ export class WebBridge {
     return this.currentChatId;
   }
 
+  /** Get the workspace folders from the current session (may be plain path strings). */
+  getWorkspaceFolders(): (WorkspaceFolder | string)[] {
+    return (this.sessionState?.workspaceFolders as (WorkspaceFolder | string)[] | undefined) ?? [];
+  }
+
   /** Select a chat by ID — dispatches to the webview, loads messages if needed. */
   async selectChat(chatId: string): Promise<void> {
     this.currentChatId = chatId;

src/components/ChatSidebar.css

@@ -49,6 +49,35 @@
   border-color: #00a5b8;
 }
 
+/* Workspace root indicator — non-interactive label */
+.chat-sidebar-workspace {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid #2a2a3e;
+  flex-shrink: 0;
+  color: #5a6a7a;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  cursor: default;
+  user-select: none;
+}
+
+.chat-sidebar-workspace .codicon {
+  font-size: 12px;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.chat-sidebar-workspace-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
 /* Scrollable list */
 .chat-sidebar-list {
   flex: 1;

src/components/ChatSidebar.tsx

@@ -11,7 +11,7 @@
 
 import { useCallback } from 'react';
 import type { WebBridge } from '../bridge/transport';
-import type { ChatEntry } from '../bridge/types';
+import type { ChatEntry, WorkspaceFolder } from '../bridge/types';
 import './ChatSidebar.css';
 
 // ---------------------------------------------------------------------------
@@ -22,6 +22,8 @@ interface ChatSidebarProps {
   bridge: WebBridge | null;
   chats: ChatEntry[];
   selectedId: string | null;
+  /** Workspace folders from the current server session (may be plain path strings). */
+  workspaceFolders?: (WorkspaceFolder | string)[];
   /** Whether the mobile drawer is open (controlled by parent). */
   mobileOpen: boolean;
   /** Called when the mobile drawer should close (backdrop tap, item select). */
@@ -49,7 +51,7 @@ export function ChatSidebarToggle({ onClick }: { onClick: () => void }) {
 // Main sidebar component
 // ---------------------------------------------------------------------------
 
-export function ChatSidebar({ bridge, chats = [], selectedId, mobileOpen, onMobileClose }: ChatSidebarProps) {
+export function ChatSidebar({ bridge, chats = [], selectedId, workspaceFolders = [], mobileOpen, onMobileClose }: ChatSidebarProps) {
   const handleSelect = useCallback(
     (chatId: string) => {
       bridge?.selectChat(chatId);
@@ -81,6 +83,19 @@ export function ChatSidebar({ bridge, chats = [], selectedId, mobileOpen, onMobi
 
       {/* Sidebar panel */}
       <div className={`chat-sidebar ${mobileOpen ? 'open' : ''}`}>
+        {workspaceFolders.length > 0 && (() => {
+          const folder = workspaceFolders[0];
+          // Server sends workspace folders as plain path strings OR {name, uri} objects
+          const fullPath = typeof folder === 'string' ? folder : (folder.uri?.replace(/^file:\/\//, '') ?? folder.name ?? '');
+          const displayName = (typeof folder === 'string' ? null : folder.name) || fullPath.split('/').filter(Boolean).pop() || fullPath;
+          return (
+            <div className="chat-sidebar-workspace" title={fullPath}>
+              <i className="codicon codicon-folder" />
+              <span className="chat-sidebar-workspace-name">{displayName}</span>
+            </div>
+          );
+        })()}
+
         <div className="chat-sidebar-header">
           <span className="chat-sidebar-title">Chats</span>
           <button

src/pages/RemoteProduct.tsx

@@ -13,7 +13,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { probePort, testConnection } from '../bridge/connection';
 import type { WebBridge } from '../bridge/transport';
-import type { ChatEntry } from '../bridge/types';
+import type { ChatEntry, WorkspaceFolder } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
 import { ChatSidebar, ChatSidebarToggle } from '../components/ChatSidebar';
 import {
@@ -44,6 +44,7 @@ export function RemoteProduct() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [chatEntries, setChatEntries] = useState<ChatEntry[]>([]);
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+  const [workspaceFolders, setWorkspaceFolders] = useState<(WorkspaceFolder | string)[]>([]);
   const [discovery, setDiscovery] = useState<DiscoveryProgress | null>(null);
   const discoveryAbortRef = useRef<AbortController | null>(null);
 
@@ -220,12 +221,17 @@ export function RemoteProduct() {
       bridge.onChatListChanged((entries, selected) => {
         setChatEntries(entries);
         setSelectedChatId(selected);
+        // Workspace folders become available after session:connected,
+        // which fires before chats are restored — so pick them up here.
+        setWorkspaceFolders(bridge.getWorkspaceFolders());
       });
       setChatEntries(bridge.getChatEntries());
       setSelectedChatId(bridge.getSelectedChatId());
+      setWorkspaceFolders(bridge.getWorkspaceFolders());
     } else {
       setChatEntries([]);
       setSelectedChatId(null);
+      setWorkspaceFolders([]);
     }
   }, []);
 
@@ -258,6 +264,7 @@ export function RemoteProduct() {
             bridge={activeBridge}
             chats={chatEntries}
             selectedId={selectedChatId}
+            workspaceFolders={workspaceFolders}
             mobileOpen={sidebarOpen}
             onMobileClose={() => setSidebarOpen(false)}
           />