diff --git a/apps/agent-forge/e2e/narrow.spec.ts b/apps/agent-forge/e2e/narrow.spec.ts
index 912f67690..c1d75aaaa 100644
--- a/apps/agent-forge/e2e/narrow.spec.ts
+++ b/apps/agent-forge/e2e/narrow.spec.ts
@@ -80,3 +80,16 @@ test('at 1280px the three-column layout has no drawer toggles', async ({ page })
   await expect(page.getByRole('button', { name: 'More actions' })).toHaveCount(0);
   await expect(page.getByRole('button', { name: 'Save' })).toBeVisible();
 });
+
+test('#/playground at 375px stacks into one column with nothing scrolling sideways', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.goto('/?token=e2e-studio-token#/playground');
+  const main = page.getByRole('main');
+  await expect(main.getByRole('heading', { name: 'Playground' })).toBeVisible();
+  expect(await horizontalOverflow(page)).toBe(0);
+  expect(await main.evaluate((el) => el.scrollWidth - el.clientWidth)).toBe(0);
+  for (const name of ['Run', 'Add message', 'Save as new prompt version']) {
+    const box = await main.getByRole('button', { name, exact: true }).boundingBox();
+    expect(box && box.x >= 0 && box.x + box.width <= 375, `${name} is on-screen`).toBe(true);
+  }
+});
diff --git a/apps/agent-forge/server/playground.ts b/apps/agent-forge/server/playground.ts
index 1e7999483..bcaccac05 100644
--- a/apps/agent-forge/server/playground.ts
+++ b/apps/agent-forge/server/playground.ts
@@ -23,7 +23,6 @@ import {
   InMemoryApprovalStore,
   SDKError,
   type AgentEvent,
-  type AgentEventUsage,
   type AgentSpec,
   type Message,
 } from '@lousho/build-ai-agent';
@@ -38,6 +37,7 @@ import {
 import { buildAgentFromSpec } from './buildAgent';
 import { observeTarget } from './observeProxy';
 import type { SecretsStore } from './secretsStore';
+import type { PlaygroundEvent, PlaygroundMessage, PlaygroundRunRequest } from '../shared/wireTypes';
 
 /** The agent name every playground run reports under. */
 const PLAYGROUND_AGENT_NAME = 'playground';
@@ -47,28 +47,7 @@ const PROMPT_REF_ATTR = 'lousho.prompt.ref';
 const ROLES = new Set(['system', 'user', 'assistant']);
 const MAX_MESSAGES = 200;
 
-interface PlaygroundMessage {
-  role: 'system' | 'user' | 'assistant';
-  content: string;
-}
-
-/** The validated `POST /playground/run` body. */
-interface PlaygroundRunRequest {
-  messages: PlaygroundMessage[];
-  variables?: Record<string, string>;
-  /** `provider/model` (`openai/gpt-4o-mini`, `mock`, `ollama/llama3.2`). */
-  model: string;
-  /** Tool names the Studio already resolves (`current-date`, `day-name`, `http`, `web-fetch`, `demo-approval`). */
-  tools?: string[];
-  promptRef?: string;
-}
-
-/** One SSE `data:` payload of the stream. */
-export type PlaygroundEvent =
-  | { type: 'delta'; text: string }
-  | { type: 'tool_call'; id: string; name: string; args: Record<string, unknown> }
-  | { type: 'done'; finishReason: string; text: string; traceId?: string; usage?: AgentEventUsage }
-  | { type: 'error'; message: string; code?: string };
+export type { PlaygroundEvent };
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === 'object' && value !== null && !Array.isArray(value);
diff --git a/apps/agent-forge/shared/wireTypes.ts b/apps/agent-forge/shared/wireTypes.ts
index a86fd3cdf..a4a0d58a7 100644
--- a/apps/agent-forge/shared/wireTypes.ts
+++ b/apps/agent-forge/shared/wireTypes.ts
@@ -10,7 +10,7 @@
  * defines the wire shape of the status/events the server reports back to
  * the app over `GET /agents/:id/status` and `WS /agents/:id/stream`.
  */
-import type { CheckpointStatus, TrajectoryComparison, TrajectoryStep } from '@lousho/build-ai-agent';
+import type { AgentEventUsage, CheckpointStatus, TrajectoryComparison, TrajectoryStep } from '@lousho/build-ai-agent';
 
 /**
  * Status pill states the app's agent list / topbar render (as in the
@@ -292,3 +292,27 @@ export interface ForkRunResponse {
 
 /** `GET /runs/compare?a=&b=` - `compareTrajectories(a, b)`. */
 export type RunComparisonPayload = TrajectoryComparison;
+
+/** One `POST /playground/run` message (server/playground.ts; the Playground screen's editor rows). */
+export interface PlaygroundMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string;
+}
+
+/** The `POST /playground/run` body. */
+export interface PlaygroundRunRequest {
+  messages: PlaygroundMessage[];
+  variables?: Record<string, string>;
+  /** `provider/model` (`openai/gpt-4o-mini`, `mock`, `ollama/llama3.2`). */
+  model: string;
+  /** Tool names the Studio already resolves (`current-date`, `day-name`, `http`, `web-fetch`, `demo-approval`). */
+  tools?: string[];
+  promptRef?: string;
+}
+
+/** One SSE `data:` payload of the `POST /playground/run` stream; every stream ends with one `done` or `error`. */
+export type PlaygroundEvent =
+  | { type: 'delta'; text: string }
+  | { type: 'tool_call'; id: string; name: string; args: Record<string, unknown> }
+  | { type: 'done'; finishReason: string; text: string; traceId?: string; usage?: AgentEventUsage }
+  | { type: 'error'; message: string; code?: string };
diff --git a/apps/agent-forge/src/observe/observeClient.ts b/apps/agent-forge/src/observe/observeClient.ts
index 3b8c6bc87..3172f10bc 100644
--- a/apps/agent-forge/src/observe/observeClient.ts
+++ b/apps/agent-forge/src/observe/observeClient.ts
@@ -222,6 +222,53 @@ export class ObserveClient {
   postScore(score: NewScore): Promise<{ score_id: string }> {
     return this.request('/api/v1/scores', { method: 'POST', body: score });
   }
+
+  /** `GET /api/v1/prompts/:name/:ref` (ref = `latest`, a version number or a label); `undefined` on the daemon's 404. */
+  async getPrompt(name: string, ref = 'latest'): Promise<ObservePrompt | undefined> {
+    try {
+      const body = await this.request<{ prompt: ObservePrompt }>(
+        `/api/v1/prompts/${encodeURIComponent(name)}/${encodeURIComponent(ref)}`
+      );
+      return body.prompt;
+    } catch (error) {
+      if (error instanceof ObserveApiError && error.status === 404) return undefined;
+      throw error;
+    }
+  }
+
+  /** `POST /api/v1/prompts` - pushes a new version (`unchanged` when the text matches the latest one). */
+  createPrompt(input: NewPromptVersion): Promise<PromptPushResult> {
+    return this.request('/api/v1/prompts', { method: 'POST', body: input });
+  }
+}
+
+/** One registry prompt version, as `GET /api/v1/prompts/:name/:ref` returns it. */
+export interface ObservePrompt {
+  prompt_id: string;
+  name: string;
+  version: number;
+  labels: string[];
+  /** `null` when the version was pushed without a variable list. */
+  variables: string[] | null;
+  hash: string;
+  text: string;
+  created_at: number;
+}
+
+/** The body of {@link ObserveClient.createPrompt}. */
+export interface NewPromptVersion {
+  name: string;
+  text: string;
+  labels?: string[];
+  variables?: string[];
+}
+
+/** The answer of {@link ObserveClient.createPrompt}: the stored version, and whether it was new. */
+export interface PromptPushResult {
+  prompt: ObservePrompt;
+  created: boolean;
+  version: number;
+  unchanged: boolean;
 }
 
 export const observeClient = new ObserveClient();
