Task work log, inline writing assistant, task editor sidebar layout
Backend: - Migration 0021: task_logs table (FK → notes + users, CASCADE, indexed) - models/task_log.py: SQLAlchemy model with to_dict() - services/task_logs.py: CRUD with ownership checks, _UNSET sentinel for optional duration clear - routes/task_logs.py: GET/POST/PATCH/DELETE /api/tasks/<id>/logs - services/tools.py: log_work LLM tool (resolves task by title, creates log entry) - services/generation_task.py: retry assist generation up to 3× on HTTP 500 Frontend: - types/task.ts: TaskLog interface - TaskLogSection.vue: chronological work log with date+time timestamps, duration badge, inline edit, autofocus - InlineAssistPanel.vue: streaming preview + diff review rendered inline in editor column - useAssist.ts: removed chatStore.chatReady gate; toast notifications for errors - NoteEditorView.vue + TaskEditorView.vue: inline assist panel, aside restricted to idle state - TaskEditorView.vue: two-column layout (editor+log left, metadata sidebar right), body defaults to Preview, sidebarOpen accordion for mobile - editor-shared.css: .assist-active-hint style Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import type { DiffLine } from "@/composables/useAssist";
|
||||
|
||||
const props = defineProps<{
|
||||
phase: "streaming" | "review";
|
||||
label: string;
|
||||
streamingText: string;
|
||||
diff: DiffLine[];
|
||||
proposedText: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
accept: [];
|
||||
reject: [];
|
||||
cancel: [];
|
||||
}>();
|
||||
|
||||
const showFullText = ref(false);
|
||||
|
||||
const renderedStreaming = computed(() => renderMarkdown(props.streamingText));
|
||||
const renderedProposed = computed(() => renderMarkdown(props.proposedText));
|
||||
|
||||
const markers: Record<DiffLine["type"], string> = {
|
||||
equal: " ",
|
||||
delete: "−",
|
||||
insert: "+",
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ── Streaming ───────────────────────────────────────────────── -->
|
||||
<div v-if="phase === 'streaming'" class="iap iap-streaming">
|
||||
<div class="iap-header">
|
||||
<span class="iap-pulse"></span>
|
||||
<span class="iap-label">{{ label }}</span>
|
||||
<button class="iap-btn-cancel" @click="emit('cancel')">Cancel</button>
|
||||
</div>
|
||||
<div class="iap-stream-preview prose" v-html="renderedStreaming"></div>
|
||||
<div v-if="!streamingText" class="iap-waiting">Waiting for model…</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Review ─────────────────────────────────────────────────── -->
|
||||
<div v-else-if="phase === 'review'" class="iap iap-review">
|
||||
<div class="iap-header">
|
||||
<span class="iap-review-title">Proposed changes</span>
|
||||
<button class="iap-btn-toggle" @click="showFullText = !showFullText">
|
||||
{{ showFullText ? "Show diff" : "Show full text" }}
|
||||
</button>
|
||||
<div class="iap-actions">
|
||||
<button class="iap-btn-accept" @click="emit('accept')">✓ Accept</button>
|
||||
<button class="iap-btn-reject" @click="emit('reject')">✗ Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diff view -->
|
||||
<div v-if="!showFullText" class="iap-diff">
|
||||
<div
|
||||
v-for="(line, i) in diff"
|
||||
:key="i"
|
||||
:class="['iap-diff-line', `iap-diff-${line.type}`]"
|
||||
>
|
||||
<span class="iap-diff-marker">{{ markers[line.type] }}</span>
|
||||
<span class="iap-diff-text">{{ line.text }}</span>
|
||||
</div>
|
||||
<div v-if="!diff.length" class="iap-diff-empty">No changes.</div>
|
||||
</div>
|
||||
|
||||
<!-- Full text view -->
|
||||
<div v-else class="iap-full-text prose" v-html="renderedProposed"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.iap {
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.iap-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
/* ── Streaming ── */
|
||||
.iap-streaming {
|
||||
border-color: var(--color-primary, #6366f1);
|
||||
}
|
||||
.iap-streaming .iap-header {
|
||||
background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--color-bg-secondary));
|
||||
}
|
||||
|
||||
.iap-pulse {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary, #6366f1);
|
||||
flex-shrink: 0;
|
||||
animation: iap-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes iap-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.8); }
|
||||
}
|
||||
|
||||
.iap-label {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.iap-btn-cancel {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.15rem 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.iap-btn-cancel:hover {
|
||||
border-color: var(--color-danger, #e74c3c);
|
||||
color: var(--color-danger, #e74c3c);
|
||||
}
|
||||
|
||||
.iap-stream-preview {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
min-height: 2.5rem;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.iap-waiting {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Review ── */
|
||||
.iap-review-title {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.iap-btn-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.15rem 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.78rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.iap-btn-toggle:hover {
|
||||
border-color: var(--color-primary, #6366f1);
|
||||
color: var(--color-primary, #6366f1);
|
||||
}
|
||||
|
||||
.iap-actions {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.iap-btn-accept,
|
||||
.iap-btn-reject {
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.2rem 0.65rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
.iap-btn-accept {
|
||||
background: var(--color-success, #22c55e);
|
||||
color: #fff;
|
||||
}
|
||||
.iap-btn-accept:hover { opacity: 0.85; }
|
||||
|
||||
.iap-btn-reject {
|
||||
background: var(--color-bg-card, var(--color-bg));
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.iap-btn-reject:hover {
|
||||
border-color: var(--color-danger, #e74c3c);
|
||||
color: var(--color-danger, #e74c3c);
|
||||
}
|
||||
|
||||
/* ── Diff ── */
|
||||
.iap-diff {
|
||||
font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.6;
|
||||
max-height: 440px;
|
||||
overflow-y: auto;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
.iap-diff-line {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.iap-diff-equal { color: var(--color-text-muted); }
|
||||
.iap-diff-delete {
|
||||
background: color-mix(in srgb, var(--color-danger, #e74c3c) 10%, transparent);
|
||||
color: var(--color-danger, #e74c3c);
|
||||
}
|
||||
.iap-diff-insert {
|
||||
background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent);
|
||||
color: var(--color-success, #22c55e);
|
||||
}
|
||||
|
||||
.iap-diff-marker {
|
||||
width: 1ch;
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.iap-diff-empty {
|
||||
padding: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ── Full text ── */
|
||||
.iap-full-text {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
max-height: 440px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user