@things-factory/ai-assistant 10.1.154 → 10.1.155

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

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js';
 import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import '@operato/popup/ox-popup-menu.js';
 import { type AssistantSessionAdmin } from '../utils/assistant-session-admin.js';
 /**
  * The conversations on one anchor, managed - `<ox-assistant-session-manager>`.
@@ -32,18 +33,14 @@ export declare class AssistantSessionManager extends LitElement {
     anchorId: string;
     /** The conversation the dock has open - marked in the list. */
     sessionId: string;
-    scopeLabel: string;
     /** The doors. Replaceable for tests; a host normally leaves it. */
     admin: AssistantSessionAdmin;
     /** The conversation kind (mode) open in the dock - the list's default scope (§2-6). */
     kind: string;
-    /** kind → the words people know it by (the modes' labels), for each row. */
-    kindLabels: Record<string, string>;
     private entries;
     private total;
     private hiddenCount;
     private search;
-    private allKinds;
     private whose;
     private visibility;
     private includeHidden;
@@ -52,9 +49,8 @@ export declare class AssistantSessionManager extends LitElement {
     private loading;
     private error;
     private renamingId;
-    private filtersOpen;
-    private get hasFilters();
-    private resetFilters;
+    private get filtering();
+    private clearFilters;
     private generation;
     private searchTimer?;
     /** Read the list again - the host calls this after it opened or started a conversation. */
@@ -74,6 +70,11 @@ export declare class AssistantSessionManager extends LitElement {
     private _removeSession;
     render(): TemplateResult;
     private renderRow;
+    /**
+     * 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;
     /** Before what cannot be taken back - the platform's confirm, [Cancel][OK] (decided 2026-09-25, §7-3). */
     private ask;
     private askRemove;

package/dist-client/components/assistant-session-manager.js

@@ -4,6 +4,8 @@ import { css, html, LitElement, nothing } from 'lit';
 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, sessionActions } from '../utils/assistant-session-admin.js';
 const PAGE = 30;
 const t = (key, defaultValue, options = {}) => i18next.t(`ai-assistant.session.${key}`, { defaultValue, ...options });
@@ -39,18 +41,14 @@ let AssistantSessionManager = class AssistantSessionManager extends LitElement {
         this.anchorId = '';
         /** The conversation the dock has open - marked in the list. */
         this.sessionId = '';
-        this.scopeLabel = '';
         /** The doors. Replaceable for tests; a host normally leaves it. */
         this.admin = assistantSessionAdmin;
         /** The conversation kind (mode) open in the dock - the list's default scope (§2-6). */
         this.kind = '';
-        /** kind → the words people know it by (the modes' labels), for each row. */
-        this.kindLabels = {};
         this.entries = [];
         this.total = 0;
         this.hiddenCount = 0;
         this.search = '';
-        this.allKinds = false;
         this.whose = 'all';
         this.visibility = 'all';
         this.includeHidden = false;
@@ -59,33 +57,28 @@ let AssistantSessionManager = class AssistantSessionManager extends LitElement {
         this.loading = false;
         this.error = '';
         this.renamingId = '';
-        this.filtersOpen = false;
         this.generation = 0;
     }
     static { this.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);
     }
 
@@ -93,14 +86,14 @@ let AssistantSessionManager = 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;
@@ -122,28 +115,32 @@ let AssistantSessionManager = 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 {
@@ -153,8 +150,18 @@ let AssistantSessionManager = 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 {
@@ -168,7 +175,7 @@ let AssistantSessionManager = 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;
     }
@@ -216,33 +223,9 @@ let AssistantSessionManager = 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 {
@@ -323,14 +306,18 @@ let AssistantSessionManager = class AssistantSessionManager extends LitElement {
       --md-icon-size: 16px;
     }
   `; }
-    get hasFilters() {
-        return !!this.search.trim() || this.allKinds || this.whose !== 'all' || this.visibility !== 'all' || this.includeHidden || this.unreadOnly;
-    }
-    resetFilters() {
+    /*
+     * 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.
+     */
+    get filtering() {
+        return !!this.search.trim() || this.whose !== 'all' || this.visibility !== 'all' || this.includeHidden || this.unreadOnly;
+    }
+    clearFilters() {
         clearTimeout(this.searchTimer);
         this.refilter(() => {
             this.search = '';
-            this.allKinds = false;
             this.whose = 'all';
             this.visibility = 'all';
             this.includeHidden = this.unreadOnly = false;
@@ -356,7 +343,7 @@ let AssistantSessionManager = 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,
@@ -462,7 +449,6 @@ let AssistantSessionManager = class AssistantSessionManager extends LitElement {
     render() {
         const shown = this.entries.length;
         return html `
-      <div class="scope-label">${this.scopeLabel}</div>
       <div class="bar">
         <input
           .value=${this.search}
@@ -476,15 +462,7 @@ let AssistantSessionManager = 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) => this.refilter(() => (this.allKinds = e.target.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) => this.refilter(() => (this.whose = e.target.value))}>
           <option value="all">${t('filter-all', 'All')}</option>
@@ -501,13 +479,13 @@ let AssistantSessionManager = class AssistantSessionManager extends LitElement {
           @change=${(e) => this.refilter(() => (this.unreadOnly = e.target.checked))} />${t('filter-unread', 'Unread')}</label>
         <label><input type="checkbox" .checked=${this.includeHidden}
           @change=${(e) => this.refilter(() => (this.includeHidden = e.target.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>`
@@ -550,45 +528,43 @@ let AssistantSessionManager = 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) => { if (e.key === 'Escape') {
-            e.stopPropagation();
-            const details = e.currentTarget;
-            details.open = false;
-            details.querySelector('summary')?.focus();
-        } }}>
-      <summary aria-label=${t('manage', 'Manage conversation')}>⋯</summary>
-      <span class="acts" @click=${(e) => 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}
-        ${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>`
-            : nothing}
-      </span>
-      </details>
+      <button
+        class="more-menu"
+        aria-label=${t('manage', 'Manage conversation')}
+        title=${t('manage', 'Manage conversation')}
+        @click=${(e) => 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.
+     */
+    openRowMenu(event, entry, name) {
+        event.stopPropagation();
+        const actions = sessionActions(entry);
+        const isPrivate = entry.visibility === 'private';
+        const at = event.currentTarget.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 `<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}
+        <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). */
     async ask(title, text, confirmText) {
         return !!(await OxPrompt.open({
@@ -622,10 +598,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], AssistantSessionManager.prototype, "sessionId", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], AssistantSessionManager.prototype, "scopeLabel", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
@@ -634,10 +606,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], AssistantSessionManager.prototype, "kind", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], AssistantSessionManager.prototype, "kindLabels", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
@@ -654,10 +622,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], AssistantSessionManager.prototype, "search", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], AssistantSessionManager.prototype, "allKinds", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -690,10 +654,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], AssistantSessionManager.prototype, "renamingId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], AssistantSessionManager.prototype, "filtersOpen", void 0);
 AssistantSessionManager = __decorate([
     customElement('ox-assistant-session-manager')
 ], AssistantSessionManager);