fix(levelcode): stop the session card jumping on hover — float the actions

The hover detail (files · model · turns · actions) expanded in-flow, which grew
the row and shoved every card below it down — a distracting "jump" as the mouse
moved over the list. Now the detail is an absolutely-positioned drawer anchored
to the card, so the resting row height never changes: hovering only fades the
drawer in over the neighbouring rows, nothing reflows.

- media/chat.html (the /sessions modal) and media/sessionsView.html (the
  sidebar): .sessrich is position:absolute in both states (zero flow space), so
  the card height is fixed; it fades/opens downward on hover, and the last row
  opens upward so the scroll container never clips it. Hovered card gets a
  z-index bump; the list carries a little bottom runway for a down-opening
  drawer near the end; reduced-motion drops the slide.
- The shared SESSIONS-PURE render block is untouched — this is CSS only, so no
  drift and the card markup/tests are unchanged.
- test/sessionsUi.test.js: a NO-JUMP invariant on both surfaces (the drawer is
  absolute, the last row opens upward, and it is not the old display:none
  expand). Full suite 30 files green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ndemianc

extensions/levelcode-ai/media/chat.html

@@ -1078,28 +1078,36 @@
     --cc-warn: var(--vscode-editorWarning-foreground, var(--vscode-foreground)); --cc-danger: var(--vscode-errorForeground); }
   .sesspanel .sessbar { display: flex; align-items: center; gap: 9px; padding: 12px 14px 10px; border-bottom: 1px solid var(--cc-line); }
   .sesspanel .sesstitle { font-weight: 600; font-size: 14px; }
