@tutti-os/agent-gui 0.0.51 → 0.0.52

package/dist/agent-conversation/index.js

@@ -6,9 +6,9 @@ import {
   projectAgentConversationVM,
   reconcileProjectedAgentConversationVM,
   useProjectedAgentConversation
-} from "../chunk-23YM25SG.js";
-import "../chunk-RKZMETSQ.js";
-import "../chunk-UUY5VEK4.js";
+} from "../chunk-3ZVVFQH5.js";
+import "../chunk-PIKG746A.js";
+import "../chunk-UKDC63WG.js";
 import "../chunk-Y35GDLP2.js";
 import "../chunk-LUGELG5V.js";
 import "../chunk-66EQ6EQO.js";

package/dist/agent-message-center/index.js

@@ -6,7 +6,7 @@ import {
   approvalOptionDisplayLabel,
   getPromptToolDetails,
   isPromptRequestIdTitle
-} from "../chunk-M7GNA2WD.js";
+} from "../chunk-BFIYBPFD.js";
 import {
   PLAN_IMPLEMENTATION_ACTION_IMPLEMENT,
   PLAN_IMPLEMENTATION_PROMPT,
@@ -25,7 +25,7 @@ import {
   extractExitPlanModeOptions,
   isExitPlanSwitchModeInput,
   normalizeAskUserQuestions
-} from "../chunk-RKZMETSQ.js";
+} from "../chunk-PIKG746A.js";
 import {
   managedAgentRoundedIconUrl,
   userAvatarPlaceholderUrl,

package/dist/app/renderer/agentactivity.css

@@ -276,6 +276,7 @@
   --agent-gui-package-danger: var(--state-danger);
   --agent-gui-accent: var(--agent-gui-package-accent);
   --agent-gui-accent-strong: var(--agent-gui-package-accent-strong);
+  --agent-gui-mention-app-color: var(--tutti-purple);
   --agent-gui-success: var(--agent-gui-package-success);
   --agent-gui-warning: var(--agent-gui-package-warning);
   --agent-gui-danger: var(--agent-gui-package-danger);
@@ -3929,8 +3930,9 @@ aside.workspace-agents-status-panel
   -webkit-mask-size: 16px 16px;
 }
 
-[data-agent-mention-kind="workspace-app"].tsh-agent-object-token--entity {
-  color: var(--tutti-purple);
+[data-agent-mention-kind="workspace-app"].tsh-agent-object-token--entity,
+[data-agent-mention-kind="workspace-reference"][data-agent-reference-source="app"].tsh-agent-object-token--entity {
+  color: var(--agent-gui-mention-app-color, var(--tutti-purple));
 }
 
 [data-agent-mention-kind="skill"].tsh-agent-object-token--entity,
@@ -3966,6 +3968,9 @@ aside.workspace-agents-status-panel
 }
 
 [data-agent-mention-kind="workspace-app"]
