repoburg 1.3.199 → 1.3.201

package/agent-pane/frontend/dist/index.html

@@ -10,8 +10,8 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;510;590;600&family=JetBrains+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-BYo-lnxm.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dwwhx7YN.css">
+    <script type="module" crossorigin src="/assets/index-y7xlT86e.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-34WaZYsW.css">
   </head>
   <body>
     <div id="root"></div>

package/agent-pane/frontend/src/components/CommentableText.test.tsx

@@ -0,0 +1,196 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup, act } from '@testing-library/react';
+import CommentableText from './CommentableText.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { useStore } from '../store/store.ts';
+
+const CONTENT = 'Hello world this is a line of text';
+
+/**
+ * Select a character range within the rendered markdown container's text node.
+ * `backward` emulates a drag selection from end -> start by collapsing the
+ * caret to the end and extending it back to the start (anchor after focus).
+ */
+function selectChars(startChar: number, endChar: number, backward: boolean): void {
+  const p = screen.getByText(CONTENT);
+  const textNode = p.firstChild as Text;
+  const sel = window.getSelection()!;
+  sel.removeAllRanges();
+  if (backward) {
+    // anchor at the end, then extend the focus back to the start
+    sel.collapse(textNode, endChar);
+    sel.extend(textNode, startChar);
+  } else {
+    sel.collapse(textNode, startChar);
+    sel.extend(textNode, endChar);
+  }
+}
+
+/** Dispatch a native `mouseup` whose target is OUTSIDE the markdown container
+ *  (on document.body), eminating a release in the surrounding padding/gutter. */
+function dispatchMouseUpOutside(): void {
+  const evt = new MouseEvent('mouseup', { bubbles: true });
+  document.body.dispatchEvent(evt);
+}
+
+/** Open the discuss popover via a backward selection + Discuss click. Returns the textarea. */
+function openDiscuss(): HTMLTextAreaElement {
+  selectChars(0, 5, true);
+  act(() => {
+    dispatchMouseUpOutside();
+  });
+  fireEvent.click(screen.getByText('Discuss'));
+  return screen.getByPlaceholderText('Ask about this text…') as HTMLTextAreaElement;
+}
+
+describe('CommentableText — selection quote button', () => {
+  beforeEach(() => {
+    resetStore();
+    // jsdom has no layout engine, so Range lacks getBoundingClientRect/getClientRects.
+    // Polyfill with zero rects so the production positioning code can run.
+    const zeroRect = {
+      x: 0, y: 0, top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0,
+      toJSON: () => ({}),
+    };
+    (Range.prototype as unknown as { getBoundingClientRect: unknown }).getBoundingClientRect =
+      () => zeroRect;
+    (Range.prototype as unknown as { getClientRects: unknown }).getClientRects = () => [];
+    // jsdom has no layout, so offsetWidth/offsetHeight are 0. Mock the popover
+    // dimensions so the viewport-clamp logic in useLayoutEffect can be exercised.
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: () => 320 });
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, get: () => 140 });
+  });
+  afterEach(() => {
+    cleanup();
+    window.getSelection()?.removeAllRanges();
+  });
+
+  it('shows the Quote button when a forward selection is released outside the container', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+
+    selectChars(0, 5, false);
+    act(() => {
+      dispatchMouseUpOutside();
+    });
+
+    // Before the fix, the container-only onMouseUp never fired for a release
+    // outside the container, so the button did not appear.
+    expect(screen.getByText('Quote')).toBeInTheDocument();
+    expect(screen.getByText('Discuss')).toBeInTheDocument();
+  });
+
+  it('shows the Quote button for a backward selection dragged to the line start (the reported bug)', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+
+    // Drag from the very end back to the very start (line start).
+    selectChars(0, CONTENT.length, true);
+    act(() => {
+      dispatchMouseUpOutside();
+    });
+
+    expect(screen.getByText('Quote')).toBeInTheDocument();
+    expect(screen.getByText('Discuss')).toBeInTheDocument();
+  });
+
+  it('populates the store quotedText when Quote is clicked after a backward selection', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+
+    selectChars(0, 5, true);
+    act(() => {
+      dispatchMouseUpOutside();
+    });
+
+    fireEvent.click(screen.getByText('Quote'));
+
+    const quoted = useStore.getState().quotedText;
+    expect(quoted).toBeTruthy();
+    expect(quoted).toContain('QUOTE');
+    expect(quoted).toContain('Hello');
+  });
+
+  it('keeps the discuss popover on-screen for a backward selection near the left edge', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+
+    // Backward selection near the start anchors the button at the left edge.
+    selectChars(0, 5, true);
+    act(() => {
+      dispatchMouseUpOutside();
+    });
+
+    fireEvent.click(screen.getByText('Discuss'));
+
+    const popover = document.querySelector('.thread-create-popover') as HTMLElement;
+    expect(popover).toBeTruthy();
+    const left = parseFloat(popover.style.left);
+    const top = parseFloat(popover.style.top);
+    // Popover opens to the left via translateX(-100%): visible left edge = left - 320.
+    // It must stay on-screen: left edge >= 8 → left >= 328.
+    expect(left).toBeGreaterThanOrEqual(328);
+    // Right edge (= left) must not overflow the viewport right.
+    expect(left).toBeLessThanOrEqual(window.innerWidth - 8);
+    // Top edge must be within the viewport.
+    expect(top).toBeGreaterThanOrEqual(8);
+    expect(top + 140).toBeLessThanOrEqual(window.innerHeight - 8);
+  });
+
+  it('auto-dismisses the popover on outside click when empty', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+    openDiscuss();
+    expect(screen.queryByPlaceholderText('Ask about this text…')).toBeInTheDocument();
+    fireEvent.mouseDown(document.body);
+    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
+  });
+
+  it('does not auto-dismiss the popover on outside click when it has typed text', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+    const ta = openDiscuss();
+    fireEvent.change(ta, { target: { value: 'a note' } });
+
+    // Outside click must NOT close a popover that has typed text.
+    fireEvent.mouseDown(document.body);
+    const still = screen.getByPlaceholderText('Ask about this text…') as HTMLTextAreaElement;
+    expect(still).toBeInTheDocument();
+    expect(still.value).toBe('a note');
+
+    // The X button closes explicitly regardless of content.
+    fireEvent.click(document.querySelector('.thread-create-close') as HTMLElement);
+    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
+  });
+
+  it('closes the popover on a single Esc when empty', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+    const ta = openDiscuss();
+    fireEvent.keyDown(ta, { key: 'Escape' });
+    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
+  });
+
+  it('requires double Esc to close the popover when it has typed text', () => {
+    render(
+      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
+    );
+    const ta = openDiscuss();
+    fireEvent.change(ta, { target: { value: 'a note' } });
+
+    // First Esc: protected — must not close.
+    fireEvent.keyDown(ta, { key: 'Escape' });
+    expect(screen.queryByPlaceholderText('Ask about this text…')).toBeInTheDocument();
+
+    // Second Esc within the window: closes.
+    fireEvent.keyDown(ta, { key: 'Escape' });
+    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
+  });
+});

