Project Workspace view, abort button, session invalidation, workspace fixes
Workspace (/workspace/:projectId): - Three-panel layout (tasks / chat / notes) with CSS grid collapse toggles - WorkspaceTaskPanel: tasks grouped by milestone, collapsible groups, task detail slide-over with status cycling, TaskLogSection work log, and inline-confirm delete - WorkspaceNoteEditor: list view (sorted by updated_at, inline tag pills, inline-confirm delete) with editor view (TipTap, TagInput, Suggest tags, 60s autosave) - Persistent workspace conversation stored in localStorage per project; reused on return visits - Thinking enabled (think: true) with Reasoning block in streaming bubble - workspace_project_id backend pipeline: chat.py → generation_task.py → llm.py; system prompt uses project title so agent passes project="Title" to tools (fixes create_note failing with numeric project string) - SSE tool-call watcher bridges agent actions to panel updates - Height fix: workspace-root uses height 100%; app-content switches to overflow hidden via :has() selector - Entry point: "Open Workspace" button on ProjectView Abort button: - Stop button in ChatView header and WorkspaceView input bar - Calls existing cancelGeneration() / POST .../generation/cancel Session invalidation: - POST /api/auth/invalidate-sessions bumps session_version, keeps current session alive; useful after SSO/OAuth password rotation - Button in Settings → Active Sessions section Other: - Dashboard recent notes limit increased from 8 to 16 - Workspace chat abort replaces Send button while streaming Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,571 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { apiGet, apiPatch, apiDelete } from "@/api/client";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { useAutoSave } from "@/composables/useAutoSave";
|
||||
import { useTagSuggestions } from "@/composables/useTagSuggestions";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import TiptapEditor from "@/components/TiptapEditor.vue";
|
||||
import TagInput from "@/components/TagInput.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
projectId: number;
|
||||
activeNoteId: number | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ "note-loaded": [id: number] }>();
|
||||
|
||||
interface NoteItem {
|
||||
id: number;
|
||||
title: string;
|
||||
tags: string[];
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
const toast = useToastStore();
|
||||
const notesStore = useNotesStore();
|
||||
|
||||
// View state: "list" or "editor"
|
||||
const view = ref<"list" | "editor">("list");
|
||||
|
||||
// List state
|
||||
const projectNotes = ref<NoteItem[]>([]);
|
||||
const listLoading = ref(false);
|
||||
const deletingId = ref<number | null>(null); // confirming delete for this id
|
||||
const pendingDelete = ref<number | null>(null); // mid-deletion
|
||||
|
||||
// Editor state
|
||||
const editingId = ref<number | null>(null);
|
||||
const noteTitle = ref("");
|
||||
const noteBody = ref("");
|
||||
const noteTags = ref<string[]>([]);
|
||||
const dirty = ref(false);
|
||||
const saving = ref(false);
|
||||
|
||||
const tagSuggestions = useTagSuggestions(noteTitle, noteBody, noteTags, () => { dirty.value = true; });
|
||||
|
||||
async function loadProjectNotes() {
|
||||
listLoading.value = true;
|
||||
try {
|
||||
const data = await apiGet<{ notes: NoteItem[] }>(
|
||||
`/api/projects/${props.projectId}/notes?type=note&limit=200`
|
||||
);
|
||||
projectNotes.value = data.notes ?? [];
|
||||
} catch {
|
||||
toast.show("Failed to load notes", "error");
|
||||
} finally {
|
||||
listLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function openNote(id: number) {
|
||||
try {
|
||||
const note = await apiGet<{ id: number; title: string; body: string; tags: string[]; updated_at: string }>(
|
||||
`/api/notes/${id}`
|
||||
);
|
||||
editingId.value = note.id;
|
||||
noteTitle.value = note.title;
|
||||
noteBody.value = note.body ?? "";
|
||||
noteTags.value = note.tags ?? [];
|
||||
dirty.value = false;
|
||||
tagSuggestions.dismissTagSuggestions();
|
||||
view.value = "editor";
|
||||
emit("note-loaded", note.id);
|
||||
} catch {
|
||||
toast.show("Failed to load note", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function saveNote() {
|
||||
if (!editingId.value) return;
|
||||
saving.value = true;
|
||||
try {
|
||||
await apiPatch(`/api/notes/${editingId.value}`, {
|
||||
title: noteTitle.value,
|
||||
body: noteBody.value,
|
||||
tags: noteTags.value,
|
||||
});
|
||||
dirty.value = false;
|
||||
// Refresh updated_at in the list
|
||||
const idx = projectNotes.value.findIndex((n) => n.id === editingId.value);
|
||||
if (idx !== -1) {
|
||||
projectNotes.value[idx] = {
|
||||
...projectNotes.value[idx],
|
||||
title: noteTitle.value,
|
||||
tags: noteTags.value,
|
||||
updated_at: new Date().toISOString(),
|
||||
};
|
||||
// Re-sort by updated_at
|
||||
projectNotes.value.sort((a, b) =>
|
||||
new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
toast.show("Failed to save note", "error");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function backToList() {
|
||||
view.value = "list";
|
||||
deletingId.value = null;
|
||||
}
|
||||
|
||||
function requestDelete(id: number, e: Event) {
|
||||
e.stopPropagation();
|
||||
if (deletingId.value === id) {
|
||||
// Second click — confirm
|
||||
confirmDelete(id);
|
||||
} else {
|
||||
deletingId.value = id;
|
||||
}
|
||||
}
|
||||
|
||||
function cancelDelete(e: Event) {
|
||||
e.stopPropagation();
|
||||
deletingId.value = null;
|
||||
}
|
||||
|
||||
async function confirmDelete(id: number) {
|
||||
pendingDelete.value = id;
|
||||
try {
|
||||
await apiDelete(`/api/notes/${id}`);
|
||||
projectNotes.value = projectNotes.value.filter((n) => n.id !== id);
|
||||
if (editingId.value === id) {
|
||||
editingId.value = null;
|
||||
noteTitle.value = "";
|
||||
noteBody.value = "";
|
||||
view.value = "list";
|
||||
}
|
||||
} catch {
|
||||
toast.show("Failed to delete note", "error");
|
||||
} finally {
|
||||
pendingDelete.value = null;
|
||||
deletingId.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - d.getTime();
|
||||
const diffMin = Math.floor(diffMs / 60_000);
|
||||
const diffHrs = Math.floor(diffMs / 3_600_000);
|
||||
const diffDays = Math.floor(diffMs / 86_400_000);
|
||||
if (diffMin < 1) return "just now";
|
||||
if (diffMin < 60) return `${diffMin}m ago`;
|
||||
if (diffHrs < 24) return `${diffHrs}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
watch(noteTitle, () => { dirty.value = true; });
|
||||
watch(noteBody, () => { dirty.value = true; });
|
||||
watch(noteTags, () => { dirty.value = true; });
|
||||
|
||||
watch(
|
||||
() => props.activeNoteId,
|
||||
async (id) => {
|
||||
if (id) {
|
||||
await openNote(id);
|
||||
await loadProjectNotes();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
useAutoSave(dirty, saving, saveNote, 60_000);
|
||||
onMounted(loadProjectNotes);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ws-note-editor">
|
||||
|
||||
<!-- ── EDITOR VIEW ── -->
|
||||
<template v-if="view === 'editor'">
|
||||
<div class="panel-header">
|
||||
<button class="btn-back-arrow" @click="backToList">← Notes</button>
|
||||
<div class="editor-header-right">
|
||||
<span v-if="dirty && !saving" class="unsaved">Unsaved</span>
|
||||
<span v-if="saving" class="saving-txt">Saving...</span>
|
||||
<button class="btn-save" :disabled="saving || !dirty" @click="saveNote">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-title-row">
|
||||
<input
|
||||
v-model="noteTitle"
|
||||
class="note-title-input"
|
||||
placeholder="Note title"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="tag-row">
|
||||
<TagInput
|
||||
v-model="noteTags"
|
||||
:fetchTags="(q: string) => notesStore.fetchAllTags(q)"
|
||||
/>
|
||||
<button
|
||||
class="btn-suggest-tags"
|
||||
:disabled="tagSuggestions.suggestingTags.value"
|
||||
title="Auto-suggest tags from title and body"
|
||||
@click="tagSuggestions.fetchTagSuggestions()"
|
||||
>
|
||||
{{ tagSuggestions.suggestingTags.value ? '...' : 'Suggest' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tag suggestions strip -->
|
||||
<div v-if="tagSuggestions.suggestedTags.value.length" class="tag-suggestions">
|
||||
<span class="tag-suggestions-label">Suggested:</span>
|
||||
<button
|
||||
v-for="tag in tagSuggestions.suggestedTags.value"
|
||||
:key="tag"
|
||||
:class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
|
||||
@click="tagSuggestions.applyTagSuggestion(tag)"
|
||||
>
|
||||
#{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}
|
||||
</button>
|
||||
<button class="btn-dismiss-suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="editor-area">
|
||||
<TiptapEditor v-model="noteBody" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ── LIST VIEW ── -->
|
||||
<template v-else>
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Notes</span>
|
||||
</div>
|
||||
|
||||
<div v-if="listLoading" class="state-msg">Loading...</div>
|
||||
|
||||
<ul v-else class="note-list">
|
||||
<li
|
||||
v-for="note in projectNotes"
|
||||
:key="note.id"
|
||||
class="note-row"
|
||||
:class="{ active: editingId === note.id }"
|
||||
@click="openNote(note.id)"
|
||||
>
|
||||
<div class="note-row-main">
|
||||
<span class="note-row-title">{{ note.title }}</span>
|
||||
<span v-if="note.tags?.length" class="note-row-tags">
|
||||
<span v-for="tag in note.tags.slice(0, 3)" :key="tag" class="note-tag-pill">#{{ tag }}</span>
|
||||
<span v-if="note.tags.length > 3" class="note-tag-more">+{{ note.tags.length - 3 }}</span>
|
||||
</span>
|
||||
<span class="note-row-age">{{ formatDate(note.updated_at) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="note-row-actions" @click.stop>
|
||||
<template v-if="deletingId === note.id">
|
||||
<button
|
||||
class="btn-confirm-delete"
|
||||
:disabled="pendingDelete === note.id"
|
||||
@click="requestDelete(note.id, $event)"
|
||||
>
|
||||
{{ pendingDelete === note.id ? '...' : 'Delete?' }}
|
||||
</button>
|
||||
<button class="btn-cancel-delete" @click="cancelDelete($event)">✕</button>
|
||||
</template>
|
||||
<button
|
||||
v-else
|
||||
class="btn-delete"
|
||||
title="Delete note"
|
||||
@click="requestDelete(note.id, $event)"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li v-if="projectNotes.length === 0" class="state-msg">
|
||||
No notes yet — ask the agent to create one.
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ws-note-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-back-arrow {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-back-arrow:hover { text-decoration: underline; }
|
||||
|
||||
.editor-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.unsaved { font-size: 0.72rem; color: var(--color-text-muted); }
|
||||
.saving-txt { font-size: 0.72rem; color: var(--color-primary); }
|
||||
|
||||
.btn-save {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 0.25rem 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-save:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
/* Editor */
|
||||
.note-title-row {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-title-input {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
padding: 0;
|
||||
}
|
||||
.note-title-input:focus { outline: none; }
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-row > :first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.btn-suggest-tags {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
padding: 0.25rem 0.55rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.btn-suggest-tags:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.btn-suggest-tags:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.tag-suggestions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-suggestions-label {
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-tag-suggestion {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.55rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-tag-suggestion:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
.btn-tag-suggestion.applied {
|
||||
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-dismiss-suggestions {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
margin-left: auto;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
.btn-dismiss-suggestions:hover { color: var(--color-text); }
|
||||
|
||||
.editor-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
/* List */
|
||||
.note-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.note-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
|
||||
.note-row.active { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
|
||||
|
||||
.note-row-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.note-row-title {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.note-row-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.note-tag-pill {
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border-radius: 999px;
|
||||
padding: 0 0.35rem;
|
||||
white-space: nowrap;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
.note-tag-more {
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note-row-age {
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-row-actions {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s, color 0.1s;
|
||||
}
|
||||
.note-row:hover .btn-delete { opacity: 1; }
|
||||
.btn-delete:hover { color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.btn-confirm-delete {
|
||||
background: none;
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
color: var(--color-danger, #e74c3c);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-confirm-delete:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.btn-cancel-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
.btn-cancel-delete:hover { color: var(--color-text); }
|
||||
|
||||
.state-msg {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user