Context Window

Information supplied to the AI for a response.

html

<div class="context-window" style="--accent:#A8E6C1;">
  <div class="context-window__row">
    <span class="context-window__label">Context window</span>
    <span class="context-window__value">62%</span>
  </div>
  <div class="context-window__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" aria-label="Context window">
    <div class="context-window__fill" style="width:62%;"></div>
  </div>
  <p class="context-window__warning">Nearing limit — consider summarising earlier turns.</p>
</div>
<style>
.context-window { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 360px; padding: 16px; border-radius: 12px; border: 1px solid #24143014; box-sizing: border-box; }
.context-window__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.context-window__label { font-weight: 600; font-size: 13px; }
.context-window__value { font-variant-numeric: tabular-nums; font-size: 13px; color: #24143099; }
.context-window__track { height: 10px; border-radius: 999px; background: #24143014; overflow: hidden; }
.context-window__fill { height: 100%; border-radius: 999px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
.context-window__fill { transition: width .2s ease; }
}
.context-window__warning { margin: 8px 0 0; font-size: 12.5px; color: #241430; background: color-mix(in srgb, #E8A020 22%, #FAF7F2); border-left: 3px solid #E8A020; padding: 6px 10px; border-radius: 6px; box-sizing: border-box; }
</style>

tailwind

<div class="font-sans text-sm leading-relaxed text-[#241430] bg-[#FAF7F2] max-w-[360px] p-4 rounded-xl border border-[#24143014] box-border" style="--accent:#A8E6C1;">
  <div class="flex justify-between items-baseline mb-2">
    <span class="font-semibold text-[13px]">Context window</span>
    <span class="text-[13px] text-[#24143099] tabular-nums">62%</span>
  </div>
  <div class="h-2.5 rounded-full bg-[#24143014] overflow-hidden" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" aria-label="Context window">
    <div class="h-full rounded-full" style="width:62%;background:var(--accent);"></div>
  </div>
  <p class="mt-2 mb-0 text-[12.5px] text-[#241430] px-2.5 py-1.5 rounded-md box-border" style="background:color-mix(in srgb, #E8A020 22%, #FAF7F2);border-left:3px solid #E8A020;">Nearing limit — consider summarising earlier turns.</p>
</div>

react

export function ContextWindow({
  usedPercent = 62,
  label = "Context window",
  accent = "#A8E6C1",
  warnHigh = true,
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", maxWidth: 360, padding: 16, borderRadius: 12, border: "1px solid #24143014", boxSizing: "border-box" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
        <span style={{ fontWeight: 600, fontSize: 13 }}>{label}</span>
        <span style={{ fontSize: 13, color: "#24143099", fontVariantNumeric: "tabular-nums" }}>{usedPercent}%</span>
      </div>
      <div role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={usedPercent} aria-label={label}
        style={{ height: 10, borderRadius: 999, background: "#24143014", overflow: "hidden" }}>
        <div className="cw-bar" style={{ height: "100%", borderRadius: 999, background: accent, width: `${usedPercent}%` }} />
      </div>
      {warnHigh && (
        <p style={{ margin: "8px 0 0", fontSize: 12.5, color: "#241430", background: `color-mix(in srgb, #E8A020 22%, #FAF7F2)`,
          borderLeft: "3px solid #E8A020", padding: "6px 10px", borderRadius: 6, boxSizing: "border-box" }}>
          Nearing limit — consider summarising earlier turns.
        </p>
      )}
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .cw-bar { transition: width .2s ease; }
        }
      `}</style>
    </div>
  );
}