@aipanel/ui 1.2.9 → 1.2.11

package/es/AI-panel-widget/composables/use-inspector.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
-import { truncate } from "@aipanel/core";
+import { INSPECTOR_CHECK_INTERVAL, truncate } from "@aipanel/core";
 import getCssSelector from "css-selector-generator";
 const IGNORE_SELECTORS = [
   "#vue-inspector-container",
@@ -196,7 +196,6 @@ function useInspector(options) {
   const tooltipVisible = ref(false);
   const tooltipStyle = ref({ top: "0px", left: "0px" });
   const tooltipContent = ref({ description: "", fileInfo: "" });
-  const INSPECTOR_CHECK_INTERVAL = 500;
   let inspectorCheckTimer = null;
   let currentPrimary = "#3b82f6";
   let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";

package/es/AI-panel-widget/composables/use-persist-state.mjs

@@ -1,26 +1,11 @@
 import { watch, onMounted } from "vue";
-import { createLogger } from "@aipanel/core/client";
-const log = createLogger("AIPanelWidget");
+import { storageGet, storageSet } from "@aipanel/core/client";
 const STORAGE_KEY = "aipanel-widget-state";
 function loadState() {
-  if (typeof window === "undefined") return null;
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      return JSON.parse(stored);
-    }
-  } catch (e) {
-    log.error("Failed to load persisted state:", { error: e });
-  }
-  return null;
+  return storageGet("local", STORAGE_KEY);
 }
 function saveState(state) {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  } catch (e) {
-    log.error("Failed to save state:", { error: e });
-  }
+  storageSet("local", STORAGE_KEY, state);
 }
 function usePersistState(options) {
   const restoreState = () => {

package/es/AI-panel-widget/composables/use-session.mjs

@@ -1,4 +1,19 @@
 import { computed } from "vue";
+function formatRelativeTime(ts) {
+  const time = new Date(ts).getTime();
+  if (Number.isNaN(time)) return "";
+  const diff = Date.now() - time;
+  if (diff < 0) return "\u521A\u521A";
+  const minute = 6e4;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  if (diff < minute) return "\u521A\u521A";
+  if (diff < hour) return `${Math.floor(diff / minute)} \u5206\u949F\u524D`;
+  if (diff < day) return `${Math.floor(diff / hour)} \u5C0F\u65F6\u524D`;
+  if (diff < 7 * day) return `${Math.floor(diff / day)} \u5929\u524D`;
+  const date = new Date(time);
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}
 function formatSessionMeta(session) {
   if (session.meta) {
     return session.meta;
@@ -6,11 +21,7 @@ function formatSessionMeta(session) {
   if (!session.updatedAt) {
     return "";
   }
-  const date = new Date(session.updatedAt);
-  if (Number.isNaN(date.getTime())) {
-    return "";
-  }
-  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+  return formatRelativeTime(session.updatedAt);
 }
 function useSession(options) {
   const sessionItems = computed(

package/es/AI-panel-widget/composables/use-widget.mjs

@@ -1,11 +1,9 @@
 import { computed, ref, onMounted, onUnmounted } from "vue";
-const THEME_CYCLE = ["auto", "light", "dark"];
+import { WIDGET_THEME_MODES } from "@aipanel/core";
+import { getSystemTheme, resolveWidgetTheme } from "@aipanel/core/client";
+const THEME_CYCLE = WIDGET_THEME_MODES;
 function useWidget(options) {
   const systemTheme = ref("light");
-  function getSystemTheme() {
-    if (typeof window === "undefined") return "light";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
   let mediaQuery = null;
   let handleChange = null;
   onMounted(() => {
@@ -22,12 +20,9 @@ function useWidget(options) {
       mediaQuery.removeEventListener("change", handleChange);
     }
   });
-  const resolvedTheme = computed(() => {
-    if (options.theme.value === "auto") {
-      return systemTheme.value;
-    }
-    return options.theme.value;
-  });
+  const resolvedTheme = computed(
+    () => resolveWidgetTheme(options.theme.value, systemTheme.value)
+  );
   const containerClasses = computed(() => [
     "aipanel-widget",
     `aipanel-theme-${resolvedTheme.value}`

package/es/AI-panel-widget/src/components/Frame.vue.mjs

@@ -2,6 +2,7 @@ import "./Frame-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
 import { ref } from "vue";
 import { useAIPanelWidgetContext } from "../context.mjs";
+import { widgetEnvelope } from "@aipanel/core";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   __name: "Frame",
   setup(__props, { expose: __expose }) {
@@ -18,7 +19,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     } = useAIPanelWidgetContext();
     function sendMessageToIframe(type, data) {
       if (!iframeRef.value?.contentWindow) return;
-      iframeRef.value.contentWindow.postMessage({ type, ...data }, "*");
+      iframeRef.value.contentWindow.postMessage(widgetEnvelope(type, data), "*");
     }
     __expose({
       sendMessageToIframe

package/es/AI-panel-widget/src/components/Header.vue.mjs

@@ -33,6 +33,14 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       handleRefresh,
       handleCreateSession
     } = useAIPanelWidgetContext();
+    const DISPLAY_MODE_LABELS = {
+      bubble: "\u6C14\u6CE1\u6A21\u5F0F",
+      split: "\u5206\u5C4F\u6A21\u5F0F",
+      auto: "\u81EA\u52A8\u6A21\u5F0F",
+      extension: "\u6269\u5C55\u6A21\u5F0F",
+      "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
+    };
+    const DISPLAY_CYCLE = ["bubble", "split", "auto"];
     const isSplitMode = computed(() => mode.value === "split");
     const themeIconTitle = computed(() => {
       const themeLabels = {
@@ -51,27 +59,12 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
     });
     const displayModeIconTitle = computed(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      return `\u5C55\u793A\u6A21\u5F0F: ${displayModeLabels[displayMode.value]}`;
+      return `\u5C55\u793A\u6A21\u5F0F: ${DISPLAY_MODE_LABELS[displayMode.value]}`;
     });
     const displayModeIconLabel = computed(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      const modes = ["bubble", "split", "auto"];
-      const currentIndex = modes.indexOf(displayMode.value);
-      const nextMode = modes[(currentIndex + 1) % modes.length];
-      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${displayModeLabels[nextMode]}`;
+      const currentIndex = DISPLAY_CYCLE.indexOf(displayMode.value);
+      const nextMode = DISPLAY_CYCLE[(currentIndex + 1) % DISPLAY_CYCLE.length];
+      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${DISPLAY_MODE_LABELS[nextMode]}`;
     });
     const splitPositionIconTitle = computed(() => {
       const positionLabels = {
@@ -84,7 +77,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       const nextPosition = splitPosition.value === "right" ? "\u5DE6\u4FA7" : "\u53F3\u4FA7";
       return `\u5207\u6362\u5206\u680F\u4F4D\u7F6E - \u4E0B\u4E00\u4E2A: ${nextPosition}`;
     });
-    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
+    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, DISPLAY_MODE_LABELS, DISPLAY_CYCLE, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/es/AI-panel-widget/src/components/SessionList-sfc.css

@@ -1 +1 @@
-.aipanel-session-list{width:240px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--ap-text-primary)}.aipanel-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--ap-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.aipanel-new-session-btn:hover{background:var(--ap-primary-hover);transform:scale(1.05)}.aipanel-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.aipanel-session-list-loading-overlay{position:absolute;inset:0;background:var(--ap-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.aipanel-loading-spinner.small{width:24px;height:24px;border-width:2px}.aipanel-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--ap-text-primary)}.aipanel-session-item:hover{background:var(--ap-bg-tertiary)}.aipanel-session-item.active{background:var(--ap-primary);color:#fff;transition:none}.aipanel-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aipanel-session-meta{font-size:12px;opacity:.6}.aipanel-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.aipanel-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--ap-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:var(--ap-danger);color:#fff}.aipanel-session-item.active .aipanel-session-delete-btn{color:#ffffffb3}.aipanel-session-item.active .aipanel-session-delete-btn:hover{background:#fff3;color:#fff}.aipanel-session-header-skeleton{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:none;justify-content:space-between;align-items:center}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{height:18px;width:80px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:28px;height:28px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.aipanel-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{height:16px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.aipanel-skeleton-meta{height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-placeholder);font-size:13px}.aipanel-thinking-loading{display:inline-block;width:12px;height:12px;margin-right:6px;border:2px solid var(--ap-border-secondary);border-top-color:var(--ap-text-secondary);border-radius:50%;animation:thinking-spin .8s linear infinite;vertical-align:middle}.aipanel-session-item.active .aipanel-thinking-loading{border-color:#ffffff4d;border-top-color:#ffffffe6}@keyframes thinking-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
+.aipanel-session-list{width:240px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--ap-text-primary)}.aipanel-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--ap-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.aipanel-new-session-btn:hover{background:var(--ap-primary-hover);transform:scale(1.05)}.aipanel-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.aipanel-session-list-loading-overlay{position:absolute;inset:0;background:var(--ap-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.aipanel-loading-spinner.small{width:24px;height:24px;border-width:2px}.aipanel-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--ap-text-primary)}.aipanel-session-item:hover{background:var(--ap-bg-tertiary)}.aipanel-session-item.active{background:var(--ap-primary);color:#fff;transition:none}.aipanel-session-title{display:flex;align-items:center;min-width:0;font-size:14px;font-weight:500;margin-bottom:4px}.aipanel-session-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.aipanel-session-meta{font-size:12px;opacity:.6}.aipanel-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.aipanel-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--ap-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:var(--ap-danger);color:#fff}.aipanel-session-item.active .aipanel-session-delete-btn{color:#ffffffb3}.aipanel-session-item.active .aipanel-session-delete-btn:hover{background:#fff3;color:#fff}.aipanel-session-header-skeleton{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:none;justify-content:space-between;align-items:center}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{height:18px;width:80px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:28px;height:28px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.aipanel-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{height:16px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.aipanel-skeleton-meta{height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-placeholder);font-size:13px}.aipanel-session-state{position:relative;flex:0 0 auto;width:10px;height:10px;margin-right:6px}.aipanel-session-state-pending:before,.aipanel-session-state-completed:before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.1}.aipanel-session-state-pending:after,.aipanel-session-state-completed:after{content:"";position:absolute;inset:20%;border-radius:50%;background:currentColor}.aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-state-ongoing{color:var(--ap-state-ongoing)}.aipanel-session-ongoing-cell{fill:currentColor;opacity:.15;animation:aipanel-ongoing-chase 1s infinite}@keyframes aipanel-ongoing-chase{0%,12.4%{opacity:1}12.5%,24.9%{opacity:.6}25%,37.4%{opacity:.35}37.5%,to{opacity:.15}}.aipanel-session-item.active .aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-item.active .aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-item.active .aipanel-session-state-ongoing{color:#fffffff2}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}

package/es/AI-panel-widget/src/components/SessionList.vue.mjs

@@ -31,20 +31,61 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       if (showSessionListSkeleton.value) return true;
       return false;
     });
-    function isSessionThinking(sessionId) {
-      if (!sessionStates?.value || !sessionId) return false;
-      return sessionStates.value[sessionId]?.thinking ?? false;
+    const ONGOING_CELLS = [
+      { x: 0, y: 0, delay: "-1000ms" },
+      { x: 4, y: 0, delay: "-875ms" },
+      { x: 8, y: 0, delay: "-750ms" },
+      { x: 8, y: 4, delay: "-625ms" },
+      { x: 8, y: 8, delay: "-500ms" },
+      { x: 4, y: 8, delay: "-375ms" },
+      { x: 0, y: 8, delay: "-250ms" },
+      { x: 0, y: 4, delay: "-125ms" }
+    ];
+    const PENDING_LABELS = {
+      approval: "\u7B49\u5F85\u5BA1\u6279",
+      "plan-review": "\u7B49\u5F85\u8BA1\u5212\u786E\u8BA4",
+      question: "\u7B49\u5F85\u56DE\u590D"
+    };
+    function runningLabel(sessionId) {
+      const n = sessionStates?.value?.[sessionId]?.subagentsRunning ?? 0;
+      return n > 0 ? "\u5B50\u4EE3\u7406\u8FD0\u884C\u4E2D (" + n + ")" : "\u8FD0\u884C\u4E2D";
+    }
+    function sessionRowStatus(sessionId) {
+      const state = sessionStates?.value?.[sessionId];
+      if (!state) return "idle";
+      if (state.hasPending) return "pending";
+      const subagentsRunning = (state.subagentsRunning ?? 0) > 0;
+      if (subagentsRunning) return "running";
+      if (state.thinking) return "thinking";
+      const running = state.statusType === "running" || state.statusType === "streaming";
+      if (running) return "running";
+      if (state.completed) return "completed";
+      return "idle";
+    }
+    function pendingLabel(sessionId) {
+      const kind = sessionStates?.value?.[sessionId]?.pendingKind;
+      return kind && PENDING_LABELS[kind] || "\u7B49\u5F85\u7528\u6237";
+    }
+    function isSessionActive(sessionId) {
+      const status = sessionRowStatus(sessionId);
+      return status === "thinking" || status === "running";
+    }
+    function isSessionPending(sessionId) {
+      return sessionRowStatus(sessionId) === "pending";
+    }
+    function isSessionCompleted(sessionId) {
+      return sessionRowStatus(sessionId) === "completed";
     }
     const __returned__ = { collapsed, sessions, loadingSessionList, showSessionListSkeleton, handleCreateSession, handleSelectSession, handleDeleteSession, sessionKey, sessionStates, isAnimating, get animTimer() {
       return animTimer;
     }, set animTimer(v) {
       animTimer = v;
-    }, showSkeleton, isSessionThinking };
+    }, showSkeleton, ONGOING_CELLS, PENDING_LABELS, runningLabel, sessionRowStatus, pendingLabel, isSessionActive, isSessionPending, isSessionCompleted };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, renderList as _renderList, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, renderSlot as _renderSlot } from "vue";
+import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, renderList as _renderList, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, withModifiers as _withModifiers, normalizeClass as _normalizeClass, renderSlot as _renderSlot } from "vue";
 const _hoisted_1 = {
   key: 0,
   class: "aipanel-session-list-header"
@@ -65,12 +106,17 @@ const _hoisted_4 = {
 const _hoisted_5 = ["aria-selected", "onClick"];
 const _hoisted_6 = { class: "aipanel-session-header" };
 const _hoisted_7 = { class: "aipanel-session-title" };
-const _hoisted_8 = {
-  key: 0,
-  class: "aipanel-thinking-loading"
+const _hoisted_8 = ["title"];
+const _hoisted_9 = ["title"];
+const _hoisted_10 = ["x", "y"];
+const _hoisted_11 = {
+  key: 2,
+  class: "aipanel-session-state aipanel-session-state-completed",
+  title: "\u5DF2\u5B8C\u6210"
 };
-const _hoisted_9 = ["aria-label", "onClick"];
-const _hoisted_10 = { class: "aipanel-session-meta" };
+const _hoisted_12 = { class: "aipanel-session-title-text" };
+const _hoisted_13 = ["aria-label", "onClick"];
+const _hoisted_14 = { class: "aipanel-session-meta" };
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return _openBlock(), _createElementBlock(
     "div",
@@ -163,16 +209,49 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               _renderList($setup.sessions, (item) => {
                 return _openBlock(), _createElementBlock("div", {
                   key: item[$setup.sessionKey],
-                  class: _normalizeClass(["aipanel-session-item", { active: item.active, thinking: $setup.isSessionThinking(item.id) }]),
+                  class: _normalizeClass(["aipanel-session-item", { active: item.active, thinking: $setup.isSessionActive(item.id) }]),
                   role: "option",
                   "aria-selected": item.active,
                   onClick: ($event) => $setup.handleSelectSession(item)
                 }, [
                   _createElementVNode("div", _hoisted_6, [
                     _createElementVNode("div", _hoisted_7, [
-                      $setup.isSessionThinking(item.id) ? (_openBlock(), _createElementBlock("span", _hoisted_8)) : _createCommentVNode("v-if", true),
-                      _createTextVNode(
-                        " " + _toDisplayString(item.title),
+                      _createCommentVNode(" \u72B6\u6001\u6307\u793A\uFF1Apending=\u7425\u73C0\u70B9 > \u6D3B\u8DC3(thinking/running/\u5B50\u4EE3\u7406)=\u8F6C\u5708 > completed=\u7EFF\u70B9 > idle "),
+                      $setup.isSessionPending(item.id) ? (_openBlock(), _createElementBlock("span", {
+                        key: 0,
+                        class: "aipanel-session-state aipanel-session-state-pending",
+                        title: $setup.pendingLabel(item.id)
+                      }, null, 8, _hoisted_8)) : $setup.isSessionActive(item.id) ? (_openBlock(), _createElementBlock("svg", {
+                        key: 1,
+                        class: "aipanel-session-state aipanel-session-state-ongoing",
+                        title: $setup.runningLabel(item.id),
+                        viewBox: "0 0 10 10",
+                        width: "10",
+                        height: "10",
+                        "aria-hidden": "true"
+                      }, [
+                        (_openBlock(), _createElementBlock(
+                          _Fragment,
+                          null,
+                          _renderList($setup.ONGOING_CELLS, (c) => {
+                            return _createElementVNode("rect", {
+                              key: c.x + "-" + c.y,
+                              x: c.x,
+                              y: c.y,
+                              width: "2",
+                              height: "2",
+                              style: _normalizeStyle({ animationDelay: c.delay }),
+                              class: "aipanel-session-ongoing-cell"
+                            }, null, 12, _hoisted_10);
+                          }),
+                          64
+                          /* STABLE_FRAGMENT */
+                        ))
+                      ], 8, _hoisted_9)) : $setup.isSessionCompleted(item.id) ? (_openBlock(), _createElementBlock("span", _hoisted_11)) : _createCommentVNode("v-if", true),
+                      _createElementVNode(
+                        "span",
+                        _hoisted_12,
+                        _toDisplayString(item.title),
                         1
                         /* TEXT */
                       )
@@ -182,11 +261,11 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
                       type: "button",
                       "aria-label": `\u5220\u9664\u4F1A\u8BDD: ${item.title}`,
                       onClick: _withModifiers(($event) => $setup.handleDeleteSession(item), ["stop"])
-                    }, " \xD7 ", 8, _hoisted_9)
+                    }, " \xD7 ", 8, _hoisted_13)
                   ]),
                   _createElementVNode(
                     "div",
-                    _hoisted_10,
+                    _hoisted_14,
                     _toDisplayString(item.meta),
                     1
                     /* TEXT */

package/es/AI-panel-widget/src/index-sfc.css

@@ -1 +1 @@
-.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f8f9fa;--ap-bg-tertiary: #f3f4f6;--ap-overlay-bg: rgba(255, 255, 255, .9);--ap-bg-inverse: #1e1e1e;--ap-text-primary: #282828;--ap-text-secondary: #4b5563;--ap-text-tertiary: #6b7280;--ap-text-placeholder: #9ca3af;--ap-text-inverse: #ffffff;--ap-border-primary: #e5e7eb;--ap-border-secondary: #d1d5db;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .1);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-overlay: rgba(0, 0, 0, .5);--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-thinking-gradient-1: #10b981;--ap-thinking-gradient-2: #059669;--ap-thinking-glow: rgba(16, 185, 129, .3);--ap-thinking-glow-strong: rgba(16, 185, 129, .6);--ap-skeleton-bg: #e5e7eb;--ap-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--ap-trigger-bg: #3b82f6;--ap-trigger-bg-hover: #2563eb;--ap-trigger-bg-active: #1d4ed8;--ap-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--ap-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--ap-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #1a1a1a;--ap-bg-secondary: #1e1e1e;--ap-bg-tertiary: #282828;--ap-overlay-bg: rgba(26, 26, 26, .9);--ap-bg-inverse: #ffffff;--ap-text-primary: #f3f4f6;--ap-text-secondary: #d1d5db;--ap-text-tertiary: #9ca3af;--ap-text-placeholder: #6b7280;--ap-text-inverse: #282828;--ap-border-primary: #282828;--ap-border-secondary: #4b5563;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .15);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-overlay: rgba(26, 26, 26, .9);--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .7);--ap-thinking-gradient-1: #34d399;--ap-thinking-gradient-2: #10b981;--ap-thinking-glow: rgba(52, 211, 153, .3);--ap-thinking-glow-strong: rgba(52, 211, 153, .6);--ap-skeleton-bg: #151515;--ap-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--ap-trigger-bg: #60a5fa;--ap-trigger-bg-hover: #3b82f6;--ap-trigger-bg-active: #2563eb;--ap-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--ap-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--ap-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{background:var(--ap-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:15px;color:var(--ap-text-primary);line-height:1.5}.aipanel-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.aipanel-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:var(--ap-bg-tertiary);color:var(--ap-text-primary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-text-primary);color:var(--ap-bg-main)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}.aipanel-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}
+.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f8f9fa;--ap-bg-tertiary: #f3f4f6;--ap-overlay-bg: rgba(255, 255, 255, .9);--ap-bg-inverse: #1e1e1e;--ap-text-primary: #282828;--ap-text-secondary: #4b5563;--ap-text-tertiary: #6b7280;--ap-text-placeholder: #9ca3af;--ap-text-inverse: #ffffff;--ap-border-primary: #e5e7eb;--ap-border-secondary: #d1d5db;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .1);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-overlay: rgba(0, 0, 0, .5);--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-thinking-gradient-1: #10b981;--ap-thinking-gradient-2: #059669;--ap-thinking-glow: rgba(16, 185, 129, .3);--ap-thinking-glow-strong: rgba(16, 185, 129, .6);--ap-skeleton-bg: #e5e7eb;--ap-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--ap-trigger-bg: #3b82f6;--ap-trigger-bg-hover: #2563eb;--ap-trigger-bg-active: #1d4ed8;--ap-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--ap-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--ap-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #1a1a1a;--ap-bg-secondary: #1e1e1e;--ap-bg-tertiary: #282828;--ap-overlay-bg: rgba(26, 26, 26, .9);--ap-bg-inverse: #ffffff;--ap-text-primary: #f3f4f6;--ap-text-secondary: #d1d5db;--ap-text-tertiary: #9ca3af;--ap-text-placeholder: #6b7280;--ap-text-inverse: #282828;--ap-border-primary: #282828;--ap-border-secondary: #4b5563;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .15);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-state-pending: #fbbf24;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-overlay: rgba(26, 26, 26, .9);--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .7);--ap-thinking-gradient-1: #34d399;--ap-thinking-gradient-2: #10b981;--ap-thinking-glow: rgba(52, 211, 153, .3);--ap-thinking-glow-strong: rgba(52, 211, 153, .6);--ap-skeleton-bg: #151515;--ap-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--ap-trigger-bg: #60a5fa;--ap-trigger-bg-hover: #3b82f6;--ap-trigger-bg-active: #2563eb;--ap-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--ap-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--ap-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{background:var(--ap-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:15px;color:var(--ap-text-primary);line-height:1.5}.aipanel-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.aipanel-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:var(--ap-bg-tertiary);color:var(--ap-text-primary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-text-primary);color:var(--ap-bg-main)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}.aipanel-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}

package/es/AI-panel-widget/src/index.vue.d.ts

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<AIPanelWidgetProps, {
     displayMode: import("@aipanel/core").DisplayMode;
     showSessionListSkeleton: boolean;
     sessionKey: string;
-    sessions: import("@aipanel/core").AIPanelWidgetSession[];
     thinking: boolean;
+    sessions: import("@aipanel/core").AIPanelWidgetSession[];
     showClearAll: boolean;
     open: boolean;
     selectShortcutLabel: string;

package/es/AI-panel-widget/src/index.vue.mjs

@@ -11,7 +11,7 @@ import { useInspector } from "../composables/use-inspector.mjs";
 import { usePersistState } from "../composables/use-persist-state.mjs";
 import { useSplitMode } from "../composables/use-split.mjs";
 import { provideAIPanelWidgetContext } from "./context.mjs";
-import { WIDGET_MSG } from "@aipanel/core";
+import { NOTIFICATION_DURATION, WIDGET_MSG } from "@aipanel/core";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   ...{
     name: "AIPanelWidget"
@@ -61,7 +61,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     const notificationMode = ref("widget");
     let notificationTimer = null;
     const showNotification = (message, options) => {
-      const { duration = 3e3, mode = "widget" } = options || {};
+      const { duration = NOTIFICATION_DURATION, mode = "widget" } = options || {};
       notificationMessage.value = message;
       notificationVisible.value = true;
       notificationMode.value = mode;
@@ -95,9 +95,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     };
     const localSessionListCollapsed = ref(props.sessionListCollapsed);
     const localDisplayMode = ref(props.displayMode);
-    const localSplitPosition = ref(
-      props.splitMode?.position ?? "right"
-    );
+    const localSplitPosition = ref(props.splitMode?.position ?? "right");
     const minimized = ref(false);
     const promptDockVisible = ref(true);
     const reviewPanelVisible = ref(false);
@@ -136,7 +134,8 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       }
     );
     const handleToggleDisplayMode = () => {
-      if (localDisplayMode.value === "extension" || localDisplayMode.value === "extension-selector") return;
+      if (localDisplayMode.value === "extension" || localDisplayMode.value === "extension-selector")
+        return;
       const modes = ["bubble", "split", "auto"];
       const currentIndex = modes.indexOf(localDisplayMode.value);
       const nextIndex = (currentIndex + 1) % modes.length;
@@ -397,7 +396,10 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       const gap = 24;
       const bubbleSize = 44;
       const screenMargin = 20;
-      const effectiveOffset = triggerRef.value?.offset ?? bubbleOffset.value ?? { x: windowWidth.value - bubbleSize - gap, y: windowHeight.value - bubbleSize - gap };
+      const effectiveOffset = triggerRef.value?.offset ?? bubbleOffset.value ?? {
+        x: windowWidth.value - bubbleSize - gap,
+        y: windowHeight.value - bubbleSize - gap
+      };
       const style = {};
       if (isBubbleOnRightSide.value) {
         let rightPos = windowWidth.value - effectiveOffset.x + gap;
@@ -746,11 +748,11 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             _createElementVNode("button", {
               class: "aipanel-dialog-btn cancel",
               onClick: $setup.handleDialogCancel
-            }, "\u53D6\u6D88"),
+            }, " \u53D6\u6D88 "),
             _createElementVNode("button", {
               class: "aipanel-dialog-btn confirm",
               onClick: $setup.handleDialogConfirm
-            }, "\u786E\u8BA4")
+            }, " \u786E\u8BA4 ")
           ])
         ])
       ])) : _createCommentVNode("v-if", true),

package/es/AI-panel-widget/src/types.d.ts

@@ -1,2 +1 @@
 export type { AIPanelWidgetTheme, AIPanelWidgetSession, AIPanelSelectedElement, AIPanelRemoveSelectedPayload, AIPanelWidgetSessionItem, AIPanelSelectedElementItem, AIPanelWidgetProps, AIPanelWidgetEmits, AIPanelSessionThinkingState, DisplayMode, SplitModeOptions, } from "@aipanel/core";
-export type AIPanelWidgetThemeLocal = "light" | "dark" | "auto";

package/es/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-declare const version = "1.2.9";
+declare const version = "1.2.11";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, };
 export * from './AI-panel-widget';

package/es/index.mjs

@@ -1,5 +1,5 @@
 import { AIPanelWidget } from "./AI-panel-widget/index.mjs";
-const version = "1.2.9";
+const version = "1.2.11";
 function install(app, options) {
   const components = [
     AIPanelWidget

package/lib/AI-panel-widget/composables/use-inspector.cjs

@@ -228,7 +228,6 @@ function useInspector(options) {
   const tooltipVisible = (0, import_vue.ref)(false);
   const tooltipStyle = (0, import_vue.ref)({ top: "0px", left: "0px" });
   const tooltipContent = (0, import_vue.ref)({ description: "", fileInfo: "" });
-  const INSPECTOR_CHECK_INTERVAL = 500;
   let inspectorCheckTimer = null;
   let currentPrimary = "#3b82f6";
   let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";
@@ -441,7 +440,7 @@ function useInspector(options) {
             inspectorCheckTimer = null;
           }
         }
-      }, INSPECTOR_CHECK_INTERVAL);
+      }, import_core.INSPECTOR_CHECK_INTERVAL);
     }
   });
   (0, import_vue.onUnmounted)(() => {

package/lib/AI-panel-widget/composables/use-persist-state.cjs

@@ -22,27 +22,12 @@ __export(use_persist_state_exports, {
 module.exports = __toCommonJS(use_persist_state_exports);
 var import_vue = require("vue");
 var import_client = require("@aipanel/core/client");
-const log = (0, import_client.createLogger)("AIPanelWidget");
 const STORAGE_KEY = "aipanel-widget-state";
 function loadState() {
-  if (typeof window === "undefined") return null;
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      return JSON.parse(stored);
-    }
-  } catch (e) {
-    log.error("Failed to load persisted state:", { error: e });
-  }
-  return null;
+  return (0, import_client.storageGet)("local", STORAGE_KEY);
 }
 function saveState(state) {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  } catch (e) {
-    log.error("Failed to save state:", { error: e });
-  }
+  (0, import_client.storageSet)("local", STORAGE_KEY, state);
 }
 function usePersistState(options) {
   const restoreState = () => {

package/lib/AI-panel-widget/composables/use-session.cjs

@@ -21,6 +21,21 @@ __export(use_session_exports, {
 });
 module.exports = __toCommonJS(use_session_exports);
 var import_vue = require("vue");
+function formatRelativeTime(ts) {
+  const time = new Date(ts).getTime();
+  if (Number.isNaN(time)) return "";
+  const diff = Date.now() - time;
+  if (diff < 0) return "\u521A\u521A";
+  const minute = 6e4;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  if (diff < minute) return "\u521A\u521A";
+  if (diff < hour) return `${Math.floor(diff / minute)} \u5206\u949F\u524D`;
+  if (diff < day) return `${Math.floor(diff / hour)} \u5C0F\u65F6\u524D`;
+  if (diff < 7 * day) return `${Math.floor(diff / day)} \u5929\u524D`;
+  const date = new Date(time);
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}
 function formatSessionMeta(session) {
   if (session.meta) {
     return session.meta;
@@ -28,11 +43,7 @@ function formatSessionMeta(session) {
   if (!session.updatedAt) {
     return "";
   }
-  const date = new Date(session.updatedAt);
-  if (Number.isNaN(date.getTime())) {
-    return "";
-  }
-  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+  return formatRelativeTime(session.updatedAt);
 }
 function useSession(options) {
   const sessionItems = (0, import_vue.computed)(

package/lib/AI-panel-widget/composables/use-widget.cjs

@@ -21,18 +21,16 @@ __export(use_widget_exports, {
 });
 module.exports = __toCommonJS(use_widget_exports);
 var import_vue = require("vue");
-const THEME_CYCLE = ["auto", "light", "dark"];
+var import_core = require("@aipanel/core");
+var import_client = require("@aipanel/core/client");
+const THEME_CYCLE = import_core.WIDGET_THEME_MODES;
 function useWidget(options) {
   const systemTheme = (0, import_vue.ref)("light");
-  function getSystemTheme() {
-    if (typeof window === "undefined") return "light";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
   let mediaQuery = null;
   let handleChange = null;
   (0, import_vue.onMounted)(() => {
     if (typeof window === "undefined") return;
-    systemTheme.value = getSystemTheme();
+    systemTheme.value = (0, import_client.getSystemTheme)();
     mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     handleChange = (e) => {
       systemTheme.value = e.matches ? "dark" : "light";
@@ -44,12 +42,9 @@ function useWidget(options) {
       mediaQuery.removeEventListener("change", handleChange);
     }
   });
-  const resolvedTheme = (0, import_vue.computed)(() => {
-    if (options.theme.value === "auto") {
-      return systemTheme.value;
-    }
-    return options.theme.value;
-  });
+  const resolvedTheme = (0, import_vue.computed)(
+    () => (0, import_client.resolveWidgetTheme)(options.theme.value, systemTheme.value)
+  );
   const containerClasses = (0, import_vue.computed)(() => [
     "aipanel-widget",
     `aipanel-theme-${resolvedTheme.value}`

package/lib/AI-panel-widget/src/components/Frame.vue.cjs

@@ -24,6 +24,7 @@ var import_Frame_sfc = require("./Frame-sfc.css");
 var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_context = require("../context.cjs");
+var import_core = require("@aipanel/core");
 var import_vue3 = require("vue");
 const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
   __name: "Frame",
@@ -41,7 +42,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     } = (0, import_context.useAIPanelWidgetContext)();
     function sendMessageToIframe(type, data) {
       if (!iframeRef.value?.contentWindow) return;
-      iframeRef.value.contentWindow.postMessage({ type, ...data }, "*");
+      iframeRef.value.contentWindow.postMessage((0, import_core.widgetEnvelope)(type, data), "*");
     }
     __expose({
       sendMessageToIframe

package/lib/AI-panel-widget/src/components/Header.vue.cjs

@@ -56,6 +56,14 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       handleRefresh,
       handleCreateSession
     } = (0, import_context.useAIPanelWidgetContext)();
+    const DISPLAY_MODE_LABELS = {
+      bubble: "\u6C14\u6CE1\u6A21\u5F0F",
+      split: "\u5206\u5C4F\u6A21\u5F0F",
+      auto: "\u81EA\u52A8\u6A21\u5F0F",
+      extension: "\u6269\u5C55\u6A21\u5F0F",
+      "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
+    };
+    const DISPLAY_CYCLE = ["bubble", "split", "auto"];
     const isSplitMode = (0, import_vue2.computed)(() => mode.value === "split");
     const themeIconTitle = (0, import_vue2.computed)(() => {
       const themeLabels = {
@@ -74,27 +82,12 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
     });
     const displayModeIconTitle = (0, import_vue2.computed)(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      return `\u5C55\u793A\u6A21\u5F0F: ${displayModeLabels[displayMode.value]}`;
+      return `\u5C55\u793A\u6A21\u5F0F: ${DISPLAY_MODE_LABELS[displayMode.value]}`;
     });
     const displayModeIconLabel = (0, import_vue2.computed)(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      const modes = ["bubble", "split", "auto"];
-      const currentIndex = modes.indexOf(displayMode.value);
-      const nextMode = modes[(currentIndex + 1) % modes.length];
-      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${displayModeLabels[nextMode]}`;
+      const currentIndex = DISPLAY_CYCLE.indexOf(displayMode.value);
+      const nextMode = DISPLAY_CYCLE[(currentIndex + 1) % DISPLAY_CYCLE.length];
+      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${DISPLAY_MODE_LABELS[nextMode]}`;
     });
     const splitPositionIconTitle = (0, import_vue2.computed)(() => {
       const positionLabels = {
@@ -107,7 +100,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       const nextPosition = splitPosition.value === "right" ? "\u5DE6\u4FA7" : "\u53F3\u4FA7";
       return `\u5207\u6362\u5206\u680F\u4F4D\u7F6E - \u4E0B\u4E00\u4E2A: ${nextPosition}`;
     });
-    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
+    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, DISPLAY_MODE_LABELS, DISPLAY_CYCLE, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/lib/AI-panel-widget/src/components/SessionList-sfc.css

@@ -1 +1 @@
-.aipanel-session-list{width:240px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--ap-text-primary)}.aipanel-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--ap-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.aipanel-new-session-btn:hover{background:var(--ap-primary-hover);transform:scale(1.05)}.aipanel-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.aipanel-session-list-loading-overlay{position:absolute;inset:0;background:var(--ap-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.aipanel-loading-spinner.small{width:24px;height:24px;border-width:2px}.aipanel-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--ap-text-primary)}.aipanel-session-item:hover{background:var(--ap-bg-tertiary)}.aipanel-session-item.active{background:var(--ap-primary);color:#fff;transition:none}.aipanel-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aipanel-session-meta{font-size:12px;opacity:.6}.aipanel-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.aipanel-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--ap-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:var(--ap-danger);color:#fff}.aipanel-session-item.active .aipanel-session-delete-btn{color:#ffffffb3}.aipanel-session-item.active .aipanel-session-delete-btn:hover{background:#fff3;color:#fff}.aipanel-session-header-skeleton{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:none;justify-content:space-between;align-items:center}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{height:18px;width:80px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:28px;height:28px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.aipanel-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{height:16px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.aipanel-skeleton-meta{height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-placeholder);font-size:13px}.aipanel-thinking-loading{display:inline-block;width:12px;height:12px;margin-right:6px;border:2px solid var(--ap-border-secondary);border-top-color:var(--ap-text-secondary);border-radius:50%;animation:thinking-spin .8s linear infinite;vertical-align:middle}.aipanel-session-item.active .aipanel-thinking-loading{border-color:#ffffff4d;border-top-color:#ffffffe6}@keyframes thinking-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
+.aipanel-session-list{width:240px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--ap-text-primary)}.aipanel-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--ap-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.aipanel-new-session-btn:hover{background:var(--ap-primary-hover);transform:scale(1.05)}.aipanel-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.aipanel-session-list-loading-overlay{position:absolute;inset:0;background:var(--ap-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.aipanel-loading-spinner.small{width:24px;height:24px;border-width:2px}.aipanel-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--ap-text-primary)}.aipanel-session-item:hover{background:var(--ap-bg-tertiary)}.aipanel-session-item.active{background:var(--ap-primary);color:#fff;transition:none}.aipanel-session-title{display:flex;align-items:center;min-width:0;font-size:14px;font-weight:500;margin-bottom:4px}.aipanel-session-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.aipanel-session-meta{font-size:12px;opacity:.6}.aipanel-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.aipanel-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--ap-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:var(--ap-danger);color:#fff}.aipanel-session-item.active .aipanel-session-delete-btn{color:#ffffffb3}.aipanel-session-item.active .aipanel-session-delete-btn:hover{background:#fff3;color:#fff}.aipanel-session-header-skeleton{padding:16px;border-bottom:1px solid var(--ap-border-primary);display:none;justify-content:space-between;align-items:center}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{height:18px;width:80px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:28px;height:28px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.aipanel-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{height:16px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.aipanel-skeleton-meta{height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-placeholder);font-size:13px}.aipanel-session-state{position:relative;flex:0 0 auto;width:10px;height:10px;margin-right:6px}.aipanel-session-state-pending:before,.aipanel-session-state-completed:before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.1}.aipanel-session-state-pending:after,.aipanel-session-state-completed:after{content:"";position:absolute;inset:20%;border-radius:50%;background:currentColor}.aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-state-ongoing{color:var(--ap-state-ongoing)}.aipanel-session-ongoing-cell{fill:currentColor;opacity:.15;animation:aipanel-ongoing-chase 1s infinite}@keyframes aipanel-ongoing-chase{0%,12.4%{opacity:1}12.5%,24.9%{opacity:.6}25%,37.4%{opacity:.35}37.5%,to{opacity:.15}}.aipanel-session-item.active .aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-item.active .aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-item.active .aipanel-session-state-ongoing{color:#fffffff2}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}

package/lib/AI-panel-widget/src/components/SessionList.vue.cjs

@@ -54,15 +54,56 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       if (showSessionListSkeleton.value) return true;
       return false;
     });
-    function isSessionThinking(sessionId) {
-      if (!sessionStates?.value || !sessionId) return false;
-      return sessionStates.value[sessionId]?.thinking ?? false;
+    const ONGOING_CELLS = [
+      { x: 0, y: 0, delay: "-1000ms" },
+      { x: 4, y: 0, delay: "-875ms" },
+      { x: 8, y: 0, delay: "-750ms" },
+      { x: 8, y: 4, delay: "-625ms" },
+      { x: 8, y: 8, delay: "-500ms" },
+      { x: 4, y: 8, delay: "-375ms" },
+      { x: 0, y: 8, delay: "-250ms" },
+      { x: 0, y: 4, delay: "-125ms" }
+    ];
+    const PENDING_LABELS = {
+      approval: "\u7B49\u5F85\u5BA1\u6279",
+      "plan-review": "\u7B49\u5F85\u8BA1\u5212\u786E\u8BA4",
+      question: "\u7B49\u5F85\u56DE\u590D"
+    };
+    function runningLabel(sessionId) {
+      const n = sessionStates?.value?.[sessionId]?.subagentsRunning ?? 0;
+      return n > 0 ? "\u5B50\u4EE3\u7406\u8FD0\u884C\u4E2D (" + n + ")" : "\u8FD0\u884C\u4E2D";
+    }
+    function sessionRowStatus(sessionId) {
+      const state = sessionStates?.value?.[sessionId];
+      if (!state) return "idle";
+      if (state.hasPending) return "pending";
+      const subagentsRunning = (state.subagentsRunning ?? 0) > 0;
+      if (subagentsRunning) return "running";
+      if (state.thinking) return "thinking";
+      const running = state.statusType === "running" || state.statusType === "streaming";
+      if (running) return "running";
+      if (state.completed) return "completed";
+      return "idle";
+    }
+    function pendingLabel(sessionId) {
+      const kind = sessionStates?.value?.[sessionId]?.pendingKind;
+      return kind && PENDING_LABELS[kind] || "\u7B49\u5F85\u7528\u6237";
+    }
+    function isSessionActive(sessionId) {
+      const status = sessionRowStatus(sessionId);
+      return status === "thinking" || status === "running";
+    }
+    function isSessionPending(sessionId) {
+      return sessionRowStatus(sessionId) === "pending";
+    }
+    function isSessionCompleted(sessionId) {
+      return sessionRowStatus(sessionId) === "completed";
     }
     const __returned__ = { collapsed, sessions, loadingSessionList, showSessionListSkeleton, handleCreateSession, handleSelectSession, handleDeleteSession, sessionKey, sessionStates, isAnimating, get animTimer() {
       return animTimer;
     }, set animTimer(v) {
       animTimer = v;
-    }, showSkeleton, isSessionThinking };
+    }, showSkeleton, ONGOING_CELLS, PENDING_LABELS, runningLabel, sessionRowStatus, pendingLabel, isSessionActive, isSessionPending, isSessionCompleted };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -87,12 +128,17 @@ const _hoisted_4 = {
 const _hoisted_5 = ["aria-selected", "onClick"];
 const _hoisted_6 = { class: "aipanel-session-header" };
 const _hoisted_7 = { class: "aipanel-session-title" };
-const _hoisted_8 = {
-  key: 0,
-  class: "aipanel-thinking-loading"
+const _hoisted_8 = ["title"];
+const _hoisted_9 = ["title"];
+const _hoisted_10 = ["x", "y"];
+const _hoisted_11 = {
+  key: 2,
+  class: "aipanel-session-state aipanel-session-state-completed",
+  title: "\u5DF2\u5B8C\u6210"
 };
-const _hoisted_9 = ["aria-label", "onClick"];
-const _hoisted_10 = { class: "aipanel-session-meta" };
+const _hoisted_12 = { class: "aipanel-session-title-text" };
+const _hoisted_13 = ["aria-label", "onClick"];
+const _hoisted_14 = { class: "aipanel-session-meta" };
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
     "div",
@@ -185,16 +231,49 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               (0, import_vue3.renderList)($setup.sessions, (item) => {
                 return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", {
                   key: item[$setup.sessionKey],
-                  class: (0, import_vue3.normalizeClass)(["aipanel-session-item", { active: item.active, thinking: $setup.isSessionThinking(item.id) }]),
+                  class: (0, import_vue3.normalizeClass)(["aipanel-session-item", { active: item.active, thinking: $setup.isSessionActive(item.id) }]),
                   role: "option",
                   "aria-selected": item.active,
                   onClick: ($event) => $setup.handleSelectSession(item)
                 }, [
                   (0, import_vue3.createElementVNode)("div", _hoisted_6, [
                     (0, import_vue3.createElementVNode)("div", _hoisted_7, [
-                      $setup.isSessionThinking(item.id) ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("span", _hoisted_8)) : (0, import_vue3.createCommentVNode)("v-if", true),
-                      (0, import_vue3.createTextVNode)(
-                        " " + (0, import_vue3.toDisplayString)(item.title),
+                      (0, import_vue3.createCommentVNode)(" \u72B6\u6001\u6307\u793A\uFF1Apending=\u7425\u73C0\u70B9 > \u6D3B\u8DC3(thinking/running/\u5B50\u4EE3\u7406)=\u8F6C\u5708 > completed=\u7EFF\u70B9 > idle "),
+                      $setup.isSessionPending(item.id) ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("span", {
+                        key: 0,
+                        class: "aipanel-session-state aipanel-session-state-pending",
+                        title: $setup.pendingLabel(item.id)
+                      }, null, 8, _hoisted_8)) : $setup.isSessionActive(item.id) ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", {
+                        key: 1,
+                        class: "aipanel-session-state aipanel-session-state-ongoing",
+                        title: $setup.runningLabel(item.id),
+                        viewBox: "0 0 10 10",
+                        width: "10",
+                        height: "10",
+                        "aria-hidden": "true"
+                      }, [
+                        ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
+                          import_vue3.Fragment,
+                          null,
+                          (0, import_vue3.renderList)($setup.ONGOING_CELLS, (c) => {
+                            return (0, import_vue3.createElementVNode)("rect", {
+                              key: c.x + "-" + c.y,
+                              x: c.x,
+                              y: c.y,
+                              width: "2",
+                              height: "2",
+                              style: (0, import_vue3.normalizeStyle)({ animationDelay: c.delay }),
+                              class: "aipanel-session-ongoing-cell"
+                            }, null, 12, _hoisted_10);
+                          }),
+                          64
+                          /* STABLE_FRAGMENT */
+                        ))
+                      ], 8, _hoisted_9)) : $setup.isSessionCompleted(item.id) ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("span", _hoisted_11)) : (0, import_vue3.createCommentVNode)("v-if", true),
+                      (0, import_vue3.createElementVNode)(
+                        "span",
+                        _hoisted_12,
+                        (0, import_vue3.toDisplayString)(item.title),
                         1
                         /* TEXT */
                       )
@@ -204,11 +283,11 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
                       type: "button",
                       "aria-label": `\u5220\u9664\u4F1A\u8BDD: ${item.title}`,
                       onClick: (0, import_vue3.withModifiers)(($event) => $setup.handleDeleteSession(item), ["stop"])
-                    }, " \xD7 ", 8, _hoisted_9)
+                    }, " \xD7 ", 8, _hoisted_13)
                   ]),
                   (0, import_vue3.createElementVNode)(
                     "div",
-                    _hoisted_10,
+                    _hoisted_14,
                     (0, import_vue3.toDisplayString)(item.meta),
                     1
                     /* TEXT */

package/lib/AI-panel-widget/src/index-sfc.css

@@ -1 +1 @@
-.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f8f9fa;--ap-bg-tertiary: #f3f4f6;--ap-overlay-bg: rgba(255, 255, 255, .9);--ap-bg-inverse: #1e1e1e;--ap-text-primary: #282828;--ap-text-secondary: #4b5563;--ap-text-tertiary: #6b7280;--ap-text-placeholder: #9ca3af;--ap-text-inverse: #ffffff;--ap-border-primary: #e5e7eb;--ap-border-secondary: #d1d5db;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .1);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-overlay: rgba(0, 0, 0, .5);--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-thinking-gradient-1: #10b981;--ap-thinking-gradient-2: #059669;--ap-thinking-glow: rgba(16, 185, 129, .3);--ap-thinking-glow-strong: rgba(16, 185, 129, .6);--ap-skeleton-bg: #e5e7eb;--ap-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--ap-trigger-bg: #3b82f6;--ap-trigger-bg-hover: #2563eb;--ap-trigger-bg-active: #1d4ed8;--ap-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--ap-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--ap-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #1a1a1a;--ap-bg-secondary: #1e1e1e;--ap-bg-tertiary: #282828;--ap-overlay-bg: rgba(26, 26, 26, .9);--ap-bg-inverse: #ffffff;--ap-text-primary: #f3f4f6;--ap-text-secondary: #d1d5db;--ap-text-tertiary: #9ca3af;--ap-text-placeholder: #6b7280;--ap-text-inverse: #282828;--ap-border-primary: #282828;--ap-border-secondary: #4b5563;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .15);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-overlay: rgba(26, 26, 26, .9);--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .7);--ap-thinking-gradient-1: #34d399;--ap-thinking-gradient-2: #10b981;--ap-thinking-glow: rgba(52, 211, 153, .3);--ap-thinking-glow-strong: rgba(52, 211, 153, .6);--ap-skeleton-bg: #151515;--ap-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--ap-trigger-bg: #60a5fa;--ap-trigger-bg-hover: #3b82f6;--ap-trigger-bg-active: #2563eb;--ap-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--ap-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--ap-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{background:var(--ap-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:15px;color:var(--ap-text-primary);line-height:1.5}.aipanel-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.aipanel-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:var(--ap-bg-tertiary);color:var(--ap-text-primary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-text-primary);color:var(--ap-bg-main)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}.aipanel-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}
+.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f8f9fa;--ap-bg-tertiary: #f3f4f6;--ap-overlay-bg: rgba(255, 255, 255, .9);--ap-bg-inverse: #1e1e1e;--ap-text-primary: #282828;--ap-text-secondary: #4b5563;--ap-text-tertiary: #6b7280;--ap-text-placeholder: #9ca3af;--ap-text-inverse: #ffffff;--ap-border-primary: #e5e7eb;--ap-border-secondary: #d1d5db;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .1);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-overlay: rgba(0, 0, 0, .5);--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-thinking-gradient-1: #10b981;--ap-thinking-gradient-2: #059669;--ap-thinking-glow: rgba(16, 185, 129, .3);--ap-thinking-glow-strong: rgba(16, 185, 129, .6);--ap-skeleton-bg: #e5e7eb;--ap-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--ap-trigger-bg: #3b82f6;--ap-trigger-bg-hover: #2563eb;--ap-trigger-bg-active: #1d4ed8;--ap-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--ap-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--ap-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #1a1a1a;--ap-bg-secondary: #1e1e1e;--ap-bg-tertiary: #282828;--ap-overlay-bg: rgba(26, 26, 26, .9);--ap-bg-inverse: #ffffff;--ap-text-primary: #f3f4f6;--ap-text-secondary: #d1d5db;--ap-text-tertiary: #9ca3af;--ap-text-placeholder: #6b7280;--ap-text-inverse: #282828;--ap-border-primary: #282828;--ap-border-secondary: #4b5563;--ap-primary: #3b82f6;--ap-primary-hover: #2563eb;--ap-primary-bg: rgba(59, 130, 246, .15);--ap-danger: #ef4444;--ap-danger-hover: #dc2626;--ap-danger-active: #b91c1c;--ap-success: #10b981;--ap-state-pending: #fbbf24;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-overlay: rgba(26, 26, 26, .9);--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .7);--ap-thinking-gradient-1: #34d399;--ap-thinking-gradient-2: #10b981;--ap-thinking-glow: rgba(52, 211, 153, .3);--ap-thinking-glow-strong: rgba(52, 211, 153, .6);--ap-skeleton-bg: #151515;--ap-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--ap-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--ap-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--ap-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--ap-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--ap-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--ap-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--ap-trigger-bg: #60a5fa;--ap-trigger-bg-hover: #3b82f6;--ap-trigger-bg-active: #2563eb;--ap-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--ap-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--ap-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{background:var(--ap-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:15px;color:var(--ap-text-primary);line-height:1.5}.aipanel-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.aipanel-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:var(--ap-bg-tertiary);color:var(--ap-text-primary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-text-primary);color:var(--ap-bg-main)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}.aipanel-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}

package/lib/AI-panel-widget/src/index.vue.cjs

@@ -94,7 +94,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     const notificationMode = (0, import_vue2.ref)("widget");
     let notificationTimer = null;
     const showNotification = (message, options) => {
-      const { duration = 3e3, mode = "widget" } = options || {};
+      const { duration = import_core.NOTIFICATION_DURATION, mode = "widget" } = options || {};
       notificationMessage.value = message;
       notificationVisible.value = true;
       notificationMode.value = mode;
@@ -128,9 +128,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     };
     const localSessionListCollapsed = (0, import_vue2.ref)(props.sessionListCollapsed);
     const localDisplayMode = (0, import_vue2.ref)(props.displayMode);
-    const localSplitPosition = (0, import_vue2.ref)(
-      props.splitMode?.position ?? "right"
-    );
+    const localSplitPosition = (0, import_vue2.ref)(props.splitMode?.position ?? "right");
     const minimized = (0, import_vue2.ref)(false);
     const promptDockVisible = (0, import_vue2.ref)(true);
     const reviewPanelVisible = (0, import_vue2.ref)(false);
@@ -169,7 +167,8 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       }
     );
     const handleToggleDisplayMode = () => {
-      if (localDisplayMode.value === "extension" || localDisplayMode.value === "extension-selector") return;
+      if (localDisplayMode.value === "extension" || localDisplayMode.value === "extension-selector")
+        return;
       const modes = ["bubble", "split", "auto"];
       const currentIndex = modes.indexOf(localDisplayMode.value);
       const nextIndex = (currentIndex + 1) % modes.length;
@@ -430,7 +429,10 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       const gap = 24;
       const bubbleSize = 44;
       const screenMargin = 20;
-      const effectiveOffset = triggerRef.value?.offset ?? bubbleOffset.value ?? { x: windowWidth.value - bubbleSize - gap, y: windowHeight.value - bubbleSize - gap };
+      const effectiveOffset = triggerRef.value?.offset ?? bubbleOffset.value ?? {
+        x: windowWidth.value - bubbleSize - gap,
+        y: windowHeight.value - bubbleSize - gap
+      };
       const style = {};
       if (isBubbleOnRightSide.value) {
         let rightPos = windowWidth.value - effectiveOffset.x + gap;
@@ -778,11 +780,11 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             (0, import_vue3.createElementVNode)("button", {
               class: "aipanel-dialog-btn cancel",
               onClick: $setup.handleDialogCancel
-            }, "\u53D6\u6D88"),
+            }, " \u53D6\u6D88 "),
             (0, import_vue3.createElementVNode)("button", {
               class: "aipanel-dialog-btn confirm",
               onClick: $setup.handleDialogConfirm
-            }, "\u786E\u8BA4")
+            }, " \u786E\u8BA4 ")
           ])
         ])
       ])) : (0, import_vue3.createCommentVNode)("v-if", true),

