# Agent Steps and Confirm

> The tool calls an agent made and a human-in-the-loop confirm before it acts. A step list with arguments, results and retry, plus a diff review with per-change ticks, risk, and Apply or Reject.

Source: https://docs.nasaqui.com/components/agent-steps

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/agent-steps.json
```

Two pieces for agentic features. `AgentSteps` shows what the agent did or plans to do, one tool call per row.
`AgentConfirm` stops before the change lands: it shows each proposed change as a diff and waits for a person to apply
or reject. Neither runs anything itself.

## When to use

- An assistant that calls tools and you want the run to be inspectable.
- Any agent action that edits data, sends messages or spends money and needs a yes first.

## When not to use

- A queue of requests from many people to approve: use [`ApprovalQueue`](https://docs.nasaqui.com/components/approval-queue).
- History of finished runs: use [`RunHistory`](https://docs.nasaqui.com/components/run-history).
- Editing a workflow by hand: use [`StepEditor`](https://docs.nasaqui.com/components/step-editor).

## Import

```tsx
import { AgentSteps, AgentConfirm } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
<AgentSteps
  steps={steps}
  redactKeys={["token", "password"]}
  onRetry={(id) => retry(id)}
  renderConfirm={() => (
    <AgentConfirm
      changes={changes}
      summary="I will rename 2 tags and delete 1 duplicate."
      onApply={async (ids) => api.apply(ids)}
      onReject={async (reason) => api.reject(reason)}
    />
  )}
/>
```

## API

### `AgentStep`

`id`, `label`, `tool?`, `status` (`pending`, `running`, `awaiting`, `done`, `error`, `skipped`), `args?`, `result?`
(text or a JSON string), `resultLanguage?`, `error?`, `durationMs?`.

### `AgentSteps`

| Prop | Type | Notes |
| --- | --- | --- |
| `steps` | `AgentStep[]` | In order. |
| `title` | `string?` | Heading. |
| `redactKeys` | `string[]` | Argument keys masked at any depth, case-insensitive. |
| `renderConfirm` | `(step) => ReactNode` | Shown under a step that is `awaiting`. |
| `onRetry` | `(stepId) => void` | Adds a Retry button on failed steps. |
| `defaultOpenIds` | `string[]` | Steps whose details start open. |
| `labels` | `Partial<AgentStepsLabels>` | |

### `AgentChange`

`id`, `title`, `target?`, `description?`, `before?`, `after?`, `risk?` (`low`, `medium`, `high`). No `before` means a
new item, no `after` means a deletion.

### `AgentConfirm`

| Prop | Type | Notes |
| --- | --- | --- |
| `changes` | `AgentChange[]` | |
| `onApply` | `(ids) => Promise<void \| { error? }>` | Gets the ticked ids. A rejection or `{ error }` shows the failure and keeps the choice open. |
| `onReject` | `(reason?) => Promise<...>` | |
| `summary` | `ReactNode` | The agent's one-line intent. |
| `requireReason` | `boolean` | Reason is mandatory on reject. |
| `defaultUnchecked` | `string[]` | Ids that start unticked. |
| `onDecided` | `(decision) => void` | After success. |

`AgentDiff` on its own takes `before`, `after` and `context`.

## Examples

- Read only run log: `AgentSteps` without `renderConfirm`.
- Destructive change: mark `risk: "high"`, and Apply stays disabled until the person ticks the acknowledgement.

## Accessibility

- The run summary is a polite live region: "Waiting for you", "Failed", "Done".
- Each step is a disclosure button with its status in text, not only an icon.
- Diff lines carry `+` and `-` marks, so colour is not the only signal.
- Reject opens a dialog that traps focus and returns it on close.

## RTL and i18n

- English and Arabic through `useOptionalNasaq()`, overridable with `labels`.
- Tool names, arguments, results and diffs stay left to right; the surrounding text follows the page direction.
- Progress arrows and chevrons flip in RTL.

## Styling and tokens

Status uses the `--nq-success`, `--nq-warning`, `--nq-danger` and `--nq-accent` families. Diff rows use the same tints
as [`VersionHistory`](https://docs.nasaqui.com/components/version-history).

## Do / Don't

- Do let the person leave single changes out.
- Do mask secrets with `redactKeys` before they reach the screen.
- Don't apply anything before `onApply` is called. Confirm is the only gate.
- Don't hide the diff for high risk changes.

## Related

[`ApprovalQueue`](https://docs.nasaqui.com/components/approval-queue), [`RunHistory`](https://docs.nasaqui.com/components/run-history),
[`StepEditor`](https://docs.nasaqui.com/components/step-editor), [`AiCitedAnswer`](https://docs.nasaqui.com/components/ai-citations).

## Code

### React

```tsx
<AgentSteps
  steps={steps}
  redactKeys={["token", "password"]}
  onRetry={(id) => retry(id)}
  renderConfirm={() => (
    <AgentConfirm
      changes={changes}
      summary="I will rename 2 tags and delete 1 duplicate."
      onApply={async (ids) => api.apply(ids)}
      onReject={async (reason) => api.reject(reason)}
    />
  )}
