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>

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>