newpr 0.1.0

package/src/types/output.ts

@@ -0,0 +1,59 @@
+export type FileStatus = "added" | "modified" | "deleted" | "renamed";
+
+export type GroupType =
+	| "feature"
+	| "refactor"
+	| "bugfix"
+	| "chore"
+	| "docs"
+	| "test"
+	| "config";
+
+export type RiskLevel = "low" | "medium" | "high";
+
+export interface PrMeta {
+	pr_number: number;
+	pr_title: string;
+	pr_url: string;
+	base_branch: string;
+	head_branch: string;
+	author: string;
+	author_avatar?: string;
+	author_url?: string;
+	total_files_changed: number;
+	total_additions: number;
+	total_deletions: number;
+	analyzed_at: string;
+	model_used: string;
+}
+
+export interface PrSummary {
+	purpose: string;
+	scope: string;
+	impact: string;
+	risk_level: RiskLevel;
+}
+
+export interface FileGroup {
+	name: string;
+	type: GroupType;
+	description: string;
+	files: string[];
+}
+
+export interface FileChange {
+	path: string;
+	status: FileStatus;
+	additions: number;
+	deletions: number;
+	summary: string;
+	groups: string[];
+}
+
+export interface NewprOutput {
+	meta: PrMeta;
+	summary: PrSummary;
+	groups: FileGroup[];
+	files: FileChange[];
+	narrative: string;
+}

package/src/web/client/App.tsx

@@ -0,0 +1,121 @@
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { useAnalysis } from "./hooks/useAnalysis.ts";
+import { useTheme } from "./hooks/useTheme.ts";
+import { useSessions } from "./hooks/useSessions.ts";
+import { useGithubUser } from "./hooks/useGithubUser.ts";
+import { AppShell } from "./components/AppShell.tsx";
+import { InputScreen } from "./components/InputScreen.tsx";
+import { LoadingTimeline } from "./components/LoadingTimeline.tsx";
+import { ResultsScreen } from "./components/ResultsScreen.tsx";
+import { ErrorScreen } from "./components/ErrorScreen.tsx";
+import { DetailPane, resolveDetail } from "./components/DetailPane.tsx";
+
+function getUrlParam(key: string): string | null {
+	return new URLSearchParams(window.location.search).get(key);
+}
+
+function setUrlParams(params: Record<string, string | null>) {
+	const url = new URL(window.location.href);
+	for (const [k, v] of Object.entries(params)) {
+		if (v === null) {
+			url.searchParams.delete(k);
+		} else {
+			url.searchParams.set(k, v);
+		}
+	}
+	window.history.replaceState(null, "", url.toString());
+}
+
+export function App() {
+	const analysis = useAnalysis();
+	const themeCtx = useTheme();
+	const { sessions, refresh: refreshSessions } = useSessions();
+	const githubUser = useGithubUser();
+	const initialLoadDone = useRef(false);
+	const [activeId, setActiveId] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (initialLoadDone.current) return;
+		initialLoadDone.current = true;
+		const sid = getUrlParam("session");
+		if (sid) {
+			analysis.loadStoredSession(sid);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (analysis.phase === "done" && analysis.sessionId) {
+			const url = new URL(window.location.href);
+			url.searchParams.set("session", analysis.sessionId);
+			window.history.replaceState(null, "", url.toString());
+			refreshSessions();
+		} else if (analysis.phase === "idle") {
+			setUrlParams({ session: null, tab: null });
+			setActiveId(null);
+		}
+	}, [analysis.phase, analysis.sessionId]);
+
+	const handleAnchorClick = useCallback((kind: "group" | "file", id: string) => {
+		const key = `${kind}:${id}`;
+		setActiveId((prev) => prev === key ? null : key);
+	}, []);
+
+	const detailTarget = useMemo(() => {
+		if (!activeId || !analysis.result) return null;
+		const [kind, ...rest] = activeId.split(":");
+		const id = rest.join(":");
+		return resolveDetail(kind as "group" | "file", id, analysis.result.groups, analysis.result.files);
+	}, [activeId, analysis.result]);
+
+	function handleSessionSelect(id: string) {
+		setActiveId(null);
+		analysis.loadStoredSession(id);
+		setUrlParams({ session: id, tab: null });
+	}
+
+	function handleNewAnalysis() {
+		setActiveId(null);
+		analysis.reset();
+	}
+
+	const detailPanel = detailTarget ? (
+		<DetailPane target={detailTarget} onClose={() => setActiveId(null)} />
+	) : null;
+
+	return (
+		<AppShell
+			theme={themeCtx.theme}
+			onThemeChange={themeCtx.setTheme}
+			sessions={sessions}
+			githubUser={githubUser}
+			onSessionSelect={handleSessionSelect}
+			onNewAnalysis={handleNewAnalysis}
+			detailPanel={detailPanel}
+		>
+			{analysis.phase === "idle" && (
+				<InputScreen onSubmit={(pr) => analysis.start(pr)} />
+			)}
+			{analysis.phase === "loading" && (
+				<LoadingTimeline
+					events={analysis.events}
+					startedAt={analysis.startedAt!}
+				/>
+			)}
+			{analysis.phase === "done" && analysis.result && (
+				<ResultsScreen
+					data={analysis.result}
+					onBack={handleNewAnalysis}
+					activeId={activeId}
+					onAnchorClick={handleAnchorClick}
+				/>
+			)}
+			{analysis.phase === "error" && (
+				<ErrorScreen
+					error={analysis.error ?? "An unknown error occurred"}
+					onRetry={analysis.lastPrInput ? () => analysis.start(analysis.lastPrInput!) : undefined}
+					onBack={handleNewAnalysis}
+				/>
+			)}
+		</AppShell>
+	);
+}

