From 23532153f71ef38820f54a87688de7571c96436a Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Tue, 13 Jan 2026 17:05:04 +0200
Subject: [PATCH 01/12] feat: enhance AI panel with responsive layout, dynamic
 suggestions, and UI improvements

- Add grayed character limit counter styling
- Add adaptive textarea rows based on window height (HostListener)
- Add responsive layout for screen widths <= 800px
- Rename suggestions to templates with icons and descriptions
- Add dynamic suggestions based on table column names (date, status, price patterns)
- Pass tableColumns input from dashboard to AI panel component

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../dashboard/dashboard.component.html        |   1 +
 .../db-table-ai-panel.component.css           | 284 +++++++++++++++---
 .../db-table-ai-panel.component.html          |  69 +++--
 .../db-table-ai-panel.component.ts            | 115 ++++++-
 4 files changed, 390 insertions(+), 79 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 4990d2469..59dd6db2b 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -113,6 +113,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
             ></app-db-table-row-view>
             <app-db-table-ai-panel *ngIf="isAIpanelOpened"
                 [displayName]="selectedTableDisplayName"
+                [tableColumns]="dataSource?.dataColumns || []"
             ></app-db-table-ai-panel>
         </mat-sidenav-content>
     </mat-sidenav-container>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 6f01a799b..a9b4a3efd 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -47,6 +47,12 @@
     z-index: 0;
 }
 
