@things-factory/ai-assistant 10.1.154 → 10.1.156

package/client/components/assistant-dock.ts

@@ -1,3 +1,4 @@
+import { findMenu, foldForDock, unfoldAfterDock } from '../utils/menu-room.js'
 import '@material/web/icon/icon.js'
 import './assistant-chat.js'
 import './assistant-session-toolbar.js'
@@ -105,13 +106,17 @@ export class AssistantDock extends localize(i18next)(LitElement) {
         font-size: 13px;
       }
 
-      /* Below 1440px the page keeps its full width and only the dock floats. The DOM stays - the chat does not reconnect. */
-      @media (max-width: 1439.98px) {
+      /*
+       * The dock opens in one place on every screen and takes its room beside the page, so it covers no page's controls
+       * and no screen needs its own exception (2026-10-12). Only a screen too narrow to share floats it over the page.
+       * The DOM stays - the chat does not reconnect.
+       */
+      @media (max-width: 1023.98px) {
         :host {
           position: fixed;
-          inset: var(--assistant-dock-overlay-top, 0px) 0 0 auto;
-          height: calc(100vh - var(--assistant-dock-overlay-top, 0px));
-          height: calc(100dvh - var(--assistant-dock-overlay-top, 0px));
+          inset: 0 0 0 auto;
+          height: 100vh;
+          height: 100dvh;
           z-index: 10;
           box-shadow: var(--md-sys-elevation-shadow-3, -4px 0 16px rgb(0 0 0 / 20%));
         }
@@ -278,8 +283,6 @@ export class AssistantDock extends localize(i18next)(LitElement) {
       .next-step a:hover { text-decoration: underline; }
       .next-step md-icon { --md-icon-size: 16px; }
       ox-assistant-chat[hidden] { display: none; }
-      .transition { padding: 10px 12px; font-size: 13px; line-height: 1.5; border-bottom: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); }
-      .transition button { display: block; margin-top: 6px; font: inherit; }
     `
   ]
 
@@ -292,7 +295,6 @@ export class AssistantDock extends localize(i18next)(LitElement) {
   @state() private anchor?: AnchorResult
   @state() private kind = ''
   /** kind → its label, for the manager's rows. */
-  @state() private kindLabels: Record<string, string> = {}
   @state() private sessions: AssistantSession[] = []
   @state() private sessionId = ''
   @state() private loading = false
@@ -300,8 +302,6 @@ export class AssistantDock extends localize(i18next)(LitElement) {
   @state() private showingHistory = false
   @state() private conversationView = 0
   @state() private asking?: { ask?: string; draft?: string; requestId: string }
-  @state() private screenChanged = false
-  @state() private navigationNotice = ''
   private openedIdentity = ''
 
   private app = new AppController(this)
@@ -329,22 +329,6 @@ export class AssistantDock extends localize(i18next)(LitElement) {
 
   private onStartNewSession = () => void this.newConversation()
 
-  /** An editor can reserve its toolbar above the floating dock. Other apps keep the full-height default. */
-  @property({ attribute: false }) overlayBoundary?: () => Element | undefined
-  private boundary?: Element
-  private boundaryObserver?: ResizeObserver
-  private placeOverlay = () => {
-    const boundary = this.overlayBoundary?.()
-    if (boundary !== this.boundary) {
-      this.boundaryObserver?.disconnect()
-      this.boundary = boundary
-      if (boundary) {
-        this.boundaryObserver = new ResizeObserver(this.placeOverlay)
-        this.boundaryObserver.observe(boundary)
-      }
-    }
-    this.style.setProperty('--assistant-dock-overlay-top', `${boundary?.getBoundingClientRect().bottom ?? 0}px`)
-  }
 
   /* A card asks for a page of this application - the AI 작업판. The dock stays open beside it. */
   private onOpenPage = (event: CustomEvent) => {
@@ -364,10 +348,13 @@ export class AssistantDock extends localize(i18next)(LitElement) {
     else this.removeAttribute('audience')
   }
 
+  /* Whether the left menu was folded by this dock's opening - only then does closing open it again. */
+  private menuFoldedByDock = false
+
   connectedCallback() {
     super.connectedCallback()
-    window.addEventListener('resize', this.placeOverlay)
-    this.placeOverlay()
+    this.menuFoldedByDock = foldForDock(findMenu())
+    if (this.menuFoldedByDock) window.dispatchEvent(new Event('resize'))
     this.addEventListener('assistant-start-new-session', this.onStartNewSession)
     this.addEventListener('assistant-open-page', this.onOpenPage as EventListener)
     this.unsubscribers.push(
@@ -390,9 +377,9 @@ export class AssistantDock extends localize(i18next)(LitElement) {
 
   /* Closing keeps the conversation: the dock comes back as it was left (design/ai/shared-dock.md §2-1, §2-7). */
   disconnectedCallback() {
-    window.removeEventListener('resize', this.placeOverlay)
-    this.boundaryObserver?.disconnect()
-    this.boundary = undefined
+    unfoldAfterDock(findMenu(), this.menuFoldedByDock)
+    if (this.menuFoldedByDock) window.dispatchEvent(new Event('resize'))
+    this.menuFoldedByDock = false
     this.removeEventListener('assistant-start-new-session', this.onStartNewSession)
     this.removeEventListener('assistant-open-page', this.onOpenPage as EventListener)
     this.unsubscribers.splice(0).forEach(unsubscribe => unsubscribe())
@@ -433,43 +420,66 @@ export class AssistantDock extends localize(i18next)(LitElement) {
     if (!(await this.mayLeaveConversation())) return
     this.chosenKind = ''
     this.surface = surface
-    this.navigationNotice = surface ? t('now-about', 'Conversation subject: {name}', { name: surface.label() }) : ''
     await this.open()
   }
 
   /** The screen changed - a different surface or domain is a different conversation. */
   private follow(force = false) {
-    this.placeOverlay()
     const next = currentAssistantSurface()
     const transition = surfaceTransition({
       identityChanged: this.openedIdentity !== this.identityKey(),
       sameSubject: this.scopeKey(next) === this.openedFor,
-      active: isAnchor(this.anchor) && (!!this.sessionId || this.navigationState.draft || this.navigationState.busy)
+      busy: this.navigationState.busy
     })
     if (!force && transition === 'refresh') {
       this.surface = next
-      this.screenChanged = false
       this.requestUpdate()
       return
     }
-    if (!force && transition === 'offer') {
-      this.screenChanged = true
+    if (!force && transition === 'wait') {
+      /* The answer lands in the conversation it was asked in; then the dock follows the page. */
+      this.followWhenIdle()
       return
     }
+    if (transition !== 'reset') this.keepDraft()
     if (transition === 'reset') {
       this.asking = undefined
       this.capability = 'unknown'
       if (this.openedIdentity) takeAssistantAsk()
     }
-    this.navigationNotice = transition === 'follow' && next ? t('now-about', 'Conversation subject: {name}', { name: next.label() }) : ''
     if (next?.key !== this.surface?.key) this.chosenKind = ''
     this.surface = next
     void this.open()
   }
 
+  private followTimer?: ReturnType<typeof setTimeout>
+
+  private followWhenIdle() {
+    clearTimeout(this.followTimer)
+    this.followTimer = setTimeout(() => (this.navigationState.busy ? this.followWhenIdle() : this.follow()), 300)
+  }
+
+  /* What was being written, per subject - it goes back to its conversation when the page returns there. */
+  private drafts = new Map<string, unknown>()
+
+  private keepDraft() {
+    const chat = this.renderRoot.querySelector('ox-assistant-chat') as any
+    const draft = this.openedFor ? chat?.takeDraft?.() : undefined
+    if (draft) this.drafts.set(this.openedFor!, draft)
+  }
+
+  private async restoreDraft() {
+    const draft = this.openedFor ? this.drafts.get(this.openedFor) : undefined
+    if (!draft) return
+    await this.updateComplete
+    const chat = this.renderRoot.querySelector('ox-assistant-chat') as any
+    if (!chat?.restoreDraft) return
+    this.drafts.delete(this.openedFor!)
+    chat.restoreDraft(draft)
+  }
+
   private async open(): Promise<void> {
     this.openedIdentity = this.identityKey()
-    this.screenChanged = false
     const ticket = ++this.revision
     this.conversationView++
     this.showingHistory = false
@@ -496,7 +506,6 @@ export class AssistantDock extends localize(i18next)(LitElement) {
 
       const modes = await modesFor(surface.subject)
       if (ticket !== this.revision) return
-      this.kindLabels = Object.fromEntries(modes.map(mode => [mode.kind, mode.label || mode.kind]))
       const chosen = modes.find(mode => mode.kind === this.chosenKind) ?? modes.find(mode => mode.isDefault) ?? modes[0]
       this.kind = chosen?.kind ?? ''
       if (!this.kind) {
@@ -517,6 +526,8 @@ export class AssistantDock extends localize(i18next)(LitElement) {
         this.loading = false
         /* No conversation can stand here - an ask waiting for one is answered now, not sent later somewhere else. */
         if (this.anchor && !isAnchor(this.anchor)) void this.takeAsk()
+        /* What was being written on this subject before the page moved away comes back here. */
+        void this.restoreDraft()
       }
     }
   }
@@ -566,7 +577,7 @@ export class AssistantDock extends localize(i18next)(LitElement) {
 
   private async takeAsk() {
     if (this.loading || !this.anchor) return
-    if (this.screenChanged || this.navigationState.busy || this.navigationState.draft) {
+    if (this.navigationState.busy || this.navigationState.draft) {
       const waiting = takeAssistantAsk()
       if (waiting) notify({ level: 'info', message: t('ask-kept-current', 'The current conversation was kept. Switch to the intended subject before asking again.') })
       return
@@ -818,18 +829,13 @@ export class AssistantDock extends localize(i18next)(LitElement) {
         <span>${surface.nextStep.description?.() || ''}</span>
         <a href=${surface.nextStep.href}>${surface.nextStep.label()}<md-icon>arrow_forward</md-icon></a>
       </div>` : nothing}
-      ${this.screenChanged ? html`<div class="transition" role="status">
-        ${t('screen-and-conversation', 'Screen: {screen}. Conversation: {conversation}. Your conversation has been kept.', { screen: currentAssistantSurface()?.label() || t('no-subject', 'No subject'), conversation: surface?.label() || '' })}
-        <button class="sbtn" @click=${() => this.requestSurface(currentAssistantSurface())}>${t('switch-to-screen', 'Talk about this screen')}</button>
-      </div>` : this.navigationNotice ? html`<div class="transition" role="status">${this.navigationNotice}</div>` : nothing}
+
       ${ready && this.showingHistory
         ? html`<ox-assistant-session-manager
             .anchorType=${(anchor as any).anchorType}
             .anchorId=${(anchor as any).anchorId}
             .sessionId=${this.sessionId}
             .kind=${this.kind}
-            .kindLabels=${this.kindLabels}
-            .scopeLabel=${t('conversation-scope', 'Conversations · {name}', { name: surface?.label() || '' })}
             @assistant-session-select=${(event: CustomEvent) => this.selectSession(event.detail.sessionId, event.detail.kind)}
             @assistant-session-reset=${() => this.newConversation()}
             @assistant-session-changed=${() => this.reloadSessions()}
@@ -860,7 +866,6 @@ export class AssistantDock extends localize(i18next)(LitElement) {
             this.conversationView,
             html`<ox-assistant-chat
               ?hidden=${this.showingHistory}
-              .sendBlocked=${this.screenChanged ? t('return-to-subject', 'Return to the conversation subject before sending or applying changes.') : ''}
               .sessionId=${this.sessionId}
               .prepareSession=${(adopt: (id: string) => void) => this.controller.prepareSession(adopt)}
               .contextProvider=${() => {

package/client/components/assistant-session-manager.ts

@@ -5,6 +5,8 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { OxPrompt } from '@operato/popup'
+import '@operato/popup/ox-popup-menu.js'
+import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
 
 import {
   assistantSessionAdmin,
@@ -47,29 +49,25 @@ const t = (key: string, defaultValue: string, options: Record<string, unknown> =
 @customElement('ox-assistant-session-manager')
 export class AssistantSessionManager extends LitElement {
   static styles = css`
-    .scope-label { padding: 12px 12px 0; font-size: 14px; font-weight: 600; }
-    .filter-toggle, .reset { margin: 6px 10px; padding: 7px; font: inherit; background: transparent; color: inherit; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 6px; cursor: pointer; }
-    .filter-toggle { align-self: flex-end; }
-    .filters[hidden] { display: none; }
-    .open-row { display: block; flex: 1; min-width: 0; text-align: start; border: 0; background: transparent; color: inherit; font: inherit; padding: 4px; cursor: pointer; }
-    .meta { display: block; margin-top: 5px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
+    /* One scale for the list: name 13, preview 12, meta 11 - the rest of the dock's sizes. */
+    .open-row { display: block; flex: 1; min-width: 0; text-align: start; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; }
+    .meta { display: block; margin-top: 2px; font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
     /* Open and private must part at a glance - an open row is read by everyone in the domain (2026-09-30). */
     .audience { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
     .audience md-icon { --md-icon-size: 14px; }
     /* The dock's warning colour, fixed across applications - see assistant-dock.ts. */
     :host { --assistant-open-edge: #c47f00; --assistant-open-surface: #f2b01e; --assistant-open-ink: #2e2100; }
-    .audience.open { padding: 1px 6px 1px 4px; border-radius: 6px; background: var(--assistant-open-surface); color: var(--assistant-open-ink); font-weight: 600; }
+    .audience.open { padding: 0 5px 0 3px; border-radius: 4px; background: var(--assistant-open-surface); color: var(--assistant-open-ink); font-weight: 600; }
+    .audience md-icon { --md-icon-size: 12px; }
     .row.open-audience { box-shadow: inset 4px 0 0 var(--assistant-open-edge); }
-    .actions summary { cursor: pointer; padding: 8px; font-size: 18px; list-style: none; }
-    .actions[open] .acts { display: flex; flex-direction: column; position: absolute; right: 10px; top: 40px; z-index: 2; min-width: 180px; padding: 6px; background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; box-shadow: 0 4px 16px #0002; }
-    .actions button.icon { min-height: 40px; padding: 8px 12px; font: inherit; text-align: start; }
-    .actions button.danger { color: var(--md-sys-color-error, #b42318); }
-    button:focus-visible, summary:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
+    .more-menu { flex: none; border: 0; border-radius: 4px; padding: 2px 6px; background: none; color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 1; cursor: pointer; }
+    .more-menu:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
+    button:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
     :host {
       display: flex;
       flex-direction: column;
       min-height: 0;
-      font-size: 14px;
+      font-size: 13px;
       color: var(--md-sys-color-on-surface);
     }
 
@@ -77,14 +75,14 @@ export class AssistantSessionManager extends LitElement {
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 8px 10px;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      padding: 8px 10px 6px;
     }
 
     .bar input,
     .bar select {
       min-width: 0;
-      height: 28px;
+      height: 26px;
+      font-size: 12px;
       box-sizing: border-box;
       border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
@@ -106,28 +104,32 @@ export class AssistantSessionManager extends LitElement {
       background: transparent;
       color: var(--md-sys-color-primary);
       font: inherit;
-      font-weight: 650;
+      font-size: 12px;
+      font-weight: 600;
+      white-space: nowrap;
       cursor: pointer;
     }
 
+    /* Always open, one quiet line under the search - the same small size as the search. */
     .filters {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: 6px 10px;
-      padding: 6px 10px;
+      gap: 4px 10px;
+      padding: 0 10px 8px;
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      font-size: 11.5px;
+      font-size: 11px;
       color: var(--md-sys-color-on-surface-variant);
     }
 
     .filters select {
-      height: 26px;
+      height: 22px;
       border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
+      border-radius: 4px;
       background: var(--md-sys-color-surface-container-lowest);
       color: inherit;
       font: inherit;
+      padding: 0 4px;
     }
 
     .filters label {
@@ -137,8 +139,18 @@ export class AssistantSessionManager extends LitElement {
       cursor: pointer;
     }
 
-    .kind {
+    .filters input[type='checkbox'] {
+      margin: 0;
+    }
+
+    .filters .clear {
+      margin-left: auto;
+      border: 0;
+      background: none;
+      padding: 0;
       color: var(--md-sys-color-primary);
+      font: inherit;
+      cursor: pointer;
     }
 
     .list {
@@ -152,7 +164,7 @@ export class AssistantSessionManager extends LitElement {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 9px 10px;
+      padding: 7px 10px;
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
       cursor: pointer;
     }
@@ -200,33 +212,9 @@ export class AssistantSessionManager extends LitElement {
     }
 
     .prev {
+      margin-top: 1px;
       color: var(--md-sys-color-on-surface-variant);
-      font-size: 11px;
-    }
-
-    /* Row actions show on hover and on keyboard focus - the list's body is the names. */
-    .acts {
-      display: none;
-      gap: 2px;
-    }
-
-    button.icon {
-      display: inline-flex;
-      padding: 3px;
-      border: 0;
-      border-radius: 6px;
-      background: none;
-      color: var(--md-sys-color-on-surface-variant);
-      cursor: pointer;
-    }
-
-    button.icon:hover {
-      background: var(--md-sys-color-surface-container-high);
-      color: var(--md-sys-color-on-surface);
-    }
-
-    button.icon.danger:hover {
-      color: var(--md-sys-color-error);
+      font-size: 12px;
     }
 
     .rename {
@@ -313,19 +301,15 @@ export class AssistantSessionManager extends LitElement {
   @property({ type: String }) anchorId = ''
   /** The conversation the dock has open - marked in the list. */
   @property({ type: String }) sessionId = ''
-  @property({ type: String }) scopeLabel = ''
   /** The doors. Replaceable for tests; a host normally leaves it. */
   @property({ attribute: false }) admin: AssistantSessionAdmin = assistantSessionAdmin
   /** The conversation kind (mode) open in the dock - the list's default scope (§2-6). */
   @property({ type: String }) kind = ''
-  /** kind → the words people know it by (the modes' labels), for each row. */
-  @property({ attribute: false }) kindLabels: Record<string, string> = {}
 
   @state() private entries: AssistantSessionEntry[] = []
   @state() private total = 0
   @state() private hiddenCount = 0
   @state() private search = ''
-  @state() private allKinds = false
   @state() private whose: NonNullable<AssistantSessionFilters['whose']> = 'all'
   @state() private visibility: NonNullable<AssistantSessionFilters['visibility']> = 'all'
   @state() private includeHidden = false
@@ -334,17 +318,20 @@ export class AssistantSessionManager extends LitElement {
   @state() private loading = false
   @state() private error = ''
   @state() private renamingId = ''
-  @state() private filtersOpen = false
 
-  private get hasFilters() {
-    return !!this.search.trim() || this.allKinds || this.whose !== 'all' || this.visibility !== 'all' || this.includeHidden || this.unreadOnly
+  /*
+   * The search and the filters stand open together, always (2026-10-12) - a filter behind a "Filters" button is one
+   * more thing to find before finding the conversation. The list is this screen's conversations, so there is no kind
+   * to choose.
+   */
+  private get filtering() {
+    return !!this.search.trim() || this.whose !== 'all' || this.visibility !== 'all' || this.includeHidden || this.unreadOnly
   }
 
-  private resetFilters() {
+  private clearFilters() {
     clearTimeout(this.searchTimer)
     this.refilter(() => {
       this.search = ''
-      this.allKinds = false
       this.whose = 'all'
       this.visibility = 'all'
       this.includeHidden = this.unreadOnly = false
@@ -375,7 +362,7 @@ export class AssistantSessionManager extends LitElement {
         anchorId: this.anchorId,
         search: this.search,
         filters: {
-          kind: this.allKinds ? '' : this.kind,
+          kind: this.kind,
           whose: this.whose,
           visibility: this.visibility,
           includeHidden: this.includeHidden,
@@ -491,7 +478,6 @@ export class AssistantSessionManager extends LitElement {
     const shown = this.entries.length
 
     return html`
-      <div class="scope-label">${this.scopeLabel}</div>
       <div class="bar">
         <input
           .value=${this.search}
@@ -502,15 +488,7 @@ export class AssistantSessionManager extends LitElement {
         />
         <button class="new" @click=${() => this.emit('assistant-session-reset')}>+ ${t('new', 'New conversation')}</button>
       </div>
-      <button class="filter-toggle" aria-expanded=${this.filtersOpen} @click=${() => (this.filtersOpen = !this.filtersOpen)}>${t('filters', 'Filters')}${this.hasFilters ? ' •' : ''}</button>
-      <div class="filters" ?hidden=${!this.filtersOpen}>
-        ${this.kind
-          ? html`<select aria-label=${t('filter-kind', 'Which kind')} .value=${this.allKinds ? 'all' : 'this'}
-              @change=${(e: Event) => this.refilter(() => (this.allKinds = (e.target as HTMLSelectElement).value === 'all'))}>
-              <option value="this">${this.kindLabels[this.kind] || t('filter-this-kind', 'This conversation')}</option>
-              <option value="all">${t('filter-all-kinds', 'All kinds here')}</option>
-            </select>`
-          : nothing}
+      <div class="filters">
         <select aria-label=${t('filter-whose', 'Whose')} .value=${this.whose}
           @change=${(e: Event) => this.refilter(() => (this.whose = (e.target as HTMLSelectElement).value as any))}>
           <option value="all">${t('filter-all', 'All')}</option>
@@ -527,13 +505,13 @@ export class AssistantSessionManager extends LitElement {
           @change=${(e: Event) => this.refilter(() => (this.unreadOnly = (e.target as HTMLInputElement).checked))} />${t('filter-unread', 'Unread')}</label>
         <label><input type="checkbox" .checked=${this.includeHidden}
           @change=${(e: Event) => this.refilter(() => (this.includeHidden = (e.target as HTMLInputElement).checked))} />${t('filter-hidden', 'Including hidden')}</label>
+        ${this.filtering ? html`<button class="clear" @click=${() => this.clearFilters()}>${t('reset-filters', 'Clear search and filters')}</button>` : nothing}
       </div>
-      ${this.hasFilters ? html`<button class="reset" @click=${() => this.resetFilters()}>${t('reset-filters', 'Clear search and filters')}</button>` : nothing}
       <div class="list">
         ${this.error ? html`<div class="note" role="alert">${this.error}</div>` : nothing}
         ${this.loading ? html`<div class="note" role="status">${t('loading', 'Loading conversations…')}</div>` : nothing}
         ${shown === 0 && !this.loading && !this.error
-          ? html`<div class="empty" role="status">${this.hasFilters ? t('filtered-empty', 'No conversations match these filters here.') : t('scope-empty', 'No conversations for this subject yet.')}</div>`
+          ? html`<div class="empty" role="status">${this.filtering ? t('filtered-empty', 'No conversations match these filters here.') : t('scope-empty', 'No conversations yet.')}</div>`
           : this.entries.map(entry => this.renderRow(entry))}
         ${shown < this.total
           ? html`<button class="more" @click=${() => this.loadMore()}>${t('load-more', 'Show more ({rest})', { rest: this.total - shown })}</button>`
@@ -575,39 +553,43 @@ export class AssistantSessionManager extends LitElement {
       <span class="dot"></span>
       <button class="open-row" aria-current=${entry.id === this.sessionId ? 'true' : 'false'} @click=${() => this.emit('assistant-session-select', { sessionId: entry.id, kind: entry.kind })}>
         <div class="title">${name}</div>
-        <div class="prev">${this.allKinds && entry.kind ? html`<span class="kind">${this.kindLabels[entry.kind] || entry.kind}</span> · ` : nothing}${entry.lastMessagePreview || ''}</div>
+        <div class="prev">${entry.lastMessagePreview || ''}</div>
         <span class="meta"><span class="audience ${isPrivate ? 'private' : 'open'}"><md-icon aria-hidden="true">${isPrivate ? 'lock' : 'public'}</md-icon>${isPrivate ? t('audience-private', 'Participants only') : t('audience-open', 'Everyone in this domain')}</span>${entry.lastMessageAt && Number.isFinite(Date.parse(entry.lastMessageAt)) ? html` · <time datetime=${entry.lastMessageAt}>${new Intl.DateTimeFormat(i18next.language || 'en', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(entry.lastMessageAt))}</time>` : nothing}${entry.mine ? html` · ${t('filter-mine', 'Started by me')}` : nothing}</span>
       </button>
-      <details class="actions" @keydown=${(e: KeyboardEvent) => { if (e.key === 'Escape') { e.stopPropagation(); const details = e.currentTarget as HTMLDetailsElement; details.open = false; details.querySelector('summary')?.focus() } }}>
-      <summary aria-label=${t('manage', 'Manage conversation')}>⋯</summary>
-      <span class="acts" @click=${(e: Event) => e.stopPropagation()}>
-        ${actions.rename
-          ? html`<button class="icon" title=${t('rename', 'Rename')} aria-label=${t('rename', 'Rename')} @click=${() => (this.renamingId = entry.id)}>
-              ${t('rename', 'Rename')}
-            </button>`
-          : nothing}
+      <button
+        class="more-menu"
+        aria-label=${t('manage', 'Manage conversation')}
+        title=${t('manage', 'Manage conversation')}
+        @click=${(e: MouseEvent) => this.openRowMenu(e, entry, name)}>⋯</button>
+    </div>`
+  }
+
+  /**
+   * A row's actions in the platform's popup menu - one open at a time, closed by a press outside or Escape, placed
+   * inside the window. The hand-made menu it replaces stayed open and stacked over the next rows.
+   */
+  private openRowMenu(event: MouseEvent, entry: AssistantSessionEntry, name: string) {
+    event.stopPropagation()
+    const actions = sessionActions(entry)
+    const isPrivate = entry.visibility === 'private'
+    const at = (event.currentTarget as HTMLElement).getBoundingClientRect()
+    OxPopupMenu.open({
+      template: html`
+        ${actions.rename ? html`<ox-popup-menuitem label=${t('rename', 'Rename')} @select=${() => (this.renamingId = entry.id)}></ox-popup-menuitem>` : nothing}
         ${actions.setVisibility
           ? isPrivate
-            ? html`<button class="icon" title=${t('make-open', 'Make public')} aria-label=${t('make-open', 'Make public')}
-                @click=${() => this.askOpen(entry, name)}>${t('make-open', 'Make public')}</button>`
-            : html`<button class="icon" title=${t('make-private', 'Make private')} aria-label=${t('make-private', 'Make private')}
-                @click=${() => this.setVisibility(entry, 'private')}>${t('make-private', 'Make private')}</button>`
-          : nothing}
-        <button
-          class="icon"
-          title=${actions.unhide ? t('unhide', 'Show in my list') : t('hide', 'Hide from my list')}
-          aria-label=${actions.unhide ? t('unhide', 'Show in my list') : t('hide', 'Hide from my list')}
-          @click=${() => this.setHidden(entry, !entry.hidden)}
-        >
-          ${actions.unhide ? t('unhide', 'Show in my list') : t('hide', 'Hide from my list')}
-        </button>
-        ${actions.remove
-          ? html`<button class="icon danger" title=${t('remove', 'Delete')} aria-label=${t('remove', 'Delete')}
-              @click=${() => this.askRemove(entry, name)}>${t('remove', 'Delete')}</button>`
+            ? html`<ox-popup-menuitem label=${t('make-open', 'Make public')} @select=${() => this.askOpen(entry, name)}></ox-popup-menuitem>`
+            : html`<ox-popup-menuitem label=${t('make-private', 'Make private')} @select=${() => this.setVisibility(entry, 'private')}></ox-popup-menuitem>`
           : nothing}
-      </span>
-      </details>
-    </div>`
+        <ox-popup-menuitem
+          label=${actions.unhide ? t('unhide', 'Show in my list') : t('hide', 'Hide from my list')}
+          @select=${() => this.setHidden(entry, !entry.hidden)}></ox-popup-menuitem>
+        ${actions.remove ? html`<ox-popup-menuitem label=${t('remove', 'Delete')} @select=${() => this.askRemove(entry, name)}></ox-popup-menuitem>` : nothing}
+      `,
+      top: at.bottom,
+      right: window.innerWidth - at.right,
+      parent: document.body
+    })
   }
 
   /** Before what cannot be taken back - the platform's confirm, [Cancel][OK] (decided 2026-09-25, §7-3). */

package/client/components/assistant-session-toolbar.ts

@@ -31,6 +31,9 @@ export class AssistantSessionToolbar extends LitElement {
     [role=tab]:hover { background: color-mix(in srgb, var(--primary-color, #007f87) 7%, transparent); color: var(--primary-color, #007f87); }
     [aria-selected=true] { color:var(--primary-color, #007f87); border-bottom-color: currentColor; font-weight:600; }
     .session-new { flex: none; padding: 0 7px; font-weight: 500; white-space: nowrap; }
+    /* The open conversation's name is one line - a long name is cut, and the whole of it is the tooltip. */
+    .list { flex: none; white-space: nowrap; }
+    .current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
     .session-new:hover, .history:hover { color: var(--primary-color, #007f87); background: color-mix(in srgb, var(--primary-color, #007f87) 7%, transparent); }
     .history { height: 24px; margin: 1px 0 0 4px; padding: 0 5px; font-size: 11px; color: var(--tertiary-color, #88939a); }
     :host([compact]) .controls { gap: 3px; min-height: 24px; }
@@ -47,20 +50,25 @@ export class AssistantSessionToolbar extends LitElement {
     this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }))
   }
 
+  private get currentName(): string {
+    return this.sessions.find(session => session.id === this.sessionId)?.name || i18next.t('ai-assistant.session.new', { defaultValue: 'New conversation' })
+  }
+
   render() {
     const label = i18next.t('ai-assistant.session.history', { defaultValue: 'Conversation history' })
     return html`
       <div class="controls">
-        ${this.singleConversation ? html`<button @click=${() => this.emit('assistant-session-history')}>${i18next.t('ai-assistant.session.list', { defaultValue: 'Conversations' })}</button><span class="tabs">${this.sessions.find(session => session.id === this.sessionId)?.name || i18next.t('ai-assistant.session.new', { defaultValue: 'New conversation' })}</span>` : nothing}
+        ${this.singleConversation ? html`<button class="list" @click=${() => this.emit('assistant-session-history')}>${i18next.t('ai-assistant.session.list', { defaultValue: 'Conversations' })}</button><span class="current" title=${this.currentName}>${this.currentName}</span>` : nothing}
         ${this.temporary || this.singleConversation ? nothing : html`<div class="tabs" role="tablist" aria-label=${label}>
           ${!this.sessionId ? html`<button role="tab" aria-selected="true">${i18next.t('ai-assistant.session.new', { defaultValue: 'New conversation' })}</button>` : nothing}
           ${assistantRecentSessions(this.sessions, this.sessionId, this.historyEnabled ? this.maxTabs : this.sessions.length).map((session, index) => html`<button role="tab" aria-selected=${session.id === this.sessionId ? 'true' : 'false'}
             ?disabled=${this.disabled || this.loading} title=${session.name || `${label} ${index + 1}`}
             @click=${() => this.emit('assistant-session-select', { sessionId: session.id })}>${session.name || `${label} ${index + 1}`}</button>`)}
         </div>`}
-        <button class="session-new" ?disabled=${this.disabled || this.loading || !!this.error}
+        <!-- A conversation not yet started is already the new one - offering another names it twice. -->
+        ${this.sessionId ? html`<button class="session-new" ?disabled=${this.disabled || this.loading || !!this.error}
           title=${i18next.t('ai-assistant.session.reset-help', { defaultValue: 'Keep previous history and your work, and start a new conversation. Previous messages are excluded from subsequent requests.' })}
-          @click=${() => this.emit('assistant-session-reset')}>+ ${i18next.t('ai-assistant.session.new', { defaultValue: 'New conversation' })}</button>
+          @click=${() => this.emit('assistant-session-reset')}>+ ${i18next.t('ai-assistant.session.new', { defaultValue: 'New conversation' })}</button>` : nothing}
       </div>
       ${this.historyEnabled && !this.singleConversation ? html`<button class="history" ?disabled=${this.loading || this.disabled}
         @click=${() => this.emit('assistant-session-history')}>${i18next.t('ai-assistant.session.all', { defaultValue: 'All History' })}</button>` : nothing}

package/client/components/chat-input-builder.ts

@@ -46,6 +46,8 @@ export interface ChatMutationInputArgs {
    * ones above. Omitted for a surface that declares no mode.
    */
   mode?: { kind: string; target?: string }
+  /** The AI agent the person picked. Omitted, the domain default answers. */
+  agentId?: string
 }
 
 /**
@@ -71,7 +73,8 @@ export function buildChatMutationInput(args: ChatMutationInputArgs): Record<stri
     componentSchemas: args.componentSchemas,
     selectedRefids: args.selectedRefids,
     ...(args.mentions && args.mentions.length > 0 && { mentions: args.mentions }),
-    ...(args.mode?.kind ? { mode: { kind: args.mode.kind, ...(args.mode.target ? { target: args.mode.target } : {}) } } : {})
+    ...(args.mode?.kind ? { mode: { kind: args.mode.kind, ...(args.mode.target ? { target: args.mode.target } : {}) } } : {}),
+    ...(args.agentId ? { agentId: args.agentId } : {})
   }
 }
 
@@ -96,6 +99,8 @@ export interface AssistantChatInputArgs {
   hostContext?: any
   /** Files stored with the conversation by attachToConversation, sent with this turn. */
   attachmentIds?: string[]
+  /** The AI agent the person picked. Omitted, the domain default answers. */
+  agentId?: string
 }
 
 /**
@@ -119,6 +124,7 @@ export function buildAssistantChatInput(args: AssistantChatInputArgs): Record<st
     mode: { kind: args.mode.kind, ...(args.mode.target ? { target: args.mode.target } : {}) },
     ...(args.truncateAfterMessageId ? { truncateAfterMessageId: args.truncateAfterMessageId } : {}),
     ...(args.hostContext ? { hostContext: args.hostContext } : {}),
-    ...(args.attachmentIds?.length ? { attachmentIds: args.attachmentIds } : {})
+    ...(args.attachmentIds?.length ? { attachmentIds: args.attachmentIds } : {}),
+    ...(args.agentId ? { agentId: args.agentId } : {})
   }
 }