@oro.ad/nuxt-claude-devtools 1.3.0 → 1.5.1

package/dist/runtime/overlay/composables/useMobileSwipe.js

@@ -0,0 +1,79 @@
+import { nextTick, ref } from "vue";
+export function useMobileSwipe(options) {
+  const {
+    panelRef,
+    headerRef,
+    onSwipeClose,
+    threshold = 100,
+    mobileBreakpoint = 640
+  } = options;
+  const touchStartY = ref(0);
+  const touchDeltaY = ref(0);
+  const isSwiping = ref(false);
+  const isSwipeClosing = ref(false);
+  function handleTouchStart(e) {
+    if (window.innerWidth > mobileBreakpoint) return;
+    touchStartY.value = e.touches[0].clientY;
+    touchDeltaY.value = 0;
+    isSwiping.value = true;
+  }
+  function handleTouchMove(e) {
+    if (!isSwiping.value || window.innerWidth > mobileBreakpoint) return;
+    const currentY = e.touches[0].clientY;
+    const delta = currentY - touchStartY.value;
+    if (delta > 0) {
+      e.preventDefault();
+      touchDeltaY.value = delta;
+      if (panelRef.value) {
+        panelRef.value.style.transform = `translateY(${delta}px)`;
+        panelRef.value.style.transition = "none";
+      }
+    }
+  }
+  function handleTouchEnd() {
+    if (!isSwiping.value || window.innerWidth > mobileBreakpoint) return;
+    isSwiping.value = false;
+    if (panelRef.value) {
+      panelRef.value.style.transition = "transform 0.3s ease-out";
+      if (touchDeltaY.value > threshold) {
+        isSwipeClosing.value = true;
+        panelRef.value.style.transform = "translateY(100%)";
+        setTimeout(() => {
+          onSwipeClose();
+          nextTick(() => {
+            isSwipeClosing.value = false;
+            if (panelRef.value) {
+              panelRef.value.style.transform = "";
+              panelRef.value.style.transition = "";
+            }
+          });
+        }, 300);
+      } else {
+        panelRef.value.style.transform = "translateY(0)";
+        setTimeout(() => {
+          if (panelRef.value) {
+            panelRef.value.style.transition = "";
+          }
+        }, 300);
+      }
+    }
+    touchDeltaY.value = 0;
+  }
+  function setupTouchMoveListener() {
+    if (headerRef.value) {
+      headerRef.value.addEventListener("touchmove", handleTouchMove, { passive: false });
+    }
+  }
+  function cleanupTouchMoveListener() {
+    if (headerRef.value) {
+      headerRef.value.removeEventListener("touchmove", handleTouchMove);
+    }
+  }
+  return {
+    isSwipeClosing,
+    handleTouchStart,
+    handleTouchEnd,
+    setupTouchMoveListener,
+    cleanupTouchMoveListener
+  };
+}

package/dist/runtime/overlay/composables/usePanelInteraction.d.ts

