@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/actions/ActionsBlock.svelte

@@ -0,0 +1,557 @@
+<script lang="ts">
+  /**
+   * actions block — buttons and small forms that send a REQUEST to the
+   * owning agent (mos-p9auh, living artifacts phase 4).
+   *
+   * A press goes to the HOST's actions service (`ctx.services.actions`,
+   * requests.ts ActionsService — MOS: POST /api/v1/artifacts/[id]/actions,
+   * one artifact_events row of kind 'action'). The agent sees it, acts and
+   * acks; this block polls the request list while anything is open and
+   * walks the button through Queued → Running → Done ✓ / Failed with the
+   * agent's note. The renderer never runs the action itself.
+   *
+   * Live only where the viewer can act (ctx.saveState present, not
+   * readonly) AND the host wired the service. Elsewhere — a share link,
+   * print, previews, a host with no actions leg — the actions render as a
+   * quiet list with no controls and a line saying why.
+   *
+   * Link actions (`href`, PARAMS-SPEC §2) are plain `<a>`s: they navigate,
+   * fire no event and need no service or role, so they work everywhere.
+   */
+  import BlockIcon from "../../review/BlockIcon.svelte"
+  import { onDestroy, onMount } from "svelte"
+  import type { BlockProps } from "../../types.js"
+  import {
+    intentOf,
+    isLinkAction,
+    isOffOrigin,
+    isTerminal,
+    validateActionRequest,
+    type ActionDef,
+    type ActionsParams,
+    type AckStatus,
+  } from "./schema.js"
+  import {
+    actionsServiceOf,
+    latestByAction,
+    type ActionRequestView,
+  } from "./requests.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<ActionsParams> = $props()
+
+  /** Poll cadence while a request is open (queued/running). */
+  const POLL_MS = 4000
+
+  const service = $derived(actionsServiceOf(ctx?.services))
+  /** The viewer could act here, but the host wired no actions service. */
+  const unwired = $derived(
+    Boolean(ctx?.saveState) && !ctx?.readonly && service === null,
+  )
+  const live = $derived(
+    Boolean(ctx?.saveState) && !ctx?.readonly && service !== null,
+  )
+  const origin = typeof location !== "undefined" ? location.origin : undefined
+  const requestActions = $derived(
+    (params?.actions ?? []).filter((a) => !isLinkAction(a)),
+  )
+  const actions = $derived(params?.actions ?? [])
+
+  let requests = $state<ActionRequestView[]>([])
+  let allowed = $state<Record<string, boolean> | null>(null)
+  let loadError = $state<string | null>(null)
+  /** actionId → in-flight POST */
+  let sending = $state<Record<string, boolean>>({})
+  /** actionId → last send/validation error */
+  let sendError = $state<Record<string, string>>({})
+  /** actionId → the danger confirm panel is open */
+  let confirming = $state<Record<string, boolean>>({})
+  /** actionId → typed reason (danger) */
+  let reasons = $state<Record<string, string>>({})
+  /** actionId → fieldId → raw form value */
+  let values = $state<Record<string, Record<string, string>>>({})
+
+  // Seed form values from field defaults once per action id.
+  $effect.pre(() => {
+    for (const a of requestActions) {
+      if (values[a.id]) continue
+      const seeded: Record<string, string> = {}
+      for (const f of a.fields) {
+        if (f.default !== undefined) seeded[f.id] = String(f.default)
+        else if (f.type === "select" && f.required)
+          seeded[f.id] = f.options[0]?.value ?? ""
+        else seeded[f.id] = ""
+      }
+      values[a.id] = seeded
+    }
+  })
+
+  const latest = $derived(latestByAction(requests))
+  const anyOpen = $derived(requests.some((r) => !isTerminal(r.status)))
+
+  let timer: ReturnType<typeof setTimeout> | null = null
+  let destroyed = false
+
+  async function refresh() {
+    if (!live || !service || !ctx?.artifactId) return
+    try {
+      const out = await service.load({
+        artifactId: ctx.artifactId,
+        blockId: ctx.blockId,
+      })
+      requests = out.requests
+      allowed = out.allowed
+      loadError = null
+    } catch (e) {
+      loadError =
+        e instanceof Error ? e.message : "Could not load request status"
+    }
+  }
+
+  function schedule() {
+    if (timer) clearTimeout(timer)
+    timer = null
+    if (destroyed || !live || !anyOpen) return
+    timer = setTimeout(async () => {
+      if (typeof document !== "undefined" && document.hidden) {
+        schedule()
+        return
+      }
+      await refresh()
+      schedule()
+    }, POLL_MS)
+  }
+
+  onMount(() => {
+    if (!live) return
+    void refresh().then(schedule)
+  })
+  onDestroy(() => {
+    destroyed = true
+    if (timer) clearTimeout(timer)
+  })
+
+  function mayAct(a: ActionDef): boolean {
+    if (!live) return false
+    // Until the first read answers, assume yes; the server re-checks anyway.
+    return allowed === null ? true : allowed[a.id] === true
+  }
+
+  async function send(a: ActionDef) {
+    if (!ctx?.artifactId || !service || sending[a.id]) return
+    const check = validateActionRequest(
+      a,
+      values[a.id] ?? {},
+      reasons[a.id] ?? "",
+    )
+    if (!check.ok) {
+      sendError[a.id] = check.error
+      return
+    }
+    sending[a.id] = true
+    sendError[a.id] = ""
+    try {
+      const req = await service.send({
+        artifactId: ctx.artifactId,
+        blockId: ctx.blockId,
+        actionId: a.id,
+        inputs: check.inputs,
+        reason: check.reason,
+      })
+      requests = [...requests.filter((r) => r.id !== req.id), req]
+      confirming[a.id] = false
+      reasons[a.id] = ""
+      schedule()
+    } catch (e) {
+      // Already open: show the existing request instead of a second one.
+      // Duck-typed (any error carrying `request`), so a host need not import
+      // ActionRequestError to say so.
+      const existing = (e as { request?: ActionRequestView | null } | null)
+        ?.request
+      if (existing && typeof existing === "object" && existing.id) {
+        requests = [...requests.filter((r) => r.id !== existing.id), existing]
+        schedule()
+      }
+      sendError[a.id] = e instanceof Error ? e.message : "Request failed"
+    } finally {
+      sending[a.id] = false
+    }
+  }
+
+  /** The danger confirm needs the reason first; the button opens it. */
+  function primaryClick(a: ActionDef) {
+    if (a.variant === "danger" && !confirming[a.id]) {
+      const check = validateActionRequest(a, values[a.id] ?? {}, null, {
+        fieldsOnly: true,
+      })
+      if (!check.ok) {
+        sendError[a.id] = check.error
+        return
+      }
+      sendError[a.id] = ""
+      confirming[a.id] = true
+      return
+    }
+    void send(a)
+  }
+
+  const STATUS: Record<
+    AckStatus,
+    { label: string; cls: string; icon: "clock" | "spin" | "check" | "x" }
+  > = {
+    queued: {
+      label: "Queued",
+      cls: "border-base-content/20 bg-base-200 text-base-content/80",
+      icon: "clock",
+    },
+    running: {
+      label: "Running",
+      cls: "border-info/40 bg-info/10 text-base-content",
+      icon: "spin",
+    },
+    done: {
+      label: "Done",
+      cls: "border-success/40 bg-success/10 text-base-content",
+      icon: "check",
+    },
+    failed: {
+      label: "Failed",
+      cls: "border-error/40 bg-error/10 text-base-content",
+      icon: "x",
+    },
+  }
+
+  const whenFmt = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  })
+  function when(iso: string | null | undefined): string {
+    if (!iso) return ""
+    const d = new Date(iso)
+    return Number.isFinite(d.getTime()) ? whenFmt.format(d) : ""
+  }
+
+  function buttonClass(a: ActionDef): string {
+    if (a.variant === "danger") return "btn btn-sm btn-error"
+    if (a.variant === "primary") return "btn btn-sm btn-primary"
+    return "btn btn-sm btn-outline"
+  }
+
+  const inputCls =
+    "input input-sm w-full rounded-field border-base-content/20 bg-base-100"
+</script>
+
+<section
+  class="rounded-box border border-base-content/10 bg-base-100 p-4 sm:p-5"
+  data-block="actions"
+  aria-label={params?.title ?? "Actions"}
+>
+  {#if params?.title}
+    <div class="flex items-center gap-2">
+      <h3 class="min-w-0 text-base font-semibold text-base-content">
+        {params.title}
+      </h3>
+      <SectionTools {ctx} inline />
+    </div>
+  {/if}
+  {#if params?.description}
+    <p class="mt-1 text-sm whitespace-pre-line text-base-content/70">
+      {params.description}
+    </p>
+  {/if}
+
+  {#if !live && requestActions.length > 0}
+    <p class="mt-2 text-xs text-base-content/60" data-testid="actions-readonly">
+      {unwired
+        ? "Requests can't be sent from this view."
+        : "Requests can be sent by signed-in workspace members."}
+    </p>
+  {:else if loadError}
+    <p class="mt-2 text-xs text-error" role="status">{loadError}</p>
+  {/if}
+
+  <ul class="mt-3 flex flex-col gap-3">
+    {#each actions as a (a.id)}
+      {#if isLinkAction(a)}
+        {@const external = isOffOrigin(a.href, origin)}
+        <li
+          class="rounded-field border border-base-content/10 p-3"
+          data-action={a.id}
+          data-link-action
+        >
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-base-content">{a.label}</p>
+              {#if a.description}
+                <p class="mt-0.5 text-xs text-base-content/70">
+                  {a.description}
+                </p>
+              {/if}
+            </div>
+            <a
+              class={buttonClass(a)}
+              href={a.href}
+              target={external ? "_blank" : undefined}
+              rel={external ? "noopener noreferrer" : undefined}
+            >
+              {a.label}
+              {#if external}
+                <BlockIcon name="external-link" size={14} />
+                <span class="sr-only"> (opens in a new tab)</span>
+              {/if}
+            </a>
+          </div>
+        </li>
+      {:else}
+      {@const req = latest.get(a.id)}
+      {@const open = req ? !isTerminal(req.status) : false}
+      {@const permitted = mayAct(a)}
+      {@const st = req ? STATUS[req.status] : null}
+      <li
+        class="rounded-field border border-base-content/10 p-3"
+        data-action={a.id}
+        data-status={req?.status ?? "idle"}
+      >
+        <form
+          class="flex flex-col gap-2"
+          onsubmit={(e) => {
+            e.preventDefault()
+            primaryClick(a)
+          }}
+        >
+          <div class="flex flex-wrap items-start justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-base-content">{a.label}</p>
+              {#if a.description}
+                <p class="mt-0.5 text-xs text-base-content/70">
+                  {a.description}
+                </p>
+              {/if}
+              <p class="mt-0.5 font-mono text-2xs text-base-content/50">
+                {intentOf(a)}
+              </p>
+            </div>
+            {#if st && req}
+              <span
+                class="inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium {st.cls}"
+                data-testid="action-status"
+              >
+                {#if st.icon === "clock"}
+                  <BlockIcon name="clock" size={12} aria-hidden="true" />
+                {:else if st.icon === "spin"}
+                  <BlockIcon name="loader-circle"
+                    size={12}
+                    class="motion-safe:animate-spin"
+                    aria-hidden="true"
+                  />
+                {:else if st.icon === "check"}
+                  <BlockIcon name="check" size={12} class="text-success" aria-hidden="true" />
+                {:else}
+                  <BlockIcon name="circle-alert"
+                    size={12}
+                    class="text-error"
+                    aria-hidden="true"
+                  />
+                {/if}
+                {st.label}{req.status === "done" ? " ✓" : ""}
+              </span>
+            {/if}
+          </div>
+
+          {#if a.fields.length > 0}
+            <div class="grid gap-2 sm:grid-cols-2">
+              {#each a.fields as f (f.id)}
+                {@const fid = `act-${ctx?.blockId}-${a.id}-${f.id}`}
+                <label
+                  class="flex min-w-0 flex-col gap-1 text-xs text-base-content/75 {f.type ===
+                    'text' && f.multiline
+                    ? 'sm:col-span-2'
+                    : ''}"
+                  for={fid}
+                >
+                  <span
+                    >{f.label}{#if f.required}<span
+                        class="text-error"
+                        aria-hidden="true">{" *"}</span
+                      >{/if}</span
+                  >
+                  {#if !values[a.id]}
+                    <!-- seeded on the next tick -->
+                  {:else if f.type === "select"}
+                    <div
+                      class="select select-sm w-full rounded-field border-base-content/20"
+                    >
+                      <select
+                        id={fid}
+                        bind:value={values[a.id][f.id]}
+                        disabled={!permitted || open}
+                        required={f.required}
+                      >
+                        {#if !f.required}<option value="">—</option>{/if}
+                        {#each f.options as o (o.value)}
+                          <option value={o.value}>{o.label}</option>
+                        {/each}
+                      </select>
+                    </div>
+                  {:else if f.type === "number"}
+                    <input
+                      id={fid}
+                      type="number"
+                      class={inputCls}
+                      bind:value={values[a.id][f.id]}
+                      min={f.min}
+                      max={f.max}
+                      step={f.step ?? "any"}
+                      disabled={!permitted || open}
+                      required={f.required}
+                    />
+                  {:else if f.multiline}
+                    <textarea
+                      id={fid}
+                      class="textarea textarea-sm w-full rounded-field border-base-content/20"
+                      rows="2"
+                      bind:value={values[a.id][f.id]}
+                      maxlength={f.maxLength}
+                      placeholder={f.placeholder}
+                      disabled={!permitted || open}
+                      required={f.required}
+                    ></textarea>
+                  {:else}
+                    <input
+                      id={fid}
+                      type="text"
+                      class={inputCls}
+                      bind:value={values[a.id][f.id]}
+                      maxlength={f.maxLength}
+                      placeholder={f.placeholder}
+                      disabled={!permitted || open}
+                      required={f.required}
+                    />
+                  {/if}
+                </label>
+              {/each}
+            </div>
+          {/if}
+
+          {#if confirming[a.id]}
+            <div
+              class="flex flex-col gap-2 rounded-field border border-error/40 bg-error/10 p-3"
+              data-testid="action-confirm"
+            >
+              <p class="flex items-start gap-2 text-sm text-base-content">
+                <BlockIcon name="triangle-alert"
+                  size={16}
+                  class="mt-0.5 shrink-0 text-error"
+                  aria-hidden="true"
+                />
+                <span
+                  >{a.confirm ??
+                    `This asks the agent to “${a.label}”. Say why before it is sent.`}</span
+                >
+              </p>
+              <label
+                class="flex flex-col gap-1 text-xs text-base-content/75"
+                for={`act-${ctx?.blockId}-${a.id}-reason`}
+              >
+                Reason (required)
+                <textarea
+                  id={`act-${ctx?.blockId}-${a.id}-reason`}
+                  class="textarea textarea-sm w-full rounded-field border-base-content/20"
+                  rows="2"
+                  maxlength="500"
+                  bind:value={reasons[a.id]}
+                ></textarea>
+              </label>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  class="btn btn-sm btn-error"
+                  disabled={sending[a.id]}
+                  onclick={() => void send(a)}
+                >
+                  {#if sending[a.id]}<BlockIcon name="loader-circle"
+                      size={14}
+                      class="motion-safe:animate-spin"
+                      aria-hidden="true"
+                    />{/if}
+                  Send request
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-sm btn-ghost"
+                  onclick={() => {
+                    confirming[a.id] = false
+                    sendError[a.id] = ""
+                  }}>Cancel</button
+                >
+              </div>
+            </div>
+          {:else if live}
+            <div class="flex flex-wrap items-center gap-2">
+              <button
+                type="submit"
+                class={buttonClass(a)}
+                disabled={!permitted || open || sending[a.id]}
+                aria-describedby={req
+                  ? `act-${ctx?.blockId}-${a.id}-st`
+                  : undefined}
+              >
+                {#if sending[a.id]}
+                  <BlockIcon name="loader-circle"
+                    size={14}
+                    class="motion-safe:animate-spin"
+                    aria-hidden="true"
+                  />
+                {:else}
+                  <BlockIcon name="send" size={14} aria-hidden="true" />
+                {/if}
+                {req && isTerminal(req.status) ? `${a.label} again` : a.label}
+              </button>
+              {#if !permitted}
+                <span class="text-xs text-base-content/60"
+                  >Your role can't send this request.</span
+                >
+              {:else if open}
+                <span class="text-xs text-base-content/60"
+                  >Waiting on the agent…</span
+                >
+              {/if}
+            </div>
+          {/if}
+
+          {#if sendError[a.id]}
+            <p class="text-xs text-error" role="alert">{sendError[a.id]}</p>
+          {/if}
+
+          {#if req}
+            <div
+              id={`act-${ctx?.blockId}-${a.id}-st`}
+              class="text-xs text-base-content/70"
+              role="status"
+              aria-live="polite"
+            >
+              {#if req.note}
+                <p
+                  class="whitespace-pre-line text-base-content"
+                  data-testid="action-note"
+                >
+                  {req.note}
+                </p>
+              {/if}
+              <p class="mt-0.5 text-base-content/60">
+                {req.mine ? "You" : (req.viewerLabel ?? "Someone")} asked · {when(
+                  req.createdAt,
+                )}{#if req.ackedBy}{" · "}{req.ackedBy}{req.ackedAt
+                    ? ` · ${when(req.ackedAt)}`
+                    : ""}{/if}
+              </p>
+            </div>
+          {/if}
+        </form>
+      </li>
+      {/if}
+    {/each}
+  </ul>
+</section>

package/dist/artifact-blocks/blocks/actions/ActionsBlock.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { BlockProps } from "../../types.js";
+declare const ActionsBlock: import("svelte").Component<BlockProps<{
+    actions: {
+        id: string;
+        label: string;
+        variant: "primary" | "default" | "danger";
+        fields: ({
+            id: string;
+            type: "number";
+            label: string;
+            required: boolean;
+            min?: number | undefined;
+            max?: number | undefined;
+            step?: number | undefined;
+            default?: number | undefined;
+        } | {
+            id: string;
+            type: "select";
+            label: string;
+            required: boolean;
+            options: {
+                value: string;
+                label: string;
+            }[];
+            default?: string | undefined;
+        } | {
+            id: string;
+            type: "text";
+            label: string;
+            required: boolean;
+            multiline: boolean;
+            maxLength: number;
+            placeholder?: string | undefined;
+            default?: string | undefined;
+        })[];
+        description?: string | undefined;
+        intent?: string | undefined;
+        confirm?: string | undefined;
+        roles?: ("owner" | "admin" | "member" | "viewer" | "office" | "provider")[] | undefined;
+        owner?: string | undefined;
+        href?: string | undefined;
+    }[];
+    title?: string | undefined;
+    description?: string | undefined;
+    owner?: string | undefined;
+}>, {}, "">;
+type ActionsBlock = ReturnType<typeof ActionsBlock>;
+export default ActionsBlock;

package/dist/artifact-blocks/blocks/actions/block.d.ts

@@ -0,0 +1,8 @@
+/**
+ * actions block — buttons and small forms that send a REQUEST back to the
+ * owning agent (mos-p9auh, living artifacts phase 4).
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type ActionsParams } from "./schema.js";
+declare const def: ArtifactBlockDef<ActionsParams>;
+export default def;

package/dist/artifact-blocks/blocks/actions/block.js

@@ -0,0 +1,74 @@
+import ActionsBlock from "./ActionsBlock.svelte";
+import { actionsSchema } from "./schema.js";
+const EXAMPLE = {
+    title: "Soak controls",
+    description: "Ask the soak agent to re-run a scenario, apply loops, or pause.",
+    actions: [
+        {
+            id: "rerun-scenario",
+            label: "Re-run scenario",
+            description: "Queues one more soak pass of the chosen scenario.",
+            intent: "rerun-scenario",
+            variant: "primary",
+            fields: [
+                {
+                    id: "scenario",
+                    type: "select",
+                    label: "Scenario",
+                    required: true,
+                    multiline: false,
+                    options: [
+                        { value: "ruby_office_switch", label: "Ruby office switch" },
+                        { value: "after_hours", label: "After hours" },
+                    ],
+                    default: "ruby_office_switch",
+                },
+                {
+                    id: "calls",
+                    type: "number",
+                    label: "Calls",
+                    required: false,
+                    min: 1,
+                    max: 50,
+                    default: 10,
+                },
+            ],
+        },
+        {
+            id: "apply-v3-loops",
+            label: "Approve & apply v3 loops",
+            intent: "apply-loops:v3",
+            variant: "default",
+            fields: [],
+        },
+        {
+            id: "open-uat",
+            label: "Open the UAT build",
+            description: "A link, not a request: opens the build to test.",
+            href: "https://uat.example.com/soak",
+            variant: "default",
+            fields: [],
+        },
+        {
+            id: "pause-soak",
+            label: "Pause soak",
+            description: "Stops new calls; in-flight calls finish.",
+            intent: "pause-soak",
+            variant: "danger",
+            confirm: "Pausing stops the overnight soak until someone resumes it.",
+            roles: ["admin", "owner"],
+            fields: [],
+        },
+    ],
+};
+const def = {
+    type: "actions",
+    title: "Actions (buttons that ask the agent)",
+    description: "Two-way page controls: buttons and small forms whose press sends a REQUEST back to the owning agent — 'Re-run scenario ruby_office_switch', 'Approve & apply v3 loops', 'Pause soak'. MOS never runs anything: a press records one event (kind 'action': viewer, intent, inputs, reason) that you receive through `mos-artifact watch --slug s --kind action` or `mos-artifact drain --owner <you>`; act on it, then answer with `mos-artifact ack --event <id> --status running|done|failed --note '…'` and the button walks Queued → Running → Done ✓ / Failed with your note (open pages poll every 4s). A finished request is final; pressing again is a new request, and while one is open the button is held so a double-click cannot queue twice. Params: title?, description?, owner? (the agent that hears these; falls back to the block owner, then the publisher), actions[1-12] of { id (stable, lowercase a-z0-9_-), label (≤80), description?, intent? (the machine string you switch on; defaults to id), variant default|primary|danger, confirm? (danger copy), roles? (exact team roles allowed — viewer|member|office|provider|admin|owner; default every member-rank role), owner? (per-action routing), fields[0-8] }. Fields: { id, type:'text', label, placeholder?, required?, multiline?, maxLength? (≤2000) } | { id, type:'number', label, min?, max?, step?, required?, default? } | { id, type:'select', label, options[1-30] {value,label}, required?, default? }. The server re-validates every input against these declarations and drops undeclared ones. variant 'danger' requires a confirm step AND a typed reason (sent to you as payload.reason). LINKS (PARAMS-SPEC §2): give an action `href` (http(s):// or root-relative) and it is a plain link button — it opens the url (off-origin in a new tab), sends no request, ignores intent/fields/confirm/roles/owner and needs no team role, so it works on a read-only share link too; use it for 'Open the UAT build', 'Open the task'. Requests go through the host's actions service (jatui HostAdapter.services.actions); a host without one shows the request list without controls and says requests can't be sent from that view. Rate-limited per viewer. Signed-out / public-link viewers see the list without controls. Tip: one action per thing the agent can actually do, and always ack — an unacked request sits at Queued.",
+    schema: actionsSchema,
+    component: ActionsBlock,
+    // mos-8fvt9: the section's Listen + comment sit on the heading row.
+    hostsTools: (p) => Boolean(p.title),
+    example: EXAMPLE,
+};
+export default def;