1[
2  {
3    "query": "My dashboard should show a summary first, then expand to show all charts.",
4    "expected_behavior": "Widget starts inline. Uses displayMode + requestDisplayMode from useWidget. Provides expand button to fullscreen and collapse button to return. User-triggered switching only."
5  },
6  {
7    "query": "Building a language learning flashcard game. Needs to stay visible while chatting.",
8    "expected_behavior": "Suggests PiP mode. Uses requestDisplayMode('pip'). Notes PiP coerces to fullscreen on mobile. Widget stays visible during conversation."
9  },
10  {
11    "query": "Just need to show order confirmation with a tracking number.",
12    "expected_behavior": "Inline mode (default) is sufficient. No display mode switching needed. Simple card widget. Max 2 CTAs."
13  },
14  {
15    "query": "Widget looks jarring when ChatGPT is in dark mode.",
16    "expected_behavior": "Uses theme from useWidget(). Shows conditional styling. Both inline styles and Tailwind approaches."
17  },
18  {
19    "query": "I want dates formatted for the user's language.",
20    "expected_behavior": "Uses locale from useWidget(). Shows Intl.DateTimeFormat(locale) for formatting."
21  },
22  {
23    "query": "My complex grid doesn't work on phones.",
24    "expected_behavior": "Uses userAgent.device.type from useWidget(). Shows conditional layout: mobile gets list view, desktop gets grid."
25  },
26  {
27    "query": "My widget content gets cut off at the bottom on phones with notches.",
28    "expected_behavior": "Uses safeArea.insets from useWidget(). Applies insets as padding. Also uses maxHeight to constrain widget height."
29  }
30]
31