feat(ui): Title and Owns are chips in the composer, not an Options panel

Options opened a boxed panel under the prompt: two labelled fields and a
paragraph of help, heavier than the choices it held. Title and Owns are now
chips in the composer bar, next to the agent picker, edited in place: click
one to type, and Enter, Escape, or leaving it turns it back into a chip that
shows what was set ("Title Fix the parser", "Owns 2 paths"). Enter finishes
the field without launching, Escape does not close the New agent dialog, and
focus returns to the prompt.

Owns stays a one-row text area, so a pasted list with one path per line
still parses. The help text is the chip's tooltip and the field's
description. The Options icon had no other use and is gone.

Author: hsusul

src/components/workbench/NewAgentForm.test.tsx

@@ -31,14 +31,14 @@ function chooseAgent(name: "Claude Code" | "Codex") {
   expect(screen.getByRole("menuitem", { name: /^Agent\b/ }).textContent).toContain(name);
 }
 
-/** Title and owned paths sit behind Options; open it on first use. */
+/** Title and owned paths are chips in the composer bar; click one to type in it. */
 function titleField() {
-  if (!screen.queryByLabelText("Title")) fireEvent.click(screen.getByRole("button", { name: "Options" }));
+  if (!screen.queryByLabelText("Title")) fireEvent.click(screen.getByRole("button", { name: /^Title/ }));
   return screen.getByLabelText("Title");
 }
 
 function ownsField() {
-  if (!screen.queryByLabelText("Owns (files or folders)")) fireEvent.click(screen.getByRole("button", { name: "Options" }));
+  if (!screen.queryByLabelText("Owns (files or folders)")) fireEvent.click(screen.getByRole("button", { name: /^Owns/ }));
   return screen.getByLabelText("Owns (files or folders)");
 }
 
@@ -266,4 +266,19 @@ describe("NewAgentForm", () => {
     fireEvent.keyDown(prompt, { key: "Enter" });
     await waitFor(() => expect(createTask).toHaveBeenCalledWith(expect.objectContaining({ prompt: "fix it" })));
   });
+
+  it("edits Title and Owns in place as chips, then shows what was set", () => {
+    renderForm();
+    fireEvent.change(titleField(), { target: { value: "Fix parser" } });
+    // Enter finishes the field without launching, and the prompt gets focus back.
+    fireEvent.keyDown(screen.getByLabelText("Title"), { key: "Enter" });
+    expect(screen.queryByLabelText("Title")).toBeNull();
+    expect(document.activeElement).toBe(screen.getByLabelText("Prompt"));
+    expect(screen.getByRole("button", { name: "Title Fix parser" })).toBeTruthy();
+
+    fireEvent.change(ownsField(), { target: { value: "src/parser/, docs/SCHEMA.md" } });
+    fireEvent.keyDown(screen.getByLabelText("Owns (files or folders)"), { key: "Escape" });
+    expect(screen.getByRole("button", { name: "Owns 2 paths" })).toBeTruthy();
+    expect(createTask).not.toHaveBeenCalled();
+  });
 });

