diff --git a/src/App.tsx b/src/App.tsx
index acbef460..6913be05 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -64,6 +64,7 @@ const UnifiedStudio = lazyWithRetry(() => import("./pages/UnifiedStudio"));
 const CADStudio = lazyWithRetry(() => import("./pages/CADStudio"));
 const CADToCatalog = lazyWithRetry(() => import("./pages/CADToCatalog"));
 const TextToCAD = lazyWithRetry(() => import("./pages/TextToCAD"));
+const SketchToCAD = lazyWithRetry(() => import("./pages/SketchToCAD"));
 const Generations = lazyWithRetry(() => import("./pages/Generations"));
 const Credits = lazyWithRetry(() => import("./pages/Credits"));
 const Pricing = lazyWithRetry(() => import("./pages/Pricing"));
@@ -230,6 +231,7 @@ const App = () => (
                   <Route path="/studio-cad" element={<ProtectedRoute><CADGate><CADStudio /></CADGate></ProtectedRoute>} />
                   <Route path="/cad-to-catalog" element={<ProtectedRoute><CADGate><CADToCatalog /></CADGate></ProtectedRoute>} />
                   <Route path="/text-to-cad" element={<ProtectedRoute><CADGate><TextToCAD /></CADGate></ProtectedRoute>} />
+                  <Route path="/sketch-to-cad" element={<ProtectedRoute><CADGate><SketchToCAD /></CADGate></ProtectedRoute>} />
                   
                   {/* Admin routes */}
                   <Route path="/admin" element={<AdminRouteGuard><AdminLayout /></AdminRouteGuard>}>
diff --git a/src/assets/examples/sketch-allowed-1.webp b/src/assets/examples/sketch-allowed-1.webp
new file mode 100644
index 00000000..ef046f7f
Binary files /dev/null and b/src/assets/examples/sketch-allowed-1.webp differ
diff --git a/src/assets/examples/sketch-allowed-2.webp b/src/assets/examples/sketch-allowed-2.webp
new file mode 100644
index 00000000..2de543fc
Binary files /dev/null and b/src/assets/examples/sketch-allowed-2.webp differ
diff --git a/src/assets/examples/sketch-notallowed-1.webp b/src/assets/examples/sketch-notallowed-1.webp
new file mode 100644
index 00000000..65767794
Binary files /dev/null and b/src/assets/examples/sketch-notallowed-1.webp differ
diff --git a/src/assets/examples/sketch-notallowed-2.webp b/src/assets/examples/sketch-notallowed-2.webp
new file mode 100644
index 00000000..efe5e729
Binary files /dev/null and b/src/assets/examples/sketch-notallowed-2.webp differ
diff --git a/src/components/sketch-to-cad/SketchLeftPanel.tsx b/src/components/sketch-to-cad/SketchLeftPanel.tsx
new file mode 100644
index 00000000..6b17aa0d
--- /dev/null
+++ b/src/components/sketch-to-cad/SketchLeftPanel.tsx
@@ -0,0 +1,168 @@
+import { useRef, useCallback } from "react";
+import { ImagePlus } from "lucide-react";
+import creditCoinIcon from "@/assets/icons/credit-coin.png";
+import { useEstimatedCost } from "@/hooks/use-estimated-cost";
+import { SKETCH_TO_CAD_WORKFLOW } from "@/lib/sketch-to-cad-workflows";
+
+interface SketchLeftPanelProps {
+  previewUrl: string | null;
+  description: string;
+  onDescriptionChange: (d: string) => void;
+  isGenerating: boolean;
+  hasModel: boolean;
+  onRegenerate: () => void;
+  onNewSketch: (file: File) => void;
+  onGlbUpload: (file: File) => void;
+  onReset?: () => void;
+  creditBlock?: React.ReactNode;
+}
+
+export default function SketchLeftPanel({
+  previewUrl,
+  description,
+  onDescriptionChange,
+  isGenerating,
+  hasModel,
+  onRegenerate,
+  onNewSketch,
+  onGlbUpload,
+  onReset,
+  creditBlock,
+}: SketchLeftPanelProps) {
+  const sketchInputRef = useRef<HTMLInputElement>(null);
+  const glbInputRef = useRef<HTMLInputElement>(null);
+  const { cost: estimatedCost, loading: costLoading } = useEstimatedCost({ workflowName: SKETCH_TO_CAD_WORKFLOW });
+
+  const handleSketchInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && file.type.startsWith('image/')) onNewSketch(file);
+    e.target.value = '';
+  }, [onNewSketch]);
+
+  const handleGlbInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) onGlbUpload(file);
+    e.target.value = '';
+  }, [onGlbUpload]);
+
+  return (
+    <div className="flex flex-col bg-card border-r border-border h-full min-w-0 overflow-hidden">
+      {/* Header */}
+      <div className="px-4 lg:px-6 pt-6 pb-5 border-b border-border min-w-0">
+        <h1 className="font-display text-xl lg:text-2xl tracking-[0.15em] text-foreground uppercase truncate">
+          Sketch to 3D
+        </h1>
+      </div>
+
+      {/* Body */}
+      <div
+        className="flex-1 overflow-y-auto px-4 lg:px-6 py-6 space-y-6 scrollbar-thin min-w-0"
+        style={{ scrollbarWidth: "thin" }}
+      >
+        {/* Sketch thumbnail */}
+        <section>
+          <h3 className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground mb-3">
+            Sketch
+          </h3>
+          <div className="relative border border-border bg-muted/10 overflow-hidden" style={{ minHeight: 120 }}>
+            {previewUrl ? (
+              <img
+                src={previewUrl}
+                alt="Your sketch"
+                className="w-full object-contain max-h-[200px]"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-24">
+                <ImagePlus className="w-6 h-6 text-muted-foreground/30" />
+              </div>
+            )}
+          </div>
+          <input
+            ref={sketchInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleSketchInput}
+          />
+          <button
+            onClick={() => sketchInputRef.current?.click()}
+            className="mt-2 w-full font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground hover:text-foreground border border-border hover:border-foreground/30 py-2 transition-colors"
+          >
+            Upload New Sketch
+          </button>
+        </section>
+
+        {/* Description */}
+        <section>
+          <h3 className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground mb-3">
+            Description
+          </h3>
+          <textarea
+            value={description}
+            onChange={(e) => onDescriptionChange(e.target.value)}
+            placeholder="Optional hints (e.g. rose gold, add diamond accents)"
+            rows={3}
+            disabled={isGenerating}
+            className="w-full px-3 py-2.5 text-[12px] text-foreground placeholder:text-muted-foreground/40 resize-none font-body leading-relaxed focus:outline-none focus:ring-1 focus:ring-ring bg-muted/20 border border-border disabled:opacity-50"
+          />
+        </section>
+
+        {/* Credit block */}
+        {creditBlock && <div>{creditBlock}</div>}
+
+        {/* Regenerate */}
+        {!creditBlock && (
+          <section>
+            <button
+              onClick={onRegenerate}
+              disabled={isGenerating || !previewUrl}
+              className="w-full py-3 text-[11px] font-bold uppercase tracking-[0.2em] transition-all duration-200 bg-primary text-primary-foreground disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-90 active:scale-[0.99] flex items-center justify-center gap-2"
+            >
+              {isGenerating ? "Generating\u2026" : (
+                <>
+                  Regenerate
+                  <span className="inline-flex items-center gap-1 opacity-80">
+                    <span className="font-mono font-semibold">&le;</span>
+                    <img src={creditCoinIcon} alt="" className="w-4 h-4" />
+                    <span className="font-mono font-semibold">
+                      {costLoading ? "\u2026" : (estimatedCost !== null ? estimatedCost : "\u2014")}
+                    </span>
+                  </span>
+                </>
+              )}
+            </button>
+          </section>
+        )}
+
+        {/* Load GLB part */}
+        <section>
+          <input
+            ref={glbInputRef}
+            type="file"
+            accept=".glb,.gltf"
+            className="hidden"
+            onChange={handleGlbInput}
+          />
+          <button
+            onClick={() => glbInputRef.current?.click()}
+            className="w-full font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground hover:text-foreground border border-border hover:border-foreground/30 py-2 transition-colors"
+          >
+            Load GLB / Merge Part
+          </button>
+        </section>
+
+        {/* Reset */}
+        {onReset && hasModel && (
+          <section>
+            <button
+              onClick={onReset}
+              className="w-full font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground/50 hover:text-foreground py-2 transition-colors"
+            >
+              Reset Model
+            </button>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/sketch-to-cad/SketchUploadScreen.tsx b/src/components/sketch-to-cad/SketchUploadScreen.tsx
new file mode 100644
index 00000000..0bf76d1d
--- /dev/null
+++ b/src/components/sketch-to-cad/SketchUploadScreen.tsx
@@ -0,0 +1,161 @@
+import { useRef, useCallback } from "react";
+import { motion } from "framer-motion";
+import { Diamond, ImagePlus } from "lucide-react";
+import creditCoinIcon from "@/assets/icons/credit-coin.png";
+import { useEstimatedCost } from "@/hooks/use-estimated-cost";
+import { SKETCH_TO_CAD_WORKFLOW } from "@/lib/sketch-to-cad-workflows";
+
+interface SketchUploadScreenProps {
+  sketchFile: File | null;
+  previewUrl: string | null;
+  isGenerating: boolean;
+  description: string;
+  onDescriptionChange: (d: string) => void;
+  onSketchSelect: (file: File) => void;
+  onGenerate: () => void;
+  creditBlock?: React.ReactNode;
+}
+
+export default function SketchUploadScreen({
+  sketchFile,
+  previewUrl,
+  isGenerating,
+  description,
+  onDescriptionChange,
+  onSketchSelect,
+  onGenerate,
+  creditBlock,
+}: SketchUploadScreenProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { cost: estimatedCost, loading: costLoading } = useEstimatedCost({ workflowName: SKETCH_TO_CAD_WORKFLOW });
+
+  const handleFile = useCallback((file: File) => {
+    if (!file.type.startsWith('image/')) return;
+    onSketchSelect(file);
+  }, [onSketchSelect]);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) handleFile(file);
+    e.target.value = '';
+  }, [handleFile]);
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (file) handleFile(file);
+  }, [handleFile]);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && sketchFile && !isGenerating) onGenerate();
+  };
+
+  return (
+    <div className="flex-1 flex items-center justify-center bg-background" onKeyDown={handleKeyDown} tabIndex={-1}>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        className="w-full max-w-[680px] px-6"
+      >
+        {/* Title */}
+        <div className="text-center mb-6">
+          <h1 className="font-display text-4xl md:text-5xl tracking-[0.2em] text-foreground uppercase mb-2">
+            Sketch to 3D
+          </h1>
+          <p className="font-mono text-[11px] text-muted-foreground tracking-[0.15em] uppercase">
+            Upload a jewelry sketch to generate a 3D model
+          </p>
+        </div>
+
+        {/* Drop zone / Preview */}
+        <div
+          className={`relative mb-3 border-2 border-dashed transition-colors duration-200 ${
+            sketchFile
+              ? "border-primary/40 bg-muted/10"
+              : "border-border hover:border-foreground/30 bg-muted/10 cursor-pointer"
+          }`}
+          style={{ minHeight: 220 }}
+          onClick={() => !sketchFile && fileInputRef.current?.click()}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleInputChange}
+          />
+
+          {previewUrl ? (
+            <div className="relative flex items-center justify-center p-4">
+              <img
+                src={previewUrl}
+                alt="Sketch preview"
+                className="max-h-[320px] max-w-full object-contain"
+              />
+              <button
+                onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}
+                className="absolute bottom-3 right-3 font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground hover:text-foreground bg-card/90 border border-border px-3 py-1.5 transition-colors"
+              >
+                Change
+              </button>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-3 py-14">
+              <div className="w-16 h-16 border border-border flex items-center justify-center">
+                <ImagePlus className="w-7 h-7 text-muted-foreground/50" />
+              </div>
+              <p className="font-mono text-[11px] uppercase tracking-[0.15em] text-muted-foreground/60 text-center">
+                Drop your sketch here, or click to browse
+              </p>
+              <p className="font-mono text-[10px] text-muted-foreground/40 text-center">
+                PNG, JPG, WEBP
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Optional description */}
+        <textarea
+          value={description}
+          onChange={(e) => onDescriptionChange(e.target.value)}
+          placeholder="Optional: describe the sketch or add specific requirements (e.g. add diamond accents, rose gold finish)"
+          rows={2}
+          className="w-full mb-3 px-4 py-3 text-[13px] text-foreground placeholder:text-muted-foreground/40 resize-none font-body leading-relaxed transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-ring bg-muted/20 border border-border"
+        />
+
+        {/* Credit block */}
+        {creditBlock && <div className="mb-3">{creditBlock}</div>}
+
+        {/* Generate button */}
+        {!creditBlock && (
+          <button
+            onClick={onGenerate}
+            disabled={isGenerating || !sketchFile}
+            className="w-full py-4 text-[13px] font-bold uppercase tracking-[0.2em] transition-all duration-200 bg-primary text-primary-foreground disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-90 active:scale-[0.99] flex items-center justify-center gap-2"
+          >
+            {isGenerating ? "Generating\u2026" : (
+              <>
+                <Diamond className="w-4 h-4" />
+                Generate 3D Model
+                <span className="inline-flex items-center gap-1 ml-1 opacity-80">
+                  <span className="text-[13px] font-mono font-semibold">&le;</span>
+                  <img src={creditCoinIcon} alt="" className="w-5 h-5" />
+                  <span className="text-[13px] font-mono font-semibold">
+                    {costLoading ? "\u2026" : (estimatedCost !== null ? estimatedCost : "\u2014")}
+                  </span>
+                </span>
+              </>
+            )}
+          </button>
+        )}
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/components/text-to-cad/CADCanvas.tsx b/src/components/text-to-cad/CADCanvas.tsx
index 5f12de6b..067c48f2 100644
--- a/src/components/text-to-cad/CADCanvas.tsx
+++ b/src/components/text-to-cad/CADCanvas.tsx
@@ -552,7 +552,7 @@ const LoadedModel = forwardRef<
     } else {
       // ── Flat mesh classification (default when magic texturing is off) ──
       // gem → blue (#4a90d9), metal → green (#77dd77), flat shading, no maps
-      const gemRe = /diamond|gem|stone|crystal|jewel|brill|ruby|emerald|sapphire|topaz|opal|garnet|amethyst|pearl|cz|cubic|solitaire|pave|prong_stone|accent_stone|center_stone|main_stone/i;
+      const gemRe = /^stone_|diamond|gem|stone|crystal|jewel|brill|ruby|emerald|sapphire|topaz|opal|garnet|amethyst|pearl|cz|cubic|solitaire|pave|prong_stone|accent_stone|center_stone|main_stone/i;
       const metalRe = /band|ring|shank|prong|setting|mount|bezel|basket|gallery|shoulder|bridge|head|collet|metal|gold|silver|platinum|frame|base/i;
 
       list.forEach((md) => {
diff --git a/src/components/text-to-cad/GenerationProgress.tsx b/src/components/text-to-cad/GenerationProgress.tsx
index b7eb98ef..bb8b1910 100644
--- a/src/components/text-to-cad/GenerationProgress.tsx
+++ b/src/components/text-to-cad/GenerationProgress.tsx
@@ -13,6 +13,8 @@ const NODE_LABELS: Record<string, string> = {
   success_original_glb: "Your 3D design is ready",
   failed_final: "Could not complete generation",
   _loading: "Loading model into viewport",
+  generate_from_sketch: "Generating from sketch",
+  validate_against_sketch: "Validating against sketch",
 };
 
 const TERMINAL_NODES = new Set(["success_final", "success_original_glb", "failed_final"]);
diff --git a/src/hooks/use-sketch-to-cad-generation.ts b/src/hooks/use-sketch-to-cad-generation.ts
new file mode 100644
index 00000000..4fa48d0e
--- /dev/null
+++ b/src/hooks/use-sketch-to-cad-generation.ts
@@ -0,0 +1,186 @@
+/**
+ * useSketchToCadGeneration
+ *
+ * Encapsulates the full sketch upload + CAD generation workflow:
+ *   1. Credit preflight
+ *   2. Image read as base64 data URI
+ *   3. POST /api/run/sketch_generate_v1  (base64 sent directly -- backend handles CAS normalization)
+ *   4. Poll /api/status -> /api/result
+ *   5. Parse GLB artifact
+ *
+ * Kept separate from the page so SketchToCAD.tsx stays under 500 lines
+ * and API/polling concerns are isolated from rendering (AI_RULES Rule 8).
+ */
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { toast } from 'sonner';
+import { AuthExpiredError, authenticatedFetch } from '@/lib/authenticated-fetch';
+import { useCredits } from '@/contexts/CreditsContext';
+import { performCreditPreflight, type PreflightResult } from '@/lib/credit-preflight';
+import { TOOL_COSTS } from '@/lib/credits-api';
+import { pollWorkflow } from '@/lib/poll-workflow';
+import {
+  resolveCadTerminalNode,
+  resolveCadProgressNode,
+  parseCadResult,
+  type CadGenerationResult,
+  type CadGlbArtifact,
+} from '@/lib/cad-poll-resolvers';
+import {
+  SKETCH_TO_CAD_WORKFLOW,
+  buildSketchToCadStartBody,
+} from '@/lib/sketch-to-cad-workflows';
+import { trackPaywallHit } from '@/lib/posthog-events';
+
+export interface SketchGenerationResult {
+  glbUrl: string;
+  artifact: CadGlbArtifact;
+  workflowId: string;
+  durationMs: number;
+}
+
+interface UseSketchToCadOptions {
+  onProgress: (step: string, retry: number) => void;
+  onSuccess: (result: SketchGenerationResult) => void;
+  onFailed: () => void;
+}
+
+interface UseSketchToCadReturn {
+  generate: (file: File, description?: string) => Promise<void>;
+  isGenerating: boolean;
+  creditBlock: PreflightResult | null;
+  setCreditBlock: (b: PreflightResult | null) => void;
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function useSketchToCadGeneration(
+  options: UseSketchToCadOptions,
+): UseSketchToCadReturn {
+  const { onProgress, onSuccess, onFailed } = options;
+  const { refreshCredits } = useCredits();
+
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [creditBlock, setCreditBlock] = useState<PreflightResult | null>(null);
+  const pollAbortRef = useRef<AbortController | null>(null);
+
+  // Cancel in-flight poll on unmount
+  useEffect(() => {
+    return () => { pollAbortRef.current?.abort(); };
+  }, []);
+
+  const generate = useCallback(async (file: File, description?: string) => {
+    if (isGenerating) return;
+
+    const requiredCredits = TOOL_COSTS[SKETCH_TO_CAD_WORKFLOW] ?? 85;
+    try {
+      const result = await performCreditPreflight(SKETCH_TO_CAD_WORKFLOW, 1);
+      const balance = result.currentBalance;
+      const cost = result.estimatedCredits > 0 ? result.estimatedCredits : requiredCredits;
+      if (balance < cost) {
+        setCreditBlock({ approved: false, estimatedCredits: cost, currentBalance: balance });
+        trackPaywallHit({ category: 'sketch', steps_completed: 1 });
+        return;
+      }
+      setCreditBlock(null);
+    } catch (err) {
+      if (err instanceof AuthExpiredError) return;
+      console.error('[SketchToCAD Preflight] failed, skipping block:', err);
+      setCreditBlock(null);
+    }
+
+    const startTime = Date.now();
+    setIsGenerating(true);
+    onProgress('generate_from_sketch', 0);
+
+    try {
+      // Read sketch as base64 data URI -- backend accepts up to ~10MB directly
+      const referenceImage = await readFileAsDataUrl(file);
+
+      // Start workflow
+      const startRes = await authenticatedFetch(`/api/run/${SKETCH_TO_CAD_WORKFLOW}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(buildSketchToCadStartBody(referenceImage, description)),
+      });
+
+      if (!startRes.ok) {
+        const err = await startRes.json().catch(() => ({}));
+        throw new Error(err.error || err.detail || `Failed to start sketch generation (${startRes.status})`);
+      }
+
+      const { workflow_id } = await startRes.json();
+      if (!workflow_id) throw new Error('No workflow_id returned');
+      console.log('[SketchToCAD] Workflow started:', workflow_id);
+
+      // Poll until complete
+      pollAbortRef.current?.abort();
+      const pollAbort = new AbortController();
+      pollAbortRef.current = pollAbort;
+
+      const pollResult = await pollWorkflow<CadGenerationResult>({
+        mode: 'status-then-result',
+        fetchStatus: () => authenticatedFetch(
+          `/api/status/${encodeURIComponent(workflow_id)}`,
+          { signal: pollAbort.signal },
+        ),
+        fetchResult: () => authenticatedFetch(`/api/result/${encodeURIComponent(workflow_id)}`),
+        resolveState: (statusData) => {
+          const s = statusData as { runtime?: { state?: string }; progress?: { state?: string }; state?: string };
+          const state = (s.runtime?.state || s.progress?.state || s.state || 'unknown').toLowerCase();
+          return (
+            state === 'failed' || state === 'budget_exhausted' || state === 'terminated' ||
+            state === 'cancelled' || state === 'timed_out' || state === 'timeout'
+          ) ? 'completed' : state;
+        },
+        resolveTerminalNode: resolveCadTerminalNode,
+        resolveProgressNode: resolveCadProgressNode,
+        parseResult: (d) => parseCadResult(d, 'generation'),
+        onProgress: ({ node, retryCount }) => {
+          onProgress(node, retryCount);
+        },
+        onStatusData: (statusData) => {
+          const s = statusData as { runtime?: { state?: string } };
+          const state = (s.runtime?.state || '').toLowerCase();
+          if (state === 'failed' || state === 'budget_exhausted') {
+            onProgress('failed_final', 0);
+          }
+        },
+        intervalMs: 2000,
+        timeoutMs: 60 * 60 * 1000,
+        max404s: 13,
+        maxPollErrors: 10,
+        maxResultRetries: 1,
+        signal: pollAbort.signal,
+      });
+
+      if (pollResult.status === 'cancelled') return;
+
+      const { glb_url, artifact } = pollResult.result;
+      refreshCredits().catch(() => {});
+      onSuccess({
+        glbUrl: glb_url,
+        artifact,
+        workflowId: workflow_id,
+        durationMs: Date.now() - startTime,
+      });
+
+    } catch (err) {
+      if (err instanceof AuthExpiredError) return;
+      console.error('[SketchToCAD] Generation failed:', err);
+      toast.error(err instanceof Error ? err.message : 'Sketch generation failed');
+      onFailed();
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [isGenerating, onProgress, onSuccess, onFailed, refreshCredits]);
+
+  return { generate, isGenerating, creditBlock, setCreditBlock };
+}
diff --git a/src/lib/credits-api.ts b/src/lib/credits-api.ts
index 8dea63a5..a3947814 100644
--- a/src/lib/credits-api.ts
+++ b/src/lib/credits-api.ts
@@ -14,6 +14,7 @@ export const TOOL_COSTS: Record<string, number> = {
   ring_full_pipeline: 85,
   ring_generate_v1: 85,
   ring_edit_v1: 85,
+  sketch_generate_v1: 85,
   // Model-specific costs for ring_generate_v1
   'ring_generate_v1:gemini': 85,
   'ring_generate_v1:claude-sonnet': 120,
diff --git a/src/lib/feature-flags.ts b/src/lib/feature-flags.ts
index 3148f906..8c77ebfe 100644
--- a/src/lib/feature-flags.ts
+++ b/src/lib/feature-flags.ts
@@ -47,6 +47,16 @@ export function isCadUploadEnabled(email: string | undefined | null): boolean {
   return isAllowlistedEmail(email, 'VITE_CAD_UPLOAD_ALLOWLIST_EMAILS');
 }
 
+/**
+ * Sketch-to-CAD feature gate.
+ * Owner: uswa@raresense.so
+ * Reason: new feature — rolling out to allowlist before GA
+ * Removal condition: delete once fully launched to all users
+ */
+export function isSketchToCadEnabled(email: string | undefined | null): boolean {
+  return isAllowlistedEmail(email, 'VITE_SKETCH_TO_CAD_ALLOWLIST_EMAILS');
+}
+
 /**
  * "What best describes you?" onboarding screen — enabled for all users.
  */
diff --git a/src/lib/posthog-events.ts b/src/lib/posthog-events.ts
index 7ced1077..e48b3c7a 100644
--- a/src/lib/posthog-events.ts
+++ b/src/lib/posthog-events.ts
@@ -194,6 +194,15 @@ export function trackCadGenerationCompleted(props: CadGenerationCompletedProps)
   capture('cad_generation_completed', { ...props });
 }
 
+export interface SketchToCadCompletedProps {
+  sketch_count: number;
+  duration_ms: number;
+}
+
+export function trackSketchToCadCompleted(props: SketchToCadCompletedProps) {
+  capture('sketch_to_cad_completed', { ...props });
+}
+
 // ═══════ Conversion / Checkout ══════════════════════════════════════
 
 export function trackCheckoutStart(plan?: string) {
diff --git a/src/lib/sketch-session-store.ts b/src/lib/sketch-session-store.ts
new file mode 100644
index 00000000..f2011f9b
--- /dev/null
+++ b/src/lib/sketch-session-store.ts
@@ -0,0 +1,36 @@
+export interface SketchSession {
+  id: string;
+  file: File;
+  previewUrl: string;
+  hint: string;
+}
+
+interface SketchItem {
+  id: string;
+  file: File;
+  previewUrl: string;
+  hint: string;
+}
+
+class SketchSessionStore {
+  private items: SketchSession[] = [];
+
+  set(sketches: SketchItem[]) {
+    this.items = sketches.map((s) => ({
+      id: s.id,
+      file: s.file,
+      previewUrl: s.previewUrl,
+      hint: s.hint,
+    }));
+  }
+
+  get(): SketchSession[] {
+    return this.items;
+  }
+
+  clear() {
+    this.items = [];
+  }
+}
+
+export const sketchSessionStore = new SketchSessionStore();
diff --git a/src/lib/sketch-to-cad-workflows.test.ts b/src/lib/sketch-to-cad-workflows.test.ts
new file mode 100644
index 00000000..0b8b1223
--- /dev/null
+++ b/src/lib/sketch-to-cad-workflows.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildSketchToCadStartBody,
+  SKETCH_TO_CAD_RETURN_NODES,
+  SKETCH_TO_CAD_WORKFLOW,
+} from './sketch-to-cad-workflows';
+
+describe('sketch-to-cad workflow', () => {
+  it('uses the expected return nodes', () => {
+    expect(SKETCH_TO_CAD_RETURN_NODES).toEqual([
+      'generate_from_sketch',
+      'build_initial',
+      'build_retry',
+      'validate_against_sketch',
+      'build_corrected',
+    ]);
+  });
+
+  it('builds a start body with required fields', () => {
+    const body = buildSketchToCadStartBody('data:image/jpeg;base64,abc123');
+    expect(body).toEqual({
+      payload: {
+        tier: expect.any(String),
+        reference_image: 'data:image/jpeg;base64,abc123',
+        max_attempts: 3,
+        skip_validation: false,
+      },
+      return_nodes: [...SKETCH_TO_CAD_RETURN_NODES],
+    });
+  });
+
+  it('includes prompt when provided', () => {
+    const body = buildSketchToCadStartBody('data:image/jpeg;base64,abc123', '  rose gold  ');
+    expect(body.payload).toMatchObject({ prompt: 'rose gold' });
+  });
+
+  it('omits prompt when empty or whitespace-only', () => {
+    expect(buildSketchToCadStartBody('data:image/jpeg;base64,abc123', '  ').payload)
+      .not.toHaveProperty('prompt');
+    expect(buildSketchToCadStartBody('data:image/jpeg;base64,abc123').payload)
+      .not.toHaveProperty('prompt');
+  });
+
+  it('does not include api key or tenant fields', () => {
+    const body = buildSketchToCadStartBody('data:image/jpeg;base64,abc123');
+    expect(body.payload).not.toHaveProperty('backend_api_key');
+    expect(body.payload).not.toHaveProperty('state_on_behalf_of');
+    expect(body.payload).not.toHaveProperty('state_backend_url');
+  });
+
+  it('workflow name is a string', () => {
+    expect(typeof SKETCH_TO_CAD_WORKFLOW).toBe('string');
+    expect(SKETCH_TO_CAD_WORKFLOW.length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/lib/sketch-to-cad-workflows.ts b/src/lib/sketch-to-cad-workflows.ts
new file mode 100644
index 00000000..d6a0c475
--- /dev/null
+++ b/src/lib/sketch-to-cad-workflows.ts
@@ -0,0 +1,44 @@
+/**
+ * Sketch-to-CAD workflow constants and payload builder.
+ * Workflow: sketch_generate_v1 — Sketch/photo to 3D ring
+ */
+
+import { resolveCadGenerationTier } from '@/lib/cad-tier';
+
+export const SKETCH_TO_CAD_WORKFLOW = 'sketch_generate_v1';
+
+export const SKETCH_TO_CAD_RETURN_NODES = [
+  'generate_from_sketch',
+  'build_initial',
+  'build_retry',
+  'validate_against_sketch',
+  'build_corrected',
+] as const;
+
+export interface SketchToCadStartBody {
+  payload: {
+    tier: string;
+    reference_image: string; // data URI: "data:image/...;base64,..."
+    prompt?: string;
+    max_attempts: number;
+    skip_validation: boolean;
+  };
+  return_nodes: readonly string[];
+}
+
+export function buildSketchToCadStartBody(
+  referenceImageDataUri: string,
+  prompt?: string,
+  model?: string | null,
+): SketchToCadStartBody {
+  return {
+    payload: {
+      tier: resolveCadGenerationTier(model),
+      reference_image: referenceImageDataUri,
+      ...(prompt?.trim() ? { prompt: prompt.trim() } : {}),
+      max_attempts: 3,
+      skip_validation: false,
+    },
+    return_nodes: [...SKETCH_TO_CAD_RETURN_NODES],
+  };
+}
diff --git a/src/pages/CADStudio.tsx b/src/pages/CADStudio.tsx
index 9cec272c..70325fa3 100644
--- a/src/pages/CADStudio.tsx
+++ b/src/pages/CADStudio.tsx
@@ -1,9 +1,9 @@
 import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
-import { ArrowRight, Layers, Camera } from "lucide-react";
+import { ArrowRight, Layers, PenTool } from "lucide-react";
 
 import textToCadImg from "@/assets/text-to-cad-thumb.jpg";
-import cadToCatalogImg from "@/assets/cad-studio/cad-to-catalog-card.webp";
+import sketchToCadImg from "@/assets/cad-studio/cad-to-catalog-card.webp";
 
 const cadFeatures = [
   {
@@ -15,12 +15,12 @@ const cadFeatures = [
     image: textToCadImg,
   },
   {
-    title: "CAD to Catalog",
-    description: "Turn CAD files into catalog-ready product visuals.",
-    route: "/cad-to-catalog",
-    comingSoon: true,
-    icon: Camera,
-    image: cadToCatalogImg,
+    title: "Sketch to CAD",
+    description: "Upload sketches and generate 3D jewelry models.",
+    route: "/sketch-to-cad",
+    comingSoon: false,
+    icon: PenTool,
+    image: sketchToCadImg,
   },
 ];
 
diff --git a/src/pages/SketchToCAD.tsx b/src/pages/SketchToCAD.tsx
new file mode 100644
index 00000000..b2606a06
--- /dev/null
+++ b/src/pages/SketchToCAD.tsx
@@ -0,0 +1,404 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Diamond, X, Check, Loader2, Lightbulb, ImageIcon,
+  ArrowRight, PanelLeftClose, PanelLeft,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";
+import type { ImperativePanelHandle } from "react-resizable-panels";
+import { InsufficientCreditsInline } from "@/components/InsufficientCreditsInline";
+import { useSketchToCadGeneration } from "@/hooks/use-sketch-to-cad-generation";
+import GenerationProgress from "@/components/text-to-cad/GenerationProgress";
+import { useEstimatedCost } from "@/hooks/use-estimated-cost";
+import { SKETCH_TO_CAD_WORKFLOW } from "@/lib/sketch-to-cad-workflows";
+import creditCoinIcon from "@/assets/icons/credit-coin.png";
+import sketchExample1 from "@/assets/examples/sketch-allowed-1.webp";
+import sketchExample2 from "@/assets/examples/sketch-allowed-2.webp";
+import sketchExample3 from "@/assets/examples/sketch-notallowed-1.webp";
+import sketchExample4 from "@/assets/examples/sketch-notallowed-2.webp";
+
+const SKETCH_EXAMPLES = [sketchExample1, sketchExample2, sketchExample3, sketchExample4];
+
+const CANVAS_H = "h-[500px] md:h-[640px]";
+
+export default function SketchToCAD() {
+  const navigate = useNavigate();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const leftPanelRef = useRef<ImperativePanelHandle>(null);
+  const [step, setStep] = useState<"upload" | "review">("upload");
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [sketchFile, setSketchFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [prompt, setPrompt] = useState("");
+  const [progressStep, setProgressStep] = useState("");
+  const [retryAttempt, setRetryAttempt] = useState(0);
+  const { cost: estimatedCost, loading: costLoading } = useEstimatedCost({ workflowName: SKETCH_TO_CAD_WORKFLOW });
+
+  useEffect(() => {
+    return () => { if (previewUrl) URL.revokeObjectURL(previewUrl); };
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- cleanup-only effect; previewUrl intentionally excluded so revoke runs once on unmount, not on every URL change
+  }, []);
+
+  const handleFileSelect = useCallback((file: File) => {
+    if (!file.type.startsWith("image/")) return;
+    setPreviewUrl((prev) => { if (prev) URL.revokeObjectURL(prev); return URL.createObjectURL(file); });
+    setSketchFile(file);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setPreviewUrl((prev) => { if (prev) URL.revokeObjectURL(prev); return null; });
+    setSketchFile(null);
+  }, []);
+
+  const { generate, isGenerating, creditBlock, setCreditBlock } = useSketchToCadGeneration({
+    onProgress: (s, retry) => {
+      setProgressStep(s);
+      setRetryAttempt(retry);
+    },
+    onSuccess: (result) => {
+      navigate(`/text-to-cad?glb=${encodeURIComponent(result.glbUrl)}&workflow=${encodeURIComponent(result.workflowId)}`);
+    },
+    onFailed: () => {
+      setProgressStep("failed_final");
+    },
+  });
+
+  const handleGenerate = useCallback(() => {
+    if (!sketchFile || isGenerating) return;
+    generate(sketchFile, prompt || undefined);
+  }, [sketchFile, isGenerating, prompt, generate]);
+
+  const handleGuideImageLoad = useCallback(async (src: string) => {
+    try {
+      const resp = await fetch(src);
+      const blob = await resp.blob();
+      const filename = src.split('/').pop() || 'sketch.webp';
+      const file = new File([blob], filename, { type: blob.type || 'image/webp' });
+      handleFileSelect(file);
+    } catch { /* silently ignore */ }
+  }, [handleFileSelect]);
+
+  /* ─── UPLOAD SCREEN ──────────────────────────────────────────────────────── */
+  if (step === "upload") {
+    return (
+      <div className="min-h-[calc(100dvh-5rem)] bg-background">
+        <div className="px-4 sm:px-6 md:px-10 py-6 md:py-8">
+          <div className="grid lg:grid-cols-3 gap-8 lg:gap-10">
+
+            {/* LEFT — Upload Canvas (2/3) */}
+            <div className="lg:col-span-2 flex flex-col gap-4">
+              <div>
+                <span className="marta-label block mb-1">Step 1</span>
+                <h1 className="font-display text-3xl md:text-4xl uppercase tracking-tight mt-2">
+                  Image to CAD
+                </h1>
+                <p className="text-muted-foreground mt-1.5 text-sm">
+                  Upload a clear image of your ring sketch, drawing, or reference photo
+                </p>
+              </div>
+
+              {/* Empty drop zone */}
+              {!sketchFile && (
+                <div
+                  onDrop={(e) => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) { handleFileSelect(f); return; } const url = e.dataTransfer.getData('text/plain'); if (url) handleGuideImageLoad(url); }}
+                  onDragOver={(e) => e.preventDefault()}
+                  onClick={() => fileInputRef.current?.click()}
+                  className={`relative border border-dashed border-border/40 text-center cursor-pointer hover:border-foreground/40 hover:bg-foreground/5 transition-all flex flex-col items-center justify-center ${CANVAS_H}`}
+                >
+                  <div className="relative mx-auto w-20 h-20 mb-6">
+                    <div className="absolute inset-0 rounded-full bg-primary/10 animate-ping" style={{ animationDuration: "2.5s" }} />
+                    <div className="absolute inset-0 rounded-full bg-primary/5 flex items-center justify-center border-2 border-primary/20">
+                      <Diamond className="h-9 w-9 text-primary" />
+                    </div>
+                  </div>
+                  <p className="text-lg font-display font-medium mb-1.5">Drop your ring image here</p>
+                  <p className="text-sm text-muted-foreground mb-6">
+                    Drag &amp; drop · click to browse · paste (Ctrl+V)
+                  </p>
+                  <Button variant="outline" size="lg" className="gap-2 pointer-events-none">
+                    <ImageIcon className="h-4 w-4" />
+                    Browse ring files
+                  </Button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFileSelect(f); e.target.value = ""; }}
+                  />
+                </div>
+              )}
+
+              {/* Uploaded preview */}
+              {sketchFile && (
+                <div className="space-y-4">
+                  <div className={`relative border overflow-hidden flex items-center justify-center bg-muted/20 border-border/30 ${CANVAS_H}`}>
+                    <img src={previewUrl ?? undefined} alt="Sketch" className="max-w-full max-h-full object-contain" />
+                    <button
+                      onClick={handleClear}
+                      className="absolute top-3 right-3 w-7 h-7 bg-background/80 backdrop-blur-sm flex items-center justify-center border border-border/40 hover:bg-destructive hover:text-destructive-foreground transition-colors z-10"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                    <div className="absolute top-3 left-3 px-2.5 py-1 flex items-center gap-1.5 bg-primary/10 border border-primary/20">
+                      <Check className="h-3 w-3 text-primary" />
+                      <span className="font-mono text-[9px] tracking-wider uppercase text-primary">Ready</span>
+                    </div>
+                  </div>
+
+                  <textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    placeholder="Optional: describe your design (e.g. rose gold, add diamond accents, pave setting)"
+                    rows={2}
+                    className="w-full px-4 py-3 text-[13px] text-foreground placeholder:text-muted-foreground/40 resize-none font-body leading-relaxed focus:outline-none focus:ring-1 focus:ring-ring bg-muted/20 border border-border/40"
+                  />
+
+                  <div className="flex items-center justify-end">
+                    <Button
+                      size="lg"
+                      onClick={() => { setStep("review"); handleGenerate(); }}
+                      disabled={isGenerating}
+                      className="gap-2.5 font-display text-base uppercase tracking-wide px-10 bg-gradient-to-r from-[hsl(var(--formanova-hero-accent))] to-[hsl(var(--formanova-glow))] text-background hover:opacity-90 transition-opacity border-0 disabled:opacity-60"
+                    >
+                      <Diamond className="h-4 w-4" />
+                      Generate 3D Ring
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* RIGHT — Upload Guide (1/3) */}
+            <div className="flex flex-col gap-4 h-full">
+              <div>
+                <span className="marta-label block mb-1 invisible" aria-hidden="true">Step 1</span>
+                <h3 className="font-display text-3xl md:text-4xl uppercase tracking-tight mt-2">
+                  Upload Guide
+                </h3>
+                <p className="text-muted-foreground mt-1.5 text-sm">
+                  For best results, follow the guidelines below.
+                </p>
+              </div>
+
+              <div className={`border border-border/30 flex flex-col overflow-hidden ${CANVAS_H}`}>
+                <p className="px-12 pt-3 pb-2 text-lg font-bold text-foreground flex-shrink-0">
+                  Recommended input photos for best results
+                </p>
+                <div className="px-12 flex-1 overflow-hidden flex flex-col justify-center">
+                  <div className="grid grid-cols-2 gap-4">
+                    {SKETCH_EXAMPLES.map((src, i) => (
+                      <div
+                        key={i}
+                        draggable
+                        onClick={() => handleGuideImageLoad(src)}
+                        onDragStart={(e) => { e.dataTransfer.setData('text/plain', src); e.dataTransfer.effectAllowed = 'copy'; }}
+                        className="relative aspect-square overflow-hidden border border-border/30 bg-muted/20 cursor-grab active:cursor-grabbing group hover:border-foreground/40 transition-colors"
+                      >
+                        <img src={src} alt={`Sketch example ${i + 1}`} draggable={false} className="w-full h-full object-cover" />
+                        <div className="absolute inset-0 bg-foreground/0 group-hover:bg-foreground/20 transition-colors flex items-end justify-center pb-2">
+                          <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[9px] tracking-[0.15em] uppercase text-background bg-foreground/70 px-2 py-1">
+                            Use this
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className="px-12 pt-2 pb-3 flex items-start gap-2 flex-shrink-0">
+                  <Lightbulb className="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    <span className="font-bold text-foreground">Hint tip:</span> Upload clear, high quality images for best results.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  /* ─── REVIEW SCREEN — same viewport layout as TextToCAD ─────────────────── */
+  return (
+    <div
+      className="flex h-[calc(100vh-5rem)] overflow-hidden bg-background"
+      tabIndex={-1}
+    >
+      <ResizablePanelGroup direction="horizontal" className="h-full">
+
+        {/* Left panel — sketch details + generate */}
+        <ResizablePanel
+          ref={leftPanelRef}
+          id="sketch-left-panel"
+          order={1}
+          defaultSize={25}
+          minSize={18}
+          maxSize={40}
+          collapsible
+          onCollapse={() => setLeftCollapsed(true)}
+          onExpand={() => setLeftCollapsed(false)}
+        >
+          <div className="flex flex-col bg-card border-r border-border h-full min-w-0 overflow-hidden">
+            {/* Header */}
+            <div className="px-4 lg:px-6 pt-6 pb-5 border-b border-border min-w-0">
+              <h1 className="font-display text-xl lg:text-2xl tracking-[0.15em] text-foreground uppercase truncate">
+                Image to CAD
+              </h1>
+            </div>
+
+            {/* Body */}
+            <div
+              className="flex-1 overflow-y-auto px-4 lg:px-6 py-6 space-y-4 min-w-0"
+              style={{ scrollbarWidth: "thin" }}
+            >
+              {/* Sketch thumbnail or drop zone */}
+              {sketchFile ? (
+                <div className="border border-border/40 bg-muted/10 flex items-center justify-center relative" style={{ height: 200 }}>
+                  <img
+                    src={previewUrl ?? undefined}
+                    alt="Your sketch"
+                    className="max-w-full max-h-full object-contain"
+                    style={{ maxHeight: 200 }}
+                  />
+                  <button
+                    onClick={handleClear}
+                    className="absolute top-2 right-2 w-6 h-6 bg-background/80 backdrop-blur-sm flex items-center justify-center border border-border/40 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                    title="Remove sketch"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ) : (
+                <div
+                  onDrop={(e) => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) handleFileSelect(f); }}
+                  onDragOver={(e) => e.preventDefault()}
+                  onClick={() => fileInputRef.current?.click()}
+                  className="border border-dashed border-border/40 cursor-pointer hover:border-foreground/40 hover:bg-foreground/5 transition-all flex flex-col items-center justify-center gap-3"
+                  style={{ height: 200 }}
+                >
+                  <div className="relative w-12 h-12">
+                    <div className="absolute inset-0 rounded-full bg-primary/10 animate-ping" style={{ animationDuration: "2.5s" }} />
+                    <div className="absolute inset-0 rounded-full bg-primary/5 flex items-center justify-center border-2 border-primary/20">
+                      <Diamond className="h-6 w-6 text-primary" />
+                    </div>
+                  </div>
+                  <p className="font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground/60 text-center">
+                    Upload ring image
+                  </p>
+                  <input ref={fileInputRef} type="file" accept="image/*" className="hidden"
+                    onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFileSelect(f); e.target.value = ""; }} />
+                </div>
+              )}
+
+              {/* Prompt — auto-populated from upload screen */}
+              <div>
+                <h3 className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground mb-2">
+                  Design Prompt (Optional)
+                </h3>
+                <textarea
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  placeholder="Optionally describe your design..."
+                  rows={3}
+                  disabled={isGenerating}
+                  className="w-full px-3 py-2.5 text-[13px] text-foreground placeholder:text-muted-foreground/40 resize-none font-body leading-relaxed focus:outline-none focus:ring-1 focus:ring-ring bg-muted/20 border border-border disabled:opacity-50"
+                />
+              </div>
+
+              {/* Credit block */}
+              {creditBlock && (
+                <InsufficientCreditsInline
+                  currentBalance={creditBlock.currentBalance}
+                  requiredCredits={creditBlock.estimatedCredits}
+                  onDismiss={() => setCreditBlock(null)}
+                />
+              )}
+
+              {/* Generate button */}
+              {!creditBlock && (
+                <button
+                  onClick={handleGenerate}
+                  disabled={isGenerating || !sketchFile}
+                  className="w-full py-3.5 text-[13px] font-bold uppercase tracking-[0.2em] transition-all duration-200 bg-primary text-primary-foreground disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-90 active:scale-[0.99] flex items-center justify-center gap-2"
+                >
+                  {isGenerating ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Generating 3D Ring...
+                    </>
+                  ) : (
+                    <>
+                      <Diamond className="w-4 h-4" />
+                      Generate 3D Ring
+                      <span className="inline-flex items-center gap-1 ml-1 opacity-80">
+                        <span className="font-mono text-[13px] font-semibold">&le;</span>
+                        <img src={creditCoinIcon} alt="" className="w-5 h-5" />
+                        <span className="font-mono text-[13px] font-semibold">
+                          {costLoading ? "..." : (estimatedCost !== null ? estimatedCost : "--")}
+                        </span>
+                      </span>
+                    </>
+                  )}
+                </button>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* Viewport */}
+        <ResizablePanel id="sketch-viewport-panel" order={2} defaultSize={75} minSize={30}>
+          <div
+            className="relative h-full border-x-2 border-primary/20 shadow-[inset_0_0_30px_-10px_hsl(var(--primary)/0.15)]"
+            style={{ background: "#f5f5f3" }}
+          >
+            {/* Panel collapse toggle */}
+            <div className="absolute top-3 left-3 z-20 flex gap-1">
+              <button
+                onClick={() => {
+                  const panel = leftPanelRef.current;
+                  if (!panel) return;
+                  if (leftCollapsed) { panel.expand(); } else { panel.collapse(); }
+                }}
+                className="w-7 h-7 flex items-center justify-center bg-background/20 hover:bg-background/40 backdrop-blur-sm transition-colors border border-white/10"
+              >
+                {leftCollapsed
+                  ? <PanelLeft className="w-4 h-4 text-foreground/70" />
+                  : <PanelLeftClose className="w-4 h-4 text-foreground/70" />}
+              </button>
+            </div>
+
+            {/* Empty viewport state */}
+            {!isGenerating && progressStep !== "failed_final" && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
+                <div className="text-center">
+                  <div className="font-display text-2xl text-muted-foreground/40 uppercase tracking-[0.2em] mb-2">
+                    Ready for Generation
+                  </div>
+                  <div className="font-mono text-[11px] text-muted-foreground/25 tracking-[0.15em] uppercase">
+                    3D model will appear here
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Generation progress */}
+            <GenerationProgress
+              visible={isGenerating || progressStep === "failed_final"}
+              currentStep={progressStep}
+              retryAttempt={retryAttempt}
+              onRetry={() => { setProgressStep("generate_from_sketch"); handleGenerate(); }}
+            />
+          </div>
+        </ResizablePanel>
+
+      </ResizablePanelGroup>
+    </div>
+  );
+}
+
+export type { SketchSession } from "@/lib/sketch-session-store";
diff --git a/src/pages/TextToCAD.tsx b/src/pages/TextToCAD.tsx
index 53179288..68bfb824 100644
--- a/src/pages/TextToCAD.tsx
+++ b/src/pages/TextToCAD.tsx
@@ -24,6 +24,8 @@ import {
   buildCadEditStartBody,
   buildCadGenerationStartBody,
 } from "@/lib/cad-workflows";
+import { buildSketchToCadStartBody, SKETCH_TO_CAD_WORKFLOW } from "@/lib/sketch-to-cad-workflows";
+import { sketchSessionStore } from "@/lib/sketch-session-store";
 import { resolveCadGenerationTier } from "@/lib/cad-tier";
 import { trackPaywallHit, trackCadGenerationCompleted } from '@/lib/posthog-events';
 import { InsufficientCreditsInline } from "@/components/InsufficientCreditsInline";
@@ -160,6 +162,138 @@ export default function TextToCAD() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Sketch-to-CAD handoff: mode=sketch skips InitialPromptScreen and auto-generates
+  useEffect(() => {
+    if (searchParams.get('mode') !== 'sketch') return;
+    const sketches = sketchSessionStore.get();
+    if (!sketches.length) return;
+    sketchSessionStore.clear();
+    navigate('/text-to-cad', { replace: true });
+    setWorkspaceActive(true);
+
+    const sketch = sketches[0];
+    (async () => {
+      let dataUri: string;
+      try {
+        dataUri = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(sketch.file);
+        });
+      } catch {
+        toast.error("Failed to read sketch file");
+        return;
+      }
+
+      const requiredCredits = TOOL_COSTS[SKETCH_TO_CAD_WORKFLOW] ?? 85;
+      try {
+        const result = await performCreditPreflight(SKETCH_TO_CAD_WORKFLOW, 1, {});
+        const balance = result.currentBalance;
+        const cost = result.estimatedCredits > 0 ? result.estimatedCredits : requiredCredits;
+        if (balance < cost) {
+          setCreditBlock({ approved: false, estimatedCredits: cost, currentBalance: balance });
+          trackPaywallHit({ category: 'ring', steps_completed: 1 });
+          return;
+        }
+        setCreditBlock(null);
+      } catch (err) {
+        if (err instanceof AuthExpiredError) return;
+        setCreditBlock(null);
+      }
+
+      const cadGenStartTime = Date.now();
+      setIsGenerating(true);
+      setGenerationFailed(false);
+      setRetryAttempt(0);
+      setHasModel(false);
+      setSourceWorkflowId(null);
+      setProgressStep("generate_from_sketch");
+
+      try {
+        const startRes = await authenticatedFetch(`/api/run/${SKETCH_TO_CAD_WORKFLOW}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(buildSketchToCadStartBody(dataUri, sketch.hint || undefined, "gemini")),
+        });
+
+        if (!startRes.ok) {
+          const err = await startRes.json().catch(() => ({}));
+          throw new Error(err.error || err.detail || `Failed to start sketch generation (${startRes.status})`);
+        }
+
+        const { workflow_id } = await startRes.json();
+        if (!workflow_id) throw new Error("No workflow_id returned");
+
+        pollAbortRef.current?.abort();
+        const pollAbort = new AbortController();
+        pollAbortRef.current = pollAbort;
+
+        let genPollResult: PollWorkflowResult<CadGenerationResult>;
+        try {
+          genPollResult = await pollWorkflow<CadGenerationResult>({
+            mode: 'status-then-result',
+            fetchStatus: () => authenticatedFetch(
+              `/api/status/${encodeURIComponent(workflow_id)}`,
+              { signal: pollAbort.signal }
+            ),
+            fetchResult: () => authenticatedFetch(`/api/result/${encodeURIComponent(workflow_id)}`),
+            resolveState: (statusData) => {
+              const s = statusData as { runtime?: { state?: string }; progress?: { state?: string }; state?: string };
+              const state = (s.runtime?.state || s.progress?.state || s.state || 'unknown').toLowerCase();
+              return (state === 'failed' || state === 'budget_exhausted' || state === 'terminated' || state === 'cancelled' || state === 'timed_out' || state === 'timeout') ? 'completed' : state;
+            },
+            resolveProgressNode: resolveCadProgressNode,
+            parseResult: (d) => parseCadResult(d, 'generation'),
+            onProgress: ({ node, retryCount }) => {
+              setProgressStep(node);
+              if (retryCount > 0) setRetryAttempt(retryCount);
+            },
+            onStatusData: (statusData) => {
+              const s = statusData as { runtime?: { state?: string } };
+              const state = (s.runtime?.state || "").toLowerCase();
+              if (state === "failed" || state === "budget_exhausted") {
+                setProgressStep("failed_final");
+              }
+            },
+            intervalMs: 2000,
+            timeoutMs: 60 * 60 * 1000,
+            max404s: 13,
+            maxPollErrors: 10,
+            maxResultRetries: 1,
+            signal: pollAbort.signal,
+          });
+        } catch (err) {
+          if (err instanceof AuthExpiredError) return;
+          throw err;
+        }
+
+        if (genPollResult.status === 'cancelled') return;
+
+        setProgressStep("_loading");
+        const { glb_url, artifact: genArtifact } = genPollResult.result;
+        setGlbArtifact(genArtifact);
+        setGlbUrl(glb_url);
+        trackCadGenerationCompleted({
+          category: 'ring',
+          prompt_length: (sketch.hint || '').length,
+          duration_ms: Date.now() - cadGenStartTime,
+        });
+        setIsModelLoading(true);
+        setIsGenerating(false);
+        refreshCredits().catch(() => {});
+        setHasModel(true);
+        setSourceWorkflowId(workflow_id);
+      } catch (err) {
+        console.error("Sketch generation failed:", err);
+        setIsGenerating(false);
+        setProgressStep("");
+        setGenerationFailed(true);
+      }
+    })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   meshesRef.current = meshes;
 
   const selectedMeshNames = useMemo(