@design.estate/dees-catalog 5.0.0 → 6.1.0

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts

@@ -45,7 +45,7 @@ declare global {
  * pinned permission queue, status line, and composer. Owns no business
  * logic — consumers feed `.messages`/`.permissions`/`.status` (and stream
  * through `applyDelta()`), and listen for the bubbling harness-* events
- * from the children plus `harness-toggle-sidebar` from the toolbar.
+ * from the children.
  */
 @customElement('dees-harness-chat')
 export class DeesHarnessChat extends DeesElement {
@@ -109,6 +109,14 @@ export class DeesHarnessChat extends DeesElement {
   @state()
   private accessor sessionSidebarOpen: boolean = false;
 
+  @state()
+  private accessor desktopSessionSidebarVisible: boolean = true;
+
+  @state()
+  private accessor narrowSessionLayout: boolean = false;
+
+  private sessionLayoutResizeObserver: ResizeObserver | undefined;
+
   @property()
   accessor heading: string = '';
 
@@ -201,21 +209,32 @@ export class DeesHarnessChat extends DeesElement {
       .sessionPanel {
         flex: 0 0 232px;
         min-width: 0;
-        overflow-y: auto;
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0;
         border-left: 1px solid var(--dees-color-border-subtle);
         background: var(--dees-color-bg-secondary);
       }
 
+      .sessionPanel.desktopHidden {
+        display: none;
+      }
+
+      .sessionPanel > dees-harness-session-sidebar {
+        flex: 1;
+        min-height: 0;
+      }
+
       .sessionPanelClose,
       .sessionPanelToggle,
       .sessionPanelBackdrop {
         display: none;
       }
 
-      .sessionPanelToggle {
+      .sessionPanelToggle,
+      .toolbarSessionPanelToggle {
         box-sizing: border-box;
         width: var(--dees-control-height-lg);
         height: var(--dees-control-height-lg);
@@ -230,11 +249,17 @@ export class DeesHarnessChat extends DeesElement {
         cursor: pointer;
       }
 
-      .sessionPanelToggle:hover {
+      .toolbarSessionPanelToggle {
+        display: flex;
+      }
+
+      .sessionPanelToggle:hover,
+      .toolbarSessionPanelToggle:hover {
         background: var(--dees-color-badge-default-bg);
       }
 
-      .sessionPanelToggle:focus-visible {
+      .sessionPanelToggle:focus-visible,
+      .toolbarSessionPanelToggle:focus-visible {
         outline: 2px solid var(--dees-color-accent-primary);
         outline-offset: 2px;
       }
@@ -245,9 +270,10 @@ export class DeesHarnessChat extends DeesElement {
         .sessionPanel {
           position: absolute;
           inset: 0 0 0 auto;
+          display: flex;
           width: min(320px, calc(100% - 36px));
           max-width: none;
-          padding-top: 42px;
+          padding: 42px 0 0;
           border-left-color: var(--dees-color-border-default);
           box-shadow: var(--dees-shadow-lg);
           visibility: hidden;
@@ -257,6 +283,10 @@ export class DeesHarnessChat extends DeesElement {
             visibility 0s linear var(--dees-transition-default);
         }
 
+        .sessionPanel.desktopHidden {
+          display: flex;
+        }
+
         .sessionPanel.open {
           visibility: visible;
           transform: translateX(0);
@@ -412,6 +442,32 @@ export class DeesHarnessChat extends DeesElement {
     this.listElement?.scrollToBottom(force);
   }
 
+  public async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    await this.updateComplete;
+    if (!this.isConnected) return;
+    this.syncSessionLayout(this.getBoundingClientRect().width);
+    this.sessionLayoutResizeObserver?.disconnect();
+    this.sessionLayoutResizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) this.syncSessionLayout(entry.contentRect.width);
+    });
+    this.sessionLayoutResizeObserver.observe(this);
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    this.sessionLayoutResizeObserver?.disconnect();
+    this.sessionLayoutResizeObserver = undefined;
+    await super.disconnectedCallback();
+  }
+
+  private syncSessionLayout(widthArg: number): void {
+    const narrow = widthArg <= 680;
+    if (narrow === this.narrowSessionLayout) return;
+    this.narrowSessionLayout = narrow;
+    this.sessionSidebarOpen = false;
+  }
+
   public get effectiveTodos(): IHarnessTodoItem[] {
     if (this.todos.length) return this.todos;
     // the newest todo call is the current state — an empty write clears
@@ -446,6 +502,10 @@ export class DeesHarnessChat extends DeesElement {
   }
 
   private readonly toggleSessionSidebar = (): void => {
+    if (!this.narrowSessionLayout) {
+      this.desktopSessionSidebarVisible = !this.desktopSessionSidebarVisible;
+      return;
+    }
     if (this.sessionSidebarOpen) {
       void this.closeSessionSidebar();
       return;
@@ -464,7 +524,9 @@ export class DeesHarnessChat extends DeesElement {
   private async closeSessionSidebar(): Promise<void> {
     this.sessionSidebarOpen = false;
     await this.updateComplete;
-    const toggleButton = this.shadowRoot?.querySelector<HTMLButtonElement>('.sessionPanelToggle');
+    const toggleButton = this.shadowRoot?.querySelector<HTMLButtonElement>(
+      this.showToolbar ? '.toolbarSessionPanelToggle' : '.sessionPanelToggle',
+    );
     toggleButton?.focus();
   }
 
@@ -494,7 +556,7 @@ export class DeesHarnessChat extends DeesElement {
                 </div>
               `
             : ''}
-          ${this.hasSessionSidebar ? html`
+          ${this.hasSessionSidebar && !this.showToolbar ? html`
             <button
               class="sessionPanelToggle"
               type="button"
@@ -520,11 +582,17 @@ export class DeesHarnessChat extends DeesElement {
               ></button>
               <aside
                 id="harness-session-panel"
-                class=${`todosPanel sessionPanel ${this.sessionSidebarOpen ? 'open' : ''}`}
+                class=${`todosPanel sessionPanel ${this.sessionSidebarOpen ? 'open' : ''} ${this.desktopSessionSidebarVisible ? '' : 'desktopHidden'}`}
                 aria-label="Session details"
+                aria-hidden=${String(this.narrowSessionLayout
+                  ? !this.sessionSidebarOpen
+                  : !this.desktopSessionSidebarVisible)}
+                ?inert=${this.narrowSessionLayout
+                  ? !this.sessionSidebarOpen
+                  : !this.desktopSessionSidebarVisible}
                 tabindex="-1"
                 @keydown=${(event: KeyboardEvent) => {
-                  if (event.key !== 'Escape') return;
+                  if (event.key !== 'Escape' || !this.narrowSessionLayout) return;
                   event.preventDefault();
                   event.stopPropagation();
                   void this.closeSessionSidebar();
@@ -597,20 +665,28 @@ export class DeesHarnessChat extends DeesElement {
         </div>
         <div class="toolbarActions">
           <dees-harness-usage compact .usage=${this.usage}></dees-harness-usage>
-          <dees-button
-            size="icon"
-            type="ghost"
-            icon="lucide:PanelLeft"
-            text="Toggle chat sidebar"
-            title="Toggle chat sidebar"
-            @clicked=${() => this.emit('harness-toggle-sidebar')}
-          ></dees-button>
+          ${this.hasSessionSidebar ? html`
+            <button
+              class="toolbarSessionPanelToggle"
+              type="button"
+              aria-label="Toggle session details"
+              title="Toggle session details"
+              aria-expanded=${String(this.narrowSessionLayout
+                ? this.sessionSidebarOpen
+                : this.desktopSessionSidebarVisible)}
+              aria-controls="harness-session-panel"
+              @click=${this.toggleSessionSidebar}
+            >
+              <dees-icon
+                icon=${this.narrowSessionLayout
+                  ? (this.sessionSidebarOpen ? 'lucide:PanelRightClose' : 'lucide:PanelRightOpen')
+                  : (this.desktopSessionSidebarVisible ? 'lucide:PanelRightClose' : 'lucide:PanelRightOpen')}
+                iconSize="16"
+              ></dees-icon>
+            </button>
+          ` : ''}
         </div>
       </div>
     `;
   }
-
-  private emit(name: string): void {
-    this.dispatchEvent(new CustomEvent(name, { detail: {}, bubbles: true, composed: true }));
-  }
 }