From c7aa5033d2321716ed3196208ae26c07cb0d419e Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@local>
Date: Wed, 16 Sep 2026 15:13:22 +0200
Subject: [PATCH] ui: no border on handles, 500ms delayed hide, fix maximize
 button position

---
 src/ui.tsx | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index 078b4bb..8dcb681 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -282,14 +282,14 @@ function Plugin () {
   // rendered a touch brighter than the others.
   const [hoveredHandle, setHoveredHandle] = useState<string | null>(null)
   const [handlesShown, setHandlesShown] = useState(false)
-  // Reveal the handles only after the cursor has dwelt on a resize area for 500ms.
-  // Hide immediately as soon as the cursor leaves the resize zone (hoveredHandle null).
+  // Reveal after a 500ms dwell on a resize area; hide 500ms after the cursor leaves it.
   useEffect(function () {
     if (hoveredHandle !== null) {
       const t = setTimeout(function () { setHandlesShown(true) }, 500)
       return function () { clearTimeout(t) }
     }
-    setHandlesShown(false)
+    const t = setTimeout(function () { setHandlesShown(false) }, 500)
+    return function () { clearTimeout(t) }
   }, [hoveredHandle])
   function hitboxStyle (dir: string, pos: { [k: string]: number | string }) {
     const active = hoveredHandle === dir
@@ -299,7 +299,6 @@ function Plugin () {
       zIndex: 3,
       opacity: handlesShown ? 1 : 0,
       background: active ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)',
-      border: '1px solid ' + (active ? 'rgba(100,100,100,0.65)' : 'rgba(130,130,130,0.4)'),
       borderRadius: 4,
       transition: 'opacity 150ms ease, background 150ms ease, border-color 150ms ease'
     } as any
@@ -309,18 +308,8 @@ function Plugin () {
   const isMaximized = isMaxToggled
 
   return (
-    <div className="plugin-root" style={{ width: '100%', height: '100%' }}>
+    <div className="plugin-root" style={{ position: 'relative', width: '100%', height: '100%' }}>
       <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
-          <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-            <IconButton
-              title={isMaximized ? 'Restore window' : 'Maximize window'}
-              onClick={toggleWindowSize}
-            >
-              {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
-            </IconButton>
-          </div>
-        </div>
         <div
           style={{
             flex: 1,
@@ -335,6 +324,13 @@ function Plugin () {
           <Muted>AI assistant (MVP) — bootstrap</Muted>
         </div>
       </Container>
+      <IconButton
+        title={isMaximized ? 'Restore window' : 'Maximize window'}
+        onClick={toggleWindowSize}
+        style={{ position: 'absolute', top: 6, right: 6, zIndex: 4 }}
+      >
+        {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
+      </IconButton>
       {/* Decorative drag-handle icon in the bottom-right corner (as in the old plugin).
           pointerEvents:none — the actual drag is caught by the invisible corner div. */}
       <div