From c70844b317081451ce9cefc42cc5d0c381fdd65d Mon Sep 17 00:00:00 2001
From: gaurav0107 <gauravdubey0107@gmail.com>
Date: Mon, 8 Jun 2026 01:36:10 +0530
Subject: [PATCH 1/5] refactor(web/playground): PromptOption.versions carries
 template_messages

Adds the structured Message[] field alongside the legacy single-string
template so the composer (next task) can read messages directly. The
page mapper falls back to wrapping the legacy template as a single
human message when template_messages is absent (defensive - Plan B's
api always sends both, but old api versions during a deploy gap may
not).

No behavior change yet; the composer still reads template until Task
4 rewrites it.

Signed-off-by: gaurav0107 <gauravdubey0107@gmail.com>
---
 web/src/app/playground/page.tsx         | 15 +++++++++++++--
 web/src/components/PlaygroundClient.tsx | 15 ++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/web/src/app/playground/page.tsx b/web/src/app/playground/page.tsx
index a5a9828..6f627a6 100644
--- a/web/src/app/playground/page.tsx
+++ b/web/src/app/playground/page.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Shell } from "@/components/Shell";
 import {
   PlaygroundComposer,
+  type Message,
   type PlaygroundSessionOut,
   type PromptOption,
 } from "@/components/PlaygroundClient";
@@ -34,7 +35,10 @@ interface PromptRow {
 interface PromptVersionRow {
   id: string;
   version: number;
-  template: string;
+  /** Plan B onwards; absent on very old api versions. */
+  template_messages?: Message[];
+  /** Legacy field; absent eventually. */
+  template?: string;
 }
 
 interface PromptVersionList {
@@ -85,7 +89,14 @@ export default async function PlaygroundPage() {
         versions: (versions.data?.versions ?? []).map((v) => ({
           id: v.id,
           version: v.version,
-          template: v.template,
+          // Prefer the structured field; fall back to wrapping the legacy
+          // template (defensive — Plan B's api always sends both).
+          template_messages:
+            v.template_messages ??
+            (v.template != null
+              ? [{ role: "human" as const, content: v.template }]
+              : []),
+          template: v.template ?? "",
         })),
       };
     }),
diff --git a/web/src/components/PlaygroundClient.tsx b/web/src/components/PlaygroundClient.tsx
index 6fa92f5..6fb6223 100644
--- a/web/src/components/PlaygroundClient.tsx
+++ b/web/src/components/PlaygroundClient.tsx
@@ -22,11 +22,24 @@ import { ModelPicker } from "@/components/ModelPicker";
  * iteration without changing the storage shape).
  */
 
