fix(ui): project dialog improvements, onboarding cleanup, scroll-area fix

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/OnboardingWizard.tsx

@@ -19,6 +19,7 @@ import { cn } from "../lib/utils";
 import { getUIAdapter } from "../adapters";
 import { defaultCreateValues } from "./agent-config-defaults";
 import { AsciiArtAnimation } from "./AsciiArtAnimation";
+import { ChoosePathButton } from "./PathInstructionsModal";
 import {
   Building2,
   Bot,
@@ -63,7 +64,6 @@ export function OnboardingWizard() {
   const [command, setCommand] = useState("");
   const [args, setArgs] = useState("");
   const [url, setUrl] = useState("");
-  const [cwdPickerNotice, setCwdPickerNotice] = useState<string | null>(null);
 
   // Step 3
   const [taskTitle, setTaskTitle] = useState("Create your CEO HEARTBEAT.md");
@@ -94,7 +94,6 @@ export function OnboardingWizard() {
     setCommand("");
     setArgs("");
     setUrl("");
-    setCwdPickerNotice(null);
     setTaskTitle("Create your CEO HEARTBEAT.md");
     setTaskDescription("You're the CEO of the company, make sure you have a file agents/ceo/HEARTBEAT.md that tells you your core loop. You MUST use the Paperclip SKILL.");
     setCreatedCompanyId(null);
@@ -415,44 +414,8 @@ export function OnboardingWizard() {
                             value={cwd}
                             onChange={(e) => setCwd(e.target.value)}
                           />
-                          <button
-                            type="button"
-                            className="inline-flex items-center rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent/50 transition-colors shrink-0"
-                            onClick={async () => {
-                              try {
-                                setCwdPickerNotice(null);
-                                // @ts-expect-error -- showDirectoryPicker is not in all TS lib defs yet
-                                const handle = await window.showDirectoryPicker({ mode: "read" });
-                                const pickedPath =
-                                  typeof handle === "object" &&
-                                  handle !== null &&
-                                  typeof (handle as { path?: unknown }).path === "string"
-                                    ? String((handle as { path: string }).path)
-                                    : "";
-                                if (pickedPath) {
-                                  setCwd(pickedPath);
-                                  return;
-                                }
-                                const selectedName =
-                                  typeof handle === "object" &&
-                                  handle !== null &&
-                                  typeof (handle as { name?: unknown }).name === "string"
-                                    ? String((handle as { name: string }).name)
-                                    : "selected folder";
-                                setCwdPickerNotice(
-                                  `Directory picker only exposed "${selectedName}". Paste the absolute path manually.`,
-                                );
-                              } catch {
-                                // user cancelled or API unsupported
-                              }
-                            }}
-                          >
-                            Choose
-                          </button>
+                          <ChoosePathButton />
                         </div>
-                        {cwdPickerNotice && (
-                          <p className="mt-1 text-xs text-amber-400">{cwdPickerNotice}</p>
-                        )}
                       </div>
                       <div>
                         <label className="text-xs text-muted-foreground mb-1 block">