#Task Composer

Task Composer turns an instruction, file context, source selections, skills, run settings, and follow-up messages into one recoverable submission. The primary input is always backed by TipTap. A plain textarea cannot reliably support Markdown, structured triggers, composition input, selection, and controlled drafts, so it is not part of the production contract.

npm install @a3s-lab/ui@0.4.1 @tiptap/core @tiptap/extension-placeholder \
  @tiptap/markdown @tiptap/pm @tiptap/starter-kit

<form class="agent-composer" aria-label="Task composer" data-state="ready">
<section class="agent-composer-editor" data-composer-editor>
  <div data-composer-input role="textbox" aria-label="Task instruction" aria-multiline="true"></div>
</section>
<ul data-composer-resources aria-label="Attached resources">
  <li data-kind="file" data-value="DESIGN.md"><span>DESIGN.md</span><button type="button" aria-label="Remove DESIGN.md">Remove</button></li>
</ul>
<footer>
  <div data-composer-tools><button type="button" data-composer-setting="model">A3S Pro</button><button type="button" data-composer-setting="effort">High effort</button></div>
  <div data-composer-actions><button type="submit">Send</button></div>
</footer>
</form>
<script type="module">
import { Editor } from "@tiptap/core";
import Placeholder from "@tiptap/extension-placeholder";
import { Markdown } from "@tiptap/markdown";
import StarterKit from "@tiptap/starter-kit";
import "@a3s-lab/ui";
import "@a3s-lab/ui/agent-composer";

const form = document.querySelector(".agent-composer");
const editor = new Editor({
element: form.querySelector("[data-composer-input]"),
extensions: [
  StarterKit.configure({ heading: false, codeBlock: false }),
  Placeholder.configure({ placeholder: "Describe the task; use @, $, or /…" }),
  Markdown,
],
contentType: "markdown",
content: "Review the permission boundary.",
editorProps: {
  attributes: {
    role: "textbox",
    "aria-label": "Task instruction",
    "aria-multiline": "true",
    "data-composer-input": "",
  },
  handleKeyDown: (_view, event) => {
    if (event.key !== "Enter" || event.shiftKey || event.isComposing) return false;
    event.preventDefault();
    form.requestSubmit();
    return true;
  },
},
});

form.addEventListener("submit", event => {
event.preventDefault();
submitTask({ markdown: editor.getMarkdown() });
});
</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Product boundary

The composer answers four questions: what should happen, which resources may be used, which run settings apply, and whether the instruction sends now or joins the queue. Uploads, model transport, authorization, and persistence remain host responsibilities.

• Enter submits and Shift + Enter inserts a line break. Never intercept Enter during IME composition.
• @ opens the workspace tree, $ opens skills, and / opens built-in commands. Suggestions use a listbox or tree while focus remains in the editor through aria-activedescendant.
• Files and directories can arrive through a picker or drag and drop. Every resource keeps a stable identifier, visible type, and remove action.
• Running states distinguish send, queue, stop, and unavailable actions with text, not an icon swap alone.
• Failed submissions preserve Markdown, selection, resources, settings, and focus, then name a concrete recovery action.

When the editor also needs a drop hint, validation message, or other host-owned content, wrap the input with data-composer-editor. Intermediate wrappers stay shrinkable, and long unbroken text scrolls inside the input instead of widening the workbench:

<form class="agent-composer" aria-label="Message the coding agent">
  <section class="agent-composer-editor" data-composer-editor>
    <p data-composer-editor-message role="status">Drop a workspace file here</p>
    <div>
      <textarea
        data-composer-input
        name="prompt"
        aria-label="Instruction"
        placeholder="Describe the task to complete…"
      ></textarea>
    </div>
  </section>
</form>

#Public structure

Root states are ready, submitting, streaming, queued, stopping, offline, error, and disabled. Individual controls continue to use native disabled.

#Controller

Important events include a3s:composer-before-submit, a3s:composer-submit, a3s:composer-draft-change, a3s:composer-trigger-change, a3s:composer-before-action, a3s:composer-action, and a3s:composer-queue-action.

#Release acceptance

Validate IME composition, undo and redo, long Markdown, empty drafts, focus restoration, keyboard suggestions, directory drops, resource deduplication, repeated stop attempts, offline recovery, queue editing, and 320px layouts. A test that proves only typing and submission is not enough for a production task workspace.