@d34dman/flowdrop 0.0.36 → 0.0.37

package/dist/components/nodes/GatewayNode.svelte

@@ -26,6 +26,24 @@
 
 	let props: Props = $props();
 
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) || props.data.label
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) || props.data.metadata.description
+	);
+
 	/**
 	 * Get the hideUnconnectedHandles setting from extensions
 	 * Merges node type defaults with instance overrides
@@ -137,7 +155,7 @@
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
-	aria-label="Gateway node: {props.data.metadata.name}"
+	aria-label="Gateway node: {displayTitle}"
 	aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
 	<!-- Node Header -->
@@ -151,17 +169,17 @@
 				<Icon icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)} />
 			</div>
 
-			<!-- Node Title -->
+			<!-- Node Title - uses instanceTitle override if set -->
 			<h3 class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1">
-				{props.data.label}
+				{displayTitle}
 			</h3>
 		</div>
-		<!-- Node Description -->
+		<!-- Node Description - uses instanceDescription override if set -->
 		<p
 			class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1"
 			id="node-description-{props.data.nodeId || 'unknown'}"
 		>
-			{props.data.metadata.description}
+			{displayDescription}
 		</p>
 	</div>
 

package/dist/components/nodes/IdeaNode.svelte

@@ -34,20 +34,30 @@
 	}>();
 
 	/**
-	 * Get title from config or fallback to label/metadata
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
+	 * Note: Also supports legacy 'title' property for backward compatibility.
 	 */
-	const ideaTitle = $derived(
-		(props.data.config?.title as string) ||
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) ||
+			(props.data.config?.title as string) ||
 			props.data.label ||
 			props.data.metadata?.name ||
 			"New Idea"
 	);
 
 	/**
-	 * Get description content from config
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 * Note: Also supports legacy 'description' property for backward compatibility.
 	 */
-	const ideaDescription = $derived(
-		(props.data.config?.description as string) || "Click to add description..."
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			(props.data.config?.description as string) ||
+			props.data.metadata?.description ||
+			"Click to add description..."
 	);
 
 	/**
@@ -142,7 +152,7 @@
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
-	aria-label="Idea node: {ideaTitle}"
+	aria-label="Idea node: {displayTitle}"
 >
 	<!-- Left Port (Target/Input) -->
 	{#if enableLeftPort}
@@ -174,12 +184,12 @@
 			<div class="flowdrop-idea-node__icon-wrapper">
 				<Icon icon={ideaIcon} class="flowdrop-idea-node__icon" />
 			</div>
-			<h3 class="flowdrop-idea-node__title">{ideaTitle}</h3>
+			<h3 class="flowdrop-idea-node__title">{displayTitle}</h3>
 		</div>
 
 		<!-- Description Body -->
 		<div class="flowdrop-idea-node__body">
-			<p class="flowdrop-idea-node__description">{ideaDescription}</p>
+			<p class="flowdrop-idea-node__description">{displayDescription}</p>
 		</div>
 
 		<!-- Processing indicator -->

package/dist/components/nodes/TerminalNode.svelte

@@ -150,9 +150,27 @@
 	);
 
 	/**
-	 * Get display label
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
 	 */
-	let displayLabel = $derived(props.data.label || props.data.metadata?.name || variantConfig.label);
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) ||
+			props.data.label ||
+			props.data.metadata?.name ||
+			variantConfig.label
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			props.data.metadata?.description ||
+			""
+	);
 
 	/**
 	 * Check if metadata explicitly defines inputs (including empty array)
@@ -282,7 +300,7 @@
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
-	aria-label="{variant} node: {displayLabel}"
+	aria-label="{variant} node: {displayTitle}"
 >
 	<!-- Config button at top -->
 	<button
@@ -333,9 +351,16 @@
 		{/if}
 	</div>
 
-	<!-- Label below the circle -->
-	<div class="flowdrop-terminal-node__label">
-		{displayLabel}
+	<!-- Label and description below the circle -->
+	<div class="flowdrop-terminal-node__label-container">
+		<div class="flowdrop-terminal-node__label">
+			{displayTitle}
+		</div>
+		{#if displayDescription}
+			<div class="flowdrop-terminal-node__description">
+				{displayDescription}
+			</div>
+		{/if}
 	</div>
 
 	<!-- Processing indicator -->
@@ -440,19 +465,37 @@
 		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
 	}
 
+	.flowdrop-terminal-node__label-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.125rem;
+		background-color: rgba(255, 255, 255, 0.9);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+		max-width: 140px;
+	}
+
 	.flowdrop-terminal-node__label {
 		font-size: 0.75rem;
 		font-weight: 500;
 		color: #374151;
 		text-align: center;
-		max-width: 100px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		background-color: rgba(255, 255, 255, 0.9);
-		padding: 0.125rem 0.5rem;
-		border-radius: 0.25rem;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+		max-width: 100%;
+	}
+
+	.flowdrop-terminal-node__description {
+		font-size: 0.625rem;
+		color: #6b7280;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
 	}
 
 	.flowdrop-terminal-node__processing {

package/dist/components/nodes/ToolNode.svelte

@@ -47,17 +47,32 @@
 	let toolColor = $derived(
 		(props.data.metadata?.color as string) || (props.data.config?.color as string) || '#f59e0b'
 	);
-	let toolName = $derived(
-		(props.data.metadata?.name as string) ||
+
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to metadata name, toolName config, or label if not set.
+	 * This allows users to customize the tool title per-instance via config.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) ||
+			(props.data.metadata?.name as string) ||
 			(props.data.config?.toolName as string) ||
 			props.data.label ||
-			'Tool'
+			"Tool"
 	);
-	let toolDescription = $derived(
-		(props.data.metadata?.description as string) ||
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to metadata description or toolDescription config if not set.
+	 * This allows users to customize the tool description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			(props.data.metadata?.description as string) ||
 			(props.data.config?.toolDescription as string) ||
-			'A configurable tool for agents'
+			"A configurable tool for agents"
 	);
+
 	let toolVersion = $derived(
 		(props.data.metadata?.version as string) ||
 			(props.data.config?.toolVersion as string) ||
@@ -159,7 +174,7 @@
 			<!-- Tool Info -->
 			<div class="flowdrop-tool-node__info">
 				<h3 class="flowdrop-tool-node__title">
-					{toolName}
+					{displayTitle}
 				</h3>
 				<div class="flowdrop-tool-node__version">
 					v{toolVersion}
@@ -170,9 +185,9 @@
 			<div class="flowdrop-tool-node__badge">TOOL</div>
 		</div>
 
-		<!-- Tool Description -->
+		<!-- Tool Description - uses instanceDescription override if set -->
 		<p class="flowdrop-tool-node__description">
-			{toolDescription}
+			{displayDescription}
 		</p>
 	</div>
 

package/package.json

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