From 6c18989c2bc987a7e7df04821dc35f526cfc605e Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Wed, 20 Mar 2024 16:47:38 -0400
Subject: [PATCH] Keep AI Assistant button visible when panel open, in a new
 active state

- add isHidden arg to ResizablePanel
- add splattributes to ResizablePanel
---
 .../resizable-panel-group/index.gts           |   1 +
 .../resizable-panel-group/panel.gts           |  42 ++++++++++----
 .../resizable-panel-group/usage.gts           |  35 ++++--------
 .../components/resizable-panel-group-test.gts |  54 ++++++++++++++++++
 .../ai-assist-button-active-bg.webp           | Bin 0 -> 270 bytes
 .../ai-assist-button-active-bg@2x.webp        | Bin 0 -> 442 bytes
 .../ai-assist-button-active-bg@3x.webp        | Bin 0 -> 740 bytes
 .../ai-assistant/ai-assist-icon-bw.png        | Bin 0 -> 320 bytes
 .../ai-assistant/ai-assist-icon-bw@2x.png     | Bin 0 -> 479 bytes
 .../ai-assistant/ai-assist-icon-bw@3x.png     | Bin 0 -> 627 bytes
 .../app/components/ai-assistant/button.gts    |  30 +++++++++-
 .../app/components/ai-assistant/panel.gts     |   1 +
 .../components/operator-mode/stack-item.gts   |  17 ++++--
 .../operator-mode/submode-layout.gts          |  43 ++++++++------
 packages/host/ember-cli-build.js              |   4 ++
 15 files changed, 169 insertions(+), 58 deletions(-)
 create mode 100644 packages/host/app/components/ai-assistant/ai-assist-button-active-bg.webp
 create mode 100644 packages/host/app/components/ai-assistant/ai-assist-button-active-bg@2x.webp
 create mode 100644 packages/host/app/components/ai-assistant/ai-assist-button-active-bg@3x.webp
 create mode 100644 packages/host/app/components/ai-assistant/ai-assist-icon-bw.png
 create mode 100644 packages/host/app/components/ai-assistant/ai-assist-icon-bw@2x.png
 create mode 100644 packages/host/app/components/ai-assistant/ai-assist-icon-bw@3x.png

diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
index 3ad54370f0..a9def6f6fc 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
@@ -245,6 +245,7 @@ export default class ResizablePanelGroup extends Component<Signature> {
       (panelContext) => panelContext.lengthPx,
     );
 
