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/AlpacaAccountInfo.tsx

@@ -12,42 +12,45 @@ export default function AlpacaAccountInfo() {
     const fetchAccount = async () => {
       try {
         const res = await fetch("/api/alpaca/account");
-        if (!res.ok) throw new Error("API error");
         const data = await res.json();
+        if (!res.ok) {
+          throw new Error(data.error || "API error");
+        }
         setAccount(data);
-      } catch {
-        setError("Failed to load account info.");
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to load account info.";
+        setError(message);
       }
     };
     fetchAccount();
   }, []);
 
-  if (error) return <p className="text-red-600">{error}</p>;
-  if (!account) return <p className="text-gray-500">Loading account…</p>;
+  if (error) return <p className="text-red-600 p-4 text-center">{error}</p>;
+  if (!account) return <p className="text-gray-600 p-4 text-center">Loading account…</p>;
 
   return (
-    <div className="bg-white border rounded-lg p-4 shadow-sm">
-      <h2 className="text-lg font-semibold mb-2">Alpaca Account</h2>
-      <dl className="space-y-1 text-sm">
-        <div className="flex justify-between">
-          <dt className="text-gray-600">Cash</dt>
-          <dd className="font-mono">
+    <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+      <h2 className="text-xl font-bold text-gray-900 mb-4 text-center">Trading Account</h2>
+      <div className="space-y-3">
+        <div className="flex justify-between items-center py-2 border-b border-gray-100">
+          <span className="text-gray-600 font-medium">Cash</span>
+          <span className="text-lg font-bold text-green-600">
             ${account.cash.toLocaleString(undefined, { minimumFractionDigits: 2 })}
-          </dd>
+          </span>
         </div>
-        <div className="flex justify-between">
-          <dt className="text-gray-600">Buying Power</dt>
-          <dd className="font-mono">
+        <div className="flex justify-between items-center py-2 border-b border-gray-100">
+          <span className="text-gray-600 font-medium">Buying Power</span>
+          <span className="text-lg font-bold text-blue-600">
             ${account.buying_power.toLocaleString(undefined, { minimumFractionDigits: 2 })}
-          </dd>
+          </span>
         </div>
-        <div className="flex justify-between">
-          <dt className="text-gray-600">Portfolio Value</dt>
-          <dd className="font-mono">
+        <div className="flex justify-between items-center py-2">
+          <span className="text-gray-600 font-medium">Portfolio Value</span>
+          <span className="text-lg font-bold text-purple-600">
             ${account.portfolio_value.toLocaleString(undefined, { minimumFractionDigits: 2 })}
-          </dd>
+          </span>
         </div>
-      </dl>
+      </div>
     </div>
   );
 }

app/components/Navbar.tsx

@@ -0,0 +1,26 @@
+import { Link } from "react-router";
+
+export default function Navbar() {
+  return (
+    <nav className="border-b border-gray-200 bg-white/90 backdrop-blur-sm sticky top-0 z-50">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+        <Link to="/" className="flex items-center gap-3 group">
+          <div className="h-8 w-8 rounded-lg bg-blue-600 flex items-center justify-center transition-transform group-hover:scale-105">
+            <span className="text-white font-bold text-sm">A</span>
+          </div>
+          <span className="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
+            AITrader
+          </span>
+        </Link>
+        <div className="hidden items-center gap-8 md:flex">
+          <Link 
+            to="/stocks" 
+            className="text-gray-600 hover:text-blue-600 font-medium transition-colors relative after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-blue-600 after:transition-all hover:after:w-full"
+          >
+            Stocks
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}

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>