icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/databridge_mapping.html

@@ -0,0 +1,345 @@
+{% extends "base.html" %}
+{% block title %}DataBridge — Schema Mapping{% endblock %}
+{% block content %}
+<!-- CUI // SP-CTI -->
+<style>
+    .mapping-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+    .mapping-container { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 0; min-height: 500px; border: 1px solid #333; border-radius: 8px; overflow: hidden; }
+    .schema-panel { background: #1a1a2e; padding: 1rem; }
+    .schema-panel h3 { font-size: 0.85rem; color: #00d4ff; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
+    .schema-panel.source { border-right: 1px solid #333; }
+    .schema-panel.target { border-left: 1px solid #333; }
+    .mapping-canvas { background: #0d0d1a; display: flex; align-items: center; justify-content: center; position: relative; }
+    .field-item { display: flex; align-items: center; padding: 0.5rem 0.75rem; margin: 0.25rem 0; background: #16213e; border: 1px solid #333; border-radius: 4px; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
+    .field-item:hover { border-color: #00d4ff; background: #1a2744; }
+    .field-item.selected { border-color: #00d4ff; background: #0f3460; }
+    .field-item.mapped { border-color: #00e676; }
+    .field-item .type-badge { font-size: 0.65rem; background: #333; padding: 1px 6px; border-radius: 3px; margin-left: auto; color: #888; }
+    .field-item .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; }
+    .field-item .dot.unmapped { background: #555; }
+    .field-item .dot.mapped { background: #00e676; }
+    .mapping-actions { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.5rem; }
+    .mapping-actions button { font-size: 0.7rem; padding: 0.35rem 0.5rem; }
+    .mapping-list { margin-top: 1.5rem; }
+    .mapping-list table { width: 100%; }
+    .mapping-list th, .mapping-list td { text-align: left; padding: 0.5rem; font-size: 0.8rem; }
+    .transform-select { background: #1a1a2e; color: #e0e0e0; border: 1px solid #333; border-radius: 4px; font-size: 0.75rem; padding: 2px 4px; }
+    .auto-map-btn { background: #0f3460; border-color: #00d4ff; }
+    .preview-panel { margin-top: 1.5rem; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 1rem; }
+    .preview-panel h3 { font-size: 0.85rem; color: #ffa726; margin-bottom: 0.75rem; }
+    .preview-table { max-height: 300px; overflow: auto; }
+    .save-bar { display: flex; gap: 1rem; margin-top: 1rem; align-items: center; }
+    @media (max-width: 768px) {
+        .mapping-container { grid-template-columns: 1fr; }
+        .mapping-canvas { min-height: 60px; }
+    }
+</style>
+
+<div class="mapping-header">
+    <div>
+        <h2 style="margin:0;">Schema Mapping Editor</h2>
+        <p style="color:#888; font-size:0.8rem; margin:0.25rem 0 0;">
+            Map fields between source and target connections. Drag or click to create mappings.
+        </p>
+    </div>
+    <div style="display:flex; gap:0.5rem;">
+        <button class="auto-map-btn" onclick="autoMap()">Auto-Map</button>
+        <button onclick="clearMappings()">Clear All</button>
+        <a href="/databridge" class="btn" style="text-decoration:none;">Back to DataBridge</a>
+    </div>
+</div>
+
+<!-- Connection selectors -->
+<div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem;">
+    <div>
+        <label style="font-size:0.8rem; color:#888;">Source Connection</label>
+        <select id="sourceConnection" class="transform-select" style="width:100%; padding:0.4rem;" onchange="loadSourceSchema()">
+            <option value="">Select source...</option>
+        </select>
+    </div>
+    <div>
+        <label style="font-size:0.8rem; color:#888;">Target Connection</label>
+        <select id="targetConnection" class="transform-select" style="width:100%; padding:0.4rem;" onchange="loadTargetSchema()">
+            <option value="">Select target...</option>
+        </select>
+    </div>
+</div>
+
+<!-- Visual mapping area -->
+<div class="mapping-container">
+    <div class="schema-panel source">
+        <h3>Source Fields</h3>
+        <div id="sourceFields">
+            <p style="color:#666; font-size:0.8rem;">Select a source connection above</p>
+        </div>
+    </div>
+    <div class="mapping-canvas">
+        <svg id="mappingSvg" width="120" height="100%" style="position:absolute; top:0; left:0;">
+        </svg>
+        <div class="mapping-actions">
+            <button onclick="linkSelected()" title="Link selected fields">Link</button>
+            <button onclick="unlinkSelected()" title="Unlink selected mapping">Unlink</button>
+        </div>
+    </div>
+    <div class="schema-panel target">
+        <h3>Target Fields</h3>
+        <div id="targetFields">
+            <p style="color:#666; font-size:0.8rem;">Select a target connection above</p>
+        </div>
+    </div>
+</div>
+
+<!-- Current mappings table -->
+<div class="mapping-list">
+    <h3 style="font-size:0.9rem;">Field Mappings</h3>
+    <table>
+        <thead>
+            <tr>
+                <th>Source Field</th>
+                <th>→</th>
+                <th>Target Field</th>
+                <th>Transform</th>
+                <th>Action</th>
+            </tr>
+        </thead>
+        <tbody id="mappingTableBody">
+            <tr><td colspan="5" style="color:#666; text-align:center;">No mappings defined yet</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<!-- Preview panel -->
+<div class="preview-panel" id="previewPanel" style="display:none;">
+    <h3>Transform Preview (first 10 rows)</h3>
+    <div class="preview-table" id="previewContent"></div>
+</div>
+
+<!-- Save bar -->
+<div class="save-bar">
+    <input type="text" id="mappingName" placeholder="Mapping name..." style="flex:1; background:#1a1a2e; border:1px solid #333; color:#e0e0e0; padding:0.5rem; border-radius:4px;">
+    <button onclick="saveMapping()" style="background:#00e676; color:#000; border:none;">Save Mapping</button>
+    <button onclick="executeMapping()">Execute & Preview</button>
+</div>
+
+<script>
+    let selectedSource = null;
+    let selectedTarget = null;
+    let fieldMappings = [];
+    let sourceSchema = [];
+    let targetSchema = [];
+
+    // Load connections on page load
+    async function loadConnections() {
+        try {
+            const resp = await fetch('/api/databridge/connections');
+            const data = await resp.json();
+            const conns = data.connections || data || [];
+            const srcSelect = document.getElementById('sourceConnection');
+            const tgtSelect = document.getElementById('targetConnection');
+            conns.forEach(c => {
+                const opt1 = new Option(`${c.name} (${c.connector_name})`, c.id);
+                const opt2 = new Option(`${c.name} (${c.connector_name})`, c.id);
+                srcSelect.appendChild(opt1);
+                tgtSelect.appendChild(opt2);
+            });
+        } catch (e) {
+            console.error('Failed to load connections:', e);
+        }
+    }
+
+    async function loadSourceSchema() {
+        const connId = document.getElementById('sourceConnection').value;
+        if (!connId) return;
+        try {
+            const resp = await fetch(`/api/databridge/connections/${connId}/schema`);
+            const schemas = await resp.json();
+            sourceSchema = schemas.length > 0 ? JSON.parse(schemas[0].schema_json || '[]') : [];
+            renderFields('sourceFields', sourceSchema, 'source');
+        } catch (e) {
+            console.error('Schema load failed:', e);
+        }
+    }
+
+    async function loadTargetSchema() {
+        const connId = document.getElementById('targetConnection').value;
+        if (!connId) return;
+        try {
+            const resp = await fetch(`/api/databridge/connections/${connId}/schema`);
+            const schemas = await resp.json();
+            targetSchema = schemas.length > 0 ? JSON.parse(schemas[0].schema_json || '[]') : [];
+            renderFields('targetFields', targetSchema, 'target');
+        } catch (e) {
+            console.error('Schema load failed:', e);
+        }
+    }
+
+    function renderFields(containerId, fields, side) {
+        const container = document.getElementById(containerId);
+        if (!fields.length) {
+            container.innerHTML = '<p style="color:#666; font-size:0.8rem;">No schema available. Run a sync first.</p>';
+            return;
+        }
+        container.innerHTML = fields.map(f => {
+            const mapped = fieldMappings.some(m => side === 'source' ? m.source_field === f.name : m.target_field === f.name);
+            return `<div class="field-item ${mapped ? 'mapped' : ''}" onclick="selectField('${side}', '${f.name}')" data-field="${f.name}">
+                <span class="dot ${mapped ? 'mapped' : 'unmapped'}"></span>
+                ${f.name}
+                <span class="type-badge">${f.data_type}</span>
+            </div>`;
+        }).join('');
+    }
+
+    function selectField(side, name) {
+        if (side === 'source') {
+            selectedSource = name;
+            document.querySelectorAll('.schema-panel.source .field-item').forEach(el => {
+                el.classList.toggle('selected', el.dataset.field === name);
+            });
+        } else {
+            selectedTarget = name;
+            document.querySelectorAll('.schema-panel.target .field-item').forEach(el => {
+                el.classList.toggle('selected', el.dataset.field === name);
+            });
+        }
+        // Auto-link if both selected
+        if (selectedSource && selectedTarget) {
+            linkSelected();
+        }
+    }
+
+    function linkSelected() {
+        if (!selectedSource || !selectedTarget) return;
+        if (fieldMappings.some(m => m.source_field === selectedSource && m.target_field === selectedTarget)) return;
+        fieldMappings.push({ source_field: selectedSource, target_field: selectedTarget });
+        selectedSource = null;
+        selectedTarget = null;
+        renderMappingTable();
+        renderFields('sourceFields', sourceSchema, 'source');
+        renderFields('targetFields', targetSchema, 'target');
+        drawLines();
+    }
+
+    function unlinkSelected() {
+        fieldMappings = fieldMappings.filter(m => m.source_field !== selectedSource && m.target_field !== selectedTarget);
+        selectedSource = null;
+        selectedTarget = null;
+        renderMappingTable();
+        renderFields('sourceFields', sourceSchema, 'source');
+        renderFields('targetFields', targetSchema, 'target');
+        drawLines();
+    }
+
+    function clearMappings() {
+        fieldMappings = [];
+        renderMappingTable();
+        renderFields('sourceFields', sourceSchema, 'source');
+        renderFields('targetFields', targetSchema, 'target');
+        drawLines();
+    }
+
+    function autoMap() {
+        const srcNames = sourceSchema.map(f => f.name);
+        const tgtNames = targetSchema.map(f => f.name);
+        // Exact match + case-insensitive match
+        srcNames.forEach(s => {
+            const exact = tgtNames.find(t => t === s);
+            const lower = tgtNames.find(t => t.toLowerCase() === s.toLowerCase());
+            const match = exact || lower;
+            if (match && !fieldMappings.some(m => m.source_field === s)) {
+                fieldMappings.push({ source_field: s, target_field: match });
+            }
+        });
+        renderMappingTable();
+        renderFields('sourceFields', sourceSchema, 'source');
+        renderFields('targetFields', targetSchema, 'target');
+        drawLines();
+    }
+
+    function renderMappingTable() {
+        const tbody = document.getElementById('mappingTableBody');
+        if (!fieldMappings.length) {
+            tbody.innerHTML = '<tr><td colspan="5" style="color:#666; text-align:center;">No mappings defined yet</td></tr>';
+            return;
+        }
+        const transforms = ['', 'rename', 'cast', 'upper', 'lower', 'trim', 'hash', 'mask_pii', 'cui_mark', 'date_format'];
+        tbody.innerHTML = fieldMappings.map((m, i) => `
+            <tr>
+                <td>${m.source_field}</td>
+                <td style="color:#00d4ff;">→</td>
+                <td>${m.target_field}</td>
+                <td>
+                    <select class="transform-select" onchange="setTransform(${i}, this.value)">
+                        ${transforms.map(t => `<option value="${t}" ${m.transform_name === t ? 'selected' : ''}>${t || '(none)'}</option>`).join('')}
+                    </select>
+                </td>
+                <td><button onclick="removeMapping(${i})" style="font-size:0.7rem; padding:2px 8px;">×</button></td>
+            </tr>
+        `).join('');
+    }
+
+    function setTransform(idx, name) { fieldMappings[idx].transform_name = name; }
+    function removeMapping(idx) {
+        fieldMappings.splice(idx, 1);
+        renderMappingTable();
+        renderFields('sourceFields', sourceSchema, 'source');
+        renderFields('targetFields', targetSchema, 'target');
+        drawLines();
+    }
+
+    function drawLines() {
+        const svg = document.getElementById('mappingSvg');
+        const canvas = document.querySelector('.mapping-canvas');
+        svg.setAttribute('height', canvas.offsetHeight);
+        svg.innerHTML = fieldMappings.map(m => {
+            const srcEl = document.querySelector(`.schema-panel.source .field-item[data-field="${m.source_field}"]`);
+            const tgtEl = document.querySelector(`.schema-panel.target .field-item[data-field="${m.target_field}"]`);
+            if (!srcEl || !tgtEl) return '';
+            const canvasRect = canvas.getBoundingClientRect();
+            const srcRect = srcEl.getBoundingClientRect();
+            const tgtRect = tgtEl.getBoundingClientRect();
+            const y1 = srcRect.top + srcRect.height / 2 - canvasRect.top;
+            const y2 = tgtRect.top + tgtRect.height / 2 - canvasRect.top;
+            return `<line x1="0" y1="${y1}" x2="120" y2="${y2}" stroke="#00e676" stroke-width="2" opacity="0.6"/>`;
+        }).join('');
+    }
+
+    async function saveMapping() {
+        const name = document.getElementById('mappingName').value.trim();
+        if (!name) { alert('Please enter a mapping name'); return; }
+        const srcConn = document.getElementById('sourceConnection').value;
+        const tgtConn = document.getElementById('targetConnection').value;
+        if (!srcConn || !tgtConn) { alert('Select source and target connections'); return; }
+        try {
+            const resp = await fetch('/api/databridge/mappings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: name,
+                    source_connection_id: srcConn,
+                    target_connection_id: tgtConn,
+                    source_table: sourceSchema.length ? 'inferred' : '',
+                    target_table: targetSchema.length ? 'inferred' : '',
+                    field_mappings: fieldMappings,
+                }),
+            });
+            const result = await resp.json();
+            if (result.status === 'ok') {
+                alert('Mapping saved! Version: ' + result.version);
+            } else {
+                alert('Error: ' + (result.message || 'Unknown error'));
+            }
+        } catch (e) {
+            alert('Save failed: ' + e.message);
+        }
+    }
+
+    async function executeMapping() {
+        // Execute mapping and show preview (stub — needs backend)
+        document.getElementById('previewPanel').style.display = 'block';
+        document.getElementById('previewContent').innerHTML =
+            '<p style="color:#888;">Execute a sync read on the source, then apply the mapping to see a preview.</p>';
+    }
+
+    loadConnections();
+</script>
+{% endblock %}

tools/dashboard/templates/databridge_messaging.html

@@ -0,0 +1,321 @@
+{% extends "base.html" %}
+{% block title %}DataBridge — Messaging Hub{% endblock %}
+{% block content %}
+<!-- CUI // SP-CTI -->
+<style>
+    .msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem; }
+    .msg-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
+    .stat-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 1rem; text-align: center; }
+    .stat-card .value { font-size: 1.8rem; font-weight: bold; color: #00d4ff; }
+    .stat-card .label { font-size: 0.75rem; color: #888; margin-top: 0.25rem; }
+    .section-panel { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; }
+    .section-panel h3 { font-size: 0.85rem; color: #00d4ff; margin-bottom: 0.75rem; }
+    .conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
+    .conn-card { background: #16213e; border: 1px solid #333; border-radius: 8px; padding: 0.75rem; position: relative; }
+    .conn-card h4 { font-size: 0.85rem; margin: 0 0 0.5rem; }
+    .conn-card .platform-badge { font-size: 0.65rem; background: #00d4ff; color: #000; padding: 1px 6px; border-radius: 3px; }
+    .conn-card .mode-badge { font-size: 0.65rem; background: #444; color: #ccc; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
+    .conn-card .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
+    .conn-card .status-dot.online { background: #4caf50; }
+    .conn-card .status-dot.offline { background: #f44336; }
+    .conn-card .status-dot.idle { background: #ff9800; }
+    .msg-feed { max-height: 400px; overflow-y: auto; }
+    .msg-item { display: flex; gap: 0.75rem; padding: 0.5rem; border-bottom: 1px solid #222; font-size: 0.8rem; }
+    .msg-item:hover { background: #16213e; }
+    .msg-item .meta { min-width: 120px; color: #888; font-size: 0.7rem; }
+    .msg-item .content { flex: 1; word-break: break-word; }
+    .msg-item .direction { font-size: 0.65rem; padding: 1px 4px; border-radius: 2px; }
+    .msg-item .direction.inbound { background: #1b5e20; color: #a5d6a7; }
+    .msg-item .direction.outbound { background: #0d47a1; color: #90caf9; }
+    .routing-table { width: 100%; border-collapse: collapse; }
+    .routing-table th { text-align: left; padding: 0.4rem; font-size: 0.75rem; border-bottom: 2px solid #333; background: #16213e; }
+    .routing-table td { padding: 0.35rem 0.4rem; font-size: 0.75rem; border-bottom: 1px solid #222; }
+    .daemon-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
+    .oauth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
+    .oauth-btn { display: block; text-align: center; padding: 0.6rem; border-radius: 6px; font-size: 0.8rem; text-decoration: none; border: 1px solid #333; background: #16213e; color: #e0e0e0; transition: background 0.2s; }
+    .oauth-btn:hover { background: #1e3a5f; }
+    .tab-bar { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 2px solid #333; }
+    .tab-bar button { background: none; border: none; color: #888; padding: 0.5rem 1rem; font-size: 0.8rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
+    .tab-bar button.active { color: #00d4ff; border-bottom-color: #00d4ff; }
+    .tab-content { display: none; }
+    .tab-content.active { display: block; }
+    @media (max-width: 768px) {
+        .msg-stats { grid-template-columns: 1fr 1fr; }
+        .conn-grid { grid-template-columns: 1fr; }
+        .oauth-grid { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 480px) {
+        .msg-stats { grid-template-columns: 1fr; }
+    }
+</style>
+
+<div class="msg-header">
+    <div>
+        <h2 style="margin:0;">Messaging Hub</h2>
+        <p style="color:#888; font-size:0.8rem; margin:0.25rem 0 0;">
+            Bi-directional messaging, email, CRM/ERP, DevOps &amp; observability connectors.
+        </p>
+    </div>
+    <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
+        <a href="/databridge" class="btn" style="text-decoration:none;">Back to DataBridge</a>
+    </div>
+</div>
+
+<!-- Stats -->
+<div class="msg-stats">
+    <div class="stat-card">
+        <div class="value" id="statConnections">0</div>
+        <div class="label">Active Connections</div>
+    </div>
+    <div class="stat-card">
+        <div class="value" id="statMessages">0</div>
+        <div class="label">Messages (24h)</div>
+    </div>
+    <div class="stat-card">
+        <div class="value" id="statPlatforms">0</div>
+        <div class="label">Platforms</div>
+    </div>
+    <div class="stat-card">
+        <div class="value" id="statDaemon">--</div>
+        <div class="label">Daemon Status</div>
+    </div>
+</div>
+
+<!-- Tabs -->
+<div class="tab-bar">
+    <button class="active" onclick="switchTab('channels')">Connected Channels</button>
+    <button onclick="switchTab('messages')">Message Feed</button>
+    <button onclick="switchTab('routing')">Agent Routing</button>
+    <button onclick="switchTab('connect')">Connect Platform</button>
+</div>
+
+<!-- Tab: Connected Channels -->
+<div id="tab-channels" class="tab-content active">
+    <div class="section-panel">
+        <h3>Connected Messaging &amp; Integration Channels</h3>
+        <div class="conn-grid" id="channelGrid">
+            <div style="color:#888; font-size:0.8rem;">Loading connections...</div>
+        </div>
+    </div>
+</div>
+
+<!-- Tab: Message Feed -->
+<div id="tab-messages" class="tab-content">
+    <div class="section-panel">
+        <h3>Recent Messages</h3>
+        <div style="display:flex; gap:0.5rem; margin-bottom:0.75rem; flex-wrap:wrap;">
+            <select id="msgFilterPlatform" style="background:#0d0d1a; color:#e0e0e0; border:1px solid #333; border-radius:4px; padding:0.3rem;">
+                <option value="">All platforms</option>
+                <option value="telegram">Telegram</option>
+                <option value="slack">Slack</option>
+                <option value="discord">Discord</option>
+                <option value="teams">Teams</option>
+                <option value="mattermost">Mattermost</option>
+                <option value="whatsapp">WhatsApp</option>
+                <option value="signal">Signal</option>
+                <option value="matrix">Matrix</option>
+            </select>
+            <select id="msgFilterDirection" style="background:#0d0d1a; color:#e0e0e0; border:1px solid #333; border-radius:4px; padding:0.3rem;">
+                <option value="">All directions</option>
+                <option value="inbound">Inbound</option>
+                <option value="outbound">Outbound</option>
+            </select>
+            <button onclick="loadMessages()">Refresh</button>
+        </div>
+        <div class="msg-feed" id="messageFeed">
+            <div style="color:#888; font-size:0.8rem;">No messages yet.</div>
+        </div>
+    </div>
+</div>
+
+<!-- Tab: Agent Routing -->
+<div id="tab-routing" class="tab-content">
+    <div class="section-panel">
+        <h3>Message Routing Rules</h3>
+        <p style="font-size:0.75rem; color:#888; margin-bottom:0.75rem;">
+            Default: all inbound messages route to Orchestrator agent. Add overrides per channel below.
+        </p>
+        <table class="routing-table">
+            <thead>
+                <tr>
+                    <th>Platform</th>
+                    <th>Channel</th>
+                    <th>Target Agent</th>
+                    <th>Enabled</th>
+                </tr>
+            </thead>
+            <tbody id="routingBody">
+                <tr><td colspan="4" style="color:#888; font-size:0.8rem;">No custom routing rules. All messages go to Orchestrator.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Tab: Connect Platform -->
+<div id="tab-connect" class="tab-content">
+    <div class="section-panel">
+        <h3>Connect a New Platform</h3>
+        <p style="font-size:0.75rem; color:#888; margin-bottom:0.75rem;">
+            Use OAuth2 to connect platforms that support it, or configure bot tokens manually.
+        </p>
+        <div class="oauth-grid">
+            <a href="#" class="oauth-btn" onclick="connectPlatform('slack')">Connect Slack</a>
+            <a href="#" class="oauth-btn" onclick="connectPlatform('discord')">Connect Discord</a>
+            <a href="#" class="oauth-btn" onclick="connectPlatform('teams')">Connect Teams</a>
+            <a href="#" class="oauth-btn" onclick="connectPlatform('gmail')">Connect Gmail</a>
+            <a href="#" class="oauth-btn" onclick="connectPlatform('github')">Connect GitHub</a>
+            <a href="#" class="oauth-btn" onclick="connectPlatform('gitlab')">Connect GitLab</a>
+            <a href="#" class="oauth-btn" onclick="connectPlatform('hubspot')">Connect HubSpot</a>
+        </div>
+        <h3 style="margin-top:1.5rem;">Manual Token Configuration</h3>
+        <p style="font-size:0.75rem; color:#888; margin-bottom:0.75rem;">
+            For platforms using bot tokens or API keys, configure via the main
+            <a href="/databridge" style="color:#00d4ff;">DataBridge</a> connection manager.
+        </p>
+    </div>
+    <div class="section-panel">
+        <h3>Available Connector Categories</h3>
+        <div class="conn-grid" id="categoryGrid">
+            <div class="conn-card">
+                <h4>Messaging <span class="platform-badge">8 connectors</span></h4>
+                <p style="font-size:0.75rem; color:#888;">Telegram, Slack, Discord, Teams, Mattermost, WhatsApp, Signal, Matrix</p>
+            </div>
+            <div class="conn-card">
+                <h4>Email <span class="platform-badge">4 connectors</span></h4>
+                <p style="font-size:0.75rem; color:#888;">IMAP, SMTP, Gmail, Microsoft 365 Mail</p>
+            </div>
+            <div class="conn-card">
+                <h4>CRM / ERP <span class="platform-badge">3 connectors</span></h4>
+                <p style="font-size:0.75rem; color:#888;">HubSpot, Dynamics 365, NetSuite</p>
+            </div>
+            <div class="conn-card">
+                <h4>DevOps <span class="platform-badge">4 connectors</span></h4>
+                <p style="font-size:0.75rem; color:#888;">GitHub, GitLab, Jenkins, ArgoCD</p>
+            </div>
+            <div class="conn-card">
+                <h4>Observability <span class="platform-badge">4 connectors</span></h4>
+                <p style="font-size:0.75rem; color:#888;">Splunk, Datadog, Elasticsearch, PagerDuty</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function switchTab(name) {
+    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
+    document.querySelectorAll('.tab-bar button').forEach(el => el.classList.remove('active'));
+    document.getElementById('tab-' + name).classList.add('active');
+    event.target.classList.add('active');
+}
+
+async function loadStats() {
+    try {
+        const resp = await fetch('/api/databridge/messaging/stats');
+        const data = await resp.json();
+        document.getElementById('statConnections').textContent = data.active_connections || 0;
+        document.getElementById('statMessages').textContent = data.messages_24h || 0;
+        document.getElementById('statPlatforms').textContent = data.platforms || 0;
+        document.getElementById('statDaemon').textContent = data.daemon_status || 'stopped';
+    } catch(e) {
+        console.warn('Stats load failed:', e);
+    }
+}
+
+async function loadChannels() {
+    try {
+        const resp = await fetch('/api/databridge/messaging/channels');
+        const data = await resp.json();
+        const channels = data.channels || [];
+        const grid = document.getElementById('channelGrid');
+        if (channels.length === 0) {
+            grid.innerHTML = '<div style="color:#888; font-size:0.8rem;">No messaging connections configured. Use the Connect Platform tab to get started.</div>';
+            return;
+        }
+        grid.innerHTML = channels.map(ch => `
+            <div class="conn-card">
+                <h4>
+                    <span class="status-dot ${ch.status || 'offline'}"></span>
+                    ${ch.name || ch.channel_id || 'Unknown'}
+                </h4>
+                <span class="platform-badge">${ch.platform || ''}</span>
+                <span class="mode-badge">${ch.connection_mode || ''}</span>
+                <div style="font-size:0.7rem; color:#888; margin-top:0.5rem;">
+                    Channel: ${ch.channel_id || '—'}
+                </div>
+            </div>
+        `).join('');
+    } catch(e) {
+        console.warn('Channels load failed:', e);
+    }
+}
+
+async function loadMessages() {
+    try {
+        const platform = document.getElementById('msgFilterPlatform').value;
+        const direction = document.getElementById('msgFilterDirection').value;
+        let url = '/api/databridge/messaging/messages?limit=50';
+        if (platform) url += '&platform=' + platform;
+        if (direction) url += '&direction=' + direction;
+        const resp = await fetch(url);
+        const data = await resp.json();
+        const msgs = data.messages || [];
+        const feed = document.getElementById('messageFeed');
+        if (msgs.length === 0) {
+            feed.innerHTML = '<div style="color:#888; font-size:0.8rem;">No messages found.</div>';
+            return;
+        }
+        feed.innerHTML = msgs.map(m => `
+            <div class="msg-item">
+                <div class="meta">
+                    <span class="direction ${m.direction || ''}">${(m.direction || '').toUpperCase()}</span><br>
+                    <strong>${m.platform || ''}</strong><br>
+                    ${m.author_name || m.author_id || ''}<br>
+                    <span style="font-size:0.65rem;">${m.created_at || ''}</span>
+                </div>
+                <div class="content">${escapeHtml(m.content || '')}</div>
+            </div>
+        `).join('');
+    } catch(e) {
+        console.warn('Messages load failed:', e);
+    }
+}
+
+async function loadRouting() {
+    try {
+        const resp = await fetch('/api/databridge/messaging/routing');
+        const data = await resp.json();
+        const rules = data.rules || [];
+        const tbody = document.getElementById('routingBody');
+        if (rules.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="4" style="color:#888; font-size:0.8rem;">No custom routing rules. All messages go to Orchestrator.</td></tr>';
+            return;
+        }
+        tbody.innerHTML = rules.map(r => `
+            <tr>
+                <td>${r.platform || ''}</td>
+                <td>${r.channel_id || ''}</td>
+                <td>${r.target_agent_name || 'Orchestrator'}</td>
+                <td>${r.enabled ? 'Yes' : 'No'}</td>
+            </tr>
+        `).join('');
+    } catch(e) {
+        console.warn('Routing load failed:', e);
+    }
+}
+
+function connectPlatform(platform) {
+    window.location.href = '/api/databridge/oauth2/authorize/' + platform;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Load data on page load
+loadStats();
+loadChannels();
+loadRouting();
+</script>
+{% endblock %}