@ngn-net/nestjs-telescope 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/ui/index.html +210 -2
  2. package/dist/ui/manifest.json +2 -2
  3. package/package.json +1 -1
  4. package/ui/index.html +210 -2
package/dist/ui/index.html CHANGED
@@ -487,6 +487,7 @@
487
487
  }
488
488
 
489
489
  .badge-request { background-color: rgba(59, 130, 246, 0.12); color: var(--accent-blue); }
490
+ .badge-http_client { background-color: rgba(99, 102, 241, 0.12); color: var(--primary); }
490
491
  .badge-query { background-color: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
491
492
  .badge-cache { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
492
493
  .badge-job { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
@@ -496,6 +497,11 @@
496
497
  .badge-exception { background-color: rgba(244, 63, 94, 0.12); color: var(--accent-red); }
497
498
  .badge-scheduled_task { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
498
499
  .badge-redis { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
500
+ .badge-gate { background-color: rgba(244, 63, 94, 0.12); color: var(--accent-red); }
501
+ .badge-command { background-color: rgba(148, 163, 184, 0.15); color: var(--text-main); }
502
+ .badge-model { background-color: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
503
+ .badge-notification { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
504
+ .badge-dump { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
499
505
 
500
506
  .badge-get { background-color: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
501
507
  .badge-post { background-color: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
@@ -845,6 +851,7 @@
845
851
  const NAVIGATION_TABS = [
846
852
  { id: 'all', label: 'All Entries', icon: '🔍' },
847
853
  { id: 'request', label: 'HTTP Requests', icon: '🌐' },
854
+ { id: 'http_client', label: 'HTTP Client Requests', icon: '📞' },
848
855
  { id: 'query', label: 'Database Queries', icon: '💾' },
849
856
  { id: 'cache', label: 'Cache Ops', icon: '⚡' },
850
857
  { id: 'job', label: 'Queue Jobs', icon: '⚙️' },
@@ -854,6 +861,11 @@
854
861
  { id: 'exception', label: 'Exceptions', icon: '❌' },
855
862
  { id: 'scheduled_task', label: 'Scheduled Tasks', icon: '⏱️' },
856
863
  { id: 'redis', label: 'Redis Commands', icon: '🔑' },
864
+ { id: 'gate', label: 'Gates', icon: '🚪' },
865
+ { id: 'command', label: 'Commands', icon: '💻' },
866
+ { id: 'model', label: 'Models', icon: '📦' },
867
+ { id: 'notification', label: 'Notifications', icon: '🔔' },
868
+ { id: 'dump', label: 'Dumps', icon: '🗑️' },
857
869
  ];
858
870
 
859
871
  function App() {
@@ -1151,7 +1163,7 @@
1151
1163
  {/* Stats Grid at the top for quick insights */}
1152
1164
  {activeTab === 'all' && (
1153
1165
  <div className="stats-grid">
1154
- {NAVIGATION_TABS.slice(1, 7).map((tab) => (
1166
+ {NAVIGATION_TABS.slice(1).map((tab) => (
1155
1167
  <div
1156
1168
  key={tab.id}
1157
1169
  className={`stat-card ${activeTab === tab.id ? 'active' : ''}`}
@@ -1324,7 +1336,7 @@
1324
1336
 
1325
1337
  // Determine font family for subtitle
1326
1338
  function varMono(type) {
1327
- return (type === 'query' || type === 'redis' || type === 'request') ? 'var(--font-mono)' : 'var(--font-sans)';
1339
+ return (type === 'query' || type === 'redis' || type === 'request' || type === 'http_client' || type === 'command') ? 'var(--font-mono)' : 'var(--font-sans)';
1328
1340
  }
1329
1341
 
1330
1342
  // Helper functions for displaying table items
@@ -1345,6 +1357,16 @@
1345
1357
  subtitle: `${req.url || '/'}`,
1346
1358
  status: statusBadge
1347
1359
  };
1360
+ case 'http_client':
1361
+ return {
1362
+ title: `${content.method || 'GET'}`,
1363
+ subtitle: `${content.url || ''} (${content.duration || 0}ms)`,
1364
+ status: content.responseStatus >= 400 ? (
1365
+ <span className="badge badge-status-err">{content.responseStatus}</span>
1366
+ ) : (
1367
+ <span className="badge badge-status-ok">{content.responseStatus || '200'}</span>
1368
+ )
1369
+ };
1348
1370
  case 'query':
1349
1371
  return {
1350
1372
  title: content.query || 'DB Query',
@@ -1419,6 +1441,40 @@
1419
1441
  <span className="badge badge-status-ok">success</span>
1420
1442
  )
1421
1443
  };
1444
+ case 'gate':
1445
+ return {
1446
+ title: `Gate: ${content.gate || ''}`,
1447
+ subtitle: content.user ? `User: ${JSON.stringify(content.user)}` : 'Anonymous',
1448
+ status: content.allowed ? (
1449
+ <span className="badge badge-status-ok">allowed</span>
1450
+ ) : (
1451
+ <span className="badge badge-status-err">denied</span>
1452
+ )
1453
+ };
1454
+ case 'command':
1455
+ return {
1456
+ title: `Command: ${content.command || ''}`,
1457
+ subtitle: (content.args || []).join(' '),
1458
+ status: <span className="badge badge-status-ok">{content.exitCode ?? 'executed'}</span>
1459
+ };
1460
+ case 'model':
1461
+ return {
1462
+ title: `${(content.action || '').toUpperCase()} model`,
1463
+ subtitle: `${content.entity || ''} (${content.primaryKey || ''})`,
1464
+ status: <span className="badge badge-status-ok">{content.action}</span>
1465
+ };
1466
+ case 'notification':
1467
+ return {
1468
+ title: `Notification: ${content.notification || ''}`,
1469
+ subtitle: content.timestamp || '',
1470
+ status: <span className="badge badge-status-ok">sent</span>
1471
+ };
1472
+ case 'dump':
1473
+ return {
1474
+ title: `Dump`,
1475
+ subtitle: typeof content.message === 'string' ? content.message : JSON.stringify(content.message),
1476
+ status: <span className="badge badge-status-ok">dumped</span>
1477
+ };
1422
1478
  default:
1423
1479
  return {
1424
1480
  title: 'Telescope Entry',
@@ -1471,6 +1527,59 @@
1471
1527
  )}
1472
1528
  </React.Fragment>
1473
1529
  );
1530
+ case 'http_client':
1531
+ return (
1532
+ <React.Fragment>
1533
+ <div className="key-val-row">
1534
+ <div className="key-val-label">HTTP Method</div>
1535
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.method}</div>
1536
+ </div>
1537
+ <div className="key-val-row">
1538
+ <div className="key-val-label">URL</div>
1539
+ <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)', color: '#818cf8' }}>{content.url}</div>
1540
+ </div>
1541
+ <div className="key-val-row">
1542
+ <div className="key-val-label">Duration</div>
1543
+ <div className="key-val-value">{content.duration} ms</div>
1544
+ </div>
1545
+ {content.requestHeaders && Object.keys(content.requestHeaders).length > 0 && (
1546
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1547
+ <div className="key-val-label">Request Headers</div>
1548
+ <pre className="json-code">{JSON.stringify(content.requestHeaders, null, 2)}</pre>
1549
+ </div>
1550
+ )}
1551
+ {content.requestBody && (
1552
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1553
+ <div className="key-val-label">Request Body</div>
1554
+ <pre className="json-code">{JSON.stringify(content.requestBody, null, 2)}</pre>
1555
+ </div>
1556
+ )}
1557
+ {content.responseStatus !== undefined && (
1558
+ <div className="key-val-row">
1559
+ <div className="key-val-label">Response Status</div>
1560
+ <div className="key-val-value">{content.responseStatus}</div>
1561
+ </div>
1562
+ )}
1563
+ {content.responseHeaders && Object.keys(content.responseHeaders).length > 0 && (
1564
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1565
+ <div className="key-val-label">Response Headers</div>
1566
+ <pre className="json-code">{JSON.stringify(content.responseHeaders, null, 2)}</pre>
1567
+ </div>
1568
+ )}
1569
+ {content.responseBody && (
1570
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1571
+ <div className="key-val-label">Response Body</div>
1572
+ <pre className="json-code">{JSON.stringify(content.responseBody, null, 2)}</pre>
1573
+ </div>
1574
+ )}
1575
+ {content.error && (
1576
+ <div className="key-val-row">
1577
+ <div className="key-val-label">Error</div>
1578
+ <div className="key-val-value" style={{ color: 'var(--accent-red)' }}>{content.error}</div>
1579
+ </div>
1580
+ )}
1581
+ </React.Fragment>
1582
+ );
1474
1583
  case 'query':
1475
1584
  return (
1476
1585
  <React.Fragment>
@@ -1617,6 +1726,105 @@
1617
1726
  )}
1618
1727
  </React.Fragment>
1619
1728
  );
1729
+ case 'gate':
1730
+ return (
1731
+ <React.Fragment>
1732
+ <div className="key-val-row">
1733
+ <div className="key-val-label">Gate Name</div>
1734
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.gate}</div>
1735
+ </div>
1736
+ <div className="key-val-row">
1737
+ <div className="key-val-label">Result</div>
1738
+ <div className="key-val-value">
1739
+ {content.allowed ? (
1740
+ <span className="badge badge-status-ok">Allowed</span>
1741
+ ) : (
1742
+ <span className="badge badge-status-err">Denied</span>
1743
+ )}
1744
+ </div>
1745
+ </div>
1746
+ {content.user && (
1747
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1748
+ <div className="key-val-label">User Context</div>
1749
+ <pre className="json-code">{JSON.stringify(content.user, null, 2)}</pre>
1750
+ </div>
1751
+ )}
1752
+ </React.Fragment>
1753
+ );
1754
+ case 'command':
1755
+ return (
1756
+ <React.Fragment>
1757
+ <div className="key-val-row">
1758
+ <div className="key-val-label">Command</div>
1759
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff', fontFamily: 'var(--font-mono)' }}>{content.command}</div>
1760
+ </div>
1761
+ {content.args && content.args.length > 0 && (
1762
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1763
+ <div className="key-val-label">Arguments</div>
1764
+ <pre className="json-code">{JSON.stringify(content.args, null, 2)}</pre>
1765
+ </div>
1766
+ )}
1767
+ {content.exitCode !== undefined && (
1768
+ <div className="key-val-row">
1769
+ <div className="key-val-label">Exit Code</div>
1770
+ <div className="key-val-value">{content.exitCode}</div>
1771
+ </div>
1772
+ )}
1773
+ </React.Fragment>
1774
+ );
1775
+ case 'model':
1776
+ return (
1777
+ <React.Fragment>
1778
+ <div className="key-val-row">
1779
+ <div className="key-val-label">Action</div>
1780
+ <div className="key-val-value" style={{ textTransform: 'uppercase', fontWeight: '600', color: '#fff' }}>{content.action}</div>
1781
+ </div>
1782
+ <div className="key-val-row">
1783
+ <div className="key-val-label">Entity</div>
1784
+ <div className="key-val-value">{content.entity}</div>
1785
+ </div>
1786
+ <div className="key-val-row">
1787
+ <div className="key-val-label">Primary Key</div>
1788
+ <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)' }}>{String(content.primaryKey)}</div>
1789
+ </div>
1790
+ {content.updatedColumns && content.updatedColumns.length > 0 && (
1791
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1792
+ <div className="key-val-label">Updated Columns</div>
1793
+ <pre className="json-code">{JSON.stringify(content.updatedColumns, null, 2)}</pre>
1794
+ </div>
1795
+ )}
1796
+ {content.data && (
1797
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1798
+ <div className="key-val-label">Model Data</div>
1799
+ <pre className="json-code">{JSON.stringify(content.data, null, 2)}</pre>
1800
+ </div>
1801
+ )}
1802
+ </React.Fragment>
1803
+ );
1804
+ case 'notification':
1805
+ return (
1806
+ <React.Fragment>
1807
+ <div className="key-val-row">
1808
+ <div className="key-val-label">Notification</div>
1809
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.notification}</div>
1810
+ </div>
1811
+ {content.payload && (
1812
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1813
+ <div className="key-val-label">Payload</div>
1814
+ <pre className="json-code">{JSON.stringify(content.payload, null, 2)}</pre>
1815
+ </div>
1816
+ )}
1817
+ </React.Fragment>
1818
+ );
1819
+ case 'dump':
1820
+ return (
1821
+ <React.Fragment>
1822
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1823
+ <div className="key-val-label">Message / Data</div>
1824
+ <pre className="json-code">{typeof content.message === 'string' ? content.message : JSON.stringify(content.message, null, 2)}</pre>
1825
+ </div>
1826
+ </React.Fragment>
1827
+ );
1620
1828
  default:
1621
1829
  return (
1622
1830
  <div className="key-val-row">
package/dist/ui/manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@ngn-net/nestjs-telescope",
3
- "version": "0.2.3",
4
- "builtAt": "2026-06-08T11:52:38.806Z"
3
+ "version": "0.2.4",
4
+ "builtAt": "2026-06-08T12:15:54.627Z"
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngn-net/nestjs-telescope",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/ui/index.html CHANGED
@@ -487,6 +487,7 @@
487
487
  }
488
488
 
489
489
  .badge-request { background-color: rgba(59, 130, 246, 0.12); color: var(--accent-blue); }
490
+ .badge-http_client { background-color: rgba(99, 102, 241, 0.12); color: var(--primary); }
490
491
  .badge-query { background-color: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
491
492
  .badge-cache { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
492
493
  .badge-job { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
@@ -496,6 +497,11 @@
496
497
  .badge-exception { background-color: rgba(244, 63, 94, 0.12); color: var(--accent-red); }
497
498
  .badge-scheduled_task { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
498
499
  .badge-redis { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
500
+ .badge-gate { background-color: rgba(244, 63, 94, 0.12); color: var(--accent-red); }
501
+ .badge-command { background-color: rgba(148, 163, 184, 0.15); color: var(--text-main); }
502
+ .badge-model { background-color: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
503
+ .badge-notification { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
504
+ .badge-dump { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
499
505
 
500
506
  .badge-get { background-color: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
501
507
  .badge-post { background-color: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
@@ -845,6 +851,7 @@
845
851
  const NAVIGATION_TABS = [
846
852
  { id: 'all', label: 'All Entries', icon: '🔍' },
847
853
  { id: 'request', label: 'HTTP Requests', icon: '🌐' },
854
+ { id: 'http_client', label: 'HTTP Client Requests', icon: '📞' },
848
855
  { id: 'query', label: 'Database Queries', icon: '💾' },
849
856
  { id: 'cache', label: 'Cache Ops', icon: '⚡' },
850
857
  { id: 'job', label: 'Queue Jobs', icon: '⚙️' },
@@ -854,6 +861,11 @@
854
861
  { id: 'exception', label: 'Exceptions', icon: '❌' },
855
862
  { id: 'scheduled_task', label: 'Scheduled Tasks', icon: '⏱️' },
856
863
  { id: 'redis', label: 'Redis Commands', icon: '🔑' },
864
+ { id: 'gate', label: 'Gates', icon: '🚪' },
865
+ { id: 'command', label: 'Commands', icon: '💻' },
866
+ { id: 'model', label: 'Models', icon: '📦' },
867
+ { id: 'notification', label: 'Notifications', icon: '🔔' },
868
+ { id: 'dump', label: 'Dumps', icon: '🗑️' },
857
869
  ];
858
870
 
859
871
  function App() {
@@ -1151,7 +1163,7 @@
1151
1163
  {/* Stats Grid at the top for quick insights */}
1152
1164
  {activeTab === 'all' && (
1153
1165
  <div className="stats-grid">
1154
- {NAVIGATION_TABS.slice(1, 7).map((tab) => (
1166
+ {NAVIGATION_TABS.slice(1).map((tab) => (
1155
1167
  <div
1156
1168
  key={tab.id}
1157
1169
  className={`stat-card ${activeTab === tab.id ? 'active' : ''}`}
@@ -1324,7 +1336,7 @@
1324
1336
 
1325
1337
  // Determine font family for subtitle
1326
1338
  function varMono(type) {
1327
- return (type === 'query' || type === 'redis' || type === 'request') ? 'var(--font-mono)' : 'var(--font-sans)';
1339
+ return (type === 'query' || type === 'redis' || type === 'request' || type === 'http_client' || type === 'command') ? 'var(--font-mono)' : 'var(--font-sans)';
1328
1340
  }
1329
1341
 
1330
1342
  // Helper functions for displaying table items
@@ -1345,6 +1357,16 @@
1345
1357
  subtitle: `${req.url || '/'}`,
1346
1358
  status: statusBadge
1347
1359
  };
1360
+ case 'http_client':
1361
+ return {
1362
+ title: `${content.method || 'GET'}`,
1363
+ subtitle: `${content.url || ''} (${content.duration || 0}ms)`,
1364
+ status: content.responseStatus >= 400 ? (
1365
+ <span className="badge badge-status-err">{content.responseStatus}</span>
1366
+ ) : (
1367
+ <span className="badge badge-status-ok">{content.responseStatus || '200'}</span>
1368
+ )
1369
+ };
1348
1370
  case 'query':
1349
1371
  return {
1350
1372
  title: content.query || 'DB Query',
@@ -1419,6 +1441,40 @@
1419
1441
  <span className="badge badge-status-ok">success</span>
1420
1442
  )
1421
1443
  };
1444
+ case 'gate':
1445
+ return {
1446
+ title: `Gate: ${content.gate || ''}`,
1447
+ subtitle: content.user ? `User: ${JSON.stringify(content.user)}` : 'Anonymous',
1448
+ status: content.allowed ? (
1449
+ <span className="badge badge-status-ok">allowed</span>
1450
+ ) : (
1451
+ <span className="badge badge-status-err">denied</span>
1452
+ )
1453
+ };
1454
+ case 'command':
1455
+ return {
1456
+ title: `Command: ${content.command || ''}`,
1457
+ subtitle: (content.args || []).join(' '),
1458
+ status: <span className="badge badge-status-ok">{content.exitCode ?? 'executed'}</span>
1459
+ };
1460
+ case 'model':
1461
+ return {
1462
+ title: `${(content.action || '').toUpperCase()} model`,
1463
+ subtitle: `${content.entity || ''} (${content.primaryKey || ''})`,
1464
+ status: <span className="badge badge-status-ok">{content.action}</span>
1465
+ };
1466
+ case 'notification':
1467
+ return {
1468
+ title: `Notification: ${content.notification || ''}`,
1469
+ subtitle: content.timestamp || '',
1470
+ status: <span className="badge badge-status-ok">sent</span>
1471
+ };
1472
+ case 'dump':
1473
+ return {
1474
+ title: `Dump`,
1475
+ subtitle: typeof content.message === 'string' ? content.message : JSON.stringify(content.message),
1476
+ status: <span className="badge badge-status-ok">dumped</span>
1477
+ };
1422
1478
  default:
1423
1479
  return {
1424
1480
  title: 'Telescope Entry',
@@ -1471,6 +1527,59 @@
1471
1527
  )}
1472
1528
  </React.Fragment>
1473
1529
  );
1530
+ case 'http_client':
1531
+ return (
1532
+ <React.Fragment>
1533
+ <div className="key-val-row">
1534
+ <div className="key-val-label">HTTP Method</div>
1535
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.method}</div>
1536
+ </div>
1537
+ <div className="key-val-row">
1538
+ <div className="key-val-label">URL</div>
1539
+ <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)', color: '#818cf8' }}>{content.url}</div>
1540
+ </div>
1541
+ <div className="key-val-row">
1542
+ <div className="key-val-label">Duration</div>
1543
+ <div className="key-val-value">{content.duration} ms</div>
1544
+ </div>
1545
+ {content.requestHeaders && Object.keys(content.requestHeaders).length > 0 && (
1546
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1547
+ <div className="key-val-label">Request Headers</div>
1548
+ <pre className="json-code">{JSON.stringify(content.requestHeaders, null, 2)}</pre>
1549
+ </div>
1550
+ )}
1551
+ {content.requestBody && (
1552
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1553
+ <div className="key-val-label">Request Body</div>
1554
+ <pre className="json-code">{JSON.stringify(content.requestBody, null, 2)}</pre>
1555
+ </div>
1556
+ )}
1557
+ {content.responseStatus !== undefined && (
1558
+ <div className="key-val-row">
1559
+ <div className="key-val-label">Response Status</div>
1560
+ <div className="key-val-value">{content.responseStatus}</div>
1561
+ </div>
1562
+ )}
1563
+ {content.responseHeaders && Object.keys(content.responseHeaders).length > 0 && (
1564
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1565
+ <div className="key-val-label">Response Headers</div>
1566
+ <pre className="json-code">{JSON.stringify(content.responseHeaders, null, 2)}</pre>
1567
+ </div>
1568
+ )}
1569
+ {content.responseBody && (
1570
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1571
+ <div className="key-val-label">Response Body</div>
1572
+ <pre className="json-code">{JSON.stringify(content.responseBody, null, 2)}</pre>
1573
+ </div>
1574
+ )}
1575
+ {content.error && (
1576
+ <div className="key-val-row">
1577
+ <div className="key-val-label">Error</div>
1578
+ <div className="key-val-value" style={{ color: 'var(--accent-red)' }}>{content.error}</div>
1579
+ </div>
1580
+ )}
1581
+ </React.Fragment>
1582
+ );
1474
1583
  case 'query':
1475
1584
  return (
1476
1585
  <React.Fragment>
@@ -1617,6 +1726,105 @@
1617
1726
  )}
1618
1727
  </React.Fragment>
1619
1728
  );
1729
+ case 'gate':
1730
+ return (
1731
+ <React.Fragment>
1732
+ <div className="key-val-row">
1733
+ <div className="key-val-label">Gate Name</div>
1734
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.gate}</div>
1735
+ </div>
1736
+ <div className="key-val-row">
1737
+ <div className="key-val-label">Result</div>
1738
+ <div className="key-val-value">
1739
+ {content.allowed ? (
1740
+ <span className="badge badge-status-ok">Allowed</span>
1741
+ ) : (
1742
+ <span className="badge badge-status-err">Denied</span>
1743
+ )}
1744
+ </div>
1745
+ </div>
1746
+ {content.user && (
1747
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1748
+ <div className="key-val-label">User Context</div>
1749
+ <pre className="json-code">{JSON.stringify(content.user, null, 2)}</pre>
1750
+ </div>
1751
+ )}
1752
+ </React.Fragment>
1753
+ );
1754
+ case 'command':
1755
+ return (
1756
+ <React.Fragment>
1757
+ <div className="key-val-row">
1758
+ <div className="key-val-label">Command</div>
1759
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff', fontFamily: 'var(--font-mono)' }}>{content.command}</div>
1760
+ </div>
1761
+ {content.args && content.args.length > 0 && (
1762
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1763
+ <div className="key-val-label">Arguments</div>
1764
+ <pre className="json-code">{JSON.stringify(content.args, null, 2)}</pre>
1765
+ </div>
1766
+ )}
1767
+ {content.exitCode !== undefined && (
1768
+ <div className="key-val-row">
1769
+ <div className="key-val-label">Exit Code</div>
1770
+ <div className="key-val-value">{content.exitCode}</div>
1771
+ </div>
1772
+ )}
1773
+ </React.Fragment>
1774
+ );
1775
+ case 'model':
1776
+ return (
1777
+ <React.Fragment>
1778
+ <div className="key-val-row">
1779
+ <div className="key-val-label">Action</div>
1780
+ <div className="key-val-value" style={{ textTransform: 'uppercase', fontWeight: '600', color: '#fff' }}>{content.action}</div>
1781
+ </div>
1782
+ <div className="key-val-row">
1783
+ <div className="key-val-label">Entity</div>
1784
+ <div className="key-val-value">{content.entity}</div>
1785
+ </div>
1786
+ <div className="key-val-row">
1787
+ <div className="key-val-label">Primary Key</div>
1788
+ <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)' }}>{String(content.primaryKey)}</div>
1789
+ </div>
1790
+ {content.updatedColumns && content.updatedColumns.length > 0 && (
1791
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1792
+ <div className="key-val-label">Updated Columns</div>
1793
+ <pre className="json-code">{JSON.stringify(content.updatedColumns, null, 2)}</pre>
1794
+ </div>
1795
+ )}
1796
+ {content.data && (
1797
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1798
+ <div className="key-val-label">Model Data</div>
1799
+ <pre className="json-code">{JSON.stringify(content.data, null, 2)}</pre>
1800
+ </div>
1801
+ )}
1802
+ </React.Fragment>
1803
+ );
1804
+ case 'notification':
1805
+ return (
1806
+ <React.Fragment>
1807
+ <div className="key-val-row">
1808
+ <div className="key-val-label">Notification</div>
1809
+ <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.notification}</div>
1810
+ </div>
1811
+ {content.payload && (
1812
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1813
+ <div className="key-val-label">Payload</div>
1814
+ <pre className="json-code">{JSON.stringify(content.payload, null, 2)}</pre>
1815
+ </div>
1816
+ )}
1817
+ </React.Fragment>
1818
+ );
1819
+ case 'dump':
1820
+ return (
1821
+ <React.Fragment>
1822
+ <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
1823
+ <div className="key-val-label">Message / Data</div>
1824
+ <pre className="json-code">{typeof content.message === 'string' ? content.message : JSON.stringify(content.message, null, 2)}</pre>
1825
+ </div>
1826
+ </React.Fragment>
1827
+ );
1620
1828
  default:
1621
1829
  return (
1622
1830
  <div className="key-val-row">