Add out-of-stock detection and display

- Add stock_status column to products table (in_stock/out_of_stock/unknown)
- Detect out-of-stock status on Amazon by checking:
  - #availability text for "currently unavailable"
  - #outOfStock element presence
  - Missing "Add to Cart" button
- Add generic stock status detection for other sites
- Allow adding out-of-stock products (they just won't have a price)
- Update background scheduler to track stock status changes
- Display stock status badge in product list and detail pages
- Dim out-of-stock products in the dashboard
- Show "Currently Unavailable" badge instead of price when out of stock

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/api/client.ts

@@ -41,6 +41,8 @@ export const authApi = {
 };
 
 // Products API
+export type StockStatus = 'in_stock' | 'out_of_stock' | 'unknown';
+
 export interface SparklinePoint {
   price: number;
   recorded_at: string;
@@ -54,6 +56,7 @@ export interface Product {
   image_url: string | null;
   refresh_interval: number;
   last_checked: string | null;
+  stock_status: StockStatus;
   created_at: string;
   current_price: number | null;
   currency: string | null;

frontend/src/components/ProductCard.tsx

@@ -40,8 +40,10 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
       : ''
     : '';
 
+  const isOutOfStock = product.stock_status === 'out_of_stock';
+
   return (
-    <div className="product-list-item">
+    <div className={`product-list-item ${isOutOfStock ? 'out-of-stock' : ''}`}>
       <style>{`
         .product-list-item {
           background: var(--surface);
@@ -138,6 +140,36 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
           color: #10b981;
         }
 
+        .product-stock-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.6875rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.025em;
+        }
+
+        .product-stock-badge.out-of-stock {
+          background: #fef2f2;
+          color: #dc2626;
+        }
+
+        [data-theme="dark"] .product-stock-badge.out-of-stock {
+          background: rgba(220, 38, 38, 0.2);
+          color: #f87171;
+        }
+
+        .product-list-item.out-of-stock {
+          opacity: 0.7;
+        }
+
+        .product-list-item.out-of-stock .product-thumbnail {
+          filter: grayscale(50%);
+        }
+
         .product-sparkline {
           flex-shrink: 0;
         }
@@ -209,13 +241,21 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
       </div>
 
       <div className="product-price-section">
-        <span className="product-current-price">
-          {formatPrice(product.current_price, product.currency)}
-        </span>
-        {product.price_change_7d !== null && product.price_change_7d !== undefined && (
-          <span className={`product-price-change ${priceChangeClass}`}>
-            {formatPriceChange(product.price_change_7d)} (7d)
+        {isOutOfStock ? (
+          <span className="product-stock-badge out-of-stock">
+            Out of Stock
           </span>
+        ) : (
+          <>
+            <span className="product-current-price">
+              {formatPrice(product.current_price, product.currency)}
+            </span>
+            {product.price_change_7d !== null && product.price_change_7d !== undefined && (
+              <span className={`product-price-change ${priceChangeClass}`}>
+                {formatPriceChange(product.price_change_7d)} (7d)
+              </span>
+            )}
+          </>
         )}
       </div>
 

frontend/src/pages/ProductDetail.tsx

@@ -224,6 +224,37 @@ export default function ProductDetail() {
           color: #16a34a;
         }
 
+        .product-detail-stock-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.5rem 0.75rem;
+          border-radius: 0.375rem;
+          font-size: 0.875rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+        }
+
+        .product-detail-stock-badge.out-of-stock {
+          background: #fef2f2;
+          color: #dc2626;
+        }
+
+        [data-theme="dark"] .product-detail-stock-badge.out-of-stock {
+          background: rgba(220, 38, 38, 0.2);
+          color: #f87171;
+        }
+
+        .product-detail-stock-badge.in-stock {
+          background: #f0fdf4;
+          color: #16a34a;
+        }
+
+        [data-theme="dark"] .product-detail-stock-badge.in-stock {
+          background: rgba(22, 163, 74, 0.2);
+          color: #4ade80;
+        }
+
         .product-detail-meta {
           margin-top: 1.5rem;
           padding-top: 1.5rem;
@@ -288,8 +319,20 @@ export default function ProductDetail() {
               </a>
             </p>
 
+            {product.stock_status === 'out_of_stock' ? (
+              <div className="product-detail-stock-badge out-of-stock">
+                <span>⚠</span> Currently Unavailable
+              </div>
+            ) : product.stock_status === 'in_stock' ? (
+              <div className="product-detail-stock-badge in-stock">
+                <span>✓</span> In Stock
+              </div>
+            ) : null}
+
             <div className="product-detail-price">
-              {formatPrice(product.current_price, product.currency)}
+              {product.stock_status === 'out_of_stock'
+                ? 'Price unavailable'
+                : formatPrice(product.current_price, product.currency)}
             </div>
 
             {priceChange !== null && priceChange !== 0 && (