@nuxtagentic/agents 0.0.0-stage → 0.1.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+Proprietary software. All rights reserved.
+
+Use of Nuxt Agentic packages and starter materials is governed by the applicable
+commercial agreement supplied with a purchase. This repository does not grant
+an open-source license or permission to redistribute the packages as a competing
+template or module library.
+
+Third-party dependencies retain their respective licenses. This notice does not
+replace or modify those licenses.

package/README.md

@@ -1,3 +1,100 @@
-# Temporary Holding Version
+# Agents
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Saved agents run through CloudConfig's provider harness. “Test agent” runs the
+saved version with JSON input and displays progress, approval waits and output.
+Runs are scoped to the authenticated owner, active workspace, agent and session.
+
+Agent code never names a platform. `server/cloudconfig/agents.ts`
+default-exports `defineAgentHost(...)`, built from `agentRunHost`; server code
+opens runs and schedules through `useCloudConfigAgents(event)` or
+`getAgentPlatform(env)`. CloudConfig's Nuxt module creates the platform's agent
+from the host: the official Cloudflare Agents SDK with SQLite checkpoints in
+Cloudflare builds, and an in-memory runner with the local CLI adapters in
+development.
+
+Deployment declarations live in the host application's `cloud.config.ts`: `deploy.agents`
+names the host entry, and `deploy.workflows` exports the automation runner. Use `cloudconfig deploy` to reconcile their bindings and
+migrations. OpenAI uses `NUXT_OPENAI_API_KEY`; configure
+`NUXT_ANTHROPIC_API_KEY` or `NUXT_GOOGLE_AI_API_KEY` for those providers.
+Optional keys are pushed when supplied locally. Secrets never enter saved
+definitions or the browser.
+
+`@nuxtagentic/agents` provides the Agents collection and Markdown editor. The
+framework-independent definitions, ownership rules, validation, frontmatter and
+provider tool schemas belong to `@cloudconfig/core/agents` in CloudConfig.
+
+Agents is a core feature, always available in every workspace. It has no install
+or remove controls in the Modules catalog.
+
+Open Agents in the workspace navigation, or type `agents` in the hero prompt.
+`Create agent: Release notes writer` creates a named draft agent.
+**New agent** inserts a draft record right away and opens it; edit its
+instructions, choose a runtime and model, and add tool declarations. Edits
+autosave after an 800 ms pause. **⌘/Ctrl Enter** saves immediately. Leaving the editor saves pending
+edits first; failed saves keep your changes available to retry. Search and selection
+live in the URL; open `/dashboard/agents` or link directly with
+`/dashboard/agents?agent=<id>`. Older query-based links redirect to these URLs.
+
+In local development at `localhost`, the runtime picker lists Codex CLI and
+Claude Code when they are installed on the server's PATH (including
+`~/.local/bin`). Install the CLI and sign in using `codex login` or
+`claude auth login`. Model choices come from the installed runtime's catalog;
+**Runtime default** uses the CLI default. Runtime and model have separate inline
+menus. Search the model list by name or ID, or enter a custom ID. Claude
+discovery follows Open Run: it includes models with effort support alongside the
+latest model in each family, and falls back to the `opus`, `sonnet` and `haiku`
+aliases. Catalogs are read once per installed CLI version (or Codex models cache)
+and reused by every editor in the session; opening a menu refreshes them after a
+minute.
+
+Local runtime and model choices are saved separately from the production API
+provider and model. The cloud button opens that API configuration when using a
+local runtime. Deployed hosts always execute through OpenAI, Anthropic, or Google APIs;
+they never attempt to spawn a local process. Configure the selected server key:
+`NUXT_AGENTS_OPENAI_API_KEY`, `NUXT_AGENTS_ANTHROPIC_API_KEY`, or
+`NUXT_AGENTS_GOOGLE_AI_API_KEY`. Existing `NUXT_OPENAI_API_KEY`,
+`NUXT_ANTHROPIC_API_KEY`, `NUXT_GOOGLE_AI_API_KEY` and Automations key overrides
+continue to work. Add your chosen key to `deploy.secrets` before deploying with
+CloudConfig. API model lists are fetched from the provider account, cached for an
+hour and refreshed in the background; saved and custom IDs remain editable if
+discovery is unavailable.
+
+`@cloudconfig/core/agents` owns the runtime fields, validation and Markdown
+frontmatter alongside the existing agent contract. This package supplies the UI,
+catalog discovery and local execution adapters. Both execution paths use the
+granted integration handlers; local CLI built-in tools are disabled.
+
+The visual editor and Markdown source edit the same definition. Source shows the
+settings as YAML frontmatter: runtime, model, status, tool choice and the names
+of enabled tools. The toolbar and Tools drawer stay available in both views and
+update the frontmatter as you change them. Tool declarations are edited in the
+drawer; frontmatter with complete JSON tool declarations is still accepted.
+The tools drawer supports enabling tools, auto/required/none choice, parameters,
+and copying schemas for OpenAI Responses, Anthropic and Google. Connected
+integration tools appear as suggestions at the bottom of the drawer.
+
+To add Agents to another host, install its local packages and register
+`@nuxtagentic/agents` in Nuxt. It remains available outside the optional catalog. Include `agentsModels` from its
+`schema` export in `cloud.config.ts`, then generate and apply a migration. The
+host uses generated CloudConfig CRUD and the typed SDK; no custom agent CRUD
+routes or database tables are needed.
+
+Active marks a definition ready for automatic execution. Use
+[Automations](../automations/README.md) to run it from events and webhooks, or use
+a test run while the definition is still a draft. Configure its provider key on
+the server. Connect accounts in [Integrations](../integrations/README.md), then pick an
+integration tool suggestion in the Tools drawer to attach granted runtime handlers.
+Custom tool declarations need a handler before execution. The existing
+`@nuxtagentic/prompt` package continues to own workspace prompt planning and
+reviewed mutations.
+
+Deployment verification runs `pnpm build` followed by `pnpm test:worker`. The
+Worker test loads the complete production bundle with its real D1 migrations,
+authentication, Nuxt SSR, Agent and AutomationRunner exports. Provider responses
+are mocked, so verification does not call a paid model API. `pnpm test:agents`
+also checks durable execution and the generated deployment wrapper, while
+`pnpm test:automations` checks approvals, retries and integration permissions.
+
+The production build uses a bounded Node heap and exposes garbage collection.
+Default code verification is `pnpm typecheck`; build and runtime verification
+require an explicit request.

