fix: correct line numbers in warning messages when scene directives present (#5)

When parsing wireframes with scene directives (e.g., @scene: login),
directive lines are stripped before grid processing. This caused
warning line numbers to be reported relative to the grid instead of
the original file.

Changes:
- Add parseSceneDirectivesWithOffset to track stripped directive lines
- Add adjustLineOffset helper to ErrorTypes for position adjustment
- Apply line offset to all warnings/errors in parseSingleScene
- Add integration tests for line number correction

The warning "Misaligned closing border" now correctly reports
Line 5 instead of Line 3 for the example in Issue #5.

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

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

Author: wickedev

.claude/commands/fix-issue.md

@@ -0,0 +1,100 @@
+---
+allowed-tools: [Read, Write, Edit, Bash, Glob, Grep, TodoWrite, Task]
+description: "Fix a GitHub issue: analyze, implement, test, commit, and close"
+---
+
+# /fix-issue - GitHub Issue Fix Workflow
+
+## Purpose
+Automates the complete workflow for fixing a GitHub issue: analyze the problem, implement the fix, write tests, commit changes, and close the issue.
+
+## Usage
+```
+/fix-issue <issue-number> [release-version]
+```
+
+## Arguments
+- `issue-number` - GitHub issue number to fix (required)
+- `release-version` - Version number for changelog/commit message (optional)
+
+**Input**: $ARGUMENTS
+
+## Execution
+
+### Step 1: Parse Arguments
+Extract the issue number and release version from `$ARGUMENTS`.
+- First word: Issue number (required)
+- Second word: Release version (optional)
+
+### Step 2: Fetch Issue Details
+Run `gh issue view <issue-number>` to read:
+- Title and description
+- Labels
+- Expected vs actual behavior
+- Steps to reproduce
+
+### Step 3: Analyze the Problem
+Based on the issue description:
+1. Identify affected files and components using Glob/Grep
+2. Read relevant source files to understand the root cause
+3. Plan the fix approach
+4. Identify what tests need to be written
+
+### Step 4: Create Task List
+Use TodoWrite to track:
+- [ ] Implement the fix
+- [ ] Write test cases
+- [ ] Run tests to verify
+- [ ] Commit changes
+- [ ] Comment on issue
+- [ ] Close issue
+
+### Step 5: Implement the Fix
+1. Make necessary code changes to fix the issue
+2. Follow existing code patterns and conventions
+3. Keep changes minimal and focused
+
+### Step 6: Write Tests
+1. Add test cases that verify the fix
+2. Include edge cases mentioned in the issue
+3. Run all tests to verify nothing is broken
+
+### Step 7: Commit Changes
+Create a commit with format:
+```
+fix: <concise description> (#<issue-number>)
+
+<detailed explanation if needed>
+```
+
+### Step 8: Comment and Close Issue
+1. Get commit hash: `git rev-parse --short HEAD`
+2. Comment on issue with changes summary:
+   ```bash
+   gh issue comment <issue-number> --body "Fixed in commit <hash>
+
+   Changes made:
+   - <list of changes>
+
+   Tests added:
+   - <list of tests>"
+   ```
+3. Close the issue: `gh issue close <issue-number>`
+
+## Claude Code Integration
+- Uses Read/Write/Edit for code modifications
+- Leverages Glob and Grep for codebase exploration
+- Applies TodoWrite for progress tracking
+- Uses Bash for git and gh CLI operations
+
+## Examples
+```
+/fix-issue 5
+/fix-issue 5 v0.1.3
+/fix-issue 12 v0.2.0
+```
+
+## Notes
+- Always run full test suite before committing
+- If tests fail, fix issues before proceeding
+- If the issue is unclear, ask for clarification first

src/parser/Errors/ErrorTypes.res

@@ -174,3 +174,61 @@ let getCodeName = (code: errorCode): string => {
   | MisalignedClosingBorder(_) => "MisalignedClosingBorder"
   }
 }