+export interface Message {
+  role: "system" | "human";
+  content: string;
+}
+
 export interface PromptOption {
   id: string;
   slug: string;
   name: string;
-  versions: { id: string; version: number; template: string }[];
+  versions: {
+    id: string;
+    version: number;
+    /** Structured form (Plan A+B). Always set on new versions. */
+    template_messages: Message[];
+    /** Legacy single-string field. Kept for back-compat reads from the
+     *  api during the deprecation window. We don't display this. */
+    template: string;
+  }[];
 }
 
 export interface PlaygroundSessionOut {

From 3f780f0f2733c98b2be1487d0cf2f640d5e1eb5e Mon Sep 17 00:00:00 2001
From: gaurav0107 <gauravdubey0107@gmail.com>
Date: Mon, 8 Jun 2026 01:37:12 +0530
Subject: [PATCH 2/5] feat(web/playground): extractVariablesFromMessages
 dedupes across turns

Sister to extractVariables(template). Used by the composer (next
task) to keep the Inputs panel in sync as the user edits System and
Human bodies. Preserves first-seen order so the Inputs panel doesn't
reshuffle while the user is mid-edit.

Test file deferred until a JS test runner is configured for the
web workspace.

Signed-off-by: gaurav0107 <gauravdubey0107@gmail.com>
---
 web/src/components/PlaygroundClient.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/web/src/components/PlaygroundClient.tsx b/web/src/components/PlaygroundClient.tsx
index 6fb6223..2cb8fbf 100644
--- a/web/src/components/PlaygroundClient.tsx
+++ b/web/src/components/PlaygroundClient.tsx
@@ -78,6 +78,26 @@ function extractVariables(template: string): string[] {
   return [...out];
 }
 
+/**
+ * Run the same variable-detection regex across a list of messages and
+ * return the deduped union (preserving first-seen order). Used by the
+ * composer to keep the Inputs panel in sync as the user edits System
+ * and Human bodies.
+ */
+export function extractVariablesFromMessages(messages: Message[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const m of messages) {
+    for (const v of extractVariables(m.content)) {
+      if (!seen.has(v)) {
+        seen.add(v);
+        out.push(v);
+      }
+    }
+  }
+  return out;
+}
+
 export function PlaygroundComposer({
   projectId,
   prompts,

From ecde9631327178e04d54cb68f5d7d00f127ccd3b Mon Sep 17 00:00:00 2001
From: gaurav0107 <gauravdubey0107@gmail.com>
Date: Mon, 8 Jun 2026 01:38:18 +0530
Subject: [PATCH 3/5] feat(web/playground): MessageEditor per-message card

Self-contained, callback-driven. Renders the role pill (system/human
dropdown), content textarea (auto-grows on newlines), and the reorder
+ delete affordances. Uses the design system tokens (--surface,
--border, --r-3, .btn .btn-ghost .btn-sm) per DESIGN.md - no
hardcoded hex values or one-off radii.

Used by the composer rewrite in the next task. canDelete prop lets
the caller block the last delete so the composer can never end up
with zero messages.

Signed-off-by: gaurav0107 <gauravdubey0107@gmail.com>
---
 .../components/playground/MessageEditor.tsx   | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 web/src/components/playground/MessageEditor.tsx

diff --git a/web/src/components/playground/MessageEditor.tsx b/web/src/components/playground/MessageEditor.tsx
new file mode 100644
index 0000000..a2296a5
--- /dev/null
+++ b/web/src/components/playground/MessageEditor.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import type { Message } from "@/components/PlaygroundClient";
+
+interface MessageEditorProps {
+  message: Message;
+  onChange: (next: Message) => void;
+  onDelete: () => void;
+  /** Undefined when this is the first message. */
+  onMoveUp?: () => void;
+  /** Undefined when this is the last message. */
+  onMoveDown?: () => void;
+  /** Disables delete when there's only one message left. */
+  canDelete: boolean;
+}
+
+const ROLE_LABEL: Record<Message["role"], string> = {
+  system: "SYSTEM",
+  human: "HUMAN",
+};
+
+export function MessageEditor({
+  message,
+  onChange,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  canDelete,
+}: MessageEditorProps) {
+  return (
+    <div
+      style={{
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-3)",
+        overflow: "hidden",
+        background: "var(--surface)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "8px 12px",
+          background: "var(--surface-2)",
+          borderBottom: "1px solid var(--border)",
+        }}
+      >
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            cursor: "pointer",
+          }}
+        >
+          <span
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: 0.6,
+              color: "var(--text-3)",
+              minWidth: 56,
+            }}
+          >
+            {ROLE_LABEL[message.role]}
+          </span>
+          <select
+            aria-label="message role"
+            value={message.role}
+            onChange={(e) =>
+              onChange({
+                ...message,
+                role: e.target.value as Message["role"],
+              })
+            }
+            style={{
+              fontSize: 12,
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r-1)",
+              background: "var(--surface)",
+              color: "var(--text-2)",
+              padding: "2px 6px",
+              cursor: "pointer",
+            }}
+          >
+            <option value="system">System</option>
+            <option value="human">Human</option>
+          </select>
+        </label>
+        <div style={{ display: "flex", gap: 2 }}>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={onMoveUp}
+            disabled={!onMoveUp}
+            aria-label="move message up"
+            style={{ minWidth: 28, padding: "0 8px" }}
+          >
+            &uarr;
+          </button>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={onMoveDown}
+            disabled={!onMoveDown}
+            aria-label="move message down"
+            style={{ minWidth: 28, padding: "0 8px" }}
+          >
+            &darr;
+          </button>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            onClick={onDelete}
+            disabled={!canDelete}
+            aria-label="delete message"
+            style={{ minWidth: 28, padding: "0 8px" }}
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+      <textarea
+        value={message.content}
+        onChange={(e) => onChange({ ...message, content: e.target.value })}
+        placeholder={
+          message.role === "system"
+            ? "You are a helpful assistant..."
+            : "Write the user turn. Use {{ var }} for variables."
+        }
+        rows={Math.max(2, Math.min(12, message.content.split("\n").length + 1))}
+        style={{
+          width: "100%",
+          padding: 12,
+          border: 0,
+          resize: "vertical",
+          fontSize: 13,
+          fontFamily: "inherit",
+          background: "var(--surface)",
+          color: "var(--text)",
+          boxSizing: "border-box",
+          outline: "none",
+        }}
+      />
+    </div>
+  );
+}

