Connect dialog for adding sources (#480)

- Replace inline URL input with a Connect button that opens a dialog - Unified search/URL input: filters preset list as you type, switches to detect-button mode when the input looks like a URL - Preset grid moved into the dialog with a fixed-height scroll area and a zero state when filters return nothing - Empty state on the page now points users at the Connect button - Move McpInstallCard below the sources list - Vite watch config: poll + un-ignore workspace symlinks so edits in packages/* trigger HMR through the apps/local dev server

Rhys Sullivan committed 6 months ago

Commit c5d93a31 parent af4ed7e2 files · +272 −164Browse files

Unified · Split

2 files

apps/local/vite.config.ts +11 −0
packages/react/src/pages/sources.tsx +261 −164

apps/local/vite.config.ts+11−0

@@ -107,6 +107,17 @@ export default defineConfig({ · 106 unmodified lines
107	server: {	107	server: {
108	port: parseInt(process.env.PORT ?? "5173", 10),	108	port: parseInt(process.env.PORT ?? "5173", 10),
109	host: "127.0.0.1",	109	host: "127.0.0.1",
		110	watch: {
		111	// Workspace packages live under packages/ and are symlinked into
		112	// node_modules. Without this, chokidar treats them as ordinary
		113	// node_modules and skips watching, so edits to e.g.
		114	// packages/react/src/pages/sources.tsx don't trigger HMR.
		115	ignored: ["!/node_modules/@executor-js/"],
		116	// WSL2 + symlinked workspace packages can drop inotify events;
		117	// polling is slower but reliable.
		118	usePolling: true,
		119	interval: 200,
		120	},
110	},	121	},
111	plugins: [	122	plugins: [
112	tailwindcss(),	123	tailwindcss(),

packages/react/src/pages/sources.tsx+261−164

-import { Suspense, useState, useCallback, useMemo } from "react";
+import { Suspense, useCallback, useMemo, useState } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { useAtomSet } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+import { PlusIcon } from "lucide-react";
 import type { SourceDetectionResult } from "@executor-js/sdk";
 import {
   useSourcePlugins,
 import { Button } from "../components/button";
 import { Badge } from "../components/badge";
 import { Input } from "../components/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../components/dialog";
 import {
   CardStack,
-  CardStackHeader,
   CardStackContent,
   CardStackEntry,
-  CardStackEntryField,
+  CardStackEntryActions,
-  CardStackEntryMedia,
   CardStackEntryContent,
-  CardStackEntryTitle,
   CardStackEntryDescription,
-  CardStackEntryActions,
+  CardStackEntryMedia,
+  CardStackEntryTitle,
 } from "../components/card-stack";
 import { SourceFavicon } from "../components/source-favicon";
 import { Skeleton } from "../components/skeleton";
 // ---------------------------------------------------------------------------
 export function SourcesPage() {
-  const sourcePlugins = useSourcePlugins();
-  const [url, setUrl] = useState("");
-  const [detecting, setDetecting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const scopeId = useScope();
   const sources = useSourcesWithPending(scopeId);
+  const [connectOpen, setConnectOpen] = useState(false);
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="mx-auto max-w-4xl px-6 py-10 lg:px-10 lg:py-14">
+        <div className="mb-8 flex items-end justify-between gap-4">
+          <div>
+            <h1 className="font-display text-3xl tracking-tight text-foreground lg:text-4xl">
+              Sources
+            </h1>
+            <p className="mt-1.5 text-[14px] text-muted-foreground">
+              Tool providers available in this workspace.
+            </p>
+          </div>
+          <Button onClick={() => setConnectOpen(true)} size="sm" className="shrink-0 gap-1.5">
+            <PlusIcon className="size-4" />
+            Connect
+          </Button>
+        </div>
+        {AsyncResult.match(sources, {
+          onInitial: () => <SourcesGridSkeleton />,
+          onFailure: () => <p className="text-sm text-destructive">Failed to load sources</p>,
+          onSuccess: ({ value }) => {
+            const connectedSources = (
+              value as Array<{
+                readonly id: string;
+                readonly name: string;
+                readonly kind: string;
+                readonly url?: string;
+                readonly runtime?: boolean;
+              }>
+            ).filter((source) => !source.runtime);
+            if (connectedSources.length === 0) {
+              return <EmptySources onConnect={() => setConnectOpen(true)} />;
+            }
+            return (
+              <div className="mb-8 space-y-3">
+                <SourceGrid sources={connectedSources} />
+              </div>
+            );
+          },
+        })}
+        <div className="mb-8 border-t border-border/50" />
+        <div className="mb-8">
+          <McpInstallCard />
+        </div>
+      </div>
+      <ConnectDialog open={connectOpen} onOpenChange={setConnectOpen} />
+    </div>
+  );
+}
+// ---------------------------------------------------------------------------
+// Connect dialog — URL detection + manual plugin chooser + presets
+// ---------------------------------------------------------------------------
+// Heuristic: the input either looks like a URL (auto-detect) or a free-text
+// search query (filter the preset list). Anything with a scheme, slash, or
+// host-with-TLD is treated as a URL; everything else is search.
+const looksLikeUrl = (raw: string): boolean => {
+  const v = raw.trim();
+  if (v.length === 0) return false;
+  if (/^[a-z][a-z0-9+\-.]*:\/\//i.test(v)) return true;
+  if (v.includes("/")) return true;
+  if (/^[a-z0-9][a-z0-9.-]*\.[a-z]{2,}(?::\d+)?$/i.test(v)) return true;
+  return false;
+};
+function ConnectDialog(props: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const sourcePlugins = useSourcePlugins();
+  const scopeId = useScope();
   const doDetect = useAtomSet(detectSource, { mode: "promise" });
   const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+  const [detecting, setDetecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const isUrl = looksLikeUrl(query);
+  const presetSearch = isUrl ? "" : query;
+  const closeAndReset = useCallback(() => {
+    setQuery("");
+    setError(null);
+    setDetecting(false);
+    props.onOpenChange(false);
+  }, [props]);
   const handleDetect = useCallback(async () => {
-    const trimmed = url.trim();
+    const trimmed = query.trim();
     if (!trimmed) return;
     setDetecting(true);
     setError(null);
       }
       const pluginKey = KIND_TO_PLUGIN_KEY[detected.kind];
       if (pluginKey) {
+        closeAndReset();
         void navigate({
           to: "/sources/add/$pluginKey",
           params: { pluginKey },
         });
       } else {
         setError(`Detected source type "${detected.kind}" but no plugin is available for it.`);
+        setDetecting(false);
       }
     } catch {
       setError("Detection failed. Try adding a source manually.");
-    } finally {
       setDetecting(false);
     }
-  }, [url, doDetect, navigate, scopeId]);
+  }, [query, doDetect, navigate, scopeId, closeAndReset]);
   return (
-    <div className="min-h-0 flex-1 overflow-y-auto">
+    <Dialog
-      <div className="mx-auto max-w-4xl px-6 py-10 lg:px-10 lg:py-14">
+      open={props.open}
-        {/* Header */}
+      onOpenChange={(open) => {
-        <div className="mb-8">
+        if (!open) closeAndReset();
-          <div className="flex items-end justify-between">
+        else props.onOpenChange(open);
-            <div>
+      }}
-              <h1 className="font-display text-3xl tracking-tight text-foreground lg:text-4xl">
+    >
-                Sources
+      <DialogContent className="sm:max-w-[560px]">
-              </h1>
+        <DialogHeader>
-              <p className="mt-1.5 text-[14px] text-muted-foreground">
+          <DialogTitle>Connect a source</DialogTitle>
-                Tool providers available in this workspace.
+          <DialogDescription>
-              </p>
+            Search the preset library, or paste a URL to auto-detect.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex min-w-0 flex-col gap-5">
+          <div className="flex flex-col gap-2">
+            <div className="flex gap-2">
+              <Input
+                type="text"
+                value={query}
+                onChange={(e) => {
+                  setQuery((e.target as HTMLInputElement).value);
+                  setError(null);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && isUrl) void handleDetect();
+                }}
+                placeholder="Search or paste a URL…"
+                disabled={detecting}
+                className="flex-1"
+              />
+              {isUrl && (
+                <Button
+                  onClick={() => void handleDetect()}
+                  disabled={detecting || !query.trim()}
+                >
+                  {detecting ? "Detecting..." : "Detect"}
+                </Button>
+              )}
             </div>
