opencode-supabase 0.0.8 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-supabase",
-  "version": "0.0.8",
+  "version": "0.1.1",
   "type": "module",
   "description": "OpenCode plugin for Supabase integration with server and TUI components",
   "license": "Apache-2.0",
@@ -26,7 +26,7 @@
     "lint": "biome check .",
     "verify:pack": "npm pack --dry-run",
     "typecheck": "bunx tsc --noEmit",
-    "test": "bun test",
+    "test": "bun test --preload @opentui/solid/preload",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "changeset publish"

package/src/server/auth.ts

@@ -12,7 +12,8 @@ import type { SupabaseLogger } from "../shared/log.ts";
 import { buildAuthorizeUrl, generatePKCE, generateState } from "../shared/oauth.ts";
 import type { FetchLike, SupabaseTokenResponse } from "../shared/types.ts";
 import { HTML_SUCCESS, htmlError } from "./auth-html.ts";
-import { writeSavedAuth } from "./store.ts";
+import { readSavedAuth, writeSavedAuth } from "./store.ts";
+import { NOT_CONNECTED_MESSAGE, disconnectSupabaseAuth, ensureSupabaseToolAuth } from "./tools.ts";
 
 const CALLBACK_PATH = "/auth/callback";
 const CALLBACK_TIMEOUT_MS = 5 * 60 * 1000;
@@ -33,9 +34,47 @@ type AuthDeps = {
   setCallbackTimeout?: typeof setTimeout;
 };
 
+type SupabaseAuthInput = Pick<PluginInput, "client" | "directory" | "serverUrl" | "worktree">;
+
+type SupabaseStatusInstructions =
+  | {
+      status: "connected";
+      checked: false;
+    }
+  | {
+      status: "disconnected";
+      checked: false;
+    }
+  | {
+      status: "refresh_required";
+      checked: true;
+    };
+
 let server: ReturnType<typeof Bun.serve> | undefined;
 let serverPort: number | undefined;
 const pendingAuths = new Map<string, PendingAuth>();
+const REFRESH_BUFFER_MS = 30_000;
+
+function isRefreshNeeded(expires: number) {
+  return expires <= Date.now() + REFRESH_BUFFER_MS;
+}
+
+function encodeStatusInstructions(status: SupabaseStatusInstructions) {
+  return JSON.stringify(status);
+}
+
+async function getStatusInstructions(input: Pick<SupabaseAuthInput, "directory" | "worktree">) {
+  const saved = await readSavedAuth(input);
+  if (!saved.auth) {
+    return encodeStatusInstructions({ status: "disconnected", checked: false });
+  }
+
+  if (!isRefreshNeeded(saved.auth.expires)) {
+    return encodeStatusInstructions({ status: "connected", checked: false });
+  }
+
+  return encodeStatusInstructions({ status: "refresh_required", checked: true });
+}
 
 function callbackUrl(port: number) {
   return `http://localhost:${port}${CALLBACK_PATH}`;
@@ -268,7 +307,7 @@ function waitForCallback(
 }
 
 export function createSupabaseAuth(
-  input: Pick<PluginInput, "directory" | "worktree">,
+  input: SupabaseAuthInput,
   options?: PluginOptions,
   deps: AuthDeps = {},
 ) {
@@ -307,6 +346,56 @@ export function createSupabaseAuth(
           };
         },
       },
+      {
+        type: "oauth" as const,
+        label: "Supabase Status",
+        async authorize(inputs?: Record<string, string>) {
+          if (inputs?.action === "disconnect") {
+            await disconnectSupabaseAuth(input, { fetch: deps.fetch });
+            return {
+              url: "https://supabase.com/",
+              instructions: encodeStatusInstructions({ status: "disconnected", checked: false }),
+              method: "auto" as const,
+              callback: async () => ({ type: "failed" as const }),
+            };
+          }
+
+          const instructions = await getStatusInstructions(input);
+          const status = JSON.parse(instructions) as SupabaseStatusInstructions;
+
+          if (status.status !== "refresh_required") {
+            return {
+              url: "https://supabase.com/",
+              instructions,
+              method: "auto" as const,
+              callback: async () => ({ type: "failed" as const }),
+            };
+          }
+
+          return {
+            url: "https://supabase.com/",
+            instructions,
+            method: "auto" as const,
+            callback: async () => {
+              try {
+                const auth = await ensureSupabaseToolAuth(input, options, deps);
+                return {
+                  type: "success" as const,
+                  access: auth.access,
+                  refresh: auth.refresh,
+                  expires: auth.expires,
+                };
+              } catch (error) {
+                const message = error instanceof Error ? error.message : String(error);
+                if (message === NOT_CONNECTED_MESSAGE) {
+                  return { type: "failed" as const };
+                }
+                throw error;
+              }
+            },
+          };
+        },
+      },
     ],
   };
 }

