diff --git a/apps/desktop/src/renderer/screens/main/components/StartView/ActionCard.tsx b/apps/desktop/src/renderer/screens/main/components/StartView/ActionCard.tsx
new file mode 100644
index 00000000000..0510eb65dc5
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/StartView/ActionCard.tsx
@@ -0,0 +1,39 @@
+import type { LucideIcon } from "lucide-react";
+
+interface ActionCardProps {
+ icon: LucideIcon;
+ label: string;
+ onClick?: () => void;
+ disabled?: boolean;
+ isLoading?: boolean;
+}
+
+export function ActionCard({
+ icon: Icon,
+ label,
+ onClick,
+ disabled = false,
+ isLoading = false,
+}: ActionCardProps) {
+ return (
+
+ );
+}
diff --git a/apps/desktop/src/renderer/screens/main/components/StartView/CloneRepoDialog.tsx b/apps/desktop/src/renderer/screens/main/components/StartView/CloneRepoDialog.tsx
new file mode 100644
index 00000000000..2c0deffab63
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/StartView/CloneRepoDialog.tsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { trpc } from "renderer/lib/trpc";
+import { useCreateWorkspace } from "renderer/react-query/workspaces";
+
+interface CloneRepoDialogProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onError: (error: string) => void;
+}
+
+export function CloneRepoDialog({
+ isOpen,
+ onClose,
+ onError,
+}: CloneRepoDialogProps) {
+ const [url, setUrl] = useState("");
+ const utils = trpc.useUtils();
+ const cloneRepo = trpc.projects.cloneRepo.useMutation();
+ const createWorkspace = useCreateWorkspace();
+
+ const handleClone = async () => {
+ if (!url.trim()) {
+ onError("Please enter a repository URL");
+ return;
+ }
+
+ cloneRepo.mutate(
+ { url: url.trim() },
+ {
+ onSuccess: (result) => {
+ // User canceled the directory picker - silent no-op
+ if (result.canceled) {
+ return;
+ }
+
+ if (result.success && result.project) {
+ // Invalidate recents so the new/updated project appears
+ utils.projects.getRecents.invalidate();
+ createWorkspace.mutate({ projectId: result.project.id });
+ onClose();
+ setUrl("");
+ } else if (!result.success) {
+ // Show user-friendly error message
+ onError(result.error ?? "Failed to clone repository");
+ }
+ },
+ onError: (err) => {
+ onError(err.message || "Failed to clone repository");
+ },
+ },
+ );
+ };
+
+ if (!isOpen) return null;
+
+ const isLoading = cloneRepo.isPending || createWorkspace.isPending;
+
+ return (
+
+
+
+ Clone Repository
+
+
+
+
+
+ setUrl(e.target.value)}
+ placeholder="https://github.com/user/repo.git"
+ className="w-full px-3 py-2.5 bg-background border border-border rounded-md text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:border-ring transition-colors"
+ disabled={isLoading}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && !isLoading) {
+ handleClone();
+ }
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/screens/main/components/StartView/StartTopBar.tsx b/apps/desktop/src/renderer/screens/main/components/StartView/StartTopBar.tsx
new file mode 100644
index 00000000000..140c1ad564c
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/StartView/StartTopBar.tsx
@@ -0,0 +1,29 @@
+import { trpc } from "renderer/lib/trpc";
+import { SettingsButton } from "../TopBar/SettingsButton";
+import { WindowControls } from "../TopBar/WindowControls";
+
+export function StartTopBar() {
+ const { data: platform, isLoading } = trpc.window.getPlatform.useQuery();
+ const isMac = !isLoading && platform === "darwin";
+ const showWindowControls = !isLoading && !isMac;
+
+ return (
+
+
+ {/* Empty space on left for symmetry */}
+
+
+ {/* Empty middle section - no tabs */}
+
+
+
+ {showWindowControls && }
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/screens/main/components/StartView/index.tsx b/apps/desktop/src/renderer/screens/main/components/StartView/index.tsx
new file mode 100644
index 00000000000..d5ea4d96271
--- /dev/null
+++ b/apps/desktop/src/renderer/screens/main/components/StartView/index.tsx
@@ -0,0 +1,253 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
+import { ChevronUp, FolderGit, FolderOpen, X } from "lucide-react";
+import { useState } from "react";
+import { HiExclamationTriangle } from "react-icons/hi2";
+import { trpc } from "renderer/lib/trpc";
+import { useOpenNew } from "renderer/react-query/projects";
+import { useCreateWorkspace } from "renderer/react-query/workspaces";
+import { ActionCard } from "./ActionCard";
+import { CloneRepoDialog } from "./CloneRepoDialog";
+import { StartTopBar } from "./StartTopBar";
+
+/**
+ * Normalizes path separators to forward slashes for consistent handling
+ */
+function normalizeSeparators(path: string): string {
+ return path.replace(/\\/g, "/");
+}
+
+/**
+ * Formats a path for display, replacing the home directory with ~ and optionally
+ * removing the trailing project name directory.
+ * Handles both Unix and Windows paths.
+ */
+function formatPath(
+ path: string,
+ projectName: string,
+ homeDir: string | undefined,
+): { display: string; full: string } {
+ // Normalize both path and homeDir to use forward slashes
+ const normalizedPath = normalizeSeparators(path);
+ const normalizedHome = homeDir ? normalizeSeparators(homeDir) : null;
+
+ // Replace home directory with ~ if we know the home dir
+ let fullPath = normalizedPath;
+ if (normalizedHome && normalizedPath.startsWith(normalizedHome)) {
+ fullPath = `~${normalizedPath.slice(normalizedHome.length)}`;
+ } else {
+ // Fallback: try common Unix patterns if home dir not available
+ fullPath = normalizedPath.replace(/^\/(?:Users|home)\/[^/]+/, "~");
+ }
+
+ // Escape special regex characters in project name
+ const escapedProjectName = projectName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+ const suffixPattern = new RegExp(`/${escapedProjectName}$`);
+
+ // Remove trailing project name directory if it matches
+ const displayPath = fullPath.replace(suffixPattern, "");
+
+ return { display: displayPath, full: fullPath };
+}
+
+export function StartView() {
+ const { data: recentProjects = [] } = trpc.projects.getRecents.useQuery();
+ const { data: homeDir } = trpc.window.getHomeDir.useQuery();
+ const openNew = useOpenNew();
+ const createWorkspace = useCreateWorkspace();
+ const [error, setError] = useState
(null);
+ const [isCloneDialogOpen, setIsCloneDialogOpen] = useState(false);
+ const [showAllProjects, setShowAllProjects] = useState(false);
+ const [visibleCount, setVisibleCount] = useState(50);
+
+ const handleOpenProject = () => {
+ setError(null);
+ openNew.mutate(undefined, {
+ onSuccess: (result) => {
+ if (!result.canceled && result.project) {
+ createWorkspace.mutate({ projectId: result.project.id });
+ }
+ },
+ onError: (err) => {
+ setError(err.message || "Failed to open project");
+ },
+ });
+ };
+
+ const handleOpenRecentProject = (projectId: string) => {
+ setError(null);
+ createWorkspace.mutate(
+ { projectId },
+ {
+ onError: (err) => {
+ setError(err.message || "Failed to create workspace");
+ },
+ },
+ );
+ };
+
+ const hasMoreProjects = recentProjects.length > 5;
+ const displayedProjects = showAllProjects
+ ? recentProjects.slice(0, visibleCount)
+ : recentProjects.slice(0, 5);
+ const hasMoreToLoad = showAllProjects && recentProjects.length > visibleCount;
+ const isLoading = openNew.isPending || createWorkspace.isPending;
+
+ return (
+
+
+
+
+ {/* Logo */}
+
+
+ {/* Error Display */}
+ {error && (
+
+
+
+
+
+
{error}
+
+
+
+ )}
+
+ {/* Action Cards and Recent Projects Container */}
+
+ {/* Action Cards */}
+
+
+
+
{
+ setError(null);
+ setIsCloneDialogOpen(true);
+ }}
+ isLoading={isLoading}
+ />
+
+
+ {/* Recent Projects */}
+ {displayedProjects.length > 0 && (
+
+
+
+
+ Recent projects
+
+ {hasMoreProjects && (
+
+ )}
+
+
+
+ {displayedProjects.map((project) => {
+ const pathInfo = formatPath(
+ project.mainRepoPath,
+ project.name,
+ homeDir,
+ );
+ return (
+
+ );
+ })}
+
+ {hasMoreToLoad && (
+
+ )}
+
+
+
+ )}
+
+
+
+
+ {/* Dialogs */}
+
setIsCloneDialogOpen(false)}
+ onError={setError}
+ />
+