feat(quick-pane): add compact runtime controls

test/quick-pane-ui.test.js

@@ -51,26 +51,30 @@ test("main Settings uses shared catalog selectors with provider derived from mod
   assert.doesNotMatch(pane, /showSettings/);
   assert.doesNotMatch(pane, /Save Quick Pane settings/);
   assert.match(pane, /!snapshotIsActive\(snapshot\)/);
-  assert.match(pane, /current === submitted\.request \? "" : current/);
+  assert.match(pane, /if \(current !== submitted\.request\) return current;/);
+  assert.match(pane, /inputSelectionRef\.current = undefined;/);
+  assert.match(pane, /input\.setSelectionRange\(/);
+  assert.match(pane, /onSelect=\{\(event\) => recordInputSelection/);
+  assert.match(pane, /onInput=\{\(event\) => recordInputChangeSelection/);
+  assert.match(pane, /<ThinkingSelector/);
+  assert.match(pane, /quick-pane-catalog-overlay/);
   assert.match(pane, /readOnly=\{runActive\}/);
   assert.match(pane, /window\.requestAnimationFrame\(focusInput\)/);
   assert.doesNotMatch(pane, /\.slice\(0, 5\)/);
   assert.doesNotMatch(pane, /aria-label="Answer history"/);
   assert.match(
     pane,
-    /transcriptMessages\(snapshot, submittedPromptRequestsRef\.current\)/,
+    /transcriptMessages\(snapshot, submittedPromptTurnsRef\.current\)/,
   );
   assert.match(pane, /const QUICK_PANE_ADVISORY_PREFIX =/);
-  assert.match(pane, /submittedPromptRequests\.get\(text\)/);
+  assert.match(pane, /submittedPromptTurns\[nextSubmittedTurn\]/);
   assert.match(
     pane,
     /text\.startsWith\(QUICK_PANE_ADVISORY_PREFIX\) \? "" : text/,
   );
-  assert.match(
-    pane,
-    /submittedPromptRequestsRef\.current\.set\(guardrails, submittedRequest\)/,
-  );
-  assert.match(pane, /submittedPromptRequestsRef\.current\.clear\(\)/);
+  assert.match(pane, /submittedPromptTurnsRef\.current\.push\(submittedTurn\)/);
+  assert.match(pane, /nextSubmittedTurnIdRef\.current/);
+  assert.match(pane, /submittedPromptTurnsRef\.current = \[\]/);
   assert.doesNotMatch(
     pane,
     /delimiterIndex|text\.indexOf\(USER_REQUEST_DELIMITER\)/,
@@ -234,7 +238,19 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
   assert.match(source, /className="quick-pane-drag-strip"/);
   assert.match(source, /startDragging\(\)/);
   assert.match(source, /className="quick-pane-request"/);
-  assert.match(source, /className="quick-pane-exchange"/);
+  assert.match(source, /className=\{`quick-pane-exchange/);
+  assert.match(source, /onOpen=\{handleModelMenuOpen\}/);
+  assert.match(source, /onClose=\{handleModelMenuClose\}/);
+  assert.match(source, /requestPaneResize\(520\)/);
+  assert.match(source, /if \(modelMenuOpenRef\.current\) return;/);
+  assert.match(source, /submittedPromptTurnsRef/);
+  assert.match(source, /function elapsedLabel/);
+  assert.match(source, /quick-pane-assistant-activity/);
+  assert.match(source, /transcriptFollowRef/);
+  assert.match(
+    source,
+    /transcript\.scrollHeight\s*-\s*transcript\.clientHeight/,
+  );
   assert.match(source, /className="quick-pane-composer"/);
   assert.match(source, /className="quick-pane-composer-actions"/);
   assert.match(source, /replaceChat\(false, true\)/);
@@ -261,8 +277,16 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
     /\.quick-pane-composer[\s\S]*?height: 120px[\s\S]*?min-height: 110px[\s\S]*?max-height: 130px/,
   );
   assert.match(stylesheet, /\.quick-pane-drag-strip[\s\S]*?height: 8px/);
-  assert.match(stylesheet, /\.quick-pane-composer-actions[\s\S]*?position: absolute/);
+  assert.match(
+    stylesheet,
+    /\.quick-pane-composer-actions[\s\S]*?position: absolute/,
+  );
   assert.match(stylesheet, /\.quick-pane-send[\s\S]*?position: absolute/);
+  assert.match(
+    stylesheet,
+    /\.quick-pane-assistant-elapsed[\s\S]*?font-variant-numeric/,
+  );
+  assert.match(stylesheet, /\.quick-pane-assistant-activity[\s\S]*?color:/);
   assert.match(stylesheet, /@media \(max-width: 400px\)/);
   assert.match(stylesheet, /html,[\s\S]*?#root\s*\{[\s\S]*?overflow: hidden/);
   assert.match(stylesheet, /\.quick-pane\s*\{[\s\S]*?overflow: hidden/);
@@ -288,6 +312,9 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
     ),
   ]);
   assert.match(selectorSource, /import "\.\/ModelSelector\.css";/);
+  assert.match(selectorSource, /onOpen\?: \(\) => void;/);
+  assert.match(selectorSource, /onClose\?: \(\) => void;/);
+  assert.match(selectorSource, /onCloseRef\.current\?\.\(\);/);
   assert.match(
     selectorStylesheet,
     /\.model-trigger\s*>\s*span\s*\{[\s\S]*?overflow:\s*hidden;[\s\S]*?text-overflow:\s*ellipsis/,