Assistant Command & Control Panel Component

<div class="relative overflow-hidden bg-gray-950/70 border-white/10 border rounded-2xl shadow-2xl backdrop-blur">
              <!-- Top banner -->
              <div class="flex bg-black/50 border-white/10 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between">
                <div class="flex items-center gap-2">
                  <span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-4.5 h-4.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                  </span>
                  <p class="text-sm">Assistant</p>
                </div>
                <div class="inline-flex items-center gap-2 text-xs px-2 py-1 rounded-md bg-white/5 border border-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-3.5 h-3.5 text-emerald-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
                  <span class="text-emerald-300">Private</span>
                </div>
              </div>

              <div class="grid md:grid-cols-2">
                <!-- Left: Suggestions + Mini chart -->
                <div class="p-4 border-r border-white/10">
                  <div class="flex items-center justify-between mb-2">
                    <p class="text-xs text-gray-400">Suggested actions</p>
                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/5 border border-white/10">6</span>
                  </div>
                  <div class="grid grid-cols-2 gap-2">
                    <button data-suggest="Turn on Do Not Disturb for 30 minutes" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
                      <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon w-4 h-4 text-gray-300"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
                        </span>
                        <p class="text-sm leading-snug">Enable DND 30m</p>
                      </div>
                      <p class="mt-1 text-[11px] text-gray-500">Focus • System</p>
                    </button>

                    <button data-suggest="Open Notes and start a new note titled Daily Standup" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
                      <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="notebook-text" class="lucide lucide-notebook-text w-4 h-4 text-gray-300"><path d="M2 6h4" class=""></path><path d="M2 10h4" class=""></path><path d="M2 14h4" class=""></path><path d="M2 18h4" class=""></path><rect width="16" height="20" x="4" y="2" rx="2" class=""></rect><path d="M9.5 8h5" class=""></path><path d="M9.5 12H16" class=""></path><path d="M9.5 16H14" class=""></path></svg>
                        </span>
                        <p class="text-sm leading-snug">New note: Daily Standup</p>
                      </div>
                      <p class="mt-1 text-[11px] text-gray-500">Notes • App</p>
                    </button>

                    <button data-suggest="Connect to Wi‑Fi network Studio-5G" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
                      <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-gray-300"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
                        </span>
                        <p class="text-sm leading-snug">Join Wi‑Fi: Studio‑5G</p>
                      </div>
                      <p class="mt-1 text-[11px] text-gray-500">Network • System</p>
                    </button>

                    <button data-suggest="Arrange Safari and Mail side by side" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
                      <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="panels-top-left" class="lucide lucide-panels-top-left w-4 h-4 text-gray-300"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M9 21V9" class=""></path></svg>
                        </span>
                        <p class="text-sm leading-snug">Tile Safari + Mail</p>
                      </div>
                      <p class="mt-1 text-[11px] text-gray-500">Windows • Layout</p>
                    </button>

                    <button data-suggest="Take a screenshot of the active window" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
                      <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="camera" class="lucide lucide-camera w-4 h-4 text-gray-300"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" class=""></path><circle cx="12" cy="13" r="3" class=""></circle></svg>
                        </span>
                        <p class="text-sm leading-snug">Screenshot active</p>
                      </div>
                      <p class="mt-1 text-[11px] text-gray-500">Capture • System</p>
                    </button>

                    <button data-suggest="Set a reminder for 2 PM today" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
                      <div class="flex items-center gap-2">
                        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell w-4 h-4 text-gray-300"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
                        </span>
                        <p class="text-sm leading-snug">Reminder: 2 PM</p>
                      </div>
                      <p class="mt-1 text-[11px] text-gray-500">Calendar • System</p>
                    </button>
                  </div>

                  <!-- Mini chart -->
                  
                </div>

                <!-- Right: Live controls + Recent -->
                <div class="p-4">
                  <div class="flex items-center justify-between">
                    <p class="text-sm">Live controls</p>
                    <span class="text-xs text-gray-400">Today <span id="today-count">0</span> actions</span>
                  </div>

                  <div class="mt-3 space-y-2">
                    <!-- Toggle: DND -->
                    <div class="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2">
                      <div class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-black/40 border border-white/15">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon w-3.5 h-3.5"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
                      </div>
                      <div class="min-w-0">
                        <p class="text-sm leading-snug">Do Not Disturb</p>
                        <p class="text-xs text-gray-400">Silence notifications</p>
                      </div>
                      <button data-toggle="dnd" aria-pressed="false" class="ml-auto relative inline-flex h-6 w-10 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition">
                        <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transform transition-transform"></span>
                      </button>
                    </div>

                    <!-- Toggle: Wi-Fi -->
                    <div class="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2">
                      <div class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-black/40 border border-white/15">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-3.5 h-3.5"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
                      </div>
                      <div class="min-w-0">
                        <p class="text-sm leading-snug">Wi‑Fi</p>
                        <p class="text-xs text-gray-400">Studio‑5G</p>
                      </div>
                      <button data-toggle="wifi" aria-pressed="true" class="ml-auto relative inline-flex h-6 w-10 items-center rounded-full bg-blue-400/90 ring-1 ring-blue-300/60 transition">
                        <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-black translate-x-4 shadow transition-transform"></span>
                      </button>
                    </div>

                    <!-- Toggle: Focus timer -->
                    <div class="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2">
                      <div class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-black/40 border border-white/15">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="timer" class="lucide lucide-timer w-3.5 h-3.5"><line x1="10" x2="14" y1="2" y2="2" class=""></line><line x1="12" x2="15" y1="14" y2="11" class=""></line><circle cx="12" cy="14" r="8" class=""></circle></svg>
                      </div>
                      <div class="min-w-0">
                        <p class="text-sm leading-snug">Focus 25m</p>
                        <p class="text-xs text-gray-400">Pomodoro</p>
                      </div>
                      <button data-toggle="focus" aria-pressed="false" class="ml-auto relative inline-flex h-6 w-10 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition">
                        <span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform"></span>
                      </button>
                    </div>
                  </div>

                  <!-- Recent -->
                  <div class="mt-4">
                    <div class="flex items-center justify-between">
                      <p class="text-sm">Recent commands</p>
                      <button id="clear-recent" class="text-xs text-gray-300 hover:text-white px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 inline-flex items-center gap-2" type="button">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" class="lucide lucide-trash-2 w-4 h-4"><path d="M10 11v6" class=""></path><path d="M14 11v6" class=""></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" class=""></path><path d="M3 6h18" class=""></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" class=""></path></svg>
                        Clear
                      </button>
                    </div>
                    <div id="recent-list" class="mt-2 space-y-2">
                      <!-- Rows get appended here -->
                    </div>
                  </div>
                </div>
              </div>
            </div>