agentation-vue 0.2.6 → 0.2.12

package/README.md

@@ -0,0 +1,94 @@
+# agentation-vue
+
+[![npm version](https://img.shields.io/npm/v/agentation-vue)](https://www.npmjs.com/package/agentation-vue)
+[![npm downloads](https://img.shields.io/npm/dm/agentation-vue)](https://www.npmjs.com/package/agentation-vue)
+
+Visual feedback tool for AI coding agents. Drop a single component into your Vue app and let your AI agent see and annotate UI elements.
+
+Compatible with **Vue 3.3+** and **Vue 2.7**.
+
+> **Note:** This is an unofficial, community-maintained Vue adaptation of [Agentation](https://github.com/benjitaylor/agentation). It is not affiliated with or endorsed by the original project.
+
+## Installation
+
+```bash
+npm install agentation-vue
+```
+
+## Setup — Vue 3
+
+```ts
+import { AgentationVuePlugin } from 'agentation-vue'
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'agentation-vue/style.css'
+
+createApp(App)
+  .use(AgentationVuePlugin)
+  .mount('#app')
+```
+
+Then place the component once in your root `App.vue`:
+
+```vue
+<template>
+  <router-view />
+  <agentation-vue />
+</template>
+```
+
+## Setup — Vue 2.7
+
+```ts
+import { AgentationVuePlugin } from 'agentation-vue'
+// main.ts
+import Vue from 'vue'
+import App from './App.vue'
+import 'agentation-vue/style.css'
+
+Vue.use(AgentationVuePlugin)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+Then place the component once in your root `App.vue`:
+
+```vue
+<template>
+  <div>
+    <router-view />
+    <agentation-vue />
+  </div>
+</template>
+```
+
+> Vue 2 templates require a single root element — wrap your content in a `<div>`.
+
+## Chrome extension
+
+This repo also contains a Chrome extension for injecting Agentation without modifying the target app code.
+
+## Features
+
+- **Click-to-annotate** — click any element to pin a numbered marker and leave a comment
+- **Multi-select** — `Shift+drag` to rubber-band select multiple elements at once
+- **Area select** — `Alt+drag` to annotate a screen region
+- **Text selection** — highlight text to annotate it
+- **Vue component tree** — automatically detects and reports the Vue component hierarchy for each annotated element
+- **Markdown output** — copies all annotations as structured Markdown, ready to paste into an AI chat
+- **Forensic mode** — captures bounding boxes, computed styles, CSS classes, and accessibility attributes
+- **Themes** — light, dark, or auto (follows system preference)
+- **Auto-hide launcher** — optionally tucks the collapsed floating button near screen edges and reveals it on approach
+- **Session persistence** — annotations survive refreshes and are scoped per page URL via `sessionStorage`
+- **Custom tooltip directive** — `v-va-tooltip` with optional keyboard shortcut badge
+
+## Acknowledgments
+
+This project is inspired by and based on [Agentation](https://github.com/benjitaylor/agentation) by [Ben Taylor](https://github.com/benjitaylor). Thank you for the original concept and implementation.
+
+## License
+
+[PolyForm Shield 1.0.0](./LICENSE) — Copyright (c) 2026 Dorian Becker

package/dist/AgentationVue.vue

@@ -1,5 +1,13 @@
 <script setup>
-import { isVue2 as _isVue2, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue-demi";
+import {
+  isVue2 as _isVue2,
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from "vue-demi";
 import AgentationToolbar from "./components/AgentationToolbar.vue";
 import AnnotationInput from "./components/AnnotationInput.vue";
 import AnnotationMarker from "./components/AnnotationMarker.vue";
@@ -10,15 +18,28 @@ import { useAnnotations } from "./composables/useAnnotations.mjs";
 import { useAreaSelect } from "./composables/useAreaSelect.mjs";
 import { useElementDetection } from "./composables/useElementDetection.mjs";
 import { useInteractionMode } from "./composables/useInteractionMode.mjs";
-import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/useKeyboardShortcuts.mjs";
+import {
+  DEFAULT_SHORTCUT_CONFIG,
+  useKeyboardShortcuts
+} from "./composables/useKeyboardShortcuts.mjs";
 import { useMarkerPositions } from "./composables/useMarkerPositions.mjs";
 import { useMultiSelect } from "./composables/useMultiSelect.mjs";
 import { useOutputFormatter } from "./composables/useOutputFormatter.mjs";
+import { usePeekMode } from "./composables/usePeekMode.mjs";
 import { useSettings } from "./composables/useSettings.mjs";
 import { useTextSelection } from "./composables/useTextSelection.mjs";
+import { PEEK_HOLD_DURATION_MS } from "./constants.mjs";
 import { isInsideAgentationTree } from "./utils/agentation-tree.mjs";
 import { copyToClipboard } from "./utils/clipboard.mjs";
-import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from "./utils/dom-inspector.mjs";
+import {
+  isFixed as checkIsFixed,
+  detectVueComponents,
+  getAccessibilityInfo,
+  getComputedStylesSummary,
+  getNearbyElements,
+  getNearbyText,
+  getRelevantComputedStyles
+} from "./utils/dom-inspector.mjs";
 import { createPortalContainer, destroyPortalContainer } from "./utils/portal.mjs";
 import { getElementName, getElementPath } from "./utils/selectors.mjs";
 import { boundingBoxToStyle } from "./utils/style.mjs";
@@ -60,14 +81,49 @@ const toolbarRef = ref(null);
 const currentUrl = ref(props.pageUrl || getCurrentUrl());
 const { settings } = useSettings();
 const { mode, transition } = useInteractionMode();
-const { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, setScopeUrl } = useAnnotations(currentUrl.value);
-const { hoveredRect, hoveredName, hoveredComponentChain, onMouseMove, clearHighlight, getElementUnderOverlay, cleanup: cleanupDetection } = useElementDetection(overlayEl, () => settings.showComponentTree);
+const {
+  annotations,
+  addAnnotation,
+  removeAnnotation,
+  updateAnnotation,
+  clearAnnotations,
+  restoreAnnotations,
+  setScopeUrl
+} = useAnnotations(currentUrl.value);
+const {
+  hoveredRect,
+  hoveredName,
+  hoveredComponentChain,
+  onMouseMove,
+  clearHighlight,
+  getElementUnderOverlay,
+  cleanup: cleanupDetection
+} = useElementDetection(overlayEl, () => settings.showComponentTree);
 const textSelection = useTextSelection(mode);
 const multiSelect = useMultiSelect(mode, transition);
 const areaSelect = useAreaSelect(mode, transition);
 const animPause = useAnimationPause();
 const { recalculatePositions: _recalculatePositions } = useMarkerPositions(annotations);
 const { formatAnnotations } = useOutputFormatter();
+const peekActive = ref(false);
+const peekMode = usePeekMode({
+  peekKey: () => settings.peekKey,
+  enabled: () => mode.value === "idle" && (!toolbarRef.value || !toolbarRef.value.expanded),
+  isInputOpen: () => mode.value === "input-open",
+  onActivate() {
+    peekActive.value = true;
+    transition("inspect");
+  },
+  onDeactivate() {
+    peekActive.value = false;
+    if (mode.value === "input-open")
+      return;
+    if (mode.value !== "idle") {
+      transition("idle");
+      clearHighlight();
+    }
+  }
+});
 const pendingPosition = ref(null);
 const pendingElementName = ref("");
 const pendingTarget = ref(null);
@@ -78,11 +134,17 @@ const editingAnnotation = ref(null);
 const settingsOpen = ref(false);
 const settingsAnchorEl = ref(null);
 const copyFeedback = ref(false);
+const undoFeedback = ref(false);
+const undoSnapshot = ref([]);
+let undoTimer = null;
+const UNDO_TIMEOUT_MS = 5e3;
 const toolbarDragging = ref(false);
 const DRAG_END_SUPPRESSION_MS = 500;
 const SETTINGS_CLOSE_SUPPRESSION_MS = 220;
 let suppressInteractionsUntil = 0;
-const effectiveBlockPageInteractions = computed(() => props.blockPageInteractions ?? settings.blockPageInteractions);
+const effectiveBlockPageInteractions = computed(
+  () => props.blockPageInteractions ?? settings.blockPageInteractions
+);
 const rootStyle = computed(() => {
   const hex = settings.markerColor;
   if (!hex)
@@ -106,7 +168,16 @@ const pendingMarkerY = computed(() => {
     return 0;
   return pendingPosition.value.y + (window.scrollY || document.documentElement.scrollTop);
 });
-const pendingIsSelection = computed(() => mode.value === "input-open" && !editingAnnotation.value && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value));
+const pendingIsSelection = computed(
+  () => mode.value === "input-open" && !editingAnnotation.value && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value)
+);
+const mentionCandidates = computed(
+  () => annotations.value.map((ann, i) => ({
+    id: ann.id,
+    displayNumber: i + 1,
+    commentPreview: ann.comment.replace(/@\[\d+\]/g, "@\u2026").slice(0, 40) + (ann.comment.length > 40 ? "\u2026" : "")
+  })).filter((c) => !editingAnnotation.value || c.id !== editingAnnotation.value.id)
+);
 let portalContainer = null;
 const isVue2 = _isVue2;
 const PassThrough = defineComponent({
@@ -115,8 +186,12 @@ const PassThrough = defineComponent({
     return (typeof slot === "function" ? slot() : slot?.[0]) || null;
   }
 });
-const portalWrapper = computed(() => props.disablePortal || isVue2 ? PassThrough : "Teleport");
-const portalProps = computed(() => props.disablePortal || isVue2 ? {} : { to: "body" });
+const portalWrapper = computed(
+  () => props.disablePortal || isVue2 ? PassThrough : "Teleport"
+);
+const portalProps = computed(
+  () => props.disablePortal || isVue2 ? {} : { to: "body" }
+);
 onMounted(() => {
   if (!props.disablePortal && isVue2 && rootEl.value) {
     portalContainer = createPortalContainer();
@@ -124,39 +199,79 @@ onMounted(() => {
   }
 });
 onBeforeUnmount(() => {
+  dismissUndo();
   animPause.cleanup();
   cleanupDetection();
   if (portalContainer) {
     destroyPortalContainer(portalContainer);
   }
 });
-watch(() => props.outputDetail, (v) => {
-  if (v)
-    settings.outputDetail = v;
-}, { immediate: true });
-watch(() => props.markerColor, (v) => {
-  if (v)
-    settings.markerColor = v;
-}, { immediate: true });
-watch(() => props.theme, (v) => {
-  if (v)
-    settings.theme = v;
-}, { immediate: true });
-watch(() => props.blockPageInteractions, (v) => {
-  if (v)
-    settings.blockPageInteractions = v;
-}, { immediate: true });
-watch(() => props.autoHideToolbar, (v) => {
-  if (v)
-    settings.autoHideToolbar = v;
-}, { immediate: true });
-watch(() => props.pageUrl, (url) => {
-  syncUrlScope(url || getCurrentUrl());
-}, { immediate: true });
-watch(() => props.activationKey, (v) => {
-  if (v !== void 0)
-    settings.activationKey = v;
-}, { immediate: true });
+watch(
+  () => props.outputDetail,
+  (v) => {
+    if (v)
+      settings.outputDetail = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.markerColor,
+  (v) => {
+    if (v)
+      settings.markerColor = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.theme,
+  (v) => {
+    if (v)
+      settings.theme = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.blockPageInteractions,
+  (v) => {
+    if (v)
+      settings.blockPageInteractions = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.autoHideToolbar,
+  (v) => {
+    if (v)
+      settings.autoHideToolbar = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.pageUrl,
+  (url) => {
+    syncUrlScope(url || getCurrentUrl());
+  },
+  { immediate: true }
+);
+watch(
+  () => props.activationKey,
+  (v) => {
+    if (v !== void 0)
+      settings.activationKey = v;
+  },
+  { immediate: true }
+);
+let crosshairStyle = null;
+watch(mode, (current, previous) => {
+  if (current !== "idle" && previous === "idle") {
+    crosshairStyle = document.createElement("style");
+    crosshairStyle.textContent = "* { cursor: crosshair !important; }";
+    document.head.appendChild(crosshairStyle);
+  } else if (current === "idle" && previous !== "idle") {
+    crosshairStyle?.remove();
+    crosshairStyle = null;
+  }
+});
 function onActivate() {
   transition("inspect");
 }
@@ -179,8 +294,6 @@ function onOverlayMouseMove(e) {
 function onOverlayMouseDown(e) {
   if (isInteractionLocked())
     return;
-  if (multiSelect.onMouseDown(e))
-    return;
   areaSelect.onMouseDown(e);
 }
 function onOverlayMouseUp(e) {
@@ -207,7 +320,10 @@ function onOverlayMouseUp(e) {
     areaSelect.onMouseUp();
     const rect = areaSelect.areaRect.value;
     if (rect && rect.width > 10 && rect.height > 10) {
-      pendingPosition.value = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+      pendingPosition.value = {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      };
       pendingElementName.value = "Area selection";
       pendingComponentChain.value = void 0;
       pendingComputedStyles.value = void 0;
@@ -229,7 +345,9 @@ function onOverlayMouseUp(e) {
     };
     pendingElementName.value = `"${textResult.selectedText.slice(0, 30)}"`;
     pendingComponentChain.value = getVueComponents(textResult.anchorElement);
-    pendingComputedStyles.value = getRelevantComputedStyles(textResult.anchorElement);
+    pendingComputedStyles.value = getRelevantComputedStyles(
+      textResult.anchorElement
+    );
     pendingTarget.value = textResult.anchorElement;
     pendingTextSelection.value = {
       text: textResult.selectedText,
@@ -282,7 +400,10 @@ function shouldUseDocumentFallbackEvents() {
   return mode.value === "inspect" && !effectiveBlockPageInteractions.value && !isInteractionLocked();
 }
 function lockInteractionsTemporarily(durationMs) {
-  suppressInteractionsUntil = Math.max(suppressInteractionsUntil, Date.now() + durationMs);
+  suppressInteractionsUntil = Math.max(
+    suppressInteractionsUntil,
+    Date.now() + durationMs
+  );
 }
 function isInteractionLocked() {
   return settingsOpen.value || toolbarDragging.value || Date.now() < suppressInteractionsUntil;
@@ -297,6 +418,7 @@ function closeSettings(lockInteractions = true) {
 function syncUrlScope(nextUrl) {
   if (!nextUrl || currentUrl.value === nextUrl)
     return;
+  dismissUndo();
   currentUrl.value = nextUrl;
   setScopeUrl(nextUrl);
 }
@@ -395,7 +517,9 @@ function onInputAdd(comment) {
       comment,
       url,
       element: "multi",
-      elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(boundingBox.y)})`,
+      elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(
+        boundingBox.y
+      )})`,
       isMultiSelect: true,
       elements,
       boundingBox,
@@ -471,7 +595,12 @@ function onInputAdd(comment) {
       vueComponents: getVueComponents(el),
       nearbyElements: getNearbyElements(el),
       nearbyText: getNearbyText(el),
-      boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      boundingBox: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      },
       cssClasses: detail === "forensic" ? Array.from(el.classList).join(" ") : void 0,
       fullPath: detail === "forensic" ? getElementPath(el) : void 0,
       computedStyles: detail === "forensic" ? getComputedStylesSummary(el) : void 0,
@@ -480,16 +609,31 @@ function onInputAdd(comment) {
     emit("annotation-add", ann);
   }
   resetPendingState();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("inspect");
+    peekMode.scheduleExit();
+  } else {
+    transition("inspect");
+  }
 }
 function onInputCancel() {
   resetPendingState();
-  multiSelect.reset();
   areaSelect.reset();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("idle");
+    peekMode.deactivate();
+  } else {
+    transition("inspect");
+  }
 }
 async function onCopy() {
-  const markdown = formatAnnotations(annotations.value, settings.outputDetail, resolvedUrl.value);
+  const markdown = formatAnnotations(
+    annotations.value,
+    settings.outputDetail,
+    resolvedUrl.value
+  );
   if (props.copyToClipboard !== false) {
     const success = await copyToClipboard(markdown);
     if (!success)
@@ -501,13 +645,37 @@ async function onCopy() {
   }
   emit("copy", markdown);
   if (settings.clearAfterCopy) {
-    const cleared = clearAnnotations();
-    emit("annotations-clear", cleared);
+    onClear();
   }
 }
+function dismissUndo() {
+  undoFeedback.value = false;
+  undoSnapshot.value = [];
+  if (undoTimer) {
+    clearTimeout(undoTimer);
+    undoTimer = null;
+  }
+}
+function startUndoTimer() {
+  if (undoTimer)
+    clearTimeout(undoTimer);
+  undoTimer = setTimeout(() => dismissUndo(), UNDO_TIMEOUT_MS);
+}
+function onUndo() {
+  const snapshot = undoSnapshot.value;
+  dismissUndo();
+  if (snapshot.length > 0)
+    restoreAnnotations(snapshot);
+}
 function onClear() {
+  dismissUndo();
   const cleared = clearAnnotations();
+  if (cleared.length === 0)
+    return;
   emit("annotations-clear", cleared);
+  undoSnapshot.value = cleared;
+  undoFeedback.value = true;
+  startUndoTimer();
 }
 function onMarkerClick(ann) {
   const scrollTop = window.scrollY || document.documentElement.scrollTop;
@@ -515,12 +683,16 @@ function onMarkerClick(ann) {
   const markerY = ann.isFixed ? ann.y : ann.y - scrollTop;
   editingAnnotation.value = ann;
   pendingPosition.value = { x: markerX, y: markerY };
-  pendingElementName.value = getElementName(ann._targetRef?.deref() || document.createElement(ann.element));
+  pendingElementName.value = getElementName(
+    ann._targetRef?.deref() || document.createElement(ann.element)
+  );
   pendingComponentChain.value = ann.vueComponents;
-  pendingComputedStyles.value = ann.computedStyles ? Object.fromEntries(ann.computedStyles.split("\n").filter(Boolean).map((line) => {
-    const idx = line.indexOf(":");
-    return idx > -1 ? [line.slice(0, idx).trim(), line.slice(idx + 1).trim()] : [line, ""];
-  })) : ann._targetRef?.deref() ? getRelevantComputedStyles(ann._targetRef.deref()) : void 0;
+  pendingComputedStyles.value = ann.computedStyles ? Object.fromEntries(
+    ann.computedStyles.split("\n").filter(Boolean).map((line) => {
+      const idx = line.indexOf(":");
+      return idx > -1 ? [line.slice(0, idx).trim(), line.slice(idx + 1).trim()] : [line, ""];
+    })
+  ) : ann._targetRef?.deref() ? getRelevantComputedStyles(ann._targetRef.deref()) : void 0;
   pendingTextSelection.value = null;
   pendingTarget.value = ann._targetRef?.deref() || null;
   transition("input-open");
@@ -532,7 +704,13 @@ function onInputDelete() {
   if (removed)
     emit("annotation-delete", removed);
   resetPendingState();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("idle");
+    peekMode.deactivate();
+  } else {
+    transition("inspect");
+  }
 }
 function onInputSave(comment) {
   if (!editingAnnotation.value)
@@ -541,7 +719,13 @@ function onInputSave(comment) {
   if (updated)
     emit("annotation-update", updated);
   resetPendingState();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("inspect");
+    peekMode.scheduleExit();
+  } else {
+    transition("inspect");
+  }
 }
 function onToggleArea(value) {
   areaSelect.isAreaMode.value = value;
@@ -596,7 +780,10 @@ onMounted(() => {
   document.addEventListener("mousemove", onDocumentMouseMove, true);
   document.addEventListener("mousedown", onDocumentMouseDown, true);
   document.addEventListener("mouseup", onDocumentMouseUp, true);
-  document.addEventListener("wheel", onDocumentWheel, { passive: true, capture: true });
+  document.addEventListener("wheel", onDocumentWheel, {
+    passive: true,
+    capture: true
+  });
   document.addEventListener("click", onDocumentClick, true);
 });
 onBeforeUnmount(() => {
@@ -613,14 +800,21 @@ onBeforeUnmount(() => {
 
 <template>
   <component :is="portalWrapper" v-bind="portalProps">
-    <div ref="rootEl" data-agentation-vue :data-va-theme="settings.theme !== 'auto' ? settings.theme : void 0" :style="rootStyle">
+    <div
+      ref="rootEl"
+      data-agentation-vue
+      :data-va-theme="settings.theme !== 'auto' ? settings.theme : void 0"
+      :style="rootStyle"
+    >
       <!-- Intercept overlay -->
       <div
         v-if="mode !== 'idle'"
         ref="overlayEl"
         class="__va-intercept"
         :class="{ '__va-intercept--input-open': mode === 'input-open' }"
-        :style="mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : void 0"
+        :style="
+  mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : void 0
+"
         @mousemove="onOverlayMouseMove"
         @mousedown="onOverlayMouseDown"
         @mouseup="onOverlayMouseUp"
@@ -647,10 +841,11 @@ onBeforeUnmount(() => {
         :style="boundingBoxToStyle(areaSelect.areaRect.value)"
       />
 
-      <!-- Annotation markers -->
+      <!-- Annotation markers (hidden when toolbar is collapsed) -->
       <AnnotationMarker
         v-for="(ann, i) in annotations"
         :key="ann.id"
+        :hidden="mode === 'idle'"
         :number="i + 1"
         :x="ann.x"
         :y="ann.y"
@@ -679,6 +874,7 @@ onBeforeUnmount(() => {
         :computed-styles="pendingComputedStyles"
         :initial-comment="editingAnnotation?.comment"
         :is-editing="!!editingAnnotation"
+        :mention-candidates="mentionCandidates"
         @add="onInputAdd"
         @cancel="onInputCancel"
         @delete="onInputDelete"
@@ -698,6 +894,18 @@ onBeforeUnmount(() => {
         Copied!
       </div>
 
+      <!-- Undo clear feedback -->
+      <div
+        v-if="undoFeedback"
+        class="__va-undo-feedback"
+        :class="{ '__va-undo-feedback--shifted': copyFeedback }"
+      >
+        <span>Annotations cleared</span>
+        <button type="button" class="__va-undo-btn" @click="onUndo">
+          Undo
+        </button>
+      </div>
+
       <!-- Toolbar -->
       <AgentationToolbar
         ref="toolbarRef"
@@ -707,6 +915,8 @@ onBeforeUnmount(() => {
         :is-area-mode="areaSelect.isAreaMode.value"
         :auto-hide-enabled="settings.autoHideToolbar"
         :placement="settings.toolbarPlacement"
+        :is-peek-charging="peekMode.isCharging.value"
+        :peek-duration-ms="PEEK_HOLD_DURATION_MS"
         @activate="onActivate"
         @deactivate="onDeactivate"
         @copy="onCopy"

package/dist/components/AgentationToolbar.d.vue.ts

@@ -6,6 +6,8 @@ type __VLS_Props = {
     isAreaMode: boolean;
     autoHideEnabled: boolean;
     placement: ToolbarAnchor;
+    isPeekCharging: boolean;
+    peekDurationMs: number;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {
     expanded: import("vue-demi").Ref<boolean, boolean>;

package/dist/components/AgentationToolbar.vue

@@ -10,7 +10,9 @@ const props = defineProps({
   isPaused: { type: Boolean, required: true },
   isAreaMode: { type: Boolean, required: true },
   autoHideEnabled: { type: Boolean, required: true },
-  placement: { type: String, required: true }
+  placement: { type: String, required: true },
+  isPeekCharging: { type: Boolean, required: true },
+  peekDurationMs: { type: Number, required: true }
 });
 const emit = defineEmits(["activate", "deactivate", "copy", "clear", "toggle-pause", "toggle-area", "update:placement", "open-settings", "drag-start", "drag-end"]);
 const expanded = ref(false);
@@ -77,8 +79,7 @@ function onDeactivate() {
   emit("deactivate");
 }
 function onClear() {
-  if (confirm("Clear all annotations?"))
-    emit("clear");
+  emit("clear");
 }
 function onOpenSettings(e) {
   const anchorEl = e.currentTarget instanceof HTMLElement ? e.currentTarget : null;
@@ -134,6 +135,14 @@ defineExpose({ expanded, placement });
         >
           <VaIcon name="cursor" />
           <span v-if="annotationCount > 0" class="__va-toolbar-badge">{{ annotationCount }}</span>
+          <svg
+            v-if="isPeekCharging"
+            class="__va-peek-ring"
+            viewBox="0 0 46 46"
+            aria-hidden="true"
+          >
+            <circle cx="23" cy="23" r="21" :style="{ animationDuration: `${peekDurationMs}ms` }" />
+          </svg>
         </button>
       </div>
 

package/dist/components/AgentationToolbar.vue.d.ts

@@ -6,6 +6,8 @@ type __VLS_Props = {
     isAreaMode: boolean;
     autoHideEnabled: boolean;
     placement: ToolbarAnchor;
+    isPeekCharging: boolean;
+    peekDurationMs: number;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {
     expanded: import("vue-demi").Ref<boolean, boolean>;