@flowdrop/flowdrop 1.8.1 → 1.10.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,12 @@
     getError,
     playgroundActions,
     getInputFields,
-    createPollingCallback
+    applyServerResponse,
+    getCanSendMessage,
+    getLatestSequenceNumber,
+    getActiveExecutionId,
+    getLatestExecutionId,
+    getPinnedExecutionId,
   } from '../../stores/playgroundStore.svelte.js';
   import { interruptActions } from '../../stores/interruptStore.svelte.js';
   import { logger } from '../../utils/logger.js';
@@ -49,6 +55,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 +70,10 @@
     initialSessionId,
     endpointConfig,
     config = {},
-    onClose
+    onClose,
+    onTogglePanel,
+    isPipelinePanelOpen = false,
+    onSessionNavigate,
   }: Props = $props();
 
   /** Current input values from InputCollector */
@@ -70,6 +85,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,45 +97,56 @@
   /** Track if auto-run has already been triggered to prevent duplicate executions */
   let autoRunTriggered = $state(false);
 
-  /**
-   * Initialize the playground on mount
-   */
-  onMount(() => {
-    // Set endpoint config if provided
-    if (endpointConfig) {
-      setEndpointConfig(endpointConfig);
-    }
+  /** Whether log messages are visible in the chat panel */
+  let showLogs = $state(true);
 
-    // Set workflow in store
-    if (workflow) {
-      playgroundActions.setWorkflow(workflow);
-    }
+  /** Whether a manual refresh is in flight */
+  let isRefreshing = $state(false);
 
-    // Async initialization
-    const initializePlayground = async (): Promise<void> => {
-      try {
-        // Load sessions
-        await loadSessions();
+  /** Whether the session switcher popover is open (standalone mode) */
+  let sessionDropdownOpen = $state(false);
 
-        // Resume initial session if provided
-        if (initialSessionId) {
-          await loadInitialSession(initialSessionId);
-        }
+  // 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);
+  });
 
-        // Handle auto-run after initialization is complete
-        if (config.autoRun && !autoRunTriggered) {
-          autoRunTriggered = true;
-          const predefinedMessage = config.predefinedMessage ?? 'Run workflow';
-          logger.debug('[Playground] Auto-run triggered with message:', predefinedMessage);
-          await handleSendMessage(predefinedMessage);
+  /**
+   * Initialize the playground on mount
+   */
+  onMount(() => {
+    if (endpointConfig) setEndpointConfig(endpointConfig);
+    if (workflow) playgroundActions.setWorkflow(workflow);
+
+    const handleVisibility = () => {
+      if (document.visibilityState === 'visible' && playgroundService.isPolling()) {
+        const sessionId = getCurrentSession()?.id;
+        if (sessionId) {
+          void playgroundService
+            .getMessages(sessionId, playgroundService.getLastSequenceNumber() ?? undefined)
+            .then((response) => applyServerResponse(response))
+            .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
-      } catch (err) {
-        logger.error('[Playground] Initialization error:', err);
       }
     };
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    const handleRefreshStatus = () => void refreshFromServer();
+    document.addEventListener('flowdrop:refresh-status', handleRefreshStatus);
 
-    // Execute initialization
     void initializePlayground();
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibility);
+      document.removeEventListener('flowdrop:refresh-status', handleRefreshStatus);
+    };
   });
 
   /**
@@ -130,8 +159,10 @@
       return;
     }
 
-    // Skip if this session was already loaded
-    if (initialSessionLoaded && loadedInitialSessionId === initialSessionId) {
+    // Skip if this session was already loaded or is currently loading.
+    // loadedInitialSessionId is set synchronously at the start of loadInitialSession,
+    // so this prevents the effect from spawning concurrent loads when isLoading changes.
+    if (loadedInitialSessionId === initialSessionId) {
       return;
     }
 
@@ -142,18 +173,42 @@
     }
 
     // Load the initial session if sessions are available
-    if (sessionList.length > 0 && !initialSessionLoaded) {
+    if (sessionList.length > 0) {
       void loadInitialSession(initialSessionId);
     }
   });
 
+  /**
+   * Initialize the playground: load sessions, load initial session, handle auto-run
+   */
+  async function initializePlayground(): Promise<void> {
+    try {
+      await loadSessions();
+
+      if (initialSessionId) {
+        await loadInitialSession(initialSessionId);
+      }
+
+      if (config.autoRun && !autoRunTriggered) {
+        autoRunTriggered = true;
+        const predefinedMessage = config.predefinedMessage ?? 'Run workflow';
+        logger.debug('[Playground] Auto-run triggered with message:', predefinedMessage);
+        await handleSendMessage(predefinedMessage);
+      }
+    } catch (err) {
+      logger.error('[Playground] Initialization error:', err);
+    }
+  }
+
   /**
    * Load the initial session with validation and error handling
    *
    * @param sessionId - The session ID to load
    */
   async function loadInitialSession(sessionId: string): Promise<void> {
-    // Validate session exists in loaded sessions
+    // Validate session exists in loaded sessions before setting the guard.
+    // If not found yet, we skip setting loadedInitialSessionId so the $effect
+    // can retry when _sessions updates (e.g. after a new session is created).
     const sessionList = getSessions();
     const sessionExists = sessionList.some((s) => s.id === sessionId);
 
@@ -162,21 +217,19 @@
         `[Playground] Initial session "${sessionId}" not found in available sessions. ` +
           `Available sessions: ${sessionList.map((s) => s.id).join(', ') || 'none'}`
       );
-      // Don't set error - just log warning and let user pick a session
       initialSessionLoaded = true;
-      loadedInitialSessionId = sessionId;
       return;
     }
 
+    // Set guard BEFORE the first await to prevent concurrent loads.
+    loadedInitialSessionId = sessionId;
+
     try {
       await loadSession(sessionId);
       initialSessionLoaded = true;
-      loadedInitialSessionId = sessionId;
     } catch (err) {
       logger.error('[Playground] Failed to load initial session:', err);
-      // Mark as attempted to prevent retry loops
       initialSessionLoaded = true;
-      loadedInitialSessionId = sessionId;
     }
   }
 
