From a6ce287be38935dd7e193e30768e3df352137942 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 10 Mar 2026 20:16:55 -0400
Subject: [PATCH] =?UTF-8?q?Dashboard:=20Mission=20Control=20layout=20?=
 =?UTF-8?q?=E2=80=94=20hero=20project,=20project=20grid,=20inbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero card: last-active project (by most recent note/task updated_at),
  prominent 'Open Workspace' button, milestone bars, 5 recent items,
  highest-priority next-up todo task
- Projects grid: all other active projects with small workspace button,
  urgency badges (in progress / todo count), milestone bars, hover lift
- Inbox section: collapsible strip of orphaned tasks + notes (no project)
- Skeleton shimmer replaces plain 'Loading...' text
- Chat widget + quick actions unchanged at top

Backend additions used: ?no_project=true on both /api/notes and
/api/tasks; ?project_id= on /api/tasks (committed separately)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/HomeView.vue | 969 ++++++++++++++++++--------------
 1 file changed, 546 insertions(+), 423 deletions(-)

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 305d434..7fd67d7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,30 +1,19 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import { apiGet } from "@/api/client";
-import type { Note, NoteListResponse } from "@/types/note";
-import type { Task, TaskListResponse } from "@/types/task";
+import type { Note } from "@/types/note";
+import type { Task, TaskListResponse, TaskStatus } from "@/types/task";
 import type { ToolCallRecord, Message } from "@/types/chat";
 import NoteCard from "@/components/NoteCard.vue";
 import TaskCard from "@/components/TaskCard.vue";
+import StatusBadge from "@/components/StatusBadge.vue";
+import PriorityBadge from "@/components/PriorityBadge.vue";
 import ToolCallCard from "@/components/ToolCallCard.vue";
 import DashboardChatInput from "@/components/DashboardChatInput.vue";
-import type { TaskStatus } from "@/types/task";
 import { useTasksStore } from "@/stores/tasks";
 import { useChatStore } from "@/stores/chat";
 
