@myrialabs/clopen 0.0.8 → 0.1.1

package/frontend/lib/components/chat/tools/AskUserQuestionTool.svelte

@@ -0,0 +1,396 @@
+<script lang="ts">
+	import type { AskUserQuestionToolInput } from '$shared/types/messaging';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import ws from '$frontend/lib/utils/ws';
+	import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
+	import { currentSessionId } from '$frontend/lib/stores/core/sessions.svelte';
+	import { appState, updateSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
+	import { debug } from '$shared/utils/logger';
+
+	const { toolInput }: { toolInput: AskUserQuestionToolInput } = $props();
+
+	// Parse answers from the SDK's $result.content string using known question texts as anchors.
+	// Format: User has answered your questions: "q1"="a1", "q2"="a2", ... . You can now continue...
+	// Regex-based parsing breaks when answers contain quotes or "=", so we use
+	// the known question texts to delimit each answer's boundaries.
+	function parseResultAnswers(content: string, questions: { question: string }[]): Record<string, string> {
+		const answers: Record<string, string> = {};
+
+		// Try JSON parse first (future SDK versions might use JSON)
+		try {
+			const json = JSON.parse(content);
+			if (json?.answers && typeof json.answers === 'object') return json.answers;
+		} catch {
+			// Not JSON — parse human-readable format
+		}
+
+		for (let i = 0; i < questions.length; i++) {
+			const q = questions[i].question;
+			const searchStr = `"${q}"="`;
+			const startIdx = content.indexOf(searchStr);
+			if (startIdx === -1) continue;
+
+			const answerStart = startIdx + searchStr.length;
+
+			// Find the end of this answer:
+			// If there's a next question, use its marker as delimiter.
+			// Otherwise, use the SDK's closing marker.
+			let answerEnd = -1;
+
+			if (i < questions.length - 1) {
+				const nextQ = questions[i + 1].question;
+				const nextMarker = `", "${nextQ}"="`;
+				answerEnd = content.indexOf(nextMarker, answerStart);
+			}
+
+			if (answerEnd === -1) {
+				const endMarker = '". You can now continue';
+				answerEnd = content.indexOf(endMarker, answerStart);
+			}
+
+			answers[q] = answerEnd !== -1
+				? content.slice(answerStart, answerEnd)
+				: content.slice(answerStart);
+		}
+
+		return answers;
+	}
+
+	// Detect whether the tool has a $result (answered or errored)
+	const hasResult = $derived(!!toolInput.$result?.content);
+
+	// Parse per-question answers from the result content
+	let parsedAnswers = $derived.by(() => {
+		if (!toolInput.$result?.content) return {};
+		return parseResultAnswers(toolInput.$result.content, toolInput.input.questions);
+	});
+
+	// Detect error: $result exists but no answers could be parsed (error message instead of answer format)
+	const isError = $derived(hasResult && Object.keys(parsedAnswers).length === 0);
+
+	// Successfully answered: has result and parsed answers exist
+	const isAnswered = $derived(hasResult && !isError);
+
+	// Selection state per question
+	let selections = $state<Record<number, Set<string>>>({});
+	// Custom text input per question (for "Other" option)
+	let customInputs = $state<Record<number, string>>({});
+	// Track whether "Other" is the active selection per question
+	let otherActive = $state<Record<number, boolean>>({});
+	let isSubmitting = $state(false);
+	let hasSubmitted = $state(false);
+
+	// Tool was interrupted — metadata set by chat service when stream ends (error/cancel/complete)
+	const isInterrupted = $derived(!!toolInput.metadata?.interrupted);
+
+	// Initialize selections
+	$effect(() => {
+		if (!toolInput.input.questions) return;
+		const initial: Record<number, Set<string>> = {};
+		const initialCustom: Record<number, string> = {};
+		const initialOther: Record<number, boolean> = {};
+		for (let i = 0; i < toolInput.input.questions.length; i++) {
+			initial[i] = new Set();
+			initialCustom[i] = '';
+			initialOther[i] = false;
+		}
+		selections = initial;
+		customInputs = initialCustom;
+		otherActive = initialOther;
+	});
+
+	// Play notification sound when this tool appears and is not yet answered/errored/interrupted
+	$effect(() => {
+		if (!hasResult && !hasSubmitted && !isInterrupted) {
+			soundNotification.play().catch(() => {});
+			pushNotification.sendChatComplete('Claude is asking you a question. Please respond.').catch(() => {});
+		}
+	});
+
+	function toggleSelection(questionIdx: number, label: string, isMultiSelect: boolean) {
+		const current = selections[questionIdx] || new Set();
+		if (isMultiSelect) {
+			if (current.has(label)) {
+				current.delete(label);
+			} else {
+				current.add(label);
+			}
+		} else {
+			current.clear();
+			current.add(label);
+			// Single-select: deselect Other when picking a regular option
+			otherActive[questionIdx] = false;
+			customInputs[questionIdx] = '';
+		}
+		selections[questionIdx] = new Set(current);
+	}
+
+	function toggleOther(questionIdx: number, isMultiSelect: boolean) {
+		if (isMultiSelect) {
+			otherActive[questionIdx] = !otherActive[questionIdx];
+		} else {
+			selections[questionIdx] = new Set();
+			otherActive[questionIdx] = true;
+		}
+	}
+
+	function isSelected(questionIdx: number, label: string): boolean {
+		return selections[questionIdx]?.has(label) ?? false;
+	}
+
+	async function submitAnswers() {
+		if (isSubmitting || hasSubmitted) return;
+		isSubmitting = true;
+
+		try {
+			const answers: Record<string, string> = {};
+			const questions = toolInput.input.questions;
+
+			for (let i = 0; i < questions.length; i++) {
+				const q = questions[i];
+				const selected = selections[i] || new Set();
+				const customText = customInputs[i]?.trim();
+				const isOther = otherActive[i];
+
+				if (q.multiSelect) {
+					const parts: string[] = Array.from(selected);
+					if (isOther && customText) {
+						parts.push(customText);
+					}
+					answers[q.question] = parts.join(', ');
+				} else {
+					if (isOther && customText) {
+						answers[q.question] = customText;
+					} else if (selected.size > 0) {
+						answers[q.question] = Array.from(selected).join(', ');
+					} else {
+						answers[q.question] = '';
+					}
+				}
+			}
+
+			debug.log('chat', 'Submitting AskUserQuestion answers:', answers);
+
+			ws.emit('chat:ask-user-answer', {
+				chatSessionId: currentSessionId(),
+				toolUseId: toolInput.id,
+				answers
+			});
+
+			// Clear waiting input status — SDK will resume processing
+			const sessId = currentSessionId();
+			if (sessId) updateSessionProcessState(sessId, { isWaitingInput: false });
+			appState.isWaitingInput = false;
+
+			hasSubmitted = true;
+		} catch (error) {
+			debug.error('chat', 'Failed to submit answers:', error);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+</script>
+
+{#if isError || isInterrupted}
+	<!-- Error/interrupted state — show questions as read-only with error indicator -->
+	<div class="space-y-3">
+		{#each toolInput.input.questions as question}
+			<div class="bg-white dark:bg-slate-800 rounded-lg border border-red-200/60 dark:border-red-800/40 p-4 space-y-2.5">
+				<div class="flex items-center gap-2">
+					<Icon name="lucide:circle-x" class="text-red-500 w-4 h-4 shrink-0" />
+					<span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400">
+						{question.header}
+					</span>
+				</div>
+				<p class="text-sm text-slate-500 dark:text-slate-400">{question.question}</p>
+			</div>
+		{/each}
+		{#if isError && toolInput.$result?.content}
+			<p class="text-xs text-red-500 dark:text-red-400">{toolInput.$result.content}</p>
+		{:else}
+			<p class="text-xs text-red-500 dark:text-red-400">Session ended before question was answered</p>
+		{/if}
+	</div>
+
+{:else if isAnswered}
+	<!-- Answered state — each question in its own card -->
+	<div class="space-y-3">
+		{#each toolInput.input.questions as question}
+			<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200/60 dark:border-slate-700/60 p-4 space-y-2.5">
+				<div class="flex items-center gap-2">
+					<Icon name="lucide:circle-check" class="text-green-500 w-4 h-4 shrink-0" />
+					<span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-800/50 text-blue-700 dark:text-blue-300">
+						{question.header}
+					</span>
+				</div>
+				<p class="text-sm font-medium text-slate-700 dark:text-slate-200">{question.question}</p>
+				<p class="text-sm text-green-700 dark:text-green-300 font-medium">
+					{parsedAnswers[question.question] || 'No answer'}
+				</p>
+			</div>
+		{/each}
+	</div>
+
+{:else if hasSubmitted}
+	<!-- Submitted state — each question in its own card with local answer -->
+	<div class="space-y-3">
+		{#each toolInput.input.questions as question, idx}
+			{@const selected = selections[idx] || new Set()}
+			{@const customText = customInputs[idx]?.trim()}
+			{@const isOther = otherActive[idx]}
+			{@const localAnswer = question.multiSelect
+				? [...Array.from(selected), ...(isOther && customText ? [customText] : [])].join(', ')
+				: (isOther && customText ? customText : Array.from(selected).join(', '))
+			}
+			<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200/60 dark:border-slate-700/60 p-4 space-y-2.5">
+				<div class="flex items-center gap-2">
+					<div class="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin shrink-0"></div>
+					<span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-800/50 text-blue-700 dark:text-blue-300">
+						{question.header}
+					</span>
+				</div>
+				<p class="text-sm font-medium text-slate-700 dark:text-slate-200">{question.question}</p>
+				<p class="text-sm text-slate-500 dark:text-slate-400">
+					{localAnswer || 'No answer'}
+				</p>
+			</div>
+		{/each}
+	</div>
+
+{:else}
+	<!-- Interactive form — each question in its own card -->
+	<div class="space-y-3">
+		{#each toolInput.input.questions as question, idx}
+			<div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200/60 dark:border-slate-700/60 p-4 space-y-3">
+				<!-- Question header badge -->
+				<div class="flex items-center gap-2">
+					<Icon name="lucide:message-circle-question-mark" class="text-blue-500 dark:text-blue-400 w-4 h-4 shrink-0" />
+					<span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-800/50 text-blue-700 dark:text-blue-300">
+						{question.header}
+					</span>
+				</div>
+
+				<!-- Question text -->
+				<p class="text-sm font-medium text-slate-700 dark:text-slate-200">{question.question}</p>
+
+				<!-- Options -->
+				<div class="space-y-1.5">
+					{#each question.options as option}
+						<button
+							class="w-full text-left flex items-start gap-3 p-2.5 rounded-md border transition-colors
+								{isSelected(idx, option.label)
+									? 'border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+									: 'border-slate-200 dark:border-slate-700 hover:border-blue-300 dark:hover:border-blue-600 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+								}"
+							onclick={() => toggleSelection(idx, option.label, question.multiSelect)}
+						>
+							<div class="mt-0.5 shrink-0">
+								{#if question.multiSelect}
+									<div class="w-4 h-4 rounded border-2 flex items-center justify-center transition-colors
+										{isSelected(idx, option.label)
+											? 'border-blue-500 bg-blue-500'
+											: 'border-slate-300 dark:border-slate-600'
+										}"
+									>
+										{#if isSelected(idx, option.label)}
+											<Icon name="lucide:check" class="text-white w-3 h-3" />
+										{/if}
+									</div>
+								{:else}
+									<div class="w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors
+										{isSelected(idx, option.label)
+											? 'border-blue-500'
+											: 'border-slate-300 dark:border-slate-600'
+										}"
+									>
+										{#if isSelected(idx, option.label)}
+											<div class="w-2 h-2 rounded-full bg-blue-500"></div>
+										{/if}
+									</div>
+								{/if}
+							</div>
+							<div class="min-w-0">
+								<span class="text-sm font-medium text-slate-800 dark:text-slate-200">{option.label}</span>
+								<span class="text-sm text-slate-500 dark:text-slate-400"> — {option.description}</span>
+							</div>
+						</button>
+					{/each}
+
+					<!-- "Other" custom input option -->
+					<div
+						class="flex items-start gap-3 p-2.5 rounded-md border transition-colors cursor-pointer
+							{otherActive[idx]
+								? 'border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+								: 'border-slate-200 dark:border-slate-700 hover:border-blue-300 dark:hover:border-blue-600 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+							}"
+						onclick={() => toggleOther(idx, question.multiSelect)}
+						role="button"
+						tabindex="-1"
+					>
+						<div class="mt-0.5 shrink-0">
+							{#if question.multiSelect}
+								<div class="w-4 h-4 rounded border-2 flex items-center justify-center transition-colors
+									{otherActive[idx]
+										? 'border-blue-500 bg-blue-500'
+										: 'border-slate-300 dark:border-slate-600'
+									}"
+								>
+									{#if otherActive[idx]}
+										<Icon name="lucide:check" class="text-white w-3 h-3" />
+									{/if}
+								</div>
+							{:else}
+								<div class="w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors
+									{otherActive[idx]
+										? 'border-blue-500'
+										: 'border-slate-300 dark:border-slate-600'
+									}"
+								>
+									{#if otherActive[idx]}
+										<div class="w-2 h-2 rounded-full bg-blue-500"></div>
+									{/if}
+								</div>
+							{/if}
+						</div>
+						<div class="flex-1 min-w-0">
+							<input
+								type="text"
+								placeholder="Other (type your answer)..."
+								class="w-full text-sm bg-transparent border-none outline-none text-slate-700 dark:text-slate-200 placeholder-slate-400"
+								bind:value={customInputs[idx]}
+								onclick={(e) => e.stopPropagation()}
+								onfocus={() => {
+									if (!question.multiSelect) {
+										selections[idx] = new Set();
+									}
+									otherActive[idx] = true;
+								}}
+							/>
+						</div>
+					</div>
+				</div>
+
+				{#if question.multiSelect}
+					<p class="text-xs text-slate-400 dark:text-slate-500 italic">Multiple selections allowed</p>
+				{/if}
+			</div>
+		{/each}
+
+		<!-- Submit button -->
+		<div class="flex justify-end pt-1">
+			<button
+				class="px-4 py-1.5 text-sm font-medium rounded-md transition-colors
+					bg-blue-600 hover:bg-blue-700 text-white
+					disabled:opacity-50 disabled:cursor-not-allowed"
+				onclick={submitAnswers}
+				disabled={isSubmitting}
+			>
+				{#if isSubmitting}
+					Submitting...
+				{:else}
+					Submit Answer
+				{/if}
+			</button>
+		</div>
+	</div>
+{/if}

package/frontend/lib/components/chat/tools/BashTool.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-	import type { BashToolInput, BashOutputToolOutput } from '$shared/types/messaging';
+	import type { BashToolInput } from '$shared/types/messaging';
 	import { TerminalCommand } from './components';
 	import CodeBlock from './components/CodeBlock.svelte';
 
+	/** Parsed background bash output (from XML-formatted BashOutput tool result) */
+	interface ParsedBashOutput {
+		status: 'running' | 'completed' | 'failed';
+		output: string;
+	}
+
 	const { toolInput }: { toolInput: BashToolInput } = $props();
 
 	const command = toolInput.input.command || '';
@@ -10,13 +16,12 @@
 	const timeout = toolInput.input.timeout;
 	const isBackground = toolInput.input.run_in_background;
 
-	function parseBashOutputToolOutput(content: string): BashOutputToolOutput {
+	function parseBashOutputToolOutput(content: string): ParsedBashOutput {
 		const statusMatch = content.match(/<status>(.*?)<\/status>/);
 		const stdoutMatch = content.match(/<stdout>(.*?)<\/stdout>/s);
-		const timestampMatch = content.match(/<timestamp>(.*?)<\/timestamp>/);
 
 		return {
-			status: statusMatch ? statusMatch[1] as BashOutputToolOutput['status'] : 'completed',
+			status: statusMatch ? statusMatch[1] as ParsedBashOutput['status'] : 'completed',
 			output: stdoutMatch ? stdoutMatch[1].trim() : ""
 		};
 	}

package/frontend/lib/components/chat/tools/EnterPlanModeTool.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { EnterPlanModeToolInput } from '$shared/types/messaging';
+	import { InfoLine } from './components';
+	import TextMessage from '../formatters/TextMessage.svelte';
+
+	const { toolInput }: { toolInput: EnterPlanModeToolInput } = $props();
+</script>
+
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="flex gap-3">
+		<InfoLine icon="lucide:map" text="Entering plan mode" />
+	</div>
+</div>
+
+<!-- Tool Result -->
+{#if toolInput.$result}
+	<div class="mt-4">
+		{#if typeof toolInput.$result.content === 'string'}
+			<TextMessage content={toolInput.$result.content} />
+		{:else}
+			<TextMessage content={JSON.stringify(toolInput.$result.content)} />
+		{/if}
+	</div>
+{/if}

package/frontend/lib/components/chat/tools/ExitPlanModeTool.svelte

@@ -8,21 +8,18 @@
 	const plan = (toolInput.input as any).plan as string || '';
 </script>
 
-<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3 mb-4">
 	<!-- Plan Info -->
-	<div class="flex gap-3 mb-2">
+	<div class="flex gap-3 mb-2.5">
 		<InfoLine icon="lucide:map" text="Exiting plan mode with proposed plan" />
 	</div>
 	
-	<!-- Plan Content -->
-	<div class="border-t border-slate-200 dark:border-slate-700 pt-3">
-		<CodeBlock code={plan} type="neutral" label="Plan" />
-	</div>
+	<CodeBlock code={plan} type="neutral" />
 </div>
 
 <!-- Tool Result -->
 {#if toolInput.$result}
-	<div class="mt-4 bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+	<div class="">
 		{#if typeof toolInput.$result.content === 'string'}
 			<TextMessage content={toolInput.$result.content} />
 		{:else}

package/frontend/lib/components/chat/tools/{KillShellTool.svelte → TaskStopTool.svelte}

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { KillShellToolInput } from '$shared/types/messaging';
+	import type { TaskStopToolInput } from '$shared/types/messaging';
 	import { InfoLine } from './components';
 	import TextMessage from '../formatters/TextMessage.svelte';
 
-	const { toolInput }: { toolInput: KillShellToolInput } = $props();
-	
-	const shellId = toolInput.input.shell_id;
+	const { toolInput }: { toolInput: TaskStopToolInput } = $props();
+
+	const taskId = toolInput.input.task_id || toolInput.input.shell_id || 'unknown';
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
 	<div class="flex gap-3">
-		<InfoLine icon="lucide:circle-x" text="Terminating shell process: {shellId}" />
+		<InfoLine icon="lucide:circle-x" text="Stopping task: {taskId}" />
 	</div>
 </div>
 
@@ -23,4 +23,4 @@
 			<TextMessage content={JSON.stringify(toolInput.$result.content)} />
 		{/if}
 	</div>
-{/if}
+{/if}

package/frontend/lib/components/chat/tools/index.ts

@@ -2,19 +2,22 @@
 export { default as BashTool } from './BashTool.svelte';
 export { default as BashOutputTool } from './BashOutputTool.svelte';
 export { default as EditTool } from './EditTool.svelte';
+export { default as EnterPlanModeTool } from './EnterPlanModeTool.svelte';
 export { default as ExitPlanModeTool } from './ExitPlanModeTool.svelte';
 export { default as GlobTool } from './GlobTool.svelte';
 export { default as GrepTool } from './GrepTool.svelte';
-export { default as KillShellTool } from './KillShellTool.svelte';
+export { default as TaskStopTool } from './TaskStopTool.svelte';
 export { default as ListMcpResourcesTool } from './ListMcpResourcesTool.svelte';
 export { default as NotebookEditTool } from './NotebookEditTool.svelte';
 export { default as ReadTool } from './ReadTool.svelte';
 export { default as ReadMcpResourceTool } from './ReadMcpResourceTool.svelte';
+export { default as AgentTool } from './AgentTool.svelte';
 export { default as TaskTool } from './TaskTool.svelte';
 export { default as TodoWriteTool } from './TodoWriteTool.svelte';
 export { default as WebFetchTool } from './WebFetchTool.svelte';
 export { default as WebSearchTool } from './WebSearchTool.svelte';
 export { default as WriteTool } from './WriteTool.svelte';
+export { default as AskUserQuestionTool } from './AskUserQuestionTool.svelte';
 
 // Custom MCP Tools
 export { default as CustomMcpTool } from './CustomMcpTool.svelte';
@@ -23,4 +26,4 @@ export { default as CustomMcpTool } from './CustomMcpTool.svelte';
 export * from './components';
 
 // Shared utilities
-export * from '../shared';
+export * from '../shared';

package/frontend/lib/components/checkpoint/TimelineModal.svelte

@@ -291,8 +291,13 @@
 					</div>
 				{:else if appState.isLoading}
 					<div class="flex items-center gap-2 px-3 py-1.5 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
-						<Icon name="lucide:loader" class="w-3 h-3 text-amber-600 dark:text-amber-400 animate-spin" />
-						<span class="text-xs text-amber-600 dark:text-amber-400">Chat in progress...</span>
+						{#if appState.isWaitingInput}
+							<Icon name="lucide:message-circle-question-mark" class="w-3 h-3 text-amber-600 dark:text-amber-400" />
+							<span class="text-xs text-amber-600 dark:text-amber-400">Waiting for input...</span>
+						{:else}
+							<Icon name="lucide:loader" class="w-3 h-3 text-amber-600 dark:text-amber-400 animate-spin" />
+							<span class="text-xs text-amber-600 dark:text-amber-400">Chat in progress...</span>
+						{/if}
 					</div>
 				{/if}
 			</div>

package/frontend/lib/components/history/HistoryModal.svelte

@@ -12,6 +12,7 @@
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+	import { getSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	interface Props {
@@ -473,7 +474,7 @@
 								<Icon name="lucide:message-square" class="text-violet-600 dark:text-violet-400 w-4 h-4" />
 								{#if streaming}
 									<span
-										class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 bg-emerald-500"
+										class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {getSessionProcessState(session.id).isWaitingInput ? 'bg-amber-500' : 'bg-emerald-500'}"
 									></span>
 								{:else}
 									<span
@@ -511,10 +512,17 @@
 									{/if}
 								</div>
 								{#if streaming}
-								<p class="text-xs text-violet-500 dark:text-violet-400 mt-0.5 flex items-center gap-1.5">
-									<span class="inline-block w-3 h-3 border-2 border-violet-400 border-t-transparent rounded-full animate-spin shrink-0"></span>
-									Processing...
-								</p>
+								{#if getSessionProcessState(session.id).isWaitingInput}
+									<p class="text-xs text-amber-500 dark:text-amber-400 mt-0.5 flex items-center gap-1.5">
+										<Icon name="lucide:message-circle-question-mark" class="w-3 h-3 shrink-0" />
+										Waiting for input...
+									</p>
+								{:else}
+									<p class="text-xs text-violet-500 dark:text-violet-400 mt-0.5 flex items-center gap-1.5">
+										<span class="inline-block w-3 h-3 border-2 border-violet-400 border-t-transparent rounded-full animate-spin shrink-0"></span>
+										Processing...
+									</p>
+								{/if}
 							{:else}
 								<p class="text-xs text-slate-400 dark:text-slate-500 truncate mt-0.5">
 									{getSessionSummary(session.id)}

package/frontend/lib/components/workspace/DesktopNavigator.svelte

@@ -17,6 +17,7 @@
 	import TunnelModal from '$frontend/lib/components/tunnel/TunnelModal.svelte';
 	import ProjectUserAvatars from '$frontend/lib/components/common/ProjectUserAvatars.svelte';
 	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
+	import { getSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
 	import ws from '$frontend/lib/utils/ws';
 
 	// State
@@ -121,7 +122,7 @@
 		const hasActiveForSession = status.streams.some(
 			(s: any) => s.status === 'active' && s.chatSessionId === currentChatSessionId
 		);
-		if (hasActiveForSession) return 'bg-emerald-500';
+		if (hasActiveForSession) return currentChatSessionId && getSessionProcessState(currentChatSessionId).isWaitingInput ? 'bg-amber-500' : 'bg-emerald-500';
 		return 'bg-slate-500/30';
 	}
 

package/frontend/lib/components/workspace/MobileNavigator.svelte

@@ -18,6 +18,7 @@
 	import FolderBrowser from '$frontend/lib/components/common/FolderBrowser.svelte';
 	import ProjectUserAvatars from '$frontend/lib/components/common/ProjectUserAvatars.svelte';
 	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
+	import { getSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
 	import ws from '$frontend/lib/utils/ws';
 	import { debug } from '$shared/utils/logger';
 
@@ -77,7 +78,7 @@
 		const hasActiveForSession = status.streams.some(
 			(s: any) => s.status === 'active' && s.chatSessionId === currentChatSessionId
 		);
-		if (hasActiveForSession) return 'bg-emerald-500';
+		if (hasActiveForSession) return currentChatSessionId && getSessionProcessState(currentChatSessionId).isWaitingInput ? 'bg-amber-500' : 'bg-emerald-500';
 		return 'bg-slate-500/30';
 	}