more improvements

Author: tysonthomas9

front_end/panels/ai_chat/ui/AIChatPanel.ts

@@ -793,14 +793,11 @@ export class AIChatPanel extends UI.Panel.Panel {
   #setupMCPIntegration(): void {
     const initAndRefresh = async () => {
       try {
-        const mcpConfig = getMCPConfig();
-        // Only auto-connect if both enabled and autostart are true
-        if (mcpConfig.enabled && mcpConfig.autostart) {
-          await MCPRegistry.init();
-          await MCPRegistry.refresh();
-          const status = MCPRegistry.getStatus();
-          logger.info('MCP autostart completed', status);
-        }
+        // Always attempt to connect to MCP on startup
+        await MCPRegistry.init();
+        await MCPRegistry.refresh();
+        const status = MCPRegistry.getStatus();
+        logger.info('MCP auto-connect completed', status);
       } catch (err) {
         logger.error('Failed to initialize MCP', err);
       }
@@ -2086,7 +2083,8 @@ export class AIChatPanel extends UI.Panel.Panel {
   }
 
   #onHelpClick(): void {
-    HelpDialog.show();
+    // Open external getting started docs in a new tab
+    UI.UIUtils.openInNewTab('https://browseroperator.io/docs/getting-started/');
   }
 
   /**

front_end/panels/ai_chat/ui/ChatView.ts

@@ -288,11 +288,12 @@ export class ChatView extends HTMLElement {
       this.#selectedPromptType = data.selectedAgentType;
     }
 
-    // Check if we should exit the first message view state
-    // We're no longer in first message view if there are user messages
-    const hasUserMessages = data.messages && Array.isArray(data.messages) ? 
+    // Check if we should show the centered first-message view
+    // Only show it if there are no user messages AND at most one message (welcome)
+    const messageCount = data.messages && Array.isArray(data.messages) ? data.messages.length : 0;
+    const hasUserMessages = data.messages && Array.isArray(data.messages) ?
       data.messages.some(msg => msg && msg.entity === ChatMessageEntity.USER) : false;
-    this.#isFirstMessageView = !hasUserMessages;
+    this.#isFirstMessageView = !hasUserMessages && messageCount <= 1;
 
     // Controller owns session message upserts; no UI sync required
 

front_end/panels/ai_chat/ui/HelpDialog.ts

@@ -35,9 +35,9 @@ const UIStrings = {
    */
   importantNotice: 'Important Notice',
   /**
-   *@description Alpha version warning
+   *@description Beta version warning
    */
-  alphaVersionWarning: 'Alpha Version: This is an alpha version of the Browser Operator - AI Assistant feature. Do not use it for production or sensitive data.',
+  betaVersionWarning: 'Beta Version: This is an beta version of the Browser Operator - AI Assistant feature. Do not use it for production or sensitive data.',
   /**
    *@description Data sharing notice
    */
@@ -214,7 +214,7 @@ export class HelpDialog {
 
     const disclaimerWarning = document.createElement('p');
     disclaimerWarning.className = 'help-disclaimer-warning';
-    disclaimerWarning.textContent = i18nString(UIStrings.alphaVersionWarning);
+    disclaimerWarning.textContent = i18nString(UIStrings.betaVersionWarning);
     disclaimerSection.appendChild(disclaimerWarning);
 
     const disclaimerNote = document.createElement('p');

front_end/panels/ai_chat/ui/SettingsDialog.ts

@@ -11,6 +11,8 @@
   overflow: hidden;
   font-family: var(--default-font-family);
   background-color: var(--sys-color-cdt-base-container);
+  /* Reserve space for overlayed input bar within nested scrollers */
+  --ai-input-bar-reserved-space: 120px;
   --message-max-width: 80%;
   --message-horizontal-padding: var(--sys-size-5);
   --primary-color: var(--color-primary);
@@ -41,16 +43,30 @@ ai-input-bar {
   width: 100%;
 }
 
+/* Float input bar above content; messages scroll behind */
+.chat-view-container > ai-input-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+}
+
+/* Center the input bar in first-message (centered) view */
+/* In centered view the input is rendered inside centered-content, so no overlay positioning needed */
+
 .chat-view-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   position: relative;
+  overflow: hidden; /* Ensure only the message list scrolls */
   backdrop-filter: blur(10px);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* Legacy selector kept for backwards compatibility (unused by ai-message-list) */
 .messages-container {
   flex: 1 1 auto;
   overflow-y: auto;
@@ -59,7 +75,7 @@ ai-input-bar {
   scroll-behavior: smooth;
   padding: 12px 16px;
   background-color: var(--color-background);
-  padding-bottom: calc(12px + 80px);
+  padding-bottom: var(--ai-input-bar-reserved-space);
   min-height: 100px;
 }
 
@@ -84,6 +100,12 @@ ai-input-bar {
   animation: expandToFull 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* In expanded (conversation) view, reserve bottom space so the floating
+   input bar does not overlap the last messages. */
+.chat-view-container.expanded-view {
+  padding-bottom: 150px; /* tune if input height changes */
+}
+
 @keyframes expandToFull {
   from { opacity: 0.8; }
   to { opacity: 1; }
@@ -531,8 +553,7 @@ ai-input-bar {
   display: flex;
   justify-content: flex-end;
   padding: 4px 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 28px;
   border-top: 1px solid var(--color-details-hairline);
   opacity: 0.8;
   transition: opacity var(--transition-fast);

front_end/panels/ai_chat/ui/chatView.css

@@ -96,6 +96,7 @@ export class InputBar extends HTMLElement {
         .options=${this.#modelOptions}
         .selected=${this.#selectedModel}
         .disabled=${this.#modelSelectorDisabled}
+        .preferAbove=${!this.#centered}
         @change=${(e: CustomEvent) => {
           const value = (e.detail as any)?.value as string | undefined;
           if (value) {

front_end/panels/ai_chat/ui/input/InputBar.ts

@@ -65,8 +65,7 @@ export class MessageList extends HTMLElement {
           scroll-behavior: smooth;
           padding: 12px 16px;
           background-color: var(--color-background);
-          /* Reduced bottom padding since input bar is no longer sticky */
-          padding-bottom: 16px;
+          padding-bottom: 12px;
           min-height: 100px;
           position: relative;
           z-index: 0;

front_end/panels/ai_chat/ui/message/MessageList.ts

@@ -39,15 +39,15 @@ export function renderStructuredResponse(
           </div>
         ` : state.aiState === 'opened' ? html`
           <div class="deep-research-actions">
-            <button class="view-document-btn" @click=${open} title="Open full report in document viewer">📄 View Full Report</button>
+            <button class="view-document-btn" @click=${open} title="Open in full screen document viewer">📄 View Full Screen</button>
           </div>
         ` : html`
           <div class="inline-markdown-report">
             <div class="inline-report-header"><h3>Full Research Report</h3></div>
             <div class="inline-report-content">${renderMarkdown(data.markdownReport, markdownRenderer, open)}</div>
           </div>
           <div class="deep-research-actions">
-            <button class="view-document-btn" @click=${open} title="Open full report in document viewer">📄 ${state.isLastMessage ? '' : 'View Full Report'}</button>
+            <button class="view-document-btn" @click=${open} title="Open in full screen document viewer">📄 ${state.isLastMessage ? '' : 'View Full Screen'}</button>
           </div>
         `}
       </div>

front_end/panels/ai_chat/ui/message/StructuredResponseRender.ts

@@ -19,21 +19,37 @@ export class ModelSelector extends HTMLElement {
   #open = false;
   #query = '';
   #highlighted = 0;
+  #preferAbove = false;
+  #forceSearchable = false;
 
   get options(): ModelOption[] { return this.#options; }
   set options(v: ModelOption[]) { this.#options = v || []; this.#render(); }
   get selected(): string | undefined { return this.#selected; }
   set selected(v: string | undefined) { this.#selected = v; this.#render(); }
   get disabled(): boolean { return this.#disabled; }
   set disabled(v: boolean) { this.#disabled = !!v; this.#render(); }
+  get preferAbove(): boolean { return this.#preferAbove; }
+  set preferAbove(v: boolean) { this.#preferAbove = !!v; this.#render(); }
+  get forceSearchable(): boolean { return this.#forceSearchable; }
+  set forceSearchable(v: boolean) { this.#forceSearchable = !!v; this.#render(); }
 
   connectedCallback(): void { this.#render(); }
 
   #emitChange(value: string): void {
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value }}));
   }
 
-  #toggle = (e: Event) => { e.preventDefault(); if (!this.#disabled) { this.#open = !this.#open; this.#render(); } };
+  #toggle = (e: Event) => {
+    e.preventDefault();
+    if (this.#disabled) return;
+    const wasOpen = this.#open;
+    this.#open = !this.#open;
+    this.#render();
+    if (!wasOpen && this.#open) {
+      // Notify host that the selector opened (used to lazily refresh models)
+      this.dispatchEvent(new CustomEvent('model-selector-focus', {bubbles: true}));
+    }
+  };
   #onSearch = (e: Event) => { this.#query = (e.target as HTMLInputElement).value; this.#highlighted = 0; this.#render(); };
   #onKeydown = (e: KeyboardEvent) => {
     const filtered = this.#filtered();
@@ -49,7 +65,7 @@ export class ModelSelector extends HTMLElement {
     return this.#options.filter(o => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
   }
 
-  #isSearchable(): boolean { return (this.#options?.length || 0) >= 20; }
+  #isSearchable(): boolean { return this.#forceSearchable || (this.#options?.length || 0) >= 20; }
 
   #render(): void {
     const selectedLabel = this.#options.find(o => o.value === this.#selected)?.label || this.#selected || 'Select Model';
@@ -72,7 +88,7 @@ export class ModelSelector extends HTMLElement {
           <span class="dropdown-arrow">${this.#open ? '▲' : '▼'}</span>
         </button>
         ${this.#open ? html`
-          <div class="model-dropdown below" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="model-dropdown ${this.#preferAbove ? 'above' : 'below'}" @click=${(e: Event) => e.stopPropagation()}>
             <input class="model-search" type="text" placeholder="Search models..." @input=${this.#onSearch} @keydown=${this.#onKeydown} .value=${this.#query}>
             <div class="model-options">
               ${filtered.map((o, i) => html`

front_end/panels/ai_chat/ui/model_selector/ModelSelector.ts

@@ -320,7 +320,7 @@ export class MarkdownLitRenderer {
             class="view-document-btn"
             @click=${() => this.openTableInViewer(token)}
             title="Open table in full document viewer for better viewing">
-            📊 View Full Table
+            📊 View Full Screen
           </button>
         </div>
       ` : ''}