+            {error && <p className="text-xs text-destructive">{error}</p>}
           </div>
-          {/* URL detection input */}
+          <div className="flex flex-col gap-2">
-          <div className="mt-5">
+            <p className="text-xs font-medium text-foreground/80">Or add manually</p>
-            <CardStack>
+            <div className="flex flex-wrap gap-2">
-              <CardStackContent>
+              {sourcePlugins.map((p) => (
-                <CardStackEntryField
+                <Link
-                  label="Paste URL"
+                  key={p.key}
-                  description="auto-detect source type"
+                  to="/sources/add/$pluginKey"
-                  hint={error ?? undefined}
+                  params={{ pluginKey: p.key }}
+                  onClick={closeAndReset}
+                  className="rounded-md border border-border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-muted"
                 >
-                  <div className="flex gap-2">
+                  {p.label}
-                    <Input
+                </Link>
-                      type="url"
+              ))}
-                      value={url}
+            </div>
-                      onChange={(e) => {
-                        setUrl((e.target as HTMLInputElement).value);
-                        setError(null);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") handleDetect();
-                      }}
-                      placeholder="https://..."
-                      disabled={detecting}
-                      className="flex-1"
-                    />
-                    <Button onClick={handleDetect} disabled={detecting || !url.trim()}>
-                      {detecting ? "Detecting..." : "Detect"}
-                    </Button>
-                  </div>
-                  <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                    Or add manually:{" "}
-                    {sourcePlugins.map((p) => (
-                      <Link
-                        key={p.key}
-                        to="/sources/add/$pluginKey"
-                        params={{ pluginKey: p.key }}
-                        className="rounded-md border border-border px-2 py-1 text-xs font-medium transition-colors hover:bg-muted"
-                      >
-                        {p.label}
-                      </Link>
-                    ))}
-                  </div>
-                </CardStackEntryField>
-              </CardStackContent>
-            </CardStack>
           </div>
