hdsp-jupyter-extension 2.0.1__py3-none-any.whl → 2.0.3__py3-none-any.whl

hdsp_jupyter_extension-2.0.1.data/data/share/jupyter/labextensions/hdsp-agent/static/lib_index_js.622c1a5918b3aafb2315.js → hdsp_jupyter_extension-2.0.3.data/data/share/jupyter/labextensions/hdsp-agent/static/lib_index_js.1366019c413f1d68467f.js

@@ -15,13 +15,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @jupyterlab/ui-components */ "webpack/sharing/consume/default/@jupyterlab/ui-components");
 /* harmony import */ var _jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _SettingsPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SettingsPanel */ "./lib/components/SettingsPanel.js");
-/* harmony import */ var _services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../services/ApiKeyManager */ "./lib/services/ApiKeyManager.js");
-/* harmony import */ var _services_AgentOrchestrator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../services/AgentOrchestrator */ "./lib/services/AgentOrchestrator.js");
-/* harmony import */ var _types_auto_agent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../types/auto-agent */ "./lib/types/auto-agent.js");
-/* harmony import */ var _utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/markdownRenderer */ "./lib/utils/markdownRenderer.js");
-/* harmony import */ var _FileSelectionDialog__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./FileSelectionDialog */ "./lib/components/FileSelectionDialog.js");
-/* harmony import */ var _logoSvg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../logoSvg */ "./lib/logoSvg.js");
+/* harmony import */ var _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @jupyterlab/notebook */ "webpack/sharing/consume/default/@jupyterlab/notebook");
+/* harmony import */ var _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _SettingsPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SettingsPanel */ "./lib/components/SettingsPanel.js");
+/* harmony import */ var _services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../services/ApiKeyManager */ "./lib/services/ApiKeyManager.js");
+/* harmony import */ var _services_AgentOrchestrator__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../services/AgentOrchestrator */ "./lib/services/AgentOrchestrator.js");
+/* harmony import */ var _types_auto_agent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../types/auto-agent */ "./lib/types/auto-agent.js");
+/* harmony import */ var _utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/markdownRenderer */ "./lib/utils/markdownRenderer.js");
+/* harmony import */ var _FileSelectionDialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./FileSelectionDialog */ "./lib/components/FileSelectionDialog.js");
+/* harmony import */ var _logoSvg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../logoSvg */ "./lib/logoSvg.js");
 /**
  * Agent Panel - Main sidebar panel for Jupyter Agent
  * Cursor AI Style: Unified Chat + Agent Interface
@@ -34,12 +36,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // 로고 이미지 (SVG) - TypeScript 모듈에서 인라인 문자열로 import
 
 // 탭바 아이콘 생성
 const hdspTabIcon = new _jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_1__.LabIcon({
     name: 'hdsp-agent:tab-icon',
-    svgstr: _logoSvg__WEBPACK_IMPORTED_MODULE_8__.tabbarLogoSvg
+    svgstr: _logoSvg__WEBPACK_IMPORTED_MODULE_9__.tabbarLogoSvg
 });
 // Agent 명령어 감지 함수
 const isAgentCommand = (input) => {
@@ -196,6 +199,194 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
     // File selection state
     const [fileSelectionMetadata, setFileSelectionMetadata] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
     const [pendingAgentRequest, setPendingAgentRequest] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    // Human-in-the-Loop state
+    const [debugStatus, setDebugStatus] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    const [interruptData, setInterruptData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    // Todo list state (from TodoListMiddleware)
+    const [todos, setTodos] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
+    const [isTodoExpanded, setIsTodoExpanded] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    const interruptMessageIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+    const approvalPendingRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+    const pendingToolCallsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);
+    const handledToolCallKeysRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(new Set());
+    const getActiveNotebookPanel = () => {
+        const app = window.jupyterapp;
+        if (app?.shell?.currentWidget) {
+            const currentWidget = app.shell.currentWidget;
+            if (currentWidget instanceof _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__.NotebookPanel) {
+                return currentWidget;
+            }
+            if ('content' in currentWidget && currentWidget.content?.model) {
+                return currentWidget;
+            }
+        }
+        return notebookTracker?.currentWidget || null;
+    };
+    const insertCell = (notebook, cellType, source) => {
+        const model = notebook.content?.model;
+        if (!model?.sharedModel) {
+            console.warn('[AgentPanel] Notebook model not ready for insert');
+            return null;
+        }
+        const insertIndex = model.cells.length;
+        model.sharedModel.insertCell(insertIndex, {
+            cell_type: cellType,
+            source
+        });
+        notebook.content.activeCellIndex = insertIndex;
+        return insertIndex;
+    };
+    const executeCell = async (notebook, cellIndex) => {
+        try {
+            await notebook.sessionContext.ready;
+            notebook.content.activeCellIndex = cellIndex;
+            await _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__.NotebookActions.run(notebook.content, notebook.sessionContext);
+        }
+        catch (error) {
+            console.error('[AgentPanel] Cell execution failed:', error);
+        }
+    };
+    const captureExecutionResult = (notebook, cellIndex) => {
+        const cell = notebook.content.widgets[cellIndex];
+        const model = cell?.model;
+        const outputs = model?.outputs;
+        const rawState = model?.executionState;
+        const executionState = typeof rawState === 'string'
+            ? rawState
+            : rawState?.get?.() ?? rawState?.value ?? null;
+        const result = {
+            success: true,
+            output: '',
+            error: undefined,
+            error_type: undefined,
+            traceback: undefined,
+            execution_count: model?.executionCount ?? null,
+            execution_state: executionState,
+            kernel_status: notebook.sessionContext?.session?.kernel?.status ?? null,
+            cell_type: model?.type ?? null,
+            outputs: [],
+        };
+        if (!outputs || outputs.length === 0) {
+            return result;
+        }
+        const stripImageData = (data) => {
+            const filtered = {};
+            Object.keys(data || {}).forEach((key) => {
+                if (!key.toLowerCase().startsWith('image/')) {
+                    filtered[key] = data[key];
+                }
+            });
+            return filtered;
+        };
+        const errorSignatures = [
+            'command not found',
+            'ModuleNotFoundError',
+            'No module named',
+            'Traceback (most recent call last)',
+            'Error:',
+        ];
+        for (let i = 0; i < outputs.length; i++) {
+            const output = outputs.get(i);
+            const json = output.toJSON?.() || output;
+            let sanitizedOutput = json;
+            if (output.type === 'error') {
+                result.outputs.push(sanitizedOutput);
+                result.success = false;
+                result.error_type = json.ename;
+                result.error = json.evalue;
+                if (Array.isArray(json.traceback)) {
+                    result.traceback = json.traceback;
+                }
+            }
+            else if (output.type === 'stream' && json.text) {
+                result.outputs.push(sanitizedOutput);
+                result.output += json.text;
+                const lowerText = json.text.toLowerCase();
+                if (errorSignatures.some(signature => lowerText.includes(signature.toLowerCase()))) {
+                    result.success = false;
+                    result.error_type = 'runtime_error';
+                    result.error = json.text.trim();
+                }
+            }
+            else if ((output.type === 'execute_result' || output.type === 'display_data') && json.data) {
+                const filteredData = stripImageData(json.data);
+                if (Object.keys(filteredData).length > 0) {
+                    sanitizedOutput = { ...json, data: filteredData };
+                    result.outputs.push(sanitizedOutput);
+                    result.output += JSON.stringify(filteredData);
+                }
+            }
+        }
+        return result;
+    };
+    const executePendingApproval = async () => {
+        const notebook = getActiveNotebookPanel();
+        if (!notebook) {
+            console.warn('[AgentPanel] No active notebook to execute cell');
+            return null;
+        }
+        const pending = pendingToolCallsRef.current;
+        if (pending.length === 0) {
+            approvalPendingRef.current = false;
+            return null;
+        }
+        const next = pending.shift();
+        if (!next) {
+            approvalPendingRef.current = false;
+            return null;
+        }
+        if (next.tool === 'jupyter_cell' && next.code && typeof next.cellIndex === 'number') {
+            await executeCell(notebook, next.cellIndex);
+            const execResult = captureExecutionResult(notebook, next.cellIndex);
+            execResult.code = next.code;
+            next.execution_result = execResult;
+            console.log('[AgentPanel] Executed approved code cell from tool call');
+            approvalPendingRef.current = pendingToolCallsRef.current.length > 0;
+            return next;
+        }
+        approvalPendingRef.current = pendingToolCallsRef.current.length > 0;
+        return next;
+    };
+    const queueApprovalCell = (code) => {
+        const notebook = getActiveNotebookPanel();
+        if (!notebook) {
+            console.warn('[AgentPanel] No active notebook to add approval cell');
+            return;
+        }
+        const key = `jupyter_cell:${code}`;
+        if (handledToolCallKeysRef.current.has(key)) {
+            return;
+        }
+        const index = insertCell(notebook, 'code', code);
+        if (index === null) {
+            return;
+        }
+        handledToolCallKeysRef.current.add(key);
+        approvalPendingRef.current = true;
+        pendingToolCallsRef.current.push({ tool: 'jupyter_cell', code, cellIndex: index });
+        console.log('[AgentPanel] Added code cell pending approval via interrupt');
+    };
+    const handleToolCall = (toolCall) => {
+        const key = `${toolCall.tool}:${toolCall.code || toolCall.content || ''}`;
+        if (handledToolCallKeysRef.current.has(key)) {
+            return;
+        }
+        if (toolCall.tool === 'jupyter_cell') {
+            return;
+        }
+        if (toolCall.tool === 'markdown' && toolCall.content) {
+            const notebook = getActiveNotebookPanel();
+            if (!notebook) {
+                console.warn('[AgentPanel] No active notebook to add markdown');
+                return;
+            }
+            const index = insertCell(notebook, 'markdown', toolCall.content);
+            if (index !== null) {
+                handledToolCallKeysRef.current.add(key);
+                console.log('[AgentPanel] Added markdown cell from tool call');
+            }
+        }
+    };
     // 모드 변경 시 로컬 스토리지에 저장
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
         try {
@@ -211,6 +402,10 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
     const currentCellIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     const currentCellIndexRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     const orchestratorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+    const makeMessageId = (suffix) => {
+        const base = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        return suffix ? `${base}-${suffix}` : base;
+    };
     // Expose handleSendMessage via ref
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, () => ({
         handleSendMessage: async () => {
@@ -342,7 +537,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         // CRITICAL: Prevent concurrent agent executions
         if (isAgentRunning) {
             const errorMessage = {
-                id: Date.now().toString(),
+                id: makeMessageId(),
                 role: 'assistant',
                 content: '⚠️ 이전 작업이 아직 실행 중입니다. 완료될 때까지 기다려주세요.',
                 timestamp: Date.now(),
@@ -373,7 +568,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         if (!notebook || !sessionContext) {
             // 노트북이 없으면 에러 메시지 표시
             const errorMessage = {
-                id: Date.now().toString(),
+                id: makeMessageId(),
                 role: 'assistant',
                 content: '노트북을 먼저 열어주세요. Agent 실행은 활성 노트북이 필요합니다.',
                 timestamp: Date.now(),
@@ -382,8 +577,8 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
             return;
         }
         // ★ 현재 활성화된 노트북으로 AgentOrchestrator 재생성 (탭 전환 대응)
-        const config = { ..._types_auto_agent__WEBPACK_IMPORTED_MODULE_5__.DEFAULT_AUTO_AGENT_CONFIG, executionSpeed };
-        const orchestrator = new _services_AgentOrchestrator__WEBPACK_IMPORTED_MODULE_4__.AgentOrchestrator(notebook, sessionContext, apiService, config);
+        const config = { ..._types_auto_agent__WEBPACK_IMPORTED_MODULE_6__.DEFAULT_AUTO_AGENT_CONFIG, executionSpeed };
+        const orchestrator = new _services_AgentOrchestrator__WEBPACK_IMPORTED_MODULE_5__.AgentOrchestrator(notebook, sessionContext, apiService, config);
         // Agent 실행 메시지 생성
         const agentMessageId = `agent-${Date.now()}`;
         const agentMessage = {
@@ -402,7 +597,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         setIsAgentRunning(true);
         try {
             // Get current llmConfig for the agent execution
-            const currentLlmConfig = llmConfig || (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.getLLMConfig)() || (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.getDefaultLLMConfig)();
+            const currentLlmConfig = llmConfig || (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.getLLMConfig)() || (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.getDefaultLLMConfig)();
             const result = await orchestrator.executeTask(request, notebook, (newStatus) => {
                 // 실시간 상태 업데이트
                 setMessages(prev => prev.map(msg => msg.id === agentMessageId && 'type' in msg && msg.type === 'agent_execution'
@@ -470,10 +665,10 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
     }, [notebookTracker, apiService]);
     const loadConfig = () => {
         // Load from localStorage using ApiKeyManager
-        const config = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.getLLMConfig)();
+        const config = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.getLLMConfig)();
         if (!config) {
             console.log('[AgentPanel] No config in localStorage, using default');
-            const defaultConfig = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.getDefaultLLMConfig)();
+            const defaultConfig = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.getDefaultLLMConfig)();
             setLlmConfig(defaultConfig);
             return;
         }
@@ -639,7 +834,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         console.log('[AgentPanel] File fix response received, fixed files:', fixedFiles.length);
         // Assistant 메시지로 응답 표시
         const assistantMessage = {
-            id: Date.now().toString() + '-file-fix',
+            id: makeMessageId('file-fix'),
             role: 'assistant',
             content: response,
             timestamp: Date.now(),
@@ -658,7 +853,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         if (success) {
             // 성공 메시지
             const successMessage = {
-                id: Date.now().toString() + '-apply-success',
+                id: makeMessageId('apply-success'),
                 role: 'assistant',
                 content: `✅ **${fix.path}** 파일이 수정되었습니다.\n\n파일 에디터에서 변경사항을 확인하세요.`,
                 timestamp: Date.now(),
@@ -674,7 +869,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
     // 에러 메시지 추가 헬퍼
     const addErrorMessage = (message) => {
         const errorMessage = {
-            id: Date.now().toString() + '-error',
+            id: makeMessageId('error'),
             role: 'assistant',
             content: `⚠️ ${message}`,
             timestamp: Date.now(),
@@ -684,9 +879,9 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
     const handleSaveConfig = (config) => {
         console.log('[AgentPanel] Saving config to localStorage');
         console.log('Provider:', config.provider);
-        console.log('API Key configured:', (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.hasValidApiKey)(config) ? '✓ Yes' : '✗ No');
+        console.log('API Key configured:', (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.hasValidApiKey)(config) ? '✓ Yes' : '✗ No');
         // Save to localStorage using ApiKeyManager
-        (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.saveLLMConfig)(config);
+        (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.saveLLMConfig)(config);
         // Update state
         setLlmConfig(config);
         console.log('[AgentPanel] Config saved successfully');
@@ -766,10 +961,17 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         setIsAgentRunning(false);
         setCurrentAgentMessageId(null);
     };
-    // Auto-scroll to bottom when messages change
+    // Auto-scroll to bottom when messages change or streaming
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [messages]);
+        if (isStreaming) {
+            // 스트리밍 중에는 즉시 스크롤
+            messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });
+        }
+        else {
+            // 일반 메시지 추가 시 부드러운 스크롤
+            messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages, isStreaming]);
     // Extract and store code blocks from messages, setup button listeners
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
         // Use a small delay to ensure DOM is updated after message rendering
@@ -1360,6 +1562,171 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
         div.textContent = text;
         return div.innerHTML;
     };
+    const isAutoApprovedCode = (code) => {
+        const lines = code
+            .split('\n')
+            .map(line => line.trim())
+            .filter(line => line.length > 0 && !line.startsWith('#'));
+        if (lines.length === 0) {
+            return true;
+        }
+        const disallowedPatterns = [
+            /(^|[^=!<>])=([^=]|$)/,
+            /\.read_[a-zA-Z0-9_]*\s*\(/,
+            /\bread_[a-zA-Z0-9_]*\s*\(/,
+            /\.to_[a-zA-Z0-9_]*\s*\(/,
+        ];
+        if (lines.some(line => disallowedPatterns.some(pattern => pattern.test(line)))) {
+            return false;
+        }
+        const allowedPatterns = [
+            /^print\(.+\)$/,
+            /^display\(.+\)$/,
+            /^df\.(head|info|describe)\s*\(.*\)$/,
+            /^display\(df\.(head|info|describe)\s*\(.*\)\)$/,
+            /^df\.(tail|sample)\s*\(.*\)$/,
+            /^display\(df\.(tail|sample)\s*\(.*\)\)$/,
+            /^df\.(shape|columns|dtypes)$/,
+            /^import\s+pandas\s+as\s+pd$/,
+        ];
+        return lines.every(line => allowedPatterns.some(pattern => pattern.test(line)));
+    };
+    const upsertInterruptMessage = (interrupt) => {
+        const interruptMessageId = interruptMessageIdRef.current || makeMessageId('interrupt');
+        interruptMessageIdRef.current = interruptMessageId;
+        const interruptMessage = {
+            id: interruptMessageId,
+            role: 'system',
+            content: interrupt.description || '코드 실행 승인이 필요합니다.',
+            timestamp: Date.now(),
+            metadata: { interrupt }
+        };
+        setMessages(prev => {
+            const hasExisting = prev.some(msg => msg.id === interruptMessageId);
+            if (hasExisting) {
+                return prev.map(msg => msg.id === interruptMessageId ? interruptMessage : msg);
+            }
+            return [...prev, interruptMessage];
+        });
+    };
+    const clearInterruptMessage = () => {
+        if (!interruptMessageIdRef.current)
+            return;
+        const messageId = interruptMessageIdRef.current;
+        interruptMessageIdRef.current = null;
+        setMessages(prev => prev.map(msg => {
+            // Only IChatMessage has metadata property (check via 'role' property)
+            if (msg.id === messageId && 'role' in msg) {
+                const chatMsg = msg;
+                return {
+                    ...chatMsg,
+                    metadata: {
+                        ...chatMsg.metadata,
+                        interrupt: {
+                            ...(chatMsg.metadata?.interrupt || {}),
+                            resolved: true
+                        }
+                    }
+                };
+            }
+            return msg;
+        }));
+    };
+    const resumeFromInterrupt = async (interrupt, decision) => {
+        const { threadId } = interrupt;
+        setInterruptData(null);
+        setDebugStatus(null);
+        clearInterruptMessage();
+        let resumeDecision = decision;
+        let resumeArgs = undefined;
+        if (decision === 'approve') {
+            const executed = await executePendingApproval();
+            if (executed && executed.tool === 'jupyter_cell') {
+                resumeDecision = 'edit';
+                resumeArgs = {
+                    code: executed.code,
+                    execution_result: executed.execution_result
+                };
+            }
+            else if (executed && executed.tool === 'markdown') {
+                resumeDecision = 'edit';
+                resumeArgs = {
+                    content: executed.content
+                };
+            }
+        }
+        else {
+            pendingToolCallsRef.current.shift();
+            approvalPendingRef.current = pendingToolCallsRef.current.length > 0;
+        }
+        setIsLoading(true);
+        setIsStreaming(true);
+        let interrupted = false;
+        // 항상 새 메시지 생성 - 승인 UI 아래에 append되도록
+        const assistantMessageId = makeMessageId('assistant');
+        setStreamingMessageId(assistantMessageId);
+        // 새 메시지 추가 (맨 아래에 append)
+        setMessages(prev => [
+            ...prev,
+            {
+                id: assistantMessageId,
+                role: 'assistant',
+                content: '',
+                timestamp: Date.now()
+            }
+        ]);
+        let streamedContent = '';
+        try {
+            await apiService.resumeAgent(threadId, resumeDecision, resumeArgs, resumeDecision === 'reject' ? 'User rejected this action' : undefined, llmConfig || undefined, (chunk) => {
+                streamedContent += chunk;
+                setMessages(prev => prev.map(msg => msg.id === assistantMessageId && isChatMessage(msg)
+                    ? { ...msg, content: streamedContent }
+                    : msg));
+            }, (status) => {
+                setDebugStatus(status);
+            }, (nextInterrupt) => {
+                interrupted = true;
+                approvalPendingRef.current = true;
+                if (nextInterrupt.action === 'jupyter_cell_tool' && nextInterrupt.args?.code) {
+                    if (isAutoApprovedCode(nextInterrupt.args.code)) {
+                        queueApprovalCell(nextInterrupt.args.code);
+                        void resumeFromInterrupt(nextInterrupt, 'approve');
+                        return;
+                    }
+                    queueApprovalCell(nextInterrupt.args.code);
+                }
+                setInterruptData(nextInterrupt);
+                upsertInterruptMessage(nextInterrupt);
+                setIsLoading(false);
+                setIsStreaming(false);
+            }, (newTodos) => {
+                setTodos(newTodos);
+            }, () => {
+                setDebugStatus(null);
+            }, handleToolCall);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to resume';
+            setDebugStatus(`오류: ${message}`);
+            console.error('Resume failed:', error);
+            setMessages(prev => [
+                ...prev,
+                {
+                    id: makeMessageId(),
+                    role: 'assistant',
+                    content: `Error: ${message}`,
+                    timestamp: Date.now()
+                }
+            ]);
+        }
+        finally {
+            setIsLoading(false);
+            setIsStreaming(false);
+            if (!interrupted) {
+                approvalPendingRef.current = false;
+            }
+        }
+    };
     const handleSendMessage = async () => {
         // Check if there's an LLM prompt stored (from cell action)
         const textarea = messagesEndRef.current?.parentElement?.querySelector('.jp-agent-input');
@@ -1389,7 +1756,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
                     console.log('[AgentPanel] Agent mode: No notebook, but Python error detected - switching to file fix mode');
                     // User 메시지 추가
                     const userMessage = {
-                        id: Date.now().toString(),
+                        id: makeMessageId(),
                         role: 'user',
                         content: currentInput,
                         timestamp: Date.now(),
@@ -1421,7 +1788,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
                     console.log('[AgentPanel] Agent mode: No notebook, file fix request detected - prompting for error details');
                     // User 메시지 추가
                     const userMessage = {
-                        id: Date.now().toString(),
+                        id: makeMessageId(),
                         role: 'user',
                         content: currentInput,
                         timestamp: Date.now(),
@@ -1430,7 +1797,7 @@ const ChatPanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ apiServic
                     setInput('');
                     // 에러 메시지 요청 안내
                     const guideMessage = {
-                        id: Date.now().toString() + '-guide',
+                        id: makeMessageId('guide'),
                         role: 'assistant',
                         content: `파일 에러 수정을 도와드리겠습니다! 🔧
 
@@ -1462,7 +1829,7 @@ SyntaxError: '(' was never closed
                 // 노트북이 있으면 Agent 실행
                 // User 메시지 추가
                 const userMessage = {
-                    id: Date.now().toString(),
+                    id: makeMessageId(),
                     role: 'user',
                     content: `@agent ${currentInput}`,
                     timestamp: Date.now(),
@@ -1480,7 +1847,7 @@ SyntaxError: '(' was never closed
             if (agentRequest) {
                 // User 메시지 추가
                 const userMessage = {
-                    id: Date.now().toString(),
+                    id: makeMessageId(),
                     role: 'user',
                     content: currentInput,
                     timestamp: Date.now(),
@@ -1497,7 +1864,7 @@ SyntaxError: '(' was never closed
             console.log('[AgentPanel] Python error detected in message');
             // User 메시지 추가
             const userMessage = {
-                id: Date.now().toString(),
+                id: makeMessageId(),
                 role: 'user',
                 content: currentInput,
                 timestamp: Date.now(),
@@ -1512,16 +1879,16 @@ SyntaxError: '(' was never closed
         let currentConfig = llmConfig;
         if (!currentConfig) {
             // Config not loaded yet, try to load from localStorage
-            currentConfig = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.getLLMConfig)() || (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.getDefaultLLMConfig)();
+            currentConfig = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.getLLMConfig)() || (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.getDefaultLLMConfig)();
             setLlmConfig(currentConfig);
         }
         // Check API key using ApiKeyManager
-        const hasApiKey = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_3__.hasValidApiKey)(currentConfig);
+        const hasApiKey = (0,_services_ApiKeyManager__WEBPACK_IMPORTED_MODULE_4__.hasValidApiKey)(currentConfig);
         if (!hasApiKey) {
             // Show error message and open settings
             const providerName = llmConfig?.provider || 'LLM';
             const errorMessage = {
-                id: Date.now().toString(),
+                id: makeMessageId(),
                 role: 'assistant',
                 content: `API Key가 설정되지 않았습니다.\n\n${providerName === 'gemini' ? 'Gemini' : providerName === 'openai' ? 'OpenAI' : 'vLLM'} API Key를 먼저 설정해주세요.\n\n설정 버튼을 클릭하여 API Key를 입력하세요.`,
                 timestamp: Date.now()
@@ -1533,7 +1900,7 @@ SyntaxError: '(' was never closed
         // Use the display prompt (input) for the user message, or use a fallback if input is empty
         const displayContent = currentInput || (llmPrompt ? '셀 분석 요청' : '');
         const userMessage = {
-            id: Date.now().toString(),
+            id: makeMessageId(),
             role: 'user',
             content: displayContent,
             timestamp: Date.now()
@@ -1551,7 +1918,7 @@ SyntaxError: '(' was never closed
             pendingLlmPromptRef.current = null;
         }
         // Create assistant message ID for streaming updates
-        const assistantMessageId = Date.now().toString() + '-assistant';
+        const assistantMessageId = makeMessageId('assistant');
         let streamedContent = '';
         setStreamingMessageId(assistantMessageId);
         // Add empty assistant message that will be updated during streaming
@@ -1562,6 +1929,7 @@ SyntaxError: '(' was never closed
             timestamp: Date.now()
         };
         setMessages(prev => [...prev, initialAssistantMessage]);
+        let interrupted = false;
         try {
             // Use LLM prompt if available, otherwise use the display content
             const messageToSend = llmPrompt || displayContent;
@@ -1594,14 +1962,47 @@ SyntaxError: '(' was never closed
                         }
                         : msg));
                 }
-            });
+            }, 
+            // onDebug callback - show debug status in gray
+            (status) => {
+                setDebugStatus(status);
+            }, 
+            // onInterrupt callback - show approval dialog
+            (interrupt) => {
+                interrupted = true;
+                approvalPendingRef.current = true;
+                if (interrupt.action === 'jupyter_cell_tool' && interrupt.args?.code) {
+                    if (isAutoApprovedCode(interrupt.args.code)) {
+                        queueApprovalCell(interrupt.args.code);
+                        void resumeFromInterrupt(interrupt, 'approve');
+                        return;
+                    }
+                    queueApprovalCell(interrupt.args.code);
+                }
+                setInterruptData(interrupt);
+                upsertInterruptMessage(interrupt);
+                setIsLoading(false);
+                setIsStreaming(false);
+            }, 
+            // onTodos callback - update todo list UI
+            (newTodos) => {
+                setTodos(newTodos);
+            }, 
+            // onDebugClear callback - clear debug status
+            () => {
+                setDebugStatus(null);
+            }, 
+            // onToolCall callback - add cells to notebook
+            handleToolCall);
         }
         catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to send message';
+            setDebugStatus(`오류: ${message}`);
             // Update the assistant message with error
             setMessages(prev => prev.map(msg => msg.id === assistantMessageId && isChatMessage(msg)
                 ? {
                     ...msg,
-                    content: streamedContent + `\n\nError: ${error instanceof Error ? error.message : 'Failed to send message'}`
+                    content: streamedContent + `\n\nError: ${message}`
                 }
                 : msg));
         }
@@ -1609,8 +2010,15 @@ SyntaxError: '(' was never closed
             setIsLoading(false);
             setIsStreaming(false);
             setStreamingMessageId(null);
+            // Keep completed todos visible after the run
         }
     };
+    // Handle resume after user approval/rejection
+    const handleResumeAgent = async (decision) => {
+        if (!interruptData)
+            return;
+        await resumeFromInterrupt(interruptData, decision);
+    };
     const handleKeyDown = (e) => {
         // Enter: 전송
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -1707,7 +2115,7 @@ SyntaxError: '(' was never closed
                                 .map((tc, i) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { key: i, className: "jp-agent-execution-tool-tag" }, tc.tool)))))));
                 })))),
             result && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `jp-agent-execution-result jp-agent-execution-result--${result.success ? 'success' : 'error'}` },
-                result.finalAnswer && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-execution-result-message jp-RenderedHTMLCommon", dangerouslySetInnerHTML: { __html: (0,_utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_6__.formatMarkdownToHtml)(result.finalAnswer) } })),
+                result.finalAnswer && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-execution-result-message jp-RenderedHTMLCommon", dangerouslySetInnerHTML: { __html: (0,_utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_7__.formatMarkdownToHtml)(result.finalAnswer) } })),
                 result.error && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "jp-agent-execution-result-error" }, result.error)),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-execution-result-stats" },
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null,
@@ -1724,10 +2132,40 @@ SyntaxError: '(' was never closed
     const isChatMessage = (msg) => {
         return !('type' in msg) || msg.type !== 'agent_execution';
     };
+    const mapStatusText = (raw) => {
+        const normalized = raw.toLowerCase();
+        if (normalized.includes('calling tool')) {
+            return raw.replace(/Calling tool:/gi, '도구 호출 중:').trim();
+        }
+        if (normalized.includes('waiting for user approval')) {
+            return '승인 대기 중...';
+        }
+        if (normalized.includes('resuming execution')) {
+            return '승인 반영 후 실행 재개 중...';
+        }
+        if (normalized.includes('tool')) {
+            return '도구 실행 중...';
+        }
+        return raw;
+    };
+    const getStatusText = () => {
+        if (interruptData) {
+            return `승인 대기: ${interruptData.action}`;
+        }
+        if (debugStatus) {
+            return mapStatusText(debugStatus);
+        }
+        if (isLoading || isStreaming) {
+            // 기본 상태 메시지 - todo 내용은 compact todo UI에서 표시
+            return '요청 처리 중';
+        }
+        return null;
+    };
+    const statusText = getStatusText();
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-panel" },
-        showSettings && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SettingsPanel__WEBPACK_IMPORTED_MODULE_2__.SettingsPanel, { onClose: () => setShowSettings(false), onSave: handleSaveConfig, currentConfig: llmConfig || undefined })),
+        showSettings && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SettingsPanel__WEBPACK_IMPORTED_MODULE_3__.SettingsPanel, { onClose: () => setShowSettings(false), onSave: handleSaveConfig, currentConfig: llmConfig || undefined })),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-header" },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-header-logo", dangerouslySetInnerHTML: { __html: _logoSvg__WEBPACK_IMPORTED_MODULE_8__.headerLogoSvg } }),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-header-logo", dangerouslySetInnerHTML: { __html: _logoSvg__WEBPACK_IMPORTED_MODULE_9__.headerLogoSvg } }),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-header-buttons" },
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "jp-agent-clear-button", onClick: clearChat, title: "\uB300\uD654 \uCD08\uAE30\uD654" },
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
@@ -1754,13 +2192,46 @@ SyntaxError: '(' was never closed
                     : '메시지를 입력하거나 아래 버튼으로 Agent 모드를 선택하세요.'))) : (messages.map(msg => {
                 if (isChatMessage(msg)) {
                     // 일반 Chat 메시지
-                    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: msg.id, className: `jp-agent-message jp-agent-message-${msg.role}` },
-                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-message-header" },
-                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-message-role" }, msg.role === 'user' ? '사용자' : 'Agent'),
-                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-message-time" }, new Date(msg.timestamp).toLocaleTimeString())),
-                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `jp-agent-message-content${streamingMessageId === msg.id ? ' streaming' : ''}` }, msg.role === 'assistant' ? (
+                    const isAssistant = msg.role === 'assistant';
+                    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: msg.id, className: isAssistant
+                            ? 'jp-agent-message jp-agent-message-assistant-inline'
+                            : `jp-agent-message jp-agent-message-${msg.role}` },
+                        !isAssistant && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-message-header" },
+                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-message-role" }, msg.role === 'user' ? '사용자' : msg.role === 'system' ? '승인 요청' : 'Agent'),
+                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-message-time" }, new Date(msg.timestamp).toLocaleTimeString()))),
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `jp-agent-message-content${streamingMessageId === msg.id ? ' streaming' : ''}` }, msg.role === 'system' && msg.metadata?.interrupt ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-interrupt-inline" },
+                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-interrupt-description" }, msg.content),
+                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-interrupt-action" },
+                                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-interrupt-action-args" }, (() => {
+                                    const code = msg.metadata?.interrupt?.args?.code || msg.metadata?.interrupt?.args?.content || '';
+                                    const lines = code.split('\n');
+                                    const preview = lines.slice(0, 8).join('\n');
+                                    const suffix = lines.length > 8 ? '\n...' : '';
+                                    const resolved = msg.metadata?.interrupt?.resolved;
+                                    const actionHtml = resolved
+                                        ? '<div class="jp-agent-interrupt-actions jp-agent-interrupt-actions--resolved">승인됨</div>'
+                                        : `
+<div class="code-block-actions jp-agent-interrupt-actions">
+  <button class="jp-agent-interrupt-approve-btn" data-action="approve">승인</button>
+  <button class="jp-agent-interrupt-reject-btn" data-action="reject">거부</button>
+</div>
+`;
+                                    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-RenderedHTMLCommon", style: { padding: '0 4px' }, dangerouslySetInnerHTML: { __html: (0,_utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_7__.formatMarkdownToHtml)(`\n\`\`\`python\n${preview}${suffix}\n\`\`\``).replace('</div>', `${actionHtml}</div>`) }, onClick: (event) => {
+                                            const target = event.target;
+                                            const action = target?.getAttribute?.('data-action');
+                                            if (msg.metadata?.interrupt?.resolved) {
+                                                return;
+                                            }
+                                            if (action === 'approve') {
+                                                handleResumeAgent('approve');
+                                            }
+                                            else if (action === 'reject') {
+                                                handleResumeAgent('reject');
+                                            }
+                                        } }));
+                                })())))) : msg.role === 'assistant' ? (
                         // Assistant(AI) 메시지: 마크다운 HTML 렌더링 + Jupyter 스타일 적용
-                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-RenderedHTMLCommon", style: { padding: '0 5px' }, dangerouslySetInnerHTML: { __html: (0,_utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_6__.formatMarkdownToHtml)(msg.content) } })) : (
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-RenderedHTMLCommon", style: { padding: '0 5px' }, dangerouslySetInnerHTML: { __html: (0,_utils_markdownRenderer__WEBPACK_IMPORTED_MODULE_7__.formatMarkdownToHtml)(msg.content) } })) : (
                         // User(사용자) 메시지: 텍스트 그대로 줄바꿈만 처리
                         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { style: { whiteSpace: 'pre-wrap' } }, msg.content)))));
                 }
@@ -1769,13 +2240,6 @@ SyntaxError: '(' was never closed
                     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: msg.id, className: "jp-agent-message jp-agent-message-agent-execution" }, renderAgentExecutionMessage(msg)));
                 }
             })),
-            isLoading && !isStreaming && !isAgentRunning && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-message jp-agent-message-assistant" },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-message-header" },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-message-role" }, "Agent")),
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-message-content jp-agent-loading" },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-loading-dot" }, "."),
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-loading-dot" }, "."),
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-loading-dot" }, ".")))),
             showConsoleErrorNotification && lastConsoleError && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-console-error-notification" },
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-console-error-header" },
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16" },
@@ -1812,6 +2276,38 @@ SyntaxError: '(' was never closed
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "jp-agent-file-fix-apply", onClick: () => applyFileFix(fix), title: `${fix.path} 파일에 수정 적용` }, "\uC801\uC6A9\uD558\uAE30"))))),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "jp-agent-file-fixes-dismiss", onClick: () => setPendingFileFixes([]), title: "\uC218\uC815 \uC81C\uC548 \uB2EB\uAE30" }, "\uB2EB\uAE30"))),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { ref: messagesEndRef })),
+        statusText && todos.length === 0 && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `jp-agent-message jp-agent-message-debug${statusText.startsWith('오류:') ? ' jp-agent-message-debug-error' : ''}` },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-debug-content" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-debug-branch", "aria-hidden": "true" }),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-debug-text" }, statusText),
+                !statusText.startsWith('오류:') && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-debug-ellipsis", "aria-hidden": "true" }))))),
+        todos.length > 0 && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-compact" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-compact-header", onClick: () => setIsTodoExpanded(!isTodoExpanded) },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-compact-left" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { className: `jp-agent-todo-expand-icon ${isTodoExpanded ? 'jp-agent-todo-expand-icon--expanded' : ''}`, viewBox: "0 0 16 16", fill: "currentColor", width: "12", height: "12" },
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", { d: "M6 12l4-4-4-4" })),
+                    (() => {
+                        const currentTodo = todos.find(t => t.status === 'in_progress') || todos.find(t => t.status === 'pending');
+                        return currentTodo ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
+                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-compact-spinner" }),
+                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-todo-compact-current" }, currentTodo.content))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-todo-compact-current" }, "\u2713 \uBAA8\uB4E0 \uC791\uC5C5 \uC644\uB8CC"));
+                    })()),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-todo-compact-progress" },
+                    todos.filter(t => t.status === 'completed').length,
+                    "/",
+                    todos.length)),
+            statusText && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `jp-agent-message jp-agent-message-debug jp-agent-message-debug--inline${statusText.startsWith('오류:') ? ' jp-agent-message-debug-error' : ''}` },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-debug-content" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-debug-branch", "aria-hidden": "true" }),
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-debug-text" }, statusText),
+                    !statusText.startsWith('오류:') && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-debug-ellipsis", "aria-hidden": "true" }))))),
+            isTodoExpanded && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-expanded" }, todos.map((todo, index) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: index, className: `jp-agent-todo-item jp-agent-todo-item--${todo.status}` },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-item-indicator" },
+                    todo.status === 'completed' && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "12", height: "12" },
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" }))),
+                    todo.status === 'in_progress' && react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-todo-item-spinner" }),
+                    todo.status === 'pending' && react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-todo-item-number" }, index + 1)),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: `jp-agent-todo-item-text ${todo.status === 'completed' ? 'jp-agent-todo-item-text--done' : ''}` }, todo.content)))))))),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-input-container" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-input-wrapper" },
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { className: `jp-agent-input ${inputMode === 'agent' ? 'jp-agent-input--agent-mode' : ''}`, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: inputMode === 'agent'
@@ -1842,7 +2338,7 @@ SyntaxError: '(' was never closed
                             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-mode-shortcut" }, "\uB178\uD2B8\uBD81 \uC790\uB3D9 \uC2E4\uD589"))))),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "jp-agent-mode-hints" },
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "jp-agent-mode-hint" }, "\u21E7Tab \uBAA8\uB4DC \uC804\uD658")))),
-        fileSelectionMetadata && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FileSelectionDialog__WEBPACK_IMPORTED_MODULE_7__.FileSelectionDialog, { filename: fileSelectionMetadata.pattern, options: fileSelectionMetadata.options, message: fileSelectionMetadata.message, onSelect: handleFileSelect, onCancel: handleFileSelectCancel }))));
+        fileSelectionMetadata && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FileSelectionDialog__WEBPACK_IMPORTED_MODULE_8__.FileSelectionDialog, { filename: fileSelectionMetadata.pattern, options: fileSelectionMetadata.options, message: fileSelectionMetadata.message, onSelect: handleFileSelect, onCancel: handleFileSelectCancel }))));
 });
 ChatPanel.displayName = 'ChatPanel';
 /**
@@ -6857,7 +7353,7 @@ class ApiService {
      * - Server receives ONLY ONE key per request
      * - On 429 rate limit, frontend rotates key and retries with next key
      */
