diff --git a/framework/configstore/migrations.go b/framework/configstore/migrations.go
index bced2ec3f5..42ca3f3c8d 100644
--- a/framework/configstore/migrations.go
+++ b/framework/configstore/migrations.go
@@ -359,6 +359,9 @@ func triggerMigrations(ctx context.Context, db *gorm.DB) error {
 	if err := migrationAddRoutingChainMaxDepthColumn(ctx, db); err != nil {
 		return err
 	}
+	if err := migrationAddPromptVariablesColumns(ctx, db); err != nil {
+		return err
+	}
 	if err := migrationAddModelCapabilityColumns(ctx, db); err != nil {
 		return err
 	}
@@ -5466,6 +5469,50 @@ func migrationAddOpenAIConfigJSONColumn(ctx context.Context, db *gorm.DB) error
 	return nil
 }
 
+// migrationAddPromptVariablesColumns adds variables_json column to prompt_sessions and prompt_versions
+func migrationAddPromptVariablesColumns(ctx context.Context, db *gorm.DB) error {
+	m := migrator.New(db, migrator.DefaultOptions, []*migrator.Migration{{
+		ID: "add_prompt_variables_columns",
+		Migrate: func(tx *gorm.DB) error {
+			tx = tx.WithContext(ctx)
+			migrator := tx.Migrator()
+
+			if !migrator.HasColumn(&tables.TablePromptSession{}, "variables_json") {
+				if err := migrator.AddColumn(&tables.TablePromptSession{}, "VariablesJSON"); err != nil {
+					return fmt.Errorf("failed to add variables_json column to prompt_sessions: %w", err)
+				}
+			}
+
+			if !migrator.HasColumn(&tables.TablePromptVersion{}, "variables_json") {
+				if err := migrator.AddColumn(&tables.TablePromptVersion{}, "VariablesJSON"); err != nil {
+					return fmt.Errorf("failed to add variables_json column to prompt_versions: %w", err)
+				}
+			}
+
+			return nil
+		},
+		Rollback: func(tx *gorm.DB) error {
+			tx = tx.WithContext(ctx)
+			migrator := tx.Migrator()
+			if migrator.HasColumn(&tables.TablePromptSession{}, "variables_json") {
+				if err := migrator.DropColumn(&tables.TablePromptSession{}, "variables_json"); err != nil {
+					return err
+				}
+			}
+			if migrator.HasColumn(&tables.TablePromptVersion{}, "variables_json") {
+				if err := migrator.DropColumn(&tables.TablePromptVersion{}, "variables_json"); err != nil {
+					return err
+				}
+			}
+			return nil
+		},
+	}})
+	if err := m.Migrate(); err != nil {
+		return fmt.Errorf("error while running add_prompt_variables_columns migration: %s", err.Error())
+	}
+	return nil
+}
+
 // migrationAddKeyBlacklistedModelsJSONColumn adds blacklisted_models_json to config_keys
 // for per-key model deny lists (JSON array of model ids, default []).
 func migrationAddKeyBlacklistedModelsJSONColumn(ctx context.Context, db *gorm.DB) error {
diff --git a/framework/configstore/tables/promptSessions.go b/framework/configstore/tables/promptSessions.go
index df96db09aa..4618704ebf 100644
--- a/framework/configstore/tables/promptSessions.go
+++ b/framework/configstore/tables/promptSessions.go
@@ -22,6 +22,8 @@ type TablePromptSession struct {
 	ModelParams     ModelParams         `gorm:"-" json:"model_params"`
 	Provider        string              `gorm:"type:varchar(100)" json:"provider"`
 	Model           string              `gorm:"type:varchar(100)" json:"model"`
+	VariablesJSON   *string             `gorm:"type:text;column:variables_json" json:"-"`
+	Variables       PromptVariables     `gorm:"-" json:"variables,omitempty"` // {key: value} map for Jinja2 variables
 	CreatedAt       time.Time           `gorm:"not null" json:"created_at"`
 	UpdatedAt       time.Time           `gorm:"not null" json:"updated_at"`
 
@@ -40,6 +42,17 @@ func (s *TablePromptSession) BeforeSave(tx *gorm.DB) error {
 	}
 	paramsStr := string(data)
 	s.ModelParamsJSON = &paramsStr
+
+	if s.Variables != nil {
+		varsData, err := json.Marshal(s.Variables)
+		if err != nil {
+			return err
+		}
+		varsStr := string(varsData)
+		s.VariablesJSON = &varsStr
+	} else {
+		s.VariablesJSON = nil
+	}
 	return nil
 }
 
@@ -52,6 +65,15 @@ func (s *TablePromptSession) AfterFind(tx *gorm.DB) error {
 			return err
 		}
 	}
+	if s.VariablesJSON != nil && *s.VariablesJSON != "" {
+		var vars PromptVariables
+		if err := json.Unmarshal([]byte(*s.VariablesJSON), &vars); err != nil {
+			return err
+		}
+		s.Variables = vars
+	} else {
+		s.Variables = nil
+	}
 	return nil
 }
 