From 374f43ead7f10012b7a70aa4794e0e010b19f325 Mon Sep 17 00:00:00 2001
From: gaurav0107 <gauravdubey0107@gmail.com>
Date: Mon, 8 Jun 2026 01:42:37 +0530
Subject: [PATCH 4/5] feat(web/playground): composer edits a list of typed
 messages

Replaces the rawMode/rawTemplate dichotomy with a single messages:
Message[] state. The prompt panel renders one MessageEditor per turn
(reorder, delete, role pill, content textarea) plus an + Add message
button. Variable detection runs across all messages and dedupes the
union into the Inputs panel.

The Run payload sends raw_messages when no version is loaded, or
prompt_version_id when a saved version is loaded - Plan B's api
accepts both shapes during the back-compat window. Loading a saved
version replaces the editable messages and pins loadedVersionId so
the run goes through the catalog path; an Unload button detaches
without resetting the composer.

Save is wired in the next task. Typecheck + lint clean.

Signed-off-by: gaurav0107 <gauravdubey0107@gmail.com>
---
 web/src/components/PlaygroundClient.tsx | 272 +++++++++++++-----------
 1 file changed, 151 insertions(+), 121 deletions(-)

diff --git a/web/src/components/PlaygroundClient.tsx b/web/src/components/PlaygroundClient.tsx
index 2cb8fbf..f4ed15b 100644
--- a/web/src/components/PlaygroundClient.tsx
+++ b/web/src/components/PlaygroundClient.tsx
@@ -3,9 +3,10 @@
 import { ExternalLink, Loader2, Play, Sparkles } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useMemo, useState, useTransition } from "react";
+import { useEffect, useMemo, useState, useTransition } from "react";
 
 import { ModelPicker } from "@/components/ModelPicker";
