@programinglive/dev-workflow-mcp-server 1.1.7 → 1.1.11

package/tools/handlers.js

@@ -1,3 +1,12 @@
+import fs from "fs/promises";
+import { existsSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PROJECT_SUMMARY_FILENAME = "project-summary.json";
+
 const textResponse = (text) => ({
   content: [
     {
@@ -48,6 +57,30 @@ function summarizeHistory(history, limit) {
   return `📜 Workflow History (last ${recent.length} tasks)\n\n${historyText}`;
 }
 
+function generateProjectSummary(history) {
+  if (!history || history.length === 0) {
+    return "No workflow history available.";
+  }
+
+  const taskTypes = {};
+  const recentTasks = history.slice(-20);
+
+  for (const entry of recentTasks) {
+    const type = entry.taskType || "other";
+    taskTypes[type] = (taskTypes[type] || 0) + 1;
+  }
+
+  const typeSummary = Object.entries(taskTypes)
+    .map(([type, count]) => `${type}: ${count}`)
+    .join(", ");
+
+  const totalTasks = history.length;
+  const lastTask = history[history.length - 1];
+  const lastActive = lastTask ? new Date(lastTask.timestamp).toLocaleDateString() : "Never";
+
+  return `🧠 Project Knowledge Summary\n\n📊 Stats\n- Total tasks completed: ${totalTasks}\n- Recent task mix: ${typeSummary}\n- Last active: ${lastActive}\n\n📝 Recent tasks (last 5)\n${history.slice(-5).reverse().map((e, i) => `${i + 1}. ${e.taskDescription} (${e.taskType})`).join("\n")}`;
+}
+
 function getContinueGuidance(status) {
   switch (status.currentPhase) {
     case "coding": {
@@ -162,6 +195,29 @@ async function handleMarkBugFixed(args, workflowState) {
     return textResponse("⚠️ Please start a task first using 'start_task'!");
   }
 
+  // Idempotent behavior: if already marked fixed, do not reset downstream flags.
+  if (workflowState.state.bugFixed) {
+    const summary = typeof args.summary === "string" ? args.summary : "";
+    if (summary && summary.trim() !== "") {
+      workflowState.state.fixSummary = summary;
+    }
+
+    // Preserve existing progress and set an appropriate phase.
+    if (workflowState.state.testsPassed && workflowState.state.documentationCreated) {
+      workflowState.state.currentPhase = "ready";
+      workflowState.state.readyToCommit = true;
+    } else if (workflowState.state.testsCreated) {
+      workflowState.state.currentPhase = "testing";
+    }
+    workflowState.state.readyCheckCompleted = false;
+    workflowState.state.commitAndPushCompleted = false;
+    await workflowState.save();
+
+    return textResponse(
+      "ℹ️ Already marked as fixed; kept existing tests/documentation. Continue with the next step."
+    );
+  }
+
   workflowState.state.bugFixed = true;
   workflowState.state.testsCreated = false;
   workflowState.state.currentPhase = "testing";
@@ -358,14 +414,12 @@ async function handleReadyCheck(workflowState) {
 
 async function handleCommitAndPush(args, context) {
   const { workflowState, exec, git, utils } = context;
-  if (!workflowState.state.readyToCommit) {
-    return textResponse("⚠️ Not ready yet! Run 'check_ready_to_commit' and complete all steps first.");
-  }
-
-  if (!workflowState.state.readyCheckCompleted) {
-    return textResponse(
-      "⚠️ Please run 'check_ready_to_commit' and resolve any outstanding items before committing!"
-    );
+  if (!workflowState.state.readyToCommit || !workflowState.state.readyCheckCompleted) {
+    // Be smart: auto-run the ready check and proceed if it passes.
+    const readyResponse = await handleReadyCheck(workflowState);
+    if (workflowState.state.currentPhase !== "commit") {
+      return readyResponse;
+    }
   }
 
   const providedCommitMessage =
@@ -696,6 +750,195 @@ function handleViewHistory(args, workflowState) {
   return textResponse(message);
 }
 
+function handleProjectSummary(workflowState) {
+  const summary = generateProjectSummary(workflowState.state.history);
+  return textResponse(summary);
+}
+
+async function handleProjectSummaryData(workflowState) {
+  const summaryPath = path.join(path.dirname(workflowState.stateFile), PROJECT_SUMMARY_FILENAME);
+  try {
+    const data = await fs.readFile(summaryPath, "utf-8");
+    const parsed = JSON.parse(data);
+    const formatted = `🧠 Project Knowledge Summary (from persisted data)\n\n📊 Stats\n- Total tasks completed: ${parsed.totalTasks}\n- Recent task mix: ${Object.entries(parsed.taskTypes).map(([t, c]) => `${t}: ${c}`).join(", ")}\n- Last active: ${parsed.lastActive ? new Date(parsed.lastActive).toLocaleDateString() : "Never"}\n- Updated: ${new Date(parsed.updatedAt).toLocaleString()}\n\n📝 Recent tasks (last 5)\n${parsed.recentTasks.map((e, i) => `${i + 1}. ${e.description} (${e.type})`).join("\n")}`;
+    return textResponse(formatted);
+  } catch (error) {
+    // Fallback to in-memory generation if file doesn't exist
+    return handleProjectSummary(workflowState);
+  }
+}
+
+async function handleProjectSummaryDb(workflowState) {
+  const { getSummaryForUser } = await import("../db/index.js");
+  const userId = process.env.DEV_WORKFLOW_USER_ID || "default";
+  const summary = getSummaryForUser(userId);
+  if (!summary) {
+    return textResponse("📜 No project summary in database yet.");
+  }
+  const formatted = `🧠 Project Knowledge Summary (from SQLite)\n\n📊 Stats\n- Total tasks completed: ${summary.totalTasks}\n- Recent task mix: ${Object.entries(summary.taskTypes).map(([t, c]) => `${t}: ${c}`).join(", ")}\n- Last active: ${summary.lastActive ? new Date(summary.lastActive).toLocaleDateString() : "Never"}\n- Updated: ${new Date(summary.updatedAt).toLocaleString()}\n\n📝 Recent tasks (last 5)\n${summary.recentTasks.map((e, i) => `${i + 1}. ${e.description} (${e.type})`).join("\n")}`;
+  return textResponse(formatted);
+}
+
+async function handleRerunWorkflow(workflowState) {
+  const currentDescription = workflowState.state.taskDescription;
+  const currentType = workflowState.state.taskType;
+
+  if (!currentDescription) {
+    return textResponse("⚠️ No active task to rerun. Use 'start_task' to begin a new workflow.");
+  }
+
+  workflowState.reset();
+  workflowState.state.currentPhase = "coding";
+  workflowState.state.taskDescription = currentDescription;
+  workflowState.state.taskType = currentType;
+  await workflowState.save();
+
+  return textResponse(
+    `🔄 Rerunning workflow from the start!\n\nTask: ${currentDescription}\nType: ${currentType}\n\nWorkflow Steps:\n1. ✓ Start task (current)\n2. ⏳ Fix/implement the feature\n3. ⏳ Create tests\n4. ⏳ Run tests (must pass!)\n5. ⏳ Create documentation\n6. ⏳ Run 'check_ready_to_commit'\n7. ⏳ Run 'commit_and_push' (commits and pushes)\n8. ⏳ Run 'perform_release' (handles versioning and tags)\n9. ⏳ Complete task\n\n🎯 Be conscious about what you're coding!`
+  );
+}
+
+function isErrorResponse(response) {
+  const text = response?.content?.[0]?.text || "";
+  return /^\s*[⚠️❌]/u.test(text);
+}
+
+function summarizeResponse(label, response) {
+  const text = response?.content?.[0]?.text || "";
+  const firstLine = text.split("\n")[0] || "";
+  return `${label}: ${firstLine}`;
+}
+
+async function handleRunFullWorkflow(args, { workflowState, exec, git, utils }) {
+  const description = workflowState.state.taskDescription;
+  if (!description) {
+    return textResponse("⚠️ Please start a task first using 'start_task' before running the full workflow.");
+  }
+
+  await workflowState.ensurePrimaryFile();
+
+  const requiredStrings = [
+    { key: "summary", message: "Provide a non-empty 'summary' for mark_bug_fixed." },
+    { key: "testCommand", message: "Provide a non-empty 'testCommand' for run_tests." },
+    { key: "documentationType", message: "Provide 'documentationType' for create_documentation." },
+    { key: "documentationSummary", message: "Provide a non-empty 'documentationSummary'." },
+    { key: "commitMessage", message: "Provide a non-empty 'commitMessage'." },
+    { key: "releaseCommand", message: "Provide a non-empty 'releaseCommand'." },
+  ];
+
+  for (const { key, message } of requiredStrings) {
+    const value = args[key];
+    if (typeof value !== "string" || value.trim() === "") {
+      return textResponse(`⚠️ ${message}`);
+    }
+  }
+
+  const steps = [];
+  const testsPassed = typeof args.testsPassed === "boolean" ? args.testsPassed : true;
+  const testDetails = typeof args.testDetails === "string" ? args.testDetails : "";
+  const releaseArgs = {
+    command: args.releaseCommand,
+  };
+  if (typeof args.releaseNotes === "string" && args.releaseNotes.trim() !== "") {
+    releaseArgs.notes = args.releaseNotes;
+  }
+  if (typeof args.releaseType === "string" && args.releaseType.trim() !== "") {
+    releaseArgs.releaseType = args.releaseType;
+  }
+  if (typeof args.preset === "string" && args.preset.trim() !== "") {
+    releaseArgs.preset = args.preset;
+  }
+
+  // Smart flow: detect current phase and run only remaining steps
+  async function executeStep(name, handlerFn, handlerArgs = []) {
+    if (isErrorResponse(handlerFn)) {
+      return handlerFn;
+    }
+    const response = await handlerFn(...handlerArgs);
+    if (isErrorResponse(response)) {
+      return response;
+    }
+    steps.push(summarizeResponse(name, response));
+    await workflowState.load();
+    return response;
+  }
+
+  while (true) {
+    const state = workflowState.state;
+
+    if (!state.bugFixed) {
+      const resp = await executeStep("mark_bug_fixed", handleMarkBugFixed, [{ summary: args.summary }, workflowState]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    if (!state.testsCreated) {
+      const resp = await executeStep("create_tests", handleCreateTests, [workflowState]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    if (!state.testsPassed && !state.testsSkipped) {
+      const resp = await executeStep("run_tests", handleRunTests, [
+        { passed: testsPassed, testCommand: args.testCommand, details: testDetails },
+        workflowState,
+      ]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    if (!state.documentationCreated) {
+      const resp = await executeStep("create_documentation", handleCreateDocumentation, [
+        { documentationType: args.documentationType, summary: args.documentationSummary },
+        workflowState,
+      ]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    if (!state.readyCheckCompleted) {
+      const resp = await executeStep("check_ready_to_commit", handleReadyCheck, [workflowState]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    if (!state.commitAndPushCompleted) {
+      const resp = await executeStep("commit_and_push", handleCommitAndPush, [
+        {
+          commitMessage: args.commitMessage,
+          branch: typeof args.branch === "string" ? args.branch : "",
+        },
+        { workflowState, exec, git, utils },
+      ]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    if (!state.released) {
+      const resp = await executeStep("perform_release", handlePerformRelease, [
+        releaseArgs,
+        { workflowState, exec, git, utils },
+      ]);
+      if (isErrorResponse(resp)) return resp;
+      continue;
+    }
+
+    const completeResponse = await handleCompleteTask({ commitMessage: args.commitMessage }, workflowState);
+    if (isErrorResponse(completeResponse)) {
+      return completeResponse;
+    }
+    steps.push(summarizeResponse("complete_task", completeResponse));
+    break;
+  }
+
+  const summary = steps.map((line, index) => `${index + 1}. ${line}`).join("\n");
+  const celebration = workflowState.state.history?.length
+    ? "🎉 Cheers! We solved another issue and captured it in the knowledge base."
+    : "";
+  const message = [`✅ Full workflow completed successfully!`, celebration, summary].filter(Boolean).join("\n\n");
+  return textResponse(message);
+}
+
 export async function handleToolCall({
   request,
   normalizeRequestArgs,
@@ -741,8 +984,18 @@ export async function handleToolCall({
         return handleGetWorkflowStatus(workflowState);
       case "view_history":
         return handleViewHistory(args, workflowState);
+      case "project_summary":
+        return handleProjectSummary(workflowState);
+      case "project_summary_data":
+        return handleProjectSummaryData(workflowState);
+      case "project_summary_db":
+        return handleProjectSummaryDb(workflowState);
       case "continue_workflow":
         return handleContinueWorkflow(workflowState, { workflowState, exec, git, utils });
+      case "rerun_workflow":
+        return handleRerunWorkflow(workflowState);
+      case "run_full_workflow":
+        return handleRunFullWorkflow(args, { workflowState, exec, git, utils });
       default:
         throw new Error(`Unknown tool: ${name}`);
     }

package/vite.config.js

@@ -0,0 +1,43 @@
+import { defineConfig } from 'vite';
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+  build: {
+    target: 'node18',
+    outDir: 'dist',
+    minify: false,
+    rollupOptions: {
+      input: path.resolve(__dirname, 'index.js'),
+      output: {
+        entryFileNames: 'index.mjs',
+        format: 'es',
+      },
+      external: [
+        '@modelcontextprotocol/sdk',
+        // Node.js built-in modules
+        'node:fs',
+        'node:path',
+        'node:url',
+        'node:util',
+        'node:os',
+        'node:process',
+        'node:child_process',
+        'fs',
+        'fs/promises',
+        'path',
+        'url',
+        'util',
+        'os',
+        'process',
+        'child_process',
+      ],
+    },
+  },
+  define: {
+    __filename: JSON.stringify(path.resolve(__dirname, 'index.js')),
+  },
+});

package/web/index.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dev Workflow Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+</head>
+<body class="bg-gray-50 text-gray-900">
+  <div class="container mx-auto p-4 max-w-4xl">
+    <header class="mb-6">
+      <h1 class="text-3xl font-bold flex items-center gap-2">
+        <i data-lucide="activity"></i>
+        Dev Workflow Dashboard
+      </h1>
+      <p class="text-gray-600">Project history and summary from SQLite</p>
+    </header>
+
+    <section class="mb-8">
+      <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+          <i data-lucide="user"></i>
+          Filters
+        </h2>
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium text-gray-600">User ID</span>
+            <input id="userId" type="text" placeholder="default" class="border rounded px-3 py-2" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium text-gray-600">Start date</span>
+            <input id="startDate" type="date" class="border rounded px-3 py-2" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium text-gray-600">End date</span>
+            <input id="endDate" type="date" class="border rounded px-3 py-2" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium text-gray-600">Activity frequency</span>
+            <select id="frequency" class="border rounded px-3 py-2">
+              <option value="daily">Daily</option>
+              <option value="monthly">Monthly</option>
+              <option value="yearly">Yearly</option>
+            </select>
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium text-gray-600">Page size</span>
+            <select id="pageSize" class="border rounded px-3 py-2">
+              <option value="10">10</option>
+              <option value="20" selected>20</option>
+              <option value="50">50</option>
+            </select>
+          </label>
+        </div>
+        <div class="flex flex-wrap gap-3 items-center mt-4">
+          <button id="applyFiltersBtn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Apply filters</button>
+          <button id="resetFiltersBtn" class="bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300">Reset</button>
+          <span class="text-sm text-gray-500">Leave fields empty to view all data for the default user.</span>
+        </div>
+      </div>
+    </section>
+
+    <section id="summarySection" class="mb-8 hidden">
+      <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+          <i data-lucide="bar-chart-2"></i>
+          Project Summary
+        </h2>
+        <div id="summaryContent" class="space-y-2"></div>
+        <div id="historySummaryCard" class="mt-6 bg-gray-50 border border-gray-200 rounded-md p-4 hidden">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="font-medium text-gray-700" id="historySummaryHeading">Activity by period</h3>
+            <span class="text-xs uppercase tracking-wide text-gray-500" id="historySummaryMeta"></span>
+          </div>
+          <div id="historySummaryContent" class="space-y-1 text-sm text-gray-700"></div>
+        </div>
+      </div>
+    </section>
+
+    <section id="historySection" class="hidden">
+      <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+          <i data-lucide="clock"></i>
+          Recent History
+        </h2>
+        <div id="historyContent" class="space-y-3"></div>
+        <div id="paginationControls" class="flex items-center justify-between mt-6 hidden">
+          <button id="prevPageBtn" class="bg-gray-200 text-gray-800 px-3 py-1 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed">Previous</button>
+          <span id="pageInfo" class="text-sm text-gray-600"></span>
+          <button id="nextPageBtn" class="bg-gray-200 text-gray-800 px-3 py-1 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed">Next</button>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script type="module">
+    function el(id) { return document.getElementById(id); }
+
+    const frequencyLabels = {
+      daily: "Daily",
+      monthly: "Monthly",
+      yearly: "Yearly",
+    };
+
+    const state = {
+      userId: "",
+      startDate: "",
+      endDate: "",
+      frequency: "daily",
+      page: 1,
+      pageSize: 20,
+      totalPages: 1,
+    };
+
+    const controls = {
+      userId: el("userId"),
+      startDate: el("startDate"),
+      endDate: el("endDate"),
+      frequency: el("frequency"),
+      pageSize: el("pageSize"),
+      applyFilters: el("applyFiltersBtn"),
+      resetFilters: el("resetFiltersBtn"),
+      prevPage: el("prevPageBtn"),
+      nextPage: el("nextPageBtn"),
+      pageInfo: el("pageInfo"),
+      pagination: el("paginationControls"),
+      historySummaryCard: el("historySummaryCard"),
+      historySummaryContent: el("historySummaryContent"),
+      historySummaryMeta: el("historySummaryMeta"),
+    };
+
+    function formatSummary(data) {
+      if (!data) return '<p class="text-gray-500">No summary available.</p>';
+      const taskTypes = Object.entries(data.taskTypes || {}).map(([t, c]) => `${t}: ${c}`).join(', ');
+      const recent = (data.recentTasks || []).map(t => `<li>${t.description} (${t.type})</li>`).join('');
+      return `
+        <div><strong>Total tasks:</strong> ${data.totalTasks}</div>
+        <div><strong>Task mix:</strong> ${taskTypes || '—'}</div>
+        <div><strong>Last active:</strong> ${data.lastActive ? new Date(data.lastActive).toLocaleDateString() : 'Never'}</div>
+        <div><strong>Updated:</strong> ${data.updatedAt ? new Date(data.updatedAt).toLocaleString() : '—'}</div>
+        <div class="mt-4"><strong>Recent tasks:</strong><ul class="list-disc list-inside">${recent || '<li>No recent tasks</li>'}</ul></div>
+      `;
+    }
+
+    function formatHistory(rows) {
+      if (!rows || rows.length === 0) return '<p class="text-gray-500">No history yet.</p>';
+      return rows.map(row => `
+        <div class="border-b pb-2">
+          <div class="flex justify-between items-start">
+            <div>
+              <div class="font-medium">${row.task_description}</div>
+              <div class="text-sm text-gray-600">${row.task_type} • ${new Date(row.timestamp).toLocaleString()}</div>
+              <div class="text-sm text-gray-500">Commit: ${row.commit_message || '(none)'}</div>
+            </div>
+            ${row.forced ? '<span class="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">Forced</span>' : ''}
+            ${row.dropped ? '<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Dropped</span>' : ''}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function formatHistorySummary(series) {
+      if (!series || series.length === 0) {
+        return '<p class="text-gray-500">No activity for the selected range.</p>';
+      }
+      return series.map(item => `
+        <div class="flex justify-between">
+          <span>${item.period}</span>
+          <span class="font-medium">${item.count}</span>
+        </div>
+      `).join('');
+    }
+
+    async function fetchJson(path, params = {}) {
+      const url = new URL(path, window.location.origin);
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          url.searchParams.set(key, value);
+        }
+      });
+      const res = await fetch(url.toString());
+      if (!res.ok) {
+        throw new Error(`Request failed: ${res.status}`);
+      }
+      return res.json();
+    }
+
+    function collectFilters() {
+      state.userId = controls.userId.value.trim();
+      state.startDate = controls.startDate.value;
+      state.endDate = controls.endDate.value;
+      state.frequency = controls.frequency.value;
+      state.pageSize = Number(controls.pageSize.value) || 20;
+    }
+
+    function resetFilters() {
+      controls.userId.value = "";
+      controls.startDate.value = "";
+      controls.endDate.value = "";
+      controls.frequency.value = "daily";
+      controls.pageSize.value = "20";
+      state.userId = "";
+      state.startDate = "";
+      state.endDate = "";
+      state.frequency = "daily";
+      state.page = 1;
+      state.pageSize = 20;
+      load();
+    }
+
+    function updatePagination(total, page, pageSize) {
+      const totalPages = Math.max(1, Math.ceil(total / pageSize));
+      state.totalPages = totalPages;
+      controls.pageInfo.textContent = `Page ${page} of ${totalPages} (${total} entries)`;
+      controls.prevPage.disabled = page <= 1;
+      controls.nextPage.disabled = page >= totalPages;
+      controls.pagination.classList.toggle("hidden", total === 0);
+    }
+
+    function updateHistorySummary(series) {
+      if (!series || series.length === 0) {
+        controls.historySummaryCard.classList.add("hidden");
+        controls.historySummaryContent.innerHTML = "";
+        return;
+      }
+      controls.historySummaryContent.innerHTML = formatHistorySummary(series);
+      const freqLabel = frequencyLabels[state.frequency] || "Daily";
+      const rangeParts = [];
+      if (state.startDate) rangeParts.push(`from ${state.startDate}`);
+      if (state.endDate) rangeParts.push(`to ${state.endDate}`);
+      controls.historySummaryMeta.textContent = `${freqLabel}${rangeParts.length ? ` • ${rangeParts.join(" ")}` : ""}`;
+      controls.historySummaryCard.classList.remove("hidden");
+    }
+
+    async function load() {
+      const userId = state.userId || "default";
+      try {
+        const historyParams = {
+          user: userId,
+          page: state.page,
+          pageSize: state.pageSize,
+          startDate: state.startDate,
+          endDate: state.endDate,
+        };
+        const summaryParams = {
+          user: userId,
+          startDate: state.startDate,
+          endDate: state.endDate,
+          frequency: state.frequency,
+        };
+        const [{ summary }, historyData, { summary: historySummary }] = await Promise.all([
+          fetchJson('/api/summary', { user: userId }),
+          fetchJson('/api/history', historyParams),
+          fetchJson('/api/history-summary', summaryParams),
+        ]);
+
+        el('summaryContent').innerHTML = formatSummary(summary);
+        el('historyContent').innerHTML = formatHistory(historyData.entries);
+        updatePagination(historyData.total, historyData.page, historyData.pageSize);
+        updateHistorySummary(historySummary);
+
+        el('summarySection').classList.remove('hidden');
+        el('historySection').classList.remove('hidden');
+      } catch (error) {
+        el('summaryContent').innerHTML = `<p class="text-red-500">Failed to load summary: ${error.message}</p>`;
+        el('historyContent').innerHTML = '<p class="text-gray-500">History unavailable.</p>';
+        controls.pagination.classList.add("hidden");
+        controls.historySummaryCard.classList.add("hidden");
+        el('summarySection').classList.remove('hidden');
+        el('historySection').classList.remove('hidden');
+      }
+    }
+
+    controls.applyFilters.addEventListener('click', () => {
+      collectFilters();
+      state.page = 1;
+      load();
+    });
+    controls.resetFilters.addEventListener('click', resetFilters);
+    controls.userId.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        collectFilters();
+        state.page = 1;
+        load();
+      }
+    });
+    controls.prevPage.addEventListener('click', () => {
+      if (state.page > 1) {
+        state.page -= 1;
+        load();
+      }
+    });
+    controls.nextPage.addEventListener('click', () => {
+      if (state.page < state.totalPages) {
+        state.page += 1;
+        load();
+      }
+    });
+
+    // Initialize Lucide icons and initial load
+    lucide.createIcons();
+    collectFilters();
+    load();
+  </script>
+</body>
+</html>