From fbda01e7e5baef2b3933671c9ac2f0ff4c03d789 Mon Sep 17 00:00:00 2001
From: Kiril Stoev <kstoev@google.com>
Date: Fri, 5 Dec 2025 07:30:09 +0000
Subject: [PATCH 1/2] Allow increasing the dimensions of the prompt text box

---
 .../elements/entity-editor/entity-editor.ts   | 416 ++++++++++--------
 .../src/elements/splitter/splitter.ts         |   7 +-
 2 files changed, 242 insertions(+), 181 deletions(-)

diff --git a/packages/shared-ui/src/elements/entity-editor/entity-editor.ts b/packages/shared-ui/src/elements/entity-editor/entity-editor.ts
index bde1c2d6fde..9826f2ef328 100644
--- a/packages/shared-ui/src/elements/entity-editor/entity-editor.ts
+++ b/packages/shared-ui/src/elements/entity-editor/entity-editor.ts
@@ -292,76 +292,206 @@ export class EntityEditor
       }
 
       #content {
+        display: grid;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        padding: var(--bb-grid-size-3) 0 0 0;
+      }
+
+      #main-prompt {
         display: flex;
         flex-direction: column;
         height: 100%;
+        box-sizing: border-box;
         overflow: auto;
-        padding: var(--bb-grid-size-3) 0 0 0;
 
