Improve plugin drawer input behavior

Author: pratikbuilds

apps/web/src/app.css

@@ -38,9 +38,11 @@ html {
   outline-offset: 2px;
 }
 
-/* Inputs already have a visible control boundary. Color that edge on focus so
-   the focus treatment reads as one control, not a second outline outside it. */
-[data-slot="input"]:focus-visible {
+/* Inputs in side drawers already have a visible control boundary. Color that
+   edge on focus so the focus treatment reads as one control, not a second
+   outline outside it. */
+[data-slot="dialog-content"][data-side="right"]
+  [data-slot="input"]:focus-visible {
   outline: none;
   border-color: var(--accent-rail, var(--primary));
 }

packages/plugins-ui/src/mcp-preset-cards.tsx

@@ -75,7 +75,7 @@ export function McpPresetCard({
   readonly preset: McpPreset;
   readonly toolCount: number | undefined;
   readonly onChanged: (toolCount?: number) => void;
-  readonly onOpen: () => void;
+  readonly onOpen: (trigger: HTMLButtonElement) => void;
 }) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(() =>
@@ -95,13 +95,13 @@ export function McpPresetCard({
       .finally(() => setBusy(false));
   }
 
-  function handleConnect() {
+  function handleConnect(trigger: HTMLButtonElement) {
     if (preset.connectionMode === "oauth") {
       window.location.href = mcpOAuthStartPath(tenantId, preset.slug);
       return;
     }
     if (preset.connectionMode === "token") {
-      onOpen();
+      onOpen(trigger);
       return;
     }
     submitConnect();
@@ -153,7 +153,7 @@ export function McpPresetCard({
               size="sm"
               variant="ghost"
               aria-label={`Manage ${preset.displayName}`}
-              onClick={onOpen}
+              onClick={(event) => onOpen(event.currentTarget)}
             >
               Manage
               <span className="sr-only"> {preset.displayName}</span>
@@ -165,7 +165,7 @@ export function McpPresetCard({
               variant="ghost"
               disabled={busy}
               aria-label={`Connect ${preset.displayName}`}
-              onClick={handleConnect}
+              onClick={(event) => handleConnect(event.currentTarget)}
             >
               {busy ? "Connecting…" : "Connect"}
             </Button>

packages/plugins-ui/src/plugin-connect-panel.tsx

@@ -312,14 +312,14 @@ function McpPresetPanelContent({
         className="flex flex-col gap-1.5 text-sm font-medium"
         htmlFor={tokenFieldId}
       >
-        API key
+        Personal access token
         <Input
           id={tokenFieldId}
           type="password"
           value={token}
           placeholder="Paste your access token"
           disabled={busy}
-          autoComplete="off"
+          autoComplete="new-password"
           onChange={(event) => {
             setToken(event.target.value);
             setError(null);

packages/plugins-ui/src/plugins-gallery.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Lightning } from "@corbits/icons";
 import { EmptyState, FilterChip, Tabs } from "@corbits/react-ui";
@@ -133,6 +133,7 @@ function PluginCatalogPanel({
   readonly onOpenPreset: (
     preset: McpPreset,
     toolCount: number | undefined,
+    trigger: HTMLButtonElement,
   ) => void;
   readonly onOpenPlugin: (plugin: ResolvedPlugin) => void;
 }) {
@@ -181,8 +182,8 @@ function PluginCatalogPanel({
                 preset={entry.preset}
                 toolCount={toolCounts.get(entry.id)}
                 onChanged={(toolCount) => onPresetChanged(entry.id, toolCount)}
-                onOpen={() =>
-                  onOpenPreset(entry.preset, toolCounts.get(entry.id))
+                onOpen={(trigger) =>
+                  onOpenPreset(entry.preset, toolCounts.get(entry.id), trigger)
                 }
               />
             ) : (
@@ -296,9 +297,22 @@ export function PluginsGallery({
   const [openPreset, setOpenPreset] = useState<{
     readonly preset: McpPreset;
     readonly toolCount: number | undefined;
+    readonly trigger: HTMLButtonElement;
   } | null>(null);
+  const presetFocusTrigger = useRef<HTMLButtonElement | null>(null);
   const presetCatalog = useMcpPresetCatalog(tenantId);
 
+  useEffect(() => {
+    if (openPreset !== null) return;
+    presetFocusTrigger.current?.focus();
+    presetFocusTrigger.current = null;
+  }, [openPreset]);
+
+  function closePreset() {
+    presetFocusTrigger.current = openPreset?.trigger ?? null;
+    setOpenPreset(null);
+  }
+
   const nativeEntries = useMemo<readonly PluginCatalogEntry[]>(
     () =>
       plugins
@@ -398,8 +412,8 @@ export function PluginsGallery({
                     onFilterChange={setActiveFilter}
                     toolCounts={presetCatalog.toolCounts}
                     onPresetChanged={presetCatalog.handleChanged}
-                    onOpenPreset={(preset, toolCount) =>
-                      setOpenPreset({ preset, toolCount })
+                    onOpenPreset={(preset, toolCount, trigger) =>
+                      setOpenPreset({ preset, toolCount, trigger })
                     }
                     onOpenPlugin={onOpenPlugin}
                   />
@@ -427,11 +441,11 @@ export function PluginsGallery({
                 toolCount: openPreset.toolCount,
               }
         }
-        onClose={() => setOpenPreset(null)}
+        onClose={closePreset}
         onChanged={(toolCount) => {
           if (openPreset === null) return;
           presetCatalog.handleChanged(openPreset.preset.slug, toolCount);
-          setOpenPreset(null);
+          closePreset();
         }}
       />
     </div>