/>
```

### shadcn

```tsx
<AgentSteps
  steps={steps}
  redactKeys={["token", "password"]}
  onRetry={(id) => retry(id)}
  renderConfirm={() => (
    <AgentConfirm
      changes={changes}
      summary="I will rename 2 tags and delete 1 duplicate."
      onApply={async (ids) => api.apply(ids)}
      onReject={async (reason) => api.reject(reason)}
    />
  )}
/>
```

### Vue

```vue
<script setup lang="ts">
import { NqAgentConfirm, NqAgentSteps, type AgentChange, type AgentStep } from "@fadymondy/nasaq/vue";

const steps: AgentStep[] = [
  { id: "s1", label: "Read the tag list", tool: "tags.list", status: "done", durationMs: 420, args: { limit: 50, token: "tok-123" }, result: '{"count":42}' },
  { id: "s2", label: "Rename 2 tags and delete 1 duplicate", tool: "tags.update", status: "awaiting" },
  { id: "s3", label: "Send the summary email", tool: "mail.send", status: "pending" },
];
const changes: AgentChange[] = [
  { id: "c1", title: "Rename tag", target: "tags/launch", before: "name: launch\ncolor: blue", after: "name: product-launch\ncolor: blue" },
  { id: "c2", title: "Delete duplicate", target: "tags/launch-2", before: "name: launch-2", risk: "high" },
];

const apply = async (_ids: string[]) => {};
const reject = async (_reason?: string) => {};
</script>

<template>
  <NqAgentSteps :steps="steps" :redact-keys="['token', 'password']" :on-retry="(id: string) => id">
    <template #confirm>
      <NqAgentConfirm :changes="changes" summary="I will rename 2 tags and delete 1 duplicate." :on-apply="apply" :on-reject="reject" />
    </template>
  </NqAgentSteps>
</template>
```

### Blade

```blade
<x-nq::agent-steps retry :redact-keys="['token', 'password']" :steps="[
    ['id' => 's1', 'label' => 'Read the tag list', 'tool' => 'tags.list', 'status' => 'done', 'durationMs' => 420, 'args' => ['limit' => 50, 'token' => 'tok-123'], 'result' => json_encode(['count' => 42])],
    ['id' => 's2', 'label' => 'Rename 2 tags and delete 1 duplicate', 'tool' => 'tags.update', 'status' => 'awaiting'],
    ['id' => 's3', 'label' => 'Send the summary email', 'tool' => 'mail.send', 'status' => 'pending'],
]">
    <x-slot:confirm>
        <x-nq::agent-steps.confirm summary="I will rename 2 tags and delete 1 duplicate." :changes="[
            ['id' => 'c1', 'title' => 'Rename tag', 'target' => 'tags/launch', 'before' => 'name: launch'.chr(10).'color: blue', 'after' => 'name: product-launch'.chr(10).'color: blue'],
            ['id' => 'c2', 'title' => 'Delete duplicate', 'target' => 'tags/launch-2', 'before' => 'name: launch-2', 'risk' => 'high'],
        ]" />
    </x-slot:confirm>
