@flowdrop/flowdrop 1.8.0 → 1.9.0

package/dist/components/playground/Playground.svelte

@@ -11,6 +11,7 @@
   import { onMount, onDestroy } from 'svelte';
   import Icon from '@iconify/svelte';
   import ChatPanel from './ChatPanel.svelte';
+  import ExecutionList from './ExecutionList.svelte';
   import type { Workflow } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundMode, PlaygroundConfig } from '../../types/playground.js';
@@ -25,7 +26,10 @@
     getError,
     playgroundActions,
     getInputFields,
-    createPollingCallback
+    createPollingCallback,
+    getActiveExecutionId,
+    getLatestExecutionId,
+    getPinnedExecutionId,
   } from '../../stores/playgroundStore.svelte.js';
   import { interruptActions } from '../../stores/interruptStore.svelte.js';
   import { logger } from '../../utils/logger.js';
@@ -49,6 +53,12 @@
     config?: PlaygroundConfig;
     /** Callback when playground is closed (for embedded mode) */
     onClose?: () => void;
+    /** Callback to toggle the pipeline panel (if undefined, toggle button is hidden) */
+    onTogglePanel?: () => void;
+    /** Whether the pipeline panel is currently open (for toggle button active state) */
+    isPipelinePanelOpen?: boolean;
+    /** When provided, session switches and creation navigate to a URL instead of mutating store state */
+    onSessionNavigate?: (sessionId: string) => void;
   }
 
   let {
@@ -58,7 +68,10 @@
     initialSessionId,
     endpointConfig,
     config = {},
-    onClose
+    onClose,
+    onTogglePanel,
+    isPipelinePanelOpen = false,
+    onSessionNavigate,
   }: Props = $props();
 
   /** Current input values from InputCollector */
@@ -70,6 +83,9 @@
   /** Track which session's dropdown menu is open */
   let openMenuId = $state<string | null>(null);
 
+  /** Whether the runs sub-section is expanded under the active session */
+  let runsExpanded = $state(false);
+
   /** Track if initial session has been loaded to prevent duplicate loads */
   let initialSessionLoaded = $state(false);
 
@@ -79,6 +95,24 @@
   /** Track if auto-run has already been triggered to prevent duplicate executions */
   let autoRunTriggered = $state(false);
 
+  /** Whether log messages are visible in the chat panel */
+  let showLogs = $state(true);
+
+  /** Whether the session switcher popover is open (standalone mode) */
+  let sessionDropdownOpen = $state(false);
+
+  // Close session popover on outside click
+  $effect(() => {
+    if (!sessionDropdownOpen) return;
+    function handleOutside(e: MouseEvent) {
+      if (!(e.target as HTMLElement).closest('.playground__session-chip-wrap')) {
+        sessionDropdownOpen = false;
+      }
+    }
+    document.addEventListener('click', handleOutside);
+    return () => document.removeEventListener('click', handleOutside);
+  });
+
   /**
    * Initialize the playground on mount
    */
