# Dashboard with assistant insights > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The overview screen of Tillwell, a shop analytics tool, showing one week for an invented homewares shop, Ferrow Goods. Above the charts sit three insight cards written by the built-in assistant, Tally. Each headline holds one number in heavy weight ("Refunds rose **18%** on Tuesday, all from one SKU"). Each card has a "Show on chart" button that lights the chart it refers to: a 2px ink ring on the panel, every other mark drops to 28% opacity, and an annotation fades in at the exact bar or point. A "Why" disclosure shows the evidence, and a thumbs pair takes feedback. The detail worth copying: the card does not restate the chart. It points at a region of the chart, and the chart shows it. A yellow "Example data" tag sits next to the title. ## Reference behaviour 1. Initial state: card 1 (Refunds) is linked. Its "Show on chart" button is pressed (ink fill), the card has a 2px ink ring, and the Refunds panel is lit: grey "All other SKUs" bars are at 28% opacity, orange LDC-K-OAT segments stay full, and the Tuesday annotation is visible ("58" above the bar, a dashed line at last Tuesday's 49, a bracket and the label "+14 from LDC-K-OAT"). 2. Click "Show on chart" on another card: the previous link clears, the new card and its panel light. Clicking the pressed button again clears all highlights and every mark returns to full opacity. Marks fade over 320ms. 3. Revenue link: the New line dims, the Repeat line stays, and a dashed vertical line labelled "Reminder on" appears between the 23 Sep and 30 Sep weeks. 4. Checkout link: Desktop bars dim, Mobile bars stay, and a bracket from Shipping (71.8%) to Payment (48.4%) appears with "−32.6%". 5. "Why" is a native `

`. Opening it rotates the chevron 90° and drops a panel over the content below (absolutely positioned, flush to the card's sides, 1px border, no top border, shadow below), fading and sliding 4px in over 200ms. The panel holds one or two sentences of evidence with counts. 6. The thumbs pair is a group "Was this useful?". Pressing one fills it ink with a white icon, unpresses the other, changes the label from "Useful?" to "Thanks", and announces "Thanks, Tally will use this next week". Pressing it again clears it. 7. Hovering any bar or point shows a native tooltip with day, series and value; the hovered mark goes to 80% opacity. 8. Below 900px wide, everything is one column; clicking "Show on chart" also scrolls the panel into view (instantly under reduced motion). The refunds chart keeps a 640px minimum width and scrolls sideways inside its panel. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────────┐ │ ▮ Tillwell [Overview] Orders Refunds Customers [▦ 14 to 20 Oct] │ 56 ├──────────────────────────────────────────────────────────────────────────┤ │ Ferrow Goods, week 42 [Example data] Three things changed this week… │ 30px h1 │ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │■ Refunds · Tally │ │■ Revenue · Tally │ │■ Checkout · Tally │ │ ~144 │ │Refunds rose 18% … │ │Repeat buyers 41.6%… │ │Mobile loses 32.6% … │ │ │ │[Show on chart] ›Why │ │[Show] ›Why [+][-] │ │[Show] ›Why [+][-] │ │ │ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │ │ ┌───────────────────────────────────────────┐ ┌─────────────────────┐ │ │ │ Refunds per day 322 ■LDC ■Other │ │ Weekly revenue │ │ │ │ stacked bars × 7 days, 0–60 scale │ │ 2 lines × 8 weeks │ │ │ │ │ ├─────────────────────┤ │ │ │ │ │ Checkout reach │ │ │ │ │ │ paired bars × 4 │ │ │ └───────────────────────────────────────────┘ └─────────────────────┘ │ └──────────────────────────────────────────────────────────────────────────┘ padding 20/28 · 3-column grid, 16px gaps · refunds spans 2 columns and 2 rows ``` - `

`: brand mark (22px ink square, bar-chart glyph), `