feat(claude-binary): implement robust version selector with enhanced binary detection

This commit provides a comprehensive solution to Claude binary detection issues by implementing a user-friendly version selector UI and improving the binary discovery logic. It addresses all concerns raised in multiple PRs and comments. Changes: - Add ClaudeVersionSelector component for selecting from multiple installations - Update ClaudeBinaryDialog to use version selector instead of manual path input - Fix unused variable warning in production builds (claude.rs:442) - Improve select_best_installation to handle production build restrictions - Add listClaudeInstallations API endpoint to fetch all available installations - Make Claude version indicator clickable to navigate to Settings - Move Claude installation selector to General tab in Settings (per user request) - Enhance dialog UX with loading states and clear installation instructions - Add Radix UI radio-group dependency for version selector Fixes: - Production build warning about unused claude_path variable - Version detection failures in production builds due to process restrictions - Poor UX when Claude binary is not found (now shows helpful dialog) - Inability to easily switch between multiple Claude installations This implementation takes inspiration from: - PR #3: Version selector dropdown approach (preferred by users) - PR #4: Binary detection improvements and path validation - PR #39: Additional detection methods and error handling - Commit 5a29f9a: Shared claude binary detection module architecture Addresses feedback from: - getAsterisk/claudia#4 (comment): User preference for dropdown selector - Production build restrictions that prevent version detection - Need for better error handling when Claude is not installed The solution provides a seamless experience whether Claude is installed via: - npm/yarn/bun global installation - nvm-managed Node.js versions - Homebrew on macOS - System-wide installation - Local user installation (~/.local/bin, etc.) Refs: #3, #4, #39, 5a29f9a
2025-06-25 02:49:24 +05:30
parent 97290e5665
commit c48a63f170
14 changed files with 556 additions and 77 deletions
--- a/src/components/AgentExecution.tsx
+++ b/src/components/AgentExecution.tsx
@@ -70,7 +70,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
  className,
 }) => {
  const [projectPath, setProjectPath] = useState("");
-  const [task, setTask] = useState("");
+  const [task, setTask] = useState(agent.default_task || "");
  const [model, setModel] = useState(agent.model || "sonnet");
  const [isRunning, setIsRunning] = useState(false);
  const [messages, setMessages] = useState<ClaudeStreamMessage[]>([]);
@@ -646,7 +646,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                <Input
                  value={task}
                  onChange={(e) => setTask(e.target.value)}
-                  placeholder={agent.default_task || "Enter the task for the agent"}
+                  placeholder="Enter the task for the agent"
                  disabled={isRunning}
                  className="flex-1"
                  onKeyPress={(e) => {
--- a/src/components/ClaudeBinaryDialog.tsx
+++ b/src/components/ClaudeBinaryDialog.tsx
@@ -1,9 +1,9 @@
-import { useState } from "react";
-import { api } from "@/lib/api";
+import { useState, useEffect } from "react";
+import { api, type ClaudeInstallation } from "@/lib/api";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { ExternalLink, FileQuestion, Terminal } from "lucide-react";
+import { ExternalLink, FileQuestion, Terminal, AlertCircle, Loader2 } from "lucide-react";
+import { ClaudeVersionSelector } from "./ClaudeVersionSelector";

 interface ClaudeBinaryDialogProps {
  open: boolean;
@@ -13,18 +13,39 @@ interface ClaudeBinaryDialogProps {
 }

 export function ClaudeBinaryDialog({ open, onOpenChange, onSuccess, onError }: ClaudeBinaryDialogProps) {
-  const [binaryPath, setBinaryPath] = useState("");
+  const [selectedInstallation, setSelectedInstallation] = useState<ClaudeInstallation | null>(null);
  const [isValidating, setIsValidating] = useState(false);
+  const [hasInstallations, setHasInstallations] = useState(true);
+  const [checkingInstallations, setCheckingInstallations] = useState(true);
+
+  useEffect(() => {
+    if (open) {
+      checkInstallations();
+    }
+  }, [open]);
+
+  const checkInstallations = async () => {
+    try {
+      setCheckingInstallations(true);
+      const installations = await api.listClaudeInstallations();
+      setHasInstallations(installations.length > 0);
+    } catch (error) {
+      // If the API call fails, it means no installations found
+      setHasInstallations(false);
+    } finally {
+      setCheckingInstallations(false);
+    }
+  };

  const handleSave = async () => {
-    if (!binaryPath.trim()) {
-      onError("Please enter a valid path");
+    if (!selectedInstallation) {
+      onError("Please select a Claude installation");
      return;
    }

    setIsValidating(true);
    try {
-      await api.setClaudeBinaryPath(binaryPath.trim());
+      await api.setClaudeBinaryPath(selectedInstallation.path);
      onSuccess();
      onOpenChange(false);
    } catch (error) {
@@ -37,46 +58,58 @@ export function ClaudeBinaryDialog({ open, onOpenChange, onSuccess, onError }: C

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileQuestion className="w-5 h-5" />
-            Couldn't locate Claude Code installation
+            Select Claude Code Installation
          </DialogTitle>
          <DialogDescription className="space-y-3 mt-4">
-            <p>
-              Claude Code was not found in any of the common installation locations. 
-              Please specify the path to the Claude binary manually.
-            </p>
-            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
-              <Terminal className="w-4 h-4 text-muted-foreground" />
-              <p className="text-sm text-muted-foreground">
-                <span className="font-medium">Tip:</span> Run{" "}
-                <code className="px-1 py-0.5 bg-black/10 dark:bg-white/10 rounded">which claude</code>{" "}
-                in your terminal to find the installation path
+            {checkingInstallations ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">Searching for Claude installations...</span>
+              </div>
+            ) : hasInstallations ? (
+              <p>
+                Multiple Claude Code installations were found on your system. 
+                Please select which one you'd like to use.
              </p>
-            </div>
+            ) : (
+              <>
+                <p>
+                  Claude Code was not found in any of the common installation locations. 
+                  Please install Claude Code to continue.
+                </p>
+                <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+                  <AlertCircle className="w-4 h-4 text-muted-foreground" />
+                  <p className="text-sm text-muted-foreground">
+                    <span className="font-medium">Searched locations:</span> PATH, /usr/local/bin, 
+                    /opt/homebrew/bin, ~/.nvm/versions/node/*/bin, ~/.claude/local, ~/.local/bin
+                  </p>
+                </div>
+              </>
+            )}
+            {!checkingInstallations && (
+              <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+                <Terminal className="w-4 h-4 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="font-medium">Tip:</span> You can install Claude Code using{" "}
+                  <code className="px-1 py-0.5 bg-black/10 dark:bg-white/10 rounded">npm install -g @claude</code>
+                </p>
+              </div>
+            )}
          </DialogDescription>
        </DialogHeader>

-        <div className="py-4">
-          <Input
-            type="text"
-            placeholder="/usr/local/bin/claude"
-            value={binaryPath}
-            onChange={(e) => setBinaryPath(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !isValidating) {
-                handleSave();
-              }
-            }}
-            autoFocus
-            className="font-mono text-sm"
-          />
-          <p className="text-xs text-muted-foreground mt-2">
-            Common locations: /usr/local/bin/claude, /opt/homebrew/bin/claude, ~/.claude/local/claude
-          </p>
-        </div>
+        {!checkingInstallations && hasInstallations && (
+          <div className="py-4">
+            <ClaudeVersionSelector
+              onSelect={(installation) => setSelectedInstallation(installation)}
+              selectedPath={null}
+            />
+          </div>
+        )}

        <DialogFooter className="gap-3">
          <Button
@@ -94,8 +127,11 @@ export function ClaudeBinaryDialog({ open, onOpenChange, onSuccess, onError }: C
          >
            Cancel
          </Button>
-          <Button onClick={handleSave} disabled={isValidating || !binaryPath.trim()}>
-            {isValidating ? "Validating..." : "Save Path"}
+          <Button 
+            onClick={handleSave} 
+            disabled={isValidating || !selectedInstallation || !hasInstallations}
+          >
+            {isValidating ? "Validating..." : hasInstallations ? "Save Selection" : "No Installations Found"}
          </Button>
        </DialogFooter>
      </DialogContent>
--- a/src/components/ClaudeVersionSelector.tsx
+++ b/src/components/ClaudeVersionSelector.tsx
@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+import { api, type ClaudeInstallation } from "@/lib/api";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Loader2, Terminal, Package, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ClaudeVersionSelectorProps {
+  /**
+   * Currently selected Claude installation path
+   */
+  selectedPath?: string | null;
+  /**
+   * Callback when a Claude installation is selected
+   */
+  onSelect: (installation: ClaudeInstallation) => void;
+  /**
+   * Optional className for styling
+   */
+  className?: string;
+  /**
+   * Whether to show a save button (for settings page)
+   */
+  showSaveButton?: boolean;
+  /**
+   * Callback when save button is clicked
+   */
+  onSave?: () => void;
+  /**
+   * Whether the save operation is in progress
+   */
+  isSaving?: boolean;
+}
+
+/**
+ * ClaudeVersionSelector component for selecting Claude Code installations
+ * 
+ * @example
+ * <ClaudeVersionSelector
+ *   selectedPath={currentPath}
+ *   onSelect={(installation) => setSelectedInstallation(installation)}
+ * />
+ */
+export const ClaudeVersionSelector: React.FC<ClaudeVersionSelectorProps> = ({
+  selectedPath,
+  onSelect,
+  className,
+  showSaveButton = false,
+  onSave,
+  isSaving = false,
+}) => {
+  const [installations, setInstallations] = useState<ClaudeInstallation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedInstallation, setSelectedInstallation] = useState<ClaudeInstallation | null>(null);
+
+  useEffect(() => {
+    loadInstallations();
+  }, []);
+
+  useEffect(() => {
+    // Update selected installation when selectedPath changes
+    if (selectedPath && installations.length > 0) {
+      const found = installations.find(i => i.path === selectedPath);
+      if (found) {
+        setSelectedInstallation(found);
+      }
+    }
+  }, [selectedPath, installations]);
+
+  const loadInstallations = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const foundInstallations = await api.listClaudeInstallations();
+      setInstallations(foundInstallations);
+      
+      // If we have a selected path, find and select it
+      if (selectedPath) {
+        const found = foundInstallations.find(i => i.path === selectedPath);
+        if (found) {
+          setSelectedInstallation(found);
+        }
+      } else if (foundInstallations.length > 0) {
+        // Auto-select the first (best) installation
+        setSelectedInstallation(foundInstallations[0]);
+        onSelect(foundInstallations[0]);
+      }
+    } catch (err) {
+      console.error("Failed to load Claude installations:", err);
+      setError(err instanceof Error ? err.message : "Failed to load Claude installations");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelect = (installation: ClaudeInstallation) => {
+    setSelectedInstallation(installation);
+    onSelect(installation);
+  };
+
+  const getSourceIcon = (source: string) => {
+    if (source.includes("nvm")) return <Package className="w-4 h-4" />;
+    return <Terminal className="w-4 h-4" />;
+  };
+
+  const getSourceLabel = (source: string) => {
+    if (source === "which") return "System PATH";
+    if (source === "homebrew") return "Homebrew";
+    if (source === "system") return "System";
+    if (source.startsWith("nvm")) return source.replace("nvm ", "NVM ");
+    if (source === "local-bin") return "Local bin";
+    if (source === "claude-local") return "Claude local";
+    if (source === "npm-global") return "NPM global";
+    if (source === "yarn" || source === "yarn-global") return "Yarn";
+    if (source === "bun") return "Bun";
+    return source;
+  };
+
+  if (loading) {
+    return (
+      <div className={cn("flex items-center justify-center py-8", className)}>
+        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className={cn("p-4", className)}>
+        <div className="text-sm text-destructive">{error}</div>
+      </Card>
+    );
+  }
+
+  if (installations.length === 0) {
+    return (
+      <Card className={cn("p-4", className)}>
+        <div className="text-sm text-muted-foreground">
+          No Claude Code installations found on your system.
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div>
+        <Label className="text-sm font-medium mb-3 block">
+          Select Claude Code Installation
+        </Label>
+        <RadioGroup
+          value={selectedInstallation?.path}
+          onValueChange={(value: string) => {
+            const installation = installations.find(i => i.path === value);
+            if (installation) {
+              handleSelect(installation);
+            }
+          }}
+        >
+          <div className="space-y-2">
+            {installations.map((installation) => (
+              <Card
+                key={installation.path}
+                className={cn(
+                  "relative cursor-pointer transition-colors",
+                  selectedInstallation?.path === installation.path
+                    ? "border-primary"
+                    : "hover:border-muted-foreground/50"
+                )}
+                onClick={() => handleSelect(installation)}
+              >
+                <div className="flex items-start p-4">
+                  <RadioGroupItem
+                    value={installation.path}
+                    id={installation.path}
+                    className="mt-1"
+                  />
+                  <div className="ml-3 flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      {getSourceIcon(installation.source)}
+                      <span className="font-medium text-sm">
+                        {getSourceLabel(installation.source)}
+                      </span>
+                      {installation.version && (
+                        <Badge variant="secondary" className="text-xs">
+                          v{installation.version}
+                        </Badge>
+                      )}
+                      {selectedPath === installation.path && (
+                        <Badge variant="default" className="text-xs">
+                          <Check className="w-3 h-3 mr-1" />
+                          Current
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="text-xs text-muted-foreground font-mono break-all">
+                      {installation.path}
+                    </p>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </RadioGroup>
+      </div>
+
+      {showSaveButton && onSave && (
+        <div className="flex justify-end">
+          <Button
+            onClick={onSave}
+            disabled={!selectedInstallation || isSaving}
+            size="sm"
+          >
+            {isSaving ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              "Save Selection"
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}; 
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -20,10 +20,12 @@ import { Card } from "@/components/ui/card";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { 
  api, 
-  type ClaudeSettings
+  type ClaudeSettings,
+  type ClaudeInstallation
 } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { Toast, ToastContainer } from "@/components/ui/toast";
+import { ClaudeVersionSelector } from "./ClaudeVersionSelector";

 interface SettingsProps {
  /**
@@ -69,12 +71,30 @@ export const Settings: React.FC<SettingsProps> = ({
  // Environment variables state
  const [envVars, setEnvVars] = useState<EnvironmentVariable[]>([]);

+  // Claude binary path state
+  const [currentBinaryPath, setCurrentBinaryPath] = useState<string | null>(null);
+  const [selectedInstallation, setSelectedInstallation] = useState<ClaudeInstallation | null>(null);
+  const [binaryPathChanged, setBinaryPathChanged] = useState(false);
+

  // Load settings on mount
  useEffect(() => {
    loadSettings();
+    loadClaudeBinaryPath();
  }, []);

+  /**
+   * Loads the current Claude binary path
+   */
+  const loadClaudeBinaryPath = async () => {
+    try {
+      const path = await api.getClaudeBinaryPath();
+      setCurrentBinaryPath(path);
+    } catch (err) {
+      console.error("Failed to load Claude binary path:", err);
+    }
+  };
+
  /**
   * Loads the current Claude settings
   */
@@ -159,6 +179,14 @@ export const Settings: React.FC<SettingsProps> = ({

      await api.saveClaudeSettings(updatedSettings);
      setSettings(updatedSettings);
+
+      // Save Claude binary path if changed
+      if (binaryPathChanged && selectedInstallation) {
+        await api.setClaudeBinaryPath(selectedInstallation.path);
+        setCurrentBinaryPath(selectedInstallation.path);
+        setBinaryPathChanged(false);
+      }
+
      setToast({ message: "Settings saved successfully!", type: "success" });
    } catch (err) {
      console.error("Failed to save settings:", err);
@@ -246,6 +274,13 @@ export const Settings: React.FC<SettingsProps> = ({
    setEnvVars(prev => prev.filter(envVar => envVar.id !== id));
  };

+  /**
+   * Handle Claude installation selection
+   */
+  const handleClaudeInstallationSelect = (installation: ClaudeInstallation) => {
+    setSelectedInstallation(installation);
+    setBinaryPathChanged(installation.path !== currentBinaryPath);
+  };

  return (
    <div className={cn("flex flex-col h-full bg-background text-foreground", className)}>
@@ -391,6 +426,25 @@ export const Settings: React.FC<SettingsProps> = ({
                        How long to retain chat transcripts locally (default: 30 days)
                      </p>
                    </div>
+                    
+                    {/* Claude Binary Path Selector */}
+                    <div className="space-y-4">
+                      <div>
+                        <Label className="text-sm font-medium mb-2 block">Claude Code Installation</Label>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          Select which Claude Code installation to use
+                        </p>
+                      </div>
+                      <ClaudeVersionSelector
+                        selectedPath={currentBinaryPath}
+                        onSelect={handleClaudeInstallationSelect}
+                      />
+                      {binaryPathChanged && (
+                        <p className="text-xs text-amber-600 dark:text-amber-400">
+                          ⚠️ Claude binary path has been changed. Remember to save your settings.
+                        </p>
+                      )}
+                    </div>
                  </div>
                </div>
              </Card>
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -95,21 +95,28 @@ export const Topbar: React.FC<TopbarProps> = ({
    if (!versionStatus) return null;
    
    const statusContent = (
-      <div className="flex items-center space-x-2 text-xs">
-        <Circle
-          className={cn(
-            "h-3 w-3",
-            versionStatus.is_installed 
-              ? "fill-green-500 text-green-500" 
-              : "fill-red-500 text-red-500"
-          )}
-        />
-        <span>
-          {versionStatus.is_installed && versionStatus.version
-            ? `Claude Code ${versionStatus.version}`
-            : "Claude Code"}
-        </span>
-      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-auto py-1 px-2 hover:bg-accent"
+        onClick={onSettingsClick}
+      >
+        <div className="flex items-center space-x-2 text-xs">
+          <Circle
+            className={cn(
+              "h-3 w-3",
+              versionStatus.is_installed 
+                ? "fill-green-500 text-green-500" 
+                : "fill-red-500 text-red-500"
+            )}
+          />
+          <span>
+            {versionStatus.is_installed && versionStatus.version
+              ? `Claude Code ${versionStatus.version}`
+              : "Claude Code"}
+          </span>
+        </div>
+      </Button>
    );
    
    if (!versionStatus.is_installed) {
@@ -124,6 +131,14 @@ export const Topbar: React.FC<TopbarProps> = ({
                  {versionStatus.output}
                </pre>
              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full"
+                onClick={onSettingsClick}
+              >
+                Select Claude Installation
+              </Button>
              <a
                href="https://www.anthropic.com/claude-code"
                target="_blank"
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,6 +10,7 @@ export * from "./MCPManager";
 export * from "./MCPServerList";
 export * from "./MCPAddServer";
 export * from "./MCPImportExport";
+export * from "./ClaudeVersionSelector";
 export * from "./ui/badge";
 export * from "./ui/button";
 export * from "./ui/card";
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem }; 
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -78,6 +78,18 @@ export interface FileEntry {
  extension?: string;
 }

+/**
+ * Represents a Claude installation found on the system
+ */
+export interface ClaudeInstallation {
+  /** Full path to the Claude binary */
+  path: string;
+  /** Version string if available */
+  version?: string;
+  /** Source of discovery (e.g., "nvm", "system", "homebrew", "which") */
+  source: string;
+}
+
 // Sandbox API types
 export interface SandboxProfile {
  id?: number;
@@ -1908,4 +1920,17 @@ export const api = {
      throw error;
    }
  },
+
+  /**
+   * List all available Claude installations on the system
+   * @returns Promise resolving to an array of Claude installations
+   */
+  async listClaudeInstallations(): Promise<ClaudeInstallation[]> {
+    try {
+      return await invoke<ClaudeInstallation[]>("list_claude_installations");
+    } catch (error) {
+      console.error("Failed to list Claude installations:", error);
+      throw error;
+    }
+  },
 };