@@ -262,6 +296,13 @@
     try {
       const sessionName = `Session ${getSessions().length + 1}`;
       const session = await playgroundService.createSession(workflowId, sessionName);
+
+      if (onSessionNavigate) {
+        // URL-based routing: navigate to the new session; page remount handles store init
+        onSessionNavigate(session.id);
+        return;
+      }
+
       playgroundActions.addSession(session);
       playgroundActions.setCurrentSession(session);
       playgroundActions.clearMessages();
@@ -278,6 +319,8 @@
    * Select a session
    */
   async function handleSelectSession(sessionId: string): Promise<void> {
+    playgroundActions.pinExecution(null);
+    runsExpanded = false;
     const currentSessionId = getCurrentSession()?.id;
     if (currentSessionId === sessionId) {
       return;
@@ -488,8 +531,8 @@
   class:playground--no-sidebar={config.showSidebar === false}
 >
   <div class="playground__container">
-    <!-- Sidebar (conditionally rendered based on config.showSidebar) -->
-    {#if config.showSidebar !== false}
+    <!-- Sidebar — hidden in standalone mode (session switcher lives in the header chip instead) -->
+    {#if config.showSidebar === true || (config.showSidebar !== false && mode !== 'standalone')}
       <aside
         class="playground__sidebar"
         style={config.sidebarWidth ? `--fd-playground-sidebar-width: ${config.sidebarWidth}` : ''}
@@ -499,6 +542,13 @@
           <div class="playground__sidebar-title">
             <span>Playground</span>
           </div>
+          <a
+            href="/workflow/{workflowId}/edit"
+            class="playground__edit-link"
+            title="Edit workflow"
+          >
+            <Icon icon="mdi:pencil-outline" />
+          </a>
           {#if (mode === 'embedded' || mode === 'modal') && onClose}
             <button
               type="button"
@@ -515,24 +565,24 @@
           {/if}
         </div>
 
-        <!-- New Session Section -->
+        <!-- Sessions Section -->
         <div class="playground__section">
-          <button
-            type="button"
-            class="playground__new-session-btn"
-            onclick={handleCreateSession}
-            disabled={getIsLoading()}
-            title="Start a new session"
-          >
-            <Icon icon="mdi:plus" />
-            <span>New Session</span>
-          </button>
+          <!-- Section header with inline add button -->
+          <div class="playground__section-header">
+            <span class="playground__section-label">Sessions</span>
+            <button
+              type="button"
+              class="playground__section-add"
+              onclick={handleCreateSession}
+              disabled={getIsLoading()}
+              title="New session"
+            >
+              <Icon icon="mdi:plus" />
+            </button>
+          </div>
 
-          <!-- Sessions List - click a session to load it -->
+          <!-- Sessions List -->
           <div class="playground__sessions-wrap">
-            {#if getSessions().length > 0}
-              <p class="playground__sessions-hint">Click a session to load it</p>
-            {/if}
             <div class="playground__sessions">
               {#if getSessions().length === 0 && !getIsLoading()}
                 <div class="playground__sessions-empty">
@@ -540,42 +590,75 @@
                 </div>
               {:else}
                 {#each getSessions() as session (session.id)}
-                  <div
-                    class="playground__session"
-                    class:playground__session--active={getCurrentSession()?.id === session.id}
-                    role="button"
-                    tabindex="0"
-                    title="Click to load this session"
-                    aria-label={m().layout.loadSession({ name: session.name })}
-                    onclick={() => handleSelectSession(session.id)}
-                    onkeydown={(e) => e.key === 'Enter' && handleSelectSession(session.id)}
-                  >
-                    <span class="playground__session-name" title={session.name}>
-                      {session.name}
-                    </span>
-                    <div class="playground__session-actions">
-                      <button
-                        type="button"
-                        class="playground__session-menu"
-                        class:playground__session-menu--open={openMenuId === session.id}
-                        onclick={(e) => handleMenuToggle(e, session.id)}
-                        title="Session options"
-                      >
-                        <Icon icon="mdi:dots-vertical" />
-                      </button>
-                      {#if openMenuId === session.id}
-                        <div class="playground__session-dropdown">
-                          <button
-                            type="button"
-                            class="playground__session-dropdown-item playground__session-dropdown-item--danger"
-                            onclick={(e) => handleMenuDelete(e, session.id)}
-                          >
-                            <Icon icon="mdi:delete-outline" />
-                            <span>Delete</span>
-                          </button>
-                        </div>
-                      {/if}
+                  {@const isActive = getCurrentSession()?.id === session.id}
+                  <div class="playground__session-group">
+                    <div
+                      class="playground__session"
+                      class:playground__session--active={isActive}
+                      role="button"
+                      tabindex="0"
+                      title="Click to load this session"
+                      aria-label={m().layout.loadSession({ name: session.name })}
+                      onclick={() => handleSelectSession(session.id)}
+                      onkeydown={(e) => e.key === 'Enter' && handleSelectSession(session.id)}
+                    >
+                      <span class="playground__session-name" title={session.name}>
+                        {session.name}
+                      </span>
+                      <div class="playground__session-actions">
+                        <button
+                          type="button"
+                          class="playground__session-menu"
+                          class:playground__session-menu--open={openMenuId === session.id}
+                          onclick={(e) => handleMenuToggle(e, session.id)}
+                          title="Session options"
+                        >
+                          <Icon icon="mdi:dots-vertical" />
+                        </button>
+                        {#if openMenuId === session.id}
+                          <div class="playground__session-dropdown">
+                            <button
+                              type="button"
+                              class="playground__session-dropdown-item playground__session-dropdown-item--danger"
+                              onclick={(e) => handleMenuDelete(e, session.id)}
+                            >
+                              <Icon icon="mdi:delete-outline" />
+                              <span>Delete</span>
+                            </button>
+                          </div>
+                        {/if}
+                      </div>
                     </div>
+                    <!-- Collapsible runs sub-section under active session -->
+                    {#if isActive && getCurrentSession()?.executions?.length}
+                      <div class="playground__runs-section">
+                        <button
+                          type="button"
+                          class="playground__runs-toggle"
+                          onclick={() => (runsExpanded = !runsExpanded)}
+                        >
+                          <Icon icon={runsExpanded ? 'mdi:chevron-down' : 'mdi:chevron-right'} />
+                          <span>Runs</span>
+                          <span class="playground__runs-count">{getCurrentSession()!.executions!.length}</span>
+                        </button>
+                        {#if runsExpanded}
+                          <div class="playground__executions-inline">
+                            <ExecutionList
+                              executions={getCurrentSession()!.executions!}
+                              activeExecutionId={getActiveExecutionId()}
+                              latestExecutionId={getLatestExecutionId()}
+                              onSelect={(id) => {
+                                if (id === getLatestExecutionId()) {
+                                  playgroundActions.pinExecution(null);
+                                } else {
+                                  playgroundActions.pinExecution(id);
+                                }
+                              }}
+                            />
+                          </div>
+                        {/if}
+                      </div>
+                    {/if}
                   </div>
                 {/each}
               {/if}
@@ -587,18 +670,118 @@
 
     <!-- Main Content -->
     <main class="playground__main">
-      <!-- Session Header (conditionally rendered based on config.showSessionHeader) -->
-      {#if getCurrentSession() && config.showSessionHeader !== false}
+      <!-- Session Header -->
+      {#if mode === 'standalone' || (getCurrentSession() && config.showSessionHeader !== false)}
         <header class="playground__header">
-          <h2 class="playground__header-title">{getCurrentSession()?.name}</h2>
-          <button
-            type="button"
-            class="playground__header-close"
-            onclick={handleCloseSession}
-            title="Close session"
-          >
-            <Icon icon="mdi:close" />
-          </button>
+          {#if mode === 'standalone'}
+            <!-- Panel icon + label (mirrors PipelinePanel header) -->
+            <Icon icon="mdi:message-text-outline" class="playground__header-icon" />
+            <span class="playground__header-label">Sessions</span>
+
+            <!-- Session chip — switches sessions via popover -->
+            <div class="playground__session-chip-wrap">
+              <button
+                type="button"
+                class="playground__session-chip"
+                class:playground__session-chip--open={sessionDropdownOpen}
+                onclick={() => (sessionDropdownOpen = !sessionDropdownOpen)}
+                title="Switch session"
+              >
+                <span class="playground__session-chip-name">
+                  {getCurrentSession()?.name ?? 'No session'}
+                </span>
+                <Icon icon={sessionDropdownOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'} class="playground__session-chip-chevron" />
+              </button>
+
+              {#if sessionDropdownOpen}
+                <div class="playground__session-popover">
+                  <button
+                    type="button"
+                    class="playground__session-popover-item playground__session-popover-item--new"
+                    disabled={getIsLoading()}
+                    onclick={() => { sessionDropdownOpen = false; void handleCreateSession(); }}
+                  >
+                    <Icon icon="mdi:plus" />
+                    <span>New session</span>
+                  </button>
+                  {#if getSessions().length > 0}
+                    <div class="playground__session-popover-divider"></div>
+                    {#each getSessions() as session (session.id)}
+                      {@const isActive = getCurrentSession()?.id === session.id}
+                      <div class="playground__session-popover-row">
+                        <button
+                          type="button"
+                          class="playground__session-popover-item"
+                          class:playground__session-popover-item--active={isActive}
+                          onclick={() => {
+                            sessionDropdownOpen = false;
+                            if (onSessionNavigate) {
+                              onSessionNavigate(session.id);
+                            } else {
+                              void handleSelectSession(session.id);
+                            }
+                          }}
+                        >
+                          {#if isActive}
+                            <Icon icon="mdi:check" class="playground__session-popover-check" />
+                          {:else}
+                            <Icon icon="mdi:message-outline" />
+                          {/if}
+                          <span>{session.name}</span>
+                        </button>
+                        <button
+                          type="button"
+                          class="playground__session-popover-delete"
+                          onclick={(e) => { handleMenuDelete(e, session.id); sessionDropdownOpen = false; }}
+                          title="Delete session"
+                        >
+                          <Icon icon="mdi:delete-outline" />
+                        </button>
+                      </div>
+                    {/each}
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          {:else}
+            <!-- Embedded / modal: original title + close -->
+            <div class="playground__header-group">
+              <h2 class="playground__header-title">{getCurrentSession()?.name}</h2>
+              <button
+                type="button"
+                class="playground__header-close"
+                onclick={handleCloseSession}
+                title="Close session"
+              >
+                <Icon icon="mdi:close" />
+              </button>
+            </div>
+          {/if}
+
+          <div class="playground__header-actions">
+            {#if mode === 'standalone' && onTogglePanel}
+              <button
+                type="button"
+                class="playground__log-toggle"
+                class:playground__log-toggle--active={isPipelinePanelOpen}
+                onclick={onTogglePanel}
+                title={isPipelinePanelOpen ? 'Hide pipeline' : 'Show pipeline'}
+              >
+                <Icon icon="mdi:source-branch" />
+                Pipeline
+              </button>
+            {/if}
+            <button
+              type="button"
+              class="playground__log-toggle"
+              class:playground__log-toggle--active={showLogs}
+              onclick={() => (showLogs = !showLogs)}
+              title={showLogs ? 'Hide log messages' : 'Show log messages'}
+            >
+              <Icon icon="mdi:console" />
+              Logs
+            </button>
+          </div>
         </header>
       {/if}
 
@@ -636,6 +819,7 @@
             onSendMessage={handleSendMessage}
             onStopExecution={handleStopExecution}
             onInterruptResolved={handleInterruptResolved}
+            bind:showLogs
           />
         {/if}
       </div>
@@ -691,6 +875,7 @@
     width: var(--fd-playground-sidebar-width);
     background-color: var(--fd-background);
     border-right: 1px solid var(--fd-border);
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
   }
@@ -717,6 +902,24 @@
     color: var(--fd-foreground);
   }
 
+  .playground__edit-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fd-playground-icon-btn-size);
+    height: var(--fd-playground-icon-btn-size);
+    border-radius: var(--fd-radius-md);
+    color: var(--fd-muted-foreground);
+    text-decoration: none;
+    transition: all var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .playground__edit-link:hover {
+    background-color: var(--fd-muted);
+    color: var(--fd-foreground);
+  }
+
   .playground__sidebar-close {
     display: flex;
     align-items: center;
@@ -742,51 +945,119 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
-    padding: var(--fd-space-md) var(--fd-space-xs) 0;
+    padding: 0 var(--fd-space-md);
   }
 
-  /* New Session – neutral full-width button with icon */
-  .playground__new-session-btn {
+  /* Section header: label + add icon */
+  .playground__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--fd-space-md) var(--fd-space-xs) var(--fd-space-xs);
+  }
+
+  .playground__section-label {
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    color: var(--fd-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .playground__section-add {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--fd-space-xs);
-    width: 100%;
-    padding: var(--fd-space-sm) var(--fd-space-xl);
-    border: 1px solid var(--fd-border);
+    width: var(--fd-playground-icon-btn-size);
+    height: var(--fd-playground-icon-btn-size);
+    border: none;
     border-radius: var(--fd-radius-md);
-    background-color: var(--fd-background);
+    background: transparent;
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+  }
+
+  .playground__section-add:hover:not(:disabled) {
+    background-color: var(--fd-muted);
     color: var(--fd-foreground);
-    font-size: var(--fd-text-sm);
+  }
+
+  .playground__section-add:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Session group wraps session row + its inline runs */
+  .playground__session-group {
+    margin-bottom: var(--fd-space-3xs);
+  }
+
+  /* Collapsible runs sub-section under active session */
+  .playground__runs-section {
+    margin-bottom: var(--fd-space-3xs);
+  }
+
+  .playground__runs-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    width: 100%;
+    padding: var(--fd-space-3xs) var(--fd-space-sm);
+    padding-left: calc(var(--fd-space-md) + var(--fd-space-3xs));
+    border: none;
+    border-radius: var(--fd-radius-sm);
+    background: transparent;
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
     font-weight: 500;
     cursor: pointer;
-    transition:
-      background-color var(--fd-transition-fast),
-      border-color var(--fd-transition-fast),
-      transform 0.1s ease;
-    box-sizing: border-box;
+    text-align: left;
+    transition: all var(--fd-transition-fast);
   }
 
-  .playground__new-session-btn:hover:not(:disabled) {
+  .playground__runs-toggle:hover {
     background-color: var(--fd-muted);
-    border-color: var(--fd-border);
-    transform: translateY(-1px);
+    color: var(--fd-foreground);
+  }
+
+  .playground__runs-toggle :global(svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
   }
 
-  .playground__new-session-btn:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
+  .playground__runs-count {
+    margin-left: auto;
+    font-size: var(--fd-text-2xs);
+    font-weight: 600;
+    color: var(--fd-muted-foreground);
+    background: var(--fd-muted);
+    border-radius: 999px;
+    padding: 1px var(--fd-space-xs);
+    min-width: 1.4em;
+    text-align: center;
+    line-height: 1.4;
   }
 
-  .playground__new-session-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
+  /* Inline runs tree under active session */
+  .playground__executions-inline {
+    margin-left: calc(var(--fd-space-md) + var(--fd-space-xs));
+    margin-bottom: var(--fd-space-xs);
+    border-left: 2px solid var(--fd-border);
+    padding-left: var(--fd-space-xs);
+  }
+
+  .playground__executions-inline :global(.execution-list__item) {
+    padding: var(--fd-space-xs) var(--fd-space-sm);
+    font-size: var(--fd-text-xs);
+    border-radius: var(--fd-radius-sm);
+    border-left-width: 2px;
   }
 
-  .playground__new-session-btn :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
+  .playground__executions-inline :global(.execution-list) {
+    gap: 1px;
+    padding: var(--fd-space-3xs) 0;
   }
 
   /* Sessions */
@@ -797,17 +1068,10 @@
     min-height: 0;
   }
 
-  .playground__sessions-hint {
-    font-size: var(--fd-text-2xs);
-    color: var(--fd-muted-foreground);
-    margin: var(--fd-space-md) 0 var(--fd-space-2xs) var(--fd-space-md);
-    line-height: 1.3;
-  }
-
   .playground__sessions {
     flex: 1;
     overflow-y: auto;
-    padding: 0 var(--fd-space-xs) var(--fd-space-xl);
+    padding: 0 var(--fd-space-3xs) var(--fd-space-xl);
     min-height: 0;
   }
 
@@ -824,7 +1088,6 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--fd-space-sm) var(--fd-space-md);
-    margin-bottom: var(--fd-space-3xs);
     border-radius: var(--fd-radius-md);
     border-left: 3px solid transparent;
     cursor: pointer;
@@ -956,15 +1219,34 @@
   .playground__header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: var(--fd-space-xs);
     height: var(--fd-playground-header-height);
-    padding: 0 var(--fd-space-2xl);
+    padding: 0 var(--fd-space-xl);
     border-bottom: 1px solid var(--fd-border);
     background-color: var(--fd-background);
     box-sizing: border-box;
     flex-shrink: 0;
   }
 
+  :global(.playground__header-icon) {
+    font-size: var(--fd-text-base);
+    color: var(--fd-muted-foreground);
+    flex-shrink: 0;
+  }
+
+  .playground__header-label {
+    font-size: var(--fd-text-sm);
+    font-weight: 600;
+    color: var(--fd-foreground);
+    flex-shrink: 0;
+  }
+
+  .playground__header-group {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+  }
+
   .playground__header-title {
     font-size: var(--fd-text-md);
     font-weight: 600;
@@ -992,6 +1274,207 @@
     color: var(--fd-foreground);
   }
 
+  .playground__header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    margin-left: auto;
+  }
+
+  .playground__log-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-3xs) var(--fd-space-sm);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background: transparent;
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    line-height: 1;
+  }
+
+  .playground__log-toggle :global(svg) {
+    font-size: var(--fd-text-xs);
+  }
+
+  .playground__log-toggle:hover {
+    background-color: var(--fd-muted);
+    color: var(--fd-foreground);
+    border-color: var(--fd-border-strong);
+  }
+
+  .playground__log-toggle--active {
+    background-color: var(--fd-primary-muted);
+    border-color: var(--fd-primary);
+    color: var(--fd-primary);
+  }
+
+  /* Session chip (standalone mode) */
+  .playground__session-chip-wrap {
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .playground__session-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-3xs) var(--fd-space-sm) var(--fd-space-3xs) var(--fd-space-xs);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background: var(--fd-background);
+    color: var(--fd-foreground);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    max-width: 220px;
+    line-height: 1;
+  }
+
+  .playground__session-chip :global(svg) {
+    flex-shrink: 0;
+    font-size: var(--fd-text-sm);
+    color: var(--fd-muted-foreground);
+  }
+
+  .playground__session-chip:hover {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-strong);
+  }
+
+  .playground__session-chip--open {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-strong);
+  }
+
+  .playground__session-chip-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  :global(.playground__session-chip-chevron) {
+    color: var(--fd-muted-foreground);
+    flex-shrink: 0;
+  }
+
+  /* Session switcher popover */
+  .playground__session-popover {
+    position: absolute;
+    top: calc(100% + var(--fd-space-xs));
+    left: 0;
+    z-index: 50;
+    min-width: 220px;
+    max-width: 300px;
+    padding: var(--fd-space-xs);
+    background-color: var(--fd-background);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-lg);
+    box-shadow: var(--fd-shadow-lg);
+  }
+
+  .playground__session-popover-divider {
+    height: 1px;
+    background-color: var(--fd-border-muted);
+    margin: var(--fd-space-xs) 0;
+  }
+
+  .playground__session-popover-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .playground__session-popover-item {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-sm);
+    flex: 1;
+    min-width: 0;
+    padding: var(--fd-space-sm) var(--fd-space-sm);
+    border: none;
+    border-radius: var(--fd-radius-sm);
+    background: transparent;
+    color: var(--fd-foreground);
+    font-size: var(--fd-text-sm);
+    text-align: left;
+    cursor: pointer;
+    transition: background-color var(--fd-transition-fast);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .playground__session-popover-item :global(svg) {
+    flex-shrink: 0;
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-sm);
+  }
+
+  .playground__session-popover-item span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .playground__session-popover-item:hover {
+    background-color: var(--fd-muted);
+  }
+
+  .playground__session-popover-item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .playground__session-popover-item--new {
+    color: var(--fd-primary);
+    font-weight: 500;
+  }
+
+  .playground__session-popover-item--new :global(svg) {
+    color: var(--fd-primary);
+  }
+
+  .playground__session-popover-item--active {
+    font-weight: 500;
+  }
+
+  :global(.playground__session-popover-check) {
+    color: var(--fd-primary) !important;
+  }
+
+  .playground__session-popover-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--fd-size-icon-btn);
+    height: var(--fd-size-icon-btn);
+    border: none;
+    border-radius: var(--fd-radius-sm);
+    background: transparent;
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    opacity: 0;
+    transition: all var(--fd-transition-fast);
+  }
+
+  .playground__session-popover-row:hover .playground__session-popover-delete {
+    opacity: 1;
+  }
+
+  .playground__session-popover-delete:hover {
+    background-color: var(--fd-error-muted);
+    color: var(--fd-error);
+    opacity: 1;
+  }
+
   /* Error */
   .playground__error {
     display: flex;