feat: Add repository button + move settings to left sidebar (#302)

Author: charlesvien

apps/array/src/main/services/dock-badge/service.ts

@@ -19,7 +19,7 @@ export class DockBadgeService {
 
     this.hasBadge = true;
     if (process.platform === "darwin" || process.platform === "linux") {
-      app.setBadgeCount(1);
+      app.dock.setBadge("•");
     }
     log.info("Dock badge shown");
   }
@@ -29,7 +29,7 @@ export class DockBadgeService {
 
     this.hasBadge = false;
     if (process.platform === "darwin" || process.platform === "linux") {
-      app.setBadgeCount(0);
+      app.dock.setBadge("");
     }
     log.info("Dock badge cleared");
   }

apps/array/src/main/services/folders/schemas.ts

@@ -11,7 +11,7 @@ export const registeredFolderSchema = z.object({
 export const getFoldersOutput = z.array(registeredFolderSchema);
 
 export const addFolderInput = z.object({
-  folderPath: z.string(),
+  folderPath: z.string().min(2, "Folder path must be a valid directory path"),
 });
 
 export const addFolderOutput = registeredFolderSchema;

apps/array/src/main/services/folders/service.ts

@@ -21,10 +21,20 @@ const log = logger.scope("folders-service");
 @injectable()
 export class FoldersService {
   async getFolders(): Promise<RegisteredFolder[]> {
-    return foldersStore.get("folders", []);
+    const folders = foldersStore.get("folders", []);
+    // Filter out any folders with empty names (from invalid paths like "/")
+    return folders.filter((f) => f.name && f.path);
   }
 
   async addFolder(folderPath: string): Promise<RegisteredFolder> {
+    // Validate the path before proceeding
+    const folderName = path.basename(folderPath);
+    if (!folderPath || !folderName) {
+      throw new Error(
+        `Invalid folder path: "${folderPath}" - path must have a valid directory name`,
+      );
+    }
+
     const isRepo = await isGitRepository(folderPath);
 
     if (!isRepo) {
@@ -65,7 +75,7 @@ export class FoldersService {
     const newFolder: RegisteredFolder = {
       id: generateId("folder", 7),
       path: folderPath,
-      name: path.basename(folderPath),
+      name: folderName,
       lastAccessed: new Date().toISOString(),
       createdAt: new Date().toISOString(),
     };

apps/array/src/main/services/workspace/schemas.ts

@@ -51,9 +51,11 @@ export const scriptExecutionResultSchema = z.object({
 // Input schemas
 export const createWorkspaceInput = z.object({
   taskId: z.string(),
-  mainRepoPath: z.string(),
+  mainRepoPath: z
+    .string()
+    .min(2, "Repository path must be a valid directory path"),
   folderId: z.string(),
-  folderPath: z.string(),
+  folderPath: z.string().min(2, "Folder path must be a valid directory path"),
   mode: workspaceModeSchema,
   branch: z.string().optional(),
 });

apps/array/src/renderer/components/StatusBar.tsx

@@ -1,7 +1,5 @@
 import { StatusBarMenu } from "@components/StatusBarMenu";
-import { GearIcon } from "@radix-ui/react-icons";
-import { Badge, Box, Code, Flex, IconButton, Kbd } from "@radix-ui/themes";
-import { useNavigationStore } from "@stores/navigationStore";
+import { Badge, Box, Code, Flex, Kbd } from "@radix-ui/themes";
 import { useStatusBarStore } from "@stores/statusBarStore";
 
 import { IS_DEV } from "@/constants/environment";
@@ -12,7 +10,6 @@ interface StatusBarProps {
 
 export function StatusBar({ showKeyHints = true }: StatusBarProps) {
   const { statusText, keyHints } = useStatusBarStore();
-  const { toggleSettings } = useNavigationStore();
 
   return (
     <Box className="flex flex-row items-center justify-between border-gray-6 border-t bg-gray-2 px-4 py-2">
@@ -46,15 +43,6 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
       )}
 
       <Flex align="center" gap="2">
-        <IconButton
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={toggleSettings}
-          title="Settings"
-        >
-          <GearIcon />
-        </IconButton>
         {IS_DEV && (
           <Badge size="1">
             <Code size="1" variant="ghost">

apps/array/src/renderer/features/sidebar/components/SidebarFooter.tsx

@@ -0,0 +1,55 @@
+import { Plus } from "@phosphor-icons/react";
+import { GearIcon } from "@radix-ui/react-icons";
+import { Box, Button, Flex, IconButton } from "@radix-ui/themes";
+import { useRegisteredFoldersStore } from "@renderer/stores/registeredFoldersStore";
+import { trpcVanilla } from "@renderer/trpc";
+import { useNavigationStore } from "@stores/navigationStore";
+import { useCallback } from "react";
+
+export function SidebarFooter() {
+  const addFolder = useRegisteredFoldersStore((state) => state.addFolder);
+  const { toggleSettings } = useNavigationStore();
+
+  const handleAddRepository = useCallback(async () => {
+    const selectedPath = await trpcVanilla.os.selectDirectory.query();
+    if (selectedPath) {
+      await addFolder(selectedPath);
+    }
+  }, [addFolder]);
+
+  return (
+    <Box
+      style={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderTop: "1px solid var(--gray-6)",
+        background: "var(--color-background)",
+        padding: "12px",
+      }}
+    >
+      <Flex align="center" gap="2" justify="between">
+        <Button
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={handleAddRepository}
+        >
+          <Plus size={14} weight="bold" />
+          Add repository
+        </Button>
+
+        <IconButton
+          size="1"
+          variant="ghost"
+          color="gray"
+          onClick={toggleSettings}
+          title="Settings"
+        >
+          <GearIcon />
+        </IconButton>
+      </Flex>
+    </Box>
+  );
+}

apps/array/src/renderer/features/sidebar/components/SidebarMenu.tsx

@@ -20,6 +20,7 @@ import { useTaskViewedStore } from "../stores/taskViewedStore";
 import { HomeItem } from "./items/HomeItem";
 import { NewTaskItem } from "./items/NewTaskItem";
 import { TaskItem } from "./items/TaskItem";
+import { SidebarFooter } from "./SidebarFooter";
 import { SortableFolderSection } from "./SortableFolderSection";
 
 function SidebarMenuComponent() {
@@ -143,85 +144,91 @@ function SidebarMenuComponent() {
         onOpenChange={setRenameDialogOpen}
       />
 
-      <Box
-        style={{
-          flexGrow: 1,
-          overflowY: "auto",
-          overflowX: "hidden",
-        }}
-      >
-        <Flex direction="column" py="2">
-          <HomeItem
-            isActive={sidebarData.isHomeActive}
-            onClick={handleHomeClick}
-          />
-
-          <DragDropProvider
-            onDragOver={handleDragOver}
-            sensors={[
-              PointerSensor.configure({
-                activationConstraints: {
-                  distance: { value: 5 },
-                },
-              }),
-            ]}
-          >
-            {sidebarData.folders.map((folder, index) => {
-              const isExpanded = !collapsedSections.has(folder.id);
-              return (
-                <SortableFolderSection
-                  key={folder.id}
-                  id={folder.id}
-                  index={index}
-                  label={folder.name}
-                  icon={
-                    isExpanded ? (
-                      <FolderOpenIcon size={14} weight="regular" />
-                    ) : (
-                      <FolderIcon size={14} weight="regular" />
-                    )
-                  }
-                  isExpanded={isExpanded}
-                  onToggle={() => toggleSection(folder.id)}
-                  onContextMenu={(e) => handleFolderContextMenu(folder.id, e)}
-                >
-                  <NewTaskItem onClick={() => handleFolderNewTask(folder.id)} />
-                  {folder.tasks.map((task) => (
-                    <TaskItem
-                      key={task.id}
-                      id={task.id}
-                      label={task.title}
-                      isActive={sidebarData.activeTaskId === task.id}
-                      worktreeName={
-                        workspaces[task.id]?.worktreeName ?? undefined
-                      }
-                      worktreePath={
-                        workspaces[task.id]?.worktreePath ??
-                        workspaces[task.id]?.folderPath
-                      }
-                      workspaceMode={taskStates[task.id]?.workspaceMode}
-                      lastActivityAt={task.lastActivityAt}
-                      isGenerating={task.isGenerating}
-                      isUnread={task.isUnread}
-                      onClick={() => handleTaskClick(task.id)}
-                      onContextMenu={(e) => handleTaskContextMenu(task.id, e)}
+      <Box height="100%" position="relative">
+        <Box
+          style={{
+            height: "100%",
+            overflowY: "auto",
+            overflowX: "hidden",
+            paddingBottom: "52px",
+          }}
+        >
+          <Flex direction="column" py="2">
+            <HomeItem
+              isActive={sidebarData.isHomeActive}
+              onClick={handleHomeClick}
+            />
+
+            <DragDropProvider
+              onDragOver={handleDragOver}
+              sensors={[
+                PointerSensor.configure({
+                  activationConstraints: {
+                    distance: { value: 5 },
+                  },
+                }),
+              ]}
+            >
+              {sidebarData.folders.map((folder, index) => {
+                const isExpanded = !collapsedSections.has(folder.id);
+                return (
+                  <SortableFolderSection
+                    key={folder.id}
+                    id={folder.id}
+                    index={index}
+                    label={folder.name}
+                    icon={
+                      isExpanded ? (
+                        <FolderOpenIcon size={14} weight="regular" />
+                      ) : (
+                        <FolderIcon size={14} weight="regular" />
+                      )
+                    }
+                    isExpanded={isExpanded}
+                    onToggle={() => toggleSection(folder.id)}
+                    onContextMenu={(e) => handleFolderContextMenu(folder.id, e)}
+                  >
+                    <NewTaskItem
+                      onClick={() => handleFolderNewTask(folder.id)}
                     />
-                  ))}
-                </SortableFolderSection>
-              );
-            })}
-            <DragOverlay>
-              {(source) =>
-                source?.type === "folder" ? (
-                  <div className="flex w-full items-center gap-1 rounded bg-gray-2 px-2 py-1 font-mono text-[12px] text-gray-11 shadow-lg">
-                    <FolderIcon size={14} weight="regular" />
-                    <span className="font-medium">{source.data?.label}</span>
-                  </div>
-                ) : null
-              }
-            </DragOverlay>
-          </DragDropProvider>
-        </Flex>
+                    {folder.tasks.map((task) => (
+                      <TaskItem
+                        key={task.id}
+                        id={task.id}
+                        label={task.title}
+                        isActive={sidebarData.activeTaskId === task.id}
+                        worktreeName={
+                          workspaces[task.id]?.worktreeName ?? undefined
+                        }
+                        worktreePath={
+                          workspaces[task.id]?.worktreePath ??
+                          workspaces[task.id]?.folderPath
+                        }
+                        workspaceMode={taskStates[task.id]?.workspaceMode}
+                        lastActivityAt={task.lastActivityAt}
+                        isGenerating={task.isGenerating}
+                        isUnread={task.isUnread}
+                        onClick={() => handleTaskClick(task.id)}
+                        onContextMenu={(e) => handleTaskContextMenu(task.id, e)}
+                      />
+                    ))}
+                  </SortableFolderSection>
+                );
+              })}
+              <DragOverlay>
+                {(source) =>
+                  source?.type === "folder" ? (
+                    <div className="flex w-full items-center gap-1 rounded bg-gray-2 px-2 py-1 font-mono text-[12px] text-gray-11 shadow-lg">
+                      <FolderIcon size={14} weight="regular" />
+                      <span className="font-medium">{source.data?.label}</span>
+                    </div>
+                  ) : null
+                }
+              </DragOverlay>
+            </DragDropProvider>
+          </Flex>
+        </Box>
+        <SidebarFooter />
       </Box>
     </>
   );

apps/array/src/renderer/features/task-detail/components/TaskLogsPanel.tsx

@@ -40,13 +40,17 @@ export function TaskLogsPanel({ taskId, task }: TaskLogsPanelProps) {
   const events = session?.events ?? [];
   const isPromptPending = session?.isPromptPending ?? false;
 
-  const hasAttemptedConnect = useRef(false);
+  const isConnecting = useRef(false);
+
   useEffect(() => {
-    if (hasAttemptedConnect.current) return;
     if (!repoPath) return;
-    if (session) return;
+    if (isConnecting.current) return;
+
+    if (session?.status === "connected" || session?.status === "connecting") {
+      return;
+    }
 
-    hasAttemptedConnect.current = true;
+    isConnecting.current = true;
 
     const isNewSession = !task.latest_run?.id;
     const hasInitialPrompt = isNewSession && task.description;
@@ -55,12 +59,20 @@ export function TaskLogsPanel({ taskId, task }: TaskLogsPanelProps) {
       markActivity(task.id);
     }
 
+    log.info("Connecting to task session", {
+      taskId: task.id,
+      hasLatestRun: !!task.latest_run,
+      sessionStatus: session?.status ?? "none",
+    });
+
     connectToTask({
       task,
       repoPath,
       initialPrompt: hasInitialPrompt
         ? [{ type: "text", text: task.description }]
         : undefined,
+    }).finally(() => {
+      isConnecting.current = false;
     });
   }, [task, repoPath, session, connectToTask, markActivity]);