Complete Phase 1: goals, cookie auth, profile editing

Close the remaining Phase 1 DoD gaps and reconcile the browser flow with
the auth layer.

Goals (5 -> 7 prompts):
- Add near-term (6-12mo) and long-term (3-5yr) goal prompts; collect raw
  text on the conversation and store AI-articulated goal summaries on the
  profile. Extractor articulates the person's own stated goals (mirror,
  not compass) and never fabricates. Alembic 003 adds the four columns.

Cookie-based browser sessions (fixes frontend<->auth desync):
- OAuth callback now sets httpOnly session cookies and redirects into the
  app instead of returning JSON. get_current_user gains a cookie fallback
  (X-API-Key -> Bearer -> cookie). refresh/logout read the refresh cookie
  and set/clear cookies. New shared auth.js (authedFetch) sends cookies and
  silently refreshes on 401. Static pages drop the bogus user_id and call
  the correct /me endpoints.

Profile editing (read/edit/affirm):
- PATCH /discovery/profile/me edits the prose (Ikigai summaries, overlap
  narrative, goals); owner-scoped, partial update, 409 when locked. Edit
  mode in profile.html with Save/Cancel.

Also: bump default model to claude-sonnet-4-6, align ports to 8011
(OAuth redirect, CORS), add COOKIE_SECURE/POST_LOGIN_REDIRECT config, and
refresh the README to match the shipped behavior.

