Connected App - Everyday Interface Patterns

A static connected app summary shows Calendar Sync, connected by Mina, status Connected, and last used July 7, 2026.

Program

Connected app summaries should show who connected an app and when it was used without running OAuth, token, network, or integration code.

connected_app_summary.html

Visuals: captured from real browser rendering

<section class="app-summary" aria-labelledby="app-summary-title">
  <h2 id="app-summary-title">Connected app summary</h2>
  <dl>
    <div><dt>App</dt><dd>Calendar Sync</dd></div>
    <div><dt>Connected by</dt><dd>Mina</dd></div>
    <div><dt>Status</dt><dd><span class="badge">Connected</span></dd></div>
    <div><dt>Last used</dt><dd><time datetime="2026-07-07">July 7, 2026</time></dd></div>
  </dl>
  <p class="note">Static connected app summary only; no route, save, connect, disconnect, authorize, revoke, change permissions, or call integrations runs.</p>
</section>
<style>
  .app-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .app-summary dl { display: grid; gap: 8px; margin: 0; }
  .app-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .app-summary dt { color: #475569; }
  .app-summary dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the app summary.
The section is labelled by its visible heading.
Show the app row.
The app name is exact pinned data.
Show who connected it.
The connected-by value is exact pinned data.
Show the status row.
The status is visible as a static badge.
Show the last-used readback.
The last-used date is exact pinned data.
Check connected app honesty.
App, connector, status, last used, and no integration service.

labelled summary The section heading names the connected app summary surface.

connection readback App, connected-by, status, and last-used values are exact pinned data.

no integration service The lesson should not imply OAuth flows, tokens, auth APIs, connected-app APIs, integration APIs, calendar APIs, or permission APIs.