fix: context form now poperly supports diagrams and modules and validates them as pathspec/url elements for linking purposes

Author: killerapp

GENERATE-CONTEXT-PROMPT.md

@@ -139,7 +139,16 @@ When generating a .context.md file:
 3. Ensure that all sections are filled with relevant and detailed information.
 4. If certain information is not available, make reasonable assumptions based on common practices in software development.
 5. Tailor the content to the specific type of project (e.g., web application, mobile app, data processing system) while maintaining the overall structure.
-6. When specifying related modules, include both the name of the module and its path. The path can be a local directory path (for modules within the same repository) or a URL (for external modules or modules in different repositories).
-7. In the diagrams section, include references to any architectural, flow, or other diagrams that help visualize the project's structure or processes. Provide both the name and path for each diagram.
+6. When specifying related modules, include both the name of the module and its path. The path must be a valid relative path specification from the current directory or .context.md file. These should be directories that contain a .context file.
+7. In the diagrams section, include references to any architectural, flow, or other diagrams that help visualize the project's structure or processes. Provide both the name and path for each diagram. Prefer .mermaid files for diagrams, but also allow other lightweight diagramming formats (see Diagram Specifications section).
+
+## Diagram Specifications
+
+When referencing diagrams in the .context.md file:
+
+1. Prefer .mermaid files for diagrams. These offer the best support for context and markdown fluency.
+2. Other allowed file formats include: .mmd, .pdf, .png, .jpg, .jpeg.
+3. The diagram path should point to a specific file, not just a directory.
+4. When possible, include a brief description of what the diagram represents in the Markdown content section.
 
 Remember, the goal is to create a .context.md file that provides valuable context for both human developers and AI assistants, enabling more effective collaboration and development on the project.

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

@@ -16,10 +16,10 @@ interface ContextFormProps {
 
 export type FormDataType = {
   moduleName: string;
-  relatedModules: string[];
+  relatedModules: { name: string; path: string }[];
   version: string;
   description: string;
-  diagrams: string[];
+  diagrams: { name: string; path: string }[];
   technologies: string[];
   conventions: string;
   directives: string;
@@ -116,7 +116,7 @@ const ContextForm: React.FC<ContextFormProps> = ({ onSubmit }) => {
     }));
   };
 
