diff --git a/frontend/src/components/WorkspaceNoteEditor.vue b/frontend/src/components/WorkspaceNoteEditor.vue
index c90bac5..4c02c2f 100644
--- a/frontend/src/components/WorkspaceNoteEditor.vue
+++ b/frontend/src/components/WorkspaceNoteEditor.vue
@@ -28,23 +28,18 @@ interface NoteItem {
 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
+const deletingId = ref<number | null>(null);
+const pendingDelete = ref<number | null>(null);
 const searchQuery = ref("");
 
 const filteredNotes = computed(() => {
   const q = searchQuery.value.trim().toLowerCase();
   if (!q) return projectNotes.value;
   return projectNotes.value.filter(
-    (n) =>
-      n.title.toLowerCase().includes(q) ||
-      n.tags?.some((t) => t.toLowerCase().includes(q))
+    (n) => n.title.toLowerCase().includes(q) || n.tags?.some((t) => t.toLowerCase().includes(q))
   );
 });
 
@@ -72,6 +67,8 @@ const newNoteTitle = ref("");
 const creatingNote = ref(false);
 const newNoteTitleRef = ref<HTMLInputElement | null>(null);
 
+function _noteKey(pid: number) { return `workspace_note_${pid}`; }
+
 async function startNewNote() {
   showNewNoteInput.value = true;
   newNoteTitle.value = "";
@@ -104,7 +101,7 @@ async function createNote() {
   }
 }
 
-// TipTap editor ref (for MarkdownToolbar)
+// TipTap editor ref
 const titleRef = ref<HTMLInputElement | null>(null);
 const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
 const tiptapEditor = computed<Editor | null>(() =>
@@ -184,7 +181,7 @@ async function openNote(id: number) {
     dirty.value = false;
     tagSuggestions.dismissTagSuggestions();
     linkSuggestions.value = [];
-    view.value = "editor";
+    localStorage.setItem(_noteKey(props.projectId), String(id));
     fetchLinkSuggestions();
     emit("note-loaded", note.id);
   } catch {
@@ -202,7 +199,6 @@ async function saveNote() {
       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] = {
@@ -211,7 +207,6 @@ async function saveNote() {
         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()
       );
@@ -223,16 +218,9 @@ async function saveNote() {
   }
 }
 
-function backToList() {
-  view.value = "list";
-  deletingId.value = null;
-  searchQuery.value = "";
-}
-
 function requestDelete(id: number, e: Event) {
   e.stopPropagation();
   if (deletingId.value === id) {
-    // Second click — confirm
     confirmDelete(id);
   } else {
     deletingId.value = id;
@@ -253,7 +241,7 @@ async function confirmDelete(id: number) {
       editingId.value = null;
       noteTitle.value = "";
       noteBody.value = "";
-      view.value = "list";
+      localStorage.removeItem(_noteKey(props.projectId));
     }
   } catch {
     toast.show("Failed to delete note", "error");
@@ -292,93 +280,27 @@ watch(
 );
 
 useAutoSave(dirty, saving, saveNote, 60_000);
-onMounted(loadProjectNotes);
+
+onMounted(async () => {
+  await loadProjectNotes();
+  const stored = localStorage.getItem(_noteKey(props.projectId));
+  if (stored) {
+    const id = Number(stored);
+    if (projectNotes.value.find((n) => n.id === id)) {
+      openNote(id).catch(() => {});
+    }
+  }
+});
+
 onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
 </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">
-          <WordCount :body="noteBody" />
-          <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
-          ref="titleRef"
-          v-model="noteTitle"
-          class="note-title-input"
-          placeholder="Note title"
-          @keydown.ctrl.s.prevent="saveNote"
-          @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
-        />
-      </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" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
-      </div>
-
-      <!-- Formatting toolbar -->
-      <div class="toolbar-row">
-        <MarkdownToolbar :editor="tiptapEditor" />
-      </div>
-
-      <!-- Link suggestions strip -->
-      <div v-if="linkSuggestions.length" class="link-suggest-strip">
-        <span class="link-suggest-label">Links:</span>
-        <span
-          v-for="s in linkSuggestions"
-          :key="s.note_id"
-          class="link-suggest-chip"
-          :title="`Appears ${s.count}× unlinked`"
-        >
-          <button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
-        </span>
-        <button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
-        <button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
-      </div>
-
-      <div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
-        <TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
-      </div>
-    </template>
-
-    <!-- ── LIST VIEW ── -->
-    <template v-else>
-      <div class="panel-header">
+    <!-- Left rail: always-visible note list -->
+    <div class="note-rail">
+      <div class="rail-header">
         <template v-if="showNewNoteInput">
           <input
             ref="newNoteTitleRef"
@@ -389,77 +311,134 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
             @keydown.enter="createNote"
             @keydown.escape="cancelNewNote"
           />
-          <button class="btn-new-note-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
-            {{ creatingNote ? '...' : '+' }}
+          <button class="btn-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
+            {{ creatingNote ? '…' : '+' }}
           </button>
-          <button class="btn-new-note-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
+          <button class="btn-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
         </template>
         <template v-else>
-          <span class="panel-title">Notes</span>
+          <span class="rail-title">Notes</span>
           <button class="btn-new-note" @click="startNewNote" title="New note">+ New</button>
         </template>
       </div>
 
-      <div class="note-search-bar">
+      <div class="rail-search">
         <input
           v-model="searchQuery"
-          class="note-search-input"
-          placeholder="Search notes..."
+          class="rail-search-input"
+          placeholder="Search…"
           type="search"
+          aria-label="Search notes"
         />
-        <button v-if="searchQuery" class="btn-search-clear" @click="searchQuery = ''" title="Clear search">✕</button>
+        <button v-if="searchQuery" class="btn-search-clear" aria-label="Clear search" @click="searchQuery = ''">✕</button>
       </div>
 
-      <div v-if="listLoading" class="state-msg">Loading...</div>
-
+      <div v-if="listLoading" class="rail-state">Loading…</div>
       <ul v-else class="note-list">
         <li
           v-for="note in filteredNotes"
           :key="note.id"
-          class="note-row"
-          :class="{ active: editingId === note.id }"
+          :class="['note-row', { 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-match': matchedTags(note).includes(tag) }]"
-              >#{{ tag }}</span>
-              <span v-if="note.tags.length > 3" class="note-tag-more">+{{ note.tags.length - 3 }}</span>
-            </span>
+            <span class="note-row-title">{{ note.title || 'Untitled' }}</span>
             <span class="note-row-age">{{ formatDate(note.updated_at) }}</span>
           </div>
-
+          <div v-if="note.tags?.length" class="note-row-tags">
+            <span
+              v-for="tag in note.tags.slice(0, 2)"
+              :key="tag"
+              :class="['note-tag-pill', { 'tag-match': matchedTags(note).includes(tag) }]"
+            >#{{ tag }}</span>
+            <span v-if="note.tags.length > 2" class="note-tag-more">+{{ note.tags.length - 2 }}</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 class="btn-confirm-delete" :disabled="pendingDelete === note.id" @click="requestDelete(note.id, $event)">
+                {{ pendingDelete === note.id ? '…' : 'Delete?' }}
               </button>
               <button class="btn-cancel-delete" aria-label="Cancel delete" @click="cancelDelete($event)">✕</button>
             </template>
-            <button
-              v-else
-              class="btn-delete"
-              title="Delete note"
-              @click="requestDelete(note.id, $event)"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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 v-else class="btn-delete" title="Delete note" @click="requestDelete(note.id, $event)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
           </div>
         </li>
-
-        <li v-if="filteredNotes.length === 0" class="state-msg">
-          {{ searchQuery.trim() ? 'No notes match.' : 'No notes yet — ask the agent to create one.' }}
+        <li v-if="filteredNotes.length === 0" class="rail-state">
+          {{ searchQuery.trim() ? 'No matches.' : 'No notes yet.' }}
         </li>
       </ul>
-    </template>
+    </div>
+
+    <!-- Right pane: editor -->
+    <div class="note-editor-pane">
+      <template v-if="editingId">
+        <div class="panel-header">
+          <div class="editor-header-right">
+            <WordCount :body="noteBody" />
+            <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
+            ref="titleRef"
+            v-model="noteTitle"
+            class="note-title-input"
+            placeholder="Note title"
+            @keydown.ctrl.s.prevent="saveNote"
+            @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
+          />
+        </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>
+
+        <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" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
+        </div>
+
+        <div class="toolbar-row">
+          <MarkdownToolbar :editor="tiptapEditor" />
+        </div>
+
+        <div v-if="linkSuggestions.length" class="link-suggest-strip">
+          <span class="link-suggest-label">Links:</span>
+          <span v-for="s in linkSuggestions" :key="s.note_id" class="link-suggest-chip" :title="`Appears ${s.count}× unlinked`">
+            <button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
+          </span>
+          <button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
+          <button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
+        </div>
+
+        <div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
+          <TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
+        </div>
+      </template>
+
+      <div v-else class="editor-empty-state">
+        <p>Select a note or create a new one</p>
+      </div>
+    </div>
 
   </div>
 </template>
@@ -467,41 +446,278 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
 <style scoped>
 .ws-note-editor {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   height: 100%;
   overflow: hidden;
   background: var(--color-surface);
   border-left: 1px solid var(--color-border);
 }
 
+/* ── Left rail ── */
+.note-rail {
+  width: 155px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border);
+}
+
+.rail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 0.6rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.rail-title {
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.72rem;
+  font-weight: 600;
+  flex: 1;
+}
+
+.btn-new-note {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 0.15rem 0.4rem;
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn-new-note:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+.rail-search {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.3rem 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.rail-search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  font-size: 0.78rem;
+  color: var(--color-text);
+  min-width: 0;
+  padding: 0;
+}
+.rail-search-input:focus { outline: none; }
+.rail-search-input::-webkit-search-cancel-button { display: none; }
+
+.btn-search-clear {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.68rem;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.btn-search-clear:hover { color: var(--color-text); }
+
+.rail-state {
+  padding: 1rem 0.65rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+/* Note list */
+.note-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.note-row {
+  display: flex;
+  flex-direction: column;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
+  cursor: pointer;
+  gap: 0.15rem;
+  border-left: 2px solid transparent;
+  transition: background 0.12s;
+}
+.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));
+  border-left-color: var(--color-primary);
+}
+
+.note-row-main {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.note-row-title {
+  flex: 1;
+  font-size: 0.78rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text);
+}
+
+.note-row-age {
+  font-size: 0.62rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.note-row-tags {
+  display: flex;
+  gap: 0.15rem;
+  overflow: hidden;
+}
+
+.note-tag-pill {
+  font-size: 0.58rem;
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border-radius: 999px;
+  padding: 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 5rem;
+}
+.note-tag-pill.tag-match {
+  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  outline: 1px solid var(--color-primary);
+}
+
+.note-tag-more {
+  font-size: 0.58rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.note-row-actions {
+  display: flex;
+  gap: 0.2rem;
+  align-items: center;
+}
+
+.btn-delete {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  padding: 0.1rem;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 0.1s, color 0.1s;
+  display: flex;
+  align-items: center;
+}
+.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.65rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+}
+.btn-confirm-delete:disabled { opacity: 0.5; cursor: default; }
+
+.btn-cancel-delete {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.7rem;
+  cursor: pointer;
+  padding: 0.1rem;
+}
+.btn-cancel-delete:hover { color: var(--color-text); }
+
+/* Inline new note */
+.new-note-input {
+  flex: 1;
+  background: var(--color-input-bg, var(--color-bg));
+  border: 1px solid var(--color-primary);
+  border-radius: 4px;
+  padding: 0.15rem 0.35rem;
+  font-size: 0.78rem;
+  color: var(--color-text);
+  min-width: 0;
+}
+.new-note-input:focus { outline: none; }
+
+.btn-confirm {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.15rem 0.35rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.btn-confirm:disabled { opacity: 0.4; cursor: default; }
+
+.btn-cancel {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.72rem;
+  cursor: pointer;
+  padding: 0.1rem;
+  flex-shrink: 0;
+}
+.btn-cancel:hover { color: var(--color-text); }
+
+/* ── Right editor pane ── */
+.note-editor-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.editor-empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
+/* Editor UI */
 .panel-header {
   display: flex;
   align-items: center;
-  padding: 0.6rem 0.75rem;
+  padding: 0.5rem 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;
@@ -523,7 +739,6 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
 }
 .btn-save:disabled { opacity: 0.4; cursor: default; }
 
-/* Editor */
 .note-title-row {
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--color-border);
@@ -549,11 +764,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
 }
-
-.tag-row > :first-child {
-  flex: 1;
-  min-width: 0;
-}
+.tag-row > :first-child { flex: 1; min-width: 0; }
 
 .btn-suggest-tags {
   background: none;
@@ -567,10 +778,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   flex-shrink: 0;
   align-self: center;
 }
-.btn-suggest-tags:hover:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
+.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 {
@@ -583,12 +791,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   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;
-}
+.tag-suggestions-label { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; }
 
 .btn-tag-suggestion {
   background: none;
@@ -633,7 +836,6 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
   flex-shrink: 0;
 }
-
 .link-suggest-label {
   font-size: 0.7rem;
   color: var(--color-text-muted);
@@ -642,10 +844,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-
-.link-suggest-chip {
-  display: inline-flex;
-}
+.link-suggest-chip { display: inline-flex; }
 
 .btn-chip-link {
   background: none;
@@ -658,9 +857,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   font-family: monospace;
   white-space: nowrap;
 }
-.btn-chip-link:hover {
-  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
-}
+.btn-chip-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
 
 .btn-link-all {
   background: none;
@@ -679,212 +876,4 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
   overflow-y: auto;
   padding: 0.5rem 0.6rem;
 }
-
-/* Search bar */
-.note-search-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.note-search-input {
-  flex: 1;
-  background: var(--color-input-bg, var(--color-bg));
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.82rem;
-  color: var(--color-text);
-  min-width: 0;
-}
-.note-search-input:focus { outline: none; border-color: var(--color-primary); }
-.note-search-input::-webkit-search-cancel-button { display: none; }
-
-.btn-search-clear {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.72rem;
-  cursor: pointer;
-  padding: 0.1rem 0.25rem;
-  flex-shrink: 0;
-  border-radius: 3px;
-}
-.btn-search-clear:hover { color: var(--color-text); }
-
-/* 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-pill.tag-match {
-  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
-  outline: 1px solid var(--color-primary);
-}
-
-.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);
-}
-
-.btn-new-note {
-  margin-left: auto;
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  padding: 0.2rem 0.55rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  cursor: pointer;
-}
-.btn-new-note:hover { border-color: var(--color-primary); color: var(--color-primary); }
-
-.new-note-input {
-  flex: 1;
-  background: var(--color-input-bg, var(--color-bg));
-  border: 1px solid var(--color-primary);
-  border-radius: 5px;
-  padding: 0.22rem 0.5rem;
-  font-size: 0.83rem;
-  color: var(--color-text);
-  min-width: 0;
-}
-.new-note-input:focus { outline: none; }
-
-.btn-new-note-confirm {
-  background: var(--color-primary);
-  color: #fff;
-  border: none;
-  border-radius: 5px;
-  padding: 0.22rem 0.5rem;
-  font-size: 0.9rem;
-  cursor: pointer;
-  flex-shrink: 0;
-  line-height: 1;
-}
-.btn-new-note-confirm:disabled { opacity: 0.4; cursor: default; }
-
-.btn-new-note-cancel {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 0.75rem;
-  cursor: pointer;
-  padding: 0.1rem 0.3rem;
-  flex-shrink: 0;
-}
-.btn-new-note-cancel:hover { color: var(--color-text); }
 </style>
diff --git a/frontend/src/components/WorkspaceTaskPanel.vue b/frontend/src/components/WorkspaceTaskPanel.vue
index db839d5..f57fc62 100644
--- a/frontend/src/components/WorkspaceTaskPanel.vue
+++ b/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>
diff --git a/frontend/src/views/WorkspaceView.vue b/frontend/src/views/WorkspaceView.vue
index de73437..bf05ec0 100644
--- a/frontend/src/views/WorkspaceView.vue
+++ b/frontend/src/views/WorkspaceView.vue
@@ -22,6 +22,7 @@ const projectId = computed(() => Number(route.params.projectId));
 interface Project {
   id: number;
   title: string;
+  goal?: string;
 }
 
 const project = ref<Project | null>(null);
@@ -56,12 +57,11 @@ function _loadPanelState(pid: number) {
 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(" ");
+  return [
+    panelOpen.value.tasks ? "minmax(0, 0.8fr)" : "0px",
+    panelOpen.value.chat  ? "minmax(0, 1.1fr)" : "0px",
+    panelOpen.value.notes ? "minmax(0, 1.1fr)" : "0px",
+  ].join(" ");
 });
 
 // SSE watcher
@@ -124,6 +124,11 @@ function togglePanel(panel: keyof typeof panelOpen.value) {
   localStorage.setItem(_panelKey(projectId.value), JSON.stringify(panelOpen.value));
 }
 
+function prefill(text: string) {
+  messageInput.value = text;
+  nextTick(() => inputEl.value?.focus());
+}
+
 async function sendMessage() {
   const content = messageInput.value.trim();
   if (!content) return;
@@ -230,7 +235,7 @@ onUnmounted(async () => {
       <router-link :to="project ? `/projects/${project.id}` : '/projects'" class="ws-back">
         ← {{ project?.title ?? "Project" }}
       </router-link>
-      <span class="ws-title">Workspace</span>
+      <span class="ws-title">{{ project?.goal ?? '' }}</span>
       <div class="ws-panel-toggles">
         <button
           :class="['panel-toggle', { active: panelOpen.tasks }]"
@@ -341,12 +346,17 @@ onUnmounted(async () => {
             </div>
           </template>
 
-          <p
+          <div
             v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
-            class="empty-chat-msg"
+            class="empty-chat-prompt"
           >
-            Ask the agent to create notes or tasks for this project.
-          </p>
+            <p class="empty-hint">What would you like to work on?</p>
+            <div class="quick-chips">
+              <button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
+              <button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
+              <button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
+            </div>
+          </div>
         </div>
 
         <div class="chat-input-area">
@@ -428,10 +438,13 @@ onUnmounted(async () => {
 }
 
 .ws-title {
-  font-weight: 600;
-  font-size: 0.9rem;
+  font-size: 0.78rem;
   color: var(--color-text-muted);
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: italic;
 }
 
 .ws-panel-toggles {
@@ -501,12 +514,37 @@ onUnmounted(async () => {
   gap: 0.75rem;
 }
 
-.empty-chat-msg {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
+.empty-chat-prompt {
   text-align: center;
   padding: 2rem 1rem;
 }
+.empty-hint {
+  margin: 0 0 1rem;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+}
+.quick-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.quick-chip {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  padding: 0.4rem 0.85rem;
+  font-size: 0.82rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  font-family: inherit;
+}
+.quick-chip:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
+}
 
 .chat-input-area {
   display: flex;