package/agent-pane/frontend/src/components/CommentableText.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import { MessageSquarePlus, X, Send, Quote } from 'lucide-react';
@@ -93,6 +93,11 @@ interface Props {
 export default function CommentableText({ itemId, turnId, sessionId, content, threads }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  // Refs to read the current message and Esc timing from stable-closure
+  // handlers (handleGlobalMouseDown / handleMouseDown are bound with empty deps).
+  const messageRef = useRef('');
+  const lastEscRef = useRef(0);
   const [showDiscussBtn, setShowDiscussBtn] = useState(false);
   const [btnPos, setBtnPos] = useState({ x: 0, y: 0 });
   const [showPopover, setShowPopover] = useState(false);
@@ -119,54 +124,103 @@ export default function CommentableText({ itemId, turnId, sessionId, content, th
     }
   });
 
+  // Keep messageRef in sync so the stable-closure dismiss handlers can read
+  // the current message without re-subscribing on every keystroke.
+  useEffect(() => {
+    messageRef.current = message;
+  }, [message]);
+
   // Dismiss button + popover when clicking outside the wrapper
   useEffect(() => {
     function handleGlobalMouseDown(e: MouseEvent) {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
         setShowDiscussBtn(false);
-        setShowPopover(false);
+        // Don't auto-dismiss a popover that has typed text — require Esc/X.
+        if (!messageRef.current.trim()) {
+          setShowPopover(false);
+        }
       }
     }
     document.addEventListener('mousedown', handleGlobalMouseDown);
     return () => document.removeEventListener('mousedown', handleGlobalMouseDown);
   }, []);
 
