feat(tabs): add opt-in redesigned session tabs

CHANGELOG.md

@@ -11,6 +11,25 @@ version with its date and start a fresh empty `[Unreleased]` above it.
 
 ## [Unreleased]
 
+### Added
+
+- An opt-in **New session tabs** toggle in Settings → Experimental changes how
+  the session tabs above the composer behave:
+
+  - Tabs show the conversation title with a close button that appears on hover
+    instead of a number.
+  - New sessions and conversations picked from the history list each open in
+    their own tab, so the session in the active tab is never replaced; once the
+    tab limit is reached the notice points at the setting that raises it.
+  - With many sessions the row scrolls instead of squeezing every tab, follows
+    the active session, and keeps the new-session and history buttons pinned.
+  - The new-conversation button that reset the active tab, and its
+    `New session (in current tab)` command, are hidden; `/clear` still resets
+    the current session.
+
+  The toggle is off by default; off keeps the numbered tabs and the existing
+  interactions unchanged.
+
 ## [1.0.14] - 2026-09-20
 
 ### Changed

src/app/settings/settings-storage.ts

@@ -47,6 +47,7 @@ export const DEFAULT_QODERIAN_SETTINGS: QoderianSettings = {
   deferMathRenderingDuringStreaming: true,
   expandFileEditsByDefault: false,
   chatViewPlacement: 'right-sidebar',
+  enableSessionTabsRedesign: false,
 };
 
 export interface SettingsRecoveryNotice {

src/core/types/settings.ts

@@ -193,6 +193,8 @@ export interface QoderianSettings {
   deferMathRenderingDuringStreaming: boolean;
   expandFileEditsByDefault: boolean;
   chatViewPlacement: ChatViewPlacement;
+  /** Experimental: session pills with titles, close buttons, and new-tab semantics. */
+  enableSessionTabsRedesign: boolean;
 
   // Allow forward-compatible settings fields
   [key: string]: unknown;

src/features/chat/chat-view.ts

@@ -22,7 +22,7 @@ import {
 } from './tabs/tab';
 import { TabBar } from './tabs/tab-bar';
 import { TabManager } from './tabs/tab-manager';
-import type { TabData, TabId } from './tabs/types';
+import { DEFAULT_MAX_TABS, type TabData, type TabId } from './tabs/types';
 import { CreditsUsageButton } from './ui/credits-usage-button';
 
 type LoadableView = {
@@ -262,22 +262,25 @@ export class QoderianView extends ItemView {
   private buildNavRowContent(): HTMLElement {
     const wrapper = createDiv({ cls: 'qoderian-input-nav-content' });
 
-    this.tabBarContainerEl = wrapper.createDiv({ cls: 'qoderian-tab-bar-container' });
-    this.tabBar = new TabBar(this.tabBarContainerEl, {
+    const tabBarContainerEl = wrapper.createDiv({ cls: 'qoderian-tab-bar-container' });
+    this.tabBarContainerEl = tabBarContainerEl;
+    this.tabBar = new TabBar(tabBarContainerEl, {
       onTabClick: (tabId) => this.handleTabClick(tabId),
       onTabClose: (tabId) => {
         void this.handleTabClose(tabId);
       },
       onNewTab: () => {
         void this.createNewTab().catch(() => new Notice('Failed to create tab'));
       },
+    }, {
+      isLegacyMode: () => !this.sessionTabsRedesignEnabled(),
     });
 
     const navActionsEl = wrapper.createDiv({ cls: 'qoderian-input-nav-actions' });
 
     this.newTabButtonEl = navActionsEl.createDiv({ cls: 'qoderian-input-nav-btn qoderian-new-tab-btn' });
     setIcon(this.newTabButtonEl, 'square-plus');
-    setButtonTooltip(this.newTabButtonEl, t('commands.newTab'));
+    setButtonTooltip(this.newTabButtonEl, this.newSessionButtonTooltip());
     this.newTabButtonEl.addEventListener('click', () => {
       void this.createNewTab().catch(() => new Notice('Failed to create tab'));
     });
@@ -286,6 +289,7 @@ export class QoderianView extends ItemView {
     setIcon(newBtn, 'square-pen');
     setButtonTooltip(newBtn, t('nav.newConversation'));
     this.newConversationButtonEl = newBtn;
+    newBtn.toggleClass('qoderian-hidden', this.sessionTabsRedesignEnabled());
     newBtn.addEventListener('click', () => {
       void (async () => {
         await this.tabManager?.createNewConversation();
@@ -398,14 +402,36 @@ export class QoderianView extends ItemView {
     this.activeInputTabId = null;
   }
 
+  /** Whether the experimental session-tab interaction (own tab per session) is on. */
+  private sessionTabsRedesignEnabled(): boolean {
+    return this.plugin.settings.enableSessionTabsRedesign === true;
+  }
+
+  private newSessionButtonTooltip(): string {
+    return this.sessionTabsRedesignEnabled() ? t('nav.newSession') : t('commands.newTab');
+  }
+
   /** Refreshes tab controls after settings that affect tab availability change. */
   refreshTabControls(): void {
     this.updateTabBarVisibility();
   }
 
+  /** Re-renders tab chrome after the experimental session-tab mode changes. */
+  refreshSessionTabsMode(): void {
+    this.newConversationButtonEl?.toggleClass(
+      'qoderian-hidden',
+      this.sessionTabsRedesignEnabled(),
+    );
+    if (this.newTabButtonEl) {
+      setButtonTooltip(this.newTabButtonEl, this.newSessionButtonTooltip());
+    }
+    this.updateTabBarVisibility();
+    this.updateTabBar();
+  }
+
   /** Re-applies locale-dependent static text after a language change. */
   refreshLocalizedChrome(): void {
-    if (this.newTabButtonEl) setButtonTooltip(this.newTabButtonEl, t('commands.newTab'));
+    if (this.newTabButtonEl) setButtonTooltip(this.newTabButtonEl, this.newSessionButtonTooltip());
     if (this.newConversationButtonEl) {
       setButtonTooltip(this.newConversationButtonEl, t('nav.newConversation'));
     }
@@ -446,8 +472,7 @@ export class QoderianView extends ItemView {
   async createNewTab(): Promise<void> {
     const tab = await this.tabManager?.createTab();
     if (!tab) {
-      const maxTabs = this.plugin.settings.maxTabs ?? 3;
-      new Notice(`Maximum ${maxTabs} tabs allowed`);
+      this.noticeSessionLimit();
       this.updateTabBarVisibility();
       return;
     }
@@ -474,6 +499,8 @@ export class QoderianView extends ItemView {
 
   private updateTabBarVisibility(): void {
     if (!this.tabBarContainerEl || !this.tabManager) return;
+    // Session pills stay visible for a single session too.
+    if (this.sessionTabsRedesignEnabled()) return;
 
     const tabCount = this.tabManager.getTabCount();
     const showTabBar = tabCount >= 2;
@@ -485,6 +512,7 @@ export class QoderianView extends ItemView {
 
   private updateNewTabButtonVisibility(): void {
     if (!this.newTabButtonEl || !this.tabManager) return;
+    if (this.sessionTabsRedesignEnabled()) return;
 
     const canCreateTab = this.tabManager.canCreateTab();
     this.newTabButtonEl.toggleClass('qoderian-hidden', !canCreateTab);
@@ -546,21 +574,36 @@ export class QoderianView extends ItemView {
   }
 
   private async openHistoryConversation(conversationId: string): Promise<void> {
-    await this.tabManager?.openConversation(conversationId);
+    // With the redesigned tabs, resuming a conversation must not replace the
+    // session in the active tab; legacy keeps opening it in the current tab.
+    const opened = await this.tabManager?.openConversation(conversationId, {
+      preferNewTab: this.sessionTabsRedesignEnabled(),
+    });
+    if (opened === false) {
+      this.noticeSessionLimit();
+    }
     this.historyDropdown?.removeClass('visible');
   }
 
   private async openHistoryConversationInNewTab(
     conversationId: string,
     activate = true,
   ): Promise<void> {
-    await this.tabManager?.openConversation(conversationId, {
+    const opened = await this.tabManager?.openConversation(conversationId, {
       preferNewTab: true,
       activate,
     });
+    if (opened === false) {
+      this.noticeSessionLimit();
+    }
     this.historyDropdown?.removeClass('visible');
   }
 
+  private noticeSessionLimit(): void {
+    const maxTabs = this.plugin.settings.maxTabs ?? DEFAULT_MAX_TABS;
+    new Notice(t('chat.tabs.maxTabsReached', { count: String(maxTabs) }));
+  }
+
   private getHistoryConversationStatus(conversationId: string): HistoryConversationStatus {
     const activeTab = this.tabManager?.getActiveTab();
     if (activeTab?.conversationId === conversationId) {