Redesign the composer as a single input shell, not loose siblings

The duration select and import link were separate elements next to the
textarea — the select's focus ring read as a validation error (thick
accent-colored border, mismatched height vs. the button), and "or paste
/ upload a script" was a barely-visible dotted-underline link.

Replaces it with the chat-composer pattern (ChatGPT/Claude.ai): one
bordered card containing the textarea, with a footer toolbar strip for
secondary controls — a borderless pill-style duration select, an actual
"Import script" button with an icon, and the primary CTA. Reads as a
single obvious input at a glance instead of three competing controls.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/app.js

@@ -29,6 +29,7 @@ const state = {
   numSpeakers: 2,
   voices: [],
   voiceSelections: [null, null, null, null],
+  customVoiceFiles: [null, null, null, null],
   models: [],
   examples: [],
   parodyLines: [],
@@ -41,6 +42,7 @@ const el = {};
 [
   "runtimeStatus", "runtimeLabel", "aboutBtn", "aboutDialog", "closeAboutBtn",
   "modelSelect", "speakerStepper", "voiceRows", "cfgScale", "cfgScaleValue",
+  "voiceConsentRow", "voiceConsentCheckbox",
   "scriptPrompt", "durationSelect", "generateScriptBtn", "examplePills", "openImportBtn", "scriptGenStatus",
   "scriptTitle", "scriptDuration", "turnsList", "addTurnBtn",
   "generateBarMeta", "generateBtn",
@@ -120,6 +122,21 @@ state.previewAudio.addEventListener("ended", () => {
 });
 
 /* ---------------- Sidebar: model / speakers / voices ---------------- */
+const CUSTOM_VOICE_VALUE = "__custom__";
+const MAX_CUSTOM_AUDIO_BYTES = 15 * 1024 * 1024;
+
+function isCustomVoice(i) {
+  return state.voiceSelections[i] === CUSTOM_VOICE_VALUE;
+}
+
+function anyCustomVoiceActive() {
+  return Array.from({ length: state.numSpeakers }, (_, i) => i).some(isCustomVoice);
+}
+
+function updateVoiceConsentVisibility() {
+  el.voiceConsentRow.hidden = !anyCustomVoiceActive();
+}
+
 function renderSidebar() {
   el.modelSelect.innerHTML = state.models.map((m) => `<option value="${m}">${m}</option>`).join("");
 
@@ -137,12 +154,10 @@ function renderSidebar() {
     dot.style.background = `var(--speaker-${i + 1})`;
 
     const select = document.createElement("select");
-    select.innerHTML = state.voices.map((v) => `<option value="${v.name}">${v.name} (${v.gender})</option>`).join("");
+    select.innerHTML =
+      `<option value="${CUSTOM_VOICE_VALUE}">🎙️ Clone a voice…</option>` +
+      state.voices.map((v) => `<option value="${v.name}">${v.name} (${v.gender})</option>`).join("");
     if (state.voiceSelections[i]) select.value = state.voiceSelections[i];
-    select.addEventListener("change", () => {
-      state.voiceSelections[i] = select.value;
-      renderTurns();
-    });
 
     const playBtn = document.createElement("button");
     playBtn.type = "button";
@@ -150,11 +165,62 @@ function renderSidebar() {
     playBtn.textContent = "▶";
     playBtn.title = "Preview voice";
     playBtn.addEventListener("click", () => playVoicePreview(select.value, playBtn));
-    select.addEventListener("change", () => { playBtn.textContent = "▶"; });
+
+    select.addEventListener("change", () => {
+      state.voiceSelections[i] = select.value;
+      if (select.value !== CUSTOM_VOICE_VALUE) state.customVoiceFiles[i] = null;
+      playBtn.textContent = "▶";
+      renderSidebar();
+      renderTurns();
+    });
 
     row.append(dot, select, playBtn);
     el.voiceRows.append(row);
+
+    if (isCustomVoice(i)) {
+      playBtn.hidden = true;
+      const uploadRow = document.createElement("div");
+      uploadRow.className = "custom-voice-row";
+
+      const fileLabel = document.createElement("label");
+      fileLabel.className = "btn btn-sm upload-mini-btn";
+      fileLabel.textContent = state.customVoiceFiles[i] ? state.customVoiceFiles[i].name : "Choose audio file…";
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = "audio/*";
+      fileInput.hidden = true;
+      fileInput.addEventListener("change", () => {
+        const file = fileInput.files[0];
+        if (!file) return;
+        if (file.size > MAX_CUSTOM_AUDIO_BYTES) {
+          alert(`That file is too large (max ${MAX_CUSTOM_AUDIO_BYTES / (1024 * 1024)} MB).`);
+          fileInput.value = "";
+          return;
+        }
+        state.customVoiceFiles[i] = file;
+        renderSidebar();
+      });
+      fileLabel.append(fileInput);
+      uploadRow.append(fileLabel);
+
+      if (state.customVoiceFiles[i]) {
+        const clearBtn = document.createElement("button");
+        clearBtn.type = "button";
+        clearBtn.className = "btn btn-sm btn-icon-only";
+        clearBtn.textContent = "✕";
+        clearBtn.title = "Remove file";
+        clearBtn.addEventListener("click", () => {
+          state.customVoiceFiles[i] = null;
+          renderSidebar();
+        });
+        uploadRow.append(clearBtn);
+      }
+
+      el.voiceRows.append(uploadRow);
+    }
   }
+
+  updateVoiceConsentVisibility();
 }
 
 el.speakerStepper.querySelectorAll("button").forEach((btn) => {
@@ -171,6 +237,7 @@ el.cfgScale.addEventListener("input", () => {
 /* ---------------- Turn editor ---------------- */
 function speakerChoiceLabel(i) {
   const sel = state.voiceSelections[i];
+  if (sel === CUSTOM_VOICE_VALUE) return `Speaker ${i + 1} · Custom voice`;
   return sel ? `Speaker ${i + 1} · ${sel} (${genderOf(sel)})` : `Speaker ${i + 1}`;
 }
 
@@ -413,6 +480,15 @@ el.logToggleBtn.addEventListener("click", () => {
 });
 
 /* ---------------- Generate ---------------- */
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).split(",")[1] || "");
+    reader.onerror = () => reject(new Error(`Could not read ${file.name}`));
+    reader.readAsDataURL(file);
+  });
+}
+
 el.generateBtn.addEventListener("click", async () => {
   const script = state.turns.map((t) => (t.text || "").trim()).filter(Boolean).join(" ");
   if (!script) {
@@ -420,6 +496,17 @@ el.generateBtn.addEventListener("click", async () => {
     return;
   }
 
+  for (let i = 0; i < state.numSpeakers; i += 1) {
+    if (isCustomVoice(i) && !state.customVoiceFiles[i]) {
+      alert(`Upload a voice clip for Speaker ${i + 1}, or pick a preset voice instead.`);
+      return;
+    }
+  }
+  if (anyCustomVoiceActive() && !el.voiceConsentCheckbox.checked) {
+    alert("Confirm you have the right to use each uploaded voice before generating.");
+    return;
+  }
+
   el.generateBtn.disabled = true;
   el.generateBtn.textContent = "Generating...";
   el.resultBlock.classList.remove("visible");
@@ -431,12 +518,30 @@ el.generateBtn.addEventListener("click", async () => {
   const started = performance.now();
   setStatus("connecting", nextParodyLine() || "Provisioning GPU resources...");
 
+  let customAudio;
+  try {
+    customAudio = await Promise.all(
+      Array.from({ length: 4 }, (_, i) =>
+        i < state.numSpeakers && isCustomVoice(i) && state.customVoiceFiles[i]
+          ? fileToBase64(state.customVoiceFiles[i])
+          : Promise.resolve(null)
+      )
+    );
+  } catch (error) {
+    setStatus("error", error.message);
+    el.generateBtn.disabled = false;
+    el.generateBtn.textContent = "Generate Audio";
+    return;
+  }
+
   const payload = {
     model: el.modelSelect.value,
     num_speakers: state.numSpeakers,
     turns: state.turns,
-    speakers: state.voiceSelections,
+    speakers: state.voiceSelections.map((v) => (v === CUSTOM_VOICE_VALUE ? null : v)),
     cfg_scale: Number(el.cfgScale.value),
+    custom_audio: customAudio,
+    voice_consent: el.voiceConsentCheckbox.checked,
   };
 
   try {

static/index.html

@@ -44,6 +44,12 @@
             <button type="button" data-count="4">4</button>
           </div>
           <div id="voiceRows"></div>
+          <div id="voiceConsentRow" class="voice-consent-row" hidden>
+            <label>
+              <input type="checkbox" id="voiceConsentCheckbox" />
+              I have the right to use each uploaded voice and will disclose this audio as synthetic.
+            </label>
+          </div>
         </div>
 
         <div class="side-section">
@@ -64,19 +70,24 @@
       <main class="pane canvas">
         <div class="canvas-inner">
           <div class="composer">
-            <div class="composer-row">
-              <textarea
-                id="scriptPrompt"
-                rows="4"
-                placeholder="Describe a scenario — a wizard and an orc debating battle strategy..."
-              ></textarea>
-              <select id="durationSelect" class="duration-select" aria-label="Target length"></select>
+            <textarea
+              id="scriptPrompt"
+              class="composer-input"
+              rows="3"
+              placeholder="Describe a scenario — a wizard and an orc debating battle strategy..."
+            ></textarea>
+            <div class="composer-toolbar">
+              <div class="composer-toolbar-left">
+                <select id="durationSelect" class="toolbar-select" aria-label="Target length"></select>
+                <button class="toolbar-btn" id="openImportBtn" type="button">
+                  <span aria-hidden="true">📋</span> Import script
+                </button>
+              </div>
               <button id="generateScriptBtn" class="btn btn-ink" type="button">Write with AI</button>
             </div>
-            <div class="example-chips" id="examplePills"></div>
-            <button class="chip-import" id="openImportBtn" type="button">or paste / upload a script &rarr;</button>
-            <div id="scriptGenStatus" class="transcript-meta" style="margin-top: 8px;"></div>
           </div>
+          <div class="example-chips" id="examplePills"></div>
+          <div id="scriptGenStatus" class="transcript-meta" style="margin: 6px 0 4px;"></div>
 
           <div class="transcript-header">
             <h2 id="scriptTitle">Untitled conversation</h2>

static/styles.css

@@ -199,6 +199,42 @@ select:focus { outline: none; border-color: var(--accent); }
 .voice-play:hover { border-color: var(--accent); color: var(--accent); }
 .voice-play.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
 
+.custom-voice-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: -4px 0 8px 17px;
+}
+.upload-mini-btn {
+  font-size: 0.76rem;
+  padding: 6px 10px;
+  color: var(--ink-dim);
+  cursor: pointer;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+.upload-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+.voice-consent-row {
+  border: 1px solid var(--speaker-3);
+  background: rgba(184, 134, 43, 0.08);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  margin-top: 4px;
+}
+.voice-consent-row label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 0.78rem;
+  color: var(--ink-dim);
+  cursor: pointer;
+}
+.voice-consent-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
+
 .slider-row { display: flex; align-items: center; gap: 10px; }
 input[type="range"] { flex: 1; accent-color: var(--accent); }
 .slider-value { font-size: 0.8rem; color: var(--ink-dim); min-width: 32px; text-align: right; }
@@ -216,51 +252,88 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
 .canvas { background: var(--cream); padding: 26px 32px 140px; position: relative; }
 .canvas-inner { max-width: 720px; margin: 0 auto; }
 
+/* ---- Composer: a single input "shell" (textarea + toolbar), the
+   chat-composer pattern from ChatGPT/Claude.ai — unmistakable as an
+   input at a glance, with secondary controls grouped in a footer strip
+   instead of competing with the textarea as loose sibling elements. ---- */
 .composer {
   background: var(--paper);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius);
-  padding: 16px 18px;
   box-shadow: var(--shadow);
-  margin-bottom: 14px;
-}
-.composer-row { display: flex; gap: 10px; align-items: flex-end; }
-.duration-select {
-  width: auto;
-  flex-shrink: 0;
-  background-color: var(--field);
-  background-position: right 9px center;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  padding: 10px 26px 10px 10px;
-  font-size: 0.82rem;
-  color: var(--ink-dim);
-  align-self: stretch;
+  overflow: hidden;
+  margin-bottom: 12px;
 }
-.duration-select:focus { outline: none; border-color: var(--accent); }
-.composer textarea {
-  flex: 1;
-  border: 1px solid var(--border-strong);
+.composer-input {
+  display: block;
+  width: 100%;
+  border: none;
   resize: none;
-  background: var(--field);
-  box-shadow: inset 0 1px 3px rgba(38, 32, 25, 0.08);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-  font-size: 1rem;
-  line-height: 1.45;
+  background: transparent;
+  padding: 18px 20px 8px;
+  font-size: 1.05rem;
+  line-height: 1.5;
   font-family: var(--font);
   color: var(--ink);
-  min-height: 104px;
+  min-height: 100px;
   max-height: 240px;
   cursor: text;
 }
-.composer textarea:focus {
+.composer-input:focus { outline: none; }
+.composer-input::placeholder { color: var(--ink-faint); font-style: italic; }
+
+.composer-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--paper-soft);
+}
+.composer-toolbar-left { display: flex; align-items: center; gap: 2px; }
+
+.toolbar-select {
+  width: auto;
+  background-color: transparent;
+  background-position: right 7px center;
+  background-size: 9px 6px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--ink-dim);
+  font-size: 0.82rem;
+  font-weight: 600;
+  padding: 7px 24px 7px 11px;
+}
+.toolbar-select:hover { background-color: var(--paper); border-color: var(--border); }
+.toolbar-select:focus {
   outline: none;
-  border-color: var(--accent);
-  background: var(--paper);
+  background-color: var(--paper);
+  border-color: var(--border-strong);
   box-shadow: 0 0 0 3px var(--accent-soft);
 }
-.composer textarea::placeholder { color: var(--ink-faint); font-style: italic; }
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ink-dim);
+  font-size: 0.82rem;
+  font-weight: 600;
+  padding: 7px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.toolbar-btn:hover { background: var(--paper); border-color: var(--border); color: var(--accent); }
+
+.composer-toolbar .btn-ink {
+  border-radius: 999px;
+  padding: 9px 18px;
+  font-size: 0.84rem;
+}
 
 .btn {
   font-family: var(--font-ui);
@@ -302,16 +375,6 @@ input[type="range"] { flex: 1; accent-color: var(--accent); }
   cursor: pointer;
 }
 .chip:hover { border-color: var(--accent); color: var(--accent); }
-.chip-import {
-  font-size: 0.78rem;
-  color: var(--ink-faint);
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  padding: 5px 4px;
-}
 
 /* ---------------- Transcript ---------------- */
 .transcript-header {