kapi-ui 0.2.1 → 0.3.0

package/dist/browser/overlay.js

@@ -0,0 +1,322 @@
+import { startInspecting, stopInspecting, setOnHover, setOnElementClick, setOnSelectionChange, setDisabled } from './inspector.js';
+import { updateHoverPanel, showProcessingStatus } from './hover-panel.js';
+import { beginComment, updateSelection, clearAllComments, cancelOpenDraft, buildAllCommentsPrompt } from './comments.js';
+import { connectSocket, sendComments, stopComments, setOnCommentsDone, setOnCommentsError, setOnCommentsProcessing } from './socket.js';
+import { LOGO_SVG, AI_SVG, COPY_SVG, CHECK_SVG, DELETE_SVG, STOP_SVG } from './icons.js';
+import styles from './styles/overlay.css?inline';
+const KAPI_TAG = 'kapi-overlay';
+const POSITION_KEY = 'kapi-overlay-position';
+const DRAG_THRESHOLD = 4;
+const COLLAPSED_WIDTH = 40;
+const BAR_HEIGHT = 40;
+const INSET = 20;
+function loadPosition() {
+    try {
+        const raw = localStorage.getItem(POSITION_KEY);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed?.left === 'number' && typeof parsed?.top === 'number')
+            return parsed;
+    }
+    catch {
+        /* ignore corrupt/inaccessible storage */
+    }
+    return null;
+}
+function savePosition(position) {
+    try {
+        localStorage.setItem(POSITION_KEY, JSON.stringify(position));
+    }
+    catch {
+        /* ignore (e.g. storage disabled) */
+    }
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/** Creates and wires up the floating Kapi overlay. */
+export function insertOverlay() {
+    // 1. Only one overlay may exist on a page.
+    if (document.querySelector(KAPI_TAG))
+        return;
+    connectSocket();
+    // 2. Build the Shadow DOM UI. Its styles stay isolated from the host page.
+    const host = document.createElement(KAPI_TAG);
+    const root = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = styles;
+    const bar = document.createElement('div');
+    bar.className = 'kapi-bar';
+    const logoBtn = document.createElement('button');
+    logoBtn.className = 'kapi-btn kapi-logo-btn';
+    logoBtn.type = 'button';
+    logoBtn.setAttribute('aria-label', 'Toggle Kapi');
+    logoBtn.setAttribute('aria-expanded', 'false');
+    logoBtn.innerHTML = LOGO_SVG;
+    const extra = document.createElement('div');
+    extra.className = 'kapi-extra';
+    const makeDivider = () => {
+        const divider = document.createElement('span');
+        divider.className = 'kapi-divider';
+        return divider;
+    };
+    // The vite plugin / nuxt module injects this global only when the agent
+    // session is disabled (`agent: false`); default (undefined) means enabled.
+    const agentEnabled = window.__KAPI_AGENT_ENABLED__ !== false;
+    const aiBtn = document.createElement('button');
+    aiBtn.className = 'kapi-btn';
+    aiBtn.type = 'button';
+    aiBtn.setAttribute('aria-label', 'AI');
+    aiBtn.innerHTML = AI_SVG;
+    aiBtn.addEventListener('click', () => {
+        const prompt = buildAllCommentsPrompt();
+        if (prompt)
+            sendComments(prompt);
+    });
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'kapi-btn';
+    copyBtn.type = 'button';
+    copyBtn.setAttribute('aria-label', 'Copy');
+    copyBtn.innerHTML = COPY_SVG;
+    // Swap the button icon (copy <-> checkmark) with a fade/scale/blur out-then-in.
+    const swapCopyIcon = (svg, done) => {
+        copyBtn.classList.remove('kapi-copy-in');
+        copyBtn.classList.add('kapi-copy-out');
+        setTimeout(() => {
+            copyBtn.innerHTML = svg;
+            copyBtn.classList.replace('kapi-copy-out', 'kapi-copy-in');
+            setTimeout(() => {
+                copyBtn.classList.remove('kapi-copy-in');
+                done?.();
+            }, 180);
+        }, 180);
+    };
+    copyBtn.addEventListener('click', async () => {
+        const prompt = buildAllCommentsPrompt();
+        if (!prompt)
+            return;
+        try {
+            await navigator.clipboard.writeText(prompt);
+        }
+        catch {
+            return; // clipboard blocked; no success feedback
+        }
+        copyBtn.classList.add('kapi-busy'); // clicks disabled until we're back to the copy icon
+        swapCopyIcon(CHECK_SVG, () => setTimeout(() => swapCopyIcon(COPY_SVG, () => copyBtn.classList.remove('kapi-busy')), 1000));
+    });
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'kapi-btn';
+    deleteBtn.type = 'button';
+    deleteBtn.setAttribute('aria-label', 'Delete');
+    deleteBtn.innerHTML = DELETE_SVG;
+    deleteBtn.addEventListener('click', () => clearAllComments());
+    const btnGroup = document.createElement('div');
+    btnGroup.className = 'kapi-btn-group';
+    // Manual mode (agent disabled) drops the AI "send" button — Copy/Delete stay.
+    btnGroup.append(...(agentEnabled ? [aiBtn] : []), copyBtn, deleteBtn);
+    extra.append(makeDivider(), btnGroup);
+    bar.append(logoBtn, extra);
+    root.append(style, bar);
+    document.body.appendChild(host);
+    // 3. Connect the overlay to the element inspector.
+    setOnHover((el) => {
+        updateHoverPanel(el);
+    });
+    setOnElementClick((el, clientX, clientY) => {
+        beginComment(el, clientX, clientY);
+    });
+    setOnSelectionChange((els) => {
+        updateSelection(els);
+    });
+    // 4. Track comment-processing state and control the logo button.
+    let isProcessing = false;
+    let wasStopped = false;
+    const handleLogoClick = () => setExpanded(!expanded);
+    const handleStopClick = () => {
+        wasStopped = true;
+        stopComments();
+    };
+    let logoSwapTimeout = null;
+    let logoSwapInnerTimeout = null;
+    const clearPendingLogoSwap = () => {
+        if (logoSwapTimeout !== null)
+            clearTimeout(logoSwapTimeout);
+        if (logoSwapInnerTimeout !== null)
+            clearTimeout(logoSwapInnerTimeout);
+        logoSwapTimeout = null;
+        logoSwapInnerTimeout = null;
+    };
+    const swapLogo = (svg) => {
+        clearPendingLogoSwap();
+        logoBtn.classList.remove('kapi-animating-in');
+        logoBtn.classList.add('kapi-animating-out');
+        logoSwapTimeout = setTimeout(() => {
+            logoBtn.innerHTML = svg;
+            logoBtn.classList.remove('kapi-animating-out');
+            logoBtn.classList.add('kapi-animating-in');
+            logoSwapInnerTimeout = setTimeout(() => {
+                logoBtn.classList.remove('kapi-animating-in');
+                logoSwapInnerTimeout = null;
+            }, 200);
+            logoSwapTimeout = null;
+        }, 200);
+    };
+    const swapLogoToStop = () => {
+        swapLogo(STOP_SVG);
+        logoBtn.classList.add('kapi-stop-mode');
+        logoBtn.removeEventListener('click', handleLogoClick);
+        logoBtn.addEventListener('click', handleStopClick);
+    };
+    const restoreLogoFromStop = () => {
+        swapLogo(LOGO_SVG);
+        logoBtn.classList.remove('kapi-stop-mode');
+        logoBtn.removeEventListener('click', handleStopClick);
+        logoBtn.addEventListener('click', handleLogoClick);
+    };
+    const finishProcessing = (clearComments) => {
+        isProcessing = false;
+        restoreLogoFromStop();
+        if (clearComments && !wasStopped)
+            clearAllComments();
+        setDisabled(false);
+        setExpanded(true);
+        updateHoverPanel(null);
+    };
+    // 5. Reflect comment-processing lifecycle events in the UI.
+    setOnCommentsProcessing((status) => {
+        if (isProcessing) {
+            showProcessingStatus(status);
+            return;
+        }
+        cancelOpenDraft();
+        setDisabled(true);
+        isProcessing = true;
+        wasStopped = false;
+        setExpanded(false);
+        swapLogoToStop();
+        showProcessingStatus(status);
+    });
+    setOnCommentsDone(() => {
+        finishProcessing(true);
+    });
+    setOnCommentsError((message) => {
+        finishProcessing(false);
+        showProcessingStatus(`Error: ${message}`);
+    });
+    // 6. Expand/collapse the toolbar and keep it on screen.
+    let expanded = false;
+    const measureExpandedWidth = () => {
+        const barStyle = getComputedStyle(bar);
+        const paddingX = parseFloat(barStyle.paddingLeft) + parseFloat(barStyle.paddingRight);
+        const gap = parseFloat(barStyle.columnGap || barStyle.gap) || 0;
+        const width = Math.round(logoBtn.offsetWidth + gap + extra.offsetWidth + paddingX);
+        bar.style.setProperty('--kapi-expanded-width', `${width}px`);
+        return width;
+    };
+    let expandedWidth = measureExpandedWidth();
+    const currentSize = () => ({
+        width: expanded ? expandedWidth : COLLAPSED_WIDTH,
+        height: BAR_HEIGHT,
+    });
+    const place = (left, top) => {
+        const { width, height } = currentSize();
+        const maxLeft = window.innerWidth - width - INSET;
+        const maxTop = window.innerHeight - height - INSET;
+        host.style.left = `${clamp(left, INSET, Math.max(INSET, maxLeft))}px`;
+        host.style.top = `${clamp(top, INSET, Math.max(INSET, maxTop))}px`;
+    };
+    const setExpanded = (next) => {
+        if (expanded === next)
+            return;
+        if (next)
+            expandedWidth = measureExpandedWidth();
+        expanded = next;
+        bar.classList.toggle('kapi-expanded', expanded);
+        logoBtn.setAttribute('aria-expanded', String(expanded));
+        const rect = host.getBoundingClientRect();
+        place(rect.left, rect.top);
+        if (expanded) {
+            startInspecting();
+        }
+        else {
+            stopInspecting();
+        }
+    };
+    // 7. Restore the saved position, then keep it valid after viewport changes.
+    const saved = loadPosition();
+    if (saved) {
+        place(saved.left, saved.top);
+    }
+    else {
+        place(INSET, window.innerHeight - COLLAPSED_WIDTH - INSET);
+    }
+    window.addEventListener('resize', () => {
+        const rect = host.getBoundingClientRect();
+        place(rect.left, rect.top);
+    });
+    // 8. Let the logo button drag the overlay without triggering its click action.
+    let pointerId = null;
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+    let originLeft = 0;
+    let originTop = 0;
+    const suppressNextClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        logoBtn.removeEventListener('click', suppressNextClick, true);
+    };
+    logoBtn.addEventListener('click', handleLogoClick);
+    logoBtn.addEventListener('pointerdown', (e) => {
+        if (e.button !== 0 && e.pointerType === 'mouse')
+            return;
+        pointerId = e.pointerId;
+        dragging = false;
+        startX = e.clientX;
+        startY = e.clientY;
+        const rect = host.getBoundingClientRect();
+        originLeft = rect.left;
+        originTop = rect.top;
+        logoBtn.setPointerCapture(pointerId);
+    });
+    logoBtn.addEventListener('pointermove', (e) => {
+        if (e.pointerId !== pointerId)
+            return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        if (!dragging) {
+            if (Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD)
+                return;
+            dragging = true;
+            logoBtn.classList.add('kapi-dragging');
+            logoBtn.addEventListener('click', suppressNextClick, true);
+            stopInspecting();
+        }
+        place(originLeft + dx, originTop + dy);
+    });
+    const endDrag = (e) => {
+        if (e.pointerId !== pointerId)
+            return;
+        if (logoBtn.hasPointerCapture(pointerId))
+            logoBtn.releasePointerCapture(pointerId);
+        pointerId = null;
+        if (dragging) {
+            logoBtn.classList.remove('kapi-dragging');
+            const rect = host.getBoundingClientRect();
+            savePosition({ left: rect.left, top: rect.top });
+            if (expanded)
+                startInspecting();
+        }
+        dragging = false;
+    };
+    logoBtn.addEventListener('pointerup', endDrag);
+    logoBtn.addEventListener('pointercancel', endDrag);
+}
+// Insert as soon as the page has a body to receive the overlay.
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => insertOverlay(), { once: true });
+}
+else {
+    insertOverlay();
+}

