feat(frontend): gate body editor when task body is auto-maintained
When consolidated_at is set on a task, the editor: - shows a banner above the body indicating the body is auto-summarized - hides the Write tab; locks the body view to read-only preview - exposes a Re-consolidate button that calls POST /api/tasks/:id/consolidate and refreshes the body from the response Pre-consolidation behavior is unchanged — the Write tab and TiptapEditor remain available.
This commit is contained in:
@@ -109,6 +109,29 @@ async function toggleSubTask(sub: SubTask) {
|
|||||||
}
|
}
|
||||||
const showPreview = ref(false);
|
const showPreview = ref(false);
|
||||||
const sidebarOpen = ref(true);
|
const sidebarOpen = ref(true);
|
||||||
|
const reconsolidating = ref(false);
|
||||||
|
|
||||||
|
// Body is machine-maintained once a consolidation pass has run. The editor
|
||||||
|
// is gated to read-only in that state; the user can re-consolidate or rely
|
||||||
|
// on log_work entries flowing into the next auto pass.
|
||||||
|
const isBodyAutoMaintained = computed(() => consolidatedAt.value !== null);
|
||||||
|
|
||||||
|
async function reconsolidate() {
|
||||||
|
if (!taskId.value || reconsolidating.value) return;
|
||||||
|
reconsolidating.value = true;
|
||||||
|
try {
|
||||||
|
const { consolidateTask } = await import("@/api/client");
|
||||||
|
const updated = await consolidateTask(taskId.value);
|
||||||
|
body.value = updated.body;
|
||||||
|
consolidatedAt.value = updated.consolidated_at ?? null;
|
||||||
|
savedBody = body.value;
|
||||||
|
toast.show("Task summary refreshed");
|
||||||
|
} catch {
|
||||||
|
toast.show("Failed to re-consolidate", "error");
|
||||||
|
} finally {
|
||||||
|
reconsolidating.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||||
const titleRef = ref<HTMLInputElement | null>(null);
|
const titleRef = ref<HTMLInputElement | null>(null);
|
||||||
const tiptapEditor = computed<Editor | null>(() => {
|
const tiptapEditor = computed<Editor | null>(() => {
|
||||||
@@ -462,13 +485,33 @@ useEditorGuards(dirty, save);
|
|||||||
<!-- ── Main column ─────────────────────────────────────────── -->
|
<!-- ── Main column ─────────────────────────────────────────── -->
|
||||||
<div class="task-main" @keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()">
|
<div class="task-main" @keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()">
|
||||||
|
|
||||||
<!-- Write / Preview tabs + toolbar sit above the editor -->
|
<!-- Auto-summary banner when consolidation has run on this task. -->
|
||||||
|
<div v-if="isBodyAutoMaintained" class="auto-summary-banner-editor">
|
||||||
|
<span class="auto-summary-icon" aria-hidden="true">✦</span>
|
||||||
|
Auto-summarized from work logs.
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-reconsolidate"
|
||||||
|
:disabled="reconsolidating"
|
||||||
|
@click="reconsolidate"
|
||||||
|
>
|
||||||
|
{{ reconsolidating ? "Re-consolidating…" : "Re-consolidate" }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Write / Preview tabs + toolbar sit above the editor.
|
||||||
|
Write tab hidden when body is machine-maintained — use Re-consolidate
|
||||||
|
or edit work logs instead. -->
|
||||||
<div class="body-tabs-row">
|
<div class="body-tabs-row">
|
||||||
<div class="editor-tabs">
|
<div class="editor-tabs">
|
||||||
<button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
|
<button
|
||||||
<button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
|
v-if="!isBodyAutoMaintained"
|
||||||
|
:class="['tab', { active: !showPreview }]"
|
||||||
|
@click="showPreview = false"
|
||||||
|
>Write</button>
|
||||||
|
<button :class="['tab', { active: showPreview || isBodyAutoMaintained }]" @click="showPreview = true">Preview</button>
|
||||||
</div>
|
</div>
|
||||||
<MarkdownToolbar v-show="!showPreview && assist.state.value === 'idle'" :editor="tiptapEditor" />
|
<MarkdownToolbar v-show="!showPreview && !isBodyAutoMaintained && assist.state.value === 'idle'" :editor="tiptapEditor" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Streaming preview -->
|
<!-- Streaming preview -->
|
||||||
@@ -482,9 +525,14 @@ useEditorGuards(dirty, save);
|
|||||||
<DiffView :diff="assist.diff.value" class="main-diff" />
|
<DiffView :diff="assist.diff.value" class="main-diff" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Normal: editor or preview -->
|
<!-- Normal: editor or preview. When body is machine-maintained,
|
||||||
|
always render the preview (read-only) — never the editor. -->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div v-show="!showPreview" class="body-editor-wrap">
|
<div
|
||||||
|
v-if="!isBodyAutoMaintained"
|
||||||
|
v-show="!showPreview"
|
||||||
|
class="body-editor-wrap"
|
||||||
|
>
|
||||||
<TiptapEditor
|
<TiptapEditor
|
||||||
ref="editorRef"
|
ref="editorRef"
|
||||||
:modelValue="body"
|
:modelValue="body"
|
||||||
@@ -494,7 +542,11 @@ useEditorGuards(dirty, save);
|
|||||||
@escape="titleRef?.focus()"
|
@escape="titleRef?.focus()"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="showPreview" class="preview-pane prose" v-html="renderedPreview" />
|
<div
|
||||||
|
v-show="showPreview || isBodyAutoMaintained"
|
||||||
|
class="preview-pane prose"
|
||||||
|
v-html="renderedPreview"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||||
@@ -1028,4 +1080,43 @@ useEditorGuards(dirty, save);
|
|||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--color-primary, #6366f1);
|
border-color: var(--color-primary, #6366f1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Auto-summary banner + re-consolidate button ─────────────────────────── */
|
||||||
|
.auto-summary-banner-editor {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
padding: 0.45rem 0.7rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
|
||||||
|
background: rgba(99, 102, 241, 0.06);
|
||||||
|
border-left: 2px solid var(--color-primary, #6366f1);
|
||||||
|
border-radius: var(--radius-sm, 4px);
|
||||||
|
}
|
||||||
|
.auto-summary-banner-editor .auto-summary-icon {
|
||||||
|
color: var(--color-primary, #6366f1);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.btn-reconsolidate {
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0.25rem 0.7rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-style: normal;
|
||||||
|
color: inherit;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease;
|
||||||
|
}
|
||||||
|
.btn-reconsolidate:hover:not(:disabled) {
|
||||||
|
background: rgba(99, 102, 241, 0.12);
|
||||||
|
border-color: var(--color-primary, #6366f1);
|
||||||
|
}
|
||||||
|
.btn-reconsolidate:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user