-    async sendMessageStream(request, onChunk, onMetadata) {
+    async sendMessageStream(request, onChunk, onMetadata, onDebug, onInterrupt, onTodos, onDebugClear, onToolCall) {
         // Maximum retry attempts (should match number of keys)
         const MAX_RETRIES = 10;
         let currentConfig = request.llmConfig;
@@ -6868,7 +7364,7 @@ class ApiService {
                 ? { ...request, llmConfig: (0,_ApiKeyManager__WEBPACK_IMPORTED_MODULE_0__.buildSingleKeyConfig)(currentConfig) }
                 : request;
             try {
-                await this.sendMessageStreamInternal(requestToSend, onChunk, onMetadata);
+                await this.sendMessageStreamInternal(requestToSend, onChunk, onMetadata, onDebug, onInterrupt, onTodos, onDebugClear, onToolCall);
                 // Success - reset key rotation state
                 (0,_ApiKeyManager__WEBPACK_IMPORTED_MODULE_0__.resetKeyRotation)();
                 return;
@@ -6916,13 +7412,29 @@ class ApiService {
     }
     /**
      * Internal streaming implementation (without retry logic)
-     */
-    async sendMessageStreamInternal(request, onChunk, onMetadata) {
-        const response = await fetch(`${this.baseUrl}/chat/stream`, {
+     * Uses LangChain agent endpoint for improved middleware support
+     */
+    async sendMessageStreamInternal(request, onChunk, onMetadata, onDebug, onInterrupt, onTodos, onDebugClear, onToolCall) {
+        // Convert IChatRequest to LangChain AgentRequest format
+        // Frontend's context has limited fields, map what's available
+        const langchainRequest = {
+            request: request.message,
+            notebookContext: request.context ? {
+                notebook_path: request.context.notebookPath,
+                cell_count: 0,
+                imported_libraries: [],
+                defined_variables: [],
+                recent_cells: request.context.selectedCells?.map(cell => ({ source: cell })) || []
+            } : undefined,
+            llmConfig: request.llmConfig,
+            workspaceRoot: '.'
+        };
+        // Use LangChain streaming endpoint
+        const response = await fetch(`${this.baseUrl}/agent/langchain/stream`, {
             method: 'POST',
             headers: this.getHeaders(),
             credentials: 'include',
-            body: JSON.stringify(request)
+            body: JSON.stringify(langchainRequest)
         });
         if (!response.ok) {
             const error = await response.text();
@@ -6943,15 +7455,78 @@ class ApiService {
                 // Process complete SSE messages
                 const lines = buffer.split('\n');
                 buffer = lines.pop() || ''; // Keep incomplete line in buffer
+                let currentEventType = '';
                 for (const line of lines) {
+                    // Handle SSE event type: "event: type"
+                    if (line.startsWith('event: ')) {
+                        currentEventType = line.slice(7).trim();
+                        continue;
+                    }
+                    // Handle SSE data: "data: json"
                     if (line.startsWith('data: ')) {
                         try {
                             const data = JSON.parse(line.slice(6));
+                            // Handle based on event type
+                            if (currentEventType === 'todos' && data.todos && onTodos) {
+                                onTodos(data.todos);
+                                currentEventType = '';
+                                continue;
+                            }
+                            if (currentEventType === 'debug_clear' && onDebugClear) {
+                                onDebugClear();
+                                currentEventType = '';
+                                continue;
+                            }
+                            if (currentEventType === 'complete') {
+                                if (onDebugClear) {
+                                    onDebugClear();
+                                }
+                                return;
+                            }
                             // Handle errors
                             if (data.error) {
+                                if (onDebug) {
+                                    onDebug(`오류: ${data.error}`);
+                                }
                                 throw new Error(data.error);
                             }
-                            // Handle metadata (conversationId, messageId, etc.)
+                            // Handle debug events (display in gray)
+                            if (data.status && onDebug) {
+                                onDebug(data.status);
+                            }
+                            // Handle interrupt events (Human-in-the-Loop)
+                            if (data.thread_id && data.action && onInterrupt) {
+                                onInterrupt({
+                                    threadId: data.thread_id,
+                                    action: data.action,
+                                    args: data.args || {},
+                                    description: data.description || ''
+                                });
+                                return; // Stop processing, wait for user decision
+                            }
+                            // Handle token events (streaming LLM response)
+                            if (data.content) {
+                                onChunk(data.content);
+                            }
+                            // Handle tool_call events - pass to handler for cell creation
+                            if (currentEventType === 'tool_call' && data.tool && onToolCall) {
+                                onToolCall({
+                                    tool: data.tool,
+                                    code: data.code,
+                                    content: data.content
+                                });
+                                currentEventType = '';
+                                continue;
+                            }
+                            // Handle tool_result events - skip displaying raw output
+                            if (data.output) {
+                                // Don't add raw tool output to chat
+                            }
+                            // Handle completion
+                            if (data.final_answer) {
+                                onChunk(data.final_answer);
+                            }
+                            // Handle metadata
                             if (data.conversationId && onMetadata) {
                                 onMetadata({
                                     conversationId: data.conversationId,
@@ -6960,10 +7535,6 @@ class ApiService {
                                     model: data.metadata?.model
                                 });
                             }
-                            // Handle content chunks
-                            if (data.content) {
-                                onChunk(data.content);
-                            }
                             // Final metadata update
                             if (data.done && data.metadata && onMetadata) {
                                 onMetadata({
@@ -6971,6 +7542,7 @@ class ApiService {
                                     model: data.metadata.model
                                 });
                             }
+                            currentEventType = '';
                         }
                         catch (e) {
                             if (e instanceof SyntaxError) {
@@ -6988,6 +7560,122 @@ class ApiService {
             reader.releaseLock();
         }
     }
+    /**
+     * Resume interrupted agent execution with user decision
+     */
+    async resumeAgent(threadId, decision, args, feedback, llmConfig, onChunk, onDebug, onInterrupt, onTodos, onDebugClear, onToolCall) {
+        const resumeRequest = {
+            threadId,
+            decisions: [{
+                    type: decision,
+                    args,
+                    feedback
+                }],
+            llmConfig,
+            workspaceRoot: '.'
+        };
+        const response = await fetch(`${this.baseUrl}/agent/langchain/resume`, {
+            method: 'POST',
+            headers: this.getHeaders(),
+            credentials: 'include',
+            body: JSON.stringify(resumeRequest)
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to resume agent: ${error}`);
+        }
+        // Process SSE stream (same as sendMessageStream)
+        const reader = response.body?.getReader();
+        if (!reader) {
+            throw new Error('Response body is not readable');
+        }
+        const decoder = new TextDecoder();
+        let buffer = '';
+        try {
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() || '';
+                let currentEventType = '';
+                for (const line of lines) {
+                    // Handle SSE event type
+                    if (line.startsWith('event: ')) {
+                        currentEventType = line.slice(7).trim();
+                        continue;
+                    }
+                    if (line.startsWith('data: ')) {
+                        try {
+                            const data = JSON.parse(line.slice(6));
+                            if (data.error) {
+                                if (onDebug) {
+                                    onDebug(`오류: ${data.error}`);
+                                }
+                                throw new Error(data.error);
+                            }
+                            // Handle todos event
+                            if (currentEventType === 'todos' && data.todos && onTodos) {
+                                onTodos(data.todos);
+                                currentEventType = '';
+                                continue;
+                            }
+                            // Handle debug_clear event
+                            if (currentEventType === 'debug_clear' && onDebugClear) {
+                                onDebugClear();
+                                currentEventType = '';
+                                continue;
+                            }
+                            if (currentEventType === 'complete') {
+                                if (onDebugClear) {
+                                    onDebugClear();
+                                }
+                                return;
+                            }
+                            // Debug events
+                            if (data.status && onDebug) {
+                                onDebug(data.status);
+                            }
+                            // Another interrupt
+                            if (data.thread_id && data.action && onInterrupt) {
+                                onInterrupt({
+                                    threadId: data.thread_id,
+                                    action: data.action,
+                                    args: data.args || {},
+                                    description: data.description || ''
+                                });
+                                return;
+                            }
+                            // Content chunks
+                            if (data.content && onChunk) {
+                                onChunk(data.content);
+                            }
+                            // Tool call events during resume
+                            if (currentEventType === 'tool_call' && data.tool && onToolCall) {
+                                onToolCall({
+                                    tool: data.tool,
+                                    code: data.code,
+                                    content: data.content
+                                });
+                                currentEventType = '';
+                                continue;
+                            }
+                            currentEventType = '';
+                        }
+                        catch (e) {
+                            if (!(e instanceof SyntaxError)) {
+                                throw e;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        finally {
+            reader.releaseLock();
+        }
+    }
     /**
      * Save configuration
      */
@@ -12493,4 +13181,4 @@ __webpack_require__.r(__webpack_exports__);
 /***/ }
 
 }]);
-//# sourceMappingURL=lib_index_js.622c1a5918b3aafb2315.js.map
+//# sourceMappingURL=lib_index_js.1366019c413f1d68467f.js.map