diff --git a/framework/configstore/tables/promptVersions.go b/framework/configstore/tables/promptVersions.go
index 1703be58f3..ca9e41e039 100644
--- a/framework/configstore/tables/promptVersions.go
+++ b/framework/configstore/tables/promptVersions.go
@@ -12,17 +12,19 @@ import (
 // TablePromptVersion represents an immutable version of a prompt
 // Once created, a version cannot be modified - to make changes, create a new version
 type TablePromptVersion struct {
-	ID              uint         `gorm:"primaryKey;autoIncrement" json:"id"`
-	PromptID        string       `gorm:"type:varchar(36);not null;index;uniqueIndex:idx_prompt_version" json:"prompt_id"`
-	Prompt          *TablePrompt `gorm:"foreignKey:PromptID" json:"prompt,omitempty"`
-	VersionNumber   int          `gorm:"not null;uniqueIndex:idx_prompt_version" json:"version_number"`
-	CommitMessage   string       `gorm:"type:text" json:"commit_message"`
-	ModelParamsJSON *string      `gorm:"type:text;column:model_params_json" json:"-"`
-	ModelParams     ModelParams  `gorm:"-" json:"model_params"`
-	Provider        string       `gorm:"type:varchar(100)" json:"provider"`
-	Model           string       `gorm:"type:varchar(100)" json:"model"`
-	IsLatest        bool         `gorm:"not null;default:false" json:"is_latest"`
-	CreatedAt       time.Time    `gorm:"not null" json:"created_at"`
+	ID               uint         `gorm:"primaryKey;autoIncrement" json:"id"`
+	PromptID         string       `gorm:"type:varchar(36);not null;index;uniqueIndex:idx_prompt_version" json:"prompt_id"`
+	Prompt           *TablePrompt `gorm:"foreignKey:PromptID" json:"prompt,omitempty"`
+	VersionNumber    int          `gorm:"not null;uniqueIndex:idx_prompt_version" json:"version_number"`
+	CommitMessage    string       `gorm:"type:text" json:"commit_message"`
+	ModelParamsJSON  *string      `gorm:"type:text;column:model_params_json" json:"-"`
+	ModelParams      ModelParams  `gorm:"-" json:"model_params"`
+	Provider         string       `gorm:"type:varchar(100)" json:"provider"`
+	Model            string       `gorm:"type:varchar(100)" json:"model"`
+	VariablesJSON    *string         `gorm:"type:text;column:variables_json" json:"-"`
+	Variables        PromptVariables `gorm:"-" json:"variables,omitempty"` // {key: value} map for Jinja2 variables
+	IsLatest         bool            `gorm:"not null;default:false" json:"is_latest"`
+	CreatedAt        time.Time    `gorm:"not null" json:"created_at"`
 	// No UpdatedAt - versions are immutable
 
 	// Relationships
@@ -36,6 +38,10 @@ func (TablePromptVersion) TableName() string { return "prompt_versions" }
 // so that any provider-specific params (response_format, seed, logprobs, etc.) are preserved.
 type ModelParams map[string]interface{}
 
+// PromptVariables represents a map of Jinja2 variable names to their values.
+// Sessions store full {key: value} pairs; versions store {key: ""} (keys only).
+type PromptVariables map[string]string
+
 // BeforeSave GORM hook to serialize JSON fields
 func (v *TablePromptVersion) BeforeSave(tx *gorm.DB) error {
 	if v.ModelParams != nil {
@@ -46,6 +52,14 @@ func (v *TablePromptVersion) BeforeSave(tx *gorm.DB) error {
 		paramsStr := string(data)
 		v.ModelParamsJSON = &paramsStr
 	}
+	if v.Variables != nil {
+		varsData, err := json.Marshal(v.Variables)
+		if err != nil {
+			return err
+		}
+		varsStr := string(varsData)
+		v.VariablesJSON = &varsStr
+	}
 	return nil
 }
 
@@ -58,6 +72,11 @@ func (v *TablePromptVersion) AfterFind(tx *gorm.DB) error {
 			return err
 		}
 	}
+	if v.VariablesJSON != nil && *v.VariablesJSON != "" {
+		if err := json.Unmarshal([]byte(*v.VariablesJSON), &v.Variables); err != nil {
+			return err
+		}
+	}
 	return nil
 }
 
diff --git a/transports/bifrost-http/handlers/prompts.go b/transports/bifrost-http/handlers/prompts.go
index e5b96f0c38..c5e5737f0f 100644
--- a/transports/bifrost-http/handlers/prompts.go
+++ b/transports/bifrost-http/handlers/prompts.go
@@ -137,25 +137,28 @@ type CreateVersionRequest struct {
 	ModelParams   tables.ModelParams     `json:"model_params"`
 	Provider      string                 `json:"provider"`
 	Model         string                 `json:"model"`
+	Variables     tables.PromptVariables  `json:"variables,omitempty"`
 }
 
 // CreateSessionRequest represents the request body for creating a session
 type CreateSessionRequest struct {
-	Name        string                 `json:"name"`
-	VersionID   *uint                  `json:"version_id,omitempty"`
-	Messages    []tables.PromptMessage `json:"messages,omitempty"`
-	ModelParams tables.ModelParams     `json:"model_params"`
-	Provider    string                 `json:"provider"`
-	Model       string                 `json:"model"`
+	Name        string                  `json:"name"`
+	VersionID   *uint                   `json:"version_id,omitempty"`
+	Messages    []tables.PromptMessage  `json:"messages,omitempty"`
+	ModelParams tables.ModelParams      `json:"model_params"`
+	Provider    string                  `json:"provider"`
+	Model       string                  `json:"model"`
+	Variables   tables.PromptVariables  `json:"variables,omitempty"`
 }
 
 // UpdateSessionRequest represents the request body for updating a session
 type UpdateSessionRequest struct {
-	Name        string                 `json:"name"`
-	Messages    []tables.PromptMessage `json:"messages"`
-	ModelParams tables.ModelParams     `json:"model_params"`
-	Provider    string                 `json:"provider"`
-	Model       string                 `json:"model"`
+	Name        string                  `json:"name"`
+	Messages    []tables.PromptMessage  `json:"messages"`
+	ModelParams tables.ModelParams      `json:"model_params"`
+	Provider    string                  `json:"provider"`
+	Model       string                  `json:"model"`
+	Variables   tables.PromptVariables  `json:"variables,omitempty"`
 }
 
 // RenameSessionRequest represents the request body for renaming a session
@@ -631,12 +634,22 @@ func (h *PromptsHandler) createVersion(ctx *fasthttp.RequestCtx) {
 		})
 	}
 