-        > details {
-          display: flex;
-          flex-direction: column;
-          border-top: 1px solid var(--light-dark-n-90);
-          color: var(--light-dark-n-10);
-          font: 400 var(--bb-body-small) / var(--bb-body-line-height-small)
-            var(--bb-font-family);
-          padding: var(--bb-grid-size-3) var(--bb-grid-size-6)
-            var(--bb-grid-size-3) var(--bb-grid-size-6);
+        > div {
+          position: relative;
 
-          & summary {
-            display: flex;
-            align-items: center;
-            list-style: none;
-            cursor: pointer;
-            user-select: none;
-            height: var(--bb-grid-size-5);
+          &.port {
+            container-type: inline-size;
+          }
 
-            & .g-icon {
-              margin-right: var(--bb-grid-size-2);
+          &.stretch:has(+ .port:not(.stretch)) {
+            margin-bottom: var(--bb-grid-size-3);
+            border-bottom: 1px solid var(--light-dark-n-90);
+          }
 
-              &::before {
-                content: "keyboard_arrow_down";
-              }
+          &:not(.stretch):not(.info):has(+ .stretch) {
+            margin-bottom: var(--bb-grid-size-14);
+            padding-bottom: var(--bb-grid-size-3);
+            border-bottom: 1px solid var(--light-dark-n-90);
+
+            &:has(.info) {
+              padding-bottom: 0;
+            }
+
+            &::after {
+              content: "Prompt";
+              font-family: var(--bb-font-family-flex);
+              font-size: 12px;
+              position: absolute;
+              left: var(--bb-grid-size-6);
+              bottom: calc(var(--bb-grid-size-9) * -1);
             }
           }
 
-          & summary::-webkit-details-marker {
-            display: none;
+          &:not(.stretch):not(.info):has(+ :not(.stretch)) {
+            margin-bottom: var(--bb-grid-size-2);
           }
 
-          &[open] {
-            summary {
-              margin-bottom: var(--bb-grid-size-3);
+          &.stretch {
+            overflow-y: auto;
+            overflow-x: hidden;
+            flex: 1 1 auto;
 
-              & .g-icon {
-                &::before {
-                  content: "keyboard_arrow_up";
-                }
-              }
+            &:not(:last-of-type) {
+              padding-bottom: var(--bb-grid-size-3);
             }
           }
 
-          label {
-            display: block;
-            margin-bottom: var(--bb-grid-size);
+          &:not(.stretch) {
+            padding: 0 var(--bb-grid-size-6);
+            flex: 0 0 auto;
+
+            &:last-of-type {
+              padding-bottom: var(--bb-grid-size-3);
+            }
           }
 
-          bb-text-editor {
+          & bb-text-editor {
             width: 100%;
             height: 100%;
-            --text-editor-padding-top: var(--bb-grid-size-2);
-            --text-editor-padding-right: var(--bb-grid-size-3);
-            --text-editor-padding-bottom: var(--bb-grid-size-2);
-            --text-editor-padding-left: var(--bb-grid-size-3);
-            border-radius: var(--bb-grid-size-2);
-            border: 1px solid light-dark(var(--n-90), var(--n-70));
+            --text-editor-height: 100%;
+            --text-editor-padding-top: 0;
+            --text-editor-padding-right: var(--bb-grid-size-6);
+            --text-editor-padding-bottom: 0;
+            --text-editor-padding-left: var(--bb-grid-size-6);
           }
 
-          & .port {
-            margin-bottom: var(--bb-grid-size-2);
+          &:has(bb-text-editor) {
+            &:not(:last-of-type) {
+              border-bottom: 1px solid var(--light-dark-n-90);
+            }
+          }
+
+          #controls-container {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            flex: 0 0 auto;
+
+            & #controls {
+              display: flex;
+              align-items: center;
+              gap: 2px;
+
+              width: var(--bb-grid-size-9);
+              height: var(--bb-grid-size-9);
+              border-radius: var(--bb-grid-size-16);
+
+              #tools {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                border: none;
+                background: light-dark(var(--n-98), var(--n-30));
+                transition: background-color 0.2s cubic-bezier(0, 0, 0.3, 1);
+                border-radius: 50%;
+                padding: 0;
+
+                &:not([disabled]) {
+                  cursor: pointer;
+
+                  &:hover,
+                  &:focus {
+                    background: var(--light-dark-n-95);
+                  }
+                }
+              }
+            }
+          }
+
+          bb-flowgen-in-step-button {
+            z-index: 1;
+            position: absolute;
+            bottom: calc(var(--bb-grid-size-11) * -1);
+            right: var(--bb-grid-size-6);
+          }
+        }
+      }
+
+      #advanced-settings {
+        height: 100%;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        border-top: 1px solid var(--light-dark-n-90);
+        color: var(--light-dark-n-10);
+        font: 400 var(--bb-body-small) / var(--bb-body-line-height-small)
+          var(--bb-font-family);
+        padding: var(--bb-grid-size-3) var(--bb-grid-size-6)
+          var(--bb-grid-size-3) var(--bb-grid-size-6);
+        box-sizing: border-box;
+
+        & summary {
+          display: flex;
+          align-items: center;
+          list-style: none;
+          cursor: pointer;
+          user-select: none;
+          height: var(--bb-grid-size-5);
+
+          & .g-icon {
+            margin-right: var(--bb-grid-size-2);
+
+            &::before {
+              content: "keyboard_arrow_down";
+            }
+          }
+        }
+
+        & summary::-webkit-details-marker {
+          display: none;
+        }
+
+        &[open] {
+          summary {
+            margin-bottom: var(--bb-grid-size-3);
+
+            & .g-icon {
+              &::before {
+                content: "keyboard_arrow_up";
+              }
+            }
           }
         }
 
+        label {
+          display: block;
+          margin-bottom: var(--bb-grid-size);
+        }
+
+        bb-text-editor {
+          width: 100%;
+          height: 100%;
+          --text-editor-padding-top: var(--bb-grid-size-2);
+          --text-editor-padding-right: var(--bb-grid-size-3);
+          --text-editor-padding-bottom: var(--bb-grid-size-2);
+          --text-editor-padding-left: var(--bb-grid-size-3);
+          border-radius: var(--bb-grid-size-2);
+          border: 1px solid light-dark(var(--n-90), var(--n-70));
+        }
+
+        & .port {
+          margin-bottom: var(--bb-grid-size-2);
+        }
+      }
+
+      #main-prompt, #advanced-settings {
         div {
           display: flex;
           align-items: center;
@@ -648,123 +778,6 @@ export class EntityEditor
             }
           }
         }
-
-        > div {
-          position: relative;
-
-          &.port {
-            container-type: inline-size;
-          }
-
-          &.stretch:has(+ .port:not(.stretch)) {
-            margin-bottom: var(--bb-grid-size-3);
-            border-bottom: 1px solid var(--light-dark-n-90);
-          }
-
-          &:not(.stretch):not(.info):has(+ .stretch) {
-            margin-bottom: var(--bb-grid-size-14);
-            padding-bottom: var(--bb-grid-size-3);
-            border-bottom: 1px solid var(--light-dark-n-90);
-
-            &:has(.info) {
-              padding-bottom: 0;
-            }
-
-            &::after {
-              content: "Prompt";
-              font-family: var(--bb-font-family-flex);
-              font-size: 12px;
-              position: absolute;
-              left: var(--bb-grid-size-6);
-              bottom: calc(var(--bb-grid-size-9) * -1);
-            }
-          }
-
-          &:not(.stretch):not(.info):has(+ :not(.stretch)) {
-            margin-bottom: var(--bb-grid-size-2);
-          }
-
-          &.stretch {
-            overflow-y: auto;
-            overflow-x: hidden;
-            flex: 1 1 auto;
-
-            &:not(:last-of-type) {
-              padding-bottom: var(--bb-grid-size-3);
-            }
-          }
-
-          &:not(.stretch) {
-            padding: 0 var(--bb-grid-size-6);
-            flex: 0 0 auto;
-
-            &:last-of-type {
-              padding-bottom: var(--bb-grid-size-3);
-            }
-          }
-
-          & bb-text-editor {
-            width: 100%;
-            height: 100%;
-            --text-editor-height: 100%;
-            --text-editor-padding-top: 0;
-            --text-editor-padding-right: var(--bb-grid-size-6);
-            --text-editor-padding-bottom: 0;
-            --text-editor-padding-left: var(--bb-grid-size-6);
-          }
-
-          &:has(bb-text-editor) {
-            &:not(:last-of-type) {
-              border-bottom: 1px solid var(--light-dark-n-90);
-            }
-          }
-
-          #controls-container {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            flex: 0 0 auto;
-
-            & #controls {
-              display: flex;
-              align-items: center;
-              gap: 2px;
-
-              width: var(--bb-grid-size-9);
-              height: var(--bb-grid-size-9);
-              border-radius: var(--bb-grid-size-16);
-
-              #tools {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                height: 100%;
-                border: none;
-                background: light-dark(var(--n-98), var(--n-30));
-                transition: background-color 0.2s cubic-bezier(0, 0, 0.3, 1);
-                border-radius: 50%;
-                padding: 0;
-
-                &:not([disabled]) {
-                  cursor: pointer;
-
-                  &:hover,
-                  &:focus {
-                    background: var(--light-dark-n-95);
-                  }
-                }
-              }
-            }
-          }
-
-          bb-flowgen-in-step-button {
-            z-index: 1;
-            position: absolute;
-            bottom: calc(var(--bb-grid-size-11) * -1);
-            right: var(--bb-grid-size-6);
-          }
-        }
       }
 
       bb-fast-access-menu {
@@ -800,6 +813,7 @@ export class EntityEditor
   #isUsingFastAccess = false;
   #onPointerDownBound = this.#onPointerDown.bind(this);
   #advancedOpen = false;
+  #split = [0.9, 0.1];
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -1249,6 +1263,43 @@ export class EntityEditor
     ></bb-text-editor>`;
   }
 
+  #calculateSplit(evt: Event): [number, number] {
+    const defaultSplit: [number, number] = [0.9, 0.1];
+    if (!(evt.target instanceof HTMLDetailsElement) || !evt.target.open) {
+      return defaultSplit;
+    }
+
+    const heightContainer = evt.target.parentElement?.scrollHeight || 0;
+    const heightDetails = evt.target.closest('#advanced-settings')?.scrollHeight || 0;
+
+    if (!heightContainer || !heightDetails) {
+      return defaultSplit;
+    }
+
+    if (heightDetails >= heightContainer) {
+      return [0.1, 0.9];
+    }
+
+    let percentage: number = Math.ceil(heightDetails / heightContainer * 100) / 100;
+
+    return [1 - percentage, percentage];
+  }
+
+  #toggleDetails(evt: Event) {
+    if (!(evt.target instanceof HTMLDetailsElement)) {
+      return;
+    }
+
+    const [a1, b1] = this.#split;
+    const [a2, b2] = this.#calculateSplit(evt);
+    if (a1 !== a2 || b1 !== b2) {
+      this.#split = [a2, b2];
+      this.requestUpdate();
+    }
+
+    this.#advancedOpen = evt.target.open;
+  }
+
   #renderPorts(
     graphId: GraphIdentifier,
     nodeId: NodeIdentifier,
@@ -1482,25 +1533,30 @@ export class EntityEditor
       basicPorts.push(port);
     }
 
-    return [
-      ...basicPorts.map(portRender),
-      advancedPorts.length > 0
-        ? html`<details
-            id="advanced-settings"
-            ?open=${this.#advancedOpen}
-            @toggle=${(evt: Event) => {
-              if (!(evt.target instanceof HTMLDetailsElement)) {
-                return;
-              }
-
-              this.#advancedOpen = evt.target.open;
-            }}
-          >
-            <summary><span class="g-icon"></span>Advanced settings</summary>
-            ${[...advancedPorts.map(portRender)]}
-          </details>`
-        : nothing,
-    ];
+    return html`
+      <bb-splitter
+        id="main-instructions"
+        direction=${"vertical"}
+        name="main-instructions"
+        .split=${this.#split}
+        minSegmentSizeVertical="45"
+      >
+        <div id="main-prompt" slot="slot-0">
+          ${basicPorts.map(portRender)}
+        </div>
+        ${advancedPorts.length > 0
+          ? html`<details
+              id="advanced-settings"
+              slot="slot-1"
+              ?open=${this.#advancedOpen}
+              @toggle=${this.#toggleDetails}
+            >
+              <summary><span class="g-icon"></span>Advanced settings</summary>
+              ${[...advancedPorts.map(portRender)]}
+            </details>`
+          : nothing}
+      </bb-splitter>
+    `;
   }
 
   #showFastAccess(bounds: DOMRect | undefined) {
diff --git a/packages/shared-ui/src/elements/splitter/splitter.ts b/packages/shared-ui/src/elements/splitter/splitter.ts
index 22b90ce1f48..d0558d45c33 100644
--- a/packages/shared-ui/src/elements/splitter/splitter.ts
+++ b/packages/shared-ui/src/elements/splitter/splitter.ts
@@ -421,9 +421,14 @@ export class Splitter extends LitElement {
 
   protected willUpdate(
     changedProperties:
-      | PropertyValueMap<{ direction: Direction }>
+      | PropertyValueMap<{ direction: Direction, split: Array<number> }>
       | Map<PropertyKey, unknown>
   ): void {
+    if (this.split && changedProperties.get('split') !== this.split) {
+      this.#setAndStore();
+      return;
+    }
+
     if (!changedProperties.has("direction")) {
       return;
     }

From 6c47dbaa13d90d6ebbdb9bfe2f269fcbcefcb901 Mon Sep 17 00:00:00 2001
From: Kiril Stoev <kstoev@google.com>
Date: Fri, 5 Dec 2025 13:59:00 +0000
Subject: [PATCH 2/2] a few small improvements

---
 .../shared-ui/src/elements/entity-editor/entity-editor.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared-ui/src/elements/entity-editor/entity-editor.ts b/packages/shared-ui/src/elements/entity-editor/entity-editor.ts
index 9826f2ef328..bcbee9b36ac 100644
--- a/packages/shared-ui/src/elements/entity-editor/entity-editor.ts
+++ b/packages/shared-ui/src/elements/entity-editor/entity-editor.ts
@@ -304,7 +304,7 @@ export class EntityEditor
         flex-direction: column;
         height: 100%;
         box-sizing: border-box;
-        overflow: auto;
+        overflow: hidden;
 
         > div {
           position: relative;
@@ -1277,7 +1277,7 @@ export class EntityEditor
     }
 
     if (heightDetails >= heightContainer) {
-      return [0.1, 0.9];
+      return [0.3, 0.7];
     }
 
     let percentage: number = Math.ceil(heightDetails / heightContainer * 100) / 100;