Add conversation system message

internal/service/static/render.js

@@ -41,6 +41,7 @@ export class Renderer {
       'tpl-reasoning-message',
     );
     this.$tplToolMessage = document.getElementById('tpl-tool-message');
+    this.$tplSystemMessage = document.getElementById('tpl-system-message');
   }
 
   // --- Full / incremental render ---
@@ -611,6 +612,57 @@ export class Renderer {
     this.scrollToBottom();
   }
 
+  /**
+   * renderSystemMessage renders the system message block.
+   * @param {string} content
+   */
+  renderSystemMessage(content) {
+    this._renderSystemMessage(content);
+  }
+
+  /**
+   * reRenderSystemMessage replaces the system message block in the DOM.
+   * @param {string} content
+   */
+  reRenderSystemMessage(content) {
+    const $old = this.$chat.querySelector('[data-id="system"]');
+    if (!$old) return;
+
+    const $msg =
+      this.$tplSystemMessage.content.cloneNode(true).firstElementChild;
+    $msg.dataset.id = 'system';
+
+    const $content = $msg.querySelector('.message__content');
+    if (content?.trim()) {
+      $content.textContent = content;
+      $msg.dataset.copyText = content;
+    } else {
+      $content.innerHTML =
+        '<em class="message__placeholder">System Default</em>';
+      $msg.dataset.copyText = '';
+    }
+
+    $old.replaceWith($msg);
+  }
+
+  _renderSystemMessage(content, _meta = null) {
+    const $msg =
+      this.$tplSystemMessage.content.cloneNode(true).firstElementChild;
+    $msg.dataset.id = 'system';
+
+    const $content = $msg.querySelector('.message__content');
+    if (content?.trim()) {
+      $content.textContent = content;
+      $msg.dataset.copyText = content;
+    } else {
+      $content.innerHTML =
+        '<em class="message__placeholder">System Default</em>';
+      $msg.dataset.copyText = '';
+    }
+
+    this.$chat.insertBefore($msg, this.$chatLoading);
+  }
+
   _populateDebugPanel($dl, meta) {
     if (meta?.voice) this._appendDebugRow($dl, 'Voice', meta.voice);
     if (meta?.usage) {