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,28 @@
|
||||
"""Add task_logs table."""
|
||||
|
||||
from alembic import op
|
||||
|
||||
revision = "0021"
|
||||
down_revision = "0020"
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.execute("""
|
||||
CREATE TABLE IF NOT EXISTS task_logs (
|
||||
id SERIAL PRIMARY KEY,
|
||||
task_id INTEGER NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
|
||||
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
|
||||
content TEXT NOT NULL,
|
||||
duration_minutes INTEGER,
|
||||
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT NOW(),
|
||||
updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT NOW()
|
||||
)
|
||||
""")
|
||||
op.execute("CREATE INDEX IF NOT EXISTS ix_task_logs_task_id ON task_logs(task_id)")
|
||||
op.execute("CREATE INDEX IF NOT EXISTS ix_task_logs_user_id ON task_logs(user_id)")
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.execute("DROP INDEX IF EXISTS ix_task_logs_user_id")
|
||||
op.execute("DROP INDEX IF EXISTS ix_task_logs_task_id")
|
||||
op.execute("DROP TABLE IF EXISTS task_logs")
|
||||
@@ -365,6 +365,15 @@
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Active hint shown in the panel while output is inline */
|
||||
.assist-active-hint {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.assist-error {
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,338 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { apiGet, apiPost, apiPatch, apiDelete } from "@/api/client";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import type { TaskLog } from "@/types/task";
|
||||
|
||||
const props = defineProps<{ taskId: number }>();
|
||||
|
||||
const logs = ref<TaskLog[]>([]);
|
||||
const newContent = ref("");
|
||||
const newDuration = ref("");
|
||||
const submitting = ref(false);
|
||||
|
||||
const editingId = ref<number | null>(null);
|
||||
const editContent = ref("");
|
||||
const editDuration = ref("");
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
const datePart = d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
|
||||
const timePart = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
|
||||
return `${datePart}, ${timePart}`;
|
||||
}
|
||||
|
||||
function formatDuration(minutes: number): string {
|
||||
if (minutes < 60) return `${minutes} min`;
|
||||
const h = Math.floor(minutes / 60);
|
||||
const m = minutes % 60;
|
||||
return m > 0 ? `${h}h ${m}m` : `${h}h`;
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
try {
|
||||
const data = await apiGet<{ logs: TaskLog[] }>(`/api/tasks/${props.taskId}/logs`);
|
||||
logs.value = data.logs;
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
async function submitLog() {
|
||||
const content = newContent.value.trim();
|
||||
if (!content || submitting.value) return;
|
||||
submitting.value = true;
|
||||
try {
|
||||
const duration = newDuration.value ? parseInt(newDuration.value) : null;
|
||||
const log = await apiPost<TaskLog>(`/api/tasks/${props.taskId}/logs`, {
|
||||
content,
|
||||
duration_minutes: isNaN(duration as number) ? null : duration,
|
||||
});
|
||||
logs.value = [...logs.value, log];
|
||||
newContent.value = "";
|
||||
newDuration.value = "";
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(log: TaskLog) {
|
||||
editingId.value = log.id;
|
||||
editContent.value = log.content;
|
||||
editDuration.value = log.duration_minutes != null ? String(log.duration_minutes) : "";
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId.value = null;
|
||||
editContent.value = "";
|
||||
editDuration.value = "";
|
||||
}
|
||||
|
||||
async function saveEdit(log: TaskLog) {
|
||||
const content = editContent.value.trim();
|
||||
if (!content) return;
|
||||
const duration = editDuration.value ? parseInt(editDuration.value) : null;
|
||||
try {
|
||||
const updated = await apiPatch<TaskLog>(`/api/tasks/${props.taskId}/logs/${log.id}`, {
|
||||
content,
|
||||
duration_minutes: isNaN(duration as number) ? null : duration,
|
||||
});
|
||||
const idx = logs.value.findIndex((l) => l.id === log.id);
|
||||
if (idx !== -1) logs.value[idx] = updated;
|
||||
cancelEdit();
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteLog(log: TaskLog) {
|
||||
try {
|
||||
await apiDelete(`/api/tasks/${props.taskId}/logs/${log.id}`);
|
||||
logs.value = logs.value.filter((l) => l.id !== log.id);
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadLogs);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="log-section">
|
||||
<div class="log-header">Work Log</div>
|
||||
|
||||
<div v-if="logs.length === 0" class="log-empty">No entries yet.</div>
|
||||
|
||||
<div v-for="log in logs" :key="log.id" class="log-entry">
|
||||
<template v-if="editingId === log.id">
|
||||
<textarea
|
||||
v-model="editContent"
|
||||
class="log-textarea"
|
||||
rows="3"
|
||||
placeholder="What did you do?"
|
||||
@keydown.ctrl.enter="saveEdit(log)"
|
||||
></textarea>
|
||||
<div class="log-edit-controls">
|
||||
<input
|
||||
v-model="editDuration"
|
||||
type="number"
|
||||
min="1"
|
||||
class="log-duration-input"
|
||||
placeholder="min"
|
||||
/>
|
||||
<button class="btn-log-save" @click="saveEdit(log)">Save</button>
|
||||
<button class="btn-log-cancel" @click="cancelEdit">Cancel</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="log-entry-meta">
|
||||
<span class="log-date">{{ formatDate(log.created_at) }}</span>
|
||||
<span v-if="log.duration_minutes" class="log-duration-badge">
|
||||
{{ formatDuration(log.duration_minutes) }}
|
||||
</span>
|
||||
<div class="log-entry-actions">
|
||||
<button class="btn-log-edit" @click="startEdit(log)" title="Edit">Edit</button>
|
||||
<button class="btn-log-delete" @click="deleteLog(log)" title="Delete">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-content prose" v-html="renderMarkdown(log.content)"></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="log-add">
|
||||
<textarea
|
||||
v-model="newContent"
|
||||
class="log-textarea"
|
||||
rows="3"
|
||||
placeholder="What did you do?..."
|
||||
@keydown.ctrl.enter="submitLog"
|
||||
autofocus
|
||||
></textarea>
|
||||
<div class="log-add-controls">
|
||||
<label class="log-duration-label">
|
||||
min:
|
||||
<input
|
||||
v-model="newDuration"
|
||||
type="number"
|
||||
min="1"
|
||||
class="log-duration-input"
|
||||
placeholder="—"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
class="btn-log-submit"
|
||||
@click="submitLog"
|
||||
:disabled="!newContent.trim() || submitting"
|
||||
>
|
||||
{{ submitting ? "Saving..." : "Log entry" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.log-section {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg-secondary);
|
||||
padding: 0.6rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.log-empty {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.log-entry-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.log-date {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.log-duration-badge {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: 99px;
|
||||
padding: 0.1rem 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-entry-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-log-edit,
|
||||
.btn-log-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
padding: 0.1rem 0.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-log-edit:hover { color: var(--color-primary); }
|
||||
.btn-log-delete:hover { color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.log-content {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content :deep(p) { margin: 0; }
|
||||
|
||||
.log-add {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.log-textarea {
|
||||
width: 100%;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.log-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.log-add-controls,
|
||||
.log-edit-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.log-duration-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.log-duration-input {
|
||||
width: 5rem;
|
||||
padding: 0.3rem 0.4rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-duration-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-log-submit,
|
||||
.btn-log-save {
|
||||
margin-left: auto;
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn-log-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-log-cancel {
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ref, computed, watch, type Ref } from "vue";
|
||||
import { apiPost, apiSSEStream, type SSEStreamHandle } from "@/api/client";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import {
|
||||
parseMarkdownSections,
|
||||
type MarkdownSection,
|
||||
@@ -42,7 +42,7 @@ function computeDiff(a: string, b: string): DiffLine[] {
|
||||
}
|
||||
|
||||
export function useAssist(body: Ref<string>) {
|
||||
const chatStore = useChatStore();
|
||||
const toast = useToastStore();
|
||||
|
||||
const state = ref<AssistState>("idle");
|
||||
const sections = ref<MarkdownSection[]>([]);
|
||||
@@ -80,7 +80,6 @@ export function useAssist(body: Ref<string>) {
|
||||
() =>
|
||||
target.value !== null &&
|
||||
instruction.value.trim().length > 0 &&
|
||||
chatStore.chatReady &&
|
||||
state.value !== "streaming"
|
||||
);
|
||||
|
||||
@@ -154,6 +153,7 @@ export function useAssist(body: Ref<string>) {
|
||||
}
|
||||
if (evt.event === "error") {
|
||||
error.value = evt.data.error as string;
|
||||
toast.show("Assist failed: " + error.value, "error");
|
||||
state.value = "idle";
|
||||
streamHandle = null;
|
||||
}
|
||||
@@ -173,6 +173,7 @@ export function useAssist(body: Ref<string>) {
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Request failed";
|
||||
toast.show("Assist failed: " + error.value, "error");
|
||||
state.value = "idle";
|
||||
streamHandle = null;
|
||||
}
|
||||
@@ -202,6 +203,7 @@ export function useAssist(body: Ref<string>) {
|
||||
const currentSlice = body.value.slice(t.startOffset, t.endOffset);
|
||||
if (currentSlice !== t.text) {
|
||||
error.value = "The document changed since this suggestion was made. Please clear and try again.";
|
||||
toast.show(error.value, "error");
|
||||
state.value = "idle";
|
||||
return body.value;
|
||||
}
|
||||
|
||||
@@ -4,3 +4,12 @@ export interface TaskListResponse {
|
||||
tasks: import("./note").Note[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface TaskLog {
|
||||
id: number;
|
||||
task_id: number;
|
||||
content: string;
|
||||
duration_minutes: number | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import TiptapEditor from "@/components/TiptapEditor.vue";
|
||||
import TagInput from "@/components/TagInput.vue";
|
||||
import ProjectSelector from "@/components/ProjectSelector.vue";
|
||||
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
||||
import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -41,8 +42,13 @@ const renderedPreview = computed(() => renderMarkdown(body.value));
|
||||
// AI Assist
|
||||
const assist = useAssist(body);
|
||||
|
||||
const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
|
||||
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
|
||||
const assistLabel = computed(() => {
|
||||
if (assist.isProofreading.value) return "Proofreading document...";
|
||||
const t = assist.target.value;
|
||||
if (!t) return "Generating...";
|
||||
const heading = t.text.split("\n")[0];
|
||||
return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
|
||||
});
|
||||
|
||||
// Assist panel toggle (persisted)
|
||||
const ASSIST_KEY = 'fa-assist-open';
|
||||
@@ -80,9 +86,6 @@ function handleInlineAssist() {
|
||||
nextTick(() => instructionRef.value?.focus());
|
||||
}
|
||||
|
||||
// Diff view toggle
|
||||
const showFullProposed = ref(false);
|
||||
|
||||
function handleAssistAccept() {
|
||||
const newBody = assist.accept();
|
||||
if (newBody !== body.value) {
|
||||
@@ -90,7 +93,6 @@ function handleAssistAccept() {
|
||||
markDirty();
|
||||
toast.show("Section updated");
|
||||
}
|
||||
showFullProposed.value = false;
|
||||
}
|
||||
|
||||
function truncateTarget(text: string, max = 60): string {
|
||||
@@ -366,7 +368,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
<div class="editor-body">
|
||||
<div class="editor-main">
|
||||
<div v-show="!showPreview">
|
||||
<!-- Inline assist output: streaming preview + review diff -->
|
||||
<InlineAssistPanel
|
||||
v-if="assist.state.value !== 'idle'"
|
||||
:phase="assist.state.value as 'streaming' | 'review'"
|
||||
:label="assistLabel"
|
||||
:streaming-text="assist.streamingText.value"
|
||||
:diff="assist.diff.value"
|
||||
:proposed-text="assist.proposedText.value"
|
||||
@accept="handleAssistAccept"
|
||||
@reject="assist.reject()"
|
||||
@cancel="assist.clearSelection()"
|
||||
/>
|
||||
|
||||
<!-- Editor hidden during review so diff takes full column -->
|
||||
<div v-show="!showPreview && assist.state.value !== 'review'">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
@@ -377,7 +393,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview"
|
||||
v-show="showPreview && assist.state.value !== 'review'"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
@@ -442,41 +458,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
<!-- ERROR -->
|
||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||
|
||||
<!-- STREAMING -->
|
||||
<div v-if="assist.state.value === 'streaming'" class="assist-streaming">
|
||||
<div class="assist-streaming-label">
|
||||
{{ assist.isProofreading.value
|
||||
? 'Proofreading document...'
|
||||
: `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
|
||||
</div>
|
||||
<div class="assist-preview-box prose" v-html="renderedStreaming"></div>
|
||||
<span class="typing-indicator">●●●</span>
|
||||
</div>
|
||||
|
||||
<!-- REVIEW -->
|
||||
<div v-if="assist.state.value === 'review'" class="assist-review">
|
||||
<div class="assist-review-header">
|
||||
<span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
|
||||
<button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
|
||||
{{ showFullProposed ? 'Show diff' : 'Show full text' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!showFullProposed" class="diff-view">
|
||||
<div
|
||||
v-for="(line, i) in assist.diff.value"
|
||||
:key="i"
|
||||
:class="['diff-line', `diff-${line.type}`]"
|
||||
>
|
||||
<span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
|
||||
<span class="diff-text">{{ line.text }}</span>
|
||||
</div>
|
||||
<div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
|
||||
</div>
|
||||
<div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
|
||||
<button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
|
||||
</div>
|
||||
<!-- Hint when active (output shown inline in editor area) -->
|
||||
<div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
|
||||
{{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,8 @@ import TiptapEditor from "@/components/TiptapEditor.vue";
|
||||
import TagInput from "@/components/TagInput.vue";
|
||||
import ProjectSelector from "@/components/ProjectSelector.vue";
|
||||
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
||||
import TaskLogSection from "@/components/TaskLogSection.vue";
|
||||
import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -90,7 +92,8 @@ async function toggleSubTask(sub: SubTask) {
|
||||
toast.show("Failed to update sub-task", "error");
|
||||
}
|
||||
}
|
||||
const showPreview = ref(false);
|
||||
const showPreview = ref(true);
|
||||
const sidebarOpen = ref(true);
|
||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||
const tiptapEditor = computed<Editor | null>(() => {
|
||||
return (editorRef.value?.editor as Editor | undefined) ?? null;
|
||||
@@ -106,8 +109,13 @@ const renderedPreview = computed(() => renderMarkdown(body.value));
|
||||
// AI Assist
|
||||
const assist = useAssist(body);
|
||||
|
||||
const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
|
||||
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
|
||||
const assistLabel = computed(() => {
|
||||
if (assist.isProofreading.value) return "Proofreading document...";
|
||||
const t = assist.target.value;
|
||||
if (!t) return "Generating...";
|
||||
const heading = t.text.split("\n")[0];
|
||||
return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
|
||||
});
|
||||
|
||||
// Assist panel toggle (persisted)
|
||||
const ASSIST_KEY = 'fa-assist-open';
|
||||
@@ -145,9 +153,6 @@ function handleInlineAssist() {
|
||||
nextTick(() => instructionRef.value?.focus());
|
||||
}
|
||||
|
||||
// Diff view toggle
|
||||
const showFullProposed = ref(false);
|
||||
|
||||
function handleAssistAccept() {
|
||||
const newBody = assist.accept();
|
||||
if (newBody !== body.value) {
|
||||
@@ -155,7 +160,6 @@ function handleAssistAccept() {
|
||||
markDirty();
|
||||
toast.show("Section updated");
|
||||
}
|
||||
showFullProposed.value = false;
|
||||
}
|
||||
|
||||
function truncateTarget(text: string, max = 60): string {
|
||||
@@ -443,7 +447,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="editor-page">
|
||||
<main class="editor-page task-editor-page">
|
||||
<div class="editor-header">
|
||||
<div class="toolbar">
|
||||
<router-link to="/tasks" class="btn-back">Back</router-link>
|
||||
@@ -465,159 +469,38 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
@input="markDirty"
|
||||
/>
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label>Status</label>
|
||||
<select v-model="status" @change="markDirty" class="field-select">
|
||||
<option value="todo">Todo</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="done">Done</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Priority</label>
|
||||
<select v-model="priority" @change="markDirty" class="field-select">
|
||||
<option value="none">None</option>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Due Date</label>
|
||||
<input
|
||||
v-model="dueDate"
|
||||
type="date"
|
||||
class="field-input"
|
||||
@input="markDirty"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Project</label>
|
||||
<ProjectSelector v-model="projectId" @update:modelValue="markDirty" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Milestone</label>
|
||||
<MilestoneSelector :projectId="projectId" v-model="milestoneId" @update:modelValue="markDirty" />
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /editor-header: title only -->
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field parent-field">
|
||||
<label>Parent Task</label>
|
||||
<div class="parent-search-wrapper">
|
||||
<div class="parent-input-row">
|
||||
<input
|
||||
v-model="parentSearchQuery"
|
||||
type="text"
|
||||
class="field-input"
|
||||
placeholder="Search tasks..."
|
||||
@input="onParentSearchInput"
|
||||
@focus="onParentFocus"
|
||||
@blur="hideParentDropdown"
|
||||
/>
|
||||
<button
|
||||
v-if="parentId"
|
||||
class="btn-clear-parent"
|
||||
@click="clearParentTask"
|
||||
title="Clear parent task"
|
||||
>×</button>
|
||||
</div>
|
||||
<div v-if="showParentDropdown" class="parent-dropdown">
|
||||
<div v-if="parentSearchLoading" class="parent-dropdown-item parent-empty">Searching...</div>
|
||||
<div
|
||||
v-for="task in parentSearchResults"
|
||||
:key="task.id"
|
||||
class="parent-dropdown-item"
|
||||
@mousedown.prevent="selectParentTask(task)"
|
||||
>{{ task.title || "Untitled" }}</div>
|
||||
<div v-if="!parentSearchLoading && parentSearchResults.length === 0" class="parent-dropdown-item parent-empty">No tasks found</div>
|
||||
</div>
|
||||
<!-- Two-column body: main (editor+log) | sidebar (metadata) -->
|
||||
<div class="task-body">
|
||||
|
||||
<!-- ── Main column ─────────────────────────────────────────── -->
|
||||
<div class="task-main">
|
||||
|
||||
<!-- Write / Preview tabs + toolbar sit above the editor -->
|
||||
<div class="body-tabs-row">
|
||||
<div class="editor-tabs">
|
||||
<button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
|
||||
<button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
|
||||
</div>
|
||||
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sub-tasks (only when editing an existing task) -->
|
||||
<div v-if="isEditing" class="subtasks-section">
|
||||
<div class="subtasks-header">
|
||||
<span class="subtasks-label">Sub-tasks</span>
|
||||
<button class="btn-add-subtask" @click="addingSubTask = !addingSubTask">+ Add</button>
|
||||
</div>
|
||||
<div v-if="subTasksLoading" class="subtasks-loading">Loading...</div>
|
||||
<template v-else>
|
||||
<div v-for="sub in subTasks" :key="sub.id" class="subtask-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="sub.status === 'done'"
|
||||
@change="toggleSubTask(sub)"
|
||||
class="subtask-checkbox"
|
||||
/>
|
||||
<router-link :to="`/tasks/${sub.id}`" :class="['subtask-title', { done: sub.status === 'done' }]">
|
||||
{{ sub.title || "Untitled" }}
|
||||
</router-link>
|
||||
</div>
|
||||
<p v-if="!subTasks.length && !addingSubTask" class="subtasks-empty">No sub-tasks yet.</p>
|
||||
<div v-if="addingSubTask" class="subtask-add-row">
|
||||
<input
|
||||
v-model="newSubTaskTitle"
|
||||
class="subtask-input"
|
||||
placeholder="Sub-task title"
|
||||
@keydown.enter="createSubTask"
|
||||
@keydown.escape="addingSubTask = false; newSubTaskTitle = ''"
|
||||
autofocus
|
||||
/>
|
||||
<button class="btn-subtask-confirm" @click="createSubTask" :disabled="!newSubTaskTitle.trim()">Add</button>
|
||||
<button class="btn-subtask-cancel" @click="addingSubTask = false; newSubTaskTitle = ''">Cancel</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Inline assist output -->
|
||||
<InlineAssistPanel
|
||||
v-if="assist.state.value !== 'idle'"
|
||||
:phase="assist.state.value as 'streaming' | 'review'"
|
||||
:label="assistLabel"
|
||||
:streaming-text="assist.streamingText.value"
|
||||
:diff="assist.diff.value"
|
||||
:proposed-text="assist.proposedText.value"
|
||||
@accept="handleAssistAccept"
|
||||
@reject="assist.reject()"
|
||||
@cancel="assist.clearSelection()"
|
||||
/>
|
||||
|
||||
<TagInput
|
||||
v-model="tags"
|
||||
:fetchTags="(q: string) => notesStore.fetchAllTags(q)"
|
||||
@update:modelValue="markDirty"
|
||||
/>
|
||||
|
||||
<div class="tag-suggest-row">
|
||||
<button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
|
||||
{{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
|
||||
</button>
|
||||
<template v-if="suggestedTags.length > 0">
|
||||
<button
|
||||
v-for="tag in suggestedTags"
|
||||
:key="tag"
|
||||
:class="['tag-pill', { applied: appliedTags.has(tag) }]"
|
||||
:disabled="appliedTags.has(tag)"
|
||||
@click="applyTagSuggestion(tag)"
|
||||
>
|
||||
#{{ tag }}
|
||||
<span v-if="appliedTags.has(tag)" class="tag-check">✓</span>
|
||||
</button>
|
||||
<button class="btn-dismiss-tags" @click="dismissTagSuggestions">×</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="editor-tabs">
|
||||
<button
|
||||
:class="['tab', { active: !showPreview }]"
|
||||
@click="showPreview = false"
|
||||
>
|
||||
Write
|
||||
</button>
|
||||
<button
|
||||
:class="['tab', { active: showPreview }]"
|
||||
@click="showPreview = true"
|
||||
>
|
||||
Preview
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<div class="editor-main">
|
||||
<div v-show="!showPreview">
|
||||
<!-- Editor / preview (hidden during review) -->
|
||||
<div v-show="!showPreview && assist.state.value !== 'review'" class="body-editor-wrap">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
@@ -626,30 +509,159 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview"
|
||||
v-show="showPreview && assist.state.value !== 'review'"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
|
||||
<!-- Work log -->
|
||||
<TaskLogSection v-if="taskId" :task-id="taskId" class="body-log" />
|
||||
</div>
|
||||
|
||||
<!-- ── Sidebar ──────────────────────────────────────────────── -->
|
||||
<aside class="task-sidebar">
|
||||
|
||||
<!-- Mobile accordion toggle -->
|
||||
<button class="sidebar-toggle" @click="sidebarOpen = !sidebarOpen">
|
||||
Details {{ sidebarOpen ? '▴' : '▾' }}
|
||||
</button>
|
||||
|
||||
<div :class="['sidebar-content', { 'sidebar-open': sidebarOpen }]">
|
||||
|
||||
<!-- Status / Priority / Due date -->
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Status</label>
|
||||
<select v-model="status" @change="markDirty" class="sb-select">
|
||||
<option value="todo">Todo</option>
|
||||
<option value="in_progress">In Progress</option>
|
||||
<option value="done">Done</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Priority</label>
|
||||
<select v-model="priority" @change="markDirty" class="sb-select">
|
||||
<option value="none">None</option>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Due Date</label>
|
||||
<input v-model="dueDate" type="date" class="sb-input" @input="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Project</label>
|
||||
<ProjectSelector v-model="projectId" @update:modelValue="markDirty" />
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Milestone</label>
|
||||
<MilestoneSelector :projectId="projectId" v-model="milestoneId" @update:modelValue="markDirty" />
|
||||
</div>
|
||||
|
||||
<!-- Parent task -->
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Parent Task</label>
|
||||
<div class="parent-search-wrapper">
|
||||
<div class="parent-input-row">
|
||||
<input
|
||||
v-model="parentSearchQuery"
|
||||
type="text"
|
||||
class="sb-input"
|
||||
placeholder="Search tasks..."
|
||||
@input="onParentSearchInput"
|
||||
@focus="onParentFocus"
|
||||
@blur="hideParentDropdown"
|
||||
/>
|
||||
<button v-if="parentId" class="btn-clear-parent" @click="clearParentTask" title="Clear">×</button>
|
||||
</div>
|
||||
<div v-if="showParentDropdown" class="parent-dropdown">
|
||||
<div v-if="parentSearchLoading" class="parent-dropdown-item parent-empty">Searching...</div>
|
||||
<div
|
||||
v-for="task in parentSearchResults"
|
||||
:key="task.id"
|
||||
class="parent-dropdown-item"
|
||||
@mousedown.prevent="selectParentTask(task)"
|
||||
>{{ task.title || "Untitled" }}</div>
|
||||
<div v-if="!parentSearchLoading && parentSearchResults.length === 0" class="parent-dropdown-item parent-empty">No tasks found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sb-divider"></div>
|
||||
|
||||
<!-- Sub-tasks -->
|
||||
<div v-if="isEditing" class="subtasks-section">
|
||||
<div class="subtasks-header">
|
||||
<span class="subtasks-label">Sub-tasks</span>
|
||||
<button class="btn-add-subtask" @click="addingSubTask = !addingSubTask">+ Add</button>
|
||||
</div>
|
||||
<div v-if="subTasksLoading" class="subtasks-loading">Loading...</div>
|
||||
<template v-else>
|
||||
<div v-for="sub in subTasks" :key="sub.id" class="subtask-row">
|
||||
<input type="checkbox" :checked="sub.status === 'done'" @change="toggleSubTask(sub)" class="subtask-checkbox" />
|
||||
<router-link :to="`/tasks/${sub.id}`" :class="['subtask-title', { done: sub.status === 'done' }]">
|
||||
{{ sub.title || "Untitled" }}
|
||||
</router-link>
|
||||
</div>
|
||||
<p v-if="!subTasks.length && !addingSubTask" class="subtasks-empty">No sub-tasks yet.</p>
|
||||
<div v-if="addingSubTask" class="subtask-add-row">
|
||||
<input
|
||||
v-model="newSubTaskTitle"
|
||||
class="subtask-input"
|
||||
placeholder="Sub-task title"
|
||||
@keydown.enter="createSubTask"
|
||||
@keydown.escape="addingSubTask = false; newSubTaskTitle = ''"
|
||||
autofocus
|
||||
/>
|
||||
<button class="btn-subtask-confirm" @click="createSubTask" :disabled="!newSubTaskTitle.trim()">Add</button>
|
||||
<button class="btn-subtask-cancel" @click="addingSubTask = false; newSubTaskTitle = ''">Cancel</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="sb-divider"></div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Tags</label>
|
||||
<TagInput
|
||||
v-model="tags"
|
||||
:fetchTags="(q: string) => notesStore.fetchAllTags(q)"
|
||||
@update:modelValue="markDirty"
|
||||
/>
|
||||
</div>
|
||||
<div class="tag-suggest-row">
|
||||
<button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
|
||||
{{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
|
||||
</button>
|
||||
<template v-if="suggestedTags.length > 0">
|
||||
<button
|
||||
v-for="tag in suggestedTags"
|
||||
:key="tag"
|
||||
:class="['tag-pill', { applied: appliedTags.has(tag) }]"
|
||||
:disabled="appliedTags.has(tag)"
|
||||
@click="applyTagSuggestion(tag)"
|
||||
>
|
||||
#{{ tag }}
|
||||
<span v-if="appliedTags.has(tag)" class="tag-check">✓</span>
|
||||
</button>
|
||||
<button class="btn-dismiss-tags" @click="dismissTagSuggestions">×</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div><!-- /sidebar-content -->
|
||||
</aside><!-- /task-sidebar -->
|
||||
|
||||
<!-- ✨ Assist panel overlays on top of sidebar when open -->
|
||||
<aside v-if="assistOpen" class="assist-panel">
|
||||
<!-- Panel header -->
|
||||
<div class="assist-panel-header">
|
||||
<span class="assist-panel-title">✨ AI Assist</span>
|
||||
<button
|
||||
class="btn-proofread"
|
||||
@click="assist.proofread()"
|
||||
:disabled="assist.state.value === 'streaming'"
|
||||
>Proofread</button>
|
||||
<button class="btn-proofread" @click="assist.proofread()" :disabled="assist.state.value === 'streaming'">Proofread</button>
|
||||
<button class="btn-close-assist" @click="toggleAssist">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Panel body -->
|
||||
<div class="assist-panel-body">
|
||||
|
||||
<!-- IDLE -->
|
||||
<div v-if="assist.state.value === 'idle'" class="assist-idle">
|
||||
<div class="assist-sections-label">Sections</div>
|
||||
<div class="assist-sections">
|
||||
@@ -658,17 +670,11 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
:key="i"
|
||||
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
|
||||
@click="assist.selectSection(section)"
|
||||
>
|
||||
{{ section.heading || '(preamble)' }}
|
||||
</div>
|
||||
<div v-if="!assist.sections.value.length" class="assist-empty">
|
||||
Write some content to get started.
|
||||
</div>
|
||||
>{{ section.heading || '(preamble)' }}</div>
|
||||
<div v-if="!assist.sections.value.length" class="assist-empty">Write some content to get started.</div>
|
||||
</div>
|
||||
<template v-if="assist.target.value">
|
||||
<div class="assist-target-preview">
|
||||
Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
|
||||
</div>
|
||||
<div class="assist-target-preview">Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em></div>
|
||||
<textarea
|
||||
ref="instructionRef"
|
||||
v-model="assist.instruction.value"
|
||||
@@ -677,73 +683,29 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="assist-input-actions">
|
||||
<button
|
||||
class="btn-generate"
|
||||
@click="assist.submit()"
|
||||
:disabled="!assist.canSubmit.value"
|
||||
>Generate</button>
|
||||
<button class="btn-generate" @click="assist.submit()" :disabled="!assist.canSubmit.value">Generate</button>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="assist-hint">
|
||||
Select a section above or highlight text in the editor.
|
||||
</div>
|
||||
<div v-else class="assist-hint">Select a section above or highlight text in the editor.</div>
|
||||
</div>
|
||||
|
||||
<!-- ERROR -->
|
||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||
|
||||
<!-- STREAMING -->
|
||||
<div v-if="assist.state.value === 'streaming'" class="assist-streaming">
|
||||
<div class="assist-streaming-label">
|
||||
{{ assist.isProofreading.value
|
||||
? 'Proofreading document...'
|
||||
: `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
|
||||
</div>
|
||||
<div class="assist-preview-box prose" v-html="renderedStreaming"></div>
|
||||
<span class="typing-indicator">●●●</span>
|
||||
<div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
|
||||
{{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
|
||||
</div>
|
||||
|
||||
<!-- REVIEW -->
|
||||
<div v-if="assist.state.value === 'review'" class="assist-review">
|
||||
<div class="assist-review-header">
|
||||
<span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
|
||||
<button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
|
||||
{{ showFullProposed ? 'Show diff' : 'Show full text' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!showFullProposed" class="diff-view">
|
||||
<div
|
||||
v-for="(line, i) in assist.diff.value"
|
||||
:key="i"
|
||||
:class="['diff-line', `diff-${line.type}`]"
|
||||
>
|
||||
<span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
|
||||
<span class="diff-text">{{ line.text }}</span>
|
||||
</div>
|
||||
<div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
|
||||
</div>
|
||||
<div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
|
||||
<button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Floating inline assist button (teleported to body) -->
|
||||
</div><!-- /task-body -->
|
||||
|
||||
<!-- Floating inline assist button -->
|
||||
<teleport to="body">
|
||||
<button
|
||||
v-if="floatingAssist.show"
|
||||
class="inline-assist-btn"
|
||||
:style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
|
||||
@mousedown.prevent="handleInlineAssist"
|
||||
>
|
||||
✨ Assist
|
||||
</button>
|
||||
>✨ Assist</button>
|
||||
</teleport>
|
||||
|
||||
<!-- Delete confirmation -->
|
||||
@@ -764,25 +726,120 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
<style src="@/assets/editor-shared.css" />
|
||||
<style scoped>
|
||||
/* Task-specific metadata fields */
|
||||
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
|
||||
.field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
|
||||
.field label { font-size: 0.85rem; color: var(--color-text-secondary); font-weight: 500; }
|
||||
.field-select,
|
||||
.field-input {
|
||||
padding: 0.4rem 0.5rem;
|
||||
/* ── Two-column task layout ─────────────────────────────────── */
|
||||
.task-editor-page {
|
||||
/* override shared max-width; task editor can be wider */
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
/* Replace .editor-body for task editor */
|
||||
.task-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Main column: editor + work log */
|
||||
.task-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 1.25rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.body-tabs-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.body-editor-wrap {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.body-log {
|
||||
/* TaskLogSection already has its own border/bg */
|
||||
}
|
||||
|
||||
/* Right sidebar: metadata fields */
|
||||
.task-sidebar {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--color-border);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Mobile accordion toggle (hidden on desktop) */
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
/* Sidebar field layout */
|
||||
.sb-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.sb-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.sb-select,
|
||||
.sb-input {
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sb-select:focus,
|
||||
.sb-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.sb-divider {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
/* Parent task search */
|
||||
.parent-field { max-width: 360px; }
|
||||
.parent-search-wrapper { position: relative; }
|
||||
.parent-input-row { display: flex; align-items: center; gap: 0.25rem; }
|
||||
.parent-input-row .field-input { flex: 1; }
|
||||
.parent-input-row .sb-input { flex: 1; }
|
||||
.btn-clear-parent {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -808,8 +865,8 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
overflow-y: auto;
|
||||
}
|
||||
.parent-dropdown-item {
|
||||
padding: 0.45rem 0.7rem;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.4rem 0.65rem;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
@@ -817,27 +874,24 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
white-space: nowrap;
|
||||
}
|
||||
.parent-dropdown-item:hover { background: var(--color-bg-secondary); }
|
||||
.parent-empty {
|
||||
color: var(--color-text-muted);
|
||||
cursor: default;
|
||||
}
|
||||
.parent-empty { color: var(--color-text-muted); cursor: default; }
|
||||
.parent-empty:hover { background: none; }
|
||||
|
||||
/* Sub-tasks */
|
||||
.subtasks-section {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.6rem 0.75rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.subtasks-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.subtasks-label {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
@@ -848,25 +902,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-family: inherit;
|
||||
padding: 0.1rem 0.3rem;
|
||||
padding: 0.1rem 0.2rem;
|
||||
}
|
||||
.btn-add-subtask:hover { opacity: 0.8; }
|
||||
.subtasks-loading {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.subtasks-loading { font-size: 0.78rem; color: var(--color-text-muted); }
|
||||
.subtask-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
gap: 0.4rem;
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
.subtask-checkbox { flex-shrink: 0; cursor: pointer; }
|
||||
.subtask-title {
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.83rem;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
flex: 1;
|
||||
@@ -875,52 +925,70 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
white-space: nowrap;
|
||||
}
|
||||
.subtask-title:hover { color: var(--color-primary); }
|
||||
.subtask-title.done {
|
||||
text-decoration: line-through;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.subtasks-empty {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.subtask-title.done { text-decoration: line-through; color: var(--color-text-muted); }
|
||||
.subtasks-empty { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }
|
||||
.subtask-add-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.35rem;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.subtask-input {
|
||||
flex: 1;
|
||||
padding: 0.3rem 0.5rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.83rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.subtask-input:focus { outline: none; border-color: var(--color-primary); }
|
||||
.btn-subtask-confirm {
|
||||
padding: 0.3rem 0.6rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-subtask-confirm:disabled { opacity: 0.5; cursor: default; }
|
||||
.btn-subtask-cancel {
|
||||
padding: 0.3rem 0.6rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Tag suggest row inside sidebar */
|
||||
.tag-suggest-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Narrow screen: sidebar collapses */
|
||||
@media (max-width: 720px) {
|
||||
.task-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
|
||||
.task-main { padding: 0.75rem 1rem 1rem; overflow-y: visible; }
|
||||
.task-sidebar {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
overflow-y: visible;
|
||||
}
|
||||
.sidebar-toggle { display: block; }
|
||||
.sidebar-content {
|
||||
display: none;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.sidebar-content.sidebar-open { display: flex; }
|
||||
}
|
||||
</style>
|
||||
@@ -15,6 +15,7 @@ from fabledassistant.routes.chat import chat_bp
|
||||
from fabledassistant.routes.notes import notes_bp
|
||||
from fabledassistant.routes.images import images_bp
|
||||
from fabledassistant.routes.milestones import milestones_bp
|
||||
from fabledassistant.routes.task_logs import task_logs_bp
|
||||
from fabledassistant.routes.projects import projects_bp
|
||||
from fabledassistant.routes.push import push_bp
|
||||
from fabledassistant.routes.quick_capture import quick_capture_bp
|
||||
@@ -55,6 +56,7 @@ def create_app() -> Quart:
|
||||
app.register_blueprint(push_bp)
|
||||
app.register_blueprint(quick_capture_bp)
|
||||
app.register_blueprint(settings_bp)
|
||||
app.register_blueprint(task_logs_bp)
|
||||
app.register_blueprint(tasks_bp)
|
||||
|
||||
@app.before_request
|
||||
|
||||
@@ -29,3 +29,4 @@ from fabledassistant.models.project import Project # noqa: E402, F401
|
||||
from fabledassistant.models.push_subscription import PushSubscription # noqa: E402, F401
|
||||
from fabledassistant.models.event import Event # noqa: E402, F401
|
||||
from fabledassistant.models.milestone import Milestone # noqa: E402, F401
|
||||
from fabledassistant.models.task_log import TaskLog # noqa: E402, F401
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
from datetime import datetime, timezone
|
||||
|
||||
from sqlalchemy import DateTime, ForeignKey, Integer, Text
|
||||
from sqlalchemy.orm import Mapped, mapped_column
|
||||
|
||||
from fabledassistant.models import Base
|
||||
|
||||
|
||||
class TaskLog(Base):
|
||||
__tablename__ = "task_logs"
|
||||
|
||||
id: Mapped[int] = mapped_column(primary_key=True)
|
||||
task_id: Mapped[int] = mapped_column(Integer, ForeignKey("notes.id", ondelete="CASCADE"))
|
||||
user_id: Mapped[int] = mapped_column(Integer, ForeignKey("users.id", ondelete="CASCADE"))
|
||||
content: Mapped[str] = mapped_column(Text)
|
||||
duration_minutes: Mapped[int | None] = mapped_column(Integer, nullable=True)
|
||||
created_at: Mapped[datetime] = mapped_column(
|
||||
DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
|
||||
)
|
||||
updated_at: Mapped[datetime] = mapped_column(
|
||||
DateTime(timezone=True),
|
||||
default=lambda: datetime.now(timezone.utc),
|
||||
onupdate=lambda: datetime.now(timezone.utc),
|
||||
)
|
||||
|
||||
def to_dict(self) -> dict:
|
||||
return {
|
||||
"id": self.id,
|
||||
"task_id": self.task_id,
|
||||
"user_id": self.user_id,
|
||||
"content": self.content,
|
||||
"duration_minutes": self.duration_minutes,
|
||||
"created_at": self.created_at.isoformat(),
|
||||
"updated_at": self.updated_at.isoformat(),
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
"""Task work log routes — /api/tasks/<task_id>/logs."""
|
||||
import logging
|
||||
|
||||
from quart import Blueprint, jsonify, request
|
||||
|
||||
from fabledassistant.auth import get_current_user_id, login_required
|
||||
from fabledassistant.services.task_logs import create_log, delete_log, list_logs, update_log
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
task_logs_bp = Blueprint("task_logs", __name__, url_prefix="/api/tasks")
|
||||
|
||||
|
||||
@task_logs_bp.route("/<int:task_id>/logs", methods=["GET"])
|
||||
@login_required
|
||||
async def list_logs_route(task_id: int):
|
||||
uid = get_current_user_id()
|
||||
logs = await list_logs(uid, task_id)
|
||||
return jsonify({"logs": [l.to_dict() for l in logs]})
|
||||
|
||||
|
||||
@task_logs_bp.route("/<int:task_id>/logs", methods=["POST"])
|
||||
@login_required
|
||||
async def create_log_route(task_id: int):
|
||||
uid = get_current_user_id()
|
||||
data = await request.get_json()
|
||||
content = (data or {}).get("content", "").strip()
|
||||
if not content:
|
||||
return jsonify({"error": "content is required"}), 400
|
||||
duration_minutes = (data or {}).get("duration_minutes")
|
||||
if duration_minutes is not None:
|
||||
try:
|
||||
duration_minutes = int(duration_minutes)
|
||||
except (TypeError, ValueError):
|
||||
return jsonify({"error": "duration_minutes must be an integer"}), 400
|
||||
try:
|
||||
log = await create_log(uid, task_id, content, duration_minutes)
|
||||
except ValueError as e:
|
||||
return jsonify({"error": str(e)}), 404
|
||||
return jsonify(log.to_dict()), 201
|
||||
|
||||
|
||||
@task_logs_bp.route("/<int:task_id>/logs/<int:log_id>", methods=["PATCH"])
|
||||
@login_required
|
||||
async def update_log_route(task_id: int, log_id: int):
|
||||
uid = get_current_user_id()
|
||||
data = await request.get_json() or {}
|
||||
content = data.get("content")
|
||||
if content is not None:
|
||||
content = content.strip() or None
|
||||
|
||||
from fabledassistant.services.task_logs import _UNSET
|
||||
duration_minutes = data.get("duration_minutes", _UNSET)
|
||||
|
||||
log = await update_log(uid, log_id, content=content, duration_minutes=duration_minutes)
|
||||
if log is None:
|
||||
return jsonify({"error": "Log entry not found"}), 404
|
||||
return jsonify(log.to_dict())
|
||||
|
||||
|
||||
@task_logs_bp.route("/<int:task_id>/logs/<int:log_id>", methods=["DELETE"])
|
||||
@login_required
|
||||
async def delete_log_route(task_id: int, log_id: int):
|
||||
uid = get_current_user_id()
|
||||
deleted = await delete_log(uid, log_id)
|
||||
if not deleted:
|
||||
return jsonify({"error": "Log entry not found"}), 404
|
||||
return "", 204
|
||||
@@ -409,18 +409,40 @@ async def run_assist_generation(
|
||||
messages: list[dict],
|
||||
model: str,
|
||||
) -> None:
|
||||
"""Stream LLM response for assist into buffer. No DB persistence."""
|
||||
try:
|
||||
async for chunk in stream_chat(messages, model, options={"num_predict": 4096}):
|
||||
buf.content_so_far += chunk
|
||||
buf.append_event("chunk", {"chunk": chunk})
|
||||
"""Stream LLM response for assist into buffer. No DB persistence.
|
||||
|
||||
buf.state = GenerationState.COMPLETED
|
||||
buf.finished_at = time.monotonic()
|
||||
buf.append_event("done", {"done": True, "full_text": buf.content_so_far})
|
||||
Retries up to 3 times on Ollama 500 errors (model still loading).
|
||||
On each retry the accumulated content is reset so the done event
|
||||
always reflects only the successful generation.
|
||||
"""
|
||||
last_exc: BaseException | None = None
|
||||
for attempt in range(3):
|
||||
if attempt > 0:
|
||||
delay = 3.0 * attempt
|
||||
logger.warning(
|
||||
"Ollama assist stream 500 (attempt %d/3), retrying in %.0fs", attempt, delay
|
||||
)
|
||||
await asyncio.sleep(delay)
|
||||
try:
|
||||
buf.content_so_far = ""
|
||||
async for chunk in stream_chat(messages, model, options={"num_predict": 4096}):
|
||||
buf.content_so_far += chunk
|
||||
buf.append_event("chunk", {"chunk": chunk})
|
||||
|
||||
except Exception as e:
|
||||
logger.exception("Error in assist generation task")
|
||||
buf.state = GenerationState.ERRORED
|
||||
buf.finished_at = time.monotonic()
|
||||
buf.append_event("error", {"error": str(e)})
|
||||
buf.state = GenerationState.COMPLETED
|
||||
buf.finished_at = time.monotonic()
|
||||
buf.append_event("done", {"done": True, "full_text": buf.content_so_far})
|
||||
return
|
||||
|
||||
except httpx.HTTPStatusError as exc:
|
||||
last_exc = exc
|
||||
if exc.response.status_code != 500:
|
||||
break
|
||||
except Exception as exc:
|
||||
last_exc = exc
|
||||
break
|
||||
|
||||
logger.exception("Error in assist generation task")
|
||||
buf.state = GenerationState.ERRORED
|
||||
buf.finished_at = time.monotonic()
|
||||
buf.append_event("error", {"error": str(last_exc)})
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
"""Task work log service."""
|
||||
import logging
|
||||
from datetime import datetime, timezone
|
||||
|
||||
from sqlalchemy import select
|
||||
|
||||
from fabledassistant.models import async_session
|
||||
from fabledassistant.models.task_log import TaskLog
|
||||
from fabledassistant.models.note import Note
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
_UNSET = object()
|
||||
|
||||
|
||||
async def create_log(
|
||||
user_id: int,
|
||||
task_id: int,
|
||||
content: str,
|
||||
duration_minutes: int | None = None,
|
||||
) -> TaskLog:
|
||||
async with async_session() as session:
|
||||
# Verify task exists and belongs to user
|
||||
result = await session.execute(
|
||||
select(Note).where(Note.id == task_id, Note.user_id == user_id)
|
||||
)
|
||||
if result.scalars().first() is None:
|
||||
raise ValueError(f"Task {task_id} not found")
|
||||
log = TaskLog(
|
||||
task_id=task_id,
|
||||
user_id=user_id,
|
||||
content=content,
|
||||
duration_minutes=duration_minutes,
|
||||
)
|
||||
session.add(log)
|
||||
await session.commit()
|
||||
await session.refresh(log)
|
||||
return log
|
||||
|
||||
|
||||
async def list_logs(user_id: int, task_id: int) -> list[TaskLog]:
|
||||
async with async_session() as session:
|
||||
result = await session.execute(
|
||||
select(TaskLog)
|
||||
.where(TaskLog.task_id == task_id, TaskLog.user_id == user_id)
|
||||
.order_by(TaskLog.created_at.asc())
|
||||
)
|
||||
return list(result.scalars().all())
|
||||
|
||||
|
||||
async def update_log(
|
||||
user_id: int,
|
||||
log_id: int,
|
||||
content: str | None = None,
|
||||
duration_minutes: object = _UNSET,
|
||||
) -> TaskLog | None:
|
||||
async with async_session() as session:
|
||||
result = await session.execute(
|
||||
select(TaskLog).where(TaskLog.id == log_id, TaskLog.user_id == user_id)
|
||||
)
|
||||
log = result.scalars().first()
|
||||
if log is None:
|
||||
return None
|
||||
if content is not None:
|
||||
log.content = content
|
||||
if duration_minutes is not _UNSET:
|
||||
log.duration_minutes = duration_minutes # type: ignore[assignment]
|
||||
log.updated_at = datetime.now(timezone.utc)
|
||||
await session.commit()
|
||||
await session.refresh(log)
|
||||
return log
|
||||
|
||||
|
||||
async def delete_log(user_id: int, log_id: int) -> bool:
|
||||
async with async_session() as session:
|
||||
result = await session.execute(
|
||||
select(TaskLog).where(TaskLog.id == log_id, TaskLog.user_id == user_id)
|
||||
)
|
||||
log = result.scalars().first()
|
||||
if log is None:
|
||||
return False
|
||||
await session.delete(log)
|
||||
await session.commit()
|
||||
return True
|
||||
@@ -440,6 +440,34 @@ _CORE_TOOLS = [
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
"type": "function",
|
||||
"function": {
|
||||
"name": "log_work",
|
||||
"description": (
|
||||
"Add a work log entry to a task to record progress, work done, or time spent. "
|
||||
"Use this when the user says they worked on, completed, or spent time on a task."
|
||||
),
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"task": {
|
||||
"type": "string",
|
||||
"description": "Title or keyword identifying the task (required)",
|
||||
},
|
||||
"content": {
|
||||
"type": "string",
|
||||
"description": "Description of the work done (required)",
|
||||
},
|
||||
"duration_minutes": {
|
||||
"type": "integer",
|
||||
"description": "Optional time spent in minutes",
|
||||
},
|
||||
},
|
||||
"required": ["task", "content"],
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
# CalDAV tools — only included when user has CalDAV configured
|
||||
@@ -1455,6 +1483,33 @@ async def execute_tool(user_id: int, tool_name: str, arguments: dict) -> dict:
|
||||
},
|
||||
}
|
||||
|
||||
elif tool_name == "log_work":
|
||||
from fabledassistant.services.task_logs import create_log as _create_log
|
||||
task_query = arguments.get("task", "")
|
||||
content = arguments.get("content", "").strip()
|
||||
if not task_query:
|
||||
return {"success": False, "error": "task is required"}
|
||||
if not content:
|
||||
return {"success": False, "error": "content is required"}
|
||||
duration_minutes = arguments.get("duration_minutes")
|
||||
if duration_minutes is not None:
|
||||
try:
|
||||
duration_minutes = int(duration_minutes)
|
||||
except (TypeError, ValueError):
|
||||
duration_minutes = None
|
||||
# Resolve task by exact title then fuzzy search (tasks only)
|
||||
note = await get_note_by_title(user_id, task_query)
|
||||
if note is None or note.status is None:
|
||||
notes, _ = await list_notes(user_id=user_id, q=task_query, is_task=True, limit=5)
|
||||
note = notes[0] if notes else None
|
||||
if note is None:
|
||||
return {"success": False, "error": f"No task found matching '{task_query}'."}
|
||||
try:
|
||||
log = await _create_log(user_id, note.id, content, duration_minutes)
|
||||
except ValueError as e:
|
||||
return {"success": False, "error": str(e)}
|
||||
return {"success": True, "log": log.to_dict(), "task": note.title}
|
||||
|
||||
else:
|
||||
return {"success": False, "error": f"Unknown tool: {tool_name}"}
|
||||
|
||||
|
||||
+10
-4
@@ -12,13 +12,19 @@
|
||||
> Include file-level details in the commit body when the change is non-trivial.
|
||||
|
||||
## Last Updated
|
||||
2026-03-04 — Per-conversation streaming state + auto-new-chat on open.
|
||||
2026-03-05 — Task Work Log, writing assistant improvements, task editor UI overhaul.
|
||||
|
||||
**Chat store refactor (`stores/chat.ts`):** Replaced 7 global stream refs (`streaming`, `streamingContent`, `streamingThinking`, `streamingToolCalls`, `streamingStatus`, `streamingPendingTool`, `lastContextMeta`) with a single `convStreams: Record<number, ConvStreamState>` map. Each conversation now tracks its own stream state independently. Public API is unchanged — the 7 names are now computed getters derived from the current conversation's slot. Added `isStreamingConv(id)` helper. Key behaviour changes: `message_count` is incremented by 2 immediately after POST 202 (not at `done`) so the cleanup watcher never deletes a conversation that is mid-generation; SSE reconnect retries now run regardless of which conversation is currently viewed (background streams persist); `error` toasts only shown when viewing that conversation; `deleteConversation` cleans up orphaned stream state.
|
||||
**Task Work Log (backend):** New `task_logs` table (migration `0021_add_task_logs.py`) with FK to `notes(id)` CASCADE and `users(id)` CASCADE, indexes on `task_id` and `user_id`. SQLAlchemy model `models/task_log.py`. Service `services/task_logs.py` with `create_log`, `list_logs`, `update_log` (uses `_UNSET` sentinel so `None` can explicitly clear `duration_minutes`), `delete_log` — all ownership-checked. Blueprint `routes/task_logs.py` registered in `app.py` at `/api/tasks/<task_id>/logs` (GET, POST, PATCH `/<log_id>`, DELETE `/<log_id>`). LLM tool `log_work` added to `_CORE_TOOLS` in `services/tools.py`: resolves task by title, calls `create_log`, returns `{success, log, task}`.
|
||||
|
||||
**ChatView.vue:** Removed invalid write to `store.lastContextMeta` (now a read-only computed). Added `!store.isStreamingConv(newId)` guard to the `watch(convId)` fetch so navigating back to a generating conversation shows accumulated content without a stale refetch. Added `startNewConversation()` helper; opening `/chat` with no ID now automatically creates a new conversation and redirects to it (both on mount and when navigating to `/chat` from elsewhere). Deleting a conversation also auto-creates a new one.
|
||||
**Task Work Log (frontend):** `TaskLog` interface added to `frontend/src/types/task.ts`. `TaskLogSection.vue` component (props: `taskId`) — renders logs ASC with date+time timestamps (not just date, so multiple same-day entries are distinguishable), duration badge, inline edit (textarea + duration field + Save/Cancel), markdown rendering via `renderMarkdown`. New-entry textarea has `autofocus`. Integrated below TiptapEditor in `TaskEditorView.vue`.
|
||||
|
||||
**Previous session (same date):** Keyboard navigation overhaul: `e` to edit on viewer pages; `/` to focus search bar; `c` to focus chat on home / navigate to chat elsewhere; `j`/`k` vim-style list navigation; `Enter` opens selected item; `a:focus-visible` focus-ring rule. Task cards route directly to `/tasks/:id` (edit view); `task-view` route removed; `TasksListView` `Enter` key updated accordingly. `TaskViewerView` sub-task list with progress bar and inline status cycling; `NoteViewerView` project/milestone/parent breadcrumb; Dashboard Active Projects, 50/50 layout, overflow fixes.
|
||||
**Writing assistant — reliability (Pass 1):** `services/generation_task.py` `run_assist_generation` now retries up to 3 times on HTTP 500, with `3s × attempt` delay and `buf.content_so_far` reset between attempts. `composables/useAssist.ts`: removed `chatStore.chatReady` gate from `canSubmit` (chat store no longer needed; Ollama errors surface via backend response); replaced with `useToastStore` for error toasts on SSE error events, catch blocks, and accept-conflict detection.
|
||||
|
||||
**Writing assistant — inline UX (Pass 2):** New `InlineAssistPanel.vue` component renders streaming preview (animated pulse + live markdown) and diff review (monospace red/green diff or full-text toggle + Accept/Reject) directly in the editor column. The right-hand assist side panel now only shows the instruction input (idle state); streaming and review output moved inline. `.assist-active-hint` style added to `editor-shared.css`. Both `NoteEditorView.vue` and `TaskEditorView.vue` updated: `assistLabel` computed from the target section title, `InlineAssistPanel` rendered between MarkdownToolbar and TiptapEditor, aside restricted to idle/error states.
|
||||
|
||||
**Task editor UI overhaul:** `TaskEditorView.vue` restructured into a two-column layout: left `.task-main` (Write/Preview tabs + MarkdownToolbar + InlineAssistPanel + TiptapEditor + TaskLogSection) and right `.task-sidebar` (280px, all metadata: status, priority, due date, project, milestone, parent task, sub-tasks, tags + suggest). Title remains full-width above both columns. Sidebar collapses to an accordion on `max-width: 720px` (toggle button hidden on desktop). `sidebarOpen` ref defaults to `true`. Body tab defaults to Preview (`showPreview = ref(true)`).
|
||||
|
||||
**Previous session (2026-03-04):** Per-conversation streaming state + auto-new-chat on open. Keyboard navigation overhaul.
|
||||
|
||||
## Project Overview
|
||||
Fabled Assistant is a self-hosted note-taking and task-tracking application with
|
||||
|
||||
Reference in New Issue
Block a user