Phase 4: task-to-goal integration (Vision side)

Build the boundary the ImpactFlow core time-tracker plugs into. A task maps to a foundation — one of the six stable profile elements (love, strength, mission, vocation, short_term, long_term) — so the tracker can ask "which goal does this build toward?" and post the answer back to Vision. - Models + migration 006: task_mapping (one row per logged time entry). - app/services/foundations.py: the six foundations + a pure, testable work-pattern aggregator (rollup) and a plain-language summary. - app/routers/integration.py (user-scoped; tracker calls as the user or via X-API-Key): GET /foundations, POST/GET /task-mappings, GET /work-patterns?days=N (per-foundation minutes/share/neglected). - Reminder engine now pulls from real work patterns: CheckinCoach takes an optional work-pattern summary (last 14 days) and reflects where time has gone against the person's own words — an observation, never a verdict. - Frontend: dashboard.html (time per foundation + neglected); linked from profile.html. Documented the core-tracker integration contract in the README. Phase 4 completes the Vision module's roadmap on the Discovery side; the core tracker integrates by calling these endpoints. Tests: 86 passing (added pure-aggregator, integration-endpoint, and work-pattern-into-check-in tests; run in-container). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 07:10:37 +00:00 · 2026-06-16 21:24:58 -05:00
parent 50453901b3
commit c4fc1cccd7
16 changed files with 857 additions and 5 deletions
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ImpactFlow — Goal Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap"
+    rel="stylesheet"
+  />
+  <link rel="stylesheet" href="/static/style.css" />
+  <script src="/static/auth.js"></script>
+</head>
+<body>
+  <div class="wrap">
+    <div class="brand">ImpactFlow · Where Your Time Goes</div>
+    <div class="nav" style="justify-content:flex-end;gap:8px">
+      <label for="days" style="font-size:.9rem;color:var(--navy-soft)">Window</label>
+      <select id="days" class="pref-select" style="width:auto">
+        <option value="7">7 days</option>
+        <option value="30" selected>30 days</option>
+        <option value="90">90 days</option>
+      </select>
+    </div>
+    <div id="content"><p>Loading…</p></div>
+    <p class="back-link"><a href="/static/profile.html">← Back to your profile</a></p>
+  </div>
+
+  <script>
+    const content = document.getElementById("content");
+
+    function escapeHtml(s) {
+      if (s == null) return "";
+      return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+
+    function fmt(mins) {
+      const h = Math.floor(mins / 60);
+      const m = mins % 60;
+      if (h && m) return `${h}h ${m}m`;
+      if (h) return `${h}h`;
+      return `${m}m`;
+    }
+
+    function render(data) {
+      if (data.total_minutes === 0) {
+        content.innerHTML = `<div class="triad-block"><p>No work has been
+          logged toward your foundations yet. As you log time in ImpactFlow and
+          tag which goal each task builds toward, it will show up here.</p></div>`;
+        return;
+      }
+      const max = Math.max(...data.by_foundation.map((f) => f.minutes), 1);
+      const bars = data.by_foundation
+        .map((f) => {
+          const pct = Math.round((f.minutes / max) * 100);
+          const share = Math.round(f.share * 100);
+          return `
+            <div class="bar-row">
+              <div class="bar-label">${escapeHtml(f.label)}</div>
+              <div class="bar-track">
+                <div class="bar-fill" style="width:${pct}%"></div>
+              </div>
+              <div class="bar-val">${f.minutes ? fmt(f.minutes) : "—"}${
+            f.minutes ? ` · ${share}%` : ""
+          }</div>
+            </div>`;
+        })
+        .join("");
+      const neglected = data.neglected.length
+        ? `<p class="edit-help">No time logged toward:
+            ${data.neglected.map((n) => escapeHtml(labelFor(n, data))).join(", ")}.
+            Does that match where you want your energy to go?</p>`
+        : "";
+      content.innerHTML = `
+        <p class="section-label">Time toward each foundation · last ${data.window_days} days</p>
+        <div class="bars">${bars}</div>
+        ${neglected}`;
+    }
+
+    function labelFor(key, data) {
+      const f = data.by_foundation.find((x) => x.foundation === key);
+      return f ? f.label : key;
+    }
+
+    async function load() {
+      const days = document.getElementById("days").value;
+      content.innerHTML = "<p>Loading…</p>";
+      try {
+        const res = await authedFetch(
+          `/discovery/integration/work-patterns?days=${days}`
+        );
+        if (!res.ok) {
+          const d = await res.json().catch(() => ({ detail: "Failed" }));
+          throw new Error(d.detail || "Failed");
+        }
+        render(await res.json());
+      } catch (e) {
+        content.innerHTML = `<div class="error-box">${escapeHtml(e.message)}</div>`;
+      }
+    }
+
+    document.getElementById("days").addEventListener("change", load);
+    load();
+  </script>
+</body>
+</html>
@@ -145,6 +145,9 @@
      const coachingLink =
        `<p class="back-link" style="text-align:center;margin-top:10px">
           <a href="/static/coaching.html">Coaching preferences & check-ins →</a>
+         </p>
+         <p class="back-link" style="text-align:center;margin-top:10px">
+           <a href="/static/dashboard.html">Where your time goes →</a>
         </p>`;

      content.innerHTML = `
@@ -398,6 +398,51 @@ textarea.edit {
  }
 }

+.bars {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 22px;
+}
+
+.bar-row {
+  display: grid;
+  grid-template-columns: 180px 1fr 110px;
+  align-items: center;
+  gap: 12px;
+}
+
+.bar-label {
+  font-size: 0.95rem;
+  color: var(--navy);
+}
+
+.bar-track {
+  background: rgba(13, 27, 42, 0.08);
+  border-radius: 8px;
+  height: 18px;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  background: var(--gold);
+  border-radius: 8px;
+  min-width: 2px;
+}
+
+.bar-val {
+  text-align: right;
+  font-size: 0.9rem;
+  color: var(--navy-soft);
+}
+
+@media (max-width: 560px) {
+  .bar-row {
+    grid-template-columns: 120px 1fr 80px;
+  }
+}
+
 .back-link {
  margin-top: 8px;
 }