package/dist/browser/socket.js

@@ -0,0 +1,38 @@
+// Talks to the dev server over Vite's built-in HMR websocket (custom events)
+// rather than a dedicated kapi server on its own port. `import.meta.hot` is
+// injected by Vite into the modules it serves in dev, so the overlay already
+// has a live channel to the dev server — no port discovery, no second socket.
+let onCommentsDone = null;
+let onCommentsProcessing = null;
+let onCommentsError = null;
+export function connectSocket() {
+    const hot = import.meta.hot;
+    if (!hot) {
+        console.error('[kapi] no HMR channel — is the dev server running with the kapi plugin?');
+        return;
+    }
+    hot.on('kapi:done', () => onCommentsDone?.());
+    hot.on('kapi:processing', (data) => onCommentsProcessing?.(data.status));
+    hot.on('kapi:error', (data) => onCommentsError?.(data.message));
+}
+export function sendComments(prompt) {
+    const hot = import.meta.hot;
+    if (!hot)
+        return console.error('[kapi] cannot send comments: no HMR channel');
+    hot.send('kapi:submit', { prompt });
+}
+export function stopComments() {
+    const hot = import.meta.hot;
+    if (!hot)
+        return console.error('[kapi] cannot stop comments: no HMR channel');
+    hot.send('kapi:stop', {});
+}
+export function setOnCommentsDone(callback) {
+    onCommentsDone = callback;
+}
+export function setOnCommentsProcessing(callback) {
+    onCommentsProcessing = callback;
+}
+export function setOnCommentsError(callback) {
+    onCommentsError = callback;
+}