+import { MessageEditor } from "@/components/playground/MessageEditor";
 
 /**
  * Interactive Playground canvas.
@@ -108,10 +109,16 @@ export function PlaygroundComposer({
   const [mode, setMode] = useState<"single" | "compare">("single");
   const [promptId, setPromptId] = useState<string>("");
   const [versionId, setVersionId] = useState<string>("");
-  const [rawMode, setRawMode] = useState<boolean>(prompts.length === 0);
-  const [rawTemplate, setRawTemplate] = useState<string>(
-    "Summarize the following text in one sentence:\n\n{{ text }}",
-  );
+  // Composer state. messages is the editable list; loadedVersionId is the
+  // prompt_version we last loaded (null = unsaved free-form composition).
+  const [messages, setMessages] = useState<Message[]>([
+    { role: "system", content: "" },
+    {
+      role: "human",
+      content: "Summarize the following text in one sentence:\n\n{{ text }}",
+    },
+  ]);
+  const [loadedVersionId, setLoadedVersionId] = useState<string | null>(null);
   const [variables, setVariables] = useState<Record<string, string>>({
     text: "tracebility is a self-hosted LLM observability platform.",
   });
@@ -133,15 +140,29 @@ export function PlaygroundComposer({
     () => selectedPrompt?.versions.find((v) => v.id === versionId) ?? null,
     [selectedPrompt, versionId],
   );
-  const effectiveTemplate = rawMode
-    ? rawTemplate
-    : selectedVersion?.template ?? "";
+
+  // Loading a saved version replaces the editable messages and pins
+  // loadedVersionId so Run posts prompt_version_id (not raw_messages).
+  // Editing afterwards keeps loadedVersionId — Save then sends a new
+  // version under the same prompt; the api short-circuits identical
+  // bodies.
+  useEffect(() => {
+    if (selectedVersion === null) return;
+    const next =
+      selectedVersion.template_messages.length > 0
+        ? selectedVersion.template_messages
+        : [{ role: "human" as const, content: selectedVersion.template }];
+    setMessages(next);
+    setLoadedVersionId(selectedVersion.id);
+  }, [selectedVersion]);
 
   const detectedVars = useMemo(
-    () => extractVariables(effectiveTemplate),
-    [effectiveTemplate],
+    () => extractVariablesFromMessages(messages),
+    [messages],
   );
 
+  const isComposerEmpty = !messages.some((m) => m.content.trim().length > 0);
+
   function setVariable(key: string, value: string) {
     setVariables((prev) => ({ ...prev, [key]: value }));
   }
@@ -166,14 +187,14 @@ export function PlaygroundComposer({
       temperature: tempNum,
       max_tokens: maxNum,
     };
-    if (rawMode || !selectedVersion) {
-      if (!effectiveTemplate.trim()) {
-        setError("template is empty");
+    if (loadedVersionId !== null) {
+      body.prompt_version_id = loadedVersionId;
+    } else {
+      if (isComposerEmpty) {
+        setError("prompt is empty");
         return null;
       }
-      body.raw_template = effectiveTemplate;
-    } else {
-      body.prompt_version_id = selectedVersion.id;
+      body.raw_messages = messages;
     }
     const res = await fetch("/api/playground/runs", {
       method: "POST",
@@ -219,16 +240,15 @@ export function PlaygroundComposer({
       <ModeToggle mode={mode} onChange={setMode} />
       <PromptSourceCard
         prompts={prompts}
-        rawMode={rawMode}
-        setRawMode={setRawMode}
         promptId={promptId}
         setPromptId={setPromptId}
         versionId={versionId}
         setVersionId={setVersionId}
-        rawTemplate={rawTemplate}
-        setRawTemplate={setRawTemplate}
         selectedPrompt={selectedPrompt}
-        selectedVersion={selectedVersion}
+        messages={messages}
+        setMessages={setMessages}
+        loadedVersionId={loadedVersionId}
+        setLoadedVersionId={setLoadedVersionId}
       />
       <VariablesCard
         keys={detectedVars}
@@ -259,7 +279,7 @@ export function PlaygroundComposer({
           type="button"
           className="btn btn-primary"
           onClick={run}
-          disabled={pending || !effectiveTemplate.trim()}
+          disabled={pending || (loadedVersionId === null && isComposerEmpty)}
         >
           {pending ? <Loader2 size={14} className="spin" /> : <Play size={14} />}
           {pending ? "running…" : mode === "compare" ? "Run both" : "Run"}
@@ -302,106 +322,83 @@ function ModeToggle({
 
 function PromptSourceCard({
   prompts,
-  rawMode,
-  setRawMode,
   promptId,
   setPromptId,
   versionId,
   setVersionId,
-  rawTemplate,
-  setRawTemplate,
   selectedPrompt,
-  selectedVersion,
+  messages,
+  setMessages,
+  loadedVersionId,
+  setLoadedVersionId,
 }: {
   prompts: PromptOption[];
-  rawMode: boolean;
-  setRawMode: (b: boolean) => void;
   promptId: string;
   setPromptId: (s: string) => void;
   versionId: string;
   setVersionId: (s: string) => void;
-  rawTemplate: string;
-  setRawTemplate: (s: string) => void;
   selectedPrompt: PromptOption | null;
-  selectedVersion: PromptOption["versions"][number] | null;
+  messages: Message[];
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  loadedVersionId: string | null;
+  setLoadedVersionId: (id: string | null) => void;
 }) {
+  function clearLoaded() {
+    setPromptId("");
+    setVersionId("");
+    setLoadedVersionId(null);
+  }
+
   return (
-    <section className="card card-pad-lg">
+    <section
+      className="card card-pad-lg"
+      style={{ display: "grid", gap: 12 }}
+    >
       <div
         style={{
           display: "flex",
           alignItems: "baseline",
           justifyContent: "space-between",
-          marginBottom: 12,
         }}
       >
         <h2 style={{ margin: 0 }}>Prompt</h2>
-        <div style={{ display: "flex", gap: 4 }}>
-          <button
-            type="button"
-            className={!rawMode ? "btn btn-primary" : "btn btn-ghost"}
-            onClick={() => setRawMode(false)}
-            disabled={prompts.length === 0}
-            style={{ fontSize: 12 }}
-            title={
-              prompts.length === 0
-                ? "create a prompt under /prompts to use the picker"
-                : undefined
-            }
-          >
-            From catalog
-          </button>
-          <button
-            type="button"
-            className={rawMode ? "btn btn-primary" : "btn btn-ghost"}
-            onClick={() => setRawMode(true)}
-            style={{ fontSize: 12 }}
-          >
-            Raw
-          </button>
-        </div>
-      </div>
-      {rawMode ? (
-        <textarea
-          value={rawTemplate}
-          onChange={(e) => setRawTemplate(e.target.value)}
-          rows={6}
-          placeholder="Type a template. Use {{ variable }} for substitutions."
-          style={{ width: "100%", fontFamily: "var(--font-mono)", fontSize: 12 }}
-        />
-      ) : (
-        <div style={{ display: "grid", gap: 12 }}>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "2fr 1fr",
-              gap: 12,
-            }}
-          >
-            <Field label="Prompt">
-              <select
-                value={promptId}
-                onChange={(e) => {
-                  setPromptId(e.target.value);
-                  setVersionId("");
-                }}
-              >
-                <option value="">— pick a prompt —</option>
-                {prompts.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {p.slug} — {p.name}
-                  </option>
-                ))}
-              </select>
-            </Field>
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <Field label="Load">
+            <select
+              value={promptId}
+              onChange={(e) => {
+                const next = e.target.value;
+                setPromptId(next);
+                setVersionId("");
+                if (next === "") {
+                  // Cleared the picker. Keep current composer messages but
+                  // detach from any loaded version so Run sends raw_messages.
+                  setLoadedVersionId(null);
+                }
+              }}
+              disabled={prompts.length === 0}
+              title={
+                prompts.length === 0
+                  ? "no prompts in catalog yet"
+                  : undefined
+              }
+            >
+              <option value="">— pick a prompt —</option>
+              {prompts.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.slug} — {p.name}
+                </option>
+              ))}
+            </select>
+          </Field>
+          {selectedPrompt ? (
             <Field label="Version">
               <select
                 value={versionId}
                 onChange={(e) => setVersionId(e.target.value)}
-                disabled={!selectedPrompt}
               >
                 <option value="">— pick —</option>
-                {(selectedPrompt?.versions || [])
+                {selectedPrompt.versions
                   .slice()
                   .sort((a, b) => b.version - a.version)
                   .map((v) => (
@@ -411,35 +408,68 @@ function PromptSourceCard({
                   ))}
               </select>
             </Field>
-          </div>
-          {selectedVersion ? (
-            <pre
-              style={{
-                margin: 0,
-                background: "var(--surface-2)",
-                padding: 12,
-                borderRadius: 8,
-                whiteSpace: "pre-wrap",
-                fontSize: 12,
-                maxHeight: 240,
-                overflow: "auto",
-              }}
+          ) : null}
+          {loadedVersionId !== null ? (
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={clearLoaded}
+              title="detach from loaded version (subsequent edits will run as raw_messages)"
+              style={{ fontSize: 12 }}
             >
-              {selectedVersion.template}
-            </pre>
-          ) : (
-            <p
-              style={{
-                color: "var(--text-3)",
-                fontSize: 13,
-                margin: 0,
-              }}
-            >
-              Pick a prompt and version to preview the template.
-            </p>
-          )}
+              Unload
+            </button>
+          ) : null}
         </div>
-      )}
+      </div>
+      {messages.map((msg, i) => (
+        <MessageEditor
+          key={i}
+          message={msg}
+          canDelete={messages.length > 1}
+          onChange={(next) =>
+            setMessages((prev) => prev.map((m, j) => (j === i ? next : m)))
+          }
+          onDelete={() => {
+            if (messages.length === 1) return; // never empty
+            setMessages((prev) => prev.filter((_, j) => j !== i));
+          }}
+          onMoveUp={
+            i === 0
+              ? undefined
+              : () =>
+                  setMessages((prev) => {
+                    const copy = [...prev];
+                    [copy[i - 1], copy[i]] = [copy[i], copy[i - 1]];
+                    return copy;
+                  })
+          }
+          onMoveDown={
+            i === messages.length - 1
+              ? undefined
+              : () =>
+                  setMessages((prev) => {
+                    const copy = [...prev];
+                    [copy[i + 1], copy[i]] = [copy[i], copy[i + 1]];
+                    return copy;
+                  })
+          }
+        />
+      ))}
+      <button
+        type="button"
+        className="btn btn-ghost btn-sm"
+        onClick={() =>
+          setMessages((prev) => [...prev, { role: "human", content: "" }])
+        }
+        style={{
+          width: "fit-content",
+          fontSize: 12,
+          borderStyle: "dashed",
+        }}
+      >
+        + Add message
+      </button>
     </section>
   );
 }

From 4ce6061087365d4ba6db9d60271c4efab306e1b5 Mon Sep 17 00:00:00 2001
From: gaurav0107 <gauravdubey0107@gmail.com>
Date: Mon, 8 Jun 2026 01:45:35 +0530
Subject: [PATCH 5/5] feat(web/playground): Save composer messages as a new
 version

Two paths:

- Loaded version: POST /v1/prompts/{id}/versions with the current
  messages. Plan B's api short-circuits identical messages and returns
  the existing row (HTTP 200) - re-saving an unchanged composer is a
  cheap no-op. The composer pins loadedVersionId to the response id so
  subsequent saves land as v2/v3/...

- No version loaded: open the inline name+slug form (slug auto-derived
  from name with override). On submit: create the prompt, post v1, and
  switch the composer to the loaded state.

The Save button sits in the prompt panel header next to Load/Version
pickers. Errors render inline above the +Add message button. The
canSave gate requires non-empty messages and no in-flight save or run.

The proxy routes /api/prompts and /api/prompts/{id}/versions already
exist - no new server code needed.

Signed-off-by: gaurav0107 <gauravdubey0107@gmail.com>
---
 web/src/components/PlaygroundClient.tsx       | 165 ++++++++++++++++++
 .../components/playground/SavePromptForm.tsx  |  91 ++++++++++
 2 files changed, 256 insertions(+)
 create mode 100644 web/src/components/playground/SavePromptForm.tsx

diff --git a/web/src/components/PlaygroundClient.tsx b/web/src/components/PlaygroundClient.tsx
index f4ed15b..f7d6994 100644
--- a/web/src/components/PlaygroundClient.tsx
+++ b/web/src/components/PlaygroundClient.tsx
@@ -7,6 +7,7 @@ import { useEffect, useMemo, useState, useTransition } from "react";
 
 import { ModelPicker } from "@/components/ModelPicker";
 import { MessageEditor } from "@/components/playground/MessageEditor";
+import { SavePromptForm } from "@/components/playground/SavePromptForm";
 
 /**
  * Interactive Playground canvas.
@@ -163,6 +164,114 @@ export function PlaygroundComposer({
 
   const isComposerEmpty = !messages.some((m) => m.content.trim().length > 0);
 
+  // Save flow. Two paths:
+  //   1. loadedVersionId !== null → POST a new version under the same prompt.
+  //      Plan B's api short-circuits identical messages and returns the
+  //      existing row (HTTP 200), so re-saving an unchanged composer is
+  //      a cheap no-op.
+  //   2. loadedVersionId === null → show the inline name+slug form; on
+  //      submit, create the prompt then post v1 and switch the composer
+  //      to the loaded state so subsequent saves create v2/v3/...
+  const [showSaveForm, setShowSaveForm] = useState(false);
+  const [savingBusy, setSavingBusy] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const canSave = !isComposerEmpty && !savingBusy && !pending;
+
+  async function postNewVersion(
+    targetPromptId: string,
+  ): Promise<{ id: string } | null> {
+    const resp = await fetch(`/api/prompts/${encodeURIComponent(targetPromptId)}/versions`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ template_messages: messages }),
+    });
+    if (!resp.ok && resp.status !== 200 && resp.status !== 201) {
+      let detail = `request failed (${resp.status})`;
+      try {
+        const data = await resp.json();
+        if (data && typeof data === "object" && "detail" in data) {
+          detail = String((data as { detail: unknown }).detail);
+        }
+      } catch {
+        /* ignore */
+      }
+      setSaveError(detail);
+      return null;
+    }
+    return (await resp.json()) as { id: string };
+  }
+
+  async function saveExisting() {
+    if (loadedVersionId === null) return;
+    const owner = prompts.find((p) =>
+      p.versions.some((v) => v.id === loadedVersionId),
+    );
+    if (!owner) {
+      setSaveError("loaded version not found in prompt catalog");
+      return;
+    }
+    setSavingBusy(true);
+    setSaveError(null);
+    try {
+      const created = await postNewVersion(owner.id);
+      if (created) {
+        setLoadedVersionId(created.id);
+        router.refresh();
+      }
+    } finally {
+      setSavingBusy(false);
+    }
+  }
+
+  async function saveNew(form: { name: string; slug: string }) {
+    setSavingBusy(true);
+    setSaveError(null);
+    try {
+      const create = await fetch("/api/prompts", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          project_id: projectId,
+          slug: form.slug,
+          name: form.name,
+        }),
+      });
+      if (!create.ok) {
+        let detail = `prompt create failed (${create.status})`;
+        try {
+          const data = await create.json();
+          if (data && typeof data === "object" && "detail" in data) {
+            detail = String((data as { detail: unknown }).detail);
+          }
+        } catch {
+          /* ignore */
+        }
+        setSaveError(detail);
+        return;
+      }
+      const prompt = (await create.json()) as { id: string };
+      const created = await postNewVersion(prompt.id);
+      if (created) {
+        setShowSaveForm(false);
+        setPromptId(prompt.id);
+        setVersionId(created.id);
+        setLoadedVersionId(created.id);
+        router.refresh();
+      }
+    } finally {
+      setSavingBusy(false);
+    }
+  }
+
+  function onClickSave() {
+    setSaveError(null);
+    if (loadedVersionId !== null) {
+      void saveExisting();
+    } else {
+      setShowSaveForm(true);
+    }
+  }
+
   function setVariable(key: string, value: string) {
     setVariables((prev) => ({ ...prev, [key]: value }));
   }
