♻️ feat: implement session management for PTY sessions in the server

- Add SessionManager class to handle PTY sessions with WebSocket connections.
- Implement methods for creating, retrieving, and destroying sessions.
- Handle PTY output and WebSocket messages for terminal interaction.
- Ensure graceful session destruction and cleanup.

feat: initialize web application with Next.js and Tailwind CSS

- Create initial Next.js application structure with TypeScript support.
- Set up Tailwind CSS for styling with custom theme configurations.
- Add ESLint configuration for code quality and consistency.

feat: implement chat API and UI components

- Create chat API route to handle chat requests and responses.
- Develop chat layout with sidebar, header, chat window, and input components.
- Integrate Zustand for state management of conversations and messages.
- Add utility functions for formatting dates and managing class names.

chore: add environment variables and configuration files

- Create .env.example for environment variable setup.
- Add configuration files for PostCSS, Tailwind CSS, and TypeScript.
- Set up package.json with necessary dependencies and scripts for development.

web/components/ui/Button.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-brand-600 text-white hover:bg-brand-700",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-surface-700 bg-transparent hover:bg-surface-800 text-surface-200",
+        secondary: "bg-surface-800 text-surface-100 hover:bg-surface-700",
+        ghost: "hover:bg-surface-800 hover:text-surface-100 text-surface-400",
+        link: "text-brand-400 underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

web/components/ui/ToastProvider.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as Toast from "@radix-ui/react-toast";
+import { createContext, useContext, useState, useCallback } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ToastMessage {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: "default" | "destructive";
+}
+
+interface ToastContextValue {
+  toast: (message: Omit<ToastMessage, "id">) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({ toast: () => {} });
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const toast = useCallback((message: Omit<ToastMessage, "id">) => {
+    const id = Math.random().toString(36).slice(2);
+    setToasts((prev) => [...prev, { ...message, id }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      <Toast.Provider swipeDirection="right">
+        {children}
+        {toasts.map((t) => (
+          <Toast.Root
+            key={t.id}
+            className={cn(
+              "flex items-start gap-3 p-4 rounded-lg shadow-lg border",
+              "bg-surface-800 border-surface-700 text-surface-100",
+              "data-[state=open]:animate-slide-up",
+              t.variant === "destructive" && "border-red-800 bg-red-950"
+            )}
+            open
+          >
+            <div className="flex-1">
+              <Toast.Title className="text-sm font-medium">{t.title}</Toast.Title>
+              {t.description && (
+                <Toast.Description className="text-xs text-surface-400 mt-0.5">
+                  {t.description}
+                </Toast.Description>
+              )}
+            </div>
+            <Toast.Close className="text-surface-500 hover:text-surface-100">
+              <X className="w-4 h-4" />
+            </Toast.Close>
+          </Toast.Root>
+        ))}
+        <Toast.Viewport className="fixed bottom-4 right-4 flex flex-col gap-2 w-80 z-50" />
+      </Toast.Provider>
+    </ToastContext.Provider>
+  );
+}
+
+export const useToast = () => useContext(ToastContext);