@design.estate/dees-catalog 9.3.0 → 9.4.0

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -1,27 +1,13 @@
+import { customElement, html, DeesElement, property, state, cssManager, css, type TemplateResult } from '@design.estate/dees-element';
 import { demoFunc } from './dees-simple-appdash.demo.js';
-
-import {
-  customElement,
-  html,
-  DeesElement,
-  property,
-  type TemplateResult,
-  cssManager,
-  css,
-  unsafeCSS,
-  type CSSResult,
-  state,
-  domtools,
-} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-overlay/dees-speechbubble/dees-speechbubble.js';
 import type { DeesWorkspaceTerminal } from '../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js';
-import { themeDefaultStyles } from '../../00theme.js';
+import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-simple-appdash': DeesSimpleAppDash;
-  }
-}
+declare global { interface HTMLElementTagNameMap { 'dees-simple-appdash': DeesSimpleAppDash; } }
 
 export interface IView {
   name: string;
@@ -29,15 +15,8 @@ export interface IView {
   element?: DeesElement['constructor']['prototype'];
   subViews?: IView[];
 }
-
 export type TGlobalMessageType = 'info' | 'success' | 'warning' | 'error';
-
-export interface IGlobalMessageAction {
-  name: string;
-  iconName?: string;
-  action: () => void | Promise<void>;
-}
-
+export interface IGlobalMessageAction { name: string; iconName?: string; action: () => void | Promise<void>; }
 export interface IGlobalMessage {
   id: string;
   type: TGlobalMessageType;
@@ -47,878 +26,251 @@ export interface IGlobalMessage {
   actions?: IGlobalMessageAction[];
 }
 
+/** A compact app shell. Views, notices and the terminal share one bounded workspace. */
 @customElement('dees-simple-appdash')
 export class DeesSimpleAppDash extends DeesElement {
-  // STATIC
   public static demo = demoFunc;
   public static demoGroups = ['Simple'];
-  // INSTANCE
-
-  @property()
-  accessor name: string = 'Application Dashboard';
-
-  @property({ type: Array })
-  accessor viewTabs: IView[] = [];
-
-  @property({ type: String })
-  accessor terminalSetupCommand: string = `echo "Terminal ready"`;
-
-  @property({ type: Array })
-  accessor globalMessages: IGlobalMessage[] = [];
-
-  @state()
-  accessor selectedView!: IView;
-
-  @state()
-  accessor _activeMessages: IGlobalMessage[] = [];
-
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      :host {
-        color: var(--dees-color-text-primary);
-        user-select: none;
-        display: block;
-        overflow: hidden;
-        position: relative;
-        height: 100%;
-        width: 100%;
-        /* scroll-fade gradient pairs — neutral shadow tints, stronger in dark
-           (dark defaults, bright override below) */
-        --appdash-fade-strong: rgba(0, 0, 0, 0.4);
-        --appdash-fade-soft: rgba(0, 0, 0, 0.12);
-      }
-
-      :host([gobright]) {
-        --appdash-fade-strong: rgba(0, 0, 0, 0.08);
-        --appdash-fade-soft: rgba(0, 0, 0, 0.03);
-      }
-
-      .maincontainer {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        overflow: hidden;
-      }
-
-      .appbar {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: calc(100% - 24px);
-        width: 240px;
-        background: var(--dees-color-bg-secondary);
-        border-right: 1px solid var(--dees-color-border-default);
-        font-size: var(--dees-font-control-size-sm);
-        font-family: var(--dees-font-family);
-        z-index: 2;
-        display: grid;
-        grid-template-rows: auto 1fr min-content;
-        overflow: hidden;
-      }
-
-      .sidebar-header {
-        padding: var(--dees-spacing-lg);
-        border-bottom: 1px solid var(--dees-color-border-default);
-        display: flex;
-        align-items: center;
-        gap: var(--dees-spacing-md);
-      }
-
-      .header-icon-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 36px;
-        height: 36px;
-        border-radius: var(--dees-radius-lg);
-        corner-shape: var(--dees-corner-shape);
-        background: var(--dees-color-bg-tertiary);
-        box-shadow: var(--dees-shadow-xs);
-      }
-
-      .header-icon-wrapper dees-icon {
-        font-size: 18px;
-        color: var(--dees-color-text-primary);
-      }
-
-      .appName {
-        font-size: var(--dees-font-subhead-size);
-        font-weight: 600;
-        color: var(--dees-color-text-primary);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        letter-spacing: -0.02em;
-      }
-
-      .viewTabs-container {
-        overflow-y: auto;
-        padding: 12px 8px;
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
-      }
-
-      .viewTabs-container::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      .viewTabs-container::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      .viewTabs-container::-webkit-scrollbar-thumb {
-        background: var(--dees-color-scrollbar-thumb);
-        border-radius: 3px;
-      }
-
-      .viewTabs-container::-webkit-scrollbar-thumb:hover {
-        background: var(--dees-color-scrollbar-thumb-hover);
-      }
-
-      .section-label {
-        font-size: var(--dees-font-caption2-size);
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: var(--dees-color-text-secondary);
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
-        margin-bottom: var(--dees-spacing-xs);
-      }
-
-      .viewTabs {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-
-      .viewTab {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px 12px;
-        cursor: default;
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-        color: var(--dees-color-text-secondary);
-        user-select: none;
-        position: relative;
-        border-radius: var(--dees-radius-md);
-        corner-shape: var(--dees-corner-shape);
-      }
-
-      .viewTab:hover {
-        background: var(--dees-color-hover);
-        color: var(--dees-color-text-primary);
-      }
-
-      .viewTab:active {
-        background: var(--dees-color-active);
-        transform: scale(0.99);
-      }
-
-      .viewTab.selected {
-        background: color-mix(in srgb, var(--dees-color-accent-primary) 12%, transparent);
-        color: var(--dees-color-accent-primary);
-        font-weight: 500;
-      }
-
-      .viewTab.selected::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 8px;
-        bottom: 8px;
-        width: 3px;
-        border-radius: 0 2px 2px 0;
-        background: var(--dees-color-accent-primary);
-      }
-
-      .viewTab dees-icon {
-        font-size: 16px;
-        opacity: 0.55;
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-      }
-
-      .viewTab:hover dees-icon {
-        opacity: 0.75;
-      }
-
-      .viewTab.selected dees-icon {
-        opacity: 1;
-        color: var(--dees-color-accent-primary);
-      }
-
-      .viewTab span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .viewTab .chevron {
-        flex: 0 0 auto;
-        font-size: 14px;
-        opacity: 0.5;
-        transform: rotate(-90deg);
-        transition: transform 0.2s ease, opacity 0.15s ease;
-      }
-
-      .viewTab.hasSubs:hover .chevron {
-        opacity: 0.75;
-      }
-
-      .viewTab.hasSubs.groupActive .chevron {
-        transform: rotate(0deg);
-        opacity: 0.9;
-      }
-
-      .subViews {
-        display: grid;
-        grid-template-rows: 0fr;
-        margin-left: 12px;
-        position: relative;
-        transition:
-          grid-template-rows 0.25s var(--dees-ease-standard),
-          margin-top 0.25s var(--dees-ease-standard),
-          margin-bottom 0.25s var(--dees-ease-standard);
-      }
-
-      .subViews.expanded {
-        grid-template-rows: 1fr;
-        margin-top: 2px;
-        margin-bottom: 4px;
-      }
-
-      .subViews::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 4px;
-        bottom: 4px;
-        width: 1px;
-        background: var(--dees-color-border-default);
-        opacity: 0;
-        transition: opacity 0.2s ease;
-      }
-
-      .subViews.expanded::before {
-        opacity: 1;
-      }
-
-      .subViews-inner {
-        min-height: 0;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        padding-left: 12px;
-      }
-
-      .viewTab.sub {
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
-        font-size: var(--dees-font-caption1-size);
-      }
-
-      .viewTab.sub dees-icon {
-        font-size: 14px;
-      }
-
-      .viewTab.sub.selected::before {
-        left: -12px;
-      }
-
-      .appActions {
-        padding: 12px 8px;
-        border-top: 1px solid var(--dees-color-border-default);
-      }
-
-      .action {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px 12px;
-        border-radius: var(--dees-radius-md);
-        corner-shape: var(--dees-corner-shape);
-        cursor: default;
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-        color: var(--dees-color-text-secondary);
-      }
-
-      .action:hover {
-        background: color-mix(in srgb, var(--dees-color-accent-error) 10%, transparent);
-        color: var(--dees-color-text-error);
-      }
-
-      .action dees-icon {
-        font-size: 16px;
-        opacity: 0.6;
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-      }
-
-      .action:hover dees-icon {
-        opacity: 0.9;
-        color: var(--dees-color-text-error);
-      }
-
-      .appcontent {
-        z-index: 1;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        height: calc(100% - 24px);
-        bottom: 24px;
-        width: calc(100% - 240px);
-        overflow: auto;
-        scrollbar-gutter: stable;
-        background: var(--dees-color-bg-canvas);
-        overscroll-behavior: contain;
-      }
-
-      .appcontent::before {
-        content: '';
-        position: sticky;
-        top: 0;
-        left: 0;
-        right: 0;
-        display: block;
-        height: 8px;
-        margin-bottom: -8px;
-        z-index: 10;
-        pointer-events: none;
-        background: linear-gradient(
-          to bottom,
-          var(--appdash-fade-strong),
-          var(--appdash-fade-soft),
-          transparent
-        );
-      }
-
-      .controlbar::before {
-        content: '';
-        position: absolute;
-        top: -8px;
-        left: 240px;
-        right: 0;
-        height: 8px;
-        pointer-events: none;
-        background: linear-gradient(
-          to top,
-          var(--appdash-fade-strong),
-          var(--appdash-fade-soft),
-          transparent
-        );
-      }
-
-      .controlbar {
-        color: var(--dees-color-text-muted);
-        position: absolute;
-        bottom: 0px;
-        left: 0px;
-        width: 100%;
-        height: 24px;
-        background: var(--dees-color-bg-tertiary);
-        border-top: 1px solid var(--dees-color-border-default);
-        z-index: 11;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        flex-direction: row;
-        font-size: var(--dees-font-caption2-size);
-        font-weight: 500;
-        letter-spacing: 0.01em;
-      }
-
-      .control {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 0 12px;
-        height: 100%;
-        white-space: nowrap;
-        cursor: default;
-        color: var(--dees-color-text-muted);
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-        border-left: 1px solid var(--dees-color-border-strong);
-
-      }
-
-      .control:first-child {
-        border-left: none;
-      }
-
-      .control:hover {
-        background: var(--dees-color-hover);
-        color: var(--dees-color-text-primary);
-      }
-
-      .control dees-icon {
-        font-size: 13px;
-      }
-
-      .control.status-connected dees-icon {
-        color: var(--dees-color-text-success);
-      }
-
-      .control.status-terminal dees-icon {
-        color: var(--dees-color-text-warning);
-      }
-
-      /* Global Message Banners */
-      .messageBannerArea {
-        position: absolute;
-        top: 0;
-        left: 240px;
-        right: 0;
-        z-index: 3;
-        display: flex;
-        flex-direction: column;
-        transition: height 0.25s var(--dees-ease-standard);
-      }
-
-      .messageBanner {
-        display: flex;
-        align-items: center;
-        gap: var(--dees-spacing-md);
-        padding: 10px var(--dees-spacing-lg);
-        font-size: var(--dees-font-footnote-size);
-        font-family: var(--dees-font-family);
-        font-weight: 500;
-        border-bottom: 1px solid var(--dees-color-border-default);
-        animation: bannerSlideDown 0.25s var(--dees-ease-standard) forwards;
-      }
-
-      .messageBanner.dismissing {
-        animation: bannerSlideUp 0.2s var(--dees-ease-standard) forwards;
-      }
-
-      @keyframes bannerSlideDown {
-        from {
-          opacity: 0;
-          transform: translateY(-100%);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      @keyframes bannerSlideUp {
-        from {
-          opacity: 1;
-          transform: translateY(0);
-        }
-        to {
-          opacity: 0;
-          transform: translateY(-100%);
-        }
-      }
-
-      .messageBanner dees-icon {
-        font-size: 16px;
-        flex-shrink: 0;
-      }
-
-      .messageBanner-text {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .messageBanner-actions {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        flex-shrink: 0;
-      }
-
-      .messageBanner-action {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: var(--dees-spacing-xs) var(--dees-spacing-md);
-        border-radius: var(--dees-radius-sm);
-        corner-shape: var(--dees-corner-shape);
-        cursor: default;
-        font-size: var(--dees-font-caption1-size);
-        font-weight: 600;
-        letter-spacing: 0.01em;
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-        white-space: nowrap;
-        background: var(--dees-color-pressed);
-        color: inherit;
-      }
-
-      .messageBanner-action:hover {
-        background: color-mix(in srgb, var(--dees-color-text-primary) 15%, transparent);
-      }
-
-      .messageBanner-action:active {
-        transform: scale(0.97);
-      }
-
-      .messageBanner-action dees-icon {
-        font-size: 13px;
-      }
-
-      .messageBanner-dismiss {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        border-radius: var(--dees-radius-sm);
-        corner-shape: var(--dees-corner-shape);
-        cursor: default;
-        opacity: 0.5;
-        transition: all var(--dees-transition-fast) var(--dees-ease-standard);
-      }
-
-      .messageBanner-dismiss:hover {
-        opacity: 1;
-        background: var(--dees-color-pressed);
-      }
-
-      /* Message type: info */
-      .messageBanner-info {
-        background: color-mix(in srgb, var(--dees-color-accent-primary) 12%, transparent);
-        color: var(--dees-color-accent-primary);
-        border-left: 3px solid var(--dees-color-accent-primary);
-      }
-      .messageBanner-info dees-icon {
-        color: var(--dees-color-accent-primary);
-      }
-
-      /* Message type: success */
-      .messageBanner-success {
-        background: var(--dees-color-badge-success-bg);
-        color: var(--dees-color-badge-success-fg);
-        border-left: 3px solid var(--dees-color-accent-success);
-      }
-      .messageBanner-success dees-icon {
-        color: var(--dees-color-accent-success);
-      }
-
-      /* Message type: warning */
-      .messageBanner-warning {
-        background: var(--dees-color-badge-warning-bg);
-        color: var(--dees-color-badge-warning-fg);
-        border-left: 3px solid var(--dees-color-accent-warning);
-      }
-      .messageBanner-warning dees-icon {
-        color: var(--dees-color-accent-warning);
-      }
-
-      /* Message type: error */
-      .messageBanner-error {
-        background: var(--dees-color-badge-error-bg);
-        color: var(--dees-color-badge-error-fg);
-        border-left: 3px solid var(--dees-color-accent-error);
-      }
-      .messageBanner-error dees-icon {
-        color: var(--dees-color-accent-error);
-      }
-
-      .messageBanner-dismiss:hover {
-        background: var(--dees-color-pressed);
-      }
+  @property() accessor name = 'Application Dashboard';
+  @property({ type: Array }) accessor viewTabs: IView[] = [];
+  @property() accessor terminalSetupCommand = 'echo "Terminal ready"';
+  /** Consumer-owned runtime used by the embedded terminal. */
+  @property({ type: Object }) accessor executionEnvironment: IExecutionEnvironment | null = null;
+  @property({ type: Array }) accessor globalMessages: IGlobalMessage[] = [];
+  /** Collapse to an icon rail. Narrow containers use the rail automatically. */
+  @property({ type: Boolean }) accessor collapsed = false;
+  @state() accessor selectedView!: IView;
+  @state() accessor _activeMessages: IGlobalMessage[] = [];
+  @state() private accessor compact = false;
+  @state() private accessor terminalOpen = false;
+  public currentTerminal: DeesWorkspaceTerminal | null = null;
+  private currentView?: DeesElement;
+  private terminalRequest = 0;
+
+  constructor() {
+    super();
+    this.registerStartupFunction(async signal => {
+      await this.updateComplete;
+      if (signal.aborted) return;
+      const observer = new ResizeObserver(entries => { this.compact = entries[0].contentRect.width < 640; });
+      observer.observe(this);
+      signal.addEventListener('abort', () => observer.disconnect(), { once: true });
+    });
+  }
 
-      .appcontent {
-        top: var(--banner-area-height, 0px);
-        height: calc(100% - 24px - var(--banner-area-height, 0px));
-      }
-    `,
-  ];
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; color: var(--dees-color-text-primary); font: 13px/1.5 var(--dees-font-family); }
+    * { box-sizing: border-box; }
+    .maincontainer { position: absolute; inset: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 32px; background: var(--dees-color-bg-canvas); }
+    .maincontainer.collapsed { grid-template-columns: 64px minmax(0, 1fr); }
+    .appbar { display: grid; grid-template-rows: 64px minmax(0, 1fr) auto; min-height: 0; background: var(--dees-color-bg-secondary); border-right: 1px solid var(--dees-color-border-subtle); }
+    .sidebar-header { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-width: 0; }
+    .appName { font-size: 15px; font-weight: 600; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .sidebar-header > dees-icon { flex-shrink: 0; }
+    button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; }
+    button:focus-visible { outline: 2px solid var(--dees-color-focus-ring); outline-offset: -2px; }
+    .collapseToggle { margin-left: auto; flex-shrink: 0; width: 28px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: var(--dees-radius-md); color: var(--dees-color-text-secondary); }
+    .viewTabs-container { overflow: auto; min-height: 0; padding: 12px 8px; scrollbar-width: thin; }
+    .section-label { padding: 0 12px 8px; color: var(--dees-color-text-secondary); font-size: 11px; font-weight: 500; }
+    .viewTabs { display: grid; gap: 3px; }
+    .viewTab, .action { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; border-radius: var(--dees-radius-lg); color: var(--dees-color-text-secondary); transition: background 140ms var(--dees-ease-standard), color 140ms var(--dees-ease-standard); }
+    .viewTab dees-icon, .action dees-icon { flex-shrink: 0; }
+    .viewTab span, .action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .viewTab .chevron { margin-left: auto; transform: rotate(-90deg); transition: transform 180ms var(--dees-ease-standard); }
+    .viewTab.groupActive .chevron, .viewTab.selected .chevron { transform: rotate(0); }
+    .viewTab.selected { background: var(--dees-color-nav-selected); color: var(--dees-color-accent-primary); font-weight: 600; }
+    .viewTab.groupActive { color: var(--dees-color-text-primary); }
+    .subViews { display: grid; grid-template-rows: 0fr; margin: 0 0 0 20px; border-left: 1px solid var(--dees-color-border-subtle); transition: grid-template-rows 180ms var(--dees-ease-standard), margin 180ms var(--dees-ease-standard); }
+    .subViews.expanded { grid-template-rows: 1fr; margin-top: 4px; margin-bottom: 8px; }
+    .subViews-inner { display: grid; gap: 3px; min-height: 0; overflow: hidden; padding-left: 8px; opacity: 0; transform: translateY(-4px); transition: opacity 140ms var(--dees-ease-standard), transform 180ms var(--dees-ease-standard); }
+    .subViews.expanded .subViews-inner { opacity: 1; transform: translateY(0); }
+    .viewTab.sub { min-height: 34px; font-size: 12px; }
+    .appActions { padding: 8px; border-top: 1px solid var(--dees-color-border-subtle); }
+    .workspace { display: grid; grid-template-rows: 64px auto minmax(0, 1fr); min-width: 0; min-height: 0; }
+    .workspaceHeader { display: flex; align-items: center; gap: 8px; padding: 0 24px; border-bottom: 1px solid var(--dees-color-border-subtle); min-width: 0; font-weight: 600; }
+    .workspaceHeader span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .workspaceHeader .parent { color: var(--dees-color-text-secondary); font-weight: 400; }
+    .contentArea { min-height: 0; min-width: 0; position: relative; display: grid; }
+    .appcontent { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; overscroll-behavior: contain; }
+    .appcontent[inert] { visibility: hidden; }
+    .terminalLayer { position: absolute; inset: 0; }
+    .terminalLayer[hidden] { display: none; }
+    .terminalLayer > dees-workspace-terminal { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+    .messageBannerArea { max-height: 192px; overflow: auto; }
+    .messageBanner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; border-bottom: 1px solid var(--dees-color-border-subtle); background: var(--dees-color-bg-primary); }
+    .messageIcon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--dees-radius-md); background: var(--message-bg); color: var(--message-fg); }
+    .messageBanner-info { --message-bg: var(--dees-color-nav-selected); --message-fg: var(--dees-color-link); }
+    .messageBanner-success { --message-bg: var(--dees-color-badge-success-bg); --message-fg: var(--dees-color-badge-success-fg); }
+    .messageBanner-warning { --message-bg: var(--dees-color-badge-warning-bg); --message-fg: var(--dees-color-badge-warning-fg); }
+    .messageBanner-error { --message-bg: var(--dees-color-badge-error-bg); --message-fg: var(--dees-color-badge-error-fg); }
+    .messageBanner-text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
+    .messageBanner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+    .messageBanner-dismiss { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: var(--dees-radius-md); color: var(--dees-color-text-secondary); }
+    .controlbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--dees-color-border-subtle); background: var(--dees-color-bg-secondary); font-size: 11px; color: var(--dees-color-text-secondary); }
+    .control { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; }
+    .status-terminal { border-left: 1px solid var(--dees-color-border-subtle); }
+    .status-terminal[aria-pressed='true'] { color: var(--dees-color-accent-primary); background: var(--dees-color-nav-selected); }
+    .collapsed .sidebar-header { justify-content: center; padding: 0; }
+    .collapsed .sidebar-header > dees-icon, .collapsed .appName, .collapsed .section-label, .collapsed .viewTab span, .collapsed .viewTab .chevron, .collapsed .action span { display: none; }
+    .collapsed .collapseToggle { margin: 0; width: 40px; height: 38px; }
+    .collapsed .viewTab, .collapsed .action { justify-content: center; padding: 8px 0; }
+    .collapsed .subViews { margin-left: 0; padding: 0; border: 0; }
+    .collapsed .subViews-inner { padding-left: 0; }
+    .collapsed .sub { color: var(--dees-color-text-secondary); }
+    .collapsed .sub.selected { color: var(--dees-color-accent-primary); }
+    /* The content column resizes once; only sidebar contents animate during a rail toggle. */
+    .maincontainer:not(.collapsed) .viewTab span, .maincontainer:not(.collapsed) .appName, .maincontainer:not(.collapsed) .action span { animation: labelReveal 160ms var(--dees-ease-standard); }
+    .collapsed .viewTab > dees-icon:not(.chevron), .collapsed .action > dees-icon { animation: railSettle 160ms var(--dees-ease-standard); }
+    @keyframes labelReveal { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
+    @keyframes railSettle { from { transform: translateX(-4px); } to { transform: translateX(0); } }
+    @media (hover: hover) { button:hover:not(.selected) { background: var(--dees-color-hover); } .action:hover { color: var(--dees-color-text-error); } }
+    @media (pointer: coarse) { .viewTab, .viewTab.sub, .action, .collapseToggle, .messageBanner-dismiss { min-height: 44px; } .maincontainer { grid-template-rows: minmax(0, 1fr) 44px; } }
+    @media (prefers-reduced-motion: reduce) { .maincontainer, .viewTab, .action, .chevron, .subViews, .subViews-inner { transition: none; } .maincontainer * { animation: none !important; } }
+  `];
+
+  private get rail(): boolean { return this.collapsed || this.compact; }
+  private icon(name: string): string { return name.includes(':') ? name : `lucide:${name}`; }
+  private isGroupActive(view: IView): boolean { return view === this.selectedView || !!view.subViews?.includes(this.selectedView); }
+
+  private renderView(view: IView, sub = false): TemplateResult {
+    const selected = this.selectedView === view;
+    const expanded = this.isGroupActive(view);
+    return html`<button type="button" class="viewTab ${sub ? 'sub' : ''} ${selected ? 'selected' : ''} ${expanded && !selected ? 'groupActive' : ''}"
+      aria-label=${view.name} aria-current=${selected ? 'page' : 'false'}
+      @keydown=${this.handleNavigationKey} @click=${() => this.loadView(view)}>
+      <dees-icon .icon=${this.icon(view.iconName || (sub ? 'dot' : 'file'))} iconSize="17"></dees-icon><span>${view.name}</span>
+      ${view.subViews?.length ? html`<dees-icon class="chevron" icon="lucide:chevronDown" iconSize="12"></dees-icon>` : ''}
+    </button><dees-speechbubble hint .disabled=${!this.rail} .text=${view.name}></dees-speechbubble>`;
+  }
 
   public render(): TemplateResult {
-    return html`
-      <div class="maincontainer">
-        <div class="appbar">
-          <div class="sidebar-header">
-            <div class="header-icon-wrapper">
-              <dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
-            </div>
-            <div class="appName">${this.name}</div>
-          </div>
-          <div class="viewTabs-container">
-            <div class="section-label">Navigation</div>
-            <div class="viewTabs">
-              ${this.viewTabs.map((view) => {
-                const hasSubs = !!view.subViews?.length;
-                const groupActive = hasSubs && this.isGroupActive(view);
-                return html`
-                  <div
-                    class="viewTab ${this.selectedView === view ? 'selected' : ''} ${hasSubs ? 'hasSubs' : ''} ${groupActive ? 'groupActive' : ''}"
-                    @click=${() => this.loadView(view)}
-                  >
-                    ${view.iconName ? html`
-                      <dees-icon .icon="${view.iconName.includes(':') ? view.iconName : `lucide:${view.iconName}`}"></dees-icon>
-                    ` : html`
-                      <dees-icon .icon="${'lucide:file'}"></dees-icon>
-                    `}
-                    <span>${view.name}</span>
-                    ${hasSubs ? html`
-                      <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
-                    ` : ''}
-                  </div>
-                  ${hasSubs ? html`
-                    <div
-                      class="subViews ${groupActive ? 'expanded' : ''}"
-                      ?inert=${!groupActive}
-                    >
-                      <div class="subViews-inner">
-                        ${view.subViews!.map(
-                          (sub) => html`
-                            <div
-                              class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
-                              @click=${(e: Event) => {
-                                e.stopPropagation();
-                                this.loadView(sub);
-                              }}
-                            >
-                              ${sub.iconName ? html`
-                                <dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
-                              ` : html`
-                                <dees-icon .icon="${'lucide:dot'}"></dees-icon>
-                              `}
-                              <span>${sub.name}</span>
-                            </div>
-                          `
-                        )}
-                      </div>
-                    </div>
-                  ` : ''}
-                `;
-              })}
-            </div>
-          </div>
-          <div class="appActions">
-            <div class="action" @click=${() => {
-              this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
-            }}>
-              <dees-icon .icon="${'lucide:logOut'}"></dees-icon>
-              <span>Sign out</span>
-            </div>
-          </div>
-        </div>
-        ${this._activeMessages.length > 0 ? html`
-        <div class="messageBannerArea">
-          ${this._activeMessages.map(msg => html`
-            <div
-              class="messageBanner messageBanner-${msg.type}"
-              data-message-id="${msg.id}"
-            >
-              <dees-icon .icon="${this.getMessageIcon(msg)}"></dees-icon>
-              <span class="messageBanner-text">${msg.message}</span>
-              ${msg.actions?.length ? html`
-                <div class="messageBanner-actions">
-                  ${msg.actions.map(a => html`
-                    <div class="messageBanner-action" @click=${() => a.action()}>
-                      ${a.iconName ? html`<dees-icon .icon="${a.iconName.includes(':') ? a.iconName : `lucide:${a.iconName}`}"></dees-icon>` : ''}
-                      <span>${a.name}</span>
-                    </div>
-                  `)}
-                </div>
-              ` : ''}
-              ${msg.dismissible !== false ? html`
-                <div class="messageBanner-dismiss" @click=${() => this.removeMessage(msg.id)}>
-                  <dees-icon .icon="${'lucide:x'}"></dees-icon>
-                </div>
-              ` : ''}
-            </div>
-          `)}
+    const parent = this.viewTabs.find(view => view.subViews?.includes(this.selectedView));
+    return html`<div class="maincontainer ${this.rail ? 'collapsed' : ''}">
+      <aside class="appbar" aria-label=${this.name}>
+        <div class="sidebar-header"><dees-icon icon="lucide:layers" iconSize="24"></dees-icon><div class="appName">${this.name}</div>
+          <button type="button" class="collapseToggle" aria-label=${this.compact ? 'Compact navigation' : this.rail ? 'Expand navigation' : 'Collapse navigation'}
+            ?disabled=${this.compact} @click=${() => { this.collapsed = !this.collapsed; }}>
+            <dees-icon .icon=${this.rail ? 'lucide:panelLeftOpen' : 'lucide:panelLeftClose'} iconSize="17"></dees-icon>
+          </button>
         </div>
-      ` : ''}
-        <div class="appcontent">
-          <!-- Content goes here -->
+        <nav class="viewTabs-container" aria-label="App navigation"><div class="section-label">Workspace</div><div class="viewTabs">
+          ${this.viewTabs.map(view => html`<div class="viewGroup">${this.renderView(view)}${view.subViews?.length ? html`<div class="subViews ${this.isGroupActive(view) ? 'expanded' : ''}" ?inert=${!this.isGroupActive(view)}>
+            <div class="subViews-inner">${view.subViews.map(sub => this.renderView(sub, true))}</div></div>` : ''}</div>`)}
+        </div></nav>
+        <div class="appActions"><button type="button" class="action" aria-label="Sign out" @click=${() => this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }))}>
+          <dees-icon icon="lucide:logOut" iconSize="17"></dees-icon><span>Sign out</span>
+        </button><dees-speechbubble hint .disabled=${!this.rail} text="Sign out"></dees-speechbubble></div>
+      </aside>
+      <section class="workspace">
+        <header class="workspaceHeader">${parent ? html`<span class="parent">${parent.name}</span><dees-icon icon="lucide:chevronRight" iconSize="12"></dees-icon>` : ''}<span>${this.selectedView?.name || this.name}</span></header>
+        <div class="messageBannerArea" aria-live="polite">
+          ${this._activeMessages.map(message => html`<div class="messageBanner messageBanner-${message.type}" data-message-id=${message.id}>
+            <span class="messageIcon"><dees-icon .icon=${this.getMessageIcon(message)} iconSize="16"></dees-icon></span>
+            <span class="messageBanner-text">${message.message}</span>
+            ${message.actions?.length ? html`<div class="messageBanner-actions">${message.actions.map(action => html`<dees-button size="sm" type="outline" .text=${action.name} .icon=${action.iconName ? this.icon(action.iconName) : ''} @clicked=${() => action.action()}></dees-button>`)}</div>` : ''}
+            ${message.dismissible !== false ? html`<button type="button" class="messageBanner-dismiss" aria-label=${`Dismiss: ${message.message}`} @click=${() => this.removeMessage(message.id)}><dees-icon icon="lucide:x" iconSize="14"></dees-icon></button>` : ''}
+          </div>`)}
         </div>
