Add Bruno imports and a file-tree importer API (#706)

2026-11-13 12:13:42 +01:00 · 2026-09-24 14:50:44 -07:00
1 parent 46464cfacf
commit aa10c44a45
@@ -1,12 +1,12 @@
 import { gitClone } from "@yaakapp-internal/git";
 import { Banner, VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
 import { appInfo } from "../lib/appInfo";
 import { CommercialUseBanner } from "./CommercialUseBanner";
 import { showErrorToast } from "../lib/toast";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
 import { promptCredentials } from "./git/credentials";
@@ -29,6 +29,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
  const [subdirectory, setSubdirectory] = useState<string>("");
  const [isCloning, setIsCloning] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const formId = useId();

  const repoName = extractRepoName(url);
  const sep = getPathSeparator(baseDirectory);
@@ -83,7 +84,7 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
  };

  return (
-    <VStack as="form" space={3} alignItems="start" className="pb-3" onSubmit={handleClone}>
+    <VStack as="form" id={formId} space={3} alignItems="start" onSubmit={handleClone}>
      {error && (
        <Banner color="danger" className="w-full">
          {error}
@@ -132,15 +133,17 @@ export function CloneGitRepositoryDialog({ hide }: Props) {
        />
      )}

-      <Button
-        type="submit"
-        color="primary"
-        className="w-full mt-3"
-        disabled={!url || !directory || isCloning}
-        isLoading={isCloning}
-      >
-        {isCloning ? "Cloning..." : "Clone Repository"}
-      </Button>
+      <DialogFooter
+        actions={[
+          {
+            label: isCloning ? "Cloning..." : "Clone Repository",
+            color: "primary",
+            form: formId,
+            disabled: !url || !directory || isCloning,
+            isLoading: isCloning,
+          },
+        ]}
+      />
    </VStack>
  );
 }
@@ -1,10 +1,10 @@
 import { createWorkspaceModel } from "@yaakapp-internal/models";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { useToggle } from "../hooks/useToggle";
 import { ColorIndicator } from "./ColorIndicator";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
 import { ColorPickerWithThemeColors } from "./core/ColorPicker";
+import { DialogFooter } from "./core/Dialog";
 import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";

@@ -18,9 +18,11 @@ export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props)
  const [name, setName] = useState<string>("");
  const [color, setColor] = useState<string | null>(null);
  const [sharable, toggleSharable] = useToggle(false);
