single out toes logs on dashboard

src/client/components/UnifiedLogs.tsx

@@ -4,6 +4,8 @@ import {
   LogsBody,
   LogsHeader,
   LogsSection,
+  LogsTab,
+  LogsTabs,
   LogsTitle,
   LogText,
   LogTimestamp,
@@ -16,8 +18,11 @@ export interface UnifiedLogLine {
   text: string
 }
 
+type LogFilter = 'all' | 'toes'
+
 const MAX_LOGS = 200
 
+let _filter: LogFilter = 'all'
 let _logs: UnifiedLogLine[] = []
 let _source: EventSource | undefined
 
@@ -54,7 +59,6 @@ function parseLogText(text: string): { method?: string, path?: string, status?:
 function LogLineEntry({ log }: { log: UnifiedLogLine }) {
   const parsed = parseLogText(log.text)
   const statusColor = getStatusColor(parsed.status)
-
   return (
     <LogEntry>
       <LogTimestamp>{formatTime(log.time)}</LogTimestamp>
@@ -66,21 +70,31 @@ function LogLineEntry({ log }: { log: UnifiedLogLine }) {
   )
 }
 
+const filteredLogs = (): UnifiedLogLine[] =>
+  _filter === 'toes' ? _logs.filter(l => l.app === 'toes') : _logs
+
+function setFilter(filter: LogFilter) {
+  _filter = filter
+  renderLogs()
+}
+
 function LogsBodyContent() {
+  const logs = filteredLogs()
   return (
     <>
-      {_logs.length === 0 ? (
+      {logs.length === 0 ? (
         <LogEntry>
           <LogText style={{ color: 'var(--colors-textFaint)' }}>No activity yet</LogText>
         </LogEntry>
       ) : (
-        _logs.map((log, i) => <LogLineEntry key={i} log={log} />)
+        logs.map((log, i) => <LogLineEntry key={i} log={log} />)
       )}
     </>
   )
 }
 
 function renderLogs() {
+  update('#unified-logs-tabs', <LogsTabsBar />)
   update('#unified-logs-body', <LogsBodyContent />)
   // Auto-scroll after render
   requestAnimationFrame(() => {
@@ -101,11 +115,21 @@ export function initUnifiedLogs() {
   }
 }
 
+function LogsTabsBar() {
+  return (
+    <LogsTabs>
+      <LogsTab variant={_filter === 'all' ? 'active' : undefined} onClick={() => setFilter('all')}>All</LogsTab>
+      <LogsTab variant={_filter === 'toes' ? 'active' : undefined} onClick={() => setFilter('toes')}>Toes</LogsTab>
+    </LogsTabs>
+  )
+}
+
 export function UnifiedLogs() {
   return (
     <LogsSection>
       <LogsHeader>
         <LogsTitle>Logs</LogsTitle>
+        <div id="unified-logs-tabs"><LogsTabsBar /></div>
       </LogsHeader>
       <LogsBody id="unified-logs-body">
         <LogsBodyContent />

src/client/styles/dashboard.ts

@@ -97,6 +97,36 @@ export const LogsClearButton = define('LogsClearButton', {
   },
 })
 
+export const LogsTabs = define('LogsTabs', {
+  display: 'flex',
+  gap: 0,
+})
+
+export const LogsTab = define('LogsTab', {
+  base: 'button',
+  background: 'none',
+  border: 'none',
+  borderBottom: '2px solid transparent',
+  padding: '0 8px 8px',
+  fontSize: 11,
+  fontWeight: 600,
+  color: theme('colors-textFaint'),
+  cursor: 'pointer',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  selectors: {
+    '&:hover': {
+      color: theme('colors-text'),
+    },
+  },
+  variants: {
+    active: {
+      color: theme('colors-text'),
+      borderBottomColor: theme('colors-text'),
+    },
+  },
+})
+
 export const LogsBody = define('LogsBody', {
   height: 200,
   overflow: 'auto',

src/client/styles/index.ts

@@ -9,6 +9,8 @@ export {
   LogsClearButton,
   LogsHeader,
   LogsSection,
+  LogsTab,
+  LogsTabs,
   LogsTitle,
   LogStatus,
   LogText,

src/server/api/system.ts

@@ -1,4 +1,5 @@
 import { allApps, APPS_DIR, onChange } from '$apps'
+import { onHostLog } from '../tui'
 import { Hype } from '@because/hype'
 import { cpus, platform, totalmem } from 'os'
 import { join } from 'path'
@@ -258,7 +259,17 @@ function collectLogs() {
   }
 }
 
+function pushHostLog(text: string) {
+  const line: UnifiedLogLine = { time: Date.now(), app: 'toes', text }
+  unifiedLogs.push(line)
+  if (unifiedLogs.length > MAX_UNIFIED_LOGS) unifiedLogs.shift()
+  for (const listener of unifiedLogListeners) listener(line)
+}
+
 // Subscribe to app changes to collect logs
 onChange(collectLogs)
 
+// Subscribe to host-level log messages
+onHostLog(pushHostLog)
+
 export default router

src/server/tui.ts

@@ -7,8 +7,13 @@ let _apps: App[] = []
 let _enabled = (process.stdout.isTTY ?? false) && !process.env.DEBUG
 let _lastRender = 0
 let _renderTimer: Timer | undefined
+let _hostLogListeners = new Set<(text: string) => void>()
 let _showEmoji = false
 
+export const onHostLog = (cb: (text: string) => void) => {
+  _hostLogListeners.add(cb)
+}
+
 export const setShowEmoji = (show: boolean) => {
   _showEmoji = show
   scheduleRender()
@@ -21,9 +26,9 @@ export function appLog(app: App, ...msg: string[]) {
 }
 
 export function hostLog(...msg: string[]) {
-  if (!_enabled) {
-    console.log('🐾', msg.join(' '))
-  }
+  const text = msg.join(' ')
+  if (!_enabled) console.log('🐾', text)
+  for (const listener of _hostLogListeners) listener(text)
 }
 
 export function setApps(apps: App[]) {