-// ─── Task data ───────────────────────────────────────────────────────────────
-
-const recentNotes = ref<Note[]>([]);
-const overdueTasks = ref<Task[]>([]);
-const dueTodayTasks = ref<Task[]>([]);
-const dueThisWeekTasks = ref<Task[]>([]);
-const highPriorityTasks = ref<Task[]>([]);
-const inProgressTasks = ref<Task[]>([]);
-const otherTasks = ref<Task[]>([]);
-const loading = ref(true);
-const tasksStore = useTasksStore();
-
-// ─── Project data ─────────────────────────────────────────────────────────────
+// ─── Types ────────────────────────────────────────────────────────────────────
 
 interface MilestoneSummary {
   id: number;
@@ -34,37 +23,47 @@ interface MilestoneSummary {
   total: number;
   completed: number;
 }
+
 interface DashProject {
   id: number;
   title: string;
   status: string;
+  updated_at: string;
   summary?: {
     task_counts: { todo?: number; in_progress?: number; done?: number };
     milestone_summary: MilestoneSummary[];
   };
 }
 
-const activeProjects = ref<DashProject[]>([]);
-const projectMap = ref<Map<number, string>>(new Map());
-
-async function loadProjects() {
-  try {
-    const data = await apiGet<{ projects: DashProject[] }>("/api/projects?status=active");
-    const projects = data.projects.slice(0, 6);
-    projectMap.value = new Map(data.projects.map((p) => [p.id, p.title]));
-    // Fetch summaries in parallel
-    await Promise.allSettled(
-      projects.map(async (p) => {
-        try {
-          const full = await apiGet<DashProject>(`/api/projects/${p.id}`);
-          p.summary = full.summary;
-        } catch { /* non-fatal */ }
-      })
-    );
-    activeProjects.value = projects;
-  } catch { /* non-fatal */ }
+// A recent item from the hero project (note or task — both come from /api/notes?all=true)
+interface RecentItem {
+  id: number;
+  title: string;
+  status: string | null;
+  project_id: number | null;
+  updated_at: string;
 }
 
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const loading = ref(true);
+const tasksStore = useTasksStore();
+
+// Hero project — most recently active project
+const heroProject = ref<DashProject | null>(null);
+const heroRecentItems = ref<RecentItem[]>([]);
+const heroNextUp = ref<Task | null>(null);
+
+// All other active projects (hero excluded)
+const activeProjects = ref<DashProject[]>([]);
+
+// Orphaned items (no project_id)
+const orphanTasks = ref<Task[]>([]);
+const orphanNotes = ref<Note[]>([]);
+const inboxOpen = ref(true);
+
+// ─── Milestone color palette ──────────────────────────────────────────────────
+
 function milestoneColor(index: number): string {
   const palette = [
     "var(--color-primary)",
@@ -76,129 +75,98 @@ function milestoneColor(index: number): string {
   return palette[index % palette.length];
 }
 
-// ─── Sorting helpers ──────────────────────────────────────────────────────────
-
-const PRIORITY_ORDER: Record<string, number> = {
-  high: 3, medium: 2, low: 1, none: 0,
-};
-
-function dateStr(offsetDays: number = 0): string {
-  const d = new Date();
-  d.setDate(d.getDate() + offsetDays);
-  return (
-    d.getFullYear() + "-" +
-    String(d.getMonth() + 1).padStart(2, "0") + "-" +
-    String(d.getDate()).padStart(2, "0")
-  );
-}
-
-function sortByPriorityThenDate(tasks: Task[]): Task[] {
-  return tasks.slice().sort((a, b) => {
-    const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
-    const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
-    if (pb !== pa) return pb - pa;
-    if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
-    if (a.due_date) return -1;
-    if (b.due_date) return 1;
-    return 0;
-  });
-}
-
-function sortOtherTasks(tasks: Task[]): Task[] {
-  const withDate = tasks.filter((t) => t.due_date).sort((a, b) => a.due_date!.localeCompare(b.due_date!));
-  const withoutDate = tasks.filter((t) => !t.due_date).sort((a, b) => {
-    const pa = PRIORITY_ORDER[a.priority ?? "none"] ?? 0;
-    const pb = PRIORITY_ORDER[b.priority ?? "none"] ?? 0;
-    return pb - pa;
-  });
-  return [...withDate, ...withoutDate].slice(0, 10);
-}
-
 // ─── Data loading ─────────────────────────────────────────────────────────────
 
 onMounted(async () => {
-  const today = dateStr(0);
-  const nextWeek = dateStr(7);
-
-  const [notesRes, overdueRes, dueSoonRes, highPriRes, inProgressRes, otherRes] =
+  // Phase 1: projects list + cross-project recent items + orphaned items — all parallel
+  const [projectsRes, recentRes, orphanTasksRes, orphanNotesRes] =
     await Promise.allSettled([
-      apiGet<NoteListResponse>("/api/notes?sort=updated_at&order=desc&limit=16"),
-      apiGet<TaskListResponse>(`/api/tasks?due_before=${today}&sort=due_date&order=asc&limit=20`),
-      apiGet<TaskListResponse>(`/api/tasks?due_after=${today}&due_before=${nextWeek}&sort=due_date&order=asc&limit=20`),
-      apiGet<TaskListResponse>(`/api/tasks?priority=high&sort=updated_at&order=desc&limit=10`),
-      apiGet<TaskListResponse>(`/api/tasks?status=in_progress&sort=updated_at&order=desc&limit=10`),
-      apiGet<TaskListResponse>(`/api/tasks?sort=updated_at&order=desc&limit=50`),
+      apiGet<{ projects: DashProject[] }>("/api/projects?status=active"),
+      apiGet<{ notes: RecentItem[] }>(
+        "/api/notes?all=true&sort=updated_at&order=desc&limit=30"
+      ),
+      apiGet<TaskListResponse>(
+        "/api/tasks?no_project=true&sort=updated_at&order=desc&limit=8"
+      ),
+      apiGet<{ notes: Note[] }>(
+        "/api/notes?type=note&no_project=true&sort=updated_at&order=desc&limit=6"
+      ),
     ]);
 
-  if (notesRes.status === "fulfilled") recentNotes.value = notesRes.value.notes;
+  // Determine hero project: the project whose item was most recently touched
+  let heroId: number | null = null;
+  if (recentRes.status === "fulfilled") {
+    const withProject = recentRes.value.notes.find(
+      (n) => n.project_id != null
+    );
+    heroId = withProject?.project_id ?? null;
+  }
 
-  const seen = new Set<number>();
-  if (overdueRes.status === "fulfilled") {
-    overdueTasks.value = sortByPriorityThenDate(overdueRes.value.tasks.filter((t) => t.status !== "done"));
-    for (const t of overdueTasks.value) seen.add(t.id);
-  }
-  if (dueSoonRes.status === "fulfilled") {
-    const notDone = dueSoonRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id));
-    const todayList: Task[] = [], weekList: Task[] = [];
-    for (const t of notDone) {
-      (t.due_date === today ? todayList : weekList).push(t);
-    }
-    dueTodayTasks.value = sortByPriorityThenDate(todayList);
-    dueThisWeekTasks.value = sortByPriorityThenDate(weekList);
-    for (const t of dueTodayTasks.value) seen.add(t.id);
-    for (const t of dueThisWeekTasks.value) seen.add(t.id);
-  }
-  if (highPriRes.status === "fulfilled") {
-    highPriorityTasks.value = highPriRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id));
-    for (const t of highPriorityTasks.value) seen.add(t.id);
-  }
-  if (inProgressRes.status === "fulfilled") {
-    inProgressTasks.value = inProgressRes.value.tasks.filter((t) => !seen.has(t.id));
-    for (const t of inProgressTasks.value) seen.add(t.id);
-  }
-  if (otherRes.status === "fulfilled") {
-    otherTasks.value = sortOtherTasks(otherRes.value.tasks.filter((t) => t.status !== "done" && !seen.has(t.id)));
+  if (projectsRes.status === "fulfilled") {
+    const all = projectsRes.value.projects;
+    const hero = all.find((p) => p.id === heroId) ?? all[0] ?? null;
+    heroProject.value = hero;
+    activeProjects.value = all.filter((p) => p.id !== hero?.id);
   }
 
+  if (orphanTasksRes.status === "fulfilled")
+    orphanTasks.value = orphanTasksRes.value.tasks;
+  if (orphanNotesRes.status === "fulfilled")
+    orphanNotes.value = orphanNotesRes.value.notes;
+
   loading.value = false;
-  nextTick(() => chatInputRef.value?.focus());
 
-  // Load projects in parallel (non-blocking)
+  // Focus chat input after data loads
+  chatInputRef.value?.focus();
   loadProjects();
 });
 
-const noTasks = computed(
-  () =>
-    overdueTasks.value.length === 0 &&
-    dueTodayTasks.value.length === 0 &&
-    dueThisWeekTasks.value.length === 0 &&
-    highPriorityTasks.value.length === 0 &&
-    inProgressTasks.value.length === 0 &&
-    otherTasks.value.length === 0
-);
+async function loadProjects() {
+  if (!heroProject.value) return;
+  const hid = heroProject.value.id;
 
-const allTaskLists = [
-  () => overdueTasks, () => dueTodayTasks, () => dueThisWeekTasks,
-  () => highPriorityTasks, () => inProgressTasks, () => otherTasks,
-];
+  // Phase 2: hero details + all project summaries — parallel
+  const [recentItemsRes, nextUpRes, heroSummaryRes] = await Promise.allSettled([
+    apiGet<{ notes: RecentItem[] }>(
+      `/api/notes?all=true&project_id=${hid}&sort=updated_at&order=desc&limit=5`
+    ),
+    apiGet<TaskListResponse>(
+      `/api/tasks?project_id=${hid}&status=todo&sort=updated_at&order=desc&limit=1`
+    ),
+    apiGet<DashProject>(`/api/projects/${hid}`),
+  ]);
 
-function removeFromAllLists(id: number) {
-  for (const getList of allTaskLists) {
-    const list = getList();
-    list.value = list.value.filter((t) => t.id !== id);
-  }
+  if (recentItemsRes.status === "fulfilled")
+    heroRecentItems.value = recentItemsRes.value.notes;
+  if (nextUpRes.status === "fulfilled")
+    heroNextUp.value = nextUpRes.value.tasks[0] ?? null;
+  if (heroSummaryRes.status === "fulfilled")
+    heroProject.value = { ...heroProject.value!, ...heroSummaryRes.value };
+
+  // Load summaries for remaining projects
+  await Promise.allSettled(
+    activeProjects.value.map(async (p) => {
+      try {
+        const full = await apiGet<DashProject>(`/api/projects/${p.id}`);
+        const idx = activeProjects.value.findIndex((x) => x.id === p.id);
+        if (idx !== -1)
+          activeProjects.value[idx] = { ...activeProjects.value[idx], ...full };
+      } catch {
+        /* non-fatal */
+      }
+    })
+  );
 }
 
+// ─── Status toggle (orphaned tasks) ──────────────────────────────────────────
+
 function onStatusToggle(id: number, status: TaskStatus) {
   tasksStore.patchStatus(id, status).then((updated) => {
     if (updated.status === "done") {
-      removeFromAllLists(updated.id);
+      orphanTasks.value = orphanTasks.value.filter((t) => t.id !== id);
     } else {
-      for (const getList of allTaskLists) {
-        const list = getList();
-        const idx = list.value.findIndex((t) => t.id === updated.id);
-        if (idx !== -1) { list.value[idx] = updated; break; }
-      }
+      const idx = orphanTasks.value.findIndex((t) => t.id === id);
+      if (idx !== -1) orphanTasks.value[idx] = updated;
     }
   });
 }
@@ -217,6 +185,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener("shortcut:focus-chat", onFocusChatShortcut);
 });