@@ -0,0 +1,30 @@
+import { type Ref } from 'vue';
+export interface PanelInteractionOptions {
+    panelScreenPos: Ref<{
+        left: number;
+        top: number;
+    }>;
+    panelSize: Ref<{
+        width: number;
+        height: number;
+    }>;
+    panelRef: Ref<HTMLElement | null>;
+    isMobile: Ref<boolean>;
+    minSize?: {
+        width: number;
+        height: number;
+    };
+    padding?: number;
+    edgeThreshold?: number;
+}
+export declare function usePanelInteraction(options: PanelInteractionOptions): {
+    isDragging: Ref<boolean, boolean>;
+    isResizing: Ref<boolean, boolean>;
+    activeEdge: Ref<string | null, string | null>;
+    hoveredEdge: Ref<string | null, string | null>;
+    cursor: import("vue").ComputedRef<string>;
+    startDrag: (e: MouseEvent) => void;
+    startResize: (edge: string, e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseLeave: () => void;
+};

package/dist/runtime/overlay/composables/usePanelInteraction.js

@@ -0,0 +1,184 @@
+import { computed, ref } from "vue";
+const DEFAULTS = {
+  minSize: { width: 320, height: 400 },
+  padding: 20,
+  edgeThreshold: 12
+};
+export function usePanelInteraction(options) {
+  const {
+    panelScreenPos,
+    panelSize,
+    panelRef,
+    isMobile,
+    minSize = DEFAULTS.minSize,
+    padding = DEFAULTS.padding,
+    edgeThreshold = DEFAULTS.edgeThreshold
+  } = options;
+  const isDragging = ref(false);
+  const dragStart = ref({ x: 0, y: 0, panelX: 0, panelY: 0 });
+  const isResizing = ref(false);
+  const activeEdge = ref(null);
+  const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0, panelX: 0, panelY: 0 });
+  const hoveredEdge = ref(null);
+  const cursor = computed(() => {
+    const edge = hoveredEdge.value || activeEdge.value;
+    if (!edge) return "default";
+    const cursors = {
+      n: "ns-resize",
+      s: "ns-resize",
+      e: "ew-resize",
+      w: "ew-resize",
+      ne: "nesw-resize",
+      sw: "nesw-resize",
+      nw: "nwse-resize",
+      se: "nwse-resize"
+    };
+    return cursors[edge] || "default";
+  });
+  function startDrag(e) {
+    if (isMobile.value) return;
+    e.preventDefault();
+    dragStart.value = {
+      x: e.clientX,
+      y: e.clientY,
+      panelX: panelScreenPos.value.left,
+      panelY: panelScreenPos.value.top
+    };
+    isDragging.value = true;
+    window.addEventListener("mousemove", onDragMove);
+    window.addEventListener("mouseup", endDrag);
+  }
+  function onDragMove(e) {
+    if (!isDragging.value) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const deltaX = e.clientX - dragStart.value.x;
+    const deltaY = e.clientY - dragStart.value.y;
+    let newLeft = dragStart.value.panelX + deltaX;
+    let newTop = dragStart.value.panelY + deltaY;
+    newLeft = Math.max(padding, Math.min(vw - panelSize.value.width - padding, newLeft));
+    newTop = Math.max(padding, Math.min(vh - panelSize.value.height - padding, newTop));
+    panelScreenPos.value.left = newLeft;
+    panelScreenPos.value.top = newTop;
+  }
+  function endDrag() {
+    isDragging.value = false;
+    window.removeEventListener("mousemove", onDragMove);
+    window.removeEventListener("mouseup", endDrag);
+  }
+  function startResize(edge, e) {
+    if (isMobile.value) return;
+    e.preventDefault();
+    e.stopPropagation();
+    activeEdge.value = edge;
+    resizeStart.value = {
+      x: e.clientX,
+      y: e.clientY,
+      width: panelSize.value.width,
+      height: panelSize.value.height,
+      panelX: panelScreenPos.value.left,
+      panelY: panelScreenPos.value.top
+    };
+    isResizing.value = true;
+    window.addEventListener("mousemove", onResizeMove);
+    window.addEventListener("mouseup", endResize);
+  }
+  function onResizeMove(e) {
+    if (!isResizing.value || !activeEdge.value) return;
+    const edge = activeEdge.value;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const deltaX = e.clientX - resizeStart.value.x;
+    const deltaY = e.clientY - resizeStart.value.y;
+    let newWidth = resizeStart.value.width;
+    let newHeight = resizeStart.value.height;
+    let newLeft = resizeStart.value.panelX;
+    let newTop = resizeStart.value.panelY;
+    if (edge.includes("w")) {
+      newLeft = resizeStart.value.panelX + deltaX;
+      newWidth = resizeStart.value.width - deltaX;
+    }
+    if (edge.includes("e")) {
+      newWidth = resizeStart.value.width + deltaX;
+    }
+    if (edge.includes("n")) {
+      newTop = resizeStart.value.panelY + deltaY;
+      newHeight = resizeStart.value.height - deltaY;
+    }
+    if (edge.includes("s")) {
+      newHeight = resizeStart.value.height + deltaY;
+    }
+    if (newWidth < minSize.width) {
+      if (edge.includes("w")) {
+        newLeft = resizeStart.value.panelX + resizeStart.value.width - minSize.width;
+      }
+      newWidth = minSize.width;
+    }
+    if (newHeight < minSize.height) {
+      if (edge.includes("n")) {
+        newTop = resizeStart.value.panelY + resizeStart.value.height - minSize.height;
+      }
+      newHeight = minSize.height;
+    }
+    newLeft = Math.max(padding, newLeft);
+    newTop = Math.max(padding, newTop);
+    if (newLeft + newWidth > vw - padding) {
+      newWidth = vw - padding - newLeft;
+    }
+    if (newTop + newHeight > vh - padding) {
+      newHeight = vh - padding - newTop;
+    }
+    panelScreenPos.value.left = newLeft;
+    panelScreenPos.value.top = newTop;
+    panelSize.value.width = newWidth;
+    panelSize.value.height = newHeight;
+  }
+  function endResize() {
+    isResizing.value = false;
+    activeEdge.value = null;
+    window.removeEventListener("mousemove", onResizeMove);
+    window.removeEventListener("mouseup", endResize);
+  }
+  function onMouseMove(e) {
+    if (isMobile.value || isResizing.value || isDragging.value) return;
+    if (!panelRef.value) return;
+    const rect = panelRef.value.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const w = rect.width;
+    const h = rect.height;
+    const nearLeft = x < edgeThreshold;
+    const nearRight = x > w - edgeThreshold;
+    const nearTop = y < edgeThreshold;
+    const nearBottom = y > h - edgeThreshold;
+    if (nearTop && nearLeft) hoveredEdge.value = "nw";
+    else if (nearTop && nearRight) hoveredEdge.value = "ne";
+    else if (nearBottom && nearLeft) hoveredEdge.value = "sw";
+    else if (nearBottom && nearRight) hoveredEdge.value = "se";
+    else if (nearTop) hoveredEdge.value = "n";
+    else if (nearBottom) hoveredEdge.value = "s";
+    else if (nearLeft) hoveredEdge.value = "w";
+    else if (nearRight) hoveredEdge.value = "e";
+    else hoveredEdge.value = null;
+  }
+  function onMouseLeave() {
+    if (!isResizing.value) {
+      hoveredEdge.value = null;
+    }
+  }
+  return {
+    // State
+    isDragging,
+    isResizing,
+    activeEdge,
+    hoveredEdge,
+    cursor,
+    // Drag methods
+    startDrag,
+    // Resize methods
+    startResize,
+    // Mouse handlers
+    onMouseMove,
+    onMouseLeave
+  };
+}

