fix: improve stock detail page design

- Fix font colors (gray-900 for headings, gray-600 for secondary text)
- Replace JSON pre block with styled orders table
- Update design spec with visual details

app/routes/analyze.ticker.tsx

@@ -38,17 +38,52 @@ export default function StockDetail() {
       <Navbar />
       <div className="mx-auto max-w-7xl px-6 py-8">
         <h1 className="text-3xl font-bold text-gray-900 mb-6">{ticker} Detail</h1>
-
+        
         <TradingViewChart ticker={ticker} />
-
+        
-        <div className="mt-6">
+        <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
-          <h2>Position</h2>
+          <h2 className="text-xl font-bold text-gray-900 mb-4">Position</h2>
-          <p>{position ? `Qty: ${position}` : "No position"}</p>
+          <p className="text-gray-600">{position ? `Quantity: ${position} shares` : "No position held"}</p>
         </div>
-
+        
-        <div className="mt-6">
+        <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
-          <h2>Recent Orders</h2>
+          <h2 className="text-xl font-bold text-gray-900 mb-4">Recent Orders</h2>
-          {orders.length === 0 ? <p>No orders</p> : <pre>{JSON.stringify(orders, null, 2)}</pre>}
+          {orders.length === 0 ? (
+            <p className="text-gray-500">No orders found for {ticker}</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-gray-200">
+                    <th className="text-left py-2 px-3 font-medium text-gray-700">Side</th>
+                    <th className="text-left py-2 px-3 font-medium text-gray-700">Qty</th>
+                    <th className="text-left py-2 px-3 font-medium text-gray-700">Status</th>
+                    <th className="text-left py-2 px-3 font-medium text-gray-700">Filled Price</th>
+                    <th className="text-left py-2 px-3 font-medium text-gray-700">Filled At</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {orders.map((order: any, i: number) => (
+                    <tr key={order.id || i} className="border-b border-gray-100">
+                      <td className="py-2 px-3">
+                        <span className={order.side === "buy" ? "text-green-600" : "text-red-600"}>
+                          {order.side?.toUpperCase()}
+                        </span>
+                      </td>
+                      <td className="py-2 px-3 text-gray-900">{order.qty}</td>
+                      <td className="py-2 px-3 text-gray-900">{order.status}</td>
+                      <td className="py-2 px-3 text-gray-900">
+                        {order.filled_avg_price ? `$${parseFloat(order.filled_avg_price).toFixed(2)}` : "-"}
+                      </td>
+                      <td className="py-2 px-3 text-gray-600">
+                        {order.filled_at ? new Date(order.filled_at).toLocaleDateString() : "-"}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
         </div>
       </div>
     </div>

docs/superpowers/specs/2026-05-14-stock-detail-page-design.md

@@ -19,11 +19,14 @@
 ├── Stock Header (ticker, current price)
 ├── TradingView Chart (full width)
 ├── Position Card (quantity, avg cost, current value)
+│   - Styled card with gray-900 headings, gray-600 text
 ├── Orders Table (recent orders with status)
-├── Trading Graph Results (expandable sections)
+│   - Table with Side (green/red), Qty, Status, Filled Price, Filled At
-│   ├── Analyst Reports (fundamentals, technical, sentiment)
+│   - Empty state shows "No orders found for {ticker}"
-│   ├── Debate Summary
+└── Trading Graph Results (expandable sections)
-│   └── Final Decision
+    ├── Analyst Reports (fundamentals, technical, sentiment)
+    ├── Debate Summary
+    └── Final Decision
 ```
 
 ## Data Sources