feat(toolbar): implement pin/unpin tab functionality with localStorage persistence

- Added a Pin SVG icon to the shared registry in Icons.tsx.
- Modified ToolbarTab.tsx to render the Pin icon in place of the close button when pinned.
- Handled state management in Toolbar.tsx for pinned files, terminals, and agents using storage helper functions loadItem/saveItem with constant keys.
- Preserved pinning order by appending new pins to the end of the arrays and sorting based on array indices.
- Excluded pinned tabs from mass-closing actions ('Close All', 'Close Right') and refactored close handlers into component-level helper methods for improved readability.
- Added custom styles for tab-pin-button and tab-pinned classes.

Author: vipmax

anycode/components/Icons.tsx

@@ -137,4 +137,20 @@ export const Icons = {
       </g>
     </svg>
   ),
+  Pin: () => (
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ transform: 'rotate(45deg)', display: 'block' }}
+    >
+      <path d="M12 17v5" strokeWidth="3" />
+      <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.89a1 1 0 0 0-.53.76c-.08.56.32 1.08.89 1.08h11.06a1 1 0 0 0 .89-1.08c-.08-.56-.37-.67-.53-.76l-1.78-.89A2 2 0 0 1 15 10.76V6a2 2 0 0 1 2-2v0a2 2 0 0 1-2-2H9a2 2 0 0 1-2 2v0a2 2 0 0 1 2 2z" />
+    </svg>
+  ),
 };

anycode/components/toolbar/Toolbar.css

@@ -97,3 +97,37 @@
         font-size: 16px;
     }
 }
