01 · Output Patterns
2 patternsReal-time token rendering as the agent generates a response. A blinking cursor signals active generation. Monospace type distinguishes model output from UI chrome.
routes: 14 found
plugins: rate-limiting, auth, cors
issues: 2 critical, 1 warning
Generating remediation plan
Surfacing what the agent is doing and why. Collapsible to reduce cognitive load. A status badge communicates lifecycle state without polling.
returns: RouteList[14]
02 · Loading and Progress
2 patternsAmbient indicator for indeterminate waits. Avoids spinner anxiety with a descriptive label. The lime accent on the bounce peak ties to Kong's brand without overusing it.
An ordered plan with live status. Makes multi-step agent work legible. Completed steps reassure; the active step shows progress without blocking the UI.
- Fetch service topology Done
- Audit authentication plugins Done
- Scan rate-limit configs Active
- Generate remediation plan Queued
- Export report Queued
03 · Trust and Control
3 patternsPer-dimension confidence bars. Helps users calibrate trust in agent output. High, medium, and low map to Kong's success, lime, and error color semantics.
Pause and surface high-stakes decisions before execution. The lime border signals an active request, not passive information. A three-choice affordance covers approve, adjust, and stop.
The agent wants to disable the legacy HMAC plugin on 3 routes in checkout-api. This action cannot be undone automatically.
Honest failure with context. Shows what failed, why, and what to do next. An error code aids engineering handoff. Retry and escalate cover most recovery paths.
The agent could not reach the Konnect Admin API. Your gateway returned a 403. Check that the personal access token has read:consumers scope.
04 · Results and Architecture
3 patternsStructured output after async work completes. A key-value layout maps to the API response shape. Lime and green semantics separate primary metrics from health signals.
Direction, not decoration. A good empty state answers "what do I do next?" rather than just acknowledging the void. The icon is purposeful, not ornamental.
No agents running
Connect a Konnect workspace to run automated gateway audits and policy checks.
A linear pipeline for orchestrated multi-step agent work. Node states (done, active, idle) communicate where work is in flight. Compact enough to embed in sidebars or status bars.
Token Reference
Verified against konghq.com production CSSEvery hex below was confirmed present in Kong's live production stylesheet (the Next.js build served from konghq.com, June 2026), and the variable names mirror Kong's actual --theme-* custom properties. Kong's brand typeface is Funnel, loaded here as the page's display and body face. Two values are surfaced at full saturation for swatch fidelity but rendered as text at AA-compliant tones elsewhere on this page (lime and error read with insufficient contrast as small text on light surfaces).