Key-value / description list

In review

Live · web

Session inspector: aligned label → value

nockerl-design · docs site

Session details

Status: Streaming
Model: Large 2.0
Session ID: sess_3kPq9veL2mZ
Tokens: 128,420 in · 9,310 out
Owner: the design lead
Created: Jun 27, 2026 · 09:14
Repo: dizyx/nockerl-design
Workspace: dizyx
Ended: Not set

Compact: label above value (narrow panes)

Status: Healthy
Endpoint: http://localhost:8080
Commit: a1f9c34d8e2b
Working directory: ~/dizyx/projects/nockerl-design/ repos/nockerl-design

Tool call parameters: read-only key → value

Tool: Edit
file_path: src/components/NockerlButton.tsx
Result: Awaiting approval

Copy fired 0 times. Hover or tab a row, then activate its copy button. The island is live.

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)
// Renders a semantic <dl> of <dt>/<dd> pairs: ONE record's properties.

export function SessionInspector({ session }) {
  return (
    <KeyValueList title="Session details" labelWidth={112}>
      <KeyValueRow label="Status">
        <StatusValue status="info">Streaming</StatusValue>
      </KeyValueRow>
      <KeyValueRow label="Model">{session.model}</KeyValueRow>
      <KeyValueRow label="Session ID" mono copyText={session.id}>
        {session.id}
      </KeyValueRow>
      <KeyValueRow label="Tokens" mono>{session.tokens}</KeyValueRow>
      <KeyValueRow label="Repo">
        <a href={session.repoUrl}>{session.repo}</a>
      </KeyValueRow>
      <KeyValueRow label="Ended" />{/* empty → renders a muted "-" */}
    </KeyValueList>
  );
}

// Android: Jetpack Compose (canonical). The shipped pattern is a per-row
// label → Spacer.weight(1f) → value, laid out ON a card (ClusterSheet's metric
// rows / ToolCallCard params). No dedicated NockerlKeyValue composable yet.
// This is the intended extraction of that row.
@Composable
fun KeyValueRow(
    label: String,
    value: String,
    modifier: Modifier = Modifier,
    mono: Boolean = false,
) {
    val colors = LocalNockerlColors.current
    Row(
        modifier = modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(label, style = MaterialTheme.typography.labelMedium, color = colors.onCardMuted)
        Spacer(Modifier.weight(1f))
        Text(
            text = value.ifBlank { "-" },
            style = MaterialTheme.typography.labelMedium,
            color = colors.onCard,
            fontFamily = if (mono) FontFamily.Monospace else FontFamily.Default,
        )
    }
}

// macOS: SwiftUI (canonical, Nockerl Voice). Built manually as an HStack
// label → Spacer() → value on a card (HomeSection / HistoryView). SwiftUI's
// own LabeledContent is NOT used in the shipped app; see the drift note.
struct KeyValueRow: View {
    let label: String
    let value: String
    var mono: Bool = false

    var body: some View {
        HStack {
            Text(label)
                .font(.system(size: 13))
                .foregroundStyle(NockerlTheme.onSurfaceMuted)
            Spacer()
            Text(value.isEmpty ? "-" : value)
                .font(.system(size: 13))
                .foregroundStyle(NockerlTheme.onSurface)
                .monospacedDigit()                 // mono for ids / counts
        }
        .padding(.horizontal, 16).padding(.vertical, 10)
    }
}

Parameters

Prop	Type	Default	Description
`label` *	`string`		The key, rendered as the muted `<dt>` in the aligned label column.
`children`	`ReactNode`		The value (`<dd>`): text, a `StatusValue` pill, a link, an avatar+name. Omit / empty → a muted `-`.
`mono`	`boolean`	`false`	Render the value in the `font.family.mono` token (ids, token counts, hashes, commits).
`multiline`	`boolean`	`false`	Let the value wrap across lines (paths, descriptions) instead of staying on one baseline.
`copyText`	`string`		Reveals a copy button (a separate focusable target) that writes this string and confirms `Copied` for 2s.

KeyValueList wraps the rows in the lifted card + semantic <dl>. Props: title?, labelWidth? (aligned column, px), variant?: ‘aligned’ | ‘stacked’ (stacked puts the label above the value for narrow panes).

Parameter	Type	Default	Description
`label` *	`String`		The key. Rendered with `labelMedium` in `colors.onCardMuted`.
`value` *	`String`		The value. Rendered in `colors.onCard`; blank falls back to `"-"` via `ifBlank`.
`modifier`	`Modifier`	`Modifier`	External modifier. The row fills width and pads `16.dp × 12.dp`.
`mono`	`Boolean`	`false`	Render the value with `FontFamily.Monospace` (ids, counts, container names, loads).

The shipped rows live inside ClusterSheet / ToolCallCard on a card; Spacer(Modifier.weight(1f)) pushes the value to the trailing edge. Status values reuse colors.statusSuccess / statusWarning / statusError / statusInfo, never the brand cyan.

Parameter	Type	Default	Description
`label` *	`String`		The key. `.foregroundStyle(NockerlTheme.onSurfaceMuted)`.
`value` *	`String`		The value. `.foregroundStyle(NockerlTheme.onSurface)`; empty falls back to `"-"`.
`mono`	`Bool`	`false`	Apply `.monospacedDigit()` for numeric ids / counts.

The value is pushed right by Spacer() inside an HStack. A status value uses a ProviderBadge-style capsule; a copyable value pairs a NockerlIconButton that flips doc.on.doc → checkmark and accent → success on copy.

Cross-platform drift (tracked for reconciliation)

No shipped component yet. All three platforms render this pattern inline (Compose in ClusterSheet / ToolCallCard; Swift in HomeSection / HistoryView); none has a reusable KeyValue API. The signatures above are the intended extraction.
SwiftUI ignores LabeledContent. The native LabeledContent (which exists and does exactly this) is not used. Voice hand-builds HStack { label · Spacer · value }. It should adopt LabeledContent for free platform alignment.
Copy affordance is web + Android + Swift, but not uniform: Compose’s CopyableCodeSurface and Voice’s copy icon both flip to a check on success; the web reveals the button on row hover/focus. Reconcile the reveal + confirm timing.