</x-nq::agent-steps>
```

### HTML + Alpine

```html
<section data-slot="agent-steps" x-data="nqAgentSteps(JSON.parse('[{\u0022id\u0022:\u0022s1\u0022,\u0022label\u0022:\u0022Read the tag list\u0022,\u0022tool\u0022:\u0022tags.list\u0022,\u0022status\u0022:\u0022done\u0022,\u0022durationMs\u0022:420,\u0022args\u0022:{\u0022limit\u0022:50,\u0022token\u0022:\u0022tok-123\u0022},\u0022result\u0022:\u0022{\\u0022count\\u0022:42}\u0022},{\u0022id\u0022:\u0022s2\u0022,\u0022label\u0022:\u0022Rename 2 tags and delete 1 duplicate\u0022,\u0022tool\u0022:\u0022tags.update\u0022,\u0022status\u0022:\u0022awaiting\u0022},{\u0022id\u0022:\u0022s3\u0022,\u0022label\u0022:\u0022Send the summary email\u0022,\u0022tool\u0022:\u0022mail.send\u0022,\u0022status\u0022:\u0022pending\u0022}]'), JSON.parse('{\u0022redactKeys\u0022:[\u0022token\u0022,\u0022password\u0022],\u0022retry\u0022:true}'))" x-modelable="steps"
    x-id="['nq-agent-steps']" x-bind:data-state="state()" x-bind:aria-labelledby="$id('nq-agent-steps', 'h')"
    class="flex min-w-0 flex-col gap-3">
    <header class="flex flex-wrap items-center justify-between gap-2">
        <h3 x-bind:id="$id('nq-agent-steps', 'h')" class="text-body-sm font-semibold text-foreground">Agent steps</h3>
        <p role="status" class="flex items-center gap-2 text-caption text-muted-foreground">
            <svg x-show="state() === 'running'" x-cloak="1" style="display: none" aria-hidden="true" class="size-3.5 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>            <span x-text="summary()" x-bind:class="state() === 'awaiting' ? 'text-nq-warning-text' : (state() === 'error' ? 'text-nq-danger-text' : (state() === 'done' ? 'text-nq-success-text' : ''))"></span>
            <span x-show="totalText() !== ''" x-cloak style="display: none" dir="ltr" class="tabular-nums" x-text="totalText()"></span>
        </p>
    </header>
    <ol class="flex flex-col">
        <template x-for="s in rows()" :key="s.id">
            <li data-slot="agent-step" x-bind:data-status="s.status" class="flex gap-3">
                <div class="flex flex-col items-center">
                    <span class="grid size-6 shrink-0 place-items-center rounded-full border border-border bg-card">
                        <svg x-show="s.status === 'running'" x-cloak="1" style="display: none" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                                                    <svg style="display: none;" x-show="s.status === 'awaiting'" x-cloak="1" aria-hidden="true" class="size-4 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
    <path d="M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"/>
    <path d="M12 17h.01"/>
</svg>                                                    <svg style="display: none;" x-show="s.status === 'done'" x-cloak="1" aria-hidden="true" class="size-4 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                                                    <svg style="display: none;" x-show="s.status === 'error'" x-cloak="1" aria-hidden="true" class="size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>                                                    <svg style="display: none;" x-show="s.status === 'skipped'" x-cloak="1" aria-hidden="true" class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                                                    <svg style="display: none;" x-show="s.status === 'pending'" x-cloak="1" aria-hidden="true" class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.1 2.182a10 10 0 0 1 3.8 0"/>
  <path d="M13.9 21.818a10 10 0 0 1-3.8 0"/>
  <path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/>
  <path d="M2.182 13.9a10 10 0 0 1 0-3.8"/>
  <path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/>
  <path d="M21.818 10.1a10 10 0 0 1 0 3.8"/>
  <path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/>
  <path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/>
