diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx
index 569431c7..e347abb3 100644
--- a/app/components/Input/index.tsx
+++ b/app/components/Input/index.tsx
@@ -1,5 +1,6 @@
 import './input.css'
 import AutoHeight from 'react-auto-height'
+import {forwardRef} from 'react'
 
 type InputProps = {
   className?: string
@@ -12,14 +13,26 @@ type InputProps = {
   multiline?: boolean
 }
 
-const Input = ({className = '', multiline, ...props}: InputProps) => {
-  const classes = `input ${className}`
+const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
+  ({className = '', multiline, ...props}, ref) => {
+    const classes = `input ${className}`
 
-  if (multiline) {
-    return <AutoHeight element="textarea" className={classes} rows={1} {...props} />
+    if (multiline) {
+      return (
+        <AutoHeight
+          element="textarea"
+          className={classes}
+          rows={1}
+          {...props}
+          innerRef={ref as any}
+        />
+      )
+    }
+
+    return <input className={classes} {...props} ref={ref as any} />
   }
+)
 
-  return <input className={classes} {...props} />
-}
+Input.displayName = 'Input'
 
 export default Input
diff --git a/app/components/Playground/PlaygroundChat.tsx b/app/components/Playground/PlaygroundChat.tsx
new file mode 100644
index 00000000..8ea0c44f
--- /dev/null
+++ b/app/components/Playground/PlaygroundChat.tsx
@@ -0,0 +1,313 @@
+import {useState, useEffect, useRef} from 'react'
+import {
+  queryLLM,
+  Entry,
+  AssistantEntry,
+  ChatSettings,
+  Followup,
+  HistoryEntry,
+  EntryRole,
+} from '~/hooks/useChat'
+import Input from '~/components/Input'
+import SendIcon from '~/components/icons-generated/PlaneSend'
+import ChatEntry from '~/components/Chatbot/ChatEntry'
+
+const scroll30 = () => {
+  if (document.documentElement.scrollHeight - window.scrollY < window.innerHeight * 1.1) {
+    window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})
+  }
+}
+
+const getSpinner = (thinkingCount: number = 0) => {
+  const spinnerFrames = [
+    ' ...',
+    ' -..',
+    ' .-.',
+    ' ..-',
+    ' ...',
+    ' ..-',
+    ' .-.',
+    ' -..',
+    ' ...',
+    ' -..',
+    ' --.',
+    ' .--',
+    ' ..-',
+    ' ...',
+    ' -..',
+    ' .-.',
+    ' ..-',
+  ]
+  return spinnerFrames[thinkingCount % spinnerFrames.length]
+}
+
+const makeHistory = (query: string, entries: Entry[]): HistoryEntry[] => {
+  const getRole = (entry: Entry): EntryRole => {
+    if (entry.deleted) return 'deleted'
+    if (entry.role === 'stampy') return 'assistant'
+    return entry.role
+  }
+
+  const history = entries
+    .filter((entry) => entry.role !== 'error')
+    .map((entry) => ({
+      role: getRole(entry),
+      content: entry.content.trim(),
+    }))
+  return [...history, {role: 'user', content: query}]
+}
+
+type PlaygroundChatParams = {
+  sessionId: string
+  settings: ChatSettings
+  onQuery?: (q: string) => void
+  onNewEntry?: (history: Entry[]) => void
+}
+
+export const PlaygroundChat = ({
+  sessionId,
+  settings,
+  onQuery,
+  onNewEntry,
+}: PlaygroundChatParams) => {
+  const [entries, setEntries] = useState<Entry[]>([])
+  const [query, setQuery] = useState('')
+  const [current, setCurrent] = useState<AssistantEntry | undefined>()
+  const [followups, setFollowups] = useState<Followup[]>([])
+  const [controller, setController] = useState(() => new AbortController())
+  const [isSearching, setIsSearching] = useState(false)
+  const [onRequestQuickAnswer, setOnRequestQuickAnswer] = useState<(() => void) | undefined>(
+    undefined
+  )
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (!isSearching) inputRef.current?.focus()
+  }, [isSearching])
+
+  useEffect(() => {
+    if (!inputRef.current) return
+    inputRef.current.focus()
+    const len = inputRef.current.value.length
+    inputRef.current.setSelectionRange(len, len)
+  }, [])
+
+  const updateCurrent = (current: AssistantEntry) => {
+    if (current?.phase === 'streaming') {
+      setCurrent(current)
+      scroll30()
+    } else {
+      setCurrent(current)
+    }
+  }
+
+  const addResult = (
+    query: string,
+    {result, followups}: {result: Entry; followups?: Followup[]}
+  ) => {
+    const userEntry = {role: 'user', content: query} as Entry
+    setEntries((prev) => {
+      const entries = [...prev, userEntry, result]
+      onNewEntry?.(entries)
+      return entries
+    })
+    setFollowups(followups || [])
+    setQuery('')
+    scroll30()
+  }
+
+  const abortable =
+    (f: any) =>
+    (...args: any) => {
+      controller.abort()
+      const newController = new AbortController()
+      setController(newController)
+      return f(newController, ...args)
+    }
+
+  const search = async (controller: AbortController, query: string) => {
+    setFollowups([])
+    setIsSearching(true)
+
+    const history = makeHistory(query, entries)
+
+    let quickAnswerRequested = false
+
+    setOnRequestQuickAnswer(() => () => {
+      quickAnswerRequested = true
+      controller.abort()
+    })
+
+    let result = await queryLLM(history, updateCurrent, sessionId, controller, settings)
+
+    // If aborted and quick answer was requested, retry without thinking
+    if (result.result.content === 'aborted' && quickAnswerRequested) {
+      const newController = new AbortController()
+      setController(newController)
+      setOnRequestQuickAnswer(undefined)
+
+      result = await queryLLM(history, updateCurrent, sessionId, newController, {
+        ...settings,
+        thinking_budget: 0,
+      })
+    }
+
+    if (result.result.content !== 'aborted') {
+      addResult(query, result)
+    }
+    setCurrent(undefined)
+    setIsSearching(false)
+    setOnRequestQuickAnswer(undefined)
+  }
+
+  const deleteEntry = (i: number) => {
+    const entry = entries[i]
+    if (entry === undefined) return
+
+    if (i === entries.length - 1 && ['assistant', 'stampy', 'error'].includes(entry.role)) {
+      const prev = entries[i - 1]
+      if (prev !== undefined) setQuery(prev.content)
+      setEntries(entries.slice(0, i - 1))
+      setFollowups([])
+    } else {
+      entry.deleted = true
+      setEntries([...entries])
+    }
+  }
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+      <ul style={{listStyle: 'none', padding: 0}}>
+        {entries.map(
+          (entry, i) =>
+            !entry.deleted && (
+              <li key={i} style={{position: 'relative', marginBottom: '16px'}} className="group">
+                <ChatEntry {...entry} no={i} />
+                <span
+                  style={{
+                    position: 'absolute',
+                    right: '20px',
+                    top: '8px',
+                    cursor: 'pointer',
+                    display: 'none',
+                  }}
+                  className="delete-item"
+                  onClick={() => deleteEntry(i)}
+                >
+                  ✕
+                </span>
+              </li>
+            )
+        )}
+      </ul>
+
+      {followups.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            marginTop: '8px',
+          }}
+        >
+          {followups.map((followup, i) => (
+            <button
+              key={i}
+              style={{margin: '4px', padding: '4px 8px', border: '1px solid gray'}}
+              onClick={() => search(controller, followup.text)}
+            >
+              {followup.text}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div style={{position: 'relative', marginTop: '16px', display: 'flex', gap: '8px'}}>
+        <Input
+          ref={inputRef}
+          placeholder="Ask a question..."
+          className="large full-width"
+          value={query}
+          multiline
+          onChange={(e) => {
+            setQuery(e.target.value)
+            onQuery?.(e.target.value)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              e.currentTarget.blur()
+            } else if (e.key === 'Enter' && !e.shiftKey && query.trim() && !isSearching) {
+              e.preventDefault()
+              abortable(search)(query)
+            }
+          }}
+        />
+        <button
+          onClick={() => {
+            if (isSearching) {
+              controller.abort()
+              setIsSearching(false)
+            } else if (query.trim()) {
+              abortable(search)(query)
+            }
+          }}
+          style={{padding: '8px 16px', alignSelf: 'flex-start'}}
+        >
+          {isSearching ? 'Cancel' : 'Search'}
+        </button>
+      </div>
+
+      {current && (
+        <div style={{marginTop: '16px'}}>
+          {current.phase === 'started' && <p>Loading: Sending query...</p>}
+          {current.phase === 'enrich' && <p>Loading: Refined your query...</p>}
+          {current.phase === 'semantic' && <p>Loading: Performing semantic search...</p>}
+          {current.phase === 'history' && <p>Loading: Processing history...</p>}
+          {current.phase === 'context' && <p>Loading: Preparing context...</p>}
+          {current.phase === 'prompt' && <p>Loading: Preparing context...</p>}
+          {current.phase === 'llm' && (
+            <div>
+              <p>
+                {current.thoughts && current.thoughts.length > 0 ? (
+                  <>
+                    Loading: Thinking (usually 10s-30s)
+                    {getSpinner(current.thoughts.length)}
+                  </>
+                ) : (
+                  <>Loading...</>
+                )}
+              </p>
+              {current.thoughts && current.thoughts.length > 0 && onRequestQuickAnswer && (
+                <p>
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      onRequestQuickAnswer()
+                    }}
+                  >
+                    Get a quick answer
+                  </a>
+                </p>
+              )}
+            </div>
+          )}
+          {current.phase === 'thinking' && <p>Loading: Thinking...</p>}
+          {current.phase === 'streaming' && <ChatEntry {...current} />}
+          {current.phase === 'followups' && (
+            <>
+              <ChatEntry {...current} />
+              <p>Checking for followups...</p>
+            </>
+          )}
+        </div>
+      )}
+
+      {!current && entries.length > 0 && (
+        <button onClick={() => setEntries([])} style={{marginTop: '16px'}}>
+          Clear history
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/app/components/Playground/Prompts.tsx b/app/components/Playground/Prompts.tsx
new file mode 100644
index 00000000..9935039b
--- /dev/null
+++ b/app/components/Playground/Prompts.tsx
@@ -0,0 +1,166 @@
+import {ChangeEvent, useState} from 'react'
+import {ChatSettings, Entry} from '~/hooks/useChat'
+
+type ChatSettingsUpdate = [path: string[], value: any]
+
+type ChatPromptParams = {
+  settings: ChatSettings
+  query: string
+  history: Entry[]
+  changeSettings: (...vals: ChatSettingsUpdate[]) => void
+}
+
+type DetailsProps = {
+  children: React.ReactNode
+  defaultOpen?: boolean
+} & React.DetailsHTMLAttributes<HTMLDetailsElement>
+
+function Details({children, defaultOpen = true, ...props}: DetailsProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+
+  return (
+    <details
+      {...props}
+      open={isOpen}
+      onToggle={(e) => setIsOpen((e.target as HTMLDetailsElement).open)}
+    >
+      {children}
+    </details>
+  )
+}
+
+export const PlaygroundPrompts = ({settings, query, history, changeSettings}: ChatPromptParams) => {
+  const updatePrompt =
+    (...path: string[]) =>
+    (event: ChangeEvent) =>
+      changeSettings([['prompts', ...path], (event.target as HTMLInputElement).value])
+
+  const inlineAllTemplates = async () => {
+    try {
+      const response = await fetch('https://chat.stampy.ai:8443/inline-prompts', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({settings}),
+      })
+      if (response.ok) {
+        const inlinedPrompts = await response.json()
+
+        const updates: [string[], any][] = []
+
+        const addUpdates = (obj: any, path: string[] = ['prompts']) => {
+          Object.entries(obj).forEach(([key, value]) => {
+            const currentPath = [...path, key]
+            if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+              addUpdates(value, currentPath)
+            } else {
+              updates.push([currentPath, value])
+            }
+          })
+        }
+
+        addUpdates(inlinedPrompts)
+        changeSettings(...updates)
+      }
+    } catch (error) {
+      console.error('Failed to inline templates:', error)
+    }
+  }
+
+  return (
+    <div style={{border: '2px solid black', padding: '20px', height: 'fit-content'}}>
+      <button onClick={inlineAllTemplates} style={{marginBottom: '16px', padding: '0 16px'}}>
+        Inline All Templates
+      </button>
+      <Details>
+        <summary>History summary prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.history_summary}
+          onChange={updatePrompt('history_summary')}
+        />
+      </Details>
+      <Details>
+        <summary>System prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '100px'}}
+          value={settings?.prompts?.system}
+          onChange={updatePrompt('system')}
+        />
+        <div>(This is where sources will be injected)</div>
+      </Details>
+      {history.length > 0 && (
+        <>
+          <Details>
+            <summary>History prompt</summary>
+            <textarea
+              style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+              value={settings?.prompts?.history}
+              onChange={updatePrompt('history')}
+            />
+          </Details>
+          <Details>
+            <summary>History</summary>
+            {history
+              .slice(Math.max(0, history.length - (settings.maxHistory || 0)))
+              .map((entry, i) => (
+                <div key={i} style={{padding: '8px 0'}}>
+                  {entry.content}
+                </div>
+              ))}
+          </Details>
+        </>
+      )}
+      <Details>
+        <summary>Pre-message prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.pre_message}
+          onChange={updatePrompt('pre_message')}
+        />
+      </Details>
+      <Details>
+        <summary>Hyde pre-message prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.hyde_pre_message}
+          onChange={updatePrompt('hyde_pre_message')}
+        />
+      </Details>
+      <Details>
+        <summary>Hyde post-message prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.hyde_post_message}
+          onChange={updatePrompt('hyde_post_message')}
+        />
+      </Details>
+      <Details>
+        <summary>Post-message prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.post_message}
+          onChange={updatePrompt('post_message')}
+        />
+      </Details>
+      <Details>
+        <summary>User mode prompt</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.modes?.[settings.mode || 'default']}
+          onChange={updatePrompt('modes', settings.mode || 'default')}
+        />
+      </Details>
+      <Details>
+        <summary>Message format</summary>
+        <textarea
+          style={{border: '1px solid gray', width: '100%', padding: '4px', minHeight: '60px'}}
+          value={settings?.prompts?.message_format}
+          onChange={updatePrompt('message_format')}
+        />
+        <div>{query}</div>
+      </Details>
+    </div>
+  )
+}
diff --git a/app/components/Playground/Settings.tsx b/app/components/Playground/Settings.tsx
new file mode 100644
index 00000000..5684c210
--- /dev/null
+++ b/app/components/Playground/Settings.tsx
@@ -0,0 +1,215 @@
+import {ChangeEvent} from 'react'
+import {ChatSettings, SearchFilters} from '~/hooks/useChat'
+import {SectionHeader, NumberInput, Slider, Checkbox, Select} from './htmlControls'
+
+type Parseable = string | number | undefined
+
+interface Model {
+  maxNumTokens: number
+  topKBlocks: number
+}
+
+export const MODELS: {[key: string]: Model} = {
+  'openai/gpt-3.5-turbo': {maxNumTokens: 4095, topKBlocks: 10},
+  'openai/gpt-3.5-turbo-16k': {maxNumTokens: 16385, topKBlocks: 30},
+  'openai/o1': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/o1-mini': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-4': {maxNumTokens: 8192, topKBlocks: 20},
+  'openai/gpt-4-turbo-preview': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-4o': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-4o-mini': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/o4-mini': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/o3': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-4.1-nano': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-4.1-mini': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-4.1': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-5-chat-latest': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-5-2025-08-07': {maxNumTokens: 128000, topKBlocks: 20},
+  'openai/gpt-5': {maxNumTokens: 128000, topKBlocks: 20},
+  'anthropic/claude-3-opus-20240229': {maxNumTokens: 200000, topKBlocks: 20},
+  'anthropic/claude-3-5-sonnet-20240620': {maxNumTokens: 200_000, topKBlocks: 20},
+  'anthropic/claude-3-5-sonnet-20241022': {maxNumTokens: 200_000, topKBlocks: 20},
+  'anthropic/claude-3-5-sonnet-latest': {maxNumTokens: 200_000, topKBlocks: 20},
+  'anthropic/claude-opus-4-20250514': {maxNumTokens: 200_000, topKBlocks: 20},
+  'anthropic/claude-opus-4-1-20250805': {maxNumTokens: 200_000, topKBlocks: 20},
+  'anthropic/claude-sonnet-4-20250514': {maxNumTokens: 200_000, topKBlocks: 20},
+  'anthropic/claude-3-7-sonnet-latest': {maxNumTokens: 200_000, topKBlocks: 20},
+  'google/gemini-2.5-flash': {maxNumTokens: 250_000, topKBlocks: 20},
+  'google/gemini-2.5-pro': {maxNumTokens: 250_000, topKBlocks: 20},
+  'openrouter/openai/gpt-5': {maxNumTokens: 128000, topKBlocks: 20},
+  'openrouter/openai/gpt-oss-20b': {maxNumTokens: 128000, topKBlocks: 20},
+  'openrouter/moonshotai/kimi-k2': {maxNumTokens: 128000, topKBlocks: 20},
+}
+
+export const ENCODERS = ['cl100k_base']
+
+export const DEFAULT_FILTERS: SearchFilters = {
+  miri_confidence: 6,
+  miri_distance: [],
+  needs_tech: false,
+}
+
+type ChatSettingsUpdate = [path: string[], value: any]
+
+type ChatSettingsParams = {
+  settings: ChatSettings
+  changeSettings: (...v: ChatSettingsUpdate[]) => void
+}
+
+export const PlaygroundSettings = ({settings, changeSettings}: ChatSettingsParams) => {
+  const changeVal = (field: string, value: any) => changeSettings([[field], value])
+  const update = (field: string) => (event: ChangeEvent) =>
+    changeVal(field, (event.target as HTMLInputElement).value)
+  const updateNum = (field: string) => (num: Parseable) => changeVal(field, num)
+
+  const updateTokenFraction = (field: string) => (num: Parseable) => {
+    const bufferFraction =
+      settings.tokensBuffer && settings.maxNumTokens
+        ? settings.tokensBuffer / settings.maxNumTokens
+        : 0
+    const val = Math.min(parseFloat((num || 0).toString()), 1 - bufferFraction)
+
+    let context = settings.contextFraction || 0
+    let history = settings.historyFraction || 0
+
+    if (field == 'contextFraction') {
+      history = Math.min(history, Math.max(0, 1 - val - bufferFraction))
+      context = val
+    } else {
+      context = Math.min(context, Math.max(0, 1 - val - bufferFraction))
+      history = val
+    }
+    changeSettings([['contextFraction'], context], [['historyFraction'], history])
+  }
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: '16px',
+        height: 'fit-content',
+      }}
+    >
+      <SectionHeader text="Models" />
+      <label htmlFor="model-id" style={{gridColumn: 'span 2'}}>
+        Model:
+      </label>
+      <Select
+        name="model-id"
+        value={settings.modelID || ''}
+        updater={(event: ChangeEvent) => {
+          const value = (event.target as HTMLInputElement).value
+          const {maxNumTokens, topKBlocks} = MODELS[value as keyof typeof MODELS] || {}
+          const prevNumTokens = MODELS[settings.modelID as keyof typeof MODELS]?.maxNumTokens
+          const prevTopKBlocks = MODELS[settings.modelID as keyof typeof MODELS]?.topKBlocks
+
+          if (settings.maxNumTokens === prevNumTokens) {
+            changeVal('maxNumTokens', maxNumTokens)
+          } else {
+            changeVal('maxNumTokens', Math.min(settings.maxNumTokens || 0, maxNumTokens || 0))
+          }
+          if (settings.topKBlocks === prevTopKBlocks) {
+            changeVal('topKBlocks', topKBlocks)
+          }
+          changeVal('modelID', value)
+        }}
+        options={Object.keys(MODELS)}
+      />
+
+      <label htmlFor="encoder" style={{gridColumn: 'span 2'}}>
+        Encoder:
+      </label>
+      <Select
+        name="encoder"
+        value={settings.encoder || ''}
+        updater={update('encoder')}
+        options={ENCODERS}
+      />
+
+      <SectionHeader text="Token options" />
+      <NumberInput
+        value={settings.maxNumTokens}
+        field="maxNumTokens"
+        label="Tokens"
+        min="1"
+        max={MODELS[settings.modelID as keyof typeof MODELS]?.maxNumTokens}
+        updater={updateNum('maxNumTokens')}
+      />
+      <NumberInput
+        field="tokensBuffer"
+        value={settings.tokensBuffer}
+        label="Number of tokens to leave as a buffer when calculating remaining tokens"
+        min="0"
+        max={settings.maxNumTokens}
+        updater={updateNum('tokensBuffer')}
+      />
+      <NumberInput
+        field="maxHistorySummaryTokens"
+        value={settings.maxHistorySummaryTokens}
+        label="The max number of tokens to use for the history summary"
+        min="0"
+        max={settings.maxNumTokens}
+        updater={updateNum('maxHistorySummaryTokens')}
+      />
+      <Checkbox
+        checked={settings?.enable_hyde || false}
+        field="enable_hyde"
+        label="Enable Hyde"
+        updater={(checked: boolean) => changeSettings([['enable_hyde'], checked])}
+      />
+      <NumberInput
+        field="thinking_budget"
+        value={settings.thinking_budget}
+        label="Max tokens for thinking. 0 or >=1024"
+        min="0"
+        max={settings.maxNumTokens}
+        updater={updateNum('thinking_budget')}
+      />
+      <Checkbox
+        checked={(settings?.thinking_budget && settings.thinking_budget >= 1024) || false}
+        field="enable_thinking"
+        label="Enable Thinking"
+        updater={(checked: boolean) => changeSettings([['thinking_budget'], checked ? 1024 : 0])}
+      />
+
+      <SectionHeader text="Prompt options" />
+      <NumberInput
+        value={settings.topKBlocks}
+        field="topKBlocks"
+        label="Number of blocks to use as citations"
+        min="1"
+        updater={updateNum('topKBlocks')}
+      />
+      <NumberInput
+        value={settings.maxHistory}
+        field="maxHistory"
+        label="The max number of previous interactions to use"
+        min="0"
+        updater={updateNum('maxHistory')}
+      />
+
+      <Slider
+        value={settings.contextFraction}
+        field="contextFraction"
+        label="Approximate fraction of num_tokens to use for citations text before truncating"
+        updater={updateTokenFraction('contextFraction')}
+      />
+      <Slider
+        value={settings.historyFraction}
+        field="historyFraction"
+        label="Approximate fraction of num_tokens to use for history text before truncating"
+        updater={updateTokenFraction('historyFraction')}
+      />
+      <SectionHeader text="Search filters" />
+      <NumberInput
+        value={settings.filters?.miri_confidence || 0}
+        field="filters.miri_confidence"
+        label="MIRI confidence"
+        min="0"
+        max="10"
+        updater={updateNum('filters.miri_confidence')}
+      />
+    </div>
+  )
+}
diff --git a/app/components/Playground/htmlControls.tsx b/app/components/Playground/htmlControls.tsx
new file mode 100644
index 00000000..3c9dc0fa
--- /dev/null
+++ b/app/components/Playground/htmlControls.tsx
@@ -0,0 +1,135 @@
+import {ChangeEvent, useState} from 'react'
+
+type Parseable = string | number | undefined
+type NumberParser = (v: Parseable) => number
+
+type InputFields = {
+  field: string
+  label: string
+  value?: Parseable
+  min?: string | number
+  max?: string | number
+  step?: string | number
+  parser?: NumberParser
+  updater: (v: any) => any
+}
+
+const between =
+  (
+    min: Parseable,
+    max: Parseable,
+    parser: NumberParser,
+    updater: (v: any) => any,
+    cacher: (v: any) => any
+  ) =>
+  (event: ChangeEvent) => {
+    let num = parser((event.target as HTMLInputElement).value)
+    if (isNaN(num)) {
+      cacher((event.target as HTMLInputElement).value)
+      return
+    } else if (min !== undefined && num < parser(min)) {
+      num = parser(min)
+    } else if (max !== undefined && num > parser(max)) {
+      num = parser(max)
+    }
+    cacher(null)
+    updater(num)
+  }
+
+export const SectionHeader = ({text}: {text: string}) => (
+  <h4 style={{gridColumn: 'span 4', fontSize: '1.125rem', fontWeight: 600}}>{text}</h4>
+)
+
+export const NumberInput = ({
+  field,
+  value,
+  label,
+  min,
+  max,
+  updater,
+  parser = (v) => parseInt(v as string, 10),
+}: InputFields) => {
+  const [internalValue, setInternalValue] = useState(null)
+  return (
+    <>
+      <label htmlFor={field} style={{gridColumn: 'span 3', display: 'inline-block'}}>
+        {label}
+        {internalValue !== null ? ' (invalid input)' : ''}:{' '}
+      </label>
+      <input
+        name={field}
+        value={internalValue !== null ? internalValue : value}
+        style={{width: '80px'}}
+        onChange={between(min, max, parser, updater, setInternalValue)}
+        type="number"
+      />
+    </>
+  )
+}
+
+export const Slider = ({
+  field,
+  value,
+  label,
+  min = 0,
+  max = 1,
+  step = 0.01,
+  parser = (v) => parseFloat(v as string),
+  updater,
+}: InputFields) => (
+  <>
+    <label htmlFor={field} style={{gridColumn: 'span 2'}}>
+      {label}:
+    </label>
+    <input
+      name={field}
+      style={{gridColumn: 'span 2'}}
+      value={value}
+      onChange={between(min, max, parser, updater, (x) => null)}
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+    />
+  </>
+)
+
+export const Checkbox = ({
+  field,
+  checked,
+  label = '',
+  updater,
+}: InputFields & {checked: boolean}) => (
+  <>
+    <label htmlFor={field} style={{gridColumn: 'span 2'}}>
+      {label}:
+    </label>
+    <input
+      name={field}
+      style={{gridColumn: 'span 2'}}
+      checked={checked}
+      onChange={(event: ChangeEvent) => updater((event.target as HTMLInputElement).checked)}
+      type="checkbox"
+    />
+  </>
+)
+
+export const Select = ({
+  name,
+  value,
+  options,
+  updater,
+}: {
+  name: string
+  value: string
+  options: string[]
+  updater: (v: any) => any
+}) => (
+  <select name={name} value={value} onChange={updater} style={{gridColumn: 'span 2'}}>
+    {options.map((option: string) => (
+      <option key={option} value={option}>
+        {option}
+      </option>
+    ))}
+  </select>
+)
diff --git a/app/hooks/useChat.ts b/app/hooks/useChat.ts
index 0c40e913..fb824ece 100644
--- a/app/hooks/useChat.ts
+++ b/app/hooks/useChat.ts
@@ -89,9 +89,32 @@ type Model =
   | 'anthropic/claude-opus-4-20250514'
 
 export type Mode = 'rookie' | 'concise' | 'default'
