feat(app): make redesigned question dock opt-in (#59723)

Author: usrnk1

packages/app/component-tests/session-question-dock.spec.ts

@@ -786,6 +786,8 @@ export const dict = {
   "settings.experimental.row.newIcons.description": "Preview the updated icon set",
   "settings.experimental.row.foldUserMessages.title": "Fold long messages",
   "settings.experimental.row.foldUserMessages.description": "Fold your messages past 12 lines behind a Read more button",
+  "settings.experimental.row.newQuestionUI.title": "New question UI",
+  "settings.experimental.row.newQuestionUI.description": "Preview the keyboard-first question dock",
   "settings.plugins.reload": "Reload",
   "settings.plugins.status.loading": "Loading",
   "settings.plugins.status.failed": "Failed",

packages/app/src/runtime/i18n/en.ts

@@ -3,6 +3,7 @@ import { SessionElicitationDock } from "@/session/requests/session-elicitation-d
 import { SessionPermissionDock } from "@/session/requests/session-permission-dock"
 import { SessionQuestionDock } from "@/session/requests/session-question-dock"
 import { questionMotion } from "@/session/requests/question-motion"
+import { useSettings } from "@/settings/model"
 import { SessionWebSearchDock } from "@/session/requests/session-websearch-dock"
 import type { SessionComposerRegionController } from "./session-composer-region-controller"
 import { ComposerMorph, Grow } from "./spring-height"
@@ -30,6 +31,7 @@ export function SessionComposerRegion(props: {
   subagent: JSX.Element
 }) {
   const controller = props.controller
+  const settings = useSettings()
 
   const face = createMemo(() => {
     const websearch = controller.state.websearch.request()
@@ -56,15 +58,18 @@ export function SessionComposerRegion(props: {
       >
         <div class="relative z-[70] flex flex-col">
           {props.above}
-          <ComposerMorph face={face()} instant={(face) => !!face.question && !questionMotion()}>
+          <ComposerMorph
+            face={face()}
+            instant={(face) => !!face.question && (!settings.general.newQuestionUI() || !questionMotion())}
+          >
             {(current) => (
               <div class="flex flex-col">
                 <Grow when={current().websearch} fade card class={controller.child() ? "mb-2" : undefined}>
                   <SessionWebSearchDock model={controller.state.websearch} onSubmit={controller.onResponseSubmit} />
                 </Grow>
                 <Grow
                   when={current().question}
-                  instant={!questionMotion()}
+                  instant={!settings.general.newQuestionUI() || !questionMotion()}
                   fade
                   card
                   class={controller.child() ? "mb-2" : undefined}

packages/app/src/session/composer/session-composer-region.tsx

@@ -1,5 +1,6 @@
 import { activeQuestionRequest, questionPendingDocument } from "@opencode/session-ui/storybook"
 import { SessionPreview } from "./story-model"
+import { SettingsExperimental } from "@/settings/experimental/experimental"
 
 export default {
   title: "OpenCode/Session/Question switch",
@@ -12,13 +13,25 @@ export default {
     docs: {
       description: {
         component:
-          "A pending question dock with five questions of different heights. Step through them with ← and →, or the Replay buttons under Knobs → Timeline → Question. Its motion is off until Question dock motion is turned on there.",
+          "Compare the original question cards with the New question UI experiment. With the experiment enabled, step through questions with ← and →. Its motion is off until Question dock motion is turned on under Knobs → Timeline → Question.",
       },
     },
   },
 }
 
-// Several questions of different lengths and kinds in a row, to step through with ← and →.
+export const Experiments = {
+  render: () => (
+    <SessionPreview
+      title="Choose a Session layout"
+      description="opencode · question UI experiments"
+      document={questionPendingDocument}
+      request={{ type: "question", value: activeQuestionRequest }}
+      side={<SettingsExperimental />}
+    />
+  ),
+}
+
+// Several questions of different lengths and kinds in a row.
 export const QuestionSeries = {
   render: () => (
     <SessionPreview

packages/app/src/session/question-switch.stories.tsx

@@ -0,0 +1,4 @@
+export const questionCache = new Map<
+  string,
+  { tab: number; answers: string[][]; custom: string[]; customOn: boolean[] }
+>()