diff --git a/tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md b/tasks/complete/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md similarity index 100% rename from tasks/new/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md rename to tasks/complete/2026-0825.01.jul.story.ui.redesign-sessions-drawer-1812.md diff --git a/ui/components/SessionsPage.tsx b/ui/components/SessionsPage.tsx index de74c47..a4aaddb 100644 --- a/ui/components/SessionsPage.tsx +++ b/ui/components/SessionsPage.tsx @@ -145,15 +145,6 @@ export const SessionsPage = ({
- -
- - - {/* Create Multi-Claim Event Pass Drawer */} - @@ -491,329 +164,652 @@ export const SessionsPage = ({ style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;" >
-
-

- Delegate New 1:1 Pass / Session -

-

- Mint an isolated, scoped child session for 1-click magic links, - CLI tools, team members, or AI assistants without exposing your - primary passkeys. -

-
- -
- -
- {/* Label Input */} -
- - -
- - {/* Direct 1-Click Destination (App Selection) */} -
- - -

- Selecting an app scopes the pass and automatically redirects the - recipient to that app upon 1-click redemption. -

-
- - {/* Lifespan Presets */} -
- -
+
+
+

+ Create New Pass / Session +

- - -
- -
- {/* Access Mode Presets */} -
- -
+
- {isAdmin && ( +
+
+
+ +
+

+ Mint an isolated, scoped child session for 1-click magic links, CLI + tools, team members, or AI assistants without exposing your primary + passkeys. +

+ + + {/* Label Input */} +
+ + +
+ + {/* Direct 1-Click Destination (App Selection) */} +
+ + +

+ Selecting an app scopes the pass and automatically redirects the + recipient to that app upon 1-click redemption. +

+
+ + {/* Lifespan Presets */} +
+ +
+ + + + +
+ +
+ + {/* Access Mode Presets */} +
+ +
+ - )} - -
- -
- - {/* Progressive Disclosure: Specific App & Capability Scopes */} -
- - ▸ Customize Specific App Grants & Capabilities (Optional) - -
-

- Select which subsidiary microservices and IAM capabilities this - delegated token is permitted to access: -

- -
- - - - {apps.map((app) => ( -
+ +
+ + {/* Progressive Disclosure: Specific App & Capability Scopes */} +
+ + ▸ Customize Specific App Grants & Capabilities (Optional) + +
+

+ Select which subsidiary microservices and IAM capabilities + this delegated token is permitted to access: +

+ +
+ - ))} + + + {apps.map((app) => ( + + ))} +
+
+
+ +
+ + +
+ + + {/* Hand-Off Card (Revealed upon generation) */} +
-
-
- +
- {/* Hand-Off Card (Revealed upon generation) */} - @@ -1178,6 +1174,22 @@ export const SessionsPage = ({ border-color: var(--primary); color: var(--primary); } + .delegate-tab-btn { + flex: 1; + padding: 0.5rem 0.75rem; + border-radius: var(--radius-sm); + border: none; + font-weight: 600; + cursor: pointer; + transition: all 0.15s; + background: transparent; + color: var(--text-secondary); + } + .delegate-tab-btn.active { + background: var(--surface-card); + color: var(--primary); + box-shadow: var(--shadow-xs); + } `} @@ -1197,8 +1209,6 @@ export const SessionsPage = ({ } function openDelegateDrawer() { - const eventDrawer = document.getElementById('eventDrawer'); - if (eventDrawer) eventDrawer.style.display = 'none'; document.getElementById('delegateDrawer').style.display = 'block'; document.getElementById('delegateDrawer').scrollIntoView({ behavior: 'smooth' }); } @@ -1207,15 +1217,18 @@ export const SessionsPage = ({ document.getElementById('delegateDrawer').style.display = 'none'; } - function openEventDrawer() { - const delegateDrawer = document.getElementById('delegateDrawer'); - if (delegateDrawer) delegateDrawer.style.display = 'none'; - document.getElementById('eventDrawer').style.display = 'block'; - document.getElementById('eventDrawer').scrollIntoView({ behavior: 'smooth' }); - } + function switchDelegateTab(tabId) { + document.getElementById('tabDirectPass').style.display = 'none'; + document.getElementById('tabWorkshopPass').style.display = 'none'; + document.getElementById('tabBtnDirectPass').classList.remove('active'); + document.getElementById('tabBtnWorkshopPass').classList.remove('active'); - function closeEventDrawer() { - document.getElementById('eventDrawer').style.display = 'none'; + document.getElementById(tabId).style.display = 'block'; + if (tabId === 'tabDirectPass') { + document.getElementById('tabBtnDirectPass').classList.add('active'); + } else { + document.getElementById('tabBtnWorkshopPass').classList.add('active'); + } } function selectSeats(btn, count) {