-  // Handle mousedown in container — hide everything (new selection starting or click)
+  // Handle mousedown in container — hide everything (new selection starting or click).
+  // Protect a popover that has typed text: only auto-close when it's empty.
   const handleMouseDown = useCallback(() => {
     setShowDiscussBtn(false);
-    setShowPopover(false);
+    if (!messageRef.current.trim()) {
+      setShowPopover(false);
+    }
   }, []);
 
-  // Handle mouseup — check for text selection
-  const handleMouseUp = useCallback(() => {
-    if (showPopover) return; // don't interfere while typing
+  // Check the current text selection within the container and position the
+  // floating Discuss/Quote buttons. Direction-aware (handles backward
+  // selections) and clamps into the viewport so the buttons stay visible.
+  const checkSelection = useCallback(() => {
     const container = containerRef.current;
     if (!container) return;
 
     const result = getSelectionOffsets(container);
     if (result && result.text.trim().length > 0) {
       const sel = window.getSelection();
-      if (sel && sel.rangeCount > 0) {
+      if (sel && sel.rangeCount > 0 && sel.anchorNode && sel.focusNode) {
+        const range = sel.getRangeAt(0);
         // Use viewport coordinates (position:fixed) — avoids overflow clipping
         // and stacking-context issues from nested containers.
-        const selRect = sel.getRangeAt(0).getBoundingClientRect();
+        const selRect = range.getBoundingClientRect();
         const BUTTON_HEIGHT = 28;
         const GAP = 6;
-        let btnY = selRect.top - BUTTON_HEIGHT - GAP;
-        if (btnY < 8) {
-          btnY = selRect.bottom + GAP;
+        const BUTTON_WIDTH_EST = 170;
+
+        // Detect backward selection: compare anchor (press) and focus (release)
+        // endpoints in document order. anchor after focus => user dragged
+        // backwards, so the release point is at the start/left of the text.
+        let backward = false;
+        try {
+          const fr = document.createRange();
+          fr.setStart(sel.focusNode, sel.focusOffset);
+          fr.setEnd(sel.focusNode, sel.focusOffset);
+          const ar = document.createRange();
+          ar.setStart(sel.anchorNode, sel.anchorOffset);
+          ar.setEnd(sel.anchorNode, sel.anchorOffset);
+          backward = ar.compareBoundaryPoints(Range.START_TO_START, fr) > 0;
+        } catch {
+          backward = false;
         }
-        setBtnPos({
-          x: selRect.right,
-          y: btnY,
-        });
+
+        let btnY = selRect.top - BUTTON_HEIGHT - GAP;
+        if (btnY < 8) btnY = selRect.bottom + GAP;
+
+        // Anchor near the release end and keep the whole bar on-screen.
+        let btnX = backward ? selRect.left - BUTTON_WIDTH_EST : selRect.right;
+        btnX = Math.max(8, Math.min(btnX, window.innerWidth - BUTTON_WIDTH_EST - 8));
+
+        setBtnPos({ x: btnX, y: btnY });
         setShowDiscussBtn(true);
         setSelectionInfo(result);
       }
     } else {
       setShowDiscussBtn(false);
     }
-  }, [showPopover]);
+  }, []);
+
+  // Detect text selections on mouseup anywhere in the document — not just
+  // inside the container. When dragging a selection backwards to a line
+  // start, the mouse is frequently released in the surrounding padding/gutter
+  // (outside the container element), which would otherwise miss a container-
+  // bound onMouseUp and never show the quote button.
+  useEffect(() => {
+    function onDocMouseUp(e: MouseEvent) {
+      const t = e.target as HTMLElement | null;
+      // Ignore clicks on our own floating buttons/popover — their handlers
+      // manage state and may clear the selection themselves.
+      if (t && (t.closest('.selection-actions') || t.closest('.thread-create-popover'))) return;
+      checkSelection();
+    }
+    document.addEventListener('mouseup', onDocMouseUp);
+    return () => document.removeEventListener('mouseup', onDocMouseUp);
+  }, [checkSelection]);
 
   // Handle Discuss button click
   const handleDiscussClick = useCallback(() => {
@@ -176,6 +230,29 @@ export default function CommentableText({ itemId, turnId, sessionId, content, th
     setPopoverPos({ x: btnPos.x, y: btnPos.y });
   }, [btnPos]);
 
+  // Clamp the discuss popover into the viewport once it mounts. The popover
+  // uses `transform: translateX(-100%)`, so its visible right edge sits at
+  // `left` and it opens to the LEFT. For backward selections the button is
+  // anchored near the left edge, which would push the (wider) popover off the
+  // left side; for selections near the top it would overflow above. Measure
+  // the real size and reposition before paint (no flash).
+  useLayoutEffect(() => {
+    if (!showPopover) return;
+    const el = popoverRef.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const MARGIN = 8;
+    // Visible box is [x - w, x] horizontally (translateX(-100%)) and [y, y + h] vertically.
+    let x = btnPos.x;
+    let y = btnPos.y;
+    if (x - w < MARGIN) x = w + MARGIN;            // would overflow left → shift right
+    if (x > window.innerWidth - MARGIN) x = window.innerWidth - MARGIN; // overflow right
+    if (y < MARGIN) y = MARGIN;                    // overflow top
+    if (y + h > window.innerHeight - MARGIN) y = window.innerHeight - h - MARGIN; // overflow bottom
+    setPopoverPos({ x, y });
+  }, [showPopover, btnPos]);
+
   // Handle submit — create thread
   const handleSubmit = useCallback(async () => {
     if (!selectionInfo || !message.trim()) return;
@@ -224,7 +301,6 @@ export default function CommentableText({ itemId, turnId, sessionId, content, th
         ref={containerRef}
         dangerouslySetInnerHTML={{ __html: renderMarkdown(content || '…') }}
         onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
         onClick={handleMarkClick}
       />
 
@@ -252,7 +328,7 @@ export default function CommentableText({ itemId, turnId, sessionId, content, th
 
       {/* Thread creation popover */}
       {showPopover && (
-        <div className="thread-create-popover" style={{ left: popoverPos.x, top: popoverPos.y }}>
+        <div ref={popoverRef} className="thread-create-popover" style={{ left: popoverPos.x, top: popoverPos.y }}>
           <div className="thread-create-header">
             <span className="thread-create-quote">"{selectionInfo?.text.slice(0, 80)}{selectionInfo && selectionInfo.text.length > 80 ? '…' : ''}"</span>
             <button className="thread-create-close" onClick={() => { setShowPopover(false); setSelectionInfo(null); }}>
@@ -272,8 +348,20 @@ export default function CommentableText({ itemId, turnId, sessionId, content, th
                 handleSubmit();
               }
               if (e.key === 'Escape') {
-                setShowPopover(false);
-                setSelectionInfo(null);
+                if (messageRef.current.trim()) {
+                  // Protect typed text: require a second Esc within 400ms to close.
+                  const now = Date.now();
+                  if (lastEscRef.current && now - lastEscRef.current < 400) {
+                    lastEscRef.current = 0;
+                    setShowPopover(false);
+                    setSelectionInfo(null);
+                  } else {
+                    lastEscRef.current = now;
+                  }
+                } else {
+                  setShowPopover(false);
+                  setSelectionInfo(null);
+                }
               }
             }}
           />

package/agent-pane/frontend/src/components/IdeWorkspace.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, cleanup, act } from '@testing-library/react';
+import IdeWorkspace from './IdeWorkspace.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { useStore } from '../store/store.ts';
+
+describe('IdeWorkspace', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders two resize handles (left & right)', () => {
+    render(<IdeWorkspace />);
+    const handles = document.querySelectorAll('.resize-handle');
+    expect(handles).toHaveLength(2);
+    expect(handles[0].className).toContain('left');
+    expect(handles[1].className).toContain('right');
+  });
+
+  it('applies a 5-track grid reflecting store widths', () => {
+    resetStore({ sidebarWidth: 200, rightPanelWidth: 400 });
+    render(<IdeWorkspace />);
+    const layout = document.querySelector('.ide-layout') as HTMLElement;
+    expect(layout.style.gridTemplateColumns).toBe('200px 6px 1fr 6px 400px');
+  });
+
+  it('updates grid when store widths change', () => {
+    render(<IdeWorkspace />);
+    act(() => {
+      useStore.getState().setSidebarWidth(180);
+      useStore.getState().setRightPanelWidth(500);
+    });
+    const layout = document.querySelector('.ide-layout') as HTMLElement;
+    expect(layout.style.gridTemplateColumns).toBe('180px 6px 1fr 6px 500px');
+  });
+});

package/agent-pane/frontend/src/components/IdeWorkspace.tsx

@@ -4,12 +4,31 @@ import RenderArea from './RenderArea.tsx';
 import CommandInputBar from './CommandInputBar.tsx';
 import RightPanel from './RightPanel.tsx';
 import StatusBar from './StatusBar.tsx';
+import ResizeHandle from './ResizeHandle.tsx';
+import { useStore } from '../store/store.ts';
+import { SIDEBAR_MIN, SIDEBAR_MAX, RIGHT_PANEL_MIN, RIGHT_PANEL_MAX } from '../store/uiSlice.ts';
 
 export default function IdeWorkspace() {
+  const sidebarWidth = useStore((s) => s.sidebarWidth);
+  const rightPanelWidth = useStore((s) => s.rightPanelWidth);
+  const setSidebarWidth = useStore((s) => s.setSidebarWidth);
+  const setRightPanelWidth = useStore((s) => s.setRightPanelWidth);
+
+  // 5 grid columns: sidebar | handle | center | handle | right panel.
+  // Handles occupy a 6px track each; center stays 1fr so it absorbs slack.
+  const gridTemplateColumns = `${sidebarWidth}px 6px 1fr 6px ${rightPanelWidth}px`;
+
   return (
     <div className="ide-root">
-      <div className="ide-layout">
+      <div className="ide-layout" style={{ gridTemplateColumns }}>
         <WorkspaceSidebar />
+        <ResizeHandle
+          side="left"
+          minWidth={SIDEBAR_MIN}
+          maxWidth={SIDEBAR_MAX}
+          getWidth={() => useStore.getState().sidebarWidth}
+          setWidth={setSidebarWidth}
+        />
         <div className="ide-center">
           <SessionTabs />
           <div className="ide-render">
@@ -17,9 +36,16 @@ export default function IdeWorkspace() {
           </div>
           <CommandInputBar />
         </div>
+        <ResizeHandle
+          side="right"
+          minWidth={RIGHT_PANEL_MIN}
+          maxWidth={RIGHT_PANEL_MAX}
+          getWidth={() => useStore.getState().rightPanelWidth}
+          setWidth={setRightPanelWidth}
+        />
         <RightPanel />
       </div>
       <StatusBar />
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/ResizeHandle.tsx

@@ -0,0 +1,29 @@
+import { useResizable, type ResizeSide } from '../hooks/useResizable.ts';
+
+interface ResizeHandleProps {
+  side: ResizeSide;
+  minWidth: number;
+  maxWidth: number;
+  getWidth: () => number;
+  setWidth: (w: number) => void;
+}
+
+/**
+ * Thin draggable gutter rendered as its own CSS grid track. Sits between a
+ * sidebar and the center pane. Dragging adjusts the adjacent sidebar width.
+ */
+export default function ResizeHandle({ side, minWidth, maxWidth, getWidth, setWidth }: ResizeHandleProps) {
+  const { onPointerDown, dragging } = useResizable({ side, minWidth, maxWidth, getWidth, setWidth });
+
+  return (
+    <div
+      className={`resize-handle ${side}${dragging ? ' dragging' : ''}`}
+      onPointerDown={onPointerDown}
+      // Gutter shouldn't catch content scroll / text selection; keyboard a11y is non-goal here.
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={`Resize ${side} panel`}
+      data-resizing={dragging ? '' : undefined}
+    />
+  );
+}

package/agent-pane/frontend/src/components/panels/ThreadsPanel.tsx

@@ -98,7 +98,7 @@ function ThreadCard({
     setShowQuoteBtn(false);
   }, []);
 
-  const handleConversationMouseUp = useCallback(() => {
+  const checkSelection = useCallback(() => {
     const container = conversationRef.current;
     if (!container) return;
     const sel = window.getSelection();
@@ -128,13 +128,46 @@ function ThreadCard({
     const selRect = range.getBoundingClientRect();
     const BUTTON_HEIGHT = 28;
     const GAP = 6;
+    const BUTTON_WIDTH_EST = 170;
+
+    // Detect backward selection via anchor (press) vs focus (release) order.
+    let backward = false;
+    if (sel.anchorNode && sel.focusNode) {
+      try {
+        const fr = document.createRange();
+        fr.setStart(sel.focusNode, sel.focusOffset);
+        fr.setEnd(sel.focusNode, sel.focusOffset);
+        const ar = document.createRange();
+        ar.setStart(sel.anchorNode, sel.anchorOffset);
+        ar.setEnd(sel.anchorNode, sel.anchorOffset);
+        backward = ar.compareBoundaryPoints(Range.START_TO_START, fr) > 0;
+      } catch {
+        backward = false;
+      }
+    }
+
     let btnY = selRect.top - BUTTON_HEIGHT - GAP;
     if (btnY < 8) btnY = selRect.bottom + GAP;
-    setQuoteBtnPos({ x: selRect.right, y: btnY });
+    let btnX = backward ? selRect.left - BUTTON_WIDTH_EST : selRect.right;
+    btnX = Math.max(8, Math.min(btnX, window.innerWidth - BUTTON_WIDTH_EST - 8));
+    setQuoteBtnPos({ x: btnX, y: btnY });
     setSelectedText(text);
     setShowQuoteBtn(true);
   }, []);
 
+  // Detect selections on mouseup anywhere in the document so that releasing
+  // the mouse in the surrounding padding (common with backward drags) still
+  // registers the quote button.
+  useEffect(() => {
+    function onDocMouseUp(e: MouseEvent) {
+      const t = e.target as HTMLElement | null;
+      if (t && t.closest('.selection-actions')) return;
+      checkSelection();
+    }
+    document.addEventListener('mouseup', onDocMouseUp);
+    return () => document.removeEventListener('mouseup', onDocMouseUp);
+  }, [checkSelection]);
+
   const handleQuoteClick = useCallback(() => {
     const formatted = `\n\`\`\`QUOTE\n${selectedText}\n\`\`\`\n\n`;
     setFollowup((prev) => prev + formatted);
@@ -180,7 +213,6 @@ function ThreadCard({
             className="thread-card-conversation"
             ref={conversationRef}
             onMouseDown={handleConversationMouseDown}
-            onMouseUp={handleConversationMouseUp}
           >
             {threadTurns.map((turn) => (
               <ThreadTurnView key={turn.id} turn={turn} />

package/agent-pane/frontend/src/constants/models.ts

@@ -94,6 +94,43 @@ export const PROVIDERS: ProviderDef[] = [
       },
     ],
   },
+  {
+    id: 'repoburg',
+    label: 'Repoburg',
+    available: true,
+    // Curated fallback list — live sessions load the full catalog dynamically
+    // from GET /api/providers/repoburg/models (repoburg backend model registry).
+    models: [
+      {
+        slug: 'ollama/glm-5.3:cloud',
+        displayName: 'GLM-5.3',
+        description: 'Ollama Cloud',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high],
+      },
+      {
+        slug: 'ollama/glm-5.3-flash:cloud',
+        displayName: 'GLM-5.3 Flash',
+        description: 'Ollama Cloud — fast',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high],
+      },
+      {
+        slug: 'ollama/minimax-m3:cloud',
+        displayName: 'MiniMax M3',
+        description: 'Ollama Cloud',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high],
+      },
+      {
+        slug: 'ollama/deepseek-v4-pro:cloud',
+        displayName: 'DeepSeek V4 Pro',
+        description: 'Ollama Cloud',
+        defaultReasoning: 'medium',
+        reasoningLevels: [LEVELS.low, LEVELS.medium, LEVELS.high],
+      },
+    ],
+  },
 ];
 
 /** Get provider by ID. */