</svg>                                            </span>
                    <span x-show="!s.last" aria-hidden="true" class="my-1 w-px flex-1 bg-border"></span>
                </div>
                <div class="flex min-w-0 flex-1 flex-col gap-2" x-bind:class="s.last ? '' : 'pb-4'">
                    <div>
                        <div class="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
                            <span dir="auto" class="text-body-sm" x-bind:class="s.status === 'pending' ? 'text-muted-foreground' : 'text-foreground'" x-text="s.label"></span>
                            <code x-show="s.tool" x-cloak style="display: none" dir="ltr" class="rounded-sm bg-secondary px-1 font-mono text-[0.85em] text-muted-foreground" x-text="s.tool"></code>
                                                            <span data-slot="badge"  style="display: none"     x-show="s.status === &#039;pending&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Queued</span>
                                                            <span data-slot="badge"  style="display: none"     x-show="s.status === &#039;running&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">Running</span>
                                                            <span data-slot="badge"  style="display: none"     x-show="s.status === &#039;awaiting&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Needs approval</span>
                                                            <span data-slot="badge"  style="display: none"     x-show="s.status === &#039;done&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Done</span>
                                                            <span data-slot="badge"  style="display: none"     x-show="s.status === &#039;error&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">Failed</span>
                                                            <span data-slot="badge"  style="display: none"     x-show="s.status === &#039;skipped&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Skipped</span>
                                                        <span x-show="s.duration !== ''" x-cloak style="display: none" dir="ltr" class="text-caption tabular-nums text-muted-foreground" x-text="s.duration"></span>
                            <span class="flex-1"></span>
                            <button data-slot="button"
     type="button"                         x-show="showRetry(s)" x-cloak="x-cloak" style="display: none" x-on:click="retry(s.id)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Retry</button>
                            <button type="button" x-show="s.hasDetails" x-cloak style="display: none" x-on:click="toggle(s)" x-bind:aria-expanded="s.open ? 'true' : 'false'"
                                x-bind:aria-label="s.open ? $nq.t('Hide details', 'إخفاء التفاصيل') : $nq.t('Show details', 'عرض التفاصيل')"
                                class="grid size-6 place-items-center rounded-control text-muted-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                                <svg aria-hidden="true" x-bind:class="s.open ? 'rotate-180' : ''" class="size-4 transition-transform duration-150 ease-nq" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg>                            </button>
                        </div>
                        <div x-show="s.hasDetails" x-nq-presence="s.open" class="h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-nq motion-reduce:transition-none data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0" style="display: none">
                            <div class="mt-2 flex flex-col gap-2">
                                <div x-show="s.error" x-cloak style="display: none">
                                    <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                    <div data-slot="alert-title" class="text-label text-foreground">Error</div>
                            <div data-slot="alert-description" class="text-body-sm text-muted-foreground"><span dir="auto" x-text="s.error"></span></div>
            </div>
    </div>
                                </div>
                                <div x-show="s.argsText !== ''" x-cloak style="display: none" class="flex flex-col gap-1">
                                    <span class="text-caption text-muted-foreground">Arguments</span>
                                    <figure data-slot="code-block" data-language="json" dir="ltr" x-data="nqCodeBlock(JSON.parse('{\u0022code\u0022:\u0022\u0022,\u0022language\u0022:\u0022json\u0022,\u0022marked\u0022:[],\u0022lineNumbers\u0022:false}'))" x-bind:data-highlighted="highlighted ? '' : null" x-effect="setCode(s.argsText)"
    class="group/code relative m-0 overflow-hidden rounded-surface border border-border bg-nq-surface-soft text-start [--shiki-foreground:var(--nq-fg)] [--shiki-background:transparent] [--shiki-token-comment:var(--nq-fg-muted)] [--shiki-token-keyword:var(--nq-accent-text)] [--shiki-token-string:var(--nq-success-text)] [--shiki-token-string-expression:var(--nq-success-text)] [--shiki-token-constant:var(--nq-warning-text)] [--shiki-token-function:var(--nq-info-text)] [--shiki-token-parameter:var(--nq-fg-body)] [--shiki-token-punctuation:var(--nq-fg-muted)] [--shiki-token-link:var(--nq-info-text)]">
            <div class="absolute end-1.5 top-1.5 z-10 opacity-0 transition-opacity duration-150 ease-nq focus-within:opacity-100 group-hover/code:opacity-100 pointer-coarse:opacity-100">
            <span class="contents" x-data="nqCopyButton(() => (code), 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy code" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Code copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
        </div>
        <pre data-slot="code-block-pre" role="region" tabindex="0" aria-label="Arguments"
        class="m-0 overflow-auto bg-transparent py-3 font-mono text-code text-[var(--shiki-foreground)] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus max-h-48"><code class="block w-max min-w-full"><span data-line="1"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line></span></span></code></pre>
