feat: handle Elicitation and ElicitationResult hook events (#223)

Parses [Elicitation Hook] and [ElicitationResult Hook] from Claude Code stderr, emits claude:elicitation and claude:elicitation-result Tauri events, and renders an ElicitationModal for MCP server input requests.
2026-03-20 09:21:32 -07:00
parent 8220ab6b85
commit efdc7af58a
8 changed files with 569 additions and 6 deletions
@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { get } from "svelte/store";
+  import { claudeStore, hasElicitationPending } from "$lib/stores/claude";
+  import { characterState } from "$lib/stores/character";
+  import type { ElicitationEvent } from "$lib/types/messages";
+  import { updateDiscordRpc, setSkipNextGreeting } from "$lib/tauri";
+  import { conversationsStore } from "$lib/stores/conversations";
+  import { configStore } from "$lib/stores/config";
+
+  let isVisible = $state(false);
+  let elicitation: ElicitationEvent | null = $state(null);
+  let response = $state("");
+  let grantedToolsList: string[] = $state([]);
+  let workingDirectory = $state("");
+
+  hasElicitationPending.subscribe((pending) => {
+    isVisible = pending;
+    if (!pending) {
+      response = "";
+    }
+  });
+
+  claudeStore.pendingElicitation.subscribe((e) => {
+    elicitation = e;
+    if (e) {
+      characterState.setState("permission");
+    }
+  });
+
+  claudeStore.grantedTools.subscribe((tools) => {
+    grantedToolsList = Array.from(tools);
+  });
+
+  claudeStore.currentWorkingDirectory.subscribe((dir) => {
+    workingDirectory = dir;
+  });
+
+  async function handleSubmitAndReconnect() {
+    if (!elicitation || !response.trim()) return;
+
+    const conversationId = get(claudeStore.activeConversationId);
+    if (!conversationId) return;
+
+    const responseText = response.trim();
+    const elicitationMessage = elicitation.message;
+    const conversationHistory = claudeStore.getConversationHistory();
+
+    claudeStore.addLine("system", `MCP response submitted. Reconnecting with context...`);
+    claudeStore.clearElicitation();
+
+    try {
+      setSkipNextGreeting(true);
+
+      await invoke("stop_claude", { conversationId });
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      const config = configStore.getConfig();
+      await invoke("start_claude", {
+        conversationId,
+        options: {
+          working_dir: workingDirectory || "/home/naomi",
+          model: config.model || null,
+          api_key: config.api_key || null,
+          custom_instructions: config.custom_instructions || null,
+          mcp_servers_json: config.mcp_servers_json || null,
+          allowed_tools: grantedToolsList,
+          use_worktree: config.use_worktree ?? false,
+          disable_1m_context: config.disable_1m_context ?? false,
+          include_git_instructions: config.include_git_instructions ?? true,
+          enable_claudeai_mcp_servers: config.enable_claudeai_mcp_servers ?? true,
+          auto_memory_directory: config.auto_memory_directory || null,
+          model_overrides: config.model_overrides || null,
+        },
+      });
+
+      const activeConversation = get(conversationsStore.activeConversation);
+      if (activeConversation) {
+        await updateDiscordRpc(
+          activeConversation.name,
+          config.model || "claude",
+          activeConversation.startedAt
+        );
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      if (conversationHistory) {
+        const contextMessage = `[CONTEXT RESTORATION]
+I just responded to an MCP server elicitation request. Here's our conversation so far:
+
+${conversationHistory}
+
+The MCP server asked: "${elicitationMessage}"
+My response: "${responseText}"
+
+Please continue where we left off, taking my response into account.`;
+
+        await invoke("send_prompt", {
+          conversationId,
+          message: contextMessage,
+        });
+      }
+
+      characterState.setTemporaryState("success", 2000);
+    } catch (error) {
+      console.error("Failed to reconnect:", error);
+      claudeStore.addLine("error", `Reconnect failed: ${error}`);
+      characterState.setTemporaryState("error", 3000);
+    }
+  }
+
+  function handleDismiss() {
+    claudeStore.clearElicitation();
+    claudeStore.addLine("system", "MCP elicitation dismissed");
+    characterState.setTemporaryState("idle", 1000);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isVisible || !elicitation) return;
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      handleDismiss();
+    }
+  }
+
+  function canSubmit(): boolean {
+    return response.trim().length > 0;
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isVisible && elicitation}
+  <div
+    class="elicitation-overlay fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm"
+  >
+    <div
+      class="elicitation-modal bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl"
+    >
+      <div class="flex items-center gap-3 mb-4">
+        <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
+          <span class="text-xl">💬</span>
+        </div>
+        <div>
+          <h2 class="text-lg font-semibold text-[var(--text-primary)]">MCP Server Request</h2>
+          {#if elicitation.server_name}
+            <p class="text-sm text-[var(--text-secondary)]">from: {elicitation.server_name}</p>
+          {:else}
+            <p class="text-sm text-[var(--text-secondary)]">Input required from MCP server</p>
+          {/if}
+        </div>
+      </div>
+
+      <div class="mb-4">
+        <p class="text-[var(--text-primary)]">{elicitation.message}</p>
+      </div>
+
+      <div class="mb-4">
+        <textarea
+          bind:value={response}
+          placeholder="Type your response here..."
+          class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-secondary)] resize-none focus:outline-none focus:border-[var(--accent-primary)]"
+          rows="4"
+        ></textarea>
+      </div>
+
+      <div class="flex gap-3">
+        <button
+          onclick={handleDismiss}
+          class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-[var(--text-secondary)] rounded-lg transition-colors font-medium"
+        >
+          Dismiss
+        </button>
+        <button
+          onclick={handleSubmitAndReconnect}
+          disabled={!canSubmit()}
+          class="flex-1 px-4 py-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Submit & Reconnect
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
@@ -22,6 +22,7 @@ export const claudeStore = {
  terminalLines: conversationsStore.terminalLines,
  pendingPermission: conversationsStore.pendingPermission,
  pendingQuestion: conversationsStore.pendingQuestion,
+  pendingElicitation: conversationsStore.pendingElicitation,
  isProcessing: conversationsStore.isProcessing,
  grantedTools: conversationsStore.grantedTools,
  pendingRetryMessage: conversationsStore.pendingRetryMessage,
@@ -57,6 +58,10 @@ export const claudeStore = {
  clearQuestion: conversationsStore.clearQuestion,
  requestQuestionForConversation: conversationsStore.requestQuestionForConversation,
  clearQuestionForConversation: conversationsStore.clearQuestionForConversation,
+  requestElicitation: conversationsStore.requestElicitation,
+  clearElicitation: conversationsStore.clearElicitation,
+  requestElicitationForConversation: conversationsStore.requestElicitationForConversation,
+  clearElicitationForConversation: conversationsStore.clearElicitationForConversation,
  grantTool: conversationsStore.grantTool,
  revokeAllTools: conversationsStore.revokeAllTools,
  isToolGranted: conversationsStore.isToolGranted,
@@ -126,6 +131,12 @@ export const hasQuestionPending = derived(
  ($conversation) => $conversation?.pendingQuestion !== null
 );

+export const hasElicitationPending = derived(
+  claudeStore.activeConversation,
+  ($conversation) =>
+    $conversation?.pendingElicitation !== null && $conversation?.pendingElicitation !== undefined
+);
+
 // Derived store to check if Claude is currently processing (can be interrupted)
 export const isClaudeProcessing = derived(
  [claudeStore.connectionStatus, characterState],
@@ -2,6 +2,7 @@ import { writable, derived, get } from "svelte/store";
 import type {
  TerminalLine,
  ConnectionStatus,
+  ElicitationEvent,
  PermissionRequest,
  UserQuestionEvent,
  Attachment,
@@ -32,6 +33,7 @@ export interface Conversation {
  grantedTools: Set<string>;
  pendingPermissions: PermissionRequest[];
  pendingQuestion: UserQuestionEvent | null;
+  pendingElicitation: ElicitationEvent | null;
  scrollPosition: number;
  createdAt: Date;
  lastActivityAt: Date;
@@ -157,6 +159,7 @@ function createConversationsStore() {
      grantedTools: new Set(),
      pendingPermissions: [],
      pendingQuestion: null,
+      pendingElicitation: null,
      scrollPosition: -1, // -1 means "scroll to bottom" (auto-scroll)
      createdAt: new Date(),
      lastActivityAt: new Date(),
@@ -221,6 +224,10 @@ function createConversationsStore() {
    ($conv) => $conv?.pendingPermissions || []
  );
  const pendingQuestion = derived(activeConversation, ($conv) => $conv?.pendingQuestion || null);
+  const pendingElicitation = derived(
+    activeConversation,
+    ($conv) => $conv?.pendingElicitation ?? null
+  );
  const scrollPosition = derived(activeConversation, ($conv) => $conv?.scrollPosition ?? -1);
  const attachments = derived(activeConversation, ($conv) => $conv?.attachments || []);
  const worktreeInfo = derived(activeConversation, ($conv) => $conv?.worktreeInfo ?? null);
@@ -234,6 +241,7 @@ function createConversationsStore() {
    pendingPermission: { subscribe: pendingPermission.subscribe },
    pendingPermissions: { subscribe: pendingPermissions.subscribe },
    pendingQuestion: { subscribe: pendingQuestion.subscribe },
+    pendingElicitation: { subscribe: pendingElicitation.subscribe },
    isProcessing: { subscribe: isProcessing.subscribe },
    grantedTools: { subscribe: grantedTools.subscribe },
    pendingRetryMessage: { subscribe: pendingRetryMessage.subscribe },
@@ -399,6 +407,52 @@ function createConversationsStore() {
        return convs;
      });
    },
+    requestElicitation: (elicitation: ElicitationEvent) => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.pendingElicitation = elicitation;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    clearElicitation: () => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.pendingElicitation = null;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    requestElicitationForConversation: (conversationId: string, elicitation: ElicitationEvent) => {
+      conversations.update((convs) => {
+        const conv = convs.get(conversationId);
+        if (conv) {
+          conv.pendingElicitation = elicitation;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+    clearElicitationForConversation: (conversationId: string) => {
+      conversations.update((convs) => {
+        const conv = convs.get(conversationId);
+        if (conv) {
+          conv.pendingElicitation = null;
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
    setPendingRetryMessage: (message: string | null) => pendingRetryMessage.set(message),

    // Conversation management
@@ -8,6 +8,7 @@ import { initStatsListener, resetSessionStats } from "$lib/stores/stats";
 import { initAchievementsListener } from "$lib/stores/achievements";
 import type {
  ConnectionStatus,
+  ElicitationEvent,
  PermissionPromptEvent,
  UserQuestionEvent,
 } from "$lib/types/messages";
@@ -406,7 +407,8 @@ export async function initializeTauriListeners() {
          | "rate-limit"
          | "compact-prompt"
          | "worktree"
-          | "config-change",
+          | "config-change"
+          | "elicitation",
        content,
        tool_name || undefined,
        costData,
@@ -425,7 +427,8 @@ export async function initializeTauriListeners() {
          | "rate-limit"
          | "compact-prompt"
          | "worktree"
-          | "config-change",
+          | "config-change"
+          | "elicitation",
        content,
        tool_name || undefined,
        costData,
@@ -611,6 +614,32 @@ export async function initializeTauriListeners() {
    }
  });
  unlisteners.push(questionUnlisten);
+
+  const elicitationUnlisten = await listen<ElicitationEvent>("claude:elicitation", (event) => {
+    const elicitationEvent = event.payload;
+    if (elicitationEvent.conversation_id) {
+      claudeStore.requestElicitationForConversation(
+        elicitationEvent.conversation_id,
+        elicitationEvent
+      );
+    } else {
+      claudeStore.requestElicitation(elicitationEvent);
+    }
+  });
+  unlisteners.push(elicitationUnlisten);
+
+  const elicitationResultUnlisten = await listen<{ conversation_id?: string }>(
+    "claude:elicitation-result",
+    (event) => {
+      const { conversation_id } = event.payload;
+      if (conversation_id) {
+        claudeStore.clearElicitationForConversation(conversation_id);
+      } else {
+        claudeStore.clearElicitation();
+      }
+    }
+  );
+  unlisteners.push(elicitationResultUnlisten);
 }

 export function cleanupTauriListeners() {
@@ -10,7 +10,8 @@ export interface TerminalLine {
    | "rate-limit"
    | "compact-prompt"
    | "worktree"
-    | "config-change";
+    | "config-change"
+    | "elicitation";
  content: string;
  timestamp: Date;
  toolName?: string;
@@ -162,6 +163,19 @@ export interface UserQuestionEvent {
  conversation_id?: string;
 }

+export interface ElicitationEvent {
+  message: string;
+  server_name?: string;
+  request_id?: string;
+  conversation_id?: string;
+}
+
+export interface ElicitationResultEvent {
+  action: string;
+  request_id?: string;
+  conversation_id?: string;
+}
+
 export type ConnectionStatus = "disconnected" | "connecting" | "connected" | "error";

 export interface Attachment {