package/module.ts

@@ -0,0 +1,35 @@
+import { addRouteMiddleware, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { registerWorkspaceModule } from '@nuxtagentic/kit'
+
+export default defineNuxtModule({
+  meta: { name: '@nuxtagentic/agents' },
+  moduleDependencies: { '@nuxtagentic/workspace': {} },
+  setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+    nuxt.options.runtimeConfig.agents = Object.assign(
+      { openaiApiKey: '', anthropicApiKey: '', googleAiApiKey: '' },
+      nuxt.options.runtimeConfig.agents,
+    )
+    registerWorkspaceModule(
+      {
+        id: 'agents',
+        runtime: resolver.resolve('./runtime'),
+        feature: { from: resolver.resolve('./runtime/index.ts'), name: 'agentsFeature' },
+        metadata: resolver.resolve('./runtime/shared/agent.ts'),
+      },
+      nuxt,
+    )
+    addRouteMiddleware({
+      name: 'agents-route',
+      path: resolver.resolve('./runtime/middleware/agents-route.ts'),
+      global: true,
+    })
+    nuxt.hook('pages:extend', (pages) => {
+      pages.push({
+        name: 'dashboard-agents',
+        path: '/dashboard/agents',
+        file: resolver.resolve('./runtime/pages/agents.vue'),
+      })
+    })
+  },
+})

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@nuxtagentic/agents",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "type": "module",
+  "files": [
+    "module.ts",
+    "runtime",
+    "schema.ts",
+    "README.md",
+    "server.ts",
+    "LICENSE.md"
+  ],
+  "exports": {
+    ".": "./module.ts",
+    "./package.json": "./package.json",
+    "./schema": "./schema.ts",
+    "./server": "./server.ts",
+    "./runtime/*.vue": "./runtime/*.vue",
+    "./runtime/*.css": "./runtime/*.css",
+    "./runtime/*.json": "./runtime/*.json",
+    "./runtime/*.svg": "./runtime/*.svg",
+    "./runtime/*": "./runtime/*.ts"
+  },
+  "dependencies": {
+    "@cloudconfig/core": "0.2.0-beta.2",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.14",
+    "@lezer/highlight": "^1.2.5",
+    "@nuxt/kit": "4.6.1",
+    "@nuxt/ui": "^4.11.1",
+    "h3": "1.15.11",
+    "vue-router": "^5.4.0",
+    "@nuxtagentic/integrations": "0.1.1",
+    "@nuxtagentic/prompt": "0.1.1",
+    "@nuxtagentic/data": "0.1.1",
+    "@nuxtagentic/kit": "0.1.1",
+    "@nuxtagentic/workspace": "0.1.1"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.6.1",
+    "vue": "^3.5.43"
+  },
+  "cloudconfig": {
+    "models": "agentsModels"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "Saved agent definitions, editing, tools and execution for Nuxt Agentic.",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+  }
 }

