feat: redesign shared worksheet viewer with read-only studio and proper error handling

Transform shared worksheet experience from simple info page to full read-only studio:

**Shared Worksheet Viewer (/worksheets/shared/[id])**
- Show full worksheet studio UI in read-only mode
- Display live preview with actual worksheet rendering
- Blue banner indicates "Shared Worksheet (Read-Only)"
- Config sidebar shows all settings but disabled for interaction
- Clear "Edit This Worksheet" button with overwrite warning modal

**Edit Modal**
- Warns that editing will overwrite current worksheet settings
- Provides tips (download current worksheet first, or use different browser)
- Two-step confirmation prevents accidental data loss
- Saves shared config to user's session before navigating to editor

**Read-Only Mode Infrastructure**
- WorksheetConfigContext: Added isReadOnly prop
- ConfigSidebar: Shows "👁️ Read-Only" badge, disables inputs with pointer-events
- PreviewCenter: Hides Download/Share/Upload buttons when read-only
- StudentNameInput: Added readOnly prop with disabled styling

**Mastery Mode Field Persistence**
- extractConfigFields: Now includes currentStepId, currentAdditionSkillId, currentSubtractionSkillId
- Fixes issue where mastery mode worksheets couldn't be shared properly
- Future shares will include all required mastery mode fields

**Error Handling**
- Created /api/worksheets/preview route for server-side preview generation
- generatePreview: Returns detailed error messages instead of fallbacks
- Shared viewer: Shows prominent error card with diagnostic details
- Error format: "Missing skill IDs - addition: none, subtraction: none. This config may have been shared before mastery mode fields were added."

**Architecture Changes**
- Shared page now calls API for preview (avoids importing Node.js child_process in client)
- Clear separation between client components and server-side generation
- Proper error propagation from preview generation to UI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

apps/web/src/app/api/worksheets/preview/route.ts

@@ -0,0 +1,62 @@
+import { NextResponse } from 'next/server'
+import { generateWorksheetPreview } from '@/app/create/worksheets/generatePreview'
+import type { WorksheetFormState } from '@/app/create/worksheets/types'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/worksheets/preview
+ * Generate a preview of a worksheet configuration
+ */
+export async function POST(request: Request) {
+  try {
+    const body = await request.json()
+    const { config } = body as { config: WorksheetFormState }
+
+    if (!config) {
+      return NextResponse.json({ success: false, error: 'Missing config' }, { status: 400 })
+    }
+
+    // Add date and seed if missing
+    const fullConfig: WorksheetFormState = {
+      ...config,
+      date:
+        config.date ||
+        new Date().toLocaleDateString('en-US', {
+          month: 'long',
+          day: 'numeric',
+          year: 'numeric',
+        }),
+      seed: config.seed || Date.now() % 2147483647,
+    }
+
+    // Generate preview
+    const result = generateWorksheetPreview(fullConfig)
+
+    if (!result.success) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: result.error,
+          details: result.details,
+        },
+        { status: 422 }
+      )
+    }
+
+    return NextResponse.json({
+      success: true,
+      pages: result.pages,
+    })
+  } catch (error) {
+    console.error('Preview generation error:', error)
+    return NextResponse.json(
+      {
+        success: false,
+        error: 'Internal server error',
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    )
+  }
+}

apps/web/src/app/create/worksheets/components/AdditionWorksheetClient.tsx

