feat(app): put the Work explanation under the dialog title

It explains the whole dialog, not the name field it happened to sit above, so
it belongs with the title rather than as the first line of the body.

Uses the component's own DialogTitleGroup instead of placing a paragraph by
hand: that is what the description slot is for, it carries the intended
typography, and it renders a Kobalte Description, so the dialog gains
aria-describedby and screen readers announce the reason with the title.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: quickbeard

packages/app/src/sandbox/dialog-add.tsx

@@ -1,7 +1,14 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { showToast } from "@opencode-ai/ui/toast"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTitleGroup,
+} from "@opencode-ai/ui/v2/dialog-v2"
 import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
 import { LoaderV2 } from "@opencode-ai/ui/v2/loader-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
@@ -199,13 +206,22 @@ export function DialogAddSandbox(props: {
   return (
     <Dialog fit>
       <DialogHeader hideClose={true}>
-        <DialogTitle>{language.t("sandbox.server.add")}</DialogTitle>
+        {/* As a description under the title rather than a line in the body:
+            it explains the whole dialog, not the field it happens to sit
+            above, and DialogTitleGroup ties it to the dialog for screen
+            readers. */}
+        <Show
+          when={props.requiredForWork}
+          fallback={<DialogTitle>{language.t("sandbox.server.add")}</DialogTitle>}
+        >
+          <DialogTitleGroup
+            title={language.t("sandbox.server.add")}
+            description={language.t("sandbox.add.workIntro")}
+          />
+        </Show>
       </DialogHeader>
       <DividerV2 />
       <DialogBody class="flex flex-col gap-3 px-4 pt-3 pb-1">
-        <Show when={props.requiredForWork}>
-          <p class="text-12 text-v2-text-text-muted">{language.t("sandbox.add.workIntro")}</p>
-        </Show>
         <Show
           when={availability()?.supported !== false}
           fallback={<p class="text-14 text-v2-text-text-muted">{unsupportedMessage()}</p>}