♻️ 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/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);