+
+export type SearchFilters = {
+  miri_confidence?: number
+  miri_distance?: string[]
+  needs_tech?: boolean | null
+}
+
 export type ChatSettings = {
   mode?: Mode
   completions?: Model
+  prompts?: {
+    [key: string]: any
+  }
+  modelID?: string
+  encoder?: string
+  topKBlocks?: number
+  maxNumTokens?: number
+  tokensBuffer?: number
+  maxHistory?: number
+  maxHistorySummaryTokens?: number
+  historyFraction?: number
+  contextFraction?: number
+  enable_hyde?: boolean
+  thinking_budget?: number
+  filters?: SearchFilters
+  [key: string]: any
 }
 
 const DATA_HEADER = 'data: '
diff --git a/app/hooks/usePlaygroundSettings.ts b/app/hooks/usePlaygroundSettings.ts
new file mode 100644
index 00000000..e0856748
--- /dev/null
+++ b/app/hooks/usePlaygroundSettings.ts
@@ -0,0 +1,146 @@
+import {useState, useEffect, useRef, useCallback} from 'react'
+import {useNavigate, useLocation} from '@remix-run/react'
+import {ChatSettings} from './useChat'
+
+const parseHash = (hash: string): {[key: string]: any} => {
+  if (!hash || hash === '#') return {}
+  const cleanHash = hash.startsWith('#') ? hash.slice(1) : hash
+  const params = new URLSearchParams(cleanHash)
+  const result: {[key: string]: any} = {}
+  params.forEach((value, key) => {
+    result[key] = value
+  })
+  return result
+}
+
+const serializeToHash = (obj: {[key: string]: any}): string => {
+  const params = new URLSearchParams()
+  Object.entries(obj).forEach(([key, val]) => {
+    if (val !== undefined && val !== null && val !== '') {
+      params.set(key, String(val))
+    }
+  })
+  const str = params.toString()
+  return str ? '#' + str : ''
+}
+
+const updateIn = (obj: {[key: string]: any}, [head, ...rest]: string[], val: any) => {
+  if (!head) {
+    // noop
+  } else if (!rest || rest.length == 0) {
+    obj[head] = val
+  } else {
+    if (obj[head] === undefined || typeof obj[head] !== 'object' || obj[head] === null) {
+      obj[head] = {}
+    }
+    updateIn(obj[head], rest, val)
+  }
+  return obj
+}
+
+export function useUrlSettings(onLoad: (data: any) => void) {
+  const [urlLoaded, setUrlLoaded] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation()
+  const debouncingEnabled = useRef(false)
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null)
+  const pendingUpdates = useRef<{[key: string]: any}>({})
+  const lastChangeTime = useRef<number>(Date.now())
+
+  useEffect(() => {
+    if (urlLoaded) return
+
+    const hashData = parseHash(location.hash)
+    onLoad(hashData)
+    debouncingEnabled.current = true
+    setUrlLoaded(true)
+  }, [location, urlLoaded, onLoad])
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current)
+      }
+      pendingUpdates.current = {}
+    }
+  }, [])
+
+  const updateInUrl = useCallback(
+    (vals: {[key: string]: any}) => {
+      const currentHashData = parseHash(location.hash)
+
+      if (!debouncingEnabled.current) {
+        const newHashData = {...currentHashData, ...vals}
+        const newHash = serializeToHash(newHashData)
+        navigate(location.pathname + newHash, {replace: true})
+        return
+      }
+
+      pendingUpdates.current = {...pendingUpdates.current, ...vals}
+      const now = Date.now()
+      const timeSinceLastChange = now - lastChangeTime.current
+
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current)
+        debounceTimeout.current = null
+      }
+
+      if (timeSinceLastChange > 2500) {
+        lastChangeTime.current = now
+        const updatesToApply = {...pendingUpdates.current}
+        pendingUpdates.current = {}
+
+        const newHashData = {...currentHashData, ...updatesToApply}
+        const newHash = serializeToHash(newHashData)
+
+        navigate(location.pathname + newHash, {replace: true})
+      } else {
+        lastChangeTime.current = now
+
+        debounceTimeout.current = setTimeout(() => {
+          const updatesToApply = {...pendingUpdates.current}
+          pendingUpdates.current = {}
+          debounceTimeout.current = null
+          lastChangeTime.current = 0
+
+          const currentHashData = parseHash(location.hash)
+          const newHashData = {...currentHashData, ...updatesToApply}
+          const newHash = serializeToHash(newHashData)
+
+          navigate(location.pathname + newHash, {replace: true})
+        }, 5000)
+      }
+    },
+    [location, navigate]
+  )
+
+  return updateInUrl
+}
+
+export function usePlaygroundSettings(defaultSettings: ChatSettings) {
+  const [settings, setSettings] = useState<ChatSettings>(defaultSettings)
+
+  const updateInUrl = useUrlSettings((hashData: any) => {
+    const updates: Partial<ChatSettings> = {}
+
+    Object.entries(hashData).forEach(([key, value]) => {
+      const path = key.split('.')
+      updateIn(updates as any, path, value)
+    })
+
+    setSettings((s) => ({...s, ...updates}))
+  })
+
+  const changeSetting = (path: string[], value: any) => {
+    updateInUrl({[path.join('.')]: value})
+    setSettings((s) => ({...updateIn(s, path, value)}))
+  }
+
+  const changeSettings = (...items: [string[], any][]) => {
+    const urlUpdates = items.reduce((acc, [path, val]) => ({...acc, [path.join('.')]: val}), {})
+    updateInUrl(urlUpdates)
+    setSettings((s) => items.reduce((acc, [path, val]) => ({...acc, ...updateIn(s, path, val)}), s))
+  }
+
+  return {settings, changeSetting, changeSettings, setSettings}
+}
diff --git a/app/root.css b/app/root.css
index 1f05be78..cb71a229 100644
--- a/app/root.css
+++ b/app/root.css
@@ -973,3 +973,7 @@ html.dark .bordered {
 }
 
 /* end mobile */