-  const handleMultiChange = (field: string) => (event: React.SyntheticEvent, value: string[]) => {
+  const handleMultiChange = (field: string) => (value: any) => {
     setFormData((prevData) => ({
       ...prevData,
       [field]: value,

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

@@ -1,15 +1,114 @@
-import React from 'react';
-import { Grid2, TextField, Chip, Autocomplete } from '@mui/material';
+import React, { useState } from 'react';
+import { Grid2, TextField, Chip, Autocomplete, Button, Box, Typography, Divider, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { FormDataType } from './ContextForm';
 
 interface MetadataSectionProps {
   formData: FormDataType;
   errors: { [key: string]: string };
   handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  handleMultiChange: (field: string) => (event: React.SyntheticEvent, value: string[]) => void;
+  handleMultiChange: (field: string) => (value: any) => void;
 }
 
+interface NamePathPair {
+  name: string;
+  path: string;
+}
+
+const NamePathInput: React.FC<{
+  label: string;
+  items: NamePathPair[];
+  onAdd: (item: NamePathPair) => void;
+  onRemove: (index: number) => void;
+  validatePath: (path: string) => string | null;
+}> = ({ label, items, onAdd, onRemove, validatePath }) => {
+  const [name, setName] = useState('');
+  const [path, setPath] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAdd = () => {
+    const validationError = validatePath(path);
+    if (validationError) {
+      setError(validationError);
+    } else if (name && path) {
+      onAdd({ name, path });
+      setName('');
+      setPath('');
+      setError(null);
+    }
+  };
+
+  return (
+    <Box sx={{ mb: 2 }}>
+      <TextField
+        label={`${label} Name`}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        fullWidth
+        margin="normal"
+      />
+      <TextField
+        label={`${label} Path`}
+        value={path}
+        onChange={(e) => setPath(e.target.value)}
+        fullWidth
+        margin="normal"
+        error={!!error}
+        helperText={error}
+      />
+      <Button onClick={handleAdd} variant="contained" color="primary" fullWidth sx={{ mt: 1 }}>
+        Add {label}
+      </Button>
+      <Box sx={{ mt: 1 }}>
+        {items.map((item, index) => (
+          <Chip
+            key={index}
+            label={`${item.name} (${item.path})`}
+            onDelete={() => onRemove(index)}
+            style={{ margin: '4px' }}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+const validateRelativeModulePath = (path: string): string | null => {
+  if (!path.startsWith('./') && !path.startsWith('../')) {
+    return 'Path must be a relative path (start with ./ or ../)';
+  }
+  if (path.endsWith('/')) {
+    return 'Path must not end with a slash';
+  }
+  return null;
+};
+
+const validateDiagramPath = (path: string): string | null => {
+  const allowedExtensions = ['.mermaid', '.mmd', '.pdf', '.png', '.jpg', '.jpeg'];
+  const extension = path.substring(path.lastIndexOf('.'));
+  if (!allowedExtensions.includes(extension.toLowerCase())) {
+    return `File must be one of: ${allowedExtensions.join(', ')}`;
+  }
+  return null;
+};
+
 const MetadataSection: React.FC<MetadataSectionProps> = ({ formData, errors, handleChange, handleMultiChange }) => {
+  const handleAddRelatedModule = (item: NamePathPair) => {
+    handleMultiChange('relatedModules')([...formData.relatedModules, item]);
+  };
+
+  const handleRemoveRelatedModule = (index: number) => {
+    handleMultiChange('relatedModules')(formData.relatedModules.filter((_, i) => i !== index));
+  };
+
+  const handleAddDiagram = (item: NamePathPair) => {
+    handleMultiChange('diagrams')([...formData.diagrams, item]);
+  };
+
+  const handleRemoveDiagram = (index: number) => {
+    handleMultiChange('diagrams')(formData.diagrams.filter((_, i) => i !== index));
+  };
+
   return (
     <Grid2 container spacing={2}>
       <Grid2 size={12}>
@@ -24,27 +123,21 @@ const MetadataSection: React.FC<MetadataSectionProps> = ({ formData, errors, han
         />
       </Grid2>
       <Grid2 size={12}>
-        <Autocomplete
-          multiple
-          freeSolo
-          options={[]}
-          value={formData.relatedModules}
-          onChange={handleMultiChange('relatedModules')}
-          renderTags={(value: string[], getTagProps) =>
-            value.map((option: string, index: number) => (
-              <Chip variant="outlined" label={option} {...getTagProps({ index })} />
-            ))
-          }
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              variant="outlined"
-              label="Related Modules"
-              placeholder="Add module"
-              helperText="Optional: Add related modules"
+        <Divider sx={{ my: 2 }} />
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>Related Modules</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <NamePathInput
+              label="Related Module"
+              items={formData.relatedModules}
+              onAdd={handleAddRelatedModule}
+              onRemove={handleRemoveRelatedModule}
+              validatePath={validateRelativeModulePath}
             />
-          )}
-        />
+          </AccordionDetails>
+        </Accordion>
       </Grid2>
       <Grid2 size={{ xs: 12, sm: 6 }}>
         <TextField
@@ -71,35 +164,30 @@ const MetadataSection: React.FC<MetadataSectionProps> = ({ formData, errors, han
         />
       </Grid2>
       <Grid2 size={12}>
-        <Autocomplete
-          multiple
-          freeSolo
-          options={[]}
-          value={formData.diagrams}
-          onChange={handleMultiChange('diagrams')}
-          renderTags={(value: string[], getTagProps) =>
-            value.map((option: string, index: number) => (
-              <Chip variant="outlined" label={option} {...getTagProps({ index })} />
-            ))
-          }
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              variant="outlined"
-              label="Diagrams"
-              placeholder="Add diagram"
-              helperText="Optional: Add diagram file paths or URLs"
+        <Divider sx={{ my: 2 }} />
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>Diagrams</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <NamePathInput
+              label="Diagram"
+              items={formData.diagrams}
+              onAdd={handleAddDiagram}
+              onRemove={handleRemoveDiagram}
+              validatePath={validateDiagramPath}
             />
-          )}
-        />
+          </AccordionDetails>
+        </Accordion>
       </Grid2>
       <Grid2 size={12}>
+        <Divider sx={{ my: 2 }} />
         <Autocomplete
           multiple
           freeSolo
           options={[]}
           value={formData.technologies}
-          onChange={handleMultiChange('technologies')}
+          onChange={(_, value) => handleMultiChange('technologies')(value)}
           renderTags={(value: string[], getTagProps) =>
             value.map((option: string, index: number) => (
               <Chip variant="outlined" label={option} {...getTagProps({ index })} />

examples/context-editor/src/generateContextMd.ts

@@ -2,10 +2,10 @@ import yaml from 'js-yaml';
 
 interface FormData {
   moduleName: string;
-  relatedModules: string[];
+  relatedModules: { name: string; path: string }[];
   version: string;
   description: string;
-  diagrams: string[];
+  diagrams: { name: string; path: string }[];
   technologies: string[];
   conventions: string;
   directives: string;