Scope supervisor intro to desktop dialog

Author: pallyoung

packages/web/src/features/supervisor/components/objective-dialog.test.tsx

@@ -199,16 +199,19 @@ describe("ObjectiveDialog", () => {
     );
 
     const dialog = screen.getByRole("dialog");
+    const header = dialog.querySelector(".dialog-header");
     const intro = dialog.querySelector(".supervisor-dialog-intro");
     const introIcon = dialog.querySelector(".supervisor-dialog-intro__icon");
     const introCopy = dialog.querySelector(".supervisor-dialog-intro__copy");
     const firstFormGroup = dialog.querySelector(".form-group");
 
+    expect(header).toBeTruthy();
     expect(intro).toBeTruthy();
     expect(introIcon).toBeTruthy();
     expect(introCopy).toBeTruthy();
     expect(intro?.querySelector(".supervisor-dialog-intro__icon")).toBe(introIcon);
     expect(intro?.querySelector(".supervisor-dialog-intro__copy")).toBe(introCopy);
+    expect(header?.contains(intro as Node)).toBe(false);
     expect(firstFormGroup).toBeTruthy();
     expect(intro?.compareDocumentPosition(firstFormGroup as Node)).toBe(
       Node.DOCUMENT_POSITION_FOLLOWING

packages/web/src/features/supervisor/views/shared/objective-dialog-content.test.tsx

@@ -27,7 +27,7 @@ afterEach(() => {
 });
 
 describe("ObjectiveDialogContent", () => {
-  it("renders a flat supervisor intro strip for enable and edit modes", () => {
+  it("does not render the supervisor intro strip by default for enable and edit modes", () => {
     const { rerender } = render(
       <ObjectiveDialogContent
         mode="enable"
@@ -45,6 +45,47 @@ describe("ObjectiveDialogContent", () => {
       />
     );
 
+    expect(document.querySelector(".supervisor-dialog-intro")).toBeNull();
+
+    rerender(
+      <ObjectiveDialogContent
+        mode="edit"
+        draftObjective="Investigate regressions"
+        draftEvaluatorProviderId="claude"
+        draftEvaluatorModel=""
+        draftMaxSupervisionCount="0"
+        draftScheduledAt=""
+        disableObjective=""
+        onDraftObjectiveChange={vi.fn()}
+        onDraftEvaluatorProviderChange={vi.fn()}
+        onDraftEvaluatorModelChange={vi.fn()}
+        onDraftMaxSupervisionCountChange={vi.fn()}
+        onDraftScheduledAtChange={vi.fn()}
+      />
+    );
+
+    expect(document.querySelector(".supervisor-dialog-intro")).toBeNull();
+  });
+
+  it("renders a flat supervisor intro strip when showIntro is true for enable and edit modes", () => {
+    const { rerender } = render(
+      <ObjectiveDialogContent
+        mode="enable"
+        showIntro
+        draftObjective="Investigate regressions"
+        draftEvaluatorProviderId="claude"
+        draftEvaluatorModel=""
+        draftMaxSupervisionCount="0"
+        draftScheduledAt=""
+        disableObjective=""
+        onDraftObjectiveChange={vi.fn()}
+        onDraftEvaluatorProviderChange={vi.fn()}
+        onDraftEvaluatorModelChange={vi.fn()}
+        onDraftMaxSupervisionCountChange={vi.fn()}
+        onDraftScheduledAtChange={vi.fn()}
+      />
+    );
+
     let intro = document.querySelector(".supervisor-dialog-intro");
     let introIcon = document.querySelector(".supervisor-dialog-intro__icon");
     let introCopy = document.querySelector(".supervisor-dialog-intro__copy");
@@ -69,6 +110,7 @@ describe("ObjectiveDialogContent", () => {
     rerender(
       <ObjectiveDialogContent
         mode="edit"
+        showIntro
         draftObjective="Investigate regressions"
         draftEvaluatorProviderId="claude"
         draftEvaluatorModel=""
@@ -300,6 +342,7 @@ describe("ObjectiveDialogContent", () => {
     render(
       <ObjectiveDialogContent
         mode="disable"
+        showIntro
         draftObjective=""
         draftEvaluatorProviderId="codex"
         draftEvaluatorModel=""

packages/web/src/features/supervisor/views/shared/objective-dialog-content.tsx

@@ -22,6 +22,7 @@ const evaluatorOptions: ReadonlyArray<SelectOption<ObjectiveDialogEvaluatorProvi
 
 interface ObjectiveDialogContentProps {
   mode: ObjectiveDialogMode;
+  showIntro?: boolean;
   draftObjective: string;
   draftEvaluatorProviderId: ObjectiveDialogEvaluatorProviderId;
   draftEvaluatorModel: string;
@@ -44,6 +45,7 @@ export function ObjectiveDialogModeIcon({ mode }: { mode: ObjectiveDialogMode })
 
 export function ObjectiveDialogContent({
   mode,
+  showIntro = false,
   draftObjective,
   draftEvaluatorProviderId,
   draftEvaluatorModel,
@@ -92,15 +94,17 @@ export function ObjectiveDialogContent({
 
   return (
     <>
-      <div className="supervisor-dialog-intro">
-        <div className="supervisor-dialog-intro__icon" aria-hidden="true">
-          <ObjectiveDialogModeIcon mode={mode} />
-        </div>
-        <div className="supervisor-dialog-intro__copy">
-          <p className="supervisor-dialog-intro__title">{introTitle}</p>
-          <p className="supervisor-dialog-intro__description">{introDescription}</p>
+      {showIntro ? (
+        <div className="supervisor-dialog-intro">
+          <div className="supervisor-dialog-intro__icon" aria-hidden="true">
+            <ObjectiveDialogModeIcon mode={mode} />
+          </div>
+          <div className="supervisor-dialog-intro__copy">
+            <p className="supervisor-dialog-intro__title">{introTitle}</p>
+            <p className="supervisor-dialog-intro__description">{introDescription}</p>
+          </div>
         </div>
-      </div>
+      ) : null}
 
       <div className="form-group">
         <label htmlFor="objective">{t("supervisor.field.objective")}</label>

packages/web/src/features/supervisor/views/shared/objective-dialog.tsx

@@ -62,6 +62,7 @@ export function ObjectiveDialog({ workspaceId, sessionId }: ObjectiveDialogProps
       <ModalBody>
         <ObjectiveDialogContent
           mode={mode}
+          showIntro
           draftObjective={dialog.draftObjective}
           draftEvaluatorProviderId={dialog.draftEvaluatorProviderId}
           draftEvaluatorModel={dialog.draftEvaluatorModel}