+ // Key includes content length to force re-render when diff updates
+
{
if (!file.diff) return null;
const fileLang = getFileLang(file.path);
+ // Include diff length in key to force re-render when content changes
+ const diffKey = `uncommitted-${file.path}-${file.diff.length}`;
return (
-
+
{file.path}
@@ -312,8 +315,10 @@ const TaskChangesPanel = memo(function TaskChangesPanel({
{committedFiles.map((file) => {
if (!file.diff) return null;
const fileLang = getFileLang(file.path);
+ // Include diff length in key to force re-render when content changes
+ const diffKey = `committed-${file.path}-${file.diff.length}`;
return (
-
+
{file.path}
diff --git a/apps/web/components/task/task-chat-panel.tsx b/apps/web/components/task/task-chat-panel.tsx
index ba74a27ada..6010cbbe64 100644
--- a/apps/web/components/task/task-chat-panel.tsx
+++ b/apps/web/components/task/task-chat-panel.tsx
@@ -46,13 +46,20 @@ export function TaskChatPanel({
const { messages, isLoading: messagesLoading } = useSessionMessages(resolvedSessionId);
// Process messages (filtering, todos, etc.)
- const { allMessages, permissionsByToolCallId, todoItems, agentMessageCount } = useProcessedMessages(
+ const { allMessages, permissionsByToolCallId, todoItems, agentMessageCount, pendingClarification } = useProcessedMessages(
messages,
taskId,
resolvedSessionId,
taskDescription
);
+ // Track clarification resolved state to trigger re-render after submit
+ const [clarificationKey, setClarificationKey] = useState(0);
+ const handleClarificationResolved = useCallback(() => {
+ // Force re-render which will update messages from backend
+ setClarificationKey((k) => k + 1);
+ }, []);
+
// Model management
const { sessionModel, activeModel } = useSessionModel(
resolvedSessionId,
@@ -165,6 +172,7 @@ export function TaskChatPanel({
{todoItems.length > 0 && }
diff --git a/apps/web/hooks/domains/session/use-cumulative-diff.ts b/apps/web/hooks/domains/session/use-cumulative-diff.ts
index 8a65a86cd2..413103d53d 100644
--- a/apps/web/hooks/domains/session/use-cumulative-diff.ts
+++ b/apps/web/hooks/domains/session/use-cumulative-diff.ts
@@ -1,10 +1,21 @@
-import { useEffect, useCallback, useState } from 'react';
+import { useEffect, useCallback, useState, useRef } from 'react';
import { getWebSocketClient } from '@/lib/ws/connection';
import type { CumulativeDiff } from '@/lib/state/slices/session-runtime/types';
// Local state cache for cumulative diffs (not stored in global store since it's on-demand)
const cumulativeDiffCache: Record = {};
const loadingState: Record = {};
+// Version counter to trigger refetch when cache is invalidated
+const cacheVersion: Record = {};
+
+/**
+ * Invalidate the cumulative diff cache for a session.
+ * Call this when git status changes (commits, snapshots, etc.)
+ */
+export function invalidateCumulativeDiffCache(sessionId: string) {
+ delete cumulativeDiffCache[sessionId];
+ cacheVersion[sessionId] = (cacheVersion[sessionId] ?? 0) + 1;
+}
/**
* Hook to fetch cumulative diff for a session.
@@ -18,6 +29,8 @@ export function useCumulativeDiff(sessionId: string | null) {
sessionId ? loadingState[sessionId] ?? false : false
);
const [error, setError] = useState(null);
+ // Track the version we last fetched for
+ const lastFetchedVersionRef = useRef(null);
const fetchCumulativeDiff = useCallback(async () => {
if (!sessionId) return;
@@ -38,6 +51,7 @@ export function useCumulativeDiff(sessionId: string | null) {
if (response?.cumulative_diff) {
cumulativeDiffCache[sessionId] = response.cumulative_diff;
setDiff(response.cumulative_diff);
+ lastFetchedVersionRef.current = cacheVersion[sessionId] ?? 0;
}
} catch (err) {
console.error('Failed to fetch cumulative diff:', err);
@@ -48,21 +62,44 @@ export function useCumulativeDiff(sessionId: string | null) {
}
}, [sessionId]);
- // Fetch on mount if not cached
+ // Fetch on mount if not cached, or refetch if cache was invalidated
useEffect(() => {
- if (sessionId && !diff && !loading) {
+ if (!sessionId) return;
+
+ const currentVersion = cacheVersion[sessionId] ?? 0;
+ const cachedDiff = cumulativeDiffCache[sessionId];
+ const needsFetch = !cachedDiff || lastFetchedVersionRef.current !== currentVersion;
+
+ if (needsFetch && !loading) {
fetchCumulativeDiff();
}
- }, [sessionId, diff, loading, fetchCumulativeDiff]);
+ }, [sessionId, loading, fetchCumulativeDiff]);
+
+ // Poll for cache invalidation (check every 500ms if cache was invalidated)
+ useEffect(() => {
+ if (!sessionId) return;
+
+ const interval = setInterval(() => {
+ const currentVersion = cacheVersion[sessionId] ?? 0;
+ if (lastFetchedVersionRef.current !== currentVersion && !loadingState[sessionId]) {
+ // Cache was invalidated, clear local state to trigger refetch
+ setDiff(null);
+ }
+ }, 500);
+
+ return () => clearInterval(interval);
+ }, [sessionId]);
// Update local state when sessionId changes
useEffect(() => {
if (sessionId) {
setDiff(cumulativeDiffCache[sessionId] ?? null);
setLoading(loadingState[sessionId] ?? false);
+ lastFetchedVersionRef.current = cacheVersion[sessionId] ?? 0;
} else {
setDiff(null);
setLoading(false);
+ lastFetchedVersionRef.current = null;
}
}, [sessionId]);
diff --git a/apps/web/hooks/use-processed-messages.ts b/apps/web/hooks/use-processed-messages.ts
index 271b185767..4796295e70 100644
--- a/apps/web/hooks/use-processed-messages.ts
+++ b/apps/web/hooks/use-processed-messages.ts
@@ -1,5 +1,5 @@
import { useMemo } from 'react';
-import type { Message } from '@/lib/types/http';
+import type { Message, ClarificationRequestMetadata } from '@/lib/types/http';
export function useProcessedMessages(
messages: Message[],
@@ -35,11 +35,36 @@ export function useProcessedMessages(
return map;
}, [messages]);
+ // Find pending clarification request (the most recent one that is still pending)
+ // This will be rendered in the input area, not in the message list
+ const pendingClarification = useMemo(() => {
+ for (let i = messages.length - 1; i >= 0; i--) {
+ const message = messages[i];
+ if (message.type === 'clarification_request') {
+ const metadata = message.metadata as ClarificationRequestMetadata | undefined;
+ // A clarification is pending if it has no status or status is 'pending'
+ if (!metadata?.status || metadata.status === 'pending') {
+ return message;
+ }
+ }
+ }
+ return null;
+ }, [messages]);
+
// Filter to only show chat-relevant types.
// Permission requests are only hidden if they have a matching tool_call in the messages
// (so they can be displayed inline). Standalone permissions are shown as separate messages.
+ // Pending clarification requests are also hidden (shown in input area instead).
const visibleMessages = useMemo(() => {
return messages.filter((message) => {
+ // Hide pending clarification request (it's shown in input area)
+ if (message.type === 'clarification_request') {
+ const metadata = message.metadata as ClarificationRequestMetadata | undefined;
+ const isPending = !metadata?.status || metadata.status === 'pending';
+ // Only show clarification requests that are resolved (not pending)
+ return !isPending;
+ }
+
// Standard visible types
if (
!message.type ||
@@ -112,5 +137,6 @@ export function useProcessedMessages(
permissionsByToolCallId,
todoItems,
agentMessageCount,
+ pendingClarification,
};
}
diff --git a/apps/web/lib/types/http.ts b/apps/web/lib/types/http.ts
index ec94e9dc76..b858ce9b85 100644
--- a/apps/web/lib/types/http.ts
+++ b/apps/web/lib/types/http.ts
@@ -467,6 +467,7 @@ export type MessageType =
| 'thinking'
| 'todo'
| 'permission_request'
+ | 'clarification_request'
| 'script_execution';
export type Message = {
@@ -625,3 +626,40 @@ export type ListAvailableAgentsResponse = {
agents: AvailableAgent[];
total: number;
};
+
+// Clarification request types (for ask_user_question feature)
+export type ClarificationOption = {
+ option_id: string;
+ label: string;
+ description: string;
+};
+
+export type ClarificationQuestion = {
+ id: string;
+ title: string;
+ prompt: string;
+ options: ClarificationOption[];
+};
+
+export type ClarificationRequestMetadata = {
+ pending_id: string;
+ session_id: string;
+ task_id?: string;
+ question: ClarificationQuestion;
+ context?: string;
+ status?: 'pending' | 'answered' | 'rejected' | 'expired';
+ response?: ClarificationAnswer;
+};
+
+export type ClarificationAnswer = {
+ question_id: string;
+ selected_options?: string[];
+ custom_text?: string;
+};
+
+export type ClarificationResponse = {
+ pending_id: string;
+ answers: ClarificationAnswer[];
+ rejected?: boolean;
+ reject_reason?: string;
+};
diff --git a/apps/web/lib/ws/handlers/git-status.ts b/apps/web/lib/ws/handlers/git-status.ts
index 0ffc9ba133..cadd557618 100644
--- a/apps/web/lib/ws/handlers/git-status.ts
+++ b/apps/web/lib/ws/handlers/git-status.ts
@@ -8,6 +8,7 @@ import type {
GitCommitsResetEvent,
GitSnapshotCreatedEvent,
} from '@/lib/types/git-events';
+import { invalidateCumulativeDiffCache } from '@/hooks/domains/session/use-cumulative-diff';
// Handler functions for each event type
type GitEventHandlers = {
@@ -32,6 +33,8 @@ const gitEventHandlers: GitEventHandlers = {
files: event.status.files,
timestamp: event.timestamp,
});
+ // Invalidate cumulative diff cache when files change
+ invalidateCumulativeDiffCache(event.session_id);
},
commit_created: (store, event) => {
@@ -49,11 +52,15 @@ const gitEventHandlers: GitEventHandlers = {
committed_at: event.commit.committed_at,
created_at: event.commit.created_at ?? event.timestamp,
});
+ // Invalidate cumulative diff cache when new commit is created
+ invalidateCumulativeDiffCache(event.session_id);
},
commits_reset: (store, event) => {
// Clear commits to trigger refetch in useSessionCommits hook
store.getState().clearSessionCommits(event.session_id);
+ // Invalidate cumulative diff cache when commits are reset
+ invalidateCumulativeDiffCache(event.session_id);
},
snapshot_created: (store, event) => {
@@ -71,6 +78,8 @@ const gitEventHandlers: GitEventHandlers = {
triggered_by: event.snapshot.triggered_by,
created_at: event.snapshot.created_at,
});
+ // Invalidate cumulative diff cache when snapshot is created
+ invalidateCumulativeDiffCache(event.session_id);
},
};