fix: re-authorize button actually visible on configured services (#329)

src/routes/ui/service-detail.js

@@ -60,6 +60,17 @@ router.get('/:id', (req, res) => {
   const displayName = serviceModule?.displayName || serviceInfo?.name || account.service;
   const icon = getServiceIcon(account.service);
 
+  // OAuth re-auth route (null for non-OAuth services)
+  const oauthRetryRoutes = {
+    youtube: '/ui/youtube/retry',
+    google_calendar: '/ui/google/retry',
+    fitbit: '/ui/fitbit/retry',
+    linkedin: '/ui/linkedin/retry',
+    reddit: '/ui/reddit/retry',
+    mastodon: '/ui/mastodon/retry'
+  };
+  const retryRoute = oauthRetryRoutes[account.service] || null;
+
   // Build credential fields
   const creds = account.credentials || {};
   const credFields = Object.keys(creds).map(key => {
@@ -79,6 +90,7 @@ router.get('/:id', (req, res) => {
     displayName,
     icon,
     credFields,
+    retryRoute,
     escapeHtml,
     renderAvatar
   });

src/routes/ui/services.js

@@ -175,12 +175,23 @@ export function renderConfiguredCards(accounts) {
     const displayName = svcModule?.displayName || serviceId;
     const icon = getServiceIcon(serviceId);
 
-    const accountRows = svcAccounts.map(acc => `
+    const accountRows = svcAccounts.map(acc => {
+      const retryRoute = getRetryRoute(serviceId);
+      const { hasToken, hasCredentials } = acc.status || {};
+      const reauthBtn = (retryRoute && hasCredentials) ? `
+        <form method="POST" action="${retryRoute}" style="margin:0;">
+          <input type="hidden" name="accountName" value="${escapeHtml(acc.name)}" autocomplete="off">
+          <button type="submit" class="btn-sm ${hasToken ? 'btn-secondary' : 'btn-primary'}">${hasToken ? 'Re-authorize' : 'Retry Auth'}</button>
+        </form>` : '';
+      return `
       <div class="configured-account">
         <span class="account-name">${escapeHtml(acc.name)}</span>
-        <a href="/ui/services/${acc.id}" class="btn-sm">Details</a>
-      </div>
-    `).join('');
+        <div style="display: flex; gap: 8px;">
+          ${reauthBtn}
+          <a href="/ui/services/${acc.id}" class="btn-sm">Details</a>
+        </div>
+      </div>`;
+    }).join('');
 
     return `
       <div class="card configured-service" id="service-${serviceId}">
@@ -194,6 +205,21 @@ export function renderConfiguredCards(accounts) {
   }).join('\n');
 }
 
+/**
+ * Get the OAuth retry/re-auth route for a service, or null if not an OAuth service.
+ */
+function getRetryRoute(service) {
+  const routes = {
+    youtube: '/ui/youtube/retry',
+    google_calendar: '/ui/google/retry',
+    fitbit: '/ui/fitbit/retry',
+    linkedin: '/ui/linkedin/retry',
+    reddit: '/ui/reddit/retry',
+    mastodon: '/ui/mastodon/retry'
+  };
+  return routes[service] || null;
+}
+
 function getServiceIcon(service) {
   const icons = {
     github: '/public/icons/github.svg',

views/pages/service-detail.ejs

@@ -8,6 +8,12 @@
   <div class="card">
     <h3>Credentials</h3>
     <p class="help">Stored credentials for this service instance.</p>
+    <% if (retryRoute) { %>
+      <form method="POST" action="<%= retryRoute %>" style="margin-bottom: 15px;">
+        <input type="hidden" name="accountName" value="<%- escapeHtml(account.name) %>" autocomplete="off">
+        <button type="submit" class="btn-primary">Re-authorize</button>
+      </form>
+    <% } %>
     <% if (credFields.length === 0) { %>
       <p class="help">No credentials stored.</p>
     <% } else { %>