Building user interfaces for AI agents is traditionally a multi-layered headache. Developers must configure complex websocket libraries, manage state synchronization, parse reasoning outputs manually to render tool logs, and build custom overlays for human intervention.

Furthermore, executing raw LLM actions on a host machine lacks guardrails. If an agent executes a financial charge or critical shell command, there is no native, capability-based method to stop it and ask the user for approval via a web interface.

To solve this, we are excited to introduce Inthon Agentic UI (inthon.ui) in v0.2. This in-built module bridges the gap between Inthon's capability-bounded interpreter sandbox and modern, responsive web dashboards.

A Declarative, Streamlit-like Layout API

The inthon.ui library provides a clean, declarative wrapper for layout design. Developers can customize sidebars, insert text blocks, and declare button components directly in Inthon using PyBridge: 

use py.inthon.ui as ui

ui.init(title: "My AI Assistant", port: 8080)
ui.title("Inthon Agent Center")

ui.sidebar_start()
ui.header("Settings")
ui.text("Model: Gemini 3.5 Flash")
ui.sidebar_end()

Deep VM & Capability Integration

Unlike standalone UI frameworks, inthon.ui is tightly coupled with Inthon's VM instruction loop, enabling three key agentic capabilities out of the box:

1. Real-time Tool Call Tracing (Chainlit-Style)

When an agent runs a tool (like web.search), the VM's active TraceLogger automatically intercept the event and broadcasts it over WebSockets. The dashboard renders it as a collapsible trace step, showing parameters, output JSON, and execution duration.

2. Human-in-the-Loop Gateway

Inthon's native approve keyword is now connected to the UI. When the interpreter executes an approval gate: 

approve stripe.charge before make_payment

The backend thread pauses using a thread event and sends an approval_required socket packet. A pulsing modal appears in the browser, showing the action details. Clicking Approve or Reject instantly unblocks the interpreter thread, resuming or rolling back execution securely.

3. Episodic Memory Sync

Any facts persisted via Inthon's remember statement are automatically synced with the sidebar. The UI queries the active MemoryStore (whether volatile or SQLite-backed) to give users a transparent view of the agent's long-term semantic context.

Example: Interactive Research Assistant

Here is a complete, executable Inthon script demonstrating the new UI capabilities: 

use py.inthon.ui as ui
use py.re as re
use tool web.search

ui.init(title: "Inthon Intelligent Assistant", port: 8080)

fn handle_message(query: str) {
    ui.chat_history_add("user", query)
    
    // Check if the query requires financial approval
    if re.search("buy", query) {
        ui.chat_history_add("assistant", "Payment detected. Initiating verification gate...")
        approve stripe.charge before make_payment
        ui.chat_history_add("assistant", "Payment approved!")
    }

    let status_id = ui.status_start("Searching research papers...")
    let results = web.search(query: query, limit: 3)
    
    let snippet = results[0].snippet
    remember snippet in research_memory
    
    ui.status_complete(status_id, label: "Search complete!", success: true)
    ui.chat_history_add("assistant", "Here is what I found: " + snippet)
}

ui.on_message(handle_message)
ui.launch(port: 8080)

Summary

Inthon Agentic UI transforms how developers compile, run, and monitor autonomous agents. By binding layout widgets, memory logs, and human approval verification gates directly into the language interpreter, Inthon delivers a unified, production-ready DX for AI-native software engineering.