Agent Workspace

UI/environment in which an agent operates.

html

<section class="agent-workspace" style="--accent:#BFD9F2;">
  <p class="agent-workspace__eyebrow">Agent workspace</p>
  <h3 class="agent-workspace__task">Summarise quarterly report</h3>
  <p class="agent-workspace__step">Step 2 of 5 — Extracting key figures</p>
  <div class="agent-workspace__track" role="progressbar" aria-valuemin="0" aria-valuemax="5" aria-valuenow="2" aria-label="Task progress">
    <div class="agent-workspace__fill" style="width:calc(2 / 5 * 100%);"></div>
  </div>
</section>
<style>
.agent-workspace { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 360px; padding: 18px; border-radius: 14px; border: 1px solid #24143014; box-sizing: border-box; }
.agent-workspace__eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #24143099; }
.agent-workspace__task { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.agent-workspace__step { margin: 0 0 10px; font-size: 13px; color: #24143099; }
.agent-workspace__track { height: 8px; border-radius: 999px; background: #24143014; overflow: hidden; }
.agent-workspace__fill { height: 100%; border-radius: 999px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
.agent-workspace__fill { transition: width .2s ease; }
}
</style>

tailwind

<section class="font-sans text-sm leading-relaxed text-[#241430] bg-[#FAF7F2] max-w-[360px] p-[18px] rounded-2xl border border-[#24143014] box-border" style="--accent:#BFD9F2;">
  <p class="m-0 mb-1 text-[11px] font-bold uppercase tracking-wide text-[#24143099]">Agent workspace</p>
  <h3 class="m-0 mb-2.5 text-[17px] font-semibold">Summarise quarterly report</h3>
  <p class="m-0 mb-2.5 text-[13px] text-[#24143099]">Step 2 of 5 — Extracting key figures</p>
  <div class="h-2 rounded-full bg-[#24143014] overflow-hidden" role="progressbar" aria-valuemin="0" aria-valuemax="5" aria-valuenow="2" aria-label="Task progress">
    <div class="h-full rounded-full" style="width:calc(2 / 5 * 100%);background:var(--accent);"></div>
  </div>
</section>

react

export function AgentWorkspace({
  task = "Summarise quarterly report",
  currentStep = "Extracting key figures",
  stepIndex = 2,
  accent = "#BFD9F2",
}) {
  const pct = (stepIndex / 5) * 100;
  return (
    <section style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", maxWidth: 360, padding: 18, borderRadius: 14, border: "1px solid #24143014", boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 4px", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em", color: "#24143099" }}>Agent workspace</p>
      <h3 style={{ margin: "0 0 10px", fontSize: 17, fontWeight: 600 }}>{task}</h3>
      <p style={{ margin: "0 0 10px", fontSize: 13, color: "#24143099" }}>Step {stepIndex} of 5 — {currentStep}</p>
      <div role="progressbar" aria-valuemin={0} aria-valuemax={5} aria-valuenow={stepIndex} aria-label="Task progress"
        style={{ height: 8, borderRadius: 999, background: "#24143014", overflow: "hidden" }}>
        <div className="aw-bar" style={{ height: "100%", borderRadius: 999, background: accent, width: `${pct}%` }} />
      </div>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .aw-bar { transition: width .2s ease; }
        }
      `}</style>
    </section>
  );
}