Info block / callout

In review

Live · web

Embedded in content: tab to a link, persistent (no dismiss)

Sessions stream over SSE and reconnect with backoff. The callout below sits in the prose like any other paragraph, and it stays put.

Note

Tokens are the source of truth: bind to --color-accent-primary rather than a literal. See the token contract for the full vocabulary.

Because it is part of the document flow, a callout never floats over the layout and is never dismissed.

Tones: a filled disc + text, never color alone

Tip

Press ⌘K to jump to any session. You can also pin a session from the picker to keep it at the top.

Warning

Running nockerl git push squashes local commits into one. Pass --preserve-commits to keep each commit separate.

Caution

DELETE operations are not proxied by the credential store. Destructive actions bypass the allowlist and cannot be undone. Confirm first.

Notice: the rare warm accent (orange), a special heads-up (not a status)

Notice

Special notice: agent spawning is now live. This warm orange accent is reserved for featured, seasonal, or heads-up announcements. See the design laws.

Important, the reserved emphasis: nested hairline frames

Important

Cyan is the one editorial-emphasis tone. Reserve important for the thing a reader must not miss. See the design laws.

Quote: an editorial pull-quote (italic, quietest, no disc)

“

Quote

Bounded autonomy: autonomy calibrated by task risk. Human-in-the-loop for judgment, AI for speed-to-next-decision.

Nockerl design principles

Custom eyebrow + icon off, still persistent prose

Pro tip

Demos consume var(--token) for every value, so changing one token in tokens.css re-skins the whole page at once.

Live: tab to the link, Enter / click (the island is live)

Try it

Tab to this link and press Enter, or click it. NockerlLink fired 0 times. It stays here, persistent in the prose.

Code

TypeScriptKotlinSwift

// Web: React, consuming @dizyx/nockerl-tokens. No Callout ships yet on ANY
// platform; this is the proposed @dizyx/nockerl-react API, derived from the
// shipped emphasis vocabulary (the agent ThinkingSegment + ToolSegment inset +
// the SettingsCard eyebrow + the markdown body styling). A callout is STATIC
// editorial prose, with no dismiss and no actions (that is the Banner).

export function InstallNotes() {
  return (
    <>
      <Callout tone="note">
        Bind to <code>--color-accent-primary</code> rather than a literal. See the{' '}
        <a href="/foundations/tokens/">token contract</a>.
      </Callout>

      <Callout tone="tip" title="Pro tip">
        Press <code>⌘K</code> to jump to any session.
      </Callout>

      <Callout tone="important">Cyan is the one editorial-emphasis tone.</Callout>

      <Callout tone="warning">
        <code>nockerl git push</code> squashes local commits into one.
      </Callout>

      <Callout tone="caution">Destructive actions cannot be undone.</Callout>

      <Callout tone="quote">Bounded autonomy: autonomy calibrated by task risk.</Callout>
    </>
  );
}

// Android: Jetpack Compose. No NockerlCallout ships yet; this is the proposed
// com.nockerl.app.core.ui.NockerlCallout. It is a RECESSED content aside (a
// tonal wash over canvasAlt + a tone hairline + a FILLED tone icon disc at the
// leading edge, never a left rail, Law 6), generalising the shipped ToolSegment
// inset + ThinkingSegment prose. It is NOT a lifted NockerlSurface (that is the Banner).
// Body is markdown.
import com.nockerl.app.core.ui.NockerlCallout
import com.nockerl.app.core.ui.NockerlCalloutTone

NockerlCallout(tone = NockerlCalloutTone.NOTE) {
    MarkdownBody("Bind to `--color-accent-primary` rather than a literal.")
}

NockerlCallout("Press ⌘K to jump to any session.", tone = NockerlCalloutTone.TIP, title = "Pro tip")
NockerlCallout("Cyan is the one editorial-emphasis tone.", tone = NockerlCalloutTone.IMPORTANT)
NockerlCallout("`nockerl git push` squashes commits into one.", tone = NockerlCalloutTone.WARNING)
NockerlCallout("Destructive actions cannot be undone.", tone = NockerlCalloutTone.CAUTION)
NockerlCallout("Bounded autonomy: autonomy calibrated by task risk.", tone = NockerlCalloutTone.QUOTE)

// macOS: SwiftUI (Voice). No callout ships; the closest shipped patterns are the
// SettingsCard eyebrow (uppercase tracked label) + the InfoTip popover. This is
// the proposed NockerlCallout view: a recessed, tone-tinted rounded-rect with a
// filled leading tone disc (an SF Symbol knockout) + eyebrow + rich Text body,
// never a left rail (Law 6). Persistent, with no dismiss.
NockerlCallout(tone: .note) {
    Text("Bind to ") + Text("--color-accent-primary").monospaced() + Text(" rather than a literal.")
}