+
+.group:hover .delete-item {
+  display: block !important;
+}
diff --git a/app/routes/playground.tsx b/app/routes/playground.tsx
new file mode 100644
index 00000000..bb758755
--- /dev/null
+++ b/app/routes/playground.tsx
@@ -0,0 +1,132 @@
+import {useState} from 'react'
+import {ShouldRevalidateFunction} from '@remix-run/react'
+import Page from '~/components/Page'
+import {Entry, Mode} from '~/hooks/useChat'
+import {PlaygroundSettings, DEFAULT_FILTERS} from '~/components/Playground/Settings'
+import {PlaygroundPrompts} from '~/components/Playground/Prompts'
+import {PlaygroundChat} from '~/components/Playground/PlaygroundChat'
+import {usePlaygroundSettings} from '~/hooks/usePlaygroundSettings'
+
+export const shouldRevalidate: ShouldRevalidateFunction = () => false
+
+const DEFAULT_PROMPTS = {
+  system: `
+<miri-core-points>
+<entire-source id="LL">
+{yudkowsky-list-of-lethalities-2507132226-e11d43}
+</entire-source>
+
+<entire-source id="TP">
+{miri-the-problem-2507121135-b502d1}
+</entire-source>
+
+<entire-source id="TB">
+{miri-the-briefing-2507132220-44fbe5}
+</entire-source>
+
+<main-points>
+{miri-the-problem-main-points-2507132222-1916a0}
+</main-points>
+</miri-core-points>
+`,
+  history: '{stampy-history-2507211352-060b74}',
+  history_summary: '{stampy-history_summary-2507231056-b048af}',
+  pre_message: '',
+  post_message: `
+{post_message_new_noconfabwarn-2509230637-b187dc}
+
+{mode}`,
+  hyde_pre_message: '',
+  hyde_post_message: '{post_message_new_noconfabwarn_hyde-2509230634-645a9b}',
+  message_format: '<from-public-user id="{message_id}">\n{message}\n</from-public-user>',
+  modes: {
+    default: '',
+    concise: '{mode-concise-2507231147-db01d9}',
+    rookie: '{mode-rookie-2507231143-f32d39}',
+  },
+}
+
+const MODE_DESCRIPTIONS = {
+  rookie:
+    'For people who are new to the field of AI alignment. The answer might be longer, since technical terms will be explained in more detail and less background will be assumed.',
+  concise:
+    "Quick and to the point. Followup questions may need to be asked to get the full picture of what's going on.",
+  default: 'A balanced default mode.',
+}
+
+export default function Playground() {
+  const [sessionId] = useState(crypto.randomUUID())
+  const [query, setQuery] = useState<string>('')
+  const [history, setHistory] = useState<Entry[]>([])
+
+  const {settings, changeSetting, changeSettings} = usePlaygroundSettings({
+    mode: 'default',
+    modelID: 'anthropic/claude-sonnet-4-20250514',
+    encoder: 'cl100k_base',
+    topKBlocks: 20,
+    maxNumTokens: 200_000,
+    tokensBuffer: 50,
+    maxHistory: 10,
+    maxHistorySummaryTokens: 200,
+    historyFraction: 0.25,
+    contextFraction: 0.5,
+    enable_hyde: false,
+    thinking_budget: 0,
+    filters: DEFAULT_FILTERS,
+    prompts: DEFAULT_PROMPTS,
+  })
+
+  const setMode = (mode: Mode) => {
+    changeSetting(['mode'], mode)
+  }
+
+  return (
+    <Page noFooter>
+      <div className="full-height padding-top-32">
+        <div
+          style={{marginBottom: '20px', display: 'flex', justifyContent: 'flex-end', gap: '8px'}}
+        >
+          {(['default', 'rookie', 'concise'] as Mode[]).map((m) => (
+            <button
+              key={m}
+              onClick={() => setMode(m)}
+              title={MODE_DESCRIPTIONS[m]}
+              style={{
+                padding: '4px 8px',
+                backgroundColor: settings.mode === m ? '#d3f2f0' : 'white',
+              }}
+            >
+              {m}
+            </button>
+          ))}
+        </div>
+        <div style={{display: 'flex', gap: '20px', maxWidth: 'none', width: '100%'}}>
+          {/* Prompts panel - left */}
+          <div style={{width: '400px', flexShrink: 0}}>
+            <PlaygroundPrompts
+              settings={settings}
+              query={query}
+              history={history}
+              changeSettings={changeSettings}
+            />
+          </div>
+
+          {/* Chat - center */}
+          <div style={{flex: 1, minWidth: 0}}>
+            <PlaygroundChat
+              sessionId={sessionId}
+              settings={settings}
+              onQuery={setQuery}
+              onNewEntry={setHistory}
+            />
+          </div>
+
+          {/* Settings panel - right */}
+          <div style={{width: '400px', flexShrink: 0}}>
+            <PlaygroundSettings settings={settings} changeSettings={changeSettings} />
+          </div>
+        </div>
+      </div>
+    </Page>
+  )
+}