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 0000000000..cef6c30e6c
Binary files /dev/null and b/packages/host/app/components/ai-assistant/ai-assist-button-active-bg.webp differ
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 0000000000..6d534d1acf
Binary files /dev/null and b/packages/host/app/components/ai-assistant/ai-assist-button-active-bg@2x.webp differ
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 0000000000..9580d05658
Binary files /dev/null and b/packages/host/app/components/ai-assistant/ai-assist-button-active-bg@3x.webp differ
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 0000000000..c54c819f3c
Binary files /dev/null and b/packages/host/app/components/ai-assistant/ai-assist-icon-bw.png differ
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 0000000000..f3066b1f2d
Binary files /dev/null and b/packages/host/app/components/ai-assistant/ai-assist-icon-bw@2x.png differ
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 0000000000..ce7a33216b
Binary files /dev/null and b/packages/host/app/components/ai-assistant/ai-assist-icon-bw@3x.png differ
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',