Typeahead for folder path input

Author: slinjhu

.github/workflows/ci.yml

@@ -50,6 +50,10 @@ jobs:
         run: make -C smoosense-py env
 
       - name: Run tests
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
         run: make -C smoosense-py test
 
   py-integration-test:

smoosense-gui/src/components/home/HomeInfoSection.tsx

@@ -1,14 +1,84 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { ExternalLink, Play, Download } from 'lucide-react'
+import { ExternalLink, Play, Download, AlertCircle } from 'lucide-react'
+import { API_PREFIX } from '@/lib/utils/urlUtils'
+import { debounce } from 'lodash'
+
+type PathType = 's3' | 'local' | 'invalid' | 'empty'
+
+function getPathType(path: string, isLocal: boolean): PathType {
+  const trimmed = path.trim()
+  if (!trimmed) return 'empty'
+  // Match partial s3:// prefix as user is typing
+  if (trimmed.startsWith('s3://') || 's3://'.startsWith(trimmed)) return 's3'
+  if (trimmed.startsWith('/') || trimmed.startsWith('~')) {
+    return isLocal ? 'local' : 'invalid'
+  }
+  return 'invalid'
+}
 
 export default function HomeInfoSection() {
   const router = useRouter()
   const [folderPath, setFolderPath] = useState('')
+  const [isLocal, setIsLocal] = useState(false)
+  const [suggestions, setSuggestions] = useState<string[]>([])
+  const [showSuggestions, setShowSuggestions] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const suggestionsRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const url = window.location.href
+    setIsLocal(url.startsWith('http://localhost') || url.startsWith('http://127.0.0.1'))
+  }, [])
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        inputRef.current &&
+        !inputRef.current.contains(e.target as Node) &&
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(e.target as Node)
+      ) {
+        setShowSuggestions(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const fetchSuggestions = useMemo(
+    () =>
+      debounce(async (path: string, local: boolean) => {
+        const pathType = getPathType(path, local)
+        if (pathType === 'empty' || pathType === 'invalid') {
+          setSuggestions([])
+          return
+        }
+
+        try {
+          const endpoint = pathType === 's3'
+            ? `${API_PREFIX}/s3-typeahead`
+            : `${API_PREFIX}/typeahead`
+
+          const response = await fetch(`${endpoint}?path=${encodeURIComponent(path)}`)
+          if (response.ok) {
+            const data = await response.json()
+            setSuggestions(data)
+            setShowSuggestions(data.length > 0)
+            setSelectedIndex(-1)
+          }
+        } catch {
+          setSuggestions([])
+        }
+      }, 300),
+    []
+  )
 
   const handleOpenUrl = (url: string) => {
     if (typeof window !== 'undefined') {
@@ -22,31 +92,102 @@ export default function HomeInfoSection() {
     }
   }
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setFolderPath(value)
+    fetchSuggestions(value, isLocal)
+  }
+
+  const handleSelectSuggestion = (suggestion: string) => {
+    setFolderPath(suggestion)
+    setShowSuggestions(false)
+    setSuggestions([])
+    // Fetch new suggestions for the selected path
+    fetchSuggestions(suggestion, isLocal)
+    inputRef.current?.focus()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      handleGoToFolder()
+      if (selectedIndex >= 0 && suggestions[selectedIndex]) {
+        handleSelectSuggestion(suggestions[selectedIndex])
+      } else {
+        handleGoToFolder()
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex(prev => Math.max(prev - 1, -1))
+    } else if (e.key === 'Escape') {
+      setShowSuggestions(false)
+    } else if (e.key === 'Tab' && showSuggestions && suggestions.length > 0) {
+      e.preventDefault()
+      const idx = selectedIndex >= 0 ? selectedIndex : 0
+      handleSelectSuggestion(suggestions[idx])
     }
   }
 
+  const pathType = getPathType(folderPath, isLocal)
+  const showError = pathType === 'invalid'
+
   return (
     <div className="max-w-4xl w-full mb-12">
       <h2 className="text-xl font-semibold text-foreground mb-6">
-        Browse local or s3 folders
+        {isLocal ? 'Browse local or S3 folders' : 'Browse S3 folders'}
       </h2>
 
-      <div className="flex gap-2 mb-8">
-        <Input
-          type="text"
-          placeholder="Enter folder path (e.g., /tmp/folder, ~/Downloads or s3://bucket/path)"
-          value={folderPath}
-          onChange={(e) => setFolderPath(e.target.value)}
-          onKeyPress={handleKeyPress}
-          className="flex-1"
-        />
-        <Button onClick={handleGoToFolder} disabled={!folderPath.trim()}>
+      <div className="flex gap-2 mb-2">
+        <div className="relative flex-1">
+          <Input
+            ref={inputRef}
+            type="text"
+            placeholder={isLocal
+              ? "Enter folder path (e.g., /tmp/folder, ~/Downloads or s3://bucket/path)"
+              : "Enter S3 path (e.g., s3://bucket/path)"
+            }
+            value={folderPath}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+            className={`font-mono ${showError ? 'border-red-500' : ''}`}
+          />
+          {showSuggestions && suggestions.length > 0 && (
+            <div
+              ref={suggestionsRef}
+              className="absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-auto"
+            >
+              {suggestions.map((suggestion, index) => (
+                <div
+                  key={suggestion}
+                  className={`px-3 py-2 cursor-pointer text-sm font-mono truncate ${
+                    index === selectedIndex
+                      ? 'bg-accent text-accent-foreground'
+                      : 'hover:bg-accent/50'
+                  }`}
+                  onClick={() => handleSelectSuggestion(suggestion)}
+                >
+                  {suggestion}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <Button onClick={handleGoToFolder} disabled={!folderPath.trim() || showError}>
           Go
         </Button>
       </div>
+      {showError && (
+        <div className="flex items-center gap-2 text-red-500 text-sm mb-6">
+          <AlertCircle className="h-4 w-4" />
+          {isLocal
+            ? 'Path must start with /, ~, or s3://'
+            : 'Path must start with s3:// (local paths not available on cloud)'
+          }
+        </div>
+      )}
+      {!showError && <div className="mb-6" />}
 
       <h2 className="text-xl font-semibold text-foreground mb-6">
         Learn more

smoosense-py/smoosense/handlers/fs.py

@@ -123,6 +123,66 @@ def generate() -> Generator[bytes, None, None]:
         return file_response
 
 
+@fs_bp.get("/typeahead")
+@requires_auth_api
+@handle_api_errors
+def typeahead() -> Response:
+    """
+    Get typeahead suggestions for local file paths.
+    Returns directories that match the given prefix.
+    """
+    path = require_arg("path")
+
+    # Expand ~ to home directory
+    if path.startswith("~"):
+        expanded_path = os.path.expanduser(path)
+    else:
+        expanded_path = path
+
+    # Get the directory and prefix for matching
+    if os.path.isdir(expanded_path):
+        # Path is a directory, list its contents
+        dir_path = expanded_path
+        prefix = ""
+    else:
+        # Path is partial, get parent dir and filename prefix
+        dir_path = os.path.dirname(expanded_path) or "/"
+        prefix = os.path.basename(expanded_path).lower()
+
+    if not os.path.isdir(dir_path):
+        return jsonify([])
+
+    suggestions = []
+    try:
+        for entry in os.scandir(dir_path):
+            # Only suggest directories
+            if not entry.is_dir():
+                continue
+            # Skip hidden directories
+            if entry.name.startswith("."):
+                continue
+            # Match prefix (case-insensitive)
+            if prefix and not entry.name.lower().startswith(prefix):
+                continue
+
+            # Build the suggestion path
+            if path.startswith("~"):
+                # Keep ~ prefix in suggestion
+                home = os.path.expanduser("~")
+                suggestion = "~" + os.path.join(dir_path, entry.name)[len(home) :]
+            else:
+                suggestion = os.path.join(dir_path, entry.name)
+
+            suggestions.append(suggestion)
+
+            if len(suggestions) >= 10:
+                break
+    except PermissionError:
+        pass
+
+    return jsonify(suggestions)
+
+
 @fs_bp.post("/upload")
 @requires_auth_api
 @handle_api_errors

smoosense-py/smoosense/handlers/s3.py

@@ -45,3 +45,106 @@ def batch_proxy() -> Response:
     s3_fs = S3FileSystem(s3_client)
     signed = [s3_fs.sign_get_url(url) for url in urls]
     return jsonify(signed)
+
+
+@s3_bp.get("/s3-typeahead")
+@requires_auth_api
+@handle_api_errors
+def s3_typeahead() -> Response:
+    """
+    Get typeahead suggestions for S3 paths.
+    Returns prefixes (directories) that match the given path.
+    """
+    from urllib.parse import urlparse
+
+    path: str = request.args.get("path", "") or ""
+
+    # Must start with s3:// or be a partial prefix of s3:// (including empty string)
+    if path and not path.startswith("s3://") and not "s3://".startswith(path):
+        return jsonify([])
+
+    s3_client = current_app.config["S3_CLIENT"]
+
+    # If path is partial prefix of s3://, list all buckets
+    if not path.startswith("s3://"):
+        try:
+            response = s3_client.list_buckets()
+            bucket_suggestions = [f"s3://{b['Name']}/" for b in response.get("Buckets", [])]
+            return jsonify(bucket_suggestions[:10])
+        except Exception as e:
+            logger.warning(f"Failed to list buckets: {e}")
+            return jsonify([])
+
+    # Parse the S3 URL
+    parsed = urlparse(path)
+    bucket: str = parsed.netloc
+    key: str = str(parsed.path).lstrip("/")
+
+    # If no bucket specified (e.g., s3://), list all buckets
+    if not bucket:
+        try:
+            response = s3_client.list_buckets()
+            bucket_suggestions = [f"s3://{b['Name']}/" for b in response.get("Buckets", [])]
+            return jsonify(bucket_suggestions[:10])
+        except Exception as e:
+            logger.warning(f"Failed to list buckets: {e}")
+            return jsonify([])
+
+    # If no key specified and path doesn't end with /, match buckets by partial bucket name
+    # If path ends with / (e.g., s3://bucket/), we should list bucket contents
+    if not key and not path.endswith("/"):
+        try:
+            response = s3_client.list_buckets()
+            bucket_lower = bucket.lower()
+            bucket_suggestions = [
+                f"s3://{b['Name']}/"
+                for b in response.get("Buckets", [])
+                if not bucket or b["Name"].lower().startswith(bucket_lower)
+            ]
+            return jsonify(bucket_suggestions[:10])
+        except Exception as e:
+            logger.warning(f"Failed to list buckets: {e}")
+            return jsonify([])
+
+    # Get the directory prefix and search prefix
+    dir_prefix: str
+    search_prefix: str
+    if key.endswith("/") or not key:
+        # Path ends with / or is just bucket, list contents
+        dir_prefix = key
+        search_prefix = ""
+    else:
+        # Path is partial, get parent dir and filename prefix
+        parts = key.rsplit("/", 1)
+        if len(parts) == 2:
+            dir_prefix = parts[0] + "/"
+            search_prefix = parts[1].lower()
+        else:
+            dir_prefix = ""
+            search_prefix = parts[0].lower()
+
+    suggestions: list[str] = []
+    try:
+        paginator = s3_client.get_paginator("list_objects_v2")
+        for page in paginator.paginate(Bucket=bucket, Prefix=dir_prefix, Delimiter="/"):
+            # Add common prefixes (directories)
+            for prefix_entry in page.get("CommonPrefixes", []):
+                prefix_path: str = prefix_entry["Prefix"]
+                name = prefix_path[len(dir_prefix) :].rstrip("/")
+
+                # Match search prefix (case-insensitive)
+                if search_prefix and not name.lower().startswith(search_prefix):
+                    continue
+
+                suggestion = f"s3://{bucket}/{prefix_path}"
+                suggestions.append(suggestion)
+
+                if len(suggestions) >= 10:
+                    break
+
+            if len(suggestions) >= 10:
+                break
+    except Exception as e:
+        logger.warning(f"Failed to list S3 prefixes: {e}")
+
+    return jsonify(suggestions)