package/src/server/tools.ts

@@ -10,13 +10,19 @@ import {
 import { readSupabaseConfig } from "../shared/cfg.ts";
 import type { SupabaseLogger } from "../shared/log.ts";
 import type { FetchLike } from "../shared/types.ts";
-import { type SavedAuth, clearSavedAuth, readSavedAuth, writeSavedAuth } from "./store.ts";
+import { type SavedAuth, clearSavedAuth, getStoreFile, readSavedAuth, writeSavedAuth } from "./store.ts";
 
 type ToolDeps = {
   fetch?: FetchLike;
   logger?: SupabaseLogger;
 };
 
+type InFlightRefresh = {
+  promise: Promise<SavedAuth>;
+  syncedDirectories: Set<string>;
+  syncPromises: Map<string, Promise<void>>;
+};
+
 type HostAuthWriter = {
   set(input: {
     path: { id: string };
@@ -44,13 +50,35 @@ type SupabaseToolContext = Pick<
   "directory" | "worktree" | "abort" | "sessionID" | "messageID" | "agent" | "metadata" | "ask"
 >;
 
-const NOT_CONNECTED_MESSAGE = "Supabase is not connected. Run /supabase first.";
+export type SupabaseAuthStatus =
+  | {
+      status: "connected";
+      auth: SavedAuth;
+      checked: boolean;
+    }
+  | {
+      status: "disconnected";
+      checked: boolean;
+    }
+  | {
+      status: "unknown";
+      checked: true;
+      message: string;
+    };
+
+export const NOT_CONNECTED_MESSAGE = "Supabase is not connected. Run /supabase first.";
 const REFRESH_BUFFER_MS = 30_000;
+const inFlightRefreshes = new Map<string, InFlightRefresh>();
 
 function isRefreshNeeded(auth: SavedAuth) {
   return auth.expires <= Date.now() + REFRESH_BUFFER_MS;
 }
 
+function isSameAuth(left: SavedAuth | undefined, right: SavedAuth | undefined) {
+  if (!left || !right) return left === right;
+  return left.access === right.access && left.refresh === right.refresh && left.expires === right.expires;
+}
+
 function generateRandomString(length: number) {
   const bytes = crypto.getRandomValues(new Uint8Array(length));
   return btoa(String.fromCharCode(...bytes))
@@ -169,55 +197,181 @@ async function clearHostAuth(
   }
 }
 
+async function syncHostAuthForDirectory(entry: InFlightRefresh, input: SupabaseToolInput, auth: SavedAuth) {
+  if (entry.syncedDirectories.has(input.directory)) {
+    return;
+  }
+
+  const existing = entry.syncPromises.get(input.directory);
+  if (existing) {
+    await existing.catch(() => undefined);
+    return;
+  }
+
+  const syncPromise = (async () => {
+    await setHostAuth(input, auth);
+    entry.syncedDirectories.add(input.directory);
+  })().finally(() => {
+    entry.syncPromises.delete(input.directory);
+  });
+
+  entry.syncPromises.set(input.directory, syncPromise);
+  await syncPromise.catch(() => undefined);
+}
+
+export async function disconnectSupabaseAuth(
+  input: SupabaseToolInput,
+  deps: Pick<ToolDeps, "fetch"> = {},
+) {
+  const fetchImpl = deps.fetch ?? fetch;
+  await clearSavedAuth(input);
+  inFlightRefreshes.delete(getStoreFile(input));
+  try {
+    await clearHostAuth(input, fetchImpl);
+  } catch {}
+}
+
+export async function getSupabaseAuthStatus(
+  input: SupabaseToolInput,
+  options?: PluginOptions,
+  deps: ToolDeps = {},
+): Promise<SupabaseAuthStatus> {
+  const saved = await readSavedAuth(input);
+  if (!saved.auth) {
+    return { status: "disconnected", checked: false };
+  }
+
+  if (!isRefreshNeeded(saved.auth)) {
+    return { status: "connected", auth: saved.auth, checked: false };
+  }
+
+  try {
+    const auth = await ensureSupabaseToolAuth(input, options, deps);
+    return { status: "connected", auth, checked: true };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (message === NOT_CONNECTED_MESSAGE) {
+      return { status: "disconnected", checked: true };
+    }
+
+    return { status: "unknown", checked: true, message };
+  }
+}
+
 export async function ensureSupabaseToolAuth(
   input: SupabaseToolInput,
   options?: PluginOptions,
   deps: ToolDeps = {},
 ): Promise<SavedAuth> {
-  const fetchImpl = deps.fetch ?? fetch;
+  const refreshKey = getStoreFile(input);
   const saved = await readSavedAuth(input);
   if (!saved.auth) {
     throw new Error(NOT_CONNECTED_MESSAGE);
   }
 
+  const inFlight = inFlightRefreshes.get(refreshKey);
+  if (inFlight) {
+    const fetchImpl = deps.fetch ?? fetch;
+    try {
+      const auth = await inFlight.promise;
+      await syncHostAuthForDirectory(inFlight, input, auth);
+      return auth;
+    } catch (error) {
+      if ((error instanceof Error ? error.message : String(error)) === NOT_CONNECTED_MESSAGE) {
+        try {
+          await clearHostAuth(input, fetchImpl);
+        } catch {}
+      }
+      throw error;
+    }
+  }
+
   if (!isRefreshNeeded(saved.auth)) {
+    try {
+      await setHostAuth(input, saved.auth);
+    } catch {}
     return saved.auth;
   }
 
-  const config = readSupabaseConfig(options);
+  const refreshEntry: InFlightRefresh = {
+    promise: Promise.resolve({ access: "", refresh: "", expires: 0 }),
+    syncedDirectories: new Set<string>(),
+    syncPromises: new Map<string, Promise<void>>(),
+  };
+  const refreshPromise = (async () => {
+    const fetchImpl = deps.fetch ?? fetch;
+    const current = await readSavedAuth(input);
+    if (!current.auth) {
+      throw new Error(NOT_CONNECTED_MESSAGE);
+    }
 
-  try {
-    const refreshed = await refreshTokenThroughBroker(
-      { baseUrl: config.brokerBaseUrl },
-      { refresh_token: saved.auth.refresh },
-      deps.fetch,
-      deps.logger,
-    );
+    if (!isRefreshNeeded(current.auth)) {
+      return current.auth;
+    }
+
+    const config = readSupabaseConfig(options);
 
-    const nextAuth: SavedAuth = {
-      access: refreshed.access_token,
-      refresh: refreshed.refresh_token,
-      expires: Date.now() + (refreshed.expires_in ?? 3600) * 1000,
-    };
-    await writeSavedAuth(input, nextAuth);
     try {
-      await setHostAuth(input, nextAuth);
-    } catch {}
-    return nextAuth;
-  } catch (error) {
-    if (error instanceof BrokerClientError && (error.status === 401 || error.status === 400)) {
-      await clearSavedAuth(input);
-      try {
-        await clearHostAuth(input, fetchImpl);
-      } catch {}
-      throw new Error(NOT_CONNECTED_MESSAGE);
-    }
+      const refreshed = await refreshTokenThroughBroker(
+        { baseUrl: config.brokerBaseUrl },
+        { refresh_token: current.auth.refresh },
+        deps.fetch,
+        deps.logger,
+      );
+
+      const nextAuth: SavedAuth = {
+        access: refreshed.access_token,
+        refresh: refreshed.refresh_token,
+        expires: Date.now() + (refreshed.expires_in ?? 3600) * 1000,
+      };
 
-    if (error instanceof BrokerClientError) {
-      throw new Error(`Supabase auth refresh failed: ${error.message}`);
+      const latest = await readSavedAuth(input);
+      if (!latest.auth) {
+        throw new Error(NOT_CONNECTED_MESSAGE);
+      }
+
+      if (!isSameAuth(latest.auth, current.auth)) {
+        return latest.auth;
+      }
+
+      await writeSavedAuth(input, nextAuth);
+      return nextAuth;
+    } catch (error) {
+      if (error instanceof BrokerClientError && (error.status === 401 || error.status === 400)) {
+        const latest = await readSavedAuth(input);
+        if (!isSameAuth(latest.auth, current.auth)) {
+          if (latest.auth) {
+            return latest.auth;
+          }
+          throw new Error(NOT_CONNECTED_MESSAGE);
+        }
+
+        await clearSavedAuth(input);
+        try {
+          await clearHostAuth(input, fetchImpl);
+        } catch {}
+        throw new Error(NOT_CONNECTED_MESSAGE);
+      }
+
+      if (error instanceof BrokerClientError) {
+        throw new Error(`Supabase auth refresh failed: ${error.message}`);
+      }
+      throw error;
     }
-    throw error;
-  }
+  })();
+  refreshEntry.promise = refreshPromise
+    .then(async (auth) => {
+      await syncHostAuthForDirectory(refreshEntry, input, auth);
+      return auth;
+    })
+    .finally(() => {
+      if (inFlightRefreshes.get(refreshKey)?.promise === refreshEntry.promise) {
+      inFlightRefreshes.delete(refreshKey);
+      }
+    });
+
+  inFlightRefreshes.set(refreshKey, refreshEntry);
+  return refreshEntry.promise;
 }
 
 export function createSupabaseTools(

package/src/tui/commands.ts

@@ -1,6 +1,6 @@
 export function createSupabaseCommand(openDialog: () => void) {
   return {
-    title: "Connect Supabase",
+    title: "Connect to Supabase",
     value: "supabase.connect",
     slash: { name: "supabase" },
     onSelect: openDialog,

package/src/tui/dialog.tsx

@@ -1,5 +1,7 @@
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
-import { createSignal } from "solid-js";
+import { RGBA, SyntaxStyle, TextAttributes } from "@opentui/core";
+import { createSignal, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
 
 import { formatAuthError } from "../shared/auth-errors.ts";
 import type { SupabaseLogger } from "../shared/log.ts";
@@ -12,14 +14,33 @@ type SupabaseDialogProps = {
   lifecycle?: {
     closed: boolean;
     dismissed?: boolean;
+    preflightPromise?: Promise<void>;
+    onboardingPromptSent?: boolean;
+    chatSessionID?: string;
   };
 };
 
+const ONBOARDING_MESSAGE = `Supabase is connected.
+
+You can ask me about:
+- your organizations and projects
+- API keys for a project
+- available database regions
+- creating a new project
+
+Try this:
+list my Supabase projects`;
+
+const onboardedSessionIDsByApi = new WeakMap<TuiPluginApi, Set<string>>();
+
 type OAuthState =
+  | { type: "checking_auth" }
   | { type: "idle" }
+  | { type: "already_connected" }
   | { type: "authorizing"; url: string }
   | { type: "waiting_callback"; url: string }
   | { type: "success" }
+  | { type: "unknown"; message: string }
   | { type: "error"; message: string; url?: string };
 
 type ApiResponse<T> = { data?: T; error?: unknown };
@@ -30,17 +51,137 @@ type AuthData = {
   method: string;
 };
 
+type AuthStatus =
+  | { status: "connected"; checked: boolean }
+  | { status: "disconnected"; checked: boolean }
+  | { status: "refresh_required"; checked: true };
+
 type AuthFlowContext = {
   api: TuiPluginApi;
   logger: SupabaseLogger;
   setState: (state: OAuthState) => void;
-  onSuccess: () => void;
+  onSuccess: () => void | Promise<void>;
 };
 
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+const FALLBACK_THEME = {
+  primary: RGBA.fromHex("#347d95"),
+  selectedListItemText: RGBA.fromHex("#ffffff"),
+  text: RGBA.fromHex("#f8f5ea"),
+  textMuted: RGBA.fromHex("#9f97aa"),
+  backgroundPanel: RGBA.fromHex("#f8f5ea"),
+  markdownText: RGBA.fromHex("#5f5875"),
+  markdownHeading: RGBA.fromHex("#5f5875"),
+  markdownLink: RGBA.fromHex("#347d95"),
+  markdownStrong: RGBA.fromHex("#5f5875"),
+  markdownEmph: RGBA.fromHex("#8a6f00"),
+  markdownCode: RGBA.fromHex("#2e7d32"),
+  markdownListItem: RGBA.fromHex("#347d95"),
+  markdownBlockQuote: RGBA.fromHex("#8a6f00"),
+};
+
+type DialogTheme = typeof FALLBACK_THEME;
+
 function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : String(error);
 }
 
+function getDialogTheme(api: TuiPluginApi): DialogTheme {
+  return {
+    ...FALLBACK_THEME,
+    ...((api as { theme?: { current?: Partial<DialogTheme> } }).theme?.current ?? {}),
+  } as DialogTheme;
+}
+
+function createMarkdownSyntax(theme: DialogTheme) {
+  return SyntaxStyle.fromTheme([
+    { scope: ["markup.heading"], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ["markup.bold", "markup.strong"], style: { foreground: theme.markdownStrong, bold: true } },
+    { scope: ["markup.italic"], style: { foreground: theme.markdownEmph, italic: true } },
+    { scope: ["markup.raw", "markup.raw.block", "markup.raw.inline"], style: { foreground: theme.markdownCode } },
+    { scope: ["markup.link", "markup.link.url"], style: { foreground: theme.markdownLink, underline: true } },
+    { scope: ["markup.list"], style: { foreground: theme.markdownListItem } },
+    { scope: ["markup.quote"], style: { foreground: theme.markdownBlockQuote, italic: true } },
+    { scope: ["conceal"], style: { foreground: theme.textMuted } },
+  ]);
+}
+
+function SpinnerLabel(props: { text: string; color: DialogTheme["textMuted"] }) {
+  const [frame, setFrame] = createSignal(0);
+  const interval = setInterval(() => {
+    setFrame((index) => (index + 1) % SPINNER_FRAMES.length);
+  }, 80).unref();
+
+  onCleanup(() => clearInterval(interval));
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <text fg={props.color}>{SPINNER_FRAMES[frame()]}</text>
+      <text fg={props.color}>{props.text}</text>
+    </box>
+  );
+}
+
+function SupabaseSpinnerDialog(props: {
+  api: TuiPluginApi;
+  title: string;
+  status: string;
+  body?: string;
+  dismissible?: boolean;
+  size?: "medium" | "large" | "xlarge";
+  onClose: () => void;
+}): JSX.Element {
+  const theme = getDialogTheme(props.api);
+  const syntax = createMarkdownSyntax(theme);
+  props.api.ui.dialog.setSize(props.size ?? "medium");
+
+  return Object.assign(() => (
+    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          {props.title}
+        </text>
+        {props.dismissible ? (
+          <text fg={theme.textMuted} onMouseUp={props.onClose}>
+            esc
+          </text>
+        ) : (
+          <text fg={theme.textMuted}> </text>
+        )}
+      </box>
+      <box paddingTop={1} paddingBottom={props.body ? 0 : 1}>
+        <SpinnerLabel text={props.status} color={theme.textMuted} />
+      </box>
+      {props.body ? (
+        <box paddingBottom={props.dismissible ? 0 : 1}>
+          <markdown content={props.body} syntaxStyle={syntax} fg={theme.markdownText} bg={theme.backgroundPanel} />
+        </box>
+      ) : undefined}
+      {props.dismissible ? (
+        <box flexDirection="row" justifyContent="flex-end" paddingTop={1}>
+          <box paddingLeft={3} paddingRight={3} backgroundColor={theme.primary} onMouseUp={props.onClose}>
+            <text fg={theme.selectedListItemText}>Dismiss</text>
+          </box>
+        </box>
+      ) : undefined}
+    </box>
+  ), { onClose: props.dismissible ? props.onClose : () => undefined });
+}
+
+function parseAuthStatus(instructions: string): AuthStatus {
+  const parsed = JSON.parse(instructions) as Partial<AuthStatus>;
+  if (
+    parsed.status === "connected" ||
+    parsed.status === "disconnected" ||
+    parsed.status === "refresh_required"
+  ) {
+    return parsed as AuthStatus;
+  }
+
+  throw new Error("Invalid Supabase auth status response");
+}
+
 async function openBrowser(url: string, logger: SupabaseLogger) {
   try {
     const open = await import("open");
@@ -52,6 +193,71 @@ async function openBrowser(url: string, logger: SupabaseLogger) {
   }
 }
 
+async function ensureChatSession(api: TuiPluginApi) {
+  const currentRoute = api.route.current;
+  let sessionID =
+    currentRoute.name === "session" ? (currentRoute.params as { sessionID?: string } | undefined)?.sessionID : undefined;
+
+  if (!sessionID && currentRoute.name === "home") {
+    const response = await api.client.session.create({});
+    sessionID = (response.data as { id?: string } | undefined)?.id;
+    if (sessionID) {
+      api.route.navigate("session", { sessionID });
+    }
+  }
+
+  return sessionID;
+}
+
+async function injectOnboardingPrompt(
+  api: TuiPluginApi,
+  logger: SupabaseLogger,
+  lifecycle: NonNullable<SupabaseDialogProps["lifecycle"]>,
+) {
+  if (lifecycle.onboardingPromptSent) {
+    return;
+  }
+
+  if (!lifecycle.chatSessionID) {
+    await logger.warn("supabase onboarding prompt skipped", {
+      reason: "missing_session",
+    });
+    return;
+  }
+
+  const sessionID = lifecycle.chatSessionID;
+  const onboardedSessionIDs = onboardedSessionIDsByApi.get(api) ?? new Set<string>();
+  onboardedSessionIDsByApi.set(api, onboardedSessionIDs);
+
+  if (onboardedSessionIDs.has(sessionID)) {
+    lifecycle.onboardingPromptSent = true;
+    return;
+  }
+
+  lifecycle.onboardingPromptSent = true;
+  onboardedSessionIDs.add(sessionID);
+
+  try {
+    await api.client.session.promptAsync({
+      sessionID,
+      noReply: true,
+      parts: [
+        {
+          type: "text",
+          text: ONBOARDING_MESSAGE,
+          ignored: true,
+        },
+      ],
+    });
+  } catch (error) {
+    lifecycle.onboardingPromptSent = false;
+    onboardedSessionIDs.delete(sessionID);
+    await logger.warn("supabase onboarding prompt failed", {
+      message: getErrorMessage(error),
+    });
+  }
+}
+
 export async function runAuthFlow(context: AuthFlowContext) {
   let authURL: string | undefined;
   let completed = false;
@@ -123,7 +329,7 @@ export async function runAuthFlow(context: AuthFlowContext) {
 
   if (completed) {
     try {
-      context.onSuccess();
+      await context.onSuccess();
     } catch (error) {
       await context.logger.error("supabase auth success handler failed", {
         message: getErrorMessage(error),
@@ -132,9 +338,61 @@ export async function runAuthFlow(context: AuthFlowContext) {
   }
 }
 
+export async function runAuthPreflight(context: Pick<AuthFlowContext, "api" | "logger" | "setState">) {
+  context.setState({ type: "checking_auth" });
+
+  try {
+    const authResponse = (await context.api.client.provider.oauth.authorize({
+      providerID: "supabase",
+      method: 1,
+    })) as ApiResponse<AuthData>;
+
+    if (authResponse.error) {
+      throw new Error(formatAuthError("start", authResponse.error));
+    }
+
+    const instructions = authResponse.data?.instructions;
+    if (!instructions) {
+      throw new Error("Invalid Supabase auth status response");
+    }
+
+    const status = parseAuthStatus(instructions);
+    if (status.status === "connected") {
+      context.setState({ type: "already_connected" });
+      return;
+    }
+
+    if (status.status === "disconnected") {
+      context.setState({ type: "idle" });
+      return;
+    }
+
+    const callbackResponse = (await context.api.client.provider.oauth.callback({
+      providerID: "supabase",
+      method: 1,
+    })) as ApiResponse<boolean>;
+
+    if (callbackResponse.error) {
+      throw new Error(formatAuthError("callback", callbackResponse.error));
+    }
+
+    if (callbackResponse.data === true) {
+      context.setState({ type: "already_connected" });
+      return;
+    }
+
+    context.setState({ type: "idle" });
+  } catch (error) {
+    context.setState({
+      type: "unknown",
+      message: formatAuthError("unknown", error),
+    });
+  }
+}
+
 export function SupabaseDialog(props: SupabaseDialogProps) {
   const lifecycle = props.lifecycle ?? { closed: false };
-  const [state, setStateSignal] = createSignal<OAuthState>(props.initialState ?? { type: "idle" });
+  const [state, setStateSignal] = createSignal<OAuthState>(props.initialState ?? { type: "checking_auth" });
 
   const closeDialog = (dismissed = false) => {
     lifecycle.closed = true;
@@ -153,7 +411,6 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
 
     if (nextState.type === "success") {
       if (lifecycle.dismissed) {
-        // User dismissed waiting dialog; stay silent
         return;
       }
       props.api.ui.dialog.replace(() =>
@@ -175,23 +432,89 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
     );
   };
 
-  const startOAuth = () =>
-    runAuthFlow({
+  const startOAuth = async () => {
+    lifecycle.dismissed = false;
+    if (!lifecycle.chatSessionID) {
+      lifecycle.chatSessionID = await ensureChatSession(props.api);
+    }
+    return runAuthFlow({
       api: props.api,
       logger: props.logger,
       setState,
       onSuccess: () => {
-        // Success dialog handles user-facing confirmation
+        if (lifecycle.dismissed) {
+          props.api.ui.toast({ message: "Supabase connected" });
+          return;
+        }
+
+        if (lifecycle.closed) {
+          return;
+        }
+
+        return injectOnboardingPrompt(props.api, props.logger, lifecycle);
       },
     });
+  };
+
+  const retryPreflight = () => {
+    if (lifecycle.preflightPromise) {
+      return lifecycle.preflightPromise;
+    }
+
+    lifecycle.preflightPromise = runAuthPreflight({
+      api: props.api,
+      logger: props.logger,
+      setState,
+    }).finally(() => {
+      lifecycle.preflightPromise = undefined;
+    });
+
+    return lifecycle.preflightPromise;
+  };
+
+  const disconnect = async () => {
+    try {
+      await props.api.client.provider.oauth.authorize({
+        providerID: "supabase",
+        method: 1,
+        inputs: { action: "disconnect" },
+      });
+      props.api.ui.toast({ message: "Disconnected from Supabase" });
+      closeDialog();
+    } catch (error) {
+      await props.logger.warn("supabase disconnect failed", {
+        message: getErrorMessage(error),
+      });
+      setState({
+        type: "unknown",
+        message: `Couldn't disconnect from Supabase right now. ${formatAuthError("unknown", error)}`,
+      });
+    }
+  };
 
   const currentState = state();
 
+  if (currentState.type === "checking_auth") {
+    queueMicrotask(() => {
+      if (lifecycle.closed || lifecycle.preflightPromise) {
+        return;
+      }
+      void retryPreflight();
+    });
+
+    return SupabaseSpinnerDialog({
+      api: props.api,
+      title: "Connect to Supabase",
+      status: "Checking Supabase connection...",
+      body: "No action needed. This should only take a few seconds.",
+      onClose: () => undefined,
+    });
+  }
+
   if (currentState.type === "idle") {
     return props.api.ui.DialogConfirm({
-      title: "Connect Supabase",
-      message:
-        "This will open a browser window to authorize OpenCode to access your Supabase account. Continue?",
+      title: "Connect your Supabase account",
+      message: "Open your browser to authorize OpenCode to access your Supabase account.",
       onConfirm: startOAuth,
       onCancel: closeDialog,
     });
@@ -199,25 +522,36 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
 
   if (currentState.type === "authorizing") {
     if (!currentState.url) {
-    return props.api.ui.DialogAlert({
-      title: "Connect Supabase",
-      message: "Starting authorization...",
-      onConfirm: () => closeDialog(true),
-    });
+      return SupabaseSpinnerDialog({
+        api: props.api,
+        title: "Connect to Supabase",
+        status: "Starting authorization...",
+        body: "Opening your browser. You can close this dialog; auth completes only after browser approval.",
+        dismissible: true,
+        onClose: () => closeDialog(true),
+      });
     }
 
-    return props.api.ui.DialogAlert({
-      title: "Connect Supabase",
-      message: `Complete authorization in your browser.\n\nIf the browser did not open, visit:\n${currentState.url}\n\nWaiting for authorization...`,
-      onConfirm: () => closeDialog(true),
+    return SupabaseSpinnerDialog({
+      api: props.api,
+      title: "Connect to Supabase",
+      status: "Waiting for browser authorization...",
+      body: `Complete authorization in your browser.\n\nIf the browser did not open, visit:\n${currentState.url}\n\nYou can close this dialog; auth completes only after browser approval.`,
+      dismissible: true,
+      size: "large",
+      onClose: () => closeDialog(true),
     });
   }
 
   if (currentState.type === "waiting_callback") {
-    return props.api.ui.DialogAlert({
-      title: "Connect Supabase",
-      message: `Complete authorization in your browser.\n\nIf the browser did not open, visit:\n${currentState.url}\n\nWaiting for authorization...`,
-      onConfirm: () => closeDialog(true),
+    return SupabaseSpinnerDialog({
+      api: props.api,
+      title: "Connect to Supabase",
+      status: "Waiting for browser authorization...",
+      body: `Complete authorization in your browser.\n\nIf the browser did not open, visit:\n${currentState.url}\n\nYou can close this dialog; auth completes only after browser approval.`,
+      dismissible: true,
+      size: "large",
+      onClose: () => closeDialog(true),
     });
   }
 
@@ -234,22 +568,34 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
     });
   }
 
-  return props.api.ui.DialogConfirm({
+  if (currentState.type === "already_connected") {
+    return props.api.ui.DialogConfirm({
+      title: "You're all set",
+      message: "Your Supabase account is connected and ready to go.\n\nClose this dialog to continue, or disconnect to sign out.",
+      onConfirm: async () => {
+        if (!lifecycle.chatSessionID) {
+          lifecycle.chatSessionID = await ensureChatSession(props.api);
+        }
+        await injectOnboardingPrompt(props.api, props.logger, lifecycle);
+        closeDialog();
+      },
+      onCancel: disconnect,
+      label: "Disconnect",
+    } as import("./opencode-runtime-extensions.ts").DialogConfirmWithLabel);
+  }
+
+  if (currentState.type === "unknown") {
+    return props.api.ui.DialogConfirm({
+      title: "Supabase connection status unknown",
+      message: `${currentState.message}\n\nConfirm to retry, or cancel to continue without changing saved auth.`,
+      onConfirm: retryPreflight,
+      onCancel: closeDialog,
+    });
+  }
+
+  return props.api.ui.DialogAlert({
     title: "Connected to Supabase",
-    message:
-      "Your account is ready. Try asking:\n\n  list my Supabase projects\n  list my Supabase organizations\n  for organization <name>, list available regions\n\nRun an example?",
-    onConfirm: async () => {
-      try {
-        await props.api.client.tui.appendPrompt({
-          text: "list my Supabase projects",
-        });
-      } catch (error) {
-        await props.logger.warn("supabase append prompt failed", {
-          message: getErrorMessage(error),
-        });
-      }
-      closeDialog();
-    },
-    onCancel: closeDialog,
+    message: "Your account is ready. Close this dialog and ask me to list your Supabase projects.",
+    onConfirm: closeDialog,
   });
 }

package/src/tui/index.tsx

@@ -11,7 +11,15 @@ const tui: TuiPlugin = async (api) => {
 
   api.command.register(() => [
     createSupabaseCommand(() => {
-      api.ui.dialog.replace(() => SupabaseDialog({ api, logger, onClose: () => api.ui.dialog.clear() }));
+      const lifecycle = { closed: false };
+      api.ui.dialog.replace(() =>
+        SupabaseDialog({
+          api,
+          logger,
+          lifecycle,
+          onClose: () => api.ui.dialog.clear(),
+        }),
+      );
     }),
   ]);
 };

package/src/tui/opencode-runtime-extensions.ts

@@ -0,0 +1,10 @@
+// OpenCode host supports `label` on DialogConfirm since ~Mar 2026
+// (commit e2d03ce38 in opencode repo: interactive update flow for non-patch releases).
+// The @opencode-ai/plugin SDK types (up to 1.14.24) never declared it.
+// This module patches the gap locally until the SDK catches up.
+
+import type { TuiDialogConfirmProps } from "@opencode-ai/plugin/tui";
+
+export type DialogConfirmWithLabel = TuiDialogConfirmProps & {
+  label?: string;
+};