-        <div class="controlbar">
-          <div class="control status-connected">
-            <dees-icon .icon="${'lucide:wifi'}"></dees-icon>
-            <span>Connected</span>
-          </div>
-          <div class="control status-terminal" @click=${this.launchTerminal}>
-            <dees-icon .icon="${'lucide:terminal'}"></dees-icon>
-            <span>Terminal</span>
-          </div>
-        </div>
-      </div>
-    `;
+        <div class="contentArea"><div class="appcontent" ?inert=${this.terminalOpen}></div><div class="terminalLayer" ?hidden=${!this.terminalOpen}></div></div>
+      </section>
+      <footer class="controlbar"><span class="control status-connected"><dees-icon icon="lucide:wifi" iconSize="12"></dees-icon>Connected</span>
+        <button type="button" class="control status-terminal" aria-pressed=${String(this.terminalOpen)} @click=${this.launchTerminal}><dees-icon icon="lucide:terminal" iconSize="13"></dees-icon>Terminal</button>
+      </footer>
+    </div>`;
   }
 
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
-    const domtools = await this.domtoolsPromise;
-    super.firstUpdated(_changedProperties);
-    if (this.viewTabs && this.viewTabs.length > 0) {
-      const viewToLoad = this.selectedView || this.viewTabs[0];
-      await this.loadView(viewToLoad);
-    }
+  private handleNavigationKey(event: KeyboardEvent): void {
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    event.preventDefault();
+    const buttons = [...this.shadowRoot!.querySelectorAll<HTMLButtonElement>('.viewTab')].filter(button => !button.closest('[inert]'));
+    const index = buttons.indexOf(event.currentTarget as HTMLButtonElement);
+    const next = event.key === 'Home' ? 0 : event.key === 'End' ? buttons.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + buttons.length) % buttons.length;
+    buttons[next]?.focus();
   }
 
