feat: ship agent-first mission control v0.2.57

frontend/src/components/config/AgentWorkspaceBrowser.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import {
+  ArrowLeft,
+  CircleAlert,
+  FileText,
+  Folder,
+  Loader2,
+  RefreshCw,
+  X,
+} from '@lucide/vue'
+import { computed, onMounted, ref } from 'vue'
+import { apiFetch } from '../../services/api'
+
+interface WorkspaceEntry {
+  path: string
+  name: string
+  kind: string
+  size: number | null
+  updatedAt: string | null
+}
+
+interface WorkspaceCollection {
+  agentId: string
+  path: string
+  parentPath: string | null
+  entries: WorkspaceEntry[]
+  totalEntries: number
+  offset: number
+  checkedAt: string
+}
+
+interface WorkspaceFile {
+  agentId: string
+  path: string
+  name: string
+  size: number
+  updatedAt: string | null
+  mimeType: string
+  encoding: string
+  content: string
+  contentHash: string
+  checkedAt: string
+}
+
+const props = defineProps<{ agentId: string }>()
+const collection = ref<WorkspaceCollection | null>(null)
+const selectedFile = ref<WorkspaceFile | null>(null)
+const loading = ref(false)
+const error = ref('')
+
+const currentLabel = computed(() => collection.value?.path || 'Workspace root')
+
+async function loadDirectory(path = '') {
+  loading.value = true
+  error.value = ''
+  selectedFile.value = null
+  try {
+    const query = new URLSearchParams({ path, offset: '0', limit: '250' })
+    const response = await apiFetch(
+      `/api/v1/openclaw/agents/${encodeURIComponent(props.agentId)}/workspace?${query}`,
+    )
+    const payload = await response.json().catch(() => null) as
+      | WorkspaceCollection
+      | { message?: string }
+      | null
+    if (!response.ok) throw new Error((payload as { message?: string } | null)?.message || `HTTP ${response.status}`)
+    collection.value = payload as WorkspaceCollection
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Workspace konnte nicht geladen werden.'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function openEntry(entry: WorkspaceEntry) {
+  if (entry.kind === 'directory' || entry.kind === 'folder') {
+    await loadDirectory(entry.path)
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+  try {
+    const query = new URLSearchParams({ path: entry.path })
+    const response = await apiFetch(
+      `/api/v1/openclaw/agents/${encodeURIComponent(props.agentId)}/workspace/file?${query}`,
+    )
+    const payload = await response.json().catch(() => null) as
+      | WorkspaceFile
+      | { message?: string }
+      | null
+    if (!response.ok) throw new Error((payload as { message?: string } | null)?.message || `HTTP ${response.status}`)
+    selectedFile.value = payload as WorkspaceFile
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Workspace-Datei konnte nicht geladen werden.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatSize(size: number | null) {
+  if (size === null) return '—'
+  if (size < 1024) return `${size} B`
+  return `${(size / 1024).toFixed(1)} KB`
+}
+
+onMounted(() => loadDirectory())
+</script>
+
+<template>
+  <section class="workspace-browser" aria-labelledby="workspace-browser-title">
+    <header>
+      <div>
+        <span class="eyebrow">READ-ONLY WORKSPACE</span>
+        <h3 id="workspace-browser-title">Zusätzliche Agent-Dateien</h3>
+        <p>Custom-Dokumente werden sicher über OpenClaw gelesen und bleiben unverändert.</p>
+      </div>
+      <button
+        type="button"
+        class="nexus-button"
+        :disabled="loading"
+        @click="loadDirectory(collection?.path || '')"
+      >
+        <Loader2 v-if="loading" :size="14" class="spin" aria-hidden="true" />
+        <RefreshCw v-else :size="14" aria-hidden="true" />
+        Aktualisieren
+      </button>
+    </header>
+
+    <div class="workspace-path">
+      <button
+        type="button"
+        class="nexus-button"
+        :disabled="!collection?.parentPath && collection?.path === ''"
+        @click="loadDirectory(collection?.parentPath || '')"
+      >
+        <ArrowLeft :size="14" aria-hidden="true" />
+        Eine Ebene hoch
+      </button>
+      <code>{{ currentLabel }}</code>
+      <span>{{ collection?.totalEntries ?? 0 }} Einträge</span>
+    </div>
+
+    <div v-if="error" class="workspace-state workspace-state--error" role="alert">
+      <CircleAlert :size="17" aria-hidden="true" />
+      <p>{{ error }}</p>
+      <button type="button" class="nexus-button" @click="loadDirectory(collection?.path || '')">Erneut laden</button>
+    </div>
+    <div v-else-if="loading && !collection" class="workspace-state" role="status">
+      <Loader2 :size="17" class="spin" aria-hidden="true" />
+      <p>Workspace wird geladen…</p>
+    </div>
+    <div v-else-if="collection?.entries.length" class="workspace-list">
+      <button
+        v-for="entry in collection.entries"
+        :key="entry.path"
+        type="button"
+        class="workspace-entry"
+        @click="openEntry(entry)"
+      >
+        <Folder v-if="entry.kind === 'directory' || entry.kind === 'folder'" :size="16" aria-hidden="true" />
+        <FileText v-else :size="16" aria-hidden="true" />
+        <span><strong>{{ entry.name }}</strong><code>{{ entry.path }}</code></span>
+        <small>{{ formatSize(entry.size) }}</small>
+      </button>
+    </div>
+    <div v-else class="workspace-state">
+      <Folder :size="17" aria-hidden="true" />
+      <p>OpenClaw meldet in diesem Ordner keine lesbaren Einträge.</p>
+    </div>
+
+    <div v-if="selectedFile" class="workspace-preview">
+      <header>
+        <div>
+          <strong>{{ selectedFile.name }}</strong>
+          <code>{{ selectedFile.path }} · sha256:{{ selectedFile.contentHash.slice(0, 12) }}</code>
+        </div>
+        <button type="button" aria-label="Dateivorschau schließen" @click="selectedFile = null">
+          <X :size="16" aria-hidden="true" />
+        </button>
+      </header>
+      <pre tabindex="0">{{ selectedFile.content }}</pre>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.workspace-browser { display: grid; gap: 12px; margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); }
+.workspace-browser > header, .workspace-path, .workspace-entry, .workspace-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.workspace-browser h3 { margin: 3px 0 0; font-family: var(--font-display); font-size: 15px; }
+.workspace-browser header p { margin: 4px 0 0; color: var(--tx-3); line-height: 1.5; }
+.workspace-path { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--accent-wash); }
+.workspace-path code { min-width: 0; overflow: hidden; color: var(--tx-2); font-family: var(--font-mono-v2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-path > span { flex: 0 0 auto; color: var(--tx-3); font-size: 11px; }
+.workspace-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+.workspace-entry { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--accent-wash); color: var(--tx-2); text-align: left; cursor: pointer; }
+.workspace-entry:hover { border-color: var(--line-3); }
+.workspace-entry > svg { flex: 0 0 auto; color: var(--a-mid); }
+.workspace-entry > span { display: grid; flex: 1; gap: 3px; min-width: 0; }
+.workspace-entry strong, .workspace-entry code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-entry code, .workspace-entry small { color: var(--tx-3); font-family: var(--font-mono-v2); font-size: 10px; }
+.workspace-state { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--tx-3); }
+.workspace-state p { flex: 1; margin: 0; }
+.workspace-state--error { border-style: solid; border-color: var(--status-block-line); background: var(--status-block-bg); color: var(--st-block); }
+.workspace-preview { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
+.workspace-preview > header { padding: 11px 13px; border-bottom: 1px solid var(--line); background: var(--accent-wash); }
+.workspace-preview header div { display: grid; gap: 3px; min-width: 0; }
+.workspace-preview header code { overflow-wrap: anywhere; color: var(--tx-3); font-family: var(--font-mono-v2); font-size: 10px; }
+.workspace-preview header button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--glass); color: var(--tx-2); cursor: pointer; }
+.workspace-preview pre { max-height: 420px; margin: 0; overflow: auto; padding: 14px; background: var(--field-surface); color: var(--tx-2); font-family: var(--font-mono-v2); font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+.spin { animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 680px) {
+  .workspace-browser > header, .workspace-path { align-items: flex-start; flex-direction: column; }
+  .workspace-list { grid-template-columns: 1fr; }
+  .workspace-path code { white-space: normal; overflow-wrap: anywhere; }
+}
+</style>

frontend/src/components/config/ConfigEditor.vue

@@ -13,6 +13,9 @@ defineProps<{
   backupStatus: string
   reloadStatus: string
   reloadMessage: string
+  contentHash: string
+  verified: boolean
+  readOnly: boolean
 }>()
 
 defineEmits<{
@@ -20,11 +23,6 @@ defineEmits<{
   save: []
 }>()
 
-function onInput(event: Event) {
-  const textarea = event.target as HTMLTextAreaElement
-  // Pass content change up, parent handles dirty detection
-  ;(event.target as HTMLTextAreaElement).dispatchEvent(new Event('input', { bubbles: true }))
-}
 </script>
 
 <template>
@@ -38,6 +36,9 @@ function onInput(event: Event) {
           <span class="meta-sep">·</span>
           {{ fileModified }}
         </span>
+        <code v-if="contentHash" class="editor-hash" :title="contentHash">
+          sha256:{{ contentHash.slice(0, 12) }}
+        </code>
       </div>
 
       <!-- Save button & status -->
@@ -51,9 +52,10 @@ function onInput(event: Event) {
           {{ saveMessage }}
         </span>
         <button
+          type="button"
           class="save-btn"
           :class="{ dirty, saving }"
-          :disabled="!dirty || saving"
+          :disabled="readOnly || !dirty || saving"
           @click="$emit('save')"
         >
           <Loader2 v-if="saving" :size="14" class="spin" />
@@ -64,15 +66,18 @@ function onInput(event: Event) {
     </div>
 
     <div v-if="reloadMessage" class="editor-health">
-      <span class="health-pill" :class="backupStatus">Backup {{ backupStatus }}</span>
-      <span class="health-pill" :class="reloadStatus">Reload {{ reloadStatus }}</span>
+      <span class="health-pill" :class="verified ? 'verified' : reloadStatus">
+        {{ verified ? 'Read-back verifiziert' : 'Runtime-Aktivierung unbestätigt' }}
+      </span>
       <span class="health-note">{{ reloadMessage }}</span>
     </div>
 
     <!-- Text editor -->
     <textarea
       class="config-editor"
+      :aria-label="fileName ? `Edit ${fileName}` : 'Edit agent configuration'"
       :value="content"
+      :readonly="readOnly"
       @input="$emit('updateContent', ($event.target as HTMLTextAreaElement).value)"
       spellcheck="false"
       wrap="off"
@@ -82,11 +87,11 @@ function onInput(event: Event) {
 
 <style scoped>
 .editor-panel {
-  border: 1px solid var(--line, #1e2030);
+  border: 1px solid var(--line);
   border-top: none;
   border-radius: 0 0 10px 10px;
   overflow: hidden;
-  background: var(--panel, #13141f);
+  background: var(--glass);
 }
 
 .editor-header {
@@ -94,8 +99,8 @@ function onInput(event: Event) {
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  background: rgba(255,255,255,.02);
-  border-bottom: 1px solid var(--line, #1e2030);
+  background: color-mix(in srgb, var(--tx) 2%, transparent);
+  border-bottom: 1px solid var(--line);
   gap: 12px;
 }
 .editor-health {
@@ -103,9 +108,9 @@ function onInput(event: Event) {
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
-  border-bottom: 1px solid var(--line, #1e2030);
-  background: rgba(255,255,255,.015);
-  color: #8e96a8;
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in srgb, var(--tx) 1.5%, transparent);
+  color: var(--tx-3);
   font-size: 10.5px;
   flex-wrap: wrap;
 }
@@ -118,17 +123,26 @@ function onInput(event: Event) {
 .editor-filename {
   font-size: 11.5px;
   font-weight: 600;
-  color: #d0d4dd;
+  color: var(--tx);
   white-space: nowrap;
 }
 .editor-file-meta {
   font-size: 10px;
-  color: #6b7385;
+  color: var(--tx-3);
+  white-space: nowrap;
+}
+.editor-hash {
+  max-width: 180px;
+  overflow: hidden;
+  color: var(--tx-3);
+  font-family: var(--font-mono-v2);
+  font-size: 10px;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 .meta-sep {
   margin: 0 4px;
-  color: #3d4152;
+  color: var(--line-3);
 }
 .editor-actions {
   display: flex;
@@ -145,10 +159,10 @@ function onInput(event: Event) {
   white-space: nowrap;
 }
 .save-indicator.success {
-  color: #51d49a;
+  color: var(--st-work);
 }
 .save-indicator.error {
-  color: #e16e75;
+  color: var(--st-block);
   max-width: 240px;
 }
 
@@ -157,10 +171,10 @@ function onInput(event: Event) {
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
-  border: 1px solid var(--line, #1e2030);
+  border: 1px solid var(--line);
   border-radius: 7px;
-  background: rgba(139,124,246,.08);
-  color: #8b7cf6;
+  background: color-mix(in srgb, var(--a-mid) 8%, transparent);
+  color: var(--a-mid);
   font-size: 10.5px;
   font-weight: 500;
   cursor: pointer;
@@ -169,13 +183,13 @@ function onInput(event: Event) {
   line-height: 1;
 }
 .save-btn:hover:not(:disabled) {
-  background: rgba(139,124,246,.14);
-  border-color: #443d7c;
+  background: color-mix(in srgb, var(--a-mid) 14%, transparent);
+  border-color: var(--line-3);
 }
 .save-btn.dirty {
-  background: rgba(139,124,246,.18);
-  border-color: #5c4ed6;
-  color: #a99cff;
+  background: color-mix(in srgb, var(--a-mid) 18%, transparent);
+  border-color: var(--a-mid);
+  color: var(--tx);
 }
 .save-btn.saving {
   opacity: 0.7;
@@ -188,26 +202,31 @@ function onInput(event: Event) {
 .health-pill {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--line, #1e2030);
+  border: 1px solid var(--line);
   border-radius: 999px;
   padding: 2px 8px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 .health-pill.created {
-  color: #51d49a;
-  border-color: rgba(81,212,154,.3);
+  color: var(--st-work);
+  border-color: color-mix(in srgb, var(--st-work) 30%, transparent);
 }
 .health-pill.not_applicable {
-  color: #d4b26a;
-  border-color: rgba(212,178,106,.25);
+  color: var(--st-queue);
+  border-color: color-mix(in srgb, var(--st-queue) 25%, transparent);
 }
 .health-pill.not_supported {
-  color: #9aa4bb;
-  border-color: rgba(154,164,187,.25);
+  color: var(--tx-2);
+  border-color: color-mix(in srgb, var(--tx-2) 25%, transparent);
+}
+.health-pill.verified {
+  color: var(--st-work);
+  border-color: color-mix(in srgb, var(--st-work) 30%, transparent);
+  background: var(--status-work-bg);
 }
 .health-note {
-  color: #7e8799;
+  color: var(--tx-3);
 }
 
 .config-editor {
@@ -215,9 +234,9 @@ function onInput(event: Event) {
   min-height: 400px;
   padding: 16px;
   border: none;
-  background: #0d0e17;
-  color: #c8cbe0;
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  background: var(--field-surface);
+  color: var(--tx);
+  font-family: var(--font-mono-v2);
   font-size: 12px;
   line-height: 1.6;
   resize: vertical;
@@ -226,7 +245,11 @@ function onInput(event: Event) {
   box-sizing: border-box;
 }
 .config-editor:focus {
-  background: #0f101b;
+  background: var(--field-surface-focus);
+}
+.config-editor:read-only {
+  cursor: default;
+  color: var(--tx-2);
 }
 
 .spin {

frontend/src/components/config/ConfigTabs.vue

@@ -18,8 +18,10 @@ function tabLabel(tab: string): string {
     <button
       v-for="(tab, idx) in tabs"
       :key="tab"
+      type="button"
       class="config-tab"
       :class="{ active: activeTab === idx }"
+      :aria-current="activeTab === idx ? 'page' : undefined"
       @click="$emit('switchTab', idx)"
     >
       {{ tabLabel(tab) }}
@@ -31,18 +33,18 @@ function tabLabel(tab: string): string {
 .config-tabs {
   display: flex;
   gap: 1px;
-  background: var(--line, #1e2030);
+  background: var(--line);
   border-radius: 10px 10px 0 0;
   overflow: hidden;
-  border: 1px solid var(--line, #1e2030);
+  border: 1px solid var(--line);
   border-bottom: none;
 }
 .config-tab {
   flex: 1;
   padding: 10px 12px;
-  background: var(--panel, #13141f);
+  background: var(--glass);
   border: none;
-  color: #6b7385;
+  color: var(--tx-3);
   font-size: 10.5px;
   font-weight: 500;
   cursor: pointer;
@@ -52,12 +54,12 @@ function tabLabel(tab: string): string {
   font-family: inherit;
 }
 .config-tab:hover {
-  background: rgba(139,124,246,.06);
-  color: #a0a8b8;
+  background: color-mix(in srgb, var(--a-mid) 6%, transparent);
+  color: var(--tx-2);
 }
 .config-tab.active {
-  background: rgba(139,124,246,.1);
-  color: #c8cbe0;
+  background: color-mix(in srgb, var(--a-mid) 10%, transparent);
+  color: var(--tx);
   font-weight: 600;
 }
 

frontend/src/components/config/StandingOrdersEditor.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import { Bot, CheckCircle2, RotateCcw, ShieldCheck, Sparkles } from '@lucide/vue'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  content: string
+  readOnly?: boolean
+}>()
+
+const emit = defineEmits<{
+  apply: [content: string]
+}>()
+
+const startMarker = '<!-- NEXUS:STANDING_ORDERS:START -->'
+const endMarker = '<!-- NEXUS:STANDING_ORDERS:END -->'
+const goals = ref('')
+const triggers = ref('')
+const allowedActions = ref('')
+const approvalBoundaries = ref('')
+const escalation = ref('')
+const verification = ref('')
+const initializedFromContent = ref('')
+
+const hasControlledSection = computed(() =>
+  props.content.includes(startMarker) && props.content.includes(endMarker),
+)
+
+function bulletLines(value: string) {
+  return value
+    .split('\n')
+    .map(line => line.trim().replace(/^[-*]\s*/, ''))
+    .filter(Boolean)
+}
+
+function renderList(value: string) {
+  const lines = bulletLines(value)
+  return lines.length ? lines.map(line => `- ${line}`).join('\n') : '- Noch festzulegen'
+}
+
+function extractSection(source: string, title: string) {
+  const escaped = title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const match = source.match(new RegExp(`### ${escaped}\\s*\\n([\\s\\S]*?)(?=\\n### |$)`))
+  if (!match) return ''
+  return match[1]
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => /^[-*]\s+/.test(line))
+    .map(line => line.replace(/^[-*]\s+/, ''))
+    .join('\n')
+}
+
+function hydrate() {
+  if (initializedFromContent.value === props.content) return
+  initializedFromContent.value = props.content
+  const start = props.content.indexOf(startMarker)
+  const end = props.content.indexOf(endMarker)
+  if (start < 0 || end <= start) {
+    goals.value = ''
+    triggers.value = ''
+    allowedActions.value = ''
+    approvalBoundaries.value = ''
+    escalation.value = ''
+    verification.value = ''
+    return
+  }
+
+  const block = props.content.slice(start + startMarker.length, end)
+  goals.value = extractSection(block, 'Ziele')
+  triggers.value = extractSection(block, 'Trigger')
+  allowedActions.value = extractSection(block, 'Erlaubte Aktionen')
+  approvalBoundaries.value = extractSection(block, 'Approval-Grenzen')
+  escalation.value = extractSection(block, 'Eskalation')
+  verification.value = extractSection(block, 'Verify und Report')
+}
+
+function buildBlock() {
+  return [
+    startMarker,
+    '## Nexus Standing Orders',
+    '',
+    '> Von Nexus verwalteter, überprüfbarer Agent-First-Abschnitt. Änderungen gelten erst nach dem Speichern und bestätigten OpenClaw-Read-back.',
+    '',
+    '### Ziele',
+    renderList(goals.value),
+    '',
+    '### Trigger',
+    renderList(triggers.value),
+    '',
+    '### Erlaubte Aktionen',
+    renderList(allowedActions.value),
+    '',
+    '### Approval-Grenzen',
+    renderList(approvalBoundaries.value),
+    '',
+    '### Eskalation',
+    renderList(escalation.value),
+    '',
+    '### Verify und Report',
+    renderList(verification.value),
+    endMarker,
+  ].join('\n')
+}
+
+function apply() {
+  const block = buildBlock()
+  const start = props.content.indexOf(startMarker)
+  const end = props.content.indexOf(endMarker)
+  const next = start >= 0 && end > start
+    ? `${props.content.slice(0, start)}${block}${props.content.slice(end + endMarker.length)}`
+    : `${props.content.trimEnd()}\n\n${block}\n`
+  emit('apply', next)
+}
+
+function reset() {
+  initializedFromContent.value = ''
+  hydrate()
+}
+
+watch(() => props.content, hydrate, { immediate: true })
+</script>
+
+<template>
+  <section class="standing-orders" aria-labelledby="standing-orders-title">
+    <header>
+      <div>
+        <span class="standing-orders__eyebrow">AGENT-FIRST CONTRACT</span>
+        <h3 id="standing-orders-title">
+          <Bot :size="17" aria-hidden="true" />
+          Standing Orders
+        </h3>
+        <p>
+          Nexus pflegt nur diesen markierten Abschnitt in <code>AGENTS.md</code>.
+          Der übrige Agent-Inhalt bleibt unangetastet.
+        </p>
+      </div>
+      <span class="standing-orders__state" :class="{ ready: hasControlledSection }">
+        <CheckCircle2 v-if="hasControlledSection" :size="13" aria-hidden="true" />
+        <Sparkles v-else :size="13" aria-hidden="true" />
+        {{ hasControlledSection ? 'Vorhanden' : 'Neu' }}
+      </span>
+    </header>
+
+    <div class="standing-orders__grid">
+      <label>
+        <span>Ziele</span>
+        <textarea v-model="goals" rows="4" :disabled="readOnly" placeholder="Ein Ziel pro Zeile" />
+      </label>
+      <label>
+        <span>Trigger</span>
+        <textarea v-model="triggers" rows="4" :disabled="readOnly" placeholder="Wann der Agent selbstständig beginnt" />
+      </label>
+      <label>
+        <span>Erlaubte Aktionen</span>
+        <textarea v-model="allowedActions" rows="4" :disabled="readOnly" placeholder="Aktionen innerhalb des delegierten Scopes" />
+      </label>
+      <label>
+        <span>Approval-Grenzen</span>
+        <textarea v-model="approvalBoundaries" rows="4" :disabled="readOnly" placeholder="Was immer explizite Freigabe benötigt" />
+      </label>
+      <label>
+        <span>Eskalation</span>
+        <textarea v-model="escalation" rows="4" :disabled="readOnly" placeholder="Wann und an wen eskaliert wird" />
+      </label>
+      <label>
+        <span>Verify und Report</span>
+        <textarea v-model="verification" rows="4" :disabled="readOnly" placeholder="Pflichtprüfungen und Ergebnisformat" />
+      </label>
+    </div>
+
+    <footer>
+      <span>
+        <ShieldCheck :size="14" aria-hidden="true" />
+        Die Vorschau wird in den normalen, hash-geschützten Datei-Editor übernommen.
+      </span>
+      <div>
+        <button type="button" class="nexus-button" :disabled="readOnly" @click="reset">
+          <RotateCcw :size="13" aria-hidden="true" />
+          Zurücksetzen
+        </button>
+        <button type="button" class="nexus-button nexus-button--primary" :disabled="readOnly" @click="apply">
+          <Sparkles :size="13" aria-hidden="true" />
+          In AGENTS.md übernehmen
+        </button>
+      </div>
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.standing-orders {
+  display: grid;
+  gap: 13px;
+  margin-top: 12px;
+  padding: 15px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r);
+  background: linear-gradient(145deg, var(--glass), var(--accent-wash));
+}
+
+.standing-orders header,
+.standing-orders footer,
+.standing-orders footer > div {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.standing-orders__eyebrow {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--a-purple);
+  font: 10px var(--font-mono-v2);
+  letter-spacing: .12em;
+}
+
+.standing-orders h3 {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  margin: 0;
+  color: var(--tx);
+  font: 700 15px var(--font-display);
+}
+
+.standing-orders header p {
+  max-width: 630px;
+  margin: 5px 0 0;
+  color: var(--tx-2);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.standing-orders code {
+  font-family: var(--font-mono-v2);
+}
+
+.standing-orders__state {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--tx-3);
+  font: 10px var(--font-mono-v2);
+}
+
+.standing-orders__state.ready {
+  border-color: var(--status-work-line);
+  background: var(--status-work-bg);
+  color: var(--st-work);
+}
+
+.standing-orders__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.standing-orders label {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.standing-orders label > span {
+  color: var(--tx-2);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.standing-orders textarea {
+  width: 100%;
+  min-width: 0;
+  resize: vertical;
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  outline: 0;
+  background: var(--field-surface);
+  color: var(--tx);
+  font: 11px/1.5 var(--font-body);
+}
+
+.standing-orders textarea:focus-visible {
+  border-color: var(--a-blue);
+  box-shadow: var(--focus-ring);
+}
+
+.standing-orders footer {
+  align-items: center;
+}
+
+.standing-orders footer > span {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  color: var(--tx-3);
+  font: 10px var(--font-mono-v2);
+}
+
+@media (max-width: 768px) {
+  .standing-orders__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .standing-orders header,
+  .standing-orders footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .standing-orders footer > div {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>