Add Playwright configuration and initial tests for landing page

- Created playwright.config.ts for test configuration
- Added .last-run.json to store test run status
- Implemented landing.test.ts with tests for navbar visibility and navigation
- Removed unused server proxy configuration from vite.config.ts

app/components/StockViewer.tsx

@@ -19,58 +19,56 @@ export default function StockViewer() {
       const res = await fetch(
         `/api/indicators?symbol=${encodeURIComponent(symbol.trim())}`
       );
-      if (!res.ok) throw new Error("API error");
       const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "API error");
       setIndicators(data.indicators);
-    } catch {
-      setError("Failed to fetch indicators. Check the symbol and try again.");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to fetch indicators.";
+      setError(message);
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="container mx-auto p-4 max-w-2xl">
-      <h1 className="text-2xl font-bold mb-4">Stock Indicators</h1>
-      <div className="flex gap-2 mb-4">
+    <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200 max-w-lg mx-auto">
+      <div className="flex gap-3 mb-6">
         <input
           type="text"
           value={symbol}
-          onChange={(e) => setSymbol(e.target.value)}
+          onChange={(e) => setSymbol(e.target.value.toUpperCase())}
           placeholder="Enter stock symbol (e.g. AAPL)"
-          className="flex-1 border rounded p-2"
+          className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           onKeyDown={(e) => e.key === "Enter" && fetchIndicators()}
         />
         <button
           onClick={fetchIndicators}
           disabled={loading || !symbol.trim()}
-          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+          className="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
         >
           {loading ? "Loading…" : "Get Indicators"}
         </button>
       </div>
-      {error && <p className="text-red-600 mb-4">{error}</p>}
+      
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
+          <p className="text-red-600 text-sm">{error}</p>
+        </div>
+      )}
+      
       {indicators && (
         <div className="bg-gray-50 rounded-lg p-4">
-          <h2 className="text-lg font-semibold mb-2">
+          <h3 className="font-bold text-gray-900 mb-3">
             Results for {symbol.toUpperCase()}
-          </h2>
-          <table className="w-full border-collapse">
-            <thead>
-              <tr className="border-b">
-                <th className="text-left p-2 font-medium">Indicator</th>
-                <th className="text-left p-2 font-medium">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {Object.entries(indicators).map(([key, value]) => (
-                <tr key={key} className="border-b">
-                  <td className="p-2 capitalize">{key}</td>
-                  <td className="p-2 font-mono">{value.toFixed(2)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          </h3>
+          <div className="space-y-2">
+            {Object.entries(indicators).map(([key, value]) => (
+              <div key={key} className="flex justify-between py-1.5 border-b border-gray-200 last:border-0">
+                <span className="text-gray-600 capitalize">{key}</span>
+                <span className="font-mono font-medium">{value.toFixed(2)}</span>
+              </div>
+            ))}
+          </div>
         </div>
       )}
     </div>