{/* Header Row */}
{hasToggleContent && (
@@ -413,6 +422,17 @@ const AIChatGroupInner = ({
Claude
+ {/* Turn number — matches the Visible Context panel's 1-based "Turn N" */}
+
+ Turn {aiGroup.turnIndex + 1}
+
+
{/* Main agent model */}
{enhanced.mainModel && (
@@ -450,7 +470,14 @@ const AIChatGroupInner = ({
{/* Right side: Context badge, Token usage, Timestamp (non-clickable) */}
-
+
+ {/* Burn pills: this turn's loop/wait-loop waste */}
+ {contextStats && }
+
{/* Context injection badge (CLAUDE.md, mentioned files, tool outputs) */}
{contextStats && }
@@ -509,6 +536,7 @@ const AIChatGroupInner = ({
highlightColor={highlightColor}
notificationColorMap={notificationColorMap}
registerToolRef={registerToolRef}
+ roundFlags={contextStats?.roundFlags}
/>
)}
@@ -527,3 +555,45 @@ const AIChatGroupInner = ({
};
export const AIChatGroup = React.memo(AIChatGroupInner);
+
+/** Red waste pills for this turn: Wait-loop quiet-round re-read + Loop repeats. */
+const BurnPills = ({ stats }: Readonly<{ stats: ContextStats }>): React.ReactElement | null => {
+ let waitTokens = 0;
+ let waitRounds = 0;
+ let loopTokens = 0;
+ for (const inj of stats.newInjections) {
+ if (inj.category === 'wait-loop') {
+ waitTokens += inj.estimatedTokens;
+ waitRounds += inj.roundCount;
+ } else if (inj.category === 'loop') {
+ loopTokens += inj.estimatedTokens;
+ }
+ }
+ if (waitTokens === 0 && loopTokens === 0) return null;
+
+ const pillStyle: React.CSSProperties = {
+ backgroundColor: 'rgba(239, 68, 68, 0.15)',
+ color: '#f87171',
+ };
+
+ return (
+
+ {waitTokens > 0 && (
+
+ Wait {formatTokensCompact(waitTokens)} · {waitRounds} rd
+
+ )}
+ {loopTokens > 0 && (
+
+ Loop {formatTokensCompact(loopTokens)}
+
+ )}
+
+ );
+};
diff --git a/src/renderer/components/chat/ChatHistory.tsx b/src/renderer/components/chat/ChatHistory.tsx
index 33159f14..6dabf465 100644
--- a/src/renderer/components/chat/ChatHistory.tsx
+++ b/src/renderer/components/chat/ChatHistory.tsx
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isGroupHeaderAlarm } from '@renderer/hooks/navigation/utils';
import { isNearBottom, useAutoScrollBottom } from '@renderer/hooks/useAutoScrollBottom';
import { useTabNavigationController } from '@renderer/hooks/useTabNavigationController';
import { useTabUI } from '@renderer/hooks/useTabUI';
@@ -173,6 +174,10 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
const [isNavigationHighlight, setIsNavigationHighlight] = useState(false);
const navigationHighlightTimerRef = useRef
| null>(null);
+ // Red header flash (aggregate burn pills) — Loop/Wait-loop panel navigation
+ const [headerFlashGroupId, setHeaderFlashGroupId] = useState(null);
+ const headerFlashTimerRef = useRef | null>(null);
+
// Refs map for AI groups, chat items, and individual tool items (for scrolling)
const aiGroupRefs = useRef>(new Map());
const chatItemRefs = useRef>(new Map());
@@ -212,7 +217,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
});
const ensureGroupVisible = useCallback(
- async (groupId: string) => {
+ async (groupId: string, align: 'start' | 'center' | 'end' | 'auto' = 'center') => {
if (!shouldVirtualize) {
return;
}
@@ -220,7 +225,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
if (index === undefined) {
return;
}
- rowVirtualizer.scrollToIndex(index, { align: 'center' });
+ rowVirtualizer.scrollToIndex(index, { align });
// Wait 2 RAF frames so the virtualizer has time to render the target row
await waitForDoubleRaf();
},
@@ -261,10 +266,34 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
// Local tool highlight for context panel navigation (separate from controller)
const [contextNavToolUseId, setContextNavToolUseId] = useState(null);
+ // Red body target: Wait/Loop entries keep the whole turn tinted until the
+ // next such navigation (unlike the 2s header flash)
+ const [bodyHighlightGroupId, setBodyHighlightGroupId] = useState(null);
const effectiveHighlightToolUseId = controllerToolUseId ?? contextNavToolUseId ?? undefined;
// Use blue for context panel tool navigation, otherwise use controller's color
const effectiveHighlightColor = contextNavToolUseId ? ('blue' as const) : highlightColor;
+ // Red alarm on the turn header: 2s panel flash or persistent loop-notification
+ // alarm (red group navigation without a tool target)
+ const isHeaderHighlightedFor = (groupId: string): boolean =>
+ headerFlashGroupId === groupId ||
+ isGroupHeaderAlarm(groupId, {
+ highlightedGroupId,
+ highlightColor,
+ highlightToolUseId: effectiveHighlightToolUseId,
+ });
+
+ // Red body: the whole turn's stream stays tinted while it remains the red
+ // group navigation target (Wait/Loop entries) — not a flash, clears when
+ // another navigation lands
+ const isBodyHighlightedFor = (groupId: string): boolean =>
+ bodyHighlightGroupId === groupId ||
+ isGroupHeaderAlarm(groupId, {
+ highlightedGroupId,
+ highlightColor,
+ highlightToolUseId: effectiveHighlightToolUseId,
+ });
+
// Keep search match indices aligned with this tab's rendered conversation.
// This avoids stale/global match lists after tab switches or in-place refreshes.
useEffect(() => {
@@ -401,7 +430,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
// Handler to navigate to a specific turn (AI group) from CLAUDE.md panel
const handleNavigateToTurn = useCallback(
- (turnIndex: number) => {
+ (turnIndex: number, opts?: { flashHeader?: boolean }) => {
if (!conversation) return;
const targetItem = conversation.items.find(
(item) => item.type === 'ai' && item.group.turnIndex === turnIndex
@@ -410,13 +439,28 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
const run = async (): Promise => {
const groupId = targetItem.group.id;
- await ensureGroupVisible(groupId);
+ // navigating to a turn means reading it — expand the collapsed group
+ expandAIGroup(groupId);
+ // 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);
if (!element) return;
- element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ element.scrollIntoView({
+ behavior: 'smooth',
+ block: opts?.flashHeader ? 'start' : 'center',
+ });
setHighlightedGroupId(groupId);
setIsNavigationHighlight(true);
+ if (opts?.flashHeader) {
+ setBodyHighlightGroupId(groupId);
+ setHeaderFlashGroupId(groupId);
+ if (headerFlashTimerRef.current) clearTimeout(headerFlashTimerRef.current);
+ headerFlashTimerRef.current = setTimeout(() => {
+ setHeaderFlashGroupId(null);
+ headerFlashTimerRef.current = null;
+ }, 2000);
+ }
if (navigationHighlightTimerRef.current) {
clearTimeout(navigationHighlightTimerRef.current);
}
@@ -428,7 +472,7 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
};
void run();
},
- [conversation, ensureGroupVisible, setHighlightedGroupId]
+ [conversation, ensureGroupVisible, expandAIGroup, setHighlightedGroupId]
);
// Handler to navigate to a user message group (preceding the AI group at turnIndex)
@@ -817,6 +861,8 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
isSearchHighlight={isSearchHighlight}
isNavigationHighlight={isNavigationHighlight}
highlightColor={effectiveHighlightColor}
+ isHeaderHighlighted={isHeaderHighlightedFor(item.group.id)}
+ isBodyHighlighted={isBodyHighlightedFor(item.group.id)}
registerChatItemRef={registerChatItemRef}
registerAIGroupRef={registerAIGroupRefCombined}
registerToolRef={registerToolRef}
@@ -835,6 +881,8 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
isSearchHighlight={isSearchHighlight}
isNavigationHighlight={isNavigationHighlight}
highlightColor={effectiveHighlightColor}
+ isHeaderHighlighted={isHeaderHighlightedFor(item.group.id)}
+ isBodyHighlighted={isBodyHighlightedFor(item.group.id)}
registerChatItemRef={registerChatItemRef}
registerAIGroupRef={registerAIGroupRefCombined}
registerToolRef={registerToolRef}
diff --git a/src/renderer/components/chat/ChatHistoryItem.tsx b/src/renderer/components/chat/ChatHistoryItem.tsx
index 77733ca3..f848ce83 100644
--- a/src/renderer/components/chat/ChatHistoryItem.tsx
+++ b/src/renderer/components/chat/ChatHistoryItem.tsx
@@ -21,6 +21,9 @@ interface ChatHistoryItemProps {
readonly isSearchHighlight: boolean;
readonly isNavigationHighlight: boolean;
readonly highlightColor?: TriggerColor;
+ /** Red alarm on the AI group header (burn pills): 2s panel flash or persistent loop alarm */
+ readonly isHeaderHighlighted?: boolean;
+ readonly isBodyHighlighted?: boolean;
readonly registerChatItemRef: (groupId: string) => (el: HTMLElement | null) => void;
readonly registerAIGroupRef: (groupId: string) => (el: HTMLElement | null) => void;
/** Register ref for individual tool items (for precise scroll targeting) */
@@ -54,6 +57,8 @@ const ChatHistoryItemInner = ({
isSearchHighlight,
isNavigationHighlight,
highlightColor,
+ isHeaderHighlighted,
+ isBodyHighlighted,
registerChatItemRef,
registerAIGroupRef,
registerToolRef,
@@ -117,6 +122,8 @@ const ChatHistoryItemInner = ({
aiGroup={item.group}
highlightToolUseId={toolUseIdForGroup}
highlightColor={highlightColor}
+ isHeaderHighlighted={isHeaderHighlighted}
+ isBodyHighlighted={isBodyHighlighted}
registerToolRef={registerToolRef}
/>
diff --git a/src/renderer/components/chat/ContextBadge.tsx b/src/renderer/components/chat/ContextBadge.tsx
index 2b4d5991..f133dced 100644
--- a/src/renderer/components/chat/ContextBadge.tsx
+++ b/src/renderer/components/chat/ContextBadge.tsx
@@ -25,11 +25,13 @@ import type {
ClaudeMdContextInjection,
ContextInjection,
ContextStats,
+ LoopInjection,
MentionedFileInjection,
TaskCoordinationInjection,
ThinkingTextInjection,
ToolOutputInjection,
UserMessageInjection,
+ WaitLoopInjection,
} from '@renderer/types/contextInjection';
interface ContextBadgeProps {
@@ -79,6 +81,20 @@ function isUserMessageInjection(inj: ContextInjection): inj is UserMessageInject
return inj.category === 'user-message';
}
+/**
+ * Type guard for LoopInjection.
+ */
+function isLoopInjection(inj: ContextInjection): inj is LoopInjection {
+ return inj.category === 'loop';
+}
+
+/**
+ * Type guard for WaitLoopInjection.
+ */
+function isWaitLoopInjection(inj: ContextInjection): inj is WaitLoopInjection {
+ return inj.category === 'wait-loop';
+}
+
/**
* Section component for expandable groups in the popover.
*/
@@ -148,7 +164,9 @@ export const ContextBadge = ({
stats.newCounts.toolOutputs +
stats.newCounts.thinkingText +
stats.newCounts.taskCoordination +
- stats.newCounts.userMessages,
+ stats.newCounts.userMessages +
+ stats.newCounts.loop +
+ stats.newCounts.waitLoop,
[stats.newCounts]
);
@@ -183,6 +201,16 @@ export const ContextBadge = ({
[stats.newInjections]
);
+ const newLoopInjections = useMemo(
+ () => stats.newInjections.filter(isLoopInjection),
+ [stats.newInjections]
+ );
+
+ const newWaitLoopInjections = useMemo(
+ () => stats.newInjections.filter(isWaitLoopInjection),
+ [stats.newInjections]
+ );
+
// Calculate total new tokens
const totalNewTokens = useMemo(
() => stats.newInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
@@ -231,6 +259,26 @@ export const ContextBadge = ({
[newUserMessageInjections]
);
+ const loopTokens = useMemo(
+ () => newLoopInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+ [newLoopInjections]
+ );
+
+ const loopItemCount = useMemo(
+ () => newLoopInjections.reduce((sum, inj) => sum + inj.breakdown.length, 0),
+ [newLoopInjections]
+ );
+
+ const waitLoopTokens = useMemo(
+ () => newWaitLoopInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+ [newWaitLoopInjections]
+ );
+
+ const waitLoopRoundCount = useMemo(
+ () => newWaitLoopInjections.reduce((sum, inj) => sum + inj.roundCount, 0),
+ [newWaitLoopInjections]
+ );
+
// Linear-style neutral badge — uses theme-aware CSS variables
const badgeStyle: React.CSSProperties = {
backgroundColor: COLOR_SURFACE_RAISED,
@@ -531,6 +579,47 @@ export const ContextBadge = ({
)}
+ {/* Loop section */}
+ {newLoopInjections.length > 0 && (
+
+ {newLoopInjections.map((injection) =>
+ injection.breakdown.map((item) => (
+
+
+ {item.key} ×{item.count}
+
+
+ ~{formatTokens(item.tokenCount)} tokens
+
+
+ ))
+ )}
+
+ )}
+
+ {/* Wait-loop section */}
+ {newWaitLoopInjections.length > 0 && (
+
+ {newWaitLoopInjections.map((injection) => (
+
+
+ Turn {injection.turnIndex + 1} · {injection.roundCount} quiet rounds
+
+
+ ~{formatTokens(injection.estimatedTokens)} tokens
+
+
+ ))}
+
+ )}
+
{/* Thinking + Text section */}
{newThinkingTextInjections.length > 0 && (
;
/** Optional callback to register tool element refs for scroll targeting */
registerToolRef?: (toolId: string, el: HTMLDivElement | null) => void;
+ /** Per-round flags (quiet/repeat/billed) keyed by response uuid — drives round dividers */
+ roundFlags?: Map;
}
/**
@@ -70,6 +73,7 @@ export const DisplayItemList = React.memo(function DisplayItemList({
highlightColor,
notificationColorMap,
registerToolRef,
+ roundFlags,
}: Readonly): React.JSX.Element {
// Reply-link highlight: when hovering a reply badge, dim everything except the linked pair
const [replyLinkToolId, setReplyLinkToolId] = useState(null);
@@ -95,9 +99,52 @@ export const DisplayItemList = React.memo(function DisplayItemList({
);
}
+ // Round dividers: the first item of each round (roundId) emits a divider
+ // chip between line segments — red for burn rounds (quiet/repeat/stall),
+ // neutral for normal rounds. Precomputed once per render — no render-time mutation.
+ const roundDividers = new Map();
+ for (const item of items) {
+ const rid = 'roundId' in item ? (item.roundId ?? null) : null;
+ if (!rid || roundDividers.has(rid)) continue;
+ const flag = roundFlags?.get(rid);
+ if (!flag) continue;
+ const isBurn = flag.quiet || flag.repeat || flag.stalled;
+ const label = flag.quiet
+ ? `R${flag.index} · quiet · ${formatTokensCompact(flag.billed)}`
+ : flag.repeat
+ ? `R${flag.index} · repeat`
+ : flag.stalled
+ ? `R${flag.index} · stall · ${formatTokensCompact(flag.billed)}`
+ : `R${flag.index}`;
+ roundDividers.set(
+ rid,
+
+ );
+ }
+
return (
{items.map((item, index) => {
+ const rid = 'roundId' in item ? (item.roundId ?? null) : null;
+ const divider = rid ? (roundDividers.get(rid) ?? null) : null;
let itemKey = '';
let element: React.ReactNode = null;
@@ -326,16 +373,18 @@ export const DisplayItemList = React.memo(function DisplayItemList({
// Apply reply-link spotlight: dim items not in the highlighted pair
const isDimmed = replyLinkToolId !== null && !isItemInReplyLink(item);
return (
-
- {element}
-
+
+ {divider}
+
+ {element}
+
+
);
})}
+
+
+
+ {isOpen &&
+ keyRounds.map((round) => (
+
+ R{round.index}
+ repeat
+ {round.billed.toLocaleString()} tok
+
+ ))}
+
+ );
+ })
+ )}
+
+ );
+};
diff --git a/src/renderer/components/chat/SessionContextPanel/components/RankedInjectionList.tsx b/src/renderer/components/chat/SessionContextPanel/components/RankedInjectionList.tsx
index c7666541..4408aeab 100644
--- a/src/renderer/components/chat/SessionContextPanel/components/RankedInjectionList.tsx
+++ b/src/renderer/components/chat/SessionContextPanel/components/RankedInjectionList.tsx
@@ -28,6 +28,8 @@ const CATEGORY_COLORS: Record void;
+ onNavigateToTurn?: (turnIndex: number, opts?: { flashHeader?: boolean }) => void;
+}
+
+export const WaitLoopSection = ({
+ injections,
+ tokenCount,
+ isExpanded,
+ onToggle,
+ onNavigateToTurn,
+}: Readonly): React.ReactElement | null => {
+ const [expandedIds, setExpandedIds] = useState>(new Set());
+
+ const toggleExpanded = (id: string): void => {
+ setExpandedIds((prev) => {
+ const next = new Set(prev);
+ if (next.has(id)) {
+ next.delete(id);
+ } else {
+ next.add(id);
+ }
+ return next;
+ });
+ };
+
+ if (injections.length === 0) return null;
+
+ return (
+
+ {injections.map((injection) => {
+ const isOpen = expandedIds.has(injection.id);
+ return (
+
+
+
+
+
+ {isOpen &&
+ injection.rounds.map((round) => (
+
+ R{round.index}
+ quiet
+ out {round.outputTokens.toLocaleString()}
+ {round.billed.toLocaleString()} tok
+
+ ))}
+
+ );
+ })}
+
+ );
+};
diff --git a/src/renderer/components/chat/SessionContextPanel/index.tsx b/src/renderer/components/chat/SessionContextPanel/index.tsx
index 19f8cc79..569aee76 100644
--- a/src/renderer/components/chat/SessionContextPanel/index.tsx
+++ b/src/renderer/components/chat/SessionContextPanel/index.tsx
@@ -14,6 +14,7 @@ import {
import { ClaudeMdFilesSection } from './components/ClaudeMdFilesSection';
import { FlatInjectionList } from './components/FlatInjectionList';
+import { LoopSection } from './components/LoopSection';
import { MentionedFilesSection } from './components/MentionedFilesSection';
import { RankedInjectionList } from './components/RankedInjectionList';
import { SessionContextHeader } from './components/SessionContextHeader';
@@ -21,23 +22,28 @@ import { TaskCoordinationSection } from './components/TaskCoordinationSection';
import { ThinkingTextSection } from './components/ThinkingTextSection';
import { ToolOutputsSection } from './components/ToolOutputsSection';
import { UserMessagesSection } from './components/UserMessagesSection';
+import { WaitLoopSection } from './components/WaitLoopSection';
import {
SECTION_CLAUDE_MD,
+ SECTION_LOOP,
SECTION_MENTIONED_FILES,
SECTION_TASK_COORDINATION,
SECTION_THINKING_TEXT,
SECTION_TOOL_OUTPUTS,
SECTION_USER_MESSAGES,
+ SECTION_WAIT_LOOP,
} from './types';
import type { ContextViewMode, SectionType, SessionContextPanelProps } from './types';
import type {
ClaudeMdContextInjection,
+ LoopInjection,
MentionedFileInjection,
TaskCoordinationInjection,
ThinkingTextInjection,
ToolOutputInjection,
UserMessageInjection,
+ WaitLoopInjection,
} from '@renderer/types/contextInjection';
export const SessionContextPanel = ({
@@ -66,6 +72,8 @@ export const SessionContextPanel = ({
SECTION_TOOL_OUTPUTS,
SECTION_TASK_COORDINATION,
SECTION_THINKING_TEXT,
+ SECTION_LOOP,
+ SECTION_WAIT_LOOP,
])
);
@@ -77,6 +85,8 @@ export const SessionContextPanel = ({
thinkingTextInjections,
taskCoordinationInjections,
userMessageInjections,
+ loopInjections,
+ waitLoopInjections,
} = useMemo(() => {
const claudeMd: ClaudeMdContextInjection[] = [];
const mentionedFiles: MentionedFileInjection[] = [];
@@ -84,6 +94,8 @@ export const SessionContextPanel = ({
const thinkingText: ThinkingTextInjection[] = [];
const taskCoordination: TaskCoordinationInjection[] = [];
const userMessages: UserMessageInjection[] = [];
+ const loop: LoopInjection[] = [];
+ const waitLoop: WaitLoopInjection[] = [];
for (const injection of injections) {
switch (injection.category) {
@@ -105,6 +117,12 @@ export const SessionContextPanel = ({
case 'user-message':
userMessages.push(injection);
break;
+ case 'loop':
+ loop.push(injection);
+ break;
+ case 'wait-loop':
+ waitLoop.push(injection);
+ break;
}
}
@@ -117,6 +135,9 @@ export const SessionContextPanel = ({
thinkingText.sort((a, b) => a.turnIndex - b.turnIndex);
// Sort user messages by turn index ascending
userMessages.sort((a, b) => a.turnIndex - b.turnIndex);
+ // Loops and wait-loops: biggest burn first
+ loop.sort((a, b) => b.estimatedTokens - a.estimatedTokens);
+ waitLoop.sort((a, b) => b.estimatedTokens - a.estimatedTokens);
return {
claudeMdInjections: claudeMd,
@@ -125,6 +146,8 @@ export const SessionContextPanel = ({
thinkingTextInjections: thinkingText,
taskCoordinationInjections: taskCoordination,
userMessageInjections: userMessages,
+ loopInjections: loop,
+ waitLoopInjections: waitLoop,
};
}, [injections]);
@@ -165,6 +188,16 @@ export const SessionContextPanel = ({
[userMessageInjections]
);
+ const loopTokens = useMemo(
+ () => loopInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+ [loopInjections]
+ );
+
+ const waitLoopTokens = useMemo(
+ () => waitLoopInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+ [waitLoopInjections]
+ );
+
// Toggle section expansion
const toggleSection = (section: SectionType): void => {
setExpandedSections((prev) => {
@@ -258,6 +291,23 @@ export const SessionContextPanel = ({
onToggle={() => toggleSection(SECTION_THINKING_TEXT)}
onNavigateToTurn={onNavigateToTurn}
/>
+
+ toggleSection(SECTION_LOOP)}
+ onNavigateToTool={onNavigateToTool}
+ onNavigateToTurn={onNavigateToTurn}
+ />
+
+ toggleSection(SECTION_WAIT_LOOP)}
+ onNavigateToTurn={onNavigateToTurn}
+ />
) : (
<>
diff --git a/src/renderer/components/chat/SessionContextPanel/types.ts b/src/renderer/components/chat/SessionContextPanel/types.ts
index b5222683..f6a2dc02 100644
--- a/src/renderer/components/chat/SessionContextPanel/types.ts
+++ b/src/renderer/components/chat/SessionContextPanel/types.ts
@@ -16,8 +16,8 @@ export interface SessionContextPanelProps {
onClose?: () => void;
/** Project root for relative path display */
projectRoot?: string;
- /** Click Turn N to navigate to that turn */
- onNavigateToTurn?: (turnIndex: number) => void;
+ /** Click Turn N to navigate to that turn; flashHeader lights the group header (burn pills) */
+ onNavigateToTurn?: (turnIndex: number, opts?: { flashHeader?: boolean }) => void;
/** Navigate to a specific tool within a turn by toolUseId */
onNavigateToTool?: (turnIndex: number, toolUseId: string) => void;
/** Navigate to the user message group preceding the AI group at turnIndex */
@@ -43,6 +43,8 @@ export const SECTION_TOOL_OUTPUTS = 'tool-outputs' as const;
export const SECTION_THINKING_TEXT = 'thinking-text' as const;
export const SECTION_TASK_COORDINATION = 'task-coordination' as const;
export const SECTION_USER_MESSAGES = 'user-messages' as const;
+export const SECTION_LOOP = 'loop' as const;
+export const SECTION_WAIT_LOOP = 'wait-loop' as const;
/** Section identifiers for collapsible panels */
export type SectionType =
@@ -51,7 +53,9 @@ export type SectionType =
| typeof SECTION_TOOL_OUTPUTS
| typeof SECTION_THINKING_TEXT
| typeof SECTION_TASK_COORDINATION
- | typeof SECTION_USER_MESSAGES;
+ | typeof SECTION_USER_MESSAGES
+ | typeof SECTION_LOOP
+ | typeof SECTION_WAIT_LOOP;
/** View mode for the context panel */
export type ContextViewMode = 'category' | 'ranked';
diff --git a/src/renderer/components/common/TokenUsageDisplay.tsx b/src/renderer/components/common/TokenUsageDisplay.tsx
index 5ad96066..070afc27 100644
--- a/src/renderer/components/common/TokenUsageDisplay.tsx
+++ b/src/renderer/components/common/TokenUsageDisplay.tsx
@@ -83,6 +83,8 @@ const SessionContextSection = ({
const toolOutputsCount = counts.toolOutputs;
const taskCoordinationCount = counts.taskCoordination;
const userMessagesCount = counts.userMessages;
+ const loopCount = counts.loop;
+ const waitLoopCount = counts.waitLoop;
// Calculate percentages for each category
const claudeMdPercent =
@@ -107,6 +109,12 @@ const SessionContextSection = ({
totalTokens > 0
? Math.min((tokensByCategory.userMessages / totalTokens) * 100, 100).toFixed(1)
: '0.0';
+ const loopPercent =
+ totalTokens > 0 ? Math.min((tokensByCategory.loop / totalTokens) * 100, 100).toFixed(1) : '0.0';
+ const waitLoopPercent =
+ totalTokens > 0
+ ? Math.min((tokensByCategory.waitLoop / totalTokens) * 100, 100).toFixed(1)
+ : '0.0';
return (
@@ -195,6 +203,32 @@ const SessionContextSection = ({
)}
+ {/* Loop (repeat calls) */}
+ {tokensByCategory.loop > 0 && (
+
+
+ Loop ×{loopCount}
+
+
+ {formatTokens(tokensByCategory.loop)}{' '}
+ ({loopPercent}%)
+
+
+ )}
+
+ {/* Wait-loop (quiet rounds) */}
+ {tokensByCategory.waitLoop > 0 && (
+
+
+ Wait-loop ×{waitLoopCount}
+
+
+ {formatTokens(tokensByCategory.waitLoop)}{' '}
+ ({waitLoopPercent}%)
+
+
+ )}
+
{/* User Messages */}
{tokensByCategory.userMessages > 0 && (
diff --git a/src/renderer/components/dashboard/DashboardView.tsx b/src/renderer/components/dashboard/DashboardView.tsx
index a427bb54..7fb9f205 100644
--- a/src/renderer/components/dashboard/DashboardView.tsx
+++ b/src/renderer/components/dashboard/DashboardView.tsx
@@ -13,6 +13,7 @@ import { api } from '@renderer/api';
import { useStore } from '@renderer/store';
import { formatShortcut } from '@renderer/utils/stringUtils';
import { createLogger } from '@shared/utils/logger';
+import { formatTokensCompact } from '@shared/utils/tokenFormatting';
import { useShallow } from 'zustand/react/shallow';
const logger = createLogger('Component:DashboardView');
@@ -76,7 +77,11 @@ const CommandSearch = ({ value, onChange }: Readonly): React
);
@@ -261,15 +310,25 @@ const ProjectsGrid = ({
searchQuery,
maxProjects = 12,
}: Readonly): React.JSX.Element => {
- const { repositoryGroups, repositoryGroupsLoading, fetchRepositoryGroups, selectRepository } =
- useStore(
- useShallow((s) => ({
- repositoryGroups: s.repositoryGroups,
- repositoryGroupsLoading: s.repositoryGroupsLoading,
- fetchRepositoryGroups: s.fetchRepositoryGroups,
- selectRepository: s.selectRepository,
- }))
- );
+ const {
+ repositoryGroups,
+ repositoryGroupsLoading,
+ repositorySpend,
+ repositoryTurns,
+ repositoryLastName,
+ fetchRepositoryGroups,
+ selectRepository,
+ } = useStore(
+ useShallow((s) => ({
+ repositoryGroups: s.repositoryGroups,
+ repositoryGroupsLoading: s.repositoryGroupsLoading,
+ repositorySpend: s.repositorySpend,
+ repositoryTurns: s.repositoryTurns,
+ repositoryLastName: s.repositoryLastName,
+ fetchRepositoryGroups: s.fetchRepositoryGroups,
+ selectRepository: s.selectRepository,
+ }))
+ );
useEffect(() => {
if (repositoryGroups.length === 0) {
@@ -380,6 +439,9 @@ const ProjectsGrid = ({
selectRepository(repo.id)}
isHighlighted={!!searchQuery.trim()}
/>
diff --git a/src/renderer/components/settings/SettingsView.tsx b/src/renderer/components/settings/SettingsView.tsx
index ee4f0400..4c63c1d6 100644
--- a/src/renderer/components/settings/SettingsView.tsx
+++ b/src/renderer/components/settings/SettingsView.tsx
@@ -143,6 +143,8 @@ export const SettingsView = (): React.JSX.Element | null => {
ignoredRepositoryItems={ignoredRepositoryItems}
excludedRepositoryIds={excludedRepositoryIds}
onNotificationToggle={handlers.handleNotificationToggle}
+ onLoopDetectionChange={handlers.handleLoopDetectionChange}
+ onTurnBudgetChange={handlers.handleTurnBudgetChange}
onSnooze={handlers.handleSnooze}
onClearSnooze={handlers.handleClearSnooze}
onAddIgnoredRepository={handlers.handleAddIgnoredRepository}
diff --git a/src/renderer/components/settings/hooks/useSettingsConfig.ts b/src/renderer/components/settings/hooks/useSettingsConfig.ts
index 192346ae..730a8098 100644
--- a/src/renderer/components/settings/hooks/useSettingsConfig.ts
+++ b/src/renderer/components/settings/hooks/useSettingsConfig.ts
@@ -42,6 +42,8 @@ export interface SafeConfig {
snoozeMinutes: number;
includeSubagentErrors: boolean;
triggers: AppConfig['notifications']['triggers'];
+ loopDetection: { enabled: boolean; cycleThreshold: number };
+ turnBudget: { enabled: boolean; maxInputTokensPerTurn: number };
};
display: {
showTimestamps: boolean;
@@ -168,6 +170,15 @@ export function useSettingsConfig(): UseSettingsConfigReturn {
snoozeMinutes: displayConfig?.notifications?.snoozeMinutes ?? 30,
includeSubagentErrors: displayConfig?.notifications?.includeSubagentErrors ?? true,
triggers: displayConfig?.notifications?.triggers ?? [],
+ loopDetection: {
+ enabled: displayConfig?.notifications?.loopDetection?.enabled ?? true,
+ cycleThreshold: displayConfig?.notifications?.loopDetection?.cycleThreshold ?? 4,
+ },
+ turnBudget: {
+ enabled: displayConfig?.notifications?.turnBudget?.enabled ?? true,
+ maxInputTokensPerTurn:
+ displayConfig?.notifications?.turnBudget?.maxInputTokensPerTurn ?? 15_000_000,
+ },
},
display: {
showTimestamps: displayConfig?.display?.showTimestamps ?? true,
diff --git a/src/renderer/components/settings/hooks/useSettingsHandlers.ts b/src/renderer/components/settings/hooks/useSettingsHandlers.ts
index 617e2c45..ec10c929 100644
--- a/src/renderer/components/settings/hooks/useSettingsHandlers.ts
+++ b/src/renderer/components/settings/hooks/useSettingsHandlers.ts
@@ -34,6 +34,8 @@ interface SettingsHandlers {
// Notification handlers
handleNotificationToggle: (key: keyof AppConfig['notifications'], value: boolean) => void;
+ handleLoopDetectionChange: (value: { enabled: boolean; cycleThreshold: number }) => void;
+ handleTurnBudgetChange: (value: { enabled: boolean; maxInputTokensPerTurn: number }) => void;
handleSnooze: (minutes: number) => Promise;
handleClearSnooze: () => Promise;
handleAddIgnoredRepository: (item: RepositoryDropdownItem) => Promise;
@@ -96,6 +98,22 @@ export function useSettingsHandlers({
[updateConfig]
);
+ // Loop detection: nested config field — merge with the current subobject
+ const handleLoopDetectionChange = useCallback(
+ (value: { enabled: boolean; cycleThreshold: number }) => {
+ void updateConfig('notifications', { loopDetection: value });
+ },
+ [updateConfig]
+ );
+
+ // Turn budget: nested config field, read by the PreToolUse hook directly
+ const handleTurnBudgetChange = useCallback(
+ (value: { enabled: boolean; maxInputTokensPerTurn: number }) => {
+ void updateConfig('notifications', { turnBudget: value });
+ },
+ [updateConfig]
+ );
+
const handleSnooze = useCallback(
async (minutes: number) => {
try {
@@ -280,6 +298,8 @@ export function useSettingsHandlers({
snoozeMinutes: 30,
includeSubagentErrors: true,
triggers: defaultTriggers,
+ loopDetection: { enabled: true, cycleThreshold: 4 },
+ turnBudget: { enabled: true, maxInputTokensPerTurn: 15_000_000 },
},
general: {
launchAtLogin: false,
@@ -377,6 +397,8 @@ export function useSettingsHandlers({
handleThemeChange,
handleDefaultTabChange,
handleNotificationToggle,
+ handleLoopDetectionChange,
+ handleTurnBudgetChange,
handleSnooze,
handleClearSnooze,
handleAddIgnoredRepository,
diff --git a/src/renderer/components/settings/sections/NotificationsSection.tsx b/src/renderer/components/settings/sections/NotificationsSection.tsx
index 5a3829b5..996e526e 100644
--- a/src/renderer/components/settings/sections/NotificationsSection.tsx
+++ b/src/renderer/components/settings/sections/NotificationsSection.tsx
@@ -33,6 +33,8 @@ interface NotificationsSectionProps {
key: 'enabled' | 'soundEnabled' | 'includeSubagentErrors',
value: boolean
) => void;
+ readonly onLoopDetectionChange: (value: { enabled: boolean; cycleThreshold: number }) => void;
+ readonly onTurnBudgetChange: (value: { enabled: boolean; maxInputTokensPerTurn: number }) => void;
readonly onSnooze: (minutes: number) => Promise;
readonly onClearSnooze: () => Promise;
readonly onAddIgnoredRepository: (item: RepositoryDropdownItem) => Promise;
@@ -52,6 +54,8 @@ export const NotificationsSection = ({
ignoredRepositoryItems,
excludedRepositoryIds,
onNotificationToggle,
+ onLoopDetectionChange,
+ onTurnBudgetChange,
onSnooze,
onClearSnooze,
onAddIgnoredRepository,
@@ -100,6 +104,94 @@ export const NotificationsSection = ({
disabled={saving || !safeConfig.notifications.enabled}
/>
+
+ {/* Live loop detection */}
+
+
+
+ onLoopDetectionChange({
+ ...safeConfig.notifications.loopDetection,
+ enabled: v,
+ })
+ }
+ disabled={saving || !safeConfig.notifications.enabled}
+ />
+
+
+
+
+ {safeConfig.notifications.loopDetection.cycleThreshold}×
+
+ {
+ const n = parseInt(e.target.value, 10);
+ if (Number.isInteger(n) && n >= 1) {
+ onLoopDetectionChange({
+ ...safeConfig.notifications.loopDetection,
+ cycleThreshold: n,
+ });
+ }
+ }}
+ disabled={saving || !safeConfig.notifications.loopDetection.enabled}
+ className="w-20 rounded-md border border-claude-dark-border bg-surface px-2 py-1 text-sm text-claude-dark-text"
+ />
+
+
+
+ {/* Per-turn input budget (PreToolUse hook) */}
+
+
+
+ onTurnBudgetChange({
+ ...safeConfig.notifications.turnBudget,
+ enabled: v,
+ })
+ }
+ disabled={saving || !safeConfig.notifications.enabled}
+ />
+
+
+
+ {
+ const n = parseInt(e.target.value, 10);
+ if (Number.isInteger(n) && n >= 100000) {
+ onTurnBudgetChange({
+ ...safeConfig.notifications.turnBudget,
+ maxInputTokensPerTurn: n,
+ });
+ }
+ }}
+ disabled={saving || !safeConfig.notifications.turnBudget.enabled}
+ className="w-32 rounded-md border border-claude-dark-border bg-surface px-2 py-1 text-sm text-claude-dark-text"
+ />
+
+
+
- {session.firstMessage ?? 'Untitled'}
+ {session.name ?? session.firstMessage ?? 'Untitled'}
- {/* Second line: message count + time + context consumption */}
+ {/* Second line: messages · turns · spend · time · context · worktree — units as text, icon-only metrics proved unreadable */}
diff --git a/src/renderer/hooks/navigation/utils.ts b/src/renderer/hooks/navigation/utils.ts
index c5ce035f..69e860e2 100644
--- a/src/renderer/hooks/navigation/utils.ts
+++ b/src/renderer/hooks/navigation/utils.ts
@@ -6,6 +6,25 @@
*/
import type { ChatItem } from '@renderer/types/groups';
+import type { TriggerColor } from '@shared/constants/triggerColors';
+
+/**
+ * Header-level alarm policy: a red error-kind navigation WITHOUT a tool
+ * target (e.g. a loop-notification deep link) is a group-level defect —
+ * light the turn header (where the burn pills live), not one tool card.
+ */
+export function isGroupHeaderAlarm(
+ groupId: string,
+ nav: {
+ highlightedGroupId: string | null;
+ highlightColor?: TriggerColor | null;
+ highlightToolUseId?: string | null;
+ }
+): boolean {
+ return (
+ nav.highlightedGroupId === groupId && nav.highlightColor === 'red' && !nav.highlightToolUseId
+ );
+}
// =============================================================================
// Target Resolution
diff --git a/src/renderer/hooks/useTabNavigationController.ts b/src/renderer/hooks/useTabNavigationController.ts
index 65274fea..72adbf2e 100644
--- a/src/renderer/hooks/useTabNavigationController.ts
+++ b/src/renderer/hooks/useTabNavigationController.ts
@@ -38,6 +38,15 @@ import type { SessionConversation } from '@renderer/types/groups';
import type { TabNavigationRequest } from '@renderer/types/tabs';
import type { TriggerColor } from '@shared/constants/triggerColors';
+/**
+ * Error navigation highlights are alarm state, not a flash: they persist
+ * until the detection itself is revoked or another navigation replaces them.
+ * Search (and other kinds) keep the auto-clear flash.
+ */
+export function isPersistentHighlight(kind: TabNavigationRequest['kind']): boolean {
+ return kind === 'error';
+}
+
// =============================================================================
// Types
// =============================================================================
@@ -392,18 +401,26 @@ export function useTabNavigationController(
if (abortController.signal.aborted) return;
if (success) {
- // Schedule highlight end
- highlightTimerRef.current = setTimeout(() => {
- if (!abortController.signal.aborted) {
- // Clear search state if it was a search navigation
- if (request.kind === 'search') {
- setSearchQuery('');
+ if (isPersistentHighlight(request.kind)) {
+ // Alarm semantics: keep the highlight until the detection is
+ // revoked or another navigation replaces it. Return to idle so
+ // auto-scroll keeps working in live sessions.
+ setPhase('idle');
+ activeRequestIdRef.current = null;
+ } else {
+ // Schedule highlight end
+ highlightTimerRef.current = setTimeout(() => {
+ if (!abortController.signal.aborted) {
+ // Clear search state if it was a search navigation
+ if (request.kind === 'search') {
+ setSearchQuery('');
+ }
+ handleHighlightEnd();
}
- handleHighlightEnd();
- }
- }, highlightDuration);
+ }, highlightDuration);
- setPhase('complete');
+ setPhase('complete');
+ }
} else {
// Navigation failed - reset
setPhase('idle');
diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts
index d40ddd31..2e057bd2 100644
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -122,6 +122,12 @@ export function initializeNotificationListeners(): () => void {
const timer = setTimeout(() => {
pendingProjectRefreshTimers.delete(projectId);
const state = useStore.getState();
+ // Repo-wide sidebar: refresh the merged all-worktrees list in place —
+ // the single-worktree refresh would drop the other worktrees' sessions
+ if (state.selectedRepositoryId) {
+ void state.refreshRepositorySessionsInPlace();
+ return;
+ }
void state.refreshSessionsInPlace(projectId);
}, PROJECT_REFRESH_DEBOUNCE_MS);
pendingProjectRefreshTimers.set(projectId, timer);
diff --git a/src/renderer/store/slices/notificationSlice.ts b/src/renderer/store/slices/notificationSlice.ts
index 320c71a7..1556bb62 100644
--- a/src/renderer/store/slices/notificationSlice.ts
+++ b/src/renderer/store/slices/notificationSlice.ts
@@ -211,7 +211,8 @@ export const createNotificationSlice: StateCreator
