Refine supervisor dialog structure and compact controls

Author: pallyoung

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

@@ -179,6 +179,28 @@ describe("ObjectiveDialog", () => {
     expect(screen.getByRole("textbox", { name: "Objective" })).toHaveClass("input", "textarea");
   });
 
+  it("renders the intro strip in the desktop wrapper for enable mode", () => {
+    const store = createStore();
+    window.localStorage.setItem("ui.locale", JSON.stringify("en"));
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, { sendCommand: vi.fn() } as never);
+    store.set(
+      supervisorDialogAtom,
+      createDialogState({
+        draftObjective: "Ship phase 4B1",
+      })
+    );
+    store.set(supervisorsAtom, new Map());
+
+    render(
+      <Provider store={store}>
+        <ObjectiveDialog workspaceId="ws-1" />
+      </Provider>
+    );
+
+    expect(document.querySelector(".supervisor-dialog-intro")).toBeTruthy();
+  });
+
   it("renders disable confirmation mode", () => {
     const store = createStore();
     window.localStorage.setItem("ui.locale", JSON.stringify("en"));
@@ -201,6 +223,7 @@ describe("ObjectiveDialog", () => {
     expect(screen.getByText("Disabling stops evaluation cycles")).toBeInTheDocument();
     expect(screen.getByText("Finish the server refactor")).toBeInTheDocument();
     expect(screen.getByRole("dialog")).toHaveClass("supervisor-dialog--disable");
+    expect(document.querySelector(".supervisor-dialog-intro")).toBeNull();
   });
 
   it("renders the dialog header through the canonical dialog header anatomy", () => {

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

@@ -27,8 +27,35 @@ afterEach(() => {
 });
 
 describe("ObjectiveDialogContent", () => {
-  it("renders shared textarea and desktop select trigger primitives with helper text wiring", () => {
-    render(
+  it("renders a flat supervisor intro strip for enable and edit modes", () => {
+    const { rerender } = render(
+      <ObjectiveDialogContent
+        mode="enable"
+        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");
+    expect(intro).toBeTruthy();
+    expect(intro?.querySelector('[data-icon-semantic="supervisor.mode.enable"]')).toBeTruthy();
+    expect(intro?.querySelector(".supervisor-dialog-intro__title")).toHaveTextContent(
+      "supervisor.dialog.enable.title"
+    );
+    expect(intro?.querySelector(".supervisor-dialog-intro__description")).toHaveTextContent(
+      "supervisor.dialog.enable.subtitle"
+    );
+
+    rerender(
       <ObjectiveDialogContent
         mode="edit"
         draftObjective="Investigate regressions"
@@ -45,8 +72,38 @@ describe("ObjectiveDialogContent", () => {
       />
     );
 
+    intro = document.querySelector(".supervisor-dialog-intro");
+    expect(intro).toBeTruthy();
+    expect(intro?.querySelector('[data-icon-semantic="supervisor.mode.edit"]')).toBeTruthy();
+    expect(intro?.querySelector(".supervisor-dialog-intro__title")).toHaveTextContent(
+      "supervisor.dialog.edit.title"
+    );
+    expect(intro?.querySelector(".supervisor-dialog-intro__description")).toHaveTextContent(
+      "supervisor.dialog.edit.subtitle"
+    );
+  });
+
+  it("renders compact control classes instead of large form controls", () => {
+    render(
+      <ObjectiveDialogContent
+        mode="edit"
+        draftObjective="Investigate regressions"
+        draftEvaluatorProviderId="claude"
+        draftEvaluatorModel="sonnet"
+        draftMaxSupervisionCount="3"
+        draftScheduledAt=""
+        disableObjective=""
+        onDraftObjectiveChange={vi.fn()}
+        onDraftEvaluatorProviderChange={vi.fn()}
+        onDraftEvaluatorModelChange={vi.fn()}
+        onDraftMaxSupervisionCountChange={vi.fn()}
+        onDraftScheduledAtChange={vi.fn()}
+      />
+    );
+
     const textarea = screen.getByLabelText("supervisor.field.objective");
-    expect(textarea).toHaveClass("input", "textarea", "textarea-lg");
+    expect(textarea).toHaveClass("input", "textarea");
+    expect(textarea).not.toHaveClass("textarea-lg");
     expect(textarea).toHaveAttribute("rows", "5");
     expect(textarea).toHaveValue("Investigate regressions");
     expect(textarea).toHaveAttribute("aria-describedby");
@@ -58,12 +115,25 @@ describe("ObjectiveDialogContent", () => {
     const trigger = screen.getByRole("button", {
       name: "supervisor.field.evaluator Claude",
     });
-    expect(trigger).toHaveClass("input", "mobile-select-trigger");
+    expect(trigger).toHaveClass("input", "mobile-select-trigger", "input-sm");
     expect(trigger).toHaveAttribute("aria-describedby");
     expect(screen.getByText("supervisor.field.evaluator_helper")).toHaveAttribute(
       "id",
       trigger.getAttribute("aria-describedby")
     );
+
+    expect(screen.getByLabelText("supervisor.field.evaluator_model")).toHaveClass(
+      "input",
+      "input-sm"
+    );
+    expect(screen.getByLabelText("supervisor.field.max_supervision_count")).toHaveClass(
+      "input",
+      "input-sm"
+    );
+    expect(screen.getByRole("button", { name: "supervisor.field.scheduled_at" })).toHaveClass(
+      "input",
+      "input-sm"
+    );
   });
 
   it("keeps objective editing behavior unchanged", () => {
@@ -222,6 +292,7 @@ describe("ObjectiveDialogContent", () => {
       />
     );
 
+    expect(document.querySelector(".supervisor-dialog-intro")).toBeNull();
     expect(
       screen.getByRole("alert").querySelector('[data-icon-semantic="state.warning"]')
     ).toBeTruthy();

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

@@ -64,6 +64,8 @@ export function ObjectiveDialogContent({
   const evaluatorModelHelperId = useId();
   const maxSupervisionCountHelperId = useId();
   const scheduledAtHelperId = useId();
+  const introTitle = t(`supervisor.dialog.${mode}.title`);
+  const introDescription = t(`supervisor.dialog.${mode}.subtitle`);
 
   if (mode === "disable") {
     return (
@@ -90,11 +92,20 @@ 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>
+        </div>
+      </div>
+
       <div className="form-group">
         <label htmlFor="objective">{t("supervisor.field.objective")}</label>
         <Textarea
           id="objective"
-          size="lg"
           rows={5}
           value={draftObjective}
           onChange={(event) => onDraftObjectiveChange(event.target.value)}
@@ -113,6 +124,7 @@ export function ObjectiveDialogContent({
         </label>
         <Select
           id="evaluator-provider"
+          size="sm"
           desktopMode="listbox"
           mobileSheetTitle={t("supervisor.field.evaluator")}
           mobileSheetPresentation="inline"
@@ -131,7 +143,7 @@ export function ObjectiveDialogContent({
         <label htmlFor="evaluator-model">{t("supervisor.field.evaluator_model")}</label>
         <Input
           id="evaluator-model"
-          size="lg"
+          size="sm"
           value={draftEvaluatorModel}
           onChange={(event) => onDraftEvaluatorModelChange(event.target.value)}
           aria-describedby={evaluatorModelHelperId}
@@ -146,7 +158,7 @@ export function ObjectiveDialogContent({
         <label htmlFor="max-supervision-count">{t("supervisor.field.max_supervision_count")}</label>
         <Input
           id="max-supervision-count"
-          size="lg"
+          size="sm"
           type="number"
           min={0}
           step={1}
@@ -165,6 +177,7 @@ export function ObjectiveDialogContent({
         <label htmlFor="scheduled-at">{t("supervisor.field.scheduled_at")}</label>
         <DateTimePicker
           label={t("supervisor.field.scheduled_at")}
+          size="sm"
           value={draftScheduledAt}
           onValueChange={onDraftScheduledAtChange}
           placeholder={t("supervisor.field.scheduled_at_placeholder")}