+
+/**
+ * Adjust the line offset in an error code's position.
+ * This is used to correct line numbers when scene directive lines
+ * are stripped before grid processing.
+ *
+ * @param code - The error code to adjust
+ * @param offset - The number of lines to add to the row (e.g., number of directive lines stripped)
+ * @returns A new error code with adjusted position
+ */
+let adjustCodeLineOffset = (code: errorCode, offset: int): errorCode => {
+  let adjustPos = (pos: Position.t): Position.t => {
+    Position.make(pos.row + offset, pos.col)
+  }
+
+  switch code {
+  | InvalidInput(_) as c => c
+  | InvalidStartPosition(pos) => InvalidStartPosition(adjustPos(pos))
+  | UncloseBox({corner, direction}) => UncloseBox({corner: adjustPos(corner), direction})
+  | MismatchedWidth({topLeft, topWidth, bottomWidth}) =>
+    MismatchedWidth({topLeft: adjustPos(topLeft), topWidth, bottomWidth})
+  | MisalignedPipe({position, expectedCol, actualCol}) =>
+    MisalignedPipe({position: adjustPos(position), expectedCol, actualCol})
+  | OverlappingBoxes({box1Name, box2Name, position}) =>
+    OverlappingBoxes({box1Name, box2Name, position: adjustPos(position)})
+  | InvalidElement({content, position}) =>
+    InvalidElement({content, position: adjustPos(position)})
+  | UnclosedBracket({opening}) => UnclosedBracket({opening: adjustPos(opening)})
+  | EmptyButton({position}) => EmptyButton({position: adjustPos(position)})
+  | InvalidInteractionDSL({message, position}) =>
+    InvalidInteractionDSL({message, position: position->Option.map(adjustPos)})
+  | UnusualSpacing({position, issue}) =>
+    UnusualSpacing({position: adjustPos(position), issue})
+  | DeepNesting({depth, position}) => DeepNesting({depth, position: adjustPos(position)})
+  | MisalignedClosingBorder({position, expectedCol, actualCol}) =>
+    MisalignedClosingBorder({position: adjustPos(position), expectedCol, actualCol})
+  }
+}
+
+/**
+ * Adjust the line offset in an error's position.
+ * Creates a new error with the position adjusted by the given offset.
+ *
+ * @param error - The error to adjust
+ * @param offset - The number of lines to add to the row
+ * @returns A new error with adjusted position
+ */
+let adjustLineOffset = (error: t, offset: int): t => {
+  if offset === 0 {
+    error
+  } else {
+    {
+      code: adjustCodeLineOffset(error.code, offset),
+      severity: error.severity,
+      context: error.context,
+    }
+  }
+}

src/parser/Parser.res

