From b5eec3eea9233602c2260400b531bb2aec3721f2 Mon Sep 17 00:00:00 2001
From: DIodide <ibraheem.amin3@gmail.com>
Date: Sat, 22 Aug 2026 15:58:53 -0400
Subject: [PATCH] Reconcile connections per message; surface OAuth callback
 errors; style CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Open chats deduped setup() by settings hash, so a Google Calendar
consent finished on My apps never reached them — the model kept saying
no calendar tool existed. Every send now forces a reconcile (no-op for
already-connected apps, picks up newly tokened ones).

A failed OAuth callback redirected to /apps?error=... which nothing
displayed; My apps now shows the error on a sticky note with recovery
guidance. The "Connect with Google" link becomes a proper button
instead of a bare blue underline.

Claude-Session: https://claude.ai/code/session_01MKLJUWk6biNAKXupHTTWn5
---
 app/src/client/pages/AppsPage.tsx | 17 +++++++++++++++--
 app/src/client/pages/ChatPage.tsx |  8 +++++---
 app/src/client/styles.css         | 17 +++++++++++++++++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/src/client/pages/AppsPage.tsx b/app/src/client/pages/AppsPage.tsx
index 4892b7f..e7e7ff5 100644
--- a/app/src/client/pages/AppsPage.tsx
+++ b/app/src/client/pages/AppsPage.tsx
@@ -18,6 +18,11 @@ export function AppsPage({
 }) {
   const desk = useDesk(settings);
   const [saving, setSaving] = useState(false);
+  const [callbackError] = useState(() => {
+    const err = new URLSearchParams(location.search).get("error");
+    if (err) history.replaceState(null, "", "/apps");
+    return err;
+  });
 
   // Reconcile connections on arrival so statuses and any pending Google
   // consent link are current, not left over from the last visit.
@@ -76,6 +81,14 @@ export function AppsPage({
           <span className="hand">read and act on</span> — flip them anytime.
         </p>
 
+        {callbackError && (
+          <div className="conflict-note" style={{ marginBottom: 18 }}>
+            <span className="lead">that didn't finish — </span>
+            connecting Google Calendar failed: {callbackError}. Toggle it off
+            and on to get a fresh link, then try again.
+          </div>
+        )}
+
         <div className="paper-card">
           <h3>Signed in</h3>
           <div className="field-row">
@@ -121,10 +134,10 @@ export function AppsPage({
                   <span className={status.cls}>{status.text}</span>
                   {on && desk.deskState?.authUrls?.[app.key] && (
                     <a
-                      className="cta"
+                      className="connect-btn"
                       href={desk.deskState.authUrls[app.key]}
                     >
-                      Connect with Google →
+                      Connect with Google
                     </a>
                   )}
                   <button
diff --git a/app/src/client/pages/ChatPage.tsx b/app/src/client/pages/ChatPage.tsx
index b4dcc40..9dd5155 100644
--- a/app/src/client/pages/ChatPage.tsx
+++ b/app/src/client/pages/ChatPage.tsx
@@ -81,8 +81,8 @@ export function ChatPage({
     }
   });
 
-  async function ensureSetup() {
-    if (appliedRef.current === settingsHash) return;
+  async function ensureSetup(force = false) {
+    if (!force && appliedRef.current === settingsHash) return;
     appliedRef.current = settingsHash;
     try {
       await agent.ready;
@@ -112,7 +112,9 @@ export function ChatPage({
       title: firstTitle(messages) ?? text.slice(0, 48),
       at: Date.now(),
     });
-    await ensureSetup();
+    // Force a reconcile so connections made since the last message (like a
+    // Google Calendar consent finished on My apps) are live for this turn.
+    await ensureSetup(true);
     void sendMessage({ text });
   }
 
diff --git a/app/src/client/styles.css b/app/src/client/styles.css
index ec9b195..f216c3f 100644
--- a/app/src/client/styles.css
+++ b/app/src/client/styles.css
@@ -1036,9 +1036,26 @@ textarea {
 .app-card .foot {
   display: flex;
   align-items: center;
+  gap: 10px;
   justify-content: space-between;
   padding-top: 4px;
 }
+.app-card .connect-btn {
+  margin-left: auto;
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: var(--ink);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.app-card .connect-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-card);
+}
 .app-card .status {
   font-size: 12px;
   color: var(--ink-faint);