-        </div>
-        <div className="mb-8">
+          <PresetGrid
-          <McpInstallCard />
+            plugins={sourcePlugins}
+            onPick={closeAndReset}
+            searchQuery={presetSearch}
+          />
         </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
-        {AsyncResult.match(sources, {
+// ---------------------------------------------------------------------------
-          onInitial: () => <SourcesGridSkeleton />,
+// Empty state
-          onFailure: () => <p className="text-sm text-destructive">Failed to load sources</p>,
+// ---------------------------------------------------------------------------
-          onSuccess: ({ value }) => {
-            const connectedSources = (
-              value as Array<{
-                readonly id: string;
-                readonly name: string;
-                readonly kind: string;
-                readonly url?: string;
-                readonly runtime?: boolean;
-              }>
-            ).filter((source) => !source.runtime);
-            return value.length === 0 ? (
-              <div className="mb-8 flex flex-col items-center justify-center rounded-2xl border border-dashed border-border py-20">
-                <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground mb-4">
-                  <svg viewBox="0 0 24 24" fill="none" className="size-5">
-                    <path
-                      d="M12 6v12M6 12h12"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                    />
-                  </svg>
-                </div>
-                <p className="text-[14px] font-medium text-foreground/70 mb-1">No sources yet</p>
-                <p className="text-[13px] text-muted-foreground/60 mb-5">
-                  Add a source to get started.
-                </p>
-              </div>
-            ) : (
-              <div className="mb-8 space-y-8">
-                {connectedSources.length > 0 && (
-                  <section className="space-y-3">
-                    <SourceGrid sources={connectedSources} />
-                  </section>
-                )}
-              </div>
-            );
-          },
-        })}
-        <div className="mb-8 border-t border-border/50" />
-        <PresetGrid />
+function EmptySources(props: { onConnect: () => void }) {
+  return (
+    <div className="mb-8 flex flex-col items-center justify-center rounded-2xl border border-dashed border-border py-16">
+      <div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+        <PlusIcon className="size-5" />
       </div>
+      <p className="mb-1 text-[14px] font-medium text-foreground/70">No sources yet</p>
+      <p className="mb-5 text-[13px] text-muted-foreground/60">
+        Connect a source to start curating tools.
+      </p>
+      <Button onClick={props.onConnect} size="sm" className="gap-1.5">
+        <PlusIcon className="size-4" />
+        Connect a source
+      </Button>
     </div>
   );
 }
 // ---------------------------------------------------------------------------
-// Preset grid
+// Preset grid (for inside the Connect dialog)
 // ---------------------------------------------------------------------------
 type PresetEntry = {
   pluginLabel: string;
 };
