diff --git a/app/package.json b/app/package.json
index 0f360f9993..e83b519daf 100644
--- a/app/package.json
+++ b/app/package.json
@@ -57,7 +57,7 @@
     "three": "~0.139.2",
     "three-stdlib": "^2.30.4",
     "use-deep-compare-effect": "^1.8.1",
-    "use-zustand": "^0.0.4",
+    "use-zustand": "^0.2.0",
     "zod": "^3.23.8",
     "zod-to-json-schema": "^3.23.3",
     "zustand": "^4.5.4"
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 73c661e141..b35da0a4fc 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -165,8 +165,8 @@ importers:
         specifier: ^1.8.1
         version: 1.8.1(react@18.3.1)
       use-zustand:
-        specifier: ^0.0.4
-        version: 0.0.4(react@18.3.1)
+        specifier: ^0.2.0
+        version: 0.2.0(react@18.3.1)
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -4492,10 +4492,10 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  use-zustand@0.0.4:
-    resolution: {integrity: sha512-UkuONsZoniFoDsm5Xp/gEA1579UOn/ZgKbaE48gHhK+pmBx//PX4UlKdrbaWPpUnORnVTd4/0CvI/rv+1tmn4g==}
+  use-zustand@0.2.0:
+    resolution: {integrity: sha512-6BPw170RLVGe57ifpuKOS1j7VbufYX3xHByNaqmLzQYPnhWjzF+lEfmESnaVLCWyOzH6kVDIeVF3kEPsFd9pvw==}
     peerDependencies:
-      react: '*'
+      react: '>=18.0.0'
 
   util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
@@ -10232,7 +10232,7 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  use-zustand@0.0.4(react@18.3.1):
+  use-zustand@0.2.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
diff --git a/app/src/components/templateEditor/TemplateEditor.tsx b/app/src/components/templateEditor/TemplateEditor.tsx
index 4bb1111ad4..f506e49334 100644
--- a/app/src/components/templateEditor/TemplateEditor.tsx
+++ b/app/src/components/templateEditor/TemplateEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { githubLight } from "@uiw/codemirror-theme-github";
 import { nord } from "@uiw/codemirror-theme-nord";
 import CodeMirror, {
@@ -16,8 +16,9 @@ import { MustacheLikeTemplating } from "./language/mustacheLike";
 import { TemplateLanguages } from "./constants";
 import { TemplateLanguage } from "./types";
 
-type TemplateEditorProps = ReactCodeMirrorProps & {
+type TemplateEditorProps = Omit<ReactCodeMirrorProps, "value"> & {
   templateLanguage: TemplateLanguage;
+  defaultValue: string;
 };
 
 const basicSetupOptions: BasicSetupOptions = {
@@ -28,10 +29,22 @@ const basicSetupOptions: BasicSetupOptions = {
   bracketMatching: false,
 };
 
+/**
+ * A template editor that is used to edit the template of a tool.
+ *
+ * This is an uncontrolled editor.
+ * You can only reset the value of the editor by triggering a re-mount, like with the `key` prop,
+ * or, when the readOnly prop is true, the editor will reset on all value changes.
+ * This is necessary because controlled react-codemirror editors incessantly reset
+ * cursor position when value is updated.
+ */
 export const TemplateEditor = ({
   templateLanguage,
+  defaultValue,
+  readOnly,
   ...props
 }: TemplateEditorProps) => {
+  const [value, setValue] = useState(() => defaultValue);
   const { theme } = useTheme();
   const codeMirrorTheme = theme === "light" ? githubLight : nord;
   const extensions = useMemo(() => {
@@ -51,12 +64,20 @@ export const TemplateEditor = ({
     return ext;
   }, [templateLanguage]);
 
+  useEffect(() => {
+    if (readOnly) {
+      setValue(defaultValue);
+    }
+  }, [readOnly, defaultValue]);
+
   return (
     <CodeMirror
       theme={codeMirrorTheme}
       extensions={extensions}
       basicSetup={basicSetupOptions}
+      readOnly={readOnly}
       {...props}
+      value={value}
     />
   );
 };
diff --git a/app/src/pages/playground/ChatMessageToolCallsEditor.tsx b/app/src/pages/playground/ChatMessageToolCallsEditor.tsx
index 237c6995ef..bb524b54ca 100644
--- a/app/src/pages/playground/ChatMessageToolCallsEditor.tsx
+++ b/app/src/pages/playground/ChatMessageToolCallsEditor.tsx
@@ -8,32 +8,40 @@ import {
   llmProviderToolCallsSchema,
   openAIToolCallsJSONSchema,
 } from "@phoenix/schemas/toolCallSchemas";
-import { ChatMessage } from "@phoenix/store";
+import {
+  selectPlaygroundInstance,
+  selectPlaygroundInstanceMessage,
+} from "@phoenix/store/playground/selectors";
 import { safelyParseJSON } from "@phoenix/utils/jsonUtils";
 
-import { PlaygroundInstanceProps } from "./types";
-
 /**
  * Editor for message tool calls
  */
 export function ChatMessageToolCallsEditor({
   playgroundInstanceId,
-  toolCalls,
-  templateMessages,
   messageId,
-}: PlaygroundInstanceProps & {
-  toolCalls: ChatMessage["toolCalls"];
-  templateMessages: ChatMessage[];
+}: {
+  playgroundInstanceId: number;
   messageId: number;
 }) {
-  const updateInstance = usePlaygroundContext((state) => state.updateInstance);
-  const instance = usePlaygroundContext((state) =>
-    state.instances.find((instance) => instance.id === playgroundInstanceId)
+  const instanceSelector = useMemo(
+    () => selectPlaygroundInstance(playgroundInstanceId),
+    [playgroundInstanceId]
   );
-
+  const instance = usePlaygroundContext(instanceSelector);
   if (instance == null) {
-    throw new Error(`Playground instance ${playgroundInstanceId} not found`);
+    throw new Error(`Instance ${playgroundInstanceId} not found`);
+  }
+  const messageSelector = useMemo(
+    () => selectPlaygroundInstanceMessage(messageId),
+    [messageId]
+  );
+  const message = usePlaygroundContext(messageSelector);
+  if (message == null) {
+    throw new Error(`Message ${messageId} not found`);
   }
+  const toolCalls = message.toolCalls;
+  const updateMessage = usePlaygroundContext((state) => state.updateMessage);
   const [editorValue, setEditorValue] = useState(() =>
     JSON.stringify(toolCalls, null, 2)
   );
@@ -64,25 +72,15 @@ export function ChatMessageToolCallsEditor({
         return;
       }
       setLastValidToolCalls(toolCalls);
-      updateInstance({
+      updateMessage({
         instanceId: playgroundInstanceId,
+        messageId,
         patch: {
-          template: {
-            __type: "chat",
-            messages: templateMessages.map((m) =>
-              messageId === m.id
-                ? {
-                    ...m,
-                    toolCalls,
-                  }
-                : m
-            ),
-          },
+          toolCalls,
         },
-        dirty: true,
       });
     },
-    [messageId, playgroundInstanceId, templateMessages, updateInstance]
+    [playgroundInstanceId, messageId, updateMessage]
   );
 
   const toolCallsJSONSchema = useMemo((): JSONSchema7 | null => {
diff --git a/app/src/pages/playground/ModelConfigButton.tsx b/app/src/pages/playground/ModelConfigButton.tsx
index 9d0a6ca01b..465bc2e85a 100644
--- a/app/src/pages/playground/ModelConfigButton.tsx
+++ b/app/src/pages/playground/ModelConfigButton.tsx
@@ -31,7 +31,10 @@ import {
 import { useNotifySuccess } from "@phoenix/contexts";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
-import { PlaygroundInstance } from "@phoenix/store";
+import {
+  PlaygroundInstance,
+  PlaygroundNormalizedInstance,
+} from "@phoenix/store";
 
 import { ModelConfigButtonDialogQuery } from "./__generated__/ModelConfigButtonDialogQuery.graphql";
 import { InvocationParametersFormFields } from "./InvocationParametersFormFields";
@@ -67,7 +70,7 @@ const modelConfigFormCSS = css`
 function AzureOpenAiModelConfigFormField({
   instance,
 }: {
-  instance: PlaygroundInstance;
+  instance: PlaygroundNormalizedInstance;
 }) {
   const updateModel = usePlaygroundContext((state) => state.updateModel);
   const updateModelConfig = useCallback(
diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
index 8491de15b9..a9488e22f9 100644
--- a/app/src/pages/playground/Playground.tsx
+++ b/app/src/pages/playground/Playground.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useEffect } from "react";
+import React, { Fragment, Suspense, useCallback, useEffect } from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { BlockerFunction, useBlocker, useSearchParams } from "react-router-dom";
@@ -205,6 +205,9 @@ const playgroundInputOutputPanelContentCSS = css`
  */
 const PLAYGROUND_PROMPT_PANEL_MIN_WIDTH = 632;
 
+const DEFAULT_EXPANDED_PROMPTS = ["prompts"];
+const DEFAULT_EXPANDED_PARAMS = ["input", "output"];
+
 function PlaygroundContent() {
   const instances = usePlaygroundContext((state) => state.instances);
   const templateLanguage = usePlaygroundContext(
@@ -246,7 +249,7 @@ function PlaygroundContent() {
   }, [isRunning, anyDirtyInstances]);
 
   return (
-    <>
+    <Fragment key="playground-content">
       <PanelGroup
         direction={
           isSingleInstance && !isDatasetMode ? "horizontal" : "vertical"
@@ -257,7 +260,7 @@ function PlaygroundContent() {
       >
         <Panel>
           <div css={playgroundPromptPanelContentCSS}>
-            <DisclosureGroup defaultExpandedKeys={["prompts"]}>
+            <DisclosureGroup defaultExpandedKeys={DEFAULT_EXPANDED_PROMPTS}>
               <Disclosure id="prompts" size="L">
                 <DisclosureTrigger
                   arrowPosition="start"
@@ -277,11 +280,10 @@ function PlaygroundContent() {
                       {instances.map((instance) => (
                         <View
                           flex="1 1 0px"
-                          key={instance.id}
+                          key={`${instance.id}-prompt`}
                           minWidth={PLAYGROUND_PROMPT_PANEL_MIN_WIDTH}
                         >
                           <PlaygroundTemplate
-                            key={instance.id}
                             playgroundInstanceId={instance.id}
                           />
                         </View>
@@ -301,7 +303,7 @@ function PlaygroundContent() {
             </Suspense>
           ) : (
             <div css={playgroundInputOutputPanelContentCSS}>
-              <DisclosureGroup defaultExpandedKeys={["input", "output"]}>
+              <DisclosureGroup defaultExpandedKeys={DEFAULT_EXPANDED_PARAMS}>
                 {templateLanguage !== TemplateLanguages.NONE ? (
                   <Disclosure id="input" size="L">
                     <DisclosureTrigger arrowPosition="start">
@@ -321,10 +323,9 @@ function PlaygroundContent() {
                   <DisclosurePanel>
                     <View padding="size-200" height="100%">
                       <Flex direction="row" gap="size-200">
-                        {instances.map((instance, i) => (
-                          <View key={i} flex="1 1 0px">
+                        {instances.map((instance) => (
+                          <View key={`${instance.id}-output`} flex="1 1 0px">
                             <PlaygroundOutput
-                              key={i}
                               playgroundInstanceId={instance.id}
                             />
                           </View>
@@ -348,6 +349,6 @@ function PlaygroundContent() {
           }
         />
       )}
-    </>
+    </Fragment>
   );
 }
diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
index c16b168372..b71e32a575 100644
--- a/app/src/pages/playground/PlaygroundChatTemplate.tsx
+++ b/app/src/pages/playground/PlaygroundChatTemplate.tsx
@@ -1,4 +1,9 @@
-import React, { PropsWithChildren, useCallback, useState } from "react";
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import {
   DndContext,
   KeyboardSensor,
@@ -35,12 +40,12 @@ import {
 import { TemplateLanguage } from "@phoenix/components/templateEditor/types";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import { useChatMessageStyles } from "@phoenix/hooks/useChatMessageStyles";
-import {
-  ChatMessage,
-  PlaygroundChatTemplate as PlaygroundChatTemplateType,
-  PlaygroundInstance,
-} from "@phoenix/store";
+import { ChatMessage, PlaygroundState } from "@phoenix/store";
 import { convertMessageToolCallsToProvider } from "@phoenix/store/playground/playgroundStoreUtils";
+import {
+  selectPlaygroundInstance,
+  selectPlaygroundInstanceMessage,
+} from "@phoenix/store/playground/selectors";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { safelyParseJSON } from "@phoenix/utils/jsonUtils";
 
@@ -81,10 +86,9 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
   const templateLanguage = usePlaygroundContext(
     (state) => state.templateLanguage
   );
-  const instances = usePlaygroundContext((state) => state.instances);
   const updateInstance = usePlaygroundContext((state) => state.updateInstance);
-
-  const playgroundInstance = instances.find((instance) => instance.id === id);
+  const instanceSelector = useMemo(() => selectPlaygroundInstance(id), [id]);
+  const playgroundInstance = usePlaygroundContext(instanceSelector);
   if (!playgroundInstance) {
     throw new Error(`Playground instance ${id} not found`);
   }
@@ -102,6 +106,8 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
     throw new Error(`Invalid template type ${template.__type}`);
   }
 
+  const messageIds = template.messageIds;
+
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -116,30 +122,26 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
         if (!over || active.id === over.id) {
           return;
         }
-        const activeIndex = template.messages.findIndex(
-          (message) => message.id === active.id
-        );
-        const overIndex = template.messages.findIndex(
-          (message) => message.id === over.id
+        const activeIndex = messageIds.findIndex(
+          (messageId) => messageId === active.id
         );
-        const newMessages = arrayMove(
-          template.messages,
-          activeIndex,
-          overIndex
+        const overIndex = messageIds.findIndex(
+          (messageId) => messageId === over.id
         );
+        const newMessageIds = arrayMove(messageIds, activeIndex, overIndex);
         updateInstance({
           instanceId: id,
           patch: {
             template: {
               __type: "chat",
-              messages: newMessages,
+              messageIds: newMessageIds,
             },
           },
           dirty: true,
         });
       }}
     >
-      <SortableContext items={template.messages}>
+      <SortableContext items={messageIds}>
         <ul
           css={css`
             display: flex;
@@ -148,16 +150,13 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
             padding: var(--ac-global-dimension-size-200);
           `}
         >
-          {template.messages.map((message, index) => {
+          {messageIds.map((messageId) => {
             return (
               <SortableMessageItem
                 playgroundInstanceId={id}
-                instance={playgroundInstance}
                 templateLanguage={templateLanguage}
-                template={template}
-                key={message.id}
-                message={message}
-                index={index}
+                key={messageId}
+                messageId={messageId}
               />
             );
           })}
@@ -192,16 +191,20 @@ function MessageEditor({
   updateMessage,
   templateLanguage,
   playgroundInstanceId,
-  template,
   messageMode,
 }: {
   playgroundInstanceId: number;
   message: ChatMessage;
-  template: PlaygroundChatTemplateType;
   templateLanguage: TemplateLanguage;
   updateMessage: (patch: Partial<ChatMessage>) => void;
   messageMode: MessageMode;
 }) {
+  const onChange = useCallback(
+    (val: string) => {
+      updateMessage({ content: val });
+    },
+    [updateMessage]
+  );
   if (messageMode === "toolCalls") {
     return (
       <View
@@ -214,8 +217,6 @@ function MessageEditor({
           <CodeWrap width={"100%"}>
             <ChatMessageToolCallsEditor
               playgroundInstanceId={playgroundInstanceId}
-              toolCalls={message.toolCalls}
-              templateMessages={template.messages}
               messageId={message.id}
             />
           </CodeWrap>
@@ -267,18 +268,15 @@ function MessageEditor({
       </Form>
     );
   }
+
   return (
     <TemplateEditorWrap>
       <TemplateEditor
         height="100%"
-        value={
-          typeof message.content === "string"
-            ? message.content
-            : JSON.stringify(message.content, null, 2)
-        }
+        defaultValue={message.content || ""}
         aria-label="Message content"
         templateLanguage={templateLanguage}
-        onChange={(val) => updateMessage({ content: val })}
+        onChange={onChange}
         placeholder={
           message.role === "system"
             ? "You are a helpful assistant"
@@ -294,19 +292,14 @@ function MessageEditor({
 function SortableMessageItem({
   playgroundInstanceId,
   templateLanguage,
-  template,
-  message,
-  instance,
-}: PropsWithChildren<
-  PlaygroundInstanceProps & {
-    template: PlaygroundChatTemplateType;
-    message: ChatMessage;
-    templateLanguage: TemplateLanguage;
-    index: number;
-    instance: PlaygroundInstance;
-  }
->) {
-  const updateInstance = usePlaygroundContext((state) => state.updateInstance);
+  messageId,
+}: PropsWithChildren<{
+  playgroundInstanceId: number;
+  messageId: number;
+  templateLanguage: TemplateLanguage;
+}>) {
+  const updateMessage = usePlaygroundContext((state) => state.updateMessage);
+  const deleteMessage = usePlaygroundContext((state) => state.deleteMessage);
   const {
     attributes,
     listeners,
@@ -316,9 +309,25 @@ function SortableMessageItem({
     setActivatorNodeRef,
     isDragging,
   } = useSortable({
-    id: message.id,
+    id: messageId,
   });
-
+  const instanceModelSelector = useMemo(
+    () => (state: PlaygroundState) =>
+      state.instances.find((instance) => instance.id === playgroundInstanceId)
+        ?.model,
+    [playgroundInstanceId]
+  );
+  const instanceModel = usePlaygroundContext(instanceModelSelector);
+  if (!instanceModel) {
+    throw new Error(
+      `Instance model not found for instance ${playgroundInstanceId}`
+    );
+  }
+  const messageSelector = useMemo(
+    () => selectPlaygroundInstanceMessage(messageId),
+    [messageId]
+  );
+  const message = usePlaygroundContext(messageSelector);
   const messageCardStyles = useChatMessageStyles(message.role);
   const dragAndDropLiStyles = {
     transform: CSS.Translate.toString(transform),
@@ -332,24 +341,6 @@ function SortableMessageItem({
     hasTools ? "toolCalls" : "text"
   );
 
-  const updateMessage = useCallback(
-    (patch: Partial<ChatMessage>) => {
-      updateInstance({
-        instanceId: playgroundInstanceId,
-        patch: {
-          template: {
-            __type: "chat",
-            messages: template.messages.map((msg) =>
-              msg.id === message.id ? { ...msg, ...patch } : msg
-            ),
-          },
-        },
-        dirty: true,
-      });
-    },
-    [message.id, playgroundInstanceId, template.messages, updateInstance]
-  );
-
   // Preserves the content of the message before switching message modes
   // Enables the user to switch back to text mode and restore the previous content
   const [previousMessageContent, setPreviousMessageContent] = useState<
@@ -361,6 +352,17 @@ function SortableMessageItem({
     ChatMessage["toolCalls"]
   >(message.toolCalls);
 
+  const onMessageUpdate = useCallback(
+    (patch: Partial<ChatMessage>) => {
+      updateMessage({
+        instanceId: playgroundInstanceId,
+        messageId,
+        patch,
+      });
+    },
+    [playgroundInstanceId, messageId, updateMessage]
+  );
+
   return (
     <li ref={setNodeRef} style={dragAndDropLiStyles}>
       <Card
@@ -386,19 +388,13 @@ function SortableMessageItem({
                   toolCalls = undefined;
                   setAIMessageMode("text");
                 }
-                updateInstance({
+                updateMessage({
                   instanceId: playgroundInstanceId,
+                  messageId,
                   patch: {
-                    template: {
-                      __type: "chat",
-                      messages: template.messages.map((msg) =>
-                        msg.id === message.id
-                          ? { ...msg, role, toolCalls }
-                          : msg
-                      ),
-                    },
+                    role,
+                    toolCalls,
                   },
-                  dirty: true,
                 });
               }}
             />
@@ -417,25 +413,33 @@ function SortableMessageItem({
                       case "text":
                         setPreviousMessageToolCalls(message.toolCalls);
                         updateMessage({
-                          content: previousMessageContent,
-                          toolCalls: undefined,
+                          instanceId: playgroundInstanceId,
+                          messageId,
+                          patch: {
+                            content: previousMessageContent,
+                            toolCalls: undefined,
+                          },
                         });
                         break;
                       case "toolCalls":
                         setPreviousMessageContent(message.content);
                         updateMessage({
-                          content: "",
-                          toolCalls:
-                            previousMessageToolCalls != null
-                              ? convertMessageToolCallsToProvider({
-                                  toolCalls: previousMessageToolCalls,
-                                  provider: instance.model.provider,
-                                })
-                              : [
-                                  createToolCallForProvider(
-                                    instance.model.provider
-                                  ),
-                                ],
+                          instanceId: playgroundInstanceId,
+                          messageId,
+                          patch: {
+                            content: "",
+                            toolCalls:
+                              previousMessageToolCalls != null
+                                ? convertMessageToolCallsToProvider({
+                                    toolCalls: previousMessageToolCalls,
+                                    provider: instanceModel.provider,
+                                  })
+                                : [
+                                    createToolCallForProvider(
+                                      instanceModel.provider
+                                    ),
+                                  ],
+                          },
                         });
                         break;
                       default:
@@ -457,17 +461,9 @@ function SortableMessageItem({
               icon={<Icon svg={<Icons.TrashOutline />} />}
               size="S"
               onPress={() => {
-                updateInstance({
+                deleteMessage({
                   instanceId: playgroundInstanceId,
-                  patch: {
-                    template: {
-                      __type: "chat",
-                      messages: template.messages.filter(
-                        (msg) => msg.id !== message.id
-                      ),
-                    },
-                  },
-                  dirty: true,
+                  messageId,
                 });
               }}
             />
@@ -484,9 +480,8 @@ function SortableMessageItem({
             message={message}
             messageMode={aiMessageMode}
             playgroundInstanceId={playgroundInstanceId}
-            template={template}
             templateLanguage={templateLanguage}
-            updateMessage={updateMessage}
+            updateMessage={onMessageUpdate}
           />
         </div>
       </Card>
diff --git a/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx b/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
index 589b5eacf3..140554094a 100644
--- a/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
+++ b/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
@@ -32,6 +32,7 @@ export function PlaygroundChatTemplateFooter({
 }: PlaygroundChatTemplateFooterProps) {
   const instances = usePlaygroundContext((state) => state.instances);
   const updateInstance = usePlaygroundContext((state) => state.updateInstance);
+  const addMessage = usePlaygroundContext((state) => state.addMessage);
   const upsertInvocationParameterInput = usePlaygroundContext(
     (state) => state.upsertInvocationParameterInput
   );
@@ -129,22 +130,15 @@ export function PlaygroundChatTemplateFooter({
         size="S"
         icon={<Icon svg={<Icons.PlusOutline />} />}
         onPress={() => {
-          updateInstance({
-            instanceId,
-            patch: {
-              template: {
-                __type: "chat",
-                messages: [
-                  ...template.messages,
-                  {
-                    id: generateMessageId(),
-                    role: "user",
-                    content: "",
-                  },
-                ],
+          addMessage({
+            playgroundInstanceId: instanceId,
+            messages: [
+              {
+                id: generateMessageId(),
+                role: "user",
+                content: "",
               },
-            },
-            dirty: true,
+            ],
           });
         }}
       >
diff --git a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
index 5657b42896..107fc3bd83 100644
--- a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
+++ b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
@@ -79,6 +79,7 @@ import {
   PlaygroundToolCall,
 } from "./PlaygroundToolCall";
 import {
+  denormalizePlaygroundInstance,
   extractVariablesFromInstance,
   getChatCompletionOverDatasetInput,
 } from "./playgroundUtils";
@@ -417,6 +418,9 @@ export function PlaygroundDatasetExamplesTable({
 }) {
   const environment = useRelayEnvironment();
   const instances = usePlaygroundContext((state) => state.instances);
+  const allInstanceMessages = usePlaygroundContext(
+    (state) => state.allInstanceMessages
+  );
   const templateLanguage = usePlaygroundContext(
     (state) => state.templateLanguage
   );
@@ -756,8 +760,12 @@ export function PlaygroundDatasetExamplesTable({
 
   const playgroundInstanceOutputColumns = useMemo((): ColumnDef<TableRow>[] => {
     return instances.map((instance, index) => {
-      const instanceVariables = extractVariablesFromInstance({
+      const enrichedInstance = denormalizePlaygroundInstance(
         instance,
+        allInstanceMessages
+      );
+      const instanceVariables = extractVariablesFromInstance({
+        instance: enrichedInstance,
         templateLanguage,
       });
       return {
@@ -784,7 +792,7 @@ export function PlaygroundDatasetExamplesTable({
         size: 500,
       };
     });
-  }, [hasSomeRunIds, instances, templateLanguage]);
+  }, [hasSomeRunIds, instances, templateLanguage, allInstanceMessages]);
 
   const columns: ColumnDef<TableRow>[] = [
     {
diff --git a/app/src/pages/playground/PlaygroundInput.tsx b/app/src/pages/playground/PlaygroundInput.tsx
index 167a42abbb..cbb68db9a6 100644
--- a/app/src/pages/playground/PlaygroundInput.tsx
+++ b/app/src/pages/playground/PlaygroundInput.tsx
@@ -56,7 +56,7 @@ export function PlaygroundInput() {
             // change rapidly for a given variable
             key={i}
             label={variableKey}
-            value={variablesMap[variableKey]}
+            defaultValue={variablesMap[variableKey] ?? ""}
             onChange={(value) => setVariableValue(variableKey, value)}
           />
         );
diff --git a/app/src/pages/playground/PlaygroundOutputMoveButton.tsx b/app/src/pages/playground/PlaygroundOutputMoveButton.tsx
index 160b0fcb64..1bee24947f 100644
--- a/app/src/pages/playground/PlaygroundOutputMoveButton.tsx
+++ b/app/src/pages/playground/PlaygroundOutputMoveButton.tsx
@@ -7,7 +7,7 @@ import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import {
   ChatMessage,
   generateMessageId,
-  PlaygroundInstance,
+  PlaygroundNormalizedInstance,
 } from "@phoenix/store";
 import { convertMessageToolCallsToProvider } from "@phoenix/store/playground/playgroundStoreUtils";
 import { safelyParseJSON } from "@phoenix/utils/jsonUtils";
@@ -21,13 +21,13 @@ export const PlaygroundOutputMoveButton = ({
   toolCalls,
   cleanupOutput,
 }: {
-  instance: PlaygroundInstance;
+  instance: PlaygroundNormalizedInstance;
   outputContent?: string | ChatMessage[];
   toolCalls: PartialOutputToolCall[];
   cleanupOutput: () => void;
 }) => {
   const instanceId = instance.id;
-  const updateInstance = usePlaygroundContext((state) => state.updateInstance);
+  const addMessage = usePlaygroundContext((state) => state.addMessage);
   return (
     <TooltipTrigger delay={500} offset={10}>
       <Button
@@ -67,15 +67,9 @@ export const PlaygroundOutputMoveButton = ({
               }),
             });
           }
-          updateInstance({
-            instanceId,
-            patch: {
-              template: {
-                __type: "chat",
-                messages: [...instance.template.messages, ...messages],
-              },
-            },
-            dirty: true,
+          addMessage({
+            playgroundInstanceId: instanceId,
+            messages,
           });
           cleanupOutput();
         }}
diff --git a/app/src/pages/playground/PlaygroundTemplate.tsx b/app/src/pages/playground/PlaygroundTemplate.tsx
index a8f82d4ae2..b61d13a929 100644
--- a/app/src/pages/playground/PlaygroundTemplate.tsx
+++ b/app/src/pages/playground/PlaygroundTemplate.tsx
@@ -27,6 +27,7 @@ export function PlaygroundTemplate(props: PlaygroundTemplateProps) {
   const [dialog, setDialog] = useState<React.ReactNode>(null);
   const instanceId = props.playgroundInstanceId;
   const updateInstance = usePlaygroundContext((state) => state.updateInstance);
+  const addMessage = usePlaygroundContext((state) => state.addMessage);
   const instances = usePlaygroundContext((state) => state.instances);
   const instance = instances.find((instance) => instance.id === instanceId);
   const index = instances.findIndex((instance) => instance.id === instanceId);
@@ -44,16 +45,26 @@ export function PlaygroundTemplate(props: PlaygroundTemplateProps) {
 
       const response = await fetchPlaygroundPromptAsInstance(promptId);
       if (response) {
+        // delete all message references from the instance
         updateInstance({
           instanceId,
           patch: {
             ...response.instance,
+            template: {
+              __type: "chat",
+              messageIds: [],
+            },
           },
           dirty: false,
         });
+        // normalize messages and add their references to the instance
+        addMessage({
+          playgroundInstanceId: instanceId,
+          messages: response.instance.template.messages,
+        });
       }
     },
-    [instanceId, updateInstance]
+    [instanceId, updateInstance, addMessage]
   );
 
   if (!instance) {
diff --git a/app/src/pages/playground/PlaygroundTool.tsx b/app/src/pages/playground/PlaygroundTool.tsx
index a5490d26fe..e8efd17b8e 100644
--- a/app/src/pages/playground/PlaygroundTool.tsx
+++ b/app/src/pages/playground/PlaygroundTool.tsx
@@ -32,12 +32,20 @@ import { PlaygroundInstanceProps } from "./types";
  */
 const TOOL_EDITOR_PRE_INIT_HEIGHT = 400;
 
+/**
+ * A tool editor that is used to edit the definition of a tool.
+ *
+ * This is a mostly un-controlled editor that re-mounts when the tool definition changes externally.
+ * This is necessary because controlled react-codemirror editors incessantly remount and reset
+ * cursor position when value is updated.
+ */
 export function PlaygroundTool({
   playgroundInstanceId,
   toolId,
 }: PlaygroundInstanceProps & {
   toolId: Tool["id"];
 }) {
+  const [version, setVersion] = useState(0);
   const updateInstance = usePlaygroundContext((state) => state.updateInstance);
 
   const instance = usePlaygroundContext((state) =>
@@ -56,7 +64,7 @@ export function PlaygroundTool({
     throw new Error(`Tool ${toolId} not found`);
   }
 
-  const [editorValue, setEditorValue] = useState(
+  const [initialEditorValue, setEditorValue] = useState(
     JSON.stringify(tool.definition, null, 2)
   );
 
@@ -71,12 +79,15 @@ export function PlaygroundTool({
     ) {
       setLastValidDefinition(tool.definition);
       setEditorValue(JSON.stringify(tool.definition, null, 2));
+      setVersion((prev) => prev + 1);
     }
   }, [tool.definition, lastValidDefinition]);
 
   const onChange = useCallback(
     (value: string) => {
-      setEditorValue(value);
+      // note that we do not update initialEditorValue here, we only want to update it when
+      // we are okay with the editor state resetting, which is basically only when the provider
+      // changes
       const { json: definition } = safelyParseJSON(value);
       if (definition == null) {
         return;
@@ -141,7 +152,7 @@ export function PlaygroundTool({
       bodyStyle={{ padding: 0 }}
       extra={
         <Flex direction="row" gap="size-100">
-          <CopyToClipboardButton text={editorValue} />
+          <CopyToClipboardButton text={initialEditorValue} />
           <Button
             aria-label="Delete tool"
             icon={<Icon svg={<Icons.TrashOutline />} />}
@@ -177,7 +188,10 @@ export function PlaygroundTool({
         preInitializationMinHeight={TOOL_EDITOR_PRE_INIT_HEIGHT}
       >
         <JSONEditor
-          value={editorValue}
+          // force remount of the editor when the tool definition changes externally
+          // usually when switching between providers
+          key={version}
+          value={initialEditorValue}
           onChange={onChange}
           jsonSchema={toolDefinitionJSONSchema}
         />
diff --git a/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx b/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx
index 951a2ea228..95887be63c 100644
--- a/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx
+++ b/app/src/pages/playground/UpsertPromptFromTemplateDialog.tsx
@@ -10,6 +10,7 @@ import { usePlaygroundStore } from "@phoenix/contexts/PlaygroundContext";
 import { UpsertPromptFromTemplateDialogCreateMutation } from "@phoenix/pages/playground/__generated__/UpsertPromptFromTemplateDialogCreateMutation.graphql";
 import { UpsertPromptFromTemplateDialogUpdateMutation } from "@phoenix/pages/playground/__generated__/UpsertPromptFromTemplateDialogUpdateMutation.graphql";
 import { instanceToPromptVersion } from "@phoenix/pages/playground/fetchPlaygroundPrompt";
+import { denormalizePlaygroundInstance } from "@phoenix/pages/playground/playgroundUtils";
 import {
   SavePromptForm,
   SavePromptSubmitHandler,
@@ -27,13 +28,18 @@ const getInstancePromptParamsFromStore = (
   store: ReturnType<typeof usePlaygroundStore>
 ) => {
   const state = store.getState();
+  const allInstanceMessages = state.allInstanceMessages;
   const instance = state.instances.find(
     (instance) => instance.id === instanceId
   );
   if (!instance) {
     throw new Error(`Instance ${instanceId} not found`);
   }
-  const promptInput = instanceToPromptVersion(instance);
+  const enrichedInstance = denormalizePlaygroundInstance(
+    instance,
+    allInstanceMessages
+  );
+  const promptInput = instanceToPromptVersion(enrichedInstance);
   if (!promptInput) {
     throw new Error(`Could not convert instance ${instanceId} to prompt`);
   }
diff --git a/app/src/pages/playground/VariableEditor.tsx b/app/src/pages/playground/VariableEditor.tsx
index 17b9b93b9f..3be7d8af96 100644
--- a/app/src/pages/playground/VariableEditor.tsx
+++ b/app/src/pages/playground/VariableEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { githubLight } from "@uiw/codemirror-theme-github";
 import { nord } from "@uiw/codemirror-theme-nord";
 import ReactCodeMirror, {
@@ -13,7 +13,7 @@ import { useTheme } from "@phoenix/contexts";
 
 type VariableEditorProps = {
   label?: string;
-  value?: string;
+  defaultValue: string;
   onChange?: (value: string) => void;
 };
 
@@ -28,20 +28,43 @@ const basicSetupOptions: BasicSetupOptions = {
 
 const extensions = [EditorView.lineWrapping];
 
+/**
+ * A mostly uncontrolled editor that re-mounts when the label changes.
+ *
+ * The re-mount ensures that value is reset to the initial value when the label (variable name) changes.
+ *
+ * This is necessary because controlled react-codemirror editors incessantly remount and reset
+ * cursor position when value is updated.
+ */
 export const VariableEditor = ({
   label,
-  value,
+  defaultValue,
   onChange,
 }: VariableEditorProps) => {
   const { theme } = useTheme();
+  const valueRef = useRef(defaultValue);
+  const [version, setVersion] = useState(0);
+  const [initialValue, setInitialValue] = useState(() => defaultValue);
+  useEffect(() => {
+    if (defaultValue == null) {
+      setInitialValue("");
+      setVersion((prev) => prev + 1);
+    }
+    valueRef.current = defaultValue;
+  }, [defaultValue]);
+  useEffect(() => {
+    setInitialValue(valueRef.current);
+    setVersion((prev) => prev + 1);
+  }, [label]);
   const codeMirrorTheme = theme === "light" ? githubLight : nord;
   return (
     <Field label={label}>
       <CodeWrap width="100%">
         <ReactCodeMirror
+          key={version}
           theme={codeMirrorTheme}
           basicSetup={basicSetupOptions}
-          value={value}
+          value={initialValue}
           extensions={extensions}
           onChange={onChange}
         />
diff --git a/app/src/pages/playground/playgroundUtils.ts b/app/src/pages/playground/playgroundUtils.ts
index 99af6a1eb0..6cbd6b569b 100644
--- a/app/src/pages/playground/playgroundUtils.ts
+++ b/app/src/pages/playground/playgroundUtils.ts
@@ -19,13 +19,14 @@ import {
 import { safelyConvertToolChoiceToProvider } from "@phoenix/schemas/toolChoiceSchemas";
 import {
   ChatMessage,
-  createPlaygroundInstance,
+  createNormalizedPlaygroundInstance,
   CredentialsState,
   generateMessageId,
   generateToolId,
   ModelConfig,
   PlaygroundInput,
   PlaygroundInstance,
+  PlaygroundNormalizedInstance,
   PlaygroundStore,
   Tool,
 } from "@phoenix/store";
@@ -516,7 +517,14 @@ export function transformSpanAttributesToPlaygroundInstance(
   parsingErrors: string[];
   playgroundInput?: PlaygroundInput;
 } {
-  const basePlaygroundInstance = createPlaygroundInstance();
+  const { instance, instanceMessages } = createNormalizedPlaygroundInstance();
+  const basePlaygroundInstance: PlaygroundInstance = {
+    ...instance,
+    template: {
+      __type: "chat",
+      messages: Object.values(instanceMessages),
+    },
+  };
   const { json: parsedAttributes, parseError } = safelyParseJSON(
     span.attributes
   );
@@ -907,7 +915,7 @@ const getBaseChatCompletionInput = ({
   credentials: CredentialsState;
 }) => {
   // We pull directly from the store in this function so that it always has up to date values at the time of calling
-  const { instances } = playgroundStore.getState();
+  const { instances, allInstanceMessages } = playgroundStore.getState();
   const instance = instances.find((instance) => {
     return instance.id === instanceId;
   });
@@ -919,6 +927,12 @@ const getBaseChatCompletionInput = ({
     throw new Error("We only support chat templates for now");
   }
 
+  const instanceMessages = instance.template.messageIds
+    .map((messageId) => {
+      return allInstanceMessages[messageId];
+    })
+    .filter((message) => message != null);
+
   const supportedInvocationParameters =
     instance.model.supportedInvocationParameters;
 
@@ -969,7 +983,7 @@ const getBaseChatCompletionInput = ({
       : {};
 
   return {
-    messages: instance.template.messages.map(toGqlChatCompletionMessage),
+    messages: instanceMessages.map(toGqlChatCompletionMessage),
     model: {
       providerKey: instance.model.provider,
       name: instance.model.modelName || "",
@@ -983,6 +997,33 @@ const getBaseChatCompletionInput = ({
   } as const;
 };
 
+/**
+ * Denormalize a playground instance with the actual messages
+ *
+ * A playground instance differs from a playground normalized instance in that it contains the actual messages
+ * and not just the messageIds. This function will replace the messageIds with the actual messages.
+ */
+export const denormalizePlaygroundInstance = (
+  instance: PlaygroundNormalizedInstance,
+  allInstanceMessages: Record<number, ChatMessage>
+): PlaygroundInstance => {
+  if (instance.template.__type === "chat") {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { messageIds: _, ...rest } = instance.template;
+    return {
+      ...instance,
+      template: {
+        ...rest,
+        messages: instance.template.messageIds.map(
+          (messageId) => allInstanceMessages[messageId]
+        ),
+      },
+    } satisfies PlaygroundInstance;
+  }
+  // it cannot be a normalized instance if it is not a chat template
+  return instance as PlaygroundInstance;
+};
+
 /**
  * Gets chat completion input for running over variables
  */
@@ -1001,10 +1042,20 @@ export const getChatCompletionInput = ({
     credentials,
   });
 
-  const { instances, templateLanguage, input } = playgroundStore.getState();
+  const {
+    instances,
+    templateLanguage,
+    input,
+    allInstanceMessages: instanceMessages,
+  } = playgroundStore.getState();
+
+  // convert playgroundStateInstances to playgroundInstances
+  const playgroundInstances = instances.map((instance) => {
+    return denormalizePlaygroundInstance(instance, instanceMessages);
+  });
 
   const { variablesMap } = getVariablesMapFromInstances({
-    instances,
+    instances: playgroundInstances,
     input,
     templateLanguage,
   });
diff --git a/app/src/pages/playground/useDerivedPlaygroundVariables.tsx b/app/src/pages/playground/useDerivedPlaygroundVariables.tsx
index 67f1b41a2f..be33ba7b77 100644
--- a/app/src/pages/playground/useDerivedPlaygroundVariables.tsx
+++ b/app/src/pages/playground/useDerivedPlaygroundVariables.tsx
@@ -2,7 +2,10 @@ import { useMemo } from "react";
 
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 
-import { getVariablesMapFromInstances } from "./playgroundUtils";
+import {
+  denormalizePlaygroundInstance,
+  getVariablesMapFromInstances,
+} from "./playgroundUtils";
 
 /**
  * Get the variable values and keys from all instances in the playground
@@ -13,16 +16,24 @@ import { getVariablesMapFromInstances } from "./playgroundUtils";
 export const useDerivedPlaygroundVariables = () => {
   const input = usePlaygroundContext((state) => state.input);
   const instances = usePlaygroundContext((state) => state.instances);
+  const allInstanceMessages = usePlaygroundContext(
+    (state) => state.allInstanceMessages
+  );
   const templateLanguage = usePlaygroundContext(
     (state) => state.templateLanguage
   );
+  const enrichedInstances = useMemo(() => {
+    return instances.map((instance) =>
+      denormalizePlaygroundInstance(instance, allInstanceMessages)
+    );
+  }, [instances, allInstanceMessages]);
   const { variableKeys, variablesMap } = useMemo(() => {
     return getVariablesMapFromInstances({
-      instances,
+      instances: enrichedInstances,
       templateLanguage,
       input,
     });
-  }, [input, instances, templateLanguage]);
+  }, [input, enrichedInstances, templateLanguage]);
 
   return { variableKeys, variablesMap };
 };
diff --git a/app/src/pages/prompt/ChatTemplateMessageCard.tsx b/app/src/pages/prompt/ChatTemplateMessageCard.tsx
index f39769fc1a..0e359434e1 100644
--- a/app/src/pages/prompt/ChatTemplateMessageCard.tsx
+++ b/app/src/pages/prompt/ChatTemplateMessageCard.tsx
@@ -69,7 +69,7 @@ export function ChatTemplateMessageToolResultPart({
             <TemplateEditor
               readOnly
               height="100%"
-              value={value}
+              defaultValue={value}
               templateLanguage={TemplateLanguages.NONE}
             />
           </TemplateEditorWrap>
@@ -103,7 +103,7 @@ export function ChatTemplateMessageToolCallPart({
         <TemplateEditor
           readOnly
           height="100%"
-          value={value}
+          defaultValue={value}
           templateLanguage={TemplateLanguages.NONE}
         />
       </TemplateEditorWrap>
@@ -130,7 +130,7 @@ export function ChatTemplateMessageTextPart(
         <TemplateEditor
           readOnly
           height="100%"
-          value={text}
+          defaultValue={text}
           templateLanguage={templateFormat}
         />
       </TemplateEditorWrap>
diff --git a/app/src/pages/prompt/PromptPlaygroundPage.tsx b/app/src/pages/prompt/PromptPlaygroundPage.tsx
index 6bb9208f31..ea11ba2cab 100644
--- a/app/src/pages/prompt/PromptPlaygroundPage.tsx
+++ b/app/src/pages/prompt/PromptPlaygroundPage.tsx
@@ -2,7 +2,10 @@ import React, { useMemo } from "react";
 import { useLoaderData } from "react-router";
 
 import { PromptPlaygroundLoaderData } from "@phoenix/pages/prompt/promptPlaygroundLoader";
-import { createPlaygroundInstance } from "@phoenix/store";
+import {
+  createNormalizedPlaygroundInstance,
+  PlaygroundInstance,
+} from "@phoenix/store";
 
 import { Playground } from "../playground/Playground";
 
@@ -12,12 +15,18 @@ export function PromptPlaygroundPage() {
   // create a playground instance with the prompt details configured
   // When the playground component mounts and sees the prompt id in the instance,
   // it will automatically load the latest prompt version into the instance
-  const playgroundInstance = useMemo(() => {
-    return {
-      ...createPlaygroundInstance(),
+  const { instance } = useMemo(() => {
+    const { instance: defaultInstance } = createNormalizedPlaygroundInstance();
+
+    const instance = {
+      ...defaultInstance,
       ...instanceWithPrompt,
-    };
+      // we don't want default messages in the instance, just the prompt messages
+      template: instanceWithPrompt.template,
+    } satisfies PlaygroundInstance;
+
+    return { instance };
   }, [instanceWithPrompt]);
 
-  return <Playground instances={[playgroundInstance]} />;
+  return <Playground instances={[instance]} />;
 }
diff --git a/app/src/store/playground/__tests__/playgroundStore.test.ts b/app/src/store/playground/__tests__/playgroundStore.test.ts
index 0be221b58e..8b0368a808 100644
--- a/app/src/store/playground/__tests__/playgroundStore.test.ts
+++ b/app/src/store/playground/__tests__/playgroundStore.test.ts
@@ -5,18 +5,27 @@ import {
 
 import {
   _resetInstanceId,
-  createPlaygroundInstance,
+  createNormalizedPlaygroundInstance,
   getInitialInstances,
 } from "../playgroundStore";
-import { InitialPlaygroundState } from "../types";
+import type { InitialPlaygroundState } from "../types";
 
 describe("getInitialInstances", () => {
   beforeEach(() => {
     _resetInstanceId();
   });
   it("should return instances from initialProps if they exist", () => {
-    const existingInstance = {
-      ...createPlaygroundInstance(),
+    const {
+      instance: newInstanceParams,
+      instanceMessages: newInstanceMessages,
+    } = createNormalizedPlaygroundInstance();
+    const newInstance = {
+      ...newInstanceParams,
+      template: {
+        ...newInstanceParams.template,
+        // denormalize messages to simulate a denormalized instance
+        messages: Object.values(newInstanceMessages),
+      },
       model: {
         modelName: "test-model",
         provider: "OPENAI" as const,
@@ -24,21 +33,32 @@ describe("getInitialInstances", () => {
         supportedInvocationParameters: [],
       },
     };
+
+    // simulated props that would be passed to the PlaygroundProvider
     const initialProps: InitialPlaygroundState = {
-      instances: [existingInstance],
+      instances: [newInstance],
       modelConfigByProvider: {},
     };
 
-    const instances = getInitialInstances(initialProps);
+    // Create normalized instances from the denormalized instance
+    const { instances, instanceMessages } = getInitialInstances(initialProps);
+
+    expect(instances).toEqual([
+      {
+        ...newInstanceParams,
+        model: { ...newInstanceParams.model, modelName: "test-model" },
+      },
+    ]);
 
-    expect(instances).toEqual([existingInstance]);
+    // the denormalized instance messages should end up in the instanceMessages object
+    expect(instanceMessages).toEqual(newInstanceMessages);
   });
 
   it("should create a new default instance if no instances exist in initialProps and there are no saved modelConfigs", () => {
     const initialProps: InitialPlaygroundState = {
       modelConfigByProvider: {},
     };
-    const instances = getInitialInstances(initialProps);
+    const { instances } = getInitialInstances(initialProps);
 
     expect(instances).toHaveLength(1);
     expect(instances[0].id).toBe(0);
@@ -57,7 +77,7 @@ describe("getInitialInstances", () => {
       },
     };
 
-    const instances = getInitialInstances(initialProps);
+    const { instances } = getInitialInstances(initialProps);
 
     expect(instances).toHaveLength(1);
     expect(instances[0].model.provider).toBe("OPENAI");
@@ -80,7 +100,7 @@ describe("getInitialInstances", () => {
       },
     };
 
-    const instances = getInitialInstances(initialProps);
+    const { instances } = getInitialInstances(initialProps);
 
     expect(instances).toHaveLength(1);
     expect(instances[0].model.provider).toBe("OPENAI");
@@ -98,7 +118,7 @@ describe("getInitialInstances", () => {
       },
     };
 
-    const instances = getInitialInstances(initialProps);
+    const { instances } = getInitialInstances(initialProps);
 
     expect(instances).toHaveLength(1);
     expect(instances[0].model.provider).toBe("ANTHROPIC");
diff --git a/app/src/store/playground/playgroundStore.tsx b/app/src/store/playground/playgroundStore.tsx
index c1492e7e15..52fcf02ea9 100644
--- a/app/src/store/playground/playgroundStore.tsx
+++ b/app/src/store/playground/playgroundStore.tsx
@@ -20,10 +20,13 @@ import {
   convertMessageToolCallsToProvider,
 } from "./playgroundStoreUtils";
 import {
+  ChatMessage,
   GenAIOperationType,
   InitialPlaygroundState,
   PlaygroundChatTemplate,
   PlaygroundInstance,
+  PlaygroundNormalizedChatTemplate,
+  PlaygroundNormalizedInstance,
   PlaygroundState,
   PlaygroundTextCompletionTemplate,
 } from "./types";
@@ -97,6 +100,22 @@ const generateChatCompletionTemplate = (): PlaygroundChatTemplate => ({
   ],
 });
 
+export const normalizeChatTemplate = (template: PlaygroundChatTemplate) => {
+  return {
+    template: {
+      __type: "chat",
+      messageIds: template.messages.map((message) => message.id),
+    } satisfies PlaygroundNormalizedChatTemplate,
+    messages: template.messages.reduce(
+      (acc, message) => {
+        acc[message.id] = message;
+        return acc;
+      },
+      {} as Record<number, ChatMessage>
+    ),
+  };
+};
+
 const DEFAULT_TEXT_COMPLETION_TEMPLATE: PlaygroundTextCompletionTemplate = {
   __type: "text_completion",
   prompt: "{{question}}",
@@ -119,11 +138,22 @@ export const DEFAULT_INSTANCE_PARAMS = () =>
     dirty: false,
   }) satisfies Partial<PlaygroundInstance>;
 
-export function createPlaygroundInstance(): PlaygroundInstance {
+/**
+ * Creates a new normalized playground instance, and an object of instance messages that can be merged
+ * into a normalized store of messages
+ *
+ * @returns an object containing the instance and the instance messages
+ */
+export function createNormalizedPlaygroundInstance() {
+  const template = generateChatCompletionTemplate();
+  const normalizedTemplate = normalizeChatTemplate(template);
   return {
-    id: generateInstanceId(),
-    template: generateChatCompletionTemplate(),
-    ...DEFAULT_INSTANCE_PARAMS(),
+    instance: {
+      id: generateInstanceId(),
+      template: normalizedTemplate.template,
+      ...DEFAULT_INSTANCE_PARAMS(),
+    } as PlaygroundNormalizedInstance,
+    instanceMessages: normalizedTemplate.messages,
   };
 }
 
@@ -146,21 +176,46 @@ export function createOpenAIResponseFormat(): OpenAIResponseFormat {
 /**
  * Gets the initial instances for the playground store
  * If the initial props has instances, those will be used.
+ * Incoming instances are normalized on entry, and should not be normalized before passing to this function
  * If not a default instance will be created and saved model config defaults will be used if present.
- * @returns a list of {@link PlaygroundInstance} instances
+ * @returns a list of {@link PlaygroundNormalizedInstance} instances
  *
  * NB: This function is only exported for testing
  */
-export function getInitialInstances(initialProps: InitialPlaygroundState) {
+export function getInitialInstances(initialProps: InitialPlaygroundState): {
+  instances: Array<PlaygroundNormalizedInstance>;
+  instanceMessages: Record<number, ChatMessage>;
+} {
   if (initialProps.instances != null && initialProps.instances.length > 0) {
-    return initialProps.instances;
+    let initialInstancesMessageMap: Record<number, ChatMessage> = {};
+    const normalizedInstances = initialProps.instances.map((instance) => {
+      if (instance.template.__type === "chat") {
+        const normalizedTemplate = normalizeChatTemplate(instance.template);
+        initialInstancesMessageMap = {
+          ...initialInstancesMessageMap,
+          ...normalizedTemplate.messages,
+        };
+        return {
+          ...instance,
+          template: normalizedTemplate.template,
+        } satisfies PlaygroundNormalizedInstance;
+      }
+      return instance as PlaygroundNormalizedInstance;
+    });
+    return {
+      instances: normalizedInstances,
+      instanceMessages: initialInstancesMessageMap,
+    };
   }
-  const instance = createPlaygroundInstance();
+  const { instance, instanceMessages } = createNormalizedPlaygroundInstance();
 
   const savedModelConfigs = Object.values(initialProps.modelConfigByProvider);
   const hasSavedModelConfig = savedModelConfigs.length > 0;
   if (!hasSavedModelConfig) {
-    return [instance];
+    return {
+      instances: [instance],
+      instanceMessages,
+    };
   }
   const savedDefaultProviderConfig =
     savedModelConfigs.find(
@@ -170,10 +225,14 @@ export function getInitialInstances(initialProps: InitialPlaygroundState) {
     ...instance.model,
     ...savedDefaultProviderConfig,
   };
-  return [instance];
+  return {
+    instances: [instance],
+    instanceMessages,
+  };
 }
 
-export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
+export const createPlaygroundStore = (props: InitialPlaygroundState) => {
+  const { instances, instanceMessages } = getInitialInstances(props);
   const playgroundStore: StateCreator<PlaygroundState> = (set, get) => ({
     streaming: true,
     operationType: "chat",
@@ -185,17 +244,31 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
       variablesValueCache: {},
     },
     templateLanguage: TemplateLanguages.Mustache,
-    instances: getInitialInstances(initialProps),
+    ...props,
+    instances,
+    allInstanceMessages: instanceMessages,
     setInput: (input) => {
       set({ input });
     },
     setOperationType: (operationType: GenAIOperationType) => {
       if (operationType === "chat") {
-        set({
-          instances: get().instances.map((instance) => ({
+        const normalizedInstances: PlaygroundNormalizedInstance[] = [];
+        let messageMap: Record<number, ChatMessage> = {};
+        get().instances.forEach((instance) => {
+          const newMessage = generateChatCompletionTemplate();
+          const normalizedTemplate = normalizeChatTemplate(newMessage);
+          messageMap = {
+            ...messageMap,
+            ...normalizedTemplate.messages,
+          };
+          normalizedInstances.push({
             ...instance,
-            template: generateChatCompletionTemplate(),
-          })),
+            template: normalizedTemplate.template,
+          });
+        });
+        set({
+          instances: normalizedInstances,
+          allInstanceMessages: messageMap,
         });
       } else {
         set({
@@ -209,15 +282,47 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
     },
     addInstance: () => {
       const instances = get().instances;
+      const instanceMessages = get().allInstanceMessages;
       const firstInstance = get().instances[0];
       if (!firstInstance) {
         return;
       }
+      let newMessageIds: number[] = [];
+      let newMessageMap: Record<number, ChatMessage> = {};
+      if (firstInstance.template.__type === "chat") {
+        const messageIdsToCopy = firstInstance.template.messageIds;
+        const copiedMessages = messageIdsToCopy
+          .map((id) => instanceMessages[id])
+          .map((message) => ({
+            ...message,
+            id: generateMessageId(),
+          }));
+        newMessageIds = copiedMessages.map((message) => message.id);
+        newMessageMap = copiedMessages.reduce(
+          (acc, message) => {
+            acc[message.id] = message;
+            return acc;
+          },
+          {} as Record<number, ChatMessage>
+        );
+      }
       set({
+        allInstanceMessages: {
+          ...instanceMessages,
+          ...newMessageMap,
+        },
         instances: [
           ...instances,
           {
             ...firstInstance,
+            ...(firstInstance.template.__type === "chat"
+              ? {
+                  template: {
+                    ...firstInstance.template,
+                    messageIds: newMessageIds,
+                  },
+                }
+              : {}),
             id: generateInstanceId(),
             activeRunId: null,
             experimentId: null,
@@ -269,7 +374,7 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
 
       const savedProviderConfig = modelConfigByProvider[provider];
 
-      const patch: Partial<PlaygroundInstance> = {
+      const patch: Partial<PlaygroundNormalizedInstance> = {
         // If we have a saved config for the provider, use it as the default otherwise reset the model config entirely to defaults / unset which will be controlled by invocation params coming from the server
         model: savedProviderConfig
           ? {
@@ -294,21 +399,26 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
           provider,
         }),
       };
+      const messageMapPatch: Record<number, ChatMessage> = {};
       if (instance.template.__type === "chat") {
-        patch.template = {
-          __type: "chat",
-          messages: instance.template.messages.map((message) => {
-            return {
+        instance.template.messageIds.forEach((messageId) => {
+          const message = get().allInstanceMessages[messageId];
+          if (message) {
+            messageMapPatch[messageId] = {
               ...message,
               toolCalls: convertMessageToolCallsToProvider({
                 toolCalls: message.toolCalls,
                 provider,
               }),
             };
-          }),
-        };
+          }
+        });
       }
       set({
+        allInstanceMessages: {
+          ...get().allInstanceMessages,
+          ...messageMapPatch,
+        },
         instances: instances.map((instance) => {
           if (instance.id === instanceId) {
             return {
@@ -349,11 +459,35 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
         instances: instances.filter((instance) => instance.id !== instanceId),
       });
     },
-    addMessage: ({ playgroundInstanceId }) => {
+    addMessage: ({ playgroundInstanceId, messages }) => {
       const instances = get().instances;
+      let newMessages: ChatMessage[] = [];
+      if (Array.isArray(messages)) {
+        newMessages = messages;
+      } else if (messages) {
+        newMessages = [messages];
+      } else {
+        newMessages = [
+          {
+            id: generateMessageId(),
+            role: DEFAULT_CHAT_ROLE,
+            content: "",
+          },
+        ];
+      }
 
       // Update the given instance
       set({
+        allInstanceMessages: {
+          ...get().allInstanceMessages,
+          ...newMessages.reduce(
+            (acc, message) => {
+              acc[message.id] = message;
+              return acc;
+            },
+            {} as Record<number, ChatMessage>
+          ),
+        },
         instances: instances.map((instance) => {
           if (
             instance.id === playgroundInstanceId &&
@@ -363,10 +497,60 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
             return {
               ...instance,
               dirty: true,
-              messages: [
-                ...instance.template.messages,
-                { role: DEFAULT_CHAT_ROLE, content: "{question}" },
-              ],
+              template: {
+                ...instance.template,
+                messageIds: [
+                  ...instance.template.messageIds,
+                  ...newMessages.map((message) => message.id),
+                ],
+              },
+            };
+          }
+          return instance;
+        }),
+      });
+    },
+    updateMessage: ({ messageId, patch, instanceId }) => {
+      const allInstanceMessages = get().allInstanceMessages;
+      set({
+        allInstanceMessages: {
+          ...allInstanceMessages,
+          [messageId]: {
+            ...allInstanceMessages[messageId],
+            ...patch,
+          },
+        },
+      });
+      get().updateInstance({
+        instanceId,
+        patch: {},
+        dirty: true,
+      });
+    },
+    deleteMessage: ({ instanceId, messageId }) => {
+      const instances = get().instances;
+      const allInstanceMessages = get().allInstanceMessages;
+      set({
+        allInstanceMessages: Object.fromEntries(
+          Object.entries(allInstanceMessages).filter(
+            ([, { id }]) => id !== messageId
+          )
+        ),
+        instances: instances.map((instance) => {
+          if (
+            instance.id === instanceId &&
+            instance?.template &&
+            instance?.template.__type === "chat"
+          ) {
+            return {
+              ...instance,
+              dirty: true,
+              template: {
+                ...instance.template,
+                messageIds: instance.template.messageIds.filter(
+                  (id) => id !== messageId
+                ),
+              },
             };
           }
           return instance;
@@ -399,8 +583,9 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
       });
     },
     cancelPlaygroundInstances: () => {
+      const instances = get().instances;
       set({
-        instances: get().instances.map((instance) => ({
+        instances: instances.map((instance) => ({
           ...instance,
           activeRunId: null,
           spanId: null,
@@ -555,7 +740,6 @@ export const createPlaygroundStore = (initialProps: InitialPlaygroundState) => {
         }),
       });
     },
-    ...initialProps,
   });
   return create(devtools(playgroundStore));
 };
diff --git a/app/src/store/playground/selectors.ts b/app/src/store/playground/selectors.ts
new file mode 100644
index 0000000000..6978c8d236
--- /dev/null
+++ b/app/src/store/playground/selectors.ts
@@ -0,0 +1,39 @@
+import { PlaygroundState } from "./types";
+
+/**
+ * Curried selector to get an instance by id
+ * @param instanceId
+ * @returns selector function that returns the instance for the given id
+ */
+export const selectPlaygroundInstance =
+  (instanceId: number) => (state: PlaygroundState) =>
+    state.instances.find((instance) => instance.id === instanceId);
+
+/**
+ * Curried selector to get all messages for a given instance
+ * @param instanceId
+ * @returns selector function that returns all messages for the given instance
+ */
+export const selectPlaygroundInstanceMessages =
+  (instanceId: number) => (state: PlaygroundState) => {
+    const instance = selectPlaygroundInstance(instanceId)(state);
+    if (!instance) {
+      return [];
+    }
+    if (instance.template.__type !== "chat") {
+      return [];
+    }
+    return instance.template.messageIds.map(
+      (id) => state.allInstanceMessages[id]
+    );
+  };
+
+/**
+ * Curried selector to get a message of a given id
+ * @param messageId
+ * @returns selector function that returns the message for the given id
+ */
+export const selectPlaygroundInstanceMessage =
+  (messageId: number) => (state: PlaygroundState) => {
+    return state.allInstanceMessages[messageId];
+  };
diff --git a/app/src/store/playground/types.ts b/app/src/store/playground/types.ts
index c2b1beb803..422be7d724 100644
--- a/app/src/store/playground/types.ts
+++ b/app/src/store/playground/types.ts
@@ -138,7 +138,12 @@ interface PlaygroundInstanceActionParams {
   playgroundInstanceId: number;
 }
 
-export interface AddMessageParams extends PlaygroundInstanceActionParams {}
+export interface AddMessageParams extends PlaygroundInstanceActionParams {
+  /**
+   * If not provided, a default empty message will be added
+   */
+  messages?: ChatMessage[];
+}
 
 export interface PlaygroundProps {
   /**
@@ -172,7 +177,39 @@ export type InitialPlaygroundState = Partial<PlaygroundProps> & {
   modelConfigByProvider: ModelConfigByProvider;
 };
 
-export interface PlaygroundState extends PlaygroundProps {
+/**
+ * A chat completion template, with normalized message ids
+ *
+ * The chat template only contains references to message ids, which are normalized to be unique
+ * and stored elsewhere in the state
+ */
+export type PlaygroundNormalizedChatTemplate = Omit<
+  PlaygroundChatTemplate,
+  "messages"
+> & {
+  messageIds: number[];
+};
+
+/**
+ * A playground instance, with normalized chat completion template messages
+ */
+export type PlaygroundNormalizedInstance = Omit<
+  PlaygroundInstance,
+  "template"
+> & {
+  template: PlaygroundTextCompletionTemplate | PlaygroundNormalizedChatTemplate;
+};
+
+export interface PlaygroundState extends Omit<PlaygroundProps, "instances"> {
+  instances: Array<PlaygroundNormalizedInstance>;
+
+  /**
+   * A map of message id to message
+   *
+   * message ids must be globally unique across all instances
+   */
+  allInstanceMessages: Record<number, ChatMessage>;
+
   /**
    * Setter for the invocation mode
    * @param operationType
@@ -201,12 +238,25 @@ export interface PlaygroundState extends PlaygroundProps {
    * Add a message to a playground instance
    */
   addMessage: (params: AddMessageParams) => void;
+  /**
+   * Update a message in a playground instance
+   */
+  updateMessage: (params: {
+    instanceId: number;
+    messageId: number;
+    patch: Partial<ChatMessage>;
+  }) => void;
+  /**
+   * Delete a message from a playground instance
+   */
+  deleteMessage: (params: { instanceId: number; messageId: number }) => void;
+
   /**
    * Update an instance of the playground
    */
   updateInstance: (params: {
     instanceId: number;
-    patch: Partial<PlaygroundInstance>;
+    patch: Partial<PlaygroundNormalizedInstance>;
     /**
      * Should this update mark the instance as dirty?
      *