+ setPage({ type: 'workspaces' })} />
+
+ {showWhatsNew && releasesCache && (
+
+
+ {page.type === 'workspaces' && (
+ setPage({ type: 'workspace-details' })}
+ />
+ )}
+ {page.type === 'workspace-details' && (
+
+
+
+
+ 
+
+
+
+ Lite
+
+
+
+ Powered by Gonzo
+
+
+
+ {breadcrumbs.length > 0 && (
+
+
+ {breadcrumbs.map((crumb, i) => {
+ const isLast = i === breadcrumbs.length - 1
+ return (
+
+ {i > 0 && /}
+ {isLast ? (
+ {crumb.label}
+ ) : (
+
+ {crumb.label}
+
+ )}
+
+ )
+ })}
+
+ )}
+
+
+
+
+ 
+
+
+
+ Gonzo
+ Local
+
+
+ {header}
+
+
+ {footer}
+
+ )
+}
diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..4db3be5
--- /dev/null
+++ b/web/src/components/layout/Footer.tsx
@@ -0,0 +1,37 @@
+import { useTheme } from '../../hooks/useTheme'
+import { upsellURL } from '../../lib/constants'
+
+export function Footer() {
+ const { theme } = useTheme()
+
+ return (
+
+ )
+}
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
new file mode 100644
index 0000000..ebbe1bc
--- /dev/null
+++ b/web/src/components/layout/Header.tsx
@@ -0,0 +1,51 @@
+import { useTheme } from '../../hooks/useTheme'
+import { upsellURL } from '../../lib/constants'
+import { Button } from '../ui/Button'
+import type { StatusInfo } from '../../api/types'
+
+interface HeaderProps {
+ status: StatusInfo | null
+}
+
+export function Header({ status }: HeaderProps) {
+ const { theme, toggle } = useTheme()
+
+ return (
+
+ {children}
+
+
+
+
+
+
+ {status && (
+
+
+ Lite
+
+
+
+ Powered by Gonzo
+
+
+ {status.total_logs.toLocaleString()} logs
+ {status.log_rate.toFixed(1)}/s
+ {status.uptime} uptime
+
+ )}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/web/src/components/panels/AISummaryPanel.tsx b/web/src/components/panels/AISummaryPanel.tsx
new file mode 100644
index 0000000..7495427
--- /dev/null
+++ b/web/src/components/panels/AISummaryPanel.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { fetchSummary } from '../../api/client'
+import { upsellURL } from '../../lib/constants'
+import { Card, CardHeader, CardTitle } from '../ui/Card'
+import { Button } from '../ui/Button'
+
+export function AISummaryPanel() {
+ const [summary, setSummary] = useState
+ 
+
+
+
+
+
+
+ Möbius
+
+
+
+ Online
+
+
+
+
+
+
+
+
+
+
+
+
+ Welcome to Dstl8 Lite! I'm Möbius, your AI log analyst.
+ I can help you understand patterns, anomalies, and issues in your log data.
+
+ Just now
+
+
+
+
+
+
+
+ For continuous AI analysis and real-time insights,{' '}
+
+ upgrade to Dstl8 Pro
+ {' '}
+ to unlock the full Möbius experience.
+
+ Just now
+
+
+
+
+
+
+
+
+ ) : error ? (
+ + {summary} +
+ +
+
+ ) : (
+ {error}
+
+
+
+ AI analysis requires a configured AI provider.
+ Configure --ai-provider or try{' '}
+
+ Mobius on Dstl8 Pro
+
+ {' '}for built-in AI analysis.
+
+
+ )}
+ + Generate an AI-powered summary of your current log data. +
+ +
+
+ + Want continuous AI analysis?{' '} + + Try Mobius on Dstl8 Pro + +
+
+ Loading...
+
+
+ No data yet
+
+ ) : (
+
+
+ )}
+
+ {minutes.map((minute, i) => {
+ const counts = minute.counts || {}
+ const total = Object.values(counts).reduce((a, b) => a + b, 0)
+ const opacity = Math.max(0.1, total / maxCount)
+ // Dominant severity determines color
+ const dominant = SEVERITY_ORDER.find((s) => (counts[s] || 0) > 0) || 'INFO'
+ const color = SEVERITY_COLORS[dominant] || SEVERITY_COLORS.UNKNOWN
+ const time = new Date(minute.timestamp * 1000)
+ const label = `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`
+ return (
+
+
+
+ {i % 10 === 0 && (
+
+ {label}
+
+ )}
+
+ )
+ })}
+
+ {SEVERITY_ORDER.slice(0, 5).map((s) => (
+
+
+ {s}
+
+ ))}
+
+
+ {log.message}
+ {log.attributes && Object.keys(log.attributes).length > 0 && (
+
+ ) : (
+ {log.message}
+ )}
+
+ {Object.entries(log.attributes).map(([k, v]) => (
+
+ )}
+
+ {k}: {v}
+
+ ))}
+
+ Loading...
+
+ ) : logs.length === 0 ? (
+
+ No logs yet
+
+ ) : null
+ )
+
+ // Compact mode: no card wrapper, no header, constrained height
+ if (compact) {
+ return (
+
+ {renderEmpty() || (
+ <>
+
+
+ {logs.map((log, i) => renderLogRow(log, i, true))}
+
+
+
+
+ )}
+
+ )
+ }
+
+ const heightClass = fullHeight ? 'h-full' : 'h-64'
+
+ return (
+
+ setFilter(e.target.value)}
+ className="rounded border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1 text-xs text-[var(--color-text)] outline-none focus:border-[var(--color-accent)]"
+ />
+
+
+ {logs.length} entries
+
+
+
+ {renderEmpty() || (
+ <>
+
+
+ {logs.map((log, i) => renderLogRow(log, i, false))}
+
+
+
+
+ )}
+
+
+ Loading...
+
+ ) : topPatterns.length === 0 ? (
+
+ No patterns detected yet
+
+ ) : (
+
+
+
+
+
+ )}
+ | Group | +Pattern | +Count | +% | +
|---|---|---|---|
|
+ |
+ + {p.pattern} + | ++ {p.count.toLocaleString()} + | ++ {p.percentage.toFixed(1)}% + | +
+ Loading...
+
+
+ No data yet
+
+ ) : (
+
+ {/* Main card */}
+
+ )
+}
+
+function StreamRow({ name, active, logCount, onClick }: {
+ name: string
+ active: boolean
+ logCount?: number
+ onClick?: () => void
+}) {
+ return (
+
+
+
+ {/* Expanded: dimension groups */}
+ {expanded && (
+
+
+
+
+
+
+
+ {group.source}
+
+ ▼
+
+
+
+
+
+ Streams
+ {group.streams.length}
+
+
+ Logs
+ {group.totalLogs.toLocaleString()}
+
+
+ Active
+ 0 ? 'var(--health-ok)' : 'var(--text-muted)',
+ }}>
+ {group.activeCount}
+
+
+
+
+ Stream Info
+
+
+ {group.activeCount} of {group.streams.length} streams active
+
+
+ {group.totalLogs.toLocaleString()} total logs ingested
+
+
+
+ )}
+
+
+ {totalStreamCount || group.streams.length} Streams
+
+
+
+ {dimensionGroups.length === 0 ? (
+ /* Fallback: show raw streams if no dimensions available */
+
+
+
+
+
+ {group.streams.map((stream, i) => (
+ onOpenStream('stream', stream.stream) : undefined}
+ />
+ ))}
+
+ ) : (
+
+ {dimensionGroups.map((dim) => (
+
+ )}
+
+ {/* Dimension header */}
+
+ ))}
+ { e.stopPropagation(); toggleDim(dim.label) }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 8,
+ padding: '8px 4px',
+ cursor: 'pointer',
+ userSelect: 'none',
+ }}
+ >
+
+ ▼
+
+
+ {dim.label}
+
+
+ {dim.values.length} {dim.values.length === 1 ? 'stream' : 'streams'}
+
+
+
+ {/* Dimension values (streams) */}
+ {!collapsedDims.has(dim.label) && (
+
+ {dim.values.map((v) => (
+ onOpenStream(dim.label.toLowerCase(), v.name) : undefined}
+ />
+ ))}
+
+ )}
+ { e.currentTarget.style.background = 'var(--bg-tertiary)' }}
+ onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
+ >
+ {/* Health dot */}
+
+
+ {/* Stream name */}
+
+ {name}
+
+
+ {/* Log count (if available) */}
+ {logCount !== undefined && (
+
+ {logCount.toLocaleString()} logs
+
+ )}
+
+ {/* Arrow indicator for clickable rows */}
+ {onClick && (
+ ›
+ )}
+
+ )
+}
+
+export function SourcesSection({ refreshKey, onOpenStream }: Props) {
+ const [streams, setStreams] = useState
+
+ )
+ }
+
+ return (
+ Sources
+
+ Loading sources...
+
+
+
+ )
+}
diff --git a/web/src/components/panels/StreamSelector.tsx b/web/src/components/panels/StreamSelector.tsx
new file mode 100644
index 0000000..9354b2e
--- /dev/null
+++ b/web/src/components/panels/StreamSelector.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react'
+import { fetchStreams } from '../../api/client'
+import type { StreamInfo } from '../../api/types'
+import { Card, CardHeader, CardTitle } from '../ui/Card'
+
+interface Props {
+ refreshKey: number
+}
+
+export function StreamSelector({ refreshKey }: Props) {
+ const [streams, setStreams] = useStateSources
+ + {/* Tab bar */} +
+
+ {groups.map((g) => (
+
+ ))}
+
+
+ {/* Source cards */}
+ {filteredGroups.length === 0 ? (
+
+ No active sources.{' '}
+ {status && status.total_logs === 0 && (
+ Start sending logs to Gonzo to see sources here.
+ )}
+
+ ) : (
+
+ {filteredGroups.map((g) => (
+
+ setExpandedSource(expandedSource === g.source ? null : g.source)
+ }
+ dimensionGroups={dimensionGroups}
+ onOpenStream={onOpenStream}
+ />
+ ))}
+
+ {/* Upgrade teaser for more sources */}
+
+
+ )}
+
+ Loading...
+
+ ) : streams.length === 0 ? (
+
+ No active streams
+
+ ) : (
+
+ {streams.map((s, i) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+ {s.source}
+
+
+ {s.stream}
+
+
+
+
+ {s.log_count.toLocaleString()}
+
+
+ {formatLastSeen(s.last_seen)}
+
+
+ {children}
+
+ )
+}
+
+export function CardHeader({ children, className = '' }: CardProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function CardTitle({ children }: { children: ReactNode }) {
+ return (
+ {children}
+ ) +} diff --git a/web/src/components/ui/ErrorBoundary.tsx b/web/src/components/ui/ErrorBoundary.tsx new file mode 100644 index 0000000..057329b --- /dev/null +++ b/web/src/components/ui/ErrorBoundary.tsx @@ -0,0 +1,48 @@ +import { Component, type ReactNode } from 'react' +import { Card, CardHeader, CardTitle } from './Card' + +interface Props { + name: string + children: ReactNode +} + +interface State { + hasError: boolean + error: Error | null +} + +export class ErrorBoundary extends Component
+
+ Something went wrong
++ {this.state.error?.message} +
+ + {
+ if (e.target === e.currentTarget) onDismiss()
+ }}
+ >
+
+ )
+}
diff --git a/web/src/components/upsell/IncidentPlaceholder.tsx b/web/src/components/upsell/IncidentPlaceholder.tsx
new file mode 100644
index 0000000..9c44d0c
--- /dev/null
+++ b/web/src/components/upsell/IncidentPlaceholder.tsx
@@ -0,0 +1,29 @@
+import { upsellURL } from '../../lib/constants'
+import { Card, CardHeader, CardTitle } from '../ui/Card'
+
+export function IncidentPlaceholder() {
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ {/* Scrollable content */}
+
+
+ {currentRelease && (
+
+ {currentRelease.tag_name}
+
+ )}
+
+ What's New
+
+
+ {/* Current release */}
+ {currentRelease && (
+
+
+ {/* Footer */}
+
+
+ )}
+
+ {/* Previous releases */}
+ {otherReleases.length > 0 && (
+
+ {currentRelease.name || currentRelease.tag_name}
+
+
+ {formatDate(currentRelease.published_at)}
+
+
+ {collapseHashes(currentRelease.body || 'No release notes.')}
+
+
+
+ )}
+
+ Previous Releases
+
+ {otherReleases.map((rel, idx) => (
+
+
+ {expandedIdx === idx && (
+
+ ))}
+
+ {collapseHashes(rel.body || 'No release notes.')}
+
+ )}
+
+ {currentRelease?.url && (
+
+ View on GitHub
+
+ )}
+
+
+
+
+ 🔒
+ + Incident Management +
++ Create, track, and resolve incidents with AI-powered root cause analysis. +
+ + Available on Dstl8 Pro + +
+
+ 🤖
+ + Continuous AI Analysis +
++ Mobius provides real-time AI insights, anomaly detection, and intelligent alerting + across all your log streams. +
+ + Try Mobius Free + +
+
+ )
+}
diff --git a/web/src/hooks/useTheme.ts b/web/src/hooks/useTheme.ts
new file mode 100644
index 0000000..0c42181
--- /dev/null
+++ b/web/src/hooks/useTheme.ts
@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { ThemeContext } from '../components/ui/ThemeProvider'
+
+export function useTheme() {
+ const ctx = useContext(ThemeContext)
+ if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
+ return ctx
+}
diff --git a/web/src/hooks/useWebSocket.ts b/web/src/hooks/useWebSocket.ts
new file mode 100644
index 0000000..bd164ce
--- /dev/null
+++ b/web/src/hooks/useWebSocket.ts
@@ -0,0 +1,22 @@
+import { useEffect, useRef, useCallback, useState } from 'react'
+import { DashboardWebSocket } from '../api/websocket'
+import type { WebSocketUpdate } from '../api/types'
+
+export function useWebSocket() {
+ const wsRef = useRef
+
+
+
+
+ Get Full Retention
+
+ + Analyzing last 60 minutes of log data +
++ Dstl8 Lite keeps a rolling 60-minute window. For unlimited retention and historical analysis, + upgrade to the full dashboard. +
+
+ = {
+ FATAL: 'Fatal',
+ ERROR: 'Error',
+ WARN: 'Warn',
+ INFO: 'Info',
+ DEBUG: 'Debug',
+ TRACE: 'Trace',
+}
+
+function formatTimestamp(ts: number): string {
+ const d = new Date(ts * 1000)
+ const mo = (d.getMonth() + 1).toString().padStart(2, '0')
+ const day = d.getDate().toString().padStart(2, '0')
+ const h = d.getHours().toString().padStart(2, '0')
+ const m = d.getMinutes().toString().padStart(2, '0')
+ const s = d.getSeconds().toString().padStart(2, '0')
+ return `${mo}/${day} ${h}:${m}:${s}`
+}
+
+/** Stable identity for a log entry (timestamp + first 80 chars of message) */
+function logKey(log: LogSample): string {
+ return `${log.timestamp}:${log.message.slice(0, 80)}`
+}
+
+export function LogViewerPage() {
+ const [chartData, setChartData] = useState[]>([])
+ const [logs, setLogs] = useState([])
+ const [search, setSearch] = useState('')
+ const [searchInput, setSearchInput] = useState('')
+ const [loading, setLoading] = useState(true)
+ const [expandedKey, setExpandedKey] = useState(null)
+ const [paused, setPaused] = useState(false)
+ const pausedRef = useRef(false)
+ const listRef = useRef(null)
+ const wsUpdate = useWebSocket()
+ const debounceRef = useRef>(null)
+ const [severityFilter, setSeverityFilter] = useState>(new Set())
+
+ // Debounced search
+ const handleSearchInput = useCallback((val: string) => {
+ setSearchInput(val)
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ debounceRef.current = setTimeout(() => setSearch(val), 300)
+ }, [])
+
+ // Build fetch opts
+ const severityParam = severityFilter.size > 0 ? Array.from(severityFilter).join(',') : undefined
+
+ // Fetch chart data — only when not paused
+ useEffect(() => {
+ if (pausedRef.current) return
+ fetchSeverityHistory(search ? { search } : undefined)
+ .then((data) => {
+ const mapped = data.map((point) => {
+ const d = new Date(point.timestamp * 1000)
+ const h = d.getHours().toString().padStart(2, '0')
+ const m = d.getMinutes().toString().padStart(2, '0')
+ const s = d.getSeconds().toString().padStart(2, '0')
+ return {
+ name: `${h}:${m}:${s}`,
+ ...point.counts,
+ total: point.total,
+ }
+ })
+ setChartData(mapped)
+ })
+ .catch(() => {})
+ }, [wsUpdate, search]) // eslint-disable-line react-hooks/exhaustive-deps
+
+ // Fetch logs — only when not paused
+ useEffect(() => {
+ if (pausedRef.current) return
+ fetchLogs({ limit: 500, search: search || undefined, severity: severityParam })
+ .then(setLogs)
+ .catch(() => {})
+ .finally(() => setLoading(false))
+ }, [wsUpdate, search, severityParam]) // eslint-disable-line react-hooks/exhaustive-deps
+
+ // Auto-scroll when not paused
+ useEffect(() => {
+ if (!pausedRef.current && listRef.current) {
+ const el = listRef.current
+ requestAnimationFrame(() => {
+ el.scrollTop = el.scrollHeight
+ })
+ }
+ }, [logs])
+
+ const togglePaused = useCallback(() => {
+ setPaused((prev) => {
+ const next = !prev
+ pausedRef.current = next
+ // When resuming, clear expanded row and scroll to bottom
+ if (!next) {
+ setExpandedKey(null)
+ if (listRef.current) {
+ requestAnimationFrame(() => {
+ listRef.current!.scrollTop = listRef.current!.scrollHeight
+ })
+ }
+ }
+ return next
+ })
+ }, [])
+
+ const handleRowClick = useCallback((key: string) => {
+ // If user is selecting text (drag-to-copy), don't toggle the row
+ const sel = window.getSelection()
+ if (sel && sel.toString().length > 0) return
+
+ setExpandedKey((prev) => {
+ if (prev === key) {
+ // Collapsing — resume and scroll to bottom
+ setPaused(false)
+ pausedRef.current = false
+ if (listRef.current) {
+ requestAnimationFrame(() => {
+ listRef.current!.scrollTop = listRef.current!.scrollHeight
+ })
+ }
+ return null
+ } else {
+ // Expanding — pause
+ setPaused(true)
+ pausedRef.current = true
+ return key
+ }
+ })
+ }, [])
+
+ const toggleSeverity = useCallback((sev: string) => {
+ setSeverityFilter((prev) => {
+ const next = new Set(prev)
+ if (next.has(sev)) {
+ next.delete(sev)
+ } else {
+ next.add(sev)
+ }
+ return next
+ })
+ }, [])
+
+ const activeSeverities = SEVERITY_ORDER.filter((sev) =>
+ chartData.some((d) => ((d[sev] as number) || 0) > 0)
+ )
+
+ const totalLogs = chartData.reduce((sum, d) => sum + ((d.total as number) || 0), 0)
+
+ return (
+ ()
+ for (const s of streams) {
+ const key = s.source || 'unknown'
+ if (!map.has(key)) map.set(key, [])
+ map.get(key)!.push(s)
+ }
+ const groups: SourceGroup[] = []
+ for (const [source, items] of map) {
+ groups.push({
+ source,
+ streams: items,
+ totalLogs: items.reduce((sum, s) => sum + s.log_count, 0),
+ activeCount: items.filter((s) => s.active).length,
+ })
+ }
+ groups.sort((a, b) => b.totalLogs - a.totalLogs)
+ return groups
+}
+
+function buildDimensionGroups(params: InsightsParams, streams: StreamInfo[]): DimensionGroup[] {
+ const groups: DimensionGroup[] = []
+ const activeStreams = new Set(streams.filter((s) => s.active).map((s) => s.stream))
+ const addGroup = (label: string, values: string[] | undefined) => {
+ if (!values || values.length === 0) return
+ groups.push({
+ label,
+ values: values.map((v) => ({
+ name: v,
+ active: activeStreams.size > 0,
+ })),
+ })
+ }
+ addGroup('Host', params.hosts)
+ addGroup('Service', params.services)
+ addGroup('Deployment', params.deployments)
+ addGroup('Namespace', params.namespaces)
+ addGroup('Pod', params.pods)
+ addGroup('Environment', params.environments)
+ addGroup('Cluster', params.clusters)
+ return groups
+}
+
+const sourceIcons: Record = {
+ file: '\u{1F4C4}',
+ stdin: '\u{2328}',
+ k8s: '\u{2699}',
+ otlp: '\u{1F4E1}',
+ unknown: '\u{2753}',
+}
+
+function formatLastSeen(lastSeen: string): string {
+ const d = new Date(lastSeen)
+ const now = Date.now()
+ const diff = Math.floor((now - d.getTime()) / 1000)
+ if (diff < 60) return `${diff}s ago`
+ if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+ if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+ return `${Math.floor(diff / 86400)}d ago`
+}
+
+export function SourcesPage({ onOpenStream }: Props) {
+ const [streams, setStreams] = useState([])
+ const [, setStatus] = useState(null)
+ const [params, setParams] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [expandedSource, setExpandedSource] = useState(null)
+ const wsUpdate = useWebSocket()
+
+ useEffect(() => {
+ Promise.all([fetchStreams(), fetchStatus(), fetchInsightsParams()])
+ .then(([s, st, p]) => { setStreams(s); setStatus(st); setParams(p) })
+ .catch(() => {})
+ .finally(() => setLoading(false))
+ }, [wsUpdate])
+
+ const groups = groupStreams(streams)
+ const dimensionGroups = params ? buildDimensionGroups(params, streams) : []
+ const totalSources = groups.length
+ const activeSources = groups.filter((g) => g.activeCount > 0).length
+ const totalStreams = streams.length
+ const activeStreamCount = streams.filter((s) => s.active).length
+
+ const [showAddModal, setShowAddModal] = useState(false)
+ const dismissAddModal = useCallback(() => setShowAddModal(false), [])
+
+ return (
+ (null)
+ const [refreshKey, setRefreshKey] = useState(0)
+ const [activeTab, setActiveTab] = useState<'patterns' | 'logs'>('patterns')
+ const wsUpdate = useWebSocket()
+
+ const loadStatus = useCallback(() => {
+ fetchStatus().then(setStatus).catch(() => {})
+ }, [])
+
+ useEffect(() => {
+ loadStatus()
+ const interval = setInterval(loadStatus, 5000)
+ return () => clearInterval(interval)
+ }, [loadStatus])
+
+ useEffect(() => {
+ if (wsUpdate) setRefreshKey((k) => k + 1)
+ }, [wsUpdate])
+
+ const search = dimensionValue
+
+ return (
+ = {
+ alerts: {
+ title: 'Alerts',
+ description:
+ 'Create, track, and resolve alerts with AI-powered root cause analysis and team collaboration.',
+ },
+ sources: {
+ title: 'Source Management',
+ description:
+ 'Connect to AWS, GCP, Azure, Kubernetes, and 20+ other log sources with one-click setup.',
+ },
+ users: {
+ title: 'Team Management',
+ description:
+ '...And share runtime context across your team and AI tooling.',
+ },
+ retention: {
+ title: 'Retention',
+ description:
+ 'Configure log retention policies, storage tiers, and archival rules for long-term analysis.',
+ },
+ support: {
+ title: 'Priority Support',
+ description:
+ 'Get direct access to our engineering team with priority response times and dedicated support.',
+ },
+}
+
+interface Props {
+ featureId: string
+}
+
+export function UpgradePage({ featureId }: Props) {
+ const info = pageLabels[featureId] ?? {
+ title: 'Premium Feature',
+ description: 'This feature is available on the full Dstl8 dashboard.',
+ }
+
+ return (
+ (null)
+ const [attributes, setAttributes] = useState([])
+ const [refreshKey, setRefreshKey] = useState(0)
+ const [logModalOpen, setLogModalOpen] = useState(false)
+ const [paused, setPaused] = useState(false)
+ const pausedRef = useRef(false)
+ const wsUpdate = useWebSocket()
+
+ const togglePaused = useCallback(() => {
+ setPaused((prev) => {
+ const next = !prev
+ pausedRef.current = next
+ return next
+ })
+ }, [])
+
+ const loadStatus = useCallback(() => {
+ fetchStatus().then(setStatus).catch(() => {})
+ }, [])
+
+ const loadAttributes = useCallback(() => {
+ fetchTopAttributes(5).then(setAttributes).catch(() => {})
+ }, [])
+
+ useEffect(() => {
+ loadStatus()
+ loadAttributes()
+ const interval = setInterval(() => {
+ if (!pausedRef.current) {
+ loadStatus()
+ loadAttributes()
+ }
+ }, 5000)
+ return () => clearInterval(interval)
+ }, [loadStatus, loadAttributes])
+
+ useEffect(() => {
+ if (wsUpdate && !pausedRef.current) setRefreshKey((k) => k + 1)
+ }, [wsUpdate])
+
+ return (
+ (null)
+ const [showNewModal, setShowNewModal] = useState(false)
+
+ useEffect(() => {
+ fetchStatus().then(setStatus).catch(() => {})
+ const interval = setInterval(() => {
+ fetchStatus().then(setStatus).catch(() => {})
+ }, 5000)
+ return () => clearInterval(interval)
+ }, [])
+
+ const activeStreams = status?.streams.filter((s) => s.active) ?? []
+ const streams = activeStreams.length
+ const sources = new Set(activeStreams.map((s) => s.source)).size
+ const totalLogs = status?.total_logs ?? 0
+
+ return (
+
+
+
+ {loading ? (
+ Severity Heatmap
+
+ Group by
+
+
+
+ Loading heatmap data...
+
+ ) : rows.length === 0 ? (
+
+ No data yet. Start sending logs to see the severity heatmap.
+
+ ) : (
+
+ {/* Heatmap container — vertically scrollable, columns fit horizontally */}
+
+ )
+}
diff --git a/web/src/pages/LogViewerPage.tsx b/web/src/pages/LogViewerPage.tsx
new file mode 100644
index 0000000..8e78ebe
--- /dev/null
+++ b/web/src/pages/LogViewerPage.tsx
@@ -0,0 +1,621 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+ Legend,
+ CartesianGrid,
+} from 'recharts'
+import { fetchSeverityHistory, fetchLogs } from '../api/client'
+import type { LogSample } from '../api/types'
+import { SEVERITY_COLORS, SEVERITY_ORDER, severityColor } from '../lib/colors'
+import { useWebSocket } from '../hooks/useWebSocket'
+
+const SEVERITY_LABELS: Record
+
+ )}
+
+ {/* Time axis header — right-aligned so data grows from the right */}
+
+
+ {/* Legend */}
+
+ {visibleColumns.map((ts) => {
+ // Show label every 5 seconds
+ const showLabel = ts % 5 === 0
+ return (
+
+
+ {/* Heatmap rows */}
+ {rows.map((rowName) => (
+
+ {formatTime(ts)}
+
+ )
+ })}
+
+ {/* Row label */}
+
+
+ {/* Tooltip */}
+ {tooltip && (
+
+ {rowName}
+
+
+ {/* Cells — right-aligned so they grow from the right edge */}
+
+ {visibleColumns.map((ts) => {
+ const cell = grid.get(rowName)?.get(ts)
+ return (
+
+ ))}
+ {
+ if (!cell) return
+ const rect = e.currentTarget.getBoundingClientRect()
+ const containerRect = containerRef.current?.getBoundingClientRect()
+ if (containerRect) {
+ const relY = rect.top - containerRect.top
+ const distFromBottom = containerRect.height - relY - rect.height
+ // Show below cell if near top, but not if also near bottom
+ const flipBelow = relY < 60 && distFromBottom > 100
+ setTooltip({
+ x: rect.left - containerRect.left + rect.width / 2,
+ y: flipBelow ? relY + rect.height + 8 : relY - 8,
+ flipBelow,
+ cell,
+ group: rowName,
+ })
+ }
+ }}
+ onMouseLeave={() => setTooltip(null)}
+ />
+ )
+ })}
+
+
+
+ )}
+ {tooltip.group}
+
+ {formatTime(tooltip.cell.timestamp)} · {tooltip.cell.logCount} logs
+
+
+
+ {sentimentLabel(tooltip.cell.sentiment)} ({tooltip.cell.sentiment.toFixed(2)})
+
+
+ {SENTIMENT_COLORS.map((band) => (
+
+
+
+
+ ))}
+
+
+
+ {band.label}
+
+
+ [{band.min.toFixed(2)}, {band.max === 1.01 ? '1.0' : band.max.toFixed(2)})
+
+
+ {/* Header */}
+
+ )
+}
diff --git a/web/src/pages/SourcesPage.tsx b/web/src/pages/SourcesPage.tsx
new file mode 100644
index 0000000..60bda9c
--- /dev/null
+++ b/web/src/pages/SourcesPage.tsx
@@ -0,0 +1,378 @@
+import { useEffect, useState, useCallback } from 'react'
+import { fetchStreams, fetchStatus, fetchInsightsParams } from '../api/client'
+import type { StreamInfo, StatusInfo, InsightsParams } from '../api/types'
+import { useWebSocket } from '../hooks/useWebSocket'
+import { upsellURL } from '../lib/constants'
+
+interface Props {
+ onOpenStream?: (dimensionType: string, dimensionValue: string) => void
+}
+
+interface SourceGroup {
+ source: string
+ streams: StreamInfo[]
+ totalLogs: number
+ activeCount: number
+}
+
+interface DimensionGroup {
+ label: string
+ values: { name: string; active: boolean }[]
+}
+
+function groupStreams(streams: StreamInfo[]): SourceGroup[] {
+ const map = new Map
+
+
+ {/* Severity filter pills */}
+ Log Viewer
+
+ {/* Search */}
+
+
+
+ handleSearchInput(e.target.value)}
+ style={{
+ width: 220,
+ height: 32,
+ paddingLeft: 28,
+ paddingRight: 8,
+ fontSize: 12,
+ border: '1px solid var(--border)',
+ borderRadius: 6,
+ background: 'var(--bg-card)',
+ color: 'var(--text-primary)',
+ outline: 'none',
+ }}
+ />
+
+ {/* Live / Paused toggle */}
+
+
+ {totalLogs.toLocaleString()} logs
+
+
+ Severity:
+ {SEVERITY_ORDER.map((sev) => {
+ const active = severityFilter.has(sev)
+ const anyActive = severityFilter.size > 0
+ return (
+
+ )
+ })}
+ {severityFilter.size > 0 && (
+
+ )}
+
+
+ {/* Severity Chart */}
+
+
+
+
+
+ )}
+
+
+ {/* Log Table */}
+
+
+ Log Severity Over Time
+
+
+ {paused ? 'paused' : `${chartData.length}s window`}
+
+
+ {chartData.length === 0 ? (
+
+ No data yet
+
+ ) : (
+
+ {/* Table header */}
+
+
+
+
+ {/* Scrollable rows */}
+
+ Timestamp
+
+
+ Severity
+
+
+ Message
+
+
+ {loading ? (
+
+
+ Loading logs...
+
+ ) : logs.length === 0 ? (
+
+ No logs yet. Start sending logs to see them here.
+
+ ) : (
+ <>
+ {logs.map((log, i) => {
+ const key = logKey(log)
+ const isExpanded = expandedKey === key
+ const attrs = log.attributes || {}
+ const badges = ['service', 'pod', 'namespace', 'host', 'deployment', 'environment', 'cluster', 'category']
+ .filter((k) => attrs[k] && attrs[k] !== 'unknown' && attrs[k] !== 'default')
+ .map((k) => ({ key: k, value: attrs[k] }))
+
+ return (
+ handleRowClick(key)}
+ style={{
+ display: 'flex',
+ alignItems: isExpanded ? 'flex-start' : 'center',
+ borderBottom: '1px solid var(--border)',
+ padding: '6px 0',
+ minHeight: 36,
+ cursor: 'pointer',
+ transition: 'background 0.1s',
+ background: isExpanded ? 'var(--bg-tertiary)' : undefined,
+ }}
+ onMouseEnter={(e) => { if (!isExpanded) e.currentTarget.style.background = 'var(--bg-tertiary)' }}
+ onMouseLeave={(e) => { if (!isExpanded) e.currentTarget.style.background = 'transparent' }}
+ >
+ {/* Timestamp */}
+
+ )
+ })}
+
+
+ )}
+
+ {formatTimestamp(log.timestamp)}
+
+
+ {/* Severity */}
+
+
+ {log.severity}
+
+
+
+ {/* Message */}
+
+ {isExpanded ? (
+
+
+
+ ) : (
+
+
+
+
+ {/* Metadata badges */}
+ {badges.length > 0 && (
+
+ {log.message}
+
+
+ {badges.map((b) => (
+
+ {b.key}: {b.value}
+
+ ))}
+
+ )}
+
+ {/* Full attributes */}
+ {Object.keys(attrs).length > 0 && (
+
+ {Object.entries(attrs).map(([k, v]) => (
+
+ )}
+
+ {k}
+ =
+ {v}
+
+ ))}
+
+
+
+ {log.message}
+
+ {badges.length > 0 && (
+
+ )}
+
+ {badges.slice(0, 3).map((b) => (
+
+ {b.value}
+
+ ))}
+ {badges.length > 3 && (
+
+ +{badges.length - 3}
+
+ )}
+
+ )}
+
+
+ )
+}
+
+function SummaryStat({ icon, value, label, color }: { icon: string; value: number | string; label: string; color: string }) {
+ return (
+
+
+
+ {showAddModal && (
+ Sources
+ + { if (e.target === e.currentTarget) dismissAddModal() }}
+ >
+
+ )}
+
+ {/* Summary stats row — matches Dstl8 sources page */}
+
+
+ + Add Source +
++ Add always-on sources for AWS, Vercel, Supabase, OTel and more for continuous runtime feedback for your AI tooling. +
+
+
+
+ Learn More
+
+
+
+
+
+ {/* Source list */}
+ {loading ? (
+
+ Loading sources...
+
+ ) : groups.length === 0 ? (
+
+ No active sources. Start sending logs to Gonzo to see sources here.
+
+ ) : (
+
+ {groups.map((g) => {
+ const isExpanded = expandedSource === g.source
+ const isHealthy = g.activeCount > 0
+ return (
+
+ )}
+
+ {/* Source row */}
+
+ )
+ })}
+
+ setExpandedSource(isExpanded ? null : g.source)}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 16,
+ padding: '16px 24px',
+ background: 'var(--bg-card)',
+ border: '1px solid var(--border)',
+ borderBottom: isExpanded ? 'none' : undefined,
+ borderTopLeftRadius: 'var(--radius)',
+ borderTopRightRadius: 'var(--radius)',
+ borderBottomLeftRadius: isExpanded ? 0 : 'var(--radius)',
+ borderBottomRightRadius: isExpanded ? 0 : 'var(--radius)',
+ marginBottom: isExpanded ? 0 : 8,
+ cursor: 'pointer',
+ transition: 'all 0.15s ease',
+ }}
+ onMouseEnter={(e) => { if (!isExpanded) e.currentTarget.style.background = 'var(--bg-tertiary)' }}
+ onMouseLeave={(e) => { if (!isExpanded) e.currentTarget.style.background = 'var(--bg-card)' }}
+ >
+ {/* Source icon */}
+
+ {sourceIcons[g.source] || sourceIcons.unknown}
+
+
+ {/* Source name + meta */}
+
+
+ {/* Expanded streams panel */}
+ {isExpanded && (
+
+
+
+ {/* Health badge */}
+
+ {g.source.charAt(0).toUpperCase() + g.source.slice(1)}
+
+
+ {g.streams.length} stream{g.streams.length !== 1 ? 's' : ''} · Last seen {
+ g.streams.length > 0 ? formatLastSeen(g.streams[0].last_seen) : 'never'
+ }
+
+
+
+
+ {isHealthy ? 'Healthy' : 'Inactive'}
+
+
+
+ {/* Chevron */}
+
+ ▼
+
+
+ {/* Dimension groups — shows streams grouped by Host, Service, etc. */}
+ {dimensionGroups.length > 0 && (
+
+ )}
+
+
+ )}
+
+ Dimensions
+
+ {dimensionGroups.map((dim) => (
+
+
+ ))}
+
+ {dim.label} ({dim.values.length})
+
+ {dim.values.map((v) => (
+ {
+ e.stopPropagation()
+ onOpenStream?.(dim.label.toLowerCase(), v.name)
+ }}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: 12,
+ padding: '6px 12px 6px 20px',
+ cursor: onOpenStream ? 'pointer' : 'default',
+ borderRadius: 'calc(var(--radius) - 2px)',
+ transition: 'background 0.15s ease',
+ }}
+ onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-tertiary)' }}
+ onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
+ >
+
+
+ {v.name}
+
+ {onOpenStream && (
+ ›
+ )}
+
+ ))}
+
+ {icon}
+
+ )
+}
diff --git a/web/src/pages/StreamDetailsPage.tsx b/web/src/pages/StreamDetailsPage.tsx
new file mode 100644
index 0000000..fa66e9d
--- /dev/null
+++ b/web/src/pages/StreamDetailsPage.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useState, useCallback } from 'react'
+import { ErrorBoundary } from '../components/ui/ErrorBoundary'
+import { MobiusChat } from '../components/layout/MobiusChat'
+import { SeverityDistribution } from '../components/panels/SeverityDistribution'
+import { PatternAnalysis } from '../components/panels/PatternAnalysis'
+import { LogViewer } from '../components/panels/LogViewer'
+import { useWebSocket } from '../hooks/useWebSocket'
+import { fetchStatus } from '../api/client'
+import type { StatusInfo } from '../api/types'
+
+interface Props {
+ dimensionType: string
+ dimensionValue: string
+}
+
+export function StreamDetailsPage({ dimensionType, dimensionValue }: Props) {
+ const [status, setStatus] = useState
+
+ {value}
+ {label}
+
+ {/* Stream header */}
+
+ )
+}
diff --git a/web/src/pages/UpgradePage.tsx b/web/src/pages/UpgradePage.tsx
new file mode 100644
index 0000000..18bacbd
--- /dev/null
+++ b/web/src/pages/UpgradePage.tsx
@@ -0,0 +1,71 @@
+import { upsellURL } from '../lib/constants'
+import { Icons } from '../lib/icons'
+
+const pageLabels: Record
+
+
+ {/* Main content + Mobius sidebar */}
+
+
+ {dimensionValue}
+ + {dimensionType} + + {status && ( +
+ {status.total_logs.toLocaleString()} total logs
+ {status.log_rate.toFixed(1)}/s
+
+ )}
+
+
+
+
+ {/* Severity distribution (real-time stacked bar chart) */}
+
+
+
+
+
+
+
+ {/* Tabbed section: Patterns | Logs */}
+
+ {/* Tab bar */}
+
+
+
+
+
+
+ {/* Tab content */}
+
+ {activeTab === 'patterns' && (
+
+
+ )}
+ {activeTab === 'logs' && (
+
+
+ )}
+
+
+
+
+
+ )
+}
diff --git a/web/src/pages/WorkspaceDetailsPage.tsx b/web/src/pages/WorkspaceDetailsPage.tsx
new file mode 100644
index 0000000..d316f7f
--- /dev/null
+++ b/web/src/pages/WorkspaceDetailsPage.tsx
@@ -0,0 +1,423 @@
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { ErrorBoundary } from '../components/ui/ErrorBoundary'
+import { MobiusChat } from '../components/layout/MobiusChat'
+import { SourcesSection } from '../components/panels/SourcesSection'
+import { SeverityDistribution } from '../components/panels/SeverityDistribution'
+import { LogViewer } from '../components/panels/LogViewer'
+import { useWebSocket } from '../hooks/useWebSocket'
+import { fetchStatus, fetchTopAttributes } from '../api/client'
+import { upsellURL } from '../lib/constants'
+import type { StatusInfo, AttributeEntry } from '../api/types'
+
+interface Props {
+ onOpenStream?: (dimensionType: string, dimensionValue: string) => void
+}
+
+function formatBytes(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+ if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+ return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
+
+function StatRow({ label, value }: { label: string; value: string }) {
+ return (
+
+
+ {Icons.lock}
+ {info.title}
+{info.description}
+ + Upgrade to Dstl8 Pro + ++ Dstl8 Lite is powered by{' '} + + Gonzo + + {' '}— the full Dstl8 dashboard unlocks all features. +
+
+ {label}
+ {value}
+
+ )
+}
+
+export function WorkspaceDetailsPage({ onOpenStream }: Props) {
+ const [status, setStatus] = useState
+ {/* Workspace header with inline stats */}
+
+ )
+}
diff --git a/web/src/pages/WorkspacesPage.tsx b/web/src/pages/WorkspacesPage.tsx
new file mode 100644
index 0000000..36a5980
--- /dev/null
+++ b/web/src/pages/WorkspacesPage.tsx
@@ -0,0 +1,210 @@
+import { useEffect, useState } from 'react'
+import { fetchStatus } from '../api/client'
+import type { StatusInfo } from '../api/types'
+import { upsellURL } from '../lib/constants'
+import { Icons } from '../lib/icons'
+
+interface Props {
+ onOpenWorkspace: () => void
+}
+
+export function WorkspacesPage({ onOpenWorkspace }: Props) {
+ const [status, setStatus] = useState
+
+
+ {/* Main content + Mobius sidebar */}
+
+
+ Gonzo!
+ + {status && ( +
+ {status.total_logs.toLocaleString()} logs
+ {status.log_rate.toFixed(1)}/s
+ {status.uptime}
+
+ )}
+
+
+
+
+ {/* ── General Statistics + Severity Distribution ── */}
+
+
+
+
+
+ {/* General Statistics card */}
+ {status && (
+
+
+
+
+ {/* ── Top Attributes table ── */}
+ {attributes.length > 0 && (
+
+ s.active).length.toString()} />
+
+ )}
+
+ {/* Severity Distribution chart */}
+ + General Statistics +
+
+
+
+
+
+ )}
+
+ {/* ── Live Log Stream preview ── */}
+
+
+ + Top Attributes +
+| Key | +Value | +Count | +% | +
|---|---|---|---|
| {attr.key} | +{attr.value} | ++ {attr.count.toLocaleString()} + | +
+
+
+
+
+
+
+ {attr.percentage.toFixed(1)}%
+
+ |
+
+
+
+ {/* ── Full-screen Log Modal ── */}
+ {logModalOpen && (
+
+
+ + Live Logs +
+ +
+
+
+
+ {
+ if (e.target === e.currentTarget) setLogModalOpen(false)
+ }}
+ >
+
+ )}
+
+ {/* ── Sources section ── */}
+
+
+
+
+ + Live Logs +
+ +
+
+
+
+
+ {/* Mobius Analysis upsell */}
+
+
+
+
+ {/* Alerts upsell */}
+
+
+
+ Möbius Analysis
+
+
+
+
+ Möbius Analysis
+
+ + Get AI-powered summaries, correlated anomaly detection, and + root-cause analysis across all your sources. +
+ + Upgrade for Möbius AI Analysis + Root cause analysis, summaries, alerts and chat + +
+
+
+
+
+ Alerts
+
+
+ Cloud
+
+
+ + Create, track, and resolve alerts with automatic correlation, + timeline views, and team collaboration. +
+ + Upgrade for Alerts + +
+
+ )
+}
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+ {/* Stats bar */}
+ Workspaces
+ +
+
+
+ {/* Workspace grid */}
+
+
+
+
+
+
+
+ 1
+ Workspace
+
+
+
+
+
+
+
+ {streams}
+ Active Streams
+
+
+
+
+
+
+
+ {totalLogs.toLocaleString()}
+ Total Logs
+
+
+
+ {/* New Workspace upsell modal */}
+ {showNewModal && (
+
+
+
+
+
+ Gonzo!
+
+
+
+
+ {/* Simple sparkline placeholder */}
+
+
+ Streams
+ {streams}
+
+
+ Logs
+ {totalLogs.toLocaleString()}
+
+
+ Rate
+
+ {status ? `${status.log_rate.toFixed(0)}/s` : '—'}
+
+
+ {Array.from({ length: 24 }, (_, i) => {
+ const h = Math.max(4, Math.random() * 32 + (i > 18 ? 10 : 0))
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+ {sources} sources
+
+
+
+ {status?.uptime ?? '—'} uptime
+
+ { if (e.target === e.currentTarget) setShowNewModal(false) }}
+ >
+
+ )}
+
+
+
+
+ + Add Workspace +
+ ++ Dstl8 Lite supports a single local workspace powered by Gonzo. +
++ Upgrade to Dstl8 Pro for multiple workspaces, team collaboration, + cloud log sources (AWS, GCP, Azure, Supabase, Vercel), and more. +
+
+
+ Upgrade to Dstl8 Pro
+
+
+
+