package/src/web/client/components/AppShell.tsx

@@ -0,0 +1,203 @@
+import { useState, useCallback } from "react";
+import { Sun, Moon, Monitor, Plus, Clock, Settings } from "lucide-react";
+import type { SessionRecord } from "../../../history/types.ts";
+import type { GithubUser } from "../hooks/useGithubUser.ts";
+import { SettingsPanel } from "./SettingsPanel.tsx";
+import { ResizeHandle } from "./ResizeHandle.tsx";
+
+type Theme = "light" | "dark" | "system";
+
+const THEME_CYCLE: Theme[] = ["light", "dark", "system"];
+const THEME_ICON = { light: Sun, dark: Moon, system: Monitor };
+
+const LEFT_MIN = 180;
+const LEFT_MAX = 400;
+const LEFT_DEFAULT = 256;
+const RIGHT_MIN = 240;
+const RIGHT_MAX = 520;
+const RIGHT_DEFAULT = 320;
+
+const RISK_DOT: Record<string, string> = {
+	low: "bg-green-500",
+	medium: "bg-yellow-500",
+	high: "bg-red-500",
+	critical: "bg-red-600",
+};
+
+function formatTimeAgo(isoDate: string): string {
+	const diff = Date.now() - new Date(isoDate).getTime();
+	const minutes = Math.floor(diff / 60000);
+	if (minutes < 1) return "just now";
+	if (minutes < 60) return `${minutes}m`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h`;
+	const days = Math.floor(hours / 24);
+	return `${days}d`;
+}
+
+export function AppShell({
+	theme,
+	onThemeChange,
+	sessions,
+	githubUser,
+	onSessionSelect,
+	onNewAnalysis,
+	detailPanel,
+	children,
+}: {
+	theme: Theme;
+	onThemeChange: (t: Theme) => void;
+	sessions: SessionRecord[];
+	githubUser: GithubUser | null;
+	onSessionSelect: (sessionId: string) => void;
+	onNewAnalysis: () => void;
+	detailPanel?: React.ReactNode;
+	children: React.ReactNode;
+}) {
+	const [settingsOpen, setSettingsOpen] = useState(false);
+	const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
+	const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
+	const Icon = THEME_ICON[theme];
+	const next = THEME_CYCLE[(THEME_CYCLE.indexOf(theme) + 1) % THEME_CYCLE.length]!;
+
+	const handleLeftResize = useCallback((delta: number) => {
+		setLeftWidth((w) => Math.min(LEFT_MAX, Math.max(LEFT_MIN, w + delta)));
+	}, []);
+
+	const handleRightResize = useCallback((delta: number) => {
+		setRightWidth((w) => Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, w + delta)));
+	}, []);
+
+	return (
+		<div className="flex h-screen bg-background overflow-hidden">
+			<aside className="flex flex-col shrink-0 border-r bg-background" style={{ width: leftWidth }}>
+				<div className="flex h-14 items-center justify-between px-4 border-b">
+					<button
+						type="button"
+						onClick={onNewAnalysis}
+						className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+					>
+						<span className="text-sm font-semibold tracking-tight">newpr</span>
+						<span className="text-[10px] text-muted-foreground">v0.1.0</span>
+					</button>
+					<button
+						type="button"
+						onClick={onNewAnalysis}
+						className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+						title="New analysis"
+					>
+						<Plus className="h-4 w-4" />
+					</button>
+				</div>
+
+				<div className="flex-1 overflow-y-auto">
+					{sessions.length > 0 && (
+						<div className="px-2 py-3">
+							<div className="px-2 pb-2 text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
+								Recent
+							</div>
+							<div className="space-y-0.5">
+								{sessions.map((s) => (
+									<button
+										key={s.id}
+										type="button"
+										onClick={() => onSessionSelect(s.id)}
+										className="w-full flex items-start gap-2.5 rounded-md px-2 py-2 text-left hover:bg-accent/50 transition-colors group"
+									>
+										<span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
+										<div className="flex-1 min-w-0">
+											<div className="text-sm truncate group-hover:text-foreground transition-colors">
+												{s.pr_title}
+											</div>
+											<div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground">
+												<span className="truncate">{s.repo.split("/").pop()}</span>
+												<span>#{s.pr_number}</span>
+												<span className="text-muted-foreground/50">·</span>
+												<Clock className="h-2.5 w-2.5" />
+												<span>{formatTimeAgo(s.analyzed_at)}</span>
+											</div>
+										</div>
+									</button>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+
+				<div className="border-t px-3 py-3 space-y-2">
+					{githubUser && (
+						<a
+							href={githubUser.html_url}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center gap-2.5 rounded-md px-1.5 py-1.5 hover:bg-accent/50 transition-colors"
+						>
+							<img
+								src={githubUser.avatar_url}
+								alt={githubUser.login}
+								className="h-6 w-6 rounded-full"
+							/>
+							<div className="flex-1 min-w-0">
+								<div className="text-xs font-medium truncate">{githubUser.name ?? githubUser.login}</div>
+								{githubUser.name && (
+									<div className="text-[10px] text-muted-foreground truncate">@{githubUser.login}</div>
+								)}
+							</div>
+						</a>
+					)}
+					<div className="flex items-center justify-between px-1.5">
+						<button
+							type="button"
+							onClick={() => onThemeChange(next)}
+							className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+							title={`Switch to ${next} mode`}
+						>
+							<Icon className="h-3.5 w-3.5" />
+							<span className="capitalize">{theme}</span>
+						</button>
+						<button
+							type="button"
+							onClick={() => setSettingsOpen(true)}
+							className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+							title="Settings"
+						>
+							<Settings className="h-3.5 w-3.5" />
+						</button>
+					</div>
+				</div>
+			</aside>
+
+			<ResizeHandle onResize={handleLeftResize} side="right" />
+
+			<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+				<main className="flex-1 overflow-y-auto">
+					<div className="mx-auto max-w-4xl px-10 py-10">
+						{children}
+					</div>
+				</main>
+			</div>
+
+			{detailPanel && (
+				<>
+					<ResizeHandle onResize={handleRightResize} side="left" />
+					<aside className="shrink-0 border-l bg-background overflow-y-auto" style={{ width: rightWidth }}>
+						{detailPanel}
+					</aside>
+				</>
+			)}
+
+			{settingsOpen && (
+				<div className="fixed inset-0 z-50 flex items-center justify-center">
+					<div
+						className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+						onClick={() => setSettingsOpen(false)}
+						onKeyDown={(e) => { if (e.key === "Escape") setSettingsOpen(false); }}
+					/>
+					<div className="relative z-10 w-full max-w-lg max-h-[85vh] overflow-y-auto rounded-xl border bg-background p-6 shadow-lg">
+						<SettingsPanel onClose={() => setSettingsOpen(false)} />
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

package/src/web/client/components/DetailPane.tsx

@@ -0,0 +1,141 @@
+import { Layers, FileText, Plus, Pencil, Trash2, ArrowRight, X } from "lucide-react";
+import type { FileGroup, FileChange, FileStatus } from "../../../types/output.ts";
+
+export interface DetailTarget {
+	kind: "group" | "file";
+	group?: FileGroup;
+	file?: FileChange;
+	files: FileChange[];
+}
+
+const STATUS_ICON: Record<FileStatus, typeof Plus> = {
+	added: Plus,
+	modified: Pencil,
+	deleted: Trash2,
+	renamed: ArrowRight,
+};
+
+const STATUS_COLOR: Record<FileStatus, string> = {
+	added: "text-green-500",
+	modified: "text-yellow-500",
+	deleted: "text-red-500",
+	renamed: "text-blue-500",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+	feature: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+	refactor: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+	bugfix: "bg-red-500/10 text-red-600 dark:text-red-400",
+	chore: "bg-gray-500/10 text-gray-600 dark:text-gray-400",
+	docs: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
+	test: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+	config: "bg-orange-500/10 text-orange-600 dark:text-orange-400",
+};
+
+export function resolveDetail(
+	kind: "group" | "file",
+	id: string,
+	groups: FileGroup[],
+	files: FileChange[],
+): DetailTarget | null {
+	if (kind === "group") {
+		const group = groups.find((g) => g.name === id);
+		if (!group) return null;
+		const groupFiles = files.filter((f) => group.files.includes(f.path));
+		return { kind: "group", group, files: groupFiles };
+	}
+	const file = files.find((f) => f.path === id);
+	if (!file) return null;
+	return { kind: "file", file, files: [file] };
+}
+
+export function DetailPane({ target, onClose }: { target: DetailTarget | null; onClose?: () => void }) {
+	if (!target) return null;
+
+	if (target.kind === "group" && target.group) {
+		const g = target.group;
+		return (
+			<div className="p-4 space-y-4">
+				<div className="flex items-start justify-between gap-2">
+					<div className="space-y-2 min-w-0">
+						<div className="flex items-center gap-2">
+							<Layers className="h-4 w-4 text-muted-foreground shrink-0" />
+							<h4 className="text-sm font-semibold break-words">{g.name}</h4>
+						</div>
+						<span className={`inline-block text-xs font-medium px-2 py-0.5 rounded-full ${TYPE_COLORS[g.type] ?? TYPE_COLORS.chore}`}>
+							{g.type}
+						</span>
+					</div>
+					{onClose && (
+						<button type="button" onClick={onClose} className="shrink-0 p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors">
+							<X className="h-3.5 w-3.5" />
+						</button>
+					)}
+				</div>
+				<p className="text-sm text-muted-foreground leading-relaxed break-words">{g.description}</p>
+				<div className="border-t pt-3">
+					<div className="text-xs text-muted-foreground mb-2">{target.files.length} files</div>
+					<div className="space-y-2">
+						{target.files.map((f) => {
+							const Icon = STATUS_ICON[f.status];
+							return (
+								<div key={f.path} className="space-y-1">
+									<div className="flex items-center gap-2 min-w-0">
+										<Icon className={`h-3 w-3 shrink-0 ${STATUS_COLOR[f.status]}`} />
+										<span className="text-xs font-mono truncate" title={f.path}>{f.path}</span>
+										<span className="text-xs text-green-500 shrink-0">+{f.additions}</span>
+										<span className="text-xs text-red-500 shrink-0">−{f.deletions}</span>
+									</div>
+									<p className="text-xs text-muted-foreground pl-5 break-words">{f.summary}</p>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (target.kind === "file" && target.file) {
+		const f = target.file;
+		const Icon = STATUS_ICON[f.status];
+		return (
+			<div className="p-4 space-y-4">
+				<div className="flex items-start justify-between gap-2">
+					<div className="space-y-2 min-w-0">
+						<div className="flex items-center gap-2 min-w-0">
+							<FileText className="h-4 w-4 text-muted-foreground shrink-0" />
+							<span className="text-sm font-mono font-medium break-all">{f.path}</span>
+						</div>
+						<div className="flex items-center gap-3">
+							<div className="flex items-center gap-1.5">
+								<Icon className={`h-3 w-3 ${STATUS_COLOR[f.status]}`} />
+								<span className="text-xs text-muted-foreground">{f.status}</span>
+							</div>
+							<span className="text-xs text-green-500">+{f.additions}</span>
+							<span className="text-xs text-red-500">−{f.deletions}</span>
+						</div>
+					</div>
+					{onClose && (
+						<button type="button" onClick={onClose} className="shrink-0 p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors">
+							<X className="h-3.5 w-3.5" />
+						</button>
+					)}
+				</div>
+				<p className="text-sm text-muted-foreground leading-relaxed break-words">{f.summary}</p>
+				{f.groups.length > 0 && (
+					<div className="border-t pt-3">
+						<div className="text-xs text-muted-foreground mb-2">Groups</div>
+						<div className="flex flex-wrap gap-1.5">
+							{f.groups.map((g) => (
+								<span key={g} className="text-xs bg-muted px-2 py-0.5 rounded-full">{g}</span>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	return null;
+}

package/src/web/client/components/ErrorScreen.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { AlertCircle, RotateCcw, ArrowLeft } from "lucide-react";
+import { Button } from "../../components/ui/button.tsx";
+
+function categorizeError(message: string): { title: string; hint: string; retryable: boolean } {
+	const lower = message.toLowerCase();
+
+	if (lower.includes("rate limit") || lower.includes("429")) {
+		return {
+			title: "Rate limit reached",
+			hint: "The API rate limit has been exceeded. Wait a moment before retrying.",
+			retryable: true,
+		};
+	}
+	if (lower.includes("timeout") || lower.includes("timed out")) {
+		return {
+			title: "Request timed out",
+			hint: "The analysis took too long. This can happen with very large PRs.",
+			retryable: true,
+		};
+	}
+	if (lower.includes("network") || lower.includes("fetch") || lower.includes("econnrefused")) {
+		return {
+			title: "Connection failed",
+			hint: "Could not reach the server. Check your network connection.",
+			retryable: true,
+		};
+	}
+	if (lower.includes("401") || lower.includes("unauthorized") || lower.includes("token")) {
+		return {
+			title: "Authentication error",
+			hint: "Your GitHub token may be expired or invalid. Run `newpr auth` to reconfigure.",
+			retryable: false,
+		};
+	}
+	if (lower.includes("404") || lower.includes("not found")) {
+		return {
+			title: "PR not found",
+			hint: "The pull request could not be found. Check the URL and make sure you have access.",
+			retryable: false,
+		};
+	}
+	if (lower.includes("openrouter") || lower.includes("api key")) {
+		return {
+			title: "API key error",
+			hint: "Your OpenRouter API key may be missing or invalid. Set OPENROUTER_API_KEY in your environment.",
+			retryable: false,
+		};
+	}
+
+	return {
+		title: "Analysis failed",
+		hint: "Something went wrong during the analysis.",
+		retryable: true,
+	};
+}
+
+export function ErrorScreen({
+	error,
+	onRetry,
+	onBack,
+}: {
+	error: string;
+	onRetry?: () => void;
+	onBack: () => void;
+}) {
+	const [retrying, setRetrying] = useState(false);
+	const { title, hint, retryable } = categorizeError(error);
+
+	function handleRetry() {
+		if (!onRetry) return;
+		setRetrying(true);
+		onRetry();
+	}
+
+	return (
+		<div className="flex flex-col items-center justify-center py-24">
+			<div className="w-full max-w-md flex flex-col items-center gap-6">
+				<div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10">
+					<AlertCircle className="h-6 w-6 text-red-500" />
+				</div>
+
+				<div className="flex flex-col items-center gap-2 text-center">
+					<h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+					<p className="text-sm text-muted-foreground leading-relaxed max-w-sm">
+						{hint}
+					</p>
+				</div>
+
+				<div className="w-full rounded-lg border bg-muted/50 px-4 py-3">
+					<p className="text-xs font-mono text-muted-foreground break-all leading-relaxed">
+						{error}
+					</p>
+				</div>
+
+				<div className="flex items-center gap-3">
+					{retryable && onRetry && (
+						<Button
+							onClick={handleRetry}
+							disabled={retrying}
+							size="default"
+						>
+							<RotateCcw className={`mr-2 h-3.5 w-3.5 ${retrying ? "animate-spin" : ""}`} />
+							{retrying ? "Retrying..." : "Try again"}
+						</Button>
+					)}
+					<Button
+						variant="ghost"
+						onClick={onBack}
+						size="default"
+					>
+						<ArrowLeft className="mr-2 h-3.5 w-3.5" />
+						Back
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/web/client/components/InputScreen.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { ArrowRight } from "lucide-react";
+import { Button } from "../../components/ui/button.tsx";
+
+export function InputScreen({ onSubmit }: { onSubmit: (pr: string) => void }) {
+	const [value, setValue] = useState("");
+
+	function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		const trimmed = value.trim();
+		if (trimmed) onSubmit(trimmed);
+	}
+
+	return (
+		<div className="flex flex-col items-center gap-12 py-24">
+			<div className="flex flex-col items-center gap-3">
+				<h1 className="text-4xl font-bold tracking-tight">newpr</h1>
+				<p className="text-muted-foreground text-center max-w-md">
+					AI-powered PR review tool. Paste a PR URL to get a comprehensive analysis.
+				</p>
+			</div>
+
+			<form onSubmit={handleSubmit} className="w-full max-w-xl">
+				<div className="flex gap-2">
+					<input
+						type="text"
+						value={value}
+						onChange={(e) => setValue(e.target.value)}
+						placeholder="https://github.com/owner/repo/pull/123"
+						className="flex-1 h-11 rounded-lg border bg-background px-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+						autoFocus
+					/>
+					<Button type="submit" size="lg" disabled={!value.trim()}>
+						Analyze
+						<ArrowRight className="ml-2 h-4 w-4" />
+					</Button>
+				</div>
+			</form>
+		</div>
+	);
+}