From 06f8625987cb1b827f02776a735985631da12221 Mon Sep 17 00:00:00 2001
From: Lauren <lauren@cloud>
Date: Wed, 24 Sep 2025 10:30:48 +0000
Subject: [PATCH 1/2] initial playground

---
 app/components/Playground/PlaygroundChat.tsx | 216 +++++++++++++++++++
 app/components/Playground/Prompts.tsx        | 166 ++++++++++++++
 app/components/Playground/Settings.tsx       | 215 ++++++++++++++++++
 app/components/Playground/htmlControls.tsx   | 135 ++++++++++++
 app/hooks/useChat.ts                         |  23 ++
 app/root.css                                 |   4 +
 app/routes/playground.tsx                    | 152 +++++++++++++
 7 files changed, 911 insertions(+)
 create mode 100644 app/components/Playground/PlaygroundChat.tsx
 create mode 100644 app/components/Playground/Prompts.tsx
 create mode 100644 app/components/Playground/Settings.tsx
 create mode 100644 app/components/Playground/htmlControls.tsx
 create mode 100644 app/routes/playground.tsx

diff --git a/app/components/Playground/PlaygroundChat.tsx b/app/components/Playground/PlaygroundChat.tsx
new file mode 100644
index 00000000..683a108d
--- /dev/null
+++ b/app/components/Playground/PlaygroundChat.tsx
@@ -0,0 +1,216 @@
+import {useState} 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 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 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)
+
+    const result = await queryLLM(history, updateCurrent, sessionId, controller, settings)
+
+    if (result.result.content !== 'aborted') {
+      addResult(query, result)
+    }
+    setCurrent(undefined)
+    setIsSearching(false)
+  }
+
+  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'}}>
+        <Input
+          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 === 'Enter' && !e.shiftKey && query.trim()) {
+              e.preventDefault()
+              abortable(search)(query)
+            } else if (e.key === 'Escape') {
+              controller.abort()
+              setIsSearching(false)
+            }
+          }}
+        />
+        <SendIcon
+          style={{position: 'absolute', right: '12px', top: '12px', cursor: 'pointer'}}
+          onClick={() => query.trim() && abortable(search)(query)}
+        />
+      </div>
+
+      {current && (
+        <div style={{marginTop: '16px'}}>
+          {current.phase === 'started' && <p>Loading: Sending query...</p>}
+          {current.phase === 'semantic' && <p>Loading: Performing semantic search...</p>}
+          {current.phase === 'context' && <p>Loading: Preparing context...</p>}
+          {current.phase === 'llm' && <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/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..63fde002
--- /dev/null
+++ b/app/routes/playground.tsx
@@ -0,0 +1,152 @@
+import {useState, useEffect} from 'react'
+import {ShouldRevalidateFunction, useSearchParams} from '@remix-run/react'
+import Page from '~/components/Page'
+import {ChatSettings, Entry, Mode} from '~/hooks/useChat'
+import {PlaygroundSettings, MODELS, DEFAULT_FILTERS} from '~/components/Playground/Settings'
+import {PlaygroundPrompts} from '~/components/Playground/Prompts'
+import {PlaygroundChat} from '~/components/Playground/PlaygroundChat'
+
+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 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 default function Playground() {
+  const [sessionId] = useState(crypto.randomUUID())
+  const [params, setParams] = useSearchParams()
+  const [query, setQuery] = useState<string>('')
+  const [history, setHistory] = useState<Entry[]>([])
+
+  const [settings, setSettings] = useState<ChatSettings>({
+    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,
+  })
+
+  useEffect(() => {
+    const mode = (params.get('mode') || 'default') as Mode
+    const modelID = params.get('modelID') || settings.modelID
+    setSettings((s) => ({...s, mode, modelID}))
+  }, [params])
+
+  const changeSetting = (path: string[], value: any) => {
+    setSettings((s) => ({...updateIn(s, path, value)}))
+  }
+
+  const changeSettings = (...items: [string[], any][]) => {
+    setSettings((s) => items.reduce((acc, [path, val]) => ({...acc, ...updateIn(s, path, val)}), s))
+  }
+
+  const setMode = (mode: Mode) => {
+    setSettings({...settings, mode})
+    setParams({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)}
+              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>
+  )
+}

From 62277be4a8254d6c7c769c0c2adf3eeed466086a Mon Sep 17 00:00:00 2001
From: Lauren <lauren@cloud>
Date: Wed, 24 Sep 2025 12:05:41 +0000
Subject: [PATCH 2/2] idk wip

---
 app/components/Input/index.tsx               |  25 +++-
 app/components/Playground/PlaygroundChat.tsx | 119 +++++++++++++--
 app/hooks/usePlaygroundSettings.ts           | 146 +++++++++++++++++++
 app/routes/playground.tsx                    |  48 ++----
 4 files changed, 287 insertions(+), 51 deletions(-)
 create mode 100644 app/hooks/usePlaygroundSettings.ts

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
index 683a108d..8ea0c44f 100644
--- a/app/components/Playground/PlaygroundChat.tsx
+++ b/app/components/Playground/PlaygroundChat.tsx
@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useState, useEffect, useRef} from 'react'
 import {
   queryLLM,
   Entry,
@@ -18,6 +18,29 @@ const scroll30 = () => {
   }
 }
 
+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'
@@ -53,6 +76,21 @@ export const PlaygroundChat = ({
   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') {
@@ -93,13 +131,33 @@ export const PlaygroundChat = ({
 
     const history = makeHistory(query, entries)
 
-    const result = await queryLLM(history, updateCurrent, sessionId, controller, settings)
+    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) => {
@@ -164,8 +222,9 @@ export const PlaygroundChat = ({
         </div>
       )}
 
-      <div style={{position: 'relative', marginTop: '16px'}}>
+      <div style={{position: 'relative', marginTop: '16px', display: 'flex', gap: '8px'}}>
         <Input
+          ref={inputRef}
           placeholder="Ask a question..."
           className="large full-width"
           value={query}
@@ -175,27 +234,65 @@ export const PlaygroundChat = ({
             onQuery?.(e.target.value)
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey && query.trim()) {
+            if (e.key === 'Escape') {
+              e.currentTarget.blur()
+            } else if (e.key === 'Enter' && !e.shiftKey && query.trim() && !isSearching) {
               e.preventDefault()
               abortable(search)(query)
-            } else if (e.key === 'Escape') {
+            }
+          }}
+        />
+        <button
+          onClick={() => {
+            if (isSearching) {
               controller.abort()
               setIsSearching(false)
+            } else if (query.trim()) {
+              abortable(search)(query)
             }
           }}
-        />
-        <SendIcon
-          style={{position: 'absolute', right: '12px', top: '12px', cursor: 'pointer'}}
-          onClick={() => 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 === 'llm' && <p>Loading: Thinking...</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' && (
             <>
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/routes/playground.tsx b/app/routes/playground.tsx
index 63fde002..bb758755 100644
--- a/app/routes/playground.tsx
+++ b/app/routes/playground.tsx
@@ -1,10 +1,11 @@
-import {useState, useEffect} from 'react'
-import {ShouldRevalidateFunction, useSearchParams} from '@remix-run/react'
+import {useState} from 'react'
+import {ShouldRevalidateFunction} from '@remix-run/react'
 import Page from '~/components/Page'
-import {ChatSettings, Entry, Mode} from '~/hooks/useChat'
-import {PlaygroundSettings, MODELS, DEFAULT_FILTERS} from '~/components/Playground/Settings'
+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
 
@@ -45,27 +46,20 @@ const DEFAULT_PROMPTS = {
   },
 }
 
-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
+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 [params, setParams] = useSearchParams()
   const [query, setQuery] = useState<string>('')
   const [history, setHistory] = useState<Entry[]>([])
 
-  const [settings, setSettings] = useState<ChatSettings>({
+  const {settings, changeSetting, changeSettings} = usePlaygroundSettings({
     mode: 'default',
     modelID: 'anthropic/claude-sonnet-4-20250514',
     encoder: 'cl100k_base',
@@ -82,23 +76,8 @@ export default function Playground() {
     prompts: DEFAULT_PROMPTS,
   })
 
-  useEffect(() => {
-    const mode = (params.get('mode') || 'default') as Mode
-    const modelID = params.get('modelID') || settings.modelID
-    setSettings((s) => ({...s, mode, modelID}))
-  }, [params])
-
-  const changeSetting = (path: string[], value: any) => {
-    setSettings((s) => ({...updateIn(s, path, value)}))
-  }
-
-  const changeSettings = (...items: [string[], any][]) => {
-    setSettings((s) => items.reduce((acc, [path, val]) => ({...acc, ...updateIn(s, path, val)}), s))
-  }
-
   const setMode = (mode: Mode) => {
-    setSettings({...settings, mode})
-    setParams({mode})
+    changeSetting(['mode'], mode)
   }
 
   return (
@@ -111,6 +90,7 @@ export default function Playground() {
             <button
               key={m}
               onClick={() => setMode(m)}
+              title={MODE_DESCRIPTIONS[m]}
               style={{
                 padding: '4px 8px',
                 backgroundColor: settings.mode === m ? '#d3f2f0' : 'white',