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:
@@ -277,6 +277,9 @@ onUnmounted(() => {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.app-content:has(.workspace-root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Shortcuts overlay */
|
||||
.shortcuts-overlay {
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,579 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { apiGet, apiPatch, apiPost, apiDelete } from "@/api/client";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import TaskLogSection from "@/components/TaskLogSection.vue";
|
||||
|
||||
const props = defineProps<{ projectId: number }>();
|
||||
|
||||
const toast = useToastStore();
|
||||
|
||||
interface Milestone {
|
||||
id: number;
|
||||
title: string;
|
||||
status: string;
|
||||
order_index: number;
|
||||
}
|
||||
|
||||
interface Task {
|
||||
id: number;
|
||||
title: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
milestone_id: number | null;
|
||||
due_date: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
const tasks = ref<Task[]>([]);
|
||||
const milestones = ref<Milestone[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
// Detail slide-over
|
||||
const activeTask = ref<Task | null>(null);
|
||||
|
||||
// Collapsed milestone groups (set of milestone IDs, null = "No Milestone" group)
|
||||
const collapsedGroups = ref<Set<number | null>>(new Set());
|
||||
|
||||
// New task quick-add
|
||||
const newTaskTitle = ref("");
|
||||
const addingTask = ref(false);
|
||||
|
||||
const STATUS_CYCLE: Record<string, string> = {
|
||||
todo: "in_progress",
|
||||
in_progress: "done",
|
||||
done: "todo",
|
||||
};
|
||||
|
||||
const STATUS_ICON: Record<string, string> = {
|
||||
todo: "○",
|
||||
in_progress: "▶",
|
||||
done: "✓",
|
||||
};
|
||||
|
||||
// Group tasks by milestone, "No Milestone" first
|
||||
const groupedTasks = computed(() => {
|
||||
const noMs = tasks.value.filter((t) => t.milestone_id === null);
|
||||
const msGroups = milestones.value.map((ms) => ({
|
||||
milestone: ms,
|
||||
tasks: tasks.value.filter((t) => t.milestone_id === ms.id),
|
||||
}));
|
||||
return { noMilestone: noMs, milestoneGroups: msGroups };
|
||||
});
|
||||
|
||||
async function loadAll() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const [tasksRes, msRes] = await Promise.all([
|
||||
apiGet<{ notes: Task[] }>(`/api/projects/${props.projectId}/notes?type=task&limit=200`),
|
||||
apiGet<{ milestones: Milestone[] }>(`/api/projects/${props.projectId}/milestones`),
|
||||
]);
|
||||
tasks.value = tasksRes.notes ?? [];
|
||||
milestones.value = msRes.milestones ?? [];
|
||||
} catch {
|
||||
toast.show("Failed to load tasks", "error");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function cycleStatus(task: Task, e: Event) {
|
||||
e.stopPropagation();
|
||||
const next = STATUS_CYCLE[task.status] ?? "todo";
|
||||
try {
|
||||
await apiPatch(`/api/tasks/${task.id}/status`, { status: next });
|
||||
task.status = next;
|
||||
if (activeTask.value?.id === task.id) activeTask.value.status = next;
|
||||
} catch {
|
||||
toast.show("Failed to update status", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleGroup(key: number | null) {
|
||||
if (collapsedGroups.value.has(key)) {
|
||||
collapsedGroups.value.delete(key);
|
||||
} else {
|
||||
collapsedGroups.value.add(key);
|
||||
}
|
||||
}
|
||||
|
||||
function openTask(task: Task) {
|
||||
activeTask.value = task;
|
||||
}
|
||||
|
||||
function closeTask() {
|
||||
activeTask.value = null;
|
||||
deleteConfirmPending.value = false;
|
||||
}
|
||||
|
||||
async function addTask() {
|
||||
const title = newTaskTitle.value.trim();
|
||||
if (!title) return;
|
||||
addingTask.value = true;
|
||||
try {
|
||||
const task = await apiPost<Task>("/api/tasks", {
|
||||
title,
|
||||
project_id: props.projectId,
|
||||
status: "todo",
|
||||
});
|
||||
tasks.value.unshift(task);
|
||||
newTaskTitle.value = "";
|
||||
} catch {
|
||||
toast.show("Failed to create task", "error");
|
||||
} finally {
|
||||
addingTask.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const deletingTask = ref(false);
|
||||
const deleteConfirmPending = ref(false);
|
||||
|
||||
async function deleteActiveTask() {
|
||||
if (!activeTask.value) return;
|
||||
if (!deleteConfirmPending.value) {
|
||||
deleteConfirmPending.value = true;
|
||||
return;
|
||||
}
|
||||
deletingTask.value = true;
|
||||
try {
|
||||
await apiDelete(`/api/tasks/${activeTask.value.id}`);
|
||||
tasks.value = tasks.value.filter((t) => t.id !== activeTask.value!.id);
|
||||
activeTask.value = null;
|
||||
deleteConfirmPending.value = false;
|
||||
} catch {
|
||||
toast.show("Failed to delete task", "error");
|
||||
} finally {
|
||||
deletingTask.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function cancelDeleteTask() {
|
||||
deleteConfirmPending.value = false;
|
||||
}
|
||||
|
||||
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" });
|
||||
}
|
||||
|
||||
onMounted(loadAll);
|
||||
defineExpose({ reload: loadAll });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ws-task-panel">
|
||||
|
||||
<!-- Slide-over detail view -->
|
||||
<Transition name="slide">
|
||||
<div v-if="activeTask" class="task-detail">
|
||||
<div class="detail-header">
|
||||
<button class="btn-back-arrow" @click="closeTask">← Tasks</button>
|
||||
<span
|
||||
:class="['status-badge', `status-${activeTask.status}`]"
|
||||
@click="cycleStatus(activeTask, $event)"
|
||||
title="Click to cycle status"
|
||||
>
|
||||
{{ STATUS_ICON[activeTask.status] ?? "○" }}
|
||||
{{ activeTask.status.replace("_", " ") }}
|
||||
</span>
|
||||
<template v-if="deleteConfirmPending">
|
||||
<button class="btn-delete-confirm" :disabled="deletingTask" @click="deleteActiveTask">
|
||||
{{ deletingTask ? '...' : 'Delete?' }}
|
||||
</button>
|
||||
<button class="btn-delete-cancel" @click="cancelDeleteTask">✕</button>
|
||||
</template>
|
||||
<button v-else class="btn-delete-task" title="Delete task" @click="deleteActiveTask">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="detail-title">{{ activeTask.title }}</h3>
|
||||
|
||||
<div class="detail-meta">
|
||||
<span v-if="activeTask.priority && activeTask.priority !== 'none'" class="meta-chip priority">
|
||||
{{ activeTask.priority }}
|
||||
</span>
|
||||
<span v-if="activeTask.due_date" class="meta-chip due">
|
||||
Due {{ activeTask.due_date }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-log">
|
||||
<TaskLogSection :task-id="activeTask.id" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Task list (always mounted, hidden during slide-over via v-show) -->
|
||||
<div v-show="!activeTask" class="task-list-view">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Tasks</span>
|
||||
</div>
|
||||
|
||||
<div class="task-add">
|
||||
<input
|
||||
v-model="newTaskTitle"
|
||||
class="task-add-input"
|
||||
placeholder="New task..."
|
||||
@keydown.enter="addTask"
|
||||
/>
|
||||
<button class="btn-add" :disabled="addingTask || !newTaskTitle.trim()" @click="addTask">+</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state-msg">Loading...</div>
|
||||
|
||||
<div v-else class="groups-scroll">
|
||||
<!-- No Milestone group (always first) -->
|
||||
<div class="ms-group">
|
||||
<button
|
||||
class="ms-group-header"
|
||||
@click="toggleGroup(null)"
|
||||
>
|
||||
<span class="ms-chevron">{{ collapsedGroups.has(null) ? '▶' : '▼' }}</span>
|
||||
<span class="ms-name">No Milestone</span>
|
||||
<span class="ms-count">{{ groupedTasks.noMilestone.length }}</span>
|
||||
</button>
|
||||
<ul v-show="!collapsedGroups.has(null)" class="task-items">
|
||||
<li
|
||||
v-for="task in groupedTasks.noMilestone"
|
||||
:key="task.id"
|
||||
class="task-row"
|
||||
@click="openTask(task)"
|
||||
>
|
||||
<button
|
||||
:class="['status-dot', `status-${task.status}`]"
|
||||
:title="`${task.status} — click to cycle`"
|
||||
@click="cycleStatus(task, $event)"
|
||||
>{{ STATUS_ICON[task.status] ?? '○' }}</button>
|
||||
<span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
|
||||
<span class="task-age">{{ formatDate(task.updated_at) }}</span>
|
||||
</li>
|
||||
<li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Milestone groups -->
|
||||
<div
|
||||
v-for="{ milestone, tasks: msTasks } in groupedTasks.milestoneGroups"
|
||||
:key="milestone.id"
|
||||
class="ms-group"
|
||||
>
|
||||
<button
|
||||
class="ms-group-header"
|
||||
@click="toggleGroup(milestone.id)"
|
||||
>
|
||||
<span class="ms-chevron">{{ collapsedGroups.has(milestone.id) ? '▶' : '▼' }}</span>
|
||||
<span class="ms-name">{{ milestone.title }}</span>
|
||||
<span :class="['ms-status', `ms-status-${milestone.status}`]">{{ milestone.status.replace('_',' ') }}</span>
|
||||
<span class="ms-count">{{ msTasks.length }}</span>
|
||||
</button>
|
||||
<ul v-show="!collapsedGroups.has(milestone.id)" class="task-items">
|
||||
<li
|
||||
v-for="task in msTasks"
|
||||
:key="task.id"
|
||||
class="task-row"
|
||||
@click="openTask(task)"
|
||||
>
|
||||
<button
|
||||
:class="['status-dot', `status-${task.status}`]"
|
||||
:title="`${task.status} — click to cycle`"
|
||||
@click="cycleStatus(task, $event)"
|
||||
>{{ STATUS_ICON[task.status] ?? '○' }}</button>
|
||||
<span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
|
||||
<span class="task-age">{{ formatDate(task.updated_at) }}</span>
|
||||
</li>
|
||||
<li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ws-task-panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ── List view ── */
|
||||
.task-list-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-add {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-add-input {
|
||||
flex: 1;
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
padding: 0.28rem 0.5rem;
|
||||
font-size: 0.83rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.task-add-input:focus { outline: none; border-color: var(--color-primary); }
|
||||
|
||||
.btn-add {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 0.28rem 0.55rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn-add:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
.groups-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ms-group {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.ms-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0.4rem 0.65rem;
|
||||
background: var(--color-surface-raised, color-mix(in srgb, var(--color-surface) 92%, var(--color-text)));
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ms-group-header:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
|
||||
|
||||
.ms-chevron { font-size: 0.6rem; color: var(--color-text-muted); width: 0.8rem; }
|
||||
.ms-name { flex: 1; font-weight: 600; font-size: 0.8rem; }
|
||||
.ms-count { font-size: 0.72rem; color: var(--color-text-muted); background: var(--color-bg); border-radius: 10px; padding: 0 0.4rem; }
|
||||
|
||||
.ms-status {
|
||||
font-size: 0.68rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.ms-status-active { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
|
||||
.ms-status-completed { background: color-mix(in srgb, var(--color-success, #27ae60) 15%, transparent); color: var(--color-success, #27ae60); }
|
||||
|
||||
.task-items {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.task-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.65rem 0.35rem 1.4rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
}
|
||||
.task-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
|
||||
.task-row:last-child { border-bottom: none; }
|
||||
|
||||
.status-dot {
|
||||
flex-shrink: 0;
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--color-border);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.62rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.status-dot.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
.status-dot.status-done { border-color: var(--color-success, #27ae60); color: var(--color-success, #27ae60); }
|
||||
|
||||
.task-title {
|
||||
flex: 1;
|
||||
font-size: 0.83rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.task-title.done { text-decoration: line-through; color: var(--color-text-muted); }
|
||||
|
||||
.task-age {
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }
|
||||
|
||||
.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
|
||||
|
||||
/* ── Slide-over detail ── */
|
||||
.task-detail {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
.status-badge {
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid var(--color-border);
|
||||
background: none;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
.status-badge.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
|
||||
.status-badge.status-done { border-color: var(--color-success, #27ae60); color: var(--color-success, #27ae60); background: color-mix(in srgb, var(--color-success, #27ae60) 10%, transparent); }
|
||||
|
||||
.btn-delete-task {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.btn-delete-task:hover { color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.btn-delete-confirm {
|
||||
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;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.btn-delete-confirm:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.btn-delete-cancel {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
.btn-delete-cancel:hover { color: var(--color-text); }
|
||||
|
||||
.detail-title {
|
||||
padding: 0.75rem 0.75rem 0.25rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
padding: 0 0.75rem 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta-chip {
|
||||
font-size: 0.72rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.detail-log {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 0.6rem 0.6rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Slide transition */
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.slide-enter-from { transform: translateX(100%); }
|
||||
.slide-leave-to { transform: translateX(100%); }
|
||||
</style>
|
||||
@@ -75,6 +75,11 @@ const router = createRouter({
|
||||
name: "project-view",
|
||||
component: () => import("@/views/ProjectView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/workspace/:projectId",
|
||||
name: "workspace",
|
||||
component: () => import("@/views/WorkspaceView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/tasks",
|
||||
name: "tasks",
|
||||
|
||||
@@ -156,6 +156,7 @@ export const useChatStore = defineStore("chat", () => {
|
||||
contextNoteTitle?: string,
|
||||
excludeNoteIds?: number[],
|
||||
ragProjectId?: number | null,
|
||||
workspaceProjectId?: number | null,
|
||||
) {
|
||||
if (!currentConversation.value) return;
|
||||
|
||||
@@ -206,6 +207,7 @@ export const useChatStore = defineStore("chat", () => {
|
||||
excluded_note_ids: excludeNoteIds?.length ? excludeNoteIds : undefined,
|
||||
think,
|
||||
rag_project_id: ragProjectId ?? undefined,
|
||||
workspace_project_id: workspaceProjectId ?? undefined,
|
||||
},
|
||||
);
|
||||
assistantMessageId = resp.assistant_message_id;
|
||||
|
||||
@@ -458,6 +458,14 @@ onUnmounted(() => {
|
||||
</svg>
|
||||
</button>
|
||||
<h2>{{ store.currentConversation.title || "New Chat" }}</h2>
|
||||
<button
|
||||
v-if="store.streaming"
|
||||
class="btn-abort"
|
||||
@click="store.cancelGeneration()"
|
||||
title="Stop generation"
|
||||
>
|
||||
■ Stop
|
||||
</button>
|
||||
<button
|
||||
v-if="store.currentConversation.messages.length"
|
||||
class="btn-summarize"
|
||||
@@ -834,6 +842,22 @@ onUnmounted(() => {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.btn-abort {
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: none;
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-abort:hover {
|
||||
background: var(--color-danger, #e74c3c);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-summarize {
|
||||
padding: 0.3rem 0.75rem;
|
||||
background: var(--color-bg-secondary);
|
||||
|
||||
@@ -122,7 +122,7 @@ onMounted(async () => {
|
||||
|
||||
const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, otherRes] =
|
||||
await Promise.allSettled([
|
||||
apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=8"),
|
||||
apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=16"),
|
||||
apiGet<TaskListResponse>(`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`),
|
||||
apiGet<TaskListResponse>(`/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`),
|
||||
apiGet<TaskListResponse>(`/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`),
|
||||
|
||||
@@ -296,13 +296,22 @@ function formatDate(dateStr?: string | null): string {
|
||||
<main class="project-view">
|
||||
<div class="page-header">
|
||||
<router-link to="/projects" class="btn-back">Back to Projects</router-link>
|
||||
<button
|
||||
v-if="project"
|
||||
class="btn-danger-outline"
|
||||
@click="showDeleteConfirm = true"
|
||||
>
|
||||
Delete Project
|
||||
</button>
|
||||
<div class="page-header-actions">
|
||||
<router-link
|
||||
v-if="project"
|
||||
:to="`/workspace/${project.id}`"
|
||||
class="btn-outline"
|
||||
>
|
||||
Open Workspace
|
||||
</router-link>
|
||||
<button
|
||||
v-if="project"
|
||||
class="btn-danger-outline"
|
||||
@click="showDeleteConfirm = true"
|
||||
>
|
||||
Delete Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="loading" class="loading-msg">Loading...</p>
|
||||
@@ -612,6 +621,12 @@ function formatDate(dateStr?: string | null): string {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.page-header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
@@ -621,6 +636,23 @@ function formatDate(dateStr?: string | null): string {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
padding: 0.35rem 0.8rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.btn-outline:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
}
|
||||
|
||||
.btn-danger-outline {
|
||||
padding: 0.35rem 0.8rem;
|
||||
background: none;
|
||||
|
||||
@@ -21,6 +21,7 @@ const currentPassword = ref("");
|
||||
const newPassword = ref("");
|
||||
const confirmNewPassword = ref("");
|
||||
const changingPassword = ref(false);
|
||||
const invalidatingSessions = ref(false);
|
||||
const saving = ref(false);
|
||||
const saved = ref(false);
|
||||
const exporting = ref(false);
|
||||
@@ -155,6 +156,18 @@ async function changeEmail() {
|
||||
}
|
||||
}
|
||||
|
||||
async function invalidateSessions() {
|
||||
invalidatingSessions.value = true;
|
||||
try {
|
||||
await apiPost("/api/auth/invalidate-sessions", {});
|
||||
toastStore.show("All other sessions have been invalidated");
|
||||
} catch {
|
||||
toastStore.show("Failed to invalidate sessions", "error");
|
||||
} finally {
|
||||
invalidatingSessions.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function changePassword() {
|
||||
if (newPassword.value !== confirmNewPassword.value) {
|
||||
toastStore.show("New passwords do not match", "error");
|
||||
@@ -457,6 +470,20 @@ function hostname(url: string): string {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Invalidate Sessions ── half width ── -->
|
||||
<section class="settings-section">
|
||||
<h2>Active Sessions</h2>
|
||||
<p class="section-desc">
|
||||
Sign out all other devices and sessions. Use this after an SSO password change
|
||||
to ensure stale sessions are revoked.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button class="btn-danger-outline" @click="invalidateSessions" :disabled="invalidatingSessions">
|
||||
{{ invalidatingSessions ? "Invalidating..." : "Invalidate All Other Sessions" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Change Password ── half width ── -->
|
||||
<section class="settings-section">
|
||||
<h2>Change Password</h2>
|
||||
@@ -882,6 +909,23 @@ function hostname(url: string): string {
|
||||
.btn-save:disabled { opacity: 0.6; cursor: default; }
|
||||
.btn-save:hover:not(:disabled) { opacity: 0.9; }
|
||||
|
||||
.btn-danger-outline {
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: none;
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-danger-outline:hover:not(:disabled) {
|
||||
background: var(--color-danger, #e74c3c);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger-outline:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.btn-secondary {
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: var(--color-bg-secondary);
|
||||
|
||||
@@ -0,0 +1,607 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { apiGet } from "@/api/client";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import ChatMessage from "@/components/ChatMessage.vue";
|
||||
import ToolCallCard from "@/components/ToolCallCard.vue";
|
||||
import ToolConfirmCard from "@/components/ToolConfirmCard.vue";
|
||||
import WorkspaceTaskPanel from "@/components/WorkspaceTaskPanel.vue";
|
||||
import WorkspaceNoteEditor from "@/components/WorkspaceNoteEditor.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const chatStore = useChatStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const toast = useToastStore();
|
||||
|
||||
const projectId = computed(() => Number(route.params.projectId));
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const project = ref<Project | null>(null);
|
||||
const messageInput = ref("");
|
||||
const messagesEl = ref<HTMLElement | null>(null);
|
||||
const inputEl = ref<HTMLTextAreaElement | null>(null);
|
||||
const taskPanelRef = ref<InstanceType<typeof WorkspaceTaskPanel> | null>(null);
|
||||
const activeNoteId = ref<number | null>(null);
|
||||
let workspaceConvId: number | null = null;
|
||||
let isNewConv = false;
|
||||
|
||||
function _storageKey(pid: number) {
|
||||
return `workspace_conv_${pid}`;
|
||||
}
|
||||
|
||||
// Panel collapse state
|
||||
const panelOpen = ref({ tasks: true, chat: true, notes: true });
|
||||
|
||||
const gridColumns = computed(() => {
|
||||
const cols = [
|
||||
panelOpen.value.tasks ? "1fr" : "0px",
|
||||
panelOpen.value.chat ? "1fr" : "0px",
|
||||
panelOpen.value.notes ? "1fr" : "0px",
|
||||
];
|
||||
return cols.join(" ");
|
||||
});
|
||||
|
||||
// SSE watcher
|
||||
const processedCount = ref(0);
|
||||
|
||||
watch(
|
||||
() => chatStore.streamingToolCalls,
|
||||
(calls) => {
|
||||
for (let i = processedCount.value; i < calls.length; i++) {
|
||||
const tc = calls[i];
|
||||
if (
|
||||
["create_note", "update_note"].includes(tc.function) &&
|
||||
tc.status === "success" &&
|
||||
tc.result?.data?.id
|
||||
) {
|
||||
activeNoteId.value = tc.result.data.id as number;
|
||||
}
|
||||
if (
|
||||
["create_task", "update_task"].includes(tc.function) &&
|
||||
tc.status === "success"
|
||||
) {
|
||||
taskPanelRef.value?.reload();
|
||||
}
|
||||
}
|
||||
processedCount.value = calls.length;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => chatStore.streaming,
|
||||
(s) => {
|
||||
if (!s) processedCount.value = 0;
|
||||
}
|
||||
);
|
||||
|
||||
const streamingRendered = computed(() => {
|
||||
if (!chatStore.streamingContent) return "";
|
||||
return renderMarkdown(chatStore.streamingContent);
|
||||
});
|
||||
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesEl.value) {
|
||||
messagesEl.value.scrollTop = messagesEl.value.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => chatStore.streamingContent, scrollToBottom);
|
||||
|
||||
function togglePanel(panel: keyof typeof panelOpen.value) {
|
||||
// Ensure at least one panel stays open
|
||||
const open = panelOpen.value;
|
||||
const openCount = [open.tasks, open.chat, open.notes].filter(Boolean).length;
|
||||
if (open[panel] && openCount <= 1) return;
|
||||
panelOpen.value[panel] = !panelOpen.value[panel];
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const content = messageInput.value.trim();
|
||||
if (!content || chatStore.streaming) return;
|
||||
|
||||
messageInput.value = "";
|
||||
resetTextareaHeight();
|
||||
|
||||
await chatStore.sendMessage(
|
||||
content,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
undefined,
|
||||
undefined,
|
||||
projectId.value,
|
||||
projectId.value,
|
||||
);
|
||||
scrollToBottom();
|
||||
nextTick(() => inputEl.value?.focus());
|
||||
}
|
||||
|
||||
function onInputKeydown(e: KeyboardEvent) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
// Prevent App.vue from navigating home when textarea is focused
|
||||
e.stopPropagation();
|
||||
inputEl.value?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
function autoResize() {
|
||||
const el = inputEl.value;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = Math.min(el.scrollHeight, 150) + "px";
|
||||
}
|
||||
|
||||
function resetTextareaHeight() {
|
||||
const el = inputEl.value;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Load project info
|
||||
try {
|
||||
project.value = await apiGet<Project>(`/api/projects/${projectId.value}`);
|
||||
} catch {
|
||||
toast.show("Failed to load project", "error");
|
||||
}
|
||||
|
||||
const key = _storageKey(projectId.value);
|
||||
const storedId = localStorage.getItem(key);
|
||||
|
||||
if (storedId) {
|
||||
// Try to reuse the existing workspace conversation
|
||||
const existingId = Number(storedId);
|
||||
try {
|
||||
await chatStore.fetchConversation(existingId);
|
||||
workspaceConvId = existingId;
|
||||
isNewConv = false;
|
||||
chatStore.reconnectIfGenerating(existingId);
|
||||
} catch {
|
||||
// Conversation was deleted — create a fresh one
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
if (workspaceConvId === null) {
|
||||
// Create a new workspace conversation and persist its ID
|
||||
const title = project.value ? `${project.value.title} — Workspace` : "Workspace";
|
||||
const conv = await chatStore.createConversation(title);
|
||||
workspaceConvId = conv.id;
|
||||
isNewConv = true;
|
||||
await chatStore.fetchConversation(conv.id);
|
||||
localStorage.setItem(key, String(conv.id));
|
||||
}
|
||||
|
||||
nextTick(() => inputEl.value?.focus());
|
||||
});
|
||||
|
||||
onUnmounted(async () => {
|
||||
// Only delete if we created a brand-new conversation this session and it's still empty
|
||||
if (workspaceConvId !== null && isNewConv) {
|
||||
const conv = chatStore.conversations.find((c) => c.id === workspaceConvId);
|
||||
if (conv && conv.message_count === 0) {
|
||||
await chatStore.deleteConversation(workspaceConvId);
|
||||
localStorage.removeItem(_storageKey(projectId.value));
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="workspace-root">
|
||||
<!-- Header -->
|
||||
<header class="ws-header">
|
||||
<router-link :to="project ? `/projects/${project.id}` : '/projects'" class="ws-back">
|
||||
← {{ project?.title ?? "Project" }}
|
||||
</router-link>
|
||||
<span class="ws-title">Workspace</span>
|
||||
<div class="ws-panel-toggles">
|
||||
<button
|
||||
:class="['panel-toggle', { active: panelOpen.tasks }]"
|
||||
title="Toggle Tasks panel"
|
||||
@click="togglePanel('tasks')"
|
||||
>
|
||||
Tasks
|
||||
</button>
|
||||
<button
|
||||
:class="['panel-toggle', { active: panelOpen.chat }]"
|
||||
title="Toggle Chat panel"
|
||||
@click="togglePanel('chat')"
|
||||
>
|
||||
Chat
|
||||
</button>
|
||||
<button
|
||||
:class="['panel-toggle', { active: panelOpen.notes }]"
|
||||
title="Toggle Notes panel"
|
||||
@click="togglePanel('notes')"
|
||||
>
|
||||
Notes
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Three-panel body -->
|
||||
<div class="ws-body" :style="{ gridTemplateColumns: gridColumns }">
|
||||
|
||||
<!-- Left: Tasks -->
|
||||
<div v-show="panelOpen.tasks" class="ws-panel">
|
||||
<WorkspaceTaskPanel
|
||||
v-if="project"
|
||||
ref="taskPanelRef"
|
||||
:project-id="project.id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Center: Chat -->
|
||||
<div v-show="panelOpen.chat" class="ws-panel ws-chat-panel">
|
||||
<div class="chat-messages" ref="messagesEl">
|
||||
<template v-if="chatStore.currentConversation">
|
||||
<ChatMessage
|
||||
v-for="msg in chatStore.currentConversation.messages"
|
||||
:key="msg.id"
|
||||
:message="msg"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Streaming bubble -->
|
||||
<div v-if="chatStore.streaming" class="chat-message role-assistant">
|
||||
<div class="message-bubble streaming-bubble">
|
||||
<div class="message-header">
|
||||
<span class="role-label">{{ settingsStore.assistantName }}</span>
|
||||
</div>
|
||||
<div v-if="chatStore.streamingToolCalls.length" class="streaming-tool-calls">
|
||||
<ToolCallCard
|
||||
v-for="(tc, i) in chatStore.streamingToolCalls"
|
||||
:key="i"
|
||||
:tool-call="tc"
|
||||
/>
|
||||
</div>
|
||||
<ToolConfirmCard
|
||||
v-if="chatStore.streamingPendingTool"
|
||||
:pending-tool="chatStore.streamingPendingTool"
|
||||
@accept="chatStore.confirmTool(true)"
|
||||
@decline="chatStore.confirmTool(false)"
|
||||
/>
|
||||
<div v-if="chatStore.streamingStatus" class="streaming-status-line">
|
||||
<span class="streaming-status-dot"></span>
|
||||
{{ chatStore.streamingStatus }}
|
||||
</div>
|
||||
<details
|
||||
v-if="chatStore.streamingThinking"
|
||||
class="thinking-block"
|
||||
:open="!chatStore.streamingContent"
|
||||
>
|
||||
<summary class="thinking-summary">Reasoning</summary>
|
||||
<pre class="thinking-text">{{ chatStore.streamingThinking }}</pre>
|
||||
</details>
|
||||
<div class="message-content prose" v-html="streamingRendered"></div>
|
||||
<span
|
||||
v-if="!chatStore.streamingStatus && !chatStore.streamingThinking"
|
||||
class="typing-indicator"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
|
||||
class="empty-chat-msg"
|
||||
>
|
||||
Ask the agent to create notes or tasks for this project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-area">
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="messageInput"
|
||||
class="chat-input"
|
||||
placeholder="Message the agent... (Enter to send)"
|
||||
rows="1"
|
||||
:disabled="chatStore.streaming"
|
||||
@keydown="onInputKeydown"
|
||||
@input="autoResize"
|
||||
></textarea>
|
||||
<button
|
||||
v-if="chatStore.streaming"
|
||||
class="btn-abort"
|
||||
title="Stop generation"
|
||||
@click="chatStore.cancelGeneration()"
|
||||
>
|
||||
■ Stop
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-send"
|
||||
:disabled="!messageInput.trim()"
|
||||
@click="sendMessage"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Note Editor -->
|
||||
<div v-show="panelOpen.notes" class="ws-panel">
|
||||
<WorkspaceNoteEditor
|
||||
v-if="project"
|
||||
:project-id="project.id"
|
||||
:active-note-id="activeNoteId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.workspace-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.ws-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
height: 44px;
|
||||
padding: 0 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ws-back {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ws-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ws-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ws-panel-toggles {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.panel-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.panel-toggle.active {
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Three-panel layout */
|
||||
.ws-body {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns 0.2s ease;
|
||||
}
|
||||
|
||||
.ws-panel {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Chat panel */
|
||||
.ws-chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.empty-chat-msg {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.chat-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-send {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.btn-send:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-abort {
|
||||
background: none;
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-abort:hover {
|
||||
background: var(--color-danger, #e74c3c);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Streaming indicators (mirror ChatView) */
|
||||
.chat-message {
|
||||
display: flex;
|
||||
}
|
||||
.role-assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.message-bubble {
|
||||
max-width: 85%;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
.message-header {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.role-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.streaming-tool-calls {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.streaming-status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.streaming-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
.typing-indicator {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.message-content :deep(p) { margin: 0 0 0.5em; }
|
||||
.message-content :deep(p:last-child) { margin-bottom: 0; }
|
||||
|
||||
.thinking-block {
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.thinking-summary {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.thinking-summary::-webkit-details-marker { display: none; }
|
||||
.thinking-summary::before {
|
||||
content: "▶";
|
||||
font-size: 0.6rem;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
details[open] .thinking-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.thinking-text {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -18,6 +18,7 @@ from fabledassistant.services.auth import (
|
||||
get_user_by_id,
|
||||
get_user_by_username,
|
||||
get_user_count,
|
||||
invalidate_other_sessions,
|
||||
is_registration_open,
|
||||
register_with_invitation,
|
||||
reset_password_with_token,
|
||||
@@ -166,6 +167,21 @@ async def update_password():
|
||||
return jsonify({"status": "ok"})
|
||||
|
||||
|
||||
@auth_bp.route("/invalidate-sessions", methods=["POST"])
|
||||
@login_required
|
||||
async def invalidate_sessions_route():
|
||||
"""Invalidate all other active sessions by bumping the session version.
|
||||
|
||||
The current session is kept alive. Useful after an SSO/OAuth password change
|
||||
where the app has no visibility into credential rotation.
|
||||
"""
|
||||
uid = get_current_user_id()
|
||||
new_version = await invalidate_other_sessions(uid)
|
||||
session["session_version"] = new_version
|
||||
await log_audit("sessions_invalidated", user_id=uid, username=g.user.username, ip_address=_client_ip())
|
||||
return jsonify({"status": "ok"})
|
||||
|
||||
|
||||
@auth_bp.route("/email", methods=["PUT"])
|
||||
@login_required
|
||||
async def update_email():
|
||||
|
||||
@@ -118,6 +118,8 @@ async def send_message_route(conv_id: int):
|
||||
excluded_note_ids = data.get("excluded_note_ids") or []
|
||||
think = bool(data.get("think", False))
|
||||
rag_project_id = data.get("rag_project_id") or None
|
||||
workspace_project_id = data.get("workspace_project_id") or None
|
||||
effective_rag_project_id = workspace_project_id or rag_project_id
|
||||
|
||||
# Reject if generation already running for this conversation
|
||||
existing = get_buffer(conv_id)
|
||||
@@ -151,7 +153,8 @@ async def send_message_route(conv_id: int):
|
||||
include_note_ids=include_note_ids,
|
||||
excluded_note_ids=excluded_note_ids,
|
||||
think=think,
|
||||
rag_project_id=rag_project_id,
|
||||
rag_project_id=effective_rag_project_id,
|
||||
workspace_project_id=workspace_project_id,
|
||||
))
|
||||
|
||||
return jsonify({
|
||||
|
||||
@@ -124,6 +124,19 @@ async def change_password(user_id: int, current_password: str, new_password: str
|
||||
return user.session_version
|
||||
|
||||
|
||||
async def invalidate_other_sessions(user_id: int) -> int:
|
||||
"""Bump session_version so all sessions except the current one are invalidated.
|
||||
|
||||
Returns the new session_version so the caller can update the active session cookie.
|
||||
"""
|
||||
async with async_session() as session:
|
||||
user = await session.get(User, user_id)
|
||||
user.session_version += 1
|
||||
await session.commit()
|
||||
logger.info("Sessions invalidated for user %d (%s)", user_id, user.username)
|
||||
return user.session_version
|
||||
|
||||
|
||||
async def is_registration_open() -> bool:
|
||||
"""Check if new user registration is allowed.
|
||||
|
||||
|
||||
@@ -150,6 +150,7 @@ async def run_generation(
|
||||
excluded_note_ids: list[int] | None = None,
|
||||
think: bool = False,
|
||||
rag_project_id: int | None = None,
|
||||
workspace_project_id: int | None = None,
|
||||
) -> None:
|
||||
"""Stream LLM response into buffer with periodic DB flushes."""
|
||||
MAX_TOOL_ROUNDS = 5
|
||||
@@ -181,6 +182,7 @@ async def run_generation(
|
||||
include_note_ids=include_note_ids,
|
||||
excluded_note_ids=excluded_note_ids,
|
||||
rag_project_id=rag_project_id,
|
||||
workspace_project_id=workspace_project_id,
|
||||
))
|
||||
|
||||
messages, context_meta = await context_task
|
||||
|
||||
@@ -451,6 +451,7 @@ async def build_context(
|
||||
include_note_ids: list[int] | None = None,
|
||||
excluded_note_ids: list[int] | None = None,
|
||||
rag_project_id: int | None = None,
|
||||
workspace_project_id: int | None = None,
|
||||
) -> tuple[list[dict], dict]:
|
||||
"""Build messages array for Ollama with system prompt and context.
|
||||
|
||||
@@ -637,6 +638,22 @@ async def build_context(
|
||||
f"\n\n--- Content from {url} ---\n{content}\n--- End URL Content ---"
|
||||
)
|
||||
|
||||
# Inject workspace context when user is in a project workspace
|
||||
if workspace_project_id is not None:
|
||||
from fabledassistant.services.projects import get_project
|
||||
try:
|
||||
wp = await get_project(user_id, workspace_project_id)
|
||||
if wp:
|
||||
system_parts.append(
|
||||
f"\n\n--- Active Workspace ---\n"
|
||||
f"You are in the \"{wp.title}\" project workspace.\n"
|
||||
f"All notes and tasks you create or update MUST belong to this project.\n"
|
||||
f"Always pass project=\"{wp.title}\" when calling create_note or create_task.\n"
|
||||
f"--- End Active Workspace ---"
|
||||
)
|
||||
except Exception:
|
||||
logger.warning("Failed to fetch workspace project %d", workspace_project_id)
|
||||
|
||||
# Inject compressed summary of older exchanges when history has been trimmed
|
||||
if history_summary:
|
||||
system_parts.append(
|
||||
|
||||
Reference in New Issue
Block a user