fix: use generic Error type in setup.ts to avoid NodeJS namespace

Re-add useSortable listeners that were removed in the realignment
refactor. The entire section header row is now the drag target (no
visible handle icon needed). PointerSensor's distance:5 constraint
ensures clicks for collapse/expand don't conflict with drag.

Also suppress pre-existing undici WebSocket ERR_INVALID_ARG_TYPE in
test setup (jsdom Event ≠ Node Event incompatibility).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

mcp-server/index.js

@@ -23,29 +23,44 @@ import {
   CallToolRequestSchema,
   ListToolsRequestSchema,
 } from '@modelcontextprotocol/sdk/types.js'
+import WebSocket from 'ws'
 import {
   readNote, createNote, searchNotes, appendToNote,
   editNoteFrontmatter, deleteNote, linkNotes, listNotes, vaultContext,
 } from './vault.js'
-import { startUiBridge } from './ws-bridge.js'
 
 const VAULT_PATH = process.env.VAULT_PATH || process.env.HOME + '/Laputa'
 const WS_UI_PORT = parseInt(process.env.WS_UI_PORT || '9711', 10)
+const WS_UI_URL = `ws://localhost:${WS_UI_PORT}`
 
-// Start the UI bridge so stdio-based MCP tools can broadcast UI actions.
-// If the port is already in use (e.g. by the running Laputa app), continue
-// without the bridge — vault tools still work via stdio MCP.
-let uiBridge = null
-startUiBridge(WS_UI_PORT).then((bridge) => {
-  uiBridge = bridge
-})
+// Connect as a WebSocket CLIENT to the UI bridge (run by ws-bridge.js).
+// The bridge relays messages to all other clients (the React frontend).
+let uiSocket = null
+const RECONNECT_INTERVAL_MS = 3000
+
+function connectUiBridge() {
+  try {
+    const ws = new WebSocket(WS_UI_URL)
+    ws.on('open', () => {
+      uiSocket = ws
+      console.error(`[mcp] Connected to UI bridge at ${WS_UI_URL}`)
+    })
+    ws.on('close', () => {
+      uiSocket = null
+      setTimeout(connectUiBridge, RECONNECT_INTERVAL_MS)
+    })
+    ws.on('error', () => {
+      // Silent — bridge may not be running yet, will retry
+    })
+  } catch {
+    setTimeout(connectUiBridge, RECONNECT_INTERVAL_MS)
+  }
+}
+connectUiBridge()
 
 function broadcastUiAction(action, payload) {
-  if (!uiBridge) return
-  const msg = JSON.stringify({ type: 'ui_action', action, ...payload })
-  for (const client of uiBridge.clients) {
-    if (client.readyState === 1) client.send(msg)
-  }
+  if (!uiSocket || uiSocket.readyState !== WebSocket.OPEN) return
+  uiSocket.send(JSON.stringify({ type: 'ui_action', action, ...payload }))
 }
 
 const TOOLS = [
@@ -233,6 +248,7 @@ async function handleCreateNote(args) {
   const frontmatter = {}
   if (args.is_a) frontmatter.is_a = args.is_a
   const absPath = await createNote(VAULT_PATH, args.path, args.title, frontmatter)
+  broadcastUiAction('vault_changed', { path: args.path })
   return { content: [{ type: 'text', text: `Created note at ${absPath}` }] }
 }
 
@@ -246,21 +262,25 @@ async function handleSearchNotes(args) {
 
 async function handleAppendToNote(args) {
   await appendToNote(VAULT_PATH, args.path, args.text)
+  broadcastUiAction('vault_changed', { path: args.path })
   return { content: [{ type: 'text', text: `Appended text to ${args.path}` }] }
 }
 
 async function handleEditFrontmatter(args) {
   const updated = await editNoteFrontmatter(VAULT_PATH, args.path, args.patch)
+  broadcastUiAction('vault_changed', { path: args.path })
   return { content: [{ type: 'text', text: JSON.stringify(updated) }] }
 }
 
 async function handleDeleteNote(args) {
   await deleteNote(VAULT_PATH, args.path)
+  broadcastUiAction('vault_changed', { path: args.path })
   return { content: [{ type: 'text', text: `Deleted ${args.path}` }] }
 }
 
 async function handleLinkNotes(args) {
   const arr = await linkNotes(VAULT_PATH, args.source_path, args.property, args.target_title)
+  broadcastUiAction('vault_changed', { path: args.source_path })
   return { content: [{ type: 'text', text: `${args.property}: [${arr.join(', ')}]` }] }
 }
 
@@ -293,7 +313,7 @@ function handleUiHighlight(args) {
 }
 
 function handleUiSetFilter(args) {
-  broadcastUiAction('set_filter', { type: args.type })
+  broadcastUiAction('set_filter', { filterType: args.type })
   return { content: [{ type: 'text', text: `Filter set to ${args.type}` }] }
 }
 

mcp-server/ws-bridge.js

@@ -50,18 +50,18 @@ function buildFrontmatter(args) {
 const TOOL_HANDLERS = {
   open_note: (args) => readNote(VAULT_PATH, args.path).then(text => ({ content: text })),
   read_note: (args) => readNote(VAULT_PATH, args.path).then(text => ({ content: text })),
-  create_note: (args) => createNote(VAULT_PATH, args.path, args.title, buildFrontmatter(args)),
+  create_note: (args) => createNote(VAULT_PATH, args.path, args.title, buildFrontmatter(args)).then(r => { broadcastUiAction('vault_changed', { path: args.path }); return r }),
   search_notes: (args) => searchNotes(VAULT_PATH, args.query, args.limit),
-  append_to_note: (args) => appendToNote(VAULT_PATH, args.path, args.text).then(() => ({ ok: true })),
-  edit_note_frontmatter: (args) => editNoteFrontmatter(VAULT_PATH, args.path, args.patch),
-  delete_note: (args) => deleteNote(VAULT_PATH, args.path).then(() => ({ ok: true })),
-  link_notes: (args) => linkNotes(VAULT_PATH, args.source_path, args.property, args.target_title),
+  append_to_note: (args) => appendToNote(VAULT_PATH, args.path, args.text).then(() => { broadcastUiAction('vault_changed', { path: args.path }); return { ok: true } }),
+  edit_note_frontmatter: (args) => editNoteFrontmatter(VAULT_PATH, args.path, args.patch).then(r => { broadcastUiAction('vault_changed', { path: args.path }); return r }),
+  delete_note: (args) => deleteNote(VAULT_PATH, args.path).then(() => { broadcastUiAction('vault_changed', { path: args.path }); return { ok: true } }),
+  link_notes: (args) => linkNotes(VAULT_PATH, args.source_path, args.property, args.target_title).then(r => { broadcastUiAction('vault_changed', { path: args.source_path }); return r }),
   list_notes: (args) => listNotes(VAULT_PATH, args.type_filter, args.sort),
   vault_context: () => vaultContext(VAULT_PATH),
   ui_open_note: (args) => { broadcastUiAction('open_note', { path: args.path }); return { ok: true } },
   ui_open_tab: (args) => { broadcastUiAction('open_tab', { path: args.path }); return { ok: true } },
   ui_highlight: (args) => { broadcastUiAction('highlight', { element: args.element, path: args.path }); return { ok: true } },
-  ui_set_filter: (args) => { broadcastUiAction('set_filter', { type: args.type }); return { ok: true } },
+  ui_set_filter: (args) => { broadcastUiAction('set_filter', { filterType: args.type }); return { ok: true } },
 }
 
 async function handleMessage(data) {
@@ -101,8 +101,15 @@ export function startUiBridge(port = WS_UI_PORT) {
 
     httpServer.listen(port, () => {
       const wss = new WebSocketServer({ server: httpServer })
-      wss.on('connection', () => {
+      wss.on('connection', (ws) => {
         console.error(`[ws-bridge] UI client connected on port ${port}`)
+        // Relay: when a client sends a message, broadcast to all OTHER clients.
+        // This allows the MCP stdio server (connected as a client) to reach the frontend.
+        ws.on('message', (raw) => {
+          for (const client of wss.clients) {
+            if (client !== ws && client.readyState === 1) client.send(raw.toString())
+          }
+        })
       })
       uiBridge = wss
       console.error(`[ws-bridge] UI bridge listening on ws://localhost:${port}`)

src-tauri/src/claude_cli.rs

@@ -1,4 +1,5 @@
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 use std::io::BufRead;
 use std::path::PathBuf;
 use std::process::{Command, Stdio};
@@ -19,9 +20,18 @@ pub enum ClaudeStreamEvent {
     /// Incremental text chunk.
     TextDelta { text: String },
     /// A tool call started (agent mode only).
-    ToolStart { tool_name: String, tool_id: String },
+    ToolStart {
+        tool_name: String,
+        tool_id: String,
+        #[serde(skip_serializing_if = "Option::is_none")]
+        input: Option<String>,
+    },
     /// A tool call finished (agent mode only).
-    ToolDone { tool_id: String },
+    ToolDone {
+        tool_id: String,
+        #[serde(skip_serializing_if = "Option::is_none")]
+        output: Option<String>,
+    },
     /// Final result text + session ID.
     Result { text: String, session_id: String },
     /// Something went wrong.
@@ -207,6 +217,15 @@ fn build_mcp_config(vault_path: &str) -> Result<String, String> {
     serde_json::to_string(&config).map_err(|e| format!("Failed to serialise MCP config: {e}"))
 }
 
+/// Mutable state accumulated across the JSON stream for a single subprocess.
+struct StreamState {
+    session_id: String,
+    /// Accumulates `input_json_delta` chunks keyed by tool_use id.
+    tool_inputs: HashMap<String, String>,
+    /// The tool_use id of the block currently being streamed.
+    current_tool_id: Option<String>,
+}
+
 /// Core subprocess runner shared by chat and agent modes.
 fn run_claude_subprocess<F>(bin: &PathBuf, args: &[String], emit: &mut F) -> Result<String, String>
 where
@@ -223,7 +242,11 @@ where
     let stdout = child.stdout.take().ok_or("No stdout handle")?;
     let reader = std::io::BufReader::new(stdout);
 
-    let mut session_id = String::new();
+    let mut state = StreamState {
+        session_id: String::new(),
+        tool_inputs: HashMap::new(),
+        current_tool_id: None,
+    };
 
     for line in reader.lines() {
         let line = match line {
@@ -245,7 +268,7 @@ where
             Err(_) => continue, // skip non-JSON lines
         };
 
-        dispatch_event(&json, &mut session_id, emit);
+        dispatch_event(&json, &mut state, emit);
     }
 
     // Read stderr for potential error messages.
@@ -257,7 +280,7 @@ where
 
     let status = child.wait().map_err(|e| format!("Wait failed: {e}"))?;
 
-    if !status.success() && session_id.is_empty() {
+    if !status.success() && state.session_id.is_empty() {
         let msg = if stderr_output.contains("not logged in")
             || stderr_output.contains("authentication")
             || stderr_output.contains("auth")
@@ -273,11 +296,11 @@ where
 
     emit(ClaudeStreamEvent::Done);
 
-    Ok(session_id)
+    Ok(state.session_id)
 }
 
 /// Parse a single JSON line from the stream and emit the appropriate event.
-fn dispatch_event<F>(json: &serde_json::Value, session_id: &mut String, emit: &mut F)
+fn dispatch_event<F>(json: &serde_json::Value, state: &mut StreamState, emit: &mut F)
 where
     F: FnMut(ClaudeStreamEvent),
 {
@@ -287,7 +310,7 @@ where
         // --- System init → capture session_id ---
         "system" if json["subtype"].as_str() == Some("init") => {
             if let Some(sid) = json["session_id"].as_str() {
-                *session_id = sid.to_string();
+                state.session_id = sid.to_string();
                 emit(ClaudeStreamEvent::Init {
                     session_id: sid.to_string(),
                 });
@@ -296,7 +319,7 @@ where
 
         // --- Streaming partial events (text deltas, tool_use starts) ---
         "stream_event" => {
-            dispatch_stream_event(json, emit);
+            dispatch_stream_event(json, state, emit);
         }
 
         // --- Tool progress (agent mode) ---
@@ -307,6 +330,18 @@ where
                 emit(ClaudeStreamEvent::ToolStart {
                     tool_name: name.to_string(),
                     tool_id: id.to_string(),
+                    input: None,
+                });
+            }
+        }
+
+        // --- Tool result (agent mode) ---
+        "tool_result" => {
+            if let Some(id) = json["tool_use_id"].as_str() {
+                let output = extract_tool_result_text(json);
+                emit(ClaudeStreamEvent::ToolDone {
+                    tool_id: id.to_string(),
+                    output,
                 });
             }
         }
@@ -315,7 +350,7 @@ where
         "result" => {
             let sid = json["session_id"].as_str().unwrap_or("").to_string();
             if !sid.is_empty() {
-                *session_id = sid.clone();
+                state.session_id = sid.clone();
             }
             let text = json["result"].as_str().unwrap_or("").to_string();
             emit(ClaudeStreamEvent::Result {
@@ -332,9 +367,11 @@ where
                         if let (Some(id), Some(name)) =
                             (block["id"].as_str(), block["name"].as_str())
                         {
+                            let input = format_tool_input(&block["input"], state, id);
                             emit(ClaudeStreamEvent::ToolStart {
                                 tool_name: name.to_string(),
                                 tool_id: id.to_string(),
+                                input,
                             });
                         }
                     }
@@ -347,7 +384,7 @@ where
 }
 
 /// Handle a `stream_event` (partial assistant message).
-fn dispatch_stream_event<F>(json: &serde_json::Value, emit: &mut F)
+fn dispatch_stream_event<F>(json: &serde_json::Value, state: &mut StreamState, emit: &mut F)
 where
     F: FnMut(ClaudeStreamEvent),
 {
@@ -357,29 +394,84 @@ where
     match event_type {
         "content_block_delta" => {
             let delta = &event["delta"];
-            if delta["type"].as_str() == Some("text_delta") {
-                if let Some(text) = delta["text"].as_str() {
-                    emit(ClaudeStreamEvent::TextDelta {
-                        text: text.to_string(),
-                    });
+            match delta["type"].as_str() {
+                Some("text_delta") => {
+                    if let Some(text) = delta["text"].as_str() {
+                        emit(ClaudeStreamEvent::TextDelta {
+                            text: text.to_string(),
+                        });
+                    }
                 }
+                Some("input_json_delta") => {
+                    if let (Some(partial), Some(ref tid)) =
+                        (delta["partial_json"].as_str(), &state.current_tool_id)
+                    {
+                        state
+                            .tool_inputs
+                            .entry(tid.clone())
+                            .or_default()
+                            .push_str(partial);
+                    }
+                }
+                _ => {}
             }
         }
         "content_block_start" => {
             let block = &event["content_block"];
             if block["type"].as_str() == Some("tool_use") {
                 if let (Some(id), Some(name)) = (block["id"].as_str(), block["name"].as_str()) {
+                    state.current_tool_id = Some(id.to_string());
+                    state.tool_inputs.entry(id.to_string()).or_default();
                     emit(ClaudeStreamEvent::ToolStart {
                         tool_name: name.to_string(),
                         tool_id: id.to_string(),
+                        input: None,
                     });
                 }
             }
         }
+        "content_block_stop" => {
+            state.current_tool_id = None;
+        }
         _ => {}
     }
 }
 
+/// Build the tool input string, preferring accumulated delta chunks over the
+/// block's `input` field (which may be empty at stream start).
+fn format_tool_input(
+    block_input: &serde_json::Value,
+    state: &StreamState,
+    tool_id: &str,
+) -> Option<String> {
+    if let Some(accumulated) = state.tool_inputs.get(tool_id) {
+        if !accumulated.is_empty() {
+            return Some(accumulated.clone());
+        }
+    }
+    if !block_input.is_null() && block_input.as_object().is_some_and(|o| !o.is_empty()) {
+        return Some(block_input.to_string());
+    }
+    None
+}
+
+/// Extract displayable text from a `tool_result` event.
+fn extract_tool_result_text(json: &serde_json::Value) -> Option<String> {
+    // String content field
+    if let Some(s) = json["content"].as_str() {
+        return Some(s.to_string());
+    }
+    // Array of content blocks (Claude format)
+    if let Some(arr) = json["content"].as_array() {
+        let texts: Vec<&str> = arr.iter().filter_map(|b| b["text"].as_str()).collect();
+        if !texts.is_empty() {
+            return Some(texts.join("\n"));
+        }
+    }
+    // Fallback: "output" field
+    json["output"].as_str().map(|s| s.to_string())
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -408,12 +500,20 @@ mod tests {
 
     // --- dispatch_event / dispatch_stream_event ---
 
+    fn new_state() -> StreamState {
+        StreamState {
+            session_id: String::new(),
+            tool_inputs: HashMap::new(),
+            current_tool_id: None,
+        }
+    }
+
     /// Run dispatch_event on the given JSON and return (session_id, events).
     fn run_dispatch(json: serde_json::Value) -> (String, Vec<ClaudeStreamEvent>) {
-        let mut sid = String::new();
+        let mut state = new_state();
         let mut events = vec![];
-        dispatch_event(&json, &mut sid, &mut |e| events.push(e));
-        (sid, events)
+        dispatch_event(&json, &mut state, &mut |e| events.push(e));
+        (state.session_id, events)
     }
 
     /// Run dispatch_event with a pre-set session_id.
@@ -421,10 +521,23 @@ mod tests {
         json: serde_json::Value,
         initial_sid: &str,
     ) -> (String, Vec<ClaudeStreamEvent>) {
-        let mut sid = initial_sid.to_string();
+        let mut state = new_state();
+        state.session_id = initial_sid.to_string();
         let mut events = vec![];
-        dispatch_event(&json, &mut sid, &mut |e| events.push(e));
-        (sid, events)
+        dispatch_event(&json, &mut state, &mut |e| events.push(e));
+        (state.session_id, events)
+    }
+
+    /// Run multiple dispatch_event calls sharing state (for multi-event sequences).
+    fn run_dispatch_sequence(
+        events_json: Vec<serde_json::Value>,
+    ) -> (StreamState, Vec<ClaudeStreamEvent>) {
+        let mut state = new_state();
+        let mut events = vec![];
+        for json in &events_json {
+            dispatch_event(json, &mut state, &mut |e| events.push(e));
+        }
+        (state, events)
     }
 
     #[test]
@@ -468,7 +581,7 @@ mod tests {
             "event": { "type": "content_block_start", "index": 1, "content_block": { "type": "tool_use", "id": "tool_abc", "name": "read_note", "input": {} } }
         }));
         assert!(
-            matches!(&events[0], ClaudeStreamEvent::ToolStart { tool_name, tool_id } if tool_name == "read_note" && tool_id == "tool_abc")
+            matches!(&events[0], ClaudeStreamEvent::ToolStart { tool_name, tool_id, .. } if tool_name == "read_note" && tool_id == "tool_abc")
         );
     }
 
@@ -501,7 +614,7 @@ mod tests {
             "type": "tool_progress", "tool_name": "search_notes", "tool_use_id": "tool_xyz"
         }));
         assert!(
-            matches!(&events[0], ClaudeStreamEvent::ToolStart { tool_name, tool_id } if tool_name == "search_notes" && tool_id == "tool_xyz")
+            matches!(&events[0], ClaudeStreamEvent::ToolStart { tool_name, tool_id, .. } if tool_name == "search_notes" && tool_id == "tool_xyz")
         );
     }
 
@@ -523,7 +636,7 @@ mod tests {
         }));
         assert_eq!(events.len(), 1);
         assert!(
-            matches!(&events[0], ClaudeStreamEvent::ToolStart { tool_name, tool_id } if tool_name == "search_notes" && tool_id == "tu_1")
+            matches!(&events[0], ClaudeStreamEvent::ToolStart { tool_name, tool_id, .. } if tool_name == "search_notes" && tool_id == "tu_1")
         );
     }
 
@@ -541,7 +654,8 @@ mod tests {
     }
 
     #[test]
-    fn dispatch_stream_event_non_text_delta_is_ignored() {
+    fn dispatch_stream_event_input_json_delta_accumulates_silently() {
+        // input_json_delta doesn't emit events directly — it accumulates in state
         let (_, events) = run_dispatch(serde_json::json!({
             "type": "stream_event",
             "event": { "type": "content_block_delta", "index": 0, "delta": { "type": "input_json_delta", "partial_json": "{}" } }
@@ -566,6 +680,112 @@ mod tests {
         assert!(events.is_empty());
     }
 
+    #[test]
+    fn dispatch_event_handles_tool_result_string_content() {
+        let (_, events) = run_dispatch(serde_json::json!({
+            "type": "tool_result",
+            "tool_use_id": "tool_abc",
+            "content": "Found 3 notes matching query"
+        }));
+        assert_eq!(events.len(), 1);
+        assert!(
+            matches!(&events[0], ClaudeStreamEvent::ToolDone { tool_id, output }
+                if tool_id == "tool_abc" && output.as_deref() == Some("Found 3 notes matching query"))
+        );
+    }
+
+    #[test]
+    fn dispatch_event_handles_tool_result_array_content() {
+        let (_, events) = run_dispatch(serde_json::json!({
+            "type": "tool_result",
+            "tool_use_id": "tool_def",
+            "content": [{ "type": "text", "text": "Line 1" }, { "type": "text", "text": "Line 2" }]
+        }));
+        assert!(
+            matches!(&events[0], ClaudeStreamEvent::ToolDone { output, .. }
+                if output.as_deref() == Some("Line 1\nLine 2"))
+        );
+    }
+
+    #[test]
+    fn dispatch_event_tool_result_missing_tool_id_is_ignored() {
+        let (_, events) = run_dispatch(serde_json::json!({
+            "type": "tool_result", "content": "result text"
+        }));
+        assert!(events.is_empty());
+    }
+
+    #[test]
+    fn dispatch_accumulates_input_json_deltas() {
+        let (_, events) = run_dispatch_sequence(vec![
+            // Start tool_use block
+            serde_json::json!({
+                "type": "stream_event",
+                "event": { "type": "content_block_start", "content_block": { "type": "tool_use", "id": "t1", "name": "search_notes", "input": {} } }
+            }),
+            // Input delta chunks
+            serde_json::json!({
+                "type": "stream_event",
+                "event": { "type": "content_block_delta", "delta": { "type": "input_json_delta", "partial_json": "{\"query\":" } }
+            }),
+            serde_json::json!({
+                "type": "stream_event",
+                "event": { "type": "content_block_delta", "delta": { "type": "input_json_delta", "partial_json": "\"test\"}" } }
+            }),
+            // Stop block
+            serde_json::json!({
+                "type": "stream_event",
+                "event": { "type": "content_block_stop" }
+            }),
+            // Assistant message triggers ToolStart with accumulated input
+            serde_json::json!({
+                "type": "assistant",
+                "message": { "content": [
+                    { "type": "tool_use", "id": "t1", "name": "search_notes", "input": { "query": "test" } }
+                ] }
+            }),
+        ]);
+        // First event: ToolStart with no input (from content_block_start)
+        assert!(matches!(
+            &events[0],
+            ClaudeStreamEvent::ToolStart { input: None, .. }
+        ));
+        // Second event: ToolStart with accumulated input (from assistant)
+        assert!(
+            matches!(&events[1], ClaudeStreamEvent::ToolStart { input: Some(inp), .. }
+                if inp == "{\"query\":\"test\"}")
+        );
+    }
+
+    #[test]
+    fn dispatch_assistant_uses_block_input_when_no_deltas() {
+        let (_, events) = run_dispatch(serde_json::json!({
+            "type": "assistant",
+            "message": { "content": [
+                { "type": "tool_use", "id": "tu_x", "name": "create_note", "input": { "title": "Hello", "content": "world" } }
+            ] }
+        }));
+        assert!(
+            matches!(&events[0], ClaudeStreamEvent::ToolStart { input: Some(inp), .. }
+                if inp.contains("title") && inp.contains("Hello"))
+        );
+    }
+
+    #[test]
+    fn content_block_stop_clears_current_tool() {
+        let (state, _) = run_dispatch_sequence(vec![
+            serde_json::json!({
+                "type": "stream_event",
+                "event": { "type": "content_block_start", "content_block": { "type": "tool_use", "id": "t1", "name": "x", "input": {} } }
+            }),
+            serde_json::json!({
+                "type": "stream_event",
+                "event": { "type": "content_block_stop" }
+            }),
+        ]);
+        assert!(state.current_tool_id.is_none());
+    }
+
     // --- run_claude_subprocess with mock scripts ---
 
     #[cfg(unix)]

src-tauri/src/lib.rs

@@ -391,11 +391,11 @@ async fn start_indexing(app_handle: tauri::AppHandle, vault_path: String) -> Res
             match indexing::auto_install_qmd() {
                 Ok(_) => log::info!("qmd auto-installed successfully"),
                 Err(e) => {
-                    log::warn!("qmd auto-install failed: {e}");
+                    log::info!("qmd not available (search disabled): {e}");
                     let _ = app_handle.emit(
                         "indexing-progress",
                         IndexingProgress {
-                            phase: "error".to_string(),
+                            phase: "unavailable".to_string(),
                             current: 0,
                             total: 0,
                             done: true,
@@ -475,6 +475,12 @@ fn create_vault_theme(vault_path: String, name: Option<String>) -> Result<String
     theme::create_vault_theme(&vault_path, name.as_deref())
 }
 
+#[tauri::command]
+fn ensure_vault_themes(vault_path: String) -> Result<(), String> {
+    let vault_path = expand_tilde(&vault_path);
+    theme::ensure_vault_themes(&vault_path)
+}
+
 fn log_startup_result(label: &str, result: Result<usize, String>) {
     match result {
         Ok(n) if n > 0 => log::info!("{}: {} files", label, n),
@@ -670,7 +676,8 @@ pub fn run() {
             save_vault_settings,
             set_active_theme,
             create_theme,
-            create_vault_theme
+            create_vault_theme,
+            ensure_vault_themes
         ])
         .build(tauri::generate_context!())
         .expect("error while building tauri application")

src-tauri/src/theme.rs

@@ -145,17 +145,50 @@ pub fn seed_default_themes(vault_path: &str) {
 }
 
 /// Seed the vault `theme/` directory with built-in vault-based theme notes.
-/// Safe to call multiple times — only writes files that are missing.
+/// Per-file idempotent: creates the directory if missing, writes each default
+/// file only when it doesn't exist or is empty (corrupt). Never overwrites
+/// existing files that have content.
 pub fn seed_vault_themes(vault_path: &str) {
-    seed_dir_with_files(
-        &Path::new(vault_path).join("theme"),
-        &[
-            ("default.md", DEFAULT_VAULT_THEME),
-            ("dark.md", DARK_VAULT_THEME),
-            ("minimal.md", MINIMAL_VAULT_THEME),
-        ],
-        "Seeded theme/ with built-in vault themes",
-    );
+    let theme_dir = Path::new(vault_path).join("theme");
+    if fs::create_dir_all(&theme_dir).is_err() {
+        return;
+    }
+    let defaults: &[(&str, &str)] = &[
+        ("default.md", DEFAULT_VAULT_THEME),
+        ("dark.md", DARK_VAULT_THEME),
+        ("minimal.md", MINIMAL_VAULT_THEME),
+    ];
+    let mut seeded = false;
+    for (name, content) in defaults {
+        let path = theme_dir.join(name);
+        let needs_write = !path.exists() || fs::metadata(&path).map_or(true, |m| m.len() == 0);
+        if needs_write {
+            let _ = fs::write(&path, content);
+            seeded = true;
+        }
+    }
+    if seeded {
+        log::info!("Seeded theme/ with built-in vault themes");
+    }
+}
+
+/// Ensure vault theme files exist. Returns an error if the theme directory
+/// cannot be created (e.g. read-only filesystem).
+pub fn ensure_vault_themes(vault_path: &str) -> Result<(), String> {
+    let theme_dir = Path::new(vault_path).join("theme");
+    fs::create_dir_all(&theme_dir).map_err(|e| format!("Failed to create theme directory: {e}"))?;
+    let defaults: &[(&str, &str)] = &[
+        ("default.md", DEFAULT_VAULT_THEME),
+        ("dark.md", DARK_VAULT_THEME),
+    ];
+    for (name, content) in defaults {
+        let path = theme_dir.join(name);
+        let needs_write = !path.exists() || fs::metadata(&path).map_or(true, |m| m.len() == 0);
+        if needs_write {
+            fs::write(&path, content).map_err(|e| format!("Failed to write theme/{name}: {e}"))?;
+        }
+    }
+    Ok(())
 }
 
 /// Create a new vault theme note in `theme/` directory.
@@ -856,4 +889,94 @@ mod tests {
         assert!(content.contains("accent-blue:"));
         assert!(content.contains("editor-font-size:"));
     }
+
+    #[test]
+    fn test_seed_vault_themes_writes_missing_files_in_existing_dir() {
+        let dir = TempDir::new().unwrap();
+        let vault = dir.path().join("vault");
+        let theme_dir = vault.join("theme");
+        fs::create_dir_all(&theme_dir).unwrap();
+        // Only default exists — dark and minimal should be seeded
+        fs::write(theme_dir.join("default.md"), DEFAULT_VAULT_THEME).unwrap();
+        let vp = vault.to_str().unwrap();
+
+        seed_vault_themes(vp);
+        assert!(theme_dir.join("dark.md").exists());
+        assert!(theme_dir.join("minimal.md").exists());
+    }
+
+    #[test]
+    fn test_seed_vault_themes_reseeds_empty_files() {
+        let dir = TempDir::new().unwrap();
+        let vault = dir.path().join("vault");
+        let theme_dir = vault.join("theme");
+        fs::create_dir_all(&theme_dir).unwrap();
+        // Create empty file — should be re-seeded
+        fs::write(theme_dir.join("default.md"), "").unwrap();
+        let vp = vault.to_str().unwrap();
+
+        seed_vault_themes(vp);
+        let content = fs::read_to_string(theme_dir.join("default.md")).unwrap();
+        assert!(content.contains("Is A: Theme"));
+    }
+
+    #[test]
+    fn test_seed_vault_themes_preserves_existing_content() {
+        let dir = TempDir::new().unwrap();
+        let vault = dir.path().join("vault");
+        let theme_dir = vault.join("theme");
+        fs::create_dir_all(&theme_dir).unwrap();
+        let custom = "---\nIs A: Theme\nbackground: \"#FF0000\"\n---\n# Custom\n";
+        fs::write(theme_dir.join("default.md"), custom).unwrap();
+        let vp = vault.to_str().unwrap();
+
+        seed_vault_themes(vp);
+        let content = fs::read_to_string(theme_dir.join("default.md")).unwrap();
+        assert!(
+            content.contains("#FF0000"),
+            "existing content must be preserved"
+        );
+    }
+
+    #[test]
+    fn test_ensure_vault_themes_creates_dir_and_defaults() {
+        let dir = TempDir::new().unwrap();
+        let vault = dir.path().join("vault");
+        fs::create_dir_all(&vault).unwrap();
+        let vp = vault.to_str().unwrap();
+
+        ensure_vault_themes(vp).unwrap();
+        assert!(vault.join("theme").is_dir());
+        assert!(vault.join("theme").join("default.md").exists());
+        assert!(vault.join("theme").join("dark.md").exists());
+    }
+
+    #[test]
+    fn test_ensure_vault_themes_reseeds_empty_files() {
+        let dir = TempDir::new().unwrap();
+        let vault = dir.path().join("vault");
+        let theme_dir = vault.join("theme");
+        fs::create_dir_all(&theme_dir).unwrap();
+        fs::write(theme_dir.join("default.md"), "").unwrap();
+        let vp = vault.to_str().unwrap();
+
+        ensure_vault_themes(vp).unwrap();
+        let content = fs::read_to_string(theme_dir.join("default.md")).unwrap();
+        assert!(content.contains("Is A: Theme"));
+    }
+
+    #[test]
+    fn test_ensure_vault_themes_preserves_custom_themes() {
+        let dir = TempDir::new().unwrap();
+        let vault = dir.path().join("vault");
+        let theme_dir = vault.join("theme");
+        fs::create_dir_all(&theme_dir).unwrap();
+        let custom = "---\nIs A: Theme\nbackground: \"#123456\"\n---\n";
+        fs::write(theme_dir.join("default.md"), custom).unwrap();
+        let vp = vault.to_str().unwrap();
+
+        ensure_vault_themes(vp).unwrap();
+        let content = fs::read_to_string(theme_dir.join("default.md")).unwrap();
+        assert!(content.contains("#123456"));
+    }
 }

src/App.css

@@ -61,3 +61,14 @@
 .tab-status-pulse {
   animation: tab-status-pulse 1.2s ease-in-out infinite;
 }
+
+/* AI highlight animation — applied by useAiActivity when MCP calls ui_highlight */
+@keyframes ai-highlight-glow {
+  0% { box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.8); }
+  50% { box-shadow: inset 0 0 8px 2px rgba(99, 102, 241, 0.4); }
+  100% { box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0); }
+}
+
+.ai-highlight {
+  animation: ai-highlight-glow 0.8s ease-out;
+}

src/App.tsx

@@ -35,6 +35,7 @@ import { useOnboarding } from './hooks/useOnboarding'
 import { useThemeManager } from './hooks/useThemeManager'
 import { useEditorSaveWithLinks } from './hooks/useEditorSaveWithLinks'
 import { useNavigationGestures } from './hooks/useNavigationGestures'
+import { useAiActivity } from './hooks/useAiActivity'
 import { ConflictResolverModal } from './components/ConflictResolverModal'
 import { UpdateBanner } from './components/UpdateBanner'
 import { invoke } from '@tauri-apps/api/core'
@@ -208,6 +209,22 @@ function App() {
 
   useNavigationGestures({ onGoBack: handleGoBack, onGoForward: handleGoForward })
 
+  // MCP UI bridge: react to AI-driven open/highlight/vault-change events
+  const aiActivity = useAiActivity({
+    onOpenNote: (path) => {
+      const entry = vault.entries.find(e => e.path === path || e.path === `${resolvedPath}/${path}`)
+      if (entry) notes.handleSelectNote(entry)
+    },
+    onOpenTab: (path) => {
+      const entry = vault.entries.find(e => e.path === path || e.path === `${resolvedPath}/${path}`)
+      if (entry) notes.handleSelectNote(entry)
+    },
+    onSetFilter: (filterType) => {
+      setSelection({ kind: 'sectionGroup', type: filterType })
+    },
+    onVaultChanged: () => { vault.reloadVault() },
+  })
+
   const { triggerIncrementalIndex } = indexing
   const onAfterSave = useCallback(() => {
     vault.loadModifiedFiles()
@@ -413,13 +430,13 @@ function App() {
         )}
         {noteListVisible && (
           <>
-            <div className="app__note-list" style={{ width: layout.noteListWidth }}>
+            <div className={`app__note-list${aiActivity.highlightElement === 'notelist' ? ' ai-highlight' : ''}`} style={{ width: layout.noteListWidth }}>
               <NoteList entries={vault.entries} selection={selection} selectedNote={activeTab?.entry ?? null} allContent={vault.allContent} modifiedFiles={vault.modifiedFiles} modifiedFilesError={vault.modifiedFilesError} getNoteStatus={vault.getNoteStatus} sidebarCollapsed={!sidebarVisible} onSelectNote={notes.handleSelectNote} onReplaceActiveTab={notes.handleReplaceActiveTab} onCreateNote={notes.handleCreateNoteImmediate} onBulkArchive={bulkActions.handleBulkArchive} onBulkTrash={bulkActions.handleBulkTrash} onUpdateTypeSort={notes.handleUpdateFrontmatter} updateEntry={vault.updateEntry} />
             </div>
             <ResizeHandle onResize={layout.handleNoteListResize} />
           </>
         )}
-        <div className="app__editor">
+        <div className={`app__editor${aiActivity.highlightElement === 'editor' || aiActivity.highlightElement === 'tab' ? ' ai-highlight' : ''}`}>
           <Editor
             tabs={notes.tabs}
             activeTabPath={notes.activeTabPath}
@@ -467,7 +484,7 @@ function App() {
         </div>
       </div>
       <UpdateBanner status={updateStatus} actions={updateActions} />
-      <StatusBar noteCount={vault.entries.length} modifiedCount={vault.modifiedFiles.length} vaultPath={vaultSwitcher.vaultPath} vaults={vaultSwitcher.allVaults} onSwitchVault={vaultSwitcher.switchVault} onOpenSettings={dialogs.openSettings} onOpenLocalFolder={vaultSwitcher.handleOpenLocalFolder} onConnectGitHub={dialogs.openGitHubVault} onClickPending={() => setSelection({ kind: 'filter', filter: 'changes' })} hasGitHub={!!settings.github_token} syncStatus={autoSync.syncStatus} lastSyncTime={autoSync.lastSyncTime} conflictCount={autoSync.conflictFiles.length} lastCommitInfo={autoSync.lastCommitInfo} onTriggerSync={autoSync.triggerSync} onOpenConflictResolver={handleOpenConflictResolver} zoomLevel={zoom.zoomLevel} onZoomReset={zoom.zoomReset} buildNumber={buildNumber} onCheckForUpdates={handleCheckForUpdates} indexingProgress={indexing.progress} onRemoveVault={vaultSwitcher.removeVault} />
+      <StatusBar noteCount={vault.entries.length} modifiedCount={vault.modifiedFiles.length} vaultPath={vaultSwitcher.vaultPath} vaults={vaultSwitcher.allVaults} onSwitchVault={vaultSwitcher.switchVault} onOpenSettings={dialogs.openSettings} onOpenLocalFolder={vaultSwitcher.handleOpenLocalFolder} onConnectGitHub={dialogs.openGitHubVault} onClickPending={() => setSelection({ kind: 'filter', filter: 'changes' })} hasGitHub={!!settings.github_token} syncStatus={autoSync.syncStatus} lastSyncTime={autoSync.lastSyncTime} conflictCount={autoSync.conflictFiles.length} lastCommitInfo={autoSync.lastCommitInfo} onTriggerSync={autoSync.triggerSync} onOpenConflictResolver={handleOpenConflictResolver} zoomLevel={zoom.zoomLevel} onZoomReset={zoom.zoomReset} buildNumber={buildNumber} onCheckForUpdates={handleCheckForUpdates} indexingProgress={indexing.progress} onRetryIndexing={indexing.retryIndexing} onRemoveVault={vaultSwitcher.removeVault} />
       <Toast message={toastMessage} onDismiss={() => setToastMessage(null)} />
       <QuickOpenPalette open={dialogs.showQuickOpen} entries={vault.entries} onSelect={notes.handleSelectNote} onClose={dialogs.closeQuickOpen} />
       <CommandPalette open={dialogs.showCommandPalette} commands={commands} onClose={dialogs.closeCommandPalette} />

src/components/AiActionCard.test.tsx

@@ -2,61 +2,166 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { AiActionCard } from './AiActionCard'
 
+const defaults = {
+  tool: 'create_note',
+  label: 'Creating note... (abc123)',
+  status: 'done' as const,
+  expanded: false,
+  onToggle: vi.fn(),
+}
+
 describe('AiActionCard', () => {
   it('renders label text', () => {
-    render(<AiActionCard tool="create_note" label="Created test.md" status="done" />)
+    render(<AiActionCard {...defaults} label="Created test.md" />)
     expect(screen.getByText('Created test.md')).toBeTruthy()
   })
 
   it('shows pending spinner', () => {
-    render(<AiActionCard tool="search_notes" label="Searching..." status="pending" />)
+    render(<AiActionCard {...defaults} tool="search_notes" label="Searching..." status="pending" />)
     expect(screen.getByTestId('status-pending')).toBeTruthy()
   })
 
   it('shows done check', () => {
-    render(<AiActionCard tool="create_note" label="Created" status="done" />)
+    render(<AiActionCard {...defaults} status="done" />)
     expect(screen.getByTestId('status-done')).toBeTruthy()
   })
 
   it('shows error icon', () => {
-    render(<AiActionCard tool="delete_note" label="Failed" status="error" />)
+    render(<AiActionCard {...defaults} tool="delete_note" label="Failed" status="error" />)
     expect(screen.getByTestId('status-error')).toBeTruthy()
   })
 
-  it('is clickable when path and onOpenNote provided', () => {
+  it('navigates to note when no details and path+onOpenNote provided', () => {
     const onOpenNote = vi.fn()
-    render(<AiActionCard tool="create_note" label="Open note" path="/vault/test.md" status="done" onOpenNote={onOpenNote} />)
-    fireEvent.click(screen.getByTestId('ai-action-card'))
+    const toggle = vi.fn()
+    render(
+      <AiActionCard {...defaults} path="/vault/test.md" onOpenNote={onOpenNote} onToggle={toggle} />,
+    )
+    fireEvent.click(screen.getByTestId('action-card-header'))
     expect(onOpenNote).toHaveBeenCalledWith('/vault/test.md')
+    expect(toggle).not.toHaveBeenCalled()
   })
 
-  it('has button role when clickable', () => {
-    render(<AiActionCard tool="create_note" label="Open note" path="/vault/test.md" status="done" onOpenNote={vi.fn()} />)
-    expect(screen.getByRole('button')).toBeTruthy()
-  })
-
-  it('is not clickable without path', () => {
+  it('toggles expand instead of navigating when details exist', () => {
     const onOpenNote = vi.fn()
-    render(<AiActionCard tool="create_note" label="Created" status="done" onOpenNote={onOpenNote} />)
-    fireEvent.click(screen.getByTestId('ai-action-card'))
+    const toggle = vi.fn()
+    render(
+      <AiActionCard
+        {...defaults}
+        path="/vault/test.md"
+        onOpenNote={onOpenNote}
+        onToggle={toggle}
+        input='{"title":"test"}'
+      />,
+    )
+    fireEvent.click(screen.getByTestId('action-card-header'))
+    expect(toggle).toHaveBeenCalled()
     expect(onOpenNote).not.toHaveBeenCalled()
   })
 
-  it('is not clickable without onOpenNote', () => {
-    render(<AiActionCard tool="create_note" label="Created" path="/vault/test.md" status="done" />)
-    const card = screen.getByTestId('ai-action-card')
-    expect(card.getAttribute('role')).toBeNull()
+  it('header has button role and is focusable', () => {
+    render(<AiActionCard {...defaults} />)
+    const header = screen.getByTestId('action-card-header')
+    expect(header.getAttribute('role')).toBe('button')
+    expect(header.getAttribute('tabindex')).toBe('0')
   })
 
   it('uses lighter background for ui_ tools', () => {
-    render(<AiActionCard tool="ui_open_tab" label="Opened tab" status="done" />)
+    render(<AiActionCard {...defaults} tool="ui_open_tab" label="Opened tab" />)
     const card = screen.getByTestId('ai-action-card')
     expect(card.style.background).toContain('0.06')
   })
 
   it('uses standard background for vault tools', () => {
-    render(<AiActionCard tool="create_note" label="Created" status="done" />)
+    render(<AiActionCard {...defaults} />)
     const card = screen.getByTestId('ai-action-card')
     expect(card.style.background).toContain('0.1')
   })
+
+  // --- Expand / collapse ---
+
+  it('does not show details when collapsed', () => {
+    render(<AiActionCard {...defaults} input='{"q":"test"}' output="found 3" expanded={false} />)
+    expect(screen.queryByTestId('action-card-details')).toBeNull()
+  })
+
+  it('shows details when expanded with input and output', () => {
+    render(<AiActionCard {...defaults} input='{"q":"test"}' output="found 3" expanded />)
+    expect(screen.getByTestId('action-card-details')).toBeTruthy()
+    expect(screen.getByTestId('detail-input')).toBeTruthy()
+    expect(screen.getByTestId('detail-output')).toBeTruthy()
+  })
+
+  it('shows only input when no output', () => {
+    render(<AiActionCard {...defaults} input='{"q":"test"}' expanded />)
+    expect(screen.getByTestId('detail-input')).toBeTruthy()
+    expect(screen.queryByTestId('detail-output')).toBeNull()
+  })
+
+  it('shows only output when no input', () => {
+    render(<AiActionCard {...defaults} output="result text" expanded />)
+    expect(screen.queryByTestId('detail-input')).toBeNull()
+    expect(screen.getByTestId('detail-output')).toBeTruthy()
+  })
+
+  it('does not show details when expanded but no input or output', () => {
+    render(<AiActionCard {...defaults} expanded />)
+    expect(screen.queryByTestId('action-card-details')).toBeNull()
+  })
+
+  it('formats JSON input prettily', () => {
+    render(<AiActionCard {...defaults} input='{"title":"Hello","content":"world"}' expanded />)
+    const inputBlock = screen.getByTestId('detail-input')
+    expect(inputBlock.textContent).toContain('"title": "Hello"')
+  })
+
+  it('truncates very long output', () => {
+    const longOutput = 'x'.repeat(1000)
+    render(<AiActionCard {...defaults} output={longOutput} expanded />)
+    const outputBlock = screen.getByTestId('detail-output')
+    expect(outputBlock.textContent!.length).toBeLessThan(1000)
+  })
+
+  // --- Keyboard accessibility ---
+
+  it('expands on Enter key', () => {
+    const toggle = vi.fn()
+    render(<AiActionCard {...defaults} onToggle={toggle} input='{"a":1}' />)
+    fireEvent.keyDown(screen.getByTestId('action-card-header'), { key: 'Enter' })
+    expect(toggle).toHaveBeenCalled()
+  })
+
+  it('expands on Space key', () => {
+    const toggle = vi.fn()
+    render(<AiActionCard {...defaults} onToggle={toggle} input='{"a":1}' />)
+    fireEvent.keyDown(screen.getByTestId('action-card-header'), { key: ' ' })
+    expect(toggle).toHaveBeenCalled()
+  })
+
+  it('collapses on Escape key when expanded', () => {
+    const toggle = vi.fn()
+    render(<AiActionCard {...defaults} onToggle={toggle} expanded input='{"a":1}' />)
+    fireEvent.keyDown(screen.getByTestId('action-card-header'), { key: 'Escape' })
+    expect(toggle).toHaveBeenCalled()
+  })
+
+  it('does not collapse on Escape when already collapsed', () => {
+    const toggle = vi.fn()
+    render(<AiActionCard {...defaults} onToggle={toggle} expanded={false} input='{"a":1}' />)
+    fireEvent.keyDown(screen.getByTestId('action-card-header'), { key: 'Escape' })
+    expect(toggle).not.toHaveBeenCalled()
+  })
+
+  it('sets aria-expanded attribute', () => {
+    const { rerender } = render(<AiActionCard {...defaults} expanded={false} />)
+    expect(screen.getByTestId('action-card-header').getAttribute('aria-expanded')).toBe('false')
+    rerender(<AiActionCard {...defaults} expanded />)
+    expect(screen.getByTestId('action-card-header').getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('shows error output in red for error status', () => {
+    render(<AiActionCard {...defaults} status="error" output="Permission denied" expanded />)
+    const outputBlock = screen.getByTestId('detail-output')
+    expect(outputBlock.style.color).toContain('destructive')
+  })
 })

src/components/AiActionCard.tsx

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react'
+import { type KeyboardEvent, type ReactNode, useCallback } from 'react'
 import {
   PencilSimple, MagnifyingGlass, Link, Trash, ChartBar, Eye, Sparkle,
-  CircleNotch, CheckCircle, XCircle,
+  CircleNotch, CheckCircle, XCircle, CaretRight, CaretDown,
 } from '@phosphor-icons/react'
 
 export type AiActionStatus = 'pending' | 'done' | 'error'
@@ -11,9 +11,15 @@ export interface AiActionCardProps {
   label: string
   path?: string
   status: AiActionStatus
+  input?: string
+  output?: string
+  expanded: boolean
+  onToggle: () => void
   onOpenNote?: (path: string) => void
 }
 
+const MAX_DETAIL_LENGTH = 800
+
 type IconRenderer = (size: number) => ReactNode
 
 const TOOL_ICON_MAP: Record<string, IconRenderer> = {
@@ -43,27 +49,118 @@ function StatusIndicator({ status }: { status: AiActionStatus }) {
   return <XCircle size={14} weight="fill" style={{ color: 'var(--destructive)' }} data-testid="status-error" />
 }
 
-export function AiActionCard({ tool, label, path, status, onOpenNote }: AiActionCardProps) {
-  const renderIcon = TOOL_ICON_MAP[tool] ?? DEFAULT_ICON
-  const isClickable = !!path && !!onOpenNote
-  const isUiTool = tool.startsWith('ui_')
+function truncateText(text: string): { text: string; truncated: boolean } {
+  if (text.length <= MAX_DETAIL_LENGTH) return { text, truncated: false }
+  return { text: text.slice(0, MAX_DETAIL_LENGTH), truncated: true }
+}
 
+function formatInputForDisplay(raw: string): string {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+}
+
+function DetailBlock({ label, content, isError }: {
+  label: string; content: string; isError?: boolean
+}) {
+  const { text, truncated } = truncateText(content)
   return (
-    <div
-      className="flex items-center gap-2 rounded"
-      style={{
-        padding: '6px 10px',
-        fontSize: 12,
-        background: isUiTool ? 'rgba(74, 158, 255, 0.06)' : 'rgba(74, 158, 255, 0.1)',
-        cursor: isClickable ? 'pointer' : 'default',
-      }}
-      onClick={isClickable ? () => onOpenNote(path) : undefined}
-      role={isClickable ? 'button' : undefined}
-      data-testid="ai-action-card"
-    >
-      <span className="shrink-0 text-muted-foreground">{renderIcon(14)}</span>
-      <span className="flex-1 truncate">{label}</span>
-      <StatusIndicator status={status} />
+    <div style={{ marginTop: 6 }}>
+      <div
+        className="text-muted-foreground"
+        style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', marginBottom: 2 }}
+      >
+        {label}
+      </div>
+      <pre
+        data-testid={`detail-${label.toLowerCase()}`}
+        style={{
+          fontSize: 11,
+          lineHeight: 1.4,
+          margin: 0,
+          padding: '4px 6px',
+          borderRadius: 4,
+          background: 'var(--muted)',
+          color: isError ? 'var(--destructive)' : 'var(--foreground)',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          maxHeight: 200,
+          overflow: 'auto',
+        }}
+      >
+        {text}{truncated && <span className="text-muted-foreground">{'…'}</span>}
+      </pre>
+    </div>
+  )
+}
+
+export function AiActionCard({
+  tool, label, path, status, input, output, expanded, onToggle, onOpenNote,
+}: AiActionCardProps) {
+  const renderIcon = TOOL_ICON_MAP[tool] ?? DEFAULT_ICON
+  const isUiTool = tool.startsWith('ui_')
+  const hasDetails = !!(input || output)
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onToggle()
+    } else if (e.key === 'Escape' && expanded) {
+      e.preventDefault()
+      onToggle()
+    }
+  }, [onToggle, expanded])
+
+  const handleClick = useCallback(() => {
+    if (path && onOpenNote && !hasDetails) {
+      onOpenNote(path)
+    } else {
+      onToggle()
+    }
+  }, [path, onOpenNote, hasDetails, onToggle])
+
+  const formattedInput = input ? formatInputForDisplay(input) : undefined
+
+  return (
+    <div
+      data-testid="ai-action-card"
+      className="rounded"
+      style={{
+        fontSize: 12,
+        background: isUiTool ? 'rgba(74, 158, 255, 0.06)' : 'rgba(74, 158, 255, 0.1)',
+      }}
+    >
+      <div
+        className="flex items-center gap-2"
+        style={{ padding: '6px 10px', cursor: 'pointer' }}
+        role="button"
+        tabIndex={0}
+        aria-expanded={expanded}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        data-testid="action-card-header"
+      >
+        <span className="shrink-0 text-muted-foreground" style={{ width: 14, display: 'flex' }}>
+          {hasDetails
+            ? (expanded ? <CaretDown size={12} /> : <CaretRight size={12} />)
+            : renderIcon(14)}
+        </span>
+        <span className="flex-1 truncate">{label}</span>
+        <StatusIndicator status={status} />
+      </div>
+      {expanded && hasDetails && (
+        <div
+          data-testid="action-card-details"
+          style={{ padding: '0 10px 8px 10px' }}
+        >
+          {formattedInput && <DetailBlock label="Input" content={formattedInput} />}
+          {output && (
+            <DetailBlock label="Output" content={output} isError={status === 'error'} />
+          )}
+        </div>
+      )}
     </div>
   )
 }

src/components/AiMessage.test.tsx

@@ -44,8 +44,8 @@ describe('AiMessage', () => {
       <AiMessage
         userMessage="Do something"
         actions={[
-          { tool: 'create_note', label: 'Created test.md', status: 'done' },
-          { tool: 'search_notes', label: 'Searched', status: 'pending' },
+          { tool: 'create_note', toolId: 't1', label: 'Created test.md', status: 'done' },
+          { tool: 'search_notes', toolId: 't2', label: 'Searched', status: 'pending' },
         ]}
       />,
     )
@@ -57,11 +57,11 @@ describe('AiMessage', () => {
     render(
       <AiMessage
         userMessage="Do"
-        actions={[{ tool: 'create_note', label: 'Open', path: '/vault/note.md', status: 'done' }]}
+        actions={[{ tool: 'create_note', toolId: 't1', label: 'Open', path: '/vault/note.md', status: 'done' }]}
         onOpenNote={onOpenNote}
       />,
     )
-    fireEvent.click(screen.getByTestId('ai-action-card'))
+    fireEvent.click(screen.getByTestId('action-card-header'))
     expect(onOpenNote).toHaveBeenCalledWith('/vault/note.md')
   })
 
@@ -88,4 +88,28 @@ describe('AiMessage', () => {
     render(<AiMessage userMessage="Ask" actions={[]} />)
     expect(screen.queryByTestId('ai-action-card')).toBeNull()
   })
+
+  it('expands and collapses action cards independently', () => {
+    render(
+      <AiMessage
+        userMessage="Do"
+        actions={[
+          { tool: 'search_notes', toolId: 't1', label: 'Searched', status: 'done', input: '{"q":"test"}', output: 'Found 3' },
+          { tool: 'create_note', toolId: 't2', label: 'Created', status: 'done', input: '{"title":"x"}' },
+        ]}
+      />,
+    )
+    const headers = screen.getAllByTestId('action-card-header')
+    // Both collapsed initially
+    expect(screen.queryByTestId('action-card-details')).toBeNull()
+    // Expand first card
+    fireEvent.click(headers[0])
+    expect(screen.getAllByTestId('action-card-details')).toHaveLength(1)
+    // Expand second card too
+    fireEvent.click(headers[1])
+    expect(screen.getAllByTestId('action-card-details')).toHaveLength(2)
+    // Collapse first card
+    fireEvent.click(headers[0])
+    expect(screen.getAllByTestId('action-card-details')).toHaveLength(1)
+  })
 })

src/components/AiMessage.tsx

@@ -1,12 +1,15 @@
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
 import { CaretRight, CaretDown, Brain, ArrowCounterClockwise } from '@phosphor-icons/react'
 import { AiActionCard, type AiActionStatus } from './AiActionCard'
 
 export interface AiAction {
   tool: string
+  toolId: string
   label: string
   path?: string
   status: AiActionStatus
+  input?: string
+  output?: string
 }
 
 export interface AiMessageProps {
@@ -66,18 +69,25 @@ function ReasoningBlock({ text, expanded, onToggle }: {
   )
 }
 
-function ActionCardsList({ actions, onOpenNote }: {
-  actions: AiAction[]; onOpenNote?: (path: string) => void
+function ActionCardsList({ actions, onOpenNote, expandedIds, onToggleExpand }: {
+  actions: AiAction[]
+  onOpenNote?: (path: string) => void
+  expandedIds: Set<string>
+  onToggleExpand: (toolId: string) => void
 }) {
   return (
     <div className="flex flex-col gap-1" style={{ marginBottom: 8 }}>
-      {actions.map((action, i) => (
+      {actions.map((action) => (
         <AiActionCard
-          key={`${action.tool}-${i}`}
+          key={action.toolId}
           tool={action.tool}
           label={action.label}
           path={action.path}
           status={action.status}
+          input={action.input}
+          output={action.output}
+          expanded={expandedIds.has(action.toolId)}
+          onToggle={() => onToggleExpand(action.toolId)}
           onOpenNote={onOpenNote}
         />
       ))}
@@ -115,6 +125,16 @@ function StreamingIndicator() {
 
 export function AiMessage({ userMessage, reasoning, actions, response, isStreaming, onOpenNote }: AiMessageProps) {
   const [reasoningExpanded, setReasoningExpanded] = useState(false)
+  const [expandedActions, setExpandedActions] = useState<Set<string>>(new Set())
+
+  const toggleAction = useCallback((toolId: string) => {
+    setExpandedActions(prev => {
+      const next = new Set(prev)
+      if (next.has(toolId)) next.delete(toolId)
+      else next.add(toolId)
+      return next
+    })
+  }, [])
 
   return (
     <div data-testid="ai-message" style={{ marginBottom: 16 }}>
@@ -126,7 +146,14 @@ export function AiMessage({ userMessage, reasoning, actions, response, isStreami
           onToggle={() => setReasoningExpanded(!reasoningExpanded)}
         />
       )}
-      {actions.length > 0 && <ActionCardsList actions={actions} onOpenNote={onOpenNote} />}
+      {actions.length > 0 && (
+        <ActionCardsList
+          actions={actions}
+          onOpenNote={onOpenNote}
+          expandedIds={expandedActions}
+          onToggleExpand={toggleAction}
+        />
+      )}
       {response && <ResponseBlock text={response} />}
       {isStreaming && !response && <StreamingIndicator />}
     </div>

src/components/Sidebar.tsx

@@ -165,7 +165,7 @@ function SortableSection({ group, sectionProps }: {
   sectionProps: Omit<SectionContentProps, 'group' | 'items' | 'isCollapsed' | 'onToggle' | 'isRenaming' | 'renameInitialValue'>
     & { entries: VaultEntry[]; collapsed: Record<string, boolean>; onToggle: (type: string) => void; renamingType: string | null; renameInitialValue: string }
 }) {
-  const { attributes, setNodeRef, transform, transition, isDragging } = useSortable({ id: group.type })
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: group.type })
   const items = sectionProps.entries.filter((e) => e.isA === group.type && !e.archived && !e.trashed)
   const isCollapsed = sectionProps.collapsed[group.type] ?? true
   const isRenaming = sectionProps.renamingType === group.type
@@ -178,6 +178,7 @@ function SortableSection({ group, sectionProps }: {
         onSelectNote={sectionProps.onSelectNote} onCreateType={sectionProps.onCreateType}
         onCreateNewType={sectionProps.onCreateNewType} onContextMenu={sectionProps.onContextMenu}
         onToggle={() => sectionProps.onToggle(group.type)}
+        dragHandleProps={listeners}
         isRenaming={isRenaming}
         renameInitialValue={isRenaming ? sectionProps.renameInitialValue : undefined}
         onRenameSubmit={sectionProps.onRenameSubmit}

src/components/SidebarParts.tsx

@@ -75,6 +75,7 @@ export interface SectionContentProps {
   onCreateNewType?: () => void
   onContextMenu: (e: React.MouseEvent, type: string) => void
   onToggle: () => void
+  dragHandleProps?: Record<string, unknown>
   isRenaming?: boolean
   renameInitialValue?: string
   onRenameSubmit?: (value: string) => void
@@ -93,7 +94,7 @@ function resolveCreateHandler(type: string, onCreateType?: (type: string) => voi
 
 export function SectionContent({
   group, items, isCollapsed, selection, onSelect, onSelectNote,
-  onCreateType, onCreateNewType, onContextMenu, onToggle,
+  onCreateType, onCreateNewType, onContextMenu, onToggle, dragHandleProps,
   isRenaming, renameInitialValue, onRenameSubmit, onRenameCancel,
 }: SectionContentProps) {
   const { label, type, Icon, customColor } = group
@@ -113,6 +114,7 @@ export function SectionContent({
         onContextMenu={(e) => onContextMenu(e, type)}
         onToggle={onToggle}
         onCreate={(e) => { e.stopPropagation(); onCreate?.() }}
+        dragHandleProps={dragHandleProps}
         isRenaming={isRenaming}
         renameInitialValue={renameInitialValue}
         onRenameSubmit={onRenameSubmit}
@@ -182,11 +184,12 @@ function InlineRenameInput({ initialValue, onSubmit, onCancel }: {
   )
 }
 
-function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive, showCreate, onSelect, onContextMenu, onToggle, onCreate, isRenaming, renameInitialValue, onRenameSubmit, onRenameCancel }: {
+function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive, showCreate, onSelect, onContextMenu, onToggle, onCreate, dragHandleProps, isRenaming, renameInitialValue, onRenameSubmit, onRenameCancel }: {
   label: string; type: string; Icon: ComponentType<IconProps>
   sectionColor: string; isCollapsed: boolean; isActive: boolean; showCreate: boolean
   onSelect: () => void; onContextMenu: (e: React.MouseEvent) => void
   onToggle: () => void; onCreate: (e: React.MouseEvent) => void
+  dragHandleProps?: Record<string, unknown>
   isRenaming?: boolean; renameInitialValue?: string
   onRenameSubmit?: (value: string) => void; onRenameCancel?: () => void
 }) {
@@ -194,6 +197,7 @@ function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive,
     <div
       className={cn("group/section flex cursor-pointer select-none items-center justify-between rounded transition-colors", isActive ? "bg-secondary" : "hover:bg-accent")}
       style={{ padding: '6px 8px 6px 16px', borderRadius: 4, gap: 4 }}
+      {...dragHandleProps}
       onClick={() => {
         if (isRenaming) return
         if (isCollapsed) { onToggle(); onSelect() }

src/components/StatusBar.test.tsx

@@ -265,17 +265,46 @@ describe('StatusBar', () => {
     expect(screen.getByText('Index ready')).toBeInTheDocument()
   })
 
-  it('shows error state in indexing badge', () => {
+  it('shows error state in indexing badge with retry label', () => {
     render(
       <StatusBar
         noteCount={100}
         vaultPath="/Users/luca/Laputa"
         vaults={vaults}
         onSwitchVault={vi.fn()}
-        indexingProgress={{ phase: 'error', current: 0, total: 0, done: true, error: 'qmd not available' }}
+        indexingProgress={{ phase: 'error', current: 0, total: 0, done: true, error: 'qmd update failed' }}
       />
     )
-    expect(screen.getByText('Index error')).toBeInTheDocument()
+    expect(screen.getByText('Index failed — retry')).toBeInTheDocument()
+  })
+
+  it('hides indexing badge when phase is unavailable', () => {
+    render(
+      <StatusBar
+        noteCount={100}
+        vaultPath="/Users/luca/Laputa"
+        vaults={vaults}
+        onSwitchVault={vi.fn()}
+        indexingProgress={{ phase: 'unavailable', current: 0, total: 0, done: true, error: 'qmd not available' }}
+      />
+    )
+    expect(screen.queryByTestId('status-indexing')).not.toBeInTheDocument()
+  })
+
+  it('calls onRetryIndexing when clicking error badge', () => {
+    const onRetryIndexing = vi.fn()
+    render(
+      <StatusBar
+        noteCount={100}
+        vaultPath="/Users/luca/Laputa"
+        vaults={vaults}
+        onSwitchVault={vi.fn()}
+        indexingProgress={{ phase: 'error', current: 0, total: 0, done: true, error: 'qmd update failed' }}
+        onRetryIndexing={onRetryIndexing}
+      />
+    )
+    fireEvent.click(screen.getByTestId('status-indexing'))
+    expect(onRetryIndexing).toHaveBeenCalledOnce()
   })
 
   it('hides indexing badge when phase is idle', () => {

src/components/StatusBar.tsx

@@ -32,6 +32,7 @@ interface StatusBarProps {
   buildNumber?: string
   onCheckForUpdates?: () => void
   indexingProgress?: IndexingProgress
+  onRetryIndexing?: () => void
   onRemoveVault?: (path: string) => void
 }
 
@@ -237,23 +238,31 @@ const INDEXING_LABELS: Record<string, string> = {
   scanning: 'Indexing…',
   embedding: 'Embedding…',
   complete: 'Index ready',
-  error: 'Index error',
+  error: 'Index failed — retry',
+  unavailable: 'Search unavailable',
 }
 
-function IndexingBadge({ progress }: { progress: IndexingProgress }) {
-  if (progress.phase === 'idle') return null
+function IndexingBadge({ progress, onRetry }: { progress: IndexingProgress; onRetry?: () => void }) {
+  if (progress.phase === 'idle' || progress.phase === 'unavailable') return null
   const label = INDEXING_LABELS[progress.phase] ?? progress.phase
   const isActive = !progress.done
+  const isError = progress.phase === 'error'
   const showCount = progress.total > 0 && isActive
   const displayText = showCount
     ? `${label} ${progress.current.toLocaleString()}/${progress.total.toLocaleString()}`
     : label
-  const color = progress.phase === 'error' ? 'var(--accent-orange)' : 'var(--accent-blue, #3b82f6)'
+  const color = isError ? 'var(--accent-orange)' : 'var(--accent-blue, #3b82f6)'
 
   return (
     <>
       <span style={SEP_STYLE}>|</span>
-      <span style={{ ...ICON_STYLE, color }} data-testid="status-indexing">
+      <span
+        role={isError && onRetry ? 'button' : undefined}
+        onClick={isError && onRetry ? onRetry : undefined}
+        style={{ ...ICON_STYLE, color, cursor: isError && onRetry ? 'pointer' : 'default' }}
+        title={isError ? 'Click to retry indexing' : undefined}
+        data-testid="status-indexing"
+      >
         {isActive
           ? <Loader2 size={13} className="animate-spin" />
           : <Search size={13} />
@@ -282,7 +291,7 @@ function PendingBadge({ count, onClick }: { count: number; onClick?: () => void
   )
 }
 
-export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onSwitchVault, onOpenSettings, onOpenLocalFolder, onConnectGitHub, onClickPending, hasGitHub, syncStatus = 'idle', lastSyncTime = null, conflictCount = 0, lastCommitInfo, onTriggerSync, onOpenConflictResolver, zoomLevel = 100, onZoomReset, buildNumber, onCheckForUpdates, indexingProgress, onRemoveVault }: StatusBarProps) {
+export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onSwitchVault, onOpenSettings, onOpenLocalFolder, onConnectGitHub, onClickPending, hasGitHub, syncStatus = 'idle', lastSyncTime = null, conflictCount = 0, lastCommitInfo, onTriggerSync, onOpenConflictResolver, zoomLevel = 100, onZoomReset, buildNumber, onCheckForUpdates, indexingProgress, onRetryIndexing, onRemoveVault }: StatusBarProps) {
   const [, setTick] = useState(0)
   useEffect(() => {
     const id = setInterval(() => setTick((t) => t + 1), 30_000)
@@ -308,7 +317,7 @@ export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onS
         {lastCommitInfo && <CommitBadge info={lastCommitInfo} />}
         <ConflictBadge count={conflictCount} onClick={onOpenConflictResolver} />
         <PendingBadge count={modifiedCount} onClick={onClickPending} />
-        {indexingProgress && <IndexingBadge progress={indexingProgress} />}
+        {indexingProgress && <IndexingBadge progress={indexingProgress} onRetry={onRetryIndexing} />}
       </div>
       <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
         <span style={ICON_STYLE}><FileText size={13} />{noteCount.toLocaleString()} notes</span>

src/hooks/useAiActivity.test.ts

@@ -7,6 +7,7 @@ let lastWsInstance: MockWebSocket | null = null
 class MockWebSocket {
   onmessage: ((event: MessageEvent) => void) | null = null
   onerror: (() => void) | null = null
+  onclose: (() => void) | null = null
   close = vi.fn()
   url: string
 
@@ -82,10 +83,10 @@ describe('useAiActivity', () => {
     expect(result.current.highlightElement).toBeNull()
   })
 
-  it('ignores non-highlight messages', () => {
+  it('ignores non-ui_action messages', () => {
     const { result } = renderHook(() => useAiActivity())
     act(() => {
-      sendWsMessage({ type: 'ui_action', action: 'other_action' })
+      sendWsMessage({ type: 'other', action: 'highlight', element: 'editor' })
     })
     expect(result.current.highlightElement).toBeNull()
   })
@@ -112,4 +113,57 @@ describe('useAiActivity', () => {
     expect(result.current.highlightElement).toBe('properties')
     expect(result.current.highlightPath).toBeNull()
   })
+
+  it('calls onOpenNote callback on open_note action', () => {
+    const onOpenNote = vi.fn()
+    renderHook(() => useAiActivity({ onOpenNote }))
+    act(() => {
+      sendWsMessage({ type: 'ui_action', action: 'open_note', path: 'project/foo.md' })
+    })
+    expect(onOpenNote).toHaveBeenCalledWith('project/foo.md')
+  })
+
+  it('calls onOpenTab callback on open_tab action', () => {
+    const onOpenTab = vi.fn()
+    renderHook(() => useAiActivity({ onOpenTab }))
+    act(() => {
+      sendWsMessage({ type: 'ui_action', action: 'open_tab', path: 'note/bar.md' })
+    })
+    expect(onOpenTab).toHaveBeenCalledWith('note/bar.md')
+  })
+
+  it('calls onSetFilter callback on set_filter action', () => {
+    const onSetFilter = vi.fn()
+    renderHook(() => useAiActivity({ onSetFilter }))
+    act(() => {
+      sendWsMessage({ type: 'ui_action', action: 'set_filter', filterType: 'Project' })
+    })
+    expect(onSetFilter).toHaveBeenCalledWith('Project')
+  })
+
+  it('calls onVaultChanged callback on vault_changed action', () => {
+    const onVaultChanged = vi.fn()
+    renderHook(() => useAiActivity({ onVaultChanged }))
+    act(() => {
+      sendWsMessage({ type: 'ui_action', action: 'vault_changed', path: 'note/new.md' })
+    })
+    expect(onVaultChanged).toHaveBeenCalledWith('note/new.md')
+  })
+
+  it('does not call onOpenNote when path is missing', () => {
+    const onOpenNote = vi.fn()
+    renderHook(() => useAiActivity({ onOpenNote }))
+    act(() => {
+      sendWsMessage({ type: 'ui_action', action: 'open_note' })
+    })
+    expect(onOpenNote).not.toHaveBeenCalled()
+  })
+
+  it('reconnects on close after delay', () => {
+    renderHook(() => useAiActivity())
+    const firstWs = lastWsInstance
+    act(() => { firstWs?.onclose?.() })
+    act(() => { vi.advanceTimersByTime(3000) })
+    expect(lastWsInstance).not.toBe(firstWs)
+  })
 })

src/hooks/useAiActivity.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 
 export type HighlightElement = 'editor' | 'tab' | 'properties' | 'notelist' | null
 
@@ -7,58 +7,89 @@ export interface AiActivity {
   highlightPath: string | null
 }
 
+export interface AiActivityCallbacks {
+  onOpenNote?: (path: string) => void
+  onOpenTab?: (path: string) => void
+  onSetFilter?: (type: string) => void
+  onVaultChanged?: (path?: string) => void
+}
+
 const WS_UI_URL = 'ws://localhost:9711'
 const HIGHLIGHT_DURATION_MS = 800
+const RECONNECT_DELAY_MS = 3000
 
 /**
- * Listens on the UI WebSocket bridge (port 9711) for highlight events
- * from the AI agent. Sets highlightElement for 800ms then auto-clears.
+ * Listens on the UI WebSocket bridge (port 9711) for UI action events
+ * from the MCP server. Handles highlight, open_note, open_tab, set_filter,
+ * and vault_changed actions.
  */
-export function useAiActivity(): AiActivity {
+export function useAiActivity(callbacks?: AiActivityCallbacks): AiActivity {
   const [highlightElement, setHighlightElement] = useState<HighlightElement>(null)
   const [highlightPath, setHighlightPath] = useState<string | null>(null)
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const callbacksRef = useRef(callbacks)
+  useEffect(() => { callbacksRef.current = callbacks })
+
+  const handleMessage = useCallback((event: MessageEvent) => {
+    try {
+      const data = JSON.parse(event.data as string)
+      if (data.type !== 'ui_action') return
+      switch (data.action) {
+        case 'highlight':
+          setHighlightElement(data.element ?? null)
+          setHighlightPath(data.path ?? null)
+          if (timerRef.current) clearTimeout(timerRef.current)
+          timerRef.current = setTimeout(() => {
+            setHighlightElement(null)
+            setHighlightPath(null)
+          }, HIGHLIGHT_DURATION_MS)
+          break
+        case 'open_note':
+          if (data.path) callbacksRef.current?.onOpenNote?.(data.path)
+          break
+        case 'open_tab':
+          if (data.path) callbacksRef.current?.onOpenTab?.(data.path)
+          break
+        case 'set_filter':
+          if (data.filterType) callbacksRef.current?.onSetFilter?.(data.filterType)
+          break
+        case 'vault_changed':
+          callbacksRef.current?.onVaultChanged?.(data.path)
+          break
+      }
+    } catch {
+      // Ignore parse errors from malformed messages
+    }
+  }, [])
 
   useEffect(() => {
     let ws: WebSocket | null = null
     let mounted = true
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
 
-    try {
-      ws = new WebSocket(WS_UI_URL)
-
-      ws.onmessage = (event) => {
-        if (!mounted) return
-        try {
-          const data = JSON.parse(event.data as string)
-          if (data.type === 'ui_action' && data.action === 'highlight') {
-            setHighlightElement(data.element ?? null)
-            setHighlightPath(data.path ?? null)
-            if (timerRef.current) clearTimeout(timerRef.current)
-            timerRef.current = setTimeout(() => {
-              if (mounted) {
-                setHighlightElement(null)
-                setHighlightPath(null)
-              }
-            }, HIGHLIGHT_DURATION_MS)
-          }
-        } catch {
-          // Ignore parse errors from malformed messages
+    function connect() {
+      if (!mounted) return
+      try {
+        ws = new WebSocket(WS_UI_URL)
+        ws.onmessage = handleMessage
+        ws.onclose = () => {
+          if (mounted) reconnectTimer = setTimeout(connect, RECONNECT_DELAY_MS)
         }
+        ws.onerror = () => { /* Silent — bridge may not be running */ }
+      } catch {
+        if (mounted) reconnectTimer = setTimeout(connect, RECONNECT_DELAY_MS)
       }
-
-      ws.onerror = () => {
-        // Silent — UI bridge may not be running
-      }
-    } catch {
-      // WebSocket connection failed — bridge not available
     }
 
+    connect()
+
     return () => {
       mounted = false
       ws?.close()
       if (timerRef.current) clearTimeout(timerRef.current)
+      if (reconnectTimer) clearTimeout(reconnectTimer)
     }
-  }, [])
+  }, [handleMessage])
 
   return { highlightElement, highlightPath }
 }

src/hooks/useAiAgent.ts

@@ -63,23 +63,54 @@ export function useAiAgent(vaultPath: string, contextPrompt?: string) {
         update(m => ({ ...m, response: (m.response ?? '') + text }))
       },
 
-      onToolStart: (toolName, toolId) => {
+      onToolStart: (toolName, toolId, input) => {
         if (abortRef.current.aborted) return
         setStatus('tool-executing')
+        update(m => {
+          const existing = m.actions.find(a => a.toolId === toolId)
+          if (existing) {
+            // Re-emitted with input data — update the existing action
+            return {
+              ...m,
+              actions: m.actions.map(a =>
+                a.toolId === toolId ? { ...a, input: input ?? a.input } : a,
+              ),
+            }
+          }
+          return {
+            ...m,
+            actions: [...m.actions, {
+              tool: toolName,
+              toolId,
+              label: formatToolLabel(toolName, toolId),
+              status: 'pending' as const,
+              input,
+            }],
+          }
+        })
+      },
+
+      onToolDone: (toolId, output) => {
+        if (abortRef.current.aborted) return
         update(m => ({
           ...m,
-          actions: [...m.actions, {
-            tool: toolName,
-            label: formatToolLabel(toolName, toolId),
-            status: 'pending' as const,
-          }],
+          actions: m.actions.map(a =>
+            a.toolId === toolId ? { ...a, status: 'done' as const, output } : a,
+          ),
         }))
       },
 
       onError: (error) => {
         if (abortRef.current.aborted) return
         setStatus('error')
-        update(m => ({ ...m, isStreaming: false, response: (m.response ?? '') + `\nError: ${error}` }))
+        update(m => ({
+          ...m,
+          isStreaming: false,
+          response: (m.response ?? '') + `\nError: ${error}`,
+          actions: m.actions.map(a =>
+            a.status === 'pending' ? { ...a, status: 'error' as const } : a,
+          ),
+        }))
       },
 
       onDone: () => {

src/hooks/useIndexing.test.ts

@@ -1,23 +1,18 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderHook, act, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
 import { useIndexing } from './useIndexing'
 
+vi.mock('@tauri-apps/api/core', () => ({ invoke: vi.fn() }))
+vi.mock('@tauri-apps/api/event', () => ({ listen: vi.fn().mockResolvedValue(vi.fn()) }))
 vi.mock('../mock-tauri', () => ({
   isTauri: () => false,
-  mockInvoke: vi.fn().mockImplementation((cmd: string) => {
-    if (cmd === 'get_index_status') {
-      return Promise.resolve({
-        available: true,
-        qmd_installed: true,
-        collection_exists: true,
-        indexed_count: 100,
-        embedded_count: 80,
-        pending_embed: 0,
-      })
-    }
-    if (cmd === 'start_indexing') return Promise.resolve(null)
-    if (cmd === 'trigger_incremental_index') return Promise.resolve(null)
-    return Promise.resolve(null)
+  mockInvoke: vi.fn().mockResolvedValue({
+    available: true,
+    qmd_installed: true,
+    collection_exists: true,
+    indexed_count: 100,
+    embedded_count: 80,
+    pending_embed: 0,
   }),
 }))
 
@@ -25,135 +20,60 @@ const { mockInvoke } = await import('../mock-tauri') as { mockInvoke: ReturnType
 
 describe('useIndexing', () => {
   beforeEach(() => {
+    vi.useFakeTimers()
     vi.clearAllMocks()
+    mockInvoke.mockResolvedValue({
+      available: true,
+      qmd_installed: true,
+      collection_exists: true,
+      indexed_count: 100,
+      embedded_count: 80,
+      pending_embed: 0,
+    })
   })
 
-  it('starts with idle progress', () => {
-    const { result } = renderHook(() => useIndexing('/vault'))
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('starts with idle phase', () => {
+    const { result } = renderHook(() => useIndexing('/test/vault'))
     expect(result.current.progress.phase).toBe('idle')
-    expect(result.current.progress.done).toBe(false)
   })
 
-  it('checks index status on mount', async () => {
-    renderHook(() => useIndexing('/vault'))
-    await waitFor(() => {
-      expect(mockInvoke).toHaveBeenCalledWith('get_index_status', { vaultPath: '/vault' })
-    })
+  it('auto-dismisses error phase after 15 seconds', async () => {
+    const { result } = renderHook(() => useIndexing('/test/vault'))
+
+    // Simulate setting error state via retryIndexing
+    mockInvoke.mockRejectedValueOnce(new Error('qmd update failed'))
+    await act(async () => { await result.current.retryIndexing() })
+    expect(result.current.progress.phase).toBe('error')
+
+    act(() => { vi.advanceTimersByTime(15000) })
+    expect(result.current.progress.phase).toBe('idle')
   })
 
-  it('does not start indexing when collection exists and no pending embeds', async () => {
-    renderHook(() => useIndexing('/vault'))
-    await waitFor(() => {
-      expect(mockInvoke).toHaveBeenCalledWith('get_index_status', { vaultPath: '/vault' })
-    })
-    expect(mockInvoke).not.toHaveBeenCalledWith('start_indexing', expect.anything())
+  it('sets unavailable phase for missing qmd errors', async () => {
+    const { result } = renderHook(() => useIndexing('/test/vault'))
+
+    mockInvoke.mockRejectedValueOnce(new Error('bun not installed'))
+    await act(async () => { await result.current.retryIndexing() })
+    expect(result.current.progress.phase).toBe('unavailable')
   })
 
-  it('starts indexing when collection is missing', async () => {
-    mockInvoke.mockImplementation((cmd: string) => {
-      if (cmd === 'get_index_status') {
-        return Promise.resolve({
-          available: true,
-          qmd_installed: true,
-          collection_exists: false,
-          indexed_count: 0,
-          embedded_count: 0,
-          pending_embed: 0,
-        })
-      }
-      return Promise.resolve(null)
-    })
+  it('auto-dismisses unavailable phase after 8 seconds', async () => {
+    const { result } = renderHook(() => useIndexing('/test/vault'))
 
-    const { result } = renderHook(() => useIndexing('/vault'))
-    await waitFor(() => {
-      expect(mockInvoke).toHaveBeenCalledWith('start_indexing', { vaultPath: '/vault' })
-    })
-    expect(result.current.progress.phase).not.toBe('idle')
+    mockInvoke.mockRejectedValueOnce(new Error('bun not installed'))
+    await act(async () => { await result.current.retryIndexing() })
+    expect(result.current.progress.phase).toBe('unavailable')
+
+    act(() => { vi.advanceTimersByTime(8000) })
+    expect(result.current.progress.phase).toBe('idle')
   })
 
-  it('starts indexing when qmd is not installed', async () => {
-    mockInvoke.mockImplementation((cmd: string) => {
-      if (cmd === 'get_index_status') {
-        return Promise.resolve({
-          available: false,
-          qmd_installed: false,
-          collection_exists: false,
-          indexed_count: 0,
-          embedded_count: 0,
-          pending_embed: 0,
-        })
-      }
-      return Promise.resolve(null)
-    })
-
-    renderHook(() => useIndexing('/vault'))
-    await waitFor(() => {
-      expect(mockInvoke).toHaveBeenCalledWith('start_indexing', { vaultPath: '/vault' })
-    })
-  })
-
-  it('starts indexing when pending embeds exist', async () => {
-    mockInvoke.mockImplementation((cmd: string) => {
-      if (cmd === 'get_index_status') {
-        return Promise.resolve({
-          available: true,
-          qmd_installed: true,
-          collection_exists: true,
-          indexed_count: 100,
-          embedded_count: 80,
-          pending_embed: 20,
-        })
-      }
-      return Promise.resolve(null)
-    })
-
-    renderHook(() => useIndexing('/vault'))
-    await waitFor(() => {
-      expect(mockInvoke).toHaveBeenCalledWith('start_indexing', { vaultPath: '/vault' })
-    })
-  })
-
-  it('triggerIncrementalIndex calls the command', async () => {
-    const { result } = renderHook(() => useIndexing('/vault'))
-    await act(async () => {
-      await result.current.triggerIncrementalIndex()
-    })
-    expect(mockInvoke).toHaveBeenCalledWith('trigger_incremental_index', { vaultPath: '/vault' })
-  })
-
-  it('handles index status check failure gracefully', async () => {
-    mockInvoke.mockImplementation((cmd: string) => {
-      if (cmd === 'get_index_status') return Promise.reject(new Error('network error'))
-      return Promise.resolve(null)
-    })
-
-    const { result } = renderHook(() => useIndexing('/vault'))
-    // Should remain idle — not crash
-    await waitFor(() => {
-      expect(result.current.progress.phase).toBe('idle')
-    })
-  })
-
-  it('sets error phase when start_indexing fails', async () => {
-    mockInvoke.mockImplementation((cmd: string) => {
-      if (cmd === 'get_index_status') {
-        return Promise.resolve({
-          available: false,
-          qmd_installed: false,
-          collection_exists: false,
-          indexed_count: 0,
-          embedded_count: 0,
-          pending_embed: 0,
-        })
-      }
-      if (cmd === 'start_indexing') return Promise.reject(new Error('install failed'))
-      return Promise.resolve(null)
-    })
-
-    const { result } = renderHook(() => useIndexing('/vault'))
-    await waitFor(() => {
-      expect(result.current.progress.phase).toBe('error')
-    })
-    expect(result.current.progress.error).toContain('install failed')
+  it('exposes retryIndexing function', () => {
+    const { result } = renderHook(() => useIndexing('/test/vault'))
+    expect(typeof result.current.retryIndexing).toBe('function')
   })
 })

src/hooks/useIndexing.ts

@@ -3,7 +3,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { isTauri, mockInvoke } from '../mock-tauri'
 
 export interface IndexingProgress {
-  phase: 'idle' | 'installing' | 'scanning' | 'embedding' | 'complete' | 'error'
+  phase: 'idle' | 'installing' | 'scanning' | 'embedding' | 'complete' | 'error' | 'unavailable'
   current: number
   total: number
   done: boolean
@@ -66,7 +66,7 @@ export function useIndexing(vaultPath: string) {
         if (needsIndexing && !indexingRef.current) {
           indexingRef.current = true
           setProgress({
-            phase: 'scanning',
+            phase: status.qmd_installed ? 'scanning' : 'installing',
             current: 0,
             total: status.indexed_count,
             done: false,
@@ -74,16 +74,17 @@ export function useIndexing(vaultPath: string) {
           })
           // Fire and forget — progress updates come via events
           invokeCmd('start_indexing', { vaultPath }).catch((err) => {
-            if (!cancelled) {
-              setProgress({
-                phase: 'error',
-                current: 0,
-                total: 0,
-                done: true,
-                error: String(err),
-              })
-              indexingRef.current = false
-            }
+            if (cancelled) return
+            const msg = String(err)
+            const isUnavailable = msg.includes('not installed') || msg.includes('not available')
+            setProgress({
+              phase: isUnavailable ? 'unavailable' : 'error',
+              current: 0,
+              total: 0,
+              done: true,
+              error: msg,
+            })
+            indexingRef.current = false
           })
         }
       } catch {
@@ -95,12 +96,20 @@ export function useIndexing(vaultPath: string) {
     return () => { cancelled = true }
   }, [vaultPath])
 
-  // Auto-dismiss the "complete" status after 5 seconds
+  // Auto-dismiss transient statuses after a delay
   useEffect(() => {
     if (progress.phase === 'complete') {
       const timer = setTimeout(() => setProgress(IDLE), 5000)
       return () => clearTimeout(timer)
     }
+    if (progress.phase === 'unavailable') {
+      const timer = setTimeout(() => setProgress(IDLE), 8000)
+      return () => clearTimeout(timer)
+    }
+    if (progress.phase === 'error') {
+      const timer = setTimeout(() => setProgress(IDLE), 15000)
+      return () => clearTimeout(timer)
+    }
   }, [progress.phase])
 
   const triggerIncrementalIndex = useCallback(async () => {
@@ -112,5 +121,20 @@ export function useIndexing(vaultPath: string) {
     }
   }, [])
 
-  return { progress, triggerIncrementalIndex }
+  const retryIndexing = useCallback(async () => {
+    if (indexingRef.current || !vaultPathRef.current) return
+    indexingRef.current = true
+    setProgress({ phase: 'scanning', current: 0, total: 0, done: false, error: null })
+    try {
+      await invokeCmd('start_indexing', { vaultPath: vaultPathRef.current })
+    } catch (err) {
+      const msg = String(err)
+      const isUnavailable = msg.includes('not installed') || msg.includes('not available')
+      setProgress({ phase: isUnavailable ? 'unavailable' : 'error', current: 0, total: 0, done: true, error: msg })
+    } finally {
+      indexingRef.current = false
+    }
+  }, [])
+
+  return { progress, triggerIncrementalIndex, retryIndexing }
 }

src/hooks/useThemeManager.test.ts

@@ -478,4 +478,17 @@ describe('useThemeManager', () => {
     // Light theme isDark should be false (default state is false, so this is stable)
     expect(result.current.isDark).toBe(false)
   })
+
+  it('calls ensure_vault_themes on mount with vaultPath', async () => {
+    renderHook(() => useThemeManager('/vault', entries, allContent))
+    await waitFor(() => {
+      expect(mockInvokeFn).toHaveBeenCalledWith('ensure_vault_themes', { vaultPath: '/vault' })
+    })
+  })
+
+  it('does not call ensure_vault_themes when vaultPath is null', async () => {
+    renderHook(() => useThemeManager(null, entries, allContent))
+    await new Promise(r => setTimeout(r, 50))
+    expect(mockInvokeFn).not.toHaveBeenCalledWith('ensure_vault_themes', expect.anything())
+  })
 })

src/hooks/useThemeManager.ts

@@ -196,6 +196,11 @@ export function useThemeManager(
   entries: VaultEntry[],
   allContent: Record<string, string>,
 ): ThemeManager {
+  // Ensure default theme files exist on vault open (creates theme/ dir + defaults if missing)
+  useEffect(() => {
+    if (vaultPath) tauriCall('ensure_vault_themes', { vaultPath }).catch(() => {})
+  }, [vaultPath])
+
   const { activeThemeId, setActiveThemeId, reload } = useThemeSetting(vaultPath)
   const cachedThemeContent = activeThemeId ? allContent[activeThemeId] : undefined
   const { clearDom: clearTheme, isDark } = useThemeApplier(activeThemeId, cachedThemeContent)

src/mock-tauri/mock-handlers.ts

@@ -309,6 +309,7 @@ line-height-base: 1.6
     syncWindowContent()
     return path
   },
+  ensure_vault_themes: (): null => null,
 }
 
 export function addMockEntry(_entry: VaultEntry, content: string): void {

src/test/setup.ts

@@ -2,6 +2,13 @@ import '@testing-library/jest-dom/vitest'
 import { vi } from 'vitest'
 import { createElement, type ReactNode, type ComponentType } from 'react'
 
+// Suppress undici WebSocket ERR_INVALID_ARG_TYPE in jsdom (jsdom Event ≠ Node Event)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+;(globalThis as any).process?.on?.('uncaughtException', (err: Error & { code?: string }) => {
+  if (err.code === 'ERR_INVALID_ARG_TYPE' && err.message?.includes('Event')) return
+  throw err
+})
+
 // Mock scrollIntoView for jsdom (not implemented)
 Element.prototype.scrollIntoView = vi.fn()
 

src/utils/ai-agent.ts

@@ -24,15 +24,16 @@ export function buildAgentSystemPrompt(vaultContext?: string): string {
 type ClaudeAgentStreamEvent =
   | { kind: 'Init'; session_id: string }
   | { kind: 'TextDelta'; text: string }
-  | { kind: 'ToolStart'; tool_name: string; tool_id: string }
-  | { kind: 'ToolDone'; tool_id: string }
+  | { kind: 'ToolStart'; tool_name: string; tool_id: string; input?: string }
+  | { kind: 'ToolDone'; tool_id: string; output?: string }
   | { kind: 'Result'; text: string; session_id: string }
   | { kind: 'Error'; message: string }
   | { kind: 'Done' }
 
 export interface AgentStreamCallbacks {
   onText: (text: string) => void
-  onToolStart: (toolName: string, toolId: string) => void
+  onToolStart: (toolName: string, toolId: string, input?: string) => void
+  onToolDone: (toolId: string, output?: string) => void
   onError: (message: string) => void
   onDone: () => void
 }
@@ -65,7 +66,10 @@ export async function streamClaudeAgent(
         callbacks.onText(data.text)
         break
       case 'ToolStart':
-        callbacks.onToolStart(data.tool_name, data.tool_id)
+        callbacks.onToolStart(data.tool_name, data.tool_id, data.input)
+        break
+      case 'ToolDone':
+        callbacks.onToolDone(data.tool_id, data.output)
         break
       case 'Error':
         callbacks.onError(data.message)