Logcat UI & Viewer Components

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/common/LogViewer.tsx
• src/components/logcat/LogcatPanel.tsx
• src/components/logcat/LogEntryDetailPanel.tsx
• src/components/common/VirtualList.tsx
• src/components/logcat/QueryBar.tsx
• src/lib/tauri-api.ts
• src/components/logcat/logcat-levels.ts

Introduction

The Logcat UI & Viewer Components constitute a high-performance logging subsystem within Keynobi designed to handle high-frequency streaming data from Android devices. This system provides a sophisticated interface for real-time logcat monitoring, historical log analysis, and structured debugging through a virtualized rendering engine. It serves as the primary diagnostic interface for developers, bridging the gap between raw ADB output and actionable insights.

The architecture prioritizes memory efficiency and UI responsiveness by utilizing a 50,000-entry ring buffer in the Rust backend and a virtualized list in the SolidJS frontend. This ensures that the application remains performant even when processing thousands of log lines per second. Key features include multi-level filtering (level, tag, package, and regex), crash detection, and jump-to-source integration with Android Studio.

Core Architecture and Data Flow

The logging system operates on a hybrid filtering model where simple queries are offloaded to the Rust backend for performance, while complex logic (such as regex, negation, and time-based age filters) is processed incrementally in the frontend.

Component Hierarchy

Streaming Data Pipeline

Logcat data flows from the Android device through the Rust backend, which batches entries before emitting them to the frontend to prevent UI thread flooding.

Primary Components

LogcatPanel

The LogcatPanel is the central orchestrator for device logging. It manages the lifecycle of logcat streaming (start, stop, clear, restart) and maintains a local store of up to 20,000 entries for the UI layer.

• State Management: Uses SolidJS createStore for log entries and signals for UI states like autoScroll and paused.
• Backend Sync: Synchronizes with the Rust backend via setLogcatFilter to optimize the data stream.
• Incremental Indexing: Maintains an incremental crash index to allow rapid navigation through error states without rescanning the entire buffer.

Sources: src/components/logcat/LogcatPanel.tsx:47-75, src/components/logcat/LogcatPanel.tsx:162-180

VirtualList

A specialized component designed to render large datasets by only mounting DOM elements for the currently visible rows.

• Performance: Maintains a constant DOM size regardless of whether there are 10 or 20,000 log entries.
• Auto-Scroll: Implements logic to stick to the bottom of the list during active streaming unless the user manually scrolls up to inspect previous logs.
• Scroll Compensation: Adjusts the scroll position when the backend evicts old logs from the buffer to prevent the view from "jumping."

Sources: src/components/common/VirtualList.tsx, src/components/logcat/LogcatPanel.tsx:311-315

LogEntryDetailPanel

An expansion panel that provides a deep dive into a selected LogcatEntry. It displays structured metadata including PIDs, TIDs, and the full un-truncated log message.

Field	Description
Timestamp	The precise time the log was generated by the device.
Level	Log priority (Verbose, Debug, Info, Warn, Error, Fatal).
Tag	The system or app component that issued the log.
Package	The Android package name associated with the process.
PID/TID	Process and Thread IDs.

Sources: src/components/logcat/LogEntryDetailPanel.tsx:135-165

Log Filtering and Query Logic

The system utilizes a dual-stage filtering mechanism defined in the QueryBar and processed in LogcatPanel.

Backend vs. Frontend Filtering

To maintain high performance, Keynobi splits filtering responsibilities:

1. Backend (Rust): Handles minLevel, tag (substring), text (substring), and package. This reduces the amount of data serialized and sent over IPC.
2. Frontend (SolidJS): Handles OR groups (|), Negations (-), Regex (~), and Age filters (e.g., age:5m).

Sources: src/components/logcat/LogcatPanel.tsx:85-130

Query Token Types

The parseFilterGroups utility breaks the user's query into typed tokens:

Token Type	Example	Backend Supported
level	level:error	Yes
tag	tag:ActivityManager	Yes (if not regex)
package	package:mine	Yes (resolved to app ID)
age	age:10m	No (Frontend only)
negate	-tag:SST	No (Frontend only)

Sources: src/components/logcat/LogcatPanel.tsx:88-115

Level Configurations and Visuals

Logs are color-coded based on their severity level to aid in rapid visual scanning.

Specialized Features

Android Studio Integration

The StudioJumpButton appears on hover for log lines containing stack frames. It parses the class path and line number to trigger a open_in_studio IPC command, allowing developers to jump directly from a crash log to the corresponding source code.
Sources: src/components/logcat/LogcatPanel.tsx:698-745

JSON Detection and Viewing

If a log entry contains valid JSON, the system flags it with a JSON_BODY flag and displays a {} badge. Clicking this badge opens the JsonDetailPanel, which provides a formatted, syntax-highlighted view of the data.
Sources: src/components/logcat/LogcatPanel.tsx:825-865

Conclusion

The Logcat UI & Viewer Components are engineered for the scale and speed required by modern Android development. By combining Rust's performance for data ingestion and batching with SolidJS's reactive UI patterns and virtualization, the system provides a robust environment for real-time debugging. The integration with external tools like Android Studio and the support for advanced query logic make it a critical component of the Keynobi workflow.