Add tab context menu and switch terminal tabs to id-based selection

Author: vipmax

anycode/App.tsx

@@ -296,10 +296,24 @@ const App: React.FC = () => {
         agents.setAgentsVersion((prev) => prev + 1);
     }, [agents.setAgentsVersion]);
 
-    const handleTerminalTabSelect = useCallback((index: number) => {
-        terminalPanes.selectTab(index);
+    const activeTerminalId = useMemo(() => {
+        const paneId = terminalPanes.activePaneId || 'terminal';
+        return terminalPanes.getSelectedId(paneId);
     }, [terminalPanes]);
 
+    const handleTerminalTabSelect = useCallback((terminalId: string) => {
+        terminalPanes.selectTab(terminalId);
+    }, [terminalPanes]);
+
+    const handleTerminalTabClose = useCallback((terminalId: string) => {
+        terminalPanes.closeTab(terminalId);
+    }, [terminalPanes]);
+
+    const activeToolbarAgentId = (
+        agentPanes.getSelectedId(agentPanes.activePaneId || 'agent')
+        ?? agents.selectedAgentId
+    );
+
     const renderPanel = (panelId: PanelId, panelKey: string) => {
         switch (panelId) {
             case 'files':
@@ -395,13 +409,13 @@ const App: React.FC = () => {
                         files={editors.files}
                         activeFileId={editors.activeFileId}
                         terminals={terminals.terminals}
-                        activeTerminalIndex={terminalPanes.getSelectedIndex(terminalPanes.activePaneId || 'terminal')}
+                        activeTerminalId={activeTerminalId}
                         agentSessions={sessionsArray}
-                        activeAgentId={agentPanes.getSelectedId(agentPanes.activePaneId || 'agent')}
+                        activeAgentId={activeToolbarAgentId}
                         onSelectFile={handleSelectFile}
                         onCloseFile={editors.closeFile}
                         onSelectTerminal={handleTerminalTabSelect}
-                        onCloseTerminal={terminalPanes.closeTab}
+                        onCloseTerminal={handleTerminalTabClose}
                         onSelectAgent={agentPanes.selectFromToolbar}
                         onCloseAgent={agents.closeAgent}
                     />

anycode/components/terminal/TerminalEmptyPane.tsx

@@ -4,8 +4,8 @@ import './TerminalEmptyPane.css';
 
 interface TerminalEmptyPaneProps {
   terminals: Terminal[];
-  onSelectTerminal: (index: number) => void;
-  onCloseTerminal: (index: number) => void;
+  onSelectTerminal: (terminalId: string) => void;
+  onCloseTerminal: (terminalId: string) => void;
   onCreateTerminal: () => void;
 }
 
@@ -21,13 +21,13 @@ export const TerminalEmptyPane: React.FC<TerminalEmptyPaneProps> = ({
         <div className="terminal-pane-opened">
           <div className="terminal-pane-title">Opened terminals</div>
           <div className="terminal-pane-actions">
-            {terminals.map((terminal, index) => (
+            {terminals.map((terminal) => (
               <div key={terminal.id} className="terminal-pane-opened-item">
                 <button
                   className="terminal-pane-action terminal-pane-opened-action"
                   onClick={(event) => {
                     event.stopPropagation();
-                    onSelectTerminal(index);
+                    onSelectTerminal(terminal.id);
                   }}
                   title={terminal.name}
                   type="button"
@@ -38,7 +38,7 @@ export const TerminalEmptyPane: React.FC<TerminalEmptyPaneProps> = ({
                   className="tab-close-button terminal-pane-close-button"
                   onClick={(event) => {
                     event.stopPropagation();
-                    onCloseTerminal(index);
+                    onCloseTerminal(terminal.id);
                   }}
                   title={`Close ${terminal.name}`}
                   type="button"

anycode/components/toolbar/TabContextMenu.css

@@ -0,0 +1,52 @@
+.tab-context-menu {
+    position: fixed;
+    z-index: 10000;
+    min-width: 196px;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 2px 8px;
+    background-color: rgba(28, 28, 28, 0.52);
+    background-image: linear-gradient(
+        160deg,
+        rgba(255, 255, 255, 0.05),
+        rgba(255, 255, 255, 0.015)
+    );
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 12px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
+    backdrop-filter: blur(10px) saturate(130%);
+    -webkit-backdrop-filter: blur(10px) saturate(130%);
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.tab-context-menu button {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    background: transparent;
+    border: none;
+    border-radius: 10px;
+    color: #f3f6fb;
+    cursor: pointer;
+    font: inherit;
+    line-height: 20px;
+    padding: 2px 8px;
+    text-align: left;
+}
+
+.tab-context-menu button:hover:not(:disabled),
+.tab-context-menu button:focus-visible:not(:disabled) {
+    background-color: rgba(130, 130, 130, 0.33);
+}
+
+.tab-context-menu button:disabled {
+    color: rgba(214, 223, 238, 0.42);
+    cursor: default;
+}
+
+.tab-context-menu-separator {
+    height: 1px;
+    margin: 4px 8px;
+    background: rgba(255, 255, 255, 0.14);
+}

anycode/components/toolbar/TabContextMenu.tsx

@@ -0,0 +1,51 @@
+import type { RefObject } from 'react';
+import './TabContextMenu.css';
+
+export type TabMenuAction = {
+    key: string;
+    label: string;
+    disabled?: boolean;
+    onClick: () => void;
+};
+
+type TabContextMenuProps = {
+    anchor: [number, number];
+    groups: TabMenuAction[][];
+    onClose: () => void;
+    menuRef: RefObject<HTMLDivElement | null>;
+};
+
+export const TabContextMenu = ({
+    anchor,
+    groups,
+    onClose,
+    menuRef,
+}: TabContextMenuProps) => (
+    <div
+        ref={menuRef}
+        className="tab-context-menu"
+        style={{ left: anchor[0], top: anchor[1] }}
+        role="menu"
+        onContextMenu={(event) => event.preventDefault()}
+    >
+        {groups.map((actions, groupIndex) => (
+            <div key={actions[0]?.key ?? groupIndex}>
+                {groupIndex > 0 && <div className="tab-context-menu-separator" />}
+                {actions.map((action) => (
+                    <button
+                        key={action.key}
+                        type="button"
+                        role="menuitem"
+                        disabled={action.disabled}
+                        onClick={() => {
+                            action.onClick();
+                            onClose();
+                        }}
+                    >
+                        {action.label}
+                    </button>
+                ))}
+            </div>
+        ))}
+    </div>
+);