vp migrate beta test

.github/actions/install-dependencies/action.yml

@@ -21,7 +21,7 @@ runs:
 
     - uses: voidzero-dev/setup-vp@2dec1e33f4ab2c6d5bce1b0c4607961bb1a3f7a1 # v1
       with:
-        node-version: '24'
+        node-version: "24"
         cache: true
 
     - name: Install dependencies

.github/workflows/docs-deploy.yml

@@ -33,9 +33,3 @@ jobs:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           workingDirectory: apps/docs
-
-
-
-
-
-

.github/workflows/scorecard.yml

@@ -2,7 +2,7 @@ name: Scorecard analysis
 on:
   branch_protection_rule:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
 
 permissions: read-all
 

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["VoidZero.vite-plus-extension-pack"]
+}

CONTRIBUTING.md

@@ -64,6 +64,7 @@ There are many ways to contribute to Zerobyte:
 ### Reporting Bugs
 
 If you find a bug, please open an issue with:
+
 - A clear, descriptive title
 - Steps to reproduce the issue
 - Expected vs. actual behavior
@@ -73,6 +74,7 @@ If you find a bug, please open an issue with:
 ### Suggesting Features
 
 When suggesting a feature:
+
 - Check if it's already been suggested
 - Clearly describe the feature and its use case
 - Explain why it would be valuable to other users
@@ -90,6 +92,7 @@ When suggesting a feature:
 ### Improving Documentation
 
 Documentation improvements are always welcome! This includes:
+
 - Fixing typos or clarifying existing docs
 - Adding examples or use cases
 - Writing guides or tutorials
@@ -102,17 +105,20 @@ We welcome translations to make Zerobyte accessible to more users worldwide. Ple
 ## Development Setup
 
 1. **Clone your fork**:
+
    ```bash
    git clone https://github.com/your-username/zerobyte.git
    cd zerobyte
    ```
 
 2. **Set up your development environment**:
-    ```bash
+
+   ```bash
    bun run start:dev
-    ```
+   ```
 
 3. **Create a feature branch**:
+
    ```bash
    git checkout -b feature/your-feature-name
    ```
@@ -158,6 +164,7 @@ We welcome translations to make Zerobyte accessible to more users worldwide. Ple
 ## Questions?
 
 If you have questions about contributing, feel free to:
+
 - Open an issue with your question
 - Check existing issues and discussions
 - Reach out to the maintainers

app/client/components/__test__/file-tree.test.tsx

@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: Testing file - non-null assertions are acceptable here */
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test } from "vite-plus/test";
 import { cleanup, render, screen, fireEvent, within } from "@testing-library/react";
 import { useState } from "react";
 import { FileTree, type FileEntry } from "../file-tree";