src/components/workbench/NewAgentForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type FormEvent } from "react";
+import { useEffect, useId, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
 
 import {
   createTask,
@@ -9,7 +9,6 @@ import {
   type TaskPermission,
 } from "../../ipc";
 import AgentMenu from "./AgentMenu";
-import { SlidersIcon } from "./icons";
 import { deriveTitle, errorText, parseClaims } from "./state";
 
 type Props = {
@@ -46,7 +45,6 @@ export default function NewAgentForm({
   const [autoHandoff, setAutoHandoff] = useState(true);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [options, setOptions] = useState(false);
   const [split, setSplit] = useState(false);
   const promptRef = useRef<HTMLTextAreaElement>(null);
 
@@ -148,36 +146,6 @@ export default function NewAgentForm({
               }
             }}
           />
-          {options && (
-            <div className="new-agent__options">
-              <label className="new-agent__field">
-                <span>Title</span>
-                <input
-                  className="new-agent__name"
-                  type="text"
-                  aria-label="Title"
-                  placeholder={autoTitle || "From the prompt's first line"}
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                />
-              </label>
-              <label className="new-agent__field">
-                <span>Owns</span>
-                <textarea
-                  rows={1}
-                  className="new-agent__claims"
-                  aria-label="Owns (files or folders)"
-                  placeholder="e.g. src/parser/, docs/SCHEMA.md"
-                  value={claimsText}
-                  onChange={(e) => setClaimsText(e.target.value)}
-                />
-              </label>
-              <p className="new-agent__hint">
-                Other agents are told not to touch owned paths, and a commit that changes another agent&rsquo;s files
-                needs confirmation. End a folder with <span className="mono">/</span>.
-              </p>
-            </div>
-          )}
           {claims.length > 0 && (
             <ul className="claim-chips" aria-label="Owned paths">
               {claims.map((claim) => (
@@ -207,15 +175,26 @@ export default function NewAgentForm({
               onEffortChange={setEffort}
               disabled={disabled}
             />
-            <button
-              type="button"
-              className={`composer__tool${options || claims.length > 0 || title ? " composer__tool--on" : ""}`}
-              aria-expanded={options}
-              onClick={() => setOptions((v) => !v)}
-            >
-              <SlidersIcon />
-              Options
-            </button>
+            <ChipField
+              label="Title"
+              inputLabel="Title"
+              value={title}
+              onChange={setTitle}
+              placeholder={autoTitle || "From the prompt's first line"}
+              hint="Optional. Defaults to the prompt's first line."
+              onDone={() => promptRef.current?.focus()}
+            />
+            <ChipField
+              label="Owns"
+              inputLabel="Owns (files or folders)"
+              value={claimsText}
+              onChange={setClaimsText}
+              placeholder="src/parser/, docs/SCHEMA.md"
+              summary={claims.length === 0 ? "" : claims.length === 1 ? claims[0] : `${claims.length} paths`}
+              multiline
+              hint="Other agents are told not to touch owned paths, and a commit that changes another agent's files needs confirmation. End a folder with /."
+              onDone={() => promptRef.current?.focus()}
+            />
             {allowSplit && (
               <button
                 type="button"
@@ -244,3 +223,86 @@ export default function NewAgentForm({
     </form>
   );
 }
+
+/**
+ * An optional setting as a quiet chip in the composer bar, edited in place:
+ * click to type, and Enter, Escape, or leaving the field turns it back into a
+ * chip that shows the value.
+ */
+function ChipField({
+  label,
+  inputLabel,
+  value,
+  onChange,
+  placeholder,
+  summary,
+  hint,
+  onDone,
+  multiline = false,
+}: {
+  label: string;
+  /** The input's accessible name. */
+  inputLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  /** The value as the chip shows it; defaults to the trimmed value. */
+  summary?: string;
+  /** What the setting does: the chip's tooltip and the input's description. */
+  hint: string;
+  /** Editing ended from the keyboard; the form puts focus back in the prompt. */
+  onDone: () => void;
+  /** Keep pasted lines (a one-row textarea; Shift+Enter adds a line). */
+  multiline?: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const hintId = useId();
+  const fieldProps = {
+    className: "chip-field__input",
+    "aria-label": inputLabel,
+    "aria-describedby": hintId,
+    placeholder,
+    spellCheck: false,
+    value,
+    onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => onChange(e.target.value),
+    onBlur: () => setEditing(false),
+    onKeyDown: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const finish = (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) || e.key === "Escape";
+      if (!finish) return;
+      // Done with the field, not the form: Enter does not launch, Escape does not close a dialog.
+      e.preventDefault();
+      e.stopPropagation();
+      setEditing(false);
+      onDone();
+    },
+  };
+  if (editing) {
+    return (
+      <span className="chip-field">
+        <span className="chip-field__label" aria-hidden="true">
+          {label}
+        </span>
+        {multiline ? (
+          <textarea autoFocus rows={1} {...fieldProps} />
+        ) : (
+          <input autoFocus type="text" {...fieldProps} />
+        )}
+        <span id={hintId} className="visually-hidden">
+          {hint}
+        </span>
+      </span>
+    );
+  }
+  const shown = summary ?? value.trim();
+  return (
+    <button
+      type="button"
+      className={`composer__tool${shown ? " composer__tool--on" : ""}`}
+      title={hint}
+      onClick={() => setEditing(true)}
+    >
+      {label}
+      {shown && <span className="chip-field__value">{shown}</span>}
+    </button>
+  );
+}

src/components/workbench/icons.tsx

@@ -64,15 +64,6 @@ export const ToolIcon = () => (
   </Icon>
 );
 
-/** Options: two sliders. */
-export const SlidersIcon = () => (
-  <Icon size={14}>
-    <path d="M2.75 5h6.5M12.25 5h1M2.75 11h1M6.75 11h6.5" />
-    <circle cx="10.75" cy="5" r="1.5" />
-    <circle cx="5.25" cy="11" r="1.5" />
-  </Icon>
-);
-
 /** More actions: three dots. */
 export const MoreIcon = () => (
   <Icon>

src/styles.css

@@ -2149,57 +2149,60 @@ body.is-resizing-horizontal .sash--horizontal::before {
   color: rgba(17, 17, 19, 0.55);
 }
 
-.new-agent__options {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px 12px;
-  margin: 4px 0 6px;
-  padding: 10px 0 0;
-  border-top: 1px solid var(--line);
+/* Title and Owns: quiet chips in the composer bar that edit in place. */
+.chip-field {
+  display: inline-flex;
+  flex: 1 1 200px;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 340px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--r);
+  background: var(--bg-app);
 }
 
-.new-agent__field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
+.chip-field:focus-within {
+  border-color: var(--line-focus);
 }
 
-.new-agent__field > span {
+.chip-field__label {
+  flex: none;
   color: var(--text-3);
-  font-size: var(--text-xs);
-  font-weight: 500;
+  font-size: var(--text-sm);
 }
 
-.new-agent__name,
-textarea.new-agent__claims {
-  width: 100%;
-  height: 30px;
-  padding: 5px 8px;
-  border: 1px solid var(--line-strong);
-  border-radius: var(--r);
-  background: var(--bg-app);
+.chip-field__input {
+  flex: 1;
+  min-width: 0;
+  height: 22px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
   color: var(--text-1);
   font-size: var(--text-sm);
+  line-height: 22px;
+  white-space: nowrap;
   resize: none;
 }
 
-.new-agent__name:focus,
-textarea.new-agent__claims:focus {
+.chip-field__input:focus {
   outline: none;
-  border-color: var(--accent);
 }
 
-.new-agent__name::placeholder,
-textarea.new-agent__claims::placeholder {
+.chip-field__input::placeholder {
   color: var(--text-3);
 }
 
-.new-agent__hint {
-  grid-column: 1 / -1;
-  margin: 0;
-  color: var(--text-3);
-  font-size: var(--text-xs);
+.chip-field__value {
+  max-width: 160px;
+  overflow: hidden;
+  color: var(--text-1);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .new-agent .claim-chips {