@hef2024/llmasaservice-ui 0.26.0 → 0.26.2

package/dist/index.css

@@ -2575,59 +2575,6 @@ button[data-pending=true]::after {
 .ai-agent-panel__chat-header-spacer {
   flex: 1;
 }
-.ai-agent-panel__context-notification {
-  position: absolute;
-  bottom: 70px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background-color: var(--ai-agent-badge-bg);
-  color: var(--ai-agent-badge-text);
-  border-radius: 20px;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: ai-context-notification-in 0.3s ease-out, ai-context-notification-out 0.3s ease-in 2.7s forwards;
-  pointer-events: none;
-}
-.ai-agent-panel__context-notification svg {
-  flex-shrink: 0;
-  animation: ai-sparkle-pulse 0.6s ease-in-out infinite alternate;
-}
-@keyframes ai-context-notification-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px) scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0) scale(1);
-  }
-}
-@keyframes ai-context-notification-out {
-  0% {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px) scale(0.9);
-  }
-}
-@keyframes ai-sparkle-pulse {
-  0% {
-    opacity: 0.7;
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
 
 /* src/AIChatPanel.css */
 :root {
@@ -4059,7 +4006,7 @@ button[data-pending=true]::after {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: auto;
+  margin-left: 0;
 }
 .ai-chat-context-pill-anchor {
   position: relative;
@@ -4141,8 +4088,10 @@ button[data-pending=true]::after {
 .ai-chat-context-pill {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  justify-content: center;
+  gap: 0;
+  min-width: 30px;
+  padding: 4px 8px;
   background: var(--ai-chat-suggestion-bg, #f3f4f6);
   border: none;
   border-radius: 999px;
@@ -4163,6 +4112,9 @@ button[data-pending=true]::after {
 .ai-chat-context-pill--warning {
   color: #f59e0b;
 }
+.ai-chat-context-pill--updated {
+  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.24), 0 0 10px rgba(245, 158, 11, 0.18);
+}
 .ai-chat-context-pill__count {
   display: none;
   border-radius: 999px;
@@ -4172,6 +4124,43 @@ button[data-pending=true]::after {
   color: var(--ai-sidebar-text-muted, #6b7280);
   font-size: 12px;
 }
+.ai-chat-context-pill__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+}
+.ai-chat-context-pill__icon .ai-chat-icon-sm {
+  width: 14px;
+  height: 14px;
+}
+.ai-chat-context-pill__spark {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+  font-size: 10px;
+  line-height: 1;
+  color: #f59e0b;
+  text-shadow: 0 0 6px rgba(245, 158, 11, 0.55);
+  pointer-events: none;
+  animation: contextPillSpark 1.6s ease-out forwards;
+}
+@keyframes contextPillSpark {
+  0% {
+    opacity: 0;
+    transform: scale(0.7) translateY(2px);
+  }
+  24% {
+    opacity: 0.95;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.08) translateY(-2px);
+  }
+}
 .ai-chat-context-pill__tokens {
   display: none;
 }
@@ -4541,6 +4530,9 @@ button[data-pending=true]::after {
 .dark-theme .ai-chat-context-pill--active {
   background: var(--ai-chat-suggestion-hover-bg, #4b5563);
 }
+.dark-theme .ai-chat-context-pill--updated {
+  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 0 12px rgba(245, 158, 11, 0.22);
+}
 .dark-theme .ai-chat-context-popover {
   background: var(--ai-chat-input-bg, #1f2937);
   border-color: var(--ai-chat-input-border, #374151);
@@ -4580,6 +4572,15 @@ button[data-pending=true]::after {
     }
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .ai-chat-context-pill {
+    transition: none;
+  }
+  .ai-chat-context-pill__spark {
+    animation: none;
+    opacity: 0.9;
+  }
+}
 .ai-chat-error-banner {
   display: flex;
   align-items: flex-start;

package/dist/index.d.mts

@@ -304,6 +304,7 @@ interface AIChatPanelProps {
     contextSections?: ContextSection$1[];
     totalContextTokens?: number;
     maxContextTokens?: number;
+    contextUpdateSignal?: number;
     enableContextDetailView?: boolean;
     disabledSectionIds?: Set<string>;
     onToggleSection?: (sectionId: string, enabled: boolean) => void;

package/dist/index.d.ts

@@ -304,6 +304,7 @@ interface AIChatPanelProps {
     contextSections?: ContextSection$1[];
     totalContextTokens?: number;
     maxContextTokens?: number;
+    contextUpdateSignal?: number;
     enableContextDetailView?: boolean;
     disabledSectionIds?: Set<string>;
     onToggleSection?: (sectionId: string, enabled: boolean) => void;

package/dist/index.js

@@ -5140,6 +5140,7 @@ var ChevronUpIcon = () => /* @__PURE__ */ import_react14.default.createElement("
 var AgentIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ import_react14.default.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ import_react14.default.createElement("path", { d: "M9 13v2" }));
 var ToolIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4l-6 6a2 2 0 0 0 2.8 2.8l6-6a4 4 0 0 0 5.4-5.4l-2.1 2.1-3.3-3.3 2.6-1.6Z" }));
 var CheckIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var ContextViewerIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), /* @__PURE__ */ import_react14.default.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "16", x2: "8", y1: "13", y2: "13" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "16", x2: "8", y1: "17", y2: "17" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "10", x2: "8", y1: "9", y2: "9" }));
 var LLMAsAServiceLogo = () => /* @__PURE__ */ import_react14.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ import_react14.default.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
 var AlertCircleIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
 var CloseIcon = () => /* @__PURE__ */ import_react14.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ import_react14.default.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ import_react14.default.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
@@ -5162,6 +5163,7 @@ var ChatInput = import_react14.default.memo(({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
+  contextUpdateSignal = 0,
   enableContextDetailView = false,
   disabledSectionIds = /* @__PURE__ */ new Set(),
   onToggleSection,
@@ -5172,9 +5174,12 @@ var ChatInput = import_react14.default.memo(({
   const [contextViewerOpen, setContextViewerOpen] = (0, import_react14.useState)(false);
   const [contextViewMode, setContextViewMode] = (0, import_react14.useState)("summary");
   const [expandedSectionId, setExpandedSectionId] = (0, import_react14.useState)(null);
+  const [showContextUpdateCue, setShowContextUpdateCue] = (0, import_react14.useState)(false);
+  const [contextUpdateCueKey, setContextUpdateCueKey] = (0, import_react14.useState)(0);
   const textareaRef = (0, import_react14.useRef)(null);
   const containerRef = (0, import_react14.useRef)(null);
   const contextPopoverRef = (0, import_react14.useRef)(null);
+  const contextUpdateCueTimeoutRef = (0, import_react14.useRef)(null);
   const [userInputSelections, setUserInputSelections] = (0, import_react14.useState)({});
   const [userInputWriteIns, setUserInputWriteIns] = (0, import_react14.useState)({});
   const [userInputValidationError, setUserInputValidationError] = (0, import_react14.useState)("");
@@ -5284,6 +5289,28 @@ var ChatInput = import_react14.default.memo(({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [contextViewerOpen]);
+  (0, import_react14.useEffect)(() => {
+    if (contextUpdateSignal <= 0) {
+      return;
+    }
+    setShowContextUpdateCue(true);
+    setContextUpdateCueKey((prev) => prev + 1);
+    if (contextUpdateCueTimeoutRef.current) {
+      window.clearTimeout(contextUpdateCueTimeoutRef.current);
+      contextUpdateCueTimeoutRef.current = null;
+    }
+    contextUpdateCueTimeoutRef.current = window.setTimeout(() => {
+      setShowContextUpdateCue(false);
+      contextUpdateCueTimeoutRef.current = null;
+    }, 1800);
+  }, [contextUpdateSignal]);
+  (0, import_react14.useEffect)(() => {
+    return () => {
+      if (contextUpdateCueTimeoutRef.current) {
+        window.clearTimeout(contextUpdateCueTimeoutRef.current);
+      }
+    };
+  }, []);
   const formatTokens = (tokens) => {
     if (tokens >= 1e3) {
       return `${(tokens / 1e3).toFixed(1)}K`;
@@ -5539,11 +5566,12 @@ var ChatInput = import_react14.default.memo(({
     ), agentOptions.length === 0 && !isAgentModeActionVisible ? /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-chat-panel__input-footer-spacer" }) : null), contextSections.length > 0 && /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-chat-context-pill-wrapper" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "ai-chat-context-pill-anchor" }, /* @__PURE__ */ import_react14.default.createElement(
       "button",
       {
-        className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""}`,
+        className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""} ${showContextUpdateCue && !contextViewerOpen ? "ai-chat-context-pill--updated" : ""}`,
         onClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
           console.log("[ContextViewer] Button clicked, current state:", contextViewerOpen);
+          setShowContextUpdateCue(false);
           setContextViewerOpen(!contextViewerOpen);
           if (!contextViewerOpen) {
             setContextViewMode("summary");
@@ -5553,9 +5581,18 @@ var ChatInput = import_react14.default.memo(({
           }
         },
         type: "button",
-        title: "View context"
+        title: "View context",
+        "aria-label": "View context"
       },
-      /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
+      /* @__PURE__ */ import_react14.default.createElement("span", { className: "ai-chat-context-pill__icon", "aria-hidden": "true" }, /* @__PURE__ */ import_react14.default.createElement(ContextViewerIcon, null), showContextUpdateCue && !contextViewerOpen && /* @__PURE__ */ import_react14.default.createElement(
+        "span",
+        {
+          key: contextUpdateCueKey,
+          className: "ai-chat-context-pill__spark",
+          "aria-hidden": "true"
+        },
+        "*"
+      ))
     ), contextViewerOpen && /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
@@ -5749,6 +5786,7 @@ var AIChatPanel = ({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
+  contextUpdateSignal = 0,
   enableContextDetailView = false,
   disabledSectionIds: propDisabledSectionIds,
   onToggleSection: propOnToggleSection,
@@ -8931,6 +8969,7 @@ ${traceSummary}` : traceSummary;
         contextSections,
         totalContextTokens,
         maxContextTokens,
+        contextUpdateSignal,
         enableContextDetailView,
         disabledSectionIds,
         onToggleSection: handleToggleSection,
@@ -9163,7 +9202,6 @@ var MessageIcon = () => /* @__PURE__ */ import_react16.default.createElement("sv
 var CloseIcon2 = () => /* @__PURE__ */ import_react16.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react16.default.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 var LoadingDotIcon = () => /* @__PURE__ */ import_react16.default.createElement("span", { className: "ai-agent-panel__loading-dot" });
 var SidebarIcon = () => /* @__PURE__ */ import_react16.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react16.default.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ import_react16.default.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
-var SparkleIcon = () => /* @__PURE__ */ import_react16.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react16.default.createElement("path", { d: "M8 1v3M8 12v3M3 8H0M16 8h-3M12.95 3.05l-2.12 2.12M5.17 10.83l-2.12 2.12M12.95 12.95l-2.12-2.12M5.17 5.17L3.05 3.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), /* @__PURE__ */ import_react16.default.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
 var normalizeConversationListPayload = (payload) => {
   if (!payload) return [];
   const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
@@ -9656,6 +9694,7 @@ var ChatPanelWrapper = ({
   contextSections,
   totalContextTokens,
   maxContextTokens,
+  contextUpdateSignal,
   enableContextDetailView,
   disabledSectionIds,
   onToggleSection,
@@ -9778,6 +9817,7 @@ var ChatPanelWrapper = ({
         contextSections,
         totalContextTokens,
         maxContextTokens,
+        contextUpdateSignal,
         enableContextDetailView,
         disabledSectionIds,
         onToggleSection,
@@ -10129,9 +10169,8 @@ var AIAgentPanel = import_react16.default.forwardRef(({
       commitConversationSelection(tempId, true);
     }
   }), [commitConversationSelection, createDraftConversation, currentAgentId]);
-  const [showContextNotification, setShowContextNotification] = (0, import_react16.useState)(false);
+  const [contextUpdateSignal, setContextUpdateSignal] = (0, import_react16.useState)(0);
   const prevContextRef = (0, import_react16.useRef)(null);
-  const contextNotificationTimeoutRef = (0, import_react16.useRef)(null);
   const prevDefaultAgentRef = (0, import_react16.useRef)(null);
   const fetchFirstPrompt = (0, import_react16.useCallback)((conversationId, agentIdForConversation) => __async(void 0, null, function* () {
     var _a2, _b2;
@@ -10692,24 +10731,9 @@ var AIAgentPanel = import_react16.default.forwardRef(({
     const changed = prevContextRef.current !== contextString;
     if (changed) {
       prevContextRef.current = contextString;
-      if (contextNotificationTimeoutRef.current) {
-        clearTimeout(contextNotificationTimeoutRef.current);
-        contextNotificationTimeoutRef.current = null;
-      }
-      setShowContextNotification(true);
-      contextNotificationTimeoutRef.current = setTimeout(() => {
-        setShowContextNotification(false);
-        contextNotificationTimeoutRef.current = null;
-      }, 3e3);
+      setContextUpdateSignal((prev) => prev + 1);
     }
   }, [mergedContext.sections]);
-  (0, import_react16.useEffect)(() => {
-    return () => {
-      if (contextNotificationTimeoutRef.current) {
-        clearTimeout(contextNotificationTimeoutRef.current);
-      }
-    };
-  }, []);
   (0, import_react16.useEffect)(() => {
     var _a2, _b2;
     let foundDefaultAgent = null;
@@ -11240,7 +11264,7 @@ var AIAgentPanel = import_react16.default.forwardRef(({
         /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ import_react16.default.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title), subtitle ? /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__conversation-subtitle" }, subtitle) : null)
       );
     }))))))),
-    /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ import_react16.default.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ import_react16.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react16.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react16.default.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react16.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react16.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ import_react16.default.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ import_react16.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react16.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react16.default.createElement(ChevronLeftIcon, null)))), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react16.default.createElement(
       ChatPanelWrapper,
       {
         key: activeConv.stableKey,
@@ -11270,6 +11294,7 @@ var AIAgentPanel = import_react16.default.forwardRef(({
         contextSections: mergedContext.sections,
         totalContextTokens: filteredContext.totalTokens,
         maxContextTokens,
+        contextUpdateSignal,
         enableContextDetailView,
         disabledSectionIds: currentDisabledSections,
         onToggleSection: handleContextSectionToggle,

package/dist/index.mjs

@@ -5105,6 +5105,7 @@ var ChevronUpIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns:
 var AgentIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React14.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React14.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React14.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React14.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React14.createElement("path", { d: "M9 13v2" }));
 var ToolIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4l-6 6a2 2 0 0 0 2.8 2.8l6-6a4 4 0 0 0 5.4-5.4l-2.1 2.1-3.3-3.3 2.6-1.6Z" }));
 var CheckIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var ContextViewerIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), /* @__PURE__ */ React14.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React14.createElement("line", { x1: "16", x2: "8", y1: "13", y2: "13" }), /* @__PURE__ */ React14.createElement("line", { x1: "16", x2: "8", y1: "17", y2: "17" }), /* @__PURE__ */ React14.createElement("line", { x1: "10", x2: "8", y1: "9", y2: "9" }));
 var LLMAsAServiceLogo = () => /* @__PURE__ */ React14.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React14.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React14.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
 var AlertCircleIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React14.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ React14.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
 var CloseIcon = () => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React14.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React14.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
@@ -5127,6 +5128,7 @@ var ChatInput = React14.memo(({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
+  contextUpdateSignal = 0,
   enableContextDetailView = false,
   disabledSectionIds = /* @__PURE__ */ new Set(),
   onToggleSection,
@@ -5137,9 +5139,12 @@ var ChatInput = React14.memo(({
   const [contextViewerOpen, setContextViewerOpen] = useState7(false);
   const [contextViewMode, setContextViewMode] = useState7("summary");
   const [expandedSectionId, setExpandedSectionId] = useState7(null);
+  const [showContextUpdateCue, setShowContextUpdateCue] = useState7(false);
+  const [contextUpdateCueKey, setContextUpdateCueKey] = useState7(0);
   const textareaRef = useRef6(null);
   const containerRef = useRef6(null);
   const contextPopoverRef = useRef6(null);
+  const contextUpdateCueTimeoutRef = useRef6(null);
   const [userInputSelections, setUserInputSelections] = useState7({});
   const [userInputWriteIns, setUserInputWriteIns] = useState7({});
   const [userInputValidationError, setUserInputValidationError] = useState7("");
@@ -5249,6 +5254,28 @@ var ChatInput = React14.memo(({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [contextViewerOpen]);
+  useEffect8(() => {
+    if (contextUpdateSignal <= 0) {
+      return;
+    }
+    setShowContextUpdateCue(true);
+    setContextUpdateCueKey((prev) => prev + 1);
+    if (contextUpdateCueTimeoutRef.current) {
+      window.clearTimeout(contextUpdateCueTimeoutRef.current);
+      contextUpdateCueTimeoutRef.current = null;
+    }
+    contextUpdateCueTimeoutRef.current = window.setTimeout(() => {
+      setShowContextUpdateCue(false);
+      contextUpdateCueTimeoutRef.current = null;
+    }, 1800);
+  }, [contextUpdateSignal]);
+  useEffect8(() => {
+    return () => {
+      if (contextUpdateCueTimeoutRef.current) {
+        window.clearTimeout(contextUpdateCueTimeoutRef.current);
+      }
+    };
+  }, []);
   const formatTokens = (tokens) => {
     if (tokens >= 1e3) {
       return `${(tokens / 1e3).toFixed(1)}K`;
@@ -5504,11 +5531,12 @@ var ChatInput = React14.memo(({
     ), agentOptions.length === 0 && !isAgentModeActionVisible ? /* @__PURE__ */ React14.createElement("div", { className: "ai-chat-panel__input-footer-spacer" }) : null), contextSections.length > 0 && /* @__PURE__ */ React14.createElement("div", { className: "ai-chat-context-pill-wrapper" }, /* @__PURE__ */ React14.createElement("div", { className: "ai-chat-context-pill-anchor" }, /* @__PURE__ */ React14.createElement(
       "button",
       {
-        className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""}`,
+        className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""} ${showContextUpdateCue && !contextViewerOpen ? "ai-chat-context-pill--updated" : ""}`,
         onClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
           console.log("[ContextViewer] Button clicked, current state:", contextViewerOpen);
+          setShowContextUpdateCue(false);
           setContextViewerOpen(!contextViewerOpen);
           if (!contextViewerOpen) {
             setContextViewMode("summary");
@@ -5518,9 +5546,18 @@ var ChatInput = React14.memo(({
           }
         },
         type: "button",
-        title: "View context"
+        title: "View context",
+        "aria-label": "View context"
       },
-      /* @__PURE__ */ React14.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
+      /* @__PURE__ */ React14.createElement("span", { className: "ai-chat-context-pill__icon", "aria-hidden": "true" }, /* @__PURE__ */ React14.createElement(ContextViewerIcon, null), showContextUpdateCue && !contextViewerOpen && /* @__PURE__ */ React14.createElement(
+        "span",
+        {
+          key: contextUpdateCueKey,
+          className: "ai-chat-context-pill__spark",
+          "aria-hidden": "true"
+        },
+        "*"
+      ))
     ), contextViewerOpen && /* @__PURE__ */ React14.createElement(
       "div",
       {
@@ -5714,6 +5751,7 @@ var AIChatPanel = ({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
+  contextUpdateSignal = 0,
   enableContextDetailView = false,
   disabledSectionIds: propDisabledSectionIds,
   onToggleSection: propOnToggleSection,
@@ -8896,6 +8934,7 @@ ${traceSummary}` : traceSummary;
         contextSections,
         totalContextTokens,
         maxContextTokens,
+        contextUpdateSignal,
         enableContextDetailView,
         disabledSectionIds,
         onToggleSection: handleToggleSection,
@@ -9128,7 +9167,6 @@ var MessageIcon = () => /* @__PURE__ */ React15.createElement("svg", { width: "1
 var CloseIcon2 = () => /* @__PURE__ */ React15.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React15.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 var LoadingDotIcon = () => /* @__PURE__ */ React15.createElement("span", { className: "ai-agent-panel__loading-dot" });
 var SidebarIcon = () => /* @__PURE__ */ React15.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React15.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ React15.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
-var SparkleIcon = () => /* @__PURE__ */ React15.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React15.createElement("path", { d: "M8 1v3M8 12v3M3 8H0M16 8h-3M12.95 3.05l-2.12 2.12M5.17 10.83l-2.12 2.12M12.95 12.95l-2.12-2.12M5.17 5.17L3.05 3.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), /* @__PURE__ */ React15.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
 var normalizeConversationListPayload = (payload) => {
   if (!payload) return [];
   const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
@@ -9621,6 +9659,7 @@ var ChatPanelWrapper = ({
   contextSections,
   totalContextTokens,
   maxContextTokens,
+  contextUpdateSignal,
   enableContextDetailView,
   disabledSectionIds,
   onToggleSection,
@@ -9743,6 +9782,7 @@ var ChatPanelWrapper = ({
         contextSections,
         totalContextTokens,
         maxContextTokens,
+        contextUpdateSignal,
         enableContextDetailView,
         disabledSectionIds,
         onToggleSection,
@@ -10094,9 +10134,8 @@ var AIAgentPanel = React15.forwardRef(({
       commitConversationSelection(tempId, true);
     }
   }), [commitConversationSelection, createDraftConversation, currentAgentId]);
-  const [showContextNotification, setShowContextNotification] = useState9(false);
+  const [contextUpdateSignal, setContextUpdateSignal] = useState9(0);
   const prevContextRef = useRef7(null);
-  const contextNotificationTimeoutRef = useRef7(null);
   const prevDefaultAgentRef = useRef7(null);
   const fetchFirstPrompt = useCallback4((conversationId, agentIdForConversation) => __async(void 0, null, function* () {
     var _a2, _b2;
@@ -10657,24 +10696,9 @@ var AIAgentPanel = React15.forwardRef(({
     const changed = prevContextRef.current !== contextString;
     if (changed) {
       prevContextRef.current = contextString;
-      if (contextNotificationTimeoutRef.current) {
-        clearTimeout(contextNotificationTimeoutRef.current);
-        contextNotificationTimeoutRef.current = null;
-      }
-      setShowContextNotification(true);
-      contextNotificationTimeoutRef.current = setTimeout(() => {
-        setShowContextNotification(false);
-        contextNotificationTimeoutRef.current = null;
-      }, 3e3);
+      setContextUpdateSignal((prev) => prev + 1);
     }
   }, [mergedContext.sections]);
-  useEffect10(() => {
-    return () => {
-      if (contextNotificationTimeoutRef.current) {
-        clearTimeout(contextNotificationTimeoutRef.current);
-      }
-    };
-  }, []);
   useEffect10(() => {
     var _a2, _b2;
     let foundDefaultAgent = null;
@@ -11205,7 +11229,7 @@ var AIAgentPanel = React15.forwardRef(({
         /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ React15.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title), subtitle ? /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__conversation-subtitle" }, subtitle) : null)
       );
     }))))))),
-    /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React15.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React15.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React15.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React15.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React15.createElement(SparkleIcon, null), /* @__PURE__ */ React15.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React15.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React15.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React15.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React15.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React15.createElement(ChevronLeftIcon, null)))), activeConversationsList.map((activeConv) => /* @__PURE__ */ React15.createElement(
       ChatPanelWrapper,
       {
         key: activeConv.stableKey,
@@ -11235,6 +11259,7 @@ var AIAgentPanel = React15.forwardRef(({
         contextSections: mergedContext.sections,
         totalContextTokens: filteredContext.totalTokens,
         maxContextTokens,
+        contextUpdateSignal,
         enableContextDetailView,
         disabledSectionIds: currentDisabledSections,
         onToggleSection: handleContextSectionToggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIAgentPanel.css

@@ -1407,64 +1407,3 @@
 .ai-agent-panel__chat-header-spacer {
   flex: 1;
 }
-
-/* --------------------------------------------------------
-   Context Change Notification
--------------------------------------------------------- */
-.ai-agent-panel__context-notification {
-  position: absolute;
-  bottom: 70px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background-color: var(--ai-agent-badge-bg);
-  color: var(--ai-agent-badge-text);
-  border-radius: 20px;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: ai-context-notification-in 0.3s ease-out, ai-context-notification-out 0.3s ease-in 2.7s forwards;
-  pointer-events: none;
-}
-
-.ai-agent-panel__context-notification svg {
-  flex-shrink: 0;
-  animation: ai-sparkle-pulse 0.6s ease-in-out infinite alternate;
-}
-
-@keyframes ai-context-notification-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px) scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0) scale(1);
-  }
-}
-
-@keyframes ai-context-notification-out {
-  0% {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px) scale(0.9);
-  }
-}
-
-@keyframes ai-sparkle-pulse {
-  0% {
-    opacity: 0.7;
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}

package/src/AIAgentPanel.tsx

@@ -269,13 +269,6 @@ const SidebarIcon = () => (
   </svg>
 );
 
-const SparkleIcon = () => (
-  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 1v3M8 12v3M3 8H0M16 8h-3M12.95 3.05l-2.12 2.12M5.17 10.83l-2.12 2.12M12.95 12.95l-2.12-2.12M5.17 5.17L3.05 3.05" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
-    <circle cx="8" cy="8" r="2" fill="currentColor"/>
-  </svg>
-);
-
 /**
  * AIAgentPanel - Cursor-inspired multi-agent panel
  */
@@ -955,6 +948,7 @@ interface ChatPanelWrapperProps {
   contextSections: ContextSection[];
   totalContextTokens: number;
   maxContextTokens: number;
+  contextUpdateSignal: number;
   enableContextDetailView: boolean;
   disabledSectionIds: Set<string>;
   onToggleSection: (sectionId: string, enabled: boolean) => void;
@@ -1017,6 +1011,7 @@ const ChatPanelWrapper = (({
   contextSections,
   totalContextTokens,
   maxContextTokens,
+  contextUpdateSignal,
   enableContextDetailView,
   disabledSectionIds,
   onToggleSection,
@@ -1165,6 +1160,7 @@ const ChatPanelWrapper = (({
         contextSections={contextSections}
         totalContextTokens={totalContextTokens}
         maxContextTokens={maxContextTokens}
+        contextUpdateSignal={contextUpdateSignal}
         enableContextDetailView={enableContextDetailView}
         disabledSectionIds={disabledSectionIds}
         onToggleSection={onToggleSection}
@@ -1627,10 +1623,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     }
   }), [commitConversationSelection, createDraftConversation, currentAgentId]);
 
-  // Context change notification state
-  const [showContextNotification, setShowContextNotification] = useState(false);
+  // Bumps when context changes so child components can show a subtle cue.
+  const [contextUpdateSignal, setContextUpdateSignal] = useState(0);
   const prevContextRef = useRef<string | null>(null);
-  const contextNotificationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Track previous defaultAgent to avoid re-suggesting the same agent
   const prevDefaultAgentRef = useRef<string | null>(null);
@@ -2373,7 +2368,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   }, [context, sharedContextSections, pageContextSections, contextDataSources]);
 
 
-  // Detect context changes and show notification
+  // Detect context changes and notify the context icon.
   useEffect(() => {
     // Create a stable string representation of the context for comparison
     const contextString = JSON.stringify(
@@ -2397,33 +2392,10 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     
     if (changed) {
       prevContextRef.current = contextString;
-      
-      // Clear any existing timeout before setting a new one
-      if (contextNotificationTimeoutRef.current) {
-        clearTimeout(contextNotificationTimeoutRef.current);
-        contextNotificationTimeoutRef.current = null;
-      }
-      
-      // Show the notification
-      setShowContextNotification(true);
-      
-      // Auto-hide after 3 seconds
-      contextNotificationTimeoutRef.current = setTimeout(() => {
-        setShowContextNotification(false);
-        contextNotificationTimeoutRef.current = null;
-      }, 3000);
+      setContextUpdateSignal((prev) => prev + 1);
     }
   }, [mergedContext.sections]);
 
-  // Separate cleanup effect for unmount only
-  useEffect(() => {
-    return () => {
-      if (contextNotificationTimeoutRef.current) {
-        clearTimeout(contextNotificationTimeoutRef.current);
-      }
-    };
-  }, []);
-
   // Auto-suggest agent switch when page context includes a defaultAgent
   // Injects a synthetic message with [SUGGEST_AGENT:...] into the chat history
   useEffect(() => {
@@ -3215,14 +3187,6 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
           </div>
         )}
 
-        {/* Context change notification */}
-        {showContextNotification && (
-          <div className="ai-agent-panel__context-notification">
-            <SparkleIcon />
-            <span>Agent now has new context</span>
-          </div>
-        )}
-
         {/* Chat panels - one per active conversation, shown/hidden via CSS */}
         {activeConversationsList.map((activeConv) => (
           <ChatPanelWrapper
@@ -3253,6 +3217,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             contextSections={mergedContext.sections}
             totalContextTokens={filteredContext.totalTokens}
             maxContextTokens={maxContextTokens}
+            contextUpdateSignal={contextUpdateSignal}
             enableContextDetailView={enableContextDetailView}
             disabledSectionIds={currentDisabledSections}
             onToggleSection={handleContextSectionToggle}

package/src/AIChatPanel.css

@@ -1781,7 +1781,7 @@
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: auto;
+  margin-left: 0;
 }
 
 .ai-chat-context-pill-anchor {
@@ -1872,8 +1872,10 @@
 .ai-chat-context-pill {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  justify-content: center;
+  gap: 0;
+  min-width: 30px;
+  padding: 4px 8px;
   background: var(--ai-chat-suggestion-bg, #f3f4f6);
   border: none;
   border-radius: 999px;
@@ -1898,6 +1900,10 @@
   color: #f59e0b;
 }
 
+.ai-chat-context-pill--updated {
+  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.24), 0 0 10px rgba(245, 158, 11, 0.18);
+}
+
 .ai-chat-context-pill__count {
   display: none;
   border-radius: 999px;
@@ -1909,6 +1915,47 @@
   font-size: 12px;
 }
 
+.ai-chat-context-pill__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+}
+
+.ai-chat-context-pill__icon .ai-chat-icon-sm {
+  width: 14px;
+  height: 14px;
+}
+
+.ai-chat-context-pill__spark {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+  font-size: 10px;
+  line-height: 1;
+  color: #f59e0b;
+  text-shadow: 0 0 6px rgba(245, 158, 11, 0.55);
+  pointer-events: none;
+  animation: contextPillSpark 1.6s ease-out forwards;
+}
+
+@keyframes contextPillSpark {
+  0% {
+    opacity: 0;
+    transform: scale(0.7) translateY(2px);
+  }
+  24% {
+    opacity: 0.95;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.08) translateY(-2px);
+  }
+}
+
 .ai-chat-context-pill__tokens {
   display: none;
 }
@@ -2352,6 +2399,10 @@
   background: var(--ai-chat-suggestion-hover-bg, #4b5563);
 }
 
+.dark-theme .ai-chat-context-pill--updated {
+  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 0 12px rgba(245, 158, 11, 0.22);
+}
+
 .dark-theme .ai-chat-context-popover {
   background: var(--ai-chat-input-bg, #1f2937);
   border-color: var(--ai-chat-input-border, #374151);
@@ -2400,6 +2451,17 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ai-chat-context-pill {
+    transition: none;
+  }
+
+  .ai-chat-context-pill__spark {
+    animation: none;
+    opacity: 0.9;
+  }
+}
+
 /* ============================================================================
    Error Banner
 ============================================================================ */

package/src/AIChatPanel.tsx

@@ -195,6 +195,7 @@ export interface AIChatPanelProps {
   contextSections?: ContextSection[];
   totalContextTokens?: number;
   maxContextTokens?: number;
+  contextUpdateSignal?: number;
   enableContextDetailView?: boolean;
   disabledSectionIds?: Set<string>;
   onToggleSection?: (sectionId: string, enabled: boolean) => void;
@@ -1726,6 +1727,7 @@ interface ChatInputProps {
   contextSections?: ContextSection[];
   totalContextTokens?: number;
   maxContextTokens?: number;
+  contextUpdateSignal?: number;
   enableContextDetailView?: boolean;
   disabledSectionIds?: Set<string>;
   onToggleSection?: (sectionId: string, enabled: boolean) => void;
@@ -1752,6 +1754,7 @@ const ChatInput = React.memo<ChatInputProps>(({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8000,
+  contextUpdateSignal = 0,
   enableContextDetailView = false,
   disabledSectionIds = new Set(),
   onToggleSection,
@@ -1762,9 +1765,12 @@ const ChatInput = React.memo<ChatInputProps>(({
   const [contextViewerOpen, setContextViewerOpen] = useState(false);
   const [contextViewMode, setContextViewMode] = useState<'summary' | 'detail'>('summary');
   const [expandedSectionId, setExpandedSectionId] = useState<string | null>(null);
+  const [showContextUpdateCue, setShowContextUpdateCue] = useState(false);
+  const [contextUpdateCueKey, setContextUpdateCueKey] = useState(0);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const contextPopoverRef = useRef<HTMLDivElement | null>(null);
+  const contextUpdateCueTimeoutRef = useRef<number | null>(null);
   const [userInputSelections, setUserInputSelections] = useState<Record<string, string>>({});
   const [userInputWriteIns, setUserInputWriteIns] = useState<Record<string, string>>({});
   const [userInputValidationError, setUserInputValidationError] = useState('');
@@ -1892,6 +1898,33 @@ const ChatInput = React.memo<ChatInputProps>(({
     }
   }, [contextViewerOpen]);
 
+  useEffect(() => {
+    if (contextUpdateSignal <= 0) {
+      return;
+    }
+
+    setShowContextUpdateCue(true);
+    setContextUpdateCueKey((prev) => prev + 1);
+
+    if (contextUpdateCueTimeoutRef.current) {
+      window.clearTimeout(contextUpdateCueTimeoutRef.current);
+      contextUpdateCueTimeoutRef.current = null;
+    }
+
+    contextUpdateCueTimeoutRef.current = window.setTimeout(() => {
+      setShowContextUpdateCue(false);
+      contextUpdateCueTimeoutRef.current = null;
+    }, 1800);
+  }, [contextUpdateSignal]);
+
+  useEffect(() => {
+    return () => {
+      if (contextUpdateCueTimeoutRef.current) {
+        window.clearTimeout(contextUpdateCueTimeoutRef.current);
+      }
+    };
+  }, []);
+
   // Format tokens for display
   const formatTokens = (tokens: number): string => {
     if (tokens >= 1000) {
@@ -2251,11 +2284,12 @@ const ChatInput = React.memo<ChatInputProps>(({
           <div className="ai-chat-context-pill-wrapper">
             <div className="ai-chat-context-pill-anchor">
                 <button
-                  className={`ai-chat-context-pill ${contextViewerOpen ? 'ai-chat-context-pill--active' : ''} ${isOverLimit ? 'ai-chat-context-pill--warning' : ''}`}
+                  className={`ai-chat-context-pill ${contextViewerOpen ? 'ai-chat-context-pill--active' : ''} ${isOverLimit ? 'ai-chat-context-pill--warning' : ''} ${showContextUpdateCue && !contextViewerOpen ? 'ai-chat-context-pill--updated' : ''}`}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     console.log('[ContextViewer] Button clicked, current state:', contextViewerOpen);
+                    setShowContextUpdateCue(false);
                     setContextViewerOpen(!contextViewerOpen);
                     if (!contextViewerOpen) {
                       setContextViewMode('summary');
@@ -2266,8 +2300,20 @@ const ChatInput = React.memo<ChatInputProps>(({
                   }}
                   type="button"
                   title="View context"
+                  aria-label="View context"
                 >
-                  <span className="ai-chat-context-pill__label">context: {contextSections.length} {contextSections.length === 1 ? 'section' : 'sections'}</span>
+                  <span className="ai-chat-context-pill__icon" aria-hidden="true">
+                    <ContextViewerIcon />
+                    {showContextUpdateCue && !contextViewerOpen && (
+                      <span
+                        key={contextUpdateCueKey}
+                        className="ai-chat-context-pill__spark"
+                        aria-hidden="true"
+                      >
+                        *
+                      </span>
+                    )}
+                  </span>
                 </button>
 
                 {/* Context popover - positioned relative to context pill */}
@@ -2552,6 +2598,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8000,
+  contextUpdateSignal = 0,
   enableContextDetailView = false,
   disabledSectionIds: propDisabledSectionIds,
   onToggleSection: propOnToggleSection,
@@ -6969,6 +7016,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         contextSections={contextSections}
         totalContextTokens={totalContextTokens}
         maxContextTokens={maxContextTokens}
+        contextUpdateSignal={contextUpdateSignal}
         enableContextDetailView={enableContextDetailView}
         disabledSectionIds={disabledSectionIds}
         onToggleSection={handleToggleSection}