move mode selector

math-tutor/frontend/src/pages/ChatPage.tsx

@@ -793,7 +793,7 @@ export default function ChatPage() {
 
   return (
     <div className="app-shell">
-      <header className="app-header">
+      <header className="app-header app-header-chat">
         {showChatsButton ? (
           <button type="button" className="btn sidebar-toggle" onClick={handleOpenSidebar}>
             {t("chats")}
@@ -806,20 +806,20 @@ export default function ChatPage() {
             <div className="brand-subtitle">{t("prototypeWorkspace")}</div>
           </div>
         </div>
-        <div className="header-meta">
-          <OrchestratorSelect
-            value={selectedOrchestrator}
-            options={availableOrchestrators}
-            onChange={handleSwitchOrchestrator}
-            disabled={!isOrchestratorSelectable}
-          />
-        </div>
       </header>
       {orchestratorError ? <div className="chat-archive-error">{orchestratorError}</div> : null}
       {deepLinkError ? <div className="chat-archive-error">{deepLinkError}</div> : null}
 
       <main className="app-main">
         <section className="chat-column">
+          <div className="chat-mode-row">
+            <OrchestratorSelect
+              value={selectedOrchestrator}
+              options={availableOrchestrators}
+              onChange={handleSwitchOrchestrator}
+              disabled={!isOrchestratorSelectable}
+            />
+          </div>
           <ChatWindow
             messages={messages}
             draft={draft}

math-tutor/frontend/src/pages/TaskSelectionPage.tsx

@@ -92,82 +92,84 @@ export default function TaskSelectionPage() {
             <div className="brand-subtitle">{t("taskSelectionSubtitle")}</div>
           </div>
         </div>
-        <div className="header-meta">
-          <OrchestratorSelect
-            value={selectedOrchestrator}
-            options={availableOrchestrators}
-            onChange={handleSwitchOrchestrator}
-            disabled={!isOrchestratorSelectable}
-          />
-        </div>
       </header>
       {orchestratorError ? <div className="chat-archive-error">{orchestratorError}</div> : null}
 
       <main className="task-select-main">
-        <section className="task-select-card">
-          <div className="task-select-header">
-            <h2 className="task-select-title">{t("taskSelectionTitle")}</h2>
+        <div className="task-select-wrap">
+          <div className="task-mode-row">
+            <OrchestratorSelect
+              value={selectedOrchestrator}
+              options={availableOrchestrators}
+              onChange={handleSwitchOrchestrator}
+              disabled={!isOrchestratorSelectable}
+            />
           </div>
+          <section className="task-select-card">
+            <div className="task-select-header">
+              <h2 className="task-select-title">{t("taskSelectionTitle")}</h2>
+            </div>
 
-          <div className="task-select-controls">
-            <label className="task-select-label" htmlFor="task-file-select">
-              {t("taskFile")}
-            </label>
-            <select
-              id="task-file-select"
-              className="task-select"
-              value={selectedTaskRef?.fileId || ""}
-              onChange={(event) => setTaskFile(event.target.value)}
-              disabled={!taskFileOptions.length}
-            >
-              {taskFileOptions.length ? (
-                taskFileOptions.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))
-              ) : (
-                <option value="">{t("noTasksAvailable")}</option>
-              )}
-            </select>
+            <div className="task-select-controls">
+              <label className="task-select-label" htmlFor="task-file-select">
+                {t("taskFile")}
+              </label>
+              <select
+                id="task-file-select"
+                className="task-select"
+                value={selectedTaskRef?.fileId || ""}
+                onChange={(event) => setTaskFile(event.target.value)}
+                disabled={!taskFileOptions.length}
+              >
+                {taskFileOptions.length ? (
+                  taskFileOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))
+                ) : (
+                  <option value="">{t("noTasksAvailable")}</option>
+                )}
+              </select>
 
-            <label className="task-select-label" htmlFor="task-id-select">
-              {t("taskId")}
-            </label>
-            <select
-              id="task-id-select"
-              className="task-select"
-              value={selectedTaskRef?.taskId || ""}
-              onChange={(event) => setTaskId(event.target.value)}
-              disabled={!taskOptions.length}
-            >
-              {taskOptions.length ? (
-                taskOptions.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))
-              ) : (
-                <option value="">{t("noTasksAvailable")}</option>
-              )}
-            </select>
-          </div>
+              <label className="task-select-label" htmlFor="task-id-select">
+                {t("taskId")}
+              </label>
+              <select
+                id="task-id-select"
+                className="task-select"
+                value={selectedTaskRef?.taskId || ""}
+                onChange={(event) => setTaskId(event.target.value)}
+                disabled={!taskOptions.length}
+              >
+                {taskOptions.length ? (
+                  taskOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))
+                ) : (
+                  <option value="">{t("noTasksAvailable")}</option>
+                )}
+              </select>
+            </div>
 
-          <div className="task-panel-content" ref={taskDisplayRef}>
-            {selectedTask?.fullText || t("noTaskSelected")}
-          </div>
+            <div className="task-panel-content" ref={taskDisplayRef}>
+              {selectedTask?.fullText || t("noTaskSelected")}
+            </div>
 
-          {tasksError ? <div className="task-panel-error">{tasksError}</div> : null}
+            {tasksError ? <div className="task-panel-error">{tasksError}</div> : null}
 
-          <button
-            type="button"
-            className="btn primary task-solve-btn"
-            onClick={handleSolveWithTutor}
-            disabled={!selectedTaskRef}
-          >
-            {t("solveWithTutor")}
-          </button>
-        </section>
+            <button
+              type="button"
+              className="btn primary task-solve-btn"
+              onClick={handleSolveWithTutor}
+              disabled={!selectedTaskRef}
+            >
+              {t("solveWithTutor")}
+            </button>
+          </section>
+        </div>
       </main>
     </div>
   );

math-tutor/frontend/src/styles/theme.css

@@ -29,6 +29,10 @@ body {
   margin-bottom: 24px;
 }
 
+.app-header-chat {
+  justify-content: flex-start;
+}
+
 .brand {
   display: flex;
   align-items: center;
@@ -190,6 +194,14 @@ body {
   gap: 16px;
   min-height: 0;
   max-height: 85vh;
+  position: relative;
+}
+
+.chat-mode-row {
+  position: absolute;
+  top: -52px;
+  right: 0;
+  z-index: 2;
 }
 
 .chat-window {
@@ -700,6 +712,10 @@ body {
     align-items: flex-start;
   }
 
+  .app-header-chat {
+    justify-content: flex-start;
+  }
+
   .header-meta {
     width: 100%;
   }
@@ -715,6 +731,10 @@ body {
     min-height: 360px;
   }
 
+  .chat-mode-row {
+    position: static;
+  }
+
   .composer-row {
     width: 100%;
   }
@@ -803,8 +823,20 @@ body {
   place-items: center;
 }
 
-.task-select-card {
+.task-select-wrap {
   width: min(820px, 100%);
+  position: relative;
+}
+
+.task-mode-row {
+  position: absolute;
+  top: -52px;
+  right: 0;
+  z-index: 2;
+}
+
+.task-select-card {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -874,6 +906,11 @@ body {
     grid-template-columns: 1fr;
   }
 
+  .task-mode-row {
+    position: static;
+    margin-bottom: 12px;
+  }
+
   .task-solve-btn {
     width: 100%;
   }