+    this.panelRatios = [];
     for (let index = 0; index < panelLengths.length; index++) {
       let panelLength = panelLengths[index];
       if (panelLength == undefined) {
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
index 18489b8939..ae75533bf6 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
@@ -1,8 +1,10 @@
 import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
 import { scheduleOnce } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
 import createRef from 'ember-ref-bucket/modifiers/create-ref';
 
 import cssVars from '../../helpers/css-var.ts';
@@ -22,6 +24,7 @@ interface Signature {
   Args: {
     collapsible?: boolean; //default true
     defaultLengthFraction: number;
+    isHidden?: boolean; //default false
     isLastPanel: (panelId: number) => boolean;
     lengthPx?: number;
     minLengthPx?: number;
@@ -43,6 +46,16 @@ interface Signature {
   Element: HTMLDivElement;
 }
 
+let managePanelRegistration = modifier(
+  (_element, [panel, isHidden]: [Panel, boolean | undefined]) => {
+    if (isHidden) {
+      scheduleOnce('afterRender', panel, panel.unregisterPanel);
+    } else {
+      scheduleOnce('afterRender', panel, panel.registerPanel);
+    }
+  },
+);
+
 export default class Panel extends Component<Signature> {
   <template>
     <div
@@ -60,6 +73,8 @@ export default class Panel extends Component<Signature> {
         )
       }}
       {{createRef (@resizablePanelElId this.id) bucket=@panelGroupComponent}}
+      {{managePanelRegistration this @isHidden}}
+      ...attributes
     >
       {{yield}}
     </div>
@@ -90,16 +105,11 @@ export default class Panel extends Component<Signature> {
 
   constructor(owner: any, args: any) {
     super(owner, args);
-    scheduleOnce('afterRender', this, this.registerPanel);
-
-    registerDestructor(this, () => {
-      if (this.id) {
-        this.args.unregisterPanel(this.id);
-      }
-    });
+    registerDestructor(this, this.unregisterPanel);
   }
 
-  private registerPanel() {
+  @action
+  registerPanel() {
     if (this.id == undefined) {
       this.id = this.args.registerPanel({
         lengthPx: this.args.lengthPx,
@@ -110,6 +120,14 @@ export default class Panel extends Component<Signature> {
     }
   }
 
+  @action
+  unregisterPanel() {
+    if (this.id) {
+      this.args.unregisterPanel(this.id);
+      this.id = undefined;
+    }
+  }
+
   get panelContext() {
     if (this.id == undefined) {
       return {
@@ -122,7 +140,9 @@ export default class Panel extends Component<Signature> {
   }
 
   get minLengthCssValue() {
-    if (this.panelContext?.minLengthPx !== undefined) {
+    if (this.args.isHidden) {
+      return htmlSafe('0px');
+    } else if (this.panelContext?.minLengthPx !== undefined) {
       return htmlSafe(`${this.panelContext.minLengthPx}px`);
     } else if (this.args.minLengthPx !== undefined) {
       return htmlSafe(`${this.args.minLengthPx}px`);
@@ -133,7 +153,9 @@ export default class Panel extends Component<Signature> {
   get lengthCssValue() {
     let lengthPx = this.panelContext?.lengthPx;
     let defaultLengthFraction = this.panelContext?.defaultLengthFraction;
-    if (lengthPx === -1 && defaultLengthFraction) {
+    if (this.args.isHidden) {
+      return htmlSafe('0px');
+    } else if (lengthPx === -1 && defaultLengthFraction) {
       return htmlSafe(`${defaultLengthFraction * 100}%`);
     } else if (lengthPx !== -1 && lengthPx !== undefined) {
       return htmlSafe(`${lengthPx}px`);
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts
index a9461e52f9..2d9f188fd7 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts
@@ -40,16 +40,16 @@ export default class ResizablePanelUsage extends Component {
       <:example>
         <ResizablePanelGroup
           @orientation='horizontal'
+          style={{cssVar
+            boxel-panel-resize-handler-height=this.boxelPanelResizeHandleHeight.value
+            boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
+            boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
+          }}
           as |ResizablePanel ResizeHandle|
         >
           <ResizablePanel
             @defaultLengthFraction={{this.horizontalPanel1DefaultWidthFraction}}
             @minLengthPx={{this.horizontalPanel1MinWidthPx}}
-            style={{cssVar
-              boxel-panel-resize-handler-height=this.boxelPanelResizeHandleHeight.value
-              boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
-              boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
-            }}
           >
             Panel 1
           </ResizablePanel>
@@ -57,11 +57,6 @@ export default class ResizablePanelUsage extends Component {
           <ResizablePanel
             @defaultLengthFraction={{this.horizontalPanel2DefaultWidthFraction}}
             @minLengthPx={{this.horizontalPanel2MinWidthPx}}
-            style={{cssVar
-              boxel-panel-resize-handler-height=this.boxelPanelResizeHandleHeight.value
-              boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
-              boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
-            }}
           >
             Panel 2
           </ResizablePanel>
@@ -69,11 +64,6 @@ export default class ResizablePanelUsage extends Component {
           <ResizablePanel
             @defaultLengthFraction={{this.horizontalPanel3DefaultWidthFraction}}
             @minLengthPx={{this.horizontalPanel3MinWidthPx}}
-            style={{cssVar
-              boxel-panel-resize-handler-height=this.boxelPanelResizeHandleHeight.value
-              boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
-              boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
-            }}
           >
             Panel 3
           </ResizablePanel>
@@ -158,16 +148,16 @@ export default class ResizablePanelUsage extends Component {
           <ResizablePanelGroup
             @orientation='vertical'
             @reverseCollapse={{this.verticalReverseCollapse}}
+            style={{cssVar
+              boxel-panel-resize-handler-width=this.boxelPanelResizeHandleWidth.value
+              boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
+              boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
+            }}
             as |ResizablePanel ResizeHandle|
           >
             <ResizablePanel
               @defaultLengthFraction={{this.verticalPanel1DefaultHeightFraction}}
               @minLengthPx={{this.verticalPanel1MinHeightPx}}
-              style={{cssVar
-                boxel-panel-resize-handler-width=this.boxelPanelResizeHandleWidth.value
-                boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
-                boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
-              }}
             >
               Panel 1
             </ResizablePanel>
@@ -175,11 +165,6 @@ export default class ResizablePanelUsage extends Component {
             <ResizablePanel
               @defaultLengthFraction={{this.verticalPanel2DefaultHeightFraction}}
               @minLengthPx={{this.verticalPanel2MinHeightPx}}
-              style={{cssVar
-                boxel-panel-resize-handler-width=this.boxelPanelResizeHandleWidth.value
-                boxel-panel-resize-handler-background-color=this.boxelPanelResizeHandleBackgroundColor.value
-                boxel-panel-resize-handler-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
-              }}
             >
               Panel 2
             </ResizablePanel>
diff --git a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
index d28be529a0..0412049a8a 100644
--- a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
+++ b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
@@ -14,6 +14,7 @@ class RenderController {
   @tracked containerStyle = '';
   @tracked panel1LengthPx: number | undefined;
   @tracked panel2LengthPx: number | undefined;
+  @tracked isPanel2Hidden = false;
   panel1InnerContentStyle: string | undefined;
 }
 
@@ -56,6 +57,7 @@ module('Integration | ResizablePanelGroup', function (hooks) {
             @defaultLengthFraction={{0.4}}
             @minLengthPx={{50}}
             @lengthPx={{renderController.panel2LengthPx}}
+            @isHidden={{renderController.isPanel2Hidden}}
           >
             <div
               class='panel-2-content'
@@ -210,4 +212,56 @@ module('Integration | ResizablePanelGroup', function (hooks) {
     assert.hasNumericStyle('.panel-1-content', 'height', 360, 1);
     assert.hasNumericStyle('.panel-2-content', 'height', 240, 1);
   });
+
+  test('it excludes hidden panels from participating in layout', async function (this: MyTestContext, assert) {
+    this.renderController.isPanel2Hidden = true;
+    this.renderController.containerStyle =
+      'max-height: 100%; width: 200px; height: 218px;';
+    let { renderController } = this;
+
+    await render(<template>
+      {{! template-lint-disable no-inline-styles }}
+      <div id='test-container' style={{renderController.containerStyle}}>
+        <ResizablePanelGroup
+          @orientation='vertical'
+          @reverseCollapse={{true}}
+          as |ResizablePanel|
+        >
+          <ResizablePanel
+            @defaultLengthFraction={{0.6}}
+            @lengthPx={{renderController.panel1LengthPx}}
+          >
+            <div class='panel-1-content' style='height: 100%; overflow-y:auto'>
+              <div style={{renderController.panel1InnerContentStyle}}>
+                Panel 1
+              </div>
+            </div>
+          </ResizablePanel>
+          <ResizablePanel
+            @defaultLengthFraction={{0.4}}
+            @minLengthPx={{50}}
+            @lengthPx={{renderController.panel2LengthPx}}
+            @isHidden={{renderController.isPanel2Hidden}}
+          >
+            <div class='panel-2-content' style='height: 100%;'>
+              {{#unless renderController.isPanel2Hidden}}
+                Panel 2
+              {{/unless}}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </template>);
+    await sleep(100); // let didResizeModifier run
+    assert.hasNumericStyle('.panel-1-content', 'height', 218, 1);
+    assert.hasNumericStyle('.panel-2-content', 'height', 0, 0);
+    this.renderController.isPanel2Hidden = false;
+    await sleep(100); // let didResizeModifier run
+    assert.hasNumericStyle('.panel-1-content', 'height', 156, 1);
+    assert.hasNumericStyle('.panel-2-content', 'height', 62, 1);
+    this.renderController.isPanel2Hidden = true;
+    await sleep(100); // let didResizeModifier run
+    assert.hasNumericStyle('.panel-1-content', 'height', 218, 1);
+    assert.hasNumericStyle('.panel-2-content', 'height', 0, 0);
+  });
 });
diff --git a/packages/host/app/components/ai-assistant/ai-assist-button-active-bg.webp b/packages/host/app/components/ai-assistant/ai-assist-button-active-bg.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cef6c30e6c3674823941080a575dfe7cb2c5f3d7
GIT binary patch
literal 270
zcmV+p0rCD)Nk&En0RRA3MM6+kP&gp^0001R2mqY{DkuOb06t|Tk42;+AsVe#s6Ylp
zv;a<=ps8N^{=LS<#86OofELx2mUK;G+|PcOVtzw7bag<uwLOYb2O<e47Us;^MB)Gd
z`(jw271R+65xObQDWSQMEu64g<*0qOBYaJ_)Uw6DR1qO+I6~+2C2i8o2Iu*eCXn?}
z9H9ld`;ePP-t7{nK*vWSZNkcfXL?|feZW4RqKya+WqoENe4g^8$i5~z`wiMG;T(WH
zuUsrCqv-J6cxcA7UmN(gkFt<GN!@rEr<_auU)zg*!lmLKZzwfiLGNyn5S!nJsAyEu
UXb8utbskqrviA!{P~ZRn0Hnrwc>n+a

literal 0
HcmV?d00001

diff --git a/packages/host/app/components/ai-assistant/ai-assist-button-active-bg@2x.webp b/packages/host/app/components/ai-assistant/ai-assist-button-active-bg@2x.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6d534d1acfd5005c5ea69a9a3bdfbd2efaf58680
GIT binary patch
literal 442
zcmV;r0Y&~&Nk&Gp0RRA3MM6+kP&go_0RRB75CEM4Do_AW06uLhkwv5=p_i-%BuECt
zvH(t*v_Ga(_D<~K=agPC-_b|8BP@|}^0D@z$I^b}j_1)X^;Yyp_ibKeDWnRyVg`eJ
zv4h+S0F`dQgx0j_&LvqUR-v8V+Hx6Egt;{+dGEVYu#s@bw3EfgZ^|IuVW7<q87!oa
z$o?Lvm-eQin=77NfB^n*d_S1qO$7JfVb_|1*}wbfZU1d1|K7yEb0K<-*3#=3w&R2s
zns+VNQ-GrWGDY-MjIeX7w!)<&tOQ>uRVa0fTZ1`Rqd3NVnF7Wa$>maz?lre@pj8A_
zwRXOMdFGtY4(XKk=y#vc_UBJZ80#xbNQfn}-7Pba;2B*zc3K$Sb>NxOGXCm<D(hDX
z!IOS0awj}yushU}J^1bg+VV7>uO2JC?S_m%z;z8ET`b;eIj!MT>h1m{1E=p?>7z4q
zdep`pjJqcH^D>Z^?#OJE)Jw@FC=B(a5qL!2JLk!A|6C4ohks$VP8MEWtXyJ+&D|M#
ksD6tzyp2^703}g)vsIjgSfsZDY8=SGnAa%bSe!-x0LYiz7XSbN

literal 0
HcmV?d00001

diff --git a/packages/host/app/components/ai-assistant/ai-assist-button-active-bg@3x.webp b/packages/host/app/components/ai-assistant/ai-assist-button-active-bg@3x.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9580d05658e043aea1849a9fa0763c568ba49e0b
GIT binary patch
literal 740
zcmV<A0vr8ONk&H80ssJ4MM6+kP&gpa0ssIo7yz9CDtG{R06uLplt(EuE2=0K3#woZ
ziA7hP;^a60USfynHvL)xDyshCJ-Y#VSzgtpm#OR_yMV*_`2C&qW?%uNSjd_<tyGHc
zO7-(EN;>h)K#of`TrrK-pU-pll=rTSy9$A$Y)92i7J>;u@+0=`ZEyehXTp9){Bf^&
z8SPgX1AjPo+pNEPKfZw!7!tWvQwC1nve^wz{wD5Fjc#&~uLhpvt{KfSyEPqJc$viO
z1xh0&*y`wpq^ZjDdH?^+_1MQYfB^nW`5oWLrTTQ&^hOdt`^JC%!wdi3LdVV~B`+l1
z5zGhj%$0`ar%KqkA_DvFn9GMMKcSN8#iDP)a0czdx=8@4)P~MRVmYuIA9e8XP8{sh
zX)X{;Q*9a@SNq5K$Q2Erfx7v3NZ#=UWAuOR-tPA$>#)0Tvay>D+C5b6#dfk=6S4sD
zJpJngM7J6;&P6FNh-GO}qh=7Q`d{f2x^O$2FN-a&+^XiajSznYA>T<S`5S8=fGQ2s
zIVeyc&Fc5vg45$7s!moID`GDE<rkv0k#U3iX^3Qx8%F|I${-{hfVH~v*2zHV`3Ja0
zQ_*wFY!AY4$IwIlKUb`ap2Y)-Ce$b8ccA*D_1L-v&BRLTpAz8SoqHAy83)E-PsFI=
zQ$)1g3_@l9yfDb)_;lu?<{I0U(rgispZZ7ftCV<qCmVuspA6__&%~$F<1YEX0B0gn
z1n`v8@P(cC%_4jrI+KHxNWM*F4%HH=NI45&GdC^%ZG)V2Fd4;Oxl90ob~35BY`@BV
z;C|c3@o7^PFxo`m2B>S|#l<5m*)MrA?J~^F*BUEHO?3whgSCOt!pfYYj(kn`k&eFG
z1C`pEcI2|KW306|>-@d0zlwZ#io4?(=zhKt2#pLB<r?E2KXZSMVkJ8K29kV>NjF=w
W$E9=Eh=?j~Sml+qe_e5i0Du4^z;!49

literal 0
HcmV?d00001

diff --git a/packages/host/app/components/ai-assistant/ai-assist-icon-bw.png b/packages/host/app/components/ai-assistant/ai-assist-icon-bw.png
new file mode 100644
index 0000000000000000000000000000000000000000..c54c819f3c0e38c0d247981b1f361a2fb8658feb
GIT binary patch
literal 320
zcmeAS@N?(olHy`uVBq!ia0vp^QXtI23?!pd0{;Rjg8-ipSN8%RAd`5Y>hr}CsG7ed
z$S;`T!2yQ=g@z9X2?YZ4_Fve*-*gx#wZYTHF+}2Wasm+i`yc=Ee?2oBM*`z#nFTi6
z{{KJ!=l^_$r-uLj?|=3GKYPHvKmY$b|NsA=^I^f2|Nl=Y{QqCgJj47iP#w>||Nq08
zZmM+xWy2E^m?oW{BiZoef4{WEj;D@12L4PdmI)sFy@m0_<7@37?40f#;R!jtphSxy
zOZT;uDqF0|z1S8nvC0n3`h&~v9M58&^j59X;S<xD)D`R8z6-9(zv#qdIwinaKyVj>
XM#em=htp+NfdawP)z4*}Q$iB}fa`d8

literal 0
HcmV?d00001

diff --git a/packages/host/app/components/ai-assistant/ai-assist-icon-bw@2x.png b/packages/host/app/components/ai-assistant/ai-assist-icon-bw@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3066b1f2de7fc42449d6bde4b0aa733515bb417
GIT binary patch
literal 479
zcmeAS@N?(olHy`uVBq!ia0vp^CLqkg3?x4-dwml~83*`;xVjhk0GT9#+m3o#Kn(&V
zL4Lsu3+_L-Q1GEaz#@OcfrJSPT6I&~7#JA6JzX3_JdSUj7P+lifybfIK>O6c@ZYOK
zIrkY%S^RU6=5>}6M<Vpp<|SR2bTyS@mPSUFgE8w_UXK{-=3Ubko!gO}T#~UjY~h!$
z8M#rb{obo2Z#r+El98D6(kRu`DyYmMx7+8F`k`eFU!uh{PG6pvFCekx!M4=r1?;=M
zZ+)sbTv^asdh7nZE8Ks+m)(z_I5VoEyk+amXLEkkTox28D)^kj)7`@I>FJ~Zf#dT&
z+jTsD{?t}r|9$Ozr>IcnNi9p1H~WMs#PXyq<ra{L_GDoGuefuE+t-9V%e{YGS_}_H
zUQ@l+n)`qKg!>B>zX#}C(|4M(?#^_H_48}*_;Muwo7y1j)4NgSOqapjchQNBySK$e
zB<SnxUc*)8C9z`bG{cmQJm;r8-N-iKwoqlf&bC<_mxX1{UpOtp!91&?PDMh>ZbE&=
knMQNARSPe^-FxyA|I+#(vDt<7R-icYboFyt=akR{05B-NmjD0&

literal 0
HcmV?d00001

diff --git a/packages/host/app/components/ai-assistant/ai-assist-icon-bw@3x.png b/packages/host/app/components/ai-assistant/ai-assist-icon-bw@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce7a33216b4b3164a74e2e8f7986049422a9c554
GIT binary patch
literal 627
zcmeAS@N?(olHy`uVBq!ia0vp^ejv=k3?yq>Z1sSYZh%jSt9yYDkVzz1yDe@xP$^$Y
zkY6x^!v}$a0}o~^7&Js)*swp}rkH_&@wumqV~EG`<OBzXYvlq897~xcHZUh${kUMI
zb%V34{H$H<BC9q#2Y;7nx3XMO!#<_1!}+e&3LEArbxqE(GA_R~4_itwYbUfxeV+DE
zZc1uHs4Vv#D|?O8jH|88R=n|Us|*NZ3M(}T7Ll0op|T~CUn}~+0lrk*L(d%IRy^6w
z%X7!z8LQ1TJLXNF3!-_<ABzTcFrRf}|D6zY%ER#QJJWRsm@AtZ-wF08r0ip#p2<*T
z`C!lX6>()%?Qd*U*!KlHnw{m<<LPBKZgJo`<C3=0qUD7(;|2-kNhdD1DokDY{GMX-
z^MJFZ8jJFsB=0S3V$P_1FB^5M^=Jljh-|xDT<NTW{l15mzq`n?!^+Rr=9S4rrfi|S
zQjcQ`r8^eAWAT#t`XK1LjBf6g#PIJv48F3-a$%+12A5RC#Y+3NHaux9vn?q-FP40E
zby($!S69p*XcX`0o^a)8mC*yX;B`$`Ik~vZ3?8t{IGDPuW|piHTfev5;~V?OhfFLH
zhiC4n*t|$XR$%tJ4!`9t%d3+<3wrHa;%2A5>&}5#KEcp+w!ExUCo8d>@^ojObSn1G
z(;a4!Uzs+3<ylwdJ^M}7gd0^;UsTPyQ6=wf{m9hytx(c!%Ol%n8{A6F*UY&tc-v29
m+g;DM-}LyW-hTVz3L}GjMv8#@I-R4SbmQsj=d#Wzp$Pz=dhiSY

literal 0
HcmV?d00001

diff --git a/packages/host/app/components/ai-assistant/button.gts b/packages/host/app/components/ai-assistant/button.gts
index df4e8e1bf6..5c969537a1 100644
--- a/packages/host/app/components/ai-assistant/button.gts
+++ b/packages/host/app/components/ai-assistant/button.gts
@@ -1,13 +1,18 @@
 import Component from '@glimmer/component';
 
+import { cn } from '@cardstack/boxel-ui/helpers';
+
 interface Signature {
   Element: HTMLButtonElement;
+  Args: {
+    isActive: boolean;
+  };
 }
 
 export default class AiAssistantButton extends Component<Signature> {
   <template>
     <button
-      class='ai-assistant-button'
+      class={{cn 'ai-assistant-button' is-active=@isActive}}
       data-test-open-ai-assistant
       ...attributes
     />
@@ -20,8 +25,8 @@ export default class AiAssistantButton extends Component<Signature> {
         bottom: var(--boxel-sp);
         right: var(--boxel-sp);
         border-radius: var(--boxel-border-radius);
-        background-color: var(--boxel-ai-purple);
-        border: none;
+        background-color: var(--boxel-dark);
+        border: 1px solid rgba(255, 255, 255, 0.35);
 
         background-image: image-set(
           url('./ai-assist-icon.webp') 1x,
@@ -35,6 +40,25 @@ export default class AiAssistantButton extends Component<Signature> {
       .ai-assistant-button:hover {
         cursor: pointer;
       }
+
+      .ai-assistant-button.is-active {
+        background-image: image-set(
+            url('./ai-assist-icon-bw.png') 1x,
+            url('./ai-assist-icon-bw@2x.png') 2x,
+            url('./ai-assist-icon-bw@3x.png')
+          ),
+          image-set(
+            url('./ai-assist-button-active-bg.webp') 1x,
+            url('./ai-assist-button-active-bg@2x.webp') 2x,
+            url('./ai-assist-button-active-bg@3x.webp')
+          );
+        background-size:
+          26px 26px,
+          40px 40px;
+        background-position: center, center;
+        background-repeat: no-repeat, no-repeat;
+        border: 1px solid rgba(0, 0, 0, 0.35);
+      }
     </style>
   </template>
 }
diff --git a/packages/host/app/components/ai-assistant/panel.gts b/packages/host/app/components/ai-assistant/panel.gts
index 66f824290c..230e7f30f9 100644
--- a/packages/host/app/components/ai-assistant/panel.gts
+++ b/packages/host/app/components/ai-assistant/panel.gts
@@ -169,6 +169,7 @@ export default class AiAssistantPanel extends Component<Signature> {
         grid-template-rows: auto 1fr;
         background-color: var(--boxel-ai-purple);
         border: none;
+        border-radius: 0;
         color: var(--boxel-light);
         height: 100%;
         position: relative;
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index c831bc72fc..0d58343509 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -319,10 +319,19 @@ export default class OperatorModeStackItem extends Component<Signature> {
   });
 
   private calculateLastSavedMsg() {
-    this.lastSavedMsg =
-      this.lastSaved != null
-        ? `Saved ${formatDistanceToNow(this.lastSaved, { addSuffix: true })}`
-        : undefined;
+    // runs frequently, so only change a tracked property if the value has changed
+    if (this.lastSaved == null) {
+      if (this.lastSavedMsg) {
+        this.lastSavedMsg = undefined;
+      }
+    } else {
+      let savedMessage = `Saved ${formatDistanceToNow(this.lastSaved, {
+        addSuffix: true,
+      })}`;
+      if (this.lastSavedMsg != savedMessage) {
+        this.lastSavedMsg = savedMessage;
+      }
+    }
   }
 
   private doWithStableScroll = restartableTask(
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index 3ec15e71e3..ca3d3b0a97 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -9,7 +9,7 @@ import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
 
 import { ResizablePanelGroup } from '@cardstack/boxel-ui/components';
 import type { PanelContext } from '@cardstack/boxel-ui/components';
-import { and, not } from '@cardstack/boxel-ui/helpers';
+import { and, cn, not } from '@cardstack/boxel-ui/helpers';
 
 import AiAssistantButton from '@cardstack/host/components/ai-assistant/button';
 import AiAssistantPanel from '@cardstack/host/components/ai-assistant/panel';
@@ -152,8 +152,10 @@ export default class SubmodeLayout extends Component<Signature> {
 
   <template>
     <div
-      class='operator-mode-with-ai-assistant
-        {{this.aiAssistantVisibilityClass}}'
+      class={{cn
+        'operator-mode-with-ai-assistant'
+        this.aiAssistantVisibilityClass
+      }}
     >
       <ResizablePanelGroup
         @orientation='horizontal'
@@ -165,6 +167,7 @@ export default class SubmodeLayout extends Component<Signature> {
           @defaultLengthFraction={{1}}
           @minLengthPx={{371}}
           @collapsible={{false}}
+          class='main-panel'
         >
           <SubmodeSwitcher
             @submode={{this.operatorModeStateService.state.submode}}
@@ -172,26 +175,29 @@ export default class SubmodeLayout extends Component<Signature> {
             class='submode-switcher'
           />
           {{yield this.openSearchSheetToPrompt}}
+          {{#if (and APP.experimentalAIEnabled (not @hideAiAssistant))}}
+            <AiAssistantButton
+              class='chat-btn'
+              @isActive={{this.isAiAssistantVisible}}
+              {{on 'click' this.toggleChat}}
+            />
+          {{/if}}
         </ResizablePanel>
         {{#if (and APP.experimentalAIEnabled (not @hideAiAssistant))}}
-          {{#if this.isAiAssistantVisible}}
-            <ResizablePanel
-              @defaultLengthFraction={{0.3}}
-              @minLengthPx={{371}}
-              @collapsible={{false}}
-            >
+          <ResizablePanel
+            @defaultLengthFraction={{0.3}}
+            @minLengthPx={{371}}
+            @collapsible={{false}}
+            @isHidden={{not this.isAiAssistantVisible}}
+          >
+            {{#if this.isAiAssistantVisible}}
               <AiAssistantPanel
                 @onClose={{this.toggleChat}}
                 @resizeHandle={{ResizeHandle}}
                 class='ai-assistant-panel'
               />
-            </ResizablePanel>
-          {{else}}
-            <AiAssistantButton
-              class='chat-btn'
-              {{on 'click' this.toggleChat}}
-            />
-          {{/if}}
+            {{/if}}
+          </ResizablePanel>
         {{/if}}
       </ResizablePanelGroup>
     </div>
@@ -242,6 +248,10 @@ export default class SubmodeLayout extends Component<Signature> {
         width: 100%;
       }
 
+      .main-panel {
+        position: relative;
+      }
+
       .ai-assistant-open {
         grid-template-columns: 1.5fr 0.5fr;
       }
@@ -253,6 +263,7 @@ export default class SubmodeLayout extends Component<Signature> {
         margin-right: 0;
         background-color: var(--boxel-ai-purple);
         box-shadow: var(--boxel-deep-box-shadow);
+        z-index: 100;
       }
 
       .ai-assistant-panel {
diff --git a/packages/host/ember-cli-build.js b/packages/host/ember-cli-build.js
index 82dd38c162..01734faaed 100644
--- a/packages/host/ember-cli-build.js
+++ b/packages/host/ember-cli-build.js
@@ -44,6 +44,10 @@ module.exports = function (defaults) {
                 test: /\.woff2$/,
                 type: 'asset',
               },
+              {
+                test: /\.png$/,
+                type: 'asset',
+              },
               {
                 test: /\.webp$/,
                 type: 'asset',