fix(panel): navigate and key context injections by group.id (#53)

src/renderer/components/chat/ChatHistory.tsx

@@ -412,32 +412,32 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
     [registerAIGroupRef]
   );
 
-  // Handler to navigate to a specific turn (AI group) from CLAUDE.md panel
+  // Handler to navigate to a specific turn (AI group) by its id from context panel
   const handleNavigateToTurn = useCallback(
-    (turnIndex: number, opts?: { flashHeader?: boolean }) => {
+    (groupId: string, opts?: { flashHeader?: boolean }) => {
       if (!conversation) return;
       const targetItem = conversation.items.find(
-        (item) => item.type === 'ai' && item.group.turnIndex === turnIndex
+        (item) => item.type === 'ai' && item.group.id === groupId
       );
       if (targetItem?.type !== 'ai') return;
 
       const run = async (): Promise<void> => {
-        const groupId = targetItem.group.id;
+        const targetGroupId = targetItem.group.id;
         // navigating to a turn means reading it — expand the collapsed group
-        expandAIGroup(groupId);
+        expandAIGroup(targetGroupId);
         // the header with burn pills must be on screen — align the group top
-        await ensureGroupVisible(groupId, opts?.flashHeader ? 'start' : 'center');
-        const element = aiGroupRefs.current.get(groupId);
+        await ensureGroupVisible(targetGroupId, opts?.flashHeader ? 'start' : 'center');
+        const element = aiGroupRefs.current.get(targetGroupId);
         if (!element) return;
 
         element.scrollIntoView({
           behavior: 'smooth',
           block: opts?.flashHeader ? 'start' : 'center',
         });
-        setHighlightedGroupId(groupId);
+        setHighlightedGroupId(targetGroupId);
         setIsNavigationHighlight(true);
         if (opts?.flashHeader) {
-          setHeaderFlashGroupId(groupId);
+          setHeaderFlashGroupId(targetGroupId);
           if (headerFlashTimerRef.current) clearTimeout(headerFlashTimerRef.current);
           headerFlashTimerRef.current = setTimeout(() => {
             setHeaderFlashGroupId(null);
@@ -458,12 +458,12 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
     [conversation, ensureGroupVisible, expandAIGroup, setHighlightedGroupId]
   );
 
-  // Handler to navigate to a user message group (preceding the AI group at turnIndex)
+  // Handler to navigate to the user message group preceding the AI group with this id
   const handleNavigateToUserGroup = useCallback(
-    (turnIndex: number) => {
+    (groupId: string) => {
       if (!conversation) return;
       const aiItemIndex = conversation.items.findIndex(
-        (item) => item.type === 'ai' && item.group.turnIndex === turnIndex
+        (item) => item.type === 'ai' && item.group.id === groupId
       );
       if (aiItemIndex < 0) return;
 
@@ -472,13 +472,13 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
       if (prevItem?.type !== 'user') return;
 
       const run = async (): Promise<void> => {
-        const groupId = prevItem.group.id;
-        await ensureGroupVisible(groupId);
-        const element = chatItemRefs.current.get(groupId);
+        const targetGroupId = prevItem.group.id;
+        await ensureGroupVisible(targetGroupId);
+        const element = chatItemRefs.current.get(targetGroupId);
         if (!element) return;
 
         element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        setHighlightedGroupId(groupId);
+        setHighlightedGroupId(targetGroupId);
         setIsNavigationHighlight(true);
         if (navigationHighlightTimerRef.current) {
           clearTimeout(navigationHighlightTimerRef.current);
@@ -494,21 +494,21 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
     [conversation, ensureGroupVisible, setHighlightedGroupId]
   );
 
-  // Handler to navigate to a specific tool within a turn from context panel
+  // Handler to navigate to a specific tool within an AI group from context panel
   const handleNavigateToTool = useCallback(
-    (turnIndex: number, toolUseId: string) => {
+    (groupId: string, toolUseId: string) => {
       if (!conversation) return;
       const targetItem = conversation.items.find(
-        (item) => item.type === 'ai' && item.group.turnIndex === turnIndex
+        (item) => item.type === 'ai' && item.group.id === groupId
       );
       if (targetItem?.type !== 'ai') return;
 
       const run = async (): Promise<void> => {
-        const groupId = targetItem.group.id;
-        await ensureGroupVisible(groupId);
+        const targetGroupId = targetItem.group.id;
+        await ensureGroupVisible(targetGroupId);
 
         // Set group + tool highlight immediately
-        setHighlightedGroupId(groupId);
+        setHighlightedGroupId(targetGroupId);
         setIsNavigationHighlight(true);
         setContextNavToolUseId(toolUseId);
 
@@ -522,7 +522,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
         }
 
         // Scroll to tool element, or fall back to AI group
-        const scrollTarget = toolElement ?? aiGroupRefs.current.get(groupId);
+        const scrollTarget = toolElement ?? aiGroupRefs.current.get(targetGroupId);
         if (scrollTarget) {
           scrollTarget.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }

src/renderer/components/chat/SessionContextPanel/DirectoryTree/DirectoryTreeNode.tsx

@@ -8,15 +8,14 @@ import { CopyablePath } from '@renderer/components/common/CopyablePath';
 import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
 import { ChevronRight } from 'lucide-react';
 
-import { formatTokens } from '../utils/formatting';
-import { formatFirstSeen, parseTurnIndex } from '../utils/pathParsing';
+import { formatFirstSeen, formatTokens } from '../utils/formatting';
 
 import type { TreeNode } from './types';
 
 interface DirectoryTreeNodeProps {
   node: TreeNode;
   depth?: number;
-  onNavigateToTurn?: (turnIndex: number) => void;
+  onNavigateToTurn?: (groupId: string) => void;
 }
 
 export const DirectoryTreeNode = ({
@@ -34,8 +33,8 @@ export const DirectoryTreeNode = ({
   });
 
   if (node.isFile) {
-    const turnIndex = node.firstSeenInGroup ? parseTurnIndex(node.firstSeenInGroup) : -1;
-    const isClickable = onNavigateToTurn && turnIndex >= 0;
+    const groupId = node.firstSeenInGroup ?? '';
+    const isClickable = onNavigateToTurn && groupId.length > 0;
 
     return (
       <div
@@ -65,9 +64,9 @@ export const DirectoryTreeNode = ({
                 font: 'inherit',
                 fontSize: '12px',
               }}
-              onClick={() => onNavigateToTurn(turnIndex)}
+              onClick={() => onNavigateToTurn(groupId)}
             >
-              @{formatFirstSeen(node.firstSeenInGroup)}
+              @{formatFirstSeen(node.firstSeenTurnIndex ?? -1)}
             </button>
           ) : (
             <span
@@ -77,7 +76,7 @@ export const DirectoryTreeNode = ({
                 opacity: 0.7,
               }}
             >
-              @{formatFirstSeen(node.firstSeenInGroup)}
+              @{formatFirstSeen(node.firstSeenTurnIndex ?? -1)}
             </span>
           ))}
       </div>

src/renderer/components/chat/SessionContextPanel/DirectoryTree/buildDirectoryTree.ts

@@ -36,6 +36,7 @@ export function buildDirectoryTree(
           isFile: isLast && part === 'CLAUDE.md',
           tokens: isLast ? injection.estimatedTokens : undefined,
           firstSeenInGroup: isLast ? injection.firstSeenInGroup : undefined,
+          firstSeenTurnIndex: isLast ? injection.firstSeenTurnIndex : undefined,
           children: new Map(),
         });
       }

src/renderer/components/chat/SessionContextPanel/DirectoryTree/types.ts

@@ -8,5 +8,6 @@ export interface TreeNode {
   isFile: boolean;
   tokens?: number;
   firstSeenInGroup?: string;
+  firstSeenTurnIndex?: number;
   children: Map<string, TreeNode>;
 }

src/renderer/components/chat/SessionContextPanel/components/ClaudeMdFilesSection.tsx

@@ -18,7 +18,7 @@ interface ClaudeMdFilesSectionProps {
   isExpanded: boolean;
   onToggle: () => void;
   projectRoot: string;
-  onNavigateToTurn?: (turnIndex: number) => void;
+  onNavigateToTurn?: (groupId: string) => void;
 }
 
 export const ClaudeMdFilesSection = ({

src/renderer/components/chat/SessionContextPanel/components/ClaudeMdSection.tsx

@@ -18,7 +18,7 @@ interface ClaudeMdSubSectionProps {
   injections: ClaudeMdContextInjection[];
   isDirectory: boolean;
   projectRoot: string;
-  onNavigateToTurn?: (turnIndex: number) => void;
+  onNavigateToTurn?: (groupId: string) => void;
 }
 
 export const ClaudeMdSubSection = ({

src/renderer/components/chat/SessionContextPanel/components/FlatInjectionList.tsx

@@ -10,7 +10,6 @@ import { CopyButton } from '@renderer/components/common/CopyButton';
 import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
 
 import { formatTokens } from '../utils/formatting';
-import { parseTurnIndex } from '../utils/pathParsing';
 
 import type { ContextInjection } from '@renderer/types/contextInjection';
 
@@ -39,7 +38,7 @@ interface FlatRow {
   label: string;
   description: string;
   tokens: number;
-  turnIndex: number;
+  groupId: string;
   toolUseId?: string;
   isError?: boolean;
   copyPath?: string;
@@ -48,9 +47,9 @@ interface FlatRow {
 
 interface FlatInjectionListProps {
   injections: ContextInjection[];
-  onNavigateToTurn?: (turnIndex: number) => void;
-  onNavigateToTool?: (turnIndex: number, toolUseId: string) => void;
-  onNavigateToUserGroup?: (turnIndex: number) => void;
+  onNavigateToTurn?: (groupId: string) => void;
+  onNavigateToTool?: (groupId: string, toolUseId: string) => void;
+  onNavigateToUserGroup?: (groupId: string) => void;
 }
 
 // =============================================================================
@@ -71,7 +70,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
               label: tool.toolName,
               description: `Turn ${inj.turnIndex + 1}`,
               tokens: tool.tokenCount,
-              turnIndex: inj.turnIndex,
+              groupId: inj.aiGroupId,
               toolUseId: tool.toolUseId,
               isError: tool.isError,
               navigationType: tool.toolUseId ? 'tool' : 'turn',
@@ -84,7 +83,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
             label: `${inj.toolCount} tool${inj.toolCount !== 1 ? 's' : ''}`,
             description: `Turn ${inj.turnIndex + 1}`,
             tokens: inj.estimatedTokens,
-            turnIndex: inj.turnIndex,
+            groupId: inj.aiGroupId,
             navigationType: 'turn',
           });
         }
@@ -98,7 +97,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
             label: item.type === 'thinking' ? 'Thinking' : 'Text',
             description: `Turn ${inj.turnIndex + 1}`,
             tokens: item.tokenCount,
-            turnIndex: inj.turnIndex,
+            groupId: inj.aiGroupId,
             navigationType: 'turn',
           });
         }
@@ -112,7 +111,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
             label: item.toolName ?? item.label,
             description: `Turn ${inj.turnIndex + 1}`,
             tokens: item.tokenCount,
-            turnIndex: inj.turnIndex,
+            groupId: inj.aiGroupId,
             navigationType: 'turn',
           });
         }
@@ -125,7 +124,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
           label: inj.displayName || inj.path,
           description: '',
           tokens: inj.estimatedTokens,
-          turnIndex: parseTurnIndex(inj.firstSeenInGroup),
+          groupId: inj.firstSeenInGroup,
           copyPath: inj.path,
           navigationType: 'turn',
         });
@@ -138,7 +137,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
           label: inj.displayName,
           description: '',
           tokens: inj.estimatedTokens,
-          turnIndex: inj.firstSeenTurnIndex,
+          groupId: inj.firstSeenInGroup,
           copyPath: inj.path,
           navigationType: 'turn',
         });
@@ -152,7 +151,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
             label: `${item.key} ×${item.count}`,
             description: `Turn ${inj.turnIndex + 1}`,
             tokens: item.tokenCount,
-            turnIndex: inj.turnIndex,
+            groupId: inj.aiGroupId,
             toolUseId: item.toolUseId,
             navigationType: item.toolUseId ? 'tool' : 'turn',
           });
@@ -166,7 +165,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
           label: `${inj.roundCount} quiet round${inj.roundCount !== 1 ? 's' : ''}`,
           description: `Turn ${inj.turnIndex + 1}`,
           tokens: inj.estimatedTokens,
-          turnIndex: inj.turnIndex,
+          groupId: inj.aiGroupId,
           navigationType: 'turn',
         });
         break;
@@ -178,7 +177,7 @@ function flattenInjections(injections: ContextInjection[]): FlatRow[] {
           label: inj.textPreview,
           description: '',
           tokens: inj.estimatedTokens,
-          turnIndex: inj.turnIndex,
+          groupId: inj.aiGroupId,
           navigationType: 'user-group',
         });
         break;
