From 86896fa8c362ac6ba950f3ea24cd4212352350d6 Mon Sep 17 00:00:00 2001
From: Tyler Gillispie <mrteye@gmail.com>
Date: Wed, 26 Aug 2026 19:40:30 -0700
Subject: [PATCH] fix(ui): ensure CLI row is always visible on event cards and
 expands full command into textarea

---
 ui/components/sessions/EventCockpitDeck.tsx | 54 +++++++++++++--------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/ui/components/sessions/EventCockpitDeck.tsx b/ui/components/sessions/EventCockpitDeck.tsx
index 42ca49b..ce4eb2a 100644
--- a/ui/components/sessions/EventCockpitDeck.tsx
+++ b/ui/components/sessions/EventCockpitDeck.tsx
@@ -52,7 +52,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
             {/* Quick Copy Snippets */}
             <div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
               <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <span style="font-size: 0.8rem; font-weight: 600; width: 60px; color: var(--text-muted);">
+                <span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
                   PIN:
                 </span>
                 <code
@@ -79,7 +79,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
                 </button>
               </div>
               <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <span style="font-size: 0.8rem; font-weight: 600; width: 60px; color: var(--text-muted);">
+                <span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
                   Link:
                 </span>
                 <code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
@@ -95,25 +95,41 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
                 </button>
               </div>
 
-              <details style="font-size: 0.8rem;">
-                <summary style="cursor: pointer; color: var(--primary); font-weight: 600;">
-                  Show CLI 1-liner handoff
+              <div style="display: flex; align-items: center; gap: 0.5rem;">
+                <span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
+                  CLI:
+                </span>
+                <code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                  curl -sSL {Deno.env.get("RP_ID")
+                    ? `https://${Deno.env.get("RP_ID")}`
+                    : ""}/join/{event.slug}?format=env | source /dev/stdin
+                </code>
+                <button
+                  type="button"
+                  class="btn-outline"
+                  style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
+                  onclick={`copyText("curl -sSL " + window.location.origin + "/join/${event.slug}?format=env | source /dev/stdin")`}
+                >
+                  Copy
+                </button>
+              </div>
+
+              <details style="font-size: 0.75rem; margin-top: 0.1rem;">
+                <summary style="cursor: pointer; color: var(--primary); font-weight: 600; user-select: none;">
+                  ▸ Expand full CLI command
                 </summary>
-                <div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
-                  <code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                    curl -sSL {Deno.env.get("RP_ID")
+                <textarea
+                  readonly
+                  rows={2}
+                  style="width: 100%; margin-top: 0.4rem; padding: 0.4rem 0.5rem; font-family: monospace; font-size: 0.75rem; background: var(--surface-muted); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); resize: vertical; box-sizing: border-box;"
+                  onclick="this.select()"
+                >
+                  {`curl -sSL ${
+                    Deno.env.get("RP_ID")
                       ? `https://${Deno.env.get("RP_ID")}`
-                      : ""}/join/{event.slug}?format=env | source /dev/stdin
-                  </code>
-                  <button
-                    type="button"
-                    class="btn-outline"
-                    style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
-                    onclick={`copyText("curl -sSL " + window.location.origin + "/join/${event.slug}?format=env | source /dev/stdin")`}
-                  >
-                    Copy
-                  </button>
-                </div>
+                      : ""
+                  }/join/${event.slug}?format=env | source /dev/stdin`}
+                </textarea>
               </details>
             </div>