@lotics/ui 11.8.8 → 11.8.10

package/docs/ai_patterns.md

@@ -74,6 +74,22 @@ review; the human presses Send. The canvas template
 ([`tpl_dieline`](../examples/tpl_dieline.tsx)) uses it this way; while running the host swaps
 `Composer` for `AgentProgress` (same pill geometry, so it reads as a morph).
 
+## The trigger — a paid action is pressed exactly once
+
+A CTA that starts an agent run (or any paid/mutating action) must make the PRESS itself the
+transition — never leave a live button waiting on a network round-trip:
+
+- **Same-tick feedback.** On press, synchronously close the dialog / swap to the run surface
+  (`AgentRun` with its streaming state) so there is nothing left to click. A button that stays
+  pressable while an attach/start request round-trips invites double-fires — observed in
+  production as stacked paid runs.
+- **Single-flight in app code too.** Guard the handler with a ref (state alone races the
+  re-render): first press wins, later presses no-op until the flow settles.
+- **The SDK backstops runs, not workflows.** `useAgentRun().run()` is single-flight by default
+  (a duplicate call joins the in-flight run; `replace: true` is the deliberate restart) — but
+  `useWorkflow` calls are NOT deduped (rapid distinct calls are legitimate), so a workflow CTA
+  must disable itself (`loading`) while pending or a double-click writes twice.
+
 ## Show the work — `AgentRun`
 
 `AgentRun` (`@lotics/ui/agent_run`) is a live feed of the agent's work as a TIMELINE. The prop is

package/docs/catalog.md

@@ -360,7 +360,7 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   useSeparator` inserts and what menus/popovers put between option groups.
 - **`container`** — `Container`: centers content at a max width (`ContainerSize` sm|md|lg,
   `CONTAINER_SIZES`).
-- **`page_header`** — `PageHeader`: the page's title band.
+- **`page_header`** — `PageHeader`: the page's title band; `actions` puts page-level CTAs on the title row (right-aligned), while `left`/`right` form a separate nav row above.
 - **`page_content`** — `PageContent` + `PAGE_SIZES`: the page's padded, width-capped content
   region.
 - **`accordion`** — `Accordion` + `AccordionHeader`/`AccordionTitle`/`AccordionMeta`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.8.8",
+  "version": "11.8.10",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/page_header.tsx

@@ -7,13 +7,29 @@ interface PageHeaderProps {
   description?: string | null;
   left?: ReactNode;
   right?: ReactNode;
+  /** Page-level actions (CTAs), rendered on the title row, right-aligned —
+   *  distinct from `left`/`right`, which form a separate nav row above. */
+  actions?: ReactNode;
 }
 
 export function PageHeader(props: PageHeaderProps) {
-  const { title, description, left, right } = props;
+  const { title, description, left, right, actions } = props;
 
   const hasNav = !!left || !!right;
 
+  const titleRow = actions ? (
+    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
+      <Text size="xxl" weight="semibold">
+        {title}
+      </Text>
+      {actions}
+    </View>
+  ) : (
+    <Text size="xxl" weight="semibold">
+      {title}
+    </Text>
+  );
+
   return (
     <View style={{ paddingBottom: 16 }}>
       {hasNav ? (
@@ -22,14 +38,10 @@ export function PageHeader(props: PageHeaderProps) {
             {left}
             {right}
           </View>
-          <Text size="xxl" weight="semibold">
-            {title}
-          </Text>
+          {titleRow}
         </>
       ) : (
-        <Text size="xxl" weight="semibold">
-          {title}
-        </Text>
+        titleRow
       )}
       {!!description && (
         <Text color="zinc-500">{description}</Text>