Banner / inline alert

In review

Live · web

Intents: an inset status disc + text, never color alone

A new session was created on api-server.

Deploy finished. nockerl-design is live.

This session has uncommitted changes.

Build failed: the container exited with code 1.

New: agent spawning is live. Dispatch a session from any task.

Read-only: this workspace is locked by your administrator.

Title vs message-only

Approval requiredA session is waiting on a tool-approval decision before it can continue.

Your API token expires in 3 days.

With action vs no icon

Local model unreachableFalling back to the cloud provider for this turn.

Tip: press ⌘K to jump to any session.

Dismissible: tab to the X, Enter / Space to collapse

Memory indexed1,204 messages were embedded into the session store.

Connection to the gateway was lost. Reconnecting.

Action fired 0 times · dismissed 0. The island is live.

Code

// Web: React, consuming @dizyx/nockerl-tokens. No Banner ships yet on ANY
// platform; this is the proposed @dizyx/nockerl-react API, derived from the
// shipped inline-alert vocabulary (errorContainer + the agent ErrorSegment).

export function SessionBanners() {
  return (
    <>
      <Banner intent="info" message="A new session was created on api-server." />
      <Banner intent="success" title="Memory indexed" message="1,204 messages embedded." dismissible onDismiss={ack} />
      <Banner
        intent="warning"
        title="Local model unreachable"
        message="Falling back to the cloud provider for this turn."
        actionLabel="Retry"
        onAction={retry}
      />
      <Banner intent="danger" message="Build failed: the container exited 1." actionLabel="Logs" onAction={openLogs} />
      <Banner intent="neutral" icon={false} message="Read-only: this workspace is locked." />
    </>
  );
}

// Android: Jetpack Compose. No NockerlBanner ships yet; this is the proposed
// com.nockerl.app.core.ui.NockerlBanner, built on NockerlSurface + the status
// tokens (the same treatment as core/theme errorContainer / the ErrorSegment).
import com.nockerl.app.core.ui.NockerlBanner
import com.nockerl.app.core.ui.NockerlBannerIntent

NockerlBanner(
    message = "Falling back to the cloud provider for this turn.",
    intent = NockerlBannerIntent.WARNING,
    title = "Local model unreachable",
    action = {
        NockerlButton("Retry", onClick = viewModel::retry, variant = NockerlButtonVariant.GHOST)
    },
    onDismiss = viewModel::dismissBanner,   // null → not dismissible
)

NockerlBanner("A new session was created on api-server.", intent = NockerlBannerIntent.INFO)
NockerlBanner("Build failed: the container exited 1.", intent = NockerlBannerIntent.DANGER)
NockerlBanner("Read-only: this workspace is locked.", intent = NockerlBannerIntent.NEUTRAL, showIcon = false)

// macOS: SwiftUI (Voice). No banner component ships; the RecordingHUD error row
// is the closest shipped pattern (a status glyph + message). This is the proposed
// NockerlBanner view built from NockerlTheme status tokens.
NockerlBanner(
    "Falling back to the cloud provider for this turn.",
    intent: .warning,
    title: "Local model unreachable",
    action: .init(label: "Retry") { retry() },
    onDismiss: { dismiss() }            // nil → not dismissible
)

NockerlBanner("A new session was created on api-server.", intent: .info)
NockerlBanner("Build failed: the container exited 1.", intent: .danger)
NockerlBanner("Read-only: this workspace is locked.", intent: .neutral, showIcon: false)

Parameters

Prop	Type	Default	Description
`message` *	`string`		Body copy: the message. Carries the alert's accessible text.
`intent`	`NockerlBannerIntent`	`'info'`	Semantic intent: drives the status color, the default icon, and role.
`title`	`string`		Optional bold heading above the message (a single short line).
`icon`	`boolean`	`true`	Show the leading status disc. Defaults to on; turn off for a bare banner.
`actionLabel`	`string`		Optional inline action label (a quiet text button, right-aligned).
`onAction`	`() => void`		Action handler. Ignored when no actionLabel is given.
`dismissible`	`boolean`	`false`	Show a dismiss (X), a separate focusable control.
`onDismiss`	`() => void`		Dismiss handler (the X).

NockerlBanner is the proposed Compose component: a NockerlSurface (panel radius + the shared lit-from-above material) washed with the intent’s status color and bordered with its hairline, exactly the shipped errorContainer / ErrorSegment treatment generalised.

Parameter	Type	Default	Description
`message` *	`String`		Body copy, rendered with `bodyMedium` on the card foreground.
`intent`	`NockerlBannerIntent`	`INFO`	Status intent: `INFO · SUCCESS · WARNING · DANGER · NEUTRAL`. `INFO` is the only cyan; `NEUTRAL` uses `onCard`.
`modifier`	`Modifier`	`Modifier`	Outer modifier. Pass `Modifier.fillMaxWidth()` for a full-bleed banner.
`title`	`String?`	`null`	Optional heading (one line) above the message, in the status color.
`showIcon`	`Boolean`	`true`	Show the leading status icon (top-aligned). Color is paired with the icon + text, never alone.
`action`	`(@Composable -> Unit)?`	`null`	Optional trailing action slot, typically a `GHOST` `NockerlButton`, pinned right.
`onDismiss`	`(() -> Unit)?`	`null`	When non-null, renders a dismiss `NockerlIconButton` (PLAIN) as a separate target. `null` → not dismissible.

NockerlBanner is the proposed SwiftUI view: a rounded-rect surface tinted by the intent’s NockerlTheme status token (error / warning / success / accent for info), echoing the shipped RecordingHUD error row (status glyph + message) as a reusable inline alert.

Style	Type	Description
`init(_:intent:)`	`View`	The message + intent (`.info` / `.success` / `.warning` / `.danger` / `.neutral`). `.info` uses `NockerlTheme.accent` (cyan); `.neutral` uses `onSurface`.
`title:`	`String?`	Optional heading above the message, in the status color. Defaults to `nil`.
`showIcon:`	`Bool`	Leading SF Symbol in the status color (e.g. `exclamationmark.triangle.fill`), top-aligned. Defaults to `true`.
`action:`	`BannerAction?`	Optional `(label, handler)` for a quiet trailing `.nockerlGhost` button, right-aligned. Defaults to `nil`.
`onDismiss:`	`(() -> Void)?`	When non-nil, shows a trailing dismiss `NockerlIconButton` (`xmark`) as a separate control. `nil` → not dismissible.

Cross-platform drift (tracked for reconciliation)

The banner now ships on web as NockerlBanner in @dizyx/nockerl-react, and on both natives as NockerlBanner. The web component is the one documented above; the native surfaces are on their own migration track, so treat the list below as the reconciliation list rather than as a description of one shared API:

Source patterns differ: Android has the inline ErrorSegment + the errorContainer tokens (tonal status fill + status hairline + status icon/text); Voice has only the RecordingHUD error row (a warning glyph + message). Neither is a reusable component, so this page proposes the shared one.
info intent color: Android/web map info to the brand cyan (status.info); Voice has no info status token and would use NockerlTheme.accent. One mapping should be canonized.
Neutral intent: Voice has no neutral-status surface; it would fall back to a plain chromeSurface card with on-surface text. Android/web wash with onCard.