Workspace UI overhaul: rail note panel, split task detail, project goal header

- WorkspaceNoteEditor: replace toggling list/editor views with always-visible
  left rail (155px) showing note list alongside editor pane; persist last-open
  note per project in localStorage (workspace_note_{projectId})
- WorkspaceTaskPanel: add priority dot + due date on task rows; replace full
  overlay detail with bottom-split (44% list / 56% detail); close button
  replaces back nav; active row highlighted; fade transition
- WorkspaceView: show project goal in header instead of 'Workspace'; non-equal
  panel widths (0.8fr / 1.1fr / 1.1fr); empty chat quick-action chips (Project
  status / New note / Add tasks); prefill() helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/WorkspaceTaskPanel.vue

@@ -56,6 +56,17 @@ const STATUS_ICON: Record<string, string> = {
   done: "✓",
 };
 
+const PRIORITY_CLASS: Record<string, string> = {
+  high: "priority-high",
+  medium: "priority-medium",
+  low: "priority-low",
+};
+
+function isRowOverdue(task: Task): boolean {
+  if (!task.due_date || task.status === "done") return false;
+  return task.due_date < new Date().toISOString().slice(0, 10);
+}
+
 // Group tasks by milestone, "No Milestone" first
 const groupedTasks = computed(() => {
   const noMs = tasks.value.filter((t) => t.milestone_id === null);
@@ -207,45 +218,99 @@ defineExpose({ reload: loadAll });
 <template>
   <div class="ws-task-panel">
 
-    <!-- Slide-over detail view -->
-    <Transition name="slide">
+    <!-- Task list — always visible, shrinks when detail is open -->
+    <div :class="['task-list-view', { 'has-detail': !!activeTask }]">
+      <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', { 'task-active': activeTask?.id === task.id }]"
+              @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 v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
+              <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
+              <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</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', { 'task-active': activeTask?.id === task.id }]"
+              @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 v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
+              <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
+              <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</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>
+
+    <!-- Detail pane — bottom split when a task is selected -->
+    <Transition name="detail-fade">
       <div v-if="activeTask" class="task-detail">
         <div class="detail-header">
-          <button class="btn-back-arrow" @click="closeTask">← Tasks</button>
-          <RouterLink
-            :to="`/tasks/${activeTask.id}/edit`"
-            target="_blank"
-            class="btn-edit-task"
-            title="Open full editor"
-          >Edit ↗</RouterLink>
-          <span
-            :class="['status-badge', `status-${activeTask.status}`]"
-            @click="cycleStatus(activeTask, $event)"
-            title="Click to cycle status"
-          >
-            {{ STATUS_ICON[activeTask.status] ?? "○" }}
-            {{ activeTask.status.replace("_", " ") }}
+          <RouterLink :to="`/tasks/${activeTask.id}/edit`" target="_blank" class="btn-edit-task" title="Open full editor">Edit ↗</RouterLink>
+          <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-confirm" :disabled="deletingTask" @click="deleteActiveTask">{{ deletingTask ? '...' : 'Delete?' }}</button>
             <button class="btn-delete-cancel" aria-label="Cancel delete" @click="cancelDeleteTask">✕</button>
           </template>
           <button v-else class="btn-delete-task" title="Delete task" @click="deleteActiveTask">
-            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
           </button>
+          <button class="btn-close-detail" @click="closeTask" aria-label="Close detail">✕</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>
+          <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>
           <select
             class="milestone-select"
             :value="activeTask.milestone_id ?? ''"
@@ -268,90 +333,6 @@ defineExpose({ reload: loadAll });
       </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>
 
@@ -370,9 +351,16 @@ defineExpose({ reload: loadAll });
 .task-list-view {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
+.task-list-view.has-detail {
+  flex: 0 0 44%;
+}
+.task-active {
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) !important;
+}
 
 .panel-header {
   padding: 0.6rem 0.75rem;
@@ -510,15 +498,15 @@ defineExpose({ reload: loadAll });
 
 .state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
 
-/* ── Slide-over detail ── */
+/* ── Detail pane (bottom split) ── */
 .task-detail {
-  position: absolute;
-  inset: 0;
-  background: var(--color-surface);
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  z-index: 5;
+  background: var(--color-surface);
+  border-top: 2px solid var(--color-border);
 }
 
 .detail-header {
@@ -530,17 +518,6 @@ defineExpose({ reload: loadAll });
   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;
@@ -669,11 +646,45 @@ defineExpose({ reload: loadAll });
   border-top: 1px solid var(--color-border);
 }
 
-/* Slide transition */
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.2s ease;
+/* Detail fade transition */
+.detail-fade-enter-active,
+.detail-fade-leave-active { transition: opacity 0.15s; }
+.detail-fade-enter-from,
+.detail-fade-leave-to { opacity: 0; }
+
+/* Priority dots on task rows */
+.priority-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  flex-shrink: 0;
 }
-.slide-enter-from { transform: translateX(100%); }
-.slide-leave-to { transform: translateX(100%); }
+.priority-high   { background: #ef4444; }
+.priority-medium { background: #f59e0b; }
+.priority-low    { background: #3b82f6; }
+
+/* Due date on task rows */
+.task-due {
+  font-size: 0.65rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.task-due.overdue {
+  color: var(--color-danger, #e74c3c);
+  font-weight: 600;
+}
+
+/* Close detail button */
+.btn-close-detail {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.15rem 0.3rem;
+  border-radius: 3px;
+  margin-left: 0.2rem;
+}
+.btn-close-detail:hover { color: var(--color-text); }
 </style>