Task work log, inline writing assistant, task editor sidebar layout

Backend:
- Migration 0021: task_logs table (FK → notes + users, CASCADE, indexed)
- models/task_log.py: SQLAlchemy model with to_dict()
- services/task_logs.py: CRUD with ownership checks, _UNSET sentinel for optional duration clear
- routes/task_logs.py: GET/POST/PATCH/DELETE /api/tasks/<id>/logs
- services/tools.py: log_work LLM tool (resolves task by title, creates log entry)
- services/generation_task.py: retry assist generation up to 3× on HTTP 500

Frontend:
- types/task.ts: TaskLog interface
- TaskLogSection.vue: chronological work log with date+time timestamps, duration badge, inline edit, autofocus
- InlineAssistPanel.vue: streaming preview + diff review rendered inline in editor column
- useAssist.ts: removed chatStore.chatReady gate; toast notifications for errors
- NoteEditorView.vue + TaskEditorView.vue: inline assist panel, aside restricted to idle state
- TaskEditorView.vue: two-column layout (editor+log left, metadata sidebar right), body defaults to Preview, sidebarOpen accordion for mobile
- editor-shared.css: .assist-active-hint style

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

frontend/src/views/NoteEditorView.vue

@@ -12,6 +12,7 @@ import TiptapEditor from "@/components/TiptapEditor.vue";
 import TagInput from "@/components/TagInput.vue";
 import ProjectSelector from "@/components/ProjectSelector.vue";
 import MilestoneSelector from "@/components/MilestoneSelector.vue";
+import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -41,8 +42,13 @@ const renderedPreview = computed(() => renderMarkdown(body.value));
 // AI Assist
 const assist = useAssist(body);
 
-const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
-const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
+const assistLabel = computed(() => {
+  if (assist.isProofreading.value) return "Proofreading document...";
+  const t = assist.target.value;
+  if (!t) return "Generating...";
+  const heading = t.text.split("\n")[0];
+  return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
+});
 
 // Assist panel toggle (persisted)
 const ASSIST_KEY = 'fa-assist-open';
@@ -80,9 +86,6 @@ function handleInlineAssist() {
   nextTick(() => instructionRef.value?.focus());
 }
 
