@jungjaehoon/mama-os 0.18.2 → 0.19.0

package/public/viewer/src/modules/chat.ts

@@ -484,11 +484,18 @@ export class ChatModule {
     this.addUserMessage(message);
     this.enableSend(false);
 
+    // Include current viewer tab context (SmartStore ChatPanel pattern)
+    const tabIndicator = document.getElementById('chat-tab-indicator');
+    const viewerContext = {
+      currentTab: tabIndicator?.textContent?.toLowerCase() || 'unknown',
+    };
+
     this.ws.send(
       JSON.stringify({
         type: 'send',
         sessionId: this.sessionId,
         content: message,
+        viewerContext,
       })
     );
 
@@ -1081,34 +1088,27 @@ export class ChatModule {
    * Update chat status
    */
   updateStatus(status: string): void {
-    const statusEl = getElementByIdOrNull<HTMLDivElement>('chat-status');
+    const statusEl = getElementByIdOrNull<HTMLElement>('chat-status');
     if (!statusEl) {
       logger.warn('Status element not found');
       return;
     }
 
-    const indicator = statusEl.querySelector('.status-indicator');
-    const text = statusEl.querySelector('span:not(.status-indicator)');
-
-    if (!indicator || !text) {
-      logger.warn('Status indicator or text not found');
-      return;
-    }
-
-    indicator.className = 'status-indicator ' + status;
+    // #chat-status IS the indicator element (not a wrapper with children)
+    statusEl.className = 'status-indicator w-1.5 h-1.5 rounded-full flex-shrink-0 ' + status;
 
     switch (status) {
       case 'connected':
-        text.textContent = 'Connected';
+        statusEl.title = 'Connected';
         break;
       case 'disconnected':
-        text.textContent = 'Disconnected';
+        statusEl.title = 'Disconnected';
         break;
       case 'connecting':
-        text.textContent = 'Connecting...';
+        statusEl.title = 'Connecting...';
         break;
       default:
-        text.textContent = status;
+        statusEl.title = status;
     }
   }
 
@@ -2042,6 +2042,12 @@ export class ChatModule {
     const panel = getElementByIdOrNull<HTMLDivElement>('chat-panel');
     const header = getElementByIdOrNull<HTMLDivElement>('chat-header');
 
+    // Right panel mode: no bubble, auto-init session
+    const isRightPanel = !bubble && !!document.getElementById('chat-panel-wrapper');
+    if (isRightPanel && !this.ws) {
+      this.initSession();
+    }
+
     if (bubble) {
       bubble.addEventListener('click', () => this.togglePanel());
     }
@@ -2049,6 +2055,9 @@ export class ChatModule {
       closeBtn.addEventListener('click', () => this.togglePanel(false));
     }
 
+    // Right panel mode: skip drag/resize handlers (handled by viewer.html inline JS)
+    if (isRightPanel) return;
+
     if (panel && header) {
       let dragging = false;
       let startX = 0;

package/public/viewer/src/modules/connector-feed.ts

@@ -1,6 +1,7 @@
 import { API, type ConnectorActivitySummary, type ConnectorFeedChannel } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { createCollapsible, createResizeHandle } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 
 const logger = new DebugLogger('ConnectorFeed');
 
@@ -101,6 +102,17 @@ export class ConnectorFeedModule {
 
   private renderConnectorList(connectors: ConnectorActivitySummary[]): void {
     if (!this.container) return;
+    reportPageContext('feed', {
+      pageType: 'connector-list',
+      selectedConnector: this.selectedConnector,
+      connectorCount: connectors.length,
+      connectors: connectors.slice(0, 10).map((c) => ({
+        connector: c.connector,
+        status: c.status,
+        channel: c.channel,
+        timestamp: c.timestamp,
+      })),
+    });
 
     if (connectors.length === 0) {
       this.container.innerHTML =
@@ -235,10 +247,24 @@ export class ConnectorFeedModule {
 
   private showMobileList(): void {
     this.mobileShowingDetail = false;
+    this.selectedConnector = null;
     const list = document.getElementById('connector-list');
     const detail = document.getElementById('connector-detail');
     if (list) list.style.display = '';
     if (detail) detail.style.display = 'none';
+    reportPageContext('feed', {
+      pageType: 'connector-list',
+      selectedConnector: null,
+      connectorCount: this.cachedConnectors.length,
+      channelCount: 0,
+      channels: [],
+      connectors: this.cachedConnectors.slice(0, 10).map((c) => ({
+        connector: c.connector,
+        status: c.status,
+        channel: c.channel,
+        timestamp: c.timestamp,
+      })),
+    });
   }
 
   private handleResize(): void {
@@ -280,6 +306,15 @@ export class ConnectorFeedModule {
     name: string,
     feed: ConnectorFeedChannel[]
   ): void {
+    reportPageContext('feed', {
+      pageType: 'connector-detail',
+      selectedConnector: name,
+      channelCount: feed.length,
+      channels: feed.slice(0, 10).map((channel) => ({
+        channel: channel.channel,
+        itemCount: channel.items.length,
+      })),
+    });
     const icon = CONNECTOR_ICON[name] || '\u{1F517}';
 
     // Clear and build header

package/public/viewer/src/modules/dashboard.ts

@@ -12,6 +12,7 @@ import {
 } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { createCollapsible } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 
 declare const DOMPurify: { sanitize(html: string): string };
 
@@ -85,6 +86,18 @@ export class DashboardModule {
   private container: HTMLElement | null = null;
   private eventSource: EventSource | null = null;
   private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private selectedProject: string | null = null;
+  private selectedConnector: string | null = null;
+
+  private getCurrentPageType(): 'dashboard-overview' | 'dashboard-project' | 'dashboard-connector' {
+    if (this.selectedConnector) {
+      return 'dashboard-connector';
+    }
+    if (this.selectedProject) {
+      return 'dashboard-project';
+    }
+    return 'dashboard-overview';
+  }
 
   init(): void {
     this.container = document.getElementById('dashboard-slots');
@@ -164,6 +177,17 @@ export class DashboardModule {
     briefingSlot: ReportSlot | null;
   }): void {
     if (!this.container) return;
+    reportPageContext('dashboard', {
+      pageType: this.getCurrentPageType(),
+      selectedProject: this.selectedProject,
+      selectedConnector: this.selectedConnector,
+      noticeCount: data.notices.length,
+      pipelineCount: data.pipeline.length,
+      connectorCount: data.connectors.length,
+      totalDecisions: data.totalDecisions,
+      agentCount: data.agentCount,
+      summary: data.summary.text?.slice(0, 300) ?? '',
+    });
 
     const emptyEl = document.getElementById('slots-empty');
     const hasData =
@@ -276,6 +300,12 @@ export class DashboardModule {
           if (isOpen) {
             detail.style.display = 'none';
             arrow.textContent = '\u25B6';
+            this.selectedProject = null;
+            reportPageContext('dashboard', {
+              pageType: this.getCurrentPageType(),
+              selectedProject: null,
+              selectedConnector: this.selectedConnector,
+            });
           } else {
             detail.style.display = '';
             arrow.textContent = '\u25BC';
@@ -283,6 +313,13 @@ export class DashboardModule {
             if (projectName && detail.textContent === 'Loading...') {
               this.loadPipelineDetail(detail, projectName);
             }
+            this.selectedProject = projectName ?? null;
+            this.selectedConnector = null;
+            reportPageContext('dashboard', {
+              pageType: 'dashboard-project',
+              selectedProject: this.selectedProject,
+              selectedConnector: this.selectedConnector,
+            });
           }
         });
       });
@@ -348,6 +385,12 @@ export class DashboardModule {
           if (isOpen) {
             detail.style.display = 'none';
             arrow.textContent = '\u25B6';
+            this.selectedConnector = null;
+            reportPageContext('dashboard', {
+              pageType: this.getCurrentPageType(),
+              selectedProject: this.selectedProject,
+              selectedConnector: null,
+            });
           } else {
             detail.style.display = '';
             arrow.textContent = '\u25BC';
@@ -355,6 +398,13 @@ export class DashboardModule {
             if (connName && detail.textContent === 'Loading...') {
               this.loadConnectorDetail(detail, connName);
             }
+            this.selectedConnector = connName ?? null;
+            this.selectedProject = null;
+            reportPageContext('dashboard', {
+              pageType: 'dashboard-connector',
+              selectedProject: this.selectedProject,
+              selectedConnector: this.selectedConnector,
+            });
           }
         });
       });

package/public/viewer/src/modules/memory.ts

@@ -16,6 +16,7 @@ import { escapeHtml, debounce, showToast, getElementByIdOrNull } from '../utils/
 import { formatRelativeTime, truncateText } from '../utils/format.js';
 import { API, type MemorySearchItem } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 
 const logger = new DebugLogger('Memory');
 
@@ -121,6 +122,17 @@ export class MemoryModule {
       this.searchData = data.results || [];
       this.renderResults(this.searchData, query);
       this.setStatus(`Found ${this.searchData.length} decision(s)`, '');
+      reportPageContext('memory', {
+        pageType: 'memory-search',
+        query,
+        resultCount: this.searchData.length,
+        results: this.searchData.slice(0, 10).map((item) => ({
+          id: item.id ?? null,
+          topic: item.topic ?? null,
+          outcome: item.outcome ?? null,
+          similarity: item.similarity ?? null,
+        })),
+      });
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       logger.error('Search error:', message);
@@ -154,6 +166,17 @@ export class MemoryModule {
    */
   async showRelatedForMessage(message: string): Promise<void> {
     const results = await this.searchRelated(message);
+    reportPageContext('memory', {
+      pageType: 'memory-related',
+      query: message,
+      resultCount: results.length,
+      results: results.slice(0, 10).map((item) => ({
+        id: item.id ?? null,
+        topic: item.topic ?? null,
+        outcome: item.outcome ?? null,
+        similarity: item.similarity ?? null,
+      })),
+    });
 
     if (results.length > 0) {
       this.searchData = results;
@@ -170,6 +193,8 @@ export class MemoryModule {
 
       // Show notification
       showToast(`🧠 ${results.length} related MAMA decision(s) found`);
+    } else {
+      this.setStatus('No related decisions found', '');
     }
   }
 
@@ -253,6 +278,12 @@ export class MemoryModule {
       </div>
     `;
     this.setStatus('', '');
+    reportPageContext('memory', {
+      pageType: 'memory-search',
+      query: '',
+      resultCount: 0,
+      results: [],
+    });
     // Reinitialize Lucide icons for dynamic content
     if (typeof lucide !== 'undefined' && typeof window.lucideConfig !== 'undefined') {
       lucide.createIcons(window.lucideConfig);

package/public/viewer/src/modules/settings.ts

@@ -15,6 +15,7 @@
 import { showToast, escapeHtml, escapeAttr, getElementByIdOrNull } from '../utils/dom.js';
 import { formatModelName } from '../utils/format.js';
 import { DebugLogger } from '../utils/debug-logger.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 import {
   API,
   type ApiConfigResponse,
@@ -24,7 +25,6 @@ import {
   type EffortLevel,
   type McpServer,
   type McpServersResponse,
-  type MultiAgentAgent,
   type MultiAgentAgentsResponse,
   type SkillsResponse,
 } from '../utils/api.js';
@@ -352,6 +352,14 @@ export class SettingsModule {
         }
         return;
       }
+
+      const goAgentsButton = target.closest<HTMLElement>('[data-action="go-agents-tab"]');
+      if (goAgentsButton) {
+        e.preventDefault();
+        if (typeof window.switchTab === 'function') {
+          window.switchTab('agents');
+        }
+      }
     });
   }
 
@@ -459,6 +467,24 @@ export class SettingsModule {
     this.populateSkillsSection();
     this.populateTokenSection();
     this.populateCronSection();
+
+    reportPageContext('settings', {
+      pageType: 'settings-overview',
+      gateways: {
+        discord: this.config.discord?.enabled ?? false,
+        slack: this.config.slack?.enabled ?? false,
+        telegram: this.config.telegram?.enabled ?? false,
+        chatwork: this.config.chatwork?.enabled ?? false,
+      },
+      agent: {
+        backend: this.config.agent?.backend ?? 'claude',
+        model: this.config.agent?.model ?? null,
+        max_turns: this.config.agent?.max_turns ?? null,
+        timeout: this.config.agent?.timeout ?? null,
+      },
+      multiAgentCount: this.multiAgentData.agents.length,
+      mcpServerCount: this.mcpServersData.servers.length,
+    });
   }
 
   /**
@@ -1140,6 +1166,7 @@ export class SettingsModule {
 
   /**
    * Populate Multi-Agent Team section (F3)
+   * Agent editing has moved to the Agents tab — show redirect notice.
    */
   populateMultiAgentSection(): void {
     const container = getElementByIdOrNull<HTMLElement>('settings-multi-agent-container');
@@ -1147,101 +1174,14 @@ export class SettingsModule {
       return;
     }
 
-    const agents = this.multiAgentData?.agents || [];
-
-    if (agents.length === 0) {
-      container.innerHTML = `
-        <div class="bg-white border border-gray-200 rounded-lg p-3 text-xs text-gray-500">
-          No agents configured. Add agents in <code class="bg-gray-100 px-1 rounded">config.yaml</code>
-        </div>
-      `;
-      return;
-    }
-
-    // Tier badge colors
-    const tierColors: Record<number, string> = {
-      1: 'bg-indigo-100 text-indigo-700',
-      2: 'bg-green-100 text-green-700',
-      3: 'bg-yellow-100 text-yellow-700',
-    };
-
-    const agentCards = agents
-      .map((agent: MultiAgentAgent) => {
-        const tierValue = Number(agent.tier) || 1;
-        const tierColor = tierColors[tierValue] || tierColors[1];
-        const backend = (agent.backend || this.config?.agent?.backend || 'claude') as AgentBackend;
-        const normalizedModel = this.getNormalizedModelForBackend(backend, agent.model || '');
-        const agentId = agent.id || '';
-        const backendOptions = ['codex-mcp', 'claude']
-          .map(
-            (b) =>
-              `<option value="${escapeAttr(b)}" ${backend === b ? 'selected' : ''}>${escapeHtml(b)}</option>`
-          )
-          .join('');
-        const modelOptions = MODEL_OPTIONS[backend] || MODEL_OPTIONS.claude;
-        const modelOptionHtml = modelOptions
-          .map(
-            (m) =>
-              `<option value="${escapeAttr(m)}" ${m === normalizedModel ? 'selected' : ''}>${escapeHtml(formatModelName(m))}</option>`
-          )
-          .join('');
-
-        // Effort level (Claude 4.6 models only, max on Opus).
-        const supportsAgentEffort = this.supportsEffortModel(normalizedModel);
-        const selectedAgentEffort = this.normalizeEffortForModel(
-          normalizedModel,
-          (agent.effort || 'medium') as EffortLevel
-        );
-        const effortOptions = this.buildEffortOptions(normalizedModel, selectedAgentEffort);
-
-        // Permission flags — only check explicit tool_permissions, not tier
-        const canDelegate = agent.can_delegate ?? false;
-        const hasAllTools = agent.tool_permissions?.allowed?.includes('*') ?? false;
-
-        return `
-          <div class="bg-white border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow">
-            <!-- Header: Tier + Name + Toggle -->
-            <div class="flex items-center justify-between mb-2">
-              <div class="flex items-center gap-1.5">
-                <span class="${tierColor} text-[10px] font-bold px-1.5 py-0.5 rounded">T${escapeHtml(String(tierValue))}</span>
-                <span class="font-medium text-gray-900 text-xs" title="${escapeAttr(agent.display_name || agent.name)}">${escapeHtml(agent.display_name || agent.name)}</span>
-              </div>
-              <label class="relative inline-flex items-center cursor-pointer">
-                <input type="checkbox" class="sr-only peer" data-action="agent-toggle" data-agent-id="${escapeAttr(agentId)}" ${agent.enabled ? 'checked' : ''}>
-                <div class="w-7 h-4 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-green-500"></div>
-              </label>
-            </div>
-
-            <!-- Backend -->
-            <select id="agent-backend-${escapeAttr(agentId)}" data-action="agent-backend" data-agent-id="${escapeAttr(agentId)}" class="w-full text-[11px] rounded border border-gray-200 px-1.5 py-1 bg-gray-50 mb-1">${backendOptions}</select>
-            <!-- Model -->
-            <select id="agent-model-${escapeAttr(agentId)}" data-action="agent-model" data-agent-id="${escapeAttr(agentId)}" class="w-full text-[11px] rounded border border-gray-200 px-1.5 py-1 bg-gray-50 mb-1">${modelOptionHtml}</select>
-            <!-- Effort (Claude 4.6 only) -->
-            <div id="agent-effort-container-${escapeAttr(agentId)}" class="mb-1" style="display: ${supportsAgentEffort ? 'block' : 'none'}">
-              <select id="agent-effort-${escapeAttr(agentId)}" class="w-full text-[11px] rounded border border-gray-200 px-1.5 py-1 bg-gray-50">${effortOptions}</select>
-            </div>
-
-            <!-- Permissions + Save -->
-            <div class="flex items-center justify-between mt-2">
-              <div class="flex items-center gap-2 text-[10px] text-gray-600">
-                <label class="flex items-center gap-0.5 cursor-pointer">
-                  <input type="checkbox" id="agent-delegate-${escapeAttr(agentId)}" class="w-3 h-3 rounded border-gray-300 text-yellow-500 focus:ring-yellow-400" ${canDelegate ? 'checked' : ''}>
-                  <span>Delegate</span>
-                </label>
-                <label class="flex items-center gap-0.5 cursor-pointer">
-                  <input type="checkbox" id="agent-alltools-${escapeAttr(agentId)}" class="w-3 h-3 rounded border-gray-300 text-yellow-500 focus:ring-yellow-400" ${hasAllTools ? 'checked' : ''}>
-                  <span>All Tools</span>
-                </label>
-              </div>
-              <button type="button" data-action="agent-save" data-agent-id="${escapeAttr(agentId)}" class="text-[10px] px-3 py-1 rounded bg-mama-yellow text-mama-black hover:bg-mama-yellow-hover font-medium">Save</button>
-            </div>
-          </div>
-        `;
-      })
-      .join('');
-
-    // Grid layout: 2 cols on mobile, 3 cols on md+
-    container.innerHTML = `<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">${agentCards}</div>`;
+    container.innerHTML = `
+      <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
+        <p class="text-sm text-gray-600 mb-2">Agent management has moved to the Agents tab.</p>
+        <button data-action="go-agents-tab"
+          class="text-sm px-4 py-1.5 rounded-md bg-mama-yellow text-mama-black hover:bg-mama-yellow-hover font-medium">
+          Go to Agents
+        </button>
+      </div>`;
   }
 
   /**

package/public/viewer/src/modules/wiki.ts

@@ -1,6 +1,7 @@
 import { API, type WikiTreeNode, type WikiPageResponse } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { createResizeHandle } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 
 declare const marked: { parse(md: string): string };
 declare const DOMPurify: { sanitize(html: string): string };
@@ -70,7 +71,12 @@ function renderTreeNode(node: WikiTreeNode, depth: number = 0): string {
 }
 
 function escapeHtml(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 }
 
 export class WikiModule {
@@ -79,15 +85,46 @@ export class WikiModule {
   private resizeHandler: (() => void) | null = null;
   private mobileShowingPage = false;
   private initialized = false;
+  private treeLoadPromise: Promise<void> | null = null;
 
   init(): void {
-    if (this.initialized) { return; }
+    if (this.initialized) {
+      return;
+    }
     this.container = document.getElementById('wiki-content');
-    if (!this.container) { return; }
+    if (!this.container) {
+      return;
+    }
     this.initialized = true;
     this.resizeHandler = () => this.handleResize();
     window.addEventListener('resize', this.resizeHandler);
-    this.loadTree();
+    this.treeLoadPromise = this.loadTree();
+  }
+
+  private publishListContext(): void {
+    reportPageContext('wiki', {
+      pageType: 'wiki-list',
+      path: null,
+      activePath: this.currentPath,
+    });
+  }
+
+  private publishPageContext(page: WikiPageResponse): void {
+    const title =
+      String(page.frontmatter.title ?? '').trim() ||
+      page.path.split('/').pop()?.replace(/\.md$/, '') ||
+      page.path;
+    reportPageContext(
+      'wiki',
+      {
+        pageType: 'wiki-page',
+        path: page.path,
+        title,
+        frontmatter: page.frontmatter,
+        content_preview: page.raw.slice(0, 400),
+      },
+      { type: 'wiki-page', id: page.path }
+    );
   }
 
   private async loadTree(): Promise<void> {
@@ -171,9 +208,13 @@ export class WikiModule {
     document.getElementById('wiki-new-btn')?.addEventListener('click', () => this.promptNewPage());
 
     // Auto-open index page only on initial load (no page selected yet)
-    if (!mobile && !this.currentPath) {
+    if (!this.currentPath) {
       const indexNode = tree.find((n) => n.name === 'index.md');
-      if (indexNode) { this.openPage(indexNode.path); }
+      if (!mobile && indexNode) {
+        this.openPage(indexNode.path);
+      } else {
+        this.publishListContext();
+      }
     }
   }
 
@@ -194,6 +235,7 @@ export class WikiModule {
     try {
       const page = await API.getWikiPage(path);
       this.renderPageView(pageEl, page);
+      this.publishPageContext(page);
     } catch {
       pageEl.innerHTML = `<div style="color:#D94F4F;padding:20px">Failed to load ${path}</div>`;
     }
@@ -213,10 +255,12 @@ export class WikiModule {
 
   private showMobileTree(): void {
     this.mobileShowingPage = false;
+    this.currentPath = null;
     const treeEl = document.getElementById('wiki-tree');
     const pageEl = document.getElementById('wiki-page');
     if (treeEl) treeEl.style.display = '';
     if (pageEl) pageEl.style.display = 'none';
+    this.publishListContext();
   }
 
   private handleResize(): void {
@@ -399,4 +443,27 @@ export class WikiModule {
       this.resizeHandler = null;
     }
   }
+
+  async navigateTo(path?: string): Promise<void> {
+    if (!this.initialized) {
+      this.init();
+    }
+    if (this.treeLoadPromise) {
+      await this.treeLoadPromise;
+    }
+    if (path) {
+      await this.openPage(path);
+      return;
+    }
+    if (this.currentPath) {
+      try {
+        const page = await API.getWikiPage(this.currentPath);
+        this.publishPageContext(page);
+        return;
+      } catch {
+        /* fall through to list context */
+      }
+    }
+    this.publishListContext();
+  }
 }

package/public/viewer/src/types/global.d.ts

@@ -155,15 +155,6 @@ declare global {
       toggleCronJob?: (id: string, enabled: boolean) => Promise<void>;
       deleteCronJob?: (id: string) => Promise<void>;
     };
-    skillsModule?: {
-      closeDetail?: () => void;
-      install?: (source: string, name: string) => Promise<void>;
-      uninstall?: (source: string, name: string) => Promise<void>;
-      toggle?: (source: string, name: string, enabled: boolean) => Promise<void>;
-      init?: () => Promise<void>;
-      loadSkills?: () => Promise<void>;
-      render?: () => void;
-    };
     SpeechRecognition?: SpeechRecognitionConstructor;
     webkitSpeechRecognition?: SpeechRecognitionConstructor;
     lucideConfig?: unknown;