SQL Editor Cell with Run Actions and Result Table

<div class="bg-white border-black/5 border rounded-xl relative shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
  <!-- Left outline menu -->
  <div
    class="hidden sm:flex flex-col gap-1 bg-white w-9 border-black/5 rounded-l-xl border-r pt-2 pb-2 absolute top-0 bottom-0 left-0 gap-x-1 gap-y-1 items-center">
    <button class="h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent focus:outline-none focus:ring-4 focus:ring-[#2F58D5]/10 hover:border-black/10 hover:bg-black/5" title="Drag">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-[16px] w-[16px] text-neutral-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="9" cy="7" r="1" class=""></circle><circle cx="9" cy="12" r="1" class=""></circle><circle cx="9" cy="17" r="1" class=""></circle><circle cx="15" cy="7" r="1" class=""></circle><circle cx="15" cy="12" r="1" class=""></circle><circle cx="15" cy="17" r="1" class=""></circle>
                  </svg>
                </button>
    <button class="h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent focus:outline-none focus:ring-4 focus:ring-[#2F58D5]/10 hover:border-black/10 hover:bg-black/5" title="Run">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-[16px] w-[16px] text-neutral-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m7 7 10 5-10 5V7z" class=""></path></svg>
                </button>
    <button class="h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent focus:outline-none focus:ring-4 focus:ring-[#2F58D5]/10 hover:border-black/10 hover:bg-black/5" title="Select">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-[16px] w-[16px] text-neutral-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" class=""></rect></svg>
                </button>
    <div class="mt-auto">
      <button class="h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent focus:outline-none focus:ring-4 focus:ring-[#2F58D5]/10 hover:border-black/10 hover:bg-black/5" title="More">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-[16px] w-[16px] text-neutral-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle></svg>
                  </button>
    </div>
  </div>
  <!-- Right inspector (disabled in cells) -->
  <div class="hidden"></div>

  <div class="flex border-black/5 border-b pt-4 pr-3 pb-4 pl-12 items-center justify-between">
    <div class="flex items-center gap-2">
      <span class="text-xs text-neutral-600">SQL #3</span>
      <span class="text-xs text-neutral-400">appointments_by_day</span>
      <span class="inline-flex items-center gap-1 rounded px-1 py-0.5 text-[10px] border border-black/10 bg-black/5 text-neutral-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-[12px] w-[12px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="4" class=""></circle></svg>
                    dirty
                  </span>
    </div>
    <div class="flex items-center gap-1">
      <button class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs focus:outline-none focus:ring-4 focus:ring-[#2F58D5]/10 transition-colors duration-100 border-black/10 bg-black/5 hover:bg-black/10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-[14px] w-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="5 12 9 16 19 6" class=""></polyline></svg>
                    Run
                  </button>
      <button class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs focus:outline-none focus:ring-4 focus:ring-[#2F58D5]/10 transition-colors duration-100 border-black/10 bg-white hover:bg-black/5">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-[14px] w-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 10h18" class=""></path><path d="M12 2v8" class=""></path><path d="M8 14h8" class=""></path><path d="M9 18h6" class=""></path></svg>
                    AI
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-[12px] w-[12px] text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m6 9 6 6 6-6" class=""></path></svg>
                  </button>
    </div>
  </div>
  <div class="p-3 pl-12">
    <div class="rounded-md border bg-[#F5F8FC] border-black/5">
      <div class="border-b px-3 py-2 flex items-center justify-between border-black/5">
        <span class="text-[11px] text-neutral-600">SQL editor</span>
        <span class="text-[10px] text-neutral-500">Shift+Enter to run</span>
      </div>
      <pre class="font-geist-mono text-[12.5px] leading-6 px-3 py-3 overflow-x-auto text-neutral-900"><code class="">SELECT date_trunc('day', appt_date) AS day,
       count(*) AS bookings
FROM appointments
WHERE specialty = :specialty
  AND appt_date BETWEEN :start AND :end
GROUP BY 1
ORDER BY 1;</code></pre>
    </div>

    <!-- Output area with reserved height -->
    <div class="mt-3 rounded-md border border-black/5 bg-white">
      <div class="px-3 py-2 border-b flex items-center gap-2 text-xs border-black/5">
        <span class="text-neutral-700">Output</span>
        <span class="text-neutral-400">▸</span>
        <button class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 border bg-black/5 border-black/10 text-neutral-800">Table (182 rows)</button>
        <button class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 border transition-colors duration-100 border-black/10 hover:bg-black/5 text-neutral-700">Chart (Line)</button>
        <button class="ml-auto inline-flex items-center gap-1 rounded px-1.5 py-0.5 border transition-colors duration-100 border-black/10 hover:bg-black/5 text-neutral-700">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-[12px] w-[12px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m3 12 7-7 4 4 7-7v16H3z" class=""></path></svg>
                      Pin to dashboard
                    </button>
      </div>
      <div class="p-3">
        <div class="overflow-x-auto">
          <table class="min-w-[520px] w-full text-sm">
            <thead class="border-b bg-neutral-50 border-black/5">
              <tr class="text-left text-neutral-600">
                <th class="px-2 py-2">day</th>
                <th class="px-2 py-2">bookings</th>
                <th class="px-2 py-2">spark</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-black/5">
              <tr class="odd:bg-white even:bg-neutral-50/50">
                <td class="px-2 py-2 tabular-nums">2025‑02‑01</td>
                <td class="px-2 py-2 tabular-nums">182</td>
                <td class="px-2 py-2 text-neutral-700">
                  <span class="inline-block h-5 w-24 rounded border bg-gradient-to-b relative overflow-hidden align-middle border-black/10 from-neutral-50 to-white">
                                <svg viewBox="0 0 100 20" class="absolute inset-0 h-full w-full" preserveAspectRatio="none">
                                  <path d="M0,18 10,16 20,12 30,8 40,4 50,6 60,10 70,14 80,12 90,10 100,8" fill="none" stroke="#0E8AD6" stroke-width="1.5" class=""></path>
                                </svg>
                              </span>
                </td>
              </tr>
              <tr class="odd:bg-white even:bg-neutral-50/50">
                <td class="px-2 py-2 tabular-nums">2025‑02‑02</td>
                <td class="px-2 py-2 tabular-nums">176</td>
                <td class="px-2 py-2"></td>
              </tr>
              <tr class="odd:bg-white even:bg-neutral-50/50">
                <td class="px-2 py-2 tabular-nums">2025‑02‑03</td>
                <td class="px-2 py-2 tabular-nums">169</td>
                <td class="px-2 py-2"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Helper text -->
    <p class="mt-2 text-[11px] text-neutral-600">Empty cell hint: “Write SQL or // ask: bookings by specialty last 4
      weeks”.</p>
  </div>
</div>