A Kotlin Multiplatfrom library to visualize network calls when using Ktor client in CMP apps.

Demos:

Android

Desktop

iOS

The library currently uses Compose multiplatfrom for UI (can be native UI later if the host app is not using CMP). The library uses room DB for storing network logs.

The repo includes sample project and a Ktor server to test the APIs locally.

Adding the dependency

// Add this to common main dependencies
// Make sure you don't ship this to production unless you really know what you are doing
commonMain.dependencies {
    implementation("io.github.chethann:network-monitor:<latest-version>")
}
// Make sure mavenCentral() is added in the list of repositories to resolve dependencies 

Theming

All composable screens now rely on a unified Material theme with light/dark support and semantic colors (success, warning, info, pending, highlight, etc.).

Wrap any usage of the library UI with NetworkMonitorTheme (import io.github.chethann.network.monitor.view.theme.NetworkMonitorTheme).

import io.github.chethann.network.monitor.view.theme.NetworkMonitorTheme
import io.github.chethann.network.monitor.view.components.NetworkCallsListFullView

@Composable
fun NetworkMonitorContainer(calls: List<NetworkCallEntity>) {
    NetworkMonitorTheme { // Automatically picks system dark mode
        NetworkCallsListFullView(
            networkCalls = calls,
            lazyListState = rememberLazyListState(),
            onClearClick = { /* clear */ },
            onSearchClick = { /* search */ },
            onRefreshClick = { /* refresh */ }
        )
    }
}

Access extended semantic colors inside components via:

val extended = MaterialTheme.extendedColors
Text("Status", color = extended.success)

If you want to provide a custom Colors palette you can pass it to NetworkMonitorTheme(colors = myColors).

Developer / Terminal Style

You can opt into a terminal-inspired dark palette (neon green, cyan, amber accents) by setting the style parameter:

import io.github.chethann.network.monitor.view.theme.NetworkMonitorTheme
import io.github.chethann.network.monitor.view.theme.NetworkMonitorThemeStyle

@Composable
fun TerminalStyledMonitor(calls: List<NetworkCallEntity>) {
    NetworkMonitorTheme(
        style = NetworkMonitorThemeStyle.Terminal, // Forces terminal palette (dark only for now)
        darkTheme = true                           // Ensure dark surfaces (optional if system is already dark)
    ) {
        NetworkCallsListFullView(
            networkCalls = calls,
            lazyListState = rememberLazyListState(),
            onClearClick = { /* clear */ },
            onSearchClick = { /* search */ },
            onRefreshClick = { /* refresh */ }
        )
    }
}

NetworkMonitorThemeStyle.Terminal provides:

• Dark editor-like background/surface (#1E1F22 / #26282B)
• Accent primary cyan, amber secondary
• Neon success, bright warning, info cyan
• Console-like code blocks and subdued amber text highlight

Fallback style is NetworkMonitorThemeStyle.Default if you omit the parameter.

Built‑in Theme Toggle

The provided NetworkCallsView() now includes a simple top bar with buttons to switch:

• Light / Dark mode
• Default / Terminal style

If you embed lower‑level composables directly, you can replicate this by holding state:

var dark by remember { mutableStateOf(true) }
var style by remember { mutableStateOf(NetworkMonitorThemeStyle.Default) }
NetworkMonitorTheme(darkTheme = dark, style = style) { /* content */ }

Adding the plugin to Ktor

HttpClient {
    install(NetworkCallsMonitor)
}

Android

// In the application class
NetworkMonitorInitializer.init {
            context = this@KotlinApplication
}

A new activity which can be launched in a new task is added when you include the library.

Desktop

// In the main application function 

NetworkMonitorInitializer.init {
    appName = "MyNetworkTest" // Default value: networkMonitor
    bdDirectory = "${System.getProperty("java.io.tmpdir")}/db"
}
/** Customise bdDirectory to choose DB file path.
Default values:
"${System.getenv("LOCALAPPDATA")}/<appName> on windows
"${System.getProperty("user.home")}/Library/Application Support/<appName>" om mac
"${System.getProperty("user.home")}/.local/share/<appName>" on Linux
 */

// Add a new window to monitor network logs
Window(
    onCloseRequest = ::exitApplication,
    title = "KotlinProject",
) {
    NetworkCallsView()
}

iOS

/**
There is no eqivalent of multiple windows or multiple tasks in iOS. NetworkCallsView can be added based you your needs.
One such example (from the Demo above)
 */

fun MainViewController() = ComposeUIViewController { IOSView() }

@Composable
fun IOSView() {
    Column(modifier = Modifier.fillMaxSize()) {
        Box(modifier = Modifier.fillMaxWidth().fillMaxHeight(0.5f)) {
            App()
        }
        Box(modifier = Modifier.fillMaxWidth()) {
            NetworkCallsView()
        }
    }
}

If you want to clone the repo and test the sample app. You can run the Ktor server embedded using the below command

./gradlew testServer:run