@@ -266,7 +266,10 @@ describe("FileTree Selection Logic", () => {
 		];
 
 		render(
-			<FileTreeSelection files={files} initialSelectedPaths={["/hello", "/hello_prev", "/service/app/data/upload"]} />,
+			<FileTreeSelection
+				files={files}
+				initialSelectedPaths={["/hello", "/hello_prev", "/service/app/data/upload"]}
+			/>,
 		);
 
 		fireEvent.click(getCheckboxFor("service"));

app/client/components/__test__/restore-form.test.tsx

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
 import { HttpResponse, http, server } from "~/test/msw/server";
 import { cleanup, render, screen, userEvent, waitFor, within } from "~/test/test-utils";
 import { fromAny } from "@total-typescript/shoehorn";

app/client/components/backup-summary-card.tsx

@@ -63,7 +63,9 @@ export const BackupSummaryCard = ({ summary }: Props) => {
 				<div className="grid gap-6 grid-cols-2 lg:grid-cols-5">
 					{topStats.map((stat) => (
 						<div key={stat.label} className="flex flex-col gap-1">
-							<span className="text-[11px] uppercase tracking-wide text-muted-foreground">{stat.label}</span>
+							<span className="text-[11px] uppercase tracking-wide text-muted-foreground">
+								{stat.label}
+							</span>
 							<span className="text-sm font-semibold text-foreground">{stat.value}</span>
 						</div>
 					))}

app/client/components/cron-input.tsx

@@ -75,7 +75,9 @@ export function CronInput({ value, onChange, error }: CronInputProps) {
 			{value && !isValid && parseError && <p className="text-xs text-destructive mt-1">{parseError}</p>}
 			{isValid && nextRuns.length > 0 && (
 				<div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
-					<p className="text-xs font-medium mb-2 text-muted-foreground uppercase tracking-wider">Next 5 executions:</p>
+					<p className="text-xs font-medium mb-2 text-muted-foreground uppercase tracking-wider">
+						Next 5 executions:
+					</p>
 					<ul className="space-y-1">
 						{nextRuns.map((date, i) => (
 							<li key={date.toISOString()} className="text-xs font-mono flex items-center gap-2">

app/client/components/data-table-sort-header.tsx

@@ -34,7 +34,9 @@ export function DataTableSortHeader<TData, TValue>({
 			>
 				<span className="relative flex w-full items-center justify-center">
 					{title}
-					<span className={cn("lg:absolute lg:-right-6 lg:top-1/2 lg:-translate-y-1/2", iconVisibility)}>{icon}</span>
+					<span className={cn("lg:absolute lg:-right-6 lg:top-1/2 lg:-translate-y-1/2", iconVisibility)}>
+						{icon}
+					</span>
 				</span>
 			</Button>
 		);

app/client/components/file-browsers/__tests__/snapshot-tree-browser.test.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test } from "vite-plus/test";
 import { HttpResponse, http, server } from "~/test/msw/server";
 import { cleanup, fireEvent, render, screen, userEvent, waitFor, within } from "~/test/test-utils";
 

app/client/components/file-tree.tsx

@@ -362,7 +362,9 @@ export const FileTree = memo((props: Props) => {
 								onToggle={toggleCollapseState}
 								onHover={onFolderHover}
 								withCheckbox={withCheckboxes}
-								checked={isPathSelected(fileOrFolder.fullPath) && !isPartiallySelected(fileOrFolder.fullPath)}
+								checked={
+									isPathSelected(fileOrFolder.fullPath) && !isPartiallySelected(fileOrFolder.fullPath)
+								}
 								partiallyChecked={isPartiallySelected(fileOrFolder.fullPath)}
 								onCheckboxChange={handleSelectionChange}
 								selectableMode={selectableFolders}
@@ -526,7 +528,11 @@ const File = memo(({ file, onFileSelect, selected, withCheckbox, checked, onChec
 			onClick={handleClick}
 		>
 			{withCheckbox && (
-				<Checkbox checked={checked} onCheckedChange={handleCheckboxChange} onClick={(e) => e.stopPropagation()} />
+				<Checkbox
+					checked={checked}
+					onCheckedChange={handleCheckboxChange}
+					onClick={(e) => e.stopPropagation()}
+				/>
 			)}
 			<span className="truncate">{name}</span>
 			{typeof size === "number" && (

app/client/components/organization-switcher.tsx

@@ -67,7 +67,9 @@ export function OrganizationSwitcher() {
 										className="size-full object-cover"
 									/>
 								) : (
-									<span className="text-xs font-semibold">{getOrganizationInitials(activeOrganization?.name)}</span>
+									<span className="text-xs font-semibold">
+										{getOrganizationInitials(activeOrganization?.name)}
+									</span>
 								)}
 							</div>
 							<div className="grid flex-1 text-left text-sm leading-tight">
@@ -93,13 +95,21 @@ export function OrganizationSwitcher() {
 							>
 								<div className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md border">
 									{organization.logo ? (
-										<img src={organization.logo} alt={`${organization.name} logo`} className="size-full object-cover" />
+										<img
+											src={organization.logo}
+											alt={`${organization.name} logo`}
+											className="size-full object-cover"
+										/>
 									) : (
-										<span className="text-[10px] font-semibold">{getOrganizationInitials(organization.name)}</span>
+										<span className="text-[10px] font-semibold">
+											{getOrganizationInitials(organization.name)}
+										</span>
 									)}
 								</div>
 								<span className="min-w-0 flex-1 truncate">{organization.name}</span>
-								<DropdownMenuShortcut>{organization.id === activeOrganization?.id && "Current"}</DropdownMenuShortcut>
+								<DropdownMenuShortcut>
+									{organization.id === activeOrganization?.id && "Current"}
+								</DropdownMenuShortcut>
 							</DropdownMenuItem>
 						))}
 					</DropdownMenuContent>

app/client/components/release-notes-dialog.tsx

@@ -31,7 +31,9 @@ export function ReleaseNotesDialog({ open, onOpenChange, updates }: ReleaseNotes
 							<div key={release.version} className="space-y-4">
 								<div className="flex items-center justify-between border-b pb-2">
 									<h3 className="text-lg font-bold text-foreground">{release.version}</h3>
-									<span className="text-sm text-muted-foreground">{formatDate(release.publishedAt)}</span>
+									<span className="text-sm text-muted-foreground">
+										{formatDate(release.publishedAt)}
+									</span>
 								</div>
 								<div className="prose prose-sm dark:prose-invert max-w-none prose-pre:bg-muted prose-pre:text-muted-foreground prose-a:text-primary hover:prose-a:underline wrap-anywhere text-wrap prose-pre:whitespace-pre-wrap prose-pre:wrap-anywhere">
 									<ReactMarkdown remarkPlugins={[remarkGfm]}>{release.body}</ReactMarkdown>

app/client/components/ui/alert.tsx

@@ -29,7 +29,9 @@ Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
 	({ className, ...props }, ref) => (
-		<h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props}>{props.children}</h5>
+		<h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props}>
+			{props.children}
+		</h5>
 	),
 );
 AlertTitle.displayName = "AlertTitle";

app/client/components/ui/breadcrumb.tsx

@@ -21,7 +21,11 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 	return (
-		<li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5 min-w-0", className)} {...props} />
+		<li
+			data-slot="breadcrumb-item"
+			className={cn("inline-flex items-center gap-1.5 min-w-0", className)}
+			{...props}
+		/>
 	);
 }
 

app/client/components/ui/chart.tsx

@@ -130,7 +130,9 @@ function ChartTooltipContent({
 		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
 		const itemConfig = getPayloadConfigFromPayload(config, item, key);
 		const value =
-			!labelKey && typeof label === "string" ? config[label as keyof typeof config]?.label || label : itemConfig?.label;
+			!labelKey && typeof label === "string"
+				? config[label as keyof typeof config]?.label || label
+				: itemConfig?.label;
 
 		if (labelFormatter) {
 			return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
@@ -182,12 +184,16 @@ function ChartTooltipContent({
 										) : (
 											!hideIndicator && (
 												<div
-													className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
-														"h-2.5 w-2.5": indicator === "dot",
-														"w-1": indicator === "line",
-														"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-														"my-0.5": nestLabel && indicator === "dashed",
-													})}
+													className={cn(
+														"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+														{
+															"h-2.5 w-2.5": indicator === "dot",
+															"w-1": indicator === "line",
+															"w-0 border-[1.5px] border-dashed bg-transparent":
+																indicator === "dashed",
+															"my-0.5": nestLabel && indicator === "dashed",
+														},
+													)}
 													style={
 														{
 															"--color-bg": indicatorColor,
@@ -205,7 +211,9 @@ function ChartTooltipContent({
 										>
 											<div className="grid gap-1.5">
 												{nestLabel ? tooltipLabel : null}
-												<span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+												<span className="text-muted-foreground">
+													{itemConfig?.label || item.name}
+												</span>
 											</div>
 											{item.value && (
 												<span className="text-foreground font-mono font-medium tabular-nums">
@@ -243,7 +251,13 @@ function ChartLegendContent({
 	}
 
 	return (
-		<div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
+		<div
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
 			{payload
 				.filter((item) => item.type !== "none")
 				.map((item) => {
@@ -253,7 +267,9 @@ function ChartLegendContent({
 					return (
 						<div
 							key={item.value}
-							className={cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3")}
+							className={cn(
+								"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+							)}
 						>
 							{itemConfig?.icon && !hideIcon ? (
 								<itemConfig.icon />

app/client/components/ui/hover-card.tsx

@@ -1,42 +1,36 @@
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "~/client/lib/utils"
+import { cn } from "~/client/lib/utils";
 
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
 }
 
 function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	);
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };

app/client/components/ui/select.tsx

@@ -17,7 +17,10 @@ function collectSelectItems(children: React.ReactNode, items = new Map<string, R
 			continue;
 		}
 
-		if ((child.type === SelectItem || child.type === SelectPrimitive.Item) && typeof child.props.value === "string") {
+		if (
+			(child.type === SelectItem || child.type === SelectPrimitive.Item) &&
+			typeof child.props.value === "string"
+		) {
 			items.set(child.props.value, child.props.children);
 		}