NockerlCallout("Press ⌘K to jump to any session.", tone: .tip, title: "Pro tip")
NockerlCallout("Cyan is the one editorial-emphasis tone.", tone: .important)
NockerlCallout("`nockerl git push` squashes commits into one.", tone: .warning)
NockerlCallout("Destructive actions cannot be undone.", tone: .caution)
NockerlCallout("Bounded autonomy: autonomy calibrated by task risk.", tone: .quote)

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
children *	string	n/a	Rich body content (the prose). Accepts a small, trusted HTML string so a callout can carry a link + inline code + emphasis like real body copy.
tone	NockerlCalloutTone	'note'	Editorial tone. Drives the disc/frame color, the default eyebrow, the icon.
title	string	n/a	Optional eyebrow override (an uppercase lead label). Defaults per tone.
icon	boolean	true	Show the leading disc. Defaults on; quote is disc-less (a quote mark instead).

There is no dismissible / onDismiss / action. A callout is persistent editorial content. For a dismissible, action-bearing, app-state alert, use the Banner.

NockerlCallout is the proposed Compose component: a recessed Box (panel radius) with a tonal wash over canvasAlt, a tone hairline, an inner top shadow (the recessed-well depth), and a filled leading tone disc (nested hairline frames for the important tone), never a left rail (Law 6). It is deliberately not a NockerlSurface/NockerlCard (those lift); a callout sinks into the page like body content. The body is markdown via the shared MarkdownBody.

Parameter	Type	Default	Description
text	String	n/a	Convenience body (markdown), rendered with bodyMedium. Mutually exclusive with the content slot.
content	(@Composable ColumnScope.() -> Unit)?	null	Rich body slot for when plain markdown is not enough (links, inline code, nested composables).
tone	NockerlCalloutTone	NOTE	Tone: NOTE · TIP · IMPORTANT · WARNING · CAUTION · QUOTE. IMPORTANT is the only cyan; NOTE/QUOTE use onCard.
modifier	Modifier	Modifier	Outer modifier. Pass Modifier.fillMaxWidth() for a full-width block in a column.
title	String?	null	Uppercase eyebrow label; defaults to the tone name. Paired with the disc + icon + text, so color is never the only cue.
showIcon	Boolean	true	Show the leading tone icon (top-aligned). QUOTE renders a quote glyph regardless.

NockerlCallout is the proposed SwiftUI view: a recessed RoundedRectangle (panel radius) tinted by the tone, with a filled leading tone disc (an SF Symbol knockout) + an uppercase eyebrow (the SettingsCard lead style) + a rich Text body, never a left rail (Law 6). It echoes the shipped SettingsCard eyebrow and InfoTip palette, reframed as a persistent in-content aside (no dismiss, no nockerlElevation() lift).

Style	Type	Default	Description
init(_:tone:title:)	View	n/a	The body string + tone (.note / .tip / .important / .warning / .caution / .quote). .important uses NockerlTheme.accent (cyan); .note/.quote use onSurface.
init(tone:title:content:)	View	n/a	Rich-body initializer taking a @ViewBuilder for links + monospaced inline code + emphasis.
title:	String?	n/a	Uppercase eyebrow; defaults to the tone name (nil → tone name).
showIcon:	Bool	n/a	Leading SF Symbol in the tone color, top-aligned. .quote shows a quotation glyph. Defaults to true.

Cross-platform drift (tracked for reconciliation)

The callout now ships on web as NockerlCallout in @dizyx/nockerl-react, and on both natives as NockerlCallout. The web component is the one documented above; the native surfaces are on their own migration track, so treat the sections below as the reconciliation list rather than as a description of one shared API. The callout stays deliberately distinct from the Banner: a banner is a lifted, transient inline alert (drop shadow + catch-light + status wash + an X + an action, reacting to app state); a callout is a recessed, persistent editorial aside (an inset tonal well

• a filled tone disc + prose, part of the document flow, no dismiss). The divergences to reconcile when it lands, tracked in the Review queue:

• Source patterns differ: Android has the inline ThinkingSegment (italic + muted prose) and the ToolSegment (a tonal inset + hairline), but neither is a reusable aside. Voice has the SettingsCard eyebrow + the InfoTip popover, but no in-content note. This page proposes the shared one.
• important tone color: this is the one place cyan is used editorially (brand emphasis, not status). The warm tones map to status tokens; one cyan-vs-status mapping should be canonized so callout and banner stay legibly different.
• Quote treatment: the quote tone reuses Android’s italic + muted reasoning style; Voice/web would need a matching italic prose style + a quote glyph token.