+
+.tab-pin-button {
+    background: none;
+    border: none;
+    color: var(--theme-tab-foreground, #888888);
+    cursor: pointer;
+    padding: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    opacity: 0.6;
+    transition: all 0.2s ease;
+    outline: none;
+    margin-right: 2px;
+    margin-left: 2px;
+}
+
+.tab-pin-button:hover {
+    opacity: 1;
+    color: var(--theme-accent-background, #7ec8ff);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.tab-pin-button:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+}
+
+.tab-pinned {
+    padding-right: 6px;
+}
+

anycode/components/toolbar/Toolbar.tsx

@@ -1,11 +1,16 @@
 import type { FileState, Terminal, AcpSession } from '../../types';
-import type { WheelEvent } from 'react';
+import { WheelEvent, useState, useMemo } from 'react';
+import { loadItem, saveItem } from '../../storage';
 import { TabContextMenu } from './TabContextMenu';
 import type { TabMenuAction } from './TabContextMenu';
 import { ToolbarTab } from './ToolbarTab';
 import { useTabContextMenu } from './useTabContextMenu';
 import './Toolbar.css';
 
+const PINNED_FILES_KEY = 'pinnedFiles';
+const PINNED_TERMINALS_KEY = 'pinnedTerminals';
+const PINNED_AGENTS_KEY = 'pinnedAgents';
+
 interface ToolbarProps {
     files: FileState[];
     activeFileId: string | null;
@@ -40,7 +45,122 @@ export const Toolbar = ({
     onCloseAgent,
 }: ToolbarProps) => {
     const { closeMenu, menuRef, openMenu, tabMenu } = useTabContextMenu();
-    
+
+    const [pinnedFileIds, setPinnedFileIds] = useState<string[]>(() => {
+        return loadItem<string[]>(PINNED_FILES_KEY) ?? [];
+    });
+    const [pinnedTerminalIds, setPinnedTerminalIds] = useState<string[]>(() => {
+        return loadItem<string[]>(PINNED_TERMINALS_KEY) ?? [];
+    });
+    const [pinnedAgentIds, setPinnedAgentIds] = useState<string[]>(() => {
+        return loadItem<string[]>(PINNED_AGENTS_KEY) ?? [];
+    });
+
+    const togglePinFile = (fileId: string) => {
+        setPinnedFileIds((prev) => {
+            const next = prev.includes(fileId)
+                ? prev.filter((id) => id !== fileId)
+                : [...prev, fileId];
+            saveItem(PINNED_FILES_KEY, next);
+            return next;
+        });
+    };
+
+    const togglePinTerminal = (terminalId: string) => {
+        setPinnedTerminalIds((prev) => {
+            const next = prev.includes(terminalId)
+                ? prev.filter((id) => id !== terminalId)
+                : [...prev, terminalId];
+            saveItem(PINNED_TERMINALS_KEY, next);
+            return next;
+        });
+    };
+
+    const togglePinAgent = (agentId: string) => {
+        setPinnedAgentIds((prev) => {
+            const next = prev.includes(agentId)
+                ? prev.filter((id) => id !== agentId)
+                : [...prev, agentId];
+            saveItem(PINNED_AGENTS_KEY, next);
+            return next;
+        });
+    };
+
+    const sortedFiles = useMemo(() => {
+        const pinned = pinnedFileIds
+            .map((id) => files.find((f) => f.id === id))
+            .filter((f): f is FileState => !!f);
+        const pinnedSet = new Set(pinnedFileIds);
+        const unpinned = files.filter((f) => !pinnedSet.has(f.id));
+        return [...pinned, ...unpinned];
+    }, [files, pinnedFileIds]);
+
+    const sortedTerminals = useMemo(() => {
+        const pinned = pinnedTerminalIds
+            .map((id) => terminals.find((t) => t.id === id))
+            .filter((t): t is Terminal => !!t);
+        const pinnedSet = new Set(pinnedTerminalIds);
+        const unpinned = terminals.filter((t) => !pinnedSet.has(t.id));
+        return [...pinned, ...unpinned];
+    }, [terminals, pinnedTerminalIds]);
+
+    const sortedAgentSessions = useMemo(() => {
+        const pinned = pinnedAgentIds
+            .map((id) => agentSessions.find((s) => s.agentId === id))
+            .filter((s): s is AcpSession => !!s);
+        const pinnedSet = new Set(pinnedAgentIds);
+        const unpinned = agentSessions.filter((s) => !pinnedSet.has(s.agentId));
+        return [...pinned, ...unpinned];
+    }, [agentSessions, pinnedAgentIds]);
+
+    // Mass tab closing helper handlers
+    const handleCloseRightFiles = (fileId: string) => {
+        const fileIndexSorted = sortedFiles.findIndex((f) => f.id === fileId);
+        if (fileIndexSorted < 0) return;
+        sortedFiles.slice(fileIndexSorted + 1).forEach((f) => {
+            if (!pinnedFileIds.includes(f.id)) {
+                onCloseFile(f.id);
+            }
+        });
+    };
+
+    const handleCloseAllFiles = () => {
+        files.forEach((f) => {
+            if (!pinnedFileIds.includes(f.id)) {
+                onCloseFile(f.id);
+            }
+        });
+    };
+
+    const handleCloseRightTerminals = (terminalId: string) => {
+        const terminalIndexSorted = sortedTerminals.findIndex((t) => t.id === terminalId);
+        if (terminalIndexSorted < 0) return;
+        const rightTerminals = sortedTerminals.slice(terminalIndexSorted + 1);
+        for (let i = rightTerminals.length - 1; i >= 0; i -= 1) {
+            const t = rightTerminals[i];
+            if (!pinnedTerminalIds.includes(t.id)) {
+                onCloseTerminal(t.id);
+            }
+        }
+    };
+
+    const handleCloseAllTerminals = () => {
+        for (let i = terminals.length - 1; i >= 0; i -= 1) {
+            const t = terminals[i];
+            if (!pinnedTerminalIds.includes(t.id)) {
+                onCloseTerminal(t.id);
+            }
+        }
+    };
+
+    const handleCloseAllAgents = () => {
+        agentSessions.forEach((s) => {
+            if (!pinnedAgentIds.includes(s.agentId)) {
+                onCloseAgent(s.agentId);
+            }
+        });
+    };
+
     const handleTabsWheel = (event: WheelEvent<HTMLDivElement>) => {
         if (event.deltaY === 0) return;
         const tabsElement = event.currentTarget;
@@ -62,24 +182,26 @@ export const Toolbar = ({
             case 'file': {
                 const file = files.find((f) => f.id === tabMenu.targetId);
                 if (!file) return [];
-                const fileIndex = files.findIndex((f) => f.id === file.id);
-                const hasRight = fileIndex >= 0 && files.length > fileIndex + 1;
+                const isPinned = pinnedFileIds.includes(file.id);
+                const fileIndexSorted = sortedFiles.findIndex((f) => f.id === file.id);
+                const hasRight = fileIndexSorted >= 0 && sortedFiles.length > fileIndexSorted + 1;
                 return [
-                    [{ key: 'copy-path', label: 'Copy path', onClick: () => copyText(file.id) }],
+                    [
+                        { key: 'copy-path', label: 'Copy path', onClick: () => copyText(file.id) },
+                        { key: 'pin-file', label: isPinned ? 'Unpin' : 'Pin', onClick: () => togglePinFile(file.id) },
+                    ],
                     [
                         { key: 'close', label: 'Close', onClick: () => onCloseFile(file.id) },
                         {
                             key: 'close-right',
                             label: 'Close right',
                             disabled: !hasRight,
-                            onClick: () => {
-                                files.slice(fileIndex + 1).forEach((f) => onCloseFile(f.id));
-                            },
+                            onClick: () => handleCloseRightFiles(file.id),
                         },
                         {
                             key: 'close-all',
                             label: 'Close all',
-                            onClick: () => files.forEach((f) => onCloseFile(f.id)),
+                            onClick: handleCloseAllFiles,
                         },
                     ],
                 ];
@@ -88,37 +210,34 @@ export const Toolbar = ({
                 const terminalIndex = terminals.findIndex((t) => t.id === tabMenu.targetId);
                 if (terminalIndex < 0) return [];
                 const terminal = terminals[terminalIndex];
-                const hasRight = terminals.length > terminalIndex + 1;
+                const isPinned = pinnedTerminalIds.includes(terminal.id);
+                const terminalIndexSorted = sortedTerminals.findIndex((t) => t.id === terminal.id);
+                const hasRight = sortedTerminals.length > terminalIndexSorted + 1;
                 return [
-                    [{ key: 'copy-terminal-name', label: 'Copy terminal name', onClick: () => copyText(terminal.name) }],
+                    [
+                        { key: 'copy-terminal-name', label: 'Copy terminal name', onClick: () => copyText(terminal.name) },
+                        { key: 'pin-terminal', label: isPinned ? 'Unpin' : 'Pin', onClick: () => togglePinTerminal(terminal.id) },
+                    ],
                     [
                         { key: 'close-terminal', label: 'Close', onClick: () => onCloseTerminal(terminal.id) },
                         {
                             key: 'close-right-terminals',
                             label: 'Close right',
                             disabled: !hasRight,
-                            // Close from the end so indices stay valid
-                            onClick: () => {
-                                for (let i = terminals.length - 1; i > terminalIndex; i -= 1) {
-                                    onCloseTerminal(terminals[i].id);
-                                }
-                            },
+                            onClick: () => handleCloseRightTerminals(terminal.id),
                         },
                         {
                             key: 'close-all-terminals',
                             label: 'Close all',
-                            onClick: () => {
-                                for (let i = terminals.length - 1; i >= 0; i -= 1) {
-                                    onCloseTerminal(terminals[i].id);
-                                }
-                            },
+                            onClick: handleCloseAllTerminals,
                         },
                     ],
                 ];
             }
             case 'agent': {
                 const agent = agentSessions.find((s) => s.agentId === tabMenu.targetId);
                 if (!agent) return [];
+                const isPinned = pinnedAgentIds.includes(agent.agentId);
                 return [
                     [
                         { key: 'copy-agent-id', label: 'Copy agent id', onClick: () => copyText(agent.agentId) },
@@ -127,13 +246,14 @@ export const Toolbar = ({
                             label: 'Copy agent name',
                             onClick: () => copyText(agent.agentName || agent.agentId),
                         },
+                        { key: 'pin-agent', label: isPinned ? 'Unpin' : 'Pin', onClick: () => togglePinAgent(agent.agentId) },
                     ],
                     [
                         { key: 'close-agent', label: 'Close', onClick: () => onCloseAgent(agent.agentId) },
                         {
                             key: 'close-all-agents',
                             label: 'Close all',
-                            onClick: () => agentSessions.forEach((s) => onCloseAgent(s.agentId)),
+                            onClick: handleCloseAllAgents,
                         },
                     ],
                 ];
@@ -144,34 +264,40 @@ export const Toolbar = ({
     return (
         <div className="toolbar">
             <div className="toolbar-tabs" onWheel={handleTabsWheel}>
-                {files.map((file) => (
+                {sortedFiles.map((file) => (
                     <ToolbarTab
                         key={file.id}
                         active={activeFileId === file.id}
                         label={file.name}
                         title={file.id}
+                        pinned={pinnedFileIds.includes(file.id)}
+                        onUnpin={() => togglePinFile(file.id)}
                         onSelect={() => onSelectFile(file.id)}
                         onClose={() => onCloseFile(file.id)}
                         onContextMenu={(event) => openMenu(event, 'file', file.id)}
                     />
                 ))}
-                {terminals.map((terminal) => (
+                {sortedTerminals.map((terminal) => (
                     <ToolbarTab
                         key={`toolbar-terminal-${terminal.id}`}
                         active={activeTerminalId === terminal.id}
                         label={`term:${terminal.name}`}
                         variant="terminal"
+                        pinned={pinnedTerminalIds.includes(terminal.id)}
+                        onUnpin={() => togglePinTerminal(terminal.id)}
                         onSelect={() => onSelectTerminal(terminal.id)}
                         onClose={() => onCloseTerminal(terminal.id)}
                         onContextMenu={(event) => openMenu(event, 'terminal', terminal.id)}
                     />
                 ))}
-                {agentSessions.map((session) => (
+                {sortedAgentSessions.map((session) => (
                     <ToolbarTab
                         key={`toolbar-agent-${session.agentId}`}
                         active={activeAgentId === session.agentId}
                         label={session.agentName || session.agentId}
                         variant="agent"
+                        pinned={pinnedAgentIds.includes(session.agentId)}
+                        onUnpin={() => togglePinAgent(session.agentId)}
                         onSelect={() => onSelectAgent(session.agentId)}
                         onClose={() => onCloseAgent(session.agentId)}
                         onContextMenu={(event) => openMenu(event, 'agent', session.agentId)}