From 74ebb8a87fcbbd48d54d2e6f3f91b39aa9b010bc Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 7 Mar 2026 11:34:06 -0500
Subject: [PATCH] Project Workspace view, abort button, session invalidation,
 workspace fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/App.vue                          |   3 +
 .../src/components/WorkspaceNoteEditor.vue    | 571 ++++++++++++++++
 .../src/components/WorkspaceTaskPanel.vue     | 579 +++++++++++++++++
 frontend/src/router/index.ts                  |   5 +
 frontend/src/stores/chat.ts                   |   2 +
 frontend/src/views/ChatView.vue               |  24 +
 frontend/src/views/HomeView.vue               |   2 +-
 frontend/src/views/ProjectView.vue            |  46 +-
 frontend/src/views/SettingsView.vue           |  44 ++
 frontend/src/views/WorkspaceView.vue          | 607 ++++++++++++++++++
 src/fabledassistant/routes/auth.py            |  16 +
 src/fabledassistant/routes/chat.py            |   5 +-
 src/fabledassistant/services/auth.py          |  13 +
 .../services/generation_task.py               |   2 +
 src/fabledassistant/services/llm.py           |  17 +
 15 files changed, 1927 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/WorkspaceNoteEditor.vue
 create mode 100644 frontend/src/components/WorkspaceTaskPanel.vue
 create mode 100644 frontend/src/views/WorkspaceView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 093b35a..0ff01fb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -277,6 +277,9 @@ onUnmounted(() => {
   min-height: 0;
   overflow-y: auto;
 }
+.app-content:has(.workspace-root) {
+  overflow: hidden;
+}
 
 /* Shortcuts overlay */
 .shortcuts-overlay {
diff --git a/frontend/src/components/WorkspaceNoteEditor.vue b/frontend/src/components/WorkspaceNoteEditor.vue
new file mode 100644
index 0000000..922d9ca
--- /dev/null
+++ b/frontend/src/components/WorkspaceNoteEditor.vue
@@ -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>
diff --git a/frontend/src/components/WorkspaceTaskPanel.vue b/frontend/src/components/WorkspaceTaskPanel.vue
new file mode 100644
index 0000000..b17308f
--- /dev/null
+++ b/frontend/src/components/WorkspaceTaskPanel.vue
@@ -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>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 4b672ed..bff27a4 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -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",
diff --git a/frontend/src/stores/chat.ts b/frontend/src/stores/chat.ts
index f9fb6b8..15c8c11 100644
--- a/frontend/src/stores/chat.ts
+++ b/frontend/src/stores/chat.ts
@@ -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;
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index c9ff665..82aa006 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -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);
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 625bdff..14a8242 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -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`),
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 9681a98..73d866b 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -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;
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 0a4da62..bb0089d 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -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);
diff --git a/frontend/src/views/WorkspaceView.vue b/frontend/src/views/WorkspaceView.vue
new file mode 100644
index 0000000..a99438d
--- /dev/null
+++ b/frontend/src/views/WorkspaceView.vue
@@ -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>
diff --git a/src/fabledassistant/routes/auth.py b/src/fabledassistant/routes/auth.py
index 434e991..8d4c040 100644
--- a/src/fabledassistant/routes/auth.py
+++ b/src/fabledassistant/routes/auth.py
@@ -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():
diff --git a/src/fabledassistant/routes/chat.py b/src/fabledassistant/routes/chat.py
index 352019d..7ac9aa0 100644
--- a/src/fabledassistant/routes/chat.py
+++ b/src/fabledassistant/routes/chat.py
@@ -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({
diff --git a/src/fabledassistant/services/auth.py b/src/fabledassistant/services/auth.py
index 57f8beb..c203e83 100644
--- a/src/fabledassistant/services/auth.py
+++ b/src/fabledassistant/services/auth.py
@@ -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.
 
diff --git a/src/fabledassistant/services/generation_task.py b/src/fabledassistant/services/generation_task.py
index 1ec227c..7a16c29 100644
--- a/src/fabledassistant/services/generation_task.py
+++ b/src/fabledassistant/services/generation_task.py
@@ -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
diff --git a/src/fabledassistant/services/llm.py b/src/fabledassistant/services/llm.py
index 6752c52..5fdd5c8 100644
--- a/src/fabledassistant/services/llm.py
+++ b/src/fabledassistant/services/llm.py
@@ -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(