@@ -108,7 +108,7 @@ export function AdditionWorksheetClient({
 
   return (
     <PageWithNav navTitle={t('navTitle')} navEmoji="📝">
-      <WorksheetConfigProvider formState={formState} onChange={updateFormState}>
+      <WorksheetConfigProvider formState={formState} updateFormState={updateFormState}>
         <div
           data-component="addition-worksheet-page"
           className={css({

apps/web/src/app/create/worksheets/components/ConfigPanel.tsx

@@ -47,7 +47,7 @@ export function ConfigPanel({ formState, onChange, isDark = false }: ConfigPanel
   const currentMethod = formState.mode === 'mastery' ? 'mastery' : 'smart'
 
   return (
-    <WorksheetConfigProvider formState={formState} onChange={onChange}>
+    <WorksheetConfigProvider formState={formState} updateFormState={onChange}>
       <div data-component="config-panel" className={stack({ gap: '3' })}>
         {/* Student Name */}
         <StudentNameInput

apps/web/src/app/create/worksheets/components/ConfigSidebar.tsx

@@ -12,15 +12,21 @@ import { TabNavigation } from './config-sidebar/TabNavigation'
 import { useWorksheetConfig } from './WorksheetConfigContext'
 
 interface ConfigSidebarProps {
-  isSaving: boolean
+  isSaving?: boolean
-  lastSaved: Date | null
+  lastSaved?: Date | null
+  isReadOnly?: boolean
 }
 
-export function ConfigSidebar({ isSaving, lastSaved }: ConfigSidebarProps) {
+export function ConfigSidebar({
+  isSaving = false,
+  lastSaved = null,
+  isReadOnly = false,
+}: ConfigSidebarProps) {
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
   const [activeTab, setActiveTab] = useState('operator')
-  const { formState, onChange } = useWorksheetConfig()
+  const { formState, onChange, isReadOnly: contextReadOnly } = useWorksheetConfig()
+  const effectiveReadOnly = isReadOnly || contextReadOnly
 
   return (
     <div
@@ -58,7 +64,11 @@ export function ConfigSidebar({ isSaving, lastSaved }: ConfigSidebarProps) {
         <div
           className={css({
             fontSize: 'xs',
-            color: isSaving
+            color: effectiveReadOnly
+              ? isDark
+                ? 'blue.400'
+                : 'blue.600'
+              : isSaving
                 ? isDark
                   ? 'gray.400'
                   : 'gray.500'
@@ -67,7 +77,7 @@ export function ConfigSidebar({ isSaving, lastSaved }: ConfigSidebarProps) {
                   : 'green.600',
           })}
         >
-          {isSaving ? 'Saving...' : lastSaved ? '✓ Saved' : ''}
+          {effectiveReadOnly ? '👁️ Read-Only' : isSaving ? 'Saving...' : lastSaved ? '✓ Saved' : ''}
         </div>
       </div>
 
@@ -77,6 +87,7 @@ export function ConfigSidebar({ isSaving, lastSaved }: ConfigSidebarProps) {
           value={formState.name}
           onChange={(name) => onChange({ name })}
           isDark={isDark}
+          readOnly={effectiveReadOnly}
         />
       </div>
 
@@ -99,6 +110,8 @@ export function ConfigSidebar({ isSaving, lastSaved }: ConfigSidebarProps) {
           overflow: 'auto',
           display: 'flex',
           flexDirection: 'column',
+          opacity: effectiveReadOnly ? '0.7' : '1',
+          pointerEvents: effectiveReadOnly ? 'none' : 'auto',
         })}
       >
         {activeTab === 'operator' && <ContentTab />}

apps/web/src/app/create/worksheets/components/PreviewCenter.tsx

@@ -16,6 +16,7 @@ interface PreviewCenterProps {
   initialPreview?: string[]
   onGenerate: () => Promise<void>
   status: 'idle' | 'generating' | 'success' | 'error'
+  isReadOnly?: boolean
 }
 
 export function PreviewCenter({
@@ -23,6 +24,7 @@ export function PreviewCenter({
   initialPreview,
   onGenerate,
   status,
+  isReadOnly = false,
 }: PreviewCenterProps) {
   const router = useRouter()
   const { resolvedTheme } = useTheme()
@@ -116,7 +118,8 @@ export function PreviewCenter({
         position: 'relative',
       })}
     >
-      {/* Floating Action Button - Top Right */}
+      {/* Floating Action Button - Top Right (hidden in read-only mode) */}
+      {!isReadOnly && (
         <div
           data-component="floating-action-button"
           className={css({
@@ -288,7 +291,8 @@ export function PreviewCenter({
                         outline: 'none',
                         opacity: isGeneratingShare ? '0.6' : '1',
                         transition: 'all 0.2s',
-                      _hover: isGeneratingShare || justCopied
+                        _hover:
+                          isGeneratingShare || justCopied
                             ? {}
                             : {
                                 bg: 'green.50',
@@ -333,8 +337,11 @@ export function PreviewCenter({
             </DropdownMenu.Portal>
           </DropdownMenu.Root>
         </div>
+      )}
 
-      {/* Share Modal */}
+      {/* Share Modal (hidden in read-only mode) */}
+      {!isReadOnly && (
+        <>
           <ShareModal
             isOpen={isShareModalOpen}
             onClose={() => setIsShareModalOpen(false)}
@@ -349,6 +356,8 @@ export function PreviewCenter({
             onClose={() => setIsUploadModalOpen(false)}
             onUploadComplete={handleUploadComplete}
           />
+        </>
+      )}
 
       <div
         className={css({

apps/web/src/app/create/worksheets/components/WorksheetConfigContext.tsx

@@ -11,6 +11,7 @@ export interface WorksheetConfigContextValue {
   formState: WorksheetFormState
   onChange: (updates: Partial<WorksheetFormState>) => void
   operator: 'addition' | 'subtraction' | 'mixed'
+  isReadOnly?: boolean
 }
 
 export const WorksheetConfigContext = createContext<WorksheetConfigContextValue | null>(null)
@@ -29,8 +30,9 @@ export function useWorksheetConfig() {
 
 export interface WorksheetConfigProviderProps {
   formState: WorksheetFormState
-  onChange: (updates: Partial<WorksheetFormState>) => void
+  updateFormState: (updates: Partial<WorksheetFormState>) => void
   children: React.ReactNode
+  isReadOnly?: boolean
 }
 
 /**
@@ -39,16 +41,18 @@ export interface WorksheetConfigProviderProps {
  */
 export function WorksheetConfigProvider({
   formState,
-  onChange,
+  updateFormState,
   children,
+  isReadOnly = false,
 }: WorksheetConfigProviderProps) {
   const value = useMemo(
     () => ({
       formState,
-      onChange,
+      onChange: updateFormState,
       operator: formState.operator || 'addition',
+      isReadOnly,
     }),
-    [formState, onChange]
+    [formState, updateFormState, isReadOnly]
   )
 
   return <WorksheetConfigContext.Provider value={value}>{children}</WorksheetConfigContext.Provider>

apps/web/src/app/create/worksheets/components/config-panel/StudentNameInput.tsx

@@ -4,26 +4,30 @@ export interface StudentNameInputProps {
   value: string | undefined
   onChange: (value: string) => void
   isDark?: boolean
+  readOnly?: boolean
 }
 
-export function StudentNameInput({ value, onChange, isDark = false }: StudentNameInputProps) {
+export function StudentNameInput({ value, onChange, isDark = false, readOnly = false }: StudentNameInputProps) {
   return (
     <input
       type="text"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder="Student Name"
+      readOnly={readOnly}
       className={css({
         w: 'full',
         px: '3',
         py: '2',
         border: '1px solid',
         borderColor: isDark ? 'gray.600' : 'gray.300',
-        bg: isDark ? 'gray.700' : 'white',
+        bg: readOnly ? (isDark ? 'gray.800' : 'gray.100') : isDark ? 'gray.700' : 'white',
         color: isDark ? 'gray.100' : 'gray.900',
         rounded: 'lg',
         fontSize: 'sm',
-        _focus: {
+        opacity: readOnly ? '0.7' : '1',
+        cursor: readOnly ? 'not-allowed' : 'text',
+        _focus: readOnly ? {} : {
           outline: 'none',
           borderColor: 'brand.500',
           ring: '2px',

apps/web/src/app/create/worksheets/generatePreview.ts

@@ -1,16 +1,16 @@
 // Shared logic for generating worksheet previews (used by both API route and SSR)
 
 import { execSync } from 'child_process'
-import { validateWorksheetConfig } from './validation'
+import type { WorksheetFormState } from '@/app/create/worksheets/types'
 import {
+  generateMasteryMixedProblems,
+  generateMixedProblems,
   generateProblems,
   generateSubtractionProblems,
-  generateMixedProblems,
-  generateMasteryMixedProblems,
 } from './problemGenerator'
-import { generateTypstSource } from './typstGenerator'
-import type { WorksheetFormState } from '@/app/create/worksheets/types'
 import { getSkillById } from './skills'
+import { generateTypstSource } from './typstGenerator'
+import { validateWorksheetConfig } from './validation'
 
 export interface PreviewResult {
   success: boolean
@@ -53,6 +53,7 @@ export function generateWorksheetPreview(config: WorksheetFormState): PreviewRes
         return {
           success: false,
           error: 'Mixed mastery mode requires both addition and subtraction skill IDs',
+          details: `Missing skill IDs - addition: ${addSkillId || 'none'}, subtraction: ${subSkillId || 'none'}. This config may have been shared before mastery mode fields were added to the share system.`,
         }
       }
 
@@ -63,6 +64,7 @@ export function generateWorksheetPreview(config: WorksheetFormState): PreviewRes
         return {
           success: false,
           error: 'Invalid skill IDs',
+          details: `Addition skill ID: ${addSkillId} (${addSkill ? 'valid' : 'invalid'}), Subtraction skill ID: ${subSkillId} (${subSkill ? 'valid' : 'invalid'})`,
         }
       }
 

apps/web/src/app/create/worksheets/utils/extractConfigFields.ts

@@ -1,5 +1,5 @@
-import type { WorksheetFormState } from '../types'
 import type { AdditionConfigV4 } from '../config-schemas'
+import type { WorksheetFormState } from '../types'
 
 /**
  * Extract only the persisted config fields from formState
@@ -41,5 +41,9 @@ export function extractConfigFields(
     difficultyProfile: formState.difficultyProfile,
     displayRules: formState.displayRules,
     manualPreset: formState.manualPreset,
+    // Mastery mode fields (optional)
+    currentStepId: formState.currentStepId,
+    currentAdditionSkillId: formState.currentAdditionSkillId,
+    currentSubtractionSkillId: formState.currentSubtractionSkillId,
   }
 }

apps/web/src/app/worksheets/shared/[id]/page.tsx

@@ -1,10 +1,16 @@
 'use client'
 
-import { useParams, useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
 import { css } from '@styled/css'
 import { stack } from '@styled/patterns'
+import { useParams, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
+import { ConfigSidebar } from '@/app/create/worksheets/components/ConfigSidebar'
+import { PreviewCenter } from '@/app/create/worksheets/components/PreviewCenter'
+import { WorksheetConfigProvider } from '@/app/create/worksheets/components/WorksheetConfigContext'
 import type { WorksheetFormState } from '@/app/create/worksheets/types'
+import { PageWithNav } from '@/components/PageWithNav'
+import { useTheme } from '@/contexts/ThemeContext'
 
 interface ShareData {
   id: string
@@ -19,11 +25,17 @@ export default function SharedWorksheetPage() {
   const params = useParams()
   const router = useRouter()
   const shareId = params.id as string
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
 
   const [shareData, setShareData] = useState<ShareData | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [previewError, setPreviewError] = useState<{ error: string; details?: string } | null>(null)
+  const [preview, setPreview] = useState<string[] | undefined>(undefined)
+  const [showEditModal, setShowEditModal] = useState(false)
 
+  // Fetch shared worksheet data
   useEffect(() => {
     const fetchShare = async () => {
       try {
@@ -40,6 +52,39 @@ export default function SharedWorksheetPage() {
 
         const data = await response.json()
         setShareData(data)
+
+        // Fetch preview from API
+        try {
+          const previewResponse = await fetch('/api/worksheets/preview', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ config: data.config }),
+          })
+
+          if (previewResponse.ok) {
+            const previewData = await previewResponse.json()
+            if (previewData.success) {
+              setPreview(previewData.pages)
+            } else {
+              // Preview generation failed - store error details
+              setPreviewError({
+                error: previewData.error || 'Failed to generate preview',
+                details: previewData.details,
+              })
+            }
+          } else {
+            setPreviewError({
+              error: 'Preview generation failed',
+              details: `HTTP ${previewResponse.status}: ${previewResponse.statusText}`,
+            })
+          }
+        } catch (err) {
+          console.error('Failed to generate preview:', err)
+          setPreviewError({
+            error: 'Failed to generate preview',
+            details: err instanceof Error ? err.message : String(err),
+          })
+        }
       } catch (err) {
         console.error('Error fetching shared worksheet:', err)
         setError('Failed to load shared worksheet')
@@ -51,14 +96,53 @@ export default function SharedWorksheetPage() {
     fetchShare()
   }, [shareId])
 
-  const handleOpenInEditor = () => {
+  const handleOpenInEditor = async () => {
     if (!shareData) return
 
-    // Navigate to the worksheet creator with the shared config
+    // Save shared config to user's session (overwrites current settings)
-    // Store config in sessionStorage so it can be loaded by the editor
+    try {
-    sessionStorage.setItem('sharedWorksheetConfig', JSON.stringify(shareData.config))
+      await fetch('/api/worksheets/settings', {
-    router.push('/create/worksheets?from=share')
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'addition',
+          config: shareData.config,
+        }),
+      })
+
+      // Navigate to editor
+      router.push('/create/worksheets')
+    } catch (err) {
+      console.error('Failed to save config:', err)
+      // TODO: Show error toast
     }
+  }
+
+  // Resize handle styles
+  const resizeHandleStyles = css({
+    width: '8px',
+    bg: isDark ? 'gray.700' : 'gray.200',
+    position: 'relative',
+    cursor: 'col-resize',
+    transition: 'background 0.2s',
+    _hover: {
+      bg: isDark ? 'brand.600' : 'brand.400',
+    },
+    _active: {
+      bg: 'brand.500',
+    },
+    _before: {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '3px',
+      height: '20px',
+      bg: isDark ? 'gray.600' : 'gray.300',
+      rounded: 'full',
+    },
+  })
 
   if (loading) {
     return (
@@ -145,102 +229,282 @@ export default function SharedWorksheetPage() {
   }
 
   return (
-    <div
+    <PageWithNav>
-      className={css({
+      <WorksheetConfigProvider
-        minH: '100vh',
+        formState={shareData.config}
-        bg: 'gray.50',
+        updateFormState={() => {}} // No-op for read-only
-        p: '8',
+        isReadOnly={true}
-      })}
       >
         <div
+          data-component="shared-worksheet-studio"
           className={css({
-          maxW: '4xl',
+            position: 'fixed',
-          mx: 'auto',
+            inset: 0,
-        })}
+            top: '16', // Account for nav bar
-      >
-        <div
-          className={css({
-            bg: 'white',
-            rounded: 'xl',
-            shadow: 'xl',
-            p: '8',
-          })}
-        >
-          <div className={stack({ gap: '6' })}>
-            {/* Header */}
-            <div className={stack({ gap: '2' })}>
-              <h1 className={css({ fontSize: '3xl', fontWeight: 'bold', color: 'gray.900' })}>
-                Shared Worksheet
-              </h1>
-              {shareData.title && (
-                <p className={css({ fontSize: 'lg', color: 'gray.700' })}>{shareData.title}</p>
-              )}
-              <div
-                className={css({
             display: 'flex',
-                  gap: '4',
+            flexDirection: 'column',
-                  fontSize: 'sm',
+            bg: isDark ? 'gray.900' : 'gray.50',
-                  color: 'gray.500',
           })}
         >
-                <span>Type: {shareData.worksheetType}</span>
+          {/* Read-only banner */}
-                <span>•</span>
+          <div
-                <span>Views: {shareData.views}</span>
+            data-component="shared-mode-banner"
-                <span>•</span>
+            className={css({
-                <span>Created: {new Date(shareData.createdAt).toLocaleDateString()}</span>
+              bg: 'blue.600',
+              color: 'white',
+              px: '6',
+              py: '3',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: '4',
+              shadow: 'md',
+            })}
+          >
+            <div className={css({ display: 'flex', alignItems: 'center', gap: '3' })}>
+              <span className={css({ fontSize: 'xl' })}>🔗</span>
+              <div>
+                <div className={css({ fontWeight: 'bold', fontSize: 'md' })}>
+                  Shared Worksheet (Read-Only)
+                </div>
+                <div className={css({ fontSize: 'sm', opacity: '0.9' })}>
+                  {shareData.title || `Shared by someone • ${shareData.views} views`}
+                </div>
               </div>
             </div>
 
-            {/* Configuration Summary */}
+            <button
-            <div
+              data-action="open-edit-modal"
+              onClick={() => setShowEditModal(true)}
               className={css({
-                bg: 'gray.50',
+                px: '4',
+                py: '2',
+                bg: 'white',
+                color: 'blue.600',
+                fontSize: 'sm',
+                fontWeight: 'bold',
                 rounded: 'lg',
-                p: '6',
+                cursor: 'pointer',
-                border: '2px solid',
+                transition: 'all 0.2s',
-                borderColor: 'gray.200',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '2',
+                _hover: {
+                  bg: 'blue.50',
+                  transform: 'translateY(-1px)',
+                  shadow: 'md',
+                },
               })}
             >
-              <h2
+              <span>✏️</span>
+              <span>Edit This Worksheet</span>
+            </button>
+          </div>
+
+          {/* Worksheet studio layout */}
+          <PanelGroup direction="horizontal" className={css({ flex: '1', overflow: 'hidden' })}>
+            {/* Left sidebar - Config controls (read-only) */}
+            <Panel
+              defaultSize={25}
+              minSize={20}
+              maxSize={35}
+              className={css({
+                overflow: 'auto',
+                p: '4',
+                bg: isDark ? 'gray.800' : 'white',
+                borderRight: '1px solid',
+                borderColor: isDark ? 'gray.700' : 'gray.200',
+              })}
+            >
+              <ConfigSidebar isReadOnly={true} />
+            </Panel>
+
+            <PanelResizeHandle className={resizeHandleStyles} />
+
+            {/* Center - Preview */}
+            <Panel defaultSize={75} minSize={50} className={css({ overflow: 'hidden' })}>
+              {previewError ? (
+                <div
+                  className={css({
+                    h: 'full',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    p: '8',
+                    bg: isDark ? 'gray.900' : 'gray.50',
+                  })}
+                >
+                  <div
+                    className={css({
+                      maxW: '2xl',
+                      bg: isDark ? 'gray.800' : 'white',
+                      border: '2px solid',
+                      borderColor: 'red.500',
+                      rounded: 'xl',
+                      p: '6',
+                      shadow: 'xl',
+                    })}
+                  >
+                    <div className={stack({ gap: '4' })}>
+                      <div className={css({ display: 'flex', alignItems: 'center', gap: '3' })}>
+                        <span className={css({ fontSize: '3xl' })}>⚠️</span>
+                        <h3
                           className={css({
                             fontSize: 'xl',
                             fontWeight: 'bold',
-                  color: 'gray.900',
+                            color: 'red.600',
-                  mb: '4',
                           })}
                         >
-                Configuration
+                          Preview Generation Failed
-              </h2>
+                        </h3>
-              <div className={stack({ gap: '2' })}>
-                <div className={css({ display: 'grid', gridTemplateColumns: '2', gap: '4' })}>
-                  <ConfigItem label="Operator" value={shareData.config.operator || 'addition'} />
-                  <ConfigItem
-                    label="Problems per page"
-                    value={shareData.config.problemsPerPage.toString()}
-                  />
-                  <ConfigItem label="Pages" value={shareData.config.pages.toString()} />
-                  <ConfigItem
-                    label="Digit range"
-                    value={`${shareData.config.digitRange.min}-${shareData.config.digitRange.max}`}
-                  />
                       </div>
+
+                      <div
+                        className={css({
+                          p: '4',
+                          bg: isDark ? 'gray.900' : 'red.50',
+                          rounded: 'lg',
+                          border: '1px solid',
+                          borderColor: isDark ? 'gray.700' : 'red.200',
+                        })}
+                      >
+                        <div
+                          className={css({
+                            fontSize: 'md',
+                            fontWeight: 'semibold',
+                            color: isDark ? 'red.400' : 'red.700',
+                            mb: '2',
+                          })}
+                        >
+                          {previewError.error}
+                        </div>
+                        {previewError.details && (
+                          <div
+                            className={css({
+                              fontSize: 'sm',
+                              color: isDark ? 'gray.400' : 'gray.700',
+                              fontFamily: 'mono',
+                              whiteSpace: 'pre-wrap',
+                              wordBreak: 'break-word',
+                            })}
+                          >
+                            {previewError.details}
+                          </div>
+                        )}
+                      </div>
+
+                      <div
+                        className={css({
+                          fontSize: 'sm',
+                          color: isDark ? 'gray.400' : 'gray.600',
+                        })}
+                      >
+                        <strong>What this means:</strong> This shared worksheet configuration cannot
+                        be previewed because it's missing required data. This may happen if the
+                        worksheet was shared before certain features were added to the system.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <PreviewCenter
+                  formState={shareData.config}
+                  initialPreview={preview}
+                  onGenerate={async () => {}} // No-op for read-only
+                  status="idle"
+                  isReadOnly={true}
+                />
+              )}
+            </Panel>
+          </PanelGroup>
+
+          {/* Edit Modal */}
+          {showEditModal && (
+            <div
+              data-component="edit-modal"
+              className={css({
+                position: 'fixed',
+                inset: 0,
+                bg: 'rgba(0, 0, 0, 0.5)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 50,
+                p: '4',
+              })}
+              onClick={() => setShowEditModal(false)}
+            >
+              <div
+                className={css({
+                  bg: isDark ? 'gray.800' : 'white',
+                  rounded: 'xl',
+                  shadow: 'xl',
+                  maxW: 'lg',
+                  w: 'full',
+                  p: '6',
+                })}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className={stack({ gap: '4' })}>
+                  <div>
+                    <h2
+                      className={css({
+                        fontSize: '2xl',
+                        fontWeight: 'bold',
+                        color: isDark ? 'gray.100' : 'gray.900',
+                        mb: '2',
+                      })}
+                    >
+                      Edit This Worksheet?
+                    </h2>
+                    <p
+                      className={css({
+                        fontSize: 'md',
+                        color: isDark ? 'gray.400' : 'gray.600',
+                      })}
+                    >
+                      Opening this worksheet in the editor will{' '}
+                      <strong className={css({ color: isDark ? 'yellow.400' : 'orange.600' })}>
+                        overwrite your current worksheet settings
+                      </strong>
+                      . Your current configuration will be replaced with this shared worksheet's
+                      settings.
+                    </p>
+                  </div>
+
+                  <div
+                    className={css({
+                      bg: isDark ? 'gray.700' : 'gray.50',
+                      p: '4',
+                      rounded: 'lg',
+                      border: '2px solid',
+                      borderColor: isDark ? 'gray.600' : 'gray.200',
+                    })}
+                  >
+                    <div
+                      className={css({ fontSize: 'sm', color: isDark ? 'gray.300' : 'gray.700' })}
+                    >
+                      <strong>💡 Tip:</strong> If you want to keep your current settings, you can:
+                      <ul className={css({ mt: '2', ml: '4', listStyle: 'disc' })}>
+                        <li>Download your current worksheet first</li>
+                        <li>Open this shared worksheet in a different browser/window</li>
+                      </ul>
                     </div>
                   </div>
 
-            {/* Actions */}
                   <div
                     className={css({
                       display: 'flex',
-                gap: '4',
+                      gap: '3',
-                flexWrap: 'wrap',
+                      flexDirection: 'row-reverse',
                     })}
                   >
                     <button
+                      data-action="confirm-edit"
                       onClick={handleOpenInEditor}
                       className={css({
-                  flex: '1',
                         px: '6',
-                  py: '4',
+                        py: '3',
                         bg: 'brand.600',
                         color: 'white',
                         fontSize: 'md',
@@ -248,34 +512,40 @@ export default function SharedWorksheetPage() {
                         rounded: 'lg',
                         cursor: 'pointer',
                         transition: 'all 0.2s',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  gap: '2',
                         _hover: {
                           bg: 'brand.700',
-                    transform: 'translateY(-1px)',
                         },
                       })}
                     >
-                <span>✏️</span>
+                      Replace My Settings & Edit
-                <span>Open in Editor</span>
+                    </button>
+                    <button
+                      data-action="cancel-edit"
+                      onClick={() => setShowEditModal(false)}
+                      className={css({
+                        px: '6',
+                        py: '3',
+                        bg: isDark ? 'gray.700' : 'gray.200',
+                        color: isDark ? 'gray.300' : 'gray.700',
+                        fontSize: 'md',
+                        fontWeight: 'medium',
+                        rounded: 'lg',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s',
+                        _hover: {
+                          bg: isDark ? 'gray.600' : 'gray.300',
+                        },
+                      })}
+                    >
+                      Cancel
                     </button>
                   </div>
                 </div>
               </div>
             </div>
+          )}
         </div>
-  )
+      </WorksheetConfigProvider>
-}
+    </PageWithNav>
-
-function ConfigItem({ label, value }: { label: string; value: string }) {
-  return (
-    <div className={stack({ gap: '1' })}>
-      <dt className={css({ fontSize: 'xs', fontWeight: 'semibold', color: 'gray.500' })}>
-        {label}
-      </dt>
-      <dd className={css({ fontSize: 'md', color: 'gray.900' })}>{value}</dd>
-    </div>
   )
 }