feat: update version to 0.9.1 and UI improvements

SFARPak · SFARPak · commit 459cf768577b · 2025-09-16T15:11:22.000+05:00
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
 			"tar-fs": ">=2.1.3",
 			"esbuild": ">=0.25.0",
 			"undici": ">=5.29.0",
-			"brace-expansion": ">=2.0.2",
+			"brace-expansion": "2.0.2",
 			"form-data": ">=4.0.4",
 			"bluebird": ">=3.7.2"
 		}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
@@ -258,7 +258,7 @@ const App = () => {
 	}
 
 	return (
-		<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+		<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 glass-scrollable">
 			{/* Top Navigation Bar (includes header icons, tabs, and recent tasks) */}
 			<TopNavBar activeTab={tab} onTabChange={switchTab} />
 			<ModeTabBar activeTab={tab} onTabChange={switchTab} />
@@ -318,7 +318,11 @@ const App = () => {
 
 					{tab === "settings" && (
 						<div className="glass-animate-fade-in">
-							<SettingsView ref={settingsRef} onDone={() => setTab("chat")} targetSection={currentSection} />
+							<SettingsView
+								ref={settingsRef}
+								onDone={() => setTab("chat")}
+								targetSection={currentSection}
+							/>
 						</div>
 					)}
 
@@ -408,18 +412,18 @@ const App = () => {
 				/>
 			) : (
 				<MemoizedEditMessageDialog
-				open={editMessageDialogState.isOpen}
-				onOpenChange={(open: boolean) => setEditMessageDialogState((prev) => ({ ...prev, isOpen: open }))}
-				onConfirm={() => {
-					vscode.postMessage({
-						type: "editMessageConfirm",
-						messageTs: editMessageDialogState.messageTs,
-						text: editMessageDialogState.text,
-						images: editMessageDialogState.images,
-					})
-					setEditMessageDialogState((prev) => ({ ...prev, isOpen: false }))
-				}}
-			/>
+					open={editMessageDialogState.isOpen}
+					onOpenChange={(open: boolean) => setEditMessageDialogState((prev) => ({ ...prev, isOpen: open }))}
+					onConfirm={() => {
+						vscode.postMessage({
+							type: "editMessageConfirm",
+							messageTs: editMessageDialogState.messageTs,
+							text: editMessageDialogState.text,
+							images: editMessageDialogState.images,
+						})
+						setEditMessageDialogState((prev) => ({ ...prev, isOpen: false }))
+					}}
+				/>
 			)}
 		</div>
 	)
@@ -439,6 +443,6 @@ const AppWithProviders = () => (
 			</TranslationProvider>
 		</ExtensionStateContextProvider>
 	</ErrorBoundary>
-);
+)
 
 export default AppWithProviders