+	// Strip variable values — versions store keys only; values live in sessions
+	var versionVars tables.PromptVariables
+	if len(req.Variables) > 0 {
+		versionVars = make(tables.PromptVariables, len(req.Variables))
+		for key := range req.Variables {
+			versionVars[key] = ""
+		}
+	}
+
 	version := &tables.TablePromptVersion{
 		PromptID:      promptID,
 		CommitMessage: req.CommitMessage,
 		ModelParams:   req.ModelParams,
 		Provider:      req.Provider,
 		Model:         req.Model,
+		Variables:     versionVars,
 		Messages:      messages,
 	}
 
@@ -835,6 +848,7 @@ func (h *PromptsHandler) createSession(ctx *fasthttp.RequestCtx) {
 		ModelParams: req.ModelParams,
 		Provider:    req.Provider,
 		Model:       req.Model,
+		Variables:   req.Variables,
 		Messages:    messages,
 	}
 
@@ -890,6 +904,7 @@ func (h *PromptsHandler) updateSession(ctx *fasthttp.RequestCtx) {
 	session.ModelParams = req.ModelParams
 	session.Provider = req.Provider
 	session.Model = req.Model
+	session.Variables = req.Variables
 
 	// Update messages
 	var messages []tables.TablePromptSessionMessage
@@ -1066,12 +1081,22 @@ func (h *PromptsHandler) commitSession(ctx *fasthttp.RequestCtx) {
 		return
 	}
 
+	// Copy variable keys from session with empty values for the version
+	var versionVars tables.PromptVariables
+	if len(session.Variables) > 0 {
+		versionVars = make(tables.PromptVariables, len(session.Variables))
+		for key := range session.Variables {
+			versionVars[key] = ""
+		}
+	}
+
 	version := &tables.TablePromptVersion{
 		PromptID:      session.PromptID,
 		CommitMessage: req.CommitMessage,
 		ModelParams:   session.ModelParams,
 		Provider:      session.Provider,
 		Model:         session.Model,
+		Variables:     versionVars,
 		Messages:      messages,
 	}
 
diff --git a/ui/app/workspace/mcp-logs/views/bifrost.code-workspace b/ui/app/workspace/mcp-logs/views/bifrost.code-workspace
new file mode 100644
index 0000000000..8c5511061b
--- /dev/null
+++ b/ui/app/workspace/mcp-logs/views/bifrost.code-workspace
@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "../../../../.."
+		},
+		{
+			"path": "../../../../../../bifrost-enterprise"
+		}
+	],
+	"settings": {}
+}
\ No newline at end of file
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/celRuleBuilder.tsx b/ui/app/workspace/routing-rules/components/celBuilder/celRuleBuilder.tsx
index 4660699352..29f034d5d9 100644
--- a/ui/app/workspace/routing-rules/components/celBuilder/celRuleBuilder.tsx
+++ b/ui/app/workspace/routing-rules/components/celBuilder/celRuleBuilder.tsx
@@ -1,25 +1,16 @@
 /**
- * CEL Rule Builder Component for Routing Rules
- * Visual query builder for creating CEL expressions
+ * CEL Rule Builder for Routing Rules
+ * Thin wrapper around the reusable CELRuleBuilder with routing-specific config
  */
 
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+"use client";
+
+import { CELRuleBuilder as BaseCELRuleBuilder } from "@/components/ui/custom/celBuilder";
 import { getRoutingFields } from "@/lib/config/celFieldsRouting";
 import { celOperatorsRouting } from "@/lib/config/celOperatorsRouting";