</figure>
                                </div>
                                <div x-show="s.result" x-cloak style="display: none" class="flex flex-col gap-1">
                                    <span class="text-caption text-muted-foreground">Result</span>
                                    <div x-show="s.lang === 'json'" x-cloak style="display: none">
                                        <figure data-slot="code-block" data-language="json" dir="ltr" x-data="nqCodeBlock(JSON.parse('{\u0022code\u0022:\u0022\u0022,\u0022language\u0022:\u0022json\u0022,\u0022marked\u0022:[],\u0022lineNumbers\u0022:false}'))" x-bind:data-highlighted="highlighted ? '' : null" x-effect="setCode(s.result ?? &#039;&#039;)"
    class="group/code relative m-0 overflow-hidden rounded-surface border border-border bg-nq-surface-soft text-start [--shiki-foreground:var(--nq-fg)] [--shiki-background:transparent] [--shiki-token-comment:var(--nq-fg-muted)] [--shiki-token-keyword:var(--nq-accent-text)] [--shiki-token-string:var(--nq-success-text)] [--shiki-token-string-expression:var(--nq-success-text)] [--shiki-token-constant:var(--nq-warning-text)] [--shiki-token-function:var(--nq-info-text)] [--shiki-token-parameter:var(--nq-fg-body)] [--shiki-token-punctuation:var(--nq-fg-muted)] [--shiki-token-link:var(--nq-info-text)]">
            <div class="absolute end-1.5 top-1.5 z-10 opacity-0 transition-opacity duration-150 ease-nq focus-within:opacity-100 group-hover/code:opacity-100 pointer-coarse:opacity-100">
            <span class="contents" x-data="nqCopyButton(() => (code), 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy code" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Code copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
        </div>
        <pre data-slot="code-block-pre" role="region" tabindex="0" aria-label="Result"
        class="m-0 overflow-auto bg-transparent py-3 font-mono text-code text-[var(--shiki-foreground)] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus max-h-48"><code class="block w-max min-w-full"><span data-line="1"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line></span></span></code></pre>
</figure>
                                    </div>
                                    <div x-show="s.lang !== 'json'" x-cloak style="display: none">
                                        <figure data-slot="code-block" data-language="text" dir="ltr" x-data="nqCodeBlock(JSON.parse('{\u0022code\u0022:\u0022\u0022,\u0022language\u0022:\u0022text\u0022,\u0022marked\u0022:[],\u0022lineNumbers\u0022:false}'))" x-bind:data-highlighted="highlighted ? '' : null" x-effect="setCode(s.result ?? &#039;&#039;)"
    class="group/code relative m-0 overflow-hidden rounded-surface border border-border bg-nq-surface-soft text-start [--shiki-foreground:var(--nq-fg)] [--shiki-background:transparent] [--shiki-token-comment:var(--nq-fg-muted)] [--shiki-token-keyword:var(--nq-accent-text)] [--shiki-token-string:var(--nq-success-text)] [--shiki-token-string-expression:var(--nq-success-text)] [--shiki-token-constant:var(--nq-warning-text)] [--shiki-token-function:var(--nq-info-text)] [--shiki-token-parameter:var(--nq-fg-body)] [--shiki-token-punctuation:var(--nq-fg-muted)] [--shiki-token-link:var(--nq-info-text)]">
            <div class="absolute end-1.5 top-1.5 z-10 opacity-0 transition-opacity duration-150 ease-nq focus-within:opacity-100 group-hover/code:opacity-100 pointer-coarse:opacity-100">
            <span class="contents" x-data="nqCopyButton(() => (code), 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy code" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Code copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
        </div>
        <pre data-slot="code-block-pre" role="region" tabindex="0" aria-label="Result"
        class="m-0 overflow-auto bg-transparent py-3 font-mono text-code text-[var(--shiki-foreground)] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus max-h-48"><code class="block w-max min-w-full"><span data-line="1"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line></span></span></code></pre>
</figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                                            <template x-if="s.status === 'awaiting'">
                            <div><section data-slot="agent-confirm" x-data="nqAgentConfirm(JSON.parse('[{\u0022id\u0022:\u0022c1\u0022,\u0022title\u0022:\u0022Rename tag\u0022,\u0022target\u0022:\u0022tags\\\/launch\u0022,\u0022before\u0022:\u0022name: launch\\ncolor: blue\u0022,\u0022after\u0022:\u0022name: product-launch\\ncolor: blue\u0022},{\u0022id\u0022:\u0022c2\u0022,\u0022title\u0022:\u0022Delete duplicate\u0022,\u0022target\u0022:\u0022tags\\\/launch-2\u0022,\u0022before\u0022:\u0022name: launch-2\u0022,\u0022risk\u0022:\u0022high\u0022}]'), {})" x-modelable="changes"
    x-id="['nq-agent-confirm']" x-bind:data-decision="decision" x-bind:aria-busy="busy !== null ? 'true' : 'false'" x-bind:aria-labelledby="$id('nq-agent-confirm', 'h')"
    class="min-w-0 [&[data-decision]]:block">
    <div x-show="decision !== null" x-cloak style="display: none">
        <div x-show="decision === 'applied'" x-cloak style="display: none">
            <div data-slot="alert" data-tone="success" role="status"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-success/30 bg-nq-success-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                    <div data-slot="alert-title" class="text-label text-foreground">Changes applied</div>
                            <div data-slot="alert-description" class="text-body-sm text-muted-foreground"><span x-text="appliedText()"></span></div>
            </div>
    </div>
        </div>
        <div x-show="decision === 'rejected'" x-cloak style="display: none">
            <div data-slot="alert" data-tone="info" role="status"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-info/30 bg-nq-info-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                    <div data-slot="alert-title" class="text-label text-foreground">Changes rejected</div>
                            <div data-slot="alert-description" class="text-body-sm text-muted-foreground">The agent was told and nothing changed.</div>
            </div>
    </div>
        </div>
    </div>
    <div x-show="decision === null" class="flex min-w-0 flex-col gap-3 rounded-floating border border-nq-warning/40 bg-card p-3 sm:p-4">
        <header class="flex flex-col gap-1">
            <div class="flex flex-wrap items-center gap-2">
                <svg aria-hidden="true" class="size-4 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
  <path d="M12 8v4"/>
  <path d="M12 16h.01"/>
</svg>                <h4 x-bind:id="$id('nq-agent-confirm', 'h')" class="text-body-sm font-semibold text-foreground">Review before applying</h4>
                                    <span data-slot="badge"  style="display: none"     x-show="overall() === &#039;low&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Low risk</span>
                                    <span data-slot="badge"  style="display: none"     x-show="overall() === &#039;medium&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Medium risk</span>
                                    <span data-slot="badge"  style="display: none"     x-show="overall() === &#039;high&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">High risk</span>
                            </div>
            <p dir="auto" class="text-body-sm text-muted-foreground">
                I will rename 2 tags and delete 1 duplicate.
            </p>
        </header>
        <ul class="flex flex-col gap-2">
            <template x-for="(c, i) in changes" :key="c.id">
                <li data-slot="agent-change" x-bind:data-kind="kind(c)" x-bind:data-checked="picked[c.id] ? '' : null"
                    class="rounded-control border border-border bg-background transition-opacity duration-150 ease-nq" x-bind:class="(! picked[c.id] &amp;&amp; selectable()) ? 'opacity-60' : ''">
                    <div class="flex items-start gap-3 p-3">
                        <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-show="selectable()" x-cloak="x-cloak" style="display: none" x-model="picked[c.id]" x-bind:disabled="busy !== null" x-bind:aria-label="$nq.t(&#039;Apply &#039;, &#039;تطبيق &#039;) + c.title" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                                                    <svg style="display: none;" x-show="kind(c) === 'create'" x-cloak="1" aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"/>
    <path d="M14 2v4a2 2 0 0 0 2 2h4"/>
    <path d="M3 15h6"/>
    <path d="M6 12v6"/>