package/lib/AI-panel-widget/src/index.vue.d.ts

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<AIPanelWidgetProps, {
     displayMode: import("@aipanel/core").DisplayMode;
     showSessionListSkeleton: boolean;
     sessionKey: string;
-    sessions: import("@aipanel/core").AIPanelWidgetSession[];
     thinking: boolean;
+    sessions: import("@aipanel/core").AIPanelWidgetSession[];
     showClearAll: boolean;
     open: boolean;
     selectShortcutLabel: string;

package/lib/AI-panel-widget/src/types.d.ts

@@ -1,2 +1 @@
 export type { AIPanelWidgetTheme, AIPanelWidgetSession, AIPanelSelectedElement, AIPanelRemoveSelectedPayload, AIPanelWidgetSessionItem, AIPanelSelectedElementItem, AIPanelWidgetProps, AIPanelWidgetEmits, AIPanelSessionThinkingState, DisplayMode, SplitModeOptions, } from "@aipanel/core";
-export type AIPanelWidgetThemeLocal = "light" | "dark" | "auto";

package/lib/index.cjs

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(lib_exports);
 var import_AI_panel_widget = require("./AI-panel-widget/index.cjs");
 __reExport(lib_exports, require("./AI-panel-widget/index.cjs"), module.exports);
 __reExport(lib_exports, require("./setup.cjs"), module.exports);
-const version = "1.2.9";
+const version = "1.2.11";
 function install(app, options) {
   const components = [
     import_AI_panel_widget.AIPanelWidget

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-declare const version = "1.2.9";
+declare const version = "1.2.11";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, };
 export * from './AI-panel-widget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aipanel/ui",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "Reusable AIPanel widget components built with Pagoda CLI",
   "type": "module",
   "main": "lib/index.cjs",
@@ -31,12 +31,10 @@
   },
   "dependencies": {
     "css-selector-generator": "^3.9.2",
-    "@aipanel/core": "1.2.9"
+    "@aipanel/core": "1.2.11"
   },
   "scripts": {
     "build": "pagoda-cli build",
-    "dev:site": "pagoda-cli site",
-    "build:site": "pagoda-cli build-site",
     "test": "vitest run"
   }
 }