+  const formId = useId();
  return (
    <form
-      className="pb-3 flex flex-col gap-3"
+      id={formId}
+      className="flex flex-col gap-3"
      onSubmit={async (e) => {
        e.preventDefault();
        const id = await createWorkspaceModel({
@@ -59,10 +61,17 @@ export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props)
        </Label>
        <ColorPickerWithThemeColors onChange={setColor} color={color} />
      </div>
-      <Button type="submit" color="secondary" className="mt-3">
-        {color != null && <ColorIndicator color={color} />}
-        Create Environment
-      </Button>
+      <DialogFooter
+        inline
+        actions={[
+          {
+            label: "Create Environment",
+            color: "secondary",
+            form: formId,
+            leftSlot: color != null ? <ColorIndicator color={color} /> : undefined,
+          },
+        ]}
+      />
    </form>
  );
 }
@@ -2,13 +2,13 @@ import { gitMutations } from "@yaakapp-internal/git";
 import type { WorkspaceMeta } from "@yaakapp-internal/models";
 import { createGlobalModel, updateModel } from "@yaakapp-internal/models";
 import { VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { router } from "../lib/router";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
 import { rpc } from "../lib/rpc";
 import { showErrorToast } from "../lib/toast";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";
 import { Label } from "./core/Label";
 import { PlainInput } from "./core/PlainInput";
 import { EncryptionHelp } from "./EncryptionHelp";
@@ -26,12 +26,13 @@ export function CreateWorkspaceDialog({ hide }: Props) {
    initGit?: boolean;
  }>({ filePath: null, initGit: false });
  const [setupEncryption, setSetupEncryption] = useState<boolean>(false);
+  const formId = useId();
  return (
    <VStack
      as="form"
+      id={formId}
      space={3}
      alignItems="start"
-      className="pb-3"
      onSubmit={async (e) => {
        e.preventDefault();
        const workspaceId = await createGlobalModel({ model: "workspace", name });
@@ -89,9 +90,7 @@ export function CreateWorkspaceDialog({ hide }: Props) {
          title="Enable Encryption"
        />
      </div>
-      <Button type="submit" color="primary" className="w-full mt-3">
-        Create Workspace
-      </Button>
+      <DialogFooter actions={[{ label: "Create Workspace", color: "primary", form: formId }]} />
    </VStack>
  );
 }
@@ -1,6 +1,6 @@
 import type { Workspace } from "@yaakapp-internal/models";
 import { workspacesAtom } from "@yaakapp-internal/models";
-import { HStack, VStack } from "@yaakapp-internal/ui";
+import { VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useCallback, useMemo, useState } from "react";
 import slugify from "slugify";
@@ -8,9 +8,9 @@ import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { pluralizeCount } from "../lib/pluralize";
 import { rpc } from "../lib/rpc";
 import { CommercialUseBanner } from "./CommercialUseBanner";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
 import { DetailsBanner } from "./core/DetailsBanner";
+import { DialogFooter } from "./core/Dialog";
 import { Link } from "./core/Link";
 import { platform } from "@yaakapp-internal/platform";

@@ -87,8 +87,8 @@ function ExportDataDialogContent({
  const numSelected = Object.values(selectedWorkspaces).filter(Boolean).length;
  const noneSelected = numSelected === 0;
  return (
-    <div className="h-full w-full grid grid-rows-[minmax(0,1fr)_auto] overflow-hidden rounded-b-lg">
-      <VStack space={3} className="overflow-auto px-5 pb-6">
+    <>
+      <VStack space={3} className="pb-4">
        <CommercialUseBanner source="data-export" title="Exporting work data?" />

        <table className="w-full mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
@@ -141,29 +141,22 @@ function ExportDataDialogContent({
          />
        </DetailsBanner>
      </VStack>
-      <footer className="px-5 grid grid-cols-[1fr_auto] items-center bg-surface py-3 border-t border-border-subtle">
-        <div>
+      <DialogFooter
+        leftSlot={
          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtlest">
            Create Run Button
          </Link>
-        </div>
-        <HStack space={2} justifyContent="end">
-          <Button size="sm" className="focus" variant="border" onClick={onHide}>
-            Cancel
-          </Button>
-          <Button
-            size="sm"
-            type="submit"
-            className="focus"
-            color="primary"
-            disabled={noneSelected}
-            onClick={() => handleExport()}
-          >
-            Export{" "}
-            {pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}
-          </Button>
-        </HStack>
-      </footer>
-    </div>
+        }
+        actions={[
+          { label: "Cancel", onClick: onHide },
+          {
+            label: `Export ${pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}`,
+            color: "primary",
+            disabled: noneSelected,
+            onClick: () => handleExport(),
+          },
+        ]}
+      />
+    </>
  );
 }
@@ -239,6 +239,7 @@ export function GrpcEditor({
                showDialog({
                  title: "Configure Schema",
                  size: "md",
+                  className: "h-[30rem]",
                  id: "grpc-configure-schema",
                  render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
                });
@@ -1,11 +1,11 @@
 import type { GrpcRequest } from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Banner, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useActiveRequest } from "../hooks/useActiveRequest";
 import { useGrpc } from "../hooks/useGrpc";
 import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
 import { pluralizeCount } from "../lib/pluralize";
-import { Button } from "./core/Button";
-import { IconButton } from "./core/IconButton";
+import { DialogFooter } from "./core/Dialog";
+import { PathList } from "./core/PathList";
 import { Link } from "./core/Link";
 import { platform } from "@yaakapp-internal/platform";

@@ -20,7 +20,10 @@ export function GrpcProtoSelectionDialog(props: Props) {
  return <GrpcProtoSelectionDialogWithRequest request={request} {...props} />;
 }

-function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: GrpcRequest }) {
+function GrpcProtoSelectionDialogWithRequest({
+  request,
+  onDone,
+}: Props & { request: GrpcRequest }) {
  const protoFilesKv = useGrpcProtoFiles(request.id);
  const protoFiles = protoFilesKv.value ?? [];
  const grpc = useGrpc(request, null, protoFiles);
@@ -38,54 +41,8 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
  }

  return (
-    <VStack className="flex-col-reverse mb-3" space={3}>
-      {/* Buttons on top so they get focus first */}
-      <HStack space={2} justifyContent="start" className="flex-row-reverse mt-3">
-        <Button
-          color="primary"
-          variant="border"
-          onClick={async () => {
-            const selected = await platform.dialog.open({
-              title: "Select Proto Files",
-              multiple: true,
-              filters: [{ name: "Proto Files", extensions: ["proto"] }],
-            });
-            if (selected == null) return;
-
-            const newFiles = selected.filter((p) => !protoFiles.includes(p));
-            await protoFilesKv.set([...protoFiles, ...newFiles]);
-            await grpc.reflect.refetch();
-          }}
-        >
-          Add Proto Files
-        </Button>
-        <Button
-          variant="border"
-          color="primary"
-          onClick={async () => {
-            const selected = await platform.dialog.open({
-              title: "Select Proto Directory",
-              directory: true,
-            });
-            if (selected == null) return;
-
-            await protoFilesKv.set([...protoFiles.filter((f) => f !== selected), selected]);
-            await grpc.reflect.refetch();
-          }}
-        >
-          Add Import Folders
-        </Button>
-        <Button
-          isLoading={grpc.reflect.isFetching}
-          disabled={grpc.reflect.isFetching}
-          variant="border"
-          color="secondary"
-          onClick={() => grpc.reflect.refetch()}
-        >
-          Refresh Schema
-        </Button>
-      </HStack>
-      <VStack space={5}>
+    <>
+      <VStack space={5} className="pb-4">
        {reflectError && (
          <Banner color="warning">
            <h1 className="font-bold">
@@ -128,46 +85,47 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
          </Banner>
        )}

-        {protoFiles.length > 0 && (
-          <table className="w-full divide-y divide-surface-highlight">
-            <thead>
-              <tr>
-                <th className="text-text-subtlest" colSpan={3}>
-                  Added File Paths
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-surface-highlight">
-              {protoFiles.map((f, i) => {
-                const parts = f.split("/");
-                // oxlint-disable-next-line no-array-index-key -- none
-                return (
-                  <tr key={f + i} className="group">
-                    <td>
-                      <Icon icon={f.endsWith(".proto") ? "file_code" : "folder_code"} />
-                    </td>
-                    <td className="pl-1 font-mono text-sm" title={f}>
-                      {parts.length > 3 && ".../"}
-                      {parts.slice(-3).join("/")}
-                    </td>
-                    <td className="w-0 py-0.5">
-                      <IconButton
-                        title="Remove file"
-                        variant="border"
-                        size="xs"
-                        icon="trash"
-                        className="my-0.5 ml-auto opacity-50 transition-opacity group-hover:opacity-100"
-                        onClick={async () => {
-                          await protoFilesKv.set(protoFiles.filter((p) => p !== f));
-                        }}
-                      />
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        )}
+        <PathList
+          items={protoFiles.map((path) => ({
+            path,
+            icon: path.endsWith(".proto") ? "file_code" : "folder_code",
+          }))}
+          onRemove={async (path) => {
+            await protoFilesKv.set(protoFiles.filter((p) => p !== path));
+            await grpc.reflect.refetch();
+          }}
+          addLabel="Add proto files or an import folder"
+          addItems={[
+            {
+              label: "Proto files",
+              icon: "file_code",
+              onSelect: async () => {
+                const selected = await platform.dialog.open({
+                  title: "Select Proto Files",
+                  multiple: true,
+                  filters: [{ name: "Proto Files", extensions: ["proto"] }],
+                });
+                if (selected == null) return;
+                const newFiles = selected.filter((p) => !protoFiles.includes(p));
+                await protoFilesKv.set([...protoFiles, ...newFiles]);
+                await grpc.reflect.refetch();
+              },
+            },
+            {
+              label: "Import folder",
+              icon: "folder_code",
+              onSelect: async () => {
+                const selected = await platform.dialog.open({
+                  title: "Select Proto Directory",
+                  directory: true,
+                });
+                if (selected == null) return;
+                await protoFilesKv.set([...protoFiles.filter((f) => f !== selected), selected]);
+                await grpc.reflect.refetch();
+              },
+            },
+          ]}
+        />
        {reflectionUnimplemented && protoFiles.length === 0 && (
          <Banner>
            <InlineCode>{request.url}</InlineCode> doesn&apos;t implement{" "}
@@ -178,6 +136,17 @@ function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: Grp
          </Banner>
        )}
      </VStack>
-    </VStack>
+      <DialogFooter
+        actions={[
+          {
+            label: "Refresh Schema",
+            isLoading: grpc.reflect.isFetching,
+            disabled: grpc.reflect.isFetching,
+            onClick: () => grpc.reflect.refetch(),
+          },
+          { label: "Done", color: "primary", onClick: onDone },
+        ]}
+      />
+    </>
  );
 }
@@ -1,33 +1,36 @@
 import {
-  type Folder,
  type ImportDestination,
  type ImportPlan,
  type ImportPlanItem,
  type ImportSource,
  type Workspace,
 } from "@yaakapp-internal/models";
-import { Banner, HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
-import { platform } from "@yaakapp-internal/platform";
+import { Banner, FormattedError, HStack, Icon, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { formatDistanceToNowStrict } from "date-fns";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { errorMessage } from "../lib/errorMessage";
 import { pluralize } from "../lib/pluralize";
 import { CommercialUseBanner } from "./CommercialUseBanner";
-import { Button } from "./core/Button";
-import { Checkbox } from "./core/Checkbox";
+import {
+  ImportSourceList,
+  type ImportSourceDetection,
+  type ImportSourcePath,
+  InlineButton,
+  toSourcePath,
+} from "./ImportSourceList";
 import type { CheckboxTreeNode } from "./core/CheckboxTree";
 import { CheckboxTree } from "./core/CheckboxTree";
+import { Chip } from "./core/Chip";
+import { DialogFooter } from "./core/Dialog";
 import { IconTooltip } from "./core/IconTooltip";
-import { PlainInput } from "./core/PlainInput";
 import { Select } from "./core/Select";
 import { SegmentedControl } from "./core/SegmentedControl";

 interface Props {
  currentWorkspace: Workspace | null;
  workspaces: Workspace[];
-  selectedFolder: Folder | null;
-  planFile: (filePath: string, destination: ImportDestination) => Promise<ImportPlan>;
-  planUrl: (url: string, destination: ImportDestination) => Promise<ImportPlan>;
+  planSources: (sources: ImportSourcePath[], destination: ImportDestination) => Promise<ImportPlan>;
+  detectSource: (source: ImportSourcePath) => Promise<string>;
  listSources: (workspaceId: string) => Promise<ImportSource[]>;
  findSourcesForOrigin: (args: { filePath?: string; url?: string }) => Promise<ImportSource[]>;
  commit: (plan: ImportPlan) => Promise<void>;
@@ -35,25 +38,6 @@ interface Props {
  onError: (err: unknown) => void;
 }

-/**
- * An absolute or relative path is unambiguously a file. Everything else is treated as a URL, so a
- * bare host like `example.com/openapi.json` still works (the backend defaults it to https).
- */
-function isFilePath(value: string): boolean {
-  return (
-    value.startsWith("/") ||
-    value.startsWith("./") ||
-    value.startsWith("../") ||
-    value.startsWith("~/") ||
-    value.startsWith("\\\\") ||
-    /^[a-zA-Z]:[\\/]/.test(value)
-  );
-}
-
-function fileName(path: string): string {
-  return path.split(/[/\\]/).at(-1) || path;
-}
-
 /**
 * Loads the current workspace's linked sources before rendering the dialog, so the inner
 * component can construct its initial state (prefilled path, destination) in one pass instead of
@@ -82,30 +66,19 @@ export function ImportDataDialog(props: Props) {
  return <LoadedImportDataDialog {...props} initialSources={initialSources} />;
 }

-function latestSource(sources: ImportSource[]): ImportSource | null {
-  return sources.reduce<ImportSource | null>(
-    (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
-    null,
-  );
-}
-
 function LoadedImportDataDialog({
  currentWorkspace,
  workspaces,
-  selectedFolder,
-  planFile,
-  planUrl,
-  listSources,
+  planSources,
+  detectSource,
  findSourcesForOrigin,
  commit,
  cancel,
  onError,
  initialSources,
 }: Props & { initialSources: ImportSource[] }) {
-  // A workspace with a linked source is probably being re-imported, so start from that source
-  const prefill = latestSource(initialSources);
-
  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [sourceError, setSourceError] = useState<unknown>(null);
  const [plan, setPlan] = useState<ImportPlan | null>(null);
  const [items, setItems] = useState<ImportPlanItem[]>([]);
  // null means no explicit choice yet, so the default below applies
@@ -113,65 +86,82 @@ function LoadedImportDataDialog({
    null,
  );
  const [otherWorkspaceId, setOtherWorkspaceId] = useState<string | null>(null);
-  const [targetSelectedFolder, setTargetSelectedFolder] = useState(selectedFolder != null);
-  const [linkedSources, setLinkedSources] = useState<ImportSource[]>(
-    prefill != null ? initialSources : [],
+  const [originSources, setOriginSources] = useState<ImportSource[]>(initialSources);
+  const initialPaths = useMemo(
+    () => [...new Set(initialSources.map((source) => source.origin))].map(toSourcePath),
+    [initialSources],
  );
-  const [originSources, setOriginSources] = useState<ImportSource[]>(
-    prefill != null ? [prefill] : [],
+  const [sources, setSources] = useState<ImportSourcePath[]>(initialPaths);
+  const knownPaths = useRef(new Set(initialPaths.map((source) => source.path)));
+  const [detections, setDetections] = useState<Record<string, ImportSourceDetection>>({});
+  const detect = useCallback(
+    (added: ImportSourcePath[]) => {
+      setDetections((prev) => ({
+        ...prev,
+        ...Object.fromEntries(added.map((s) => [s.path, { status: "loading" as const }])),
+      }));
+      for (const source of added) {
+        const settle = (detection: ImportSourceDetection) =>
+          setDetections((prev) =>
+            source.path in prev ? { ...prev, [source.path]: detection } : prev,
+          );
+        detectSource(source).then(
+          (importer) => settle({ status: "ok", importer }),
+          (err) => settle({ status: "error", message: errorMessage(err) }),
+        );
+      }
+    },
+    [detectSource],
  );
-  // A file path or a URL. Both inputs write here, so there is only ever one thing to import
-  const [source, setSource] = useState<string | null>(prefill?.origin ?? null);
-  const [forceUpdateKey, setForceUpdateKey] = useState<number>(0);
-  const [isHovering, setIsHovering] = useState<boolean>(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const trimmedSource = source?.trim() ?? "";
-  const filePath = isFilePath(trimmedSource) ? trimmedSource : null;
+  const allDetected = sources.every((source) => detections[source.path]?.status === "ok");
+  useEffect(() => {
+    detect(initialPaths);
+  }, [detect, initialPaths]);

-  const selectSource = (value: string) => {
-    setSource(value);
-    // Remount the input so it shows the path of the newly-picked file
-    setForceUpdateKey((k) => k + 1);
+  const addSources = useCallback(
+    (added: ImportSourcePath[]) => {
+      setSourceError(null);
+      const fresh = added.filter(({ path }) => {
+        if (knownPaths.current.has(path)) return false;
+        knownPaths.current.add(path);
+        return true;
+      });
+      if (fresh.length === 0) return;
+      setSources((existing) => [...existing, ...fresh]);
+      detect(fresh);
+    },
+    [detect],
+  );
+  const removeSource = (path: string) => {
+    setSourceError(null);
+    knownPaths.current.delete(path);
+    setSources((current) => current.filter((source) => source.path !== path));
+    setDetections(({ [path]: _removed, ...rest }) => rest);
  };

-  // Accept a file dropped anywhere on the dialog, the way SelectFile does for its button
  useEffect(() => {
-    return platform.window.onDragDrop((event) => {
-      if (event.type === "over") {
-        const p = event.position;
-        const r = ref.current?.getBoundingClientRect();
-        if (r == null) return;
-        setIsHovering(p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom);
-      } else if (event.type === "drop" && isHovering) {
-        const p = event.paths[0];
-        if (p) selectSource(p);
-        setIsHovering(false);
-      } else {
-        setIsHovering(false);
-      }
-    });
-  }, [isHovering, setSource]);
-
-  useEffect(() => {
-    if (trimmedSource === "") {
+    let cancelled = false;
+    if (sources.length === 0) {
      setOriginSources([]);
      return;
    }
-    let cancelled = false;
-    const timeout = setTimeout(() => {
-      findSourcesForOrigin(filePath != null ? { filePath } : { url: trimmedSource })
-        .then((sources) => {
-          if (!cancelled) setOriginSources(sources);
-        })
-        .catch(() => setOriginSources([]));
-    }, 300);
+    Promise.all(
+      sources.map(({ path, kind }) =>
+        findSourcesForOrigin(kind === "url" ? { url: path } : { filePath: path }),
+      ),
+    )
+      .then((found) => {
+        if (!cancelled) setOriginSources(found.flat());
+      })
+      .catch(() => {
+        if (!cancelled) setOriginSources([]);
+      });
    return () => {
      cancelled = true;
-      clearTimeout(timeout);
    };
-  }, [trimmedSource, filePath, findSourcesForOrigin]);
+  }, [sources, findSourcesForOrigin]);

-  // The one workspace this file is linked to, if there is exactly one.
+  // The one workspace these sources are linked to, if there is exactly one.
  const linkedWorkspace = useMemo(() => {
    const ids = [...new Set(originSources.map((s) => s.workspaceId))];
    if (ids.length !== 1) return null;
@@ -193,32 +183,6 @@ function LoadedImportDataDialog({
        ? otherWorkspaceId
        : null;

-  useEffect(() => {
-    if (destinationWorkspaceId == null) {
-      setLinkedSources([]);
-      return;
-    }
-    let cancelled = false;
-    listSources(destinationWorkspaceId)
-      .then((sources) => {
-        if (!cancelled) setLinkedSources(sources);
-      })
-      .catch(() => setLinkedSources([]));
-    return () => {
-      cancelled = true;
-    };
-  }, [destinationWorkspaceId, listSources]);
-
-  const handleSelectFile = async () => {
-    const selected = await platform.dialog.open({ title: "Select File", multiple: false });
-    if (selected == null) return;
-    selectSource(selected);
-  };
-
-  // The selected folder belongs to the workspace being viewed, so it is only offerable when that
-  // is also the destination.
-  const canTargetSelectedFolder = selectedFolder != null && destinationKind === "current";
-
  const destination = (): ImportDestination => {
    if (destinationWorkspaceId == null) {
      return { type: "new_workspace" };
@@ -226,21 +190,18 @@ function LoadedImportDataDialog({
    return {
      type: "existing_workspace",
      workspaceId: destinationWorkspaceId,
-      folderId: canTargetSelectedFolder && targetSelectedFolder ? selectedFolder.id : undefined,
    };
  };

  const handlePreview = async () => {
    setIsLoading(true);
+    setSourceError(null);
    try {
-      const nextPlan =
-        filePath != null
-          ? await planFile(filePath, destination())
-          : await planUrl(trimmedSource, destination());
+      const nextPlan = await planSources(sources, destination());
      setPlan(nextPlan);
      setItems(nextPlan.items);
    } catch (err) {
-      onError(err);
+      setSourceError(err);
    } finally {
      setIsLoading(false);
    }
@@ -258,8 +219,6 @@ function LoadedImportDataDialog({
    }
  };

-  const itemTree = useMemo(() => buildItemTree(items), [items]);
-
  // A folder row's checkbox carries everything beneath it, deletions included — the row labels
  // say which of those are destructive. Checking anything also brings back the folders it needs
  // to live in.
@@ -313,196 +272,215 @@ function LoadedImportDataDialog({
      if (plan.destination.type === "new_workspace") {
        const names = plan.resources.workspaces.map((w) => w.name).filter((n) => n !== "");
        if (names.length === 0) return ["New workspace", "Untitled"];
-        return [pluralize("New workspace", names.length), names.join(", ")];
+        return [
+          names.length === 1 ? "New workspace" : `${names.length} new workspaces`,
+          names.join(", "),
+        ];
      }
-      const { workspaceId, folderId } = plan.destination;
+      const { workspaceId } = plan.destination;
      const name = workspaces.find((w) => w.id === workspaceId)?.name ?? "Unknown workspace";
-      return [
-        "Destination",
-        folderId != null && folderId === selectedFolder?.id
-          ? `${name} / ${selectedFolder.name}`
-          : name,
-      ];
+      return ["Destination", name];
    })();

    // The destination workspace roots the tree. It is not a plan item — commit always applies
    // it — so its checkbox only aggregates the subtree.
-    const workspaceRoot: CheckboxTreeNode<TreeRow> = (() => {
-      const planned = plan.resources.workspaces[0];
+    const workspaceRoots: CheckboxTreeNode<TreeRow>[] = (() => {
      const planDestination = plan.destination;
      const existing =
        planDestination.type === "existing_workspace"
          ? workspaces.find((w) => w.id === planDestination.workspaceId)
          : null;
-      return {
-        key: existing?.id ?? planned?.id ?? "workspace",
+      const destinations = existing ? [existing] : plan.resources.workspaces;
+      if (destinations.length === 1) {
+        const workspace = destinations[0]!;
+        return [
+          {
+            key: workspace.id,
+            data: {
+              kind: "destination",
+              label: workspace.name,
+              isNew: planDestination.type === "new_workspace",
+            },
+            children: buildItemTree(items),
+          },
+        ];
+      }
+      const workspaceById = new Map(
+        [
+          ...plan.resources.environments,
+          ...plan.resources.folders,
+          ...plan.resources.httpRequests,
+          ...plan.resources.grpcRequests,
+          ...plan.resources.websocketRequests,
+        ].map((resource) => [resource.id, resource.workspaceId]),
+      );
+      return destinations.map((workspace) => ({
+        key: workspace.id,
        data: {
          kind: "destination",
-          label: existing?.name ?? planned?.name ?? "New workspace",
+          label: workspace.name,
          isNew: planDestination.type === "new_workspace",
        },
-        children: itemTree,
-      };
+        children: buildItemTree(
+          items.filter((item) => workspaceById.get(item.modelId) === workspace.id),
+        ),
+      }));
    })();

    return (
-      <VStack space={4} className="pb-4">
-        <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
-          <PreviewRow label="Detected format" value={plan.importer} />
-          <PreviewRow label={destinationLabel} value={destinationValue} />
-        </div>
+      <>
+        <VStack space={4} className="pb-4">
+          <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
+            <PreviewRow label="Detected format" value={plan.importer} />
+            <PreviewRow label={destinationLabel} value={destinationValue} />
+          </div>

-        {plan.warnings.map((warning) => (
-          <Banner
-            key={`${warning.title}:${warning.detail}`}
-            color={warning.level === "warning" ? "warning" : "info"}
-            className="flex items-start gap-2.5"
-          >
-            <Icon
-              icon={warning.level === "warning" ? "alert_triangle" : "info"}
-              size="sm"
-              className="mt-0.5"
-            />
-            <div className="min-w-0">
-              <div className="text-sm font-medium">{warning.title}</div>
-              <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+          {plan.warnings
+            .filter(
+              (warning, index, warnings) =>
+                warnings.findIndex(
+                  (other) =>
+                    other.title === warning.title &&
+                    other.detail === warning.detail &&
+                    other.level === warning.level,
+                ) === index,
+            )
+            .map((warning) => (
+              <Banner
+                key={`${warning.level}:${warning.title}:${warning.detail}`}
+                color={warning.level === "warning" ? "warning" : "info"}
+                className="flex items-start gap-2.5"
+              >
+                <Icon
+                  icon={warning.level === "warning" ? "alert_triangle" : "info"}
+                  size="sm"
+                  className="mt-0.5"
+                />
+                <div className="min-w-0">
+                  <div className="text-sm font-medium">{warning.title}</div>
+                  <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+                </div>
+              </Banner>
+            ))}
+
+          {workspaceRoots.map((root) => (
+            <div key={root.key} className="rounded-lg border border-border-subtle px-3 py-2">
+              <CheckboxTree
+                node={root}
+                checked={nodeCheckedStatus}
+                onCheck={toggleNode}
+                isCheckboxDisabled={(n) => disabledIds.has(n.key)}
+                isCollapsedByDefault={(n) =>
+                  (n.data.kind === "destination" && workspaceRoots.length > 1) ||
+                  (n.data.kind === "item" && n.data.item.action === "ignored")
+                }
+                isRelevant={(n) =>
+                  n.data.kind === "destination" ||
+                  (n.data.kind === "item" && n.data.item.action !== "unchanged")
+                }
+                renderRow={(n) => (
+                  <ImportTreeRow row={n.data} onResolveConflict={resolveConflict} />
+                )}
+              />
            </div>
-          </Banner>
-        ))}
-
-        <div className="rounded-lg border border-border-subtle px-3 py-2 overflow-y-auto max-h-[40vh]">
-          <CheckboxTree
-            node={workspaceRoot}
-            checked={nodeCheckedStatus}
-            onCheck={toggleNode}
-            isCheckboxDisabled={(n) => disabledIds.has(n.key)}
-            isCollapsedByDefault={(n) => n.data.kind === "item" && n.data.item.action === "ignored"}
-            isRelevant={(n) =>
-              n.data.kind === "destination" ||
-              (n.data.kind === "item" && n.data.item.action !== "unchanged")
-            }
-            renderRow={(n) => <ImportTreeRow row={n.data} onResolveConflict={resolveConflict} />}
-          />
-        </div>
-
-        <HStack space={2} alignItems="center" className="mt-3">
-          {footerNote !== "" && <div className="text-xs text-text-subtle">{footerNote}</div>}
-          <Button
-            className="ml-auto"
-            color="secondary"
-            variant="border"
-            disabled={isLoading}
-            onClick={() => {
-              setPlan(null);
-              setItems([]);
-            }}
-          >
-            Back
-          </Button>
-          <Button color="primary" isLoading={isLoading} onClick={handleCommit}>
-            {isLoading
-              ? "Importing"
-              : changeCount > 0
-                ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
-                : "Done"}
-          </Button>
-        </HStack>
-      </VStack>
+          ))}
+        </VStack>
+        <DialogFooter
+          leftSlot={
+            footerNote !== "" ? (
+              <div className="text-xs text-text-subtle">{footerNote}</div>
+            ) : undefined
+          }
+          actions={[
+            {
+              label: "Back",
+              disabled: isLoading,
+              onClick: () => {
+                setPlan(null);
+                setItems([]);
+              },
+            },
+            {
+              label: isLoading
+                ? "Importing"
+                : changeCount > 0
+                  ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
+                  : "Done",
+              color: "primary",
+              isLoading,
+              onClick: handleCommit,
+            },
+          ]}
+        />
+      </>
    );
  }

-  const lastImported =
-    originSources.find((s) => s.workspaceId === destinationWorkspaceId) ??
-    linkedSources.reduce<ImportSource | null>(
-      (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
-      null,
-    );
-
-  return (
-    <VStack ref={ref} space={4} className="pb-4">
-      <CommercialUseBanner source="data-import" title="Importing work data?" />
-
-      <button
-        type="button"
-        onClick={handleSelectFile}
-        className={classNames(
-          "w-full rounded-lg border border-dashed px-4 py-6",
-          "flex flex-col items-center gap-1 text-center",
-          isHovering
-            ? "border-notice bg-surface-highlight"
-            : "border-border hover:border-text-subtle",
-        )}
-      >
-        <Icon icon="folder_input" className="text-text-subtlest w-8! h-8! mb-2" />
-        {/* Fixed height so the region doesn't resize between the empty and selected states */}
-        <div className="h-6 w-full flex items-center justify-center">
-          {filePath == null ? (
-            <div className="text-text">
-              <strong className="font-semibold">Choose a file</strong> or drag it here
-            </div>
-          ) : (
-            <div className="text-text font-mono text-xs max-w-full truncate" title={filePath}>
-              {fileName(filePath)}
-            </div>
-          )}
-        </div>
-        <div className="text-xs text-text-subtlest">
-          Supports OpenAPI, Swagger, Postman, Insomnia, curl, and Yaak exports
-        </div>
-      </button>
-
-      <PlainInput
-        label="Or enter a file path or URL"
+  const destinationPicker = (
+    <HStack
+      space={2}
+      alignItems="center"
+      className={classNames(workspaces.length === 0 && "hidden")}
+    >
+      <Select
+        name="import-destination-kind"
+        label="Import into"
+        labelPosition="left"
        size="sm"
-        placeholder="https://example.com/openapi.json"
-        defaultValue={source ?? ""}
-        forceUpdateKey={String(forceUpdateKey)}
-        onChange={setSource}
+        value={destinationKind}
+        onChange={setDestinationChoice}
+        options={[
+          { value: "new", label: "New Workspace" },
+          ...(currentWorkspace != null
+            ? [{ value: "current" as const, label: "Current Workspace" }]
+            : []),
+          { value: "other", label: "Other Workspace" },
+        ]}
      />
-
-      <VStack space={2} className={classNames(workspaces.length === 0 && "hidden")}>
+      {destinationKind === "other" && (
        <Select
-          name="import-destination-kind"
-          label="Import location"
+          name="import-destination-workspace"
+          label="Workspace"
+          hideLabel
          size="sm"
-          value={destinationKind}
-          onChange={setDestinationChoice}
+          value={otherWorkspaceId ?? ""}
+          onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
+          filterable
          options={[
-            { value: "new", label: "New Workspace" },
-            ...(currentWorkspace != null
-              ? [{ value: "current" as const, label: "Current Workspace" }]
-              : []),
-            { value: "other", label: "Other Workspace" },
+            { value: "", label: "Select a workspace" },
+            ...workspaces
+              .filter((w) => w.id !== currentWorkspace?.id)
+              .map((w) => ({ value: w.id, label: w.name })),
          ]}
        />
-        {destinationKind === "other" && (
-          <Select
-            name="import-destination-workspace"
-            label="Workspace"
-            hideLabel
-            size="sm"
-            value={otherWorkspaceId ?? ""}
-            onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
-            filterable
-            options={[
-              { value: "", label: "Select a workspace" },
-              ...workspaces
-                .filter((w) => w.id !== currentWorkspace?.id)
-                .map((w) => ({ value: w.id, label: w.name })),
-            ]}
-          />
+      )}
+    </HStack>
+  );
+
+  return (
+    <>
+      <VStack space={4} className="h-full pb-4">
+        <CommercialUseBanner source="data-import" title="Importing work data?" />
+
+        <ImportSourceList
+          sources={sources}
+          detections={detections}
+          disabled={isLoading}
+          onAdd={addSources}
+          onRemove={removeSource}
+          onError={setSourceError}
+        />
+
+        {sourceError != null && (
+          <Banner color="warning">
+            <FormattedError>{errorMessage(sourceError)}</FormattedError>
+          </Banner>
        )}
-        {lastImported != null && destinationWorkspaceId != null ? (
+
+        {linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId && (
          <div className="text-xs text-text-subtle">
-            Last imported from {lastImported.originLabel} ·{" "}
-            {formatDistanceToNowStrict(`${lastImported.lastImportedAt}Z`, { addSuffix: true })}
-          </div>
-        ) : linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId ? (
-          <div className="text-xs text-text-subtle">
-            This file was last imported into{" "}
-            <button
-              type="button"
-              className="underline hocus:text-text"
+            {sources.length === 1 ? "This source was" : "These sources were"} last imported into{" "}
+            <InlineButton
              onClick={() => {
                if (linkedWorkspace.id === currentWorkspace?.id) {
                  setDestinationChoice("current");
@@ -513,36 +491,28 @@ function LoadedImportDataDialog({
              }}
            >
              {linkedWorkspace.name}
-            </button>
+            </InlineButton>
          </div>
-        ) : null}
-        {canTargetSelectedFolder && (
-          <Checkbox
-            checked={targetSelectedFolder}
-            title={`Place root resources in selected folder “${selectedFolder.name}”`}
-            onChange={setTargetSelectedFolder}
-          />
        )}
      </VStack>
-
-      <HStack space={2} justifyContent="end">
-        <Button color="secondary" variant="border" disabled={isLoading} onClick={cancel}>
-          Cancel
-        </Button>
-        <Button
-          color="primary"
-          disabled={
-            trimmedSource === "" ||
-            isLoading ||
-            (destinationKind === "other" && otherWorkspaceId == null)
-          }
-          isLoading={isLoading}
-          onClick={handlePreview}
-        >
-          {isLoading ? "Analyzing" : "Preview Import"}
-        </Button>
-      </HStack>
-    </VStack>
+      <DialogFooter
+        leftSlot={destinationPicker}
+        actions={[
+          { label: "Cancel", disabled: isLoading, onClick: cancel },
+          {
+            label: isLoading ? "Analyzing" : "Preview Import",
+            color: "primary",
+            disabled:
+              sources.length === 0 ||
+              !allDetected ||
+              isLoading ||
+              (destinationKind === "other" && otherWorkspaceId == null),
+            isLoading,
+            onClick: handlePreview,
+          },
+        ]}
+      />
+    </>
  );
 }

@@ -556,10 +526,12 @@ function ImportTreeRow({
  if (row.kind !== "item") {
    return (
      <>
-        <Icon color="secondary" icon={row.kind === "destination" ? "house" : row.icon} />
+        {row.kind === "destination" && (
+          <Icon icon="box" size="sm" className="shrink-0 text-text-subtle" />
+        )}
        <div className="truncate flex-1">{row.label}</div>
        {row.kind === "destination" && row.isNew && (
-          <ActionChip label="new" help="Created by this import" className="text-success" />
+          <ActionChip label="new" help="Created by this import" color="success" />
        )}
      </>
    );
@@ -569,11 +541,6 @@ function ImportTreeRow({
  const label = actionLabel(item);
  return (
    <>
-      {item.model === "folder" || item.model === "environment" ? (
-        <Icon color="secondary" icon={item.model === "folder" ? "folder" : "variable"} />
-      ) : (
-        <span aria-hidden className="w-4" />
-      )}
      <div className="truncate flex-1">{item.name}</div>
      {item.action === "conflict" ? (
        <div className="shrink-0">
@@ -593,17 +560,7 @@ function ImportTreeRow({
        </div>
      ) : (
        label != null && (
-          <ActionChip
-            label={label}
-            help={actionHelp(item)}
-            className={classNames(
-              item.action === "create" && "text-success",
-              item.action === "update" && "text-info",
-              item.action === "delete" && "text-danger",
-              item.action === "keep_local" && item.selected && "text-warning",
-              item.action === "ignored" && "text-text-subtlest",
-            )}
-          />
+          <ActionChip label={label} help={actionHelp(item)} color={actionColor(item)} />
        )
      )}
    </>
@@ -613,26 +570,37 @@ function ImportTreeRow({
 function ActionChip({
  label,
  help,
-  className,
+  color,
 }: {
  label: string;
  help: string | null;
-  className?: string;
+  color: ComponentProps<typeof Chip>["color"];
 }) {
  return (
-    <InlineCode
-      className={classNames(
-        "py-0 bg-transparent w-32 shrink-0 whitespace-nowrap text-xs",
-        "inline-flex items-center justify-center gap-1.5",
-        className,
-      )}
-    >
+    <Chip color={color}>
      {label}
      {help != null && <IconTooltip content={help} iconSize="xs" />}
-    </InlineCode>
+    </Chip>
  );
 }

+function actionColor(item: ImportPlanItem): ComponentProps<typeof Chip>["color"] {
+  switch (item.action) {
+    case "create":
+      return "success";
+    case "update":
+      return "info";
+    case "delete":
+      return "danger";
+    case "keep_local":
+      return item.selected ? "warning" : "default";
+    case "unchanged":
+    case "conflict":
+    case "ignored":
+      return "default";
+  }
+}
+
 function actionLabel(item: ImportPlanItem): string | null {
  switch (item.action) {
    case "create":
@@ -701,7 +669,7 @@ function ancestorsOf(item: ImportPlanItem, byId: Map<string, ImportPlanItem>): I
 */
 type TreeRow =
  | { kind: "destination"; label: string; isNew: boolean }
-  | { kind: "group"; label: string; icon: IconProps["icon"] }
+  | { kind: "group"; label: string }
  | { kind: "item"; item: ImportPlanItem };

 function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
@@ -743,7 +711,7 @@ function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
  return [
    {
      key: "group:environments",
-      data: { kind: "group", label: "Variables", icon: "variable" },
+      data: { kind: "group", label: "Variables" },
      children: environments.map((e) => toNode(e, new Set())),
    },
    ...nodes,
@@ -0,0 +1,271 @@
+import { platform } from "@yaakapp-internal/platform";
+import { Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { PathList, splitPath } from "./core/PathList";
+import { PlainInput } from "./core/PlainInput";
+
+export interface ImportSourcePath {
+  path: string;
+  kind?: "file" | "folder" | "url";
+}
+
+export type ImportSourceDetection =
+  | { status: "loading" }
+  | { status: "ok"; importer: string }
+  | { status: "error"; message: string };
+
+interface Props {
+  sources: ImportSourcePath[];
+  detections: Record<string, ImportSourceDetection>;
+  disabled?: boolean;
+  onAdd: (sources: ImportSourcePath[]) => void;
+  onRemove: (path: string) => void;
+  onError: (err: unknown) => void;
+}
+
+/** A bare hostname is a URL; local paths need an absolute or explicit relative prefix. */
+export function isImportFilePath(value: string): boolean {
+  return (
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("~/") ||
+    value.startsWith("\\\\") ||
+    /^[a-zA-Z]:[\\/]/.test(value)
+  );
+}
+
+/** A typed or prefilled path is a URL unless it looks like a local path; kind is left for the host */
+export function toSourcePath(path: string): ImportSourcePath {
+  return { path, kind: isImportFilePath(path) ? undefined : "url" };
+}
+
+export function ImportSourceList({
+  sources,
+  detections,
+  disabled,
+  onAdd,
+  onRemove,
+  onError,
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const [pathInput, setPathInput] = useState("");
+  const [showPathInput, setShowPathInput] = useState(false);
+  const trimmedPath = pathInput.trim();
+
+  const closePathInput = () => {
+    setPathInput("");
+    setShowPathInput(false);
+  };
+
+  const addPath = () => {
+    if (!trimmedPath || disabled) return;
+    onAdd([toSourcePath(trimmedPath)]);
+    closePathInput();
+  };
+
+  useEffect(() => {
+    if (disabled) return;
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "leave") {
+        setIsHovering(false);
+        return;
+      }
+      const rect = ref.current?.getBoundingClientRect();
+      const { x, y } = event.position;
+      const isOver =
+        rect != null && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+      if (event.type === "drop") {
+        if (isOver) onAdd(event.paths.map((path) => ({ path })));
+        setIsHovering(false);
+      } else {
+        setIsHovering(isOver);
+      }
+    });
+  }, [disabled, onAdd]);
+
+  const pick = async (directory: boolean) => {
+    try {
+      const selected = await platform.dialog.open({
+        title: directory ? "Select Import Folder" : "Select Import Files",
+        multiple: true,
+        directory,
+      });
+      if (selected == null) return;
+      onAdd(selected.map((path) => ({ path, kind: directory ? "folder" : "file" })));
+    } catch (err) {
+      onError(err);
+    }
+  };
+
+  const handlePathKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      addPath();
+    } else if (event.key === "Escape") {
+      event.stopPropagation();
+      closePathInput();
+    }
+  };
+
+  const pathInputEl = (
+    <PlainInput
+      label="URL or file path"
+      hideLabel
+      size="sm"
+      autoFocus
+      disabled={disabled}
+      placeholder="Paste a URL or a file path"
+      onChange={setPathInput}
+      onKeyDownCapture={handlePathKeyDown}
+      rightSlot={
+        <div className="flex items-center gap-1 my-1 mr-1">
+          {trimmedPath !== "" && (
+            <Button size="xs" variant="border" onClick={addPath}>
+              Add
+            </Button>
+          )}
+          <IconButton size="xs" icon="x" title="Cancel" onClick={closePathInput} />
+        </div>
+      }
+    />
+  );
+
+  if (sources.length === 0) {
+    return (
+      <div className="flex-1 flex flex-col gap-2">
+        <div
+          ref={ref}
+          className={classNames(
+            "flex-1 rounded-lg border min-h-28 flex flex-col items-center justify-center gap-2 px-4 py-5 text-center text-text-subtle",
+            isHovering ? "border-notice bg-surface-highlight" : "border-dashed border-border",
+          )}
+        >
+          <Icon icon="folder_input" className="text-text-subtlest w-8! h-8!" />
+          {isHovering ? (
+            <span>Drop to add</span>
+          ) : (
+            <span>
+              Choose{" "}
+              <InlineButton disabled={disabled} onClick={() => pick(false)}>
+                files
+              </InlineButton>
+              , a{" "}
+              <InlineButton disabled={disabled} onClick={() => pick(true)}>
+                folder
+              </InlineButton>
+              , or a{" "}
+              <InlineButton
+                disabled={disabled || showPathInput}
+                onClick={() => setShowPathInput(true)}
+              >
+                URL
+              </InlineButton>
+              , or drag them here
+            </span>
+          )}
+          <span className="text-xs text-text-subtlest">
+            Supports OpenAPI, Swagger, Postman, Insomnia, Bruno, curl, and Yaak exports
+          </span>
+        </div>
+        {showPathInput && pathInputEl}
+      </div>
+    );
+  }
+
+  return (
+    <PathList
+      ref={ref}
+      hovering={isHovering}
+      disabled={disabled}
+      onRemove={onRemove}
+      addLabel="Add files, a folder, or a URL"
+      addHint="or drop them here"
+      addItems={[
+        { label: "Files", icon: "file", onSelect: () => pick(false) },
+        { label: "Folder", icon: "folder", onSelect: () => pick(true) },
+        {
+          label: "URL or file path",
+          icon: "globe",
+          disabled: showPathInput,
+          onSelect: () => setShowPathInput(true),
+        },
+      ]}
+      items={sources.map((source) => {
+        const detection = detections[source.path];
+        return {
+          path: source.path,
+          icon: sourceIcon(source),
+          failed: detection?.status === "error",
+          subtitle: <DetectionSubtitle path={source.path} detection={detection} />,
+        };
+      })}
+    >
+      {showPathInput && pathInputEl}
+    </PathList>
+  );
+}
+
+function DetectionSubtitle({
+  path,
+  detection,
+}: {
+  path: string;
+  detection: ImportSourceDetection | undefined;
+}) {
+  const { parent } = splitPath(path);
+  if (detection?.status === "loading") {
+    return (
+      <>
+        <LoadingIcon size="xs" />
+        Detecting format
+      </>
+    );
+  }
+  if (detection?.status === "error") return detection.message;
+  return (
+    <>
+      {detection?.status === "ok" && <span>{detection.importer}</span>}
+      {detection?.status === "ok" && parent !== "" && <span>·</span>}
+      {parent !== "" && <span className="truncate font-mono">{parent}</span>}
+    </>
+  );
+}
+
+function sourceIcon({ kind }: ImportSourcePath) {
+  switch (kind) {
+    case "url":
+      return "globe";
+    case "folder":
+      return "folder";
+    case "file":
+      return "file";
+    case undefined:
+      return "import";
+  }
+}
+
+export function InlineButton({
+  children,
+  disabled,
+  onClick,
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className="text-text underline underline-offset-2 hocus:text-primary disabled:opacity-disabled"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
@@ -70,7 +70,7 @@ export function Onboarding() {
                color="primary"
                icon="folder_input"
                title="Migrate from another tool"
-                description="Postman, Insomnia, OpenAPI, or curl"
+                description="Postman, Insomnia, Bruno, OpenAPI, or curl"
                busy={busy === "import"}
                disabled={busy != null}
                onClick={choose("import", () => importData.mutateAsync())}
@@ -1,11 +1,11 @@
 import type { Workspace } from "@yaakapp-internal/models";
 import { patchModel, settingsAtom } from "@yaakapp-internal/models";
-import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useState } from "react";
 import { switchWorkspace } from "../commands/switchWorkspace";
-import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { DialogFooter } from "./core/Dialog";

 interface Props {
  hide: () => void;
@@ -16,45 +16,33 @@ export function SwitchWorkspaceDialog({ hide, workspace }: Props) {
  const settings = useAtomValue(settingsAtom);
  const [remember, setRemember] = useState<boolean>(false);

+  const open = async (inNewWindow: boolean) => {
+    hide();
+    switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow });
+    if (remember) {
+      await patchModel(settings, { openWorkspaceNewWindow: inNewWindow });
+    }
+  };
+
  return (
    <VStack space={3}>
      <p>
        Where would you like to open <InlineCode>{workspace.name}</InlineCode>?
      </p>
-      <HStack space={2} justifyContent="start" className="flex-row-reverse">
-        <Button
-          className="focus"
-          color="primary"
-          onClick={async () => {
-            hide();
-            switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow: false });
-            if (remember) {
-              await patchModel(settings, { openWorkspaceNewWindow: false });
-            }
-          }}
-        >
-          This Window
-        </Button>
-        <Button
-          className="focus"
-          color="secondary"
-          rightSlot={<Icon icon="external_link" />}
-          onClick={async () => {
-            hide();
-            switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow: true });
-            if (remember) {
-              await patchModel(settings, { openWorkspaceNewWindow: true });
-            }
-          }}
-        >
-          New Window
-        </Button>
-      </HStack>
      {settings && (
-        <HStack justifyContent="end">
-          <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
-        </HStack>
+        <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
      )}
+      <DialogFooter
+        inline
+        actions={[
+          {
+            label: "New Window",
+            rightSlot: <Icon icon="external_link" />,
+            onClick: () => open(true),
+          },
+          { label: "This Window", color: "primary", autoFocus: true, onClick: () => open(false) },
+        ]}
+      />
    </VStack>
  );
 }
@@ -11,7 +11,7 @@ import type { FnArg, Tokens } from "@yaakapp-internal/templates";
 import { parseTemplate } from "@yaakapp-internal/templates";
 import { HStack, InlineCode, LoadingIcon, useDebouncedValue } from "@yaakapp-internal/ui";
 import classNames from "classnames";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { useRenderTemplate } from "../hooks/useRenderTemplate";
 import { useTemplateFunctionConfig } from "../hooks/useTemplateFunctionConfig";
@@ -24,7 +24,7 @@ import { showDialog } from "../lib/dialog";
 import { convertTemplateToInsecure } from "../lib/encryption";
 import { jotaiStore } from "../lib/jotai";
 import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
-import { Button } from "./core/Button";
+import { DialogFooter } from "./core/Dialog";
 import { collectArgumentValues } from "./core/Editor/twig/util";
 import { IconButton } from "./core/IconButton";
 import { PlainInput } from "./core/PlainInput";
@@ -91,6 +91,7 @@ function InitializedTemplateFunctionDialog({
  const previewType = ogPreviewType == null ? "live" : ogPreviewType;
  const [showSecretsInPreview, toggleShowSecretsInPreview] = useToggle(false);
  const [argValues, setArgValues] = useState<Record<string, string | boolean>>(initialArgValues);
+  const formId = useId();

  const tokens: Tokens = useMemo(() => {
    const argTokens: FnArg[] = Object.keys(argValues).map((name) => ({
@@ -160,13 +161,14 @@ function InitializedTemplateFunctionDialog({

  return (
    <form
-      className="grid grid-rows-[minmax(0,1fr)_auto_auto] h-full max-h-[90vh]"
+      id={formId}
+      className="grid grid-rows-[minmax(0,1fr)_auto] h-full"
      onSubmit={(e) => {
        e.preventDefault();
        handleDone();
      }}
    >
-      <div className="overflow-y-auto h-full px-6">
+      <div className="overflow-y-auto h-full">
        {name === "secure" ? (
          <PlainInput
            required
@@ -188,75 +190,71 @@ function InitializedTemplateFunctionDialog({
          />
        )}
      </div>
-      <div className="px-6 border-t border-t-border pt-3 pb-6 bg-surface-highlight w-full flex flex-col gap-4">
-        {previewType !== "none" ? (
-          <div className="w-full grid grid-cols-1 grid-rows-[auto_auto]">
-            <HStack space={0.5}>
-              <HStack className="text-sm text-text-subtle" space={1.5}>
-                Rendered Preview
-                {rendered.isLoading && <LoadingIcon size="xs" />}
-              </HStack>
+      {previewType !== "none" ? (
+        <div className="w-full grid grid-cols-1 grid-rows-[auto_auto] border-t border-t-border pt-3">
+          <HStack space={0.5}>
+            <HStack className="text-sm text-text-subtle" space={1.5}>
+              Rendered Preview
+              {rendered.isLoading && <LoadingIcon size="xs" />}
+            </HStack>
+            <IconButton
+              size="xs"
+              iconSize="sm"
+              icon={showSecretsInPreview ? "lock" : "lock_open"}
+              title={showSecretsInPreview ? "Show preview" : "Hide preview"}
+              onClick={toggleShowSecretsInPreview}
+              className={classNames(
+                "ml-auto text-text-subtlest",
+                !dataContainsSecrets && "invisible",
+              )}
+            />
+          </HStack>
+          <div className="relative w-full max-h-40">
+            <InlineCode
+              className={classNames(
+                "block whitespace-pre-wrap select-text! cursor-text max-h-40 overflow-auto hide-scrollbars border-text-subtlest!",
+                tooLarge && "italic text-danger",
+              )}
+            >
+              {rendered.error || tagText.error ? (
+                <em className="text-danger">
+                  {`${rendered.error || tagText.error}`.replace(/^Render Error: /, "")}
+                </em>
+              ) : dataContainsSecrets && !showSecretsInPreview ? (
+                <span className="italic text-text-subtle">
+                  ------ sensitive values hidden ------
+                </span>
+              ) : tooLarge ? (
+                "too large to preview"
+              ) : (
+                rendered.data || <>&nbsp;</>
+              )}
+            </InlineCode>
+            <div className="absolute right-0.5 top-0 bottom-0 flex items-center">
              <IconButton
                size="xs"
-                iconSize="sm"
-                icon={showSecretsInPreview ? "lock" : "lock_open"}
-                title={showSecretsInPreview ? "Show preview" : "Hide preview"}
-                onClick={toggleShowSecretsInPreview}
-                className={classNames(
-                  "ml-auto text-text-subtlest",
-                  !dataContainsSecrets && "invisible",
-                )}
+                icon="refresh"
+                className="text-text-subtle"
+                title="Refresh preview"
+                spin={rendered.isPending}
+                onClick={() => {
+                  setRenderKey(new Date().toISOString());
+                }}
              />
-            </HStack>
-            <div className="relative w-full max-h-40">
-              <InlineCode
-                className={classNames(
-                  "block whitespace-pre-wrap select-text! cursor-text max-h-40 overflow-auto hide-scrollbars border-text-subtlest!",
-                  tooLarge && "italic text-danger",
-                )}
-              >
-                {rendered.error || tagText.error ? (
-                  <em className="text-danger">
-                    {`${rendered.error || tagText.error}`.replace(/^Render Error: /, "")}
-                  </em>
-                ) : dataContainsSecrets && !showSecretsInPreview ? (
-                  <span className="italic text-text-subtle">
-                    ------ sensitive values hidden ------
-                  </span>
-                ) : tooLarge ? (
-                  "too large to preview"
-                ) : (
-                  rendered.data || <>&nbsp;</>
-                )}
-              </InlineCode>
-              <div className="absolute right-0.5 top-0 bottom-0 flex items-center">
-                <IconButton
-                  size="xs"
-                  icon="refresh"
-                  className="text-text-subtle"
-                  title="Refresh preview"
-                  spin={rendered.isPending}
-                  onClick={() => {
-                    setRenderKey(new Date().toISOString());
-                  }}
-                />
-              </div>
            </div>
          </div>
-        ) : (
-          <span />
-        )}
-        <div className="flex justify-stretch w-full grow gap-2 *:flex-1">
-          {templateFunction.data.name === "secure" && (
-            <Button variant="border" color="secondary" onClick={setupOrConfigureEncryption}>
-              Reveal Encryption Key
-            </Button>
-          )}
-          <Button type="submit" color="primary">
-            Save
-          </Button>
        </div>
-      </div>
+      ) : (
+        <span />
+      )}
+      <DialogFooter
+        actions={[
+          ...(templateFunction.data.name === "secure"
+            ? [{ label: "Reveal Encryption Key", onClick: setupOrConfigureEncryption }]
+            : []),
+          { label: "Save", color: "primary", form: formId },
+        ]}
+      />
    </form>
  );
 }
@@ -272,7 +270,6 @@ TemplateFunctionDialog.show = (
    id: `template-function-${Math.random()}`, // Allow multiple at once
    size: "md",
    className: "h-240",
-    noPadding: true,
    title: <InlineCode>{fn.name}(…)</InlineCode>,
    description: fn.description,
    render: ({ hide }) => {
@@ -0,0 +1,32 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+interface Props {
+  color?: Color | "default";
+  className?: string;
+  children: ReactNode;
+}
+
+/** A small tinted label, like a Gmail or Trello label */
+export function Chip({ color = "default", className, children }: Props) {
+  return (
+    <span
+      className={classNames(
+        className,
+        "text-xs font-medium rounded-md px-2 py-0.5 bg-current/10 border border-current/10 shrink-0 whitespace-nowrap",
+        "inline-flex items-center gap-1",
+        color === "default" && "text-text-subtle",
+        color === "primary" && "text-primary",
+        color === "secondary" && "text-secondary",
+        color === "info" && "text-info",
+        color === "success" && "text-success",
+        color === "notice" && "text-notice",
+        color === "warning" && "text-warning",
+        color === "danger" && "text-danger",
+      )}
+    >
+      {children}
+    </span>
+  );
+}
@@ -1,9 +1,8 @@
 import type { Color } from "@yaakapp-internal/plugins";
-import { HStack } from "@yaakapp-internal/ui";
 import type { FormEvent } from "react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { CopyIconButton } from "../CopyIconButton";
-import { Button } from "./Button";
+import { DialogFooter } from "./Dialog";
 import { PlainInput } from "./PlainInput";

 export interface ConfirmProps {
@@ -22,6 +21,7 @@ export function Confirm({
  color = "primary",
 }: ConfirmProps) {
  const [confirm, setConfirm] = useState<string>("");
+  const formId = useId();
  const handleHide = () => {
    onResult(false);
    onHide();
@@ -38,7 +38,7 @@ export function Confirm({
  };

  return (
-    <form className="flex flex-col" onSubmit={handleSuccess}>
+    <form id={formId} className="flex flex-col" onSubmit={handleSuccess}>
      {requireTyping && (
        <PlainInput
          autoFocus
@@ -61,14 +61,19 @@ export function Confirm({
          }
        />
      )}
-      <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
-        <Button autoFocus={!requireTyping} type="submit" color={color} disabled={!didConfirm}>
-          {confirmText ?? "Confirm"}
-        </Button>
-        <Button onClick={handleHide} variant="border">
-          Cancel
-        </Button>
-      </HStack>
+      <DialogFooter
+        inline
+        actions={[
+          { label: "Cancel", onClick: handleHide },
+          {
+            label: confirmText ?? "Confirm",
+            color,
+            form: formId,
+            disabled: !didConfirm,
+            autoFocus: !requireTyping,
+          },
+        ]}
+      />
    </form>
  );
 }
@@ -1,9 +1,11 @@
 import type { DialogSize } from "@yaakapp-internal/plugins";
-import { Heading, Overlay } from "@yaakapp-internal/ui";
+import { Heading, HStack, Overlay } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import * as m from "motion/react-m";
 import type { ReactNode } from "react";
-import { useMemo } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button, type ButtonProps } from "./Button";
 import { IconButton } from "./IconButton";

 export interface DialogProps {
@@ -38,6 +40,7 @@ export function Dialog({
  vAlign = "center",
 }: DialogProps) {
  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+  const [footerEl, setFooterEl] = useState<HTMLDivElement | null>(null);
  const descriptionId = useMemo(
    () => (description ? Math.random().toString(36).slice(2) : undefined),
    [description],
@@ -71,7 +74,7 @@ export function Dialog({
          animate={{ top: 0, scale: 1 }}
          className={classNames(
            className,
-            "grid grid-rows-[auto_auto_minmax(0,1fr)]",
+            "grid grid-rows-[auto_auto_minmax(0,1fr)_auto]",
            "grid-cols-1", // must be here for inline code blocks to correctly break words
            "relative bg-surface pointer-events-auto",
            "rounded-lg",
@@ -108,9 +111,11 @@ export function Dialog({
              !noScroll && "overflow-y-auto overflow-x-hidden",
            )}
          >
-            {children}
+            <DialogFooterSlot.Provider value={footerEl}>{children}</DialogFooterSlot.Provider>
          </div>

+          <div ref={setFooterEl} className="contents" />
+
          {/*Put close at the end so that it's the last thing to be tabbed to*/}
          {!disableClose && !hideX && (
            <div className="ml-auto absolute right-1 top-1">
@@ -129,3 +134,67 @@ export function Dialog({
    </Overlay>
  );
 }
+
+const DialogFooterSlot = createContext<HTMLDivElement | null>(null);
+
+export interface DialogFooterAction {
+  label: string;
+  onClick?: () => void;
+  /** Submit the form with this id, which can be anywhere in the dialog body */
+  form?: string;
+  color?: ButtonProps["color"];
+  variant?: ButtonProps["variant"];
+  disabled?: boolean;
+  isLoading?: boolean;
+  autoFocus?: boolean;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+}
+
+/**
+ * The action row at the bottom of a dialog. Render it anywhere in the dialog's content and it is
+ * placed below the scrolling body, outside its padding. `inline` drops the divider for small
+ * dialogs whose body never scrolls.
+ */
+export function DialogFooter({
+  actions,
+  leftSlot,
+  inline,
+}: {
+  actions: DialogFooterAction[];
+  leftSlot?: ReactNode;
+  inline?: boolean;
+}) {
+  const slot = useContext(DialogFooterSlot);
+  const footer = (
+    <footer
+      className={classNames(
+        "px-6 flex items-center gap-3",
+        inline ? "pt-1 pb-4" : "py-3 border-t border-border-subtle",
+      )}
+    >
+      {leftSlot != null && <div className="mr-auto min-w-0">{leftSlot}</div>}
+      <HStack space={2} justifyContent="end" className="ml-auto shrink-0">
+        {actions.map((action, i) => (
+          <Button
+            // Labels change with state ("Cloning...", "Apply 3 Changes"), so they can't be keys
+            key={i}
+            type={action.form != null ? "submit" : "button"}
+            form={action.form}
+            color={action.color ?? "secondary"}
+            variant={action.variant ?? (action.color == null ? "border" : "solid")}
+            disabled={action.disabled}
+            isLoading={action.isLoading}
+            autoFocus={action.autoFocus}
+            leftSlot={action.leftSlot}
+            rightSlot={action.rightSlot}
+            onClick={action.onClick}
+          >
+            {action.label}
+          </Button>
+        ))}
+      </HStack>
+    </footer>
+  );
+  return slot == null ? footer : createPortal(footer, slot);
+}
@@ -0,0 +1,123 @@
+import { Icon, type IconProps } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { forwardRef, type ReactNode } from "react";
+import { Dropdown, type DropdownItem } from "./Dropdown";
+import { IconButton } from "./IconButton";
+
+export interface PathListItem {
+  path: string;
+  icon: IconProps["icon"];
+  /** Replaces the parent-path line under the name */
+  subtitle?: ReactNode;
+  failed?: boolean;
+}
+
+interface Props {
+  items: PathListItem[];
+  disabled?: boolean;
+  onRemove: (path: string) => void;
+  addItems: DropdownItem[];
+  addLabel: string;
+  addHint?: string;
+  hovering?: boolean;
+  /** Rows rendered between the items and the add row, such as an inline input */
+  children?: ReactNode;
+}
+
+/** Selected files, folders, or URLs as cards, with a dashed add row that opens a menu. */
+export const PathList = forwardRef<HTMLDivElement, Props>(function PathList(
+  { items, disabled, onRemove, addItems, addLabel, addHint, hovering, children },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "flex flex-col gap-1.5 rounded-lg -m-1.5 p-1.5",
+        hovering && "bg-surface-highlight",
+      )}
+    >
+      {items.map((item) => {
+        const { name, parent } = splitPath(item.path);
+        return (
+          <div
+            key={item.path}
+            className={classNames(
+              "flex items-center gap-3 rounded-md pl-3 pr-1.5 py-2",
+              item.failed ? "bg-danger/10" : "bg-surface-highlight/50",
+            )}
+          >
+            <Icon
+              icon={item.icon}
+              className={classNames("shrink-0", item.failed ? "text-danger" : "text-text-subtle")}
+            />
+            <div className="min-w-0 flex-1" title={item.path}>
+              <div className="truncate text-sm font-semibold">{name}</div>
+              <div
+                className={classNames(
+                  "flex items-center gap-1.5 truncate text-xs",
+                  item.failed ? "text-danger" : "text-text-subtlest",
+                )}
+              >
+                {item.subtitle ??
+                  (parent !== "" && <span className="truncate font-mono">{parent}</span>)}
+              </div>
+            </div>
+            <IconButton
+              size="xs"
+              icon="x"
+              title={`Remove ${name}`}
+              disabled={disabled}
+              className="shrink-0"
+              onClick={() => onRemove(item.path)}
+            />
+          </div>
+        );
+      })}
+      {children}
+      <Dropdown items={addItems}>
+        <button
+          type="button"
+          disabled={disabled}
+          className={classNames(
+            "h-sm w-full flex items-center gap-2 rounded-md border border-dashed px-3 text-sm text-text-subtle",
+            "hocus:border-border-focus hocus:text-text disabled:opacity-disabled",
+            hovering ? "border-notice" : "border-border",
+          )}
+        >
+          <Icon icon="plus" size="sm" className="text-text-subtlest" />
+          {hovering ? (
+            "Drop to add"
+          ) : (
+            <>
+              <span>{addLabel}</span>
+              {addHint != null && (
+                <span className="ml-auto text-xs text-text-subtlest">{addHint}</span>
+              )}
+            </>
+          )}
+        </button>
+      </Dropdown>
+    </div>
+  );
+});
+
+/** The last segment as the name and everything before it, shortened, as the parent. */
+export function splitPath(path: string): { name: string; parent: string } {
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(path)) {
+    try {
+      const url = new URL(path);
+      const segments = url.pathname.split("/").filter(Boolean);
+      const name = segments.at(-1) ?? url.host;
+      const parent = segments.length > 0 ? `${url.host}/${segments.slice(0, -1).join("/")}` : "";
+      return { name, parent: parent.replace(/\/$/, "") };
+    } catch {
+      return { name: path, parent: "" };
+    }
+  }
+  const parts = path.split(/[/\\]/).filter(Boolean);
+  const name = parts.at(-1) ?? path;
+  const dirs = parts.slice(0, -1);
+  const parent = dirs.length > 3 ? `…/${dirs.slice(-3).join("/")}` : dirs.join("/");
+  return { name, parent };
+}
@@ -1,10 +1,9 @@
 import type { FormInput, JsonPrimitive } from "@yaakapp-internal/plugins";
-import { HStack } from "@yaakapp-internal/ui";
 import type { FormEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { generateId } from "../../lib/generateId";
 import { DynamicForm } from "../DynamicForm";
-import { Button } from "./Button";
+import { DialogFooter } from "./Dialog";

 export interface PromptProps {
  inputs: FormInput[];
@@ -48,19 +47,15 @@ export function Prompt({
  const id = `prompt.form.${useRef(generateId()).current}`;

  return (
-    <form
-      className="grid grid-rows-[auto_auto] grid-cols-[minmax(0,1fr)] gap-4 mb-4"
-      onSubmit={handleSubmit}
-    >
+    <form id={id} className="grid grid-cols-[minmax(0,1fr)] mb-2" onSubmit={handleSubmit}>
      <DynamicForm inputs={inputs} onChange={setValue} data={value} stateKey={id} />
-      <HStack space={2} justifyContent="end">
-        <Button onClick={onCancel} variant="border" color="secondary">
-          {cancelText || "Cancel"}
-        </Button>
-        <Button type="submit" color="primary">
-          {confirmText || "Done"}
-        </Button>
-      </HStack>
+      <DialogFooter
+        inline
+        actions={[
+          { label: cancelText || "Cancel", onClick: onCancel },
+          { label: confirmText || "Done", color: "primary", form: id },
+        ]}
+      />
    </form>
  );
 }
@@ -1,43 +0,0 @@
-import { HStack, VStack } from "@yaakapp-internal/ui";
-import { useState } from "react";
-import { Button } from "../core/Button";
-import { Select } from "../core/Select";
-
-interface Props {
-  branches: string[];
-  onCancel: () => void;
-  onSelect: (branch: string) => void;
-  selectText: string;
-}
-
-export function BranchSelectionDialog({ branches, onCancel, onSelect, selectText }: Props) {
-  const [branch, setBranch] = useState<string>("__NONE__");
-  return (
-    <VStack
-      className="mb-4"
-      as="form"
-      space={4}
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSelect(branch);
-      }}
-    >
-      <Select
-        name="branch"
-        hideLabel
-        label="Branch"
-        value={branch}
-        options={branches.map((b) => ({ label: b, value: b }))}
-        onChange={setBranch}
-      />
-      <HStack space={2} justifyContent="end">
-        <Button onClick={onCancel} variant="border" color="secondary">
-          Cancel
-        </Button>
-        <Button type="submit" color="primary">
-          {selectText}
-        </Button>
-      </HStack>
-    </VStack>
-  );
-}
@@ -1,4 +1,4 @@
-import type { GitStatusEntry } from "@yaakapp-internal/git";
+import type { GitStatus, GitStatusEntry } from "@yaakapp-internal/git";
 import { useGit } from "@yaakapp-internal/git";
 import type {
  Environment,
@@ -9,8 +9,7 @@ import type {
  Workspace,
 } from "@yaakapp-internal/models";
 import { Banner, HStack, Icon, InlineCode, SplitLayout } from "@yaakapp-internal/ui";
-import classNames from "classnames";
-import { useCallback, useMemo, useState } from "react";
+import { type ComponentProps, useCallback, useMemo, useState } from "react";
 import { modelToYaml } from "../../lib/diffYaml";
 import { trackFeatureUsage } from "../../lib/featureFeedback";
 import { resolvedModelName } from "../../lib/resolvedModelName";
@@ -19,6 +18,7 @@ import { showErrorToast } from "../../lib/toast";
 import { sync } from "../../init/sync";
 import { CommercialUseBanner } from "../CommercialUseBanner";
 import { Button } from "../core/Button";
+import { Chip } from "../core/Chip";
 import type { CheckboxProps } from "../core/Checkbox";
 import { Checkbox } from "../core/Checkbox";
 import type { CheckboxTreeNode } from "../core/CheckboxTree";
@@ -333,16 +333,7 @@ function CommitTreeRow({ node }: { node: CommitTreeNode }) {
      )}
      <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
      {node.status.status !== "current" && (
-        <InlineCode
-          className={classNames(
-            "py-0 bg-transparent w-24 text-center shrink-0",
-            node.status.status === "modified" && "text-info",
-            node.status.status === "untracked" && "text-success",
-            node.status.status === "removed" && "text-danger",
-          )}
-        >
-          {node.status.status}
-        </InlineCode>
+        <Chip color={statusColor(node.status.status)}>{node.status.status}</Chip>
      )}
    </>
  );
@@ -376,16 +367,9 @@ function ExternalTreeNode({
        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
          <Icon color="secondary" icon="file_code" />
          <div className="truncate">{displayPath}</div>
-          <InlineCode
-            className={classNames(
-              "py-0 ml-auto bg-transparent w-24 text-center",
-              entry.status === "modified" && "text-info",
-              entry.status === "untracked" && "text-success",
-              entry.status === "removed" && "text-danger",
-            )}
-          >
+          <Chip className="ml-auto" color={statusColor(entry.status)}>
            {entry.status}
-          </InlineCode>
+          </Chip>
        </div>
      }
    />
@@ -479,3 +463,20 @@ function DiffPanel({
    </div>
  );
 }
+
+function statusColor(status: GitStatus): ComponentProps<typeof Chip>["color"] {
+  switch (status) {
+    case "modified":
+      return "info";
+    case "untracked":
+      return "success";
+    case "removed":
+      return "danger";
+    case "conflict":
+      return "warning";
+    case "current":
+    case "renamed":
+    case "type_change":
+      return "default";
+  }
+}
@@ -1,8 +1,8 @@
 import type { DivergedStrategy } from "@yaakapp-internal/git";
-import { HStack, InlineCode } from "@yaakapp-internal/ui";
+import { InlineCode } from "@yaakapp-internal/ui";
 import { useState } from "react";
 import { showDialog } from "../../lib/dialog";
-import { Button } from "../core/Button";
+import { DialogFooter } from "../core/Dialog";
 import { RadioCards } from "../core/RadioCards";

 type Resolution = "force_reset" | "merge";
@@ -34,7 +34,7 @@ function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProp
  };

  return (
-    <div className="flex flex-col gap-4 mb-4">
+    <div className="flex flex-col gap-4">
      <p className="text-text-subtle">
        Your local branch has diverged from{" "}
        <InlineCode>
@@ -59,18 +59,18 @@ function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProp
          },
        ]}
      />
-      <HStack space={2} justifyContent="start" className="flex-row-reverse">
-        <Button
-          color={selected === "force_reset" ? "danger" : "primary"}
-          disabled={selected == null}
-          onClick={handleSubmit}
-        >
-          {selected != null ? resolutionLabel[selected] : "Select an option"}
-        </Button>
-        <Button variant="border" onClick={handleCancel}>
-          Cancel
-        </Button>
-      </HStack>
+      <DialogFooter
+        inline
+        actions={[
+          { label: "Cancel", onClick: handleCancel },
+          {
+            label: selected != null ? resolutionLabel[selected] : "Select an option",
+            color: selected === "force_reset" ? "danger" : "primary",
+            disabled: selected == null,
+            onClick: handleSubmit,
+          },
+        ]}
+      />
    </div>
  );
 }
@@ -23,7 +23,6 @@ export function useExportData() {
        id: "export-data",
        title: "Export Data",
        size: "md",
-        noPadding: true,
        render: ({ hide }) => (
          <ExportDataDialog
            onHide={hide}
@@ -0,0 +1,3 @@
+export function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : String(err);
+}
@@ -1,4 +1,5 @@
 import type { GraphQLSchema, IntrospectionQuery } from "graphql";
+import { errorMessage } from "./errorMessage";
 import { buildClientSchema, buildSchema, introspectionFromSchema } from "graphql";

 // Accepts either a GraphQL introspection JSON ({ data: { __schema } } or
@@ -45,7 +46,3 @@ export function tryBuildIntrospectionFromFile(
    };
  }
 }
-
-function errorMessage(e: unknown): string {
-  return e instanceof Error ? e.message : String(e);
-}
@@ -8,7 +8,7 @@ import {
 import { FormattedError, VStack } from "@yaakapp-internal/ui";
 import { Button } from "../components/core/Button";
 import { ImportDataDialog } from "../components/ImportDataDialog";
-import { activeFolderAtom } from "../hooks/useActiveFolder";
+import type { ImportSourcePath } from "../components/ImportSourceList";
 import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
 import { showAlert } from "./alert";
@@ -20,10 +20,17 @@ import { rpc } from "./rpc";

 // Stable identities so the dialog's effects don't re-run (and cancel in-flight
 // fetches) every time the dialog container re-renders.
-const planFile = (filePath: string, destination: ImportDestination) =>
-  rpc<ImportPlan>("cmd_import_data", { filePath, destination });
-const planUrl = (url: string, destination: ImportDestination) =>
-  rpc<ImportPlan>("cmd_import_url", { url, destination });
+const planSources = (sources: ImportSourcePath[], destination: ImportDestination) =>
+  rpc<ImportPlan>("cmd_import_data", {
+    filePaths: sources.filter((source) => source.kind !== "url").map((source) => source.path),
+    urls: sources.filter((source) => source.kind === "url").map((source) => source.path),
+    destination,
+  });
+const detectSource = (source: ImportSourcePath) =>
+  rpc<string>(
+    "cmd_detect_import_source",
+    source.kind === "url" ? { url: source.path } : { filePath: source.path },
+  );
 const listSources = (workspaceId: string) =>
  rpc<ImportSource[]>("cmd_list_import_sources", { workspaceId });
 const findSourcesForOrigin = (args: { filePath?: string; url?: string }) =>
@@ -43,11 +50,11 @@ export const importData = createFastMutation({
    return new Promise<void>((resolve, reject) => {
      const currentWorkspace = jotaiStore.get(activeWorkspaceAtom);
      const workspaces = jotaiStore.get(workspacesAtom);
-      const selectedFolder = jotaiStore.get(activeFolderAtom);
      showDialog({
        id: "import",
        title: "Import Data",
        size: "lg",
+        className: "h-[36rem]",
        disableClose: true,
        render: ({ hide }) => {
          const cancel = () => {
@@ -68,9 +75,8 @@ export const importData = createFastMutation({
            <ImportDataDialog
              currentWorkspace={currentWorkspace}
              workspaces={workspaces}
-              selectedFolder={selectedFolder}
-              planFile={planFile}
-              planUrl={planUrl}
+              planSources={planSources}
+              detectSource={detectSource}
              listSources={listSources}
              findSourcesForOrigin={findSourcesForOrigin}
              commit={commit}