package/runtime/actions.ts

@@ -0,0 +1,22 @@
+import type { AgentAction } from '@nuxtagentic/workspace/runtime/shared/agent-actions'
+
+export const actions = {
+  agents: [
+    {
+      id: 'new',
+      name: 'New agent',
+      aliases: ['Create agent', 'Create an agent'],
+      description: 'Write the responsibilities and tools for a new agent.',
+      icon: 'i-lucide-plus',
+      run: (context) => context.navigate('/dashboard/agents', { agent: 'new' }),
+    },
+    {
+      id: 'save',
+      name: 'Save agent',
+      description: 'Save this agent’s instructions and tools.',
+      icon: 'i-lucide-check',
+      available: (context) => context.canRun('agents.save'),
+      run: (context) => context.run('agents.save'),
+    },
+  ] satisfies AgentAction[],
+}

package/runtime/components/AgentEditor.vue

@@ -0,0 +1,446 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { defineShortcuts, navigateTo, useRoute } from '#imports'
+import { onBeforeRouteLeave, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
+import { agentName, validateAgentDefinition, type AgentDefinition } from '@cloudconfig/core/agents'
+import { useAgentActionHandler } from '@nuxtagentic/workspace/runtime/composables/useAgentActions'
+import { parseAgentSource, serializeAgentSource } from '../shared/source'
+import { MENU_UI, PILL_CLASS } from '../shared/presentation'
+import RuntimeModelPicker from './RuntimeModelPicker.vue'
+import SourceEditor from './SourceEditor.vue'
+import AgentToolPicker from './AgentToolPicker.vue'
+import type { AgentRuntimeCatalog } from '../shared/runtime'
+import type { AgentIntegrationTool } from '../shared/integration-tool'
+
+const { agent, busy, error, active, removing, save, embedded, runtimeCatalog, integrationTools } =
+  defineProps<{
+    agent: AgentDefinition
+    busy: boolean
+    error: string
+    active: boolean
+    removing: boolean
+    save: (agent: AgentDefinition) => Promise<boolean>
+    embedded?: boolean
+    runtimeCatalog?: AgentRuntimeCatalog
+    integrationTools?: AgentIntegrationTool[]
+  }>()
+const emit = defineEmits<{
+  duplicate: [agent: AgentDefinition]
+  remove: []
+  close: []
+}>()
+function clone(agent: AgentDefinition): AgentDefinition {
+  return JSON.parse(JSON.stringify(agent))
+}
+const MODES = [
+  { value: 'visual', label: 'Visual', icon: 'i-lucide-eye' },
+  { value: 'source', label: 'Markdown', icon: 'i-lucide-code' },
+] as const
+const draft = ref<AgentDefinition>(clone(agent))
+const mode = ref<'visual' | 'source'>('visual')
+// What the visual editor holds; it stays mounted while Markdown source is shown.
+const visualMarkdown = ref(draft.value.markdown)
+const source = ref('')
+const sourceError = ref('')
+const validationError = ref('')
+const isToolsOpen = ref(false)
+const isToolsMounted = ref(false)
+const visualInput = useTemplateRef('visualInput')
+const editorRoot = useTemplateRef('editorRoot')
+const sourceInput = useTemplateRef('sourceInput')
+const route = useRoute()
+const isDiscardOpen = ref(false)
+let nextLocation = ''
+let canNavigate = false
+let isParsing = false
+const baseline = ref(JSON.stringify(agent))
+const snapshot = computed(() => JSON.stringify(draft.value))
+const hasChanges = computed(() => !!sourceError.value || snapshot.value !== baseline.value)
+let savePromise: Promise<boolean> | null = null
+const enabled = computed(() => draft.value.tools.filter((tool) => tool.enabled).length)
+const settings = computed(() => {
+  const { provider, model, status, toolChoice, tools, runtime, localModel } = draft.value
+  return serializeAgentSource({
+    markdown: '',
+    provider,
+    model,
+    status,
+    toolChoice,
+    tools,
+    runtime,
+    localModel,
+  })
+})
+const moreItems = computed(() => [
+  { label: 'Duplicate', disabled: busy, onSelect: duplicate },
+  { label: 'Delete agent', disabled: busy, onSelect: () => emit('remove') },
+])
+const toolbar = [
+  [
+    {
+      kind: 'mark' as const,
+      mark: 'bold' as const,
+      icon: 'i-lucide-bold',
+      tooltip: { text: 'Bold' },
+    },
+    {
+      kind: 'mark' as const,
+      mark: 'italic' as const,
+      icon: 'i-lucide-italic',
+      tooltip: { text: 'Italic' },
+    },
+    {
+      kind: 'mark' as const,
+      mark: 'code' as const,
+      icon: 'i-lucide-code',
+      tooltip: { text: 'Inline code' },
+    },
+  ],
+]
+const layer =
+  'min-w-0 [grid-area:1/1] transition-[opacity,translate,visibility] duration-200 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none'
+const shown = 'visible opacity-100'
+const hidden = 'invisible translate-y-1 opacity-0'
+
+// Toolbar and drawer changes rewrite the settings; typed source is never reformatted.
+watch(
+  settings,
+  () => {
+    if (mode.value === 'source' && !isParsing && !sourceError.value) {
+      source.value = serializeAgentSource(draft.value)
+    }
+  },
+  { flush: 'sync' },
+)
+function updateVisual(value: string) {
+  visualMarkdown.value = value
+  draft.value.markdown = value
+}
+function syncVisual() {
+  const editor = visualInput.value?.editor
+  if (!editor || draft.value.markdown === visualMarkdown.value) {
+    return
+  }
+  // Loading source edits must not round-trip TipTap's normalized Markdown into the draft.
+  editor.commands.setContent(draft.value.markdown, { contentType: 'markdown', emitUpdate: false })
+  visualMarkdown.value = editor.getMarkdown()
+}
+function updateSource(value: string) {
+  source.value = value
+  isParsing = true
+  try {
+    draft.value = parseAgentSource(value, draft.value)
+    sourceError.value = ''
+  } catch (cause) {
+    sourceError.value = cause instanceof Error ? cause.message : 'Check the agent settings.'
+  } finally {
+    isParsing = false
+  }
+}
+async function setMode(value: typeof mode.value) {
+  if (mode.value === value || (value === 'visual' && sourceError.value)) {
+    return
+  }
+  if (value === 'source') {
+    source.value = serializeAgentSource(draft.value)
+  } else {
+    syncVisual()
+  }
+  mode.value = value
+  await nextTick()
+  if (value === 'visual') {
+    visualInput.value?.editor?.commands.focus()
+  } else {
+    sourceInput.value?.focus()
+  }
+}
+function toggleTools() {
+  isToolsMounted.value = true
+  isToolsOpen.value = !isToolsOpen.value
+}
+function validate() {
+  validationError.value =
+    sourceError.value ||
+    validateAgentDefinition({ ...draft.value })
+      .map((issue) => issue.message)
+      .join(' ')
+  return !validationError.value
+}
+watch([snapshot, sourceError, () => removing], (_, __, onCleanup) => {
+  validationError.value = ''
+  if (!active || removing || !hasChanges.value || sourceError.value) {
+    return
+  }
+  const timer = setTimeout(() => void saveDraft(), 800)
+  onCleanup(() => clearTimeout(timer))
+})
+
+async function saveDraft(): Promise<boolean> {
+  if (savePromise && !(await savePromise)) {
+    return false
+  }
+  if (!hasChanges.value) {
+    return true
+  }
+  if (busy || !validate()) {
+    return false
+  }
+  const submitted = snapshot.value
+  savePromise = save(clone(draft.value))
+    .then((saved) => {
+      if (saved) {
+        baseline.value = submitted
+      }
+      return saved
+    })
+    .finally(() => {
+      savePromise = null
+    })
+  return savePromise
+}
+async function duplicate() {
+  if (await saveDraft()) {
+    emit('duplicate', clone(draft.value))
+  }
+}
+async function guardNavigation(to: RouteLocationNormalized) {
+  if (embedded || !active || canNavigate || removing) {
+    return true
+  }
+  if (to.path === route.path && to.query.agent === route.query.agent) {
+    return true
+  }
+  if (await saveDraft()) {
+    return true
+  }
+  nextLocation = to.fullPath
+  isDiscardOpen.value = true
+  return false
+}
+function discard() {
+  canNavigate = true
+  isDiscardOpen.value = false
+  void navigateTo(nextLocation)
+}
+onBeforeRouteLeave(guardNavigation)
+onBeforeRouteUpdate(guardNavigation)
+useAgentActionHandler('agents.save', saveDraft, () => !embedded && active && !busy)
+defineShortcuts({
+  meta_enter: {
+    usingInput: true,
+    handler: () => {
+      if (
+        active &&
+        (!embedded || editorRoot.value?.contains(document.activeElement)) &&
+        !document.querySelector(
+          '[data-state="open"]:is([role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"])',
+        )
+      ) {
+        saveDraft()
+      }
+    },
+  },
+})
+function onKeydown(event: KeyboardEvent) {
+  if (
+    event.key === 'Escape' &&
+    isToolsOpen.value &&
+    !event.defaultPrevented &&
+    !document.querySelector(
+      '[data-state="open"]:is([role="dialog"], [role="menu"], [role="listbox"])',
+    )
+  ) {
+    event.preventDefault()
+    event.stopPropagation()
+    isToolsOpen.value = false
+  }
+}
+
+defineExpose({ save: saveDraft })
+</script>
+
+<template>
+  <section
+    ref="editorRoot"
+    class="relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
+    :aria-label="agentName(draft.markdown)"
+    @keydown="onKeydown"
+  >
+    <div
+      class="relative z-20 flex h-13 shrink-0 items-center gap-1.5 border-b border-default pr-3 pl-4"
+    >
+      <UButton
+        icon="i-lucide-arrow-left"
+        aria-label="Back to agents"
+        variant="ghost"
+        square
+        class="-ml-1.5 size-7.5 md:hidden"
+        @click="$emit('close')"
+      />
+      <label
+        class="flex h-7.5 shrink-0 cursor-pointer items-center rounded-full border border-(--gray-500) pr-2.5 pl-1.5 transition-colors duration-160 hover:bg-(--gray-400) motion-reduce:transition-none"
+        :title="draft.status === 'active' ? 'Active' : 'Draft'"
+      >
+        <USwitch
+          :model-value="draft.status === 'active'"
+          size="xs"
+          color="success"
+          :ui="{ thumb: 'data-[state=checked]:bg-white' }"
+          aria-label="Active agent"
+          @update:model-value="draft.status = $event ? 'active' : 'draft'"
+        />
+      </label>
+      <div class="flex min-w-0 items-center gap-1.5">
+        <RuntimeModelPicker
+          v-model="draft"
+          :catalog="runtimeCatalog"
+        >
+          <UButton
+            icon="i-lucide-wrench"
+            :label="draft.tools.length ? `${enabled}/${draft.tools.length}` : 'Tools'"
+            title="Tools"
+            :aria-expanded="isToolsOpen"
+            variant="ghost"
+            class="shrink-0"
+            :class="PILL_CLASS"
+            :ui="{ leadingIcon: 'size-3.5' }"
+            @click="toggleTools"
+          />
+        </RuntimeModelPicker>
+      </div>
+      <div class="min-w-0 flex-1" />
+      <div
+        role="group"
+        aria-label="Editor view"
+        class="relative grid h-7.5 w-17 shrink-0 grid-cols-2 rounded-lg border border-(--gray-500) p-0.5"
+      >
+        <span
+          class="pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 w-[calc((100%-4px)/2)] rounded-md bg-(--gray-400) transition-transform duration-240 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+          :class="mode === 'source' && 'translate-x-full'"
+        />
+        <button
+          v-for="view in MODES"
+          :key="view.value"
+          type="button"
+          :title="view.label"
+          :aria-label="view.label"
+          :aria-pressed="mode === view.value"
+          :disabled="view.value === 'visual' && !!sourceError"
+          class="relative grid cursor-pointer place-items-center rounded-md transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-accented disabled:cursor-not-allowed motion-reduce:transition-none"
+          :class="mode === view.value ? 'text-highlighted' : 'text-muted hover:text-highlighted'"
+          @click="setMode(view.value)"
+        >
+          <UIcon
+            :name="view.icon"
+            class="size-3.5"
+          />
+        </button>
+      </div>
+      <UDropdownMenu
+        :items="moreItems"
+        :content="{ align: 'end', sideOffset: 6 }"
+        :ui="{
+          ...MENU_UI,
+          content: 'w-45 rounded-[10px] p-1.5 ring-(--gray-500)',
+          item: `${MENU_UI.item} min-h-8.5`,
+        }"
+      >
+        <UButton
+          icon="i-lucide-ellipsis"
+          aria-label="Agent actions"
+          variant="ghost"
+          square
+          class="size-7.5 shrink-0 rounded-lg hover:bg-(--gray-400) aria-expanded:bg-(--gray-400)"
+          :ui="{ leadingIcon: 'size-4' }"
+        />
+      </UDropdownMenu>
+    </div>
+    <UAlert
+      v-if="validationError || sourceError || error"
+      :title="validationError || sourceError || error"
+      color="error"
+      variant="subtle"
+      class="shrink-0 rounded-none"
+    />
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      <div class="mx-auto grid max-w-180 px-[clamp(16px,4vw,40px)] pt-10 pb-40">
+        <UEditor
+          ref="visualInput"
+          v-slot="{ editor }"
+          :model-value="visualMarkdown"
+          content-type="markdown"
+          :mention="false"
+          :inert="mode !== 'visual'"
+          :editor-props="{
+            attributes: {
+              'aria-label': 'Agent instructions',
+              role: 'textbox',
+              'aria-multiline': 'true',
+            },
+          }"
+          placeholder="Write this agent’s responsibilities…"
+          :class="[layer, mode === 'visual' ? shown : hidden]"
+          :ui="{
+            base: 'min-h-120 text-[15px] leading-6 text-default caret-highlighted *:my-0 sm:px-0 [&_p]:mb-3 [&_p]:leading-6 [&_:is(h1,h2,h3,h4,h5,h6)]:font-medium [&_h1]:mb-2 [&_h1]:text-[28px] [&_h1]:leading-9 [&_h1]:tracking-[-0.01em] [&_h1+p]:mb-2 [&_h1+p]:text-muted [&_h2]:mt-7 [&_h2]:mb-1.5 [&_h2]:text-[17px] [&_h2]:leading-[26px] [&_h3]:mt-6 [&_h3]:mb-1.5 [&_h3]:text-base [&_h3]:leading-6 [&_:is(ul,ol)]:mb-3 [&_:is(ul,ol)]:ps-6 [&_li]:my-0 [&_li]:mb-1 [&_li]:ps-0.5 [&_li>p]:mb-0 [&_strong]:font-semibold [&_strong]:text-highlighted [&_code]:inline [&_code]:rounded [&_code]:border-0 [&_code]:bg-(--gray-400) [&_code]:px-[5px] [&_code]:py-px [&_code]:text-[13px] [&_code]:font-normal [&_blockquote]:mb-5 [&_blockquote]:rounded-lg [&_blockquote]:border-s-0 [&_blockquote]:bg-(--gray-300) [&_blockquote]:px-4 [&_blockquote]:py-3 [&_blockquote]:not-italic [&_blockquote]:text-highlighted',
+          }"
+          @update:model-value="updateVisual"
+        >
+          <UEditorToolbar
+            :editor="editor"
+            :items="toolbar"
+            layout="bubble"
+          />
+        </UEditor>
+        <SourceEditor
+          ref="sourceInput"
+          :model-value="source"
+          :inert="mode !== 'source'"
+          label="Agent Markdown source"
+          :class="[layer, mode === 'source' ? shown : hidden]"
+          @update:model-value="updateSource"
+        />
+      </div>
+    </div>
+    <aside
+      class="absolute top-13 right-0 bottom-0 z-10 flex w-[min(440px,100%)] flex-col border-l border-default bg-(--gray-200) pb-19 shadow-[-16px_0_48px_rgb(0_0_0/0.12)] transition-[translate,opacity] duration-260 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none dark:shadow-[-16px_0_48px_rgb(0_0_0/0.35)]"
+      :class="
+        isToolsOpen
+          ? 'translate-x-0 opacity-100'
+          : 'pointer-events-none translate-x-[calc(100%+24px)] opacity-0'
+      "
+      :inert="!isToolsOpen"
+      :aria-hidden="!isToolsOpen"
+    >
+      <AgentToolPicker
+        v-if="isToolsMounted"
+        v-model="draft"
+        :integration-tools="integrationTools"
+        @close="isToolsOpen = false"
+      />
+    </aside>
+  </section>
+  <UModal
+    v-model:open="isDiscardOpen"
+    title="Discard unsaved changes?"
+  >
+    <template #body>
+      <p class="text-sm text-muted">
+        Your changes could not be saved. Keep editing to retry, or discard them.
+      </p>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          label="Keep editing"
+          variant="outline"
+          @click="isDiscardOpen = false"
+        />
+        <UButton
+          label="Discard changes"
+          color="error"
+          @click="discard"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>