fix(quick-pane): restore model catalog controls

ui/src/quick-pane/quick-pane.css

@@ -2,6 +2,13 @@
   color-scheme: dark;
 }
 
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+
 body {
   min-width: 0;
   min-height: 0;
@@ -11,11 +18,14 @@ body {
 
 .quick-pane {
   box-sizing: border-box;
-  min-height: 100vh;
-  overflow-y: auto;
-  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100vh;
+  overflow: hidden;
+  padding: 10px;
   color: #e6e3df;
-  font: 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
+  font: 14px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
   background: rgba(34, 34, 34, 0.98);
   border: 1px solid #4b4b4b;
   border-radius: 8px;
@@ -24,9 +34,9 @@ body {
 
 .quick-pane header {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
   color: #f0a347;
   font-size: 11px;
   font-weight: 900;
@@ -36,14 +46,15 @@ body {
 
 .quick-pane button,
 .quick-pane select {
+  min-width: 0;
   border: 0;
   border-radius: 5px;
-  padding: 6px 9px;
+  padding: 5px 8px;
   font: inherit;
 }
 
 .quick-pane button {
-  margin-right: 6px;
+  flex: 0 0 auto;
   background: #f0a347;
   color: #25180b;
   font-weight: 750;
@@ -59,52 +70,108 @@ body {
   cursor: wait;
 }
 
+.quick-pane button.quiet {
+  color: #e6e3df;
+  background: #45413c;
+}
+
 .quick-pane select {
   color: #e6e3df;
   background: #353535;
 }
 
-.quick-pane textarea {
+.quick-pane-request {
   box-sizing: border-box;
   width: 100%;
-  min-height: 92px;
+  min-height: 180px;
+  flex: 1 1 auto;
   padding: 12px;
+  resize: none;
   border: 1px solid #484848;
   border-radius: 6px;
   color: #e6e3df;
   background: #292929;
   font: inherit;
   font-size: 16px;
-  resize: vertical;
 }
 
-.quick-pane textarea:focus,
+.quick-pane-request:focus,
 .quick-pane button:focus-visible,
 .quick-pane select:focus-visible {
   outline: 3px solid #f0a347;
   outline-offset: 2px;
 }
 
-.quick-pane > label {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  margin: 10px 8px 10px 0;
-  color: #bbb7b0;
-}
-
-.quick-pane > pre,
-.quick-pane > p {
-  margin: 10px 0 0;
-  padding: 10px 12px;
+.quick-pane-output {
+  max-height: 108px;
+  min-height: 0;
+  flex: 0 1 auto;
+  overflow: auto;
   border: 1px solid #484848;
   border-radius: 6px;
-  white-space: pre-wrap;
   background: #292929;
 }
 
-.quick-pane [role="alert"] {
-  border-color: #a65b67;
+.quick-pane-output:empty {
+  display: none;
+}
+
+.quick-pane-output > pre,
+.quick-pane-output > p {
+  margin: 0;
+  padding: 6px 8px;
+  white-space: pre-wrap;
+}
+
+.quick-pane-output > :not(:last-child) {
+  border-bottom: 1px solid #484848;
+}
+
+.quick-pane-output [role="alert"] {
   color: #ffd7db;
   background: #3d252b;
 }
+
+.quick-pane-controls {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: end;
+  gap: 6px;
+  min-width: 0;
+}
+
+.quick-pane-controls label {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+  color: #bbb7b0;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.quick-pane-controls label:first-child {
+  flex: 1 1 auto;
+}
+
+.quick-pane-controls label:nth-child(2) {
+  flex: 0 1 100px;
+}
+
+.quick-pane-controls select {
+  width: 100%;
+  font-size: 12px;
+}
+
+.quick-pane-output .extension-backdrop,
+.quick-pane-output .extension {
+  position: static;
+  display: block;
+  padding: 6px 8px;
+  background: transparent;
+}
+
+.quick-pane-output .extension h2,
+.quick-pane-output .extension p {
+  margin: 0 0 4px;
+  font-size: 12px;
+}