Tests: 33 passing (added cookie-auth, profile-edit, goal-extraction cases;
factored a shared app_client fixture into conftest.py).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Joel Salmon
2026-06-15 18:26:08 -05:00
parent b8f176bb31
commit 33674f92f4
22 changed files with 958 additions and 244 deletions
+33
View File
@@ -0,0 +1,33 @@
// Shared client-side auth helpers.
//
// The session lives entirely in httpOnly cookies that the server sets at
// /api/auth/callback, so there are no tokens for the page to store or read.
// We just send the cookies with every request and recover from access-token
// expiry by silently refreshing once before giving up and sending the user
// back through Google.
function redirectToLogin() {
window.location.href = "/api/auth/login";
}
// fetch() wrapper that always sends the session cookies. On a 401 it attempts
// a single silent refresh (the refresh cookie is scoped to /api/auth) and
// retries the original request; if that still fails, it bounces to login.
async function authedFetch(url, options = {}) {
const opts = { credentials: "include", ...options };
let res = await fetch(url, opts);
if (res.status !== 401) return res;
const refreshed = await fetch("/api/auth/refresh", {
method: "POST",
credentials: "include",
});
if (refreshed.ok) {
res = await fetch(url, opts);
if (res.status !== 401) return res;
}
redirectToLogin();
throw new Error("Not authenticated");
}
+19 -46
View File
@@ -11,6 +11,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="/static/style.css" />
<script src="/static/auth.js"></script>
</head>
<body>
<!-- Question flow -->
@@ -67,44 +68,22 @@
text:
"If you knew you couldn't fail and money wasn't a factor, what would you spend the next five years building or doing?",
},
{
key: "prompt_goals_short",
title: "The Near Horizon",
text:
"Looking at the next 6 to 12 months, what do you most want to make progress on or accomplish? Say it in your own words.",
},
{
key: "prompt_goals_long",
title: "The Long Horizon",
text:
"Now stretch out 3 to 5 years. What do you want to have built, become, or changed by then?",
},
];
function createUserId() {
const webCrypto = globalThis.crypto;
if (webCrypto && typeof webCrypto.randomUUID === "function") {
return webCrypto.randomUUID();
}
if (webCrypto && typeof webCrypto.getRandomValues === "function") {
const bytes = new Uint8Array(16);
webCrypto.getRandomValues(bytes);
bytes[6] = (bytes[6] & 0x0f) | 0x40;
bytes[8] = (bytes[8] & 0x3f) | 0x80;
const hex = Array.from(bytes, (b) =>
b.toString(16).padStart(2, "0")
).join("");
return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(
12,
16
)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
}
return `local-${Date.now()}-${Math.random()
.toString(16)
.slice(2)}`;
}
// Persistent per-browser user id.
function getUserId() {
let id = localStorage.getItem("impactflow_user_id");
if (!id) {
id = createUserId();
localStorage.setItem("impactflow_user_id", id);
}
return id;
}
const userId = getUserId();
// The signed-in user is resolved server-side from the session cookie, so
// the page no longer mints or tracks a user id of its own.
const answers = new Array(PROMPTS.length).fill("");
let index = 0;
let conversationId = null;
@@ -155,11 +134,7 @@
});
async function startConversation() {
const res = await fetch("/discovery/start", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ user_id: userId }),
});
const res = await authedFetch("/discovery/start", { method: "POST" });
if (!res.ok) throw new Error("Could not start conversation");
const data = await res.json();
conversationId = data.conversation_id;
@@ -177,7 +152,7 @@
body[p.key] = answers[i];
});
const respondRes = await fetch(
const respondRes = await authedFetch(
`/discovery/${conversationId}/respond`,
{
method: "PUT",
@@ -187,7 +162,7 @@
);
if (!respondRes.ok) throw new Error("Could not save responses");
const completeRes = await fetch(
const completeRes = await authedFetch(
`/discovery/${conversationId}/complete`,
{ method: "POST" }
);
@@ -198,9 +173,7 @@
throw new Error(detail.detail || "Extraction failed");
}
window.location.href = `/static/profile.html?user_id=${encodeURIComponent(
userId
)}`;
window.location.href = "/static/profile.html";
} catch (err) {
el.loading.classList.remove("active");
el.flow.style.display = "block";
+156 -44
View File
@@ -11,6 +11,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="/static/style.css" />
<script src="/static/auth.js"></script>
</head>
<body>
<div class="wrap">
@@ -48,10 +49,6 @@
{ key: "vocation_summary", title: "What you can be paid for", icon: "$" },
];
function getParam(name) {
return new URLSearchParams(window.location.search).get(name);
}
function confClass(level) {
if (level === "high") return "high";
if (level === "medium") return "medium";
@@ -72,43 +69,76 @@
.replace(/>/g, "&gt;");
}
// The editable prose. Order/labels mirror the read view. The AI's
// structural read (triad/type/wing/variant) is shown but not edited here.
const GOAL_FIELDS = [
{ key: "short_term_goals", title: "Next 612 months" },
{ key: "long_term_goals", title: "Next 35 years" },
];
const content = document.getElementById("content");
let currentProfile = null;
async function load() {
const userId = getParam("user_id");
const content = document.getElementById("content");
if (!userId) {
content.innerHTML =
'<div class="error-box">No user id provided.</div>';
return;
}
let profile;
try {
const res = await fetch(
`/discovery/profile/${encodeURIComponent(userId)}`
);
const res = await authedFetch("/discovery/profile/me");
if (!res.ok) throw new Error("Profile not found");
profile = await res.json();
currentProfile = await res.json();
} catch (err) {
content.innerHTML = `<div class="error-box">Could not load your profile: ${escapeHtml(
err.message
)}</div>`;
return;
}
renderRead();
}
function renderRead() {
const profile = currentProfile;
const conf = profile.confidence || {};
const triad = TRIAD_INFO[profile.triad] || TRIAD_INFO.gut;
const ikigaiCards = IKIGAI.map((item) => {
return `
const ikigaiCards = IKIGAI.map(
(item) => `
<div class="card">
<h3>${dot(conf.ikigai)} ${item.icon} ${item.title}</h3>
<p>${escapeHtml(profile[item.key]) || "—"}</p>
</div>`;
}).join("");
</div>`
).join("");
const locked = profile.locked;
// Goals are the person's own articulated direction. Only show the
// section if at least one horizon has content.
const goals = GOAL_FIELDS.filter(
(g) => profile[g.key] && profile[g.key].trim()
);
const goalsBlock = goals.length
? `
<p class="section-label">Where you're headed</p>
<div class="ikigai-grid">${goals
.map(
(g) => `
<div class="card">
<h3>→ ${g.title}</h3>
<p>${escapeHtml(profile[g.key])}</p>
</div>`
)
.join("")}</div>
`
: "";
// Unlocked profiles can be edited and then affirmed; locked profiles are
// final and show neither control as actionable.
const actions = locked
? `<div class="confirm-row">
<button class="btn-primary confirmed" disabled>Profile confirmed ✓</button>
</div>`
: `<div class="nav">
<button class="btn-ghost" id="editBtn">Edit my words</button>
<button class="btn-primary" id="confirmBtn">This is me</button>
</div>`;
content.innerHTML = `
<div class="profile-narrative">${escapeHtml(
profile.overlap_narrative
@@ -122,32 +152,114 @@
<p>${triad.text}</p>
</div>
<div class="confirm-row">
<button class="btn-primary ${locked ? "confirmed" : ""}" id="confirmBtn" ${
locked ? "disabled" : ""
}>
${locked ? "Profile confirmed ✓" : "This is me"}
</button>
${goalsBlock}
${actions}
`;
if (locked) return;
document
.getElementById("editBtn")
.addEventListener("click", renderEdit);
const btn = document.getElementById("confirmBtn");
btn.addEventListener("click", async () => {
btn.disabled = true;
try {
const res = await authedFetch("/discovery/profile/me/confirm", {
method: "PUT",
});
if (!res.ok) throw new Error("confirm failed");
currentProfile.locked = true;
renderRead();
} catch (err) {
btn.disabled = false;
btn.textContent = "Try again";
}
});
}
function editField(key, label, value) {
return `
<div class="edit-field">
<label for="edit_${key}">${label}</label>
<textarea class="edit" id="edit_${key}">${escapeHtml(
value
)}</textarea>
</div>`;
}
function renderEdit() {
const profile = currentProfile;
const ikigaiFields = IKIGAI.map((item) =>
editField(item.key, `${item.icon} ${item.title}`, profile[item.key])
).join("");
const goalFields = GOAL_FIELDS.map((g) =>
editField(g.key, `${g.title}`, profile[g.key])
).join("");
content.innerHTML = `
<p class="section-label">Edit your words</p>
<p class="edit-help">These are your words to own. Revise anything that
doesn't sound like you, then save.</p>
${editField(
"overlap_narrative",
"Where it all comes together",
profile.overlap_narrative
)}
<div class="ikigai-grid">${ikigaiFields}</div>
<div class="ikigai-grid">${goalFields}</div>
<div id="editError"></div>
<div class="nav">
<button class="btn-ghost" id="cancelBtn">Cancel</button>
<button class="btn-primary" id="saveBtn">Save changes</button>
</div>
`;
const btn = document.getElementById("confirmBtn");
if (btn && !locked) {
btn.addEventListener("click", async () => {
btn.disabled = true;
try {
const res = await fetch(
`/discovery/profile/${encodeURIComponent(userId)}/confirm`,
{ method: "PUT" }
);
if (!res.ok) throw new Error("confirm failed");
btn.textContent = "Profile confirmed ✓";
btn.classList.add("confirmed");
} catch (err) {
btn.disabled = false;
btn.textContent = "Try again";
}
document.getElementById("cancelBtn").addEventListener("click", renderRead);
document.getElementById("saveBtn").addEventListener("click", saveEdits);
}
const EDITABLE_KEYS = [
"overlap_narrative",
...IKIGAI.map((i) => i.key),
...GOAL_FIELDS.map((g) => g.key),
];
async function saveEdits() {
const saveBtn = document.getElementById("saveBtn");
saveBtn.disabled = true;
const payload = {};
EDITABLE_KEYS.forEach((key) => {
payload[key] = document.getElementById(`edit_${key}`).value;
});
try {
const res = await authedFetch("/discovery/profile/me", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
if (!res.ok) {
const detail = await res
.json()
.catch(() => ({ detail: "Could not save changes" }));
throw new Error(detail.detail || "Could not save changes");
}
currentProfile = await res.json();
renderRead();
} catch (err) {
saveBtn.disabled = false;
document.getElementById(
"editError"
).innerHTML = `<div class="error-box">${escapeHtml(
err.message
)}</div>`;
}
}
+25
View File
@@ -277,6 +277,31 @@ button:disabled {
cursor: default;
}
/* ---------- Profile edit mode ---------- */
.edit-help {
color: var(--navy-soft);
margin: 0 0 24px;
}
.edit-field {
margin-bottom: 18px;
}
.edit-field label {
display: block;
font-weight: 600;
font-size: 0.95rem;
color: var(--navy);
margin-bottom: 8px;
}
textarea.edit {
min-height: 120px;
padding: 14px 16px;
font-size: 0.98rem;
}
.error-box {
background: #fdecea;
border: 1px solid var(--red);