Add conversations modal

internal/service/static/js/api.js

@@ -55,6 +55,27 @@ export class Api {
 
   // --- Conversations ---
 
+  /**
+   * listConversations returns every conversation of the user, most
+   * recently updated first. Each row holds id, title, created_at,
+   * and updated_at. It holds no messages.
+   * @returns {Promise<Array<Object>>}
+   */
+  async listConversations() {
+    return this._json('/conversations');
+  }
+
+  /**
+   * getConversation returns one conversation row. Use it to verify
+   * that a conversation exists before the local selection moves to
+   * it. It returns no messages.
+   * @param {string} id
+   * @returns {Promise<Object>}
+   */
+  async getConversation(id) {
+    return this._json(`/conversations/${encodeURIComponent(id)}`);
+  }
+
   /**
    * createConversation saves a new conversation with its initial
    * system message. An empty systemMessage makes the server use its

internal/service/static/js/main.js

@@ -19,7 +19,7 @@ import { Api, ApiError } from './api.js';
 import { Storage } from './storage.js';
 import { STT, VOICE_MAP } from './stt.js';
 import { TTSPlayer } from './tts.js';
-import { extractText, UI } from './ui.js';
+import { conversationLabel, extractText, UI } from './ui.js';
 import { WakeLock } from './wakelock.js';
 
 // The tool result saved when the user denies a tool call. A denied
@@ -69,6 +69,9 @@ class Odidere {
         onSettingsOpen: () =>
           this.ui.setSystemMessageDraft(this.storage.getSystemMessage()),
         onSaveSystemMessage: (text) => this.storage.setSystemMessage(text),
+        onConversationsOpen: () => this.loadConversations(),
+        onConversationSearch: (query) => this.filterConversations(query),
+        onSelectConversation: (id) => this.switchConversation(id),
         onPushToTalkStart: () => this.handlePushToTalkStart(),
         onPushToTalkEnd: () => this.handlePushToTalkEnd(),
         onTranscribeStart: () => this.handleTranscribeStart(),
@@ -106,6 +109,8 @@ class Odidere {
 
     // --- In-memory state ---
     this.conversationId = null;
+    // The rows the conversation picker shows, fetched on open.
+    this.conversations = [];
     this.messages = new Map();
     this.drafts = new Map();
     this.busy = false;
@@ -716,6 +721,99 @@ class Odidere {
     this.updateSendEnabled();
   }
 
+  // ====================
+  // CONVERSATIONS
+  // ====================
+
+  /**
+   * loadConversations fetches the list for the picker and renders
+   * it. The server sends the rows most recently updated first, so
+   * the picker shows them in that order without sorting.
+   */
+  async loadConversations() {
+    try {
+      this.conversations = await this.api.listConversations();
+    } catch (error) {
+      this.ui.renderError(`Failed to list conversations: ${error.message}`);
+      this.ui.closeConversations();
+      return;
+    }
+    this.ui.renderConversationList(this.conversations, {
+      currentId: this.conversationId,
+    });
+  }
+
+  /**
+   * filterConversations renders the conversations whose label
+   * matches the search text. The label is the title, or the
+   * creation date when the conversation has none.
+   * @param {string} query
+   */
+  filterConversations(query) {
+    const needle = query.trim().toLowerCase();
+    const rows = needle
+      ? this.conversations.filter((conversation) =>
+          conversationLabel(conversation).toLowerCase().includes(needle),
+        )
+      : this.conversations;
+    this.ui.renderConversationList(rows, {
+      currentId: this.conversationId,
+    });
+  }
+
+  /**
+   * switchConversation selects another conversation. The current
+   * one stays on the server; only the local view changes.
+   *
+   * The target is read first, so a conversation that another client
+   * deleted does not replace the one in view.
+   *
+   * A run in progress is detached, not stopped: the server keeps an
+   * accepted inference running after the client disconnects, and a
+   * later switch back re-attaches to it and replays what it saved.
+   *
+   * @param {string} id
+   */
+  async switchConversation(id) {
+    this.ui.closeConversations();
+    if (id === this.conversationId) return;
+
+    try {
+      await this.api.getConversation(id);
+    } catch (error) {
+      this.ui.renderError(`Failed to open conversation: ${error.message}`);
+      return;
+    }
+
+    this.tts.stop();
+    // End delivery of the current streams. An accepted inference
+    // keeps running on the server; see the comment above.
+    this.syncController?.abort();
+    if (this.busy) {
+      this.runController?.abort();
+      if (this.currentRun) {
+        try {
+          await this.currentRun;
+        } catch { }
+      }
+    }
+
+    // Drop the local state of the old selection. resync reads and
+    // renders the whole history of the new selection and caches it.
+    this.messages.clear();
+    this.clearDrafts();
+    this.totalTokens = 0;
+    this.lastVoice = '';
+    this.storage.clearConversation();
+    this.ui.setAutoScroll(false);
+    this.ui.clearChat();
+    this.ui.setPendingApprovals([]);
+    this.ui.updateContext(0, null);
+    this.conversationId = id;
+    await this.resync();
+    this.updateSendEnabled();
+  }
+
   // ====================
   // SYNC
   // ====================

internal/service/static/js/ui.js

@@ -39,6 +39,27 @@ export function extractText(content) {
     .join('\n');
 }
 
+// Conversations created from this UI have no title. Their label
+// falls back to the creation date, so the picker stays readable.
+// Both dates render in the browser locale.
+const CONVERSATION_DATE = new Intl.DateTimeFormat(undefined, {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+});
+
+/**
+ * conversationLabel returns the text that names a conversation in
+ * the picker: its title, or its creation date when it has none.
+ * @param {{title: string | null, created_at: string}} conversation
+ * @returns {string}
+ */
+export function conversationLabel(conversation) {
+  return (
+    conversation.title ??
+    CONVERSATION_DATE.format(new Date(conversation.created_at))
+  );
+}
+
 export class UI {
   /**
    * @param {Object} options
@@ -88,6 +109,18 @@ export class UI {
     this.$systemMessageInput = document.getElementById('system-message-input');
     this.$saveSystemMessage = document.getElementById('save-system-message');
 
+    // Conversations modal.
+    this.$conversations = document.getElementById('conversations');
+    this.$conversationsOverlay = document.getElementById(
+      'conversations-overlay',
+    );
+    this.$conversationsClose = document.getElementById('conversations-close');
+    this.$conversationsSearch = document.getElementById('conversation-search');
+    this.$conversationsList = document.getElementById('conversation-list');
+    this.$tplConversationItem = document.getElementById(
+      'tpl-conversation-item',
+    );
+
     // Compose settings modal.
     this.$composeSettings = document.getElementById('compose-settings');
     this.$composeSettingsOverlay = document.getElementById(
@@ -824,6 +857,65 @@ export class UI {
     this.$composeSettingsClose.focus();
   }
 
+  // ====================
+  // CONVERSATIONS MODAL
+  // ====================
+
+  /**
+   * openConversations shows the conversation picker and asks
+   * main.js for a fresh list. The search field starts empty and
+   * holds the caret, so typing filters the list at once.
+   */
+  openConversations() {
+    this.$conversationsSearch.value = '';
+    this.$conversationsOverlay.classList.add('open');
+    this.$conversationsSearch.focus();
+    this.handlers.onConversationsOpen();
+  }
+
+  /** closeConversations hides the picker. */
+  closeConversations() {
+    this.$conversationsOverlay.classList.remove('open');
+    this.$conversations.focus();
+  }
+
+  /**
+   * renderConversationList fills the picker with the rows given,
+   * in the order given. main.js filters the rows; the row that
+   * matches currentId is marked as the conversation in view. The
+   * search field decides which empty message shows.
+   * @param {Array<{id: string, title: string | null, created_at: string, updated_at: string}>} rows
+   * @param {{currentId?: string | null}} [options]
+   */
+  renderConversationList(rows, { currentId = null } = {}) {
+    this.$conversationsList.replaceChildren();
+    if (rows.length === 0) {
+      const $empty = this.document.createElement('div');
+      $empty.className = 'conversations__empty';
+      $empty.textContent = this.$conversationsSearch.value
+        ? 'No conversations match the search.'
+        : 'No conversations yet.';
+      this.$conversationsList.appendChild($empty);
+      return;
+    }
+    for (const conversation of rows) {
+      const $item =
+        this.$tplConversationItem.content.cloneNode(true).firstElementChild;
+      $item.dataset.conversationId = conversation.id;
+      $item.querySelector('.conversations__item-title').textContent =
+        conversationLabel(conversation);
+      $item.querySelector('.conversations__item-updated').textContent =
+        `Updated ${CONVERSATION_DATE.format(
+          new Date(conversation.updated_at),
+        )}`;
+      if (conversation.id === currentId) {
+        $item.classList.add('conversations__item--current');
+        $item.setAttribute('aria-current', 'true');
+      }
+      this.$conversationsList.appendChild($item);
+    }
+  }
+
   // ====================
   // MUTE
   // ====================
@@ -1025,6 +1117,35 @@ export class UI {
       this.handlers.onVoiceChange(this.$voice.value),
     );
 
+    // Conversations modal. The toolbar button opens it through the
+    // data-action route; these listeners close it and report the
+    // search text and the selected row.
+    this.$conversationsClose.addEventListener('click', () =>
+      this.closeConversations(),
+    );
+    this.$conversationsOverlay.addEventListener('click', (event) => {
+      if (event.target === this.$conversationsOverlay) {
+        this.closeConversations();
+      }
+    });
+    this.document.addEventListener('keydown', (event) => {
+      if (
+        event.key === 'Escape' &&
+        this.$conversationsOverlay.classList.contains('open')
+      ) {
+        event.preventDefault();
+        this.closeConversations();
+      }
+    });
+    this.$conversationsSearch.addEventListener('input', () =>
+      this.handlers.onConversationSearch(this.$conversationsSearch.value),
+    );
+    this.$conversationsList.addEventListener('click', (event) => {
+      const $item = event.target.closest('[data-conversation-id]');
+      if (!$item) return;
+      this.handlers.onSelectConversation($item.dataset.conversationId);
+    });
+
     // Compose settings modal.
     this.$composeSettings.addEventListener('click', () =>
       this.handlers.onComposeSettings(),
@@ -1152,6 +1273,10 @@ export class UI {
         this._clearConfirm();
         this.handlers.onLocationToggle();
         break;
+      case 'conversations':
+        this._clearConfirm();
+        this.openConversations();
+        break;
       case 'settings':
         this._clearConfirm();
         this._openSettings();