refactor: extract isInteractiveDesktopDragTarget and add debug logging
This commit is contained in:
@@ -261,6 +261,44 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
|
|||||||
[looseGap, tightGap]
|
[looseGap, tightGap]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// DEBUG: track when render callback deps change
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const debugStreamPrevRef = useRef<Record<string, unknown>>({});
|
||||||
|
useEffect(() => {
|
||||||
|
const prev = debugStreamPrevRef.current;
|
||||||
|
const curr: Record<string, unknown> = {
|
||||||
|
// handleInlinePathPress deps (line 196-205)
|
||||||
|
"hip.agent.cwd": agent.cwd,
|
||||||
|
"hip.openFileExplorer": openFileExplorer,
|
||||||
|
"hip.requestDirectoryListing": requestDirectoryListing,
|
||||||
|
"hip.resolvedServerId": resolvedServerId,
|
||||||
|
"hip.router": router,
|
||||||
|
"hip.setExplorerTabForCheckout": setExplorerTabForCheckout,
|
||||||
|
"hip.onOpenWorkspaceFile": onOpenWorkspaceFile,
|
||||||
|
"hip.workspaceId": workspaceId,
|
||||||
|
// top-level deps
|
||||||
|
handleInlinePathPress,
|
||||||
|
"agent.status": agent.status,
|
||||||
|
streamRenderStrategy,
|
||||||
|
getGapBetween,
|
||||||
|
streamItems,
|
||||||
|
"streamItems.length": streamItems.length,
|
||||||
|
streamHead,
|
||||||
|
baseRenderModel,
|
||||||
|
};
|
||||||
|
const changed: string[] = [];
|
||||||
|
for (const key of Object.keys(curr)) {
|
||||||
|
if (!Object.is(prev[key], curr[key])) {
|
||||||
|
changed.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (changed.length > 0 && Object.keys(prev).length > 0) {
|
||||||
|
console.log("[AgentStreamView] deps changed:", changed.join(", "));
|
||||||
|
}
|
||||||
|
debugStreamPrevRef.current = curr;
|
||||||
|
});
|
||||||
|
|
||||||
const renderStreamItemContent = useCallback(
|
const renderStreamItemContent = useCallback(
|
||||||
(
|
(
|
||||||
item: StreamItem,
|
item: StreamItem,
|
||||||
|
|||||||
@@ -460,6 +460,9 @@ function MobileSidebar({
|
|||||||
<Pressable
|
<Pressable
|
||||||
style={styles.newAgentButton}
|
style={styles.newAgentButton}
|
||||||
testID="sidebar-sessions"
|
testID="sidebar-sessions"
|
||||||
|
accessible
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel="Sessions"
|
||||||
onPress={handleViewMore}
|
onPress={handleViewMore}
|
||||||
>
|
>
|
||||||
{({ hovered }) => (
|
{({ hovered }) => (
|
||||||
@@ -623,6 +626,9 @@ function DesktopSidebar({
|
|||||||
<Pressable
|
<Pressable
|
||||||
style={styles.newAgentButton}
|
style={styles.newAgentButton}
|
||||||
testID="sidebar-sessions"
|
testID="sidebar-sessions"
|
||||||
|
accessible
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel="Sessions"
|
||||||
onPress={handleViewMore}
|
onPress={handleViewMore}
|
||||||
>
|
>
|
||||||
{({ hovered }) => (
|
{({ hovered }) => (
|
||||||
|
|||||||
@@ -759,6 +759,13 @@ export const AssistantMessage = memo(function AssistantMessage({
|
|||||||
workspaceRoot,
|
workspaceRoot,
|
||||||
disableOuterSpacing,
|
disableOuterSpacing,
|
||||||
}: AssistantMessageProps) {
|
}: AssistantMessageProps) {
|
||||||
|
// DEBUG: log when AssistantMessage actually renders (inside memo boundary)
|
||||||
|
console.log("[AssistantMessage] render", {
|
||||||
|
messageLength: message?.length,
|
||||||
|
timestamp,
|
||||||
|
hasOnInlinePathPress: !!onInlinePathPress,
|
||||||
|
});
|
||||||
|
|
||||||
const { theme, rt } = useUnistyles();
|
const { theme, rt } = useUnistyles();
|
||||||
const resolvedDisableOuterSpacing =
|
const resolvedDisableOuterSpacing =
|
||||||
useDisableOuterSpacing(disableOuterSpacing);
|
useDisableOuterSpacing(disableOuterSpacing);
|
||||||
@@ -1918,6 +1925,9 @@ export const ToolCall = memo(function ToolCall({
|
|||||||
onInlineDetailsHoverChange,
|
onInlineDetailsHoverChange,
|
||||||
onInlineDetailsExpandedChange,
|
onInlineDetailsExpandedChange,
|
||||||
}: ToolCallProps) {
|
}: ToolCallProps) {
|
||||||
|
// DEBUG: log when ToolCall actually renders (inside memo boundary)
|
||||||
|
console.log("[ToolCall] render", { toolName, status });
|
||||||
|
|
||||||
const { openToolCall } = useToolCallSheet();
|
const { openToolCall } = useToolCallSheet();
|
||||||
const [isExpanded, setIsExpanded] = useState(false);
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
|
||||||
|
|||||||
@@ -107,14 +107,18 @@ function useAgentPanelDescriptor(
|
|||||||
function AgentPanel() {
|
function AgentPanel() {
|
||||||
const { serverId, target, isPaneFocused, openFileInWorkspace } = usePaneContext();
|
const { serverId, target, isPaneFocused, openFileInWorkspace } = usePaneContext();
|
||||||
invariant(target.kind === "agent", "AgentPanel requires agent target");
|
invariant(target.kind === "agent", "AgentPanel requires agent target");
|
||||||
|
const handleOpenWorkspaceFile = useCallback(
|
||||||
|
(input: { filePath: string }) => {
|
||||||
|
openFileInWorkspace(input.filePath);
|
||||||
|
},
|
||||||
|
[openFileInWorkspace]
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<AgentPanelContent
|
<AgentPanelContent
|
||||||
serverId={serverId}
|
serverId={serverId}
|
||||||
agentId={target.agentId}
|
agentId={target.agentId}
|
||||||
isPaneFocused={isPaneFocused}
|
isPaneFocused={isPaneFocused}
|
||||||
onOpenWorkspaceFile={({ filePath }) => {
|
onOpenWorkspaceFile={handleOpenWorkspaceFile}
|
||||||
openFileInWorkspace(filePath);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -336,6 +340,46 @@ function AgentPanelBody({
|
|||||||
clearOnAgentBlurRef.current = attentionController.clearOnAgentBlur;
|
clearOnAgentBlurRef.current = attentionController.clearOnAgentBlur;
|
||||||
}, [attentionController.clearOnAgentBlur]);
|
}, [attentionController.clearOnAgentBlur]);
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// DEBUG: track which selector values change between renders
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const debugPrevRef = useRef<Record<string, unknown>>({});
|
||||||
|
useEffect(() => {
|
||||||
|
const prev = debugPrevRef.current;
|
||||||
|
const curr: Record<string, unknown> = {
|
||||||
|
agent,
|
||||||
|
"agent?.status": agent?.status,
|
||||||
|
"agent?.cwd": agent?.cwd,
|
||||||
|
"agent?.updatedAt": agent?.updatedAt,
|
||||||
|
"agent?.requiresAttention": agent?.requiresAttention,
|
||||||
|
streamItemsRaw,
|
||||||
|
"streamItems.length": streamItems.length,
|
||||||
|
allPendingPermissions,
|
||||||
|
isInitializingFromMap,
|
||||||
|
historySyncGeneration,
|
||||||
|
hasAppliedAuthoritativeHistory,
|
||||||
|
agentHistorySyncGeneration,
|
||||||
|
hasSession,
|
||||||
|
isPaneFocused,
|
||||||
|
isConnected,
|
||||||
|
};
|
||||||
|
const changed: string[] = [];
|
||||||
|
for (const key of Object.keys(curr)) {
|
||||||
|
if (!Object.is(prev[key], curr[key])) {
|
||||||
|
changed.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (changed.length > 0 && Object.keys(prev).length > 0) {
|
||||||
|
console.log("[AgentPanelBody] values changed:", changed.join(", "), {
|
||||||
|
changed: Object.fromEntries(
|
||||||
|
changed.map((k) => [k, { prev: prev[k], curr: curr[k] }])
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
debugPrevRef.current = curr;
|
||||||
|
});
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
const { style: animatedKeyboardStyle } = useKeyboardShiftStyle({
|
const { style: animatedKeyboardStyle } = useKeyboardShiftStyle({
|
||||||
mode: "translate",
|
mode: "translate",
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
|
||||||
|
import { isInteractiveDesktopDragTarget } from './desktop-window'
|
||||||
|
|
||||||
|
function createTarget(input: { matchesSelector: (selector: string) => boolean }): EventTarget {
|
||||||
|
return {
|
||||||
|
closest: (selector: string) => (input.matchesSelector(selector) ? ({} as Element) : null),
|
||||||
|
} as unknown as EventTarget
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('isInteractiveDesktopDragTarget', () => {
|
||||||
|
it('treats focusable pressables as interactive drag exemptions', () => {
|
||||||
|
const target = createTarget({
|
||||||
|
matchesSelector: (selector) => selector.includes('[tabindex]'),
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(isInteractiveDesktopDragTarget(target)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('treats semantic button targets as interactive drag exemptions', () => {
|
||||||
|
const target = createTarget({
|
||||||
|
matchesSelector: (selector) => selector.includes("[role='button']"),
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(isInteractiveDesktopDragTarget(target)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false for non-interactive targets', () => {
|
||||||
|
const target = createTarget({
|
||||||
|
matchesSelector: () => false,
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(isInteractiveDesktopDragTarget(target)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns false when the target does not support closest()', () => {
|
||||||
|
expect(isInteractiveDesktopDragTarget(null)).toBe(false)
|
||||||
|
expect(isInteractiveDesktopDragTarget({} as EventTarget)).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -31,7 +31,7 @@ const INTERACTIVE_SELECTOR =
|
|||||||
'button, a, input, textarea, select, ' +
|
'button, a, input, textarea, select, ' +
|
||||||
"[role='button'], [role='link'], [role='textbox'], [role='combobox'], " +
|
"[role='button'], [role='link'], [role='textbox'], [role='combobox'], " +
|
||||||
"[role='tab'], [role='switch'], [role='checkbox'], [role='slider'], " +
|
"[role='tab'], [role='switch'], [role='checkbox'], [role='slider'], " +
|
||||||
"[role='menuitem'], [contenteditable='true']"
|
"[role='menuitem'], [tabindex], [contenteditable='true']"
|
||||||
|
|
||||||
const DOUBLE_CLICK_MS = 300
|
const DOUBLE_CLICK_MS = 300
|
||||||
|
|
||||||
@@ -40,6 +40,15 @@ type DesktopDragViewProps = Pick<
|
|||||||
'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel'
|
'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel'
|
||||||
>
|
>
|
||||||
|
|
||||||
|
export function isInteractiveDesktopDragTarget(target: unknown): boolean {
|
||||||
|
const candidate = target as unknown as { closest?: (selector: string) => Element | null } | null
|
||||||
|
if (!candidate || typeof candidate.closest !== 'function') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return Boolean(candidate.closest(INTERACTIVE_SELECTOR))
|
||||||
|
}
|
||||||
|
|
||||||
export function useDesktopDragHandlers(): DesktopDragViewProps {
|
export function useDesktopDragHandlers(): DesktopDragViewProps {
|
||||||
const isDragging = useRef(false)
|
const isDragging = useRef(false)
|
||||||
const lastPointerDownAt = useRef(0)
|
const lastPointerDownAt = useRef(0)
|
||||||
@@ -74,9 +83,7 @@ export function useDesktopDragHandlers(): DesktopDragViewProps {
|
|||||||
onPointerDown: (e: RNPointerEvent) => {
|
onPointerDown: (e: RNPointerEvent) => {
|
||||||
if (e.nativeEvent.button !== 0) return
|
if (e.nativeEvent.button !== 0) return
|
||||||
|
|
||||||
// On web, e.target is a DOM Element (typed as HostInstance in RN)
|
if (isInteractiveDesktopDragTarget(e.target)) return
|
||||||
const target = e.target as unknown as Element
|
|
||||||
if (target.closest?.(INTERACTIVE_SELECTOR)) return
|
|
||||||
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user