@d34dman/flowdrop 0.0.34 → 0.0.35

package/dist/components/playground/ChatPanel.svelte

@@ -240,11 +240,6 @@
 					onkeydown={handleKeydown}
 					oninput={handleInput}
 				></textarea>
-
-				<!-- Attachment button placeholder -->
-				<button type="button" class="chat-panel__attachment-btn" title="Attach file" disabled>
-					<Icon icon="mdi:image-outline" />
-				</button>
 			</div>
 
 			{#if $sessionStatus === 'running' || $isExecuting}
@@ -277,12 +272,14 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-height: 0; /* Critical: allows flexbox to shrink properly */
 		background-color: #ffffff;
 	}
 
-	/* Messages Container */
+	/* Messages Container - Scrollable area that takes remaining space */
 	.chat-panel__messages {
 		flex: 1;
+		min-height: 0; /* Critical: allows overflow to work in flex container */
 		overflow-y: auto;
 		padding: 1.5rem;
 		scroll-behavior: smooth;
@@ -380,10 +377,12 @@
 		color: #6b7280;
 	}
 
-	/* Input Area */
+	/* Input Area - Always stays at bottom, never shrinks */
 	.chat-panel__input-area {
+		flex-shrink: 0;
 		padding: 1rem 1.5rem 1.5rem;
 		background-color: #ffffff;
+		border-top: 1px solid #f3f4f6;
 	}
 
 	.chat-panel__input-container {
@@ -434,31 +433,6 @@
 		opacity: 0.6;
 	}
 
-	.chat-panel__attachment-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		border-radius: 0.375rem;
-		background: transparent;
-		color: #9ca3af;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		flex-shrink: 0;
-	}
-
-	.chat-panel__attachment-btn:hover:not(:disabled) {
-		color: #6b7280;
-		background-color: #f3f4f6;
-	}
-
-	.chat-panel__attachment-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
 	.chat-panel__send-btn {
 		display: flex;
 		align-items: center;

package/dist/components/playground/Playground.svelte

@@ -533,6 +533,7 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		overflow: hidden; /* Prevent playground-level scrolling */
 		background-color: #f8fafc;
 		font-family:
 			-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -744,6 +745,8 @@
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
+		min-height: 0; /* Allow proper flex shrinking */
+		overflow: hidden; /* Prevent scrolling - ChatPanel handles it */
 		background-color: #ffffff;
 	}
 

package/dist/stores/playgroundStore.d.ts

@@ -117,18 +117,21 @@ export declare const playgroundActions: {
     removeSession: (sessionId: string) => void;
     /**
      * Set messages for the current session
+     * Messages are automatically sorted chronologically
      *
      * @param messageList - Array of messages
      */
     setMessages: (messageList: PlaygroundMessage[]) => void;
     /**
      * Add a message to the current session
+     * Messages are automatically sorted chronologically after adding
      *
      * @param message - The message to add
      */
     addMessage: (message: PlaygroundMessage) => void;
     /**
      * Add multiple messages to the current session
+     * Messages are deduplicated and automatically sorted chronologically
      *
      * @param newMessages - Array of messages to add
      */

package/dist/stores/playgroundStore.js

@@ -138,6 +138,40 @@ export const hasChatInput = derived(inputFields, ($fields) => $fields.some((fiel
  */
 export const sessionCount = derived(sessions, ($sessions) => $sessions.length);
 // =========================================================================
+// Helper Functions
+// =========================================================================
+/**
+ * Sort messages chronologically by sequenceNumber
+ *
+ * All messages (user, assistant, log) have incrementing sequenceNumbers (1, 2, 3, ...).
+ * This provides a simple, reliable sort order for displaying messages.
+ *
+ * Sort order:
+ * 1. Primary: sequenceNumber (incrementing for all messages)
+ * 2. Secondary: timestamp (fallback for messages without sequenceNumber)
+ * 3. Tertiary: id as final tiebreaker
+ *
+ * @param messageList - Array of messages to sort
+ * @returns Sorted array of messages
+ */
+function sortMessagesChronologically(messageList) {
+    return [...messageList].sort((a, b) => {
+        // Primary: Sort by sequenceNumber
+        const seqA = a.sequenceNumber ?? 0;
+        const seqB = b.sequenceNumber ?? 0;
+        if (seqA !== seqB) {
+            return seqA - seqB;
+        }
+        // Secondary: Sort by timestamp for messages without sequenceNumber
+        const timestampCompare = a.timestamp.localeCompare(b.timestamp);
+        if (timestampCompare !== 0) {
+            return timestampCompare;
+        }
+        // Tertiary: Sort by ID as final tiebreaker
+        return a.id.localeCompare(b.id);
+    });
+}
+// =========================================================================
 // Actions
 // =========================================================================
 /**
@@ -213,22 +247,25 @@ export const playgroundActions = {
     },
     /**
      * Set messages for the current session
+     * Messages are automatically sorted chronologically
      *
      * @param messageList - Array of messages
      */
     setMessages: (messageList) => {
-        messages.set(messageList);
+        messages.set(sortMessagesChronologically(messageList));
     },
     /**
      * Add a message to the current session
+     * Messages are automatically sorted chronologically after adding
      *
      * @param message - The message to add
      */
     addMessage: (message) => {
-        messages.update(($messages) => [...$messages, message]);
+        messages.update(($messages) => sortMessagesChronologically([...$messages, message]));
     },
     /**
      * Add multiple messages to the current session
+     * Messages are deduplicated and automatically sorted chronologically
      *
      * @param newMessages - Array of messages to add
      */
@@ -239,7 +276,8 @@ export const playgroundActions = {
             // Deduplicate by message ID
             const existingIds = new Set($messages.map((m) => m.id));
             const uniqueNewMessages = newMessages.filter((m) => !existingIds.has(m.id));
-            return [...$messages, ...uniqueNewMessages];
+            // Sort the combined messages chronologically
+            return sortMessagesChronologically([...$messages, ...uniqueNewMessages]);
         });
     },
     /**

package/dist/types/playground.d.ts

@@ -24,6 +24,10 @@ export type PlaygroundMessageRole = 'user' | 'assistant' | 'system' | 'log';
  * Log level for log-type messages
  */
 export type PlaygroundMessageLevel = 'info' | 'warning' | 'error' | 'debug';
+/**
+ * Status of a playground message
+ */
+export type PlaygroundMessageStatus = 'pending' | 'processing' | 'completed' | 'failed';
 /**
  * Playground session representing a test conversation
  *
@@ -104,8 +108,18 @@ export interface PlaygroundMessage {
     content: string;
     /** Message timestamp (ISO 8601) */
     timestamp: string;
-    /** Associated node ID (for log messages) */
-    nodeId?: string;
+    /** Message status */
+    status?: PlaygroundMessageStatus;
+    /**
+     * Sequence number for ordering messages
+     * - User messages: incrementing numbers (1, 2, 3, ...)
+     * - Assistant/system responses: 0 (sorted after parent via parentMessageId)
+     */
+    sequenceNumber?: number;
+    /** Parent message ID (for assistant responses linked to user messages) */
+    parentMessageId?: string;
+    /** Associated node ID (for log/assistant messages) */
+    nodeId?: string | null;
     /** Additional message metadata */
     metadata?: PlaygroundMessageMetadata;
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",