feat(plugins): composer items and controls in all three composers

A plugin registers a component with addComposerItem and reads and changes the
composer through useComposer(): provider, model, mode, thinking, options,
prompt, attachments and agent metadata. The agent, draft and New workspace
composers provide the same ComposerInput and ComposerAgent halves, so a
command reaches the right model without the plugin knowing which composer
it sits in.

Toggle, Select and Action are drawn by one ComposerControl renderer that
the thinking select and provider option controls now use too. Controls sit in
the toolbar when there is room and become rows in the existing overflow sheet
otherwise, so on a phone they appear in the overflow. Plugin items count in
the density presence so the composer condenses to make room. Model and mode
stay specialized but share the trigger, density and overflow.

Draft metadata is kept locally, sent at creation and reset when the prompt is
sent. PluginAgentSnapshot.metadata, deferred from the metadata phase, lands
here. The unused provider badge is removed.

vitest resolves @floating-ui/react-native to its ESM build: the CJS entry
requires the real react-native, whose Flow sources do not parse.

plugin-examples/composer-controls/README.md

@@ -0,0 +1,17 @@
+# Composer controls
+
+Install this directory as a plugin and open the agent, draft, or New workspace composer. Three
+controls appear beside the model and thinking controls.
+
+| Control              | Component | What it does                                                            |
+| -------------------- | --------- | ----------------------------------------------------------------------- |
+| **Context length**   | `Select`  | Saves `composer-controls.contextLength` in the agent's metadata.        |
+| **Needs review**     | `Toggle`  | Sets or clears `composer-controls.needsReview` in the agent's metadata. |
+| **Insert checklist** | `Action`  | Inserts a task list at the cursor through `composer.insertText`.        |
+
+Each component calls `useComposer()` and uses the same commands in every composer. Paseo draws the
+controls inline when the composer has room and as rows in the composer's overflow sheet when it
+does not, including on a phone.
+
+[client/controls.tsx](client/controls.tsx) holds the three components; [index.client.tsx](index.client.tsx)
+registers them with `addComposerItem`.

plugin-examples/composer-controls/client/controls.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from "react";
+import { useComposer } from "@getpaseo/plugin/client";
+import { Action, Select, Toggle } from "@getpaseo/plugin/client/ui";
+
+type ContextLength = "short" | "long";
+
+const CONTEXT_OPTIONS = [
+  { value: "short", label: "Short", description: "Answer from the files you name." },
+  { value: "long", label: "Long", description: "Read the surrounding code first." },
+] as const;
+
+const CONTEXT_KEY = "composer-controls.contextLength";
+const REVIEW_KEY = "composer-controls.needsReview";
+
+/** Reads and writes agent metadata, so the choice is saved with the agent. */
+export function ContextLength() {
+  const composer = useComposer();
+  const value: ContextLength = composer.agent.metadata[CONTEXT_KEY] === "long" ? "long" : "short";
+  const change = useCallback(
+    (next: ContextLength) => composer.setMetadata({ [CONTEXT_KEY]: next }),
+    [composer],
+  );
+  return (
+    <Select
+      title="Context length"
+      icon="Gauge"
+      value={value}
+      options={CONTEXT_OPTIONS}
+      onValueChange={change}
+    />
+  );
+}
+
+export function ReviewFlag() {
+  const composer = useComposer();
+  const change = useCallback(
+    (next: boolean) => composer.setMetadata({ [REVIEW_KEY]: next ? true : null }),
+    [composer],
+  );
+  return (
+    <Toggle
+      title="Needs review"
+      icon="Flag"
+      value={composer.agent.metadata[REVIEW_KEY] === true}
+      onValueChange={change}
+    />
+  );
+}
+
+/** Works the same in the agent, draft and New workspace composers. */
+export function Checklist() {
+  const composer = useComposer();
+  const insert = useCallback(() => composer.insertText("- [ ] Tests\n- [ ] Docs\n"), [composer]);
+  return <Action title="Insert checklist" icon="ListChecks" onPress={insert} />;
+}

plugin-examples/composer-controls/index.client.tsx

@@ -0,0 +1,9 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { Checklist, ContextLength, ReviewFlag } from "./client/controls";
+
+export default function contribute(client: PluginClientContext) {
+  client.addComposerItem({ id: "context-length", Component: ContextLength });
+  client.addComposerItem({ id: "review-flag", Component: ReviewFlag });
+  client.addComposerItem({ id: "checklist", Component: Checklist });
+  return () => {};
+}

plugin-examples/composer-controls/paseo-plugin.json

@@ -0,0 +1,4 @@
+{
+  "id": "composer-controls-example",
+  "requirements": { "paseo": ">=0.8.0" }
+}