raycast-rsync-extension 1.0.1

package/package.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://www.raycast.com/schemas/extension.json",
+  "name": "raycast-rsync-extension",
+  "version": "1.0.1",
+  "title": "Rsync File Transfer",
+  "description": "Transfer files between local and remote servers using rsync with SSH config integration",
+  "icon": "icon.png",
+  "author": "dytsou",
+  "categories": [
+    "Developer Tools",
+    "Productivity"
+  ],
+  "license": "MIT",
+  "commands": [
+    {
+      "name": "upload",
+      "title": "Upload Files Via Rsync",
+      "description": "Upload local files to a remote server using rsync",
+      "mode": "view"
+    },
+    {
+      "name": "download",
+      "title": "Download Files Via Rsync",
+      "description": "Download files from a remote server using rsync",
+      "mode": "view"
+    },
+    {
+      "name": "browse",
+      "title": "Browse Remote Files",
+      "description": "Browse and list files on a remote server",
+      "mode": "view"
+    }
+  ],
+  "preferences": [
+    {
+      "name": "rsyncHumanReadable",
+      "type": "checkbox",
+      "title": "Human-readable file sizes",
+      "label": "Human-readable file sizes (-h)",
+      "description": "Display file sizes in KB, MB, GB format",
+      "default": true,
+      "required": false
+    },
+    {
+      "name": "rsyncProgress",
+      "type": "checkbox",
+      "title": "Show progress",
+      "label": "Show progress (-P)",
+      "description": "Show transfer progress and support partial transfers",
+      "default": true,
+      "required": false
+    },
+    {
+      "name": "rsyncDelete",
+      "type": "checkbox",
+      "title": "Delete extraneous files",
+      "label": "Delete extraneous files (--delete)",
+      "description": "Delete files in destination that don't exist in source (use with caution)",
+      "default": false,
+      "required": false
+    }
+  ],
+  "dependencies": {
+    "@raycast/api": "^1.65.0",
+    "@raycast/utils": "^1.19.1"
+  },
+  "devDependencies": {
+    "@raycast/eslint-config": "^2.1.1",
+    "@types/node": "^20.19.30",
+    "@types/react": "19.0.10",
+    "@vitest/ui": "^4.0.17",
+    "eslint": "^9.39.2",
+    "prettier": "^3.8.0",
+    "react": "^19.0.0",
+    "typescript": "^5.2.2",
+    "vitest": "^4.0.17"
+  },
+  "overrides": {
+    "@types/react": "19.0.10"
+  },
+  "scripts": {
+    "build": "ray build -e dist",
+    "dev": "ray develop",
+    "fix-lint": "ray lint --fix",
+    "lint": "ray lint",
+    "publish": "npx @raycast/api@latest publish",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "publish:npm": "npm publish --access public"
+  }
+}

package/src/__mocks__/raycast-api.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import { vi } from "vitest";
+
+export const List = Object.assign(
+  ({ children, ...props }: any) =>
+    React.createElement("div", { "data-testid": "list", ...props }, children),
+  {
+    Item: ({ title, subtitle, actions, ...props }: any) =>
+      React.createElement(
+        "div",
+        {
+          "data-testid": "list-item",
+          "data-title": title,
+          "data-subtitle": subtitle,
+          ...props,
+        },
+        actions,
+      ),
+    EmptyView: ({ title, description }: any) =>
+      React.createElement("div", {
+        "data-testid": "empty-view",
+        "data-title": title,
+        "data-description": description,
+      }),
+  },
+);
+
+export const Form = Object.assign(
+  ({ children, actions }: any) =>
+    React.createElement("div", { "data-testid": "form" }, children, actions),
+  {
+    Description: ({ title, text }: any) =>
+      React.createElement("div", {
+        "data-testid": "form-description",
+        "data-title": title,
+        "data-text": text,
+      }),
+    TextField: ({ id, title, value, onChange }: any) =>
+      React.createElement("input", {
+        "data-testid": `form-field-${id}`,
+        "data-title": title,
+        value: value,
+        onChange: (e: any) => onChange?.(e.target.value),
+      }),
+    Separator: () =>
+      React.createElement("hr", { "data-testid": "form-separator" }),
+  },
+);
+
+export const ActionPanel = ({ children }: any) =>
+  React.createElement("div", { "data-testid": "action-panel" }, children);
+
+export const Action = ({ title, onAction }: any) =>
+  React.createElement(
+    "button",
+    {
+      "data-testid": `action-${title?.toLowerCase().replace(/\s+/g, "-")}`,
+      onClick: onAction,
+    },
+    title,
+  );
+
+export const showToast = vi.fn();
+export const getSelectedFinderItems = vi.fn();
+export const getPreferenceValues = vi.fn();
+
+export const Icon = {
+  CheckCircle: "check-circle",
+  ArrowClockwise: "arrow-clockwise",
+  Upload: "upload",
+  Download: "download",
+  Document: "document",
+  ArrowLeft: "arrow-left",
+  MagnifyingGlass: "magnifying-glass",
+  Trash: "trash",
+};
+
+export const Toast = {
+  Style: {
+    Success: "success",
+    Failure: "failure",
+    Animated: "animated",
+  },
+};