@@ -231,17 +284,14 @@
     playgroundActions.setError(null);
 
     try {
-      // Get session details
       const session = await playgroundService.getSession(sessionId);
       playgroundActions.setCurrentSession(session);
 
-      // Get messages
       const response = await playgroundService.getMessages(sessionId);
-      playgroundActions.setMessages(response.data ?? []);
+      applyServerResponse(response);
 
-      // Start polling if session is running
       if (session.status === 'running') {
-        startPolling(sessionId);
+        startPolling(sessionId, true);
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to load session';
@@ -262,6 +312,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,14 +335,15 @@
    * Select a session
    */
   async function handleSelectSession(sessionId: string): Promise<void> {
+    playgroundActions.pinExecution(null);
+    runsExpanded = false;
     const currentSessionId = getCurrentSession()?.id;
     if (currentSessionId === sessionId) {
       return;
     }
 
-    // Stop polling for current session
     playgroundService.stopPolling();
-
+    playgroundActions.updateSessionStatus('idle');
     await loadSession(sessionId);
   }
 
@@ -344,9 +402,10 @@
    * Send a message
    */
   async function handleSendMessage(content: string): Promise<void> {
+    if (getIsExecuting()) return;
+
     const session = getCurrentSession();
     if (!session) {
-      // Create a session first if none exists
       await handleCreateSession();
       const newSession = getCurrentSession();
       if (!newSession) {
@@ -354,23 +413,19 @@
       }
     }
 
-    const sessionId = getCurrentSession()?.id;
-    if (!sessionId) {
-      return;
-    }
+    const sessionId = getCurrentSession()!.id;
 
-    playgroundActions.setExecuting(true);
+    playgroundActions.updateSessionStatus('running');
+    playgroundActions.pinExecution(null);
     playgroundActions.setError(null);
 
     try {
-      // Prepare inputs from the input collector
       const inputs: Record<string, unknown> = {};
       const fields = getInputFields();
 
       fields.forEach((field) => {
         const key = `${field.nodeId}:${field.fieldId}`;
         if (inputValues[key] !== undefined) {
-          // Map to node ID and field ID for the backend
           if (!inputs[field.nodeId]) {
             inputs[field.nodeId] = {};
           }
@@ -378,19 +433,13 @@
         }
       });
 
-      // Send message
       const message = await playgroundService.sendMessage(sessionId, content, inputs);
       playgroundActions.addMessage(message);
-
-      // Update session status
-      playgroundActions.updateSessionStatus('running');
-
-      // Start polling for responses
       startPolling(sessionId);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
       playgroundActions.setError(errorMessage);
-      playgroundActions.setExecuting(false);
+      playgroundActions.updateSessionStatus('idle');
       logger.error('Failed to send message:', err);
     }
   }
@@ -407,33 +456,56 @@
     try {
       await playgroundService.stopExecution(sessionId);
       playgroundService.stopPolling();
-      playgroundActions.setExecuting(false);
       playgroundActions.updateSessionStatus('idle');
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to stop execution';
       playgroundActions.setError(errorMessage);
+      playgroundService.stopPolling();
+      playgroundActions.updateSessionStatus('idle');
       logger.error('Failed to stop execution:', err);
     }
   }
 
-  /** Shared polling callback created from config lifecycle hooks */
-  // svelte-ignore state_referenced_locally — config is static
-  const pollingCallback = createPollingCallback(config.isTerminalStatus);
-
   /**
    * Start polling for messages
    */
-  function startPolling(sessionId: string): void {
+  function startPolling(sessionId: string, seedSequence = false): void {
     const pollingInterval = config.pollingInterval ?? 1500;
+    const initialSequenceNumber = seedSequence ? getLatestSequenceNumber() : null;
 
     playgroundService.startPolling(
       sessionId,
-      pollingCallback,
+      (response) => applyServerResponse(response),
       pollingInterval,
-      config.shouldStopPolling
+      config.shouldStopPolling,
+      initialSequenceNumber
     );
   }
 
+  /**
+   * Fetch the latest messages and session status from the server.
+   * Resumes polling if the session is running but polling had stopped.
+   */
+  async function refreshFromServer(): Promise<void> {
+    const sessionId = getCurrentSession()?.id;
+    if (!sessionId || isRefreshing) return;
+    isRefreshing = true;
+    try {
+      const response = await playgroundService.getMessages(
+        sessionId,
+        playgroundService.getLastSequenceNumber() ?? undefined
+      );
+      applyServerResponse(response);
+      if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
+        startPolling(sessionId, true);
+      }
+    } catch (err) {
+      logger.error('[Playground] Status refresh failed:', err);
+    } finally {
+      isRefreshing = false;
+    }
+  }
+
   /**
    * Refresh messages for the current session
    * Called after interrupt resolution when polling has stopped
@@ -444,9 +516,13 @@
 
     try {
       const response = await playgroundService.getMessages(sessionId);
-      pollingCallback(response);
+      applyServerResponse(response);
+
+      if (response.sessionStatus === 'running') {
+        startPolling(sessionId, true);
+      }
     } catch (err) {
-      logger.error('[Playground] Failed to refresh messages after interrupt:', err);
+      logger.error('[Playground] Failed to refresh after interrupt:', err);
     }
   }
 
@@ -488,8 +564,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 +575,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 +598,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 +623,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 +703,131 @@
 
     <!-- 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}
+            {#if getCurrentSession()}
+              <button
+                type="button"
+                class="playground__log-toggle"
+                class:playground__refresh--spinning={isRefreshing}
+                onclick={() => void refreshFromServer()}
+                disabled={isRefreshing}
+                title="Refresh status"
+              >
+                <Icon icon="mdi:refresh" />
+                Refresh
+              </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 +865,7 @@
             onSendMessage={handleSendMessage}
             onStopExecution={handleStopExecution}
             onInterruptResolved={handleInterruptResolved}
+            bind:showLogs
           />
         {/if}
       </div>
@@ -691,6 +921,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 +948,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 +991,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);
+  }
+
+  /* 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;
   }
 
-  /* New Session – neutral full-width button with icon */
-  .playground__new-session-btn {
+  .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__new-session-btn:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
+  .playground__runs-toggle :global(svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
   }
 
-  .playground__new-session-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
+  .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;
+  }
+
+  /* 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__new-session-btn :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
+  .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__executions-inline :global(.execution-list) {
+    gap: 1px;
+    padding: var(--fd-space-3xs) 0;
   }
 
   /* Sessions */
@@ -797,17 +1114,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 +1134,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 +1265,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 +1320,211 @@
     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);
+  }
+
+  .playground__refresh--spinning :global(svg) {
+    animation: spin 0.8s linear infinite;
+  }
+
+  /* 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;