@@ -249,6 +358,13 @@ export function PlaygroundComposer({
         setMessages={setMessages}
         loadedVersionId={loadedVersionId}
         setLoadedVersionId={setLoadedVersionId}
+        canSave={canSave}
+        savingBusy={savingBusy}
+        saveError={saveError}
+        showSaveForm={showSaveForm}
+        onClickSave={onClickSave}
+        onCancelSave={() => setShowSaveForm(false)}
+        onSubmitSave={saveNew}
       />
       <VariablesCard
         keys={detectedVars}
@@ -331,6 +447,13 @@ function PromptSourceCard({
   setMessages,
   loadedVersionId,
   setLoadedVersionId,
+  canSave,
+  savingBusy,
+  saveError,
+  showSaveForm,
+  onClickSave,
+  onCancelSave,
+  onSubmitSave,
 }: {
   prompts: PromptOption[];
   promptId: string;
@@ -342,6 +465,13 @@ function PromptSourceCard({
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
   loadedVersionId: string | null;
   setLoadedVersionId: (id: string | null) => void;
+  canSave: boolean;
+  savingBusy: boolean;
+  saveError: string | null;
+  showSaveForm: boolean;
+  onClickSave: () => void;
+  onCancelSave: () => void;
+  onSubmitSave: (form: { name: string; slug: string }) => void;
 }) {
   function clearLoaded() {
     setPromptId("");
@@ -420,6 +550,20 @@ function PromptSourceCard({
               Unload
             </button>
           ) : null}
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={onClickSave}
+            disabled={!canSave}
+            title={
+              loadedVersionId !== null
+                ? "save as a new version under the loaded prompt"
+                : "save as a new prompt"
+            }
+            style={{ fontSize: 12 }}
+          >
+            {savingBusy ? "Saving..." : "Save"}
+          </button>
         </div>
       </div>
       {messages.map((msg, i) => (
@@ -456,6 +600,27 @@ function PromptSourceCard({
           }
         />
       ))}
+      {showSaveForm ? (
+        <SavePromptForm
+          busy={savingBusy}
+          onCancel={onCancelSave}
+          onSubmit={onSubmitSave}
+        />
+      ) : null}
+      {saveError ? (
+        <div
+          role="alert"
+          style={{
+            padding: "6px 10px",
+            fontSize: 12,
+            background: "var(--danger-soft)",
+            color: "var(--danger)",
+            borderRadius: "var(--r-2)",
+          }}
+        >
+          {saveError}
+        </div>
+      ) : null}
       <button
         type="button"
         className="btn btn-ghost btn-sm"
diff --git a/web/src/components/playground/SavePromptForm.tsx b/web/src/components/playground/SavePromptForm.tsx
new file mode 100644
index 0000000..1f6b487
--- /dev/null
+++ b/web/src/components/playground/SavePromptForm.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+
+const SLUG_RE = /[^a-z0-9-]+/g;
+
+function deriveSlug(name: string): string {
+  return name
+    .trim()
+    .toLowerCase()
+    .replace(SLUG_RE, "-")
+    .replace(/(^-+|-+$)/g, "")
+    .slice(0, 64);
+}
+
+export function SavePromptForm({
+  onSubmit,
+  onCancel,
+  busy,
+}: {
+  onSubmit: (next: { name: string; slug: string }) => void;
+  onCancel: () => void;
+  busy: boolean;
+}) {
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [slugTouched, setSlugTouched] = useState(false);
+  const effectiveSlug = slugTouched ? slug : deriveSlug(name);
+  const valid = name.trim().length >= 2 && effectiveSlug.length >= 2;
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Save as new prompt"
+      style={{
+        display: "grid",
+        gap: 8,
+        padding: 12,
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-3)",
+        background: "var(--surface-2)",
+      }}
+    >
+      <label style={{ display: "grid", gap: 4 }}>
+        <span style={{ fontSize: 11, color: "var(--text-3)" }}>Name</span>
+        <input
+          autoFocus
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="fraud-review"
+          style={{ padding: "6px 10px", fontSize: 13 }}
+        />
+      </label>
+      <label style={{ display: "grid", gap: 4 }}>
+        <span style={{ fontSize: 11, color: "var(--text-3)" }}>
+          Slug (auto from name)
+        </span>
+        <input
+          value={effectiveSlug}
+          onChange={(e) => {
+            setSlug(e.target.value);
+            setSlugTouched(true);
+          }}
+          placeholder="fraud-review"
+          className="mono"
+          style={{ padding: "6px 10px", fontSize: 12 }}
+        />
+      </label>
+      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+        <button
+          type="button"
+          className="btn btn-ghost btn-sm"
+          onClick={onCancel}
+          disabled={busy}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          className="btn btn-primary btn-sm"
+          onClick={() =>
+            onSubmit({ name: name.trim(), slug: effectiveSlug })
+          }
+          disabled={!valid || busy}
+        >
+          {busy ? "Saving..." : "Save"}
+        </button>
+      </div>
+    </div>
+  );
+}