package/src/browse.tsx

@@ -0,0 +1,378 @@
+import {
+  List,
+  ActionPanel,
+  Action,
+  Form,
+  showToast,
+  Toast,
+  Icon,
+  useNavigation,
+  popToRoot,
+  Clipboard,
+} from "@raycast/api";
+import React, { useState, useEffect } from "react";
+import { parseSSHConfig } from "./utils/sshConfig";
+import { executeRemoteLs } from "./utils/ssh";
+import { validateRemotePath, validateHostConfig } from "./utils/validation";
+import { SSHHostConfig, RemoteFile } from "./types/server";
+
+/**
+ * Main browse command component
+ * Displays list of SSH hosts from config file
+ */
+export default function Command() {
+  const [hosts, setHosts] = useState<SSHHostConfig[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadHosts();
+  }, []);
+
+  async function loadHosts() {
+    try {
+      const parsedHosts = parseSSHConfig();
+
+      if (parsedHosts.length === 0) {
+        const errorMsg = "No host entries found in SSH config file";
+        setError(errorMsg);
+        console.warn("SSH config parsed but no hosts found");
+      } else {
+        setHosts(parsedHosts);
+        console.log(`Loaded ${parsedHosts.length} SSH host(s)`);
+      }
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to parse SSH config";
+      console.error("Error loading SSH hosts:", err);
+      setError(errorMessage);
+      await showToast({
+        style: Toast.Style.Failure,
+        title: "Error Loading SSH Config",
+        message: errorMessage,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (error) {
+    return (
+      <List>
+        <List.EmptyView title="Error Loading SSH Config" description={error} />
+      </List>
+    );
+  }
+
+  return (
+    <List isLoading={isLoading} searchBarPlaceholder="Search hosts...">
+      {hosts.map((host: SSHHostConfig) => (
+        <List.Item
+          key={host.host}
+          title={host.host}
+          subtitle={host.hostName}
+          accessories={[
+            { text: host.user ? `User: ${host.user}` : "" },
+            { text: host.port ? `Port: ${host.port}` : "" },
+          ]}
+          actions={
+            <ActionPanel>
+              <Action.Push
+                title="Browse Remote Files"
+                target={<RemotePathForm hostConfig={host} />}
+              />
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  );
+}
+
+/**
+ * Remote path input form
+ * Allows user to specify path to browse on remote server
+ */
+function RemotePathForm({ hostConfig }: { hostConfig: SSHHostConfig }) {
+  const [remotePath, setRemotePath] = useState<string>("~");
+  const [remotePathError, setRemotePathError] = useState<string | undefined>();
+  const { push } = useNavigation();
+
+  async function handleSubmit(values: { remotePath: string }) {
+    const remotePathValue = values.remotePath.trim() || "~";
+
+    // Validate remote path
+    const remoteValidation = validateRemotePath(remotePathValue);
+    if (!remoteValidation.valid) {
+      console.error("Remote path validation failed:", remoteValidation.error);
+      setRemotePathError(remoteValidation.error);
+      await showToast({
+        style: Toast.Style.Failure,
+        title: "Invalid Remote Path",
+        message: remoteValidation.error || "The remote path format is invalid",
+      });
+      return;
+    }
+
+    // Validate host config
+    const hostValidation = validateHostConfig(hostConfig);
+    if (!hostValidation.valid) {
+      console.error("Host config validation failed:", hostValidation.error);
+      await showToast({
+        style: Toast.Style.Failure,
+        title: "Invalid Host Configuration",
+        message:
+          hostValidation.error ||
+          "The host configuration is incomplete or invalid",
+      });
+      return;
+    }
+
+    // Navigate to file list after successful validation
+    push(
+      <RemoteFileListLoader
+        hostConfig={hostConfig}
+        remotePath={remotePathValue}
+      />,
+    );
+  }
+
+  return (
+    <Form
+      actions={
+        <ActionPanel>
+          <Action.SubmitForm title="Browse" onSubmit={handleSubmit} />
+          <Action.Push
+            title="Browse Directory"
+            target={
+              <RemoteFileListLoader
+                hostConfig={hostConfig}
+                remotePath={remotePath}
+              />
+            }
+          />
+        </ActionPanel>
+      }
+    >
+      <Form.TextField
+        id="remotePath"
+        title="Remote Path"
+        placeholder="~ or /path/to/directory"
+        value={remotePath}
+        onChange={(value: string) => {
+          setRemotePath(value);
+          setRemotePathError(undefined);
+        }}
+        error={remotePathError}
+        info="Enter the directory path on the remote server to browse"
+      />
+      <Form.Description
+        title="Host Details"
+        text={`Browsing: ${hostConfig.host}${hostConfig.hostName ? ` (${hostConfig.hostName})` : ""}`}
+      />
+      {hostConfig.user && (
+        <Form.Description title="User" text={hostConfig.user} />
+      )}
+      {hostConfig.port && (
+        <Form.Description title="Port" text={hostConfig.port.toString()} />
+      )}
+    </Form>
+  );
+}
+
+/**
+ * Remote file list loader component
+ * Loads files from remote server and displays them
+ */
+function RemoteFileListLoader({
+  hostConfig,
+  remotePath,
+}: {
+  hostConfig: SSHHostConfig;
+  remotePath: string;
+}) {
+  const [files, setFiles] = useState<RemoteFile[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadRemoteFiles();
+  }, [remotePath]);
+
+  async function loadRemoteFiles() {
+    setIsLoading(true);
+    setError(null);
+
+    console.log("Loading remote files:", {
+      host: hostConfig.host,
+      remotePath,
+    });
+
+    try {
+      const remoteFiles = await executeRemoteLs(hostConfig, remotePath);
+      setFiles(remoteFiles);
+
+      if (remoteFiles.length === 0) {
+        await showToast({
+          style: Toast.Style.Success,
+          title: "Directory is empty",
+        });
+      }
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Unknown error occurred";
+      console.error("Browse error:", err);
+      setError(errorMessage);
+      await showToast({
+        style: Toast.Style.Failure,
+        title: "Failed to List Files",
+        message: errorMessage,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (error) {
+    return (
+      <List>
+        <List.EmptyView
+          title="Error Loading Files"
+          description={error}
+          actions={
+            <ActionPanel>
+              <Action title="Retry" onAction={loadRemoteFiles} />
+            </ActionPanel>
+          }
+        />
+      </List>
+    );
+  }
+
+  return (
+    <RemoteFileList
+      hostConfig={hostConfig}
+      remotePath={remotePath}
+      files={files}
+      isLoading={isLoading}
+    />
+  );
+}
+
+/**
+ * Remote file list view
+ * Displays files and directories from remote server
+ */
+function RemoteFileList({
+  hostConfig,
+  remotePath,
+  files,
+  isLoading,
+}: {
+  hostConfig: SSHHostConfig;
+  remotePath: string;
+  files: RemoteFile[];
+  isLoading?: boolean;
+}) {
+  return (
+    <List searchBarPlaceholder="Search files..." isLoading={isLoading}>
+      {files.map((file, index) => (
+        <List.Item
+          key={`${file.name}-${index}`}
+          title={file.name}
+          icon={file.isDirectory ? Icon.Folder : Icon.Document}
+          accessories={[
+            { text: file.size || "" },
+            { text: file.permissions || "" },
+          ]}
+          actions={
+            <ActionPanel>
+              {file.isDirectory ? (
+                <>
+                  <Action.Push
+                    title="Open Directory"
+                    target={
+                      <RemoteFileListLoader
+                        hostConfig={hostConfig}
+                        remotePath={
+                          remotePath.endsWith("/")
+                            ? `${remotePath}${file.name}`
+                            : `${remotePath}/${file.name}`
+                        }
+                      />
+                    }
+                  />
+                  <Action
+                    title="Copy Path"
+                    icon={Icon.Clipboard}
+                    shortcut={{ modifiers: ["cmd"], key: "c" }}
+                    onAction={async () => {
+                      const pathToCopy = remotePath.endsWith("/")
+                        ? `${remotePath}${file.name}`
+                        : `${remotePath}/${file.name}`;
+                      await Clipboard.copy(pathToCopy);
+                      await showToast({
+                        style: Toast.Style.Success,
+                        title: "Path Copied",
+                        message: "Path copied to clipboard",
+                      });
+                      await popToRoot();
+                    }}
+                  />
+                  <Action
+                    title="Copy Name"
+                    icon={Icon.Clipboard}
+                    shortcut={{ modifiers: ["cmd", "shift"], key: "c" }}
+                    onAction={async () => {
+                      await Clipboard.copy(file.name);
+                      await showToast({
+                        style: Toast.Style.Success,
+                        title: "Name Copied",
+                        message: "Name copied to clipboard",
+                      });
+                      await popToRoot();
+                    }}
+                  />
+                </>
+              ) : (
+                <>
+                  <Action
+                    title="Copy Path"
+                    icon={Icon.Clipboard}
+                    shortcut={{ modifiers: ["cmd"], key: "c" }}
+                    onAction={async () => {
+                      const pathToCopy = remotePath.endsWith("/")
+                        ? `${remotePath}${file.name}`
+                        : `${remotePath}/${file.name}`;
+                      await Clipboard.copy(pathToCopy);
+                      await showToast({
+                        style: Toast.Style.Success,
+                        title: "Path Copied",
+                        message: "Path copied to clipboard",
+                      });
+                      await popToRoot();
+                    }}
+                  />
+                  <Action
+                    title="Copy Name"
+                    icon={Icon.Clipboard}
+                    shortcut={{ modifiers: ["cmd", "shift"], key: "c" }}
+                    onAction={async () => {
+                      await Clipboard.copy(file.name);
+                      await showToast({
+                        style: Toast.Style.Success,
+                        title: "Name Copied",
+                        message: "Name copied to clipboard",
+                      });
+                      await popToRoot();
+                    }}
+                  />
+                </>
+              )}
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/FileList.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+import { statSync } from "fs";
+
+// Helper function to test file icon logic
+function getFileIcon(filePath: string): "folder" | "document" {
+  try {
+    const stats = statSync(filePath);
+    return stats.isDirectory() ? "folder" : "document";
+  } catch {
+    return "document";
+  }
+}
+
+// Helper function to test file size formatting logic
+function getFileSize(filePath: string): string {
+  try {
+    const stats = statSync(filePath);
+    if (stats.isDirectory()) {
+      return "Directory";
+    }
+    const bytes = stats.size;
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+    if (bytes < 1024 * 1024 * 1024)
+      return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  } catch {
+    return "Unknown";
+  }
+}
+
+describe("FileList Component Logic", () => {
+  describe("getFileIcon", () => {
+    it("should return document icon for non-existent files", () => {
+      const result = getFileIcon("/nonexistent/path/file.txt");
+      expect(result).toBe("document");
+    });
+  });
+
+  describe("getFileSize", () => {
+    it("should return Unknown for non-existent files", () => {
+      const result = getFileSize("/nonexistent/path/file.txt");
+      expect(result).toBe("Unknown");
+    });
+
+    it("should format bytes correctly", () => {
+      // Test the formatting logic with mock data
+      const testCases = [
+        { bytes: 500, expected: "500 B" },
+        { bytes: 1024, expected: "1.00 KB" },
+        { bytes: 1536, expected: "1.50 KB" },
+        { bytes: 1048576, expected: "1.00 MB" },
+        { bytes: 1572864, expected: "1.50 MB" },
+        { bytes: 1073741824, expected: "1.00 GB" },
+        { bytes: 2147483648, expected: "2.00 GB" },
+      ];
+
+      testCases.forEach(({ bytes, expected }) => {
+        let result: string;
+        if (bytes < 1024) {
+          result = `${bytes} B`;
+        } else if (bytes < 1024 * 1024) {
+          result = `${(bytes / 1024).toFixed(2)} KB`;
+        } else if (bytes < 1024 * 1024 * 1024) {
+          result = `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+        } else {
+          result = `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+        }
+        expect(result).toBe(expected);
+      });
+    });
+  });
+});

package/src/components/FileList.tsx

@@ -0,0 +1,61 @@
+import { List, ActionPanel, Action, Icon } from "@raycast/api";
+import { statSync } from "fs";
+import { basename } from "path";
+import React from "react";
+
+interface FileListProps {
+  files: string[];
+  onRemove: (filePath: string) => void;
+}
+
+export function FileList({ files, onRemove }: FileListProps) {
+  const getFileIcon = (filePath: string): Icon => {
+    try {
+      const stats = statSync(filePath);
+      return stats.isDirectory() ? Icon.Folder : Icon.Document;
+    } catch {
+      return Icon.Document;
+    }
+  };
+
+  const getFileSize = (filePath: string): string => {
+    try {
+      const stats = statSync(filePath);
+      if (stats.isDirectory()) {
+        return "Directory";
+      }
+      const bytes = stats.size;
+      if (bytes < 1024) return `${bytes} B`;
+      if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+      if (bytes < 1024 * 1024 * 1024)
+        return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+      return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+    } catch {
+      return "Unknown";
+    }
+  };
+
+  return (
+    <List>
+      {files.map((filePath) => (
+        <List.Item
+          key={filePath}
+          title={basename(filePath)}
+          subtitle={getFileSize(filePath)}
+          icon={getFileIcon(filePath)}
+          accessories={[{ text: filePath }]}
+          actions={
+            <ActionPanel>
+              <Action
+                title="Remove"
+                icon={Icon.Trash}
+                onAction={() => onRemove(filePath)}
+                style={Action.Style.Destructive}
+              />
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  );
+}