+
 const chatStore = useChatStore();
 
 chatStore.fetchStatus().then(() => {
@@ -254,7 +223,9 @@ async function onChatSubmit(payload: { content: string; contextNoteId?: number }
   await chatStore.sendMessage(payload.content, payload.contextNoteId);
 
   const msgs = chatStore.currentConversation?.messages ?? [];
-  const lastAssistant = [...msgs].reverse().find((m: Message) => m.role === "assistant");
+  const lastAssistant = [...msgs]
+    .reverse()
+    .find((m: Message) => m.role === "assistant");
   dashboardFinalContent.value = lastAssistant?.content ?? "";
   dashboardFinalToolCalls.value = (lastAssistant?.tool_calls ?? []) as ToolCallRecord[];
   dashboardDone.value = true;
@@ -276,7 +247,7 @@ function clearDashboardResponse() {
 <template>
   <main class="home">
 
-    <!-- Chat widget -->
+    <!-- ── Chat widget ─────────────────────────────────────────── -->
     <section class="chat-section">
       <div class="quick-actions">
         <button
@@ -290,7 +261,7 @@ function clearDashboardResponse() {
       <DashboardChatInput ref="chatInputRef" @submit="onChatSubmit" />
     </section>
 
-    <!-- Inline response -->
+    <!-- ── Inline response ────────────────────────────────────── -->
     <div v-if="dashboardConvId" class="dashboard-response">
       <div class="dashboard-response-query">{{ dashboardQuery }}</div>
       <div v-if="chatStore.streaming && chatStore.streamingToolCalls.length" class="dashboard-tool-calls">
@@ -319,192 +290,192 @@ function clearDashboardResponse() {
       </div>
     </div>
 
-    <p v-if="loading" class="loading">Loading...</p>
+    <!-- ── Skeleton while loading ─────────────────────────────── -->
+    <template v-if="loading">
+      <div class="skeleton-hero"></div>
+      <div class="skeleton-grid">
+        <div class="skeleton-card" v-for="i in 3" :key="i"></div>
+      </div>
+    </template>
 
-    <!-- Main grid: Tasks + Notes -->
-    <div v-else class="dashboard-grid">
+    <template v-else>
 
-      <!-- Tasks column -->
-      <div class="col-tasks">
-
-        <!-- Active Projects (3 across, above tasks) -->
-        <div v-if="activeProjects.length" class="projects-inline">
-          <div class="col-header">
-            <h2>Active Projects</h2>
-            <router-link to="/projects" class="see-all">See all</router-link>
+      <!-- ── Hero: Last Active Project ──────────────────────── -->
+      <div v-if="heroProject" class="hero-card">
+        <div class="hero-top">
+          <div class="hero-identity">
+            <span class="hero-label">Last active</span>
+            <router-link :to="`/projects/${heroProject.id}`" class="hero-title">
+              {{ heroProject.title }}
+            </router-link>
           </div>
-          <div class="projects-strip-inline">
+          <router-link :to="`/workspace/${heroProject.id}`" class="btn-workspace-hero">
+            ▶ Open Workspace
+          </router-link>
+        </div>
+
+        <!-- Milestone bars -->
+        <div
+          v-if="heroProject.summary?.milestone_summary?.length"
+          class="hero-milestones"
+        >
+          <div
+            v-for="(ms, i) in heroProject.summary.milestone_summary
+              .filter((m) => m.status !== 'archived')
+              .slice(0, 3)"
+            :key="ms.id"
+            class="ms-row"
+          >
+            <span class="ms-label">{{ ms.title }}</span>
+            <div class="ms-track">
+              <div
+                class="ms-fill"
+                :style="{ width: ms.pct + '%', background: milestoneColor(i) }"
+              ></div>
+            </div>
+            <span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
+          </div>
+        </div>
+
+        <!-- Recent items -->
+        <div v-if="heroRecentItems.length" class="hero-recent">
+          <span class="hero-section-label">Recent</span>
+          <div class="hero-items">
             <router-link
-              v-for="project in activeProjects"
-              :key="project.id"
-              :to="`/projects/${project.id}`"
-              class="project-mini-card"
+              v-for="item in heroRecentItems"
+              :key="item.id"
+              :to="item.status != null ? `/tasks/${item.id}` : `/notes/${item.id}`"
+              class="hero-item"
             >
-              <div class="project-mini-title">{{ project.title }}</div>
-              <template v-if="project.summary?.milestone_summary?.length">
-                <div
-                  v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
-                  :key="ms.id"
-                  class="ms-row"
-                >
-                  <span class="ms-label">{{ ms.title }}</span>
-                  <div class="ms-track">
-                    <div
-                      class="ms-fill"
-                      :style="{ width: ms.pct + '%', background: milestoneColor(i) }"
-                    ></div>
-                  </div>
-                  <span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
-                </div>
-              </template>
-              <div v-else-if="project.summary" class="project-mini-counts">
-                <span v-if="project.summary.task_counts.in_progress">
-                  {{ project.summary.task_counts.in_progress }} in progress
-                </span>
-                <span v-if="project.summary.task_counts.todo">
-                  {{ project.summary.task_counts.todo }} todo
-                </span>
-                <span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
-                  No open tasks
-                </span>
-              </div>
-              <div v-else class="project-mini-counts muted">Loading…</div>
+              <span class="hero-item-icon">{{ item.status != null ? '◉' : '◈' }}</span>
+              <span class="hero-item-title">{{ item.title || 'Untitled' }}</span>
+              <StatusBadge
+                v-if="item.status"
+                :status="(item.status as TaskStatus)"
+                class="hero-item-badge"
+              />
             </router-link>
           </div>
         </div>
 
-        <div class="col-header">
-          <h2>Tasks</h2>
-          <router-link to="/tasks" class="see-all">See all</router-link>
+        <!-- Next up -->
+        <div v-if="heroNextUp" class="hero-next-up">
+          <span class="hero-section-label">Next up</span>
+          <router-link :to="`/tasks/${heroNextUp.id}`" class="hero-next-link">
+            <PriorityBadge :priority="heroNextUp.priority ?? 'none'" />
+            {{ heroNextUp.title }}
+          </router-link>
         </div>
-
-        <div v-if="noTasks" class="empty-state">
-          <p class="empty-text">No active tasks.</p>
-          <router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
-        </div>
-
-        <template v-else>
-          <section v-if="overdueTasks.length" class="section section-overdue">
-            <h3 class="section-title">Overdue</h3>
-            <div class="task-rows">
-              <TaskCard
-                v-for="task in overdueTasks"
-                :key="task.id"
-                :task="task"
-                compact
-                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-                @status-toggle="onStatusToggle"
-              />
-            </div>
-          </section>
-          <p v-else class="section-empty">All clear</p>
-
-          <section v-if="dueTodayTasks.length" class="section">
-            <h3 class="section-title">Due Today</h3>
-            <div class="task-rows">
-              <TaskCard
-                v-for="task in dueTodayTasks"
-                :key="task.id"
-                :task="task"
-                compact
-                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-                @status-toggle="onStatusToggle"
-              />
-            </div>
-          </section>
-
-          <section v-if="dueThisWeekTasks.length" class="section">
-            <h3 class="section-title">Due This Week</h3>
-            <div class="task-rows">
-              <TaskCard
-                v-for="task in dueThisWeekTasks"
-                :key="task.id"
-                :task="task"
-                compact
-                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-                @status-toggle="onStatusToggle"
-              />
-            </div>
-          </section>
-
-          <section v-if="highPriorityTasks.length" class="section section-high-priority">
-            <h3 class="section-title">High Priority</h3>
-            <div class="task-rows">
-              <TaskCard
-                v-for="task in highPriorityTasks"
-                :key="task.id"
-                :task="task"
-                compact
-                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-                @status-toggle="onStatusToggle"
-              />
-            </div>
-          </section>
-          <p v-else class="section-empty">All clear</p>
-
-          <section v-if="inProgressTasks.length" class="section">
-            <h3 class="section-title">In Progress</h3>
-            <div class="task-rows">
-              <TaskCard
-                v-for="task in inProgressTasks"
-                :key="task.id"
-                :task="task"
-                compact
-                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-                @status-toggle="onStatusToggle"
-              />
-            </div>
-          </section>
-
-          <section v-if="otherTasks.length" class="section">
-            <h3 class="section-title">Other</h3>
-            <div class="task-rows">
-              <TaskCard
-                v-for="task in otherTasks"
-                :key="task.id"
-                :task="task"
-                compact
-                :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-                @status-toggle="onStatusToggle"
-              />
-            </div>
-          </section>
-        </template>
       </div>
 
-      <!-- Notes column: 2-per-row mini grid -->
-      <div class="col-notes">
-        <div class="col-header">
-          <h2>Recent Notes</h2>
-          <router-link to="/notes" class="see-all">See all</router-link>
+      <!-- ── Active Projects grid ────────────────────────────── -->
+      <div v-if="activeProjects.length" class="projects-section">
+        <div class="section-header">
+          <h2>Projects</h2>
+          <router-link to="/projects" class="see-all">See all →</router-link>
         </div>
-        <div v-if="recentNotes.length" class="notes-mini-grid">
+        <div class="projects-grid">
+          <div
+            v-for="project in activeProjects"
+            :key="project.id"
+            class="project-card"
+          >
+            <div class="project-card-top">
+              <router-link
+                :to="`/projects/${project.id}`"
+                class="project-card-title"
+              >
+                {{ project.title }}
+              </router-link>
+              <router-link
+                :to="`/workspace/${project.id}`"
+                class="btn-workspace-sm"
+                title="Open Workspace"
+              >▶</router-link>
+            </div>
+
+            <!-- Urgency badges -->
+            <div class="project-urgency">
+              <span
+                v-if="(project.summary?.task_counts?.in_progress ?? 0) > 0"
+                class="urgency-badge urgency-in-progress"
+              >{{ project.summary!.task_counts.in_progress }} in progress</span>
+              <span
+                v-if="(project.summary?.task_counts?.todo ?? 0) > 0"
+                class="urgency-badge urgency-todo"
+              >{{ project.summary!.task_counts.todo }} todo</span>
+              <span
+                v-if="project.summary && !project.summary.task_counts.in_progress && !project.summary.task_counts.todo"
+                class="urgency-badge urgency-clear"
+              >All clear</span>
+              <span v-if="!project.summary" class="urgency-badge urgency-loading">Loading…</span>
+            </div>
+
+            <!-- Milestone bars (up to 2) -->
+            <template v-if="project.summary?.milestone_summary?.length">
+              <div
+                v-for="(ms, i) in project.summary.milestone_summary
+                  .filter((m) => m.status !== 'archived')
+                  .slice(0, 2)"
+                :key="ms.id"
+                class="ms-row"
+              >
+                <span class="ms-label">{{ ms.title }}</span>
+                <div class="ms-track">
+                  <div
+                    class="ms-fill"
+                    :style="{ width: ms.pct + '%', background: milestoneColor(i) }"
+                  ></div>
+                </div>
+                <span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Inbox: orphaned items ───────────────────────────── -->
+      <div
+        v-if="orphanTasks.length || orphanNotes.length"
+        class="inbox-section"
+      >
+        <button class="inbox-header" @click="inboxOpen = !inboxOpen">
+          <span class="inbox-toggle">{{ inboxOpen ? '▼' : '▶' }}</span>
+          <h2>
+            Inbox
+            <span class="inbox-count">{{ orphanTasks.length + orphanNotes.length }}</span>
+          </h2>
+          <span class="inbox-sub">Notes and tasks without a project</span>
+        </button>
+        <div v-if="inboxOpen" class="inbox-items">
+          <TaskCard
+            v-for="task in orphanTasks"
+            :key="task.id"
+            :task="task"
+            compact
+            @status-toggle="onStatusToggle"
+          />
           <NoteCard
-            v-for="note in recentNotes"
+            v-for="note in orphanNotes"
             :key="note.id"
             :note="note"
           />
         </div>
-        <div v-else class="empty-state">
-          <p class="section-empty">No recent notes</p>
-          <router-link to="/notes/new" class="btn-cta">+ New Note</router-link>
-        </div>
       </div>
 
-    </div>
+    </template>
 
   </main>
 </template>
 
 <style scoped>
 .home {
-  max-width: 1400px;
+  max-width: 1100px;
   margin: 2rem auto;
-  padding: 0 1rem;
-  overflow-x: clip; /* hard boundary — nothing escapes the container */
+  padding: 0 1.5rem;
 }
 
-/* Chat */
+/* ─── Chat widget ────────────────────────────────────────────── */
 .chat-section { margin-bottom: 1rem; }
 .quick-actions {
   display: flex;
@@ -520,7 +491,7 @@ function clearDashboardResponse() {
   color: var(--color-text);
   font-size: 0.8rem;
   cursor: pointer;
-  transition: border-color 0.15s, color 0.15s;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
 .quick-action-chip:hover:not(:disabled) {
   border-color: var(--color-primary);
@@ -529,7 +500,7 @@ function clearDashboardResponse() {
 }
 .quick-action-chip:disabled { opacity: 0.4; cursor: default; }
 
-/* Inline response */
+/* ─── Inline response ────────────────────────────────────────── */
 .dashboard-response {
   margin-bottom: 1.5rem;
   padding: 0.75rem 1rem;
@@ -614,99 +585,295 @@ function clearDashboardResponse() {
 }
 .btn-clear-response:hover { color: var(--color-text); }
 
-/* Main grid */
-.dashboard-grid {
+/* ─── Skeleton loading ───────────────────────────────────────── */
+.skeleton-hero {
+  height: 180px;
+  border-radius: var(--radius-lg);
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
+  margin-bottom: 1.75rem;
+}
+.skeleton-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  align-items: start;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1.75rem;
 }
-/* Prevent grid children from overflowing their tracks */
-.col-tasks,
-.col-notes,
-.projects-strip-inline > *,
-.notes-mini-grid > * {
-  min-width: 0;
+.skeleton-card {
+  height: 120px;
+  border-radius: var(--radius-md);
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
 }
 
-/* Column headers */
-.col-header {
+/* ─── Hero card ──────────────────────────────────────────────── */
+.hero-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1.75rem;
+  box-shadow: 0 2px 16px rgba(99, 102, 241, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+.hero-top {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
-.col-header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
-.see-all {
-  color: var(--color-primary);
-  text-decoration: none;
-  font-size: 0.85rem;
-}
-.see-all:hover { text-decoration: underline; }
-
-/* Task sections — compact rows */
-.section { margin-bottom: 1.25rem; }
-.section-title {
-  margin: 0 0 0.4rem;
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: var(--color-text-muted);
-}
-.section-overdue {
-  border-left: 3px solid var(--color-danger, #e74c3c);
-  padding-left: 0.75rem;
-}
-.section-overdue .section-title { color: var(--color-danger, #e74c3c); }
-.section-high-priority {
-  border-left: 3px solid var(--color-warning, #f59e0b);
-  padding-left: 0.75rem;
-}
-.task-rows {
+.hero-identity {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
 }
-
-/* Notes mini-grid: 2 per row */
-.notes-mini-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.6rem;
+.hero-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
 }
-
-/* Projects inline (inside tasks column) */
-.projects-inline {
-  margin-bottom: 1.5rem;
-}
-.projects-strip-inline {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.6rem;
-}
-.project-mini-card {
-  display: block;
-  padding: 0.75rem;
-  border-radius: var(--radius-md);
-  background: var(--color-bg-card);
+.hero-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--color-text);
   text-decoration: none;
-  color: inherit;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
-  transition: box-shadow 0.18s ease, transform 0.18s ease;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
 }
-.project-mini-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
-  transform: translateY(-2px);
-}
-.project-mini-title {
+.hero-title:hover { color: var(--color-primary); }
+
+.btn-workspace-hero {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1.1rem;
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
   font-size: 0.9rem;
   font-weight: 600;
-  margin-bottom: 0.5rem;
   white-space: nowrap;
+  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.3);
+  transition: opacity 0.15s, box-shadow 0.15s;
+  flex-shrink: 0;
+}
+.btn-workspace-hero:hover {
+  opacity: 0.9;
+  box-shadow: 0 3px 14px rgba(99, 102, 241, 0.45);
+}
+
+.hero-milestones { margin-bottom: 0.75rem; }
+
+.hero-section-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--color-text-muted);
+  display: block;
+  margin-bottom: 0.4rem;
+}
+
+.hero-recent { margin-bottom: 0.75rem; }
+.hero-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.hero-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  font-size: 0.88rem;
+  transition: background 0.12s, color 0.12s;
+}
+.hero-item:hover {
+  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
+  color: var(--color-text);
+}
+.hero-item-icon { opacity: 0.45; font-size: 0.75rem; flex-shrink: 0; }
+.hero-item-title {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.hero-item-badge { flex-shrink: 0; }
+
+.hero-next-up {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.hero-next-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+.hero-next-link:hover { color: var(--color-primary); }
+
+/* ─── Projects grid ──────────────────────────────────────────── */
+.projects-section { margin-bottom: 1.75rem; }
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+.section-header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
+.see-all { font-size: 0.85rem; color: var(--color-primary); text-decoration: none; }
+.see-all:hover { text-decoration: underline; }
+
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.75rem;
+}
+.project-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.85rem 1rem;
+  transition: box-shadow 0.18s, border-color 0.15s, transform 0.18s;
+}
+.project-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
+  border-color: var(--color-primary);
+  transform: translateY(-2px);
+}
+.project-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+.project-card-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--color-text);
+  text-decoration: none;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-card-title:hover { color: var(--color-primary); }
+.btn-workspace-sm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+.btn-workspace-sm:hover {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.project-urgency {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-bottom: 0.5rem;
+}
+.urgency-badge {
+  font-size: 0.72rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-pill);
+  font-weight: 500;
+}
+.urgency-in-progress {
+  background: color-mix(in srgb, #6366f1 15%, transparent);
+  color: #6366f1;
+}
+.urgency-todo {
+  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  color: var(--color-text-muted);
+}
+.urgency-clear {
+  background: color-mix(in srgb, #22c55e 12%, transparent);
+  color: #16a34a;
+}
+.urgency-loading { color: var(--color-text-muted); font-style: italic; }
+
+/* ─── Inbox ──────────────────────────────────────────────────── */
+.inbox-section {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin-bottom: 1.75rem;
+}
+.inbox-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.75rem 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-text);
+  transition: background 0.15s;
+}
+.inbox-header:hover { background: var(--color-bg-secondary); }
+.inbox-toggle { font-size: 0.75rem; color: var(--color-text-muted); }
+.inbox-header h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.inbox-count {
+  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: var(--radius-pill);
+}
+.inbox-sub {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  margin-left: auto;
+}
+.inbox-items {
+  padding: 0.5rem 0.75rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* ─── Shared: milestone bars ─────────────────────────────────── */
 .ms-row {
   display: flex;
   align-items: center;
@@ -732,7 +899,6 @@ function clearDashboardResponse() {
 .ms-fill {
   height: 100%;
   border-radius: 999px;
-  background: var(--color-primary);
   transition: width 0.3s;
 }
 .ms-pct {
@@ -742,56 +908,13 @@ function clearDashboardResponse() {
   text-align: right;
   flex-shrink: 0;
 }
-.project-mini-counts {
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-.muted { color: var(--color-text-muted); }
 
-.section-empty {
-  text-align: center;
-  padding: 1rem 0.5rem;
-  color: var(--color-text-muted);
-  font-size: 0.82rem;
-  font-style: italic;
-  margin: 0;
-}
-
-.loading { color: var(--color-text-secondary); }
-.empty-state { text-align: center; padding: 1.5rem 0; }
-.empty-state::before {
-  content: "✦";
-  display: block;
-  font-size: 1.2rem;
-  color: var(--color-primary);
-  opacity: 0.4;
-  margin-bottom: 0.4rem;
-}
-.empty-text { color: var(--color-text-muted); margin: 0 0 0.75rem; }
-.btn-cta {
-  display: inline-block;
-  padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
-  color: #fff;
-  border: none;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  font-size: 0.9rem;
-  cursor: pointer;
-  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.25);
-}
-.btn-cta:hover {
-  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.45);
-  filter: brightness(1.08);
-}
-
-/* Mobile */
-@media (max-width: 768px) {
-  .dashboard-grid { grid-template-columns: 1fr; }
-  .notes-mini-grid { grid-template-columns: 1fr; }
-  .projects-strip-inline { grid-template-columns: 1fr; }
+/* ─── Mobile ─────────────────────────────────────────────────── */
+@media (max-width: 680px) {
+  .home { padding: 0 1rem; margin: 1rem auto; }
+  .hero-top { flex-direction: column; align-items: flex-start; }
+  .btn-workspace-hero { width: 100%; justify-content: center; }
+  .projects-grid { grid-template-columns: 1fr; }
+  .inbox-sub { display: none; }
 }
 </style>