-  .sesspanel .sesslist { flex: 1 1 auto; overflow-y: auto; padding: 2px 12px 14px; }
+  .sesspanel .sesslist { flex: 1 1 auto; overflow-y: auto; padding: 2px 12px 60px; }   /* runway for a down-opening drawer near the end */
   .sesspanel .sessbucket { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text3); margin: 12px 4px 7px; }
   .sesspanel .sessempty { padding: 44px 18px; text-align: center; color: var(--cc-text3); font-size: 13px; line-height: 1.6; }
   .sesscard { position: relative; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 7px; padding: 9px 11px; margin-bottom: 7px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
-  .sesscard:hover, .sesscard:focus-visible, .sesscard:focus-within { border-color: var(--cc-accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); outline: none; }
+  .sesscard:hover, .sesscard:focus-visible, .sesscard:focus-within { border-color: var(--cc-accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); outline: none; z-index: 20; }
   .sesscard.warn { border-left: 2px solid var(--cc-warn); }
   .sesscard.err { border-left: 2px solid var(--cc-danger); }
   .sesscard.res { border-left: 2px solid var(--cc-accent); }
   .sesscard .sesstop { display: flex; align-items: center; gap: 8px; }
   .sesscard .sessname { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
   .sesscard .sessstar { color: var(--cc-accent); font-size: 13px; }
   .sesscard .sesssub { margin-top: 4px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3); }
-  .sesscard .sessrich { display: none; margin-top: 8px; }
-  .sesscard:hover .sessrich, .sesscard:focus-within .sessrich { display: block; }
+  /* Actions/detail float as a hover DRAWER anchored to the card, so the card height never changes and the
+     list no longer jumps. Opens downward; the last card opens upward so the scroll container never clips it. */
+  .sesscard .sessrich { position: absolute; left: -1px; right: -1px; top: calc(100% - 3px); z-index: 30;
+    margin: 0; padding: 9px 11px 10px; background: var(--cc-bg); border: 1px solid var(--cc-accent);
+    border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.34);
+    opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
+    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .13s; }
+  .sesscard:hover .sessrich, .sesscard:focus-within .sessrich { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .12s ease, transform .12s ease; }
+  .sesscard:last-child .sessrich { top: auto; bottom: calc(100% - 3px); transform: translateY(4px); }
+  .sesscard:last-child:hover .sessrich, .sesscard:last-child:focus-within .sessrich { transform: none; }
   .sesscard .sessfiles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
   .sesscard .sesschip { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; color: var(--cc-text2); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 4px; padding: 1px 6px; }
   .sesscard .sessmeta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; color: var(--cc-text3); }
   .sesscard .sessacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
   .sesscard .sessbtn { font: inherit; font-size: 11.5px; color: var(--cc-text); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 5px; padding: 3px 9px; cursor: pointer; }
   .sesscard .sessbtn.pri { color: #fff; background: var(--cc-accent); border-color: transparent; }
   .sesscard .sessbtn:hover { border-color: var(--cc-accent); }
-  @media (prefers-reduced-motion: reduce) { .sesscard { transition: none; } .sesscard:hover, .sesscard:focus-visible, .sesscard:focus-within { transform: none; } }
+  @media (prefers-reduced-motion: reduce) { .sesscard, .sesscard .sessrich { transition: none; } .sesscard:hover, .sesscard:focus-visible, .sesscard:focus-within, .sesscard .sessrich, .sesscard:last-child .sessrich { transform: none; } }
 </style>
 </head>
 <body>

extensions/levelcode-ai/media/sessionsView.html

@@ -18,7 +18,7 @@
   .sessview { display: flex; flex-direction: column; height: 100vh; }
   .sessnew { margin: 2px 10px 8px; padding: 7px 10px; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 6px; color: var(--cc-text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: center; }
   .sessnew:hover { border-color: var(--cc-accent); }
-  .sesslist { flex: 1 1 auto; overflow-y: auto; padding: 0 10px 12px; }
+  .sesslist { flex: 1 1 auto; overflow-y: auto; padding: 0 10px 76px; }   /* runway so a down-opening drawer near the end is not clipped */
   .sessbucket { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text3); margin: 12px 4px 7px; }
   .sessbucket .cnt { letter-spacing: 0; }
   .sessempty { padding: 44px 16px; text-align: center; color: var(--cc-text3); font-size: 13px; line-height: 1.6; }
@@ -34,16 +34,26 @@
   .sesscard .sessname { font-weight: 400; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
   .sesscard .sessstar { flex: 0 0 auto; color: var(--cc-accent); font-size: 12px; }
   .sesscard .sesssub { margin: 2px 0 0 16px; font-size: 12px; color: var(--cc-text3); }
-  .sesscard .sessrich { display: none; margin: 6px 0 0 16px; }
-  .sesscard:hover .sessrich, .sesscard:focus-within .sessrich { display: block; }
+  /* Actions/detail float as a hover DRAWER anchored to the card, so the row height never changes and the
+     list no longer jumps when the mouse moves over it. Opens downward; the last row opens upward so the
+     scroll container never clips it. */
+  .sesscard .sessrich { position: absolute; left: 6px; right: 6px; top: calc(100% - 3px); z-index: 30;
+    margin: 0; padding: 8px 10px 9px; background: var(--cc-bg); border: 1px solid var(--cc-line);
+    border-radius: 7px; box-shadow: 0 10px 24px rgba(0,0,0,.30);
+    opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
+    transition: opacity .11s ease, transform .11s ease, visibility 0s linear .12s; }
+  .sesscard:hover, .sesscard:focus-within { z-index: 20; }
+  .sesscard:hover .sessrich, .sesscard:focus-within .sessrich { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .11s ease, transform .11s ease; }
+  .sesscard:last-child .sessrich { top: auto; bottom: calc(100% - 3px); transform: translateY(4px); }
+  .sesscard:last-child:hover .sessrich, .sesscard:last-child:focus-within .sessrich { transform: none; }
   .sesscard .sessfiles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
   .sesscard .sesschip { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; color: var(--cc-text2); background: color-mix(in srgb, var(--cc-text3) 12%, transparent); border-radius: 4px; padding: 1px 6px; }
   .sesscard .sessmeta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; color: var(--cc-text3); }
   .sesscard .sessacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
   .sesscard .sessbtn { font: inherit; font-size: 11px; color: var(--cc-text2); background: transparent; border: 1px solid var(--cc-line); border-radius: 5px; padding: 2px 8px; cursor: pointer; }
   .sesscard .sessbtn.pri { color: #fff; background: var(--cc-accent); border-color: transparent; }
   .sesscard .sessbtn:hover { border-color: var(--cc-accent); color: var(--cc-text); }
-  @media (prefers-reduced-motion: reduce) { .sesscard { transition: none; } }
+  @media (prefers-reduced-motion: reduce) { .sesscard, .sesscard .sessrich { transition: none; } .sesscard .sessrich, .sesscard:last-child .sessrich { transform: none; } }
 </style>
 </head>
 <body>

extensions/levelcode-ai/test/sessionsUi.test.js

@@ -186,4 +186,12 @@ test('VIEW: theme-true across the three kinds and reduced-motion-safe', () => {
 	assert.match(view, /@media \(prefers-reduced-motion: reduce\)[\s\S]{0,120}\.sesscard[\s\S]{0,80}transition:\s*none/);
 });
 
+test('NO-JUMP: the hover detail is an absolute drawer on BOTH surfaces (stable row height, not an in-flow expand)', () => {
+	for (const [name, src] of [['modal', html], ['sidebar', view]]) {
+		assert.match(src, /\.sesscard \.sessrich \{[^}]*position: absolute/, name + ': the drawer is absolutely positioned, so revealing it never reflows the row');
+		assert.match(src, /\.sesscard:last-child \.sessrich \{[^}]*bottom:/, name + ': the last row opens upward so the scroll container never clips it');
+		assert.ok(!/\.sesscard \.sessrich \{ display: none;/.test(src), name + ': not the old display:none → block expand that pushed the list around');
+	}
+});
+
 console.log('sessionsUi: ' + n + ' tests passed');