docs: fix prompt presentation

Author: killerapp

examples/context-editor/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Container, Paper, Box, Button, Typography, Link as MuiLink, Snackbar, IconButton, Grid, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Container, Paper, Box, Button, Typography, Link as MuiLink, Snackbar, IconButton, Grid, Accordion, AccordionSummary, AccordionDetails, Divider } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CloseIcon from '@mui/icons-material/Close';
@@ -13,6 +13,7 @@ import PromptViewer from './components/PromptViewer';
 import NavTabs from './components/NavTabs';
 import SpecificationModal from './components/SpecificationModal';
 import ActionButtons from './components/ActionButtons';
+import OptionsDescription from './components/OptionsDescription';
 import { handleCopyToClipboard, handleDownload } from './utils/helpers';
 import usePrompts from './hooks/usePrompts';
 import useSnackbar from './hooks/useSnackbar';
@@ -57,12 +58,30 @@ const App: React.FC = () => {
                 </MuiLink>
               </Box>
             </Box>
-            <Typography variant="body1" paragraph>
+            <Typography variant="body1" paragraph sx={{ mb: 3 }}>
               This editor helps you create .context.md, .contextdocs.md, and .contextignore files for your project.
             </Typography>
-            <Accordion>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography>View Prompts</Typography>
+            
+            <OptionsDescription />
+            
+            <Divider sx={{ my: 3 }} />
+            
+            <Accordion sx={{ 
+              mb: 3, 
+              '&.MuiAccordion-root': {
+                borderLeft: `6px solid ${theme.palette.secondary.main}`,
+              }
+            }}>
+              <AccordionSummary 
+                expandIcon={<ExpandMoreIcon />}
+                sx={{
+                  backgroundColor: theme.palette.background.paper,
+                  '&.Mui-expanded': {
+                    minHeight: 48,
+                  },
+                }}
+              >
+                <Typography variant="h6" color="secondary">View Prompts</Typography>
               </AccordionSummary>
               <AccordionDetails>
                 <Grid container spacing={2}>

examples/context-editor/src/components/OptionsDescription.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Typography, Box, List, ListItem, ListItemText, Paper } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+const OptionsDescription: React.FC = () => {
+  const theme = useTheme();
+
+  return (
+    <Paper 
+      elevation={3}
+      sx={{
+        mb: 3,
+        mt: 2,
+        p: 3,
+        borderLeft: `6px solid ${theme.palette.primary.main}`,
+        backgroundColor: theme.palette.background.paper,
+      }}
+    >
+      <Typography variant="h6" gutterBottom color="primary" fontWeight="bold">
+        Two Ways to Generate Context Files:
+      </Typography>
+      <List>
+        <ListItem>
+          <ListItemText
+            primary={
+              <Typography variant="subtitle1" color="secondary" fontWeight="medium">
+                1. AI-Assisted Drafting
+              </Typography>
+            }
+            secondary={
+              <React.Fragment>
+                <Typography variant="body2">
+                  Use the 'Generate Context Prompt' to get an AI agent to draft your context files. Copy the prompt and paste it to your preferred AI assistant.
+                </Typography>
+                <Typography variant="body2" sx={{ mt: 1, fontStyle: 'italic' }}>
+                  Note: You may need to copy the specification into your project's root directory unless your AI assistant can retrieve the latest spec automatically.
+                </Typography>
+              </React.Fragment>
+            }
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary={
+              <Typography variant="subtitle1" color="secondary" fontWeight="medium">
+                2. Manual Form Completion
+              </Typography>
+            }
+            secondary={
+              <Typography variant="body2">
+                Fill out the structured form below to generate your context files. This gives you more control over the content.
+              </Typography>
+            }
+          />
+        </ListItem>
+      </List>
+      <Typography variant="body2" sx={{ mt: 2, fontStyle: 'italic' }}>
+        Both methods will help you create .context.md and .contextdocs.md files based on the Codebase Context Specification.
+      </Typography>
+    </Paper>
+  );
+};
+
+export default OptionsDescription;