/artifact-mockup

Use kind: "mockup" for side-by-side option comparisons, structured data records, and component/screen wireframes.

---

1. Side-by-side comparison grid

When comparing 2–4 options (libraries, architectures, plans, tradeoffs):

• Use style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;".
• Put each option in a .raised-card.
• Highlight the recommended option with style="border: 2px solid var(--color-border-info);" and a compact pill badge (c-blue) in the header.
• Keep attribute rows aligned across cards (latency, complexity, failure mode, best for) and add a "Explore option" button wired to sendPrompt(...) when helpful.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;">
  <div class="raised-card flex flex-col justify-between gap-3" style="border: 2px solid var(--color-border-info);">
    <div>
      <div class="flex items-center justify-between gap-2 mb-2">
        <span class="font-medium text-base">SQLite WAL</span>
        <span class="c-blue text-xs px-2 py-1 rounded-sm">Recommended</span>
      </div>
      <p class="text-xs text-fg-subtle">Single-writer, concurrent readers, zero external process.</p>
      <div class="flex flex-col gap-1.5 mt-3 pt-3 border-t text-xs">
        <div class="flex justify-between"><span class="text-fg-subtle">Read p99</span><span class="font-mono">0.4 ms</span></div>
        <div class="flex justify-between"><span class="text-fg-subtle">Ops overhead</span><span>None</span></div>
      </div>
    </div>
    <button onclick="sendPrompt('Show the SQLite WAL schema and pragmas')">Inspect setup</button>
  </div>

  <div class="raised-card flex flex-col justify-between gap-3">
    <div>
      <div class="flex items-center justify-between gap-2 mb-2">
        <span class="font-medium text-base">External Postgres</span>
        <span class="c-gray text-xs px-2 py-1 rounded-sm">Alternative</span>
      </div>
      <p class="text-xs text-fg-subtle">Multi-node writes, requires managed instance or Docker.</p>
      <div class="flex flex-col gap-1.5 mt-3 pt-3 border-t text-xs">
        <div class="flex justify-between"><span class="text-fg-subtle">Read p99</span><span class="font-mono">2.8 ms</span></div>
        <div class="flex justify-between"><span class="text-fg-subtle">Ops overhead</span><span>Daemon + migrations</span></div>
      </div>
    </div>
    <button onclick="sendPrompt('Compare migration strategy for Postgres vs SQLite')">Compare migrations</button>
  </div>
</div>

---

2. Structured data records & UI wireframes

• Data records (an API payload, PR summary, incident timeline, or config profile): place inside one .raised-card with a header row (title + status pill), a 2–4 column key-value strip, and a clean overflow-x-auto table if needed.
• UI wireframes: Frame the mockup inside a .raised-card with a subtle header bar showing the route or view name in font-mono text-xs text-fg-subtle. Use real bare <input>, <select>, and <button> elements so the user can click and interact with the prototype.
• Wide dashboards: Set layout: "wide" on the artifact tool call only when building a multi-column dashboard that genuinely needs more than 720px.