From 65c85bab1504244f530293ab924c3e1fd7a985a0 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 2 Jun 2026 23:24:32 -0400
Subject: [PATCH] feat(dashboard): DashboardView landing + route + nav

Task 3 of #583. New DashboardView at /dashboard composes the approved layout:
done-recently strip, Active-now project panels (project -> active milestones ->
open tasks, in-progress flagged, + no-milestone group), and a rail with
upcoming events / week stats / quick-create (Task/Note/Process). '/' now
redirects to /dashboard; AppHeader gains a Dashboard link and relabels
Knowledge -> Browse (route unchanged). Empty + loading states included.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/AppHeader.vue |   6 +-
 frontend/src/router/index.ts          |  11 +-
 frontend/src/views/DashboardView.vue  | 208 ++++++++++++++++++++++++++
 3 files changed, 220 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/views/DashboardView.vue

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 5de4c6a..34c4ff1 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -45,7 +45,8 @@ router.afterEach(() => {
       <!-- Center: primary navigation (desktop) -->
       <div class="nav-center">
         <div class="nav-pill-bar">
-          <router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
+          <router-link to="/dashboard" class="nav-link">Dashboard</router-link>
+          <router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Browse</router-link>
           <router-link to="/calendar" class="nav-link">Calendar</router-link>
           <router-link to="/projects" class="nav-link">Projects</router-link>
           <router-link to="/rules" class="nav-link">Rulebooks</router-link>
@@ -90,7 +91,8 @@ router.afterEach(() => {
 
     <!-- Mobile dropdown -->
     <div v-if="mobileMenuOpen" class="mobile-menu">
-      <router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
+      <router-link to="/dashboard" class="nav-link">Dashboard</router-link>
+      <router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Browse</router-link>
       <router-link to="/calendar" class="nav-link">Calendar</router-link>
       <router-link to="/projects" class="nav-link">Projects</router-link>
       <router-link to="/rules" class="nav-link">Rulebooks</router-link>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 6df4f04..14584d8 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,10 +5,15 @@ const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
-      // Knowledge is the landing page in the MCP-first architecture
-      // (chat / journal / workspace surfaces have been removed).
+      // The dashboard ("what to work on") is the landing page; Knowledge
+      // remains as the exhaustive "Browse" surface.
       path: "/",
-      redirect: "/knowledge",
+      redirect: "/dashboard",
+    },
+    {
+      path: "/dashboard",
+      name: "dashboard",
+      component: () => import("@/views/DashboardView.vue"),
     },
     {
       path: "/knowledge",
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
new file mode 100644
index 0000000..bdd9bee
--- /dev/null
+++ b/frontend/src/views/DashboardView.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { apiGet } from "@/api/client";
+import { relativeTime } from "@/composables/useRelativeTime";
+
+interface TaskRow { id: number; title: string; status: string; priority: string }
+interface MilestoneBlock { id: number; title: string; progress_pct: number; open_tasks: TaskRow[] }
+interface ActiveProject {
+  id: number; title: string; color: string | null; last_activity: string;
+  open_count: number; progress_pct: number;
+  milestones: MilestoneBlock[]; no_milestone: TaskRow[];
+}
+interface DoneItem { id: number; title: string; project_title: string | null; completed_at: string }
+interface UpcomingEvent { id: number; title: string; start_dt: string | null; all_day: boolean }
+interface WeekStats { completed_this_week: number; open_total: number; in_progress: number; active_plans: number }
+interface DashboardData {
+  active_projects: ActiveProject[];
+  recently_completed: DoneItem[];
+  upcoming_events: UpcomingEvent[];
+  week_stats: WeekStats;
+}
+
+const data = ref<DashboardData | null>(null);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    data.value = await apiGet<DashboardData>("/api/dashboard");
+  } catch {
+    data.value = { active_projects: [], recently_completed: [], upcoming_events: [], week_stats: { completed_this_week: 0, open_total: 0, in_progress: 0, active_plans: 0 } };
+  } finally {
+    loading.value = false;
+  }
+});
+
+function fmtEvent(e: UpcomingEvent): string {
+  if (!e.start_dt) return "";
+  const d = new Date(e.start_dt);
+  const day = d.toLocaleDateString(undefined, { weekday: "short" });
+  if (e.all_day) return day;
+  return `${day} ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`;
+}
+</script>
+
+<template>
+  <div class="dash-root">
+    <header class="dash-head">
+      <h1>Dashboard</h1>
+      <p class="dash-sub">What to work on, across your most-active projects.</p>
+    </header>
+
+    <div v-if="loading" class="dash-empty">Loading…</div>
+
+    <template v-else-if="data">
+      <!-- Done recently -->
+      <section v-if="data.recently_completed.length" class="done-strip">
+        <span class="dash-label">✓ Done recently</span>
+        <router-link
+          v-for="d in data.recently_completed"
+          :key="d.id"
+          :to="`/tasks/${d.id}`"
+          class="done-chip"
+        >
+          {{ d.title }}
+          <span class="done-meta">{{ d.project_title || "—" }} · {{ relativeTime(d.completed_at) }}</span>
+        </router-link>
+      </section>
+
+      <div class="dash-cols">
+        <!-- Active now -->
+        <main class="dash-main">
+          <div class="dash-label">Active now</div>
+
+          <div v-if="!data.active_projects.length" class="dash-empty card">
+            No active projects yet — <router-link to="/projects">create one</router-link>.
+          </div>
+
+          <article v-for="p in data.active_projects" :key="p.id" class="proj-panel">
+            <header class="proj-head">
+              <span class="proj-dot" :style="{ background: p.color || 'var(--color-primary)' }" />
+              <router-link :to="`/projects/${p.id}`" class="proj-title">{{ p.title }}</router-link>
+              <span class="proj-meta">{{ relativeTime(p.last_activity) }} · {{ p.open_count }} open</span>
+            </header>
+            <div class="bar"><div class="bar-fill" :style="{ width: p.progress_pct + '%' }" /></div>
+
+            <div v-for="m in p.milestones" :key="m.id" class="ms-block">
+              <div class="ms-head">
+                <span class="ms-title">{{ m.title }}</span>
+                <span class="ms-pct">{{ m.progress_pct }}%</span>
+              </div>
+              <router-link
+                v-for="t in m.open_tasks"
+                :key="t.id"
+                :to="`/tasks/${t.id}`"
+                class="task-row"
+                :class="{ 'task-inprogress': t.status === 'in_progress' }"
+              >
+                <span class="task-mark">{{ t.status === 'in_progress' ? '▸' : '○' }}</span>
+                <span class="task-title">{{ t.title }}</span>
+                <span v-if="t.priority !== 'none'" class="task-pri" :class="`pri-${t.priority}`">{{ t.priority }}</span>
+              </router-link>
+            </div>
+
+            <div v-if="p.no_milestone.length" class="ms-block">
+              <div class="ms-head"><span class="ms-title ms-none">No milestone</span></div>
+              <router-link
+                v-for="t in p.no_milestone"
+                :key="t.id"
+                :to="`/tasks/${t.id}`"
+                class="task-row"
+                :class="{ 'task-inprogress': t.status === 'in_progress' }"
+              >
+                <span class="task-mark">{{ t.status === 'in_progress' ? '▸' : '○' }}</span>
+                <span class="task-title">{{ t.title }}</span>
+                <span v-if="t.priority !== 'none'" class="task-pri" :class="`pri-${t.priority}`">{{ t.priority }}</span>
+              </router-link>
+            </div>
+
+            <router-link :to="`/projects/${p.id}`" class="proj-more">+ more in {{ p.title }} →</router-link>
+          </article>
+        </main>
+
+        <!-- Right rail -->
+        <aside class="dash-rail">
+          <div class="dash-label">Upcoming · 7 days</div>
+          <div class="rail-card">
+            <template v-if="data.upcoming_events.length">
+              <div v-for="e in data.upcoming_events" :key="e.id" class="evt-row">
+                <span class="evt-when">{{ fmtEvent(e) }}</span>
+                <span class="evt-title">{{ e.title }}</span>
+              </div>
+            </template>
+            <p v-else class="rail-empty">Nothing scheduled.</p>
+          </div>
+
+          <div class="dash-label">This week</div>
+          <div class="rail-card stats">
+            <span>✓ {{ data.week_stats.completed_this_week }} done</span>
+            <span>○ {{ data.week_stats.open_total }} open</span>
+            <span class="stats-sub">{{ data.week_stats.in_progress }} in progress · {{ data.week_stats.active_plans }} plans</span>
+          </div>
+
+          <div class="quick-add">
+            <router-link to="/tasks/new" class="qa-btn">+ Task</router-link>
+            <router-link to="/notes/new" class="qa-btn">+ Note</router-link>
+            <router-link to="/notes/new?type=process" class="qa-btn">+ Process</router-link>
+          </div>
+        </aside>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.dash-root { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
+.dash-head h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; }
+.dash-sub { margin: 0.2rem 0 1.25rem; color: var(--color-muted); font-size: 0.9rem; }
+.dash-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.6rem; }
+.dash-empty { color: var(--color-muted); padding: 1rem 0; }
+.dash-empty.card { padding: 1rem; border: 1px dashed var(--color-border); border-radius: 10px; }
+
+.done-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; }
+.done-chip { display: inline-flex; flex-direction: column; gap: 1px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 4px 12px; font-size: 0.82rem; color: var(--color-text); text-decoration: none; }
+.done-chip:hover { border-color: var(--color-primary); }
+.done-meta { font-size: 0.7rem; color: var(--color-muted); }
+
+.dash-cols { display: flex; gap: 1.25rem; align-items: flex-start; }
+.dash-main { flex: 1.7; min-width: 0; }
+.dash-rail { flex: 1; min-width: 240px; }
+
+.proj-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
+.proj-head { display: flex; align-items: center; gap: 0.5rem; }
+.proj-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+.proj-title { font-weight: 700; color: var(--color-text); text-decoration: none; }
+.proj-title:hover { color: var(--color-primary); }
+.proj-meta { margin-left: auto; font-size: 0.74rem; color: var(--color-muted); }
+.bar { height: 5px; background: var(--color-border); border-radius: 3px; margin: 0.55rem 0 0.2rem; }
+.bar-fill { height: 5px; background: var(--color-primary); border-radius: 3px; }
+
+.ms-block { margin-top: 0.7rem; }
+.ms-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
+.ms-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
+.ms-title.ms-none { color: var(--color-muted); font-weight: 500; }
+.ms-pct { margin-left: auto; font-size: 0.72rem; color: var(--color-muted); }
+
+.task-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 7px; text-decoration: none; color: var(--color-text); font-size: 0.86rem; }
+.task-row:hover { background: var(--color-hover); }
+.task-inprogress { border-left: 3px solid var(--color-primary); padding-left: calc(0.55rem - 3px); }
+.task-mark { color: var(--color-muted); }
+.task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.task-pri { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--color-border); color: var(--color-muted); }
+.pri-high { color: #c0556b; border-color: #c0556b66; }
+.proj-more { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-primary); text-decoration: none; }
+
+.rail-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 1.25rem; }
+.evt-row { display: flex; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
+.evt-row:last-child { border-bottom: none; }
+.evt-when { color: var(--color-muted); white-space: nowrap; }
+.evt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rail-empty { margin: 0; color: var(--color-muted); font-size: 0.85rem; }
+.stats { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
+.stats-sub { color: var(--color-muted); font-size: 0.78rem; }
+.quick-add { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.qa-btn { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--color-text); text-decoration: none; }
+.qa-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+@media (max-width: 760px) { .dash-cols { flex-direction: column; } }
+</style>