feat(dees-chart-log): add xterm search addon support and enhance chart log demo with structured/raw (Docker-like) logs and themeable styles

ts_web/services/DeesServiceLibLoader.ts

@@ -25,6 +25,24 @@ export interface IXtermFitAddonBundle {
   FitAddon: typeof FitAddon;
 }
 
+/**
+ * Bundle type for xterm-addon-search
+ * SearchAddon is loaded from CDN, so we use a minimal interface
+ */
+export interface IXtermSearchAddonBundle {
+  SearchAddon: new () => IXtermSearchAddon;
+}
+
+/**
+ * Minimal interface for xterm SearchAddon
+ */
+export interface IXtermSearchAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+  findNext(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+  findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -56,6 +74,7 @@ export class DeesServiceLibLoader {
   // Cached library references
   private xtermLib: IXtermBundle | null = null;
   private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
+  private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
   private apexChartsLib: typeof ApexChartsType | null = null;
   private tiptapLib: ITiptapBundle | null = null;
@@ -63,6 +82,7 @@ export class DeesServiceLibLoader {
   // Loading promises to prevent duplicate concurrent loads
   private xtermLoadingPromise: Promise<IXtermBundle> | null = null;
   private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
+  private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
   private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
@@ -134,6 +154,32 @@ export class DeesServiceLibLoader {
     return this.xtermFitAddonLoadingPromise;
   }
 
+  /**
+   * Load xterm-addon-search from CDN
+   * @returns Promise resolving to SearchAddon class
+   */
+  public async loadXtermSearchAddon(): Promise<IXtermSearchAddonBundle> {
+    if (this.xtermSearchAddonLib) {
+      return this.xtermSearchAddonLib;
+    }
+
+    if (this.xtermSearchAddonLoadingPromise) {
+      return this.xtermSearchAddonLoadingPromise;
+    }
+
+    this.xtermSearchAddonLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/xterm-addon-search@${CDN_VERSIONS.xtermAddonSearch}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.xtermSearchAddonLib = {
+        SearchAddon: module.SearchAddon,
+      };
+      return this.xtermSearchAddonLib;
+    })();
+
+    return this.xtermSearchAddonLoadingPromise;
+  }
+
   /**
    * Inject xterm CSS styles into the document head
    */
@@ -257,6 +303,7 @@ export class DeesServiceLibLoader {
     await Promise.all([
       this.loadXterm(),
       this.loadXtermFitAddon(),
+      this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
       this.loadApexCharts(),
       this.loadTiptap(),
@@ -266,12 +313,14 @@ export class DeesServiceLibLoader {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
       case 'xtermFitAddon':
         return this.xtermFitAddonLib !== null;
+      case 'xtermSearchAddon':
+        return this.xtermSearchAddonLib !== null;
       case 'highlightJs':
         return this.highlightJsLib !== null;
       case 'apexCharts':

ts_web/services/index.ts

@@ -1,3 +1,3 @@
 export { DeesServiceLibLoader } from './DeesServiceLibLoader.js';
-export type { IXtermBundle, IXtermFitAddonBundle, ITiptapBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';

ts_web/services/versions.ts

@@ -5,6 +5,7 @@
 export const CDN_VERSIONS = {
   xterm: '5.3.0',
   xtermAddonFit: '0.8.0',
+  xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
   apexcharts: '5.3.6',
   tiptap: '2.23.0',