Improve connection tab label

Author: ericdallo

src/pages/ConnectionBar.tsx

@@ -5,6 +5,7 @@
  * and close button. Includes an "add" button to open the connect form.
  */
 
+import type { WorkspaceFolder } from '../bridge/types';
 import type { Protocol } from '../bridge/utils';
 import type { SessionStatus } from './RemoteSession';
 
@@ -19,6 +20,8 @@ export interface ConnectionEntry {
   protocol?: Protocol;
   status: SessionStatus | 'idle';
   error?: string;
+  /** Workspace folders reported by the server once the session is connected. */
+  workspaceFolders?: (WorkspaceFolder | string)[];
 }
 
 interface ConnectionBarProps {
@@ -49,15 +52,26 @@ export function ConnectionBar({
       <div className="conn-bar-tabs">
         {entries.map((entry) => {
           const isActive = entry.id === activeId;
+          const ws = getWorkspaceLabel(entry.workspaceFolders);
+          const tooltip = ws
+            ? `${ws.fullPath}\n${entry.host}`
+            : entry.host;
           return (
             <button
               key={entry.id}
               className={`conn-tab ${isActive ? 'active' : ''}`}
               onClick={() => onSwitch(entry.id)}
-              title={entry.host}
+              title={tooltip}
             >
               <span className={`conn-dot ${dotClass(isActive ? entry.status : 'idle')}`} />
-              <span className="conn-label">{formatHost(entry.host)}</span>
+              {ws ? (
+                <span className="conn-label conn-label-rich">
+                  <span className="conn-label-primary">{ws.name}</span>
+                  <span className="conn-label-secondary">{formatHost(entry.host)}</span>
+                </span>
+              ) : (
+                <span className="conn-label">{formatHost(entry.host)}</span>
+              )}
               <span
                 className="conn-close"
                 role="button"
@@ -86,6 +100,27 @@ export function ConnectionBar({
 // Helpers
 // ---------------------------------------------------------------------------
 
+/**
+ * Extract a human-friendly workspace label from the first workspace folder.
+ * Returns `null` when no workspace data is available yet (e.g. still connecting).
+ */
+function getWorkspaceLabel(
+  folders?: (WorkspaceFolder | string)[],
+): { name: string; fullPath: string } | null {
+  if (!folders || folders.length === 0) return null;
+  const folder = folders[0];
+  const fullPath =
+    typeof folder === 'string'
+      ? folder
+      : folder.uri?.replace(/^file:\/\//, '') ?? folder.name ?? '';
+  if (!fullPath) return null;
+  const name =
+    (typeof folder === 'string' ? null : folder.name) ||
+    fullPath.split('/').filter(Boolean).pop() ||
+    fullPath;
+  return { name, fullPath };
+}
+
 /** Truncate a host string to fit in the tab bar. */
 function formatHost(host: string): string {
   const clean = host.replace(/^https?:\/\//, '');

src/pages/RemoteProduct.css

@@ -26,7 +26,7 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  height: 36px;
+  height: 40px;
   padding: 0 0.75rem;
   background: #14142a;
   border-bottom: 1px solid #2a2a3e;
@@ -113,13 +113,35 @@
   50% { opacity: 0.3; }
 }
 
-/* Label */
+/* Label — simple (host only, no workspace data yet) */
 .conn-label {
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Label — rich (workspace name + host) */
+.conn-label-rich {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+  gap: 0;
+  max-width: 180px;
+}
+
+.conn-label-primary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+
+.conn-label-secondary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.62rem;
+  opacity: 0.5;
+}
+
 /* Close button */
 .conn-close {
   display: flex;

src/pages/RemoteProduct.tsx

@@ -218,22 +218,41 @@ export function RemoteProduct() {
   const handleBridgeChange = useCallback((bridge: WebBridge | null) => {
     setActiveBridge(bridge);
     if (bridge) {
+      // Capture the active connection ID for this bridge's callbacks.
+      // Safe because RemoteSession is keyed by activeEntry.id — so the
+      // bridge always corresponds to the connection that was active when
+      // this callback was created.
+      const connId = activeId;
+
+      /** Push workspace folders into both top-level state and the matching ConnectionEntry. */
+      const syncFolders = () => {
+        const folders = bridge.getWorkspaceFolders();
+        setWorkspaceFolders(folders);
+        if (connId && folders.length > 0) {
+          setEntries((prev) =>
+            prev.map((e) =>
+              e.id === connId ? { ...e, workspaceFolders: folders } : e,
+            ),
+          );
+        }
+      };
+
       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());
+        syncFolders();
       });
       setChatEntries(bridge.getChatEntries());
       setSelectedChatId(bridge.getSelectedChatId());
-      setWorkspaceFolders(bridge.getWorkspaceFolders());
+      syncFolders();
     } else {
       setChatEntries([]);
       setSelectedChatId(null);
       setWorkspaceFolders([]);
     }
-  }, []);
+  }, [activeId]);
 
   const toggleSidebar = useCallback(() => {
     setSidebarOpen((prev) => !prev);