package/dist/browser/styles/comments.css

@@ -0,0 +1,246 @@
+:host {
+  all: initial;
+  color-scheme: dark;
+
+  /* green-500, matches the hover highlight */
+  --kapi-marker-color: 34, 197, 94;
+  --kapi-marker-size: 22px;
+  /* shared fixed width for both the composer and the submitted tooltip */
+  --kapi-panel-width: 240px;
+}
+
+.kapi-comment {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /* position() sets --kapi-x/--kapi-y; kept as vars so the exit animation can
+     compose scale on top of the translate without clobbering positioning. */
+  transform: translate(var(--kapi-x, 0px), var(--kapi-y, 0px));
+}
+
+.kapi-comment.kapi-leaving {
+  pointer-events: none;
+  animation: kapi-comment-out 200ms ease forwards;
+}
+
+@keyframes kapi-comment-out {
+  to {
+    opacity: 0;
+    filter: blur(3px);
+    transform: translate(var(--kapi-x, 0px), var(--kapi-y, 0px)) scale(0.9);
+  }
+}
+
+.kapi-comment-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--kapi-marker-size);
+  height: var(--kapi-marker-size);
+  border-radius: 50%;
+  background: rgb(var(--kapi-marker-color));
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  pointer-events: auto;
+  cursor: pointer;
+  flex: none;
+  user-select: none;
+}
+
+.kapi-comment-marker-enter {
+  animation: kapi-marker-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes kapi-marker-in {
+  from {
+    transform: scale(0.5);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+.kapi-comment-tooltip,
+.kapi-comment-composer {
+  display: none;
+  position: absolute;
+  left: calc(var(--kapi-marker-size) + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--kapi-panel-width);
+  box-sizing: border-box;
+  border-radius: 12px;
+  background: #1e1e1f;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
+    0 2px 4px rgba(0, 0, 0, 0.2),
+    0 8px 16px rgba(0, 0, 0, 0.2);
+  pointer-events: auto;
+}
+
+.kapi-comment-tooltip {
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 14px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.3;
+  white-space: normal;
+  overflow-wrap: break-word;
+  animation: kapi-tooltip-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes kapi-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
+
+.kapi-comment.kapi-hovering .kapi-comment-tooltip {
+  display: flex;
+}
+
+.kapi-comment-tooltip-component {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  color: rgb(var(--kapi-marker-color));
+}
+
+.kapi-comment-tooltip-source {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.kapi-comment-composer {
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  transform: none;
+  animation: kapi-composer-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.kapi-comment-composer-input-row {
+  padding: 8px 0 4px 14px;
+}
+
+.kapi-comment-composer-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 6px;
+  gap: 6px;
+}
+
+.kapi-comment-composer-actions:has(.kapi-comment-delete) {
+  justify-content: space-between;
+}
+
+.kapi-comment-delete {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  flex: none;
+  transition: background 150ms ease;
+}
+
+.kapi-comment-delete:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.kapi-delete-icon {
+  height: 13px;
+  width: auto;
+  opacity: 0.5;
+}
+
+.kapi-comment-delete:hover .kapi-delete-icon,
+.kapi-comment-delete:active .kapi-delete-icon {
+  opacity: 1;
+  filter: brightness(0) saturate(100%) invert(31%) sepia(78%) saturate(2043%) hue-rotate(354deg) brightness(105%) contrast(104%);
+}
+
+.kapi-comment-delete:active {
+  background: rgba(239, 68, 68, 0.3);
+}
+
+@keyframes kapi-composer-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.kapi-comment-input {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  max-height: 120px;
+  overflow-y: auto;
+  resize: none;
+  color: #fff;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.3;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.kapi-comment-input::-webkit-scrollbar {
+  width: 4px;
+}
+
+.kapi-comment-input::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.kapi-comment-input::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 999px;
+}
+
+.kapi-comment-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.kapi-comment-send {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: #fff;
+  cursor: pointer;
+  flex: none;
+}