Orientation & Navigation

This page provides a walkthrough of the Konnect user interface — where things are, how to navigate between views, and how the layout adapts to your workflow.

Application layout

When you open Konnect, the interface is divided into three main areas:

┌──────┬─────────────────────────────────────────────────┐
│      │  Header Bar: Connection Status │ Chat │ Layout  │
│      ├──────────────┬──────────────────────────────────┤
│      │              │                                  │
│ Side │  Data        │                                  │
│ bar  │  Sources     │       Dashboard Workspace        │
│      │              │       (Charts & Visualisations)  │
│ Nav  │──────────────│                                  │
│      │              │                                  │
│      │  Kai (AI     │                                  │
│      │  Assistant)  │                                  │
│      │              │                                  │
└──────┴──────────────┴──────────────────────────────────┘

The far-left sidebar provides access to every page in Konnect:

Icon	Page	Description
🏭	Manufacturing IDE	Main workspace — data explorer, Kai, and dashboards
📡	MQTT Integration	Manage MQTT broker connections and topic subscriptions
🔒	OPC-UA Integration	Connect OPC-UA servers and browse tag address spaces
🗄️	Data Sources	Add, edit, and test SQL database connections
💻	SQL Query	Direct SQL query editor for advanced users
📋	System Logs	View application logs for diagnostics and troubleshooting

Click any item to navigate to that page. The currently active page is highlighted.

Header bar

The header bar at the top of the Manufacturing IDE contains:

Connection status — Shows whether Konnect is connected to the backend (WebSocket status indicator).
Chat / Dashboard toggle — Switch between split-panel (IDE) mode and full-screen chat mode.
Search — Open the command palette to quickly find actions and settings.

Left panel

The left panel in the Manufacturing IDE contains two collapsible sections:

Data Sources Explorer — Shows all connected data sources with live status indicators (online/offline). You can browse tables, topics, and tags, and drag items onto the dashboard.
Kai — AI Assistant — A chat interface where you can ask questions about your data. Kai is context-aware and knows which data sources are connected.

Both sections can be collapsed by clicking their headers. The entire left panel can be collapsed using the arrow button in the header bar.

Dashboard workspace

The centre area of the IDE where your visualisations live:

Tabbed interface — Create multiple dashboard tabs for different views.
Drag & drop — Drag data from the left panel to create charts.
Auto-generated charts — When Kai answers a data question, charts are placed here automatically.
Resizable panels — Drag the divider between the left panel and dashboard to adjust sizes.

Chat mode vs IDE mode

Konnect offers two viewing modes:

IDE mode (default)

The split-panel layout with the data explorer, Kai, and dashboard side by side. Best for building dashboards and monitoring data.

Chat mode

Click the Chat button in the header to switch to a full-screen chat experience. In this mode:

Kai takes centre stage with a wide chat window.
Charts and visualisations appear inline in the conversation.
Data sources remain accessible in the sidebar.
Click Dashboard to switch back to the split view.

Mobile and responsive layout

Konnect is a Progressive Web App (PWA) and adapts to smaller screens:

On mobile devices, the sidebar collapses into a hamburger menu.
The left panel stacks above the dashboard on narrow screens.
You can install Konnect as a standalone app on your device for quick access.

Theme

Konnect supports light and dark themes. Toggle the theme using the theme switch in the sidebar footer.

Next steps

Manufacturing IDE → — Deep dive into the main workspace.
Chat & AI Assistant → — Learn everything Kai can do.