feat: add daily summaries feature

- Backend: daily_summaries table, API routes (GET/POST/PATCH) at /api/summaries
- Frontend: SummariesPage with calendar view, markdown rendering, stats bar, highlights
- Sidebar nav: added Summaries link between Activity and Chat
- Data population script for importing from memory files
- Bearer token + session auth support

backend/src/db/schema.ts

@@ -117,6 +117,64 @@ export const taskComments = pgTable("task_comments", {
 export type TaskComment = typeof taskComments.$inferSelect;
 export type NewTaskComment = typeof taskComments.$inferInsert;
 
+// ─── Security Audits ───
+
+export const securityAuditStatusEnum = pgEnum("security_audit_status", [
+  "strong",
+  "needs_improvement",
+  "critical",
+]);
+
+export interface SecurityFinding {
+  id: string;
+  status: "strong" | "needs_improvement" | "critical";
+  title: string;
+  description: string;
+  recommendation: string;
+}
+
+export const securityAudits = pgTable("security_audits", {
+  id: uuid("id").defaultRandom().primaryKey(),
+  projectName: text("project_name").notNull(),
+  category: text("category").notNull(),
+  findings: jsonb("findings").$type<SecurityFinding[]>().default([]),
+  score: integer("score").notNull().default(0), // 0-100
+  lastAudited: timestamp("last_audited", { withTimezone: true }).defaultNow().notNull(),
+  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow().notNull(),
+  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow().notNull(),
+});
+
+export type SecurityAudit = typeof securityAudits.$inferSelect;
+export type NewSecurityAudit = typeof securityAudits.$inferInsert;
+
+// ─── Daily Summaries ───
+
+export interface SummaryHighlight {
+  text: string;
+}
+
+export interface SummaryStats {
+  deploys?: number;
+  commits?: number;
+  tasksCompleted?: number;
+  featuresBuilt?: number;
+  bugsFixed?: number;
+  [key: string]: number | undefined;
+}
+
+export const dailySummaries = pgTable("daily_summaries", {
+  id: uuid("id").defaultRandom().primaryKey(),
+  date: text("date").notNull().unique(), // YYYY-MM-DD
+  content: text("content").notNull(),
+  highlights: jsonb("highlights").$type<SummaryHighlight[]>().default([]),
+  stats: jsonb("stats").$type<SummaryStats>().default({}),
+  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow().notNull(),
+  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow().notNull(),
+});
+
+export type DailySummary = typeof dailySummaries.$inferSelect;
+export type NewDailySummary = typeof dailySummaries.$inferInsert;
+
 // ─── BetterAuth tables ───
 
 export const users = pgTable("users", {

backend/src/routes/security.ts

@@ -0,0 +1,188 @@
+import { Elysia, t } from "elysia";
+import { db } from "../db";
+import { securityAudits } from "../db/schema";
+import { eq, asc, and } from "drizzle-orm";
+import { auth } from "../lib/auth";
+
+const BEARER_TOKEN = process.env.API_BEARER_TOKEN || "hammer-dev-token";
+
+async function requireSessionOrBearer(
+  request: Request,
+  headers: Record<string, string | undefined>
+) {
+  const authHeader = headers["authorization"];
+  if (authHeader === `Bearer ${BEARER_TOKEN}`) return;
+  try {
+    const session = await auth.api.getSession({ headers: request.headers });
+    if (session) return;
+  } catch {}
+  throw new Error("Unauthorized");
+}
+
+const findingSchema = t.Object({
+  id: t.String(),
+  status: t.Union([
+    t.Literal("strong"),
+    t.Literal("needs_improvement"),
+    t.Literal("critical"),
+  ]),
+  title: t.String(),
+  description: t.String(),
+  recommendation: t.String(),
+});
+
+export const securityRoutes = new Elysia({ prefix: "/api/security" })
+  .onError(({ error, set }) => {
+    const msg = (error as any)?.message || String(error);
+    if (msg === "Unauthorized") {
+      set.status = 401;
+      return { error: "Unauthorized" };
+    }
+    if (msg === "Audit not found") {
+      set.status = 404;
+      return { error: "Audit not found" };
+    }
+    console.error("Security route error:", msg);
+    set.status = 500;
+    return { error: "Internal server error" };
+  })
+
+  // GET all audits
+  .get("/", async ({ request, headers }) => {
+    await requireSessionOrBearer(request, headers);
+    const all = await db
+      .select()
+      .from(securityAudits)
+      .orderBy(asc(securityAudits.projectName), asc(securityAudits.category));
+    return all;
+  })
+
+  // GET summary (aggregate scores per project)
+  .get("/summary", async ({ request, headers }) => {
+    await requireSessionOrBearer(request, headers);
+    const all = await db
+      .select()
+      .from(securityAudits)
+      .orderBy(asc(securityAudits.projectName));
+
+    const projectMap: Record<
+      string,
+      { scores: number[]; categories: number; lastAudited: string }
+    > = {};
+
+    for (const audit of all) {
+      if (!projectMap[audit.projectName]) {
+        projectMap[audit.projectName] = {
+          scores: [],
+          categories: 0,
+          lastAudited: audit.lastAudited.toISOString(),
+        };
+      }
+      projectMap[audit.projectName].scores.push(audit.score);
+      projectMap[audit.projectName].categories++;
+      const auditDate = audit.lastAudited.toISOString();
+      if (auditDate > projectMap[audit.projectName].lastAudited) {
+        projectMap[audit.projectName].lastAudited = auditDate;
+      }
+    }
+
+    const summary = Object.entries(projectMap).map(([name, data]) => ({
+      projectName: name,
+      averageScore: Math.round(
+        data.scores.reduce((a, b) => a + b, 0) / data.scores.length
+      ),
+      categoriesAudited: data.categories,
+      lastAudited: data.lastAudited,
+    }));
+
+    return summary;
+  })
+
+  // GET audits for a specific project
+  .get(
+    "/project/:projectName",
+    async ({ params, request, headers }) => {
+      await requireSessionOrBearer(request, headers);
+      const audits = await db
+        .select()
+        .from(securityAudits)
+        .where(eq(securityAudits.projectName, decodeURIComponent(params.projectName)))
+        .orderBy(asc(securityAudits.category));
+      return audits;
+    },
+    { params: t.Object({ projectName: t.String() }) }
+  )
+
+  // POST create audit entry
+  .post(
+    "/",
+    async ({ body, request, headers }) => {
+      await requireSessionOrBearer(request, headers);
+      const newAudit = await db
+        .insert(securityAudits)
+        .values({
+          projectName: body.projectName,
+          category: body.category,
+          findings: body.findings || [],
+          score: body.score,
+          lastAudited: new Date(),
+        })
+        .returning();
+      return newAudit[0];
+    },
+    {
+      body: t.Object({
+        projectName: t.String(),
+        category: t.String(),
+        findings: t.Optional(t.Array(findingSchema)),
+        score: t.Number(),
+      }),
+    }
+  )
+
+  // PATCH update audit entry
+  .patch(
+    "/:id",
+    async ({ params, body, request, headers }) => {
+      await requireSessionOrBearer(request, headers);
+      const updates: Record<string, any> = { updatedAt: new Date() };
+      if (body.projectName !== undefined) updates.projectName = body.projectName;
+      if (body.category !== undefined) updates.category = body.category;
+      if (body.findings !== undefined) updates.findings = body.findings;
+      if (body.score !== undefined) updates.score = body.score;
+      if (body.refreshAuditDate) updates.lastAudited = new Date();
+
+      const updated = await db
+        .update(securityAudits)
+        .set(updates)
+        .where(eq(securityAudits.id, params.id))
+        .returning();
+      if (!updated.length) throw new Error("Audit not found");
+      return updated[0];
+    },
+    {
+      params: t.Object({ id: t.String() }),
+      body: t.Object({
+        projectName: t.Optional(t.String()),
+        category: t.Optional(t.String()),
+        findings: t.Optional(t.Array(findingSchema)),
+        score: t.Optional(t.Number()),
+        refreshAuditDate: t.Optional(t.Boolean()),
+      }),
+    }
+  )
+
+  // DELETE audit entry
+  .delete(
+    "/:id",
+    async ({ params, request, headers }) => {
+      await requireSessionOrBearer(request, headers);
+      const deleted = await db
+        .delete(securityAudits)
+        .where(eq(securityAudits.id, params.id))
+        .returning();
+      if (!deleted.length) throw new Error("Audit not found");
+      return { success: true };
+    },
+    { params: t.Object({ id: t.String() }) }
+  );

backend/src/routes/summaries.ts

@@ -0,0 +1,192 @@
+import { Elysia, t } from "elysia";
+import { db } from "../db";
+import { dailySummaries } from "../db/schema";
+import { desc, eq, sql } from "drizzle-orm";
+import { auth } from "../lib/auth";
+
+const BEARER_TOKEN = process.env.API_BEARER_TOKEN || "hammer-dev-token";
+
+async function requireSessionOrBearer(
+  request: Request,
+  headers: Record<string, string | undefined>
+) {
+  const authHeader = headers["authorization"];
+  if (authHeader === `Bearer ${BEARER_TOKEN}`) return;
+  try {
+    const session = await auth.api.getSession({ headers: request.headers });
+    if (session?.user) return;
+  } catch {}
+  throw new Error("Unauthorized");
+}
+
+export const summaryRoutes = new Elysia({ prefix: "/api/summaries" })
+  .onError(({ error, set }) => {
+    const msg = (error as any)?.message || String(error);
+    if (msg === "Unauthorized") {
+      set.status = 401;
+      return { error: "Unauthorized" };
+    }
+    if (msg === "Not found") {
+      set.status = 404;
+      return { error: "Summary not found" };
+    }
+    set.status = 500;
+    return { error: "Internal server error" };
+  })
+
+  // GET /api/summaries — list all summaries (paginated, newest first)
+  .get("/", async ({ request, headers, query }) => {
+    await requireSessionOrBearer(request, headers);
+
+    const page = Math.max(1, Number(query.page) || 1);
+    const limit = Math.min(Number(query.limit) || 50, 200);
+    const offset = (page - 1) * limit;
+
+    const [items, countResult] = await Promise.all([
+      db
+        .select()
+        .from(dailySummaries)
+        .orderBy(desc(dailySummaries.date))
+        .limit(limit)
+        .offset(offset),
+      db
+        .select({ count: sql<number>`count(*)` })
+        .from(dailySummaries),
+    ]);
+
+    const total = Number(countResult[0]?.count ?? 0);
+
+    return {
+      items,
+      total,
+      page,
+      limit,
+      totalPages: Math.ceil(total / limit),
+    };
+  })
+
+  // GET /api/summaries/dates — list all dates that have summaries (for calendar)
+  .get("/dates", async ({ request, headers }) => {
+    await requireSessionOrBearer(request, headers);
+
+    const rows = await db
+      .select({ date: dailySummaries.date })
+      .from(dailySummaries)
+      .orderBy(desc(dailySummaries.date));
+
+    return { dates: rows.map((r) => r.date) };
+  })
+
+  // GET /api/summaries/:date — get summary for specific date
+  .get("/:date", async ({ request, headers, params }) => {
+    await requireSessionOrBearer(request, headers);
+
+    const { date } = params;
+    // Validate date format
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      throw new Error("Not found");
+    }
+
+    const result = await db
+      .select()
+      .from(dailySummaries)
+      .where(eq(dailySummaries.date, date))
+      .limit(1);
+
+    if (result.length === 0) {
+      throw new Error("Not found");
+    }
+
+    return result[0];
+  })
+
+  // POST /api/summaries — create/upsert summary for a date
+  .post("/", async ({ request, headers, body }) => {
+    await requireSessionOrBearer(request, headers);
+
+    const { date, content, highlights, stats } = body as {
+      date: string;
+      content: string;
+      highlights?: { text: string }[];
+      stats?: Record<string, number>;
+    };
+
+    if (!date || !content) {
+      throw new Error("date and content are required");
+    }
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      throw new Error("date must be YYYY-MM-DD format");
+    }
+
+    // Upsert: insert or update on conflict
+    const existing = await db
+      .select()
+      .from(dailySummaries)
+      .where(eq(dailySummaries.date, date))
+      .limit(1);
+
+    if (existing.length > 0) {
+      const updated = await db
+        .update(dailySummaries)
+        .set({
+          content,
+          highlights: highlights || existing[0].highlights,
+          stats: stats || existing[0].stats,
+          updatedAt: new Date(),
+        })
+        .where(eq(dailySummaries.date, date))
+        .returning();
+      return updated[0];
+    }
+
+    const inserted = await db
+      .insert(dailySummaries)
+      .values({
+        date,
+        content,
+        highlights: highlights || [],
+        stats: stats || {},
+      })
+      .returning();
+
+    return inserted[0];
+  })
+
+  // PATCH /api/summaries/:date — update existing summary
+  .patch("/:date", async ({ request, headers, params, body }) => {
+    await requireSessionOrBearer(request, headers);
+
+    const { date } = params;
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      throw new Error("Not found");
+    }
+
+    const existing = await db
+      .select()
+      .from(dailySummaries)
+      .where(eq(dailySummaries.date, date))
+      .limit(1);
+
+    if (existing.length === 0) {
+      throw new Error("Not found");
+    }
+
+    const updates: Record<string, any> = { updatedAt: new Date() };
+    const { content, highlights, stats } = body as {
+      content?: string;
+      highlights?: { text: string }[];
+      stats?: Record<string, number>;
+    };
+
+    if (content !== undefined) updates.content = content;
+    if (highlights !== undefined) updates.highlights = highlights;
+    if (stats !== undefined) updates.stats = stats;
+
+    const updated = await db
+      .update(dailySummaries)
+      .set(updates)
+      .where(eq(dailySummaries.date, date))
+      .returning();
+
+    return updated[0];
+  });

backend/src/scripts/populate-summaries.ts

@@ -0,0 +1,101 @@
+/**
+ * Populate daily_summaries from ~/clawd/memory/*.md files.
+ * Usage: bun run src/scripts/populate-summaries.ts
+ */
+import { db } from "../db";
+import { dailySummaries } from "../db/schema";
+import { eq } from "drizzle-orm";
+import { readdir, readFile } from "fs/promises";
+import { join } from "path";
+
+const MEMORY_DIR = process.env.MEMORY_DIR || "/home/clawdbot/clawd/memory";
+
+function extractHighlights(content: string): { text: string }[] {
+  const highlights: { text: string }[] = [];
+  const lines = content.split("\n");
+
+  for (const line of lines) {
+    // Match ## headings as key sections
+    const h2Match = line.match(/^## (.+)/);
+    if (h2Match) {
+      highlights.push({ text: h2Match[1].trim() });
+    }
+  }
+
+  return highlights.slice(0, 20); // Cap at 20 highlights
+}
+
+function extractStats(content: string): Record<string, number> {
+  const lower = content.toLowerCase();
+  const stats: Record<string, number> = {};
+
+  // Count deploy mentions
+  const deployMatches = lower.match(/\b(deploy|deployed|deployment|redeployed)\b/g);
+  if (deployMatches) stats.deploys = deployMatches.length;
+
+  // Count commit/push mentions
+  const commitMatches = lower.match(/\b(commit|committed|pushed|push)\b/g);
+  if (commitMatches) stats.commits = commitMatches.length;
+
+  // Count task mentions
+  const taskMatches = lower.match(/\b(completed|task completed|hq-\d+.*completed)\b/g);
+  if (taskMatches) stats.tasksCompleted = taskMatches.length;
+
+  // Count feature mentions
+  const featureMatches = lower.match(/\b(feature|built|implemented|added|created)\b/g);
+  if (featureMatches) stats.featuresBuilt = Math.min(featureMatches.length, 30);
+
+  // Count fix mentions
+  const fixMatches = lower.match(/\b(fix|fixed|bug|bugfix|hotfix)\b/g);
+  if (fixMatches) stats.bugsFixed = fixMatches.length;
+
+  return stats;
+}
+
+async function main() {
+  console.log(`Reading memory files from ${MEMORY_DIR}...`);
+
+  const files = await readdir(MEMORY_DIR);
+  const mdFiles = files
+    .filter((f) => /^\d{4}-\d{2}-\d{2}\.md$/.test(f))
+    .sort();
+
+  console.log(`Found ${mdFiles.length} memory files`);
+
+  for (const file of mdFiles) {
+    const date = file.replace(".md", "");
+    const filePath = join(MEMORY_DIR, file);
+    const content = await readFile(filePath, "utf-8");
+
+    const highlights = extractHighlights(content);
+    const stats = extractStats(content);
+
+    // Upsert
+    const existing = await db
+      .select()
+      .from(dailySummaries)
+      .where(eq(dailySummaries.date, date))
+      .limit(1);
+
+    if (existing.length > 0) {
+      await db
+        .update(dailySummaries)
+        .set({ content, highlights, stats, updatedAt: new Date() })
+        .where(eq(dailySummaries.date, date));
+      console.log(`Updated: ${date}`);
+    } else {
+      await db
+        .insert(dailySummaries)
+        .values({ date, content, highlights, stats });
+      console.log(`Inserted: ${date}`);
+    }
+  }
+
+  console.log("Done!");
+  process.exit(0);
+}
+
+main().catch((e) => {
+  console.error("Failed:", e);
+  process.exit(1);
+});

frontend/src/App.tsx

@@ -12,7 +12,9 @@ const QueuePage = lazy(() => import("./pages/QueuePage").then(m => ({ default: m
 const ProjectsPage = lazy(() => import("./pages/ProjectsPage").then(m => ({ default: m.ProjectsPage })));
 const TaskPage = lazy(() => import("./pages/TaskPage").then(m => ({ default: m.TaskPage })));
 const ActivityPage = lazy(() => import("./pages/ActivityPage").then(m => ({ default: m.ActivityPage })));
+const SummariesPage = lazy(() => import("./pages/SummariesPage").then(m => ({ default: m.SummariesPage })));
 const AdminPage = lazy(() => import("./components/AdminPage").then(m => ({ default: m.AdminPage })));
+const SecurityPage = lazy(() => import("./pages/SecurityPage").then(m => ({ default: m.SecurityPage })));
 
 function PageLoader() {
   return (
@@ -36,6 +38,8 @@ function AuthenticatedApp() {
           <Route path="/task/:taskRef" element={<Suspense fallback={<PageLoader />}><TaskPage /></Suspense>} />
           <Route path="/projects" element={<Suspense fallback={<PageLoader />}><ProjectsPage /></Suspense>} />
           <Route path="/activity" element={<Suspense fallback={<PageLoader />}><ActivityPage /></Suspense>} />
+          <Route path="/summaries" element={<Suspense fallback={<PageLoader />}><SummariesPage /></Suspense>} />
+          <Route path="/security" element={<Suspense fallback={<PageLoader />}><SecurityPage /></Suspense>} />
           <Route path="/admin" element={<Suspense fallback={<PageLoader />}><AdminPage /></Suspense>} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Route>

frontend/src/components/DashboardLayout.tsx

@@ -12,6 +12,8 @@ const navItems = [
   { to: "/queue", label: "Queue", icon: "📋", badgeKey: "queue" },
   { to: "/projects", label: "Projects", icon: "📁", badgeKey: null },
   { to: "/activity", label: "Activity", icon: "📝", badgeKey: null },
+  { to: "/summaries", label: "Summaries", icon: "📅", badgeKey: null },
+  { to: "/security", label: "Security", icon: "🛡️", badgeKey: null },
 ] as const;
 
 export function DashboardLayout() {

frontend/src/pages/SummariesPage.tsx

@@ -0,0 +1,445 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface SummaryStats {
+  deploys?: number;
+  commits?: number;
+  tasksCompleted?: number;
+  featuresBuilt?: number;
+  bugsFixed?: number;
+  [key: string]: number | undefined;
+}
+
+interface SummaryHighlight {
+  text: string;
+}
+
+interface DailySummary {
+  id: string;
+  date: string;
+  content: string;
+  highlights: SummaryHighlight[];
+  stats: SummaryStats;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const STAT_ICONS: Record<string, string> = {
+  deploys: "🚀",
+  commits: "📦",
+  tasksCompleted: "✅",
+  featuresBuilt: "🛠️",
+  bugsFixed: "🐛",
+};
+
+const STAT_LABELS: Record<string, string> = {
+  deploys: "Deploys",
+  commits: "Commits",
+  tasksCompleted: "Tasks",
+  featuresBuilt: "Features",
+  bugsFixed: "Fixes",
+};
+
+function formatDateDisplay(dateStr: string): string {
+  const d = new Date(dateStr + "T12:00:00Z");
+  return d.toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+function formatShort(dateStr: string): string {
+  const d = new Date(dateStr + "T12:00:00Z");
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function getFirstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+function toDateStr(y: number, m: number, d: number): string {
+  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+
+function todayStr(): string {
+  const d = new Date();
+  return toDateStr(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+function addDays(dateStr: string, days: number): string {
+  const d = new Date(dateStr + "T12:00:00Z");
+  d.setUTCDate(d.getUTCDate() + days);
+  return toDateStr(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+}
+
+export function SummariesPage() {
+  const [summaryDates, setSummaryDates] = useState<Set<string>>(new Set());
+  const [selectedDate, setSelectedDate] = useState<string>(todayStr());
+  const [summary, setSummary] = useState<DailySummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadingSummary, setLoadingSummary] = useState(false);
+  const [calMonth, setCalMonth] = useState(() => {
+    const d = new Date();
+    return { year: d.getFullYear(), month: d.getMonth() };
+  });
+
+  // Fetch all dates with summaries
+  const fetchDates = useCallback(async () => {
+    try {
+      const res = await fetch("/api/summaries/dates", { credentials: "include" });
+      if (!res.ok) throw new Error("Failed to fetch dates");
+      const data = await res.json();
+      setSummaryDates(new Set(data.dates));
+    } catch (e) {
+      console.error("Failed to fetch summary dates:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Fetch summary for selected date
+  const fetchSummary = useCallback(async (date: string) => {
+    setLoadingSummary(true);
+    setSummary(null);
+    try {
+      const res = await fetch(`/api/summaries/${date}`, { credentials: "include" });
+      if (res.status === 404) {
+        setSummary(null);
+        return;
+      }
+      if (!res.ok) throw new Error("Failed to fetch summary");
+      const data = await res.json();
+      setSummary(data);
+    } catch (e) {
+      console.error("Failed to fetch summary:", e);
+      setSummary(null);
+    } finally {
+      setLoadingSummary(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchDates();
+  }, [fetchDates]);
+
+  useEffect(() => {
+    if (selectedDate) {
+      fetchSummary(selectedDate);
+    }
+  }, [selectedDate, fetchSummary]);
+
+  // Calendar data
+  const daysInMonth = getDaysInMonth(calMonth.year, calMonth.month);
+  const firstDay = getFirstDayOfMonth(calMonth.year, calMonth.month);
+  const monthLabel = new Date(calMonth.year, calMonth.month, 1).toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric",
+  });
+
+  const calDays = useMemo(() => {
+    const days: (number | null)[] = [];
+    for (let i = 0; i < firstDay; i++) days.push(null);
+    for (let d = 1; d <= daysInMonth; d++) days.push(d);
+    return days;
+  }, [firstDay, daysInMonth]);
+
+  const prevMonth = () =>
+    setCalMonth((p) => (p.month === 0 ? { year: p.year - 1, month: 11 } : { year: p.year, month: p.month - 1 }));
+  const nextMonth = () =>
+    setCalMonth((p) => (p.month === 11 ? { year: p.year + 1, month: 0 } : { year: p.year, month: p.month + 1 }));
+  const goToday = () => {
+    const d = new Date();
+    setCalMonth({ year: d.getFullYear(), month: d.getMonth() });
+    setSelectedDate(todayStr());
+  };
+
+  const prevDay = () => {
+    const dates = Array.from(summaryDates).sort().reverse();
+    const idx = dates.indexOf(selectedDate);
+    if (idx >= 0 && idx < dates.length - 1) setSelectedDate(dates[idx + 1]);
+    else if (idx === -1) {
+      const prev = dates.find((d) => d < selectedDate);
+      if (prev) setSelectedDate(prev);
+      else setSelectedDate(addDays(selectedDate, -1));
+    } else {
+      setSelectedDate(addDays(selectedDate, -1));
+    }
+  };
+
+  const nextDay = () => {
+    const dates = Array.from(summaryDates).sort();
+    const idx = dates.indexOf(selectedDate);
+    if (idx >= 0 && idx < dates.length - 1) setSelectedDate(dates[idx + 1]);
+    else if (idx === -1) {
+      const next = dates.find((d) => d > selectedDate);
+      if (next) setSelectedDate(next);
+      else setSelectedDate(addDays(selectedDate, 1));
+    } else {
+      setSelectedDate(addDays(selectedDate, 1));
+    }
+  };
+
+  const today = todayStr();
+  const statsEntries = summary
+    ? Object.entries(summary.stats).filter(([, v]) => v !== undefined && v > 0)
+    : [];
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
+        Loading summaries...
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">📅 Daily Summaries</h1>
+              <p className="text-sm text-gray-400 dark:text-gray-500">
+                {summaryDates.size} days logged
+              </p>
+            </div>
+            <button
+              onClick={goToday}
+              className="text-xs font-medium bg-amber-500 hover:bg-amber-600 text-white px-3 py-1.5 rounded-lg transition"
+            >
+              Today
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6">
+        <div className="grid grid-cols-1 lg:grid-cols-[300px_1fr] gap-6">
+          {/* Calendar sidebar */}
+          <div className="space-y-4">
+            {/* Calendar widget */}
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4">
+              <div className="flex items-center justify-between mb-4">
+                <button
+                  onClick={prevMonth}
+                  className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400 transition"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{monthLabel}</h3>
+                <button
+                  onClick={nextMonth}
+                  className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400 transition"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+
+              {/* Day headers */}
+              <div className="grid grid-cols-7 gap-1 mb-1">
+                {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => (
+                  <div key={d} className="text-[10px] font-medium text-gray-400 dark:text-gray-500 text-center py-1">
+                    {d}
+                  </div>
+                ))}
+              </div>
+
+              {/* Day cells */}
+              <div className="grid grid-cols-7 gap-1">
+                {calDays.map((day, i) => {
+                  if (day === null) return <div key={`empty-${i}`} />;
+                  const dateStr = toDateStr(calMonth.year, calMonth.month, day);
+                  const hasSummary = summaryDates.has(dateStr);
+                  const isSelected = dateStr === selectedDate;
+                  const isToday = dateStr === today;
+
+                  return (
+                    <button
+                      key={dateStr}
+                      onClick={() => setSelectedDate(dateStr)}
+                      className={`
+                        relative w-full aspect-square flex items-center justify-center rounded-lg text-xs font-medium transition
+                        ${isSelected
+                          ? "bg-amber-500 text-white"
+                          : isToday
+                            ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400"
+                            : hasSummary
+                              ? "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700"
+                              : "text-gray-400 dark:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                        }
+                      `}
+                    >
+                      {day}
+                      {hasSummary && !isSelected && (
+                        <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-amber-500" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Recent summaries list */}
+            <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4">
+              <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Recent Days</h3>
+              <div className="space-y-1">
+                {Array.from(summaryDates)
+                  .sort()
+                  .reverse()
+                  .slice(0, 10)
+                  .map((date) => (
+                    <button
+                      key={date}
+                      onClick={() => {
+                        setSelectedDate(date);
+                        const d = new Date(date + "T12:00:00Z");
+                        setCalMonth({ year: d.getUTCFullYear(), month: d.getUTCMonth() });
+                      }}
+                      className={`w-full text-left px-3 py-2 rounded-lg text-sm transition ${
+                        date === selectedDate
+                          ? "bg-amber-500/20 text-amber-700 dark:text-amber-400 font-medium"
+                          : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+                      }`}
+                    >
+                      {formatShort(date)}
+                      <span className="text-xs text-gray-400 dark:text-gray-500 ml-2">
+                        {new Date(date + "T12:00:00Z").toLocaleDateString("en-US", { weekday: "short" })}
+                      </span>
+                    </button>
+                  ))}
+                {summaryDates.size === 0 && (
+                  <p className="text-xs text-gray-400 dark:text-gray-500 py-2">No summaries yet</p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Summary content */}
+          <div>
+            {/* Date navigation */}
+            <div className="flex items-center justify-between mb-4">
+              <button
+                onClick={prevDay}
+                className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+                Prev
+              </button>
+              <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">
+                {formatDateDisplay(selectedDate)}
+              </h2>
+              <button
+                onClick={nextDay}
+                className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition"
+              >
+                Next
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </button>
+            </div>
+
+            {loadingSummary ? (
+              <div className="flex items-center justify-center py-20 text-gray-400 dark:text-gray-500">
+                <div className="flex items-center gap-2">
+                  <span className="w-2 h-2 bg-amber-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
+                  <span className="w-2 h-2 bg-amber-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
+                  <span className="w-2 h-2 bg-amber-400 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
+                </div>
+              </div>
+            ) : summary ? (
+              <div className="space-y-4">
+                {/* Stats bar */}
+                {statsEntries.length > 0 && (
+                  <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4">
+                    <div className="flex flex-wrap gap-4">
+                      {statsEntries.map(([key, value]) => (
+                        <div key={key} className="flex items-center gap-2">
+                          <span className="text-lg">{STAT_ICONS[key] || "📊"}</span>
+                          <div>
+                            <p className="text-lg font-bold text-gray-900 dark:text-gray-100">{value}</p>
+                            <p className="text-[10px] text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                              {STAT_LABELS[key] || key}
+                            </p>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Highlights */}
+                {summary.highlights && summary.highlights.length > 0 && (
+                  <div className="bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-800/50 p-4">
+                    <h3 className="text-sm font-semibold text-amber-800 dark:text-amber-400 mb-2">
+                      ⚡ Key Accomplishments
+                    </h3>
+                    <ul className="space-y-1.5">
+                      {summary.highlights.map((h, i) => (
+                        <li key={i} className="flex items-start gap-2 text-sm text-amber-900 dark:text-amber-200">
+                          <span className="text-amber-500 mt-0.5">•</span>
+                          <span>{h.text}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                {/* Full markdown content */}
+                <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
+                  <div className="prose prose-sm dark:prose-invert max-w-none prose-headings:text-gray-900 dark:prose-headings:text-gray-100 prose-a:text-amber-600 dark:prose-a:text-amber-400 prose-code:text-amber-700 dark:prose-code:text-amber-300 prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {summary.content}
+                    </ReactMarkdown>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              /* Empty state */
+              <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-12 text-center">
+                <div className="text-4xl mb-3">📭</div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">
+                  No summary for this day
+                </h3>
+                <p className="text-sm text-gray-400 dark:text-gray-500">
+                  {selectedDate === today
+                    ? "Today's summary hasn't been created yet. Check back later!"
+                    : "No work was logged for this date."}
+                </p>
+                {summaryDates.size > 0 && (
+                  <button
+                    onClick={() => {
+                      const nearest = Array.from(summaryDates).sort().reverse()[0];
+                      if (nearest) {
+                        setSelectedDate(nearest);
+                        const d = new Date(nearest + "T12:00:00Z");
+                        setCalMonth({ year: d.getUTCFullYear(), month: d.getUTCMonth() });
+                      }
+                    }}
+                    className="mt-4 text-sm text-amber-600 dark:text-amber-400 hover:underline"
+                  >
+                    Jump to latest summary →
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}