-import { convertRuleGroupToCEL } from "@/lib/utils/celConverterRouting";
-import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
-import { Check, Copy, Loader2 } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Field, QueryBuilder, RuleGroupType } from "react-querybuilder";
-import "react-querybuilder/dist/query-builder.css";
-import { ActionButton } from "./actionButton";
-import { CombinatorSelector } from "./combinatorSelector";
-import { FieldSelector } from "./fieldSelector";
-import { OperatorSelector } from "./operatorSelector";
-import { QueryBuilderWrapper } from "./queryBuilderWrapper";
-import { ValueEditor } from "./valueEditor";
+import { convertRuleGroupToCEL, validateRegexPattern } from "@/lib/utils/celConverterRouting";
+import { useMemo } from "react";
+import { RuleGroupType } from "react-querybuilder";
 
 interface CELRuleBuilderProps {
 	onChange?: (celExpression: string, query: RuleGroupType) => void;
@@ -30,11 +21,6 @@ interface CELRuleBuilderProps {
 	isLoading?: boolean;
 }
 
-const defaultQuery: RuleGroupType = {
-	combinator: "and",
-	rules: [],
-};
-
 export function CELRuleBuilder({
 	onChange,
 	initialQuery,
@@ -43,96 +29,18 @@ export function CELRuleBuilder({
 	isLoading = false,
 	allowCustomModels = false,
 }: CELRuleBuilderProps) {
-	const [query, setQuery] = useState<RuleGroupType>(initialQuery || defaultQuery);
-	const [celExpression, setCelExpression] = useState("");
-	const { copy, copied } = useCopyToClipboard();
-	const onChangeRef = useRef(onChange);
-
-	// Keep ref updated so the query effect always invokes the latest callback
-	useEffect(() => {
-		onChangeRef.current = onChange;
-	}, [onChange]);
-
-	// Generate fields with dynamic providers and models
-	const fields = useMemo(() => {
-		const celFields = getRoutingFields(providers, models);
-		return celFields.map((field) => ({
-			...field,
-			value: field.name,
-		})) as Field[];
-	}, [providers, models]);
-
-	useEffect(() => {
-		const expression = convertRuleGroupToCEL(query);
-		setCelExpression(expression);
-		onChangeRef.current?.(expression, query);
-	}, [query]);
-
-	const handleCopy = () => copy(celExpression);
-
-	// Show loading state
-	if (isLoading) {
-		return (
-			<div className="flex items-center justify-center space-x-2 rounded-md border p-8">
-				<Loader2 className="h-5 w-5 animate-spin" />
-				<span className="text-muted-foreground text-sm">Loading CEL builder...</span>
-			</div>
-		);
-	}
+	const fields = useMemo(() => getRoutingFields(providers, models), [providers, models]);
 
 	return (
-		<div className="space-y-4">
-			<div className="rounded-md border">
-				<div className="custom-scrollbar flex w-full flex-col overflow-scroll">
-					<QueryBuilderWrapper>
-						<QueryBuilder
-							fields={fields}
-							query={query}
-							onQueryChange={setQuery}
-							context={{ allowCustomModels }}
-							controlClassnames={{ queryBuilder: "queryBuilder-branches" }}
-							operators={celOperatorsRouting.map((op) => ({
-								name: op.name,
-								label: op.label,
-							}))}
-							controlElements={{
-								fieldSelector: FieldSelector,
-								operatorSelector: OperatorSelector,
-								valueEditor: ValueEditor,
-								addRuleAction: ActionButton,
-								addGroupAction: ActionButton,
-								removeRuleAction: ActionButton,
-								removeGroupAction: ActionButton,
-								combinatorSelector: CombinatorSelector,
-							}}
-							translations={{
-								addRule: { label: "Add Rule" },
-								addGroup: { label: "Add Rule Group" },
-							}}
-						/>
-					</QueryBuilderWrapper>
-				</div>
-			</div>
-
-			<div className="space-y-2">
-				<div className="flex items-center justify-between">
-					<Label>CEL Expression Preview</Label>
-					<Button variant="outline" size="sm" onClick={handleCopy} disabled={!celExpression} className="gap-2" type="button">
-						{copied ? (
-							<>
-								<Check className="h-4 w-4" />
-								Copied
-							</>
-						) : (
-							<>
-								<Copy className="h-4 w-4" />
-								Copy
-							</>
-						)}
-					</Button>
-				</div>
-				<Textarea value={celExpression || "No rules defined yet"} readOnly className="font-mono text-sm" rows={4} />
-			</div>
-		</div>
+		<BaseCELRuleBuilder
+			onChange={onChange}
+			initialQuery={initialQuery}
+			isLoading={isLoading}
+			fields={fields}
+			operators={celOperatorsRouting}
+			convertToCEL={convertRuleGroupToCEL}
+			validateRegex={validateRegexPattern}
+			builderContext={{ allowCustomModels }}
+		/>
 	);
 }
\ No newline at end of file
diff --git a/ui/components/prompts/components/promptsViewHeader.tsx b/ui/components/prompts/components/promptsViewHeader.tsx
index 4df3002e1c..5dbe7e3836 100644
--- a/ui/components/prompts/components/promptsViewHeader.tsx
+++ b/ui/components/prompts/components/promptsViewHeader.tsx
@@ -26,6 +26,7 @@ export default function PromptsViewHeader() {
 		modelParams,
 		provider,
 		model,
+		variables,
 		hasChanges,
 		hasVersionChanges,
 		hasSessionChanges,
@@ -87,6 +88,7 @@ export default function PromptsViewHeader() {
 					model_params: buildSaveParams(),
 					provider,
 					model,
+					variables: Object.keys(variables).length > 0 ? variables : undefined,
 				},
 			}).unwrap();
 			setUrlState({ sessionId: result.session.id, versionId: null });
@@ -94,7 +96,7 @@ export default function PromptsViewHeader() {
 		} catch (err) {
 			toast.error("Failed to save session", { description: getErrorMessage(err) });
 		}
-	}, [selectedPrompt?.id, messages, buildSaveParams, provider, model, createSession, setUrlState, hasChanges, isStreaming]);
+	}, [selectedPrompt?.id, messages, buildSaveParams, provider, model, variables, createSession, setUrlState, hasChanges, isStreaming]);
 
 	// Cmd+S / Ctrl+S to save session
 	useHotkeys(
@@ -126,6 +128,7 @@ export default function PromptsViewHeader() {
 					model_params: buildSaveParams(),
 					provider,
 					model,
+					variables: Object.keys(variables).length > 0 ? variables : undefined,
 				},
 			}).unwrap();
 			setUrlState({ sessionId: result.session.id, versionId: null });
@@ -133,7 +136,7 @@ export default function PromptsViewHeader() {
 		} catch (err) {
 			toast.error("Failed to save session", { description: getErrorMessage(err) });
 		}
