v0.6.0
ComponentsReasoning

Reasoning

atom

The model’s thinking disclosure — “Thought for 12s”, collapsed by default.

Reasoning
The AI's thinking line — collapsed by default, the transcript one click away.
Thought for 12s

Two invoices match "overdue". The total the user asked for should count all open invoices, not just the overdue ones — compute both and answer with the distinction.

Thinking · 4s

Recipe CSS

This is the exact CSS your kit ships for Reasoning — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Reasoning ===
   The model's thinking disclosure — the "Thought for 12s" line above an AI
   reply. Collapsed by default (the thinking is context, not content); a native
   <details> opens a quiet, rail-marked transcript in faint caption type. One
   optional axis:
     .reasoning--live   still thinking (info-tinted label)
   Compose INSIDE .msg before the body, or above a .prose answer. */
.reasoning { font-size: var(--k-type-caption); }
.reasoning summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-6);
  color: var(--k-fg-muted);
  font-weight: var(--k-weight-medium);
  cursor: pointer;
}
.reasoning summary::-webkit-details-marker { display: none; }
.reasoning__time { color: var(--k-fg-faint); font-weight: normal; }
.reasoning--live summary { color: var(--k-info); }
.reasoning__chevron {
  width: var(--k-icon-xs);
  height: var(--k-icon-xs);
  color: var(--k-fg-faint);
  flex: none;
  transition: transform var(--k-dur, 200ms) var(--k-ease, ease);
}
.reasoning[open] .reasoning__chevron { transform: rotate(180deg); }
.reasoning__body {
  margin: var(--k-s-6) 0 0;
  padding: var(--k-s-2) 0 var(--k-s-2) var(--k-s-10);
  border-left: var(--k-stroke-3, 3px) solid var(--k-border);
  color: var(--k-fg-faint);
  line-height: 1.6;
}