@@ -210,13 +209,13 @@ export const FlatInjectionList = ({
         };
 
         const handleClick = (): void => {
-          if (row.turnIndex < 0) return;
+          if (!row.groupId) return;
           if (row.navigationType === 'tool' && row.toolUseId && onNavigateToTool) {
-            onNavigateToTool(row.turnIndex, row.toolUseId);
+            onNavigateToTool(row.groupId, row.toolUseId);
           } else if (row.navigationType === 'user-group' && onNavigateToUserGroup) {
-            onNavigateToUserGroup(row.turnIndex);
+            onNavigateToUserGroup(row.groupId);
           } else if (onNavigateToTurn) {
-            onNavigateToTurn(row.turnIndex);
+            onNavigateToTurn(row.groupId);
           }
         };
 

src/renderer/components/chat/SessionContextPanel/components/LoopSection.tsx

@@ -16,8 +16,8 @@ interface LoopSectionProps {
   tokenCount: number;
   isExpanded: boolean;
   onToggle: () => void;
-  onNavigateToTool?: (turnIndex: number, toolUseId: string) => void;
-  onNavigateToTurn?: (turnIndex: number, opts?: { flashHeader?: boolean }) => void;
+  onNavigateToTool?: (groupId: string, toolUseId: string) => void;
+  onNavigateToTurn?: (groupId: string, opts?: { flashHeader?: boolean }) => void;
 }
 
 export const LoopSection = ({
@@ -76,9 +76,9 @@ export const LoopSection = ({
                   type="button"
                   onClick={() => {
                     if (item.toolUseId && onNavigateToTool) {
-                      onNavigateToTool(injection.turnIndex, item.toolUseId);
+                      onNavigateToTool(injection.aiGroupId, item.toolUseId);
                     } else if (onNavigateToTurn) {
-                      onNavigateToTurn(injection.turnIndex, { flashHeader: true });
+                      onNavigateToTurn(injection.aiGroupId, { flashHeader: true });
                     }
                   }}
                   className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left"

src/renderer/components/chat/SessionContextPanel/components/MentionedFilesSection.tsx

@@ -16,7 +16,7 @@ interface MentionedFilesSectionProps {
   isExpanded: boolean;
   onToggle: () => void;
   projectRoot?: string;
-  onNavigateToTurn?: (turnIndex: number) => void;
+  onNavigateToTurn?: (groupId: string) => void;
 }
 
 export const MentionedFilesSection = ({