-  public willUpdate(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('globalMessages')) {
-      // Sync globalMessages property into _activeMessages
-      // Keep any messages added via addMessage() that aren't in globalMessages
-      const propertyIds = new Set(this.globalMessages.map(m => m.id));
-      const existingIds = new Set(this._activeMessages.map(m => m.id));
-
-      // Add new messages from property that aren't already active
-      const newMessages = this.globalMessages.filter(m => !existingIds.has(m.id));
-
-      // Keep messages added via API (those not in globalMessages are kept as-is)
-      // Remove messages that were in the previous globalMessages but are no longer
-      const previousGlobalMessages = (changedProperties.get('globalMessages') as IGlobalMessage[]) || [];
-      const previousIds = new Set(previousGlobalMessages.map(m => m.id));
-      const removedIds = new Set([...previousIds].filter(id => !propertyIds.has(id)));
-
-      this._activeMessages = [
-        ...this._activeMessages.filter(m => !removedIds.has(m.id)),
-        ...newMessages,
-      ];
+  public willUpdate(changes: Map<string, unknown>): void {
+    if (changes.has('globalMessages')) {
+      const previousIds = new Set(((changes.get('globalMessages') as IGlobalMessage[]) || []).map(message => message.id));
+      const incoming = new Map(this.globalMessages.map(message => [message.id, message]));
+      this._activeMessages = [...this._activeMessages.filter(message => !previousIds.has(message.id) && !incoming.has(message.id)), ...incoming.values()];
     }
   }
 
-  public updated(changedProperties: Map<string, unknown>) {
-    super.updated(changedProperties);
-    this.updateBannerOffset();
-  }
-
-  private updateBannerOffset() {
-    requestAnimationFrame(() => {
-      const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
-      const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
-      const height = bannerArea ? bannerArea.offsetHeight : 0;
-      maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
-    });
+  public updated(changes: Map<string, unknown>): void {
+    super.updated(changes);
+    if (changes.has('viewTabs')) {
+      const views = this.viewTabs.flatMap(view => [view, ...(view.subViews || [])]);
+      if (!views.includes(this.selectedView)) {
+        this.currentView?.remove();
+        this.currentView = undefined;
+        this.selectedView = undefined!;
+      }
+      if (!this.currentView && this.viewTabs.length) void this.loadView(this.selectedView || this.viewTabs[0]);
+    }
   }
 
-  private getMessageIcon(msg: IGlobalMessage): string {
-    if (msg.icon) return msg.icon;
-    const defaults: Record<TGlobalMessageType, string> = {
-      info: 'lucide:info',
-      success: 'lucide:circleCheck',
-      warning: 'lucide:triangleAlert',
-      error: 'lucide:circleX',
-    };
-    return defaults[msg.type];
+  private getMessageIcon(message: IGlobalMessage): string {
+    const icons: Record<TGlobalMessageType, string> = { info: 'info', success: 'circleCheck', warning: 'triangleAlert', error: 'circleX' };
+    return this.icon(message.icon || icons[message.type]);
   }
-
   public addMessage(message: Omit<IGlobalMessage, 'id'> & { id?: string }): string {
-    const id = message.id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const fullMessage: IGlobalMessage = {
-      dismissible: true,
-      ...message,
-      id,
-    };
-    this._activeMessages = [...this._activeMessages, fullMessage];
+    const id = message.id || `msg-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+    const next = { dismissible: true, ...message, id };
+    this._activeMessages = this._activeMessages.some(entry => entry.id === id)
+      ? this._activeMessages.map(entry => entry.id === id ? next : entry) : [...this._activeMessages, next];
     return id;
   }
-
   public removeMessage(id: string): void {
-    const bannerEl = this.shadowRoot?.querySelector(`[data-message-id="${id}"]`) as HTMLElement;
-    if (bannerEl) {
-      bannerEl.classList.add('dismissing');
-      bannerEl.addEventListener('animationend', () => {
-        this._activeMessages = this._activeMessages.filter(m => m.id !== id);
-        this.dispatchEvent(new CustomEvent('message-dismiss', {
-          detail: { id },
-          bubbles: true,
-          composed: true,
-        }));
-      }, { once: true });
-    } else {
-      this._activeMessages = this._activeMessages.filter(m => m.id !== id);
-    }
-  }
-
-  public clearMessages(): void {
-    this._activeMessages = [];
+    if (!this._activeMessages.some(message => message.id === id)) return;
+    this._activeMessages = this._activeMessages.filter(message => message.id !== id);
+    this.dispatchEvent(new CustomEvent('message-dismiss', { detail: { id }, bubbles: true, composed: true }));
   }
-  
-  public currentTerminal: DeesWorkspaceTerminal | null = null;
-  public async launchTerminal() {
-    const domtools = await this.domtoolsPromise;
-    if (this.currentTerminal) {
-      // If terminal already exists, remove it
-      await this.closeTerminal();
-      return;
-    }
-
-    const maincontainer = this.shadowRoot!.querySelector('.maincontainer')! as HTMLElement;
-    const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
-    const terminal = new DeesWorkspaceTerminal();
-    terminal.setupCommand = this.terminalSetupCommand;
-    this.currentTerminal = terminal;
-    maincontainer.appendChild(terminal);
-    terminal.style.position = 'absolute';
-    terminal.style.zIndex = '10';
-    terminal.style.top = 'var(--banner-area-height, 0px)';
-    terminal.style.left = '240px';
-    terminal.style.right = '0px';
-    terminal.style.height = 'auto';
-    terminal.style.bottom = '24px';
-    terminal.style.opacity = '0';
-    terminal.style.transform = 'translateY(8px) scale(0.99)';
-    terminal.style.transition = 'all 0.25s var(--dees-ease-standard)';
-    terminal.style.boxShadow = 'var(--dees-shadow-xl), 0 0 0 1px var(--dees-color-border-subtle)';
-    
-    // Add close button to terminal
-    terminal.addEventListener('close', () => this.closeTerminal());
-    
-    await domtools.convenience.smartdelay.delayFor(0);
-    terminal.style.opacity = '1';
-    terminal.style.transform = 'translateY(0) scale(1)';
-    return terminal;
-  }
-  
-  private async closeTerminal() {
-    const domtools = await this.domtoolsPromise;
-    if (this.currentTerminal) {
-      this.currentTerminal.style.opacity = '0';
-      this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
-      await domtools.convenience.smartdelay.delayFor(250);
-      this.currentTerminal.remove();
-      this.currentTerminal = null;
+  public clearMessages(): void { this._activeMessages = []; }
+
+  public async launchTerminal(): Promise<DeesWorkspaceTerminal | undefined> {
+    if (this.terminalOpen) { this.closeTerminal(); return; }
+    this.terminalOpen = true;
+    const request = ++this.terminalRequest;
+    try {
+      const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
+      await this.updateComplete;
+      if (!this.isConnected || request !== this.terminalRequest) return;
+      const terminal = new DeesWorkspaceTerminal();
+      terminal.executionEnvironment = this.executionEnvironment;
+      terminal.setupCommand = this.terminalSetupCommand;
+      this.currentTerminal = terminal;
+      terminal.addEventListener('close', () => { if (terminal === this.currentTerminal) this.closeTerminal(); });
+      this.shadowRoot!.querySelector('.terminalLayer')!.appendChild(terminal);
+      return terminal;
+    } catch (error) {
+      if (request === this.terminalRequest) this.closeTerminal();
+      throw error;
     }
   }
-
-
-  private isGroupActive(view: IView): boolean {
-    if (this.selectedView === view) return true;
-    return view.subViews?.some((sv) => sv === this.selectedView) ?? false;
+  private closeTerminal(): void {
+    ++this.terminalRequest;
+    this.currentTerminal?.remove();
+    this.currentTerminal = null;
+    this.terminalOpen = false;
   }
+  public async disconnectedCallback(): Promise<void> { this.closeTerminal(); await super.disconnectedCallback(); }
 
-  private currentView!: DeesElement;
-  public async loadView(viewArg: IView) {
-    // Group-only parent: resolve to first sub view with an element
-    if (!viewArg.element && viewArg.subViews?.length) {
-      const firstNavigable = viewArg.subViews.find((sv) => sv.element);
-      if (firstNavigable) {
-        return this.loadView(firstNavigable);
-      }
-      return; // nothing navigable — ignore click
-    }
-    if (!viewArg.element) return; // safety: no element and no subs → no-op
-
-    const appcontent = this.shadowRoot!.querySelector('.appcontent')!;
-    const view = new viewArg.element();
-    if (this.currentView) {
-      this.currentView.remove();
+  public async loadView(view: IView): Promise<void> {
+    if (!view.element && view.subViews?.length) {
+      const child = view.subViews.find(candidate => candidate.element);
+      if (child) await this.loadView(child);
+      return;
     }
-    appcontent.appendChild(view);
-    this.currentView = view;
-    this.selectedView = viewArg;
-
-    // Emit view-select event
-    this.dispatchEvent(new CustomEvent('view-select', {
-      detail: { view: viewArg },
-      bubbles: true,
-      composed: true
-    }));
+    if (!view.element || (view === this.selectedView && this.currentView)) return;
+    const content = this.shadowRoot?.querySelector('.appcontent');
+    if (!content) return;
+    const element = new view.element();
+    this.closeTerminal();
+    this.currentView?.remove();
+    content.appendChild(element);
+    content.scrollTop = 0;
+    this.currentView = element;
+    this.selectedView = view;
+    this.dispatchEvent(new CustomEvent('view-select', { detail: { view }, bubbles: true, composed: true }));
   }
 }