@gendive/chatllm 0.17.27 → 0.17.28

package/dist/react/index.js

@@ -35,6 +35,8 @@ __export(index_exports, {
   ChatSidebar: () => ChatSidebar,
   ChatUI: () => ChatUI,
   ChecklistCard: () => ChecklistCard,
+  ChecklistMiniIndicator: () => ChecklistMiniIndicator,
+  ChecklistPanel: () => ChecklistPanel,
   ContentPartRenderer: () => ContentPartRenderer,
   DEFAULT_PROJECT_ID: () => DEFAULT_PROJECT_ID,
   DEFAULT_PROJECT_TITLE: () => DEFAULT_PROJECT_TITLE,
@@ -4146,7 +4148,13 @@ ${result.content}
     /** @Todo vibecode - 체크리스트 error 항목 재시도 */
     handleChecklistRetry,
     /** @Todo vibecode - 체크리스트 pending 항목 건너뛰기 */
-    handleChecklistSkip
+    handleChecklistSkip,
+    /** @Todo vibecode - 활성 체크리스트가 포함된 메시지 (패널 자동 열기 트리거용) */
+    activeChecklistMessage: messages.find(
+      (m) => m.checklistBlock && !m.checklistBlock.completed
+    ) || messages.find(
+      (m) => m.checklistBlock?.completed
+    ) || null
   };
 };
 
@@ -8944,6 +8952,80 @@ var ChecklistCard = ({
     }
   );
 };
+var ChecklistMiniIndicator = ({
+  items,
+  completed
+}) => {
+  const doneCount = items.filter((it) => it.status === "done").length;
+  const isRunning = items.some((it) => it.status === "in_progress");
+  const hasError = items.some((it) => it.status === "error");
+  const progressPercent = doneCount / items.length * 100;
+  const statusText = completed ? "\uBAA8\uB4E0 \uB2E8\uACC4 \uC644\uB8CC" : hasError ? "\uC791\uC5C5 \uC911\uB2E8\uB428" : isRunning ? `\uC791\uC5C5 \uC9C4\uD589 \uC911 \xB7 ${doneCount}/${items.length}` : `\uB300\uAE30 \uC911 \xB7 ${doneCount}/${items.length}`;
+  const statusColor = completed ? "var(--chatllm-success, #22c55e)" : hasError ? "var(--chatllm-error, #ef4444)" : "var(--chatllm-primary, #3584FA)";
+  const barColor = completed ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-primary, #3584FA)";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: "10px 14px",
+        border: "1px solid var(--chatllm-border, #e5e7eb)",
+        borderRadius: "10px",
+        backgroundColor: "var(--chatllm-content-bg, #fff)",
+        marginTop: "8px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          IconSvg,
+          {
+            name: completed ? "checkbox-circle-line" : "list-check",
+            size: 16,
+            color: statusColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: "13px",
+              fontWeight: 500,
+              color: statusColor,
+              whiteSpace: "nowrap"
+            },
+            children: statusText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              height: "3px",
+              backgroundColor: "var(--chatllm-bg-secondary, #f1f5f9)",
+              borderRadius: "2px",
+              overflow: "hidden",
+              minWidth: "60px"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  width: `${progressPercent}%`,
+                  backgroundColor: barColor,
+                  borderRadius: "2px",
+                  transition: "width 0.6s cubic-bezier(0.25, 1, 0.5, 1)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/react/components/MessageBubble.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -9301,14 +9383,10 @@ var MessageBubble = ({
                   }
                 ),
                 message.checklistBlock && message.checklistBlock.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  ChecklistCard,
+                  ChecklistMiniIndicator,
                   {
                     items: message.checklistBlock.items,
-                    currentStep: message.checklistBlock.currentStep,
-                    completed: message.checklistBlock.completed,
-                    onAbort: onChecklistAbort,
-                    onRetryStep: onChecklistRetry,
-                    onSkipStep: onChecklistSkip
+                    completed: message.checklistBlock.completed
                   }
                 ),
                 !isLoading && !displayContent && !message.pollBlock && !message.checklistBlock && !message.contentParts?.length && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -11126,8 +11204,169 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
   );
 };
 
