right panel now toggles between two full-height views

assets/app.js

@@ -2,6 +2,18 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.m
 
 const client = await Client.connect(window.location.origin);
 
+const REQUIRED_FIELDS = [
+  "current-country",
+  "residence-status",
+  "education",
+  "occupation",
+  "experience",
+  "budget",
+  "family",
+  "timeline",
+  "goals",
+];
+
 function unwrapResult(result) {
   if (result && Array.isArray(result.data)) {
     return result.data.length === 1 ? result.data[0] : result.data;
@@ -14,41 +26,49 @@ const state = {
   globeState: { version: 0, markers: [], highlights: [], fly_to: null },
   choices: null,
   busy: false,
+  view: "form",
 };
 
 const els = {
+  formView: document.getElementById("form-view"),
+  chatView: document.getElementById("chat-view"),
+  formStatus: document.getElementById("form-status"),
   statusBanner: document.getElementById("status-banner"),
   chatMessages: document.getElementById("chat-messages"),
   chatInput: document.getElementById("chat-input"),
   chatSend: document.getElementById("chat-send"),
+  intakeForm: document.getElementById("intake-form"),
   createPrompt: document.getElementById("create-prompt"),
   personaList: document.getElementById("persona-list"),
-  tabButtons: document.querySelectorAll(".tab-button"),
-  formTab: document.getElementById("form-tab"),
-  chatTab: document.getElementById("chat-tab"),
 };
 
-function showTab(name) {
-  const isForm = name === "form";
-  els.formTab.classList.toggle("active", isForm);
-  els.chatTab.classList.toggle("active", !isForm);
-  els.tabButtons.forEach((button) => {
-    button.classList.toggle("active", button.dataset.tab === name);
-  });
+function activeStatusBanner() {
+  return state.view === "form" ? els.formStatus : els.statusBanner;
 }
 
-els.tabButtons.forEach((button) => {
-  button.addEventListener("click", () => showTab(button.dataset.tab));
-});
-
 function setStatus(message) {
+  const banner = activeStatusBanner();
+  const inactive =
+    state.view === "form" ? els.statusBanner : els.formStatus;
+
   if (!message) {
-    els.statusBanner.classList.remove("visible");
-    els.statusBanner.textContent = "";
+    banner.classList.remove("visible");
+    banner.textContent = "";
+    inactive.classList.remove("visible");
+    inactive.textContent = "";
     return;
   }
-  els.statusBanner.textContent = message;
-  els.statusBanner.classList.add("visible");
+  banner.textContent = message;
+  banner.classList.add("visible");
+  inactive.classList.remove("visible");
+  inactive.textContent = "";
+}
+
+function showChatView() {
+  state.view = "chat";
+  els.formView.classList.remove("is-active");
+  els.chatView.classList.add("is-active");
+  setStatus("");
 }
 
 function setBusy(busy) {
@@ -84,6 +104,40 @@ function selectedValues(select) {
   return value || null;
 }
 
+function fieldValue(id) {
+  const element = document.getElementById(id);
+  if (element.tagName === "TEXTAREA") {
+    return element.value.trim();
+  }
+  return selectedValues(element);
+}
+
+function setFieldInvalid(id, invalid) {
+  const element = document.getElementById(id);
+  element.classList.toggle("invalid", invalid);
+}
+
+function validateForm() {
+  let valid = true;
+  for (const id of REQUIRED_FIELDS) {
+    const empty = !fieldValue(id);
+    setFieldInvalid(id, empty);
+    if (empty) {
+      valid = false;
+    }
+  }
+  if (!valid) {
+    setStatus("Please fill in all required fields before submitting.");
+  }
+  return valid;
+}
+
+function clearFieldValidation() {
+  for (const id of REQUIRED_FIELDS) {
+    setFieldInvalid(id, false);
+  }
+}
+
 function renderMessages() {
   els.chatMessages.innerHTML = "";
   for (const message of state.history) {
@@ -113,6 +167,20 @@ function applyGlobeState(globeState) {
   window.BorderlessGlobe?.applyState(globeState);
 }
 
+function formPayload() {
+  return {
+    current_country: selectedValues(document.getElementById("current-country")),
+    residence_status: selectedValues(document.getElementById("residence-status")),
+    education: selectedValues(document.getElementById("education")),
+    occupation: selectedValues(document.getElementById("occupation")),
+    experience: selectedValues(document.getElementById("experience")),
+    budget: selectedValues(document.getElementById("budget")),
+    family: selectedValues(document.getElementById("family")),
+    timeline: selectedValues(document.getElementById("timeline")),
+    goals: document.getElementById("goals").value.trim(),
+  };
+}
+
 async function loadChoices() {
   const result = await client.predict("/get_intake_choices", {});
   const choices = unwrapResult(result);
@@ -137,16 +205,52 @@ async function loadChoices() {
   }
 }
 
+async function runChat(message) {
+  const result = await client.predict("/chat", {
+    message,
+    history: state.history,
+    globe_state: state.globeState,
+  });
+  const payload = unwrapResult(result);
+  state.history = payload.history || state.history;
+  renderMessages();
+  if (payload.globe_state) {
+    applyGlobeState(payload.globe_state);
+  }
+}
+
+async function sendChatMessage(message) {
+  setBusy(true);
+  setStatus("Researching pathways...");
+  try {
+    await runChat(message);
+    setStatus("");
+  } catch (error) {
+    setStatus(`Chat failed: ${error.message || error}`);
+    throw error;
+  } finally {
+    setBusy(false);
+  }
+}
+
 async function loadPersonaPrompt(personaId) {
+  if (state.busy) {
+    return;
+  }
+
+  showChatView();
   setBusy(true);
   setStatus("Building demo persona prompt...");
   try {
     const result = await client.predict("/build_persona_prompt", {
       persona_id: personaId,
     });
-    els.chatInput.value = unwrapResult(result) || "";
-    showTab("chat");
-    setStatus("");
+    const message = unwrapResult(result) || "";
+    if (!message) {
+      setStatus("Could not load persona prompt.");
+      return;
+    }
+    await sendChatMessage(message);
   } catch (error) {
     setStatus(`Could not load persona prompt: ${error.message || error}`);
   } finally {
@@ -154,26 +258,28 @@ async function loadPersonaPrompt(personaId) {
   }
 }
 
-async function createResearchPrompt() {
+async function submitForm(event) {
+  event.preventDefault();
+  if (state.busy || !validateForm()) {
+    return;
+  }
+
+  showChatView();
   setBusy(true);
   setStatus("Building research prompt...");
   try {
-    const result = await client.predict("/build_research_prompt", {
-      current_country: selectedValues(document.getElementById("current-country")),
-      residence_status: selectedValues(document.getElementById("residence-status")),
-      education: selectedValues(document.getElementById("education")),
-      occupation: selectedValues(document.getElementById("occupation")),
-      experience: selectedValues(document.getElementById("experience")),
-      budget: selectedValues(document.getElementById("budget")),
-      family: selectedValues(document.getElementById("family")),
-      timeline: selectedValues(document.getElementById("timeline")),
-      goals: document.getElementById("goals").value || "",
-    });
-    els.chatInput.value = unwrapResult(result) || "";
-    showTab("chat");
+    const result = await client.predict("/build_research_prompt", formPayload());
+    const message = unwrapResult(result) || "";
+    if (!message) {
+      setStatus("Could not build prompt.");
+      return;
+    }
+    clearFieldValidation();
+    setStatus("Researching pathways...");
+    await runChat(message);
     setStatus("");
   } catch (error) {
-    setStatus(`Could not build prompt: ${error.message || error}`);
+    setStatus(`Submission failed: ${error.message || error}`);
   } finally {
     setBusy(false);
   }
@@ -185,32 +291,21 @@ async function sendChat() {
     return;
   }
 
-  setBusy(true);
-  setStatus("Researching pathways...");
   els.chatInput.value = "";
-
   try {
-    const result = await client.predict("/chat", {
-      message,
-      history: state.history,
-      globe_state: state.globeState,
-    });
-    const payload = unwrapResult(result);
-    state.history = payload.history || state.history;
-    renderMessages();
-    if (payload.globe_state) {
-      applyGlobeState(payload.globe_state);
-    }
-    setStatus("");
-  } catch (error) {
-    setStatus(`Chat failed: ${error.message || error}`);
+    await sendChatMessage(message);
+  } catch {
     els.chatInput.value = message;
-  } finally {
-    setBusy(false);
   }
 }
 
-els.createPrompt.addEventListener("click", createResearchPrompt);
+for (const id of REQUIRED_FIELDS) {
+  const element = document.getElementById(id);
+  element.addEventListener("input", () => setFieldInvalid(id, false));
+  element.addEventListener("change", () => setFieldInvalid(id, false));
+}
+
+els.intakeForm.addEventListener("submit", submitForm);
 els.chatSend.addEventListener("click", sendChat);
 els.chatInput.addEventListener("keydown", (event) => {
   if (event.key === "Enter" && !event.shiftKey) {

assets/globe.css

@@ -13,8 +13,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-height: 70vh;
-  max-height: 80vh;
+  min-height: 0;
   border-radius: 12px;
   overflow: hidden;
   background:

assets/index.html

@@ -28,8 +28,6 @@
 
       <main class="borderless-main-workspace">
         <section class="borderless-center-panel">
-         
-
           <div class="globe-root globe-column">
             <div class="globe-shell is-loading">
               <div
@@ -45,75 +43,73 @@
         </section>
 
         <section class="borderless-chat-panel">
-          <div class="tab-bar">
-            <button type="button" class="tab-button active" data-tab="form">Form</button>
-            <button type="button" class="tab-button" data-tab="chat">Chat</button>
-          </div>
-
-          <div id="form-tab" class="tab-panel active borderless-form-panel">
+          <div id="form-view" class="side-view is-active">
+          <form id="intake-form" class="borderless-form-panel" novalidate>
             <div class="form-row">
               <div class="form-field">
                 <label for="current-country">Current country</label>
-                <select id="current-country"></select>
+                <select id="current-country" required></select>
               </div>
               <div class="form-field">
                 <label for="residence-status">Current residence status</label>
-                <select id="residence-status"></select>
+                <select id="residence-status" required></select>
               </div>
             </div>
             <div class="form-row">
               <div class="form-field">
                 <label for="education">Education</label>
-                <select id="education"></select>
+                <select id="education" required></select>
               </div>
               <div class="form-field">
                 <label for="occupation">Occupation</label>
-                <select id="occupation"></select>
+                <select id="occupation" required></select>
               </div>
             </div>
             <div class="form-row">
               <div class="form-field">
                 <label for="experience">Experience</label>
-                <select id="experience"></select>
+                <select id="experience" required></select>
               </div>
               <div class="form-field">
                 <label for="timeline">Target timeline</label>
-                <select id="timeline"></select>
+                <select id="timeline" required></select>
               </div>
             </div>
             <div class="form-row">
               <div class="form-field">
                 <label for="budget">Budget</label>
-                <select id="budget"></select>
+                <select id="budget" required></select>
               </div>
               <div class="form-field">
                 <label for="family">Family / dependents</label>
-                <select id="family"></select>
+                <select id="family" required></select>
               </div>
             </div>
-            <div class="form-field">
+            <div class="form-field form-goals-field">
               <label for="goals">Goals in everyday language</label>
               <textarea
                 id="goals"
+                required
                 placeholder="e.g. I want a realistic skilled-worker route, lower risk, and a path to permanent residence."
               ></textarea>
             </div>
-            <div>
-              <div class="borderless-examples-title">Demo personas</div>
+            <div class="form-footer">
               <div id="persona-list" class="persona-list"></div>
+              <button type="submit" id="create-prompt" class="primary">
+                Submit
+              </button>
             </div>
-            <button type="button" id="create-prompt" class="primary">
-              Create research prompt
-            </button>
+          </form>
+          <div id="form-status" class="status-banner"></div>
           </div>
 
-          <div id="chat-tab" class="tab-panel chat-panel">
+          <div id="chat-view" class="side-view">
             <div id="status-banner" class="status-banner"></div>
             <div id="chat-messages" class="chat-messages"></div>
             <div class="chat-input-row">
               <textarea
                 id="chat-input"
-                placeholder="Create a prompt from the form, choose a demo, or type directly..."
+                placeholder="Ask a follow-up question..."
               ></textarea>
               <button type="button" id="chat-send" class="primary">Send</button>
             </div>

assets/server.css

@@ -21,7 +21,9 @@ a {
 .app-shell {
   display: flex;
   flex-direction: column;
+  height: 100vh;
   min-height: 100vh;
+  overflow: hidden;
 }
 
 .app-header {
@@ -78,7 +80,8 @@ button:disabled {
 
 .borderless-center-panel,
 .borderless-chat-panel {
-  min-height: 70vh;
+  min-height: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -102,39 +105,27 @@ button:disabled {
 .borderless-chat-panel {
   border-left: 1px solid rgba(148, 163, 184, 0.18);
   padding-left: 10px;
+  overflow: hidden;
 }
 
-.tab-bar {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.tab-bar button {
-  flex: 1;
-}
-
-.tab-bar button.active {
-  border-color: #f59e0b;
-  color: #fbbf24;
-}
-
-.tab-panel {
+.side-view {
   display: none;
   flex: 1 1 auto;
   min-height: 0;
-  overflow: hidden;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab-panel.active {
+.side-view.is-active {
   display: flex;
-  flex-direction: column;
 }
 
 .borderless-form-panel {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 14px;
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
   padding-right: 4px;
 }
@@ -142,13 +133,31 @@ button:disabled {
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 12px;
 }
 
 .form-field {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+}
+
+.form-goals-field {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.form-footer {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 4px;
+}
+
+.form-footer .primary {
+  width: 100%;
 }
 
 .form-field label {
@@ -168,9 +177,15 @@ button:disabled {
   font: inherit;
 }
 
-.form-field textarea {
-  min-height: 72px;
-  resize: vertical;
+.form-goals-field textarea {
+  flex: 1 1 auto;
+  min-height: 96px;
+  resize: none;
+}
+
+.form-field select.invalid,
+.form-field textarea.invalid {
+  border-color: #f87171;
 }
 
 .persona-list {
@@ -183,14 +198,6 @@ button:disabled {
   font-size: 0.85rem;
 }
 
-.chat-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
 .chat-messages {
   flex: 1 1 auto;
   min-height: 0;
@@ -267,10 +274,21 @@ button:disabled {
 }
 
 @media (max-width: 900px) {
+  .app-shell {
+    height: auto;
+    overflow: auto;
+  }
+
   .borderless-main-workspace {
     grid-template-columns: 1fr;
   }
 
+  .borderless-center-panel,
+  .borderless-chat-panel {
+    height: auto;
+    min-height: 50vh;
+  }
+
   .borderless-chat-panel {
     border-left: 0;
     padding-left: 0;
@@ -279,4 +297,9 @@ button:disabled {
   .form-row {
     grid-template-columns: 1fr;
   }
+
+  .form-goals-field textarea {
+    min-height: 120px;
+    resize: vertical;
+  }
 }

ui/intake/panel.py

@@ -33,7 +33,7 @@ def _searchable_dropdown(
     )
 
 
-def _create_research_prompt_and_open_chat(
+def _create_research_prompt(
     current_country,
     residence_status,
     education,
@@ -56,13 +56,10 @@ def _create_research_prompt_and_open_chat(
         family,
         timeline,
         goals,
-    ), gr.update(selected="chat")
+    )
 
 
-def render_intake_panel(
-    chat_input: gr.MultimodalTextbox,
-    workspace_tabs: gr.Tabs,
-) -> None:
+def render_intake_panel(chat_input: gr.MultimodalTextbox) -> None:
     countries = country_choices()
 
     with gr.Column(elem_classes=["borderless-form-panel"]):
@@ -110,8 +107,8 @@ def render_intake_panel(
                 "and a path to permanent residence."
             ),
         )
-        gr.Button("Create research prompt", variant="primary").click(
-            fn=_create_research_prompt_and_open_chat,
+        gr.Button("Submit", variant="primary").click(
+            fn=_create_research_prompt,
             inputs=[
                 current_country,
                 residence_status,
@@ -123,6 +120,6 @@ def render_intake_panel(
                 timeline,
                 goals,
             ],
-            outputs=[chat_input, workspace_tabs],
+            outputs=[chat_input],
             queue=False,
         )

ui/workspace.py

@@ -14,7 +14,7 @@ def create_main_workspace(
     history_container: gr.Column | None = None,
 ) -> gr.ChatInterface:
     """
-    Compose the main workspace: globe panel, intake form tab, and chat tab.
+    Compose the main workspace: globe panel, intake form, and chat.
     """
     globe_state = gr.JSON(value=empty_globe_state(), visible=False, elem_id="globe-state")
     chat_input = gr.MultimodalTextbox(
@@ -43,30 +43,27 @@ def create_main_workspace(
             min_width=360,
             elem_classes=["borderless-chat-panel"],
         ):
-            with gr.Tabs(elem_classes=["borderless-tabs"]) as workspace_tabs:
-                with gr.Tab("Form", elem_classes=["borderless-form-tab"]):
-                    render_intake_panel(chat_input, workspace_tabs)
-                with gr.Tab("Chat", id="chat", elem_classes=["borderless-chat-tab"]):
-                    chat = SidebarChatInterface(
-                        respond,
-                        multimodal=True,
-                        chatbot=gr.Chatbot(
-                            show_label=False,
-                            container=False,
-                            elem_classes=["borderless-chatbot"],
-                        ),
-                        textbox=chat_input,
-                        history_container=history_container,
-                        fill_height=True,
-                        additional_inputs=[
-                            gr.State(BORDERLESS_SYSTEM_PROMPT),
-                            gr.State(DEFAULT_MAX_TOKENS),
-                            gr.State(DEFAULT_TEMPERATURE),
-                            gr.State(DEFAULT_TOP_P),
-                            globe_state,
-                        ],
-                        additional_outputs=[globe_state],
-                    )
+            render_intake_panel(chat_input)
+            chat = SidebarChatInterface(
+                respond,
+                multimodal=True,
+                chatbot=gr.Chatbot(
+                    show_label=False,
+                    container=False,
+                    elem_classes=["borderless-chatbot"],
+                ),
+                textbox=chat_input,
+                history_container=history_container,
+                fill_height=True,
+                additional_inputs=[
+                    gr.State(BORDERLESS_SYSTEM_PROMPT),
+                    gr.State(DEFAULT_MAX_TOKENS),
+                    gr.State(DEFAULT_TEMPERATURE),
+                    gr.State(DEFAULT_TOP_P),
+                    globe_state,
+                ],
+                additional_outputs=[globe_state],
+            )
 
     globe_state.change(
         fn=None,