add webgpu availability check

src/components/AgenticInterface.tsx

@@ -65,6 +65,7 @@ export function AgenticInterface() {
         isLoading={isProcessing || loadingStatus.isLoading}
         modelReady={loadingStatus.isModelReady}
         progress={loadingStatus.downloadProgress}
+        error={loadingStatus.error}
       />
 
       <main className="order-1 md:order-2 flex-1 flex flex-col items-center justify-center p-8 bg-background relative overflow-hidden h-[55vh] md:h-full">
@@ -73,9 +74,12 @@ export function AgenticInterface() {
           <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-[120px]" />
         </div>
 
-        <div className="flex flex-col items-center gap-12 z-10 w-full max-w-[320px] md:max-w-sm">
+        <div className="flex flex-col items-center gap-6 z-10 w-full max-w-[320px] md:max-w-sm">
           <ColorVisualizer color={squareColor} />
-          <ColorControlForm onColorChange={setSquareColor} />
+          <ColorControlForm
+            onColorChange={setSquareColor}
+            disabled={!!loadingStatus.error}
+          />
         </div>
       </main>
     </div>

src/components/ChatSidebar.tsx

@@ -14,6 +14,7 @@ type ChatSidebarProps = {
   disabled?: boolean;
   modelReady?: boolean;
   progress?: number;
+  error?: string;
 };
 
 export function ChatSidebar({
@@ -23,9 +24,10 @@ export function ChatSidebar({
   disabled,
   modelReady = true,
   progress = 0,
+  error,
 }: ChatSidebarProps) {
   const [inputValue, setInputValue] = useState("");
-  const isDisabled = isLoading || disabled;
+  const isDisabled = isLoading || disabled || !!error;
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
@@ -68,23 +70,32 @@ export function ChatSidebar({
             </InputGroupButton>
           </InputGroup>
         </form>
-        {!modelReady && !isLoading && (
-          <p className="mt-2 text-xs text-muted-foreground text-center">
-            Note: The first message will take longer as the model needs to be loaded.
+        {error ? (
+          <p className="mt-2 text-xs text-red-500 text-center font-medium">
+            {error}
           </p>
-        )}
-        {!modelReady && isLoading && (
-          <div className="mt-2 w-full">
-            <div className="h-1.5 w-full bg-secondary/50 rounded-full overflow-hidden">
-              <div
-                className="h-full bg-primary transition-all duration-300 ease-out"
-                style={{ width: `${progress}%` }}
-              />
-            </div>
-            <p className="text-[10px] text-muted-foreground text-center mt-1">
-              Loading model... {Math.round(progress)}%
-            </p>
-          </div>
+        ) : (
+          <>
+            {!modelReady && !isLoading && (
+              <p className="mt-2 text-xs text-muted-foreground text-center">
+                Note: The first message will take longer as the model needs to
+                be loaded.
+              </p>
+            )}
+            {!modelReady && isLoading && (
+              <div className="mt-2 w-full">
+                <div className="h-1.5 w-full bg-secondary/50 rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-primary transition-all duration-300 ease-out"
+                    style={{ width: `${progress}%` }}
+                  />
+                </div>
+                <p className="text-[10px] text-muted-foreground text-center mt-1">
+                  Loading model... {Math.round(progress)}%
+                </p>
+              </div>
+            )}
+          </>
         )}
       </footer>
     </aside>

src/hooks/useFunctionCalling.ts

@@ -23,6 +23,14 @@ export function useFunctionCalling() {
   const [isProcessing, setIsProcessing] = useState(false);
 
   useEffect(() => {
+    if (!("gpu" in navigator)) {
+      setLoadingStatus((prev) => ({
+        ...prev,
+        error: "WebGPU is not available in your browser.",
+      }));
+      return;
+    }
+
     const worker = new Worker(new URL("../worker.ts", import.meta.url), {
       type: "module",
     });