opencode-supabase 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-supabase",
-  "version": "0.1.0",
+  "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/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";
@@ -13,9 +15,24 @@ type SupabaseDialogProps = {
     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" }
@@ -43,13 +60,115 @@ 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 (
@@ -74,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;
@@ -145,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),
@@ -227,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(() =>
@@ -249,15 +432,29 @@ 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) {
@@ -282,6 +479,7 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
         method: 1,
         inputs: { action: "disconnect" },
       });
+      props.api.ui.toast({ message: "Disconnected from Supabase" });
       closeDialog();
     } catch (error) {
       await props.logger.warn("supabase disconnect failed", {
@@ -304,18 +502,19 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
       void retryPreflight();
     });
 
-    return props.api.ui.DialogAlert({
-      title: "Connect Supabase",
-      message: "Checking Supabase connection...",
-      onConfirm: () => closeDialog(true),
+    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,
     });
@@ -323,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),
     });
   }
 
@@ -360,9 +570,15 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
 
   if (currentState.type === "already_connected") {
     return props.api.ui.DialogConfirm({
-      title: "Already connected to Supabase",
-      message: "Your saved Supabase login is ready to use. Continue to close this dialog, or disconnect to sign out.",
-      onConfirm: closeDialog,
+      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);
@@ -377,22 +593,9 @@ export function SupabaseDialog(props: SupabaseDialogProps) {
     });
   }
 
-  return props.api.ui.DialogConfirm({
+  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,
   });
 }