-function PresetGrid() {
+function PresetGrid(props: {
-  const plugins = useSourcePlugins();
+  plugins: readonly SourcePlugin[];
+  onPick: () => void;
+  /** Controlled filter query forwarded from the dialog's unified
+   *  search/URL input. Empty string disables filtering. */
+  searchQuery?: string;
+}) {
   const allPresets = useMemo(() => {
     const entries: PresetEntry[] = [];
-    for (const plugin of plugins) {
+    for (const plugin of props.plugins) {
       for (const preset of plugin.presets ?? []) {
         entries.push({
           preset,
       }
     }
     return entries;
-  }, [plugins]);
+  }, [props.plugins]);
+  const filtered = useMemo(() => {
+    const q = (props.searchQuery ?? "").trim().toLowerCase();
+    if (q.length === 0) return allPresets;
+    return allPresets.filter(({ preset, pluginLabel }) => {
+      const corpus =
+        `${preset.name} ${preset.summary ?? ""} ${pluginLabel}`.toLowerCase();
+      return corpus.includes(q);
+    });
+  }, [allPresets, props.searchQuery]);
   if (allPresets.length === 0) return null;
   return (
-    <section className="mb-8 space-y-3">
+    <div className="flex min-w-0 flex-col gap-2">
-      <CardStack searchable>
+      <p className="text-xs font-medium text-foreground/80">Popular sources</p>
-        <CardStackHeader>Popular sources</CardStackHeader>
+      <CardStack className="min-w-0">
-        <CardStackContent>
+        {/* Fixed height keeps the dialog stable as the user filters; the
-          {allPresets.map(({ preset, pluginKey, pluginLabel }) => {
+         *  inner area scrolls when the list overflows and shows an empty
-            const search: Record<string, string> = { preset: preset.id };
+         *  state when no presets match. */}
-            if (preset.url) search.url = preset.url;
+        <CardStackContent className="h-64 overflow-y-auto">
-            return (
+          {filtered.length === 0 ? (
-              <CardStackEntry
+            <div className="flex h-full flex-col items-center justify-center gap-1 px-4 py-6 text-center">
-                key={`${pluginKey}-${preset.id}`}
+              <p className="text-sm text-muted-foreground">No matching presets</p>
-                asChild
+              <p className="text-xs text-muted-foreground/70">
-                searchText={`${preset.name} ${preset.summary ?? ""} ${pluginLabel}`}
+                Paste a URL above to auto-detect, or pick a source type manually.
-              >
+              </p>
-                <Link to="/sources/add/$pluginKey" params={{ pluginKey }} search={search}>
+            </div>
-                  <CardStackEntryMedia>
+          ) : (
-                    {preset.icon ? (
+            filtered.map(({ preset, pluginKey, pluginLabel }) => {
-                      <img
+              const search: Record<string, string> = { preset: preset.id };
-                        src={preset.icon}
+              if (preset.url) search.url = preset.url;
-                        alt=""
+              return (
-                        className="size-5 object-contain"
+                <CardStackEntry key={`${pluginKey}-${preset.id}`} asChild>
-                        loading="lazy"
+                  <Link
-                      />
+                    to="/sources/add/$pluginKey"
-                    ) : (
+                    params={{ pluginKey }}
-                      <svg viewBox="0 0 16 16" className="size-3.5" fill="none">
+                    search={search}
-                        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.2" />
+                    onClick={props.onPick}
-                      </svg>
+                  >
-                    )}
+                    <CardStackEntryMedia>
-                  </CardStackEntryMedia>
+                      {preset.icon ? (
-                  <CardStackEntryContent>
+                        <img
-                    <CardStackEntryTitle>{preset.name}</CardStackEntryTitle>
+                          src={preset.icon}
-                    <CardStackEntryDescription>{preset.summary}</CardStackEntryDescription>
+                          alt=""
-                  </CardStackEntryContent>
+                          className="size-5 object-contain"
-                  <CardStackEntryActions>
+                          loading="lazy"
-                    <Badge variant="secondary">{pluginLabel}</Badge>
+                        />
-                  </CardStackEntryActions>
+                      ) : (
-                </Link>
+                        <svg viewBox="0 0 16 16" className="size-3.5" fill="none">
-              </CardStackEntry>
+                          <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.2" />
-            );
+                        </svg>
-          })}
+                      )}
+                    </CardStackEntryMedia>
+                    <CardStackEntryContent>
+                      <CardStackEntryTitle>{preset.name}</CardStackEntryTitle>
+                      <CardStackEntryDescription>{preset.summary}</CardStackEntryDescription>
+                    </CardStackEntryContent>
+                    <CardStackEntryActions>
+                      <Badge variant="secondary">{pluginLabel}</Badge>
+                    </CardStackEntryActions>
+                  </Link>
+                </CardStackEntry>
+              );
+            })
+          )}
         </CardStackContent>
       </CardStack>
-    </section>
+    </div>
   );
 }
 // ---------------------------------------------------------------------------
-// Source grid
+// Source grid — flat list of connected sources, click-through to detail
 // ---------------------------------------------------------------------------
 function SourceGrid(props: {
   return (
     <CardStack searchable>
-      <CardStackHeader>Connected</CardStackHeader>
       <CardStackContent>
         {props.sources.map((s) => {
           const pluginKey = KIND_TO_PLUGIN_KEY[s.kind] ?? s.kind;

Connect dialog for adding sources (#480)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code