+@media (width <= 800px) {
+    .ai-panel-sidebar-content {
+        width: 100%;
+    }
+}
+
 .ai-panel-sidebar-content ::ng-deep .ai-message table {
     width: 100%;
     border-collapse: collapse;
@@ -113,6 +119,7 @@
     padding-top: 20px;
     padding-left: 16px;
     padding-right: 16px;
+    flex-shrink: 0;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -131,14 +138,18 @@
 .ai-panel-chat {
     display: flex;
     flex-direction: column;
-    margin-top: auto;
+    flex: 1;
+    justify-content: flex-end;
     padding-left: 16px;
     padding-right: 16px;
+    overflow: hidden;
+    min-height: 0;
 }
 
 .ai-message-chain-box {
     height: calc(100vh - 44px - 252px - 48px);
     overflow-y: auto;
+    margin-bottom: 24px;
 }
 
 .ai-message-chain {
@@ -151,22 +162,33 @@
 
 .user-message {
     align-self: flex-end;
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
+    background-color: #f0f4f8;
     border-radius: 8px;
-    padding: 8px 8px 0;
-    margin: 4px 0;
-    width: 80%;
+    padding: 8px 8px 12px;
+    margin: 4px 0 16px;
+    max-width: 80%;
 }
+
+@media (prefers-color-scheme: dark) {
+    .user-message {
+        background-color: #2d3748;
+    }
+}
+
 .ai-message {
     align-self: flex-start;
-    background-color: var(--color-primaryPalette-100);
-    color: var(--color-primaryPalette-100-contrast);
+    background-color: rgba(168, 85, 247, 0.1);
     border-radius: 8px;
     padding: 8px 8px 0;
     margin: 4px 0;
 }
 
+@media (prefers-color-scheme: dark) {
+    .ai-message {
+        background-color: rgba(168, 85, 247, 0.15);
+    }
+}
+
 .ai-error-message {
     border-radius: 8px;
     padding: 8px 8px 0;
@@ -215,58 +237,230 @@
     margin-bottom: 8px;
 }
 
+.ai-welcome {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 24px;
+    flex-shrink: 0;
+}
+
+.ai-welcome__message {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.ai-welcome__message p {
+    margin: 0;
+    line-height: 1.4;
+}
+
+.ai-welcome__section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.ai-welcome__section-title {
+    margin: 0;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
 @media (prefers-color-scheme: dark) {
-    .suggestions {
-        background-color: #202020;
+    .ai-welcome__section-title {
+        color: rgba(255, 255, 255, 0.5);
     }
 }
 
-.suggestions-title {
-    display: block;
-    color: rgba(0,0,0, 0.54);
-    padding: 16px 16px 0;
+.suggestions-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.suggestion-chip {
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--mat-sidenav-content-background-color);
+    border: 1px solid #d3d3d3;
+    border-radius: 16px;
+    padding: 4px 12px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.suggestion-chip:hover {
+    background-color: var(--color-primaryPalette-50);
 }
 
 @media (prefers-color-scheme: dark) {
-    .suggestions-title {
-        color: rgba(255,255,255, 0.54);
+    .suggestion-chip {
+        border-color: #4a4a4a;
     }
+
+    .suggestion-chip:hover {
+        background-color: rgba(255, 255, 255, 0.08);
+    }
+}
+
+.templates-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 0;
 }
 
-.suggestion-button {
-    height: auto;
-    padding: 8px 16px;
+.template-card {
+    display: flex;
+    align-items: flex-start;
+    width: auto;
+    gap: 8px;
+    background-color: var(--mat-sidenav-content-background-color);
+    border: 1px solid #d3d3d3;
+    border-radius: 6px;
+    padding: 6px 10px;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 
-.suggestion-button ::ng-deep .mdc-list-item__content {
-    text-overflow: initial;
-    /* white-space: wrap; */
-    overflow: initial;
+.template-card:hover {
+    background-color: var(--color-primaryPalette-50);
 }
 
+.template-card__icon {
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
 
-.suggestion-button ::ng-deep .mdc-list-item__primary-text {
-    text-overflow: initial;
-    white-space: wrap;
-    overflow: initial;
+.template-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.template-card__title {
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.87);
+    line-height: 1.3;
+}
+
+.template-card__description {
+    font-size: 11px;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 1.3;
+}
+
+@media (prefers-color-scheme: dark) {
+    .template-card {
+        border-color: #4a4a4a;
+    }
+
+    .template-card:hover {
+        background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    .template-card__icon {
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    .template-card__title {
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .template-card__description {
+        color: rgba(255, 255, 255, 0.5);
+    }
 }
 
 .loading {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 40px;
+    height: 50px;
+    flex-shrink: 0;
+}
+
+.loading-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.loading-dots {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.loading-text {
+    font-size: 13px;
+    color: #9ca3af;
+}
+
+.loading-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #9ca3af;
+    animation: loading-bounce 1.4s ease-in-out infinite;
+}
+
+.loading-dot:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.loading-dot:nth-child(2) {
+    animation-delay: 0.15s;
+}
+
+.loading-dot:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+@keyframes loading-bounce {
+    0%, 60%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-8px);
+    }
 }
 
 .ai-message-form {
     position: relative;
     width: 100%;
+    flex-shrink: 0;
 }
 
 .ai-message-form__textarea {
     width: 100%;
 }
 
+.ai-message-form__textarea ::ng-deep .mat-mdc-form-field-focus-overlay {
+    display: none;
+}
+
+.ai-message-form__textarea ::ng-deep .mdc-text-field--focused .mdc-notched-outline__leading,
+.ai-message-form__textarea ::ng-deep .mdc-text-field--focused .mdc-notched-outline__trailing {
+    border-color: #A855F7 !important;
+    border-width: 2px !important;
+}
+
+.ai-message-form__textarea ::ng-deep .mdc-text-field--focused .mdc-notched-outline__notch {
+    border-color: #A855F7 !important;
+    border-width: 2px 0 !important;
+}
+
 .ai-message-form__textarea ::ng-deep .mat-mdc-text-field-wrapper {
     padding-bottom: 24px !important;
 }
@@ -285,37 +479,35 @@
     width: calc(100% - 4px);
 }
 
-.ai-message-form__button {
-
+.ai-message-form__char-count {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 12px;
 }
 
-.ai-panel-sidebar__message {
-    resize: none;
-    width: 100%;
+@media (prefers-color-scheme: dark) {
+    .ai-message-form__char-count {
+        color: rgba(255, 255, 255, 0.4);
+    }
 }
 
-.ai-placeholder {
-    margin-top:72px;
-    padding-left: 16px;
-    padding-right: 16px;
-    text-align: center;
+.ai-message-form__button {
+    color: #A855F7 !important;
 }
 
-@media (prefers-color-scheme: light) {
-    .ai-placeholder {
-        color: rgba(0, 0, 0, 0.64);
-    }
+.ai-panel-sidebar__message {
+    resize: none;
+    width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-    .ai-placeholder {
-        color: rgba(255, 255, 255, 0.64);
-    }
+.footer {
+    padding-bottom: 16px;
+    flex-shrink: 0;
 }
 
 .footer p {
     color: rgba(0, 0, 0, 0.36) !important;
     text-align: center;
+    margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index 64f23ffc0..71416db13 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -6,17 +6,13 @@
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">
             <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
-            <span>AI insights</span>
+            <span>AI insights for {{displayName}}</span>
         </h2>
         <button mat-icon-button (click)="handleClose()">
             <mat-icon>close</mat-icon>
         </button>
     </div>
 
-    <div *ngIf="messagesChain.length === 0" class="ai-placeholder">
-        Insights from <strong>"{{displayName}}"</strong> table are waiting — type your query to unlock them.
-    </div>
-
     <div class="ai-panel-chat">
         <div *ngIf="messagesChain.length; else suggestions" class="ai-message-chain-box" #chatContainer>
             <div class="ai-message-chain">
@@ -28,33 +24,60 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
         </div>
 
         <ng-template #suggestions>
-            <div class="mat-elevation-z2 suggestions">
-                <span class="suggestions-title">Suggested insights</span>
-                <mat-action-list role="list">
-                    <button mat-list-item *ngFor="let suggestion of aiRequestSuggestions"
-                        class="suggestion-button"
-                        (click)="createThread(suggestion)"
-                        angulartics2On="click"
-                        angularticsAction="AI panel: suggested request is clicked">
-                        {{suggestion}}
-                    </button>
-                </mat-action-list>
-            </div>
+            <div class="ai-welcome">
+                <div class="ai-welcome__message">
+                    <p>Explore patterns, issues, and summaries instantly.</p>
+                </div>
 
+                <div class="ai-welcome__section" *ngIf="aiSuggestions.length">
+                    <p class="ai-welcome__section-title">Suggestions for this table:</p>
+                    <div class="suggestions-container">
+                        <button *ngFor="let suggestion of aiSuggestions"
+                            class="suggestion-chip"
+                            (click)="createThread(suggestion.prompt)"
+                            angulartics2On="click"
+                            angularticsAction="AI panel: suggestion is clicked">
+                            <span>{{suggestion.title}}</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="ai-welcome__section">
+                    <p class="ai-welcome__section-title">Templates:</p>
+                    <div class="templates-container">
+                        <button *ngFor="let template of aiRequestTemplates"
+                            class="template-card"
+                            (click)="createThread(template.prompt)"
+                            angulartics2On="click"
+                            angularticsAction="AI panel: template is clicked">
+                            <mat-icon class="template-card__icon" fontSet="material-icons-outlined">{{template.icon}}</mat-icon>
+                            <div class="template-card__content">
+                                <span class="template-card__title">{{template.title}}</span>
+                                <span class="template-card__description">{{template.description}}</span>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
         </ng-template>
 
-        <div class="loading">
-            <div *ngIf="submitting">
-                loading...
+        <div class="loading" *ngIf="submitting">
+            <div class="loading-content">
+                <span class="loading-text">Generating an answer</span>
+                <div class="loading-dots">
+                    <span class="loading-dot"></span>
+                    <span class="loading-dot"></span>
+                    <span class="loading-dot"></span>
+                </div>
             </div>
         </div>
 
         <form (ngSubmit)="threadID ? sendMessage() : createThread()" class="ai-message-form">
             <mat-form-field class="form-field" appearance="outline" class="ai-message-form__textarea">
-                <mat-label class="ai-message-form__label">What should I analyze?</mat-label>
+                <mat-label class="ai-message-form__label">Ask a question about this table...</mat-label>
                 <textarea matInput name="message"
                     class="ai-panel-sidebar__message"
-                    rows="4"
+                    [rows]="textareaRows"
                     data-testid="user-message"
                     maxlength="255"
                     (keydown)="onKeydown($event)"
@@ -63,7 +86,7 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
             </mat-form-field>
 
             <div class="ai-message-form__footer">
-                <span> {{charactrsNumber}} / 256</span>
+                <span class="ai-message-form__char-count">{{charactrsNumber}} / 256</span>
                 <button mat-icon-button type="submit"
                     class="ai-message-form__button">
                     <mat-icon>send</mat-icon>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
index 638cbf310..b19f5a8eb 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
@@ -1,5 +1,5 @@
 import { Angulartics2, Angulartics2Module } from 'angulartics2';
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
@@ -10,7 +10,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
 
@@ -25,7 +24,6 @@ import { TablesService } from 'src/app/services/tables.service';
     MatIconModule,
     MatFormFieldModule,
     MatInputModule,
-    MatListModule,
     MatButtonModule,
     Angulartics2Module
   ]
@@ -33,6 +31,7 @@ import { TablesService } from 'src/app/services/tables.service';
 export class DbTableAiPanelComponent implements OnInit, OnDestroy {
 
   @Input() public displayName: string;
+  @Input() public tableColumns: string[] = [];
   @ViewChild('chatContainer') private chatContainer!: ElementRef;
 
   public connectionID: string;
@@ -45,14 +44,29 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     type: string;
     text: string
   }[] = [];
-  public aiRequestSuggestions: string[] = [
-    'How many records were created last month?',
-    'Are there any duplicate rows in this table?',
-    // 'Are there any columns with inconsistent data types?',
-    'Which columns have empty values?',
-    'What trends can you predict based on this table?'
-  ]
+  public aiRequestTemplates: { title: string; description: string; icon: string; prompt: string }[] = [
+    {
+      title: 'Summarize this table',
+      description: 'Quick overview of columns, types, and size',
+      icon: 'bar_chart',
+      prompt: 'Summarize this table structure and data'
+    },
+    {
+      title: 'Top values',
+      description: 'See most frequent values per column',
+      icon: 'trending_up',
+      prompt: 'Show top 10 most common values in each column'
+    },
+    {
+      title: 'Missing data',
+      description: 'Find NULLs and empty fields',
+      icon: 'warning',
+      prompt: 'Find records with NULL or empty values'
+    }
+  ];
+  public aiSuggestions: { title: string; prompt: string }[] = [];
   public submitting: boolean = false;
+  public textareaRows: number = 4;
 
   constructor(
     private _connections: ConnectionsService,
@@ -69,6 +83,13 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     this._tableState.aiPanelCast.subscribe((isAIpanelOpened) => {
       this.isAIpanelOpened = isAIpanelOpened;
     });
+
+    this.adjustTextareaRows();
+    this.generateSuggestions();
+  }
+
+  ngOnChanges(): void {
+    this.generateSuggestions();
   }
 
   async ngAfterViewInit() {
@@ -199,4 +220,78 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
   handleClose() {
     this._tableState.handleViewAIpanel();
   }
+
+  @HostListener('window:resize')
+  onWindowResize() {
+    this.adjustTextareaRows();
+  }
+
+  private adjustTextareaRows() {
+    const windowHeight = window.innerHeight;
+
+    if (windowHeight < 500) {
+      this.textareaRows = 1;
+    } else if (windowHeight < 650) {
+      this.textareaRows = 2;
+    } else if (windowHeight < 800) {
+      this.textareaRows = 3;
+    } else if (windowHeight < 950) {
+      this.textareaRows = 4;
+    } else {
+      this.textareaRows = 5;
+    }
+  }
+
+  private generateSuggestions(): void {
+    if (!this.tableColumns || this.tableColumns.length === 0) {
+      this.aiSuggestions = [];
+      return;
+    }
+
+    const suggestions: { title: string; prompt: string }[] = [];
+    const columns = this.tableColumns.slice(0, 5);
+
+    columns.forEach(column => {
+      const columnName = this.formatColumnName(column);
+
+      if (column.toLowerCase().includes('date') || column.toLowerCase().includes('time') || column.toLowerCase().includes('created') || column.toLowerCase().includes('updated')) {
+        suggestions.push({
+          title: `Analyze ${columnName} trends`,
+          prompt: `Analyze trends and patterns in the "${column}" column over time`
+        });
+      } else if (column.toLowerCase().includes('status') || column.toLowerCase().includes('state') || column.toLowerCase().includes('type')) {
+        suggestions.push({
+          title: `${columnName} distribution`,
+          prompt: `Show the distribution of values in the "${column}" column`
+        });
+      } else if (column.toLowerCase().includes('price') || column.toLowerCase().includes('amount') || column.toLowerCase().includes('cost') || column.toLowerCase().includes('total')) {
+        suggestions.push({
+          title: `${columnName} statistics`,
+          prompt: `Calculate statistics (min, max, average, sum) for the "${column}" column`
+        });
+      } else if (column.toLowerCase().includes('email') || column.toLowerCase().includes('name') || column.toLowerCase().includes('user')) {
+        suggestions.push({
+          title: `Unique ${columnName}`,
+          prompt: `How many unique values are in the "${column}" column?`
+        });
+      } else {
+        suggestions.push({
+          title: `Analyze ${columnName}`,
+          prompt: `What are the most common values in the "${column}" column?`
+        });
+      }
+    });
+
+    this.aiSuggestions = suggestions.slice(0, 3);
+  }
+
+  private formatColumnName(column: string): string {
+    return column
+      .replace(/_/g, ' ')
+      .replace(/([A-Z])/g, ' $1')
+      .trim()
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+  }
 }

From 0a4adbf0c8a514a472f399ffce16f5f1c769ef5a Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Tue, 13 Jan 2026 17:18:50 +0200
Subject: [PATCH 02/12] feat: add expand/collapse functionality to AI panel

- Add aiPanelExpandedSubject and aiPanelExpandedCast to TableStateService
- Add toggleAIPanelExpanded() and restoreAIPanelExpandedState() methods
- Persist expanded state in sessionStorage
- Add expand/collapse button with open_in_full/close_fullscreen icons
- Add CSS transitions for smooth expand/collapse animation
- Center content with max-width 800px when expanded
- Panel expands to full width minus 260px for sidebar

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel.component.css           | 58 ++++++++++++++++++-
 .../db-table-ai-panel.component.html          | 16 +++--
 .../db-table-ai-panel.component.ts            |  9 +++
 .../src/app/services/table-state.service.ts   | 25 +++++++-
 4 files changed, 101 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index a9b4a3efd..afe98ac93 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -21,6 +21,10 @@
     width: clamp(200px, 22vw, 400px);
 }
 
+.ai-panel-sidebar_open.ai-panel-sidebar_expanded {
+    width: calc(100vw - 260px);
+}
+
 @media (prefers-color-scheme: dark) {
     .ai-panel-sidebar_open {
         background-color: #202020;
@@ -36,7 +40,7 @@
 .ai-panel-sidebar-content {
     position: fixed;
     top: 0;
-    left: calc(100% - clamp(200px, 22vw, 400px));
+    left: 100%;
     display: flex;
     flex-direction: column;
     background-color: var(--mat-sidenav-content-background-color);
@@ -45,12 +49,34 @@
     height: 100vh;
     width: clamp(200px, 22vw, 400px);
     z-index: 0;
+    transition: width 0.3s ease, left 0.3s ease;
+    visibility: hidden;
+}
+
+.ai-panel-sidebar-content_open {
+    left: calc(100% - clamp(200px, 22vw, 400px));
+    visibility: visible;
+}
+
+.ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
+    left: 260px;
+    width: calc(100vw - 260px);
+    border-left: none;
 }
 
 @media (width <= 800px) {
     .ai-panel-sidebar-content {
         width: 100%;
     }
+
+    .ai-panel-sidebar-content_open {
+        left: 0;
+    }
+
+    .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
+        left: 0;
+        width: 100%;
+    }
 }
 
 .ai-panel-sidebar-content ::ng-deep .ai-message table {
@@ -122,6 +148,11 @@
     flex-shrink: 0;
 }
 
+.ai-panel-sidebar__actions {
+    display: flex;
+    align-items: center;
+}
+
 @media (prefers-color-scheme: dark) {
     .ai-icon ::ng-deep svg path {
         fill: #fff;
@@ -519,3 +550,28 @@
 .link {
     color: var(--color-accentedPalette-500);
 }
+
+/* Expanded state styles */
+.ai-panel-sidebar-content_expanded .ai-panel-chat {
+    align-items: center;
+}
+
+.ai-panel-sidebar-content_expanded .ai-welcome {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .ai-message-chain-box {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .ai-message-form {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .footer {
+    width: 100%;
+    max-width: 800px;
+}
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index 71416db13..cf3a6e3a7 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -1,16 +1,22 @@
 <div *ngIf="isAIpanelOpened"
     class="ai-panel-sidebar"
-    [ngClass]="{'ai-panel-sidebar_open': isAIpanelOpened}">
+    [ngClass]="{'ai-panel-sidebar_open': isAIpanelOpened, 'ai-panel-sidebar_expanded': isExpanded}">
 </div>
-<div class="ai-panel-sidebar-content">
+<div class="ai-panel-sidebar-content"
+    [ngClass]="{'ai-panel-sidebar-content_open': isAIpanelOpened, 'ai-panel-sidebar-content_expanded': isExpanded}">
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">
             <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
             <span>AI insights for {{displayName}}</span>
         </h2>
-        <button mat-icon-button (click)="handleClose()">
-            <mat-icon>close</mat-icon>
-        </button>
+        <div class="ai-panel-sidebar__actions">
+            <button mat-icon-button (click)="toggleExpand()">
+                <mat-icon>{{isExpanded ? 'close_fullscreen' : 'open_in_full'}}</mat-icon>
+            </button>
+            <button mat-icon-button (click)="handleClose()">
+                <mat-icon>close</mat-icon>
+            </button>
+        </div>
     </div>
 
     <div class="ai-panel-chat">
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
index b19f5a8eb..54a2bf701 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
@@ -66,6 +66,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
   ];
   public aiSuggestions: { title: string; prompt: string }[] = [];
   public submitting: boolean = false;
+  public isExpanded: boolean = false;
   public textareaRows: number = 4;
 
   constructor(
@@ -84,6 +85,10 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
       this.isAIpanelOpened = isAIpanelOpened;
     });
 
+    this._tableState.aiPanelExpandedCast.subscribe((isExpanded) => {
+      this.isExpanded = isExpanded;
+    });
+
     this.adjustTextareaRows();
     this.generateSuggestions();
   }
@@ -221,6 +226,10 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     this._tableState.handleViewAIpanel();
   }
 
+  toggleExpand() {
+    this._tableState.toggleAIPanelExpanded();
+  }
+
   @HostListener('window:resize')
   onWindowResize() {
     this.adjustTextareaRows();
diff --git a/frontend/src/app/services/table-state.service.ts b/frontend/src/app/services/table-state.service.ts
index ef814d82a..20cf6f2f0 100644
--- a/frontend/src/app/services/table-state.service.ts
+++ b/frontend/src/app/services/table-state.service.ts
@@ -13,6 +13,9 @@ export class TableStateService {
   private aiPanelSubject = new BehaviorSubject<any>(null);
   aiPanelCast = this.aiPanelSubject.asObservable();
 
+  private aiPanelExpandedSubject = new BehaviorSubject<boolean>(false);
+  aiPanelExpandedCast = this.aiPanelExpandedSubject.asObservable();
+
   // private backUrlFilters: any;
   // private backUrlParams: any;
 
@@ -67,7 +70,13 @@ export class TableStateService {
 
   handleViewAIpanel() {
     this.clearSelection();
-    this.aiPanelSubject.next(!this.aiPanelSubject.value);
+    const isOpening = !this.aiPanelSubject.value;
+    this.aiPanelSubject.next(isOpening);
+    if (isOpening) {
+      this.restoreAIPanelExpandedState();
+    } else {
+      this.aiPanelExpandedSubject.next(false);
+    }
   }
 
   clearSelection() {
@@ -76,5 +85,19 @@ export class TableStateService {
 
   closeAIpanel() {
     this.aiPanelSubject.next(false);
+    this.aiPanelExpandedSubject.next(false);
+  }
+
+  toggleAIPanelExpanded() {
+    const newValue = !this.aiPanelExpandedSubject.value;
+    this.aiPanelExpandedSubject.next(newValue);
+    this.setSessionStorageItem('aiPanelExpanded', newValue);
+  }
+
+  restoreAIPanelExpandedState() {
+    const savedState = this.getSessionStorageItem('aiPanelExpanded');
+    if (savedState !== null) {
+      this.aiPanelExpandedSubject.next(savedState);
+    }
   }
 }

From d0362dd6ee28dc5da36226993e504b43fb45d9d1 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Tue, 13 Jan 2026 17:23:40 +0200
Subject: [PATCH 03/12] fix: hide AI panel from DOM when closed

Add *ngIf to ai-panel-sidebar-content to completely remove it from DOM
when panel is closed, preventing it from overlaying table actions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel/db-table-ai-panel.component.html         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index cf3a6e3a7..2357a1d6b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -2,7 +2,8 @@
     class="ai-panel-sidebar"
     [ngClass]="{'ai-panel-sidebar_open': isAIpanelOpened, 'ai-panel-sidebar_expanded': isExpanded}">
 </div>
-<div class="ai-panel-sidebar-content"
+<div *ngIf="isAIpanelOpened"
+    class="ai-panel-sidebar-content"
     [ngClass]="{'ai-panel-sidebar-content_open': isAIpanelOpened, 'ai-panel-sidebar-content_expanded': isExpanded}">
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">

From 8bf4097cd27d2ec8d23c7b747bd6eb71dae7eeb4 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Tue, 13 Jan 2026 18:05:26 +0200
Subject: [PATCH 04/12] fix: improve AI panel positioning and z-index handling

- Move AI panel outside mat-sidenav-container to fix z-index issues
- Use 100vw instead of 100% for fixed positioning
- Increase z-index to 100/1000 to stay above sidebar
- Set panel top: 44px to not overlap header
- Simplify HTML by removing redundant *ngIf checks
- Change aiPanelSubject type from any to boolean

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../dashboard/dashboard.component.html         |  9 +++++----
 .../db-table-ai-panel.component.css            | 18 +++++++++---------
 .../db-table-ai-panel.component.html           | 10 ++++------
 .../src/app/services/table-state.service.ts    |  2 +-
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 59dd6db2b..c6749a41f 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -111,10 +111,11 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
             <app-db-table-row-view *ngIf="selectedRow"
                 [activeFilters]="filters"
             ></app-db-table-row-view>
-            <app-db-table-ai-panel *ngIf="isAIpanelOpened"
-                [displayName]="selectedTableDisplayName"
-                [tableColumns]="dataSource?.dataColumns || []"
-            ></app-db-table-ai-panel>
         </mat-sidenav-content>
     </mat-sidenav-container>
+
+    <app-db-table-ai-panel *ngIf="isAIpanelOpened"
+        [displayName]="selectedTableDisplayName"
+        [tableColumns]="dataSource?.dataColumns || []"
+    ></app-db-table-ai-panel>
 </ng-container>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index afe98ac93..39b7378bf 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -22,7 +22,7 @@
 }
 
 .ai-panel-sidebar_open.ai-panel-sidebar_expanded {
-    width: calc(100vw - 260px);
+    width: calc(100vw - 65px);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -39,29 +39,29 @@
 
 .ai-panel-sidebar-content {
     position: fixed;
-    top: 0;
-    left: 100%;
+    top: 44px;
+    left: 100vw;
     display: flex;
     flex-direction: column;
     background-color: var(--mat-sidenav-content-background-color);
     border-left: solid 1px rgba(0, 0, 0, 0.12);
-    padding-top: 44px;
-    height: 100vh;
+    height: calc(100vh - 44px);
     width: clamp(200px, 22vw, 400px);
-    z-index: 0;
+    z-index: 100;
     transition: width 0.3s ease, left 0.3s ease;
     visibility: hidden;
 }
 
 .ai-panel-sidebar-content_open {
-    left: calc(100% - clamp(200px, 22vw, 400px));
+    left: calc(100vw - clamp(200px, 22vw, 400px));
     visibility: visible;
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
-    left: 260px;
-    width: calc(100vw - 260px);
+    left: 65px;
+    width: calc(100vw - 65px);
     border-left: none;
+    z-index: 1000;
 }
 
 @media (width <= 800px) {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index 2357a1d6b..7b4caba8b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -1,10 +1,8 @@
-<div *ngIf="isAIpanelOpened"
-    class="ai-panel-sidebar"
-    [ngClass]="{'ai-panel-sidebar_open': isAIpanelOpened, 'ai-panel-sidebar_expanded': isExpanded}">
+<div class="ai-panel-sidebar ai-panel-sidebar_open"
+    [ngClass]="{'ai-panel-sidebar_expanded': isExpanded}">
 </div>
-<div *ngIf="isAIpanelOpened"
-    class="ai-panel-sidebar-content"
-    [ngClass]="{'ai-panel-sidebar-content_open': isAIpanelOpened, 'ai-panel-sidebar-content_expanded': isExpanded}">
+<div class="ai-panel-sidebar-content ai-panel-sidebar-content_open"
+    [ngClass]="{'ai-panel-sidebar-content_expanded': isExpanded}">
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">
             <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
diff --git a/frontend/src/app/services/table-state.service.ts b/frontend/src/app/services/table-state.service.ts
index 20cf6f2f0..65a2205d4 100644
--- a/frontend/src/app/services/table-state.service.ts
+++ b/frontend/src/app/services/table-state.service.ts
@@ -10,7 +10,7 @@ export class TableStateService {
   private selectedRowSubject = new BehaviorSubject<any>(null);
   cast = this.selectedRowSubject.asObservable();
 
-  private aiPanelSubject = new BehaviorSubject<any>(null);
+  private aiPanelSubject = new BehaviorSubject<boolean>(false);
   aiPanelCast = this.aiPanelSubject.asObservable();
 
   private aiPanelExpandedSubject = new BehaviorSubject<boolean>(false);

From 74e27959a68d3c703e75fbe24dc5449859e24cf9 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Tue, 13 Jan 2026 18:41:22 +0200
Subject: [PATCH 05/12] fix: improve AI panel expanded layout and sidebar
 interaction

- Move AI panel back inside mat-sidenav-content for proper table shifting
- Add expanded styles for templates (horizontal layout, nowrap description)
- Reduce gap between section titles and content
- Center header in expanded mode with max-width 800px
- Adjust z-index for sidebar to appear over expanded panel

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../dashboard/dashboard.component.html        |  9 ++---
 .../db-table-ai-panel.component.css           | 39 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index c6749a41f..59dd6db2b 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -111,11 +111,10 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
             <app-db-table-row-view *ngIf="selectedRow"
                 [activeFilters]="filters"
             ></app-db-table-row-view>
+            <app-db-table-ai-panel *ngIf="isAIpanelOpened"
+                [displayName]="selectedTableDisplayName"
+                [tableColumns]="dataSource?.dataColumns || []"
+            ></app-db-table-ai-panel>
         </mat-sidenav-content>
     </mat-sidenav-container>
-
-    <app-db-table-ai-panel *ngIf="isAIpanelOpened"
-        [displayName]="selectedTableDisplayName"
-        [tableColumns]="dataSource?.dataColumns || []"
-    ></app-db-table-ai-panel>
 </ng-container>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 39b7378bf..f968d390d 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -61,7 +61,7 @@
     left: 65px;
     width: calc(100vw - 65px);
     border-left: none;
-    z-index: 1000;
+    z-index: 1;
 }
 
 @media (width <= 800px) {
@@ -290,7 +290,7 @@
 .ai-welcome__section {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 2px;
 }
 
 .ai-welcome__section-title {
@@ -575,3 +575,38 @@
     width: 100%;
     max-width: 800px;
 }
+
+.ai-panel-sidebar-content_expanded .ai-panel-sidebar__header {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.ai-panel-sidebar-content_expanded .ai-welcome__section {
+    gap: 4px !important;
+}
+
+.ai-panel-sidebar-content_expanded .ai-welcome__section-title {
+    margin-bottom: 0 !important;
+}
+
+.ai-panel-sidebar-content_expanded .templates-container,
+.ai-panel-sidebar-content_expanded .suggestions-container {
+    margin-top: 0 !important;
+}
+
+.ai-panel-sidebar-content_expanded .templates-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.ai-panel-sidebar-content_expanded .template-card {
+    width: auto;
+}
+
+.ai-panel-sidebar-content_expanded .template-card__description {
+    white-space: nowrap;
+}

From 74f23881f70db08755089541569ff0ea2950e3f5 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 10:50:00 +0200
Subject: [PATCH 06/12] feat: adapt AI panel expanded width based on sidebar
 state

- Add sidebarExpanded input to AI panel component
- Pass shownTableTitles from dashboard to AI panel
- Adjust expanded panel position: 240px when sidebar expanded, 65px when collapsed
- Content adapts dynamically to available space

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../app/components/dashboard/dashboard.component.html    | 1 +
 .../db-table-ai-panel/db-table-ai-panel.component.css    | 9 +++++++--
 .../db-table-ai-panel/db-table-ai-panel.component.html   | 2 +-
 .../db-table-ai-panel/db-table-ai-panel.component.ts     | 1 +
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 59dd6db2b..f526a85d8 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -114,6 +114,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
             <app-db-table-ai-panel *ngIf="isAIpanelOpened"
                 [displayName]="selectedTableDisplayName"
                 [tableColumns]="dataSource?.dataColumns || []"
+                [sidebarExpanded]="shownTableTitles"
             ></app-db-table-ai-panel>
         </mat-sidenav-content>
     </mat-sidenav-container>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index f968d390d..65d336005 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -58,12 +58,17 @@
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
-    left: 65px;
-    width: calc(100vw - 65px);
+    left: 240px;
+    width: calc(100vw - 240px);
     border-left: none;
     z-index: 1;
 }
 
+.ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded.ai-panel-sidebar-content_sidebar-collapsed {
+    left: 65px;
+    width: calc(100vw - 65px);
+}
+
 @media (width <= 800px) {
     .ai-panel-sidebar-content {
         width: 100%;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index 7b4caba8b..007ee859b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -2,7 +2,7 @@
     [ngClass]="{'ai-panel-sidebar_expanded': isExpanded}">
 </div>
 <div class="ai-panel-sidebar-content ai-panel-sidebar-content_open"
-    [ngClass]="{'ai-panel-sidebar-content_expanded': isExpanded}">
+    [ngClass]="{'ai-panel-sidebar-content_expanded': isExpanded, 'ai-panel-sidebar-content_sidebar-collapsed': !sidebarExpanded}">
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">
             <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
index 54a2bf701..1b7fffe6a 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
@@ -32,6 +32,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
 
   @Input() public displayName: string;
   @Input() public tableColumns: string[] = [];
+  @Input() public sidebarExpanded: boolean = true;
   @ViewChild('chatContainer') private chatContainer!: ElementRef;
 
   public connectionID: string;

From 354c0742501a2b7ce34adb91a2011cf2d0b1000e Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 11:02:42 +0200
Subject: [PATCH 07/12] feat: improve AI panel header in expanded mode

- Position action buttons (close/collapse) fixed to top-right
- Center header content with max-width 800px aligned with input
- Show "AI insights for {tableName}" in expanded mode
- Show only "AI insights" in collapsed mode

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel/db-table-ai-panel.component.css     | 8 ++++++++
 .../db-table-ai-panel/db-table-ai-panel.component.html    | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 65d336005..ed005e2d5 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -582,11 +582,19 @@
 }
 
 .ai-panel-sidebar-content_expanded .ai-panel-sidebar__header {
+    position: relative;
     width: 100%;
     max-width: 800px;
     margin: 0 auto;
     padding-left: 0;
     padding-right: 0;
+    justify-content: flex-start;
+}
+
+.ai-panel-sidebar-content_expanded .ai-panel-sidebar__actions {
+    position: fixed;
+    right: 16px;
+    top: 64px;
 }
 
 .ai-panel-sidebar-content_expanded .ai-welcome__section {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index 007ee859b..d84d333dc 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -6,7 +6,8 @@
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">
             <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
-            <span>AI insights for {{displayName}}</span>
+            <span *ngIf="isExpanded">AI insights for {{displayName}}</span>
+            <span *ngIf="!isExpanded">AI insights</span>
         </h2>
         <div class="ai-panel-sidebar__actions">
             <button mat-icon-button (click)="toggleExpand()">

From 8c2845dcafd620646d683244bb6a1dc989d5a323 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 14:48:45 +0200
Subject: [PATCH 08/12] feat: improve AI panel animations with smoother
 transitions

- Use Material Design cubic-bezier easing for smoother feel
- Fix sidebar collapse/expand showing table rows by using padding-left instead of left position
- Add transitions to content elements (header, welcome, message form, footer)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel.component.css           | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index ed005e2d5..0c1aadcee 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -5,7 +5,9 @@
     height: calc(100vh - 44px);
     width: 0;
     overflow-y: auto;
-    transition: width 400ms ease, transform 400ms ease, opacity 400ms ease;
+    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (width <= 600px) {
@@ -48,7 +50,9 @@
     height: calc(100vh - 44px);
     width: clamp(200px, 22vw, 400px);
     z-index: 100;
-    transition: width 0.3s ease, left 0.3s ease;
+    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                left 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-left 200ms ease;
     visibility: hidden;
 }
 
@@ -58,15 +62,18 @@
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
-    left: 240px;
-    width: calc(100vw - 240px);
+    left: 65px;
+    right: 0;
+    width: auto;
+    padding-left: 175px;
     border-left: none;
     z-index: 1;
+    transition: padding-left 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-left 200ms ease;
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded.ai-panel-sidebar-content_sidebar-collapsed {
-    left: 65px;
-    width: calc(100vw - 65px);
+    padding-left: 0;
 }
 
 @media (width <= 800px) {
@@ -151,11 +158,15 @@
     padding-left: 16px;
     padding-right: 16px;
     flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ai-panel-sidebar__actions {
     display: flex;
     align-items: center;
+    transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                top 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -186,6 +197,7 @@
     height: calc(100vh - 44px - 252px - 48px);
     overflow-y: auto;
     margin-bottom: 24px;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ai-message-chain {
@@ -279,6 +291,7 @@
     gap: 16px;
     margin-bottom: 24px;
     flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ai-welcome__message {
@@ -348,6 +361,7 @@
     align-items: flex-start;
     gap: 8px;
     padding: 0;
+    transition: gap 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .template-card {
@@ -476,6 +490,7 @@
     position: relative;
     width: 100%;
     flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ai-message-form__textarea {
@@ -538,6 +553,7 @@
 .footer {
     padding-bottom: 16px;
     flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .footer p {

From db11937401c4410a16a9c51991cb19a211242e70 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 14:53:37 +0200
Subject: [PATCH 09/12] feat: move AI insights button to far right and improve
 animations

- Move AI insights button to rightmost position using flexbox order
- Make expand/collapse animation smoother with 550ms duration
- Use gentler easing curve for more pleasant user experience

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel.component.css                  | 12 +++++++-----
 .../db-table-view/db-table-view.component.css        |  5 +++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 0c1aadcee..91096a0af 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -50,9 +50,9 @@
     height: calc(100vh - 44px);
     width: clamp(200px, 22vw, 400px);
     z-index: 100;
-    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1),
-                left 350ms cubic-bezier(0.4, 0, 0.2, 1),
-                border-left 200ms ease;
+    transition: width 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                left 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                border-left 300ms ease;
     visibility: hidden;
 }
 
@@ -68,8 +68,10 @@
     padding-left: 175px;
     border-left: none;
     z-index: 1;
-    transition: padding-left 350ms cubic-bezier(0.4, 0, 0.2, 1),
-                border-left 200ms ease;
+    transition: left 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                width 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                padding-left 450ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                border-left 300ms ease;
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded.ai-panel-sidebar-content_sidebar-collapsed {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index 4a4673591..ae2cc2e79 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -159,6 +159,11 @@
     pointer-events: none;
 }
 
+.ai-insights-button {
+    order: 999;
+    margin-left: auto;
+}
+
 @media (prefers-color-scheme: light) {
     .ai-insights-button {
         background: var(--color-accentedPalette-50);

From 99dfdef5e862bc5617bd52a4320045d783c990bf Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 15:05:05 +0200
Subject: [PATCH 10/12] fix: prevent table from showing during AI panel
 expand/collapse

- Disable sidebar width transition when expanded to prevent table flashing
- Table area is instantly covered when expanding AI chat

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel/db-table-ai-panel.component.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 91096a0af..810a4b95d 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -5,9 +5,9 @@
     height: calc(100vh - 44px);
     width: 0;
     overflow-y: auto;
-    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1),
-                transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
-                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: width 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                transform 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+                opacity 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
 @media (width <= 600px) {
@@ -25,6 +25,7 @@
 
 .ai-panel-sidebar_open.ai-panel-sidebar_expanded {
     width: calc(100vw - 65px);
+    transition: none;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -68,9 +69,7 @@
     padding-left: 175px;
     border-left: none;
     z-index: 1;
-    transition: left 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
-                width 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
-                padding-left 450ms cubic-bezier(0.25, 0.1, 0.25, 1),
+    transition: padding-left 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
                 border-left 300ms ease;
 }
 

From 21433174e216b79dc25daf911044f87a58f74f7a Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 15:15:09 +0200
Subject: [PATCH 11/12] fix: improve AI panel animations and prevent table
 visibility

- Use padding-left approach to hide table during sidebar transitions
- Panel stays at left: 65px, content shifts via padding
- Smooth 400ms ease-out animations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../db-table-ai-panel.component.css                | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 810a4b95d..11e8b9670 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -5,9 +5,9 @@
     height: calc(100vh - 44px);
     width: 0;
     overflow-y: auto;
-    transition: width 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
-                transform 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
-                opacity 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition: width 400ms ease-out,
+                transform 400ms ease-out,
+                opacity 300ms ease-out;
 }
 
 @media (width <= 600px) {
@@ -25,7 +25,6 @@
 
 .ai-panel-sidebar_open.ai-panel-sidebar_expanded {
     width: calc(100vw - 65px);
-    transition: none;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,8 +50,8 @@
     height: calc(100vh - 44px);
     width: clamp(200px, 22vw, 400px);
     z-index: 100;
-    transition: width 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
-                left 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
+    transition: width 400ms ease-out,
+                left 400ms ease-out,
                 border-left 300ms ease;
     visibility: hidden;
 }
@@ -69,8 +68,7 @@
     padding-left: 175px;
     border-left: none;
     z-index: 1;
-    transition: padding-left 550ms cubic-bezier(0.25, 0.1, 0.25, 1),
-                border-left 300ms ease;
+    transition: padding-left 400ms ease-out;
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded.ai-panel-sidebar-content_sidebar-collapsed {

From 0325717684a109af484574bcba666ca9333a8157 Mon Sep 17 00:00:00 2001
From: Karina Kharchenko <karina@short.io>
Date: Wed, 14 Jan 2026 18:25:15 +0200
Subject: [PATCH 12/12] fix: make AI panel expand/collapse instant to prevent
 table flickering

- Set width transition to 0ms for sidebar expand/collapse
- Keep transform and opacity animations for initial panel open
- Add toggle animation trigger for Angular animations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/app/animations/toggle.animation.ts    | 38 +++++++++++++++++++
 .../db-table-ai-panel.component.css           | 18 +++++----
 2 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/app/animations/toggle.animation.ts

diff --git a/frontend/src/app/animations/toggle.animation.ts b/frontend/src/app/animations/toggle.animation.ts
new file mode 100644
index 000000000..e2925db92
--- /dev/null
+++ b/frontend/src/app/animations/toggle.animation.ts
@@ -0,0 +1,38 @@
+import {
+  trigger,
+  transition,
+  style,
+  animate,
+  query,
+  group,
+} from '@angular/animations';
+
+const easing = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+const duration = '600ms';
+
+export const toggleAnimation = trigger('toggle', [
+  transition(':enter', [
+    style({ height: 0, opacity: 0 }),
+    query('.details', [
+      style({ transform: 'translateY(-100%)' })
+    ], { optional: true }),
+    group([
+      animate(`${duration} ${easing}`, style({ height: '*', opacity: 1 })),
+      query('.details', [
+        animate(`${duration} ${easing}`, style({ transform: 'translateY(0)' }))
+      ], { optional: true })
+    ])
+  ]),
+  transition(':leave', [
+    style({ height: '*', opacity: 1 }),
+    query('.details', [
+      style({ transform: 'translateY(0)' })
+    ], { optional: true }),
+    group([
+      animate(`${duration} ${easing}`, style({ height: 0, opacity: 0 })),
+      query('.details', [
+        animate(`${duration} ${easing}`, style({ transform: 'translateY(-100%)' }))
+      ], { optional: true })
+    ])
+  ])
+]);
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 11e8b9670..ee264a793 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -5,9 +5,9 @@
     height: calc(100vh - 44px);
     width: 0;
     overflow-y: auto;
-    transition: width 400ms ease-out,
-                transform 400ms ease-out,
-                opacity 300ms ease-out;
+    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (width <= 600px) {
@@ -21,10 +21,14 @@
     opacity: 1;
     transform: translateX(24px);
     width: clamp(200px, 22vw, 400px);
+    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                width 0ms;
 }
 
 .ai-panel-sidebar_open.ai-panel-sidebar_expanded {
     width: calc(100vw - 65px);
+    transition: width 0ms;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -50,9 +54,8 @@
     height: calc(100vh - 44px);
     width: clamp(200px, 22vw, 400px);
     z-index: 100;
-    transition: width 400ms ease-out,
-                left 400ms ease-out,
-                border-left 300ms ease;
+    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-left 400ms ease;
     visibility: hidden;
 }
 
@@ -68,7 +71,8 @@
     padding-left: 175px;
     border-left: none;
     z-index: 1;
-    transition: padding-left 400ms ease-out;
+    transition: padding-left 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms ease-out;
 }
 
 .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded.ai-panel-sidebar-content_sidebar-collapsed {