+  [data-agent-mention-app-icon="true"]
+  .tsh-agent-object-token__kind-icon,
+[data-agent-mention-kind="workspace-reference"][data-agent-reference-source="app"]
   [data-agent-mention-app-icon="true"]
   .tsh-agent-object-token__kind-icon {
   display: block;
@@ -4131,6 +4136,7 @@ aside.workspace-agents-status-panel
   --agent-gui-accent-strong: var(--agent-gui-package-accent-strong);
   --agent-gui-accent-bg: var(--agent-gui-package-accent-bg);
   --agent-gui-border-focus: var(--agent-gui-package-border-focus);
+  --agent-gui-mention-app-color: var(--tutti-purple);
   --agent-gui-success: var(--agent-gui-package-success);
   --agent-gui-warning: var(--agent-gui-package-warning);
   --agent-gui-danger: var(--agent-gui-package-danger);
@@ -5796,29 +5802,34 @@ button.agent-gui-node__conversation-section-toggle:hover
   --agent-message-locator-hit-size: 18px;
   --agent-message-locator-center-offset: 10px;
   --agent-message-locator-visible-height: 100vh;
+  --agent-message-locator-visible-top-offset: 0px;
+  --agent-message-locator-viewport-height: var(--agent-message-locator-height);
 
   position: sticky;
   top: max(
     0px,
     calc(
-      (
-          var(--agent-message-locator-visible-height) -
-            var(--agent-message-locator-height)
-        ) /
-        2
+      var(--agent-message-locator-visible-top-offset) +
+        (
+          (
+              var(--agent-message-locator-visible-height) -
+                var(--agent-message-locator-viewport-height)
+            ) /
+            2
+        )
     )
   );
   right: 0;
   z-index: 7;
   justify-self: stretch;
   width: calc(100% + var(--agent-gui-message-locator-inline-offset));
-  height: var(--agent-message-locator-height);
+  height: var(--agent-message-locator-viewport-height);
   margin-right: calc(-1 * var(--agent-gui-message-locator-inline-offset));
-  margin-bottom: calc(-1 * var(--agent-message-locator-height));
+  margin-bottom: calc(-1 * var(--agent-message-locator-viewport-height));
   pointer-events: none;
 }
 