diff --git a/apps/agent-forge/src/screens/playground/MessageEditor.tsx b/apps/agent-forge/src/screens/playground/MessageEditor.tsx
new file mode 100644
index 000000000..0d6b6847a
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/MessageEditor.tsx
@@ -0,0 +1,72 @@
+import type { PlaygroundMessage, PlaygroundRole } from './types';
+
+const ROLES: PlaygroundRole[] = ['system', 'user', 'assistant'];
+const MAX_ROWS = 200;
+
+interface MessageEditorProps {
+  messages: PlaygroundMessage[];
+  onChange: (messages: PlaygroundMessage[]) => void;
+}
+
+/** The message rows: a role select and a text area each, plus remove and "Add message". */
+export function MessageEditor({ messages, onChange }: MessageEditorProps) {
+  const update = (index: number, patch: Partial<PlaygroundMessage>) =>
+    onChange(messages.map((m, i) => (i === index ? { ...m, ...patch } : m)));
+  const remove = (index: number) => onChange(messages.filter((_, i) => i !== index));
+  const add = () => {
+    const last = messages.at(-1)?.role;
+    onChange([...messages, { role: last === 'user' ? 'assistant' : 'user', content: '' }]);
+  };
+
+  return (
+    <section className="pg-panel pg-messages" aria-labelledby="pg-messages-title">
+      <h3 id="pg-messages-title" className="pg-panel-title">
+        Messages
+      </h3>
+      <ol className="pg-message-list">
+        {messages.map((message, index) => (
+          <li key={index} className={`pg-message pg-message-${message.role}`}>
+            <div className="pg-message-head">
+              <label>
+                <span className="visually-hidden">Role of message {index + 1}</span>
+                <select
+                  className="pg-role"
+                  value={message.role}
+                  onChange={(e) => update(index, { role: e.target.value as PlaygroundRole })}
+                >
+                  {ROLES.map((role) => (
+                    <option key={role} value={role}>
+                      {role}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <button
+                type="button"
+                className="btn btn-ghost pg-remove"
+                aria-label={`Remove message ${index + 1}`}
+                disabled={messages.length === 1}
+                onClick={() => remove(index)}
+              >
+                Remove
+              </button>
+            </div>
+            <label>
+              <span className="visually-hidden">Content of message {index + 1}</span>
+              <textarea
+                className="pg-content"
+                rows={message.role === 'system' ? 4 : 3}
+                placeholder={message.role === 'system' ? 'System instructions, e.g. You are {persona}.' : 'Message text'}
+                value={message.content}
+                onChange={(e) => update(index, { content: e.target.value })}
+              />
+            </label>
+          </li>
+        ))}
+      </ol>
+      <button type="button" className="btn" onClick={add} disabled={messages.length >= MAX_ROWS}>
+        Add message
+      </button>
+    </section>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/ModelPicker.tsx b/apps/agent-forge/src/screens/playground/ModelPicker.tsx
new file mode 100644
index 000000000..8889f7394
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/ModelPicker.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+
+import type { ProviderKeyStatus } from '../../../shared/wireTypes';
+import { runtimeClient } from '../../runtime/runtimeClient';
+import { MOCK_PROVIDER, defaultProvider, providerOptions } from './request';
+
+/** The picker's value; `provider: null` means "not chosen yet" (the default is used). */
+export interface ModelChoice {
+  provider: string | null;
+  model: string;
+}
+
+/** The Studio's provider keys (`GET /settings/providers`); empty until they load, or when the server cannot say. */
+export function useProviderKeys(): ProviderKeyStatus[] {
+  const [keys, setKeys] = useState<ProviderKeyStatus[]>([]);
+  useEffect(() => {
+    let live = true;
+    runtimeClient.listProviderKeys().then(
+      (list) => {
+        if (live) setKeys(list);
+      },
+      () => undefined
+    );
+    return () => {
+      live = false;
+    };
+  }, []);
+  return keys;
+}
+
+/** The provider to use: the chosen one, else the first with a key, else `mock`. */
+export function effectiveProvider(choice: ModelChoice, keys: readonly ProviderKeyStatus[]): string {
+  return choice.provider ?? defaultProvider(keys);
+}
+
+interface ModelPickerProps {
+  choice: ModelChoice;
+  keys: ProviderKeyStatus[];
+  onChange: (choice: ModelChoice) => void;
+}
+
+function placeholderFor(provider: string): string {
+  if (provider === MOCK_PROVIDER) return 'mock needs no model';
+  return provider === '' ? 'provider/model' : 'model name';
+}
+
+/** Provider select (keyed providers, `ollama`, `mock`, or custom) plus a model-name input. */
+export function ModelPicker({ choice, keys, onChange }: ModelPickerProps) {
+  const provider = effectiveProvider(choice, keys);
+  const options = providerOptions(keys);
+  if (provider !== '' && !options.includes(provider)) options.unshift(provider);
+  const isMock = provider === MOCK_PROVIDER;
+  return (
+    <div className="pg-model">
+      <label className="pg-field">
+        <span className="pg-field-label">Provider</span>
+        <select value={provider} onChange={(e) => onChange({ ...choice, provider: e.target.value })}>
+          {options.map((p) => (
+            <option key={p} value={p}>
+              {p}
+            </option>
+          ))}
+          <option value="">custom (provider/model)</option>
+        </select>
+      </label>
+      <label className="pg-field">
+        <span className="pg-field-label">Model</span>
+        <input
+          type="text"
+          value={isMock ? '' : choice.model}
+          disabled={isMock}
+          placeholder={placeholderFor(provider)}
+          onChange={(e) => onChange({ provider, model: e.target.value })}
+        />
+      </label>
+    </div>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/PlaygroundScreen.tsx b/apps/agent-forge/src/screens/playground/PlaygroundScreen.tsx
new file mode 100644
index 000000000..b1ac27af7
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/PlaygroundScreen.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { useRoute } from '../../router/useRoute';
+import { MessageEditor } from './MessageEditor';
+import { ModelPicker, effectiveProvider, useProviderKeys, type ModelChoice } from './ModelPicker';
+import { RunOutput } from './RunOutput';
+import { SavePrompt } from './SavePrompt';
+import { ToolToggles } from './ToolToggles';
+import { VariableInputs } from './VariableInputs';
+import { buildRunBody, modelString } from './request';
+import { usePrefill, type Prefill } from './usePrefill';
+import { useRun } from './useRun';
+import { detectVariables } from './variables';
+import type { PlaygroundMessage } from './types';
+import './playground.css';
+
+const EMPTY_MESSAGES: PlaygroundMessage[] = [
+  { role: 'system', content: '' },
+  { role: 'user', content: '' },
+];
+
+/** The query keys that name a deep link; the screen remounts (and re-loads) when any of them changes. */
+const DEEP_LINK_KEYS = ['trace', 'fromObs', 'prompt'];
+
+/** `#/playground` keyed on its deep link, so back/forward between two links loads the second one. */
+export function PlaygroundRoute() {
+  const { query } = useRoute();
+  return <PlaygroundScreen key={DEEP_LINK_KEYS.map((k) => query.get(k) ?? '').join('|')} />;
+}
+
+/**
+ * `#/playground` - try messages against a model without editing an agent:
+ * message rows, `{variable}` inputs, a model picker, tools borrowed from a
+ * saved agent, the streamed reply, "Save as new prompt version" and "Open
+ * trace". Deep links pre-fill it: `?trace=&fromObs=` (a trace's generation)
+ * and `?prompt=name[@ref]` (a registry prompt). Runs go to the Studio server,
+ * so they work with the observe daemon down; only the deep-link loads and
+ * the save need the daemon.
+ */
+export function PlaygroundScreen() {
+  const { query } = useRoute();
+  const [messages, setMessages] = useState<PlaygroundMessage[]>(EMPTY_MESSAGES);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [choice, setChoice] = useState<ModelChoice>({ provider: null, model: '' });
+  const [tools, setTools] = useState<string[]>([]);
+  const [prompt, setPrompt] = useState<Prefill['prompt']>();
+  const keys = useProviderKeys();
+  const { run, start, stop } = useRun();
+
+  const apply = useCallback((prefill: Prefill) => {
+    if (prefill.messages) setMessages(prefill.messages);
+    if (prefill.model) setChoice(prefill.model);
+    if (prefill.prompt) setPrompt(prefill.prompt);
+  }, []);
+  const notice = usePrefill(query, apply);
+
+  const names = useMemo(() => detectVariables(messages), [messages]);
+  const model = modelString(effectiveProvider(choice, keys), choice.model);
+  const body = buildRunBody({ messages, values, model, tools, promptRef: prompt?.promptRef });
+  const systemText = messages.find((m) => m.role === 'system')?.content ?? '';
+  const running = run.status === 'running';
+
+  return (
+    <div className="pg-screen">
+      <header className="pg-head">
+        <h2>Playground</h2>
+        {prompt && <span className="pg-prompt-chip">{prompt.promptRef}</span>}
+      </header>
+      {notice && (
+        <p className="pg-notice" role="status">
+          {notice}
+        </p>
+      )}
+      <div className="pg-layout">
+        <div className="pg-editor">
+          <MessageEditor messages={messages} onChange={setMessages} />
+          <VariableInputs names={names} values={values} onChange={setValues} />
+        </div>
+        <div className="pg-side">
+          <section className="pg-panel pg-settings" aria-labelledby="pg-settings-title">
+            <h3 id="pg-settings-title" className="pg-panel-title">
+              Model
+            </h3>
+            <ModelPicker choice={choice} keys={keys} onChange={setChoice} />
+            <ToolToggles tools={tools} onChange={setTools} />
+            <div className="pg-actions">
+              <button
+                type="button"
+                className="btn btn-primary"
+                disabled={!body || running}
+                onClick={() => body && start(body)}
+              >
+                Run
+              </button>
+              <button type="button" className="btn" disabled={!running} onClick={stop}>
+                Stop
+              </button>
+            </div>
+            <SavePrompt promptName={prompt?.name} systemText={systemText} />
+          </section>
+          <RunOutput run={run} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/RunOutput.tsx b/apps/agent-forge/src/screens/playground/RunOutput.tsx
new file mode 100644
index 000000000..6f553f56b
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/RunOutput.tsx
@@ -0,0 +1,55 @@
+import { MessageView } from '../../ui/MessageView';
+import { StatusPill } from '../../ui/StatusPill';
+import type { RunState } from './runState';
+
+/**
+ * The run's output: status pill, tool calls, the reply and an "Open trace"
+ * link. While streaming the reply is plain text that grows per delta; once
+ * the run ends it is a `MessageView` (chunked, so a huge reply stays responsive).
+ */
+export function RunOutput({ run }: { run: RunState }) {
+  if (run.status === 'idle') {
+    return (
+      <section className="pg-panel pg-output" aria-labelledby="pg-output-title">
+        <h3 id="pg-output-title" className="pg-panel-title">
+          Output
+        </h3>
+        <p className="pg-hint">Run the messages to see the reply here.</p>
+      </section>
+    );
+  }
+  return (
+    <section className="pg-panel pg-output" aria-labelledby="pg-output-title" aria-busy={run.status === 'running'}>
+      <div className="pg-output-head">
+        <h3 id="pg-output-title" className="pg-panel-title">
+          Output
+        </h3>
+        <StatusPill status={run.status} />
+        {run.traceId && (
+          <a className="pg-trace-link" href={`#/traces/${encodeURIComponent(run.traceId)}`}>
+            Open trace
+          </a>
+        )}
+      </div>
+      {run.error && (
+        <div className="pg-error" role="alert">
+          {run.error}
+        </div>
+      )}
+      {run.toolCalls.length > 0 && (
+        <ul className="pg-tool-calls" aria-label="Tool calls">
+          {run.toolCalls.map((call) => (
+            <li key={call.id} className="pg-tool-call" title={JSON.stringify(call.args)}>
+              {call.name}
+            </li>
+          ))}
+        </ul>
+      )}
+      {run.status === 'running' ? (
+        <pre className="pg-stream">{run.text}</pre>
+      ) : (
+        run.text && <MessageView value={run.text} label="Reply" />
+      )}
+    </section>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/SavePrompt.tsx b/apps/agent-forge/src/screens/playground/SavePrompt.tsx
new file mode 100644
index 000000000..ce8613b12
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/SavePrompt.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+
+import { ObserveDaemonDownError, observeClient } from '../../observe/observeClient';
+import { useToast } from '../../ui/Toast';
+import { detectVariables } from './variables';
+
+/** The toast text for a failed push. */
+function failureMessage(error: unknown): string {
+  if (error instanceof ObserveDaemonDownError) {
+    return 'Could not save: the observe daemon is not reachable. Start it with `lousho observe start`.';
+  }
+  return `Could not save the prompt: ${error instanceof Error ? error.message : String(error)}`;
+}
+
+interface SavePromptProps {
+  /** The loaded prompt's name, when the Playground came from one. */
+  promptName?: string;
+  /** The system message's content: the text a new version stores. */
+  systemText: string;
+}
+
+/**
+ * "Save as new prompt version": pushes the system message (and its
+ * `{variables}`) to the registry under the loaded prompt's name, or a typed
+ * one. Disabled, with a hint, while there is no system message.
+ */
+export function SavePrompt({ promptName, systemText }: SavePromptProps) {
+  const toast = useToast();
+  const [name, setName] = useState(promptName ?? '');
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    if (promptName) setName(promptName);
+  }, [promptName]);
+
+  const hasSystem = systemText.trim() !== '';
+  const save = () => {
+    const target = name.trim();
+    setSaving(true);
+    observeClient
+      .createPrompt({ name: target, text: systemText, variables: detectVariables([{ role: 'system', content: systemText }]) })
+      .then(
+        (result) =>
+          toast.show({
+            tone: 'success',
+            message: result.unchanged
+              ? `${target} unchanged (still v${result.version})`
+              : `Saved ${target} v${result.version}`,
+          }),
+        (error: unknown) => toast.show({ tone: 'error', message: failureMessage(error) })
+      )
+      .finally(() => setSaving(false));
+  };
+
+  return (
+    <div className="pg-save">
+      <label className="pg-field">
+        <span className="pg-field-label">Prompt name</span>
+        <input type="text" value={name} placeholder="e.g. support-greeter" onChange={(e) => setName(e.target.value)} />
+      </label>
+      <button type="button" className="btn" disabled={!hasSystem || !name.trim() || saving} onClick={save}>
+        Save as new prompt version
+      </button>
+      {!hasSystem && <p className="pg-hint">Add a system message to save it as a prompt version.</p>}
+    </div>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/ToolToggles.tsx b/apps/agent-forge/src/screens/playground/ToolToggles.tsx
new file mode 100644
index 000000000..b0093c4a4
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/ToolToggles.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+
+import type { AgentStoreEntry } from '../../persistence/AgentStore';
+import { runtimeClient } from '../../runtime/runtimeClient';
+
+/** The saved agents (`GET /agents`); empty until they load, or when the server cannot say. */
+function useAgentEntries(): AgentStoreEntry[] {
+  const [agents, setAgents] = useState<AgentStoreEntry[]>([]);
+  useEffect(() => {
+    let live = true;
+    runtimeClient.listAgents().then(
+      (list) => {
+        if (live) setAgents(list);
+      },
+      () => undefined
+    );
+    return () => {
+      live = false;
+    };
+  }, []);
+  return agents;
+}
+
+/** Pick an agent to borrow its tools, then toggle each one; `onChange` gets the enabled tool names. */
+export function ToolToggles({ tools, onChange }: { tools: string[]; onChange: (tools: string[]) => void }) {
+  const agents = useAgentEntries();
+  const [agentId, setAgentId] = useState('');
+  const toolsOf = (id: string) => agents.find((a) => a.id === id)?.spec.tools ?? [];
+  const available = toolsOf(agentId);
+
+  const pick = (id: string) => {
+    setAgentId(id);
+    onChange(toolsOf(id));
+  };
+  const toggle = (name: string, on: boolean) => onChange(on ? [...tools, name] : tools.filter((t) => t !== name));
+
+  return (
+    <fieldset className="pg-tools">
+      <legend className="pg-field-label">Tools</legend>
+      <label className="pg-field">
+        <span className="visually-hidden">Tools from agent</span>
+        <select value={agentId} onChange={(e) => pick(e.target.value)}>
+          <option value="">No tools</option>
+          {agents.map((a) => (
+            <option key={a.id} value={a.id}>
+              {`Tools of ${a.spec.name || a.id}`}
+            </option>
+          ))}
+        </select>
+      </label>
+      {agentId && available.length === 0 && <p className="pg-hint">This agent has no tools.</p>}
+      {available.map((name) => (
+        <label key={name} className="pg-check">
+          <input type="checkbox" checked={tools.includes(name)} onChange={(e) => toggle(name, e.target.checked)} />
+          {name}
+        </label>
+      ))}
+    </fieldset>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/VariableInputs.tsx b/apps/agent-forge/src/screens/playground/VariableInputs.tsx
new file mode 100644
index 000000000..bf1be4ec4
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/VariableInputs.tsx
@@ -0,0 +1,27 @@
+interface VariableInputsProps {
+  names: string[];
+  values: Record<string, string>;
+  onChange: (values: Record<string, string>) => void;
+}
+
+/** One input per `{variable}` found in the messages; nothing when there are none. */
+export function VariableInputs({ names, values, onChange }: VariableInputsProps) {
+  if (names.length === 0) return null;
+  return (
+    <section className="pg-panel pg-variables" aria-labelledby="pg-variables-title">
+      <h3 id="pg-variables-title" className="pg-panel-title">
+        Variables
+      </h3>
+      {names.map((name) => (
+        <label key={name} className="pg-field">
+          <span className="pg-field-label">{`{${name}}`}</span>
+          <input
+            type="text"
+            value={values[name] ?? ''}
+            onChange={(e) => onChange({ ...values, [name]: e.target.value })}
+          />
+        </label>
+      ))}
+    </section>
+  );
+}
diff --git a/apps/agent-forge/src/screens/playground/__tests__/PlaygroundScreen.test.tsx b/apps/agent-forge/src/screens/playground/__tests__/PlaygroundScreen.test.tsx
new file mode 100644
index 000000000..9060afade
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/__tests__/PlaygroundScreen.test.tsx
@@ -0,0 +1,302 @@
+import { act } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../ui/__tests__/render';
+import { ToastProvider } from '../../../ui/Toast';
+import type { ObserveObservationRow, ObserveTraceDetail } from '../../../observe/types';
+import { PlaygroundRoute, PlaygroundScreen } from '../PlaygroundScreen';
+
+function gen(over: Partial<ObserveObservationRow> & { obs_id: string }): ObserveObservationRow {
+  return {
+    trace_id: 't1', session_id: null, agent_id: 'a1', parent_obs_id: null, kind: 'generation', name: 'llm',
+    start: 0, end: 1, status: 'ok', input: null, output: null, model: null, usage_input_tokens: null,
+    usage_output_tokens: null, usage_cached_tokens: null, usage_reasoning_tokens: null, cost_usd: null,
+    cost_partial: null, usage_estimated: null, truncated: false, attrs: null, ...over,
+  };
+}
+
+const TRACE: ObserveTraceDetail = {
+  trace_id: 't1',
+  observations: [
+    gen({ obs_id: 'root', kind: 'span' }),
+    gen({
+      obs_id: 'g1',
+      parent_obs_id: 'root',
+      model: 'gpt-4o-mini',
+      attrs: { 'gen_ai.provider.name': 'openai' },
+      input: JSON.stringify([
+        { role: 'system', content: 'You are {persona}.' },
+        { role: 'user', content: 'Hi there' },
+      ]),
+    }),
+  ],
+  scores: [],
+};
+
+const PROMPT = {
+  prompt_id: 'p1', name: 'greeter', version: 2, labels: ['prod'], variables: ['persona'], hash: 'h', text: 'You are {persona}.', created_at: 0,
+};
+
+function json(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), { status, headers: { 'Content-Type': 'application/json' } });
+}
+
+/** A controllable SSE body: `send` enqueues one `data:` frame, `end` closes it. */
+function sseStream() {
+  let controller!: ReadableStreamDefaultController<Uint8Array>;
+  const body = new ReadableStream<Uint8Array>({ start: (c) => void (controller = c) });
+  const encoder = new TextEncoder();
+  return {
+    response: () => new Response(body, { status: 200, headers: { 'content-type': 'text/event-stream' } }),
+    send: (event: unknown) => controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`)),
+    end: () => controller.close(),
+  };
+}
+
+type Route = (url: string, init?: RequestInit) => Response | Promise<Response> | undefined;
+
+/** Stubs fetch for the Studio server (agents, provider keys) and the observe proxy; `extra` answers first. */
+function server(extra: Route = () => undefined) {
+  const fetchFn = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = String(input);
+    const answer = await extra(url, init);
+    if (answer) return answer;
+    if (url === '/settings/providers') return json(200, [{ provider: 'openai', hasKey: true, masked: '••••1234' }]);
+    if (url === '/agents') return json(200, []);
+    if (url.startsWith('/observe/api/v1/traces/t1')) return json(200, TRACE);
+    if (url.startsWith('/observe/api/v1/traces/')) return json(404, { error: 'No trace.' });
+    if (url === '/observe/api/v1/prompts/greeter/latest') return json(200, { prompt: PROMPT });
+    return json(404, { error: `unexpected ${url}` });
+  });
+  vi.stubGlobal('fetch', fetchFn);
+  return fetchFn;
+}
+
+async function waitFor(check: () => boolean, timeoutMs = 2000) {
+  const until = Date.now() + timeoutMs;
+  while (!check()) {
+    if (Date.now() > until) throw new Error('waitFor timed out');
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 10));
+    });
+  }
+}
+
+function mount(hash = '#/playground') {
+  window.history.replaceState(null, '', `/${hash}`);
+  return render(
+    <ToastProvider>
+      <PlaygroundScreen />
+    </ToastProvider>,
+  );
+}
+
+const contents = (c: HTMLElement) => [...c.querySelectorAll<HTMLTextAreaElement>('.pg-content')].map((t) => t.value);
+const roles = (c: HTMLElement) => [...c.querySelectorAll<HTMLSelectElement>('.pg-role')].map((s) => s.value);
+const button = (c: HTMLElement, name: string) =>
+  [...c.querySelectorAll('button')].find((b) => b.textContent?.trim() === name) as HTMLButtonElement;
+
+function typeInto(el: HTMLTextAreaElement | HTMLInputElement, value: string) {
+  const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  act(() => {
+    Object.getOwnPropertyDescriptor(proto, 'value')!.set!.call(el, value);
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+}
+
+beforeEach(() => {
+  window.history.replaceState(null, '', '/');
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+  window.history.replaceState(null, '', '/');
+});
+
+describe('PlaygroundScreen', () => {
+  it('shows one input per detected variable, in first-seen order', async () => {
+    server();
+    const c = mount();
+    const [system, user] = [...c.querySelectorAll<HTMLTextAreaElement>('.pg-content')];
+    typeInto(system!, 'You are {persona}, speaking {lang}.');
+    typeInto(user!, 'Hi {name} in {lang}');
+    const labels = [...c.querySelectorAll('.pg-variables .pg-field-label')].map((l) => l.textContent);
+    expect(labels).toEqual(['{persona}', '{lang}', '{name}']);
+  });
+
+  it('pre-fills messages and model from ?trace=&fromObs=', async () => {
+    const fetchFn = server();
+    const c = mount('#/playground?trace=t1&fromObs=g1');
+    await waitFor(() => contents(c)[0] === 'You are {persona}.');
+    expect(contents(c)).toEqual(['You are {persona}.', 'Hi there']);
+    expect(roles(c)).toEqual(['system', 'user']);
+    expect((c.querySelector('.pg-model select') as HTMLSelectElement).value).toBe('openai');
+    expect((c.querySelector('.pg-model input') as HTMLInputElement).value).toBe('gpt-4o-mini');
+    expect(fetchFn.mock.calls.some(([u]) => String(u) === '/observe/api/v1/traces/t1')).toBe(true);
+    expect(window.location.hash).toBe('#/playground?trace=t1&fromObs=g1');
+  });
+
+  it('shows a notice and an empty editor for a fromObs link without a trace, or a missing generation', async () => {
+    server();
+    let c = mount('#/playground?fromObs=g1');
+    await waitFor(() => c.querySelector('.pg-notice') !== null);
+    expect(c.querySelector('.pg-notice')!.textContent).toContain('no trace');
+    expect(contents(c)).toEqual(['', '']);
+
+    c = mount('#/playground?trace=t1&fromObs=nope');
+    await waitFor(() => c.querySelector('.pg-notice') !== null);
+    expect(c.querySelector('.pg-notice')!.textContent).toContain("'nope' was not found");
+  });
+
+  it('shows a daemon-down notice when the trace cannot be loaded, and can still run', async () => {
+    const stream = sseStream();
+    server((url) => {
+      if (url.startsWith('/observe/')) return json(502, { error: 'down' });
+      if (url === '/playground/run') return stream.response();
+      return undefined;
+    });
+    const c = mount('#/playground?trace=t1&fromObs=g1');
+    await waitFor(() => c.querySelector('.pg-notice') !== null);
+    expect(c.querySelector('.pg-notice')!.textContent).toContain('lousho observe start');
+    typeInto(c.querySelectorAll<HTMLTextAreaElement>('.pg-content')[1]!, 'hello');
+    act(() => button(c, 'Run').click());
+    stream.send({ type: 'done', finishReason: 'stop', text: 'ok' });
+    stream.end();
+    await waitFor(() => c.querySelector('.pg-output .status-pill')?.textContent === 'done');
+  });
+
+  it('renders streamed deltas incrementally, then links the trace', async () => {
+    const stream = sseStream();
+    let sent: Record<string, unknown> | undefined;
+    server((url, init) => {
+      if (url !== '/playground/run') return undefined;
+      sent = JSON.parse(init!.body as string) as Record<string, unknown>;
+      return stream.response();
+    });
+    const c = mount();
+    const [system, user] = [...c.querySelectorAll<HTMLTextAreaElement>('.pg-content')];
+    typeInto(system!, 'Be {tone}.');
+    typeInto(user!, 'Hello');
+    typeInto(c.querySelector('.pg-variables input') as HTMLInputElement, 'brief');
+    await waitFor(() => (c.querySelector('.pg-model select') as HTMLSelectElement).value === 'openai');
+    typeInto(c.querySelector('.pg-model input') as HTMLInputElement, 'gpt-4o-mini');
+    act(() => button(c, 'Run').click());
+
+    await waitFor(() => sent !== undefined);
+    expect(sent).toEqual({
+      messages: [
+        { role: 'system', content: 'Be {tone}.' },
+        { role: 'user', content: 'Hello' },
+      ],
+      variables: { tone: 'brief' },
+      model: 'openai/gpt-4o-mini',
+    });
+
+    stream.send({ type: 'delta', text: 'Hel' });
+    await waitFor(() => c.querySelector('.pg-stream')?.textContent === 'Hel');
+    expect(c.querySelector('.pg-output .status-pill')?.textContent).toBe('running');
+    stream.send({ type: 'delta', text: 'lo!' });
+    await waitFor(() => c.querySelector('.pg-stream')?.textContent === 'Hello!');
+
+    stream.send({ type: 'done', finishReason: 'stop', text: 'Hello!', traceId: 'tr-9' });
+    stream.end();
+    await waitFor(() => c.querySelector('a[href="#/traces/tr-9"]') !== null);
+    expect(c.querySelector('.pg-output .status-pill')?.textContent).toBe('done');
+    expect(c.querySelector('.pg-output .mv')?.textContent).toContain('Hello!');
+  });
+
+  it('shows an error event as an alert banner', async () => {
+    const stream = sseStream();
+    server((url) => (url === '/playground/run' ? stream.response() : undefined));
+    const c = mount();
+    typeInto(c.querySelectorAll<HTMLTextAreaElement>('.pg-content')[1]!, 'hi');
+    act(() => button(c, 'Run').click());
+    stream.send({ type: 'error', message: 'No key', code: 'LOUSHO_PROVIDER_MISSING_API_KEY' });
+    stream.end();
+    await waitFor(() => c.querySelector('.pg-output [role="alert"]') !== null);
+    expect(c.querySelector('.pg-output [role="alert"]')!.textContent).toContain('No key');
+  });
+
+  it('Stop aborts the stream', async () => {
+    let signal: AbortSignal | undefined;
+    server((url, init) => {
+      if (url !== '/playground/run') return undefined;
+      signal = init!.signal ?? undefined;
+      return sseStream().response();
+    });
+    const c = mount();
+    typeInto(c.querySelectorAll<HTMLTextAreaElement>('.pg-content')[1]!, 'hi');
+    act(() => button(c, 'Run').click());
+    await waitFor(() => signal !== undefined);
+    act(() => button(c, 'Stop').click());
+    expect(signal!.aborted).toBe(true);
+    await waitFor(() => c.querySelector('.pg-output .status-pill')?.textContent === 'stopped');
+  });
+
+  it('loads ?prompt= as the system message, sends promptRef, and saves a new version', async () => {
+    const stream = sseStream();
+    let runBody: Record<string, unknown> | undefined;
+    let pushed: unknown;
+    server((url, init) => {
+      if (url === '/playground/run') {
+        runBody = JSON.parse(init!.body as string) as Record<string, unknown>;
+        return stream.response();
+      }
+      if (url === '/observe/api/v1/prompts' && init?.method === 'POST') {
+        pushed = JSON.parse(init.body as string);
+        return json(201, { prompt: { ...PROMPT, version: 3 }, created: true, version: 3, unchanged: false });
+      }
+      return undefined;
+    });
+    const c = mount('#/playground?prompt=greeter');
+    await waitFor(() => contents(c)[0] === 'You are {persona}.');
+    expect(roles(c)).toEqual(['system', 'user']);
+    expect((c.querySelector('.pg-save input') as HTMLInputElement).value).toBe('greeter');
+
+    typeInto(c.querySelectorAll<HTMLTextAreaElement>('.pg-content')[0]!, 'You are {persona}, {mood}.');
+    typeInto(c.querySelectorAll<HTMLTextAreaElement>('.pg-content')[1]!, 'Hi {name}');
+    act(() => button(c, 'Save as new prompt version').click());
+    await waitFor(() => pushed !== undefined);
+    expect(pushed).toEqual({ name: 'greeter', text: 'You are {persona}, {mood}.', variables: ['persona', 'mood'] });
+    await waitFor(() => document.body.textContent!.includes('Saved greeter v3'));
+
+    act(() => button(c, 'Run').click());
+    await waitFor(() => runBody !== undefined);
+    expect(runBody!.promptRef).toBe('greeter');
+    stream.end();
+  });
+
+  it('disables save with a hint when there is no system message', () => {
+    server();
+    const c = mount();
+    const save = button(c, 'Save as new prompt version');
+    expect(save.disabled).toBe(true);
+    expect(c.querySelector('.pg-save .pg-hint')?.textContent).toContain('system message');
+  });
+});
+
+describe('PlaygroundRoute', () => {
+  it('re-loads when the deep link changes while mounted (back/forward between links)', async () => {
+    server((url) =>
+      url === '/observe/api/v1/prompts/other/latest'
+        ? json(200, { prompt: { ...PROMPT, name: 'other', text: 'Other prompt.' } })
+        : undefined,
+    );
+    window.history.replaceState(null, '', '/#/playground?prompt=greeter');
+    const c = render(
+      <ToastProvider>
+        <PlaygroundRoute />
+      </ToastProvider>,
+    );
+    await waitFor(() => contents(c)[0] === 'You are {persona}.');
+    act(() => {
+      window.location.hash = '#/playground?prompt=other';
+    });
+    await waitFor(() => contents(c)[0] === 'Other prompt.');
+    expect((c.querySelector('.pg-save input') as HTMLInputElement).value).toBe('other');
+    act(() => {
+      window.location.hash = '#/playground?trace=t1&fromObs=g1';
+    });
+    await waitFor(() => contents(c)[1] === 'Hi there');
+  });
+});
diff --git a/apps/agent-forge/src/screens/playground/__tests__/units.test.ts b/apps/agent-forge/src/screens/playground/__tests__/units.test.ts
new file mode 100644
index 000000000..0e8ecd243
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/__tests__/units.test.ts
@@ -0,0 +1,153 @@
+import { describe, expect, it } from 'vitest';
+
+import { detectVariables } from '../variables';
+import { createSseParser } from '../sse';
+import { messagesFromObservation, modelFromObservation, parsePromptParam } from '../prefill';
+import { buildRunBody, defaultProvider, modelString, providerOptions } from '../request';
+import { STARTED_RUN, applyRunEvent } from '../runState';
+import type { ObserveObservationRow } from '../../../observe/types';
+
+function gen(over: Partial<ObserveObservationRow>): ObserveObservationRow {
+  return {
+    obs_id: 'g1', trace_id: 't1', session_id: null, agent_id: null, parent_obs_id: null, kind: 'generation',
+    name: 'llm', start: 0, end: 1, status: 'ok', input: null, output: null, model: null,
+    usage_input_tokens: null, usage_output_tokens: null, usage_cached_tokens: null, usage_reasoning_tokens: null,
+    cost_usd: null, cost_partial: null, usage_estimated: null, truncated: false, attrs: null, ...over,
+  };
+}
+
+describe('detectVariables', () => {
+  it('finds {names} across rows, de-duplicated in first-seen order', () => {
+    expect(
+      detectVariables([
+        { role: 'system', content: 'You are {persona}. Speak {lang}.' },
+        { role: 'user', content: 'Hi {name}, in {lang} please; {user.id} {a-b}' },
+      ]),
+    ).toEqual(['persona', 'lang', 'name', 'user.id', 'a-b']);
+  });
+
+  it('ignores braces that are not identifiers (JSON, numbers, empty)', () => {
+    expect(detectVariables([{ role: 'user', content: '{"a": 1} {1x} {} { spaced }' }])).toEqual([]);
+  });
+});
+
+describe('createSseParser', () => {
+  it('parses data frames split across chunks and skips junk', () => {
+    const parser = createSseParser();
+    expect(parser.push('data: {"type":"delta","text":"He"}\n\ndata: {"type":"del')).toEqual([{ type: 'delta', text: 'He' }]);
+    expect(parser.push('ta","text":"llo"}\r\n\r\n: comment\n\ndata: not json\n\n')).toEqual([{ type: 'delta', text: 'llo' }]);
+    expect(parser.push('data: {"type":"done","finishReason":"stop","text":"Hello"}\n\n')).toEqual([
+      { type: 'done', finishReason: 'stop', text: 'Hello' },
+    ]);
+  });
+
+  it('flushes a final frame without a trailing blank line', () => {
+    const parser = createSseParser();
+    expect(parser.push('data: {"type":"error","message":"x"}')).toEqual([]);
+    expect(parser.flush()).toEqual([{ type: 'error', message: 'x' }]);
+  });
+});
+
+describe('messagesFromObservation', () => {
+  it('reads an OpenAI-style message array', () => {
+    const row = gen({ input: JSON.stringify([{ role: 'system', content: 'Be terse.' }, { role: 'user', content: 'Hi' }, { role: 'tool', content: 'x' }]) });
+    expect(messagesFromObservation(row)).toEqual([
+      { role: 'system', content: 'Be terse.' },
+      { role: 'user', content: 'Hi' },
+    ]);
+  });
+
+  it('reads {messages} and gen_ai parts, prepending system instructions from attrs', () => {
+    const row = gen({
+      input: JSON.stringify({ messages: [{ role: 'user', parts: [{ type: 'text', content: 'Weather?' }] }] }),
+      attrs: { 'gen_ai.system_instructions': JSON.stringify([{ type: 'text', content: 'You are terse.' }]) },
+    });
+    expect(messagesFromObservation(row)).toEqual([
+      { role: 'system', content: 'You are terse.' },
+      { role: 'user', content: 'Weather?' },
+    ]);
+  });
+
+  it('turns a plain string (or truncated JSON) into one user message', () => {
+    expect(messagesFromObservation(gen({ input: 'hello there' }))).toEqual([{ role: 'user', content: 'hello there' }]);
+    expect(messagesFromObservation(gen({ input: '[{"role":"us' }))).toEqual([{ role: 'user', content: '[{"role":"us' }]);
+    expect(messagesFromObservation(gen({ input: null }))).toEqual([]);
+  });
+});
+
+describe('modelFromObservation', () => {
+  it('prefixes the provider when attrs name it, else the bare model', () => {
+    expect(modelFromObservation(gen({ model: 'gpt-4o-mini', attrs: { 'gen_ai.provider.name': 'openai' } }))).toEqual({
+      provider: 'openai',
+      model: 'gpt-4o-mini',
+    });
+    expect(modelFromObservation(gen({ model: 'openai/gpt-4o', attrs: { 'gen_ai.provider.name': 'openai' } }))).toEqual({
+      provider: 'openai',
+      model: 'gpt-4o',
+    });
+    expect(modelFromObservation(gen({ model: 'claude-x' }))).toEqual({ provider: '', model: 'claude-x' });
+    expect(modelFromObservation(gen({ model: 'ollama/llama3.2' }))).toEqual({ provider: 'ollama', model: 'llama3.2' });
+    expect(modelFromObservation(gen({}))).toBeUndefined();
+  });
+});
+
+describe('parsePromptParam', () => {
+  it('splits name@ref, defaulting to latest', () => {
+    expect(parsePromptParam('greeter')).toEqual({ name: 'greeter', ref: 'latest' });
+    expect(parsePromptParam('greeter@prod')).toEqual({ name: 'greeter', ref: 'prod' });
+    expect(parsePromptParam('greeter@3')).toEqual({ name: 'greeter', ref: '3' });
+    expect(parsePromptParam('')).toBeUndefined();
+  });
+});
+
+describe('request helpers', () => {
+  const keys = [
+    { provider: 'openai' as const, hasKey: false, masked: null },
+    { provider: 'anthropic' as const, hasKey: true, masked: 'x' },
+  ];
+
+  it('offers keyed providers plus ollama and mock, defaulting to mock with no keys', () => {
+    expect(providerOptions(keys)).toEqual(['anthropic', 'ollama', 'mock']);
+    expect(defaultProvider(keys)).toBe('anthropic');
+    expect(defaultProvider([])).toBe('mock');
+  });
+
+  it('builds the model string', () => {
+    expect(modelString('mock', 'ignored')).toBe('mock');
+    expect(modelString('openai', ' gpt-4o-mini ')).toBe('openai/gpt-4o-mini');
+    expect(modelString('ollama', '')).toBe('ollama');
+    expect(modelString('', 'claude-x')).toBe('claude-x');
+  });
+
+  it('drops empty rows, sends only detected variables, and omits empty optionals', () => {
+    expect(buildRunBody({ messages: [{ role: 'system', content: ' ' }], values: {}, model: 'mock', tools: [] })).toBeUndefined();
+    expect(
+      buildRunBody({
+        messages: [{ role: 'system', content: '' }, { role: 'user', content: 'Hi {name}' }],
+        values: { name: 'Ada', stale: 'x' },
+        model: 'mock',
+        tools: ['current-date'],
+        promptRef: 'greeter@prod',
+      }),
+    ).toEqual({
+      messages: [{ role: 'user', content: 'Hi {name}' }],
+      variables: { name: 'Ada' },
+      model: 'mock',
+      tools: ['current-date'],
+      promptRef: 'greeter@prod',
+    });
+  });
+});
+
+describe('applyRunEvent', () => {
+  it('accumulates deltas and tool calls, ends on done or error, then ignores events', () => {
+    let s = applyRunEvent(STARTED_RUN, { type: 'delta', text: 'a' });
+    s = applyRunEvent(s, { type: 'tool_call', id: 'c1', name: 'current-date', args: {} });
+    s = applyRunEvent(s, { type: 'delta', text: 'b' });
+    expect(s).toMatchObject({ status: 'running', text: 'ab', toolCalls: [{ id: 'c1' }] });
+    const done = applyRunEvent(s, { type: 'done', finishReason: 'awaiting-approval', text: '', traceId: 't' });
+    expect(done).toMatchObject({ status: 'paused', text: 'ab', traceId: 't' });
+    expect(applyRunEvent(done, { type: 'delta', text: 'x' })).toBe(done);
+    expect(applyRunEvent(STARTED_RUN, { type: 'error', message: 'boom', code: 'C' })).toMatchObject({ status: 'error', error: 'boom (C)' });
+  });
+});
diff --git a/apps/agent-forge/src/screens/playground/playground.css b/apps/agent-forge/src/screens/playground/playground.css
new file mode 100644
index 000000000..526919741
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/playground.css
@@ -0,0 +1,241 @@
+/*
+ * Playground screen (#/playground): message editor and variables on the
+ * left, model/tools/actions and the streamed output on the right; one column
+ * at <=860px. Colours from src/theme.css tokens only.
+ */
+
+.pg-screen {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  min-width: 0;
+  font-family: var(--font-ui);
+  color: var(--text);
+}
+
+.pg-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.pg-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
+.pg-prompt-chip {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 20px;
+  background: var(--accent-soft);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.pg-notice {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--warning);
+  border-radius: 8px;
+  background: var(--warning-soft);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.pg-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 12px;
+  align-items: start;
+}
+.pg-editor,
+.pg-side {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.pg-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 12px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.pg-panel-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+.pg-panel > .btn {
+  align-self: flex-start;
+}
+
+.pg-message-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pg-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-left: 8px;
+  border-left: 3px solid var(--border);
+}
+.pg-message-system {
+  border-left-color: var(--accent);
+}
+.pg-message-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.pg-screen select,
+.pg-screen input[type='text'],
+.pg-content {
+  font: inherit;
+  font-size: 13px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 8px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.pg-content {
+  width: 100%;
+  resize: vertical;
+  font-family: var(--font-mono);
+}
+.pg-screen select:focus-visible,
+.pg-screen input:focus-visible,
+.pg-content:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.pg-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.pg-field input,
+.pg-field select {
+  width: 100%;
+}
+.pg-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+.pg-model {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+}
+
+.pg-tools {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.pg-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.pg-actions {
+  display: flex;
+  gap: 8px;
+}
+.pg-save {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+.pg-save .btn {
+  align-self: flex-start;
+}
+.pg-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.pg-output-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.pg-trace-link {
+  margin-left: auto;
+  color: var(--accent);
+  font-size: 12.5px;
+}
+.pg-error {
+  padding: 8px 12px;
+  border: 1px solid var(--danger);
+  border-radius: 6px;
+  background: var(--danger-soft);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.pg-tool-calls {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.pg-tool-call {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 20px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+}
+.pg-stream {
+  margin: 0;
+  max-height: 480px;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+}
+
+@media (max-width: 860px) {
+  .pg-screen {
+    padding: 12px;
+  }
+  .pg-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/apps/agent-forge/src/screens/playground/playgroundClient.ts b/apps/agent-forge/src/screens/playground/playgroundClient.ts
new file mode 100644
index 000000000..830dcd1ce
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/playgroundClient.ts
@@ -0,0 +1,52 @@
+/**
+ * Streams `POST /playground/run` from the Studio server (not the observe
+ * daemon, so a run works with the daemon down). Carries the per-launch
+ * Studio token like runtimeClient.ts.
+ */
+import { STUDIO_TOKEN_HEADER, loadStudioToken } from '../../runtime/studioToken';
+import { createSseParser } from './sse';
+import type { PlaygroundEvent, PlaygroundRunBody } from './types';
+
+/** The error event for a non-SSE answer (the server's 400 `{ error }`, or any other status). */
+async function errorEventOf(res: Response): Promise<PlaygroundEvent> {
+  const body = (await res.json().catch(() => undefined)) as { error?: unknown } | undefined;
+  const message = typeof body?.error === 'string' ? body.error : `The run request failed with ${res.status}`;
+  return { type: 'error', message };
+}
+
+/** Reads the SSE body to the end, handing every event to `onEvent` as it arrives. */
+async function pump(body: ReadableStream<Uint8Array>, onEvent: (event: PlaygroundEvent) => void): Promise<void> {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  const parser = createSseParser();
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    parser.push(decoder.decode(value, { stream: true })).forEach(onEvent);
+  }
+  parser.push(decoder.decode()).forEach(onEvent);
+  parser.flush().forEach(onEvent);
+}
+
+/**
+ * Runs `body` and calls `onEvent` per streamed event. A failed request
+ * becomes one `error` event; aborting `signal` (the Stop button) resolves
+ * quietly with no further events.
+ */
+export async function streamPlaygroundRun(
+  body: PlaygroundRunBody,
+  onEvent: (event: PlaygroundEvent) => void,
+  signal?: AbortSignal
+): Promise<void> {
+  const headers = new Headers({ 'content-type': 'application/json', accept: 'text/event-stream' });
+  const token = loadStudioToken();
+  if (token) headers.set(STUDIO_TOKEN_HEADER, token);
+  try {
+    const res = await fetch('/playground/run', { method: 'POST', headers, body: JSON.stringify(body), signal });
+    if (!res.ok || !res.body) return onEvent(await errorEventOf(res));
+    await pump(res.body, onEvent);
+  } catch (error) {
+    if (signal?.aborted) return;
+    onEvent({ type: 'error', message: `The Studio server is not reachable (${(error as Error).message}).` });
+  }
+}
diff --git a/apps/agent-forge/src/screens/playground/prefill.ts b/apps/agent-forge/src/screens/playground/prefill.ts
new file mode 100644
index 000000000..d4c6e5259
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/prefill.ts
@@ -0,0 +1,79 @@
+/**
+ * Pre-filling the Playground from a trace's generation (`?trace=&fromObs=`)
+ * or a registry prompt (`?prompt=name@ref`). Pure: the screen fetches, these
+ * read the payload.
+ */
+import type { ObserveObservationRow } from '../../observe/types';
+import type { PlaygroundMessage, PlaygroundRole } from './types';
+
+const ROLES = new Set<string>(['system', 'user', 'assistant']);
+const SYSTEM_INSTRUCTIONS_ATTR = 'gen_ai.system_instructions';
+const PROVIDER_ATTRS = ['gen_ai.provider.name', 'gen_ai.system'];
+
+const isRecord = (v: unknown): v is Record<string, unknown> => typeof v === 'object' && v !== null && !Array.isArray(v);
+
+function parseJson(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+}
+
+/** Text of a message's `content` (a string or content parts) or gen_ai `parts`. */
+function textOf(value: unknown): string | undefined {
+  if (typeof value === 'string') return value;
+  if (!Array.isArray(value)) return undefined;
+  const texts = value
+    .filter(isRecord)
+    .map((part) => (typeof part.text === 'string' ? part.text : typeof part.content === 'string' ? part.content : undefined))
+    .filter((t): t is string => t !== undefined);
+  return texts.length ? texts.join('\n') : undefined;
+}
+
+/** One OpenAI-style (`content`) or gen_ai (`parts`) message as an editor row; tool messages are dropped. */
+function rowOf(value: unknown): PlaygroundMessage | undefined {
+  if (!isRecord(value) || typeof value.role !== 'string' || !ROLES.has(value.role)) return undefined;
+  const content = textOf(value.content) ?? textOf(value.parts) ?? '';
+  return { role: value.role as PlaygroundRole, content };
+}
+
+/** The gen_ai system instructions attribute (a JSON array of text parts) as one system row. */
+function systemOf(attrs: Record<string, unknown> | null): PlaygroundMessage | undefined {
+  const raw = attrs?.[SYSTEM_INSTRUCTIONS_ATTR];
+  const text = textOf(typeof raw === 'string' ? (parseJson(raw) ?? raw) : raw);
+  return text ? { role: 'system', content: text } : undefined;
+}
+
+/**
+ * The editor rows for an observation's input: an OpenAI-style message array,
+ * `{messages}`, or gen_ai parts; anything else (plain text, truncated JSON)
+ * becomes one user message. A system row from the gen_ai attrs comes first.
+ */
+export function messagesFromObservation(row: ObserveObservationRow): PlaygroundMessage[] {
+  if (row.input === null || row.input === '') return [];
+  const parsed = parseJson(row.input);
+  const list = Array.isArray(parsed) ? parsed : isRecord(parsed) && Array.isArray(parsed.messages) ? parsed.messages : undefined;
+  if (!list) return [{ role: 'user', content: row.input }];
+  const rows = list.map(rowOf).filter((m): m is PlaygroundMessage => m !== undefined);
+  const system = systemOf(row.attrs);
+  return system && !rows.some((m) => m.role === 'system') ? [system, ...rows] : rows;
+}
+
+/** The observation's model as picker values: the provider from attrs (or a `provider/` prefix), else blank. */
+export function modelFromObservation(row: ObserveObservationRow): { provider: string; model: string } | undefined {
+  if (!row.model) return undefined;
+  const fromAttrs = PROVIDER_ATTRS.map((key) => row.attrs?.[key]).find((v): v is string => typeof v === 'string' && v !== '');
+  // A model already recorded as `provider/model` keeps one prefix, not two.
+  if (fromAttrs) return { provider: fromAttrs, model: row.model.startsWith(`${fromAttrs}/`) ? row.model.slice(fromAttrs.length + 1) : row.model };
+  const slash = row.model.indexOf('/');
+  return slash > 0 ? { provider: row.model.slice(0, slash), model: row.model.slice(slash + 1) } : { provider: '', model: row.model };
+}
+
+/** `name[@ref]` from `?prompt=`; the ref defaults to `latest`. */
+export function parsePromptParam(param: string | null): { name: string; ref: string } | undefined {
+  if (!param) return undefined;
+  const at = param.lastIndexOf('@');
+  if (at <= 0) return { name: param, ref: 'latest' };
+  return { name: param.slice(0, at), ref: param.slice(at + 1) || 'latest' };
+}
diff --git a/apps/agent-forge/src/screens/playground/request.ts b/apps/agent-forge/src/screens/playground/request.ts
new file mode 100644
index 000000000..aad1f879c
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/request.ts
@@ -0,0 +1,51 @@
+/** Pure helpers that turn the Playground's editor state into a `POST /playground/run` body. */
+import type { ProviderKeyStatus } from '../../../shared/wireTypes';
+import { detectVariables } from './variables';
+import type { PlaygroundMessage, PlaygroundRunBody } from './types';
+
+/** The run without a provider key: the Studio's mock model. */
+export const MOCK_PROVIDER = 'mock';
+/** Local Ollama needs no key, so it is always offered. */
+const KEYLESS_PROVIDERS = ['ollama', MOCK_PROVIDER];
+
+/** The provider select's options: providers with a stored key, then the keyless ones. */
+export function providerOptions(keys: readonly ProviderKeyStatus[]): string[] {
+  return [...keys.filter((k) => k.hasKey).map((k) => k.provider), ...KEYLESS_PROVIDERS];
+}
+
+/** The first provider with a key, else `mock`. */
+export function defaultProvider(keys: readonly ProviderKeyStatus[]): string {
+  return keys.find((k) => k.hasKey)?.provider ?? MOCK_PROVIDER;
+}
+
+/** The `model` field: `mock`, `provider/model`, a bare provider when no model is typed, or the typed string for a custom (`''`) provider. */
+export function modelString(provider: string, model: string): string {
+  const name = model.trim();
+  if (provider === MOCK_PROVIDER) return MOCK_PROVIDER;
+  if (provider === '') return name || MOCK_PROVIDER;
+  return name ? `${provider}/${name}` : provider;
+}
+
+/** What the screen hands {@link buildRunBody}. */
+export interface RunInput {
+  messages: readonly PlaygroundMessage[];
+  values: Readonly<Record<string, string>>;
+  model: string;
+  tools: readonly string[];
+  promptRef?: string;
+}
+
+/** The request body: empty rows dropped, only the detected variables sent; `undefined` when no row has content. */
+export function buildRunBody(input: RunInput): PlaygroundRunBody | undefined {
+  const messages = input.messages.filter((m) => m.content.trim() !== '');
+  if (messages.length === 0) return undefined;
+  const names = detectVariables(messages);
+  const variables = Object.fromEntries(names.map((name) => [name, input.values[name] ?? '']));
+  return {
+    messages,
+    model: input.model,
+    ...(names.length ? { variables } : {}),
+    ...(input.tools.length ? { tools: [...input.tools] } : {}),
+    ...(input.promptRef ? { promptRef: input.promptRef } : {}),
+  };
+}
diff --git a/apps/agent-forge/src/screens/playground/runState.ts b/apps/agent-forge/src/screens/playground/runState.ts
new file mode 100644
index 000000000..06cbcd292
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/runState.ts
@@ -0,0 +1,48 @@
+/** The Playground's run state and how each streamed event moves it (pure, so the hook stays small). */
+import type { PlaygroundEvent } from './types';
+
+/** A status word for the one `StatusPill` (`paused` reads "awaiting approval"). */
+export type RunStatus = 'idle' | 'running' | 'done' | 'paused' | 'error' | 'stopped';
+
+/** One tool call the model made during the run. */
+export interface RunToolCall {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+}
+
+/** Everything the output panel shows. */
+export interface RunState {
+  status: RunStatus;
+  text: string;
+  toolCalls: RunToolCall[];
+  finishReason?: string;
+  traceId?: string;
+  error?: string;
+}
+
+export const IDLE_RUN: RunState = { status: 'idle', text: '', toolCalls: [] };
+export const STARTED_RUN: RunState = { status: 'running', text: '', toolCalls: [] };
+
+/** `state` after `event`; events after the terminal one are ignored. */
+export function applyRunEvent(state: RunState, event: PlaygroundEvent): RunState {
+  if (state.status !== 'running') return state;
+  switch (event.type) {
+    case 'delta':
+      return { ...state, text: state.text + event.text };
+    case 'tool_call':
+      return { ...state, toolCalls: [...state.toolCalls, { id: event.id, name: event.name, args: event.args }] };
+    case 'done':
+      return {
+        ...state,
+        status: event.finishReason === 'awaiting-approval' ? 'paused' : 'done',
+        text: event.text || state.text,
+        finishReason: event.finishReason,
+        ...(event.traceId ? { traceId: event.traceId } : {}),
+      };
+    case 'error':
+      return { ...state, status: 'error', error: event.code ? `${event.message} (${event.code})` : event.message };
+    default:
+      return state;
+  }
+}
diff --git a/apps/agent-forge/src/screens/playground/sse.ts b/apps/agent-forge/src/screens/playground/sse.ts
new file mode 100644
index 000000000..652fce79c
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/sse.ts
@@ -0,0 +1,45 @@
+import type { PlaygroundEvent } from './types';
+
+/** An incremental SSE parser: `push` text chunks as they arrive, `flush` at end of stream. */
+export interface SseParser {
+  push(chunk: string): PlaygroundEvent[];
+  flush(): PlaygroundEvent[];
+}
+
+const isEvent = (value: unknown): value is PlaygroundEvent =>
+  typeof value === 'object' && value !== null && typeof (value as { type?: unknown }).type === 'string';
+
+/** The event in one SSE frame's `data:` lines, or `undefined` for comments, empty or non-JSON frames. */
+function eventOf(frame: string): PlaygroundEvent | undefined {
+  const data = frame
+    .split('\n')
+    .filter((line) => line.startsWith('data:'))
+    .map((line) => line.slice(5).replace(/^ /, ''))
+    .join('\n');
+  if (!data) return undefined;
+  try {
+    const parsed: unknown = JSON.parse(data);
+    return isEvent(parsed) ? parsed : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Parses the `data: <json>` frames of the playground stream; frames may be split across chunks. */
+export function createSseParser(): SseParser {
+  let buffer = '';
+  const take = (frames: string[]) => frames.map(eventOf).filter((e): e is PlaygroundEvent => e !== undefined);
+  return {
+    push(chunk) {
+      buffer += chunk.replace(/\r\n?/g, '\n');
+      const frames = buffer.split('\n\n');
+      buffer = frames.pop() ?? '';
+      return take(frames);
+    },
+    flush() {
+      const rest = buffer;
+      buffer = '';
+      return take([rest]);
+    },
+  };
+}
diff --git a/apps/agent-forge/src/screens/playground/types.ts b/apps/agent-forge/src/screens/playground/types.ts
new file mode 100644
index 000000000..459ec7550
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/types.ts
@@ -0,0 +1,10 @@
+/** Wire shapes of `POST /playground/run`, from shared/wireTypes.ts, under the names the Playground screen uses. */
+import type { PlaygroundMessage, PlaygroundRunRequest } from '../../../shared/wireTypes';
+
+export type { PlaygroundEvent, PlaygroundMessage } from '../../../shared/wireTypes';
+
+/** The roles the message editor offers (and the server accepts). */
+export type PlaygroundRole = PlaygroundMessage['role'];
+
+/** The request body the screen sends. */
+export type PlaygroundRunBody = PlaygroundRunRequest;
diff --git a/apps/agent-forge/src/screens/playground/usePrefill.ts b/apps/agent-forge/src/screens/playground/usePrefill.ts
new file mode 100644
index 000000000..d2958347f
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/usePrefill.ts
@@ -0,0 +1,87 @@
+/**
+ * Loads what a Playground deep link names: `?trace=&fromObs=` (a trace's
+ * generation) or `?prompt=name[@ref]` (a registry prompt). Both read the
+ * observe daemon; when it is down, or the target is missing, the screen gets
+ * a non-blocking notice and keeps its empty editor (and the URL).
+ */
+import { useEffect, useRef, useState } from 'react';
+
+import { ObserveDaemonDownError, observeClient } from '../../observe/observeClient';
+import { messagesFromObservation, modelFromObservation, parsePromptParam } from './prefill';
+import type { PlaygroundMessage } from './types';
+
+/** What a deep link fills in. */
+export interface Prefill {
+  messages?: PlaygroundMessage[];
+  model?: { provider: string; model: string };
+  /** The loaded prompt's name, and the `?prompt=` value the run records as `promptRef`. */
+  prompt?: { name: string; promptRef: string };
+}
+
+/** The notice for a failed load. */
+function failureNotice(error: unknown, what: string): string {
+  if (error instanceof ObserveDaemonDownError) {
+    return `The observe daemon is not reachable, so ${what} could not be loaded. Start it with \`lousho observe start\`; running still works.`;
+  }
+  return `Could not load ${what}: ${error instanceof Error ? error.message : String(error)}`;
+}
+
+async function fromObservation(traceId: string | null, obsId: string): Promise<Prefill | string> {
+  if (!traceId) return `This link names generation '${obsId}' but no trace, so there is nothing to pre-fill.`;
+  const detail = await observeClient.traceDetail(traceId);
+  const row = detail?.observations.find((o) => o.obs_id === obsId);
+  if (!row) return `Generation '${obsId}' was not found in trace '${traceId}'.`;
+  const messages = messagesFromObservation(row);
+  const model = modelFromObservation(row);
+  return { ...(messages.length ? { messages } : {}), ...(model ? { model } : {}) };
+}
+
+async function fromPrompt(name: string, ref: string, promptRef: string): Promise<Prefill | string> {
+  const prompt = await observeClient.getPrompt(name, ref);
+  if (!prompt) return `Prompt '${name}@${ref}' was not found.`;
+  return {
+    messages: [
+      { role: 'system', content: prompt.text },
+      { role: 'user', content: '' },
+    ],
+    prompt: { name, promptRef },
+  };
+}
+
+/** The load the query asks for, or `undefined` for a plain `#/playground`. */
+function loaderFor(query: URLSearchParams): { what: string; load: () => Promise<Prefill | string> } | undefined {
+  const obsId = query.get('fromObs');
+  if (obsId) return { what: 'the generation', load: () => fromObservation(query.get('trace'), obsId) };
+  const param = query.get('prompt');
+  const prompt = parsePromptParam(param);
+  if (prompt) return { what: `prompt '${prompt.name}'`, load: () => fromPrompt(prompt.name, prompt.ref, param!) };
+  return undefined;
+}
+
+/** Runs the deep link's load once, on mount; `apply` receives the result. Returns the notice to show, if any. */
+export function usePrefill(query: URLSearchParams, apply: (prefill: Prefill) => void): string | undefined {
+  const [notice, setNotice] = useState<string | undefined>();
+  const applyRef = useRef(apply);
+  applyRef.current = apply;
+  // The query at mount: later hash edits (none today) do not re-load.
+  const [loader] = useState(() => loaderFor(query));
+
+  useEffect(() => {
+    if (!loader) return undefined;
+    let live = true;
+    loader.load().then(
+      (result) => {
+        if (!live) return;
+        if (typeof result === 'string') setNotice(result);
+        else applyRef.current(result);
+      },
+      (error: unknown) => {
+        if (live) setNotice(failureNotice(error, loader.what));
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [loader]);
+  return notice;
+}
diff --git a/apps/agent-forge/src/screens/playground/useRun.ts b/apps/agent-forge/src/screens/playground/useRun.ts
new file mode 100644
index 000000000..d42c3c0a0
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/useRun.ts
@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { streamPlaygroundRun } from './playgroundClient';
+import { IDLE_RUN, STARTED_RUN, applyRunEvent, type RunState } from './runState';
+import type { PlaygroundRunBody } from './types';
+
+/** One playground run at a time: `start` streams it (aborting any previous one), `stop` aborts it. */
+export function useRun(): { run: RunState; start: (body: PlaygroundRunBody) => void; stop: () => void } {
+  const [run, setRun] = useState<RunState>(IDLE_RUN);
+  const controller = useRef<AbortController | null>(null);
+
+  const stop = useCallback(() => {
+    controller.current?.abort();
+    controller.current = null;
+    setRun((state) => (state.status === 'running' ? { ...state, status: 'stopped' } : state));
+  }, []);
+
+  const start = useCallback((body: PlaygroundRunBody) => {
+    controller.current?.abort();
+    const abort = new AbortController();
+    controller.current = abort;
+    setRun(STARTED_RUN);
+    void streamPlaygroundRun(body, (event) => setRun((state) => applyRunEvent(state, event)), abort.signal).then(() => {
+      if (controller.current === abort) controller.current = null;
+      // A stream that closed without a terminal event (should not happen) still ends the run.
+      if (!abort.signal.aborted) setRun((state) => (state.status === 'running' ? { ...state, status: 'stopped' } : state));
+    });
+  }, []);
+
+  // Leaving the screen aborts the run (closing the connection aborts it server-side too).
+  useEffect(() => () => controller.current?.abort(), []);
+  return { run, start, stop };
+}
diff --git a/apps/agent-forge/src/screens/playground/variables.ts b/apps/agent-forge/src/screens/playground/variables.ts
new file mode 100644
index 000000000..989b87aa3
--- /dev/null
+++ b/apps/agent-forge/src/screens/playground/variables.ts
@@ -0,0 +1,13 @@
+import type { PlaygroundMessage } from './types';
+
+/** The server's placeholder pattern (server/playground.ts `substituteVariables`). */
+const VARIABLE = /\{([A-Za-z_][\w.-]*)\}/g;
+
+/** Every `{name}` placeholder across `messages`, de-duplicated, in first-seen order. */
+export function detectVariables(messages: readonly PlaygroundMessage[]): string[] {
+  const seen = new Set<string>();
+  for (const { content } of messages) {
+    for (const match of content.matchAll(VARIABLE)) seen.add(match[1]!);
+  }
+  return [...seen];
+}
diff --git a/apps/agent-forge/src/screens/routes.tsx b/apps/agent-forge/src/screens/routes.tsx
index 573eb51b7..02dde3a47 100644
--- a/apps/agent-forge/src/screens/routes.tsx
+++ b/apps/agent-forge/src/screens/routes.tsx
@@ -8,6 +8,7 @@ import { AgentsScreen } from './agents/AgentsScreen';
 import { TraceScreen } from './traces/TraceScreen';
 import { MonitoringScreen } from './monitoring/MonitoringScreen';
 import { ScoresScreen } from './scores/ScoresScreen';
+import { PlaygroundRoute } from './playground/PlaygroundScreen';
 import { useLeaveAgentsGuard } from './agents/useLeaveAgentsGuard';
 import { Placeholder } from './Placeholder';
 
@@ -72,10 +73,6 @@ const TAB_PATH: Record<ObserveTab, string> = {
 };
 
 const PLACEHOLDERS: Partial<Record<ScreenId, { title: string; blurb: string }>> = {
-  playground: {
-    title: 'Playground',
-    blurb: 'Try a prompt against different models and settings side by side, without editing an agent.',
-  },
   threads: { title: 'Threads', blurb: 'Multi-turn conversations grouped by session, with every run in each thread.' },
   evals: { title: 'Evaluations', blurb: 'Datasets, evaluators and annotation queues for scoring runs.' },
   prompts: { title: 'Prompts', blurb: 'Versioned prompts you can compare, pin and pull into your agents.' },
@@ -112,6 +109,7 @@ export function Screens() {
   if (screen === 'trace') content = <TraceRoute />;
   else if (screen === 'monitoring') content = <MonitoringScreen />;
   else if (screen === 'scores') content = <ScoresScreen />;
+  else if (screen === 'playground') content = <PlaygroundRoute />;
   else if (observeTab) content = <ObserveView tab={observeTab} onTabChange={(tab) => navigate(TAB_PATH[tab])} />;
   else if (placeholder) content = <Placeholder {...placeholder} />;
   else
diff --git a/apps/agent-forge/src/ui/run/RunInspector.tsx b/apps/agent-forge/src/ui/run/RunInspector.tsx
index dc86bb031..d04af1688 100644
--- a/apps/agent-forge/src/ui/run/RunInspector.tsx
+++ b/apps/agent-forge/src/ui/run/RunInspector.tsx
@@ -113,7 +113,7 @@ export function RunInspector({ observation: row, scores, now, renderFeedback }:
           {isRunning(row) ? ' running' : ''}
         </span>
         {row.kind === 'generation' && (
-          <a className="run-playground-link" href={playgroundHref(row.obs_id)}>
+          <a className="run-playground-link" href={playgroundHref(row.trace_id, row.obs_id)}>
             Open in Playground
           </a>
         )}
diff --git a/apps/agent-forge/src/ui/run/RunTree.tsx b/apps/agent-forge/src/ui/run/RunTree.tsx
index af38f1a6f..c78c5e261 100644
--- a/apps/agent-forge/src/ui/run/RunTree.tsx
+++ b/apps/agent-forge/src/ui/run/RunTree.tsx
@@ -96,7 +96,7 @@ function TreeRow({ node, selected, virtual, now, onSelect }: TreeRowProps) {
         <Duration row={row} now={now} />
       </button>
       {row.kind === 'generation' && (
-        <a className="run-playground-link" href={playgroundHref(row.obs_id)} title={`Open ${name} in Playground`}>
+        <a className="run-playground-link" href={playgroundHref(row.trace_id, row.obs_id)} title={`Open ${name} in Playground`}>
           Open in Playground
         </a>
       )}
diff --git a/apps/agent-forge/src/ui/run/__tests__/run.test.tsx b/apps/agent-forge/src/ui/run/__tests__/run.test.tsx
index 0658ac818..d44200afe 100644
--- a/apps/agent-forge/src/ui/run/__tests__/run.test.tsx
+++ b/apps/agent-forge/src/ui/run/__tests__/run.test.tsx
@@ -96,7 +96,7 @@ describe('RunTree', () => {
     const c = render(<RunTree observations={TRACE} onSelect={() => {}} />);
     const links = [...c.querySelectorAll<HTMLAnchorElement>('.run-tree .run-playground-link')];
     expect(links).toHaveLength(1);
-    expect(links[0]!.getAttribute('href')).toBe('#/playground?fromObs=gen%2F1');
+    expect(links[0]!.getAttribute('href')).toBe('#/playground?trace=tr1&fromObs=gen%2F1');
     expect(links[0]!.textContent).toBe('Open in Playground');
   });
 
@@ -266,7 +266,7 @@ describe('RunInspector', () => {
     expect(usage).toContain('$0.0021 (partial, estimated)');
     expect(usage).toContain('gpt-4o');
     expect(c.querySelector('.run-truncated-note')).not.toBeNull();
-    expect(c.querySelector('.run-inspector .run-playground-link')?.getAttribute('href')).toBe('#/playground?fromObs=g');
+    expect(c.querySelector('.run-inspector .run-playground-link')?.getAttribute('href')).toBe('#/playground?trace=tr1&fromObs=g');
   });
 });
 
diff --git a/apps/agent-forge/src/ui/run/rows.ts b/apps/agent-forge/src/ui/run/rows.ts
index bc5302cd9..eaa77206e 100644
--- a/apps/agent-forge/src/ui/run/rows.ts
+++ b/apps/agent-forge/src/ui/run/rows.ts
@@ -46,9 +46,9 @@ export function elapsedMs(row: ObserveObservationRow, now: number): number {
   return Math.max(0, (row.end ?? now) - row.start);
 }
 
-/** The href that opens a generation in the Playground. */
-export function playgroundHref(obsId: string): string {
-  return `#/playground?fromObs=${encodeURIComponent(obsId)}`;
+/** The href that opens a generation in the Playground (it loads the trace, then pre-fills from the observation). */
+export function playgroundHref(traceId: string, obsId: string): string {
+  return `#/playground?trace=${encodeURIComponent(traceId)}&fromObs=${encodeURIComponent(obsId)}`;
 }
 
 /** `className` join that drops falsy entries. */
diff --git a/docs/agent-forge.md b/docs/agent-forge.md
index aff0f166c..7adf6a876 100644
--- a/docs/agent-forge.md
+++ b/docs/agent-forge.md
@@ -298,6 +298,31 @@ curl -H "x-lousho-studio-token: $TOKEN" 'localhost:4750/runs/compare?a=weather&b
 The fork is a run of its own: the original run's checkpoints, status and
 chat are unchanged.
 
+## Playground
+
+`#/playground` (Build > Playground in the nav) tries messages against a model
+without editing an agent:
+
+- **Messages**: system, user and assistant rows. Every `{name}` placeholder
+  in any row gets a **Variables** input, in the order the names first appear.
+- **Model**: a provider (the ones with a key under Settings > Provider keys,
+  plus `ollama` and `mock`; `mock` when nothing is configured) and a model
+  name, sent as `provider/model`.
+- **Tools**: pick a saved agent to borrow its tools, then switch each one on
+  or off.
+- **Run** streams the reply as it arrives; **Stop** aborts it. When the run
+  finishes, **Open trace** goes to its trace.
+- **Save as new prompt version** pushes the system message (and its
+  variables) to the prompt registry, under the loaded prompt's name or one
+  you type. It is disabled while there is no system message.
+
+Two links pre-fill it. **Open in Playground** on a generation in a trace
+opens `#/playground?trace=<traceId>&fromObs=<obsId>`, which loads that
+generation's messages and model. `#/playground?prompt=<name>[@<label or
+version>]` loads a registry prompt (latest by default) as the system message
+and records it on the run's trace. Both read the observe daemon: when it is
+down, the Playground says so and keeps an empty editor, and runs still work.
+
 ## Playground run endpoint
 
 `POST /playground/run` runs a one-off prompt against a model and streams the
diff --git a/llms-full.txt b/llms-full.txt
index 1719e74c4..856b326a8 100644
--- a/llms-full.txt
+++ b/llms-full.txt
@@ -2203,6 +2203,31 @@ curl -H "x-lousho-studio-token: $TOKEN" 'localhost:4750/runs/compare?a=weather&b
 The fork is a run of its own: the original run's checkpoints, status and
 chat are unchanged.
 
+## Playground
+
+`#/playground` (Build > Playground in the nav) tries messages against a model
+without editing an agent:
+
+- **Messages**: system, user and assistant rows. Every `{name}` placeholder
+  in any row gets a **Variables** input, in the order the names first appear.
+- **Model**: a provider (the ones with a key under Settings > Provider keys,
+  plus `ollama` and `mock`; `mock` when nothing is configured) and a model
+  name, sent as `provider/model`.
+- **Tools**: pick a saved agent to borrow its tools, then switch each one on
+  or off.
+- **Run** streams the reply as it arrives; **Stop** aborts it. When the run
+  finishes, **Open trace** goes to its trace.
+- **Save as new prompt version** pushes the system message (and its
+  variables) to the prompt registry, under the loaded prompt's name or one
+  you type. It is disabled while there is no system message.
+
+Two links pre-fill it. **Open in Playground** on a generation in a trace
+opens `#/playground?trace=<traceId>&fromObs=<obsId>`, which loads that
+generation's messages and model. `#/playground?prompt=<name>[@<label or
+version>]` loads a registry prompt (latest by default) as the system message
+and records it on the run's trace. Both read the observe daemon: when it is
+down, the Playground says so and keeps an empty editor, and runs still work.
+
 ## Playground run endpoint
 
 `POST /playground/run` runs a one-off prompt against a model and streams the