feat: ship agent-first mission control v0.2.57
This commit is contained in:
AzuTear
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user