diff --git a/webview-ui/src/components/ModeTabBar.tsx b/webview-ui/src/components/ModeTabBar.tsx
@@ -18,7 +18,7 @@ const modeTabConfig = [
 
 export const ModeTabBar: React.FC<ModeTabBarProps> = ({ activeTab, onTabChange }) => {
 	return (
-		<div className="glass-mode-bar sticky top-14 z-40 w-full border-b border-white/10 bg-white/5 backdrop-blur-xl backdrop-saturate-150">
+		<div className="glass-nav-bar sticky top-14 z-40 w-full border-b border-white/10 bg-white/5 backdrop-blur-xl backdrop-saturate-150">
 			<nav className="flex items-center justify-center space-x-1 px-4 py-2">
 				{modeTabConfig.map(({ id, icon: Icon, label }) => (
 					<Button
@@ -27,15 +27,15 @@ export const ModeTabBar: React.FC<ModeTabBarProps> = ({ activeTab, onTabChange }
 						size="sm"
 						onClick={() => onTabChange(id)}
 						className={`
-							relative flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200
+							relative flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-300 ease-in-out
 							${
 								activeTab === id
 									? "bg-white/30 text-white shadow-lg backdrop-blur-md border border-white/30"
-									: "text-white/70 hover:text-white hover:bg-white/15 hover:backdrop-blur-sm"
+									: "text-white/70 hover:text-white hover:bg-white/15 hover:backdrop-blur-sm hover:shadow-md"
 							}
 							${activeTab === id ? "glass-active-tab" : "glass-tab"}
-						`}
-					>
+							glass-focus
+						`}>
 						<Icon className="h-4 w-4" />
 						<span className="text-sm font-medium">{label}</span>
 						{activeTab === id && (
@@ -48,4 +48,4 @@ export const ModeTabBar: React.FC<ModeTabBarProps> = ({ activeTab, onTabChange }
 	)
 }
 
-export default ModeTabBar
+export default ModeTabBar
diff --git a/webview-ui/src/components/architect/ArchitectView.tsx b/webview-ui/src/components/architect/ArchitectView.tsx
@@ -2,10 +2,12 @@ import React from "react"
 
 const ArchitectView: React.FC = () => {
 	return (
-		<div className="flex h-full items-center justify-center text-white/70">
-			<p className="text-lg">Architect Mode Content Coming Soon!</p>
+		<div className="glass-content flex h-full items-center justify-center text-white/70">
+			<div className="glass-nav-bar rounded-xl p-8 text-center backdrop-blur-sm bg-white/5">
+				<p className="text-lg font-medium">Architect Mode Content Coming Soon!</p>
+			</div>
 		</div>
 	)
 }
 
-export default ArchitectView
+export default ArchitectView
diff --git a/webview-ui/src/components/common/Modal.tsx b/webview-ui/src/components/common/Modal.tsx
@@ -9,9 +9,11 @@ export function Modal({ isOpen, onClose, children, className = "" }: ModalProps)
 	if (!isOpen) return null
 
 	return (
-		<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-[1000]" onClick={onClose}>
+		<div
+			className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-[1000]"
+			onClick={onClose}>
 			<div
-				className={`bg-vscode-editor-background rounded w-[90%] h-[90%] max-w-[1200px] flex flex-col shadow-[0_5px_15px_rgba(0,0,0,0.5)] border border-vscode-editorGroup-border relative ${className}`}
+				className={`glass-nav-bar rounded-lg w-[90%] h-[90%] max-w-[1200px] flex flex-col shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-white/20 relative ${className}`}
 				onClick={(e) => e.stopPropagation()}>
 				{children}
 			</div>
diff --git a/webview-ui/src/components/common/Tab.tsx b/webview-ui/src/components/common/Tab.tsx
@@ -12,7 +12,7 @@ export const Tab = ({ className, children, ...props }: TabProps) => (
 )
 
 export const TabHeader = ({ className, children, ...props }: TabProps) => (
-	<div className={cn("px-5 py-2.5 border-b border-vscode-panel-border", className)} {...props}>
+	<div className={cn("px-5 py-2.5 border-b border-white/10 glass-nav-bar", className)} {...props}>
 		{children}
 	</div>
 )
@@ -40,7 +40,7 @@ export const TabContent = forwardRef<HTMLDivElement, TabProps>(({ className, chi
 	)
 
 	return (
-		<div ref={ref} className={cn("flex-1 overflow-auto p-5", className)} onWheel={onWheel} {...props}>
+		<div ref={ref} className={cn("flex-1 overflow-auto p-5 glass-content", className)} onWheel={onWheel} {...props}>
 			{children}
 		</div>
 	)
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
@@ -251,7 +251,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 
 			{/* Fixed action bar at bottom - only shown in selection mode with selected items */}
 			{isSelectionMode && selectedTaskIds.length > 0 && (
-				<div className="fixed bottom-0 left-0 right-2 bg-vscode-editor-background border-t border-vscode-panel-border p-2 flex justify-between items-center">
+				<div className="fixed bottom-0 left-0 right-2 glass-nav-bar border-t border-white/10 p-2 flex justify-between items-center">
 					<div className="text-vscode-foreground">
 						{t("history:selectedItems", { selected: selectedTaskIds.length, total: tasks.length })}
 					</div>
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
@@ -67,10 +67,10 @@ import PromptsSettings from "./PromptsSettings"
 
 export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
 export const settingsTabList =
-	"w-48 data-[compact=true]:w-12 flex-shrink-0 flex flex-col overflow-y-auto overflow-x-hidden border-r border-vscode-sideBar-background"
+	"w-48 data-[compact=true]:w-12 flex-shrink-0 flex flex-col overflow-y-auto overflow-x-hidden border-r border-white/10 glass-nav-bar"
 export const settingsTabTrigger =
-	"whitespace-nowrap overflow-hidden min-w-0 h-12 px-4 py-3 box-border flex items-center border-l-2 border-transparent text-vscode-foreground opacity-70 hover:bg-vscode-list-hoverBackground data-[compact=true]:w-12 data-[compact=true]:p-4"
-export const settingsTabTriggerActive = "opacity-100 border-vscode-focusBorder bg-vscode-list-activeSelectionBackground"
+	"whitespace-nowrap overflow-hidden min-w-0 h-12 px-4 py-3 box-border flex items-center border-l-2 border-transparent text-vscode-foreground opacity-70 hover:bg-white/10 hover:backdrop-blur-sm data-[compact=true]:w-12 data-[compact=true]:p-4 glass-tab transition-all duration-200"
+export const settingsTabTriggerActive = "opacity-100 border-white/20 bg-white/15 backdrop-blur-sm glass-active-tab"
 
 export interface SettingsViewRef {
 	checkUnsaveChanges: (then: () => void) => void
diff --git a/webview-ui/src/components/ui/button.tsx b/webview-ui/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-80",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-80",
 	{
 		variants: {
 			variant: {
@@ -19,6 +19,8 @@ const buttonVariants = cva(
 				link: "text-primary underline-offset-4 hover:underline",
 				combobox:
 					"border border-vscode-dropdown-border focus-visible:border-vscode-focusBorder bg-vscode-dropdown-background hover:bg-transparent text-vscode-dropdown-foreground font-normal",
+				glass: "glass-button-primary text-white hover:bg-white/20 border-white/20",
+				"glass-secondary": "glass-button-secondary text-white hover:bg-white/15 border-white/15",
 			},
 			size: {
 				default: "h-7 px-3",
diff --git a/webview-ui/src/components/ui/dialog.tsx b/webview-ui/src/components/ui/dialog.tsx
@@ -25,7 +25,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
 		<DialogPrimitive.Overlay
 			data-slot="dialog-overlay"
 			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 glass-overlay",
 				className,
 			)}
 			{...props}
@@ -40,12 +40,12 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					"bg-vscode-editor-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					"glass-card 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 duration-200 sm:max-w-lg",
 					className,
 				)}
 				{...props}>
 				{children}
-				<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+				<DialogPrimitive.Close className="glass-focus data-[state=open]:bg-white/10 data-[state=open]:text-white absolute top-4 right-4 rounded-xs opacity-70 transition-all duration-200 hover:opacity-100 hover:bg-white/20 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 text-white">
 					<XIcon />
 					<span className="sr-only">Close</span>
 				</DialogPrimitive.Close>
diff --git a/webview-ui/src/components/ui/select.tsx b/webview-ui/src/components/ui/select.tsx
@@ -22,16 +22,16 @@ function SelectTrigger({ className, children, ...props }: React.ComponentProps<t
 		<SelectPrimitive.Trigger
 			data-slot="select-trigger"
 			className={cn(
-				"data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground aria-invalid:border-destructive flex h-7 w-fit items-center justify-between gap-2 rounded-xs px-3 py-2 whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
-				"border border-vscode-dropdown-border aria-expanded:border-vscode-focusBorder focus-visible:border-vscode-focusBorder",
-				"bg-vscode-dropdown-background hover:bg-transparent",
-				"text-vscode-dropdown-foreground",
+				"data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground aria-invalid:border-destructive flex h-7 w-fit items-center justify-between gap-2 rounded-xs px-3 py-2 whitespace-nowrap transition-all duration-200 outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
+				"border border-white/20 aria-expanded:border-white/30 focus-visible:border-white/30 glass-tab",
+				"bg-white/5 hover:bg-white/10 hover:backdrop-blur-sm",
+				"text-white/90",
 				className,
 			)}
 			{...props}>
 			{children}
 			<SelectPrimitive.Icon asChild>
-				<ChevronDown className="size-4 opacity-50" />
+				<ChevronDown className="size-4 opacity-70" />
 			</SelectPrimitive.Icon>
 		</SelectPrimitive.Trigger>
 	)
@@ -49,10 +49,10 @@ function SelectContent({
 			<SelectPrimitive.Content
 				data-slot="select-content"
 				className={cn(
-					"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 relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-xs shadow-xs",
-					"bg-popover",
-					"border border-vscode-focusBorder",
-					"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 relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-xs shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+					"glass-nav-bar",
+					"border border-white/20",
+					"text-white/90",
 					position === "popper" &&
 						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 					className,
@@ -62,7 +62,7 @@ function SelectContent({
 				<SelectScrollUpButton />
 				<SelectPrimitive.Viewport
 					className={cn(
-						"p-1",
+						"p-1 glass-scrollable",
 						position === "popper" &&
 							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
 					)}>
@@ -90,9 +90,9 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
 			data-slot="select-item"
 			className={cn(
 				"[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-				"focus:bg-vscode-list-activeSelectionBackground focus:text-vscode-list-activeSelectionForeground",
-				"text-vscode-dropdown-foreground text-sm",
-				"rounded-xs active:opacity-90 cursor-pointer",
+				"focus:bg-white/20 focus:text-white glass-tab",
+				"text-white/90 text-sm",
+				"rounded-xs active:opacity-90 cursor-pointer hover:bg-white/10",
 				className,
 			)}
 			{...props}>
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@`
`58`	`58`	`"tar-fs": ">=2.1.3",`
`59`	`59`	`"esbuild": ">=0.25.0",`
`60`	`60`	`"undici": ">=5.29.0",`
`61`		`- "brace-expansion": ">=2.0.2",`
	`61`	`+ "brace-expansion": "2.0.2",`
`62`	`62`	`"form-data": ">=4.0.4",`
`63`	`63`	`"bluebird": ">=3.7.2"`
`64`	`64`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,10 +2,12 @@ import React from "react"`
`2`	`2`
`3`	`3`	`const ArchitectView: React.FC = () => {`
`4`	`4`	`return (`
`5`		`- <div className="flex h-full items-center justify-center text-white/70">`
`6`		`- <p className="text-lg">Architect Mode Content Coming Soon!</p>`
	`5`	`+ <div className="glass-content flex h-full items-center justify-center text-white/70">`
	`6`	`+ <div className="glass-nav-bar rounded-xl p-8 text-center backdrop-blur-sm bg-white/5">`
	`7`	`+ <p className="text-lg font-medium">Architect Mode Content Coming Soon!</p>`
	`8`	`+ </div>`
`7`	`9`	`</div>`
`8`	`10`	`)`
`9`	`11`	`}`
`10`	`12`
`11`		`-export default ArchitectView`
	`13`	`+export default ArchitectView`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export const Tab = ({ className, children, ...props }: TabProps) => (`
`12`	`12`	`)`
`13`	`13`
`14`	`14`	`export const TabHeader = ({ className, children, ...props }: TabProps) => (`
`15`		`- <div className={cn("px-5 py-2.5 border-b border-vscode-panel-border", className)} {...props}>`
	`15`	`+ <div className={cn("px-5 py-2.5 border-b border-white/10 glass-nav-bar", className)} {...props}>`
`16`	`16`	`{children}`
`17`	`17`	`</div>`
`18`	`18`	`)`
`@@ -40,7 +40,7 @@ export const TabContent = forwardRef<HTMLDivElement, TabProps>(({ className, chi`
`40`	`40`	`)`
`41`	`41`
`42`	`42`	`return (`
`43`		`- <div ref={ref} className={cn("flex-1 overflow-auto p-5", className)} onWheel={onWheel} {...props}>`
	`43`	`+ <div ref={ref} className={cn("flex-1 overflow-auto p-5 glass-content", className)} onWheel={onWheel} {...props}>`
`44`	`44`	`{children}`
`45`	`45`	`</div>`
`46`	`46`	`)`