-.agent-gui-message-locator::before {
+.agent-gui-message-locator__viewport {
   position: absolute;
   top: 0;
   right: calc(
@@ -5827,17 +5838,30 @@ button.agent-gui-node__conversation-section-toggle:hover
   );
   width: var(--agent-message-locator-hit-size);
   height: 100%;
-  content: "";
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   pointer-events: auto;
+  scrollbar-width: none;
+}
+
+.agent-gui-message-locator__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.agent-gui-message-locator__content {
+  position: relative;
+  min-height: 100%;
+  height: var(--agent-message-locator-height);
 }
 
 .agent-gui-message-locator__track-segment {
   position: absolute;
   top: var(--agent-message-locator-segment-position);
-  right: var(--agent-message-locator-center-offset);
+  left: 50%;
   width: 1px;
   height: 8px;
-  transform: translateX(50%);
+  transform: translateX(-50%);
   background: color-mix(
     in srgb,
     var(--line-2, var(--tutti-line-2)) 82%,
@@ -5848,10 +5872,7 @@ button.agent-gui-node__conversation-section-toggle:hover
 .agent-gui-message-locator__tick {
   position: absolute;
   top: var(--agent-message-locator-position);
-  right: calc(
-    var(--agent-message-locator-center-offset) -
-      var(--agent-message-locator-hit-size) / 2
-  );
+  left: 0;
   display: grid;
   width: var(--agent-message-locator-hit-size);
   height: var(--agent-message-locator-hit-size);
@@ -5924,7 +5945,9 @@ button.agent-gui-node__conversation-section-toggle:hover
   display: grid;
   width: min(360px, calc(100vw - 112px));
   max-width: max-content;
+  max-height: calc(var(--agent-message-locator-visible-height) - 32px);
   gap: 12px;
+  overflow-y: auto;
   padding: 16px;
   border: 1px solid
     color-mix(in srgb, var(--line-2, var(--tutti-line-2)) 72%, transparent);
@@ -8318,7 +8341,6 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   display: block;
 }
 
-
 .workspace-agents-status-panel__detail-subagent-log {
   display: flex;
   flex-direction: column;
@@ -8355,7 +8377,6 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
   color: var(--tutti-status-danger, #c0392b);
 }
 
-
 .workspace-agents-status-panel__detail-subagent-name {
   color: var(--tutti-text-primary, rgba(0, 0, 0, 0.85));
   margin-left: 4px;

package/dist/{chunk-BQVYICR7.js → chunk-2OLYX32K.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-HDBKB5RA.js";
 import {
   normalizeAgentSessionMentionTitle
-} from "./chunk-UUY5VEK4.js";
+} from "./chunk-UKDC63WG.js";
 import {
   resolveAgentMentionFileThumbnailUrl,
   resolveAgentMentionFileVisualKind
@@ -2134,4 +2134,4 @@ export {
   AgentFileMentionPalette,
   AgentContextMentionPalette
 };
-//# sourceMappingURL=chunk-BQVYICR7.js.map
+//# sourceMappingURL=chunk-2OLYX32K.js.map

package/dist/{chunk-23YM25SG.js → chunk-3ZVVFQH5.js}

@@ -13,7 +13,7 @@ import {
   resolveWorkspaceFileLinkAction,
   resolveWorkspaceFilePathCandidate,
   resolveWorkspaceLinkAction
-} from "./chunk-RKZMETSQ.js";
+} from "./chunk-PIKG746A.js";
 import {
   AGENT_RICH_TEXT_CARET_ANCHOR,
   attrsToMentionItem,
@@ -21,7 +21,7 @@ import {
   formatAgentMentionMarkdown,
   mentionItemToAttrs,
   parseAgentMentionMarkdown
-} from "./chunk-UUY5VEK4.js";
+} from "./chunk-UKDC63WG.js";
 import {
   fileChangeCountFromChanges,
   fileChangeEntriesFromChanges,
@@ -14017,6 +14017,9 @@ var AGENT_TRANSCRIPT_ESTIMATED_TURN_HEIGHT_PX = 280;
 var AGENT_TRANSCRIPT_TURN_GAP_PX = 12;
 var AGENT_TRANSCRIPT_FALLBACK_TURN_COUNT = 3;
 var AGENT_MESSAGE_LOCATOR_PANEL_FADE_MS = 160;
+var AGENT_MESSAGE_LOCATOR_ITEM_SPACING_PX = 30;
+var AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX = 18;
+var AGENT_MESSAGE_LOCATOR_BOTTOM_SAFE_INSET_MAX_PX = 48;
 function transcriptLabelsEqual(previous, next) {
   return previous === next || previous.thinkingLabel === next.thinkingLabel && previous.processing === next.processing && previous.turnSummary === next.turnSummary && previous.rawTimelineJson === next.rawTimelineJson && previous.userMessageLocator === next.userMessageLocator && previous.toolCallsLabel === next.toolCallsLabel;
 }
@@ -14260,6 +14263,7 @@ function AgentMessageLocatorRail({
   onLocate
 }) {
   const locatorRef = useRef8(null);
+  const locatorViewportRef = useRef8(null);
   const closePanelTimeoutRef = useRef8(null);
   const [isPanelOpen, setIsPanelOpen] = useState18(false);
   const [shouldRenderPanel, setShouldRenderPanel] = useState18(false);
@@ -14267,7 +14271,7 @@ function AgentMessageLocatorRail({
   const [selectedKey, setSelectedKey] = useState18(null);
   const previousAgentResponseByKeyRef = useRef8(null);
   const [unreadAgentResponseKeys, setUnreadAgentResponseKeys] = useState18(/* @__PURE__ */ new Set());
-  const [visibleHeightPx, setVisibleHeightPx] = useState18(null);
+  const [visibleFrame, setVisibleFrame] = useState18(null);
   useEffect11(() => {
     if (isPanelOpen) {
       setShouldRenderPanel(true);
@@ -14342,18 +14346,18 @@ function AgentMessageLocatorRail({
       return;
     }
     let animationFrame = null;
-    const updateVisibleHeight = () => {
+    const updateVisibleFrame = () => {
       animationFrame = null;
-      const nextHeight = scrollParent.clientHeight;
-      setVisibleHeightPx(
-        (current) => current === nextHeight ? current : nextHeight
+      const nextFrame = readMessageLocatorVisibleFrame(scrollParent);
+      setVisibleFrame(
+        (current) => current?.heightPx === nextFrame.heightPx && current.topOffsetPx === nextFrame.topOffsetPx ? current : nextFrame
       );
     };
     const scheduleUpdate = () => {
       if (animationFrame !== null) {
         return;
       }
-      animationFrame = window.requestAnimationFrame(updateVisibleHeight);
+      animationFrame = window.requestAnimationFrame(updateVisibleFrame);
     };
     scheduleUpdate();
     const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleUpdate);
@@ -14399,10 +14403,25 @@ function AgentMessageLocatorRail({
       }
     };
   }, [items]);
+  useLayoutEffect2(() => {
+    const selectedIndex = selectedKey ? items.findIndex((item) => item.key === selectedKey) : -1;
+    const viewport = locatorViewportRef.current;
+    if (selectedIndex < 0 || !viewport) {
+      return;
+    }
+    const railHeight2 = (items.length - 1) * AGENT_MESSAGE_LOCATOR_ITEM_SPACING_PX + AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX;
+    const viewportHeight2 = viewport.clientHeight || Math.min(railHeight2, visibleFrame?.heightPx ?? railHeight2);
+    scrollMessageLocatorViewportToIndex(
+      viewport,
+      selectedIndex,
+      viewportHeight2
+    );
+  }, [items, selectedKey, visibleFrame]);
   if (items.length < 2) {
     return null;
   }
-  const railHeight = (items.length - 1) * 30 + 18;
+  const railHeight = (items.length - 1) * AGENT_MESSAGE_LOCATOR_ITEM_SPACING_PX + AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX;
+  const viewportHeight = visibleFrame === null ? railHeight : Math.min(railHeight, visibleFrame.heightPx);
   const activeOrSelectedKey = activeKey ?? selectedKey;
   const markItemRead = (itemKey) => {
     setUnreadAgentResponseKeys((currentUnreadKeys) => {
@@ -14465,41 +14484,68 @@ function AgentMessageLocatorRail({
       onMouseLeave: closePanelSoon,
       style: {
         "--agent-message-locator-height": `${railHeight}px`,
-        ...visibleHeightPx !== null ? {
-          "--agent-message-locator-visible-height": `${visibleHeightPx}px`
+        "--agent-message-locator-viewport-height": `${viewportHeight}px`,
+        ...visibleFrame !== null ? {
+          "--agent-message-locator-visible-height": `${visibleFrame.heightPx}px`,
+          "--agent-message-locator-visible-top-offset": `${visibleFrame.topOffsetPx}px`
         } : {}
       },
       children: [
-        items.slice(0, -1).map((item, index) => /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx59(
           "div",
           {
-            className: "agent-gui-message-locator__track-segment",
-            style: {
-              "--agent-message-locator-segment-position": `${index * 30 + 18}px`
-            },
-            "aria-hidden": "true"
-          },
-          `segment:${item.key}`
-        )),
-        items.map((item, index) => /* @__PURE__ */ jsx59(
-          "button",
-          {
-            type: "button",
-            className: "agent-gui-message-locator__tick nodrag tsh-desktop-no-drag",
-            style: {
-              "--agent-message-locator-position": `${index * 30 + 9}px`
-            },
-            "aria-label": item.summary,
-            title: item.summary,
-            "data-selected": item.key === selectedKey ? "true" : void 0,
-            "data-unread-agent-response": unreadAgentResponseKeys.has(item.key) ? "true" : void 0,
-            onClick: () => handleLocateItem(item),
-            onFocus: () => setActiveKey(item.key),
-            onMouseEnter: () => setActiveKey(item.key),
-            children: /* @__PURE__ */ jsx59("span", { className: "agent-gui-message-locator__dot", "aria-hidden": "true" })
-          },
-          item.key
-        )),
+            ref: locatorViewportRef,
+            className: "agent-gui-message-locator__viewport",
+            "data-testid": "agent-message-locator-viewport",
+            children: /* @__PURE__ */ jsxs44(
+              "div",
+              {
+                className: "agent-gui-message-locator__content",
+                style: {
+                  "--agent-message-locator-height": `${railHeight}px`
+                },
+                children: [
+                  items.slice(0, -1).map((item, index) => /* @__PURE__ */ jsx59(
+                    "div",
+                    {
+                      className: "agent-gui-message-locator__track-segment",
+                      style: {
+                        "--agent-message-locator-segment-position": `${index * AGENT_MESSAGE_LOCATOR_ITEM_SPACING_PX + AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX}px`
+                      },
+                      "aria-hidden": "true"
+                    },
+                    `segment:${item.key}`
+                  )),
+                  items.map((item, index) => /* @__PURE__ */ jsx59(
+                    "button",
+                    {
+                      type: "button",
+                      className: "agent-gui-message-locator__tick nodrag tsh-desktop-no-drag",
+                      style: {
+                        "--agent-message-locator-position": `${index * AGENT_MESSAGE_LOCATOR_ITEM_SPACING_PX + AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX / 2}px`
+                      },
+                      "aria-label": item.summary,
+                      title: item.summary,
+                      "data-selected": item.key === selectedKey ? "true" : void 0,
+                      "data-unread-agent-response": unreadAgentResponseKeys.has(item.key) ? "true" : void 0,
+                      onClick: () => handleLocateItem(item),
+                      onFocus: () => setActiveKey(item.key),
+                      onMouseEnter: () => setActiveKey(item.key),
+                      children: /* @__PURE__ */ jsx59(
+                        "span",
+                        {
+                          className: "agent-gui-message-locator__dot",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    },
+                    item.key
+                  ))
+                ]
+              }
+            )
+          }
+        ),
         shouldRenderPanel ? /* @__PURE__ */ jsx59(
           "div",
           {
@@ -14509,6 +14555,7 @@ function AgentMessageLocatorRail({
             "data-testid": "agent-message-locator-panel",
             onMouseEnter: openPanel,
             onMouseLeave: closePanelSoon,
+            onWheel: containMessageLocatorPanelWheel,
             children: items.map((item) => /* @__PURE__ */ jsx59(
               "button",
               {
@@ -14528,6 +14575,47 @@ function AgentMessageLocatorRail({
     }
   );
 }
+function scrollMessageLocatorViewportToIndex(viewport, selectedIndex, viewportHeight) {
+  const selectedTop = selectedIndex * AGENT_MESSAGE_LOCATOR_ITEM_SPACING_PX - AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX / 2;
+  const selectedBottom = selectedTop + AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX;
+  const padding = AGENT_MESSAGE_LOCATOR_HIT_SIZE_PX;
+  const currentTop = viewport.scrollTop;
+  const currentBottom = currentTop + viewportHeight;
+  if (selectedTop < currentTop + padding) {
+    viewport.scrollTop = Math.max(0, selectedTop - padding);
+    return;
+  }
+  if (selectedBottom > currentBottom - padding) {
+    viewport.scrollTop = Math.max(0, selectedBottom - viewportHeight + padding);
+  }
+}
+function readMessageLocatorVisibleFrame(scrollParent) {
+  const style = window.getComputedStyle(scrollParent);
+  const topOffsetPx = parseCssPx(style.scrollPaddingTop);
+  const bottomOffsetPx = Math.min(
+    parseCssPx(style.scrollPaddingBottom),
+    AGENT_MESSAGE_LOCATOR_BOTTOM_SAFE_INSET_MAX_PX
+  );
+  return {
+    heightPx: Math.max(
+      0,
+      scrollParent.clientHeight - topOffsetPx - bottomOffsetPx
+    ),
+    topOffsetPx
+  };
+}
+function parseCssPx(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+}
+function containMessageLocatorPanelWheel(event) {
+  event.stopPropagation();
+  if (event.deltaY === 0) {
+    return;
+  }
+  event.preventDefault();
+  event.currentTarget.scrollTop += event.deltaY;
+}
 function findMessageLocatorScrollParent(locator) {
   const timeline = locator.closest(
     '[data-testid="agent-gui-timeline"]'
@@ -14776,4 +14864,4 @@ export {
   AgentConversationFlow,
   useProjectedAgentConversation
 };
-//# sourceMappingURL=chunk-23YM25SG.js.map
+//# sourceMappingURL=chunk-3ZVVFQH5.js.map