@@ -191,20 +191,26 @@ let mergeInteractionsIntoAST = (
  *
  * @param sceneContent ASCII wireframe content for one scene (without directives)
  * @param sceneMetadata Scene metadata from directives
+ * @param lineOffset Number of directive lines stripped (for adjusting error line numbers)
  * @param errors Accumulator for errors
  * @returns Parsed scene or None if parsing failed
  */
 let parseSingleScene = (
   sceneContent: string,
   sceneMetadata: SemanticParser.sceneMetadata,
+  lineOffset: int,
   errors: array<ErrorTypes.t>,
 ): option<Types.scene> => {
   // Stage 1: Grid Scanner
   let gridResult = scanGrid(sceneContent)
 
   switch gridResult {
   | Error(gridErrors) => {
-      gridErrors->Array.forEach(err => errors->Array.push(err)->ignore)
+      // Adjust line numbers by offset before adding to errors
+      gridErrors->Array.forEach(err => {
+        let adjusted = ErrorTypes.adjustLineOffset(err, lineOffset)
+        errors->Array.push(adjusted)->ignore
+      })
       None
     }
   | Ok(grid) => {
@@ -213,12 +219,20 @@ let parseSingleScene = (
 
       let shapes = switch shapesResult {
       | Error(shapeErrors) => {
-          shapeErrors->Array.forEach(err => errors->Array.push(err)->ignore)
+          // Adjust line numbers by offset before adding to errors
+          shapeErrors->Array.forEach(err => {
+            let adjusted = ErrorTypes.adjustLineOffset(err, lineOffset)
+            errors->Array.push(adjusted)->ignore
+          })
           []
         }
       | Ok((boxes, warnings)) => {
           // Collect warnings (non-fatal issues like misaligned borders)
-          warnings->Array.forEach(w => errors->Array.push(w)->ignore)
+          // Adjust line numbers by offset before adding to errors
+          warnings->Array.forEach(w => {
+            let adjusted = ErrorTypes.adjustLineOffset(w, lineOffset)
+            errors->Array.push(adjusted)->ignore
+          })
           boxes
         }
       }
@@ -294,15 +308,16 @@ let parseInternal = (wireframe: string, interactions: option<string>): parseResu
     let scenes = []
 
     sceneBlocks->Array.forEach(block => {
-      // Parse scene directives
+      // Parse scene directives and get line offset
       let lines = block->String.split("\n")
-      let (metadata, contentLines) = SemanticParser.parseSceneDirectives(lines)
+      let {metadata, contentLines, lineOffset} = SemanticParser.parseSceneDirectivesWithOffset(lines)
 
       // Rejoin content lines (without directives)
       let sceneContent = contentLines->Array.join("\n")
 
       // Parse this scene through 3-stage pipeline
-      switch parseSingleScene(sceneContent, metadata, allIssues) {
+      // Pass lineOffset to adjust error/warning line numbers
+      switch parseSingleScene(sceneContent, metadata, lineOffset, allIssues) {
       | Some(scene) => scenes->Array.push(scene)->ignore
       | None => () // Scene parsing failed, errors already collected
       }

src/parser/Semantic/SemanticParser.res

@@ -261,15 +261,43 @@ let defaultSceneMetadata = (): sceneMetadata => {
  * ```
  * Returns: ({id: "login", title: "Login Page", transition: "slide"}, ["+--Login--+", ...])
  */
-let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>) => {
+/**
+ * Result type for parseSceneDirectives that includes line offset information.
+ * The lineOffset indicates how many lines were removed from the beginning
+ * before the first content line, which is needed to correctly report
+ * line numbers in warnings and errors.
+ */
+type directiveParseResult = {
+  metadata: sceneMetadata,
+  contentLines: array<string>,
+  lineOffset: int,  // Number of directive lines stripped from the beginning
+}
+
+/**
+ * Parse scene directives and track line offset.
+ * Returns metadata, content lines, and the number of lines stripped from the beginning.
+ *
+ * The lineOffset is calculated as the index of the first content line in the original
+ * input. This offset is needed to convert grid row numbers back to original file line numbers.
+ *
+ * Example:
+ * - Input: ["@scene: login", "", "+---+", ...]
+ * - Output: contentLines = ["", "+---+", ...], lineOffset = 1
+ *
+ * Grid row 0 corresponds to original line (0 + lineOffset + 1) = line 2 (1-indexed)
+ */
+let parseSceneDirectivesWithOffset = (lines: array<string>): directiveParseResult => {
   // Use mutable refs to accumulate directive values
   let sceneId = ref(None)
   let title = ref(None)
   let transition = ref(None)
   let device = ref(None)
   let contentLines = []
 
-  lines->Array.forEach(line => {
+  // Track the index of the first content line (for line offset calculation)
+  let firstContentLineIndex = ref(None)
+
+  lines->Array.forEachWithIndex((line, lineIndex) => {
     let trimmed = line->String.trim
 
     if trimmed->String.startsWith("@scene:") {
@@ -301,6 +329,10 @@ let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>
       ()
     } else {
       // Non-directive line - add to content
+      // Track the index of the first content line
+      if firstContentLineIndex.contents === None {
+        firstContentLineIndex := Some(lineIndex)
+      }
       contentLines->Array.push(line)
     }
   })
@@ -334,7 +366,27 @@ let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>
     device: finalDevice,
   }
 
-  (metadata, contentLines)
+  // Calculate line offset: index of first content line
+  // If no content lines, offset is 0
+  let lineOffset = switch firstContentLineIndex.contents {
+  | Some(idx) => idx
+  | None => 0
+  }
+
+  {
+    metadata,
+    contentLines,
+    lineOffset,
+  }
+}
+
+/**
+ * Parse scene directives from an array of lines.
+ * This is the original API that returns just (metadata, contentLines) for backward compatibility.
+ */
+let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>) => {
+  let result = parseSceneDirectivesWithOffset(lines)
+  (result.metadata, result.contentLines)
 }
 
 /**