-// src/react/ChatUI.tsx
+// src/react/components/ChecklistPanel.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var ChecklistPanel = ({
+  message,
+  isOpen,
+  onClose,
+  onAbort,
+  onRetry,
+  onSkip,
+  width = 360,
+  isMobileOverlay = false
+}) => {
+  const block = message?.checklistBlock;
+  if (isMobileOverlay) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          onClick: onClose,
+          style: {
+            position: "fixed",
+            inset: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            zIndex: 999,
+            opacity: isOpen ? 1 : 0,
+            pointerEvents: isOpen ? "auto" : "none",
+            transition: "opacity 0.3s ease"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "aside",
+        {
+          style: {
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: "85vw",
+            maxWidth: "400px",
+            backgroundColor: "var(--chatllm-bg, #F5F5F5)",
+            zIndex: 1e3,
+            transform: isOpen ? "translateX(0)" : "translateX(100%)",
+            transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: isOpen ? "-4px 0 20px rgba(0, 0, 0, 0.1)" : "none"
+          },
+          children: renderPanelContent()
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "aside",
+    {
+      style: {
+        width: isOpen ? typeof width === "number" ? `${width}px` : width : "0px",
+        minWidth: 0,
+        overflow: "hidden",
+        transition: "width 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        borderLeft: isOpen ? "1px solid var(--chatllm-border, #e2e8f0)" : "none",
+        backgroundColor: "var(--chatllm-bg, #F5F5F5)",
+        display: "flex",
+        flexDirection: "column",
+        flexShrink: 0
+      },
+      children: isOpen && renderPanelContent()
+    }
+  );
+  function renderPanelContent() {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "16px",
+            borderBottom: "1px solid var(--chatllm-border, #e2e8f0)",
+            flexShrink: 0
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconSvg, { name: "list-check", size: 18, color: "var(--chatllm-primary, #3584FA)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    color: "var(--chatllm-text, #1e293b)"
+                  },
+                  children: "\uCCB4\uD06C\uB9AC\uC2A4\uD2B8"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                "aria-label": "\uD328\uB110 \uB2EB\uAE30",
+                style: {
+                  width: "28px",
+                  height: "28px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  border: "none",
+                  backgroundColor: "transparent",
+                  cursor: "pointer",
+                  color: "var(--chatllm-text-muted, #94a3b8)",
+                  transition: "background-color 0.15s ease"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconSvg, { name: "close-line", size: 18, color: "currentColor" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          className: "chatllm-scrollbar",
+          style: {
+            flex: 1,
+            overflowY: "auto",
+            padding: "16px"
+          },
+          children: block && block.items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ChecklistCard,
+            {
+              items: block.items,
+              currentStep: block.currentStep,
+              completed: block.completed,
+              onAbort,
+              onRetryStep: onRetry,
+              onSkipStep: onSkip
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+                color: "var(--chatllm-text-muted, #94a3b8)",
+                fontSize: "13px"
+              },
+              children: "\uCCB4\uD06C\uB9AC\uC2A4\uD2B8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4"
+            }
+          )
+        }
+      )
+    ] });
+  }
+};
+
+// src/react/ChatUI.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEFAULT_ACTIONS = [];
 var DEFAULT_TEMPLATES = [];
 var DEFAULT_MODELS = [
@@ -11466,9 +11705,33 @@ var ChatUIView = ({
     // Checklist
     handleChecklistAbort,
     handleChecklistRetry,
-    handleChecklistSkip
+    handleChecklistSkip,
+    activeChecklistMessage
   } = state;
   const [disclaimerOpen, setDisclaimerOpen] = import_react21.default.useState(false);
+  const [isMobile, setIsMobile] = import_react21.default.useState(false);
+  import_react21.default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  const [checklistPanelDismissed, setChecklistPanelDismissed] = import_react21.default.useState(false);
+  const isChecklistPanelOpen = !!activeChecklistMessage && !checklistPanelDismissed;
+  const prevChecklistIdRef = import_react21.default.useRef(void 0);
+  import_react21.default.useEffect(() => {
+    const currentId = activeChecklistMessage?.checklistBlock?.id;
+    if (currentId && currentId !== prevChecklistIdRef.current && !activeChecklistMessage?.checklistBlock?.completed) {
+      setChecklistPanelDismissed(false);
+    }
+    prevChecklistIdRef.current = currentId;
+  }, [activeChecklistMessage?.checklistBlock?.id, activeChecklistMessage?.checklistBlock?.completed]);
+  import_react21.default.useEffect(() => {
+    if (!activeChecklistMessage?.checklistBlock?.completed) return;
+    const timer = setTimeout(() => setChecklistPanelDismissed(true), 2e3);
+    return () => clearTimeout(timer);
+  }, [activeChecklistMessage?.checklistBlock?.completed]);
   const [welcomeExiting, setWelcomeExiting] = import_react21.default.useState(false);
   const prevMessageCountRef = import_react21.default.useRef(messages.length);
   import_react21.default.useEffect(() => {
@@ -11524,7 +11787,7 @@ var ChatUIView = ({
     return items;
   }, [projectMemory?.state.entries]);
   const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: `chatllm-root ${themeClass} ${className}`,
@@ -11537,7 +11800,7 @@ var ChatUIView = ({
         position: "relative"
       },
       children: [
-        showSidebar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        showSidebar && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ChatSidebar,
           {
             sessions,
@@ -11569,7 +11832,7 @@ var ChatUIView = ({
             isLoading: isSessionsLoading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "main",
           {
             style: {
@@ -11581,7 +11844,7 @@ var ChatUIView = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 ChatHeader,
                 {
                   title: currentSession?.title || "\uC0C8 \uB300\uD654",
@@ -11595,7 +11858,7 @@ var ChatUIView = ({
                   showSettings
                 }
               ),
-              (messages.length === 0 || welcomeExiting) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              (messages.length === 0 || welcomeExiting) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "div",
                 {
                   style: {
@@ -11610,7 +11873,7 @@ var ChatUIView = ({
                     pointerEvents: welcomeExiting ? "none" : "auto"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "h1",
                       {
                         style: {
@@ -11624,7 +11887,7 @@ var ChatUIView = ({
                         children: greeting ? `${greeting} \u273A` : "\u273A \uBB34\uC5C7\uC744 \uC0DD\uAC01\uD574 \uBCFC\uAE4C\uC694?"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { width: "100%", maxWidth: "680px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { width: "100%", maxWidth: "680px" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       ChatInput,
                       {
                         value: input,
@@ -11652,7 +11915,7 @@ var ChatUIView = ({
                         inline: true
                       }
                     ) }),
-                    suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "div",
                       {
                         style: {
@@ -11662,7 +11925,7 @@ var ChatUIView = ({
                           justifyContent: "center",
                           maxWidth: "680px"
                         },
-                        children: suggestedPrompts.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                        children: suggestedPrompts.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                           "button",
                           {
                             onClick: () => setInput(sp.prompt),
@@ -11681,7 +11944,7 @@ var ChatUIView = ({
                               transition: "all 0.2s"
                             },
                             children: [
-                              sp.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconSvg, { name: sp.icon, size: 16, color: "var(--chatllm-text-muted)" }),
+                              sp.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconSvg, { name: sp.icon, size: 16, color: "var(--chatllm-text-muted)" }),
                               sp.label
                             ]
                           },
@@ -11692,8 +11955,8 @@ var ChatUIView = ({
                   ]
                 }
               ),
-              messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   MessageList,
                   {
                     messages,
@@ -11718,7 +11981,7 @@ var ChatUIView = ({
                     onChecklistSkip: handleChecklistSkip
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   ChatInput,
                   {
                     value: input,
@@ -11749,7 +12012,19 @@ var ChatUIView = ({
             ]
           }
         ),
-        showSettings && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ChecklistPanel,
+          {
+            message: activeChecklistMessage,
+            isOpen: isChecklistPanelOpen,
+            onClose: () => setChecklistPanelDismissed(true),
+            onAbort: handleChecklistAbort,
+            onRetry: activeChecklistMessage ? (stepIndex) => handleChecklistRetry(activeChecklistMessage.id, stepIndex) : void 0,
+            onSkip: activeChecklistMessage ? (stepIndex) => handleChecklistSkip(activeChecklistMessage.id, stepIndex) : void 0,
+            isMobileOverlay: isMobile
+          }
+        ),
+        showSettings && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           SettingsModal,
           {
             isOpen: settingsOpen,
@@ -11776,7 +12051,7 @@ var ChatUIView = ({
             currentProjectTitle: currentProject?.title
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ProjectSettingsModal,
           {
             isOpen: projectSettingsOpen,
@@ -11788,7 +12063,7 @@ var ChatUIView = ({
             onDeleteProject: deleteProject
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DisclaimerModal, { isOpen: disclaimerOpen, onClose: () => setDisclaimerOpen(false) })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DisclaimerModal, { isOpen: disclaimerOpen, onClose: () => setDisclaimerOpen(false) })
       ]
     }
   );
@@ -11891,7 +12166,7 @@ var ChatUIWithHook = ({
     onDeleteProjectFile
   };
   const state = useChatUI(hookOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ChatUIView,
     {
       state,
@@ -11939,7 +12214,7 @@ var ChatUI = (props) => {
       deepResearch,
       suggestedPrompts: chatStateSuggestedPrompts
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ChatUIView,
       {
         state: props.chatState,
@@ -11964,7 +12239,7 @@ var ChatUI = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatUIWithHook, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatUIWithHook, { ...props });
 };
 
 // src/react/hooks/useDeepResearch.ts
@@ -12282,7 +12557,7 @@ var useDeepResearch = (options) => {
 };
 
 // src/react/components/EmptyState.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var EmptyState = ({
   greeting,
   templates = [],
@@ -12300,7 +12575,7 @@ var EmptyState = ({
     return iconMap[icon] || "sparkling-line";
   };
   const hasContent = actions.length > 0 || templates.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: "chatllm-empty-state",
@@ -12315,7 +12590,7 @@ var EmptyState = ({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "div",
           {
             className: "chatllm-sheet",
@@ -12329,10 +12604,10 @@ var EmptyState = ({
               marginBottom: "32px",
               color: "var(--chatllm-primary)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconSvg, { name: "chat-1-line", size: 40 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "chat-1-line", size: 40 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "h1",
           {
             style: {
@@ -12345,7 +12620,7 @@ var EmptyState = ({
             children: "How can I help you today?"
           }
         ),
-        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             style: {
@@ -12357,7 +12632,7 @@ var EmptyState = ({
               marginBottom: "48px"
             },
             children: [
-              actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                 "button",
                 {
                   onClick: () => onActionSelect?.(action),
@@ -12371,7 +12646,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       IconSvg,
                       {
                         name: getActionIcon(action.icon),
@@ -12384,7 +12659,7 @@ var EmptyState = ({
                 },
                 action.id
               )),
-              templates.slice(0, 4).map((template) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              templates.slice(0, 4).map((template) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                 "button",
                 {
                   onClick: () => onTemplateClick(template),
@@ -12398,7 +12673,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       IconSvg,
                       {
                         name: "sparkling-line",
@@ -12421,7 +12696,7 @@ var EmptyState = ({
 
 // src/react/components/MemoryPanel.tsx
 var import_react23 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var categoryLabels = {
   fact: "\uC0AC\uC6A9\uC790 \uC815\uBCF4",
   skill: "\uC804\uBB38 \uBD84\uC57C/\uAE30\uC220",
@@ -12453,7 +12728,7 @@ var MemoryPanel = ({
     });
   };
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         onClick: onToggle,
@@ -12473,11 +12748,11 @@ var MemoryPanel = ({
           justifyContent: "center",
           zIndex: 100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "chatllm-memory-panel",
@@ -12497,7 +12772,7 @@ var MemoryPanel = ({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             style: {
@@ -12508,8 +12783,8 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "div",
                   {
                     style: {
@@ -12521,19 +12796,19 @@ var MemoryPanel = ({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3584FA)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3584FA)" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
                     items.length,
                     "\uAC1C \uD56D\uBAA9"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-                onClearAll && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+                onClearAll && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "button",
                   {
                     onClick: onClearAll,
@@ -12545,10 +12820,10 @@ var MemoryPanel = ({
                       cursor: "pointer"
                     },
                     title: "\uC804\uCCB4 \uC0AD\uC81C",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "button",
                   {
                     onClick: onToggle,
@@ -12559,14 +12834,14 @@ var MemoryPanel = ({
                       borderRadius: "8px",
                       cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             style: {
@@ -12576,7 +12851,7 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)",
               overflowX: "auto"
             },
-            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 onClick: () => setActiveTab(tab),
@@ -12597,8 +12872,8 @@ var MemoryPanel = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
-          contextSummary && activeTab === "all" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+          contextSummary && activeTab === "all" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               style: {
@@ -12609,7 +12884,7 @@ var MemoryPanel = ({
                 borderLeft: "3px solid var(--chatllm-primary, #3584FA)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                   "div",
                   {
                     style: {
@@ -12619,12 +12894,12 @@ var MemoryPanel = ({
                       marginBottom: "8px"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3584FA)" }, children: "\uB300\uD654 \uC694\uC57D" })
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3584FA)" }, children: "\uB300\uD654 \uC694\uC57D" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "p",
                   {
                     style: {
@@ -12639,7 +12914,7 @@ var MemoryPanel = ({
               ]
             }
           ),
-          filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               style: {
@@ -12648,11 +12923,11 @@ var MemoryPanel = ({
                 color: "var(--chatllm-text-muted, #9ca3af)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               style: {
@@ -12665,10 +12940,10 @@ var MemoryPanel = ({
               },
               onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                      item.category && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                      item.category && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "span",
                         {
                           style: {
@@ -12682,9 +12957,9 @@ var MemoryPanel = ({
                           children: categoryLabels[item.category]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
                         style: {
@@ -12696,8 +12971,8 @@ var MemoryPanel = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                    onDelete && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    onDelete && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -12712,10 +12987,10 @@ var MemoryPanel = ({
                           cursor: "pointer",
                           opacity: 0.5
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       IconSvg,
                       {
                         name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -12725,7 +13000,7 @@ var MemoryPanel = ({
                     )
                   ] })
                 ] }),
-                expandedId === item.id && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                expandedId === item.id && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "div",
                   {
                     style: {
@@ -12733,7 +13008,7 @@ var MemoryPanel = ({
                       paddingTop: "12px",
                       borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "p",
                       {
                         style: {
@@ -12764,6 +13039,8 @@ var MemoryPanel = ({
   ChatSidebar,
   ChatUI,
   ChecklistCard,
+  ChecklistMiniIndicator,
+  ChecklistPanel,
   ContentPartRenderer,
   DEFAULT_PROJECT_ID,
   DEFAULT_PROJECT_TITLE,