</svg>                                                                    <svg style="display: none;" x-show="kind(c) === 'edit'" x-cloak="1" aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>                                                                    <svg style="display: none;" x-show="kind(c) === 'delete'" x-cloak="1" aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"/>
    <path d="M14 2v4a2 2 0 0 0 2 2h4"/>
    <path d="m8 12.5-5 5"/>
    <path d="m3 12.5 5 5"/>
</svg>                                                                <span dir="auto" class="text-body-sm font-medium text-foreground" x-text="c.title"></span>
                                <span data-slot="badge"     x-text="kindText(c)" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground"></span>
                                                                    <span data-slot="badge"  style="display: none"     x-show="c.risk === &#039;medium&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Medium risk</span>
                                                                    <span data-slot="badge"  style="display: none"     x-show="c.risk === &#039;high&#039;" x-cloak="x-cloak" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">High risk</span>
                                                            </div>
                            <bdi x-show="c.target" x-cloak style="display: none" dir="ltr" class="truncate font-mono text-caption text-muted-foreground" x-text="c.target"></bdi>
                            <p x-show="c.description" x-cloak style="display: none" dir="auto" class="text-caption text-muted-foreground" x-text="c.description"></p>
                        </div>
                        <div class="flex shrink-0 items-center gap-2">
                            <span class="flex flex-col items-end text-caption tabular-nums sm:flex-row sm:gap-2">
                                <span class="text-nq-success-text"><span aria-hidden="true">+</span><span x-text="stats(c).added"></span><span class="sr-only" x-text="' ' + $nq.t(stats(c).added + ' added', stats(c).added + ' مضاف')"></span></span>
                                <span class="text-nq-danger-text"><span aria-hidden="true">−</span><span x-text="stats(c).removed"></span><span class="sr-only" x-text="' ' + $nq.t(stats(c).removed + ' removed', stats(c).removed + ' محذوف')"></span></span>
                            </span>
                            <button type="button" x-on:click="toggle(c, i)" x-bind:aria-expanded="isOpen(c, i) ? 'true' : 'false'"
                                x-bind:aria-label="isOpen(c, i) ? $nq.t('Hide changes', 'إخفاء التغييرات') : $nq.t('Show changes', 'عرض التغييرات')"
                                class="grid size-7 place-items-center rounded-control text-muted-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                                <svg aria-hidden="true" x-bind:class="isOpen(c, i) ? 'rotate-180' : ''" class="size-4 transition-transform duration-150 ease-nq" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg>                            </button>
                        </div>
                    </div>
                    <div x-nq-presence="isOpen(c, i)" class="h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-nq motion-reduce:transition-none data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0" style="display: none">
                        <div class="border-t border-border p-3">
                            <div  class="contents">
    <p data-slot="agent-diff" x-show="diffOf(c).length === 0" x-cloak style="display: none"
        class="text-caption text-muted-foreground">No differences.</p>
    <div dir="ltr" role="table" aria-label="Changes" data-slot="agent-diff" x-show="diffOf(c).length > 0" x-cloak style="display: none"
        class="overflow-x-auto rounded-control border border-border font-mono text-code">
        <template x-for="(it, i) in diffOf(c)" :key="i">
            <div role="row" x-bind:data-diff="it.type === 'gap' ? null : it.type" x-bind:dir="it.type === 'gap' ? 'auto' : null"
                x-bind:class="it.type === 'gap' ? 'bg-nq-surface-soft px-3 py-1 text-center text-caption text-muted-foreground' : (it.type === 'add' ? 'flex min-w-max bg-nq-success-soft' : (it.type === 'del' ? 'flex min-w-max bg-nq-danger-soft' : 'flex min-w-max'))">
                <span x-show="it.type === 'gap'" x-text="$nq.t(it.count + ' unchanged lines', it.count + ' أسطر دون تغيير')"></span>
                <span x-show="it.type !== 'gap'" role="cell" aria-hidden="true" class="w-9 shrink-0 select-none px-2 text-end tabular-nums text-muted-foreground" x-text="it.oldLine ?? ''"></span>
                <span x-show="it.type !== 'gap'" role="cell" aria-hidden="true" class="w-9 shrink-0 select-none px-2 text-end tabular-nums text-muted-foreground" x-text="it.newLine ?? ''"></span>
                <span x-show="it.type !== 'gap'" role="cell" class="w-5 shrink-0 select-none text-center font-semibold" x-bind:aria-label="it.type === 'add' ? $nq.t('Added line', 'سطر مضاف') : (it.type === 'del' ? $nq.t('Removed line', 'سطر محذوف') : null)"
                    x-text="it.type === 'add' ? '+' : (it.type === 'del' ? '−' : '')"></span>
                <span x-show="it.type !== 'gap'" role="cell" class="whitespace-pre pe-3 text-foreground" x-text="it.text || ' '"></span>
            </div>
        </template>
    </div>