-// Diff view toggle
-const showFullProposed = ref(false);
-
 function handleAssistAccept() {
   const newBody = assist.accept();
   if (newBody !== body.value) {
@@ -90,7 +93,6 @@ function handleAssistAccept() {
     markDirty();
     toast.show("Section updated");
   }
-  showFullProposed.value = false;
 }
 
 function truncateTarget(text: string, max = 60): string {
@@ -366,7 +368,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
     <div class="editor-body">
       <div class="editor-main">
-        <div v-show="!showPreview">
+        <!-- Inline assist output: streaming preview + review diff -->
+        <InlineAssistPanel
+          v-if="assist.state.value !== 'idle'"
+          :phase="assist.state.value as 'streaming' | 'review'"
+          :label="assistLabel"
+          :streaming-text="assist.streamingText.value"
+          :diff="assist.diff.value"
+          :proposed-text="assist.proposedText.value"
+          @accept="handleAssistAccept"
+          @reject="assist.reject()"
+          @cancel="assist.clearSelection()"
+        />
+
+        <!-- Editor hidden during review so diff takes full column -->
+        <div v-show="!showPreview && assist.state.value !== 'review'">
           <TiptapEditor
             ref="editorRef"
             :modelValue="body"
@@ -377,7 +393,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
         </div>
 
         <div
-          v-show="showPreview"
+          v-show="showPreview && assist.state.value !== 'review'"
           class="preview-pane prose"
           v-html="renderedPreview"
         ></div>
@@ -442,41 +458,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
           <!-- ERROR -->
           <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
 
-          <!-- STREAMING -->
-          <div v-if="assist.state.value === 'streaming'" class="assist-streaming">
-            <div class="assist-streaming-label">
-              {{ assist.isProofreading.value
-                ? 'Proofreading document...'
-                : `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
-            </div>
-            <div class="assist-preview-box prose" v-html="renderedStreaming"></div>
-            <span class="typing-indicator">●●●</span>
-          </div>
-
-          <!-- REVIEW -->
-          <div v-if="assist.state.value === 'review'" class="assist-review">
-            <div class="assist-review-header">
-              <span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
-              <button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
-                {{ showFullProposed ? 'Show diff' : 'Show full text' }}
-              </button>
-            </div>
-            <div v-if="!showFullProposed" class="diff-view">
-              <div
-                v-for="(line, i) in assist.diff.value"
-                :key="i"
-                :class="['diff-line', `diff-${line.type}`]"
-              >
-                <span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
-                <span class="diff-text">{{ line.text }}</span>
-              </div>
-              <div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
-            </div>
-            <div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
-            <div class="assist-actions">
-              <button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
-              <button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
-            </div>
+          <!-- Hint when active (output shown inline in editor area) -->
+          <div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
+            {{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
           </div>
 
         </div>

frontend/src/views/TaskEditorView.vue

@@ -14,6 +14,8 @@ import TiptapEditor from "@/components/TiptapEditor.vue";
 import TagInput from "@/components/TagInput.vue";
 import ProjectSelector from "@/components/ProjectSelector.vue";
 import MilestoneSelector from "@/components/MilestoneSelector.vue";
+import TaskLogSection from "@/components/TaskLogSection.vue";
+import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -90,7 +92,8 @@ async function toggleSubTask(sub: SubTask) {
     toast.show("Failed to update sub-task", "error");
   }
 }
-const showPreview = ref(false);
+const showPreview = ref(true);
+const sidebarOpen = ref(true);
 const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
 const tiptapEditor = computed<Editor | null>(() => {
   return (editorRef.value?.editor as Editor | undefined) ?? null;
@@ -106,8 +109,13 @@ const renderedPreview = computed(() => renderMarkdown(body.value));
 // AI Assist
 const assist = useAssist(body);
 
-const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
-const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
+const assistLabel = computed(() => {
+  if (assist.isProofreading.value) return "Proofreading document...";
+  const t = assist.target.value;
+  if (!t) return "Generating...";
+  const heading = t.text.split("\n")[0];
+  return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
+});
 
 // Assist panel toggle (persisted)
 const ASSIST_KEY = 'fa-assist-open';
@@ -145,9 +153,6 @@ function handleInlineAssist() {
   nextTick(() => instructionRef.value?.focus());
 }
 
-// Diff view toggle
-const showFullProposed = ref(false);
-
 function handleAssistAccept() {
   const newBody = assist.accept();
   if (newBody !== body.value) {
@@ -155,7 +160,6 @@ function handleAssistAccept() {
     markDirty();
     toast.show("Section updated");
   }
-  showFullProposed.value = false;
 }
 
 function truncateTarget(text: string, max = 60): string {
@@ -443,7 +447,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 </script>
 
 <template>
-  <main class="editor-page">
+  <main class="editor-page task-editor-page">
     <div class="editor-header">
       <div class="toolbar">
         <router-link to="/tasks" class="btn-back">Back</router-link>
@@ -465,159 +469,38 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
         @input="markDirty"
       />
 
-      <div class="field-row">
-        <div class="field">
-          <label>Status</label>
-          <select v-model="status" @change="markDirty" class="field-select">
-            <option value="todo">Todo</option>
-            <option value="in_progress">In Progress</option>
-            <option value="done">Done</option>
-          </select>
-        </div>
-        <div class="field">
-          <label>Priority</label>
-          <select v-model="priority" @change="markDirty" class="field-select">
-            <option value="none">None</option>
-            <option value="low">Low</option>
-            <option value="medium">Medium</option>
-            <option value="high">High</option>
-          </select>
-        </div>
-        <div class="field">
-          <label>Due Date</label>
-          <input
-            v-model="dueDate"
-            type="date"
-            class="field-input"
-            @input="markDirty"
-          />
-        </div>
-        <div class="field">
-          <label>Project</label>
-          <ProjectSelector v-model="projectId" @update:modelValue="markDirty" />
-        </div>
-        <div class="field">
-          <label>Milestone</label>
-          <MilestoneSelector :projectId="projectId" v-model="milestoneId" @update:modelValue="markDirty" />
-        </div>
-      </div>
+    </div><!-- /editor-header: title only -->
 
-      <div class="field-row">
-        <div class="field parent-field">
-          <label>Parent Task</label>
-          <div class="parent-search-wrapper">
-            <div class="parent-input-row">
-              <input
-                v-model="parentSearchQuery"
-                type="text"
-                class="field-input"
-                placeholder="Search tasks..."
-                @input="onParentSearchInput"
-                @focus="onParentFocus"
-                @blur="hideParentDropdown"
-              />
-              <button
-                v-if="parentId"
-                class="btn-clear-parent"
-                @click="clearParentTask"
-                title="Clear parent task"
-              >&times;</button>
-            </div>
-            <div v-if="showParentDropdown" class="parent-dropdown">
-              <div v-if="parentSearchLoading" class="parent-dropdown-item parent-empty">Searching...</div>
-              <div
-                v-for="task in parentSearchResults"
-                :key="task.id"
-                class="parent-dropdown-item"
-                @mousedown.prevent="selectParentTask(task)"
-              >{{ task.title || "Untitled" }}</div>
-              <div v-if="!parentSearchLoading && parentSearchResults.length === 0" class="parent-dropdown-item parent-empty">No tasks found</div>
-            </div>
+    <!-- Two-column body: main (editor+log) | sidebar (metadata) -->
+    <div class="task-body">
+
+      <!-- ── Main column ─────────────────────────────────────────── -->
+      <div class="task-main">
+
+        <!-- Write / Preview tabs + toolbar sit above the editor -->
+        <div class="body-tabs-row">
+          <div class="editor-tabs">
+            <button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
+            <button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
           </div>
+          <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
         </div>
-      </div>
 
-      <!-- Sub-tasks (only when editing an existing task) -->
-      <div v-if="isEditing" class="subtasks-section">
-        <div class="subtasks-header">
-          <span class="subtasks-label">Sub-tasks</span>
-          <button class="btn-add-subtask" @click="addingSubTask = !addingSubTask">+ Add</button>
-        </div>
-        <div v-if="subTasksLoading" class="subtasks-loading">Loading...</div>
-        <template v-else>
-          <div v-for="sub in subTasks" :key="sub.id" class="subtask-row">
-            <input
-              type="checkbox"
-              :checked="sub.status === 'done'"
-              @change="toggleSubTask(sub)"
-              class="subtask-checkbox"
-            />
-            <router-link :to="`/tasks/${sub.id}`" :class="['subtask-title', { done: sub.status === 'done' }]">
-              {{ sub.title || "Untitled" }}
-            </router-link>
-          </div>
-          <p v-if="!subTasks.length && !addingSubTask" class="subtasks-empty">No sub-tasks yet.</p>
-          <div v-if="addingSubTask" class="subtask-add-row">
-            <input
-              v-model="newSubTaskTitle"
-              class="subtask-input"
-              placeholder="Sub-task title"
-              @keydown.enter="createSubTask"
-              @keydown.escape="addingSubTask = false; newSubTaskTitle = ''"
-              autofocus
-            />
-            <button class="btn-subtask-confirm" @click="createSubTask" :disabled="!newSubTaskTitle.trim()">Add</button>
-            <button class="btn-subtask-cancel" @click="addingSubTask = false; newSubTaskTitle = ''">Cancel</button>
-          </div>
-        </template>
-      </div>
+        <!-- Inline assist output -->
+        <InlineAssistPanel
+          v-if="assist.state.value !== 'idle'"
+          :phase="assist.state.value as 'streaming' | 'review'"
+          :label="assistLabel"
+          :streaming-text="assist.streamingText.value"
+          :diff="assist.diff.value"
+          :proposed-text="assist.proposedText.value"
+          @accept="handleAssistAccept"
+          @reject="assist.reject()"
+          @cancel="assist.clearSelection()"
+        />
 
-      <TagInput
-        v-model="tags"
-        :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
-        @update:modelValue="markDirty"
-      />
-
-      <div class="tag-suggest-row">
-        <button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
-          {{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
-        </button>
-        <template v-if="suggestedTags.length > 0">
-          <button
-            v-for="tag in suggestedTags"
-            :key="tag"
-            :class="['tag-pill', { applied: appliedTags.has(tag) }]"
-            :disabled="appliedTags.has(tag)"
-            @click="applyTagSuggestion(tag)"
-          >
-            #{{ tag }}
-            <span v-if="appliedTags.has(tag)" class="tag-check">&#10003;</span>
-          </button>
-          <button class="btn-dismiss-tags" @click="dismissTagSuggestions">&times;</button>
-        </template>
-      </div>
-
-      <div class="editor-tabs">
-        <button
-          :class="['tab', { active: !showPreview }]"
-          @click="showPreview = false"
-        >
-          Write
-        </button>
-        <button
-          :class="['tab', { active: showPreview }]"
-          @click="showPreview = true"
-        >
-          Preview
-        </button>
-      </div>
-
-      <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
-    </div>
-
-    <div class="editor-body">
-      <div class="editor-main">
-        <div v-show="!showPreview">
+        <!-- Editor / preview (hidden during review) -->
+        <div v-show="!showPreview && assist.state.value !== 'review'" class="body-editor-wrap">
           <TiptapEditor
             ref="editorRef"
             :modelValue="body"
@@ -626,30 +509,159 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
             @selectionChange="onSelectionChange"
           />
         </div>
-
         <div
-          v-show="showPreview"
+          v-show="showPreview && assist.state.value !== 'review'"
           class="preview-pane prose"
           v-html="renderedPreview"
         ></div>
+
+        <!-- Work log -->
+        <TaskLogSection v-if="taskId" :task-id="taskId" class="body-log" />
       </div>
 
+      <!-- ── Sidebar ──────────────────────────────────────────────── -->
+      <aside class="task-sidebar">
+
+        <!-- Mobile accordion toggle -->
+        <button class="sidebar-toggle" @click="sidebarOpen = !sidebarOpen">
+          Details {{ sidebarOpen ? '▴' : '▾' }}
+        </button>
+
+        <div :class="['sidebar-content', { 'sidebar-open': sidebarOpen }]">
+
+          <!-- Status / Priority / Due date -->
+          <div class="sb-field">
+            <label class="sb-label">Status</label>
+            <select v-model="status" @change="markDirty" class="sb-select">
+              <option value="todo">Todo</option>
+              <option value="in_progress">In Progress</option>
+              <option value="done">Done</option>
+            </select>
+          </div>
+          <div class="sb-field">
+            <label class="sb-label">Priority</label>
+            <select v-model="priority" @change="markDirty" class="sb-select">
+              <option value="none">None</option>
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+            </select>
+          </div>
+          <div class="sb-field">
+            <label class="sb-label">Due Date</label>
+            <input v-model="dueDate" type="date" class="sb-input" @input="markDirty" />
+          </div>
+          <div class="sb-field">
+            <label class="sb-label">Project</label>
+            <ProjectSelector v-model="projectId" @update:modelValue="markDirty" />
+          </div>
+          <div class="sb-field">
+            <label class="sb-label">Milestone</label>
+            <MilestoneSelector :projectId="projectId" v-model="milestoneId" @update:modelValue="markDirty" />
+          </div>
+
+          <!-- Parent task -->
+          <div class="sb-field">
+            <label class="sb-label">Parent Task</label>
+            <div class="parent-search-wrapper">
+              <div class="parent-input-row">
+                <input
+                  v-model="parentSearchQuery"
+                  type="text"
+                  class="sb-input"
+                  placeholder="Search tasks..."
+                  @input="onParentSearchInput"
+                  @focus="onParentFocus"
+                  @blur="hideParentDropdown"
+                />
+                <button v-if="parentId" class="btn-clear-parent" @click="clearParentTask" title="Clear">&times;</button>
+              </div>
+              <div v-if="showParentDropdown" class="parent-dropdown">
+                <div v-if="parentSearchLoading" class="parent-dropdown-item parent-empty">Searching...</div>
+                <div
+                  v-for="task in parentSearchResults"
+                  :key="task.id"
+                  class="parent-dropdown-item"
+                  @mousedown.prevent="selectParentTask(task)"
+                >{{ task.title || "Untitled" }}</div>
+                <div v-if="!parentSearchLoading && parentSearchResults.length === 0" class="parent-dropdown-item parent-empty">No tasks found</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="sb-divider"></div>
+
+          <!-- Sub-tasks -->
+          <div v-if="isEditing" class="subtasks-section">
+            <div class="subtasks-header">
+              <span class="subtasks-label">Sub-tasks</span>
+              <button class="btn-add-subtask" @click="addingSubTask = !addingSubTask">+ Add</button>
+            </div>
+            <div v-if="subTasksLoading" class="subtasks-loading">Loading...</div>
+            <template v-else>
+              <div v-for="sub in subTasks" :key="sub.id" class="subtask-row">
+                <input type="checkbox" :checked="sub.status === 'done'" @change="toggleSubTask(sub)" class="subtask-checkbox" />
+                <router-link :to="`/tasks/${sub.id}`" :class="['subtask-title', { done: sub.status === 'done' }]">
+                  {{ sub.title || "Untitled" }}
+                </router-link>
+              </div>
+              <p v-if="!subTasks.length && !addingSubTask" class="subtasks-empty">No sub-tasks yet.</p>
+              <div v-if="addingSubTask" class="subtask-add-row">
+                <input
+                  v-model="newSubTaskTitle"
+                  class="subtask-input"
+                  placeholder="Sub-task title"
+                  @keydown.enter="createSubTask"
+                  @keydown.escape="addingSubTask = false; newSubTaskTitle = ''"
+                  autofocus
+                />
+                <button class="btn-subtask-confirm" @click="createSubTask" :disabled="!newSubTaskTitle.trim()">Add</button>
+                <button class="btn-subtask-cancel" @click="addingSubTask = false; newSubTaskTitle = ''">Cancel</button>
+              </div>
+            </template>
+          </div>
+
+          <div class="sb-divider"></div>
+
+          <!-- Tags -->
+          <div class="sb-field">
+            <label class="sb-label">Tags</label>
+            <TagInput
+              v-model="tags"
+              :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
+              @update:modelValue="markDirty"
+            />
+          </div>
+          <div class="tag-suggest-row">
+            <button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
+              {{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
+            </button>
+            <template v-if="suggestedTags.length > 0">
+              <button
+                v-for="tag in suggestedTags"
+                :key="tag"
+                :class="['tag-pill', { applied: appliedTags.has(tag) }]"
+                :disabled="appliedTags.has(tag)"
+                @click="applyTagSuggestion(tag)"
+              >
+                #{{ tag }}
+                <span v-if="appliedTags.has(tag)" class="tag-check">&#10003;</span>
+              </button>
+              <button class="btn-dismiss-tags" @click="dismissTagSuggestions">&times;</button>
+            </template>
+          </div>
+
+        </div><!-- /sidebar-content -->
+      </aside><!-- /task-sidebar -->
+
+      <!-- ✨ Assist panel overlays on top of sidebar when open -->
       <aside v-if="assistOpen" class="assist-panel">
-        <!-- Panel header -->
         <div class="assist-panel-header">
           <span class="assist-panel-title">✨ AI Assist</span>
-          <button
-            class="btn-proofread"
-            @click="assist.proofread()"
-            :disabled="assist.state.value === 'streaming'"
-          >Proofread</button>
+          <button class="btn-proofread" @click="assist.proofread()" :disabled="assist.state.value === 'streaming'">Proofread</button>
           <button class="btn-close-assist" @click="toggleAssist">×</button>
         </div>
-
-        <!-- Panel body -->
         <div class="assist-panel-body">
-
-          <!-- IDLE -->
           <div v-if="assist.state.value === 'idle'" class="assist-idle">
             <div class="assist-sections-label">Sections</div>
             <div class="assist-sections">
@@ -658,17 +670,11 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
                 :key="i"
                 :class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
                 @click="assist.selectSection(section)"
-              >
-                {{ section.heading || '(preamble)' }}
-              </div>
-              <div v-if="!assist.sections.value.length" class="assist-empty">
-                Write some content to get started.
-              </div>
+              >{{ section.heading || '(preamble)' }}</div>
+              <div v-if="!assist.sections.value.length" class="assist-empty">Write some content to get started.</div>
             </div>
             <template v-if="assist.target.value">
-              <div class="assist-target-preview">
-                Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
-              </div>
+              <div class="assist-target-preview">Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em></div>
               <textarea
                 ref="instructionRef"
                 v-model="assist.instruction.value"
@@ -677,73 +683,29 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
                 rows="3"
               ></textarea>
               <div class="assist-input-actions">
-                <button
-                  class="btn-generate"
-                  @click="assist.submit()"
-                  :disabled="!assist.canSubmit.value"
-                >Generate</button>
+                <button class="btn-generate" @click="assist.submit()" :disabled="!assist.canSubmit.value">Generate</button>
                 <button class="btn-clear" @click="assist.clearSelection()">Clear</button>
               </div>
             </template>
-            <div v-else class="assist-hint">
-              Select a section above or highlight text in the editor.
-            </div>
+            <div v-else class="assist-hint">Select a section above or highlight text in the editor.</div>
           </div>
-
-          <!-- ERROR -->
           <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
-
-          <!-- STREAMING -->
-          <div v-if="assist.state.value === 'streaming'" class="assist-streaming">
-            <div class="assist-streaming-label">
-              {{ assist.isProofreading.value
-                ? 'Proofreading document...'
-                : `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
-            </div>
-            <div class="assist-preview-box prose" v-html="renderedStreaming"></div>
-            <span class="typing-indicator">●●●</span>
+          <div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
+            {{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
           </div>
-
-          <!-- REVIEW -->
-          <div v-if="assist.state.value === 'review'" class="assist-review">
-            <div class="assist-review-header">
-              <span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
-              <button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
-                {{ showFullProposed ? 'Show diff' : 'Show full text' }}
-              </button>
-            </div>
-            <div v-if="!showFullProposed" class="diff-view">
-              <div
-                v-for="(line, i) in assist.diff.value"
-                :key="i"
-                :class="['diff-line', `diff-${line.type}`]"
-              >
-                <span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
-                <span class="diff-text">{{ line.text }}</span>
-              </div>
-              <div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
-            </div>
-            <div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
-            <div class="assist-actions">
-              <button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
-              <button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
-            </div>
-          </div>
-
         </div>
       </aside>
-    </div>
 
-    <!-- Floating inline assist button (teleported to body) -->
+    </div><!-- /task-body -->
+
+    <!-- Floating inline assist button -->
     <teleport to="body">
       <button
         v-if="floatingAssist.show"
         class="inline-assist-btn"
         :style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
         @mousedown.prevent="handleInlineAssist"
-      >
-        ✨ Assist
-      </button>
+      >✨ Assist</button>
     </teleport>
 
     <!-- Delete confirmation -->
@@ -764,25 +726,120 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 <style src="@/assets/editor-shared.css" />
 <style scoped>
-/* Task-specific metadata fields */
-.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
-.field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
-.field label { font-size: 0.85rem; color: var(--color-text-secondary); font-weight: 500; }
-.field-select,
-.field-input {
-  padding: 0.4rem 0.5rem;
+/* ── Two-column task layout ─────────────────────────────────── */
+.task-editor-page {
+  /* override shared max-width; task editor can be wider */
+  max-width: 1600px;
+}
+
+/* Replace .editor-body for task editor */
+.task-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Main column: editor + work log */
+.task-main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1.25rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.body-tabs-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.body-editor-wrap {
+  min-height: 200px;
+}
+
+.body-log {
+  /* TaskLogSection already has its own border/bg */
+}
+
+/* Right sidebar: metadata fields */
+.task-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Mobile accordion toggle (hidden on desktop) */
+.sidebar-toggle {
+  display: none;
+  width: 100%;
+  padding: 0.6rem 1rem;
+  background: var(--color-bg-secondary);
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+}
+
+.sidebar-content {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+/* Sidebar field layout */
+.sb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.sb-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.sb-select,
+.sb-input {
+  width: 100%;
+  padding: 0.35rem 0.5rem;
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
-  font-size: 0.9rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.sb-select:focus,
+.sb-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.sb-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 0.15rem 0;
 }
 
 /* Parent task search */
-.parent-field { max-width: 360px; }
 .parent-search-wrapper { position: relative; }
 .parent-input-row { display: flex; align-items: center; gap: 0.25rem; }
-.parent-input-row .field-input { flex: 1; }
+.parent-input-row .sb-input { flex: 1; }
 .btn-clear-parent {
   background: none;
   border: none;
@@ -808,8 +865,8 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   overflow-y: auto;
 }
 .parent-dropdown-item {
-  padding: 0.45rem 0.7rem;
-  font-size: 0.875rem;
+  padding: 0.4rem 0.65rem;
+  font-size: 0.85rem;
   cursor: pointer;
   color: var(--color-text);
   overflow: hidden;
@@ -817,27 +874,24 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   white-space: nowrap;
 }
 .parent-dropdown-item:hover { background: var(--color-bg-secondary); }
-.parent-empty {
-  color: var(--color-text-muted);
-  cursor: default;
-}
+.parent-empty { color: var(--color-text-muted); cursor: default; }
 .parent-empty:hover { background: none; }
 
 /* Sub-tasks */
 .subtasks-section {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
-  padding: 0.6rem 0.75rem;
+  padding: 0.5rem 0.65rem;
   background: var(--color-bg-secondary);
 }
 .subtasks-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.35rem;
 }
 .subtasks-label {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-text-secondary);
   text-transform: uppercase;
@@ -848,25 +902,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   border: none;
   cursor: pointer;
   color: var(--color-primary);
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-family: inherit;
-  padding: 0.1rem 0.3rem;
+  padding: 0.1rem 0.2rem;
 }
 .btn-add-subtask:hover { opacity: 0.8; }
-.subtasks-loading {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-  padding: 0.25rem 0;
-}
+.subtasks-loading { font-size: 0.78rem; color: var(--color-text-muted); }
 .subtask-row {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0;
+  gap: 0.4rem;
+  padding: 0.2rem 0;
 }
 .subtask-checkbox { flex-shrink: 0; cursor: pointer; }
 .subtask-title {
-  font-size: 0.875rem;
+  font-size: 0.83rem;
   color: var(--color-text);
   text-decoration: none;
   flex: 1;
@@ -875,52 +925,70 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   white-space: nowrap;
 }
 .subtask-title:hover { color: var(--color-primary); }
-.subtask-title.done {
-  text-decoration: line-through;
-  color: var(--color-text-muted);
-}
-.subtasks-empty {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-  margin: 0;
-  padding: 0.25rem 0;
-}
+.subtask-title.done { text-decoration: line-through; color: var(--color-text-muted); }
+.subtasks-empty { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }
 .subtask-add-row {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.35rem;
+  gap: 0.3rem;
+  margin-top: 0.3rem;
 }
 .subtask-input {
   flex: 1;
-  padding: 0.3rem 0.5rem;
+  padding: 0.25rem 0.4rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
   color: var(--color-text);
-  font-size: 0.875rem;
+  font-size: 0.83rem;
   font-family: inherit;
 }
 .subtask-input:focus { outline: none; border-color: var(--color-primary); }
 .btn-subtask-confirm {
-  padding: 0.3rem 0.6rem;
+  padding: 0.25rem 0.5rem;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-family: inherit;
 }
 .btn-subtask-confirm:disabled { opacity: 0.5; cursor: default; }
 .btn-subtask-cancel {
-  padding: 0.3rem 0.6rem;
+  padding: 0.25rem 0.5rem;
   background: none;
   border: 1px solid var(--color-border);
   color: var(--color-text-secondary);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-family: inherit;
 }
+
+/* Tag suggest row inside sidebar */
+.tag-suggest-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-items: center;
+}
+
+/* Narrow screen: sidebar collapses */
+@media (max-width: 720px) {
+  .task-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
+  .task-main { padding: 0.75rem 1rem 1rem; overflow-y: visible; }
+  .task-sidebar {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    overflow-y: visible;
+  }
+  .sidebar-toggle { display: block; }
+  .sidebar-content {
+    display: none;
+    padding: 0.75rem 1rem;
+  }
+  .sidebar-content.sidebar-open { display: flex; }
+}
 </style>