## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/promptic/b6d3638e-158e-4f4b-839a-22e1c64a625e-1790402542-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/promptic/b6d3638e-158e-4f4b-839a-22e1c64a625e-1790402502341-full.webp
- Component on Kage: https://kage.design/component/promptic-feature-grid-4

## Before you start
Ask what actions an agent can take in the user's product, what evidence it should show, and what approval boundary users need. Build the component around those constraints.

Design a dark agent-workflow section with a two-column header and body. On the left, show five vertically stacked actions with small square line icons, concise labels, and one selected action in a charcoal bordered card with an orange icon accent. On the right, show a dark workbench/chat panel with a subtle top bar, a user request bubble, assistant progress rows, small tagged controls, compact metrics, and an understated input bar. Use #111111 surfaces, #282828 borders, off-white text, #9b9b9b secondary text, and orange #eb6b25 for selected or actionable elements. Keep the interface dense but calm, use 14–16px body type, and make step selection and chat input keyboard accessible. Stack columns on mobile.

Never: use logos, product names, copy, illustrations, or imagery from the reference.