</div>
                        </div>
                    </div>
                </li>
            </template>
        </ul>
        <label x-show="needsReview()" x-cloak style="display: none" class="flex items-start gap-2 text-body-sm text-foreground">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="reviewed" x-bind:disabled="busy !== null" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
            <span dir="auto">I reviewed these changes and understand they are hard to undo</span>
        </label>
        <div x-show="error" x-cloak style="display: none">
            <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="error"></span></div>
            </div>
    </div>
        </div>
        <footer class="flex flex-wrap items-center justify-between gap-2">
            <span role="status" class="text-caption text-muted-foreground" x-text="selectedText()"></span>
            <div class="flex flex-wrap items-center gap-2">
                <button data-slot="button"
     type="button"                         x-bind:disabled="busy !== null" x-on:click="askReject()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Reject</button>
                <button data-slot="button"
     type="button"                         x-bind:disabled="! canApply()" x-bind:aria-busy="busy === &#039;apply&#039; ? &#039;true&#039; : null" x-bind:aria-describedby="riskHint()" x-on:click="apply()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg x-show="busy === 'apply'" x-cloak="1" style="display: none" aria-hidden="true" class="animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                    <span x-text="applyLabel()"></span></button>
            </div>
            <span x-show="needsReview() &amp;&amp; ! reviewed" x-cloak style="display: none" x-bind:id="$id('nq-agent-confirm', 'risk')" class="sr-only">Confirm you reviewed the high risk changes</span>
        </footer>
    </div>
    <template x-teleport="body">
        <div data-slot="dialog-portal" x-on:keydown.escape.window="rejecting &amp;&amp; cancelReject()">
            <div data-slot="dialog-backdrop" x-nq-presence="rejecting" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
            <div data-slot="agent-confirm-reject" role="dialog" aria-modal="true" x-nq-presence="rejecting" x-trap.noscroll="rejecting"
                class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
                <div class="flex flex-col gap-1.5">
                    <h2 data-slot="dialog-title" class="text-h3 text-foreground">Reject these changes</h2>
                    <p data-slot="dialog-description" class="text-body-sm text-muted-foreground">Tell the agent why, so it can try again. The reason is optional.</p>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label for="nq-agent-confirm-reason" class="text-label text-foreground">Reason</label>
                    <textarea id="nq-agent-confirm-reason" data-slot="textarea" rows="3" x-model="reason" placeholder="For example, keep the old retry limit" x-bind:aria-invalid="reasonMissing() ? 'true' : null"
                        class="w-full min-w-0 rounded-control border border-input bg-card px-3 py-2 text-body text-foreground outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus aria-invalid:border-nq-danger"></textarea>
                    <p data-slot="field-error" x-show="reasonMissing()" x-cloak style="display: none" class="text-caption text-nq-danger-text">Give a reason so the agent can adjust</p>
                </div>
                <div x-show="error &amp;&amp; rejecting" x-cloak style="display: none">
                    <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="error"></span></div>
            </div>
    </div>
                </div>
                <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                    <button data-slot="button"
     type="button"                         x-bind:disabled="busy !== null" x-on:click="cancelReject()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                    <button data-slot="button"
     type="button"                         x-bind:aria-busy="busy === &#039;reject&#039; ? &#039;true&#039; : null" x-on:click="reject()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Reject changes</button>
                </div>
            </div>
        </div>
    </template>
</section></div>
                        </template>
                                    </div>
            </li>
        </template>
    </ol>
</section>
```