-	}, [selectedPrompt?.id, messages, buildSaveParams, provider, model, createSession, setUrlState, onSessionSaved, hasChanges]);
+	}, [selectedPrompt?.id, messages, buildSaveParams, provider, model, variables, createSession, setUrlState, onSessionSaved, hasChanges]);
 
 	const handleRenameSession = useCallback(
 		async (sessionId: number, name: string) => {
diff --git a/ui/components/prompts/components/variablesTableView.tsx b/ui/components/prompts/components/variablesTableView.tsx
index 2b9c6db297..8843235bf2 100644
--- a/ui/components/prompts/components/variablesTableView.tsx
+++ b/ui/components/prompts/components/variablesTableView.tsx
@@ -10,7 +10,7 @@ export function VariablesTableView({
 	variables: VariableMap;
 	onChange: React.Dispatch<React.SetStateAction<VariableMap>>;
 }) {
-	const entries = useMemo(() => Object.entries(variables), [variables]);
+	const entries = useMemo(() => Object.entries(variables).sort(([a], [b]) => a.localeCompare(b)), [variables]);
 
 	const handleValueChange = useCallback(
 		(name: string, value: string) => {
@@ -25,7 +25,7 @@ export function VariablesTableView({
 			<p className="text-muted-foreground text-xs">
 				Detected from <code className="bg-muted rounded px-1">{"{{ }}"}</code> syntax in messages. Values are substituted at runtime.
 			</p>
-			<div className="border-border overflow-hidden rounded-md border">
+			<div className="border-border overflow-hidden rounded-sm border">
 				<table className="w-full table-fixed text-sm">
 					<thead>
 						<tr className="bg-muted/50 border-border border-b">
diff --git a/ui/components/prompts/context.tsx b/ui/components/prompts/context.tsx
index b9e5b11544..3d9929738f 100644
--- a/ui/components/prompts/context.tsx
+++ b/ui/components/prompts/context.tsx
@@ -220,6 +220,10 @@ export function PromptProvider({ children }: { children: ReactNode }) {
 			const loaded = Message.fromLegacyAll(raw);
 			loadMessages(loaded.length > 0 ? loaded : [Message.system("")]);
 			loadFromParams(selectedSession.model_params, selectedSession.provider, selectedSession.model);
+			// Restore variables (key:value) from session
+			if (selectedSession.variables && Object.keys(selectedSession.variables).length > 0) {
+				setVariables(selectedSession.variables);
+			}
 		} else if (selectedVersion) {
 			// If sessions are still loading and no session is explicitly selected,
 			// wait — a session may auto-select and take priority
@@ -228,6 +232,10 @@ export function PromptProvider({ children }: { children: ReactNode }) {
 			const loaded = Message.fromLegacyAll(raw);
 			loadMessages(loaded.length > 0 ? loaded : [Message.system("")]);
 			loadFromParams(selectedVersion.model_params, selectedVersion.provider, selectedVersion.model);
+			// Initialize variables from version (keys with empty values)
+			if (selectedVersion.variables && Object.keys(selectedVersion.variables).length > 0) {
+				setVariables((prev) => mergeVariables(prev, Object.keys(selectedVersion.variables!)));
+			}
 		} else if (selectedPrompt?.latest_version) {
 			// Only fall back to latest_version after sessions have settled
 			// to avoid racing with the session auto-select effect
@@ -237,6 +245,10 @@ export function PromptProvider({ children }: { children: ReactNode }) {
 			const loaded = Message.fromLegacyAll(raw);
 			loadMessages(loaded.length > 0 ? loaded : [Message.system("")]);
 			loadFromParams(version.model_params, version.provider, version.model);
+			// Initialize variables from version (keys with empty values)
+			if (version.variables && Object.keys(version.variables).length > 0) {
+				setVariables((prev) => mergeVariables(prev, Object.keys(version.variables!)));
+			}
 			if (sessions.length === 0) {
 				setUrlState({ versionId: version.id });
 			}
diff --git a/ui/components/prompts/fragments/settingsPanel.tsx b/ui/components/prompts/fragments/settingsPanel.tsx
index 3a21f03178..449af20e1d 100644
--- a/ui/components/prompts/fragments/settingsPanel.tsx
+++ b/ui/components/prompts/fragments/settingsPanel.tsx
@@ -168,12 +168,12 @@ export function SettingsPanel() {
 						/>
 					)}
 
-					{/* {Object.keys(variables).length > 0 && (
+					{Object.keys(variables).length > 0 && (
 						<>
 							<Separator />
 							<VariablesTableView variables={variables} onChange={setVariables} />
 						</>
-					)} */}
+					)}
 
 					{model && (
 						<>
diff --git a/ui/components/ui/asyncMultiselect.tsx b/ui/components/ui/asyncMultiselect.tsx
index ce9af918ef..8fdf1b91b5 100644
--- a/ui/components/ui/asyncMultiselect.tsx
+++ b/ui/components/ui/asyncMultiselect.tsx
@@ -144,6 +144,8 @@ interface AsyncMultiSelectProps<T> {
 	reload?: (query: string, callback: (options: Option<T>[] | OptionGroup<T>[]) => void) => void;
 
 	menuPosition?: "absolute" | "fixed";
+	/** Target element for the menu portal. When set, the menu renders inside this element instead of document.body. */
+	menuPortalTarget?: HTMLElement | null;
 
 	/** enable dynamic option creation from the input */
 	dynamicOptionCreation?: boolean;
@@ -391,13 +393,16 @@ export function AsyncMultiSelect<T>(props: AsyncMultiSelectProps<T>) {
 				menuPlacement={props.menuPlacement}
 				blurInputOnSelect={false}
 				menuPosition={props.menuPosition ?? "fixed"}
+				menuPortalTarget={props.menuPortalTarget}
 				onInputChange={(newValue, actionMeta) => {
 					if (props.onInputChange) {
 						props.onInputChange(newValue, { action: actionMeta.action });
 					}
 				}}
 				onBlur={(e) => {
-					radixDialogOnBlurWorkaround(e);
+					if (!props.menuPortalTarget) {
+						radixDialogOnBlurWorkaround(e);
+					}
 					if (props.onBlur) props.onBlur();
 				}}
 				onMenuOpen={() => {
@@ -414,6 +419,7 @@ export function AsyncMultiSelect<T>(props: AsyncMultiSelectProps<T>) {
 				}
 				inputValue={props.inputValue}
 				styles={{
+					menuPortal: (base) => ({ ...base, zIndex: 9999 }),
 					control: (base) => ({ ...base, boxShadow: "none", minHeight: "32px" }),
 					multiValue: () => ({}),
 					multiValueLabel: () => ({}),
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/actionButton.tsx b/ui/components/ui/custom/celBuilder/actionButton.tsx
similarity index 100%
rename from ui/app/workspace/routing-rules/components/celBuilder/actionButton.tsx
rename to ui/components/ui/custom/celBuilder/actionButton.tsx
diff --git a/ui/components/ui/custom/celBuilder/celRuleBuilder.tsx b/ui/components/ui/custom/celBuilder/celRuleBuilder.tsx
new file mode 100644
index 0000000000..a597cf2737
--- /dev/null
+++ b/ui/components/ui/custom/celBuilder/celRuleBuilder.tsx
@@ -0,0 +1,187 @@
+/**
+ * CEL Rule Builder Component
+ * Reusable visual query builder for creating CEL expressions
+ */
+
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Check, Copy, Loader2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Field, QueryBuilder, RuleGroupType } from "react-querybuilder";
+import "react-querybuilder/dist/query-builder.css";
+import { ActionButton } from "./actionButton";
+import { CombinatorSelector } from "./combinatorSelector";
+import { FieldSelector } from "./fieldSelector";
+import { OperatorSelector } from "./operatorSelector";
+import { QueryBuilderWrapper } from "./queryBuilderWrapper";
+import { ValueEditor } from "./valueEditor";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
+
+export interface CELFieldDefinition {
+	name: string;
+	label: string;
+	placeholder?: string;
+	inputType?: string;
+	valueEditorType?: string | ((operator: string) => string);
+	operators?: string[];
+	defaultOperator?: string;
+	defaultValue?: any;
+	values?: Array<{ name: string; label: string; disabled?: boolean }>;
+	metricOptions?: Array<{ name: string; label: string }>;
+	description?: string;
+}
+
+export interface CELOperatorDefinition {
+	name: string;
+	label: string;
+	celSyntax: string;
+}
+
+export interface CELRuleBuilderProps {
+	onChange?: (celExpression: string, query: RuleGroupType) => void;
+	initialQuery?: RuleGroupType;
+	isLoading?: boolean;
+	/** Fields available in the query builder */
+	fields: CELFieldDefinition[];
+	/** Operators available in the query builder */
+	operators: CELOperatorDefinition[];
+	/** Function to convert a RuleGroupType to a CEL expression string */
+	convertToCEL: (ruleGroup: RuleGroupType) => string;
+	/** Optional regex validation function, passed to ValueEditor via context */
+	validateRegex?: (pattern: string) => string | null;
+	/** Additional context passed to the QueryBuilder controlElements */
+	builderContext?: Record<string, any>;
+	options?: {
+		hideCELExpression?: boolean;
+	};
+}
+
+const defaultQuery: RuleGroupType = {
+	combinator: "and",
+	rules: [],
+};
+
+export function CELRuleBuilder({
+	onChange,
+	initialQuery,
+	isLoading = false,
+	fields: fieldDefinitions,
+	operators,
+	convertToCEL,
+	validateRegex,
+	builderContext,
+	options = {
+		hideCELExpression: false,
+	},
+}: CELRuleBuilderProps) {
+	const [query, setQuery] = useState<RuleGroupType>(initialQuery || defaultQuery);
+	const [celExpression, setCelExpression] = useState("");
+	const onChangeRef = useRef(onChange);
+	const convertToCELRef = useRef(convertToCEL);
+	const { copy, copied } = useCopyToClipboard();
+
+	// Keep refs updated so the query effect always invokes the latest callbacks
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
+	useEffect(() => {
+		convertToCELRef.current = convertToCEL;
+	}, [convertToCEL]);
+
+	// Convert field definitions to react-querybuilder Field format
+	const fields = useMemo(() => {
+		return fieldDefinitions.map((field) => ({
+			...field,
+			value: field.name,
+		})) as Field[];
+	}, [fieldDefinitions]);
+
+	useEffect(() => {
+		const expression = convertToCELRef.current(query);
+		setCelExpression(expression);
+		onChangeRef.current?.(expression, query);
+	}, [query]);
+
+	// Show loading state
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center space-x-2 rounded-md border p-8">
+				<Loader2 className="h-5 w-5 animate-spin" />
+				<span className="text-muted-foreground text-sm">Loading CEL builder...</span>
+			</div>
+		);
+	}
+
+	const context = {
+		...builderContext,
+		...(validateRegex ? { validateRegex } : {}),
+	};
+
+	return (
+		<div className="space-y-4">
+			<div className="rounded-md border">
+				<div className="custom-scrollbar flex w-full flex-col overflow-scroll">
+					<QueryBuilderWrapper>
+						<QueryBuilder
+							fields={fields}
+							query={query}
+							onQueryChange={setQuery}
+							context={context}
+							controlClassnames={{ queryBuilder: "queryBuilder-branches" }}
+							operators={operators.map((op) => ({
+								name: op.name,
+								label: op.label,
+							}))}
+							controlElements={{
+								fieldSelector: FieldSelector,
+								operatorSelector: OperatorSelector,
+								valueEditor: ValueEditor,
+								addRuleAction: ActionButton,
+								addGroupAction: ActionButton,
+								removeRuleAction: ActionButton,
+								removeGroupAction: ActionButton,
+								combinatorSelector: CombinatorSelector,
+							}}
+							translations={{
+								addRule: { label: "Add Rule" },
+								addGroup: { label: "Add Rule Group" },
+							}}
+						/>
+					</QueryBuilderWrapper>
+				</div>
+			</div>
+
+			{!options.hideCELExpression && (
+				<div className="space-y-2">
+					<div className="flex items-center justify-between">
+						<Label>CEL Expression Preview</Label>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => copy(celExpression)}
+							disabled={!celExpression}
+							className="gap-2"
+							type="button"
+						>
+							{copied ? (
+								<>
+									<Check className="h-4 w-4" />
+									Copied
+								</>
+							) : (
+								<>
+									<Copy className="h-4 w-4" />
+									Copy
+								</>
+							)}
+						</Button>
+					</div>
+					<Textarea value={celExpression || "No rules defined yet"} readOnly className="font-mono text-sm" rows={4} />
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/combinatorSelector.tsx b/ui/components/ui/custom/celBuilder/combinatorSelector.tsx
similarity index 100%
rename from ui/app/workspace/routing-rules/components/celBuilder/combinatorSelector.tsx
rename to ui/components/ui/custom/celBuilder/combinatorSelector.tsx
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/fieldSelector.tsx b/ui/components/ui/custom/celBuilder/fieldSelector.tsx
similarity index 100%
rename from ui/app/workspace/routing-rules/components/celBuilder/fieldSelector.tsx
rename to ui/components/ui/custom/celBuilder/fieldSelector.tsx
diff --git a/ui/components/ui/custom/celBuilder/index.ts b/ui/components/ui/custom/celBuilder/index.ts
new file mode 100644
index 0000000000..2c1c9c0b56
--- /dev/null
+++ b/ui/components/ui/custom/celBuilder/index.ts
@@ -0,0 +1,2 @@
+export { CELRuleBuilder } from "./celRuleBuilder";
+export type { CELRuleBuilderProps, CELFieldDefinition, CELOperatorDefinition } from "./celRuleBuilder";
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/operatorSelector.tsx b/ui/components/ui/custom/celBuilder/operatorSelector.tsx
similarity index 100%
rename from ui/app/workspace/routing-rules/components/celBuilder/operatorSelector.tsx
rename to ui/components/ui/custom/celBuilder/operatorSelector.tsx
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/queryBuilderWrapper.tsx b/ui/components/ui/custom/celBuilder/queryBuilderWrapper.tsx
similarity index 100%
rename from ui/app/workspace/routing-rules/components/celBuilder/queryBuilderWrapper.tsx
rename to ui/components/ui/custom/celBuilder/queryBuilderWrapper.tsx
diff --git a/ui/app/workspace/routing-rules/components/celBuilder/valueEditor.tsx b/ui/components/ui/custom/celBuilder/valueEditor.tsx
similarity index 94%
rename from ui/app/workspace/routing-rules/components/celBuilder/valueEditor.tsx
rename to ui/components/ui/custom/celBuilder/valueEditor.tsx
index bc4e4eb3de..249b31be8b 100644
--- a/ui/app/workspace/routing-rules/components/celBuilder/valueEditor.tsx
+++ b/ui/components/ui/custom/celBuilder/valueEditor.tsx
@@ -11,7 +11,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Textarea } from "@/components/ui/textarea";
 import { ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
 import { getProviderLabel } from "@/lib/constants/logs";
-import { validateRegexPattern } from "@/lib/utils/celConverterRouting";
 import { useEffect, useState } from "react";
 import { ValueEditorProps, ValueEditorType } from "react-querybuilder";
 
@@ -21,6 +20,11 @@ export function ValueEditor({ value, handleOnChange, operator, fieldData, type }
 	const isRegexOperator = operator === "matches";
 	const isNullOperator = operator === "null" || operator === "notNull";
 
+	// Get validateRegex from context if provided
+	const validateRegex: ((pattern: string) => string | null) | undefined = context?.validateRegex;
+	const menuPosition: "absolute" | "fixed" | undefined = context?.menuPosition;
+	const menuPortalTarget: HTMLElement | null | undefined = context?.menuPortalTarget;
+
 	// Get valueEditorType, handling both string and function types
 	const valueEditorType =
 		typeof fieldData?.valueEditorType === "function" ? fieldData.valueEditorType(operator) : fieldData?.valueEditorType;
@@ -110,6 +114,8 @@ export function ValueEditor({ value, handleOnChange, operator, fieldData, type }
 					placeholder="Select models..."
 					loadModelsOnEmptyProvider
 					className="!min-h-9 w-[360px]"
+					menuPosition={menuPosition}
+					menuPortalTarget={menuPortalTarget}
 				/>
 			);
 		}
@@ -122,7 +128,9 @@ export function ValueEditor({ value, handleOnChange, operator, fieldData, type }
 				placeholder="Search for a model..."
 				isSingleSelect
 				loadModelsOnEmptyProvider
-				className="border-input w-[360px]"
+				className="w-[360px] border-input"
+				menuPosition={menuPosition}
+				menuPortalTarget={menuPortalTarget}
 			/>
 		);
 	}
@@ -258,7 +266,7 @@ export function ValueEditor({ value, handleOnChange, operator, fieldData, type }
 
 	// Use text input with validation for regex
 	if (isRegexOperator) {
-		const regexError = value ? validateRegexPattern(String(value)) : null;
+		const regexError = validateRegex && value ? validateRegex(String(value)) : null;
 
 		return (
 			<div className="flex flex-col gap-1">
diff --git a/ui/components/ui/modelMultiselect.tsx b/ui/components/ui/modelMultiselect.tsx
index 9552abab62..36b352f7d3 100644
--- a/ui/components/ui/modelMultiselect.tsx
+++ b/ui/components/ui/modelMultiselect.tsx
@@ -26,6 +26,10 @@ interface ModelMultiselectPropsBase {
 	ariaLabelledBy?: string;
 	/** test selector for the container element */
 	"data-testid"?: string;
+	/** Menu position strategy. Use "absolute" inside popovers to avoid portal issues. Defaults to "fixed". */
+	menuPosition?: "absolute" | "fixed";
+	/** Target element for the menu portal. */
+	menuPortalTarget?: HTMLElement | null;
 }
 
 interface ModelMultiselectPropsSingle extends ModelMultiselectPropsBase {
@@ -265,6 +269,8 @@ export function ModelMultiselect(props: ModelMultiselectProps) {
 			isClearable={false}
 			closeMenuOnSelect={isSingleSelect}
 			menuPlacement="auto"
+			menuPosition={props.menuPosition}
+			menuPortalTarget={props.menuPortalTarget}
 			menuListClassName="mx-1"
 			inputValue={inputValue}
 			onInputChange={handleInputChange}
diff --git a/ui/lib/message/constant.ts b/ui/lib/message/constant.ts
index 5803a0658a..fe1185dff4 100644
--- a/ui/lib/message/constant.ts
+++ b/ui/lib/message/constant.ts
@@ -19,7 +19,7 @@ export const JINJA_VAR_REGEX = /\{\{\s*([a-zA-Z_][a-zA-Z0-9_.]*)\s*\}\}/g;
  */
 export const JINJA_VAR_HIGHLIGHT_PATTERNS = [
 	{
-		pattern: /{{.*?}}/g,
+		pattern: /\{\{\s*[a-zA-Z_][a-zA-Z0-9_.]*\s*\}\}/g,
 		className: "outline-content-brand-light text-sm cursor-pointer bg-green-500/20",
 		validate: (part: string) => {
 			return (
diff --git a/ui/lib/message/variables.test.ts b/ui/lib/message/variables.test.ts
index 4212822c53..e6a3df4dea 100644
--- a/ui/lib/message/variables.test.ts
+++ b/ui/lib/message/variables.test.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { Message } from "./message";
 import {
-	extractVariablesFromText,
 	extractVariablesFromMessages,
-	replaceVariablesInText,
-	replaceVariablesInMessages,
+	extractVariablesFromText,
 	mergeVariables,
+	replaceVariablesInMessages,
+	replaceVariablesInText,
 } from "./variables";
 
 // =============================================================================
@@ -122,7 +122,7 @@ describe("extractVariablesFromMessages", () => {
 
 	it("extracts variables from an assistant message", () => {
 		const messages = [Message.response("Hello {{ name }}")];
-		expect(extractVariablesFromMessages(messages)).toEqual(["name"]);
+		expect(extractVariablesFromMessages(messages)).toEqual([]);
 	});
 
 	it("extracts variables across multiple messages", () => {
@@ -180,6 +180,14 @@ describe("replaceVariablesInText", () => {
 		expect(replaceVariablesInText("{{ x }} and {{ x }}", { x: "yes" })).toBe("yes and yes");
 	});
 
+	it("preserves leading curly braces that are not part of variables", () => {
+		expect(replaceVariablesInText("{{{ x }} and {{ x }}", { x: "yes" })).toBe("{yes and yes");
+	});
+
+	it("preserves trailing curly braces that are not part of variables", () => {
+		expect(replaceVariablesInText("{{ x }} and {{ x }}}}", { x: "yes" })).toBe("yes and yes}}");
+	});
+
 	it("leaves variable untouched when not in map", () => {
 		expect(replaceVariablesInText("{{ unknown }}", {})).toBe("{{ unknown }}");
 	});
@@ -352,4 +360,4 @@ describe("mergeVariables", () => {
 		const result = mergeVariables(current, ["name"]);
 		expect(result).toEqual({ name: "" });
 	});
-});
\ No newline at end of file
+});
diff --git a/ui/lib/types/prompts.ts b/ui/lib/types/prompts.ts
index 0458bbcee4..d1fa8295a5 100644
--- a/ui/lib/types/prompts.ts
+++ b/ui/lib/types/prompts.ts
@@ -43,18 +43,19 @@ export interface ModelParams {
 }
 
 export interface PromptVersion {
-	id: number;
-	prompt_id: string;
-	version_number: number;
-	commit_message: string;
-	messages: PromptVersionMessage[];
-	model_params: ModelParams;
-	provider: string;
-	model: string;
-	is_latest: boolean;
-	created_by_id?: number;
-	created_by?: PromptUser;
-	created_at: string; // No updated_at - versions are immutable
+  id: number
+  prompt_id: string
+  version_number: number
+  commit_message: string
+  messages: PromptVersionMessage[]
+  model_params: ModelParams
+  provider: string
+  model: string
+  variables?: Record<string, string>
+  is_latest: boolean
+  created_by_id?: number
+  created_by?: PromptUser
+  created_at: string // No updated_at - versions are immutable
 }
 
 export interface PromptVersionMessage {
@@ -66,20 +67,21 @@ export interface PromptVersionMessage {
 }
 
 export interface PromptSession {
-	id: number;
-	prompt_id: string;
-	prompt?: Prompt;
-	version_id?: number;
-	version?: PromptVersion;
-	name: string;
-	messages: PromptSessionMessage[];
-	model_params: ModelParams;
-	provider: string;
-	model: string;
-	created_by_id?: number;
-	created_by?: PromptUser;
-	created_at: string;
-	updated_at: string;
+  id: number
+  prompt_id: string
+  prompt?: Prompt
+  version_id?: number
+  version?: PromptVersion
+  name: string
+  messages: PromptSessionMessage[]
+  model_params: ModelParams
+  provider: string
+  model: string
+  variables?: Record<string, string>
+  created_by_id?: number
+  created_by?: PromptUser
+  created_at: string
+  updated_at: string
 }
 
 export interface PromptSessionMessage {
@@ -205,12 +207,13 @@ export interface GetSessionResponse {
 }
 
 export interface CreateSessionRequest {
-	name?: string;
-	version_id?: number;
-	messages?: PromptMessage[];
-	model_params: ModelParams;
-	provider: string;
-	model: string;
+  name?: string
+  version_id?: number
+  messages?: PromptMessage[]
+  model_params: ModelParams
+  provider: string
+  model: string
+  variables?: Record<string, string>
 }
 
 export interface CreateSessionResponse {
@@ -218,11 +221,12 @@ export interface CreateSessionResponse {
 }
 
 export interface UpdateSessionRequest {
-	name?: string;
-	messages: PromptMessage[];
-	model_params: ModelParams;
-	provider: string;
-	model: string;
+  name?: string
+  messages: PromptMessage[]
+  model_params: ModelParams
+  provider: string
+  model: string
+  variables?: Record<string, string>
 }
 
 export interface UpdateSessionResponse {