package/dist/runtime/overlay/composables/usePanelPosition.d.ts

@@ -0,0 +1,69 @@
+export type PanelAnchor = 'br' | 'bl' | 'tr' | 'tl';
+export interface PanelPositionOptions {
+    storageKey?: string;
+    defaultBadgePos?: {
+        x: number;
+        y: number;
+    };
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    minSize?: {
+        width: number;
+        height: number;
+    };
+    padding?: number;
+    badgeDimensions?: {
+        width: number;
+        height: number;
+    };
+}
+export declare function usePanelPosition(options?: PanelPositionOptions): {
+    badgePos: import("vue").Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    panelSize: import("vue").Ref<{
+        width: number;
+        height: number;
+    }, {
+        width: number;
+        height: number;
+    } | {
+        width: number;
+        height: number;
+    }>;
+    panelScreenPos: import("vue").Ref<{
+        left: number;
+        top: number;
+    }, {
+        left: number;
+        top: number;
+    } | {
+        left: number;
+        top: number;
+    }>;
+    panelAnchor: import("vue").Ref<PanelAnchor, PanelAnchor>;
+    load: () => void;
+    save: () => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    onBadgeDragEnd: (pos: {
+        x: number;
+        y: number;
+    }) => void;
+    getPanelStyle: () => {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        transformOrigin: string;
+    };
+};

package/dist/runtime/overlay/composables/usePanelPosition.js

@@ -0,0 +1,147 @@
+import { ref } from "vue";
+const DEFAULTS = {
+  storageKey: "claude-overlay-panel-state",
+  badgePos: { x: 24, y: 24 },
+  size: { width: 440, height: 600 },
+  minSize: { width: 320, height: 400 },
+  padding: 20,
+  badgeDimensions: { width: 100, height: 40 }
+};
+export function usePanelPosition(options = {}) {
+  const config = {
+    storageKey: options.storageKey ?? DEFAULTS.storageKey,
+    minSize: options.minSize ?? DEFAULTS.minSize,
+    padding: options.padding ?? DEFAULTS.padding,
+    badgeDimensions: options.badgeDimensions ?? DEFAULTS.badgeDimensions
+  };
+  const badgePos = ref(options.defaultBadgePos ?? { ...DEFAULTS.badgePos });
+  const panelSize = ref(options.defaultSize ?? { ...DEFAULTS.size });
+  const panelScreenPos = ref({ left: 0, top: 0 });
+  const panelAnchor = ref("br");
+  function load() {
+    try {
+      const saved = localStorage.getItem(config.storageKey);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (parsed.x !== void 0 && parsed.y !== void 0) {
+          badgePos.value = { x: parsed.x, y: parsed.y };
+        }
+        if (parsed.width !== void 0 && parsed.height !== void 0) {
+          panelSize.value = { width: parsed.width, height: parsed.height };
+        }
+        if (parsed.anchor) {
+          panelAnchor.value = parsed.anchor;
+        }
+      }
+    } catch {
+    }
+  }
+  function save() {
+    try {
+      localStorage.setItem(config.storageKey, JSON.stringify({
+        x: badgePos.value.x,
+        y: badgePos.value.y,
+        width: panelSize.value.width,
+        height: panelSize.value.height,
+        anchor: panelAnchor.value
+      }));
+    } catch {
+    }
+  }
+  function getBadgeCorners() {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const { width: bw, height: bh } = config.badgeDimensions;
+    const right = vw - badgePos.value.x;
+    const left = right - bw;
+    const bottom = vh - badgePos.value.y;
+    const top = bottom - bh;
+    return { left, right, top, bottom, centerX: left + bw / 2, centerY: top + bh / 2 };
+  }
+  function calculateAnchor(pos) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const { width: bw, height: bh } = config.badgeDimensions;
+    const badgeRight = vw - pos.x;
+    const badgeLeft = badgeRight - bw;
+    const badgeBottom = vh - pos.y;
+    const badgeTop = badgeBottom - bh;
+    const centerX = badgeLeft + bw / 2;
+    const centerY = badgeTop + bh / 2;
+    const moreSpaceLeft = centerX > vw / 2;
+    const moreSpaceAbove = centerY > vh / 2;
+    if (moreSpaceLeft && moreSpaceAbove) return "br";
+    if (!moreSpaceLeft && moreSpaceAbove) return "bl";
+    if (moreSpaceLeft && !moreSpaceAbove) return "tr";
+    return "tl";
+  }
+  function openPanel() {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const { padding, minSize } = config;
+    const badge = getBadgeCorners();
+    const anchor = panelAnchor.value;
+    const maxWidth = anchor === "br" || anchor === "tr" ? badge.right - padding : vw - badge.left - padding;
+    const maxHeight = anchor === "br" || anchor === "bl" ? badge.bottom - padding : vh - badge.top - padding;
+    panelSize.value.width = Math.max(minSize.width, Math.min(panelSize.value.width, maxWidth));
+    panelSize.value.height = Math.max(minSize.height, Math.min(panelSize.value.height, maxHeight));
+    const positions = {
+      br: { left: badge.right - panelSize.value.width, top: badge.bottom - panelSize.value.height },
+      bl: { left: badge.left, top: badge.bottom - panelSize.value.height },
+      tr: { left: badge.right - panelSize.value.width, top: badge.top },
+      tl: { left: badge.left, top: badge.top }
+    };
+    panelScreenPos.value = positions[anchor];
+  }
+  function closePanel() {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const anchor = panelAnchor.value;
+    const { width: bw, height: bh } = config.badgeDimensions;
+    const { left, top } = panelScreenPos.value;
+    const { width, height } = panelSize.value;
+    const edgePositions = {
+      br: { right: left + width, bottom: top + height },
+      bl: { right: left + bw, bottom: top + height },
+      tr: { right: left + width, bottom: top + bh },
+      tl: { right: left + bw, bottom: top + bh }
+    };
+    const edges = edgePositions[anchor];
+    badgePos.value = { x: vw - edges.right, y: vh - edges.bottom };
+    save();
+  }
+  function onBadgeDragEnd(pos) {
+    badgePos.value = { x: pos.x, y: pos.y };
+    panelAnchor.value = calculateAnchor(pos);
+    save();
+  }
+  function getPanelStyle() {
+    const origins = {
+      br: "bottom right",
+      bl: "bottom left",
+      tr: "top right",
+      tl: "top left"
+    };
+    return {
+      left: `${panelScreenPos.value.left}px`,
+      top: `${panelScreenPos.value.top}px`,
+      width: `${panelSize.value.width}px`,
+      height: `${panelSize.value.height}px`,
+      transformOrigin: origins[panelAnchor.value]
+    };
+  }
+  return {
+    // State
+    badgePos,
+    panelSize,
+    panelScreenPos,
+    panelAnchor,
+    // Methods
+    load,
+    save,
+    openPanel,
+    closePanel,
+    onBadgeDragEnd,
+    getPanelStyle
+  };
+}

package/dist/runtime/server/claude-session.d.ts

@@ -29,10 +29,21 @@ export declare class ClaudeSession {
     private currentModel;
     private accumulatedText;
     private pendingCriticalFiles;
+    private currentProcess;
+    private wasStopped;
     constructor(config: ClaudeSessionConfig);
     attachSocketIO(io: SocketServer): void;
     destroy(): void;
+    private stopGeneration;
     private resetStreamState;
+    /**
+     * Save image attachments to disk and return metadata
+     */
+    private saveAttachments;
+    /**
+     * Get file extension from MIME type or filename
+     */
+    private getExtensionFromMimeType;
     getDocsManager(): DocsManager;
     getSettingsManager(): SettingsManager;
     private forceSaveCurrentState;